@dxc-technology/halstack-react 0.0.0-fc652e4 → 0.0.0-fcadb3d

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 (471) 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 +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 +575 -433
  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 -241
  320. package/dist/accordion/Accordion.js +0 -353
  321. package/dist/accordion-group/AccordionGroup.js +0 -188
  322. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  323. package/dist/accordion-group/readme.md +0 -70
  324. package/dist/badge/Badge.js +0 -63
  325. package/dist/box/Box.js +0 -156
  326. package/dist/button/Button.js +0 -238
  327. package/dist/card/Card.js +0 -254
  328. package/dist/checkbox/Checkbox.js +0 -300
  329. package/dist/checkbox/Checkbox.stories.js +0 -144
  330. package/dist/checkbox/readme.md +0 -116
  331. package/dist/chip/Chip.js +0 -265
  332. package/dist/date/Date.js +0 -381
  333. package/dist/date/Date.stories.js +0 -205
  334. package/dist/date/readme.md +0 -73
  335. package/dist/dialog/Dialog.js +0 -218
  336. package/dist/dropdown/Dropdown.js +0 -549
  337. package/dist/footer/Footer.js +0 -395
  338. package/dist/footer/Footer.stories.js +0 -94
  339. package/dist/footer/dxc_logo.svg +0 -15
  340. package/dist/footer/readme.md +0 -41
  341. package/dist/header/Header.js +0 -403
  342. package/dist/header/Header.stories.js +0 -176
  343. package/dist/header/close_icon.svg +0 -1
  344. package/dist/header/dxc_logo_black.svg +0 -8
  345. package/dist/header/hamb_menu_black.svg +0 -1
  346. package/dist/header/hamb_menu_white.svg +0 -1
  347. package/dist/header/readme.md +0 -33
  348. package/dist/input-text/InputText.js +0 -707
  349. package/dist/input-text/InputText.stories.js +0 -209
  350. package/dist/input-text/error.svg +0 -1
  351. package/dist/input-text/readme.md +0 -91
  352. package/dist/layout/ApplicationLayout.js +0 -331
  353. package/dist/layout/facebook.svg +0 -45
  354. package/dist/layout/linkedin.svg +0 -50
  355. package/dist/layout/twitter.svg +0 -53
  356. package/dist/link/Link.js +0 -241
  357. package/dist/link/readme.md +0 -51
  358. package/dist/new-date/NewDate.js +0 -403
  359. package/dist/new-input-text/NewInputText.js +0 -961
  360. package/dist/number/Number.js +0 -138
  361. package/dist/paginator/Paginator.js +0 -289
  362. package/dist/paginator/images/next.svg +0 -3
  363. package/dist/paginator/images/nextPage.svg +0 -3
  364. package/dist/paginator/images/previous.svg +0 -3
  365. package/dist/paginator/images/previousPage.svg +0 -3
  366. package/dist/paginator/readme.md +0 -50
  367. package/dist/password/styles.css +0 -3
  368. package/dist/progress-bar/ProgressBar.js +0 -242
  369. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  370. package/dist/progress-bar/readme.md +0 -63
  371. package/dist/radio/Radio.js +0 -209
  372. package/dist/radio/Radio.stories.js +0 -166
  373. package/dist/radio/readme.md +0 -70
  374. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  375. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  376. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  377. package/dist/select/Select.js +0 -585
  378. package/dist/select/Select.stories.js +0 -235
  379. package/dist/select/readme.md +0 -72
  380. package/dist/sidenav/Sidenav.js +0 -177
  381. package/dist/slider/Slider.js +0 -319
  382. package/dist/slider/Slider.stories.js +0 -241
  383. package/dist/slider/readme.md +0 -64
  384. package/dist/spinner/Spinner.js +0 -218
  385. package/dist/spinner/Spinner.stories.js +0 -183
  386. package/dist/spinner/readme.md +0 -65
  387. package/dist/switch/Switch.js +0 -222
  388. package/dist/switch/Switch.stories.js +0 -134
  389. package/dist/switch/readme.md +0 -133
  390. package/dist/tabs/Tabs.js +0 -343
  391. package/dist/tabs/Tabs.stories.js +0 -130
  392. package/dist/tabs/readme.md +0 -78
  393. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  394. package/dist/tabs-for-sections/readme.md +0 -78
  395. package/dist/tag/Tag.js +0 -288
  396. package/dist/textarea/Textarea.js +0 -264
  397. package/dist/toggle/Toggle.js +0 -220
  398. package/dist/toggle/Toggle.stories.js +0 -297
  399. package/dist/toggle/readme.md +0 -80
  400. package/dist/toggle-group/ToggleGroup.js +0 -223
  401. package/dist/upload/Upload.js +0 -205
  402. package/dist/upload/Upload.stories.js +0 -72
  403. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  404. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  405. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  406. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  407. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  408. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  409. package/dist/upload/file-upload/FileToUpload.js +0 -184
  410. package/dist/upload/file-upload/audio-icon.svg +0 -4
  411. package/dist/upload/file-upload/close.svg +0 -4
  412. package/dist/upload/file-upload/file-icon.svg +0 -4
  413. package/dist/upload/file-upload/video-icon.svg +0 -4
  414. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  415. package/dist/upload/readme.md +0 -37
  416. package/dist/upload/transaction/Transaction.js +0 -175
  417. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  418. package/dist/upload/transaction/audio-icon.svg +0 -4
  419. package/dist/upload/transaction/error-icon.svg +0 -4
  420. package/dist/upload/transaction/file-icon-err.svg +0 -4
  421. package/dist/upload/transaction/file-icon.svg +0 -4
  422. package/dist/upload/transaction/image-icon-err.svg +0 -4
  423. package/dist/upload/transaction/image-icon.svg +0 -4
  424. package/dist/upload/transaction/success-icon.svg +0 -4
  425. package/dist/upload/transaction/video-icon-err.svg +0 -4
  426. package/dist/upload/transaction/video-icon.svg +0 -4
  427. package/dist/upload/transactions/Transactions.js +0 -138
  428. package/dist/wizard/Wizard.js +0 -411
  429. package/dist/wizard/invalid_icon.svg +0 -5
  430. package/dist/wizard/valid_icon.svg +0 -5
  431. package/dist/wizard/validation-wrong.svg +0 -6
  432. package/test/Accordion.test.js +0 -33
  433. package/test/AccordionGroup.test.js +0 -125
  434. package/test/Alert.test.js +0 -53
  435. package/test/Box.test.js +0 -10
  436. package/test/Button.test.js +0 -18
  437. package/test/Card.test.js +0 -30
  438. package/test/Checkbox.test.js +0 -45
  439. package/test/Chip.test.js +0 -25
  440. package/test/Date.test.js +0 -393
  441. package/test/Dialog.test.js +0 -23
  442. package/test/Dropdown.test.js +0 -145
  443. package/test/Footer.test.js +0 -99
  444. package/test/Header.test.js +0 -39
  445. package/test/Heading.test.js +0 -35
  446. package/test/InputText.test.js +0 -240
  447. package/test/Link.test.js +0 -43
  448. package/test/NewDate.test.js +0 -203
  449. package/test/NewInputText.test.js +0 -817
  450. package/test/NewTextarea.test.js +0 -201
  451. package/test/Number.test.js +0 -241
  452. package/test/Paginator.test.js +0 -177
  453. package/test/Password.test.js +0 -76
  454. package/test/ProgressBar.test.js +0 -35
  455. package/test/Radio.test.js +0 -37
  456. package/test/ResultsetTable.test.js +0 -330
  457. package/test/Select.test.js +0 -189
  458. package/test/Sidenav.test.js +0 -45
  459. package/test/Slider.test.js +0 -82
  460. package/test/Spinner.test.js +0 -27
  461. package/test/Switch.test.js +0 -45
  462. package/test/Table.test.js +0 -36
  463. package/test/Tabs.test.js +0 -109
  464. package/test/TabsForSections.test.js +0 -34
  465. package/test/Tag.test.js +0 -32
  466. package/test/TextArea.test.js +0 -52
  467. package/test/ToggleGroup.test.js +0 -81
  468. package/test/Upload.test.js +0 -60
  469. package/test/Wizard.test.js +0 -130
  470. package/test/mocks/pngMock.js +0 -1
  471. 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,
