@patternfly/patternfly 6.6.0-prerelease.13 → 6.6.0-prerelease.15

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 (48) hide show
  1. package/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 +0 -0
  2. package/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 +0 -0
  3. package/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 +0 -0
  4. package/assets/fonts/RedHatMono/RedHatMonoVF.woff2 +0 -0
  5. package/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatText/RedHatTextVF.woff2 +0 -0
  7. package/base/patternfly-fonts.css +4 -4
  8. package/base/patternfly-fonts.scss +4 -4
  9. package/base/patternfly-variables.css +6 -6
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  12. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  13. package/base/tokens/tokens-charts.scss +1 -1
  14. package/base/tokens/tokens-dark.scss +1 -1
  15. package/base/tokens/tokens-default.scss +4 -4
  16. package/base/tokens/tokens-felt-dark.scss +1 -1
  17. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  18. package/base/tokens/tokens-felt-glass.scss +1 -1
  19. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  20. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  21. package/base/tokens/tokens-felt.scss +1 -1
  22. package/base/tokens/tokens-glass-dark.scss +1 -1
  23. package/base/tokens/tokens-glass.scss +1 -1
  24. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  25. package/base/tokens/tokens-highcontrast.scss +4 -4
  26. package/base/tokens/tokens-palette.scss +1 -1
  27. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  28. package/components/Banner/banner.css +3 -0
  29. package/components/Banner/banner.scss +4 -1
  30. package/components/Button/button.css +15 -1
  31. package/components/Button/button.scss +17 -1
  32. package/components/_index.css +18 -1
  33. package/docs/components/DualListSelector/examples/DualListSelector.md +72 -72
  34. package/docs/components/Pagination/examples/Pagination.md +120 -120
  35. package/docs/components/Toolbar/examples/Toolbar.md +16 -16
  36. package/docs/demos/CardView/examples/CardView.md +12 -12
  37. package/docs/demos/Compass/examples/Compass.md +16 -16
  38. package/docs/demos/DataList/examples/DataList.md +48 -48
  39. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +20 -20
  40. package/docs/demos/Table/examples/Table.md +160 -160
  41. package/docs/demos/Toolbar/examples/Toolbar.md +36 -36
  42. package/package.json +1 -1
  43. package/patternfly-base-no-globals.css +10 -10
  44. package/patternfly-base.css +10 -10
  45. package/patternfly-no-globals.css +28 -11
  46. package/patternfly.css +28 -11
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
package/base/patternfly-fonts.css CHANGED
@@ -1,28 +1,28 @@
1
1
  @font-face {
2
2
  font-family: "Red Hat Text";
3
3
  font-style: normal;
4
- font-weight: 400 500;
4
+ font-weight: 400 600;
5
5
  src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
6
6
  font-display: fallback;
7
7
  }
8
8
  @font-face {
9
9
  font-family: "Red Hat Text";
10
10
  font-style: italic;
11
- font-weight: 400 500;
11
+ font-weight: 400 600;
12
12
  src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
13
13
  font-display: fallback;
14
14
  }
15
15
  @font-face {
16
16
  font-family: "Red Hat Display";
17
17
  font-style: normal;
18
- font-weight: 400 700;
18
+ font-weight: 600 800;
19
19
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
20
20
  font-display: fallback;
21
21
  }
22
22
  @font-face {
23
23
  font-family: "Red Hat Display";
24
24
  font-style: italic;
25
- font-weight: 400 700;
25
+ font-weight: 600 800;
26
26
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
27
27
  font-display: fallback;
28
28
  }
package/base/patternfly-fonts.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @font-face {
4
4
  font-family: "Red Hat Text";
5
5
  font-style: normal;
6
- font-weight: 400 500;
6
+ font-weight: 400 600;
7
7
  src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
8
8
  font-display: fallback;
9
9
  }
@@ -11,7 +11,7 @@
11
11
  @font-face {
12
12
  font-family: "Red Hat Text";
13
13
  font-style: italic;
14
- font-weight: 400 500;
14
+ font-weight: 400 600;
15
15
  src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
16
16
  font-display: fallback;
17
17
  }
