@dxc-technology/halstack-react 0.0.0-570929a → 0.0.0-5b2ad05

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 (186) hide show
  1. package/dist/ThemeContext.js +134 -100
  2. package/dist/V3Select/V3Select.js +549 -0
  3. package/dist/V3Textarea/V3Textarea.js +264 -0
  4. package/dist/accordion/Accordion.js +72 -59
  5. package/dist/accordion-group/AccordionGroup.js +1 -3
  6. package/dist/alert/Alert.js +126 -111
  7. package/dist/alert/index.d.ts +51 -0
  8. package/dist/badge/Badge.js +3 -1
  9. package/dist/box/Box.js +1 -9
  10. package/dist/button/Button.js +32 -22
  11. package/dist/card/Card.js +2 -4
  12. package/dist/checkbox/Checkbox.js +33 -25
  13. package/dist/chip/Chip.js +30 -28
  14. package/dist/common/variables.js +988 -573
  15. package/dist/date/Date.js +23 -35
  16. package/dist/date-input/DateInput.js +400 -0
  17. package/dist/date-input/index.d.ts +95 -0
  18. package/dist/dialog/Dialog.js +21 -39
  19. package/dist/dropdown/Dropdown.js +123 -71
  20. package/dist/file-input/FileInput.js +644 -0
  21. package/dist/file-input/FileItem.js +280 -0
  22. package/dist/file-input/index.d.ts +81 -0
  23. package/dist/footer/Footer.js +69 -53
  24. package/dist/footer/Icons.js +77 -0
  25. package/dist/header/Header.js +123 -84
  26. package/dist/header/Icons.js +59 -0
  27. package/dist/heading/Heading.js +13 -5
  28. package/dist/input-text/Icons.js +22 -0
  29. package/dist/input-text/InputText.js +97 -61
  30. package/dist/layout/ApplicationLayout.js +5 -9
  31. package/dist/layout/Icons.js +55 -0
  32. package/dist/link/Link.js +23 -26
  33. package/dist/main.d.ts +8 -0
  34. package/dist/main.js +65 -17
  35. package/dist/number-input/NumberInput.js +136 -0
  36. package/dist/number-input/NumberInputContext.js +16 -0
  37. package/dist/number-input/index.d.ts +113 -0
  38. package/dist/paginator/Icons.js +66 -0
  39. package/dist/paginator/Paginator.js +17 -17
  40. package/dist/password-input/PasswordInput.js +198 -0
  41. package/dist/password-input/index.d.ts +94 -0
  42. package/dist/progress-bar/ProgressBar.js +63 -27
  43. package/dist/resultsetTable/ResultsetTable.js +5 -22
  44. package/dist/select/Select.js +873 -333
  45. package/dist/select/index.d.ts +53 -0
  46. package/dist/sidenav/Sidenav.js +11 -15
  47. package/dist/slider/Slider.js +159 -70
  48. package/dist/spinner/Spinner.js +226 -59
  49. package/dist/switch/Switch.js +3 -3
  50. package/dist/table/Table.js +6 -2
  51. package/dist/tabs/Tabs.js +4 -8
  52. package/dist/tag/Tag.js +38 -36
  53. package/dist/text-input/TextInput.js +971 -0
  54. package/dist/text-input/index.d.ts +135 -0
  55. package/dist/textarea/Textarea.js +233 -124
  56. package/dist/textarea/index.d.ts +117 -0
  57. package/dist/toggle-group/ToggleGroup.js +130 -44
  58. package/dist/upload/Upload.js +3 -3
  59. package/dist/upload/buttons-upload/ButtonsUpload.js +13 -13
  60. package/dist/upload/buttons-upload/Icons.js +40 -0
  61. package/dist/upload/dragAndDropArea/DragAndDropArea.js +27 -23
  62. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  63. package/dist/upload/file-upload/FileToUpload.js +29 -24
  64. package/dist/upload/file-upload/Icons.js +66 -0
  65. package/dist/upload/transaction/Icons.js +160 -0
  66. package/dist/upload/transaction/Transaction.js +19 -42
  67. package/dist/upload/transactions/Transactions.js +11 -11
  68. package/dist/wizard/Icons.js +65 -0
  69. package/dist/wizard/Wizard.js +85 -63
  70. package/package.json +8 -10
  71. package/test/Date.test.js +48 -44
  72. package/test/DateInput.test.js +242 -0
  73. package/test/Dropdown.test.js +15 -0
  74. package/test/FileInput.test.js +201 -0
  75. package/test/Footer.test.js +2 -7
  76. package/test/Header.test.js +5 -10
  77. package/test/Heading.test.js +60 -12
  78. package/test/InputText.test.js +24 -16
  79. package/test/NumberInput.test.js +259 -0
  80. package/test/Paginator.test.js +1 -1
  81. package/test/PasswordInput.test.js +83 -0
  82. package/test/ResultsetTable.test.js +1 -2
  83. package/test/Slider.test.js +9 -17
  84. package/test/Spinner.test.js +5 -0
  85. package/test/TextInput.test.js +732 -0
  86. package/test/Textarea.test.js +193 -0
  87. package/test/ToggleGroup.test.js +5 -1
  88. package/test/Upload.test.js +5 -5
  89. package/test/{Select.test.js → V3Select.test.js} +56 -36
  90. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  91. package/dist/accordion/Accordion.stories.js +0 -207
  92. package/dist/accordion/readme.md +0 -96
  93. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  94. package/dist/accordion-group/readme.md +0 -70
  95. package/dist/alert/Alert.stories.js +0 -158
  96. package/dist/alert/close.svg +0 -4
  97. package/dist/alert/error.svg +0 -4
  98. package/dist/alert/info.svg +0 -4
  99. package/dist/alert/readme.md +0 -43
  100. package/dist/alert/success.svg +0 -4
  101. package/dist/alert/warning.svg +0 -4
  102. package/dist/button/Button.stories.js +0 -224
  103. package/dist/button/readme.md +0 -93
  104. package/dist/checkbox/Checkbox.stories.js +0 -144
  105. package/dist/checkbox/readme.md +0 -116
  106. package/dist/date/Date.stories.js +0 -205
  107. package/dist/date/calendar.svg +0 -1
  108. package/dist/date/calendar_dark.svg +0 -1
  109. package/dist/date/readme.md +0 -73
  110. package/dist/dialog/Dialog.stories.js +0 -217
  111. package/dist/dialog/readme.md +0 -32
  112. package/dist/dropdown/Dropdown.stories.js +0 -249
  113. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  114. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  115. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  116. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  117. package/dist/dropdown/readme.md +0 -69
  118. package/dist/footer/Footer.stories.js +0 -94
  119. package/dist/footer/dxc_logo_wht.png +0 -0
  120. package/dist/footer/readme.md +0 -41
  121. package/dist/header/Header.stories.js +0 -176
  122. package/dist/header/close_icon.svg +0 -1
  123. package/dist/header/dxc_logo_black.png +0 -0
  124. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  125. package/dist/header/dxc_logo_white.png +0 -0
  126. package/dist/header/hamb_menu_black.svg +0 -1
  127. package/dist/header/hamb_menu_white.svg +0 -1
  128. package/dist/header/readme.md +0 -33
  129. package/dist/input-text/InputText.stories.js +0 -209
  130. package/dist/input-text/error.svg +0 -1
  131. package/dist/input-text/readme.md +0 -91
  132. package/dist/layout/facebook.svg +0 -45
  133. package/dist/layout/linkedin.svg +0 -50
  134. package/dist/layout/twitter.svg +0 -53
  135. package/dist/link/readme.md +0 -51
  136. package/dist/paginator/images/next.svg +0 -3
  137. package/dist/paginator/images/nextPage.svg +0 -3
  138. package/dist/paginator/images/previous.svg +0 -3
  139. package/dist/paginator/images/previousPage.svg +0 -3
  140. package/dist/paginator/readme.md +0 -50
  141. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  142. package/dist/progress-bar/readme.md +0 -63
  143. package/dist/radio/Radio.stories.js +0 -166
  144. package/dist/radio/readme.md +0 -70
  145. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  146. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  147. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  148. package/dist/select/Select.stories.js +0 -235
  149. package/dist/select/readme.md +0 -72
  150. package/dist/slider/Slider.stories.js +0 -241
  151. package/dist/slider/readme.md +0 -64
  152. package/dist/spinner/Spinner.stories.js +0 -183
  153. package/dist/spinner/readme.md +0 -65
  154. package/dist/switch/Switch.stories.js +0 -134
  155. package/dist/switch/readme.md +0 -133
  156. package/dist/tabs/Tabs.stories.js +0 -130
  157. package/dist/tabs/readme.md +0 -78
  158. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  159. package/dist/tabs-for-sections/readme.md +0 -78
  160. package/dist/toggle/Toggle.stories.js +0 -297
  161. package/dist/toggle/readme.md +0 -80
  162. package/dist/toggle-group/readme.md +0 -82
  163. package/dist/upload/Upload.stories.js +0 -72
  164. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  165. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  166. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  167. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  168. package/dist/upload/file-upload/audio-icon.svg +0 -4
  169. package/dist/upload/file-upload/close.svg +0 -4
  170. package/dist/upload/file-upload/file-icon.svg +0 -4
  171. package/dist/upload/file-upload/video-icon.svg +0 -4
  172. package/dist/upload/readme.md +0 -37
  173. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  174. package/dist/upload/transaction/audio-icon.svg +0 -4
  175. package/dist/upload/transaction/error-icon.svg +0 -4
  176. package/dist/upload/transaction/file-icon-err.svg +0 -4
  177. package/dist/upload/transaction/file-icon.svg +0 -4
  178. package/dist/upload/transaction/image-icon-err.svg +0 -4
  179. package/dist/upload/transaction/image-icon.svg +0 -4
  180. package/dist/upload/transaction/success-icon.svg +0 -4
  181. package/dist/upload/transaction/video-icon-err.svg +0 -4
  182. package/dist/upload/transaction/video-icon.svg +0 -4
  183. package/dist/wizard/invalid_icon.svg +0 -6
  184. package/dist/wizard/valid_icon.svg +0 -6
  185. package/dist/wizard/validation-wrong.svg +0 -6
  186. package/test/TabsForSections.test.js +0 -34
@@ -7,11 +7,60 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
9
9
 
10
- var _dxc_logo_blk_rgb = _interopRequireDefault(require("../header/dxc_logo_blk_rgb.svg"));
10
+ var _Icons = require("../header/Icons");
11
11
 
12
- var _dxc_logo_wht = _interopRequireDefault(require("../footer/dxc_logo_wht.png"));
12
+ var _Icons2 = _interopRequireDefault(require("../footer/Icons"));
13
13
 
