diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 9df5a9be13..2da8533c67 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -4237,37 +4237,6 @@ "react-dom": "^17 || ^18" } }, - "node_modules/@patternfly/react-virtualized-extension/node_modules/@patternfly/react-core": { - "version": "6.0.0-alpha.61", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0-alpha.61.tgz", - "integrity": "sha512-rQ1xPXRpSYktFYEQ7pywWf/GconQhA+RNYd+aVAMIR6JnSDG/9Ws5yFKIHAlHROXtjLJIHgz8TmFSBM1aW0AkQ==", - "dependencies": { - "@patternfly/react-icons": "^6.0.0-alpha.23", - "@patternfly/react-styles": "^6.0.0-alpha.23", - "@patternfly/react-tokens": "^6.0.0-alpha.23", - "focus-trap": "7.5.4", - "react-dropzone": "^14.2.3", - "tslib": "^2.6.2" - }, - "peerDependencies": { - "react": "^17 || ^18", - "react-dom": "^17 || ^18" - } - }, - "node_modules/@patternfly/react-virtualized-extension/node_modules/@patternfly/react-icons": { - "version": "6.0.0-alpha.23", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.0.0-alpha.23.tgz", - "integrity": "sha512-OfKHrS2ZSmu9fMEBKQ2t6ZeJ/uw1y7pobxATWn08NHJvscAceiN5a76VET2+kLrHYXCpK/EYjgpTlXNmm0hZKw==", - "peerDependencies": { - "react": "^17 || ^18", - "react-dom": "^17 || ^18" - } - }, - "node_modules/@patternfly/react-virtualized-extension/node_modules/@patternfly/react-styles": { - "version": "6.0.0-alpha.23", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.0.0-alpha.23.tgz", - "integrity": "sha512-N8HuDF68rFRJkWVoCDSUauiOrnjcLHUFrGJGaxnjynzee+GbpHf22NS9E9xmc25CDDzICMrU/SvthocxzQowKA==" - }, "node_modules/@polka/url": { "version": "1.0.0-next.23", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz", diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.css b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.css new file mode 100644 index 0000000000..85270ddd4e --- /dev/null +++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.css @@ -0,0 +1,210 @@ +@import url("overrides-from-figma.css"); + +:root { + --mui-palette-primary-light: #42a5f5; + --mui-palette-secondary-light: #ba68c8; + --mui-palette-error-light: #ef5350; + --mui-palette-warning-light: #ff9800; + --mui-palette-info-light: #03a9f4; + --mui-palette-success-light: #4caf50; + + --mui-palette-primary-main: #1976d2; + --mui-palette-secondary-main: #9c27b0; + --mui-palette-error-main: #d32f2f; + --mui-palette-warning-main: #ed6c02; + --mui-palette-info-main: #0288d1; + --mui-palette-success-main: #2e7d32; + + --mui-palette-primary-dark: #1565c0; + --mui-palette-secondary-dark: #7b1fa2; + --mui-palette-error-dark: #c62828; + --mui-palette-warning-dark: #e65100; + --mui-palette-info-dark: #01579b; + --mui-palette-success-dark: #1b5e20; + + --mui-alert-warning-text: #663c00; + --mui-alert-warning-font-weight: 400; + + --mui-button-font-weight: 500; + + --pf-t--global--border--width--box--status--default: 1px; + --pf-t--global--border--radius--pill: 4px; + --pf-t--global--border--radius--medium: 4px; +} + + .pf-v6-c-alert { + --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--status--warning--default); + --pf-v6-c-alert__icon--MarginInlineEnd: 12px; + --pf-v6-c-alert__title--FontWeight: var(--mui-alert-warning-font-weight); + --pf-v6-c-alert__icon--MarginInlineEnd: 12px; + --pf-v6-c-alert__icon--MarginBlockStart: 7px; + --pf-v6-c-alert__icon--FontSize: 22px; + --pf-v6-c-alert--BoxShadow: none; + --pf-v6-c-alert--PaddingBlockStart: 6px; + --pf-v6-c-alert--PaddingBlockEnd: 6px; + --pf-v6-c-alert--PaddingInlineStart: 16px; + --pf-v6-c-alert--PaddingInlineStart: 16px; +} + + .pf-v6-c-alert__title { + padding-block: 8px; +} + + .pf-v6-c-alert__icon { + margin-block-end: 7px; +} + + .pf-v6-c-button { + --pf-v6-c-button--FontWeight: var(--mui-button-font-weight); + --pf-v6-c-button--PaddingBlockStart: 6px; + --pf-v6-c-button--PaddingBlockEnd: 6px; + --pf-v6-c-button--PaddingInlineStart: 16px; + --pf-v6-c-button--PaddingInlineEnd: 16px; + --pf-v6-c-button--LineHeight: 1.75; + + text-transform: uppercase; + letter-spacing: 0.02857em; +} + + .pf-v6-c-menu { + --pf-v6-c-menu--BoxShadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); + --pf-v6-c-menu--BorderRadius: 4px; + --pf-v6-c-menu--PaddingBlockStart: 8px; + --pf-v6-c-menu--PaddingBlockEnd: 8px; + --pf-v6-c-menu--PaddingInlineStart: 8px; + --pf-v6-c-menu--PaddingInlineEnd: 8px; + --pf-v6-c-menu__item--PaddingBlockStart: 6px; + --pf-v6-c-menu__item--PaddingBlockEnd: 6px; + --pf-v6-c-menu__item--PaddingInlineStart: 16px; + --pf-v6-c-menu__item--PaddingInlineEnd: 16px; + --pf-v6-c-menu__item--FontSize: 1rem; +} + + .pf-v6-c-menu-toggle { + --pf-v6-c-menu-toggle__controls--MinWidth: 0; + --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-palette-primary-main); + --pf-v6-c-menu-toggle--LineHeight: 1.75; + --pf-v6-c-menu-toggle--PaddingBlockStart: 6px; + --pf-v6-c-menu-toggle--PaddingBlockEnd: 6px; + --pf-v6-c-menu-toggle--PaddingInlineStart: 16px; + --pf-v6-c-menu-toggle--PaddingInlineEnd: 16px; + --pf-v6-c-menu-toggle--ColumnGap: 0; + + text-transform: uppercase; + font-weight: var(--mui-button-font-weight); + letter-spacing: 0.02857em; +} + + .pf-v6-c-menu-toggle__toggle-icon { + margin-right: -4px; + margin-left: 8px; + font-size: 20px; +} + + .pf-v6-c-table { + --pf-v6-c-table__sort--m-selected__button--Color: #000000de; + --pf-v6-c-table__button--BackgroundColor: none; + --pf-v6-c-table__button--hover--BackgroundColor: none; + --pf-v6-c-table__sort-indicator--Color: #666; + --pf-v6-c-table__sort__button--hover__sort-indicator--Color: #00000050; + --pf-v6-c-table__sort__button--hover__text--Color: #00000099; + --pf-v6-c-table--cell--Color: rgba(0, 0, 0, 0.87); + --pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--Color); + --pf-v6-c-table__button--PaddingBlockStart: 0; + --pf-v6-c-table__button--PaddingBlockEnd: 0; + --pf-v6-c-table__button--PaddingInlineStart: 0; + --pf-v6-c-table__button--PaddingInlineEnd: 0; + --pf-v6-c-table--cell--PaddingInlineStart: 16px; + --pf-v6-c-table--cell--PaddingInlineEnd: 16px; + --pf-v6-c-table--cell--PaddingBlockStart: 16px; + --pf-v6-c-table--cell--PaddingBlockEnd: 16px; + --pf-v6-c-table--cell--first-last-child--PaddingInline: 0px; + --pf-v6-c-table__thead--cell--FontWeight: 500; + --pf-v6-c-table__thead--cell--FontSize: 14px; + --pf-v6-c-table__tr--BorderBlockEndColor: rgba(224, 224, 224, 1); + --pf-v6-c-table__sort-indicator--MarginInlineStart: 4px; + + letter-spacing: 0.01071em; +} + + .pf-v6-c-table .pf-m-align-right { + text-align: right; +} + + .pf-v6-c-table__sort-indicator { + font-size: 18px; + opacity: 0; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transform-origin: center center; +} + +/* CSS workaround to use MUI icon for sort icon */ + .pf-v6-c-table__sort-indicator::before { + display: block; + width: 1em; + height: 1em; + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' data-testid='ArrowDownwardIcon'%3E%3Cpath d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'%3E%3C/path%3E%3C/svg%3E"); +} + +/* Hide PF's default icon for the CSS workaround to use MUI's icon */ + .pf-v6-c-table__sort-indicator svg { + display: none; +} + + .pf-v6-c-table__button:is(:hover, :focus) .pf-v6-c-table__sort-indicator, + .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__sort-indicator { + opacity: 0.6; +} + + .pf-v6-c-table__sort[aria-sort="ascending"] .pf-v6-c-table__sort-indicator { + transform: rotate(180deg); +} + + .pf-v6-c-tab-content { + --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg); + --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg); + --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg); + --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg); +} + + .pf-v6-c-tabs { + --pf-v6-c-tabs__link--hover--BackgroundColor: transparent; + --pf-v6-c-tabs__item--PaddingBlockStart: 0; + --pf-v6-c-tabs__item--PaddingBlockEnd: 0; + --pf-v6-c-tabs__item--PaddingInlineStart: 0; + --pf-v6-c-tabs__item--PaddingInlineEnd: 0; + --pf-v6-c-tabs__link--PaddingBlockStart: 12px; + --pf-v6-c-tabs__link--PaddingBlockEnd: 12px; + --pf-v6-c-tabs__link--PaddingInlineStart: 16px; + --pf-v6-c-tabs__link--PaddingInlineEnd: 16px; + --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default); + --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: 2px; + --pf-v6-c-tabs__link--FontSize: 0.875rem; +} + + .pf-v6-c-tabs__link { + text-transform: uppercase; + font-weight: 500; + line-height: 1.75; + letter-spacing: 0.02857em; +} + + .pf-v6-c-tab-content { + --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg); + --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg); + --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg); + --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg); +} + + .pf-v6-c-label { + --pf-v6-c-label--BorderRadius: 16px; + --pf-v6-c-label--FontSize: 0.8125rem; + --pf-v6-c-label--PaddingInlineStart: 0; + --pf-v6-c-label--PaddingInlineEnd: 0; + height: 24px; +} + + .pf-v6-c-label__text { + padding-right: 8px; + padding-left: 8px; +} diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx index 2627761bcd..e604c700fe 100644 --- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx +++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx @@ -15,6 +15,8 @@ import { import { asEnumMember } from '~/utilities/utils'; import RegisteredModelTable from './RegisteredModelTable'; import RegisteredModelsTableToolbar from './RegisteredModelsTableToolbar'; +import './MUI-theme.css'; +import './overrides-from-figma.css'; type RegisteredModelListViewProps = { registeredModels: RegisteredModel[]; diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/overrides-from-figma.css b/frontend/src/pages/modelRegistry/screens/RegisteredModels/overrides-from-figma.css new file mode 100644 index 0000000000..b46aac5cb3 --- /dev/null +++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/overrides-from-figma.css @@ -0,0 +1,1282 @@ + + /* pallette */ + &:where(:root) { + --pf-t--color--amber--100: #ffecb3; + --pf-t--color--amber--200: #ffe082; + --pf-t--color--amber--300: #ffd54f; + --pf-t--color--amber--400: #ffca28; + --pf-t--color--amber--50: #fff8e1; + --pf-t--color--amber--500: #ffc107; + --pf-t--color--amber--600: #ffb300; + --pf-t--color--amber--700: #ffa000; + --pf-t--color--amber--800: #ff8f00; + --pf-t--color--amber--900: #ff6f00; + --pf-t--color--amber--A100: #ffe57f; + --pf-t--color--amber--A200: #ffd740; + --pf-t--color--amber--A400: #ffc400; + --pf-t--color--amber--A700: #ffab00; + --pf-t--color--black: #000000; + --pf-t--color--blue--100: #bbdefb; + --pf-t--color--blue--200: #90caf9; + --pf-t--color--blue--300: #64b5f6; + --pf-t--color--blue--400: #42a5f5; + --pf-t--color--blue--50: #e3f2fd; + --pf-t--color--blue--500: #1976d2; + --pf-t--color--blue--600: #1e88e5; + --pf-t--color--blue--700: #0057b2; + --pf-t--color--blue--800: #1565c0; + --pf-t--color--blue--900: #0d47a1; + --pf-t--color--blue--A100: #82b1ff; + --pf-t--color--blue--A200: #448aff; + --pf-t--color--blue--A400: #2979ff; + --pf-t--color--blue--A700: #2962ff; + --pf-t--color--blueGrey--100: #cfd8dc; + --pf-t--color--blueGrey--200: #b0bec5; + --pf-t--color--blueGrey--300: #90a4ae; + --pf-t--color--blueGrey--400: #78909c; + --pf-t--color--blueGrey--50: #eceff1; + --pf-t--color--blueGrey--500: #607d8b; + --pf-t--color--blueGrey--600: #546e7a; + --pf-t--color--blueGrey--700: #455a64; + --pf-t--color--blueGrey--800: #37474f; + --pf-t--color--blueGrey--900: #263238; + --pf-t--color--blueGrey--A100: #cfd8dc; + --pf-t--color--blueGrey--A200: #b0bec5; + --pf-t--color--blueGrey--A400: #78909c; + --pf-t--color--blueGrey--A700: #455a64; + --pf-t--color--deepOrange--100: #ffccbc; + --pf-t--color--deepOrange--200: #ffab91; + --pf-t--color--deepOrange--300: #ff8a65; + --pf-t--color--deepOrange--400: #ff7043; + --pf-t--color--deepOrange--50: #fbe9e7; + --pf-t--color--deepOrange--500: #ff5722; + --pf-t--color--deepOrange--600: #f4511e; + --pf-t--color--deepOrange--700: #e64a19; + --pf-t--color--deepOrange--800: #d84315; + --pf-t--color--deepOrange--900: #bf360c; + --pf-t--color--deepOrange--A100: #ff9e80; + --pf-t--color--deepOrange--A200: #ff6e40; + --pf-t--color--deepOrange--A400: #ff3d00; + --pf-t--color--deepOrange--A700: #dd2c00; + --pf-t--color--deepPurple--100: #d1c4e9; + --pf-t--color--deepPurple--200: #b39ddb; + --pf-t--color--deepPurple--300: #9575cd; + --pf-t--color--deepPurple--400: #7e57c2; + --pf-t--color--deepPurple--50: #ede7f6; + --pf-t--color--deepPurple--500: #673ab7; + --pf-t--color--deepPurple--600: #5e35b1; + --pf-t--color--deepPurple--700: #512da8; + --pf-t--color--deepPurple--800: #4527a0; + --pf-t--color--deepPurple--900: #311b92; + --pf-t--color--deepPurple--A100: #b388ff; + --pf-t--color--deepPurple--A200: #7c4dff; + --pf-t--color--deepPurple--A400: #651fff; + --pf-t--color--deepPurple--A700: #6200ea; + --pf-t--color--gray--100: #f5f5f5; + --pf-t--color--gray--200: #eeeeee; + --pf-t--color--gray--300: #e0e0e0; + --pf-t--color--gray--400: #bdbdbd; + --pf-t--color--gray--50: #fafafa; + --pf-t--color--gray--500: #9e9e9e; + --pf-t--color--gray--600: #757575; + --pf-t--color--gray--700: #616161; + --pf-t--color--gray--800: #424242; + --pf-t--color--gray--900: #212121; + --pf-t--color--gray--A100: #f5f5f5; + --pf-t--color--gray--A200: #eeeeee; + --pf-t--color--gray--A400: #bdbdbd; + --pf-t--color--gray--A700: #616161; + --pf-t--color--green--100: #c8e6c9; + --pf-t--color--green--200: #a5d6a7; + --pf-t--color--green--300: #81c784; + --pf-t--color--green--400: #66bb6a; + --pf-t--color--green--50: #e8f5e9; + --pf-t--color--green--500: #4caf50; + --pf-t--color--green--600: #43a047; + --pf-t--color--green--700: #388e3c; + --pf-t--color--green--800: #2e7d32; + --pf-t--color--green--900: #1b5e20; + --pf-t--color--green--A100: #b9f6ca; + --pf-t--color--green--A200: #69f0ae; + --pf-t--color--green--A400: #00e676; + --pf-t--color--green--A700: #00c853; + --pf-t--color--indigo--100: #c5cae9; + --pf-t--color--indigo--200: #9fa8da; + --pf-t--color--indigo--300: #7986cb; + --pf-t--color--indigo--400: #5c6bc0; + --pf-t--color--indigo--50: #e8eaf6; + --pf-t--color--indigo--500: #3f51b5; + --pf-t--color--indigo--600: #3949ab; + --pf-t--color--indigo--700: #303f9f; + --pf-t--color--indigo--800: #283593; + --pf-t--color--indigo--900: #1a237e; + --pf-t--color--indigo--A100: #8c9eff; + --pf-t--color--indigo--A200: #536dfe; + --pf-t--color--indigo--A400: #3d5afe; + --pf-t--color--indigo--A700: #304ffe; + --pf-t--color--lightBlue--100: #b3e5fc; + --pf-t--color--lightBlue--200: #81d4fa; + --pf-t--color--lightBlue--300: #4fc3f7; + --pf-t--color--lightBlue--400: #29b6f6; + --pf-t--color--lightBlue--50: #e1f5fe; + --pf-t--color--lightBlue--500: #03a9f4; + --pf-t--color--lightBlue--600: #039be5; + --pf-t--color--lightBlue--700: #0288d1; + --pf-t--color--lightBlue--800: #0277bd; + --pf-t--color--lightBlue--900: #01579b; + --pf-t--color--lightBlue--A100: #80d8ff; + --pf-t--color--lightBlue--A200: #40c4ff; + --pf-t--color--lightBlue--A400: #00b0ff; + --pf-t--color--lightBlue--A700: #0091ea; + --pf-t--color--lightGreen--100: #dcedc8; + --pf-t--color--lightGreen--200: #c5e1a5; + --pf-t--color--lightGreen--300: #aed581; + --pf-t--color--lightGreen--400: #8bc34a; + --pf-t--color--lightGreen--50: #f1f8e9; + --pf-t--color--lightGreen--500: #8bc34a; + --pf-t--color--lightGreen--600: #7cb342; + --pf-t--color--lightGreen--700: #689f38; + --pf-t--color--lightGreen--800: #558b2f; + --pf-t--color--lightGreen--900: #33691e; + --pf-t--color--lightGreen--A100: #ccff90; + --pf-t--color--lightGreen--A200: #b2ff59; + --pf-t--color--lightGreen--A400: #76ff03; + --pf-t--color--lightGreen--A700: #64dd17; + --pf-t--color--lime--100: #f0f4c3; + --pf-t--color--lime--200: #e6ee9c; + --pf-t--color--lime--300: #dce775; + --pf-t--color--lime--400: #d4e157; + --pf-t--color--lime--50: #f9fbe7; + --pf-t--color--lime--500: #cddc39; + --pf-t--color--lime--600: #c0ca33; + --pf-t--color--lime--700: #afb42b; + --pf-t--color--lime--800: #9e9d24; + --pf-t--color--lime--900: #827717; + --pf-t--color--lime--A100: #f4ff81; + --pf-t--color--lime--A200: #eeff41; + --pf-t--color--lime--A400: #c6ff00; + --pf-t--color--lime--A700: #aeea00; + --pf-t--color--orange--100: #ffe0b2; + --pf-t--color--orange--200: #ffcc80; + --pf-t--color--orange--300: #ffb74d; + --pf-t--color--orange--400: #ffa726; + --pf-t--color--orange--50: #fff3e0; + --pf-t--color--orange--500: #ff9800; + --pf-t--color--orange--600: #fb8c00; + --pf-t--color--orange--700: #f57c00; + --pf-t--color--orange--800: #ef6c00; + --pf-t--color--orange--900: #e65100; + --pf-t--color--orange--A100: #ffd180; + --pf-t--color--orange--A200: #ffab40; + --pf-t--color--orange--A400: #ff9100; + --pf-t--color--orange--A700: #ff6d00; + --pf-t--color--pink--100: #f8bbd0; + --pf-t--color--pink--200: #f48fb1; + --pf-t--color--pink--300: #f06292; + --pf-t--color--pink--400: #ec407a; + --pf-t--color--pink--50: #fce4ec; + --pf-t--color--pink--500: #e91e63; + --pf-t--color--pink--600: #d81b60; + --pf-t--color--pink--700: #c2185b; + --pf-t--color--pink--800: #ad1457; + --pf-t--color--pink--900: #880e4f; + --pf-t--color--pink--A100: #ff80ab; + --pf-t--color--pink--A200: #ff4081; + --pf-t--color--pink--A400: #f50057; + --pf-t--color--pink--A700: #c51162; + --pf-t--color--purple--100: #e1bee7; + --pf-t--color--purple--200: #ce93d8; + --pf-t--color--purple--300: #ba68c8; + --pf-t--color--purple--400: #ab47bc; + --pf-t--color--purple--50: #f3e5f5; + --pf-t--color--purple--500: #9c27b0; + --pf-t--color--purple--600: #8e24aa; + --pf-t--color--purple--700: #7b1fa2; + --pf-t--color--purple--800: #6a1b9a; + --pf-t--color--purple--900: #4a148c; + --pf-t--color--purple--A100: #ea80fc; + --pf-t--color--purple--A200: #e040fb; + --pf-t--color--purple--A400: #d500f9; + --pf-t--color--purple--A700: #aa00ff; + --pf-t--color--red--100: #fecdd2; + --pf-t--color--red--200: #ef9a9a; + --pf-t--color--red--300: #e57373; + --pf-t--color--red--400: #ef5350; + --pf-t--color--red--50: #feebee; + --pf-t--color--red--500: #f44336; + --pf-t--color--red--600: #e53935; + --pf-t--color--red--700: #d32f2f; + --pf-t--color--red--800: #c62828; + --pf-t--color--red--900: #b71c1c; + --pf-t--color--red--A100: #ff8a80; + --pf-t--color--red--A200: #ff5252; + --pf-t--color--red--A400: #ff1744; + --pf-t--color--red--A700: #d50000; + --pf-t--color--teal--100: #b2dfdb; + --pf-t--color--teal--200: #80cbc4; + --pf-t--color--teal--300: #4db6ac; + --pf-t--color--teal--400: #26a69a; + --pf-t--color--teal--50: #e0f2f1; + --pf-t--color--teal--500: #009c88; + --pf-t--color--teal--600: #00897b; + --pf-t--color--teal--700: #00796b; + --pf-t--color--teal--800: #00695c; + --pf-t--color--teal--900: #004d40; + --pf-t--color--teal--A100: #a7ffeb; + --pf-t--color--teal--A200: #64ffda; + --pf-t--color--teal--A400: #1de9b6; + --pf-t--color--teal--A700: #00bfa5; + --pf-t--color--white: #ffffff; + --pf-t--color--yellow--100: #fff9c4; + --pf-t--color--yellow--200: #fff59d; + --pf-t--color--yellow--300: #fff176; + --pf-t--color--yellow--400: #ffee58; + --pf-t--color--yellow--50: #fffde7; + --pf-t--color--yellow--500: #ffeb3b; + --pf-t--color--yellow--600: #fdd835; + --pf-t--color--yellow--700: #fbc02d; + --pf-t--color--yellow--800: #f9a825; + --pf-t--color--yellow--900: #f57f17; + --pf-t--color--yellow--A100: #ffff8d; + --pf-t--color--yellow--A200: #ffff00; + --pf-t--color--yellow--A400: #ffea00; + --pf-t--color--yellow--A700: #ffd600; + } + + /* default */ + &:where(:root) { + --pf-t--global--background--color--500: rgba(0, 0, 0, 0.5000); + --pf-t--global--background--color--600: rgba(0, 0, 0, 0.0400); + --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000); + --pf-t--global--border--radius--0: 0px; + --pf-t--global--border--radius--100: 4px; + --pf-t--global--border--radius--200: 6px; + --pf-t--global--border--radius--300: 16px; + --pf-t--global--border--radius--400: 24px; + --pf-t--global--border--radius--500: 999px; + --pf-t--global--border--width--100: 1px; + --pf-t--global--border--width--200: 2px; + --pf-t--global--border--width--300: 3px; + --pf-t--global--box-shadow--X--100: -8px; + --pf-t--global--box-shadow--X--200: -4px; + --pf-t--global--box-shadow--X--300: -1px; + --pf-t--global--box-shadow--X--400: 0px; + --pf-t--global--box-shadow--X--500: 1px; + --pf-t--global--box-shadow--X--600: 4px; + --pf-t--global--box-shadow--X--700: 8px; + --pf-t--global--box-shadow--Y--100: -8px; + --pf-t--global--box-shadow--Y--200: -4px; + --pf-t--global--box-shadow--Y--300: -1px; + --pf-t--global--box-shadow--Y--400: 0px; + --pf-t--global--box-shadow--Y--500: 1px; + --pf-t--global--box-shadow--Y--600: 4px; + --pf-t--global--box-shadow--Y--700: 8px; + --pf-t--global--box-shadow--blur--100: 4px; + --pf-t--global--box-shadow--blur--200: 8px; + --pf-t--global--box-shadow--blur--300: 24px; + --pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600); + --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200); + --pf-t--global--box-shadow--spread--100: 0px; + --pf-t--global--breakpoint--100: 0rem; + --pf-t--global--breakpoint--200: 36rem; + --pf-t--global--breakpoint--250: 40rem; + --pf-t--global--breakpoint--300: 48rem; + --pf-t--global--breakpoint--350: 60rem; + --pf-t--global--breakpoint--400: 62rem; + --pf-t--global--breakpoint--500: 75rem; + --pf-t--global--breakpoint--550: 80rem; + --pf-t--global--breakpoint--600: 90.625rem; + --pf-t--global--delay--100: 0ms; + --pf-t--global--delay--200: 50ms; + --pf-t--global--delay--300: 100ms; + --pf-t--global--delay--400: 7000ms; + --pf-t--global--duration--100: 100ms; + --pf-t--global--duration--200: 200ms; + --pf-t--global--duration--300: 300ms; + --pf-t--global--duration--400: 400ms; + --pf-t--global--duration--50: 50ms; + --pf-t--global--duration--500: 500ms; + --pf-t--global--duration--600: 600ms; + --pf-t--global--font--family--100: Roboto, Helvetica, Arial, sans-serif; + --pf-t--global--font--family--200: Roboto, Helvetica, Arial, sans-serif; + --pf-t--global--font--family--300: Roboto, Courier, monospace; + --pf-t--global--font--line-height--100: 1.2999999523162842; + --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--400: 1.125rem; + --pf-t--global--font--size--500: 1.25rem; + --pf-t--global--font--size--600: 1.375rem; + --pf-t--global--font--size--700: 1.75rem; + --pf-t--global--font--size--800: 2.25rem; + --pf-t--global--font--weight--100: 400; + --pf-t--global--font--weight--200: 500; + --pf-t--global--font--weight--300: 700; + --pf-t--global--font--weight--400: 700; + --pf-t--global--icon--size--100: 0.75rem; + --pf-t--global--icon--size--200: 0.875rem; + --pf-t--global--icon--size--250: 1rem; + --pf-t--global--icon--size--300: 1.375rem; + --pf-t--global--icon--size--400: 3.5rem; + --pf-t--global--icon--size--500: 6rem; + --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--500: 2rem; + --pf-t--global--spacer--600: 3rem; + --pf-t--global--spacer--700: 4rem; + --pf-t--global--spacer--800: 5rem; + --pf-t--global--text-decoration--line--100: none; + --pf-t--global--text-decoration--line--200: underline; + --pf-t--global--text-decoration--style--100: solid; + --pf-t--global--text-decoration--style--200: dashed; + --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2); + --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1); + --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1); + --pf-t--global--z-index--100: 100; + --pf-t--global--z-index--200: 200; + --pf-t--global--z-index--300: 300; + --pf-t--global--z-index--400: 400; + --pf-t--global--z-index--500: 500; + --pf-t--global--z-index--600: 600; + --pf-t--global--background--color--100: var(--pf-t--color--white); + --pf-t--global--background--color--200: var(--pf-t--color--gray--100); + --pf-t--global--background--color--300: var(--pf-t--color--gray--200); + --pf-t--global--background--color--400: var(--pf-t--color--gray--800); + --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600); + --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600); + --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500); + --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--200); + --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--300); + --pf-t--global--border--color--100: var(--pf-t--color--gray--400); + --pf-t--global--border--color--200: var(--pf-t--color--gray--500); + --pf-t--global--border--color--300: var(--pf-t--color--gray--200); + --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400); + --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--radius--sharp: var(--pf-t--global--border--radius--0); + --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200); + --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100); + --pf-t--global--border--width--action--clicked: var(--pf-t--global--border--width--200); + --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--clicked: var(--pf-t--global--border--width--200); + --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--200); + --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200); + --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300); + --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200); + --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--100); + --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--700); + --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--200); + --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--600); + --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--300); + --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--500); + --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--700); + --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700); + --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--100); + --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--600); + --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600); + --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--200); + --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--500); + --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500); + --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--300); + --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300); + --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200); + --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100); + --pf-t--global--box-shadow--color--lg: var(--pf-t--global--box-shadow--color--200); + --pf-t--global--box-shadow--color--md: var(--pf-t--global--box-shadow--color--200); + --pf-t--global--box-shadow--color--sm: var(--pf-t--global--box-shadow--color--100); + --pf-t--global--box-shadow--spread--lg: var(--pf-t--global--box-shadow--spread--100); + --pf-t--global--box-shadow--spread--md: var(--pf-t--global--box-shadow--spread--100); + --pf-t--global--box-shadow--spread--sm: var(--pf-t--global--box-shadow--spread--100); + --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600); + --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550); + --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300); + --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250); + --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100); + --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350); + --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400); + --pf-t--global--breakpoint--md: var(--pf-t--global--breakpoint--300); + --pf-t--global--breakpoint--sm: var(--pf-t--global--breakpoint--200); + --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500); + --pf-t--global--breakpoint--xs: var(--pf-t--global--breakpoint--100); + --pf-t--global--color--brand--100: var(--pf-t--color--blue--500); + --pf-t--global--color--brand--200: var(--pf-t--color--blue--800); + --pf-t--global--color--brand--300: var(--pf-t--color--blue--400); + --pf-t--global--color--disabled--100: var(--pf-t--color--gray--300); + --pf-t--global--color--disabled--200: var(--pf-t--color--gray--400); + --pf-t--global--color--disabled--300: var(--pf-t--color--gray--600); + --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--600); + --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--700); + --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--500); + --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--200); + --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--300); + --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--100); + --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--200); + --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--300); + --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--100); + --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--200); + --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--300); + --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--100); + --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--200); + --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--300); + --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--deepOrange--100); + --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--deepOrange--200); + --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--deepOrange--300); + --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--100); + --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--200); + --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--300); + --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--100); + --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--200); + --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--300); + --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--100); + --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--200); + --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--300); + --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--100); + --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--200); + --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--300); + --pf-t--global--color--severity--critical--100: var(--pf-t--color--red--700); + --pf-t--global--color--severity--important--100: var(--pf-t--color--deepOrange--400); + --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--400); + --pf-t--global--color--severity--moderate--100: var(--pf-t--color--orange--400); + --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--300); + --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--200); + --pf-t--global--color--status--custom--100: var(--pf-t--color--purple--500); + --pf-t--global--color--status--custom--200: var(--pf-t--color--purple--700); + --pf-t--global--color--status--custom--300: var(--pf-t--color--purple--300); + --pf-t--global--color--status--danger--100: var(--pf-t--color--red--700); + --pf-t--global--color--status--danger--200: var(--pf-t--color--red--800); + --pf-t--global--color--status--danger--300: var(--pf-t--color--red--400); + --pf-t--global--color--status--info--100: var(--pf-t--color--lightBlue--700); + --pf-t--global--color--status--info--200: var(--pf-t--color--lightBlue--900); + --pf-t--global--color--status--info--300: var(--pf-t--color--lightBlue--500); + --pf-t--global--color--status--success--100: var(--pf-t--color--green--800); + --pf-t--global--color--status--success--200: var(--pf-t--color--green--900); + --pf-t--global--color--status--success--300: var(--pf-t--color--green--500); + --pf-t--global--color--status--warning--100: var(--pf-t--color--orange--800); + --pf-t--global--color--status--warning--200: #ff9800; + --pf-t--global--color--status--warning--300: var(--pf-t--color--orange--500); + --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--family--mono: var(--pf-t--global--font--family--300); + --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--3xl: var(--pf-t--global--font--size--700); + --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800); + --pf-t--global--font--size--lg: var(--pf-t--global--font--size--400); + --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--xl: var(--pf-t--global--font--size--500); + --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100); + --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200); + --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--icon--color--100: var(--pf-t--color--black); + --pf-t--global--icon--color--200: var(--pf-t--color--gray--600); + --pf-t--global--icon--color--300: var(--pf-t--color--white); + --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400); + --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500); + --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250); + --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200); + --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100); + --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300); + --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300); + --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400); + --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100); + --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200); + --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500); + --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600); + --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--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--duration--xl: var(--pf-t--global--duration--400); + --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50); + --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100); + --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300); + --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--4xl: var(--pf-t--global--spacer--800); + --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--xl: var(--pf-t--global--spacer--500); + --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100); + --pf-t--global--text--color--100: var(--pf-t--color--black); + --pf-t--global--text--color--200: var(--pf-t--color--gray--600); + --pf-t--global--text--color--300: var(--pf-t--color--white); + --pf-t--global--text--color--400: var(--pf-t--color--deepOrange--900); + --pf-t--global--text--color--link--100: var(--pf-t--color--blue--500); + --pf-t--global--text--color--link--200: var(--pf-t--color--blue--600); + --pf-t--global--text--color--link--300: var(--pf-t--color--deepPurple--500); + --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100); + --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100); + --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600); + --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400); + --pf-t--global--z-index--md: var(--pf-t--global--z-index--300); + --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200); + --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500); + --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100); + --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100); + --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100); + --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100); + --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100); + --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200); + --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100); + --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400); + --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100); + --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300); + --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300); + --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200); + --pf-t--global--border--color--default: var(--pf-t--global--border--color--100); + --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200); + --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100); + --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--300); + --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--200); + --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--300); + --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--300); + --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--200); + --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--300); + --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--300); + --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--200); + --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--300); + --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--300); + --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--200); + --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--300); + --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--300); + --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--200); + --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--300); + --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--300); + --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--200); + --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--300); + --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300); + --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200); + --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300); + --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--300); + --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--200); + --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--300); + --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--300); + --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--200); + --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--300); + --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300); + --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300); + --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200); + --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300); + --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300); + --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--100); + --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--200); + --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--200); + --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100); + --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--200); + --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200); + --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100); + --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200); + --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--200); + --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--100); + --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--200); + --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200); + --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100); + --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200); + --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200); + --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100); + --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200); + --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200); + --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100); + --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200); + --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200); + --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100); + --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200); + --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200); + --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100); + --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200); + --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200); + --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100); + --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200); + --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200); + --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100); + --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200); + --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--300); + --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--100); + --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--200); + --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300); + --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--100); + --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--200); + --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--300); + --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--100); + --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--200); + --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--300); + --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--100); + --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--200); + --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300); + --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--100); + --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--200); + --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm); + --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md); + --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--font--size--heading--h2: var(--pf-t--global--font--size--xl); + --pf-t--global--font--size--heading--h3: var(--pf-t--global--font--size--lg); + --pf-t--global--font--size--heading--h4: var(--pf-t--global--font--size--md); + --pf-t--global--font--size--heading--h5: var(--pf-t--global--font--size--md); + --pf-t--global--font--size--heading--h6: var(--pf-t--global--font--size--md); + --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200); + --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300); + --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300); + --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100); + --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100); + --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100); + --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100); + --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100); + --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100); + --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100); + --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300); + --pf-t--global--icon--color--status--warning--default: #ed6c02e5; + --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300); + --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200); + --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl); + --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl); + --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl); + --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg); + --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md); + --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm); + --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl); + --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs); + --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md); + --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg); + --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm); + --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm); + --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md); + --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs); + --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl); + --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl); + --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg); + --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl); + --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl); + --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg); + --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg); + --pf-t--global--spacer--action--horizontal--plain: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl); + --pf-t--global--spacer--action--vertical--compact: var(--pf-t--global--spacer--xs); + --pf-t--global--spacer--action--vertical--spacious: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--control--horizontal--spacious: var(--pf-t--global--spacer--lg); + --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs); + --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs); + --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs); + --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl); + --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg); + --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--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg); + --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200); + --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300); + --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--link--visited: var(--pf-t--global--text--color--link--300); + --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300); + --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100); + --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100); + --pf-t--global--text--color--required: var(--pf-t--global--text--color--400); + --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300); + --pf-t--global--text--color--status--warning--default: #663C00; + --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300); + --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200); + --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs); + --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular); + --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default); + --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default); + --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); + --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--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); + --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); + --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover); + --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default); + --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked); + --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default); + --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked); + --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default); + --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked); + --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default); + --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover); + --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); + --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); + --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover); + --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default); + --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg); + --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm); + --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1); + --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2); + --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3); + --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4); + --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5); + --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6); + --pf-t--global--text--color--brand--clicked: var(--pf-t--global--color--brand--clicked); + --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--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle); + --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); + --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); + --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover); + --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default); + } + + /* dark */ + &:where(.pf-v6-theme-dark) { + --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); + --pf-t--global--dark--background--color--500: rgba(0, 0, 0, 0.5000); + --pf-t--global--dark--background--color--600: rgba(255, 255, 255, 0.0800); + --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000); + --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600); + --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600); + --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500); + --pf-t--global--box-shadow--color--lg: var(--pf-t--global--dark--box-shadow--color--100); + --pf-t--global--box-shadow--color--md: var(--pf-t--global--dark--box-shadow--color--100); + --pf-t--global--box-shadow--color--sm: var(--pf-t--global--dark--box-shadow--color--100); + --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--900); + --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--700); + --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--600); + --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--50); + --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--100); + --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--200); + --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--600); + --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--500); + --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--50); + --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--400); + --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--200); + --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--800); + --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--600); + --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--600); + --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--300); + --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--200); + --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--200); + --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--100); + --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--50); + --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--200); + --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--100); + --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--50); + --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--200); + --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--100); + --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--50); + --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--200); + --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--100); + --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--50); + --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--deepOrange--200); + --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--deepOrange--100); + --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--deepOrange--50); + --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--200); + --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--100); + --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--50); + --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--200); + --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--100); + --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--50); + --pf-t--global--dark--color--nonstatus--teal--100: var(--pf-t--color--teal--200); + --pf-t--global--dark--color--nonstatus--teal--200: var(--pf-t--color--teal--100); + --pf-t--global--dark--color--nonstatus--teal--300: var(--pf-t--color--teal--50); + --pf-t--global--dark--color--nonstatus--yellow--100: var(--pf-t--color--yellow--200); + --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--100); + --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--50); + --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red--500); + --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--deepOrange--400); + --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--200); + --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--orange--400); + --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--200); + --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--400); + --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--purple--200); + --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--purple--400); + --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--purple--50); + --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red--500); + --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red--700); + --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red--100); + --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red--300); + --pf-t--global--dark--color--status--info--100: var(--pf-t--color--lightBlue--400); + --pf-t--global--dark--color--status--info--200: var(--pf-t--color--lightBlue--700); + --pf-t--global--dark--color--status--info--300: var(--pf-t--color--lightBlue--300); + --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--400); + --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--700); + --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--300); + --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--orange--400); + --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--orange--700); + --pf-t--global--dark--color--status--warning--300: var(--pf-t--color--orange--300); + --pf-t--global--dark--icon--color--100: var(--pf-t--color--white); + --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--300); + --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--700); + --pf-t--global--dark--text--color--100: var(--pf-t--color--white); + --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--100); + --pf-t--global--dark--text--color--300: var(--pf-t--color--black); + --pf-t--global--dark--text--color--400: var(--pf-t--color--deepOrange--500); + --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--200); + --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--100); + --pf-t--global--dark--text--color--link--300: var(--pf-t--color--deepPurple--200); + --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200); + --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--floating--clicked: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300); + --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200); + --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100); + --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400); + --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--100); + --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--300); + --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--300); + --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200); + --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200); + --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200); + --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100); + --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200); + --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100); + --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200); + --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200); + --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100); + --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200); + --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200); + --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100); + --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200); + --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200); + --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100); + --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200); + --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200); + --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100); + --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200); + --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200); + --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100); + --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200); + --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200); + --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100); + --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200); + --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200); + --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100); + --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200); + --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200); + --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100); + --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200); + --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200); + --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--300); + --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--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200); + --pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100); + --pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200); + --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200); + --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100); + --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200); + --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200); + --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100); + --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200); + --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200); + --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100); + --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200); + --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200); + --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100); + --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200); + --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200); + --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100); + --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200); + --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200); + --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100); + --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200); + --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200); + --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100); + --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200); + --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200); + --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100); + --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200); + --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200); + --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100); + --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200); + --pf-t--global--color--status--custom--clicked: var(--pf-t--global--dark--color--status--custom--200); + --pf-t--global--color--status--custom--default: var(--pf-t--global--dark--color--status--custom--100); + --pf-t--global--color--status--custom--hover: var(--pf-t--global--dark--color--status--custom--200); + --pf-t--global--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--200); + --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--100); + --pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--200); + --pf-t--global--color--status--info--clicked: var(--pf-t--global--dark--color--status--info--200); + --pf-t--global--color--status--info--default: var(--pf-t--global--dark--color--status--info--100); + --pf-t--global--color--status--info--hover: var(--pf-t--global--dark--color--status--info--200); + --pf-t--global--color--status--success--clicked: var(--pf-t--global--dark--color--status--success--200); + --pf-t--global--color--status--success--default: var(--pf-t--global--dark--color--status--success--100); + --pf-t--global--color--status--success--hover: var(--pf-t--global--dark--color--status--success--200); + --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200); + --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100); + --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200); + --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300); + --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200); + --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300); + --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200); + --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300); + --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300); + --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100); + --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100); + --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100); + --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100); + --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100); + --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100); + --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100); + --pf-t--global--icon--color--subtle: var(--pf-t--global--dark--icon--color--200); + --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300); + --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--disabled: var(--pf-t--global--dark--color--disabled--200); + --pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--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--link--visited: var(--pf-t--global--dark--text--color--link--300); + --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--300); + --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300); + --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100); + --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400); + --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300); + --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250); + --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300); + --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200); + --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default); + --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); + --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--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); + --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); + --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover); + --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); + --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default); + --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); + --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default); + --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default); + --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked); + --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default); + --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked); + --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default); + --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover); + --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); + --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); + --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover); + --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); + --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default); + --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); + --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle); + --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); + --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); + --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover); + --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); + --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default); + --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); + }