@@ -19,7 +19,7 @@
19
19
  @font-face {
20
20
  font-family: "Red Hat Display";
21
21
  font-style: normal;
22
- font-weight: 400 700;
22
+ font-weight: 600 800;
23
23
  src: url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
24
24
  font-display: fallback;
25
25
  }
@@ -27,7 +27,7 @@
27
27
  @font-face {
28
28
  font-family: "Red Hat Display";
29
29
  font-style: italic;
30
- font-weight: 400 700;
30
+ font-weight: 600 800;
31
31
  src: url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
32
32
  font-display: fallback;
33
33
  }
package/base/patternfly-variables.css CHANGED
@@ -167,9 +167,9 @@
167
167
  --pf-t--global--font--size--700: 1.75rem;
168
168
  --pf-t--global--font--size--800: 2.25rem;
169
169
  --pf-t--global--font--weight--100: 400;
170
- --pf-t--global--font--weight--200: 500;
171
- --pf-t--global--font--weight--300: 500;
172
- --pf-t--global--font--weight--400: 700;
170
+ --pf-t--global--font--weight--200: 600;
171
+ --pf-t--global--font--weight--300: 600;
172
+ --pf-t--global--font--weight--400: 800;
173
173
  --pf-t--global--icon--size--100: 0.75rem;
174
174
  --pf-t--global--icon--size--200: 0.875rem;
175
175
  --pf-t--global--icon--size--250: 1rem;
@@ -1067,9 +1067,9 @@
1067
1067
  --pf-t--global--font--size--700: 1.75rem;
1068
1068
  --pf-t--global--font--size--800: 2.25rem;
1069
1069
  --pf-t--global--font--weight--100: 400;
1070
- --pf-t--global--font--weight--200: 500;
1071
- --pf-t--global--font--weight--300: 500;
1072
- --pf-t--global--font--weight--400: 700;
1070
+ --pf-t--global--font--weight--200: 600;
1071
+ --pf-t--global--font--weight--300: 600;
1072
+ --pf-t--global--font--weight--400: 800;
1073
1073
  --pf-t--global--icon--size--100: 0.75rem;
1074
1074
  --pf-t--global--icon--size--200: 0.875rem;
1075
1075
  --pf-t--global--icon--size--250: 1rem;
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgb(0, 0, 0, 0.0000);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgb(21, 21, 21, 0.4000);
@@ -92,9 +92,9 @@
92
92
  --pf-t--global--font--size--700: 1.75rem;
93
93
  --pf-t--global--font--size--800: 2.25rem;
94
94
  --pf-t--global--font--weight--100: 400;
95
- --pf-t--global--font--weight--200: 500;
96
- --pf-t--global--font--weight--300: 500;
97
- --pf-t--global--font--weight--400: 700;
95
+ --pf-t--global--font--weight--200: 600;
96
+ --pf-t--global--font--weight--300: 600;
97
+ --pf-t--global--font--weight--400: 800;
98
98
  --pf-t--global--icon--size--100: 0.75rem;
99
99
  --pf-t--global--icon--size--200: 0.875rem;
100
100
  --pf-t--global--icon--size--250: 1rem;
