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