@patternfly/patternfly 6.0.0-alpha.60 → 6.0.0-alpha.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/components/Card/card.css +97 -194
  2. package/components/Card/card.scss +114 -238
  3. package/docs/components/Card/examples/Card.md +422 -111
  4. package/package.json +2 -2
  5. package/patternfly-no-globals.css +97 -198
  6. package/patternfly-theme-dark-unversioned.css +97 -198
  7. package/patternfly.css +97 -198
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
  10. package/components/Card/themes/dark/card.scss +0 -20
package/patternfly.css CHANGED
@@ -8705,119 +8705,95 @@ button.pf-v5-c-breadcrumb__link {
8705
8705
  --pf-v5-c-calendar-month__date--Color: var(--pf-v5-global--primary-color--400);
8706
8706
  }
8707
8707
 
8708
- .pf-v5-c-card {
8709
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
8710
- --pf-v5-c-card--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
8711
- --pf-v5-c-card--first-child--PaddingTop: var(--pf-v5-global--spacer--lg);
8712
- --pf-v5-c-card--child--PaddingRight: var(--pf-v5-global--spacer--lg);
8713
- --pf-v5-c-card--child--PaddingBottom: var(--pf-v5-global--spacer--lg);
8714
- --pf-v5-c-card--child--PaddingLeft: var(--pf-v5-global--spacer--lg);
8715
- --pf-v5-c-card--c-divider--child--PaddingTop: var(--pf-v5-global--spacer--lg);
8716
- --pf-v5-c-card__title--not--last-child--PaddingBottom: var(--pf-v5-global--spacer--md);
8717
- --pf-v5-c-card__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
8718
- --pf-v5-c-card__title-text--FontSize: var(--pf-v5-global--FontSize--md);
8719
- --pf-v5-c-card__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
8720
- --pf-v5-c-card__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
8721
- --pf-v5-c-card__body--FontSize: var(--pf-v5-global--FontSize--md);
8722
- --pf-v5-c-card__footer--FontSize: var(--pf-v5-global--FontSize--md);
8723
- --pf-v5-c-card__actions--PaddingLeft: var(--pf-v5-global--spacer--md);
8724
- --pf-v5-c-card__actions--Gap: var(--pf-v5-global--spacer--sm);
8708
+ :where(:root),
8709
+ :where(.pf-v5-c-card) {
8710
+ --pf-v5-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8711
+ --pf-v5-c-card--BorderColor: var(--pf-t--global--border--color--default);
8712
+ --pf-v5-c-card--BorderStyle: solid;
8713
+ --pf-v5-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
8714
+ --pf-v5-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
8715
+ --pf-v5-c-card--first-child--PaddingTop: var(--pf-t--global--spacer--lg);
8716
+ --pf-v5-c-card--child--PaddingRight: var(--pf-t--global--spacer--lg);
8717
+ --pf-v5-c-card--child--PaddingBottom: var(--pf-t--global--spacer--lg);
8718
+ --pf-v5-c-card--child--PaddingLeft: var(--pf-t--global--spacer--lg);
8719
+ --pf-v5-c-card--c-divider--child--PaddingTop: var(--pf-t--global--spacer--lg);
8720
+ --pf-v5-c-card__title--not--last-child--PaddingBottom: var(--pf-t--global--spacer--md);
8721
+ --pf-v5-c-card__title-text--Color: var(--pf-t--global--text--color--regular);
8722
+ --pf-v5-c-card__title-text--FontFamily: var(--pf-t--global--font--family--heading);
8723
+ --pf-v5-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
8724
+ --pf-v5-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
8725
+ --pf-v5-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
8726
+ --pf-v5-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
8727
+ --pf-v5-c-card__body--FontSize: var(--pf-t--global--font--size--body--default);
8728
+ --pf-v5-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
8729
+ --pf-v5-c-card__footer--Color: var(--pf-t--global--text--color--subtle);
8730
+ --pf-v5-c-card__actions--PaddingLeft: var(--pf-t--global--spacer--md);
8731
+ --pf-v5-c-card__actions--Gap: var(--pf-t--global--spacer--sm);
8725
8732
  --pf-v5-c-card__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
8726
8733
  --pf-v5-c-card__actions--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
8727
8734
  --pf-v5-c-card__header-toggle--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
8728
- --pf-v5-c-card__header-toggle--MarginRight: var(--pf-v5-global--spacer--xs);
8735
+ --pf-v5-c-card__header-toggle--MarginRight: var(--pf-t--global--spacer--xs);
8729
8736
  --pf-v5-c-card__header-toggle--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
8730
- --pf-v5-c-card__header-toggle--MarginLeft: calc(var(--pf-v5-global--spacer--md) * -1);
8737
+ --pf-v5-c-card__header-toggle--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
8731
8738
  --pf-v5-c-card__header-toggle-icon--Transition: var(--pf-v5-global--Transition);
8732
8739
  --pf-v5-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
8733
- --pf-v5-c-card--m-selectable--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
8734
- --pf-v5-c-card--m-selectable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
8735
- --pf-v5-c-card--m-selectable--m-selected--BorderColor: var(--pf-v5-global--active-color--100);
8736
- --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--palette--black-150);
8737
- --pf-v5-c-card--m-selectable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
8738
- --pf-v5-c-card--m-selectable--focus--BackgroundColor: var(--pf-v5-global--palette--blue-100);
8739
- --pf-v5-c-card--m-selectable--focus--BorderColor: var(--pf-v5-global--active-color--100);
8740
- --pf-v5-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-v5-global--active-color--100);
8741
- --pf-v5-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-v5-global--palette--black-100);
8742
- --pf-v5-c-card--m-selectable--m-disabled--BorderColor: var(--pf-v5-global--BorderColor--100);
8743
- --pf-v5-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
8744
- --pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
8745
- --pf-v5-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
8746
- --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: transparent;
8747
- --pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
8748
- --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--palette--black-150);
8749
- --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-v5-global--active-color--100);
8750
- --pf-v5-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--md);
8751
- --pf-v5-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-v5-global--active-color--400);
8752
- --pf-v5-c-card--m-selectable-raised--before--Right: 0;
8753
- --pf-v5-c-card--m-selectable-raised--before--Bottom: 0;
8754
- --pf-v5-c-card--m-selectable-raised--before--Left: 0;
8755
- --pf-v5-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-v5-c-card--m-flat--BorderWidth));
8756
- --pf-v5-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-v5-c-card--m-flat--BorderWidth));
8757
- --pf-v5-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-v5-c-card--m-flat--BorderWidth));
8758
- --pf-v5-c-card--m-selectable-raised--before--Height: var(--pf-v5-global--BorderWidth--xl);
8759
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: transparent;
8760
- --pf-v5-c-card--m-selectable-raised--before--Transition: none;
8761
- --pf-v5-c-card--m-selectable-raised--before--ScaleY: 1;
8762
- --pf-v5-c-card--m-selectable-raised--before--TranslateY: 0;
8763
- --pf-v5-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--md);
8764
- --pf-v5-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-v5-global--active-color--400);
8765
- --pf-v5-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-v5-global--BoxShadow--md);
8766
- --pf-v5-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-v5-global--active-color--400);
8767
- --pf-v5-c-card--m-selectable-raised--active--BoxShadow: var(--pf-v5-global--BoxShadow--md);
8768
- --pf-v5-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-v5-global--active-color--400);
8769
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-v5-global--active-color--100);
8770
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
8771
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
8772
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
8773
- --pf-v5-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-v5-c-card--m-flat--BorderWidth));
8774
- --pf-v5-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-v5-c-card--m-rounded--BorderRadius));
8775
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-v5-global--ZIndex--xs);
8776
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
8777
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
8778
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
8779
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
8780
- --pf-v5-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
8781
- --pf-v5-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-v5-global--disabled-color--200);
8782
- --pf-v5-c-card--m-non-selectable-raised--before--ScaleY: 2;
8783
- --pf-v5-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-v5-global--disabled-color--200);
8784
- --pf-v5-c-card--m-compact__body--FontSize: var(--pf-v5-global--FontSize--sm);
8785
- --pf-v5-c-card--m-compact__footer--FontSize: var(--pf-v5-global--FontSize--sm);
8786
- --pf-v5-c-card--m-compact--first-child--PaddingTop: var(--pf-v5-global--spacer--md);
8787
- --pf-v5-c-card--m-compact--child--PaddingRight: var(--pf-v5-global--spacer--md);
8788
- --pf-v5-c-card--m-compact--child--PaddingBottom: var(--pf-v5-global--spacer--md);
8789
- --pf-v5-c-card--m-compact--child--PaddingLeft: var(--pf-v5-global--spacer--md);
8790
- --pf-v5-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-v5-global--spacer--md);
8791
- --pf-v5-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-v5-global--spacer--sm);
8792
- --pf-v5-c-card--m-display-lg__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
8793
- --pf-v5-c-card--m-display-lg--first-child--PaddingTop: var(--pf-v5-global--spacer--xl);
8794
- --pf-v5-c-card--m-display-lg--child--PaddingRight: var(--pf-v5-global--spacer--xl);
8795
- --pf-v5-c-card--m-display-lg--child--PaddingBottom: var(--pf-v5-global--spacer--xl);
8796
- --pf-v5-c-card--m-display-lg--child--PaddingLeft: var(--pf-v5-global--spacer--xl);
8797
- --pf-v5-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-v5-global--spacer--xl);
8798
- --pf-v5-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
8799
- --pf-v5-c-card--m-flat--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
8800
- --pf-v5-c-card--m-flat--BorderColor: var(--pf-v5-global--BorderColor--100);
8801
- --pf-v5-c-card--m-rounded--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
8740
+ --pf-v5-c-card--m-selectable--BorderWidth: var(--pf-v5-c-card--BorderWidth);
8741
+ --pf-v5-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
8742
+ --pf-v5-c-card--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked);
8743
+ --pf-v5-c-card--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover);
8744
+ --pf-v5-c-card--m-selectable--focus--BorderColor: var(--pf-t--global--border--color--hover);
8745
+ --pf-v5-c-card--m-selectable--focus--BorderWidth: var(--pf-t--global--border--width--box--hover);
8746
+ --pf-v5-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-t--global--border--color--clicked);
8747
+ --pf-v5-c-card--m-selectable--m-selected--focus--BorderWidth: var(--pf-t--global--border--width--box--clicked);
8748
+ --pf-v5-c-card--m-selectable--m-disabled__title-text--Color: var(--pf-t--global--text--color--on-disabled);
8749
+ --pf-v5-c-card--m-selectable--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
8750
+ --pf-v5-c-card--m-selectable--m-disabled__footer--Color: var(--pf-t--global--text--color--on-disabled);
8751
+ --pf-v5-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
8752
+ --pf-v5-c-card--m-selectable--m-disabled--BorderColor: transparent;
8753
+ --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
8754
+ --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
8755
+ --pf-v5-c-card--m-compact__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
8756
+ --pf-v5-c-card--m-compact__body--FontSize: var(--pf-t--global--font--size--body--default);
8757
+ --pf-v5-c-card--m-compact__footer--FontSize: var(--pf-t--global--font--size--body--sm);
8758
+ --pf-v5-c-card--m-compact--first-child--PaddingTop: var(--pf-t--global--spacer--md);
8759
+ --pf-v5-c-card--m-compact--child--PaddingRight: var(--pf-t--global--spacer--md);
8760
+ --pf-v5-c-card--m-compact--child--PaddingBottom: var(--pf-t--global--spacer--md);
8761
+ --pf-v5-c-card--m-compact--child--PaddingLeft: var(--pf-t--global--spacer--md);
8762
+ --pf-v5-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-t--global--spacer--md);
8763
+ --pf-v5-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-t--global--spacer--sm);
8764
+ --pf-v5-c-card--m-display-lg__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
8765
+ --pf-v5-c-card--m-display-lg__body--FontSize: var(--pf-t--global--font--size--body--lg);
8766
+ --pf-v5-c-card--m-display-lg__footer--FontSize: var(--pf-t--global--font--size--body--default);
8767
+ --pf-v5-c-card--m-display-lg--first-child--PaddingTop: var(--pf-t--global--spacer--xl);
8768
+ --pf-v5-c-card--m-display-lg--child--PaddingRight: var(--pf-t--global--spacer--xl);
8769
+ --pf-v5-c-card--m-display-lg--child--PaddingBottom: var(--pf-t--global--spacer--xl);
8770
+ --pf-v5-c-card--m-display-lg--child--PaddingLeft: var(--pf-t--global--spacer--xl);
8771
+ --pf-v5-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-t--global--spacer--xl);
8772
+ --pf-v5-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
8773
+ --pf-v5-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
8774
+ --pf-v5-c-card--m-secondary--BorderColor: transparent;
8802
8775
  --pf-v5-c-card--m-full-height--Height: 100%;