package/base/tokens/tokens-felt-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (14 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt-glass-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (33 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt-glass.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (24 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (43 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (122 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (8 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-glass-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (19 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-glass.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (16 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgb(0, 0, 0, 0.0000);
package/base/tokens/tokens-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgb(21, 21, 21, 0.4000);
@@ -75,9 +75,9 @@
75
75
  --pf-t--global--font--size--700: 1.75rem;
76
76
  --pf-t--global--font--size--800: 2.25rem;
77
77
  --pf-t--global--font--weight--100: 400;
78
- --pf-t--global--font--weight--200: 500;
79
- --pf-t--global--font--weight--300: 500;
80
- --pf-t--global--font--weight--400: 700;
78
+ --pf-t--global--font--weight--200: 600;
79
+ --pf-t--global--font--weight--300: 600;
80
+ --pf-t--global--font--weight--400: 800;
81
81
  --pf-t--global--icon--size--100: 0.75rem;
82
82
  --pf-t--global--icon--size--200: 0.875rem;
83
83
  --pf-t--global--icon--size--250: 1rem;
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--black: #000000;
package/base/tokens/tokens-redhat-highcontrast.scss CHANGED
@@ -314,10 +314,10 @@
314
314
  --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
315
315
  --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500);
316
316
  --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
317
- --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
317
+ --pf-t--global--font--weight--body--bold: 600;
318
318
  --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100);
319
- --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
320
- --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
319
+ --pf-t--global--font--weight--heading--bold: 800;
320
+ --pf-t--global--font--weight--heading--default: 600;
321
321
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
322
322
  --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
323
323
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
package/components/Banner/banner.css CHANGED
@@ -21,6 +21,7 @@
21
21
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
22
22
  --pf-v6-c-banner--link--TextDecoration: underline;
23
23
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
24
+ --pf-v6-c-banner--link--clicked--Color: var(--pf-v6-c-banner--Color);
24
25
  --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
25
26
  --pf-v6-c-banner--link--TextDecorationColor: currentcolor;
26
27
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
@@ -143,9 +144,11 @@
143
144
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
144
145
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
145
146
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
147
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-v6-c-banner--link--clicked--Color);
146
148
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
147
149
  --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
148
150
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
151
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
149
152
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
150
153
  }
151
154
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
package/components/Banner/banner.scss CHANGED
@@ -22,6 +22,7 @@
22
22
  --#{$banner}--link--Color: var(--#{$banner}--Color);
23
23
  --#{$banner}--link--TextDecoration: underline;
24
24
  --#{$banner}--link--hover--Color: var(--#{$banner}--Color);
25
+ --#{$banner}--link--clicked--Color: var(--#{$banner}--Color);
25
26
  --#{$banner}--link--disabled--Color: var(--pf-t--global--text--color--disabled);
26
27
  --#{$banner}--link--TextDecorationColor: currentcolor;
27
28
 
@@ -173,10 +174,12 @@
173
174
  .#{$button}.pf-m-inline {
174
175
  --#{$button}--m-link--m-inline--Color: var(--#{$banner}--link--Color);
175
176
  --#{$button}--m-link--m-inline--hover--Color: var(--#{$banner}--link--hover--Color);
177
+ --#{$button}--m-link--m-inline--m-clicked--Color: var(--#{$banner}--link--clicked--Color);
176
178
  --#{$button}--disabled--Color: var(--#{$banner}--link--disabled--Color);
177
179
  --#{$button}--m-link--m-inline--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
178
180
  --#{$button}--m-link--m-inline--hover--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
179
-
181
+ --#{$button}--m-link--m-inline--m-clicked--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
182
+
180
183
  text-decoration-line: var(--#{$banner}--link--TextDecoration);
181
184
 
182
185
  &:disabled,
package/components/Button/button.css CHANGED
@@ -126,6 +126,10 @@
126
126
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
127
127
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
128
128
  --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
129
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
130
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
131
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
132
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
129
133
  --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
130
134
  --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
131
135
  --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);
@@ -140,6 +144,8 @@
140
144
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
141
145
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
142
146
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
147
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
148
+ --pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
143
149
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
144
150
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
145
151
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -512,9 +518,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
512
518
  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
513
519
  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
514
520
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
515
- --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
521
+ --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine);
522
+ --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle);
523
+ --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor);
524
+ --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
516
525
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
517
526
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
527
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked--Color);
528
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color);
518
529
  --pf-v6-c-button--BorderWidth: 0;
519
530
  --pf-v6-c-button--hover--BorderWidth: 0;
520
531
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
@@ -527,6 +538,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
527
538
  .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
528
539
  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
529
540
  }
