@dxc-technology/halstack-react 0.0.0-c0aaf04 → 0.0.0-c18d61a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (469) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/HalstackContext.d.ts +12 -0
  4. package/HalstackContext.js +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 +249 -0
  58. package/checkbox/Checkbox.stories.tsx +188 -0
  59. package/checkbox/Checkbox.test.js +155 -0
  60. package/checkbox/types.d.ts +64 -0
  61. package/checkbox/types.js +5 -0
  62. package/chip/Chip.d.ts +4 -0
  63. package/chip/Chip.js +161 -0
  64. package/chip/Chip.stories.tsx +119 -0
  65. package/chip/Chip.test.js +56 -0
  66. package/chip/types.d.ts +45 -0
  67. package/chip/types.js +5 -0
  68. package/{dist/common → common}/OpenSans.css +0 -0
  69. package/{dist/common → common}/RequiredComponent.js +3 -11
  70. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  71. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  72. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  73. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  74. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  75. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  76. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  77. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  78. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  79. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  80. package/{dist/common → common}/utils.js +0 -0
  81. package/{dist/common → common}/variables.js +569 -421
  82. package/date-input/DateInput.d.ts +4 -0
  83. package/date-input/DateInput.js +372 -0
  84. package/date-input/DateInput.stories.tsx +138 -0
  85. package/date-input/DateInput.test.js +479 -0
  86. package/date-input/types.d.ts +107 -0
  87. package/date-input/types.js +5 -0
  88. package/dialog/Dialog.d.ts +4 -0
  89. package/dialog/Dialog.js +162 -0
  90. package/dialog/Dialog.stories.tsx +267 -0
  91. package/dialog/Dialog.test.js +70 -0
  92. package/dialog/types.d.ts +44 -0
  93. package/dialog/types.js +5 -0
  94. package/dropdown/Dropdown.d.ts +4 -0
  95. package/dropdown/Dropdown.js +388 -0
  96. package/dropdown/Dropdown.stories.tsx +312 -0
  97. package/dropdown/Dropdown.test.js +590 -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 +571 -0
  106. package/file-input/FileInput.stories.tsx +539 -0
  107. package/file-input/FileInput.test.js +498 -0
  108. package/file-input/FileItem.d.ts +14 -0
  109. package/file-input/FileItem.js +174 -0
  110. package/file-input/types.d.ts +112 -0
  111. package/file-input/types.js +5 -0
  112. package/flex/Flex.d.ts +4 -0
  113. package/flex/Flex.js +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 +543 -0
  165. package/number-input/NumberInputContext.d.ts +4 -0
  166. package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +6 -3
  167. package/number-input/numberInputContextTypes.d.ts +19 -0
  168. package/number-input/numberInputContextTypes.js +5 -0
  169. package/number-input/types.d.ts +124 -0
  170. package/number-input/types.js +5 -0
  171. package/package.json +42 -30
  172. package/paginator/Icons.js +66 -0
  173. package/paginator/Paginator.d.ts +4 -0
  174. package/paginator/Paginator.js +171 -0
  175. package/paginator/Paginator.stories.tsx +63 -0
  176. package/paginator/Paginator.test.js +308 -0
  177. package/paginator/types.d.ts +38 -0
  178. package/paginator/types.js +5 -0
  179. package/paragraph/Paragraph.d.ts +6 -0
  180. package/paragraph/Paragraph.js +38 -0
  181. package/paragraph/Paragraph.stories.tsx +44 -0
  182. package/password-input/PasswordInput.d.ts +4 -0
  183. package/{dist/password/Password.js → password-input/PasswordInput.js} +48 -82
  184. package/password-input/PasswordInput.stories.tsx +131 -0
  185. package/password-input/PasswordInput.test.js +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 +342 -0
  233. package/slider/Slider.stories.tsx +183 -0
  234. package/slider/Slider.test.js +250 -0
  235. package/slider/types.d.ts +82 -0
  236. package/slider/types.js +5 -0
  237. package/spinner/Spinner.d.ts +4 -0
  238. package/spinner/Spinner.js +250 -0
  239. package/spinner/Spinner.stories.jsx +103 -0
  240. package/spinner/Spinner.test.js +64 -0
  241. package/spinner/types.d.ts +32 -0
  242. package/spinner/types.js +5 -0
  243. package/switch/Switch.d.ts +4 -0
  244. package/switch/Switch.js +261 -0
  245. package/switch/Switch.stories.tsx +138 -0
  246. package/switch/Switch.test.js +225 -0
  247. package/switch/types.d.ts +61 -0
  248. package/switch/types.js +5 -0
  249. package/table/Table.d.ts +4 -0
  250. package/{dist/table → table}/Table.js +12 -26
  251. package/table/Table.stories.jsx +277 -0
  252. package/table/Table.test.js +26 -0
  253. package/table/types.d.ts +21 -0
  254. package/table/types.js +5 -0
  255. package/tabs/Tab.d.ts +4 -0
  256. package/tabs/Tab.js +135 -0
  257. package/tabs/Tabs.d.ts +4 -0
  258. package/tabs/Tabs.js +467 -0
  259. package/tabs/Tabs.stories.tsx +186 -0
  260. package/tabs/Tabs.test.js +351 -0
  261. package/tabs/types.d.ts +92 -0
  262. package/tabs/types.js +5 -0
  263. package/tabs-nav/NavTabs.d.ts +8 -0
  264. package/tabs-nav/NavTabs.js +125 -0
  265. package/tabs-nav/NavTabs.stories.tsx +170 -0
  266. package/tabs-nav/NavTabs.test.js +82 -0
  267. package/tabs-nav/Tab.d.ts +4 -0
  268. package/tabs-nav/Tab.js +130 -0
  269. package/tabs-nav/types.d.ts +53 -0
  270. package/tabs-nav/types.js +5 -0
  271. package/tag/Tag.d.ts +4 -0
  272. package/tag/Tag.js +183 -0
  273. package/tag/Tag.stories.tsx +142 -0
  274. package/tag/Tag.test.js +60 -0
  275. package/tag/types.d.ts +69 -0
  276. package/tag/types.js +5 -0
  277. package/text-input/Icons.d.ts +8 -0
  278. package/text-input/Icons.js +60 -0
  279. package/text-input/Suggestion.d.ts +4 -0
  280. package/text-input/Suggestion.js +57 -0
  281. package/text-input/Suggestions.d.ts +4 -0
  282. package/text-input/Suggestions.js +134 -0
  283. package/text-input/TextInput.d.ts +4 -0
  284. package/text-input/TextInput.js +677 -0
  285. package/text-input/TextInput.stories.tsx +481 -0
  286. package/text-input/TextInput.test.js +1771 -0
  287. package/text-input/types.d.ts +197 -0
  288. package/text-input/types.js +5 -0
  289. package/textarea/Textarea.d.ts +4 -0
  290. package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +88 -157
  291. package/textarea/Textarea.stories.jsx +157 -0
  292. package/textarea/Textarea.test.js +437 -0
  293. package/textarea/types.d.ts +137 -0
  294. package/textarea/types.js +5 -0
  295. package/toggle-group/ToggleGroup.d.ts +4 -0
  296. package/toggle-group/ToggleGroup.js +215 -0
  297. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  298. package/toggle-group/ToggleGroup.test.js +156 -0
  299. package/toggle-group/types.d.ts +105 -0
  300. package/toggle-group/types.js +5 -0
  301. package/typography/Typography.d.ts +4 -0
  302. package/typography/Typography.js +131 -0
  303. package/typography/Typography.stories.tsx +198 -0
  304. package/typography/types.d.ts +18 -0
  305. package/typography/types.js +5 -0
  306. package/useTheme.d.ts +2 -0
  307. package/{dist/useTheme.js → useTheme.js} +2 -2
  308. package/useTranslatedLabels.d.ts +2 -0
  309. package/useTranslatedLabels.js +20 -0
  310. package/wizard/Wizard.d.ts +4 -0
  311. package/wizard/Wizard.js +285 -0
  312. package/wizard/Wizard.stories.tsx +233 -0
  313. package/wizard/Wizard.test.js +141 -0
  314. package/wizard/types.d.ts +65 -0
  315. package/wizard/types.js +5 -0
  316. package/README.md +0 -66
  317. package/babel.config.js +0 -8
  318. package/dist/BackgroundColorContext.js +0 -46
  319. package/dist/ThemeContext.js +0 -240
  320. package/dist/accordion/Accordion.js +0 -353
  321. package/dist/accordion-group/AccordionGroup.js +0 -186
  322. package/dist/badge/Badge.js +0 -63
  323. package/dist/box/Box.js +0 -156
  324. package/dist/button/Button.js +0 -238
  325. package/dist/card/Card.js +0 -254
  326. package/dist/checkbox/Checkbox.js +0 -300
  327. package/dist/checkbox/Checkbox.stories.js +0 -144
  328. package/dist/checkbox/readme.md +0 -116
  329. package/dist/chip/Chip.js +0 -265
  330. package/dist/date/Date.js +0 -381
  331. package/dist/date/Date.stories.js +0 -205
  332. package/dist/date/readme.md +0 -73
  333. package/dist/dialog/Dialog.js +0 -218
  334. package/dist/dropdown/Dropdown.js +0 -544
  335. package/dist/footer/Footer.js +0 -395
  336. package/dist/footer/Footer.stories.js +0 -94
  337. package/dist/footer/dxc_logo.svg +0 -15
  338. package/dist/footer/readme.md +0 -41
  339. package/dist/header/Header.js +0 -403
  340. package/dist/header/Header.stories.js +0 -176
  341. package/dist/header/close_icon.svg +0 -1
  342. package/dist/header/dxc_logo_black.svg +0 -8
  343. package/dist/header/hamb_menu_black.svg +0 -1
  344. package/dist/header/hamb_menu_white.svg +0 -1
  345. package/dist/header/readme.md +0 -33
  346. package/dist/input-text/InputText.js +0 -707
  347. package/dist/input-text/InputText.stories.js +0 -209
  348. package/dist/input-text/error.svg +0 -1
  349. package/dist/input-text/readme.md +0 -91
  350. package/dist/layout/ApplicationLayout.js +0 -331
  351. package/dist/layout/facebook.svg +0 -45
  352. package/dist/layout/linkedin.svg +0 -50
  353. package/dist/layout/twitter.svg +0 -53
  354. package/dist/link/Link.js +0 -241
  355. package/dist/link/readme.md +0 -51
  356. package/dist/new-date/NewDate.js +0 -403
  357. package/dist/new-input-text/NewInputText.js +0 -961
  358. package/dist/number/Number.js +0 -138
  359. package/dist/paginator/Paginator.js +0 -289
  360. package/dist/paginator/images/next.svg +0 -3
  361. package/dist/paginator/images/nextPage.svg +0 -3
  362. package/dist/paginator/images/previous.svg +0 -3
  363. package/dist/paginator/images/previousPage.svg +0 -3
  364. package/dist/paginator/readme.md +0 -50
  365. package/dist/password/styles.css +0 -3
  366. package/dist/progress-bar/ProgressBar.js +0 -242
  367. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  368. package/dist/progress-bar/readme.md +0 -63
  369. package/dist/radio/Radio.js +0 -209
  370. package/dist/radio/Radio.stories.js +0 -166
  371. package/dist/radio/readme.md +0 -70
  372. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  373. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  374. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  375. package/dist/select/Select.js +0 -585
  376. package/dist/select/Select.stories.js +0 -235
  377. package/dist/select/readme.md +0 -72
  378. package/dist/sidenav/Sidenav.js +0 -177
  379. package/dist/slider/Slider.js +0 -319
  380. package/dist/slider/Slider.stories.js +0 -241
  381. package/dist/slider/readme.md +0 -64
  382. package/dist/spinner/Spinner.js +0 -381
  383. package/dist/spinner/Spinner.stories.js +0 -183
  384. package/dist/spinner/readme.md +0 -65
  385. package/dist/switch/Switch.js +0 -222
  386. package/dist/switch/Switch.stories.js +0 -134
  387. package/dist/switch/readme.md +0 -133
  388. package/dist/tabs/Tabs.js +0 -343
  389. package/dist/tabs/Tabs.stories.js +0 -130
  390. package/dist/tabs/readme.md +0 -78
  391. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  392. package/dist/tabs-for-sections/readme.md +0 -78
  393. package/dist/tag/Tag.js +0 -288
  394. package/dist/textarea/Textarea.js +0 -264
  395. package/dist/toggle/Toggle.js +0 -220
  396. package/dist/toggle/Toggle.stories.js +0 -297
  397. package/dist/toggle/readme.md +0 -80
  398. package/dist/toggle-group/ToggleGroup.js +0 -223
  399. package/dist/upload/Upload.js +0 -205
  400. package/dist/upload/Upload.stories.js +0 -72
  401. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  402. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  403. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  404. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  405. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  406. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  407. package/dist/upload/file-upload/FileToUpload.js +0 -184
  408. package/dist/upload/file-upload/audio-icon.svg +0 -4
  409. package/dist/upload/file-upload/close.svg +0 -4
  410. package/dist/upload/file-upload/file-icon.svg +0 -4
  411. package/dist/upload/file-upload/video-icon.svg +0 -4
  412. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  413. package/dist/upload/readme.md +0 -37
  414. package/dist/upload/transaction/Transaction.js +0 -175
  415. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  416. package/dist/upload/transaction/audio-icon.svg +0 -4
  417. package/dist/upload/transaction/error-icon.svg +0 -4
  418. package/dist/upload/transaction/file-icon-err.svg +0 -4
  419. package/dist/upload/transaction/file-icon.svg +0 -4
  420. package/dist/upload/transaction/image-icon-err.svg +0 -4
  421. package/dist/upload/transaction/image-icon.svg +0 -4
  422. package/dist/upload/transaction/success-icon.svg +0 -4
  423. package/dist/upload/transaction/video-icon-err.svg +0 -4
  424. package/dist/upload/transaction/video-icon.svg +0 -4
  425. package/dist/upload/transactions/Transactions.js +0 -138
  426. package/dist/wizard/Wizard.js +0 -411
  427. package/dist/wizard/invalid_icon.svg +0 -5
  428. package/dist/wizard/valid_icon.svg +0 -5
  429. package/dist/wizard/validation-wrong.svg +0 -6
  430. package/test/Accordion.test.js +0 -33
  431. package/test/AccordionGroup.test.js +0 -125
  432. package/test/Alert.test.js +0 -53
  433. package/test/Box.test.js +0 -10
  434. package/test/Button.test.js +0 -18
  435. package/test/Card.test.js +0 -30
  436. package/test/Checkbox.test.js +0 -45
  437. package/test/Chip.test.js +0 -25
  438. package/test/Date.test.js +0 -393
  439. package/test/Dialog.test.js +0 -23
  440. package/test/Dropdown.test.js +0 -145
  441. package/test/Footer.test.js +0 -99
  442. package/test/Header.test.js +0 -39
  443. package/test/Heading.test.js +0 -35
  444. package/test/InputText.test.js +0 -240
  445. package/test/Link.test.js +0 -43
  446. package/test/NewDate.test.js +0 -203
  447. package/test/NewInputText.test.js +0 -817
  448. package/test/NewTextarea.test.js +0 -201
  449. package/test/Number.test.js +0 -241
  450. package/test/Paginator.test.js +0 -177
  451. package/test/Password.test.js +0 -76
  452. package/test/ProgressBar.test.js +0 -35
  453. package/test/Radio.test.js +0 -37
  454. package/test/ResultsetTable.test.js +0 -330
  455. package/test/Select.test.js +0 -189
  456. package/test/Sidenav.test.js +0 -45
  457. package/test/Slider.test.js +0 -82
  458. package/test/Spinner.test.js +0 -32
  459. package/test/Switch.test.js +0 -45
  460. package/test/Table.test.js +0 -36
  461. package/test/Tabs.test.js +0 -109
  462. package/test/TabsForSections.test.js +0 -34
  463. package/test/Tag.test.js +0 -32
  464. package/test/TextArea.test.js +0 -52
  465. package/test/ToggleGroup.test.js +0 -81
  466. package/test/Upload.test.js +0 -60
  467. package/test/Wizard.test.js +0 -130
  468. package/test/mocks/pngMock.js +0 -1
  469. package/test/mocks/svgMock.js +0 -1
