@dxc-technology/halstack-react 0.0.0-5c36cd3 → 0.0.0-5c3ce19

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 (469) 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 +294 -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 +69 -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 +79 -0
  16. package/accordion-group/types.js +5 -0
  17. package/alert/Alert.d.ts +4 -0
  18. package/{dist/alert → alert}/Alert.js +48 -158
  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 +44 -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 +68 -0
  55. package/card/types.js +5 -0
  56. package/checkbox/Checkbox.d.ts +4 -0
  57. package/checkbox/Checkbox.js +250 -0
  58. package/checkbox/Checkbox.stories.tsx +208 -0
  59. package/checkbox/Checkbox.test.js +155 -0
  60. package/checkbox/types.d.ts +68 -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 +568 -421
  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 +543 -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 +44 -0
  93. package/dialog/types.js +5 -0
  94. package/dropdown/Dropdown.d.ts +4 -0
  95. package/dropdown/Dropdown.js +391 -0
  96. package/dropdown/Dropdown.stories.tsx +312 -0
  97. package/dropdown/Dropdown.test.js +585 -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 +551 -0
  106. package/file-input/FileInput.stories.tsx +535 -0
  107. package/file-input/FileInput.test.js +498 -0
  108. package/file-input/FileItem.d.ts +4 -0
  109. package/file-input/FileItem.js +161 -0
  110. package/file-input/types.d.ts +129 -0
  111. package/file-input/types.js +5 -0
  112. package/flex/Flex.d.ts +4 -0
  113. package/flex/Flex.js +69 -0
  114. package/flex/Flex.stories.tsx +103 -0
  115. package/flex/types.d.ts +32 -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 +66 -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 +48 -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 +542 -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 +47 -33
  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 +181 -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 +117 -0
  196. package/quick-nav/QuickNav.stories.tsx +342 -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 +283 -0
  203. package/radio-group/RadioGroup.stories.tsx +101 -0
  204. package/radio-group/RadioGroup.test.js +722 -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 -149
  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 +645 -0
  221. package/select/Select.stories.tsx +627 -0
  222. package/select/Select.test.js +2233 -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 +343 -0
  233. package/slider/Slider.stories.tsx +183 -0
  234. package/slider/Slider.test.js +250 -0
  235. package/slider/types.d.ts +86 -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 +262 -0
  245. package/switch/Switch.stories.tsx +138 -0
  246. package/switch/Switch.test.js +225 -0
  247. package/switch/types.d.ts +66 -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 +677 -0
  285. package/text-input/TextInput.stories.tsx +481 -0
  286. package/text-input/TextInput.test.js +1624 -0
  287. package/text-input/types.d.ts +197 -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 -241
  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 -585
  376. package/dist/select/Select.stories.js +0 -235
  377. package/dist/select/readme.md +0 -72
  378. package/dist/sidenav/Sidenav.js +0 -177
  379. package/dist/slider/Slider.js +0 -319
  380. package/dist/slider/Slider.stories.js +0 -241
  381. package/dist/slider/readme.md +0 -64
  382. package/dist/spinner/Spinner.js +0 -379
  383. package/dist/spinner/Spinner.stories.js +0 -183
  384. package/dist/spinner/readme.md +0 -65
  385. package/dist/switch/Switch.js +0 -222
  386. package/dist/switch/Switch.stories.js +0 -134
  387. package/dist/switch/readme.md +0 -133
  388. package/dist/tabs/Tabs.js +0 -343
  389. package/dist/tabs/Tabs.stories.js +0 -130
  390. package/dist/tabs/readme.md +0 -78
  391. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  392. package/dist/tabs-for-sections/readme.md +0 -78
  393. package/dist/tag/Tag.js +0 -288
  394. package/dist/textarea/Textarea.js +0 -264
  395. package/dist/toggle/Toggle.js +0 -220
  396. package/dist/toggle/Toggle.stories.js +0 -297
  397. package/dist/toggle/readme.md +0 -80
  398. package/dist/toggle-group/ToggleGroup.js +0 -223
  399. package/dist/upload/Upload.js +0 -205
  400. package/dist/upload/Upload.stories.js +0 -72
  401. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  402. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  403. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  404. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  405. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  406. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  407. package/dist/upload/file-upload/FileToUpload.js +0 -184
  408. package/dist/upload/file-upload/audio-icon.svg +0 -4
  409. package/dist/upload/file-upload/close.svg +0 -4
  410. package/dist/upload/file-upload/file-icon.svg +0 -4
  411. package/dist/upload/file-upload/video-icon.svg +0 -4
  412. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  413. package/dist/upload/readme.md +0 -37
  414. package/dist/upload/transaction/Transaction.js +0 -175
  415. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  416. package/dist/upload/transaction/audio-icon.svg +0 -4
  417. package/dist/upload/transaction/error-icon.svg +0 -4
  418. package/dist/upload/transaction/file-icon-err.svg +0 -4
  419. package/dist/upload/transaction/file-icon.svg +0 -4
  420. package/dist/upload/transaction/image-icon-err.svg +0 -4
  421. package/dist/upload/transaction/image-icon.svg +0 -4
  422. package/dist/upload/transaction/success-icon.svg +0 -4
  423. package/dist/upload/transaction/video-icon-err.svg +0 -4
  424. package/dist/upload/transaction/video-icon.svg +0 -4
  425. package/dist/upload/transactions/Transactions.js +0 -138
  426. package/dist/wizard/Wizard.js +0 -411
  427. package/dist/wizard/invalid_icon.svg +0 -5
  428. package/dist/wizard/valid_icon.svg +0 -5
  429. package/dist/wizard/validation-wrong.svg +0 -6
  430. package/test/Accordion.test.js +0 -33
  431. package/test/AccordionGroup.test.js +0 -125
  432. package/test/Alert.test.js +0 -53
  433. package/test/Box.test.js +0 -10
  434. package/test/Button.test.js +0 -18
  435. package/test/Card.test.js +0 -30
  436. package/test/Checkbox.test.js +0 -45
  437. package/test/Chip.test.js +0 -25
  438. package/test/Date.test.js +0 -393
  439. package/test/Dialog.test.js +0 -23
  440. package/test/Dropdown.test.js +0 -145
  441. package/test/Footer.test.js +0 -99
  442. package/test/Header.test.js +0 -39
  443. package/test/Heading.test.js +0 -35
  444. package/test/InputText.test.js +0 -240
  445. package/test/Link.test.js +0 -43
  446. package/test/NewDate.test.js +0 -203
  447. package/test/NewInputText.test.js +0 -817
  448. package/test/NewTextarea.test.js +0 -201
  449. package/test/Number.test.js +0 -241
  450. package/test/Paginator.test.js +0 -177
  451. package/test/Password.test.js +0 -76
  452. package/test/ProgressBar.test.js +0 -35
  453. package/test/Radio.test.js +0 -37
  454. package/test/ResultsetTable.test.js +0 -330
  455. package/test/Select.test.js +0 -189
  456. package/test/Sidenav.test.js +0 -45
  457. package/test/Slider.test.js +0 -82
  458. package/test/Spinner.test.js +0 -27
  459. package/test/Switch.test.js +0 -45
  460. package/test/Table.test.js +0 -36
  461. package/test/Tabs.test.js +0 -109
  462. package/test/TabsForSections.test.js +0 -34
  463. package/test/Tag.test.js +0 -32
  464. package/test/TextArea.test.js +0 -52
  465. package/test/ToggleGroup.test.js +0 -81
  466. package/test/Upload.test.js +0 -60
  467. package/test/Wizard.test.js +0 -130
  468. package/test/mocks/pngMock.js +0 -1
  469. 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,
