@patternfly/patternfly 6.0.0-alpha.115 → 6.0.0-alpha.117

package/base/_variables.scss

@@ -183,12 +183,12 @@
   --#{$pf-global}--gutter--md: #{$pf-v6-global--gutter--md};
 
   // Z-Index
-  --pf-t--global--Zindex--xs: #{$pf-v6-global--ZIndex--xs};
-  --pf-t--global--Zindex--sm: #{$pf-v6-global--ZIndex--sm};
-  --pf-t--global--Zindex--md: #{$pf-v6-global--ZIndex--md};
-  --pf-t--global--Zindex--lg: #{$pf-v6-global--ZIndex--lg};
-  --pf-t--global--Zindex--xl: #{$pf-v6-global--ZIndex--xl};
-  --pf-t--global--Zindex--2xl: #{$pf-v6-global--ZIndex--2xl};
+  --pf-t--global--z-index--xs: #{$pf-v6-global--ZIndex--xs};
+  --pf-t--global--z-index--sm: #{$pf-v6-global--ZIndex--sm};
+  --pf-t--global--z-index--md: #{$pf-v6-global--ZIndex--md};
+  --pf-t--global--z-index--lg: #{$pf-v6-global--ZIndex--lg};
+  --pf-t--global--z-index--xl: #{$pf-v6-global--ZIndex--xl};
+  --pf-t--global--z-index--2xl: #{$pf-v6-global--ZIndex--2xl};
 
   // Grid breakpoints
   --#{$pf-global}--breakpoint--xs: #{$pf-v6-global--breakpoint--xs};
@@ -273,7 +273,7 @@
   --#{$pf-global}--ListStyle: #{$pf-v6-global--ListStyle};
   --pf-t--global--transition: #{$pf-v6-global--Transition};
   --pf-t--global--transition--timing-function: #{$pf-v6-global--TimingFunction};
-  --pf-t--global--transitionDuration: #{$pf-v6-global--TransitionDuration};
+  --pf-t--global--transition--duration: #{$pf-v6-global--TransitionDuration};
 
   // Arrow size
   --#{$pf-global}--arrow--width: #{$pf-v6-global--arrow--width};

package/base/patternfly-variables.css

@@ -159,12 +159,12 @@
   --pf-v6-global--spacer--form-element: 0.375rem;
   --pf-v6-global--gutter: 1rem;
   --pf-v6-global--gutter--md: 1.5rem;
-  --pf-t--global--Zindex--xs: 100;
-  --pf-t--global--Zindex--sm: 200;
-  --pf-t--global--Zindex--md: 300;
-  --pf-t--global--Zindex--lg: 400;
-  --pf-t--global--Zindex--xl: 500;
-  --pf-t--global--Zindex--2xl: 600;
+  --pf-t--global--z-index--xs: 100;
+  --pf-t--global--z-index--sm: 200;
+  --pf-t--global--z-index--md: 300;
+  --pf-t--global--z-index--lg: 400;
+  --pf-t--global--z-index--xl: 500;
+  --pf-t--global--z-index--2xl: 600;
   --pf-v6-global--breakpoint--xs: 0;
   --pf-v6-global--breakpoint--sm: 576px;
   --pf-v6-global--breakpoint--md: 768px;
@@ -227,7 +227,7 @@
   --pf-v6-global--ListStyle: disc outside;
   --pf-t--global--transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
   --pf-t--global--transition--timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --pf-t--global--transitionDuration: 250ms;
+  --pf-t--global--transition--duration: 250ms;
   --pf-v6-global--arrow--width: 0.9375rem;
   --pf-v6-global--arrow--width-lg: 1.5625rem;
   --pf-v6-global--target-size--MinWidth: 44px;
