@patternfly/design-tokens 1.13.1 → 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 +21 -5
  4. package/build/css/tokens-default.scss +90 -30
  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 +4308 -966
  14. package/patternfly-docs/content/token-layers-default.json +4382 -1485
  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 +36 -0
  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 +51 -9
  24. package/tokens/default/base.dimension.json +38 -6
  25. package/tokens/default/base.json +171 -3
  26. package/tokens/default/charts.json +8 -8
  27. package/tokens/default/palette.color.json +24 -0
  28. package/tokens/default/semantic.dimension.json +69 -48
  29. package/tokens/default/semantic.json +51 -9
  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
@@ -0,0 +1,559 @@
1
+
2
+ {
3
+ "global": {
4
+ "background": {
5
+ "color": {
6
+ "100": {
7
+ "type": "color",
8
+ "value": "{color.white}"
9
+ },
10
+ "200": {
11
+ "type": "color",
12
+ "value": "{color.gray.10}"
13
+ },
14
+ "300": {
15
+ "type": "color",
16
+ "value": "{color.gray.20}"
17
+ },
18
+ "400": {
19
+ "type": "color",
20
+ "value": "{color.gray.80}"
21
+ },
22
+ "450": {
23
+ "type": "color",
24
+ "value": "{color.gray.70}"
25
+ },
26
+ "500": {
27
+ "type": "color",
28
+ "value": "rgba(21, 21, 21, 0.2000)"
29
+ },
30
+ "600": {
31
+ "type": "color",
32
+ "value": "rgba(199, 199, 199, 0.2500)"
33
+ },
34
+ "highlight": {
35
+ "100": {
36
+ "type": "color",
37
+ "value": "{color.yellow.30}"
38
+ },
39
+ "200": {
40
+ "type": "color",
41
+ "value": "{color.yellow.40}"
42
+ }
43
+ }
44
+ }
45
+ },
46
+ "color": {
47
+ "brand": {
48
+ "100": {
49
+ "type": "color",
50
+ "value": "{color.blue.40}"
51
+ },
52
+ "200": {
53
+ "type": "color",
54
+ "value": "{color.blue.50}"
55
+ },
56
+ "300": {
57
+ "type": "color",
58
+ "value": "{color.blue.60}"
59
+ },
60
+ "400": {
61
+ "type": "color",
62
+ "value": "{color.blue.70}"
63
+ },
64
+ "500": {
65
+ "type": "color",
66
+ "value": "{color.blue.80}"
67
+ }
68
+ },
69
+ "disabled": {
70
+ "100": {
71
+ "type": "color",
72
+ "value": "{color.gray.30}"
73
+ },
74
+ "200": {
75
+ "type": "color",
76
+ "value": "{color.gray.40}"
77
+ },
78
+ "300": {
79
+ "type": "color",
80
+ "value": "{color.gray.60}"
81
+ }
82
+ },
83
+ "favorite": {
84
+ "100": {
85
+ "type": "color",
86
+ "value": "{color.yellow.30}"
87
+ },
88
+ "200": {
89
+ "type": "color",
90
+ "value": "{color.yellow.40}"
91
+ },
92
+ "300": {
93
+ "type": "color",
94
+ "value": "{color.yellow.70}"
95
+ },
96
+ "400": {
97
+ "type": "color",
98
+ "value": "{color.yellow.80}"
99
+ }
100
+ },
101
+ "status": {
102
+ "success": {
103
+ "100": {
104
+ "type": "color",
105
+ "value": "{color.green.60}"
106
+ },
107
+ "150": {
108
+ "type": "color",
109
+ "value": "#3d7019"
110
+ },
111
+ "200": {
112
+ "type": "color",
113
+ "value": "{color.green.70}"
114
+ },
115
+ "300": {
116
+ "type": "color",
117
+ "value": "#153300"
118
+ }
119
+ },
120
+ "warning": {
121
+ "100": {
122
+ "type": "color",
123
+ "value": "{color.yellow.30}"
124
+ },
125
+ "200": {
126
+ "type": "color",
127
+ "value": "{color.yellow.40}"
128
+ },
129
+ "300": {
130
+ "type": "color",
131
+ "value": "{color.yellow.50}"
132
+ },
133
+ "400": {
134
+ "type": "color",
135
+ "value": "{color.yellow.60}"
136
+ },
137
+ "500": {
138
+ "type": "color",
139
+ "value": "{color.yellow.70}"
140
+ },
141
+ "600": {
142
+ "type": "color",
143
+ "value": "{color.yellow.80}"
144
+ }
145
+ },
146
+ "danger": {
147
+ "100": {
148
+ "type": "color",
149
+ "value": "{color.red-orange.60}"
150
+ },
151
+ "200": {
152
+ "type": "color",
153
+ "value": "{color.red-orange.70}"
154
+ },
155
+ "300": {
156
+ "type": "color",
157
+ "value": "#501600"
158
+ }
159
+ },
160
+ "info": {
161
+ "100": {
162
+ "type": "color",
163
+ "value": "{color.purple.50}"
164
+ },
165
+ "200": {
166
+ "type": "color",
167
+ "value": "{color.purple.60}"
168
+ },
169
+ "300": {
170
+ "type": "color",
171
+ "value": "{color.purple.70}"
172
+ }
173
+ },
174
+ "custom": {
175
+ "100": {
176
+ "type": "color",
177
+ "value": "{color.teal.60}"
178
+ },
179
+ "200": {
180
+ "type": "color",
181
+ "value": "{color.teal.70}"
182
+ },
183
+ "300": {
184
+ "type": "color",
185
+ "value": "{color.teal.80}"
186
+ }
187
+ }
188
+ },
189
+ "severity": {
190
+ "undefined": {
191
+ "100": {
192
+ "type": "color",
193
+ "value": "{color.gray.30}"
194
+ },
195
+ "200": {
196
+ "type": "color",
197
+ "value": "{color.gray.60}"
198
+ }
199
+ },
200
+ "none": {
201
+ "100": {
202
+ "type": "color",
203
+ "value": "{color.blue.40}"
204
+ },
205
+ "200": {
206
+ "type": "color",
207
+ "value": "{color.blue.60}"
208
+ }
209
+ },
210
+ "minor": {
211
+ "100": {
212
+ "type": "color",
213
+ "value": "{color.gray.50}"
214
+ },
215
+ "200": {
216
+ "type": "color",
217
+ "value": "{color.gray.80}"
218
+ }
219
+ },
220
+ "moderate": {
221
+ "100": {
222
+ "type": "color",
223
+ "value": "{color.yellow.40}"
224
+ },
225
+ "200": {
226
+ "type": "color",
227
+ "value": "{color.yellow.70}"
228
+ }
229
+ },
230
+ "important": {
231
+ "100": {
232
+ "type": "color",
233
+ "value": "{color.orange.50}"
234
+ },
235
+ "200": {
236
+ "type": "color",
237
+ "value": "{color.orange.60}"
238
+ }
239
+ },
240
+ "critical": {
241
+ "100": {
242
+ "type": "color",
243
+ "value": "{color.red-orange.60}"
244
+ }
245
+ }
246
+ },
247
+ "nonstatus": {
248
+ "red": {
249
+ "100": {
250
+ "type": "color",
251
+ "value": "{color.red.20}"
252
+ },
253
+ "200": {
254
+ "type": "color",
255
+ "value": "{color.red.30}"
256
+ },
257
+ "300": {
258
+ "type": "color",
259
+ "value": "{color.red.40}"
260
+ },
261
+ "400": {
262
+ "type": "color",
263
+ "value": "{color.red.60}"
264
+ },
265
+ "500": {
266
+ "type": "color",
267
+ "value": "{color.red.70}"
268
+ }
269
+ },
270
+ "orangered": {
271
+ "100": {
272
+ "type": "color",
273
+ "value": "{color.red-orange.20}"
274
+ },
275
+ "200": {
276
+ "type": "color",
277
+ "value": "{color.red-orange.30}"
278
+ },
279
+ "300": {
280
+ "type": "color",
281
+ "value": "{color.red-orange.40}"
282
+ },
283
+ "400": {
284
+ "type": "color",
285
+ "value": "{color.red-orange.60}"
286
+ },
287
+ "500": {
288
+ "type": "color",
289
+ "value": "{color.red-orange.70}"
290
+ }
291
+ },
292
+ "orange": {
293
+ "100": {
294
+ "type": "color",
295
+ "value": "{color.orange.20}"
296
+ },
297
+ "200": {
298
+ "type": "color",
299
+ "value": "{color.orange.30}"
300
+ },
301
+ "300": {
302
+ "type": "color",
303
+ "value": "{color.orange.40}"
304
+ },
305
+ "400": {
306
+ "type": "color",
307
+ "value": "{color.orange.60}"
308
+ },
309
+ "500": {
310
+ "type": "color",
311
+ "value": "{color.orange.70}"
312
+ }
313
+ },
314
+ "yellow": {
315
+ "100": {
316
+ "type": "color",
317
+ "value": "{color.yellow.20}"
318
+ },
319
+ "200": {
320
+ "type": "color",
321
+ "value": "{color.yellow.30}"
322
+ },
323
+ "300": {
324
+ "type": "color",
325
+ "value": "{color.yellow.40}"
326
+ },
327
+ "400": {
328
+ "type": "color",
329
+ "value": "{color.yellow.70}"
330
+ },
331
+ "500": {
332
+ "type": "color",
333
+ "value": "{color.yellow.80}"
334
+ }
335
+ },
336
+ "green": {
337
+ "100": {
338
+ "type": "color",
339
+ "value": "{color.green.20}"
340
+ },
341
+ "200": {
342
+ "type": "color",
343
+ "value": "{color.green.30}"
344
+ },
345
+ "300": {
346
+ "type": "color",
347
+ "value": "{color.green.40}"
348
+ },
349
+ "400": {
350
+ "type": "color",
351
+ "value": "#3d7019"
352
+ },
353
+ "500": {
354
+ "type": "color",
355
+ "value": "{color.green.70}"
356
+ }
357
+ },
358
+ "teal": {
359
+ "100": {
360
+ "type": "color",
361
+ "value": "{color.teal.20}"
362
+ },
363
+ "200": {
364
+ "type": "color",
365
+ "value": "{color.teal.30}"
366
+ },
367
+ "300": {
368
+ "type": "color",
369
+ "value": "{color.teal.40}"
370
+ },
371
+ "400": {
372
+ "type": "color",
373
+ "value": "{color.teal.70}"
374
+ },
375
+ "500": {
376
+ "type": "color",
377
+ "value": "{color.teal.80}"
378
+ }
379
+ },
380
+ "blue": {
381
+ "100": {
382
+ "type": "color",
383
+ "value": "{color.blue.20}"
384
+ },
385
+ "200": {
386
+ "type": "color",
387
+ "value": "{color.blue.30}"
388
+ },
389
+ "300": {
390
+ "type": "color",
391
+ "value": "{color.blue.40}"
392
+ },
393
+ "400": {
394
+ "type": "color",
395
+ "value": "{color.blue.60}"
396
+ },
397
+ "500": {
398
+ "type": "color",
399
+ "value": "{color.blue.70}"
400
+ }
401
+ },
402
+ "purple": {
403
+ "100": {
404
+ "type": "color",
405
+ "value": "{color.purple.20}"
406
+ },
407
+ "200": {
408
+ "type": "color",
409
+ "value": "{color.purple.30}"
410
+ },
411
+ "300": {
412
+ "type": "color",
413
+ "value": "{color.purple.40}"
414
+ },
415
+ "400": {
416
+ "type": "color",
417
+ "value": "{color.purple.50}"
418
+ },
419
+ "500": {
420
+ "type": "color",
421
+ "value": "{color.purple.60}"
422
+ }
423
+ },
424
+ "gray": {
425
+ "50": {
426
+ "type": "color",
427
+ "value": "{color.gray.10}"
428
+ },
429
+ "100": {
430
+ "type": "color",
431
+ "value": "{color.gray.20}"
432
+ },
433
+ "200": {
434
+ "type": "color",
435
+ "value": "{color.gray.30}"
436
+ },
437
+ "300": {
438
+ "type": "color",
439
+ "value": "{color.gray.40}"
440
+ },
441
+ "400": {
442
+ "type": "color",
443
+ "value": "{color.gray.60}"
444
+ },
445
+ "500": {
446
+ "type": "color",
447
+ "value": "{color.gray.70}"
448
+ }
449
+ }
450
+ }
451
+ },
452
+ "border": {
453
+ "color": {
454
+ "50": {
455
+ "type": "color",
456
+ "value": "{color.gray.20}"
457
+ },
458
+ "100": {
459
+ "type": "color",
460
+ "value": "{color.gray.30}"
461
+ },
462
+ "200": {
463
+ "type": "color",
464
+ "value": "{color.gray.40}"
465
+ },
466
+ "300": {
467
+ "type": "color",
468
+ "value": "{color.gray.50}"
469
+ },
470
+ "450": {
471
+ "type": "color",
472
+ "value": "{color.gray.60}"
473
+ }
474
+ }
475
+ },
476
+ "text": {
477
+ "color": {
478
+ "100": {
479
+ "type": "color",
480
+ "value": "{color.gray.95}"
481
+ },
482
+ "200": {
483
+ "type": "color",
484
+ "value": "{color.gray.60}"
485
+ },
486
+ "250": {
487
+ "type": "color",
488
+ "value": "{color.gray.70}"
489
+ },
490
+ "300": {
491
+ "type": "color",
492
+ "value": "{color.white}"
493
+ },
494
+ "400": {
495
+ "type": "color",
496
+ "value": "{color.red-orange.40}"
497
+ },
498
+ "500": {
499
+ "type": "color",
500
+ "value": "{color.red-orange.70}"
501
+ },
502
+ "link": {
503
+ "100": {
504
+ "type": "color",
505
+ "value": "{color.blue.50}"
506
+ },
507
+ "200": {
508
+ "type": "color",
509
+ "value": "{color.blue.60}"
510
+ },
511
+ "250": {
512
+ "type": "color",
513
+ "value": "{color.blue.70}"
514
+ },
515
+ "300": {
516
+ "type": "color",
517
+ "value": "{color.purple.50}"
518
+ },
519
+ "350": {
520
+ "type": "color",
521
+ "value": "{color.purple.60}"
522
+ }
523
+ }
524
+ }
525
+ },
526
+ "icon": {
527
+ "color": {
528
+ "100": {
529
+ "type": "color",
530
+ "value": "{color.gray.90}"
531
+ },
532
+ "150": {
533
+ "type": "color",
534
+ "value": "{color.gray.60}"
535
+ },
536
+ "200": {
537
+ "type": "color",
538
+ "value": "{color.gray.50}"
539
+ },
540
+ "300": {
541
+ "type": "color",
542
+ "value": "{color.white}"
543
+ }
544
+ }
545
+ },
546
+ "box-shadow": {
547
+ "color": {
548
+ "100": {
549
+ "type": "color",
550
+ "value": "rgba(41, 41, 41, 0.1500)"
551
+ },
552
+ "200": {
553
+ "type": "color",
554
+ "value": "rgba(41, 41, 41, 0.2000)"
555
+ }
556
+ }
557
+ }
558
+ }
559
+ }