@patternfly/patternfly 6.5.0-prerelease.43 → 6.5.0-prerelease.44

package/components/Button/button.css

@@ -32,11 +32,16 @@
   --pf-v6-c-button--hover--TextDecorationLine: none;
   --pf-v6-c-button--hover--TextDecorationStyle: none;
   --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
+  --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
   --pf-v6-c-button--hover--ScaleX: 1;
   --pf-v6-c-button--hover--ScaleY: 1;
   --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);
+  --pf-v6-c-button--m-clicked--TextDecorationLine: none;
+  --pf-v6-c-button--m-clicked--TextDecorationStyle: none;
+  --pf-v6-c-button--m-clicked--TextDecorationColor: currentcolor;
+  --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
   --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
@@ -75,7 +80,7 @@
   --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
   --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
-  --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
@@ -241,7 +246,37 @@
   --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
   --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
   --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
+  --pf-v6-c-button--m-display-lg--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-button--m-display-lg--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --pf-v6-c-button--m-display-lg--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+  --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationColor: var(--pf-t--global--border--color--control--default);
+  --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --pf-v6-c-button--m-display-lg--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+  --pf-v6-c-button--m-display-lg--m-primary--Color: var(--pf-t--global--text--color--on-brand--accent--default);
+  --pf-v6-c-button--m-display-lg--m-primary--BackgroundColor: var(--pf-t--global--color--brand--accent--default);
+  --pf-v6-c-button--m-display-lg--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--default);
+  --pf-v6-c-button--m-display-lg--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--accent--hover);
+  --pf-v6-c-button--m-display-lg--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--accent--hover);
+  --pf-v6-c-button--m-display-lg--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--hover);
+  --pf-v6-c-button--m-display-lg--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--accent--clicked);
+  --pf-v6-c-button--m-display-lg--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--accent--clicked);
+  --pf-v6-c-button--m-display-lg--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--clicked);
+  --pf-v6-c-button--m-display-lg--m-primary--hover--TextDecorationColor: currentcolor;
+  --pf-v6-c-button--m-display-lg--m-primary--m-clicked--TextDecorationColor: currentcolor;
+  --pf-v6-c-button--m-display-lg--m-secondary--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-button--m-display-lg--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--accent--default);
+  --pf-v6-c-button--m-display-lg--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--accent--default);
+  --pf-v6-c-button--m-display-lg--m-secondary--hover--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-button--m-display-lg--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--accent--hover);
+  --pf-v6-c-button--m-display-lg--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--accent--hover);
+  --pf-v6-c-button--m-display-lg--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-button--m-display-lg--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--accent--clicked);
+  --pf-v6-c-button--m-display-lg--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--accent--clicked);
+  --pf-v6-c-button--m-display-lg--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-display-lg--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
   --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
   --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -483,6 +518,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --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--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
+  --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
   --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
   --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
   --pf-v6-c-button--BorderWidth: 0;
@@ -647,6 +683,38 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
   --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
+  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationColor);
+  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationLine);
+  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationStyle);
+  --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-display-lg--hover--TextUnderlineOffset);
+  --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationColor);
+  --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationLine);
+  --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationStyle);
+  --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-display-lg--m-clicked--TextUnderlineOffset);
+  --pf-v6-c-button--m-primary--Color: var(--pf-v6-c-button--m-display-lg--m-primary--Color);
+  --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--BackgroundColor);
+  --pf-v6-c-button--m-primary__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary__icon--Color);
+  --pf-v6-c-button--m-primary--hover--Color: var(--pf-v6-c-button--m-display-lg--m-primary--hover--Color);
+  --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--hover--BackgroundColor);
+  --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary--hover__icon--Color);
+  --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--Color);
+  --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--BackgroundColor);
+  --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked__icon--Color);
+  --pf-v6-c-button--m-secondary--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--Color);
+  --pf-v6-c-button--m-secondary--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--BorderColor);
+  --pf-v6-c-button--m-secondary__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary__icon--Color);
+  --pf-v6-c-button--m-secondary--hover--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--hover--Color);
+  --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--hover--BorderColor);
+  --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--hover__icon--Color);
+  --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked--Color);
+  --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked--BorderColor);
+  --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked__icon--Color);
+  --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-v6-c-button--m-display-lg--m-tertiary--hover--BorderColor);
+  --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-v6-c-button--m-display-lg--m-tertiary--m-clicked--BorderColor);
+}
+.pf-v6-c-button.pf-m-display-lg.pf-m-primary {
+  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-primary--hover--TextDecorationColor);
+  --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--TextDecorationColor);
 }
 .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
   display: grid;