@@ -470,12 +470,12 @@ html .ws-preview {
   --pf-t--global--box-shadow--X--300: -1px;
   --pf-t--global--box-shadow--X--200: -4px;
   --pf-t--global--box-shadow--X--100: -8px;
-  --pf-t--global--Zindex--600: 600;
-  --pf-t--global--Zindex--500: 500;
-  --pf-t--global--Zindex--400: 400;
-  --pf-t--global--Zindex--300: 300;
-  --pf-t--global--Zindex--200: 200;
-  --pf-t--global--Zindex--100: 100;
+  --pf-t--global--z-index--600: 600;
+  --pf-t--global--z-index--500: 500;
+  --pf-t--global--z-index--400: 400;
+  --pf-t--global--z-index--300: 300;
+  --pf-t--global--z-index--200: 200;
+  --pf-t--global--z-index--100: 100;
   --pf-t--global--font--size--800: 36px;
   --pf-t--global--font--size--700: 28px;
   --pf-t--global--font--size--600: 22px;
@@ -609,12 +609,12 @@ html .ws-preview {
   --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
   --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
   --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
-  --pf-t--global--Zindex--2xl: 600;
-  --pf-t--global--Zindex--xl: 500;
-  --pf-t--global--Zindex--lg: 400;
-  --pf-t--global--Zindex--md: 300;
-  --pf-t--global--Zindex--sm: 200;
-  --pf-t--global--Zindex--xs: 100;
+  --pf-t--global--z-index--2xl: 600;
+  --pf-t--global--z-index--xl: 500;
+  --pf-t--global--z-index--lg: 400;
+  --pf-t--global--z-index--md: 300;
+  --pf-t--global--z-index--sm: 200;
+  --pf-t--global--z-index--xs: 100;
   --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
   --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
   --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);

package/base/tokens/_tokens-charts.scss

@@ -1,6 +1,6 @@
 // /**
 //  * Do not edit directly
-//  * Generated on Wed, 27 Mar 2024 20:59:01 GMT
+//  * Generated on Mon, 01 Apr 2024 17:12:28 GMT
 //  */
 
 :root {

package/base/tokens/_tokens-dark.scss

@@ -1,6 +1,6 @@
 // /**
 //  * Do not edit directly
-//  * Generated on Wed, 27 Mar 2024 20:59:01 GMT
+//  * Generated on Mon, 01 Apr 2024 17:12:28 GMT
 //  */
 
 :root:where(.pf-v6-theme-dark) {

package/base/tokens/_tokens-default.scss

@@ -1,6 +1,6 @@
 // /**
 //  * Do not edit directly
-//  * Generated on Wed, 27 Mar 2024 20:59:01 GMT
+//  * Generated on Mon, 01 Apr 2024 17:12:28 GMT
 //  */
 
 :root {
@@ -27,12 +27,12 @@
   --pf-t--global--box-shadow--X--300: -1px;
   --pf-t--global--box-shadow--X--200: -4px;
   --pf-t--global--box-shadow--X--100: -8px;
-  --pf-t--global--Zindex--600: 600;
-  --pf-t--global--Zindex--500: 500;
-  --pf-t--global--Zindex--400: 400;
-  --pf-t--global--Zindex--300: 300;
-  --pf-t--global--Zindex--200: 200;
-  --pf-t--global--Zindex--100: 100;
+  --pf-t--global--z-index--600: 600;
+  --pf-t--global--z-index--500: 500;
+  --pf-t--global--z-index--400: 400;
+  --pf-t--global--z-index--300: 300;
+  --pf-t--global--z-index--200: 200;
+  --pf-t--global--z-index--100: 100;
   --pf-t--global--font--size--800: 36px;
   --pf-t--global--font--size--700: 28px;
   --pf-t--global--font--size--600: 22px;
@@ -166,12 +166,12 @@
   --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
   --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
   --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
-  --pf-t--global--Zindex--2xl: 600;
-  --pf-t--global--Zindex--xl: 500;
-  --pf-t--global--Zindex--lg: 400;
-  --pf-t--global--Zindex--md: 300;
-  --pf-t--global--Zindex--sm: 200;
-  --pf-t--global--Zindex--xs: 100;
+  --pf-t--global--z-index--2xl: 600;
+  --pf-t--global--z-index--xl: 500;
+  --pf-t--global--z-index--lg: 400;
+  --pf-t--global--z-index--md: 300;
+  --pf-t--global--z-index--sm: 200;
+  --pf-t--global--z-index--xs: 100;
   --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
   --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
   --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);

package/base/tokens/_tokens-palette.scss

@@ -1,6 +1,6 @@
 // /**
 //  * Do not edit directly
-//  * Generated on Wed, 27 Mar 2024 20:59:01 GMT
+//  * Generated on Mon, 01 Apr 2024 17:12:28 GMT
 //  */
 
 :root {

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

@@ -19,7 +19,7 @@
   --pf-v6-c-about-modal-box__brand--sm--PaddingRight: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-about-modal-box__brand--sm--PaddingLeft: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-about-modal-box__brand--sm--PaddingBottom: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--Zindex--2xl);
+  --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
   --pf-v6-c-about-modal-box__close--PaddingTop: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-about-modal-box__close--PaddingRight: var(--pf-t--global--spacer--xl);
   --pf-v6-c-about-modal-box__close--PaddingBottom: var(--pf-t--global--spacer--xl);

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

@@ -38,7 +38,7 @@
   }
 
   // Close
-  --#{$about-modal-box}__close--ZIndex: var(--pf-t--global--Zindex--2xl);
+  --#{$about-modal-box}__close--ZIndex: var(--pf-t--global--z-index--2xl);
   --#{$about-modal-box}__close--PaddingTop: var(--pf-t--global--spacer--2xl);
   --#{$about-modal-box}__close--PaddingRight: var(--pf-t--global--spacer--xl);
   --#{$about-modal-box}__close--PaddingBottom: var(--pf-t--global--spacer--xl);

package/components/Alert/alert-group.css

@@ -3,7 +3,7 @@
   --pf-v6-c-alert-group--m-toast--Top: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-alert-group--m-toast--Right: var(--pf-t--global--spacer--xl);
   --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
-  --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--Zindex--2xl);
+  --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
   --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
   --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-alert-group__overflow-button--PaddingTop: var(--pf-t--global--spacer--md);

package/components/Alert/alert-group.scss

@@ -9,7 +9,7 @@
   --#{$alert-group}--m-toast--Top: var(--pf-t--global--spacer--2xl);
   --#{$alert-group}--m-toast--Right: var(--pf-t--global--spacer--xl);
   --#{$alert-group}--m-toast--MaxWidth: #{pf-size-prem(600px)};
-  --#{$alert-group}--m-toast--ZIndex: var(--pf-t--global--Zindex--2xl);
+  --#{$alert-group}--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
 
   // Overflow button
   --#{$alert-group}__overflow-button--BorderWidth: 0;

package/components/AppLauncher/app-launcher.css

@@ -4,7 +4,7 @@
   --pf-v6-c-app-launcher__menu--PaddingTop: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-app-launcher__menu--PaddingBottom: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-app-launcher__menu--Top: calc(100% + var(--pf-v6-global--spacer--xs));
-  --pf-v6-c-app-launcher__menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-app-launcher__menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-app-launcher--m-top__menu--Top: 0;
   --pf-v6-c-app-launcher--m-top__menu--TranslateY: calc(-100% - var(--pf-v6-global--spacer--xs));
   --pf-v6-c-app-launcher__toggle--PaddingTop: var(--pf-v6-global--spacer--form-element);

package/components/AppLauncher/app-launcher.scss

@@ -9,7 +9,7 @@
   --#{$app-launcher}__menu--PaddingTop: var(--#{$pf-global}--spacer--sm);
   --#{$app-launcher}__menu--PaddingBottom: var(--#{$pf-global}--spacer--sm);
   --#{$app-launcher}__menu--Top: calc(100% + var(--#{$pf-global}--spacer--xs));
-  --#{$app-launcher}__menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$app-launcher}__menu--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$app-launcher}--m-top__menu--Top: 0;
   --#{$app-launcher}--m-top__menu--TranslateY: calc(-100% - var(--#{$pf-global}--spacer--xs)); // The "dropup" menu must be transformed up and this calculates how much to create space between the toggle and menu
 

package/components/Backdrop/backdrop.css

@@ -1,7 +1,7 @@
 :root,
 .pf-v6-c-backdrop {
   --pf-v6-c-backdrop--Position: fixed;
-  --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--Zindex--lg);
+  --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
   --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
 }
 

