@patternfly/design-tokens 1.14.0 → 1.14.2

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 (31) hide show
  1. package/build/css/tokens-charts-dark.scss +1 -1
  2. package/build/css/tokens-charts.scss +1 -1
  3. package/build/css/tokens-dark.scss +4 -1
  4. package/build/css/tokens-default.scss +17 -4
  5. package/build/css/tokens-highcontrast-dark.scss +10 -7
  6. package/build/css/tokens-highcontrast.scss +290 -16
  7. package/build/css/tokens-palette.scss +4 -2
  8. package/package.json +1 -1
  9. package/patternfly-docs/content/token-layers-dark.json +1606 -970
  10. package/patternfly-docs/content/token-layers-default.json +1233 -699
  11. package/plugins/export-patternfly-tokens/dist/ui.html +48 -27
  12. package/plugins/export-patternfly-tokens/src/ui.tsx +50 -26
  13. package/tokens/dark/base.dark.json +54 -42
  14. package/tokens/dark/charts.dark.json +22 -22
  15. package/tokens/dark/palette.color.json +9 -1
  16. package/tokens/dark/semantic.dark.json +9 -0
  17. package/tokens/default/base.dimension.json +10 -10
  18. package/tokens/default/base.json +15 -3
  19. package/tokens/default/charts.json +22 -22
  20. package/tokens/default/palette.color.json +9 -1
  21. package/tokens/default/semantic.dimension.json +82 -29
  22. package/tokens/default/semantic.json +9 -0
  23. package/tokens/default/semantic.motion.json +18 -18
  24. package/tokens/highcontrast/base.dimension.json +387 -0
  25. package/tokens/highcontrast/base.json +15 -3
  26. package/tokens/highcontrast/palette.color.json +9 -1
  27. package/tokens/highcontrast/semantic.dimension.highcontrast.json +1055 -0
  28. package/tokens/highcontrast/semantic.highcontrast.json +11 -2
  29. package/tokens/highcontrast-dark/base.dark.json +54 -42
  30. package/tokens/highcontrast-dark/palette.color.json +9 -1
  31. package/tokens/highcontrast-dark/semantic.highcontrast.dark.json +14 -5
package/build/css/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 29 May 2025 14:58:29 GMT
3
+ // Generated on Wed, 13 Aug 2025 19:01:51 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/build/css/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 29 May 2025 14:58:29 GMT
3
+ // Generated on Wed, 13 Aug 2025 19:01:51 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/build/css/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 29 May 2025 14:58:28 GMT
3
+ // Generated on Wed, 13 Aug 2025 19:01:51 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
@@ -28,6 +28,7 @@
28
28
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
29
29
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
30
30
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
31
+ --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30);
31
32
  --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
32
33
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
33
34
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
@@ -88,6 +89,7 @@
88
89
  --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
89
90
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
90
91
  --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
92
+ --pf-t--global--dark--focus-ring--color--100: var(--pf-t--color--blue--30);
91
93
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
92
94
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
93
95
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
@@ -199,6 +201,7 @@
199
201
  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200);
200
202
  --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100);
201
203
  --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
204
+ --pf-t--global--focus-ring--color--default: var(--pf-t--global--dark--focus-ring--color--100);
202
205
  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
203
206
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
204
207
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
package/build/css/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 29 May 2025 14:58:28 GMT
3
+ // Generated on Wed, 13 Aug 2025 19:01:51 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -17,6 +17,12 @@
17
17
  --pf-t--global--border--width--200: 2px;
18
18
  --pf-t--global--border--width--300: 3px;
19
19
  --pf-t--global--border--width--400: 4px;
20
+ --pf-t--global--border--width--action--plain--clicked: 0px;
21
+ --pf-t--global--border--width--action--plain--default: 0px;
22
+ --pf-t--global--border--width--action--plain--hover: 0px;
23
+ --pf-t--global--border--width--high-contrast--extra-strong: 0px;
24
+ --pf-t--global--border--width--high-contrast--regular: 0px;
25
+ --pf-t--global--border--width--high-contrast--strong: 0px;
20
26
  --pf-t--global--box-shadow--X--100: -10px;
21
27
  --pf-t--global--box-shadow--X--200: -4px;
22
28
  --pf-t--global--box-shadow--X--300: -1px;
@@ -54,9 +60,7 @@
54
60
  --pf-t--global--breakpoint--550: 80rem;
