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

package/base/themes/dark/_chart-globals.scss

@@ -7,36 +7,36 @@ $chart: #{$pf-prefix} + 'chart';
 // Chart colors
 
 // blue
-$pf-v5-chart-color-blue-100: #add6ff;
-$pf-v5-chart-color-blue-200: #85c2ff;
-$pf-v5-chart-color-blue-300: #47a3ff;
-$pf-v5-chart-color-blue-400: #0a85ff;
-$pf-v5-chart-color-blue-500: $pf-v5-color-blue-400;
+$pf-v6-chart-color-blue-100: #add6ff;
+$pf-v6-chart-color-blue-200: #85c2ff;
+$pf-v6-chart-color-blue-300: #47a3ff;
+$pf-v6-chart-color-blue-400: #0a85ff;
+$pf-v6-chart-color-blue-500: $pf-v6-color-blue-400;
 
 // green
-$pf-v5-chart-color-green-100: #d6eed3;
-$pf-v5-chart-color-green-200: #aedca7;
-$pf-v5-chart-color-green-300: #85cb7c;
-$pf-v5-chart-color-green-400: #5cb950;
-$pf-v5-chart-color-green-500: $pf-v5-color-green-500;
+$pf-v6-chart-color-green-100: #d6eed3;
+$pf-v6-chart-color-green-200: #aedca7;
+$pf-v6-chart-color-green-300: #85cb7c;
+$pf-v6-chart-color-green-400: #5cb950;
+$pf-v6-chart-color-green-500: $pf-v6-color-green-500;
 
 // cyan
-$pf-v5-chart-color-cyan-100: #b9feff;
-$pf-v5-chart-color-cyan-200: #86fdff;
-$pf-v5-chart-color-cyan-300: #00b5b8;
-$pf-v5-chart-color-cyan-400: #008c8f;
-$pf-v5-chart-color-cyan-500: $pf-v5-color-cyan-400;
+$pf-v6-chart-color-cyan-100: #b9feff;
+$pf-v6-chart-color-cyan-200: #86fdff;
+$pf-v6-chart-color-cyan-300: #00b5b8;
+$pf-v6-chart-color-cyan-400: #008c8f;
+$pf-v6-chart-color-cyan-500: $pf-v6-color-cyan-400;
 
 // purple
-$pf-v5-chart-color-purple-100: #cec8e4;
-$pf-v5-chart-color-purple-200: #a99fd1;
-$pf-v5-chart-color-purple-300: #9183c3;
-$pf-v5-chart-color-purple-400: #7968b6;
-$pf-v5-chart-color-purple-500: $pf-v5-color-purple-500;
+$pf-v6-chart-color-purple-100: #cec8e4;
+$pf-v6-chart-color-purple-200: #a99fd1;
+$pf-v6-chart-color-purple-300: #9183c3;
+$pf-v6-chart-color-purple-400: #7968b6;
+$pf-v6-chart-color-purple-500: $pf-v6-color-purple-500;
 
 // red
-$pf-v5-chart-color-red-100: #ffadad;
-$pf-v5-chart-color-red-200: #ff7070;
-$pf-v5-chart-color-red-300: #ff4747;
-$pf-v5-chart-color-red-400: #ff0a0a;
-$pf-v5-chart-color-red-500: $pf-v5-color-red-200;
+$pf-v6-chart-color-red-100: #ffadad;
+$pf-v6-chart-color-red-200: #ff7070;
+$pf-v6-chart-color-red-300: #ff4747;
+$pf-v6-chart-color-red-400: #ff0a0a;
+$pf-v6-chart-color-red-500: $pf-v6-color-red-200;

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-font.scss

@@ -145,4 +145,12 @@
     var(--pf-t--global--box-shadow--blur--lg) 
     var(--pf-t--global--box-shadow--spread--lg)
     var(--pf-t--global--box-shadow--color--lg);
+
+  // Transitions
+  --pf-t--global--transition: all 250ms cubic-bezier(.42, 0, .58, 1);
+  --pf-t--global--transition--timing-function: cubic-bezier(.645, .045, .355, 1);
+  --pf-t--global--transition--duration: 250ms;
+
+  // List bullet/marker
+  --pf-t--global--list-style: disc outside;
 }

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-v6-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-global}--ZIndex--2xl); // TODO zindex token
+  --#{$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-v6-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-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/Alert/alert.css

@@ -18,7 +18,7 @@
   --pf-v6-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
   --pf-v6-c-alert__toggle--MarginRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-alert__toggle-icon--Rotate: 0;
-  --pf-v6-c-alert__toggle-icon--Transition: var(--pf-v6-global--Transition);
+  --pf-v6-c-alert__toggle-icon--Transition: var(--pf-t--global--transition);
   --pf-v6-c-alert__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-alert__icon--MarginTop: 0.25rem;
   --pf-v6-c-alert__icon--MarginRight: var(--pf-t--global--spacer--sm);

package/components/Alert/alert.scss

@@ -25,7 +25,7 @@
 
   // Toggle icon
   --#{$alert}__toggle-icon--Rotate: 0;
