@patternfly/design-tokens 1.14.9 → 1.15.0

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 (52) hide show
  1. package/build/css/tokens-dark.scss +14 -15
  2. package/build/css/tokens-default.scss +10 -11
  3. package/build/css/tokens-glass-dark.scss +16 -3
  4. package/build/css/tokens-glass.scss +9 -3
  5. package/build/css/tokens-palette.scss +1 -1
  6. package/build/css/tokens-redhat-dark.scss +4 -3
  7. package/build/css/tokens-redhat-glass-dark.scss +18 -4
  8. package/build/css/tokens-redhat-glass.scss +9 -3
  9. package/build/css/tokens-redhat-highcontrast-dark.scss +10 -3
  10. package/build/css/tokens-redhat-highcontrast.scss +2 -2
  11. package/build/css/tokens-redhat.scss +1 -1
  12. package/package.json +1 -1
  13. package/patternfly-docs/content/token-layers-glass-dark.json +497 -1097
  14. package/patternfly-docs/content/token-layers-glass.json +332 -904
  15. package/patternfly-docs/content/token-layers-highcontrast-dark.json +410 -385
  16. package/patternfly-docs/content/token-layers-highcontrast.json +540 -519
  17. package/patternfly-docs/content/token-layers-redhat-dark.json +2555 -2592
  18. package/patternfly-docs/content/token-layers-redhat-glass-dark.json +1112 -1768
  19. package/patternfly-docs/content/token-layers-redhat-glass.json +327 -899
  20. package/patternfly-docs/content/token-layers-redhat-highcontrast-dark.json +443 -422
  21. package/patternfly-docs/content/token-layers-redhat-highcontrast.json +626 -609
  22. package/patternfly-docs/content/token-layers-redhat.json +692 -671
  23. package/plugins/export-patternfly-tokens/dist/ui.html +32 -24
  24. package/plugins/export-patternfly-tokens/src/ui.tsx +8 -0
  25. package/tokens/default/dark/base.dark.json +5 -5
  26. package/tokens/default/dark/charts.dark.json +18 -18
  27. package/tokens/default/dark/semantic.dark.json +34 -39
  28. package/tokens/default/glass/base.dimension.json +16 -16
  29. package/tokens/default/glass/base.json +2 -2
  30. package/tokens/default/glass/semantic.glass.json +33 -38
  31. package/tokens/default/glass-dark/base.dark.json +5 -5
  32. package/tokens/default/glass-dark/semantic.glass.dark.json +45 -50
  33. package/tokens/default/highcontrast/base.dimension.json +16 -16
  34. package/tokens/default/highcontrast/base.json +2 -2
  35. package/tokens/default/highcontrast/semantic.dimension.highcontrast.json +5 -5
  36. package/tokens/default/highcontrast/semantic.highcontrast.json +27 -32
  37. package/tokens/default/highcontrast-dark/base.dark.json +5 -5
  38. package/tokens/default/highcontrast-dark/semantic.highcontrast.dark.json +27 -32
  39. package/tokens/default/light/base.dimension.json +16 -16
  40. package/tokens/default/light/base.json +2 -2
  41. package/tokens/default/light/charts.json +18 -18
  42. package/tokens/default/light/semantic.dimension.json +5 -5
  43. package/tokens/default/light/semantic.json +27 -32
  44. package/tokens/default/light/semantic.motion.json +8 -8
  45. package/tokens/redhat/dark/redhat.color.dark.json +71 -24
  46. package/tokens/redhat/glass/redhat.color.glass.json +25 -25
  47. package/tokens/redhat/glass-dark/redhat.color.glass.dark.json +67 -25
  48. package/tokens/redhat/highcontrast/redhat.color.highcontrast.json +25 -25
  49. package/tokens/redhat/highcontrast/redhat.dimension.highcontrast.json +6 -6
  50. package/tokens/redhat/highcontrast-dark/redhat.color.highcontrast.dark.json +25 -25
  51. package/tokens/redhat/light/redhat.color.json +25 -25
  52. package/tokens/redhat/light/redhat.dimension.json +6 -6