package/components/Backdrop/backdrop.scss

@@ -3,7 +3,7 @@
 :root,
 .#{$backdrop} {
   --#{$backdrop}--Position: fixed;
-  --#{$backdrop}--ZIndex: var(--pf-t--global--Zindex--lg);
+  --#{$backdrop}--ZIndex: var(--pf-t--global--z-index--lg);
   --#{$backdrop}--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
 }
 

package/components/Banner/banner.css

@@ -14,7 +14,7 @@
   --pf-v6-c-banner--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-banner--link--disabled--Color: var(--pf-v6-c-banner--Color);
   --pf-v6-c-banner--link--disabled--TextDecoration: none;
-  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--Zindex--md);
+  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
   --pf-v6-c-banner--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);

package/components/Banner/banner.scss

@@ -25,7 +25,7 @@
   --#{$banner}--link--disabled--TextDecoration: none;
 
   // modifier variables
-  --#{$banner}--m-sticky--ZIndex: var(--pf-t--global--Zindex--md);
+  --#{$banner}--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
   --#{$banner}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
 
   // status modifier variables

package/components/Button/button.css

@@ -207,7 +207,7 @@
   --pf-v6-c-button__progress--Left: var(--pf-t--global--spacer--md);
   --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
   --pf-v6-c-button--m-progress--TransitionProperty: padding;
