@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-no-globals.css CHANGED
@@ -6210,8 +6210,10 @@ html .ws-preview {
6210
6210
  --pf-v5-c-about-modal-box--BackgroundImage: none;
6211
6211
  --pf-v5-c-about-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
6212
6212
  --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
6213
- --pf-v5-c-about-modal-box--BackgroundSize--width: 100%;
6214
- --pf-v5-c-about-modal-box--BackgroundSize: contain;
6213
+ --pf-v5-c-about-modal-box--BackgroundSize--min-width: 200px;
6214
+ --pf-v5-c-about-modal-box--BackgroundSize--width: 60%;
6215
+ --pf-v5-c-about-modal-box--BackgroundSize--max-width: 600px;
6216
+ --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));
6215
6217
  --pf-v5-c-about-modal-box--Height: 100%;
6216
6218
  --pf-v5-c-about-modal-box--lg--Height: 47.625rem;
6217
6219
  --pf-v5-c-about-modal-box--Width: 100%;
@@ -8586,119 +8588,95 @@ button.pf-v5-c-breadcrumb__link {
8586
8588
  --pf-v5-c-calendar-month__date--Color: var(--pf-v5-global--primary-color--400);
8587
8589
  }
8588
8590
 
8589
- .pf-v5-c-card {
8590
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
8591
- --pf-v5-c-card--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
8592
- --pf-v5-c-card--first-child--PaddingTop: var(--pf-v5-global--spacer--lg);
8593
- --pf-v5-c-card--child--PaddingRight: var(--pf-v5-global--spacer--lg);
8594
- --pf-v5-c-card--child--PaddingBottom: var(--pf-v5-global--spacer--lg);
8595
- --pf-v5-c-card--child--PaddingLeft: var(--pf-v5-global--spacer--lg);
8596
- --pf-v5-c-card--c-divider--child--PaddingTop: var(--pf-v5-global--spacer--lg);
8597
- --pf-v5-c-card__title--not--last-child--PaddingBottom: var(--pf-v5-global--spacer--md);
8598
- --pf-v5-c-card__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
8599
- --pf-v5-c-card__title-text--FontSize: var(--pf-v5-global--FontSize--md);
8600
- --pf-v5-c-card__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
8601
- --pf-v5-c-card__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
8602
- --pf-v5-c-card__body--FontSize: var(--pf-v5-global--FontSize--md);
8603
- --pf-v5-c-card__footer--FontSize: var(--pf-v5-global--FontSize--md);
8604
- --pf-v5-c-card__actions--PaddingLeft: var(--pf-v5-global--spacer--md);
8605
- --pf-v5-c-card__actions--Gap: var(--pf-v5-global--spacer--sm);
8591
+ :where(:root),
8592
+ :where(.pf-v5-c-card) {
8593
+ --pf-v5-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8594
+ --pf-v5-c-card--BorderColor: var(--pf-t--global--border--color--default);
8595
+ --pf-v5-c-card--BorderStyle: solid;
8596
+ --pf-v5-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
8597
+ --pf-v5-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
8598
+ --pf-v5-c-card--first-child--PaddingTop: var(--pf-t--global--spacer--lg);
8599
+ --pf-v5-c-card--child--PaddingRight: var(--pf-t--global--spacer--lg);
8600
+ --pf-v5-c-card--child--PaddingBottom: var(--pf-t--global--spacer--lg);
8601
+ --pf-v5-c-card--child--PaddingLeft: var(--pf-t--global--spacer--lg);
8602
+ --pf-v5-c-card--c-divider--child--PaddingTop: var(--pf-t--global--spacer--lg);
8603
+ --pf-v5-c-card__title--not--last-child--PaddingBottom: var(--pf-t--global--spacer--md);
8604
+ --pf-v5-c-card__title-text--Color: var(--pf-t--global--text--color--regular);
8605
+ --pf-v5-c-card__title-text--FontFamily: var(--pf-t--global--font--family--heading);
8606
+ --pf-v5-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
8607
+ --pf-v5-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
8608
+ --pf-v5-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
8609
+ --pf-v5-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
8610
+ --pf-v5-c-card__body--FontSize: var(--pf-t--global--font--size--body--default);
8611
+ --pf-v5-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
8612
+ --pf-v5-c-card__footer--Color: var(--pf-t--global--text--color--subtle);
8613
+ --pf-v5-c-card__actions--PaddingLeft: var(--pf-t--global--spacer--md);
8614
+ --pf-v5-c-card__actions--Gap: var(--pf-t--global--spacer--sm);
8606
8615
  --pf-v5-c-card__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
8607
8616
  --pf-v5-c-card__actions--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
8608
8617
  --pf-v5-c-card__header-toggle--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
8609
- --pf-v5-c-card__header-toggle--MarginRight: var(--pf-v5-global--spacer--xs);
8618
+ --pf-v5-c-card__header-toggle--MarginRight: var(--pf-t--global--spacer--xs);
8610
8619
  --pf-v5-c-card__header-toggle--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
8611
- --pf-v5-c-card__header-toggle--MarginLeft: calc(var(--pf-v5-global--spacer--md) * -1);
8620
+ --pf-v5-c-card__header-toggle--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
8612
8621
  --pf-v5-c-card__header-toggle-icon--Transition: var(--pf-v5-global--Transition);
8613
8622
  --pf-v5-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
8614
- --pf-v5-c-card--m-selectable--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
8615
- --pf-v5-c-card--m-selectable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
8616
- --pf-v5-c-card--m-selectable--m-selected--BorderColor: var(--pf-v5-global--active-color--100);
8617
- --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--palette--black-150);
8618
- --pf-v5-c-card--m-selectable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
8619
- --pf-v5-c-card--m-selectable--focus--BackgroundColor: var(--pf-v5-global--palette--blue-100);
8620
- --pf-v5-c-card--m-selectable--focus--BorderColor: var(--pf-v5-global--active-color--100);
8621
- --pf-v5-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-v5-global--active-color--100);
8622
- --pf-v5-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-v5-global--palette--black-100);
8623
- --pf-v5-c-card--m-selectable--m-disabled--BorderColor: var(--pf-v5-global--BorderColor--100);
8624
- --pf-v5-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
8625
- --pf-v5-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
8626
- --pf-v5-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
8627
- --pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor: transparent;
8628
- --pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
8629
- --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--palette--black-150);
8630
- --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-v5-global--active-color--100);
8631
- --pf-v5-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--md);
8632
- --pf-v5-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-v5-global--active-color--400);
8633
- --pf-v5-c-card--m-selectable-raised--before--Right: 0;
8634
- --pf-v5-c-card--m-selectable-raised--before--Bottom: 0;
8635
- --pf-v5-c-card--m-selectable-raised--before--Left: 0;
8636
- --pf-v5-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-v5-c-card--m-flat--BorderWidth));
8637
- --pf-v5-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-v5-c-card--m-flat--BorderWidth));
8638
- --pf-v5-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-v5-c-card--m-flat--BorderWidth));
8639
- --pf-v5-c-card--m-selectable-raised--before--Height: var(--pf-v5-global--BorderWidth--xl);
8640
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: transparent;
8641
- --pf-v5-c-card--m-selectable-raised--before--Transition: none;
8642
- --pf-v5-c-card--m-selectable-raised--before--ScaleY: 1;
8643
- --pf-v5-c-card--m-selectable-raised--before--TranslateY: 0;
8644
- --pf-v5-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--md);
8645
- --pf-v5-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-v5-global--active-color--400);
8646
- --pf-v5-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-v5-global--BoxShadow--md);
8647
- --pf-v5-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-v5-global--active-color--400);
8648
- --pf-v5-c-card--m-selectable-raised--active--BoxShadow: var(--pf-v5-global--BoxShadow--md);
8649
- --pf-v5-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-v5-global--active-color--400);
8650
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-v5-global--active-color--100);
8651
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
8652
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
8653
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
8654
- --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));
8655
- --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));
8656
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-v5-global--ZIndex--xs);
8657
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
8658
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
8659
- --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);
8660
- --pf-v5-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
8661
- --pf-v5-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
8662
- --pf-v5-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-v5-global--disabled-color--200);
8663
- --pf-v5-c-card--m-non-selectable-raised--before--ScaleY: 2;
8664
- --pf-v5-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-v5-global--disabled-color--200);
8665
- --pf-v5-c-card--m-compact__body--FontSize: var(--pf-v5-global--FontSize--sm);
8666
- --pf-v5-c-card--m-compact__footer--FontSize: var(--pf-v5-global--FontSize--sm);
8667
- --pf-v5-c-card--m-compact--first-child--PaddingTop: var(--pf-v5-global--spacer--md);
8668
- --pf-v5-c-card--m-compact--child--PaddingRight: var(--pf-v5-global--spacer--md);
8669
- --pf-v5-c-card--m-compact--child--PaddingBottom: var(--pf-v5-global--spacer--md);
8670
- --pf-v5-c-card--m-compact--child--PaddingLeft: var(--pf-v5-global--spacer--md);
8671
- --pf-v5-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-v5-global--spacer--md);
8672
- --pf-v5-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-v5-global--spacer--sm);
8673
- --pf-v5-c-card--m-display-lg__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
8674
- --pf-v5-c-card--m-display-lg--first-child--PaddingTop: var(--pf-v5-global--spacer--xl);
8675
- --pf-v5-c-card--m-display-lg--child--PaddingRight: var(--pf-v5-global--spacer--xl);
8676
- --pf-v5-c-card--m-display-lg--child--PaddingBottom: var(--pf-v5-global--spacer--xl);
8677
- --pf-v5-c-card--m-display-lg--child--PaddingLeft: var(--pf-v5-global--spacer--xl);
8678
- --pf-v5-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-v5-global--spacer--xl);
8679
- --pf-v5-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
8680
- --pf-v5-c-card--m-flat--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
8681
- --pf-v5-c-card--m-flat--BorderColor: var(--pf-v5-global--BorderColor--100);
8682
- --pf-v5-c-card--m-rounded--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
8623
+ --pf-v5-c-card--m-selectable--BorderWidth: var(--pf-v5-c-card--BorderWidth);
8624
+ --pf-v5-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
8625
+ --pf-v5-c-card--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked);
8626
+ --pf-v5-c-card--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover);
8627
+ --pf-v5-c-card--m-selectable--focus--BorderColor: var(--pf-t--global--border--color--hover);
8628
+ --pf-v5-c-card--m-selectable--focus--BorderWidth: var(--pf-t--global--border--width--box--hover);
8629
+ --pf-v5-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-t--global--border--color--clicked);
8630
+ --pf-v5-c-card--m-selectable--m-selected--focus--BorderWidth: var(--pf-t--global--border--width--box--clicked);
8631
+ --pf-v5-c-card--m-selectable--m-disabled__title-text--Color: var(--pf-t--global--text--color--on-disabled);
8632
+ --pf-v5-c-card--m-selectable--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
8633
+ --pf-v5-c-card--m-selectable--m-disabled__footer--Color: var(--pf-t--global--text--color--on-disabled);
8634
+ --pf-v5-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
8635
+ --pf-v5-c-card--m-selectable--m-disabled--BorderColor: transparent;
8636
+ --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
8637
+ --pf-v5-c-card--m-selectable--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
8638
+ --pf-v5-c-card--m-compact__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
8639
+ --pf-v5-c-card--m-compact__body--FontSize: var(--pf-t--global--font--size--body--default);
8640
+ --pf-v5-c-card--m-compact__footer--FontSize: var(--pf-t--global--font--size--body--sm);
8641
+ --pf-v5-c-card--m-compact--first-child--PaddingTop: var(--pf-t--global--spacer--md);
8642
+ --pf-v5-c-card--m-compact--child--PaddingRight: var(--pf-t--global--spacer--md);
8643
+ --pf-v5-c-card--m-compact--child--PaddingBottom: var(--pf-t--global--spacer--md);
8644
+ --pf-v5-c-card--m-compact--child--PaddingLeft: var(--pf-t--global--spacer--md);
8645
+ --pf-v5-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-t--global--spacer--md);
8646
+ --pf-v5-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-t--global--spacer--sm);
8647
+ --pf-v5-c-card--m-display-lg__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
8648
+ --pf-v5-c-card--m-display-lg__body--FontSize: var(--pf-t--global--font--size--body--lg);
8649
+ --pf-v5-c-card--m-display-lg__footer--FontSize: var(--pf-t--global--font--size--body--default);
8650
+ --pf-v5-c-card--m-display-lg--first-child--PaddingTop: var(--pf-t--global--spacer--xl);
8651
+ --pf-v5-c-card--m-display-lg--child--PaddingRight: var(--pf-t--global--spacer--xl);
8652
+ --pf-v5-c-card--m-display-lg--child--PaddingBottom: var(--pf-t--global--spacer--xl);
8653
+ --pf-v5-c-card--m-display-lg--child--PaddingLeft: var(--pf-t--global--spacer--xl);
8654
+ --pf-v5-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-t--global--spacer--xl);
8655
+ --pf-v5-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
8656
+ --pf-v5-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
8657
+ --pf-v5-c-card--m-secondary--BorderColor: transparent;
8683
8658
  --pf-v5-c-card--m-full-height--Height: 100%;
