-
Notifications
You must be signed in to change notification settings - Fork 14
/
variables.js
1528 lines (1501 loc) · 61.9 KB
/
variables.js
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
export const globalTokens = {
// Color
inherit: "inherit",
transparent: "transparent",
hal_white: "#ffffff",
hal_grey_l_95: "#f2f2f2",
hal_grey_l_90: "#e6e6e6",
hal_grey_l_80: "#cccccc",
hal_grey_l_75: "#bfbfbf",
hal_grey_l_60: "#999999",
hal_grey_s_40: "#666666",
hal_black: "#000000",
color_grey_800: "#4d4d4d",
color_grey_600: "#808080",
color_grey_50: "#fafafa",
color_grey_a_100: "#0000000d",
color_grey_a_300: "#00000033",
hal_purple_l_95: "#f2eafa",
hal_purple_l_90: "#e5d5f6",
hal_purple_l_65: "#a46ede",
hal_purple_s_38: "#5f249f",
hal_purple_d_30: "#4b1c7d",
hal_purple_d_20: "#321353",
hal_purple_d_70: "#9A6BB2",
color_purple_600: "#7D2FD0",
color_purple_300: "#cbacec",
hal_blue_l_95: "#e6f4ff",
hal_blue_l_80: "#99d5ff",
hal_blue_l_50: "#0095ff",
hal_blue_l_45: "#0086e6",
hal_blue_s_35: "#0067b3",
hal_blue_d_20: "#003c66",
color_blue_200: "#cceaff",
color_blue_500: "#33AAFF",
color_blue_50: "#f5fbff",
hal_red_l_95: "#ffe6e9",
hal_red_l_80: "#fe9aa7",
hal_red_l_60: "#fe344f",
hal_red_s_41: "#d0011b",
hal_red_d_30: "#980115",
hal_red_d_20: "#65010e",
color_red_700: "#ffccd3",
color_red_50: "#FFF5F6",
color_red_600: "#fe0123",
hal_green_l_95: "#eafaef",
hal_green_l_80: "#acecbe",
hal_green_s_39: "#24a148",
hal_green_d_30: "#1c7d38",
hal_green_d_20: "#135325",
hal_yellow_l_95: "#fef9e6",
hal_yellow_l_80: "#fbe89d",
hal_yellow_s_57: "#f7cf2b",
hal_yellow_d_40: "#c59f07",
hal_yellow_d_30: "#947705",
hal_orange_s_54: "#f38f20",
black: "#000000",
lightBlack: "#212121",
yellow: "#FFED00",
lightGrey: "#D9D9D9",
darkRed: "#D0011B",
lightRed: "#FF6161",
lightBlue: "#CEE0F5",
lightYellow: "#FCF2BD",
lightPink: "#F9CFCF",
lightGreen: "#DBF1C4",
blue: "#005FCC",
lighterGrey: "#F8F8F8",
red: "#D0011B",
violet: "#8800F6",
darkBlue: "#006BF6",
purple: "#6f2c91",
mediumPurple: "#ead8f3",
lightPurple: "#f5ebf9",
lighterPurple: "#d0bddb",
white: "#ffffff",
darkGrey: "#666666",
mediumGrey: "#bfbfbf",
mediumWhite: "#f9f9f9",
mediumBlue: "#0067b3",
softBlue: "#b1cee6",
darkWhite: "#eeeeee",
lighterBlack: "#b1b1b1",
mediumBlack: "#676767",
mediumGreyBlack: "#dbdbdb",
lightWhite: "#f2f2f2",
softGrey: "#cecece",
softBlack: "#565656",
// Typography
type_sans: "Open Sans, sans-serif",
type_scale_root: "16px",
type_scale_08: "3.75rem",
type_scale_07: "2.5rem",
type_scale_06: "2rem",
type_scale_05: "1.5rem",
type_scale_04: "1.25rem",
type_scale_03: "1rem",
type_scale_02: "0.875rem",
type_scale_01: "0.75rem",
type_light: "300",
type_regular: "400",
type_semibold: "600",
type_bold: "bold",
type_italic: "italic",
type_normal: "normal",
type_spacing_tight_02: "-0.05em",
type_spacing_tight_01: "-0.025em",
type_spacing_normal: "0em",
type_spacing_wide_01: "0.025em",
type_spacing_wide_02: "0.05em",
type_spacing_wide_03: "0.1em",
type_initial: "initial",
type_uppercase: "uppercase",
type_no_line: "none",
type_underline: "underline",
type_line_through: "line-through",
type_leading_compact_03: "1em",
type_leading_compact_02: "1.25em",
type_leading_compact_01: "1.365em",
type_leading_normal: "1.5em",
type_leading_loose_01: "1.715em",
type_leading_loose_02: "2em",
fontSize10: "10px",
// Spacing
spacing_00: "0rem",
spacing_01: "0.125rem",
spacing_02: "0.25rem",
spacing_03: "0.5rem",
spacing_04: "0.75rem",
spacing_05: "1rem",
spacing_06: "1.5rem",
spacing_07: "2rem",
spacing_08: "2.5rem",
spacing_09: "3rem",
spacing_10: "3.5rem",
spacing_11: "4rem",
spacing_12: "5rem",
spacing_13: "6rem",
spacing_14: "7rem",
// Border
border_width_0: "0px",
border_width_1: "1px",
border_width_2: "2px",
border_width_4: "4px",
border_radius_none: "0rem",
border_radius_small: "0.125rem",
border_radius_medium: "0.25rem",
border_radius_large: "0.375rem",
border_radius_full: "9999px",
border_solid: "solid",
border_dashed: "dashed",
border_none: "none",
};
export const componentTokens = {
accordion: {
backgroundColor: globalTokens.hal_white,
hoverBackgroundColor: globalTokens.hal_purple_l_95,
arrowColor: globalTokens.hal_purple_s_38,
disabledArrowColor: globalTokens.hal_grey_l_60,
assistiveTextFontFamily: globalTokens.type_sans,
assistiveTextFontSize: globalTokens.type_scale_03,
assistiveTextFontWeight: globalTokens.type_light,
assistiveTextFontStyle: globalTokens.type_italic,
assistiveTextLetterSpacing: globalTokens.type_spacing_wide_01,
assistiveTextFontColor: globalTokens.hal_grey_s_40,
disabledAssistiveTextFontColor: globalTokens.hal_grey_l_60,
assistiveTextMinWidth: "100px",
assistiveTextPaddingRight: "24px",
assistiveTextPaddingLeft: "0px",
titleLabelFontFamily: globalTokens.type_sans,
titleLabelFontSize: globalTokens.type_scale_03,
titleLabelFontWeight: globalTokens.type_regular,
titleLabelFontStyle: globalTokens.type_normal,
titleLabelFontColor: globalTokens.hal_black,
disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
titleLabelPaddingTop: "0px",
titleLabelPaddingBottom: "0px",
titleLabelPaddingLeft: "0px",
titleLabelPaddingRight: "16px",
focusBorderColor: globalTokens.hal_blue_l_50,
focusBorderStyle: "solid",
focusBorderThickness: "2px",
borderRadius: "4px",
boxShadowOffsetX: "0px",
boxShadowOffsetY: "6px",
boxShadowBlur: "10px",
boxShadowColor: "#0000001a",
iconColor: globalTokens.hal_purple_s_38,
disabledIconColor: globalTokens.hal_grey_l_60,
iconSize: "24px",
iconMarginLeft: "0px",
iconMarginRigth: "12px",
accordionGroupSeparatorBorderColor: "#0000001a",
accordionGroupSeparatorBorderThickness: "1px",
accordionGroupSeparatorBorderRadius: "0px",
accordionGroupSeparatorBorderStyle: "solid",
},
alert: {
titleFontFamily: globalTokens.type_sans,
titleFontColor: globalTokens.hal_black,
titleFontSize: globalTokens.type_scale_01,
titleFontStyle: globalTokens.type_normal,
titleFontWeight: globalTokens.type_bold,
titleTextTransform: globalTokens.type_uppercase,
titlePaddingRight: "0px",
titlePaddingLeft: "0px",
inlineTextFontFamily: globalTokens.type_sans,
inlineTextFontColor: globalTokens.hal_black,
inlineTextFontSize: globalTokens.type_scale_01,
inlineTextFontStyle: globalTokens.type_normal,
inlineTextFontWeight: globalTokens.type_regular,
inlineTextPaddingLeft: "0px",
inlineTextPaddingRight: "0px",
contentPaddingLeft: "0px",
contentPaddingRight: "0px",
contentPaddingTop: "20px",
contentPaddingBottom: "30px",
borderRadius: "4px",
borderStyle: "solid",
borderThickness: "1px",
infoBorderColor: globalTokens.hal_blue_s_35,
successBorderColor: globalTokens.hal_green_s_39,
warningBorderColor: globalTokens.hal_yellow_d_40,
errorBorderColor: globalTokens.hal_red_s_41,
iconSize: "24px",
iconPaddingLeft: "0px",
iconPaddingRight: "0px",
infoIconColor: globalTokens.hal_blue_s_35,
successIconColor: globalTokens.hal_green_s_39,
warningIconColor: globalTokens.hal_yellow_d_40,
errorIconColor: globalTokens.hal_red_s_41,
infoBackgroundColor: globalTokens.hal_blue_l_95,
successBackgroundColor: globalTokens.hal_green_l_95,
warningBackgroundColor: globalTokens.hal_yellow_l_95,
errorBackgroundColor: globalTokens.hal_red_l_95,
hoverActionBackgroundColor: globalTokens.color_grey_a_100,
activeActionBackgroundColor: "#0000001A",
focusActionBorderColor: globalTokens.hal_blue_l_50,
overlayColor: "#000000B3",
},
box: {
backgroundColor: globalTokens.white,
letterSpacing: globalTokens.type_spacing_wide_01,
borderRadius: "4px",
borderThickness: "0px",
borderStyle: "none",
borderColor: globalTokens.transparent,
noneShadowDepthShadowOffsetX: "none",
noneShadowDepthShadowOffsetY: "none",
noneShadowDepthShadowBlur: "none",
noneShadowDepthShadowSpread: "none",
noneShadowDepthShadowColor: globalTokens.transparent,
oneShadowDepthShadowOffsetX: "0px",
oneShadowDepthShadowOffsetY: "3px",
oneShadowDepthShadowBlur: "6px",
oneShadowDepthShadowSpread: "0px",
oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
twoShadowDepthShadowOffsetX: "0px",
twoShadowDepthShadowOffsetY: "3px",
twoShadowDepthShadowBlur: "10px",
twoShadowDepthShadowSpread: "0px",
twoShadowDepthShadowColor: globalTokens.color_grey_a_300,
},
bulletedList: {
fontColor: globalTokens.hal_black,
fontColorOnDark: globalTokens.hal_white,
bulletIconHeight: "1.5rem",
bulletIconWidth: "1.5rem",
bulletHeight: "5px",
bulletWidth: "5px",
bulletMarginRight: "0.5rem",
},
button: {
labelFontLineHeight: globalTokens.type_leading_normal,
labelLetterSpacing: globalTokens.type_spacing_wide_01,
paddingLeft: globalTokens.spacing_03,
paddingRight: globalTokens.spacing_03,
paddingTop: globalTokens.spacing_03,
paddingBottom: globalTokens.spacing_03,
focusBorderColor: globalTokens.hal_blue_l_50,
focusBorderColorOnDark: globalTokens.hal_blue_l_50,
primaryBackgroundColor: globalTokens.hal_purple_s_38,
primaryBackgroundColorOnDark: globalTokens.hal_purple_s_38,
primaryFontColor: globalTokens.hal_white,
primaryFontColorOnDark: globalTokens.hal_white,
primaryHoverBackgroundColor: globalTokens.hal_purple_d_30,
primaryHoverBackgroundColorOnDark: globalTokens.color_purple_600,
primaryActiveBackgroundColor: globalTokens.hal_purple_d_20,
primaryActiveBackgroundColorOnDark: globalTokens.hal_purple_d_30,
primaryDisabledBackgroundColor: globalTokens.hal_grey_l_95,
primaryDisabledBackgroundColorOnDark: globalTokens.color_grey_800,
primaryDisabledFontColor: globalTokens.hal_grey_l_60,
primaryDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
primaryBorderThickness: globalTokens.border_width_0,
primaryBorderStyle: globalTokens.border_none,
primaryBorderRadius: globalTokens.border_radius_medium,
primaryFontFamily: globalTokens.type_sans,
primaryFontSize: globalTokens.type_scale_03,
primaryFontWeight: globalTokens.type_regular,
secondaryBackgroundColor: globalTokens.transparent,
secondaryBackgroundColorOnDark: globalTokens.transparent,
secondaryFontColor: globalTokens.hal_purple_s_38,
secondaryFontColorOnDark: globalTokens.hal_white,
secondaryHoverFontColor: globalTokens.hal_white,
secondaryHoverFontColorOnDark: globalTokens.hal_black,
secondaryBorderColor: globalTokens.hal_purple_s_38,
secondaryBorderColorOnDark: globalTokens.hal_white,
secondaryHoverBackgroundColor: globalTokens.hal_purple_s_38,
secondaryHoverBackgroundColorOnDark: globalTokens.hal_white,
secondaryActiveBackgroundColor: globalTokens.hal_purple_d_20,
secondaryActiveBackgroundColorOnDark: globalTokens.hal_grey_l_90,
secondaryDisabledBackgroundColor: globalTokens.transparent,
secondaryDisabledBackgroundColorOnDark: globalTokens.transparent,
secondaryDisabledFontColor: globalTokens.lighterBlack,
secondaryDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
secondaryDisabledBorderColor: globalTokens.hal_grey_l_60,
secondaryDisabledBorderColorOnDark: globalTokens.hal_grey_l_60,
secondaryBorderThickness: globalTokens.border_width_1,
secondaryBorderStyle: globalTokens.border_solid,
secondaryBorderRadius: globalTokens.border_radius_medium,
secondaryFontFamily: globalTokens.type_sans,
secondaryFontSize: globalTokens.type_scale_03,
secondaryFontWeight: globalTokens.type_regular,
textBackgroundColor: globalTokens.transparent,
textBackgroundColorOnDark: globalTokens.transparent,
textFontColor: globalTokens.hal_purple_s_38,
textFontColorOnDark: globalTokens.hal_white,
textHoverBackgroundColor: globalTokens.hal_purple_l_95,
textHoverBackgroundColorOnDark: globalTokens.color_grey_800,
textActiveBackgroundColor: globalTokens.hal_purple_l_90,
textActiveBackgroundColorOnDark: globalTokens.hal_grey_s_40,
textDisabledBackgroundColor: globalTokens.transparent,
textDisabledBackgroundColorOnDark: globalTokens.transparent,
textDisabledFontColor: globalTokens.hal_grey_l_60,
textDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
textBorderThickness: globalTokens.border_width_0,
textBorderStyle: globalTokens.border_none,
textBorderRadius: globalTokens.border_radius_medium,
textFontFamily: globalTokens.type_sans,
textFontSize: globalTokens.type_scale_03,
textFontWeight: globalTokens.type_regular,
},
card: {
height: "220px",
width: "400px",
},
checkbox: {
backgroundColorChecked: globalTokens.hal_blue_s_35,
backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
hoverBackgroundColorCheckedOnDark: globalTokens.hal_white,
disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
borderColor: globalTokens.hal_blue_s_35,
borderColorOnDark: globalTokens.hal_grey_l_90,
hoverBorderColor: globalTokens.hal_blue_d_20,
hoverBorderColorOnDark: globalTokens.hal_white,
disabledBorderColor: globalTokens.hal_grey_l_60,
disabledBorderColorOnDark: globalTokens.color_grey_800,
checkColor: globalTokens.hal_white,
checkColorOnDark: globalTokens.hal_black,
disabledCheckColor: globalTokens.hal_white,
disabledCheckColorOnDark: globalTokens.hal_grey_l_60,
fontFamily: globalTokens.type_sans,
fontSize: globalTokens.type_scale_02,
fontWeight: globalTokens.type_regular,
fontColor: globalTokens.hal_black,
fontColorOnDark: globalTokens.hal_white,
disabledFontColor: globalTokens.hal_grey_l_60,
disabledFontColorOnDark: globalTokens.hal_grey_l_60,
focusColor: globalTokens.hal_blue_l_50,
focusColorOnDark: globalTokens.hal_blue_l_50,
checkLabelSpacing: "8px",
},
chip: {
backgroundColor: globalTokens.hal_grey_l_90,
disabledBackgroundColor: globalTokens.hal_grey_l_95,
fontFamily: globalTokens.type_sans,
fontSize: globalTokens.type_scale_03,
fontStyle: globalTokens.type_normal,
fontWeight: globalTokens.type_regular,
fontColor: globalTokens.hal_black,
disabledFontColor: globalTokens.hal_grey_l_60,
borderColor: globalTokens.transparent,
borderRadius: "80px",
borderThickness: "0px",
borderStyle: "solid",
contentPaddingLeft: "16px",
contentPaddingRight: "16px",
contentPaddingTop: "0px",
contentPaddingBottom: "0px",
iconSize: "24px",
iconSpacing: "8px",
iconColor: globalTokens.hal_black,
disabledIconColor: globalTokens.hal_grey_l_60,
focusColor: globalTokens.hal_blue_l_50,
},
dateInput: {
pickerFontFamily: globalTokens.type_sans,
pickerBackgroundColor: globalTokens.hal_white,
pickerHoverDateFontColor: globalTokens.hal_black,
pickerHoverDateBackgroundColor: globalTokens.hal_purple_l_90,
pickerSelectedDateColor: globalTokens.hal_white,
pickerSelectedDateBackgroundColor: globalTokens.hal_purple_s_38,
pickerActualDateFontColor: globalTokens.hal_black,
pickerYearFontColor: globalTokens.hal_black,
pickerMonthFontColor: globalTokens.hal_black,
pickerWeekFontColor: globalTokens.hal_black,
pickerDayFontColor: globalTokens.hal_black,
pickerMonthArrowsBackgroundColor: globalTokens.transparent,
pickerFocusColor: globalTokens.hal_blue_l_50,
pickerHeight: "316px", // not referenced in the actual implementation
pickerWidth: "292px",
},
dialog: {
overlayColor: globalTokens.hal_black,
backgroundColor: globalTokens.hal_white,
closeIconWidth: "24px",
closeIconHeight: "24px",
closeIconTopPosition: "20px",
closeIconRightPosition: "20px",
closeIconBackgroundColor: "none",
closeIconBorderColor: "none",
closeIconColor: globalTokens.hal_black,
closeIconBorderThickness: "0px",
closeIconBorderStyle: "solid",
closeIconBorderRadius: "0px",
boxShadowOffsetX: "0px",
boxShadowOffsetY: "1px",
boxShadowBlur: "3px",
boxShadowColor: "rgba(0, 0, 0, 0.2)",
overlayOpacity: "0.7",
fontFamily: globalTokens.type_sans,
fontSize: globalTokens.type_scale_03,
fontWeight: globalTokens.type_regular,
},
dropdown: {
buttonBackgroundColor: globalTokens.hal_white,
hoverButtonBackgroundColor: globalTokens.hal_grey_l_95,
activeButtonBackgroundColor: globalTokens.lightGrey,
buttonFontFamily: globalTokens.type_sans,
buttonFontSize: globalTokens.type_scale_03,
buttonFontStyle: globalTokens.type_normal,
buttonFontWeight: globalTokens.type_regular,
buttonFontColor: globalTokens.hal_black,
buttonIconSize: "20px",
buttonIconSpacing: "10px",
buttonIconColor: globalTokens.hal_black,
buttonPaddingTop: "0px",
buttonPaddingBottom: "0px",
buttonPaddingLeft: "16px",
buttonPaddingRight: "16px",
disabledColor: globalTokens.lighterBlack,
disabledButtonBackgroundColor: globalTokens.transparent,
disabledBorderColor: globalTokens.lighterBlack,
optionBackgroundColor: globalTokens.hal_white,
hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
activeOptionBackgroundColor: globalTokens.lightGrey,
optionFontFamily: globalTokens.type_sans,
optionFontSize: globalTokens.type_scale_root,
optionFontStyle: globalTokens.type_normal,
optionFontWeight: globalTokens.type_regular,
optionFontColor: globalTokens.hal_black,
optionIconSize: "20px",
optionIconSpacing: "10px",
optionIconColor: globalTokens.hal_black,
optionPaddingTop: "6px",
optionPaddingBottom: "6px",
optionPaddingLeft: "16px",
optionPaddingRight: "16px",
caretIconSize: "24px",
caretIconColor: globalTokens.hal_black,
caretIconSpacing: "12px",
borderRadius: "4px",
borderStyle: "none",
borderThickness: "0px",
borderColor: globalTokens.transparent,
scrollBarThumbColor: globalTokens.hal_grey_s_40,
scrollBarTrackColor: globalTokens.lightGrey,
focusColor: globalTokens.hal_blue_l_50,
},
fileInput: {
dropBorderColor: globalTokens.hal_black,
fileItemBorderColor: globalTokens.hal_grey_l_80,
fileNameFontColor: globalTokens.hal_black,
labelFontColor: globalTokens.hal_black,
helperTextFontColor: globalTokens.hal_black,
dropLabelFontColor: globalTokens.hal_black,
disabledLabelFontColor: globalTokens.hal_grey_l_60,
disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
disabledDropLabelFontColor: globalTokens.hal_grey_l_60,
focusDropBorderColor: globalTokens.hal_blue_l_50,
disabledDropBorderColor: globalTokens.hal_grey_l_60,
dragoverDropBackgroundColor: globalTokens.color_blue_50,
activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
errorFileItemBorderColor: globalTokens.hal_red_s_41,
errorFileItemBackgroundColor: globalTokens.color_red_50,
errorFilePreviewBackgroundColor: globalTokens.color_red_700,
errorFileItemIconColor: globalTokens.hal_red_s_41,
fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
deleteFileItemColor: globalTokens.hal_black,
errorMessageFontColor: globalTokens.hal_red_s_41,
labelFontFamily: globalTokens.type_sans,
labelFontSize: globalTokens.type_scale_02,
labelFontWeight: globalTokens.type_semibold,
labelLineHeight: globalTokens.type_leading_loose_01,
fileItemFontFamily: globalTokens.type_sans,
fileItemFontSize: globalTokens.type_scale_02,
fileItemFontWeight: globalTokens.type_regular,
fileItemLineHeight: globalTokens.type_leading_normal,
helperTextFontFamily: globalTokens.type_sans,
helperTextFontSize: globalTokens.type_scale_01,
helperTextFontWeight: globalTokens.type_regular,
helperTextLineHeight: globalTokens.type_leading_normal,
dropLabelFontFamily: globalTokens.type_sans,
dropLabelFontSize: globalTokens.type_scale_03,
dropLabelFontWeight: globalTokens.type_regular,
errorMessageFontFamily: globalTokens.type_sans,
errorMessageFontSize: globalTokens.type_scale_01,
errorMessageFontWeight: globalTokens.type_regular,
errorMessageLineHeight: globalTokens.type_leading_normal,
dropBorderThickness: globalTokens.border_width_1,
dropBorderStyle: globalTokens.border_dashed,
dropBorderRadius: globalTokens.border_radius_large,
fileItemBorderThickness: globalTokens.border_width_1,
fileItemBorderStyle: globalTokens.border_solid,
fileItemBorderRadius: globalTokens.border_radius_medium,
hoverDeleteFileItemBackgroundColor: globalTokens.color_grey_a_100,
activeDeleteFileItemBackgroundColor: globalTokens.color_grey_a_300,
focusDeleteFileItemBorderColor: globalTokens.hal_blue_l_50,
filePreviewBackgroundColor: globalTokens.hal_grey_l_95,
filePreviewIconColor: globalTokens.color_grey_600,
errorFilePreviewIconColor: globalTokens.hal_red_s_41,
},
footer: {
height: "124px",
backgroundColor: globalTokens.hal_black,
bottomLinksDividerColor: globalTokens.hal_blue_l_50,
bottomLinksDividerThickness: "1px",
bottomLinksDividerStyle: "solid",
bottomLinksDividerSpacing: "8px",
bottomLinksFontFamily: globalTokens.type_sans,
bottomLinksFontSize: globalTokens.type_scale_01,
bottomLinksFontStyle: globalTokens.type_normal,
bottomLinksFontWeight: globalTokens.type_regular,
bottomLinksFontColor: globalTokens.hal_white,
bottomLinksTextDecoration: globalTokens.type_no_line,
copyrightFontFamily: globalTokens.type_sans,
copyrightFontSize: globalTokens.type_scale_01,
copyrightFontStyle: globalTokens.type_normal,
copyrightFontWeight: globalTokens.type_regular,
copyrightFontColor: globalTokens.hal_white,
logo: "",
logoHeight: "32px",
logoWidth: "auto",
socialLinksSize: "24px",
socialLinksGutter: "16px",
socialLinksColor: globalTokens.hal_white,
},
header: {
backgroundColor: globalTokens.hal_white,
hamburguerFocusColor: globalTokens.hal_blue_l_50,
hamburguerFontFamily: globalTokens.type_sans,
hamburguerFontStyle: globalTokens.type_normal,
hamburguerFontColor: globalTokens.hal_black,
hamburguerFontSize: "10px",
hamburguerFontWeight: globalTokens.type_semibold,
hamburguerTextTransform: globalTokens.type_uppercase,
hamburguerIconColor: globalTokens.hal_black,
hamburguerHoverColor: globalTokens.mediumGreyBlack,
logo: "",
logoResponsive: "",
logoHeight: "40px",
logoWidth: "auto",
menuBackgroundColor: globalTokens.hal_white,
menuZindex: "2000",
menuTabletWidth: "60vw",
menuMobileWidth: "100vw",
minHeight: "64px",
overlayColor: globalTokens.softBlack,
overlayOpacity: "0.7",
overlayZindex: "1600",
paddingTop: "0px",
paddingBottom: "0px",
paddingRight: "24px",
paddingLeft: "24px",
underlinedColor: globalTokens.hal_black,
underlinedThickness: "2px",
underlinedStyle: "solid",
contentColor: globalTokens.hal_black,
contentColorOnDark: globalTokens.hal_white,
},
heading: {
level1FontColor: globalTokens.inherit,
level1FontFamily: globalTokens.type_sans,
level1FontSize: globalTokens.type_scale_07,
level1FontStyle: globalTokens.type_normal,
level1FontWeight: globalTokens.type_semibold,
level1LineHeight: globalTokens.type_leading_compact_01,
level1LetterSpacing: globalTokens.type_spacing_tight_01,
level2FontColor: globalTokens.inherit,
level2FontFamily: globalTokens.type_sans,
level2FontSize: globalTokens.type_scale_05,
level2FontStyle: globalTokens.type_normal,
level2FontWeight: globalTokens.type_semibold,
level2LineHeight: globalTokens.type_leading_normal,
level2LetterSpacing: globalTokens.type_spacing_normal,
level3FontColor: globalTokens.inherit,
level3FontFamily: globalTokens.type_sans,
level3FontSize: globalTokens.type_scale_04,
level3FontStyle: globalTokens.type_normal,
level3FontWeight: globalTokens.type_semibold,
level3LineHeight: globalTokens.type_leading_compact_01,
level3LetterSpacing: globalTokens.type_spacing_wide_01,
level4FontColor: globalTokens.inherit,
level4FontFamily: globalTokens.type_sans,
level4FontSize: globalTokens.type_scale_03,
level4FontStyle: globalTokens.type_normal,
level4FontWeight: globalTokens.type_semibold,
level4LineHeight: globalTokens.type_leading_normal,
level4LetterSpacing: globalTokens.type_spacing_normal,
level5FontColor: globalTokens.inherit,
level5FontFamily: globalTokens.type_sans,
level5FontSize: globalTokens.type_scale_02,
level5FontStyle: globalTokens.type_normal,
level5FontWeight: globalTokens.type_semibold,
level5LineHeight: globalTokens.type_leading_normal,
level5LetterSpacing: globalTokens.type_spacing_wide_01,
},
textInput: {
fontFamily: globalTokens.type_sans,
enabledBorderColor: globalTokens.hal_black,
enabledBorderColorOnDark: globalTokens.hal_white,
hoverBorderColor: globalTokens.hal_purple_l_65,
hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
focusBorderColor: globalTokens.hal_blue_l_50,
focusBorderColorOnDark: globalTokens.hal_blue_l_50,
disabledBorderColor: globalTokens.hal_grey_l_60,
disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
disabledContainerFillColor: globalTokens.hal_grey_l_95,
disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
errorBorderColor: globalTokens.hal_red_s_41,
errorBorderColorOnDark: globalTokens.hal_red_l_60,
hoverErrorBorderColor: globalTokens.color_red_600,
hoverErrorBorderColorOnDark: "#fe677b",
inputMarginTop: globalTokens.spacing_02,
inputMarginBottom: globalTokens.spacing_02,
errorMessageColor: globalTokens.hal_red_s_41,
errorMessageColorOnDark: globalTokens.hal_red_l_60,
errorIconColor: globalTokens.hal_red_s_41,
errorIconColorOnDark: globalTokens.hal_red_l_60,
labelFontColor: globalTokens.hal_black,
labelFontColorOnDark: globalTokens.hal_white,
labelFontSize: globalTokens.type_scale_02,
labelFontStyle: globalTokens.type_normal,
labelFontWeight: globalTokens.type_semibold,
labelLineHeight: globalTokens.type_leading_loose_01,
disabledLabelFontColor: globalTokens.hal_grey_l_60,
disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
optionalLabelFontWeight: globalTokens.type_regular,
helperTextFontColor: globalTokens.hal_black,
helperTextFontColorOnDark: globalTokens.hal_white,
helperTextFontSize: globalTokens.type_scale_01,
helperTextFontStyle: globalTokens.type_normal,
helperTextFontWeight: globalTokens.type_regular,
helperTextLineHeight: globalTokens.type_leading_normal,
disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
prefixColor: globalTokens.hal_grey_s_40,
prefixColorOnDark: globalTokens.hal_white,
suffixColor: globalTokens.hal_grey_s_40,
suffixColorOnDark: globalTokens.hal_white,
disabledPrefixColor: globalTokens.hal_grey_l_75,
disabledSuffixColor: globalTokens.hal_grey_l_75,
disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
placeholderFontColor: "#000000b3",
placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
valueFontColor: globalTokens.hal_black,
valueFontColorOnDark: globalTokens.hal_white,
valueFontSize: globalTokens.type_scale_03,
valueFontStyle: globalTokens.type_normal,
valueFontWeight: globalTokens.type_regular,
disabledValueFontColor: globalTokens.hal_grey_l_60,
disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
actionIconColor: globalTokens.hal_black,
actionIconColorOnDark: globalTokens.hal_white,
disabledActionIconColor: globalTokens.hal_grey_l_60,
disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
hoverActionIconColor: globalTokens.hal_black,
hoverActionIconColorOnDark: globalTokens.hal_white,
focusActionIconColor: globalTokens.hal_black,
focusActionIconColorOnDark: globalTokens.hal_white,
activeActionIconColor: globalTokens.hal_black,
activeActionIconColorOnDark: globalTokens.hal_black,
actionBackgroundColor: globalTokens.transparent,
actionBackgroundColorOnDark: globalTokens.transparent,
disabledActionBackgroundColor: globalTokens.transparent,
disabledActionBackgroundColorOnDark: globalTokens.transparent,
hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
focusActionBorderColor: globalTokens.hal_blue_l_50,
focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
activeActionBackgroundColor: globalTokens.hal_grey_l_80,
activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
listDialogBackgroundColor: globalTokens.hal_white,
listDialogBorderColor: globalTokens.hal_grey_l_75,
listOptionDividerColor: globalTokens.hal_grey_l_90,
listOptionFontColor: globalTokens.hal_black,
listOptionFontSize: globalTokens.type_scale_02,
listOptionFontStyle: globalTokens.type_normal,
listOptionFontWeight: globalTokens.type_regular,
systemMessageFontColor: globalTokens.hal_grey_s_40,
errorListDialogFontColor: globalTokens.hal_black,
errorListDialogBackgroundColor: globalTokens.color_red_50,
errorListDialogBorderColor: globalTokens.hal_red_s_41,
hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
focusListOptionBorderColor: globalTokens.hal_blue_l_50,
},
link: {
fontColor: globalTokens.hal_blue_s_35,
fontFamily: globalTokens.inherit,
fontSize: globalTokens.inherit,
fontStyle: globalTokens.type_normal,
fontWeight: globalTokens.type_regular,
iconSize: "16px",
iconSpacing: "4px",
underlineSpacing: "0px",
underlineStyle: "solid",
underlineThickness: "1px",
disabledColor: globalTokens.lightGrey,
hoverFontColor: globalTokens.hal_blue_s_35,
hoverUnderlineColor: globalTokens.hal_blue_s_35,
visitedFontColor: globalTokens.purple,
visitedUnderlineColor: globalTokens.purple,
activeFontColor: globalTokens.black,
activeUnderlineColor: globalTokens.black,
focusColor: globalTokens.hal_blue_l_50,
},
paragraph: {
fontColor: globalTokens.hal_black,
fontColorOnDark: globalTokens.hal_white,
display: "block",
fontSize: globalTokens.type_scale_03,
fontWeight: globalTokens.type_regular,
},
paginator: {
backgroundColor: globalTokens.darkWhite,
fontColor: globalTokens.hal_black,
fontFamily: globalTokens.type_sans,
fontSize: globalTokens.type_scale_02,
fontStyle: globalTokens.type_normal,
fontWeight: globalTokens.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",
},
progressBar: {
trackLineColor: globalTokens.hal_purple_s_38,
trackLineColorOnDark: globalTokens.hal_purple_l_65,
totalLineColor: globalTokens.softGrey,
labelFontFamily: globalTokens.type_sans,
labelFontSize: globalTokens.type_scale_01,
labelFontStyle: globalTokens.type_normal,
labelFontWeight: globalTokens.type_regular,
labelFontColor: globalTokens.black,
labelFontColorOnDark: globalTokens.hal_white,
labelFontTextTransform: globalTokens.type_uppercase,
valueFontFamily: globalTokens.type_sans,
valueFontSize: globalTokens.type_scale_01,
valueFontStyle: globalTokens.type_normal,
valueFontWeight: globalTokens.type_regular,
valueFontColor: globalTokens.black,
valueFontColorOnDark: globalTokens.hal_white,
valueFontTextTransform: globalTokens.type_uppercase,
helperTextFontColor: globalTokens.black,
helperTextFontColorOnDark: globalTokens.hal_white,
helperTextFontSize: globalTokens.type_scale_01,
helperTextFontStyle: globalTokens.type_normal,
helperTextFontWeight: globalTokens.type_regular,
helperTextFontFamily: globalTokens.type_sans,
thickness: "9px",
borderRadius: "5px",
overlayColor: globalTokens.black,
overlayOpacity: "0.8",
},
quickNav: {
fontColor: globalTokens.hal_grey_s_40,
hoverFontColor: globalTokens.hal_purple_d_70,
dividerBorderColor: globalTokens.hal_grey_l_75,
focusBorderColor: globalTokens.hal_blue_l_50,
focusBorderStyle: globalTokens.border_solid,
focusBorderThickness: globalTokens.border_width_2,
focusBorderRadius: globalTokens.border_width_2,
paddingTop: globalTokens.spacing_03,
paddingBottom: globalTokens.spacing_03,
paddingLeft: globalTokens.spacing_05,
paddingRight: globalTokens.spacing_05,
fontFamily: globalTokens.type_sans,
fontSize: globalTokens.type_scale_02,
fontStyle: globalTokens.type_normal,
fontWeight: globalTokens.type_regular,
},
radioGroup: {
fontFamily: globalTokens.type_sans,
radioInputColor: globalTokens.hal_blue_l_45,
hoverRadioInputColor: globalTokens.hal_blue_s_35,
focusBorderColor: globalTokens.hal_blue_l_50,
activeRadioInputColor: globalTokens.hal_blue_d_20,
errorRadioInputColor: globalTokens.hal_red_s_41,
hoverErrorRadioInputColor: globalTokens.hal_red_d_30,
activeErrorRadioInputColor: globalTokens.hal_red_d_20,
readonlyRadioInputColor: globalTokens.hal_grey_l_60,
hoverReadonlyRadioInputColor: globalTokens.color_grey_600,
activeReadonlyRadioInputColor: globalTokens.hal_grey_s_40,
disabledRadioInputColor: globalTokens.hal_grey_l_60,
disabledLabelFontColor: globalTokens.hal_grey_l_60,
disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
disabledRadioInputLabelFontColor: globalTokens.hal_grey_l_60,
errorMessageColor: globalTokens.hal_red_s_41,
labelFontColor: globalTokens.hal_black,
labelFontSize: globalTokens.type_scale_02,
labelFontStyle: globalTokens.type_normal,
labelFontWeight: globalTokens.type_semibold,
labelLineHeight: globalTokens.type_leading_loose_01,
optionalLabelFontWeight: globalTokens.type_regular,
helperTextFontColor: globalTokens.hal_black,
helperTextFontSize: globalTokens.type_scale_01,
helperTextFontStyle: globalTokens.type_normal,
helperTextFontWeight: globalTokens.type_regular,
helperTextLineHeight: globalTokens.type_leading_normal,
radioInputLabelFontColor: globalTokens.hal_black,
radioInputLabelFontSize: globalTokens.type_scale_02,
radioInputLabelFontStyle: globalTokens.type_normal,
radioInputLabelFontWeight: globalTokens.type_regular,
radioInputLabelLineHeight: globalTokens.type_leading_loose_01,
groupLabelMargin: globalTokens.spacing_03,
radioInputLabelMargin: globalTokens.spacing_03,
groupVerticalGutter: globalTokens.spacing_02,
groupHorizontalGutter: globalTokens.spacing_07,
},
select: {
fontFamily: globalTokens.type_sans,
disabledColor: globalTokens.hal_grey_l_60,
enabledInputBorderColor: globalTokens.hal_black,
hoverInputBorderColor: globalTokens.hal_purple_l_65,
focusInputBorderColor: globalTokens.hal_blue_l_50,
errorInputBorderColor: globalTokens.hal_red_s_41,
hoverInputErrorBorderColor: globalTokens.color_red_600,
disabledInputBorderColor: globalTokens.hal_grey_l_60,
disabledInputBackgroundColor: globalTokens.hal_grey_l_95,
inputMarginTop: globalTokens.spacing_02,
inputMarginBottom: globalTokens.spacing_02,
errorMessageColor: globalTokens.hal_red_s_41,
errorIconColor: globalTokens.hal_red_s_41,
labelFontColor: globalTokens.hal_black,
labelFontSize: globalTokens.type_scale_02,
labelFontStyle: globalTokens.type_normal,
labelFontWeight: globalTokens.type_semibold,
labelLineHeight: globalTokens.type_leading_loose_01,
optionalLabelFontWeight: globalTokens.type_regular,
helperTextFontColor: globalTokens.hal_black,
helperTextFontSize: globalTokens.type_scale_01,
helperTextFontStyle: globalTokens.type_normal,
helperTextFontWeight: globalTokens.type_regular,
helperTextLineHeight: globalTokens.type_leading_normal,
placeholderFontColor: "#000000b3",
valueFontColor: globalTokens.hal_black,
valueFontSize: globalTokens.type_scale_03,
valueFontStyle: globalTokens.type_normal,
valueFontWeight: globalTokens.type_regular,
actionIconColor: globalTokens.hal_black,
hoverActionIconColor: globalTokens.hal_black,
activeActionIconColor: globalTokens.hal_black,
actionBackgroundColor: globalTokens.transparent,
hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
activeActionBackgroundColor: globalTokens.hal_grey_l_80,
listOptionFontColor: globalTokens.hal_black,
listOptionFontSize: globalTokens.type_scale_02,
listOptionFontStyle: globalTokens.type_normal,
listOptionFontWeight: globalTokens.type_regular,
listOptionIconColor: globalTokens.hal_black,
listOptionDividerColor: globalTokens.hal_grey_l_90,
listGroupLabelFontWeight: globalTokens.type_semibold,
focusListOptionBorderColor: globalTokens.hal_blue_l_50,
systemMessageFontColor: globalTokens.hal_grey_s_40,
collapseIndicatorColor: globalTokens.hal_black,
listDialogBackgroundColor: globalTokens.hal_white,
listDialogBorderColor: globalTokens.hal_grey_l_75,
selectedListOptionBackgroundColor: globalTokens.hal_blue_l_95,
selectedHoverListOptionBackgroundColor: globalTokens.color_blue_200,
selectedActiveListOptionBackgroundColor: globalTokens.hal_blue_l_80,
selectedListOptionIconColor: globalTokens.hal_blue_d_20,
unselectedHoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
unselectedActiveListOptionBackgroundColor: globalTokens.hal_grey_l_90,
selectionIndicatorFontColor: globalTokens.hal_black,
selectionIndicatorFontSize: globalTokens.type_scale_01,
selectionIndicatorFontStyle: globalTokens.type_regular,
selectionIndicatorFontWeight: globalTokens.type_normal,
selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
activeSelectionIndicatorActionIconColor: globalTokens.hal_black,
},
sidenav: {
backgroundColor: globalTokens.hal_grey_l_95,
arrowContainerColor: globalTokens.hal_grey_l_90,
arrowColor: globalTokens.hal_black,
titleFontFamily: globalTokens.type_sans,
titleFontSize: globalTokens.type_scale_04,
titleFontStyle: globalTokens.type_normal,
titleFontWeight: globalTokens.type_semibold,
titleFontColor: globalTokens.color_grey_800,
titleFontTextTransform: "none",
titleFontLetterSpacing: globalTokens.type_spacing_normal,
groupTitleFontFamily: globalTokens.type_sans,
groupTitleFontSize: globalTokens.type_scale_02,
groupTitleFontStyle: globalTokens.type_normal,
groupTitleFontWeight: globalTokens.type_semibold,
groupTitleFontColor: globalTokens.black,
groupTitleHoverBackgroundColor: globalTokens.hal_grey_l_90,
groupTitleActiveBackgroundColor: globalTokens.hal_grey_l_80,
groupTitleSelectedFontColor: globalTokens.white,
groupTitleSelectedBackgroundColor: globalTokens.color_grey_800,
groupTitleSelectedHoverFontColor: globalTokens.white,
groupTitleSelectedHoverBackgroundColor: globalTokens.color_grey_600,
groupTitleFontTextTransform: globalTokens.type_uppercase,
groupTitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
linkFontFamily: globalTokens.type_sans,
linkFontSize: globalTokens.type_scale_02,
linkFontStyle: globalTokens.type_normal,
linkFontWeight: globalTokens.type_regular,
linkFontColor: globalTokens.color_grey_800,
linkHoverBackgroundColor: globalTokens.hal_grey_l_90,
linkSelectedFontColor: globalTokens.white,
linkSelectedBackgroundColor: globalTokens.color_grey_800,
linkSelectedHoverFontColor: globalTokens.white,
linkSelectedHoverBackgroundColor: globalTokens.color_grey_600,
linkFontTextTransform: "none",
linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
linkTextDecoration: globalTokens.type_no_line,
linkMarginTop: "4px",
linkMarginBottom: "4px",
linkMarginRight: "16px",
linkMarginLeft: "16px",
linkFocusColor: globalTokens.hal_blue_l_50,
scrollBarThumbColor: "#66666626",
scrollBarTrackColor: globalTokens.transparent,
},
slider: {
fontFamily: globalTokens.type_sans,
limitValuesFontColor: globalTokens.hal_black,
limitValuesFontColorOnDark: globalTokens.hal_white,
limitValuesFontSize: globalTokens.type_scale_03,
limitValuesFontStyle: globalTokens.type_normal,
limitValuesFontWeight: globalTokens.type_regular,
limitValuesFontLetterSpacing: globalTokens.type_spacing_normal,
disabledLimitValuesFontColor: globalTokens.hal_grey_l_60,
labelFontFamily: globalTokens.type_sans,
labelFontSize: globalTokens.type_scale_02,
labelFontStyle: globalTokens.type_normal,