@@ -730,6 +798,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
+  text-underline-offset: var(--pf-v6-c-button--hover--TextUnderlineOffset);
   outline-offset: var(--pf-t--global--focus-ring--position--offset);
 }
 .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
@@ -738,6 +807,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
   --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
+  text-decoration-line: var(--pf-v6-c-button--m-clicked--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-button--m-clicked--TextDecorationStyle);
+  text-decoration-color: var(--pf-v6-c-button--m-clicked--TextDecorationColor);
+  text-underline-offset: var(--pf-v6-c-button--m-clicked--TextUnderlineOffset);
 }
 .pf-v6-c-button:active {
   background-size: 100% 100%;

package/components/Button/button.scss

@@ -36,6 +36,7 @@
   --#{$button}--hover--TextDecorationLine: none;
   --#{$button}--hover--TextDecorationStyle: none;
   --#{$button}--hover--TextDecorationColor: currentcolor;
+  --#{$button}--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
   --#{$button}--hover--ScaleX: 1;
   --#{$button}--hover--ScaleY: 1;
 
@@ -43,6 +44,10 @@
   --#{$button}--m-clicked--BackgroundColor: transparent;
   --#{$button}--m-clicked--BorderColor: transparent;
   --#{$button}--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
+  --#{$button}--m-clicked--TextDecorationLine: none;
+  --#{$button}--m-clicked--TextDecorationStyle: none;
+  --#{$button}--m-clicked--TextDecorationColor: currentcolor;
+  --#{$button}--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
 
   // Primary
   --#{$button}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
@@ -89,7 +94,7 @@
   --#{$button}--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
 
   // Link
-  --#{$button}--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$button}--m-link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --#{$button}--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --#{$button}--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --#{$button}--m-link--Color: var(--pf-t--global--text--color--brand--default);
@@ -273,13 +278,49 @@
   --#{$button}--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
   --#{$button}--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
 
-  // CTA
+  // CTA (display large)
   --#{$button}--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
   --#{$button}--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
   --#{$button}--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
   --#{$button}--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
   --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$button}--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
+  --#{$button}--m-display-lg--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --#{$button}--m-display-lg--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --#{$button}--m-display-lg--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+  --#{$button}--m-display-lg--m-clicked--TextDecorationColor: var(--pf-t--global--border--color--control--default);
+  --#{$button}--m-display-lg--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --#{$button}--m-display-lg--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --#{$button}--m-display-lg--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+
+  // CTA primary
+  --#{$button}--m-display-lg--m-primary--Color: var(--pf-t--global--text--color--on-brand--accent--default);
+  --#{$button}--m-display-lg--m-primary--BackgroundColor: var(--pf-t--global--color--brand--accent--default);
+  --#{$button}--m-display-lg--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--default);
+  --#{$button}--m-display-lg--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--accent--hover);
+  --#{$button}--m-display-lg--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--accent--hover);
+  --#{$button}--m-display-lg--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--hover);
+  --#{$button}--m-display-lg--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--accent--clicked);
+  --#{$button}--m-display-lg--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--accent--clicked);
+  --#{$button}--m-display-lg--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--clicked);
+  --#{$button}--m-display-lg--m-primary--hover--TextDecorationColor: currentcolor;
+  --#{$button}--m-display-lg--m-primary--m-clicked--TextDecorationColor: currentcolor;
+
+  // CTA Secondary
+  --#{$button}--m-display-lg--m-secondary--Color: var(--pf-t--global--text--color--regular);
+  --#{$button}--m-display-lg--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--accent--default);
+  --#{$button}--m-display-lg--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--accent--default);
+  --#{$button}--m-display-lg--m-secondary--hover--Color: var(--pf-t--global--text--color--regular);
+  --#{$button}--m-display-lg--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--accent--hover);
+  --#{$button}--m-display-lg--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--accent--hover);
+  --#{$button}--m-display-lg--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--regular);
+  --#{$button}--m-display-lg--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--accent--clicked);
+  --#{$button}--m-display-lg--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--accent--clicked);
+
+  // CTA Tertiary
+  --#{$button}--m-display-lg--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-display-lg--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--default);
 
   // Small
   --#{$button}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
