@dxc-technology/halstack-react 0.0.0-4e9134c → 0.0.0-4ec6fe9

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