@patternfly/design-tokens 1.14.9 → 1.15.1

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 (55) hide show
  1. package/build/css/tokens-dark.scss +16 -16
  2. package/build/css/tokens-default.scss +17 -15
  3. package/build/css/tokens-glass-dark.scss +21 -4
  4. package/build/css/tokens-glass.scss +17 -4
  5. package/build/css/tokens-palette.scss +1 -1
  6. package/build/css/tokens-redhat-dark.scss +9 -2
  7. package/build/css/tokens-redhat-glass-dark.scss +27 -4
  8. package/build/css/tokens-redhat-glass.scss +17 -4
  9. package/build/css/tokens-redhat-highcontrast-dark.scss +5 -4
  10. package/build/css/tokens-redhat-highcontrast.scss +2 -2
  11. package/build/css/tokens-redhat.scss +1 -1
  12. package/build.js +44 -1
  13. package/package.json +1 -1
  14. package/patternfly-docs/content/token-layers-glass-dark.json +497 -965
  15. package/patternfly-docs/content/token-layers-glass.json +12337 -991
  16. package/patternfly-docs/content/token-layers-highcontrast-dark.json +849 -553
  17. package/patternfly-docs/content/token-layers-highcontrast.json +1237 -927
  18. package/patternfly-docs/content/token-layers-redhat-dark.json +2731 -2662
  19. package/patternfly-docs/content/token-layers-redhat-glass-dark.json +1700 -2230
  20. package/patternfly-docs/content/token-layers-redhat-glass.json +12497 -1151
  21. package/patternfly-docs/content/token-layers-redhat-highcontrast-dark.json +500 -373
  22. package/patternfly-docs/content/token-layers-redhat-highcontrast.json +1304 -998
  23. package/patternfly-docs/content/token-layers-redhat.json +1650 -1340
  24. package/plugins/export-patternfly-tokens/dist/ui.html +32 -24
  25. package/plugins/export-patternfly-tokens/src/ui.tsx +8 -0
  26. package/tokens/default/dark/base.dark.json +5 -5
  27. package/tokens/default/dark/charts.dark.json +20 -20
  28. package/tokens/default/dark/semantic.dark.json +45 -36
  29. package/tokens/default/glass/base.dimension.json +16 -16
  30. package/tokens/default/glass/base.json +2 -2
  31. package/tokens/default/glass/semantic.dimension.glass.json +1109 -0
  32. package/tokens/default/glass/semantic.glass.json +49 -40
  33. package/tokens/default/glass-dark/base.dark.json +5 -5
  34. package/tokens/default/glass-dark/semantic.glass.dark.json +56 -47
  35. package/tokens/default/highcontrast/base.dimension.json +16 -16
  36. package/tokens/default/highcontrast/base.json +2 -2
  37. package/tokens/default/highcontrast/semantic.dimension.highcontrast.json +51 -39
  38. package/tokens/default/highcontrast/semantic.highcontrast.json +41 -32
  39. package/tokens/default/highcontrast-dark/base.dark.json +5 -5
  40. package/tokens/default/highcontrast-dark/semantic.highcontrast.dark.json +44 -35
  41. package/tokens/default/light/base.dimension.json +16 -16
  42. package/tokens/default/light/base.json +2 -2
  43. package/tokens/default/light/charts.json +20 -20
  44. package/tokens/default/light/semantic.dimension.json +51 -39
  45. package/tokens/default/light/semantic.json +41 -32
  46. package/tokens/default/light/semantic.motion.json +24 -24
  47. package/tokens/redhat/dark/redhat.color.dark.json +71 -24
  48. package/tokens/redhat/glass/redhat.color.glass.json +25 -25
  49. package/tokens/redhat/glass/redhat.dimension.glass.json +2 -0
  50. package/tokens/redhat/glass-dark/redhat.color.glass.dark.json +67 -25
  51. package/tokens/redhat/highcontrast/redhat.color.highcontrast.json +25 -25
  52. package/tokens/redhat/highcontrast/redhat.dimension.highcontrast.json +6 -6
  53. package/tokens/redhat/highcontrast-dark/redhat.color.highcontrast.dark.json +25 -25
  54. package/tokens/redhat/light/redhat.color.json +25 -25
  55. package/tokens/redhat/light/redhat.dimension.json +6 -6
