@dxc-technology/halstack-react 0.0.0-20fc09e → 0.0.0-2151ae6

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 (460) 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/{dist/button → button}/Button.js +34 -98
  45. package/button/Button.stories.tsx +274 -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 +357 -431
  82. package/date-input/DateInput.d.ts +4 -0
  83. package/{dist/date-input → date-input}/DateInput.js +80 -108
  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 +138 -0
  90. package/dialog/Dialog.stories.tsx +212 -0
  91. package/dialog/Dialog.test.js +40 -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/{dist/dropdown → dropdown}/Dropdown.js +54 -207
  96. package/dropdown/Dropdown.stories.tsx +249 -0
  97. package/dropdown/Dropdown.test.js +189 -0
  98. package/dropdown/types.d.ts +80 -0
  99. package/dropdown/types.js +5 -0
  100. package/file-input/FileInput.d.ts +4 -0
  101. package/file-input/FileInput.js +593 -0
  102. package/file-input/FileInput.stories.tsx +507 -0
  103. package/file-input/FileInput.test.js +457 -0
  104. package/file-input/FileItem.d.ts +14 -0
  105. package/file-input/FileItem.js +186 -0
  106. package/file-input/types.d.ts +112 -0
  107. package/file-input/types.js +5 -0
  108. package/flex/Flex.d.ts +3 -0
  109. package/flex/Flex.js +74 -0
  110. package/flex/Flex.stories.tsx +103 -0
  111. package/flex/types.d.ts +21 -0
  112. package/flex/types.js +5 -0
  113. package/footer/Footer.d.ts +4 -0
  114. package/footer/Footer.js +185 -0
  115. package/footer/Footer.stories.tsx +130 -0
  116. package/footer/Footer.test.js +109 -0
  117. package/footer/Icons.d.ts +2 -0
  118. package/{dist/footer → footer}/Icons.js +16 -16
  119. package/footer/types.d.ts +65 -0
  120. package/footer/types.js +5 -0
  121. package/header/Header.d.ts +7 -0
  122. package/header/Header.js +303 -0
  123. package/header/Header.stories.tsx +172 -0
  124. package/header/Header.test.js +79 -0
  125. package/header/Icons.d.ts +2 -0
  126. package/{dist/header → header}/Icons.js +7 -32
  127. package/header/types.d.ts +47 -0
  128. package/header/types.js +5 -0
  129. package/heading/Heading.d.ts +4 -0
  130. package/{dist/heading → heading}/Heading.js +31 -90
  131. package/heading/Heading.stories.tsx +54 -0
  132. package/heading/Heading.test.js +186 -0
  133. package/heading/types.d.ts +33 -0
  134. package/heading/types.js +5 -0
  135. package/inset/Inset.d.ts +3 -0
  136. package/inset/Inset.js +51 -0
  137. package/inset/Inset.stories.tsx +229 -0
  138. package/inset/types.d.ts +37 -0
  139. package/inset/types.js +5 -0
  140. package/layout/ApplicationLayout.d.ts +11 -0
  141. package/layout/ApplicationLayout.js +186 -0
  142. package/layout/ApplicationLayout.stories.tsx +130 -0
  143. package/layout/Icons.d.ts +5 -0
  144. package/layout/Icons.js +66 -0
  145. package/layout/SidenavContext.d.ts +5 -0
  146. package/layout/SidenavContext.js +19 -0
  147. package/layout/types.d.ts +44 -0
  148. package/layout/types.js +5 -0
  149. package/link/Link.d.ts +4 -0
  150. package/link/Link.js +136 -0
  151. package/link/Link.stories.tsx +186 -0
  152. package/link/Link.test.js +83 -0
  153. package/link/types.d.ts +54 -0
  154. package/link/types.js +5 -0
  155. package/main.d.ts +49 -0
  156. package/{dist/main.js → main.js} +143 -101
  157. package/number-input/NumberInput.d.ts +4 -0
  158. package/number-input/NumberInput.js +76 -0
  159. package/number-input/NumberInput.stories.tsx +115 -0
  160. package/number-input/NumberInput.test.js +506 -0
  161. package/number-input/NumberInputContext.d.ts +4 -0
  162. package/{dist/number-input → number-input}/NumberInputContext.js +5 -2
  163. package/number-input/numberInputContextTypes.d.ts +19 -0
  164. package/number-input/numberInputContextTypes.js +5 -0
  165. package/number-input/types.d.ts +124 -0
  166. package/number-input/types.js +5 -0
  167. package/package.json +39 -28
  168. package/paginator/Icons.js +66 -0
  169. package/paginator/Paginator.d.ts +4 -0
  170. package/paginator/Paginator.js +171 -0
  171. package/paginator/Paginator.stories.tsx +63 -0
  172. package/paginator/Paginator.test.js +308 -0
  173. package/paginator/types.d.ts +38 -0
  174. package/paginator/types.js +5 -0
  175. package/paragraph/Paragraph.d.ts +6 -0
  176. package/paragraph/Paragraph.js +38 -0
  177. package/paragraph/Paragraph.stories.tsx +44 -0
  178. package/password-input/PasswordInput.d.ts +4 -0
  179. package/{dist/password-input → password-input}/PasswordInput.js +45 -77
  180. package/password-input/PasswordInput.stories.tsx +131 -0
  181. package/password-input/PasswordInput.test.js +180 -0
  182. package/password-input/types.d.ts +110 -0
  183. package/password-input/types.js +5 -0
  184. package/progress-bar/ProgressBar.d.ts +4 -0
  185. package/{dist/progress-bar → progress-bar}/ProgressBar.js +23 -95
  186. package/progress-bar/ProgressBar.stories.jsx +58 -0
  187. package/progress-bar/ProgressBar.test.js +65 -0
  188. package/progress-bar/types.d.ts +37 -0
  189. package/progress-bar/types.js +5 -0
  190. package/quick-nav/QuickNav.d.ts +4 -0
  191. package/quick-nav/QuickNav.js +118 -0
  192. package/quick-nav/QuickNav.stories.tsx +264 -0
  193. package/quick-nav/types.d.ts +21 -0
  194. package/quick-nav/types.js +5 -0
  195. package/radio-group/Radio.d.ts +4 -0
  196. package/radio-group/Radio.js +141 -0
  197. package/radio-group/RadioGroup.d.ts +4 -0
  198. package/radio-group/RadioGroup.js +283 -0
  199. package/radio-group/RadioGroup.stories.tsx +100 -0
  200. package/radio-group/RadioGroup.test.js +695 -0
  201. package/radio-group/types.d.ts +114 -0
  202. package/radio-group/types.js +5 -0
  203. package/resultsetTable/ResultsetTable.d.ts +4 -0
  204. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +43 -147
  205. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  206. package/resultsetTable/ResultsetTable.test.js +348 -0
  207. package/resultsetTable/types.d.ts +67 -0
  208. package/resultsetTable/types.js +5 -0
  209. package/row/Row.d.ts +3 -0
  210. package/row/Row.js +127 -0
  211. package/row/Row.stories.tsx +237 -0
  212. package/row/types.d.ts +28 -0
  213. package/row/types.js +5 -0
  214. package/select/Icons.d.ts +10 -0
  215. package/select/Icons.js +93 -0
  216. package/select/Listbox.d.ts +4 -0
  217. package/select/Listbox.js +175 -0
  218. package/select/Option.d.ts +4 -0
  219. package/select/Option.js +110 -0
  220. package/select/Select.d.ts +4 -0
  221. package/select/Select.js +660 -0
  222. package/select/Select.stories.tsx +626 -0
  223. package/select/Select.test.js +2162 -0
  224. package/select/types.d.ts +212 -0
  225. package/select/types.js +5 -0
  226. package/sidenav/Sidenav.d.ts +10 -0
  227. package/sidenav/Sidenav.js +256 -0
  228. package/sidenav/Sidenav.stories.tsx +180 -0
  229. package/sidenav/Sidenav.test.js +44 -0
  230. package/sidenav/types.d.ts +73 -0
  231. package/sidenav/types.js +5 -0
  232. package/slider/Slider.d.ts +4 -0
  233. package/{dist/slider → slider}/Slider.js +80 -156
  234. package/slider/Slider.stories.tsx +177 -0
  235. package/slider/Slider.test.js +150 -0
  236. package/slider/types.d.ts +82 -0
  237. package/slider/types.js +5 -0
  238. package/spinner/Spinner.d.ts +4 -0
  239. package/spinner/Spinner.js +250 -0
  240. package/spinner/Spinner.stories.jsx +103 -0
  241. package/spinner/Spinner.test.js +64 -0
  242. package/spinner/types.d.ts +32 -0
  243. package/spinner/types.js +5 -0
  244. package/stack/Stack.d.ts +4 -0
  245. package/stack/Stack.js +56 -0
  246. package/stack/Stack.stories.tsx +263 -0
  247. package/stack/types.d.ts +32 -0
  248. package/stack/types.js +5 -0
  249. package/switch/Switch.d.ts +4 -0
  250. package/switch/Switch.js +195 -0
  251. package/switch/Switch.stories.tsx +160 -0
  252. package/switch/Switch.test.js +98 -0
  253. package/switch/types.d.ts +62 -0
  254. package/switch/types.js +5 -0
  255. package/table/Table.d.ts +4 -0
  256. package/{dist/table → table}/Table.js +12 -26
  257. package/table/Table.stories.jsx +277 -0
  258. package/table/Table.test.js +26 -0
  259. package/table/types.d.ts +21 -0
  260. package/table/types.js +5 -0
  261. package/tabs/Tabs.d.ts +4 -0
  262. package/tabs/Tabs.js +211 -0
  263. package/tabs/Tabs.stories.tsx +112 -0
  264. package/tabs/Tabs.test.js +140 -0
  265. package/tabs/types.d.ts +82 -0
  266. package/tabs/types.js +5 -0
  267. package/tabs-nav/NavTabs.d.ts +8 -0
  268. package/tabs-nav/NavTabs.js +125 -0
  269. package/tabs-nav/NavTabs.stories.tsx +170 -0
  270. package/tabs-nav/NavTabs.test.js +82 -0
  271. package/tabs-nav/Tab.d.ts +4 -0
  272. package/tabs-nav/Tab.js +132 -0
  273. package/tabs-nav/types.d.ts +53 -0
  274. package/tabs-nav/types.js +5 -0
  275. package/tag/Tag.d.ts +4 -0
  276. package/tag/Tag.js +183 -0
  277. package/tag/Tag.stories.tsx +142 -0
  278. package/tag/Tag.test.js +60 -0
  279. package/tag/types.d.ts +69 -0
  280. package/tag/types.js +5 -0
  281. package/text-input/Suggestion.d.ts +4 -0
  282. package/text-input/Suggestion.js +55 -0
  283. package/text-input/TextInput.d.ts +4 -0
  284. package/{dist/text-input → text-input}/TextInput.js +284 -485
  285. package/text-input/TextInput.stories.tsx +474 -0
  286. package/text-input/TextInput.test.js +1712 -0
  287. package/text-input/types.d.ts +178 -0
  288. package/text-input/types.js +5 -0
  289. package/textarea/Textarea.d.ts +4 -0
  290. package/{dist/textarea → textarea}/Textarea.js +50 -142
  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/{dist/toggle-group → toggle-group}/ToggleGroup.js +36 -148
  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 +292 -0
  312. package/wizard/Wizard.stories.tsx +214 -0
  313. package/wizard/Wizard.test.js +141 -0
  314. package/wizard/types.d.ts +64 -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 -248
  320. package/dist/V3Textarea/V3Textarea.js +0 -264
  321. package/dist/accordion/Accordion.js +0 -353
  322. package/dist/accordion-group/AccordionGroup.js +0 -186
  323. package/dist/alert/index.d.ts +0 -51
  324. package/dist/badge/Badge.js +0 -63
  325. package/dist/box/Box.js +0 -156
  326. package/dist/card/Card.js +0 -254
  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 -379
  331. package/dist/date/Date.stories.js +0 -205
  332. package/dist/date/readme.md +0 -73
  333. package/dist/date-input/index.d.ts +0 -95
  334. package/dist/dialog/Dialog.js +0 -218
  335. package/dist/file-input/FileInput.js +0 -644
  336. package/dist/file-input/FileItem.js +0 -280
  337. package/dist/file-input/index.d.ts +0 -81
  338. package/dist/footer/Footer.js +0 -421
  339. package/dist/header/Header.js +0 -434
  340. package/dist/input-text/InputText.js +0 -707
  341. package/dist/input-text/error.svg +0 -1
  342. package/dist/input-text/readme.md +0 -91
  343. package/dist/layout/ApplicationLayout.js +0 -331
  344. package/dist/layout/facebook.svg +0 -45
  345. package/dist/layout/linkedin.svg +0 -50
  346. package/dist/layout/twitter.svg +0 -53
  347. package/dist/link/Link.js +0 -237
  348. package/dist/link/readme.md +0 -51
  349. package/dist/main.d.ts +0 -8
  350. package/dist/new-select/NewSelect.js +0 -836
  351. package/dist/new-select/index.d.ts +0 -53
  352. package/dist/number-input/NumberInput.js +0 -136
  353. package/dist/number-input/index.d.ts +0 -113
  354. package/dist/paginator/Paginator.js +0 -289
  355. package/dist/paginator/images/next.svg +0 -3
  356. package/dist/paginator/images/nextPage.svg +0 -3
  357. package/dist/paginator/images/previous.svg +0 -3
  358. package/dist/paginator/images/previousPage.svg +0 -3
  359. package/dist/paginator/readme.md +0 -50
  360. package/dist/password-input/index.d.ts +0 -94
  361. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  362. package/dist/progress-bar/readme.md +0 -63
  363. package/dist/radio/Radio.js +0 -209
  364. package/dist/radio/Radio.stories.js +0 -166
  365. package/dist/radio/readme.md +0 -70
  366. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  367. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  368. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  369. package/dist/select/Select.js +0 -549
  370. package/dist/sidenav/Sidenav.js +0 -179
  371. package/dist/slider/readme.md +0 -64
  372. package/dist/spinner/Spinner.js +0 -381
  373. package/dist/spinner/Spinner.stories.js +0 -183
  374. package/dist/spinner/readme.md +0 -65
  375. package/dist/switch/Switch.js +0 -222
  376. package/dist/switch/Switch.stories.js +0 -134
  377. package/dist/switch/readme.md +0 -133
  378. package/dist/tabs/Tabs.js +0 -343
  379. package/dist/tabs/Tabs.stories.js +0 -130
  380. package/dist/tabs/readme.md +0 -78
  381. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  382. package/dist/tabs-for-sections/readme.md +0 -78
  383. package/dist/tag/Tag.js +0 -282
  384. package/dist/text-input/index.d.ts +0 -135
  385. package/dist/textarea/index.d.ts +0 -117
  386. package/dist/toggle/Toggle.js +0 -220
  387. package/dist/toggle/Toggle.stories.js +0 -297
  388. package/dist/toggle/readme.md +0 -80
  389. package/dist/upload/Upload.js +0 -205
  390. package/dist/upload/Upload.stories.js +0 -72
  391. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  392. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  393. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  394. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  395. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  396. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  397. package/dist/upload/file-upload/FileToUpload.js +0 -184
  398. package/dist/upload/file-upload/audio-icon.svg +0 -4
  399. package/dist/upload/file-upload/close.svg +0 -4
  400. package/dist/upload/file-upload/file-icon.svg +0 -4
  401. package/dist/upload/file-upload/video-icon.svg +0 -4
  402. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  403. package/dist/upload/readme.md +0 -37
  404. package/dist/upload/transaction/Transaction.js +0 -175
  405. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  406. package/dist/upload/transaction/audio-icon.svg +0 -4
  407. package/dist/upload/transaction/error-icon.svg +0 -4
  408. package/dist/upload/transaction/file-icon-err.svg +0 -4
  409. package/dist/upload/transaction/file-icon.svg +0 -4
  410. package/dist/upload/transaction/image-icon-err.svg +0 -4
  411. package/dist/upload/transaction/image-icon.svg +0 -4
  412. package/dist/upload/transaction/success-icon.svg +0 -4
  413. package/dist/upload/transaction/video-icon-err.svg +0 -4
  414. package/dist/upload/transaction/video-icon.svg +0 -4
  415. package/dist/upload/transactions/Transactions.js +0 -138
  416. package/dist/wizard/Wizard.js +0 -411
  417. package/dist/wizard/invalid_icon.svg +0 -5
  418. package/dist/wizard/valid_icon.svg +0 -5
  419. package/dist/wizard/validation-wrong.svg +0 -6
  420. package/test/Accordion.test.js +0 -33
  421. package/test/AccordionGroup.test.js +0 -125
  422. package/test/Alert.test.js +0 -53
  423. package/test/Box.test.js +0 -10
  424. package/test/Button.test.js +0 -18
  425. package/test/Card.test.js +0 -30
  426. package/test/Checkbox.test.js +0 -45
  427. package/test/Chip.test.js +0 -25
  428. package/test/Date.test.js +0 -397
  429. package/test/DateInput.test.js +0 -242
  430. package/test/Dialog.test.js +0 -23
  431. package/test/Dropdown.test.js +0 -145
  432. package/test/FileInput.test.js +0 -201
  433. package/test/Footer.test.js +0 -94
  434. package/test/Header.test.js +0 -34
  435. package/test/Heading.test.js +0 -35
  436. package/test/InputText.test.js +0 -248
  437. package/test/Link.test.js +0 -43
  438. package/test/NumberInput.test.js +0 -259
  439. package/test/Paginator.test.js +0 -177
  440. package/test/PasswordInput.test.js +0 -83
  441. package/test/ProgressBar.test.js +0 -35
  442. package/test/Radio.test.js +0 -37
  443. package/test/ResultsetTable.test.js +0 -329
  444. package/test/Select.test.js +0 -212
  445. package/test/Sidenav.test.js +0 -45
  446. package/test/Slider.test.js +0 -82
  447. package/test/Spinner.test.js +0 -32
  448. package/test/Switch.test.js +0 -45
  449. package/test/Table.test.js +0 -36
  450. package/test/Tabs.test.js +0 -109
  451. package/test/TabsForSections.test.js +0 -34
  452. package/test/Tag.test.js +0 -32
  453. package/test/TextInput.test.js +0 -732
  454. package/test/Textarea.test.js +0 -193
  455. package/test/ToggleGroup.test.js +0 -85
  456. package/test/Upload.test.js +0 -60
  457. package/test/V3TextArea.test.js +0 -51
  458. package/test/Wizard.test.js +0 -130
  459. package/test/mocks/pngMock.js +0 -1
  460. 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,
