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

package/components/Card/card.scss

@@ -1,44 +1,47 @@
-// @debug $card; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$card}) {
+@include pf-root($card) {
   --#{$card}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$card}--BorderColor: var(--pf-t--global--border--color--default);
   --#{$card}--BorderStyle: solid;
   --#{$card}--BorderWidth: var(--pf-t--global--border--width--box--default);
   --#{$card}--BorderRadius: var(--pf-t--global--border--radius--medium);
-  --#{$card}--first-child--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$card}--child--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$card}--child--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --#{$card}--child--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --#{$card}--c-divider--child--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$card}__title--not--last-child--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$card}--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$card}--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$card}--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --#{$card}--child--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --#{$card}--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$card}__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --#{$card}__title-text--Color: var(--pf-t--global--text--color--regular);
   --#{$card}__title-text--FontFamily: var(--pf-t--global--font--family--heading);
-  --#{$card}__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
-  --#{$card}__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$card}__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$card}__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --#{$card}__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$card}--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$card}__body--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$card}__footer--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$card}__footer--Color: var(--pf-t--global--text--color--subtle);
-  --#{$card}__actions--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$card}__actions--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$card}__actions--Gap: var(--pf-t--global--spacer--sm);
-  --#{$card}__actions--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1); // TODO
-  --#{$card}__actions--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1); // TODO 
-
-  // Expandable 
-  --#{$card}__header-toggle--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$card}__header-toggle--MarginRight: var(--pf-t--global--spacer--xs);
-  --#{$card}__header-toggle--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$card}__header-toggle--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
-  --#{$card}__header-toggle-icon--Transition: var(--#{$pf-global}--Transition);
+  --#{$card}__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$card}__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+
+  // Expandable
+  --#{$card}__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$card}__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
+  --#{$card}__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$card}__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
+  --#{$card}__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$card}__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
   --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;
 
-
   // Selectable/Clickable
   --#{$card}--m-selectable--BorderWidth: var(--#{$card}--BorderWidth);
 
+  // Clickable clicked
+  --#{$card}--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
+  --#{$card}--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
+
   // Selected state (checked) of selectable card
   --#{$card}--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
   --#{$card}--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked);
@@ -70,23 +73,23 @@
   --#{$card}--m-compact__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
   --#{$card}--m-compact__body--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$card}--m-compact__footer--FontSize: var(--pf-t--global--font--size--body--sm);
-  --#{$card}--m-compact--first-child--PaddingTop: var(--pf-t--global--spacer--md);    
-  --#{$card}--m-compact--child--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$card}--m-compact--child--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$card}--m-compact--child--PaddingLeft: var(--pf-t--global--spacer--md);
-  --#{$card}--m-compact--c-divider--child--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$card}--m-compact__title--not--last-child--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$card}--m-compact--first-child--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$card}--m-compact--child--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$card}--m-compact--child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$card}--m-compact--child--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$card}--m-compact--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$card}--m-compact__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
 
   // Display large
   --#{$card}--m-display-lg__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
   --#{$card}--m-display-lg__body--FontSize: var(--pf-t--global--font--size--body--lg);
   --#{$card}--m-display-lg__footer--FontSize: var(--pf-t--global--font--size--body--default);
-  --#{$card}--m-display-lg--first-child--PaddingTop: var(--pf-t--global--spacer--xl);
-  --#{$card}--m-display-lg--child--PaddingRight: var(--pf-t--global--spacer--xl);
-  --#{$card}--m-display-lg--child--PaddingBottom: var(--pf-t--global--spacer--xl);
-  --#{$card}--m-display-lg--child--PaddingLeft: var(--pf-t--global--spacer--xl);
-  --#{$card}--m-display-lg--c-divider--child--PaddingTop: var(--pf-t--global--spacer--xl);
-  --#{$card}--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --#{$card}--m-display-lg--first-child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+  --#{$card}--m-display-lg--child--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --#{$card}--m-display-lg--child--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --#{$card}--m-display-lg--child--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+  --#{$card}--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+  --#{$card}--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
 
   // Secondary
   --#{$card}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -100,8 +103,8 @@
   --#{$card}--m-plain--BackgroundColor: transparent;
 
   // Toggle right
-  --#{$card}__header--m-toggle-right--toggle--MarginRight: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$card}__header--m-toggle-right--toggle--MarginLeft: var(--pf-t--global--spacer--xs);
+  --#{$card}__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
+  --#{$card}__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
 }
 
 .#{$card} {