@@ -553,6 +594,7 @@
       --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
       --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
       --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
+      --#{$button}--hover--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--TextUnderlineOffset);
       --#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color);
       --#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color);
       --#{$button}--BorderWidth: 0;
@@ -745,6 +787,39 @@
     --#{$button}--PaddingBlockEnd: var(--#{$button}--m-display-lg--PaddingBlockEnd);
     --#{$button}--PaddingInlineStart: var(--#{$button}--m-display-lg--PaddingInlineStart);
     --#{$button}--FontSize: var(--#{$button}--m-display-lg--FontSize);
+    --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-display-lg--hover--TextDecorationColor);
+    --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-display-lg--hover--TextDecorationLine);
+    --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-display-lg--hover--TextDecorationStyle);
+    --#{$button}--hover--TextUnderlineOffset: var(--#{$button}--m-display-lg--hover--TextUnderlineOffset);
+    --#{$button}--m-clicked--TextDecorationColor: var(--#{$button}--m-display-lg--m-clicked--TextDecorationColor);
+    --#{$button}--m-clicked--TextDecorationLine: var(--#{$button}--m-display-lg--m-clicked--TextDecorationLine);
+    --#{$button}--m-clicked--TextDecorationStyle: var(--#{$button}--m-display-lg--m-clicked--TextDecorationStyle);
+    --#{$button}--m-clicked--TextUnderlineOffset: var(--#{$button}--m-display-lg--m-clicked--TextUnderlineOffset);
+    --#{$button}--m-primary--Color: var(--#{$button}--m-display-lg--m-primary--Color);
+    --#{$button}--m-primary--BackgroundColor: var(--#{$button}--m-display-lg--m-primary--BackgroundColor);
+    --#{$button}--m-primary__icon--Color: var(--#{$button}--m-display-lg--m-primary__icon--Color);
+    --#{$button}--m-primary--hover--Color: var(--#{$button}--m-display-lg--m-primary--hover--Color);
+    --#{$button}--m-primary--hover--BackgroundColor: var(--#{$button}--m-display-lg--m-primary--hover--BackgroundColor);
+    --#{$button}--m-primary--hover__icon--Color: var(--#{$button}--m-display-lg--m-primary--hover__icon--Color);
+    --#{$button}--m-primary--m-clicked--Color: var(--#{$button}--m-display-lg--m-primary--m-clicked--Color);
+    --#{$button}--m-primary--m-clicked--BackgroundColor: var(--#{$button}--m-display-lg--m-primary--m-clicked--BackgroundColor);
+    --#{$button}--m-primary--m-clicked__icon--Color: var(--#{$button}--m-display-lg--m-primary--m-clicked__icon--Color);
+    --#{$button}--m-secondary--Color: var(--#{$button}--m-display-lg--m-secondary--Color);
+    --#{$button}--m-secondary--BorderColor: var(--#{$button}--m-display-lg--m-secondary--BorderColor);
+    --#{$button}--m-secondary__icon--Color: var(--#{$button}--m-display-lg--m-secondary__icon--Color);
+    --#{$button}--m-secondary--hover--Color: var(--#{$button}--m-display-lg--m-secondary--hover--Color);
+    --#{$button}--m-secondary--hover--BorderColor: var(--#{$button}--m-display-lg--m-secondary--hover--BorderColor);
+    --#{$button}--m-secondary--hover__icon--Color: var(--#{$button}--m-display-lg--m-secondary--hover__icon--Color);
+    --#{$button}--m-secondary--m-clicked--Color: var(--#{$button}--m-display-lg--m-secondary--m-clicked--Color);
+    --#{$button}--m-secondary--m-clicked--BorderColor: var(--#{$button}--m-display-lg--m-secondary--m-clicked--BorderColor);
+    --#{$button}--m-secondary--m-clicked__icon--Color: var(--#{$button}--m-display-lg--m-secondary--m-clicked__icon--Color);
+    --#{$button}--m-tertiary--hover--BorderColor: var(--#{$button}--m-display-lg--m-tertiary--hover--BorderColor);
+    --#{$button}--m-tertiary--m-clicked--BorderColor: var(--#{$button}--m-display-lg--m-tertiary--m-clicked--BorderColor);
+
+    &.pf-m-primary {
+      --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-display-lg--m-primary--hover--TextDecorationColor);
+      --#{$button}--m-clicked--TextDecorationColor: var(--#{$button}--m-display-lg--m-primary--m-clicked--TextDecorationColor);
+    }
   }
 
   &.pf-m-favorite .#{$button}__icon {
