@patternfly/react-styles 6.0.0-alpha.17 → 6.0.0-alpha.19

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 6.0.0-alpha.19 (2024-04-02)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# 6.0.0-alpha.18 (2024-03-27)
+
+### Features
+
+- **Page,Drawer:** core bump and updates ([#10211](https://github.com/patternfly/patternfly-react/issues/10211)) ([8210248](https://github.com/patternfly/patternfly-react/commit/82102488317d9b263f8075179f8fecfc365cc647))
+
 # [6.0.0-alpha.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.16...@patternfly/react-styles@6.0.0-alpha.17) (2024-03-22)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/assets/images/pf_logo.svg

@@ -3,31 +3,31 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 706.3 132.5" enable-background="new 0 0 706.3 132.5" xml:space="preserve">
 <g>
-	<path fill="var(--pf-global--Color--100, #030303)" d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
+	<path fill="var(--pf-t--global--icon--color--regular, #030303)" d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
 		c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
 		c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
 		c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
 		c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"/>
-	<path fill="var(--pf-global--Color--100, #030303)" d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
+	<path fill="var(--pf-t--global--icon--color--regular, #030303)" d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
 		c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
 		/>
-	<path fill="var(--pf-global--Color--100, #030303)" d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z"/>
-	<path fill="var(--pf-global--Color--100, #030303)" d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z"/>
-	<path fill="var(--pf-global--Color--100, #030303)" d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"/>
-	<path fill="var(--pf-global--Color--100, #030303)" d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
+	<path fill="var(--pf-t--global--icon--color--regular, #030303)" d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z"/>
+	<path fill="var(--pf-t--global--icon--color--regular, #030303)" d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z"/>
+	<path fill="var(--pf-t--global--icon--color--regular, #030303)" d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"/>
+	<path fill="var(--pf-t--global--icon--color--regular, #030303)" d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
 		c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
 		l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
 		c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
 		H478.9z"/>
-	<path fill="var(--pf-global--Color--100, #030303)" d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
+	<path fill="var(--pf-t--global--icon--color--regular, #030303)" d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
 		c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
 		c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"/>
-	<path fill="var(--pf-global--Color--100, #030303)" d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"/>
-	<path fill="var(--pf-global--Color--100, #030303)" d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z"/>
-	<path fill="var(--pf-global--Color--100, #030303)" d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"/>
+	<path fill="var(--pf-t--global--icon--color--regular, #030303)" d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"/>
+	<path fill="var(--pf-t--global--icon--color--regular, #030303)" d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z"/>
+	<path fill="var(--pf-t--global--icon--color--regular, #030303)" d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"/>
 </g>
 <g>
-	<path fill="var(--pf-global--Color--100, #030303)" d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
+	<path fill="var(--pf-t--global--icon--color--regular, #030303)" d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
 		l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
 		l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
 		L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2

package/css/assets/images/pf_logo_white.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
 	xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	viewBox="0 0 706.3 132.5" enable-background="new 0 0 706.3 132.5" xml:space="preserve">
-<g fill="var(--pf-v5-global--Color--light-100, #FFFFFF)">
+<g fill="var(--pf-t--color--white, #FFFFFF)">
 	<path d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
 		c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
 		c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
@@ -27,7 +27,7 @@
 	<path  d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z"/>
 	<path  d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"/>
 </g>
-<g fill="var(--pf-v5-global--Color--light-100, #FFFFFF)">
+<g fill="var(--pf-t--color--white, #FFFFFF)">
 	<path  d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
 		l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
 		l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101

package/css/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/css/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/css/components/Alert/alert.css

@@ -14,11 +14,11 @@
   --pf-v6-c-alert--PaddingBottom: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-alert__toggle--MarginTop: calc(-1 * var(--pf-v6-global--spacer--form-element) - 0.0625rem);
-  --pf-v6-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-v6-global--spacer--form-element));
+  --pf-v6-c-alert__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default) - 0.0625rem);
+  --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);
@@ -29,8 +29,8 @@
   --pf-v6-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-alert__title--max-lines: 1;
