@patternfly/patternfly 6.0.0-alpha.200 → 6.0.0-alpha.202

package/base/normalize.scss

@@ -91,12 +91,12 @@
 
   :where(a) {
     color: var(--pf-t--global--text--color--link--default);
-    text-decoration: var(--pf-t--global--link--text-decoration);
+    text-decoration: var(--pf-t--global--text-decoration--link--line--default);
   }
 
-  :where(a:hover) {
+  :where(a:hover, a:focus) {
     color: var(--pf-t--global--text--color--link--hover);
-    text-decoration: var(--pf-t--global--link--text-decoration--hover);
+    text-decoration: var(--pf-t--global--text-decoration--link--line--hover);
   }
 
   :where(

package/base/patternfly-variables.css

@@ -365,8 +365,8 @@
   --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
   --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
   --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
-  --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--style--200);
-  --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
   --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
   --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
   --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
@@ -737,10 +737,6 @@
   --pf-t--global--font--weight--body--bold--legacy: 700;
   --pf-t--global--font--weight--heading--legacy: 400;
   --pf-t--global--font--weight--heading--bold--legacy: 700;
-  --pf-t--global--text-decoration--100: none;
-  --pf-t--global--text-decoration--200: underline;
-  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--100);
-  --pf-t--global--link--text-decoration--hover: var(--pf-t--global--text-decoration--200);
   --pf-t--global--box-shadow--sm:
     var(--pf-t--global--box-shadow--X--sm--default)
     var(--pf-t--global--box-shadow--Y--sm--default)

package/base/tokens/tokens-charts-dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 16 Jul 2024 23:44:44 GMT
+// Generated on Thu, 18 Jul 2024 22:27:54 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--chart--global--BorderWidth--lg: 8;

package/base/tokens/tokens-charts.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 16 Jul 2024 23:44:44 GMT
+// Generated on Thu, 18 Jul 2024 22:27:54 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--chart--global--BorderWidth--lg: 8;

package/base/tokens/tokens-dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 16 Jul 2024 23:44:44 GMT
+// Generated on Thu, 18 Jul 2024 22:27:54 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);

package/base/tokens/tokens-default.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 16 Jul 2024 23:44:44 GMT
+// Generated on Thu, 18 Jul 2024 22:27:54 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -300,8 +300,8 @@
   --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
   --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
   --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
-  --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--style--200);
-  --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
   --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
   --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
   --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);

package/base/tokens/tokens-local.scss

@@ -19,12 +19,6 @@
   --pf-t--global--font--weight--heading--bold--legacy: 700;
 
   // Other missing ones
-  // text-decoration
-  --pf-t--global--text-decoration--100: none;
-  --pf-t--global--text-decoration--200: underline;
-  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--100);
-  --pf-t--global--link--text-decoration--hover: var(--pf-t--global--text-decoration--200);
-
   // sm box-shadow
   --pf-t--global--box-shadow--sm: 
     var(--pf-t--global--box-shadow--X--sm--default) 

package/base/tokens/tokens-palette.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 16 Jul 2024 23:44:44 GMT
+// Generated on Thu, 18 Jul 2024 22:27:54 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--color--black: #000000;

package/components/Breadcrumb/breadcrumb.css

@@ -8,9 +8,11 @@
   --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
-  --pf-v6-c-breadcrumb__link--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
   --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
-  --pf-v6-c-breadcrumb__link--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
+  --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
   --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);
@@ -63,18 +65,19 @@
   font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
   line-height: inherit;
   color: var(--pf-v6-c-breadcrumb__link--Color);
-  text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecoration);
+  text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
   word-break: break-word;
   background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
 }
