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

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 (19) 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/Compass/compass.css +3 -0
  9. package/components/Compass/compass.scss +7 -0
  10. package/components/_index.css +25 -4
  11. package/docs/components/Card/examples/Card.md +154 -0
  12. package/docs/components/Compass/examples/Compass.md +1 -0
  13. package/package.json +5 -2
  14. package/patternfly-base-no-globals.css +5 -0
  15. package/patternfly-base.css +12 -0
  16. package/patternfly-no-globals.css +30 -4
  17. package/patternfly.css +37 -4
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/base/normalize.scss CHANGED
@@ -108,11 +108,18 @@
108
108
  :where(a) {
109
109
  color: var(--pf-t--global--text--color--link--default);
110
110
  text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
111
+ text-decoration-style: var(--pf-t--global--text-decoration--link--style--default);
112
+ text-decoration-color: var(--pf-t--global--text-decoration--color--default);
113
+ text-underline-offset: max(var(--pf-t--global--text-decoration--offset--default), 0.28em);
114
+ transition: ease text-underline-offset 0.3s;
111
115
  }
112
116
 
113
117
  :where(a:hover, a:focus) {
114
118
  color: var(--pf-t--global--text--color--link--hover);
115
119
  text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
120
+ text-decoration-style: var(--pf-t--global--text-decoration--link--style--hover);
121
+ text-decoration-color: var(--pf-t--global--text-decoration--color--hover);
122
+ text-underline-offset: max(var(--pf-t--global--text-decoration--offset--hover), 0.33em);
116
123
  }
117
124
 
118
125
  :where(
package/base/patternfly-variables.css CHANGED
@@ -813,6 +813,11 @@
813
813
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
814
814
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
815
815
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
816
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
817
+ --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
818
+ --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
819
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
820
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
816
821
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
817
822
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
818
823
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
package/base/tokens/tokens-local.scss CHANGED
@@ -1,6 +1,16 @@
1
1
  // LOCAL TOKENS
2
2
 
3
3
  @mixin pf-v6-tokens {
4
+ // temporary until we have updates from design
5
+ // new
6
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7
+ --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
8
+ --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
9
+
10
+ // changed
11
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
12
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
13
+
4
14
  // TODO Maintaining these in addition to the h1-h6 sizes
5
15
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
6
16
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
package/components/Button/button.css CHANGED
@@ -113,10 +113,17 @@
113
113
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
114
114
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
115
115
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
116
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
116
117
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
117
118
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
119
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
120
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
118
121
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
119
122
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
123
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
124
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
125
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
126
+ --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);
120
127
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
121
128
  --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));
122
129
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -126,10 +133,8 @@
126
133
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
127
134
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
128
135
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
129
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
130
136
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
131
137
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
132
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
133
138
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
134
139
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
135
140
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -454,12 +459,13 @@
454
459
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
455
460
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
456
461
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
462
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
463
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
464
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
457
465
  --pf-v6-c-button--BackgroundColor: transparent;
458
466
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
459
467
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
460
468
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
461
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
462
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
463
469
  --pf-v6-c-button--hover--BackgroundColor: transparent;
464
470
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
465
471
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -468,6 +474,8 @@
468
474
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
469
475
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
470
476
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
477
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
478
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
471
479
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
472
480
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
473
481
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -475,6 +483,7 @@
475
483
  --pf-v6-c-button--hover--BorderWidth: 0;
476
484
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
477
485
  text-align: start;
486
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
478
487
  white-space: normal;
479
488
  background: transparent;
480
489
  outline-offset: 0.125rem;
@@ -485,6 +494,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
485
494
  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
486
495
  }
487
496
 