8803
- --pf-v5-c-card--m-plain--BoxShadow: none;
8776
+ --pf-v5-c-card--m-plain--BorderColor: transparent;
8804
8777
  --pf-v5-c-card--m-plain--BackgroundColor: transparent;
8805
8778
  --pf-v5-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
8806
- --pf-v5-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-v5-global--spacer--xs);
8807
- --pf-v5-c-card__input--focus--BorderWidth: var(--pf-v5-global--BorderWidth--md);
8808
- --pf-v5-c-card__input--focus--BorderColor: var(--pf-v5-global--primary-color--100);
8779
+ --pf-v5-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-t--global--spacer--xs);
8780
+ }
8781
+
8782
+ .pf-v5-c-card {
8809
8783
  position: relative;
8810
8784
  display: flex;
8811
8785
  flex-direction: column;
8786
+ overflow: auto;
8812
8787
  background-color: var(--pf-v5-c-card--BackgroundColor);
8813
- box-shadow: var(--pf-v5-c-card--BoxShadow);
8788
+ border: var(--pf-v5-c-card--BorderColor) var(--pf-v5-c-card--BorderStyle) var(--pf-v5-c-card--BorderWidth);
8789
+ border-radius: var(--pf-v5-c-card--BorderRadius);
8814
8790
  }