@@ -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 Thu, 12 Mar 2026 20:03:46 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
- --pf-t--global--background--filter--glass--blur--floating: blur(0px);
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%;
7
+ --pf-t--global--background--color--striped--row--default: rgba(21, 21, 21, 0.3000);
8
+ --pf-t--global--background--filter--glass--blur--primary: initial;
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);
@@ -33,7 +31,7 @@
33
31
  --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
34
32
  --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
35
33
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
36
- --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
34
+ --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--60);
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
37
  --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--70);
@@ -41,9 +39,9 @@
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);
@@ -172,7 +171,7 @@
172
171
  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
173
172
  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
174
173
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
175
- --pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--50);
174
+ --pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--100);
176
175
  --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
177
176
  --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
178
177
  --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
@@ -255,12 +254,13 @@
255
254
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
256
255
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
257
256
  --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
258
- --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--floating--default);
259
- --pf-t--global--background--color--glass--primary: var(--pf-t--global--background--color--primary--default);
257
+ --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--secondary--default);
258
+ --pf-t--global--background--color--glass--primary--default: initial;
260
259
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
261
260
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
262
261
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
263
262
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
263
+ --pf-t--global--border--color--glass--default: initial;
264
264
  --pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default);
265
265
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
266
266
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -319,7 +319,7 @@
319
319
  --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
320
320
  --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
321
321
  --pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--inverse);
322
- --pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--regular);
322
+ --pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--inverse);
323
323
  --pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--inverse);
324
324
  --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
325
325
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
@@ -1,16 +1,13 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:40 GMT
3
+ // Generated on Thu, 12 Mar 2026 20:03:46 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.4000);
7
7
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
8
8
  --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
9
9
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
10
- --pf-t--global--background--filter--glass--blur--floating: blur(0px);
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%;
10
+ --pf-t--global--background--filter--glass--blur--primary: initial;
14
11
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
15
12
  --pf-t--global--border--radius--0: 0px;
16
13
  --pf-t--global--border--radius--100: 4px;
@@ -30,24 +27,24 @@
30
27
  --pf-t--global--border--width--high-contrast--strong: 0px;
31
28
  --pf-t--global--box-shadow--X--100: -10px;
32
29
  --pf-t--global--box-shadow--X--200: -4px;
33
- --pf-t--global--box-shadow--X--300: -1px;
30
+ --pf-t--global--box-shadow--X--300: -2px;
34
31
  --pf-t--global--box-shadow--X--400: 0px;
35
32
  --pf-t--global--box-shadow--X--50: -20px;
36
- --pf-t--global--box-shadow--X--500: 1px;
33
+ --pf-t--global--box-shadow--X--500: 2px;
37
34
  --pf-t--global--box-shadow--X--600: 4px;
38
35
  --pf-t--global--box-shadow--X--700: 10px;
39
36
  --pf-t--global--box-shadow--X--800: 20px;
40
37
  --pf-t--global--box-shadow--Y--100: -10px;
41
- --pf-t--global--box-shadow--Y--200: -2px;
38
+ --pf-t--global--box-shadow--Y--200: -4px;
42
39
  --pf-t--global--box-shadow--Y--300: -1px;
43
40
  --pf-t--global--box-shadow--Y--400: 0px;
44
41
  --pf-t--global--box-shadow--Y--50: -20px;
45
42
  --pf-t--global--box-shadow--Y--500: 1px;
