@patternfly/design-tokens 1.13.2 → 1.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/build/css/tokens-charts-dark.scss +2 -2
  2. package/build/css/tokens-charts.scss +2 -2
  3. package/build/css/tokens-dark.scss +10 -2
  4. package/build/css/tokens-default.scss +47 -4
  5. package/build/css/tokens-highcontrast-dark.scss +392 -0
  6. package/build/css/tokens-highcontrast.scss +427 -0
  7. package/build/css/tokens-palette.scss +8 -2
  8. package/build.js +15 -1
  9. package/config.highcontrast.dark.json +23 -0
  10. package/config.highcontrast.json +24 -0
  11. package/config.palette-colors.json +1 -1
  12. package/package.json +1 -1
  13. package/patternfly-docs/content/token-layers-dark.json +4118 -1632
  14. package/patternfly-docs/content/token-layers-default.json +3459 -1329
  15. package/patternfly-docs/content/tokensTable.css +16 -3
  16. package/patternfly-docs/content/tokensTable.js +7 -5
  17. package/plugins/export-patternfly-tokens/dist/code.js +87 -0
  18. package/plugins/export-patternfly-tokens/dist/ui.html +34212 -0
  19. package/plugins/export-patternfly-tokens/src/ui.tsx +12 -4
  20. package/tokens/dark/base.dark.json +66 -38
  21. package/tokens/dark/charts.dark.json +8 -8
  22. package/tokens/dark/palette.color.json +24 -0
  23. package/tokens/dark/semantic.dark.json +4 -0
  24. package/tokens/default/base.dimension.json +14 -10
  25. package/tokens/default/base.json +165 -1
  26. package/tokens/default/charts.json +8 -8
  27. package/tokens/default/palette.color.json +24 -0
  28. package/tokens/default/semantic.dimension.json +22 -22
  29. package/tokens/default/semantic.json +4 -0
  30. package/tokens/default/semantic.motion.json +28 -28
  31. package/tokens/highcontrast/base.json +559 -0
  32. package/tokens/highcontrast/palette.color.json +319 -0
  33. package/tokens/highcontrast/semantic.highcontrast.json +1758 -0
  34. package/tokens/highcontrast-dark/base.dark.json +421 -0
  35. package/tokens/highcontrast-dark/palette.color.json +319 -0
  36. package/tokens/highcontrast-dark/semantic.highcontrast.dark.json +1758 -0
package/build/css/tokens-charts-dark.scss CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 23 Sep 2024 22:48:17 GMT
3
+ // Generated on Thu, 29 May 2025 14:58:29 GMT
4
4
 
5
- @mixin pf-v6-tokens {
5
+ :root {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
7
7
  --pf-t--chart--global--BorderWidth--sm: 2;
8
8
  --pf-t--chart--global--BorderWidth--xs: 1;
package/build/css/tokens-charts.scss CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 23 Sep 2024 22:48:17 GMT
3
+ // Generated on Thu, 29 May 2025 14:58:29 GMT
4
4
 
5
- @mixin pf-v6-tokens {
5
+ :root {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
7
7
  --pf-t--chart--global--BorderWidth--sm: 2;
8
8
  --pf-t--chart--global--BorderWidth--xs: 1;
package/build/css/tokens-dark.scss CHANGED
@@ -1,9 +1,10 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 23 Sep 2024 22:48:17 GMT
3
+ // Generated on Thu, 29 May 2025 14:58:28 GMT
4
4
 
5
- @mixin pf-v6-tokens {
5
+ :root {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
7
+ --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
7
8
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
8
9
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
9
10
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
@@ -34,6 +35,7 @@
34
35
  --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
35
36
  --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
36
37
  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
38
+ --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90);
37
39
  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
38
40
  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
39
41
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
@@ -42,6 +44,7 @@
42
44
  --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
43
45
  --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
44
46
  --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
47
+ --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70);
45
48
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
46
49
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
47
50
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -64,6 +67,7 @@
64
67
  --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20);
65
68
  --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10);
66
69
  --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
70
+ --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40);
67
71
  --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
68
72
  --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
69
73
  --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
@@ -71,14 +75,17 @@
71
75
  --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
72
76
  --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
73
77
  --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
78
+ --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20);
74
79
  --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
75
80
  --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40);
76
81
  --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30);
77
82
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
78
83
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
79
84
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
85
+ --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10);
80
86
  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
81
87
  --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
88
+ --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
82
89
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
83
90
  --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
84
91
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
@@ -91,6 +98,7 @@
91
98
  --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
92
99
  --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
93
100
  --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30);
101
+ --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20);
94
102
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
95
103
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
96
104
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
package/build/css/tokens-default.scss CHANGED
@@ -1,11 +1,12 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 23 Sep 2024 22:48:17 GMT
3
+ // Generated on Thu, 29 May 2025 14:58:28 GMT
4
4
 