8815
8791
  .pf-v5-c-card.pf-m-selectable .pf-v5-c-card__selectable-actions :is(.pf-v5-c-check, .pf-v5-c-radio) {
8816
8792
  gap: 0;
8817
8793
  }
8818
8794
  .pf-v5-c-card.pf-m-selectable, .pf-v5-c-card.pf-m-clickable {
8819
8795
  isolation: isolate;
8820
- box-shadow: none;
8796
+ border: none;
8821
8797
  }
8822
8798
  .pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-check__label,
8823
8799
  .pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-radio__label {
@@ -8831,77 +8807,24 @@ button.pf-v5-c-breadcrumb__link {
8831
8807
  }
8832
8808
  .pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:focus-visible) ~ .pf-v5-c-check__label,
8833
8809
  .pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-radio__input:where(:focus-visible) ~ .pf-v5-c-radio__label {
8834
- --pf-v5-c-card--BackgroundColor: unset;
8835
- --pf-v5-c-card--BorderColor: unset;
8810
+ --pf-v5-c-card--BackgroundColor: revert;
8811
+ --pf-v5-c-card--BorderColor: revert;
8836
8812
  }
8837
8813
  .pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:checked) ~ .pf-v5-c-check__label,
8838
8814
  .pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-radio__input:where(:checked) ~ .pf-v5-c-radio__label, .pf-v5-c-card.pf-m-selectable.pf-m-clickable.pf-m-selected {
8839
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor);
8840
- --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor);
8815
+ --pf-v5-c-card--BorderColor: revert;
8816
+ --pf-v5-c-card--m-selectable--BorderWidth: revert;
8841
8817
  }