package/build/css/tokens-dark.scss CHANGED
@@ -1,19 +1,17 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:40 GMT
3
+ // Generated on Mon, 09 Mar 2026 19:57:03 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
7
7
  --pf-t--global--background--filter--glass--blur--floating: blur(0px);
8
8
  --pf-t--global--background--filter--glass--blur--primary: blur(0px);
9
- --pf-t--global--background--opacity--glass--floating: 100%;
10
- --pf-t--global--background--opacity--glass--primary: 100%;
11
9
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
12
10
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
13
11
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
14
12
  --pf-t--global--dark--background--color--700: rgba(199, 199, 199, 0.2500);
15
13
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
16
- --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
14
+ --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.6000);
17
15
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
18
16
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
19
17
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
@@ -23,7 +21,7 @@
23
21
  --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
24
22
  --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
25
23
  --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
26
- --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
24
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--100);
27
25
  --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
28
26
  --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
29
27
  --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
@@ -36,14 +34,14 @@
36
34
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
37
35
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
38
36
  --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30);
39
- --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--70);
37
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
40
38
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
41
39
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
42
40
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
43
41
  --pf-t--global--dark--color--brand--accent--100: var(--pf-t--color--red--50);
44
- --pf-t--global--dark--color--brand--accent--200: var(--pf-t--color--red--40);
45
- --pf-t--global--dark--color--brand--accent--300: var(--pf-t--color--red--30);
46
- --pf-t--global--dark--color--brand--accent--350: var(--pf-t--color--red--20);
42
+ --pf-t--global--dark--color--brand--accent--200: var(--pf-t--color--red--60);
43
+ --pf-t--global--dark--color--brand--accent--300: var(--pf-t--color--red--40);
44
+ --pf-t--global--dark--color--brand--accent--350: var(--pf-t--color--gray--20);
47
45
  --pf-t--global--dark--color--brand--accent--400: var(--pf-t--color--white);
48
46
  --pf-t--global--dark--color--brand--subtle--100: var(--pf-t--color--blue--70);
49
47
  --pf-t--global--dark--color--brand--subtle--200: var(--pf-t--color--blue--60);
@@ -119,7 +117,7 @@
119
117
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
120
118
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
121
119
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
122
- --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
120
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--200);
123
121
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
124
122
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
125
123
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
@@ -135,6 +133,7 @@
135
133
  --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
136
134
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
137
135
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
136
+ --pf-t--global--background--color--sticky--default: var(--pf-t--global--dark--background--color--200);
138
137
  --pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--dark--color--brand--subtle--300);
139
138
  --pf-t--global--border--color--brand--subtle--default: var(--pf-t--global--dark--color--brand--subtle--200);
140
139
  --pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--dark--color--brand--subtle--300);
@@ -318,9 +317,9 @@
318
317
  --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse);
319
318
  --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
320
319
  --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
321
- --pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--inverse);
320
+ --pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--regular);
322
321
  --pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--regular);
323
- --pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--inverse);
322
+ --pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--regular);
324
323
  --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
325
324
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
326
325
  --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
@@ -390,9 +389,9 @@
390
389
  --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse);
391
390
  --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse);
392
391
  --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse);
393
- --pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--inverse);
394
- --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--inverse);
395
- --pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--inverse);
392
+ --pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--regular);
393
+ --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
394
+ --pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--regular);
396
395
  --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
397
396
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
398
397
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
package/build/css/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:40 GMT
3
+ // Generated on Mon, 09 Mar 2026 19:57:03 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.4000);
@@ -9,8 +9,6 @@
9
9
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
10
10
  --pf-t--global--background--filter--glass--blur--floating: blur(0px);
11
11
  --pf-t--global--background--filter--glass--blur--primary: blur(0px);
12
- --pf-t--global--background--opacity--glass--floating: 100%;
13
- --pf-t--global--background--opacity--glass--primary: 100%;
14
12
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
15
13
  --pf-t--global--border--radius--0: 0px;
