@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

package/components/Button/button.scss

@@ -5,7 +5,7 @@
   --#{$button}--AlignItems: baseline;
   --#{$button}--JustifyContent: center;
   --#{$button}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
-  --#{$button}--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--PaddingBlockStart) + var(--#{$button}--PaddingBlockEnd));
+  --#{$button}--MinWidth: calc(1lh + var(--#{$button}--PaddingBlockStart) + var(--#{$button}--PaddingBlockEnd));
   --#{$button}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
   --#{$button}--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
   --#{$button}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
@@ -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);
@@ -131,10 +136,17 @@
   --#{$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--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
   --#{$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--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
+  --#{$button}--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
   --#{$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--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+  --#{$button}--m-link--m-inline--TransitionProperty: color, text-underline-offset;
+  --#{$button}--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
+  --#{$button}--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
   --#{$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);
@@ -144,13 +156,11 @@
   --#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$button}--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
   --#{$button}--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
-  --#{$button}--m-link--m-inline--TextDecorationColor: currentcolor;
   --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --#{$button}--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
-  --#{$button}--m-link--m-inline--hover--TextDecorationColor: currentcolor;
 
   // Plain
-  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --#{$button}--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --#{$button}--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
@@ -188,12 +198,12 @@
   --#{$button}--m-plain--m-no-padding--border--offset: calc(#{pf-size-prem(2px)} * -1);
 
   // Control
-  --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
   --#{$button}--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
   --#{$button}--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
   --#{$button}--m-control--Color: var(--pf-t--global--text--color--regular);
   --#{$button}--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --#{$button}--m-control--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-control--BorderColor: var(--pf-t--global--border--color--control--default);
   --#{$button}--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$button}--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--m-control--hover--Color: var(--pf-t--global--text--color--regular);
@@ -210,7 +220,7 @@
   --#{$button}--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
 
   // Stateful
-  --#{$button}--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$button}--m-stateful--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --#{$button}--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
   --#{$button}--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
   --#{$button}--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
@@ -218,7 +228,7 @@
 
   // Read
   --#{$button}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --#{$button}--m-read--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-read--BorderColor: var(--pf-t--global--border--color--control--default);
   --#{$button}--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --#{$button}--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
   --#{$button}--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -268,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);
@@ -371,16 +417,10 @@
   --#{$button}--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
   --#{$button}--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
   --#{$button}--m-hamburger__icon--m-expand--ScaleX: -1;
+  --#{$button}--m-hamburger__icon--m-collapse--ScaleX: 1;
 
   // Circle
-  --#{$button}--m-circle--ScaleX: 1.29;
-  --#{$button}--m-circle--ScaleY: 1.29;
   --#{$button}--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --#{$button}--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
-  --#{$button}--m-circle--PaddingBlockStart: var(--#{$button}--m-circle--Padding--base);
-  --#{$button}--m-circle--PaddingInlineEnd: 0;
-  --#{$button}--m-circle--PaddingBlockEnd: var(--#{$button}--m-circle--Padding--base);
-  --#{$button}--m-circle--PaddingInlineStart: 0;
 }
 
 .#{$button} {