55
61
  --pf-t--global--breakpoint--600: 90.625rem;
56
62
  --pf-t--global--color--nonstatus--green--400: #3d7019;
57
- --pf-t--global--color--status--danger--300: #501600;
58
63
  --pf-t--global--color--status--success--150: #3d7019;
59
- --pf-t--global--color--status--success--300: #153300;
60
64
  --pf-t--global--delay--100: 0ms;
61
65
  --pf-t--global--delay--200: 50ms;
62
66
  --pf-t--global--delay--300: 100ms;
@@ -68,6 +72,10 @@
68
72
  --pf-t--global--duration--50: 50ms;
69
73
  --pf-t--global--duration--500: 500ms;
70
74
  --pf-t--global--duration--600: 600ms;
75
+ --pf-t--global--focus-ring--position--inset: -4;
76
+ --pf-t--global--focus-ring--position--offset: 2;
77
+ --pf-t--global--focus-ring--width--inset: 3;
78
+ --pf-t--global--focus-ring--width--offset: 2;
71
79
  --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
72
80
  --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
73
81
  --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
@@ -126,7 +134,7 @@
126
134
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
127
135
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
128
136
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
129
- --pf-t--global--border--color--450: var(--pf-t--color--gray--60);
137
+ --pf-t--global--border--color--400: var(--pf-t--color--gray--60);
130
138
  --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
131
139
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
132
140
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
@@ -280,17 +288,21 @@
280
288
  --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
281
289
  --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
282
290
  --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
291
+ --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--80);
283
292
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
284
293
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
285
294
  --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
286
295
  --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
287
296
  --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
297
+ --pf-t--global--color--status--success--300: var(--pf-t--color--green--80);
288
298
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
289
299
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
290
300
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
291
301
  --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
292
302
  --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
293
303
  --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
304
+ --pf-t--global--focus-ring--color--100: var(--pf-t--color--blue--50);
305
+ --pf-t--global--focus-ring--color--200: var(--pf-t--color--blue--60);
294
306
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
295
307
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
296
308
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
@@ -471,6 +483,7 @@
471
483
  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--200);
472
484
  --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--100);
473
485
  --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--200);
486
+ --pf-t--global--focus-ring--color--default: var(--pf-t--global--focus-ring--color--100);
474
487
  --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm);
475
488
  --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md);
476
489
  --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs);
package/build/css/tokens-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 29 May 2025 14:58:29 GMT
3
+ // Generated on Wed, 13 Aug 2025 19:01:51 GMT
4
4
 
5
5
  :root {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
@@ -13,8 +13,6 @@
13
13
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
14
14
  --pf-t--global--background--color--primary--default: var(--pf-t--color--black);
15
15
  --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
16
- --pf-t--global--border--color--default: var(--pf-t--color--gray--30);
17
- --pf-t--global--border--color--on-secondary: var(--pf-t--color--gray--60);
18
16
  --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
19
17
  --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
20
18
  --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
@@ -30,6 +28,7 @@
30
28
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
31
29
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
32
30
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
31
+ --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30);
33
32
  --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
34
33
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
35
34
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
@@ -90,6 +89,7 @@
90
89
  --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
91
90
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
92
91
  --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
92
+ --pf-t--global--dark--focus-ring--color--100: var(--pf-t--color--blue--30);
93
93
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
94
94
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
95
95
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
@@ -114,16 +114,16 @@
114
114
  --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
115
115
  --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
116
116
  --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
117
- --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--100);
118
- --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--100);
117
+ --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--200);
118
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--200);
119
119
  --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
120
120
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
121
121
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
122
122
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
123
123
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
124
124
  --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
125
- --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
126
- --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
125
+ --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--300);
126
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--100);
127
127
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
128
128
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
129
129
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
@@ -152,6 +152,7 @@
152
152
  --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
153
153
  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
154
154
  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
155
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--300);
155
156
  --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
156
157
  --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
157
158
  --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
@@ -200,6 +201,7 @@
200
201
  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200);
201
202
  --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100);
202
203
  --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
204
+ --pf-t--global--focus-ring--color--default: var(--pf-t--global--dark--focus-ring--color--100);
203
205
  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
204
206
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
205
207
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
@@ -233,6 +235,7 @@
233
235
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
234
236
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
235
237
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
238
+ --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
236
239
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
237
240
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
238
241
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);