8842
8818
  .pf-v5-c-card.pf-m-selectable.pf-m-clickable.pf-m-current {
8843
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
8844
- --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor);
8845
- }
8846
- .pf-v5-c-card.pf-m-selectable.pf-m-clickable.pf-m-current.pf-m-selected, .pf-v5-c-card.pf-m-selectable.pf-m-clickable.pf-m-current .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:checked) ~ .pf-v5-c-check__label, .pf-v5-c-card.pf-m-selectable.pf-m-clickable.pf-m-current .pf-v5-c-card__selectable-actions .pf-v5-c-radio__input:where(:checked) ~ .pf-v5-c-radio__label {
8847
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
8848
8819
  --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor);
8820
+ --pf-v5-c-card--BorderWidth: var(--pf-v5-c-card--m-selectable--m-clickable--m-current--BorderWidth);
8849
8821
  }
8850
8822
  .pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:disabled) ~ .pf-v5-c-check__label,
8851
8823
  .pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-radio__input:where(:disabled) ~ .pf-v5-c-radio__label, .pf-v5-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
8852
8824
  --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--m-disabled--BackgroundColor);
8853
- --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-disabled--BorderColor);
8854
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-selectable--m-disabled--BoxShadow);
8855
- }
8856
- .pf-v5-c-card.pf-m-hoverable-raised::before, .pf-v5-c-card.pf-m-selectable-raised::before, .pf-v5-c-card.pf-m-non-selectable-raised::before {
8857
- position: absolute;
8858
- inset-block-end: var(--pf-v5-c-card--m-selectable-raised--before--Bottom);
8859
- inset-inline-start: var(--pf-v5-c-card--m-selectable-raised--before--Left);
8860
- inset-inline-end: var(--pf-v5-c-card--m-selectable-raised--before--Right);
8861
- height: var(--pf-v5-c-card--m-selectable-raised--before--Height);
8862
- content: "";
8863
- background-color: var(--pf-v5-c-card--m-selectable-raised--before--BackgroundColor);
8864
- transition: var(--pf-v5-c-card--m-selectable-raised--before--Transition);
8865
- transform: translateY(var(--pf-v5-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-v5-c-card--m-selectable-raised--before--ScaleY));
8866
- transform-origin: center bottom;
8867
- }
8868
- .pf-v5-c-card.pf-m-hoverable-raised:hover {
8869
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-hoverable-raised--hover--BoxShadow);
8870
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-v5-c-card--m-hoverable-raised--hover--before--BackgroundColor);
8871
- }
8872
- .pf-v5-c-card.pf-m-selectable-raised {
8873
- cursor: pointer;
8874
- }
8875
- .pf-v5-c-card.pf-m-selectable-raised:hover {
8876
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-selectable-raised--hover--BoxShadow);
8877
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-v5-c-card--m-selectable-raised--hover--before--BackgroundColor);
8878
- }
8879
- .pf-v5-c-card.pf-m-selectable-raised:focus {
8880
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-selectable-raised--focus--BoxShadow);
8881
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-v5-c-card--m-selectable-raised--focus--before--BackgroundColor);
8882
- }
8883
- .pf-v5-c-card.pf-m-selectable-raised:active {
8884
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-selectable-raised--active--BoxShadow);
8885
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-v5-c-card--m-selectable-raised--active--before--BackgroundColor);
8886
- }
8887
- .pf-v5-c-card.pf-m-selectable-raised.pf-m-selected-raised {
8888
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
8889
- --pf-v5-c-card--m-selectable-raised--before--Transition: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--before--Transition);
8890
- --pf-v5-c-card--m-selectable-raised--before--TranslateY: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
8891
- --pf-v5-c-card--m-selectable-raised--before--ScaleY: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
8892
- z-index: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--ZIndex);
8893
- box-shadow: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
8894
- transition: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--Transition);
8895
- transform: translateY(var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY));
8896
- }
8897
- .pf-v5-c-card.pf-m-non-selectable-raised {
8898
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-non-selectable-raised--BackgroundColor);
8899
- --pf-v5-c-card--BoxShadow: none;
8900
- --pf-v5-c-card--m-flat--BorderColor: var(--pf-v5-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
8901
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-v5-c-card--m-non-selectable-raised--before--BackgroundColor);
8902
- --pf-v5-c-card--m-selectable-raised--before--ScaleY: var(--pf-v5-c-card--m-non-selectable-raised--before--ScaleY);
8903
8825
  }
