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