@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.10

package/components/Tile/tile.css

@@ -1,16 +1,16 @@
-:where(:root),
-:where(.pf-v6-c-tile) {
-  --pf-v6-c-tile--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tile--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tile--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tile--PaddingLeft: var(--pf-t--global--spacer--lg);
+:root,
+.pf-v6-c-tile {
+  --pf-v6-c-tile--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tile--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tile--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tile--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tile--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-tile--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-tile--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-tile--before--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-tile--before--BorderRadius: var(--pf-v6-c-tile--BorderRadius);
   --pf-v6-c-tile--after--BackgroundColor: transparent;
-  --pf-v6-c-tile__icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-tile__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tile__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
   --pf-v6-c-tile__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-tile__title--Color: var(--pf-t--global--text--color--regular);
@@ -24,7 +24,7 @@
   --pf-v6-c-tile--m-disabled__title--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-tile--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
   --pf-v6-c-tile--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
-  --pf-v6-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tile__header--m-stacked__icon--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-tile__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--xl);
   --pf-v6-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--2xl);
 }
@@ -33,10 +33,10 @@
   position: relative;
   display: inline-grid;
   grid-template-rows: min-content;
-  padding-block-start: var(--pf-v6-c-tile--PaddingTop);
-  padding-block-end: var(--pf-v6-c-tile--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-tile--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-tile--PaddingRight);
+  padding-block-start: var(--pf-v6-c-tile--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-tile--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-tile--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-tile--PaddingInlineEnd);
   cursor: pointer;
   background-color: var(--pf-v6-c-tile--BackgroundColor);
   border-radius: var(--pf-v6-c-tile--BorderRadius);
