@patternfly/design-tokens 1.14.8 → 1.15.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 (53) hide show
  1. package/build/css/tokens-dark.scss +14 -15
  2. package/build/css/tokens-default.scss +10 -11
  3. package/build/css/tokens-glass-dark.scss +16 -3
  4. package/build/css/tokens-glass.scss +9 -3
  5. package/build/css/tokens-palette.scss +3 -1
  6. package/build/css/tokens-redhat-dark.scss +4 -3
  7. package/build/css/tokens-redhat-glass-dark.scss +18 -4
  8. package/build/css/tokens-redhat-glass.scss +9 -3
  9. package/build/css/tokens-redhat-highcontrast-dark.scss +10 -3
  10. package/build/css/tokens-redhat-highcontrast.scss +2 -2
  11. package/build/css/tokens-redhat.scss +1 -1
  12. package/config.palette-colors.json +1 -1
  13. package/package.json +1 -1
  14. package/patternfly-docs/content/token-layers-glass-dark.json +497 -1097
  15. package/patternfly-docs/content/token-layers-glass.json +332 -904
  16. package/patternfly-docs/content/token-layers-highcontrast-dark.json +410 -385
  17. package/patternfly-docs/content/token-layers-highcontrast.json +540 -519
  18. package/patternfly-docs/content/token-layers-redhat-dark.json +2555 -2592
  19. package/patternfly-docs/content/token-layers-redhat-glass-dark.json +1112 -1768
  20. package/patternfly-docs/content/token-layers-redhat-glass.json +327 -899
  21. package/patternfly-docs/content/token-layers-redhat-highcontrast-dark.json +443 -422
  22. package/patternfly-docs/content/token-layers-redhat-highcontrast.json +626 -609
  23. package/patternfly-docs/content/token-layers-redhat.json +692 -671
  24. package/plugins/export-patternfly-tokens/dist/ui.html +32 -24
  25. package/plugins/export-patternfly-tokens/src/ui.tsx +8 -0
  26. package/tokens/default/dark/base.dark.json +5 -5
  27. package/tokens/default/dark/charts.dark.json +18 -18
  28. package/tokens/default/dark/semantic.dark.json +34 -39
  29. package/tokens/default/glass/base.dimension.json +16 -16
  30. package/tokens/default/glass/base.json +2 -2
  31. package/tokens/default/glass/semantic.glass.json +33 -38
  32. package/tokens/default/glass-dark/base.dark.json +5 -5
  33. package/tokens/default/glass-dark/semantic.glass.dark.json +45 -50
  34. package/tokens/default/highcontrast/base.dimension.json +16 -16
  35. package/tokens/default/highcontrast/base.json +2 -2
  36. package/tokens/default/highcontrast/semantic.dimension.highcontrast.json +5 -5
  37. package/tokens/default/highcontrast/semantic.highcontrast.json +27 -32
  38. package/tokens/default/highcontrast-dark/base.dark.json +5 -5
  39. package/tokens/default/highcontrast-dark/semantic.highcontrast.dark.json +27 -32
  40. package/tokens/default/light/base.dimension.json +16 -16
  41. package/tokens/default/light/base.json +2 -2
  42. package/tokens/default/light/charts.json +18 -18
  43. package/tokens/default/light/semantic.dimension.json +5 -5
  44. package/tokens/default/light/semantic.json +27 -32
  45. package/tokens/default/light/semantic.motion.json +8 -8
  46. package/tokens/redhat/dark/redhat.color.dark.json +71 -24
  47. package/tokens/redhat/glass/redhat.color.glass.json +25 -25
  48. package/tokens/redhat/glass-dark/redhat.color.glass.dark.json +67 -25
  49. package/tokens/redhat/highcontrast/redhat.color.highcontrast.json +25 -25
  50. package/tokens/redhat/highcontrast/redhat.dimension.highcontrast.json +6 -6
  51. package/tokens/redhat/highcontrast-dark/redhat.color.highcontrast.dark.json +25 -25
  52. package/tokens/redhat/light/redhat.color.json +25 -25
  53. package/tokens/redhat/light/redhat.dimension.json +6 -6
