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