-  --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transitionDuration);
+  --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
   --pf-v6-c-button--m-progress--PaddingRight: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
   --pf-v6-c-button--m-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
   --pf-v6-c-button--m-in-progress--PaddingRight: var(--pf-t--global--spacer--md);

package/components/Button/button.scss

@@ -251,7 +251,7 @@
   --#{$button}__progress--Left: var(--pf-t--global--spacer--md);
   --#{$button}__progress--Color: var(--#{$button}__icon--Color);
   --#{$button}--m-progress--TransitionProperty: padding;
-  --#{$button}--m-progress--TransitionDuration: var(--pf-t--global--transitionDuration);
+  --#{$button}--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
   --#{$button}--m-progress--PaddingRight: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
   --#{$button}--m-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
   --#{$button}--m-in-progress--PaddingRight: var(--pf-t--global--spacer--md);

package/components/ContextSelector/context-selector.css

@@ -45,7 +45,7 @@
   --pf-v6-c-context-selector--m-plain__toggle-icon--Color: var(--pf-v6-global--Color--200);
   --pf-v6-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-v6-global--Color--100);
   --pf-v6-c-context-selector__menu--Top: calc(100% + var(--pf-v6-global--spacer--xs));
-  --pf-v6-c-context-selector__menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-context-selector__menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-context-selector__menu--PaddingTop: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-context-selector__menu--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-100);
   --pf-v6-c-context-selector__menu--BoxShadow: var(--pf-v6-global--BoxShadow--md);

package/components/ContextSelector/context-selector.scss

@@ -44,7 +44,7 @@
 
   // Menu
   --#{$context-selector}__menu--Top: calc(100% + var(--#{$pf-global}--spacer--xs));
-  --#{$context-selector}__menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$context-selector}__menu--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$context-selector}__menu--PaddingTop: var(--#{$pf-global}--spacer--sm); // remove at breaking change
   --#{$context-selector}__menu--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
   --#{$context-selector}__menu--BoxShadow: var(--#{$pf-global}--BoxShadow--md);

package/components/DatePicker/date-picker.css

@@ -8,7 +8,7 @@
   --pf-v6-c-date-picker__input--c-form-control--width-chars: 11;
   --pf-v6-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --pf-v6-c-date-picker__calendar--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-date-picker__calendar--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-date-picker__calendar--Top: calc(100% + var(--pf-t--global--spacer--xs));
   --pf-v6-c-date-picker__calendar--Right: auto;
   --pf-v6-c-date-picker__calendar--Left: 0;

package/components/DatePicker/date-picker.scss

@@ -10,7 +10,7 @@
   --#{$date-picker}__input--c-form-control--width-chars: 11;
   --#{$date-picker}__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$date-picker}__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --#{$date-picker}__calendar--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$date-picker}__calendar--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$date-picker}__calendar--Top: calc(100% + var(--pf-t--global--spacer--xs));
   --#{$date-picker}__calendar--Right: auto;
   --#{$date-picker}__calendar--Left: 0;

package/components/Drawer/drawer.css