@@ -110,9 +113,18 @@
   flex-direction: column;
   overflow: auto;
   background-color: var(--#{$card}--BackgroundColor);
-  border: var(--#{$card}--BorderColor) var(--#{$card}--BorderStyle) var(--#{$card}--BorderWidth);
+  border: 0;
   border-radius: var(--#{$card}--BorderRadius);
 
+  &::before {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    border: var(--#{$card}--BorderColor) var(--#{$card}--BorderStyle) var(--#{$card}--BorderWidth);
+    border-radius: inherit;
+  }
+
   // SELECTABLE CARDS
   &.pf-m-selectable {
     // disables the gap since these have an empty label
@@ -125,14 +137,24 @@
   &.pf-m-selectable,
   &.pf-m-clickable {
     isolation: isolate;
-    border: none; // border will come from the input's ::before instead of the card so remove this so there's isn't a double border
+
+    &::before {
+      border: none; // border will come from the input's ::before instead of the card so remove this so there's isn't a double border
+    }
+  }
+
+  // CLICKABLE is clicked
+  &.pf-m-current {
+    --#{$card}--BorderColor: var(--#{$card}--m-clickable--m-current--BorderColor);
+    --#{$card}--BorderWidth: var(--#{$card}--m-clickable--m-current--BorderWidth);
+    --#{$card}--m-selectable--hover--BorderColor: var(--#{$card}--m-clickable--m-current--BorderColor);
+    --#{$card}--m-selectable--focus--BorderColor: var(--#{$card}--m-clickable--m-current--BorderColor);
   }
 
   // stylelint-disable selector-max-class
   // Cards that are BOTH SELECTABLE AND CLICKABLE
   &.pf-m-selectable.pf-m-clickable {
-    .#{$card}__selectable-actions .#{$check}__label,
-    .#{$card}__selectable-actions .#{$radio}__label {
+    .#{$card}__selectable-actions :is(.#{$check}__label, .#{$radio}__label) {
       position: unset;
 
       &::before {
@@ -143,15 +165,13 @@
     }
 
     // When SELECTABLE and CLICKABLE card is focused, don't show change of background or border on the card
-    .#{$card}__selectable-actions .#{$check}__input:where(:focus-visible) ~ .#{$check}__label,
-    .#{$card}__selectable-actions .#{$radio}__input:where(:focus-visible) ~ .#{$radio}__label {
+    .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:focus-visible) ~ :is(.#{$check}__label, .#{$radio}__label) {
       --#{$card}--BackgroundColor: revert;
       --#{$card}--BorderColor: revert;
     }
 
     // SELECTABLE and CLICKABLE card is selected (Check box checked or marked .pf-m-selected)
-    .#{$card}__selectable-actions .#{$check}__input:where(:checked) ~ .#{$check}__label,
-    .#{$card}__selectable-actions .#{$radio}__input:where(:checked) ~ .#{$radio}__label,
+    .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:checked) ~ :is(.#{$check}__label, .#{$radio}__label),
     &.pf-m-selected {
       --#{$card}--BorderColor: revert;
       --#{$card}--m-selectable--BorderWidth: revert;
@@ -164,8 +184,7 @@
     }
 
     // SELECTABLE and CLICKABLE but DISABLED card
-    .#{$card}__selectable-actions .#{$check}__input:where(:disabled) ~ .#{$check}__label,
-    .#{$card}__selectable-actions .#{$radio}__input:where(:disabled) ~ .#{$radio}__label,
+    .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:disabled) ~ :is(.#{$check}__label, .#{$radio}__label),
     &.pf-m-disabled {
       --#{$card}--BackgroundColor: var(--#{$card}--m-selectable--m-disabled--BackgroundColor);
     }
@@ -176,24 +195,24 @@
     --#{$card}__title-text--FontSize: var(--#{$card}--m-compact__title-text--FontSize);
     --#{$card}__body--FontSize: var(--#{$card}--m-compact__body--FontSize);
     --#{$card}__footer--FontSize: var(--#{$card}--m-compact__footer--FontSize);
-    --#{$card}--first-child--PaddingTop: var(--#{$card}--m-compact--first-child--PaddingTop);
-    --#{$card}--child--PaddingRight: var(--#{$card}--m-compact--child--PaddingRight);
-    --#{$card}--child--PaddingBottom: var(--#{$card}--m-compact--child--PaddingBottom);
-    --#{$card}--child--PaddingLeft: var(--#{$card}--m-compact--child--PaddingLeft);
-    --#{$card}--c-divider--child--PaddingTop: var(--#{$card}--m-compact--c-divider--child--PaddingTop);
-    --#{$card}__title--not--last-child--PaddingBottom: var(--#{$card}--m-compact__title--not--last-child--PaddingBottom);
+    --#{$card}--first-child--PaddingBlockStart: var(--#{$card}--m-compact--first-child--PaddingBlockStart);
+    --#{$card}--child--PaddingInlineEnd: var(--#{$card}--m-compact--child--PaddingInlineEnd);
+    --#{$card}--child--PaddingBlockEnd: var(--#{$card}--m-compact--child--PaddingBlockEnd);
+    --#{$card}--child--PaddingInlineStart: var(--#{$card}--m-compact--child--PaddingInlineStart);
+    --#{$card}--c-divider--child--PaddingBlockStart: var(--#{$card}--m-compact--c-divider--child--PaddingBlockStart);
+    --#{$card}__title--not--last-child--PaddingBlockEnd: var(--#{$card}--m-compact__title--not--last-child--PaddingBlockEnd);
   }
 
   &.pf-m-display-lg {
     --#{$card}__title-text--FontSize: var(--#{$card}--m-display-lg__title-text--FontSize);
     --#{$card}__body--FontSize: var(--#{$card}--m-display-lg__body--FontSize);
     --#{$card}__footer--FontSize: var(--#{$card}--m-display-lg__footer--FontSize);
-    --#{$card}--first-child--PaddingTop: var(--#{$card}--m-display-lg--first-child--PaddingTop);
-    --#{$card}--child--PaddingRight: var(--#{$card}--m-display-lg--child--PaddingRight);
-    --#{$card}--child--PaddingBottom: var(--#{$card}--m-display-lg--child--PaddingBottom);
-    --#{$card}--child--PaddingLeft: var(--#{$card}--m-display-lg--child--PaddingLeft);
-    --#{$card}--c-divider--child--PaddingTop: var(--#{$card}--m-display-lg--c-divider--child--PaddingTop);
-    --#{$card}__title--not--last-child--PaddingBottom: var(--#{$card}--m-display-lg__title--not--last-child--PaddingBottom);
+    --#{$card}--first-child--PaddingBlockStart: var(--#{$card}--m-display-lg--first-child--PaddingBlockStart);
+    --#{$card}--child--PaddingInlineEnd: var(--#{$card}--m-display-lg--child--PaddingInlineEnd);
+    --#{$card}--child--PaddingBlockEnd: var(--#{$card}--m-display-lg--child--PaddingBlockEnd);
+    --#{$card}--child--PaddingInlineStart: var(--#{$card}--m-display-lg--child--PaddingInlineStart);
+    --#{$card}--c-divider--child--PaddingBlockStart: var(--#{$card}--m-display-lg--c-divider--child--PaddingBlockStart);
+    --#{$card}__title--not--last-child--PaddingBlockEnd: var(--#{$card}--m-display-lg__title--not--last-child--PaddingBlockEnd);
   }
 
   &.pf-m-secondary {
@@ -221,7 +240,7 @@
     & + .#{$card}__title,
     & + .#{$card}__body,
     & + .#{$card}__footer {
-      padding-block-start: var(--#{$card}--c-divider--child--PaddingTop);
+      padding-block-start: var(--#{$card}--c-divider--child--PaddingBlockStart);
     }
   }
 }
@@ -232,15 +251,15 @@
   align-items: center;
 
   .#{$card}__title {
-    --#{$card}--first-child--PaddingTop: 0;
-    --#{$card}__title--not--last-child--PaddingBottom: 0;
+    --#{$card}--first-child--PaddingBlockStart: 0;
+    --#{$card}__title--not--last-child--PaddingBlockEnd: 0;
 
     padding: 0;
   }
 
   &.pf-m-toggle-right {
-    --#{$card}__header-toggle--MarginRight: var(--#{$card}__header--m-toggle-right--toggle--MarginRight);
-    --#{$card}__header-toggle--MarginLeft: var(--#{$card}__header--m-toggle-right--toggle--MarginLeft);
+    --#{$card}__header-toggle--MarginInlineEnd: var(--#{$card}__header--m-toggle-right--toggle--MarginInlineEnd);
+    --#{$card}__header-toggle--MarginInlineStart: var(--#{$card}__header--m-toggle-right--toggle--MarginInlineStart);
 
     .#{$card}__header-toggle {
       order: 2;
@@ -249,22 +268,22 @@
 }
 
 .#{$card}__header-main {
-  flex: 1;
+  flex-grow: 1;
 }
 
 .#{$card}__header-toggle {
   align-self: flex-start;
-  margin-block-start: var(--#{$card}__header-toggle--MarginTop);
-  margin-block-end: var(--#{$card}__header-toggle--MarginBottom);
-  margin-inline-start: var(--#{$card}__header-toggle--MarginLeft);
-  margin-inline-end: var(--#{$card}__header-toggle--MarginRight);
+  margin-block-start: var(--#{$card}__header-toggle--MarginBlockStart);
+  margin-block-end: var(--#{$card}__header-toggle--MarginBlockEnd);
+  margin-inline-start: var(--#{$card}__header-toggle--MarginInlineStart);
+  margin-inline-end: var(--#{$card}__header-toggle--MarginInlineEnd);
 }
 
 .#{$card}__header-toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
-  transition: var(--#{$card}__header-toggle-icon--Transition);
+  transition: transform var(--#{$card}__header-toggle-icon--TransitionDuration) var(--#{$card}__header-toggle-icon--TransitionTimingFunction);
 }
 
 .#{$card}__title-text {
@@ -281,9 +300,9 @@
   align-items: center;
   align-self: flex-start;
   order: 1;
-  padding-inline-start: var(--#{$card}__actions--PaddingLeft);
-  margin-block-start: var(--#{$card}__actions--MarginTop);
-  margin-block-end: var(--#{$card}__actions--MarginBottom);
+  padding-inline-start: var(--#{$card}__actions--PaddingInlineStart);
+  margin-block-start: var(--#{$card}__actions--MarginBlockStart);
+  margin-block-end: var(--#{$card}__actions--MarginBlockEnd);
   margin-inline-start: auto;
 
   + .#{$card}__title,
@@ -293,14 +312,13 @@
   }
 
   &.pf-m-no-offset {
-    --#{$card}__actions--MarginTop: 0;
-    --#{$card}__actions--MarginBottom: 0;
+    --#{$card}__actions--MarginBlockStart: 0;
+    --#{$card}__actions--MarginBlockEnd: 0;
   }
 }
 
 // Labels are used to handle states of selectable and clickable cards
-.#{$card}__selectable-actions .#{$check}__label,
-.#{$card}__selectable-actions .#{$radio}__label {
+.#{$card}__selectable-actions :is(.#{$check}__label, .#{$radio}__label, .#{$card}__clickable-action) {
   position: absolute;
   inset: 0;
   justify-self: auto;
@@ -322,30 +340,27 @@
 }
 
 // Selected card (checked)
-.#{$card}__selectable-actions .#{$check}__input:where(:checked) ~ .#{$check}__label,
-.#{$card}__selectable-actions .#{$radio}__input:where(:checked) ~ .#{$radio}__label,
+.#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:checked) ~ :is(.#{$radio}__label, .#{$check}__label),
 .#{$card}.pf-m-selected {
   --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-selected--BorderColor);
   --#{$card}--m-selectable--BorderWidth: var(--#{$card}--m-selectable--m-selected--BorderWidth); // this line used to be just BorderWidth, not m-selectable
 }
 
 // Focus on the card (focus on label but not checked)
-.#{$card}__selectable-actions .#{$check}__input:where(:focus-visible) ~ .#{$check}__label,
-.#{$card}__selectable-actions .#{$radio}__input:where(:focus-visible) ~ .#{$radio}__label {
+.#{$card}__selectable-actions .#{$card}__clickable-action:where(:focus-visible),
+.#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input, .#{$card}__clickable-action):where(:focus-visible) ~ :is(.#{$check}__label, .#{$radio}__label) {
   --#{$card}--BorderColor: var(--#{$card}--m-selectable--focus--BorderColor);
   --#{$card}--BorderWidth: var(--#{$card}--m-selectable--focus--BorderWidth);
 }
 
 // Focus on a selected card (focus + checked)
-.#{$card}__selectable-actions .#{$check}__input:where(:focus-visible):where(:checked) ~ .#{$check}__label,
-.#{$card}__selectable-actions .#{$radio}__input:where(:focus-visible):where(:checked) ~ .#{$radio}__label {
+.#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:focus-visible):where(:checked) ~ :is(.#{$check}__label, .#{$radio}__label) {
   --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-selected--focus--BorderColor);
   --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-selected--focus--BorderWidth);
 }
 
 // Disabled card
-.#{$card}__selectable-actions .#{$check}__input:where(:disabled) ~ .#{$check}__label,
-.#{$card}__selectable-actions .#{$radio}__input:where(:disabled) ~ .#{$radio}__label,
+.#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:disabled) ~ :is(.#{$check}__label, .#{$radio}__label),
 .#{$card}.pf-m-disabled {
   --#{$card}__title-text--Color: var(--#{$card}--m-selectable--m-disabled__title-text--Color);
   --#{$card}__body--Color: var(--#{$card}--m-selectable--m-disabled__body--Color);
@@ -354,33 +369,44 @@
   --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-disabled--BorderColor);
 }
 
+.#{$card}__clickable-action {
+  background: none;
+  border: 0;
+  outline: 0;
+
+  &:disabled,
+  &.pf-m-disabled {
+    pointer-events: none;
+  }
+}
+
 .#{$card}__header,
 .#{$card}__title,
 .#{$card}__body,
 .#{$card}__footer {
-  padding-block-end: var(--#{$card}--child--PaddingBottom);
-  padding-inline-start: var(--#{$card}--child--PaddingLeft);
-  padding-inline-end: var(--#{$card}--child--PaddingRight);
+  padding-block-end: var(--#{$card}--child--PaddingBlockEnd);
+  padding-inline-start: var(--#{$card}--child--PaddingInlineStart);
+  padding-inline-end: var(--#{$card}--child--PaddingInlineEnd);
 
   &:first-child {
-    padding-block-start: var(--#{$card}--first-child--PaddingTop);
+    padding-block-start: var(--#{$card}--first-child--PaddingBlockStart);
   }
 }
 
 .#{$card}__header,
 .#{$card}__title {
   &:not(:last-child) {
-    padding-block-end: var(--#{$card}__title--not--last-child--PaddingBottom);
+    padding-block-end: var(--#{$card}__title--not--last-child--PaddingBlockEnd);
   }
 
   // Normal disabled button color won't show on the disabled card
-  button.pf-m-inline.pf-m-disabled {
+  .#{$button}.pf-m-inline:disabled {
     --#{$button}--disabled--Color: var(--#{$card}--c-button--disabled--Color);
   }
 }
 
 .#{$card}__expandable-content {
-  --#{$card}--first-child--PaddingTop: 0;
+  --#{$card}--first-child--PaddingBlockStart: 0;
 }
 
 .#{$card}__body:not(.pf-m-no-fill) {

package/components/Check/check.css

@@ -2,15 +2,15 @@
 .pf-v6-c-check {
   --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
-  --pf-v6-c-check--Height: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
+  --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
   --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
   --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v6-c-check__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
   --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
@@ -25,7 +25,7 @@
 .pf-v6-c-check.pf-m-standalone {
   display: inline-grid;
   grid-template-columns: auto;
-  height: var(--pf-v6-c-check--Height);
+  min-height: var(--pf-v6-c-check--MinHeight);
 }
 .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
   align-self: center;
@@ -73,7 +73,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 }
 
 .pf-v6-c-check__label-required {
-  margin-inline-start: var(--pf-v6-c-check__label-required--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
   font-size: var(--pf-v6-c-check__label-required--FontSize);
   color: var(--pf-v6-c-check__label-required--Color);
 }

package/components/Check/check.scss

@@ -1,22 +1,21 @@
-// @debug $check; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$check} {
+@include pf-root($check) {
   --#{$check}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --#{$check}--AccentColor: var(--pf-t--global--color--brand--default);
-  --#{$check}--Height: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));
+  --#{$check}--MinHeight: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));
 
   // TODO: update to `--#{$check}--FontSize` `--#{$check}--LineHeight`
   --#{$check}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
   --#{$check}__label--Color: var(--pf-t--global--text--color--regular);
-  --#{$check}__label--FontWeight: var(--pf-t--global--font--weight--body);
+  --#{$check}__label--FontWeight: var(--pf-t--global--font--weight--body--default);
   --#{$check}__label--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$check}__label--LineHeight: var(--pf-t--global--font--line-height--body);
   --#{$check}__description--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$check}__description--Color: var(--pf-t--global--text--color--subtle);
 
   // Required checkbox
-  --#{$check}__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
+  --#{$check}__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
   --#{$check}__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$check}__label-required--Color: var(--pf-t--global--color--status--danger--default);
 
@@ -34,7 +33,7 @@
   &.pf-m-standalone {
     display: inline-grid;
     grid-template-columns: auto;
-    height: var(--#{$check}--Height);
+    min-height: var(--#{$check}--MinHeight);
 
     .#{$check}__input {
       align-self: center;
@@ -88,7 +87,7 @@
 }
 
 .#{$check}__label-required {
-  margin-inline-start: var(--#{$check}__label-required--MarginLeft);
+  margin-inline-start: var(--#{$check}__label-required--MarginInlineStart);
   font-size: var(--#{$check}__label-required--FontSize);
   color: var(--#{$check}__label-required--Color);
 }

package/components/ClipboardCopy/clipboard-copy.css

@@ -1,33 +1,30 @@
-:where(:root),
-:where(.pf-v6-c-clipboard-copy) {
+:root,
+.pf-v6-c-clipboard-copy {
   --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-v6-c-clipboard-copy__expandable-content--MarginTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-clipboard-copy__expandable-content--BorderTopWidth: var(--pf-t--global--border--width--control--default);
-  --pf-v6-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-t--global--border--width--control--default);
-  --pf-v6-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
-  --pf-v6-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy--m-inline--PaddingTop: 0;
-  --pf-v6-c-clipboard-copy--m-inline--PaddingBottom: 0;
-  --pf-v6-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
+  --pf-v6-c-clipboard-copy__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
   --pf-v6-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-t--global--spacer--xs));
-  --pf-v6-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-t--global--spacer--xs));
-  --pf-v6-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-t--global--spacer--xs);
 }
 
 .pf-v6-c-clipboard-copy.pf-m-expanded .pf-v6-c-clipboard-copy__toggle-icon {
@@ -35,9 +32,8 @@
 }
 .pf-v6-c-clipboard-copy.pf-m-inline {
   display: inline;
-  padding-block-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingTop);
-  padding-block-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingLeft);
+  padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);
   white-space: nowrap;
   background-color: var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor);
 }
@@ -61,19 +57,19 @@
 }
 
 .pf-v6-c-clipboard-copy__expandable-content {
-  padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingTop);
-  padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingRight);
-  margin-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--MarginTop);
+  padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd);
+  margin-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart);
   word-wrap: break-word;
   background-color: var(--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor);
   background-clip: padding-box;
   border: solid var(--pf-v6-c-clipboard-copy__expandable-content--BorderColor);
-  border-block-start-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderTopWidth);
-  border-block-end-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderBottomWidth);
-  border-inline-start-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderLeftWidth);
-  border-inline-end-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderRightWidth);
+  border-block-start-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth);
+  border-block-end-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth);
+  border-inline-start-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth);
+  border-inline-end-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth);
   border-radius: var(--pf-v6-c-clipboard-copy__expandable-content--BorderRadius);
   box-shadow: var(--pf-v6-c-clipboard-copy__expandable-content--BoxShadow);
 }
@@ -92,15 +88,11 @@
 
 .pf-v6-c-clipboard-copy__actions {
   display: inline-flex;
+  gap: var(--pf-v6-c-clipboard-copy__actions--Gap);
+  margin-inline-start: var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart);
 }
 
-.pf-v6-c-clipboard-copy__actions-item {
-  margin-block-start: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingTop));
-  margin-block-end: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBottom));
-}
-.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button {
-  --pf-v6-c-button--PaddingTop: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingTop);
-  --pf-v6-c-button--PaddingRight: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingRight);
-  --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBottom);
-  --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingLeft);
+.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain {
+  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
+  --pf-v6-c-button--m-plain--hover__icon--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
 }