8904
8826
  .pf-v5-c-card.pf-m-compact {
8827
+ --pf-v5-c-card__title-text--FontSize: var(--pf-v5-c-card--m-compact__title-text--FontSize);
8905
8828
  --pf-v5-c-card__body--FontSize: var(--pf-v5-c-card--m-compact__body--FontSize);
8906
8829
  --pf-v5-c-card__footer--FontSize: var(--pf-v5-c-card--m-compact__footer--FontSize);
8907
8830
  --pf-v5-c-card--first-child--PaddingTop: var(--pf-v5-c-card--m-compact--first-child--PaddingTop);
@@ -8913,6 +8836,8 @@ button.pf-v5-c-breadcrumb__link {
8913
8836
  }
8914
8837
  .pf-v5-c-card.pf-m-display-lg {
8915
8838
  --pf-v5-c-card__title-text--FontSize: var(--pf-v5-c-card--m-display-lg__title-text--FontSize);
8839
+ --pf-v5-c-card__body--FontSize: var(--pf-v5-c-card--m-display-lg__body--FontSize);
8840
+ --pf-v5-c-card__footer--FontSize: var(--pf-v5-c-card--m-display-lg__footer--FontSize);
8916
8841
  --pf-v5-c-card--first-child--PaddingTop: var(--pf-v5-c-card--m-display-lg--first-child--PaddingTop);
8917
8842
  --pf-v5-c-card--child--PaddingRight: var(--pf-v5-c-card--m-display-lg--child--PaddingRight);
8918
8843
  --pf-v5-c-card--child--PaddingBottom: var(--pf-v5-c-card--m-display-lg--child--PaddingBottom);
@@ -8920,22 +8845,14 @@ button.pf-v5-c-breadcrumb__link {
8920
8845
  --pf-v5-c-card--c-divider--child--PaddingTop: var(--pf-v5-c-card--m-display-lg--c-divider--child--PaddingTop);
8921
8846
  --pf-v5-c-card__title--not--last-child--PaddingBottom: var(--pf-v5-c-card--m-display-lg__title--not--last-child--PaddingBottom);
8922
8847
  }
8923
- .pf-v5-c-card.pf-m-flat {
8924
- --pf-v5-c-card--BoxShadow: none;
8925
- --pf-v5-c-card--m-selectable-raised--before--Right: var(--pf-v5-c-card--m-flat--m-selectable-raised--before--Right);
8926
- --pf-v5-c-card--m-selectable-raised--before--Bottom: var(--pf-v5-c-card--m-flat--m-selectable-raised--before--Bottom);
8927
- --pf-v5-c-card--m-selectable-raised--before--Left: var(--pf-v5-c-card--m-flat--m-selectable-raised--before--Left);
8928
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-v5-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
8929
- border: var(--pf-v5-c-card--m-flat--BorderWidth) solid var(--pf-v5-c-card--m-flat--BorderColor);
8848
+ .pf-v5-c-card.pf-m-secondary {
8849
+ --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-secondary--BorderColor);
8850
+ --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-secondary--BackgroundColor);
8930
8851
  }
8931
8852
  .pf-v5-c-card.pf-m-plain {
8932
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-plain--BoxShadow);
8853
+ --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-plain--BorderColor);
8933
8854
  --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-plain--BackgroundColor);
