@lumx/core 2.0.3 → 2.1.0-alpha-css-test2

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 (37) hide show
  1. package/css/_retro-compat-v2.css +117 -0
  2. package/css/design-tokens.css +768 -92
  3. package/css/material.css +56 -57
  4. package/js/constants/design-tokens.js +3406 -414
  5. package/js/constants/design-tokens.min.js +1 -1
  6. package/js/constants/design-tokens.min.js.map +1 -1
  7. package/js/constants/design-tokens.ts +3386 -394
  8. package/lumx.css +1 -1
  9. package/lumx.min.css +1 -1
  10. package/package.json +2 -2
  11. package/scss/_design-tokens.scss +1670 -224
  12. package/scss/_retro-compat-v2.scss +95 -0
  13. package/scss/components/button/_index.scss +6 -42
  14. package/scss/components/button/_mixins.scss +144 -29
  15. package/scss/components/checkbox/_mixins.scss +9 -9
  16. package/scss/components/chip/_index.scss +2 -2
  17. package/scss/components/chip/_mixins.scss +2 -2
  18. package/scss/components/image-block/_index.scss +4 -5
  19. package/scss/components/input-helper/_mixins.scss +3 -3
  20. package/scss/components/input-label/_mixins.scss +3 -3
  21. package/scss/components/progress/_index.scss +2 -2
  22. package/scss/components/radio-button/_mixins.scss +12 -12
  23. package/scss/components/select/_index.scss +99 -10
  24. package/scss/components/select/_mixins.scss +6 -1
  25. package/scss/components/skeleton/_index.scss +2 -2
  26. package/scss/components/switch/_mixins.scss +15 -15
  27. package/scss/components/tabs/_index.scss +27 -55
  28. package/scss/components/tabs/_mixins.scss +66 -31
  29. package/scss/components/text-field/_index.scss +114 -9
  30. package/scss/components/text-field/_mixins.scss +42 -66
  31. package/scss/components/user-block/_index.scss +2 -9
  32. package/scss/core/base/_variables.scss +1 -0
  33. package/scss/core/state/_mixins.scss +11 -7
  34. package/scss/core/typography/_index.scss +9 -2
  35. package/scss/core/typography/_mixins.scss +13 -4
  36. package/scss/core/typography/_variables.scss +2 -1
  37. package/scss/lumx.scss +4 -0
@@ -1,517 +1,3113 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 06 May 2021 08:43:34 GMT
3
+ * Generated on Thu, 23 Sep 2021 06:47:16 GMT
4
4
  */
5
5
 
