@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41

package/components/Banner/banner.scss

@@ -23,45 +23,41 @@
   --pf-c-banner--link--disabled--TextDecoration: none;
 
   // modifier variables
-  --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200);
-  --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
-  --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100);
-  --pf-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100);
+  --pf-c-banner--m-blue--BackgroundColor: var(--pf-global--palette--blue-200);
+  --pf-c-banner--m-red--BackgroundColor: var(--pf-global--palette--red-100);
+  --pf-c-banner--m-green--BackgroundColor: var(--pf-global--palette--green-500);
+  --pf-c-banner--m-gold--BackgroundColor: var(--pf-global--palette--gold-400);
   --pf-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md);
   --pf-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
 
   @include pf-t-dark;
   @include pf-text-overflow;
 
-  padding: var(--pf-c-banner--PaddingTop) var(--pf-c-banner--PaddingRight) var(--pf-c-banner--PaddingBottom) var(--pf-c-banner--PaddingLeft);
   flex-shrink: 0;
+  padding: var(--pf-c-banner--PaddingTop) var(--pf-c-banner--PaddingRight) var(--pf-c-banner--PaddingBottom) var(--pf-c-banner--PaddingLeft);
   font-size: var(--pf-c-banner--FontSize);
   color: var(--pf-c-banner--Color);
   white-space: nowrap;
   background-color: var(--pf-c-banner--BackgroundColor);
 
-  &.pf-m-info,
   &.pf-m-blue {
     @include pf-t-light;
 
-    --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
+    --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-blue--BackgroundColor);
   }
 
-  &.pf-m-danger,
   &.pf-m-red {
-    --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
+    --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-red--BackgroundColor);
   }
 
-  &.pf-m-success,
   &.pf-m-green {
-    --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
+    --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-green--BackgroundColor);
   }
 
-  &.pf-m-warning,
   &.pf-m-gold {
     @include pf-t-light;
 
-    --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
+    --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-gold--BackgroundColor);
   }
 
   &.pf-m-sticky {

package/components/Breadcrumb/breadcrumb.css

@@ -10,6 +10,7 @@
   --pf-c-breadcrumb__link--hover--Color: var(--pf-global--link--Color--hover);
   --pf-c-breadcrumb__link--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
   --pf-c-breadcrumb__link--m-current--Color: var(--pf-global--Color--100);
+  --pf-c-breadcrumb__link--BackgroundColor: transparent;
   --pf-c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-c-breadcrumb__item--MarginRight) * -1);
@@ -52,6 +53,7 @@
   color: var(--pf-c-breadcrumb__link--Color);
   text-decoration: var(--pf-c-breadcrumb__link--TextDecoration);
   word-break: break-word;
+  background-color: var(--pf-c-breadcrumb__link--BackgroundColor);
 }
 .pf-c-breadcrumb__link:hover {
   --pf-c-breadcrumb__link--Color: var(--pf-c-breadcrumb__link--hover--Color);

package/components/Breadcrumb/breadcrumb.scss

@@ -15,6 +15,7 @@
   --pf-c-breadcrumb__link--hover--Color: var(--pf-global--link--Color--hover);
   --pf-c-breadcrumb__link--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
   --pf-c-breadcrumb__link--m-current--Color: var(--pf-global--Color--100);
+  --pf-c-breadcrumb__link--BackgroundColor: transparent;
 
   // Heading
   --pf-c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--sm);
@@ -69,6 +70,7 @@
   color: var(--pf-c-breadcrumb__link--Color);
   text-decoration: var(--pf-c-breadcrumb__link--TextDecoration);
   word-break: break-word;
+  background-color: var(--pf-c-breadcrumb__link--BackgroundColor);
 
   &:hover {
     --pf-c-breadcrumb__link--Color: var(--pf-c-breadcrumb__link--hover--Color);

package/components/CalendarMonth/calendar-month.css

@@ -16,7 +16,7 @@
   --pf-c-calendar-month--PaddingLeft: var(--pf-global--spacer--lg);
   --pf-c-calendar-month--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
-  --pf-c-calendar-month__header-year--Width: 8ch;
+  --pf-c-calendar-month__header-year--Width: 8.5ch;
   --pf-c-calendar-month__header-nav-control--MarginRight: 0;
   --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
   --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0;
@@ -193,9 +193,9 @@
   box-shadow: var(--pf-c-calendar-month__date--focus--BoxShadow);
 }
 .pf-c-calendar-month__date:disabled {
-  pointer-events: none;
   --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
   --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
+  pointer-events: none;
 }
 
 :where(.pf-theme-dark) .pf-c-calendar-month {

package/components/CalendarMonth/calendar-month.scss

@@ -8,7 +8,7 @@
 
   // header
   --pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
-  --pf-c-calendar-month__header-year--Width: 8ch;
+  --pf-c-calendar-month__header-year--Width: 8.5ch;
   --pf-c-calendar-month__header-nav-control--MarginRight: 0;
   --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
   --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0; // remove in breaking change
@@ -214,10 +214,10 @@
   }
 
   &:disabled {
-    pointer-events: none;
-
     --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
     --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
+
+    pointer-events: none;
   }
 }
 

package/components/Card/card.css

@@ -6,27 +6,40 @@
   --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
   --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
   --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
-  --pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-  --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-card__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-card__title-text--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-card__title-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-card__title-text--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
+  --pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
   --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
   --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
   --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
