@patternfly/patternfly 6.0.0-alpha.61 → 6.0.0-alpha.63

package/components/Card/card.scss

@@ -1,170 +1,135 @@
 // @debug $card; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$card} {
-  --#{$card}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$card}--BoxShadow: var(--#{$pf-global}--BoxShadow--sm);
-  --#{$card}--first-child--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$card}--child--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$card}--child--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$card}--child--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$card}--c-divider--child--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$card}__title--not--last-child--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$card}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
-  --#{$card}__title-text--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$card}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$card}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$card}__body--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$card}__footer--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$card}__actions--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$card}__actions--Gap: var(--#{$pf-global}--spacer--sm);
-  --#{$card}__actions--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$card}__actions--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-
-  // Expandable
+:where(:root),
+:where(.#{$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}__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--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--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-global}--spacer--xs);
+  --#{$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-global}--spacer--md) * -1);
+  --#{$card}__header-toggle--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
   --#{$card}__header-toggle-icon--Transition: var(--#{$pf-global}--Transition);
   --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;
 
 
   // Selectable/Clickable
-  --#{$card}--m-selectable--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$card}--m-selectable--BorderWidth: var(--#{$card}--BorderWidth);
 
   // Selected state (checked) of selectable card
-  --#{$card}--m-selectable--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$card}--m-selectable--m-selected--BorderColor: var(--#{$pf-global}--active-color--100);
+  --#{$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);
 
   // Hover on selectable card
-  --#{$card}--m-selectable--hover--BackgroundColor: var(--#{$pf-global}--palette--black-150);
-  --#{$card}--m-selectable--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
+  --#{$card}--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover);
 
   // Focus on selectable card (label)
-  --#{$card}--m-selectable--focus--BackgroundColor: var(--#{$pf-global}--palette--blue-100);
-  --#{$card}--m-selectable--focus--BorderColor: var(--#{$pf-global}--active-color--100);
+  --#{$card}--m-selectable--focus--BorderColor: var(--pf-t--global--border--color--hover);
+  --#{$card}--m-selectable--focus--BorderWidth: var(--pf-t--global--border--width--box--hover);
 
   // Focus on a selected card (label)
-  --#{$card}--m-selectable--m-selected--focus--BorderColor: var(--#{$pf-global}--active-color--100);
+  --#{$card}--m-selectable--m-selected--focus--BorderColor: var(--pf-t--global--border--color--clicked);
+  --#{$card}--m-selectable--m-selected--focus--BorderWidth: var(--pf-t--global--border--width--box--clicked);
 
   // Disabled state
-  --#{$card}--m-selectable--m-disabled--BackgroundColor: var(--#{$pf-global}--palette--black-100);
-  --#{$card}--m-selectable--m-disabled--BorderColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$card}--m-selectable--m-disabled--BoxShadow: var(--#{$pf-global}--BoxShadow--sm);
+  --#{$card}--m-selectable--m-disabled__title-text--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$card}--m-selectable--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$card}--m-selectable--m-disabled__footer--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$card}--m-selectable--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$card}--m-selectable--m-disabled--BorderColor: transparent;
 
   // Selectable AND Clickable
-  // Hover on selectable AND clickable card
-  --#{$card}--m-selectable--m-clickable--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$card}--m-selectable--m-clickable--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--sm);
-
-  // Selected selectable AND clickable card
-  --#{$card}--m-selectable--m-clickable--m-selected--BorderColor: transparent;
-  --#{$card}--m-selectable--m-clickable--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-
   // Clicked (pf-m-current) selectable AND clickable card
-  --#{$card}--m-selectable--m-clickable--m-current--BackgroundColor: var(--#{$pf-global}--palette--black-150);
-  --#{$card}--m-selectable--m-clickable--m-current--BorderColor: var(--#{$pf-global}--active-color--100);
-
-  // Hoverable/selectable raised (deprecated)
-  --#{$card}--m-hoverable-raised--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$card}--m-hoverable-raised--hover--before--BackgroundColor: var(--#{$pf-global}--active-color--400);
-  --#{$card}--m-selectable-raised--before--Right: 0;
-  --#{$card}--m-selectable-raised--before--Bottom: 0;
-  --#{$card}--m-selectable-raised--before--Left: 0;
-  --#{$card}--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--#{$card}--m-flat--BorderWidth));
-  --#{$card}--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--#{$card}--m-flat--BorderWidth));
-  --#{$card}--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--#{$card}--m-flat--BorderWidth));
-  --#{$card}--m-selectable-raised--before--Height: var(--#{$pf-global}--BorderWidth--xl);
-  --#{$card}--m-selectable-raised--before--BackgroundColor: transparent;
-  --#{$card}--m-selectable-raised--before--Transition: none;
-  --#{$card}--m-selectable-raised--before--ScaleY: 1;
-  --#{$card}--m-selectable-raised--before--TranslateY: 0;
-  --#{$card}--m-selectable-raised--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$card}--m-selectable-raised--hover--before--BackgroundColor: var(--#{$pf-global}--active-color--400);
-  --#{$card}--m-selectable-raised--focus--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$card}--m-selectable-raised--focus--before--BackgroundColor: var(--#{$pf-global}--active-color--400);
-  --#{$card}--m-selectable-raised--active--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$card}--m-selectable-raised--active--before--BackgroundColor: var(--#{$pf-global}--active-color--400);
-  --#{$card}--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--#{$pf-global}--active-color--100);
-  --#{$card}--m-selectable-raised--m-selected-raised--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
-  --#{$card}--m-selectable-raised--m-selected-raised--TranslateY--base: #{pf-size-prem(-8px)};
-  --#{$card}--m-selectable-raised--m-selected-raised--TranslateY: var(--#{$card}--m-selectable-raised--m-selected-raised--TranslateY--base);
-  --#{$card}--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--#{$card}--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--#{$card}--m-flat--BorderWidth));
-  --#{$card}--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--#{$card}--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--#{$card}--m-rounded--BorderRadius));
-  --#{$card}--m-selectable-raised--m-selected-raised--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$card}--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
-  --#{$card}--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
-  --#{$card}--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--#{$card}--m-selectable-raised--m-selected-raised--TranslateY) * -1);
-  --#{$card}--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
-  --#{$card}--m-non-selectable-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-200);
-  --#{$card}--m-non-selectable-raised--before--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
-  --#{$card}--m-non-selectable-raised--before--ScaleY: 2;
-  --#{$card}--m-flat--m-non-selectable-raised--before--BorderColor: var(--#{$pf-global}--disabled-color--200);
+  --#{$card}--m-selectable--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
+  --#{$card}--m-selectable--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
 
   // Compact
-  --#{$card}--m-compact__body--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$card}--m-compact__footer--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$card}--m-compact--first-child--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$card}--m-compact--child--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$card}--m-compact--child--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$card}--m-compact--child--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$card}--m-compact--c-divider--child--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$card}--m-compact__title--not--last-child--PaddingBottom: var(--#{$pf-global}--spacer--sm);
+  --#{$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);
 
   // Display large
-  --#{$card}--m-display-lg__title-text--FontSize: var(--#{$pf-global}--FontSize--xl);
-  --#{$card}--m-display-lg--first-child--PaddingTop: var(--#{$pf-global}--spacer--xl);
-  --#{$card}--m-display-lg--child--PaddingRight: var(--#{$pf-global}--spacer--xl);
-  --#{$card}--m-display-lg--child--PaddingBottom: var(--#{$pf-global}--spacer--xl);
-  --#{$card}--m-display-lg--child--PaddingLeft: var(--#{$pf-global}--spacer--xl);
-  --#{$card}--m-display-lg--c-divider--child--PaddingTop: var(--#{$pf-global}--spacer--xl);
-  --#{$card}--m-display-lg__title--not--last-child--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-
-  // Flat
-  --#{$card}--m-flat--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$card}--m-flat--BorderColor: var(--#{$pf-global}--BorderColor--100);
-
-  // Rounded
-  --#{$card}--m-rounded--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
+  --#{$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);
+
+  // Secondary
+  --#{$card}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$card}--m-secondary--BorderColor: transparent;
 
   // Full height
   --#{$card}--m-full-height--Height: 100%;
 
-  // No box shadow
-  --#{$card}--m-plain--BoxShadow: none;
+  // Plain - no border or background color
+  --#{$card}--m-plain--BorderColor: transparent;
   --#{$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-global}--spacer--xs);
-
-  // Card input (selectable raised)
-  --#{$card}__input--focus--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$card}__input--focus--BorderColor: var(--#{$pf-global}--primary-color--100);
+  --#{$card}__header--m-toggle-right--toggle--MarginLeft: var(--pf-t--global--spacer--xs);
+}
 
