@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.
- package/build/css/tokens-charts-dark.scss +2 -2
- package/build/css/tokens-charts.scss +2 -2
- package/build/css/tokens-dark.scss +21 -5
- package/build/css/tokens-default.scss +90 -30
- package/build/css/tokens-highcontrast-dark.scss +392 -0
- package/build/css/tokens-highcontrast.scss +427 -0
- package/build/css/tokens-palette.scss +8 -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 +4308 -966
- package/patternfly-docs/content/token-layers-default.json +4382 -1485
- 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 +36 -0
- package/tokens/dark/charts.dark.json +8 -8
- package/tokens/dark/palette.color.json +24 -0
- package/tokens/dark/semantic.dark.json +51 -9
- package/tokens/default/base.dimension.json +38 -6
- package/tokens/default/base.json +171 -3
- package/tokens/default/charts.json +8 -8
- package/tokens/default/palette.color.json +24 -0
- package/tokens/default/semantic.dimension.json +69 -48
- package/tokens/default/semantic.json +51 -9
- package/tokens/default/semantic.motion.json +28 -28
- package/tokens/highcontrast/base.json +559 -0
- package/tokens/highcontrast/palette.color.json +319 -0
- package/tokens/highcontrast/semantic.highcontrast.json +1758 -0
- package/tokens/highcontrast-dark/base.dark.json +421 -0
- package/tokens/highcontrast-dark/palette.color.json +319 -0
- package/tokens/highcontrast-dark/semantic.highcontrast.dark.json +1758 -0
package/tokens/default/base.json
CHANGED
|
@@ -19,6 +19,10 @@
|
|
|
19
19
|
"type": "color",
|
|
20
20
|
"value": "{color.gray.80}"
|
|
21
21
|
},
|
|
22
|
+
"450": {
|
|
23
|
+
"type": "color",
|
|
24
|
+
"value": "{color.gray.70}"
|
|
25
|
+
},
|
|
22
26
|
"500": {
|
|
23
27
|
"type": "color",
|
|
24
28
|
"value": "rgba(21, 21, 21, 0.2000)"
|
|
@@ -52,6 +56,14 @@
|
|
|
52
56
|
"300": {
|
|
53
57
|
"type": "color",
|
|
54
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}"
|
|
55
67
|
}
|
|
56
68
|
},
|
|
57
69
|
"disabled": {
|
|
@@ -76,6 +88,14 @@
|
|
|
76
88
|
"200": {
|
|
77
89
|
"type": "color",
|
|
78
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}"
|
|
79
99
|
}
|
|
80
100
|
},
|
|
81
101
|
"status": {
|
|
@@ -84,9 +104,17 @@
|
|
|
84
104
|
"type": "color",
|
|
85
105
|
"value": "{color.green.60}"
|
|
86
106
|
},
|
|
107
|
+
"150": {
|
|
108
|
+
"type": "color",
|
|
109
|
+
"value": "#3d7019"
|
|
110
|
+
},
|
|
87
111
|
"200": {
|
|
88
112
|
"type": "color",
|
|
89
113
|
"value": "{color.green.70}"
|
|
114
|
+
},
|
|
115
|
+
"300": {
|
|
116
|
+
"type": "color",
|
|
117
|
+
"value": "#153300"
|
|
90
118
|
}
|
|
91
119
|
},
|
|
92
120
|
"warning": {
|
|
@@ -101,6 +129,18 @@
|
|
|
101
129
|
"300": {
|
|
102
130
|
"type": "color",
|
|
103
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}"
|
|
104
144
|
}
|
|
105
145
|
},
|
|
106
146
|
"danger": {
|
|
@@ -114,7 +154,7 @@
|
|
|
114
154
|
},
|
|
115
155
|
"300": {
|
|
116
156
|
"type": "color",
|
|
117
|
-
"value": "
|
|
157
|
+
"value": "#501600"
|
|
118
158
|
}
|
|
119
159
|
},
|
|
120
160
|
"info": {
|
|
@@ -125,6 +165,10 @@
|
|
|
125
165
|
"200": {
|
|
126
166
|
"type": "color",
|
|
127
167
|
"value": "{color.purple.60}"
|
|
168
|
+
},
|
|
169
|
+
"300": {
|
|
170
|
+
"type": "color",
|
|
171
|
+
"value": "{color.purple.70}"
|
|
128
172
|
}
|
|
129
173
|
},
|
|
130
174
|
"custom": {
|
|
@@ -135,6 +179,10 @@
|
|
|
135
179
|
"200": {
|
|
136
180
|
"type": "color",
|
|
137
181
|
"value": "{color.teal.70}"
|
|
182
|
+
},
|
|
183
|
+
"300": {
|
|
184
|
+
"type": "color",
|
|
185
|
+
"value": "{color.teal.80}"
|
|
138
186
|
}
|
|
139
187
|
}
|
|
140
188
|
},
|
|
@@ -143,30 +191,50 @@
|
|
|
143
191
|
"100": {
|
|
144
192
|
"type": "color",
|
|
145
193
|
"value": "{color.gray.30}"
|
|
194
|
+
},
|
|
195
|
+
"200": {
|
|
196
|
+
"type": "color",
|
|
197
|
+
"value": "{color.gray.60}"
|
|
146
198
|
}
|
|
147
199
|
},
|
|
148
200
|
"none": {
|
|
149
201
|
"100": {
|
|
150
202
|
"type": "color",
|
|
151
203
|
"value": "{color.blue.40}"
|
|
204
|
+
},
|
|
205
|
+
"200": {
|
|
206
|
+
"type": "color",
|
|
207
|
+
"value": "{color.blue.60}"
|
|
152
208
|
}
|
|
153
209
|
},
|
|
154
210
|
"minor": {
|
|
155
211
|
"100": {
|
|
156
212
|
"type": "color",
|
|
157
213
|
"value": "{color.gray.50}"
|
|
214
|
+
},
|
|
215
|
+
"200": {
|
|
216
|
+
"type": "color",
|
|
217
|
+
"value": "{color.gray.80}"
|
|
158
218
|
}
|
|
159
219
|
},
|
|
160
220
|
"moderate": {
|
|
161
221
|
"100": {
|
|
162
222
|
"type": "color",
|
|
163
223
|
"value": "{color.yellow.40}"
|
|
224
|
+
},
|
|
225
|
+
"200": {
|
|
226
|
+
"type": "color",
|
|
227
|
+
"value": "{color.yellow.70}"
|
|
164
228
|
}
|
|
165
229
|
},
|
|
166
230
|
"important": {
|
|
167
231
|
"100": {
|
|
168
232
|
"type": "color",
|
|
169
233
|
"value": "{color.orange.50}"
|
|
234
|
+
},
|
|
235
|
+
"200": {
|
|
236
|
+
"type": "color",
|
|
237
|
+
"value": "{color.orange.60}"
|
|
170
238
|
}
|
|
171
239
|
},
|
|
172
240
|
"critical": {
|
|
@@ -189,6 +257,14 @@
|
|
|
189
257
|
"300": {
|
|
190
258
|
"type": "color",
|
|
191
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}"
|
|
192
268
|
}
|
|
193
269
|
},
|
|
194
270
|
"orangered": {
|
|
@@ -203,6 +279,14 @@
|
|
|
203
279
|
"300": {
|
|
204
280
|
"type": "color",
|
|
205
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}"
|
|
206
290
|
}
|
|
207
291
|
},
|
|
208
292
|
"orange": {
|
|
@@ -217,6 +301,14 @@
|
|
|
217
301
|
"300": {
|
|
218
302
|
"type": "color",
|
|
219
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}"
|
|
220
312
|
}
|
|
221
313
|
},
|
|
222
314
|
"yellow": {
|
|
@@ -231,6 +323,14 @@
|
|
|
231
323
|
"300": {
|
|
232
324
|
"type": "color",
|
|
233
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}"
|
|
234
334
|
}
|
|
235
335
|
},
|
|
236
336
|
"green": {
|
|
@@ -245,6 +345,14 @@
|
|
|
245
345
|
"300": {
|
|
246
346
|
"type": "color",
|
|
247
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}"
|
|
248
356
|
}
|
|
249
357
|
},
|
|
250
358
|
"teal": {
|
|
@@ -259,6 +367,14 @@
|
|
|
259
367
|
"300": {
|
|
260
368
|
"type": "color",
|
|
261
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}"
|
|
262
378
|
}
|
|
263
379
|
},
|
|
264
380
|
"blue": {
|
|
@@ -273,6 +389,14 @@
|
|
|
273
389
|
"300": {
|
|
274
390
|
"type": "color",
|
|
275
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}"
|
|
276
400
|
}
|
|
277
401
|
},
|
|
278
402
|
"purple": {
|
|
@@ -287,9 +411,21 @@
|
|
|
287
411
|
"300": {
|
|
288
412
|
"type": "color",
|
|
289
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}"
|
|
290
422
|
}
|
|
291
423
|
},
|
|
292
424
|
"gray": {
|
|
425
|
+
"50": {
|
|
426
|
+
"type": "color",
|
|
427
|
+
"value": "{color.gray.10}"
|
|
428
|
+
},
|
|
293
429
|
"100": {
|
|
294
430
|
"type": "color",
|
|
295
431
|
"value": "{color.gray.20}"
|
|
@@ -301,6 +437,14 @@
|
|
|
301
437
|
"300": {
|
|
302
438
|
"type": "color",
|
|
303
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}"
|
|
304
448
|
}
|
|
305
449
|
}
|
|
306
450
|
}
|
|
@@ -322,6 +466,10 @@
|
|
|
322
466
|
"300": {
|
|
323
467
|
"type": "color",
|
|
324
468
|
"value": "{color.gray.50}"
|
|
469
|
+
},
|
|
470
|
+
"450": {
|
|
471
|
+
"type": "color",
|
|
472
|
+
"value": "{color.gray.60}"
|
|
325
473
|
}
|
|
326
474
|
}
|
|
327
475
|
},
|
|
@@ -335,6 +483,10 @@
|
|
|
335
483
|
"type": "color",
|
|
336
484
|
"value": "{color.gray.60}"
|
|
337
485
|
},
|
|
486
|
+
"250": {
|
|
487
|
+
"type": "color",
|
|
488
|
+
"value": "{color.gray.70}"
|
|
489
|
+
},
|
|
338
490
|
"300": {
|
|
339
491
|
"type": "color",
|
|
340
492
|
"value": "{color.white}"
|
|
@@ -343,6 +495,10 @@
|
|
|
343
495
|
"type": "color",
|
|
344
496
|
"value": "{color.red-orange.40}"
|
|
345
497
|
},
|
|
498
|
+
"500": {
|
|
499
|
+
"type": "color",
|
|
500
|
+
"value": "{color.red-orange.70}"
|
|
501
|
+
},
|
|
346
502
|
"link": {
|
|
347
503
|
"100": {
|
|
348
504
|
"type": "color",
|
|
@@ -352,9 +508,17 @@
|
|
|
352
508
|
"type": "color",
|
|
353
509
|
"value": "{color.blue.60}"
|
|
354
510
|
},
|
|
511
|
+
"250": {
|
|
512
|
+
"type": "color",
|
|
513
|
+
"value": "{color.blue.70}"
|
|
514
|
+
},
|
|
355
515
|
"300": {
|
|
356
516
|
"type": "color",
|
|
357
517
|
"value": "{color.purple.50}"
|
|
518
|
+
},
|
|
519
|
+
"350": {
|
|
520
|
+
"type": "color",
|
|
521
|
+
"value": "{color.purple.60}"
|
|
358
522
|
}
|
|
359
523
|
}
|
|
360
524
|
}
|
|
@@ -365,6 +529,10 @@
|
|
|
365
529
|
"type": "color",
|
|
366
530
|
"value": "{color.gray.90}"
|
|
367
531
|
},
|
|
532
|
+
"150": {
|
|
533
|
+
"type": "color",
|
|
534
|
+
"value": "{color.gray.60}"
|
|
535
|
+
},
|
|
368
536
|
"200": {
|
|
369
537
|
"type": "color",
|
|
370
538
|
"value": "{color.gray.50}"
|
|
@@ -379,11 +547,11 @@
|
|
|
379
547
|
"color": {
|
|
380
548
|
"100": {
|
|
381
549
|
"type": "color",
|
|
382
|
-
"value": "rgba(
|
|
550
|
+
"value": "rgba(41, 41, 41, 0.1500)"
|
|
383
551
|
},
|
|
384
552
|
"200": {
|
|
385
553
|
"type": "color",
|
|
386
|
-
"value": "rgba(
|
|
554
|
+
"value": "rgba(41, 41, 41, 0.2000)"
|
|
387
555
|
}
|
|
388
556
|
}
|
|
389
557
|
}
|
|
@@ -270,6 +270,10 @@
|
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
},
|
|
273
|
+
"letter-spacing": {
|
|
274
|
+
"type": "string",
|
|
275
|
+
"value": "normal"
|
|
276
|
+
},
|
|
273
277
|
"FontSize": {
|
|
274
278
|
"xs": {
|
|
275
279
|
"type": "number",
|
|
@@ -288,14 +292,6 @@
|
|
|
288
292
|
"value": 22
|
|
289
293
|
}
|
|
290
294
|
},
|
|
291
|
-
"letter-spacing": {
|
|
292
|
-
"type": "string",
|
|
293
|
-
"value": "normal"
|
|
294
|
-
},
|
|
295
|
-
"stroke-line-cap": {
|
|
296
|
-
"type": "string",
|
|
297
|
-
"value": "round"
|
|
298
|
-
},
|
|
299
295
|
"label": {
|
|
300
296
|
"padding": {
|
|
301
297
|
"type": "number",
|
|
@@ -322,6 +318,10 @@
|
|
|
322
318
|
"value": "{color.gray.90}"
|
|
323
319
|
}
|
|
324
320
|
},
|
|
321
|
+
"stroke-line-cap": {
|
|
322
|
+
"type": "string",
|
|
323
|
+
"value": "round"
|
|
324
|
+
},
|
|
325
325
|
"layout": {
|
|
326
326
|
"padding": {
|
|
327
327
|
"type": "number",
|
|
@@ -79,6 +79,10 @@
|
|
|
79
79
|
"70": {
|
|
80
80
|
"type": "color",
|
|
81
81
|
"value": "#003366"
|
|
82
|
+
},
|
|
83
|
+
"80": {
|
|
84
|
+
"type": "color",
|
|
85
|
+
"value": "#002250"
|
|
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": {
|
|
@@ -199,6 +211,10 @@
|
|
|
199
211
|
"70": {
|
|
200
212
|
"type": "color",
|
|
201
213
|
"value": "#732e00"
|
|
214
|
+
},
|
|
215
|
+
"80": {
|
|
216
|
+
"type": "color",
|
|
217
|
+
"value": "#4d1f00"
|
|
202
218
|
}
|
|
203
219
|
},
|
|
204
220
|
"red-orange": {
|
|
@@ -259,6 +275,10 @@
|
|
|
259
275
|
"70": {
|
|
260
276
|
"type": "color",
|
|
261
277
|
"value": "#21134d"
|
|
278
|
+
},
|
|
279
|
+
"80": {
|
|
280
|
+
"type": "color",
|
|
281
|
+
"value": "#1b0d33"
|
|
262
282
|
}
|
|
263
283
|
},
|
|
264
284
|
"red": {
|
|
@@ -289,6 +309,10 @@
|
|
|
289
309
|
"70": {
|
|
290
310
|
"type": "color",
|
|
291
311
|
"value": "#5f0000"
|
|
312
|
+
},
|
|
313
|
+
"80": {
|
|
314
|
+
"type": "color",
|
|
315
|
+
"value": "#3f0000"
|
|
292
316
|
}
|
|
293
317
|
}
|
|
294
318
|
}
|
|
@@ -35,6 +35,11 @@
|
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
"width": {
|
|
38
|
+
"regular": {
|
|
39
|
+
"description": "Use as the default border width for elements.",
|
|
40
|
+
"type": "number",
|
|
41
|
+
"value": "{global.border.width.100}"
|
|
42
|
+
},
|
|
38
43
|
"divider": {
|
|
39
44
|
"default": {
|
|
40
45
|
"description": "Use as the default border width for dividers.",
|
|
@@ -52,11 +57,6 @@
|
|
|
52
57
|
"value": "{global.border.width.100}"
|
|
53
58
|
}
|
|
54
59
|
},
|
|
55
|
-
"regular": {
|
|
56
|
-
"description": "Use as the default border width for elements.",
|
|
57
|
-
"type": "number",
|
|
58
|
-
"value": "{global.border.width.100}"
|
|
59
|
-
},
|
|
60
60
|
"strong": {
|
|
61
61
|
"description": "Use as a stronger/wider border width for elements.",
|
|
62
62
|
"type": "number",
|
|
@@ -359,24 +359,12 @@
|
|
|
359
359
|
"type": "number",
|
|
360
360
|
"value": "{global.icon.size.400}"
|
|
361
361
|
},
|
|
362
|
+
"3xl": {
|
|
363
|
+
"description": "Use for triple extra large icons.",
|
|
364
|
+
"type": "number",
|
|
365
|
+
"value": "{global.icon.size.500}"
|
|
366
|
+
},
|
|
362
367
|
"font": {
|
|
363
|
-
"body": {
|
|
364
|
-
"sm": {
|
|
365
|
-
"description": "Use for icons that are placed inline with small body text",
|
|
366
|
-
"type": "number",
|
|
367
|
-
"value": "{global.font.size.body.sm}"
|
|
368
|
-
},
|
|
369
|
-
"default": {
|
|
370
|
-
"description": "Use for icons that are placed inline with default body text",
|
|
371
|
-
"type": "number",
|
|
372
|
-
"value": "{global.font.size.body.default}"
|
|
373
|
-
},
|
|
374
|
-
"lg": {
|
|
375
|
-
"description": "Use for icons that are placed inline with large body text",
|
|
376
|
-
"type": "number",
|
|
377
|
-
"value": "{global.font.size.body.lg}"
|
|
378
|
-
}
|
|
379
|
-
},
|
|
380
368
|
"heading": {
|
|
381
369
|
"h1": {
|
|
382
370
|
"description": "Use for icons that are placed inline with first level headings",
|
|
@@ -409,6 +397,23 @@
|
|
|
409
397
|
"value": "{global.font.size.heading.h6}"
|
|
410
398
|
}
|
|
411
399
|
},
|
|
400
|
+
"body": {
|
|
401
|
+
"sm": {
|
|
402
|
+
"description": "Use for icons that are placed inline with small body text",
|
|
403
|
+
"type": "number",
|
|
404
|
+
"value": "{global.font.size.body.sm}"
|
|
405
|
+
},
|
|
406
|
+
"default": {
|
|
407
|
+
"description": "Use for icons that are placed inline with default body text",
|
|
408
|
+
"type": "number",
|
|
409
|
+
"value": "{global.font.size.body.default}"
|
|
410
|
+
},
|
|
411
|
+
"lg": {
|
|
412
|
+
"description": "Use for icons that are placed inline with large body text",
|
|
413
|
+
"type": "number",
|
|
414
|
+
"value": "{global.font.size.body.lg}"
|
|
415
|
+
}
|
|
416
|
+
},
|
|
412
417
|
"xs": {
|
|
413
418
|
"description": "Use for icons that are placed inline with font–size–xs text",
|
|
414
419
|
"type": "number",
|
|
@@ -449,11 +454,6 @@
|
|
|
449
454
|
"type": "number",
|
|
450
455
|
"value": "{global.font.size.4xl}"
|
|
451
456
|
}
|
|
452
|
-
},
|
|
453
|
-
"3xl": {
|
|
454
|
-
"description": "Use for triple extra large icons.",
|
|
455
|
-
"type": "number",
|
|
456
|
-
"value": "{global.icon.size.500}"
|
|
457
457
|
}
|
|
458
458
|
}
|
|
459
459
|
},
|
|
@@ -657,12 +657,12 @@
|
|
|
657
657
|
"left": {
|
|
658
658
|
"description": "Use to define the X value for a small box-shadow that appears on the left of a raised element, like in sticky columns.",
|
|
659
659
|
"type": "number",
|
|
660
|
-
"value": "{global.box-shadow.X.
|
|
660
|
+
"value": "{global.box-shadow.X.200}"
|
|
661
661
|
},
|
|
662
662
|
"right": {
|
|
663
663
|
"description": "Use to define the X value for a small box-shadow that appears on the right of a raised element, like in sticky columns.",
|
|
664
664
|
"type": "number",
|
|
665
|
-
"value": "{global.box-shadow.X.
|
|
665
|
+
"value": "{global.box-shadow.X.600}"
|
|
666
666
|
}
|
|
667
667
|
},
|
|
668
668
|
"md": {
|
|
@@ -684,12 +684,12 @@
|
|
|
684
684
|
"left": {
|
|
685
685
|
"description": "Use to define the X value for a medium box-shadow that appears on the left of a raised element, like in overlay drawers that show on the right of the screen.",
|
|
686
686
|
"type": "number",
|
|
687
|
-
"value": "{global.box-shadow.X.
|
|
687
|
+
"value": "{global.box-shadow.X.100}"
|
|
688
688
|
},
|
|
689
689
|
"right": {
|
|
690
690
|
"description": "Use to define the X value for a medium box-shadow that appears on the right of a raised element, like in overlay drawers that show on the left of the screen.",
|
|
691
691
|
"type": "number",
|
|
692
|
-
"value": "{global.box-shadow.X.
|
|
692
|
+
"value": "{global.box-shadow.X.700}"
|
|
693
693
|
}
|
|
694
694
|
},
|
|
695
695
|
"lg": {
|
|
@@ -711,12 +711,12 @@
|
|
|
711
711
|
"left": {
|
|
712
712
|
"description": "Use to define the X value for a large box-shadow that appears on the left of a raised element.",
|
|
713
713
|
"type": "number",
|
|
714
|
-
"value": "{global.box-shadow.X.
|
|
714
|
+
"value": "{global.box-shadow.X.50}"
|
|
715
715
|
},
|
|
716
716
|
"right": {
|
|
717
717
|
"description": "Use to define the X value for a large box-shadow that appears on the right of a raised element.",
|
|
718
718
|
"type": "number",
|
|
719
|
-
"value": "{global.box-shadow.X.
|
|
719
|
+
"value": "{global.box-shadow.X.800}"
|
|
720
720
|
}
|
|
721
721
|
}
|
|
722
722
|
},
|
|
@@ -730,12 +730,12 @@
|
|
|
730
730
|
"top": {
|
|
731
731
|
"description": "Use to define the Y value for a small box-shadow that appears on the top of a raised element, like in sticky footers",
|
|
732
732
|
"type": "number",
|
|
733
|
-
"value": "{global.box-shadow.Y.
|
|
733
|
+
"value": "{global.box-shadow.Y.200}"
|
|
734
734
|
},
|
|
735
735
|
"bottom": {
|
|
736
736
|
"description": "Use to define the Y value for a small box-shadow that appears on the bottom of a raised element, like in sticky headers.",
|
|
737
737
|
"type": "number",
|
|
738
|
-
"value": "{global.box-shadow.Y.
|
|
738
|
+
"value": "{global.box-shadow.Y.600}"
|
|
739
739
|
},
|
|
740
740
|
"left": {
|
|
741
741
|
"description": "Use to define the Y value for a small box-shadow that appears on the left of a raised element, like in sticky columns.",
|
|
@@ -757,12 +757,12 @@
|
|
|
757
757
|
"top": {
|
|
758
758
|
"description": "Use to define the Y value for a medium box-shadow that appears on the top of a raised element, like in overlay bottom drawers",
|
|
759
759
|
"type": "number",
|
|
760
|
-
"value": "{global.box-shadow.Y.
|
|
760
|
+
"value": "{global.box-shadow.Y.100}"
|
|
761
761
|
},
|
|
762
762
|
"bottom": {
|
|
763
763
|
"description": "Use to define the Y value for a medium box-shadow that appears on the bottom of a raised element.",
|
|
764
764
|
"type": "number",
|
|
765
|
-
"value": "{global.box-shadow.Y.
|
|
765
|
+
"value": "{global.box-shadow.Y.700}"
|
|
766
766
|
},
|
|
767
767
|
"left": {
|
|
768
768
|
"description": "Use to define the Y value for a medium box-shadow that appears on the left of a raised element, like in overlay drawers that show on the right of the screen.",
|
|
@@ -784,12 +784,12 @@
|
|
|
784
784
|
"top": {
|
|
785
785
|
"description": "Use to define the Y value for a large box-shadow that appears on the top of a raised element.",
|
|
786
786
|
"type": "number",
|
|
787
|
-
"value": "{global.box-shadow.Y.
|
|
787
|
+
"value": "{global.box-shadow.Y.50}"
|
|
788
788
|
},
|
|
789
789
|
"bottom": {
|
|
790
790
|
"description": "Use to define the Y value for a large box-shadow that appears on the bottom of a raised element.",
|
|
791
791
|
"type": "number",
|
|
792
|
-
"value": "{global.box-shadow.Y.
|
|
792
|
+
"value": "{global.box-shadow.Y.800}"
|
|
793
793
|
},
|
|
794
794
|
"left": {
|
|
795
795
|
"description": "Use to define the Y value for a large box-shadow that appears on the left of a raised element.",
|
|
@@ -822,19 +822,40 @@
|
|
|
822
822
|
},
|
|
823
823
|
"spread": {
|
|
824
824
|
"sm": {
|
|
825
|
-
"
|
|
826
|
-
|
|
827
|
-
|
|
825
|
+
"default": {
|
|
826
|
+
"description": "Use to define the spread for a small box-shadow",
|
|
827
|
+
"type": "number",
|
|
828
|
+
"value": "{global.box-shadow.spread.100}"
|
|
829
|
+
},
|
|
830
|
+
"directional": {
|
|
831
|
+
"description": "Use to define the spread for a small box-shadow",
|
|
832
|
+
"type": "number",
|
|
833
|
+
"value": "{global.box-shadow.spread.200}"
|
|
834
|
+
}
|
|
828
835
|
},
|
|
829
836
|
"md": {
|
|
830
|
-
"
|
|
831
|
-
|
|
832
|
-
|
|
837
|
+
"default": {
|
|
838
|
+
"description": "Use to define the spread of a medium box-shadow",
|
|
839
|
+
"type": "number",
|
|
840
|
+
"value": "{global.box-shadow.spread.100}"
|
|
841
|
+
},
|
|
842
|
+
"directional": {
|
|
843
|
+
"description": "Use to define the spread of a medium box-shadow",
|
|
844
|
+
"type": "number",
|
|
845
|
+
"value": "{global.box-shadow.spread.300}"
|
|
846
|
+
}
|
|
833
847
|
},
|
|
834
848
|
"lg": {
|
|
835
|
-
"
|
|
836
|
-
|
|
837
|
-
|
|
849
|
+
"default": {
|
|
850
|
+
"description": "Use to define the spread of a large box-shadow",
|
|
851
|
+
"type": "number",
|
|
852
|
+
"value": "{global.box-shadow.spread.100}"
|
|
853
|
+
},
|
|
854
|
+
"directional": {
|
|
855
|
+
"description": "Use to define the spread of a large box-shadow",
|
|
856
|
+
"type": "number",
|
|
857
|
+
"value": "{global.box-shadow.spread.400}"
|
|
858
|
+
}
|
|
838
859
|
}
|
|
839
860
|
}
|
|
840
861
|
},
|