@@ -389,7 +429,7 @@
   gap: var(--#{$button}--Gap);
   align-items: var(--#{$button}--AlignItems);
   justify-content: var(--#{$button}--JustifyContent);
-  min-width: var(--#{$button}--MinWidth);
+  min-width: var(--#{$button}--MinWidth, revert);
   padding-block-start: var(--#{$button}--PaddingBlockStart);
   padding-block-end: var(--#{$button}--PaddingBlockEnd);
   padding-inline-start: var(--#{$button}--PaddingInlineStart);
@@ -530,12 +570,13 @@
       --#{$button}--PaddingInlineEnd: var(--#{$button}--m-link--m-inline--PaddingInlineEnd);
       --#{$button}--PaddingBlockEnd: var(--#{$button}--m-link--m-inline--PaddingBlockEnd);
       --#{$button}--PaddingInlineStart: var(--#{$button}--m-link--m-inline--PaddingInlineStart);
+      --#{$button}--TransitionDuration: var(--#{$button}--m-link--m-inline--TransitionDuration);
+      --#{$button}--TransitionTimingFunction: var(--#{$button}--m-link--m-inline--TransitionTimingFunction);
+      --#{$button}--TransitionProperty: var(--#{$button}--m-link--m-inline--TransitionProperty);
       --#{$button}--BackgroundColor: transparent;
       --#{$button}__progress--InsetInlineStart: var(--#{$button}--m-link--m-inline__progress--InsetInlineStart);
       --#{$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;
@@ -544,7 +585,10 @@
       --#{$button}--m-link--Color: var(--#{$button}--m-link--m-inline--Color);
       --#{$button}--m-link__icon--Color: var(--#{$button}--m-link--m-inline__icon--Color);
       --#{$button}--TextDecorationColor: var(--#{$button}--m-link--m-inline--TextDecorationColor);
+      --#{$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;
@@ -552,9 +596,15 @@
       --#{$button}--m-clicked--BorderWidth: 0;
 
       text-align: start;
+      text-underline-offset: var(--#{$button}--m-link--m-inline--TextUnderlineOffset);
       white-space: normal;
       background: transparent; // don't show the ripple effect for inline links
       outline-offset: #{pf-size-prem(2px)};
+
+      &:hover,
+      &:focus {
+        --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--hover--TextUnderlineOffset);
+      }
     }
 
     &.pf-m-danger {
@@ -624,6 +674,54 @@
     --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-control--m-small--PaddingInlineStart);
   }
 
+  // Icon buttons
+  &.pf-m-plain {
+    --#{$button}--BorderWidth: var(--#{$button}--m-plain--BorderWidth);
+    --#{$button}--hover--BorderColor: var(--#{$button}--m-plain--hover--BorderColor);
+    --#{$button}--hover--BorderWidth: var(--#{$button}--m-plain--hover--BorderWidth);
+    --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-plain--m-clicked--BorderColor);
+    --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-plain--m-clicked--BorderWidth);
+    --#{$button}--BorderColor: var(--#{$button}--m-plain--BorderColor);
+    --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
+    --#{$button}--Color: var(--#{$button}--m-plain--Color);
+    --#{$button}__icon--Color: var(--#{$button}--m-plain__icon--Color);
+    --#{$button}--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
+    --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
+    --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
+    --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
+    --#{$button}--hover--Color: var(--#{$button}--m-plain--hover--Color);
+    --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
+    --#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
+    --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
+    --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
+    --#{$button}--disabled__icon--Color: var(--#{$button}--m-plain--disabled__icon--Color);
+    --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
+    --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-small--PaddingInlineEnd);
+    --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-small--PaddingInlineStart);
+    --#{$button}--m-stateful--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
+    --#{$button}--m-stateful--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
+    --#{$button}--m-read--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
+    --#{$button}--m-read--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
+    --#{$button}--m-read--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
+
+    &.pf-m-no-padding {
+      --#{$button}__icon--Color: var(--#{$button}--m-plain--m-no-padding__icon--Color);
+      --#{$button}--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--BackgroundColor);
+      --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--hover--BackgroundColor);
+      --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor);
+      --#{$button}--PaddingBlockStart: var(--#{$button}--m-plain--m-no-padding--PaddingBlockStart);
+      --#{$button}--PaddingBlockEnd: var(--#{$button}--m-plain--m-no-padding--PaddingBlockEnd);
+      --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--PaddingInlineEnd);
+      --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);
+      --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd);
+      --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart);
+      --#{$button}--border--offset: var(--#{$button}--m-plain--m-no-padding--border--offset);
+
+      min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
+      background: var(--#{$button}--BackgroundColor); // override the ripple background
+    }
+  }
+
   // Stateful
   &.pf-m-stateful {
     --#{$button}--BorderRadius: var(--#{$button}--m-stateful--BorderRadius);
@@ -632,7 +730,7 @@
     --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-stateful--m-small--PaddingInlineEnd);
     --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-stateful--m-small--PaddingInlineStart);
   }
