@dxc-technology/halstack-react 0.0.0-58e75a5 → 0.0.0-58f12a2

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