16
14
  --pf-t--global--border--radius--100: 4px;
@@ -30,24 +28,24 @@
30
28
  --pf-t--global--border--width--high-contrast--strong: 0px;
31
29
  --pf-t--global--box-shadow--X--100: -10px;
32
30
  --pf-t--global--box-shadow--X--200: -4px;
33
- --pf-t--global--box-shadow--X--300: -1px;
31
+ --pf-t--global--box-shadow--X--300: -2px;
34
32
  --pf-t--global--box-shadow--X--400: 0px;
35
33
  --pf-t--global--box-shadow--X--50: -20px;
36
- --pf-t--global--box-shadow--X--500: 1px;
34
+ --pf-t--global--box-shadow--X--500: 2px;
37
35
  --pf-t--global--box-shadow--X--600: 4px;
38
36
  --pf-t--global--box-shadow--X--700: 10px;
39
37
  --pf-t--global--box-shadow--X--800: 20px;
40
38
  --pf-t--global--box-shadow--Y--100: -10px;
41
- --pf-t--global--box-shadow--Y--200: -2px;
39
+ --pf-t--global--box-shadow--Y--200: -4px;
42
40
  --pf-t--global--box-shadow--Y--300: -1px;
43
41
  --pf-t--global--box-shadow--Y--400: 0px;
44
42
  --pf-t--global--box-shadow--Y--50: -20px;
45
43
  --pf-t--global--box-shadow--Y--500: 1px;
46
- --pf-t--global--box-shadow--Y--600: 2px;
44
+ --pf-t--global--box-shadow--Y--600: 4px;
47
45
  --pf-t--global--box-shadow--Y--700: 10px;
48
46
  --pf-t--global--box-shadow--Y--800: 20px;
49
- --pf-t--global--box-shadow--blur--100: 4px;
50
- --pf-t--global--box-shadow--blur--200: 9px;
47
+ --pf-t--global--box-shadow--blur--100: 6px;
48
+ --pf-t--global--box-shadow--blur--200: 10px;
51
49
  --pf-t--global--box-shadow--blur--300: 20px;
52
50
  --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
53
51
  --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
@@ -143,7 +141,7 @@
143
141
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
144
142
  --pf-t--global--border--color--300: var(--pf-t--color--gray--45);
145
143
  --pf-t--global--border--color--400: var(--pf-t--color--gray--60);
146
- --pf-t--global--border--color--50: var(--pf-t--color--gray--10);
144
+ --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
147
145
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
148
146
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
149
147
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -231,7 +229,7 @@
231
229
  --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
232
230
  --pf-t--global--color--brand--accent--100: var(--pf-t--color--red--50);
233
231
  --pf-t--global--color--brand--accent--200: var(--pf-t--color--red--60);
234
- --pf-t--global--color--brand--accent--300: var(--pf-t--color--red--70);
232
+ --pf-t--global--color--brand--accent--300: var(--pf-t--color--gray--60);
235
233
  --pf-t--global--color--brand--accent--400: var(--pf-t--color--black);
236
234
  --pf-t--global--color--brand--subtle--100: var(--pf-t--color--blue--10);
237
235
  --pf-t--global--color--brand--subtle--200: var(--pf-t--color--blue--20);
@@ -416,6 +414,7 @@
416
414
  --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
417
415
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
418
416
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
417
+ --pf-t--global--background--color--sticky--default: var(--pf-t--global--background--color--100);
419
418
  --pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--300);
420
419
  --pf-t--global--border--color--brand--subtle--default: var(--pf-t--global--color--brand--subtle--200);
421
420
  --pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--300);
package/build/css/tokens-glass-dark.scss CHANGED
@@ -1,9 +1,22 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:41 GMT
3
+ // Generated on Mon, 09 Mar 2026 19:57:03 GMT
4
4
 
