@dxc-technology/halstack-react 0.0.0-4fd9593 → 0.0.0-500190a

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 (373) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/{dist/select/Select.js → V3Select/V3Select.js} +116 -246
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +14 -18
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/accordion/Accordion.js +258 -0
  9. package/accordion/types.d.ts +68 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +170 -0
  13. package/accordion-group/types.d.ts +72 -0
  14. package/accordion-group/types.js +5 -0
  15. package/alert/Alert.d.ts +4 -0
  16. package/alert/Alert.js +290 -0
  17. package/alert/Alert.stories.tsx +170 -0
  18. package/alert/types.d.ts +49 -0
  19. package/alert/types.js +5 -0
  20. package/badge/Badge.js +59 -0
  21. package/box/Box.d.ts +4 -0
  22. package/{dist/box → box}/Box.js +13 -43
  23. package/box/Box.stories.tsx +132 -0
  24. package/box/types.d.ts +43 -0
  25. package/box/types.js +5 -0
  26. package/button/Button.d.ts +4 -0
  27. package/button/Button.js +179 -0
  28. package/button/Button.stories.tsx +276 -0
  29. package/button/types.d.ts +57 -0
  30. package/button/types.js +5 -0
  31. package/card/Card.d.ts +4 -0
  32. package/{dist/card → card}/Card.js +33 -123
  33. package/card/Card.stories.tsx +201 -0
  34. package/card/ice-cream.jpg +0 -0
  35. package/card/types.d.ts +67 -0
  36. package/card/types.js +5 -0
  37. package/checkbox/Checkbox.d.ts +4 -0
  38. package/{dist/checkbox → checkbox}/Checkbox.js +33 -74
  39. package/checkbox/Checkbox.stories.tsx +192 -0
  40. package/checkbox/types.d.ts +60 -0
  41. package/checkbox/types.js +5 -0
  42. package/{dist/chip → chip}/Chip.js +17 -61
  43. package/chip/Chip.stories.tsx +121 -0
  44. package/chip/index.d.ts +22 -0
  45. package/{dist/common → common}/OpenSans.css +0 -0
  46. package/{dist/common → common}/RequiredComponent.js +3 -11
  47. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  48. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  49. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  50. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  51. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  52. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  53. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  54. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  55. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  56. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  57. package/{dist/common → common}/utils.js +0 -0
  58. package/{dist/common → common}/variables.js +631 -418
  59. package/{dist/date → date}/Date.js +21 -29
  60. package/date/index.d.ts +27 -0
  61. package/date-input/DateInput.d.ts +4 -0
  62. package/{dist/new-date/NewDate.js → date-input/DateInput.js} +94 -128
  63. package/date-input/DateInput.stories.tsx +138 -0
  64. package/date-input/types.d.ts +100 -0
  65. package/date-input/types.js +5 -0
  66. package/dialog/Dialog.d.ts +4 -0
  67. package/{dist/dialog → dialog}/Dialog.js +22 -97
  68. package/dialog/Dialog.stories.tsx +212 -0
  69. package/dialog/types.d.ts +43 -0
  70. package/dialog/types.js +5 -0
  71. package/dropdown/Dropdown.d.ts +4 -0
  72. package/dropdown/Dropdown.js +417 -0
  73. package/dropdown/types.d.ts +89 -0
  74. package/dropdown/types.js +5 -0
  75. package/file-input/FileInput.d.ts +4 -0
  76. package/file-input/FileInput.js +511 -0
  77. package/file-input/FileItem.d.ts +14 -0
  78. package/file-input/FileItem.js +184 -0
  79. package/file-input/types.d.ts +87 -0
  80. package/file-input/types.js +5 -0
  81. package/footer/Footer.d.ts +4 -0
  82. package/footer/Footer.js +266 -0
  83. package/footer/Footer.stories.jsx +151 -0
  84. package/footer/Icons.js +77 -0
  85. package/footer/types.d.ts +61 -0
  86. package/footer/types.js +5 -0
  87. package/header/Header.d.ts +7 -0
  88. package/header/Header.js +324 -0
  89. package/header/Header.stories.tsx +162 -0
  90. package/header/Icons.js +34 -0
  91. package/header/types.d.ts +47 -0
  92. package/header/types.js +5 -0
  93. package/heading/Heading.d.ts +4 -0
  94. package/{dist/heading → heading}/Heading.js +30 -89
  95. package/heading/Heading.stories.tsx +53 -0
  96. package/heading/types.d.ts +33 -0
  97. package/heading/types.js +5 -0
  98. package/input-text/Icons.js +22 -0
  99. package/{dist/input-text → input-text}/InputText.js +37 -133
  100. package/input-text/index.d.ts +36 -0
  101. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  102. package/layout/Icons.js +55 -0
  103. package/link/Link.d.ts +3 -0
  104. package/{dist/link → link}/Link.js +20 -100
  105. package/link/Link.stories.tsx +146 -0
  106. package/link/types.d.ts +74 -0
  107. package/link/types.js +5 -0
  108. package/main.d.ts +44 -0
  109. package/{dist/main.js → main.js} +104 -92
  110. package/number-input/NumberInput.d.ts +4 -0
  111. package/number-input/NumberInput.js +86 -0
  112. package/number-input/NumberInput.stories.tsx +115 -0
  113. package/number-input/NumberInputContext.d.ts +4 -0
  114. package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +6 -3
  115. package/number-input/numberInputContextTypes.d.ts +19 -0
  116. package/number-input/numberInputContextTypes.js +5 -0
  117. package/number-input/types.d.ts +117 -0
  118. package/number-input/types.js +5 -0
  119. package/package.json +32 -24
  120. package/paginator/Icons.js +66 -0
  121. package/paginator/Paginator.d.ts +4 -0
  122. package/paginator/Paginator.js +198 -0
  123. package/paginator/Paginator.stories.tsx +63 -0
  124. package/paginator/types.d.ts +38 -0
  125. package/paginator/types.js +5 -0
  126. package/password-input/PasswordInput.d.ts +4 -0
  127. package/{dist/password/Password.js → password-input/PasswordInput.js} +36 -68
  128. package/password-input/PasswordInput.stories.tsx +131 -0
  129. package/password-input/types.d.ts +107 -0
  130. package/password-input/types.js +5 -0
  131. package/progress-bar/ProgressBar.d.ts +4 -0
  132. package/progress-bar/ProgressBar.js +170 -0
  133. package/progress-bar/ProgressBar.stories.jsx +58 -0
  134. package/progress-bar/types.d.ts +37 -0
  135. package/progress-bar/types.js +5 -0
  136. package/radio/Radio.d.ts +4 -0
  137. package/{dist/radio → radio}/Radio.js +15 -50
  138. package/radio/Radio.stories.tsx +192 -0
  139. package/radio/types.d.ts +54 -0
  140. package/radio/types.js +5 -0
  141. package/resultsetTable/ResultsetTable.d.ts +4 -0
  142. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +38 -145
  143. package/resultsetTable/types.d.ts +67 -0
  144. package/resultsetTable/types.js +5 -0
  145. package/select/Select.js +865 -0
  146. package/select/Select.stories.tsx +572 -0
  147. package/select/index.d.ts +131 -0
  148. package/sidenav/Sidenav.d.ts +9 -0
  149. package/{dist/sidenav → sidenav}/Sidenav.js +21 -62
  150. package/sidenav/Sidenav.stories.tsx +165 -0
  151. package/sidenav/types.d.ts +50 -0
  152. package/sidenav/types.js +5 -0
  153. package/slider/Slider.d.ts +4 -0
  154. package/slider/Slider.js +317 -0
  155. package/slider/Slider.stories.tsx +177 -0
  156. package/slider/types.d.ts +78 -0
  157. package/slider/types.js +5 -0
  158. package/spinner/Spinner.d.ts +4 -0
  159. package/spinner/Spinner.js +250 -0
  160. package/spinner/Spinner.stories.jsx +102 -0
  161. package/spinner/types.d.ts +32 -0
  162. package/spinner/types.js +5 -0
  163. package/switch/Switch.d.ts +4 -0
  164. package/{dist/switch → switch}/Switch.js +26 -69
  165. package/switch/Switch.stories.tsx +160 -0
  166. package/switch/types.d.ts +58 -0
  167. package/switch/types.js +5 -0
  168. package/table/Table.d.ts +4 -0
  169. package/{dist/table → table}/Table.js +10 -24
  170. package/table/Table.stories.jsx +276 -0
  171. package/table/types.d.ts +21 -0
  172. package/table/types.js +5 -0
  173. package/tabs/Tabs.d.ts +4 -0
  174. package/tabs/Tabs.js +213 -0
  175. package/tabs/Tabs.stories.tsx +121 -0
  176. package/tabs/types.d.ts +70 -0
  177. package/tabs/types.js +5 -0
  178. package/tag/Tag.d.ts +4 -0
  179. package/tag/Tag.js +193 -0
  180. package/tag/Tag.stories.tsx +145 -0
  181. package/tag/types.d.ts +60 -0
  182. package/tag/types.js +5 -0
  183. package/text-input/TextInput.d.ts +4 -0
  184. package/text-input/TextInput.js +786 -0
  185. package/text-input/types.d.ts +159 -0
  186. package/text-input/types.js +5 -0
  187. package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +91 -117
  188. package/textarea/Textarea.stories.jsx +135 -0
  189. package/textarea/index.d.ts +127 -0
  190. package/{dist/toggle → toggle}/Toggle.js +15 -49
  191. package/toggle/index.d.ts +21 -0
  192. package/toggle-group/ToggleGroup.d.ts +4 -0
  193. package/toggle-group/ToggleGroup.js +217 -0
  194. package/toggle-group/ToggleGroup.stories.tsx +178 -0
  195. package/toggle-group/types.d.ts +84 -0
  196. package/toggle-group/types.js +5 -0
  197. package/{dist/upload → upload}/Upload.js +11 -15
  198. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  199. package/upload/buttons-upload/Icons.js +40 -0
  200. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  201. package/upload/dragAndDropArea/Icons.js +39 -0
  202. package/upload/file-upload/FileToUpload.js +115 -0
  203. package/upload/file-upload/Icons.js +66 -0
  204. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  205. package/upload/index.d.ts +15 -0
  206. package/upload/transaction/Icons.js +160 -0
  207. package/upload/transaction/Transaction.js +104 -0
  208. package/upload/transactions/Transactions.js +94 -0
  209. package/{dist/useTheme.js → useTheme.js} +0 -0
  210. package/wizard/Icons.js +65 -0
  211. package/wizard/Wizard.d.ts +4 -0
  212. package/{dist/wizard → wizard}/Wizard.js +33 -213
  213. package/wizard/Wizard.stories.jsx +224 -0
  214. package/wizard/types.d.ts +64 -0
  215. package/wizard/types.js +5 -0
  216. package/README.md +0 -66
  217. package/babel.config.js +0 -8
  218. package/dist/BackgroundColorContext.js +0 -46
  219. package/dist/ThemeContext.js +0 -216
  220. package/dist/accordion/Accordion.js +0 -348
  221. package/dist/accordion/Accordion.stories.js +0 -207
  222. package/dist/accordion/readme.md +0 -96
  223. package/dist/accordion-group/AccordionGroup.js +0 -188
  224. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  225. package/dist/accordion-group/readme.md +0 -70
  226. package/dist/alert/Alert.js +0 -392
  227. package/dist/alert/Alert.stories.js +0 -158
  228. package/dist/alert/close.svg +0 -4
  229. package/dist/alert/error.svg +0 -4
  230. package/dist/alert/info.svg +0 -4
  231. package/dist/alert/readme.md +0 -43
  232. package/dist/alert/success.svg +0 -4
  233. package/dist/alert/warning.svg +0 -4
  234. package/dist/badge/Badge.js +0 -63
  235. package/dist/button/Button.js +0 -232
  236. package/dist/button/Button.stories.js +0 -224
  237. package/dist/button/readme.md +0 -93
  238. package/dist/checkbox/Checkbox.stories.js +0 -144
  239. package/dist/checkbox/readme.md +0 -116
  240. package/dist/date/Date.stories.js +0 -205
  241. package/dist/date/readme.md +0 -73
  242. package/dist/dialog/Dialog.stories.js +0 -217
  243. package/dist/dialog/readme.md +0 -32
  244. package/dist/dropdown/Dropdown.js +0 -504
  245. package/dist/dropdown/Dropdown.stories.js +0 -249
  246. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  247. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  248. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  249. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  250. package/dist/dropdown/readme.md +0 -69
  251. package/dist/footer/Footer.js +0 -395
  252. package/dist/footer/Footer.stories.js +0 -94
  253. package/dist/footer/dxc_logo.svg +0 -15
  254. package/dist/footer/readme.md +0 -41
  255. package/dist/header/Header.js +0 -423
  256. package/dist/header/Header.stories.js +0 -176
  257. package/dist/header/close_icon.svg +0 -1
  258. package/dist/header/dxc_logo_black.svg +0 -8
  259. package/dist/header/hamb_menu_black.svg +0 -1
  260. package/dist/header/hamb_menu_white.svg +0 -1
  261. package/dist/header/readme.md +0 -33
  262. package/dist/input-text/InputText.stories.js +0 -209
  263. package/dist/input-text/error.svg +0 -1
  264. package/dist/input-text/readme.md +0 -91
  265. package/dist/layout/facebook.svg +0 -45
  266. package/dist/layout/linkedin.svg +0 -50
  267. package/dist/layout/twitter.svg +0 -53
  268. package/dist/link/readme.md +0 -51
  269. package/dist/new-input-text/NewInputText.js +0 -957
  270. package/dist/number/Number.js +0 -134
  271. package/dist/paginator/Paginator.js +0 -289
  272. package/dist/paginator/images/next.svg +0 -3
  273. package/dist/paginator/images/nextPage.svg +0 -3
  274. package/dist/paginator/images/previous.svg +0 -3
  275. package/dist/paginator/images/previousPage.svg +0 -3
  276. package/dist/paginator/readme.md +0 -50
  277. package/dist/password/styles.css +0 -3
  278. package/dist/progress-bar/ProgressBar.js +0 -206
  279. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  280. package/dist/progress-bar/readme.md +0 -63
  281. package/dist/radio/Radio.stories.js +0 -166
  282. package/dist/radio/readme.md +0 -70
  283. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  284. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  285. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  286. package/dist/select/Select.stories.js +0 -235
  287. package/dist/select/readme.md +0 -72
  288. package/dist/slider/Slider.js +0 -315
  289. package/dist/slider/Slider.stories.js +0 -241
  290. package/dist/slider/readme.md +0 -64
  291. package/dist/spinner/Spinner.js +0 -218
  292. package/dist/spinner/Spinner.stories.js +0 -183
  293. package/dist/spinner/readme.md +0 -65
  294. package/dist/switch/Switch.stories.js +0 -134
  295. package/dist/switch/readme.md +0 -133
  296. package/dist/tabs/Tabs.js +0 -343
  297. package/dist/tabs/Tabs.stories.js +0 -130
  298. package/dist/tabs/readme.md +0 -78
  299. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  300. package/dist/tabs-for-sections/readme.md +0 -78
  301. package/dist/tag/Tag.js +0 -288
  302. package/dist/toggle/Toggle.stories.js +0 -297
  303. package/dist/toggle/readme.md +0 -80
  304. package/dist/toggle-group/ToggleGroup.js +0 -241
  305. package/dist/toggle-group/readme.md +0 -82
  306. package/dist/upload/Upload.stories.js +0 -72
  307. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  308. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  309. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  310. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  311. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  312. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  313. package/dist/upload/file-upload/FileToUpload.js +0 -184
  314. package/dist/upload/file-upload/audio-icon.svg +0 -4
  315. package/dist/upload/file-upload/close.svg +0 -4
  316. package/dist/upload/file-upload/file-icon.svg +0 -4
  317. package/dist/upload/file-upload/video-icon.svg +0 -4
  318. package/dist/upload/readme.md +0 -37
  319. package/dist/upload/transaction/Transaction.js +0 -175
  320. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  321. package/dist/upload/transaction/audio-icon.svg +0 -4
  322. package/dist/upload/transaction/error-icon.svg +0 -4
  323. package/dist/upload/transaction/file-icon-err.svg +0 -4
  324. package/dist/upload/transaction/file-icon.svg +0 -4
  325. package/dist/upload/transaction/image-icon-err.svg +0 -4
  326. package/dist/upload/transaction/image-icon.svg +0 -4
  327. package/dist/upload/transaction/success-icon.svg +0 -4
  328. package/dist/upload/transaction/video-icon-err.svg +0 -4
  329. package/dist/upload/transaction/video-icon.svg +0 -4
  330. package/dist/upload/transactions/Transactions.js +0 -138
  331. package/dist/wizard/invalid_icon.svg +0 -5
  332. package/dist/wizard/valid_icon.svg +0 -5
  333. package/dist/wizard/validation-wrong.svg +0 -6
  334. package/test/Accordion.test.js +0 -33
  335. package/test/AccordionGroup.test.js +0 -125
  336. package/test/Alert.test.js +0 -53
  337. package/test/Box.test.js +0 -10
  338. package/test/Button.test.js +0 -18
  339. package/test/Card.test.js +0 -30
  340. package/test/Checkbox.test.js +0 -45
  341. package/test/Chip.test.js +0 -25
  342. package/test/Date.test.js +0 -393
  343. package/test/Dialog.test.js +0 -23
  344. package/test/Dropdown.test.js +0 -145
  345. package/test/Footer.test.js +0 -99
  346. package/test/Header.test.js +0 -39
  347. package/test/Heading.test.js +0 -35
  348. package/test/InputText.test.js +0 -240
  349. package/test/Link.test.js +0 -43
  350. package/test/NewDate.test.js +0 -200
  351. package/test/NewInputText.test.js +0 -817
  352. package/test/NewTextarea.test.js +0 -201
  353. package/test/Number.test.js +0 -241
  354. package/test/Paginator.test.js +0 -177
  355. package/test/Password.test.js +0 -76
  356. package/test/ProgressBar.test.js +0 -35
  357. package/test/Radio.test.js +0 -37
  358. package/test/ResultsetTable.test.js +0 -330
  359. package/test/Select.test.js +0 -189
  360. package/test/Sidenav.test.js +0 -45
  361. package/test/Slider.test.js +0 -82
  362. package/test/Spinner.test.js +0 -27
  363. package/test/Switch.test.js +0 -45
  364. package/test/Table.test.js +0 -36
  365. package/test/Tabs.test.js +0 -109
  366. package/test/TabsForSections.test.js +0 -34
  367. package/test/Tag.test.js +0 -32
  368. package/test/TextArea.test.js +0 -52
  369. package/test/ToggleGroup.test.js +0 -81
  370. package/test/Upload.test.js +0 -60
  371. package/test/Wizard.test.js +0 -130
  372. package/test/mocks/pngMock.js +0 -1
  373. package/test/mocks/svgMock.js +0 -1