14
14
  var globalTokens = {
15
+ // Color
16
+ inherit: "inherit",
17
+ transparent: "transparent",
18
+ hal_white: "#ffffff",
19
+ hal_grey_l_95: "#f2f2f2",
20
+ hal_grey_l_90: "#e6e6e6",
21
+ hal_grey_l_80: "#cccccc",
22
+ hal_grey_l_75: "#bfbfbf",
23
+ hal_grey_l_60: "#999999",
24
+ hal_grey_s_40: "#666666",
25
+ hal_black: "#000000",
26
+ color_grey_800: "#4d4d4d",
27
+ color_grey_600: "#808080",
28
+ color_grey_50: "#fafafa",
29
+ hal_purple_l_95: "#f2eafa",
30
+ hal_purple_l_90: "#e5d5f6",
31
+ hal_purple_l_65: "#a46ede",
32
+ hal_purple_s_38: "#5f249f",
33
+ hal_purple_d_30: "#4b1c7d",
34
+ hal_purple_d_20: "#321353",
35
+ color_purple_600: "#7D2FD0",
36
+ color_purple_300: "#cbacec",
37
+ hal_blue_l_95: "#e6f4ff",
38
+ hal_blue_l_80: "#99d5ff",
39
+ hal_blue_l_50: "#0095ff",
40
+ hal_blue_l_45: "#0086e6",
41
+ hal_blue_s_35: "#0067b3",
42
+ hal_blue_d_20: "#003c66",
43
+ color_blue_500: "#33AAFF",
44
+ color_blue_50: "#f5fbff",
45
+ hal_red_l_95: "#ffe6e9",
46
+ hal_red_l_80: "#fe9aa7",
47
+ hal_red_l_60: "#fe344f",
48
+ hal_red_s_41: "#d0011b",
49
+ hal_red_d_30: "#980115",
50
+ hal_red_d_20: "#65010e",
51
+ color_red_700: "#ffccd3",
52
+ color_red_50: "#FFF5F6",
53
+ hal_green_l_95: "#eafaef",
54
+ hal_green_l_80: "#acecbe",
55
+ hal_green_s_39: "#24a148",
56
+ hal_green_d_30: "#1c7d38",
57
+ hal_green_d_20: "#135325",
58
+ hal_yellow_l_95: "#fef9e6",
59
+ hal_yellow_l_80: "#fbe89d",
60
+ hal_yellow_s_57: "#f7cf2b",
61
+ hal_yellow_d_40: "#c59f07",
62
+ hal_yellow_d_30: "#947705",
63
+ hal_orange_s_54: "#f38f20",
15
64
  black: "#000000",
16
65
  lightBlack: "#212121",
17
66
  yellow: "#FFED00",
@@ -27,8 +76,6 @@ var globalTokens = {
27
76
  red: "#D0011B",
28
77
  violet: "#8800F6",
29
78
  darkBlue: "#006BF6",
30
- inherit: "inherit",
31
- transparent: "transparent",
32
79
  purple: "#6f2c91",
33
80
  mediumPurple: "#ead8f3",
34
81
  lightPurple: "#f5ebf9",
@@ -46,7 +93,7 @@ var globalTokens = {
46
93
  lightWhite: "#f2f2f2",
47
94
  softGrey: "#cecece",
48
95
  softBlack: "#565656",
49
- fontSize10: "10px",
96
+ // Typography
50
97
  type_sans: "Open Sans, sans-serif",
51
98
  type_scale_root: "16px",
52
99
  type_scale_08: "3.75rem",
@@ -78,28 +125,54 @@ var globalTokens = {
78
125
  type_leading_compact_02: "1.25em",
79
126
  type_leading_compact_01: "1.365em",
80
127
  type_leading_normal: "1.5em",
81
- type_leading_loose_01: "1.75em",
82
- type_leading_loose_02: "2em"
128
+ type_leading_loose_01: "1.715em",
129
+ type_leading_loose_02: "2em",
130
+ fontSize10: "10px",
131
+ // Spacing
132
+ spacing_00: "0rem",
133
+ spacing_01: "0.125rem",
134
+ spacing_02: "0.25rem",
135
+ spacing_03: "0.5rem",
136
+ spacing_04: "0.75rem",
137
+ spacing_05: "1rem",
138
+ spacing_06: "1.5rem",
139
+ spacing_07: "2rem",
140
+ spacing_08: "2.5rem",
141
+ spacing_09: "3rem",
142
+ spacing_10: "3.5rem",
143
+ spacing_11: "4rem",
144
+ spacing_12: "5rem",
145
+ spacing_13: "6rem",
146
+ spacing_14: "7rem",
147
+ // Border
148
+ border_width_0: "0px",
149
+ border_width_1: "1px",
150
+ border_width_2: "2px",
151
+ border_width_4: "4px",
152
+ border_radius_none: "0rem",
153
+ border_radius_small: "0.125rem",
154
+ border_radius_medium: "0.25rem",
155
+ border_radius_large: "0.375rem",
156
+ border_radius_full: "9999px",
157
+ border_solid: "solid",
158
+ border_dashed: "dashed",
159
+ border_none: "none"
83
160
  };
84
161
  exports.globalTokens = globalTokens;
85
162
  var componentTokens = {
86
163
  accordion: {
87
- backgroundColor: globalTokens.white,
88
- arrowColor: globalTokens.purple,
89
- fontColorBase: globalTokens.darkGrey,
90
- hoverBackgroundColor: globalTokens.lightPurple,
91
- disabledFontColor: globalTokens.mediumGrey,
92
- customContentFontFamily: globalTokens.type_sans,
93
- customContentFontSize: globalTokens.type_scale_03,
94
- customContentFontWeight: globalTokens.type_light,
95
- customContentFontColor: "",
96
- customContentPanelHeight: "22px",
164
+ backgroundColor: globalTokens.hal_white,
165
+ disabledBackgroundColor: globalTokens.transparent,
166
+ hoverBackgroundColor: globalTokens.hal_purple_l_95,
167
+ arrowColor: globalTokens.hal_purple_s_38,
168
+ disabledArrowColor: globalTokens.hal_grey_l_60,
97
169
  assistiveTextFontFamily: globalTokens.type_sans,
98
170
  assistiveTextFontSize: globalTokens.type_scale_03,
99
171
  assistiveTextFontWeight: globalTokens.type_light,
100
172
  assistiveTextFontStyle: globalTokens.type_italic,
101
- assistiveTextFontColor: "",
102
173
  assistiveTextLetterSpacing: globalTokens.type_spacing_wide_01,
174
+ assistiveTextFontColor: globalTokens.hal_grey_s_40,
175
+ disabledAssistiveTextFontColor: globalTokens.hal_grey_l_60,
103
176
  assistiveTextMinWidth: "100px",
104
177
  assistiveTextPaddingRight: "24px",
105
178
  assistiveTextPaddingLeft: "0px",
@@ -107,274 +180,265 @@ var componentTokens = {
107
180
  titleLabelFontSize: globalTokens.type_scale_03,
108
181
  titleLabelFontWeight: globalTokens.type_regular,
109
182
  titleLabelFontStyle: globalTokens.type_normal,
110
- titleLabelFontColor: "",
183
+ titleLabelFontColor: globalTokens.hal_black,
184
+ disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
111
185
  titleLabelPaddingLeft: "0px",
112
- titleLabelPaddingRight: "0px",
113
- titlePaddingTop: "0px",
114
- titlePaddingBottom: "0px",
115
- titleFocusBorderStyle: "solid",
116
- titleFocusBorderThickness: "1px",
117
- titleFocusBorderColor: globalTokens.purple,
186
+ titleLabelPaddingRight: "16px",
187
+ titleLabelPaddingTop: "0px",
188
+ titleLabelPaddingBottom: "0px",
189
+ focusBorderStyle: "solid",
190
+ focusBorderThickness: "2px",
191
+ focusBorderColor: globalTokens.hal_blue_l_50,
118
192
  borderRadius: "4px",
119
193
  boxShadowOffsetX: "0px",
120
194
  boxShadowOffsetY: "6px",
121
195
  boxShadowBlur: "10px",
122
- boxShadowColor: "#00000024",
123
- iconMaxHeight: "24px",
124
- iconMaxWidth: "24px",
196
+ boxShadowColor: "#0000001a",
197
+ iconColor: globalTokens.hal_purple_s_38,
198
+ disabledIconColor: globalTokens.hal_grey_l_60,
199
+ iconSize: "24px",
125
200
  iconMarginLeft: "0px",
126
201
  iconMarginRigth: "12px",
127
- accordionGroupSeparatorBorderColor: "#00000024",
202
+ accordionGroupSeparatorBorderColor: "#0000001a",
128
203
  accordionGroupSeparatorBorderThickness: "1px",
129
204
  accordionGroupSeparatorBorderRadius: "0px",
130
205
  accordionGroupSeparatorBorderStyle: "solid"
131
206
  },
132
207
  alert: {
133
- overlayColor: globalTokens.black,
134
- infoColor: globalTokens.lightBlue,
135
- successColor: globalTokens.lightGreen,
136
- warningColor: globalTokens.lightYellow,
137
- errorColor: globalTokens.lightPink,
138
- focusColor: globalTokens.blue,
139
208
  titleFontFamily: globalTokens.type_sans,
209
+ titleFontColor: globalTokens.hal_black,
140
210
  titleFontSize: globalTokens.type_scale_01,
141
- titleFontColor: globalTokens.black,
211
+ titleFontStyle: globalTokens.type_normal,
142
212
  titleFontWeight: globalTokens.type_bold,
143
213
  titleTextTransform: globalTokens.type_uppercase,
144
- titleFontStyle: globalTokens.type_normal,
145
- titlePaddingRight: "10px",
214
+ titlePaddingRight: "0px",
146
215
  titlePaddingLeft: "0px",
147
- titlePaddingTop: "0px",
148
- titlePaddingBottom: "0px",
149
- contentFontFamily: globalTokens.type_sans,
150
- contentFontSize: globalTokens.type_scale_01,
151
- contentFontColor: globalTokens.black,
152
- contentFontWeight: globalTokens.type_normal,
153
- contentPaddingLeft: "46px",
154
- contentPaddingRight: "12px",
155
- contentPaddingTop: "8px",
156
- contentPaddingBottom: "20px",
157
- overlayOpacity: "0.8",
158
- boxShadowOffsetX: "0px",
159
- boxShadowOffsetY: "3px",
160
- boxShadowBlur: "6px",
161
- boxShadowColor: "#00000012",
216
+ inlineTextFontFamily: globalTokens.type_sans,
217
+ inlineTextFontColor: globalTokens.hal_black,
218
+ inlineTextFontSize: globalTokens.type_scale_01,
219
+ inlineTextFontStyle: globalTokens.type_normal,
220
+ inlineTextFontWeight: globalTokens.type_regular,
221
+ inlineTextPaddingLeft: "0px",
222
+ inlineTextPaddingRight: "0px",
223
+ contentPaddingLeft: "0px",
224
+ contentPaddingRight: "0px",
225
+ contentPaddingTop: "20px",
226
+ contentPaddingBottom: "30px",
162
227
  borderRadius: "4px",
163
- borderStyle: "none",
164
- borderThickness: "0px",
165
- borderColor: "transparent",
166
- height: "48px",
167
- inlineTextPaddingLeft: "10px",
168
- inlineTextPaddingRight: "10px",
169
- inlineTextPaddingTop: "0px",
170
- inlineTextPaddingBottom: "0px",
171
- iconPaddingLeft: "12px",
228
+ borderStyle: "solid",
229
+ borderThickness: "1px",
230
+ infoBorderColor: globalTokens.hal_blue_s_35,
231
+ successBorderColor: globalTokens.hal_green_s_39,
232
+ warningBorderColor: globalTokens.hal_yellow_d_40,
233
+ errorBorderColor: globalTokens.hal_red_s_41,
234
+ iconSize: "24px",
235
+ iconPaddingLeft: "0px",
172
236
  iconPaddingRight: "0px",
173
- iconPaddingTop: "0px",
174
- iconPaddingBottom: "0px",
175
- iconSize: "20px",
176
- textPaddingLeft: "12px",
177
- textPaddingRight: "12px",
178
- textPaddingTop: "0px",
179
- textPaddingBottom: "0px"
180
- },
181
- button: {
182
- primaryBackgroundColor: globalTokens.purple,
183
- primaryBackgroundColorOnDark: "#581B81",
184
- primaryHoverBackgroundColor: globalTokens.black,
185
- primaryHoverBackgroundColorOnDark: "#581B81",
186
- primaryFontColor: globalTokens.white,
187
- primaryFontColorOnDark: "#000000",
188
- primaryHoverFontColor: globalTokens.white,
189
- primaryHoverFontColorOnDark: "#000000",
190
- primaryActiveBackgroundColor: globalTokens.mediumBlack,
191
- primaryActiveBackgroundColorOnDark: "#581B81",
192
- primaryDisabledBackgroundColor: globalTokens.lighterPurple,
193
- primaryDisabledBackgroundColorOnDark: "#ffffff57",
194
- primaryDisabledFontColor: globalTokens.white,
195
- primaryDisabledFontColorOnDark: "#000000",
196
- primaryBorderThickness: "0px",
197
- primaryBorderColor: "",
198
- primaryBorderColorOnDark: "",
199
- primaryBorderStyle: "none",
200
- primaryBorderRadius: "4px",
201
- primaryFontFamily: globalTokens.type_sans,
202
- primaryFontSize: globalTokens.type_scale_02,
203
- primaryFontWeight: globalTokens.type_regular,
204
- primaryPaddingTop: "12px",
205
- primaryPaddingBottom: "12px",
206
- secondaryOutlinedColor: globalTokens.purple,
207
- secondaryOutlinedColorOnDark: "#6A229A",
208
- secondaryBackgroundColor: globalTokens.transparent,
209
- secondaryBackgroundColorOnDark: "transparent",
210
- secondaryHoverOutlinedColor: globalTokens.black,
211
- secondaryHoverOutlinedColorOnDark: "#6A229A",
212
- secondaryFontColor: globalTokens.black,
213
- secondaryFontColorOnDark: "#FFFFFF",
214
- secondaryHoverFontColor: globalTokens.black,
215
- secondaryHoverFontColorOnDark: "#FFFFFF",
216
- secondaryActiveBackgroundColor: globalTokens.mediumGreyBlack,
217
- secondaryActiveBackgroundColorOnDark: "#FFFFFF29",
218
- secondaryHoverBackgroundColor: globalTokens.darkWhite,
219
- secondaryHoverBackgroundColorOnDark: "#FFFFFF14",
220
- secondaryDisabledOutlinedColor: globalTokens.lighterPurple,
221
- secondaryDisabledOutlinedColorOnDark: "#575757",
222
- secondaryDisabledFontColor: globalTokens.lighterBlack,
223
- secondaryDisabledFontColorOnDark: "#575757",
224
- secondaryBorderThickness: "2px",
225
- secondaryBorderStyle: "solid",
226
- secondaryBorderRadius: "4px",
227
- secondaryFontFamily: globalTokens.type_sans,
228
- secondaryFontSize: globalTokens.type_scale_02,
229
- secondaryFontWeight: globalTokens.type_regular,
230
- secondaryPaddingTop: "10px",
231
- secondaryPaddingBottom: "10px",
232
- textBackgroundColor: globalTokens.transparent,
233
- textBackgroundColorOnDark: "transparent",
234
- textHoverBackgroundColor: globalTokens.black,
235
- textHoverBackgroundColorOnDark: "#6A229A80",
236
- textFontColor: globalTokens.purple,
237
- textFontColorOnDark: "#FFFFFF",
238
- textHoverFontColor: globalTokens.white,
239
- textHoverFontColorOnDark: "#FFFFFF",
240
- textActiveBackgroundColor: globalTokens.mediumBlack,
241
- textActiveBackgroundColorOnDark: "#581B81",
242
- textDisabledFontColor: globalTokens.lighterPurple,
243
- textDisabledBackgroundColor: "transparent",
244
- textDisabledBackgroundColorOnDark: "transparent",
245
- textDisabledFontColorOnDark: "#FFFFFF80",
246
- textBorderThickness: "0px",
247
- textBorderColor: "",
248
- textBorderColorOnDark: "",
249
- textBorderStyle: "none",
250
- textBorderRadius: "4px",
251
- textFontFamily: globalTokens.type_sans,
252
- textFontSize: globalTokens.type_scale_02,
253
- textFontWeight: globalTokens.type_regular,
254
- textPaddingTop: "12px",
255
- textPaddingBottom: "12px",
256
- focusColor: globalTokens.blue,
257
- labelFontLineHeight: globalTokens.type_leading_normal,
258
- labelLetterSpacing: globalTokens.type_spacing_wide_01,
259
- labelTextTransform: globalTokens.type_uppercase,
260
- iconMaxHeight: "20px",
261
- iconMaxWidth: "20px",
262
- minHeight: "43px"
237
+ infoIconColor: globalTokens.hal_blue_s_35,
238
+ successIconColor: globalTokens.hal_green_s_39,
239
+ warningIconColor: globalTokens.hal_yellow_d_40,
240
+ errorIconColor: globalTokens.hal_red_s_41,
241
+ infoBackgroundColor: globalTokens.hal_blue_l_95,
242
+ successBackgroundColor: globalTokens.hal_green_l_95,
243
+ warningBackgroundColor: globalTokens.hal_yellow_l_95,
244
+ errorBackgroundColor: globalTokens.hal_red_l_95,
245
+ hoverActionBackgroundColor: "#0000000D",
246
+ activeActionBackgroundColor: "#0000001A",
247
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
248
+ overlayColor: "#000000B3"
263
249
  },
264
250
  box: {
265
251
  backgroundColor: globalTokens.white,
266
- fontFamily: globalTokens.type_sans,
267
- fontSize: globalTokens.type_scale_02,
268
- fontWeight: globalTokens.type_regular,
269
- fontColor: globalTokens.black,
270
252
  letterSpacing: globalTokens.type_spacing_wide_01,
271
253
  borderRadius: "4px",
272
254
  borderThickness: "0px",
273
255
  borderStyle: "none",
274
- borderColor: "transparent",
275
- noneShadowDepthShadowOffsetX: "0px",
276
- noneShadowDepthShadowOffsetY: "6px",
277
- noneShadowDepthShadowBlur: "10px",
278
- noneShadowDepthShadowSpread: "0px",
279
- noneShadowDepthShadowColor: "#00000033",
256
+ borderColor: globalTokens.transparent,
257
+ noneShadowDepthShadowOffsetX: "none",
258
+ noneShadowDepthShadowOffsetY: "none",
259
+ noneShadowDepthShadowBlur: "none",
260
+ noneShadowDepthShadowSpread: "none",
261
+ noneShadowDepthShadowColor: globalTokens.transparent,
280
262
  oneShadowDepthShadowOffsetX: "0px",
281
- oneShadowDepthShadowOffsetY: "6px",
282
- oneShadowDepthShadowBlur: "10px",
283
- oneShadowDepthShadowSpread: "-1px",
263
+ oneShadowDepthShadowOffsetY: "3px",
264
+ oneShadowDepthShadowBlur: "6px",
265
+ oneShadowDepthShadowSpread: "0px",
284
266
  oneShadowDepthShadowColor: "#00000033",
285
267
  twoShadowDepthShadowOffsetX: "0px",
286
- twoShadowDepthShadowOffsetY: "6px",
268
+ twoShadowDepthShadowOffsetY: "3px",
287
269
  twoShadowDepthShadowBlur: "10px",
288
- twoShadowDepthShadowSpread: "-2px",
270
+ twoShadowDepthShadowSpread: "0px",
289
271
  twoShadowDepthShadowColor: "#00000033"
290
272
  },
273
+ button: {
274
+ labelFontLineHeight: globalTokens.type_leading_normal,
275
+ labelLetterSpacing: globalTokens.type_spacing_wide_01,
276
+ paddingLeft: globalTokens.spacing_03,
277
+ paddingRight: globalTokens.spacing_03,
278
+ paddingTop: globalTokens.spacing_03,
279
+ paddingBottom: globalTokens.spacing_03,
280
+ focusBorderColor: globalTokens.hal_blue_l_50,
281
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
282
+ primaryBackgroundColor: globalTokens.hal_purple_s_38,
283
+ primaryBackgroundColorOnDark: globalTokens.hal_purple_s_38,
284
+ primaryFontColor: globalTokens.hal_white,
285
+ primaryFontColorOnDark: globalTokens.hal_white,
286
+ primaryHoverBackgroundColor: globalTokens.hal_purple_d_30,
287
+ primaryHoverBackgroundColorOnDark: globalTokens.color_purple_600,
288
+ primaryActiveBackgroundColor: globalTokens.hal_purple_d_20,
289
+ primaryActiveBackgroundColorOnDark: globalTokens.hal_purple_d_30,
290
+ primaryDisabledBackgroundColor: globalTokens.hal_grey_l_95,
291
+ primaryDisabledBackgroundColorOnDark: globalTokens.color_grey_800,
292
+ primaryDisabledFontColor: globalTokens.hal_grey_l_60,
293
+ primaryDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
294
+ primaryBorderThickness: globalTokens.border_width_0,
295
+ primaryBorderStyle: globalTokens.border_none,
296
+ primaryBorderRadius: globalTokens.border_radius_medium,
297
+ primaryFontFamily: globalTokens.type_sans,
298
+ primaryFontSize: globalTokens.type_scale_03,
299
+ primaryFontWeight: globalTokens.type_regular,
300
+ secondaryBackgroundColor: globalTokens.transparent,
301
+ secondaryBackgroundColorOnDark: globalTokens.transparent,
302
+ secondaryFontColor: globalTokens.hal_purple_s_38,
303
+ secondaryFontColorOnDark: globalTokens.hal_white,
304
+ secondaryHoverFontColor: globalTokens.hal_white,
305
+ secondaryHoverFontColorOnDark: globalTokens.hal_black,
306
+ secondaryBorderColor: globalTokens.hal_purple_s_38,
307
+ secondaryBorderColorOnDark: globalTokens.hal_white,
308
+ secondaryHoverBackgroundColor: globalTokens.hal_purple_s_38,
309
+ secondaryHoverBackgroundColorOnDark: globalTokens.hal_white,
310
+ secondaryActiveBackgroundColor: globalTokens.hal_purple_d_20,
311
+ secondaryActiveBackgroundColorOnDark: globalTokens.hal_grey_l_90,
312
+ secondaryDisabledBackgroundColor: globalTokens.transparent,
313
+ secondaryDisabledBackgroundColorOnDark: globalTokens.transparent,
314
+ secondaryDisabledFontColor: globalTokens.lighterBlack,
315
+ secondaryDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
316
+ secondaryDisabledBorderColor: globalTokens.hal_grey_l_60,
317
+ secondaryDisabledBorderColorOnDark: globalTokens.hal_grey_l_60,
318
+ secondaryBorderThickness: globalTokens.border_width_1,
319
+ secondaryBorderStyle: globalTokens.border_solid,
320
+ secondaryBorderRadius: globalTokens.border_radius_medium,
321
+ secondaryFontFamily: globalTokens.type_sans,
322
+ secondaryFontSize: globalTokens.type_scale_03,
323
+ secondaryFontWeight: globalTokens.type_regular,
324
+ textBackgroundColor: globalTokens.transparent,
325
+ textBackgroundColorOnDark: globalTokens.transparent,
326
+ textFontColor: globalTokens.hal_purple_s_38,
327
+ textFontColorOnDark: globalTokens.hal_white,
328
+ textHoverBackgroundColor: globalTokens.hal_purple_l_95,
329
+ textHoverBackgroundColorOnDark: globalTokens.color_grey_800,
330
+ textActiveBackgroundColor: globalTokens.hal_purple_l_90,
331
+ textActiveBackgroundColorOnDark: globalTokens.hal_grey_s_40,
332
+ textDisabledBackgroundColor: globalTokens.transparent,
333
+ textDisabledBackgroundColorOnDark: globalTokens.transparent,
334
+ textDisabledFontColor: globalTokens.hal_grey_l_60,
335
+ textDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
336
+ textBorderThickness: globalTokens.border_width_0,
337
+ textBorderStyle: globalTokens.border_none,
338
+ textBorderRadius: globalTokens.border_radius_medium,
339
+ textFontFamily: globalTokens.type_sans,
340
+ textFontSize: globalTokens.type_scale_03,
341
+ textFontWeight: globalTokens.type_regular
342
+ },
291
343
  card: {
292
344
  height: "220px",
293
345
  width: "400px"
294
346
  },
295
347
  checkbox: {
296
- backgroundColorChecked: globalTokens.mediumBlue,
297
- backgroundHoverColorChecked: "#7BB0D6",
298
- backgroundColorCheckedOnDark: "#FFFFFF",
299
- backgroundHoverColorCheckedOnDark: "#B1B1B1",
300
- borderColor: globalTokens.mediumBlue,
301
- borderHoverColor: "#7BB0D6",
302
- borderColorOnDark: "#FFFFFF",
303
- borderHoverColorOnDark: "#B1B1B1",
304
- checkColor: globalTokens.white,
305
- checkColorOnDark: "#0067B3",
348
+ backgroundColorChecked: globalTokens.hal_blue_s_35,
349
+ backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
350
+ hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
351
+ hoverBackgroundColorCheckedOnDark: global.hal_white,
352
+ disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
353
+ disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
354
+ borderColor: globalTokens.hal_blue_s_35,
355
+ borderColorOnDark: globalTokens.hal_grey_l_90,
356
+ hoverBorderColor: globalTokens.hal_blue_d_20,
357
+ hoverBorderColorOnDark: globalTokens.hal_white,
358
+ disabledBorderColor: globalTokens.hal_grey_l_60,
359
+ disabledBorderColorOnDark: globalTokens.color_grey_800,
360
+ checkColor: globalTokens.hal_white,
361
+ checkColorOnDark: globalTokens.hal_black,
362
+ disabledCheckColor: globalTokens.hal_white,
363
+ disabledCheckColorOnDark: globalTokens.hal_grey_l_60,
306
364
  fontFamily: globalTokens.type_sans,
307
- fontSize: globalTokens.type_scale_01,
308
- fontWeight: globalTokens.type_normal,
309
- fontColor: globalTokens.inherit,
310
- fontColorOnDark: "#FFFFFF",
311
- disabledBackgroundColorChecked: globalTokens.softBlue,
312
- disabledBackgroundColorCheckedOnDark: globalTokens.softBlue,
313
- disabledBorderColor: globalTokens.softBlue,
314
- disabledBorderColorOnDark: globalTokens.softBlue,
315
- disabledColorOnDark: "#BFBFBF",
316
- disabledCheckColor: globalTokens.white,
317
- disabledCheckColorOnDark: "#FFFFFF",
318
- disabledFontColor: globalTokens.lighterBlack,
319
- disabledFontColorOnDark: "#575757",
320
- focusColor: globalTokens.blue,
321
- checkLabelSpacing: "10px"
365
+ fontSize: globalTokens.type_scale_02,
366
+ fontWeight: globalTokens.type_regular,
367
+ fontColor: globalTokens.hal_black,
368
+ fontColorOnDark: globalTokens.hal_white,
369
+ disabledFontColor: globalTokens.hal_grey_l_60,
370
+ disabledFontColorOnDark: globalTokens.hal_grey_l_60,
371
+ focusColor: globalTokens.hal_blue_l_50,
372
+ focusColorOnDark: globalTokens.hal_blue_l_50,
373
+ checkLabelSpacing: "8px"
322
374
  },
323
375
  chip: {
324
- backgroundColor: globalTokens.darkWhite,
325
- borderColor: "transparent",
326
- fontColor: globalTokens.black,
327
- disabledBackgroundColor: globalTokens.mediumWhite,
328
- disabledFontColor: globalTokens.lighterBlack,
376
+ backgroundColor: globalTokens.hal_grey_l_90,
377
+ disabledBackgroundColor: globalTokens.hal_grey_l_95,
329
378
  fontFamily: globalTokens.type_sans,
330
379
  fontSize: globalTokens.type_scale_03,
331
- fontWeight: "400",
332
- fontStyle: "normal",
333
- borderRadius: "50px",
334
- borderThickness: "2px",
380
+ fontStyle: globalTokens.type_normal,
381
+ fontWeight: globalTokens.type_regular,
382
+ fontColor: globalTokens.hal_black,
383
+ disabledFontColor: globalTokens.hal_grey_l_60,
384
+ borderColor: globalTokens.transparent,
385
+ borderRadius: "80px",
386
+ borderThickness: "0px",
335
387
  borderStyle: "solid",
336
- height: "18px",
337
- contentPaddingLeft: "20px",
338
- contentPaddingRight: "20px",
339
- contentPaddingTop: "10px",
340
- contentPaddingBottom: "10px",
388
+ contentPaddingLeft: "16px",
389
+ contentPaddingRight: "16px",
390
+ contentPaddingTop: "0px",
391
+ contentPaddingBottom: "0px",
341
392
  iconSize: "24px",
342
- iconPaddingLeft: "0px",
343
- iconPaddingRight: "0px"
393
+ iconSpacing: "8px",
394
+ iconColor: globalTokens.hal_black,
395
+ disabledIconColor: globalTokens.hal_grey_l_60,
396
+ focusColor: globalTokens.hal_blue_l_50
344
397
  },
345
398
  date: {
346
399
  pickerSelectedDateBackgroundColor: globalTokens.purple,
347
- pickerSelectedDateColor: globalTokens.white,
348
- pickerBackgroundColor: globalTokens.white,
349
- pickerFontColor: globalTokens.black,
350
- pickerActualDate: globalTokens.lightGrey,
400
+ pickerSelectedDateColor: globalTokens.hal_white,
401
+ pickerBackgroundColor: globalTokens.hal_white,
402
+ pickerFontColor: globalTokens.hal_black,
351
403
  pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
352
- pickerHoverDateFontColor: globalTokens.black,
353
- pickerYearColor: globalTokens.black,
354
- pickerMonthColor: globalTokens.black,
355
- pickerWeekLabelColor: globalTokens.black,
356
- pickerBackgroundColorMonthArrows: globalTokens.black,
357
- focusColor: globalTokens.blue,
404
+ pickerHoverDateFontColor: globalTokens.hal_black,
405
+ pickerActualDateColor: globalTokens.lightGrey,
406
+ pickerYearColor: globalTokens.hal_black,
407
+ pickerMonthColor: globalTokens.hal_black,
408
+ pickerWeekLabelColor: globalTokens.hal_black,
409
+ pickerBackgroundColorMonthArrows: globalTokens.transparent,
410
+ focusColor: globalTokens.hal_blue_l_50,
358
411
  fontFamily: globalTokens.type_sans,
359
412
  pickerHeight: "316px",
360
413
  pickerWidth: "290px"
361
414
  },
415
+ dateInput: {
416
+ pickerFontFamily: globalTokens.type_sans,
417
+ pickerBackgroundColor: globalTokens.hal_white,
418
+ pickerHoverDateFontColor: globalTokens.hal_black,
419
+ pickerHoverDateBackgroundColor: globalTokens.hal_purple_l_90,
420
+ pickerSelectedDateColor: globalTokens.hal_white,
421
+ pickerSelectedDateBackgroundColor: globalTokens.hal_purple_s_38,
422
+ pickerActualDateFontColor: globalTokens.hal_grey_l_60,
423
+ pickerYearFontColor: globalTokens.hal_black,
424
+ pickerMonthFontColor: globalTokens.hal_black,
425
+ pickerWeekFontColor: globalTokens.hal_black,
426
+ pickerDayFontColor: globalTokens.hal_black,
427
+ pickerMonthArrowsBackgroundColor: globalTokens.transparent,
428
+ pickerFocusColor: globalTokens.hal_blue_l_50,
429
+ pickerHeight: "316px",
430
+ pickerWidth: "290px"
431
+ },
362
432
  dialog: {
363
- overlayColor: globalTokens.black,
364
- scrollBarThumbColor: globalTokens.darkGrey,
365
- scrollBarTrackColor: globalTokens.lightGrey,
366
- backgroundColor: globalTokens.white,
367
- fontFamily: globalTokens.type_sans,
368
- fontSize: globalTokens.type_scale_03,
369
- fontWeight: globalTokens.type_regular,
370
- fontColor: globalTokens.black,
371
- closeIconWidth: "34px",
372
- closeIconHeight: "34px",
433
+ overlayColor: globalTokens.hal_black,
434
+ backgroundColor: globalTokens.hal_white,
435
+ closeIconWidth: "24px",
436
+ closeIconHeight: "24px",
373
437
  closeIconTopPosition: "20px",
374
438
  closeIconRightPosition: "20px",
375
439
  closeIconBackgroundColor: "none",
376
440
  closeIconBorderColor: "none",
377
- closeIconColor: globalTokens.black,
441
+ closeIconColor: globalTokens.hal_black,
378
442
  closeIconBorderThickness: "0px",
379
443
  closeIconBorderStyle: "solid",
380
444
  closeIconBorderRadius: "0px",
@@ -382,154 +446,190 @@ var componentTokens = {
382
446
  boxShadowOffsetY: "1px",
383
447
  boxShadowBlur: "3px",
384
448
  boxShadowColor: "rgba(0, 0, 0, 0.2)",
385
- overlayOpacity: "0.8"
449
+ overlayOpacity: "0.7"
386
450
  },
387
451
  dropdown: {
388
- buttonBackgroundColor: globalTokens.white,
389
- buttonFontColor: globalTokens.black,
390
- optionsListBackgroundColor: globalTokens.white,
391
- optionsListFontColor: globalTokens.black,
392
- optionsListHoverBackgroundColor: globalTokens.white,
393
- buttonHoverBackgroundColor: globalTokens.white,
394
- scrollBarThumbColor: globalTokens.darkGrey,
395
- scrollBarTrackColor: globalTokens.lightGrey,
396
- focusColor: globalTokens.blue,
397
- fontFamily: globalTokens.type_sans,
398
- fontSize: globalTokens.type_scale_03,
452
+ buttonBackgroundColor: globalTokens.hal_white,
453
+ hoverButtonBackgroundColor: globalTokens.hal_grey_l_95,
454
+ activeButtonBackgroundColor: globalTokens.lightGrey,
455
+ buttonFontFamily: globalTokens.type_sans,
399
456
  buttonFontSize: globalTokens.type_scale_03,
400
457
  buttonFontStyle: globalTokens.type_normal,
401
458
  buttonFontWeight: globalTokens.type_regular,
402
- minHeight: "46px",
403
- minWidth: "230px",
404
- borderRadius: "2px",
459
+ buttonFontColor: globalTokens.hal_black,
460
+ buttonIconSize: "20px",
461
+ buttonIconSpacing: "10px",
462
+ buttonIconColor: globalTokens.hal_black,
463
+ buttonPaddingTop: "0px",
464
+ buttonPaddingBottom: "0px",
465
+ buttonPaddingLeft: "16px",
466
+ buttonPaddingRight: "16px",
467
+ disabledColor: globalTokens.lighterBlack,
468
+ disabledButtonBackgroundColor: globalTokens.transparent,
469
+ disabledBorderColor: globalTokens.lighterBlack,
470
+ optionBackgroundColor: globalTokens.hal_white,
471
+ hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
472
+ activeOptionBackgroundColor: globalTokens.lightGrey,
473
+ optionFontFamily: globalTokens.type_sans,
474
+ optionFontSize: globalTokens.type_scale_root,
475
+ optionFontStyle: globalTokens.type_normal,
476
+ optionFontWeight: globalTokens.type_regular,
477
+ optionFontColor: globalTokens.hal_black,
478
+ optionIconSize: "20px",
479
+ optionIconSpacing: "10px",
480
+ optionIconColor: globalTokens.hal_black,
481
+ optionPaddingTop: "6px",
482
+ optionPaddingBottom: "6px",
483
+ optionPaddingLeft: "16px",
484
+ optionPaddingRight: "16px",
485
+ caretIconSize: "24px",
486
+ caretIconColor: globalTokens.hal_black,
487
+ caretIconSpacing: "12px",
488
+ borderRadius: "4px",
405
489
  borderStyle: "none",
406
490
  borderThickness: "0px",
407
- borderColor: "transparent",
408
- optionsPaddingTop: "6px",
409
- optionsPaddingBottom: "6px",
410
- optionsPaddingLeft: "6px",
411
- optionsPaddingRight: "6px",
412
- caretIconMarginRight: "10px",
413
- caretIconMarginLeft: "10px",
414
- caretIconMarginTop: "0px",
415
- caretIconMarginBottom: "0px",
416
- optionsFontColor: "",
417
- optionsFontSize: globalTokens.type_scale_root,
418
- optionsFontStyle: globalTokens.type_normal,
419
- optionsFontWeight: globalTokens.type_regular,
420
- iconSize: "20px",
421
- iconOptionSpacing: "10px",
422
- iconColor: ""
491
+ borderColor: globalTokens.transparent,
492
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
493
+ scrollBarTrackColor: globalTokens.lightGrey,
494
+ focusColor: globalTokens.hal_blue_l_50
495
+ },
496
+ fileInput: {
497
+ dropBorderColor: globalTokens.hal_black,
498
+ fileItemBorderColor: globalTokens.hal_grey_l_80,
499
+ fileNameFontColor: globalTokens.hal_black,
500
+ labelFontColor: globalTokens.hal_black,
501
+ helperTextFontColor: globalTokens.hal_black,
502
+ dropLabelFontColor: globalTokens.hal_black,
503
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
504
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
505
+ disabledDropLabelFontColor: globalTokens.hal_grey_l_60,
506
+ focusDropBorderColor: globalTokens.hal_blue_l_50,
507
+ disabledDropBorderColor: globalTokens.hal_grey_l_60,
508
+ focusDropBackgroundColor: globalTokens.color_blue_50,
509
+ hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
510
+ activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
511
+ errorFileItemBorderColor: globalTokens.hal_red_s_41,
512
+ errorFileItemBackgroundColor: globalTokens.color_red_50,
513
+ errorFileItemIconBackgroundColor: globalTokens.color_red_700,
514
+ errorFileItemIconColor: globalTokens.hal_red_s_41,
515
+ fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
516
+ fileItemIconColor: globalTokens.color_grey_600,
517
+ errorMessageFontColor: globalTokens.hal_red_s_41,
518
+ labelFontFamily: globalTokens.type_sans,
519
+ labelFontSize: globalTokens.type_scale_02,
520
+ labelFontWeight: globalTokens.type_semibold,
521
+ labelLineHeight: globalTokens.type_leading_loose_01,
522
+ fileItemFontFamily: globalTokens.type_sans,
523
+ fileItemFontSize: globalTokens.type_scale_02,
524
+ fileItemFontWeight: globalTokens.type_regular,
525
+ fileItemLineHeight: globalTokens.type_leading_normal,
526
+ helperTextFontFamily: globalTokens.type_sans,
527
+ helperTextFontSize: globalTokens.type_scale_01,
528
+ helperTextFontWeight: globalTokens.type_regular,
529
+ helperTextLineHeight: globalTokens.type_leading_normal,
530
+ dropLabelFontFamily: globalTokens.type_sans,
531
+ dropLabelFontSize: globalTokens.type_scale_03,
532
+ dropLabelFontWeight: globalTokens.type_regular,
533
+ errorMessageFontFamily: globalTokens.type_sans,
534
+ errorMessageFontSize: globalTokens.type_scale_01,
535
+ errorMessageFontWeight: globalTokens.type_regular,
536
+ errorMessageLineHeight: globalTokens.type_scale_05,
537
+ dropBorderThickness: globalTokens.border_width_1,
538
+ dropBorderStyle: globalTokens.border_dashed,
539
+ dropBorderRadius: globalTokens.border_radius_large,
540
+ fileItemBorderThickness: globalTokens.border_width_1,
541
+ fileItemBorderStyle: globalTokens.border_solid,
542
+ fileItemBorderRadius: globalTokens.border_radius_medium
423
543
  },
424
544
  footer: {
425
- backgroundColor: globalTokens.black,
426
- bottomLinksDividerColor: globalTokens.mediumBlue,
427
- bottomLinksDividerThickness: "2px",
545
+ height: "124px",
546
+ backgroundColor: globalTokens.hal_black,
547
+ bottomLinksDividerColor: globalTokens.hal_blue_l_50,
548
+ bottomLinksDividerThickness: "1px",
428
549
  bottomLinksDividerStyle: "solid",
429
- bottomLinksDividerSpacing: "6px",
550
+ bottomLinksDividerSpacing: "8px",
430
551
  bottomLinksFontFamily: globalTokens.type_sans,
431
552
  bottomLinksFontSize: globalTokens.type_scale_01,
432
553
  bottomLinksFontStyle: globalTokens.type_normal,
433
554
  bottomLinksFontWeight: globalTokens.type_regular,
434
- bottomLinksFontColor: "",
555
+ bottomLinksFontColor: globalTokens.hal_white,
435
556
  bottomLinksTextDecoration: globalTokens.type_no_line,
436
557
  copyrightFontFamily: globalTokens.type_sans,
437
558
  copyrightFontSize: globalTokens.type_scale_01,
438
559
  copyrightFontStyle: globalTokens.type_normal,
439
560
  copyrightFontWeight: globalTokens.type_regular,
440
- copyrightFontColor: "",
441
- customContentFontFamily: globalTokens.type_sans,
442
- customContentFontSize: globalTokens.type_scale_root,
443
- customContentFontStyle: globalTokens.type_normal,
444
- customContentFontWeight: globalTokens.type_regular,
445
- customContentFontColor: "",
446
- fontColorBase: globalTokens.white,
447
- logo: _dxc_logo_wht["default"],
448
- logoHeight: "34px",
561
+ copyrightFontColor: globalTokens.hal_white,
562
+ logo: _Icons2["default"],
563
+ logoHeight: "32px",
449
564
  logoWidth: "auto",
450
- minHeight: "120px",
451
- socialIconSize: "25px",
452
- socialIconsGutter: "15px"
565
+ socialLinksSize: "24px",
566
+ socialLinksGutter: "16px",
567
+ socialLinksColor: globalTokens.hal_white
453
568
  },
454
569
  header: {
455
- backgroundColor: globalTokens.white,
456
- customContentFontFamily: "",
457
- customContentFontStyle: globalTokens.type_normal,
458
- customContentFontColor: "",
459
- customContentFontSize: "",
460
- customContentFontWeight: globalTokens.type_regular,
461
- dropdownBackgroundColor: globalTokens.transparent,
462
- dropdownHoverBackgroundColor: globalTokens.transparent,
463
- fontColorBase: globalTokens.black,
464
- fontFamilyBase: globalTokens.type_sans,
465
- fontSizeBase: globalTokens.type_scale_root,
466
- hamburguerFocusColor: globalTokens.blue,
467
- hamburguerFontFamily: "",
570
+ backgroundColor: globalTokens.hal_white,
571
+ hamburguerFocusColor: globalTokens.hal_blue_l_50,
572
+ hamburguerFontFamily: globalTokens.type_sans,
468
573
  hamburguerFontStyle: globalTokens.type_normal,
469
- hamburguerFontColor: "",
470
- hamburguerFontSize: globalTokens.fontSize10,
574
+ hamburguerFontColor: globalTokens.hal_black,
575
+ hamburguerFontSize: "10px",
471
576
  hamburguerFontWeight: globalTokens.type_semibold,
472
- hamburguerColor: globalTokens.black,
473
- hamburguerHoverColor: globalTokens.mediumGreyBlack,
474
577
  hamburguerTextTransform: globalTokens.type_uppercase,
475
- logo: _dxc_logo_blk_rgb["default"],
476
- logoResponsive: _dxc_logo_blk_rgb["default"],
477
- logoHeight: "32px",
578
+ hamburguerIconColor: globalTokens.hal_black,
579
+ hamburguerHoverColor: globalTokens.mediumGreyBlack,
580
+ logo: _Icons.dxcLogo,
581
+ logoResponsive: _Icons.dxcLogo,
582
+ logoHeight: "40px",
478
583
  logoWidth: "auto",
479
- menuBackgroundColor: globalTokens.white,
584
+ menuBackgroundColor: globalTokens.hal_white,
480
585
  menuZindex: "2000",
481
586
  menuTabletWidth: "60vw",
482
587
  menuMobileWidth: "100vw",
483
- menuCustomContentFontFamily: "",
484
- menuCustomContentFontStyle: globalTokens.type_normal,
485
- menuCustomContentFontColor: "",
486
- menuCustomContentFontSize: "",
487
- menuCustomContentFontWeight: globalTokens.type_regular,
488
588
  minHeight: "64px",
489
589
  overlayColor: globalTokens.softBlack,
490
590
  overlayOpacity: "0.7",
491
591
  overlayZindex: "1600",
492
592
  paddingTop: "0px",
493
593
  paddingBottom: "0px",
494
- paddingRight: "0px",
495
- paddingLeft: "20px",
496
- underlinedColor: globalTokens.black,
594
+ paddingRight: "24px",
595
+ paddingLeft: "24px",
596
+ underlinedColor: globalTokens.hal_black,
497
597
  underlinedThickness: "2px",
498
- underlinedStyle: "solid"
598
+ underlinedStyle: "solid",
599
+ contentColor: globalTokens.hal_black,
600
+ contentColorOnDark: globalTokens.hal_white
499
601
  },
500
602
  heading: {
501
- fontColorBase: globalTokens.inherit,
502
- fontFamilyBase: globalTokens.type_sans,
503
- level1FontColor: "",
504
- level1FontFamily: "",
603
+ level1FontColor: globalTokens.inherit,
604
+ level1FontFamily: globalTokens.type_sans,
505
605
  level1FontSize: globalTokens.type_scale_08,
506
606
  level1FontStyle: globalTokens.type_normal,
507
607
  level1FontWeight: globalTokens.type_regular,
508
608
  level1LineHeight: globalTokens.type_leading_compact_01,
509
609
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
510
- level2FontColor: "",
511
- level2FontFamily: "",
610
+ level2FontColor: globalTokens.inherit,
611
+ level2FontFamily: globalTokens.type_sans,
512
612
  level2FontSize: globalTokens.type_scale_07,
513
613
  level2FontStyle: globalTokens.type_normal,
514
614
  level2FontWeight: globalTokens.type_regular,
515
615
  level2LineHeight: globalTokens.type_leading_normal,
516
616
  level2LetterSpacing: globalTokens.type_spacing_normal,
517
- level3FontColor: "",
518
- level3FontFamily: "",
617
+ level3FontColor: globalTokens.inherit,
618
+ level3FontFamily: globalTokens.type_sans,
519
619
  level3FontSize: globalTokens.type_scale_06,
520
620
  level3FontStyle: globalTokens.type_normal,
521
621
  level3FontWeight: globalTokens.type_regular,
522
622
  level3LineHeight: globalTokens.type_leading_compact_01,
523
623
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
524
- level4FontColor: "",
525
- level4FontFamily: "",
624
+ level4FontColor: globalTokens.inherit,
625
+ level4FontFamily: globalTokens.type_sans,
526
626
  level4FontSize: globalTokens.type_scale_05,
527
627
  level4FontStyle: globalTokens.type_normal,
528
628
  level4FontWeight: globalTokens.type_regular,
529
629
  level4LineHeight: globalTokens.type_leading_normal,
530
630
  level4LetterSpacing: globalTokens.type_spacing_normal,
531
- level5FontColor: "",
532
- level5FontFamily: "",
631
+ level5FontColor: globalTokens.inherit,
632
+ level5FontFamily: globalTokens.type_sans,
533
633
  level5FontSize: globalTokens.type_scale_04,
534
634
  level5FontStyle: globalTokens.type_normal,
535
635
  level5FontWeight: globalTokens.type_regular,
@@ -537,71 +637,178 @@ var componentTokens = {
537
637
  level5LetterSpacing: globalTokens.type_spacing_wide_01
538
638
  },
539
639
  inputText: {
540
- assistiveTextFontColor: "",
541
- assistiveTextFontColorOnDark: "",
640
+ fontFamily: globalTokens.type_sans,
641
+ assistiveTextFontColor: globalTokens.black,
642
+ assistiveTextFontColorOnDark: globalTokens.white,
542
643
  assistiveTextFontSize: globalTokens.type_scale_01,
543
644
  assistiveTextFontStyle: globalTokens.type_normal,
544
645
  assistiveTextFontWeight: globalTokens.type_regular,
545
- disabledFontColor: globalTokens.lighterBlack,
546
- disabledFontColorOnDark: "#575757",
646
+ disabledColor: globalTokens.lighterBlack,
647
+ disabledColorOnDark: "#575757",
547
648
  errorColor: globalTokens.red,
548
- errorColorOnDark: "#FE344F",
549
- fontColorBase: globalTokens.black,
550
- fontColorBaseOnDark: globalTokens.white,
551
- fontFamilyBase: globalTokens.type_sans,
552
- fontSizeBase: globalTokens.type_scale_root,
649
+ errorColorOnDark: globalTokens.hal_red_l_60,
650
+ optionBackgroundColor: globalTokens.white,
651
+ optionBorderColor: globalTokens.black,
652
+ optionBorderThickness: "0px",
653
+ optionBorderStyle: "solid",
654
+ optionFontColor: globalTokens.black,
655
+ optionFontColorOnDark: globalTokens.white,
656
+ optionFontSize: globalTokens.type_scale_03,
657
+ optionFontStyle: globalTokens.type_normal,
658
+ optionFontWeight: globalTokens.type_regular,
659
+ optionPaddingBottom: "6px",
660
+ optionPaddingTop: "6px",
661
+ scrollBarThumbColor: globalTokens.darkGrey,
662
+ scrollBarTrackColor: globalTokens.lightGrey,
553
663
  hoverOptionColor: globalTokens.black,
664
+ hoverOptionBackgroundColor: globalTokens.lightWhite,
665
+ hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
666
+ selectedOptionBackgroundColor: globalTokens.lightGrey,
667
+ selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
668
+ labelFontColor: globalTokens.black,
669
+ labelFontColorOnDark: globalTokens.white,
554
670
  labelFontSize: globalTokens.type_scale_03,
555
- prefixIconColor: "",
556
- prefixIconColorOnDark: "",
557
- prefixLabelFontColor: "",
558
- prefixLabelFontColorOnDark: "",
671
+ labelFontStyle: globalTokens.type_normal,
672
+ labelFontWeight: globalTokens.type_regular,
673
+ valueFontColor: globalTokens.black,
674
+ valueFontColorOnDark: globalTokens.white,
675
+ valueFontSize: globalTokens.type_scale_03,
676
+ valueFontStyle: globalTokens.type_normal,
677
+ valueFontWeight: globalTokens.type_regular,
678
+ prefixIconColor: globalTokens.black,
679
+ prefixIconColorOnDark: globalTokens.white,
680
+ prefixLabelFontColor: globalTokens.black,
681
+ prefixLabelFontColorOnDark: globalTokens.white,
559
682
  prefixLabelFontSize: globalTokens.type_scale_03,
560
683
  prefixLabelFontStyle: globalTokens.type_normal,
561
684
  prefixLabelFontWeight: globalTokens.type_regular,
562
- scrollBarThumbColor: globalTokens.darkGrey,
563
- scrollBarTrackColor: globalTokens.lightGrey,
564
- selectedOptionBackgroundColor: globalTokens.lightWhite,
565
- suffixIconColor: "",
566
- suffixIconColorOnDark: "",
567
- suffixLabelFontColor: "",
568
- suffixLabelFontColorOnDark: "",
685
+ suffixIconColor: globalTokens.black,
686
+ suffixIconColorOnDark: globalTokens.white,
687
+ suffixLabelFontColor: globalTokens.black,
688
+ suffixLabelFontColorOnDark: globalTokens.white,
569
689
  suffixLabelFontSize: globalTokens.type_scale_03,
570
690
  suffixLabelFontStyle: globalTokens.type_normal,
571
691
  suffixLabelFontWeight: globalTokens.type_regular,
572
- underlineColor: "",
573
- underlineColorOnDark: "",
574
- underlineFocusColor: "",
575
- underlineFocusColorOnDark: "",
692
+ underlineColor: globalTokens.black,
693
+ underlineColorOnDark: globalTokens.white,
694
+ underlineFocusColor: globalTokens.black,
695
+ underlineFocusColorOnDark: globalTokens.white,
576
696
  underlineThickness: "1px"
577
697
  },
698
+ textInput: {
699
+ fontFamily: globalTokens.type_sans,
700
+ enabledBorderColor: globalTokens.hal_black,
701
+ enabledBorderColorOnDark: globalTokens.hal_white,
702
+ hoverBorderColor: globalTokens.hal_purple_l_65,
703
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
704
+ focusBorderColor: globalTokens.hal_blue_l_50,
705
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
706
+ disabledBorderColor: globalTokens.hal_grey_l_60,
707
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
708
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
709
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
710
+ errorBorderColor: globalTokens.hal_red_s_41,
711
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
712
+ hoverErrorBorderColor: "#fe0123",
713
+ hoverErrorBorderColorOnDark: "#fe677b",
714
+ errorMessageColor: globalTokens.hal_red_s_41,
715
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
716
+ errorIconColor: globalTokens.hal_red_s_41,
717
+ errorIconColorOnDark: globalTokens.hal_red_l_60,
718
+ labelFontColor: globalTokens.hal_black,
719
+ labelFontColorOnDark: globalTokens.hal_white,
720
+ labelFontSize: globalTokens.type_scale_02,
721
+ labelFontStyle: globalTokens.type_normal,
722
+ labelFontWeight: globalTokens.type_semibold,
723
+ labelLineHeight: globalTokens.type_leading_loose_01,
724
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
725
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
726
+ optionalLabelFontWeight: globalTokens.type_regular,
727
+ helperTextFontColor: globalTokens.hal_black,
728
+ helperTextFontColorOnDark: globalTokens.hal_white,
729
+ helperTextFontSize: globalTokens.type_scale_01,
730
+ helperTextFontStyle: globalTokens.type_normal,
731
+ helperTextFontWeight: globalTokens.type_regular,
732
+ helperTextLineHeight: globalTokens.type_leading_normal,
733
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
734
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
735
+ prefixColor: globalTokens.hal_grey_s_40,
736
+ prefixColorOnDark: globalTokens.hal_white,
737
+ suffixColor: globalTokens.hal_grey_s_40,
738
+ suffixColorOnDark: globalTokens.hal_white,
739
+ disabledPrefixColor: globalTokens.hal_grey_l_75,
740
+ disabledSuffixColor: globalTokens.hal_grey_l_75,
741
+ disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
742
+ disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
743
+ placeholderFontColor: "#808080",
744
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
745
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
746
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
747
+ valueFontColor: globalTokens.hal_black,
748
+ valueFontColorOnDark: globalTokens.hal_white,
749
+ valueFontSize: globalTokens.type_scale_03,
750
+ valueFontStyle: globalTokens.type_normal,
751
+ valueFontWeight: globalTokens.type_regular,
752
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
753
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
754
+ actionIconColor: globalTokens.hal_black,
755
+ actionIconColorOnDark: globalTokens.hal_white,
756
+ disabledActionIconColor: globalTokens.hal_grey_l_60,
757
+ disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
758
+ hoverActionIconColor: globalTokens.hal_black,
759
+ hoverActionIconColorOnDark: globalTokens.hal_white,
760
+ focusActionIconColor: globalTokens.hal_black,
761
+ focusActionIconColorOnDark: globalTokens.hal_white,
762
+ activeActionIconColor: globalTokens.hal_black,
763
+ activeActionIconColorOnDark: globalTokens.hal_black,
764
+ actionBackgroundColor: globalTokens.transparent,
765
+ actionBackgroundColorOnDark: globalTokens.transparent,
766
+ disabledActionBackgroundColor: globalTokens.transparent,
767
+ disabledActionBackgroundColorOnDark: globalTokens.transparent,
768
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
769
+ hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
770
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
771
+ focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
772
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
773
+ activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
774
+ listOptionFontColor: globalTokens.hal_black,
775
+ listOptionFontSize: globalTokens.type_scale_03,
776
+ listOptionFontStyle: globalTokens.type_normal,
777
+ listOptionFontWeight: globalTokens.type_regular,
778
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
779
+ errorMessageBorderColor: globalTokens.hal_red_s_41,
780
+ errorMessageBackgroundColor: globalTokens.hal_red_l_95,
781
+ hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
782
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
783
+ },
578
784
  link: {
579
- disabledColor: globalTokens.lightGrey,
580
- disabledUnderlineColor: globalTokens.lightGrey,
581
- fontColor: globalTokens.blue,
785
+ fontColor: globalTokens.hal_blue_s_35,
582
786
  fontFamily: globalTokens.inherit,
583
787
  fontSize: globalTokens.type_scale_root,
584
788
  fontStyle: globalTokens.type_normal,
585
789
  fontWeight: globalTokens.type_regular,
586
- hoverFontColor: globalTokens.darkBlue,
587
- hoverUnderlineColor: globalTokens.darkBlue,
588
790
  iconSize: "16px",
589
- iconGutter: "6px",
590
- underlineColor: globalTokens.blue,
591
- underlineSpacing: "1px",
791
+ iconSpacing: "4px",
792
+ underlineSpacing: "0px",
592
793
  underlineStyle: "solid",
593
794
  underlineThickness: "1px",
594
- visitedFontColor: globalTokens.violet,
595
- visitedUnderlineColor: globalTokens.violet,
596
- focusColor: globalTokens.blue
795
+ disabledColor: globalTokens.lightGrey,
796
+ hoverFontColor: globalTokens.hal_blue_s_35,
797
+ hoverUnderlineColor: globalTokens.hal_blue_s_35,
798
+ visitedFontColor: globalTokens.purple,
799
+ visitedUnderlineColor: globalTokens.purple,
800
+ activeFontColor: globalTokens.black,
801
+ activeUnderlineColor: globalTokens.black,
802
+ focusColor: globalTokens.hal_blue_l_50
597
803
  },
598
804
  paginator: {
599
805
  backgroundColor: globalTokens.darkWhite,
600
- fontColor: globalTokens.black,
806
+ fontColor: globalTokens.hal_black,
601
807
  fontFamily: globalTokens.type_sans,
602
808
  fontSize: globalTokens.type_scale_02,
603
809
  fontStyle: globalTokens.type_normal,
604
810
  fontWeight: globalTokens.type_regular,
811
+ fontTextTransform: "none",
605
812
  height: "64px",
606
813
  width: "100%",
607
814
  marginRight: "40px",
@@ -614,20 +821,29 @@ var componentTokens = {
614
821
  totalItemsContainerMarginLeft: "0px"
615
822
  },
616
823
  progressBar: {
617
- trackLineColor: globalTokens.purple,
824
+ trackLineColor: globalTokens.hal_purple_s_38,
825
+ trackLineColorOnDark: globalTokens.hal_purple_l_65,
618
826
  totalLineColor: globalTokens.softGrey,
619
827
  labelFontFamily: globalTokens.type_sans,
620
828
  labelFontSize: globalTokens.type_scale_01,
621
829
  labelFontStyle: globalTokens.type_normal,
622
830
  labelFontWeight: globalTokens.type_regular,
623
831
  labelFontColor: globalTokens.black,
832
+ labelFontColorOnDark: globalTokens.hal_white,
624
833
  labelFontTextTransform: globalTokens.type_uppercase,
625
834
  valueFontFamily: globalTokens.type_sans,
626
835
  valueFontSize: globalTokens.type_scale_01,
627
836
  valueFontStyle: globalTokens.type_normal,
628
837
  valueFontWeight: globalTokens.type_regular,
629
838
  valueFontColor: globalTokens.black,
839
+ valueFontColorOnDark: globalTokens.hal_white,
630
840
  valueFontTextTransform: globalTokens.type_uppercase,
841
+ helperTextFontColor: globalTokens.black,
842
+ helperTextFontColorOnDark: globalTokens.hal_white,
843
+ helperTextFontSize: globalTokens.type_scale_01,
844
+ helperTextFontStyle: globalTokens.type_normal,
845
+ helperTextFontWeight: globalTokens.type_regular,
846
+ helperTextFontFamily: globalTokens.type_sans,
631
847
  thickness: "9px",
632
848
  borderRadius: "5px",
633
849
  overlayColor: globalTokens.black,
@@ -642,7 +858,7 @@ var componentTokens = {
642
858
  disabledColorOnDark: "#575757",
643
859
  disabledFontColor: globalTokens.lighterBlack,
644
860
  disabledFontColorOnDark: "#575757",
645
- focusColor: globalTokens.blue,
861
+ focusColor: globalTokens.hal_blue_l_50,
646
862
  focusColorOnDark: "#1682FF",
647
863
  fontColor: globalTokens.inherit,
648
864
  fontColorOnDark: globalTokens.white,
@@ -652,76 +868,186 @@ var componentTokens = {
652
868
  fontWeight: globalTokens.type_regular
653
869
  },
654
870
  select: {
655
- checkboxOptionSpacing: "12px",
656
- color: globalTokens.black,
657
- colorOnDark: globalTokens.white,
658
- disabledColor: globalTokens.lighterBlack,
659
- disabledColorOnDark: "#575757",
660
- errorColor: globalTokens.red,
661
- errorColorOnDark: "#FE344F",
662
- focusColor: globalTokens.blue,
663
- focusColorOnDark: globalTokens.blue,
664
871
  fontFamily: globalTokens.type_sans,
665
- hoveredOptionBackgroundColor: globalTokens.lightWhite,
666
- hoveredOptionBackgroundColorOnDark: globalTokens.lightWhite,
667
- iconColor: "",
668
- iconOptionSpacing: "12px",
669
- iconSize: "20px",
872
+ enabledBorderColor: globalTokens.hal_black,
873
+ enabledBorderColorOnDark: globalTokens.hal_white,
874
+ hoverBorderColor: globalTokens.hal_purple_l_65,
875
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
876
+ focusBorderColor: globalTokens.hal_blue_l_50,
877
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
878
+ disabledBorderColor: globalTokens.hal_grey_l_60,
879
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
880
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
881
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
882
+ errorBorderColor: globalTokens.hal_red_s_41,
883
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
884
+ hoverErrorBorderColor: "#fe0123",
885
+ hoverErrorBorderColorOnDark: "#fe677b",
886
+ errorMessageColor: globalTokens.hal_red_s_41,
887
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
888
+ errorIconColor: globalTokens.hal_red_s_41,
889
+ errorIconColorOnDark: globalTokens.hal_red_l_60,
890
+ labelFontColor: globalTokens.hal_black,
891
+ labelFontColorOnDark: globalTokens.hal_white,
892
+ labelFontSize: globalTokens.type_scale_02,
893
+ labelFontStyle: globalTokens.type_normal,
894
+ labelFontWeight: globalTokens.type_semibold,
895
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
896
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
897
+ optionalLabelFontWeight: globalTokens.type_regular,
898
+ helperTextFontColor: globalTokens.hal_black,
899
+ helperTextFontColorOnDark: globalTokens.hal_white,
900
+ helperTextFontSize: globalTokens.type_scale_01,
901
+ helperTextFontStyle: globalTokens.type_normal,
902
+ helperTextFontWeight: globalTokens.type_regular,
903
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
904
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
905
+ placeholderFontColor: "#808080",
906
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
907
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
908
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
909
+ valueFontColor: globalTokens.hal_black,
910
+ valueFontColorOnDark: globalTokens.hal_white,
911
+ valueFontSize: globalTokens.type_scale_03,
912
+ valueFontStyle: globalTokens.type_normal,
913
+ valueFontWeight: globalTokens.type_regular,
914
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
915
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
916
+ actionIconColor: globalTokens.hal_black,
917
+ actionIconColorOnDark: globalTokens.hal_white,
918
+ disabledActionIconColor: globalTokens.hal_grey_l_60,
919
+ disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
920
+ hoverActionIconColor: globalTokens.hal_black,
921
+ hoverActionIconColorOnDark: globalTokens.hal_white,
922
+ focusActionIconColor: globalTokens.hal_black,
923
+ focusActionIconColorOnDark: globalTokens.hal_white,
924
+ activeActionIconColor: globalTokens.hal_black,
925
+ activeActionIconColorOnDark: globalTokens.hal_black,
926
+ actionBackgroundColor: globalTokens.transparent,
927
+ actionBackgroundColorOnDark: globalTokens.transparent,
928
+ disabledActionBackgroundColor: globalTokens.transparent,
929
+ disabledActionBackgroundColorOnDark: globalTokens.transparent,
930
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
931
+ hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
932
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
933
+ focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
934
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
935
+ activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
936
+ listOptionFontColor: globalTokens.hal_black,
937
+ listOptionFontSize: globalTokens.type_scale_02,
938
+ listOptionFontStyle: globalTokens.type_normal,
939
+ listOptionFontWeight: globalTokens.type_regular,
940
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
941
+ errorMessageBorderColor: globalTokens.hal_red_s_41,
942
+ errorMessageBackgroundColor: globalTokens.hal_red_l_95,
943
+ hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
944
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_90,
945
+ arrowColor: globalTokens.hal_black,
946
+ arrowColorOnDark: globalTokens.hal_white,
947
+ disabledArrowColor: globalTokens.hal_grey_l_60,
948
+ disabledArrowColorOnDark: globalTokens.hal_grey_l_60,
949
+ enabledListBorderColor: globalTokens.hal_grey_l_80,
950
+ listOptionBorderBottomColor: globalTokens.hal_grey_l_90,
951
+ selectedListOptionBackgroundColor: globalTokens.hal_grey_l_90,
952
+ selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
953
+ selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
954
+ enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
955
+ enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
956
+ hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
957
+ hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
958
+ activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
959
+ activeSelectionIndicatorActionIconColor: globalTokens.hal_black
960
+ },
961
+ V3Select: {
962
+ fontFamily: globalTokens.type_sans,
963
+ assistiveTextFontColor: globalTokens.hal_black,
964
+ assistiveTextFontColorOnDark: globalTokens.hal_white,
965
+ assistiveTextFontSize: globalTokens.type_scale_01,
966
+ assistiveTextFontStyle: globalTokens.type_normal,
967
+ assistiveTextFontWeight: globalTokens.type_regular,
968
+ labelFontColor: globalTokens.hal_black,
969
+ labelFontColorOnDark: globalTokens.hal_white,
670
970
  labelFontSize: globalTokens.type_scale_03,
671
971
  labelFontStyle: globalTokens.type_normal,
672
972
  labelFontWeight: globalTokens.type_regular,
973
+ disabledColor: globalTokens.lighterBlack,
974
+ disabledColorOnDark: "#575757",
975
+ errorColor: globalTokens.red,
976
+ errorColorOnDark: globalTokens.hal_red_l_60,
977
+ optionBackgroundColor: globalTokens.hal_white,
978
+ optionBorderColor: globalTokens.hal_black,
979
+ optionBorderThickness: "0px",
980
+ optionBorderStyle: "solid",
981
+ optionFontColor: globalTokens.hal_black,
982
+ optionFontColorOnDark: globalTokens.hal_white,
983
+ optionFontSize: globalTokens.type_scale_root,
984
+ optionFontStyle: globalTokens.type_normal,
985
+ optionFontWeight: globalTokens.type_regular,
673
986
  optionPaddingBottom: "6px",
674
987
  optionPaddingTop: "6px",
675
- optionPaddingLeft: "16px",
676
- optionPaddingRight: "16px",
677
- optionsBackgroundColor: globalTokens.white,
678
- optionsBorderColor: "none",
679
- optionsBorderThickness: "0px",
680
- optionsBorderStyle: "solid",
681
- optionsFontColor: "",
682
- optionsFontSize: globalTokens.type_scale_root,
683
- optionsFontStyle: globalTokens.type_normal,
684
- optionsFontWeight: globalTokens.type_regular,
685
- scrollBarThumbColor: globalTokens.darkGrey,
988
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
686
989
  scrollBarTrackColor: globalTokens.lightGrey,
990
+ optionIconColor: globalTokens.hal_black,
991
+ optionIconColorOnDark: globalTokens.hal_white,
992
+ optionIconSpacing: "12px",
993
+ optionIconSize: "20px",
994
+ optionCheckboxSpacing: "12px",
995
+ hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
996
+ hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
997
+ activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
998
+ activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
687
999
  selectedOptionBackgroundColor: globalTokens.lightGrey,
688
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey
1000
+ selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
1001
+ underlineColor: globalTokens.hal_black,
1002
+ underlineColorOnDark: globalTokens.hal_white,
1003
+ underlineFocusColor: globalTokens.hal_black,
1004
+ underlineFocusColorOnDark: globalTokens.hal_white,
1005
+ underlineThickness: "1px",
1006
+ valueFontColor: globalTokens.hal_black,
1007
+ valueFontColorOnDark: globalTokens.hal_white,
1008
+ valueFontSize: globalTokens.type_scale_03,
1009
+ valueFontStyle: globalTokens.type_normal,
1010
+ valueFontWeight: globalTokens.type_regular,
1011
+ valueIconColor: globalTokens.hal_black,
1012
+ valueIconColorOnDark: globalTokens.hal_white,
1013
+ valueIconSize: "20px",
1014
+ valueIconSpacing: "12px",
1015
+ arrowColor: globalTokens.hal_black,
1016
+ arrowColorOnDark: globalTokens.hal_white,
1017
+ focusColor: globalTokens.hal_blue_l_50,
1018
+ focusColorOnDark: globalTokens.hal_blue_l_50
689
1019
  },
690
1020
  sidenav: {
691
- backgroundColor: globalTokens.lighterGrey,
692
- arrowContainerColor: globalTokens.lightGrey,
693
- arrowColor: globalTokens.black,
694
- customContentFontFamily: globalTokens.type_sans,
695
- customContentFontSize: globalTokens.type_scale_root,
696
- customContentFontStyle: globalTokens.type_normal,
697
- customContentFontWeight: globalTokens.type_regular,
698
- customContentFontColor: globalTokens.black,
1021
+ backgroundColor: globalTokens.hal_grey_l_95,
1022
+ arrowContainerColor: globalTokens.hal_grey_l_90,
1023
+ arrowColor: globalTokens.hal_black,
699
1024
  titleFontFamily: globalTokens.type_sans,
700
1025
  titleFontSize: globalTokens.type_scale_05,
701
1026
  titleFontStyle: globalTokens.type_normal,
702
1027
  titleFontWeight: globalTokens.type_regular,
703
- titleFontColor: "#000000de",
1028
+ titleFontColor: globalTokens.hal_black,
704
1029
  titleFontTextTransform: "none",
705
1030
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
706
1031
  subtitleFontFamily: globalTokens.type_sans,
707
- subtitleFontSize: globalTokens.type_scale_01,
1032
+ subtitleFontSize: globalTokens.type_scale_03,
708
1033
  subtitleFontStyle: globalTokens.type_normal,
709
1034
  subtitleFontWeight: globalTokens.type_regular,
710
- subtitleFontColor: "#00000099",
1035
+ subtitleFontColor: globalTokens.color_grey_800,
711
1036
  subtitleFontTextTransform: globalTokens.type_uppercase,
712
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_03,
1037
+ subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
713
1038
  linkFontFamily: globalTokens.type_sans,
714
1039
  linkFontSize: globalTokens.type_scale_02,
715
1040
  linkFontStyle: globalTokens.type_normal,
716
1041
  linkFontWeight: globalTokens.type_regular,
717
- linkFontColor: "#00000099",
1042
+ linkFontColor: globalTokens.color_grey_800,
718
1043
  linkFontTextTransform: "none",
719
1044
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
720
1045
  linkTextDecoration: globalTokens.type_no_line,
721
- linkMarginTop: "6px",
722
- linkMarginRight: "18px",
723
- linkMarginBottom: "6px",
724
- linkMarginLeft: "18px",
1046
+ linkMarginTop: "4px",
1047
+ linkMarginBottom: "4px",
1048
+ linkMarginRight: "16px",
1049
+ linkMarginLeft: "16px",
1050
+ linkFocusColor: globalTokens.hal_blue_l_50,
725
1051
  scrollBarThumbColor: "#66666626",
726
1052
  scrollBarTrackColor: globalTokens.transparent
727
1053
  },
@@ -730,89 +1056,110 @@ var componentTokens = {
730
1056
  fontSize: globalTokens.type_scale_03,
731
1057
  fontStyle: globalTokens.type_normal,
732
1058
  fontWeight: globalTokens.type_regular,
733
- fontColor: globalTokens.black,
734
- fontColorOnDark: globalTokens.white,
1059
+ labelFontFamily: globalTokens.type_sans,
1060
+ labelFontSize: globalTokens.type_scale_02,
1061
+ labelFontStyle: globalTokens.type_normal,
1062
+ labelFontWeight: globalTokens.type_semibold,
1063
+ labelLineHeight: globalTokens.type_leading_loose_01,
1064
+ helperTextFontFamily: globalTokens.type_sans,
1065
+ helperTextFontSize: globalTokens.type_scale_01,
1066
+ helperTextFontStyle: globalTokens.type_normal,
1067
+ helperTextFontWeight: globalTokens.type_regular,
1068
+ helperTextLineHeight: globalTokens.type_leading_normal,
1069
+ fontColor: globalTokens.hal_black,
1070
+ fontColorOnDark: globalTokens.hal_white,
1071
+ labelFontColor: globalTokens.hal_black,
1072
+ helperTextFontColor: globalTokens.hal_black,
1073
+ disabledFontColor: globalTokens.hal_grey_l_60,
735
1074
  fontLetterSpacing: globalTokens.type_spacing_normal,
736
- thumbHeight: "20px",
737
- thumbWidth: "20px",
738
- thumbTopPosition: "32.5%",
739
- thumbBackgroundColor: globalTokens.mediumBlue,
740
- thumbBackgroundColorOnDark: globalTokens.white,
741
- draggedThumbScale: "1",
742
- draggedThumbBackgroundColor: globalTokens.mediumBlue,
743
- draggedThumbBackgroundColorOnDark: "#0095FF",
744
- dotsHeight: "6px",
745
- dotsWidth: "6px",
746
- dotsTopPosition: "42%",
747
- dotsBackgroundColor: globalTokens.mediumBlue,
748
- dotsBackgroundColorOnDark: globalTokens.white,
1075
+ thumbHeight: "12px",
1076
+ thumbWidth: "12px",
1077
+ hoverThumbHeight: "14px",
1078
+ hoverThumbWidth: "14px",
1079
+ thumbVerticalPosition: "12px",
1080
+ hoverThumbVerticalPosition: "11px",
1081
+ thumbBackgroundColor: globalTokens.hal_blue_s_35,
1082
+ thumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1083
+ hoverThumbScale: "1.166666",
1084
+ hoverThumbBackgroundColor: globalTokens.hal_blue_d_20,
1085
+ hoverThumbBackgroundColorOnDark: globalTokens.hal_blue_d_20,
1086
+ activeThumbScale: "1.166666",
1087
+ activeThumbBackgroundColor: globalTokens.hal_blue_d_20,
1088
+ activeThumbBackgroundColorOnDark: globalTokens.hal_blue_d_20,
1089
+ focusThumbBackgroundColor: globalTokens.hal_blue_s_35,
1090
+ focusThumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1091
+ tickHeight: "4px",
1092
+ tickWidth: "4px",
1093
+ tickVerticalPosition: "11px",
1094
+ tickBackgroundColor: globalTokens.hal_blue_s_35,
1095
+ tickBackgroundColorOnDark: globalTokens.hal_blue_l_50,
749
1096
  trackLineThickness: "2px",
750
- trackLinePosition: "50%",
751
- trackLineColor: globalTokens.mediumBlue,
752
- trackLineOnDark: globalTokens.white,
753
- totalLineThickness: "",
754
- totalLineTopPosition: "50%",
755
- totalLineColor: globalTokens.softBlue,
756
- totalLineOnDark: globalTokens.white,
757
- disabledThumbTopPosition: "24%",
758
- disabledThumbBackgroundColor: globalTokens.softBlue,
1097
+ trackLineVerticalPosition: "50%",
1098
+ trackLineColor: globalTokens.hal_blue_s_35,
1099
+ trackLineColorOnDark: globalTokens.hal_blue_l_50,
1100
+ totalLineThickness: "2px",
1101
+ totalLineVerticalPosition: "50%",
1102
+ totalLineColor: globalTokens.hal_grey_l_90,
1103
+ totalLineColorOnDark: globalTokens.hal_grey_l_75,
1104
+ disabledThumbVerticalPosition: "10px",
1105
+ disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
759
1106
  disabledThumbBackgroundColorOnDark: "#575757",
760
- disabledDotsTopPosition: "",
761
- disabledDotsBackgroundColor: globalTokens.softBlue,
762
- disabledDotsBackgroundColorOnDark: "#575757",
763
- disabledTrackLineColor: globalTokens.softBlue,
764
- disabledTrackLineOnDark: "#575757",
765
- disabledTotalLineColor: globalTokens.softBlue,
766
- disabledTotalLineColorOnDark: "#575757",
767
- focusColor: globalTokens.blue,
768
- focusColorOnDark: "#1682FF"
1107
+ disabledTickVerticalPosition: "11px",
1108
+ disabledTickBackgroundColor: globalTokens.hal_grey_l_60,
1109
+ disabledTickBackgroundColorOnDark: globalTokens.hal_grey_l_60,
1110
+ disabledTrackLineColor: globalTokens.hal_grey_l_60,
1111
+ disabledTrackLineColorOnDark: globalTokens.hal_grey_l_60,
1112
+ disabledTotalLineColor: globalTokens.hal_grey_l_95,
1113
+ disabledTotalLineColorOnDark: globalTokens.hal_grey_s_40,
1114
+ focusColor: globalTokens.hal_blue_l_50,
1115
+ focusColorOnDark: globalTokens.hal_blue_l_50,
1116
+ floorLabelMarginRight: globalTokens.type_scale_03,
1117
+ ceilLabelMarginLeft: globalTokens.type_scale_03,
1118
+ inputMarginLeft: globalTokens.type_scale_06
769
1119
  },
770
1120
  spinner: {
771
- trackCircleColor: globalTokens.purple,
1121
+ trackCircleColor: "#5f249f",
1122
+ trackCircleColorOnDark: "#a46ede",
772
1123
  totalCircleColor: globalTokens.white,
773
1124
  labelFontFamily: globalTokens.type_sans,
774
- labelFontSize: globalTokens.type_scale_01,
1125
+ labelFontSize: globalTokens.type_scale_02,
775
1126
  labelFontStyle: globalTokens.type_normal,
776
1127
  labelFontWeight: globalTokens.type_regular,
777
- labelFontColor: globalTokens.inherit,
778
- labelFontTextTransform: globalTokens.type_uppercase,
779
- labelLetterSpacing: globalTokens.type_spacing_normal,
1128
+ labelFontColor: globalTokens.black,
1129
+ labelFontColorOnDark: globalTokens.white,
780
1130
  labelTextAlign: "center",
781
1131
  progressValueFontFamily: globalTokens.type_sans,
782
- progressValueFontSize: globalTokens.type_scale_01,
1132
+ progressValueFontSize: globalTokens.type_scale_02,
783
1133
  progressValueFontStyle: globalTokens.type_normal,
784
- progressValueFontWeight: globalTokens.type_regular,
1134
+ progressValueFontWeight: globalTokens.type_bold,
785
1135
  progressValueFontColor: globalTokens.inherit,
786
- progressValueLetterSpacing: globalTokens.type_spacing_normal,
1136
+ progressValueFontColorOnDark: globalTokens.white,
787
1137
  progressValueTextAlign: "center",
788
1138
  overlayBackgroundColor: globalTokens.black,
789
1139
  overlayOpacity: "0.8",
790
1140
  overlayLabelFontFamily: globalTokens.type_sans,
791
- overlayLabelFontSize: globalTokens.type_scale_01,
1141
+ overlayLabelFontSize: globalTokens.type_scale_02,
792
1142
  overlayLabelFontStyle: globalTokens.type_normal,
793
1143
  overlayLabelFontWeight: globalTokens.type_regular,
794
1144
  overlayLabelFontColor: globalTokens.white,
795
- overlayLabelFontTextTransform: globalTokens.type_uppercase,
796
- overlayLabelLetterSpacing: globalTokens.type_spacing_normal,
797
1145
  overlayLabelTextAlign: "center",
798
1146
  overlayProgressValueFontFamily: globalTokens.type_sans,
799
- overlayProgressValueFontSize: globalTokens.type_scale_01,
1147
+ overlayProgressValueFontSize: globalTokens.type_scale_02,
800
1148
  overlayProgressValueFontStyle: globalTokens.type_normal,
801
- overlayProgressValueFontWeight: globalTokens.type_regular,
1149
+ overlayProgressValueFontWeight: globalTokens.type_bold,
802
1150
  overlayProgressValueFontColor: globalTokens.white,
803
- overlayProgressValueLetterSpacing: globalTokens.type_spacing_normal,
804
1151
  overlayProgressValueTextAlign: "center"
805
1152
  },
806
1153
  "switch": {
807
- checkedTrackBackgroundColor: globalTokens.purple,
808
- checkedTrackBackgroundColorOnDark: globalTokens.purple,
1154
+ checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1155
+ checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
809
1156
  checkedThumbBackgroundColor: globalTokens.white,
810
1157
  checkedThumbBackgroundColorOnDark: globalTokens.white,
811
1158
  uncheckedTrackBackgroundColor: globalTokens.lightGrey,
812
1159
  uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
813
1160
  uncheckedThumbBackgroundColor: globalTokens.white,
814
1161
  uncheckedThumbBackgroundColorOnDark: globalTokens.white,
815
- disabledCheckedTrackBackgroundColor: globalTokens.lighterPurple,
1162
+ disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
816
1163
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
817
1164
  disabledCheckedThumbBackgroundColor: globalTokens.white,
818
1165
  disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
@@ -829,23 +1176,31 @@ var componentTokens = {
829
1176
  labelFontWeight: globalTokens.type_regular,
830
1177
  labelFontColor: globalTokens.black,
831
1178
  labelFontColorOnDark: globalTokens.white,
832
- labelMarginRight: "0px",
833
1179
  thumbFocusColor: globalTokens.blue,
834
- thumbFocusColorOnDark: "#1489FB",
1180
+ thumbFocusColorOnDark: "#1682FF",
835
1181
  thumbHeight: "24px",
836
1182
  thumbWidth: "24px",
1183
+ thumbShift: "40%",
837
1184
  trackHeight: "12px",
838
1185
  trackWidth: "60px",
839
- thumbTranslateX: "40%"
1186
+ spaceBetweenLabelSwitch: "0px"
840
1187
  },
841
1188
  tag: {
1189
+ fontFamily: globalTokens.type_sans,
1190
+ fontColor: globalTokens.hal_black,
1191
+ fontSize: globalTokens.type_scale_02,
842
1192
  fontStyle: globalTokens.type_normal,
843
- fontTextTransform: globalTokens.type_uppercase,
844
- height: "43px",
845
- iconColor: globalTokens.white,
846
- iconSectionWidth: "48px",
1193
+ fontWeight: globalTokens.type_regular,
1194
+ labelPaddingTop: "0px",
1195
+ labelPaddingBottom: "0px",
1196
+ labelPaddingLeft: "16px",
1197
+ labelPaddingRight: "16px",
1198
+ height: "40px",
1199
+ iconColor: globalTokens.hal_white,
1200
+ iconSectionWidth: "40px",
847
1201
  iconHeight: "24px",
848
- iconWidth: "auto"
1202
+ iconWidth: "auto",
1203
+ focusColor: globalTokens.hal_blue_l_50
849
1204
  },
850
1205
  table: {
851
1206
  rowSeparatorThickness: "1px",
@@ -853,7 +1208,7 @@ var componentTokens = {
853
1208
  rowSeparatorColor: globalTokens.lightGrey,
854
1209
  dataBackgroundColor: globalTokens.white,
855
1210
  dataFontFamily: globalTokens.type_sans,
856
- dataFontSize: globalTokens.type_scale_root,
1211
+ dataFontSize: globalTokens.type_scale_02,
857
1212
  dataFontStyle: globalTokens.type_normal,
858
1213
  dataFontWeight: globalTokens.type_regular,
859
1214
  dataFontColor: globalTokens.black,
@@ -864,7 +1219,7 @@ var componentTokens = {
864
1219
  dataPaddingLeft: "40px",
865
1220
  dataTextAlign: "left",
866
1221
  dataTextLineHeight: "normal",
867
- headerBackgroundColor: globalTokens.purple,
1222
+ headerBackgroundColor: globalTokens.hal_purple_s_38,
868
1223
  headerBorderRadius: "4px",
869
1224
  headerFontFamily: globalTokens.type_sans,
870
1225
  headerFontSize: globalTokens.type_scale_02,
@@ -889,27 +1244,23 @@ var componentTokens = {
889
1244
  fontWeight: globalTokens.type_semibold,
890
1245
  fontTextTransform: "none",
891
1246
  selectedBackgroundColor: globalTokens.white,
892
- selectedFontColor: globalTokens.purple,
893
- selectedIconColor: globalTokens.purple,
894
- selectedUnderlineColor: globalTokens.purple,
895
- selectedUnderlineThickness: "",
1247
+ selectedFontColor: "#5f249f",
1248
+ selectedIconColor: "#5f249f",
1249
+ selectedUnderlineColor: "#5f249f",
1250
+ selectedUnderlineThickness: "2px",
896
1251
  unselectedBackgroundColor: globalTokens.white,
897
1252
  unselectedFontColor: globalTokens.darkGrey,
898
1253
  unselectedIconColor: globalTokens.darkGrey,
899
- disabledFontColor: globalTokens.mediumGrey,
900
- disabledIconColor: globalTokens.mediumGrey,
1254
+ disabledFontColor: "#999999",
1255
+ disabledIconColor: "#999999",
901
1256
  disabledFontStyle: globalTokens.type_normal,
902
- hoverBackgroundColor: globalTokens.lightPurple,
903
- pressedBackgroundColor: globalTokens.mediumPurple,
1257
+ hoverBackgroundColor: "#f2eafa",
1258
+ pressedBackgroundColor: "#e5d5f6",
904
1259
  pressedFontWeight: globalTokens.type_semibold,
905
1260
  dividerColor: globalTokens.mediumGrey,
906
1261
  dividerThickness: "1px",
907
- focusOutline: globalTokens.purple,
1262
+ focusOutline: "#5f249f",
908
1263
  scrollButtonsWidth: "48px",
909
- minWidth: "90px",
910
- maxWidth: "360px",
911
- minHeight: "48px",
912
- minHeightWithLabelAndIcon: "72px",
913
1264
  badgeBackgroundColor: globalTokens.darkRed,
914
1265
  badgeFontFamily: globalTokens.type_sans,
915
1266
  badgeFontSize: "10px",
@@ -919,71 +1270,140 @@ var componentTokens = {
919
1270
  badgeLetterSpacing: globalTokens.type_spacing_wide_02,
920
1271
  badgeWidth: "16px",
921
1272
  badgeHeight: "16px",
1273
+ badgeRadius: "10px",
922
1274
  badgeWidthWithNotificationNumber: "23px",
923
- badgeHeightWithNotificationNumber: "17px"
1275
+ badgeHeightWithNotificationNumber: "17px",
1276
+ badgeRadiusWithNotificationNumber: "10px"
924
1277
  },
925
1278
  textarea: {
926
- disabledFontColor: globalTokens.lighterBlack,
927
- disabledFontColorOnDark: "#575757",
928
- errorColor: globalTokens.red,
929
- errorColorOnDark: "#FE344F",
930
- assistiveTextFontFamily: globalTokens.type_sans,
1279
+ fontFamily: globalTokens.type_sans,
1280
+ enabledBorderColor: globalTokens.hal_black,
1281
+ enabledBorderColorOnDark: globalTokens.hal_white,
1282
+ hoverBorderColor: globalTokens.hal_purple_l_65,
1283
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
1284
+ focusBorderColor: globalTokens.hal_blue_l_50,
1285
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
1286
+ disabledBorderColor: globalTokens.hal_grey_l_60,
1287
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
1288
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
1289
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1290
+ errorBorderColor: globalTokens.hal_red_s_41,
1291
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
1292
+ hoverErrorBorderColor: "#fe0123",
1293
+ hoverErrorBorderColorOnDark: "#fe677b",
1294
+ errorMessageColor: globalTokens.hal_red_s_41,
1295
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
1296
+ labelFontColor: globalTokens.hal_black,
1297
+ labelFontColorOnDark: globalTokens.hal_white,
1298
+ labelFontSize: globalTokens.type_scale_02,
1299
+ labelFontStyle: globalTokens.type_normal,
1300
+ labelFontWeight: globalTokens.type_semibold,
1301
+ labelLineHeight: globalTokens.type_leading_loose_01,
1302
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1303
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1304
+ optionalLabelFontWeight: globalTokens.type_regular,
1305
+ helperTextFontColor: globalTokens.hal_black,
1306
+ helperTextFontColorOnDark: globalTokens.hal_white,
1307
+ helperTextFontSize: globalTokens.type_scale_01,
1308
+ helperTextFontStyle: globalTokens.type_normal,
1309
+ helperTextFontWeight: globalTokens.type_regular,
1310
+ helperTextLineHeight: globalTokens.type_leading_normal,
1311
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1312
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1313
+ placeholderFontColor: "#808080",
1314
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1315
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1316
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
1317
+ valueFontColor: globalTokens.hal_black,
1318
+ valueFontColorOnDark: globalTokens.hal_white,
1319
+ valueFontSize: globalTokens.type_scale_03,
1320
+ valueFontStyle: globalTokens.type_normal,
1321
+ valueFontWeight: globalTokens.type_regular,
1322
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
1323
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1324
+ },
1325
+ V3Textarea: {
1326
+ fontFamily: globalTokens.type_sans,
931
1327
  assistiveTextFontSize: globalTokens.type_scale_01,
932
1328
  assistiveTextFontStyle: globalTokens.type_normal,
933
1329
  assistiveTextFontWeight: globalTokens.type_regular,
934
1330
  assistiveTextFontColor: globalTokens.black,
935
1331
  assistiveTextFontColorOnDark: globalTokens.white,
936
- assistiveTextLetterSpacing: "",
937
- customContentFontFamily: globalTokens.type_sans,
938
- customContentFontSize: globalTokens.type_scale_03,
939
- customContentFontStyle: globalTokens.type_normal,
940
- customContentFontWeight: globalTokens.type_regular,
941
- customContentFontColor: globalTokens.black,
942
- customContentFontColorOnDark: globalTokens.white,
943
- customContentLetterSpacing: globalTokens.type_spacing_normal,
944
- customContentLineHeight: "1.1875em",
945
- labelFontFamily: globalTokens.type_sans,
1332
+ assistiveTextLetterSpacing: "0.03333em",
1333
+ disabledColor: globalTokens.lighterBlack,
1334
+ disabledColorOnDark: "#575757",
1335
+ errorColor: globalTokens.red,
1336
+ errorColorOnDark: globalTokens.hal_red_l_60,
1337
+ scrollBarThumbColor: globalTokens.darkGrey,
1338
+ scrollBarThumbColorOnDark: globalTokens.white,
1339
+ scrollBarTrackColor: globalTokens.lightGrey,
1340
+ scrollBarTrackColorOnDark: "#999999",
946
1341
  labelFontSize: globalTokens.type_scale_03,
947
1342
  labelFontStyle: globalTokens.type_normal,
948
1343
  labelFontWeight: globalTokens.type_regular,
949
1344
  labelFontColor: globalTokens.black,
950
1345
  labelFontColorOnDark: globalTokens.white,
951
- labelLetterSpacing: "",
952
- scrollBarThumbColor: globalTokens.darkGrey,
953
- scrollBarThumbColorOnDark: globalTokens.white,
954
- scrollBarTrackColor: globalTokens.lightGrey,
955
- scrollBarTrackColorOnDark: "#999999"
1346
+ labelLetterSpacing: "0.00938em",
1347
+ valueFontSize: globalTokens.type_scale_03,
1348
+ valueFontStyle: globalTokens.type_normal,
1349
+ valueFontWeight: globalTokens.type_regular,
1350
+ valueFontColor: globalTokens.black,
1351
+ valueFontColorOnDark: globalTokens.white,
1352
+ valueLetterSpacing: globalTokens.type_spacing_normal,
1353
+ valueLineHeight: "1.1875em",
1354
+ underlineColor: globalTokens.black,
1355
+ underlineColorOnDark: globalTokens.white,
1356
+ underlineFocusColor: globalTokens.black,
1357
+ underlineFocusColorOnDark: globalTokens.white,
1358
+ underlineThickness: "1px"
956
1359
  },
957
1360
  toggleGroup: {
958
- fontFamily: globalTokens.type_sans,
959
- fontSize: globalTokens.type_scale_02,
960
- fontStyle: globalTokens.type_normal,
961
- fontWeight: globalTokens.type_regular,
962
- fontTextTransform: globalTokens.type_uppercase,
963
- fontLetterSpacing: globalTokens.type_spacing_wide_02,
964
- focusColor: globalTokens.blue,
965
- selectedBackgroundColor: globalTokens.purple,
966
- selectedBackgroundHoverColor: globalTokens.black,
967
- selectedFontColor: globalTokens.white,
968
- selectedHoverFontColor: globalTokens.white,
969
- unselectedBackgroundColor: globalTokens.lightGrey,
970
- unselectedBackgroundHoverColor: globalTokens.darkWhite,
971
- unselectedFontColor: globalTokens.black,
972
- unselectedHoverFontColor: globalTokens.black,
973
- disabledSelectedBackgroundColor: globalTokens.lighterPurple,
974
- disabledSelectedFontColor: globalTokens.white,
975
- disabledUnselectedBackgroundColor: globalTokens.lightWhite,
976
- disabledUnselectedFontColor: globalTokens.lighterBlack,
977
- iconHeight: "20px",
978
- iconWidth: "20px",
979
- iconPaddingTop: "10px",
980
- iconPaddingBottom: "10px",
981
- iconPaddingRight: "12px",
982
- iconPaddingLeft: "12px",
983
- labelPaddingTop: "12px",
984
- labelPaddingBottom: "12px",
985
- labelPaddingLeft: "30px",
986
- labelPaddingRight: "30px"
1361
+ containerBackgroundColor: globalTokens.color_grey_50,
1362
+ containerBorderColor: globalTokens.hal_grey_l_60,
1363
+ labelFontColor: globalTokens.hal_black,
1364
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1365
+ helperTextFontColor: globalTokens.hal_black,
1366
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
1367
+ unselectedBackgroundColor: globalTokens.hal_grey_l_90,
1368
+ unselectedHoverBackgroundColor: globalTokens.hal_grey_l_80,
1369
+ unselectedActiveBackgroundColor: globalTokens.hal_purple_s_38,
1370
+ unselectedDisabledBackgroundColor: globalTokens.hal_grey_l_95,
1371
+ unselectedFontColor: globalTokens.hal_black,
1372
+ unselectedDisabledFontColor: globalTokens.hal_grey_l_60,
1373
+ selectedBackgroundColor: globalTokens.hal_purple_s_38,
1374
+ selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1375
+ selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1376
+ selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1377
+ selectedFontColor: globalTokens.hal_white,
1378
+ selectedDisabledFontColor: globalTokens.color_purple_300,
1379
+ focusColor: globalTokens.hal_blue_l_50,
1380
+ labelFontFamily: globalTokens.type_sans,
1381
+ labelFontSize: globalTokens.type_scale_02,
1382
+ labelFontStyle: globalTokens.type_normal,
1383
+ labelFontWeight: globalTokens.type_semibold,
1384
+ labelLineHeight: globalTokens.type_leading_loose_01,
1385
+ helperTextFontFamily: globalTokens.type_sans,
1386
+ helperTextFontSize: globalTokens.type_scale_01,
1387
+ helperTextFontStyle: globalTokens.type_normal,
1388
+ helperTextFontWeight: globalTokens.type_regular,
1389
+ helperTextLineHeight: globalTokens.type_leading_normal,
1390
+ optionLabelFontFamily: globalTokens.type_sans,
1391
+ optionLabelFontSize: globalTokens.type_scale_03,
1392
+ optionLabelFontStyle: globalTokens.type_normal,
1393
+ optionLabelFontWeight: globalTokens.type_regular,
1394
+ iconPaddingRight: globalTokens.spacing_03,
1395
+ iconPaddingLeft: globalTokens.spacing_03,
1396
+ labelPaddingLeft: globalTokens.spacing_06,
1397
+ labelPaddingRight: globalTokens.spacing_06,
1398
+ iconMarginRight: globalTokens.spacing_03,
1399
+ containerMarginTop: globalTokens.spacing_02,
1400
+ optionBorderThickness: globalTokens.border_width_0,
1401
+ optionBorderStyle: globalTokens.border_none,
1402
+ optionBorderRadius: globalTokens.border_radius_medium,
1403
+ containerBorderThickness: globalTokens.border_width_1,
1404
+ containerBorderStyle: globalTokens.border_solid,
1405
+ containerBorderRadius: globalTokens.border_radius_large,
1406
+ optionFocusBorderThickness: globalTokens.border_width_2
987
1407
  },
988
1408
  upload: {
989
1409
  fontFamily: globalTokens.type_sans,
@@ -992,10 +1412,9 @@ var componentTokens = {
992
1412
  scrollBarTrackColor: globalTokens.lightGrey,
993
1413
  errorColor: globalTokens.red,
994
1414
  backgroundColor: globalTokens.white,
995
- draggingAreaBackgroundColor: globalTokens.lightWhite,
1415
+ draggingStateBackgroundColor: globalTokens.lightWhite,
996
1416
  dragAndDropIconColor: globalTokens.black,
997
- dragAndDropIconHeight: "43.5px",
998
- dragAndDropIconWidth: "43.5px",
1417
+ dragAndDropIconSize: "43.5px",
999
1418
  dragAndDropTitleFontSize: globalTokens.type_scale_04,
1000
1419
  dragAndDropTitleFontStyle: globalTokens.type_normal,
1001
1420
  dragAndDropTitleFontWeight: globalTokens.type_bold,
@@ -1003,29 +1422,25 @@ var componentTokens = {
1003
1422
  dragAndDropTitleFontColor: globalTokens.black,
1004
1423
  dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1005
1424
  dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1006
- dragAndDropDescriptionFontWeight: globalTokens.type_normal,
1007
- dragAndDropTextDescriptionFontTextTransform: "none",
1008
- dragAndDropTextDescriptionFontColor: globalTokens.darkGrey,
1425
+ dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1426
+ dragAndDropDescriptionFontTextTransform: "none",
1427
+ dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1009
1428
  dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1010
- dragAndDropDraggingStateIconHeight: "74.5px",
1011
- dragAndDropDraggingStateIconWidth: "74.5px",
1429
+ dragAndDropDraggingStateIconSize: "74.5px",
1012
1430
  dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1013
1431
  dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1014
- dragAndDropDraggingStateFontWeight: globalTokens.type_normal,
1015
- dragAndDropTextDraggingStateFontTextTransform: "none",
1016
- dragAndDropTextDraggingStateFontColor: globalTokens.darkGrey,
1432
+ dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1433
+ dragAndDropDraggingStateFontTextTransform: "none",
1434
+ dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1017
1435
  dragAndDropAreaIconColor: globalTokens.darkGrey,
1018
- dragAndDropAreaIconHeight: "24px",
1019
- dragAndDropAreaIconWidth: "24px",
1436
+ dragAndDropAreaIconSize: "24px",
1020
1437
  dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1021
1438
  dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1022
1439
  dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1023
1440
  dragAndDropAreaTextFontTextTransform: "none",
1024
1441
  dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1025
1442
  fileDeleteIconColor: globalTokens.black,
1026
- fileDeleteIconHeight: "30px",
1027
- fileDeleteIconWidth: "30px",
1028
- fileHoverColor: globalTokens.darkWhite,
1443
+ fileDeleteIconSize: "30px",
1029
1444
  fileUnderlineColor: globalTokens.lightGrey,
1030
1445
  fileUnderlineThickness: "1px",
1031
1446
  fileNameFontSize: globalTokens.type_scale_03,
@@ -1038,20 +1453,20 @@ var componentTokens = {
1038
1453
  fileTypeFontWeight: globalTokens.type_regular,
1039
1454
  fileTypeFontTextTransform: globalTokens.type_uppercase,
1040
1455
  fileTypeFontColor: globalTokens.darkGrey,
1041
- fileUploadedIconColor: globalTokens.lightGrey,
1042
- fileUploadedIconHeight: "24px",
1043
- fileUploadedIconWidth: "24px",
1044
- filesUploadedTitleFontSize: globalTokens.type_scale_04,
1045
- filesUploadedTitleFontStyle: globalTokens.type_normal,
1046
- filesUploadedTitleFontWeight: globalTokens.type_regular,
1047
- filesUploadedTitleFontTextTransform: "none",
1048
- filesUploadedTitleFontColor: globalTokens.black,
1049
- filesUploadedSubtitleFontSize: globalTokens.type_scale_01,
1050
- filesUploadedSubtitleFontStyle: globalTokens.type_normal,
1051
- filesUploadedSubtitleFontWeight: globalTokens.type_regular,
1052
- filesUploadedSubtitleFontTextTransform: "none",
1053
- filesUploadedSubtitleFontColor: globalTokens.darkGrey,
1054
- filesUploadedNumberFontWeight: globalTokens.type_bold
1456
+ hoverFileColor: globalTokens.darkWhite,
1457
+ uploadedFileIconColor: globalTokens.lightGrey,
1458
+ uploadedFileIconSize: "24px",
1459
+ uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1460
+ uploadedFilesTitleFontStyle: globalTokens.type_normal,
1461
+ uploadedFilesTitleFontWeight: globalTokens.type_regular,
1462
+ uploadedFilesTitleFontTextTransform: "none",
1463
+ uploadedFilesTitleFontColor: globalTokens.black,
1464
+ uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1465
+ uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1466
+ uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1467
+ uploadedFilesSubtitleFontTextTransform: "none",
1468
+ uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1469
+ uploadedFilesNumberFontWeight: globalTokens.type_bold
1055
1470
  },
1056
1471
  wizard: {
1057
1472
  disabledBackgroundColor: globalTokens.lightGrey,
@@ -1063,10 +1478,9 @@ var componentTokens = {
1063
1478
  stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1064
1479
  stepContainerFontColor: globalTokens.black,
1065
1480
  stepContainerSelectedFontColor: globalTokens.white,
1066
- stepContainerSelectedBackgroundColor: globalTokens.purple,
1481
+ stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1067
1482
  stepContainerBackgroundColor: globalTokens.white,
1068
- stepContainerIconHeight: "19px",
1069
- stepContainerIconWidth: "19px",
1483
+ stepContainerIconSize: "19px",
1070
1484
  labelFontSize: globalTokens.type_scale_03,
1071
1485
  labelFontFamily: globalTokens.type_sans,
1072
1486
  labelFontStyle: globalTokens.type_normal,
@@ -1075,7 +1489,8 @@ var componentTokens = {
1075
1489
  labelFontTextTransform: "none",
1076
1490
  labelTextAlign: "left",
1077
1491
  labelFontColor: globalTokens.darkGrey,
1078
- labelActiveFontColor: globalTokens.black,
1492
+ visitedLabelFontColor: globalTokens.black,
1493
+ visitedDescriptionFontColor: globalTokens.black,
1079
1494
  descriptionFontSize: globalTokens.type_scale_01,
1080
1495
  descriptionFontFamily: globalTokens.type_sans,
1081
1496
  descriptionFontStyle: globalTokens.type_normal,
@@ -1083,29 +1498,29 @@ var componentTokens = {
1083
1498
  descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1084
1499
  descriptionFontTextTransform: "none",
1085
1500
  descriptionFontColor: globalTokens.darkGrey,
1086
- descriptionActiveFontColor: globalTokens.black,
1087
1501
  descriptionTextAlign: "left",
1502
+ circleWidth: "32px",
1503
+ circleHeight: "32px",
1088
1504
  circleBorderThickness: "2px",
1089
1505
  circleBorderStyle: "solid",
1090
1506
  circleBorderRadius: "45px",
1091
1507
  circleBorderColor: globalTokens.black,
1092
- circleSelectedWidth: "32px",
1093
- circleSelectedHeight: "32px",
1094
- circleSelectedBorderThickness: "2px",
1095
- circleSelectedBorderStyle: "solid",
1096
- circleSelectedBorderRadius: "45px",
1097
- circleSelectedBorderColor: globalTokens.purple,
1098
- circleDisabledWidth: "32px",
1099
- circleDisabledHeight: "32px",
1100
- circleDisabledBorderThickness: "2px",
1101
- circleDisabledBorderStyle: "solid",
1102
- circleDisabledBorderRadius: "45px",
1103
- circleDisabledBorderColor: globalTokens.lightGrey,
1104
- circleWidth: "32px",
1105
- circleHeight: "32px",
1508
+ selectedCircleWidth: "32px",
1509
+ selectedCircleHeight: "32px",
1510
+ selectedCircleBorderThickness: "2px",
1511
+ selectedCircleBorderStyle: "solid",
1512
+ selectedCircleBorderRadius: "45px",
1513
+ selectedCircleBorderColor: globalTokens.purple,
1514
+ disabledCircleWidth: "32px",
1515
+ disabledCircleHeight: "32px",
1516
+ disabledCircleBorderThickness: "2px",
1517
+ disabledCircleBorderStyle: "solid",
1518
+ disabledCircleBorderRadius: "45px",
1519
+ disabledCircleBorderColor: globalTokens.lightGrey,
1106
1520
  separatorBorderThickness: "1px",
1107
1521
  separatorBorderStyle: "solid",
1108
- separatorColor: globalTokens.lightGrey
1522
+ separatorColor: globalTokens.lightGrey,
1523
+ focusColor: globalTokens.hal_blue_l_50
1109
1524
  }
1110
1525
  };
1111
1526
  exports.componentTokens = componentTokens;