@patternfly/design-tokens 1.15.0 → 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 (45) hide show
  1. package/build/css/tokens-dark.scss +15 -14
  2. package/build/css/tokens-default.scss +8 -5
  3. package/build/css/tokens-glass-dark.scss +9 -5
  4. package/build/css/tokens-glass.scss +14 -7
  5. package/build/css/tokens-palette.scss +1 -1
  6. package/build/css/tokens-redhat-dark.scss +8 -2
  7. package/build/css/tokens-redhat-glass-dark.scss +14 -5
  8. package/build/css/tokens-redhat-glass.scss +14 -7
  9. package/build/css/tokens-redhat-highcontrast-dark.scss +2 -8
  10. package/build/css/tokens-redhat-highcontrast.scss +1 -1
  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 +465 -333
  15. package/patternfly-docs/content/token-layers-glass.json +12130 -212
  16. package/patternfly-docs/content/token-layers-highcontrast-dark.json +491 -220
  17. package/patternfly-docs/content/token-layers-highcontrast.json +727 -438
  18. package/patternfly-docs/content/token-layers-redhat-dark.json +307 -201
  19. package/patternfly-docs/content/token-layers-redhat-glass-dark.json +364 -238
  20. package/patternfly-docs/content/token-layers-redhat-glass.json +12286 -368
  21. package/patternfly-docs/content/token-layers-redhat-highcontrast-dark.json +263 -157
  22. package/patternfly-docs/content/token-layers-redhat-highcontrast.json +727 -438
  23. package/patternfly-docs/content/token-layers-redhat.json +1086 -797
  24. package/tokens/default/dark/base.dark.json +2 -2
  25. package/tokens/default/dark/charts.dark.json +4 -4
  26. package/tokens/default/dark/semantic.dark.json +31 -17
  27. package/tokens/default/glass/semantic.dimension.glass.json +1109 -0
  28. package/tokens/default/glass/semantic.glass.json +30 -16
  29. package/tokens/default/glass-dark/base.dark.json +2 -2
  30. package/tokens/default/glass-dark/semantic.glass.dark.json +34 -20
  31. package/tokens/default/highcontrast/semantic.dimension.highcontrast.json +46 -34
  32. package/tokens/default/highcontrast/semantic.highcontrast.json +24 -10
  33. package/tokens/default/highcontrast-dark/base.dark.json +2 -2
  34. package/tokens/default/highcontrast-dark/semantic.highcontrast.dark.json +27 -13
  35. package/tokens/default/light/charts.json +4 -4
  36. package/tokens/default/light/semantic.dimension.json +46 -34
  37. package/tokens/default/light/semantic.json +24 -10
  38. package/tokens/default/light/semantic.motion.json +28 -28
  39. package/tokens/redhat/dark/redhat.color.dark.json +24 -24
  40. package/tokens/redhat/glass/redhat.color.glass.json +5 -5
  41. package/tokens/redhat/glass/redhat.dimension.glass.json +2 -0
  42. package/tokens/redhat/glass-dark/redhat.color.glass.dark.json +19 -19
  43. package/tokens/redhat/highcontrast/redhat.color.highcontrast.json +5 -5
  44. package/tokens/redhat/highcontrast-dark/redhat.color.highcontrast.dark.json +5 -5
  45. package/tokens/redhat/light/redhat.color.json +5 -5
package/build/css/tokens-dark.scss CHANGED
@@ -1,11 +1,11 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Mar 2026 19:57:03 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);
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;
9
9
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
10
10
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
11
11
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -31,10 +31,10 @@
31
31
  --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
32
32
  --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
33
33
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
34
- --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);
35
35
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
36
36
  --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30);
37
- --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
37
+ --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--70);
38
38
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
39
39
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
40
40
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
@@ -171,7 +171,7 @@
171
171
  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
172
172
  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
173
173
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
174
- --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);
175
175
  --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
176
176
  --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
177
177
  --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
@@ -254,12 +254,13 @@
254
254
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
255
255
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
256
256
  --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
257
- --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--floating--default);
258
- --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;
259
259
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
260
260
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
261
261
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
262
262
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
263
+ --pf-t--global--border--color--glass--default: initial;
263
264
  --pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default);
264
265
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
265
266
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -317,9 +318,9 @@
317
318
  --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse);
318
319
  --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
319
320
  --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
320
- --pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--regular);
321
- --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--hover: var(--pf-t--global--icon--color--regular);
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--inverse);
323
+ --pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--inverse);
323
324
  --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
324
325
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
325
326
  --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
@@ -389,9 +390,9 @@
389
390
  --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse);
390
391
  --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse);
391
392
  --pf-t--global--text--color--nonstatus--on-yellow--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);
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);
395
396
  --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
396
397
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
397
398
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
package/build/css/tokens-default.scss CHANGED
@@ -1,14 +1,13 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Mar 2026 19:57:03 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);
10
+ --pf-t--global--background--filter--glass--blur--primary: initial;
12
11
  --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
13
12
  --pf-t--global--border--radius--0: 0px;
14
13
  --pf-t--global--border--radius--100: 4px;
@@ -136,6 +135,7 @@
136
135
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
137
136
  --pf-t--global--background--color--loading--skeleton--default: var(--pf-t--global--background--color--600);
138
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);
139
139
  --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
140
140
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
141
141
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
@@ -460,6 +460,8 @@
460
460
  --pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--small);
461
461
  --pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--small);
462
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;
463
465
  --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300);
464
466
  --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
465
467
  --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
@@ -598,12 +600,13 @@
598
600
  --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