46
- --pf-t--global--box-shadow--Y--600: 2px;
43
+ --pf-t--global--box-shadow--Y--600: 4px;
47
44
  --pf-t--global--box-shadow--Y--700: 10px;
48
45
  --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;
46
+ --pf-t--global--box-shadow--blur--100: 6px;
47
+ --pf-t--global--box-shadow--blur--200: 10px;
51
48
  --pf-t--global--box-shadow--blur--300: 20px;
52
49
  --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
53
50
  --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
@@ -138,12 +135,13 @@
138
135
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
139
136
  --pf-t--global--background--color--loading--skeleton--default: var(--pf-t--global--background--color--600);
140
137
  --pf-t--global--background--color--loading--skeleton--subtle: var(--pf-t--global--background--color--700);
138
+ --pf-t--global--background--color--striped--row--default: var(--pf-t--global--background--color--700);
141
139
  --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
142
140
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
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);
@@ -461,6 +460,8 @@
461
460
  --pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--small);
462
461
  --pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--small);
463
462
  --pf-t--global--border--radius--control--form-element: var(--pf-t--global--border--radius--small);
463
+ --pf-t--global--border--radius--glass--default: initial;
464
+ --pf-t--global--border--width--glass--default: initial;
464
465
  --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300);
465
466
  --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
466
467
  --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
@@ -599,12 +600,13 @@
599
600
  --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
600
601
  --pf-t--global--text-decoration--width--hover: var(--pf-t--global--border--width--strong);
601
602
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
602
- --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--floating--default);
603
- --pf-t--global--background--color--glass--primary: var(--pf-t--global--background--color--primary--default);
603
+ --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--secondary--default);
604
+ --pf-t--global--background--color--glass--primary--default: initial;
604
605
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
605
606
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
606
607
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
607
608
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
609
+ --pf-t--global--border--color--glass--default: initial;
608
610
  --pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default);
609
611
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
610
612
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -1,9 +1,26 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:41 GMT
3
+ // Generated on Thu, 12 Mar 2026 20:03:47 GMT
4
4
 
5
- // Only tokens that differ from base theme (2 tokens)
5
+ // Only tokens that differ from base theme (19 tokens)
6
6
  @mixin pf-v6-tokens {
7
- --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8
- --pf-t--global--background--opacity--glass--primary: 80%;
7
+ --pf-t--global--background--color--glass--primary--default: 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);
14
+ --pf-t--global--background--filter--glass--blur--primary: blur(16px);
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--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
18
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
19
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
20
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
21
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
22
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--alt);
23
+ --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
24
+ --pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--50);
25
+ --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
9
26
  }
@@ -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 Thu, 12 Mar 2026 20:03:47 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--filter--glass--blur--primary: blur(12.5px);
8
- --pf-t--global--background--opacity--glass--primary: 80%;
7
+ --pf-t--global--background--color--glass--primary--default: rgba(255, 255, 255, 0.5000);
8
+ --pf-t--global--background--color--primary--clicked: rgba(199, 199, 199, 0.3000);
9
+ --pf-t--global--background--color--primary--default: rgba(255, 255, 255, 0.6000);
10
+ --pf-t--global--background--color--primary--hover: rgba(199, 199, 199, 0.3000);
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);
14
+ --pf-t--global--background--filter--glass--blur--primary: blur(16px);
15
+ --pf-t--global--border--width--main--default: var(--pf-t--global--border--width--100);
16
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
17
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
18
+ --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
19
+ --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
20
+ --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
21
+ --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
9
22
  }
@@ -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 Thu, 12 Mar 2026 20:03:46 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--black: #000000;
@@ -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 Thu, 12 Mar 2026 20:03:47 GMT
4
4
 
5
- // Only tokens that differ from base theme (7 tokens)
5
+ // Only tokens that differ from base theme (14 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,12 @@
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--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);
15
+ --pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--regular);
16
+ --pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--regular);
17
+ --pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--regular);
18
+ --pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--regular);
13
19
  --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