@@ -661,9 +678,9 @@ var componentTokens = {
661
678
  suffixColorOnDark: globalTokens.hal_white,
662
679
  disabledPrefixColor: globalTokens.hal_grey_l_75,
663
680
  disabledSuffixColor: globalTokens.hal_grey_l_75,
664
- disabledPrefixColorOnDark: globalTokens.hal_grey_s_40,
665
- disabledSuffixColorOnDark: globalTokens.hal_grey_s_40,
666
- placeholderFontColor: "#808080",
681
+ disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
682
+ disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
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,209 @@ 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
+ 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.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,
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,
874
+ labelFontColor: globalTokens.hal_black,
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: "#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,
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",
886
+ valueFontColor: globalTokens.hal_black,
840
887
  valueFontSize: globalTokens.type_scale_03,
841
888
  valueFontStyle: globalTokens.type_normal,
842
889
  valueFontWeight: globalTokens.type_regular,
843
- arrowColor: globalTokens.black,
844
- arrowColorOnDark: globalTokens.white,
845
- focusColor: globalTokens.blue,
846
- focusColorOnDark: "#1682FF"
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
847
926
  },
848
927
  sidenav: {
849
- backgroundColor: globalTokens.lighterGrey,
850
- arrowContainerColor: globalTokens.lightGrey,
851
- arrowColor: globalTokens.black,
928
+ backgroundColor: globalTokens.hal_grey_l_95,
929
+ arrowContainerColor: globalTokens.hal_grey_l_90,
930
+ arrowColor: globalTokens.hal_black,
852
931
  titleFontFamily: globalTokens.type_sans,
853
- titleFontSize: globalTokens.type_scale_05,
932
+ titleFontSize: globalTokens.type_scale_04,
854
933
  titleFontStyle: globalTokens.type_normal,
855
- titleFontWeight: globalTokens.type_regular,
856
- titleFontColor: "#000000de",
934
+ titleFontWeight: globalTokens.type_semibold,
935
+ titleFontColor: globalTokens.color_grey_800,
857
936
  titleFontTextTransform: "none",
858
937
  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,
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,
866
951
  linkFontFamily: globalTokens.type_sans,
867
952
  linkFontSize: globalTokens.type_scale_02,
868
953
  linkFontStyle: globalTokens.type_normal,
869
954
  linkFontWeight: globalTokens.type_regular,
870
- linkFontColor: "#00000099",
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,
871
961
  linkFontTextTransform: "none",
872
962
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
873
963
  linkTextDecoration: globalTokens.type_no_line,
874
- linkMarginTop: "6px",
875
- linkMarginRight: "18px",
876
- linkMarginBottom: "6px",
877
- linkMarginLeft: "18px",
964
+ linkMarginTop: "4px",
965
+ linkMarginBottom: "4px",
966
+ linkMarginRight: "16px",
967
+ linkMarginLeft: "16px",
968
+ linkFocusColor: globalTokens.hal_blue_l_50,
878
969
  scrollBarThumbColor: "#66666626",
879
970
  scrollBarTrackColor: globalTokens.transparent
880
971
  },