-  --#{$alert}__toggle-icon--Transition: var(--#{$pf-global}--Transition);
+  --#{$alert}__toggle-icon--Transition: var(--pf-t--global--transition);
 
   // Icon
   --#{$alert}__icon--Color: var(--pf-t--global--icon--color--regular);

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

@@ -199,7 +199,7 @@
   --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button__icon--m-start--MarginRight: var(--pf-t--global--spacer--xs);
   --pf-v6-c-button__icon--m-end--MarginLeft: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-button__progress--width: calc(var(--pf-v6-global--icon--FontSize--md) + var(--pf-v6-global--spacer--sm));
+  --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button__progress--Opacity: 0;
   --pf-v6-c-button__progress--TranslateY: -50%;
   --pf-v6-c-button__progress--TranslateX: 0;
@@ -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-v6-global--TransitionDuration);
+  --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transitionDuration);
   --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);
@@ -215,7 +215,7 @@
   --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
   --pf-v6-c-button--m-in-progress--m-plain__progress--Left: 50%;
   --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
-  --pf-v6-c-button__count--MarginLeft: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-button__count--MarginLeft: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);

package/components/Button/button.scss

@@ -243,7 +243,7 @@
   --#{$button}__icon--m-end--MarginLeft: var(--pf-t--global--spacer--xs);
 
   // Progress
-  --#{$button}__progress--width: calc(var(--#{$pf-global}--icon--FontSize--md) + var(--#{$pf-global}--spacer--sm)); // matches medium spinner diameter plus a spacer
+  --#{$button}__progress--width: calc(var(--#{$spinner}--m-md--diameter) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
   --#{$button}__progress--Opacity: 0;
   --#{$button}__progress--TranslateY: -50%;
   --#{$button}__progress--TranslateX: 0;
@@ -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-global}--TransitionDuration);
+  --#{$button}--m-progress--TransitionDuration: var(--pf-t--global--transitionDuration);
   --#{$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);
@@ -261,7 +261,7 @@
   --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
 
   // Count
-  --#{$button}__count--MarginLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$button}__count--MarginLeft: var(--pf-t--global--spacer--sm);
   --#{$button}--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
   --#{$button}--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);

package/components/Card/card.css

@@ -28,7 +28,7 @@
   --pf-v6-c-card__header-toggle--MarginRight: var(--pf-t--global--spacer--xs);
   --pf-v6-c-card__header-toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
-  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-v6-global--Transition);
+  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
   --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
   --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
   --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);

package/components/Card/card.scss

@@ -32,7 +32,7 @@
   --#{$card}__header-toggle--MarginRight: var(--pf-t--global--spacer--xs);
   --#{$card}__header-toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
   --#{$card}__header-toggle--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
-  --#{$card}__header-toggle-icon--Transition: var(--#{$pf-global}--Transition);
+  --#{$card}__header-toggle-icon--Transition: var(--pf-t--global--transition);
   --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;
 
 

package/components/Content/content.css

@@ -59,7 +59,7 @@
   --pf-v6-c-content--ul--MarginLeft: var(--pf-t--global--spacer--lg);
   --pf-v6-c-content--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
   --pf-v6-c-content--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-content--ul--ListStyle: var(--pf-v6-global--ListStyle);
+  --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
   --pf-v6-c-content--li--MarginTop: var(--pf-t--global--spacer--sm);
   --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);

package/components/Content/content.scss

@@ -86,7 +86,7 @@
   --#{$content}--ul--MarginLeft: var(--pf-t--global--spacer--lg);
   --#{$content}--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
   --#{$content}--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
-  --#{$content}--ul--ListStyle: var(--#{$pf-global}--ListStyle); // TODO
+  --#{$content}--ul--ListStyle: var(--pf-t--global--list-style);
   --#{$content}--li--MarginTop: var(--pf-t--global--spacer--sm);
   --#{$content}--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
   --#{$content}--dl--RowGap: 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-v6-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-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);
@@ -120,7 +120,7 @@
 
 .pf-v6-c-drawer {
   --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--left);
-  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v6-global--BoxShadow--lg-right);
+  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--right);
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -131,7 +131,7 @@
 }
 
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
-  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v6-global--BoxShadow--lg-left);
+  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--left);
 }
 
 .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {

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);
@@ -160,8 +160,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   ); 
   @include pf-v6-bidirectional-style(
     $prop: --#{$drawer}--m-expanded--m-panel-left__panel--BoxShadow,
-    $ltr-val: var(--#{$pf-global}--BoxShadow--lg-right),
-    $rtl-val: var(--#{$pf-global}--BoxShadow--lg-left)
+    $ltr-val: var(--pf-t--global--box-shadow--lg--right),
+    $rtl-val: var(--pf-t--global--box-shadow--lg--left)
   );
 
   display: flex;

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-v6-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-v6-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-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-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/DualListSelector/dual-list-selector.css

@@ -52,7 +52,7 @@
   --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
   --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
-  --pf-v6-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-v6-global--Transition);
+  --pf-v6-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-t--global--transition);
   --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
   --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 }