@@ -385,22 +399,22 @@ var componentTokens = {
385
399
  iconSpacing: "8px",
386
400
  iconColor: globalTokens.hal_black,
387
401
  disabledIconColor: globalTokens.hal_grey_l_60,
388
- focusColor: globalTokens.hal_blue_s_35
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.blue,
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,
@@ -466,7 +483,60 @@ var componentTokens = {
466
483
  borderColor: globalTokens.transparent,
467
484
  scrollBarThumbColor: globalTokens.hal_grey_s_40,
468
485
  scrollBarTrackColor: globalTokens.lightGrey,
469
- focusColor: globalTokens.blue
486
+ focusColor: globalTokens.hal_blue_l_50
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
470
540
  },
471
541
  footer: {
472
542
  height: "124px",
@@ -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: "#FE344F",
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",
@@ -722,7 +744,14 @@ var componentTokens = {
722
744
  visitedUnderlineColor: globalTokens.purple,
723
745
  activeFontColor: globalTokens.black,
724
746
  activeUnderlineColor: globalTokens.black,
725
- focusColor: globalTokens.hal_blue_s_35
747
+ focusColor: globalTokens.hal_blue_l_50
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
726
755
  },
727
756
  paginator: {
728
757
  backgroundColor: globalTokens.darkWhite,
@@ -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%",
764
+ verticalPadding: "0.75rem",
765
+ horizontalPadding: "2rem",
737
766
  marginRight: "40px",
738
767
  marginLeft: "20px",
739
768
  itemsPerPageSelectorMarginLeft: "0px",
740
- itemsPerPageSelectorMarginRight: "30px",
769
+ itemsPerPageSelectorMarginRight: "0.5rem",
741
770
  pageSelectorMarginRight: "30px",
742
771
  pageSelectorMarginLeft: "0px",
743
- totalItemsContainerMarginRight: "30px",
772
+ totalItemsContainerMarginRight: "2.5rem",
744
773
  totalItemsContainerMarginLeft: "0px"
745
774
  },
746
775
  progressBar: {
@@ -772,124 +801,208 @@ 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.blue,
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
+ dividerBorderColor: globalTokens.hal_grey_l_75,
808
+ focusBorderColor: globalTokens.hal_blue_l_50,
809
+ focusBorderStyle: globalTokens.border_solid,
810
+ focusBorderThickness: globalTokens.border_width_2,
811
+ focusBorderRadius: globalTokens.border_width_2,
812
+ paddingTop: globalTokens.spacing_03,
813
+ paddingBottom: globalTokens.spacing_03,
814
+ paddingLeft: globalTokens.spacing_05,
815
+ paddingRight: globalTokens.spacing_05,
788
816
  fontFamily: globalTokens.type_sans,
789
- fontSize: globalTokens.type_scale_root,
817
+ fontSize: globalTokens.type_scale_02,
790
818
  fontStyle: globalTokens.type_normal,
791
819
  fontWeight: globalTokens.type_regular
792
820
  },
821
+ radioGroup: {
822
+ fontFamily: globalTokens.type_sans,
823
+ radioInputColor: globalTokens.hal_blue_l_45,
824
+ hoverRadioInputColor: globalTokens.hal_blue_s_35,
825
+ focusBorderColor: globalTokens.hal_blue_l_50,
826
+ activeRadioInputColor: globalTokens.hal_blue_d_20,
827
+ errorRadioInputColor: globalTokens.hal_red_s_41,
828
+ hoverErrorRadioInputColor: globalTokens.hal_red_d_30,
829
+ activeErrorRadioInputColor: globalTokens.hal_red_d_20,
830
+ readonlyRadioInputColor: globalTokens.hal_grey_l_60,
831
+ hoverReadonlyRadioInputColor: globalTokens.color_grey_600,
832
+ activeReadonlyRadioInputColor: globalTokens.hal_grey_s_40,
833
+ disabledRadioInputColor: globalTokens.hal_grey_l_60,
834
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
835
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
836
+ disabledRadioInputLabelFontColor: globalTokens.hal_grey_l_60,
837
+ errorMessageColor: globalTokens.hal_red_s_41,
838
+ labelFontColor: globalTokens.hal_black,
839
+ labelFontSize: globalTokens.type_scale_02,
840
+ labelFontStyle: globalTokens.type_normal,
841
+ labelFontWeight: globalTokens.type_semibold,
842
+ labelLineHeight: globalTokens.type_leading_loose_01,
843
+ optionalLabelFontWeight: globalTokens.type_regular,
844
+ helperTextFontColor: globalTokens.hal_black,
845
+ helperTextFontSize: globalTokens.type_scale_01,
846
+ helperTextFontStyle: globalTokens.type_normal,
847
+ helperTextFontWeight: globalTokens.type_regular,
848
+ helperTextLineHeight: globalTokens.type_leading_normal,
849
+ radioInputLabelFontColor: globalTokens.hal_black,
850
+ radioInputLabelFontSize: globalTokens.type_scale_02,
851
+ radioInputLabelFontStyle: globalTokens.type_normal,
852
+ radioInputLabelFontWeight: globalTokens.type_regular,
853
+ radioInputLabelLineHeight: globalTokens.type_leading_loose_01,
854
+ groupLabelMargin: globalTokens.spacing_03,
855
+ radioInputLabelMargin: globalTokens.spacing_03,
856
+ groupVerticalGutter: globalTokens.spacing_02,
857
+ groupHorizontalGutter: globalTokens.spacing_07
858
+ },
793
859
  select: {
794
860
  fontFamily: globalTokens.type_sans,
795
- assistiveTextFontColor: globalTokens.black,
796
- assistiveTextFontColorOnDark: globalTokens.white,
797
- assistiveTextFontSize: globalTokens.type_scale_01,
798
- assistiveTextFontStyle: globalTokens.type_normal,
799
- assistiveTextFontWeight: globalTokens.type_regular,
800
- labelFontColor: globalTokens.black,
801
- labelFontColorOnDark: globalTokens.white,
802
- labelFontSize: globalTokens.type_scale_03,
861
+ disabledColor: globalTokens.hal_grey_l_60,
862
+ enabledInputBorderColor: globalTokens.hal_black,
863
+ hoverInputBorderColor: globalTokens.hal_purple_l_65,
864
+ focusInputBorderColor: globalTokens.hal_blue_l_50,
865
+ errorInputBorderColor: globalTokens.hal_red_s_41,
866
+ hoverInputErrorBorderColor: globalTokens.color_red_600,
867
+ disabledInputBorderColor: globalTokens.hal_grey_l_60,
868
+ disabledInputBackgroundColor: globalTokens.hal_grey_l_95,
869
+ inputMarginTop: globalTokens.spacing_02,
870
+ inputMarginBottom: globalTokens.spacing_02,
871
+ errorMessageColor: globalTokens.hal_red_s_41,
872
+ errorIconColor: globalTokens.hal_red_s_41,
873
+ labelFontColor: globalTokens.hal_black,
874
+ labelFontSize: globalTokens.type_scale_02,
803
875
  labelFontStyle: globalTokens.type_normal,
804
- labelFontWeight: globalTokens.type_regular,
805
- disabledColor: globalTokens.lighterBlack,
806
- disabledColorOnDark: "#575757",
807
- errorColor: globalTokens.red,
808
- errorColorOnDark: "#FE344F",
809
- optionBackgroundColor: globalTokens.white,
810
- optionBorderColor: globalTokens.black,
811
- optionBorderThickness: "0px",
812
- optionBorderStyle: "solid",
813
- optionFontColor: globalTokens.black,
814
- optionFontColorOnDark: globalTokens.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.darkGrey,
821
- scrollBarTrackColor: globalTokens.lightGrey,
822
- optionIconColor: globalTokens.black,
823
- optionIconColorOnDark: globalTokens.white,
824
- optionIconSpacing: "12px",
825
- optionIconSize: "20px",
826
- optionCheckboxSpacing: "12px",
827
- hoverOptionBackgroundColor: globalTokens.lightWhite,
828
- hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
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.black,
834
- underlineColorOnDark: globalTokens.white,
835
- underlineFocusColor: globalTokens.black,
836
- underlineFocusColorOnDark: globalTokens.white,
837
- underlineThickness: "1px",
838
- valueFontColor: globalTokens.black,
839
- valueFontColorOnDark: globalTokens.white,
876
+ labelFontWeight: globalTokens.type_semibold,
877
+ labelLineHeight: globalTokens.type_leading_loose_01,
878
+ optionalLabelFontWeight: globalTokens.type_regular,
879
+ helperTextFontColor: globalTokens.hal_black,
880
+ helperTextFontSize: globalTokens.type_scale_01,
881
+ helperTextFontStyle: globalTokens.type_normal,
882
+ helperTextFontWeight: globalTokens.type_regular,
883
+ helperTextLineHeight: globalTokens.type_leading_normal,
884
+ placeholderFontColor: "#000000b3",
885
+ valueFontColor: globalTokens.hal_black,
840
886
  valueFontSize: globalTokens.type_scale_03,
841
887
  valueFontStyle: globalTokens.type_normal,
842
888
  valueFontWeight: globalTokens.type_regular,
843
- arrowColor: globalTokens.black,
844
- arrowColorOnDark: globalTokens.white,
845
- focusColor: globalTokens.blue,
846
- focusColorOnDark: "#1682FF"
889
+ actionIconColor: globalTokens.hal_black,
890
+ hoverActionIconColor: globalTokens.hal_black,
891
+ activeActionIconColor: globalTokens.hal_black,
892
+ actionBackgroundColor: globalTokens.transparent,
893
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
894
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
895
+ listOptionFontColor: globalTokens.hal_black,
896
+ listOptionFontSize: globalTokens.type_scale_02,
897
+ listOptionFontStyle: globalTokens.type_normal,
898
+ listOptionFontWeight: globalTokens.type_regular,
899
+ listOptionIconColor: globalTokens.hal_black,
900
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
901
+ listGroupLabelFontWeight: globalTokens.type_semibold,
902
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50,
903
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
904
+ collapseIndicatorColor: globalTokens.hal_black,
905
+ listDialogBackgroundColor: globalTokens.hal_white,
906
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
907
+ selectedListOptionBackgroundColor: globalTokens.hal_blue_l_95,
908
+ selectedHoverListOptionBackgroundColor: globalTokens.color_blue_200,
909
+ selectedActiveListOptionBackgroundColor: globalTokens.hal_blue_l_80,
910
+ selectedListOptionIconColor: globalTokens.hal_blue_d_20,
911
+ unselectedHoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
912
+ unselectedActiveListOptionBackgroundColor: globalTokens.hal_grey_l_90,
913
+ selectionIndicatorFontColor: globalTokens.hal_black,
914
+ selectionIndicatorFontSize: globalTokens.type_scale_01,
915
+ selectionIndicatorFontStyle: globalTokens.type_regular,
916
+ selectionIndicatorFontWeight: globalTokens.type_normal,
917
+ selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
918
+ selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
919
+ enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
920
+ enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
921
+ hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
922
+ hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
923
+ activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
924
+ activeSelectionIndicatorActionIconColor: globalTokens.hal_black
847
925
  },
848
926
  sidenav: {
849
- backgroundColor: globalTokens.lighterGrey,
850
- arrowContainerColor: globalTokens.lightGrey,
851
- arrowColor: globalTokens.black,
927
+ backgroundColor: globalTokens.hal_grey_l_95,
928
+ arrowContainerColor: globalTokens.hal_grey_l_90,
929
+ arrowColor: globalTokens.hal_black,
852
930
  titleFontFamily: globalTokens.type_sans,
853
- titleFontSize: globalTokens.type_scale_05,
931
+ titleFontSize: globalTokens.type_scale_04,
854
932
  titleFontStyle: globalTokens.type_normal,
855
- titleFontWeight: globalTokens.type_regular,
856
- titleFontColor: "#000000de",
933
+ titleFontWeight: globalTokens.type_semibold,
934
+ titleFontColor: globalTokens.color_grey_800,
857
935
  titleFontTextTransform: "none",
858
936
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
859
- subtitleFontFamily: globalTokens.type_sans,
860
- subtitleFontSize: globalTokens.type_scale_01,
861
- subtitleFontStyle: globalTokens.type_normal,
862
- subtitleFontWeight: globalTokens.type_regular,
863
- subtitleFontColor: "#00000099",
864
- subtitleFontTextTransform: globalTokens.type_uppercase,
865
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_03,
937
+ groupTitleFontFamily: globalTokens.type_sans,
938
+ groupTitleFontSize: globalTokens.type_scale_02,
939
+ groupTitleFontStyle: globalTokens.type_normal,
940
+ groupTitleFontWeight: globalTokens.type_semibold,
941
+ groupTitleFontColor: globalTokens.black,
942
+ groupTitleHoverBackgroundColor: globalTokens.hal_grey_l_90,
943
+ groupTitleActiveBackgroundColor: globalTokens.hal_grey_l_80,
944
+ groupTitleSelectedFontColor: globalTokens.white,
945
+ groupTitleSelectedBackgroundColor: globalTokens.color_grey_800,
946
+ groupTitleSelectedHoverFontColor: globalTokens.white,
947
+ groupTitleSelectedHoverBackgroundColor: globalTokens.color_grey_600,
948
+ groupTitleFontTextTransform: globalTokens.type_uppercase,
949
+ groupTitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
866
950
  linkFontFamily: globalTokens.type_sans,
867
951
  linkFontSize: globalTokens.type_scale_02,
868
952
  linkFontStyle: globalTokens.type_normal,
869
953
  linkFontWeight: globalTokens.type_regular,
870
- linkFontColor: "#00000099",
954
+ linkFontColor: globalTokens.color_grey_800,
955
+ linkHoverBackgroundColor: globalTokens.hal_grey_l_90,
956
+ linkSelectedFontColor: globalTokens.white,
957
+ linkSelectedBackgroundColor: globalTokens.color_grey_800,
958
+ linkSelectedHoverFontColor: globalTokens.white,
959
+ linkSelectedHoverBackgroundColor: globalTokens.color_grey_600,
871
960
  linkFontTextTransform: "none",
872
961
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
873
962
  linkTextDecoration: globalTokens.type_no_line,
874
- linkMarginTop: "6px",
875
- linkMarginRight: "18px",
876
- linkMarginBottom: "6px",
877
- linkMarginLeft: "18px",
963
+ linkMarginTop: "4px",
964
+ linkMarginBottom: "4px",
965
+ linkMarginRight: "16px",
966
+ linkMarginLeft: "16px",
967
+ linkFocusColor: globalTokens.hal_blue_l_50,
878
968
  scrollBarThumbColor: "#66666626",
879
969
  scrollBarTrackColor: globalTokens.transparent
880
970
  },
881
971
  slider: {
882
972
  fontFamily: globalTokens.type_sans,
883
- fontSize: globalTokens.type_scale_03,
884
- fontStyle: globalTokens.type_normal,
885
- fontWeight: globalTokens.type_regular,
973
+ limitValuesFontColor: globalTokens.hal_black,
974
+ limitValuesFontColorOnDark: globalTokens.hal_white,
975
+ limitValuesFontSize: globalTokens.type_scale_03,
976
+ limitValuesFontStyle: globalTokens.type_normal,
977
+ limitValuesFontWeight: globalTokens.type_regular,
978
+ limitValuesFontLetterSpacing: globalTokens.type_spacing_normal,
979
+ disabledLimitValuesFontColor: globalTokens.hal_grey_l_60,
980
+ labelFontFamily: globalTokens.type_sans,
981
+ labelFontSize: globalTokens.type_scale_02,
982
+ labelFontStyle: globalTokens.type_normal,
983
+ labelFontWeight: globalTokens.type_semibold,
984
+ labelLineHeight: globalTokens.type_leading_loose_01,
985
+ helperTextFontFamily: globalTokens.type_sans,
986
+ helperTextFontSize: globalTokens.type_scale_01,
987
+ helperTextFontStyle: globalTokens.type_normal,
988
+ helperTextFontWeight: globalTokens.type_regular,
989
+ helperTextLineHeight: globalTokens.type_leading_normal,
886
990
  fontColor: globalTokens.hal_black,
887
991
  fontColorOnDark: globalTokens.hal_white,
888
- disabledFontColor: globalTokens.hal_grey_l_60,
889
- fontLetterSpacing: globalTokens.type_spacing_normal,
992
+ labelFontColor: globalTokens.hal_black,
993
+ labelFontColorOnDark: globalTokens.hal_white,
994
+ helperTextFontColor: globalTokens.hal_black,
995
+ helperTextFontColorOnDark: globalTokens.hal_white,
996
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
997
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
998
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
999
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
890
1000
  thumbHeight: "12px",
891
1001
  thumbWidth: "12px",
1002
+ hoverThumbHeight: "14px",
1003
+ hoverThumbWidth: "14px",
892
1004
  thumbVerticalPosition: "12px",
1005
+ hoverThumbVerticalPosition: "11px",
893
1006
  thumbBackgroundColor: globalTokens.hal_blue_s_35,
894
1007
  thumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
895
1008
  hoverThumbScale: "1.166666",
@@ -924,11 +1037,14 @@ var componentTokens = {
924
1037
  disabledTotalLineColor: globalTokens.hal_grey_l_95,
925
1038
  disabledTotalLineColorOnDark: globalTokens.hal_grey_s_40,
926
1039
  focusColor: globalTokens.hal_blue_l_50,
927
- focusColorOnDark: globalTokens.hal_blue_l_50
1040
+ focusColorOnDark: globalTokens.hal_blue_l_50,
1041
+ floorLabelMarginRight: globalTokens.type_scale_03,
1042
+ ceilLabelMarginLeft: globalTokens.type_scale_03,
1043
+ inputMarginLeft: globalTokens.type_scale_06
928
1044
  },
929
1045
  spinner: {
930
1046
  trackCircleColor: "#5f249f",
931
- trackCircleColorOnDark: "#a46ede",
1047
+ trackCircleColorOverlay: "#a46ede",
932
1048
  totalCircleColor: globalTokens.white,
933
1049
  labelFontFamily: globalTokens.type_sans,
934
1050
  labelFontSize: globalTokens.type_scale_02,
@@ -962,50 +1078,54 @@ var componentTokens = {
962
1078
  "switch": {
963
1079
  checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
964
1080
  checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
965
- checkedThumbBackgroundColor: globalTokens.white,
966
- checkedThumbBackgroundColorOnDark: globalTokens.white,
967
- uncheckedTrackBackgroundColor: globalTokens.lightGrey,
968
- uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
969
- uncheckedThumbBackgroundColor: globalTokens.white,
970
- uncheckedThumbBackgroundColorOnDark: globalTokens.white,
971
- disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
1081
+ checkedThumbBackgroundColor: globalTokens.hal_white,
1082
+ checkedThumbBackgroundColorOnDark: globalTokens.hal_white,
1083
+ uncheckedTrackBackgroundColor: globalTokens.hal_grey_l_75,
1084
+ uncheckedTrackBackgroundColorOnDark: globalTokens.hal_grey_l_75,
1085
+ uncheckedThumbBackgroundColor: globalTokens.hal_white,
1086
+ uncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1087
+ disabledCheckedTrackBackgroundColor: globalTokens.hal_purple_l_95,
972
1088
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
973
- disabledCheckedThumbBackgroundColor: globalTokens.white,
974
- disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
975
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
1089
+ disabledCheckedThumbBackgroundColor: globalTokens.hal_white,
1090
+ disabledCheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1091
+ disabledUncheckedTrackBackgroundColor: globalTokens.hal_grey_l_95,
976
1092
  disabledUncheckedTrackBackgroundColorOnDark: "#363636",
977
- disabledUncheckedThumbBackgroundColor: globalTokens.white,
978
- disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
979
- disabledLabelFontColor: globalTokens.lighterBlack,
1093
+ disabledUncheckedThumbBackgroundColor: globalTokens.hal_white,
1094
+ disabledUncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1095
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
980
1096
  disabledLabelFontColorOnDark: "#575757",
981
1097
  disabledLabelFontStyle: globalTokens.type_normal,
982
1098
  labelFontFamily: globalTokens.type_sans,
983
1099
  labelFontSize: globalTokens.type_scale_root,
984
1100
  labelFontStyle: globalTokens.type_normal,
985
1101
  labelFontWeight: globalTokens.type_regular,
986
- labelFontColor: globalTokens.black,
987
- labelFontColorOnDark: globalTokens.white,
988
- thumbFocusColor: globalTokens.blue,
1102
+ labelFontColor: globalTokens.hal_black,
1103
+ labelFontColorOnDark: globalTokens.hal_white,
1104
+ thumbFocusColor: globalTokens.hal_blue_l_50,
989
1105
  thumbFocusColorOnDark: "#1682FF",
990
1106
  thumbHeight: "24px",
991
1107
  thumbWidth: "24px",
992
- thumbShift: "40%",
1108
+ thumbShift: "1.25rem",
993
1109
  trackHeight: "12px",
994
- trackWidth: "60px",
995
- spaceBetweenLabelSwitch: "0px"
1110
+ trackWidth: "36px",
1111
+ spaceBetweenLabelSwitch: "8px"
996
1112
  },
997
1113
  tag: {
998
1114
  fontFamily: globalTokens.type_sans,
999
- fontColor: globalTokens.black,
1115
+ fontColor: globalTokens.hal_black,
1000
1116
  fontSize: globalTokens.type_scale_02,
1001
1117
  fontStyle: globalTokens.type_normal,
1002
1118
  fontWeight: globalTokens.type_regular,
1003
- fontTextTransform: globalTokens.type_uppercase,
1004
- height: "43px",
1005
- iconColor: globalTokens.white,
1006
- iconSectionWidth: "48px",
1119
+ labelPaddingTop: "0px",
1120
+ labelPaddingBottom: "0px",
1121
+ labelPaddingLeft: "16px",
1122
+ labelPaddingRight: "16px",
1123
+ height: "40px",
1124
+ iconColor: globalTokens.hal_white,
1125
+ iconSectionWidth: "40px",
1007
1126
  iconHeight: "24px",
1008
- iconWidth: "auto"
1127
+ iconWidth: "auto",
1128
+ focusColor: globalTokens.hal_blue_l_50
1009
1129
  },
1010
1130
  table: {
1011
1131
  rowSeparatorThickness: "1px",
@@ -1013,7 +1133,7 @@ var componentTokens = {
1013
1133
  rowSeparatorColor: globalTokens.lightGrey,
1014
1134
  dataBackgroundColor: globalTokens.white,
1015
1135
  dataFontFamily: globalTokens.type_sans,
1016
- dataFontSize: globalTokens.type_scale_root,
1136
+ dataFontSize: globalTokens.type_scale_02,
1017
1137
  dataFontStyle: globalTokens.type_normal,
1018
1138
  dataFontWeight: globalTokens.type_regular,
1019
1139
  dataFontColor: globalTokens.black,
@@ -1059,6 +1179,7 @@ var componentTokens = {
1059
1179
  disabledFontColor: "#999999",
1060
1180
  disabledIconColor: "#999999",
1061
1181
  disabledFontStyle: globalTokens.type_normal,
1182
+ disabledBadgeBackgroundColor: "#0000004D",
1062
1183
  hoverBackgroundColor: "#f2eafa",
1063
1184
  pressedBackgroundColor: "#e5d5f6",
1064
1185
  pressedFontWeight: globalTokens.type_semibold,
@@ -1081,41 +1202,6 @@ var componentTokens = {
1081
1202
  badgeRadiusWithNotificationNumber: "10px"
1082
1203
  },
1083
1204
  textarea: {
1084
- fontFamily: globalTokens.type_sans,
1085
- assistiveTextFontSize: globalTokens.type_scale_01,
1086
- assistiveTextFontStyle: globalTokens.type_normal,
1087
- assistiveTextFontWeight: globalTokens.type_regular,
1088
- assistiveTextFontColor: globalTokens.black,
1089
- assistiveTextFontColorOnDark: globalTokens.white,
1090
- assistiveTextLetterSpacing: "0.03333em",
1091
- disabledColor: globalTokens.lighterBlack,
1092
- disabledColorOnDark: "#575757",
1093
- errorColor: globalTokens.red,
1094
- errorColorOnDark: "#FE344F",
1095
- scrollBarThumbColor: globalTokens.darkGrey,
1096
- scrollBarThumbColorOnDark: globalTokens.white,
1097
- scrollBarTrackColor: globalTokens.lightGrey,
1098
- scrollBarTrackColorOnDark: "#999999",
1099
- labelFontSize: globalTokens.type_scale_03,
1100
- labelFontStyle: globalTokens.type_normal,
1101
- labelFontWeight: globalTokens.type_regular,
1102
- labelFontColor: globalTokens.black,
1103
- labelFontColorOnDark: globalTokens.white,
1104
- labelLetterSpacing: "0.00938em",
1105
- valueFontSize: globalTokens.type_scale_03,
1106
- valueFontStyle: globalTokens.type_normal,
1107
- valueFontWeight: globalTokens.type_regular,
1108
- valueFontColor: globalTokens.black,
1109
- valueFontColorOnDark: globalTokens.white,
1110
- valueLetterSpacing: globalTokens.type_spacing_normal,
1111
- valueLineHeight: "1.1875em",
1112
- underlineColor: globalTokens.black,
1113
- underlineColorOnDark: globalTokens.white,
1114
- underlineFocusColor: globalTokens.black,
1115
- underlineFocusColorOnDark: globalTokens.white,
1116
- underlineThickness: "1px"
1117
- },
1118
- newTextarea: {
1119
1205
  fontFamily: globalTokens.type_sans,
1120
1206
  enabledBorderColor: globalTokens.hal_black,
1121
1207
  enabledBorderColorOnDark: globalTokens.hal_white,
@@ -1129,8 +1215,10 @@ var componentTokens = {
1129
1215
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1130
1216
  errorBorderColor: globalTokens.hal_red_s_41,
1131
1217
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
1132
- hoverErrorBorderColor: "#fe0123",
1218
+ hoverErrorBorderColor: globalTokens.color_red_600,
1133
1219
  hoverErrorBorderColorOnDark: "#fe677b",
1220
+ inputMarginTop: globalTokens.spacing_02,
1221
+ inputMarginBottom: globalTokens.spacing_02,
1134
1222
  errorMessageColor: globalTokens.hal_red_s_41,
1135
1223
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
1136
1224
  labelFontColor: globalTokens.hal_black,
@@ -1138,6 +1226,7 @@ var componentTokens = {
1138
1226
  labelFontSize: globalTokens.type_scale_02,
1139
1227
  labelFontStyle: globalTokens.type_normal,
1140
1228
  labelFontWeight: globalTokens.type_semibold,
1229
+ labelLineHeight: globalTokens.type_leading_loose_01,
1141
1230
  disabledLabelFontColor: globalTokens.hal_grey_l_60,
1142
1231
  disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1143
1232
  optionalLabelFontWeight: globalTokens.type_regular,
@@ -1146,9 +1235,10 @@ var componentTokens = {
1146
1235
  helperTextFontSize: globalTokens.type_scale_01,
1147
1236
  helperTextFontStyle: globalTokens.type_normal,
1148
1237
  helperTextFontWeight: globalTokens.type_regular,
1238
+ helperTextLineHeight: globalTokens.type_leading_normal,
1149
1239
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1150
1240
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1151
- placeholderFontColor: "#808080",
1241
+ placeholderFontColor: "#000000b3",
1152
1242
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1153
1243
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1154
1244
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -1161,149 +1251,113 @@ var componentTokens = {
1161
1251
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1162
1252
  },
1163
1253
  toggleGroup: {
1164
- fontFamily: globalTokens.type_sans,
1165
- fontSize: globalTokens.type_scale_03,
1166
- fontStyle: globalTokens.type_normal,
1167
- fontWeight: globalTokens.type_regular,
1168
- selectedBackgroundColor: globalTokens.hal_purple_s_38,
1169
- selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1170
- selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1171
- selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1172
- selectedFontColor: globalTokens.hal_white,
1173
- selectedDisabledFontColor: "#cbacec",
1254
+ containerBackgroundColor: globalTokens.color_grey_50,
1255
+ containerBorderColor: globalTokens.hal_grey_l_60,
1256
+ labelFontColor: globalTokens.hal_black,
1257
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1258
+ helperTextFontColor: globalTokens.hal_black,
1259
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
1174
1260
  unselectedBackgroundColor: globalTokens.hal_grey_l_90,
1175
1261
  unselectedHoverBackgroundColor: globalTokens.hal_grey_l_80,
1176
1262
  unselectedActiveBackgroundColor: globalTokens.hal_purple_s_38,
1177
1263
  unselectedDisabledBackgroundColor: globalTokens.hal_grey_l_95,
1178
1264
  unselectedFontColor: globalTokens.hal_black,
1179
1265
  unselectedDisabledFontColor: globalTokens.hal_grey_l_60,
1180
- iconSize: "24px",
1181
- iconPaddingTop: "8px",
1182
- iconPaddingBottom: "8px",
1183
- iconPaddingRight: "8px",
1184
- iconPaddingLeft: "8px",
1185
- labelPaddingTop: "8px",
1186
- labelPaddingBottom: "8px",
1187
- labelPaddingLeft: "24px",
1188
- labelPaddingRight: "24px",
1189
- focusColor: globalTokens.hal_blue_l_50
1190
- },
1191
- upload: {
1192
- fontFamily: globalTokens.type_sans,
1193
- shadowColor: globalTokens.lightWhite,
1194
- scrollBarThumbColor: globalTokens.darkGrey,
1195
- scrollBarTrackColor: globalTokens.lightGrey,
1196
- errorColor: globalTokens.red,
1197
- backgroundColor: globalTokens.white,
1198
- draggingStateBackgroundColor: globalTokens.lightWhite,
1199
- dragAndDropIconColor: globalTokens.black,
1200
- dragAndDropIconSize: "43.5px",
1201
- dragAndDropTitleFontSize: globalTokens.type_scale_04,
1202
- dragAndDropTitleFontStyle: globalTokens.type_normal,
1203
- dragAndDropTitleFontWeight: globalTokens.type_bold,
1204
- dragAndDropTitleFontTextTransform: "none",
1205
- dragAndDropTitleFontColor: globalTokens.black,
1206
- dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1207
- dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1208
- dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1209
- dragAndDropDescriptionFontTextTransform: "none",
1210
- dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1211
- dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1212
- dragAndDropDraggingStateIconSize: "74.5px",
1213
- dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1214
- dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1215
- dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1216
- dragAndDropDraggingStateFontTextTransform: "none",
1217
- dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1218
- dragAndDropAreaIconColor: globalTokens.darkGrey,
1219
- dragAndDropAreaIconSize: "24px",
1220
- dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1221
- dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1222
- dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1223
- dragAndDropAreaTextFontTextTransform: "none",
1224
- dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1225
- fileDeleteIconColor: globalTokens.black,
1226
- fileDeleteIconSize: "30px",
1227
- fileUnderlineColor: globalTokens.lightGrey,
1228
- fileUnderlineThickness: "1px",
1229
- fileNameFontSize: globalTokens.type_scale_03,
1230
- fileNameFontStyle: globalTokens.type_normal,
1231
- fileNameFontWeight: globalTokens.type_regular,
1232
- fileNameFontTextTransform: "none",
1233
- fileNameFontColor: globalTokens.black,
1234
- fileTypeFontSize: globalTokens.type_scale_01,
1235
- fileTypeFontStyle: globalTokens.type_normal,
1236
- fileTypeFontWeight: globalTokens.type_regular,
1237
- fileTypeFontTextTransform: globalTokens.type_uppercase,
1238
- fileTypeFontColor: globalTokens.darkGrey,
1239
- hoverFileColor: globalTokens.darkWhite,
1240
- uploadedFileIconColor: globalTokens.lightGrey,
1241
- uploadedFileIconSize: "24px",
1242
- uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1243
- uploadedFilesTitleFontStyle: globalTokens.type_normal,
1244
- uploadedFilesTitleFontWeight: globalTokens.type_regular,
1245
- uploadedFilesTitleFontTextTransform: "none",
1246
- uploadedFilesTitleFontColor: globalTokens.black,
1247
- uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1248
- uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1249
- uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1250
- uploadedFilesSubtitleFontTextTransform: "none",
1251
- uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1252
- uploadedFilesNumberFontWeight: globalTokens.type_bold
1266
+ selectedBackgroundColor: globalTokens.hal_purple_s_38,
1267
+ selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1268
+ selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1269
+ selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1270
+ selectedFontColor: globalTokens.hal_white,
1271
+ selectedDisabledFontColor: globalTokens.color_purple_300,
1272
+ focusColor: globalTokens.hal_blue_l_50,
1273
+ labelFontFamily: globalTokens.type_sans,
1274
+ labelFontSize: globalTokens.type_scale_02,
1275
+ labelFontStyle: globalTokens.type_normal,
1276
+ labelFontWeight: globalTokens.type_semibold,
1277
+ labelLineHeight: globalTokens.type_leading_loose_01,
1278
+ helperTextFontFamily: globalTokens.type_sans,
1279
+ helperTextFontSize: globalTokens.type_scale_01,
1280
+ helperTextFontStyle: globalTokens.type_normal,
1281
+ helperTextFontWeight: globalTokens.type_regular,
1282
+ helperTextLineHeight: globalTokens.type_leading_normal,
1283
+ optionLabelFontFamily: globalTokens.type_sans,
1284
+ optionLabelFontSize: globalTokens.type_scale_03,
1285
+ optionLabelFontStyle: globalTokens.type_normal,
1286
+ optionLabelFontWeight: globalTokens.type_regular,
1287
+ iconPaddingRight: globalTokens.spacing_03,
1288
+ iconPaddingLeft: globalTokens.spacing_03,
1289
+ labelPaddingLeft: globalTokens.spacing_06,
1290
+ labelPaddingRight: globalTokens.spacing_06,
1291
+ iconMarginRight: globalTokens.spacing_03,
1292
+ containerMarginTop: globalTokens.spacing_02,
1293
+ optionBorderThickness: globalTokens.border_width_0,
1294
+ optionBorderStyle: globalTokens.border_none,
1295
+ optionBorderRadius: globalTokens.border_radius_medium,
1296
+ containerBorderThickness: globalTokens.border_width_1,
1297
+ containerBorderStyle: globalTokens.border_solid,
1298
+ containerBorderRadius: globalTokens.border_radius_large,
1299
+ optionFocusBorderThickness: globalTokens.border_width_2
1253
1300
  },
1254
1301
  wizard: {
1255
- disabledBackgroundColor: globalTokens.lightGrey,
1256
- disabledFontColor: globalTokens.darkGrey,
1257
- stepContainerFontSize: globalTokens.type_scale_03,
1258
- stepContainerFontFamily: globalTokens.type_sans,
1259
- stepContainerFontStyle: globalTokens.type_normal,
1260
- stepContainerFontWeight: globalTokens.type_regular,
1261
- stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1262
- stepContainerFontColor: globalTokens.black,
1263
- stepContainerSelectedFontColor: globalTokens.white,
1264
- stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1265
- stepContainerBackgroundColor: globalTokens.white,
1266
- stepContainerIconSize: "19px",
1302
+ visitedStepFontColor: globalTokens.hal_black,
1303
+ visitedStepBackgroundColor: globalTokens.hal_white,
1304
+ visitedStepBorderColor: globalTokens.hal_black,
1305
+ unvisitedStepFontColor: globalTokens.hal_grey_s_40,
1306
+ unvisitedLabelFontColor: globalTokens.hal_grey_s_40,
1307
+ unvisitedHelperTextFontColor: globalTokens.hal_grey_s_40,
1308
+ unvisitedStepBackgroundColor: globalTokens.transparent,
1309
+ unvisitedStepBorderColor: globalTokens.hal_grey_s_40,
1310
+ selectedStepFontColor: globalTokens.white,
1311
+ selectedStepBackgroundColor: globalTokens.hal_purple_s_38,
1312
+ selectedStepBorderColor: globalTokens.hal_purple_s_38,
1313
+ selectedLabelFontColor: globalTokens.hal_black,
1314
+ selectedHelperTextFontColor: globalTokens.hal_black,
1315
+ selectedStepWidth: "32px",
1316
+ selectedStepHeight: "32px",
1317
+ selectedStepBorderThickness: "2px",
1318
+ selectedStepBorderStyle: "solid",
1319
+ selectedStepBorderRadius: "45px",
1320
+ stepFontSize: globalTokens.type_scale_03,
1321
+ stepFontFamily: globalTokens.type_sans,
1322
+ stepFontStyle: globalTokens.type_normal,
1323
+ stepFontWeight: globalTokens.type_regular,
1324
+ stepFontTracking: globalTokens.type_spacing_wide_02,
1325
+ stepIconSize: "20px",
1326
+ stepWidth: "32px",
1327
+ stepHeight: "32px",
1328
+ stepBorderThickness: "2px",
1329
+ stepBorderStyle: "solid",
1330
+ stepBorderRadius: "45px",
1331
+ visitedLabelFontColor: globalTokens.hal_black,
1267
1332
  labelFontSize: globalTokens.type_scale_03,
1268
1333
  labelFontFamily: globalTokens.type_sans,
1269
1334
  labelFontStyle: globalTokens.type_normal,
1270
1335
  labelFontWeight: globalTokens.type_regular,
1271
- labelLetterSpacing: globalTokens.type_spacing_normal,
1336
+ labelFontTracking: globalTokens.type_spacing_normal,
1272
1337
  labelFontTextTransform: "none",
1273
1338
  labelTextAlign: "left",
1274
- labelFontColor: globalTokens.darkGrey,
1275
- visitedLabelFontColor: globalTokens.black,
1276
- visitedDescriptionFontColor: globalTokens.black,
1277
- descriptionFontSize: globalTokens.type_scale_01,
1278
- descriptionFontFamily: globalTokens.type_sans,
1279
- descriptionFontStyle: globalTokens.type_normal,
1280
- descriptionFontWeight: globalTokens.type_regular,
1281
- descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1282
- descriptionFontTextTransform: "none",
1283
- descriptionFontColor: globalTokens.darkGrey,
1284
- descriptionTextAlign: "left",
1285
- circleWidth: "32px",
1286
- circleHeight: "32px",
1287
- circleBorderThickness: "2px",
1288
- circleBorderStyle: "solid",
1289
- circleBorderRadius: "45px",
1290
- circleBorderColor: globalTokens.black,
1291
- selectedCircleWidth: "32px",
1292
- selectedCircleHeight: "32px",
1293
- selectedCircleBorderThickness: "2px",
1294
- selectedCircleBorderStyle: "solid",
1295
- selectedCircleBorderRadius: "45px",
1296
- selectedCircleBorderColor: globalTokens.purple,
1297
- disabledCircleWidth: "32px",
1298
- disabledCircleHeight: "32px",
1299
- disabledCircleBorderThickness: "2px",
1300
- disabledCircleBorderStyle: "solid",
1301
- disabledCircleBorderRadius: "45px",
1302
- disabledCircleBorderColor: globalTokens.lightGrey,
1339
+ helperTextFontSize: globalTokens.type_scale_02,
1340
+ helperTextFontFamily: globalTokens.type_sans,
1341
+ helperTextFontStyle: globalTokens.type_normal,
1342
+ helperTextFontWeight: globalTokens.type_regular,
1343
+ helperTextFontTracking: globalTokens.type_spacing_normal,
1344
+ helperTextFontTextTransform: "none",
1345
+ visitedHelperTextFontColor: globalTokens.hal_black,
1346
+ helperTextTextAlign: "left",
1347
+ disabledStepBackgroundColor: globalTokens.hal_grey_l_95,
1348
+ disabledStepFontColor: globalTokens.hal_grey_l_60,
1349
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1350
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1351
+ disabledStepBorderColor: globalTokens.hal_grey_l_95,
1352
+ disabledStepWidth: "32px",
1353
+ disabledStepHeight: "32px",
1354
+ disabledStepBorderThickness: "2px",
1355
+ disabledStepBorderStyle: "solid",
1356
+ disabledStepBorderRadius: "45px",
1303
1357
  separatorBorderThickness: "1px",
1304
1358
  separatorBorderStyle: "solid",
1305
- separatorColor: globalTokens.lightGrey,
1306
- focusColor: globalTokens.blue
1359
+ separatorColor: globalTokens.hal_grey_s_40,
1360
+ focusColor: globalTokens.hal_blue_l_50
1307
1361
  }
1308
1362
  };
1309
1363
  exports.componentTokens = componentTokens;
@@ -1318,12 +1372,11 @@ var spaces = {
1318
1372
  };
1319
1373
  exports.spaces = spaces;
1320
1374
  var responsiveSizes = {
1321
- mobileSmall: "320",
1322
- mobileMedium: "375",
1323
- mobileLarge: "425",
1324
- tablet: "768",
1325
- laptop: "1024",
1326
- desktop: "1440"
1375
+ xsmall: "20",
1376
+ small: "30",
1377
+ medium: "45",
1378
+ large: "66",
1379
+ xlarge: "90"
1327
1380
  };
1328
1381
  exports.responsiveSizes = responsiveSizes;
1329
1382
  var typeface = {
@@ -1358,4 +1411,98 @@ var typeface = {
1358
1411
  textTransform: "uppercase"
1359
1412
  }
1360
1413
  };
1361
- exports.typeface = typeface;
1414
+ exports.typeface = typeface;
1415
+ var defaultTranslatedComponentLabels = {
1416
+ formFields: {
1417
+ optionalLabel: "(Optional)",
1418
+ requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
1419
+ requiredValueErrorMessage: "This field is required. Please, enter a value.",
1420
+ formatRequestedErrorMessage: "Please match the format requested.",
1421
+ lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
1422
+ return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
1423
+ },
1424
+ logoAlternativeText: "Logo"
1425
+ },
1426
+ applicationLayout: {
1427
+ visibilityToggleTitle: "Toggle visibility sidenav"
1428
+ },
1429
+ alert: {
1430
+ infoTitleText: "information",
1431
+ successTitleText: "success",
1432
+ warningTitleText: "warning",
1433
+ errorTitleText: "error"
1434
+ },
1435
+ dateInput: {
1436
+ invalidDateErrorMessage: "Invalid date."
1437
+ },
1438
+ fileInput: {
1439
+ fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1440
+ fileSizeLessThanErrorMessage: "File size must be less than max size.",
1441
+ multipleButtonLabelDefault: "Select files",
1442
+ singleButtonLabelDefault: "Select file",
1443
+ dropAreaButtonLabelDefault: "Select",
1444
+ multipleDropAreaLabelDefault: "or drop files",
1445
+ singleDropAreaLabelDefault: "or drop a file",
1446
+ deleteFileActionTitle: "Remove file"
1447
+ },
1448
+ footer: {
1449
+ copyrightText: function copyrightText(year) {
1450
+ return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
1451
+ }
1452
+ },
1453
+ header: {
1454
+ closeIcon: "Close menu",
1455
+ hamburguerTitle: "Menu"
1456
+ },
1457
+ numberInput: {
1458
+ valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
1459
+ return "Value must be greater than or equal to ".concat(value, ".");
1460
+ },
1461
+ valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
1462
+ return "Value must be less than or equal to ".concat(value, ".");
1463
+ },
1464
+ decrementValueTitle: "Decrement value",
1465
+ incrementValueTitle: "Increment value"
1466
+ },
1467
+ paginator: {
1468
+ itemsPerPageText: "Items per page: ",
1469
+ minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
1470
+ return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
1471
+ },
1472
+ goToPageText: "Go to page:",
1473
+ pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
1474
+ return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
1475
+ }
1476
+ },
1477
+ passwordInput: {
1478
+ inputShowPasswordTitle: "Show password",
1479
+ inputHidePasswordTitle: "Hide password"
1480
+ },
1481
+ quickNav: {
1482
+ contentTitle: "Contents"
1483
+ },
1484
+ radioGroup: {
1485
+ optionalItemLabelDefault: "N/A"
1486
+ },
1487
+ select: {
1488
+ noMatchesErrorMessage: "No matches found",
1489
+ actionClearSelectionTitle: "Clear selection",
1490
+ actionClearSearchTitle: "Clear search"
1491
+ },
1492
+ tabs: {
1493
+ scrollLeft: "Scroll left",
1494
+ scrollRight: "Scroll right"
1495
+ },
1496
+ textInput: {
1497
+ clearFieldActionTitle: "Clear field",
1498
+ searchingMessage: "Searching...",
1499
+ fetchingDataErrorMessage: "Error fetching data"
1500
+ },
1501
+ calendar: {
1502
+ days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1503
+ daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
1504
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1505
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
1506
+ }
1507
+ };
1508
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;