20
+ --pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--regular);
14
21
  }
@@ -1,16 +1,39 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:41 GMT
3
+ // Generated on Thu, 12 Mar 2026 20:03:47 GMT
4
4
 
5
- // Only tokens that differ from base theme (9 tokens)
5
+ // Only tokens that differ from base theme (32 tokens)
6
6
  @mixin pf-v6-tokens {
7
- --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8
- --pf-t--global--background--opacity--glass--primary: 80%;
7
+ --pf-t--global--background--color--glass--primary--default: 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);
14
+ --pf-t--global--background--filter--glass--blur--primary: blur(16px);
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--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
18
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
19
+ --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
20
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
21
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
9
22
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
10
23
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
11
24
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
25
+ --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--alt);
26
+ --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
27
+ --pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--50);
12
28
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
13
29
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
14
30
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
31
+ --pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--300);
32
+ --pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--300);
33
+ --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
34
+ --pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--regular);
35
+ --pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--regular);
36
+ --pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--regular);
15
37
  --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
38
+ --pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--regular);
16
39
  }
@@ -1,15 +1,28 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 11 Feb 2026 21:08:41 GMT
3
+ // Generated on Thu, 12 Mar 2026 20:03:47 GMT
4
4
 
5
- // Only tokens that differ from base theme (8 tokens)
5
+ // Only tokens that differ from base theme (21 tokens)
6
6
  @mixin pf-v6-tokens {
7
- --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
8
- --pf-t--global--background--opacity--glass--primary: 80%;
7
+ --pf-t--global--background--color--glass--primary--default: rgba(255, 255, 255, 0.5000);
8
+ --pf-t--global--background--color--primary--clicked: rgba(199, 199, 199, 0.3000);
9
+ --pf-t--global--background--color--primary--default: rgba(255, 255, 255, 0.6000);
10
+ --pf-t--global--background--color--primary--hover: rgba(199, 199, 199, 0.3000);
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);
14
+ --pf-t--global--background--filter--glass--blur--primary: blur(16px);
15
+ --pf-t--global--border--width--main--default: var(--pf-t--global--border--width--100);
16
+ --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
17
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
9
18
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
10
19
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
11
20
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
21
+ --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
22
+ --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
23
+ --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
12
24
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
13
25
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
14
26
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
27
+ --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
15
28
  }
@@ -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 Thu, 12 Mar 2026 20:03:47 GMT
4
4
 
5
- // Only tokens that differ from base theme (40 tokens)
5
+ // Only tokens that differ from base theme (41 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,4 @@
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);
46
- --pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--inverse);
47
48
  }