5
- // Only tokens that differ from base theme (2 tokens)
5
+ // Only tokens that differ from base theme (15 tokens)
6
6
  @mixin pf-v6-tokens {
7
+ --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.5000);
8
+ --pf-t--global--background--color--primary--clicked: rgba(56, 56, 56, 0.5000);
9
+ --pf-t--global--background--color--primary--default: rgba(41, 41, 41, 0.5000);
10
+ --pf-t--global--background--color--primary--hover: rgba(56, 56, 56, 0.5000);
11
+ --pf-t--global--background--color--secondary--clicked: rgba(41, 41, 41, 0.6000);
12
+ --pf-t--global--background--color--secondary--default: rgba(21, 21, 21, 0.6000);
13
+ --pf-t--global--background--color--secondary--hover: rgba(41, 41, 41, 0.6000);
7
14
  --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8
- --pf-t--global--background--opacity--glass--primary: 80%;
15
+ --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--500);
16
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--500);
17
+ --pf-t--global--border--color--subtle: var(--pf-t--color--gray--70);
18
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
19
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
20
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
21
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--alt);
9
22
  }
package/build/css/tokens-glass.scss CHANGED
@@ -1,9 +1,15 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:41 GMT
3
+ // Generated on Mon, 09 Mar 2026 19:57:03 GMT
4
4
 
5
- // Only tokens that differ from base theme (2 tokens)
5
+ // Only tokens that differ from base theme (8 tokens)
6
6
  @mixin pf-v6-tokens {
7
+ --pf-t--global--background--color--glass--primary: rgba(255, 255, 255, 0.5000);
8
+ --pf-t--global--background--color--primary--clicked: rgba(242, 242, 242, 0.8000);
9
+ --pf-t--global--background--color--primary--default: rgba(255, 255, 255, 0.8000);
10
+ --pf-t--global--background--color--primary--hover: rgba(242, 242, 242, 0.8000);
11
+ --pf-t--global--background--color--secondary--clicked: rgba(163, 163, 163, 0.3000);
12
+ --pf-t--global--background--color--secondary--default: rgba(199, 199, 199, 0.3000);
13
+ --pf-t--global--background--color--secondary--hover: rgba(163, 163, 163, 0.3000);
7
14
  --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8
- --pf-t--global--background--opacity--glass--primary: 80%;
9
15
  }
package/build/css/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:40 GMT
3
+ // Generated on Mon, 09 Mar 2026 19:57:03 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--black: #000000;
package/build/css/tokens-redhat-dark.scss CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:41 GMT
3
+ // Generated on Mon, 09 Mar 2026 19:57:03 GMT
4
4
 
5
- // Only tokens that differ from base theme (7 tokens)
5
+ // Only tokens that differ from base theme (8 tokens)
6
6
  @mixin pf-v6-tokens {
7
7
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
8
8
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
@@ -10,5 +10,6 @@
10
10
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
11
11
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
12
12
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
13
- --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
13
+ --pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--300);
14
+ --pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--300);
14
15
  }
package/build/css/tokens-redhat-glass-dark.scss CHANGED
@@ -1,16 +1,30 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:41 GMT
3
+ // Generated on Mon, 09 Mar 2026 19:57:04 GMT
4
4
 
5
- // Only tokens that differ from base theme (9 tokens)
5
+ // Only tokens that differ from base theme (23 tokens)
6
6
  @mixin pf-v6-tokens {
7
+ --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.5000);
8
+ --pf-t--global--background--color--primary--clicked: rgba(56, 56, 56, 0.5000);
9
+ --pf-t--global--background--color--primary--default: rgba(41, 41, 41, 0.5000);
10
+ --pf-t--global--background--color--primary--hover: rgba(56, 56, 56, 0.5000);
11
+ --pf-t--global--background--color--secondary--clicked: rgba(41, 41, 41, 0.6000);
12
+ --pf-t--global--background--color--secondary--default: rgba(21, 21, 21, 0.6000);
13
+ --pf-t--global--background--color--secondary--hover: rgba(41, 41, 41, 0.6000);
7
14
  --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8