@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
8
+ exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.componentTokens = 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,26 +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
- hoverBackgroundColor: globalTokens.lightPurple,
152
- disabledColor: globalTokens.mediumGrey,
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,
153
171
  assistiveTextFontFamily: globalTokens.type_sans,
154
172
  assistiveTextFontSize: globalTokens.type_scale_03,
155
173
  assistiveTextFontWeight: globalTokens.type_light,
156
174
  assistiveTextFontStyle: globalTokens.type_italic,
157
- assistiveTextFontColor: globalTokens.darkGrey,
158
175
  assistiveTextLetterSpacing: globalTokens.type_spacing_wide_01,
176
+ assistiveTextFontColor: globalTokens.hal_grey_s_40,
177
+ disabledAssistiveTextFontColor: globalTokens.hal_grey_l_60,
159
178
  assistiveTextMinWidth: "100px",
160
179
  assistiveTextPaddingRight: "24px",
161
180
  assistiveTextPaddingLeft: "0px",
@@ -163,76 +182,72 @@ var componentTokens = {
163
182
  titleLabelFontSize: globalTokens.type_scale_03,
164
183
  titleLabelFontWeight: globalTokens.type_regular,
165
184
  titleLabelFontStyle: globalTokens.type_normal,
166
- titleLabelFontColor: globalTokens.darkGrey,
185
+ titleLabelFontColor: globalTokens.hal_black,
186
+ disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
167
187
  titleLabelPaddingLeft: "0px",
168
- titleLabelPaddingRight: "0px",
169
- titlePaddingTop: "0px",
170
- titlePaddingBottom: "0px",
188
+ titleLabelPaddingRight: "16px",
189
+ titleLabelPaddingTop: "0px",
190
+ titleLabelPaddingBottom: "0px",
171
191
  focusBorderStyle: "solid",
172
- focusBorderThickness: "1px",
173
- focusBorderColor: globalTokens.purple,
192
+ focusBorderThickness: "2px",
193
+ focusBorderColor: globalTokens.hal_blue_l_50,
174
194
  borderRadius: "4px",
175
195
  boxShadowOffsetX: "0px",
176
196
  boxShadowOffsetY: "6px",
177
197
  boxShadowBlur: "10px",
178
- boxShadowColor: "#00000024",
179
- iconColor: globalTokens.purple,
198
+ boxShadowColor: "#0000001a",
199
+ iconColor: globalTokens.hal_purple_s_38,
200
+ disabledIconColor: globalTokens.hal_grey_l_60,
180
201
  iconSize: "24px",
181
202
  iconMarginLeft: "0px",
182
203
  iconMarginRigth: "12px",
183
- accordionGroupSeparatorBorderColor: "#00000024",
204
+ accordionGroupSeparatorBorderColor: "#0000001a",
184
205
  accordionGroupSeparatorBorderThickness: "1px",
185
206
  accordionGroupSeparatorBorderRadius: "0px",
186
207
  accordionGroupSeparatorBorderStyle: "solid"
187
208
  },