8934
8855
  }
8935
- .pf-v5-c-card.pf-m-rounded {
8936
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-v5-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
8937
- border-radius: var(--pf-v5-c-card--m-rounded--BorderRadius);
8938
- }
8939
8856
  .pf-v5-c-card.pf-m-expanded .pf-v5-c-card__header-toggle-icon {
8940
8857
  transform: rotate(var(--pf-v5-c-card--m-expanded__header-toggle-icon--Rotate));
8941
8858
  }
@@ -8989,6 +8906,7 @@ button.pf-v5-c-breadcrumb__link {
8989
8906
  font-size: var(--pf-v5-c-card__title-text--FontSize);
8990
8907
  font-weight: var(--pf-v5-c-card__title-text--FontWeight);
8991
8908
  line-height: var(--pf-v5-c-card__title-text--LineHeight);
8909
+ color: var(--pf-v5-c-card__title-text--Color);
8992
8910
  }
8993
8911
 
8994
8912
  .pf-v5-c-card__actions {
@@ -9026,38 +8944,40 @@ button.pf-v5-c-breadcrumb__link {
9026
8944
  content: "";
9027
8945
  background-color: var(--pf-v5-c-card--BackgroundColor, transparent);
9028
8946
  border: var(--pf-v5-c-card--m-selectable--BorderWidth) solid var(--pf-v5-c-card--BorderColor, transparent);
9029
- box-shadow: var(--pf-v5-c-card--BoxShadow, none);
8947
+ border-radius: var(--pf-v5-c-card--BorderRadius);
9030
8948
  }
9031
8949
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__label:hover,
9032
8950
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__label:hover {
9033
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--hover--BackgroundColor);
9034
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-selectable--hover--BoxShadow);
8951
+ --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--hover--BorderColor);
9035
8952
  }
9036
8953
 
9037
8954
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:checked) ~ .pf-v5-c-check__label,
9038
8955
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__input:where(:checked) ~ .pf-v5-c-radio__label,
9039
8956
  .pf-v5-c-card.pf-m-selected {
9040
8957
  --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-selected--BorderColor);
9041
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--m-selected--BackgroundColor);
8958
+ --pf-v5-c-card--m-selectable--BorderWidth: var(--pf-v5-c-card--m-selectable--m-selected--BorderWidth);
9042
8959
  }
9043
8960
 