@@ -6,10 +6,10 @@
   --pf-v6-c-drawer__content--BackgroundColor: transparent;
   --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-drawer__panel--MinWidth: 50%;
   --pf-v6-c-drawer__panel--MaxHeight: auto;
-  --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);

package/components/Drawer/drawer.scss

@@ -14,12 +14,12 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   --#{$drawer}__content--BackgroundColor: transparent;
   --#{$drawer}__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$drawer}__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$drawer}__content--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$drawer}__content--ZIndex: var(--pf-t--global--z-index--xs);
 
   // Panel
   --#{$drawer}__panel--MinWidth: 50%; // change to __panel--md--MinWidth at breaking change
   --#{$drawer}__panel--MaxHeight: auto;
-  --#{$drawer}__panel--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$drawer}__panel--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$drawer}__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$drawer}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$drawer}__panel--RowGap: var(--pf-t--global--spacer--sm);

package/components/Dropdown/dropdown.css

@@ -98,7 +98,7 @@
   --pf-v6-c-dropdown__menu--PaddingTop: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-dropdown__menu--PaddingBottom: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-dropdown__menu--Top: calc(100% + var(--pf-v6-global--spacer--xs));
-  --pf-v6-c-dropdown__menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-dropdown__menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-dropdown--m-top__menu--Top: 0;
   --pf-v6-c-dropdown--m-top__menu--TranslateY: calc(-100% - var(--pf-v6-global--spacer--xs));
   --pf-v6-c-dropdown__menu-item--BackgroundColor: transparent;
@@ -135,7 +135,7 @@
   --pf-v6-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-v6-global--spacer--xs);
   --pf-v6-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;
   --pf-v6-c-dropdown--c-menu--Top: calc(100% + var(--pf-v6-global--spacer--xs));
-  --pf-v6-c-dropdown--c-menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-dropdown--c-menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-dropdown--m-top--c-menu--Top: 0;
   --pf-v6-c-dropdown--m-top--c-menu--TranslateY: calc(-100% - var(--pf-v6-global--spacer--xs));
   --pf-v6-c-dropdown--m-full-height__toggle--before--BorderTopWidth: 0;

package/components/Dropdown/dropdown.scss

@@ -124,7 +124,7 @@ $pf-v6-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
   --#{$dropdown}__menu--PaddingTop: var(--#{$pf-global}--spacer--sm);
   --#{$dropdown}__menu--PaddingBottom: var(--#{$pf-global}--spacer--sm);
   --#{$dropdown}__menu--Top: calc(100% + var(--#{$pf-global}--spacer--xs)); // The top of the menu must be pushed down to create space between the toggle and menu
-  --#{$dropdown}__menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$dropdown}__menu--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$dropdown}--m-top__menu--Top: 0;
   --#{$dropdown}--m-top__menu--TranslateY: calc(-100% - var(--#{$pf-global}--spacer--xs)); // The "dropup" menu must be transformed up and this calculates how much to create space between the toggle and menu
 
@@ -175,7 +175,7 @@ $pf-v6-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 
   // menu
   --#{$dropdown}--c-menu--Top: calc(100% + var(--#{$pf-global}--spacer--xs)); // The top of the menu must be pushed down to create space between the toggle and menu
-  --#{$dropdown}--c-menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$dropdown}--c-menu--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$dropdown}--m-top--c-menu--Top: 0;
   --#{$dropdown}--m-top--c-menu--TranslateY: calc(-100% - var(--#{$pf-global}--spacer--xs)); // The "dropup" menu must be transformed up and this calculates how much to create space between the toggle and menu
 

package/components/Menu/menu.css

@@ -71,7 +71,7 @@
   --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
-  --pf-v6-c-menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-menu--m-plain--BoxShadow: none;
@@ -134,22 +134,22 @@
   --pf-v6-c-menu--m-flyout__menu--top-offset: 0px;
   --pf-v6-c-menu--m-flyout__menu--left-offset: 0px;
   --pf-v6-c-menu--m-flyout__menu--m-left--right-offset: 0px;
-  --pf-v6-c-menu--m-flyout__Zindex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-menu--m-flyout__Zindex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-menu--m-flyout__menu--Top: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1 + var(--pf-v6-c-menu--m-flyout__menu--top-offset));
   --pf-v6-c-menu--m-flyout__menu--Right: auto;
   --pf-v6-c-menu--m-flyout__menu--Bottom: auto;
   --pf-v6-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset));
   --pf-v6-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1);
   --pf-v6-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