@@ -505,15 +494,14 @@ var componentTokens = {
505
494
  disabledDropLabelFontColor: globalTokens.hal_grey_l_60,
506
495
  focusDropBorderColor: globalTokens.hal_blue_l_50,
507
496
  disabledDropBorderColor: globalTokens.hal_grey_l_60,
508
- focusDropBackgroundColor: globalTokens.color_blue_50,
509
- hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
497
+ dragoverDropBackgroundColor: globalTokens.color_blue_50,
510
498
  activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
511
499
  errorFileItemBorderColor: globalTokens.hal_red_s_41,
512
500
  errorFileItemBackgroundColor: globalTokens.color_red_50,
513
- errorFileItemIconBackgroundColor: globalTokens.color_red_700,
501
+ errorFilePreviewBackgroundColor: globalTokens.color_red_700,
514
502
  errorFileItemIconColor: globalTokens.hal_red_s_41,
515
503
  fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
516
- fileItemIconColor: globalTokens.color_grey_600,
504
+ deleteFileItemColor: globalTokens.hal_black,
517
505
  errorMessageFontColor: globalTokens.hal_red_s_41,
518
506
  labelFontFamily: globalTokens.type_sans,
519
507
  labelFontSize: globalTokens.type_scale_02,
@@ -533,13 +521,19 @@ var componentTokens = {
533
521
  errorMessageFontFamily: globalTokens.type_sans,
534
522
  errorMessageFontSize: globalTokens.type_scale_01,
535
523
  errorMessageFontWeight: globalTokens.type_regular,
536
- errorMessageLineHeight: globalTokens.type_scale_05,
524
+ errorMessageLineHeight: globalTokens.type_leading_normal,
537
525
  dropBorderThickness: globalTokens.border_width_1,
538
526
  dropBorderStyle: globalTokens.border_dashed,
539
527
  dropBorderRadius: globalTokens.border_radius_large,
540
528
  fileItemBorderThickness: globalTokens.border_width_1,
541
529
  fileItemBorderStyle: globalTokens.border_solid,
542
- fileItemBorderRadius: globalTokens.border_radius_medium
530
+ fileItemBorderRadius: globalTokens.border_radius_medium,
531
+ hoverDeleteFileItemBackgroundColor: globalTokens.color_grey_a_100,
532
+ activeDeleteFileItemBackgroundColor: globalTokens.color_grey_a_300,
533
+ focusDeleteFileItemBorderColor: globalTokens.hal_blue_l_50,
534
+ filePreviewBackgroundColor: globalTokens.hal_grey_l_95,
535
+ filePreviewIconColor: globalTokens.color_grey_600,
536
+ errorFilePreviewIconColor: globalTokens.hal_red_s_41
543
537
  },
544
538
  footer: {
545
539
  height: "124px",
@@ -559,7 +553,7 @@ var componentTokens = {
559
553
  copyrightFontStyle: globalTokens.type_normal,
560
554
  copyrightFontWeight: globalTokens.type_regular,
561
555
  copyrightFontColor: globalTokens.hal_white,
562
- logo: _Icons2["default"],
556
+ logo: "",
563
557
  logoHeight: "32px",
564
558
  logoWidth: "auto",
565
559
  socialLinksSize: "24px",
@@ -577,8 +571,8 @@ var componentTokens = {
577
571
  hamburguerTextTransform: globalTokens.type_uppercase,
578
572
  hamburguerIconColor: globalTokens.hal_black,
579
573
  hamburguerHoverColor: globalTokens.mediumGreyBlack,
580
- logo: _Icons.dxcLogo,
581
- logoResponsive: _Icons.dxcLogo,
574
+ logo: "",
575
+ logoResponsive: "",
582
576
  logoHeight: "40px",
583
577
  logoWidth: "auto",
584
578
  menuBackgroundColor: globalTokens.hal_white,
@@ -595,104 +589,47 @@ var componentTokens = {
595
589
  paddingLeft: "24px",
596
590
  underlinedColor: globalTokens.hal_black,
597
591
  underlinedThickness: "2px",
598
- underlinedStyle: "solid"
592
+ underlinedStyle: "solid",
593
+ contentColor: globalTokens.hal_black,
594
+ contentColorOnDark: globalTokens.hal_white
599
595
  },
600
596
  heading: {
601
597
  level1FontColor: globalTokens.inherit,
602
598
  level1FontFamily: globalTokens.type_sans,
603
- level1FontSize: globalTokens.type_scale_08,
599
+ level1FontSize: globalTokens.type_scale_07,
604
600
  level1FontStyle: globalTokens.type_normal,
605
- level1FontWeight: globalTokens.type_regular,
601
+ level1FontWeight: globalTokens.type_semibold,
606
602
  level1LineHeight: globalTokens.type_leading_compact_01,
607
603
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
608
604
  level2FontColor: globalTokens.inherit,
609
605
  level2FontFamily: globalTokens.type_sans,
610
- level2FontSize: globalTokens.type_scale_07,
606
+ level2FontSize: globalTokens.type_scale_05,
611
607
  level2FontStyle: globalTokens.type_normal,
612
- level2FontWeight: globalTokens.type_regular,
608
+ level2FontWeight: globalTokens.type_semibold,
613
609
  level2LineHeight: globalTokens.type_leading_normal,
614
610
  level2LetterSpacing: globalTokens.type_spacing_normal,
615
611
  level3FontColor: globalTokens.inherit,
616
612
  level3FontFamily: globalTokens.type_sans,
617
- level3FontSize: globalTokens.type_scale_06,
613
+ level3FontSize: globalTokens.type_scale_04,
618
614
  level3FontStyle: globalTokens.type_normal,
619
- level3FontWeight: globalTokens.type_regular,
615
+ level3FontWeight: globalTokens.type_semibold,
620
616
  level3LineHeight: globalTokens.type_leading_compact_01,
621
617
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
622
618
  level4FontColor: globalTokens.inherit,
623
619
  level4FontFamily: globalTokens.type_sans,
624
- level4FontSize: globalTokens.type_scale_05,
620
+ level4FontSize: globalTokens.type_scale_03,
625
621
  level4FontStyle: globalTokens.type_normal,
626
- level4FontWeight: globalTokens.type_regular,
622
+ level4FontWeight: globalTokens.type_semibold,
627
623
  level4LineHeight: globalTokens.type_leading_normal,
628
624
  level4LetterSpacing: globalTokens.type_spacing_normal,
629
625
  level5FontColor: globalTokens.inherit,
630
626
  level5FontFamily: globalTokens.type_sans,
631
- level5FontSize: globalTokens.type_scale_04,
627
+ level5FontSize: globalTokens.type_scale_02,
632
628
  level5FontStyle: globalTokens.type_normal,
633
- level5FontWeight: globalTokens.type_regular,
629
+ level5FontWeight: globalTokens.type_semibold,
634
630
  level5LineHeight: globalTokens.type_leading_normal,
635
631
  level5LetterSpacing: globalTokens.type_spacing_wide_01
636
632
  },
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
633
  textInput: {
697
634
  fontFamily: globalTokens.type_sans,
698
635
  enabledBorderColor: globalTokens.hal_black,
@@ -707,8 +644,10 @@ var componentTokens = {
707
644
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
708
645
  errorBorderColor: globalTokens.hal_red_s_41,
709
646
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
710
- hoverErrorBorderColor: "#fe0123",
647
+ hoverErrorBorderColor: globalTokens.color_red_600,
711
648
  hoverErrorBorderColorOnDark: "#fe677b",
649
+ inputMarginTop: globalTokens.spacing_02,
650
+ inputMarginBottom: globalTokens.spacing_02,
712
651
  errorMessageColor: globalTokens.hal_red_s_41,
713
652
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
714
653
  errorIconColor: globalTokens.hal_red_s_41,
@@ -738,7 +677,7 @@ var componentTokens = {
738
677
  disabledSuffixColor: globalTokens.hal_grey_l_75,
739
678
  disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
740
679
  disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
741
- placeholderFontColor: "#808080",
680
+ placeholderFontColor: "#000000b3",
742
681
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
743
682
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
744
683
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -769,20 +708,25 @@ var componentTokens = {
769
708
  focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
770
709
  activeActionBackgroundColor: globalTokens.hal_grey_l_80,
771
710
  activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
711
+ listDialogBackgroundColor: globalTokens.hal_white,
712
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
713
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
772
714
  listOptionFontColor: globalTokens.hal_black,
773
- listOptionFontSize: globalTokens.type_scale_03,
715
+ listOptionFontSize: globalTokens.type_scale_02,
774
716
  listOptionFontStyle: globalTokens.type_normal,
775
717
  listOptionFontWeight: globalTokens.type_regular,
776
718
  systemMessageFontColor: globalTokens.hal_grey_s_40,
777
- errorMessageBorderColor: globalTokens.hal_red_s_41,
778
- errorMessageBackgroundColor: globalTokens.hal_red_l_95,
719
+ errorListDialogFontColor: globalTokens.hal_black,
720
+ errorListDialogBackgroundColor: globalTokens.color_red_50,
721
+ errorListDialogBorderColor: globalTokens.hal_red_s_41,
779
722
  hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
780
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
723
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
724
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50
781
725
  },
782
726
  link: {
783
727
  fontColor: globalTokens.hal_blue_s_35,
784
728
  fontFamily: globalTokens.inherit,
785
- fontSize: globalTokens.type_scale_root,
729
+ fontSize: globalTokens.inherit,
786
730
  fontStyle: globalTokens.type_normal,
787
731
  fontWeight: globalTokens.type_regular,
788
732
  iconSize: "16px",
@@ -799,6 +743,13 @@ var componentTokens = {
799
743
  activeUnderlineColor: globalTokens.black,
800
744
  focusColor: globalTokens.hal_blue_l_50
801
745
  },
746
+ paragraph: {
747
+ fontColor: globalTokens.hal_black,
748
+ fontColorOnDark: globalTokens.hal_white,
749
+ display: "block",
750
+ fontSize: globalTokens.type_scale_03,
751
+ fontWeight: globalTokens.type_regular
752
+ },
802
753
  paginator: {
803
754
  backgroundColor: globalTokens.darkWhite,
804
755
  fontColor: globalTokens.hal_black,
@@ -807,15 +758,15 @@ var componentTokens = {
807
758
  fontStyle: globalTokens.type_normal,
808
759
  fontWeight: globalTokens.type_regular,
809
760
  fontTextTransform: "none",
810
- height: "64px",
811
- width: "100%",
812
- marginRight: "40px",
813
- marginLeft: "20px",
761
+ verticalPadding: "0.75rem",
762
+ horizontalPadding: "2rem",
763
+ marginRight: "2rem",
764
+ marginLeft: "2rem",
814
765
  itemsPerPageSelectorMarginLeft: "0px",
815
- itemsPerPageSelectorMarginRight: "30px",
766
+ itemsPerPageSelectorMarginRight: "1rem",
816
767
  pageSelectorMarginRight: "30px",
817
768
  pageSelectorMarginLeft: "0px",
818
- totalItemsContainerMarginRight: "30px",
769
+ totalItemsContainerMarginRight: "3rem",
819
770
  totalItemsContainerMarginLeft: "0px"
820
771
  },
821
772
  progressBar: {
@@ -847,190 +798,161 @@ var componentTokens = {
847
798
  overlayColor: globalTokens.black,
848
799
  overlayOpacity: "0.8"
849
800
  },
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,
801
+ quickNav: {
802
+ fontColor: globalTokens.hal_grey_s_40,
803
+ hoverFontColor: globalTokens.hal_purple_d_70,
804
+ selectedFontColor: globalTokens.hal_purple_s_38,
805
+ dividerBorderColor: globalTokens.hal_grey_l_75,
806
+ focusBorderColor: globalTokens.hal_blue_l_50,
807
+ focusBorderStyle: globalTokens.border_solid,
808
+ focusBorderThickness: globalTokens.border_width_2,
809
+ focusBorderRadius: globalTokens.border_width_2,
810
+ paddingTop: globalTokens.spacing_03,
811
+ paddingBottom: globalTokens.spacing_03,
812
+ paddingLeft: globalTokens.spacing_05,
813
+ paddingRight: globalTokens.spacing_05,
863
814
  fontFamily: globalTokens.type_sans,
864
- fontSize: globalTokens.type_scale_root,
815
+ fontSize: globalTokens.type_scale_02,
865
816
  fontStyle: globalTokens.type_normal,
866
817
  fontWeight: globalTokens.type_regular
867
818
  },
868
- select: {
819
+ radioGroup: {
869
820
  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,
821
+ radioInputColor: globalTokens.hal_blue_l_45,
822
+ hoverRadioInputColor: globalTokens.hal_blue_s_35,
823
+ focusBorderColor: globalTokens.hal_blue_l_50,
824
+ activeRadioInputColor: globalTokens.hal_blue_d_20,
825
+ errorRadioInputColor: globalTokens.hal_red_s_41,
826
+ hoverErrorRadioInputColor: globalTokens.hal_red_d_30,
827
+ activeErrorRadioInputColor: globalTokens.hal_red_d_20,
828
+ readonlyRadioInputColor: globalTokens.hal_grey_l_60,
829
+ hoverReadonlyRadioInputColor: globalTokens.color_grey_600,
830
+ activeReadonlyRadioInputColor: globalTokens.hal_grey_s_40,
831
+ disabledRadioInputColor: globalTokens.hal_grey_l_60,
832
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
833
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
834
+ disabledRadioInputLabelFontColor: globalTokens.hal_grey_l_60,
835
+ errorMessageColor: globalTokens.hal_red_s_41,
875
836
  labelFontColor: globalTokens.hal_black,
876
- labelFontColorOnDark: globalTokens.hal_white,
877
- labelFontSize: globalTokens.type_scale_03,
837
+ labelFontSize: globalTokens.type_scale_02,
878
838
  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
839
+ labelFontWeight: globalTokens.type_semibold,
840
+ labelLineHeight: globalTokens.type_leading_loose_01,
841
+ optionalLabelFontWeight: globalTokens.type_regular,
842
+ helperTextFontColor: globalTokens.hal_black,
843
+ helperTextFontSize: globalTokens.type_scale_01,
844
+ helperTextFontStyle: globalTokens.type_normal,
845
+ helperTextFontWeight: globalTokens.type_regular,
846
+ helperTextLineHeight: globalTokens.type_leading_normal,
847
+ radioInputLabelFontColor: globalTokens.hal_black,
848
+ radioInputLabelFontSize: globalTokens.type_scale_02,
849
+ radioInputLabelFontStyle: globalTokens.type_normal,
850
+ radioInputLabelFontWeight: globalTokens.type_regular,
851
+ radioInputLabelLineHeight: globalTokens.type_leading_loose_01,
852
+ groupLabelMargin: globalTokens.spacing_03,
853
+ radioInputLabelMargin: globalTokens.spacing_03,
854
+ groupVerticalGutter: globalTokens.spacing_02,
855
+ groupHorizontalGutter: globalTokens.spacing_07
926
856
  },
927
- newSelect: {
857
+ select: {
928
858
  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",
859
+ disabledColor: globalTokens.hal_grey_l_60,
860
+ enabledInputBorderColor: globalTokens.hal_black,
861
+ hoverInputBorderColor: globalTokens.hal_purple_l_65,
862
+ focusInputBorderColor: globalTokens.hal_blue_l_50,
863
+ errorInputBorderColor: globalTokens.hal_red_s_41,
864
+ hoverInputErrorBorderColor: globalTokens.color_red_600,
865
+ disabledInputBorderColor: globalTokens.hal_grey_l_60,
866
+ disabledInputBackgroundColor: globalTokens.hal_grey_l_95,
867
+ inputMarginTop: globalTokens.spacing_02,
868
+ inputMarginBottom: globalTokens.spacing_02,
943
869
  errorMessageColor: globalTokens.hal_red_s_41,
944
- errorMessageColorOnDark: globalTokens.hal_red_l_60,
945
870
  errorIconColor: globalTokens.hal_red_s_41,
946
- errorIconColorOnDark: globalTokens.hal_red_l_60,
947
871
  labelFontColor: globalTokens.hal_black,
948
- labelFontColorOnDark: globalTokens.hal_white,
949
872
  labelFontSize: globalTokens.type_scale_02,
950
873
  labelFontStyle: globalTokens.type_normal,
951
874
  labelFontWeight: globalTokens.type_semibold,
952
- disabledLabelFontColor: globalTokens.hal_grey_l_60,
953
- disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
875
+ labelLineHeight: globalTokens.type_leading_loose_01,
954
876
  optionalLabelFontWeight: globalTokens.type_regular,
955
877
  helperTextFontColor: globalTokens.hal_black,
956
- helperTextFontColorOnDark: globalTokens.hal_white,
957
878
  helperTextFontSize: globalTokens.type_scale_01,
958
879
  helperTextFontStyle: globalTokens.type_normal,
959
880
  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,
881
+ helperTextLineHeight: globalTokens.type_leading_normal,
882
+ placeholderFontColor: "#000000b3",
966
883
  valueFontColor: globalTokens.hal_black,
967
- valueFontColorOnDark: globalTokens.hal_white,
968
884
  valueFontSize: globalTokens.type_scale_03,
969
885
  valueFontStyle: globalTokens.type_normal,
970
886
  valueFontWeight: globalTokens.type_regular,
971
- disabledValueFontColor: globalTokens.hal_grey_l_60,
972
- disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
973
887
  actionIconColor: globalTokens.hal_black,
974
- actionIconColorOnDark: globalTokens.hal_white,
975
- disabledActionIconColor: globalTokens.hal_grey_l_60,
976
- disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
977
888
  hoverActionIconColor: globalTokens.hal_black,
978
- hoverActionIconColorOnDark: globalTokens.hal_white,
979
- focusActionIconColor: globalTokens.hal_black,
980
- focusActionIconColorOnDark: globalTokens.hal_white,
981
889
  activeActionIconColor: globalTokens.hal_black,
982
- activeActionIconColorOnDark: globalTokens.hal_black,
983
890
  actionBackgroundColor: globalTokens.transparent,
984
- actionBackgroundColorOnDark: globalTokens.transparent,
985
- disabledActionBackgroundColor: globalTokens.transparent,
986
- disabledActionBackgroundColorOnDark: globalTokens.transparent,
987
891
  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
892
  activeActionBackgroundColor: globalTokens.hal_grey_l_80,
992
- activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
993
893
  listOptionFontColor: globalTokens.hal_black,
994
894
  listOptionFontSize: globalTokens.type_scale_02,
995
895
  listOptionFontStyle: globalTokens.type_normal,
996
896
  listOptionFontWeight: globalTokens.type_regular,
897
+ listOptionIconColor: globalTokens.hal_black,
898
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
899
+ listGroupLabelFontWeight: globalTokens.type_semibold,
900
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50,
997
901
  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
902
+ collapseIndicatorColor: globalTokens.hal_black,
903
+ listDialogBackgroundColor: globalTokens.hal_white,
904
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
905
+ selectedListOptionBackgroundColor: globalTokens.hal_blue_l_95,
906
+ selectedHoverListOptionBackgroundColor: globalTokens.color_blue_200,
907
+ selectedActiveListOptionBackgroundColor: globalTokens.hal_blue_l_80,
908
+ selectedListOptionIconColor: globalTokens.hal_blue_d_20,
909
+ unselectedHoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
910
+ unselectedActiveListOptionBackgroundColor: globalTokens.hal_grey_l_90,
911
+ selectionIndicatorFontColor: globalTokens.hal_black,
912
+ selectionIndicatorFontSize: globalTokens.type_scale_01,
913
+ selectionIndicatorFontStyle: globalTokens.type_regular,
914
+ selectionIndicatorFontWeight: globalTokens.type_normal,
915
+ selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
916
+ selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
917
+ enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
918
+ enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
919
+ hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
920
+ hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
921
+ activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
922
+ activeSelectionIndicatorActionIconColor: globalTokens.hal_black
1010
923
  },
1011
924
  sidenav: {
1012
925
  backgroundColor: globalTokens.hal_grey_l_95,
1013
926
  arrowContainerColor: globalTokens.hal_grey_l_90,
1014
927
  arrowColor: globalTokens.hal_black,
1015
928
  titleFontFamily: globalTokens.type_sans,
1016
- titleFontSize: globalTokens.type_scale_05,
929
+ titleFontSize: globalTokens.type_scale_04,
1017
930
  titleFontStyle: globalTokens.type_normal,
1018
- titleFontWeight: globalTokens.type_regular,
1019
- titleFontColor: globalTokens.hal_black,
931
+ titleFontWeight: globalTokens.type_semibold,
932
+ titleFontColor: globalTokens.color_grey_800,
1020
933
  titleFontTextTransform: "none",
1021
934
  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,
935
+ groupTitleFontFamily: globalTokens.type_sans,
936
+ groupTitleFontSize: globalTokens.type_scale_02,
937
+ groupTitleFontStyle: globalTokens.type_normal,
938
+ groupTitleFontWeight: globalTokens.type_semibold,
939
+ groupTitleFontColor: globalTokens.color_grey_800,
940
+ groupTitleHoverBackgroundColor: globalTokens.hal_grey_l_90,
941
+ groupTitleActiveBackgroundColor: globalTokens.hal_grey_l_80,
942
+ groupTitleSelectedFontColor: globalTokens.white,
943
+ groupTitleSelectedBackgroundColor: globalTokens.white,
944
+ groupTitleFontTextTransform: globalTokens.type_uppercase,
945
+ groupTitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
1029
946
  linkFontFamily: globalTokens.type_sans,
1030
947
  linkFontSize: globalTokens.type_scale_02,
1031
948
  linkFontStyle: globalTokens.type_normal,
1032
949
  linkFontWeight: globalTokens.type_regular,
1033
950
  linkFontColor: globalTokens.color_grey_800,
951
+ linkHoverBackgroundColor: globalTokens.hal_grey_l_90,
952
+ linkSelectedFontColor: globalTokens.white,
953
+ linkSelectedBackgroundColor: globalTokens.color_grey_800,
954
+ linkSelectedHoverFontColor: globalTokens.white,
955
+ linkSelectedHoverBackgroundColor: globalTokens.color_grey_600,
1034
956
  linkFontTextTransform: "none",
1035
957
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
1036
958
  linkTextDecoration: globalTokens.type_no_line,
@@ -1044,9 +966,13 @@ var componentTokens = {
1044
966
  },
1045
967
  slider: {
1046
968
  fontFamily: globalTokens.type_sans,
1047
- fontSize: globalTokens.type_scale_03,
1048
- fontStyle: globalTokens.type_normal,
1049
- fontWeight: globalTokens.type_regular,
969
+ limitValuesFontColor: globalTokens.hal_black,
970
+ limitValuesFontColorOnDark: globalTokens.hal_white,
971
+ limitValuesFontSize: globalTokens.type_scale_03,
972
+ limitValuesFontStyle: globalTokens.type_normal,
973
+ limitValuesFontWeight: globalTokens.type_regular,
974
+ limitValuesFontLetterSpacing: globalTokens.type_spacing_normal,
975
+ disabledLimitValuesFontColor: globalTokens.hal_grey_l_60,
1050
976
  labelFontFamily: globalTokens.type_sans,
1051
977
  labelFontSize: globalTokens.type_scale_02,
1052
978
  labelFontStyle: globalTokens.type_normal,
@@ -1060,9 +986,13 @@ var componentTokens = {
1060
986
  fontColor: globalTokens.hal_black,
1061
987
  fontColorOnDark: globalTokens.hal_white,
1062
988
  labelFontColor: globalTokens.hal_black,
989
+ labelFontColorOnDark: globalTokens.hal_white,
1063
990
  helperTextFontColor: globalTokens.hal_black,
1064
- disabledFontColor: globalTokens.hal_grey_l_60,
1065
- fontLetterSpacing: globalTokens.type_spacing_normal,
991
+ helperTextFontColorOnDark: globalTokens.hal_white,
992
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
993
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
994
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
995
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1066
996
  thumbHeight: "12px",
1067
997
  thumbWidth: "12px",
1068
998
  hoverThumbHeight: "14px",
@@ -1110,7 +1040,7 @@ var componentTokens = {
1110
1040
  },
1111
1041
  spinner: {
1112
1042
  trackCircleColor: "#5f249f",
1113
- trackCircleColorOnDark: "#a46ede",
1043
+ trackCircleColorOverlay: "#a46ede",
1114
1044
  totalCircleColor: globalTokens.white,
1115
1045
  labelFontFamily: globalTokens.type_sans,
1116
1046
  labelFontSize: globalTokens.type_scale_02,
@@ -1144,30 +1074,30 @@ var componentTokens = {
1144
1074
  "switch": {
1145
1075
  checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1146
1076
  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,
1077
+ checkedThumbBackgroundColor: globalTokens.hal_white,
1078
+ checkedThumbBackgroundColorOnDark: globalTokens.hal_white,
1079
+ uncheckedTrackBackgroundColor: globalTokens.hal_grey_l_75,
1080
+ uncheckedTrackBackgroundColorOnDark: globalTokens.hal_grey_l_75,
1081
+ uncheckedThumbBackgroundColor: globalTokens.hal_white,
1082
+ uncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1083
+ disabledCheckedTrackBackgroundColor: globalTokens.hal_purple_l_95,
1154
1084
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
1155
- disabledCheckedThumbBackgroundColor: globalTokens.white,
1156
- disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
1157
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
1085
+ disabledCheckedThumbBackgroundColor: globalTokens.hal_white,
1086
+ disabledCheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1087
+ disabledUncheckedTrackBackgroundColor: globalTokens.hal_grey_l_95,
1158
1088
  disabledUncheckedTrackBackgroundColorOnDark: "#363636",
1159
- disabledUncheckedThumbBackgroundColor: globalTokens.white,
1160
- disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
1161
- disabledLabelFontColor: globalTokens.lighterBlack,
1089
+ disabledUncheckedThumbBackgroundColor: globalTokens.hal_white,
1090
+ disabledUncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1091
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1162
1092
  disabledLabelFontColorOnDark: "#575757",
1163
1093
  disabledLabelFontStyle: globalTokens.type_normal,
1164
1094
  labelFontFamily: globalTokens.type_sans,
1165
1095
  labelFontSize: globalTokens.type_scale_root,
1166
1096
  labelFontStyle: globalTokens.type_normal,
1167
1097
  labelFontWeight: globalTokens.type_regular,
1168
- labelFontColor: globalTokens.black,
1169
- labelFontColorOnDark: globalTokens.white,
1170
- thumbFocusColor: globalTokens.blue,
1098
+ labelFontColor: globalTokens.hal_black,
1099
+ labelFontColorOnDark: globalTokens.hal_white,
1100
+ thumbFocusColor: globalTokens.hal_blue_l_50,
1171
1101
  thumbFocusColorOnDark: "#1682FF",
1172
1102
  thumbHeight: "24px",
1173
1103
  thumbWidth: "24px",
@@ -1245,6 +1175,7 @@ var componentTokens = {
1245
1175
  disabledFontColor: "#999999",
1246
1176
  disabledIconColor: "#999999",
1247
1177
  disabledFontStyle: globalTokens.type_normal,
1178
+ disabledBadgeBackgroundColor: "#0000004D",
1248
1179
  hoverBackgroundColor: "#f2eafa",
1249
1180
  pressedBackgroundColor: "#e5d5f6",
1250
1181
  pressedFontWeight: globalTokens.type_semibold,
@@ -1280,8 +1211,10 @@ var componentTokens = {
1280
1211
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1281
1212
  errorBorderColor: globalTokens.hal_red_s_41,
1282
1213
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
1283
- hoverErrorBorderColor: "#fe0123",
1214
+ hoverErrorBorderColor: globalTokens.color_red_600,
1284
1215
  hoverErrorBorderColorOnDark: "#fe677b",
1216
+ inputMarginTop: globalTokens.spacing_02,
1217
+ inputMarginBottom: globalTokens.spacing_02,
1285
1218
  errorMessageColor: globalTokens.hal_red_s_41,
1286
1219
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
1287
1220
  labelFontColor: globalTokens.hal_black,
@@ -1301,7 +1234,7 @@ var componentTokens = {
1301
1234
  helperTextLineHeight: globalTokens.type_leading_normal,
1302
1235
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1303
1236
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1304
- placeholderFontColor: "#808080",
1237
+ placeholderFontColor: "#000000b3",
1305
1238
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1306
1239
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1307
1240
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -1361,156 +1294,65 @@ var componentTokens = {
1361
1294
  containerBorderRadius: globalTokens.border_radius_large,
1362
1295
  optionFocusBorderThickness: globalTokens.border_width_2
1363
1296
  },
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
1297
  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",
1298
+ visitedStepFontColor: globalTokens.hal_black,
1299
+ visitedStepBackgroundColor: globalTokens.hal_white,
1300
+ visitedStepBorderColor: globalTokens.hal_black,
1301
+ unvisitedStepFontColor: globalTokens.hal_grey_s_40,
1302
+ unvisitedLabelFontColor: globalTokens.hal_grey_s_40,
1303
+ unvisitedHelperTextFontColor: globalTokens.hal_grey_s_40,
1304
+ unvisitedStepBackgroundColor: globalTokens.transparent,
1305
+ unvisitedStepBorderColor: globalTokens.hal_grey_s_40,
1306
+ selectedStepFontColor: globalTokens.white,
1307
+ selectedStepBackgroundColor: globalTokens.hal_purple_s_38,
1308
+ selectedStepBorderColor: globalTokens.hal_purple_s_38,
1309
+ selectedLabelFontColor: globalTokens.hal_black,
1310
+ selectedHelperTextFontColor: globalTokens.hal_black,
1311
+ selectedStepWidth: "32px",
1312
+ selectedStepHeight: "32px",
1313
+ selectedStepBorderThickness: "2px",
1314
+ selectedStepBorderStyle: "solid",
1315
+ selectedStepBorderRadius: "45px",
1316
+ stepFontSize: globalTokens.type_scale_03,
1317
+ stepFontFamily: globalTokens.type_sans,
1318
+ stepFontStyle: globalTokens.type_normal,
1319
+ stepFontWeight: globalTokens.type_regular,
1320
+ stepFontTracking: globalTokens.type_spacing_wide_02,
1321
+ stepIconSize: "20px",
1322
+ stepWidth: "32px",
1323
+ stepHeight: "32px",
1324
+ stepBorderThickness: "2px",
1325
+ stepBorderStyle: "solid",
1326
+ stepBorderRadius: "45px",
1327
+ visitedLabelFontColor: globalTokens.hal_black,
1475
1328
  labelFontSize: globalTokens.type_scale_03,
1476
1329
  labelFontFamily: globalTokens.type_sans,
1477
1330
  labelFontStyle: globalTokens.type_normal,
1478
1331
  labelFontWeight: globalTokens.type_regular,
1479
- labelLetterSpacing: globalTokens.type_spacing_normal,
1332
+ labelFontTracking: globalTokens.type_spacing_normal,
1480
1333
  labelFontTextTransform: "none",
1481
1334
  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,
1335
+ helperTextFontSize: globalTokens.type_scale_02,
1336
+ helperTextFontFamily: globalTokens.type_sans,
1337
+ helperTextFontStyle: globalTokens.type_normal,
1338
+ helperTextFontWeight: globalTokens.type_regular,
1339
+ helperTextFontTracking: globalTokens.type_spacing_normal,
1340
+ helperTextFontTextTransform: "none",
1341
+ visitedHelperTextFontColor: globalTokens.hal_black,
1342
+ helperTextTextAlign: "left",
1343
+ disabledStepBackgroundColor: globalTokens.hal_grey_l_95,
1344
+ disabledStepFontColor: globalTokens.hal_grey_l_60,
1345
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1346
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1347
+ disabledStepBorderColor: globalTokens.hal_grey_l_95,
1348
+ disabledStepWidth: "32px",
1349
+ disabledStepHeight: "32px",
1350
+ disabledStepBorderThickness: "2px",
1351
+ disabledStepBorderStyle: "solid",
1352
+ disabledStepBorderRadius: "45px",
1511
1353
  separatorBorderThickness: "1px",
1512
1354
  separatorBorderStyle: "solid",
1513
- separatorColor: globalTokens.lightGrey,
1355
+ separatorColor: globalTokens.hal_grey_s_40,
1514
1356
  focusColor: globalTokens.hal_blue_l_50
1515
1357
  }
1516
1358
  };
@@ -1526,12 +1368,11 @@ var spaces = {
1526
1368
  };
1527
1369
  exports.spaces = spaces;
1528
1370
  var responsiveSizes = {
1529
- mobileSmall: "320",
1530
- mobileMedium: "375",
1531
- mobileLarge: "425",
1532
- tablet: "768",
1533
- laptop: "1024",
1534
- desktop: "1440"
1371
+ xsmall: "20",
1372
+ small: "30",
1373
+ medium: "45",
1374
+ large: "66",
1375
+ xlarge: "90"
1535
1376
  };
1536
1377
  exports.responsiveSizes = responsiveSizes;
1537
1378
  var typeface = {
@@ -1566,4 +1407,89 @@ var typeface = {
1566
1407
  textTransform: "uppercase"
1567
1408
  }
1568
1409
  };
1569
- exports.typeface = typeface;
1410
+ exports.typeface = typeface;
1411
+ var defaultTranslatedComponentLabels = {
1412
+ formFields: {
1413
+ optionalLabel: "(Optional)",
1414
+ requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
1415
+ requiredValueErrorMessage: "This field is required. Please, enter a value.",
1416
+ formatRequestedErrorMessage: "Please match the format requested.",
1417
+ lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
1418
+ return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
1419
+ },
1420
+ logoAlternativeText: "Logo"
1421
+ },
1422
+ alert: {
1423
+ infoTitleText: "information",
1424
+ successTitleText: "success",
1425
+ warningTitleText: "warning",
1426
+ errorTitleText: "error"
1427
+ },
1428
+ dateInput: {
1429
+ invalidDateErrorMessage: "Invalid date."
1430
+ },
1431
+ fileInput: {
1432
+ fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1433
+ fileSizeLessThanErrorMessage: "File size must be less than max size.",
1434
+ multipleButtonLabelDefault: "Select files",
1435
+ singleButtonLabelDefault: "Select file",
1436
+ dropAreaButtonLabelDefault: "Select",
1437
+ multipleDropAreaLabelDefault: "or drop files",
1438
+ singleDropAreaLabelDefault: "or drop a file"
1439
+ },
1440
+ footer: {
1441
+ copyrightText: function copyrightText(year) {
1442
+ return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
1443
+ }
1444
+ },
1445
+ numberInput: {
1446
+ valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
1447
+ return "Value must be greater than or equal to ".concat(value, ".");
1448
+ },
1449
+ valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
1450
+ return "Value must be less than or equal to ".concat(value, ".");
1451
+ },
1452
+ decrementValueTitle: "Decrement value",
1453
+ incrementValueTitle: "Increment value"
1454
+ },
1455
+ paginator: {
1456
+ itemsPerPageText: "Items per page ",
1457
+ minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
1458
+ return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
1459
+ },
1460
+ goToPageText: "Go to page:",
1461
+ pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
1462
+ return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
1463
+ }
1464
+ },
1465
+ passwordInput: {
1466
+ inputShowPasswordTitle: "Show password",
1467
+ inputHidePasswordTitle: "Hide password"
1468
+ },
1469
+ quickNav: {
1470
+ contentTitle: "Contents"
1471
+ },
1472
+ radioGroup: {
1473
+ optionalItemLabelDefault: "N/A"
1474
+ },
1475
+ select: {
1476
+ noMatchesErrorMessage: "No matches found",
1477
+ actionClearSelectionTitle: "Clear selection",
1478
+ actionClearSearchTitle: "Clear search"
1479
+ },
1480
+ textInput: {
1481
+ clearFieldActionTitle: "Clear field",
1482
+ searchingMessage: "Searching...",
1483
+ fetchingDataErrorMessage: "Error fetching data"
1484
+ },
1485
+ calendar: {
1486
+ days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1487
+ daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
1488
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1489
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
1490
+ },
1491
+ applicationLayout: {
1492
+ visibilityToggleTitle: "Toggle visibility sidenav"
1493
+ }
1494
+ };
1495
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;