@dxc-technology/halstack-react 8.0.0 → 9.0.0

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 (88) hide show
  1. package/HalstackContext.js +94 -45
  2. package/accordion/Accordion.js +7 -13
  3. package/accordion/Accordion.stories.tsx +102 -13
  4. package/alert/Alert.stories.tsx +28 -0
  5. package/box/Box.js +1 -3
  6. package/box/Box.stories.tsx +15 -0
  7. package/button/Button.js +11 -13
  8. package/button/Button.stories.tsx +150 -8
  9. package/checkbox/Checkbox.stories.tsx +52 -0
  10. package/chip/Chip.js +16 -22
  11. package/chip/Chip.stories.tsx +96 -9
  12. package/common/variables.js +280 -288
  13. package/date-input/Calendar.d.ts +1 -1
  14. package/date-input/Calendar.js +43 -43
  15. package/date-input/DateInput.js +74 -32
  16. package/date-input/DateInput.stories.tsx +183 -30
  17. package/date-input/DateInput.test.js +120 -37
  18. package/date-input/DatePicker.js +38 -52
  19. package/date-input/Icons.d.ts +6 -0
  20. package/date-input/Icons.js +75 -0
  21. package/date-input/YearPicker.d.ts +1 -1
  22. package/date-input/YearPicker.js +23 -12
  23. package/date-input/types.d.ts +6 -8
  24. package/dialog/Dialog.js +60 -73
  25. package/dialog/Dialog.stories.tsx +211 -159
  26. package/dialog/Dialog.test.js +301 -2
  27. package/dropdown/Dropdown.js +3 -6
  28. package/dropdown/Dropdown.stories.tsx +210 -84
  29. package/dropdown/DropdownMenu.js +8 -18
  30. package/dropdown/DropdownMenuItem.js +4 -15
  31. package/file-input/FileInput.js +3 -6
  32. package/file-input/FileInput.stories.tsx +85 -2
  33. package/file-input/FileInput.test.js +0 -41
  34. package/file-input/FileItem.js +1 -0
  35. package/footer/Footer.stories.tsx +91 -0
  36. package/header/Header.js +18 -20
  37. package/header/Header.stories.tsx +149 -6
  38. package/link/Link.stories.tsx +60 -0
  39. package/main.d.ts +1 -1
  40. package/main.js +1 -1
  41. package/{tabs-nav → nav-tabs}/NavTabs.js +1 -1
  42. package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx +96 -6
  43. package/{tabs-nav → nav-tabs}/Tab.js +35 -15
  44. package/package.json +1 -1
  45. package/paginator/Icons.d.ts +5 -0
  46. package/paginator/Icons.js +16 -28
  47. package/paginator/Paginator.js +5 -11
  48. package/paginator/Paginator.stories.tsx +24 -0
  49. package/paginator/Paginator.test.js +17 -10
  50. package/progress-bar/ProgressBar.js +4 -4
  51. package/progress-bar/ProgressBar.stories.jsx +35 -2
  52. package/quick-nav/QuickNav.stories.tsx +14 -0
  53. package/radio-group/RadioGroup.stories.tsx +131 -18
  54. package/resultsetTable/ResultsetTable.test.js +17 -22
  55. package/select/Listbox.d.ts +1 -1
  56. package/select/Listbox.js +5 -34
  57. package/select/Option.js +11 -24
  58. package/select/Select.js +43 -24
  59. package/select/Select.stories.tsx +492 -145
  60. package/select/Select.test.js +17 -22
  61. package/select/types.d.ts +2 -2
  62. package/sidenav/Sidenav.js +8 -10
  63. package/sidenav/Sidenav.stories.tsx +148 -46
  64. package/slider/Slider.js +4 -4
  65. package/slider/Slider.stories.tsx +57 -0
  66. package/spinner/Spinner.js +2 -2
  67. package/spinner/Spinner.stories.jsx +27 -1
  68. package/switch/Switch.js +1 -1
  69. package/switch/Switch.stories.tsx +33 -0
  70. package/table/Table.stories.jsx +80 -1
  71. package/tabs/Tab.js +3 -5
  72. package/tabs/Tabs.js +3 -3
  73. package/tabs/Tabs.stories.tsx +45 -5
  74. package/tag/Tag.stories.tsx +14 -1
  75. package/text-input/Suggestion.js +32 -5
  76. package/text-input/TextInput.js +7 -11
  77. package/text-input/TextInput.stories.tsx +92 -4
  78. package/text-input/TextInput.test.js +125 -25
  79. package/textarea/Textarea.stories.jsx +60 -1
  80. package/toggle-group/ToggleGroup.stories.tsx +42 -0
  81. package/utils/FocusLock.d.ts +13 -0
  82. package/utils/FocusLock.js +139 -0
  83. package/wizard/Wizard.stories.tsx +20 -0
  84. /package/{tabs-nav → nav-tabs}/NavTabs.d.ts +0 -0
  85. /package/{tabs-nav → nav-tabs}/NavTabs.test.js +0 -0
  86. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
  87. /package/{tabs-nav → nav-tabs}/types.d.ts +0 -0
  88. /package/{tabs-nav → nav-tabs}/types.js +0 -0
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
6
+ exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
7
7
  var globalTokens = {
8
8
  // Color
9
9
  inherit: "inherit",
@@ -20,15 +20,18 @@ var globalTokens = {
20
20
  color_grey_600: "#808080",
21
21
  color_grey_50: "#fafafa",
22
22
  color_grey_a_100: "#0000000d",
23
+ color_grey_a_200: "#0000001a",
23
24
  color_grey_a_300: "#00000033",
25
+ color_grey_a_800: "#000000b3",
26
+ color_grey_a_900: "#333333",
24
27
  hal_purple_l_95: "#f2eafa",
25
28
  hal_purple_l_90: "#e5d5f6",
26
29
  hal_purple_l_65: "#a46ede",
27
30
  hal_purple_s_38: "#5f249f",
28
31
  hal_purple_d_30: "#4b1c7d",
29
32
  hal_purple_d_20: "#321353",
30
- hal_purple_d_70: "#9A6BB2",
31
- color_purple_600: "#7D2FD0",
33
+ hal_purple_d_70: "#9A6bb2",
34
+ color_purple_600: "#7d2fd0",
32
35
  color_purple_300: "#cbacec",
33
36
  hal_blue_l_95: "#e6f4ff",
34
37
  hal_blue_l_80: "#99d5ff",
@@ -37,7 +40,7 @@ var globalTokens = {
37
40
  hal_blue_s_35: "#0067b3",
38
41
  hal_blue_d_20: "#003c66",
39
42
  color_blue_200: "#cceaff",
40
- color_blue_500: "#33AAFF",
43
+ color_blue_500: "#33aaff",
41
44
  color_blue_50: "#f5fbff",
42
45
  hal_red_l_95: "#ffe6e9",
43
46
  hal_red_l_80: "#fe9aa7",
@@ -46,7 +49,7 @@ var globalTokens = {
46
49
  hal_red_d_30: "#980115",
47
50
  hal_red_d_20: "#65010e",
48
51
  color_red_700: "#ffccd3",
49
- color_red_50: "#FFF5F6",
52
+ color_red_50: "#fff5f6",
50
53
  color_red_600: "#fe0123",
51
54
  hal_green_l_95: "#eafaef",
52
55
  hal_green_l_80: "#acecbe",
@@ -59,36 +62,28 @@ var globalTokens = {
59
62
  hal_yellow_d_40: "#c59f07",
60
63
  hal_yellow_d_30: "#947705",
61
64
  hal_orange_s_54: "#f38f20",
62
- black: "#000000",
63
65
  lightBlack: "#212121",
64
- yellow: "#FFED00",
65
- lightGrey: "#D9D9D9",
66
- darkRed: "#D0011B",
67
- lightRed: "#FF6161",
68
- lightBlue: "#CEE0F5",
69
- lightYellow: "#FCF2BD",
70
- lightPink: "#F9CFCF",
71
- lightGreen: "#DBF1C4",
72
- blue: "#005FCC",
73
- lighterGrey: "#F8F8F8",
74
- red: "#D0011B",
75
- violet: "#8800F6",
76
- darkBlue: "#006BF6",
66
+ yellow: "#ffed00",
67
+ lightGrey: "#d9d9d9",
68
+ lightRed: "#ff6161",
69
+ lightBlue: "#cee0f5",
70
+ lightYellow: "#fcf2bd",
71
+ lightPink: "#f9cfcf",
72
+ lightGreen: "#dbf1c4",
73
+ blue: "#005fcc",
74
+ lighterGrey: "#f8f8f8",
75
+ violet: "#8800f6",
76
+ darkBlue: "#006bf6",
77
77
  purple: "#6f2c91",
78
78
  mediumPurple: "#ead8f3",
79
79
  lightPurple: "#f5ebf9",
80
80
  lighterPurple: "#d0bddb",
81
- white: "#ffffff",
82
- darkGrey: "#666666",
83
- mediumGrey: "#bfbfbf",
84
81
  mediumWhite: "#f9f9f9",
85
- mediumBlue: "#0067b3",
86
82
  softBlue: "#b1cee6",
87
83
  darkWhite: "#eeeeee",
88
84
  lighterBlack: "#b1b1b1",
89
85
  mediumBlack: "#676767",
90
86
  mediumGreyBlack: "#dbdbdb",
91
- lightWhite: "#f2f2f2",
92
87
  softGrey: "#cecece",
93
88
  softBlack: "#565656",
94
89
  // Typography
@@ -184,22 +179,22 @@ var componentTokens = {
184
179
  titleLabelPaddingLeft: "0px",
185
180
  titleLabelPaddingRight: "16px",
186
181
  focusBorderColor: globalTokens.hal_blue_l_50,
187
- focusBorderStyle: "solid",
182
+ focusBorderStyle: globalTokens.border_solid,
188
183
  focusBorderThickness: "2px",
189
184
  borderRadius: "4px",
190
185
  boxShadowOffsetX: "0px",
191
186
  boxShadowOffsetY: "6px",
192
187
  boxShadowBlur: "10px",
193
- boxShadowColor: "#0000001a",
188
+ boxShadowColor: globalTokens.color_grey_a_200,
194
189
  iconColor: globalTokens.hal_purple_s_38,
195
190
  disabledIconColor: globalTokens.hal_grey_l_60,
196
191
  iconSize: "24px",
197
192
  iconMarginLeft: "0px",
198
193
  iconMarginRigth: "12px",
199
- accordionGroupSeparatorBorderColor: "#0000001a",
194
+ accordionGroupSeparatorBorderColor: globalTokens.color_grey_a_200,
200
195
  accordionGroupSeparatorBorderThickness: "1px",
201
196
  accordionGroupSeparatorBorderRadius: "0px",
202
- accordionGroupSeparatorBorderStyle: "solid"
197
+ accordionGroupSeparatorBorderStyle: globalTokens.border_solid
203
198
  },
204
199
  alert: {
205
200
  titleFontFamily: globalTokens.type_sans,
@@ -222,7 +217,7 @@ var componentTokens = {
222
217
  contentPaddingTop: "20px",
223
218
  contentPaddingBottom: "30px",
224
219
  borderRadius: "4px",
225
- borderStyle: "solid",
220
+ borderStyle: globalTokens.border_solid,
226
221
  borderThickness: "1px",
227
222
  infoBorderColor: globalTokens.hal_blue_s_35,
228
223
  successBorderColor: globalTokens.hal_green_s_39,
@@ -240,16 +235,15 @@ var componentTokens = {
240
235
  warningBackgroundColor: globalTokens.hal_yellow_l_95,
241
236
  errorBackgroundColor: globalTokens.hal_red_l_95,
242
237
  hoverActionBackgroundColor: globalTokens.color_grey_a_100,
243
- activeActionBackgroundColor: "#0000001A",
238
+ activeActionBackgroundColor: globalTokens.color_grey_a_200,
244
239
  focusActionBorderColor: globalTokens.hal_blue_l_50,
245
- overlayColor: "#000000B3"
240
+ overlayColor: globalTokens.color_grey_a_800
246
241
  },
247
242
  box: {
248
- backgroundColor: globalTokens.white,
249
- letterSpacing: globalTokens.type_spacing_wide_01,
250
- borderRadius: "4px",
251
- borderThickness: "0px",
252
- borderStyle: "none",
243
+ backgroundColor: globalTokens.hal_white,
244
+ borderRadius: globalTokens.border_radius_medium,
245
+ borderThickness: globalTokens.border_width_0,
246
+ borderStyle: globalTokens.border_none,
253
247
  borderColor: globalTokens.transparent,
254
248
  noneShadowDepthShadowOffsetX: "none",
255
249
  noneShadowDepthShadowOffsetY: "none",
@@ -389,57 +383,71 @@ var componentTokens = {
389
383
  disabledFontColor: globalTokens.hal_grey_l_60,
390
384
  borderColor: globalTokens.transparent,
391
385
  borderRadius: "80px",
392
- borderThickness: "0px",
393
- borderStyle: "solid",
386
+ borderThickness: globalTokens.border_width_0,
387
+ borderStyle: globalTokens.border_solid,
394
388
  contentPaddingLeft: "16px",
395
389
  contentPaddingRight: "16px",
396
390
  contentPaddingTop: "0px",
397
391
  contentPaddingBottom: "0px",
398
392
  iconSize: "24px",
399
393
  iconSpacing: "8px",
400
- iconColor: globalTokens.hal_black,
394
+ iconColor: globalTokens.color_grey_800,
395
+ hoverIconColor: globalTokens.color_grey_a_900,
396
+ activeIconColor: globalTokens.hal_black,
401
397
  disabledIconColor: globalTokens.hal_grey_l_60,
402
- focusColor: globalTokens.hal_blue_l_50
398
+ focusColor: globalTokens.hal_blue_l_50,
399
+ focusBorderStyle: globalTokens.border_solid,
400
+ focusBorderThickness: globalTokens.border_width_2,
401
+ focusBorderRadius: globalTokens.border_radius_medium
403
402
  },
404
403
  dateInput: {
405
- pickerFontFamily: globalTokens.type_sans,
406
404
  pickerBackgroundColor: globalTokens.hal_white,
407
- pickerHoverDateFontColor: globalTokens.hal_black,
408
- pickerHoverDateBackgroundColor: globalTokens.hal_purple_l_90,
409
- pickerSelectedDateColor: globalTokens.hal_white,
410
- pickerSelectedDateBackgroundColor: globalTokens.hal_purple_s_38,
411
- pickerActualDateFontColor: globalTokens.hal_black,
412
- pickerYearFontColor: globalTokens.hal_black,
413
- pickerMonthFontColor: globalTokens.hal_black,
414
- pickerWeekFontColor: globalTokens.hal_black,
415
- pickerDayFontColor: globalTokens.hal_black,
416
- pickerMonthArrowsBackgroundColor: globalTokens.transparent,
405
+ pickerFontColor: globalTokens.hal_black,
406
+ pickerBorderColor: globalTokens.hal_grey_l_75,
407
+ pickerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
408
+ pickerSelectedFontColor: globalTokens.hal_white,
409
+ pickerHoverBackgroundColor: globalTokens.hal_purple_l_90,
410
+ pickerHoverFontColor: globalTokens.hal_black,
411
+ pickerActiveBackgroundColor: globalTokens.hal_purple_d_30,
412
+ pickerActiveFontColor: globalTokens.hal_white,
413
+ pickerNonCurrentMonthFontColor: globalTokens.hal_grey_l_60,
414
+ pickerCurrentDateBorderColor: globalTokens.color_purple_300,
415
+ pickerCurrentDateFontColor: globalTokens.hal_black,
416
+ pickerCurrentYearFontColor: globalTokens.hal_purple_s_38,
417
+ pickerHeaderBackgroundColor: globalTokens.transparent,
418
+ pickerHeaderFontColor: globalTokens.hal_black,
419
+ pickerHeaderHoverBackgroundColor: globalTokens.hal_purple_l_90,
420
+ pickerHeaderHoverFontColor: globalTokens.hal_black,
421
+ pickerHeaderActiveBackgroundColor: globalTokens.hal_purple_d_30,
422
+ pickerHeaderActiveFontColor: globalTokens.hal_white,
417
423
  pickerFocusColor: globalTokens.hal_blue_l_50,
418
- pickerHeight: "316px",
419
- // not referenced in the actual implementation
420
- pickerWidth: "292px"
424
+ pickerBorderWidth: globalTokens.border_width_1,
425
+ pickerBorderStyle: globalTokens.border_solid,
426
+ pickerFocusWidth: globalTokens.border_width_2,
427
+ pickerCurrentDateBorderWidth: globalTokens.border_width_1,
428
+ pickerFontFamily: globalTokens.type_sans,
429
+ pickerFontSize: globalTokens.type_scale_02,
430
+ pickerFontWeight: globalTokens.type_regular,
431
+ pickerInteractedYearFontSize: globalTokens.type_scale_05,
432
+ pickerHeaderFontSize: globalTokens.type_scale_02
421
433
  },
422
434
  dialog: {
423
- overlayColor: globalTokens.hal_black,
435
+ overlayColor: globalTokens.color_grey_a_800,
424
436
  backgroundColor: globalTokens.hal_white,
425
437
  closeIconWidth: "24px",
426
438
  closeIconHeight: "24px",
427
439
  closeIconTopPosition: "20px",
428
440
  closeIconRightPosition: "20px",
429
- closeIconBackgroundColor: "none",
430
- closeIconBorderColor: "none",
441
+ closeIconBackgroundColor: globalTokens.transparent,
442
+ closeIconBorderColor: globalTokens.border_none,
431
443
  closeIconColor: globalTokens.hal_black,
432
- closeIconBorderThickness: "0px",
433
- closeIconBorderStyle: "solid",
434
- closeIconBorderRadius: "0px",
444
+ closeIconBorderThickness: globalTokens.border_width_0,
445
+ closeIconBorderStyle: globalTokens.border_solid,
446
+ closeIconBorderRadius: "2px",
435
447
  boxShadowOffsetX: "0px",
436
448
  boxShadowOffsetY: "1px",
437
449
  boxShadowBlur: "3px",
438
- boxShadowColor: "rgba(0, 0, 0, 0.2)",
439
- overlayOpacity: "0.7",
440
- fontFamily: globalTokens.type_sans,
441
- fontSize: globalTokens.type_scale_03,
442
- fontWeight: globalTokens.type_regular
450
+ boxShadowColor: globalTokens.color_grey_a_300
443
451
  },
444
452
  dropdown: {
445
453
  buttonBackgroundColor: globalTokens.hal_white,
@@ -457,12 +465,12 @@ var componentTokens = {
457
465
  buttonPaddingBottom: "0px",
458
466
  buttonPaddingLeft: "16px",
459
467
  buttonPaddingRight: "16px",
460
- disabledColor: globalTokens.lighterBlack,
468
+ disabledColor: globalTokens.hal_grey_l_60,
461
469
  disabledButtonBackgroundColor: globalTokens.transparent,
462
470
  disabledBorderColor: globalTokens.lighterBlack,
463
471
  optionBackgroundColor: globalTokens.hal_white,
464
472
  hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
465
- activeOptionBackgroundColor: globalTokens.lightGrey,
473
+ activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
466
474
  optionFontFamily: globalTokens.type_sans,
467
475
  optionFontSize: globalTokens.type_scale_root,
468
476
  optionFontStyle: globalTokens.type_normal,
@@ -479,8 +487,8 @@ var componentTokens = {
479
487
  caretIconColor: globalTokens.hal_black,
480
488
  caretIconSpacing: "12px",
481
489
  borderRadius: "4px",
482
- borderStyle: "none",
483
- borderThickness: "0px",
490
+ borderStyle: globalTokens.border_none,
491
+ borderThickness: globalTokens.border_width_0,
484
492
  borderColor: globalTokens.transparent,
485
493
  scrollBarThumbColor: globalTokens.hal_grey_s_40,
486
494
  scrollBarTrackColor: globalTokens.lightGrey,
@@ -544,7 +552,7 @@ var componentTokens = {
544
552
  backgroundColor: globalTokens.hal_black,
545
553
  bottomLinksDividerColor: globalTokens.hal_blue_l_50,
546
554
  bottomLinksDividerThickness: "1px",
547
- bottomLinksDividerStyle: "solid",
555
+ bottomLinksDividerStyle: globalTokens.border_solid,
548
556
  bottomLinksDividerSpacing: "8px",
549
557
  bottomLinksFontFamily: globalTokens.type_sans,
550
558
  bottomLinksFontSize: globalTokens.type_scale_01,
@@ -574,7 +582,7 @@ var componentTokens = {
574
582
  hamburguerFontWeight: globalTokens.type_semibold,
575
583
  hamburguerTextTransform: globalTokens.type_uppercase,
576
584
  hamburguerIconColor: globalTokens.hal_black,
577
- hamburguerHoverColor: globalTokens.mediumGreyBlack,
585
+ hamburguerHoverColor: globalTokens.hal_grey_l_90,
578
586
  logo: "",
579
587
  logoResponsive: "",
580
588
  logoHeight: "40px",
@@ -584,7 +592,7 @@ var componentTokens = {
584
592
  menuTabletWidth: "60vw",
585
593
  menuMobileWidth: "100vw",
586
594
  minHeight: "64px",
587
- overlayColor: globalTokens.softBlack,
595
+ overlayColor: globalTokens.color_grey_a_800,
588
596
  overlayOpacity: "0.7",
589
597
  overlayZindex: "1600",
590
598
  paddingTop: "0px",
@@ -593,7 +601,7 @@ var componentTokens = {
593
601
  paddingLeft: "24px",
594
602
  underlinedColor: globalTokens.hal_black,
595
603
  underlinedThickness: "2px",
596
- underlinedStyle: "solid",
604
+ underlinedStyle: globalTokens.border_solid,
597
605
  contentColor: globalTokens.hal_black,
598
606
  contentColorOnDark: globalTokens.hal_white
599
607
  },
@@ -634,99 +642,6 @@ var componentTokens = {
634
642
  level5LineHeight: globalTokens.type_leading_normal,
635
643
  level5LetterSpacing: globalTokens.type_spacing_wide_01
636
644
  },
637
- textInput: {
638
- fontFamily: globalTokens.type_sans,
639
- enabledBorderColor: globalTokens.hal_black,
640
- enabledBorderColorOnDark: globalTokens.hal_white,
641
- hoverBorderColor: globalTokens.hal_purple_l_65,
642
- hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
643
- focusBorderColor: globalTokens.hal_blue_l_50,
644
- focusBorderColorOnDark: globalTokens.hal_blue_l_50,
645
- disabledBorderColor: globalTokens.hal_grey_l_60,
646
- disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
647
- disabledContainerFillColor: globalTokens.hal_grey_l_95,
648
- disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
649
- errorBorderColor: globalTokens.hal_red_s_41,
650
- errorBorderColorOnDark: globalTokens.hal_red_l_60,
651
- hoverErrorBorderColor: globalTokens.color_red_600,
652
- hoverErrorBorderColorOnDark: "#fe677b",
653
- inputMarginTop: globalTokens.spacing_02,
654
- inputMarginBottom: globalTokens.spacing_02,
655
- errorMessageColor: globalTokens.hal_red_s_41,
656
- errorMessageColorOnDark: globalTokens.hal_red_l_60,
657
- errorIconColor: globalTokens.hal_red_s_41,
658
- errorIconColorOnDark: globalTokens.hal_red_l_60,
659
- labelFontColor: globalTokens.hal_black,
660
- labelFontColorOnDark: globalTokens.hal_white,
661
- labelFontSize: globalTokens.type_scale_02,
662
- labelFontStyle: globalTokens.type_normal,
663
- labelFontWeight: globalTokens.type_semibold,
664
- labelLineHeight: globalTokens.type_leading_loose_01,
665
- disabledLabelFontColor: globalTokens.hal_grey_l_60,
666
- disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
667
- optionalLabelFontWeight: globalTokens.type_regular,
668
- helperTextFontColor: globalTokens.hal_black,
669
- helperTextFontColorOnDark: globalTokens.hal_white,
670
- helperTextFontSize: globalTokens.type_scale_01,
671
- helperTextFontStyle: globalTokens.type_normal,
672
- helperTextFontWeight: globalTokens.type_regular,
673
- helperTextLineHeight: globalTokens.type_leading_normal,
674
- disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
675
- disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
676
- prefixColor: globalTokens.hal_grey_s_40,
677
- prefixColorOnDark: globalTokens.hal_white,
678
- suffixColor: globalTokens.hal_grey_s_40,
679
- suffixColorOnDark: globalTokens.hal_white,
680
- disabledPrefixColor: globalTokens.hal_grey_l_75,
681
- disabledSuffixColor: globalTokens.hal_grey_l_75,
682
- disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
683
- disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
684
- placeholderFontColor: "#000000b3",
685
- placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
686
- disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
687
- disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
688
- valueFontColor: globalTokens.hal_black,
689
- valueFontColorOnDark: globalTokens.hal_white,
690
- valueFontSize: globalTokens.type_scale_03,
691
- valueFontStyle: globalTokens.type_normal,
692
- valueFontWeight: globalTokens.type_regular,
693
- disabledValueFontColor: globalTokens.hal_grey_l_60,
694
- disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
695
- actionIconColor: globalTokens.hal_black,
696
- actionIconColorOnDark: globalTokens.hal_white,
697
- disabledActionIconColor: globalTokens.hal_grey_l_60,
698
- disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
699
- hoverActionIconColor: globalTokens.hal_black,
700
- hoverActionIconColorOnDark: globalTokens.hal_white,
701
- focusActionIconColor: globalTokens.hal_black,
702
- focusActionIconColorOnDark: globalTokens.hal_white,
703
- activeActionIconColor: globalTokens.hal_black,
704
- activeActionIconColorOnDark: globalTokens.hal_black,
705
- actionBackgroundColor: globalTokens.transparent,
706
- actionBackgroundColorOnDark: globalTokens.transparent,
707
- disabledActionBackgroundColor: globalTokens.transparent,
708
- disabledActionBackgroundColorOnDark: globalTokens.transparent,
709
- hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
710
- hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
711
- focusActionBorderColor: globalTokens.hal_blue_l_50,
712
- focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
713
- activeActionBackgroundColor: globalTokens.hal_grey_l_80,
714
- activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
715
- listDialogBackgroundColor: globalTokens.hal_white,
716
- listDialogBorderColor: globalTokens.hal_grey_l_75,
717
- listOptionDividerColor: globalTokens.hal_grey_l_90,
718
- listOptionFontColor: globalTokens.hal_black,
719
- listOptionFontSize: globalTokens.type_scale_02,
720
- listOptionFontStyle: globalTokens.type_normal,
721
- listOptionFontWeight: globalTokens.type_regular,
722
- systemMessageFontColor: globalTokens.hal_grey_s_40,
723
- errorListDialogFontColor: globalTokens.hal_black,
724
- errorListDialogBackgroundColor: globalTokens.color_red_50,
725
- errorListDialogBorderColor: globalTokens.hal_red_s_41,
726
- hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
727
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
728
- focusListOptionBorderColor: globalTokens.hal_blue_l_50
729
- },
730
645
  link: {
731
646
  fontColor: globalTokens.hal_blue_s_35,
732
647
  fontFamily: globalTokens.inherit,
@@ -736,26 +651,38 @@ var componentTokens = {
736
651
  iconSize: "16px",
737
652
  iconSpacing: "4px",
738
653
  underlineSpacing: "0px",
739
- underlineStyle: "solid",
654
+ underlineStyle: globalTokens.border_solid,
740
655
  underlineThickness: "1px",
741
656
  disabledColor: globalTokens.lightGrey,
742
657
  hoverFontColor: globalTokens.hal_blue_s_35,
743
658
  hoverUnderlineColor: globalTokens.hal_blue_s_35,
744
- visitedFontColor: globalTokens.purple,
745
- visitedUnderlineColor: globalTokens.purple,
746
- activeFontColor: globalTokens.black,
747
- activeUnderlineColor: globalTokens.black,
659
+ visitedFontColor: globalTokens.hal_purple_s_38,
660
+ visitedUnderlineColor: globalTokens.hal_purple_s_38,
661
+ activeFontColor: globalTokens.hal_black,
662
+ activeUnderlineColor: globalTokens.hal_black,
748
663
  focusColor: globalTokens.hal_blue_l_50
749
664
  },
750
- paragraph: {
751
- fontColor: globalTokens.hal_black,
752
- fontColorOnDark: globalTokens.hal_white,
753
- display: "block",
665
+ navTabs: {
666
+ selectedBackgroundColor: globalTokens.white,
667
+ unselectedBackgroundColor: globalTokens.white,
668
+ hoverBackgroundColor: globalTokens.hal_grey_l_95,
669
+ pressedBackgroundColor: globalTokens.hal_grey_l_90,
670
+ selectedFontColor: globalTokens.hal_grey_s_40,
671
+ unselectedFontColor: globalTokens.hal_grey_s_40,
672
+ disabledFontColor: globalTokens.hal_grey_l_60,
673
+ focusOutline: globalTokens.hal_blue_l_50,
674
+ selectedUnderlineColor: globalTokens.hal_purple_s_38,
675
+ dividerColor: globalTokens.hal_grey_l_75,
676
+ fontFamily: globalTokens.type_sans,
754
677
  fontSize: globalTokens.type_scale_03,
755
- fontWeight: globalTokens.type_regular
678
+ fontStyle: globalTokens.type_normal,
679
+ fontWeight: globalTokens.type_regular,
680
+ selectedIconColor: globalTokens.hal_grey_s_40,
681
+ unselectedIconColor: globalTokens.hal_grey_s_40,
682
+ disabledIconColor: globalTokens.hal_grey_l_60
756
683
  },
757
684
  paginator: {
758
- backgroundColor: globalTokens.darkWhite,
685
+ backgroundColor: globalTokens.hal_grey_l_95,
759
686
  fontColor: globalTokens.hal_black,
760
687
  fontFamily: globalTokens.type_sans,
761
688
  fontSize: globalTokens.type_scale_02,
@@ -773,25 +700,32 @@ var componentTokens = {
773
700
  totalItemsContainerMarginRight: "2.5rem",
774
701
  totalItemsContainerMarginLeft: "0px"
775
702
  },
703
+ paragraph: {
704
+ fontColor: globalTokens.hal_black,
705
+ fontColorOnDark: globalTokens.hal_white,
706
+ display: "block",
707
+ fontSize: globalTokens.type_scale_03,
708
+ fontWeight: globalTokens.type_regular
709
+ },
776
710
  progressBar: {
777
711
  trackLineColor: globalTokens.hal_purple_s_38,
778
712
  trackLineColorOnDark: globalTokens.hal_purple_l_65,
779
- totalLineColor: globalTokens.softGrey,
713
+ totalLineColor: globalTokens.hal_grey_l_90,
780
714
  labelFontFamily: globalTokens.type_sans,
781
715
  labelFontSize: globalTokens.type_scale_01,
782
716
  labelFontStyle: globalTokens.type_normal,
783
717
  labelFontWeight: globalTokens.type_regular,
784
- labelFontColor: globalTokens.black,
718
+ labelFontColor: globalTokens.hal_black,
785
719
  labelFontColorOnDark: globalTokens.hal_white,
786
720
  labelFontTextTransform: globalTokens.type_uppercase,
787
721
  valueFontFamily: globalTokens.type_sans,
788
722
  valueFontSize: globalTokens.type_scale_01,
789
723
  valueFontStyle: globalTokens.type_normal,
790
724
  valueFontWeight: globalTokens.type_regular,
791
- valueFontColor: globalTokens.black,
725
+ valueFontColor: globalTokens.hal_black,
792
726
  valueFontColorOnDark: globalTokens.hal_white,
793
727
  valueFontTextTransform: globalTokens.type_uppercase,
794
- helperTextFontColor: globalTokens.black,
728
+ helperTextFontColor: globalTokens.hal_black,
795
729
  helperTextFontColorOnDark: globalTokens.hal_white,
796
730
  helperTextFontSize: globalTokens.type_scale_01,
797
731
  helperTextFontStyle: globalTokens.type_normal,
@@ -799,8 +733,8 @@ var componentTokens = {
799
733
  helperTextFontFamily: globalTokens.type_sans,
800
734
  thickness: "9px",
801
735
  borderRadius: "5px",
802
- overlayColor: globalTokens.black,
803
- overlayOpacity: "0.8"
736
+ overlayColor: globalTokens.color_grey_a_800,
737
+ overlayFontColor: globalTokens.hal_white
804
738
  },
805
739
  quickNav: {
806
740
  fontColor: globalTokens.hal_grey_s_40,
@@ -882,7 +816,7 @@ var componentTokens = {
882
816
  helperTextFontStyle: globalTokens.type_normal,
883
817
  helperTextFontWeight: globalTokens.type_regular,
884
818
  helperTextLineHeight: globalTokens.type_leading_normal,
885
- placeholderFontColor: "#000000b3",
819
+ placeholderFontColor: globalTokens.color_grey_a_800,
886
820
  valueFontColor: globalTokens.hal_black,
887
821
  valueFontSize: globalTokens.type_scale_03,
888
822
  valueFontStyle: globalTokens.type_normal,
@@ -926,8 +860,6 @@ var componentTokens = {
926
860
  },
927
861
  sidenav: {
928
862
  backgroundColor: globalTokens.hal_grey_l_95,
929
- arrowContainerColor: globalTokens.hal_grey_l_90,
930
- arrowColor: globalTokens.hal_black,
931
863
  titleFontFamily: globalTokens.type_sans,
932
864
  titleFontSize: globalTokens.type_scale_04,
933
865
  titleFontStyle: globalTokens.type_normal,
@@ -939,12 +871,12 @@ var componentTokens = {
939
871
  groupTitleFontSize: globalTokens.type_scale_02,
940
872
  groupTitleFontStyle: globalTokens.type_normal,
941
873
  groupTitleFontWeight: globalTokens.type_semibold,
942
- groupTitleFontColor: globalTokens.black,
874
+ groupTitleFontColor: globalTokens.hal_black,
943
875
  groupTitleHoverBackgroundColor: globalTokens.hal_grey_l_90,
944
876
  groupTitleActiveBackgroundColor: globalTokens.hal_grey_l_80,
945
- groupTitleSelectedFontColor: globalTokens.white,
877
+ groupTitleSelectedFontColor: globalTokens.hal_white,
946
878
  groupTitleSelectedBackgroundColor: globalTokens.color_grey_800,
947
- groupTitleSelectedHoverFontColor: globalTokens.white,
879
+ groupTitleSelectedHoverFontColor: globalTokens.hal_white,
948
880
  groupTitleSelectedHoverBackgroundColor: globalTokens.color_grey_600,
949
881
  groupTitleFontTextTransform: globalTokens.type_uppercase,
950
882
  groupTitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
@@ -954,9 +886,9 @@ var componentTokens = {
954
886
  linkFontWeight: globalTokens.type_regular,
955
887
  linkFontColor: globalTokens.color_grey_800,
956
888
  linkHoverBackgroundColor: globalTokens.hal_grey_l_90,
957
- linkSelectedFontColor: globalTokens.white,
889
+ linkSelectedFontColor: globalTokens.hal_white,
958
890
  linkSelectedBackgroundColor: globalTokens.color_grey_800,
959
- linkSelectedHoverFontColor: globalTokens.white,
891
+ linkSelectedHoverFontColor: globalTokens.hal_white,
960
892
  linkSelectedHoverBackgroundColor: globalTokens.color_grey_600,
961
893
  linkFontTextTransform: "none",
962
894
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
@@ -966,7 +898,7 @@ var componentTokens = {
966
898
  linkMarginRight: "16px",
967
899
  linkMarginLeft: "16px",
968
900
  linkFocusColor: globalTokens.hal_blue_l_50,
969
- scrollBarThumbColor: "#66666626",
901
+ scrollBarThumbColor: globalTokens.color_grey_a_200,
970
902
  scrollBarTrackColor: globalTokens.transparent
971
903
  },
972
904
  slider: {
@@ -1025,7 +957,7 @@ var componentTokens = {
1025
957
  trackLineColorOnDark: globalTokens.hal_blue_l_50,
1026
958
  totalLineThickness: "2px",
1027
959
  totalLineVerticalPosition: "50%",
1028
- totalLineColor: "#0000001a",
960
+ totalLineColor: globalTokens.color_grey_a_200,
1029
961
  totalLineColorOnDark: globalTokens.hal_grey_l_75,
1030
962
  disabledThumbVerticalPosition: "10px",
1031
963
  disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
@@ -1044,36 +976,36 @@ var componentTokens = {
1044
976
  inputMarginLeft: globalTokens.type_scale_06
1045
977
  },
1046
978
  spinner: {
1047
- trackCircleColor: "#5f249f",
1048
- trackCircleColorOverlay: "#a46ede",
1049
- totalCircleColor: globalTokens.white,
979
+ trackCircleColor: globalTokens.hal_purple_s_38,
980
+ trackCircleColorOverlay: globalTokens.hal_purple_l_65,
981
+ totalCircleColor: globalTokens.hal_white,
1050
982
  labelFontFamily: globalTokens.type_sans,
1051
983
  labelFontSize: globalTokens.type_scale_02,
1052
984
  labelFontStyle: globalTokens.type_normal,
1053
985
  labelFontWeight: globalTokens.type_regular,
1054
- labelFontColor: globalTokens.black,
1055
- labelFontColorOnDark: globalTokens.white,
986
+ labelFontColor: globalTokens.hal_black,
987
+ labelFontColorOnDark: globalTokens.hal_white,
1056
988
  labelTextAlign: "center",
1057
989
  progressValueFontFamily: globalTokens.type_sans,
1058
990
  progressValueFontSize: globalTokens.type_scale_02,
1059
991
  progressValueFontStyle: globalTokens.type_normal,
1060
992
  progressValueFontWeight: globalTokens.type_bold,
1061
993
  progressValueFontColor: globalTokens.inherit,
1062
- progressValueFontColorOnDark: globalTokens.white,
994
+ progressValueFontColorOnDark: globalTokens.hal_white,
1063
995
  progressValueTextAlign: "center",
1064
- overlayBackgroundColor: globalTokens.black,
996
+ overlayBackgroundColor: globalTokens.hal_black,
1065
997
  overlayOpacity: "0.8",
1066
998
  overlayLabelFontFamily: globalTokens.type_sans,
1067
999
  overlayLabelFontSize: globalTokens.type_scale_02,
1068
1000
  overlayLabelFontStyle: globalTokens.type_normal,
1069
1001
  overlayLabelFontWeight: globalTokens.type_regular,
1070
- overlayLabelFontColor: globalTokens.white,
1002
+ overlayLabelFontColor: globalTokens.hal_white,
1071
1003
  overlayLabelTextAlign: "center",
1072
1004
  overlayProgressValueFontFamily: globalTokens.type_sans,
1073
1005
  overlayProgressValueFontSize: globalTokens.type_scale_02,
1074
1006
  overlayProgressValueFontStyle: globalTokens.type_normal,
1075
1007
  overlayProgressValueFontWeight: globalTokens.type_bold,
1076
- overlayProgressValueFontColor: globalTokens.white,
1008
+ overlayProgressValueFontColor: globalTokens.hal_white,
1077
1009
  overlayProgressValueTextAlign: "center"
1078
1010
  },
1079
1011
  "switch": {
@@ -1103,7 +1035,7 @@ var componentTokens = {
1103
1035
  labelFontColor: globalTokens.hal_black,
1104
1036
  labelFontColorOnDark: globalTokens.hal_white,
1105
1037
  thumbFocusColor: globalTokens.hal_blue_l_50,
1106
- thumbFocusColorOnDark: "#1682FF",
1038
+ thumbFocusColorOnDark: "#1682ff",
1107
1039
  thumbHeight: "24px",
1108
1040
  thumbWidth: "24px",
1109
1041
  thumbShift: "1.25rem",
@@ -1111,33 +1043,16 @@ var componentTokens = {
1111
1043
  trackWidth: "36px",
1112
1044
  spaceBetweenLabelSwitch: "8px"
1113
1045
  },
1114
- tag: {
1115
- fontFamily: globalTokens.type_sans,
1116
- fontColor: globalTokens.hal_black,
1117
- fontSize: globalTokens.type_scale_02,
1118
- fontStyle: globalTokens.type_normal,
1119
- fontWeight: globalTokens.type_regular,
1120
- labelPaddingTop: "0px",
1121
- labelPaddingBottom: "0px",
1122
- labelPaddingLeft: "16px",
1123
- labelPaddingRight: "16px",
1124
- height: "40px",
1125
- iconColor: globalTokens.hal_white,
1126
- iconSectionWidth: "40px",
1127
- iconHeight: "24px",
1128
- iconWidth: "auto",
1129
- focusColor: globalTokens.hal_blue_l_50
1130
- },
1131
1046
  table: {
1132
1047
  rowSeparatorThickness: "1px",
1133
- rowSeparatorStyle: "solid",
1134
- rowSeparatorColor: globalTokens.lightGrey,
1135
- dataBackgroundColor: globalTokens.white,
1048
+ rowSeparatorStyle: globalTokens.border_solid,
1049
+ rowSeparatorColor: globalTokens.hal_grey_l_80,
1050
+ dataBackgroundColor: globalTokens.hal_white,
1136
1051
  dataFontFamily: globalTokens.type_sans,
1137
1052
  dataFontSize: globalTokens.type_scale_02,
1138
1053
  dataFontStyle: globalTokens.type_normal,
1139
1054
  dataFontWeight: globalTokens.type_regular,
1140
- dataFontColor: globalTokens.black,
1055
+ dataFontColor: globalTokens.hal_black,
1141
1056
  dataFontTextTransform: "none",
1142
1057
  dataPaddingTop: "14px",
1143
1058
  dataPaddingBottom: "12px",
@@ -1151,7 +1066,7 @@ var componentTokens = {
1151
1066
  headerFontSize: globalTokens.type_scale_02,
1152
1067
  headerFontStyle: globalTokens.type_normal,
1153
1068
  headerFontWeight: globalTokens.type_regular,
1154
- headerFontColor: globalTokens.white,
1069
+ headerFontColor: globalTokens.hal_white,
1155
1070
  headerFontTextTransform: "none",
1156
1071
  headerPaddingTop: "16px",
1157
1072
  headerPaddingBottom: "16px",
@@ -1159,9 +1074,9 @@ var componentTokens = {
1159
1074
  headerPaddingLeft: "40px",
1160
1075
  headerTextAlign: "left",
1161
1076
  headerTextLineHeight: "normal",
1162
- scrollBarThumbColor: globalTokens.darkGrey,
1163
- scrollBarTrackColor: globalTokens.lightGrey,
1164
- sortIconColor: globalTokens.white
1077
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
1078
+ scrollBarTrackColor: globalTokens.hal_grey_l_80,
1079
+ sortIconColor: globalTokens.hal_white
1165
1080
  },
1166
1081
  tabs: {
1167
1082
  fontFamily: globalTokens.type_sans,
@@ -1169,31 +1084,31 @@ var componentTokens = {
1169
1084
  fontStyle: globalTokens.type_normal,
1170
1085
  fontWeight: globalTokens.type_semibold,
1171
1086
  fontTextTransform: "none",
1172
- selectedBackgroundColor: globalTokens.white,
1173
- selectedFontColor: "#5f249f",
1174
- selectedIconColor: "#5f249f",
1175
- selectedUnderlineColor: "#5f249f",
1087
+ selectedBackgroundColor: globalTokens.hal_white,
1088
+ selectedFontColor: globalTokens.hal_purple_s_38,
1089
+ selectedIconColor: globalTokens.hal_purple_s_38,
1090
+ selectedUnderlineColor: globalTokens.hal_purple_s_38,
1176
1091
  selectedUnderlineThickness: "2px",
1177
- unselectedBackgroundColor: globalTokens.white,
1178
- unselectedFontColor: globalTokens.darkGrey,
1179
- unselectedIconColor: globalTokens.darkGrey,
1180
- disabledFontColor: "#999999",
1181
- disabledIconColor: "#999999",
1092
+ unselectedBackgroundColor: globalTokens.hal_white,
1093
+ unselectedFontColor: globalTokens.hal_grey_s_40,
1094
+ unselectedIconColor: globalTokens.hal_grey_s_40,
1095
+ disabledFontColor: globalTokens.hal_grey_l_60,
1096
+ disabledIconColor: globalTokens.hal_grey_l_60,
1182
1097
  disabledFontStyle: globalTokens.type_normal,
1183
- disabledBadgeBackgroundColor: "#0000004D",
1184
- hoverBackgroundColor: "#f2eafa",
1185
- pressedBackgroundColor: "#e5d5f6",
1098
+ disabledBadgeBackgroundColor: "#0000004d",
1099
+ hoverBackgroundColor: globalTokens.hal_purple_l_95,
1100
+ pressedBackgroundColor: globalTokens.hal_purple_l_90,
1186
1101
  pressedFontWeight: globalTokens.type_semibold,
1187
- dividerColor: globalTokens.mediumGrey,
1102
+ dividerColor: globalTokens.hal_grey_l_75,
1188
1103
  dividerThickness: "1px",
1189
- focusOutline: "#5f249f",
1104
+ focusOutline: globalTokens.hal_purple_s_38,
1190
1105
  scrollButtonsWidth: "48px",
1191
- badgeBackgroundColor: globalTokens.darkRed,
1106
+ badgeBackgroundColor: globalTokens.hal_red_s_41,
1192
1107
  badgeFontFamily: globalTokens.type_sans,
1193
1108
  badgeFontSize: "10px",
1194
1109
  badgeFontStyle: globalTokens.type_normal,
1195
1110
  badgeFontWeight: "500",
1196
- badgeFontColor: globalTokens.white,
1111
+ badgeFontColor: globalTokens.hal_white,
1197
1112
  badgeLetterSpacing: globalTokens.type_spacing_wide_02,
1198
1113
  badgeWidth: "16px",
1199
1114
  badgeHeight: "16px",
@@ -1202,6 +1117,23 @@ var componentTokens = {
1202
1117
  badgeHeightWithNotificationNumber: "17px",
1203
1118
  badgeRadiusWithNotificationNumber: "10px"
1204
1119
  },
1120
+ tag: {
1121
+ fontFamily: globalTokens.type_sans,
1122
+ fontColor: globalTokens.hal_black,
1123
+ fontSize: globalTokens.type_scale_02,
1124
+ fontStyle: globalTokens.type_normal,
1125
+ fontWeight: globalTokens.type_regular,
1126
+ labelPaddingTop: "0px",
1127
+ labelPaddingBottom: "0px",
1128
+ labelPaddingLeft: "16px",
1129
+ labelPaddingRight: "16px",
1130
+ height: "40px",
1131
+ iconColor: globalTokens.hal_white,
1132
+ iconSectionWidth: "40px",
1133
+ iconHeight: "24px",
1134
+ iconWidth: "auto",
1135
+ focusColor: globalTokens.hal_blue_l_50
1136
+ },
1205
1137
  textarea: {
1206
1138
  fontFamily: globalTokens.type_sans,
1207
1139
  enabledBorderColor: globalTokens.hal_black,
@@ -1239,7 +1171,7 @@ var componentTokens = {
1239
1171
  helperTextLineHeight: globalTokens.type_leading_normal,
1240
1172
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1241
1173
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1242
- placeholderFontColor: "#000000b3",
1174
+ placeholderFontColor: globalTokens.color_grey_a_800,
1243
1175
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1244
1176
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1245
1177
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -1251,6 +1183,99 @@ var componentTokens = {
1251
1183
  disabledValueFontColor: globalTokens.hal_grey_l_60,
1252
1184
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1253
1185
  },
1186
+ textInput: {
1187
+ fontFamily: globalTokens.type_sans,
1188
+ enabledBorderColor: globalTokens.hal_black,
1189
+ enabledBorderColorOnDark: globalTokens.hal_white,
1190
+ hoverBorderColor: globalTokens.hal_purple_l_65,
1191
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
1192
+ focusBorderColor: globalTokens.hal_blue_l_50,
1193
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
1194
+ disabledBorderColor: globalTokens.hal_grey_l_60,
1195
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
1196
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
1197
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1198
+ errorBorderColor: globalTokens.hal_red_s_41,
1199
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
1200
+ hoverErrorBorderColor: globalTokens.color_red_600,
1201
+ hoverErrorBorderColorOnDark: "#fe677b",
1202
+ inputMarginTop: globalTokens.spacing_02,
1203
+ inputMarginBottom: globalTokens.spacing_02,
1204
+ errorMessageColor: globalTokens.hal_red_s_41,
1205
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
1206
+ errorIconColor: globalTokens.hal_red_s_41,
1207
+ errorIconColorOnDark: globalTokens.hal_red_l_60,
1208
+ labelFontColor: globalTokens.hal_black,
1209
+ labelFontColorOnDark: globalTokens.hal_white,
1210
+ labelFontSize: globalTokens.type_scale_02,
1211
+ labelFontStyle: globalTokens.type_normal,
1212
+ labelFontWeight: globalTokens.type_semibold,
1213
+ labelLineHeight: globalTokens.type_leading_loose_01,
1214
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1215
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1216
+ optionalLabelFontWeight: globalTokens.type_regular,
1217
+ helperTextFontColor: globalTokens.hal_black,
1218
+ helperTextFontColorOnDark: globalTokens.hal_white,
1219
+ helperTextFontSize: globalTokens.type_scale_01,
1220
+ helperTextFontStyle: globalTokens.type_normal,
1221
+ helperTextFontWeight: globalTokens.type_regular,
1222
+ helperTextLineHeight: globalTokens.type_leading_normal,
1223
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1224
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1225
+ prefixColor: globalTokens.hal_grey_s_40,
1226
+ prefixColorOnDark: globalTokens.hal_white,
1227
+ suffixColor: globalTokens.hal_grey_s_40,
1228
+ suffixColorOnDark: globalTokens.hal_white,
1229
+ disabledPrefixColor: globalTokens.hal_grey_l_75,
1230
+ disabledSuffixColor: globalTokens.hal_grey_l_75,
1231
+ disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
1232
+ disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
1233
+ placeholderFontColor: globalTokens.color_grey_a_800,
1234
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1235
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1236
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
1237
+ valueFontColor: globalTokens.hal_black,
1238
+ valueFontColorOnDark: globalTokens.hal_white,
1239
+ valueFontSize: globalTokens.type_scale_03,
1240
+ valueFontStyle: globalTokens.type_normal,
1241
+ valueFontWeight: globalTokens.type_regular,
1242
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
1243
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
1244
+ actionIconColor: globalTokens.hal_black,
1245
+ actionIconColorOnDark: globalTokens.hal_white,
1246
+ disabledActionIconColor: globalTokens.hal_grey_l_60,
1247
+ disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
1248
+ hoverActionIconColor: globalTokens.hal_black,
1249
+ hoverActionIconColorOnDark: globalTokens.hal_white,
1250
+ focusActionIconColor: globalTokens.hal_black,
1251
+ focusActionIconColorOnDark: globalTokens.hal_white,
1252
+ activeActionIconColor: globalTokens.hal_black,
1253
+ activeActionIconColorOnDark: globalTokens.hal_black,
1254
+ actionBackgroundColor: globalTokens.transparent,
1255
+ actionBackgroundColorOnDark: globalTokens.transparent,
1256
+ disabledActionBackgroundColor: globalTokens.transparent,
1257
+ disabledActionBackgroundColorOnDark: globalTokens.transparent,
1258
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
1259
+ hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
1260
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
1261
+ focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
1262
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
1263
+ activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
1264
+ listDialogBackgroundColor: globalTokens.hal_white,
1265
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
1266
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
1267
+ listOptionFontColor: globalTokens.hal_black,
1268
+ listOptionFontSize: globalTokens.type_scale_02,
1269
+ listOptionFontStyle: globalTokens.type_normal,
1270
+ listOptionFontWeight: globalTokens.type_regular,
1271
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
1272
+ errorListDialogFontColor: globalTokens.hal_black,
1273
+ errorListDialogBackgroundColor: globalTokens.color_red_50,
1274
+ errorListDialogBorderColor: globalTokens.hal_red_s_41,
1275
+ hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
1276
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
1277
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50
1278
+ },
1254
1279
  toggleGroup: {
1255
1280
  containerBackgroundColor: globalTokens.color_grey_50,
1256
1281
  containerBorderColor: globalTokens.hal_grey_l_60,
@@ -1308,7 +1333,7 @@ var componentTokens = {
1308
1333
  unvisitedHelperTextFontColor: globalTokens.hal_grey_s_40,
1309
1334
  unvisitedStepBackgroundColor: globalTokens.transparent,
1310
1335
  unvisitedStepBorderColor: globalTokens.hal_grey_s_40,
1311
- selectedStepFontColor: globalTokens.white,
1336
+ selectedStepFontColor: globalTokens.hal_white,
1312
1337
  selectedStepBackgroundColor: globalTokens.hal_purple_s_38,
1313
1338
  selectedStepBorderColor: globalTokens.hal_purple_s_38,
1314
1339
  selectedLabelFontColor: globalTokens.hal_black,
@@ -1316,7 +1341,7 @@ var componentTokens = {
1316
1341
  selectedStepWidth: "32px",
1317
1342
  selectedStepHeight: "32px",
1318
1343
  selectedStepBorderThickness: "2px",
1319
- selectedStepBorderStyle: "solid",
1344
+ selectedStepBorderStyle: globalTokens.border_solid,
1320
1345
  selectedStepBorderRadius: "45px",
1321
1346
  stepFontSize: globalTokens.type_scale_03,
1322
1347
  stepFontFamily: globalTokens.type_sans,
@@ -1327,7 +1352,7 @@ var componentTokens = {
1327
1352
  stepWidth: "32px",
1328
1353
  stepHeight: "32px",
1329
1354
  stepBorderThickness: "2px",
1330
- stepBorderStyle: "solid",
1355
+ stepBorderStyle: globalTokens.border_solid,
1331
1356
  stepBorderRadius: "45px",
1332
1357
  visitedLabelFontColor: globalTokens.hal_black,
1333
1358
  labelFontSize: globalTokens.type_scale_03,
@@ -1353,10 +1378,10 @@ var componentTokens = {
1353
1378
  disabledStepWidth: "32px",
1354
1379
  disabledStepHeight: "32px",
1355
1380
  disabledStepBorderThickness: "2px",
1356
- disabledStepBorderStyle: "solid",
1381
+ disabledStepBorderStyle: globalTokens.border_solid,
1357
1382
  disabledStepBorderRadius: "45px",
1358
1383
  separatorBorderThickness: "1px",
1359
- separatorBorderStyle: "solid",
1384
+ separatorBorderStyle: globalTokens.border_solid,
1360
1385
  separatorColor: globalTokens.hal_grey_s_40,
1361
1386
  focusColor: globalTokens.hal_blue_l_50
1362
1387
  }
@@ -1380,39 +1405,6 @@ var responsiveSizes = {
1380
1405
  xlarge: "90"
1381
1406
  };
1382
1407
  exports.responsiveSizes = responsiveSizes;
1383
- var typeface = {
1384
- body: {
1385
- fontSize: "16px",
1386
- letterSpacing: "0.5",
1387
- textTransform: "initial"
1388
- },
1389
- altBody: {
1390
- fontSize: "14px",
1391
- letterSpacing: "0.25",
1392
- textTransform: "initial"
1393
- },
1394
- subtitle: {
1395
- fontSize: "16px",
1396
- letterSpacing: "0.15",
1397
- textTransform: "initial"
1398
- },
1399
- altSubtitle: {
1400
- fontSize: "14px",
1401
- letterSpacing: "0.1",
1402
- textTransform: "initial"
1403
- },
1404
- caption: {
1405
- fontSize: "12px",
1406
- letterSpacing: "0.4",
1407
- textTransform: "initial"
1408
- },
1409
- overline: {
1410
- fontSize: "12px",
1411
- letterSpacing: "2",
1412
- textTransform: "uppercase"
1413
- }
1414
- };
1415
- exports.typeface = typeface;
1416
1408
  var defaultTranslatedComponentLabels = {
1417
1409
  formFields: {
1418
1410
  optionalLabel: "(Optional)",
@@ -1436,6 +1428,9 @@ var defaultTranslatedComponentLabels = {
1436
1428
  dateInput: {
1437
1429
  invalidDateErrorMessage: "Invalid date."
1438
1430
  },
1431
+ dialog: {
1432
+ closeIconAriaLabel: "Close dialog"
1433
+ },
1439
1434
  fileInput: {
1440
1435
  fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1441
1436
  fileSizeLessThanErrorMessage: "File size must be less than max size.",
@@ -1500,13 +1495,10 @@ var defaultTranslatedComponentLabels = {
1500
1495
  fetchingDataErrorMessage: "Error fetching data"
1501
1496
  },
1502
1497
  calendar: {
1503
- days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1504
- daysShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
1498
+ daysShort: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
1505
1499
  months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1506
- monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
1507
1500
  previousMonthTitle: "Previous month",
1508
- nextMonthTitle: "Next month",
1509
- openCalendar: "Open calendar"
1501
+ nextMonthTitle: "Next month"
1510
1502
  }
1511
1503
  };
1512
1504
  exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;