8684
- --pf-v5-c-card--m-plain--BoxShadow: none;
8659
+ --pf-v5-c-card--m-plain--BorderColor: transparent;
8685
8660
  --pf-v5-c-card--m-plain--BackgroundColor: transparent;
8686
8661
  --pf-v5-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
8687
- --pf-v5-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-v5-global--spacer--xs);
8688
- --pf-v5-c-card__input--focus--BorderWidth: var(--pf-v5-global--BorderWidth--md);
8689
- --pf-v5-c-card__input--focus--BorderColor: var(--pf-v5-global--primary-color--100);
8662
+ --pf-v5-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-t--global--spacer--xs);
8663
+ }
8664
+
8665
+ .pf-v5-c-card {
8690
8666
  position: relative;
8691
8667
  display: flex;
8692
8668
  flex-direction: column;
8669
+ overflow: auto;
8693
8670
  background-color: var(--pf-v5-c-card--BackgroundColor);
8694
- box-shadow: var(--pf-v5-c-card--BoxShadow);
8671
+ border: var(--pf-v5-c-card--BorderColor) var(--pf-v5-c-card--BorderStyle) var(--pf-v5-c-card--BorderWidth);
8672
+ border-radius: var(--pf-v5-c-card--BorderRadius);
8695
8673
  }
