-
Notifications
You must be signed in to change notification settings - Fork 14
/
variables.ts
1521 lines (1514 loc) · 63.3 KB
/
variables.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
import CORE_TOKENS from "./coreTokens";
export const componentTokens = {
accordion: {
backgroundColor: CORE_TOKENS.color_white,
hoverBackgroundColor: CORE_TOKENS.color_purple_100,
arrowColor: CORE_TOKENS.color_purple_700,
disabledArrowColor: CORE_TOKENS.color_grey_500,
assistiveTextFontFamily: CORE_TOKENS.type_sans,
assistiveTextFontSize: CORE_TOKENS.type_scale_03,
assistiveTextFontWeight: CORE_TOKENS.type_light,
assistiveTextFontStyle: CORE_TOKENS.type_italic,
assistiveTextLetterSpacing: CORE_TOKENS.type_spacing_wide_01,
assistiveTextFontColor: CORE_TOKENS.color_grey_700,
disabledAssistiveTextFontColor: CORE_TOKENS.color_grey_500,
assistiveTextMinWidth: "100px",
assistiveTextPaddingRight: "24px",
assistiveTextPaddingLeft: "0px",
titleLabelFontFamily: CORE_TOKENS.type_sans,
titleLabelFontSize: CORE_TOKENS.type_scale_03,
titleLabelFontWeight: CORE_TOKENS.type_regular,
titleLabelFontStyle: CORE_TOKENS.type_normal,
titleLabelFontColor: CORE_TOKENS.color_black,
disabledTitleLabelFontColor: CORE_TOKENS.color_grey_500,
titleLabelPaddingTop: "0px",
titleLabelPaddingBottom: "0px",
titleLabelPaddingLeft: "0px",
titleLabelPaddingRight: "16px",
focusBorderColor: CORE_TOKENS.color_blue_600,
focusBorderStyle: CORE_TOKENS.border_solid,
focusBorderThickness: "2px",
borderRadius: "4px",
boxShadowOffsetX: "0px",
boxShadowOffsetY: "6px",
boxShadowBlur: "10px",
boxShadowColor: CORE_TOKENS.color_grey_200_a,
iconColor: CORE_TOKENS.color_purple_700,
disabledIconColor: CORE_TOKENS.color_grey_500,
iconSize: "24px",
iconMarginLeft: "0px",
iconMarginRigth: "12px",
accordionGroupSeparatorBorderColor: CORE_TOKENS.color_grey_200_a,
accordionGroupSeparatorBorderThickness: "1px",
accordionGroupSeparatorBorderRadius: "0px",
accordionGroupSeparatorBorderStyle: CORE_TOKENS.border_solid,
},
alert: {
titleFontFamily: CORE_TOKENS.type_sans,
titleFontColor: CORE_TOKENS.color_black,
titleFontSize: CORE_TOKENS.type_scale_01,
titleFontStyle: CORE_TOKENS.type_normal,
titleFontWeight: CORE_TOKENS.type_bold,
titleTextTransform: CORE_TOKENS.type_uppercase,
titlePaddingRight: "0px",
titlePaddingLeft: "0px",
inlineTextFontFamily: CORE_TOKENS.type_sans,
inlineTextFontColor: CORE_TOKENS.color_black,
inlineTextFontSize: CORE_TOKENS.type_scale_01,
inlineTextFontStyle: CORE_TOKENS.type_normal,
inlineTextFontWeight: CORE_TOKENS.type_regular,
inlineTextPaddingLeft: "0px",
inlineTextPaddingRight: "0px",
contentPaddingLeft: "0px",
contentPaddingRight: "0px",
contentPaddingTop: "20px",
contentPaddingBottom: "30px",
borderRadius: "4px",
borderStyle: CORE_TOKENS.border_solid,
borderThickness: "1px",
infoBorderColor: CORE_TOKENS.color_blue_800,
successBorderColor: CORE_TOKENS.color_green_700,
warningBorderColor: CORE_TOKENS.color_yellow_700,
errorBorderColor: CORE_TOKENS.color_red_700,
iconSize: "24px",
iconPaddingLeft: "0px",
iconPaddingRight: "0px",
infoIconColor: CORE_TOKENS.color_blue_800,
successIconColor: CORE_TOKENS.color_green_700,
warningIconColor: CORE_TOKENS.color_yellow_700,
errorIconColor: CORE_TOKENS.color_red_700,
infoBackgroundColor: CORE_TOKENS.color_blue_100,
successBackgroundColor: CORE_TOKENS.color_green_100,
warningBackgroundColor: CORE_TOKENS.color_yellow_100,
errorBackgroundColor: CORE_TOKENS.color_red_100,
hoverActionBackgroundColor: CORE_TOKENS.color_grey_100_a,
activeActionBackgroundColor: CORE_TOKENS.color_grey_200_a,
focusActionBorderColor: CORE_TOKENS.color_blue_600,
overlayColor: CORE_TOKENS.color_grey_800_a,
},
box: {
backgroundColor: CORE_TOKENS.color_white,
borderRadius: CORE_TOKENS.border_radius_medium,
borderThickness: CORE_TOKENS.border_width_0,
borderStyle: CORE_TOKENS.border_none,
borderColor: CORE_TOKENS.color_transparent,
noneShadowDepthShadowOffsetX: "none",
noneShadowDepthShadowOffsetY: "none",
noneShadowDepthShadowBlur: "none",
noneShadowDepthShadowSpread: "none",
noneShadowDepthShadowColor: CORE_TOKENS.color_transparent,
oneShadowDepthShadowOffsetX: "0px",
oneShadowDepthShadowOffsetY: "3px",
oneShadowDepthShadowBlur: "6px",
oneShadowDepthShadowSpread: "0px",
oneShadowDepthShadowColor: CORE_TOKENS.color_grey_300_a,
twoShadowDepthShadowOffsetX: "0px",
twoShadowDepthShadowOffsetY: "3px",
twoShadowDepthShadowBlur: "10px",
twoShadowDepthShadowSpread: "0px",
twoShadowDepthShadowColor: CORE_TOKENS.color_grey_300_a,
},
bulletedList: {
fontColor: CORE_TOKENS.color_black,
fontColorOnDark: CORE_TOKENS.color_white,
bulletIconHeight: "1.5rem",
bulletIconWidth: "1.5rem",
bulletHeight: "5px",
bulletWidth: "5px",
bulletMarginRight: "0.5rem",
},
button: {
labelFontLineHeight: CORE_TOKENS.type_leading_normal,
labelLetterSpacing: CORE_TOKENS.type_spacing_wide_01,
paddingLeft: CORE_TOKENS.spacing_8,
paddingRight: CORE_TOKENS.spacing_8,
paddingTop: CORE_TOKENS.spacing_8,
paddingBottom: CORE_TOKENS.spacing_8,
focusBorderColor: CORE_TOKENS.color_blue_600,
focusBorderColorOnDark: CORE_TOKENS.color_blue_600,
primaryBackgroundColor: CORE_TOKENS.color_purple_700,
primaryBackgroundColorOnDark: CORE_TOKENS.color_purple_700,
primaryFontColor: CORE_TOKENS.color_white,
primaryFontColorOnDark: CORE_TOKENS.color_white,
primaryHoverBackgroundColor: CORE_TOKENS.color_purple_800,
primaryHoverBackgroundColorOnDark: CORE_TOKENS.color_purple_600,
primaryActiveBackgroundColor: CORE_TOKENS.color_purple_900,
primaryActiveBackgroundColorOnDark: CORE_TOKENS.color_purple_800,
primaryDisabledBackgroundColor: CORE_TOKENS.color_grey_100,
primaryDisabledBackgroundColorOnDark: CORE_TOKENS.color_grey_800,
primaryDisabledFontColor: CORE_TOKENS.color_grey_500,
primaryDisabledFontColorOnDark: CORE_TOKENS.color_grey_500,
primaryBorderThickness: CORE_TOKENS.border_width_0,
primaryBorderStyle: CORE_TOKENS.border_none,
primaryBorderRadius: CORE_TOKENS.border_radius_medium,
primaryFontFamily: CORE_TOKENS.type_sans,
primaryFontSize: CORE_TOKENS.type_scale_03,
primaryFontWeight: CORE_TOKENS.type_regular,
secondaryBackgroundColor: CORE_TOKENS.color_transparent,
secondaryBackgroundColorOnDark: CORE_TOKENS.color_transparent,
secondaryFontColor: CORE_TOKENS.color_purple_700,
secondaryFontColorOnDark: CORE_TOKENS.color_white,
secondaryHoverFontColor: CORE_TOKENS.color_white,
secondaryHoverFontColorOnDark: CORE_TOKENS.color_black,
secondaryBorderColor: CORE_TOKENS.color_purple_700,
secondaryBorderColorOnDark: CORE_TOKENS.color_white,
secondaryHoverBackgroundColor: CORE_TOKENS.color_purple_700,
secondaryHoverBackgroundColorOnDark: CORE_TOKENS.color_white,
secondaryActiveBackgroundColor: CORE_TOKENS.color_purple_900,
secondaryActiveBackgroundColorOnDark: CORE_TOKENS.color_grey_200,
secondaryDisabledBackgroundColor: CORE_TOKENS.color_transparent,
secondaryDisabledBackgroundColorOnDark: CORE_TOKENS.color_transparent,
secondaryDisabledFontColor: CORE_TOKENS.color_grey_500,
secondaryDisabledFontColorOnDark: CORE_TOKENS.color_grey_500,
secondaryDisabledBorderColor: CORE_TOKENS.color_grey_500,
secondaryDisabledBorderColorOnDark: CORE_TOKENS.color_grey_500,
secondaryBorderThickness: CORE_TOKENS.border_width_1,
secondaryBorderStyle: CORE_TOKENS.border_solid,
secondaryBorderRadius: CORE_TOKENS.border_radius_medium,
secondaryFontFamily: CORE_TOKENS.type_sans,
secondaryFontSize: CORE_TOKENS.type_scale_03,
secondaryFontWeight: CORE_TOKENS.type_regular,
textBackgroundColor: CORE_TOKENS.color_transparent,
textBackgroundColorOnDark: CORE_TOKENS.color_transparent,
textFontColor: CORE_TOKENS.color_purple_700,
textFontColorOnDark: CORE_TOKENS.color_white,
textHoverBackgroundColor: CORE_TOKENS.color_purple_100,
textHoverBackgroundColorOnDark: CORE_TOKENS.color_grey_800,
textActiveBackgroundColor: CORE_TOKENS.color_purple_200,
textActiveBackgroundColorOnDark: CORE_TOKENS.color_grey_700,
textDisabledBackgroundColor: CORE_TOKENS.color_transparent,
textDisabledBackgroundColorOnDark: CORE_TOKENS.color_transparent,
textDisabledFontColor: CORE_TOKENS.color_grey_500,
textDisabledFontColorOnDark: CORE_TOKENS.color_grey_500,
textBorderThickness: CORE_TOKENS.border_width_0,
textBorderStyle: CORE_TOKENS.border_none,
textBorderRadius: CORE_TOKENS.border_radius_medium,
textFontFamily: CORE_TOKENS.type_sans,
textFontSize: CORE_TOKENS.type_scale_03,
textFontWeight: CORE_TOKENS.type_regular,
},
card: {
height: "220px",
width: "400px",
},
checkbox: {
backgroundColorChecked: CORE_TOKENS.color_blue_800,
backgroundColorCheckedOnDark: CORE_TOKENS.color_grey_200,
hoverBackgroundColorChecked: CORE_TOKENS.color_blue_900,
hoverBackgroundColorCheckedOnDark: CORE_TOKENS.color_white,
disabledBackgroundColorChecked: CORE_TOKENS.color_grey_500,
disabledBackgroundColorCheckedOnDark: CORE_TOKENS.color_grey_800,
readOnlyBackgroundColorChecked: CORE_TOKENS.color_grey_500,
hoverReadOnlyBackgroundColorChecked: CORE_TOKENS.color_grey_600,
borderColor: CORE_TOKENS.color_blue_800,
borderColorOnDark: CORE_TOKENS.color_grey_200,
hoverBorderColor: CORE_TOKENS.color_blue_900,
hoverBorderColorOnDark: CORE_TOKENS.color_white,
disabledBorderColor: CORE_TOKENS.color_grey_500,
disabledBorderColorOnDark: CORE_TOKENS.color_grey_800,
readOnlyBorderColor: CORE_TOKENS.color_grey_500,
hoverReadOnlyBorderColor: CORE_TOKENS.color_grey_600,
checkColor: CORE_TOKENS.color_white,
checkColorOnDark: CORE_TOKENS.color_black,
disabledCheckColor: CORE_TOKENS.color_white,
disabledCheckColorOnDark: CORE_TOKENS.color_grey_500,
readOnlyCheckColor: CORE_TOKENS.color_white,
fontFamily: CORE_TOKENS.type_sans,
fontSize: CORE_TOKENS.type_scale_02,
fontWeight: CORE_TOKENS.type_regular,
fontColor: CORE_TOKENS.color_black,
fontColorOnDark: CORE_TOKENS.color_white,
disabledFontColor: CORE_TOKENS.color_grey_500,
disabledFontColorOnDark: CORE_TOKENS.color_grey_500,
focusColor: CORE_TOKENS.color_blue_600,
focusColorOnDark: CORE_TOKENS.color_blue_600,
checkLabelSpacing: "8px",
},
chip: {
backgroundColor: CORE_TOKENS.color_grey_200,
disabledBackgroundColor: CORE_TOKENS.color_grey_100,
fontFamily: CORE_TOKENS.type_sans,
fontSize: CORE_TOKENS.type_scale_03,
fontStyle: CORE_TOKENS.type_normal,
fontWeight: CORE_TOKENS.type_regular,
fontColor: CORE_TOKENS.color_black,
disabledFontColor: CORE_TOKENS.color_grey_500,
borderColor: CORE_TOKENS.color_transparent,
borderRadius: "80px",
borderThickness: CORE_TOKENS.border_width_0,
borderStyle: CORE_TOKENS.border_solid,
contentPaddingLeft: "16px",
contentPaddingRight: "16px",
contentPaddingTop: "0px",
contentPaddingBottom: "0px",
iconSize: "24px",
iconSpacing: "8px",
iconColor: CORE_TOKENS.color_grey_800,
hoverIconColor: CORE_TOKENS.color_grey_900,
activeIconColor: CORE_TOKENS.color_black,
disabledIconColor: CORE_TOKENS.color_grey_500,
focusColor: CORE_TOKENS.color_blue_600,
focusBorderStyle: CORE_TOKENS.border_solid,
focusBorderThickness: CORE_TOKENS.border_width_2,
focusBorderRadius: CORE_TOKENS.border_radius_medium,
},
dateInput: {
pickerBackgroundColor: CORE_TOKENS.color_white,
pickerFontColor: CORE_TOKENS.color_black,
pickerBorderColor: CORE_TOKENS.color_grey_400,
pickerSelectedBackgroundColor: CORE_TOKENS.color_purple_700,
pickerSelectedFontColor: CORE_TOKENS.color_white,
pickerHoverBackgroundColor: CORE_TOKENS.color_purple_200,
pickerHoverFontColor: CORE_TOKENS.color_black,
pickerActiveBackgroundColor: CORE_TOKENS.color_purple_800,
pickerActiveFontColor: CORE_TOKENS.color_white,
pickerNonCurrentMonthFontColor: CORE_TOKENS.color_grey_500,
pickerCurrentDateBorderColor: CORE_TOKENS.color_purple_300,
pickerCurrentDateFontColor: CORE_TOKENS.color_black,
pickerCurrentYearFontColor: CORE_TOKENS.color_purple_700,
pickerHeaderBackgroundColor: CORE_TOKENS.color_transparent,
pickerHeaderFontColor: CORE_TOKENS.color_black,
pickerHeaderHoverBackgroundColor: CORE_TOKENS.color_purple_200,
pickerHeaderHoverFontColor: CORE_TOKENS.color_black,
pickerHeaderActiveBackgroundColor: CORE_TOKENS.color_purple_800,
pickerHeaderActiveFontColor: CORE_TOKENS.color_white,
pickerFocusColor: CORE_TOKENS.color_blue_600,
pickerBorderWidth: CORE_TOKENS.border_width_1,
pickerBorderStyle: CORE_TOKENS.border_solid,
pickerFocusWidth: CORE_TOKENS.border_width_2,
pickerCurrentDateBorderWidth: CORE_TOKENS.border_width_1,
pickerFontFamily: CORE_TOKENS.type_sans,
pickerFontSize: CORE_TOKENS.type_scale_02,
pickerFontWeight: CORE_TOKENS.type_regular,
pickerInteractedYearFontSize: CORE_TOKENS.type_scale_05,
pickerHeaderFontSize: CORE_TOKENS.type_scale_02,
},
dialog: {
overlayColor: CORE_TOKENS.color_grey_800_a,
backgroundColor: CORE_TOKENS.color_white,
closeIconWidth: "24px",
closeIconHeight: "24px",
closeIconTopPosition: "20px",
closeIconRightPosition: "20px",
closeIconBackgroundColor: CORE_TOKENS.color_transparent,
closeIconBorderColor: CORE_TOKENS.border_none,
closeIconColor: CORE_TOKENS.color_black,
closeIconBorderThickness: CORE_TOKENS.border_width_0,
closeIconBorderStyle: CORE_TOKENS.border_solid,
closeIconBorderRadius: "2px",
boxShadowOffsetX: "0px",
boxShadowOffsetY: "1px",
boxShadowBlur: "3px",
boxShadowColor: CORE_TOKENS.color_grey_300_a,
},
dropdown: {
buttonBackgroundColor: CORE_TOKENS.color_white,
hoverButtonBackgroundColor: CORE_TOKENS.color_grey_100,
activeButtonBackgroundColor: CORE_TOKENS.color_grey_300,
buttonFontFamily: CORE_TOKENS.type_sans,
buttonFontSize: CORE_TOKENS.type_scale_03,
buttonFontStyle: CORE_TOKENS.type_normal,
buttonFontWeight: CORE_TOKENS.type_regular,
buttonFontColor: CORE_TOKENS.color_black,
buttonIconSize: "20px",
buttonIconSpacing: "10px",
buttonIconColor: CORE_TOKENS.color_black,
buttonPaddingTop: "0px",
buttonPaddingBottom: "0px",
buttonPaddingLeft: "16px",
buttonPaddingRight: "16px",
disabledColor: CORE_TOKENS.color_grey_500,
disabledButtonBackgroundColor: CORE_TOKENS.color_transparent,
disabledBorderColor: CORE_TOKENS.color_transparent,
optionBackgroundColor: CORE_TOKENS.color_white,
hoverOptionBackgroundColor: CORE_TOKENS.color_grey_100,
activeOptionBackgroundColor: CORE_TOKENS.color_grey_300,
optionFontFamily: CORE_TOKENS.type_sans,
optionFontSize: CORE_TOKENS.type_scale_root,
optionFontStyle: CORE_TOKENS.type_normal,
optionFontWeight: CORE_TOKENS.type_regular,
optionFontColor: CORE_TOKENS.color_black,
optionIconSize: "20px",
optionIconSpacing: "10px",
optionIconColor: CORE_TOKENS.color_black,
optionPaddingTop: "6px",
optionPaddingBottom: "6px",
optionPaddingLeft: "16px",
optionPaddingRight: "16px",
caretIconSize: "24px",
caretIconColor: CORE_TOKENS.color_black,
caretIconSpacing: "12px",
borderRadius: "4px",
borderStyle: CORE_TOKENS.border_none,
borderThickness: CORE_TOKENS.border_width_0,
borderColor: CORE_TOKENS.color_transparent,
scrollBarThumbColor: CORE_TOKENS.color_grey_700,
scrollBarTrackColor: CORE_TOKENS.color_grey_300,
focusColor: CORE_TOKENS.color_blue_600,
},
fileInput: {
dropBorderColor: CORE_TOKENS.color_black,
fileItemBorderColor: CORE_TOKENS.color_grey_300,
fileNameFontColor: CORE_TOKENS.color_black,
labelFontColor: CORE_TOKENS.color_black,
helperTextFontColor: CORE_TOKENS.color_black,
dropLabelFontColor: CORE_TOKENS.color_black,
disabledLabelFontColor: CORE_TOKENS.color_grey_500,
disabledHelperTextFontcolor: CORE_TOKENS.color_grey_500,
disabledDropLabelFontColor: CORE_TOKENS.color_grey_500,
focusDropBorderColor: CORE_TOKENS.color_blue_600,
disabledDropBorderColor: CORE_TOKENS.color_grey_500,
dragoverDropBackgroundColor: CORE_TOKENS.color_blue_50,
activeFileItemIconBackgrounColor: CORE_TOKENS.color_grey_300,
errorFileItemBorderColor: CORE_TOKENS.color_red_700,
errorFileItemBackgroundColor: CORE_TOKENS.color_red_50,
errorFilePreviewBackgroundColor: CORE_TOKENS.color_red_200,
errorFileItemIconColor: CORE_TOKENS.color_red_700,
fileItemIconBackgroundColor: CORE_TOKENS.color_grey_100,
deleteFileItemColor: CORE_TOKENS.color_black,
errorMessageFontColor: CORE_TOKENS.color_red_700,
labelFontFamily: CORE_TOKENS.type_sans,
labelFontSize: CORE_TOKENS.type_scale_02,
labelFontWeight: CORE_TOKENS.type_semibold,
labelLineHeight: CORE_TOKENS.type_leading_loose_01,
fileItemFontFamily: CORE_TOKENS.type_sans,
fileItemFontSize: CORE_TOKENS.type_scale_02,
fileItemFontWeight: CORE_TOKENS.type_regular,
fileItemLineHeight: CORE_TOKENS.type_leading_normal,
helperTextFontFamily: CORE_TOKENS.type_sans,
helperTextFontSize: CORE_TOKENS.type_scale_01,
helperTextFontWeight: CORE_TOKENS.type_regular,
helperTextLineHeight: CORE_TOKENS.type_leading_normal,
dropLabelFontFamily: CORE_TOKENS.type_sans,
dropLabelFontSize: CORE_TOKENS.type_scale_03,
dropLabelFontWeight: CORE_TOKENS.type_regular,
errorMessageFontFamily: CORE_TOKENS.type_sans,
errorMessageFontSize: CORE_TOKENS.type_scale_01,
errorMessageFontWeight: CORE_TOKENS.type_regular,
errorMessageLineHeight: CORE_TOKENS.type_leading_normal,
dropBorderThickness: CORE_TOKENS.border_width_1,
dropBorderStyle: CORE_TOKENS.border_dashed,
dropBorderRadius: CORE_TOKENS.border_radius_large,
fileItemBorderThickness: CORE_TOKENS.border_width_1,
fileItemBorderStyle: CORE_TOKENS.border_solid,
fileItemBorderRadius: CORE_TOKENS.border_radius_medium,
hoverDeleteFileItemBackgroundColor: CORE_TOKENS.color_grey_100_a,
activeDeleteFileItemBackgroundColor: CORE_TOKENS.color_grey_300_a,
focusDeleteFileItemBorderColor: CORE_TOKENS.color_blue_600,
filePreviewBackgroundColor: CORE_TOKENS.color_grey_100,
filePreviewIconColor: CORE_TOKENS.color_grey_600,
errorFilePreviewIconColor: CORE_TOKENS.color_red_700,
},
footer: {
height: "124px",
backgroundColor: CORE_TOKENS.color_black,
bottomLinksDividerColor: CORE_TOKENS.color_blue_600,
bottomLinksDividerThickness: "1px",
bottomLinksDividerStyle: CORE_TOKENS.border_solid,
bottomLinksDividerSpacing: "8px",
bottomLinksFontFamily: CORE_TOKENS.type_sans,
bottomLinksFontSize: CORE_TOKENS.type_scale_01,
bottomLinksFontStyle: CORE_TOKENS.type_normal,
bottomLinksFontWeight: CORE_TOKENS.type_regular,
bottomLinksFontColor: CORE_TOKENS.color_white,
bottomLinksTextDecoration: CORE_TOKENS.type_no_line,
copyrightFontFamily: CORE_TOKENS.type_sans,
copyrightFontSize: CORE_TOKENS.type_scale_01,
copyrightFontStyle: CORE_TOKENS.type_normal,
copyrightFontWeight: CORE_TOKENS.type_regular,
copyrightFontColor: CORE_TOKENS.color_white,
logo: "",
logoHeight: "32px",
logoWidth: "auto",
socialLinksSize: "24px",
socialLinksGutter: "16px",
socialLinksColor: CORE_TOKENS.color_white,
},
header: {
backgroundColor: CORE_TOKENS.color_white,
hamburguerFocusColor: CORE_TOKENS.color_blue_600,
hamburguerFontFamily: CORE_TOKENS.type_sans,
hamburguerFontStyle: CORE_TOKENS.type_normal,
hamburguerFontColor: CORE_TOKENS.color_black,
hamburguerFontSize: "10px",
hamburguerFontWeight: CORE_TOKENS.type_semibold,
hamburguerTextTransform: CORE_TOKENS.type_uppercase,
hamburguerIconColor: CORE_TOKENS.color_black,
hamburguerHoverColor: CORE_TOKENS.color_grey_200,
logo: "",
logoResponsive: "",
logoHeight: "40px",
logoWidth: "auto",
menuBackgroundColor: CORE_TOKENS.color_white,
menuZindex: "2000",
menuTabletWidth: "60vw",
menuMobileWidth: "100vw",
minHeight: "64px",
overlayColor: CORE_TOKENS.color_grey_800_a,
overlayOpacity: "0.7",
overlayZindex: "1600",
paddingTop: "0px",
paddingBottom: "0px",
paddingRight: "24px",
paddingLeft: "24px",
underlinedColor: CORE_TOKENS.color_black,
underlinedThickness: "2px",
underlinedStyle: CORE_TOKENS.border_solid,
contentColor: CORE_TOKENS.color_black,
contentColorOnDark: CORE_TOKENS.color_white,
},
heading: {
level1FontColor: CORE_TOKENS.inherit,
level1FontFamily: CORE_TOKENS.type_sans,
level1FontSize: CORE_TOKENS.type_scale_07,
level1FontStyle: CORE_TOKENS.type_normal,
level1FontWeight: CORE_TOKENS.type_semibold,
level1LineHeight: CORE_TOKENS.type_leading_compact_01,
level1LetterSpacing: CORE_TOKENS.type_spacing_tight_01,
level2FontColor: CORE_TOKENS.inherit,
level2FontFamily: CORE_TOKENS.type_sans,
level2FontSize: CORE_TOKENS.type_scale_05,
level2FontStyle: CORE_TOKENS.type_normal,
level2FontWeight: CORE_TOKENS.type_semibold,
level2LineHeight: CORE_TOKENS.type_leading_normal,
level2LetterSpacing: CORE_TOKENS.type_spacing_normal,
level3FontColor: CORE_TOKENS.inherit,
level3FontFamily: CORE_TOKENS.type_sans,
level3FontSize: CORE_TOKENS.type_scale_04,
level3FontStyle: CORE_TOKENS.type_normal,
level3FontWeight: CORE_TOKENS.type_semibold,
level3LineHeight: CORE_TOKENS.type_leading_compact_01,
level3LetterSpacing: CORE_TOKENS.type_spacing_wide_01,
level4FontColor: CORE_TOKENS.inherit,
level4FontFamily: CORE_TOKENS.type_sans,
level4FontSize: CORE_TOKENS.type_scale_03,
level4FontStyle: CORE_TOKENS.type_normal,
level4FontWeight: CORE_TOKENS.type_semibold,
level4LineHeight: CORE_TOKENS.type_leading_normal,
level4LetterSpacing: CORE_TOKENS.type_spacing_normal,
level5FontColor: CORE_TOKENS.inherit,
level5FontFamily: CORE_TOKENS.type_sans,
level5FontSize: CORE_TOKENS.type_scale_02,
level5FontStyle: CORE_TOKENS.type_normal,
level5FontWeight: CORE_TOKENS.type_semibold,
level5LineHeight: CORE_TOKENS.type_leading_normal,
level5LetterSpacing: CORE_TOKENS.type_spacing_wide_01,
},
image: {
captionFontColor: CORE_TOKENS.color_grey_900,
captionFontFamily: CORE_TOKENS.type_sans,
captionFontSize: CORE_TOKENS.type_scale_02,
captionFontStyle: CORE_TOKENS.type_normal,
captionFontWeight: CORE_TOKENS.type_regular,
captionLineHeight: CORE_TOKENS.type_leading_normal,
},
link: {
fontColor: CORE_TOKENS.color_blue_800,
fontFamily: CORE_TOKENS.inherit,
fontSize: CORE_TOKENS.inherit,
fontStyle: CORE_TOKENS.type_normal,
fontWeight: CORE_TOKENS.type_regular,
iconSize: "16px",
iconSpacing: "4px",
underlineSpacing: "0px",
underlineStyle: CORE_TOKENS.border_solid,
underlineThickness: "1px",
disabledFontColor: CORE_TOKENS.color_grey_500,
hoverFontColor: CORE_TOKENS.color_blue_800,
hoverUnderlineColor: CORE_TOKENS.color_blue_800,
visitedFontColor: CORE_TOKENS.color_purple_700,
visitedUnderlineColor: CORE_TOKENS.color_purple_700,
activeFontColor: CORE_TOKENS.color_black,
activeUnderlineColor: CORE_TOKENS.color_black,
focusColor: CORE_TOKENS.color_blue_600,
},
navTabs: {
selectedBackgroundColor: CORE_TOKENS.color_white,
unselectedBackgroundColor: CORE_TOKENS.color_white,
hoverBackgroundColor: CORE_TOKENS.color_grey_100,
pressedBackgroundColor: CORE_TOKENS.color_grey_200,
selectedFontColor: CORE_TOKENS.color_grey_700,
unselectedFontColor: CORE_TOKENS.color_grey_700,
disabledFontColor: CORE_TOKENS.color_grey_500,
focusOutline: CORE_TOKENS.color_blue_600,
selectedUnderlineColor: CORE_TOKENS.color_purple_700,
dividerColor: CORE_TOKENS.color_grey_400,
fontFamily: CORE_TOKENS.type_sans,
fontSize: CORE_TOKENS.type_scale_03,
fontStyle: CORE_TOKENS.type_normal,
fontWeight: CORE_TOKENS.type_regular,
selectedIconColor: CORE_TOKENS.color_grey_700,
unselectedIconColor: CORE_TOKENS.color_grey_700,
disabledIconColor: CORE_TOKENS.color_grey_500,
},
paginator: {
backgroundColor: CORE_TOKENS.color_grey_100,
fontColor: CORE_TOKENS.color_black,
fontFamily: CORE_TOKENS.type_sans,
fontSize: CORE_TOKENS.type_scale_02,
fontStyle: CORE_TOKENS.type_normal,
fontWeight: CORE_TOKENS.type_regular,
fontTextTransform: "none",
verticalPadding: "0.75rem",
horizontalPadding: "2rem",
marginRight: "40px",
marginLeft: "20px",
itemsPerPageSelectorMarginLeft: "0px",
itemsPerPageSelectorMarginRight: "0.5rem",
pageSelectorMarginRight: "30px",
pageSelectorMarginLeft: "0px",
totalItemsContainerMarginRight: "2.5rem",
totalItemsContainerMarginLeft: "0px",
},
paragraph: {
fontColor: CORE_TOKENS.color_black,
fontColorOnDark: CORE_TOKENS.color_white,
display: "block",
fontSize: CORE_TOKENS.type_scale_03,
fontWeight: CORE_TOKENS.type_regular,
},
progressBar: {
trackLineColor: CORE_TOKENS.color_purple_700,
trackLineColorOnDark: CORE_TOKENS.color_purple_500,
totalLineColor: CORE_TOKENS.color_grey_200,
labelFontFamily: CORE_TOKENS.type_sans,
labelFontSize: CORE_TOKENS.type_scale_01,
labelFontStyle: CORE_TOKENS.type_normal,
labelFontWeight: CORE_TOKENS.type_regular,
labelFontColor: CORE_TOKENS.color_black,
labelFontColorOnDark: CORE_TOKENS.color_white,
labelFontTextTransform: CORE_TOKENS.type_uppercase,
valueFontFamily: CORE_TOKENS.type_sans,
valueFontSize: CORE_TOKENS.type_scale_01,
valueFontStyle: CORE_TOKENS.type_normal,
valueFontWeight: CORE_TOKENS.type_regular,
valueFontColor: CORE_TOKENS.color_black,
valueFontColorOnDark: CORE_TOKENS.color_white,
valueFontTextTransform: CORE_TOKENS.type_uppercase,
helperTextFontColor: CORE_TOKENS.color_black,
helperTextFontColorOnDark: CORE_TOKENS.color_white,
helperTextFontSize: CORE_TOKENS.type_scale_01,
helperTextFontStyle: CORE_TOKENS.type_normal,
helperTextFontWeight: CORE_TOKENS.type_regular,
helperTextFontFamily: CORE_TOKENS.type_sans,
thickness: "9px",
borderRadius: "5px",
overlayColor: CORE_TOKENS.color_grey_800_a,
overlayFontColor: CORE_TOKENS.color_white,
},
quickNav: {
fontColor: CORE_TOKENS.color_grey_700,
hoverFontColor: CORE_TOKENS.color_purple_600,
dividerBorderColor: CORE_TOKENS.color_grey_400,
focusBorderColor: CORE_TOKENS.color_blue_600,
focusBorderStyle: CORE_TOKENS.border_solid,
focusBorderThickness: CORE_TOKENS.border_width_2,
focusBorderRadius: CORE_TOKENS.border_width_2,
paddingTop: CORE_TOKENS.spacing_8,
paddingBottom: CORE_TOKENS.spacing_8,
paddingLeft: CORE_TOKENS.spacing_16,
paddingRight: CORE_TOKENS.spacing_16,
fontFamily: CORE_TOKENS.type_sans,
fontSize: CORE_TOKENS.type_scale_02,
fontStyle: CORE_TOKENS.type_normal,
fontWeight: CORE_TOKENS.type_regular,
},
radioGroup: {
fontFamily: CORE_TOKENS.type_sans,
radioInputColor: CORE_TOKENS.color_blue_700,
hoverRadioInputColor: CORE_TOKENS.color_blue_800,
focusBorderColor: CORE_TOKENS.color_blue_600,
activeRadioInputColor: CORE_TOKENS.color_blue_900,
errorRadioInputColor: CORE_TOKENS.color_red_700,
hoverErrorRadioInputColor: CORE_TOKENS.color_red_800,
activeErrorRadioInputColor: CORE_TOKENS.color_red_900,
readonlyRadioInputColor: CORE_TOKENS.color_grey_500,
hoverReadonlyRadioInputColor: CORE_TOKENS.color_grey_600,
activeReadonlyRadioInputColor: CORE_TOKENS.color_grey_700,
disabledRadioInputColor: CORE_TOKENS.color_grey_500,
disabledLabelFontColor: CORE_TOKENS.color_grey_500,
disabledHelperTextFontColor: CORE_TOKENS.color_grey_500,
disabledRadioInputLabelFontColor: CORE_TOKENS.color_grey_500,
errorMessageColor: CORE_TOKENS.color_red_700,
labelFontColor: CORE_TOKENS.color_black,
labelFontSize: CORE_TOKENS.type_scale_02,
labelFontStyle: CORE_TOKENS.type_normal,
labelFontWeight: CORE_TOKENS.type_semibold,
labelLineHeight: CORE_TOKENS.type_leading_loose_01,
optionalLabelFontWeight: CORE_TOKENS.type_regular,
helperTextFontColor: CORE_TOKENS.color_black,
helperTextFontSize: CORE_TOKENS.type_scale_01,
helperTextFontStyle: CORE_TOKENS.type_normal,
helperTextFontWeight: CORE_TOKENS.type_regular,
helperTextLineHeight: CORE_TOKENS.type_leading_normal,
radioInputLabelFontColor: CORE_TOKENS.color_black,
radioInputLabelFontSize: CORE_TOKENS.type_scale_02,
radioInputLabelFontStyle: CORE_TOKENS.type_normal,
radioInputLabelFontWeight: CORE_TOKENS.type_regular,
radioInputLabelLineHeight: CORE_TOKENS.type_leading_loose_01,
groupLabelMargin: CORE_TOKENS.spacing_8,
radioInputLabelMargin: CORE_TOKENS.spacing_8,
groupVerticalGutter: CORE_TOKENS.spacing_4,
groupHorizontalGutter: CORE_TOKENS.spacing_32,
},
select: {
fontFamily: CORE_TOKENS.type_sans,
disabledColor: CORE_TOKENS.color_grey_500,
enabledInputBorderColor: CORE_TOKENS.color_black,
hoverInputBorderColor: CORE_TOKENS.color_purple_500,
focusInputBorderColor: CORE_TOKENS.color_blue_600,
errorInputBorderColor: CORE_TOKENS.color_red_700,
hoverInputErrorBorderColor: CORE_TOKENS.color_red_600,
disabledInputBorderColor: CORE_TOKENS.color_grey_500,
disabledInputBackgroundColor: CORE_TOKENS.color_grey_100,
inputMarginTop: CORE_TOKENS.spacing_4,
inputMarginBottom: CORE_TOKENS.spacing_4,
errorMessageColor: CORE_TOKENS.color_red_700,
errorIconColor: CORE_TOKENS.color_red_700,
labelFontColor: CORE_TOKENS.color_black,
labelFontSize: CORE_TOKENS.type_scale_02,
labelFontStyle: CORE_TOKENS.type_normal,
labelFontWeight: CORE_TOKENS.type_semibold,
labelLineHeight: CORE_TOKENS.type_leading_loose_01,
optionalLabelFontWeight: CORE_TOKENS.type_regular,
helperTextFontColor: CORE_TOKENS.color_black,
helperTextFontSize: CORE_TOKENS.type_scale_01,
helperTextFontStyle: CORE_TOKENS.type_normal,
helperTextFontWeight: CORE_TOKENS.type_regular,
helperTextLineHeight: CORE_TOKENS.type_leading_normal,
placeholderFontColor: CORE_TOKENS.color_grey_800_a,
valueFontColor: CORE_TOKENS.color_black,
valueFontSize: CORE_TOKENS.type_scale_03,
valueFontStyle: CORE_TOKENS.type_normal,
valueFontWeight: CORE_TOKENS.type_regular,
actionIconColor: CORE_TOKENS.color_black,
hoverActionIconColor: CORE_TOKENS.color_black,
activeActionIconColor: CORE_TOKENS.color_black,
actionBackgroundColor: CORE_TOKENS.color_transparent,
hoverActionBackgroundColor: CORE_TOKENS.color_grey_100,
activeActionBackgroundColor: CORE_TOKENS.color_grey_300,
listOptionFontColor: CORE_TOKENS.color_black,
listOptionFontSize: CORE_TOKENS.type_scale_02,
listOptionFontStyle: CORE_TOKENS.type_normal,
listOptionFontWeight: CORE_TOKENS.type_regular,
listOptionIconColor: CORE_TOKENS.color_black,
listOptionDividerColor: CORE_TOKENS.color_grey_200,
listGroupLabelFontWeight: CORE_TOKENS.type_semibold,
focusListOptionBorderColor: CORE_TOKENS.color_blue_600,
systemMessageFontColor: CORE_TOKENS.color_grey_700,
collapseIndicatorColor: CORE_TOKENS.color_black,
listDialogBackgroundColor: CORE_TOKENS.color_white,
listDialogBorderColor: CORE_TOKENS.color_grey_400,
selectedListOptionBackgroundColor: CORE_TOKENS.color_blue_100,
selectedHoverListOptionBackgroundColor: CORE_TOKENS.color_blue_200,
selectedActiveListOptionBackgroundColor: CORE_TOKENS.color_blue_300,
selectedListOptionIconColor: CORE_TOKENS.color_blue_900,
unselectedHoverListOptionBackgroundColor: CORE_TOKENS.color_grey_100,
unselectedActiveListOptionBackgroundColor: CORE_TOKENS.color_grey_200,
selectionIndicatorFontColor: CORE_TOKENS.color_black,
selectionIndicatorFontSize: CORE_TOKENS.type_scale_01,
selectionIndicatorFontStyle: CORE_TOKENS.type_regular,
selectionIndicatorFontWeight: CORE_TOKENS.type_normal,
selectionIndicatorBorderColor: CORE_TOKENS.color_grey_400,
selectionIndicatorBackgroundColor: CORE_TOKENS.color_grey_50,
enabledSelectionIndicatorActionBackgroundColor: CORE_TOKENS.color_transparent,
enabledSelectionIndicatorActionIconColor: CORE_TOKENS.color_black,
hoverSelectionIndicatorActionBackgroundColor: CORE_TOKENS.color_grey_100,
hoverSelectionIndicatorActionIconColor: CORE_TOKENS.color_black,
activeSelectionIndicatorActionBackgroundColor: CORE_TOKENS.color_grey_300,
activeSelectionIndicatorActionIconColor: CORE_TOKENS.color_black,
},
sidenav: {
backgroundColor: CORE_TOKENS.color_grey_100,
titleFontFamily: CORE_TOKENS.type_sans,
titleFontSize: CORE_TOKENS.type_scale_04,
titleFontStyle: CORE_TOKENS.type_normal,
titleFontWeight: CORE_TOKENS.type_semibold,
titleFontColor: CORE_TOKENS.color_grey_800,
titleFontTextTransform: "none",
titleFontLetterSpacing: CORE_TOKENS.type_spacing_normal,
groupTitleFontFamily: CORE_TOKENS.type_sans,
groupTitleFontSize: CORE_TOKENS.type_scale_02,
groupTitleFontStyle: CORE_TOKENS.type_normal,
groupTitleFontWeight: CORE_TOKENS.type_semibold,
groupTitleFontColor: CORE_TOKENS.color_black,
groupTitleHoverBackgroundColor: CORE_TOKENS.color_grey_200,
groupTitleActiveBackgroundColor: CORE_TOKENS.color_grey_800,
groupTitleSelectedFontColor: CORE_TOKENS.color_white,
groupTitleSelectedBackgroundColor: CORE_TOKENS.color_grey_800,
groupTitleSelectedHoverFontColor: CORE_TOKENS.color_white,
groupTitleSelectedHoverBackgroundColor: CORE_TOKENS.color_grey_900,
groupTitleFontTextTransform: CORE_TOKENS.type_uppercase,
groupTitleFontLetterSpacing: CORE_TOKENS.type_spacing_wide_02,
linkFontFamily: CORE_TOKENS.type_sans,
linkFontSize: CORE_TOKENS.type_scale_02,
linkFontStyle: CORE_TOKENS.type_normal,
linkFontWeight: CORE_TOKENS.type_regular,
linkFontColor: CORE_TOKENS.color_grey_800,
linkHoverBackgroundColor: CORE_TOKENS.color_grey_200,
linkSelectedFontColor: CORE_TOKENS.color_white,
linkSelectedBackgroundColor: CORE_TOKENS.color_grey_800,
linkSelectedHoverFontColor: CORE_TOKENS.color_white,
linkSelectedHoverBackgroundColor: CORE_TOKENS.color_grey_900,
linkFontTextTransform: "none",
linkFontLetterSpacing: CORE_TOKENS.type_spacing_wide_01,
linkTextDecoration: CORE_TOKENS.type_no_line,
linkMarginTop: "4px",
linkMarginBottom: "4px",
linkMarginRight: "16px",
linkMarginLeft: "16px",
linkFocusColor: CORE_TOKENS.color_blue_600,
scrollBarThumbColor: CORE_TOKENS.color_grey_200_a,
scrollBarTrackColor: CORE_TOKENS.color_transparent,
},
slider: {
fontFamily: CORE_TOKENS.type_sans,
limitValuesFontColor: CORE_TOKENS.color_black,
limitValuesFontColorOnDark: CORE_TOKENS.color_white,
limitValuesFontSize: CORE_TOKENS.type_scale_03,
limitValuesFontStyle: CORE_TOKENS.type_normal,
limitValuesFontWeight: CORE_TOKENS.type_regular,
limitValuesFontLetterSpacing: CORE_TOKENS.type_spacing_normal,
disabledLimitValuesFontColor: CORE_TOKENS.color_grey_500,
labelFontFamily: CORE_TOKENS.type_sans,
labelFontSize: CORE_TOKENS.type_scale_02,
labelFontStyle: CORE_TOKENS.type_normal,
labelFontWeight: CORE_TOKENS.type_semibold,
labelLineHeight: CORE_TOKENS.type_leading_loose_01,
helperTextFontFamily: CORE_TOKENS.type_sans,
helperTextFontSize: CORE_TOKENS.type_scale_01,
helperTextFontStyle: CORE_TOKENS.type_normal,
helperTextFontWeight: CORE_TOKENS.type_regular,
helperTextLineHeight: CORE_TOKENS.type_leading_normal,
fontColor: CORE_TOKENS.color_black,
fontColorOnDark: CORE_TOKENS.color_white,
labelFontColor: CORE_TOKENS.color_black,
labelFontColorOnDark: CORE_TOKENS.color_white,
helperTextFontColor: CORE_TOKENS.color_black,
helperTextFontColorOnDark: CORE_TOKENS.color_white,
disabledLabelFontColor: CORE_TOKENS.color_grey_500,
disabledLabelFontColorOnDark: CORE_TOKENS.color_grey_500,
disabledHelperTextFontColor: CORE_TOKENS.color_grey_500,
disabledHelperTextFontColorOnDark: CORE_TOKENS.color_grey_500,
thumbHeight: "12px",
thumbWidth: "12px",
hoverThumbHeight: "14px",
hoverThumbWidth: "14px",
thumbVerticalPosition: "12px",
hoverThumbVerticalPosition: "11px",
thumbBackgroundColor: CORE_TOKENS.color_blue_800,
thumbBackgroundColorOnDark: CORE_TOKENS.color_blue_600,
hoverThumbScale: "1.166666",
hoverThumbBackgroundColor: CORE_TOKENS.color_blue_900,
hoverThumbBackgroundColorOnDark: CORE_TOKENS.color_blue_900,
activeThumbScale: "1.166666",
activeThumbBackgroundColor: CORE_TOKENS.color_blue_900,
activeThumbBackgroundColorOnDark: CORE_TOKENS.color_blue_900,
focusThumbBackgroundColor: CORE_TOKENS.color_blue_800,
focusThumbBackgroundColorOnDark: CORE_TOKENS.color_blue_600,
tickHeight: "4px",
tickWidth: "4px",
tickVerticalPosition: "11px",
tickBackgroundColor: CORE_TOKENS.color_blue_800,
tickBackgroundColorOnDark: CORE_TOKENS.color_blue_600,
trackLineThickness: "2px",
trackLineVerticalPosition: "50%",
trackLineColor: CORE_TOKENS.color_blue_800,
trackLineColorOnDark: CORE_TOKENS.color_blue_600,
totalLineThickness: "2px",
totalLineVerticalPosition: "50%",
totalLineColor: CORE_TOKENS.color_grey_200_a,
totalLineColorOnDark: CORE_TOKENS.color_grey_400,
disabledThumbVerticalPosition: "10px",
disabledThumbBackgroundColor: CORE_TOKENS.color_grey_500,
disabledThumbBackgroundColorOnDark: "#575757",
disabledTickVerticalPosition: "11px",
disabledTickBackgroundColor: CORE_TOKENS.color_grey_500,
disabledTickBackgroundColorOnDark: CORE_TOKENS.color_grey_500,
disabledTrackLineColor: CORE_TOKENS.color_grey_500,
disabledTrackLineColorOnDark: CORE_TOKENS.color_grey_500,
disabledTotalLineColor: CORE_TOKENS.color_grey_100,
disabledTotalLineColorOnDark: CORE_TOKENS.color_grey_700,
focusColor: CORE_TOKENS.color_blue_600,
focusColorOnDark: CORE_TOKENS.color_blue_600,
floorLabelMarginRight: CORE_TOKENS.type_scale_03,
ceilLabelMarginLeft: CORE_TOKENS.type_scale_03,
inputMarginLeft: CORE_TOKENS.type_scale_06,
},
spinner: {
trackCircleColor: CORE_TOKENS.color_purple_700,
trackCircleColorOverlay: CORE_TOKENS.color_purple_500,
totalCircleColor: CORE_TOKENS.color_white,
labelFontFamily: CORE_TOKENS.type_sans,
labelFontSize: CORE_TOKENS.type_scale_02,
labelFontStyle: CORE_TOKENS.type_normal,
labelFontWeight: CORE_TOKENS.type_regular,
labelFontColor: CORE_TOKENS.color_black,
labelFontColorOnDark: CORE_TOKENS.color_white,
labelTextAlign: "center",
progressValueFontFamily: CORE_TOKENS.type_sans,
progressValueFontSize: CORE_TOKENS.type_scale_02,
progressValueFontStyle: CORE_TOKENS.type_normal,
progressValueFontWeight: CORE_TOKENS.type_bold,
progressValueFontColor: CORE_TOKENS.inherit,
progressValueFontColorOnDark: CORE_TOKENS.color_white,
progressValueTextAlign: "center",
overlayBackgroundColor: CORE_TOKENS.color_black,
overlayOpacity: "0.8",
overlayLabelFontFamily: CORE_TOKENS.type_sans,
overlayLabelFontSize: CORE_TOKENS.type_scale_02,
overlayLabelFontStyle: CORE_TOKENS.type_normal,
overlayLabelFontWeight: CORE_TOKENS.type_regular,
overlayLabelFontColor: CORE_TOKENS.color_white,
overlayLabelTextAlign: "center",
overlayProgressValueFontFamily: CORE_TOKENS.type_sans,
overlayProgressValueFontSize: CORE_TOKENS.type_scale_02,
overlayProgressValueFontStyle: CORE_TOKENS.type_normal,
overlayProgressValueFontWeight: CORE_TOKENS.type_bold,
overlayProgressValueFontColor: CORE_TOKENS.color_white,
overlayProgressValueTextAlign: "center",
},
switch: {
checkedTrackBackgroundColor: CORE_TOKENS.color_purple_700,
checkedTrackBackgroundColorOnDark: CORE_TOKENS.color_purple_700,
checkedThumbBackgroundColor: CORE_TOKENS.color_white,
checkedThumbBackgroundColorOnDark: CORE_TOKENS.color_white,
uncheckedTrackBackgroundColor: CORE_TOKENS.color_grey_400,
uncheckedTrackBackgroundColorOnDark: CORE_TOKENS.color_grey_400,
uncheckedThumbBackgroundColor: CORE_TOKENS.color_white,
uncheckedThumbBackgroundColorOnDark: CORE_TOKENS.color_white,
disabledCheckedTrackBackgroundColor: CORE_TOKENS.color_purple_100,
disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
disabledCheckedThumbBackgroundColor: CORE_TOKENS.color_white,
disabledCheckedThumbBackgroundColorOnDark: CORE_TOKENS.color_white,
disabledUncheckedTrackBackgroundColor: CORE_TOKENS.color_grey_100,
disabledUncheckedTrackBackgroundColorOnDark: "#363636",
disabledUncheckedThumbBackgroundColor: CORE_TOKENS.color_white,
disabledUncheckedThumbBackgroundColorOnDark: CORE_TOKENS.color_white,
disabledLabelFontColor: CORE_TOKENS.color_grey_500,
disabledLabelFontColorOnDark: "#575757",
disabledLabelFontStyle: CORE_TOKENS.type_normal,
labelFontFamily: CORE_TOKENS.type_sans,
labelFontSize: CORE_TOKENS.type_scale_root,
labelFontStyle: CORE_TOKENS.type_normal,
labelFontWeight: CORE_TOKENS.type_regular,
labelFontColor: CORE_TOKENS.color_black,
labelFontColorOnDark: CORE_TOKENS.color_white,
thumbFocusColor: CORE_TOKENS.color_blue_600,
thumbFocusColorOnDark: "#1682ff",
thumbHeight: "24px",
thumbWidth: "24px",
thumbShift: "1.25rem",
trackHeight: "12px",
trackWidth: "36px",
spaceBetweenLabelSwitch: "8px",
},
table: {
rowSeparatorThickness: "1px",
rowSeparatorStyle: CORE_TOKENS.border_solid,
rowSeparatorColor: CORE_TOKENS.color_grey_300,
dataBackgroundColor: CORE_TOKENS.color_white,
dataFontFamily: CORE_TOKENS.type_sans,
dataFontSize: CORE_TOKENS.type_scale_02,
dataFontStyle: CORE_TOKENS.type_normal,
dataFontWeight: CORE_TOKENS.type_regular,
dataFontColor: CORE_TOKENS.color_black,
dataFontTextTransform: "none",
dataPaddingTop: "14px",
dataPaddingBottom: "12px",
dataPaddingRight: "20px",
dataPaddingLeft: "40px",
dataTextAlign: "left",
dataTextLineHeight: "normal",
headerBackgroundColor: CORE_TOKENS.color_purple_700,
headerBorderRadius: "4px",
headerFontFamily: CORE_TOKENS.type_sans,
headerFontSize: CORE_TOKENS.type_scale_02,
headerFontStyle: CORE_TOKENS.type_normal,
headerFontWeight: CORE_TOKENS.type_regular,
headerFontColor: CORE_TOKENS.color_white,
headerFontTextTransform: "none",
headerPaddingTop: "16px",
headerPaddingBottom: "16px",
headerPaddingRight: "20px",
headerPaddingLeft: "40px",
headerTextAlign: "left",
headerTextLineHeight: "normal",
scrollBarThumbColor: CORE_TOKENS.color_grey_700,
scrollBarTrackColor: CORE_TOKENS.color_grey_300,
sortIconColor: CORE_TOKENS.color_white,
},
tabs: {
fontFamily: CORE_TOKENS.type_sans,
fontSize: CORE_TOKENS.type_scale_03,
fontStyle: CORE_TOKENS.type_normal,
fontWeight: CORE_TOKENS.type_semibold,
fontTextTransform: "none",
selectedBackgroundColor: CORE_TOKENS.color_white,
selectedFontColor: CORE_TOKENS.color_purple_700,
selectedIconColor: CORE_TOKENS.color_purple_700,
selectedUnderlineColor: CORE_TOKENS.color_purple_700,
selectedUnderlineThickness: "2px",
unselectedBackgroundColor: CORE_TOKENS.color_white,
unselectedFontColor: CORE_TOKENS.color_grey_700,
unselectedIconColor: CORE_TOKENS.color_grey_700,
disabledFontColor: CORE_TOKENS.color_grey_500,
disabledIconColor: CORE_TOKENS.color_grey_500,
disabledFontStyle: CORE_TOKENS.type_normal,
disabledBadgeBackgroundColor: "#0000004d",
hoverBackgroundColor: CORE_TOKENS.color_purple_100,
pressedBackgroundColor: CORE_TOKENS.color_purple_200,
pressedFontWeight: CORE_TOKENS.type_semibold,
dividerColor: CORE_TOKENS.color_grey_400,
dividerThickness: "1px",
focusOutline: CORE_TOKENS.color_purple_700,
scrollButtonsWidth: "48px",
badgeBackgroundColor: CORE_TOKENS.color_red_700,
badgeFontFamily: CORE_TOKENS.type_sans,
badgeFontSize: "10px",
badgeFontStyle: CORE_TOKENS.type_normal,
badgeFontWeight: "500",
badgeFontColor: CORE_TOKENS.color_white,
badgeLetterSpacing: CORE_TOKENS.type_spacing_wide_02,
badgeWidth: "16px",
badgeHeight: "16px",
badgeRadius: "10px",
badgeWidthWithNotificationNumber: "23px",
badgeHeightWithNotificationNumber: "17px",
badgeRadiusWithNotificationNumber: "10px",
},
tag: {
fontFamily: CORE_TOKENS.type_sans,
fontColor: CORE_TOKENS.color_black,
fontSize: CORE_TOKENS.type_scale_02,
fontStyle: CORE_TOKENS.type_normal,
fontWeight: CORE_TOKENS.type_regular,
labelPaddingTop: "0px",
labelPaddingBottom: "0px",
labelPaddingLeft: "16px",
labelPaddingRight: "16px",
height: "40px",
iconColor: CORE_TOKENS.color_white,
iconSectionWidth: "40px",
iconHeight: "24px",
iconWidth: "auto",
focusColor: CORE_TOKENS.color_blue_600,
},
textarea: {
fontFamily: CORE_TOKENS.type_sans,
enabledBorderColor: CORE_TOKENS.color_black,