497
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
498
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
499
+ }
488
500
  .pf-v6-c-button.pf-m-link.pf-m-danger {
489
501
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
490
502
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
package/components/Button/button.scss CHANGED
@@ -131,10 +131,17 @@
131
131
  --#{$button}--m-link--m-inline--PaddingInlineEnd: 0;
132
132
  --#{$button}--m-link--m-inline--PaddingBlockEnd: 0;
133
133
  --#{$button}--m-link--m-inline--PaddingInlineStart: 0;
134
+ --#{$button}--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
134
135
  --#{$button}--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
135
136
  --#{$button}--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
137
+ --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
138
+ --#{$button}--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
136
139
  --#{$button}--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
137
140
  --#{$button}--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
141
+ --#{$button}--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
142
+ --#{$button}--m-link--m-inline--TransitionProperty: color, text-underline-offset;
143
+ --#{$button}--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
144
+ --#{$button}--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
138
145
  --#{$button}--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
139
146
  --#{$button}--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--#{$button}--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
140
147
  --#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -144,10 +151,8 @@
144
151
  --#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
145
152
  --#{$button}--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
146
153
  --#{$button}--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
147
- --#{$button}--m-link--m-inline--TextDecorationColor: currentcolor;
148
154
  --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
149
155
  --#{$button}--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
150
- --#{$button}--m-link--m-inline--hover--TextDecorationColor: currentcolor;
151
156
 
152
157
  // Plain
153
158
  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -530,12 +535,13 @@
530
535
  --#{$button}--PaddingInlineEnd: var(--#{$button}--m-link--m-inline--PaddingInlineEnd);
531
536
  --#{$button}--PaddingBlockEnd: var(--#{$button}--m-link--m-inline--PaddingBlockEnd);
532
537
  --#{$button}--PaddingInlineStart: var(--#{$button}--m-link--m-inline--PaddingInlineStart);
538
+ --#{$button}--TransitionDuration: var(--#{$button}--m-link--m-inline--TransitionDuration);
539
+ --#{$button}--TransitionTimingFunction: var(--#{$button}--m-link--m-inline--TransitionTimingFunction);
540
+ --#{$button}--TransitionProperty: var(--#{$button}--m-link--m-inline--TransitionProperty);
533
541
  --#{$button}--BackgroundColor: transparent;
534
542
  --#{$button}__progress--InsetInlineStart: var(--#{$button}--m-link--m-inline__progress--InsetInlineStart);
535
543
  --#{$button}--TextDecorationLine: var(--#{$button}--m-link--m-inline--TextDecorationLine);
536
544
  --#{$button}--TextDecorationStyle: var(--#{$button}--m-link--m-inline--TextDecorationStyle);
537
- --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
538
- --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
539
545
  --#{$button}--hover--BackgroundColor: transparent;
540
546
  --#{$button}--m-clicked--BackgroundColor: transparent;
541
547
  --#{$button}--disabled--BackgroundColor: transparent;
@@ -544,6 +550,8 @@
544
550
  --#{$button}--m-link--Color: var(--#{$button}--m-link--m-inline--Color);
545
551
  --#{$button}--m-link__icon--Color: var(--#{$button}--m-link--m-inline__icon--Color);
546
552
  --#{$button}--TextDecorationColor: var(--#{$button}--m-link--m-inline--TextDecorationColor);
553
+ --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
554
+ --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
547
555
  --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
548
556
  --#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color);
549
557
  --#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color);
@@ -552,9 +560,15 @@
552
560
  --#{$button}--m-clicked--BorderWidth: 0;
553
561
 
554
562
  text-align: start;
563
+ text-underline-offset: var(--#{$button}--m-link--m-inline--TextUnderlineOffset);
555
564
  white-space: normal;
556
565
  background: transparent; // don't show the ripple effect for inline links
557
566
  outline-offset: #{pf-size-prem(2px)};
567
+
568
+ &:hover,
569
+ &:focus {
570
+ --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--hover--TextUnderlineOffset);
571
+ }
558
572
  }
559
573
 
560
574
  &.pf-m-danger {
package/components/Card/card.css CHANGED
@@ -245,6 +245,12 @@
245
245
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
246
246
  }
247
247
 
248
+ .pf-v6-c-card__subtitle {
249
+ padding-block-start: var(--pf-t--global--spacer--sm);
250
+ font-size: var(--pf-t--global--font--size--body--sm);
251
+ color: var(--pf-t--global--text--color--subtle);
252
+ }
253
+
248
254
  .pf-v6-c-card__actions {
249
255
  display: flex;
250
256
  gap: var(--pf-v6-c-card__actions--Gap);
package/components/Card/card.scss CHANGED
@@ -296,7 +296,7 @@
296
296
  margin-inline-end: auto;
297
297
  }
298
298
 
299
- margin-inline-start: 0
299
+ margin-inline-start: 0;
300
300
  }
301
301
  }
302
302
  }
@@ -331,6 +331,12 @@
331
331
  overflow-wrap: var(--#{$card}__title-text--OverflowWrap);
332
332
  }
333
333
 