@@ -75,7 +75,7 @@
   align-items: center;
 }
 .pf-v6-c-tile__header.pf-m-stacked {
-  --pf-v6-c-tile__icon--MarginRight: 0;
+  --pf-v6-c-tile__icon--MarginInlineEnd: 0;
   --pf-v6-c-tile__icon--FontSize: var(--pf-v6-c-tile__header--m-stacked__icon--FontSize);
   flex-direction: column;
   align-items: flex-start;
@@ -83,7 +83,7 @@
 .pf-v6-c-tile__header.pf-m-stacked .pf-v6-c-tile__icon {
   display: flex;
   align-items: center;
-  margin-block-end: var(--pf-v6-c-tile__header--m-stacked__icon--MarginBottom);
+  margin-block-end: var(--pf-v6-c-tile__header--m-stacked__icon--MarginBlockEnd);
 }
 
 .pf-v6-c-tile__title {
@@ -97,7 +97,7 @@
 }
 
 .pf-v6-c-tile__icon {
-  margin-inline-end: var(--pf-v6-c-tile__icon--MarginRight);
+  margin-inline-end: var(--pf-v6-c-tile__icon--MarginInlineEnd);
   font-size: var(--pf-v6-c-tile__icon--FontSize);
   color: var(--pf-v6-c-tile__icon--Color);
 }

package/components/Tile/tile.scss

@@ -1,11 +1,10 @@
-// @debug $tile; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-
-:where(:root),
-:where(.#{$tile}) {
-  --#{$tile}--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$tile}--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$tile}--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --#{$tile}--PaddingLeft: var(--pf-t--global--spacer--lg);
+@use '../../sass-utilities' as *;
+
+@include pf-root($tile) {
+  --#{$tile}--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$tile}--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$tile}--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --#{$tile}--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$tile}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$tile}--BorderRadius: var(--pf-t--global--border--radius--medium);
 
@@ -16,7 +15,7 @@
   --#{$tile}--after--BackgroundColor: transparent;
 
   // icon
-  --#{$tile}__icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$tile}__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$tile}__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
   --#{$tile}__icon--Color: var(--pf-t--global--icon--color--regular);
 
@@ -42,7 +41,7 @@
   --#{$tile}--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
 
   // Stacked variatiion
-  --#{$tile}__header--m-stacked__icon--MarginBottom: var(--pf-t--global--spacer--md);
+  --#{$tile}__header--m-stacked__icon--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --#{$tile}__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--xl);
 
   // large variation
@@ -53,10 +52,10 @@
   position: relative;
   display: inline-grid;
   grid-template-rows: min-content;
-  padding-block-start: var(--#{$tile}--PaddingTop);
-  padding-block-end: var(--#{$tile}--PaddingBottom);
-  padding-inline-start: var(--#{$tile}--PaddingLeft);
-  padding-inline-end: var(--#{$tile}--PaddingRight);
+  padding-block-start: var(--#{$tile}--PaddingBlockStart);
+  padding-block-end: var(--#{$tile}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$tile}--PaddingInlineStart);
+  padding-inline-end: var(--#{$tile}--PaddingInlineEnd);
   cursor: pointer;
   background-color: var(--#{$tile}--BackgroundColor);
   border-radius: var(--#{$tile}--BorderRadius);
@@ -105,7 +104,7 @@
   align-items: center;
 
   &.pf-m-stacked {
-    --#{$tile}__icon--MarginRight: 0;
+    --#{$tile}__icon--MarginInlineEnd: 0;
     --#{$tile}__icon--FontSize: var(--#{$tile}__header--m-stacked__icon--FontSize);
 
     flex-direction: column;
@@ -114,7 +113,7 @@
     .#{$tile}__icon {
       display: flex;
       align-items: center;
-      margin-block-end: var(--#{$tile}__header--m-stacked__icon--MarginBottom);
+      margin-block-end: var(--#{$tile}__header--m-stacked__icon--MarginBlockEnd);
     }
   }
 }
@@ -130,7 +129,7 @@
 }
 
 .#{$tile}__icon {
-  margin-inline-end: var(--#{$tile}__icon--MarginRight);
+  margin-inline-end: var(--#{$tile}__icon--MarginInlineEnd);
   font-size: var(--#{$tile}__icon--FontSize);
   color: var(--#{$tile}__icon--Color);
 }

package/components/Timestamp/timestamp.css

@@ -1,16 +1,15 @@
-:root, .pf-v6-c-timestamp {
+:root,
+.pf-v6-c-timestamp {
   --pf-v6-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-timestamp--OutlineOffset: 0.1875rem;
-  --pf-v6-c-timestamp--m-help-text--TextDecorationLine: underline;
-  --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: dashed;
-  --pf-v6-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-timestamp--m-help-text--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--default);
+  --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--default);
   --pf-v6-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
-  --pf-v6-c-timestamp--m-help-text--TextDecorationColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-timestamp--m-help-text--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-timestamp--m-help-text--hover--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-timestamp--m-help-text--focus--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--hover);
+  --pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--hover);
 }
 
 .pf-v6-c-timestamp {
@@ -20,18 +19,13 @@
   outline-offset: var(--pf-v6-c-timestamp--OutlineOffset);
 }
 .pf-v6-c-timestamp.pf-m-help-text {
-  text-decoration-line: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine);
-  text-decoration-thickness: var(--pf-v6-c-timestamp--m-help-text--TextDecorationThickness);
-  text-decoration-style: var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
-  text-decoration-color: var(--pf-v6-c-timestamp--m-help-text--TextDecorationColor);
+  --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--Color);
+  text-decoration: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine) var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
   text-underline-offset: var(--pf-v6-c-timestamp--m-help-text--TextUnderlineOffset);
   cursor: pointer;
 }
-.pf-v6-c-timestamp.pf-m-help-text:hover {
+.pf-v6-c-timestamp.pf-m-help-text:is(:hover, :focus) {
   --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--hover--Color);
-  --pf-v6-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationColor);
-}
-.pf-v6-c-timestamp.pf-m-help-text:focus {
-  --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--focus--Color);
-  --pf-v6-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v6-c-timestamp--m-help-text--focus--TextDecorationColor);
+  --pf-v6-c-timestamp--m-help-text--TextDecorationLine: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine);
+  --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle);
 }

package/components/Timestamp/timestamp.scss

@@ -1,43 +1,37 @@
-// @debug $timestamp; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-:root, .#{$timestamp} {
+@use '../../sass-utilities' as *;
+
+@include pf-root($timestamp) {
   --#{$timestamp}--FontSize: var(--pf-t--global--font--size--body--sm);
-  --#{$timestamp}--Color: var(--pf-t--global--text--color--subtle);
+  --#{$timestamp}--Color: var(--pf-t--global--text--color--regular);
   --#{$timestamp}--OutlineOffset: #{pf-size-prem(3px)};
 
   // Help text variables for the timestamp
-  --#{$timestamp}--m-help-text--TextDecorationLine: underline;
-  --#{$timestamp}--m-help-text--TextDecorationStyle: dashed;
-  --#{$timestamp}--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
+  --#{$timestamp}--m-help-text--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--default);
+  --#{$timestamp}--m-help-text--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--default);
   --#{$timestamp}--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)};
-  --#{$timestamp}--m-help-text--TextDecorationColor: var(--pf-t--global--border--color--default);
+  --#{$timestamp}--m-help-text--Color: var(--pf-t--global--text--color--subtle);
   --#{$timestamp}--m-help-text--hover--Color: var(--pf-t--global--text--color--regular);
-  --#{$timestamp}--m-help-text--focus--Color: var(--pf-t--global--text--color--regular);
-  --#{$timestamp}--m-help-text--hover--TextDecorationColor: var(--pf-t--global--text--color--regular);
-  --#{$timestamp}--m-help-text--focus--TextDecorationColor: var(--pf-t--global--text--color--regular);
+  --#{$timestamp}--m-help-text--hover--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--hover);
+  --#{$timestamp}--m-help-text--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--hover);
 }
 
-.#{$timestamp} { 
+.#{$timestamp} {
   display: inline-block;
   font-size: var(--#{$timestamp}--FontSize);
   color: var(--#{$timestamp}--Color);
   outline-offset: var(--#{$timestamp}--OutlineOffset);
 
   &.pf-m-help-text {
-    text-decoration-line: var(--#{$timestamp}--m-help-text--TextDecorationLine);
-    text-decoration-thickness: var(--#{$timestamp}--m-help-text--TextDecorationThickness);
-    text-decoration-style: var(--#{$timestamp}--m-help-text--TextDecorationStyle);
-    text-decoration-color: var(--#{$timestamp}--m-help-text--TextDecorationColor);
+    --#{$timestamp}--Color: var(--#{$timestamp}--m-help-text--Color);
+    
+    text-decoration: var(--#{$timestamp}--m-help-text--TextDecorationLine) var(--#{$timestamp}--m-help-text--TextDecorationStyle);
     text-underline-offset: var(--#{$timestamp}--m-help-text--TextUnderlineOffset);
     cursor: pointer;
 
-    &:hover {
+    &:is(:hover, :focus) {
       --#{$timestamp}--Color: var(--#{$timestamp}--m-help-text--hover--Color);
-      --#{$timestamp}--m-help-text--TextDecorationColor: var(--#{$timestamp}--m-help-text--hover--TextDecorationColor);
-    }
-
-    &:focus {
-      --#{$timestamp}--Color: var(--#{$timestamp}--m-help-text--focus--Color);
-      --#{$timestamp}--m-help-text--TextDecorationColor: var(--#{$timestamp}--m-help-text--focus--TextDecorationColor);
+      --#{$timestamp}--m-help-text--TextDecorationLine: var(--#{$timestamp}--m-help-text--hover--TextDecorationLine);
+      --#{$timestamp}--m-help-text--TextDecorationStyle: var(--#{$timestamp}--m-help-text--hover--TextDecorationStyle);
     }
   }
 }

package/components/Title/title.css

@@ -1,41 +1,42 @@
-:root {
+:root,
+.pf-v6-c-title {
   --pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v6-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
-  --pf-v6-c-title--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-title--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-title--m-3xl--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-3xl--FontSize: var(--pf-t--global--font--size--heading--xl);
-  --pf-v6-c-title--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-title--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-title--m-2xl--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-2xl--FontSize: var(--pf-t--global--font--size--heading--lg);
-  --pf-v6-c-title--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-title--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-title--m-xl--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-xl--FontSize: var(--pf-t--global--font--size--heading--md);
-  --pf-v6-c-title--m-xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-title--m-xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-title--m-lg--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-lg--FontSize: var(--pf-t--global--font--size--heading--sm);
-  --pf-v6-c-title--m-lg--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-title--m-lg--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-title--m-md--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --pf-v6-c-title--m-md--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-title--m-md--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-title--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-h1--FontSize: var(--pf-t--global--font--size--heading--h1);
-  --pf-v6-c-title--m-h1--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-title--m-h1--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-title--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-h2--FontSize: var(--pf-t--global--font--size--heading--h2);
-  --pf-v6-c-title--m-h2--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-title--m-h2--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-title--m-h3--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-h3--FontSize: var(--pf-t--global--font--size--heading--h3);
-  --pf-v6-c-title--m-h3--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-title--m-h3--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-title--m-h4--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-h4--FontSize: var(--pf-t--global--font--size--heading--h4);
-  --pf-v6-c-title--m-h4--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-title--m-h4--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-title--m-h5--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-h5--FontSize: var(--pf-t--global--font--size--heading--h5);
-  --pf-v6-c-title--m-h5--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-title--m-h5--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-title--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
-  --pf-v6-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
 }
 
 .pf-v6-c-title {

package/components/Title/title.scss

@@ -1,69 +1,69 @@
-// @debug $title; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+@include pf-root($title) {
   --#{$title}--FontFamily: var(--pf-t--global--font--family--heading);
 
   // SIZE modifiers (note that the modifier names match PF5 sizes but use tokens that don't match in name
   // 4xl
   --#{$title}--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
-  --#{$title}--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$title}--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // 3xl
   --#{$title}--m-3xl--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-3xl--FontSize: var(--pf-t--global--font--size--heading--xl);
-  --#{$title}--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$title}--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // 2xl
   --#{$title}--m-2xl--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-2xl--FontSize: var(--pf-t--global--font--size--heading--lg);
-  --#{$title}--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$title}--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // xl
   --#{$title}--m-xl--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-xl--FontSize: var(--pf-t--global--font--size--heading--md);
-  --#{$title}--m-xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$title}--m-xl--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // lg
   --#{$title}--m-lg--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-lg--FontSize: var(--pf-t--global--font--size--heading--sm);
-  --#{$title}--m-lg--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$title}--m-lg--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // md
   --#{$title}--m-md--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --#{$title}--m-md--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$title}--m-md--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
-  // HEADING modifiers 
+  // HEADING modifiers
   // h1
   --#{$title}--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-h1--FontSize: var(--pf-t--global--font--size--heading--h1);
-  --#{$title}--m-h1--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$title}--m-h1--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // h2
   --#{$title}--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-h2--FontSize: var(--pf-t--global--font--size--heading--h2);
-  --#{$title}--m-h2--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$title}--m-h2--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // h3
   --#{$title}--m-h3--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-h3--FontSize: var(--pf-t--global--font--size--heading--h3);
-  --#{$title}--m-h3--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$title}--m-h3--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // h4
   --#{$title}--m-h4--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-h4--FontSize: var(--pf-t--global--font--size--heading--h4);
-  --#{$title}--m-h4--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$title}--m-h4--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // h5
   --#{$title}--m-h5--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-h5--FontSize: var(--pf-t--global--font--size--heading--h5);
-  --#{$title}--m-h5--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$title}--m-h5--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // h6
   --#{$title}--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
-  --#{$title}--m-h6--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$title}--m-h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
 }
 
 .#{$title} {

package/components/ToggleGroup/toggle-group.css

@@ -1,39 +1,39 @@
-:where(:root),
-:where(.pf-v6-c-toggle-group) {
-  --pf-v6-c-toggle-group__button--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group__button--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-toggle-group__button--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group__button--PaddingLeft: var(--pf-t--global--spacer--md);
+:root,
+.pf-v6-c-toggle-group {
+  --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-toggle-group__button--ZIndex: auto;
   --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
-  --pf-v6-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
+  --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
   --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
-  --pf-v6-c-toggle-group--m-compact__button--PaddingTop: 0;
-  --pf-v6-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group--m-compact__button--PaddingBottom: 0;
-  --pf-v6-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
+  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
+  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
 }
 
@@ -41,33 +41,33 @@
   display: flex;
 }
 .pf-v6-c-toggle-group.pf-m-compact {
-  --pf-v6-c-toggle-group__button--PaddingTop: var(--pf-v6-c-toggle-group--m-compact__button--PaddingTop);
-  --pf-v6-c-toggle-group__button--PaddingRight: var(--pf-v6-c-toggle-group--m-compact__button--PaddingRight);
-  --pf-v6-c-toggle-group__button--PaddingBottom: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBottom);
-  --pf-v6-c-toggle-group__button--PaddingLeft: var(--pf-v6-c-toggle-group--m-compact__button--PaddingLeft);
+  --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart);
+  --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd);
+  --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd);
+  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
   --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
 }
 
 .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
-  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
 }
 .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button::before {
-  border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderTopLeftRadius);
-  border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderBottomLeftRadius);
+  border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
+  border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
 }
 .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button::before {
-  border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderTopRightRadius);
-  border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderBottomRightRadius);
+  border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
+  border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
 }
 
 .pf-v6-c-toggle-group__button {
   position: relative;
   z-index: var(--pf-v6-c-toggle-group__button--ZIndex);
   display: inline-flex;
-  padding-block-start: var(--pf-v6-c-toggle-group__button--PaddingTop);
-  padding-block-end: var(--pf-v6-c-toggle-group__button--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-toggle-group__button--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-toggle-group__button--PaddingRight);
+  padding-block-start: var(--pf-v6-c-toggle-group__button--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-toggle-group__button--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-toggle-group__button--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-toggle-group__button--PaddingInlineEnd);
   font-size: var(--pf-v6-c-toggle-group__button--FontSize);
   line-height: var(--pf-v6-c-toggle-group__button--LineHeight);
   color: var(--pf-v6-c-toggle-group__button--Color);
@@ -89,7 +89,7 @@
   border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
   border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
 }
-.pf-v6-c-toggle-group__button:hover, .pf-v6-c-toggle-group__button:focus {
+.pf-v6-c-toggle-group__button:is(:hover, :focus) {
   --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
   --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
@@ -101,7 +101,7 @@
   --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
 }
-.pf-v6-c-toggle-group__button:disabled, .pf-v6-c-toggle-group__button.pf-m-disabled {
+.pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
   --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
   --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--disabled--Color);
   --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--disabled--ZIndex);
@@ -109,15 +109,15 @@
   pointer-events: none;
 }
 
-.pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
+.pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) {
   --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
 }
 
-.pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
+.pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
   --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
 }
 
 .pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,
 .pf-v6-c-toggle-group__text + .pf-v6-c-toggle-group__icon {
-  margin-inline-start: var(--pf-v6-c-toggle-group__icon--text--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-toggle-group__icon--text--MarginInlineStart);
 }