@patternfly/design-tokens 1.13.2 → 1.14.1
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-charts-dark.scss +2 -2
- package/build/css/tokens-charts.scss +2 -2
- package/build/css/tokens-dark.scss +12 -2
- package/build/css/tokens-default.scss +54 -4
- package/build/css/tokens-highcontrast-dark.scss +394 -0
- package/build/css/tokens-highcontrast.scss +430 -0
- package/build/css/tokens-palette.scss +10 -2
- package/build.js +15 -1
- package/config.highcontrast.dark.json +23 -0
- package/config.highcontrast.json +24 -0
- package/config.palette-colors.json +1 -1
- package/package.json +1 -1
- package/patternfly-docs/content/token-layers-dark.json +4141 -1240
- package/patternfly-docs/content/token-layers-default.json +3052 -559
- package/patternfly-docs/content/tokensTable.css +16 -3
- package/patternfly-docs/content/tokensTable.js +7 -5
- package/plugins/export-patternfly-tokens/dist/code.js +87 -0
- package/plugins/export-patternfly-tokens/dist/ui.html +34212 -0
- package/plugins/export-patternfly-tokens/src/ui.tsx +12 -4
- package/tokens/dark/base.dark.json +74 -38
- package/tokens/dark/charts.dark.json +16 -16
- package/tokens/dark/palette.color.json +32 -0
- package/tokens/dark/semantic.dark.json +13 -0
- package/tokens/default/base.dimension.json +4 -0
- package/tokens/default/base.json +177 -1
- package/tokens/default/charts.json +16 -16
- package/tokens/default/palette.color.json +32 -0
- package/tokens/default/semantic.dimension.json +39 -17
- package/tokens/default/semantic.json +13 -0
- package/tokens/default/semantic.motion.json +28 -28
- package/tokens/highcontrast/base.json +571 -0
- package/tokens/highcontrast/palette.color.json +327 -0
- package/tokens/highcontrast/semantic.highcontrast.json +1767 -0
- package/tokens/highcontrast-dark/base.dark.json +429 -0
- package/tokens/highcontrast-dark/palette.color.json +327 -0
- package/tokens/highcontrast-dark/semantic.highcontrast.dark.json +1767 -0
|
@@ -28,13 +28,13 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
|
|
|
28
28
|
break;
|
|
29
29
|
case '/* Base Color Tokens - Light.Value.tokens.json */':
|
|
30
30
|
saveFileName = 'base.json';
|
|
31
|
-
saveFolderNames = ['default'];
|
|
31
|
+
saveFolderNames = ['default', 'highcontrast'];
|
|
32
32
|
break;
|
|
33
33
|
case '/* Color Palette.Mode 1.tokens.json */':
|
|
34
34
|
saveFileName = 'palette.color.json';
|
|
35
|
-
saveFolderNames = ['default', 'dark'];
|
|
35
|
+
saveFolderNames = ['default', 'dark', 'highcontrast', 'highcontrast-dark'];
|
|
36
36
|
break;
|
|
37
|
-
case '/* Semantic Dimension Tokens.Mode 1.tokens.json */':
|
|
37
|
+
case ('/* Semantic Dimension Tokens.Value.tokens.json */' || '/* Semantic Dimension Tokens.Mode 1.tokens.json */'):
|
|
38
38
|
saveFileName = 'semantic.dimension.json';
|
|
39
39
|
saveFolderNames = ['default'];
|
|
40
40
|
break;
|
|
@@ -44,7 +44,7 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
|
|
|
44
44
|
break;
|
|
45
45
|
case '/* Base Color Tokens - Dark.Mode 1.tokens.json */':
|
|
46
46
|
saveFileName = 'base.dark.json';
|
|
47
|
-
saveFolderNames = ['dark'];
|
|
47
|
+
saveFolderNames = ['dark', 'highcontrast-dark'];
|
|
48
48
|
break;
|
|
49
49
|
case '/* Semantic Color Tokens.Dark.tokens.json */':
|
|
50
50
|
saveFileName = 'semantic.dark.json';
|
|
@@ -66,6 +66,14 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
|
|
|
66
66
|
saveFileName = 'semantic.motion.json';
|
|
67
67
|
saveFolderNames = ['default'];
|
|
68
68
|
break;
|
|
69
|
+
case '/* Semantic Color Tokens.Light - High Contrast.tokens.json */':
|
|
70
|
+
saveFileName = 'semantic.highcontrast.json';
|
|
71
|
+
saveFolderNames = ['highcontrast'];
|
|
72
|
+
break;
|
|
73
|
+
case '/* Semantic Color Tokens.Dark - High Contrast.tokens.json */':
|
|
74
|
+
saveFileName = 'semantic.highcontrast.dark.json';
|
|
75
|
+
saveFolderNames = ['highcontrast-dark'];
|
|
76
|
+
break;
|
|
69
77
|
default:
|
|
70
78
|
saveFileName = splitFiles[i].split('\n', 1)[0];
|
|
71
79
|
saveFolderNames = ['default'];
|
|
@@ -71,6 +71,10 @@
|
|
|
71
71
|
"300": {
|
|
72
72
|
"type": "color",
|
|
73
73
|
"value": "{color.gray.70}"
|
|
74
|
+
},
|
|
75
|
+
"400": {
|
|
76
|
+
"type": "color",
|
|
77
|
+
"value": "{color.gray.90}"
|
|
74
78
|
}
|
|
75
79
|
},
|
|
76
80
|
"favorite": {
|
|
@@ -83,44 +87,6 @@
|
|
|
83
87
|
"value": "{color.yellow.20}"
|
|
84
88
|
}
|
|
85
89
|
},
|
|
86
|
-
"severity": {
|
|
87
|
-
"undefined": {
|
|
88
|
-
"100": {
|
|
89
|
-
"type": "color",
|
|
90
|
-
"value": "{color.gray.40}"
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
"none": {
|
|
94
|
-
"100": {
|
|
95
|
-
"type": "color",
|
|
96
|
-
"value": "{color.blue.30}"
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
"minor": {
|
|
100
|
-
"100": {
|
|
101
|
-
"type": "color",
|
|
102
|
-
"value": "{color.gray.30}"
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
"moderate": {
|
|
106
|
-
"100": {
|
|
107
|
-
"type": "color",
|
|
108
|
-
"value": "{color.yellow.30}"
|
|
109
|
-
}
|
|
110
|
-
},
|
|
111
|
-
"important": {
|
|
112
|
-
"100": {
|
|
113
|
-
"type": "color",
|
|
114
|
-
"value": "{color.orange.40}"
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
|
-
"critical": {
|
|
118
|
-
"100": {
|
|
119
|
-
"type": "color",
|
|
120
|
-
"value": "{color.red-orange.50}"
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
},
|
|
124
90
|
"status": {
|
|
125
91
|
"success": {
|
|
126
92
|
"100": {
|
|
@@ -130,6 +96,10 @@
|
|
|
130
96
|
"200": {
|
|
131
97
|
"type": "color",
|
|
132
98
|
"value": "{color.green.30}"
|
|
99
|
+
},
|
|
100
|
+
"300": {
|
|
101
|
+
"type": "color",
|
|
102
|
+
"value": "{color.green.20}"
|
|
133
103
|
}
|
|
134
104
|
},
|
|
135
105
|
"warning": {
|
|
@@ -168,6 +138,10 @@
|
|
|
168
138
|
"200": {
|
|
169
139
|
"type": "color",
|
|
170
140
|
"value": "{color.purple.20}"
|
|
141
|
+
},
|
|
142
|
+
"300": {
|
|
143
|
+
"type": "color",
|
|
144
|
+
"value": "{color.purple.10}"
|
|
171
145
|
}
|
|
172
146
|
},
|
|
173
147
|
"custom": {
|
|
@@ -178,6 +152,52 @@
|
|
|
178
152
|
"200": {
|
|
179
153
|
"type": "color",
|
|
180
154
|
"value": "{color.teal.30}"
|
|
155
|
+
},
|
|
156
|
+
"300": {
|
|
157
|
+
"type": "color",
|
|
158
|
+
"value": "{color.teal.20}"
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
"severity": {
|
|
163
|
+
"undefined": {
|
|
164
|
+
"100": {
|
|
165
|
+
"type": "color",
|
|
166
|
+
"value": "{color.gray.40}"
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
"none": {
|
|
170
|
+
"100": {
|
|
171
|
+
"type": "color",
|
|
172
|
+
"value": "{color.blue.30}"
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
"minor": {
|
|
176
|
+
"100": {
|
|
177
|
+
"type": "color",
|
|
178
|
+
"value": "{color.gray.30}"
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
"moderate": {
|
|
182
|
+
"100": {
|
|
183
|
+
"type": "color",
|
|
184
|
+
"value": "{color.yellow.30}"
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
"important": {
|
|
188
|
+
"100": {
|
|
189
|
+
"type": "color",
|
|
190
|
+
"value": "{color.orange.40}"
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
"critical": {
|
|
194
|
+
"100": {
|
|
195
|
+
"type": "color",
|
|
196
|
+
"value": "{color.red-orange.50}"
|
|
197
|
+
},
|
|
198
|
+
"200": {
|
|
199
|
+
"type": "color",
|
|
200
|
+
"value": "{color.red-orange.40}"
|
|
181
201
|
}
|
|
182
202
|
}
|
|
183
203
|
},
|
|
@@ -295,6 +315,10 @@
|
|
|
295
315
|
}
|
|
296
316
|
},
|
|
297
317
|
"gray": {
|
|
318
|
+
"50": {
|
|
319
|
+
"type": "color",
|
|
320
|
+
"value": "{color.gray.70}"
|
|
321
|
+
},
|
|
298
322
|
"100": {
|
|
299
323
|
"type": "color",
|
|
300
324
|
"value": "{color.gray.60}"
|
|
@@ -356,6 +380,10 @@
|
|
|
356
380
|
"300": {
|
|
357
381
|
"type": "color",
|
|
358
382
|
"value": "{color.purple.30}"
|
|
383
|
+
},
|
|
384
|
+
"400": {
|
|
385
|
+
"type": "color",
|
|
386
|
+
"value": "{color.purple.20}"
|
|
359
387
|
}
|
|
360
388
|
}
|
|
361
389
|
}
|
|
@@ -387,6 +415,14 @@
|
|
|
387
415
|
"value": "rgba(0, 0, 0, 0.7000)"
|
|
388
416
|
}
|
|
389
417
|
}
|
|
418
|
+
},
|
|
419
|
+
"focus-ring": {
|
|
420
|
+
"color": {
|
|
421
|
+
"100": {
|
|
422
|
+
"type": "color",
|
|
423
|
+
"value": "{color.blue.30}"
|
|
424
|
+
}
|
|
425
|
+
}
|
|
390
426
|
}
|
|
391
427
|
}
|
|
392
428
|
}
|
|
@@ -292,9 +292,19 @@
|
|
|
292
292
|
"type": "string",
|
|
293
293
|
"value": "normal"
|
|
294
294
|
},
|
|
295
|
-
"
|
|
296
|
-
"
|
|
297
|
-
|
|
295
|
+
"layout": {
|
|
296
|
+
"padding": {
|
|
297
|
+
"type": "number",
|
|
298
|
+
"value": 50
|
|
299
|
+
},
|
|
300
|
+
"height": {
|
|
301
|
+
"type": "number",
|
|
302
|
+
"value": 300
|
|
303
|
+
},
|
|
304
|
+
"width": {
|
|
305
|
+
"type": "number",
|
|
306
|
+
"value": 450
|
|
307
|
+
}
|
|
298
308
|
},
|
|
299
309
|
"label": {
|
|
300
310
|
"padding": {
|
|
@@ -322,19 +332,9 @@
|
|
|
322
332
|
"value": "{color.white}"
|
|
323
333
|
}
|
|
324
334
|
},
|
|
325
|
-
"
|
|
326
|
-
"
|
|
327
|
-
|
|
328
|
-
"value": 50
|
|
329
|
-
},
|
|
330
|
-
"height": {
|
|
331
|
-
"type": "number",
|
|
332
|
-
"value": 300
|
|
333
|
-
},
|
|
334
|
-
"width": {
|
|
335
|
-
"type": "number",
|
|
336
|
-
"value": 450
|
|
337
|
-
}
|
|
335
|
+
"stroke-line-cap": {
|
|
336
|
+
"type": "string",
|
|
337
|
+
"value": "round"
|
|
338
338
|
},
|
|
339
339
|
"stroke-line-join": {
|
|
340
340
|
"type": "string",
|
|
@@ -79,6 +79,10 @@
|
|
|
79
79
|
"70": {
|
|
80
80
|
"type": "color",
|
|
81
81
|
"value": "#003366"
|
|
82
|
+
},
|
|
83
|
+
"80": {
|
|
84
|
+
"type": "color",
|
|
85
|
+
"value": "#032142"
|
|
82
86
|
}
|
|
83
87
|
},
|
|
84
88
|
"teal": {
|
|
@@ -109,6 +113,10 @@
|
|
|
109
113
|
"70": {
|
|
110
114
|
"type": "color",
|
|
111
115
|
"value": "#004d4d"
|
|
116
|
+
},
|
|
117
|
+
"80": {
|
|
118
|
+
"type": "color",
|
|
119
|
+
"value": "#003333"
|
|
112
120
|
}
|
|
113
121
|
},
|
|
114
122
|
"yellow": {
|
|
@@ -139,6 +147,10 @@
|
|
|
139
147
|
"70": {
|
|
140
148
|
"type": "color",
|
|
141
149
|
"value": "#73480b"
|
|
150
|
+
},
|
|
151
|
+
"80": {
|
|
152
|
+
"type": "color",
|
|
153
|
+
"value": "#54330b"
|
|
142
154
|
}
|
|
143
155
|
},
|
|
144
156
|
"green": {
|
|
@@ -169,6 +181,10 @@
|
|
|
169
181
|
"70": {
|
|
170
182
|
"type": "color",
|
|
171
183
|
"value": "#204d00"
|
|
184
|
+
},
|
|
185
|
+
"80": {
|
|
186
|
+
"type": "color",
|
|
187
|
+
"value": "#183301"
|
|
172
188
|
}
|
|
173
189
|
},
|
|
174
190
|
"orange": {
|
|
@@ -199,6 +215,10 @@
|
|
|
199
215
|
"70": {
|
|
200
216
|
"type": "color",
|
|
201
217
|
"value": "#732e00"
|
|
218
|
+
},
|
|
219
|
+
"80": {
|
|
220
|
+
"type": "color",
|
|
221
|
+
"value": "#4d1f00"
|
|
202
222
|
}
|
|
203
223
|
},
|
|
204
224
|
"red-orange": {
|
|
@@ -229,6 +249,10 @@
|
|
|
229
249
|
"70": {
|
|
230
250
|
"type": "color",
|
|
231
251
|
"value": "#731f00"
|
|
252
|
+
},
|
|
253
|
+
"80": {
|
|
254
|
+
"type": "color",
|
|
255
|
+
"value": "#4c1405"
|
|
232
256
|
}
|
|
233
257
|
},
|
|
234
258
|
"purple": {
|
|
@@ -259,6 +283,10 @@
|
|
|
259
283
|
"70": {
|
|
260
284
|
"type": "color",
|
|
261
285
|
"value": "#21134d"
|
|
286
|
+
},
|
|
287
|
+
"80": {
|
|
288
|
+
"type": "color",
|
|
289
|
+
"value": "#1b0d33"
|
|
262
290
|
}
|
|
263
291
|
},
|
|
264
292
|
"red": {
|
|
@@ -289,6 +317,10 @@
|
|
|
289
317
|
"70": {
|
|
290
318
|
"type": "color",
|
|
291
319
|
"value": "#5f0000"
|
|
320
|
+
},
|
|
321
|
+
"80": {
|
|
322
|
+
"type": "color",
|
|
323
|
+
"value": "#3f0000"
|
|
292
324
|
}
|
|
293
325
|
}
|
|
294
326
|
}
|
|
@@ -967,6 +967,10 @@
|
|
|
967
967
|
"value": "{global.dark.border.color.50}"
|
|
968
968
|
}
|
|
969
969
|
},
|
|
970
|
+
"high-contrast": {
|
|
971
|
+
"type": "color",
|
|
972
|
+
"value": "rgba(255, 255, 255, 0.0000)"
|
|
973
|
+
},
|
|
970
974
|
"brand": {
|
|
971
975
|
"default": {
|
|
972
976
|
"description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
|
|
@@ -1749,6 +1753,15 @@
|
|
|
1749
1753
|
}
|
|
1750
1754
|
}
|
|
1751
1755
|
}
|
|
1756
|
+
},
|
|
1757
|
+
"focus-ring": {
|
|
1758
|
+
"color": {
|
|
1759
|
+
"default": {
|
|
1760
|
+
"description": "This token is used to define the color value for custom focus rings.",
|
|
1761
|
+
"type": "color",
|
|
1762
|
+
"value": "{global.dark.focus-ring.color.100}"
|
|
1763
|
+
}
|
|
1764
|
+
}
|
|
1752
1765
|
}
|
|
1753
1766
|
}
|
|
1754
1767
|
}
|