541
+ .pf-v6-c-button.pf-m-link.pf-m-inline:active, .pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-clicked {
542
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
543
+ }
530
544
  .pf-v6-c-button.pf-m-link.pf-m-danger {
531
545
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
532
546
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
package/components/Button/button.scss CHANGED
@@ -144,6 +144,10 @@
144
144
  --#{$button}--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
145
145
  --#{$button}--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
146
146
  --#{$button}--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
147
+ --#{$button}--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
148
+ --#{$button}--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
149
+ --#{$button}--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
150
+ --#{$button}--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
147
151
  --#{$button}--m-link--m-inline--TransitionProperty: color, text-underline-offset;
148
152
  --#{$button}--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
149
153
  --#{$button}--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
@@ -158,6 +162,8 @@
158
162
  --#{$button}--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
159
163
  --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
160
164
  --#{$button}--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
165
+ --#{$button}--m-link--m-inline--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
166
+ --#{$button}--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
161
167
 
162
168
  // Plain
163
169
  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
@@ -588,9 +594,14 @@
588
594
  --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
589
595
  --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
590
596
  --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
591
- --#{$button}--hover--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--TextUnderlineOffset);
597
+ --#{$button}--m-clicked--TextDecorationLine: var(--#{$button}--m-link--m-inline--m-clicked--TextDecorationLine);
598
+ --#{$button}--m-clicked--TextDecorationStyle: var(--#{$button}--m-link--m-inline--m-clicked--TextDecorationStyle);
599
+ --#{$button}--m-clicked--TextDecorationColor: var(--#{$button}--m-link--m-inline--m-clicked--TextDecorationColor);
600
+ --#{$button}--m-clicked--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--m-clicked--TextUnderlineOffset);
592
601
  --#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color);
593
602
  --#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color);
603
+ --#{$button}--m-link--m-clicked--Color: var(--#{$button}--m-link--m-inline--m-clicked--Color);
604
+ --#{$button}--m-link--m-clicked__icon--Color: var(--#{$button}--m-link--m-inline--m-clicked__icon--Color);
594
605
  --#{$button}--BorderWidth: 0;
595
606
  --#{$button}--hover--BorderWidth: 0;
596
607
  --#{$button}--m-clicked--BorderWidth: 0;
@@ -605,6 +616,11 @@
605
616
  &:focus {
606
617
  --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--hover--TextUnderlineOffset);
607
618
  }
619
+
620
+ &:active,
621
+ &.pf-m-clicked {
622
+ --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--m-clicked--TextUnderlineOffset);
623
+ }
608
624
  }
609
625
 
610
626
  &.pf-m-danger {
package/components/_index.css CHANGED
@@ -1457,6 +1457,7 @@ div.pf-v6-c-avatar {
1457
1457
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
1458
1458
  --pf-v6-c-banner--link--TextDecoration: underline;
1459
1459
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
1460
+ --pf-v6-c-banner--link--clicked--Color: var(--pf-v6-c-banner--Color);
1460
1461
  --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
1461
1462
  --pf-v6-c-banner--link--TextDecorationColor: currentcolor;
1462
1463
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
@@ -1579,9 +1580,11 @@ div.pf-v6-c-avatar {
1579
1580
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
1580
1581
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
1581
1582
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
1583
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-v6-c-banner--link--clicked--Color);
1582
1584
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
1583
1585
  --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
1584
1586
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
1587
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
1585
1588
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
1586
1589
  }
1587
1590
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
@@ -1898,6 +1901,10 @@ button.pf-v6-c-breadcrumb__link {
1898
1901
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1899
1902
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1900
1903
  --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1904
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1905
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1906
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1907
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1901
1908
  --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1902
1909
  --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1903
1910
  --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);
@@ -1912,6 +1919,8 @@ button.pf-v6-c-breadcrumb__link {
1912
1919
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
1913
1920
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1914
1921
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1922
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1923
+ --pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1915
1924
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
1916
1925
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1917
1926
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -2284,9 +2293,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2284
2293
  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2285
2294
  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2286
2295
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
2287
- --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2296
+ --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine);
2297
+ --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle);
2298
+ --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor);
2299
+ --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
2288
2300
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
2289
2301
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
2302
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked--Color);
2303
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color);
2290
2304
  --pf-v6-c-button--BorderWidth: 0;
2291
2305
  --pf-v6-c-button--hover--BorderWidth: 0;
2292
2306
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
@@ -2299,6 +2313,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2299
2313
  .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
2300
2314
  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
2301
2315
  }
2316
+ .pf-v6-c-button.pf-m-link.pf-m-inline:active, .pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-clicked {
2317
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
2318
+ }
2302
2319
  .pf-v6-c-button.pf-m-link.pf-m-danger {
2303
2320
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
2304
2321
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);