@adobe/spectrum-tokens 12.0.0-beta.3 → 12.0.0-beta.4

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 (7) hide show
  1. package/CHANGELOG.md +2 -8
  2. package/package.json +4 -1
  3. package/tokens/color-alias.json +125 -127
  4. package/tokens/color-semantic.json +260 -272
  5. package/tokens/color.json +2512 -2542
  6. package/tokens/component-layout.json +694 -746
  7. package/tokens/layout.json +836 -910
package/tokens/layout.json CHANGED
@@ -1,981 +1,907 @@
1
1
  {
2
- "layout": {
3
- "corner-radius": {
4
- "75": {
5
- "sets": {
6
- "spectrum": {
7
- "desktop": {
8
- "value": "2px"
9
- },
10
- "mobile": {
11
- "value": "2px"
12
- }
13
- },
14
- "express": {
15
- "desktop": {
16
- "value": "3px"
17
- },
18
- "mobile": {
19
- "value": "4px"
20
- }
21
- }
22
- }
23
- },
24
- "100": {
25
- "sets": {
26
- "spectrum": {
27
- "desktop": {
28
- "value": "4px"
29
- },
30
- "mobile": {
31
- "value": "5px"
32
- }
33
- },
34
- "express": {
35
- "desktop": {
36
- "value": "6px"
37
- },
38
- "mobile": {
39
- "value": "8px"
40
- }
41
- }
2
+ "corner-radius-75": {
3
+ "sets": {
4
+ "spectrum": {
5
+ "desktop": {
6
+ "value": "2px"
7
+ },
8
+ "mobile": {
9
+ "value": "2px"
42
10
  }
43
11
  },
44
- "200": {
45
- "sets": {
46
- "spectrum": {
47
- "desktop": {
48
- "value": "8px"
49
- },
50
- "mobile": {
51
- "value": "10px"
52
- }
53
- },
54
- "express": {
55
- "desktop": {
56
- "value": "12px"
57
- },
58
- "mobile": {
59
- "value": "16px"
60
- }
61
- }
12
+ "express": {
13
+ "desktop": {
14
+ "value": "3px"
15
+ },
16
+ "mobile": {
17
+ "value": "4px"
62
18
  }
63
19
  }
64
- },
65
-
66
- "drop-shadow": {
67
- "x": {
68
- "sets": {
69
- "spectrum": {
70
- "desktop": {
71
- "value": "0px"
72
- },
73
- "mobile": {
74
- "value": "0px"
75
- }
76
- },
77
- "express": {
78
- "desktop": {
79
- "value": "0px"
80
- },
81
- "mobile": {
82
- "value": "0px"
83
- }
84
- }
85
- }
86
- },
87
- "y": {
88
- "sets": {
89
- "spectrum": {
90
- "desktop": {
91
- "value": "1px"
92
- },
93
- "mobile": {
94
- "value": "2px"
95
- }
96
- },
97
- "express": {
98
- "desktop": {
99
- "value": "4px"
100
- },
101
- "mobile": {
102
- "value": "4px"
103
- }
104
- }
105
- }
106
- },
107
- "blur": {
108
- "sets": {
109
- "spectrum": {
110
- "desktop": {
111
- "value": "4px"
112
- },
113
- "mobile": {
114
- "value": "6px"
115
- }
116
- },
117
- "express": {
118
- "desktop": {
119
- "value": "16px"
120
- },
121
- "mobile": {
122
- "value": "16px"
123
- }
124
- }
20
+ }
21
+ },
22
+ "corner-radius-100": {
23
+ "sets": {
24
+ "spectrum": {
25
+ "desktop": {
26
+ "value": "4px"
27
+ },
28
+ "mobile": {
29
+ "value": "5px"
125
30
  }
126
31
  },
127
- "color": {
128
- "sets": {
129
- "light": {
130
- "value": "rgba(0, 0, 0, 0.15)"
131
- },
132
- "dark": {
133
- "value": "rgba(0, 0, 0, 0.50)"
134
- },
135
- "darkest": {
136
- "value": "rgba(0, 0, 0, 0.80)"
137
- }
32
+ "express": {
33
+ "desktop": {
34
+ "value": "6px"
35
+ },
36
+ "mobile": {
37
+ "value": "8px"
138
38
  }
139
39
  }
140
- },
141
-
142
- "android-elevation": {
143
- "value": "2dp"
144
- },
145
-
146
- "font-size": {
147
- "50": {
148
- "sets": {
149
- "desktop": {
150
- "value": "11px"
151
- },
152
- "mobile": {
153
- "value": "13px"
154
- }
155
- }
156
- },
157
- "75": {
158
- "sets": {
159
- "desktop": {
160
- "value": "12px"
161
- },
162
- "mobile": {
163
- "value": "15px"
164
- }
165
- }
166
- },
167
- "100": {
168
- "sets": {
169
- "desktop": {
170
- "value": "14px"
171
- },
172
- "mobile": {
173
- "value": "17px"
174
- }
175
- }
176
- },
177
- "200": {
178
- "sets": {
179
- "desktop": {
180
- "value": "16px"
181
- },
182
- "mobile": {
183
- "value": "19px"
184
- }
185
- }
186
- },
187
- "300": {
188
- "sets": {
189
- "desktop": {
190
- "value": "18px"
191
- },
192
- "mobile": {
193
- "value": "22px"
194
- }
195
- }
196
- },
197
- "400": {
198
- "sets": {
199
- "desktop": {
200
- "value": "20px"
201
- },
202
- "mobile": {
203
- "value": "24px"
204
- }
205
- }
206
- },
207
- "500": {
208
- "sets": {
209
- "desktop": {
210
- "value": "22px"
211
- },
212
- "mobile": {
213
- "value": "27px"
214
- }
40
+ }
41
+ },
42
+ "corner-radius-200": {
43
+ "sets": {
44
+ "spectrum": {
45
+ "desktop": {
46
+ "value": "8px"
47
+ },
48
+ "mobile": {
49
+ "value": "10px"
215
50
  }
216
51
  },
217
- "600": {
218
- "sets": {
219
- "desktop": {
220
- "value": "25px"
221
- },
222
- "mobile": {
223
- "value": "31px"
224
- }
52
+ "express": {
53
+ "desktop": {
54
+ "value": "12px"
55
+ },
56
+ "mobile": {
57
+ "value": "16px"
225
58
  }
226
- },
227
- "700": {
228
- "sets": {
229
- "desktop": {
230
- "value": "28px"
231
- },
232
- "mobile": {
233
- "value": "34px"
234
- }
59
+ }
60
+ }
61
+ },
62
+ "drop-shadow-x": {
63
+ "sets": {
64
+ "spectrum": {
65
+ "desktop": {
66
+ "value": "0px"
67
+ },
68
+ "mobile": {
69
+ "value": "0px"
235
70
  }
236
71
  },
237
- "800": {
238
- "sets": {
239
- "desktop": {
240
- "value": "32px"
241
- },
242
- "mobile": {
243
- "value": "39px"
244
- }
72
+ "express": {
73
+ "desktop": {
74
+ "value": "0px"
75
+ },
76
+ "mobile": {
77
+ "value": "0px"
245
78
  }
246
- },
247
- "900": {
248
- "sets": {
249
- "desktop": {
250
- "value": "36px"
251
- },
252
- "mobile": {
253
- "value": "44px"
254
- }
79
+ }
80
+ }
81
+ },
82
+ "drop-shadow-y": {
83
+ "sets": {
84
+ "spectrum": {
85
+ "desktop": {
86
+ "value": "1px"
87
+ },
88
+ "mobile": {
89
+ "value": "2px"
255
90
  }
256
91
  },
257
- "1000": {
258
- "sets": {
259
- "desktop": {
260
- "value": "40px"
261
- },
262
- "mobile": {
263
- "value": "49px"
264
- }
92
+ "express": {
93
+ "desktop": {
94
+ "value": "4px"
95
+ },
96
+ "mobile": {
97
+ "value": "4px"
265
98
  }
266
- },
267
- "1100": {
268
- "sets": {
269
- "desktop": {
270
- "value": "45px"
271
- },
272
- "mobile": {
273
- "value": "55px"
274
- }
99
+ }
100
+ }
101
+ },
102
+ "drop-shadow-blur": {
103
+ "sets": {
104
+ "spectrum": {
105
+ "desktop": {
106
+ "value": "4px"
107
+ },
108
+ "mobile": {
109
+ "value": "6px"
275
110
  }
276
111
  },
277
- "1200": {
278
- "sets": {
279
- "desktop": {
280
- "value": "50px"
281
- },
282
- "mobile": {
283
- "value": "62px"
284
- }
112
+ "express": {
113
+ "desktop": {
114
+ "value": "16px"
115
+ },
116
+ "mobile": {
117
+ "value": "16px"
285
118
  }
119
+ }
120
+ }
121
+ },
122
+ "android-elevation": {
123
+ "value": "2dp"
124
+ },
125
+ "font-size-50": {
126
+ "sets": {
127
+ "desktop": {
128
+ "value": "11px"
129
+ },
130
+ "mobile": {
131
+ "value": "13px"
132
+ }
133
+ }
134
+ },
135
+ "font-size-75": {
136
+ "sets": {
137
+ "desktop": {
138
+ "value": "12px"
286
139
  },
287
- "1300": {
288
- "sets": {
289
- "desktop": {
290
- "value": "60px"
291
- },
292
- "mobile": {
293
- "value": "70px"
294
- }
295
- }
140
+ "mobile": {
141
+ "value": "15px"
296
142
  }
297
- },
298
-
299
- "workflow-icon-size": {
300
- "50": {
301
- "sets": {
302
- "desktop": { "value": "14px" },
303
- "mobile": { "value": "18px" }
304
- }
143
+ }
144
+ },
145
+ "font-size-100": {
146
+ "sets": {
147
+ "desktop": {
148
+ "value": "14px"
149
+ },
150
+ "mobile": {
151
+ "value": "17px"
152
+ }
153
+ }
154
+ },
155
+ "font-size-200": {
156
+ "sets": {
157
+ "desktop": {
158
+ "value": "16px"
305
159
  },
306
- "75": {
307
- "sets": {
308
- "desktop": {
309
- "value": "16px"
310
- },
311
- "mobile": {
312
- "value": "20px"
313
- }
314
- }
160
+ "mobile": {
161
+ "value": "19px"
162
+ }
163
+ }
164
+ },
165
+ "font-size-300": {
166
+ "sets": {
167
+ "desktop": {
168
+ "value": "18px"
169
+ },
170
+ "mobile": {
171
+ "value": "22px"
172
+ }
173
+ }
174
+ },
175
+ "font-size-400": {
176
+ "sets": {
177
+ "desktop": {
178
+ "value": "20px"
315
179
  },
316
- "100": {
317
- "sets": {
318
- "desktop": {
319
- "value": "18px"
320
- },
321
- "mobile": {
322
- "value": "22px"
323
- }
324
- }
180
+ "mobile": {
181
+ "value": "24px"
182
+ }
183
+ }
184
+ },
185
+ "font-size-500": {
186
+ "sets": {
187
+ "desktop": {
188
+ "value": "22px"
189
+ },
190
+ "mobile": {
191
+ "value": "27px"
192
+ }
193
+ }
194
+ },
195
+ "font-size-600": {
196
+ "sets": {
197
+ "desktop": {
198
+ "value": "25px"
199
+ },
200
+ "mobile": {
201
+ "value": "31px"
202
+ }
203
+ }
204
+ },
205
+ "font-size-700": {
206
+ "sets": {
207
+ "desktop": {
208
+ "value": "28px"
209
+ },
210
+ "mobile": {
211
+ "value": "34px"
212
+ }
213
+ }
214
+ },
215
+ "font-size-800": {
216
+ "sets": {
217
+ "desktop": {
218
+ "value": "32px"
325
219
  },
326
- "200": {
327
- "sets": {
328
- "desktop": {
329
- "value": "20px"
330
- },
331
- "mobile": {
332
- "value": "24px"
333
- }
334
- }
220
+ "mobile": {
221
+ "value": "39px"
222
+ }
223
+ }
224
+ },
225
+ "font-size-900": {
226
+ "sets": {
227
+ "desktop": {
228
+ "value": "36px"
229
+ },
230
+ "mobile": {
231
+ "value": "44px"
232
+ }
233
+ }
234
+ },
235
+ "font-size-1000": {
236
+ "sets": {
237
+ "desktop": {
238
+ "value": "40px"
335
239
  },
336
- "300": {
337
- "sets": {
338
- "desktop": {
339
- "value": "22px"
340
- },
341
- "mobile": {
342
- "value": "28px"
343
- }
344
- }
240
+ "mobile": {
241
+ "value": "49px"
345
242
  }
346
- },
347
-
348
- "spacing": {
349
- "50": {
350
- "value": "2px"
243
+ }
244
+ },
245
+ "font-size-1100": {
246
+ "sets": {
247
+ "desktop": {
248
+ "value": "45px"
249
+ },
250
+ "mobile": {
251
+ "value": "55px"
252
+ }
253
+ }
254
+ },
255
+ "font-size-1200": {
256
+ "sets": {
257
+ "desktop": {
258
+ "value": "50px"
259
+ },
260
+ "mobile": {
261
+ "value": "62px"
262
+ }
263
+ }
264
+ },
265
+ "font-size-1300": {
266
+ "sets": {
267
+ "desktop": {
268
+ "value": "60px"
269
+ },
270
+ "mobile": {
271
+ "value": "70px"
272
+ }
273
+ }
274
+ },
275
+ "workflow-icon-size-50": {
276
+ "sets": {
277
+ "desktop": { "value": "14px" },
278
+ "mobile": { "value": "18px" }
279
+ }
280
+ },
281
+ "workflow-icon-size-75": {
282
+ "sets": {
283
+ "desktop": {
284
+ "value": "16px"
351
285
  },
352
- "75": {
353
- "value": "4px"
286
+ "mobile": {
287
+ "value": "20px"
288
+ }
289
+ }
290
+ },
291
+ "workflow-icon-size-100": {
292
+ "sets": {
293
+ "desktop": {
294
+ "value": "18px"
295
+ },
296
+ "mobile": {
297
+ "value": "22px"
298
+ }
299
+ }
300
+ },
301
+ "workflow-icon-size-200": {
302
+ "sets": {
303
+ "desktop": {
304
+ "value": "20px"
354
305
  },
355
- "100": {
306
+ "mobile": {
307
+ "value": "24px"
308
+ }
309
+ }
310
+ },
311
+ "workflow-icon-size-300": {
312
+ "sets": {
313
+ "desktop": {
314
+ "value": "22px"
315
+ },
316
+ "mobile": {
317
+ "value": "28px"
318
+ }
319
+ }
320
+ },
321
+ "spacing-50": {
322
+ "value": "2px"
323
+ },
324
+ "spacing-75": {
325
+ "value": "4px"
326
+ },
327
+ "spacing-100": {
328
+ "value": "8px"
329
+ },
330
+ "spacing-200": {
331
+ "value": "12px"
332
+ },
333
+ "spacing-300": {
334
+ "value": "16px"
335
+ },
336
+ "spacing-400": {
337
+ "value": "24px"
338
+ },
339
+ "spacing-500": {
340
+ "value": "32px"
341
+ },
342
+ "spacing-600": {
343
+ "value": "40px"
344
+ },
345
+ "spacing-700": {
346
+ "value": "48px"
347
+ },
348
+ "spacing-800": {
349
+ "value": "64px"
350
+ },
351
+ "spacing-900": {
352
+ "value": "80px"
353
+ },
354
+ "spacing-1000": {
355
+ "value": "96px"
356
+ },
357
+ "text-to-visual-50": {
358
+ "sets": {
359
+ "desktop": {
360
+ "value": "6px"
361
+ },
362
+ "mobile": {
363
+ "value": "8px"
364
+ }
365
+ }
366
+ },
367
+ "text-to-visual-75": {
368
+ "sets": {
369
+ "desktop": {
370
+ "value": "7px"
371
+ },
372
+ "mobile": {
373
+ "value": "9px"
374
+ }
375
+ }
376
+ },
377
+ "text-to-visual-100": {
378
+ "sets": {
379
+ "desktop": {
356
380
  "value": "8px"
357
381
  },
358
- "200": {
359
- "value": "12px"
382
+ "mobile": {
383
+ "value": "10px"
384
+ }
385
+ }
386
+ },
387
+ "text-to-visual-200": {
388
+ "sets": {
389
+ "desktop": {
390
+ "value": "9px"
391
+ },
392
+ "mobile": {
393
+ "value": "11px"
394
+ }
395
+ }
396
+ },
397
+ "text-to-visual-300": {
398
+ "sets": {
399
+ "desktop": {
400
+ "value": "10px"
401
+ },
402
+ "mobile": {
403
+ "value": "13px"
404
+ }
405
+ }
406
+ },
407
+ "text-to-control-75": {
408
+ "sets": {
409
+ "desktop": {
410
+ "value": "9px"
411
+ },
412
+ "mobile": {
413
+ "value": "11px"
414
+ }
415
+ }
416
+ },
417
+ "text-to-control-100": {
418
+ "sets": {
419
+ "desktop": {
420
+ "value": "10px"
421
+ },
422
+ "mobile": {
423
+ "value": "13px"
424
+ }
425
+ }
426
+ },
427
+ "text-to-control-200": {
428
+ "sets": {
429
+ "desktop": {
430
+ "value": "11px"
431
+ },
432
+ "mobile": {
433
+ "value": "14px"
434
+ }
435
+ }
436
+ },
437
+ "text-to-control-300": {
438
+ "sets": {
439
+ "desktop": {
440
+ "value": "13px"
360
441
  },
361
- "300": {
442
+ "mobile": {
362
443
  "value": "16px"
363
- },
364
- "400": {
444
+ }
445
+ }
446
+ },
447
+ "focus-ring-thickness": {
448
+ "value": "2px"
449
+ },
450
+ "focus-ring-gap": {
451
+ "value": "2px"
452
+ },
453
+ "border-width-100": {
454
+ "sets": {
455
+ "spectrum": {
456
+ "value": "1px"
457
+ },
458
+ "express": {
459
+ "value": "2px"
460
+ }
461
+ }
462
+ },
463
+ "border-width-200": {
464
+ "value": "2px"
465
+ },
466
+ "line-height-100": {
467
+ "value": "1.3"
468
+ },
469
+ "line-height-200": {
470
+ "value": "1.5"
471
+ },
472
+ "line-height-CJK-100": {
473
+ "value": "1.5"
474
+ },
475
+ "line-height-CJK-200": {
476
+ "value": "1.7"
477
+ },
478
+ "component-minimum-width-50": {
479
+ "sets": {
480
+ "desktop": {
481
+ "value": "20px"
482
+ },
483
+ "mobile": {
484
+ "value": "26px"
485
+ }
486
+ }
487
+ },
488
+ "component-minimum-width-75": {
489
+ "sets": {
490
+ "desktop": {
365
491
  "value": "24px"
366
492
  },
367
- "500": {
493
+ "mobile": {
494
+ "value": "30px"
495
+ }
496
+ }
497
+ },
498
+ "component-minimum-width-100": {
499
+ "sets": {
500
+ "desktop": {
368
501
  "value": "32px"
369
502
  },
370
- "600": {
503
+ "mobile": {
504
+ "value": "40px"
505
+ }
506
+ }
507
+ },
508
+ "component-minimum-width-200": {
509
+ "sets": {
510
+ "desktop": {
371
511
  "value": "40px"
372
512
  },
373
- "700": {
513
+ "mobile": {
514
+ "value": "50px"
515
+ }
516
+ }
517
+ },
518
+ "component-minimum-width-300": {
519
+ "sets": {
520
+ "desktop": {
374
521
  "value": "48px"
375
522
  },
376
- "800": {
377
- "value": "64px"
378
- },
379
- "900": {
380
- "value": "80px"
381
- },
382
- "1000": {
383
- "value": "96px"
384
- }
385
- },
386
-
387
- "text-to-visual": {
388
- "50": {
389
- "sets": {
390
- "desktop": {
391
- "value": "6px"
392
- },
393
- "mobile": {
394
- "value": "8px"
395
- }
396
- }
397
- },
398
- "75": {
399
- "sets": {
400
- "desktop": {
401
- "value": "7px"
402
- },
403
- "mobile": {
404
- "value": "9px"
405
- }
406
- }
407
- },
408
- "100": {
409
- "sets": {
410
- "desktop": {
411
- "value": "8px"
412
- },
413
- "mobile": {
414
- "value": "10px"
415
- }
416
- }
417
- },
418
- "200": {
419
- "sets": {
420
- "desktop": {
421
- "value": "9px"
422
- },
423
- "mobile": {
424
- "value": "11px"
425
- }
426
- }
523
+ "mobile": {
524
+ "value": "60px"
525
+ }
526
+ }
527
+ },
528
+ "component-height-50": {
529
+ "sets": {
530
+ "desktop": {
531
+ "value": "20px"
532
+ },
533
+ "mobile": {
534
+ "value": "26px"
535
+ }
536
+ }
537
+ },
538
+ "component-height-75": {
539
+ "sets": {
540
+ "desktop": {
541
+ "value": "24px"
427
542
  },
428
- "300": {
429
- "sets": {
430
- "desktop": {
431
- "value": "10px"
432
- },
433
- "mobile": {
434
- "value": "13px"
435
- }
436
- }
543
+ "mobile": {
544
+ "value": "30px"
437
545
  }
438
- },
439
-
440
- "text-to-control": {
441
- "75": {
442
- "sets": {
443
- "desktop": {
444
- "value": "9px"
445
- },
446
- "mobile": {
447
- "value": "11px"
448
- }
449
- }
546
+ }
547
+ },
548
+ "component-height-100": {
549
+ "sets": {
550
+ "desktop": {
551
+ "value": "32px"
450
552
  },
451
- "100": {
452
- "sets": {
453
- "desktop": {
454
- "value": "10px"
455
- },
456
- "mobile": {
457
- "value": "13px"
458
- }
459
- }
553
+ "mobile": {
554
+ "value": "40px"
555
+ }
556
+ }
557
+ },
558
+ "component-height-200": {
559
+ "sets": {
560
+ "desktop": {
561
+ "value": "40px"
460
562
  },
461
- "200": {
462
- "sets": {
463
- "desktop": {
464
- "value": "11px"
465
- },
466
- "mobile": {
467
- "value": "14px"
468
- }
469
- }
563
+ "mobile": {
564
+ "value": "50px"
565
+ }
566
+ }
567
+ },
568
+ "component-height-300": {
569
+ "sets": {
570
+ "desktop": {
571
+ "value": "48px"
470
572
  },
471
- "300": {
472
- "sets": {
473
- "desktop": {
474
- "value": "13px"
475
- },
476
- "mobile": {
477
- "value": "16px"
478
- }
479
- }
573
+ "mobile": {
574
+ "value": "60px"
480
575
  }
481
- },
482
-
483
- "focus-ring": {
484
- "thickness": {
485
- "value": "2px"
576
+ }
577
+ },
578
+ "component-top-to-workflow-icon-50": {
579
+ "sets": {
580
+ "desktop": {
581
+ "value": "3px"
486
582
  },
487
- "gap": {
488
- "value": "2px"
583
+ "mobile": {
584
+ "value": "4px"
489
585
  }
490
- },
491
-
492
- "border-width": {
493
- "100": {
494
- "sets": {
495
- "spectrum": {
496
- "value": "1px"
497
- },
498
- "express": {
499
- "value": "2px"
500
- }
501
- }
586
+ }
587
+ },
588
+ "component-top-to-workflow-icon-75": {
589
+ "sets": {
590
+ "desktop": {
591
+ "value": "4px"
502
592
  },
503
- "200": {
504
- "value": "2px"
593
+ "mobile": {
594
+ "value": "5px"
505
595
  }
506
- },
507
-
508
- "line-height": {
509
- "100": {
510
- "value": "1.3"
511
- },
512
- "200": {
513
- "value": "1.5"
514
- }
515
- },
516
-
517
- "line-height-CJK": {
518
- "100": {
519
- "value": "1.5"
520
- },
521
- "200": {
522
- "value": "1.7"
523
- }
524
- },
525
-
526
- "component": {
527
- "minimum-width": {
528
- "50": {
529
- "sets": {
530
- "desktop": {
531
- "value": "20px"
532
- },
533
- "mobile": {
534
- "value": "26px"
535
- }
536
- }
537
- },
538
- "75": {
539
- "sets": {
540
- "desktop": {
541
- "value": "24px"
542
- },
543
- "mobile": {
544
- "value": "30px"
545
- }
546
- }
547
- },
548
- "100": {
549
- "sets": {
550
- "desktop": {
551
- "value": "32px"
552
- },
553
- "mobile": {
554
- "value": "40px"
555
- }
556
- }
557
- },
558
- "200": {
559
- "sets": {
560
- "desktop": {
561
- "value": "40px"
562
- },
563
- "mobile": {
564
- "value": "50px"
565
- }
566
- }
567
- },
568
- "300": {
569
- "sets": {
570
- "desktop": {
571
- "value": "48px"
572
- },
573
- "mobile": {
574
- "value": "60px"
575
- }
576
- }
577
- }
596
+ }
597
+ },
598
+ "component-top-to-workflow-icon-100": {
599
+ "sets": {
600
+ "desktop": {
601
+ "value": "7px"
602
+ },
603
+ "mobile": {
604
+ "value": "9px"
605
+ }
606
+ }
607
+ },
608
+ "component-top-to-workflow-icon-200": {
609
+ "sets": {
610
+ "desktop": {
611
+ "value": "10px"
612
+ },
613
+ "mobile": {
614
+ "value": "13px"
615
+ }
616
+ }
617
+ },
618
+ "component-top-to-workflow-icon-300": {
619
+ "sets": {
620
+ "desktop": {
621
+ "value": "13px"
578
622
  },
579
- "height": {
580
- "50": {
581
- "sets": {
582
- "desktop": {
583
- "value": "20px"
584
- },
585
- "mobile": {
586
- "value": "26px"
587
- }
588
- }
589
- },
590
- "75": {
591
- "sets": {
592
- "desktop": {
593
- "value": "24px"
594
- },
595
- "mobile": {
596
- "value": "30px"
597
- }
598
- }
599
- },
600
- "100": {
601
- "sets": {
602
- "desktop": {
603
- "value": "32px"
604
- },
605
- "mobile": {
606
- "value": "40px"
607
- }
608
- }
609
- },
610
- "200": {
611
- "sets": {
612
- "desktop": {
613
- "value": "40px"
614
- },
615
- "mobile": {
616
- "value": "50px"
617
- }
618
- }
619
- },
620
- "300": {
621
- "sets": {
622
- "desktop": {
623
- "value": "48px"
624
- },
625
- "mobile": {
626
- "value": "60px"
627
- }
628
- }
629
- }
623
+ "mobile": {
624
+ "value": "16px"
625
+ }
626
+ }
627
+ },
628
+ "component-top-to-text-50": {
629
+ "sets": {
630
+ "desktop": {
631
+ "value": "3px"
630
632
  },
631
- "top-to-workflow-icon": {
632
- "50": {
633
- "sets": {
634
- "desktop": {
635
- "value": "3px"
636
- },
637
- "mobile": {
638
- "value": "4px"
639
- }
640
- }
641
- },
642
- "75": {
643
- "sets": {
644
- "desktop": {
645
- "value": "4px"
646
- },
647
- "mobile": {
648
- "value": "5px"
649
- }
650
- }
651
- },
652
- "100": {
653
- "sets": {
654
- "desktop": {
655
- "value": "7px"
656
- },
657
- "mobile": {
658
- "value": "9px"
659
- }
660
- }
661
- },
662
- "200": {
663
- "sets": {
664
- "desktop": {
665
- "value": "10px"
666
- },
667
- "mobile": {
668
- "value": "13px"
669
- }
670
- }
671
- },
672
- "300": {
673
- "sets": {
674
- "desktop": {
675
- "value": "13px"
676
- },
677
- "mobile": {
678
- "value": "16px"
679
- }
680
- }
681
- }
633
+ "mobile": {
634
+ "value": "4px"
635
+ }
636
+ }
637
+ },
638
+ "component-top-to-text-75": {
639
+ "sets": {
640
+ "desktop": {
641
+ "value": "4px"
682
642
  },
683
- "top-to-text": {
684
- "50": {
685
- "sets": {
686
- "desktop": {
687
- "value": "3px"
688
- },
689
- "mobile": {
690
- "value": "4px"
691
- }
692
- }
693
- },
694
- "75": {
695
- "sets": {
696
- "desktop": {
697
- "value": "4px"
698
- },
699
- "mobile": {
700
- "value": "4px"
701
- }
702
- }
703
- },
704
- "100": {
705
- "sets": {
706
- "desktop": {
707
- "value": "6px"
708
- },
709
- "mobile": {
710
- "value": "8px"
711
- }
712
- }
713
- },
714
- "200": {
715
- "sets": {
716
- "desktop": {
717
- "value": "9px"
718
- },
719
- "mobile": {
720
- "value": "12px"
721
- }
722
- }
723
- },
724
- "300": {
725
- "sets": {
726
- "desktop": {
727
- "value": "12px"
728
- },
729
- "mobile": {
730
- "value": "15px"
731
- }
732
- }
733
- }
643
+ "mobile": {
644
+ "value": "4px"
645
+ }
646
+ }
647
+ },
648
+ "component-top-to-text-100": {
649
+ "sets": {
650
+ "desktop": {
651
+ "value": "6px"
734
652
  },
735
- "bottom-to-text": {
736
- "50": {
737
- "sets": {
738
- "desktop": {
739
- "value": "3px"
740
- },
741
- "mobile": {
742
- "value": "6px"
743
- }
744
- }
745
- },
746
- "75": {
747
- "sets": {
748
- "desktop": {
749
- "value": "5px"
750
- },
751
- "mobile": {
752
- "value": "7px"
753
- }
754
- }
755
- },
756
- "100": {
757
- "sets": {
758
- "desktop": {
759
- "value": "9px"
760
- },
761
- "mobile": {
762
- "value": "11px"
763
- }
764
- }
765
- },
766
- "200": {
767
- "sets": {
768
- "desktop": {
769
- "value": "11px"
770
- },
771
- "mobile": {
772
- "value": "14px"
773
- }
774
- }
775
- },
776
- "300": {
777
- "sets": {
778
- "desktop": {
779
- "value": "14px"
780
- },
781
- "mobile": {
782
- "value": "18px"
783
- }
784
- }
785
- }
653
+ "mobile": {
654
+ "value": "8px"
786
655
  }
787
- },
788
-
789
- "pill": {
790
- "edge-to-visual": {
791
- "75": {
792
- "sets": {
793
- "desktop": {
794
- "value": "10px"
795
- },
796
- "mobile": {
797
- "value": "13px"
798
- }
799
- }
800
- },
801
- "100": {
802
- "sets": {
803
- "desktop": {
804
- "value": "17px"
805
- },
806
- "mobile": {
807
- "value": "17px"
808
- }
809
- }
810
- },
811
- "200": {
812
- "sets": {
813
- "desktop": {
814
- "value": "18px"
815
- },
816
- "mobile": {
817
- "value": "22px"
818
- }
819
- }
820
- },
821
- "300": {
822
- "sets": {
823
- "desktop": {
824
- "value": "21px"
825
- },
826
- "mobile": {
827
- "value": "27px"
828
- }
829
- }
830
- }
656
+ }
657
+ },
658
+ "component-top-to-text-200": {
659
+ "sets": {
660
+ "desktop": {
661
+ "value": "9px"
831
662
  },
832
- "edge-to-text": {
833
- "75": {
834
- "sets": {
835
- "desktop": {
836
- "value": "12px"
837
- },
838
- "mobile": {
839
- "value": "15px"
840
- }
841
- }
842
- },
843
- "100": {
844
- "sets": {
845
- "desktop": {
846
- "value": "16px"
847
- },
848
- "mobile": {
849
- "value": "20px"
850
- }
851
- }
852
- },
853
- "200": {
854
- "sets": {
855
- "desktop": {
856
- "value": "20px"
857
- },
858
- "mobile": {
859
- "value": "25px"
860
- }
861
- }
862
- },
863
- "300": {
864
- "sets": {
865
- "desktop": {
866
- "value": "24px"
867
- },
868
- "mobile": {
869
- "value": "30px"
870
- }
871
- }
872
- }
663
+ "mobile": {
664
+ "value": "12px"
873
665
  }
874
- },
875
-
876
- "edge-to-visual": {
877
- "50": {
878
- "sets": {
879
- "desktop": {
880
- "value": "6px"
881
- },
882
- "mobile": {
883
- "value": "7px"
884
- }
885
- }
666
+ }
667
+ },
668
+ "component-top-to-text-300": {
669
+ "sets": {
670
+ "desktop": {
671
+ "value": "12px"
886
672
  },
887
- "75": {
888
- "sets": {
889
- "desktop": {
890
- "value": "7px"
891
- },
892
- "mobile": {
893
- "value": "9px"
894
- }
895
- }
673
+ "mobile": {
674
+ "value": "15px"
675
+ }
676
+ }
677
+ },
678
+ "component-bottom-to-text-50": {
679
+ "sets": {
680
+ "desktop": {
681
+ "value": "3px"
682
+ },
683
+ "mobile": {
684
+ "value": "6px"
685
+ }
686
+ }
687
+ },
688
+ "component-bottom-to-text-75": {
689
+ "sets": {
690
+ "desktop": {
691
+ "value": "5px"
692
+ },
693
+ "mobile": {
694
+ "value": "7px"
695
+ }
696
+ }
697
+ },
698
+ "component-bottom-to-text-100": {
699
+ "sets": {
700
+ "desktop": {
701
+ "value": "9px"
702
+ },
703
+ "mobile": {
704
+ "value": "11px"
705
+ }
706
+ }
707
+ },
708
+ "component-bottom-to-text-200": {
709
+ "sets": {
710
+ "desktop": {
711
+ "value": "11px"
712
+ },
713
+ "mobile": {
714
+ "value": "14px"
715
+ }
716
+ }
717
+ },
718
+ "component-bottom-to-text-300": {
719
+ "sets": {
720
+ "desktop": {
721
+ "value": "14px"
722
+ },
723
+ "mobile": {
724
+ "value": "18px"
725
+ }
726
+ }
727
+ },
728
+ "pill-edge-to-visual-75": {
729
+ "sets": {
730
+ "desktop": {
731
+ "value": "10px"
732
+ },
733
+ "mobile": {
734
+ "value": "13px"
735
+ }
736
+ }
737
+ },
738
+ "pill-edge-to-visual-100": {
739
+ "sets": {
740
+ "desktop": {
741
+ "value": "17px"
742
+ },
743
+ "mobile": {
744
+ "value": "17px"
745
+ }
746
+ }
747
+ },
748
+ "pill-edge-to-visual-200": {
749
+ "sets": {
750
+ "desktop": {
751
+ "value": "18px"
752
+ },
753
+ "mobile": {
754
+ "value": "22px"
755
+ }
756
+ }
757
+ },
758
+ "pill-edge-to-visual-300": {
759
+ "sets": {
760
+ "desktop": {
761
+ "value": "21px"
762
+ },
763
+ "mobile": {
764
+ "value": "27px"
765
+ }
766
+ }
767
+ },
768
+ "pill-edge-to-text-75": {
769
+ "sets": {
770
+ "desktop": {
771
+ "value": "12px"
896
772
  },
897
- "100": {
898
- "sets": {
899
- "desktop": {
900
- "value": "10px"
901
- },
902
- "mobile": {
903
- "value": "12px"
904
- }
905
- }
773
+ "mobile": {
774
+ "value": "15px"
775
+ }
776
+ }
777
+ },
778
+ "pill-edge-to-text-100": {
779
+ "sets": {
780
+ "desktop": {
781
+ "value": "16px"
906
782
  },
907
- "200": {
908
- "sets": {
909
- "desktop": {
910
- "value": "13px"
911
- },
912
- "mobile": {
913
- "value": "16px"
914
- }
915
- }
783
+ "mobile": {
784
+ "value": "20px"
785
+ }
786
+ }
787
+ },
788
+ "pill-edge-to-text-200": {
789
+ "sets": {
790
+ "desktop": {
791
+ "value": "20px"
792
+ },
793
+ "mobile": {
794
+ "value": "25px"
795
+ }
796
+ }
797
+ },
798
+ "pill-edge-to-text-300": {
799
+ "sets": {
800
+ "desktop": {
801
+ "value": "24px"
916
802
  },
917
- "300": {
918
- "sets": {
919
- "desktop": {
920
- "value": "15px"
921
- },
922
- "mobile": {
923
- "value": "19px"
924
- }
925
- }
803
+ "mobile": {
804
+ "value": "30px"
926
805
  }
927
- },
928
-
929
- "edge-to-text": {
930
- "50": {
931
- "sets": {
932
- "desktop": {
933
- "value": "8px"
934
- },
935
- "mobile": {
936
- "value": "10px"
937
- }
938
- }
806
+ }
807
+ },
808
+ "edge-to-visual-50": {
809
+ "sets": {
810
+ "desktop": {
811
+ "value": "6px"
812
+ },
813
+ "mobile": {
814
+ "value": "7px"
815
+ }
816
+ }
817
+ },
818
+ "edge-to-visual-75": {
819
+ "sets": {
820
+ "desktop": {
821
+ "value": "7px"
822
+ },
823
+ "mobile": {
824
+ "value": "9px"
825
+ }
826
+ }
827
+ },
828
+ "edge-to-visual-100": {
829
+ "sets": {
830
+ "desktop": {
831
+ "value": "10px"
939
832
  },
940
- "75": {
941
- "sets": {
942
- "desktop": {
943
- "value": "9px"
944
- },
945
- "mobile": {
946
- "value": "11px"
947
- }
948
- }
833
+ "mobile": {
834
+ "value": "12px"
835
+ }
836
+ }
837
+ },
838
+ "edge-to-visual-200": {
839
+ "sets": {
840
+ "desktop": {
841
+ "value": "13px"
949
842
  },
950
- "100": {
951
- "sets": {
952
- "desktop": {
953
- "value": "12px"
954
- },
955
- "mobile": {
956
- "value": "15px"
957
- }
958
- }
843
+ "mobile": {
844
+ "value": "16px"
845
+ }
846
+ }
847
+ },
848
+ "edge-to-visual-300": {
849
+ "sets": {
850
+ "desktop": {
851
+ "value": "15px"
852
+ },
853
+ "mobile": {
854
+ "value": "19px"
855
+ }
856
+ }
857
+ },
858
+ "edge-to-text-50": {
859
+ "sets": {
860
+ "desktop": {
861
+ "value": "8px"
959
862
  },
960
- "200": {
961
- "sets": {
962
- "desktop": {
963
- "value": "15px"
964
- },
965
- "mobile": {
966
- "value": "19px"
967
- }
968
- }
863
+ "mobile": {
864
+ "value": "10px"
865
+ }
866
+ }
867
+ },
868
+ "edge-to-text-75": {
869
+ "sets": {
870
+ "desktop": {
871
+ "value": "9px"
872
+ },
873
+ "mobile": {
874
+ "value": "11px"
875
+ }
876
+ }
877
+ },
878
+ "edge-to-text-100": {
879
+ "sets": {
880
+ "desktop": {
881
+ "value": "12px"
969
882
  },
970
- "300": {
971
- "sets": {
972
- "desktop": {
973
- "value": "18px"
974
- },
975
- "mobile": {
976
- "value": "22px"
977
- }
978
- }
883
+ "mobile": {
884
+ "value": "15px"
885
+ }
886
+ }
887
+ },
888
+ "edge-to-text-200": {
889
+ "sets": {
890
+ "desktop": {
891
+ "value": "15px"
892
+ },
893
+ "mobile": {
894
+ "value": "19px"
895
+ }
896
+ }
897
+ },
898
+ "edge-to-text-300": {
899
+ "sets": {
900
+ "desktop": {
901
+ "value": "18px"
902
+ },
903
+ "mobile": {
904
+ "value": "22px"
979
905
  }
980
906
  }
981
907
  }