-.pf-v6-c-breadcrumb__link:hover {
+.pf-v6-c-breadcrumb__link:is(:hover, :focus) {
   --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
-  --pf-v6-c-breadcrumb__link--TextDecoration: var(--pf-v6-c-breadcrumb__link--hover--TextDecoration);
+  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
+  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
 }
 .pf-v6-c-breadcrumb__link.pf-m-current {
   cursor: default;
 }
-.pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:hover {
+.pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
   color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
   text-decoration: none;
 }

package/components/Breadcrumb/breadcrumb.scss

@@ -15,9 +15,11 @@
   --#{$breadcrumb}__link--PaddingInlineStart: var(--pf-t--global--spacer--sm); // use a mutable value for alignment control
   --#{$breadcrumb}__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm); // use a mutable value for alignment control
   --#{$breadcrumb}__link--Color: var(--pf-t--global--text--color--link--default);
-  --#{$breadcrumb}__link--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --#{$breadcrumb}__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+  --#{$breadcrumb}__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
   --#{$breadcrumb}__link--hover--Color: var(--pf-t--global--text--color--link--hover);
-  --#{$breadcrumb}__link--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
+  --#{$breadcrumb}__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --#{$breadcrumb}__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
   --#{$breadcrumb}__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --#{$breadcrumb}__link--BackgroundColor: transparent;
 
@@ -79,13 +81,14 @@
   font-weight: var(--#{$breadcrumb}__link--FontWeight);
   line-height: inherit;
   color: var(--#{$breadcrumb}__link--Color);
-  text-decoration: var(--#{$breadcrumb}__link--TextDecoration);
+  text-decoration: var(--#{$breadcrumb}__link--TextDecorationLine) var(--#{$breadcrumb}__link--TextDecorationStyle);
   word-break: break-word;
   background-color: var(--#{$breadcrumb}__link--BackgroundColor);
 
-  &:hover {
+  &:is(:hover, :focus) {
     --#{$breadcrumb}__link--Color: var(--#{$breadcrumb}__link--hover--Color);
-    --#{$breadcrumb}__link--TextDecoration: var(--#{$breadcrumb}__link--hover--TextDecoration);
+    --#{$breadcrumb}__link--TextDecorationLine: var(--#{$breadcrumb}__link--hover--TextDecorationLine);
+    --#{$breadcrumb}__link--TextDecorationStyle: var(--#{$breadcrumb}__link--hover--TextDecorationStyle);
   }
 
 
@@ -94,7 +97,7 @@
     cursor: default;
 
     &,
-    &:hover {
+    &:is(:hover, :focus) {
       color: var(--#{$breadcrumb}__link--m-current--Color);
       text-decoration: none;
     }

package/components/Button/button.css

@@ -15,14 +15,16 @@
   --pf-v6-c-button--BorderColor: transparent;
   --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
   --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v6-c-button--TextDecoration: none;
+  --pf-v6-c-button--TextDecorationLine: none;
+  --pf-v6-c-button--TextDecorationStyle: none;
   --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
   --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
   --pf-v6-c-button--hover--BackgroundColor: transparent;
   --pf-v6-c-button--hover--BorderColor: transparent;
   --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
-  --pf-v6-c-button--hover--TextDecoration: none;
+  --pf-v6-c-button--hover--TextDecorationLine: none;
+  --pf-v6-c-button--hover--TextDecorationStyle: none;
   --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
   --pf-v6-c-button--m-clicked--BorderColor: transparent;
   --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
@@ -92,7 +94,10 @@
   --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
   --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
   --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
-  --pf-v6-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
+  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
+  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
   --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -247,7 +252,7 @@
   line-height: var(--pf-v6-c-button--LineHeight, inherit);
   color: var(--pf-v6-c-button--Color);
   text-align: center;
-  text-decoration: var(--pf-v6-c-button--TextDecoration);
+  text-decoration: var(--pf-v6-c-button--TextDecorationLine) var(--pf-v6-c-button--TextDecorationStyle);
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
@@ -347,7 +352,10 @@
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
   --pf-v6-c-button--BackgroundColor: transparent;
   --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
-  --pf-v6-c-button--hover--TextDecoration: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecoration);
+  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
+  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
+  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
+  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
   --pf-v6-c-button--hover--BackgroundColor: transparent;
   --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
   --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -509,8 +517,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
   --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
   --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
-  --pf-v6-c-button--TextDecoration: var(--pf-v6-c-button--hover--TextDecoration);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
+  text-decoration: var(--pf-v6-c-button--hover--TextDecorationLine) var(--pf-v6-c-button--hover--TextDecorationStyle);
 }
 .pf-v6-c-button.pf-m-clicked {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
@@ -533,7 +541,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   color: var(--pf-v6-c-button--disabled__icon--Color);
 }
 .pf-v6-c-button.pf-m-aria-disabled {
-  --pf-v6-c-button--m-link--m-inline--hover--TextDecoration: none;
+  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
+  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
   cursor: default;
 }
 .pf-v6-c-button.pf-m-progress {

package/components/Button/button.scss

@@ -17,7 +17,8 @@
   --#{$button}--BorderColor: transparent;
   --#{$button}--BorderWidth: var(--pf-t--global--border--width--action--default);
   --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --#{$button}--TextDecoration: none;
+  --#{$button}--TextDecorationLine: none;
+  --#{$button}--TextDecorationStyle: none;
   --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
   --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$button}--TransitionProperty: color, background-color, border-width, border-color, padding;
@@ -26,7 +27,8 @@
   --#{$button}--hover--BackgroundColor: transparent;
   --#{$button}--hover--BorderColor: transparent;
   --#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
-  --#{$button}--hover--TextDecoration: none;
+  --#{$button}--hover--TextDecorationLine: none;
+  --#{$button}--hover--TextDecorationStyle: none;
 
   // Clicked
   --#{$button}--m-clicked--BackgroundColor: transparent;
@@ -110,7 +112,10 @@
   --#{$button}--m-link--m-inline--PaddingInlineEnd: 0;
   --#{$button}--m-link--m-inline--PaddingBlockEnd: 0;
   --#{$button}--m-link--m-inline--PaddingInlineStart: 0;
-  --#{$button}--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
+  --#{$button}--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+  --#{$button}--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
+  --#{$button}--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --#{$button}--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
   --#{$button}--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
   --#{$button}--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--#{$button}--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
   --#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -297,7 +302,7 @@
   line-height: var(--#{$button}--LineHeight, inherit);
   color: var(--#{$button}--Color);
   text-align: center;
-  text-decoration: var(--#{$button}--TextDecoration);
+  text-decoration: var(--#{$button}--TextDecorationLine) var(--#{$button}--TextDecorationStyle);
   white-space: nowrap;
   cursor: pointer; // needed for when a button does not use <button> - eg, <span>
   user-select: none;
@@ -413,7 +418,10 @@
       --#{$button}--PaddingInlineStart: var(--#{$button}--m-link--m-inline--PaddingInlineStart);
       --#{$button}--BackgroundColor: transparent;
       --#{$button}__progress--InsetInlineStart: var(--#{$button}--m-link--m-inline__progress--InsetInlineStart);
-      --#{$button}--hover--TextDecoration: var(--#{$button}--m-link--m-inline--hover--TextDecoration);
+      --#{$button}--TextDecorationLine: var(--#{$button}--m-link--m-inline--TextDecorationLine);
+      --#{$button}--TextDecorationStyle: var(--#{$button}--m-link--m-inline--TextDecorationStyle);
+      --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
+      --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
       --#{$button}--hover--BackgroundColor: transparent;
       --#{$button}--m-clicked--BackgroundColor: transparent;
       --#{$button}--disabled--BackgroundColor: transparent;
@@ -598,8 +606,9 @@
     --#{$button}--BackgroundColor: var(--#{$button}--hover--BackgroundColor);
     --#{$button}--BorderColor: var(--#{$button}--hover--BorderColor);
     --#{$button}--BorderWidth: var(--#{$button}--hover--BorderWidth);
-    --#{$button}--TextDecoration: var(--#{$button}--hover--TextDecoration);
     --#{$button}__icon--Color: var(--#{$button}--hover__icon--Color);
+
+    text-decoration: var(--#{$button}--hover--TextDecorationLine) var(--#{$button}--hover--TextDecorationStyle);
   }
 
   &.pf-m-clicked {
@@ -633,7 +642,8 @@
   }
 
   &.pf-m-aria-disabled {
-    --#{$button}--m-link--m-inline--hover--TextDecoration: none;
+    --#{$button}--m-link--m-inline--hover--TextDecorationLine: var(--#{$button}--TextDecorationLine);
+    --#{$button}--m-link--m-inline--hover--TextDecorationStyle: var(--#{$button}--TextDecorationStyle);
 
     cursor: default;
   }

package/components/Content/content.css

@@ -40,9 +40,11 @@
   --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
-  --pf-v6-c-content--a--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+  --pf-v6-c-content--a--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
   --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
-  --pf-v6-c-content--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v6-c-content--a--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-content--a--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
   --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
   --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -71,11 +73,12 @@
 }
 :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
   color: var(--pf-v6-c-content--a--Color);
-  text-decoration: var(--pf-v6-c-content--a--TextDecoration);
+  text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);
 }
-:is(.pf-v6-c-content--a, .pf-v6-c-content a):hover {
+:is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus) {
   --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);
-  --pf-v6-c-content--a--TextDecoration: var(--pf-v6-c-content--a--hover--TextDecoration);
+  --pf-v6-c-content--a--TextDecorationLine: var(--pf-v6-c-content--a--hover--TextDecorationLine);
+  --pf-v6-c-content--a--TextDecorationStyle: var(--pf-v6-c-content--a--hover--TextDecorationStyle);
 }
 
 :is(.pf-v6-c-content--a.pf-m-visited, .pf-v6-c-content.pf-m-visited a, .pf-v6-c-content a.pf-m-visited):visited {

package/components/Content/content.scss

@@ -63,9 +63,11 @@
 
   // Links
   --#{$content}--a--Color: var(--pf-t--global--text--color--link--default);
-  --#{$content}--a--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --#{$content}--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+  --#{$content}--a--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
   --#{$content}--a--hover--Color: var(--pf-t--global--text--color--link--hover);
-  --#{$content}--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --#{$content}--a--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --#{$content}--a--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
   --#{$content}--a--visited--Color: var(--pf-t--global--text--color--link--visited);
 
   // Blockquote
@@ -103,11 +105,12 @@
     & a
   ) {
     color: var(--#{$content}--a--Color);
-    text-decoration: var(--#{$content}--a--TextDecoration);
+    text-decoration: var(--#{$content}--a--TextDecorationLine) var(--#{$content}--a--TextDecorationStyle);
 
-    &:hover {
+    &:is(:hover, :focus) {
       --#{$content}--a--Color: var(--#{$content}--a--hover--Color);
-      --#{$content}--a--TextDecoration: var(--#{$content}--a--hover--TextDecoration);
+      --#{$content}--a--TextDecorationLine: var(--#{$content}--a--hover--TextDecorationLine);
+      --#{$content}--a--TextDecorationStyle: var(--#{$content}--a--hover--TextDecorationStyle);
     }
   }
 

package/components/DescriptionList/description-list.css

@@ -30,11 +30,11 @@
   --pf-v6-c-description-list--m-3-col--GridTemplateColumns--count: 3;
   --pf-v6-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
   --pf-v6-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-v6-c-description-list--m-auto-fit--GridTemplateColumns--min);
-  --pf-v6-c-description-list__text--m-help-text--TextDecorationColor: currentcolor;
-  --pf-v6-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
-  --pf-v6-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
-  --pf-v6-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-t--global--border--color--hover);
-  --pf-v6-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-t--global--border--color--hover);
+  --pf-v6-c-description-list__text--m-help-text--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--default);
+  --pf-v6-c-description-list__text--m-help-text--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--default);
+  --pf-v6-c-description-list__text--m-help-text--TextUnderlineOffset: 0.25rem;
+  --pf-v6-c-description-list__text--m-help-text--hover--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--hover);
+  --pf-v6-c-description-list__text--m-help-text--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--hover);
   --pf-v6-c-description-list--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg);
   --pf-v6-c-description-list--m-display-2xl__description--FontSize: var(--pf-t--global--font--size--heading--lg);
   --pf-v6-c-description-list--m-horizontal__term--width-on-sm: inherit;
@@ -196,18 +196,13 @@
   min-width: 0;
 }
 .pf-v6-c-description-list__text.pf-m-help-text {
-  text-decoration: underline;
-  text-decoration-thickness: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationThickness);
-  text-decoration-style: dashed;
-  text-decoration-color: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationColor);
-  text-underline-offset: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationOffset);
+  text-decoration: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationLine) var(--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle);
+  text-underline-offset: var(--pf-v6-c-description-list__text--m-help-text--TextUnderlineOffset);
   cursor: pointer;
 }
