From e166f5356a3d9f08294b655db85e507e82e927f7 Mon Sep 17 00:00:00 2001 From: logonoff Date: Mon, 13 Jan 2025 10:44:40 -0500 Subject: [PATCH] feat: restore custom background --- README.md | 2 +- _includes/head.html | 30 +- _includes/styles/errors.css | 4 + _includes/styles/index.css | 523 ++------------------------------- _includes/styles/login.css | 4 + _includes/styles/providers.css | 4 + generate-styles.mjs | 9 +- 7 files changed, 81 insertions(+), 495 deletions(-) diff --git a/README.md b/README.md index 7632320..ee459bf 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,7 @@ To undo the changes for testing: The RHO branded templates take advantage of the override mechanism by providing customized templates via secrets via the following method: 1. Copy the output from `yarn generate-branding-secret` to https://github.com/openshift/cluster-authentication-operator/blob/master/bindata/oauth-openshift/branding-secret.yaml. -2. Submit a pull request to https://github.com/openshift/cluster-authentication-operator containing the copied changes. +1. Submit a pull request to https://github.com/openshift/cluster-authentication-operator containing the copied changes. To test the changes: diff --git a/_includes/head.html b/_includes/head.html index d5d9214..dd7e047 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -35,7 +35,35 @@ {% if collection.label != 'okd' %} .pf-v6-c-background-image { - background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 192 145' version='1.1' viewBox='0 0 192 145' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .rh%7Bfill:%23A3A3A3;%7D%3C/style%3E%3Cpath class='rh' opacity='0.2' d='m127.5 83.5c12.5 0 30.6-2.6 30.6-17.5 0-1.2 0-2.3-0.3-3.4l-7.4-32.4c-1.7-7.1-3.2-10.3-15.7-16.6-9.7-5-30.8-13.1-37.1-13.1-5.9 0-7.6 7.5-14.5 7.5-6.7 0-11.6-5.6-17.9-5.6-6 0-9.9 4.1-12.9 12.5 0 0-8.4 23.7-9.5 27.2-0.2 0.6-0.2 1.4-0.2 1.9-0.1 9.3 36.2 39.5 84.9 39.5m32.5-11.4c1.7 8.2 1.7 9.1 1.7 10.1 0 14-15.7 21.8-36.4 21.8-46.8 0-87.7-27.4-87.7-45.5 0-2.8 0.6-5.4 1.5-7.3-16.8 0.8-38.6 3.8-38.6 23 0 31.5 74.6 70.3 133.7 70.3 45.3 0 56.7-20.5 56.7-36.6-0.1-12.8-11-27.2-30.9-35.8'/%3E%3C/svg%3E") !important; + background-color: var(--pf-t--global--background--color--secondary--default); + background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 192 145' version='1.1' viewBox='0 0 192 145' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .rh%7Bfill:%23A3A3A3;%7D%3C/style%3E%3Cpath class='rh' opacity='0.2' d='m127.5 83.5c12.5 0 30.6-2.6 30.6-17.5 0-1.2 0-2.3-0.3-3.4l-7.4-32.4c-1.7-7.1-3.2-10.3-15.7-16.6-9.7-5-30.8-13.1-37.1-13.1-5.9 0-7.6 7.5-14.5 7.5-6.7 0-11.6-5.6-17.9-5.6-6 0-9.9 4.1-12.9 12.5 0 0-8.4 23.7-9.5 27.2-0.2 0.6-0.2 1.4-0.2 1.9-0.1 9.3 36.2 39.5 84.9 39.5m32.5-11.4c1.7 8.2 1.7 9.1 1.7 10.1 0 14-15.7 21.8-36.4 21.8-46.8 0-87.7-27.4-87.7-45.5 0-2.8 0.6-5.4 1.5-7.3-16.8 0.8-38.6 3.8-38.6 23 0 31.5 74.6 70.3 133.7 70.3 45.3 0 56.7-20.5 56.7-36.6-0.1-12.8-11-27.2-30.9-35.8'/%3E%3C/svg%3E"); + background-position: 110% 105%; + background-repeat: no-repeat; + background-size: 90%; + @media (min-width: 768px) { + background-size: 80%; + } + @media (min-width: 1000px) { + background-position: 110% 100%; + background-size: 70%; + } + @media(min-width: 1200px) { + background-position: 100% 70%; + background-size: 70%; + } + @media (min-width: 1400px) { + background-size: 75%; + } + @media (min-width: 1800px) { + background-size: 70%; + } + @media (min-width: 1800px) { + background-position: 75% 80%; + background-size: 60%; + } + @media (min-width: 2200px) { + background-size: 50%; + } } {% endif %} diff --git a/_includes/styles/errors.css b/_includes/styles/errors.css index 8151c4a..993d578 100644 --- a/_includes/styles/errors.css +++ b/_includes/styles/errors.css @@ -104,6 +104,7 @@ body) { --pf-t--global--spacer--700: 4rem; --pf-t--global--text-decoration--line--200: underline; --pf-t--global--background--color--100: var(--pf-t--color--white); + --pf-t--global--background--color--200: var(--pf-t--color--gray--10); --pf-t--global--border--color--100: var(--pf-t--color--gray--30); --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400); --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60); @@ -127,6 +128,7 @@ body) { --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200); --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100); + --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200); --pf-t--global--border--color--default: var(--pf-t--global--border--color--100); --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--100); --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm); @@ -139,6 +141,7 @@ body) { } :root:where(.pf-v6-theme-dark) { + --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95); --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80); --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40); --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50); @@ -147,6 +150,7 @@ body) { --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20); --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10); --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100); --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200); --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--100); --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100); diff --git a/_includes/styles/index.css b/_includes/styles/index.css index cfc5053..17ff5ab 100644 --- a/_includes/styles/index.css +++ b/_includes/styles/index.css @@ -2,6 +2,8 @@ :where(html, body, p, +ul, +li, h1, h2) { padding: 0; @@ -48,6 +50,10 @@ h2) { font-weight: var(--pf-t--global--font--weight--body--default); } +:where(ul) { + list-style: none; +} + :where(a) { color: var(--pf-t--global--text--color--link--default); text-decoration: var(--pf-t--global--text-decoration--link--line--default); @@ -80,512 +86,91 @@ h2) { :root { --pf-t--color--blue--10: #e0f0ff; --pf-t--color--blue--20: #b9dafc; - --pf-t--color--blue--30: #92c5f9; --pf-t--color--blue--50: #0066cc; --pf-t--color--blue--60: #004d99; - --pf-t--color--gray--10: #f2f2f2; --pf-t--color--gray--30: #c7c7c7; --pf-t--color--gray--40: #a3a3a3; - --pf-t--color--gray--60: #4d4d4d; - --pf-t--color--gray--70: #383838; - --pf-t--color--gray--80: #292929; --pf-t--color--gray--95: #151515; --pf-t--color--white: #ffffff; - --pf-t--global--border--radius--300: 16px; - --pf-t--global--border--radius--500: 999px; - --pf-t--global--border--width--100: 1px; - --pf-t--global--border--width--200: 2px; - --pf-t--global--duration--100: 100ms; - --pf-t--global--duration--200: 200ms; --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; --pf-t--global--font--line-height--100: 1.3; --pf-t--global--font--line-height--200: 1.5; - --pf-t--global--font--size--100: 0.75rem; --pf-t--global--font--size--200: 0.875rem; - --pf-t--global--font--size--300: 1rem; + --pf-t--global--font--size--500: 1.25rem; --pf-t--global--font--size--600: 1.5rem; --pf-t--global--font--weight--100: 400; --pf-t--global--font--weight--300: 500; --pf-t--global--font--weight--400: 700; --pf-t--global--spacer--100: 0.25rem; --pf-t--global--spacer--200: 0.5rem; - --pf-t--global--spacer--300: 1rem; --pf-t--global--spacer--400: 1.5rem; - --pf-t--global--spacer--600: 3rem; - --pf-t--global--spacer--700: 4rem; --pf-t--global--text-decoration--line--200: underline; - --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1); - --pf-t--global--background--color--100: var(--pf-t--color--white); --pf-t--global--background--color--200: var(--pf-t--color--gray--10); --pf-t--global--border--color--100: var(--pf-t--color--gray--30); - --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300); - --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500); - --pf-t--global--border--width--action--default: var(--pf-t--global--border--width--100); - --pf-t--global--border--width--action--hover: var(--pf-t--global--border--width--200); - --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100); - --pf-t--global--color--brand--200: var(--pf-t--color--blue--50); - --pf-t--global--color--brand--300: var(--pf-t--color--blue--60); - --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30); - --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60); --pf-t--global--font--family--body: var(--pf-t--global--font--family--100); --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200); --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200); --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100); --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600); - --pf-t--global--font--size--md: var(--pf-t--global--font--size--300); --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200); - --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100); + --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500); --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100); --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400); --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300); - --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200); - --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100); - --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200); - --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600); - --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700); --pf-t--global--spacer--lg: var(--pf-t--global--spacer--400); - --pf-t--global--spacer--md: var(--pf-t--global--spacer--300); --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200); --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100); --pf-t--global--text--color--100: var(--pf-t--color--gray--95); - --pf-t--global--text--color--200: var(--pf-t--color--gray--60); --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50); --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60); --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200); - --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100); - --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100); --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200); --pf-t--global--border--color--default: var(--pf-t--global--border--color--100); - --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200); - --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300); --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm); - --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs); --pf-t--global--font--size--heading--h1: var(--pf-t--global--font--size--2xl); - --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md); - --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm); - --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg); - --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm); - --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm); - --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md); + --pf-t--global--font--size--heading--h2: var(--pf-t--global--font--size--xl); --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100); --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--200); - --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300); --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100); - --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200); - --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); - --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); - --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default); - --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover); - --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md); + --pf-t--global--list-style: disc outside; } :root:where(.pf-v6-theme-dark) { --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95); - --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80); --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40); - --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30); - --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20); - --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10); - --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40); - --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70); --pf-t--global--dark--text--color--100: var(--pf-t--color--white); - --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30); --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20); --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10); - --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100); - --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100); --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200); - --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100); - --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200); - --pf-t--global--text--color--brand--default: var(--pf-t--global--dark--color--brand--200); - --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300); --pf-t--global--text--color--link--default: var(--pf-t--global--dark--text--color--link--100); --pf-t--global--text--color--link--hover: var(--pf-t--global--dark--text--color--link--200); - --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--300); --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100); - --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200); - --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); - --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); -} - -.pf-v6-c-background-image { - --pf-v6-c-background-image--BackgroundColor: var(--pf-t--global--background--color--primary--default); - --pf-v6-c-background-image--BackgroundImage: none; - --pf-v6-c-background-image--BackgroundSize--min-width: 200px; - --pf-v6-c-background-image--BackgroundSize--width: 60%; - --pf-v6-c-background-image--BackgroundSize--max-width: 600px; - --pf-v6-c-background-image--BackgroundSize: clamp(var(--pf-v6-c-background-image--BackgroundSize--min-width), var(--pf-v6-c-background-image--BackgroundSize--width), var(--pf-v6-c-background-image--BackgroundSize--max-width)); -} - -.pf-v6-c-background-image { - --pf-v6-c-background-image--BackgroundPosition: bottom right; - position: fixed; - inset-block-start: 0; - inset-inline-start: 0; - z-index: -1; - width: 100%; - height: 100%; - background-color: var(--pf-v6-c-background-image--BackgroundColor); - background-image: var(--pf-v6-c-background-image--BackgroundImage); - background-repeat: no-repeat; - background-position: var(--pf-v6-c-background-image--BackgroundPosition); - background-size: var(--pf-v6-c-background-image--BackgroundSize); -} - -.pf-v6-c-brand { - --pf-v6-c-brand--Width: auto; - --pf-v6-c-brand--Height: auto; -} - -.pf-v6-c-brand { - width: var(--pf-v6-c-brand--Width--base); - height: var(--pf-v6-c-brand--Height--base); - --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width); - --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height); -} -@media (min-width: 36rem) { - .pf-v6-c-brand { - --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)); - } -} -@media (min-width: 48rem) { - .pf-v6-c-brand { - --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))); - } -} -@media (min-width: 62rem) { - .pf-v6-c-brand { - --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)))); - } -} -@media (min-width: 75rem) { - .pf-v6-c-brand { - --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))); - } -} -@media (min-width: 90.625rem) { - .pf-v6-c-brand { - --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)))))); - } -} -@media (min-width: 36rem) { - .pf-v6-c-brand { - --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)); - } -} -@media (min-width: 48rem) { - .pf-v6-c-brand { - --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))); - } -} -@media (min-width: 62rem) { - .pf-v6-c-brand { - --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)))); - } -} -@media (min-width: 75rem) { - .pf-v6-c-brand { - --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))))); - } -} -@media (min-width: 90.625rem) { - .pf-v6-c-brand { - --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-2xl, var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)))))); - } -} - -.pf-v6-c-button { - --pf-v6-c-button--Display: inline-flex; - --pf-v6-c-button--AlignItems: baseline; - --pf-v6-c-button--JustifyContent: center; - --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default); - --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd)); - --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default); - --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default); - --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default); - --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default); - --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular); - --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body); - --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default); - --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default); - --pf-v6-c-button--BackgroundColor: transparent; - --pf-v6-c-button--BorderColor: transparent; - --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default); - --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill); - --pf-v6-c-button--TextDecorationLine: none; - --pf-v6-c-button--TextDecorationStyle: none; - --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default); - --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); - --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding; - --pf-v6-c-button--hover--BackgroundColor: transparent; - --pf-v6-c-button--hover--BorderColor: transparent; - --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover); - --pf-v6-c-button--hover--TextDecorationLine: none; - --pf-v6-c-button--hover--TextDecorationStyle: none; - --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default); - --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default); - --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); - --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover); - --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover); - --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled); - --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); -} - -.pf-v6-c-button { - position: relative; - display: var(--pf-v6-c-button--Display); - gap: var(--pf-v6-c-button--Gap); - align-items: var(--pf-v6-c-button--AlignItems); - justify-content: var(--pf-v6-c-button--JustifyContent); - min-width: var(--pf-v6-c-button--MinWidth); - padding-block-start: var(--pf-v6-c-button--PaddingBlockStart); - padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd); - padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart); - padding-inline-end: var(--pf-v6-c-button--PaddingInlineEnd); - font-size: var(--pf-v6-c-button--FontSize, inherit); - font-weight: var(--pf-v6-c-button--FontWeight, inherit); - line-height: var(--pf-v6-c-button--LineHeight, inherit); - color: var(--pf-v6-c-button--Color); - text-align: center; - text-decoration: var(--pf-v6-c-button--TextDecorationLine) var(--pf-v6-c-button--TextDecorationStyle); - white-space: nowrap; - cursor: pointer; - user-select: none; - background-color: var(--pf-v6-c-button--BackgroundColor); - border: 0; - border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius)); - border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius)); - border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius)); - border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius)); - transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction); - transition-duration: var(--pf-v6-c-button--TransitionDuration); - transition-property: var(--pf-v6-c-button--TransitionProperty); -} -.pf-v6-c-button::after { - position: absolute; - inset: 0; - pointer-events: none; - content: ""; - border: var(--pf-v6-c-button--BorderWidth) solid; - border-color: var(--pf-v6-c-button--BorderColor); - border-radius: inherit; - transition: inherit; -} -.pf-v6-c-button.pf-m-secondary { - --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color); - --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-secondary--BorderColor); - --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-secondary--TransitionDuration); - --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-secondary--hover--Color); - --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-secondary--hover--BorderColor); -} -.pf-v6-c-button:hover, .pf-v6-c-button:focus { - --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color); - --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor); - --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor); - --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth); - text-decoration: var(--pf-v6-c-button--hover--TextDecorationLine) var(--pf-v6-c-button--hover--TextDecorationStyle); -} -.pf-v6-c-button:disabled { - pointer-events: none; -} -.pf-v6-c-button:disabled { - color: var(--pf-v6-c-button--disabled--Color); - background-color: var(--pf-v6-c-button--disabled--BackgroundColor); -} -.pf-v6-c-button:disabled::after { - border-color: transparent; -} - -.pf-v6-c-card { - --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default); - --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default); - --pf-v6-c-card--BorderStyle: solid; - --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default); - --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium); - --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg); - --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg); - --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg); - --pf-v6-c-card--child--PaddingInlineStart: var(--pf-t--global--spacer--lg); - --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md); - --pf-v6-c-card__title-text--Color: var(--pf-t--global--text--color--regular); - --pf-v6-c-card__title-text--FontFamily: var(--pf-t--global--font--family--heading); - --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs); - --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default); - --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading); - --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default); - --pf-v6-c-card__footer--Color: var(--pf-t--global--text--color--subtle); - --pf-v6-c-card--m-compact__title-text--FontSize: var(--pf-t--global--font--size--heading--xs); - --pf-v6-c-card--m-compact__footer--FontSize: var(--pf-t--global--font--size--body--sm); - --pf-v6-c-card--m-compact--first-child--PaddingBlockStart: var(--pf-t--global--spacer--md); - --pf-v6-c-card--m-compact--child--PaddingInlineEnd: var(--pf-t--global--spacer--md); - --pf-v6-c-card--m-compact--child--PaddingBlockEnd: var(--pf-t--global--spacer--md); - --pf-v6-c-card--m-compact--child--PaddingInlineStart: var(--pf-t--global--spacer--md); - --pf-v6-c-card--m-compact__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--sm); - --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default); - --pf-v6-c-card--m-secondary--BorderColor: transparent; -} - -.pf-v6-c-card { - position: relative; - display: flex; - flex-direction: column; - overflow: auto; - background-color: var(--pf-v6-c-card--BackgroundColor); - border: 0; - border-radius: var(--pf-v6-c-card--BorderRadius); -} -.pf-v6-c-card::before { - position: absolute; - inset: 0; - pointer-events: none; - content: ""; - border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth); - border-radius: inherit; -} -.pf-v6-c-card.pf-m-compact { - --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize); - --pf-v6-c-card__footer--FontSize: var(--pf-v6-c-card--m-compact__footer--FontSize); - --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-v6-c-card--m-compact--first-child--PaddingBlockStart); - --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-v6-c-card--m-compact--child--PaddingInlineEnd); - --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-v6-c-card--m-compact--child--PaddingBlockEnd); - --pf-v6-c-card--child--PaddingInlineStart: var(--pf-v6-c-card--m-compact--child--PaddingInlineStart); - --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-compact__title--not--last-child--PaddingBlockEnd); -} -.pf-v6-c-card.pf-m-secondary { - --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor); - --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor); -} - -.pf-v6-c-card__title-text { - font-family: var(--pf-v6-c-card__title-text--FontFamily); - font-size: var(--pf-v6-c-card__title-text--FontSize); - font-weight: var(--pf-v6-c-card__title-text--FontWeight); - line-height: var(--pf-v6-c-card__title-text--LineHeight); - color: var(--pf-v6-c-card__title-text--Color); -} - - -.pf-v6-c-card__title, -.pf-v6-c-card__footer { - padding-block-end: var(--pf-v6-c-card--child--PaddingBlockEnd); - padding-inline-start: var(--pf-v6-c-card--child--PaddingInlineStart); - padding-inline-end: var(--pf-v6-c-card--child--PaddingInlineEnd); -} - -.pf-v6-c-card__title:first-child, -.pf-v6-c-card__footer:first-child { - padding-block-start: var(--pf-v6-c-card--first-child--PaddingBlockStart); -} - - -.pf-v6-c-card__title:not(:last-child) { - padding-block-end: var(--pf-v6-c-card__title--not--last-child--PaddingBlockEnd); -} - -.pf-v6-c-card__footer { - font-size: var(--pf-v6-c-card__footer--FontSize); - color: var(--pf-v6-c-card__footer--Color); } :root { } -.pf-v6-c-login { - --pf-v6-c-login--PaddingBlockStart: var(--pf-t--global--spacer--lg); - --pf-v6-c-login--PaddingBlockEnd: var(--pf-t--global--spacer--lg); - --pf-v6-c-login__container--xl--GridColumnGap: var(--pf-t--global--spacer--3xl); - --pf-v6-c-login__container--MaxWidth: 31.25rem; - --pf-v6-c-login__container--xl--MaxWidth: none; - --pf-v6-c-login__container--PaddingInlineStart: 6.125rem; - --pf-v6-c-login__container--PaddingInlineEnd: 6.125rem; - --pf-v6-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem); - --pf-v6-c-login__header--PaddingInlineStart: var(--pf-t--global--spacer--md); - --pf-v6-c-login__header--PaddingInlineEnd: var(--pf-t--global--spacer--md); - --pf-v6-c-login__header--xl--MarginBlockStart: var(--pf-t--global--spacer--3xl); - --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-t--global--spacer--lg); - --pf-v6-c-login__header--c-brand--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl); -} -@media (min-width: 75rem) { - .pf-v6-c-login { - --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth); - } -} -@media (min-width: 36rem) { - .pf-v6-c-login { - --pf-v6-c-login__header--PaddingInlineEnd: 0; - --pf-v6-c-login__header--PaddingInlineStart: 0; - } -} -@media (min-width: 75rem) { - .pf-v6-c-login { - --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd); - } -} -@media (min-width: 75rem) { - .pf-v6-c-login { - } -} -@media (min-width: 48rem) { - .pf-v6-c-login { - } -} -@media (min-width: 48rem) { - .pf-v6-c-login { - } -} -@media (min-width: 36rem) { - .pf-v6-c-login { - } -} -@media (min-width: 75rem) { - .pf-v6-c-login { - } +.pf-v6-c-list { + --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg); + --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style); + --pf-v6-c-list--Gap: var(--pf-t--global--spacer--sm); + --pf-v6-c-list--nested--PaddingBlockStart: var(--pf-v6-c-list--Gap); } -.pf-v6-c-login { +.pf-v6-c-list { display: flex; - justify-content: center; - min-height: 100vh; - padding-block-start: var(--pf-v6-c-login--PaddingBlockStart); - padding-block-end: var(--pf-v6-c-login--PaddingBlockEnd); -} -@media (min-width: 36rem) { - .pf-v6-c-login { - align-items: center; - } -} - -.pf-v6-c-login__container { - width: 100%; - max-width: var(--pf-v6-c-login__container--MaxWidth); -} -@media (min-width: 75rem) { - .pf-v6-c-login__container { - display: grid; - grid-template-areas: "main header" "main footer" "main ."; - grid-template-columns: var(--pf-v6-c-login__container--xl--GridTemplateColumns); - grid-column-gap: var(--pf-v6-c-login__container--xl--GridColumnGap); - justify-content: center; - padding-inline-start: var(--pf-v6-c-login__container--PaddingInlineStart); - padding-inline-end: var(--pf-v6-c-login__container--PaddingInlineEnd); - } -} - -.pf-v6-c-login__header { - grid-area: header; - padding-inline-start: var(--pf-v6-c-login__header--PaddingInlineStart); - padding-inline-end: var(--pf-v6-c-login__header--PaddingInlineEnd); + flex-direction: column; + gap: var(--pf-v6-c-list--Gap); + padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart); } -@media (min-width: 75rem) { - .pf-v6-c-login__header { - margin-block-start: var(--pf-v6-c-login__header--xl--MarginBlockStart); - } +.pf-v6-c-list .pf-v6-c-list { + padding-block-start: var(--pf-v6-c-list--nested--PaddingBlockStart); } -.pf-v6-c-login__header .pf-v6-c-brand { - margin-block-end: var(--pf-v6-c-login__header--c-brand--MarginBlockEnd); +ul.pf-v6-c-list { + list-style: var(--pf-v6-c-list--ul--ListStyle); } .pf-v6-c-title { @@ -593,6 +178,9 @@ h2) { --pf-v6-c-title--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading); --pf-v6-c-title--m-h1--FontSize: var(--pf-t--global--font--size--heading--h1); --pf-v6-c-title--m-h1--FontWeight: var(--pf-t--global--font--weight--heading--default); + --pf-v6-c-title--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading); + --pf-v6-c-title--m-h2--FontSize: var(--pf-t--global--font--size--heading--h2); + --pf-v6-c-title--m-h2--FontWeight: var(--pf-t--global--font--weight--heading--default); --pf-v6-c-title--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold); } @@ -605,60 +193,11 @@ h2) { font-weight: var(--pf-v6-c-title--m-h1--FontWeight); line-height: var(--pf-v6-c-title--m-h1--LineHeight); } +.pf-v6-c-title.pf-m-h2 { + font-size: var(--pf-v6-c-title--m-h2--FontSize); + font-weight: var(--pf-v6-c-title--m-h2--FontWeight); + line-height: var(--pf-v6-c-title--m-h2--LineHeight); +} .pf-v6-c-title.pf-m-page-title { font-weight: var(--pf-v6-c-title--m-page-title--FontWeight); -} - -.pf-v6-l-flex { - --pf-v6-l-flex--Display: flex; - --pf-v6-l-flex--FlexWrap: wrap; - --pf-v6-l-flex--AlignItems: baseline; - --pf-v6-l-flex--item--Order: 0; - --pf-v6-l-flex--spacer--column--base: var(--pf-t--global--spacer--gutter--default); - --pf-v6-l-flex--spacer--row--base: var(--pf-t--global--spacer--sm); - --pf-v6-l-flex--RowGap: var(--pf-v6-l-flex--spacer--row--base); - --pf-v6-l-flex--ColumnGap: 0; -} - -.pf-v6-l-flex { - display: var(--pf-v6-l-flex--Display); - flex-wrap: var(--pf-v6-l-flex--FlexWrap); - gap: var(--pf-v6-l-flex--RowGap) var(--pf-v6-l-flex--ColumnGap); - align-items: var(--pf-v6-l-flex--AlignItems); -} - -.pf-v6-l-flex > * { - --pf-v6-l-flex--spacer: initial; - --pf-v6-l-flex--spacer--column: var(--pf-v6-l-flex--spacer, var(--pf-v6-l-flex--spacer--column--base)); - order: var(--pf-v6-l-flex--item--Order); - max-width: 100%; - margin-inline-end: var(--pf-v6-l-flex--spacer--column); -} -@media screen and (min-width: 36rem) { - .pf-v6-l-flex > * { - order: var(--pf-v6-l-flex--item--Order-on-sm, var(--pf-v6-l-flex--item--Order)); - } -} -@media screen and (min-width: 48rem) { - .pf-v6-l-flex > * { - order: var(--pf-v6-l-flex--item--Order-on-md, var(--pf-v6-l-flex--item--Order-on-sm, var(--pf-v6-l-flex--item--Order))); - } -} -@media screen and (min-width: 62rem) { - .pf-v6-l-flex > * { - order: var(--pf-v6-l-flex--item--Order-on-lg, var(--pf-v6-l-flex--item--Order-on-md, var(--pf-v6-l-flex--item--Order-on-sm, var(--pf-v6-l-flex--item--Order)))); - } -} -@media screen and (min-width: 75rem) { - .pf-v6-l-flex > * { - order: var(--pf-v6-l-flex--item--Order-on-xl, var(--pf-v6-l-flex--item--Order-on-lg, var(--pf-v6-l-flex--item--Order-on-md, var(--pf-v6-l-flex--item--Order-on-sm, var(--pf-v6-l-flex--item--Order))))); - } -} -@media screen and (min-width: 90.625rem) { - .pf-v6-l-flex > * { - order: var(--pf-v6-l-flex--item--Order-on-2xl, var(--pf-v6-l-flex--item--Order-on-xl, var(--pf-v6-l-flex--item--Order-on-lg, var(--pf-v6-l-flex--item--Order-on-md, var(--pf-v6-l-flex--item--Order-on-sm, var(--pf-v6-l-flex--item--Order)))))); - } -} -.pf-v6-l-flex > *:last-child { - --pf-v6-l-flex--spacer: 0; } \ No newline at end of file diff --git a/_includes/styles/login.css b/_includes/styles/login.css index 5298868..ef06683 100644 --- a/_includes/styles/login.css +++ b/_includes/styles/login.css @@ -139,6 +139,7 @@ button) { --pf-t--global--text-decoration--line--200: underline; --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1); --pf-t--global--background--color--100: var(--pf-t--color--white); + --pf-t--global--background--color--200: var(--pf-t--color--gray--10); --pf-t--global--border--color--100: var(--pf-t--color--gray--30); --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400); --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500); @@ -187,6 +188,7 @@ button) { --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200); --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100); --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100); + --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200); --pf-t--global--border--color--default: var(--pf-t--global--border--color--100); --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100); --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200); @@ -226,6 +228,7 @@ button) { } :root:where(.pf-v6-theme-dark) { + --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95); --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80); --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70); --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40); @@ -245,6 +248,7 @@ button) { --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300); --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100); --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100); --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200); --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100); --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100); diff --git a/_includes/styles/providers.css b/_includes/styles/providers.css index 6a2ad75..3062250 100644 --- a/_includes/styles/providers.css +++ b/_includes/styles/providers.css @@ -119,6 +119,7 @@ body) { --pf-t--global--text-decoration--line--200: underline; --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1); --pf-t--global--background--color--100: var(--pf-t--color--white); + --pf-t--global--background--color--200: var(--pf-t--color--gray--10); --pf-t--global--border--color--100: var(--pf-t--color--gray--30); --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400); --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500); @@ -154,6 +155,7 @@ body) { --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200); --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100); --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100); + --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200); --pf-t--global--border--color--default: var(--pf-t--global--border--color--100); --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200); --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300); @@ -178,6 +180,7 @@ body) { } :root:where(.pf-v6-theme-dark) { + --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95); --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80); --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40); --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30); @@ -191,6 +194,7 @@ body) { --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10); --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100); --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100); --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200); --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100); --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200); diff --git a/generate-styles.mjs b/generate-styles.mjs index 1261091..da01561 100644 --- a/generate-styles.mjs +++ b/generate-styles.mjs @@ -21,7 +21,14 @@ const cssForLayouts = layouts.map(async (layout) => { content: [`./_site/**/${layout}.html`, `./_site/${layout}.html'`], css: ['./node_modules/@patternfly/patternfly/{patternfly,patternfly-addons}.css'], keyframes: true, - variables: true + variables: true, + safelist: { + variables: [ + '--pf-t--global--background--color--secondary--default', + '--pf-t--global--background--color--200', + '--pf-t--global--dark--background--color--100' + ] + }, }).then(purgeResult => { // Concatenate all the purged CSS files into one const css = purgeResult.reduce((acc, result) => `${acc} ${result['css']}`, '');