881
972
  slider: {
882
973
  fontFamily: globalTokens.type_sans,
883
- fontSize: globalTokens.type_scale_03,
884
- fontStyle: globalTokens.type_normal,
885
- 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,
886
991
  fontColor: globalTokens.hal_black,
887
992
  fontColorOnDark: globalTokens.hal_white,
888
- disabledFontColor: globalTokens.hal_grey_l_60,
889
- 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,
890
1001
  thumbHeight: "12px",
891
1002
  thumbWidth: "12px",
1003
+ hoverThumbHeight: "14px",
1004
+ hoverThumbWidth: "14px",
892
1005
  thumbVerticalPosition: "12px",
1006
+ hoverThumbVerticalPosition: "11px",
893
1007
  thumbBackgroundColor: globalTokens.hal_blue_s_35,
894
1008
  thumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
895
1009
  hoverThumbScale: "1.166666",
@@ -924,94 +1038,95 @@ var componentTokens = {
924
1038
  disabledTotalLineColor: globalTokens.hal_grey_l_95,
925
1039
  disabledTotalLineColorOnDark: globalTokens.hal_grey_s_40,
926
1040
  focusColor: globalTokens.hal_blue_l_50,
927
- 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
928
1045
  },
929
1046
  spinner: {
930
1047
  trackCircleColor: "#5f249f",
931
- trackCircleColorOnDark: "#a46ede",
1048
+ trackCircleColorOverlay: "#a46ede",
932
1049
  totalCircleColor: globalTokens.white,
933
1050
  labelFontFamily: globalTokens.type_sans,
934
- labelFontSize: globalTokens.type_scale_01,
1051
+ labelFontSize: globalTokens.type_scale_02,
935
1052
  labelFontStyle: globalTokens.type_normal,
936
1053
  labelFontWeight: globalTokens.type_regular,
937
1054
  labelFontColor: globalTokens.black,
938
1055
  labelFontColorOnDark: globalTokens.white,
939
- labelFontTextTransform: globalTokens.type_uppercase,
940
- labelLetterSpacing: globalTokens.type_spacing_normal,
941
1056
  labelTextAlign: "center",
942
1057
  progressValueFontFamily: globalTokens.type_sans,
943
- progressValueFontSize: globalTokens.type_scale_01,
1058
+ progressValueFontSize: globalTokens.type_scale_02,
944
1059
  progressValueFontStyle: globalTokens.type_normal,
945
1060
  progressValueFontWeight: globalTokens.type_bold,
946
1061
  progressValueFontColor: globalTokens.inherit,
947
1062
  progressValueFontColorOnDark: globalTokens.white,
948
- progressValueLetterSpacing: globalTokens.type_spacing_normal,
949
1063
  progressValueTextAlign: "center",
950
1064
  overlayBackgroundColor: globalTokens.black,
951
1065
  overlayOpacity: "0.8",
952
1066
  overlayLabelFontFamily: globalTokens.type_sans,
953
- overlayLabelFontSize: globalTokens.type_scale_01,
1067
+ overlayLabelFontSize: globalTokens.type_scale_02,
954
1068
  overlayLabelFontStyle: globalTokens.type_normal,
955
1069
  overlayLabelFontWeight: globalTokens.type_regular,
956
1070
  overlayLabelFontColor: globalTokens.white,
957
- overlayLabelFontTextTransform: globalTokens.type_uppercase,
958
- overlayLabelLetterSpacing: globalTokens.type_spacing_normal,
959
1071
  overlayLabelTextAlign: "center",
960
1072
  overlayProgressValueFontFamily: globalTokens.type_sans,
961
- overlayProgressValueFontSize: globalTokens.type_scale_01,
1073
+ overlayProgressValueFontSize: globalTokens.type_scale_02,
962
1074
  overlayProgressValueFontStyle: globalTokens.type_normal,
963
1075
  overlayProgressValueFontWeight: globalTokens.type_bold,
964
1076
  overlayProgressValueFontColor: globalTokens.white,
965
- overlayProgressValueLetterSpacing: globalTokens.type_spacing_normal,
966
1077
  overlayProgressValueTextAlign: "center"
967
1078
  },
968
1079
  "switch": {
969
1080
  checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
970
1081
  checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
971
- checkedThumbBackgroundColor: globalTokens.white,
972
- checkedThumbBackgroundColorOnDark: globalTokens.white,
973
- uncheckedTrackBackgroundColor: globalTokens.lightGrey,
974
- uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
975
- uncheckedThumbBackgroundColor: globalTokens.white,
976
- uncheckedThumbBackgroundColorOnDark: globalTokens.white,
977
- 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,
978
1089
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
979
- disabledCheckedThumbBackgroundColor: globalTokens.white,
980
- disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
981
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
1090
+ disabledCheckedThumbBackgroundColor: globalTokens.hal_white,
1091
+ disabledCheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1092
+ disabledUncheckedTrackBackgroundColor: globalTokens.hal_grey_l_95,
982
1093
  disabledUncheckedTrackBackgroundColorOnDark: "#363636",
983
- disabledUncheckedThumbBackgroundColor: globalTokens.white,
984
- disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
985
- disabledLabelFontColor: globalTokens.lighterBlack,
1094
+ disabledUncheckedThumbBackgroundColor: globalTokens.hal_white,
1095
+ disabledUncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1096
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
986
1097
  disabledLabelFontColorOnDark: "#575757",
987
1098
  disabledLabelFontStyle: globalTokens.type_normal,
988
1099
  labelFontFamily: globalTokens.type_sans,
989
1100
  labelFontSize: globalTokens.type_scale_root,
990
1101
  labelFontStyle: globalTokens.type_normal,
991
1102
  labelFontWeight: globalTokens.type_regular,
992
- labelFontColor: globalTokens.black,
993
- labelFontColorOnDark: globalTokens.white,
994
- thumbFocusColor: globalTokens.blue,
1103
+ labelFontColor: globalTokens.hal_black,
1104
+ labelFontColorOnDark: globalTokens.hal_white,
1105
+ thumbFocusColor: globalTokens.hal_blue_l_50,
995
1106
  thumbFocusColorOnDark: "#1682FF",
996
1107
  thumbHeight: "24px",
997
1108
  thumbWidth: "24px",
998
- thumbShift: "40%",
1109
+ thumbShift: "1.25rem",
999
1110
  trackHeight: "12px",
1000
- trackWidth: "60px",
1001
- spaceBetweenLabelSwitch: "0px"
1111
+ trackWidth: "36px",
1112
+ spaceBetweenLabelSwitch: "8px"
1002
1113
  },
1003
1114
  tag: {
1004
1115
  fontFamily: globalTokens.type_sans,
1005
- fontColor: globalTokens.black,
1116
+ fontColor: globalTokens.hal_black,
1006
1117
  fontSize: globalTokens.type_scale_02,
1007
1118
  fontStyle: globalTokens.type_normal,
1008
1119
  fontWeight: globalTokens.type_regular,
1009
- fontTextTransform: globalTokens.type_uppercase,
1010
- height: "43px",
1011
- iconColor: globalTokens.white,
1012
- 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",
1013
1127
  iconHeight: "24px",
1014
- iconWidth: "auto"
1128
+ iconWidth: "auto",
1129
+ focusColor: globalTokens.hal_blue_l_50
1015
1130
  },
1016
1131
  table: {
1017
1132
  rowSeparatorThickness: "1px",
@@ -1019,7 +1134,7 @@ var componentTokens = {
1019
1134
  rowSeparatorColor: globalTokens.lightGrey,
1020
1135
  dataBackgroundColor: globalTokens.white,
1021
1136
  dataFontFamily: globalTokens.type_sans,
1022
- dataFontSize: globalTokens.type_scale_root,
1137
+ dataFontSize: globalTokens.type_scale_02,
1023
1138
  dataFontStyle: globalTokens.type_normal,
1024
1139
  dataFontWeight: globalTokens.type_regular,
1025
1140
  dataFontColor: globalTokens.black,
@@ -1065,6 +1180,7 @@ var componentTokens = {
1065
1180
  disabledFontColor: "#999999",
1066
1181
  disabledIconColor: "#999999",
1067
1182
  disabledFontStyle: globalTokens.type_normal,
1183
+ disabledBadgeBackgroundColor: "#0000004D",
1068
1184
  hoverBackgroundColor: "#f2eafa",
1069
1185
  pressedBackgroundColor: "#e5d5f6",
1070
1186
  pressedFontWeight: globalTokens.type_semibold,
@@ -1087,41 +1203,6 @@ var componentTokens = {
1087
1203
  badgeRadiusWithNotificationNumber: "10px"
1088
1204
  },
1089
1205
  textarea: {
1090
- fontFamily: globalTokens.type_sans,
1091
- assistiveTextFontSize: globalTokens.type_scale_01,
1092
- assistiveTextFontStyle: globalTokens.type_normal,
1093
- assistiveTextFontWeight: globalTokens.type_regular,
1094
- assistiveTextFontColor: globalTokens.black,
1095
- assistiveTextFontColorOnDark: globalTokens.white,
1096
- assistiveTextLetterSpacing: "0.03333em",
1097
- disabledColor: globalTokens.lighterBlack,
1098
- disabledColorOnDark: "#575757",
1099
- errorColor: globalTokens.red,
1100
- errorColorOnDark: "#FE344F",
1101
- scrollBarThumbColor: globalTokens.darkGrey,
1102
- scrollBarThumbColorOnDark: globalTokens.white,
1103
- scrollBarTrackColor: globalTokens.lightGrey,
1104
- scrollBarTrackColorOnDark: "#999999",
1105
- labelFontSize: globalTokens.type_scale_03,
1106
- labelFontStyle: globalTokens.type_normal,
1107
- labelFontWeight: globalTokens.type_regular,
1108
- labelFontColor: globalTokens.black,
1109
- labelFontColorOnDark: globalTokens.white,
1110
- labelLetterSpacing: "0.00938em",
1111
- valueFontSize: globalTokens.type_scale_03,
1112
- valueFontStyle: globalTokens.type_normal,
1113
- valueFontWeight: globalTokens.type_regular,
1114
- valueFontColor: globalTokens.black,
1115
- valueFontColorOnDark: globalTokens.white,
1116
- valueLetterSpacing: globalTokens.type_spacing_normal,
1117
- valueLineHeight: "1.1875em",
1118
- underlineColor: globalTokens.black,
1119
- underlineColorOnDark: globalTokens.white,
1120
- underlineFocusColor: globalTokens.black,
1121
- underlineFocusColorOnDark: globalTokens.white,
1122
- underlineThickness: "1px"
1123
- },
1124
- newTextarea: {
1125
1206
  fontFamily: globalTokens.type_sans,
1126
1207
  enabledBorderColor: globalTokens.hal_black,
1127
1208
  enabledBorderColorOnDark: globalTokens.hal_white,
@@ -1135,8 +1216,10 @@ var componentTokens = {
1135
1216
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1136
1217
  errorBorderColor: globalTokens.hal_red_s_41,
1137
1218
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
1138
- hoverErrorBorderColor: "#fe0123",
1219
+ hoverErrorBorderColor: globalTokens.color_red_600,
1139
1220
  hoverErrorBorderColorOnDark: "#fe677b",
1221
+ inputMarginTop: globalTokens.spacing_02,
1222
+ inputMarginBottom: globalTokens.spacing_02,
1140
1223
  errorMessageColor: globalTokens.hal_red_s_41,
1141
1224
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
1142
1225
  labelFontColor: globalTokens.hal_black,
@@ -1144,6 +1227,7 @@ var componentTokens = {
1144
1227
  labelFontSize: globalTokens.type_scale_02,
1145
1228
  labelFontStyle: globalTokens.type_normal,
1146
1229
  labelFontWeight: globalTokens.type_semibold,
1230
+ labelLineHeight: globalTokens.type_leading_loose_01,
1147
1231
  disabledLabelFontColor: globalTokens.hal_grey_l_60,
1148
1232
  disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1149
1233
  optionalLabelFontWeight: globalTokens.type_regular,
@@ -1152,9 +1236,10 @@ var componentTokens = {
1152
1236
  helperTextFontSize: globalTokens.type_scale_01,
1153
1237
  helperTextFontStyle: globalTokens.type_normal,
1154
1238
  helperTextFontWeight: globalTokens.type_regular,
1239
+ helperTextLineHeight: globalTokens.type_leading_normal,
1155
1240
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1156
1241
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1157
- placeholderFontColor: "#808080",
1242
+ placeholderFontColor: "#000000b3",
1158
1243
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1159
1244
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1160
1245
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -1167,149 +1252,113 @@ var componentTokens = {
1167
1252
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1168
1253
  },
1169
1254
  toggleGroup: {
1170
- fontFamily: globalTokens.type_sans,
1171
- fontSize: globalTokens.type_scale_03,
1172
- fontStyle: globalTokens.type_normal,
1173
- fontWeight: globalTokens.type_regular,
1174
- selectedBackgroundColor: globalTokens.hal_purple_s_38,
1175
- selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1176
- selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1177
- selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1178
- selectedFontColor: globalTokens.hal_white,
1179
- 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,
1180
1261
  unselectedBackgroundColor: globalTokens.hal_grey_l_90,
1181
1262
  unselectedHoverBackgroundColor: globalTokens.hal_grey_l_80,
1182
1263
  unselectedActiveBackgroundColor: globalTokens.hal_purple_s_38,
1183
1264
  unselectedDisabledBackgroundColor: globalTokens.hal_grey_l_95,
1184
1265
  unselectedFontColor: globalTokens.hal_black,
1185
1266
  unselectedDisabledFontColor: globalTokens.hal_grey_l_60,
1186
- iconSize: "24px",
1187
- iconPaddingTop: "8px",
1188
- iconPaddingBottom: "8px",
1189
- iconPaddingRight: "8px",
1190
- iconPaddingLeft: "8px",
1191
- labelPaddingTop: "8px",
1192
- labelPaddingBottom: "8px",
1193
- labelPaddingLeft: "24px",
1194
- labelPaddingRight: "24px",
1195
- focusColor: globalTokens.hal_blue_l_50
1196
- },
1197
- upload: {
1198
- fontFamily: globalTokens.type_sans,
1199
- shadowColor: globalTokens.lightWhite,
1200
- scrollBarThumbColor: globalTokens.darkGrey,
1201
- scrollBarTrackColor: globalTokens.lightGrey,
1202
- errorColor: globalTokens.red,
1203
- backgroundColor: globalTokens.white,
1204
- draggingStateBackgroundColor: globalTokens.lightWhite,
1205
- dragAndDropIconColor: globalTokens.black,
1206
- dragAndDropIconSize: "43.5px",
1207
- dragAndDropTitleFontSize: globalTokens.type_scale_04,
1208
- dragAndDropTitleFontStyle: globalTokens.type_normal,
1209
- dragAndDropTitleFontWeight: globalTokens.type_bold,
1210
- dragAndDropTitleFontTextTransform: "none",
1211
- dragAndDropTitleFontColor: globalTokens.black,
1212
- dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1213
- dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1214
- dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1215
- dragAndDropDescriptionFontTextTransform: "none",
1216
- dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1217
- dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1218
- dragAndDropDraggingStateIconSize: "74.5px",
1219
- dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1220
- dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1221
- dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1222
- dragAndDropDraggingStateFontTextTransform: "none",
1223
- dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1224
- dragAndDropAreaIconColor: globalTokens.darkGrey,
1225
- dragAndDropAreaIconSize: "24px",
1226
- dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1227
- dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1228
- dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1229
- dragAndDropAreaTextFontTextTransform: "none",
1230
- dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1231
- fileDeleteIconColor: globalTokens.black,
1232
- fileDeleteIconSize: "30px",
1233
- fileUnderlineColor: globalTokens.lightGrey,
1234
- fileUnderlineThickness: "1px",
1235
- fileNameFontSize: globalTokens.type_scale_03,
1236
- fileNameFontStyle: globalTokens.type_normal,
1237
- fileNameFontWeight: globalTokens.type_regular,
1238
- fileNameFontTextTransform: "none",
1239
- fileNameFontColor: globalTokens.black,
1240
- fileTypeFontSize: globalTokens.type_scale_01,
1241
- fileTypeFontStyle: globalTokens.type_normal,
1242
- fileTypeFontWeight: globalTokens.type_regular,
1243
- fileTypeFontTextTransform: globalTokens.type_uppercase,
1244
- fileTypeFontColor: globalTokens.darkGrey,
1245
- hoverFileColor: globalTokens.darkWhite,
1246
- uploadedFileIconColor: globalTokens.lightGrey,
1247
- uploadedFileIconSize: "24px",
1248
- uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1249
- uploadedFilesTitleFontStyle: globalTokens.type_normal,
1250
- uploadedFilesTitleFontWeight: globalTokens.type_regular,
1251
- uploadedFilesTitleFontTextTransform: "none",
1252
- uploadedFilesTitleFontColor: globalTokens.black,
1253
- uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1254
- uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1255
- uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1256
- uploadedFilesSubtitleFontTextTransform: "none",
1257
- uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1258
- 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
1259
1301
  },
1260
1302
  wizard: {
1261
- disabledBackgroundColor: globalTokens.lightGrey,
1262
- disabledFontColor: globalTokens.darkGrey,
1263
- stepContainerFontSize: globalTokens.type_scale_03,
1264
- stepContainerFontFamily: globalTokens.type_sans,
1265
- stepContainerFontStyle: globalTokens.type_normal,
1266
- stepContainerFontWeight: globalTokens.type_regular,
1267
- stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1268
- stepContainerFontColor: globalTokens.black,
1269
- stepContainerSelectedFontColor: globalTokens.white,
1270
- stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1271
- stepContainerBackgroundColor: globalTokens.white,
1272
- 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,
1273
1333
  labelFontSize: globalTokens.type_scale_03,
1274
1334
  labelFontFamily: globalTokens.type_sans,
1275
1335
  labelFontStyle: globalTokens.type_normal,
1276
1336
  labelFontWeight: globalTokens.type_regular,
1277
- labelLetterSpacing: globalTokens.type_spacing_normal,
1337
+ labelFontTracking: globalTokens.type_spacing_normal,
1278
1338
  labelFontTextTransform: "none",
1279
1339
  labelTextAlign: "left",
1280
- labelFontColor: globalTokens.darkGrey,
1281
- visitedLabelFontColor: globalTokens.black,
1282
- visitedDescriptionFontColor: globalTokens.black,
1283
- descriptionFontSize: globalTokens.type_scale_01,
1284
- descriptionFontFamily: globalTokens.type_sans,
1285
- descriptionFontStyle: globalTokens.type_normal,
1286
- descriptionFontWeight: globalTokens.type_regular,
1287
- descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1288
- descriptionFontTextTransform: "none",
1289
- descriptionFontColor: globalTokens.darkGrey,
1290
- descriptionTextAlign: "left",
1291
- circleWidth: "32px",
1292
- circleHeight: "32px",
1293
- circleBorderThickness: "2px",
1294
- circleBorderStyle: "solid",
1295
- circleBorderRadius: "45px",
1296
- circleBorderColor: globalTokens.black,
1297
- selectedCircleWidth: "32px",
1298
- selectedCircleHeight: "32px",
1299
- selectedCircleBorderThickness: "2px",
1300
- selectedCircleBorderStyle: "solid",
1301
- selectedCircleBorderRadius: "45px",
1302
- selectedCircleBorderColor: globalTokens.purple,
1303
- disabledCircleWidth: "32px",
1304
- disabledCircleHeight: "32px",
1305
- disabledCircleBorderThickness: "2px",
1306
- disabledCircleBorderStyle: "solid",
1307
- disabledCircleBorderRadius: "45px",
1308
- 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",
1309
1358
  separatorBorderThickness: "1px",
1310
1359
  separatorBorderStyle: "solid",
1311
- separatorColor: globalTokens.lightGrey,
1312
- focusColor: globalTokens.blue
1360
+ separatorColor: globalTokens.hal_grey_s_40,
1361
+ focusColor: globalTokens.hal_blue_l_50
1313
1362
  }
1314
1363
  };
1315
1364
  exports.componentTokens = componentTokens;
@@ -1324,12 +1373,11 @@ var spaces = {
1324
1373
  };
1325
1374
  exports.spaces = spaces;
1326
1375
  var responsiveSizes = {
1327
- mobileSmall: "320",
1328
- mobileMedium: "375",
1329
- mobileLarge: "425",
1330
- tablet: "768",
1331
- laptop: "1024",
1332
- desktop: "1440"
1376
+ xsmall: "20",
1377
+ small: "30",
1378
+ medium: "45",
1379
+ large: "66",
1380
+ xlarge: "90"
1333
1381
  };
1334
1382
  exports.responsiveSizes = responsiveSizes;
1335
1383
  var typeface = {
@@ -1364,4 +1412,98 @@ var typeface = {
1364
1412
  textTransform: "uppercase"
1365
1413
  }
1366
1414
  };
1367
- 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
+ applicationLayout: {
1428
+ visibilityToggleTitle: "Toggle visibility sidenav"
1429
+ },
1430
+ alert: {
1431
+ infoTitleText: "information",
1432
+ successTitleText: "success",
1433
+ warningTitleText: "warning",
1434
+ errorTitleText: "error"
1435
+ },
1436
+ dateInput: {
1437
+ invalidDateErrorMessage: "Invalid date."
1438
+ },
1439
+ fileInput: {
1440
+ fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1441
+ fileSizeLessThanErrorMessage: "File size must be less than max size.",
1442
+ multipleButtonLabelDefault: "Select files",
1443
+ singleButtonLabelDefault: "Select file",
1444
+ dropAreaButtonLabelDefault: "Select",
1445
+ multipleDropAreaLabelDefault: "or drop files",
1446
+ singleDropAreaLabelDefault: "or drop a file",
1447
+ deleteFileActionTitle: "Remove file"
1448
+ },
1449
+ footer: {
1450
+ copyrightText: function copyrightText(year) {
1451
+ return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
1452
+ }
1453
+ },
1454
+ header: {
1455
+ closeIcon: "Close menu",
1456
+ hamburguerTitle: "Menu"
1457
+ },
1458
+ numberInput: {
1459
+ valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
1460
+ return "Value must be greater than or equal to ".concat(value, ".");
1461
+ },
1462
+ valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
1463
+ return "Value must be less than or equal to ".concat(value, ".");
1464
+ },
1465
+ decrementValueTitle: "Decrement value",
1466
+ incrementValueTitle: "Increment value"
1467
+ },
1468
+ paginator: {
1469
+ itemsPerPageText: "Items per page: ",
1470
+ minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
1471
+ return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
1472
+ },
1473
+ goToPageText: "Go to page:",
1474
+ pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
1475
+ return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
1476
+ }
1477
+ },
1478
+ passwordInput: {
1479
+ inputShowPasswordTitle: "Show password",
1480
+ inputHidePasswordTitle: "Hide password"
1481
+ },
1482
+ quickNav: {
1483
+ contentTitle: "Contents"
1484
+ },
1485
+ radioGroup: {
1486
+ optionalItemLabelDefault: "N/A"
1487
+ },
1488
+ select: {
1489
+ noMatchesErrorMessage: "No matches found",
1490
+ actionClearSelectionTitle: "Clear selection",
1491
+ actionClearSearchTitle: "Clear search"
1492
+ },
1493
+ tabs: {
1494
+ scrollLeft: "Scroll left",
1495
+ scrollRight: "Scroll right"
1496
+ },
1497
+ textInput: {
1498
+ clearFieldActionTitle: "Clear field",
1499
+ searchingMessage: "Searching...",
1500
+ fetchingDataErrorMessage: "Error fetching data"
1501
+ },
1502
+ calendar: {
1503
+ days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1504
+ daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
1505
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1506
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
1507
+ }
1508
+ };
1509
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;