@patternfly/design-tokens 1.0.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 (39) hide show
  1. package/build/css/_tokens-charts.scss +159 -0
  2. package/build/css/_tokens-dark.scss +355 -0
  3. package/build/css/_tokens-default.scss +418 -0
  4. package/build/css/_tokens-palette.scss +75 -0
  5. package/build-js-for-docs.js +38 -0
  6. package/build.js +55 -0
  7. package/config.chart.json +23 -0
  8. package/config.dark.json +23 -0
  9. package/config.default.json +23 -0
  10. package/config.palette-colors.json +23 -0
  11. package/generate-fed-package-json.js +65 -0
  12. package/package.json +52 -0
  13. package/patternfly-a11y.config.js +24 -0
  14. package/patternfly-docs/content/all-patternfly-tokens.md +9 -0
  15. package/patternfly-docs/content/tokensTable.js +143 -0
  16. package/patternfly-docs/generated/index.js +12 -0
  17. package/patternfly-docs/generated/react.js +59 -0
  18. package/patternfly-docs/generated/tokens/all-patternfly-tokens/tokens.js +34 -0
  19. package/patternfly-docs/pages/index.js +27 -0
  20. package/patternfly-docs/patternfly-docs.config.js +6 -0
  21. package/patternfly-docs/patternfly-docs.css.js +8 -0
  22. package/patternfly-docs/patternfly-docs.routes.js +12 -0
  23. package/patternfly-docs/patternfly-docs.source.js +20 -0
  24. package/patternfly-docs/scssAsJson.json +1 -0
  25. package/plugins/export-patternfly-tokens/README.md +22 -0
  26. package/plugins/export-patternfly-tokens/code.js +85 -0
  27. package/plugins/export-patternfly-tokens/export.html +179 -0
  28. package/plugins/export-patternfly-tokens/manifest.json +12 -0
  29. package/release.config.js +13 -0
  30. package/tokens/AsExported.text +3388 -0
  31. package/tokens/dark/base.dark.json +331 -0
  32. package/tokens/dark/palette.color.json +295 -0
  33. package/tokens/dark/semantic.dark.json +1359 -0
  34. package/tokens/default/base.dimension.json +171 -0
  35. package/tokens/default/base.json +329 -0
  36. package/tokens/default/chart.json +695 -0
  37. package/tokens/default/palette.color.json +295 -0
  38. package/tokens/default/semantic.dimension.json +383 -0
  39. package/tokens/default/semantic.json +1110 -0