- --pf-t--global--background--opacity--glass--primary: 80%;
15
+ --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--500);
16
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--500);
17
+ --pf-t--global--border--color--subtle: var(--pf-t--color--gray--70);
18
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
19
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
20
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
9
21
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
10
22
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
11
23
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
24
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--alt);
12
25
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
13
26
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
14
27
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
15
- --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
28
+ --pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--300);
29
+ --pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--300);
16
30
  }
package/build/css/tokens-redhat-glass.scss CHANGED
@@ -1,11 +1,17 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:41 GMT
3
+ // Generated on Mon, 09 Mar 2026 19:57:04 GMT
4
4
 
5
- // Only tokens that differ from base theme (8 tokens)
5
+ // Only tokens that differ from base theme (14 tokens)
6
6
  @mixin pf-v6-tokens {
7
+ --pf-t--global--background--color--glass--primary: rgba(255, 255, 255, 0.5000);
8
+ --pf-t--global--background--color--primary--clicked: rgba(242, 242, 242, 0.8000);
9
+ --pf-t--global--background--color--primary--default: rgba(255, 255, 255, 0.8000);
10
+ --pf-t--global--background--color--primary--hover: rgba(242, 242, 242, 0.8000);
11
+ --pf-t--global--background--color--secondary--clicked: rgba(163, 163, 163, 0.3000);
12
+ --pf-t--global--background--color--secondary--default: rgba(199, 199, 199, 0.3000);
13
+ --pf-t--global--background--color--secondary--hover: rgba(163, 163, 163, 0.3000);
7
14
  --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8
- --pf-t--global--background--opacity--glass--primary: 80%;
9
15
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
10
16
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
11
17
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
package/build/css/tokens-redhat-highcontrast-dark.scss CHANGED
@@ -1,13 +1,15 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:41 GMT
3
+ // Generated on Mon, 09 Mar 2026 19:57:04 GMT
4
4
 
5
- // Only tokens that differ from base theme (40 tokens)
5
+ // Only tokens that differ from base theme (47 tokens)
6
6
  @mixin pf-v6-tokens {
7
7
  --pf-t--global--background--color--primary--default: var(--pf-t--color--black);
8
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
8
9
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
9
10
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
10
11
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--100);
12
+ --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
11
13
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--200);
12
14
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
13
15
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
@@ -23,7 +25,7 @@
23
25
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--300);
24
26
  --pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--300);
25
27
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--350);
26
- --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--300);
28
+ --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
27
29
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--350);
28
30
  --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--100);
29
31
  --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--50);
@@ -43,5 +45,10 @@
43
45
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--300);
44
46
  --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
45
47
  --pf-t--global--border--color--main--default: var(--pf-t--global--border--color--default);
48
+ --pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--inverse);
46
49
  --pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--inverse);
50
+ --pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--inverse);
51
+ --pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--inverse);
52
+ --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--inverse);
53
+ --pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--inverse);
47
54
  }
package/build/css/tokens-redhat-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:41 GMT
3
+ // Generated on Mon, 09 Mar 2026 19:57:04 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (120 tokens)
6
6
  @mixin pf-v6-tokens {
@@ -58,7 +58,7 @@
58
58
  --pf-t--global--border--width--high-contrast--regular: var(--pf-t--global--border--width--regular);
59
59
  --pf-t--global--border--width--high-contrast--strong: var(--pf-t--global--border--width--strong);
60
60
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--300);
61
- --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--200);
61
+ --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
62
62
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--300);
63
63
  --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400);
64
64
  --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300);
package/build/css/tokens-redhat.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:41 GMT
3
+ // Generated on Mon, 09 Mar 2026 19:57:03 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (8 tokens)
6
6
  @mixin pf-v6-tokens {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/design-tokens",
3
- "version": "1.14.9",
3
+ "version": "1.15.0",
4
4
  "description": "Define the design tokens for patternfly design system and component library",
5
5
  "main": "dist/esm/index.js",
6
6
  "module": "dist/esm/index.js",