@dxc-technology/halstack-react 0.0.0-f4bae62 → 0.0.0-f53e801

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 (443) 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 +226 -0
  7. package/accordion/Accordion.stories.tsx +307 -0
  8. package/accordion/Accordion.test.js +72 -0
  9. package/accordion/types.d.ts +68 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +169 -0
  13. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  14. package/accordion-group/AccordionGroup.test.js +151 -0
  15. package/accordion-group/types.d.ts +72 -0
  16. package/accordion-group/types.js +5 -0
  17. package/alert/Alert.d.ts +4 -0
  18. package/{dist/alert → alert}/Alert.js +43 -153
  19. package/alert/Alert.stories.tsx +170 -0
  20. package/alert/Alert.test.js +92 -0
  21. package/alert/types.d.ts +49 -0
  22. package/alert/types.js +5 -0
  23. package/badge/Badge.d.ts +4 -0
  24. package/badge/Badge.js +61 -0
  25. package/badge/types.d.ts +5 -0
  26. package/badge/types.js +5 -0
  27. package/bleed/Bleed.d.ts +3 -0
  28. package/bleed/Bleed.js +51 -0
  29. package/bleed/Bleed.stories.tsx +341 -0
  30. package/bleed/types.d.ts +37 -0
  31. package/bleed/types.js +5 -0
  32. package/box/Box.d.ts +4 -0
  33. package/box/Box.js +116 -0
  34. package/box/Box.stories.tsx +132 -0
  35. package/box/Box.test.js +18 -0
  36. package/box/types.d.ts +43 -0
  37. package/box/types.js +5 -0
  38. package/bulleted-list/BulletedList.d.ts +7 -0
  39. package/bulleted-list/BulletedList.js +123 -0
  40. package/bulleted-list/BulletedList.stories.tsx +200 -0
  41. package/bulleted-list/types.d.ts +11 -0
  42. package/bulleted-list/types.js +5 -0
  43. package/button/Button.d.ts +4 -0
  44. package/button/Button.js +156 -0
  45. package/button/Button.stories.tsx +283 -0
  46. package/button/Button.test.js +35 -0
  47. package/button/types.d.ts +53 -0
  48. package/button/types.js +5 -0
  49. package/card/Card.d.ts +4 -0
  50. package/card/Card.js +161 -0
  51. package/card/Card.stories.tsx +201 -0
  52. package/card/Card.test.js +50 -0
  53. package/card/ice-cream.jpg +0 -0
  54. package/card/types.d.ts +67 -0
  55. package/card/types.js +5 -0
  56. package/checkbox/Checkbox.d.ts +4 -0
  57. package/{dist/checkbox → checkbox}/Checkbox.js +55 -98
  58. package/checkbox/Checkbox.stories.tsx +188 -0
  59. package/checkbox/Checkbox.test.js +78 -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 +370 -435
  82. package/date-input/DateInput.d.ts +4 -0
  83. package/{dist/date-input → date-input}/DateInput.js +83 -111
  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 +211 -0
  91. package/dialog/Dialog.test.js +70 -0
  92. package/dialog/types.d.ts +43 -0
  93. package/dialog/types.js +5 -0
  94. package/dropdown/Dropdown.d.ts +4 -0
  95. package/dropdown/Dropdown.js +387 -0
  96. package/dropdown/Dropdown.stories.tsx +312 -0
  97. package/dropdown/Dropdown.test.js +591 -0
  98. package/dropdown/DropdownMenu.d.ts +4 -0
  99. package/dropdown/DropdownMenu.js +80 -0
  100. package/dropdown/DropdownMenuItem.d.ts +4 -0
  101. package/dropdown/DropdownMenuItem.js +92 -0
  102. package/dropdown/types.d.ts +100 -0
  103. package/dropdown/types.js +5 -0
  104. package/file-input/FileInput.d.ts +4 -0
  105. package/file-input/FileInput.js +593 -0
  106. package/file-input/FileInput.stories.tsx +507 -0
  107. package/file-input/FileInput.test.js +457 -0
  108. package/file-input/FileItem.d.ts +14 -0
  109. package/file-input/FileItem.js +186 -0
  110. package/file-input/types.d.ts +112 -0
  111. package/file-input/types.js +5 -0
  112. package/flex/Flex.d.ts +4 -0
  113. package/flex/Flex.js +57 -0
  114. package/flex/Flex.stories.tsx +103 -0
  115. package/flex/types.d.ts +21 -0
  116. package/flex/types.js +5 -0
  117. package/footer/Footer.d.ts +4 -0
  118. package/footer/Footer.js +185 -0
  119. package/footer/Footer.stories.tsx +130 -0
  120. package/footer/Footer.test.js +109 -0
  121. package/footer/Icons.d.ts +2 -0
  122. package/{dist/footer → footer}/Icons.js +16 -16
  123. package/footer/types.d.ts +65 -0
  124. package/footer/types.js +5 -0
  125. package/header/Header.d.ts +7 -0
  126. package/header/Header.js +305 -0
  127. package/header/Header.stories.tsx +172 -0
  128. package/header/Header.test.js +79 -0
  129. package/header/Icons.d.ts +2 -0
  130. package/{dist/header → header}/Icons.js +9 -34
  131. package/header/types.d.ts +47 -0
  132. package/header/types.js +5 -0
  133. package/heading/Heading.d.ts +4 -0
  134. package/{dist/heading → heading}/Heading.js +31 -90
  135. package/heading/Heading.stories.tsx +54 -0
  136. package/heading/Heading.test.js +186 -0
  137. package/heading/types.d.ts +33 -0
  138. package/heading/types.js +5 -0
  139. package/inset/Inset.d.ts +3 -0
  140. package/inset/Inset.js +51 -0
  141. package/inset/Inset.stories.tsx +229 -0
  142. package/inset/types.d.ts +37 -0
  143. package/inset/types.js +5 -0
  144. package/layout/ApplicationLayout.d.ts +20 -0
  145. package/layout/ApplicationLayout.js +171 -0
  146. package/layout/ApplicationLayout.stories.tsx +161 -0
  147. package/layout/Icons.d.ts +5 -0
  148. package/{dist/layout → layout}/Icons.js +19 -8
  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} +111 -109
  161. package/number-input/NumberInput.d.ts +4 -0
  162. package/number-input/NumberInput.js +76 -0
  163. package/number-input/NumberInput.stories.tsx +115 -0
  164. package/number-input/NumberInput.test.js +506 -0
  165. package/number-input/NumberInputContext.d.ts +4 -0
  166. package/{dist/number-input → number-input}/NumberInputContext.js +5 -2
  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 +40 -29
  172. package/{dist/paginator → paginator}/Icons.js +9 -9
  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-input → password-input}/PasswordInput.js +45 -77
  184. package/password-input/PasswordInput.stories.tsx +131 -0
  185. package/password-input/PasswordInput.test.js +180 -0
  186. package/password-input/types.d.ts +110 -0
  187. package/password-input/types.js +5 -0
  188. package/progress-bar/ProgressBar.d.ts +4 -0
  189. package/progress-bar/ProgressBar.js +176 -0
  190. package/progress-bar/ProgressBar.stories.jsx +60 -0
  191. package/progress-bar/ProgressBar.test.js +110 -0
  192. package/progress-bar/types.d.ts +36 -0
  193. package/progress-bar/types.js +5 -0
  194. package/quick-nav/QuickNav.d.ts +4 -0
  195. package/quick-nav/QuickNav.js +118 -0
  196. package/quick-nav/QuickNav.stories.tsx +264 -0
  197. package/quick-nav/types.d.ts +21 -0
  198. package/quick-nav/types.js +5 -0
  199. package/radio-group/Radio.d.ts +4 -0
  200. package/radio-group/Radio.js +141 -0
  201. package/radio-group/RadioGroup.d.ts +4 -0
  202. package/radio-group/RadioGroup.js +281 -0
  203. package/radio-group/RadioGroup.stories.tsx +100 -0
  204. package/radio-group/RadioGroup.test.js +695 -0
  205. package/radio-group/types.d.ts +114 -0
  206. package/radio-group/types.js +5 -0
  207. package/resultsetTable/ResultsetTable.d.ts +4 -0
  208. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +43 -147
  209. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  210. package/resultsetTable/ResultsetTable.test.js +348 -0
  211. package/resultsetTable/types.d.ts +67 -0
  212. package/resultsetTable/types.js +5 -0
  213. package/select/Icons.d.ts +10 -0
  214. package/select/Icons.js +93 -0
  215. package/select/Listbox.d.ts +4 -0
  216. package/select/Listbox.js +199 -0
  217. package/select/Option.d.ts +4 -0
  218. package/select/Option.js +110 -0
  219. package/select/Select.d.ts +4 -0
  220. package/select/Select.js +643 -0
  221. package/select/Select.stories.tsx +627 -0
  222. package/select/Select.test.js +2175 -0
  223. package/select/types.d.ts +210 -0
  224. package/select/types.js +5 -0
  225. package/sidenav/Sidenav.d.ts +10 -0
  226. package/sidenav/Sidenav.js +268 -0
  227. package/sidenav/Sidenav.stories.tsx +180 -0
  228. package/sidenav/Sidenav.test.js +44 -0
  229. package/sidenav/types.d.ts +73 -0
  230. package/sidenav/types.js +5 -0
  231. package/slider/Slider.d.ts +4 -0
  232. package/{dist/slider → slider}/Slider.js +77 -163
  233. package/slider/Slider.stories.tsx +177 -0
  234. package/slider/Slider.test.js +187 -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 +251 -0
  245. package/switch/Switch.stories.tsx +138 -0
  246. package/switch/Switch.test.js +212 -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/Tabs.d.ts +4 -0
  256. package/tabs/Tabs.js +211 -0
  257. package/tabs/Tabs.stories.tsx +112 -0
  258. package/tabs/Tabs.test.js +140 -0
  259. package/tabs/types.d.ts +82 -0
  260. package/tabs/types.js +5 -0
  261. package/tabs-nav/NavTabs.d.ts +8 -0
  262. package/tabs-nav/NavTabs.js +125 -0
  263. package/tabs-nav/NavTabs.stories.tsx +170 -0
  264. package/tabs-nav/NavTabs.test.js +82 -0
  265. package/tabs-nav/Tab.d.ts +4 -0
  266. package/tabs-nav/Tab.js +130 -0
  267. package/tabs-nav/types.d.ts +53 -0
  268. package/tabs-nav/types.js +5 -0
  269. package/tag/Tag.d.ts +4 -0
  270. package/tag/Tag.js +183 -0
  271. package/tag/Tag.stories.tsx +142 -0
  272. package/tag/Tag.test.js +60 -0
  273. package/tag/types.d.ts +69 -0
  274. package/tag/types.js +5 -0
  275. package/text-input/Suggestion.d.ts +4 -0
  276. package/text-input/Suggestion.js +55 -0
  277. package/text-input/TextInput.d.ts +4 -0
  278. package/{dist/text-input → text-input}/TextInput.js +294 -504
  279. package/text-input/TextInput.stories.tsx +473 -0
  280. package/text-input/TextInput.test.js +1712 -0
  281. package/text-input/types.d.ts +178 -0
  282. package/text-input/types.js +5 -0
  283. package/textarea/Textarea.d.ts +4 -0
  284. package/{dist/textarea → textarea}/Textarea.js +50 -142
  285. package/textarea/Textarea.stories.jsx +157 -0
  286. package/textarea/Textarea.test.js +437 -0
  287. package/textarea/types.d.ts +137 -0
  288. package/textarea/types.js +5 -0
  289. package/toggle-group/ToggleGroup.d.ts +4 -0
  290. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +36 -148
  291. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  292. package/toggle-group/ToggleGroup.test.js +156 -0
  293. package/toggle-group/types.d.ts +105 -0
  294. package/toggle-group/types.js +5 -0
  295. package/typography/Typography.d.ts +4 -0
  296. package/typography/Typography.js +131 -0
  297. package/typography/Typography.stories.tsx +198 -0
  298. package/typography/types.d.ts +18 -0
  299. package/typography/types.js +5 -0
  300. package/useTheme.d.ts +2 -0
  301. package/{dist/useTheme.js → useTheme.js} +2 -2
  302. package/useTranslatedLabels.d.ts +2 -0
  303. package/useTranslatedLabels.js +20 -0
  304. package/wizard/Wizard.d.ts +4 -0
  305. package/wizard/Wizard.js +285 -0
  306. package/wizard/Wizard.stories.tsx +233 -0
  307. package/wizard/Wizard.test.js +141 -0
  308. package/wizard/types.d.ts +65 -0
  309. package/wizard/types.js +5 -0
  310. package/README.md +0 -66
  311. package/babel.config.js +0 -8
  312. package/dist/BackgroundColorContext.js +0 -46
  313. package/dist/ThemeContext.js +0 -248
  314. package/dist/V3Textarea/V3Textarea.js +0 -264
  315. package/dist/accordion/Accordion.js +0 -353
  316. package/dist/accordion-group/AccordionGroup.js +0 -186
  317. package/dist/alert/index.d.ts +0 -51
  318. package/dist/badge/Badge.js +0 -63
  319. package/dist/box/Box.js +0 -156
  320. package/dist/button/Button.js +0 -238
  321. package/dist/card/Card.js +0 -254
  322. package/dist/checkbox/Checkbox.stories.js +0 -144
  323. package/dist/checkbox/readme.md +0 -116
  324. package/dist/chip/Chip.js +0 -265
  325. package/dist/date/Date.js +0 -379
  326. package/dist/date/Date.stories.js +0 -205
  327. package/dist/date/readme.md +0 -73
  328. package/dist/date-input/index.d.ts +0 -95
  329. package/dist/dialog/Dialog.js +0 -218
  330. package/dist/dropdown/Dropdown.js +0 -544
  331. package/dist/file-input/FileInput.js +0 -644
  332. package/dist/file-input/FileItem.js +0 -280
  333. package/dist/file-input/index.d.ts +0 -81
  334. package/dist/footer/Footer.js +0 -421
  335. package/dist/header/Header.js +0 -434
  336. package/dist/input-text/Icons.js +0 -22
  337. package/dist/input-text/InputText.js +0 -705
  338. package/dist/layout/ApplicationLayout.js +0 -327
  339. package/dist/link/Link.js +0 -237
  340. package/dist/link/readme.md +0 -51
  341. package/dist/main.d.ts +0 -8
  342. package/dist/new-select/NewSelect.js +0 -836
  343. package/dist/new-select/index.d.ts +0 -53
  344. package/dist/number-input/NumberInput.js +0 -136
  345. package/dist/number-input/index.d.ts +0 -113
  346. package/dist/paginator/Paginator.js +0 -283
  347. package/dist/password-input/index.d.ts +0 -94
  348. package/dist/progress-bar/ProgressBar.js +0 -242
  349. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  350. package/dist/progress-bar/readme.md +0 -63
  351. package/dist/radio/Radio.js +0 -209
  352. package/dist/radio/Radio.stories.js +0 -166
  353. package/dist/radio/readme.md +0 -70
  354. package/dist/select/Select.js +0 -549
  355. package/dist/sidenav/Sidenav.js +0 -179
  356. package/dist/slider/readme.md +0 -64
  357. package/dist/spinner/Spinner.js +0 -381
  358. package/dist/spinner/Spinner.stories.js +0 -183
  359. package/dist/spinner/readme.md +0 -65
  360. package/dist/switch/Switch.js +0 -222
  361. package/dist/switch/Switch.stories.js +0 -134
  362. package/dist/switch/readme.md +0 -133
  363. package/dist/tabs/Tabs.js +0 -343
  364. package/dist/tabs/Tabs.stories.js +0 -130
  365. package/dist/tabs/readme.md +0 -78
  366. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  367. package/dist/tabs-for-sections/readme.md +0 -78
  368. package/dist/tag/Tag.js +0 -282
  369. package/dist/text-input/index.d.ts +0 -135
  370. package/dist/textarea/index.d.ts +0 -117
  371. package/dist/toggle/Toggle.js +0 -220
  372. package/dist/toggle/Toggle.stories.js +0 -297
  373. package/dist/toggle/readme.md +0 -80
  374. package/dist/upload/Upload.js +0 -205
  375. package/dist/upload/Upload.stories.js +0 -72
  376. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  377. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  378. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  379. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  380. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  381. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  382. package/dist/upload/file-upload/FileToUpload.js +0 -184
  383. package/dist/upload/file-upload/audio-icon.svg +0 -4
  384. package/dist/upload/file-upload/close.svg +0 -4
  385. package/dist/upload/file-upload/file-icon.svg +0 -4
  386. package/dist/upload/file-upload/video-icon.svg +0 -4
  387. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  388. package/dist/upload/readme.md +0 -37
  389. package/dist/upload/transaction/Transaction.js +0 -175
  390. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  391. package/dist/upload/transaction/audio-icon.svg +0 -4
  392. package/dist/upload/transaction/error-icon.svg +0 -4
  393. package/dist/upload/transaction/file-icon-err.svg +0 -4
  394. package/dist/upload/transaction/file-icon.svg +0 -4
  395. package/dist/upload/transaction/image-icon-err.svg +0 -4
  396. package/dist/upload/transaction/image-icon.svg +0 -4
  397. package/dist/upload/transaction/success-icon.svg +0 -4
  398. package/dist/upload/transaction/video-icon-err.svg +0 -4
  399. package/dist/upload/transaction/video-icon.svg +0 -4
  400. package/dist/upload/transactions/Transactions.js +0 -138
  401. package/dist/wizard/Icons.js +0 -65
  402. package/dist/wizard/Wizard.js +0 -405
  403. package/test/Accordion.test.js +0 -33
  404. package/test/AccordionGroup.test.js +0 -125
  405. package/test/Alert.test.js +0 -53
  406. package/test/Box.test.js +0 -10
  407. package/test/Button.test.js +0 -18
  408. package/test/Card.test.js +0 -30
  409. package/test/Checkbox.test.js +0 -45
  410. package/test/Chip.test.js +0 -25
  411. package/test/Date.test.js +0 -397
  412. package/test/DateInput.test.js +0 -242
  413. package/test/Dialog.test.js +0 -23
  414. package/test/Dropdown.test.js +0 -145
  415. package/test/FileInput.test.js +0 -201
  416. package/test/Footer.test.js +0 -94
  417. package/test/Header.test.js +0 -34
  418. package/test/Heading.test.js +0 -35
  419. package/test/InputText.test.js +0 -248
  420. package/test/Link.test.js +0 -43
  421. package/test/NumberInput.test.js +0 -259
  422. package/test/Paginator.test.js +0 -177
  423. package/test/PasswordInput.test.js +0 -83
  424. package/test/ProgressBar.test.js +0 -35
  425. package/test/Radio.test.js +0 -37
  426. package/test/ResultsetTable.test.js +0 -329
  427. package/test/Select.test.js +0 -212
  428. package/test/Sidenav.test.js +0 -45
  429. package/test/Slider.test.js +0 -74
  430. package/test/Spinner.test.js +0 -32
  431. package/test/Switch.test.js +0 -45
  432. package/test/Table.test.js +0 -36
  433. package/test/Tabs.test.js +0 -109
  434. package/test/TabsForSections.test.js +0 -34
  435. package/test/Tag.test.js +0 -32
  436. package/test/TextInput.test.js +0 -732
  437. package/test/Textarea.test.js +0 -193
  438. package/test/ToggleGroup.test.js +0 -85
  439. package/test/Upload.test.js +0 -60
  440. package/test/V3TextArea.test.js +0 -51
  441. package/test/Wizard.test.js +0 -130
  442. package/test/mocks/pngMock.js +0 -1
  443. 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 _Icons = require("../header/Icons");