188
209
  alert: {
189
- overlayColor: globalTokens.black,
190
- infoColor: globalTokens.lightBlue,
191
- successColor: globalTokens.lightGreen,
192
- warningColor: globalTokens.lightYellow,
193
- errorColor: globalTokens.lightPink,
194
- focusColor: globalTokens.blue,
195
210
  titleFontFamily: globalTokens.type_sans,
211
+ titleFontColor: globalTokens.hal_black,
196
212
  titleFontSize: globalTokens.type_scale_01,
197
- titleFontColor: globalTokens.black,
213
+ titleFontStyle: globalTokens.type_normal,
198
214
  titleFontWeight: globalTokens.type_bold,
199
215
  titleTextTransform: globalTokens.type_uppercase,
200
- titleFontStyle: globalTokens.type_normal,
201
- titlePaddingRight: "10px",
216
+ titlePaddingRight: "0px",
202
217
  titlePaddingLeft: "0px",
203
- titlePaddingTop: "0px",
204
- titlePaddingBottom: "0px",
205
- contentFontFamily: globalTokens.type_sans,
206
- contentFontSize: globalTokens.type_scale_01,
207
- contentFontColor: globalTokens.black,
208
- contentFontWeight: globalTokens.type_regular,
209
- contentPaddingLeft: "46px",
210
- contentPaddingRight: "12px",
211
- contentPaddingTop: "8px",
212
- contentPaddingBottom: "20px",
213
- overlayOpacity: "0.8",
214
- boxShadowOffsetX: "0px",
215
- boxShadowOffsetY: "3px",
216
- boxShadowBlur: "6px",
217
- 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",
218
229
  borderRadius: "4px",
219
- borderStyle: "none",
220
- borderThickness: "0px",
221
- borderColor: globalTokens.transparent,
222
- height: "48px",
223
- inlineTextPaddingLeft: "10px",
224
- inlineTextPaddingRight: "10px",
225
- inlineTextPaddingTop: "0px",
226
- inlineTextPaddingBottom: "0px",
227
- 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",
228
238
  iconPaddingRight: "0px",
229
- iconPaddingTop: "0px",
230
- iconPaddingBottom: "0px",
231
- iconSize: "20px",
232
- textPaddingLeft: "12px",
233
- textPaddingRight: "12px",
234
- textPaddingTop: "0px",
235
- textPaddingBottom: "0px"
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"
236
251
  },