package/components/DualListSelector/dual-list-selector.scss

@@ -1,5 +1,5 @@
 // @debug $dual-list-selector; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-dual-list-selector__item--MaxNesting: 10;
+$pf-v6-c-dual-list-selector__item--MaxNesting: 10;
 
 :where(:root), :where(.#{$dual-list-selector}) {
   // Grid
@@ -82,7 +82,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
   // Icon
   --#{$dual-list-selector}__item-toggle-icon--Rotate: 0;
   --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
-  --#{$dual-list-selector}__item-toggle-icon--Transition: var(--#{$pf-global}--Transition); // need token
+  --#{$dual-list-selector}__item-toggle-icon--Transition: var(--pf-t--global--transition);
   --#{$dual-list-selector}__item-toggle-icon--MinWidth: var(--#{$dual-list-selector}__list-item-row--FontSize);
   --#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 }
@@ -345,7 +345,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
   $root: &;
   $nested-item: &;
 
-  @for $i from 1 through $pf-v5-c-dual-list-selector__item--MaxNesting {
+  @for $i from 1 through $pf-v6-c-dual-list-selector__item--MaxNesting {
     #{$nested-item} {
       --#{$dual-list-selector}__item--PaddingLeft: calc(var(--#{$dual-list-selector}__item--nested-indent--base) * #{$i} + var(--#{$dual-list-selector}__item--indent--base));
       --#{$dual-list-selector}__list__list__item-toggle--Left: var(--#{$dual-list-selector}__item--PaddingLeft);

package/components/Form/form.css

@@ -57,7 +57,7 @@
   --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
   --pf-v6-c-form__field-group-toggle-button--MarginTop: calc(var(--pf-v6-c-button--m-plain--PaddingTop) * -1);
   --pf-v6-c-form__field-group-toggle-button--MarginBottom: calc(var(--pf-v6-c-button--m-plain--PaddingBottom) * -1);
-  --pf-v6-c-form__field-group-toggle-icon--Transition: var(--pf-v6-global--Transition);
+  --pf-v6-c-form__field-group-toggle-icon--Transition: var(--pf-t--global--transition);
   --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
   --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;

package/components/Form/form.scss

@@ -133,7 +133,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
   --#{$form}__field-group-toggle-button--MarginTop: calc(var(--#{$button}--m-plain--PaddingTop) * -1);
   --#{$form}__field-group-toggle-button--MarginBottom: calc(var(--#{$button}--m-plain--PaddingBottom) * -1);
-  --#{$form}__field-group-toggle-icon--Transition: var(--#{$pf-global}--Transition);
+  --#{$form}__field-group-toggle-icon--Transition: var(--pf-t--global--transition);
   --#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
   --#{$form}__field-group-toggle-icon--Rotate: 0;
   --#{$form}__field-group--m-expanded__toggle-icon--Rotate: 90deg;

package/components/JumpLinks/jump-links.css

@@ -49,7 +49,7 @@
   --pf-v6-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
   --pf-v6-c-jump-links__toggle--Display: none;
   --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
-  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-v6-global--Transition);
+  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
   --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
   --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;

package/components/JumpLinks/jump-links.scss

@@ -65,7 +65,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 
   // toggle icon
   --#{$jump-links}__toggle-icon--Color: currentcolor;
-  --#{$jump-links}__toggle-icon--Transition: var(--#{$pf-global}--Transition); // TODO
+  --#{$jump-links}__toggle-icon--Transition: var(--pf-t--global--transition);
   --#{$jump-links}__toggle-icon--Rotate: 0;
   --#{$jump-links}--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$jump-links}--m-expanded__toggle-icon--Rotate: 90deg;

package/components/List/list.css

@@ -2,7 +2,7 @@
   --pf-v6-c-list--PaddingLeft: var(--pf-t--global--spacer--lg);
   --pf-v6-c-list--nested--MarginTop: var(--pf-t--global--spacer--sm);
   --pf-v6-c-list--nested--MarginLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-list--ul--ListStyle: var(--pf-v6-global--ListStyle);
+  --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style);
   --pf-v6-c-list--li--MarginTop: var(--pf-t--global--spacer--sm);
   --pf-v6-c-list--m-inline--li--MarginRight: var(--pf-t--global--spacer--lg);
   --pf-v6-c-list--m-bordered--li--PaddingBottom: var(--pf-t--global--spacer--sm);

package/components/List/list.scss

@@ -5,7 +5,7 @@
   --#{$list}--PaddingLeft: var(--pf-t--global--spacer--lg);
   --#{$list}--nested--MarginTop: var(--pf-t--global--spacer--sm);
   --#{$list}--nested--MarginLeft: var(--pf-t--global--spacer--sm);
-  --#{$list}--ul--ListStyle: var(--#{$pf-global}--ListStyle); // TODO add token?
+  --#{$list}--ul--ListStyle: var(--pf-t--global--list-style);
   --#{$list}--li--MarginTop: var(--pf-t--global--spacer--sm);
 
   // inline