@patternfly/patternfly 6.5.0-prerelease.12 → 6.5.0-prerelease.13

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 (16) hide show
  1. package/base/normalize.scss +7 -0
  2. package/base/patternfly-variables.css +5 -0
  3. package/base/tokens/tokens-local.scss +10 -0
  4. package/components/Button/button.css +16 -4
  5. package/components/Button/button.scss +18 -4
  6. package/components/Card/card.css +6 -0
  7. package/components/Card/card.scss +7 -1
  8. package/components/_index.css +22 -4
  9. package/docs/components/Card/examples/Card.md +154 -0
  10. package/package.json +2 -2
  11. package/patternfly-base-no-globals.css +5 -0
  12. package/patternfly-base.css +12 -0
  13. package/patternfly-no-globals.css +27 -4
  14. package/patternfly.css +34 -4
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -7115,6 +7115,11 @@
7115
7115
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7116
7116
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7117
7117
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7118
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7119
+ --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
7120
+ --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7121
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7122
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
7118
7123
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
7119
7124
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
7120
7125
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
@@ -10398,10 +10403,17 @@ button.pf-v6-c-breadcrumb__link {
10398
10403
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
10399
10404
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
10400
10405
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
10406
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
10401
10407
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
10402
10408
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
10409
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
10410
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
10403
10411
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
10404
10412
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
10413
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
10414
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
10415
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
10416
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
10405
10417
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
10406
10418
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
10407
10419
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -10411,10 +10423,8 @@ button.pf-v6-c-breadcrumb__link {
10411
10423
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
10412
10424
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
10413
10425
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
10414
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
10415
10426
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
10416
10427
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
10417
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
10418
10428
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
10419
10429
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
10420
10430
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -10739,12 +10749,13 @@ button.pf-v6-c-breadcrumb__link {
10739
10749
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
10740
10750
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
10741
10751
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
10752
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
10753
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
10754
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
10742
10755
  --pf-v6-c-button--BackgroundColor: transparent;
10743
10756
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
10744
10757
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
10745
10758
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
10746
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
10747
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
10748
10759
  --pf-v6-c-button--hover--BackgroundColor: transparent;
10749
10760
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
10750
10761
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -10753,6 +10764,8 @@ button.pf-v6-c-breadcrumb__link {
10753
10764
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
10754
10765
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
10755
10766
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
10767
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
10768
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
10756
10769
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
10757
10770
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
10758
10771
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -10760,6 +10773,7 @@ button.pf-v6-c-breadcrumb__link {
10760
10773
  --pf-v6-c-button--hover--BorderWidth: 0;
10761
10774
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
10762
10775
  text-align: start;
10776
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
10763
10777
  white-space: normal;
10764
10778
  background: transparent;
10765
10779
  outline-offset: 0.125rem;
@@ -10770,6 +10784,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10770
10784
  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
10771
10785
  }
10772
10786
 
10787
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
10788
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
10789
+ }
10773
10790
  .pf-v6-c-button.pf-m-link.pf-m-danger {
10774
10791
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
10775
10792
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -11633,6 +11650,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11633
11650
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
11634
11651
  }
11635
11652
 
11653
+ .pf-v6-c-card__subtitle {
11654
+ padding-block-start: var(--pf-t--global--spacer--sm);
11655
+ font-size: var(--pf-t--global--font--size--body--sm);
11656
+ color: var(--pf-t--global--text--color--subtle);
11657
+ }
11658
+
11636
11659
  .pf-v6-c-card__actions {
11637
11660
  display: flex;
11638
11661
  gap: var(--pf-v6-c-card__actions--Gap);
package/patternfly.css CHANGED
@@ -119,11 +119,18 @@ pre) {
119
119
  :where(a) {
120
120
  color: var(--pf-t--global--text--color--link--default);
121
121
  text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
122
+ text-decoration-style: var(--pf-t--global--text-decoration--link--style--default);
123
+ text-decoration-color: var(--pf-t--global--text-decoration--color--default);
124
+ text-underline-offset: max(var(--pf-t--global--text-decoration--offset--default), 0.28em);
125
+ transition: ease text-underline-offset 0.3s;
122
126
  }
123
127
 
124
128
  :where(a:hover, a:focus) {
125
129
  color: var(--pf-t--global--text--color--link--hover);
126
130
  text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
131
+ text-decoration-style: var(--pf-t--global--text-decoration--link--style--hover);
132
+ text-decoration-color: var(--pf-t--global--text-decoration--color--hover);
133
+ text-underline-offset: max(var(--pf-t--global--text-decoration--offset--hover), 0.33em);
127
134
  }
128
135
 
129
136
  :where(a,
@@ -7255,6 +7262,11 @@ button) {
7255
7262
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7256
7263
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7257
7264
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7265
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7266
+ --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
7267
+ --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7268
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7269
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
7258
7270
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
7259
7271
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
7260
7272
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
@@ -10538,10 +10550,17 @@ button.pf-v6-c-breadcrumb__link {
10538
10550
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
10539
10551
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
10540
10552
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
10553
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
10541
10554
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
10542
10555
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
10556
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
10557
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
10543
10558
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
10544
10559
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
10560
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
10561
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
10562
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
10563
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
10545
10564
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
10546
10565
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
10547
10566
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -10551,10 +10570,8 @@ button.pf-v6-c-breadcrumb__link {
10551
10570
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
10552
10571
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
10553
10572
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
10554
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
10555
10573
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
10556
10574
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
10557
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
10558
10575
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
10559
10576
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
10560
10577
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -10879,12 +10896,13 @@ button.pf-v6-c-breadcrumb__link {
10879
10896
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
10880
10897
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
10881
10898
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
10899
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
10900
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
10901
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
10882
10902
  --pf-v6-c-button--BackgroundColor: transparent;
10883
10903
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
10884
10904
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
10885
10905
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
10886
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
10887
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
10888
10906
  --pf-v6-c-button--hover--BackgroundColor: transparent;
10889
10907
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
10890
10908
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -10893,6 +10911,8 @@ button.pf-v6-c-breadcrumb__link {
10893
10911
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
10894
10912
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
10895
10913
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
10914
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
10915
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
10896
10916
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
10897
10917
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
10898
10918
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -10900,6 +10920,7 @@ button.pf-v6-c-breadcrumb__link {
10900
10920
  --pf-v6-c-button--hover--BorderWidth: 0;
10901
10921
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
10902
10922
  text-align: start;
10923
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
10903
10924
  white-space: normal;
10904
10925
  background: transparent;
10905
10926
  outline-offset: 0.125rem;
@@ -10910,6 +10931,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10910
10931
  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
10911
10932
  }
10912
10933
 
10934
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
10935
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
10936
+ }
10913
10937
  .pf-v6-c-button.pf-m-link.pf-m-danger {
10914
10938
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
10915
10939
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -11773,6 +11797,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11773
11797
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
11774
11798
  }
11775
11799
 
11800
+ .pf-v6-c-card__subtitle {
11801
+ padding-block-start: var(--pf-t--global--spacer--sm);
11802
+ font-size: var(--pf-t--global--font--size--body--sm);
11803
+ color: var(--pf-t--global--text--color--subtle);
11804
+ }
11805
+
11776
11806
  .pf-v6-c-card__actions {
11777
11807
  display: flex;
11778
11808
  gap: var(--pf-v6-c-card__actions--Gap);