237
252
  box: {
238
253
  backgroundColor: globalTokens.white,
@@ -258,128 +273,116 @@ var componentTokens = {
258
273
  twoShadowDepthShadowColor: "#00000033"
259
274
  },
260
275
  button: {
261
- primaryBackgroundColor: globalTokens.purple,
262
- primaryBackgroundColorOnDark: "#581B81",
263
- primaryHoverBackgroundColor: globalTokens.black,
264
- primaryHoverBackgroundColorOnDark: "#581B81",
265
- primaryFontColor: globalTokens.white,
266
- primaryFontColorOnDark: globalTokens.white,
267
- primaryHoverFontColor: globalTokens.white,
268
- primaryHoverFontColorOnDark: globalTokens.black,
269
- primaryActiveBackgroundColor: globalTokens.mediumBlack,
270
- primaryActiveBackgroundColorOnDark: "#581B81",
271
- primaryDisabledBackgroundColor: globalTokens.lightPurple,
272
- primaryDisabledBackgroundColorOnDark: "#ffffff57",
273
- primaryDisabledFontColor: globalTokens.white,
274
- primaryDisabledFontColorOnDark: globalTokens.black,
275
- primaryBorderThickness: "0px",
276
- primaryBorderColor: globalTokens.black,
277
- primaryBorderColorOnDark: globalTokens.white,
278
- primaryBorderStyle: "none",
279
- primaryBorderRadius: "4px",
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,
280
299
  primaryFontFamily: globalTokens.type_sans,
281
300
  primaryFontSize: globalTokens.type_scale_03,
282
301
  primaryFontWeight: globalTokens.type_regular,
283
- primaryPaddingTop: "12px",
284
- primaryPaddingBottom: "12px",
285
- secondaryOutlinedColor: globalTokens.purple,
286
- secondaryOutlinedColorOnDark: "#6A229A",
287
302
  secondaryBackgroundColor: globalTokens.transparent,
288
303
  secondaryBackgroundColorOnDark: globalTokens.transparent,
289
- secondaryHoverOutlinedColor: globalTokens.black,
290
- secondaryHoverOutlinedColorOnDark: "#6A229A",
291
- secondaryFontColor: globalTokens.black,
292
- secondaryFontColorOnDark: globalTokens.white,
293
- secondaryHoverFontColor: globalTokens.black,
294
- secondaryHoverFontColorOnDark: globalTokens.white,
295
- secondaryActiveBackgroundColor: globalTokens.mediumGreyBlack,
296
- secondaryActiveBackgroundColorOnDark: "#FFFFFF29",
297
- secondaryHoverBackgroundColor: globalTokens.darkWhite,
298
- secondaryHoverBackgroundColorOnDark: "#FFFFFF14",
299
- secondaryDisabledOutlinedColor: globalTokens.lightPurple,
300
- secondaryDisabledOutlinedColorOnDark: "#575757",
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,
301
316
  secondaryDisabledFontColor: globalTokens.lighterBlack,
302
- secondaryDisabledFontColorOnDark: "#575757",
303
- secondaryBorderThickness: "1px",
304
- secondaryBorderStyle: "solid",
305
- secondaryBorderRadius: "4px",
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,
306
323
  secondaryFontFamily: globalTokens.type_sans,
307
324
  secondaryFontSize: globalTokens.type_scale_03,
308
325
  secondaryFontWeight: globalTokens.type_regular,
309
- secondaryPaddingTop: "10px",
310
- secondaryPaddingBottom: "10px",
311
326
  textBackgroundColor: globalTokens.transparent,
312
327
  textBackgroundColorOnDark: globalTokens.transparent,
313
- textHoverBackgroundColor: globalTokens.black,
314
- textHoverBackgroundColorOnDark: "#6A229A80",
315
- textFontColor: globalTokens.purple,
316
- textFontColorOnDark: globalTokens.white,
317
- textHoverFontColor: globalTokens.white,
318
- textHoverFontColorOnDark: globalTokens.white,
319
- textActiveBackgroundColor: globalTokens.mediumBlack,
320
- textActiveBackgroundColorOnDark: "#581B81",
321
- textDisabledFontColor: globalTokens.lighterPurple,
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,
322
334
  textDisabledBackgroundColor: globalTokens.transparent,
323
335
  textDisabledBackgroundColorOnDark: globalTokens.transparent,
324
- textDisabledFontColorOnDark: "#FFFFFF80",
325
- textBorderThickness: "0px",
326
- textBorderColor: globalTokens.black,
327
- textBorderColorOnDark: globalTokens.white,
328
- textBorderStyle: "none",
329
- textBorderRadius: "4px",
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,
330
341
  textFontFamily: globalTokens.type_sans,
331
342
  textFontSize: globalTokens.type_scale_03,
332
- textFontWeight: globalTokens.type_regular,
333
- textPaddingTop: "12px",
334
- textPaddingBottom: "12px",
335
- focusColor: globalTokens.blue,
336
- labelFontLineHeight: globalTokens.type_leading_normal,
337
- labelLetterSpacing: globalTokens.type_spacing_wide_01,
338
- iconSize: "20px",
339
- height: "40px"
343
+ textFontWeight: globalTokens.type_regular
340
344
  },
341
345
  card: {
342
346
  height: "220px",
343
347
  width: "400px"
344
348
  },
345
349
  checkbox: {
346
- backgroundColorChecked: globalTokens.mediumBlue,
347
- backgroundColorCheckedOnDark: globalTokens.white,
348
- hoverBackgroundColorChecked: "#7BB0D6",
349
- hoverBackgroundColorCheckedOnDark: "#B1B1B1",
350
- disabledBackgroundColorChecked: globalTokens.softBlue,
351
- disabledBackgroundColorCheckedOnDark: globalTokens.softBlue,
352
- borderColor: globalTokens.mediumBlue,
353
- borderColorOnDark: globalTokens.white,
354
- hoverBorderColor: "#7BB0D6",
355
- hoverBorderColorOnDark: "#B1B1B1",
356
- disabledBorderColor: globalTokens.softBlue,
357
- disabledBorderColorOnDark: globalTokens.softBlue,
358
- checkColor: globalTokens.white,
359
- checkColorOnDark: globalTokens.mediumBlue,
360
- disabledCheckColor: globalTokens.white,
361
- disabledCheckColorOnDark: globalTokens.white,
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,
362
366
  fontFamily: globalTokens.type_sans,
363
- fontSize: globalTokens.type_scale_03,
367
+ fontSize: globalTokens.type_scale_02,
364
368
  fontWeight: globalTokens.type_regular,
365
- fontColor: globalTokens.black,
366
- fontColorOnDark: globalTokens.white,
367
- disabledColorOnDark: globalTokens.mediumGrey,
368
- disabledFontColor: globalTokens.lighterBlack,
369
- disabledFontColorOnDark: "#575757",
370
- focusColor: globalTokens.blue,
371
- focusColorOnDark: "#0095ff",
372
- checkLabelSpacing: "10px"
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"
373
376
  },
374
377
  chip: {
375
- backgroundColor: "#e6e6e6",
376
- disabledBackgroundColor: globalTokens.lightWhite,
377
- disabledFontColor: "#999999",
378
- fontColor: globalTokens.black,
378
+ backgroundColor: globalTokens.hal_grey_l_90,
379
+ disabledBackgroundColor: globalTokens.hal_grey_l_95,
379
380
  fontFamily: globalTokens.type_sans,
380
381
  fontSize: globalTokens.type_scale_03,
381
382
  fontStyle: globalTokens.type_normal,
382
383
  fontWeight: globalTokens.type_regular,
384
+ fontColor: globalTokens.hal_black,
385
+ disabledFontColor: globalTokens.hal_grey_l_60,
383
386
  borderColor: globalTokens.transparent,
384
387
  borderRadius: "80px",
385
388
  borderThickness: "0px",
@@ -390,43 +393,54 @@ var componentTokens = {
390
393
  contentPaddingBottom: "0px",
391
394
  iconSize: "24px",
392
395
  iconSpacing: "8px",
393
- iconColor: globalTokens.black,
394
- disabledIconColor: "#999999",
395
- focusColor: globalTokens.mediumBlue
396
+ iconColor: globalTokens.hal_black,
397
+ disabledIconColor: globalTokens.hal_grey_l_60,
398
+ focusColor: globalTokens.hal_blue_l_50
396
399
  },
397
400
  date: {
398
401
  pickerSelectedDateBackgroundColor: globalTokens.purple,
399
- pickerSelectedDateColor: globalTokens.white,
400
- pickerBackgroundColor: globalTokens.white,
401
- pickerFontColor: globalTokens.black,
402
+ pickerSelectedDateColor: globalTokens.hal_white,
403
+ pickerBackgroundColor: globalTokens.hal_white,
404
+ pickerFontColor: globalTokens.hal_black,
402
405
  pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
403
- pickerHoverDateFontColor: globalTokens.black,
406
+ pickerHoverDateFontColor: globalTokens.hal_black,
404
407
  pickerActualDateColor: globalTokens.lightGrey,
405
- pickerYearColor: globalTokens.black,
406
- pickerMonthColor: globalTokens.black,
407
- pickerWeekLabelColor: globalTokens.black,
408
+ pickerYearColor: globalTokens.hal_black,
409
+ pickerMonthColor: globalTokens.hal_black,
410
+ pickerWeekLabelColor: globalTokens.hal_black,
408
411
  pickerBackgroundColorMonthArrows: globalTokens.transparent,
409
- focusColor: globalTokens.blue,
412
+ focusColor: globalTokens.hal_blue_l_50,
410
413
  fontFamily: globalTokens.type_sans,
411
414
  pickerHeight: "316px",
412
415
  pickerWidth: "290px"
413
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
+ },
414
434
  dialog: {
415
- overlayColor: globalTokens.black,
416
- scrollBarThumbColor: globalTokens.darkGrey,
417
- scrollBarTrackColor: globalTokens.lightGrey,
418
- backgroundColor: globalTokens.white,
419
- fontFamily: globalTokens.type_sans,
420
- fontSize: globalTokens.type_scale_03,
421
- fontWeight: globalTokens.type_regular,
422
- fontColor: globalTokens.black,
435
+ overlayColor: globalTokens.hal_black,
436
+ backgroundColor: globalTokens.hal_white,
423
437
  closeIconWidth: "24px",
424
438
  closeIconHeight: "24px",
425
439
  closeIconTopPosition: "20px",
426
440
  closeIconRightPosition: "20px",
427
441
  closeIconBackgroundColor: "none",
428
442
  closeIconBorderColor: "none",
429
- closeIconColor: globalTokens.black,
443
+ closeIconColor: globalTokens.hal_black,
430
444
  closeIconBorderThickness: "0px",
431
445
  closeIconBorderStyle: "solid",
432
446
  closeIconBorderRadius: "0px",
@@ -437,44 +451,107 @@ var componentTokens = {
437
451
  overlayOpacity: "0.7"
438
452
  },
439
453
  dropdown: {
440
- buttonBackgroundColor: globalTokens.white,
441
- buttonFontColor: globalTokens.black,
442
- optionsListBackgroundColor: globalTokens.white,
443
- optionsListFontColor: globalTokens.black,
444
- optionsListHoverBackgroundColor: globalTokens.white,
445
- buttonHoverBackgroundColor: globalTokens.lightWhite,
446
- scrollBarThumbColor: globalTokens.darkGrey,
447
- scrollBarTrackColor: globalTokens.lightGrey,
448
- focusColor: globalTokens.mediumBlue,
449
- fontFamily: globalTokens.type_sans,
450
- 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,
451
458
  buttonFontSize: globalTokens.type_scale_03,
452
459
  buttonFontStyle: globalTokens.type_normal,
453
460
  buttonFontWeight: globalTokens.type_regular,
454
- minHeight: "36px",
455
- 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",
456
491
  borderStyle: "none",
457
492
  borderThickness: "0px",
458
493
  borderColor: globalTokens.transparent,
459
- optionsPaddingTop: "6px",
460
- optionsPaddingBottom: "6px",
461
- optionsPaddingLeft: "16px",
462
- optionsPaddingRight: "16px",
463
- caretIconMarginRight: "0",
464
- caretIconMarginLeft: "12px",
465
- caretIconMarginTop: "0px",
466
- caretIconMarginBottom: "0px",
467
- optionsFontSize: globalTokens.type_scale_root,
468
- optionsFontStyle: globalTokens.type_normal,
469
- optionsFontWeight: globalTokens.type_regular,
470
- iconSize: "20px",
471
- iconOptionSpacing: "10px",
472
- iconColor: globalTokens.black
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
+ dragoverDropBackgroundColor: 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_leading_normal,
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,
549
+ focusActionBorderColor: globalTokens.hal_blue_l_50
473
550
  },
474
551
  footer: {
475
552
  height: "124px",
476
- backgroundColor: globalTokens.black,
477
- bottomLinksDividerColor: "#0095ff",
553
+ backgroundColor: globalTokens.hal_black,
554
+ bottomLinksDividerColor: globalTokens.hal_blue_l_50,
478
555
  bottomLinksDividerThickness: "1px",
479
556
  bottomLinksDividerStyle: "solid",
480
557
  bottomLinksDividerSpacing: "8px",
@@ -482,49 +559,39 @@ var componentTokens = {
482
559
  bottomLinksFontSize: globalTokens.type_scale_01,
483
560
  bottomLinksFontStyle: globalTokens.type_normal,
484
561
  bottomLinksFontWeight: globalTokens.type_regular,
485
- bottomLinksFontColor: globalTokens.white,
562
+ bottomLinksFontColor: globalTokens.hal_white,
486
563
  bottomLinksTextDecoration: globalTokens.type_no_line,
487
564
  copyrightFontFamily: globalTokens.type_sans,
488
565
  copyrightFontSize: globalTokens.type_scale_01,
489
566
  copyrightFontStyle: globalTokens.type_normal,
490
567
  copyrightFontWeight: globalTokens.type_regular,
491
- copyrightFontColor: globalTokens.white,
492
- logo: _dxc_logo["default"],
568
+ copyrightFontColor: globalTokens.hal_white,
569
+ logo: _Icons2["default"],
493
570
  logoHeight: "32px",
494
571
  logoWidth: "auto",
495
572
  socialLinksSize: "24px",
496
573
  socialLinksGutter: "16px",
497
- socialLinksColor: globalTokens.white
574
+ socialLinksColor: globalTokens.hal_white
498
575
  },
499
576
  header: {
500
- backgroundColor: globalTokens.white,
501
- customContentFontFamily: globalTokens.type_sans,
502
- customContentFontStyle: globalTokens.type_normal,
503
- customContentFontColor: globalTokens.black,
504
- customContentFontSize: globalTokens.type_scale_root,
505
- customContentFontWeight: globalTokens.type_regular,
506
- hamburguerFocusColor: globalTokens.blue,
577
+ backgroundColor: globalTokens.hal_white,
578
+ hamburguerFocusColor: globalTokens.hal_blue_l_50,
507
579
  hamburguerFontFamily: globalTokens.type_sans,
508
580
  hamburguerFontStyle: globalTokens.type_normal,
509
- hamburguerFontColor: globalTokens.black,
510
- hamburguerFontSize: globalTokens.fontSize10,
581
+ hamburguerFontColor: globalTokens.hal_black,
582
+ hamburguerFontSize: "10px",
511
583
  hamburguerFontWeight: globalTokens.type_semibold,
512
584
  hamburguerTextTransform: globalTokens.type_uppercase,
513
- hamburguerIconColor: globalTokens.black,
585
+ hamburguerIconColor: globalTokens.hal_black,
514
586
  hamburguerHoverColor: globalTokens.mediumGreyBlack,
515
- logo: _dxc_logo_black["default"],
516
- logoResponsive: _dxc_logo_black["default"],
587
+ logo: _Icons.dxcLogo,
588
+ logoResponsive: _Icons.dxcLogo,
517
589
  logoHeight: "40px",
518
590
  logoWidth: "auto",
519
- menuBackgroundColor: globalTokens.white,
591
+ menuBackgroundColor: globalTokens.hal_white,
520
592
  menuZindex: "2000",
521
593
  menuTabletWidth: "60vw",
522
594
  menuMobileWidth: "100vw",
523
- menuCustomContentFontFamily: globalTokens.type_sans,
524
- menuCustomContentFontStyle: globalTokens.type_normal,
525
- menuCustomContentFontColor: globalTokens.black,
526
- menuCustomContentFontSize: globalTokens.type_scale_root,
527
- menuCustomContentFontWeight: globalTokens.type_regular,
528
595
  minHeight: "64px",
529
596
  overlayColor: globalTokens.softBlack,
530
597
  overlayOpacity: "0.7",
@@ -533,9 +600,11 @@ var componentTokens = {
533
600
  paddingBottom: "0px",
534
601
  paddingRight: "24px",
535
602
  paddingLeft: "24px",
536
- underlinedColor: globalTokens.black,
603
+ underlinedColor: globalTokens.hal_black,
537
604
  underlinedThickness: "2px",
538
- underlinedStyle: "solid"
605
+ underlinedStyle: "solid",
606
+ contentColor: globalTokens.hal_black,
607
+ contentColorOnDark: globalTokens.hal_white
539
608
  },
540
609
  heading: {
541
610
  level1FontColor: globalTokens.inherit,
@@ -584,7 +653,7 @@ var componentTokens = {
584
653
  disabledColor: globalTokens.lighterBlack,
585
654
  disabledColorOnDark: "#575757",
586
655
  errorColor: globalTokens.red,
587
- errorColorOnDark: "#FE344F",
656
+ errorColorOnDark: globalTokens.hal_red_l_60,
588
657
  optionBackgroundColor: globalTokens.white,
589
658
  optionBorderColor: globalTokens.black,
590
659
  optionBorderThickness: "0px",
@@ -633,7 +702,7 @@ var componentTokens = {
633
702
  underlineFocusColorOnDark: globalTokens.white,
634
703
  underlineThickness: "1px"
635
704
  },
636
- newInputText: {
705
+ textInput: {
637
706
  fontFamily: globalTokens.type_sans,
638
707
  enabledBorderColor: globalTokens.hal_black,
639
708
  enabledBorderColorOnDark: globalTokens.hal_white,
@@ -647,8 +716,10 @@ var componentTokens = {
647
716
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
648
717
  errorBorderColor: globalTokens.hal_red_s_41,
649
718
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
650
- hoverErrorBorderColor: "#fe0123",
719
+ hoverErrorBorderColor: globalTokens.color_red_600,
651
720
  hoverErrorBorderColorOnDark: "#fe677b",
721
+ inputMarginTop: globalTokens.spacing_02,
722
+ inputMarginBottom: globalTokens.spacing_02,
652
723
  errorMessageColor: globalTokens.hal_red_s_41,
653
724
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
654
725
  errorIconColor: globalTokens.hal_red_s_41,
@@ -658,6 +729,7 @@ var componentTokens = {
658
729
  labelFontSize: globalTokens.type_scale_02,
659
730
  labelFontStyle: globalTokens.type_normal,
660
731
  labelFontWeight: globalTokens.type_semibold,
732
+ labelLineHeight: globalTokens.type_leading_loose_01,
661
733
  disabledLabelFontColor: globalTokens.hal_grey_l_60,
662
734
  disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
663
735
  optionalLabelFontWeight: globalTokens.type_regular,
@@ -666,6 +738,7 @@ var componentTokens = {
666
738
  helperTextFontSize: globalTokens.type_scale_01,
667
739
  helperTextFontStyle: globalTokens.type_normal,
668
740
  helperTextFontWeight: globalTokens.type_regular,
741
+ helperTextLineHeight: globalTokens.type_leading_normal,
669
742
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
670
743
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
671
744
  prefixColor: globalTokens.hal_grey_s_40,
@@ -674,9 +747,9 @@ var componentTokens = {
674
747
  suffixColorOnDark: globalTokens.hal_white,
675
748
  disabledPrefixColor: globalTokens.hal_grey_l_75,
676
749
  disabledSuffixColor: globalTokens.hal_grey_l_75,
677
- disabledPrefixColorOnDark: globalTokens.hal_grey_s_40,
678
- disabledSuffixColorOnDark: globalTokens.hal_grey_s_40,
679
- placeholderFontColor: "#808080",
750
+ disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
751
+ disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
752
+ placeholderFontColor: "#000000b3",
680
753
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
681
754
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
682
755
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -707,18 +780,23 @@ var componentTokens = {
707
780
  focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
708
781
  activeActionBackgroundColor: globalTokens.hal_grey_l_80,
709
782
  activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
783
+ listDialogBackgroundColor: globalTokens.hal_white,
784
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
785
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
710
786
  listOptionFontColor: globalTokens.hal_black,
711
- listOptionFontSize: globalTokens.type_scale_03,
787
+ listOptionFontSize: globalTokens.type_scale_02,
712
788
  listOptionFontStyle: globalTokens.type_normal,
713
789
  listOptionFontWeight: globalTokens.type_regular,
714
790
  systemMessageFontColor: globalTokens.hal_grey_s_40,
715
- errorMessageBorderColor: globalTokens.hal_red_s_41,
716
- errorMessageBackgroundColor: globalTokens.hal_red_l_95,
791
+ errorListDialogFontColor: globalTokens.hal_black,
792
+ errorListDialogBackgroundColor: globalTokens.color_red_50,
793
+ errorListDialogBorderColor: globalTokens.hal_red_s_41,
717
794
  hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
718
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
795
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
796
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50
719
797
  },
720
798
  link: {
721
- fontColor: globalTokens.mediumBlue,
799
+ fontColor: globalTokens.hal_blue_s_35,
722
800
  fontFamily: globalTokens.inherit,
723
801
  fontSize: globalTokens.type_scale_root,
724
802
  fontStyle: globalTokens.type_normal,
@@ -729,17 +807,17 @@ var componentTokens = {
729
807
  underlineStyle: "solid",
730
808
  underlineThickness: "1px",
731
809
  disabledColor: globalTokens.lightGrey,
732
- hoverFontColor: globalTokens.mediumBlue,
733
- hoverUnderlineColor: globalTokens.mediumBlue,
810
+ hoverFontColor: globalTokens.hal_blue_s_35,
811
+ hoverUnderlineColor: globalTokens.hal_blue_s_35,
734
812
  visitedFontColor: globalTokens.purple,
735
813
  visitedUnderlineColor: globalTokens.purple,
736
814
  activeFontColor: globalTokens.black,
737
815
  activeUnderlineColor: globalTokens.black,
738
- focusColor: globalTokens.mediumBlue
816
+ focusColor: globalTokens.hal_blue_l_50
739
817
  },
740
818
  paginator: {
741
819
  backgroundColor: globalTokens.darkWhite,
742
- fontColor: globalTokens.black,
820
+ fontColor: globalTokens.hal_black,
743
821
  fontFamily: globalTokens.type_sans,
744
822
  fontSize: globalTokens.type_scale_02,
745
823
  fontStyle: globalTokens.type_normal,
@@ -757,20 +835,29 @@ var componentTokens = {
757
835
  totalItemsContainerMarginLeft: "0px"
758
836
  },
759
837
  progressBar: {
760
- trackLineColor: globalTokens.purple,
838
+ trackLineColor: globalTokens.hal_purple_s_38,
839
+ trackLineColorOnDark: globalTokens.hal_purple_l_65,
761
840
  totalLineColor: globalTokens.softGrey,
762
841
  labelFontFamily: globalTokens.type_sans,
763
842
  labelFontSize: globalTokens.type_scale_01,
764
843
  labelFontStyle: globalTokens.type_normal,
765
844
  labelFontWeight: globalTokens.type_regular,
766
845
  labelFontColor: globalTokens.black,
846
+ labelFontColorOnDark: globalTokens.hal_white,
767
847
  labelFontTextTransform: globalTokens.type_uppercase,
768
848
  valueFontFamily: globalTokens.type_sans,
769
849
  valueFontSize: globalTokens.type_scale_01,
770
850
  valueFontStyle: globalTokens.type_normal,
771
851
  valueFontWeight: globalTokens.type_regular,
772
852
  valueFontColor: globalTokens.black,
853
+ valueFontColorOnDark: globalTokens.hal_white,
773
854
  valueFontTextTransform: globalTokens.type_uppercase,
855
+ helperTextFontColor: globalTokens.black,
856
+ helperTextFontColorOnDark: globalTokens.hal_white,
857
+ helperTextFontSize: globalTokens.type_scale_01,
858
+ helperTextFontStyle: globalTokens.type_normal,
859
+ helperTextFontWeight: globalTokens.type_regular,
860
+ helperTextFontFamily: globalTokens.type_sans,
774
861
  thickness: "9px",
775
862
  borderRadius: "5px",
776
863
  overlayColor: globalTokens.black,
@@ -785,7 +872,7 @@ var componentTokens = {
785
872
  disabledColorOnDark: "#575757",
786
873
  disabledFontColor: globalTokens.lighterBlack,
787
874
  disabledFontColorOnDark: "#575757",
788
- focusColor: globalTokens.blue,
875
+ focusColor: globalTokens.hal_blue_l_50,
789
876
  focusColorOnDark: "#1682FF",
790
877
  fontColor: globalTokens.inherit,
791
878
  fontColorOnDark: globalTokens.white,
@@ -796,198 +883,298 @@ var componentTokens = {
796
883
  },
797
884
  select: {
798
885
  fontFamily: globalTokens.type_sans,
799
- assistiveTextFontColor: globalTokens.black,
800
- assistiveTextFontColorOnDark: globalTokens.white,
886
+ disabledColor: globalTokens.hal_grey_l_60,
887
+ enabledInputBorderColor: globalTokens.hal_black,
888
+ hoverInputBorderColor: globalTokens.hal_purple_l_65,
889
+ focusInputBorderColor: globalTokens.hal_blue_l_50,
890
+ errorInputBorderColor: globalTokens.hal_red_s_41,
891
+ hoverInputErrorBorderColor: globalTokens.color_red_600,
892
+ disabledInputBorderColor: globalTokens.hal_grey_l_60,
893
+ disabledInputBackgroundColor: globalTokens.hal_grey_l_95,
894
+ inputMarginTop: globalTokens.spacing_02,
895
+ inputMarginBottom: globalTokens.spacing_02,
896
+ errorMessageColor: globalTokens.hal_red_s_41,
897
+ errorIconColor: globalTokens.hal_red_s_41,
898
+ labelFontColor: globalTokens.hal_black,
899
+ labelFontSize: globalTokens.type_scale_02,
900
+ labelFontStyle: globalTokens.type_normal,
901
+ labelFontWeight: globalTokens.type_semibold,
902
+ labelLineHeight: globalTokens.type_leading_loose_01,
903
+ optionalLabelFontWeight: globalTokens.type_regular,
904
+ helperTextFontColor: globalTokens.hal_black,
905
+ helperTextFontSize: globalTokens.type_scale_01,
906
+ helperTextFontStyle: globalTokens.type_normal,
907
+ helperTextFontWeight: globalTokens.type_regular,
908
+ helperTextLineHeight: globalTokens.type_leading_normal,
909
+ placeholderFontColor: "#000000b3",
910
+ valueFontColor: globalTokens.hal_black,
911
+ valueFontSize: globalTokens.type_scale_03,
912
+ valueFontStyle: globalTokens.type_normal,
913
+ valueFontWeight: globalTokens.type_regular,
914
+ actionIconColor: globalTokens.hal_black,
915
+ hoverActionIconColor: globalTokens.hal_black,
916
+ activeActionIconColor: globalTokens.hal_black,
917
+ actionBackgroundColor: globalTokens.transparent,
918
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
919
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
920
+ listOptionFontColor: globalTokens.hal_black,
921
+ listOptionFontSize: globalTokens.type_scale_02,
922
+ listOptionFontStyle: globalTokens.type_normal,
923
+ listOptionFontWeight: globalTokens.type_regular,
924
+ listOptionIconColor: globalTokens.hal_black,
925
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
926
+ listGroupLabelFontWeight: globalTokens.type_semibold,
927
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50,
928
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
929
+ collapseIndicatorColor: globalTokens.hal_black,
930
+ listDialogBackgroundColor: globalTokens.hal_white,
931
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
932
+ selectedListOptionBackgroundColor: globalTokens.hal_blue_l_95,
933
+ selectedHoverListOptionBackgroundColor: globalTokens.color_blue_200,
934
+ selectedActiveListOptionBackgroundColor: globalTokens.hal_blue_l_80,
935
+ selectedListOptionIconColor: globalTokens.hal_blue_d_20,
936
+ unselectedHoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
937
+ unselectedActiveListOptionBackgroundColor: globalTokens.hal_grey_l_90,
938
+ selectionIndicatorFontColor: globalTokens.hal_black,
939
+ selectionIndicatorFontSize: globalTokens.type_scale_01,
940
+ selectionIndicatorFontStyle: globalTokens.type_regular,
941
+ selectionIndicatorFontWeight: globalTokens.type_normal,
942
+ selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
943
+ selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
944
+ enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
945
+ enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
946
+ hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
947
+ hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
948
+ activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
949
+ activeSelectionIndicatorActionIconColor: globalTokens.hal_black
950
+ },
951
+ V3Select: {
952
+ fontFamily: globalTokens.type_sans,
953
+ assistiveTextFontColor: globalTokens.hal_black,
954
+ assistiveTextFontColorOnDark: globalTokens.hal_white,
801
955
  assistiveTextFontSize: globalTokens.type_scale_01,
802
956
  assistiveTextFontStyle: globalTokens.type_normal,
803
957
  assistiveTextFontWeight: globalTokens.type_regular,
804
- labelFontColor: globalTokens.black,
805
- labelFontColorOnDark: globalTokens.white,
958
+ labelFontColor: globalTokens.hal_black,
959
+ labelFontColorOnDark: globalTokens.hal_white,
806
960
  labelFontSize: globalTokens.type_scale_03,
807
961
  labelFontStyle: globalTokens.type_normal,
808
962
  labelFontWeight: globalTokens.type_regular,
809
963
  disabledColor: globalTokens.lighterBlack,
810
964
  disabledColorOnDark: "#575757",
811
965
  errorColor: globalTokens.red,
812
- errorColorOnDark: "#FE344F",
813
- optionBackgroundColor: globalTokens.white,
814
- optionBorderColor: globalTokens.black,
966
+ errorColorOnDark: globalTokens.hal_red_l_60,
967
+ optionBackgroundColor: globalTokens.hal_white,
968
+ optionBorderColor: globalTokens.hal_black,
815
969
  optionBorderThickness: "0px",
816
970
  optionBorderStyle: "solid",
817
- optionFontColor: globalTokens.black,
818
- optionFontColorOnDark: globalTokens.white,
971
+ optionFontColor: globalTokens.hal_black,
972
+ optionFontColorOnDark: globalTokens.hal_white,
819
973
  optionFontSize: globalTokens.type_scale_root,
820
974
  optionFontStyle: globalTokens.type_normal,
821
975
  optionFontWeight: globalTokens.type_regular,
822
976
  optionPaddingBottom: "6px",
823
977
  optionPaddingTop: "6px",
824
- scrollBarThumbColor: globalTokens.darkGrey,
978
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
825
979
  scrollBarTrackColor: globalTokens.lightGrey,
826
- optionIconColor: globalTokens.black,
827
- optionIconColorOnDark: globalTokens.white,
980
+ optionIconColor: globalTokens.hal_black,
981
+ optionIconColorOnDark: globalTokens.hal_white,
828
982
  optionIconSpacing: "12px",
829
983
  optionIconSize: "20px",
830
984
  optionCheckboxSpacing: "12px",
831
- hoverOptionBackgroundColor: globalTokens.lightWhite,
832
- hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
985
+ hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
986
+ hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
987
+ activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
988
+ activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
833
989
  selectedOptionBackgroundColor: globalTokens.lightGrey,
834
990
  selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
835
- underlineColor: globalTokens.black,
836
- underlineColorOnDark: globalTokens.white,
837
- underlineFocusColor: globalTokens.black,
838
- underlineFocusColorOnDark: globalTokens.white,
991
+ underlineColor: globalTokens.hal_black,
992
+ underlineColorOnDark: globalTokens.hal_white,
993
+ underlineFocusColor: globalTokens.hal_black,
994
+ underlineFocusColorOnDark: globalTokens.hal_white,
839
995
  underlineThickness: "1px",
840
- valueFontColor: globalTokens.black,
841
- valueFontColorOnDark: globalTokens.white,
996
+ valueFontColor: globalTokens.hal_black,
997
+ valueFontColorOnDark: globalTokens.hal_white,
842
998
  valueFontSize: globalTokens.type_scale_03,
843
999
  valueFontStyle: globalTokens.type_normal,
844
1000
  valueFontWeight: globalTokens.type_regular,
845
- arrowColor: globalTokens.black,
846
- arrowColorOnDark: globalTokens.white,
847
- focusColor: globalTokens.blue,
848
- focusColorOnDark: "#1682FF"
1001
+ valueIconColor: globalTokens.hal_black,
1002
+ valueIconColorOnDark: globalTokens.hal_white,
1003
+ valueIconSize: "20px",
1004
+ valueIconSpacing: "12px",
1005
+ arrowColor: globalTokens.hal_black,
1006
+ arrowColorOnDark: globalTokens.hal_white,
1007
+ focusColor: globalTokens.hal_blue_l_50,
1008
+ focusColorOnDark: globalTokens.hal_blue_l_50
849
1009
  },
850
1010
  sidenav: {
851
- backgroundColor: globalTokens.lighterGrey,
852
- arrowContainerColor: globalTokens.lightGrey,
853
- arrowColor: globalTokens.black,
1011
+ backgroundColor: globalTokens.hal_grey_l_95,
1012
+ arrowContainerColor: globalTokens.hal_grey_l_90,
1013
+ arrowColor: globalTokens.hal_black,
854
1014
  titleFontFamily: globalTokens.type_sans,
855
1015
  titleFontSize: globalTokens.type_scale_05,
856
1016
  titleFontStyle: globalTokens.type_normal,
857
1017
  titleFontWeight: globalTokens.type_regular,
858
- titleFontColor: "#000000de",
1018
+ titleFontColor: globalTokens.hal_black,
859
1019
  titleFontTextTransform: "none",
860
1020
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
861
1021
  subtitleFontFamily: globalTokens.type_sans,
862
- subtitleFontSize: globalTokens.type_scale_01,
1022
+ subtitleFontSize: globalTokens.type_scale_03,
863
1023
  subtitleFontStyle: globalTokens.type_normal,
864
1024
  subtitleFontWeight: globalTokens.type_regular,
865
- subtitleFontColor: "#00000099",
1025
+ subtitleFontColor: globalTokens.color_grey_800,
866
1026
  subtitleFontTextTransform: globalTokens.type_uppercase,
867
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_03,
1027
+ subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
868
1028
  linkFontFamily: globalTokens.type_sans,
869
1029
  linkFontSize: globalTokens.type_scale_02,
870
1030
  linkFontStyle: globalTokens.type_normal,
871
1031
  linkFontWeight: globalTokens.type_regular,
872
- linkFontColor: "#00000099",
1032
+ linkFontColor: globalTokens.color_grey_800,
873
1033
  linkFontTextTransform: "none",
874
1034
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
875
1035
  linkTextDecoration: globalTokens.type_no_line,
876
- linkMarginTop: "6px",
877
- linkMarginRight: "18px",
878
- linkMarginBottom: "6px",
879
- linkMarginLeft: "18px",
1036
+ linkMarginTop: "4px",
1037
+ linkMarginBottom: "4px",
1038
+ linkMarginRight: "16px",
1039
+ linkMarginLeft: "16px",
1040
+ linkFocusColor: globalTokens.hal_blue_l_50,
880
1041
  scrollBarThumbColor: "#66666626",
881
1042
  scrollBarTrackColor: globalTokens.transparent
882
1043
  },
883
1044
  slider: {
884
1045
  fontFamily: globalTokens.type_sans,
885
- fontSize: globalTokens.type_scale_03,
886
- fontStyle: globalTokens.type_normal,
887
- fontWeight: globalTokens.type_regular,
888
- fontColor: globalTokens.black,
889
- fontColorOnDark: globalTokens.white,
890
- fontLetterSpacing: globalTokens.type_spacing_normal,
891
- thumbHeight: "20px",
892
- thumbWidth: "20px",
893
- thumbVerticalPosition: "32.5%",
894
- thumbBackgroundColor: globalTokens.mediumBlue,
895
- thumbBackgroundColorOnDark: globalTokens.white,
896
- draggedThumbScale: "1",
897
- draggedThumbBackgroundColor: globalTokens.mediumBlue,
898
- draggedThumbBackgroundColorOnDark: "#0095FF",
899
- dotsHeight: "6px",
900
- dotsWidth: "6px",
901
- dotsVerticalPosition: "42%",
902
- dotsBackgroundColor: globalTokens.mediumBlue,
903
- dotsBackgroundColorOnDark: globalTokens.white,
1046
+ limitValuesFontColor: globalTokens.hal_black,
1047
+ limitValuesFontColorOnDark: globalTokens.hal_white,
1048
+ limitValuesFontSize: globalTokens.type_scale_03,
1049
+ limitValuesFontStyle: globalTokens.type_normal,
1050
+ limitValuesFontWeight: globalTokens.type_regular,
1051
+ limitValuesFontLetterSpacing: globalTokens.type_spacing_normal,
1052
+ disabledLimitValuesFontColor: globalTokens.hal_grey_l_60,
1053
+ labelFontFamily: globalTokens.type_sans,
1054
+ labelFontSize: globalTokens.type_scale_02,
1055
+ labelFontStyle: globalTokens.type_normal,
1056
+ labelFontWeight: globalTokens.type_semibold,
1057
+ labelLineHeight: globalTokens.type_leading_loose_01,
1058
+ helperTextFontFamily: globalTokens.type_sans,
1059
+ helperTextFontSize: globalTokens.type_scale_01,
1060
+ helperTextFontStyle: globalTokens.type_normal,
1061
+ helperTextFontWeight: globalTokens.type_regular,
1062
+ helperTextLineHeight: globalTokens.type_leading_normal,
1063
+ fontColor: globalTokens.hal_black,
1064
+ fontColorOnDark: globalTokens.hal_white,
1065
+ labelFontColor: globalTokens.hal_black,
1066
+ labelFontColorOnDark: globalTokens.hal_white,
1067
+ helperTextFontColor: globalTokens.hal_black,
1068
+ helperTextFontColorOnDark: globalTokens.hal_white,
1069
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1070
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1071
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1072
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1073
+ thumbHeight: "12px",
1074
+ thumbWidth: "12px",
1075
+ hoverThumbHeight: "14px",
1076
+ hoverThumbWidth: "14px",
1077
+ thumbVerticalPosition: "12px",
1078
+ hoverThumbVerticalPosition: "11px",
1079
+ thumbBackgroundColor: globalTokens.hal_blue_s_35,
1080
+ thumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1081
+ hoverThumbScale: "1.166666",
1082
+ hoverThumbBackgroundColor: globalTokens.hal_blue_d_20,
1083
+ hoverThumbBackgroundColorOnDark: globalTokens.hal_blue_d_20,
1084
+ activeThumbScale: "1.166666",
1085
+ activeThumbBackgroundColor: globalTokens.hal_blue_d_20,
1086
+ activeThumbBackgroundColorOnDark: globalTokens.hal_blue_d_20,
1087
+ focusThumbBackgroundColor: globalTokens.hal_blue_s_35,
1088
+ focusThumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1089
+ tickHeight: "4px",
1090
+ tickWidth: "4px",
1091
+ tickVerticalPosition: "11px",
1092
+ tickBackgroundColor: globalTokens.hal_blue_s_35,
1093
+ tickBackgroundColorOnDark: globalTokens.hal_blue_l_50,
904
1094
  trackLineThickness: "2px",
905
1095
  trackLineVerticalPosition: "50%",
906
- trackLineColor: globalTokens.mediumBlue,
907
- trackLineOnDark: globalTokens.white,
1096
+ trackLineColor: globalTokens.hal_blue_s_35,
1097
+ trackLineColorOnDark: globalTokens.hal_blue_l_50,
908
1098
  totalLineThickness: "2px",
909
1099
  totalLineVerticalPosition: "50%",
910
- totalLineColor: globalTokens.softBlue,
911
- totalLineOnDark: globalTokens.white,
912
- disabledThumbVerticalPosition: "24%",
913
- disabledThumbBackgroundColor: globalTokens.softBlue,
1100
+ totalLineColor: globalTokens.hal_grey_l_90,
1101
+ totalLineColorOnDark: globalTokens.hal_grey_l_75,
1102
+ disabledThumbVerticalPosition: "10px",
1103
+ disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
914
1104
  disabledThumbBackgroundColorOnDark: "#575757",
915
- disabledDotsVerticalPosition: "42%",
916
- disabledDotsBackgroundColor: globalTokens.softBlue,
917
- disabledDotsBackgroundColorOnDark: "#575757",
918
- disabledTrackLineColor: globalTokens.softBlue,
919
- disabledTrackLineOnDark: "#575757",
920
- disabledTotalLineColor: globalTokens.softBlue,
921
- disabledTotalLineColorOnDark: "#575757",
922
- focusColor: globalTokens.blue,
923
- focusColorOnDark: "#1682FF"
1105
+ disabledTickVerticalPosition: "11px",
1106
+ disabledTickBackgroundColor: globalTokens.hal_grey_l_60,
1107
+ disabledTickBackgroundColorOnDark: globalTokens.hal_grey_l_60,
1108
+ disabledTrackLineColor: globalTokens.hal_grey_l_60,
1109
+ disabledTrackLineColorOnDark: globalTokens.hal_grey_l_60,
1110
+ disabledTotalLineColor: globalTokens.hal_grey_l_95,
1111
+ disabledTotalLineColorOnDark: globalTokens.hal_grey_s_40,
1112
+ focusColor: globalTokens.hal_blue_l_50,
1113
+ focusColorOnDark: globalTokens.hal_blue_l_50,
1114
+ floorLabelMarginRight: globalTokens.type_scale_03,
1115
+ ceilLabelMarginLeft: globalTokens.type_scale_03,
1116
+ inputMarginLeft: globalTokens.type_scale_06
924
1117
  },
925
1118
  spinner: {
926
1119
  trackCircleColor: "#5f249f",
927
1120
  trackCircleColorOnDark: "#a46ede",
928
1121
  totalCircleColor: globalTokens.white,
929
1122
  labelFontFamily: globalTokens.type_sans,
930
- labelFontSize: globalTokens.type_scale_01,
1123
+ labelFontSize: globalTokens.type_scale_02,
931
1124
  labelFontStyle: globalTokens.type_normal,
932
1125
  labelFontWeight: globalTokens.type_regular,
933
1126
  labelFontColor: globalTokens.black,
934
1127
  labelFontColorOnDark: globalTokens.white,
935
- labelFontTextTransform: globalTokens.type_uppercase,
936
- labelLetterSpacing: globalTokens.type_spacing_normal,
937
1128
  labelTextAlign: "center",
938
1129
  progressValueFontFamily: globalTokens.type_sans,
939
- progressValueFontSize: globalTokens.type_scale_01,
1130
+ progressValueFontSize: globalTokens.type_scale_02,
940
1131
  progressValueFontStyle: globalTokens.type_normal,
941
1132
  progressValueFontWeight: globalTokens.type_bold,
942
1133
  progressValueFontColor: globalTokens.inherit,
943
1134
  progressValueFontColorOnDark: globalTokens.white,
944
- progressValueLetterSpacing: globalTokens.type_spacing_normal,
945
1135
  progressValueTextAlign: "center",
946
1136
  overlayBackgroundColor: globalTokens.black,
947
1137
  overlayOpacity: "0.8",
948
1138
  overlayLabelFontFamily: globalTokens.type_sans,
949
- overlayLabelFontSize: globalTokens.type_scale_01,
1139
+ overlayLabelFontSize: globalTokens.type_scale_02,
950
1140
  overlayLabelFontStyle: globalTokens.type_normal,
951
1141
  overlayLabelFontWeight: globalTokens.type_regular,
952
1142
  overlayLabelFontColor: globalTokens.white,
953
- overlayLabelFontTextTransform: globalTokens.type_uppercase,
954
- overlayLabelLetterSpacing: globalTokens.type_spacing_normal,
955
1143
  overlayLabelTextAlign: "center",
956
1144
  overlayProgressValueFontFamily: globalTokens.type_sans,
957
- overlayProgressValueFontSize: globalTokens.type_scale_01,
1145
+ overlayProgressValueFontSize: globalTokens.type_scale_02,
958
1146
  overlayProgressValueFontStyle: globalTokens.type_normal,
959
1147
  overlayProgressValueFontWeight: globalTokens.type_bold,
960
1148
  overlayProgressValueFontColor: globalTokens.white,
961
- overlayProgressValueLetterSpacing: globalTokens.type_spacing_normal,
962
1149
  overlayProgressValueTextAlign: "center"
963
1150
  },
964
1151
  "switch": {
965
- checkedTrackBackgroundColor: globalTokens.purple,
966
- checkedTrackBackgroundColorOnDark: globalTokens.purple,
967
- checkedThumbBackgroundColor: globalTokens.white,
968
- checkedThumbBackgroundColorOnDark: globalTokens.white,
969
- uncheckedTrackBackgroundColor: globalTokens.lightGrey,
970
- uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
971
- uncheckedThumbBackgroundColor: globalTokens.white,
972
- uncheckedThumbBackgroundColorOnDark: globalTokens.white,
973
- disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
1152
+ checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1153
+ checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
1154
+ checkedThumbBackgroundColor: globalTokens.hal_white,
1155
+ checkedThumbBackgroundColorOnDark: globalTokens.hal_white,
1156
+ uncheckedTrackBackgroundColor: globalTokens.hal_grey_l_75,
1157
+ uncheckedTrackBackgroundColorOnDark: globalTokens.hal_grey_l_75,
1158
+ uncheckedThumbBackgroundColor: globalTokens.hal_white,
1159
+ uncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1160
+ disabledCheckedTrackBackgroundColor: globalTokens.hal_purple_l_95,
974
1161
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
975
- disabledCheckedThumbBackgroundColor: globalTokens.white,
976
- disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
977
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
1162
+ disabledCheckedThumbBackgroundColor: globalTokens.hal_white,
1163
+ disabledCheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1164
+ disabledUncheckedTrackBackgroundColor: globalTokens.hal_grey_l_95,
978
1165
  disabledUncheckedTrackBackgroundColorOnDark: "#363636",
979
- disabledUncheckedThumbBackgroundColor: globalTokens.white,
980
- disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
981
- disabledLabelFontColor: globalTokens.lighterBlack,
1166
+ disabledUncheckedThumbBackgroundColor: globalTokens.hal_white,
1167
+ disabledUncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1168
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
982
1169
  disabledLabelFontColorOnDark: "#575757",
983
1170
  disabledLabelFontStyle: globalTokens.type_normal,
984
1171
  labelFontFamily: globalTokens.type_sans,
985
1172
  labelFontSize: globalTokens.type_scale_root,
986
1173
  labelFontStyle: globalTokens.type_normal,
987
1174
  labelFontWeight: globalTokens.type_regular,
988
- labelFontColor: globalTokens.black,
989
- labelFontColorOnDark: globalTokens.white,
990
- thumbFocusColor: globalTokens.blue,
1175
+ labelFontColor: globalTokens.hal_black,
1176
+ labelFontColorOnDark: globalTokens.hal_white,
1177
+ thumbFocusColor: globalTokens.hal_blue_l_50,
991
1178
  thumbFocusColorOnDark: "#1682FF",
992
1179
  thumbHeight: "24px",
993
1180
  thumbWidth: "24px",
@@ -998,16 +1185,20 @@ var componentTokens = {
998
1185
  },
999
1186
  tag: {
1000
1187
  fontFamily: globalTokens.type_sans,
1001
- fontColor: globalTokens.black,
1188
+ fontColor: globalTokens.hal_black,
1002
1189
  fontSize: globalTokens.type_scale_02,
1003
1190
  fontStyle: globalTokens.type_normal,
1004
1191
  fontWeight: globalTokens.type_regular,
1005
- fontTextTransform: globalTokens.type_uppercase,
1006
- height: "43px",
1007
- iconColor: globalTokens.white,
1008
- iconSectionWidth: "48px",
1192
+ labelPaddingTop: "0px",
1193
+ labelPaddingBottom: "0px",
1194
+ labelPaddingLeft: "16px",
1195
+ labelPaddingRight: "16px",
1196
+ height: "40px",
1197
+ iconColor: globalTokens.hal_white,
1198
+ iconSectionWidth: "40px",
1009
1199
  iconHeight: "24px",
1010
- iconWidth: "auto"
1200
+ iconWidth: "auto",
1201
+ focusColor: globalTokens.hal_blue_l_50
1011
1202
  },
1012
1203
  table: {
1013
1204
  rowSeparatorThickness: "1px",
@@ -1015,7 +1206,7 @@ var componentTokens = {
1015
1206
  rowSeparatorColor: globalTokens.lightGrey,
1016
1207
  dataBackgroundColor: globalTokens.white,
1017
1208
  dataFontFamily: globalTokens.type_sans,
1018
- dataFontSize: globalTokens.type_scale_root,
1209
+ dataFontSize: globalTokens.type_scale_02,
1019
1210
  dataFontStyle: globalTokens.type_normal,
1020
1211
  dataFontWeight: globalTokens.type_regular,
1021
1212
  dataFontColor: globalTokens.black,
@@ -1026,7 +1217,7 @@ var componentTokens = {
1026
1217
  dataPaddingLeft: "40px",
1027
1218
  dataTextAlign: "left",
1028
1219
  dataTextLineHeight: "normal",
1029
- headerBackgroundColor: globalTokens.purple,
1220
+ headerBackgroundColor: globalTokens.hal_purple_s_38,
1030
1221
  headerBorderRadius: "4px",
1031
1222
  headerFontFamily: globalTokens.type_sans,
1032
1223
  headerFontSize: globalTokens.type_scale_02,
@@ -1083,41 +1274,6 @@ var componentTokens = {
1083
1274
  badgeRadiusWithNotificationNumber: "10px"
1084
1275
  },
1085
1276
  textarea: {
1086
- fontFamily: globalTokens.type_sans,
1087
- assistiveTextFontSize: globalTokens.type_scale_01,
1088
- assistiveTextFontStyle: globalTokens.type_normal,
1089
- assistiveTextFontWeight: globalTokens.type_regular,
1090
- assistiveTextFontColor: globalTokens.black,
1091
- assistiveTextFontColorOnDark: globalTokens.white,
1092
- assistiveTextLetterSpacing: "0.03333em",
1093
- disabledColor: globalTokens.lighterBlack,
1094
- disabledColorOnDark: "#575757",
1095
- errorColor: globalTokens.red,
1096
- errorColorOnDark: "#FE344F",
1097
- scrollBarThumbColor: globalTokens.darkGrey,
1098
- scrollBarThumbColorOnDark: globalTokens.white,
1099
- scrollBarTrackColor: globalTokens.lightGrey,
1100
- scrollBarTrackColorOnDark: "#999999",
1101
- labelFontSize: globalTokens.type_scale_03,
1102
- labelFontStyle: globalTokens.type_normal,
1103
- labelFontWeight: globalTokens.type_regular,
1104
- labelFontColor: globalTokens.black,
1105
- labelFontColorOnDark: globalTokens.white,
1106
- labelLetterSpacing: "0.00938em",
1107
- valueFontSize: globalTokens.type_scale_03,
1108
- valueFontStyle: globalTokens.type_normal,
1109
- valueFontWeight: globalTokens.type_regular,
1110
- valueFontColor: globalTokens.black,
1111
- valueFontColorOnDark: globalTokens.white,
1112
- valueLetterSpacing: globalTokens.type_spacing_normal,
1113
- valueLineHeight: "1.1875em",
1114
- underlineColor: globalTokens.black,
1115
- underlineColorOnDark: globalTokens.white,
1116
- underlineFocusColor: globalTokens.black,
1117
- underlineFocusColorOnDark: globalTokens.white,
1118
- underlineThickness: "1px"
1119
- },
1120
- newTextarea: {
1121
1277
  fontFamily: globalTokens.type_sans,
1122
1278
  enabledBorderColor: globalTokens.hal_black,
1123
1279
  enabledBorderColorOnDark: globalTokens.hal_white,
@@ -1131,8 +1287,10 @@ var componentTokens = {
1131
1287
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1132
1288
  errorBorderColor: globalTokens.hal_red_s_41,
1133
1289
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
1134
- hoverErrorBorderColor: "#fe0123",
1290
+ hoverErrorBorderColor: globalTokens.color_red_600,
1135
1291
  hoverErrorBorderColorOnDark: "#fe677b",
1292
+ inputMarginTop: globalTokens.spacing_02,
1293
+ inputMarginBottom: globalTokens.spacing_02,
1136
1294
  errorMessageColor: globalTokens.hal_red_s_41,
1137
1295
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
1138
1296
  labelFontColor: globalTokens.hal_black,
@@ -1140,6 +1298,7 @@ var componentTokens = {
1140
1298
  labelFontSize: globalTokens.type_scale_02,
1141
1299
  labelFontStyle: globalTokens.type_normal,
1142
1300
  labelFontWeight: globalTokens.type_semibold,
1301
+ labelLineHeight: globalTokens.type_leading_loose_01,
1143
1302
  disabledLabelFontColor: globalTokens.hal_grey_l_60,
1144
1303
  disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1145
1304
  optionalLabelFontWeight: globalTokens.type_regular,
@@ -1148,9 +1307,10 @@ var componentTokens = {
1148
1307
  helperTextFontSize: globalTokens.type_scale_01,
1149
1308
  helperTextFontStyle: globalTokens.type_normal,
1150
1309
  helperTextFontWeight: globalTokens.type_regular,
1310
+ helperTextLineHeight: globalTokens.type_leading_normal,
1151
1311
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1152
1312
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1153
- placeholderFontColor: "#808080",
1313
+ placeholderFontColor: "#000000b3",
1154
1314
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1155
1315
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1156
1316
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -1162,35 +1322,88 @@ var componentTokens = {
1162
1322
  disabledValueFontColor: globalTokens.hal_grey_l_60,
1163
1323
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1164
1324
  },
1165
- toggleGroup: {
1325
+ V3Textarea: {
1166
1326
  fontFamily: globalTokens.type_sans,
1167
- fontSize: globalTokens.type_scale_02,
1168
- fontStyle: globalTokens.type_normal,
1169
- fontWeight: globalTokens.type_regular,
1170
- fontTextTransform: globalTokens.type_uppercase,
1171
- fontLetterSpacing: globalTokens.type_spacing_wide_02,
1172
- focusColor: globalTokens.blue,
1173
- selectedBackgroundColor: globalTokens.purple,
1174
- selectedHoverBackgroundColor: globalTokens.black,
1175
- selectedFontColor: globalTokens.white,
1176
- selectedHoverFontColor: globalTokens.white,
1177
- unselectedBackgroundColor: globalTokens.lightGrey,
1178
- unselectedHoverBackgroundColor: globalTokens.darkWhite,
1179
- unselectedFontColor: globalTokens.black,
1180
- unselectedHoverFontColor: globalTokens.black,
1181
- disabledSelectedBackgroundColor: globalTokens.lightPurple,
1182
- disabledSelectedFontColor: globalTokens.white,
1183
- disabledUnselectedBackgroundColor: globalTokens.lightWhite,
1184
- disabledUnselectedFontColor: globalTokens.lighterBlack,
1185
- iconSize: "20px",
1186
- iconPaddingTop: "10px",
1187
- iconPaddingBottom: "10px",
1188
- iconPaddingRight: "12px",
1189
- iconPaddingLeft: "12px",
1190
- labelPaddingTop: "12px",
1191
- labelPaddingBottom: "12px",
1192
- labelPaddingLeft: "30px",
1193
- labelPaddingRight: "30px"
1327
+ assistiveTextFontSize: globalTokens.type_scale_01,
1328
+ assistiveTextFontStyle: globalTokens.type_normal,
1329
+ assistiveTextFontWeight: globalTokens.type_regular,
1330
+ assistiveTextFontColor: globalTokens.black,
1331
+ assistiveTextFontColorOnDark: globalTokens.white,
1332
+ assistiveTextLetterSpacing: "0.03333em",
1333
+ disabledColor: globalTokens.lighterBlack,
1334
+ disabledColorOnDark: "#575757",
1335
+ errorColor: globalTokens.red,
1336
+ errorColorOnDark: globalTokens.hal_red_l_60,
1337
+ scrollBarThumbColor: globalTokens.darkGrey,
1338
+ scrollBarThumbColorOnDark: globalTokens.white,
1339
+ scrollBarTrackColor: globalTokens.lightGrey,
1340
+ scrollBarTrackColorOnDark: "#999999",
1341
+ labelFontSize: globalTokens.type_scale_03,
1342
+ labelFontStyle: globalTokens.type_normal,
1343
+ labelFontWeight: globalTokens.type_regular,
1344
+ labelFontColor: globalTokens.black,
1345
+ labelFontColorOnDark: globalTokens.white,
1346
+ labelLetterSpacing: "0.00938em",
1347
+ valueFontSize: globalTokens.type_scale_03,
1348
+ valueFontStyle: globalTokens.type_normal,
1349
+ valueFontWeight: globalTokens.type_regular,
1350
+ valueFontColor: globalTokens.black,
1351
+ valueFontColorOnDark: globalTokens.white,
1352
+ valueLetterSpacing: globalTokens.type_spacing_normal,
1353
+ valueLineHeight: "1.1875em",
1354
+ underlineColor: globalTokens.black,
1355
+ underlineColorOnDark: globalTokens.white,
1356
+ underlineFocusColor: globalTokens.black,
1357
+ underlineFocusColorOnDark: globalTokens.white,
1358
+ underlineThickness: "1px"
1359
+ },
1360
+ toggleGroup: {
1361
+ containerBackgroundColor: globalTokens.color_grey_50,
1362
+ containerBorderColor: globalTokens.hal_grey_l_60,
1363
+ labelFontColor: globalTokens.hal_black,
1364
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1365
+ helperTextFontColor: globalTokens.hal_black,
1366
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
1367
+ unselectedBackgroundColor: globalTokens.hal_grey_l_90,
1368
+ unselectedHoverBackgroundColor: globalTokens.hal_grey_l_80,
1369
+ unselectedActiveBackgroundColor: globalTokens.hal_purple_s_38,
1370
+ unselectedDisabledBackgroundColor: globalTokens.hal_grey_l_95,
1371
+ unselectedFontColor: globalTokens.hal_black,
1372
+ unselectedDisabledFontColor: globalTokens.hal_grey_l_60,
1373
+ selectedBackgroundColor: globalTokens.hal_purple_s_38,
1374
+ selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1375
+ selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1376
+ selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1377
+ selectedFontColor: globalTokens.hal_white,
1378
+ selectedDisabledFontColor: globalTokens.color_purple_300,
1379
+ focusColor: globalTokens.hal_blue_l_50,
1380
+ labelFontFamily: globalTokens.type_sans,
1381
+ labelFontSize: globalTokens.type_scale_02,
1382
+ labelFontStyle: globalTokens.type_normal,
1383
+ labelFontWeight: globalTokens.type_semibold,
1384
+ labelLineHeight: globalTokens.type_leading_loose_01,
1385
+ helperTextFontFamily: globalTokens.type_sans,
1386
+ helperTextFontSize: globalTokens.type_scale_01,
1387
+ helperTextFontStyle: globalTokens.type_normal,
1388
+ helperTextFontWeight: globalTokens.type_regular,
1389
+ helperTextLineHeight: globalTokens.type_leading_normal,
1390
+ optionLabelFontFamily: globalTokens.type_sans,
1391
+ optionLabelFontSize: globalTokens.type_scale_03,
1392
+ optionLabelFontStyle: globalTokens.type_normal,
1393
+ optionLabelFontWeight: globalTokens.type_regular,
1394
+ iconPaddingRight: globalTokens.spacing_03,
1395
+ iconPaddingLeft: globalTokens.spacing_03,
1396
+ labelPaddingLeft: globalTokens.spacing_06,
1397
+ labelPaddingRight: globalTokens.spacing_06,
1398
+ iconMarginRight: globalTokens.spacing_03,
1399
+ containerMarginTop: globalTokens.spacing_02,
1400
+ optionBorderThickness: globalTokens.border_width_0,
1401
+ optionBorderStyle: globalTokens.border_none,
1402
+ optionBorderRadius: globalTokens.border_radius_medium,
1403
+ containerBorderThickness: globalTokens.border_width_1,
1404
+ containerBorderStyle: globalTokens.border_solid,
1405
+ containerBorderRadius: globalTokens.border_radius_large,
1406
+ optionFocusBorderThickness: globalTokens.border_width_2
1194
1407
  },
1195
1408
  upload: {
1196
1409
  fontFamily: globalTokens.type_sans,
@@ -1265,7 +1478,7 @@ var componentTokens = {
1265
1478
  stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1266
1479
  stepContainerFontColor: globalTokens.black,
1267
1480
  stepContainerSelectedFontColor: globalTokens.white,
1268
- stepContainerSelectedBackgroundColor: globalTokens.purple,
1481
+ stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1269
1482
  stepContainerBackgroundColor: globalTokens.white,
1270
1483
  stepContainerIconSize: "19px",
1271
1484
  labelFontSize: globalTokens.type_scale_03,
@@ -1307,7 +1520,7 @@ var componentTokens = {
1307
1520
  separatorBorderThickness: "1px",
1308
1521
  separatorBorderStyle: "solid",
1309
1522
  separatorColor: globalTokens.lightGrey,
1310
- focusColor: globalTokens.blue
1523
+ focusColor: globalTokens.hal_blue_l_50
1311
1524
  }
1312
1525
  };
1313
1526
  exports.componentTokens = componentTokens;