@dxc-technology/halstack-react 0.0.0-631f025 → 0.0.0-63245f6

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 (467) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/HalstackContext.d.ts +12 -0
  4. package/HalstackContext.js +295 -0
  5. package/accordion/Accordion.d.ts +4 -0
  6. package/accordion/Accordion.js +245 -0
  7. package/accordion/Accordion.stories.tsx +306 -0
  8. package/accordion/Accordion.test.js +71 -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 +149 -0
  13. package/accordion-group/AccordionGroup.stories.tsx +251 -0
  14. package/accordion-group/AccordionGroup.test.js +126 -0
  15. package/accordion-group/types.d.ts +78 -0
  16. package/accordion-group/types.js +5 -0
  17. package/alert/Alert.d.ts +4 -0
  18. package/{dist/alert → alert}/Alert.js +47 -157
  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 +61 -0
  25. package/badge/types.d.ts +5 -0
  26. package/badge/types.js +5 -0
  27. package/bleed/Bleed.d.ts +3 -0
  28. package/bleed/Bleed.js +51 -0
  29. package/bleed/Bleed.stories.tsx +341 -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/box/Box.js +116 -0
  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/bulleted-list/BulletedList.d.ts +7 -0
  39. package/bulleted-list/BulletedList.js +123 -0
  40. package/bulleted-list/BulletedList.stories.tsx +200 -0
  41. package/bulleted-list/types.d.ts +11 -0
  42. package/bulleted-list/types.js +5 -0
  43. package/button/Button.d.ts +4 -0
  44. package/button/Button.js +156 -0
  45. package/button/Button.stories.tsx +283 -0
  46. package/button/Button.test.js +35 -0
  47. package/button/types.d.ts +53 -0
  48. package/button/types.js +5 -0
  49. package/card/Card.d.ts +4 -0
  50. package/card/Card.js +161 -0
  51. package/card/Card.stories.tsx +201 -0
  52. package/card/Card.test.js +50 -0
  53. package/card/ice-cream.jpg +0 -0
  54. package/card/types.d.ts +67 -0
  55. package/card/types.js +5 -0
  56. package/checkbox/Checkbox.d.ts +4 -0
  57. package/checkbox/Checkbox.js +249 -0
  58. package/checkbox/Checkbox.stories.tsx +188 -0
  59. package/checkbox/Checkbox.test.js +155 -0
  60. package/checkbox/types.d.ts +64 -0
  61. package/checkbox/types.js +5 -0
  62. package/chip/Chip.d.ts +4 -0
  63. package/chip/Chip.js +161 -0
  64. package/chip/Chip.stories.tsx +119 -0
  65. package/chip/Chip.test.js +56 -0
  66. package/chip/types.d.ts +45 -0
  67. package/chip/types.js +5 -0
  68. package/{dist/common → common}/OpenSans.css +0 -0
  69. package/{dist/common → common}/RequiredComponent.js +3 -11
  70. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  71. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  72. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  73. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  74. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  75. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  76. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  77. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  78. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  79. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  80. package/{dist/common → common}/utils.js +0 -0
  81. package/{dist/common → common}/variables.js +555 -413
  82. package/date-input/DateInput.d.ts +4 -0
  83. package/date-input/DateInput.js +372 -0
  84. package/date-input/DateInput.stories.tsx +138 -0
  85. package/date-input/DateInput.test.js +479 -0
  86. package/date-input/types.d.ts +107 -0
  87. package/date-input/types.js +5 -0
  88. package/dialog/Dialog.d.ts +4 -0
  89. package/dialog/Dialog.js +162 -0
  90. package/dialog/Dialog.stories.tsx +267 -0
  91. package/dialog/Dialog.test.js +70 -0
  92. package/dialog/types.d.ts +43 -0
  93. package/dialog/types.js +5 -0
  94. package/dropdown/Dropdown.d.ts +4 -0
  95. package/dropdown/Dropdown.js +387 -0
  96. package/dropdown/Dropdown.stories.tsx +312 -0
  97. package/dropdown/Dropdown.test.js +591 -0
  98. package/dropdown/DropdownMenu.d.ts +4 -0
  99. package/dropdown/DropdownMenu.js +80 -0
  100. package/dropdown/DropdownMenuItem.d.ts +4 -0
  101. package/dropdown/DropdownMenuItem.js +92 -0
  102. package/dropdown/types.d.ts +100 -0
  103. package/dropdown/types.js +5 -0
  104. package/file-input/FileInput.d.ts +4 -0
  105. package/file-input/FileInput.js +593 -0
  106. package/file-input/FileInput.stories.tsx +507 -0
  107. package/file-input/FileInput.test.js +457 -0
  108. package/file-input/FileItem.d.ts +14 -0
  109. package/file-input/FileItem.js +186 -0
  110. package/file-input/types.d.ts +112 -0
  111. package/file-input/types.js +5 -0
  112. package/flex/Flex.d.ts +4 -0
  113. package/flex/Flex.js +57 -0
  114. package/flex/Flex.stories.tsx +103 -0
  115. package/flex/types.d.ts +21 -0
  116. package/flex/types.js +5 -0
  117. package/footer/Footer.d.ts +4 -0
  118. package/footer/Footer.js +185 -0
  119. package/footer/Footer.stories.tsx +137 -0
  120. package/footer/Footer.test.js +109 -0
  121. package/footer/Icons.d.ts +2 -0
  122. package/footer/Icons.js +77 -0
  123. package/footer/types.d.ts +65 -0
  124. package/footer/types.js +5 -0
  125. package/header/Header.d.ts +7 -0
  126. package/header/Header.js +305 -0
  127. package/header/Header.stories.tsx +172 -0
  128. package/header/Header.test.js +79 -0
  129. package/header/Icons.d.ts +2 -0
  130. package/header/Icons.js +34 -0
  131. package/header/types.d.ts +47 -0
  132. package/header/types.js +5 -0
  133. package/heading/Heading.d.ts +4 -0
  134. package/{dist/heading → heading}/Heading.js +31 -90
  135. package/heading/Heading.stories.tsx +54 -0
  136. package/heading/Heading.test.js +186 -0
  137. package/heading/types.d.ts +33 -0
  138. package/heading/types.js +5 -0
  139. package/inset/Inset.d.ts +3 -0
  140. package/inset/Inset.js +51 -0
  141. package/inset/Inset.stories.tsx +229 -0
  142. package/inset/types.d.ts +37 -0
  143. package/inset/types.js +5 -0
  144. package/layout/ApplicationLayout.d.ts +20 -0
  145. package/layout/ApplicationLayout.js +171 -0
  146. package/layout/ApplicationLayout.stories.tsx +162 -0
  147. package/layout/Icons.d.ts +5 -0
  148. package/layout/Icons.js +66 -0
  149. package/layout/SidenavContext.d.ts +5 -0
  150. package/layout/SidenavContext.js +19 -0
  151. package/layout/types.d.ts +42 -0
  152. package/layout/types.js +5 -0
  153. package/link/Link.d.ts +4 -0
  154. package/link/Link.js +136 -0
  155. package/link/Link.stories.tsx +193 -0
  156. package/link/Link.test.js +83 -0
  157. package/link/types.d.ts +54 -0
  158. package/link/types.js +5 -0
  159. package/main.d.ts +44 -0
  160. package/{dist/main.js → main.js} +127 -109
  161. package/number-input/NumberInput.d.ts +4 -0
  162. package/number-input/NumberInput.js +76 -0
  163. package/number-input/NumberInput.stories.tsx +115 -0
  164. package/number-input/NumberInput.test.js +506 -0
  165. package/number-input/NumberInputContext.d.ts +4 -0
  166. package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +6 -3
  167. package/number-input/numberInputContextTypes.d.ts +19 -0
  168. package/number-input/numberInputContextTypes.js +5 -0
  169. package/number-input/types.d.ts +124 -0
  170. package/number-input/types.js +5 -0
  171. package/package.json +42 -30
  172. package/paginator/Icons.js +66 -0
  173. package/paginator/Paginator.d.ts +4 -0
  174. package/paginator/Paginator.js +171 -0
  175. package/paginator/Paginator.stories.tsx +63 -0
  176. package/paginator/Paginator.test.js +308 -0
  177. package/paginator/types.d.ts +38 -0
  178. package/paginator/types.js +5 -0
  179. package/paragraph/Paragraph.d.ts +6 -0
  180. package/paragraph/Paragraph.js +38 -0
  181. package/paragraph/Paragraph.stories.tsx +44 -0
  182. package/password-input/PasswordInput.d.ts +4 -0
  183. package/{dist/password/Password.js → password-input/PasswordInput.js} +48 -82
  184. package/password-input/PasswordInput.stories.tsx +131 -0
  185. package/password-input/PasswordInput.test.js +180 -0
  186. package/password-input/types.d.ts +110 -0
  187. package/password-input/types.js +5 -0
  188. package/progress-bar/ProgressBar.d.ts +4 -0
  189. package/progress-bar/ProgressBar.js +176 -0
  190. package/progress-bar/ProgressBar.stories.jsx +60 -0
  191. package/progress-bar/ProgressBar.test.js +110 -0
  192. package/progress-bar/types.d.ts +36 -0
  193. package/progress-bar/types.js +5 -0
  194. package/quick-nav/QuickNav.d.ts +4 -0
  195. package/quick-nav/QuickNav.js +118 -0
  196. package/quick-nav/QuickNav.stories.tsx +264 -0
  197. package/quick-nav/types.d.ts +21 -0
  198. package/quick-nav/types.js +5 -0
  199. package/radio-group/Radio.d.ts +4 -0
  200. package/radio-group/Radio.js +156 -0
  201. package/radio-group/RadioGroup.d.ts +4 -0
  202. package/radio-group/RadioGroup.js +279 -0
  203. package/radio-group/RadioGroup.stories.tsx +101 -0
  204. package/radio-group/RadioGroup.test.js +665 -0
  205. package/radio-group/types.d.ts +114 -0
  206. package/radio-group/types.js +5 -0
  207. package/resultsetTable/ResultsetTable.d.ts +4 -0
  208. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +43 -147
  209. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  210. package/resultsetTable/ResultsetTable.test.js +348 -0
  211. package/resultsetTable/types.d.ts +67 -0
  212. package/resultsetTable/types.js +5 -0
  213. package/select/Icons.d.ts +10 -0
  214. package/select/Icons.js +93 -0
  215. package/select/Listbox.d.ts +4 -0
  216. package/select/Listbox.js +198 -0
  217. package/select/Option.d.ts +4 -0
  218. package/select/Option.js +110 -0
  219. package/select/Select.d.ts +4 -0
  220. package/select/Select.js +643 -0
  221. package/select/Select.stories.tsx +627 -0
  222. package/select/Select.test.js +2175 -0
  223. package/select/types.d.ts +210 -0
  224. package/select/types.js +5 -0
  225. package/sidenav/Sidenav.d.ts +10 -0
  226. package/sidenav/Sidenav.js +268 -0
  227. package/sidenav/Sidenav.stories.tsx +180 -0
  228. package/sidenav/Sidenav.test.js +44 -0
  229. package/sidenav/types.d.ts +73 -0
  230. package/sidenav/types.js +5 -0
  231. package/slider/Slider.d.ts +4 -0
  232. package/slider/Slider.js +342 -0
  233. package/slider/Slider.stories.tsx +183 -0
  234. package/slider/Slider.test.js +250 -0
  235. package/slider/types.d.ts +82 -0
  236. package/slider/types.js +5 -0
  237. package/spinner/Spinner.d.ts +4 -0
  238. package/spinner/Spinner.js +250 -0
  239. package/spinner/Spinner.stories.jsx +103 -0
  240. package/spinner/Spinner.test.js +64 -0
  241. package/spinner/types.d.ts +32 -0
  242. package/spinner/types.js +5 -0
  243. package/switch/Switch.d.ts +4 -0
  244. package/switch/Switch.js +261 -0
  245. package/switch/Switch.stories.tsx +138 -0
  246. package/switch/Switch.test.js +225 -0
  247. package/switch/types.d.ts +61 -0
  248. package/switch/types.js +5 -0
  249. package/table/Table.d.ts +4 -0
  250. package/{dist/table → table}/Table.js +12 -26
  251. package/table/Table.stories.jsx +277 -0
  252. package/table/Table.test.js +26 -0
  253. package/table/types.d.ts +21 -0
  254. package/table/types.js +5 -0
  255. package/tabs/Tab.d.ts +4 -0
  256. package/tabs/Tab.js +135 -0
  257. package/tabs/Tabs.d.ts +4 -0
  258. package/tabs/Tabs.js +467 -0
  259. package/tabs/Tabs.stories.tsx +186 -0
  260. package/tabs/Tabs.test.js +351 -0
  261. package/tabs/types.d.ts +92 -0
  262. package/tabs/types.js +5 -0
  263. package/tabs-nav/NavTabs.d.ts +8 -0
  264. package/tabs-nav/NavTabs.js +125 -0
  265. package/tabs-nav/NavTabs.stories.tsx +170 -0
  266. package/tabs-nav/NavTabs.test.js +82 -0
  267. package/tabs-nav/Tab.d.ts +4 -0
  268. package/tabs-nav/Tab.js +130 -0
  269. package/tabs-nav/types.d.ts +53 -0
  270. package/tabs-nav/types.js +5 -0
  271. package/tag/Tag.d.ts +4 -0
  272. package/tag/Tag.js +183 -0
  273. package/tag/Tag.stories.tsx +142 -0
  274. package/tag/Tag.test.js +60 -0
  275. package/tag/types.d.ts +69 -0
  276. package/tag/types.js +5 -0
  277. package/text-input/Icons.d.ts +8 -0
  278. package/text-input/Icons.js +60 -0
  279. package/text-input/Suggestion.d.ts +4 -0
  280. package/text-input/Suggestion.js +57 -0
  281. package/text-input/Suggestions.d.ts +4 -0
  282. package/text-input/Suggestions.js +134 -0
  283. package/text-input/TextInput.d.ts +4 -0
  284. package/text-input/TextInput.js +663 -0
  285. package/text-input/TextInput.stories.tsx +481 -0
  286. package/text-input/TextInput.test.js +1713 -0
  287. package/text-input/types.d.ts +192 -0
  288. package/text-input/types.js +5 -0
  289. package/textarea/Textarea.d.ts +4 -0
  290. package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +88 -157
  291. package/textarea/Textarea.stories.jsx +157 -0
  292. package/textarea/Textarea.test.js +437 -0
  293. package/textarea/types.d.ts +137 -0
  294. package/textarea/types.js +5 -0
  295. package/toggle-group/ToggleGroup.d.ts +4 -0
  296. package/toggle-group/ToggleGroup.js +215 -0
  297. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  298. package/toggle-group/ToggleGroup.test.js +156 -0
  299. package/toggle-group/types.d.ts +105 -0
  300. package/toggle-group/types.js +5 -0
  301. package/typography/Typography.d.ts +4 -0
  302. package/typography/Typography.js +131 -0
  303. package/typography/Typography.stories.tsx +198 -0
  304. package/typography/types.d.ts +18 -0
  305. package/typography/types.js +5 -0
  306. package/useTheme.d.ts +2 -0
  307. package/{dist/useTheme.js → useTheme.js} +2 -2
  308. package/useTranslatedLabels.d.ts +2 -0
  309. package/useTranslatedLabels.js +20 -0
  310. package/wizard/Wizard.d.ts +4 -0
  311. package/wizard/Wizard.js +285 -0
  312. package/wizard/Wizard.stories.tsx +233 -0
  313. package/wizard/Wizard.test.js +141 -0
  314. package/wizard/types.d.ts +65 -0
  315. package/wizard/types.js +5 -0
  316. package/README.md +0 -66
  317. package/babel.config.js +0 -8
  318. package/dist/BackgroundColorContext.js +0 -46
  319. package/dist/ThemeContext.js +0 -240
  320. package/dist/accordion/Accordion.js +0 -353
  321. package/dist/accordion-group/AccordionGroup.js +0 -186
  322. package/dist/badge/Badge.js +0 -63
  323. package/dist/box/Box.js +0 -156
  324. package/dist/button/Button.js +0 -238
  325. package/dist/card/Card.js +0 -254
  326. package/dist/checkbox/Checkbox.js +0 -300
  327. package/dist/checkbox/Checkbox.stories.js +0 -144
  328. package/dist/checkbox/readme.md +0 -116
  329. package/dist/chip/Chip.js +0 -265
  330. package/dist/date/Date.js +0 -381
  331. package/dist/date/Date.stories.js +0 -205
  332. package/dist/date/readme.md +0 -73
  333. package/dist/dialog/Dialog.js +0 -218
  334. package/dist/dropdown/Dropdown.js +0 -544
  335. package/dist/footer/Footer.js +0 -395
  336. package/dist/footer/Footer.stories.js +0 -94
  337. package/dist/footer/dxc_logo.svg +0 -15
  338. package/dist/footer/readme.md +0 -41
  339. package/dist/header/Header.js +0 -403
  340. package/dist/header/Header.stories.js +0 -176
  341. package/dist/header/close_icon.svg +0 -1
  342. package/dist/header/dxc_logo_black.svg +0 -8
  343. package/dist/header/hamb_menu_black.svg +0 -1
  344. package/dist/header/hamb_menu_white.svg +0 -1
  345. package/dist/header/readme.md +0 -33
  346. package/dist/input-text/InputText.js +0 -707
  347. package/dist/input-text/InputText.stories.js +0 -209
  348. package/dist/input-text/error.svg +0 -1
  349. package/dist/input-text/readme.md +0 -91
  350. package/dist/layout/ApplicationLayout.js +0 -331
  351. package/dist/layout/facebook.svg +0 -45
  352. package/dist/layout/linkedin.svg +0 -50
  353. package/dist/layout/twitter.svg +0 -53
  354. package/dist/link/Link.js +0 -237
  355. package/dist/link/readme.md +0 -51
  356. package/dist/new-date/NewDate.js +0 -403
  357. package/dist/new-input-text/NewInputText.js +0 -961
  358. package/dist/number/Number.js +0 -138
  359. package/dist/paginator/Paginator.js +0 -289
  360. package/dist/paginator/images/next.svg +0 -3
  361. package/dist/paginator/images/nextPage.svg +0 -3
  362. package/dist/paginator/images/previous.svg +0 -3
  363. package/dist/paginator/images/previousPage.svg +0 -3
  364. package/dist/paginator/readme.md +0 -50
  365. package/dist/password/styles.css +0 -3
  366. package/dist/progress-bar/ProgressBar.js +0 -242
  367. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  368. package/dist/progress-bar/readme.md +0 -63
  369. package/dist/radio/Radio.js +0 -209
  370. package/dist/radio/Radio.stories.js +0 -166
  371. package/dist/radio/readme.md +0 -70
  372. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  373. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  374. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  375. package/dist/select/Select.js +0 -549
  376. package/dist/sidenav/Sidenav.js +0 -179
  377. package/dist/slider/Slider.js +0 -319
  378. package/dist/slider/Slider.stories.js +0 -241
  379. package/dist/slider/readme.md +0 -64
  380. package/dist/spinner/Spinner.js +0 -381
  381. package/dist/spinner/Spinner.stories.js +0 -183
  382. package/dist/spinner/readme.md +0 -65
  383. package/dist/switch/Switch.js +0 -222
  384. package/dist/switch/Switch.stories.js +0 -134
  385. package/dist/switch/readme.md +0 -133
  386. package/dist/tabs/Tabs.js +0 -343
  387. package/dist/tabs/Tabs.stories.js +0 -130
  388. package/dist/tabs/readme.md +0 -78
  389. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  390. package/dist/tabs-for-sections/readme.md +0 -78
  391. package/dist/tag/Tag.js +0 -288
  392. package/dist/textarea/Textarea.js +0 -264
  393. package/dist/toggle/Toggle.js +0 -220
  394. package/dist/toggle/Toggle.stories.js +0 -297
  395. package/dist/toggle/readme.md +0 -80
  396. package/dist/toggle-group/ToggleGroup.js +0 -223
  397. package/dist/upload/Upload.js +0 -205
  398. package/dist/upload/Upload.stories.js +0 -72
  399. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  400. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  401. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  402. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  403. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  404. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  405. package/dist/upload/file-upload/FileToUpload.js +0 -184
  406. package/dist/upload/file-upload/audio-icon.svg +0 -4
  407. package/dist/upload/file-upload/close.svg +0 -4
  408. package/dist/upload/file-upload/file-icon.svg +0 -4
  409. package/dist/upload/file-upload/video-icon.svg +0 -4
  410. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  411. package/dist/upload/readme.md +0 -37
  412. package/dist/upload/transaction/Transaction.js +0 -175
  413. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  414. package/dist/upload/transaction/audio-icon.svg +0 -4
  415. package/dist/upload/transaction/error-icon.svg +0 -4
  416. package/dist/upload/transaction/file-icon-err.svg +0 -4
  417. package/dist/upload/transaction/file-icon.svg +0 -4
  418. package/dist/upload/transaction/image-icon-err.svg +0 -4
  419. package/dist/upload/transaction/image-icon.svg +0 -4
  420. package/dist/upload/transaction/success-icon.svg +0 -4
  421. package/dist/upload/transaction/video-icon-err.svg +0 -4
  422. package/dist/upload/transaction/video-icon.svg +0 -4
  423. package/dist/upload/transactions/Transactions.js +0 -138
  424. package/dist/wizard/Wizard.js +0 -411
  425. package/dist/wizard/invalid_icon.svg +0 -5
  426. package/dist/wizard/valid_icon.svg +0 -5
  427. package/dist/wizard/validation-wrong.svg +0 -6
  428. package/test/Accordion.test.js +0 -33
  429. package/test/AccordionGroup.test.js +0 -125
  430. package/test/Alert.test.js +0 -53
  431. package/test/Box.test.js +0 -10
  432. package/test/Button.test.js +0 -18
  433. package/test/Card.test.js +0 -30
  434. package/test/Checkbox.test.js +0 -45
  435. package/test/Chip.test.js +0 -25
  436. package/test/Date.test.js +0 -393
  437. package/test/Dialog.test.js +0 -23
  438. package/test/Dropdown.test.js +0 -145
  439. package/test/Footer.test.js +0 -99
  440. package/test/Header.test.js +0 -39
  441. package/test/Heading.test.js +0 -35
  442. package/test/InputText.test.js +0 -240
  443. package/test/Link.test.js +0 -43
  444. package/test/NewDate.test.js +0 -203
  445. package/test/NewInputText.test.js +0 -817
  446. package/test/NewTextarea.test.js +0 -201
  447. package/test/Number.test.js +0 -241
  448. package/test/Paginator.test.js +0 -177
  449. package/test/Password.test.js +0 -76
  450. package/test/ProgressBar.test.js +0 -35
  451. package/test/Radio.test.js +0 -37
  452. package/test/ResultsetTable.test.js +0 -329
  453. package/test/Select.test.js +0 -212
  454. package/test/Sidenav.test.js +0 -45
  455. package/test/Slider.test.js +0 -82
  456. package/test/Spinner.test.js +0 -32
  457. package/test/Switch.test.js +0 -45
  458. package/test/Table.test.js +0 -36
  459. package/test/Tabs.test.js +0 -109
  460. package/test/TabsForSections.test.js +0 -34
  461. package/test/Tag.test.js +0 -32
  462. package/test/TextArea.test.js +0 -52
  463. package/test/ToggleGroup.test.js +0 -81
  464. package/test/Upload.test.js +0 -60
  465. package/test/Wizard.test.js +0 -130
  466. package/test/mocks/pngMock.js +0 -1
  467. package/test/mocks/svgMock.js +0 -1
