@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.3

package/dist/styles/base.css

@@ -357,6 +357,862 @@
   --pf-v5-global--BoxShadow--inset: inset 0 0 0.625rem 0 #030303;
 }
 
+:root {
+  --pf-t--color--white: #fff;
+  --pf-t--color--black: #000;
+  --pf-t--color--gray--1000: #151515;
+  --pf-t--color--gray--900: #1f1f1f;
+  --pf-t--color--gray--800: #292929;
+  --pf-t--color--gray--700: #383838;
+  --pf-t--color--gray--600: #4d4d4d;
+  --pf-t--color--gray--500: #6e6e6e;
+  --pf-t--color--gray--400: #a3a3a3;
+  --pf-t--color--gray--300: #c7c7c7;
+  --pf-t--color--gray--200: #e0e0e0;
+  --pf-t--color--gray--100: #f2f2f2;
+  --pf-t--color--cyan--700: #023233;
+  --pf-t--color--cyan--600: #074c4d;
+  --pf-t--color--cyan--500: #187577;
+  --pf-t--color--cyan--400: #42adaf;
+  --pf-t--color--cyan--300: #88dadb;
+  --pf-t--color--cyan--200: #b3ebec;
+  --pf-t--color--cyan--100: #e3fcfc;
+  --pf-t--color--blue--700: #001c43;
+  --pf-t--color--blue--600: #002b68;
+  --pf-t--color--blue--500: #0043a0;
+  --pf-t--color--blue--400: #0c61d9;
+  --pf-t--color--blue--300: #60a2ff;
+  --pf-t--color--blue--200: #9cc5ff;
+  --pf-t--color--blue--100: #d9e9ff;
+  --pf-t--color--gold--700: #4e3500;
+  --pf-t--color--gold--600: #755200;
+  --pf-t--color--gold--500: #ac7a00;
+  --pf-t--color--gold--400: #f0ab00;
+  --pf-t--color--gold--300: #ffcd5b;
+  --pf-t--color--gold--200: #ffdc9b;
+  --pf-t--color--gold--100: #ffefd9;
+  --pf-t--color--green--700: #062901;
+  --pf-t--color--green--600: #0b3906;
+  --pf-t--color--green--500: #1b5813;
+  --pf-t--color--green--400: #3e8635;
+  --pf-t--color--green--300: #83c079;
+  --pf-t--color--green--200: #b2deaa;
+  --pf-t--color--green--100: #e7fce3;
+  --pf-t--color--orange--700: #501d00;
+  --pf-t--color--orange--600: #792f04;
+  --pf-t--color--orange--500: #b14e14;
+  --pf-t--color--orange--400: #f7823d;
+  --pf-t--color--orange--300: #ffb989;
+  --pf-t--color--orange--200: #ffd1b2;
+  --pf-t--color--orange--100: #ffe7d9;
+  --pf-t--color--orangered--700: #331500;
+  --pf-t--color--orangered--600: #552000;
+  --pf-t--color--orangered--500: #882d00;
+  --pf-t--color--orangered--400: #cc3a00;
+  --pf-t--color--orangered--300: #ff542e;
+  --pf-t--color--orangered--200: #ff947c;
+  --pf-t--color--orangered--100: #ffd3c9;
+  --pf-t--color--purple--700: #1c1337;
+  --pf-t--color--purple--600: #291b55;
+  --pf-t--color--purple--500: #3e2882;
+  --pf-t--color--purple--400: #5f40be;
+  --pf-t--color--purple--300: #9a81e5;
+  --pf-t--color--purple--200: #c0b0f1;
+  --pf-t--color--purple--100: #eae3fc;
+  --pf-t--color--red--700: #3a0400;
+  --pf-t--color--red--600: #5a0600;
+  --pf-t--color--red--500: #8a0a00;
+  --pf-t--color--red--400: #c9190b;
+  --pf-t--color--red--300: #ee665b;
+  --pf-t--color--red--200: #f69f98;
+  --pf-t--color--red--100: #ffdbd9;
+}
+
+:root {
+  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
+  --pf-t--global--spacer--800: 80px;
+  --pf-t--global--spacer--700: 64px;
+  --pf-t--global--spacer--600: 48px;
+  --pf-t--global--spacer--500: 32px;
+  --pf-t--global--spacer--400: 24px;
+  --pf-t--global--spacer--300: 16px;
+  --pf-t--global--spacer--200: 8px;
+  --pf-t--global--spacer--100: 4px;
+  --pf-t--global--icon--size--400: 56px;
+  --pf-t--global--icon--size--300: 22px;
+  --pf-t--global--icon--size--200: 14px;
+  --pf-t--global--icon--size--100: 12px;
+  --pf-t--global--border--width--300: 3px;
+  --pf-t--global--border--width--200: 2px;
+  --pf-t--global--border--width--100: 1px;
+  --pf-t--global--border--radius--500: 999px;
+  --pf-t--global--border--radius--400: 24px;
+  --pf-t--global--border--radius--300: 16px;
+  --pf-t--global--border--radius--200: 6px;
+  --pf-t--global--border--radius--100: 4px;
+  --pf-t--global--border--radius--0: 0px;
+  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--600);
+  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--500);
+  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--400);
+  --pf-t--global--color--brand--300: var(--pf-t--color--blue--500);
+  --pf-t--global--color--brand--200: var(--pf-t--color--blue--400);
+  --pf-t--global--color--brand--100: var(--pf-t--color--blue--300);
+  --pf-t--global--color--status--custom--200: var(--pf-t--color--cyan--500);
+  --pf-t--global--color--status--custom--100: var(--pf-t--color--cyan--400);
+  --pf-t--global--color--status--success--200: var(--pf-t--color--green--500);
+  --pf-t--global--color--status--success--100: var(--pf-t--color--green--400);
+  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--500);
+  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--400);
+  --pf-t--global--color--status--warning--200: var(--pf-t--color--gold--500);
+  --pf-t--global--color--status--warning--100: var(--pf-t--color--gold--400);
+  --pf-t--global--color--status--danger--200: var(--pf-t--color--orangered--500);
+  --pf-t--global--color--status--danger--100: var(--pf-t--color--orangered--400);
+  --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--400);
+  --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--300);
+  --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--200);
+  --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--400);
+  --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--300);
+  --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--200);
+  --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--orangered--400);
+  --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--orangered--300);
+  --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--orangered--200);
+  --pf-t--global--color--nonstatus--cyan--300: var(--pf-t--color--cyan--400);
+  --pf-t--global--color--nonstatus--cyan--200: var(--pf-t--color--cyan--300);
+  --pf-t--global--color--nonstatus--cyan--100: var(--pf-t--color--cyan--200);
+  --pf-t--global--color--nonstatus--gold--300: var(--pf-t--color--gold--400);
+  --pf-t--global--color--nonstatus--gold--200: var(--pf-t--color--gold--300);
+  --pf-t--global--color--nonstatus--gold--100: var(--pf-t--color--gold--200);
+  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--400);
+  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--300);
+  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--200);
+  --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--400);
+  --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--300);
+  --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--200);
+  --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--400);
+  --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--300);
+  --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--200);
+  --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--400);
+  --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--300);
+  --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--200);
+  --pf-t--global--color--favorite--200: var(--pf-t--color--gold--500);
+  --pf-t--global--color--favorite--100: var(--pf-t--color--gold--400);
+  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--400);
+  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--500);
+  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--400);
+  --pf-t--global--text--color--400: var(--pf-t--color--orangered--400);
+  --pf-t--global--text--color--300: var(--pf-t--color--white);
+  --pf-t--global--text--color--200: var(--pf-t--color--gray--500);
+  --pf-t--global--text--color--100: var(--pf-t--color--gray--900);
+  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
+  --pf-t--global--background--color--highlight--200: var(--pf-t--color--gold--400);
+  --pf-t--global--background--color--highlight--100: var(--pf-t--color--gold--300);
+  --pf-t--global--background--color--400: var(--pf-t--color--gray--800);
+  --pf-t--global--background--color--300: var(--pf-t--color--gray--200);
+  --pf-t--global--background--color--200: var(--pf-t--color--gray--100);
+  --pf-t--global--background--color--100: var(--pf-t--color--white);
+  --pf-t--global--spacer--sm: 8px;
+  --pf-t--global--spacer--xl: 32px;
+  --pf-t--global--spacer--xs: 4px;
+  --pf-t--global--spacer--2xl: 48px;
+  --pf-t--global--spacer--lg: 24px;
+  --pf-t--global--spacer--md: 16px;
+  --pf-t--global--spacer--3xl: 64px;
+  --pf-t--global--spacer--4xl: 80px;
+  --pf-t--global--icon--color--300: var(--pf-t--color--white);
+  --pf-t--global--icon--color--200: var(--pf-t--color--gray--500);
+  --pf-t--global--icon--color--100: var(--pf-t--color--gray--900);
+  --pf-t--global--icon--size--sm: 12px;
+  --pf-t--global--icon--size--md: 14px;
+  --pf-t--global--icon--size--lg: 22px;
+  --pf-t--global--icon--size--xl: 56px;
+  --pf-t--global--border--color--200: var(--pf-t--color--gray--400);
+  --pf-t--global--border--color--100: var(--pf-t--color--gray--300);
+  --pf-t--global--border--width--divider--default: 1px;
+  --pf-t--global--border--width--divider--hover: 1px;
+  --pf-t--global--border--width--divider--active: 1px;
+  --pf-t--global--border--width--control--hover: 1px;
+  --pf-t--global--border--width--control--active: 2px;
+  --pf-t--global--border--width--control--default: 1px;
+  --pf-t--global--border--width--button--hover: 2px;
+  --pf-t--global--border--width--button--default: 1px;
+  --pf-t--global--border--width--button--active: 2px;
+  --pf-t--global--border--radius--pill: 999px;
+  --pf-t--global--border--radius--tiny: 4px;
+  --pf-t--global--border--radius--medium: 16px;
+  --pf-t--global--border--radius--large: 24px;
+  --pf-t--global--border--radius--small: 6px;
+  --pf-t--global--border--radius--sharp: 0px;
+  --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
+  --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
+  --pf-t--global--color--brand--active: var(--pf-t--global--color--brand--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--custom--active: var(--pf-t--global--color--status--custom--200);
+  --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--success--active: var(--pf-t--global--color--status--success--200);
+  --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--info--active: var(--pf-t--global--color--status--info--200);
+  --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--200);
+  --pf-t--global--color--status--warning--active: var(--pf-t--global--color--status--warning--200);
+  --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--100);
+  --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--danger--active: var(--pf-t--global--color--status--danger--200);
+  --pf-t--global--color--nonstatus--gray--hover: 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--active: var(--pf-t--global--color--nonstatus--gray--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--orange--active: var(--pf-t--global--color--nonstatus--orange--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--orangered--active: var(--pf-t--global--color--nonstatus--orangered--200);
+  --pf-t--global--color--nonstatus--cyan--hover: var(--pf-t--global--color--nonstatus--cyan--200);
+  --pf-t--global--color--nonstatus--cyan--default: var(--pf-t--global--color--nonstatus--cyan--100);
+  --pf-t--global--color--nonstatus--cyan--active: var(--pf-t--global--color--nonstatus--cyan--200);
+  --pf-t--global--color--nonstatus--gold--default: var(--pf-t--global--color--nonstatus--gold--100);
+  --pf-t--global--color--nonstatus--gold--hover: var(--pf-t--global--color--nonstatus--gold--200);
+  --pf-t--global--color--nonstatus--gold--active: var(--pf-t--global--color--nonstatus--gold--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--red--active: var(--pf-t--global--color--nonstatus--red--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--blue--active: var(--pf-t--global--color--nonstatus--blue--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--green--active: var(--pf-t--global--color--nonstatus--green--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--purple--active: var(--pf-t--global--color--nonstatus--purple--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--favorite--active: var(--pf-t--global--color--favorite--200);
+  --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
+  --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
+  --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
+  --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
+  --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
+  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--100);
+  --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--background--color--secondary--selected: 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--background--color--inverse--default: var(--pf-t--global--background--color--400);
+  --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
+  --pf-t--global--background--color--primary--selected: 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--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--floating--selected: var(--pf-t--global--background--color--200);
+  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--200);
+  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
+  --pf-t--global--background--color--action--plain--alt--selected: var(--pf-t--global--background--color--100);
+  --pf-t--global--background--color--action--plain--selected: var(--pf-t--global--background--color--200);
+  --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
+  --pf-t--global--background--color--highlight--active: var(--pf-t--global--background--color--highlight--200);
+  --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
+  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
+  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
+  --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200);
+  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--100);
+  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
+  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
+  --pf-t--global--border--color--active: var(--pf-t--global--color--brand--200);
+  --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--blue--active: var(--pf-t--global--color--nonstatus--blue--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--red--active: var(--pf-t--global--color--nonstatus--red--300);
+  --pf-t--global--border--color--nonstatus--orangered--active: 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--orange--hover: 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--active: var(--pf-t--global--color--nonstatus--orange--300);
+  --pf-t--global--border--color--nonstatus--gold--default: var(--pf-t--global--color--nonstatus--gold--200);
+  --pf-t--global--border--color--nonstatus--gold--hover: var(--pf-t--global--color--nonstatus--gold--300);
+  --pf-t--global--border--color--nonstatus--gold--active: var(--pf-t--global--color--nonstatus--gold--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--green--active: var(--pf-t--global--color--nonstatus--green--300);
+  --pf-t--global--border--color--nonstatus--cyan--active: var(--pf-t--global--color--nonstatus--cyan--300);
+  --pf-t--global--border--color--nonstatus--cyan--hover: var(--pf-t--global--color--nonstatus--cyan--300);
+  --pf-t--global--border--color--nonstatus--cyan--default: var(--pf-t--global--color--nonstatus--cyan--200);
+  --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--purple--active: var(--pf-t--global--color--nonstatus--purple--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--gray--active: var(--pf-t--global--color--nonstatus--gray--300);
+  --pf-t--global--text--color--on-brand--hover: 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--active: 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--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--brand--active: var(--pf-t--global--color--brand--active);
+  --pf-t--global--text--color--status--custom--active: var(--pf-t--global--color--status--custom--active);
+  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+  --pf-t--global--text--color--status--info--active: var(--pf-t--global--color--status--info--active);
+  --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+  --pf-t--global--text--color--status--on-info--hover: 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--active: 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-danger--default: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--status--on-danger--active: var(--pf-t--global--icon--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-custom--default: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--status--on-custom--active: 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--on-warning--default: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--status--on-warning--active: 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-success--default: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--status--on-success--active: var(--pf-t--global--text--color--inverse);
+  --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--success--active: var(--pf-t--global--color--status--success--active);
+  --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);
+  --pf-t--global--text--color--status--warning--active: var(--pf-t--global--color--status--warning--active);
+  --pf-t--global--text--color--status--danger--active: var(--pf-t--global--color--status--danger--active);
+  --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--nonstatus--on-gold--active: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--nonstatus--on-gold--hover: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--nonstatus--on-gold--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-green--default: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--nonstatus--on-green--active: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--nonstatus--on-blue--active: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--nonstatus--on-red--active: 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-orangered--active: 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-orange--active: 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-cyan--active: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--nonstatus--on-cyan--default: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--nonstatus--on-cyan--hover: var(--pf-t--global--text--color--regular);
+  --pf-t--global--text--color--nonstatus--on-purple--active: 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-gray--active: 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--background--color--control--default: var(--pf-t--global--background--color--primary--default);
+  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
+  --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
+  --pf-t--global--icon--color--brand--active: var(--pf-t--global--color--brand--active);
+  --pf-t--global--icon--color--on-brand--hover: 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--active: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-orange--active: 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-orange--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-orangered--default: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--nonstatus--on-orangered--active: 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-blue--default: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--nonstatus--on-blue--active: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--nonstatus--on-red--active: 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-red--default: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--nonstatus--on-gold--active: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--nonstatus--on-gold--default: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--nonstatus--on-gold--hover: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--nonstatus--on-green--active: 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-cyan--default: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--nonstatus--on-cyan--active: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--nonstatus--on-cyan--hover: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--nonstatus--on-gray--active: 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-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-purple--active: var(--pf-t--global--icon--color--regular);
+  --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--favorite--active: var(--pf-t--global--color--favorite--active);
+  --pf-t--global--icon--color--status--on-danger--active: 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-danger--default: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--status--on-custom--active: 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-info--default: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--status--on-info--active: 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--warning--hover: var(--pf-t--global--color--status--warning--hover);
+  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+  --pf-t--global--icon--color--status--warning--active: var(--pf-t--global--color--status--warning--active);
+  --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--custom--active: var(--pf-t--global--color--status--custom--active);
+  --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--success--active: var(--pf-t--global--color--status--success--active);
+  --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--danger--active: var(--pf-t--global--color--status--danger--active);
+  --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+  --pf-t--global--icon--color--status--info--active: var(--pf-t--global--color--status--info--active);
+  --pf-t--global--icon--color--status--on-success--hover: 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--active: 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--on-warning--default: var(--pf-t--global--icon--color--regular);
+  --pf-t--global--icon--color--status--on-warning--active: var(--pf-t--global--icon--color--inverse);
+  --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--brand--active: var(--pf-t--global--color--brand--active);
+  --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+  --pf-t--global--border--color--status--danger--active: var(--pf-t--global--color--status--danger--active);
+  --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+  --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--custom--active: var(--pf-t--global--color--status--custom--active);
+  --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--success--active: var(--pf-t--global--color--status--success--active);
+  --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--border--color--status--warning--active: var(--pf-t--global--color--status--warning--active);
+  --pf-t--global--border--color--status--info--active: var(--pf-t--global--color--status--info--active);
+  --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+  --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+}
+
+:root {
+  --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
+  --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
+  --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
+  --pf-t--global--font--line-height--100: 1.3;
+  --pf-t--global--font--line-height--200: 1.5;
+  --pf-t--global--font--weight--body--100: 400;
+  --pf-t--global--font--weight--body--200: 500;
+  --pf-t--global--font--weight--heading--100: 700;
+  --pf-t--global--font--weight--heading--200: 700;
+  --pf-t--global--font--size--body--100: 12px;
+  --pf-t--global--font--size--body--200: 14px;
+  --pf-t--global--font--size--body--300: 16px;
+  --pf-t--global--font--size--heading--100: 16px;
+  --pf-t--global--font--size--heading--200: 18px;
+  --pf-t--global--font--size--heading--300: 20px;
+  --pf-t--global--font--size--heading--400: 22px;
+  --pf-t--global--font--size--heading--500: 28px;
+  --pf-t--global--font--size--heading--600: 36px;
+  --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--weight--body: var(--pf-t--global--font--weight--body--100);
+  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
+  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
+  --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
+  --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--body--100);
+  --pf-t--global--font--size--body--md: var(--pf-t--global--font--size--body--200);
+  --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--body--300);
+  --pf-t--global--font--size--body: var(--pf-t--global--font--size--body--md);
+  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--heading--100);
+  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--heading--200);
+  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--heading--300);
+  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
+  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
+  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
+  --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
+  --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
+  --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
+  --pf-t--global--font--weight--body--legacy: 400;
+  --pf-t--global--font--weight--body--bold--legacy: 700;
+  --pf-t--global--font--weight--heading--legacy: 400;
+  --pf-t--global--font--weight--heading--bold--legacy: 700;
+  --pf-t--global--text-decoration--100: none;
+  --pf-t--global--text-decoration--200: underline;
+  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
+  --pf-t--global--link--text-decoration--hover: var(--pf-t--global--text-decoration--200);
+  --pf-t--global--mix-blend-mode--100: multiply;
+  --pf-t--global--mix-blend-mode--200: screen;
+  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
+  --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--control--active: var(--pf-t--global--border--width--200);
+  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 16%);
+  --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 16%);
+  --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 16%);
+  --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 16%);
+  --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 16%);
+  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--md--top: 0px -4px 8px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--md--bottom: 0px 4px 8px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--md--left: -4px 0px 8px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--md--right: 4px 0px 8px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--lg--top: 0px -8px 24px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--lg--bottom: 0px 8px 24px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--lg--left: -8px 0px 24px 0px rgb(0 0 0 / 12%);
+  --pf-t--global--box-shadow--lg--right: 8px 0px 24px 0px rgb(0 0 0 / 12%);
+}
+
+:root:where(.pf-v5-theme-dark) {
+  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
+  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
+  --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
+  --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
+  --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
+  --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
+  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
+  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
+}
+
+:root:where(.pf-v5-theme-dark) {
+  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
+  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
+  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
+  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--gold--400);
+  --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--gold--300);
+  --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--100);
+  --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--700);
+  --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--800);
+  --pf-t--global--dark--background--color--100: var(--pf-t--color--black);
+  --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--300);
+  --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--200);
+  --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--300);
+  --pf-t--global--dark--text--color--400: var(--pf-t--color--orangered--300);
+  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--900);
+  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--400);
+  --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--100);
+  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--900);
+  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--400);
+  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--100);
+  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--500);
+  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--600);
+  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--600);
+  --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--500);
+  --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--400);
+  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--200);
+  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--300);
+  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--400);
+  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--gold--300);
+  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--gold--400);
+  --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--gold--300);
+  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--gold--400);
+  --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--cyan--300);
+  --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--cyan--400);
+  --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--200);
+  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--300);
+  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--200);
+  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--300);
+  --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--orangered--200);
+  --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--orangered--300);
+  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--100);
+  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--200);
+  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--300);
+  --pf-t--global--dark--color--nonstatus--cyan--300: var(--pf-t--color--cyan--100);
+  --pf-t--global--dark--color--nonstatus--cyan--200: var(--pf-t--color--cyan--200);
+  --pf-t--global--dark--color--nonstatus--cyan--100: var(--pf-t--color--cyan--300);
+  --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--100);
+  --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--200);
+  --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--300);
+  --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--orangered--100);
+  --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--orangered--200);
+  --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--orangered--300);
+  --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--100);
+  --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--200);
+  --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--300);
+  --pf-t--global--dark--color--nonstatus--gold--300: var(--pf-t--color--gold--100);
+  --pf-t--global--dark--color--nonstatus--gold--200: var(--pf-t--color--gold--200);
+  --pf-t--global--dark--color--nonstatus--gold--100: var(--pf-t--color--gold--300);
+  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--100);
+  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--200);
+  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--300);
+  --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--100);
+  --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--200);
+  --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--300);
+  --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--100);
+  --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--200);
+  --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--300);
+  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--200);
+  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--100);
+  --pf-t--global--border--color--active: var(--pf-t--global--dark--color--brand--300);
+  --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--blue--active: var(--pf-t--global--dark--color--nonstatus--blue--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--red--active: var(--pf-t--global--dark--color--nonstatus--red--200);
+  --pf-t--global--border--color--nonstatus--orangered--active: 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--orange--hover: 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--active: var(--pf-t--global--dark--color--nonstatus--orange--200);
+  --pf-t--global--border--color--nonstatus--gold--default: var(--pf-t--global--dark--color--nonstatus--gold--100);
+  --pf-t--global--border--color--nonstatus--gold--hover: var(--pf-t--global--dark--color--nonstatus--gold--200);
+  --pf-t--global--border--color--nonstatus--gold--active: var(--pf-t--global--dark--color--nonstatus--gold--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--green--active: var(--pf-t--global--dark--color--nonstatus--green--200);
+  --pf-t--global--border--color--nonstatus--cyan--active: var(--pf-t--global--dark--color--nonstatus--cyan--200);
+  --pf-t--global--border--color--nonstatus--cyan--hover: var(--pf-t--global--dark--color--nonstatus--cyan--200);
+  --pf-t--global--border--color--nonstatus--cyan--default: var(--pf-t--global--dark--color--nonstatus--cyan--100);
+  --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--purple--active: var(--pf-t--global--dark--color--nonstatus--purple--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--gray--active: var(--pf-t--global--dark--color--nonstatus--gray--200);
+  --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
+  --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100);
+  --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
+  --pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--300);
+  --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
+  --pf-t--global--text--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+  --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--color--brand--default: var(--pf-t--global--dark--color--brand--200);
+  --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
+  --pf-t--global--color--brand--active: var(--pf-t--global--dark--color--brand--300);
+  --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--custom--active: var(--pf-t--global--dark--color--status--custom--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--success--active: var(--pf-t--global--dark--color--status--success--200);
+  --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
+  --pf-t--global--color--status--warning--active: 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--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--danger--active: var(--pf-t--global--dark--color--status--danger--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--info--active: var(--pf-t--global--dark--color--status--info--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--favorite--active: var(--pf-t--global--dark--color--favorite--200);
+  --pf-t--global--color--nonstatus--gray--hover: 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--active: var(--pf-t--global--dark--color--nonstatus--gray--200);
+  --pf-t--global--color--nonstatus--cyan--hover: var(--pf-t--global--dark--color--nonstatus--cyan--200);
+  --pf-t--global--color--nonstatus--cyan--default: var(--pf-t--global--dark--color--nonstatus--cyan--100);
+  --pf-t--global--color--nonstatus--cyan--active: var(--pf-t--global--dark--color--nonstatus--cyan--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--blue--active: var(--pf-t--global--dark--color--nonstatus--blue--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--red--active: var(--pf-t--global--dark--color--nonstatus--red--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--orangered--active: var(--pf-t--global--dark--color--nonstatus--orangered--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--orange--active: var(--pf-t--global--dark--color--nonstatus--orange--200);
+  --pf-t--global--color--nonstatus--gold--default: var(--pf-t--global--dark--color--nonstatus--gold--100);
+  --pf-t--global--color--nonstatus--gold--hover: var(--pf-t--global--dark--color--nonstatus--gold--200);
+  --pf-t--global--color--nonstatus--gold--active: var(--pf-t--global--dark--color--nonstatus--gold--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--green--active: var(--pf-t--global--dark--color--nonstatus--green--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--purple--active: var(--pf-t--global--dark--color--nonstatus--purple--200);
+  --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100);
+  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
+  --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
+  --pf-t--global--icon--color--subtle: var(--pf-t--global--dark--icon--color--200);
+  --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
+  --pf-t--global--background--color--secondary--selected: var(--pf-t--global--dark--background--color--200);
+  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
+  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
+  --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
+  --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
+  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
+  --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100);
+  --pf-t--global--background--color--highlight--active: var(--pf-t--global--dark--background--color--highlight--200);
+  --pf-t--global--background--color--primary--selected: var(--pf-t--global--dark--background--color--300);
+  --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200);
+  --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--300);
+  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
+  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--300);
+  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
+  --pf-t--global--background--color--action--plain--alt--selected: var(--pf-t--global--dark--background--color--200);
+  --pf-t--global--background--color--action--plain--selected: var(--pf-t--global--dark--background--color--200);
+  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
+  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
+  --pf-t--global--border--color--brand--active: var(--pf-t--global--color--brand--active);
+  --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
+  --pf-t--global--border--color--status--danger--active: var(--pf-t--global--color--status--danger--active);
+  --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
+  --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--custom--active: var(--pf-t--global--color--status--custom--active);
+  --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--success--active: var(--pf-t--global--color--status--success--active);
+  --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--border--color--status--warning--active: var(--pf-t--global--color--status--warning--active);
+  --pf-t--global--border--color--status--info--active: var(--pf-t--global--color--status--info--active);
+  --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+  --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
+  --pf-t--global--text--color--on-brand--hover: 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--active: 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--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--brand--active: var(--pf-t--global--color--brand--active);
+  --pf-t--global--text--color--status--custom--active: var(--pf-t--global--color--status--custom--active);
+  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
+  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
+  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
+  --pf-t--global--text--color--status--info--active: var(--pf-t--global--color--status--info--active);
+  --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+  --pf-t--global--text--color--status--on-info--hover: 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--active: 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-danger--default: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--status--on-danger--active: 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-custom--default: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--status--on-custom--active: 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--on-warning--default: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--status--on-warning--active: 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-success--default: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--status--on-success--active: var(--pf-t--global--text--color--inverse);
+  --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--success--active: var(--pf-t--global--color--status--success--active);
+  --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);
+  --pf-t--global--text--color--status--warning--active: var(--pf-t--global--color--status--warning--active);
+  --pf-t--global--text--color--status--danger--active: var(--pf-t--global--color--status--danger--active);
+  --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--nonstatus--on-gold--active: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--nonstatus--on-gold--hover: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--nonstatus--on-gold--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-green--default: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--nonstatus--on-green--active: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--nonstatus--on-blue--active: 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-red--active: 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-orangered--active: 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-orange--active: 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-cyan--active: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--nonstatus--on-cyan--default: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--nonstatus--on-cyan--hover: var(--pf-t--global--text--color--inverse);
+  --pf-t--global--text--color--nonstatus--on-purple--active: 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-gray--active: 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--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
+  --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
+  --pf-t--global--icon--color--brand--active: var(--pf-t--global--color--brand--active);
+  --pf-t--global--icon--color--on-brand--hover: 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--active: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-orange--active: 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-orange--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-orangered--default: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-orangered--active: 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-blue--default: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-blue--active: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-red--active: 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-red--default: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-gold--active: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-gold--default: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-gold--hover: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-green--active: 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-cyan--default: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-cyan--active: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-cyan--hover: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--nonstatus--on-gray--active: 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-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-purple--active: var(--pf-t--global--icon--color--inverse);
+  --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--favorite--active: var(--pf-t--global--color--favorite--active);
+  --pf-t--global--icon--color--status--on-danger--active: 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-danger--default: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--status--on-custom--active: 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-info--default: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--status--on-info--active: 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--warning--hover: var(--pf-t--global--color--status--warning--hover);
+  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
+  --pf-t--global--icon--color--status--warning--active: var(--pf-t--global--color--status--warning--active);
+  --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--custom--active: var(--pf-t--global--color--status--custom--active);
+  --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--success--active: var(--pf-t--global--color--status--success--active);
+  --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--danger--active: var(--pf-t--global--color--status--danger--active);
+  --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
+  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
+  --pf-t--global--icon--color--status--info--active: var(--pf-t--global--color--status--info--active);
+  --pf-t--global--icon--color--status--on-success--hover: 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--active: 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--on-warning--default: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--icon--color--status--on-warning--active: var(--pf-t--global--icon--color--inverse);
+  --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--action--plain--hover);
+  --pf-t--global--background--color--floating--selected: var(--pf-t--global--background--color--action--plain--hover);
+}
+
 @font-face {
   font-family: RedHatDisplay;
   font-style: normal;
@@ -508,10 +1364,14 @@
   font-variant-numeric: tabular-nums;
 }
 
-.pf-v5-m-vf-font {
-  --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
-  --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
-  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
+.pf-v5-m-legacy-font {
+  --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
+  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
+  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
+  --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
+  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
+  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
+  --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
 }
 
 .pf-v5-m-dir-rtl {
@@ -556,8 +1416,8 @@ h6) {
 }
 
 *,
-:where(*::before,
-*::after) {
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -567,10 +1427,10 @@ body) {
 }
 
 :where(body) {
-  font-family: var(--pf-v5-global--FontFamily--text);
-  font-size: var(--pf-v5-global--FontSize--md);
-  font-weight: var(--pf-v5-global--FontWeight--normal);
-  line-height: var(--pf-v5-global--LineHeight--md);
+  font-family: var(--pf-t--global--font--family--body);
+  font-size: var(--pf-t--global--font--size--body);
+  font-weight: var(--pf-t--global--font--weight--body);
+  line-height: var(--pf-t--global--font--line-height--body);
 }
 
 :where(h1,
@@ -580,7 +1440,7 @@ h4,
 h5,
 h6) {
   font-size: 100%;
-  font-weight: var(--pf-v5-global--FontWeight--normal);
+  font-weight: var(--pf-t--global--font--weight--body);
 }
 
 :where(ul) {
@@ -595,8 +1455,8 @@ textarea) {
   margin: 0;
   font-family: inherit;
   font-size: 100%;
-  line-height: var(--pf-v5-global--LineHeight--md);
-  color: var(--pf-v5-global--Color--100);
+  line-height: var(--pf-t--global--font--line-height--body);
+  color: var(--pf-t--global--text--color--regular);
 }
 
 :where(img,
@@ -626,18 +1486,17 @@ th) {
 
 :where(code,
 pre) {
-  font-family: var(--pf-v5-global--FontFamily--monospace);
+  font-family: var(--pf-t--global--font--family--mono);
 }
 
 :where(a) {
-  font-weight: var(--pf-v5-global--link--FontWeight);
-  color: var(--pf-v5-global--link--Color);
-  text-decoration: var(--pf-v5-global--link--TextDecoration);
+  color: var(--pf-t--global--text--color--link--default);
+  text-decoration: var(--pf-t--global--link--text-decoration);
 }
 
 :where(a:hover) {
-  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-global--link--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
+  --pf-v5-global--link--Color: var(--pf-t--global--text--color--link--hover);
+  --pf-v5-global--link--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
 }
 
 :where(a,
@@ -645,10 +1504,6 @@ button) {
   cursor: pointer;
 }
 
-:where(.pf-v5-theme-dark) {
-  color-scheme: dark;
-}
-
 .pf-v5-t-dark.pf-m-transparent {
   background-color: transparent;
 }