@dxc-technology/halstack-react 7.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 (109) hide show
  1. package/HalstackContext.js +98 -50
  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.d.ts +2 -2
  10. package/checkbox/Checkbox.js +16 -15
  11. package/checkbox/Checkbox.stories.tsx +131 -59
  12. package/checkbox/types.d.ts +4 -0
  13. package/chip/Chip.js +16 -22
  14. package/chip/Chip.stories.tsx +96 -9
  15. package/common/variables.js +286 -290
  16. package/date-input/Calendar.d.ts +4 -0
  17. package/date-input/Calendar.js +258 -0
  18. package/date-input/DateInput.js +134 -237
  19. package/date-input/DateInput.stories.tsx +199 -33
  20. package/date-input/DateInput.test.js +494 -138
  21. package/date-input/DatePicker.d.ts +4 -0
  22. package/date-input/DatePicker.js +146 -0
  23. package/date-input/Icons.d.ts +6 -0
  24. package/date-input/Icons.js +75 -0
  25. package/date-input/YearPicker.d.ts +4 -0
  26. package/date-input/YearPicker.js +126 -0
  27. package/date-input/types.d.ts +51 -0
  28. package/dialog/Dialog.js +60 -73
  29. package/dialog/Dialog.stories.tsx +211 -159
  30. package/dialog/Dialog.test.js +301 -2
  31. package/dropdown/Dropdown.js +35 -35
  32. package/dropdown/Dropdown.stories.tsx +210 -84
  33. package/dropdown/Dropdown.test.js +17 -22
  34. package/dropdown/DropdownMenu.js +8 -18
  35. package/dropdown/DropdownMenuItem.js +4 -15
  36. package/file-input/FileInput.d.ts +2 -2
  37. package/file-input/FileInput.js +169 -222
  38. package/file-input/FileInput.stories.tsx +122 -11
  39. package/file-input/FileInput.test.js +12 -53
  40. package/file-input/FileItem.d.ts +4 -14
  41. package/file-input/FileItem.js +39 -63
  42. package/file-input/types.d.ts +17 -0
  43. package/footer/Footer.stories.tsx +91 -0
  44. package/header/Header.js +18 -20
  45. package/header/Header.stories.tsx +149 -6
  46. package/link/Link.js +1 -1
  47. package/link/Link.stories.tsx +60 -0
  48. package/main.d.ts +1 -1
  49. package/main.js +1 -1
  50. package/{tabs-nav → nav-tabs}/NavTabs.js +1 -1
  51. package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx +96 -6
  52. package/{tabs-nav → nav-tabs}/Tab.js +35 -15
  53. package/number-input/NumberInput.test.js +5 -6
  54. package/package.json +7 -12
  55. package/paginator/Icons.d.ts +5 -0
  56. package/paginator/Icons.js +16 -28
  57. package/paginator/Paginator.js +5 -11
  58. package/paginator/Paginator.stories.tsx +24 -0
  59. package/paginator/Paginator.test.js +17 -10
  60. package/progress-bar/ProgressBar.js +4 -4
  61. package/progress-bar/ProgressBar.stories.jsx +35 -2
  62. package/quick-nav/QuickNav.stories.tsx +14 -0
  63. package/radio-group/RadioGroup.stories.tsx +131 -18
  64. package/resultsetTable/Icons.d.ts +7 -0
  65. package/resultsetTable/Icons.js +51 -0
  66. package/resultsetTable/ResultsetTable.js +48 -105
  67. package/resultsetTable/ResultsetTable.stories.tsx +50 -25
  68. package/resultsetTable/ResultsetTable.test.js +40 -63
  69. package/resultsetTable/types.d.ts +2 -2
  70. package/select/Listbox.d.ts +1 -1
  71. package/select/Listbox.js +5 -34
  72. package/select/Option.js +11 -24
  73. package/select/Select.js +43 -24
  74. package/select/Select.stories.tsx +494 -150
  75. package/select/Select.test.js +17 -22
  76. package/select/types.d.ts +2 -2
  77. package/sidenav/Sidenav.js +8 -10
  78. package/sidenav/Sidenav.stories.tsx +148 -46
  79. package/slider/Slider.d.ts +2 -2
  80. package/slider/Slider.js +9 -8
  81. package/slider/Slider.stories.tsx +57 -0
  82. package/slider/types.d.ts +4 -0
  83. package/spinner/Spinner.js +2 -2
  84. package/spinner/Spinner.stories.jsx +27 -1
  85. package/switch/Switch.d.ts +3 -3
  86. package/switch/Switch.js +5 -4
  87. package/switch/Switch.stories.tsx +33 -0
  88. package/switch/types.d.ts +6 -1
  89. package/table/Table.stories.jsx +80 -1
  90. package/table/Table.test.js +1 -1
  91. package/tabs/Tab.js +3 -5
  92. package/tabs/Tabs.js +3 -3
  93. package/tabs/Tabs.stories.tsx +45 -5
  94. package/tag/Tag.stories.tsx +14 -1
  95. package/text-input/Suggestion.js +32 -5
  96. package/text-input/TextInput.js +7 -11
  97. package/text-input/TextInput.stories.tsx +92 -4
  98. package/text-input/TextInput.test.js +587 -634
  99. package/textarea/Textarea.stories.jsx +60 -1
  100. package/toggle-group/ToggleGroup.stories.tsx +42 -0
  101. package/utils/FocusLock.d.ts +13 -0
  102. package/utils/FocusLock.js +139 -0
  103. package/wizard/Wizard.stories.tsx +20 -0
  104. package/common/RequiredComponent.js +0 -32
  105. /package/{tabs-nav → nav-tabs}/NavTabs.d.ts +0 -0
  106. /package/{tabs-nav → nav-tabs}/NavTabs.test.js +0 -0
  107. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
  108. /package/{tabs-nav → nav-tabs}/types.d.ts +0 -0
  109. /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,56 +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_grey_l_60,
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
- pickerWidth: "290px"
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
420
433
  },