-  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--transitionDuration);
-  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--transitionDuration);
+  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--transition--duration);
+  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--transition--duration);
   --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
   --pf-v6-c-menu--m-drilldown--c-menu--Top: 0;
-  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transitionDuration);
+  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transition--duration);
   --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
-  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transitionDuration);
+  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transition--duration);
   --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
-  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
 }
 
 .pf-v6-c-menu__content,

package/components/Menu/menu.scss

@@ -11,7 +11,7 @@
   --#{$menu}--Color: var(--pf-t--global--text--color--regular);
   --#{$menu}--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$menu}--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
-  --#{$menu}--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$menu}--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$menu}--button--disabled--Color: var(--pf-t--global--text--color--disabled);
   --#{$menu}--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
 
@@ -112,7 +112,7 @@
   --#{$menu}--m-flyout__menu--m-left--right-offset: 0px;
 
   // * Menu flyout
-  --#{$menu}--m-flyout__Zindex: var(--pf-t--global--Zindex--sm);
+  --#{$menu}--m-flyout__Zindex: var(--pf-t--global--z-index--sm);
   --#{$menu}--m-flyout__menu--Top: calc(var(--#{$menu}__list--PaddingBlockStart) * -1 + var(--#{$menu}--m-flyout__menu--top-offset));
   --#{$menu}--m-flyout__menu--Right: auto;
   --#{$menu}--m-flyout__menu--Bottom: auto;
@@ -121,21 +121,21 @@
   --#{$menu}--m-flyout__menu--m-left--Right: calc(100% + var(--#{$menu}--m-flyout__menu--m-left--right-offset));
 
   // * Menu drilldown content
-  --#{$menu}--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--transitionDuration);
-  --#{$menu}--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--transitionDuration);
+  --#{$menu}--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--transition--duration);
+  --#{$menu}--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--transition--duration);
   --#{$menu}--m-drilldown__content--Transition: transform var(--#{$menu}--m-drilldown__content--TransitionDuration--transform), height var(--#{$menu}--m-drilldown__content--TransitionDuration--height);
 
   // * Menu drilldown menu
   --#{$menu}--m-drilldown--c-menu--Top: 0;
-  --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transitionDuration);
+  --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transition--duration);
   --#{$menu}--m-drilldown--c-menu--Transition: transform var(--#{$menu}--m-drilldown--c-menu--TransitionDuration--transform);
 
   // * Menu drilldown list
-  --#{$menu}--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transitionDuration);
+  --#{$menu}--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transition--duration);
   --#{$menu}--m-drilldown__list--Transition: transform var(--#{$menu}--m-drilldown__list--TransitionDuration--transform);
 
   // * Menu drilled in
-  --#{$menu}--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$menu}--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
 }
 
 // - Menu shared display flex

package/components/MenuToggle/menu-toggle.css

@@ -13,7 +13,7 @@
   --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--button--default);
-  --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--button--default);

package/components/MenuToggle/menu-toggle.scss

@@ -23,7 +23,7 @@
   --#{$menu-toggle}--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$menu-toggle}--BorderColor: var(--pf-t--global--border--color--default);
   --#{$menu-toggle}--BorderWidth: var(--pf-t--global--border--width--button--default);
-  --#{$menu-toggle}--border--ZIndex: var(--pf-t--global--Zindex--xs); // add z-index for toggle border to render above other borders
+  --#{$menu-toggle}--border--ZIndex: var(--pf-t--global--z-index--xs); // add z-index for toggle border to render above other borders
 
   // * Menu toggle hover
   --#{$menu-toggle}--hover--Color: var(--pf-t--global--text--color--regular);

package/components/ModalBox/modal-box.css

@@ -2,7 +2,7 @@
   --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
-  --pf-v6-c-modal-box--ZIndex: var(--pf-t--global--Zindex--xl);
+  --pf-v6-c-modal-box--ZIndex: var(--pf-t--global--z-index--xl);
   --pf-v6-c-modal-box--Width: 100%;
   --pf-v6-c-modal-box--MaxWidth: calc(100% - var(--pf-t--global--spacer--xl));
   --pf-v6-c-modal-box--m-sm--sm--MaxWidth: 35rem;