@@ -1,18 +1,11 @@
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.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
14
7
  var globalTokens = {
15
- // Color
8
+ // Color
16
9
  inherit: "inherit",
17
10
  transparent: "transparent",
18
11
  hal_white: "#ffffff",
@@ -24,26 +17,37 @@ var globalTokens = {
24
17
  hal_grey_s_40: "#666666",
25
18
  hal_black: "#000000",
26
19
  color_grey_800: "#4d4d4d",
20
+ color_grey_600: "#808080",
21
+ color_grey_50: "#fafafa",
22
+ color_grey_a_100: "#0000000d",
23
+ color_grey_a_300: "#00000033",
27
24
  hal_purple_l_95: "#f2eafa",
28
25
  hal_purple_l_90: "#e5d5f6",
29
26
  hal_purple_l_65: "#a46ede",
30
27
  hal_purple_s_38: "#5f249f",
31
28
  hal_purple_d_30: "#4b1c7d",
32
29
  hal_purple_d_20: "#321353",
30
+ hal_purple_d_70: "#9A6BB2",
33
31
  color_purple_600: "#7D2FD0",
32
+ color_purple_300: "#cbacec",
34
33
  hal_blue_l_95: "#e6f4ff",
35
34
  hal_blue_l_80: "#99d5ff",
36
35
  hal_blue_l_50: "#0095ff",
37
36
  hal_blue_l_45: "#0086e6",
38
37
  hal_blue_s_35: "#0067b3",
39
38
  hal_blue_d_20: "#003c66",
39
+ color_blue_200: "#cceaff",
40
40
  color_blue_500: "#33AAFF",
41
+ color_blue_50: "#f5fbff",
41
42
  hal_red_l_95: "#ffe6e9",
42
43
  hal_red_l_80: "#fe9aa7",
43
44
  hal_red_l_60: "#fe344f",
44
45
  hal_red_s_41: "#d0011b",
45
46
  hal_red_d_30: "#980115",
46
47
  hal_red_d_20: "#65010e",
48
+ color_red_700: "#ffccd3",
49
+ color_red_50: "#FFF5F6",
50
+ color_red_600: "#fe0123",
47
51
  hal_green_l_95: "#eafaef",
48
52
  hal_green_l_80: "#acecbe",
49
53
  hal_green_s_39: "#24a148",
@@ -91,7 +95,7 @@ var globalTokens = {
91
95
  type_sans: "Open Sans, sans-serif",
92
96
  type_scale_root: "16px",
93
97
  type_scale_08: "3.75rem",
94
- type_scale_07: "3rem",
98
+ type_scale_07: "2.5rem",
95
99
  type_scale_06: "2rem",
96
100
  type_scale_05: "1.5rem",
97
101
  type_scale_04: "1.25rem",
@@ -106,7 +110,7 @@ var globalTokens = {
106
110
  type_normal: "normal",
107
111
  type_spacing_tight_02: "-0.05em",
108
112
  type_spacing_tight_01: "-0.025em",
109
- type_spacing_normal: "0",
113
+ type_spacing_normal: "0em",
110
114
  type_spacing_wide_01: "0.025em",
111
115
  type_spacing_wide_02: "0.05em",
112
116
  type_spacing_wide_03: "0.1em",
@@ -119,7 +123,7 @@ var globalTokens = {
119
123
  type_leading_compact_02: "1.25em",
120
124
  type_leading_compact_01: "1.365em",
121
125
  type_leading_normal: "1.5em",
122
- type_leading_loose_01: "1.75em",
126
+ type_leading_loose_01: "1.715em",
123
127
  type_leading_loose_02: "2em",
124
128
  fontSize10: "10px",
125
129
  // Spacing
@@ -140,21 +144,22 @@ var globalTokens = {
140
144
  spacing_14: "7rem",
141
145
  // Border
142
146
  border_width_0: "0px",
143
- border_width_01: "1px",
144
- border_width_02: "2px",
145
- border_radius_01: "2px",
146
- border_radius_02: "4px",
147
+ border_width_1: "1px",
148
+ border_width_2: "2px",
149
+ border_width_4: "4px",
150
+ border_radius_none: "0rem",
151
+ border_radius_small: "0.125rem",
152
+ border_radius_medium: "0.25rem",
153
+ border_radius_large: "0.375rem",
154
+ border_radius_full: "9999px",
147
155
  border_solid: "solid",
148
- border_none: "none",
149
- // Padding
150
- padding_08: "8px",
151
- padding_16: "16px"
156
+ border_dashed: "dashed",
157
+ border_none: "none"
152
158
  };
153
159
  exports.globalTokens = globalTokens;
154
160
  var componentTokens = {
155
161
  accordion: {
156
162
  backgroundColor: globalTokens.hal_white,
157
- disabledBackgroundColor: globalTokens.transparent,
158
163
  hoverBackgroundColor: globalTokens.hal_purple_l_95,
159
164
  arrowColor: globalTokens.hal_purple_s_38,
160
165
  disabledArrowColor: globalTokens.hal_grey_l_60,
@@ -174,13 +179,13 @@ var componentTokens = {
174
179
  titleLabelFontStyle: globalTokens.type_normal,
175
180
  titleLabelFontColor: globalTokens.hal_black,
176
181
  disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
177
- titleLabelPaddingLeft: "0px",
178
- titleLabelPaddingRight: "16px",
179
182
  titleLabelPaddingTop: "0px",
180
183
  titleLabelPaddingBottom: "0px",
184
+ titleLabelPaddingLeft: "0px",
185
+ titleLabelPaddingRight: "16px",
186
+ focusBorderColor: globalTokens.hal_blue_l_50,
181
187
  focusBorderStyle: "solid",
182
188
  focusBorderThickness: "2px",
183
- focusBorderColor: globalTokens.hal_blue_l_50,
184
189
  borderRadius: "4px",
185
190
  boxShadowOffsetX: "0px",
186
191
  boxShadowOffsetY: "6px",
@@ -234,7 +239,7 @@ var componentTokens = {
234
239
  successBackgroundColor: globalTokens.hal_green_l_95,
235
240
  warningBackgroundColor: globalTokens.hal_yellow_l_95,
236
241
  errorBackgroundColor: globalTokens.hal_red_l_95,
237
- hoverActionBackgroundColor: "#0000000D",
242
+ hoverActionBackgroundColor: globalTokens.color_grey_a_100,
238
243
  activeActionBackgroundColor: "#0000001A",
239
244
  focusActionBorderColor: globalTokens.hal_blue_l_50,
240
245
  overlayColor: "#000000B3"
@@ -255,20 +260,29 @@ var componentTokens = {
255
260
  oneShadowDepthShadowOffsetY: "3px",
256
261
  oneShadowDepthShadowBlur: "6px",
257
262
  oneShadowDepthShadowSpread: "0px",
258
- oneShadowDepthShadowColor: "#00000033",
263
+ oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
259
264
  twoShadowDepthShadowOffsetX: "0px",
260
265
  twoShadowDepthShadowOffsetY: "3px",
261
266
  twoShadowDepthShadowBlur: "10px",
262
267
  twoShadowDepthShadowSpread: "0px",
263
- twoShadowDepthShadowColor: "#00000033"
268
+ twoShadowDepthShadowColor: globalTokens.color_grey_a_300
269
+ },
270
+ bulletedList: {
271
+ fontColor: globalTokens.hal_black,
272
+ fontColorOnDark: globalTokens.hal_white,
273
+ bulletIconHeight: "1.5rem",
274
+ bulletIconWidth: "1.5rem",
275
+ bulletHeight: "5px",
276
+ bulletWidth: "5px",
277
+ bulletMarginRight: "0.5rem"
264
278
  },
265
279
  button: {
266
280
  labelFontLineHeight: globalTokens.type_leading_normal,
267
281
  labelLetterSpacing: globalTokens.type_spacing_wide_01,
268
- paddingLeft: globalTokens.padding_08,
269
- paddingRight: globalTokens.padding_08,
270
- paddingTop: globalTokens.padding_08,
271
- paddingBottom: globalTokens.padding_08,
282
+ paddingLeft: globalTokens.spacing_03,
283
+ paddingRight: globalTokens.spacing_03,
284
+ paddingTop: globalTokens.spacing_03,
285
+ paddingBottom: globalTokens.spacing_03,
272
286
  focusBorderColor: globalTokens.hal_blue_l_50,
273
287
  focusBorderColorOnDark: globalTokens.hal_blue_l_50,
274
288
  primaryBackgroundColor: globalTokens.hal_purple_s_38,
@@ -285,7 +299,7 @@ var componentTokens = {
285
299
  primaryDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
286
300
  primaryBorderThickness: globalTokens.border_width_0,
287
301
  primaryBorderStyle: globalTokens.border_none,
288
- primaryBorderRadius: globalTokens.border_radius_02,
302
+ primaryBorderRadius: globalTokens.border_radius_medium,
289
303
  primaryFontFamily: globalTokens.type_sans,
290
304
  primaryFontSize: globalTokens.type_scale_03,
291
305
  primaryFontWeight: globalTokens.type_regular,
@@ -307,9 +321,9 @@ var componentTokens = {
307
321
  secondaryDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
308
322
  secondaryDisabledBorderColor: globalTokens.hal_grey_l_60,
309
323
  secondaryDisabledBorderColorOnDark: globalTokens.hal_grey_l_60,
310
- secondaryBorderThickness: globalTokens.border_width_01,
324
+ secondaryBorderThickness: globalTokens.border_width_1,
311
325
  secondaryBorderStyle: globalTokens.border_solid,
312
- secondaryBorderRadius: globalTokens.border_radius_02,
326
+ secondaryBorderRadius: globalTokens.border_radius_medium,
313
327
  secondaryFontFamily: globalTokens.type_sans,
314
328
  secondaryFontSize: globalTokens.type_scale_03,
315
329
  secondaryFontWeight: globalTokens.type_regular,
@@ -327,7 +341,7 @@ var componentTokens = {
327
341
  textDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
328
342
  textBorderThickness: globalTokens.border_width_0,
329
343
  textBorderStyle: globalTokens.border_none,
330
- textBorderRadius: globalTokens.border_radius_02,
344
+ textBorderRadius: globalTokens.border_radius_medium,
331
345
  textFontFamily: globalTokens.type_sans,
332
346
  textFontSize: globalTokens.type_scale_03,
333
347
  textFontWeight: globalTokens.type_regular
@@ -340,7 +354,7 @@ var componentTokens = {
340
354
  backgroundColorChecked: globalTokens.hal_blue_s_35,
341
355
  backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
342
356
  hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
343
- hoverBackgroundColorCheckedOnDark: global.hal_white,
357
+ hoverBackgroundColorCheckedOnDark: globalTokens.hal_white,
344
358
  disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
345
359
  disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
346
360
  borderColor: globalTokens.hal_blue_s_35,
@@ -387,20 +401,20 @@ var componentTokens = {
387
401
  disabledIconColor: globalTokens.hal_grey_l_60,
388
402
  focusColor: globalTokens.hal_blue_l_50
389
403
  },
390
- date: {
391
- pickerSelectedDateBackgroundColor: globalTokens.purple,
392
- pickerSelectedDateColor: globalTokens.hal_white,
404
+ dateInput: {
405
+ pickerFontFamily: globalTokens.type_sans,
393
406
  pickerBackgroundColor: globalTokens.hal_white,
394
- pickerFontColor: globalTokens.hal_black,
395
- pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
396
407
  pickerHoverDateFontColor: globalTokens.hal_black,
397
- pickerActualDateColor: globalTokens.lightGrey,
398
- pickerYearColor: globalTokens.hal_black,
399
- pickerMonthColor: globalTokens.hal_black,
400
- pickerWeekLabelColor: globalTokens.hal_black,
401
- pickerBackgroundColorMonthArrows: globalTokens.transparent,
402
- focusColor: globalTokens.hal_blue_l_50,
403
- fontFamily: globalTokens.type_sans,
408
+ pickerHoverDateBackgroundColor: globalTokens.hal_purple_l_90,
409
+ pickerSelectedDateColor: globalTokens.hal_white,
410
+ pickerSelectedDateBackgroundColor: globalTokens.hal_purple_s_38,
411
+ pickerActualDateFontColor: globalTokens.hal_grey_l_60,
412
+ pickerYearFontColor: globalTokens.hal_black,
413
+ pickerMonthFontColor: globalTokens.hal_black,
414
+ pickerWeekFontColor: globalTokens.hal_black,
415
+ pickerDayFontColor: globalTokens.hal_black,
416
+ pickerMonthArrowsBackgroundColor: globalTokens.transparent,
417
+ pickerFocusColor: globalTokens.hal_blue_l_50,
404
418
  pickerHeight: "316px",
405
419
  pickerWidth: "290px"
406
420
  },
@@ -421,7 +435,10 @@ var componentTokens = {
421
435
  boxShadowOffsetY: "1px",
422
436
  boxShadowBlur: "3px",
423
437
  boxShadowColor: "rgba(0, 0, 0, 0.2)",
424
- overlayOpacity: "0.7"
438
+ overlayOpacity: "0.7",
439
+ fontFamily: globalTokens.type_sans,
440
+ fontSize: globalTokens.type_scale_03,
441
+ fontWeight: globalTokens.type_regular
425
442
  },
426
443
  dropdown: {
427
444
  buttonBackgroundColor: globalTokens.hal_white,
@@ -468,6 +485,59 @@ var componentTokens = {
468
485
  scrollBarTrackColor: globalTokens.lightGrey,
469
486
  focusColor: globalTokens.hal_blue_l_50
470
487
  },
488
+ fileInput: {
489
+ dropBorderColor: globalTokens.hal_black,
490
+ fileItemBorderColor: globalTokens.hal_grey_l_80,
491
+ fileNameFontColor: globalTokens.hal_black,
492
+ labelFontColor: globalTokens.hal_black,
493
+ helperTextFontColor: globalTokens.hal_black,
494
+ dropLabelFontColor: globalTokens.hal_black,
495
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
496
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
497
+ disabledDropLabelFontColor: globalTokens.hal_grey_l_60,
498
+ focusDropBorderColor: globalTokens.hal_blue_l_50,
499
+ disabledDropBorderColor: globalTokens.hal_grey_l_60,
500
+ dragoverDropBackgroundColor: globalTokens.color_blue_50,
501
+ activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
502
+ errorFileItemBorderColor: globalTokens.hal_red_s_41,
503
+ errorFileItemBackgroundColor: globalTokens.color_red_50,
504
+ errorFilePreviewBackgroundColor: globalTokens.color_red_700,
505
+ errorFileItemIconColor: globalTokens.hal_red_s_41,
506
+ fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
507
+ deleteFileItemColor: globalTokens.hal_black,
508
+ errorMessageFontColor: globalTokens.hal_red_s_41,
509
+ labelFontFamily: globalTokens.type_sans,
510
+ labelFontSize: globalTokens.type_scale_02,
511
+ labelFontWeight: globalTokens.type_semibold,
512
+ labelLineHeight: globalTokens.type_leading_loose_01,
513
+ fileItemFontFamily: globalTokens.type_sans,
514
+ fileItemFontSize: globalTokens.type_scale_02,
515
+ fileItemFontWeight: globalTokens.type_regular,
516
+ fileItemLineHeight: globalTokens.type_leading_normal,
517
+ helperTextFontFamily: globalTokens.type_sans,
518
+ helperTextFontSize: globalTokens.type_scale_01,
519
+ helperTextFontWeight: globalTokens.type_regular,
520
+ helperTextLineHeight: globalTokens.type_leading_normal,
521
+ dropLabelFontFamily: globalTokens.type_sans,
522
+ dropLabelFontSize: globalTokens.type_scale_03,
523
+ dropLabelFontWeight: globalTokens.type_regular,
524
+ errorMessageFontFamily: globalTokens.type_sans,
525
+ errorMessageFontSize: globalTokens.type_scale_01,
526
+ errorMessageFontWeight: globalTokens.type_regular,
527
+ errorMessageLineHeight: globalTokens.type_leading_normal,
528
+ dropBorderThickness: globalTokens.border_width_1,
529
+ dropBorderStyle: globalTokens.border_dashed,
530
+ dropBorderRadius: globalTokens.border_radius_large,
531
+ fileItemBorderThickness: globalTokens.border_width_1,
532
+ fileItemBorderStyle: globalTokens.border_solid,
533
+ fileItemBorderRadius: globalTokens.border_radius_medium,
534
+ hoverDeleteFileItemBackgroundColor: globalTokens.color_grey_a_100,
535
+ activeDeleteFileItemBackgroundColor: globalTokens.color_grey_a_300,
536
+ focusDeleteFileItemBorderColor: globalTokens.hal_blue_l_50,
537
+ filePreviewBackgroundColor: globalTokens.hal_grey_l_95,
538
+ filePreviewIconColor: globalTokens.color_grey_600,
539
+ errorFilePreviewIconColor: globalTokens.hal_red_s_41
540
+ },
471
541
  footer: {
472
542
  height: "124px",
473
543
  backgroundColor: globalTokens.hal_black,
@@ -486,7 +556,7 @@ var componentTokens = {
486
556
  copyrightFontStyle: globalTokens.type_normal,
487
557
  copyrightFontWeight: globalTokens.type_regular,
488
558
  copyrightFontColor: globalTokens.hal_white,
489
- logo: _dxc_logo["default"],
559
+ logo: "",
490
560
  logoHeight: "32px",
491
561
  logoWidth: "auto",
492
562
  socialLinksSize: "24px",
@@ -504,8 +574,8 @@ var componentTokens = {
504
574
  hamburguerTextTransform: globalTokens.type_uppercase,
505
575
  hamburguerIconColor: globalTokens.hal_black,
506
576
  hamburguerHoverColor: globalTokens.mediumGreyBlack,
507
- logo: _dxc_logo_black["default"],
508
- logoResponsive: _dxc_logo_black["default"],
577
+ logo: "",
578
+ logoResponsive: "",
509
579
  logoHeight: "40px",
510
580
  logoWidth: "auto",
511
581
  menuBackgroundColor: globalTokens.hal_white,
@@ -522,105 +592,48 @@ var componentTokens = {
522
592
  paddingLeft: "24px",
523
593
  underlinedColor: globalTokens.hal_black,
524
594
  underlinedThickness: "2px",
525
- underlinedStyle: "solid"
595
+ underlinedStyle: "solid",
596
+ contentColor: globalTokens.hal_black,
597
+ contentColorOnDark: globalTokens.hal_white
526
598
  },
527
599
  heading: {
528
600
  level1FontColor: globalTokens.inherit,
529
601
  level1FontFamily: globalTokens.type_sans,
530
- level1FontSize: globalTokens.type_scale_08,
602
+ level1FontSize: globalTokens.type_scale_07,
531
603
  level1FontStyle: globalTokens.type_normal,
532
- level1FontWeight: globalTokens.type_regular,
604
+ level1FontWeight: globalTokens.type_semibold,
533
605
  level1LineHeight: globalTokens.type_leading_compact_01,
534
606
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
535
607
  level2FontColor: globalTokens.inherit,
536
608
  level2FontFamily: globalTokens.type_sans,
537
- level2FontSize: globalTokens.type_scale_07,
609
+ level2FontSize: globalTokens.type_scale_05,
538
610
  level2FontStyle: globalTokens.type_normal,
539
- level2FontWeight: globalTokens.type_regular,
611
+ level2FontWeight: globalTokens.type_semibold,
540
612
  level2LineHeight: globalTokens.type_leading_normal,
541
613
  level2LetterSpacing: globalTokens.type_spacing_normal,
542
614
  level3FontColor: globalTokens.inherit,
543
615
  level3FontFamily: globalTokens.type_sans,
544
- level3FontSize: globalTokens.type_scale_06,
616
+ level3FontSize: globalTokens.type_scale_04,
545
617
  level3FontStyle: globalTokens.type_normal,
546
- level3FontWeight: globalTokens.type_regular,
618
+ level3FontWeight: globalTokens.type_semibold,
547
619
  level3LineHeight: globalTokens.type_leading_compact_01,
548
620
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
549
621
  level4FontColor: globalTokens.inherit,
550
622
  level4FontFamily: globalTokens.type_sans,
551
- level4FontSize: globalTokens.type_scale_05,
623
+ level4FontSize: globalTokens.type_scale_03,
552
624
  level4FontStyle: globalTokens.type_normal,
553
- level4FontWeight: globalTokens.type_regular,
625
+ level4FontWeight: globalTokens.type_semibold,
554
626
  level4LineHeight: globalTokens.type_leading_normal,
555
627
  level4LetterSpacing: globalTokens.type_spacing_normal,
556
628
  level5FontColor: globalTokens.inherit,
557
629
  level5FontFamily: globalTokens.type_sans,
558
- level5FontSize: globalTokens.type_scale_04,
630
+ level5FontSize: globalTokens.type_scale_02,
559
631
  level5FontStyle: globalTokens.type_normal,
560
- level5FontWeight: globalTokens.type_regular,
632
+ level5FontWeight: globalTokens.type_semibold,
561
633
  level5LineHeight: globalTokens.type_leading_normal,
562
634
  level5LetterSpacing: globalTokens.type_spacing_wide_01
563
635
  },
564
- inputText: {
565
- fontFamily: globalTokens.type_sans,
566
- assistiveTextFontColor: globalTokens.black,
567
- assistiveTextFontColorOnDark: globalTokens.white,
568
- assistiveTextFontSize: globalTokens.type_scale_01,
569
- assistiveTextFontStyle: globalTokens.type_normal,
570
- assistiveTextFontWeight: globalTokens.type_regular,
571
- disabledColor: globalTokens.lighterBlack,
572
- disabledColorOnDark: "#575757",
573
- errorColor: globalTokens.red,
574
- errorColorOnDark: globalTokens.hal_red_l_60,
575
- optionBackgroundColor: globalTokens.white,
576
- optionBorderColor: globalTokens.black,
577
- optionBorderThickness: "0px",
578
- optionBorderStyle: "solid",
579
- optionFontColor: globalTokens.black,
580
- optionFontColorOnDark: globalTokens.white,
581
- optionFontSize: globalTokens.type_scale_03,
582
- optionFontStyle: globalTokens.type_normal,
583
- optionFontWeight: globalTokens.type_regular,
584
- optionPaddingBottom: "6px",
585
- optionPaddingTop: "6px",
586
- scrollBarThumbColor: globalTokens.darkGrey,
587
- scrollBarTrackColor: globalTokens.lightGrey,
588
- hoverOptionColor: globalTokens.black,
589
- hoverOptionBackgroundColor: globalTokens.lightWhite,
590
- hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
591
- selectedOptionBackgroundColor: globalTokens.lightGrey,
592
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
593
- labelFontColor: globalTokens.black,
594
- labelFontColorOnDark: globalTokens.white,
595
- labelFontSize: globalTokens.type_scale_03,
596
- labelFontStyle: globalTokens.type_normal,
597
- labelFontWeight: globalTokens.type_regular,
598
- valueFontColor: globalTokens.black,
599
- valueFontColorOnDark: globalTokens.white,
600
- valueFontSize: globalTokens.type_scale_03,
601
- valueFontStyle: globalTokens.type_normal,
602
- valueFontWeight: globalTokens.type_regular,
603
- prefixIconColor: globalTokens.black,
604
- prefixIconColorOnDark: globalTokens.white,
605
- prefixLabelFontColor: globalTokens.black,
606
- prefixLabelFontColorOnDark: globalTokens.white,
607
- prefixLabelFontSize: globalTokens.type_scale_03,
608
- prefixLabelFontStyle: globalTokens.type_normal,
609
- prefixLabelFontWeight: globalTokens.type_regular,
610
- suffixIconColor: globalTokens.black,
611
- suffixIconColorOnDark: globalTokens.white,
612
- suffixLabelFontColor: globalTokens.black,
613
- suffixLabelFontColorOnDark: globalTokens.white,
614
- suffixLabelFontSize: globalTokens.type_scale_03,
615
- suffixLabelFontStyle: globalTokens.type_normal,
616
- suffixLabelFontWeight: globalTokens.type_regular,
617
- underlineColor: globalTokens.black,
618
- underlineColorOnDark: globalTokens.white,
619
- underlineFocusColor: globalTokens.black,
620
- underlineFocusColorOnDark: globalTokens.white,
621
- underlineThickness: "1px"
622
- },
623
- newInputText: {
636
+ textInput: {
624
637
  fontFamily: globalTokens.type_sans,
625
638
  enabledBorderColor: globalTokens.hal_black,
626
639
  enabledBorderColorOnDark: globalTokens.hal_white,
@@ -634,8 +647,10 @@ var componentTokens = {
634
647
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
635
648
  errorBorderColor: globalTokens.hal_red_s_41,
636
649
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
637
- hoverErrorBorderColor: "#fe0123",
650
+ hoverErrorBorderColor: globalTokens.color_red_600,
638
651
  hoverErrorBorderColorOnDark: "#fe677b",
652
+ inputMarginTop: globalTokens.spacing_02,
653
+ inputMarginBottom: globalTokens.spacing_02,
639
654
  errorMessageColor: globalTokens.hal_red_s_41,
640
655
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
641
656
  errorIconColor: globalTokens.hal_red_s_41,
@@ -645,6 +660,7 @@ var componentTokens = {
645
660
  labelFontSize: globalTokens.type_scale_02,
646
661
  labelFontStyle: globalTokens.type_normal,
647
662
  labelFontWeight: globalTokens.type_semibold,
663
+ labelLineHeight: globalTokens.type_leading_loose_01,
648
664
  disabledLabelFontColor: globalTokens.hal_grey_l_60,
649
665
  disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
650
666
  optionalLabelFontWeight: globalTokens.type_regular,
@@ -653,6 +669,7 @@ var componentTokens = {
653
669
  helperTextFontSize: globalTokens.type_scale_01,
654
670
  helperTextFontStyle: globalTokens.type_normal,
655
671
  helperTextFontWeight: globalTokens.type_regular,
672
+ helperTextLineHeight: globalTokens.type_leading_normal,
656
673
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
657
674
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
658
675
  prefixColor: globalTokens.hal_grey_s_40,
@@ -663,7 +680,7 @@ var componentTokens = {
663
680
  disabledSuffixColor: globalTokens.hal_grey_l_75,
664
681
  disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
665
682
  disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
666
- placeholderFontColor: "#808080",
683
+ placeholderFontColor: "#000000b3",
667
684
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
668
685
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
669
686
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -694,20 +711,25 @@ var componentTokens = {
694
711
  focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
695
712
  activeActionBackgroundColor: globalTokens.hal_grey_l_80,
696
713
  activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
714
+ listDialogBackgroundColor: globalTokens.hal_white,
715
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
716
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
697
717
  listOptionFontColor: globalTokens.hal_black,
698
- listOptionFontSize: globalTokens.type_scale_03,
718
+ listOptionFontSize: globalTokens.type_scale_02,
699
719
  listOptionFontStyle: globalTokens.type_normal,
700
720
  listOptionFontWeight: globalTokens.type_regular,
701
721
  systemMessageFontColor: globalTokens.hal_grey_s_40,
702
- errorMessageBorderColor: globalTokens.hal_red_s_41,
703
- errorMessageBackgroundColor: globalTokens.hal_red_l_95,
722
+ errorListDialogFontColor: globalTokens.hal_black,
723
+ errorListDialogBackgroundColor: globalTokens.color_red_50,
724
+ errorListDialogBorderColor: globalTokens.hal_red_s_41,
704
725
  hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
705
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
726
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
727
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50
706
728
  },
707
729
  link: {
708
730
  fontColor: globalTokens.hal_blue_s_35,
709
731
  fontFamily: globalTokens.inherit,
710
- fontSize: globalTokens.type_scale_root,
732
+ fontSize: globalTokens.inherit,
711
733
  fontStyle: globalTokens.type_normal,
712
734
  fontWeight: globalTokens.type_regular,
713
735
  iconSize: "16px",
@@ -724,6 +746,13 @@ var componentTokens = {
724
746
  activeUnderlineColor: globalTokens.black,
725
747
  focusColor: globalTokens.hal_blue_l_50
726
748
  },
749
+ paragraph: {
750
+ fontColor: globalTokens.hal_black,
751
+ fontColorOnDark: globalTokens.hal_white,
752
+ display: "block",
753
+ fontSize: globalTokens.type_scale_03,
754
+ fontWeight: globalTokens.type_regular
755
+ },
727
756
  paginator: {
728
757
  backgroundColor: globalTokens.darkWhite,
729
758
  fontColor: globalTokens.hal_black,
@@ -732,15 +761,15 @@ var componentTokens = {
732
761
  fontStyle: globalTokens.type_normal,
733
762
  fontWeight: globalTokens.type_regular,
734
763
  fontTextTransform: "none",
735
- height: "64px",
736
- width: "100%",
737
- marginRight: "40px",
738
- marginLeft: "20px",
764
+ verticalPadding: "0.75rem",
765
+ horizontalPadding: "2rem",
766
+ marginRight: "2rem",
767
+ marginLeft: "2rem",
739
768
  itemsPerPageSelectorMarginLeft: "0px",
740
- itemsPerPageSelectorMarginRight: "30px",
769
+ itemsPerPageSelectorMarginRight: "1rem",
741
770
  pageSelectorMarginRight: "30px",
742
771
  pageSelectorMarginLeft: "0px",
743
- totalItemsContainerMarginRight: "30px",
772
+ totalItemsContainerMarginRight: "3rem",
744
773
  totalItemsContainerMarginLeft: "0px"
745
774
  },
746
775
  progressBar: {
@@ -772,106 +801,163 @@ var componentTokens = {
772
801
  overlayColor: globalTokens.black,
773
802
  overlayOpacity: "0.8"
774
803
  },
775
- radio: {
776
- circleLabelSpacing: "10px",
777
- circleSize: "24px",
778
- color: globalTokens.black,
779
- colorOnDark: globalTokens.white,
780
- disabledColor: globalTokens.lighterBlack,
781
- disabledColorOnDark: "#575757",
782
- disabledFontColor: globalTokens.lighterBlack,
783
- disabledFontColorOnDark: "#575757",
784
- focusColor: globalTokens.hal_blue_l_50,
785
- focusColorOnDark: "#1682FF",
786
- fontColor: globalTokens.inherit,
787
- fontColorOnDark: globalTokens.white,
804
+ quickNav: {
805
+ fontColor: globalTokens.hal_grey_s_40,
806
+ hoverFontColor: globalTokens.hal_purple_d_70,
807
+ selectedFontColor: globalTokens.hal_purple_s_38,
808
+ dividerBorderColor: globalTokens.hal_grey_l_75,
809
+ focusBorderColor: globalTokens.hal_blue_l_50,
810
+ focusBorderStyle: globalTokens.border_solid,
811
+ focusBorderThickness: globalTokens.border_width_2,
812
+ focusBorderRadius: globalTokens.border_width_2,
813
+ paddingTop: globalTokens.spacing_03,
814
+ paddingBottom: globalTokens.spacing_03,
815
+ paddingLeft: globalTokens.spacing_05,
816
+ paddingRight: globalTokens.spacing_05,
788
817
  fontFamily: globalTokens.type_sans,
789
- fontSize: globalTokens.type_scale_root,
818
+ fontSize: globalTokens.type_scale_02,
790
819
  fontStyle: globalTokens.type_normal,
791
820
  fontWeight: globalTokens.type_regular
792
821
  },
822
+ radioGroup: {
823
+ fontFamily: globalTokens.type_sans,
824
+ radioInputColor: globalTokens.hal_blue_l_45,
825
+ hoverRadioInputColor: globalTokens.hal_blue_s_35,
826
+ focusBorderColor: globalTokens.hal_blue_l_50,
827
+ activeRadioInputColor: globalTokens.hal_blue_d_20,
828
+ errorRadioInputColor: globalTokens.hal_red_s_41,
829
+ hoverErrorRadioInputColor: globalTokens.hal_red_d_30,
830
+ activeErrorRadioInputColor: globalTokens.hal_red_d_20,
831
+ readonlyRadioInputColor: globalTokens.hal_grey_l_60,
832
+ hoverReadonlyRadioInputColor: globalTokens.color_grey_600,
833
+ activeReadonlyRadioInputColor: globalTokens.hal_grey_s_40,
834
+ disabledRadioInputColor: globalTokens.hal_grey_l_60,
835
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
836
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
837
+ disabledRadioInputLabelFontColor: globalTokens.hal_grey_l_60,
838
+ errorMessageColor: globalTokens.hal_red_s_41,
839
+ labelFontColor: globalTokens.hal_black,
840
+ labelFontSize: globalTokens.type_scale_02,
841
+ labelFontStyle: globalTokens.type_normal,
842
+ labelFontWeight: globalTokens.type_semibold,
843
+ labelLineHeight: globalTokens.type_leading_loose_01,
844
+ optionalLabelFontWeight: globalTokens.type_regular,
845
+ helperTextFontColor: globalTokens.hal_black,
846
+ helperTextFontSize: globalTokens.type_scale_01,
847
+ helperTextFontStyle: globalTokens.type_normal,
848
+ helperTextFontWeight: globalTokens.type_regular,
849
+ helperTextLineHeight: globalTokens.type_leading_normal,
850
+ radioInputLabelFontColor: globalTokens.hal_black,
851
+ radioInputLabelFontSize: globalTokens.type_scale_02,
852
+ radioInputLabelFontStyle: globalTokens.type_normal,
853
+ radioInputLabelFontWeight: globalTokens.type_regular,
854
+ radioInputLabelLineHeight: globalTokens.type_leading_loose_01,
855
+ groupLabelMargin: globalTokens.spacing_03,
856
+ radioInputLabelMargin: globalTokens.spacing_03,
857
+ groupVerticalGutter: globalTokens.spacing_02,
858
+ groupHorizontalGutter: globalTokens.spacing_07
859
+ },
793
860
  select: {
794
861
  fontFamily: globalTokens.type_sans,
795
- assistiveTextFontColor: globalTokens.hal_black,
796
- assistiveTextFontColorOnDark: globalTokens.hal_white,
797
- assistiveTextFontSize: globalTokens.type_scale_01,
798
- assistiveTextFontStyle: globalTokens.type_normal,
799
- assistiveTextFontWeight: globalTokens.type_regular,
862
+ disabledColor: globalTokens.hal_grey_l_60,
863
+ enabledInputBorderColor: globalTokens.hal_black,
864
+ hoverInputBorderColor: globalTokens.hal_purple_l_65,
865
+ focusInputBorderColor: globalTokens.hal_blue_l_50,
866
+ errorInputBorderColor: globalTokens.hal_red_s_41,
867
+ hoverInputErrorBorderColor: globalTokens.color_red_600,
868
+ disabledInputBorderColor: globalTokens.hal_grey_l_60,
869
+ disabledInputBackgroundColor: globalTokens.hal_grey_l_95,
870
+ inputMarginTop: globalTokens.spacing_02,
871
+ inputMarginBottom: globalTokens.spacing_02,
872
+ errorMessageColor: globalTokens.hal_red_s_41,
873
+ errorIconColor: globalTokens.hal_red_s_41,
800
874
  labelFontColor: globalTokens.hal_black,
801
- labelFontColorOnDark: globalTokens.hal_white,
802
- labelFontSize: globalTokens.type_scale_03,
875
+ labelFontSize: globalTokens.type_scale_02,
803
876
  labelFontStyle: globalTokens.type_normal,
804
- labelFontWeight: globalTokens.type_regular,
805
- disabledColor: globalTokens.lighterBlack,
806
- disabledColorOnDark: "#575757",
807
- errorColor: globalTokens.red,
808
- errorColorOnDark: globalTokens.hal_red_l_60,
809
- optionBackgroundColor: globalTokens.hal_white,
810
- optionBorderColor: globalTokens.hal_black,
811
- optionBorderThickness: "0px",
812
- optionBorderStyle: "solid",
813
- optionFontColor: globalTokens.hal_black,
814
- optionFontColorOnDark: globalTokens.hal_white,
815
- optionFontSize: globalTokens.type_scale_root,
816
- optionFontStyle: globalTokens.type_normal,
817
- optionFontWeight: globalTokens.type_regular,
818
- optionPaddingBottom: "6px",
819
- optionPaddingTop: "6px",
820
- scrollBarThumbColor: globalTokens.hal_grey_s_40,
821
- scrollBarTrackColor: globalTokens.lightGrey,
822
- optionIconColor: globalTokens.hal_black,
823
- optionIconColorOnDark: globalTokens.hal_white,
824
- optionIconSpacing: "12px",
825
- optionIconSize: "20px",
826
- optionCheckboxSpacing: "12px",
827
- hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
828
- hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
829
- activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
830
- activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
831
- selectedOptionBackgroundColor: globalTokens.lightGrey,
832
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
833
- underlineColor: globalTokens.hal_black,
834
- underlineColorOnDark: globalTokens.hal_white,
835
- underlineFocusColor: globalTokens.hal_black,
836
- underlineFocusColorOnDark: globalTokens.hal_white,
837
- underlineThickness: "1px",
877
+ labelFontWeight: globalTokens.type_semibold,
878
+ labelLineHeight: globalTokens.type_leading_loose_01,
879
+ optionalLabelFontWeight: globalTokens.type_regular,
880
+ helperTextFontColor: globalTokens.hal_black,
881
+ helperTextFontSize: globalTokens.type_scale_01,
882
+ helperTextFontStyle: globalTokens.type_normal,
883
+ helperTextFontWeight: globalTokens.type_regular,
884
+ helperTextLineHeight: globalTokens.type_leading_normal,
885
+ placeholderFontColor: "#000000b3",
838
886
  valueFontColor: globalTokens.hal_black,
839
- valueFontColorOnDark: globalTokens.hal_white,
840
887
  valueFontSize: globalTokens.type_scale_03,
841
888
  valueFontStyle: globalTokens.type_normal,
842
889
  valueFontWeight: globalTokens.type_regular,
843
- valueIconColor: globalTokens.hal_black,
844
- valueIconColorOnDark: globalTokens.hal_white,
845
- valueIconSize: "20px",
846
- valueIconSpacing: "12px",
847
- arrowColor: globalTokens.hal_black,
848
- arrowColorOnDark: globalTokens.hal_white,
849
- focusColor: globalTokens.hal_blue_l_50,
850
- focusColorOnDark: globalTokens.hal_blue_l_50
890
+ actionIconColor: globalTokens.hal_black,
891
+ hoverActionIconColor: globalTokens.hal_black,
892
+ activeActionIconColor: globalTokens.hal_black,
893
+ actionBackgroundColor: globalTokens.transparent,
894
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
895
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
896
+ listOptionFontColor: globalTokens.hal_black,
897
+ listOptionFontSize: globalTokens.type_scale_02,
898
+ listOptionFontStyle: globalTokens.type_normal,
899
+ listOptionFontWeight: globalTokens.type_regular,
900
+ listOptionIconColor: globalTokens.hal_black,
901
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
902
+ listGroupLabelFontWeight: globalTokens.type_semibold,
903
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50,
904
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
905
+ collapseIndicatorColor: globalTokens.hal_black,
906
+ listDialogBackgroundColor: globalTokens.hal_white,
907
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
908
+ selectedListOptionBackgroundColor: globalTokens.hal_blue_l_95,
909
+ selectedHoverListOptionBackgroundColor: globalTokens.color_blue_200,
910
+ selectedActiveListOptionBackgroundColor: globalTokens.hal_blue_l_80,
911
+ selectedListOptionIconColor: globalTokens.hal_blue_d_20,
912
+ unselectedHoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
913
+ unselectedActiveListOptionBackgroundColor: globalTokens.hal_grey_l_90,
914
+ selectionIndicatorFontColor: globalTokens.hal_black,
915
+ selectionIndicatorFontSize: globalTokens.type_scale_01,
916
+ selectionIndicatorFontStyle: globalTokens.type_regular,
917
+ selectionIndicatorFontWeight: globalTokens.type_normal,
918
+ selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
919
+ selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
920
+ enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
921
+ enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
922
+ hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
923
+ hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
924
+ activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
925
+ activeSelectionIndicatorActionIconColor: globalTokens.hal_black
851
926
  },
852
927
  sidenav: {
853
928
  backgroundColor: globalTokens.hal_grey_l_95,
854
929
  arrowContainerColor: globalTokens.hal_grey_l_90,
855
930
  arrowColor: globalTokens.hal_black,
856
931
  titleFontFamily: globalTokens.type_sans,
857
- titleFontSize: globalTokens.type_scale_05,
932
+ titleFontSize: globalTokens.type_scale_04,
858
933
  titleFontStyle: globalTokens.type_normal,
859
- titleFontWeight: globalTokens.type_regular,
860
- titleFontColor: globalTokens.hal_black,
934
+ titleFontWeight: globalTokens.type_semibold,
935
+ titleFontColor: globalTokens.color_grey_800,
861
936
  titleFontTextTransform: "none",
862
937
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
863
- subtitleFontFamily: globalTokens.type_sans,
864
- subtitleFontSize: globalTokens.type_scale_03,
865
- subtitleFontStyle: globalTokens.type_normal,
866
- subtitleFontWeight: globalTokens.type_regular,
867
- subtitleFontColor: globalTokens.color_grey_800,
868
- subtitleFontTextTransform: globalTokens.type_uppercase,
869
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
938
+ groupTitleFontFamily: globalTokens.type_sans,
939
+ groupTitleFontSize: globalTokens.type_scale_02,
940
+ groupTitleFontStyle: globalTokens.type_normal,
941
+ groupTitleFontWeight: globalTokens.type_semibold,
942
+ groupTitleFontColor: globalTokens.black,
943
+ groupTitleHoverBackgroundColor: globalTokens.hal_grey_l_90,
944
+ groupTitleActiveBackgroundColor: globalTokens.hal_grey_l_80,
945
+ groupTitleSelectedFontColor: globalTokens.white,
946
+ groupTitleSelectedBackgroundColor: globalTokens.color_grey_800,
947
+ groupTitleSelectedHoverFontColor: globalTokens.white,
948
+ groupTitleSelectedHoverBackgroundColor: globalTokens.color_grey_600,
949
+ groupTitleFontTextTransform: globalTokens.type_uppercase,
950
+ groupTitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
870
951
  linkFontFamily: globalTokens.type_sans,
871
952
  linkFontSize: globalTokens.type_scale_02,
872
953
  linkFontStyle: globalTokens.type_normal,
873
954
  linkFontWeight: globalTokens.type_regular,
874
955
  linkFontColor: globalTokens.color_grey_800,
956
+ linkHoverBackgroundColor: globalTokens.hal_grey_l_90,
957
+ linkSelectedFontColor: globalTokens.white,
958
+ linkSelectedBackgroundColor: globalTokens.color_grey_800,
959
+ linkSelectedHoverFontColor: globalTokens.white,
960
+ linkSelectedHoverBackgroundColor: globalTokens.color_grey_600,
875
961
  linkFontTextTransform: "none",
876
962
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
877
963
  linkTextDecoration: globalTokens.type_no_line,
@@ -885,16 +971,39 @@ var componentTokens = {
885
971
  },
886
972
  slider: {
887
973
  fontFamily: globalTokens.type_sans,
888
- fontSize: globalTokens.type_scale_03,
889
- fontStyle: globalTokens.type_normal,
890
- fontWeight: globalTokens.type_regular,
974
+ limitValuesFontColor: globalTokens.hal_black,
975
+ limitValuesFontColorOnDark: globalTokens.hal_white,
976
+ limitValuesFontSize: globalTokens.type_scale_03,
977
+ limitValuesFontStyle: globalTokens.type_normal,
978
+ limitValuesFontWeight: globalTokens.type_regular,
979
+ limitValuesFontLetterSpacing: globalTokens.type_spacing_normal,
980
+ disabledLimitValuesFontColor: globalTokens.hal_grey_l_60,
981
+ labelFontFamily: globalTokens.type_sans,
982
+ labelFontSize: globalTokens.type_scale_02,
983
+ labelFontStyle: globalTokens.type_normal,
984
+ labelFontWeight: globalTokens.type_semibold,
985
+ labelLineHeight: globalTokens.type_leading_loose_01,
986
+ helperTextFontFamily: globalTokens.type_sans,
987
+ helperTextFontSize: globalTokens.type_scale_01,
988
+ helperTextFontStyle: globalTokens.type_normal,
989
+ helperTextFontWeight: globalTokens.type_regular,
990
+ helperTextLineHeight: globalTokens.type_leading_normal,
891
991
  fontColor: globalTokens.hal_black,
892
992
  fontColorOnDark: globalTokens.hal_white,
893
- disabledFontColor: globalTokens.hal_grey_l_60,
894
- fontLetterSpacing: globalTokens.type_spacing_normal,
993
+ labelFontColor: globalTokens.hal_black,
994
+ labelFontColorOnDark: globalTokens.hal_white,
995
+ helperTextFontColor: globalTokens.hal_black,
996
+ helperTextFontColorOnDark: globalTokens.hal_white,
997
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
998
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
999
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1000
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
895
1001
  thumbHeight: "12px",
896
1002
  thumbWidth: "12px",
1003
+ hoverThumbHeight: "14px",
1004
+ hoverThumbWidth: "14px",
897
1005
  thumbVerticalPosition: "12px",
1006
+ hoverThumbVerticalPosition: "11px",
898
1007
  thumbBackgroundColor: globalTokens.hal_blue_s_35,
899
1008
  thumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
900
1009
  hoverThumbScale: "1.166666",
@@ -929,11 +1038,14 @@ var componentTokens = {
929
1038
  disabledTotalLineColor: globalTokens.hal_grey_l_95,
930
1039
  disabledTotalLineColorOnDark: globalTokens.hal_grey_s_40,
931
1040
  focusColor: globalTokens.hal_blue_l_50,
932
- focusColorOnDark: globalTokens.hal_blue_l_50
1041
+ focusColorOnDark: globalTokens.hal_blue_l_50,
1042
+ floorLabelMarginRight: globalTokens.type_scale_03,
1043
+ ceilLabelMarginLeft: globalTokens.type_scale_03,
1044
+ inputMarginLeft: globalTokens.type_scale_06
933
1045
  },
934
1046
  spinner: {
935
1047
  trackCircleColor: "#5f249f",
936
- trackCircleColorOnDark: "#a46ede",
1048
+ trackCircleColorOverlay: "#a46ede",
937
1049
  totalCircleColor: globalTokens.white,
938
1050
  labelFontFamily: globalTokens.type_sans,
939
1051
  labelFontSize: globalTokens.type_scale_02,
@@ -967,50 +1079,54 @@ var componentTokens = {
967
1079
  "switch": {
968
1080
  checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
969
1081
  checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
970
- checkedThumbBackgroundColor: globalTokens.white,
971
- checkedThumbBackgroundColorOnDark: globalTokens.white,
972
- uncheckedTrackBackgroundColor: globalTokens.lightGrey,
973
- uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
974
- uncheckedThumbBackgroundColor: globalTokens.white,
975
- uncheckedThumbBackgroundColorOnDark: globalTokens.white,
976
- disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
1082
+ checkedThumbBackgroundColor: globalTokens.hal_white,
1083
+ checkedThumbBackgroundColorOnDark: globalTokens.hal_white,
1084
+ uncheckedTrackBackgroundColor: globalTokens.hal_grey_l_75,
1085
+ uncheckedTrackBackgroundColorOnDark: globalTokens.hal_grey_l_75,
1086
+ uncheckedThumbBackgroundColor: globalTokens.hal_white,
1087
+ uncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1088
+ disabledCheckedTrackBackgroundColor: globalTokens.hal_purple_l_95,
977
1089
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
978
- disabledCheckedThumbBackgroundColor: globalTokens.white,
979
- disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
980
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
1090
+ disabledCheckedThumbBackgroundColor: globalTokens.hal_white,
1091
+ disabledCheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1092
+ disabledUncheckedTrackBackgroundColor: globalTokens.hal_grey_l_95,
981
1093
  disabledUncheckedTrackBackgroundColorOnDark: "#363636",
982
- disabledUncheckedThumbBackgroundColor: globalTokens.white,
983
- disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
984
- disabledLabelFontColor: globalTokens.lighterBlack,
1094
+ disabledUncheckedThumbBackgroundColor: globalTokens.hal_white,
1095
+ disabledUncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1096
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
985
1097
  disabledLabelFontColorOnDark: "#575757",
986
1098
  disabledLabelFontStyle: globalTokens.type_normal,
987
1099
  labelFontFamily: globalTokens.type_sans,
988
1100
  labelFontSize: globalTokens.type_scale_root,
989
1101
  labelFontStyle: globalTokens.type_normal,
990
1102
  labelFontWeight: globalTokens.type_regular,
991
- labelFontColor: globalTokens.black,
992
- labelFontColorOnDark: globalTokens.white,
993
- thumbFocusColor: globalTokens.blue,
1103
+ labelFontColor: globalTokens.hal_black,
1104
+ labelFontColorOnDark: globalTokens.hal_white,
1105
+ thumbFocusColor: globalTokens.hal_blue_l_50,
994
1106
  thumbFocusColorOnDark: "#1682FF",
995
1107
  thumbHeight: "24px",
996
1108
  thumbWidth: "24px",
997
- thumbShift: "40%",
1109
+ thumbShift: "1.25rem",
998
1110
  trackHeight: "12px",
999
- trackWidth: "60px",
1000
- spaceBetweenLabelSwitch: "0px"
1111
+ trackWidth: "36px",
1112
+ spaceBetweenLabelSwitch: "8px"
1001
1113
  },
1002
1114
  tag: {
1003
1115
  fontFamily: globalTokens.type_sans,
1004
- fontColor: globalTokens.black,
1116
+ fontColor: globalTokens.hal_black,
1005
1117
  fontSize: globalTokens.type_scale_02,
1006
1118
  fontStyle: globalTokens.type_normal,
1007
1119
  fontWeight: globalTokens.type_regular,
1008
- fontTextTransform: globalTokens.type_uppercase,
1009
- height: "43px",
1010
- iconColor: globalTokens.white,
1011
- iconSectionWidth: "48px",
1120
+ labelPaddingTop: "0px",
1121
+ labelPaddingBottom: "0px",
1122
+ labelPaddingLeft: "16px",
1123
+ labelPaddingRight: "16px",
1124
+ height: "40px",
1125
+ iconColor: globalTokens.hal_white,
1126
+ iconSectionWidth: "40px",
1012
1127
  iconHeight: "24px",
1013
- iconWidth: "auto"
1128
+ iconWidth: "auto",
1129
+ focusColor: globalTokens.hal_blue_l_50
1014
1130
  },
1015
1131
  table: {
1016
1132
  rowSeparatorThickness: "1px",
@@ -1018,7 +1134,7 @@ var componentTokens = {
1018
1134
  rowSeparatorColor: globalTokens.lightGrey,
1019
1135
  dataBackgroundColor: globalTokens.white,
1020
1136
  dataFontFamily: globalTokens.type_sans,
1021
- dataFontSize: globalTokens.type_scale_root,
1137
+ dataFontSize: globalTokens.type_scale_02,
1022
1138
  dataFontStyle: globalTokens.type_normal,
1023
1139
  dataFontWeight: globalTokens.type_regular,
1024
1140
  dataFontColor: globalTokens.black,
@@ -1064,6 +1180,7 @@ var componentTokens = {
1064
1180
  disabledFontColor: "#999999",
1065
1181
  disabledIconColor: "#999999",
1066
1182
  disabledFontStyle: globalTokens.type_normal,
1183
+ disabledBadgeBackgroundColor: "#0000004D",
1067
1184
  hoverBackgroundColor: "#f2eafa",
1068
1185
  pressedBackgroundColor: "#e5d5f6",
1069
1186
  pressedFontWeight: globalTokens.type_semibold,
@@ -1086,41 +1203,6 @@ var componentTokens = {
1086
1203
  badgeRadiusWithNotificationNumber: "10px"
1087
1204
  },
1088
1205
  textarea: {
1089
- fontFamily: globalTokens.type_sans,
1090
- assistiveTextFontSize: globalTokens.type_scale_01,
1091
- assistiveTextFontStyle: globalTokens.type_normal,
1092
- assistiveTextFontWeight: globalTokens.type_regular,
1093
- assistiveTextFontColor: globalTokens.black,
1094
- assistiveTextFontColorOnDark: globalTokens.white,
1095
- assistiveTextLetterSpacing: "0.03333em",
1096
- disabledColor: globalTokens.lighterBlack,
1097
- disabledColorOnDark: "#575757",
1098
- errorColor: globalTokens.red,
1099
- errorColorOnDark: globalTokens.hal_red_l_60,
1100
- scrollBarThumbColor: globalTokens.darkGrey,
1101
- scrollBarThumbColorOnDark: globalTokens.white,
1102
- scrollBarTrackColor: globalTokens.lightGrey,
1103
- scrollBarTrackColorOnDark: "#999999",
1104
- labelFontSize: globalTokens.type_scale_03,
1105
- labelFontStyle: globalTokens.type_normal,
1106
- labelFontWeight: globalTokens.type_regular,
1107
- labelFontColor: globalTokens.black,
1108
- labelFontColorOnDark: globalTokens.white,
1109
- labelLetterSpacing: "0.00938em",
1110
- valueFontSize: globalTokens.type_scale_03,
1111
- valueFontStyle: globalTokens.type_normal,
1112
- valueFontWeight: globalTokens.type_regular,
1113
- valueFontColor: globalTokens.black,
1114
- valueFontColorOnDark: globalTokens.white,
1115
- valueLetterSpacing: globalTokens.type_spacing_normal,
1116
- valueLineHeight: "1.1875em",
1117
- underlineColor: globalTokens.black,
1118
- underlineColorOnDark: globalTokens.white,
1119
- underlineFocusColor: globalTokens.black,
1120
- underlineFocusColorOnDark: globalTokens.white,
1121
- underlineThickness: "1px"
1122
- },
1123
- newTextarea: {
1124
1206
  fontFamily: globalTokens.type_sans,
1125
1207
  enabledBorderColor: globalTokens.hal_black,
1126
1208
  enabledBorderColorOnDark: globalTokens.hal_white,
@@ -1134,8 +1216,10 @@ var componentTokens = {
1134
1216
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1135
1217
  errorBorderColor: globalTokens.hal_red_s_41,
1136
1218
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
1137
- hoverErrorBorderColor: "#fe0123",
1219
+ hoverErrorBorderColor: globalTokens.color_red_600,
1138
1220
  hoverErrorBorderColorOnDark: "#fe677b",
1221
+ inputMarginTop: globalTokens.spacing_02,
1222
+ inputMarginBottom: globalTokens.spacing_02,
1139
1223
  errorMessageColor: globalTokens.hal_red_s_41,
1140
1224
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
1141
1225
  labelFontColor: globalTokens.hal_black,
@@ -1143,6 +1227,7 @@ var componentTokens = {
1143
1227
  labelFontSize: globalTokens.type_scale_02,
1144
1228
  labelFontStyle: globalTokens.type_normal,
1145
1229
  labelFontWeight: globalTokens.type_semibold,
1230
+ labelLineHeight: globalTokens.type_leading_loose_01,
1146
1231
  disabledLabelFontColor: globalTokens.hal_grey_l_60,
1147
1232
  disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1148
1233
  optionalLabelFontWeight: globalTokens.type_regular,
@@ -1151,9 +1236,10 @@ var componentTokens = {
1151
1236
  helperTextFontSize: globalTokens.type_scale_01,
1152
1237
  helperTextFontStyle: globalTokens.type_normal,
1153
1238
  helperTextFontWeight: globalTokens.type_regular,
1239
+ helperTextLineHeight: globalTokens.type_leading_normal,
1154
1240
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1155
1241
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1156
- placeholderFontColor: "#808080",
1242
+ placeholderFontColor: "#000000b3",
1157
1243
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1158
1244
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1159
1245
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -1166,148 +1252,112 @@ var componentTokens = {
1166
1252
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1167
1253
  },
1168
1254
  toggleGroup: {
1169
- fontFamily: globalTokens.type_sans,
1170
- fontSize: globalTokens.type_scale_03,
1171
- fontStyle: globalTokens.type_normal,
1172
- fontWeight: globalTokens.type_regular,
1173
- selectedBackgroundColor: globalTokens.hal_purple_s_38,
1174
- selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1175
- selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1176
- selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1177
- selectedFontColor: globalTokens.hal_white,
1178
- selectedDisabledFontColor: "#cbacec",
1255
+ containerBackgroundColor: globalTokens.color_grey_50,
1256
+ containerBorderColor: globalTokens.hal_grey_l_60,
1257
+ labelFontColor: globalTokens.hal_black,
1258
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1259
+ helperTextFontColor: globalTokens.hal_black,
1260
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
1179
1261
  unselectedBackgroundColor: globalTokens.hal_grey_l_90,
1180
1262
  unselectedHoverBackgroundColor: globalTokens.hal_grey_l_80,
1181
1263
  unselectedActiveBackgroundColor: globalTokens.hal_purple_s_38,
1182
1264
  unselectedDisabledBackgroundColor: globalTokens.hal_grey_l_95,
1183
1265
  unselectedFontColor: globalTokens.hal_black,
1184
1266
  unselectedDisabledFontColor: globalTokens.hal_grey_l_60,
1185
- iconSize: "24px",
1186
- iconPaddingTop: "8px",
1187
- iconPaddingBottom: "8px",
1188
- iconPaddingRight: "8px",
1189
- iconPaddingLeft: "8px",
1190
- labelPaddingTop: "8px",
1191
- labelPaddingBottom: "8px",
1192
- labelPaddingLeft: "24px",
1193
- labelPaddingRight: "24px",
1194
- focusColor: globalTokens.hal_blue_l_50
1195
- },
1196
- upload: {
1197
- fontFamily: globalTokens.type_sans,
1198
- shadowColor: globalTokens.lightWhite,
1199
- scrollBarThumbColor: globalTokens.darkGrey,
1200
- scrollBarTrackColor: globalTokens.lightGrey,
1201
- errorColor: globalTokens.red,
1202
- backgroundColor: globalTokens.white,
1203
- draggingStateBackgroundColor: globalTokens.lightWhite,
1204
- dragAndDropIconColor: globalTokens.black,
1205
- dragAndDropIconSize: "43.5px",
1206
- dragAndDropTitleFontSize: globalTokens.type_scale_04,
1207
- dragAndDropTitleFontStyle: globalTokens.type_normal,
1208
- dragAndDropTitleFontWeight: globalTokens.type_bold,
1209
- dragAndDropTitleFontTextTransform: "none",
1210
- dragAndDropTitleFontColor: globalTokens.black,
1211
- dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1212
- dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1213
- dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1214
- dragAndDropDescriptionFontTextTransform: "none",
1215
- dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1216
- dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1217
- dragAndDropDraggingStateIconSize: "74.5px",
1218
- dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1219
- dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1220
- dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1221
- dragAndDropDraggingStateFontTextTransform: "none",
1222
- dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1223
- dragAndDropAreaIconColor: globalTokens.darkGrey,
1224
- dragAndDropAreaIconSize: "24px",
1225
- dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1226
- dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1227
- dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1228
- dragAndDropAreaTextFontTextTransform: "none",
1229
- dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1230
- fileDeleteIconColor: globalTokens.black,
1231
- fileDeleteIconSize: "30px",
1232
- fileUnderlineColor: globalTokens.lightGrey,
1233
- fileUnderlineThickness: "1px",
1234
- fileNameFontSize: globalTokens.type_scale_03,
1235
- fileNameFontStyle: globalTokens.type_normal,
1236
- fileNameFontWeight: globalTokens.type_regular,
1237
- fileNameFontTextTransform: "none",
1238
- fileNameFontColor: globalTokens.black,
1239
- fileTypeFontSize: globalTokens.type_scale_01,
1240
- fileTypeFontStyle: globalTokens.type_normal,
1241
- fileTypeFontWeight: globalTokens.type_regular,
1242
- fileTypeFontTextTransform: globalTokens.type_uppercase,
1243
- fileTypeFontColor: globalTokens.darkGrey,
1244
- hoverFileColor: globalTokens.darkWhite,
1245
- uploadedFileIconColor: globalTokens.lightGrey,
1246
- uploadedFileIconSize: "24px",
1247
- uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1248
- uploadedFilesTitleFontStyle: globalTokens.type_normal,
1249
- uploadedFilesTitleFontWeight: globalTokens.type_regular,
1250
- uploadedFilesTitleFontTextTransform: "none",
1251
- uploadedFilesTitleFontColor: globalTokens.black,
1252
- uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1253
- uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1254
- uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1255
- uploadedFilesSubtitleFontTextTransform: "none",
1256
- uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1257
- uploadedFilesNumberFontWeight: globalTokens.type_bold
1267
+ selectedBackgroundColor: globalTokens.hal_purple_s_38,
1268
+ selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1269
+ selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1270
+ selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1271
+ selectedFontColor: globalTokens.hal_white,
1272
+ selectedDisabledFontColor: globalTokens.color_purple_300,
1273
+ focusColor: globalTokens.hal_blue_l_50,
1274
+ labelFontFamily: globalTokens.type_sans,
1275
+ labelFontSize: globalTokens.type_scale_02,
1276
+ labelFontStyle: globalTokens.type_normal,
1277
+ labelFontWeight: globalTokens.type_semibold,
1278
+ labelLineHeight: globalTokens.type_leading_loose_01,
1279
+ helperTextFontFamily: globalTokens.type_sans,
1280
+ helperTextFontSize: globalTokens.type_scale_01,
1281
+ helperTextFontStyle: globalTokens.type_normal,
1282
+ helperTextFontWeight: globalTokens.type_regular,
1283
+ helperTextLineHeight: globalTokens.type_leading_normal,
1284
+ optionLabelFontFamily: globalTokens.type_sans,
1285
+ optionLabelFontSize: globalTokens.type_scale_03,
1286
+ optionLabelFontStyle: globalTokens.type_normal,
1287
+ optionLabelFontWeight: globalTokens.type_regular,
1288
+ iconPaddingRight: globalTokens.spacing_03,
1289
+ iconPaddingLeft: globalTokens.spacing_03,
1290
+ labelPaddingLeft: globalTokens.spacing_06,
1291
+ labelPaddingRight: globalTokens.spacing_06,
1292
+ iconMarginRight: globalTokens.spacing_03,
1293
+ containerMarginTop: globalTokens.spacing_02,
1294
+ optionBorderThickness: globalTokens.border_width_0,
1295
+ optionBorderStyle: globalTokens.border_none,
1296
+ optionBorderRadius: globalTokens.border_radius_medium,
1297
+ containerBorderThickness: globalTokens.border_width_1,
1298
+ containerBorderStyle: globalTokens.border_solid,
1299
+ containerBorderRadius: globalTokens.border_radius_large,
1300
+ optionFocusBorderThickness: globalTokens.border_width_2
1258
1301
  },
1259
1302
  wizard: {
1260
- disabledBackgroundColor: globalTokens.lightGrey,
1261
- disabledFontColor: globalTokens.darkGrey,
1262
- stepContainerFontSize: globalTokens.type_scale_03,
1263
- stepContainerFontFamily: globalTokens.type_sans,
1264
- stepContainerFontStyle: globalTokens.type_normal,
1265
- stepContainerFontWeight: globalTokens.type_regular,
1266
- stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1267
- stepContainerFontColor: globalTokens.black,
1268
- stepContainerSelectedFontColor: globalTokens.white,
1269
- stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1270
- stepContainerBackgroundColor: globalTokens.white,
1271
- stepContainerIconSize: "19px",
1303
+ visitedStepFontColor: globalTokens.hal_black,
1304
+ visitedStepBackgroundColor: globalTokens.hal_white,
1305
+ visitedStepBorderColor: globalTokens.hal_black,
1306
+ unvisitedStepFontColor: globalTokens.hal_grey_s_40,
1307
+ unvisitedLabelFontColor: globalTokens.hal_grey_s_40,
1308
+ unvisitedHelperTextFontColor: globalTokens.hal_grey_s_40,
1309
+ unvisitedStepBackgroundColor: globalTokens.transparent,
1310
+ unvisitedStepBorderColor: globalTokens.hal_grey_s_40,
1311
+ selectedStepFontColor: globalTokens.white,
1312
+ selectedStepBackgroundColor: globalTokens.hal_purple_s_38,
1313
+ selectedStepBorderColor: globalTokens.hal_purple_s_38,
1314
+ selectedLabelFontColor: globalTokens.hal_black,
1315
+ selectedHelperTextFontColor: globalTokens.hal_black,
1316
+ selectedStepWidth: "32px",
1317
+ selectedStepHeight: "32px",
1318
+ selectedStepBorderThickness: "2px",
1319
+ selectedStepBorderStyle: "solid",
1320
+ selectedStepBorderRadius: "45px",
1321
+ stepFontSize: globalTokens.type_scale_03,
1322
+ stepFontFamily: globalTokens.type_sans,
1323
+ stepFontStyle: globalTokens.type_normal,
1324
+ stepFontWeight: globalTokens.type_regular,
1325
+ stepFontTracking: globalTokens.type_spacing_wide_02,
1326
+ stepIconSize: "20px",
1327
+ stepWidth: "32px",
1328
+ stepHeight: "32px",
1329
+ stepBorderThickness: "2px",
1330
+ stepBorderStyle: "solid",
1331
+ stepBorderRadius: "45px",
1332
+ visitedLabelFontColor: globalTokens.hal_black,
1272
1333
  labelFontSize: globalTokens.type_scale_03,
1273
1334
  labelFontFamily: globalTokens.type_sans,
1274
1335
  labelFontStyle: globalTokens.type_normal,
1275
1336
  labelFontWeight: globalTokens.type_regular,
1276
- labelLetterSpacing: globalTokens.type_spacing_normal,
1337
+ labelFontTracking: globalTokens.type_spacing_normal,
1277
1338
  labelFontTextTransform: "none",
1278
1339
  labelTextAlign: "left",
1279
- labelFontColor: globalTokens.darkGrey,
1280
- visitedLabelFontColor: globalTokens.black,
1281
- visitedDescriptionFontColor: globalTokens.black,
1282
- descriptionFontSize: globalTokens.type_scale_01,
1283
- descriptionFontFamily: globalTokens.type_sans,
1284
- descriptionFontStyle: globalTokens.type_normal,
1285
- descriptionFontWeight: globalTokens.type_regular,
1286
- descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1287
- descriptionFontTextTransform: "none",
1288
- descriptionFontColor: globalTokens.darkGrey,
1289
- descriptionTextAlign: "left",
1290
- circleWidth: "32px",
1291
- circleHeight: "32px",
1292
- circleBorderThickness: "2px",
1293
- circleBorderStyle: "solid",
1294
- circleBorderRadius: "45px",
1295
- circleBorderColor: globalTokens.black,
1296
- selectedCircleWidth: "32px",
1297
- selectedCircleHeight: "32px",
1298
- selectedCircleBorderThickness: "2px",
1299
- selectedCircleBorderStyle: "solid",
1300
- selectedCircleBorderRadius: "45px",
1301
- selectedCircleBorderColor: globalTokens.purple,
1302
- disabledCircleWidth: "32px",
1303
- disabledCircleHeight: "32px",
1304
- disabledCircleBorderThickness: "2px",
1305
- disabledCircleBorderStyle: "solid",
1306
- disabledCircleBorderRadius: "45px",
1307
- disabledCircleBorderColor: globalTokens.lightGrey,
1340
+ helperTextFontSize: globalTokens.type_scale_02,
1341
+ helperTextFontFamily: globalTokens.type_sans,
1342
+ helperTextFontStyle: globalTokens.type_normal,
1343
+ helperTextFontWeight: globalTokens.type_regular,
1344
+ helperTextFontTracking: globalTokens.type_spacing_normal,
1345
+ helperTextFontTextTransform: "none",
1346
+ visitedHelperTextFontColor: globalTokens.hal_black,
1347
+ helperTextTextAlign: "left",
1348
+ disabledStepBackgroundColor: globalTokens.hal_grey_l_95,
1349
+ disabledStepFontColor: globalTokens.hal_grey_l_60,
1350
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1351
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1352
+ disabledStepBorderColor: globalTokens.hal_grey_l_95,
1353
+ disabledStepWidth: "32px",
1354
+ disabledStepHeight: "32px",
1355
+ disabledStepBorderThickness: "2px",
1356
+ disabledStepBorderStyle: "solid",
1357
+ disabledStepBorderRadius: "45px",
1308
1358
  separatorBorderThickness: "1px",
1309
1359
  separatorBorderStyle: "solid",
1310
- separatorColor: globalTokens.lightGrey,
1360
+ separatorColor: globalTokens.hal_grey_s_40,
1311
1361
  focusColor: globalTokens.hal_blue_l_50
1312
1362
  }
1313
1363
  };
@@ -1323,12 +1373,11 @@ var spaces = {
1323
1373
  };
1324
1374
  exports.spaces = spaces;
1325
1375
  var responsiveSizes = {
1326
- mobileSmall: "320",
1327
- mobileMedium: "375",
1328
- mobileLarge: "425",
1329
- tablet: "768",
1330
- laptop: "1024",
1331
- desktop: "1440"
1376
+ xsmall: "20",
1377
+ small: "30",
1378
+ medium: "45",
1379
+ large: "66",
1380
+ xlarge: "90"
1332
1381
  };
1333
1382
  exports.responsiveSizes = responsiveSizes;
1334
1383
  var typeface = {
@@ -1363,4 +1412,97 @@ var typeface = {
1363
1412
  textTransform: "uppercase"
1364
1413
  }
1365
1414
  };
1366
- exports.typeface = typeface;
1415
+ exports.typeface = typeface;
1416
+ var defaultTranslatedComponentLabels = {
1417
+ formFields: {
1418
+ optionalLabel: "(Optional)",
1419
+ requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
1420
+ requiredValueErrorMessage: "This field is required. Please, enter a value.",
1421
+ formatRequestedErrorMessage: "Please match the format requested.",
1422
+ lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
1423
+ return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
1424
+ },
1425
+ logoAlternativeText: "Logo"
1426
+ },
1427
+ alert: {
1428
+ infoTitleText: "information",
1429
+ successTitleText: "success",
1430
+ warningTitleText: "warning",
1431
+ errorTitleText: "error"
1432
+ },
1433
+ dateInput: {
1434
+ invalidDateErrorMessage: "Invalid date."
1435
+ },
1436
+ fileInput: {
1437
+ fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1438
+ fileSizeLessThanErrorMessage: "File size must be less than max size.",
1439
+ multipleButtonLabelDefault: "Select files",
1440
+ singleButtonLabelDefault: "Select file",
1441
+ dropAreaButtonLabelDefault: "Select",
1442
+ multipleDropAreaLabelDefault: "or drop files",
1443
+ singleDropAreaLabelDefault: "or drop a file"
1444
+ },
1445
+ footer: {
1446
+ copyrightText: function copyrightText(year) {
1447
+ return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
1448
+ }
1449
+ },
1450
+ header: {
1451
+ closeIcon: "Close menu",
1452
+ hamburguerTitle: "Menu"
1453
+ },
1454
+ numberInput: {
1455
+ valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
1456
+ return "Value must be greater than or equal to ".concat(value, ".");
1457
+ },
1458
+ valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
1459
+ return "Value must be less than or equal to ".concat(value, ".");
1460
+ },
1461
+ decrementValueTitle: "Decrement value",
1462
+ incrementValueTitle: "Increment value"
1463
+ },
1464
+ paginator: {
1465
+ itemsPerPageText: "Items per page ",
1466
+ minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
1467
+ return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
1468
+ },
1469
+ goToPageText: "Go to page:",
1470
+ pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
1471
+ return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
1472
+ }
1473
+ },
1474
+ passwordInput: {
1475
+ inputShowPasswordTitle: "Show password",
1476
+ inputHidePasswordTitle: "Hide password"
1477
+ },
1478
+ quickNav: {
1479
+ contentTitle: "Contents"
1480
+ },
1481
+ radioGroup: {
1482
+ optionalItemLabelDefault: "N/A"
1483
+ },
1484
+ select: {
1485
+ noMatchesErrorMessage: "No matches found",
1486
+ actionClearSelectionTitle: "Clear selection",
1487
+ actionClearSearchTitle: "Clear search"
1488
+ },
1489
+ tabs: {
1490
+ scrollLeft: "Scroll left",
1491
+ scrollRight: "Scroll right"
1492
+ },
1493
+ textInput: {
1494
+ clearFieldActionTitle: "Clear field",
1495
+ searchingMessage: "Searching...",
1496
+ fetchingDataErrorMessage: "Error fetching data"
1497
+ },
1498
+ calendar: {
1499
+ days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1500
+ daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
1501
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1502
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
1503
+ },
1504
+ applicationLayout: {
1505
+ visibilityToggleTitle: "Toggle visibility sidenav"
1506
+ }
1507
+ };
1508
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;