421
434
  dialog: {
422
- overlayColor: globalTokens.hal_black,
435
+ overlayColor: globalTokens.color_grey_a_800,
423
436
  backgroundColor: globalTokens.hal_white,
424
437
  closeIconWidth: "24px",
425
438
  closeIconHeight: "24px",
426
439
  closeIconTopPosition: "20px",
427
440
  closeIconRightPosition: "20px",
428
- closeIconBackgroundColor: "none",
429
- closeIconBorderColor: "none",
441
+ closeIconBackgroundColor: globalTokens.transparent,
442
+ closeIconBorderColor: globalTokens.border_none,
430
443
  closeIconColor: globalTokens.hal_black,
431
- closeIconBorderThickness: "0px",
432
- closeIconBorderStyle: "solid",
433
- closeIconBorderRadius: "0px",
444
+ closeIconBorderThickness: globalTokens.border_width_0,
445
+ closeIconBorderStyle: globalTokens.border_solid,
446
+ closeIconBorderRadius: "2px",
434
447
  boxShadowOffsetX: "0px",
435
448
  boxShadowOffsetY: "1px",
436
449
  boxShadowBlur: "3px",
437
- boxShadowColor: "rgba(0, 0, 0, 0.2)",
438
- overlayOpacity: "0.7",
439
- fontFamily: globalTokens.type_sans,
440
- fontSize: globalTokens.type_scale_03,
441
- fontWeight: globalTokens.type_regular
450
+ boxShadowColor: globalTokens.color_grey_a_300
442
451
  },