+.#{$card} {
   position: relative;
   display: flex;
   flex-direction: column;
+  overflow: auto;
   background-color: var(--#{$card}--BackgroundColor);
-  box-shadow: var(--#{$card}--BoxShadow);
+  border: var(--#{$card}--BorderColor) var(--#{$card}--BorderStyle) var(--#{$card}--BorderWidth);
+  border-radius: var(--#{$card}--BorderRadius);
 
-  // SELECTABLE CARDS, CLICKABLE CARDS
+  // SELECTABLE CARDS
   &.pf-m-selectable {
     // disables the gap since these have an empty label
-    // TODO - update/refactor selectable check/radio to use the standalone varioation with a <label> on the outer parent component class element
     .#{$card}__selectable-actions :is(.#{$check}, .#{$radio}) {
       gap: 0;
     }
   }
 
+  // SELECTABLE or CLICKABLE CARDS
   &.pf-m-selectable,
   &.pf-m-clickable {
     isolation: isolate;
-    box-shadow: none; // box-shadow will come from the input's ::before instead of the card so remove this so there's isn't a double shadow
+    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
   }
 
   // stylelint-disable selector-max-class
-  // Cards that are selectable AND clickable
+  // Cards that are BOTH SELECTABLE AND CLICKABLE
   &.pf-m-selectable.pf-m-clickable {
     .#{$card}__selectable-actions .#{$check}__label,
     .#{$card}__selectable-actions .#{$radio}__label {
@@ -177,110 +142,38 @@
       }
     }
 
+    // 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}--BackgroundColor: unset;
-      --#{$card}--BorderColor: unset;
+      --#{$card}--BackgroundColor: revert;
+      --#{$card}--BorderColor: revert;
     }
 
-    // Card is selected
+    // 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,
     &.pf-m-selected {
-      --#{$card}--BackgroundColor: var(--#{$card}--m-selectable--m-clickable--m-selected--BackgroundColor);
-      --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-clickable--m-selected--BorderColor);
+      --#{$card}--BorderColor: revert;
+      --#{$card}--m-selectable--BorderWidth: revert;
     }
 