8696
8674
  .pf-v5-c-card.pf-m-selectable .pf-v5-c-card__selectable-actions :is(.pf-v5-c-check, .pf-v5-c-radio) {
8697
8675
  gap: 0;
8698
8676
  }
8699
8677
  .pf-v5-c-card.pf-m-selectable, .pf-v5-c-card.pf-m-clickable {
8700
8678
  isolation: isolate;
8701
- box-shadow: none;
8679
+ border: none;
8702
8680
  }
8703
8681
  .pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-check__label,
8704
8682
  .pf-v5-c-card.pf-m-selectable.pf-m-clickable .pf-v5-c-card__selectable-actions .pf-v5-c-radio__label {
@@ -8712,77 +8690,24 @@ button.pf-v5-c-breadcrumb__link {
8712
8690
  }
8713
8691
  .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,
8714
8692
  .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 {
8715
- --pf-v5-c-card--BackgroundColor: unset;
8716
- --pf-v5-c-card--BorderColor: unset;
8693
+ --pf-v5-c-card--BackgroundColor: revert;
8694
+ --pf-v5-c-card--BorderColor: revert;
8717
8695
  }
8718
8696
  .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,
8719
8697
  .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 {
8720
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--m-clickable--m-selected--BackgroundColor);
8721
- --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-clickable--m-selected--BorderColor);
8698
+ --pf-v5-c-card--BorderColor: revert;
8699
+ --pf-v5-c-card--m-selectable--BorderWidth: revert;
8722
8700
  }
