@patternfly/patternfly 6.0.0-alpha.114 → 6.0.0-alpha.116

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-v6-global--TransitionDuration);
-  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-v6-global--TransitionDuration);
+  --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--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-v6-global--TransitionDuration);
+  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transitionDuration);
   --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-v6-global--TransitionDuration);
+  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transitionDuration);
   --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-global}--TransitionDuration); // TODO: Update transition with token update
-  --#{$menu}--m-drilldown__content--TransitionDuration--transform: var(--#{$pf-global}--TransitionDuration); // TODO: Update transition with token update
+  --#{$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--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-global}--TransitionDuration);
+  --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transitionDuration);
   --#{$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-global}--TransitionDuration); // TODO: Update transition with token update
+  --#{$menu}--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transitionDuration);
   --#{$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-v6-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-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/Nav/nav.css

@@ -16,7 +16,7 @@
   --pf-v6-c-nav--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-nav--FontWeight: var(--pf-t--global--font--weight--body);
   --pf-v6-c-nav--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v6-c-nav--OutlineOffset: calc(var(--pf-v6-global--spacer--xs) * -1);
+  --pf-v6-c-nav--OutlineOffset: calc(var(--pf-t--global--spacer--xs) * -1);
   --pf-v6-c-nav--BackgroundColor: transparent;
   --pf-v6-c-nav__list--ScrollSnapTypeAxis: x;
   --pf-v6-c-nav__list--ScrollSnapTypeStrictness: proximity;

package/components/Nav/nav.scss

@@ -19,7 +19,7 @@
   --#{$nav}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$nav}--FontWeight: var(--pf-t--global--font--weight--body);
   --#{$nav}--LineHeight: var(--pf-t--global--font--line-height--body);
-  --#{$nav}--OutlineOffset: calc(var(--#{$pf-global}--spacer--xs) * -1);
+  --#{$nav}--OutlineOffset: calc(var(--pf-t--global--spacer--xs) * -1);
   --#{$nav}--BackgroundColor: transparent;
 
   // * Nav list

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-v6-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-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
 

package/components/Page/page.css

@@ -67,7 +67,7 @@
   --pf-v6-c-page--inset: var(--pf-t--global--spacer--md);
   --pf-v6-c-page--xl--inset: var(--pf-t--global--spacer--xl);
   --pf-v6-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-page__header--ZIndex: var(--pf-v6-global--ZIndex--md);
+  --pf-v6-c-page__header--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page__header--MinHeight: 4.75rem;
   --pf-v6-c-page__header-brand--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__header-brand--xl--PaddingRight: var(--pf-t--global--spacer--xl);
@@ -92,11 +92,11 @@
   --pf-v6-c-page__header-tools-item--Display: block;
   --pf-v6-c-page__header-tools--c-button--m-selected--before--Width: auto;
   --pf-v6-c-page__header-tools--c-button--m-selected--before--Height: auto;
-  --pf-v6-c-page__sidebar--ZIndex: var(--pf-v6-global--ZIndex--sm);
+  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-page__sidebar--Width: 18.125rem;
   --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page__sidebar--BoxShadow: none;
-  --pf-v6-c-page__sidebar--Transition: var(--pf-v6-global--Transition);
+  --pf-v6-c-page__sidebar--Transition: var(--pf-t--global--transition);
   --pf-v6-c-page__sidebar--TranslateX: -100%;
   --pf-v6-c-page__sidebar--TranslateZ: 0;
   --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
@@ -121,7 +121,7 @@
   --pf-v6-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
   --pf-v6-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-page__main-container--ZIndex: var(--pf-v6-global--ZIndex--xs);
+  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
   --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
@@ -140,14 +140,14 @@
   --pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
-  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-v6-global--ZIndex--md);
+  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
-  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-v6-global--ZIndex--md);
+  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
-  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-v6-global--ZIndex--xs);
+  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
-  --pf-v6-c-page--section--m-shadow-top--ZIndex: var(--pf-v6-global--ZIndex--xs);
+  --pf-v6-c-page--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-page__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page__main-nav--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-nav--PaddingRight: 0;

package/components/Page/page.scss

@@ -1,7 +1,7 @@
 // @debug $page; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 // stylelint-disable
