@dxc-technology/halstack-react 0.0.0-bf77201 → 0.0.0-bfeb2b0

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