@patternfly/patternfly 6.0.0-alpha.1 → 6.0.0-alpha.11

package/base/tokens/_tokens-default.scss

@@ -0,0 +1,379 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 04 Oct 2023 12:58:15 GMT
+ */
+
+: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);
+}

package/base/tokens/_tokens-font.scss

@@ -0,0 +1,96 @@
+// FONT TOKENS
+// Manually added from hackathon values
+// Currently not being exported from Figma because they are styles rather than variables
+// The ability to make font variables is reportedly coming by the end of the year
+
+:root {
+  // Base tokens for fonts
+  --pf-t--global--font--family--100: redhattext;
+  --pf-t--global--font--family--200: redhatdisplay;
+  --pf-t--global--font--family--300: redhatmono;
+  --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: 600;
+  --pf-t--global--font--weight--heading--100: 700; // what should this be?
+  --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: 24px;
+  --pf-t--global--font--size--heading--500: 28px;
+  --pf-t--global--font--size--heading--600: 36px;
+
+  // Semantic tokens for fonts
+  --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--100);
+  --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
+  --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);
+
+  // Other missing ones
+  // text-decoration
+  --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);
+
+  // blend modes 
+  --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);
+
+  // semantic border width
+  --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);
+
+  // box-shadow
+  --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%);
+
+  &:where(.pf-v5-theme-dark) {
+    // blend mode
+    --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
+
+    // box shadow
+    --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%);
+  }
+}
+

package/base/tokens/_tokens-palette.scss

@@ -0,0 +1,75 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 04 Oct 2023 12:59:21 GMT
+ */
+
+: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;
+}

package/components/AboutModalBox/about-modal-box.css

@@ -26,6 +26,7 @@
   --pf-v5-c-about-modal-box--Width: 100%;
   --pf-v5-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
   --pf-v5-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
+  --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
   --pf-v5-c-about-modal-box__brand--PaddingTop: var(--pf-v5-global--spacer--2xl);
   --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-global--spacer--xl);
   --pf-v5-c-about-modal-box__brand--PaddingLeft: var(--pf-v5-global--spacer--xl);
@@ -78,6 +79,10 @@
   background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
   background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-about-modal-box {
+  --pf-v5-c-about-modal-box--BackgroundPosition: bottom left;
+}
+
 @media screen and (min-width: 576px) {
   .pf-v5-c-about-modal-box {
     --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-c-about-modal-box__brand--sm--PaddingRight);
@@ -132,7 +137,10 @@
 .pf-v5-c-about-modal-box__brand {
   display: flex;
   grid-area: brand;
-  padding: var(--pf-v5-c-about-modal-box__brand--PaddingTop) var(--pf-v5-c-about-modal-box__brand--PaddingRight) var(--pf-v5-c-about-modal-box__brand--PaddingBottom) var(--pf-v5-c-about-modal-box__brand--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-about-modal-box__brand--PaddingTop);
+  padding-block-end: var(--pf-v5-c-about-modal-box__brand--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-about-modal-box__brand--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-about-modal-box__brand--PaddingRight);
 }
 
 .pf-v5-c-about-modal-box__brand-image {
@@ -143,14 +151,14 @@
   display: flex;
   flex-direction: column;
   grid-area: header;
-  padding-right: var(--pf-v5-c-about-modal-box__header--PaddingRight);
-  padding-bottom: var(--pf-v5-c-about-modal-box__header--PaddingBottom);
-  padding-left: var(--pf-v5-c-about-modal-box__header--PaddingLeft);
+  padding-block-end: var(--pf-v5-c-about-modal-box__header--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-about-modal-box__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-about-modal-box__header--PaddingRight);
 }
 
 .pf-v5-c-about-modal-box__strapline {
-  padding-top: var(--pf-v5-c-about-modal-box__strapline--PaddingTop);
-  margin-top: auto;
+  padding-block-start: var(--pf-v5-c-about-modal-box__strapline--PaddingTop);
+  margin-block-start: auto;
   font-size: var(--pf-v5-c-about-modal-box__strapline--FontSize);
 }
 
@@ -158,12 +166,15 @@
   display: flex;
   flex-direction: column;
   grid-area: content;
-  margin: var(--pf-v5-c-about-modal-box__content--MarginTop) var(--pf-v5-c-about-modal-box__content--MarginRight) var(--pf-v5-c-about-modal-box__content--MarginBottom) var(--pf-v5-c-about-modal-box__content--MarginLeft);
+  margin-block-start: var(--pf-v5-c-about-modal-box__content--MarginTop);
+  margin-block-end: var(--pf-v5-c-about-modal-box__content--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-about-modal-box__content--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-about-modal-box__content--MarginRight);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
   word-break: break-word;
+  -webkit-overflow-scrolling: touch;
 }
 @media screen and (min-width: 576px) {
   .pf-v5-c-about-modal-box__content {
@@ -174,14 +185,14 @@
 
 .pf-v5-c-about-modal-box__close {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   display: flex;
   grid-area: close;
   align-items: flex-start;
   justify-content: flex-end;
-  padding-top: var(--pf-v5-c-about-modal-box__close--PaddingTop);
-  padding-right: var(--pf-v5-c-about-modal-box__close--PaddingRight);
-  padding-bottom: var(--pf-v5-c-about-modal-box__close--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-about-modal-box__close--PaddingTop);
+  padding-block-end: var(--pf-v5-c-about-modal-box__close--PaddingBottom);
+  padding-inline-end: var(--pf-v5-c-about-modal-box__close--PaddingRight);
 }
 @media only screen and (min-width: 576px) {
   .pf-v5-c-about-modal-box__close {