11
-
12
- var _Icons2 = _interopRequireDefault(require("../footer/Icons"));
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",
@@ -26,12 +19,15 @@ var globalTokens = {
26
19
  color_grey_800: "#4d4d4d",
27
20
  color_grey_600: "#808080",
28
21
  color_grey_50: "#fafafa",
22
+ color_grey_a_100: "#0000000d",
23
+ color_grey_a_300: "#00000033",
29
24
  hal_purple_l_95: "#f2eafa",
30
25
  hal_purple_l_90: "#e5d5f6",
31
26
  hal_purple_l_65: "#a46ede",
32
27
  hal_purple_s_38: "#5f249f",
33
28
  hal_purple_d_30: "#4b1c7d",
34
29
  hal_purple_d_20: "#321353",
30
+ hal_purple_d_70: "#9A6BB2",
35
31
  color_purple_600: "#7D2FD0",
36
32
  color_purple_300: "#cbacec",
37
33
  hal_blue_l_95: "#e6f4ff",
@@ -40,6 +36,7 @@ var globalTokens = {
40
36
  hal_blue_l_45: "#0086e6",
41
37
  hal_blue_s_35: "#0067b3",
42
38
  hal_blue_d_20: "#003c66",
39
+ color_blue_200: "#cceaff",
43
40
  color_blue_500: "#33AAFF",
44
41
  color_blue_50: "#f5fbff",
45
42
  hal_red_l_95: "#ffe6e9",
@@ -50,6 +47,7 @@ var globalTokens = {
50
47
  hal_red_d_20: "#65010e",
51
48
  color_red_700: "#ffccd3",
52
49
  color_red_50: "#FFF5F6",
50
+ color_red_600: "#fe0123",
53
51
  hal_green_l_95: "#eafaef",
54
52
  hal_green_l_80: "#acecbe",
55
53
  hal_green_s_39: "#24a148",
@@ -97,7 +95,7 @@ var globalTokens = {
97
95
  type_sans: "Open Sans, sans-serif",
98
96
  type_scale_root: "16px",
99
97
  type_scale_08: "3.75rem",
100
- type_scale_07: "3rem",
98
+ type_scale_07: "2.5rem",
101
99
  type_scale_06: "2rem",
102
100
  type_scale_05: "1.5rem",
103
101
  type_scale_04: "1.25rem",
@@ -112,7 +110,7 @@ var globalTokens = {
112
110
  type_normal: "normal",
113
111
  type_spacing_tight_02: "-0.05em",
114
112
  type_spacing_tight_01: "-0.025em",
115
- type_spacing_normal: "0",
113
+ type_spacing_normal: "0em",
116
114
  type_spacing_wide_01: "0.025em",
117
115
  type_spacing_wide_02: "0.05em",
118
116
  type_spacing_wide_03: "0.1em",
@@ -162,7 +160,6 @@ exports.globalTokens = globalTokens;
162
160
  var componentTokens = {
163
161
  accordion: {
164
162
  backgroundColor: globalTokens.hal_white,
165
- disabledBackgroundColor: globalTokens.transparent,
166
163
  hoverBackgroundColor: globalTokens.hal_purple_l_95,
167
164
  arrowColor: globalTokens.hal_purple_s_38,
168
165
  disabledArrowColor: globalTokens.hal_grey_l_60,
@@ -242,7 +239,7 @@ var componentTokens = {
242
239
  successBackgroundColor: globalTokens.hal_green_l_95,
243
240
  warningBackgroundColor: globalTokens.hal_yellow_l_95,
244
241
  errorBackgroundColor: globalTokens.hal_red_l_95,
245
- hoverActionBackgroundColor: "#0000000D",
242
+ hoverActionBackgroundColor: globalTokens.color_grey_a_100,
246
243
  activeActionBackgroundColor: "#0000001A",
247
244
  focusActionBorderColor: globalTokens.hal_blue_l_50,
248
245
  overlayColor: "#000000B3"
@@ -263,12 +260,21 @@ var componentTokens = {
263
260
  oneShadowDepthShadowOffsetY: "3px",
264
261
  oneShadowDepthShadowBlur: "6px",
265
262
  oneShadowDepthShadowSpread: "0px",
266
- oneShadowDepthShadowColor: "#00000033",
263
+ oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
267
264
  twoShadowDepthShadowOffsetX: "0px",
268
265
  twoShadowDepthShadowOffsetY: "3px",
269
266
  twoShadowDepthShadowBlur: "10px",
270
267
  twoShadowDepthShadowSpread: "0px",
271
- 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"
272
278
  },
273
279
  button: {
274
280
  labelFontLineHeight: globalTokens.type_leading_normal,
@@ -395,23 +401,6 @@ var componentTokens = {
395
401
  disabledIconColor: globalTokens.hal_grey_l_60,
396
402
  focusColor: globalTokens.hal_blue_l_50
397
403
  },
398
- date: {
399
- pickerSelectedDateBackgroundColor: globalTokens.purple,
400
- pickerSelectedDateColor: globalTokens.hal_white,
401
- pickerBackgroundColor: globalTokens.hal_white,
402
- pickerFontColor: globalTokens.hal_black,
403
- pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
404
- pickerHoverDateFontColor: globalTokens.hal_black,
405
- pickerActualDateColor: globalTokens.lightGrey,
406
- pickerYearColor: globalTokens.hal_black,
407
- pickerMonthColor: globalTokens.hal_black,
408
- pickerWeekLabelColor: globalTokens.hal_black,
409
- pickerBackgroundColorMonthArrows: globalTokens.transparent,
410
- focusColor: globalTokens.hal_blue_l_50,
411
- fontFamily: globalTokens.type_sans,
412
- pickerHeight: "316px",
413
- pickerWidth: "290px"
414
- },
415
404
  dateInput: {
416
405
  pickerFontFamily: globalTokens.type_sans,
417
406
  pickerBackgroundColor: globalTokens.hal_white,
@@ -446,7 +435,10 @@ var componentTokens = {
446
435
  boxShadowOffsetY: "1px",
447
436
  boxShadowBlur: "3px",
448
437
  boxShadowColor: "rgba(0, 0, 0, 0.2)",
449
- overlayOpacity: "0.7"
438
+ overlayOpacity: "0.7",
439
+ fontFamily: globalTokens.type_sans,
440
+ fontSize: globalTokens.type_scale_03,
441
+ fontWeight: globalTokens.type_regular
450
442
  },
451
443
  dropdown: {
452
444
  buttonBackgroundColor: globalTokens.hal_white,
@@ -505,15 +497,14 @@ var componentTokens = {
505
497
  disabledDropLabelFontColor: globalTokens.hal_grey_l_60,
506
498
  focusDropBorderColor: globalTokens.hal_blue_l_50,
507
499
  disabledDropBorderColor: globalTokens.hal_grey_l_60,
508
- focusDropBackgroundColor: globalTokens.color_blue_50,
509
- hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
500
+ dragoverDropBackgroundColor: globalTokens.color_blue_50,
510
501
  activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
511
502
  errorFileItemBorderColor: globalTokens.hal_red_s_41,
512
503
  errorFileItemBackgroundColor: globalTokens.color_red_50,
513
- errorFileItemIconBackgroundColor: globalTokens.color_red_700,
504
+ errorFilePreviewBackgroundColor: globalTokens.color_red_700,
514
505
  errorFileItemIconColor: globalTokens.hal_red_s_41,
515
506
  fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
516
- fileItemIconColor: globalTokens.color_grey_600,
507
+ deleteFileItemColor: globalTokens.hal_black,
517
508
  errorMessageFontColor: globalTokens.hal_red_s_41,
518
509
  labelFontFamily: globalTokens.type_sans,
519
510
  labelFontSize: globalTokens.type_scale_02,
@@ -533,13 +524,19 @@ var componentTokens = {
533
524
  errorMessageFontFamily: globalTokens.type_sans,
534
525
  errorMessageFontSize: globalTokens.type_scale_01,
535
526
  errorMessageFontWeight: globalTokens.type_regular,
536
- errorMessageLineHeight: globalTokens.type_scale_05,
527
+ errorMessageLineHeight: globalTokens.type_leading_normal,
537
528
  dropBorderThickness: globalTokens.border_width_1,
538
529
  dropBorderStyle: globalTokens.border_dashed,
539
530
  dropBorderRadius: globalTokens.border_radius_large,
540
531
  fileItemBorderThickness: globalTokens.border_width_1,
541
532
  fileItemBorderStyle: globalTokens.border_solid,
542
- fileItemBorderRadius: globalTokens.border_radius_medium
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
543
540
  },
544
541
  footer: {
545
542
  height: "124px",
@@ -559,7 +556,7 @@ var componentTokens = {
559
556
  copyrightFontStyle: globalTokens.type_normal,
560
557
  copyrightFontWeight: globalTokens.type_regular,
561
558
  copyrightFontColor: globalTokens.hal_white,
562
- logo: _Icons2["default"],
559
+ logo: "",
563
560
  logoHeight: "32px",
564
561
  logoWidth: "auto",
565
562
  socialLinksSize: "24px",
@@ -577,8 +574,8 @@ var componentTokens = {
577
574
  hamburguerTextTransform: globalTokens.type_uppercase,
578
575
  hamburguerIconColor: globalTokens.hal_black,
579
576
  hamburguerHoverColor: globalTokens.mediumGreyBlack,
580
- logo: _Icons.dxcLogo,
581
- logoResponsive: _Icons.dxcLogo,
577
+ logo: "",
578
+ logoResponsive: "",
582
579
  logoHeight: "40px",
583
580
  logoWidth: "auto",
584
581
  menuBackgroundColor: globalTokens.hal_white,
@@ -595,104 +592,47 @@ var componentTokens = {
595
592
  paddingLeft: "24px",
596
593
  underlinedColor: globalTokens.hal_black,
597
594
  underlinedThickness: "2px",
598
- underlinedStyle: "solid"
595
+ underlinedStyle: "solid",
596
+ contentColor: globalTokens.hal_black,
597
+ contentColorOnDark: globalTokens.hal_white
599
598
  },
600
599
  heading: {
601
600
  level1FontColor: globalTokens.inherit,
602
601
  level1FontFamily: globalTokens.type_sans,
603
- level1FontSize: globalTokens.type_scale_08,
602
+ level1FontSize: globalTokens.type_scale_07,
604
603
  level1FontStyle: globalTokens.type_normal,
605
- level1FontWeight: globalTokens.type_regular,
604
+ level1FontWeight: globalTokens.type_semibold,
606
605
  level1LineHeight: globalTokens.type_leading_compact_01,
607
606
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
608
607
  level2FontColor: globalTokens.inherit,
609
608
  level2FontFamily: globalTokens.type_sans,
610
- level2FontSize: globalTokens.type_scale_07,
609
+ level2FontSize: globalTokens.type_scale_05,
611
610
  level2FontStyle: globalTokens.type_normal,
612
- level2FontWeight: globalTokens.type_regular,
611
+ level2FontWeight: globalTokens.type_semibold,
613
612
  level2LineHeight: globalTokens.type_leading_normal,
614
613
  level2LetterSpacing: globalTokens.type_spacing_normal,
615
614
  level3FontColor: globalTokens.inherit,
616
615
  level3FontFamily: globalTokens.type_sans,
617
- level3FontSize: globalTokens.type_scale_06,
616
+ level3FontSize: globalTokens.type_scale_04,
618
617
  level3FontStyle: globalTokens.type_normal,
619
- level3FontWeight: globalTokens.type_regular,
618
+ level3FontWeight: globalTokens.type_semibold,
620
619
  level3LineHeight: globalTokens.type_leading_compact_01,
621
620
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
622
621
  level4FontColor: globalTokens.inherit,
623
622
  level4FontFamily: globalTokens.type_sans,
624
- level4FontSize: globalTokens.type_scale_05,
623
+ level4FontSize: globalTokens.type_scale_03,
625
624
  level4FontStyle: globalTokens.type_normal,
626
- level4FontWeight: globalTokens.type_regular,
625
+ level4FontWeight: globalTokens.type_semibold,
627
626
  level4LineHeight: globalTokens.type_leading_normal,
628
627
  level4LetterSpacing: globalTokens.type_spacing_normal,
629
628
  level5FontColor: globalTokens.inherit,
630
629
  level5FontFamily: globalTokens.type_sans,
631
- level5FontSize: globalTokens.type_scale_04,
630
+ level5FontSize: globalTokens.type_scale_02,
632
631
  level5FontStyle: globalTokens.type_normal,
633
- level5FontWeight: globalTokens.type_regular,
632
+ level5FontWeight: globalTokens.type_semibold,
634
633
  level5LineHeight: globalTokens.type_leading_normal,
635
634
  level5LetterSpacing: globalTokens.type_spacing_wide_01
636
635
  },
637
- inputText: {
638
- fontFamily: globalTokens.type_sans,
639
- assistiveTextFontColor: globalTokens.black,
640
- assistiveTextFontColorOnDark: globalTokens.white,
641
- assistiveTextFontSize: globalTokens.type_scale_01,
642
- assistiveTextFontStyle: globalTokens.type_normal,
643
- assistiveTextFontWeight: globalTokens.type_regular,
644
- disabledColor: globalTokens.lighterBlack,
645
- disabledColorOnDark: "#575757",
646
- errorColor: globalTokens.red,
647
- errorColorOnDark: globalTokens.hal_red_l_60,
648
- optionBackgroundColor: globalTokens.white,
649
- optionBorderColor: globalTokens.black,
650
- optionBorderThickness: "0px",
651
- optionBorderStyle: "solid",
652
- optionFontColor: globalTokens.black,
653
- optionFontColorOnDark: globalTokens.white,
654
- optionFontSize: globalTokens.type_scale_03,
655
- optionFontStyle: globalTokens.type_normal,
656
- optionFontWeight: globalTokens.type_regular,
657
- optionPaddingBottom: "6px",
658
- optionPaddingTop: "6px",
659
- scrollBarThumbColor: globalTokens.darkGrey,
660
- scrollBarTrackColor: globalTokens.lightGrey,
661
- hoverOptionColor: globalTokens.black,
662
- hoverOptionBackgroundColor: globalTokens.lightWhite,
663
- hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
664
- selectedOptionBackgroundColor: globalTokens.lightGrey,
665
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
666
- labelFontColor: globalTokens.black,
667
- labelFontColorOnDark: globalTokens.white,
668
- labelFontSize: globalTokens.type_scale_03,
669
- labelFontStyle: globalTokens.type_normal,
670
- labelFontWeight: globalTokens.type_regular,
671
- valueFontColor: globalTokens.black,
672
- valueFontColorOnDark: globalTokens.white,
673
- valueFontSize: globalTokens.type_scale_03,
674
- valueFontStyle: globalTokens.type_normal,
675
- valueFontWeight: globalTokens.type_regular,
676
- prefixIconColor: globalTokens.black,
677
- prefixIconColorOnDark: globalTokens.white,
678
- prefixLabelFontColor: globalTokens.black,
679
- prefixLabelFontColorOnDark: globalTokens.white,
680
- prefixLabelFontSize: globalTokens.type_scale_03,
681
- prefixLabelFontStyle: globalTokens.type_normal,
682
- prefixLabelFontWeight: globalTokens.type_regular,
683
- suffixIconColor: globalTokens.black,
684
- suffixIconColorOnDark: globalTokens.white,
685
- suffixLabelFontColor: globalTokens.black,
686
- suffixLabelFontColorOnDark: globalTokens.white,
687
- suffixLabelFontSize: globalTokens.type_scale_03,
688
- suffixLabelFontStyle: globalTokens.type_normal,
689
- suffixLabelFontWeight: globalTokens.type_regular,
690
- underlineColor: globalTokens.black,
691
- underlineColorOnDark: globalTokens.white,
692
- underlineFocusColor: globalTokens.black,
693
- underlineFocusColorOnDark: globalTokens.white,
694
- underlineThickness: "1px"
695
- },
696
636
  textInput: {
697
637
  fontFamily: globalTokens.type_sans,
698
638
  enabledBorderColor: globalTokens.hal_black,
@@ -707,8 +647,10 @@ var componentTokens = {
707
647
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
708
648
  errorBorderColor: globalTokens.hal_red_s_41,
709
649
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
710
- hoverErrorBorderColor: "#fe0123",
650
+ hoverErrorBorderColor: globalTokens.color_red_600,
711
651
  hoverErrorBorderColorOnDark: "#fe677b",
652
+ inputMarginTop: globalTokens.spacing_02,
653
+ inputMarginBottom: globalTokens.spacing_02,
712
654
  errorMessageColor: globalTokens.hal_red_s_41,
713
655
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
714
656
  errorIconColor: globalTokens.hal_red_s_41,
@@ -738,7 +680,7 @@ var componentTokens = {
738
680
  disabledSuffixColor: globalTokens.hal_grey_l_75,
739
681
  disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
740
682
  disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
741
- placeholderFontColor: "#808080",
683
+ placeholderFontColor: "#000000b3",
742
684
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
743
685
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
744
686
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -769,20 +711,25 @@ var componentTokens = {
769
711
  focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
770
712
  activeActionBackgroundColor: globalTokens.hal_grey_l_80,
771
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,
772
717
  listOptionFontColor: globalTokens.hal_black,
773
- listOptionFontSize: globalTokens.type_scale_03,
718
+ listOptionFontSize: globalTokens.type_scale_02,
774
719
  listOptionFontStyle: globalTokens.type_normal,
775
720
  listOptionFontWeight: globalTokens.type_regular,
776
721
  systemMessageFontColor: globalTokens.hal_grey_s_40,
777
- errorMessageBorderColor: globalTokens.hal_red_s_41,
778
- errorMessageBackgroundColor: globalTokens.hal_red_l_95,
722
+ errorListDialogFontColor: globalTokens.hal_black,
723
+ errorListDialogBackgroundColor: globalTokens.color_red_50,
724
+ errorListDialogBorderColor: globalTokens.hal_red_s_41,
779
725
  hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
780
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
726
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
727
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50
781
728
  },
782
729
  link: {
783
730
  fontColor: globalTokens.hal_blue_s_35,
784
731
  fontFamily: globalTokens.inherit,
785
- fontSize: globalTokens.type_scale_root,
732
+ fontSize: globalTokens.inherit,
786
733
  fontStyle: globalTokens.type_normal,
787
734
  fontWeight: globalTokens.type_regular,
788
735
  iconSize: "16px",
@@ -799,6 +746,13 @@ var componentTokens = {
799
746
  activeUnderlineColor: globalTokens.black,
800
747
  focusColor: globalTokens.hal_blue_l_50
801
748
  },
749
+ paragraph: {
750
+ fontColor: globalTokens.hal_black,
751
+ fontColorOnDark: globalTokens.hal_white,
752
+ display: "block",
753
+ fontSize: globalTokens.type_scale_03,
754
+ fontWeight: globalTokens.type_regular
755
+ },
802
756
  paginator: {
803
757
  backgroundColor: globalTokens.darkWhite,
804
758
  fontColor: globalTokens.hal_black,
@@ -807,15 +761,15 @@ var componentTokens = {
807
761
  fontStyle: globalTokens.type_normal,
808
762
  fontWeight: globalTokens.type_regular,
809
763
  fontTextTransform: "none",
810
- height: "64px",
811
- width: "100%",
812
- marginRight: "40px",
813
- marginLeft: "20px",
764
+ verticalPadding: "0.75rem",
765
+ horizontalPadding: "2rem",
766
+ marginRight: "2rem",
767
+ marginLeft: "2rem",
814
768
  itemsPerPageSelectorMarginLeft: "0px",
815
- itemsPerPageSelectorMarginRight: "30px",
769
+ itemsPerPageSelectorMarginRight: "1rem",
816
770
  pageSelectorMarginRight: "30px",
817
771
  pageSelectorMarginLeft: "0px",
818
- totalItemsContainerMarginRight: "30px",
772
+ totalItemsContainerMarginRight: "3rem",
819
773
  totalItemsContainerMarginLeft: "0px"
820
774
  },
821
775
  progressBar: {
@@ -847,190 +801,163 @@ var componentTokens = {
847
801
  overlayColor: globalTokens.black,
848
802
  overlayOpacity: "0.8"
849
803
  },
850
- radio: {
851
- circleLabelSpacing: "10px",
852
- circleSize: "24px",
853
- color: globalTokens.black,
854
- colorOnDark: globalTokens.white,
855
- disabledColor: globalTokens.lighterBlack,
856
- disabledColorOnDark: "#575757",
857
- disabledFontColor: globalTokens.lighterBlack,
858
- disabledFontColorOnDark: "#575757",
859
- focusColor: globalTokens.hal_blue_l_50,
860
- focusColorOnDark: "#1682FF",
861
- fontColor: globalTokens.inherit,
862
- 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,
863
817
  fontFamily: globalTokens.type_sans,
864
- fontSize: globalTokens.type_scale_root,
818
+ fontSize: globalTokens.type_scale_02,
865
819
  fontStyle: globalTokens.type_normal,
866
820
  fontWeight: globalTokens.type_regular
867
821
  },
868
- select: {
822
+ radioGroup: {
869
823
  fontFamily: globalTokens.type_sans,
870
- assistiveTextFontColor: globalTokens.hal_black,
871
- assistiveTextFontColorOnDark: globalTokens.hal_white,
872
- assistiveTextFontSize: globalTokens.type_scale_01,
873
- assistiveTextFontStyle: globalTokens.type_normal,
874
- assistiveTextFontWeight: globalTokens.type_regular,
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,
875
839
  labelFontColor: globalTokens.hal_black,
876
- labelFontColorOnDark: globalTokens.hal_white,
877
- labelFontSize: globalTokens.type_scale_03,
840
+ labelFontSize: globalTokens.type_scale_02,
878
841
  labelFontStyle: globalTokens.type_normal,
879
- labelFontWeight: globalTokens.type_regular,
880
- disabledColor: globalTokens.lighterBlack,
881
- disabledColorOnDark: "#575757",
882
- errorColor: globalTokens.red,
883
- errorColorOnDark: globalTokens.hal_red_l_60,
884
- optionBackgroundColor: globalTokens.hal_white,
885
- optionBorderColor: globalTokens.hal_black,
886
- optionBorderThickness: "0px",
887
- optionBorderStyle: "solid",
888
- optionFontColor: globalTokens.hal_black,
889
- optionFontColorOnDark: globalTokens.hal_white,
890
- optionFontSize: globalTokens.type_scale_root,
891
- optionFontStyle: globalTokens.type_normal,
892
- optionFontWeight: globalTokens.type_regular,
893
- optionPaddingBottom: "6px",
894
- optionPaddingTop: "6px",
895
- scrollBarThumbColor: globalTokens.hal_grey_s_40,
896
- scrollBarTrackColor: globalTokens.lightGrey,
897
- optionIconColor: globalTokens.hal_black,
898
- optionIconColorOnDark: globalTokens.hal_white,
899
- optionIconSpacing: "12px",
900
- optionIconSize: "20px",
901
- optionCheckboxSpacing: "12px",
902
- hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
903
- hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
904
- activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
905
- activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
906
- selectedOptionBackgroundColor: globalTokens.lightGrey,
907
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
908
- underlineColor: globalTokens.hal_black,
909
- underlineColorOnDark: globalTokens.hal_white,
910
- underlineFocusColor: globalTokens.hal_black,
911
- underlineFocusColorOnDark: globalTokens.hal_white,
912
- underlineThickness: "1px",
913
- valueFontColor: globalTokens.hal_black,
914
- valueFontColorOnDark: globalTokens.hal_white,
915
- valueFontSize: globalTokens.type_scale_03,
916
- valueFontStyle: globalTokens.type_normal,
917
- valueFontWeight: globalTokens.type_regular,
918
- valueIconColor: globalTokens.hal_black,
919
- valueIconColorOnDark: globalTokens.hal_white,
920
- valueIconSize: "20px",
921
- valueIconSpacing: "12px",
922
- arrowColor: globalTokens.hal_black,
923
- arrowColorOnDark: globalTokens.hal_white,
924
- focusColor: globalTokens.hal_blue_l_50,
925
- focusColorOnDark: globalTokens.hal_blue_l_50
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
926
859
  },
927
- newSelect: {
860
+ select: {
928
861
  fontFamily: globalTokens.type_sans,
929
- enabledBorderColor: globalTokens.hal_black,
930
- enabledBorderColorOnDark: globalTokens.hal_white,
931
- hoverBorderColor: globalTokens.hal_purple_l_65,
932
- hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
933
- focusBorderColor: globalTokens.hal_blue_l_50,
934
- focusBorderColorOnDark: globalTokens.hal_blue_l_50,
935
- disabledBorderColor: globalTokens.hal_grey_l_60,
936
- disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
937
- disabledContainerFillColor: globalTokens.hal_grey_l_95,
938
- disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
939
- errorBorderColor: globalTokens.hal_red_s_41,
940
- errorBorderColorOnDark: globalTokens.hal_red_l_60,
941
- hoverErrorBorderColor: "#fe0123",
942
- hoverErrorBorderColorOnDark: "#fe677b",
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,
943
872
  errorMessageColor: globalTokens.hal_red_s_41,
944
- errorMessageColorOnDark: globalTokens.hal_red_l_60,
945
873
  errorIconColor: globalTokens.hal_red_s_41,
946
- errorIconColorOnDark: globalTokens.hal_red_l_60,
947
874
  labelFontColor: globalTokens.hal_black,
948
- labelFontColorOnDark: globalTokens.hal_white,
949
875
  labelFontSize: globalTokens.type_scale_02,
950
876
  labelFontStyle: globalTokens.type_normal,
951
877
  labelFontWeight: globalTokens.type_semibold,
952
- disabledLabelFontColor: globalTokens.hal_grey_l_60,
953
- disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
878
+ labelLineHeight: globalTokens.type_leading_loose_01,
954
879
  optionalLabelFontWeight: globalTokens.type_regular,
955
880
  helperTextFontColor: globalTokens.hal_black,
956
- helperTextFontColorOnDark: globalTokens.hal_white,
957
881
  helperTextFontSize: globalTokens.type_scale_01,
958
882
  helperTextFontStyle: globalTokens.type_normal,
959
883
  helperTextFontWeight: globalTokens.type_regular,
960
- disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
961
- disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
962
- placeholderFontColor: "#808080",
963
- placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
964
- disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
965
- disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
884
+ helperTextLineHeight: globalTokens.type_leading_normal,
885
+ placeholderFontColor: "#000000b3",
966
886
  valueFontColor: globalTokens.hal_black,
967
- valueFontColorOnDark: globalTokens.hal_white,
968
887
  valueFontSize: globalTokens.type_scale_03,
969
888
  valueFontStyle: globalTokens.type_normal,
970
889
  valueFontWeight: globalTokens.type_regular,
971
- disabledValueFontColor: globalTokens.hal_grey_l_60,
972
- disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
973
890
  actionIconColor: globalTokens.hal_black,
974
- actionIconColorOnDark: globalTokens.hal_white,
975
- disabledActionIconColor: globalTokens.hal_grey_l_60,
976
- disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
977
891
  hoverActionIconColor: globalTokens.hal_black,
978
- hoverActionIconColorOnDark: globalTokens.hal_white,
979
- focusActionIconColor: globalTokens.hal_black,
980
- focusActionIconColorOnDark: globalTokens.hal_white,
981
892
  activeActionIconColor: globalTokens.hal_black,
982
- activeActionIconColorOnDark: globalTokens.hal_black,
983
893
  actionBackgroundColor: globalTokens.transparent,
984
- actionBackgroundColorOnDark: globalTokens.transparent,
985
- disabledActionBackgroundColor: globalTokens.transparent,
986
- disabledActionBackgroundColorOnDark: globalTokens.transparent,
987
894
  hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
988
- hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
989
- focusActionBorderColor: globalTokens.hal_blue_l_50,
990
- focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
991
895
  activeActionBackgroundColor: globalTokens.hal_grey_l_80,
992
- activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
993
896
  listOptionFontColor: globalTokens.hal_black,
994
897
  listOptionFontSize: globalTokens.type_scale_02,
995
898
  listOptionFontStyle: globalTokens.type_normal,
996
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,
997
904
  systemMessageFontColor: globalTokens.hal_grey_s_40,
998
- errorMessageBorderColor: globalTokens.hal_red_s_41,
999
- errorMessageBackgroundColor: globalTokens.hal_red_l_95,
1000
- hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
1001
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_90,
1002
- // NUEVO
1003
- arrowColor: globalTokens.hal_black,
1004
- arrowColorOnDark: globalTokens.hal_white,
1005
- disabledArrowColor: globalTokens.hal_grey_l_60,
1006
- disabledArrowColorOnDark: globalTokens.hal_grey_l_60,
1007
- enabledListBorderColor: globalTokens.hal_grey_l_80,
1008
- listOptionBorderBottomColor: globalTokens.hal_grey_l_90,
1009
- selectedListOptionBackgroundColor: globalTokens.hal_grey_l_90
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
1010
926
  },
1011
927
  sidenav: {
1012
928
  backgroundColor: globalTokens.hal_grey_l_95,
1013
929
  arrowContainerColor: globalTokens.hal_grey_l_90,
1014
930
  arrowColor: globalTokens.hal_black,
1015
931
  titleFontFamily: globalTokens.type_sans,
1016
- titleFontSize: globalTokens.type_scale_05,
932
+ titleFontSize: globalTokens.type_scale_04,
1017
933
  titleFontStyle: globalTokens.type_normal,
1018
- titleFontWeight: globalTokens.type_regular,
1019
- titleFontColor: globalTokens.hal_black,
934
+ titleFontWeight: globalTokens.type_semibold,
935
+ titleFontColor: globalTokens.color_grey_800,
1020
936
  titleFontTextTransform: "none",
1021
937
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
1022
- subtitleFontFamily: globalTokens.type_sans,
1023
- subtitleFontSize: globalTokens.type_scale_03,
1024
- subtitleFontStyle: globalTokens.type_normal,
1025
- subtitleFontWeight: globalTokens.type_regular,
1026
- subtitleFontColor: globalTokens.color_grey_800,
1027
- subtitleFontTextTransform: globalTokens.type_uppercase,
1028
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
938
+ groupTitleFontFamily: globalTokens.type_sans,
939
+ groupTitleFontSize: globalTokens.type_scale_02,
940
+ groupTitleFontStyle: globalTokens.type_normal,
941
+ groupTitleFontWeight: globalTokens.type_semibold,
942
+ groupTitleFontColor: globalTokens.black,
943
+ groupTitleHoverBackgroundColor: globalTokens.hal_grey_l_90,
944
+ groupTitleActiveBackgroundColor: globalTokens.hal_grey_l_80,
945
+ groupTitleSelectedFontColor: globalTokens.white,
946
+ groupTitleSelectedBackgroundColor: globalTokens.color_grey_800,
947
+ groupTitleSelectedHoverFontColor: globalTokens.white,
948
+ groupTitleSelectedHoverBackgroundColor: globalTokens.color_grey_600,
949
+ groupTitleFontTextTransform: globalTokens.type_uppercase,
950
+ groupTitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
1029
951
  linkFontFamily: globalTokens.type_sans,
1030
952
  linkFontSize: globalTokens.type_scale_02,
1031
953
  linkFontStyle: globalTokens.type_normal,
1032
954
  linkFontWeight: globalTokens.type_regular,
1033
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,
1034
961
  linkFontTextTransform: "none",
1035
962
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
1036
963
  linkTextDecoration: globalTokens.type_no_line,
@@ -1044,9 +971,13 @@ var componentTokens = {
1044
971
  },
1045
972
  slider: {
1046
973
  fontFamily: globalTokens.type_sans,
1047
- fontSize: globalTokens.type_scale_03,
1048
- fontStyle: globalTokens.type_normal,
1049
- 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,
1050
981
  labelFontFamily: globalTokens.type_sans,
1051
982
  labelFontSize: globalTokens.type_scale_02,
1052
983
  labelFontStyle: globalTokens.type_normal,
@@ -1060,9 +991,13 @@ var componentTokens = {
1060
991
  fontColor: globalTokens.hal_black,
1061
992
  fontColorOnDark: globalTokens.hal_white,
1062
993
  labelFontColor: globalTokens.hal_black,
994
+ labelFontColorOnDark: globalTokens.hal_white,
1063
995
  helperTextFontColor: globalTokens.hal_black,
1064
- disabledFontColor: globalTokens.hal_grey_l_60,
1065
- fontLetterSpacing: globalTokens.type_spacing_normal,
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,
1066
1001
  thumbHeight: "12px",
1067
1002
  thumbWidth: "12px",
1068
1003
  hoverThumbHeight: "14px",
@@ -1110,7 +1045,7 @@ var componentTokens = {
1110
1045
  },
1111
1046
  spinner: {
1112
1047
  trackCircleColor: "#5f249f",
1113
- trackCircleColorOnDark: "#a46ede",
1048
+ trackCircleColorOverlay: "#a46ede",
1114
1049
  totalCircleColor: globalTokens.white,
1115
1050
  labelFontFamily: globalTokens.type_sans,
1116
1051
  labelFontSize: globalTokens.type_scale_02,
@@ -1144,37 +1079,37 @@ var componentTokens = {
1144
1079
  "switch": {
1145
1080
  checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1146
1081
  checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
1147
- checkedThumbBackgroundColor: globalTokens.white,
1148
- checkedThumbBackgroundColorOnDark: globalTokens.white,
1149
- uncheckedTrackBackgroundColor: globalTokens.lightGrey,
1150
- uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
1151
- uncheckedThumbBackgroundColor: globalTokens.white,
1152
- uncheckedThumbBackgroundColorOnDark: globalTokens.white,
1153
- 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,
1154
1089
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
1155
- disabledCheckedThumbBackgroundColor: globalTokens.white,
1156
- disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
1157
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
1090
+ disabledCheckedThumbBackgroundColor: globalTokens.hal_white,
1091
+ disabledCheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1092
+ disabledUncheckedTrackBackgroundColor: globalTokens.hal_grey_l_95,
1158
1093
  disabledUncheckedTrackBackgroundColorOnDark: "#363636",
1159
- disabledUncheckedThumbBackgroundColor: globalTokens.white,
1160
- disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
1161
- disabledLabelFontColor: globalTokens.lighterBlack,
1094
+ disabledUncheckedThumbBackgroundColor: globalTokens.hal_white,
1095
+ disabledUncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1096
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1162
1097
  disabledLabelFontColorOnDark: "#575757",
1163
1098
  disabledLabelFontStyle: globalTokens.type_normal,
1164
1099
  labelFontFamily: globalTokens.type_sans,
1165
1100
  labelFontSize: globalTokens.type_scale_root,
1166
1101
  labelFontStyle: globalTokens.type_normal,
1167
1102
  labelFontWeight: globalTokens.type_regular,
1168
- labelFontColor: globalTokens.black,
1169
- labelFontColorOnDark: globalTokens.white,
1170
- thumbFocusColor: globalTokens.blue,
1103
+ labelFontColor: globalTokens.hal_black,
1104
+ labelFontColorOnDark: globalTokens.hal_white,
1105
+ thumbFocusColor: globalTokens.hal_blue_l_50,
1171
1106
  thumbFocusColorOnDark: "#1682FF",
1172
1107
  thumbHeight: "24px",
1173
1108
  thumbWidth: "24px",
1174
- thumbShift: "40%",
1109
+ thumbShift: "1.25rem",
1175
1110
  trackHeight: "12px",
1176
- trackWidth: "60px",
1177
- spaceBetweenLabelSwitch: "0px"
1111
+ trackWidth: "36px",
1112
+ spaceBetweenLabelSwitch: "8px"
1178
1113
  },
1179
1114
  tag: {
1180
1115
  fontFamily: globalTokens.type_sans,
@@ -1245,6 +1180,7 @@ var componentTokens = {
1245
1180
  disabledFontColor: "#999999",
1246
1181
  disabledIconColor: "#999999",
1247
1182
  disabledFontStyle: globalTokens.type_normal,
1183
+ disabledBadgeBackgroundColor: "#0000004D",
1248
1184
  hoverBackgroundColor: "#f2eafa",
1249
1185
  pressedBackgroundColor: "#e5d5f6",
1250
1186
  pressedFontWeight: globalTokens.type_semibold,
@@ -1280,8 +1216,10 @@ var componentTokens = {
1280
1216
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1281
1217
  errorBorderColor: globalTokens.hal_red_s_41,
1282
1218
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
1283
- hoverErrorBorderColor: "#fe0123",
1219
+ hoverErrorBorderColor: globalTokens.color_red_600,
1284
1220
  hoverErrorBorderColorOnDark: "#fe677b",
1221
+ inputMarginTop: globalTokens.spacing_02,
1222
+ inputMarginBottom: globalTokens.spacing_02,
1285
1223
  errorMessageColor: globalTokens.hal_red_s_41,
1286
1224
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
1287
1225
  labelFontColor: globalTokens.hal_black,
@@ -1301,7 +1239,7 @@ var componentTokens = {
1301
1239
  helperTextLineHeight: globalTokens.type_leading_normal,
1302
1240
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1303
1241
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1304
- placeholderFontColor: "#808080",
1242
+ placeholderFontColor: "#000000b3",
1305
1243
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1306
1244
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1307
1245
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -1361,156 +1299,65 @@ var componentTokens = {
1361
1299
  containerBorderRadius: globalTokens.border_radius_large,
1362
1300
  optionFocusBorderThickness: globalTokens.border_width_2
1363
1301
  },
1364
- upload: {
1365
- fontFamily: globalTokens.type_sans,
1366
- shadowColor: globalTokens.lightWhite,
1367
- scrollBarThumbColor: globalTokens.darkGrey,
1368
- scrollBarTrackColor: globalTokens.lightGrey,
1369
- errorColor: globalTokens.red,
1370
- backgroundColor: globalTokens.white,
1371
- draggingStateBackgroundColor: globalTokens.lightWhite,
1372
- dragAndDropIconColor: globalTokens.black,
1373
- dragAndDropIconSize: "43.5px",
1374
- dragAndDropTitleFontSize: globalTokens.type_scale_04,
1375
- dragAndDropTitleFontStyle: globalTokens.type_normal,
1376
- dragAndDropTitleFontWeight: globalTokens.type_bold,
1377
- dragAndDropTitleFontTextTransform: "none",
1378
- dragAndDropTitleFontColor: globalTokens.black,
1379
- dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1380
- dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1381
- dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1382
- dragAndDropDescriptionFontTextTransform: "none",
1383
- dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1384
- dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1385
- dragAndDropDraggingStateIconSize: "74.5px",
1386
- dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1387
- dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1388
- dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1389
- dragAndDropDraggingStateFontTextTransform: "none",
1390
- dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1391
- dragAndDropAreaIconColor: globalTokens.darkGrey,
1392
- dragAndDropAreaIconSize: "24px",
1393
- dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1394
- dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1395
- dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1396
- dragAndDropAreaTextFontTextTransform: "none",
1397
- dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1398
- fileDeleteIconColor: globalTokens.black,
1399
- fileDeleteIconSize: "30px",
1400
- fileUnderlineColor: globalTokens.lightGrey,
1401
- fileUnderlineThickness: "1px",
1402
- fileNameFontSize: globalTokens.type_scale_03,
1403
- fileNameFontStyle: globalTokens.type_normal,
1404
- fileNameFontWeight: globalTokens.type_regular,
1405
- fileNameFontTextTransform: "none",
1406
- fileNameFontColor: globalTokens.black,
1407
- fileTypeFontSize: globalTokens.type_scale_01,
1408
- fileTypeFontStyle: globalTokens.type_normal,
1409
- fileTypeFontWeight: globalTokens.type_regular,
1410
- fileTypeFontTextTransform: globalTokens.type_uppercase,
1411
- fileTypeFontColor: globalTokens.darkGrey,
1412
- hoverFileColor: globalTokens.darkWhite,
1413
- uploadedFileIconColor: globalTokens.lightGrey,
1414
- uploadedFileIconSize: "24px",
1415
- uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1416
- uploadedFilesTitleFontStyle: globalTokens.type_normal,
1417
- uploadedFilesTitleFontWeight: globalTokens.type_regular,
1418
- uploadedFilesTitleFontTextTransform: "none",
1419
- uploadedFilesTitleFontColor: globalTokens.black,
1420
- uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1421
- uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1422
- uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1423
- uploadedFilesSubtitleFontTextTransform: "none",
1424
- uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1425
- uploadedFilesNumberFontWeight: globalTokens.type_bold
1426
- },
1427
- V3Textarea: {
1428
- fontFamily: globalTokens.type_sans,
1429
- assistiveTextFontSize: globalTokens.type_scale_01,
1430
- assistiveTextFontStyle: globalTokens.type_normal,
1431
- assistiveTextFontWeight: globalTokens.type_regular,
1432
- assistiveTextFontColor: globalTokens.black,
1433
- assistiveTextFontColorOnDark: globalTokens.white,
1434
- assistiveTextLetterSpacing: "0.03333em",
1435
- disabledColor: globalTokens.lighterBlack,
1436
- disabledColorOnDark: "#575757",
1437
- errorColor: globalTokens.red,
1438
- errorColorOnDark: globalTokens.hal_red_l_60,
1439
- scrollBarThumbColor: globalTokens.darkGrey,
1440
- scrollBarThumbColorOnDark: globalTokens.white,
1441
- scrollBarTrackColor: globalTokens.lightGrey,
1442
- scrollBarTrackColorOnDark: "#999999",
1443
- labelFontSize: globalTokens.type_scale_03,
1444
- labelFontStyle: globalTokens.type_normal,
1445
- labelFontWeight: globalTokens.type_regular,
1446
- labelFontColor: globalTokens.black,
1447
- labelFontColorOnDark: globalTokens.white,
1448
- labelLetterSpacing: "0.00938em",
1449
- valueFontSize: globalTokens.type_scale_03,
1450
- valueFontStyle: globalTokens.type_normal,
1451
- valueFontWeight: globalTokens.type_regular,
1452
- valueFontColor: globalTokens.black,
1453
- valueFontColorOnDark: globalTokens.white,
1454
- valueLetterSpacing: globalTokens.type_spacing_normal,
1455
- valueLineHeight: "1.1875em",
1456
- underlineColor: globalTokens.black,
1457
- underlineColorOnDark: globalTokens.white,
1458
- underlineFocusColor: globalTokens.black,
1459
- underlineFocusColorOnDark: globalTokens.white,
1460
- underlineThickness: "1px"
1461
- },
1462
1302
  wizard: {
1463
- disabledBackgroundColor: globalTokens.lightGrey,
1464
- disabledFontColor: globalTokens.darkGrey,
1465
- stepContainerFontSize: globalTokens.type_scale_03,
1466
- stepContainerFontFamily: globalTokens.type_sans,
1467
- stepContainerFontStyle: globalTokens.type_normal,
1468
- stepContainerFontWeight: globalTokens.type_regular,
1469
- stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1470
- stepContainerFontColor: globalTokens.black,
1471
- stepContainerSelectedFontColor: globalTokens.white,
1472
- stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1473
- stepContainerBackgroundColor: globalTokens.white,
1474
- 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,
1475
1333
  labelFontSize: globalTokens.type_scale_03,
1476
1334
  labelFontFamily: globalTokens.type_sans,
1477
1335
  labelFontStyle: globalTokens.type_normal,
1478
1336
  labelFontWeight: globalTokens.type_regular,
1479
- labelLetterSpacing: globalTokens.type_spacing_normal,
1337
+ labelFontTracking: globalTokens.type_spacing_normal,
1480
1338
  labelFontTextTransform: "none",
1481
1339
  labelTextAlign: "left",
1482
- labelFontColor: globalTokens.darkGrey,
1483
- visitedLabelFontColor: globalTokens.black,
1484
- visitedDescriptionFontColor: globalTokens.black,
1485
- descriptionFontSize: globalTokens.type_scale_01,
1486
- descriptionFontFamily: globalTokens.type_sans,
1487
- descriptionFontStyle: globalTokens.type_normal,
1488
- descriptionFontWeight: globalTokens.type_regular,
1489
- descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1490
- descriptionFontTextTransform: "none",
1491
- descriptionFontColor: globalTokens.darkGrey,
1492
- descriptionTextAlign: "left",
1493
- circleWidth: "32px",
1494
- circleHeight: "32px",
1495
- circleBorderThickness: "2px",
1496
- circleBorderStyle: "solid",
1497
- circleBorderRadius: "45px",
1498
- circleBorderColor: globalTokens.black,
1499
- selectedCircleWidth: "32px",
1500
- selectedCircleHeight: "32px",
1501
- selectedCircleBorderThickness: "2px",
1502
- selectedCircleBorderStyle: "solid",
1503
- selectedCircleBorderRadius: "45px",
1504
- selectedCircleBorderColor: globalTokens.purple,
1505
- disabledCircleWidth: "32px",
1506
- disabledCircleHeight: "32px",
1507
- disabledCircleBorderThickness: "2px",
1508
- disabledCircleBorderStyle: "solid",
1509
- disabledCircleBorderRadius: "45px",
1510
- 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",
1511
1358
  separatorBorderThickness: "1px",
1512
1359
  separatorBorderStyle: "solid",
1513
- separatorColor: globalTokens.lightGrey,
1360
+ separatorColor: globalTokens.hal_grey_s_40,
1514
1361
  focusColor: globalTokens.hal_blue_l_50
1515
1362
  }
1516
1363
  };
@@ -1526,12 +1373,11 @@ var spaces = {
1526
1373
  };
1527
1374
  exports.spaces = spaces;
1528
1375
  var responsiveSizes = {
1529
- mobileSmall: "320",
1530
- mobileMedium: "375",
1531
- mobileLarge: "425",
1532
- tablet: "768",
1533
- laptop: "1024",
1534
- desktop: "1440"
1376
+ xsmall: "20",
1377
+ small: "30",
1378
+ medium: "45",
1379
+ large: "66",
1380
+ xlarge: "90"
1535
1381
  };
1536
1382
  exports.responsiveSizes = responsiveSizes;
1537
1383
  var typeface = {
@@ -1566,4 +1412,93 @@ var typeface = {
1566
1412
  textTransform: "uppercase"
1567
1413
  }
1568
1414
  };
1569
- exports.typeface = typeface;
1415
+ exports.typeface = typeface;
1416
+ var defaultTranslatedComponentLabels = {
1417
+ formFields: {
1418
+ optionalLabel: "(Optional)",
1419
+ requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
1420
+ requiredValueErrorMessage: "This field is required. Please, enter a value.",
1421
+ formatRequestedErrorMessage: "Please match the format requested.",
1422
+ lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
1423
+ return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
1424
+ },
1425
+ logoAlternativeText: "Logo"
1426
+ },
1427
+ alert: {
1428
+ infoTitleText: "information",
1429
+ successTitleText: "success",
1430
+ warningTitleText: "warning",
1431
+ errorTitleText: "error"
1432
+ },
1433
+ dateInput: {
1434
+ invalidDateErrorMessage: "Invalid date."
1435
+ },
1436
+ fileInput: {
1437
+ fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1438
+ fileSizeLessThanErrorMessage: "File size must be less than max size.",
1439
+ multipleButtonLabelDefault: "Select files",
1440
+ singleButtonLabelDefault: "Select file",
1441
+ dropAreaButtonLabelDefault: "Select",
1442
+ multipleDropAreaLabelDefault: "or drop files",
1443
+ singleDropAreaLabelDefault: "or drop a file"
1444
+ },
1445
+ footer: {
1446
+ copyrightText: function copyrightText(year) {
1447
+ return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
1448
+ }
1449
+ },
1450
+ header: {
1451
+ closeIcon: "Close menu",
1452
+ hamburguerTitle: "Menu"
1453
+ },
1454
+ numberInput: {
1455
+ valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
1456
+ return "Value must be greater than or equal to ".concat(value, ".");
1457
+ },
1458
+ valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
1459
+ return "Value must be less than or equal to ".concat(value, ".");
1460
+ },
1461
+ decrementValueTitle: "Decrement value",
1462
+ incrementValueTitle: "Increment value"
1463
+ },
1464
+ paginator: {
1465
+ itemsPerPageText: "Items per page ",
1466
+ minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
1467
+ return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
1468
+ },
1469
+ goToPageText: "Go to page:",
1470
+ pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
1471
+ return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
1472
+ }
1473
+ },
1474
+ passwordInput: {
1475
+ inputShowPasswordTitle: "Show password",
1476
+ inputHidePasswordTitle: "Hide password"
1477
+ },
1478
+ quickNav: {
1479
+ contentTitle: "Contents"
1480
+ },
1481
+ radioGroup: {
1482
+ optionalItemLabelDefault: "N/A"
1483
+ },
1484
+ select: {
1485
+ noMatchesErrorMessage: "No matches found",
1486
+ actionClearSelectionTitle: "Clear selection",
1487
+ actionClearSearchTitle: "Clear search"
1488
+ },
1489
+ textInput: {
1490
+ clearFieldActionTitle: "Clear field",
1491
+ searchingMessage: "Searching...",
1492
+ fetchingDataErrorMessage: "Error fetching data"
1493
+ },
1494
+ calendar: {
1495
+ days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1496
+ daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
1497
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1498
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
1499
+ },
1500
+ applicationLayout: {
1501
+ visibilityToggleTitle: "Toggle visibility sidenav"
1502
+ }
1503
+ };
1504
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;