5
- @mixin pf-v6-tokens {
5
+ :root {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
7
7
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
8
8
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
9
+ --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
9
10
  --pf-t--global--border--radius--0: 0px;
10
11
  --pf-t--global--border--radius--100: 4px;
11
12
  --pf-t--global--border--radius--200: 6px;
@@ -15,6 +16,7 @@
15
16
  --pf-t--global--border--width--100: 1px;
16
17
  --pf-t--global--border--width--200: 2px;
17
18
  --pf-t--global--border--width--300: 3px;
19
+ --pf-t--global--border--width--400: 4px;
18
20
  --pf-t--global--box-shadow--X--100: -10px;
19
21
  --pf-t--global--box-shadow--X--200: -4px;
20
22
  --pf-t--global--box-shadow--X--300: -1px;
@@ -51,6 +53,10 @@
51
53
  --pf-t--global--breakpoint--500: 75rem;
52
54
  --pf-t--global--breakpoint--550: 80rem;
53
55
  --pf-t--global--breakpoint--600: 90.625rem;
56
+ --pf-t--global--color--nonstatus--green--400: #3d7019;
57
+ --pf-t--global--color--status--danger--300: #501600;
58
+ --pf-t--global--color--status--success--150: #3d7019;
59
+ --pf-t--global--color--status--success--300: #153300;
54
60
  --pf-t--global--delay--100: 0ms;
55
61
  --pf-t--global--delay--200: 50ms;
56
62
  --pf-t--global--delay--300: 100ms;
@@ -65,7 +71,7 @@
65
71
  --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;
66
72
  --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;
67
73
  --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
68
- --pf-t--global--font--line-height--100: 1.2999999523162842;
74
+ --pf-t--global--font--line-height--100: 1.3;
69
75
  --pf-t--global--font--line-height--200: 1.5;
70
76
  --pf-t--global--font--size--100: 0.75rem;
71
77
  --pf-t--global--font--size--200: 0.875rem;
@@ -120,6 +126,7 @@
120
126
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
121
127
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
122
128
  --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);
123
130
  --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
124
131
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
125
132
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
@@ -203,56 +210,87 @@
203
210
  --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
204
211
  --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
205
212
  --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
213
+ --pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
214
+ --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
206
215
  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
207
216
  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
208
217
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
209
218
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
210
219
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
220
+ --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
221
+ --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
211
222
  --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
212
223
  --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
213
224
  --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
225
+ --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
226
+ --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
214
227
  --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
215
228
  --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
216
229
  --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
230
+ --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60);
231
+ --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10);
232
+ --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70);
217
233
  --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
218
234
  --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
219
235
  --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
236
+ --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
220
237
  --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
221
238
  --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
222
239
  --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
240
+ --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60);
241
+ --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70);
223
242
  --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
224
243
  --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
225
244
  --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
245
+ --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60);
246
+ --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70);
226
247
  --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
227
248
  --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
228
249
  --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
250
+ --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50);
251
+ --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60);
229
252
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
230
253
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
231
254
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
255
+ --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60);
256
+ --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70);
232
257
  --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
233
258
  --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
234
259
  --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
260
+ --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70);
261
+ --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80);
235
262
  --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
236
263
  --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
237
264
  --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
265
+ --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
266
+ --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
238
267
  --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
239
268
  --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
269
+ --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60);
240
270
  --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
271
+ --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80);
241
272
  --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
273
+ --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70);
242
274
  --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
275
+ --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
243
276
  --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
277
+ --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60);
244
278
  --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
245
279
  --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
280
+ --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
246
281
  --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
247
282
  --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
248
- --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
249
283
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
250
284
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
285
+ --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
251
286
  --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
252
287
  --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
253
288
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
254
289
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
255
290
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
291
+ --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
292
+ --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
293
+ --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
256
294
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
257
295
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
258
296
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
@@ -271,6 +309,7 @@
271
309
  --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
272
310
  --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
273
311
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
312
+ --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
274
313
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
275
314
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
276
315
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
@@ -303,11 +342,15 @@
303
342
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
304
343
  --pf-t--global--text--color--100: var(--pf-t--color--gray--95);
305
344
  --pf-t--global--text--color--200: var(--pf-t--color--gray--60);
345
+ --pf-t--global--text--color--250: var(--pf-t--color--gray--70);
306
346
  --pf-t--global--text--color--300: var(--pf-t--color--white);
307
347
  --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
348
+ --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70);
308
349
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
309
350
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
351
+ --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
310
352
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
353
+ --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
311
354
  --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
312
355
  --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
313
356
  --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);