8723
8701
  .pf-v5-c-card.pf-m-selectable.pf-m-clickable.pf-m-current {
8724
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
8725
- --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor);
8726
- }
8727
- .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 {
8728
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
8729
8702
  --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-clickable--m-current--BorderColor);
8703
+ --pf-v5-c-card--BorderWidth: var(--pf-v5-c-card--m-selectable--m-clickable--m-current--BorderWidth);
8730
8704
  }
8731
8705
  .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,
8732
8706
  .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 {
8733
8707
  --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--m-disabled--BackgroundColor);
8734
- --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-disabled--BorderColor);
8735
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-selectable--m-disabled--BoxShadow);
8736
- }
8737
- .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 {
8738
- position: absolute;
8739
- inset-block-end: var(--pf-v5-c-card--m-selectable-raised--before--Bottom);
8740
- inset-inline-start: var(--pf-v5-c-card--m-selectable-raised--before--Left);
8741
- inset-inline-end: var(--pf-v5-c-card--m-selectable-raised--before--Right);
8742
- height: var(--pf-v5-c-card--m-selectable-raised--before--Height);
8743
- content: "";
8744
- background-color: var(--pf-v5-c-card--m-selectable-raised--before--BackgroundColor);
8745
- transition: var(--pf-v5-c-card--m-selectable-raised--before--Transition);
8746
- transform: translateY(var(--pf-v5-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-v5-c-card--m-selectable-raised--before--ScaleY));
8747
- transform-origin: center bottom;
8748
- }
8749
- .pf-v5-c-card.pf-m-hoverable-raised:hover {
8750
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-hoverable-raised--hover--BoxShadow);
8751
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-v5-c-card--m-hoverable-raised--hover--before--BackgroundColor);
8752
- }
8753
- .pf-v5-c-card.pf-m-selectable-raised {
8754
- cursor: pointer;
8755
- }
8756
- .pf-v5-c-card.pf-m-selectable-raised:hover {
8757
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-selectable-raised--hover--BoxShadow);
8758
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-v5-c-card--m-selectable-raised--hover--before--BackgroundColor);
8759
- }
8760
- .pf-v5-c-card.pf-m-selectable-raised:focus {
8761
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-selectable-raised--focus--BoxShadow);
8762
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-v5-c-card--m-selectable-raised--focus--before--BackgroundColor);
8763
- }
8764
- .pf-v5-c-card.pf-m-selectable-raised:active {
8765
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-selectable-raised--active--BoxShadow);
8766
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-v5-c-card--m-selectable-raised--active--before--BackgroundColor);
8767
- }
8768
- .pf-v5-c-card.pf-m-selectable-raised.pf-m-selected-raised {
8769
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
8770
- --pf-v5-c-card--m-selectable-raised--before--Transition: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--before--Transition);
8771
- --pf-v5-c-card--m-selectable-raised--before--TranslateY: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
8772
- --pf-v5-c-card--m-selectable-raised--before--ScaleY: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
8773
- z-index: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--ZIndex);
8774
- box-shadow: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
8775
- transition: var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--Transition);
8776
- transform: translateY(var(--pf-v5-c-card--m-selectable-raised--m-selected-raised--TranslateY));
8777
- }
8778
- .pf-v5-c-card.pf-m-non-selectable-raised {
8779
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-non-selectable-raised--BackgroundColor);
8780
- --pf-v5-c-card--BoxShadow: none;
8781
- --pf-v5-c-card--m-flat--BorderColor: var(--pf-v5-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
8782
- --pf-v5-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-v5-c-card--m-non-selectable-raised--before--BackgroundColor);
8783
- --pf-v5-c-card--m-selectable-raised--before--ScaleY: var(--pf-v5-c-card--m-non-selectable-raised--before--ScaleY);
8784
8708
  }