-
+  
   // Read
   &.pf-m-read {
     --#{$button}--BackgroundColor: var(--#{$button}--m-read--BackgroundColor);
@@ -669,49 +767,6 @@
     --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-attention--m-clicked__icon--Color);
   }
 
-  // Icon buttons
-  &.pf-m-plain {
-    --#{$button}--BorderWidth: var(--#{$button}--m-plain--BorderWidth);
-    --#{$button}--hover--BorderColor: var(--#{$button}--m-plain--hover--BorderColor);
-    --#{$button}--hover--BorderWidth: var(--#{$button}--m-plain--hover--BorderWidth);
-    --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-plain--m-clicked--BorderColor);
-    --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-plain--m-clicked--BorderWidth);
-    --#{$button}--BorderColor: var(--#{$button}--m-plain--BorderColor);
-    --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
-    --#{$button}--Color: var(--#{$button}--m-plain--Color);
-    --#{$button}__icon--Color: var(--#{$button}--m-plain__icon--Color);
-    --#{$button}--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
-    --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
-    --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
-    --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
-    --#{$button}--hover--Color: var(--#{$button}--m-plain--hover--Color);
-    --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
-    --#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
-    --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
-    --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
-    --#{$button}--disabled__icon--Color: var(--#{$button}--m-plain--disabled__icon--Color);
-    --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
-    --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-small--PaddingInlineEnd);
-    --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-small--PaddingInlineStart);
-
-    &.pf-m-no-padding {
-      --#{$button}__icon--Color: var(--#{$button}--m-plain--m-no-padding__icon--Color);
-      --#{$button}--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--BackgroundColor);
-      --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--hover--BackgroundColor);
-      --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor);
-      --#{$button}--PaddingBlockStart: var(--#{$button}--m-plain--m-no-padding--PaddingBlockStart);
-      --#{$button}--PaddingBlockEnd: var(--#{$button}--m-plain--m-no-padding--PaddingBlockEnd);
-      --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--PaddingInlineEnd);
-      --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);
-      --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd);
-      --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart);
-      --#{$button}--border--offset: var(--#{$button}--m-plain--m-no-padding--border--offset);
-
-      min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
-      background: var(--#{$button}--BackgroundColor); // override the ripple background
-    }
-  }
-
   &.pf-m-block {
     --#{$button}--Display: var(--#{$button}--m-block--Display);
  
@@ -731,6 +786,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 {
@@ -775,6 +863,11 @@
     --#{$button}--hover__icon--TransitionDuration: 0s;
     --#{$button}--hover__icon--TransitionProperty: scale;
 
+    @include pf-v6-rtl {
+      --#{$button}--m-hamburger__icon--m-expand--ScaleX: 1;
+      --#{$button}--m-hamburger__icon--m-collapse--ScaleX: -1;
+    }
+
     &.pf-m-expand {
       @include pf-v6-hamburger;
     }
@@ -786,14 +879,8 @@
 
   &.pf-m-circle {
     --#{$button}--BorderRadius: var(--#{$button}--m-circle--BorderRadius);
-    --#{$button}--PaddingBlockStart: var(--#{$button}--m-circle--PaddingBlockStart);
-    --#{$button}--PaddingInlineEnd: var(--#{$button}--m-circle--PaddingInlineEnd);
-    --#{$button}--PaddingBlockEnd: var(--#{$button}--m-circle--PaddingBlockEnd);
-    --#{$button}--PaddingInlineStart: var(--#{$button}--m-circle--PaddingInlineStart);
 
-    & .pf-v6-c-button__icon {
-      scale: var(--#{$button}--m-circle--ScaleX) var(--#{$button}--m-circle--ScaleY);
-    }
+    padding-inline: 0;
   }
 
   &:hover,
@@ -816,6 +903,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);
   }
 
@@ -826,6 +914,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 {
@@ -891,6 +984,29 @@
     animation-duration: var(--#{$button}--m-notify__icon--AnimationDuration--notify);
     animation-timing-function: var(--#{$button}--m-notify__icon--AnimationTimingFunction--notify);
   }
+
+  &.pf-m-docked {
+    justify-content: flex-start;
+    width: 100%;
+
+    @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
+      justify-content: center;
+
+      .#{$button}__text {
+        display: none;
+      }
+    }
+  }
+
+  @at-root :is(.#{$page}__dock, .#{$compass}__dock).pf-m-text-expanded &.pf-m-docked,
+  &.pf-m-text-expanded {
+    justify-content: flex-start;
+    width: 100%;
+
+    .#{$button}__text {
+      display: revert;
+    }
+  }
 }
 
 .#{$button}__icon {