-  --pf-v6-c-alert__action--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
-  --pf-v6-c-alert__action--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
+  --pf-v6-c-alert__action--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-alert__action--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-alert__action--TranslateY: 0.125rem;
   --pf-v6-c-alert__action--MarginRight: calc(var(--pf-t--global--spacer--sm) * -1);
   --pf-v6-c-alert__description--PaddingTop: var(--pf-t--global--spacer--xs);

package/css/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/css/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/css/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/css/components/Breadcrumb/breadcrumb.css

@@ -15,9 +15,9 @@
   --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
   --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
-  --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
+  --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v6-c-breadcrumb__item--MarginRight) * -1);
-  --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
+  --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginRight) * -1);
   --pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
 }

package/css/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--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);
@@ -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/css/components/Card/card.css

@@ -22,13 +22,13 @@
   --pf-v6-c-card__footer--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-card__actions--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-card__actions--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
-  --pf-v6-c-card__actions--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
-  --pf-v6-c-card__header-toggle--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
+  --pf-v6-c-card__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__actions--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__header-toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginRight: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-card__header-toggle--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
+  --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);
@@ -68,7 +68,7 @@
   --pf-v6-c-card--m-full-height--Height: 100%;
   --pf-v6-c-card--m-plain--BorderColor: transparent;
   --pf-v6-c-card--m-plain--BackgroundColor: transparent;
-  --pf-v6-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-v6-global--spacer--form-element) * -1);
+  --pf-v6-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-t--global--spacer--button--horizontal--compact) * -1);
   --pf-v6-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-t--global--spacer--xs);
 }
 

package/css/components/Check/check.css

@@ -2,7 +2,7 @@
 .pf-v6-c-check {
   --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
-  --pf-v6-c-check--Height: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
+  --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
   --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body);
@@ -25,7 +25,7 @@
 .pf-v6-c-check.pf-m-standalone {
   display: inline-grid;
   grid-template-columns: auto;
-  height: var(--pf-v6-c-check--Height);
+  min-height: var(--pf-v6-c-check--MinHeight);
 }
 .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
   align-self: center;

package/css/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/css/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/css/components/DataList/data-list.css

@@ -1,49 +1,49 @@
 .pf-v6-c-data-list__item-action {
-  --pf-v5-hidden-visible--hidden--Display: none;
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
-  display: var(--pf-v5-hidden-visible--Display);
+  --pf-v6-hidden-visible--hidden--Display: none;
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  display: var(--pf-v6-hidden-visible--Display);
 }
 .pf-m-hidden.pf-v6-c-data-list__item-action {
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
 }
 @media screen and (min-width: 576px) {
   .pf-m-hidden-on-sm.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-sm.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 768px) {
   .pf-m-hidden-on-md.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-md.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 992px) {
   .pf-m-hidden-on-lg.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-lg.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 1200px) {
   .pf-m-hidden-on-xl.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-xl.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 1450px) {
   .pf-m-hidden-on-2xl.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-2xl.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 
@@ -489,8 +489,8 @@
   --pf-v6-c-data-list--cell--WordBreak: normal;
   --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
   --pf-v6-c-data-list__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1);
-  --pf-v6-c-data-list__toggle--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
-  --pf-v6-c-data-list__toggle--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
+  --pf-v6-c-data-list__toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
+  --pf-v6-c-data-list__toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
   --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
   --pf-v6-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v6-c-data-list__toggle-icon--Rotate: 0;
@@ -730,7 +730,7 @@
 }
 
 .pf-v6-c-data-list__item-action {
-  --pf-v5-hidden-visible--visible--Display: var(--pf-v6-c-data-list__item-action--Display);
+  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-data-list__item-action--Display);
   align-content: flex-start;
   align-items: flex-start;
   padding-block-start: var(--pf-v6-c-data-list__item-action--PaddingTop);

package/css/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;