@@ -0,0 +1,695 @@
1
+
2
+ {
3
+ "chart": {
4
+ "color": {
5
+ "blue": {
6
+ "100": {
7
+ "type": "color",
8
+ "value": "{color.blue.30}"
9
+ },
10
+ "200": {
11
+ "type": "color",
12
+ "value": "{color.blue.40}"
13
+ },
14
+ "300": {
15
+ "type": "color",
16
+ "value": "{color.blue.50}"
17
+ },
18
+ "400": {
19
+ "type": "color",
20
+ "value": "{color.blue.60}"
21
+ },
22
+ "500": {
23
+ "type": "color",
24
+ "value": "{color.blue.70}"
25
+ }
26
+ },
27
+ "green": {
28
+ "100": {
29
+ "type": "color",
30
+ "value": "{color.green.30}"
31
+ },
32
+ "200": {
33
+ "type": "color",
34
+ "value": "{color.green.40}"
35
+ },
36
+ "300": {
37
+ "type": "color",
38
+ "value": "{color.green.50}"
39
+ },
40
+ "400": {
41
+ "type": "color",
42
+ "value": "{color.green.60}"
43
+ },
44
+ "500": {
45
+ "type": "color",
46
+ "value": "{color.green.70}"
47
+ }
48
+ },
49
+ "teal": {
50
+ "100": {
51
+ "type": "color",
52
+ "value": "{color.teal.30}"
53
+ },
54
+ "200": {
55
+ "type": "color",
56
+ "value": "{color.teal.40}"
57
+ },
58
+ "300": {
59
+ "type": "color",
60
+ "value": "{color.teal.50}"
61
+ },
62
+ "400": {
63
+ "type": "color",
64
+ "value": "{color.teal.60}"
65
+ },
66
+ "500": {
67
+ "type": "color",
68
+ "value": "{color.teal.70}"
69
+ }
70
+ },
71
+ "purple": {
72
+ "100": {
73
+ "type": "color",
74
+ "value": "{color.purple.30}"
75
+ },
76
+ "200": {
77
+ "type": "color",
78
+ "value": "{color.purple.40}"
79
+ },
80
+ "300": {
81
+ "type": "color",
82
+ "value": "{color.purple.50}"
83
+ },
84
+ "400": {
85
+ "type": "color",
86
+ "value": "{color.purple.60}"
87
+ },
88
+ "500": {
89
+ "type": "color",
90
+ "value": "{color.purple.70}"
91
+ }
92
+ },
93
+ "yellow": {
94
+ "100": {
95
+ "type": "color",
96
+ "value": "{color.yellow.20}"
97
+ },
98
+ "200": {
99
+ "type": "color",
100
+ "value": "{color.yellow.30}"
101
+ },
102
+ "300": {
103
+ "type": "color",
104
+ "value": "{color.yellow.40}"
105
+ },
106
+ "400": {
107
+ "type": "color",
108
+ "value": "{color.yellow.50}"
109
+ },
110
+ "500": {
111
+ "type": "color",
112
+ "value": "{color.yellow.60}"
113
+ }
114
+ },
115
+ "orange": {
116
+ "100": {
117
+ "type": "color",
118
+ "value": "{color.orange.30}"
119
+ },
120
+ "200": {
121
+ "type": "color",
122
+ "value": "{color.orange.40}"
123
+ },
124
+ "300": {
125
+ "type": "color",
126
+ "value": "{color.orange.50}"
127
+ },
128
+ "400": {
129
+ "type": "color",
130
+ "value": "{color.orange.60}"
131
+ },
132
+ "500": {
133
+ "type": "color",
134
+ "value": "{color.orange.70}"
135
+ }
136
+ },
137
+ "red-orange": {
138
+ "100": {
139
+ "type": "color",
140
+ "value": "{color.red-orange.30}"
141
+ },
142
+ "200": {
143
+ "type": "color",
144
+ "value": "{color.red-orange.40}"
145
+ },
146
+ "300": {
147
+ "type": "color",
148
+ "value": "{color.red-orange.50}"
149
+ },
150
+ "400": {
151
+ "type": "color",
152
+ "value": "{color.red-orange.60}"
153
+ },
154
+ "500": {
155
+ "type": "color",
156
+ "value": "{color.red-orange.70}"
157
+ }
158
+ },
159
+ "black": {
160
+ "100": {
161
+ "type": "color",
162
+ "value": "{color.gray.10}"
163
+ },
164
+ "200": {
165
+ "type": "color",
166
+ "value": "{color.gray.20}"
167
+ },
168
+ "300": {
169
+ "type": "color",
170
+ "value": "{color.gray.30}"
171
+ },
172
+ "400": {
173
+ "type": "color",
174
+ "value": "{color.gray.40}"
175
+ },
176
+ "500": {
177
+ "type": "color",
178
+ "value": "{color.gray.50}"
179
+ }
180
+ },
181
+ "fills-and-strokes": {
182
+ "success": {
183
+ "color": {
184
+ "100": {
185
+ "type": "color",
186
+ "value": "{color.blue.50}"
187
+ }
188
+ }
189
+ },
190
+ "warning": {
191
+ "color": {
192
+ "100": {
193
+ "type": "color",
194
+ "value": "{color.orange.40}"
195
+ },
196
+ "200": {
197
+ "type": "color",
198
+ "value": "{color.yellow.40}"
199
+ }
200
+ }
201
+ },
202
+ "fill": {
203
+ "color": {
204
+ "100": {
205
+ "type": "color",
206
+ "value": "{color.gray.10}"
207
+ },
208
+ "200": {
209
+ "type": "color",
210
+ "value": "{color.gray.20}"
211
+ },
212
+ "300": {
213
+ "type": "color",
214
+ "value": "{color.gray.30}"
215
+ },
216
+ "400": {
217
+ "type": "color",
218
+ "value": "{color.gray.40}"
219
+ },
220
+ "500": {
221
+ "type": "color",
222
+ "value": "{color.gray.50}"
223
+ },
224
+ "700": {
225
+ "type": "color",
226
+ "value": "{color.gray.70}"
227
+ },
228
+ "900": {
229
+ "type": "color",
230
+ "value": "{color.gray.90}"
231
+ },
232
+ "white": {
233
+ "type": "color",
234
+ "value": "{color.white}"
235
+ }
236
+ }
237
+ },
238
+ "danger": {
239
+ "color": {
240
+ "100": {
241
+ "type": "color",
242
+ "value": "{global.color.status.danger.100}"
243
+ }
244
+ }
245
+ }
246
+ }
247
+ },
248
+ "BorderWidth": {
249
+ "xs": {
250
+ "type": "number",
251
+ "value": 1
252
+ },
253
+ "sm": {
254
+ "type": "number",
255
+ "value": 2
256
+ },
257
+ "lg": {
258
+ "type": "number",
259
+ "value": 8
260
+ }
261
+ },
262
+ "stroke": {
263
+ "width": {
264
+ "xs": {
265
+ "type": "number",
266
+ "value": 1
267
+ },
268
+ "sm": {
269
+ "type": "number",
270
+ "value": 2
271
+ }
272
+ }
273
+ },
274
+ "theme": {
275
+ "colorscales": {
276
+ "blue": {
277
+ "colorscale": {
278
+ "100": {
279
+ "type": "color",
280
+ "value": "{chart.color.blue.300}"
281
+ },
282
+ "200": {
283
+ "type": "color",
284
+ "value": "{chart.color.blue.100}"
285
+ },
286
+ "300": {
287
+ "type": "color",
288
+ "value": "{chart.color.blue.500}"
289
+ },
290
+ "400": {
291
+ "type": "color",
292
+ "value": "{chart.color.blue.200}"
293
+ },
294
+ "500": {
295
+ "type": "color",
296
+ "value": "{chart.color.blue.400}"
297
+ }
298
+ }
299
+ },
300
+ "teal": {
301
+ "colorscale": {
302
+ "100": {
303
+ "type": "color",
304
+ "value": "{chart.color.teal.300}"
305
+ },
306
+ "200": {
307
+ "type": "color",
308
+ "value": "{chart.color.teal.100}"
309
+ },
310
+ "300": {
311
+ "type": "color",
312
+ "value": "{chart.color.teal.500}"
313
+ },
314
+ "400": {
315
+ "type": "color",
316
+ "value": "{chart.color.teal.200}"
317
+ },
318
+ "500": {
319
+ "type": "color",
320
+ "value": "{chart.color.teal.400}"
321
+ }
322
+ }
323
+ },
324
+ "yellow": {
325
+ "colorscale": {
326
+ "100": {
327
+ "type": "color",
328
+ "value": "{chart.color.yellow.300}"
329
+ },
330
+ "200": {
331
+ "type": "color",
332
+ "value": "{chart.color.yellow.100}"
333
+ },
334
+ "300": {
335
+ "type": "color",
336
+ "value": "{chart.color.yellow.500}"
337
+ },
338
+ "400": {
339
+ "type": "color",
340
+ "value": "{chart.color.yellow.200}"
341
+ },
342
+ "500": {
343
+ "type": "color",
344
+ "value": "{chart.color.yellow.400}"
345
+ }
346
+ }
347
+ },
348
+ "gray": {
349
+ "colorscale": {
350
+ "100": {
351
+ "type": "color",
352
+ "value": "{chart.color.black.300}"
353
+ },
354
+ "200": {
355
+ "type": "color",
356
+ "value": "{chart.color.black.100}"
357
+ },
358
+ "300": {
359
+ "type": "color",
360
+ "value": "{chart.color.black.500}"
361
+ },
362
+ "400": {
363
+ "type": "color",
364
+ "value": "{chart.color.black.200}"
365
+ },
366
+ "500": {
367
+ "type": "color",
368
+ "value": "{chart.color.black.400}"
369
+ }
370
+ }
371
+ },
372
+ "green": {
373
+ "colorscale": {
374
+ "100": {
375
+ "type": "color",
376
+ "value": "{chart.color.green.300}"
377
+ },
378
+ "200": {
379
+ "type": "color",
380
+ "value": "{chart.color.green.100}"
381
+ },
382
+ "300": {
383
+ "type": "color",
384
+ "value": "{chart.color.green.500}"
385
+ },
386
+ "400": {
387
+ "type": "color",
388
+ "value": "{chart.color.green.200}"
389
+ },
390
+ "500": {
391
+ "type": "color",
392
+ "value": "{chart.color.green.400}"
393
+ }
394
+ }
395
+ },
396
+ "purple": {
397
+ "colorscale": {
398
+ "100": {
399
+ "type": "color",
400
+ "value": "{chart.color.purple.300}"
401
+ },
402
+ "200": {
403
+ "type": "color",
404
+ "value": "{chart.color.purple.100}"
405
+ },
406
+ "300": {
407
+ "type": "color",
408
+ "value": "{chart.color.purple.500}"
409
+ },
410
+ "400": {
411
+ "type": "color",
412
+ "value": "{chart.color.purple.200}"
413
+ },
414
+ "500": {
415
+ "type": "color",
416
+ "value": "{chart.color.purple.400}"
417
+ }
418
+ }
419
+ },
420
+ "orange": {
421
+ "colorscale": {
422
+ "100": {
423
+ "type": "color",
424
+ "value": "{chart.color.orange.300}"
425
+ },
426
+ "200": {
427
+ "type": "color",
428
+ "value": "{chart.color.orange.100}"
429
+ },
430
+ "300": {
431
+ "type": "color",
432
+ "value": "{chart.color.orange.500}"
433
+ },
434
+ "400": {
435
+ "type": "color",
436
+ "value": "{chart.color.orange.200}"
437
+ },
438
+ "500": {
439
+ "type": "color",
440
+ "value": "{chart.color.orange.400}"
441
+ }
442
+ }
443
+ },
444
+ "Multi-colored-ordered": {
445
+ "colorscale": {
446
+ "100": {
447
+ "type": "color",
448
+ "value": "{chart.color.blue.300}"
449
+ },
450
+ "200": {
451
+ "type": "color",
452
+ "value": "{chart.color.green.300}"
453
+ },
454
+ "300": {
455
+ "type": "color",
456
+ "value": "{chart.color.teal.300}"
457
+ },
458
+ "400": {
459
+ "type": "color",
460
+ "value": "{chart.color.yellow.300}"
461
+ },
462
+ "500": {
463
+ "type": "color",
464
+ "value": "{chart.color.orange.300}"
465
+ },
466
+ "600": {
467
+ "type": "color",
468
+ "value": "{chart.color.blue.100}"
469
+ },
470
+ "700": {
471
+ "type": "color",
472
+ "value": "{chart.color.green.500}"
473
+ },
474
+ "800": {
475
+ "type": "color",
476
+ "value": "{chart.color.teal.100}"
477
+ },
478
+ "900": {
479
+ "type": "color",
480
+ "value": "{chart.color.yellow.100}"
481
+ },
482
+ "1000": {
483
+ "type": "color",
484
+ "value": "{chart.color.orange.500}"
485
+ },
486
+ "1100": {
487
+ "type": "color",
488
+ "value": "{chart.color.blue.500}"
489
+ },
490
+ "1200": {
491
+ "type": "color",
492
+ "value": "{chart.color.green.100}"
493
+ },
494
+ "1300": {
495
+ "type": "color",
496
+ "value": "{chart.color.teal.500}"
497
+ },
498
+ "1400": {
499
+ "type": "color",
500
+ "value": "{chart.color.yellow.500}"
501
+ },
502
+ "1500": {
503
+ "type": "color",
504
+ "value": "{chart.color.orange.100}"
505
+ },
506
+ "1600": {
507
+ "type": "color",
508
+ "value": "{chart.color.blue.200}"
509
+ },
510
+ "1700": {
511
+ "type": "color",
512
+ "value": "{chart.color.green.400}"
513
+ },
514
+ "1800": {
515
+ "type": "color",
516
+ "value": "{chart.color.teal.200}"
517
+ },
518
+ "1900": {
519
+ "type": "color",
520
+ "value": "{chart.color.yellow.200}"
521
+ },
522
+ "2000": {
523
+ "type": "color",
524
+ "value": "{chart.color.orange.400}"
525
+ },
526
+ "2100": {
527
+ "type": "color",
528
+ "value": "{chart.color.blue.400}"
529
+ },
530
+ "2200": {
531
+ "type": "color",
532
+ "value": "{chart.color.green.200}"
533
+ },
534
+ "2300": {
535
+ "type": "color",
536
+ "value": "{chart.color.teal.400}"
537
+ },
538
+ "2400": {
539
+ "type": "color",
540
+ "value": "{chart.color.yellow.400}"
541
+ },
542
+ "2500": {
543
+ "type": "color",
544
+ "value": "{chart.color.orange.200}"
545
+ }
546
+ }
547
+ },
548
+ "Multi-colored-unordered": {
549
+ "colorscale": {
550
+ "100": {
551
+ "type": "color",
552
+ "value": "{chart.color.blue.300}"
553
+ },
554
+ "200": {
555
+ "type": "color",
556
+ "value": "{chart.color.yellow.300}"
557
+ },
558
+ "300": {
559
+ "type": "color",
560
+ "value": "{chart.color.green.300}"
561
+ },
562
+ "400": {
563
+ "type": "color",
564
+ "value": "{chart.color.purple.300}"
565
+ },
566
+ "500": {
567
+ "type": "color",
568
+ "value": "{chart.color.orange.300}"
569
+ },
570
+ "600": {
571
+ "type": "color",
572
+ "value": "{chart.color.teal.300}"
573
+ },
574
+ "700": {
575
+ "type": "color",
576
+ "value": "{chart.color.black.300}"
577
+ },
578
+ "800": {
579
+ "type": "color",
580
+ "value": "{chart.color.blue.100}"
581
+ },
582
+ "900": {
583
+ "type": "color",
584
+ "value": "{chart.color.yellow.500}"
585
+ },
586
+ "1000": {
587
+ "type": "color",
588
+ "value": "{chart.color.green.100}"
589
+ },
590
+ "1100": {
591
+ "type": "color",
592
+ "value": "{chart.color.purple.500}"
593
+ },
594
+ "1200": {
595
+ "type": "color",
596
+ "value": "{chart.color.orange.100}"
597
+ },
598
+ "1300": {
599
+ "type": "color",
600
+ "value": "{chart.color.teal.500}"
601
+ },
602
+ "1400": {
603
+ "type": "color",
604
+ "value": "{chart.color.black.100}"
605
+ },
606
+ "1500": {
607
+ "type": "color",
608
+ "value": "{chart.color.blue.500}"
609
+ },
610
+ "1600": {
611
+ "type": "color",
612
+ "value": "{chart.color.yellow.100}"
613
+ },
614
+ "1700": {
615
+ "type": "color",
616
+ "value": "{chart.color.green.500}"
617
+ },
618
+ "1800": {
619
+ "type": "color",
620
+ "value": "{chart.color.purple.100}"
621
+ },
622
+ "1900": {
623
+ "type": "color",
624
+ "value": "{chart.color.orange.500}"
625
+ },
626
+ "2000": {
627
+ "type": "color",
628
+ "value": "{chart.color.teal.100}"
629
+ },
630
+ "2100": {
631
+ "type": "color",
632
+ "value": "{chart.color.black.500}"
633
+ },
634
+ "2200": {
635
+ "type": "color",
636
+ "value": "{chart.color.blue.200}"
637
+ },
638
+ "2300": {
639
+ "type": "color",
640
+ "value": "{chart.color.yellow.400}"
641
+ },
642
+ "2400": {
643
+ "type": "color",
644
+ "value": "{chart.color.green.200}"
645
+ },
646
+ "2500": {
647
+ "type": "color",
648
+ "value": "{chart.color.purple.400}"
649
+ },
650
+ "2600": {
651
+ "type": "color",
652
+ "value": "{chart.color.orange.200}"
653
+ },
654
+ "2700": {
655
+ "type": "color",
656
+ "value": "{chart.color.teal.400}"
657
+ },
658
+ "2800": {
659
+ "type": "color",
660
+ "value": "{chart.color.black.200}"
661
+ },
662
+ "2900": {
663
+ "type": "color",
664
+ "value": "{chart.color.blue.400}"
665
+ },
666
+ "3000": {
667
+ "type": "color",
668
+ "value": "{chart.color.yellow.200}"
669
+ },
670
+ "3100": {
671
+ "type": "color",
672
+ "value": "{chart.color.green.400}"
673
+ },
674
+ "3200": {
675
+ "type": "color",
676
+ "value": "{chart.color.purple.200}"
677
+ },
678
+ "3300": {
679
+ "type": "color",
680
+ "value": "{chart.color.orange.400}"
681
+ },
682
+ "3400": {
683
+ "type": "color",
684
+ "value": "{chart.color.teal.200}"
685
+ },
686
+ "3500": {
687
+ "type": "color",
688
+ "value": "{chart.color.black.400}"
689
+ }
690
+ }
691
+ }
692
+ }
693
+ }
694
+ }
695
+ }