334
+ .#{$card}__subtitle {
335
+ padding-block-start: var(--pf-t--global--spacer--sm);
336
+ font-size: var(--pf-t--global--font--size--body--sm);
337
+ color: var(--pf-t--global--text--color--subtle);
338
+ }
339
+
334
340
  .#{$card}__actions {
335
341
  display: flex;
336
342
  gap: var(--#{$card}__actions--Gap);
package/components/Compass/compass.css CHANGED
@@ -56,6 +56,9 @@
56
56
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
57
57
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
58
58
  }
59
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
60
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
61
+ }
59
62
 
60
63
  .pf-v6-c-compass__header {
61
64
  display: grid;
package/components/Compass/compass.scss CHANGED
@@ -61,6 +61,13 @@
61
61
  :root:where(.pf-v6-theme-dark) & {
62
62
  --#{$compass}--BackgroundImage: var(--#{$compass}--BackgroundImage--dark);
63
63
  }
64
+
65
+ @at-root .#{$compass}__panel,
66
+ & {
67
+ &.pf-m-no-glass {
68
+ --#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
69
+ }
70
+ }
64
71
  }
65
72
 
66
73
  .#{$compass}__header {
package/components/_index.css CHANGED
@@ -1685,10 +1685,17 @@ button.pf-v6-c-breadcrumb__link {
1685
1685
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
1686
1686
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
1687
1687
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
1688
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
1688
1689
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1689
1690
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1691
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1692
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1690
1693
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1691
1694
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1695
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1696
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1697
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1698
+ --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);
1692
1699
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
1693
1700
  --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));