6
6
  export const DESIGN_TOKENS = {
7
7
  button: {
8
- 'font-weight': {
8
+ height: {
9
9
  attributes: {
10
10
  category: 'button',
11
- type: 'font-weight',
11
+ type: 'height',
12
12
  },
13
13
  },
14
- 'text-transform': {
14
+ 'border-radius': {
15
15
  attributes: {
16
16
  category: 'button',
17
- type: 'text-transform',
17
+ type: 'border-radius',
18
18
  },
19
19
  },
20
- 'variant-icon-border-radius': {
21
- attributes: {
22
- category: 'button',
23
- type: 'variant-icon-border-radius',
20
+ 'emphasis-high': {
21
+ 'state-default': {
22
+ padding: {
23
+ horizontal: {
24
+ attributes: {
25
+ category: 'button',
26
+ type: 'emphasis-high',
27
+ item: 'state-default',
28
+ },
29
+ },
30
+ },
31
+ 'border-width': {
32
+ attributes: {
33
+ category: 'button',
34
+ type: 'emphasis-high',
35
+ item: 'state-default',
36
+ },
37
+ },
38
+ 'theme-light': {
39
+ 'background-color': {
40
+ attributes: {
41
+ category: 'button',
42
+ type: 'emphasis-high',
43
+ item: 'state-default',
44
+ },
45
+ },
46
+ color: {
47
+ version: '0.22',
48
+ comment: 'Neutral light color',
49
+ attributes: {
50
+ category: 'button',
51
+ type: 'emphasis-high',
52
+ item: 'state-default',
53
+ },
54
+ },
55
+ 'border-color': {
56
+ attributes: {
57
+ category: 'button',
58
+ type: 'emphasis-high',
59
+ item: 'state-default',
60
+ },
61
+ },
62
+ },
63
+ 'theme-dark': {
64
+ 'background-color': {
65
+ version: '0.22',
66
+ comment: 'Neutral light color',
67
+ attributes: {
68
+ category: 'button',
69
+ type: 'emphasis-high',
70
+ item: 'state-default',
71
+ },
72
+ },
73
+ color: {
74
+ attributes: {
75
+ category: 'button',
76
+ type: 'emphasis-high',
77
+ item: 'state-default',
78
+ },
79
+ },
80
+ 'border-color': {
81
+ attributes: {
82
+ category: 'button',
83
+ type: 'emphasis-high',
84
+ item: 'state-default',
85
+ },
86
+ },
87
+ },
24
88
  },
25
- },
26
- 'size-m-font-size': {
27
- attributes: {
28
- category: 'button',
29
- type: 'size-m-font-size',
89
+ 'state-hover': {
90
+ padding: {
91
+ horizontal: {
92
+ attributes: {
93
+ category: 'button',
94
+ type: 'emphasis-high',
95
+ item: 'state-hover',
96
+ },
97
+ },
98
+ },
99
+ 'border-width': {
100
+ attributes: {
101
+ category: 'button',
102
+ type: 'emphasis-high',
103
+ item: 'state-hover',
104
+ },
105
+ },
106
+ 'theme-light': {
107
+ 'background-color': {
108
+ attributes: {
109
+ category: 'button',
110
+ type: 'emphasis-high',
111
+ item: 'state-hover',
112
+ },
113
+ },
114
+ color: {
115
+ version: '0.22',
116
+ comment: 'Neutral light color',
117
+ attributes: {
118
+ category: 'button',
119
+ type: 'emphasis-high',
120
+ item: 'state-hover',
121
+ },
122
+ },
123
+ 'border-color': {
124
+ attributes: {
125
+ category: 'button',
126
+ type: 'emphasis-high',
127
+ item: 'state-hover',
128
+ },
129
+ },
130
+ },
131
+ 'theme-dark': {
132
+ 'background-color': {
133
+ version: '0.22',
134
+ comment: 'Base light color with 90% opacity',
135
+ attributes: {
136
+ category: 'button',
137
+ type: 'emphasis-high',
138
+ item: 'state-hover',
139
+ },
140
+ },
141
+ color: {
142
+ attributes: {
143
+ category: 'button',
144
+ type: 'emphasis-high',
145
+ item: 'state-hover',
146
+ },
147
+ },
148
+ 'border-color': {
149
+ attributes: {
150
+ category: 'button',
151
+ type: 'emphasis-high',
152
+ item: 'state-hover',
153
+ },
154
+ },
155
+ },
156
+ },
157
+ 'state-active': {
158
+ padding: {
159
+ horizontal: {
160
+ attributes: {
161
+ category: 'button',
162
+ type: 'emphasis-high',
163
+ item: 'state-active',
164
+ },
165
+ },
166
+ },
167
+ 'border-width': {
168
+ attributes: {
169
+ category: 'button',
170
+ type: 'emphasis-high',
171
+ item: 'state-active',
172
+ },
173
+ },
174
+ 'theme-light': {
175
+ 'background-color': {
176
+ attributes: {
177
+ category: 'button',
178
+ type: 'emphasis-high',
179
+ item: 'state-active',
180
+ },
181
+ },
182
+ color: {
183
+ version: '0.22',
184
+ comment: 'Neutral light color',
185
+ attributes: {
186
+ category: 'button',
187
+ type: 'emphasis-high',
188
+ item: 'state-active',
189
+ },
190
+ },
191
+ 'border-color': {
192
+ attributes: {
193
+ category: 'button',
194
+ type: 'emphasis-high',
195
+ item: 'state-active',
196
+ },
197
+ },
198
+ },
199
+ 'theme-dark': {
200
+ 'background-color': {
201
+ version: '0.22',
202
+ comment: 'Base light color with 80% opacity',
203
+ attributes: {
204
+ category: 'button',
205
+ type: 'emphasis-high',
206
+ item: 'state-active',
207
+ },
208
+ },
209
+ color: {
210
+ attributes: {
211
+ category: 'button',
212
+ type: 'emphasis-high',
213
+ item: 'state-active',
214
+ },
215
+ },
216
+ 'border-color': {
217
+ attributes: {
218
+ category: 'button',
219
+ type: 'emphasis-high',
220
+ item: 'state-active',
221
+ },
222
+ },
223
+ },
30
224
  },
31
225
  },
32
- 'size-s-font-size': {
33
- attributes: {
34
- category: 'button',
35
- type: 'size-s-font-size',
226
+ 'emphasis-medium': {
227
+ 'state-default': {
228
+ padding: {
229
+ horizontal: {
230
+ attributes: {
231
+ category: 'button',
232
+ type: 'emphasis-medium',
233
+ item: 'state-default',
234
+ },
235
+ },
236
+ },
237
+ 'border-width': {
238
+ attributes: {
239
+ category: 'button',
240
+ type: 'emphasis-medium',
241
+ item: 'state-default',
242
+ },
243
+ },
244
+ 'theme-light': {
245
+ 'background-color': {
246
+ version: '0.22',
247
+ comment: 'Base dark color with 12% opacity',
248
+ attributes: {
249
+ category: 'button',
250
+ type: 'emphasis-medium',
251
+ item: 'state-default',
252
+ },
253
+ },
254
+ color: {
255
+ version: '0.22',
256
+ comment: 'Neutral dark color',
257
+ attributes: {
258
+ category: 'button',
259
+ type: 'emphasis-medium',
260
+ item: 'state-default',
261
+ },
262
+ },
263
+ 'border-color': {
264
+ attributes: {
265
+ category: 'button',
266
+ type: 'emphasis-medium',
267
+ item: 'state-default',
268
+ },
269
+ },
270
+ },
271
+ 'theme-dark': {
272
+ 'background-color': {
273
+ version: '0.22',
274
+ comment: 'Base light color with 20% opacity',
275
+ attributes: {
276
+ category: 'button',
277
+ type: 'emphasis-medium',
278
+ item: 'state-default',
279
+ },
280
+ },
281
+ color: {
282
+ version: '0.22',
283
+ comment: 'Neutral light color',
284
+ attributes: {
285
+ category: 'button',
286
+ type: 'emphasis-medium',
287
+ item: 'state-default',
288
+ },
289
+ },
290
+ 'border-color': {
291
+ attributes: {
292
+ category: 'button',
293
+ type: 'emphasis-medium',
294
+ item: 'state-default',
295
+ },
296
+ },
297
+ },
298
+ },
299
+ 'state-hover': {
300
+ padding: {
301
+ horizontal: {
302
+ attributes: {
303
+ category: 'button',
304
+ type: 'emphasis-medium',
305
+ item: 'state-hover',
306
+ },
307
+ },
308
+ },
309
+ 'border-width': {
310
+ attributes: {
311
+ category: 'button',
312
+ type: 'emphasis-medium',
313
+ item: 'state-hover',
314
+ },
315
+ },
316
+ 'theme-light': {
317
+ 'background-color': {
318
+ version: '0.22',
319
+ comment: 'Base dark color with 20% opacity',
320
+ attributes: {
321
+ category: 'button',
322
+ type: 'emphasis-medium',
323
+ item: 'state-hover',
324
+ },
325
+ },
326
+ color: {
327
+ version: '0.22',
328
+ comment: 'Neutral dark color',
329
+ attributes: {
330
+ category: 'button',
331
+ type: 'emphasis-medium',
332
+ item: 'state-hover',
333
+ },
334
+ },
335
+ 'border-color': {
336
+ attributes: {
337
+ category: 'button',
338
+ type: 'emphasis-medium',
339
+ item: 'state-hover',
340
+ },
341
+ },
342
+ },
343
+ 'theme-dark': {
344
+ 'background-color': {
345
+ version: '0.22',
346
+ comment: 'Base light color with 40% opacity',
347
+ attributes: {
348
+ category: 'button',
349
+ type: 'emphasis-medium',
350
+ item: 'state-hover',
351
+ },
352
+ },
353
+ color: {
354
+ version: '0.22',
355
+ comment: 'Neutral light color',
356
+ attributes: {
357
+ category: 'button',
358
+ type: 'emphasis-medium',
359
+ item: 'state-hover',
360
+ },
361
+ },
362
+ 'border-color': {
363
+ attributes: {
364
+ category: 'button',
365
+ type: 'emphasis-medium',
366
+ item: 'state-hover',
367
+ },
368
+ },
369
+ },
370
+ },
371
+ 'state-active': {
372
+ padding: {
373
+ horizontal: {
374
+ attributes: {
375
+ category: 'button',
376
+ type: 'emphasis-medium',
377
+ item: 'state-active',
378
+ },
379
+ },
380
+ },
381
+ 'border-width': {
382
+ attributes: {
383
+ category: 'button',
384
+ type: 'emphasis-medium',
385
+ item: 'state-active',
386
+ },
387
+ },
388
+ 'theme-light': {
389
+ 'background-color': {
390
+ version: '0.22',
391
+ comment: 'Base dark color with 38% opacity',
392
+ attributes: {
393
+ category: 'button',
394
+ type: 'emphasis-medium',
395
+ item: 'state-active',
396
+ },
397
+ },
398
+ color: {
399
+ version: '0.22',
400
+ comment: 'Neutral dark color',
401
+ attributes: {
402
+ category: 'button',
403
+ type: 'emphasis-medium',
404
+ item: 'state-active',
405
+ },
406
+ },
407
+ 'border-color': {
408
+ attributes: {
409
+ category: 'button',
410
+ type: 'emphasis-medium',
411
+ item: 'state-active',
412
+ },
413
+ },
414
+ },
415
+ 'theme-dark': {
416
+ 'background-color': {
417
+ version: '0.22',
418
+ comment: 'Base light color with 60% opacity',
419
+ attributes: {
420
+ category: 'button',
421
+ type: 'emphasis-medium',
422
+ item: 'state-active',
423
+ },
424
+ },
425
+ color: {
426
+ version: '0.22',
427
+ comment: 'Neutral light color',
428
+ attributes: {
429
+ category: 'button',
430
+ type: 'emphasis-medium',
431
+ item: 'state-active',
432
+ },
433
+ },
434
+ 'border-color': {
435
+ attributes: {
436
+ category: 'button',
437
+ type: 'emphasis-medium',
438
+ item: 'state-active',
439
+ },
440
+ },
441
+ },
36
442
  },
37
443
  },
38
- },
39
- checkbox: {
40
- 'wrapper-size': {
41
- attributes: {
42
- category: 'checkbox',
43
- type: 'wrapper-size',
444
+ 'emphasis-low': {
445
+ 'state-default': {
446
+ padding: {
447
+ horizontal: {
448
+ attributes: {
449
+ category: 'button',
450
+ type: 'emphasis-low',
451
+ item: 'state-default',
452
+ },
453
+ },
454
+ },
455
+ 'border-width': {
456
+ attributes: {
457
+ category: 'button',
458
+ type: 'emphasis-low',
459
+ item: 'state-default',
460
+ },
461
+ },
462
+ 'theme-light': {
463
+ 'background-color': {
464
+ attributes: {
465
+ category: 'button',
466
+ type: 'emphasis-low',
467
+ item: 'state-default',
468
+ },
469
+ },
470
+ color: {
471
+ version: '0.22',
472
+ comment: 'Neutral dark color',
473
+ attributes: {
474
+ category: 'button',
475
+ type: 'emphasis-low',
476
+ item: 'state-default',
477
+ },
478
+ },
479
+ 'border-color': {
480
+ attributes: {
481
+ category: 'button',
482
+ type: 'emphasis-low',
483
+ item: 'state-default',
484
+ },
485
+ },
486
+ },
487
+ 'theme-dark': {
488
+ 'background-color': {
489
+ attributes: {
490
+ category: 'button',
491
+ type: 'emphasis-low',
492
+ item: 'state-default',
493
+ },
494
+ },
495
+ color: {
496
+ version: '0.22',
497
+ comment: 'Neutral light color',
498
+ attributes: {
499
+ category: 'button',
500
+ type: 'emphasis-low',
501
+ item: 'state-default',
502
+ },
503
+ },
504
+ 'border-color': {
505
+ attributes: {
506
+ category: 'button',
507
+ type: 'emphasis-low',
508
+ item: 'state-default',
509
+ },
510
+ },
511
+ },
512
+ },
513
+ 'state-hover': {
514
+ padding: {
515
+ horizontal: {
516
+ attributes: {
517
+ category: 'button',
518
+ type: 'emphasis-low',
519
+ item: 'state-hover',
520
+ },
521
+ },
522
+ },
523
+ 'border-width': {
524
+ attributes: {
525
+ category: 'button',
526
+ type: 'emphasis-low',
527
+ item: 'state-hover',
528
+ },
529
+ },
530
+ 'theme-light': {
531
+ 'background-color': {
532
+ version: '0.22',
533
+ comment: 'Base dark color with 12% opacity',
534
+ attributes: {
535
+ category: 'button',
536
+ type: 'emphasis-low',
537
+ item: 'state-hover',
538
+ },
539
+ },
540
+ color: {
541
+ version: '0.22',
542
+ comment: 'Neutral dark color',
543
+ attributes: {
544
+ category: 'button',
545
+ type: 'emphasis-low',
546
+ item: 'state-hover',
547
+ },
548
+ },
549
+ 'border-color': {
550
+ attributes: {
551
+ category: 'button',
552
+ type: 'emphasis-low',
553
+ item: 'state-hover',
554
+ },
555
+ },
556
+ },
557
+ 'theme-dark': {
558
+ 'background-color': {
559
+ version: '0.22',
560
+ comment: 'Base light color with 20% opacity',
561
+ attributes: {
562
+ category: 'button',
563
+ type: 'emphasis-low',
564
+ item: 'state-hover',
565
+ },
566
+ },
567
+ color: {
568
+ version: '0.22',
569
+ comment: 'Neutral light color',
570
+ attributes: {
571
+ category: 'button',
572
+ type: 'emphasis-low',
573
+ item: 'state-hover',
574
+ },
575
+ },
576
+ 'border-color': {
577
+ attributes: {
578
+ category: 'button',
579
+ type: 'emphasis-low',
580
+ item: 'state-hover',
581
+ },
582
+ },
583
+ },
584
+ },
585
+ 'state-active': {
586
+ padding: {
587
+ horizontal: {
588
+ attributes: {
589
+ category: 'button',
590
+ type: 'emphasis-low',
591
+ item: 'state-active',
592
+ },
593
+ },
594
+ },
595
+ 'border-width': {
596
+ attributes: {
597
+ category: 'button',
598
+ type: 'emphasis-low',
599
+ item: 'state-active',
600
+ },
601
+ },
602
+ 'theme-light': {
603
+ 'background-color': {
604
+ version: '0.22',
605
+ comment: 'Base dark color with 20% opacity',
606
+ attributes: {
607
+ category: 'button',
608
+ type: 'emphasis-low',
609
+ item: 'state-active',
610
+ },
611
+ },
612
+ color: {
613
+ version: '0.22',
614
+ comment: 'Neutral dark color',
615
+ attributes: {
616
+ category: 'button',
617
+ type: 'emphasis-low',
618
+ item: 'state-active',
619
+ },
620
+ },
621
+ 'border-color': {
622
+ attributes: {
623
+ category: 'button',
624
+ type: 'emphasis-low',
625
+ item: 'state-active',
626
+ },
627
+ },
628
+ },
629
+ 'theme-dark': {
630
+ 'background-color': {
631
+ version: '0.22',
632
+ comment: 'Base light color with 40% opacity',
633
+ attributes: {
634
+ category: 'button',
635
+ type: 'emphasis-low',
636
+ item: 'state-active',
637
+ },
638
+ },
639
+ color: {
640
+ version: '0.22',
641
+ comment: 'Neutral light color',
642
+ attributes: {
643
+ category: 'button',
644
+ type: 'emphasis-low',
645
+ item: 'state-active',
646
+ },
647
+ },
648
+ 'border-color': {
649
+ attributes: {
650
+ category: 'button',
651
+ type: 'emphasis-low',
652
+ item: 'state-active',
653
+ },
654
+ },
655
+ },
44
656
  },
45
657
  },
46
- 'control-size': {
47
- attributes: {
48
- category: 'checkbox',
49
- type: 'control-size',
658
+ 'emphasis-selected': {
659
+ 'state-default': {
660
+ padding: {
661
+ horizontal: {
662
+ attributes: {
663
+ category: 'button',
664
+ type: 'emphasis-selected',
665
+ item: 'state-default',
666
+ },
667
+ },
668
+ },
669
+ 'border-width': {
670
+ attributes: {
671
+ category: 'button',
672
+ type: 'emphasis-selected',
673
+ item: 'state-default',
674
+ },
675
+ },
676
+ 'theme-light': {
677
+ 'background-color': {
678
+ attributes: {
679
+ category: 'button',
680
+ type: 'emphasis-selected',
681
+ item: 'state-default',
682
+ },
683
+ },
684
+ color: {
685
+ attributes: {
686
+ category: 'button',
687
+ type: 'emphasis-selected',
688
+ item: 'state-default',
689
+ },
690
+ },
691
+ 'border-color': {
692
+ attributes: {
693
+ category: 'button',
694
+ type: 'emphasis-selected',
695
+ item: 'state-default',
696
+ },
697
+ },
698
+ },
699
+ 'theme-dark': {
700
+ 'background-color': {
701
+ version: '0.22',
702
+ comment: 'Base light color with 60% opacity',
703
+ attributes: {
704
+ category: 'button',
705
+ type: 'emphasis-selected',
706
+ item: 'state-default',
707
+ },
708
+ },
709
+ color: {
710
+ version: '0.22',
711
+ comment: 'Neutral light color',
712
+ attributes: {
713
+ category: 'button',
714
+ type: 'emphasis-selected',
715
+ item: 'state-default',
716
+ },
717
+ },
718
+ 'border-color': {
719
+ attributes: {
720
+ category: 'button',
721
+ type: 'emphasis-selected',
722
+ item: 'state-default',
723
+ },
724
+ },
725
+ },
726
+ },
727
+ 'state-hover': {
728
+ padding: {
729
+ horizontal: {
730
+ attributes: {
731
+ category: 'button',
732
+ type: 'emphasis-selected',
733
+ item: 'state-hover',
734
+ },
735
+ },
736
+ },
737
+ 'border-width': {
738
+ attributes: {
739
+ category: 'button',
740
+ type: 'emphasis-selected',
741
+ item: 'state-hover',
742
+ },
743
+ },
744
+ 'theme-light': {
745
+ 'background-color': {
746
+ attributes: {
747
+ category: 'button',
748
+ type: 'emphasis-selected',
749
+ item: 'state-hover',
750
+ },
751
+ },
752
+ color: {
753
+ attributes: {
754
+ category: 'button',
755
+ type: 'emphasis-selected',
756
+ item: 'state-hover',
757
+ },
758
+ },
759
+ 'border-color': {
760
+ attributes: {
761
+ category: 'button',
762
+ type: 'emphasis-selected',
763
+ item: 'state-hover',
764
+ },
765
+ },
766
+ },
767
+ 'theme-dark': {
768
+ 'background-color': {
769
+ version: '0.22',
770
+ comment: 'Base light color with 40% opacity',
771
+ attributes: {
772
+ category: 'button',
773
+ type: 'emphasis-selected',
774
+ item: 'state-hover',
775
+ },
776
+ },
777
+ color: {
778
+ version: '0.22',
779
+ comment: 'Neutral light color',
780
+ attributes: {
781
+ category: 'button',
782
+ type: 'emphasis-selected',
783
+ item: 'state-hover',
784
+ },
785
+ },
786
+ 'border-color': {
787
+ attributes: {
788
+ category: 'button',
789
+ type: 'emphasis-selected',
790
+ item: 'state-hover',
791
+ },
792
+ },
793
+ },
794
+ },
795
+ 'state-active': {
796
+ padding: {
797
+ horizontal: {
798
+ attributes: {
799
+ category: 'button',
800
+ type: 'emphasis-selected',
801
+ item: 'state-active',
802
+ },
803
+ },
804
+ },
805
+ 'border-width': {
806
+ attributes: {
807
+ category: 'button',
808
+ type: 'emphasis-selected',
809
+ item: 'state-active',
810
+ },
811
+ },
812
+ 'theme-light': {
813
+ 'background-color': {
814
+ attributes: {
815
+ category: 'button',
816
+ type: 'emphasis-selected',
817
+ item: 'state-active',
818
+ },
819
+ },
820
+ color: {
821
+ attributes: {
822
+ category: 'button',
823
+ type: 'emphasis-selected',
824
+ item: 'state-active',
825
+ },
826
+ },
827
+ 'border-color': {
828
+ attributes: {
829
+ category: 'button',
830
+ type: 'emphasis-selected',
831
+ item: 'state-active',
832
+ },
833
+ },
834
+ },
835
+ 'theme-dark': {
836
+ 'background-color': {
837
+ version: '0.22',
838
+ comment: 'Base light color with 20% opacity',
839
+ attributes: {
840
+ category: 'button',
841
+ type: 'emphasis-selected',
842
+ item: 'state-active',
843
+ },
844
+ },
845
+ color: {
846
+ version: '0.22',
847
+ comment: 'Neutral light color',
848
+ attributes: {
849
+ category: 'button',
850
+ type: 'emphasis-selected',
851
+ item: 'state-active',
852
+ },
853
+ },
854
+ 'border-color': {
855
+ attributes: {
856
+ category: 'button',
857
+ type: 'emphasis-selected',
858
+ item: 'state-active',
859
+ },
860
+ },
861
+ },
50
862
  },
51
863
  },
52
864
  },
53
- chip: {
54
- 'size-m': {
55
- height: {
865
+ material: {
866
+ button: {
867
+ 'text-transform': {
56
868
  attributes: {
57
- category: 'chip',
58
- type: 'size-m',
59
- item: 'height',
869
+ category: 'material',
870
+ type: 'button',
871
+ item: 'text-transform',
60
872
  },
61
873
  },
62
- 'border-radius': {
874
+ },
875
+ checkbox: {
876
+ 'wrapper-size': {
63
877
  attributes: {
64
- category: 'chip',
65
- type: 'size-m',
66
- item: 'border-radius',
878
+ category: 'material',
879
+ type: 'checkbox',
880
+ item: 'wrapper-size',
67
881
  },
68
882
  },
69
- 'padding-vertical': {
883
+ 'control-size': {
70
884
  attributes: {
71
- category: 'chip',
72
- type: 'size-m',
73
- item: 'padding-vertical',
885
+ category: 'material',
886
+ type: 'checkbox',
887
+ item: 'control-size',
74
888
  },
75
889
  },
76
890
  },
77
- 'size-s': {
78
- height: {
891
+ chip: {
892
+ 'size-m': {
893
+ height: {
894
+ attributes: {
895
+ category: 'material',
896
+ type: 'chip',
897
+ item: 'size-m',
898
+ },
899
+ },
900
+ 'border-radius': {
901
+ attributes: {
902
+ category: 'material',
903
+ type: 'chip',
904
+ item: 'size-m',
905
+ },
906
+ },
907
+ 'padding-vertical': {
908
+ attributes: {
909
+ category: 'material',
910
+ type: 'chip',
911
+ item: 'size-m',
912
+ },
913
+ },
914
+ },
915
+ 'size-s': {
916
+ height: {
917
+ attributes: {
918
+ category: 'material',
919
+ type: 'chip',
920
+ item: 'size-s',
921
+ },
922
+ },
923
+ 'border-radius': {
924
+ attributes: {
925
+ category: 'material',
926
+ type: 'chip',
927
+ item: 'size-s',
928
+ },
929
+ },
930
+ 'padding-vertical': {
931
+ attributes: {
932
+ category: 'material',
933
+ type: 'chip',
934
+ item: 'size-s',
935
+ },
936
+ },
937
+ },
938
+ },
939
+ 'input-helper': {
940
+ 'font-size': {
79
941
  attributes: {
80
- category: 'chip',
81
- type: 'size-s',
82
- item: 'height',
942
+ category: 'material',
943
+ type: 'input-helper',
944
+ item: 'font-size',
83
945
  },
84
946
  },
85
- 'border-radius': {
947
+ 'font-weight': {
86
948
  attributes: {
87
- category: 'chip',
88
- type: 'size-s',
89
- item: 'border-radius',
949
+ category: 'material',
950
+ type: 'input-helper',
951
+ item: 'font-weight',
90
952
  },
91
953
  },
92
- 'padding-vertical': {
954
+ 'line-height': {
93
955
  attributes: {
94
- category: 'chip',
95
- type: 'size-s',
96
- item: 'padding-vertical',
956
+ category: 'material',
957
+ type: 'input-helper',
958
+ item: 'line-height',
97
959
  },
98
960
  },
99
961
  },
100
- },
101
- 'input-helper': {
102
- 'font-size': {
103
- attributes: {
104
- category: 'input-helper',
105
- type: 'font-size',
962
+ 'input-label': {
963
+ 'font-size': {
964
+ attributes: {
965
+ category: 'material',
966
+ type: 'input-label',
967
+ item: 'font-size',
968
+ },
969
+ },
970
+ 'font-weight': {
971
+ attributes: {
972
+ category: 'material',
973
+ type: 'input-label',
974
+ item: 'font-weight',
975
+ },
976
+ },
977
+ 'line-height': {
978
+ attributes: {
979
+ category: 'material',
980
+ type: 'input-label',
981
+ item: 'line-height',
982
+ },
106
983
  },
107
984
  },
108
- 'font-weight': {
109
- attributes: {
110
- category: 'input-helper',
111
- type: 'font-weight',
985
+ progress: {
986
+ bounce: {
987
+ attributes: {
988
+ category: 'material',
989
+ type: 'progress',
990
+ item: 'bounce',
991
+ },
992
+ },
993
+ rotate: {
994
+ attributes: {
995
+ category: 'material',
996
+ type: 'progress',
997
+ item: 'rotate',
998
+ },
112
999
  },
113
1000
  },
114
- 'line-height': {
115
- attributes: {
116
- category: 'input-helper',
117
- type: 'line-height',
1001
+ 'radio-button': {
1002
+ 'wrapper-size': {
1003
+ attributes: {
1004
+ category: 'material',
1005
+ type: 'radio-button',
1006
+ item: 'wrapper-size',
1007
+ },
1008
+ },
1009
+ 'control-size': {
1010
+ attributes: {
1011
+ category: 'material',
1012
+ type: 'radio-button',
1013
+ item: 'control-size',
1014
+ },
1015
+ },
1016
+ 'indicator-size': {
1017
+ attributes: {
1018
+ category: 'material',
1019
+ type: 'radio-button',
1020
+ item: 'indicator-size',
1021
+ },
118
1022
  },
119
1023
  },
120
- },
121
- 'input-label': {
122
- 'font-size': {
123
- attributes: {
124
- category: 'input-label',
125
- type: 'font-size',
1024
+ switch: {
1025
+ wrapper: {
1026
+ width: {
1027
+ attributes: {
1028
+ category: 'material',
1029
+ type: 'switch',
1030
+ item: 'wrapper',
1031
+ },
1032
+ },
1033
+ height: {
1034
+ attributes: {
1035
+ category: 'material',
1036
+ type: 'switch',
1037
+ item: 'wrapper',
1038
+ },
1039
+ },
126
1040
  },
127
- },
128
- 'font-weight': {
129
- attributes: {
130
- category: 'input-label',
131
- type: 'font-weight',
1041
+ control: {
1042
+ width: {
1043
+ attributes: {
1044
+ category: 'material',
1045
+ type: 'switch',
1046
+ item: 'control',
1047
+ },
1048
+ },
1049
+ height: {
1050
+ attributes: {
1051
+ category: 'material',
1052
+ type: 'switch',
1053
+ item: 'control',
1054
+ },
1055
+ },
132
1056
  },
133
- },
134
- 'line-height': {
135
- attributes: {
136
- category: 'input-label',
137
- type: 'line-height',
1057
+ indicator: {
1058
+ size: {
1059
+ attributes: {
1060
+ category: 'material',
1061
+ type: 'switch',
1062
+ item: 'indicator',
1063
+ },
1064
+ },
1065
+ offset: {
1066
+ attributes: {
1067
+ category: 'material',
1068
+ type: 'switch',
1069
+ item: 'indicator',
1070
+ },
1071
+ },
138
1072
  },
139
1073
  },
140
- },
141
- 'radio-button': {
142
- 'wrapper-size': {
143
- attributes: {
144
- category: 'radio-button',
145
- type: 'wrapper-size',
1074
+ 'text-field': {
1075
+ padding: {
1076
+ top: {
1077
+ attributes: {
1078
+ category: 'material',
1079
+ type: 'text-field',
1080
+ item: 'padding',
1081
+ },
1082
+ },
1083
+ bottom: {
1084
+ attributes: {
1085
+ category: 'material',
1086
+ type: 'text-field',
1087
+ item: 'padding',
1088
+ },
1089
+ },
146
1090
  },
147
- },
148
- 'control-size': {
149
- attributes: {
150
- category: 'radio-button',
151
- type: 'control-size',
1091
+ header: {
1092
+ wrapper: {
1093
+ 'margin-bottom': {
1094
+ attributes: {
1095
+ category: 'material',
1096
+ type: 'text-field',
1097
+ item: 'header',
1098
+ },
1099
+ },
1100
+ },
1101
+ label: {
1102
+ 'font-size': {
1103
+ attributes: {
1104
+ category: 'material',
1105
+ type: 'text-field',
1106
+ item: 'header',
1107
+ },
1108
+ },
1109
+ 'font-weight': {
1110
+ attributes: {
1111
+ category: 'material',
1112
+ type: 'text-field',
1113
+ item: 'header',
1114
+ },
1115
+ },
1116
+ 'line-height': {
1117
+ attributes: {
1118
+ category: 'material',
1119
+ type: 'text-field',
1120
+ item: 'header',
1121
+ },
1122
+ },
1123
+ },
152
1124
  },
153
- },
154
- 'indicator-size': {
155
- attributes: {
156
- category: 'radio-button',
157
- type: 'indicator-size',
1125
+ input: {
1126
+ content: {
1127
+ 'font-size': {
1128
+ attributes: {
1129
+ category: 'material',
1130
+ type: 'text-field',
1131
+ item: 'input',
1132
+ },
1133
+ },
1134
+ 'font-weight': {
1135
+ attributes: {
1136
+ category: 'material',
1137
+ type: 'text-field',
1138
+ item: 'input',
1139
+ },
1140
+ },
1141
+ 'line-height': {
1142
+ attributes: {
1143
+ category: 'material',
1144
+ type: 'text-field',
1145
+ item: 'input',
1146
+ },
1147
+ },
1148
+ },
158
1149
  },
159
1150
  },
160
1151
  },
161
- switch: {
162
- wrapper: {
163
- width: {
164
- attributes: {
165
- category: 'switch',
166
- type: 'wrapper',
167
- item: 'width',
1152
+ navigation: {
1153
+ item: {
1154
+ padding: {
1155
+ horizontal: {
1156
+ attributes: {
1157
+ category: 'navigation',
1158
+ type: 'item',
1159
+ item: 'padding',
1160
+ },
168
1161
  },
169
1162
  },
170
- height: {
1163
+ 'min-height': {
171
1164
  attributes: {
172
- category: 'switch',
173
- type: 'wrapper',
174
- item: 'height',
1165
+ category: 'navigation',
1166
+ type: 'item',
1167
+ item: 'min-height',
175
1168
  },
176
1169
  },
177
- },
178
- control: {
179
- width: {
1170
+ 'border-radius': {
180
1171
  attributes: {
181
- category: 'switch',
182
- type: 'control',
183
- item: 'width',
1172
+ category: 'navigation',
1173
+ type: 'item',
1174
+ item: 'border-radius',
184
1175
  },
185
1176
  },
186
- height: {
187
- attributes: {
188
- category: 'switch',
189
- type: 'control',
190
- item: 'height',
1177
+ 'emphasis-low': {
1178
+ 'state-default': {
1179
+ border: {
1180
+ top: {
1181
+ width: {
1182
+ attributes: {
1183
+ category: 'navigation',
1184
+ type: 'item',
1185
+ item: 'emphasis-low',
1186
+ },
1187
+ },
1188
+ },
1189
+ right: {
1190
+ width: {
1191
+ attributes: {
1192
+ category: 'navigation',
1193
+ type: 'item',
1194
+ item: 'emphasis-low',
1195
+ },
1196
+ },
1197
+ },
1198
+ bottom: {
1199
+ width: {
1200
+ attributes: {
1201
+ category: 'navigation',
1202
+ type: 'item',
1203
+ item: 'emphasis-low',
1204
+ },
1205
+ },
1206
+ },
1207
+ left: {
1208
+ width: {
1209
+ attributes: {
1210
+ category: 'navigation',
1211
+ type: 'item',
1212
+ item: 'emphasis-low',
1213
+ },
1214
+ },
1215
+ },
1216
+ },
1217
+ 'theme-light': {
1218
+ 'background-color': {
1219
+ attributes: {
1220
+ category: 'navigation',
1221
+ type: 'item',
1222
+ item: 'emphasis-low',
1223
+ },
1224
+ },
1225
+ 'border-color': {
1226
+ version: '0.22',
1227
+ comment: 'Base dark color with 12% opacity',
1228
+ attributes: {
1229
+ category: 'navigation',
1230
+ type: 'item',
1231
+ item: 'emphasis-low',
1232
+ },
1233
+ },
1234
+ 'icon-color': {
1235
+ version: '0.22',
1236
+ comment: 'Neutral dark color',
1237
+ attributes: {
1238
+ category: 'navigation',
1239
+ type: 'item',
1240
+ item: 'emphasis-low',
1241
+ },
1242
+ },
1243
+ 'label-color': {
1244
+ version: '0.22',
1245
+ comment: 'Neutral dark color',
1246
+ attributes: {
1247
+ category: 'navigation',
1248
+ type: 'item',
1249
+ item: 'emphasis-low',
1250
+ },
1251
+ },
1252
+ 'chevron-background-color': {
1253
+ attributes: {
1254
+ category: 'navigation',
1255
+ type: 'item',
1256
+ item: 'emphasis-low',
1257
+ },
1258
+ },
1259
+ 'chevron-color': {
1260
+ version: '0.22',
1261
+ comment: 'Neutral dark color',
1262
+ attributes: {
1263
+ category: 'navigation',
1264
+ type: 'item',
1265
+ item: 'emphasis-low',
1266
+ },
1267
+ },
1268
+ },
1269
+ 'theme-dark': {
1270
+ 'background-color': {
1271
+ attributes: {
1272
+ category: 'navigation',
1273
+ type: 'item',
1274
+ item: 'emphasis-low',
1275
+ },
1276
+ },
1277
+ 'border-color': {
1278
+ version: '0.22',
1279
+ comment: 'Base light color with 20% opacity',
1280
+ attributes: {
1281
+ category: 'navigation',
1282
+ type: 'item',
1283
+ item: 'emphasis-low',
1284
+ },
1285
+ },
1286
+ 'icon-color': {
1287
+ version: '0.22',
1288
+ comment: 'Neutral light color',
1289
+ attributes: {
1290
+ category: 'navigation',
1291
+ type: 'item',
1292
+ item: 'emphasis-low',
1293
+ },
1294
+ },
1295
+ 'label-color': {
1296
+ version: '0.22',
1297
+ comment: 'Neutral light color',
1298
+ attributes: {
1299
+ category: 'navigation',
1300
+ type: 'item',
1301
+ item: 'emphasis-low',
1302
+ },
1303
+ },
1304
+ 'chevron-background-color': {
1305
+ attributes: {
1306
+ category: 'navigation',
1307
+ type: 'item',
1308
+ item: 'emphasis-low',
1309
+ },
1310
+ },
1311
+ 'chevron-color': {
1312
+ version: '0.22',
1313
+ comment: 'Neutral light color',
1314
+ attributes: {
1315
+ category: 'navigation',
1316
+ type: 'item',
1317
+ item: 'emphasis-low',
1318
+ },
1319
+ },
1320
+ },
191
1321
  },
192
- },
193
- },
194
- indicator: {
195
- size: {
196
- attributes: {
197
- category: 'switch',
198
- type: 'indicator',
199
- item: 'size',
1322
+ 'state-hover': {
1323
+ border: {
1324
+ top: {
1325
+ width: {
1326
+ attributes: {
1327
+ category: 'navigation',
1328
+ type: 'item',
1329
+ item: 'emphasis-low',
1330
+ },
1331
+ },
1332
+ },
1333
+ right: {
1334
+ width: {
1335
+ attributes: {
1336
+ category: 'navigation',
1337
+ type: 'item',
1338
+ item: 'emphasis-low',
1339
+ },
1340
+ },
1341
+ },
1342
+ bottom: {
1343
+ width: {
1344
+ attributes: {
1345
+ category: 'navigation',
1346
+ type: 'item',
1347
+ item: 'emphasis-low',
1348
+ },
1349
+ },
1350
+ },
1351
+ left: {
1352
+ width: {
1353
+ attributes: {
1354
+ category: 'navigation',
1355
+ type: 'item',
1356
+ item: 'emphasis-low',
1357
+ },
1358
+ },
1359
+ },
1360
+ },
1361
+ 'theme-light': {
1362
+ 'background-color': {
1363
+ version: '0.22',
1364
+ comment: 'Base dark color with 12% opacity',
1365
+ attributes: {
1366
+ category: 'navigation',
1367
+ type: 'item',
1368
+ item: 'emphasis-low',
1369
+ },
1370
+ },
1371
+ 'border-color': {
1372
+ version: '0.22',
1373
+ comment: 'Base dark color with 12% opacity',
1374
+ attributes: {
1375
+ category: 'navigation',
1376
+ type: 'item',
1377
+ item: 'emphasis-low',
1378
+ },
1379
+ },
1380
+ 'icon-color': {
1381
+ version: '0.22',
1382
+ comment: 'Neutral dark color',
1383
+ attributes: {
1384
+ category: 'navigation',
1385
+ type: 'item',
1386
+ item: 'emphasis-low',
1387
+ },
1388
+ },
1389
+ 'label-color': {
1390
+ version: '0.22',
1391
+ comment: 'Neutral dark color',
1392
+ attributes: {
1393
+ category: 'navigation',
1394
+ type: 'item',
1395
+ item: 'emphasis-low',
1396
+ },
1397
+ },
1398
+ 'chevron-background-color': {
1399
+ version: '0.22',
1400
+ comment: 'Base dark color with 12% opacity',
1401
+ attributes: {
1402
+ category: 'navigation',
1403
+ type: 'item',
1404
+ item: 'emphasis-low',
1405
+ },
1406
+ },
1407
+ 'chevron-color': {
1408
+ version: '0.22',
1409
+ comment: 'Neutral dark color',
1410
+ attributes: {
1411
+ category: 'navigation',
1412
+ type: 'item',
1413
+ item: 'emphasis-low',
1414
+ },
1415
+ },
1416
+ },
1417
+ 'theme-dark': {
1418
+ 'background-color': {
1419
+ version: '0.22',
1420
+ comment: 'Base light color with 20% opacity',
1421
+ attributes: {
1422
+ category: 'navigation',
1423
+ type: 'item',
1424
+ item: 'emphasis-low',
1425
+ },
1426
+ },
1427
+ 'border-color': {
1428
+ version: '0.22',
1429
+ comment: 'Base light color with 20% opacity',
1430
+ attributes: {
1431
+ category: 'navigation',
1432
+ type: 'item',
1433
+ item: 'emphasis-low',
1434
+ },
1435
+ },
1436
+ 'icon-color': {
1437
+ version: '0.22',
1438
+ comment: 'Neutral light color',
1439
+ attributes: {
1440
+ category: 'navigation',
1441
+ type: 'item',
1442
+ item: 'emphasis-low',
1443
+ },
1444
+ },
1445
+ 'label-color': {
1446
+ version: '0.22',
1447
+ comment: 'Neutral light color',
1448
+ attributes: {
1449
+ category: 'navigation',
1450
+ type: 'item',
1451
+ item: 'emphasis-low',
1452
+ },
1453
+ },
1454
+ 'chevron-background-color': {
1455
+ version: '0.22',
1456
+ comment: 'Base light color with 20% opacity',
1457
+ attributes: {
1458
+ category: 'navigation',
1459
+ type: 'item',
1460
+ item: 'emphasis-low',
1461
+ },
1462
+ },
1463
+ 'chevron-color': {
1464
+ version: '0.22',
1465
+ comment: 'Neutral light color',
1466
+ attributes: {
1467
+ category: 'navigation',
1468
+ type: 'item',
1469
+ item: 'emphasis-low',
1470
+ },
1471
+ },
1472
+ },
1473
+ },
1474
+ 'state-active': {
1475
+ border: {
1476
+ top: {
1477
+ width: {
1478
+ attributes: {
1479
+ category: 'navigation',
1480
+ type: 'item',
1481
+ item: 'emphasis-low',
1482
+ },
1483
+ },
1484
+ },
1485
+ right: {
1486
+ width: {
1487
+ attributes: {
1488
+ category: 'navigation',
1489
+ type: 'item',
1490
+ item: 'emphasis-low',
1491
+ },
1492
+ },
1493
+ },
1494
+ bottom: {
1495
+ width: {
1496
+ attributes: {
1497
+ category: 'navigation',
1498
+ type: 'item',
1499
+ item: 'emphasis-low',
1500
+ },
1501
+ },
1502
+ },
1503
+ left: {
1504
+ width: {
1505
+ attributes: {
1506
+ category: 'navigation',
1507
+ type: 'item',
1508
+ item: 'emphasis-low',
1509
+ },
1510
+ },
1511
+ },
1512
+ },
1513
+ 'theme-light': {
1514
+ 'background-color': {
1515
+ version: '0.22',
1516
+ comment: 'Base dark color with 20% opacity',
1517
+ attributes: {
1518
+ category: 'navigation',
1519
+ type: 'item',
1520
+ item: 'emphasis-low',
1521
+ },
1522
+ },
1523
+ 'border-color': {
1524
+ version: '0.22',
1525
+ comment: 'Base dark color with 12% opacity',
1526
+ attributes: {
1527
+ category: 'navigation',
1528
+ type: 'item',
1529
+ item: 'emphasis-low',
1530
+ },
1531
+ },
1532
+ 'icon-color': {
1533
+ version: '0.22',
1534
+ comment: 'Neutral dark color',
1535
+ attributes: {
1536
+ category: 'navigation',
1537
+ type: 'item',
1538
+ item: 'emphasis-low',
1539
+ },
1540
+ },
1541
+ 'label-color': {
1542
+ version: '0.22',
1543
+ comment: 'Neutral dark color',
1544
+ attributes: {
1545
+ category: 'navigation',
1546
+ type: 'item',
1547
+ item: 'emphasis-low',
1548
+ },
1549
+ },
1550
+ 'chevron-background-color': {
1551
+ version: '0.22',
1552
+ comment: 'Base dark color with 20% opacity',
1553
+ attributes: {
1554
+ category: 'navigation',
1555
+ type: 'item',
1556
+ item: 'emphasis-low',
1557
+ },
1558
+ },
1559
+ 'chevron-color': {
1560
+ version: '0.22',
1561
+ comment: 'Neutral dark color',
1562
+ attributes: {
1563
+ category: 'navigation',
1564
+ type: 'item',
1565
+ item: 'emphasis-low',
1566
+ },
1567
+ },
1568
+ },
1569
+ 'theme-dark': {
1570
+ 'background-color': {
1571
+ version: '0.22',
1572
+ comment: 'Base light color with 40% opacity',
1573
+ attributes: {
1574
+ category: 'navigation',
1575
+ type: 'item',
1576
+ item: 'emphasis-low',
1577
+ },
1578
+ },
1579
+ 'border-color': {
1580
+ version: '0.22',
1581
+ comment: 'Base light color with 20% opacity',
1582
+ attributes: {
1583
+ category: 'navigation',
1584
+ type: 'item',
1585
+ item: 'emphasis-low',
1586
+ },
1587
+ },
1588
+ 'icon-color': {
1589
+ version: '0.22',
1590
+ comment: 'Neutral light color',
1591
+ attributes: {
1592
+ category: 'navigation',
1593
+ type: 'item',
1594
+ item: 'emphasis-low',
1595
+ },
1596
+ },
1597
+ 'label-color': {
1598
+ version: '0.22',
1599
+ comment: 'Neutral light color',
1600
+ attributes: {
1601
+ category: 'navigation',
1602
+ type: 'item',
1603
+ item: 'emphasis-low',
1604
+ },
1605
+ },
1606
+ 'chevron-background-color': {
1607
+ version: '0.22',
1608
+ comment: 'Base light color with 40% opacity',
1609
+ attributes: {
1610
+ category: 'navigation',
1611
+ type: 'item',
1612
+ item: 'emphasis-low',
1613
+ },
1614
+ },
1615
+ 'chevron-color': {
1616
+ version: '0.22',
1617
+ comment: 'Neutral light color',
1618
+ attributes: {
1619
+ category: 'navigation',
1620
+ type: 'item',
1621
+ item: 'emphasis-low',
1622
+ },
1623
+ },
1624
+ },
200
1625
  },
201
1626
  },
202
- offset: {
203
- attributes: {
204
- category: 'switch',
205
- type: 'indicator',
206
- item: 'offset',
1627
+ 'emphasis-selected': {
1628
+ 'state-default': {
1629
+ border: {
1630
+ top: {
1631
+ width: {
1632
+ attributes: {
1633
+ category: 'navigation',
1634
+ type: 'item',
1635
+ item: 'emphasis-selected',
1636
+ },
1637
+ },
1638
+ },
1639
+ right: {
1640
+ width: {
1641
+ attributes: {
1642
+ category: 'navigation',
1643
+ type: 'item',
1644
+ item: 'emphasis-selected',
1645
+ },
1646
+ },
1647
+ },
1648
+ bottom: {
1649
+ width: {
1650
+ attributes: {
1651
+ category: 'navigation',
1652
+ type: 'item',
1653
+ item: 'emphasis-selected',
1654
+ },
1655
+ },
1656
+ },
1657
+ left: {
1658
+ width: {
1659
+ attributes: {
1660
+ category: 'navigation',
1661
+ type: 'item',
1662
+ item: 'emphasis-selected',
1663
+ },
1664
+ },
1665
+ },
1666
+ },
1667
+ 'theme-light': {
1668
+ 'background-color': {
1669
+ attributes: {
1670
+ category: 'navigation',
1671
+ type: 'item',
1672
+ item: 'emphasis-selected',
1673
+ },
1674
+ },
1675
+ 'border-color': {
1676
+ attributes: {
1677
+ category: 'navigation',
1678
+ type: 'item',
1679
+ item: 'emphasis-selected',
1680
+ },
1681
+ },
1682
+ 'icon-color': {
1683
+ attributes: {
1684
+ category: 'navigation',
1685
+ type: 'item',
1686
+ item: 'emphasis-selected',
1687
+ },
1688
+ },
1689
+ 'label-color': {
1690
+ attributes: {
1691
+ category: 'navigation',
1692
+ type: 'item',
1693
+ item: 'emphasis-selected',
1694
+ },
1695
+ },
1696
+ 'chevron-background-color': {
1697
+ attributes: {
1698
+ category: 'navigation',
1699
+ type: 'item',
1700
+ item: 'emphasis-selected',
1701
+ },
1702
+ },
1703
+ 'chevron-color': {
1704
+ attributes: {
1705
+ category: 'navigation',
1706
+ type: 'item',
1707
+ item: 'emphasis-selected',
1708
+ },
1709
+ },
1710
+ },
1711
+ 'theme-dark': {
1712
+ 'background-color': {
1713
+ version: '0.22',
1714
+ comment: 'Base light color with 60% opacity',
1715
+ attributes: {
1716
+ category: 'navigation',
1717
+ type: 'item',
1718
+ item: 'emphasis-selected',
1719
+ },
1720
+ },
1721
+ 'border-color': {
1722
+ version: '0.22',
1723
+ comment: 'Base light color with 20% opacity',
1724
+ attributes: {
1725
+ category: 'navigation',
1726
+ type: 'item',
1727
+ item: 'emphasis-selected',
1728
+ },
1729
+ },
1730
+ 'icon-color': {
1731
+ version: '0.22',
1732
+ comment: 'Neutral light color',
1733
+ attributes: {
1734
+ category: 'navigation',
1735
+ type: 'item',
1736
+ item: 'emphasis-selected',
1737
+ },
1738
+ },
1739
+ 'label-color': {
1740
+ version: '0.22',
1741
+ comment: 'Neutral light color',
1742
+ attributes: {
1743
+ category: 'navigation',
1744
+ type: 'item',
1745
+ item: 'emphasis-selected',
1746
+ },
1747
+ },
1748
+ 'chevron-background-color': {
1749
+ attributes: {
1750
+ category: 'navigation',
1751
+ type: 'item',
1752
+ item: 'emphasis-selected',
1753
+ },
1754
+ },
1755
+ 'chevron-color': {
1756
+ version: '0.22',
1757
+ comment: 'Neutral light color',
1758
+ attributes: {
1759
+ category: 'navigation',
1760
+ type: 'item',
1761
+ item: 'emphasis-selected',
1762
+ },
1763
+ },
1764
+ },
1765
+ },
1766
+ 'state-hover': {
1767
+ border: {
1768
+ top: {
1769
+ width: {
1770
+ attributes: {
1771
+ category: 'navigation',
1772
+ type: 'item',
1773
+ item: 'emphasis-selected',
1774
+ },
1775
+ },
1776
+ },
1777
+ right: {
1778
+ width: {
1779
+ attributes: {
1780
+ category: 'navigation',
1781
+ type: 'item',
1782
+ item: 'emphasis-selected',
1783
+ },
1784
+ },
1785
+ },
1786
+ bottom: {
1787
+ width: {
1788
+ attributes: {
1789
+ category: 'navigation',
1790
+ type: 'item',
1791
+ item: 'emphasis-selected',
1792
+ },
1793
+ },
1794
+ },
1795
+ left: {
1796
+ width: {
1797
+ attributes: {
1798
+ category: 'navigation',
1799
+ type: 'item',
1800
+ item: 'emphasis-selected',
1801
+ },
1802
+ },
1803
+ },
1804
+ },
1805
+ 'theme-light': {
1806
+ 'background-color': {
1807
+ attributes: {
1808
+ category: 'navigation',
1809
+ type: 'item',
1810
+ item: 'emphasis-selected',
1811
+ },
1812
+ },
1813
+ 'border-color': {
1814
+ attributes: {
1815
+ category: 'navigation',
1816
+ type: 'item',
1817
+ item: 'emphasis-selected',
1818
+ },
1819
+ },
1820
+ 'icon-color': {
1821
+ attributes: {
1822
+ category: 'navigation',
1823
+ type: 'item',
1824
+ item: 'emphasis-selected',
1825
+ },
1826
+ },
1827
+ 'label-color': {
1828
+ attributes: {
1829
+ category: 'navigation',
1830
+ type: 'item',
1831
+ item: 'emphasis-selected',
1832
+ },
1833
+ },
1834
+ 'chevron-background-color': {
1835
+ attributes: {
1836
+ category: 'navigation',
1837
+ type: 'item',
1838
+ item: 'emphasis-selected',
1839
+ },
1840
+ },
1841
+ 'chevron-color': {
1842
+ attributes: {
1843
+ category: 'navigation',
1844
+ type: 'item',
1845
+ item: 'emphasis-selected',
1846
+ },
1847
+ },
1848
+ },
1849
+ 'theme-dark': {
1850
+ 'background-color': {
1851
+ version: '0.22',
1852
+ comment: 'Base light color with 40% opacity',
1853
+ attributes: {
1854
+ category: 'navigation',
1855
+ type: 'item',
1856
+ item: 'emphasis-selected',
1857
+ },
1858
+ },
1859
+ 'border-color': {
1860
+ version: '0.22',
1861
+ comment: 'Base light color with 20% opacity',
1862
+ attributes: {
1863
+ category: 'navigation',
1864
+ type: 'item',
1865
+ item: 'emphasis-selected',
1866
+ },
1867
+ },
1868
+ 'icon-color': {
1869
+ version: '0.22',
1870
+ comment: 'Neutral light color',
1871
+ attributes: {
1872
+ category: 'navigation',
1873
+ type: 'item',
1874
+ item: 'emphasis-selected',
1875
+ },
1876
+ },
1877
+ 'label-color': {
1878
+ version: '0.22',
1879
+ comment: 'Neutral light color',
1880
+ attributes: {
1881
+ category: 'navigation',
1882
+ type: 'item',
1883
+ item: 'emphasis-selected',
1884
+ },
1885
+ },
1886
+ 'chevron-background-color': {
1887
+ version: '0.22',
1888
+ comment: 'Base light color with 40% opacity',
1889
+ attributes: {
1890
+ category: 'navigation',
1891
+ type: 'item',
1892
+ item: 'emphasis-selected',
1893
+ },
1894
+ },
1895
+ 'chevron-color': {
1896
+ version: '0.22',
1897
+ comment: 'Neutral light color',
1898
+ attributes: {
1899
+ category: 'navigation',
1900
+ type: 'item',
1901
+ item: 'emphasis-selected',
1902
+ },
1903
+ },
1904
+ },
1905
+ },
1906
+ 'state-active': {
1907
+ border: {
1908
+ top: {
1909
+ width: {
1910
+ attributes: {
1911
+ category: 'navigation',
1912
+ type: 'item',
1913
+ item: 'emphasis-selected',
1914
+ },
1915
+ },
1916
+ },
1917
+ right: {
1918
+ width: {
1919
+ attributes: {
1920
+ category: 'navigation',
1921
+ type: 'item',
1922
+ item: 'emphasis-selected',
1923
+ },
1924
+ },
1925
+ },
1926
+ bottom: {
1927
+ width: {
1928
+ attributes: {
1929
+ category: 'navigation',
1930
+ type: 'item',
1931
+ item: 'emphasis-selected',
1932
+ },
1933
+ },
1934
+ },
1935
+ left: {
1936
+ width: {
1937
+ attributes: {
1938
+ category: 'navigation',
1939
+ type: 'item',
1940
+ item: 'emphasis-selected',
1941
+ },
1942
+ },
1943
+ },
1944
+ },
1945
+ 'theme-light': {
1946
+ 'background-color': {
1947
+ attributes: {
1948
+ category: 'navigation',
1949
+ type: 'item',
1950
+ item: 'emphasis-selected',
1951
+ },
1952
+ },
1953
+ 'border-color': {
1954
+ attributes: {
1955
+ category: 'navigation',
1956
+ type: 'item',
1957
+ item: 'emphasis-selected',
1958
+ },
1959
+ },
1960
+ 'icon-color': {
1961
+ attributes: {
1962
+ category: 'navigation',
1963
+ type: 'item',
1964
+ item: 'emphasis-selected',
1965
+ },
1966
+ },
1967
+ 'label-color': {
1968
+ attributes: {
1969
+ category: 'navigation',
1970
+ type: 'item',
1971
+ item: 'emphasis-selected',
1972
+ },
1973
+ },
1974
+ 'chevron-background-color': {
1975
+ attributes: {
1976
+ category: 'navigation',
1977
+ type: 'item',
1978
+ item: 'emphasis-selected',
1979
+ },
1980
+ },
1981
+ 'chevron-color': {
1982
+ attributes: {
1983
+ category: 'navigation',
1984
+ type: 'item',
1985
+ item: 'emphasis-selected',
1986
+ },
1987
+ },
1988
+ },
1989
+ 'theme-dark': {
1990
+ 'background-color': {
1991
+ version: '0.22',
1992
+ comment: 'Base light color with 20% opacity',
1993
+ attributes: {
1994
+ category: 'navigation',
1995
+ type: 'item',
1996
+ item: 'emphasis-selected',
1997
+ },
1998
+ },
1999
+ 'border-color': {
2000
+ version: '0.22',
2001
+ comment: 'Base light color with 20% opacity',
2002
+ attributes: {
2003
+ category: 'navigation',
2004
+ type: 'item',
2005
+ item: 'emphasis-selected',
2006
+ },
2007
+ },
2008
+ 'icon-color': {
2009
+ version: '0.22',
2010
+ comment: 'Neutral light color',
2011
+ attributes: {
2012
+ category: 'navigation',
2013
+ type: 'item',
2014
+ item: 'emphasis-selected',
2015
+ },
2016
+ },
2017
+ 'label-color': {
2018
+ version: '0.22',
2019
+ comment: 'Neutral light color',
2020
+ attributes: {
2021
+ category: 'navigation',
2022
+ type: 'item',
2023
+ item: 'emphasis-selected',
2024
+ },
2025
+ },
2026
+ 'chevron-background-color': {
2027
+ version: '0.22',
2028
+ comment: 'Base light color with 20% opacity',
2029
+ attributes: {
2030
+ category: 'navigation',
2031
+ type: 'item',
2032
+ item: 'emphasis-selected',
2033
+ },
2034
+ },
2035
+ 'chevron-color': {
2036
+ version: '0.22',
2037
+ comment: 'Neutral light color',
2038
+ attributes: {
2039
+ category: 'navigation',
2040
+ type: 'item',
2041
+ item: 'emphasis-selected',
2042
+ },
2043
+ },
2044
+ },
207
2045
  },
208
2046
  },
209
2047
  },
210
2048
  },
211
- 'text-field': {
212
- padding: {
213
- top: {
2049
+ tabs: {
2050
+ link: {
2051
+ height: {
214
2052
  attributes: {
215
- category: 'text-field',
216
- type: 'padding',
217
- item: 'top',
2053
+ category: 'tabs',
2054
+ type: 'link',
2055
+ item: 'height',
218
2056
  },
219
2057
  },
220
- bottom: {
2058
+ 'border-radius': {
221
2059
  attributes: {
222
- category: 'text-field',
223
- type: 'padding',
224
- item: 'bottom',
2060
+ category: 'tabs',
2061
+ type: 'link',
2062
+ item: 'border-radius',
225
2063
  },
226
2064
  },
227
- },
228
- header: {
229
- 'margin-bottom': {
230
- attributes: {
231
- category: 'text-field',
232
- type: 'header',
233
- item: 'margin-bottom',
2065
+ 'emphasis-low': {
2066
+ 'state-default': {
2067
+ border: {
2068
+ top: {
2069
+ width: {
2070
+ attributes: {
2071
+ category: 'tabs',
2072
+ type: 'link',
2073
+ item: 'emphasis-low',
2074
+ },
2075
+ },
2076
+ },
2077
+ right: {
2078
+ width: {
2079
+ attributes: {
2080
+ category: 'tabs',
2081
+ type: 'link',
2082
+ item: 'emphasis-low',
2083
+ },
2084
+ },
2085
+ },
2086
+ bottom: {
2087
+ width: {
2088
+ attributes: {
2089
+ category: 'tabs',
2090
+ type: 'link',
2091
+ item: 'emphasis-low',
2092
+ },
2093
+ },
2094
+ },
2095
+ left: {
2096
+ width: {
2097
+ attributes: {
2098
+ category: 'tabs',
2099
+ type: 'link',
2100
+ item: 'emphasis-low',
2101
+ },
2102
+ },
2103
+ },
2104
+ },
2105
+ 'theme-light': {
2106
+ 'background-color': {
2107
+ attributes: {
2108
+ category: 'tabs',
2109
+ type: 'link',
2110
+ item: 'emphasis-low',
2111
+ },
2112
+ },
2113
+ color: {
2114
+ version: '0.22',
2115
+ comment: 'Neutral dark color',
2116
+ attributes: {
2117
+ category: 'tabs',
2118
+ type: 'link',
2119
+ item: 'emphasis-low',
2120
+ },
2121
+ },
2122
+ 'border-color': {
2123
+ version: '0.22',
2124
+ comment: 'Base dark color with 12% opacity',
2125
+ attributes: {
2126
+ category: 'tabs',
2127
+ type: 'link',
2128
+ item: 'emphasis-low',
2129
+ },
2130
+ },
2131
+ },
2132
+ 'theme-dark': {
2133
+ 'background-color': {
2134
+ attributes: {
2135
+ category: 'tabs',
2136
+ type: 'link',
2137
+ item: 'emphasis-low',
2138
+ },
2139
+ },
2140
+ color: {
2141
+ version: '0.22',
2142
+ comment: 'Neutral light color',
2143
+ attributes: {
2144
+ category: 'tabs',
2145
+ type: 'link',
2146
+ item: 'emphasis-low',
2147
+ },
2148
+ },
2149
+ 'border-color': {
2150
+ version: '0.22',
2151
+ comment: 'Base light color with 20% opacity',
2152
+ attributes: {
2153
+ category: 'tabs',
2154
+ type: 'link',
2155
+ item: 'emphasis-low',
2156
+ },
2157
+ },
2158
+ },
2159
+ },
2160
+ 'state-hover': {
2161
+ border: {
2162
+ top: {
2163
+ width: {
2164
+ attributes: {
2165
+ category: 'tabs',
2166
+ type: 'link',
2167
+ item: 'emphasis-low',
2168
+ },
2169
+ },
2170
+ },
2171
+ right: {
2172
+ width: {
2173
+ attributes: {
2174
+ category: 'tabs',
2175
+ type: 'link',
2176
+ item: 'emphasis-low',
2177
+ },
2178
+ },
2179
+ },
2180
+ bottom: {
2181
+ width: {
2182
+ attributes: {
2183
+ category: 'tabs',
2184
+ type: 'link',
2185
+ item: 'emphasis-low',
2186
+ },
2187
+ },
2188
+ },
2189
+ left: {
2190
+ width: {
2191
+ attributes: {
2192
+ category: 'tabs',
2193
+ type: 'link',
2194
+ item: 'emphasis-low',
2195
+ },
2196
+ },
2197
+ },
2198
+ },
2199
+ 'theme-light': {
2200
+ 'background-color': {
2201
+ version: '0.22',
2202
+ comment: 'Base dark color with 12% opacity',
2203
+ attributes: {
2204
+ category: 'tabs',
2205
+ type: 'link',
2206
+ item: 'emphasis-low',
2207
+ },
2208
+ },
2209
+ color: {
2210
+ version: '0.22',
2211
+ comment: 'Neutral dark color',
2212
+ attributes: {
2213
+ category: 'tabs',
2214
+ type: 'link',
2215
+ item: 'emphasis-low',
2216
+ },
2217
+ },
2218
+ 'border-color': {
2219
+ version: '0.22',
2220
+ comment: 'Base dark color with 12% opacity',
2221
+ attributes: {
2222
+ category: 'tabs',
2223
+ type: 'link',
2224
+ item: 'emphasis-low',
2225
+ },
2226
+ },
2227
+ },
2228
+ 'theme-dark': {
2229
+ 'background-color': {
2230
+ version: '0.22',
2231
+ comment: 'Base light color with 20% opacity',
2232
+ attributes: {
2233
+ category: 'tabs',
2234
+ type: 'link',
2235
+ item: 'emphasis-low',
2236
+ },
2237
+ },
2238
+ color: {
2239
+ version: '0.22',
2240
+ comment: 'Neutral light color',
2241
+ attributes: {
2242
+ category: 'tabs',
2243
+ type: 'link',
2244
+ item: 'emphasis-low',
2245
+ },
2246
+ },
2247
+ 'border-color': {
2248
+ version: '0.22',
2249
+ comment: 'Base light color with 20% opacity',
2250
+ attributes: {
2251
+ category: 'tabs',
2252
+ type: 'link',
2253
+ item: 'emphasis-low',
2254
+ },
2255
+ },
2256
+ },
2257
+ },
2258
+ 'state-active': {
2259
+ border: {
2260
+ top: {
2261
+ width: {
2262
+ attributes: {
2263
+ category: 'tabs',
2264
+ type: 'link',
2265
+ item: 'emphasis-low',
2266
+ },
2267
+ },
2268
+ },
2269
+ right: {
2270
+ width: {
2271
+ attributes: {
2272
+ category: 'tabs',
2273
+ type: 'link',
2274
+ item: 'emphasis-low',
2275
+ },
2276
+ },
2277
+ },
2278
+ bottom: {
2279
+ width: {
2280
+ attributes: {
2281
+ category: 'tabs',
2282
+ type: 'link',
2283
+ item: 'emphasis-low',
2284
+ },
2285
+ },
2286
+ },
2287
+ left: {
2288
+ width: {
2289
+ attributes: {
2290
+ category: 'tabs',
2291
+ type: 'link',
2292
+ item: 'emphasis-low',
2293
+ },
2294
+ },
2295
+ },
2296
+ },
2297
+ 'theme-light': {
2298
+ 'background-color': {
2299
+ version: '0.22',
2300
+ comment: 'Base dark color with 20% opacity',
2301
+ attributes: {
2302
+ category: 'tabs',
2303
+ type: 'link',
2304
+ item: 'emphasis-low',
2305
+ },
2306
+ },
2307
+ color: {
2308
+ version: '0.22',
2309
+ comment: 'Neutral dark color',
2310
+ attributes: {
2311
+ category: 'tabs',
2312
+ type: 'link',
2313
+ item: 'emphasis-low',
2314
+ },
2315
+ },
2316
+ 'border-color': {
2317
+ version: '0.22',
2318
+ comment: 'Base dark color with 12% opacity',
2319
+ attributes: {
2320
+ category: 'tabs',
2321
+ type: 'link',
2322
+ item: 'emphasis-low',
2323
+ },
2324
+ },
2325
+ },
2326
+ 'theme-dark': {
2327
+ 'background-color': {
2328
+ version: '0.22',
2329
+ comment: 'Base light color with 40% opacity',
2330
+ attributes: {
2331
+ category: 'tabs',
2332
+ type: 'link',
2333
+ item: 'emphasis-low',
2334
+ },
2335
+ },
2336
+ color: {
2337
+ version: '0.22',
2338
+ comment: 'Neutral light color',
2339
+ attributes: {
2340
+ category: 'tabs',
2341
+ type: 'link',
2342
+ item: 'emphasis-low',
2343
+ },
2344
+ },
2345
+ 'border-color': {
2346
+ version: '0.22',
2347
+ comment: 'Base light color with 20% opacity',
2348
+ attributes: {
2349
+ category: 'tabs',
2350
+ type: 'link',
2351
+ item: 'emphasis-low',
2352
+ },
2353
+ },
2354
+ },
234
2355
  },
235
2356
  },
236
- },
237
- label: {
238
- 'font-size': {
239
- attributes: {
240
- category: 'text-field',
241
- type: 'label',
242
- item: 'font-size',
2357
+ 'emphasis-selected': {
2358
+ 'state-default': {
2359
+ border: {
2360
+ top: {
2361
+ width: {
2362
+ attributes: {
2363
+ category: 'tabs',
2364
+ type: 'link',
2365
+ item: 'emphasis-selected',
2366
+ },
2367
+ },
2368
+ },
2369
+ right: {
2370
+ width: {
2371
+ attributes: {
2372
+ category: 'tabs',
2373
+ type: 'link',
2374
+ item: 'emphasis-selected',
2375
+ },
2376
+ },
2377
+ },
2378
+ bottom: {
2379
+ width: {
2380
+ attributes: {
2381
+ category: 'tabs',
2382
+ type: 'link',
2383
+ item: 'emphasis-selected',
2384
+ },
2385
+ },
2386
+ },
2387
+ left: {
2388
+ width: {
2389
+ attributes: {
2390
+ category: 'tabs',
2391
+ type: 'link',
2392
+ item: 'emphasis-selected',
2393
+ },
2394
+ },
2395
+ },
2396
+ },
2397
+ 'theme-light': {
2398
+ 'background-color': {
2399
+ attributes: {
2400
+ category: 'tabs',
2401
+ type: 'link',
2402
+ item: 'emphasis-selected',
2403
+ },
2404
+ },
2405
+ color: {
2406
+ version: '0.22',
2407
+ comment: 'Neutral dark color',
2408
+ attributes: {
2409
+ category: 'tabs',
2410
+ type: 'link',
2411
+ item: 'emphasis-selected',
2412
+ },
2413
+ },
2414
+ 'border-color': {
2415
+ attributes: {
2416
+ category: 'tabs',
2417
+ type: 'link',
2418
+ item: 'emphasis-selected',
2419
+ },
2420
+ },
2421
+ },
2422
+ 'theme-dark': {
2423
+ 'background-color': {
2424
+ attributes: {
2425
+ category: 'tabs',
2426
+ type: 'link',
2427
+ item: 'emphasis-selected',
2428
+ },
2429
+ },
2430
+ color: {
2431
+ version: '0.22',
2432
+ comment: 'Neutral light color',
2433
+ attributes: {
2434
+ category: 'tabs',
2435
+ type: 'link',
2436
+ item: 'emphasis-selected',
2437
+ },
2438
+ },
2439
+ 'border-color': {
2440
+ version: '0.22',
2441
+ comment: 'Neutral light color',
2442
+ attributes: {
2443
+ category: 'tabs',
2444
+ type: 'link',
2445
+ item: 'emphasis-selected',
2446
+ },
2447
+ },
2448
+ },
243
2449
  },
244
- },
245
- 'font-weight': {
246
- attributes: {
247
- category: 'text-field',
248
- type: 'label',
249
- item: 'font-weight',
2450
+ 'state-hover': {
2451
+ border: {
2452
+ top: {
2453
+ width: {
2454
+ attributes: {
2455
+ category: 'tabs',
2456
+ type: 'link',
2457
+ item: 'emphasis-selected',
2458
+ },
2459
+ },
2460
+ },
2461
+ right: {
2462
+ width: {
2463
+ attributes: {
2464
+ category: 'tabs',
2465
+ type: 'link',
2466
+ item: 'emphasis-selected',
2467
+ },
2468
+ },
2469
+ },
2470
+ bottom: {
2471
+ width: {
2472
+ attributes: {
2473
+ category: 'tabs',
2474
+ type: 'link',
2475
+ item: 'emphasis-selected',
2476
+ },
2477
+ },
2478
+ },
2479
+ left: {
2480
+ width: {
2481
+ attributes: {
2482
+ category: 'tabs',
2483
+ type: 'link',
2484
+ item: 'emphasis-selected',
2485
+ },
2486
+ },
2487
+ },
2488
+ },
2489
+ 'theme-light': {
2490
+ 'background-color': {
2491
+ version: '0.22',
2492
+ comment: 'Base dark color with 12% opacity',
2493
+ attributes: {
2494
+ category: 'tabs',
2495
+ type: 'link',
2496
+ item: 'emphasis-selected',
2497
+ },
2498
+ },
2499
+ color: {
2500
+ version: '0.22',
2501
+ comment: 'Neutral dark color',
2502
+ attributes: {
2503
+ category: 'tabs',
2504
+ type: 'link',
2505
+ item: 'emphasis-selected',
2506
+ },
2507
+ },
2508
+ 'border-color': {
2509
+ attributes: {
2510
+ category: 'tabs',
2511
+ type: 'link',
2512
+ item: 'emphasis-selected',
2513
+ },
2514
+ },
2515
+ },
2516
+ 'theme-dark': {
2517
+ 'background-color': {
2518
+ version: '0.22',
2519
+ comment: 'Base light color with 20% opacity',
2520
+ attributes: {
2521
+ category: 'tabs',
2522
+ type: 'link',
2523
+ item: 'emphasis-selected',
2524
+ },
2525
+ },
2526
+ color: {
2527
+ version: '0.22',
2528
+ comment: 'Neutral light color',
2529
+ attributes: {
2530
+ category: 'tabs',
2531
+ type: 'link',
2532
+ item: 'emphasis-selected',
2533
+ },
2534
+ },
2535
+ 'border-color': {
2536
+ version: '0.22',
2537
+ comment: 'Neutral light color',
2538
+ attributes: {
2539
+ category: 'tabs',
2540
+ type: 'link',
2541
+ item: 'emphasis-selected',
2542
+ },
2543
+ },
2544
+ },
250
2545
  },
251
- },
252
- 'line-height': {
253
- attributes: {
254
- category: 'text-field',
255
- type: 'label',
256
- item: 'line-height',
2546
+ 'state-active': {
2547
+ border: {
2548
+ top: {
2549
+ width: {
2550
+ attributes: {
2551
+ category: 'tabs',
2552
+ type: 'link',
2553
+ item: 'emphasis-selected',
2554
+ },
2555
+ },
2556
+ },
2557
+ right: {
2558
+ width: {
2559
+ attributes: {
2560
+ category: 'tabs',
2561
+ type: 'link',
2562
+ item: 'emphasis-selected',
2563
+ },
2564
+ },
2565
+ },
2566
+ bottom: {
2567
+ width: {
2568
+ attributes: {
2569
+ category: 'tabs',
2570
+ type: 'link',
2571
+ item: 'emphasis-selected',
2572
+ },
2573
+ },
2574
+ },
2575
+ left: {
2576
+ width: {
2577
+ attributes: {
2578
+ category: 'tabs',
2579
+ type: 'link',
2580
+ item: 'emphasis-selected',
2581
+ },
2582
+ },
2583
+ },
2584
+ },
2585
+ 'theme-light': {
2586
+ 'background-color': {
2587
+ version: '0.22',
2588
+ comment: 'Base dark color with 20% opacity',
2589
+ attributes: {
2590
+ category: 'tabs',
2591
+ type: 'link',
2592
+ item: 'emphasis-selected',
2593
+ },
2594
+ },
2595
+ color: {
2596
+ version: '0.22',
2597
+ comment: 'Neutral dark color',
2598
+ attributes: {
2599
+ category: 'tabs',
2600
+ type: 'link',
2601
+ item: 'emphasis-selected',
2602
+ },
2603
+ },
2604
+ 'border-color': {
2605
+ attributes: {
2606
+ category: 'tabs',
2607
+ type: 'link',
2608
+ item: 'emphasis-selected',
2609
+ },
2610
+ },
2611
+ },
2612
+ 'theme-dark': {
2613
+ 'background-color': {
2614
+ version: '0.22',
2615
+ comment: 'Base light color with 40% opacity',
2616
+ attributes: {
2617
+ category: 'tabs',
2618
+ type: 'link',
2619
+ item: 'emphasis-selected',
2620
+ },
2621
+ },
2622
+ color: {
2623
+ version: '0.22',
2624
+ comment: 'Neutral light color',
2625
+ attributes: {
2626
+ category: 'tabs',
2627
+ type: 'link',
2628
+ item: 'emphasis-selected',
2629
+ },
2630
+ },
2631
+ 'border-color': {
2632
+ version: '0.22',
2633
+ comment: 'Neutral light color',
2634
+ attributes: {
2635
+ category: 'tabs',
2636
+ type: 'link',
2637
+ item: 'emphasis-selected',
2638
+ },
2639
+ },
2640
+ },
257
2641
  },
258
2642
  },
259
2643
  },
260
- wrapper: {
2644
+ },
2645
+ 'text-field': {
2646
+ input: {
261
2647
  'min-height': {
262
2648
  attributes: {
263
2649
  category: 'text-field',
264
- type: 'wrapper',
2650
+ type: 'input',
265
2651
  item: 'min-height',
266
2652
  },
267
2653
  },
268
- 'border-radius': {
269
- attributes: {
270
- category: 'text-field',
271
- type: 'wrapper',
272
- item: 'border-radius',
273
- },
274
- },
275
2654
  padding: {
276
- vertical: {
277
- attributes: {
278
- category: 'text-field',
279
- type: 'wrapper',
280
- item: 'padding',
281
- },
282
- },
283
2655
  horizontal: {
284
2656
  attributes: {
285
2657
  category: 'text-field',
286
- type: 'wrapper',
2658
+ type: 'input',
287
2659
  item: 'padding',
288
2660
  },
289
2661
  },
290
2662
  },
2663
+ 'border-radius': {
2664
+ attributes: {
2665
+ category: 'text-field',
2666
+ type: 'input',
2667
+ item: 'border-radius',
2668
+ },
2669
+ },
291
2670
  },
292
2671
  'state-default': {
293
- border: {
294
- top: {
295
- width: {
2672
+ input: {
2673
+ border: {
2674
+ top: {
2675
+ width: {
2676
+ attributes: {
2677
+ category: 'text-field',
2678
+ type: 'state-default',
2679
+ item: 'input',
2680
+ },
2681
+ },
2682
+ },
2683
+ right: {
2684
+ width: {
2685
+ attributes: {
2686
+ category: 'text-field',
2687
+ type: 'state-default',
2688
+ item: 'input',
2689
+ },
2690
+ },
2691
+ },
2692
+ bottom: {
2693
+ width: {
2694
+ attributes: {
2695
+ category: 'text-field',
2696
+ type: 'state-default',
2697
+ item: 'input',
2698
+ },
2699
+ },
2700
+ },
2701
+ left: {
2702
+ width: {
2703
+ attributes: {
2704
+ category: 'text-field',
2705
+ type: 'state-default',
2706
+ item: 'input',
2707
+ },
2708
+ },
2709
+ },
2710
+ },
2711
+ },
2712
+ 'theme-light': {
2713
+ header: {
2714
+ label: {
2715
+ color: {
2716
+ version: '0.22',
2717
+ comment: 'Neutral dark color',
2718
+ attributes: {
2719
+ category: 'text-field',
2720
+ type: 'state-default',
2721
+ item: 'theme-light',
2722
+ },
2723
+ },
2724
+ },
2725
+ },
2726
+ input: {
2727
+ 'background-color': {
2728
+ version: '0.22',
2729
+ comment: 'Base dark color with 5% opacity',
296
2730
  attributes: {
297
2731
  category: 'text-field',
298
2732
  type: 'state-default',
299
- item: 'border',
2733
+ item: 'theme-light',
300
2734
  },
301
2735
  },
302
- },
303
- right: {
304
- width: {
2736
+ 'border-color': {
2737
+ version: '0.22',
2738
+ comment: 'Base dark color with 20% opacity',
305
2739
  attributes: {
306
2740
  category: 'text-field',
307
2741
  type: 'state-default',
308
- item: 'border',
2742
+ item: 'theme-light',
2743
+ },
2744
+ },
2745
+ content: {
2746
+ color: {
2747
+ version: '0.22',
2748
+ comment: 'Neutral dark color',
2749
+ attributes: {
2750
+ category: 'text-field',
2751
+ type: 'state-default',
2752
+ item: 'theme-light',
2753
+ },
2754
+ },
2755
+ },
2756
+ placeholder: {
2757
+ color: {
2758
+ version: '0.22',
2759
+ comment: 'Base dark color with 54% opacity',
2760
+ attributes: {
2761
+ category: 'text-field',
2762
+ type: 'state-default',
2763
+ item: 'theme-light',
2764
+ },
309
2765
  },
310
2766
  },
311
2767
  },
312
- bottom: {
313
- width: {
2768
+ },
2769
+ 'theme-dark': {
2770
+ header: {
2771
+ label: {
2772
+ color: {
2773
+ version: '0.22',
2774
+ comment: 'Neutral light color',
2775
+ attributes: {
2776
+ category: 'text-field',
2777
+ type: 'state-default',
2778
+ item: 'theme-dark',
2779
+ },
2780
+ },
2781
+ },
2782
+ },
2783
+ input: {
2784
+ 'background-color': {
2785
+ version: '0.22',
2786
+ comment: 'Base light color with 10% opacity',
314
2787
  attributes: {
315
2788
  category: 'text-field',
316
2789
  type: 'state-default',
317
- item: 'border',
2790
+ item: 'theme-dark',
318
2791
  },
319
2792
  },
320
- },
321
- left: {
322
- width: {
2793
+ 'border-color': {
2794
+ version: '0.22',
2795
+ comment: 'Base light color with 40% opacity',
323
2796
  attributes: {
324
2797
  category: 'text-field',
325
2798
  type: 'state-default',
326
- item: 'border',
2799
+ item: 'theme-dark',
327
2800
  },
328
2801
  },
329
- },
330
- },
331
- 'theme-light': {
332
- 'background-color': {
333
- version: '0.22',
334
- comment: 'Base dark color with 5% opacity',
335
- attributes: {
336
- category: 'text-field',
337
- type: 'state-default',
338
- item: 'theme-light',
2802
+ content: {
2803
+ color: {
2804
+ version: '0.22',
2805
+ comment: 'Neutral light color',
2806
+ attributes: {
2807
+ category: 'text-field',
2808
+ type: 'state-default',
2809
+ item: 'theme-dark',
2810
+ },
2811
+ },
339
2812
  },
340
- },
341
- 'border-color': {
342
- version: '0.22',
343
- comment: 'Base dark color with 20% opacity',
344
- attributes: {
345
- category: 'text-field',
346
- type: 'state-default',
347
- item: 'theme-light',
2813
+ placeholder: {
2814
+ color: {
2815
+ version: '0.22',
2816
+ comment: 'Base light color with 80% opacity',
2817
+ attributes: {
2818
+ category: 'text-field',
2819
+ type: 'state-default',
2820
+ item: 'theme-dark',
2821
+ },
2822
+ },
348
2823
  },
349
2824
  },
350
2825
  },
351
- 'theme-dark': {
352
- 'background-color': {
353
- version: '0.22',
354
- comment: 'Base light color with 10% opacity',
355
- attributes: {
356
- category: 'text-field',
357
- type: 'state-default',
358
- item: 'theme-dark',
2826
+ },
2827
+ 'state-hover': {
2828
+ input: {
2829
+ border: {
2830
+ top: {
2831
+ width: {
2832
+ attributes: {
2833
+ category: 'text-field',
2834
+ type: 'state-hover',
2835
+ item: 'input',
2836
+ },
2837
+ },
359
2838
  },
360
- },
361
- 'border-color': {
362
- version: '0.22',
363
- comment: 'Base light color with 40% opacity',
364
- attributes: {
365
- category: 'text-field',
366
- type: 'state-default',
367
- item: 'theme-dark',
2839
+ right: {
2840
+ width: {
2841
+ attributes: {
2842
+ category: 'text-field',
2843
+ type: 'state-hover',
2844
+ item: 'input',
2845
+ },
2846
+ },
2847
+ },
2848
+ bottom: {
2849
+ width: {
2850
+ attributes: {
2851
+ category: 'text-field',
2852
+ type: 'state-hover',
2853
+ item: 'input',
2854
+ },
2855
+ },
2856
+ },
2857
+ left: {
2858
+ width: {
2859
+ attributes: {
2860
+ category: 'text-field',
2861
+ type: 'state-hover',
2862
+ item: 'input',
2863
+ },
2864
+ },
368
2865
  },
369
2866
  },
370
2867
  },
371
- },
372
- 'state-hover': {
373
2868
  'theme-light': {
374
- 'background-color': {
375
- version: '0.22',
376
- comment: 'Base dark color with 12% opacity',
377
- attributes: {
378
- category: 'text-field',
379
- type: 'state-hover',
380
- item: 'theme-light',
2869
+ input: {
2870
+ 'background-color': {
2871
+ version: '0.22',
2872
+ comment: 'Base dark color with 12% opacity',
2873
+ attributes: {
2874
+ category: 'text-field',
2875
+ type: 'state-hover',
2876
+ item: 'theme-light',
2877
+ },
2878
+ },
2879
+ 'border-color': {
2880
+ version: '0.22',
2881
+ comment: 'Base dark color with 20% opacity',
2882
+ attributes: {
2883
+ category: 'text-field',
2884
+ type: 'state-hover',
2885
+ item: 'theme-light',
2886
+ },
2887
+ },
2888
+ content: {
2889
+ color: {
2890
+ version: '0.22',
2891
+ comment: 'Neutral dark color',
2892
+ attributes: {
2893
+ category: 'text-field',
2894
+ type: 'state-hover',
2895
+ item: 'theme-light',
2896
+ },
2897
+ },
2898
+ },
2899
+ placeholder: {
2900
+ color: {
2901
+ version: '0.22',
2902
+ comment: 'Base dark color with 54% opacity',
2903
+ attributes: {
2904
+ category: 'text-field',
2905
+ type: 'state-hover',
2906
+ item: 'theme-light',
2907
+ },
2908
+ },
381
2909
  },
382
2910
  },
383
2911
  },
384
2912
  'theme-dark': {
385
- 'background-color': {
386
- version: '0.22',
387
- comment: 'Base light color with 20% opacity',
388
- attributes: {
389
- category: 'text-field',
390
- type: 'state-hover',
391
- item: 'theme-dark',
2913
+ input: {
2914
+ 'background-color': {
2915
+ version: '0.22',
2916
+ comment: 'Base light color with 20% opacity',
2917
+ attributes: {
2918
+ category: 'text-field',
2919
+ type: 'state-hover',
2920
+ item: 'theme-dark',
2921
+ },
2922
+ },
2923
+ 'border-color': {
2924
+ version: '0.22',
2925
+ comment: 'Base light color with 40% opacity',
2926
+ attributes: {
2927
+ category: 'text-field',
2928
+ type: 'state-hover',
2929
+ item: 'theme-dark',
2930
+ },
2931
+ },
2932
+ content: {
2933
+ color: {
2934
+ version: '0.22',
2935
+ comment: 'Neutral light color',
2936
+ attributes: {
2937
+ category: 'text-field',
2938
+ type: 'state-hover',
2939
+ item: 'theme-dark',
2940
+ },
2941
+ },
2942
+ },
2943
+ placeholder: {
2944
+ color: {
2945
+ version: '0.22',
2946
+ comment: 'Base light color with 80% opacity',
2947
+ attributes: {
2948
+ category: 'text-field',
2949
+ type: 'state-hover',
2950
+ item: 'theme-dark',
2951
+ },
2952
+ },
392
2953
  },
393
2954
  },
394
2955
  },
395
2956
  },
396
2957
  'state-focus': {
397
- border: {
398
- top: {
399
- width: {
400
- attributes: {
401
- category: 'text-field',
402
- type: 'state-focus',
403
- item: 'border',
2958
+ input: {
2959
+ border: {
2960
+ top: {
2961
+ width: {
2962
+ attributes: {
2963
+ category: 'text-field',
2964
+ type: 'state-focus',
2965
+ item: 'input',
2966
+ },
2967
+ },
2968
+ },
2969
+ right: {
2970
+ width: {
2971
+ attributes: {
2972
+ category: 'text-field',
2973
+ type: 'state-focus',
2974
+ item: 'input',
2975
+ },
2976
+ },
2977
+ },
2978
+ bottom: {
2979
+ width: {
2980
+ attributes: {
2981
+ category: 'text-field',
2982
+ type: 'state-focus',
2983
+ item: 'input',
2984
+ },
2985
+ },
2986
+ },
2987
+ left: {
2988
+ width: {
2989
+ attributes: {
2990
+ category: 'text-field',
2991
+ type: 'state-focus',
2992
+ item: 'input',
2993
+ },
404
2994
  },
405
2995
  },
406
2996
  },
407
- right: {
408
- width: {
409
- attributes: {
410
- category: 'text-field',
411
- type: 'state-focus',
412
- item: 'border',
2997
+ },
2998
+ 'theme-light': {
2999
+ header: {
3000
+ label: {
3001
+ color: {
3002
+ version: '0.22',
3003
+ comment: 'Neutral dark color',
3004
+ attributes: {
3005
+ category: 'text-field',
3006
+ type: 'state-focus',
3007
+ item: 'theme-light',
3008
+ },
413
3009
  },
414
3010
  },
415
3011
  },
416
- bottom: {
417
- width: {
3012
+ input: {
3013
+ 'background-color': {
3014
+ version: '0.22',
3015
+ comment: 'Neutral light color',
418
3016
  attributes: {
419
3017
  category: 'text-field',
420
3018
  type: 'state-focus',
421
- item: 'border',
3019
+ item: 'theme-light',
422
3020
  },
423
3021
  },
424
- },
425
- left: {
426
- width: {
3022
+ 'border-color': {
3023
+ version: '0.22',
3024
+ comment: 'Base blue color with 60% opacity',
427
3025
  attributes: {
428
3026
  category: 'text-field',
429
3027
  type: 'state-focus',
430
- item: 'border',
3028
+ item: 'theme-light',
431
3029
  },
432
3030
  },
433
- },
434
- },
435
- 'theme-light': {
436
- 'background-color': {
437
- version: '0.22',
438
- comment: 'Neutral light color',
439
- attributes: {
440
- category: 'text-field',
441
- type: 'state-focus',
442
- item: 'theme-light',
3031
+ content: {
3032
+ color: {
3033
+ version: '0.22',
3034
+ comment: 'Neutral dark color',
3035
+ attributes: {
3036
+ category: 'text-field',
3037
+ type: 'state-focus',
3038
+ item: 'theme-light',
3039
+ },
3040
+ },
443
3041
  },
444
- },
445
- 'border-color': {
446
- version: '0.22',
447
- comment: 'Base blue color with 60% opacity',
448
- attributes: {
449
- category: 'text-field',
450
- type: 'state-focus',
451
- item: 'theme-light',
3042
+ placeholder: {
3043
+ color: {
3044
+ version: '0.22',
3045
+ comment: 'Base dark color with 54% opacity',
3046
+ attributes: {
3047
+ category: 'text-field',
3048
+ type: 'state-focus',
3049
+ item: 'theme-light',
3050
+ },
3051
+ },
452
3052
  },
453
3053
  },
454
3054
  },
455
3055
  'theme-dark': {
456
- 'background-color': {
457
- attributes: {
458
- category: 'text-field',
459
- type: 'state-focus',
460
- item: 'theme-dark',
3056
+ header: {
3057
+ label: {
3058
+ color: {
3059
+ version: '0.22',
3060
+ comment: 'Neutral light color',
3061
+ attributes: {
3062
+ category: 'text-field',
3063
+ type: 'state-focus',
3064
+ item: 'theme-dark',
3065
+ },
3066
+ },
461
3067
  },
462
3068
  },
463
- 'border-color': {
464
- version: '0.22',
465
- comment: 'Base light color with 80% opacity',
466
- attributes: {
467
- category: 'text-field',
468
- type: 'state-focus',
469
- item: 'theme-dark',
3069
+ input: {
3070
+ 'background-color': {
3071
+ attributes: {
3072
+ category: 'text-field',
3073
+ type: 'state-focus',
3074
+ item: 'theme-dark',
3075
+ },
3076
+ },
3077
+ 'border-color': {
3078
+ version: '0.22',
3079
+ comment: 'Base light color with 80% opacity',
3080
+ attributes: {
3081
+ category: 'text-field',
3082
+ type: 'state-focus',
3083
+ item: 'theme-dark',
3084
+ },
3085
+ },
3086
+ content: {
3087
+ color: {
3088
+ version: '0.22',
3089
+ comment: 'Neutral light color',
3090
+ attributes: {
3091
+ category: 'text-field',
3092
+ type: 'state-focus',
3093
+ item: 'theme-dark',
3094
+ },
3095
+ },
3096
+ },
3097
+ placeholder: {
3098
+ color: {
3099
+ version: '0.22',
3100
+ comment: 'Base light color with 80% opacity',
3101
+ attributes: {
3102
+ category: 'text-field',
3103
+ type: 'state-focus',
3104
+ item: 'theme-dark',
3105
+ },
3106
+ },
470
3107
  },
471
3108
  },
472
3109
  },
473
3110
  },
474
- 'input-icon-size': {
475
- attributes: {
476
- category: 'text-field',
477
- type: 'input-icon-size',
478
- },
479
- },
480
- input: {
481
- 'font-size': {
482
- attributes: {
483
- category: 'text-field',
484
- type: 'input',
485
- item: 'font-size',
486
- },
487
- },
488
- 'font-weight': {
489
- attributes: {
490
- category: 'text-field',
491
- type: 'input',
492
- item: 'font-weight',
493
- },
494
- },
495
- 'line-height': {
496
- attributes: {
497
- category: 'text-field',
498
- type: 'input',
499
- item: 'line-height',
500
- },
501
- },
502
- },
503
- 'input-validity-size': {
504
- attributes: {
505
- category: 'text-field',
506
- type: 'input-validity-size',
507
- },
508
- },
509
- 'input-clear-size': {
510
- attributes: {
511
- category: 'text-field',
512
- type: 'input-clear-size',
513
- },
514
- },
515
3111
  },
516
3112
  'border-radius': {
517
3113
  attributes: {
@@ -2258,20 +4854,6 @@ export const DESIGN_TOKENS = {
2258
4854
  },
2259
4855
  },
2260
4856
  },
2261
- progress: {
2262
- bounce: {
2263
- attributes: {
2264
- category: 'progress',
2265
- type: 'bounce',
2266
- },
2267
- },
2268
- rotate: {
2269
- attributes: {
2270
- category: 'progress',
2271
- type: 'rotate',
2272
- },
2273
- },
2274
- },
2275
4857
  size: {
2276
4858
  xxs: {
2277
4859
  attributes: {
@@ -2353,35 +4935,58 @@ export const DESIGN_TOKENS = {
2353
4935
  item: 'huge',
2354
4936
  },
2355
4937
  },
2356
- },
2357
- },
2358
- typography: {
2359
- 'font-family': {
2360
- attributes: {
2361
- category: 'typography',
2362
- type: 'font-family',
4938
+ },
4939
+ },
4940
+ typography: {
4941
+ 'font-family': {
4942
+ attributes: {
4943
+ category: 'typography',
4944
+ type: 'font-family',
4945
+ },
4946
+ },
4947
+ 'font-weight': {
4948
+ regular: {
4949
+ attributes: {
4950
+ category: 'typography',
4951
+ type: 'font-weight',
4952
+ item: 'regular',
4953
+ },
4954
+ },
4955
+ bold: {
4956
+ attributes: {
4957
+ category: 'typography',
4958
+ type: 'font-weight',
4959
+ item: 'bold',
4960
+ },
4961
+ },
4962
+ light: {
4963
+ attributes: {
4964
+ category: 'typography',
4965
+ type: 'font-weight',
4966
+ item: 'light',
4967
+ },
2363
4968
  },
2364
4969
  },
2365
- style: {
4970
+ interface: {
2366
4971
  display1: {
2367
4972
  'font-size': {
2368
4973
  attributes: {
2369
4974
  category: 'typography',
2370
- type: 'style',
4975
+ type: 'interface',
2371
4976
  item: 'display1',
2372
4977
  },
2373
4978
  },
2374
4979
  'font-weight': {
2375
4980
  attributes: {
2376
4981
  category: 'typography',
2377
- type: 'style',
4982
+ type: 'interface',
2378
4983
  item: 'display1',
2379
4984
  },
2380
4985
  },
2381
4986
  'line-height': {
2382
4987
  attributes: {
2383
4988
  category: 'typography',
2384
- type: 'style',
4989
+ type: 'interface',
2385
4990
  item: 'display1',
2386
4991
  },
2387
4992
  },
@@ -2390,21 +4995,21 @@ export const DESIGN_TOKENS = {
2390
4995
  'font-size': {
2391
4996
  attributes: {
2392
4997
  category: 'typography',
2393
- type: 'style',
4998
+ type: 'interface',
2394
4999
  item: 'headline',
2395
5000
  },
2396
5001
  },
2397
5002
  'font-weight': {
2398
5003
  attributes: {
2399
5004
  category: 'typography',
2400
- type: 'style',
5005
+ type: 'interface',
2401
5006
  item: 'headline',
2402
5007
  },
2403
5008
  },
2404
5009
  'line-height': {
2405
5010
  attributes: {
2406
5011
  category: 'typography',
2407
- type: 'style',
5012
+ type: 'interface',
2408
5013
  item: 'headline',
2409
5014
  },
2410
5015
  },
@@ -2413,21 +5018,21 @@ export const DESIGN_TOKENS = {
2413
5018
  'font-size': {
2414
5019
  attributes: {
2415
5020
  category: 'typography',
2416
- type: 'style',
5021
+ type: 'interface',
2417
5022
  item: 'title',
2418
5023
  },
2419
5024
  },
2420
5025
  'font-weight': {
2421
5026
  attributes: {
2422
5027
  category: 'typography',
2423
- type: 'style',
5028
+ type: 'interface',
2424
5029
  item: 'title',
2425
5030
  },
2426
5031
  },
2427
5032
  'line-height': {
2428
5033
  attributes: {
2429
5034
  category: 'typography',
2430
- type: 'style',
5035
+ type: 'interface',
2431
5036
  item: 'title',
2432
5037
  },
2433
5038
  },
@@ -2436,21 +5041,21 @@ export const DESIGN_TOKENS = {
2436
5041
  'font-size': {
2437
5042
  attributes: {
2438
5043
  category: 'typography',
2439
- type: 'style',
5044
+ type: 'interface',
2440
5045
  item: 'subtitle2',
2441
5046
  },
2442
5047
  },
2443
5048
  'font-weight': {
2444
5049
  attributes: {
2445
5050
  category: 'typography',
2446
- type: 'style',
5051
+ type: 'interface',
2447
5052
  item: 'subtitle2',
2448
5053
  },
2449
5054
  },
2450
5055
  'line-height': {
2451
5056
  attributes: {
2452
5057
  category: 'typography',
2453
- type: 'style',
5058
+ type: 'interface',
2454
5059
  item: 'subtitle2',
2455
5060
  },
2456
5061
  },
@@ -2459,21 +5064,21 @@ export const DESIGN_TOKENS = {
2459
5064
  'font-size': {
2460
5065
  attributes: {
2461
5066
  category: 'typography',
2462
- type: 'style',
5067
+ type: 'interface',
2463
5068
  item: 'subtitle1',
2464
5069
  },
2465
5070
  },
2466
5071
  'font-weight': {
2467
5072
  attributes: {
2468
5073
  category: 'typography',
2469
- type: 'style',
5074
+ type: 'interface',
2470
5075
  item: 'subtitle1',
2471
5076
  },
2472
5077
  },
2473
5078
  'line-height': {
2474
5079
  attributes: {
2475
5080
  category: 'typography',
2476
- type: 'style',
5081
+ type: 'interface',
2477
5082
  item: 'subtitle1',
2478
5083
  },
2479
5084
  },
@@ -2482,21 +5087,21 @@ export const DESIGN_TOKENS = {
2482
5087
  'font-size': {
2483
5088
  attributes: {
2484
5089
  category: 'typography',
2485
- type: 'style',
5090
+ type: 'interface',
2486
5091
  item: 'body2',
2487
5092
  },
2488
5093
  },
2489
5094
  'font-weight': {
2490
5095
  attributes: {
2491
5096
  category: 'typography',
2492
- type: 'style',
5097
+ type: 'interface',
2493
5098
  item: 'body2',
2494
5099
  },
2495
5100
  },
2496
5101
  'line-height': {
2497
5102
  attributes: {
2498
5103
  category: 'typography',
2499
- type: 'style',
5104
+ type: 'interface',
2500
5105
  item: 'body2',
2501
5106
  },
2502
5107
  },
@@ -2505,21 +5110,21 @@ export const DESIGN_TOKENS = {
2505
5110
  'font-size': {
2506
5111
  attributes: {
2507
5112
  category: 'typography',
2508
- type: 'style',
5113
+ type: 'interface',
2509
5114
  item: 'body1',
2510
5115
  },
2511
5116
  },
2512
5117
  'font-weight': {
2513
5118
  attributes: {
2514
5119
  category: 'typography',
2515
- type: 'style',
5120
+ type: 'interface',
2516
5121
  item: 'body1',
2517
5122
  },
2518
5123
  },
2519
5124
  'line-height': {
2520
5125
  attributes: {
2521
5126
  category: 'typography',
2522
- type: 'style',
5127
+ type: 'interface',
2523
5128
  item: 'body1',
2524
5129
  },
2525
5130
  },
@@ -2528,21 +5133,21 @@ export const DESIGN_TOKENS = {
2528
5133
  'font-size': {
2529
5134
  attributes: {
2530
5135
  category: 'typography',
2531
- type: 'style',
5136
+ type: 'interface',
2532
5137
  item: 'caption',
2533
5138
  },
2534
5139
  },
2535
5140
  'font-weight': {
2536
5141
  attributes: {
2537
5142
  category: 'typography',
2538
- type: 'style',
5143
+ type: 'interface',
2539
5144
  item: 'caption',
2540
5145
  },
2541
5146
  },
2542
5147
  'line-height': {
2543
5148
  attributes: {
2544
5149
  category: 'typography',
2545
- type: 'style',
5150
+ type: 'interface',
2546
5151
  item: 'caption',
2547
5152
  },
2548
5153
  },
@@ -2551,25 +5156,412 @@ export const DESIGN_TOKENS = {
2551
5156
  'font-size': {
2552
5157
  attributes: {
2553
5158
  category: 'typography',
2554
- type: 'style',
5159
+ type: 'interface',
2555
5160
  item: 'overline',
2556
5161
  },
2557
5162
  },
2558
5163
  'font-weight': {
2559
5164
  attributes: {
2560
5165
  category: 'typography',
2561
- type: 'style',
5166
+ type: 'interface',
2562
5167
  item: 'overline',
2563
5168
  },
2564
5169
  },
2565
5170
  'line-height': {
2566
5171
  attributes: {
2567
5172
  category: 'typography',
2568
- type: 'style',
5173
+ type: 'interface',
2569
5174
  item: 'overline',
2570
5175
  },
2571
5176
  },
2572
5177
  },
2573
5178
  },
5179
+ custom: {
5180
+ title1: {
5181
+ 'font-family': {
5182
+ attributes: {
5183
+ category: 'typography',
5184
+ type: 'custom',
5185
+ item: 'title1',
5186
+ },
5187
+ },
5188
+ 'font-size': {
5189
+ attributes: {
5190
+ category: 'typography',
5191
+ type: 'custom',
5192
+ item: 'title1',
5193
+ },
5194
+ },
5195
+ 'font-weight': {
5196
+ attributes: {
5197
+ category: 'typography',
5198
+ type: 'custom',
5199
+ item: 'title1',
5200
+ },
5201
+ },
5202
+ 'line-height': {
5203
+ attributes: {
5204
+ category: 'typography',
5205
+ type: 'custom',
5206
+ item: 'title1',
5207
+ },
5208
+ },
5209
+ },
5210
+ title2: {
5211
+ 'font-family': {
5212
+ attributes: {
5213
+ category: 'typography',
5214
+ type: 'custom',
5215
+ item: 'title2',
5216
+ },
5217
+ },
5218
+ 'font-size': {
5219
+ attributes: {
5220
+ category: 'typography',
5221
+ type: 'custom',
5222
+ item: 'title2',
5223
+ },
5224
+ },
5225
+ 'font-weight': {
5226
+ attributes: {
5227
+ category: 'typography',
5228
+ type: 'custom',
5229
+ item: 'title2',
5230
+ },
5231
+ },
5232
+ 'line-height': {
5233
+ attributes: {
5234
+ category: 'typography',
5235
+ type: 'custom',
5236
+ item: 'title2',
5237
+ },
5238
+ },
5239
+ },
5240
+ title3: {
5241
+ 'font-family': {
5242
+ attributes: {
5243
+ category: 'typography',
5244
+ type: 'custom',
5245
+ item: 'title3',
5246
+ },
5247
+ },
5248
+ 'font-size': {
5249
+ attributes: {
5250
+ category: 'typography',
5251
+ type: 'custom',
5252
+ item: 'title3',
5253
+ },
5254
+ },
5255
+ 'font-weight': {
5256
+ attributes: {
5257
+ category: 'typography',
5258
+ type: 'custom',
5259
+ item: 'title3',
5260
+ },
5261
+ },
5262
+ 'line-height': {
5263
+ attributes: {
5264
+ category: 'typography',
5265
+ type: 'custom',
5266
+ item: 'title3',
5267
+ },
5268
+ },
5269
+ },
5270
+ title4: {
5271
+ 'font-family': {
5272
+ attributes: {
5273
+ category: 'typography',
5274
+ type: 'custom',
5275
+ item: 'title4',
5276
+ },
5277
+ },
5278
+ 'font-size': {
5279
+ attributes: {
5280
+ category: 'typography',
5281
+ type: 'custom',
5282
+ item: 'title4',
5283
+ },
5284
+ },
5285
+ 'font-weight': {
5286
+ attributes: {
5287
+ category: 'typography',
5288
+ type: 'custom',
5289
+ item: 'title4',
5290
+ },
5291
+ },
5292
+ 'line-height': {
5293
+ attributes: {
5294
+ category: 'typography',
5295
+ type: 'custom',
5296
+ item: 'title4',
5297
+ },
5298
+ },
5299
+ },
5300
+ title5: {
5301
+ 'font-family': {
5302
+ attributes: {
5303
+ category: 'typography',
5304
+ type: 'custom',
5305
+ item: 'title5',
5306
+ },
5307
+ },
5308
+ 'font-size': {
5309
+ attributes: {
5310
+ category: 'typography',
5311
+ type: 'custom',
5312
+ item: 'title5',
5313
+ },
5314
+ },
5315
+ 'font-weight': {
5316
+ attributes: {
5317
+ category: 'typography',
5318
+ type: 'custom',
5319
+ item: 'title5',
5320
+ },
5321
+ },
5322
+ 'line-height': {
5323
+ attributes: {
5324
+ category: 'typography',
5325
+ type: 'custom',
5326
+ item: 'title5',
5327
+ },
5328
+ },
5329
+ },
5330
+ title6: {
5331
+ 'font-family': {
5332
+ attributes: {
5333
+ category: 'typography',
5334
+ type: 'custom',
5335
+ item: 'title6',
5336
+ },
5337
+ },
5338
+ 'font-size': {
5339
+ attributes: {
5340
+ category: 'typography',
5341
+ type: 'custom',
5342
+ item: 'title6',
5343
+ },
5344
+ },
5345
+ 'font-weight': {
5346
+ attributes: {
5347
+ category: 'typography',
5348
+ type: 'custom',
5349
+ item: 'title6',
5350
+ },
5351
+ },
5352
+ 'line-height': {
5353
+ attributes: {
5354
+ category: 'typography',
5355
+ type: 'custom',
5356
+ item: 'title6',
5357
+ },
5358
+ },
5359
+ },
5360
+ intro: {
5361
+ 'font-family': {
5362
+ attributes: {
5363
+ category: 'typography',
5364
+ type: 'custom',
5365
+ item: 'intro',
5366
+ },
5367
+ },
5368
+ 'font-size': {
5369
+ attributes: {
5370
+ category: 'typography',
5371
+ type: 'custom',
5372
+ item: 'intro',
5373
+ },
5374
+ },
5375
+ 'font-weight': {
5376
+ attributes: {
5377
+ category: 'typography',
5378
+ type: 'custom',
5379
+ item: 'intro',
5380
+ },
5381
+ },
5382
+ 'line-height': {
5383
+ attributes: {
5384
+ category: 'typography',
5385
+ type: 'custom',
5386
+ item: 'intro',
5387
+ },
5388
+ },
5389
+ },
5390
+ 'body-large': {
5391
+ 'font-family': {
5392
+ attributes: {
5393
+ category: 'typography',
5394
+ type: 'custom',
5395
+ item: 'body-large',
5396
+ },
5397
+ },
5398
+ 'font-size': {
5399
+ attributes: {
5400
+ category: 'typography',
5401
+ type: 'custom',
5402
+ item: 'body-large',
5403
+ },
5404
+ },
5405
+ 'font-weight': {
5406
+ attributes: {
5407
+ category: 'typography',
5408
+ type: 'custom',
5409
+ item: 'body-large',
5410
+ },
5411
+ },
5412
+ 'line-height': {
5413
+ attributes: {
5414
+ category: 'typography',
5415
+ type: 'custom',
5416
+ item: 'body-large',
5417
+ },
5418
+ },
5419
+ },
5420
+ body: {
5421
+ 'font-family': {
5422
+ attributes: {
5423
+ category: 'typography',
5424
+ type: 'custom',
5425
+ item: 'body',
5426
+ },
5427
+ },
5428
+ 'font-size': {
5429
+ attributes: {
5430
+ category: 'typography',
5431
+ type: 'custom',
5432
+ item: 'body',
5433
+ },
5434
+ },
5435
+ 'font-weight': {
5436
+ attributes: {
5437
+ category: 'typography',
5438
+ type: 'custom',
5439
+ item: 'body',
5440
+ },
5441
+ },
5442
+ 'line-height': {
5443
+ attributes: {
5444
+ category: 'typography',
5445
+ type: 'custom',
5446
+ item: 'body',
5447
+ },
5448
+ },
5449
+ },
5450
+ quote: {
5451
+ 'font-family': {
5452
+ attributes: {
5453
+ category: 'typography',
5454
+ type: 'custom',
5455
+ item: 'quote',
5456
+ },
5457
+ },
5458
+ 'font-size': {
5459
+ attributes: {
5460
+ category: 'typography',
5461
+ type: 'custom',
5462
+ item: 'quote',
5463
+ },
5464
+ },
5465
+ 'font-weight': {
5466
+ attributes: {
5467
+ category: 'typography',
5468
+ type: 'custom',
5469
+ item: 'quote',
5470
+ },
5471
+ },
5472
+ 'font-style': {
5473
+ attributes: {
5474
+ category: 'typography',
5475
+ type: 'custom',
5476
+ item: 'quote',
5477
+ },
5478
+ },
5479
+ 'line-height': {
5480
+ attributes: {
5481
+ category: 'typography',
5482
+ type: 'custom',
5483
+ item: 'quote',
5484
+ },
5485
+ },
5486
+ },
5487
+ 'publish-info': {
5488
+ 'font-family': {
5489
+ attributes: {
5490
+ category: 'typography',
5491
+ type: 'custom',
5492
+ item: 'publish-info',
5493
+ },
5494
+ },
5495
+ 'font-size': {
5496
+ attributes: {
5497
+ category: 'typography',
5498
+ type: 'custom',
5499
+ item: 'publish-info',
5500
+ },
5501
+ },
5502
+ 'font-weight': {
5503
+ attributes: {
5504
+ category: 'typography',
5505
+ type: 'custom',
5506
+ item: 'publish-info',
5507
+ },
5508
+ },
5509
+ 'line-height': {
5510
+ attributes: {
5511
+ category: 'typography',
5512
+ type: 'custom',
5513
+ item: 'publish-info',
5514
+ },
5515
+ },
5516
+ },
5517
+ button: {
5518
+ 'size-m': {
5519
+ 'font-family': {
5520
+ attributes: {
5521
+ category: 'typography',
5522
+ type: 'custom',
5523
+ item: 'button',
5524
+ },
5525
+ },
5526
+ 'font-size': {
5527
+ attributes: {
5528
+ category: 'typography',
5529
+ type: 'custom',
5530
+ item: 'button',
5531
+ },
5532
+ },
5533
+ 'font-weight': {
5534
+ attributes: {
5535
+ category: 'typography',
5536
+ type: 'custom',
5537
+ item: 'button',
5538
+ },
5539
+ },
5540
+ },
5541
+ 'size-s': {
5542
+ 'font-family': {
5543
+ attributes: {
5544
+ category: 'typography',
5545
+ type: 'custom',
5546
+ item: 'button',
5547
+ },
5548
+ },
5549
+ 'font-size': {
5550
+ attributes: {
5551
+ category: 'typography',
5552
+ type: 'custom',
5553
+ item: 'button',
5554
+ },
5555
+ },
5556
+ 'font-weight': {
5557
+ attributes: {
5558
+ category: 'typography',
5559
+ type: 'custom',
5560
+ item: 'button',
5561
+ },
5562
+ },
5563
+ },
5564
+ },
5565
+ },
2574
5566
  },
2575
5567
  };