package/components/CalendarMonth/calendar-month.css

@@ -87,13 +87,14 @@
   margin-block-end: var(--pf-v6-c-calendar-month__header--MarginBlockEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
+  scale: -1 1;
+}
+
 .pf-v6-c-calendar-month__header-nav-control {
   margin-inline-start: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
-  scale: -1 1;
-}
 
 .pf-v6-c-calendar-month__header-month {
   flex-grow: 1;

package/components/Card/card.css

@@ -1,6 +1,6 @@
 .pf-v6-c-card {
   --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle);
   --pf-v6-c-card--BorderStyle: solid;
   --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -32,8 +32,9 @@
   --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
-  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
-  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
+  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
+  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
   --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -70,13 +71,18 @@
   --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-card--m-full-height--Height: 100%;
   --pf-v6-c-card--m-plain--BorderColor: transparent;
   --pf-v6-c-card--m-plain--BackgroundColor: transparent;
   --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
+  --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
+  --pf-v6-c-card--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
+  --pf-v6-c-card--m-glass--BorderWidth: var(--pf-t--global--border--width--glass--default);
+  --pf-v6-c-card--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
+  --pf-v6-c-card--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --pf-v6-c-card--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
 }
 
 .pf-v6-c-card {
@@ -96,10 +102,18 @@
   border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
   border-radius: inherit;
 }
+:where(.pf-v6-theme-glass) .pf-v6-c-card.pf-m-glass {
+  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
+  backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
+  box-shadow: var(--pf-v6-c-card--m-glass--BoxShadow);
+}
 .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
   gap: 0;
 }
 .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
   isolation: isolate;
 }
 .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
@@ -134,12 +148,16 @@
 .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
 }
-.pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
+.pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) {
+  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor);
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor);
+}
+
+.pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
   --pf-v6-c-card__actions--PaddingInlineStart: 0;
   --pf-v6-c-card__actions--MarginBlockStart: 0;
   --pf-v6-c-card__actions--MarginBlockEnd: 0;
 }
-
 .pf-v6-c-card.pf-m-compact {
   --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
   --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -163,13 +181,24 @@
   --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd);
 }
 .pf-v6-c-card.pf-m-secondary {
-  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
-  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
 }
+.pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
+}
 .pf-v6-c-card.pf-m-plain {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
+  backdrop-filter: none;
+}
+.pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
+}
+.pf-v6-c-card.pf-m-plain.pf-m-selectable.pf-m-current, .pf-v6-c-card.pf-m-plain.pf-m-clickable.pf-m-current {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
 }
 .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
   transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
@@ -207,12 +236,12 @@
   flex-wrap: wrap;
   row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
 }
-.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
-  margin-inline-start: 0;
-}
 .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
   margin-inline-end: auto;
 }
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  margin-inline-start: 0;
+}
 
 .pf-v6-c-card__header-main {
   flex-grow: 1;
@@ -226,15 +255,16 @@
   margin-inline-end: var(--pf-v6-c-card__header-toggle--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-card__header-toggle-icon {
   display: inline-block;
   transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
   transition-property: transform;
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
-  scale: -1 1;
-}
 
 .pf-v6-c-card__title-text {
   font-family: var(--pf-v6-c-card__title-text--FontFamily);
@@ -245,6 +275,12 @@
   overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
 }
 
+.pf-v6-c-card__subtitle {
+  padding-block-start: var(--pf-t--global--spacer--sm);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
 .pf-v6-c-card__actions {
   display: flex;
   gap: var(--pf-v6-c-card__actions--Gap);