@@ -830,6 +905,7 @@
     text-decoration-line: var(--#{$button}--hover--TextDecorationLine);
     text-decoration-style: var(--#{$button}--hover--TextDecorationStyle);
     text-decoration-color: var(--#{$button}--hover--TextDecorationColor);
+    text-underline-offset: var(--#{$button}--hover--TextUnderlineOffset);
     outline-offset: var(--pf-t--global--focus-ring--position--offset);
   }
 
@@ -840,6 +916,11 @@
     --#{$button}--BorderWidth: var(--#{$button}--m-clicked--BorderWidth);
     --#{$button}--BorderColor: var(--#{$button}--m-clicked--BorderColor);
     --#{$button}__icon--Color: var(--#{$button}--m-clicked__icon--Color);
+
+    text-decoration-line: var(--#{$button}--m-clicked--TextDecorationLine);
+    text-decoration-style: var(--#{$button}--m-clicked--TextDecorationStyle);
+    text-decoration-color: var(--#{$button}--m-clicked--TextDecorationColor);
+    text-underline-offset: var(--#{$button}--m-clicked--TextUnderlineOffset);
   }
 
   &:active {

package/components/_index.css

@@ -1633,11 +1633,16 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--hover--TextDecorationLine: none;
   --pf-v6-c-button--hover--TextDecorationStyle: none;
   --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
+  --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
   --pf-v6-c-button--hover--ScaleX: 1;
   --pf-v6-c-button--hover--ScaleY: 1;
   --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);
+  --pf-v6-c-button--m-clicked--TextDecorationLine: none;
+  --pf-v6-c-button--m-clicked--TextDecorationStyle: none;
+  --pf-v6-c-button--m-clicked--TextDecorationColor: currentcolor;
+  --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
   --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
@@ -1676,7 +1681,7 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
   --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
-  --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
@@ -1842,7 +1847,37 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
   --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
   --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
+  --pf-v6-c-button--m-display-lg--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-button--m-display-lg--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --pf-v6-c-button--m-display-lg--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+  --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationColor: var(--pf-t--global--border--color--control--default);
+  --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-button--m-display-lg--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --pf-v6-c-button--m-display-lg--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+  --pf-v6-c-button--m-display-lg--m-primary--Color: var(--pf-t--global--text--color--on-brand--accent--default);
+  --pf-v6-c-button--m-display-lg--m-primary--BackgroundColor: var(--pf-t--global--color--brand--accent--default);
+  --pf-v6-c-button--m-display-lg--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--default);
+  --pf-v6-c-button--m-display-lg--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--accent--hover);
+  --pf-v6-c-button--m-display-lg--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--accent--hover);
+  --pf-v6-c-button--m-display-lg--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--hover);
+  --pf-v6-c-button--m-display-lg--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--accent--clicked);
+  --pf-v6-c-button--m-display-lg--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--accent--clicked);
+  --pf-v6-c-button--m-display-lg--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--accent--clicked);
+  --pf-v6-c-button--m-display-lg--m-primary--hover--TextDecorationColor: currentcolor;
+  --pf-v6-c-button--m-display-lg--m-primary--m-clicked--TextDecorationColor: currentcolor;
+  --pf-v6-c-button--m-display-lg--m-secondary--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-button--m-display-lg--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--accent--default);
+  --pf-v6-c-button--m-display-lg--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--accent--default);
+  --pf-v6-c-button--m-display-lg--m-secondary--hover--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-button--m-display-lg--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--accent--hover);
+  --pf-v6-c-button--m-display-lg--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--accent--hover);
+  --pf-v6-c-button--m-display-lg--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-button--m-display-lg--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--accent--clicked);
+  --pf-v6-c-button--m-display-lg--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--accent--clicked);
+  --pf-v6-c-button--m-display-lg--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-display-lg--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
   --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
   --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -2084,6 +2119,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --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--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
