@patternfly/design-tokens 1.15.0 → 1.15.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.
- package/build/css/tokens-dark.scss +17 -16
- package/build/css/tokens-default.scss +11 -9
- package/build/css/{tokens-redhat-dark.scss → tokens-felt-dark.scss} +8 -2
- package/build/css/{tokens-redhat-glass-dark.scss → tokens-felt-glass-dark.scss} +16 -6
- package/build/css/tokens-felt-glass.scss +30 -0
- package/build/css/{tokens-redhat-highcontrast-dark.scss → tokens-felt-highcontrast-dark.scss} +5 -9
- package/build/css/tokens-felt-highcontrast.scss +121 -0
- package/build/css/{tokens-redhat.scss → tokens-felt.scss} +1 -1
- package/build/css/tokens-glass-dark.scss +10 -6
- package/build/css/tokens-glass.scss +14 -7
- package/build/css/tokens-palette.scss +1 -1
- package/build/css/tokens-redhat-highcontrast.scss +641 -10
- package/build.js +80 -37
- package/{config.redhat-dark.json → config.felt-dark.json} +2 -2
- package/{config.redhat-glass-dark.json → config.felt-glass-dark.json} +2 -2
- package/{config.redhat-glass.json → config.felt-glass.json} +2 -2
- package/{config.redhat-highcontrast-dark.json → config.felt-highcontrast-dark.json} +2 -2
- package/{config.redhat.json → config.felt.json} +2 -2
- package/{config.layers.redhat-dark.json → config.layers.felt-dark.json} +2 -2
- package/{config.layers.redhat-glass-dark.json → config.layers.felt-glass-dark.json} +2 -2
- package/{config.layers.redhat-glass.json → config.layers.felt-glass.json} +2 -2
- package/{config.layers.redhat-highcontrast-dark.json → config.layers.felt-highcontrast-dark.json} +2 -2
- package/package.json +1 -1
- package/patternfly-docs/content/token-layers-felt-dark.json +48543 -0
- package/patternfly-docs/content/token-layers-felt-glass-dark.json +37670 -0
- package/patternfly-docs/content/token-layers-felt-glass.json +52576 -0
- package/patternfly-docs/content/token-layers-felt-highcontrast-dark.json +38323 -0
- package/patternfly-docs/content/token-layers-glass-dark.json +3225 -3126
- package/patternfly-docs/content/token-layers-glass.json +14804 -2938
- package/patternfly-docs/content/token-layers-highcontrast-dark.json +3200 -2956
- package/patternfly-docs/content/token-layers-highcontrast.json +4665 -4428
- package/patternfly-docs/content/token-layers-redhat-dark.json +429 -346
- package/patternfly-docs/content/token-layers-redhat-glass-dark.json +638 -541
- package/patternfly-docs/content/token-layers-redhat-glass.json +12354 -484
- package/patternfly-docs/content/token-layers-redhat-highcontrast-dark.json +309 -226
- package/patternfly-docs/content/token-layers-redhat-highcontrast.json +5248 -4689
- package/patternfly-docs/content/token-layers-redhat.json +6681 -6126
- package/plugins/export-patternfly-tokens/dist/ui.html +344 -334
- package/plugins/export-patternfly-tokens/src/ui.tsx +44 -34
- package/tokens/default/dark/base.dark.json +44 -44
- package/tokens/default/dark/charts.dark.json +33 -33
- package/tokens/default/dark/charts.highcontrast.dark.json +765 -0
- package/tokens/default/dark/palette.color.json +4 -4
- package/tokens/default/dark/semantic.dark.json +144 -130
- package/tokens/default/glass/base.dimension.json +24 -24
- package/tokens/default/glass/palette.color.json +4 -4
- package/tokens/default/glass/semantic.dimension.glass.json +1105 -0
- package/tokens/default/glass/semantic.glass.json +143 -129
- package/tokens/default/glass-dark/base.dark.json +44 -44
- package/tokens/default/glass-dark/palette.color.json +4 -4
- package/tokens/default/glass-dark/semantic.glass.dark.json +147 -133
- package/tokens/default/highcontrast/base.dimension.json +24 -24
- package/tokens/default/highcontrast/palette.color.json +4 -4
- package/tokens/default/highcontrast/semantic.dimension.highcontrast.json +143 -135
- package/tokens/default/highcontrast/semantic.highcontrast.json +137 -123
- package/tokens/default/highcontrast-dark/base.dark.json +44 -44
- package/tokens/default/highcontrast-dark/palette.color.json +4 -4
- package/tokens/default/highcontrast-dark/semantic.highcontrast.dark.json +141 -127
- package/tokens/default/light/base.dimension.json +24 -24
- package/tokens/default/light/charts.highcontrast.json +765 -0
- package/tokens/default/light/charts.json +33 -33
- package/tokens/default/light/palette.color.json +4 -4
- package/tokens/default/light/semantic.dimension.json +144 -136
- package/tokens/default/light/semantic.json +137 -123
- package/tokens/default/light/semantic.motion.json +14 -14
- package/tokens/{redhat/dark/redhat.color.dark.json → felt/dark/felt.color.dark.json} +30 -30
- package/tokens/{redhat/glass/redhat.color.glass.json → felt/glass/felt.color.glass.json} +10 -10
- package/tokens/{redhat/highcontrast/redhat.dimension.highcontrast.json → felt/glass/felt.dimension.glass.json} +6 -6
- package/tokens/{redhat/glass-dark/redhat.color.glass.dark.json → felt/glass-dark/felt.color.glass.dark.json} +30 -25
- package/tokens/{redhat/highcontrast/redhat.color.highcontrast.json → felt/highcontrast/felt.color.highcontrast.json} +10 -10
- package/tokens/{redhat/light/redhat.dimension.json → felt/highcontrast/felt.dimension.highcontrast.json} +6 -6
- package/tokens/{redhat/highcontrast-dark/redhat.color.highcontrast.dark.json → felt/highcontrast-dark/felt.color.highcontrast.dark.json} +10 -10
- package/tokens/{redhat/light/redhat.color.json → felt/light/felt.color.json} +10 -10
- package/tokens/felt/light/felt.dimension.json +23 -0
- package/build/css/tokens-redhat-glass.scss +0 -21
- /package/{config.redhat-highcontrast.json → config.felt-highcontrast.json} +0 -0
- /package/{config.layers.redhat-highcontrast.json → config.layers.felt-highcontrast.json} +0 -0
- /package/{config.layers.redhat.json → config.layers.felt.json} +0 -0
|
@@ -43,20 +43,41 @@
|
|
|
43
43
|
"value": "{global.border.radius.small}"
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
|
+
"glass": {
|
|
47
|
+
"default": {
|
|
48
|
+
"type": "number",
|
|
49
|
+
"value": "{global.border.radius.medium}"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
46
52
|
"action": {
|
|
53
|
+
"default": {
|
|
54
|
+
"type": "number",
|
|
55
|
+
"value": "{global.border.radius.pill}"
|
|
56
|
+
},
|
|
47
57
|
"plain": {
|
|
48
58
|
"default": {
|
|
49
59
|
"type": "number",
|
|
50
60
|
"value": "{global.border.radius.small}"
|
|
51
61
|
}
|
|
52
|
-
},
|
|
53
|
-
"default": {
|
|
54
|
-
"type": "number",
|
|
55
|
-
"value": "{global.border.radius.pill}"
|
|
56
62
|
}
|
|
57
63
|
}
|
|
58
64
|
},
|
|
59
65
|
"width": {
|
|
66
|
+
"regular": {
|
|
67
|
+
"description": "Use as the default border width for elements.",
|
|
68
|
+
"type": "number",
|
|
69
|
+
"value": "{global.border.width.100}"
|
|
70
|
+
},
|
|
71
|
+
"strong": {
|
|
72
|
+
"description": "Use as a stronger/wider border width for elements.",
|
|
73
|
+
"type": "number",
|
|
74
|
+
"value": "{global.border.width.200}"
|
|
75
|
+
},
|
|
76
|
+
"extra-strong": {
|
|
77
|
+
"description": "Use as the strongest/widest border width for elements.",
|
|
78
|
+
"type": "number",
|
|
79
|
+
"value": "{global.border.width.300}"
|
|
80
|
+
},
|
|
60
81
|
"divider": {
|
|
61
82
|
"default": {
|
|
62
83
|
"description": "Use as the default border width for dividers.",
|
|
@@ -74,20 +95,11 @@
|
|
|
74
95
|
"value": "{global.border.width.100}"
|
|
75
96
|
}
|
|
76
97
|
},
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
"strong": {
|
|
83
|
-
"description": "Use as a stronger/wider border width for elements.",
|
|
84
|
-
"type": "number",
|
|
85
|
-
"value": "{global.border.width.200}"
|
|
86
|
-
},
|
|
87
|
-
"extra-strong": {
|
|
88
|
-
"description": "Use as the strongest/widest border width for elements.",
|
|
89
|
-
"type": "number",
|
|
90
|
-
"value": "{global.border.width.300}"
|
|
98
|
+
"glass": {
|
|
99
|
+
"default": {
|
|
100
|
+
"type": "number",
|
|
101
|
+
"value": "{global.border.width.regular}"
|
|
102
|
+
}
|
|
91
103
|
},
|
|
92
104
|
"box": {
|
|
93
105
|
"default": {
|
|
@@ -144,6 +156,16 @@
|
|
|
144
156
|
"type": "number",
|
|
145
157
|
"value": "{global.border.width.100}"
|
|
146
158
|
},
|
|
159
|
+
"hover": {
|
|
160
|
+
"description": "Use as the hover state border width for actions like secondary and tertiary buttons",
|
|
161
|
+
"type": "number",
|
|
162
|
+
"value": "{global.border.width.200}"
|
|
163
|
+
},
|
|
164
|
+
"clicked": {
|
|
165
|
+
"description": "Use as the clicked state border width for actions like secondary and tertiary buttons",
|
|
166
|
+
"type": "number",
|
|
167
|
+
"value": "{global.border.width.200}"
|
|
168
|
+
},
|
|
147
169
|
"plain": {
|
|
148
170
|
"default": {
|
|
149
171
|
"description": "Use as the default border width for plain actions",
|
|
@@ -160,16 +182,6 @@
|
|
|
160
182
|
"type": "number",
|
|
161
183
|
"value": "{global.border.width.200}"
|
|
162
184
|
}
|
|
163
|
-
},
|
|
164
|
-
"hover": {
|
|
165
|
-
"description": "Use as the hover state border width for actions like secondary and tertiary buttons",
|
|
166
|
-
"type": "number",
|
|
167
|
-
"value": "{global.border.width.200}"
|
|
168
|
-
},
|
|
169
|
-
"clicked": {
|
|
170
|
-
"description": "Use as the clicked state border width for actions like secondary and tertiary buttons",
|
|
171
|
-
"type": "number",
|
|
172
|
-
"value": "{global.border.width.200}"
|
|
173
185
|
}
|
|
174
186
|
},
|
|
175
187
|
"control": {
|
|
@@ -285,6 +297,16 @@
|
|
|
285
297
|
"type": "number",
|
|
286
298
|
"value": "{global.spacer.lg}"
|
|
287
299
|
},
|
|
300
|
+
"compact": {
|
|
301
|
+
"description": "Use to set the horizontal padding inside a compact action, like compact buttons.",
|
|
302
|
+
"type": "number",
|
|
303
|
+
"value": "{global.spacer.md}"
|
|
304
|
+
},
|
|
305
|
+
"spacious": {
|
|
306
|
+
"description": "Use to set the horizontal padding inside a large/display action, like CTAs.",
|
|
307
|
+
"type": "number",
|
|
308
|
+
"value": "{global.spacer.xl}"
|
|
309
|
+
},
|
|
288
310
|
"plain": {
|
|
289
311
|
"default": {
|
|
290
312
|
"description": "Use to set the horizontal padding inside a plain action, like plain buttons.",
|
|
@@ -296,16 +318,6 @@
|
|
|
296
318
|
"type": "number",
|
|
297
319
|
"value": "{global.spacer.xs}"
|
|
298
320
|
}
|
|
299
|
-
},
|
|
300
|
-
"compact": {
|
|
301
|
-
"description": "Use to set the horizontal padding inside a compact action, like compact buttons.",
|
|
302
|
-
"type": "number",
|
|
303
|
-
"value": "{global.spacer.md}"
|
|
304
|
-
},
|
|
305
|
-
"spacious": {
|
|
306
|
-
"description": "Use to set the horizontal padding inside a large/display action, like CTAs.",
|
|
307
|
-
"type": "number",
|
|
308
|
-
"value": "{global.spacer.xl}"
|
|
309
321
|
}
|
|
310
322
|
}
|
|
311
323
|
},
|
|
@@ -420,56 +432,12 @@
|
|
|
420
432
|
"type": "number",
|
|
421
433
|
"value": "{global.icon.size.400}"
|
|
422
434
|
},
|
|
435
|
+
"3xl": {
|
|
436
|
+
"description": "Use for triple extra large icons.",
|
|
437
|
+
"type": "number",
|
|
438
|
+
"value": "{global.icon.size.500}"
|
|
439
|
+
},
|
|
423
440
|
"font": {
|
|
424
|
-
"body": {
|
|
425
|
-
"sm": {
|
|
426
|
-
"description": "Use for icons that are placed inline with small body text",
|
|
427
|
-
"type": "number",
|
|
428
|
-
"value": "{global.font.size.body.sm}"
|
|
429
|
-
},
|
|
430
|
-
"default": {
|
|
431
|
-
"description": "Use for icons that are placed inline with default body text",
|
|
432
|
-
"type": "number",
|
|
433
|
-
"value": "{global.font.size.body.default}"
|
|
434
|
-
},
|
|
435
|
-
"lg": {
|
|
436
|
-
"description": "Use for icons that are placed inline with large body text",
|
|
437
|
-
"type": "number",
|
|
438
|
-
"value": "{global.font.size.body.lg}"
|
|
439
|
-
}
|
|
440
|
-
},
|
|
441
|
-
"heading": {
|
|
442
|
-
"h1": {
|
|
443
|
-
"description": "Use for icons that are placed inline with first level headings",
|
|
444
|
-
"type": "number",
|
|
445
|
-
"value": "{global.font.size.heading.h1}"
|
|
446
|
-
},
|
|
447
|
-
"h2": {
|
|
448
|
-
"description": "Use for icons that are placed inline with second level headings",
|
|
449
|
-
"type": "number",
|
|
450
|
-
"value": "{global.font.size.heading.h2}"
|
|
451
|
-
},
|
|
452
|
-
"h3": {
|
|
453
|
-
"description": "Use for icons that are placed inline with third level headings",
|
|
454
|
-
"type": "number",
|
|
455
|
-
"value": "{global.font.size.heading.h3}"
|
|
456
|
-
},
|
|
457
|
-
"h4": {
|
|
458
|
-
"description": "Use for icons that are placed inline with fourth level headings",
|
|
459
|
-
"type": "number",
|
|
460
|
-
"value": "{global.font.size.heading.h4}"
|
|
461
|
-
},
|
|
462
|
-
"h5": {
|
|
463
|
-
"description": "Use for icons that are placed inline with fifth level headings",
|
|
464
|
-
"type": "number",
|
|
465
|
-
"value": "{global.font.size.heading.h5}"
|
|
466
|
-
},
|
|
467
|
-
"h6": {
|
|
468
|
-
"description": "Use for icons that are placed inline with sixth level headings",
|
|
469
|
-
"type": "number",
|
|
470
|
-
"value": "{global.font.size.heading.h6}"
|
|
471
|
-
}
|
|
472
|
-
},
|
|
473
441
|
"xs": {
|
|
474
442
|
"description": "Use for icons that are placed inline with font–size–xs text",
|
|
475
443
|
"type": "number",
|
|
@@ -509,12 +477,56 @@
|
|
|
509
477
|
"description": "Use for icons that are placed inline with font–size–3xl text",
|
|
510
478
|
"type": "number",
|
|
511
479
|
"value": "{global.font.size.4xl}"
|
|
480
|
+
},
|
|
481
|
+
"heading": {
|
|
482
|
+
"h1": {
|
|
483
|
+
"description": "Use for icons that are placed inline with first level headings",
|
|
484
|
+
"type": "number",
|
|
485
|
+
"value": "{global.font.size.heading.h1}"
|
|
486
|
+
},
|
|
487
|
+
"h2": {
|
|
488
|
+
"description": "Use for icons that are placed inline with second level headings",
|
|
489
|
+
"type": "number",
|
|
490
|
+
"value": "{global.font.size.heading.h2}"
|
|
491
|
+
},
|
|
492
|
+
"h3": {
|
|
493
|
+
"description": "Use for icons that are placed inline with third level headings",
|
|
494
|
+
"type": "number",
|
|
495
|
+
"value": "{global.font.size.heading.h3}"
|
|
496
|
+
},
|
|
497
|
+
"h4": {
|
|
498
|
+
"description": "Use for icons that are placed inline with fourth level headings",
|
|
499
|
+
"type": "number",
|
|
500
|
+
"value": "{global.font.size.heading.h4}"
|
|
501
|
+
},
|
|
502
|
+
"h5": {
|
|
503
|
+
"description": "Use for icons that are placed inline with fifth level headings",
|
|
504
|
+
"type": "number",
|
|
505
|
+
"value": "{global.font.size.heading.h5}"
|
|
506
|
+
},
|
|
507
|
+
"h6": {
|
|
508
|
+
"description": "Use for icons that are placed inline with sixth level headings",
|
|
509
|
+
"type": "number",
|
|
510
|
+
"value": "{global.font.size.heading.h6}"
|
|
511
|
+
}
|
|
512
|
+
},
|
|
513
|
+
"body": {
|
|
514
|
+
"sm": {
|
|
515
|
+
"description": "Use for icons that are placed inline with small body text",
|
|
516
|
+
"type": "number",
|
|
517
|
+
"value": "{global.font.size.body.sm}"
|
|
518
|
+
},
|
|
519
|
+
"default": {
|
|
520
|
+
"description": "Use for icons that are placed inline with default body text",
|
|
521
|
+
"type": "number",
|
|
522
|
+
"value": "{global.font.size.body.default}"
|
|
523
|
+
},
|
|
524
|
+
"lg": {
|
|
525
|
+
"description": "Use for icons that are placed inline with large body text",
|
|
526
|
+
"type": "number",
|
|
527
|
+
"value": "{global.font.size.body.lg}"
|
|
528
|
+
}
|
|
512
529
|
}
|
|
513
|
-
},
|
|
514
|
-
"3xl": {
|
|
515
|
-
"description": "Use for triple extra large icons.",
|
|
516
|
-
"type": "number",
|
|
517
|
-
"value": "{global.icon.size.500}"
|
|
518
530
|
}
|
|
519
531
|
}
|
|
520
532
|
},
|
|
@@ -575,6 +587,45 @@
|
|
|
575
587
|
}
|
|
576
588
|
},
|
|
577
589
|
"size": {
|
|
590
|
+
"xs": {
|
|
591
|
+
"type": "number",
|
|
592
|
+
"value": "{global.font.size.100}"
|
|
593
|
+
},
|
|
594
|
+
"sm": {
|
|
595
|
+
"description": "Use as the font size for small text that isn’t a heading or in a body section.",
|
|
596
|
+
"type": "number",
|
|
597
|
+
"value": "{global.font.size.200}"
|
|
598
|
+
},
|
|
599
|
+
"md": {
|
|
600
|
+
"description": "Use as the font size for medium text that isn’t a heading or in a body section.",
|
|
601
|
+
"type": "number",
|
|
602
|
+
"value": "{global.font.size.300}"
|
|
603
|
+
},
|
|
604
|
+
"lg": {
|
|
605
|
+
"description": "Use as the font size for large text that isn’t a heading or in a body section.",
|
|
606
|
+
"type": "number",
|
|
607
|
+
"value": "{global.font.size.400}"
|
|
608
|
+
},
|
|
609
|
+
"xl": {
|
|
610
|
+
"description": "Use as the font size for extra large text that isn’t a heading or in a body section.",
|
|
611
|
+
"type": "number",
|
|
612
|
+
"value": "{global.font.size.500}"
|
|
613
|
+
},
|
|
614
|
+
"2xl": {
|
|
615
|
+
"description": "Use as the font size for double extra large text that isn’t a heading or in a body section.",
|
|
616
|
+
"type": "number",
|
|
617
|
+
"value": "{global.font.size.600}"
|
|
618
|
+
},
|
|
619
|
+
"3xl": {
|
|
620
|
+
"description": "Use as the font size for triple extra large text that isn’t a heading or in a body section.",
|
|
621
|
+
"type": "number",
|
|
622
|
+
"value": "{global.font.size.700}"
|
|
623
|
+
},
|
|
624
|
+
"4xl": {
|
|
625
|
+
"description": "Use as the font size for quadruple extra large text that isn’t a heading or in a body section.",
|
|
626
|
+
"type": "number",
|
|
627
|
+
"value": "{global.font.size.800}"
|
|
628
|
+
},
|
|
578
629
|
"body": {
|
|
579
630
|
"sm": {
|
|
580
631
|
"description": "Use for a smaller font size in body sections.",
|
|
@@ -623,45 +674,6 @@
|
|
|
623
674
|
"type": "number",
|
|
624
675
|
"value": "{global.font.size.md}"
|
|
625
676
|
}
|
|
626
|
-
},
|
|
627
|
-
"xs": {
|
|
628
|
-
"type": "number",
|
|
629
|
-
"value": "{global.font.size.100}"
|
|
630
|
-
},
|
|
631
|
-
"sm": {
|
|
632
|
-
"description": "Use as the font size for small text that isn’t a heading or in a body section.",
|
|
633
|
-
"type": "number",
|
|
634
|
-
"value": "{global.font.size.200}"
|
|
635
|
-
},
|
|
636
|
-
"md": {
|
|
637
|
-
"description": "Use as the font size for medium text that isn’t a heading or in a body section.",
|
|
638
|
-
"type": "number",
|
|
639
|
-
"value": "{global.font.size.300}"
|
|
640
|
-
},
|
|
641
|
-
"lg": {
|
|
642
|
-
"description": "Use as the font size for large text that isn’t a heading or in a body section.",
|
|
643
|
-
"type": "number",
|
|
644
|
-
"value": "{global.font.size.400}"
|
|
645
|
-
},
|
|
646
|
-
"xl": {
|
|
647
|
-
"description": "Use as the font size for extra large text that isn’t a heading or in a body section.",
|
|
648
|
-
"type": "number",
|
|
649
|
-
"value": "{global.font.size.500}"
|
|
650
|
-
},
|
|
651
|
-
"2xl": {
|
|
652
|
-
"description": "Use as the font size for double extra large text that isn’t a heading or in a body section.",
|
|
653
|
-
"type": "number",
|
|
654
|
-
"value": "{global.font.size.600}"
|
|
655
|
-
},
|
|
656
|
-
"3xl": {
|
|
657
|
-
"description": "Use as the font size for triple extra large text that isn’t a heading or in a body section.",
|
|
658
|
-
"type": "number",
|
|
659
|
-
"value": "{global.font.size.700}"
|
|
660
|
-
},
|
|
661
|
-
"4xl": {
|
|
662
|
-
"description": "Use as the font size for quadruple extra large text that isn’t a heading or in a body section.",
|
|
663
|
-
"type": "number",
|
|
664
|
-
"value": "{global.font.size.800}"
|
|
665
677
|
}
|
|
666
678
|
}
|
|
667
679
|
},
|
|
@@ -994,10 +1006,6 @@
|
|
|
994
1006
|
"default": {
|
|
995
1007
|
"type": "number",
|
|
996
1008
|
"value": "{global.spacer.xs}"
|
|
997
|
-
},
|
|
998
|
-
"hover": {
|
|
999
|
-
"type": "number",
|
|
1000
|
-
"value": 5
|
|
1001
1009
|
}
|
|
1002
1010
|
},
|
|
1003
1011
|
"editable-text": {
|