8785
8709
  .pf-v5-c-card.pf-m-compact {
8710
+ --pf-v5-c-card__title-text--FontSize: var(--pf-v5-c-card--m-compact__title-text--FontSize);
8786
8711
  --pf-v5-c-card__body--FontSize: var(--pf-v5-c-card--m-compact__body--FontSize);
8787
8712
  --pf-v5-c-card__footer--FontSize: var(--pf-v5-c-card--m-compact__footer--FontSize);
8788
8713
  --pf-v5-c-card--first-child--PaddingTop: var(--pf-v5-c-card--m-compact--first-child--PaddingTop);
@@ -8794,6 +8719,8 @@ button.pf-v5-c-breadcrumb__link {
8794
8719
  }
8795
8720
  .pf-v5-c-card.pf-m-display-lg {
8796
8721
  --pf-v5-c-card__title-text--FontSize: var(--pf-v5-c-card--m-display-lg__title-text--FontSize);
8722
+ --pf-v5-c-card__body--FontSize: var(--pf-v5-c-card--m-display-lg__body--FontSize);
8723
+ --pf-v5-c-card__footer--FontSize: var(--pf-v5-c-card--m-display-lg__footer--FontSize);
8797
8724
  --pf-v5-c-card--first-child--PaddingTop: var(--pf-v5-c-card--m-display-lg--first-child--PaddingTop);
8798
8725
  --pf-v5-c-card--child--PaddingRight: var(--pf-v5-c-card--m-display-lg--child--PaddingRight);
8799
8726
  --pf-v5-c-card--child--PaddingBottom: var(--pf-v5-c-card--m-display-lg--child--PaddingBottom);
@@ -8801,22 +8728,14 @@ button.pf-v5-c-breadcrumb__link {
8801
8728
  --pf-v5-c-card--c-divider--child--PaddingTop: var(--pf-v5-c-card--m-display-lg--c-divider--child--PaddingTop);
8802
8729
  --pf-v5-c-card__title--not--last-child--PaddingBottom: var(--pf-v5-c-card--m-display-lg__title--not--last-child--PaddingBottom);
8803
8730
  }
8804
- .pf-v5-c-card.pf-m-flat {
8805
- --pf-v5-c-card--BoxShadow: none;
8806
- --pf-v5-c-card--m-selectable-raised--before--Right: var(--pf-v5-c-card--m-flat--m-selectable-raised--before--Right);
8807
- --pf-v5-c-card--m-selectable-raised--before--Bottom: var(--pf-v5-c-card--m-flat--m-selectable-raised--before--Bottom);
8808
- --pf-v5-c-card--m-selectable-raised--before--Left: var(--pf-v5-c-card--m-flat--m-selectable-raised--before--Left);
8809
- --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);
8810
- border: var(--pf-v5-c-card--m-flat--BorderWidth) solid var(--pf-v5-c-card--m-flat--BorderColor);
8731
+ .pf-v5-c-card.pf-m-secondary {
8732
+ --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-secondary--BorderColor);
8733
+ --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-secondary--BackgroundColor);
8811
8734
  }