-    // Card is clicked
+    // SELECTABLE and CLICKABLE card is clicked
     &.pf-m-current {
-      --#{$card}--BackgroundColor: var(--#{$card}--m-selectable--m-clickable--m-current--BackgroundColor);
       --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-clickable--m-current--BorderColor);
-
-      // a selected card is clicked
-      &.pf-m-selected,
-      & .#{$card}__selectable-actions .#{$check}__input:where(:checked) ~ .#{$check}__label,
-      & .#{$card}__selectable-actions .#{$radio}__input:where(:checked) ~ .#{$radio}__label {
-          --#{$card}--BackgroundColor: var(--#{$card}--m-selectable--m-clickable--m-current--BackgroundColor);
-        --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-clickable--m-current--BorderColor);
-      }
+      --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-clickable--m-current--BorderWidth);
     }
 
-    // Disabled card
+    // SELECTABLE and CLICKABLE but DISABLED card
     .#{$card}__selectable-actions .#{$check}__input:where(:disabled) ~ .#{$check}__label,
     .#{$card}__selectable-actions .#{$radio}__input:where(:disabled) ~ .#{$radio}__label,
     &.pf-m-disabled {
       --#{$card}--BackgroundColor: var(--#{$card}--m-selectable--m-disabled--BackgroundColor);
-      --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-disabled--BorderColor);
-      --#{$card}--BoxShadow: var(--#{$card}--m-selectable--m-disabled--BoxShadow);
     }
   }
   // stylelint-enable selector-max-class
 