-  --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-card--m-selectable--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-card--m-selectable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-card--m-selectable--m-selected--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-card--m-selectable--hover--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
-  --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
+  --pf-c-card--m-selectable--focus--BackgroundColor: var(--pf-global--palette--blue-100);
+  --pf-c-card--m-selectable--focus--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-global--palette--black-100);
+  --pf-c-card--m-selectable--m-disabled--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-global--BoxShadow--sm);
+  --pf-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm);
+  --pf-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-global--palette--black-150);
+  --pf-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-global--active-color--100);
   --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
   --pf-c-card--m-selectable-raised--before--Right: 0;
@@ -69,7 +82,7 @@
   --pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-card--m-display-lg__title-text--FontSize: var(--pf-global--FontSize--xl);
   --pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl);
   --pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl);
   --pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl);
@@ -84,44 +97,51 @@
   --pf-c-card--m-plain--BackgroundColor: transparent;
   --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
   --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
+  position: relative;
   display: flex;
   flex-direction: column;
   background-color: var(--pf-c-card--BackgroundColor);
   box-shadow: var(--pf-c-card--BoxShadow);
 }
-.pf-c-card.pf-m-hoverable:hover {
-  box-shadow: var(--pf-c-card--m-hoverable--hover--BoxShadow);
+.pf-c-card.pf-m-selectable, .pf-c-card.pf-m-clickable {
+  isolation: isolate;
+  box-shadow: none;
 }
-.pf-c-card.pf-m-selectable {
-  position: relative;
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__label,
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__label {
+  position: unset;
+}
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__label::before,
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__label::before {
+  position: absolute;
+  inset: 0;
   cursor: pointer;
 }
-.pf-c-card.pf-m-selectable:hover {
-  box-shadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
+  --pf-c-card--BackgroundColor: unset;
+  --pf-c-card--BorderColor: unset;
 }
-.pf-c-card.pf-m-selectable:focus {
-  box-shadow: var(--pf-c-card--m-selectable--focus--BoxShadow);
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-selected {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor);
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BorderColor);
 }
-.pf-c-card.pf-m-selectable:active {
-  box-shadow: var(--pf-c-card--m-selectable--active--BoxShadow);
+.pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
 }
-.pf-c-card.pf-m-selectable.pf-m-selected {
-  box-shadow: var(--pf-c-card--m-selectable--m-selected--BoxShadow);
+.pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current.pf-m-selected, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
 }
-.pf-c-card.pf-m-selectable.pf-m-selected::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  height: var(--pf-c-card--m-selectable--m-selected--before--Height);
-  content: "";
-  background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
-}
-.pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
-  position: relative;
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
+  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
 }
 .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
   position: absolute;
@@ -182,7 +202,7 @@
   --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);
 }
 .pf-c-card.pf-m-display-lg {
-  --pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);
+  --pf-c-card__title-text--FontSize: var(--pf-c-card--m-display-lg__title-text--FontSize);
   --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);
   --pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);
   --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);
@@ -230,13 +250,11 @@
   --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
   --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
 }
-.pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
-  --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
-}
 .pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
   order: 2;
 }
-.pf-c-card__header.pf-m-toggle-right .pf-c-card__title {
+
+.pf-c-card__header-main {
   flex: 1;
 }
 
@@ -250,22 +268,21 @@
   transition: var(--pf-c-card__header-toggle-icon--Transition);
 }
 
-.pf-c-card__title {
-  font-family: var(--pf-c-card__title--FontFamily);
-  font-size: var(--pf-c-card__title--FontSize);
-  font-weight: var(--pf-c-card__title--FontWeight);
+.pf-c-card__title-text {
+  font-family: var(--pf-c-card__title-text--FontFamily);
+  font-size: var(--pf-c-card__title-text--FontSize);
+  font-weight: var(--pf-c-card__title-text--FontWeight);
+  line-height: var(--pf-c-card__title-text--LineHeight);
 }
 
 .pf-c-card__actions {
   display: flex;
+  gap: var(--pf-c-card__actions--Gap);
   align-items: center;
   align-self: flex-start;
   order: 1;
   padding-left: var(--pf-c-card__actions--PaddingLeft);
-  margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
-}
-.pf-c-card__actions > * + * {
-  margin-left: var(--pf-c-card__actions--child--MarginLeft);
+  margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
 }
 .pf-c-card__actions + .pf-c-card__title,
 .pf-c-card__actions + .pf-c-card__body,
@@ -273,8 +290,56 @@
   padding: 0;
 }
 .pf-c-card__actions.pf-m-no-offset {
-  --pf-c-card__header-toggle--MarginTop: 0;
-  --pf-c-card__header-toggle--MarginBottom: 0;
+  --pf-c-card__actions--MarginTop: 0;
+  --pf-c-card__actions--MarginBottom: 0;
+}
+
+.pf-c-card__selectable-actions .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__label {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
+.pf-c-card__selectable-actions .pf-c-check__label::before,
+.pf-c-card__selectable-actions .pf-c-radio__label::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  content: "";
+  background-color: var(--pf-c-card--BackgroundColor, transparent);
+  border: var(--pf-c-card--m-selectable--BorderWidth) solid var(--pf-c-card--BorderColor, transparent);
+  box-shadow: var(--pf-c-card--BoxShadow, none);
+}
+.pf-c-card__selectable-actions .pf-c-check__label:hover,
+.pf-c-card__selectable-actions .pf-c-radio__label:hover {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--hover--BackgroundColor);
+  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
+}
+
+.pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label,
+.pf-c-card.pf-m-selected {
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--BorderColor);
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-selected--BackgroundColor);
+}
+
+.pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--focus--BorderColor);
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--focus--BackgroundColor);
+}
+
+.pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible):where(:checked) ~ .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-c-radio__label {
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--focus--BorderColor);
+}
+
+.pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label,
+.pf-c-card.pf-m-disabled {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
+  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
 }
 
 .pf-c-card__header,