package/components/ModalBox/modal-box.scss

@@ -4,7 +4,7 @@
   --#{$modal-box}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$modal-box}--BorderRadius: var(--pf-t--global--border--radius--large);
   --#{$modal-box}--BoxShadow: var(--pf-t--global--box-shadow--lg);
-  --#{$modal-box}--ZIndex: var(--pf-t--global--Zindex--xl); // TODO use a z-index token
+  --#{$modal-box}--ZIndex: var(--pf-t--global--z-index--xl); // TODO use a z-index token
   --#{$modal-box}--Width: 100%;
   --#{$modal-box}--MaxWidth: calc(100% - var(--pf-t--global--spacer--xl)); // Ensure modal has gutters at full width
   --#{$modal-box}--m-sm--sm--MaxWidth: #{pf-size-prem(560px)}; // MaxWidth is based on optimal line length for reading

package/components/NotificationDrawer/notification-drawer.css

@@ -6,7 +6,7 @@
   --pf-v6-c-notification-drawer__header--PaddingBottom: var(--pf-t--global--spacer--md);
   --pf-v6-c-notification-drawer__header--PaddingLeft: var(--pf-t--global--spacer--lg);
   --pf-v6-c-notification-drawer__header--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --pf-v6-c-notification-drawer__header--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-notification-drawer__header--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-notification-drawer__header-title--FontSize: var(--pf-t--global--font--size--heading--md);
   --pf-v6-c-notification-drawer__header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
   --pf-v6-c-notification-drawer__header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
@@ -15,7 +15,7 @@
   --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-notification-drawer__body--PaddingBlockStart: 0;
   --pf-v6-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-notification-drawer__list--Gap: var(--pf-t--global--spacer--sm);

package/components/NotificationDrawer/notification-drawer.scss

@@ -10,7 +10,7 @@
   --#{$notification-drawer}__header--PaddingBottom: var(--pf-t--global--spacer--md);
   --#{$notification-drawer}__header--PaddingLeft: var(--pf-t--global--spacer--lg);
   --#{$notification-drawer}__header--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --#{$notification-drawer}__header--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$notification-drawer}__header--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$notification-drawer}__header-title--FontSize: var(--pf-t--global--font--size--heading--md);
   --#{$notification-drawer}__header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
   --#{$notification-drawer}__header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
@@ -21,7 +21,7 @@
   --#{$notification-drawer}__header-status--Color: var(--pf-t--global--text--color--subtle);
 
   // Body
-  --#{$notification-drawer}__body--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$notification-drawer}__body--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$notification-drawer}__body--PaddingBlockStart: 0; // TODO var(--pf-t--global--spacer--sm);
   --#{$notification-drawer}__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
 

package/components/OptionsMenu/options-menu.css

@@ -40,7 +40,7 @@
   --pf-v6-c-options-menu__menu--PaddingTop: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-options-menu__menu--PaddingBottom: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-options-menu__menu--Top: calc(100% + var(--pf-v6-global--spacer--xs));
-  --pf-v6-c-options-menu__menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-options-menu__menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-options-menu--m-top__menu--Top: 0;
   --pf-v6-c-options-menu--m-top__menu--TranslateY: calc(-100% - var(--pf-v6-global--spacer--xs));
   --pf-v6-c-options-menu__menu-item--BackgroundColor: transparent;

package/components/OptionsMenu/options-menu.scss

@@ -49,7 +49,7 @@
   --#{$options-menu}__menu--PaddingTop: var(--#{$pf-global}--spacer--sm);
   --#{$options-menu}__menu--PaddingBottom: var(--#{$pf-global}--spacer--sm);
   --#{$options-menu}__menu--Top: calc(100% + var(--#{$pf-global}--spacer--xs));
-  --#{$options-menu}__menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$options-menu}__menu--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$options-menu}--m-top__menu--Top: 0;
   --#{$options-menu}--m-top__menu--TranslateY: calc(-100% - var(--#{$pf-global}--spacer--xs)); // The "dropup" menu must be transformed up and this calculates how much to create space between the toggle and menu