-$pf-page-v5--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
-$pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-page-v6--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 // stylelint-enable
 
 :root {
@@ -11,7 +11,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   // Header
   --#{$page}__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$page}__header--ZIndex: var(--#{$pf-global}--ZIndex--md);
+  --#{$page}__header--ZIndex: var(--pf-t--global--z-index--md);
   --#{$page}__header--MinHeight: #{pf-size-prem(76px)}; // fixed height for header to ensure consistency across screen sizes.
 
   // Header brand
@@ -65,11 +65,11 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   // Sidebar
-  --#{$page}__sidebar--ZIndex: var(--#{$pf-global}--ZIndex--sm);
+  --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
   --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__sidebar--BoxShadow: none;
-  --#{$page}__sidebar--Transition: var(--#{$pf-global}--Transition);
+  --#{$page}__sidebar--Transition: var(--pf-t--global--transition);
   --#{$page}__sidebar--TranslateX: -100%;
   --#{$page}__sidebar--TranslateZ: 0;
   --#{$page}__sidebar--m-expanded--TranslateX: 0;
@@ -105,7 +105,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   // Container for the main content area (grid area)
-  --#{$page}__main-container--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$page}__main-container--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$page}__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
   --#{$page}__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$page}__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
@@ -130,16 +130,16 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
 
   // Sticky
-  --#{$page}--section--m-sticky-top--ZIndex: var(--#{$pf-global}--ZIndex--md);
+  --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
   --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
-  --#{$page}--section--m-sticky-bottom--ZIndex: var(--#{$pf-global}--ZIndex--md);
+  --#{$page}--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
   --#{$page}--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
 
   // Shadows
   --#{$page}--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
-  --#{$page}--section--m-shadow-bottom--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$page}--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$page}--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
-  --#{$page}--section--m-shadow-top--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$page}--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
 
   // Main section horizontal nav
   --#{$page}__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -469,7 +469,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   // Responsive height modifiers for sticky top/bottom
-  @each $breakpoint, $breakpoint-value in $pf-page-v5--height-breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
 
     @include pf-v6-apply-height-breakpoint($breakpoint) {
@@ -532,7 +532,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   background-color: var(--#{$page}__main-nav--BackgroundColor);
 
   // Responsive height modifiers for sticky top/bottom
-  @each $breakpoint, $breakpoint-value in $pf-page-v5--height-breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
 
     @include pf-v6-apply-height-breakpoint($breakpoint) {
@@ -564,7 +564,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   // Responsive height modifiers for sticky top/bottom
-  @each $breakpoint, $breakpoint-value in $pf-page-v5--height-breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
 
     @include pf-v6-apply-height-breakpoint($breakpoint) {
@@ -617,7 +617,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     --#{$page}__main-section--BackgroundColor: var(--#{$page}__main-section--m-secondary--BackgroundColor);
   }
 
-  @each $breakpoint, $breakpoint-value in $pf-page-v5--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-page-v6--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
     @include pf-v6-apply-breakpoint($breakpoint) {

package/components/Panel/panel.css

@@ -11,7 +11,7 @@
   --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);

package/components/Panel/panel.scss

@@ -21,7 +21,7 @@
 
   // raised
   --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --#{$panel}--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$panel}--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
 
   // header

package/components/ProgressStepper/progress-stepper.css

@@ -61,7 +61,7 @@
   --pf-v6-c-progress-stepper--m-center__step-description--MarginLeft: 0;
   --pf-v6-c-progress-stepper--GridTemplateRows: auto 1fr;
   --pf-v6-c-progress-stepper__step-connector--JustifyContent: flex-start;
-  --pf-v6-c-progress-stepper__step-icon--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-progress-stepper__step-icon--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-progress-stepper__step-icon--Width: 1.5rem;
   --pf-v6-c-progress-stepper__step-icon--Height: var(--pf-v6-c-progress-stepper__step-icon--Width);
   --pf-v6-c-progress-stepper__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
@@ -280,7 +280,7 @@
   border: var(--pf-v6-c-progress-stepper__step-icon--BorderWidth) solid var(--pf-v6-c-progress-stepper__step-icon--BorderColor);
   border-radius: 50%;
 }
-.pf-v6-c-progress-stepper__step-icon .pf-v5-pficon {
+.pf-v6-c-progress-stepper__step-icon .pf-v6-pficon {
   margin-block-start: var(--pf-v6-c-progress-stepper__pficon--MarginTop);
 }
 .pf-v6-c-progress-stepper__step-icon .fa-exclamation-triangle {

package/components/ProgressStepper/progress-stepper.scss

@@ -139,7 +139,7 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   --#{$progress-stepper}__step-connector--JustifyContent: flex-start;
 
   // Step icon variables
-  --#{$progress-stepper}__step-icon--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$progress-stepper}__step-icon--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$progress-stepper}__step-icon--Width: #{pf-size-prem(24px)};
   --#{$progress-stepper}__step-icon--Height: var(--#{$progress-stepper}__step-icon--Width);
   --#{$progress-stepper}__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
@@ -360,7 +360,7 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
   // Align pficons with the font awesome icons
   // stylelint-disable
-  .pf-v5-pficon {
+  .pf-v6-pficon {
     margin-block-start: var(--#{$progress-stepper}__pficon--MarginTop);
   }
 

package/components/Select/select.css

@@ -92,7 +92,7 @@
   --pf-v6-c-select__menu--PaddingTop: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-select__menu--PaddingBottom: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-select__menu--Top: calc(100% + var(--pf-v6-global--spacer--xs));
-  --pf-v6-c-select__menu--ZIndex: var(--pf-v6-global--ZIndex--sm);
+  --pf-v6-c-select__menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-select__menu--Width: auto;
   --pf-v6-c-select__menu--MinWidth: 100%;
   --pf-v6-c-select__menu--m-top--TranslateY: calc(-100% - var(--pf-v6-global--spacer--xs));

package/components/Select/select.scss

@@ -109,7 +109,7 @@
   --#{$select}__menu--PaddingTop: var(--#{$pf-global}--spacer--sm);
   --#{$select}__menu--PaddingBottom: var(--#{$pf-global}--spacer--sm);
   --#{$select}__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
-  --#{$select}__menu--ZIndex: var(--#{$pf-global}--ZIndex--sm);
+  --#{$select}__menu--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$select}__menu--Width: auto;
   --#{$select}__menu--MinWidth: 100%;
   --#{$select}__menu--m-top--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/Sidebar/sidebar.css

@@ -48,7 +48,7 @@
   --pf-v6-c-sidebar--m-split--m-panel-right__panel--Order: 1;
   --pf-v6-c-sidebar--m-split__main--m-border--before--Display: block;
   --pf-v6-c-sidebar__panel--FlexBasis--base: auto;
-  --pf-v6-c-sidebar__panel--BoxShadow--base: 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
+  --pf-v6-c-sidebar__panel--BoxShadow--base: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-sidebar__panel--BoxShadow: var(--pf-v6-c-sidebar__panel--BoxShadow--base);
   --pf-v6-c-sidebar__panel--Top: 0;
   --pf-v6-c-sidebar__panel--md--Top: auto;
@@ -59,7 +59,7 @@
   --pf-v6-c-sidebar__panel--md--FlexBasis: 15.625rem;
   --pf-v6-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
   --pf-v6-c-sidebar__panel--m-stack--FlexBasis: auto;
-  --pf-v6-c-sidebar__panel--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-sidebar__panel--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-sidebar__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-sidebar__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-sidebar__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);

package/components/Sidebar/sidebar.scss

@@ -74,7 +74,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
   // Panel
   --#{$sidebar}__panel--FlexBasis--base: auto;
-  --#{$sidebar}__panel--BoxShadow--base: #{0 pf-size-prem(4px) pf-size-prem(4px) pf-size-prem(-4px) rgba($pf-v5-color-black-1000, .16)}; // TODO NEEDS TOKEN. previous comment:modified so the shadow is only visible on the bottom of the element 
+  --#{$sidebar}__panel--BoxShadow--base: var(--pf-t--global--box-shadow--md--bottom);
   --#{$sidebar}__panel--BoxShadow: var(--#{$sidebar}__panel--BoxShadow--base);
   --#{$sidebar}__panel--Top: 0;
   --#{$sidebar}__panel--md--Top: auto;
@@ -85,7 +85,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}__panel--md--FlexBasis: #{pf-size-prem(250px)};
   --#{$sidebar}__panel--m-split--FlexBasis: #{pf-size-prem(250px)};
   --#{$sidebar}__panel--m-stack--FlexBasis: auto;
-  --#{$sidebar}__panel--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$sidebar}__panel--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$sidebar}__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$sidebar}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 

package/components/SkipToContent/skip-to-content.css

@@ -1,6 +1,6 @@
 :root {
   --pf-v6-c-skip-to-content--Top: var(--pf-t--global--spacer--md);
-  --pf-v6-c-skip-to-content--ZIndex: var(--pf-v6-global--ZIndex--2xl);
+  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
   --pf-v6-c-skip-to-content--focus--Left: var(--pf-t--global--spacer--md);
 }
 

package/components/SkipToContent/skip-to-content.scss

@@ -2,7 +2,7 @@
 
 :root {
   --#{$skip-to-content}--Top: var(--pf-t--global--spacer--md);
-  --#{$skip-to-content}--ZIndex: var(--#{$pf-global}--ZIndex--2xl);
+  --#{$skip-to-content}--ZIndex: var(--pf-t--global--z-index--2xl);
   --#{$skip-to-content}--focus--Left: var(--pf-t--global--spacer--md);
 }
 

package/components/Slider/slider.css

@@ -52,7 +52,7 @@
   --pf-v6-c-slider__value--m-floating--TranslateX: -50%;
   --pf-v6-c-slider__value--m-floating--TranslateY: -100%;
   --pf-v6-c-slider__value--m-floating--Left: var(--pf-v6-c-slider--value);
-  --pf-v6-c-slider__value--m-floating--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-slider__value--m-floating--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-slider__actions--MarginRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-slider__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
   --pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);

package/components/Slider/slider.scss

@@ -66,7 +66,7 @@
   --#{$slider}__value--m-floating--TranslateX: -50%;
   --#{$slider}__value--m-floating--TranslateY: -100%;
   --#{$slider}__value--m-floating--Left: var(--#{$slider}--value);
-  --#{$slider}__value--m-floating--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$slider}__value--m-floating--ZIndex: var(--pf-t--global--z-index--sm);
   
   // actions
   --#{$slider}__actions--MarginRight: var(--pf-t--global--spacer--sm);

package/components/Table/table-scrollable.css

@@ -2,7 +2,7 @@
 :where(.pf-v6-c-table) {
   --pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem;
   --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
-  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-table__sticky-cell--Right: auto;
   --pf-v6-c-table__sticky-cell--Left: auto;
   --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);

package/components/Table/table-scrollable.scss

@@ -3,7 +3,7 @@
 :where(.#{$table}) {
   --#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(140px)};
   --#{$table}__sticky-cell--MinWidth: var(--#{$table}__sticky-cell--MinWidth--base);
-  --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$table}__sticky-cell--Right: auto;
   --#{$table}__sticky-cell--Left: auto;
   --#{$table}__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);

package/components/Table/table.css

@@ -121,7 +121,7 @@
   --pf-v6-c-table__action--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table__expandable-row--Transition: var(--pf-v6-global--Transition);
+  --pf-v6-c-table__expandable-row--Transition: var(--pf-t--global--transition);
   --pf-v6-c-table__expandable-row-content--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingBottom: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingLeft: var(--pf-t--global--spacer--md);
@@ -177,9 +177,9 @@
   --pf-v6-c-table__nested-column-header__button--PaddingLeft: calc(var(--pf-v6-c-table__button--PaddingLeft) - var(--pf-t--global--spacer--sm));
   --pf-v6-c-table__nested-column-header__button--PaddingRight: calc(var(--pf-v6-c-table__button--PaddingRight) - var(--pf-t--global--spacer--xs));
   --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--Zindex--xs);
-  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--Zindex--xs) + 1);
-  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--Zindex--xs) + 2);
+  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
+  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
 }
 
 .pf-v6-c-table {

package/components/Table/table.scss

@@ -115,7 +115,7 @@
   --#{$table}__action--PaddingRight: var(--pf-t--global--spacer--sm);
 
   // * Table expandable row
-  --#{$table}__expandable-row--Transition: var(--#{$pf-global}--Transition); // TODO: update to token when available
+  --#{$table}__expandable-row--Transition: var(--pf-t--global--transition);
 
   // * Table expandable row content
   --#{$table}__expandable-row-content--PaddingTop: var(--pf-t--global--spacer--md);
@@ -219,9 +219,9 @@
   --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // * Table sticky header
-  --#{$table}--m-sticky-header--cell--ZIndex: var(--pf-t--global--Zindex--xs);
-  --#{$table}--m-sticky-header--ZIndex: calc(var(--pf-t--global--Zindex--xs) + 1);
-  --#{$table}--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--Zindex--xs) + 2);
+  --#{$table}--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
+  --#{$table}--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
+  --#{$table}--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
 }
 
 // TODO: update grouping comments to // Table {element}

package/components/Tabs/tabs.css

@@ -34,7 +34,7 @@
   --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
-  --pf-v6-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-tabs__link--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v6-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);

package/components/Tabs/tabs.scss

@@ -48,7 +48,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   --#{$tabs}--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$tabs}--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$tabs}--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
-  --#{$tabs}__item--m-action--before--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$tabs}__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
 
   // Tabs link
   --#{$tabs}__link--Color: var(--pf-t--global--text--color--subtle);