+  --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
   --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
   --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
   --pf-v6-c-button--BorderWidth: 0;
@@ -2248,6 +2284,38 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
   --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
+  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationColor);
+  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationLine);
+  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-display-lg--hover--TextDecorationStyle);
+  --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-display-lg--hover--TextUnderlineOffset);
+  --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationColor);
+  --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationLine);
+  --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-display-lg--m-clicked--TextDecorationStyle);
+  --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-display-lg--m-clicked--TextUnderlineOffset);
+  --pf-v6-c-button--m-primary--Color: var(--pf-v6-c-button--m-display-lg--m-primary--Color);
+  --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--BackgroundColor);
+  --pf-v6-c-button--m-primary__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary__icon--Color);
+  --pf-v6-c-button--m-primary--hover--Color: var(--pf-v6-c-button--m-display-lg--m-primary--hover--Color);
+  --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--hover--BackgroundColor);
+  --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary--hover__icon--Color);
+  --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--Color);
+  --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--BackgroundColor);
+  --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked__icon--Color);
+  --pf-v6-c-button--m-secondary--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--Color);
+  --pf-v6-c-button--m-secondary--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--BorderColor);
+  --pf-v6-c-button--m-secondary__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary__icon--Color);
+  --pf-v6-c-button--m-secondary--hover--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--hover--Color);
+  --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--hover--BorderColor);
+  --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--hover__icon--Color);
+  --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked--Color);
+  --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked--BorderColor);
+  --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-v6-c-button--m-display-lg--m-secondary--m-clicked__icon--Color);
+  --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-v6-c-button--m-display-lg--m-tertiary--hover--BorderColor);
+  --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-v6-c-button--m-display-lg--m-tertiary--m-clicked--BorderColor);
+}
+.pf-v6-c-button.pf-m-display-lg.pf-m-primary {
+  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-primary--hover--TextDecorationColor);
+  --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-display-lg--m-primary--m-clicked--TextDecorationColor);
 }
 .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
   display: grid;
@@ -2331,6 +2399,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
+  text-underline-offset: var(--pf-v6-c-button--hover--TextUnderlineOffset);
   outline-offset: var(--pf-t--global--focus-ring--position--offset);
 }
 .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
@@ -2339,6 +2408,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
   --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
+  text-decoration-line: var(--pf-v6-c-button--m-clicked--TextDecorationLine);
+  text-decoration-style: var(--pf-v6-c-button--m-clicked--TextDecorationStyle);
+  text-decoration-color: var(--pf-v6-c-button--m-clicked--TextDecorationColor);
+  text-underline-offset: var(--pf-v6-c-button--m-clicked--TextUnderlineOffset);
 }
 .pf-v6-c-button:active {
   background-size: 100% 100%;

package/docs/components/AboutModalBox/examples/AboutModalBox.md

@@ -25,7 +25,19 @@ cssPrefix: pf-v6-c-about-modal-box
       aria-label="Close dialog"
     >
       <span class="pf-v6-c-button__icon">
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <svg
+          class="pf-v6-svg"
+          viewBox="0 0 352 512"
+          fill="currentColor"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+        >
+          <path
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+          />
+        </svg>
       </span>
     </button>
   </div>