-.pf-v6-c-description-list__text.pf-m-help-text:hover {
-  --pf-v6-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-v6-c-description-list__text--m-help-text--hover--TextDecorationColor);
-}
-.pf-v6-c-description-list__text.pf-m-help-text:focus {
-  --pf-v6-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-v6-c-description-list__text--m-help-text--focus--TextDecorationColor);
+.pf-v6-c-description-list__text.pf-m-help-text:is(:hover, :focus) {
+  --pf-v6-c-description-list__text--m-help-text--TextDecorationLine: var(--pf-v6-c-description-list__text--m-help-text--hover--TextDecorationLine);
+  --pf-v6-c-description-list__text--m-help-text--TextDecorationStyle: var(--pf-v6-c-description-list__text--m-help-text--hover--TextDecorationStyle);
 }
 
 .pf-v6-c-description-list.pf-m-1-col {

package/components/DescriptionList/description-list.scss

@@ -54,11 +54,11 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   --#{$description-list}--m-auto-fit--GridTemplateColumns--minmax--min: var(--#{$description-list}--m-auto-fit--GridTemplateColumns--min);
 
   // help text
-  --#{$description-list}__text--m-help-text--TextDecorationColor: currentcolor;
-  --#{$description-list}__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
-  --#{$description-list}__text--m-help-text--TextDecorationOffset: #{pf-size-prem(4px)};
-  --#{$description-list}__text--m-help-text--hover--TextDecorationColor: var(--pf-t--global--border--color--hover);
-  --#{$description-list}__text--m-help-text--focus--TextDecorationColor: var(--pf-t--global--border--color--hover);
+  --#{$description-list}__text--m-help-text--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--default);
+  --#{$description-list}__text--m-help-text--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--default);
+  --#{$description-list}__text--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)};
+  --#{$description-list}__text--m-help-text--hover--TextDecorationLine: var(--pf-t--global--text-decoration--help-text--line--hover);
+  --#{$description-list}__text--m-help-text--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--help-text--style--hover);
 
   // Display modifiers
   --#{$description-list}--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg); // TODO replace with new font tokens when available
@@ -179,19 +179,13 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   min-width: 0; // this allows overflow-wrap to work
 
   &.pf-m-help-text {
-    text-decoration: underline;
-    text-decoration-thickness: var(--#{$description-list}__text--m-help-text--TextDecorationThickness);
-    text-decoration-style: dashed;
-    text-decoration-color: var(--#{$description-list}__text--m-help-text--TextDecorationColor);
-    text-underline-offset: var(--#{$description-list}__text--m-help-text--TextDecorationOffset);
+    text-decoration: var(--#{$description-list}__text--m-help-text--TextDecorationLine) var(--#{$description-list}__text--m-help-text--TextDecorationStyle);
+    text-underline-offset: var(--#{$description-list}__text--m-help-text--TextUnderlineOffset);
     cursor: pointer;
 
-    &:hover {
-      --#{$description-list}__text--m-help-text--TextDecorationColor: var(--#{$description-list}__text--m-help-text--hover--TextDecorationColor);
-    }
-
-    &:focus {
-      --#{$description-list}__text--m-help-text--TextDecorationColor: var(--#{$description-list}__text--m-help-text--focus--TextDecorationColor);
+    &:is(:hover, :focus) {
+      --#{$description-list}__text--m-help-text--TextDecorationLine: var(--#{$description-list}__text--m-help-text--hover--TextDecorationLine);
+      --#{$description-list}__text--m-help-text--TextDecorationStyle: var(--#{$description-list}__text--m-help-text--hover--TextDecorationStyle);
     }
   }
 }

package/components/JumpLinks/jump-links.css

@@ -188,7 +188,7 @@
   text-decoration: none;
   outline-offset: var(--pf-v6-c-jump-links__link--OutlineOffset);
 }
-.pf-v6-c-jump-links__link:hover, .pf-v6-c-jump-links__link:focus {
+.pf-v6-c-jump-links__link:is(:hover, :focus) {
   --pf-v6-c-jump-links__link-text--Color: var(--pf-v6-c-jump-links__link--hover__link-text--Color);
 }
 .pf-v6-c-jump-links__link::before {

package/components/JumpLinks/jump-links.scss

@@ -162,8 +162,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
   text-decoration: none;
   outline-offset: var(--#{$jump-links}__link--OutlineOffset);
 
-  &:hover,
-  &:focus {
+  &:is(:hover, :focus) {
     --#{$jump-links}__link-text--Color: var(--#{$jump-links}__link--hover__link-text--Color);
   }
 

package/components/Label/label.css

@@ -159,7 +159,7 @@
   --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
   --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v6-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
+  --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
   --pf-v6-c-label__content--MaxWidth: 100%;
   --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label__content--Cursor: initial;
@@ -174,14 +174,14 @@
   --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-label--m-editable--TextDecoration: underline;
-  --pf-v6-c-label--m-editable--TextDecorationStyle: dashed;
-  --pf-v6-c-label--m-editable--TextDecorationThickness: var(--pf-t--global--border--width--regular);
-  --pf-v6-c-label--m-editable--TextDecorationOffset: 0.25rem;
-  --pf-v6-c-label--m-editable--TextDecorationColor: currentcolor;
+  --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
+  --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
+  --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
+  --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
+  --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
   --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
   --pf-v6-c-label--m-editable__content--Cursor: pointer;
-  --pf-v6-c-label--m-editable--m-editable-active--TextDecoration: none;
+  --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
   --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
   --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
@@ -351,7 +351,7 @@
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
   --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
-  --pf-v6-c-label--m-editable--TextDecorationOffset: var(--pf-v6-c-label--m-compact--m-editable--TextDecorationOffset);
+  --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
 }
 .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
@@ -372,15 +372,16 @@
   --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
   --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
 }
+.pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
+  --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
+  --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
+}
 .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
-  text-decoration: var(--pf-v6-c-label--m-editable--TextDecoration);
-  text-decoration-thickness: var(--pf-v6-c-label--m-editable--TextDecorationThickness);
-  text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
-  text-decoration-color: var(--pf-v6-c-label--m-editable--TextDecorationColor);
-  text-underline-offset: var(--pf-v6-c-label--m-editable--TextDecorationOffset);
+  text-decoration: var(--pf-v6-c-label--m-editable--TextDecorationLine) var(--pf-v6-c-label--m-editable--TextDecorationStyle);
+  text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
 }
 .pf-v6-c-label.pf-m-editable-active {
-  --pf-v6-c-label--m-editable--TextDecoration: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecoration);
+  --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
   --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
   --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
   --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);