package/tokens/default/glass-dark/semantic.glass.dark.json CHANGED
@@ -2,63 +2,39 @@
2
2
  {
3
3
  "global": {
4
4
  "background": {
5
- "filter": {
6
- "glass": {
7
- "blur": {
8
- "primary": {
9
- "type": "number",
10
- "value": 12.5
11
- },
12
- "floating": {
13
- "type": "number",
14
- "value": 0
15
- }
16
- }
17
- }
18
- },
19
5
  "color": {
20
- "glass": {
21
- "primary": {
22
- "type": "color",
23
- "value": "{global.background.color.primary.default}"
24
- },
25
- "floating": {
26
- "type": "color",
27
- "value": "{global.background.color.floating.default}"
28
- }
29
- },
30
6
  "primary": {
31
7
  "default": {
32
8
  "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.",
33
9
  "type": "color",
34
- "value": "{global.dark.background.color.200}"
10
+ "value": "rgba(41, 41, 41, 0.5000)"
35
11
  },
36
12
  "hover": {
37
13
  "description": "Use as the hover state for primary backgrounds",
38
14
  "type": "color",
39
- "value": "{global.dark.background.color.300}"
15
+ "value": "rgba(56, 56, 56, 0.5000)"
40
16
  },
41
17
  "clicked": {
42
18
  "description": "Use as the clicked state for primary backgrounds",
43
19
  "type": "color",
44
- "value": "{global.dark.background.color.300}"
20
+ "value": "rgba(56, 56, 56, 0.5000)"
45
21
  }
46
22
  },
47
23
  "secondary": {
48
24
  "default": {
49
25
  "description": "Use as the secondary background color for UI content Use as the primary background color for UI content such as cards, page sections, and other content areas. Secondary background color is also used for our UI shell backgrounds (nav, masthead, etc).",
50
26
  "type": "color",
51
- "value": "{global.dark.background.color.100}"
27
+ "value": "rgba(21, 21, 21, 0.6000)"
52
28
  },
53
29
  "hover": {
54
30
  "description": "Use as the hover state for secondary backgrounds",
55
31
  "type": "color",
56
- "value": "{global.dark.background.color.200}"
32
+ "value": "rgba(41, 41, 41, 0.6000)"
57
33
  },
58
34
  "clicked": {
59
35
  "description": "Use as the clicked state for secondary backgrounds",
60
36
  "type": "color",
61
- "value": "{global.dark.background.color.200}"
37
+ "value": "rgba(41, 41, 41, 0.6000)"
62
38
  }
63
39
  },
64
40
  "tertiary": {
@@ -68,20 +44,37 @@
68
44
  "value": "{global.dark.background.color.600}"
69
45
  }
70
46
  },
47
+ "glass": {
48
+ "primary": {
49
+ "type": "color",
50
+ "value": "rgba(41, 41, 41, 0.5000)"
51
+ },
52
+ "floating": {
53
+ "type": "color",
54
+ "value": "{global.background.color.floating.default}"
55
+ }
56
+ },
71
57
  "floating": {
72
58
  "default": {
73
59
  "description": "Use as the background color for components that appear over other content, such as toast alerts, menus, modals, overlay drawers, etc.",
74
60
  "type": "color",
75
- "value": "{global.dark.background.color.300}"
61
+ "value": "{global.dark.background.color.200}"
76
62
  },
77
63
  "hover": {
78
64
  "description": "Use as the hover state for floating backgrounds",
79
65
  "type": "color",
80
- "value": "{global.dark.background.color.200}"
66
+ "value": "{global.dark.background.color.300}"
81
67
  },
82
68
  "clicked": {
83
69
  "description": "Use as the clicked state for floating backgrounds",
84
70
  "type": "color",
71
+ "value": "{global.dark.background.color.300}"
72
+ }
73
+ },
74
+ "sticky": {
75
+ "default": {
76
+ "description": "Use as the background color for components that appear over other content, such as toast alerts, menus, modals, overlay drawers, etc.",
77
+ "type": "color",
85
78
  "value": "{global.dark.background.color.200}"
86
79
  }
87
80
  },
@@ -120,11 +113,11 @@
120
113
  "default": {
121
114
  "description": "Use as the default background for control elements like form inputs and menu toggles.",
122
115
  "type": "color",
123
- "value": "{global.dark.background.color.300}"
116
+ "value": "{global.dark.background.color.500}"
124
117
  },
125
118
  "read-only": {
126
119
  "type": "color",
127
- "value": "{global.dark.background.color.300}"
120
+ "value": "{global.dark.background.color.500}"
128
121
  }
129
122
  },
130
123
  "highlight": {
@@ -183,15 +176,17 @@
183
176
  }
184
177
  }
185
178
  },