@@ -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 Thu, 12 Mar 2026 20:03:47 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);
@@ -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 Thu, 12 Mar 2026 20:03:47 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (8 tokens)
6
6
  @mixin pf-v6-tokens {
package/build.js CHANGED
@@ -27,6 +27,7 @@ const getTheme = ({ filePath }) => /tokens\/([^\/]*)\//gm.exec(filePath)[1];
27
27
 
28
28
  const build = (selector) => {
29
29
  const { fileHeader, formattedVariables, sortByName } = StyleDictionary.formatHelpers;
30
+ const buildPath = path.join(__dirname, 'build/css');
30
31
 
31
32
  console.log('Build started...');
32
33
  console.log('\n============================');
@@ -168,6 +169,11 @@ const build = (selector) => {
168
169
  const darkExtendedSD = StyleDictionary.extend(__dirname + '/config.dark.json');
169
170
  darkExtendedSD.buildAllPlatforms();
170
171
 
172
+ // Set glass tokens to initial in base themes
173
+ console.log('Setting glass tokens to initial in base themes...');
174
+ setGlassTokensToInitial(path.join(buildPath, 'tokens-default.scss'));
175
+ setGlassTokensToInitial(path.join(buildPath, 'tokens-dark.scss'));
176
+
171
177
  // Step 2: Build other non-glass themes (order doesn't matter)
172
178
  console.log('Building other themes...');
173
179
  const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
@@ -185,6 +191,11 @@ const build = (selector) => {
185
191
  const highContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.dark.json');
186
192
  highContrastDarkExtendedSD.buildAllPlatforms();
187
193
 
194
+ // Set glass tokens to initial in highcontrast themes
195
+ console.log('Setting glass tokens to initial in highcontrast themes...');
196
+ setGlassTokensToInitial(path.join(buildPath, 'tokens-highcontrast.scss'));
197
+ setGlassTokensToInitial(path.join(buildPath, 'tokens-highcontrast-dark.scss'));
198
+
188
199
  const layersSD = StyleDictionary.extend(__dirname + '/config.layers.json');
189
200
  layersSD.buildAllPlatforms();
190
201
 
@@ -234,7 +245,6 @@ const build = (selector) => {
234
245
 
235
246
  // Step 4: Remove duplicate variables from glass SCSS files
236
247
  console.log('Removing duplicate variables from glass themes...');
237
- const buildPath = path.join(__dirname, 'build/css');
238
248
  removeDuplicateVariables(
239
249
  path.join(buildPath, 'tokens-default.scss'),
240
250
  path.join(buildPath, 'tokens-glass.scss')
@@ -264,6 +274,13 @@ const build = (selector) => {
264
274
  const redhatHighContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.redhat-highcontrast-dark.json');
265
275
  redhatHighContrastDarkExtendedSD.buildAllPlatforms();
266
276
 
277
+ // Set glass tokens to initial in redhat non-glass themes
278
+ console.log('Setting glass tokens to initial in redhat themes...');
279
+ setGlassTokensToInitial(path.join(buildPath, 'tokens-redhat.scss'));
280
+ setGlassTokensToInitial(path.join(buildPath, 'tokens-redhat-dark.scss'));
281
+ setGlassTokensToInitial(path.join(buildPath, 'tokens-redhat-highcontrast.scss'));
282
+ setGlassTokensToInitial(path.join(buildPath, 'tokens-redhat-highcontrast-dark.scss'));
283
+
267
284
  // Step 6: Remove duplicate variables from redhat SCSS files
268
285
  console.log('Removing duplicate variables from redhat themes...');
269
286
  removeDuplicateVariables(
@@ -361,4 +378,30 @@ function removeDuplicateVariables(baseFilePath, glassFilePath) {
361
378
  console.log(`Removed ${removedCount} duplicate variables from ${path.basename(glassFilePath)}`);
362
379
  }
363
380
 
381
+ /**
382
+ * Set all glass token values to 'initial' in non-glass SCSS files
383
+ * @param {string} scssFilePath - Path to non-glass SCSS file (e.g., tokens-default.scss)
384
+ */
385
+ function setGlassTokensToInitial(scssFilePath) {
386
+ const content = fs.readFileSync(scssFilePath, 'utf8');
387
+
388
+ // Match CSS variable declarations with "glass" in the name
389
+ // Pattern: --pf-t--global--..--glass--...: <any-value>;
390
+ const glassVarRegex = /(--pf-t--[^:]*--glass--[^:]+):\s*[^;]+;/g;
391
+
392
+ let modifiedContent = content;
393
+ let replacementCount = 0;
394
+
395
+ // Replace all glass token values with 'initial'
396
+ modifiedContent = content.replace(glassVarRegex, (_match, varName) => {
397
+ replacementCount++;
398
+ return `${varName}: initial;`;
399
+ });
400
+
401
+ // Write back to file
402
+ fs.writeFileSync(scssFilePath, modifiedContent, 'utf8');
403
+
404
+ console.log(`Set ${replacementCount} glass token values to 'initial' in ${path.basename(scssFilePath)}`);
405
+ }
406
+
364
407
  module.exports = { build };
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.1",
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",