443
452
  dropdown: {
444
453
  buttonBackgroundColor: globalTokens.hal_white,
@@ -456,12 +465,12 @@ var componentTokens = {
456
465
  buttonPaddingBottom: "0px",
457
466
  buttonPaddingLeft: "16px",
458
467
  buttonPaddingRight: "16px",
459
- disabledColor: globalTokens.lighterBlack,
468
+ disabledColor: globalTokens.hal_grey_l_60,
460
469
  disabledButtonBackgroundColor: globalTokens.transparent,
461
470
  disabledBorderColor: globalTokens.lighterBlack,
462
471
  optionBackgroundColor: globalTokens.hal_white,
463
472
  hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
464
- activeOptionBackgroundColor: globalTokens.lightGrey,
473
+ activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
465
474
  optionFontFamily: globalTokens.type_sans,
466
475
  optionFontSize: globalTokens.type_scale_root,
467
476
  optionFontStyle: globalTokens.type_normal,
@@ -478,8 +487,8 @@ var componentTokens = {
478
487
  caretIconColor: globalTokens.hal_black,
479
488
  caretIconSpacing: "12px",
480
489
  borderRadius: "4px",
481
- borderStyle: "none",
482
- borderThickness: "0px",
490
+ borderStyle: globalTokens.border_none,
491
+ borderThickness: globalTokens.border_width_0,
483
492
  borderColor: globalTokens.transparent,
484
493
  scrollBarThumbColor: globalTokens.hal_grey_s_40,
485
494
  scrollBarTrackColor: globalTokens.lightGrey,
@@ -543,7 +552,7 @@ var componentTokens = {
543
552
  backgroundColor: globalTokens.hal_black,
544
553
  bottomLinksDividerColor: globalTokens.hal_blue_l_50,
545
554
  bottomLinksDividerThickness: "1px",
546
- bottomLinksDividerStyle: "solid",
555
+ bottomLinksDividerStyle: globalTokens.border_solid,
547
556
  bottomLinksDividerSpacing: "8px",
548
557
  bottomLinksFontFamily: globalTokens.type_sans,
549
558
  bottomLinksFontSize: globalTokens.type_scale_01,
@@ -573,7 +582,7 @@ var componentTokens = {
573
582
  hamburguerFontWeight: globalTokens.type_semibold,
574
583
  hamburguerTextTransform: globalTokens.type_uppercase,
575
584
  hamburguerIconColor: globalTokens.hal_black,
576
- hamburguerHoverColor: globalTokens.mediumGreyBlack,
585
+ hamburguerHoverColor: globalTokens.hal_grey_l_90,
577
586
  logo: "",
578
587
  logoResponsive: "",
579
588
  logoHeight: "40px",
@@ -583,7 +592,7 @@ var componentTokens = {
583
592
  menuTabletWidth: "60vw",
584
593
  menuMobileWidth: "100vw",
585
594
  minHeight: "64px",
586
- overlayColor: globalTokens.softBlack,
595
+ overlayColor: globalTokens.color_grey_a_800,
587
596
  overlayOpacity: "0.7",
588
597
  overlayZindex: "1600",
589
598
  paddingTop: "0px",
@@ -592,7 +601,7 @@ var componentTokens = {
592
601
  paddingLeft: "24px",
593
602
  underlinedColor: globalTokens.hal_black,
594
603
  underlinedThickness: "2px",
595
- underlinedStyle: "solid",
604
+ underlinedStyle: globalTokens.border_solid,
596
605
  contentColor: globalTokens.hal_black,
597
606
  contentColorOnDark: globalTokens.hal_white
598
607
  },
@@ -633,99 +642,6 @@ var componentTokens = {
633
642
  level5LineHeight: globalTokens.type_leading_normal,
634
643
  level5LetterSpacing: globalTokens.type_spacing_wide_01
635
644
  },
636
- textInput: {
637
- fontFamily: globalTokens.type_sans,
638
- enabledBorderColor: globalTokens.hal_black,
639
- enabledBorderColorOnDark: globalTokens.hal_white,
640
- hoverBorderColor: globalTokens.hal_purple_l_65,
641
- hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
642
- focusBorderColor: globalTokens.hal_blue_l_50,
643
- focusBorderColorOnDark: globalTokens.hal_blue_l_50,
644
- disabledBorderColor: globalTokens.hal_grey_l_60,
645
- disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
646
- disabledContainerFillColor: globalTokens.hal_grey_l_95,
647
- disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
648
- errorBorderColor: globalTokens.hal_red_s_41,
649
- errorBorderColorOnDark: globalTokens.hal_red_l_60,
650
- hoverErrorBorderColor: globalTokens.color_red_600,
651
- hoverErrorBorderColorOnDark: "#fe677b",
652
- inputMarginTop: globalTokens.spacing_02,
653
- inputMarginBottom: globalTokens.spacing_02,
654
- errorMessageColor: globalTokens.hal_red_s_41,
655
- errorMessageColorOnDark: globalTokens.hal_red_l_60,
656
- errorIconColor: globalTokens.hal_red_s_41,
657
- errorIconColorOnDark: globalTokens.hal_red_l_60,
658
- labelFontColor: globalTokens.hal_black,
659
- labelFontColorOnDark: globalTokens.hal_white,
660
- labelFontSize: globalTokens.type_scale_02,
661
- labelFontStyle: globalTokens.type_normal,
662
- labelFontWeight: globalTokens.type_semibold,
663
- labelLineHeight: globalTokens.type_leading_loose_01,
664
- disabledLabelFontColor: globalTokens.hal_grey_l_60,
665
- disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
666
- optionalLabelFontWeight: globalTokens.type_regular,
667
- helperTextFontColor: globalTokens.hal_black,
668
- helperTextFontColorOnDark: globalTokens.hal_white,
669
- helperTextFontSize: globalTokens.type_scale_01,
670
- helperTextFontStyle: globalTokens.type_normal,
671
- helperTextFontWeight: globalTokens.type_regular,
672
- helperTextLineHeight: globalTokens.type_leading_normal,
673
- disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
674
- disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
675
- prefixColor: globalTokens.hal_grey_s_40,
676
- prefixColorOnDark: globalTokens.hal_white,
677
- suffixColor: globalTokens.hal_grey_s_40,
678
- suffixColorOnDark: globalTokens.hal_white,
679
- disabledPrefixColor: globalTokens.hal_grey_l_75,
680
- disabledSuffixColor: globalTokens.hal_grey_l_75,
681
- disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
682
- disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
683
- placeholderFontColor: "#000000b3",
684
- placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
685
- disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
686
- disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
687
- valueFontColor: globalTokens.hal_black,
688
- valueFontColorOnDark: globalTokens.hal_white,
689
- valueFontSize: globalTokens.type_scale_03,
690
- valueFontStyle: globalTokens.type_normal,
691
- valueFontWeight: globalTokens.type_regular,
692
- disabledValueFontColor: globalTokens.hal_grey_l_60,
693
- disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
694
- actionIconColor: globalTokens.hal_black,
695
- actionIconColorOnDark: globalTokens.hal_white,
696
- disabledActionIconColor: globalTokens.hal_grey_l_60,
697
- disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
698
- hoverActionIconColor: globalTokens.hal_black,
699
- hoverActionIconColorOnDark: globalTokens.hal_white,
700
- focusActionIconColor: globalTokens.hal_black,
701
- focusActionIconColorOnDark: globalTokens.hal_white,
702
- activeActionIconColor: globalTokens.hal_black,
703
- activeActionIconColorOnDark: globalTokens.hal_black,
704
- actionBackgroundColor: globalTokens.transparent,
705
- actionBackgroundColorOnDark: globalTokens.transparent,
706
- disabledActionBackgroundColor: globalTokens.transparent,
707
- disabledActionBackgroundColorOnDark: globalTokens.transparent,
708
- hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
709
- hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
710
- focusActionBorderColor: globalTokens.hal_blue_l_50,
711
- focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
712
- activeActionBackgroundColor: globalTokens.hal_grey_l_80,
713
- activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
714
- listDialogBackgroundColor: globalTokens.hal_white,
715
- listDialogBorderColor: globalTokens.hal_grey_l_75,
716
- listOptionDividerColor: globalTokens.hal_grey_l_90,
717
- listOptionFontColor: globalTokens.hal_black,
718
- listOptionFontSize: globalTokens.type_scale_02,
719
- listOptionFontStyle: globalTokens.type_normal,
720
- listOptionFontWeight: globalTokens.type_regular,
721
- systemMessageFontColor: globalTokens.hal_grey_s_40,
722
- errorListDialogFontColor: globalTokens.hal_black,
723
- errorListDialogBackgroundColor: globalTokens.color_red_50,
724
- errorListDialogBorderColor: globalTokens.hal_red_s_41,
725
- hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
726
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
727
- focusListOptionBorderColor: globalTokens.hal_blue_l_50
728
- },
729
645
  link: {
730
646
  fontColor: globalTokens.hal_blue_s_35,
731
647
  fontFamily: globalTokens.inherit,
@@ -735,26 +651,38 @@ var componentTokens = {
735
651
  iconSize: "16px",
736
652
  iconSpacing: "4px",
737
653
  underlineSpacing: "0px",
738
- underlineStyle: "solid",
654
+ underlineStyle: globalTokens.border_solid,
739
655
  underlineThickness: "1px",
740
656
  disabledColor: globalTokens.lightGrey,
741
657
  hoverFontColor: globalTokens.hal_blue_s_35,
742
658
  hoverUnderlineColor: globalTokens.hal_blue_s_35,
743
- visitedFontColor: globalTokens.purple,
744
- visitedUnderlineColor: globalTokens.purple,
745
- activeFontColor: globalTokens.black,
746
- 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,
747
663
  focusColor: globalTokens.hal_blue_l_50
748
664
  },
749
- paragraph: {
750
- fontColor: globalTokens.hal_black,
751
- fontColorOnDark: globalTokens.hal_white,
752
- 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,
753
677
  fontSize: globalTokens.type_scale_03,
754
- 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
755
683
  },
756
684
  paginator: {
757
- backgroundColor: globalTokens.darkWhite,
685
+ backgroundColor: globalTokens.hal_grey_l_95,
758
686
  fontColor: globalTokens.hal_black,
759
687
  fontFamily: globalTokens.type_sans,
760
688
  fontSize: globalTokens.type_scale_02,
@@ -772,25 +700,32 @@ var componentTokens = {
772
700
  totalItemsContainerMarginRight: "2.5rem",
773
701
  totalItemsContainerMarginLeft: "0px"
774
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
+ },
775
710
  progressBar: {
776
711
  trackLineColor: globalTokens.hal_purple_s_38,
777
712
  trackLineColorOnDark: globalTokens.hal_purple_l_65,
778
- totalLineColor: globalTokens.softGrey,
713
+ totalLineColor: globalTokens.hal_grey_l_90,
779
714
  labelFontFamily: globalTokens.type_sans,
780
715
  labelFontSize: globalTokens.type_scale_01,
781
716
  labelFontStyle: globalTokens.type_normal,
782
717
  labelFontWeight: globalTokens.type_regular,
783
- labelFontColor: globalTokens.black,
718
+ labelFontColor: globalTokens.hal_black,
784
719
  labelFontColorOnDark: globalTokens.hal_white,
785
720
  labelFontTextTransform: globalTokens.type_uppercase,
786
721
  valueFontFamily: globalTokens.type_sans,
787
722
  valueFontSize: globalTokens.type_scale_01,
788
723
  valueFontStyle: globalTokens.type_normal,
789
724
  valueFontWeight: globalTokens.type_regular,
790
- valueFontColor: globalTokens.black,
725
+ valueFontColor: globalTokens.hal_black,
791
726
  valueFontColorOnDark: globalTokens.hal_white,
792
727
  valueFontTextTransform: globalTokens.type_uppercase,
793
- helperTextFontColor: globalTokens.black,
728
+ helperTextFontColor: globalTokens.hal_black,
794
729
  helperTextFontColorOnDark: globalTokens.hal_white,
795
730
  helperTextFontSize: globalTokens.type_scale_01,
796
731
  helperTextFontStyle: globalTokens.type_normal,
@@ -798,13 +733,12 @@ var componentTokens = {
798
733
  helperTextFontFamily: globalTokens.type_sans,
799
734
  thickness: "9px",
800
735
  borderRadius: "5px",
801
- overlayColor: globalTokens.black,
802
- overlayOpacity: "0.8"
736
+ overlayColor: globalTokens.color_grey_a_800,
737
+ overlayFontColor: globalTokens.hal_white
803
738
  },
804
739
  quickNav: {
805
740
  fontColor: globalTokens.hal_grey_s_40,
806
741
  hoverFontColor: globalTokens.hal_purple_d_70,
807
- selectedFontColor: globalTokens.hal_purple_s_38,
808
742
  dividerBorderColor: globalTokens.hal_grey_l_75,
809
743
  focusBorderColor: globalTokens.hal_blue_l_50,
810
744
  focusBorderStyle: globalTokens.border_solid,
@@ -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: globalTokens.hal_grey_l_90,
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)",
@@ -1424,6 +1416,9 @@ var defaultTranslatedComponentLabels = {
1424
1416
  },
1425
1417
  logoAlternativeText: "Logo"
1426
1418
  },
1419
+ applicationLayout: {
1420
+ visibilityToggleTitle: "Toggle visibility sidenav"
1421
+ },
1427
1422
  alert: {
1428
1423
  infoTitleText: "information",
1429
1424
  successTitleText: "success",
@@ -1433,6 +1428,9 @@ var defaultTranslatedComponentLabels = {
1433
1428
  dateInput: {
1434
1429
  invalidDateErrorMessage: "Invalid date."
1435
1430
  },
1431
+ dialog: {
1432
+ closeIconAriaLabel: "Close dialog"
1433
+ },
1436
1434
  fileInput: {
1437
1435
  fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1438
1436
  fileSizeLessThanErrorMessage: "File size must be less than max size.",
@@ -1440,7 +1438,8 @@ var defaultTranslatedComponentLabels = {
1440
1438
  singleButtonLabelDefault: "Select file",
1441
1439
  dropAreaButtonLabelDefault: "Select",
1442
1440
  multipleDropAreaLabelDefault: "or drop files",
1443
- singleDropAreaLabelDefault: "or drop a file"
1441
+ singleDropAreaLabelDefault: "or drop a file",
1442
+ deleteFileActionTitle: "Remove file"
1444
1443
  },
1445
1444
  footer: {
1446
1445
  copyrightText: function copyrightText(year) {
@@ -1496,13 +1495,10 @@ var defaultTranslatedComponentLabels = {
1496
1495
  fetchingDataErrorMessage: "Error fetching data"
1497
1496
  },
1498
1497
  calendar: {
1499
- days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1500
- daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
1498
+ daysShort: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
1501
1499
  months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1502
- monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
1503
- },
1504
- applicationLayout: {
1505
- visibilityToggleTitle: "Toggle visibility sidenav"
1500
+ previousMonthTitle: "Previous month",
1501
+ nextMonthTitle: "Next month"
1506
1502
  }
1507
1503
  };
1508
1504
  exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;