9044
8961
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:focus-visible) ~ .pf-v5-c-check__label,
9045
8962
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__input:where(:focus-visible) ~ .pf-v5-c-radio__label {
9046
8963
  --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--focus--BorderColor);
9047
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--focus--BackgroundColor);
8964
+ --pf-v5-c-card--BorderWidth: var(--pf-v5-c-card--m-selectable--focus--BorderWidth);
9048
8965
  }
9049
8966
 
9050
8967
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:focus-visible):where(:checked) ~ .pf-v5-c-check__label,
9051
8968
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-v5-c-radio__label {
9052
8969
  --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-selected--focus--BorderColor);
8970
+ --pf-v5-c-card--BorderWidth: var(--pf-v5-c-card--m-selectable--m-selected--focus--BorderWidth);
9053
8971
  }
9054
8972
 
9055
8973
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:disabled) ~ .pf-v5-c-check__label,
9056
8974
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__input:where(:disabled) ~ .pf-v5-c-radio__label,
9057
8975
  .pf-v5-c-card.pf-m-disabled {
8976
+ --pf-v5-c-card__title-text--Color: var(--pf-v5-c-card--m-selectable--m-disabled__title-text--Color);
8977
+ --pf-v5-c-card__body--Color: var(--pf-v5-c-card--m-selectable--m-disabled__body--Color);
8978
+ --pf-v5-c-card__footer--Color: var(--pf-v5-c-card--m-selectable--m-disabled__footer--Color);
9058
8979
  --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--m-disabled--BackgroundColor);
9059
8980
  --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-disabled--BorderColor);
9060
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-selectable--m-disabled--BoxShadow);
9061
8981
  }
9062
8982
 
9063
8983
  .pf-v5-c-card__header,
@@ -9079,6 +8999,10 @@ button.pf-v5-c-breadcrumb__link {
9079
8999
  .pf-v5-c-card__title:not(:last-child) {
9080
9000
  padding-block-end: var(--pf-v5-c-card__title--not--last-child--PaddingBottom);
9081
9001
  }
9002
+ .pf-v5-c-card__header button.pf-m-inline.pf-m-disabled,
9003
+ .pf-v5-c-card__title button.pf-m-inline.pf-m-disabled {
9004
+ --pf-v5-c-button--disabled--Color: var(--pf-v5-c-card--c-button--disabled--Color);
9005
+ }
9082
9006
 
9083
9007
  .pf-v5-c-card__expandable-content {
9084
9008
  --pf-v5-c-card--first-child--PaddingTop: 0;
@@ -9090,37 +9014,12 @@ button.pf-v5-c-breadcrumb__link {
9090
9014
 
9091
9015
  .pf-v5-c-card__body {
9092
9016
  font-size: var(--pf-v5-c-card__body--FontSize);
9017
+ color: var(--pf-v5-c-card__body--Color);
9093
9018
  }
9094
9019
 
9095
9020
  .pf-v5-c-card__footer {
9096
9021
  font-size: var(--pf-v5-c-card__footer--FontSize);
9097
- }
9098
-
9099
- .pf-v5-c-card__sr-input:focus + .pf-v5-c-card::after {
9100
- position: absolute;
9101
- inset-block-start: 0;
9102
- inset-block-end: 0;
9103
- inset-inline-start: 0;
9104
- inset-inline-end: 0;
9105
- content: "";
9106
- border: var(--pf-v5-c-card__input--focus--BorderWidth) solid var(--pf-v5-c-card__input--focus--BorderColor);
9107
- }
9108
-
9109
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
9110
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
9111
- }
9112
-
9113
- :where(.pf-v5-theme-dark) .pf-v5-c-card,
9114
- :where(.pf-v5-theme-dark) .pf-v5-c-card.pf-m-non-selectable-raised {
9115
- --pf-v5-c-card--BoxShadow: var(--pf-v5-global--BoxShadow--md);
9116
- --pf-v5-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-v5-global--palette--black-700);
9117
- --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
9118
- --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
9119
- --pf-v5-c-card--m-selectable--focus--BackgroundColor: var(--pf-v5-global--palette--blue-600);
9120
- --pf-v5-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
9121
- --pf-v5-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
9122
- --pf-v5-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
9123
- --pf-v5-c-card--m-selectable-raised--active--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
9022
+ color: var(--pf-v5-c-card__footer--Color);
9124
9023
  }
9125
9024
 
9126
9025
  :root,