@@ -1,18 +1,11 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
- exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
9
-
10
- var _dxc_logo_black = _interopRequireDefault(require("../header/dxc_logo_black.svg"));
11
-
12
- var _dxc_logo = _interopRequireDefault(require("../footer/dxc_logo.svg"));
13
-
6
+ exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
14
7
  var globalTokens = {
15
- // Color
8
+ // Color
16
9
  inherit: "inherit",
17
10
  transparent: "transparent",
18
11
  hal_white: "#ffffff",
@@ -24,26 +17,37 @@ var globalTokens = {
24
17
  hal_grey_s_40: "#666666",
25
18
  hal_black: "#000000",
26
19
  color_grey_800: "#4d4d4d",
20
+ color_grey_600: "#808080",
21
+ color_grey_50: "#fafafa",
22
+ color_grey_a_100: "#0000000d",
23
+ color_grey_a_300: "#00000033",
27
24
  hal_purple_l_95: "#f2eafa",
28
25
  hal_purple_l_90: "#e5d5f6",
29
26
  hal_purple_l_65: "#a46ede",
30
27
  hal_purple_s_38: "#5f249f",
31
28
  hal_purple_d_30: "#4b1c7d",
32
29
  hal_purple_d_20: "#321353",
30
+ hal_purple_d_70: "#9A6BB2",
33
31
  color_purple_600: "#7D2FD0",
32
+ color_purple_300: "#cbacec",
34
33
  hal_blue_l_95: "#e6f4ff",
35
34
  hal_blue_l_80: "#99d5ff",
36
35
  hal_blue_l_50: "#0095ff",
37
36
  hal_blue_l_45: "#0086e6",
38
37
  hal_blue_s_35: "#0067b3",
39
38
  hal_blue_d_20: "#003c66",
39
+ color_blue_200: "#cceaff",
40
40
  color_blue_500: "#33AAFF",
41
+ color_blue_50: "#f5fbff",
41
42
  hal_red_l_95: "#ffe6e9",
42
43
  hal_red_l_80: "#fe9aa7",
43
44
  hal_red_l_60: "#fe344f",
44
45
  hal_red_s_41: "#d0011b",
45
46
  hal_red_d_30: "#980115",
46
47
  hal_red_d_20: "#65010e",
48
+ color_red_700: "#ffccd3",
49
+ color_red_50: "#FFF5F6",
50
+ color_red_600: "#fe0123",
47
51
  hal_green_l_95: "#eafaef",
48
52
  hal_green_l_80: "#acecbe",
49
53
  hal_green_s_39: "#24a148",
@@ -91,7 +95,7 @@ var globalTokens = {
91
95
  type_sans: "Open Sans, sans-serif",
92
96
  type_scale_root: "16px",
93
97
  type_scale_08: "3.75rem",
94
- type_scale_07: "3rem",
98
+ type_scale_07: "2.5rem",
95
99
  type_scale_06: "2rem",
96
100
  type_scale_05: "1.5rem",
97
101
  type_scale_04: "1.25rem",
@@ -106,7 +110,7 @@ var globalTokens = {
106
110
  type_normal: "normal",
107
111
  type_spacing_tight_02: "-0.05em",
108
112
  type_spacing_tight_01: "-0.025em",
109
- type_spacing_normal: "0",
113
+ type_spacing_normal: "0em",
110
114
  type_spacing_wide_01: "0.025em",
111
115
  type_spacing_wide_02: "0.05em",
112
116
  type_spacing_wide_03: "0.1em",
@@ -119,7 +123,7 @@ var globalTokens = {
119
123
  type_leading_compact_02: "1.25em",
120
124
  type_leading_compact_01: "1.365em",
121
125
  type_leading_normal: "1.5em",
122
- type_leading_loose_01: "1.75em",
126
+ type_leading_loose_01: "1.715em",
123
127
  type_leading_loose_02: "2em",
124
128
  fontSize10: "10px",
125
129
  // Spacing
@@ -140,21 +144,22 @@ var globalTokens = {
140
144
  spacing_14: "7rem",
141
145
  // Border
142
146
  border_width_0: "0px",
143
- border_width_01: "1px",
144
- border_width_02: "2px",
145
- border_radius_01: "2px",
146
- border_radius_02: "4px",
147
+ border_width_1: "1px",
148
+ border_width_2: "2px",
149
+ border_width_4: "4px",
150
+ border_radius_none: "0rem",
151
+ border_radius_small: "0.125rem",
152
+ border_radius_medium: "0.25rem",
153
+ border_radius_large: "0.375rem",
154
+ border_radius_full: "9999px",
147
155
  border_solid: "solid",
148
- border_none: "none",
149
- // Padding
150
- padding_08: "8px",
151
- padding_16: "16px"
156
+ border_dashed: "dashed",
157
+ border_none: "none"
152
158
  };
153
159
  exports.globalTokens = globalTokens;
154
160
  var componentTokens = {
155
161
  accordion: {
156
162
  backgroundColor: globalTokens.hal_white,
157
- disabledBackgroundColor: globalTokens.transparent,
158
163
  hoverBackgroundColor: globalTokens.hal_purple_l_95,
159
164
  arrowColor: globalTokens.hal_purple_s_38,
160
165
  disabledArrowColor: globalTokens.hal_grey_l_60,
@@ -174,13 +179,13 @@ var componentTokens = {
174
179
  titleLabelFontStyle: globalTokens.type_normal,
175
180
  titleLabelFontColor: globalTokens.hal_black,
176
181
  disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
177
- titleLabelPaddingLeft: "0px",
178
- titleLabelPaddingRight: "16px",
179
182
  titleLabelPaddingTop: "0px",
180
183
  titleLabelPaddingBottom: "0px",
184
+ titleLabelPaddingLeft: "0px",
185
+ titleLabelPaddingRight: "16px",
186
+ focusBorderColor: globalTokens.hal_blue_l_50,
181
187
  focusBorderStyle: "solid",
182
188
  focusBorderThickness: "2px",
183
- focusBorderColor: globalTokens.hal_blue_l_50,
184
189
  borderRadius: "4px",
185
190
  boxShadowOffsetX: "0px",
186
191
  boxShadowOffsetY: "6px",
@@ -234,7 +239,7 @@ var componentTokens = {
234
239
  successBackgroundColor: globalTokens.hal_green_l_95,
235
240
  warningBackgroundColor: globalTokens.hal_yellow_l_95,
236
241
  errorBackgroundColor: globalTokens.hal_red_l_95,
237
- hoverActionBackgroundColor: "#0000000D",
242
+ hoverActionBackgroundColor: globalTokens.color_grey_a_100,
238
243
  activeActionBackgroundColor: "#0000001A",
239
244
  focusActionBorderColor: globalTokens.hal_blue_l_50,
240
245
  overlayColor: "#000000B3"
@@ -255,20 +260,29 @@ var componentTokens = {
255
260
  oneShadowDepthShadowOffsetY: "3px",
256
261
  oneShadowDepthShadowBlur: "6px",
257
262
  oneShadowDepthShadowSpread: "0px",
258
- oneShadowDepthShadowColor: "#00000033",
263
+ oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
259
264
  twoShadowDepthShadowOffsetX: "0px",
260
265
  twoShadowDepthShadowOffsetY: "3px",
261
266
  twoShadowDepthShadowBlur: "10px",
262
267
  twoShadowDepthShadowSpread: "0px",
263
- twoShadowDepthShadowColor: "#00000033"
268
+ twoShadowDepthShadowColor: globalTokens.color_grey_a_300
269
+ },
270
+ bulletedList: {
271
+ fontColor: globalTokens.hal_black,
272
+ fontColorOnDark: globalTokens.hal_white,
273
+ bulletIconHeight: "1.5rem",
274
+ bulletIconWidth: "1.5rem",
275
+ bulletHeight: "5px",
276
+ bulletWidth: "5px",
277
+ bulletMarginRight: "0.5rem"
264
278
  },
265
279
  button: {
266
280
  labelFontLineHeight: globalTokens.type_leading_normal,
267
281
  labelLetterSpacing: globalTokens.type_spacing_wide_01,
268
- paddingLeft: globalTokens.padding_08,
269
- paddingRight: globalTokens.padding_08,
270
- paddingTop: globalTokens.padding_08,
271
- paddingBottom: globalTokens.padding_08,
282
+ paddingLeft: globalTokens.spacing_03,
283
+ paddingRight: globalTokens.spacing_03,
284
+ paddingTop: globalTokens.spacing_03,
285
+ paddingBottom: globalTokens.spacing_03,
272
286
  focusBorderColor: globalTokens.hal_blue_l_50,
273
287
  focusBorderColorOnDark: globalTokens.hal_blue_l_50,
274
288
  primaryBackgroundColor: globalTokens.hal_purple_s_38,
@@ -285,7 +299,7 @@ var componentTokens = {
285
299
  primaryDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
286
300
  primaryBorderThickness: globalTokens.border_width_0,
287
301
  primaryBorderStyle: globalTokens.border_none,
288
- primaryBorderRadius: globalTokens.border_radius_02,
302
+ primaryBorderRadius: globalTokens.border_radius_medium,
289
303
  primaryFontFamily: globalTokens.type_sans,
290
304
  primaryFontSize: globalTokens.type_scale_03,
291
305
  primaryFontWeight: globalTokens.type_regular,
@@ -307,9 +321,9 @@ var componentTokens = {
307
321
  secondaryDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
308
322
  secondaryDisabledBorderColor: globalTokens.hal_grey_l_60,
309
323
  secondaryDisabledBorderColorOnDark: globalTokens.hal_grey_l_60,
310
- secondaryBorderThickness: globalTokens.border_width_01,
324
+ secondaryBorderThickness: globalTokens.border_width_1,
311
325
  secondaryBorderStyle: globalTokens.border_solid,
312
- secondaryBorderRadius: globalTokens.border_radius_02,
326
+ secondaryBorderRadius: globalTokens.border_radius_medium,
313
327
  secondaryFontFamily: globalTokens.type_sans,
314
328
  secondaryFontSize: globalTokens.type_scale_03,
315
329
  secondaryFontWeight: globalTokens.type_regular,
@@ -327,7 +341,7 @@ var componentTokens = {
327
341
  textDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
328
342
  textBorderThickness: globalTokens.border_width_0,
329
343
  textBorderStyle: globalTokens.border_none,
330
- textBorderRadius: globalTokens.border_radius_02,
344
+ textBorderRadius: globalTokens.border_radius_medium,
331
345
  textFontFamily: globalTokens.type_sans,
332
346
  textFontSize: globalTokens.type_scale_03,
333
347
  textFontWeight: globalTokens.type_regular
@@ -340,7 +354,7 @@ var componentTokens = {
340
354
  backgroundColorChecked: globalTokens.hal_blue_s_35,
341
355
  backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
342
356
  hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
343
- hoverBackgroundColorCheckedOnDark: global.hal_white,
357
+ hoverBackgroundColorCheckedOnDark: globalTokens.hal_white,
344
358
  disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
345
359
  disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
346
360
  borderColor: globalTokens.hal_blue_s_35,
@@ -385,22 +399,22 @@ var componentTokens = {
385
399
  iconSpacing: "8px",
386
400
  iconColor: globalTokens.hal_black,
387
401
  disabledIconColor: globalTokens.hal_grey_l_60,
388
- focusColor: globalTokens.hal_blue_s_35
402
+ focusColor: globalTokens.hal_blue_l_50
389
403
  },
390
- date: {
391
- pickerSelectedDateBackgroundColor: globalTokens.purple,
392
- pickerSelectedDateColor: globalTokens.hal_white,
404
+ dateInput: {
405
+ pickerFontFamily: globalTokens.type_sans,
393
406
  pickerBackgroundColor: globalTokens.hal_white,
394
- pickerFontColor: globalTokens.hal_black,
395
- pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
396
407
  pickerHoverDateFontColor: globalTokens.hal_black,
397
- pickerActualDateColor: globalTokens.lightGrey,
398
- pickerYearColor: globalTokens.hal_black,
399
- pickerMonthColor: globalTokens.hal_black,
400
- pickerWeekLabelColor: globalTokens.hal_black,
401
- pickerBackgroundColorMonthArrows: globalTokens.transparent,
402
- focusColor: globalTokens.blue,
403
- fontFamily: globalTokens.type_sans,
408
+ pickerHoverDateBackgroundColor: globalTokens.hal_purple_l_90,
409
+ pickerSelectedDateColor: globalTokens.hal_white,
410
+ pickerSelectedDateBackgroundColor: globalTokens.hal_purple_s_38,
411
+ pickerActualDateFontColor: globalTokens.hal_grey_l_60,
412
+ pickerYearFontColor: globalTokens.hal_black,
413
+ pickerMonthFontColor: globalTokens.hal_black,
414
+ pickerWeekFontColor: globalTokens.hal_black,
415
+ pickerDayFontColor: globalTokens.hal_black,
416
+ pickerMonthArrowsBackgroundColor: globalTokens.transparent,
417
+ pickerFocusColor: globalTokens.hal_blue_l_50,
404
418
  pickerHeight: "316px",
405
419
  pickerWidth: "290px"
406
420
  },
@@ -421,7 +435,10 @@ var componentTokens = {
421
435
  boxShadowOffsetY: "1px",
422
436
  boxShadowBlur: "3px",
423
437
  boxShadowColor: "rgba(0, 0, 0, 0.2)",
424
- overlayOpacity: "0.7"
438
+ overlayOpacity: "0.7",
439
+ fontFamily: globalTokens.type_sans,
440
+ fontSize: globalTokens.type_scale_03,
441
+ fontWeight: globalTokens.type_regular
425
442
  },
426
443
  dropdown: {
427
444
  buttonBackgroundColor: globalTokens.hal_white,
@@ -466,7 +483,60 @@ var componentTokens = {
466
483
  borderColor: globalTokens.transparent,
467
484
  scrollBarThumbColor: globalTokens.hal_grey_s_40,
468
485
  scrollBarTrackColor: globalTokens.lightGrey,
469
- focusColor: globalTokens.blue
486
+ focusColor: globalTokens.hal_blue_l_50
487
+ },
488
+ fileInput: {
489
+ dropBorderColor: globalTokens.hal_black,
490
+ fileItemBorderColor: globalTokens.hal_grey_l_80,
491
+ fileNameFontColor: globalTokens.hal_black,
492
+ labelFontColor: globalTokens.hal_black,
493
+ helperTextFontColor: globalTokens.hal_black,
494
+ dropLabelFontColor: globalTokens.hal_black,
495
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
496
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
497
+ disabledDropLabelFontColor: globalTokens.hal_grey_l_60,
498
+ focusDropBorderColor: globalTokens.hal_blue_l_50,
499
+ disabledDropBorderColor: globalTokens.hal_grey_l_60,
500
+ dragoverDropBackgroundColor: globalTokens.color_blue_50,
501
+ activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
502
+ errorFileItemBorderColor: globalTokens.hal_red_s_41,
503
+ errorFileItemBackgroundColor: globalTokens.color_red_50,
504
+ errorFilePreviewBackgroundColor: globalTokens.color_red_700,
505
+ errorFileItemIconColor: globalTokens.hal_red_s_41,
506
+ fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
507
+ deleteFileItemColor: globalTokens.hal_black,
508
+ errorMessageFontColor: globalTokens.hal_red_s_41,
509
+ labelFontFamily: globalTokens.type_sans,
510
+ labelFontSize: globalTokens.type_scale_02,
511
+ labelFontWeight: globalTokens.type_semibold,
512
+ labelLineHeight: globalTokens.type_leading_loose_01,
513
+ fileItemFontFamily: globalTokens.type_sans,
514
+ fileItemFontSize: globalTokens.type_scale_02,
515
+ fileItemFontWeight: globalTokens.type_regular,
516
+ fileItemLineHeight: globalTokens.type_leading_normal,
517
+ helperTextFontFamily: globalTokens.type_sans,
518
+ helperTextFontSize: globalTokens.type_scale_01,
519
+ helperTextFontWeight: globalTokens.type_regular,
520
+ helperTextLineHeight: globalTokens.type_leading_normal,
521
+ dropLabelFontFamily: globalTokens.type_sans,
522
+ dropLabelFontSize: globalTokens.type_scale_03,
523
+ dropLabelFontWeight: globalTokens.type_regular,
524
+ errorMessageFontFamily: globalTokens.type_sans,
525
+ errorMessageFontSize: globalTokens.type_scale_01,
526
+ errorMessageFontWeight: globalTokens.type_regular,
527
+ errorMessageLineHeight: globalTokens.type_leading_normal,
528
+ dropBorderThickness: globalTokens.border_width_1,
529
+ dropBorderStyle: globalTokens.border_dashed,
530
+ dropBorderRadius: globalTokens.border_radius_large,
531
+ fileItemBorderThickness: globalTokens.border_width_1,
532
+ fileItemBorderStyle: globalTokens.border_solid,
533
+ fileItemBorderRadius: globalTokens.border_radius_medium,
534
+ hoverDeleteFileItemBackgroundColor: globalTokens.color_grey_a_100,
535
+ activeDeleteFileItemBackgroundColor: globalTokens.color_grey_a_300,
536
+ focusDeleteFileItemBorderColor: globalTokens.hal_blue_l_50,
537
+ filePreviewBackgroundColor: globalTokens.hal_grey_l_95,
538
+ filePreviewIconColor: globalTokens.color_grey_600,
539
+ errorFilePreviewIconColor: globalTokens.hal_red_s_41
470
540
  },
471
541
  footer: {
472
542
  height: "124px",
@@ -486,7 +556,7 @@ var componentTokens = {
486
556
  copyrightFontStyle: globalTokens.type_normal,
487
557
  copyrightFontWeight: globalTokens.type_regular,
488
558
  copyrightFontColor: globalTokens.hal_white,
489
- logo: _dxc_logo["default"],
559
+ logo: "",
490
560
  logoHeight: "32px",
491
561
  logoWidth: "auto",
492
562
  socialLinksSize: "24px",
@@ -504,8 +574,8 @@ var componentTokens = {
504
574
  hamburguerTextTransform: globalTokens.type_uppercase,
505
575
  hamburguerIconColor: globalTokens.hal_black,
506
576
  hamburguerHoverColor: globalTokens.mediumGreyBlack,
507
- logo: _dxc_logo_black["default"],
508
- logoResponsive: _dxc_logo_black["default"],
577
+ logo: "",
578
+ logoResponsive: "",
509
579
  logoHeight: "40px",
510
580
  logoWidth: "auto",
511
581
  menuBackgroundColor: globalTokens.hal_white,
@@ -522,105 +592,48 @@ var componentTokens = {
522
592
  paddingLeft: "24px",
523
593
  underlinedColor: globalTokens.hal_black,
524
594
  underlinedThickness: "2px",
525
- underlinedStyle: "solid"
595
+ underlinedStyle: "solid",
596
+ contentColor: globalTokens.hal_black,
597
+ contentColorOnDark: globalTokens.hal_white
526
598
  },
527
599
  heading: {
528
600
  level1FontColor: globalTokens.inherit,
529
601
  level1FontFamily: globalTokens.type_sans,
530
- level1FontSize: globalTokens.type_scale_08,
602
+ level1FontSize: globalTokens.type_scale_07,
531
603
  level1FontStyle: globalTokens.type_normal,
532
- level1FontWeight: globalTokens.type_regular,
604
+ level1FontWeight: globalTokens.type_semibold,
533
605
  level1LineHeight: globalTokens.type_leading_compact_01,
534
606
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
535
607
  level2FontColor: globalTokens.inherit,
536
608
  level2FontFamily: globalTokens.type_sans,
537
- level2FontSize: globalTokens.type_scale_07,
609
+ level2FontSize: globalTokens.type_scale_05,
538
610
  level2FontStyle: globalTokens.type_normal,
539
- level2FontWeight: globalTokens.type_regular,
611
+ level2FontWeight: globalTokens.type_semibold,
540
612
  level2LineHeight: globalTokens.type_leading_normal,
541
613
  level2LetterSpacing: globalTokens.type_spacing_normal,
542
614
  level3FontColor: globalTokens.inherit,
543
615
  level3FontFamily: globalTokens.type_sans,
544
- level3FontSize: globalTokens.type_scale_06,
616
+ level3FontSize: globalTokens.type_scale_04,
545
617
  level3FontStyle: globalTokens.type_normal,
546
- level3FontWeight: globalTokens.type_regular,
618
+ level3FontWeight: globalTokens.type_semibold,
547
619
  level3LineHeight: globalTokens.type_leading_compact_01,
548
620
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
549
621
  level4FontColor: globalTokens.inherit,
550
622
  level4FontFamily: globalTokens.type_sans,
551
- level4FontSize: globalTokens.type_scale_05,
623
+ level4FontSize: globalTokens.type_scale_03,
552
624
  level4FontStyle: globalTokens.type_normal,
553
- level4FontWeight: globalTokens.type_regular,
625
+ level4FontWeight: globalTokens.type_semibold,
554
626
  level4LineHeight: globalTokens.type_leading_normal,
555
627
  level4LetterSpacing: globalTokens.type_spacing_normal,
556
628
  level5FontColor: globalTokens.inherit,
557
629
  level5FontFamily: globalTokens.type_sans,
558
- level5FontSize: globalTokens.type_scale_04,
630
+ level5FontSize: globalTokens.type_scale_02,
559
631
  level5FontStyle: globalTokens.type_normal,
560
- level5FontWeight: globalTokens.type_regular,
632
+ level5FontWeight: globalTokens.type_semibold,
561
633
  level5LineHeight: globalTokens.type_leading_normal,
562
634
  level5LetterSpacing: globalTokens.type_spacing_wide_01
563
635
  },
564
- inputText: {
565
- fontFamily: globalTokens.type_sans,
566
- assistiveTextFontColor: globalTokens.black,
567
- assistiveTextFontColorOnDark: globalTokens.white,
568
- assistiveTextFontSize: globalTokens.type_scale_01,
569
- assistiveTextFontStyle: globalTokens.type_normal,
570
- assistiveTextFontWeight: globalTokens.type_regular,
571
- disabledColor: globalTokens.lighterBlack,
572
- disabledColorOnDark: "#575757",
573
- errorColor: globalTokens.red,
574
- errorColorOnDark: "#FE344F",
575
- optionBackgroundColor: globalTokens.white,
576
- optionBorderColor: globalTokens.black,
577
- optionBorderThickness: "0px",
578
- optionBorderStyle: "solid",
579
- optionFontColor: globalTokens.black,
580
- optionFontColorOnDark: globalTokens.white,
581
- optionFontSize: globalTokens.type_scale_03,
582
- optionFontStyle: globalTokens.type_normal,
583
- optionFontWeight: globalTokens.type_regular,
584
- optionPaddingBottom: "6px",
585
- optionPaddingTop: "6px",
586
- scrollBarThumbColor: globalTokens.darkGrey,
587
- scrollBarTrackColor: globalTokens.lightGrey,
588
- hoverOptionColor: globalTokens.black,
589
- hoverOptionBackgroundColor: globalTokens.lightWhite,
590
- hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
591
- selectedOptionBackgroundColor: globalTokens.lightGrey,
592
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
593
- labelFontColor: globalTokens.black,
594
- labelFontColorOnDark: globalTokens.white,
595
- labelFontSize: globalTokens.type_scale_03,
596
- labelFontStyle: globalTokens.type_normal,
597
- labelFontWeight: globalTokens.type_regular,
598
- valueFontColor: globalTokens.black,
599
- valueFontColorOnDark: globalTokens.white,
600
- valueFontSize: globalTokens.type_scale_03,
601
- valueFontStyle: globalTokens.type_normal,
602
- valueFontWeight: globalTokens.type_regular,
603
- prefixIconColor: globalTokens.black,
604
- prefixIconColorOnDark: globalTokens.white,
605
- prefixLabelFontColor: globalTokens.black,
606
- prefixLabelFontColorOnDark: globalTokens.white,
607
- prefixLabelFontSize: globalTokens.type_scale_03,
608
- prefixLabelFontStyle: globalTokens.type_normal,
609
- prefixLabelFontWeight: globalTokens.type_regular,
610
- suffixIconColor: globalTokens.black,
611
- suffixIconColorOnDark: globalTokens.white,
612
- suffixLabelFontColor: globalTokens.black,
613
- suffixLabelFontColorOnDark: globalTokens.white,
614
- suffixLabelFontSize: globalTokens.type_scale_03,
615
- suffixLabelFontStyle: globalTokens.type_normal,
616
- suffixLabelFontWeight: globalTokens.type_regular,
617
- underlineColor: globalTokens.black,
618
- underlineColorOnDark: globalTokens.white,
619
- underlineFocusColor: globalTokens.black,
620
- underlineFocusColorOnDark: globalTokens.white,
621
- underlineThickness: "1px"
622
- },
623
- newInputText: {
636
+ textInput: {
624
637
  fontFamily: globalTokens.type_sans,
625
638
  enabledBorderColor: globalTokens.hal_black,
626
639
  enabledBorderColorOnDark: globalTokens.hal_white,
@@ -634,8 +647,10 @@ var componentTokens = {
634
647
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
635
648
  errorBorderColor: globalTokens.hal_red_s_41,
636
649
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
637
- hoverErrorBorderColor: "#fe0123",
650
+ hoverErrorBorderColor: globalTokens.color_red_600,
638
651
  hoverErrorBorderColorOnDark: "#fe677b",
652
+ inputMarginTop: globalTokens.spacing_02,
653
+ inputMarginBottom: globalTokens.spacing_02,
639
654
  errorMessageColor: globalTokens.hal_red_s_41,
640
655
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
641
656
  errorIconColor: globalTokens.hal_red_s_41,
@@ -645,6 +660,7 @@ var componentTokens = {
645
660
  labelFontSize: globalTokens.type_scale_02,
646
661
  labelFontStyle: globalTokens.type_normal,
647
662
  labelFontWeight: globalTokens.type_semibold,
663
+ labelLineHeight: globalTokens.type_leading_loose_01,
648
664
  disabledLabelFontColor: globalTokens.hal_grey_l_60,
649
665
  disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
650
666
  optionalLabelFontWeight: globalTokens.type_regular,
@@ -653,6 +669,7 @@ var componentTokens = {
653
669
  helperTextFontSize: globalTokens.type_scale_01,
654
670
  helperTextFontStyle: globalTokens.type_normal,
655
671
  helperTextFontWeight: globalTokens.type_regular,
672
+ helperTextLineHeight: globalTokens.type_leading_normal,
656
673
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
657
674
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
658
675
  prefixColor: globalTokens.hal_grey_s_40,
@@ -663,7 +680,7 @@ var componentTokens = {
663
680
  disabledSuffixColor: globalTokens.hal_grey_l_75,
664
681
  disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
665
682
  disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
666
- placeholderFontColor: "#808080",
683
+ placeholderFontColor: "#000000b3",
667
684
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
668
685
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
669
686
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -694,20 +711,25 @@ var componentTokens = {
694
711
  focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
695
712
  activeActionBackgroundColor: globalTokens.hal_grey_l_80,
696
713
  activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
714
+ listDialogBackgroundColor: globalTokens.hal_white,
715
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
716
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
697
717
  listOptionFontColor: globalTokens.hal_black,
698
- listOptionFontSize: globalTokens.type_scale_03,
718
+ listOptionFontSize: globalTokens.type_scale_02,
699
719
  listOptionFontStyle: globalTokens.type_normal,
700
720
  listOptionFontWeight: globalTokens.type_regular,
701
721
  systemMessageFontColor: globalTokens.hal_grey_s_40,
702
- errorMessageBorderColor: globalTokens.hal_red_s_41,
703
- errorMessageBackgroundColor: globalTokens.hal_red_l_95,
722
+ errorListDialogFontColor: globalTokens.hal_black,
723
+ errorListDialogBackgroundColor: globalTokens.color_red_50,
724
+ errorListDialogBorderColor: globalTokens.hal_red_s_41,
704
725
  hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
705
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
726
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
727
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50
706
728
  },
707
729
  link: {
708
730
  fontColor: globalTokens.hal_blue_s_35,
709
731
  fontFamily: globalTokens.inherit,
710
- fontSize: globalTokens.type_scale_root,
732
+ fontSize: globalTokens.inherit,
711
733
  fontStyle: globalTokens.type_normal,
712
734
  fontWeight: globalTokens.type_regular,
713
735
  iconSize: "16px",
@@ -722,7 +744,14 @@ var componentTokens = {
722
744
  visitedUnderlineColor: globalTokens.purple,
723
745
  activeFontColor: globalTokens.black,
724
746
  activeUnderlineColor: globalTokens.black,
725
- focusColor: globalTokens.hal_blue_s_35
747
+ focusColor: globalTokens.hal_blue_l_50
748
+ },
749
+ paragraph: {
750
+ fontColor: globalTokens.hal_black,
751
+ fontColorOnDark: globalTokens.hal_white,
752
+ display: "block",
753
+ fontSize: globalTokens.type_scale_03,
754
+ fontWeight: globalTokens.type_regular
726
755
  },
727
756
  paginator: {
728
757
  backgroundColor: globalTokens.darkWhite,
@@ -732,15 +761,15 @@ var componentTokens = {
732
761
  fontStyle: globalTokens.type_normal,
733
762
  fontWeight: globalTokens.type_regular,
734
763
  fontTextTransform: "none",
735
- height: "64px",
736
- width: "100%",
764
+ verticalPadding: "0.75rem",
765
+ horizontalPadding: "2rem",
737
766
  marginRight: "40px",
738
767
  marginLeft: "20px",
739
768
  itemsPerPageSelectorMarginLeft: "0px",
740
- itemsPerPageSelectorMarginRight: "30px",
769
+ itemsPerPageSelectorMarginRight: "0.5rem",
741
770
  pageSelectorMarginRight: "30px",
742
771
  pageSelectorMarginLeft: "0px",
743
- totalItemsContainerMarginRight: "30px",
772
+ totalItemsContainerMarginRight: "2.5rem",
744
773
  totalItemsContainerMarginLeft: "0px"
745
774
  },
746
775
  progressBar: {
@@ -772,124 +801,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,11 +1038,14 @@ 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
1051
  labelFontSize: globalTokens.type_scale_02,
@@ -962,50 +1079,54 @@ var componentTokens = {
962
1079
  "switch": {
963
1080
  checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
964
1081
  checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
965
- checkedThumbBackgroundColor: globalTokens.white,
966
- checkedThumbBackgroundColorOnDark: globalTokens.white,
967
- uncheckedTrackBackgroundColor: globalTokens.lightGrey,
968
- uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
969
- uncheckedThumbBackgroundColor: globalTokens.white,
970
- uncheckedThumbBackgroundColorOnDark: globalTokens.white,
971
- disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
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,
972
1089
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
973
- disabledCheckedThumbBackgroundColor: globalTokens.white,
974
- disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
975
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
1090
+ disabledCheckedThumbBackgroundColor: globalTokens.hal_white,
1091
+ disabledCheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1092
+ disabledUncheckedTrackBackgroundColor: globalTokens.hal_grey_l_95,
976
1093
  disabledUncheckedTrackBackgroundColorOnDark: "#363636",
977
- disabledUncheckedThumbBackgroundColor: globalTokens.white,
978
- disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
979
- disabledLabelFontColor: globalTokens.lighterBlack,
1094
+ disabledUncheckedThumbBackgroundColor: globalTokens.hal_white,
1095
+ disabledUncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1096
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
980
1097
  disabledLabelFontColorOnDark: "#575757",
981
1098
  disabledLabelFontStyle: globalTokens.type_normal,
982
1099
  labelFontFamily: globalTokens.type_sans,
983
1100
  labelFontSize: globalTokens.type_scale_root,
984
1101
  labelFontStyle: globalTokens.type_normal,
985
1102
  labelFontWeight: globalTokens.type_regular,
986
- labelFontColor: globalTokens.black,
987
- labelFontColorOnDark: globalTokens.white,
988
- thumbFocusColor: globalTokens.blue,
1103
+ labelFontColor: globalTokens.hal_black,
1104
+ labelFontColorOnDark: globalTokens.hal_white,
1105
+ thumbFocusColor: globalTokens.hal_blue_l_50,
989
1106
  thumbFocusColorOnDark: "#1682FF",
990
1107
  thumbHeight: "24px",
991
1108
  thumbWidth: "24px",
992
- thumbShift: "40%",
1109
+ thumbShift: "1.25rem",
993
1110
  trackHeight: "12px",
994
- trackWidth: "60px",
995
- spaceBetweenLabelSwitch: "0px"
1111
+ trackWidth: "36px",
1112
+ spaceBetweenLabelSwitch: "8px"
996
1113
  },
997
1114
  tag: {
998
1115
  fontFamily: globalTokens.type_sans,
999
- fontColor: globalTokens.black,
1116
+ fontColor: globalTokens.hal_black,
1000
1117
  fontSize: globalTokens.type_scale_02,
1001
1118
  fontStyle: globalTokens.type_normal,
1002
1119
  fontWeight: globalTokens.type_regular,
1003
- fontTextTransform: globalTokens.type_uppercase,
1004
- height: "43px",
1005
- iconColor: globalTokens.white,
1006
- 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",
1007
1127
  iconHeight: "24px",
1008
- iconWidth: "auto"
1128
+ iconWidth: "auto",
1129
+ focusColor: globalTokens.hal_blue_l_50
1009
1130
  },
1010
1131
  table: {
1011
1132
  rowSeparatorThickness: "1px",
@@ -1013,7 +1134,7 @@ var componentTokens = {
1013
1134
  rowSeparatorColor: globalTokens.lightGrey,
1014
1135
  dataBackgroundColor: globalTokens.white,
1015
1136
  dataFontFamily: globalTokens.type_sans,
1016
- dataFontSize: globalTokens.type_scale_root,
1137
+ dataFontSize: globalTokens.type_scale_02,
1017
1138
  dataFontStyle: globalTokens.type_normal,
1018
1139
  dataFontWeight: globalTokens.type_regular,
1019
1140
  dataFontColor: globalTokens.black,
@@ -1059,6 +1180,7 @@ var componentTokens = {
1059
1180
  disabledFontColor: "#999999",
1060
1181
  disabledIconColor: "#999999",
1061
1182
  disabledFontStyle: globalTokens.type_normal,
1183
+ disabledBadgeBackgroundColor: "#0000004D",
1062
1184
  hoverBackgroundColor: "#f2eafa",
1063
1185
  pressedBackgroundColor: "#e5d5f6",
1064
1186
  pressedFontWeight: globalTokens.type_semibold,
@@ -1081,41 +1203,6 @@ var componentTokens = {
1081
1203
  badgeRadiusWithNotificationNumber: "10px"
1082
1204
  },
1083
1205
  textarea: {
1084
- fontFamily: globalTokens.type_sans,
1085
- assistiveTextFontSize: globalTokens.type_scale_01,
1086
- assistiveTextFontStyle: globalTokens.type_normal,
1087
- assistiveTextFontWeight: globalTokens.type_regular,
1088
- assistiveTextFontColor: globalTokens.black,
1089
- assistiveTextFontColorOnDark: globalTokens.white,
1090
- assistiveTextLetterSpacing: "0.03333em",
1091
- disabledColor: globalTokens.lighterBlack,
1092
- disabledColorOnDark: "#575757",
1093
- errorColor: globalTokens.red,
1094
- errorColorOnDark: "#FE344F",
1095
- scrollBarThumbColor: globalTokens.darkGrey,
1096
- scrollBarThumbColorOnDark: globalTokens.white,
1097
- scrollBarTrackColor: globalTokens.lightGrey,
1098
- scrollBarTrackColorOnDark: "#999999",
1099
- labelFontSize: globalTokens.type_scale_03,
1100
- labelFontStyle: globalTokens.type_normal,
1101
- labelFontWeight: globalTokens.type_regular,
1102
- labelFontColor: globalTokens.black,
1103
- labelFontColorOnDark: globalTokens.white,
1104
- labelLetterSpacing: "0.00938em",
1105
- valueFontSize: globalTokens.type_scale_03,
1106
- valueFontStyle: globalTokens.type_normal,
1107
- valueFontWeight: globalTokens.type_regular,
1108
- valueFontColor: globalTokens.black,
1109
- valueFontColorOnDark: globalTokens.white,
1110
- valueLetterSpacing: globalTokens.type_spacing_normal,
1111
- valueLineHeight: "1.1875em",
1112
- underlineColor: globalTokens.black,
1113
- underlineColorOnDark: globalTokens.white,
1114
- underlineFocusColor: globalTokens.black,
1115
- underlineFocusColorOnDark: globalTokens.white,
1116
- underlineThickness: "1px"
1117
- },
1118
- newTextarea: {
1119
1206
  fontFamily: globalTokens.type_sans,
1120
1207
  enabledBorderColor: globalTokens.hal_black,
1121
1208
  enabledBorderColorOnDark: globalTokens.hal_white,
@@ -1129,8 +1216,10 @@ var componentTokens = {
1129
1216
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1130
1217
  errorBorderColor: globalTokens.hal_red_s_41,
1131
1218
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
1132
- hoverErrorBorderColor: "#fe0123",
1219
+ hoverErrorBorderColor: globalTokens.color_red_600,
1133
1220
  hoverErrorBorderColorOnDark: "#fe677b",
1221
+ inputMarginTop: globalTokens.spacing_02,
1222
+ inputMarginBottom: globalTokens.spacing_02,
1134
1223
  errorMessageColor: globalTokens.hal_red_s_41,
1135
1224
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
1136
1225
  labelFontColor: globalTokens.hal_black,
@@ -1138,6 +1227,7 @@ var componentTokens = {
1138
1227
  labelFontSize: globalTokens.type_scale_02,
1139
1228
  labelFontStyle: globalTokens.type_normal,
1140
1229
  labelFontWeight: globalTokens.type_semibold,
1230
+ labelLineHeight: globalTokens.type_leading_loose_01,
1141
1231
  disabledLabelFontColor: globalTokens.hal_grey_l_60,
1142
1232
  disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1143
1233
  optionalLabelFontWeight: globalTokens.type_regular,
@@ -1146,9 +1236,10 @@ var componentTokens = {
1146
1236
  helperTextFontSize: globalTokens.type_scale_01,
1147
1237
  helperTextFontStyle: globalTokens.type_normal,
1148
1238
  helperTextFontWeight: globalTokens.type_regular,
1239
+ helperTextLineHeight: globalTokens.type_leading_normal,
1149
1240
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1150
1241
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1151
- placeholderFontColor: "#808080",
1242
+ placeholderFontColor: "#000000b3",
1152
1243
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1153
1244
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1154
1245
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -1161,149 +1252,113 @@ var componentTokens = {
1161
1252
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1162
1253
  },
1163
1254
  toggleGroup: {
1164
- fontFamily: globalTokens.type_sans,
1165
- fontSize: globalTokens.type_scale_03,
1166
- fontStyle: globalTokens.type_normal,
1167
- fontWeight: globalTokens.type_regular,
1168
- selectedBackgroundColor: globalTokens.hal_purple_s_38,
1169
- selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1170
- selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1171
- selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1172
- selectedFontColor: globalTokens.hal_white,
1173
- selectedDisabledFontColor: "#cbacec",
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,
1174
1261
  unselectedBackgroundColor: globalTokens.hal_grey_l_90,
1175
1262
  unselectedHoverBackgroundColor: globalTokens.hal_grey_l_80,
1176
1263
  unselectedActiveBackgroundColor: globalTokens.hal_purple_s_38,
1177
1264
  unselectedDisabledBackgroundColor: globalTokens.hal_grey_l_95,
1178
1265
  unselectedFontColor: globalTokens.hal_black,
1179
1266
  unselectedDisabledFontColor: globalTokens.hal_grey_l_60,
1180
- iconSize: "24px",
1181
- iconPaddingTop: "8px",
1182
- iconPaddingBottom: "8px",
1183
- iconPaddingRight: "8px",
1184
- iconPaddingLeft: "8px",
1185
- labelPaddingTop: "8px",
1186
- labelPaddingBottom: "8px",
1187
- labelPaddingLeft: "24px",
1188
- labelPaddingRight: "24px",
1189
- focusColor: globalTokens.hal_blue_l_50
1190
- },
1191
- upload: {
1192
- fontFamily: globalTokens.type_sans,
1193
- shadowColor: globalTokens.lightWhite,
1194
- scrollBarThumbColor: globalTokens.darkGrey,
1195
- scrollBarTrackColor: globalTokens.lightGrey,
1196
- errorColor: globalTokens.red,
1197
- backgroundColor: globalTokens.white,
1198
- draggingStateBackgroundColor: globalTokens.lightWhite,
1199
- dragAndDropIconColor: globalTokens.black,
1200
- dragAndDropIconSize: "43.5px",
1201
- dragAndDropTitleFontSize: globalTokens.type_scale_04,
1202
- dragAndDropTitleFontStyle: globalTokens.type_normal,
1203
- dragAndDropTitleFontWeight: globalTokens.type_bold,
1204
- dragAndDropTitleFontTextTransform: "none",
1205
- dragAndDropTitleFontColor: globalTokens.black,
1206
- dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1207
- dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1208
- dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1209
- dragAndDropDescriptionFontTextTransform: "none",
1210
- dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1211
- dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1212
- dragAndDropDraggingStateIconSize: "74.5px",
1213
- dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1214
- dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1215
- dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1216
- dragAndDropDraggingStateFontTextTransform: "none",
1217
- dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1218
- dragAndDropAreaIconColor: globalTokens.darkGrey,
1219
- dragAndDropAreaIconSize: "24px",
1220
- dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1221
- dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1222
- dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1223
- dragAndDropAreaTextFontTextTransform: "none",
1224
- dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1225
- fileDeleteIconColor: globalTokens.black,
1226
- fileDeleteIconSize: "30px",
1227
- fileUnderlineColor: globalTokens.lightGrey,
1228
- fileUnderlineThickness: "1px",
1229
- fileNameFontSize: globalTokens.type_scale_03,
1230
- fileNameFontStyle: globalTokens.type_normal,
1231
- fileNameFontWeight: globalTokens.type_regular,
1232
- fileNameFontTextTransform: "none",
1233
- fileNameFontColor: globalTokens.black,
1234
- fileTypeFontSize: globalTokens.type_scale_01,
1235
- fileTypeFontStyle: globalTokens.type_normal,
1236
- fileTypeFontWeight: globalTokens.type_regular,
1237
- fileTypeFontTextTransform: globalTokens.type_uppercase,
1238
- fileTypeFontColor: globalTokens.darkGrey,
1239
- hoverFileColor: globalTokens.darkWhite,
1240
- uploadedFileIconColor: globalTokens.lightGrey,
1241
- uploadedFileIconSize: "24px",
1242
- uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1243
- uploadedFilesTitleFontStyle: globalTokens.type_normal,
1244
- uploadedFilesTitleFontWeight: globalTokens.type_regular,
1245
- uploadedFilesTitleFontTextTransform: "none",
1246
- uploadedFilesTitleFontColor: globalTokens.black,
1247
- uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1248
- uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1249
- uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1250
- uploadedFilesSubtitleFontTextTransform: "none",
1251
- uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1252
- uploadedFilesNumberFontWeight: globalTokens.type_bold
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
1253
1301
  },
1254
1302
  wizard: {
1255
- disabledBackgroundColor: globalTokens.lightGrey,
1256
- disabledFontColor: globalTokens.darkGrey,
1257
- stepContainerFontSize: globalTokens.type_scale_03,
1258
- stepContainerFontFamily: globalTokens.type_sans,
1259
- stepContainerFontStyle: globalTokens.type_normal,
1260
- stepContainerFontWeight: globalTokens.type_regular,
1261
- stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1262
- stepContainerFontColor: globalTokens.black,
1263
- stepContainerSelectedFontColor: globalTokens.white,
1264
- stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1265
- stepContainerBackgroundColor: globalTokens.white,
1266
- stepContainerIconSize: "19px",
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,
1267
1333
  labelFontSize: globalTokens.type_scale_03,
1268
1334
  labelFontFamily: globalTokens.type_sans,
1269
1335
  labelFontStyle: globalTokens.type_normal,
1270
1336
  labelFontWeight: globalTokens.type_regular,
1271
- labelLetterSpacing: globalTokens.type_spacing_normal,
1337
+ labelFontTracking: globalTokens.type_spacing_normal,
1272
1338
  labelFontTextTransform: "none",
1273
1339
  labelTextAlign: "left",
1274
- labelFontColor: globalTokens.darkGrey,
1275
- visitedLabelFontColor: globalTokens.black,
1276
- visitedDescriptionFontColor: globalTokens.black,
1277
- descriptionFontSize: globalTokens.type_scale_01,
1278
- descriptionFontFamily: globalTokens.type_sans,
1279
- descriptionFontStyle: globalTokens.type_normal,
1280
- descriptionFontWeight: globalTokens.type_regular,
1281
- descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1282
- descriptionFontTextTransform: "none",
1283
- descriptionFontColor: globalTokens.darkGrey,
1284
- descriptionTextAlign: "left",
1285
- circleWidth: "32px",
1286
- circleHeight: "32px",
1287
- circleBorderThickness: "2px",
1288
- circleBorderStyle: "solid",
1289
- circleBorderRadius: "45px",
1290
- circleBorderColor: globalTokens.black,
1291
- selectedCircleWidth: "32px",
1292
- selectedCircleHeight: "32px",
1293
- selectedCircleBorderThickness: "2px",
1294
- selectedCircleBorderStyle: "solid",
1295
- selectedCircleBorderRadius: "45px",
1296
- selectedCircleBorderColor: globalTokens.purple,
1297
- disabledCircleWidth: "32px",
1298
- disabledCircleHeight: "32px",
1299
- disabledCircleBorderThickness: "2px",
1300
- disabledCircleBorderStyle: "solid",
1301
- disabledCircleBorderRadius: "45px",
1302
- disabledCircleBorderColor: globalTokens.lightGrey,
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",
1303
1358
  separatorBorderThickness: "1px",
1304
1359
  separatorBorderStyle: "solid",
1305
- separatorColor: globalTokens.lightGrey,
1306
- focusColor: globalTokens.blue
1360
+ separatorColor: globalTokens.hal_grey_s_40,
1361
+ focusColor: globalTokens.hal_blue_l_50
1307
1362
  }
1308
1363
  };
1309
1364
  exports.componentTokens = componentTokens;
@@ -1318,12 +1373,11 @@ var spaces = {
1318
1373
  };
1319
1374
  exports.spaces = spaces;
1320
1375
  var responsiveSizes = {
1321
- mobileSmall: "320",
1322
- mobileMedium: "375",
1323
- mobileLarge: "425",
1324
- tablet: "768",
1325
- laptop: "1024",
1326
- desktop: "1440"
1376
+ xsmall: "20",
1377
+ small: "30",
1378
+ medium: "45",
1379
+ large: "66",
1380
+ xlarge: "90"
1327
1381
  };
1328
1382
  exports.responsiveSizes = responsiveSizes;
1329
1383
  var typeface = {
@@ -1358,4 +1412,98 @@ var typeface = {
1358
1412
  textTransform: "uppercase"
1359
1413
  }
1360
1414
  };
1361
- exports.typeface = typeface;
1415
+ exports.typeface = typeface;
1416
+ var defaultTranslatedComponentLabels = {
1417
+ formFields: {
1418
+ optionalLabel: "(Optional)",
1419
+ requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
1420
+ requiredValueErrorMessage: "This field is required. Please, enter a value.",
1421
+ formatRequestedErrorMessage: "Please match the format requested.",
1422
+ lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
1423
+ return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
1424
+ },
1425
+ logoAlternativeText: "Logo"
1426
+ },
1427
+ alert: {
1428
+ infoTitleText: "information",
1429
+ successTitleText: "success",
1430
+ warningTitleText: "warning",
1431
+ errorTitleText: "error"
1432
+ },
1433
+ dateInput: {
1434
+ invalidDateErrorMessage: "Invalid date."
1435
+ },
1436
+ fileInput: {
1437
+ fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1438
+ fileSizeLessThanErrorMessage: "File size must be less than max size.",
1439
+ multipleButtonLabelDefault: "Select files",
1440
+ singleButtonLabelDefault: "Select file",
1441
+ dropAreaButtonLabelDefault: "Select",
1442
+ multipleDropAreaLabelDefault: "or drop files",
1443
+ singleDropAreaLabelDefault: "or drop a file",
1444
+ deleteFileActionTitle: "Remove file"
1445
+ },
1446
+ footer: {
1447
+ copyrightText: function copyrightText(year) {
1448
+ return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
1449
+ }
1450
+ },
1451
+ header: {
1452
+ closeIcon: "Close menu",
1453
+ hamburguerTitle: "Menu"
1454
+ },
1455
+ numberInput: {
1456
+ valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
1457
+ return "Value must be greater than or equal to ".concat(value, ".");
1458
+ },
1459
+ valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
1460
+ return "Value must be less than or equal to ".concat(value, ".");
1461
+ },
1462
+ decrementValueTitle: "Decrement value",
1463
+ incrementValueTitle: "Increment value"
1464
+ },
1465
+ paginator: {
1466
+ itemsPerPageText: "Items per page: ",
1467
+ minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
1468
+ return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
1469
+ },
1470
+ goToPageText: "Go to page:",
1471
+ pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
1472
+ return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
1473
+ }
1474
+ },
1475
+ passwordInput: {
1476
+ inputShowPasswordTitle: "Show password",
1477
+ inputHidePasswordTitle: "Hide password"
1478
+ },
1479
+ quickNav: {
1480
+ contentTitle: "Contents"
1481
+ },
1482
+ radioGroup: {
1483
+ optionalItemLabelDefault: "N/A"
1484
+ },
1485
+ select: {
1486
+ noMatchesErrorMessage: "No matches found",
1487
+ actionClearSelectionTitle: "Clear selection",
1488
+ actionClearSearchTitle: "Clear search"
1489
+ },
1490
+ tabs: {
1491
+ scrollLeft: "Scroll left",
1492
+ scrollRight: "Scroll right"
1493
+ },
1494
+ textInput: {
1495
+ clearFieldActionTitle: "Clear field",
1496
+ searchingMessage: "Searching...",
1497
+ fetchingDataErrorMessage: "Error fetching data"
1498
+ },
1499
+ calendar: {
1500
+ days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1501
+ daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
1502
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1503
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
1504
+ },
1505
+ applicationLayout: {
1506
+ visibilityToggleTitle: "Toggle visibility sidenav"
1507
+ }
1508
+ };
1509
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;