599
601
  --pf-t--global--text-decoration--width--hover: var(--pf-t--global--border--width--strong);
600
602
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
601
- --pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--floating--default);
602
- --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;
603
605
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
604
606
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
605
607
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
606
608
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
609
+ --pf-t--global--border--color--glass--default: initial;
607
610
  --pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default);
608
611
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
609
612
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
package/build/css/tokens-glass-dark.scss CHANGED
@@ -1,22 +1,26 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Mar 2026 19:57:03 GMT
3
+ // Generated on Thu, 12 Mar 2026 20:03:47 GMT
4
4
 
5
- // Only tokens that differ from base theme (15 tokens)
5
+ // Only tokens that differ from base theme (19 tokens)
6
6
  @mixin pf-v6-tokens {
7
- --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.5000);
7
+ --pf-t--global--background--color--glass--primary--default: rgba(41, 41, 41, 0.5000);
8
8
  --pf-t--global--background--color--primary--clicked: rgba(56, 56, 56, 0.5000);
9
9
  --pf-t--global--background--color--primary--default: rgba(41, 41, 41, 0.5000);
10
10
  --pf-t--global--background--color--primary--hover: rgba(56, 56, 56, 0.5000);
11
11
  --pf-t--global--background--color--secondary--clicked: rgba(41, 41, 41, 0.6000);
12
12
  --pf-t--global--background--color--secondary--default: rgba(21, 21, 21, 0.6000);
13
13
  --pf-t--global--background--color--secondary--hover: rgba(41, 41, 41, 0.6000);
14
- --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
14
+ --pf-t--global--background--filter--glass--blur--primary: blur(16px);
15
15
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--500);
16
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);
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);
18
19
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
19
20
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
20
21
  --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
21
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);
22
26
  }
package/build/css/tokens-glass.scss CHANGED
@@ -1,15 +1,22 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Mar 2026 19:57:03 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 (15 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);
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
11
  --pf-t--global--background--color--secondary--clicked: rgba(163, 163, 163, 0.3000);
12
12
  --pf-t--global--background--color--secondary--default: rgba(199, 199, 199, 0.3000);
13
13
  --pf-t--global--background--color--secondary--hover: rgba(163, 163, 163, 0.3000);
14
- --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
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);
15
22
  }
package/build/css/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Mar 2026 19:57:03 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;
package/build/css/tokens-redhat-dark.scss CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Mar 2026 19:57:03 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 (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);
@@ -12,4 +12,10 @@
12
12
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
13
13
  --pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--300);
14
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);
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);
15
21
  }
package/build/css/tokens-redhat-glass-dark.scss CHANGED
@@ -1,20 +1,21 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Mar 2026 19:57:04 GMT
3
+ // Generated on Thu, 12 Mar 2026 20:03:47 GMT
4
4
 
5
- // Only tokens that differ from base theme (23 tokens)
5
+ // Only tokens that differ from base theme (32 tokens)
6
6
  @mixin pf-v6-tokens {
7
- --pf-t--global--background--color--glass--primary: rgba(41, 41, 41, 0.5000);
7
+ --pf-t--global--background--color--glass--primary--default: rgba(41, 41, 41, 0.5000);
8
8
  --pf-t--global--background--color--primary--clicked: rgba(56, 56, 56, 0.5000);
9
9
  --pf-t--global--background--color--primary--default: rgba(41, 41, 41, 0.5000);
10
10
  --pf-t--global--background--color--primary--hover: rgba(56, 56, 56, 0.5000);
11
11
  --pf-t--global--background--color--secondary--clicked: rgba(41, 41, 41, 0.6000);
12
12
  --pf-t--global--background--color--secondary--default: rgba(21, 21, 21, 0.6000);
13
13
  --pf-t--global--background--color--secondary--hover: rgba(41, 41, 41, 0.6000);
14
- --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
14
+ --pf-t--global--background--filter--glass--blur--primary: blur(16px);
15
15
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--500);
16
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);
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);
18
19
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
19
20
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
20
21
  --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
@@ -22,9 +23,17 @@
22
23
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
23
24
  --pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
24
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);
25
28
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
26
29
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
27
30
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
28
31
  --pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--300);
29
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);
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);
30
39
  }
package/build/css/tokens-redhat-glass.scss CHANGED
@@ -1,21 +1,28 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Mar 2026 19:57:04 GMT
3
+ // Generated on Thu, 12 Mar 2026 20:03:47 GMT
4
4
 
5
- // Only tokens that differ from base theme (14 tokens)
5
+ // Only tokens that differ from base theme (21 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);
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
11
  --pf-t--global--background--color--secondary--clicked: rgba(163, 163, 163, 0.3000);
12
12
  --pf-t--global--background--color--secondary--default: rgba(199, 199, 199, 0.3000);
13
13
  --pf-t--global--background--color--secondary--hover: rgba(163, 163, 163, 0.3000);
14
- --pf-t--global--background--filter--glass--blur--primary: blur(12.5px);
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);
15
18
  --pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
16
19
  --pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
17
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);
18
24
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
19
25
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
20
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);
21
28
  }
package/build/css/tokens-redhat-highcontrast-dark.scss CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Mar 2026 19:57:04 GMT
3
+ // Generated on Thu, 12 Mar 2026 20:03:47 GMT
4
4
 
5
- // Only tokens that differ from base theme (47 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
8
  --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
@@ -45,10 +45,4 @@
45
45
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--300);
46
46
  --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
47
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);
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);
54
48
  }
package/build/css/tokens-redhat-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Mar 2026 19:57:04 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 {
package/build/css/tokens-redhat.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Mar 2026 19:57:03 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.15.0",
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",