@patternfly/design-tokens 1.10.0 → 1.12.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 (15) hide show
  1. package/build/css/tokens-charts-dark.scss +153 -153
  2. package/build/css/tokens-charts.scss +153 -153
  3. package/build/css/tokens-dark.scss +300 -300
  4. package/build/css/tokens-default.scss +567 -548
  5. package/build/css/tokens-palette.scss +65 -65
  6. package/build.js +18 -9
  7. package/config.default.json +1 -0
  8. package/package.json +1 -1
  9. package/tokens/dark/base.dark.json +2 -2
  10. package/tokens/dark/semantic.dark.json +325 -64
  11. package/tokens/default/base.dimension.json +16 -54
  12. package/tokens/default/base.json +3 -3
  13. package/tokens/default/semantic.dimension.json +191 -83
  14. package/tokens/default/semantic.json +325 -64
  15. package/tokens/default/semantic.motion.json +26 -0
package/tokens/default/semantic.dimension.json CHANGED
@@ -4,105 +4,128 @@
4
4
  "border": {
5
5
  "radius": {
6
6
  "sharp": {
7
+ "description": "Use to adjust the curvature of the border corners for an element. Use for sharp corners.",
7
8
  "type": "number",
8
9
  "value": "{global.border.radius.0}"
9
10
  },
10
11
  "tiny": {
12
+ "description": "Use to adjust the curvature of the border corners for an element. Use for barely rounded corners.",
11
13
  "type": "number",
12
14
  "value": "{global.border.radius.100}"
13
15
  },
14
16
  "small": {
17
+ "description": "Use to adjust the curvature of the border corners for an element. Use for slightly rounded corners, like icon buttons or menus.",
15
18
  "type": "number",
16
19
  "value": "{global.border.radius.200}"
17
20
  },
18
21
  "medium": {
22
+ "description": "Use to adjust the curvature of the border corners for an element. Use for moderately rounded corners, like cards.",
19
23
  "type": "number",
20
24
  "value": "{global.border.radius.300}"
21
25
  },
22
26
  "large": {
27
+ "description": "Use to adjust the curvature of the border corners for an element. Use for mostly rounded corners, like modals.",
23
28
  "type": "number",
24
29
  "value": "{global.border.radius.400}"
25
30
  },
26
31
  "pill": {
32
+ "description": "Use to adjust the curvature of the border corners for an element. Use for corners that are as round as possible, like standard buttons and badges.",
27
33
  "type": "number",
28
34
  "value": "{global.border.radius.500}"
29
35
  }
30
36
  },
31
37
  "width": {
32
38
  "regular": {
39
+ "description": "Use as the default border width for elements.",
33
40
  "type": "number",
34
41
  "value": "{global.border.width.100}"
35
42
  },
36
43
  "divider": {
37
44
  "default": {
45
+ "description": "Use as the default border width for dividers.",
38
46
  "type": "number",
39
47
  "value": "{global.border.width.100}"
40
48
  },
41
49
  "hover": {
50
+ "description": "Use as the border width hover state for dividers.",
42
51
  "type": "number",
43
52
  "value": "{global.border.width.100}"
44
53
  },
45
54
  "clicked": {
55
+ "description": "Use as the border width clicked state for dividers.",
46
56
  "type": "number",
47
57
  "value": "{global.border.width.100}"
48
58
  }
49
59
  },
50
60
  "strong": {
61
+ "description": "Use as a stronger/wider border width for elements.",
51
62
  "type": "number",
52
63
  "value": "{global.border.width.200}"
53
64
  },
54
65
  "extra-strong": {
66
+ "description": "Use as the strongest/widest border width for elements.",
55
67
  "type": "number",
56
68
  "value": "{global.border.width.300}"
57
69
  },
58
70
  "box": {
59
71
  "default": {
72
+ "description": "Use as the default border width for containers like cards, panels, code editors, etc.",
60
73
  "type": "number",
61
74
  "value": "{global.border.width.100}"
62
75
  },
63
76
  "hover": {
77
+ "description": "Use as the hover border width for containers like cards, panels, code editors, etc.",
64
78
  "type": "number",
65
79
  "value": "{global.border.width.100}"
66
80
  },
67
81
  "clicked": {
82
+ "description": "Use as the clicked border width for containers like cards, panels, code editors, etc.",
68
83
  "type": "number",
69
84
  "value": "{global.border.width.200}"
70
85
  },
71
86
  "status": {
72
87
  "default": {
88
+ "description": "Use as the default border width for containers that convey statuses like inline alerts, notification drawer items and hints. This token is typically paired with status border colors.",
73
89
  "type": "number",
74
90
  "value": "{global.border.width.200}"
75
91
  },
76
92
  "read": {
93
+ "description": "Use as the border width for containers that convey a “read” status, like notification drawer items.",
77
94
  "type": "number",
78
95
  "value": "{global.border.width.100}"
79
96
  }
80
97
  }
81
98
  },
82
- "button": {
99
+ "action": {
83
100
  "default": {
101
+ "description": "Use as the default border width for actions like secondary and tertiary buttons",
84
102
  "type": "number",
85
103
  "value": "{global.border.width.100}"
86
104
  },
87
105
  "hover": {
106
+ "description": "Use as the hover state border width for actions like secondary and tertiary buttons",
88
107
  "type": "number",
89
108
  "value": "{global.border.width.200}"
90
109
  },
91
110
  "clicked": {
111
+ "description": "Use as the clicked state border width for actions like secondary and tertiary buttons",
92
112
  "type": "number",
93
113
  "value": "{global.border.width.200}"
94
114
  }
95
115
  },
96
116
  "control": {
97
117
  "default": {
118
+ "description": "Use as the default border width for controls like text inputs, menu toggles and control buttons",
98
119
  "type": "number",
99
120
  "value": "{global.border.width.100}"
100
121
  },
101
122
  "hover": {
123
+ "description": "Use as the hover state border width for controls like text inputs, menu toggles and control buttons",
102
124
  "type": "number",
103
125
  "value": "{global.border.width.100}"
104
126
  },
105
127
  "clicked": {
128
+ "description": "Use as the clicked state border width for controls like text inputs, menu toggles and control buttons",
106
129
  "type": "number",
107
130
  "value": "{global.border.width.200}"
108
131
  }
@@ -111,144 +134,176 @@
111
134
  },
112
135
  "spacer": {
113
136
  "xs": {
137
+ "description": "Use for extra small spaces between elements.",
114
138
  "type": "number",
115
139
  "value": "{global.spacer.100}"
116
140
  },
117
141
  "sm": {
142
+ "description": "Use for small spaces between elements.",
118
143
  "type": "number",
119
144
  "value": "{global.spacer.200}"
120
145
  },
121
146
  "md": {
147
+ "description": "Use for medium-sized spaces between elements.",
122
148
  "type": "number",
123
149
  "value": "{global.spacer.300}"
124
150
  },
125
151
  "lg": {
152
+ "description": "Use for large spaces between elements.",
126
153
  "type": "number",
127
154
  "value": "{global.spacer.400}"
128
155
  },
129
156
  "xl": {
157
+ "description": "Use for extra large spaces between elements.",
130
158
  "type": "number",
131
159
  "value": "{global.spacer.500}"
132
160
  },
133
161
  "2xl": {
162
+ "description": "Use for double extra large spaces spacing between elements.",
134
163
  "type": "number",
135
164
  "value": "{global.spacer.600}"
136
165
  },
137
166
  "3xl": {
167
+ "description": "Use for triple extra large spaces between elements.",
138
168
  "type": "number",
139
169
  "value": "{global.spacer.700}"
140
170
  },
141
171
  "4xl": {
172
+ "description": "Use for quadruple extra large spaces between elements.",
142
173
  "type": "number",
143
174
  "value": "{global.spacer.800}"
144
175
  },
145
176
  "control": {
146
177
  "vertical": {
147
178
  "default": {
179
+ "description": "Use to set the vertical padding inside of controls. This is used across buttons, text inputs, menu toggles, etc.",
148
180
  "type": "number",
149
181
  "value": "{global.spacer.sm}"
150
182
  },
151
183
  "compact": {
184
+ "description": "Use to set the vertical padding inside of compact controls. This is used across text inputs, menu toggles, control buttons etc.",
152
185
  "type": "number",
153
- "value": "{global.spacer.100}"
186
+ "value": "{global.spacer.xs}"
154
187
  },
155
188
  "plain": {
189
+ "description": "Use to set the vertical padding inside of plain controls, like in plain menu toggles.",
156
190
  "type": "number",
157
191
  "value": "{global.spacer.sm}"
158
192
  }
159
193
  },
160
194
  "horizontal": {
161
195
  "default": {
196
+ "description": "Use to set the horizontal padding inside of controls, like text inputs and menu toggles.",
162
197
  "type": "number",
163
198
  "value": "{global.spacer.md}"
164
199
  },
165
- "compact": {
200
+ "plain": {
201
+ "description": "Use to set the horizontal padding inside of plain controls, like in plain menu toggles.",
166
202
  "type": "number",
167
- "value": "{global.spacer.200}"
203
+ "value": "{global.spacer.sm}"
168
204
  },
169
- "plain": {
205
+ "compact": {
206
+ "description": "Use to set the horizontal padding inside of compact controls. This is used across text inputs, menu toggles, control buttons etc.",
170
207
  "type": "number",
171
208
  "value": "{global.spacer.sm}"
209
+ },
210
+ "spacious": {
211
+ "description": "Use to set the horizontal padding in large/display controls.",
212
+ "type": "number",
213
+ "value": "{global.spacer.lg}"
172
214
  }
173
215
  }
174
216
  },
175
217
  "gap": {
176
218
  "text-to-element": {
177
219
  "default": {
220
+ "description": "Use to space an element, like an icon or badge, inline with text",
178
221
  "type": "number",
179
222
  "value": "{global.spacer.sm}"
180
223
  }
181
224
  },
182
225
  "control-to-control": {
183
226
  "default": {
227
+ "description": "Use to set the space between controls, like in input groups or filter groups",
184
228
  "type": "number",
185
229
  "value": "{global.spacer.xs}"
186
230
  }
187
231
  },
188
232
  "group": {
189
233
  "vertical": {
234
+ "description": "Use to set the vertical space between items in a group, like a field label, form input, and helper text placed in a vertical/stacked layout",
190
235
  "type": "number",
191
236
  "value": "{global.spacer.sm}"
192
237
  },
193
238
  "horizontal": {
239
+ "description": "Use to set the horizontal space between items in a group, like a field label and form input placed in a horizontal layout.",
194
240
  "type": "number",
195
241
  "value": "{global.spacer.md}"
196
242
  }
197
243
  },
198
244
  "group-to-group": {
199
245
  "horizontal": {
246
+ "description": "Use to set the horizontal space between groups of elements, like between multiple action groups or forms groups placed in a horizontal layout.",
200
247
  "type": "number",
201
248
  "value": "{global.spacer.2xl}"
202
249
  },
203
250
  "vertical": {
251
+ "description": "Use to set the vertical space between groups of elements, like between stacked form groups.",
204
252
  "type": "number",
205
253
  "value": "{global.spacer.lg}"
206
254
  }
207
255
  },
208
256
  "action-to-action": {
209
257
  "default": {
258
+ "description": "Use to set the space between actions, like in an action list group.",
210
259
  "type": "number",
211
260
  "value": "{global.spacer.md}"
212
261
  },
213
262
  "plain": {
263
+ "description": "Use to set the space between plain actions, like in an action list group.",
214
264
  "type": "number",
215
265
  "value": "{global.spacer.xs}"
216
266
  }
217
267
  }
218
268
  },
219
269
  "action": {
220
- "vertical": {
221
- "default": {
222
- "type": "number",
223
- "value": "{global.spacer.sm}"
224
- },
225
- "plain": {
226
- "type": "number",
227
- "value": "{global.spacer.sm}"
228
- }
229
- },
230
270
  "horizontal": {
231
271
  "default": {
272
+ "description": "Use to set the horizontal padding inside a default action, like buttons.",
232
273
  "type": "number",
233
274
  "value": "{global.spacer.lg}"
234
275
  },
235
276
  "plain": {
277
+ "description": "Use to set the horizontal padding inside a plain action, like plain buttons.",
236
278
  "type": "number",
237
- "value": "{global.spacer.sm}"
238
- }
239
- }
240
- },
241
- "button": {
242
- "horizontal": {
279
+ "value": "{global.spacer.sm}",
280
+ "compact": {
281
+ "description": "Use to set the horizontal padding inside a compact, plain action/button.",
282
+ "type": "number",
283
+ "value": "{global.spacer.xs}"
284
+ }
285
+ },
243
286
  "compact": {
287
+ "description": "Use to set the horizontal padding inside a compact action, like compact buttons.",
244
288
  "type": "number",
245
- "value": "{global.spacer.300}"
289
+ "value": "{global.spacer.md}"
290
+ },
291
+ "spacious": {
292
+ "description": "Use to set the horizontal padding inside a large/display action, like CTAs.",
293
+ "type": "number",
294
+ "value": "{global.spacer.xl}"
246
295
  }
247
296
  },
248
297
  "vertical": {
249
298
  "compact": {
299
+ "description": "Use to set the vertical padding inside a compact action, like compact buttons.",
300
+ "type": "number",
301
+ "value": "{global.spacer.xs}"
302
+ },
303
+ "spacious": {
304
+ "description": "Use to set the vertical padding inside a large/display action, like CTAs.",
250
305
  "type": "number",
251
- "value": "{global.spacer.100}"
306
+ "value": "{global.spacer.md}"
252
307
  }
253
308
  }
254
309
  }
@@ -256,99 +311,122 @@
256
311
  "icon": {
257
312
  "size": {
258
313
  "sm": {
314
+ "description": "Use for small icons.",
259
315
  "type": "number",
260
316
  "value": "{global.icon.size.100}"
261
317
  },
262
318
  "md": {
319
+ "description": "Use for medium icons.",
263
320
  "type": "number",
264
321
  "value": "{global.icon.size.200}"
265
322
  },
266
323
  "lg": {
324
+ "description": "Use for large icons.",
267
325
  "type": "number",
268
326
  "value": "{global.icon.size.250}"
269
327
  },
270
328
  "xl": {
329
+ "description": "Use for extra large icons.",
271
330
  "type": "number",
272
331
  "value": "{global.icon.size.300}"
273
332
  },
274
333
  "2xl": {
334
+ "description": "Use for double extra large icons.",
275
335
  "type": "number",
276
336
  "value": "{global.icon.size.400}"
277
337
  },
278
338
  "3xl": {
339
+ "description": "Use for triple extra large icons.",
279
340
  "type": "number",
280
341
  "value": "{global.icon.size.500}"
281
342
  },
282
343
  "font": {
283
- "body": {
284
- "sm": {
285
- "type": "number",
286
- "value": "{global.font.size.body.sm}"
287
- },
288
- "default": {
289
- "type": "number",
290
- "value": "{global.font.size.body.default}"
291
- },
292
- "lg": {
293
- "type": "number",
294
- "value": "{global.font.size.body.lg}"
295
- }
296
- },
297
344
  "heading": {
298
345
  "h1": {
346
+ "description": "Use for icons that are placed inline with first level headings",
299
347
  "type": "number",
300
348
  "value": "{global.font.size.heading.h1}"
301
349
  },
302
350
  "h2": {
351
+ "description": "Use for icons that are placed inline with second level headings",
303
352
  "type": "number",
304
353
  "value": "{global.font.size.heading.h2}"
305
354
  },
306
355
  "h3": {
356
+ "description": "Use for icons that are placed inline with third level headings",
307
357
  "type": "number",
308
358
  "value": "{global.font.size.heading.h3}"
309
359
  },
310
360
  "h4": {
361
+ "description": "Use for icons that are placed inline with fourth level headings",
311
362
  "type": "number",
312
363
  "value": "{global.font.size.heading.h4}"
313
364
  },
314
365
  "h5": {
366
+ "description": "Use for icons that are placed inline with fifth level headings",
315
367
  "type": "number",
316
368
  "value": "{global.font.size.heading.h5}"
317
369
  },
318
370
  "h6": {
371
+ "description": "Use for icons that are placed inline with sixth level headings",
319
372
  "type": "number",
320
373
  "value": "{global.font.size.heading.h6}"
321
374
  }
322
375
  },
376
+ "body": {
377
+ "sm": {
378
+ "description": "Use for icons that are placed inline with small body text",
379
+ "type": "number",
380
+ "value": "{global.font.size.body.sm}"
381
+ },
382
+ "default": {
383
+ "description": "Use for icons that are placed inline with default body text",
384
+ "type": "number",
385
+ "value": "{global.font.size.body.default}"
386
+ },
387
+ "lg": {
388
+ "description": "Use for icons that are placed inline with large body text",
389
+ "type": "number",
390
+ "value": "{global.font.size.body.lg}"
391
+ }
392
+ },
323
393
  "xs": {
394
+ "description": "Use for icons that are placed inline with font–size–xs text",
324
395
  "type": "number",
325
396
  "value": "{global.font.size.xs}"
326
397
  },
327
398
  "sm": {
399
+ "description": "Use for icons that are placed inline with font–size–sm text",
328
400
  "type": "number",
329
401
  "value": "{global.font.size.sm}"
330
402
  },
331
403
  "md": {
404
+ "description": "Use for icons that are placed inline with font–size–md text",
332
405
  "type": "number",
333
406
  "value": "{global.font.size.md}"
334
407
  },
335
408
  "lg": {
409
+ "description": "Use for icons that are placed inline with font–size–lg text",
336
410
  "type": "number",
337
411
  "value": "{global.font.size.lg}"
338
412
  },
339
413
  "xl": {
414
+ "description": "Use for icons that are placed inline with font–size–xl text",
340
415
  "type": "number",
341
416
  "value": "{global.font.size.xl}"
342
417
  },
343
418
  "2xl": {
419
+ "description": "Use for icons that are placed inline with font–size–2xl text",
344
420
  "type": "number",
345
421
  "value": "{global.font.size.2xl}"
346
422
  },
347
423
  "3xl": {
424
+ "description": "Use for icons that are placed inline with font–size–3xl text",
348
425
  "type": "number",
349
426
  "value": "{global.font.size.3xl}"
350
427
  },
351
428
  "4xl": {
429
+ "description": "Use for icons that are placed inline with font–size–3xl text",
352
430
  "type": "number",
353
431
  "value": "{global.font.size.4xl}"
354
432
  }
@@ -358,84 +436,51 @@
358
436
  "font": {
359
437
  "weight": {
360
438
  "body": {
439
+ "description": "Use to define the default weight for body text",
361
440
  "type": "number",
362
- "value": "{global.font.weight.body.100}",
441
+ "value": "{global.font.weight.100}",
363
442
  "bold": {
443
+ "description": "Use to define the bold weight for body text, often used to field labels or to add emphasis.",
364
444
  "type": "number",
365
- "value": "{global.font.weight.body.200}"
445
+ "value": "{global.font.weight.200}"
366
446
  }
367
447
  },
368
448
  "heading": {
449
+ "description": "Use to define the default weight for heading text",
369
450
  "type": "number",
370
- "value": "{global.font.weight.heading.100}",
451
+ "value": "{global.font.weight.300}",
371
452
  "bold": {
453
+ "description": "Use to define the bold weight for heading text, often used to add emphasis.",
372
454
  "type": "number",
373
- "value": "{global.font.weight.heading.200}"
455
+ "value": "{global.font.weight.400}"
374
456
  }
375
457
  }
376
458
  },
377
459
  "line-height": {
378
460
  "body": {
461
+ "description": "Use to define the line height for body text",
379
462
  "type": "number",
380
463
  "value": "{global.font.line-height.100}"
381
464
  },
382
465
  "heading": {
466
+ "description": "Use to define the line height for heading text",
383
467
  "type": "number",
384
468
  "value": "{global.font.line-height.200}"
385
- },
386
- "figma-only": {
387
- "body": {
388
- "small": {
389
- "type": "number",
390
- "value": "{global.font.line-height.figma-only.100}"
391
- },
392
- "default": {
393
- "type": "number",
394
- "value": "{global.font.line-height.figma-only.200}"
395
- },
396
- "large": {
397
- "type": "number",
398
- "value": "{global.font.line-height.figma-only.300}"
399
- }
400
- },
401
- "heading": {
402
- "xs": {
403
- "type": "number",
404
- "value": "{global.font.line-height.figma-only.300}"
405
- },
406
- "sm": {
407
- "type": "number",
408
- "value": "{global.font.line-height.figma-only.400}"
409
- },
410
- "md": {
411
- "type": "number",
412
- "value": "{global.font.line-height.figma-only.500}"
413
- },
414
- "lg": {
415
- "type": "number",
416
- "value": "{global.font.line-height.figma-only.600}"
417
- },
418
- "xl": {
419
- "type": "number",
420
- "value": "{global.font.line-height.figma-only.700}"
421
- },
422
- "2xl": {
423
- "type": "number",
424
- "value": "{global.font.line-height.figma-only.800}"
425
- }
426
- }
427
469
  }
428
470
  },
429
471
  "family": {
430
472
  "body": {
473
+ "description": "Use to define the font family for body text",
431
474
  "type": "number",
432
475
  "value": "{global.font.family.100}"
433
476
  },
434
477
  "heading": {
478
+ "description": "Use to define the font family for heading text",
435
479
  "type": "number",
436
480
  "value": "{global.font.family.200}"
437
481
  },
438
482
  "mono": {
483
+ "description": "Use to define the font family for mono text",
439
484
  "type": "number",
440
485
  "value": "{global.font.family.300}"
441
486
  }
@@ -443,40 +488,49 @@
443
488
  "size": {
444
489
  "body": {
445
490
  "sm": {
491
+ "description": "Use for a smaller font size in body sections.",
446
492
  "type": "number",
447
493
  "value": "{global.font.size.xs}"
448
494
  },
449
495
  "default": {
496
+ "description": "Use as the default font size in body sections.",
450
497
  "type": "number",
451
498
  "value": "{global.font.size.sm}"
452
499
  },
453
500
  "lg": {
501
+ "description": "Use for a larger font size in body sections.",
454
502
  "type": "number",
455
503
  "value": "{global.font.size.md}"
456
504
  }
457
505
  },
458
506
  "heading": {
459
507
  "h1": {
508
+ "description": "Use as the font size for first level headings.",
460
509
  "type": "number",
461
510
  "value": "{global.font.size.2xl}"
462
511
  },
463
512
  "h2": {
513
+ "description": "Use as the font size for second level headings.",
464
514
  "type": "number",
465
515
  "value": "{global.font.size.xl}"
466
516
  },
467
517
  "h3": {
518
+ "description": "Use as the font size for third level headings.",
468
519
  "type": "number",
469
520
  "value": "{global.font.size.lg}"
470
521
  },
471
522
  "h4": {
523
+ "description": "Use as the font size for fourth-level headings.",
472
524
  "type": "number",
473
525
  "value": "{global.font.size.md}"
474
526
  },
475
527
  "h5": {
528
+ "description": "Use as the font size for fifth level headings.",
476
529
  "type": "number",
477
530
  "value": "{global.font.size.md}"
478
531
  },
479
532
  "h6": {
533
+ "description": "Use as the font size for sixth level headings.",
480
534
  "type": "number",
481
535
  "value": "{global.font.size.md}"
482
536
  }
@@ -486,30 +540,37 @@
486
540
  "value": "{global.font.size.100}"
487
541
  },
488
542
  "sm": {
543
+ "description": "Use as the font size for small text that isn’t a heading or in a body section.",
489
544
  "type": "number",
490
545
  "value": "{global.font.size.200}"
491
546
  },
492
547
  "md": {
548
+ "description": "Use as the font size for medium text that isn’t a heading or in a body section.",
493
549
  "type": "number",
494
550
  "value": "{global.font.size.300}"
495
551
  },
496
552
  "lg": {
553
+ "description": "Use as the font size for large text that isn’t a heading or in a body section.",
497
554
  "type": "number",
498
555
  "value": "{global.font.size.400}"
499
556
  },
500
557
  "xl": {
558
+ "description": "Use as the font size for extra large text that isn’t a heading or in a body section.",
501
559
  "type": "number",
502
560
  "value": "{global.font.size.500}"
503
561
  },
504
562
  "2xl": {
563
+ "description": "Use as the font size for double extra large text that isn’t a heading or in a body section.",
505
564
  "type": "number",
506
565
  "value": "{global.font.size.600}"
507
566
  },
508
567
  "3xl": {
568
+ "description": "Use as the font size for triple extra large text that isn’t a heading or in a body section.",
509
569
  "type": "number",
510
570
  "value": "{global.font.size.700}"
511
571
  },
512
572
  "4xl": {
573
+ "description": "Use as the font size for quadruple extra large text that isn’t a heading or in a body section.",
513
574
  "type": "number",
514
575
  "value": "{global.font.size.800}"
515
576
  }
@@ -545,66 +606,81 @@
545
606
  "X": {
546
607
  "sm": {
547
608
  "default": {
609
+ "description": "Use to define the X value for a default small box-shadow, like in sticky sections",
548
610
  "type": "number",
549
611
  "value": "{global.box-shadow.X.400}"
550
612
  },
551
613
  "top": {
614
+ "description": "Use to define the X value for a small box-shadow that appears on the top of a raised element, like in sticky footers",
552
615
  "type": "number",
553
616
  "value": "{global.box-shadow.X.400}"
554
617
  },
555
618
  "bottom": {
619
+ "description": "Use to define the X value for a small box-shadow that appears on the bottom of a raised element, like in sticky headers.",
556
620
  "type": "number",
557
621
  "value": "{global.box-shadow.X.400}"
558
622
  },
559
623
  "left": {
624
+ "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.",
560
625
  "type": "number",
561
626
  "value": "{global.box-shadow.X.300}"
562
627
  },
563
628
  "right": {
629
+ "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.",
564
630
  "type": "number",
565
631
  "value": "{global.box-shadow.X.500}"
566
632
  }
567
633
  },
568
634
  "md": {
569
635
  "default": {
636
+ "description": "Use to define the X value for a default medium box-shadow, used in popovers and raised menus.",
570
637
  "type": "number",
571
638
  "value": "{global.box-shadow.X.400}"
572
639
  },
573
640
  "top": {
641
+ "description": "Use to define the X value for a medium box-shadow that appears on the top of a raised element, like in overlay bottom drawers.",
574
642
  "type": "number",
575
643
  "value": "{global.box-shadow.X.400}"
576
644
  },
577
645
  "bottom": {
646
+ "description": "Use to define the X value for a medium box-shadow that appears on the bottom of a raised element.",
578
647
  "type": "number",
579
648
  "value": "{global.box-shadow.X.400}"
580
649
  },
581
650
  "left": {
651
+ "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.",
582
652
  "type": "number",
583
653
  "value": "{global.box-shadow.X.200}"
584
654
  },
585
655
  "right": {
656
+ "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.",
586
657
  "type": "number",
587
658
  "value": "{global.box-shadow.X.600}"
588
659
  }
589
660
  },
590
661
  "lg": {
591
662
  "default": {
663
+ "description": "Use to define the X value for a default large box-shadow, used in modals and wizards.",
592
664
  "type": "number",
593
665
  "value": "{global.box-shadow.X.400}"
594
666
  },
595
667
  "top": {
668
+ "description": "Use to define the X value for a large box-shadow that appears on the top of a raised element.",
596
669
  "type": "number",
597
670
  "value": "{global.box-shadow.X.400}"
598
671
  },
599
672
  "bottom": {
673
+ "description": "Use to define the X value for a large box-shadow that appears on the bottom of a raised element.",
600
674
  "type": "number",
601
675
  "value": "{global.box-shadow.X.400}"
602
676
  },
603
677
  "left": {
678
+ "description": "Use to define the X value for a large box-shadow that appears on the left of a raised element.",
604
679
  "type": "number",
605
680
  "value": "{global.box-shadow.X.100}"
606
681
  },
607
682
  "right": {
683
+ "description": "Use to define the X value for a large box-shadow that appears on the right of a raised element.",
608
684
  "type": "number",
609
685
  "value": "{global.box-shadow.X.700}"
610
686
  }
@@ -613,66 +689,81 @@
613
689
  "Y": {
614
690
  "sm": {
615
691
  "default": {
692
+ "description": "Use to define the Y value for a default small box-shadow, like in sticky sections",
616
693
  "type": "number",
617
694
  "value": "{global.box-shadow.Y.500}"
618
695
  },
619
696
  "top": {
697
+ "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",
620
698
  "type": "number",
621
699
  "value": "{global.box-shadow.Y.300}"
622
700
  },
623
701
  "bottom": {
702
+ "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.",
624
703
  "type": "number",
625
704
  "value": "{global.box-shadow.Y.500}"
626
705
  },
627
706
  "left": {
707
+ "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.",
628
708
  "type": "number",
629
709
  "value": "{global.box-shadow.Y.400}"
630
710
  },
631
711
  "right": {
712
+ "description": "Use to define the Y value for a small box-shadow that appears on the right of a raised element, like in sticky columns.",
632
713
  "type": "number",
633
714
  "value": "{global.box-shadow.Y.400}"
634
715
  }
635
716
  },
636
717
  "md": {
637
718
  "default": {
719
+ "description": "Use to define the Y value for a default medium box-shadow, used in popovers and raised menus.",
638
720
  "type": "number",
639
721
  "value": "{global.box-shadow.Y.600}"
640
722
  },
641
723
  "top": {
724
+ "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",
642
725
  "type": "number",
643
726
  "value": "{global.box-shadow.Y.200}"
644
727
  },
645
728
  "bottom": {
729
+ "description": "Use to define the Y value for a medium box-shadow that appears on the bottom of a raised element.",
646
730
  "type": "number",
647
731
  "value": "{global.box-shadow.Y.600}"
648
732
  },
649
733
  "left": {
734
+ "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.",
650
735
  "type": "number",
651
736
  "value": "{global.box-shadow.Y.400}"
652
737
  },
653
738
  "right": {
739
+ "description": "Use to define the Y 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.",
654
740
  "type": "number",
655
741
  "value": "{global.box-shadow.Y.400}"
656
742
  }
657
743
  },
658
744
  "lg": {
659
745
  "default": {
746
+ "description": "Use to define the Y value for a default large box-shadow, used in modals and wizards.",
660
747
  "type": "number",
661
748
  "value": "{global.box-shadow.Y.700}"
662
749
  },
663
750
  "top": {
751
+ "description": "Use to define the Y value for a large box-shadow that appears on the top of a raised element.",
664
752
  "type": "number",
665
753
  "value": "{global.box-shadow.Y.100}"
666
754
  },
667
755
  "bottom": {
756
+ "description": "Use to define the Y value for a large box-shadow that appears on the bottom of a raised element.",
668
757
  "type": "number",
669
758
  "value": "{global.box-shadow.Y.700}"
670
759
  },
671
760
  "left": {
761
+ "description": "Use to define the Y value for a large box-shadow that appears on the left of a raised element.",
672
762
  "type": "number",
673
763
  "value": "{global.box-shadow.Y.400}"
674
764
  },
675
765
  "right": {
766
+ "description": "Use to define the Y value for a large box-shadow that appears on the right of a raised element.",
676
767
  "type": "number",
677
768
  "value": "{global.box-shadow.Y.400}"
678
769
  }
@@ -680,28 +771,34 @@
680
771
  },
681
772
  "blur": {
682
773
  "sm": {
774
+ "description": "Use to define the blur for a small box-shadow",
683
775
  "type": "number",
684
776
  "value": "{global.box-shadow.blur.100}"
685
777
  },
686
778
  "md": {
779
+ "description": "Use to define the blur for a medium box-shadow",
687
780
  "type": "number",
688
781
  "value": "{global.box-shadow.blur.200}"
689
782
  },
690
783
  "lg": {
784
+ "description": "Use to define the blue for a large box-shadow",
691
785
  "type": "number",
692
786
  "value": "{global.box-shadow.blur.300}"
693
787
  }
694
788
  },
695
789
  "spread": {
696
790
  "sm": {
791
+ "description": "Use to define the spread for a small box-shadow",
697
792
  "type": "number",
698
793
  "value": "{global.box-shadow.spread.100}"
699
794
  },
700
795
  "md": {
796
+ "description": "Use to define the spread of a medium box-shadow",
701
797
  "type": "number",
702
798
  "value": "{global.box-shadow.spread.100}"
703
799
  },
704
800
  "lg": {
801
+ "description": "Use to define the spread of a large box-shadow",
705
802
  "type": "number",
706
803
  "value": "{global.box-shadow.spread.100}"
707
804
  }
@@ -709,47 +806,58 @@
709
806
  },
710
807
  "breakpoint": {
711
808
  "xs": {
809
+ "description": "Use to define an extra small breakpoint, which is the minimum width at which an effect applies to an element, in order to support responsive design.",
712
810
  "type": "number",
713
811
  "value": "{global.breakpoint.100}"
714
812
  },
715
813
  "sm": {
814
+ "description": "Use to define a small breakpoint, which is the minimum width at which an effect applies to an element, in order to support responsive design.",
716
815
  "type": "number",
717
816
  "value": "{global.breakpoint.200}"
718
817
  },
719
818
  "md": {
819
+ "description": "Use to define a medium breakpoint, which is the minimum width at which an effect applies to an element, in order to support responsive design.",
720
820
  "type": "number",
721
821
  "value": "{global.breakpoint.300}"
722
822
  },
723
823
  "lg": {
824
+ "description": "Use to define a large breakpoint, which is the minimum width at which an effect applies to an element, in order to support responsive design.",
724
825
  "type": "number",
725
826
  "value": "{global.breakpoint.400}"
726
827
  },
727
828
  "xl": {
829
+ "description": "Use to define an extra large breakpoint, which is the minimum width at which an effect applies to an element, in order to support responsive design.",
728
830
  "type": "number",
729
831
  "value": "{global.breakpoint.500}"
730
832
  },
731
833
  "2xl": {
834
+ "description": "Use to define a double extra large breakpoint, which is the minimum width at which an effect applies to an element, in order to support responsive design.",
732
835
  "type": "number",
733
836
  "value": "{global.breakpoint.600}"
734
837
  },
735
838
  "height": {
736
839
  "sm": {
840
+ "description": "Use to define a small height breakpoint, which is the minimum height at which an effect applies to an element, in order to support responsive design.",
737
841
  "type": "number",
738
842
  "value": "{global.breakpoint.100}"
739
843
  },
740
844
  "md": {
845
+ "description": "Use to define a medium height breakpoint, which is the minimum height at which an effect applies to an element, in order to support responsive design.",
741
846
  "type": "number",
742
847
  "value": "{global.breakpoint.250}"
743
848
  },
744
849
  "lg": {
850
+ "description": "Use to define a large height breakpoint, which is the minimum height at which an effect applies to an element, in order to support responsive design.",
745
851
  "type": "number",
746
852
  "value": "{global.breakpoint.300}"
747
853
  },
748
854
  "xl": {
855
+ "description": "Use to define an extra large height breakpoint, which is the minimum height at which an effect applies to an element, in order to support responsive design.",
749
856
  "type": "number",
750
857
  "value": "{global.breakpoint.350}"
751
858
  },
752
859
  "2xl": {
860
+ "description": "Use to define an extra small height breakpoint, which is the minimum height at which an effect applies to an element, in order to support responsive design.",
753
861
  "type": "number",
754
862
  "value": "{global.breakpoint.550}"
755
863
  }