8812
8735
  .pf-v5-c-card.pf-m-plain {
8813
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-plain--BoxShadow);
8736
+ --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-plain--BorderColor);
8814
8737
  --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-plain--BackgroundColor);
8815
8738
  }
8816
- .pf-v5-c-card.pf-m-rounded {
8817
- --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);
8818
- border-radius: var(--pf-v5-c-card--m-rounded--BorderRadius);
8819
- }
8820
8739
  .pf-v5-c-card.pf-m-expanded .pf-v5-c-card__header-toggle-icon {
8821
8740
  transform: rotate(var(--pf-v5-c-card--m-expanded__header-toggle-icon--Rotate));
8822
8741
  }
@@ -8870,6 +8789,7 @@ button.pf-v5-c-breadcrumb__link {
8870
8789
  font-size: var(--pf-v5-c-card__title-text--FontSize);
8871
8790
  font-weight: var(--pf-v5-c-card__title-text--FontWeight);
8872
8791
  line-height: var(--pf-v5-c-card__title-text--LineHeight);
8792
+ color: var(--pf-v5-c-card__title-text--Color);
8873
8793
  }
8874
8794
 
8875
8795
  .pf-v5-c-card__actions {
@@ -8907,38 +8827,40 @@ button.pf-v5-c-breadcrumb__link {
8907
8827
  content: "";
8908
8828
  background-color: var(--pf-v5-c-card--BackgroundColor, transparent);
8909
8829
  border: var(--pf-v5-c-card--m-selectable--BorderWidth) solid var(--pf-v5-c-card--BorderColor, transparent);
8910
- box-shadow: var(--pf-v5-c-card--BoxShadow, none);
8830
+ border-radius: var(--pf-v5-c-card--BorderRadius);
8911
8831
  }
8912
8832
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__label:hover,
8913
8833
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__label:hover {
8914
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--hover--BackgroundColor);
8915
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-selectable--hover--BoxShadow);
8834
+ --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--hover--BorderColor);
8916
8835
  }
8917
8836
 
8918
8837
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:checked) ~ .pf-v5-c-check__label,
8919
8838
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__input:where(:checked) ~ .pf-v5-c-radio__label,
8920
8839
  .pf-v5-c-card.pf-m-selected {
8921
8840
  --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-selected--BorderColor);
8922
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--m-selected--BackgroundColor);
8841
+ --pf-v5-c-card--m-selectable--BorderWidth: var(--pf-v5-c-card--m-selectable--m-selected--BorderWidth);
8923
8842
  }
8924
8843
 
8925
8844
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:focus-visible) ~ .pf-v5-c-check__label,
8926
8845
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__input:where(:focus-visible) ~ .pf-v5-c-radio__label {
8927
8846
  --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--focus--BorderColor);
8928
- --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--focus--BackgroundColor);
8847
+ --pf-v5-c-card--BorderWidth: var(--pf-v5-c-card--m-selectable--focus--BorderWidth);
8929
8848
  }