186
- "opacity": {
179
+ "filter": {
187
180
  "glass": {
188
- "primary": {
189
- "type": "number",
190
- "value": 80
191
- },
192
- "floating": {
193
- "type": "number",
194
- "value": 100
181
+ "blur": {
182
+ "primary": {
183
+ "type": "number",
184
+ "value": 12.5
185
+ },
186
+ "floating": {
187
+ "type": "number",
188
+ "value": 0
189
+ }
195
190
  }
196
191
  }
197
192
  }
@@ -615,12 +610,12 @@
615
610
  "hover": {
616
611
  "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
617
612
  "type": "color",
618
- "value": "{global.icon.color.inverse}"
613
+ "value": "{global.icon.color.regular}"
619
614
  },
620
615
  "clicked": {
621
616
  "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
622
617
  "type": "color",
623
- "value": "{global.icon.color.inverse}"
618
+ "value": "{global.icon.color.regular}"
624
619
  }
625
620
  },
626
621
  "subtle": {
@@ -1101,7 +1096,7 @@
1101
1096
  },
1102
1097
  "read-only": {
1103
1098
  "type": "color",
1104
- "value": "{global.dark.border.color.50}"
1099
+ "value": "{global.border.color.alt}"
1105
1100
  }
1106
1101
  },
1107
1102
  "brand": {
@@ -1265,7 +1260,7 @@
1265
1260
  "subtle": {
1266
1261
  "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.",
1267
1262
  "type": "color",
1268
- "value": "{global.dark.border.color.50}"
1263
+ "value": "{color.gray.70}"
1269
1264
  },
1270
1265
  "disabled": {
1271
1266
  "description": "Use as the disabled border color for elements like form inputs, menu toggles, cards, etc.",
@@ -1516,17 +1511,17 @@
1516
1511
  "default": {
1517
1512
  "description": "Use as the default color for text placed on a brand-colored background.",
1518
1513
  "type": "color",
1519
- "value": "{global.text.color.inverse}"
1514
+ "value": "{global.text.color.regular}"
1520
1515
  },
1521
1516
  "hover": {
1522
1517
  "description": "Use as the hover state color for text placed on a brand-colored background.",
1523
1518
  "type": "color",
1524
- "value": "{global.text.color.inverse}"
1519
+ "value": "{global.text.color.regular}"
1525
1520
  },
1526
1521
  "clicked": {
1527
1522
  "description": "Use as the clicked state color for text placed on a brand-colored background.",
1528
1523
  "type": "color",
1529
- "value": "{global.text.color.inverse}"
1524
+ "value": "{global.text.color.regular}"
1530
1525
  }
1531
1526
  },
1532
1527
  "subtle": {
@@ -1954,7 +1949,7 @@
1954
1949
  "directional": {
1955
1950
  "description": "Use as the color of medium box-shadows.",
1956
1951
  "type": "color",
1957
- "value": "{global.dark.box-shadow.color.200}"
1952
+ "value": "{global.dark.box-shadow.color.100}"
1958
1953
  }
1959
1954
  },
1960
1955
  "lg": {
package/tokens/default/highcontrast/base.dimension.json CHANGED
@@ -110,16 +110,6 @@
110
110
  }
111
111
  },