-  // RAISED CARDS
-  &.pf-m-hoverable-raised,
-  &.pf-m-selectable-raised,
-  &.pf-m-non-selectable-raised {
-    &::before {
-      position: absolute;
-      inset-block-end: var(--#{$card}--m-selectable-raised--before--Bottom);
-      inset-inline-start: var(--#{$card}--m-selectable-raised--before--Left);
-      inset-inline-end: var(--#{$card}--m-selectable-raised--before--Right);
-      height: var(--#{$card}--m-selectable-raised--before--Height);
-      content: "";
-      background-color: var(--#{$card}--m-selectable-raised--before--BackgroundColor);
-      transition: var(--#{$card}--m-selectable-raised--before--Transition);
-      transform: translateY(var(--#{$card}--m-selectable-raised--before--TranslateY)) scaleY(var(--#{$card}--m-selectable-raised--before--ScaleY));
-      transform-origin: center bottom; // used for scaleY() to make the before scale upward
-    }
-  }
-
-  &.pf-m-hoverable-raised {
-    &:hover {
-      --#{$card}--BoxShadow: var(--#{$card}--m-hoverable-raised--hover--BoxShadow);
-      --#{$card}--m-selectable-raised--before--BackgroundColor: var(--#{$card}--m-hoverable-raised--hover--before--BackgroundColor);
-    }
-  }
-
-  &.pf-m-selectable-raised {
-    cursor: pointer;
-
-    &:hover {
-      --#{$card}--BoxShadow: var(--#{$card}--m-selectable-raised--hover--BoxShadow);
-      --#{$card}--m-selectable-raised--before--BackgroundColor: var(--#{$card}--m-selectable-raised--hover--before--BackgroundColor);
-    }
-
-    &:focus {
-      --#{$card}--BoxShadow: var(--#{$card}--m-selectable-raised--focus--BoxShadow);
-      --#{$card}--m-selectable-raised--before--BackgroundColor: var(--#{$card}--m-selectable-raised--focus--before--BackgroundColor);
-    }
-
-    &:active {
-      --#{$card}--BoxShadow: var(--#{$card}--m-selectable-raised--active--BoxShadow);
-      --#{$card}--m-selectable-raised--before--BackgroundColor: var(--#{$card}--m-selectable-raised--active--before--BackgroundColor);
-    }
-
-    &.pf-m-selected-raised {
-      --#{$card}--m-selectable-raised--before--BackgroundColor: var(--#{$card}--m-selectable-raised--m-selected-raised--before--BackgroundColor);
-      --#{$card}--m-selectable-raised--before--Transition: var(--#{$card}--m-selectable-raised--m-selected-raised--before--Transition);
-      --#{$card}--m-selectable-raised--before--TranslateY: var(--#{$card}--m-selectable-raised--m-selected-raised--before--TranslateY); // moves before down when selected - same amount and speed as the selected card moves up
-      --#{$card}--m-selectable-raised--before--ScaleY: var(--#{$card}--m-selectable-raised--m-selected-raised--before--ScaleY); // causes the before to grow in height - more performant than transitioning height
-
-      z-index: var(--#{$card}--m-selectable-raised--m-selected-raised--ZIndex); // allows elements (ie, dropdowns) from this card to appear on other cards since the transform creates a new stacking context
-      box-shadow: var(--#{$card}--m-selectable-raised--m-selected-raised--BoxShadow);
-      transition: var(--#{$card}--m-selectable-raised--m-selected-raised--Transition);
-      transform: translateY(var(--#{$card}--m-selectable-raised--m-selected-raised--TranslateY)); // moves card up when selected
-    }
-  }
-
-  &.pf-m-non-selectable-raised {
-    --#{$card}--BackgroundColor: var(--#{$card}--m-non-selectable-raised--BackgroundColor);
-    --#{$card}--BoxShadow: none;
-    --#{$card}--m-flat--BorderColor: var(--#{$card}--m-flat--m-non-selectable-raised--before--BorderColor);
-    --#{$card}--m-selectable-raised--before--BackgroundColor: var(--#{$card}--m-non-selectable-raised--before--BackgroundColor);
-    --#{$card}--m-selectable-raised--before--ScaleY: var(--#{$card}--m-non-selectable-raised--before--ScaleY);
-  }
-
   &.pf-m-compact {
+    --#{$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);
@@ -293,6 +186,8 @@
 
   &.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);
@@ -301,27 +196,16 @@
     --#{$card}__title--not--last-child--PaddingBottom: var(--#{$card}--m-display-lg__title--not--last-child--PaddingBottom);
   }
 
-  &.pf-m-flat {
-    --#{$card}--BoxShadow: none;
-    --#{$card}--m-selectable-raised--before--Right: var(--#{$card}--m-flat--m-selectable-raised--before--Right);
-    --#{$card}--m-selectable-raised--before--Bottom: var(--#{$card}--m-flat--m-selectable-raised--before--Bottom);
-    --#{$card}--m-selectable-raised--before--Left: var(--#{$card}--m-flat--m-selectable-raised--before--Left);
-    --#{$card}--m-selectable-raised--m-selected-raised--TranslateY: var(--#{$card}--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
-
-    border: var(--#{$card}--m-flat--BorderWidth) solid var(--#{$card}--m-flat--BorderColor);
+  &.pf-m-secondary {
+    --#{$card}--BorderColor: var(--#{$card}--m-secondary--BorderColor);
+    --#{$card}--BackgroundColor: var(--#{$card}--m-secondary--BackgroundColor);
   }
 
   &.pf-m-plain {
-    --#{$card}--BoxShadow: var(--#{$card}--m-plain--BoxShadow);
+    --#{$card}--BorderColor: var(--#{$card}--m-plain--BorderColor);
     --#{$card}--BackgroundColor: var(--#{$card}--m-plain--BackgroundColor);
   }
 
-  &.pf-m-rounded {
-    --#{$card}--m-selectable-raised--m-selected-raised--TranslateY: var(--#{$card}--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
-
-    border-radius: var(--#{$card}--m-rounded--BorderRadius);
-  }
-
   &.pf-m-expanded {
     .#{$card}__header-toggle-icon {
       transform: rotate(var(--#{$card}--m-expanded__header-toggle-icon--Rotate));
@@ -388,6 +272,7 @@
   font-size: var(--#{$card}__title-text--FontSize);
   font-weight: var(--#{$card}__title-text--FontWeight);
   line-height: var(--#{$card}__title-text--LineHeight);
+  color: var(--#{$card}__title-text--Color);
 }
 
 .#{$card}__actions {
@@ -427,43 +312,45 @@
     content: '';
     background-color: var(--#{$card}--BackgroundColor, transparent);
     border: var(--#{$card}--m-selectable--BorderWidth) solid var(--#{$card}--BorderColor, transparent);
-    box-shadow: var(--#{$card}--BoxShadow, none);
+    border-radius: var(--#{$card}--BorderRadius);
   }
 
   &:hover {
-    --#{$card}--BackgroundColor: var(--#{$card}--m-selectable--hover--BackgroundColor);
-    --#{$card}--BoxShadow: var(--#{$card}--m-selectable--hover--BoxShadow);
+    --#{$card}--BorderColor: var(--#{$card}--m-selectable--hover--BorderColor);
   }
 }
 
-// Selected card
+// Selected card (checked)
 .#{$card}__selectable-actions .#{$check}__input:where(:checked) ~ .#{$check}__label,
 .#{$card}__selectable-actions .#{$radio}__input:where(:checked) ~ .#{$radio}__label,
 .#{$card}.pf-m-selected {
   --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-selected--BorderColor);
-  --#{$card}--BackgroundColor: var(--#{$card}--m-selectable--m-selected--BackgroundColor);
+  --#{$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 (label)
+// 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}--BorderColor: var(--#{$card}--m-selectable--focus--BorderColor);
-  --#{$card}--BackgroundColor: var(--#{$card}--m-selectable--focus--BackgroundColor);
+  --#{$card}--BorderWidth: var(--#{$card}--m-selectable--focus--BorderWidth);
 }
 
-// Focus on a selected card
+// 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}--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}.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);
+  --#{$card}__footer--Color: var(--#{$card}--m-selectable--m-disabled__footer--Color);
   --#{$card}--BackgroundColor: var(--#{$card}--m-selectable--m-disabled--BackgroundColor);
   --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-disabled--BorderColor);
-  --#{$card}--BoxShadow: var(--#{$card}--m-selectable--m-disabled--BoxShadow);
 }
 
 .#{$card}__header,
@@ -484,6 +371,11 @@
   &:not(:last-child) {
     padding-block-end: var(--#{$card}__title--not--last-child--PaddingBottom);
   }
+
+  // Normal disabled button color won't show on the disabled card
+  button.pf-m-inline.pf-m-disabled {
+    --#{$button}--disabled--Color: var(--#{$card}--c-button--disabled--Color);
+  }
 }
 
 .#{$card}__expandable-content {
@@ -496,26 +388,10 @@
 
 .#{$card}__body {
   font-size: var(--#{$card}__body--FontSize);
+  color: var(--#{$card}__body--Color);
 }
 
 .#{$card}__footer {
   font-size: var(--#{$card}__footer--FontSize);
-}
-
-// for the selectable raised
-.#{$card}__sr-input:focus + .#{$card}::after {
-  position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  content: "";
-  border: var(--#{$card}__input--focus--BorderWidth) solid var(--#{$card}__input--focus--BorderColor);
-}
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/card";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-card;
+  color: var(--#{$card}__footer--Color);
 }