1694
1701
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -1698,10 +1705,8 @@ button.pf-v6-c-breadcrumb__link {
1698
1705
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
1699
1706
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
1700
1707
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
1701
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
1702
1708
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1703
1709
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1704
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
1705
1710
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1706
1711
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1707
1712
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -2026,12 +2031,13 @@ button.pf-v6-c-breadcrumb__link {
2026
2031
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
2027
2032
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
2028
2033
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
2034
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
2035
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
2036
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
2029
2037
  --pf-v6-c-button--BackgroundColor: transparent;
2030
2038
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
2031
2039
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
2032
2040
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
2033
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2034
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2035
2041
  --pf-v6-c-button--hover--BackgroundColor: transparent;
2036
2042
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
2037
2043
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -2040,6 +2046,8 @@ button.pf-v6-c-breadcrumb__link {
2040
2046
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
2041
2047
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
2042
2048
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
2049
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2050
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2043
2051
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
2044
2052
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
2045
2053
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -2047,6 +2055,7 @@ button.pf-v6-c-breadcrumb__link {
2047
2055
  --pf-v6-c-button--hover--BorderWidth: 0;
2048
2056
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
2049
2057
  text-align: start;
2058
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2050
2059
  white-space: normal;
2051
2060
  background: transparent;
2052
2061
  outline-offset: 0.125rem;
@@ -2057,6 +2066,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2057
2066
  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
2058
2067
  }
2059
2068
 
2069
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
2070
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
2071
+ }
2060
2072
  .pf-v6-c-button.pf-m-link.pf-m-danger {
2061
2073
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
2062
2074
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -2920,6 +2932,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2920
2932
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
2921
2933
  }
2922
2934
 
2935
+ .pf-v6-c-card__subtitle {
2936
+ padding-block-start: var(--pf-t--global--spacer--sm);
2937
+ font-size: var(--pf-t--global--font--size--body--sm);
2938
+ color: var(--pf-t--global--text--color--subtle);
2939
+ }
2940
+
2923
2941
  .pf-v6-c-card__actions {
2924
2942
  display: flex;
2925
2943
  gap: var(--pf-v6-c-card__actions--Gap);
@@ -3547,6 +3565,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3547
3565
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
3548
3566
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
3549
3567
  }
3568
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
3569
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3570
+ }
3550
3571
 
3551
3572
  .pf-v6-c-compass__header {
3552
3573
  display: grid;
package/docs/components/Card/examples/Card.md CHANGED
@@ -175,6 +175,159 @@ cssPrefix: pf-v6-c-card
175
175
 
176
176
  ```
177
177
 
178
+ ### With subtitle
179
+
180
+ ```html isBeta
181
+ <div class="pf-v6-c-card" id="card-subtitle">
182
+ <div class="pf-v6-c-card__header">
183
+ <div class="pf-v6-c-card__actions">
184
+ <button
185
+ class="pf-v6-c-menu-toggle pf-m-plain"
186
+ type="button"
187
+ aria-expanded="false"
188
+ aria-label="Card menu toggle"
189
+ id="card-subtitle-menu-toggle-kebab"
190
+ >
191
+ <span class="pf-v6-c-menu-toggle__icon">
192
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
193
+ </span>
194
+ </button>
195
+ <div class="pf-v6-c-check pf-m-standalone">
196
+ <input
197
+ class="pf-v6-c-check__input"
198
+ type="checkbox"
199
+ aria-label="Standalone check"
200
+ id="card-subtitle-check"
201
+ name="card-subtitle-check"
202
+ aria-labelledby="card-subtitle"
203
+ />
204
+ </div>
205
+ </div>
206
+ <div class="pf-v6-c-card__header-main">
207
+ <div class="pf-v6-c-card__title">
208
+ <h2
209
+ class="pf-v6-c-card__title-text"
210
+ id="card-subtitle-check-label"
211
+ >This is a really really really really really really really really really really long title</h2>
212
+ <div class="pf-v6-c-card__subtitle">This is a card subtitle.</div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ <div class="pf-v6-c-card__body">Body</div>
217
+ <div class="pf-v6-c-card__footer">Footer</div>
218
+ </div>
219
+ <br />
220
+ <div class="pf-v6-c-card" id="card-image-action-subtitle">
221
+ <div class="pf-v6-c-card__header">
222
+ <div class="pf-v6-c-card__header-main">
223
+ <svg height="70px" viewBox="0 0 679 158">
224
+ <title>PF-HorizontalLogo-Color</title>
225
+ <defs>
226
+ <linearGradient
227
+ x1="68%"
228
+ y1="2.25860997e-13%"
229
+ x2="32%"
230
+ y2="100%"
231
+ id="linearGradient-card-image-action-subtitle"
232
+ >
233
+ <stop stop-color="#2B9AF3" offset="0%" />
234
+ <stop
235
+ stop-color="#73BCF7"
236
+ stop-opacity="0.502212631"
237
+ offset="100%"
238
+ />
239
+ </linearGradient>
240
+ </defs>
241
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
242
+ <g
243
+ transform="translate(206.000000, 45.750000)"
244
+ fill="var(--pf-t--global--text--color--regular)"
245
+ fill-rule="nonzero"
246
+ >
247
+ <path
248
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
249
+ />
250
+ <path
251
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
252
+ />
253
+ <path
254
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
255
+ />
256
+ <path
257
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
258
+ />
259
+ <path
260
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
261
+ />
262
+ <path
263
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
264
+ />
265
+ <path
266
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
267
+ />
268
+ <polygon
269
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
270
+ />
271
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
272
+ <path
273
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
274
+ />
275
+ </g>
276
+ <g transform="translate(0.000000, 0.000000)">
277
+ <path
278
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
279
+ fill="#0066CC"
280
+ />
281
+ <path
282
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
283
+ fill="url(#linearGradient-card-image-action-subtitle)"
284
+ />
285
+ <path
286
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
287
+ fill="url(#linearGradient-card-image-action-subtitle)"
288
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
289
+ />
290
+ </g>
291
+ </g>
292
+ </svg>
293
+ </div>
294
+ <div class="pf-v6-c-card__actions">
295
+ <button
296
+ class="pf-v6-c-menu-toggle pf-m-plain"
297
+ type="button"
298
+ aria-expanded="false"
299
+ aria-label="Card menu toggle"
300
+ id="card-image-action-subtitle-menu-toggle-kebab"
301
+ >
302
+ <span class="pf-v6-c-menu-toggle__icon">
303
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
304
+ </span>
305
+ </button>
306
+ <div class="pf-v6-c-check pf-m-standalone">
307
+ <input
308
+ class="pf-v6-c-check__input"
309
+ type="checkbox"
310
+ aria-label="Standalone check"
311
+ id="card-image-action-subtitle-check"
312
+ name="card-image-action-subtitle-check"
313
+ aria-labelledby="card-image-action-subtitle"
314
+ />
315
+ </div>
316
+ </div>
317
+ </div>
318
+ <div class="pf-v6-c-card__title">
319
+ <h2
320
+ class="pf-v6-c-card__title-text"
321
+ id="card-image-action-subtitle-check-label"
322
+ >Title</h2>
323
+ <div class="pf-v6-c-card__subtitle">Subtitle</div>
324
+ </div>
325
+ <div class="pf-v6-c-card__body">Body</div>
326
+ <div class="pf-v6-c-card__footer">Footer</div>
327
+ </div>
328
+
329
+ ```
330
+
178
331
  ### With only actions in head (no title/footer)
179
332
 
180
333
  ```html
@@ -1709,6 +1862,7 @@ A card is a generic rectangular container that can be used to build other compon
1709
1862
  | `.pf-v6-c-card` | `<div>` | Creates a card component. **Required** |
1710
1863
  | `.pf-v6-c-card__title` | `<div>` | Creates a card title container. |
1711
1864
  | `.pf-v6-c-card__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates a card title text element. |
1865
+ | `.pf-v6-c-card__subtitle` | Creates a card subtitle element. |
1712
1866
  | `.pf-v6-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-v6-c-card__body` elements. |
1713
1867
  | `.pf-v6-c-card__footer` | `<div>` | Creates the footer of a card. |
1714
1868
  | `.pf-v6-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
package/docs/components/Compass/examples/Compass.md CHANGED
@@ -56,6 +56,7 @@ cssPrefix: pf-v6-c-compass
56
56
  | `.pf-v6-c-compass__panel` | `<div>` | Initiates a compass panel. |
57
57
  | `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. **Required** |
58
58
  | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the compass message bar. |
59
+ | `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
59
60
  | `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for start styles. **Required** |
60
61
  | `.pf-m-end` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for end styles. **Required** |
61
62
  | `.pf-m-no-border` | `.pf-v6-c-compass__panel` | Modifies a compass panel to remove the border. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.12",
4
+ "version": "6.5.0-prerelease.14",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -48,11 +48,14 @@
48
48
  "@commitlint/config-conventional": "^19.1.0",
49
49
  "@fortawesome/fontawesome": "^1.1.8",
50
50
  "@octokit/rest": "^20.1.0",
51
- "@patternfly/documentation-framework": "6.28.9",
51
+ "@patternfly/documentation-framework": "6.29.0",
52
52
  "@patternfly/patternfly-a11y": "5.1.0",
53
53
  "@patternfly/react-code-editor": "6.4.0",
54
54
  "@patternfly/react-core": "6.4.0",
55
55
  "@patternfly/react-table": "6.4.0",
56
+ "@rspack/cli": "^1.6.0",
57
+ "@rspack/core": "^1.6.0",
58
+ "@rspack/dev-server": "^1.1.4",
56
59
  "@starptech/prettyhtml": "^0.10.0",
57
60
  "backstopjs": "^6.3.25",
58
61
  "cheerio": "^1.0.0-rc.12",
package/patternfly-base-no-globals.css CHANGED
@@ -7114,6 +7114,11 @@
7114
7114
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7115
7115
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7116
7116
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7117
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7118
+ --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
7119
+ --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7120
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7121
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
7117
7122
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
7118
7123
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
7119
7124
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
package/patternfly-base.css CHANGED
@@ -118,11 +118,18 @@ pre) {
118
118
  :where(a) {
119
119
  color: var(--pf-t--global--text--color--link--default);
120
120
  text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
121
+ text-decoration-style: var(--pf-t--global--text-decoration--link--style--default);
122
+ text-decoration-color: var(--pf-t--global--text-decoration--color--default);
123
+ text-underline-offset: max(var(--pf-t--global--text-decoration--offset--default), 0.28em);
124
+ transition: ease text-underline-offset 0.3s;
121
125
  }
122
126
 
123
127
  :where(a:hover, a:focus) {
124
128
  color: var(--pf-t--global--text--color--link--hover);
125
129
  text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
130
+ text-decoration-style: var(--pf-t--global--text-decoration--link--style--hover);
131
+ text-decoration-color: var(--pf-t--global--text-decoration--color--hover);
132
+ text-underline-offset: max(var(--pf-t--global--text-decoration--offset--hover), 0.33em);
126
133
  }
127
134
 
128
135
  :where(a,
@@ -7254,6 +7261,11 @@ button) {
7254
7261
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7255
7262
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7256
7263
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7264
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7265
+ --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
7266
+ --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7267
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7268
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
7257
7269
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
7258
7270
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
7259
7271
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);