8930
8849
 
8931
8850
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:focus-visible):where(:checked) ~ .pf-v5-c-check__label,
8932
8851
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-v5-c-radio__label {
8933
8852
  --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-selected--focus--BorderColor);
8853
+ --pf-v5-c-card--BorderWidth: var(--pf-v5-c-card--m-selectable--m-selected--focus--BorderWidth);
8934
8854
  }
8935
8855
 
8936
8856
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__input:where(:disabled) ~ .pf-v5-c-check__label,
8937
8857
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__input:where(:disabled) ~ .pf-v5-c-radio__label,
8938
8858
  .pf-v5-c-card.pf-m-disabled {
8859
+ --pf-v5-c-card__title-text--Color: var(--pf-v5-c-card--m-selectable--m-disabled__title-text--Color);
8860
+ --pf-v5-c-card__body--Color: var(--pf-v5-c-card--m-selectable--m-disabled__body--Color);
8861
+ --pf-v5-c-card__footer--Color: var(--pf-v5-c-card--m-selectable--m-disabled__footer--Color);
8939
8862
  --pf-v5-c-card--BackgroundColor: var(--pf-v5-c-card--m-selectable--m-disabled--BackgroundColor);
8940
8863
  --pf-v5-c-card--BorderColor: var(--pf-v5-c-card--m-selectable--m-disabled--BorderColor);
8941
- --pf-v5-c-card--BoxShadow: var(--pf-v5-c-card--m-selectable--m-disabled--BoxShadow);
8942
8864
  }
8943
8865
 
8944
8866
  .pf-v5-c-card__header,
@@ -8960,6 +8882,10 @@ button.pf-v5-c-breadcrumb__link {
8960
8882
  .pf-v5-c-card__title:not(:last-child) {
8961
8883
  padding-block-end: var(--pf-v5-c-card__title--not--last-child--PaddingBottom);
8962
8884
  }
8885
+ .pf-v5-c-card__header button.pf-m-inline.pf-m-disabled,
8886
+ .pf-v5-c-card__title button.pf-m-inline.pf-m-disabled {
8887
+ --pf-v5-c-button--disabled--Color: var(--pf-v5-c-card--c-button--disabled--Color);
8888
+ }
8963
8889
 
8964
8890
  .pf-v5-c-card__expandable-content {
8965
8891
  --pf-v5-c-card--first-child--PaddingTop: 0;
@@ -8971,37 +8897,12 @@ button.pf-v5-c-breadcrumb__link {
8971
8897
 
8972
8898
  .pf-v5-c-card__body {
8973
8899
  font-size: var(--pf-v5-c-card__body--FontSize);
8900
+ color: var(--pf-v5-c-card__body--Color);
8974
8901
  }
8975
8902
 
8976
8903
  .pf-v5-c-card__footer {
8977
8904
  font-size: var(--pf-v5-c-card__footer--FontSize);
8978
- }
8979
-
8980
- .pf-v5-c-card__sr-input:focus + .pf-v5-c-card::after {
8981
- position: absolute;
8982
- inset-block-start: 0;
8983
- inset-block-end: 0;
8984
- inset-inline-start: 0;
8985
- inset-inline-end: 0;
8986
- content: "";
8987
- border: var(--pf-v5-c-card__input--focus--BorderWidth) solid var(--pf-v5-c-card__input--focus--BorderColor);
8988
- }
8989
-
8990
- :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 {
8991
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
8992
- }
8993
-
8994
- :where(.pf-v5-theme-dark) .pf-v5-c-card,
8995
- :where(.pf-v5-theme-dark) .pf-v5-c-card.pf-m-non-selectable-raised {
8996
- --pf-v5-c-card--BoxShadow: var(--pf-v5-global--BoxShadow--md);
8997
- --pf-v5-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-v5-global--palette--black-700);
8998
- --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
8999
- --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
9000
- --pf-v5-c-card--m-selectable--focus--BackgroundColor: var(--pf-v5-global--palette--blue-600);
9001
- --pf-v5-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
9002
- --pf-v5-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
9003
- --pf-v5-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
9004
- --pf-v5-c-card--m-selectable-raised--active--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
8905
+ color: var(--pf-v5-c-card__footer--Color);
9005
8906
  }
9006
8907
 
9007
8908
  :root,