112
112
  "font": {
113
- "line-height": {
114
- "100": {
115
- "type": "number",
116
- "value": 1.2999999523162842
117
- },
118
- "200": {
119
- "type": "number",
120
- "value": 1.5
121
- }
122
- },
123
113
  "weight": {
124
114
  "100": {
125
115
  "type": "number",
@@ -138,6 +128,16 @@
138
128
  "value": 700
139
129
  }
140
130
  },
131
+ "line-height": {
132
+ "100": {
133
+ "type": "number",
134
+ "value": 1.2999999523162842
135
+ },
136
+ "200": {
137
+ "type": "number",
138
+ "value": 1.5
139
+ }
140
+ },
141
141
  "size": {
142
142
  "100": {
143
143
  "type": "number",
@@ -229,7 +229,7 @@
229
229
  },
230
230
  "300": {
231
231
  "type": "number",
232
- "value": -1
232
+ "value": -2
233
233
  },
234
234
  "400": {
235
235
  "type": "number",
@@ -237,7 +237,7 @@
237
237
  },
238
238
  "500": {
239
239
  "type": "number",
240
- "value": 1
240
+ "value": 2
241
241
  },
242
242
  "600": {
243
243
  "type": "number",
@@ -263,7 +263,7 @@
263
263
  },
264
264
  "200": {
265
265
  "type": "number",
266
- "value": -2
266
+ "value": -4
267
267
  },
268
268
  "300": {
269
269
  "type": "number",
@@ -279,7 +279,7 @@
279
279
  },
280
280
  "600": {
281
281
  "type": "number",
282
- "value": 2
282
+ "value": 4
283
283
  },
284
284
  "700": {
285
285
  "type": "number",
@@ -293,11 +293,11 @@
293
293
  "blur": {
294
294
  "100": {
295
295
  "type": "number",
296
- "value": 4
296
+ "value": 6
297
297
  },
298
298
  "200": {
299
299
  "type": "number",
300
- "value": 9
300
+ "value": 10
301
301
  },
302
302
  "300": {
303
303
  "type": "number",
package/tokens/default/highcontrast/base.json CHANGED
@@ -80,7 +80,7 @@
80
80
  },
81
81
  "300": {
82
82
  "type": "color",
83
- "value": "{color.red.70}"
83
+ "value": "{color.gray.60}"
84
84
  },
85
85
  "400": {
86
86
  "type": "color",
@@ -493,7 +493,7 @@
493
493
  "color": {
494
494
  "50": {
495
495
  "type": "color",
496
- "value": "{color.gray.10}"
496
+ "value": "{color.gray.20}"
497
497
  },
498
498
  "100": {
499
499
  "type": "color",
package/tokens/default/highcontrast/semantic.dimension.highcontrast.json CHANGED
@@ -420,11 +420,6 @@
420
420
  "type": "number",
421
421
  "value": "{global.icon.size.400}"
422
422
  },
423
- "3xl": {
424
- "description": "Use for triple extra large icons.",
425
- "type": "number",
426
- "value": "{global.icon.size.500}"
427
- },
428
423
  "font": {
429
424
  "body": {
430
425
  "sm": {
@@ -515,6 +510,11 @@
515
510
  "type": "number",
516
511
  "value": "{global.font.size.4xl}"
517
512
  }
513
+ },
514
+ "3xl": {
515
+ "description": "Use for triple extra large icons.",
516
+ "type": "number",
517
+ "value": "{global.icon.size.500}"
518
518
  }
519
519
  }
520
520
  },
package/tokens/default/highcontrast/semantic.highcontrast.json CHANGED
@@ -2,31 +2,7 @@
2
2
  {
3
3
  "global": {
4
4
  "background": {
5
- "filter": {
6
- "glass": {
7
- "blur": {
8
- "primary": {
9
- "type": "number",
10
- "value": 0
11
- },
12
- "floating": {
13
- "type": "number",
14
- "value": 0
15
- }
16
- }
17
- }
18
- },
19
5
  "color": {
20
- "glass": {
21
- "primary": {
22
- "type": "color",
23
- "value": "{global.background.color.primary.default}"
24
- },
25
- "floating": {
26
- "type": "color",
27
- "value": "{global.background.color.floating.default}"
28
- }
29
- },
30
6
  "primary": {
31
7
  "default": {
32
8
  "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.",
@@ -68,6 +44,16 @@
68
44
  "value": "{global.background.color.600}"
69
45
  }
70
46
  },
47
+ "glass": {
48
+ "primary": {
49
+ "type": "color",
50
+ "value": "{global.background.color.primary.default}"
51
+ },
52
+ "floating": {
53
+ "type": "color",
54
+ "value": "{global.background.color.floating.default}"
55
+ }
56
+ },
71
57
  "floating": {
72
58
  "default": {
73
59
  "description": "Use as the background color for components that appear over other content, such as toast alerts, menus, modals, overlay drawers, etc.",
@@ -85,6 +71,13 @@
85
71
  "value": "{global.background.color.200}"
86
72
  }
87
73
  },
74
+ "sticky": {
75
+ "default": {
76
+ "description": "Use as the background color for components that appear over other content, such as toast alerts, menus, modals, overlay drawers, etc.",
77
+ "type": "color",
78
+ "value": "{global.background.color.100}"
79
+ }
80
+ },
88
81
  "action": {
89
82
  "plain": {
90
83
  "default": {
@@ -183,15 +176,17 @@
183
176
  }
184
177
  }
185
178
  },
186
- "opacity": {
179
+ "filter": {
187
180
  "glass": {
188
- "primary": {
189
- "type": "number",
190
- "value": 100
191
- },
192
- "floating": {
193
- "type": "number",
194
- "value": 100
181
+ "blur": {
182
+ "primary": {
183
+ "type": "number",
184
+ "value": 0
185
+ },
186
+ "floating": {
187
+ "type": "number",
188
+ "value": 0
189
+ }
195
190
  }
196
191
  }
197
192
  }
package/tokens/default/highcontrast-dark/base.dark.json CHANGED
@@ -69,15 +69,15 @@
69
69
  },
70
70
  "200": {
71
71
  "type": "color",
72
- "value": "{color.red.40}"
72
+ "value": "{color.red.60}"
73
73
  },
74
74
  "300": {
75
75
  "type": "color",
76
- "value": "{color.red.30}"
76
+ "value": "{color.red.40}"
77
77
  },
78
78
  "350": {
79
79
  "type": "color",
80
- "value": "{color.red.20}"
80
+ "value": "{color.gray.20}"
81
81
  },
82
82
  "400": {
83
83
  "type": "color",
@@ -378,7 +378,7 @@
378
378
  "color": {
379
379
  "50": {
380
380
  "type": "color",
381
- "value": "{color.gray.70}"
381
+ "value": "{color.gray.60}"
382
382
  },
383
383
  "100": {
384
384
  "type": "color",
@@ -456,7 +456,7 @@
456
456
  },
457
457
  "200": {
458
458
  "type": "color",
459
- "value": "rgba(0, 0, 0, 0.7000)"
459
+ "value": "rgba(0, 0, 0, 0.6000)"
460
460
  }
461
461
  }
462
462
  },
package/tokens/default/highcontrast-dark/semantic.highcontrast.dark.json CHANGED
@@ -2,31 +2,7 @@
2
2
  {
3
3
  "global": {
4
4
  "background": {
5
- "filter": {
6
- "glass": {
7
- "blur": {
8
- "primary": {
9
- "type": "number",
10
- "value": 0
11
- },
12
- "floating": {
13
- "type": "number",
14
- "value": 0
15
- }
16
- }
17
- }
18
- },
19
5
  "color": {
20
- "glass": {
21
- "primary": {
22
- "type": "color",
23
- "value": "{global.background.color.primary.default}"
24
- },
25
- "floating": {
26
- "type": "color",
27
- "value": "{global.background.color.floating.default}"
28
- }
29
- },
30
6
  "primary": {
31
7
  "default": {
32
8
  "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.",
@@ -68,6 +44,16 @@
68
44
  "value": "{global.dark.background.color.600}"
69
45
  }
70
46
  },
47
+ "glass": {
48
+ "primary": {
49
+ "type": "color",
50
+ "value": "{global.background.color.primary.default}"
51
+ },
52
+ "floating": {
53
+ "type": "color",
54
+ "value": "{global.background.color.floating.default}"
55
+ }
56
+ },
71
57
  "floating": {
72
58
  "default": {
73
59
  "description": "Use as the background color for components that appear over other content, such as toast alerts, menus, modals, overlay drawers, etc.",
@@ -85,6 +71,13 @@
85
71
  "value": "{global.dark.background.color.300}"
86
72
  }
87
73
  },
74
+ "sticky": {
75
+ "default": {
76
+ "description": "Use as the background color for components that appear over other content, such as toast alerts, menus, modals, overlay drawers, etc.",
77
+ "type": "color",
78
+ "value": "{global.dark.background.color.200}"
79
+ }
80
+ },
88
81
  "action": {
89
82
  "plain": {
90
83
  "default": {
@@ -183,15 +176,17 @@
183
176
  }
184
177
  }
185
178
  },
186
- "opacity": {
179
+ "filter": {
187
180
  "glass": {
188
- "primary": {
189
- "type": "number",
190
- "value": 100
191
- },
192
- "floating": {
193
- "type": "number",
194
- "value": 100
181
+ "blur": {
182
+ "primary": {
183
+ "type": "number",
184
+ "value": 0
185
+ },
186
+ "floating": {
187
+ "type": "number",
188
+ "value": 0
189
+ }
195
190
  }
196
191
  }
197
192
  }
package/tokens/default/light/base.dimension.json CHANGED
@@ -110,16 +110,6 @@
110
110
  }
111
111
  },
112
112
  "font": {
113
- "line-height": {
114
- "100": {
115
- "type": "number",
116
- "value": 1.2999999523162842
117
- },
118
- "200": {
119
- "type": "number",
120
- "value": 1.5
121
- }
122
- },
123
113
  "weight": {
124
114
  "100": {
125
115
  "type": "number",
@@ -138,6 +128,16 @@
138
128
  "value": 700
139
129
  }
140
130
  },
131
+ "line-height": {
132
+ "100": {
133
+ "type": "number",
134
+ "value": 1.2999999523162842
135
+ },
136
+ "200": {
137
+ "type": "number",
138
+ "value": 1.5
139
+ }
140
+ },
141
141
  "size": {
142
142
  "100": {
143
143
  "type": "number",
@@ -229,7 +229,7 @@
229
229
  },
230
230
  "300": {
231
231
  "type": "number",
232
- "value": -1
232
+ "value": -2
233
233
  },
234
234
  "400": {
235
235
  "type": "number",
@@ -237,7 +237,7 @@
237
237
  },
238
238
  "500": {
239
239
  "type": "number",
240
- "value": 1
240
+ "value": 2
241
241
  },
242
242
  "600": {
243
243
  "type": "number",
@@ -263,7 +263,7 @@
263
263
  },
264
264
  "200": {
265
265
  "type": "number",
266
- "value": -2
266
+ "value": -4
267
267
  },
268
268
  "300": {
269
269
  "type": "number",
@@ -279,7 +279,7 @@
279
279
  },
280
280
  "600": {
281
281
  "type": "number",
282
- "value": 2
282
+ "value": 4
283
283
  },
284
284
  "700": {
285
285
  "type": "number",
@@ -293,11 +293,11 @@
293
293
  "blur": {
294
294
  "100": {
295
295
  "type": "number",
296
- "value": 4
296
+ "value": 6
297
297
  },
298
298
  "200": {
299
299
  "type": "number",
300
- "value": 9
300
+ "value": 10
301
301
  },
302
302
  "300": {
303
303
  "type": "number",
package/tokens/default/light/base.json CHANGED
@@ -80,7 +80,7 @@
80
80
  },
81
81
  "300": {
82
82
  "type": "color",
83
- "value": "{color.red.70}"
83
+ "value": "{color.gray.60}"
84
84
  },
85
85
  "400": {
86
86
  "type": "color",
@@ -493,7 +493,7 @@
493
493
  "color": {
494
494
  "50": {
495
495
  "type": "color",
496
- "value": "{color.gray.10}"
496
+ "value": "{color.gray.20}"
497
497
  },
498
498
  "100": {
499
499
  "type": "color",