@dxc-technology/halstack-react 0.0.0-b3de035 → 0.0.0-b41d935

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 (447) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/HalstackContext.d.ts +12 -0
  4. package/HalstackContext.js +295 -0
  5. package/accordion/Accordion.d.ts +4 -0
  6. package/accordion/Accordion.js +245 -0
  7. package/accordion/Accordion.stories.tsx +306 -0
  8. package/accordion/Accordion.test.js +71 -0
  9. package/accordion/types.d.ts +69 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +149 -0
  13. package/accordion-group/AccordionGroup.stories.tsx +251 -0
  14. package/accordion-group/AccordionGroup.test.js +126 -0
  15. package/accordion-group/types.d.ts +79 -0
  16. package/accordion-group/types.js +5 -0
  17. package/alert/Alert.d.ts +4 -0
  18. package/{dist/alert → alert}/Alert.js +44 -154
  19. package/alert/Alert.stories.tsx +170 -0
  20. package/alert/Alert.test.js +92 -0
  21. package/alert/types.d.ts +49 -0
  22. package/alert/types.js +5 -0
  23. package/badge/Badge.d.ts +4 -0
  24. package/badge/Badge.js +61 -0
  25. package/badge/types.d.ts +5 -0
  26. package/badge/types.js +5 -0
  27. package/bleed/Bleed.d.ts +3 -0
  28. package/bleed/Bleed.js +51 -0
  29. package/bleed/Bleed.stories.tsx +341 -0
  30. package/bleed/types.d.ts +37 -0
  31. package/bleed/types.js +5 -0
  32. package/box/Box.d.ts +4 -0
  33. package/box/Box.js +116 -0
  34. package/box/Box.stories.tsx +132 -0
  35. package/box/Box.test.js +18 -0
  36. package/box/types.d.ts +44 -0
  37. package/box/types.js +5 -0
  38. package/bulleted-list/BulletedList.d.ts +7 -0
  39. package/bulleted-list/BulletedList.js +123 -0
  40. package/bulleted-list/BulletedList.stories.tsx +200 -0
  41. package/bulleted-list/types.d.ts +11 -0
  42. package/bulleted-list/types.js +5 -0
  43. package/button/Button.d.ts +4 -0
  44. package/button/Button.js +156 -0
  45. package/button/Button.stories.tsx +283 -0
  46. package/button/Button.test.js +35 -0
  47. package/button/types.d.ts +53 -0
  48. package/button/types.js +5 -0
  49. package/card/Card.d.ts +4 -0
  50. package/card/Card.js +161 -0
  51. package/card/Card.stories.tsx +201 -0
  52. package/card/Card.test.js +50 -0
  53. package/card/ice-cream.jpg +0 -0
  54. package/card/types.d.ts +68 -0
  55. package/card/types.js +5 -0
  56. package/checkbox/Checkbox.d.ts +4 -0
  57. package/checkbox/Checkbox.js +249 -0
  58. package/checkbox/Checkbox.stories.tsx +208 -0
  59. package/checkbox/Checkbox.test.js +155 -0
  60. package/checkbox/types.d.ts +64 -0
  61. package/checkbox/types.js +5 -0
  62. package/chip/Chip.d.ts +4 -0
  63. package/chip/Chip.js +161 -0
  64. package/chip/Chip.stories.tsx +119 -0
  65. package/chip/Chip.test.js +56 -0
  66. package/chip/types.d.ts +45 -0
  67. package/chip/types.js +5 -0
  68. package/{dist/common → common}/OpenSans.css +0 -0
  69. package/{dist/common → common}/RequiredComponent.js +3 -11
  70. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  71. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  72. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  73. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  74. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  75. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  76. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  77. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  78. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  79. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  80. package/{dist/common → common}/utils.js +0 -0
  81. package/{dist/common → common}/variables.js +357 -422
  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 +267 -0
  91. package/dialog/Dialog.test.js +70 -0
  92. package/dialog/types.d.ts +44 -0
  93. package/dialog/types.js +5 -0
  94. package/dropdown/Dropdown.d.ts +4 -0
  95. package/dropdown/Dropdown.js +388 -0
  96. package/dropdown/Dropdown.stories.tsx +312 -0
  97. package/dropdown/Dropdown.test.js +590 -0
  98. package/dropdown/DropdownMenu.d.ts +4 -0
  99. package/dropdown/DropdownMenu.js +80 -0
  100. package/dropdown/DropdownMenuItem.d.ts +4 -0
  101. package/dropdown/DropdownMenuItem.js +92 -0
  102. package/dropdown/types.d.ts +100 -0
  103. package/dropdown/types.js +5 -0
  104. package/file-input/FileInput.d.ts +4 -0
  105. package/file-input/FileInput.js +548 -0
  106. package/file-input/FileInput.stories.tsx +535 -0
  107. package/file-input/FileInput.test.js +498 -0
  108. package/file-input/FileItem.d.ts +4 -0
  109. package/file-input/FileItem.js +161 -0
  110. package/file-input/types.d.ts +125 -0
  111. package/file-input/types.js +5 -0
  112. package/flex/Flex.d.ts +4 -0
  113. package/flex/Flex.js +69 -0
  114. package/flex/Flex.stories.tsx +103 -0
  115. package/flex/types.d.ts +32 -0
  116. package/flex/types.js +5 -0
  117. package/footer/Footer.d.ts +4 -0
  118. package/footer/Footer.js +185 -0
  119. package/footer/Footer.stories.tsx +137 -0
  120. package/footer/Footer.test.js +109 -0
  121. package/footer/Icons.d.ts +2 -0
  122. package/{dist/footer → footer}/Icons.js +16 -16
  123. package/footer/types.d.ts +66 -0
  124. package/footer/types.js +5 -0
  125. package/header/Header.d.ts +7 -0
  126. package/header/Header.js +305 -0
  127. package/header/Header.stories.tsx +172 -0
  128. package/header/Header.test.js +79 -0
  129. package/header/Icons.d.ts +2 -0
  130. package/{dist/header → header}/Icons.js +9 -34
  131. package/header/types.d.ts +48 -0
  132. package/header/types.js +5 -0
  133. package/heading/Heading.d.ts +4 -0
  134. package/{dist/heading → heading}/Heading.js +25 -96
  135. package/heading/Heading.stories.tsx +54 -0
  136. package/heading/Heading.test.js +186 -0
  137. package/heading/types.d.ts +33 -0
  138. package/heading/types.js +5 -0
  139. package/inset/Inset.d.ts +3 -0
  140. package/inset/Inset.js +51 -0
  141. package/inset/Inset.stories.tsx +229 -0
  142. package/inset/types.d.ts +37 -0
  143. package/inset/types.js +5 -0
  144. package/layout/ApplicationLayout.d.ts +20 -0
  145. package/layout/ApplicationLayout.js +171 -0
  146. package/layout/ApplicationLayout.stories.tsx +162 -0
  147. package/layout/Icons.d.ts +5 -0
  148. package/{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} +114 -104
  161. package/number-input/NumberInput.d.ts +4 -0
  162. package/number-input/NumberInput.js +76 -0
  163. package/number-input/NumberInput.stories.tsx +115 -0
  164. package/number-input/NumberInput.test.js +543 -0
  165. package/number-input/NumberInputContext.d.ts +4 -0
  166. package/{dist/number-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 -25
  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 +40 -77
  184. package/password-input/PasswordInput.stories.tsx +131 -0
  185. package/password-input/PasswordInput.test.js +181 -0
  186. package/password-input/types.d.ts +110 -0
  187. package/password-input/types.js +5 -0
  188. package/progress-bar/ProgressBar.d.ts +4 -0
  189. package/progress-bar/ProgressBar.js +176 -0
  190. package/progress-bar/ProgressBar.stories.jsx +60 -0
  191. package/progress-bar/ProgressBar.test.js +110 -0
  192. package/progress-bar/types.d.ts +36 -0
  193. package/progress-bar/types.js +5 -0
  194. package/quick-nav/QuickNav.d.ts +4 -0
  195. package/quick-nav/QuickNav.js +117 -0
  196. package/quick-nav/QuickNav.stories.tsx +342 -0
  197. package/quick-nav/types.d.ts +21 -0
  198. package/quick-nav/types.js +5 -0
  199. package/radio-group/Radio.d.ts +4 -0
  200. package/radio-group/Radio.js +156 -0
  201. package/radio-group/RadioGroup.d.ts +4 -0
  202. package/radio-group/RadioGroup.js +283 -0
  203. package/radio-group/RadioGroup.stories.tsx +101 -0
  204. package/radio-group/RadioGroup.test.js +722 -0
  205. package/radio-group/types.d.ts +114 -0
  206. package/radio-group/types.js +5 -0
  207. package/resultsetTable/ResultsetTable.d.ts +4 -0
  208. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +43 -149
  209. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  210. package/resultsetTable/ResultsetTable.test.js +348 -0
  211. package/resultsetTable/types.d.ts +67 -0
  212. package/resultsetTable/types.js +5 -0
  213. package/select/Icons.d.ts +10 -0
  214. package/select/Icons.js +93 -0
  215. package/select/Listbox.d.ts +4 -0
  216. package/select/Listbox.js +198 -0
  217. package/select/Option.d.ts +4 -0
  218. package/select/Option.js +110 -0
  219. package/select/Select.d.ts +4 -0
  220. package/select/Select.js +645 -0
  221. package/select/Select.stories.tsx +627 -0
  222. package/select/Select.test.js +2233 -0
  223. package/select/types.d.ts +210 -0
  224. package/select/types.js +5 -0
  225. package/sidenav/Sidenav.d.ts +10 -0
  226. package/sidenav/Sidenav.js +268 -0
  227. package/sidenav/Sidenav.stories.tsx +180 -0
  228. package/sidenav/Sidenav.test.js +44 -0
  229. package/sidenav/types.d.ts +73 -0
  230. package/sidenav/types.js +5 -0
  231. package/slider/Slider.d.ts +4 -0
  232. package/slider/Slider.js +342 -0
  233. package/slider/Slider.stories.tsx +183 -0
  234. package/slider/Slider.test.js +250 -0
  235. package/slider/types.d.ts +82 -0
  236. package/slider/types.js +5 -0
  237. package/spinner/Spinner.d.ts +4 -0
  238. package/spinner/Spinner.js +250 -0
  239. package/spinner/Spinner.stories.jsx +103 -0
  240. package/spinner/Spinner.test.js +64 -0
  241. package/spinner/types.d.ts +32 -0
  242. package/spinner/types.js +5 -0
  243. package/switch/Switch.d.ts +4 -0
  244. package/switch/Switch.js +261 -0
  245. package/switch/Switch.stories.tsx +138 -0
  246. package/switch/Switch.test.js +225 -0
  247. package/switch/types.d.ts +61 -0
  248. package/switch/types.js +5 -0
  249. package/table/Table.d.ts +4 -0
  250. package/{dist/table → table}/Table.js +12 -26
  251. package/table/Table.stories.jsx +277 -0
  252. package/table/Table.test.js +26 -0
  253. package/table/types.d.ts +21 -0
  254. package/table/types.js +5 -0
  255. package/tabs/Tab.d.ts +4 -0
  256. package/tabs/Tab.js +135 -0
  257. package/tabs/Tabs.d.ts +4 -0
  258. package/tabs/Tabs.js +467 -0
  259. package/tabs/Tabs.stories.tsx +186 -0
  260. package/tabs/Tabs.test.js +351 -0
  261. package/tabs/types.d.ts +92 -0
  262. package/tabs/types.js +5 -0
  263. package/tabs-nav/NavTabs.d.ts +8 -0
  264. package/tabs-nav/NavTabs.js +125 -0
  265. package/tabs-nav/NavTabs.stories.tsx +170 -0
  266. package/tabs-nav/NavTabs.test.js +82 -0
  267. package/tabs-nav/Tab.d.ts +4 -0
  268. package/tabs-nav/Tab.js +130 -0
  269. package/tabs-nav/types.d.ts +53 -0
  270. package/tabs-nav/types.js +5 -0
  271. package/tag/Tag.d.ts +4 -0
  272. package/tag/Tag.js +183 -0
  273. package/tag/Tag.stories.tsx +142 -0
  274. package/tag/Tag.test.js +60 -0
  275. package/tag/types.d.ts +69 -0
  276. package/tag/types.js +5 -0
  277. package/text-input/Icons.d.ts +8 -0
  278. package/text-input/Icons.js +60 -0
  279. package/text-input/Suggestion.d.ts +4 -0
  280. package/text-input/Suggestion.js +57 -0
  281. package/text-input/Suggestions.d.ts +4 -0
  282. package/text-input/Suggestions.js +134 -0
  283. package/text-input/TextInput.d.ts +4 -0
  284. package/text-input/TextInput.js +677 -0
  285. package/text-input/TextInput.stories.tsx +481 -0
  286. package/text-input/TextInput.test.js +1771 -0
  287. package/text-input/types.d.ts +197 -0
  288. package/text-input/types.js +5 -0
  289. package/textarea/Textarea.d.ts +4 -0
  290. package/{dist/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 +285 -0
  312. package/wizard/Wizard.stories.tsx +233 -0
  313. package/wizard/Wizard.test.js +141 -0
  314. package/wizard/types.d.ts +65 -0
  315. package/wizard/types.js +5 -0
  316. package/README.md +0 -66
  317. package/babel.config.js +0 -8
  318. package/dist/BackgroundColorContext.js +0 -46
  319. package/dist/ThemeContext.js +0 -250
  320. package/dist/V3Select/V3Select.js +0 -549
  321. package/dist/V3Select/index.d.ts +0 -27
  322. package/dist/V3Textarea/V3Textarea.js +0 -264
  323. package/dist/V3Textarea/index.d.ts +0 -27
  324. package/dist/accordion/Accordion.js +0 -353
  325. package/dist/accordion/index.d.ts +0 -28
  326. package/dist/accordion-group/AccordionGroup.js +0 -186
  327. package/dist/accordion-group/index.d.ts +0 -16
  328. package/dist/alert/index.d.ts +0 -51
  329. package/dist/badge/Badge.js +0 -63
  330. package/dist/box/Box.js +0 -156
  331. package/dist/box/index.d.ts +0 -25
  332. package/dist/button/Button.js +0 -238
  333. package/dist/button/index.d.ts +0 -24
  334. package/dist/card/Card.js +0 -254
  335. package/dist/card/index.d.ts +0 -22
  336. package/dist/checkbox/Checkbox.js +0 -299
  337. package/dist/checkbox/index.d.ts +0 -24
  338. package/dist/chip/Chip.js +0 -265
  339. package/dist/chip/index.d.ts +0 -22
  340. package/dist/date/Date.js +0 -379
  341. package/dist/date/index.d.ts +0 -27
  342. package/dist/date-input/index.d.ts +0 -95
  343. package/dist/dialog/Dialog.js +0 -218
  344. package/dist/dialog/index.d.ts +0 -18
  345. package/dist/dropdown/Dropdown.js +0 -544
  346. package/dist/dropdown/index.d.ts +0 -26
  347. package/dist/file-input/FileInput.js +0 -644
  348. package/dist/file-input/FileItem.js +0 -287
  349. package/dist/file-input/index.d.ts +0 -81
  350. package/dist/footer/Footer.js +0 -421
  351. package/dist/footer/index.d.ts +0 -25
  352. package/dist/header/Header.js +0 -470
  353. package/dist/header/index.d.ts +0 -25
  354. package/dist/heading/index.d.ts +0 -17
  355. package/dist/input-text/Icons.js +0 -22
  356. package/dist/input-text/InputText.js +0 -705
  357. package/dist/input-text/index.d.ts +0 -36
  358. package/dist/layout/ApplicationLayout.js +0 -327
  359. package/dist/link/Link.js +0 -237
  360. package/dist/link/index.d.ts +0 -23
  361. package/dist/main.d.ts +0 -40
  362. package/dist/number-input/NumberInput.js +0 -136
  363. package/dist/number-input/index.d.ts +0 -113
  364. package/dist/paginator/Paginator.js +0 -283
  365. package/dist/paginator/index.d.ts +0 -20
  366. package/dist/password-input/index.d.ts +0 -94
  367. package/dist/progress-bar/ProgressBar.js +0 -242
  368. package/dist/progress-bar/index.d.ts +0 -18
  369. package/dist/radio/Radio.js +0 -209
  370. package/dist/radio/index.d.ts +0 -23
  371. package/dist/resultsetTable/index.d.ts +0 -19
  372. package/dist/select/Select.js +0 -1069
  373. package/dist/select/index.d.ts +0 -53
  374. package/dist/sidenav/Sidenav.js +0 -179
  375. package/dist/sidenav/index.d.ts +0 -13
  376. package/dist/slider/Slider.js +0 -404
  377. package/dist/slider/index.d.ts +0 -29
  378. package/dist/spinner/Spinner.js +0 -381
  379. package/dist/spinner/index.d.ts +0 -17
  380. package/dist/switch/Switch.js +0 -222
  381. package/dist/switch/index.d.ts +0 -24
  382. package/dist/table/index.d.ts +0 -13
  383. package/dist/tabs/Tabs.js +0 -343
  384. package/dist/tabs/index.d.ts +0 -19
  385. package/dist/tag/Tag.js +0 -282
  386. package/dist/tag/index.d.ts +0 -24
  387. package/dist/text-input/TextInput.js +0 -974
  388. package/dist/text-input/index.d.ts +0 -135
  389. package/dist/textarea/index.d.ts +0 -117
  390. package/dist/toggle/Toggle.js +0 -220
  391. package/dist/toggle/index.d.ts +0 -21
  392. package/dist/toggle-group/index.d.ts +0 -21
  393. package/dist/upload/Upload.js +0 -205
  394. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  395. package/dist/upload/buttons-upload/Icons.js +0 -40
  396. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  397. package/dist/upload/dragAndDropArea/Icons.js +0 -39
  398. package/dist/upload/file-upload/FileToUpload.js +0 -189
  399. package/dist/upload/file-upload/Icons.js +0 -66
  400. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  401. package/dist/upload/index.d.ts +0 -15
  402. package/dist/upload/transaction/Icons.js +0 -160
  403. package/dist/upload/transaction/Transaction.js +0 -148
  404. package/dist/upload/transactions/Transactions.js +0 -138
  405. package/dist/wizard/Icons.js +0 -65
  406. package/dist/wizard/Wizard.js +0 -405
  407. package/dist/wizard/index.d.ts +0 -18
  408. package/test/Accordion.test.js +0 -33
  409. package/test/AccordionGroup.test.js +0 -125
  410. package/test/Alert.test.js +0 -53
  411. package/test/Box.test.js +0 -10
  412. package/test/Button.test.js +0 -18
  413. package/test/Card.test.js +0 -30
  414. package/test/Checkbox.test.js +0 -45
  415. package/test/Chip.test.js +0 -25
  416. package/test/Date.test.js +0 -395
  417. package/test/DateInput.test.js +0 -242
  418. package/test/Dialog.test.js +0 -23
  419. package/test/Dropdown.test.js +0 -145
  420. package/test/FileInput.test.js +0 -201
  421. package/test/Footer.test.js +0 -94
  422. package/test/Header.test.js +0 -34
  423. package/test/Heading.test.js +0 -83
  424. package/test/InputText.test.js +0 -248
  425. package/test/Link.test.js +0 -43
  426. package/test/NumberInput.test.js +0 -259
  427. package/test/Paginator.test.js +0 -177
  428. package/test/PasswordInput.test.js +0 -83
  429. package/test/ProgressBar.test.js +0 -35
  430. package/test/Radio.test.js +0 -37
  431. package/test/ResultsetTable.test.js +0 -329
  432. package/test/Sidenav.test.js +0 -45
  433. package/test/Slider.test.js +0 -74
  434. package/test/Spinner.test.js +0 -32
  435. package/test/Switch.test.js +0 -45
  436. package/test/Table.test.js +0 -36
  437. package/test/Tabs.test.js +0 -109
  438. package/test/Tag.test.js +0 -32
  439. package/test/TextInput.test.js +0 -732
  440. package/test/Textarea.test.js +0 -193
  441. package/test/ToggleGroup.test.js +0 -85
  442. package/test/Upload.test.js +0 -60
  443. package/test/V3Select.test.js +0 -212
  444. package/test/V3TextArea.test.js +0 -51
  445. package/test/Wizard.test.js +0 -130
  446. package/test/mocks/pngMock.js +0 -1
  447. 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",
@@ -99,7 +95,7 @@ var globalTokens = {
99
95
  type_sans: "Open Sans, sans-serif",
100
96
  type_scale_root: "16px",
101
97
  type_scale_08: "3.75rem",
102
- type_scale_07: "3rem",
98
+ type_scale_07: "2.5rem",
103
99
  type_scale_06: "2rem",
104
100
  type_scale_05: "1.5rem",
105
101
  type_scale_04: "1.25rem",
@@ -114,7 +110,7 @@ var globalTokens = {
114
110
  type_normal: "normal",
115
111
  type_spacing_tight_02: "-0.05em",
116
112
  type_spacing_tight_01: "-0.025em",
117
- type_spacing_normal: "0",
113
+ type_spacing_normal: "0em",
118
114
  type_spacing_wide_01: "0.025em",
119
115
  type_spacing_wide_02: "0.05em",
120
116
  type_spacing_wide_03: "0.1em",
@@ -164,7 +160,6 @@ exports.globalTokens = globalTokens;
164
160
  var componentTokens = {
165
161
  accordion: {
166
162
  backgroundColor: globalTokens.hal_white,
167
- disabledBackgroundColor: globalTokens.transparent,
168
163
  hoverBackgroundColor: globalTokens.hal_purple_l_95,
169
164
  arrowColor: globalTokens.hal_purple_s_38,
170
165
  disabledArrowColor: globalTokens.hal_grey_l_60,
@@ -184,13 +179,13 @@ var componentTokens = {
184
179
  titleLabelFontStyle: globalTokens.type_normal,
185
180
  titleLabelFontColor: globalTokens.hal_black,
186
181
  disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
187
- titleLabelPaddingLeft: "0px",
188
- titleLabelPaddingRight: "16px",
189
182
  titleLabelPaddingTop: "0px",
190
183
  titleLabelPaddingBottom: "0px",
184
+ titleLabelPaddingLeft: "0px",
185
+ titleLabelPaddingRight: "16px",
186
+ focusBorderColor: globalTokens.hal_blue_l_50,
191
187
  focusBorderStyle: "solid",
192
188
  focusBorderThickness: "2px",
193
- focusBorderColor: globalTokens.hal_blue_l_50,
194
189
  borderRadius: "4px",
195
190
  boxShadowOffsetX: "0px",
196
191
  boxShadowOffsetY: "6px",
@@ -244,7 +239,7 @@ var componentTokens = {
244
239
  successBackgroundColor: globalTokens.hal_green_l_95,
245
240
  warningBackgroundColor: globalTokens.hal_yellow_l_95,
246
241
  errorBackgroundColor: globalTokens.hal_red_l_95,
247
- hoverActionBackgroundColor: "#0000000D",
242
+ hoverActionBackgroundColor: globalTokens.color_grey_a_100,
248
243
  activeActionBackgroundColor: "#0000001A",
249
244
  focusActionBorderColor: globalTokens.hal_blue_l_50,
250
245
  overlayColor: "#000000B3"
@@ -265,12 +260,21 @@ var componentTokens = {
265
260
  oneShadowDepthShadowOffsetY: "3px",
266
261
  oneShadowDepthShadowBlur: "6px",
267
262
  oneShadowDepthShadowSpread: "0px",
268
- oneShadowDepthShadowColor: "#00000033",
263
+ oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
269
264
  twoShadowDepthShadowOffsetX: "0px",
270
265
  twoShadowDepthShadowOffsetY: "3px",
271
266
  twoShadowDepthShadowBlur: "10px",
272
267
  twoShadowDepthShadowSpread: "0px",
273
- 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"
274
278
  },
275
279
  button: {
276
280
  labelFontLineHeight: globalTokens.type_leading_normal,
@@ -350,7 +354,7 @@ var componentTokens = {
350
354
  backgroundColorChecked: globalTokens.hal_blue_s_35,
351
355
  backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
352
356
  hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
353
- hoverBackgroundColorCheckedOnDark: global.hal_white,
357
+ hoverBackgroundColorCheckedOnDark: globalTokens.hal_white,
354
358
  disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
355
359
  disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
356
360
  borderColor: globalTokens.hal_blue_s_35,
@@ -397,23 +401,6 @@ var componentTokens = {
397
401
  disabledIconColor: globalTokens.hal_grey_l_60,
398
402
  focusColor: globalTokens.hal_blue_l_50
399
403
  },
400
- date: {
401
- pickerSelectedDateBackgroundColor: globalTokens.purple,
402
- pickerSelectedDateColor: globalTokens.hal_white,
403
- pickerBackgroundColor: globalTokens.hal_white,
404
- pickerFontColor: globalTokens.hal_black,
405
- pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
406
- pickerHoverDateFontColor: globalTokens.hal_black,
407
- pickerActualDateColor: globalTokens.lightGrey,
408
- pickerYearColor: globalTokens.hal_black,
409
- pickerMonthColor: globalTokens.hal_black,
410
- pickerWeekLabelColor: globalTokens.hal_black,
411
- pickerBackgroundColorMonthArrows: globalTokens.transparent,
412
- focusColor: globalTokens.hal_blue_l_50,
413
- fontFamily: globalTokens.type_sans,
414
- pickerHeight: "316px",
415
- pickerWidth: "290px"
416
- },
417
404
  dateInput: {
418
405
  pickerFontFamily: globalTokens.type_sans,
419
406
  pickerBackgroundColor: globalTokens.hal_white,
@@ -448,7 +435,10 @@ var componentTokens = {
448
435
  boxShadowOffsetY: "1px",
449
436
  boxShadowBlur: "3px",
450
437
  boxShadowColor: "rgba(0, 0, 0, 0.2)",
451
- overlayOpacity: "0.7"
438
+ overlayOpacity: "0.7",
439
+ fontFamily: globalTokens.type_sans,
440
+ fontSize: globalTokens.type_scale_03,
441
+ fontWeight: globalTokens.type_regular
452
442
  },
453
443
  dropdown: {
454
444
  buttonBackgroundColor: globalTokens.hal_white,
@@ -507,15 +497,14 @@ var componentTokens = {
507
497
  disabledDropLabelFontColor: globalTokens.hal_grey_l_60,
508
498
  focusDropBorderColor: globalTokens.hal_blue_l_50,
509
499
  disabledDropBorderColor: globalTokens.hal_grey_l_60,
510
- focusDropBackgroundColor: globalTokens.color_blue_50,
511
- hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
500
+ dragoverDropBackgroundColor: globalTokens.color_blue_50,
512
501
  activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
513
502
  errorFileItemBorderColor: globalTokens.hal_red_s_41,
514
503
  errorFileItemBackgroundColor: globalTokens.color_red_50,
515
- errorFileItemIconBackgroundColor: globalTokens.color_red_700,
504
+ errorFilePreviewBackgroundColor: globalTokens.color_red_700,
516
505
  errorFileItemIconColor: globalTokens.hal_red_s_41,
517
506
  fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
518
- fileItemIconColor: globalTokens.color_grey_600,
507
+ deleteFileItemColor: globalTokens.hal_black,
519
508
  errorMessageFontColor: globalTokens.hal_red_s_41,
520
509
  labelFontFamily: globalTokens.type_sans,
521
510
  labelFontSize: globalTokens.type_scale_02,
@@ -535,17 +524,19 @@ var componentTokens = {
535
524
  errorMessageFontFamily: globalTokens.type_sans,
536
525
  errorMessageFontSize: globalTokens.type_scale_01,
537
526
  errorMessageFontWeight: globalTokens.type_regular,
538
- errorMessageLineHeight: globalTokens.type_scale_05,
527
+ errorMessageLineHeight: globalTokens.type_leading_normal,
539
528
  dropBorderThickness: globalTokens.border_width_1,
540
529
  dropBorderStyle: globalTokens.border_dashed,
541
530
  dropBorderRadius: globalTokens.border_radius_large,
542
531
  fileItemBorderThickness: globalTokens.border_width_1,
543
532
  fileItemBorderStyle: globalTokens.border_solid,
544
533
  fileItemBorderRadius: globalTokens.border_radius_medium,
545
- hoverDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_95,
546
- activeDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_80,
547
- errorHoverDeleteFileItemBackgroundColor: globalTokens.hal_red_l_95,
548
- errorActiveDeleteFileItemBackgroundColor: globalTokens.hal_red_s_41
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
549
540
  },
550
541
  footer: {
551
542
  height: "124px",
@@ -565,7 +556,7 @@ var componentTokens = {
565
556
  copyrightFontStyle: globalTokens.type_normal,
566
557
  copyrightFontWeight: globalTokens.type_regular,
567
558
  copyrightFontColor: globalTokens.hal_white,
568
- logo: _Icons2["default"],
559
+ logo: "",
569
560
  logoHeight: "32px",
570
561
  logoWidth: "auto",
571
562
  socialLinksSize: "24px",
@@ -583,8 +574,8 @@ var componentTokens = {
583
574
  hamburguerTextTransform: globalTokens.type_uppercase,
584
575
  hamburguerIconColor: globalTokens.hal_black,
585
576
  hamburguerHoverColor: globalTokens.mediumGreyBlack,
586
- logo: _Icons.dxcLogo,
587
- logoResponsive: _Icons.dxcLogo,
577
+ logo: "",
578
+ logoResponsive: "",
588
579
  logoHeight: "40px",
589
580
  logoWidth: "auto",
590
581
  menuBackgroundColor: globalTokens.hal_white,
@@ -608,99 +599,40 @@ var componentTokens = {
608
599
  heading: {
609
600
  level1FontColor: globalTokens.inherit,
610
601
  level1FontFamily: globalTokens.type_sans,
611
- level1FontSize: globalTokens.type_scale_08,
602
+ level1FontSize: globalTokens.type_scale_07,
612
603
  level1FontStyle: globalTokens.type_normal,
613
- level1FontWeight: globalTokens.type_regular,
604
+ level1FontWeight: globalTokens.type_semibold,
614
605
  level1LineHeight: globalTokens.type_leading_compact_01,
615
606
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
616
607
  level2FontColor: globalTokens.inherit,
617
608
  level2FontFamily: globalTokens.type_sans,
618
- level2FontSize: globalTokens.type_scale_07,
609
+ level2FontSize: globalTokens.type_scale_05,
619
610
  level2FontStyle: globalTokens.type_normal,
620
- level2FontWeight: globalTokens.type_regular,
611
+ level2FontWeight: globalTokens.type_semibold,
621
612
  level2LineHeight: globalTokens.type_leading_normal,
622
613
  level2LetterSpacing: globalTokens.type_spacing_normal,
623
614
  level3FontColor: globalTokens.inherit,
624
615
  level3FontFamily: globalTokens.type_sans,
625
- level3FontSize: globalTokens.type_scale_06,
616
+ level3FontSize: globalTokens.type_scale_04,
626
617
  level3FontStyle: globalTokens.type_normal,
627
- level3FontWeight: globalTokens.type_regular,
618
+ level3FontWeight: globalTokens.type_semibold,
628
619
  level3LineHeight: globalTokens.type_leading_compact_01,
629
620
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
630
621
  level4FontColor: globalTokens.inherit,
631
622
  level4FontFamily: globalTokens.type_sans,
632
- level4FontSize: globalTokens.type_scale_05,
623
+ level4FontSize: globalTokens.type_scale_03,
633
624
  level4FontStyle: globalTokens.type_normal,
634
- level4FontWeight: globalTokens.type_regular,
625
+ level4FontWeight: globalTokens.type_semibold,
635
626
  level4LineHeight: globalTokens.type_leading_normal,
636
627
  level4LetterSpacing: globalTokens.type_spacing_normal,
637
628
  level5FontColor: globalTokens.inherit,
638
629
  level5FontFamily: globalTokens.type_sans,
639
- level5FontSize: globalTokens.type_scale_04,
630
+ level5FontSize: globalTokens.type_scale_02,
640
631
  level5FontStyle: globalTokens.type_normal,
641
- level5FontWeight: globalTokens.type_regular,
632
+ level5FontWeight: globalTokens.type_semibold,
642
633
  level5LineHeight: globalTokens.type_leading_normal,
643
634
  level5LetterSpacing: globalTokens.type_spacing_wide_01
644
635
  },
645
- inputText: {
646
- fontFamily: globalTokens.type_sans,
647
- assistiveTextFontColor: globalTokens.black,
648
- assistiveTextFontColorOnDark: globalTokens.white,
649
- assistiveTextFontSize: globalTokens.type_scale_01,
650
- assistiveTextFontStyle: globalTokens.type_normal,
651
- assistiveTextFontWeight: globalTokens.type_regular,
652
- disabledColor: globalTokens.lighterBlack,
653
- disabledColorOnDark: "#575757",
654
- errorColor: globalTokens.red,
655
- errorColorOnDark: globalTokens.hal_red_l_60,
656
- optionBackgroundColor: globalTokens.white,
657
- optionBorderColor: globalTokens.black,
658
- optionBorderThickness: "0px",
659
- optionBorderStyle: "solid",
660
- optionFontColor: globalTokens.black,
661
- optionFontColorOnDark: globalTokens.white,
662
- optionFontSize: globalTokens.type_scale_03,
663
- optionFontStyle: globalTokens.type_normal,
664
- optionFontWeight: globalTokens.type_regular,
665
- optionPaddingBottom: "6px",
666
- optionPaddingTop: "6px",
667
- scrollBarThumbColor: globalTokens.darkGrey,
668
- scrollBarTrackColor: globalTokens.lightGrey,
669
- hoverOptionColor: globalTokens.black,
670
- hoverOptionBackgroundColor: globalTokens.lightWhite,
671
- hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
672
- selectedOptionBackgroundColor: globalTokens.lightGrey,
673
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
674
- labelFontColor: globalTokens.black,
675
- labelFontColorOnDark: globalTokens.white,
676
- labelFontSize: globalTokens.type_scale_03,
677
- labelFontStyle: globalTokens.type_normal,
678
- labelFontWeight: globalTokens.type_regular,
679
- valueFontColor: globalTokens.black,
680
- valueFontColorOnDark: globalTokens.white,
681
- valueFontSize: globalTokens.type_scale_03,
682
- valueFontStyle: globalTokens.type_normal,
683
- valueFontWeight: globalTokens.type_regular,
684
- prefixIconColor: globalTokens.black,
685
- prefixIconColorOnDark: globalTokens.white,
686
- prefixLabelFontColor: globalTokens.black,
687
- prefixLabelFontColorOnDark: globalTokens.white,
688
- prefixLabelFontSize: globalTokens.type_scale_03,
689
- prefixLabelFontStyle: globalTokens.type_normal,
690
- prefixLabelFontWeight: globalTokens.type_regular,
691
- suffixIconColor: globalTokens.black,
692
- suffixIconColorOnDark: globalTokens.white,
693
- suffixLabelFontColor: globalTokens.black,
694
- suffixLabelFontColorOnDark: globalTokens.white,
695
- suffixLabelFontSize: globalTokens.type_scale_03,
696
- suffixLabelFontStyle: globalTokens.type_normal,
697
- suffixLabelFontWeight: globalTokens.type_regular,
698
- underlineColor: globalTokens.black,
699
- underlineColorOnDark: globalTokens.white,
700
- underlineFocusColor: globalTokens.black,
701
- underlineFocusColorOnDark: globalTokens.white,
702
- underlineThickness: "1px"
703
- },
704
636
  textInput: {
705
637
  fontFamily: globalTokens.type_sans,
706
638
  enabledBorderColor: globalTokens.hal_black,
@@ -717,6 +649,8 @@ var componentTokens = {
717
649
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
718
650
  hoverErrorBorderColor: globalTokens.color_red_600,
719
651
  hoverErrorBorderColorOnDark: "#fe677b",
652
+ inputMarginTop: globalTokens.spacing_02,
653
+ inputMarginBottom: globalTokens.spacing_02,
720
654
  errorMessageColor: globalTokens.hal_red_s_41,
721
655
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
722
656
  errorIconColor: globalTokens.hal_red_s_41,
@@ -746,7 +680,7 @@ var componentTokens = {
746
680
  disabledSuffixColor: globalTokens.hal_grey_l_75,
747
681
  disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
748
682
  disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
749
- placeholderFontColor: "#808080",
683
+ placeholderFontColor: "#000000b3",
750
684
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
751
685
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
752
686
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -777,20 +711,25 @@ var componentTokens = {
777
711
  focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
778
712
  activeActionBackgroundColor: globalTokens.hal_grey_l_80,
779
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,
780
717
  listOptionFontColor: globalTokens.hal_black,
781
- listOptionFontSize: globalTokens.type_scale_03,
718
+ listOptionFontSize: globalTokens.type_scale_02,
782
719
  listOptionFontStyle: globalTokens.type_normal,
783
720
  listOptionFontWeight: globalTokens.type_regular,
784
721
  systemMessageFontColor: globalTokens.hal_grey_s_40,
785
- errorMessageBorderColor: globalTokens.hal_red_s_41,
786
- errorMessageBackgroundColor: globalTokens.hal_red_l_95,
722
+ errorListDialogFontColor: globalTokens.hal_black,
723
+ errorListDialogBackgroundColor: globalTokens.color_red_50,
724
+ errorListDialogBorderColor: globalTokens.hal_red_s_41,
787
725
  hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
788
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
726
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
727
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50
789
728
  },
790
729
  link: {
791
730
  fontColor: globalTokens.hal_blue_s_35,
792
731
  fontFamily: globalTokens.inherit,
793
- fontSize: globalTokens.type_scale_root,
732
+ fontSize: globalTokens.inherit,
794
733
  fontStyle: globalTokens.type_normal,
795
734
  fontWeight: globalTokens.type_regular,
796
735
  iconSize: "16px",
@@ -807,6 +746,13 @@ var componentTokens = {
807
746
  activeUnderlineColor: globalTokens.black,
808
747
  focusColor: globalTokens.hal_blue_l_50
809
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
+ },
810
756
  paginator: {
811
757
  backgroundColor: globalTokens.darkWhite,
812
758
  fontColor: globalTokens.hal_black,
@@ -815,15 +761,15 @@ var componentTokens = {
815
761
  fontStyle: globalTokens.type_normal,
816
762
  fontWeight: globalTokens.type_regular,
817
763
  fontTextTransform: "none",
818
- height: "64px",
819
- width: "100%",
764
+ verticalPadding: "0.75rem",
765
+ horizontalPadding: "2rem",
820
766
  marginRight: "40px",
821
767
  marginLeft: "20px",
822
768
  itemsPerPageSelectorMarginLeft: "0px",
823
- itemsPerPageSelectorMarginRight: "30px",
769
+ itemsPerPageSelectorMarginRight: "0.5rem",
824
770
  pageSelectorMarginRight: "30px",
825
771
  pageSelectorMarginLeft: "0px",
826
- totalItemsContainerMarginRight: "30px",
772
+ totalItemsContainerMarginRight: "2.5rem",
827
773
  totalItemsContainerMarginLeft: "0px"
828
774
  },
829
775
  progressBar: {
@@ -855,24 +801,62 @@ var componentTokens = {
855
801
  overlayColor: globalTokens.black,
856
802
  overlayOpacity: "0.8"
857
803
  },
858
- radio: {
859
- circleLabelSpacing: "10px",
860
- circleSize: "24px",
861
- color: globalTokens.black,
862
- colorOnDark: globalTokens.white,
863
- disabledColor: globalTokens.lighterBlack,
864
- disabledColorOnDark: "#575757",
865
- disabledFontColor: globalTokens.lighterBlack,
866
- disabledFontColorOnDark: "#575757",
867
- focusColor: globalTokens.hal_blue_l_50,
868
- focusColorOnDark: "#1682FF",
869
- fontColor: globalTokens.inherit,
870
- 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,
871
817
  fontFamily: globalTokens.type_sans,
872
- fontSize: globalTokens.type_scale_root,
818
+ fontSize: globalTokens.type_scale_02,
873
819
  fontStyle: globalTokens.type_normal,
874
820
  fontWeight: globalTokens.type_regular
875
821
  },
822
+ radioGroup: {
823
+ fontFamily: globalTokens.type_sans,
824
+ radioInputColor: globalTokens.hal_blue_l_45,
825
+ hoverRadioInputColor: globalTokens.hal_blue_s_35,
826
+ focusBorderColor: globalTokens.hal_blue_l_50,
827
+ activeRadioInputColor: globalTokens.hal_blue_d_20,
828
+ errorRadioInputColor: globalTokens.hal_red_s_41,
829
+ hoverErrorRadioInputColor: globalTokens.hal_red_d_30,
830
+ activeErrorRadioInputColor: globalTokens.hal_red_d_20,
831
+ readonlyRadioInputColor: globalTokens.hal_grey_l_60,
832
+ hoverReadonlyRadioInputColor: globalTokens.color_grey_600,
833
+ activeReadonlyRadioInputColor: globalTokens.hal_grey_s_40,
834
+ disabledRadioInputColor: globalTokens.hal_grey_l_60,
835
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
836
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
837
+ disabledRadioInputLabelFontColor: globalTokens.hal_grey_l_60,
838
+ errorMessageColor: globalTokens.hal_red_s_41,
839
+ labelFontColor: globalTokens.hal_black,
840
+ labelFontSize: globalTokens.type_scale_02,
841
+ labelFontStyle: globalTokens.type_normal,
842
+ labelFontWeight: globalTokens.type_semibold,
843
+ labelLineHeight: globalTokens.type_leading_loose_01,
844
+ optionalLabelFontWeight: globalTokens.type_regular,
845
+ helperTextFontColor: globalTokens.hal_black,
846
+ helperTextFontSize: globalTokens.type_scale_01,
847
+ helperTextFontStyle: globalTokens.type_normal,
848
+ helperTextFontWeight: globalTokens.type_regular,
849
+ helperTextLineHeight: globalTokens.type_leading_normal,
850
+ radioInputLabelFontColor: globalTokens.hal_black,
851
+ radioInputLabelFontSize: globalTokens.type_scale_02,
852
+ radioInputLabelFontStyle: globalTokens.type_normal,
853
+ radioInputLabelFontWeight: globalTokens.type_regular,
854
+ radioInputLabelLineHeight: globalTokens.type_leading_loose_01,
855
+ groupLabelMargin: globalTokens.spacing_03,
856
+ radioInputLabelMargin: globalTokens.spacing_03,
857
+ groupVerticalGutter: globalTokens.spacing_02,
858
+ groupHorizontalGutter: globalTokens.spacing_07
859
+ },
876
860
  select: {
877
861
  fontFamily: globalTokens.type_sans,
878
862
  disabledColor: globalTokens.hal_grey_l_60,
@@ -882,14 +866,17 @@ var componentTokens = {
882
866
  errorInputBorderColor: globalTokens.hal_red_s_41,
883
867
  hoverInputErrorBorderColor: globalTokens.color_red_600,
884
868
  disabledInputBorderColor: globalTokens.hal_grey_l_60,
885
- errorColor: globalTokens.hal_red_s_41,
869
+ disabledInputBackgroundColor: globalTokens.hal_grey_l_95,
870
+ inputMarginTop: globalTokens.spacing_02,
871
+ inputMarginBottom: globalTokens.spacing_02,
872
+ errorMessageColor: globalTokens.hal_red_s_41,
873
+ errorIconColor: globalTokens.hal_red_s_41,
886
874
  labelFontColor: globalTokens.hal_black,
887
875
  labelFontSize: globalTokens.type_scale_02,
888
876
  labelFontStyle: globalTokens.type_normal,
889
877
  labelFontWeight: globalTokens.type_semibold,
890
878
  labelLineHeight: globalTokens.type_leading_loose_01,
891
879
  optionalLabelFontWeight: globalTokens.type_regular,
892
- // new
893
880
  helperTextFontColor: globalTokens.hal_black,
894
881
  helperTextFontSize: globalTokens.type_scale_01,
895
882
  helperTextFontStyle: globalTokens.type_normal,
@@ -901,141 +888,76 @@ var componentTokens = {
901
888
  valueFontStyle: globalTokens.type_normal,
902
889
  valueFontWeight: globalTokens.type_regular,
903
890
  actionIconColor: globalTokens.hal_black,
904
- // new
905
891
  hoverActionIconColor: globalTokens.hal_black,
906
892
  activeActionIconColor: globalTokens.hal_black,
907
893
  actionBackgroundColor: globalTokens.transparent,
908
894
  hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
909
895
  activeActionBackgroundColor: globalTokens.hal_grey_l_80,
910
- disabledActionBackgroundColor: globalTokens.transparent,
911
- errorMessageFontSize: globalTokens.type_scale_01,
912
- errorMessagetFontStyle: globalTokens.type_normal,
913
- errorMessageFontWeight: globalTokens.type_regular,
914
- errorMessagetLineHeight: globalTokens.type_leading_normal,
915
- listItemFontColor: globalTokens.hal_black,
916
- listItemFontSize: globalTokens.type_scale_02,
917
- listItemFontStyle: globalTokens.type_normal,
918
- listItemFontWeight: globalTokens.type_regular,
919
- listItemIconColor: globalTokens.hal_black,
920
- listGroupItemFontWeight: globalTokens.type_semibold,
921
- listItemDividerColor: globalTokens.hal_grey_l_90,
922
- focusListItemBorderColor: globalTokens.hal_blue_l_50,
923
- // new
896
+ listOptionFontColor: globalTokens.hal_black,
897
+ listOptionFontSize: globalTokens.type_scale_02,
898
+ listOptionFontStyle: globalTokens.type_normal,
899
+ listOptionFontWeight: globalTokens.type_regular,
900
+ listOptionIconColor: globalTokens.hal_black,
901
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
902
+ listGroupLabelFontWeight: globalTokens.type_semibold,
903
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50,
924
904
  systemMessageFontColor: globalTokens.hal_grey_s_40,
925
- // new
926
905
  collapseIndicatorColor: globalTokens.hal_black,
927
- itemListBackgroundColor: globalTokens.hal_white,
928
- // new
929
- itemListBorderColor: globalTokens.hal_grey_l_75,
930
- // new
931
- selectedListItemBackgroundColor: globalTokens.hal_blue_l_95,
932
- selectedHoverListItemBackgroundColor: globalTokens.color_blue_200,
933
- selectedActiveListItemBackgroundColor: globalTokens.hal_blue_l_80,
934
- selectedListItemIconColor: globalTokens.hal_blue_d_20,
935
- unselectedHoverListItemBackgroundColor: globalTokens.hal_grey_l_95,
936
- unselectedActiveListItemBackgroundColor: globalTokens.hal_grey_l_90,
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,
937
914
  selectionIndicatorFontColor: globalTokens.hal_black,
938
- // new
939
- selectionIndicatorFontSize: "11px",
940
- // new
915
+ selectionIndicatorFontSize: globalTokens.type_scale_01,
941
916
  selectionIndicatorFontStyle: globalTokens.type_regular,
942
- // new
943
917
  selectionIndicatorFontWeight: globalTokens.type_normal,
944
- // new
945
918
  selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
946
919
  selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
947
920
  enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
948
921
  enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
949
- // new
950
922
  hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
951
923
  hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
952
- // new
953
924
  activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
954
- activeSelectionIndicatorActionIconColor: globalTokens.hal_black // new
955
-
956
- },
957
- V3Select: {
958
- fontFamily: globalTokens.type_sans,
959
- assistiveTextFontColor: globalTokens.hal_black,
960
- assistiveTextFontColorOnDark: globalTokens.hal_white,
961
- assistiveTextFontSize: globalTokens.type_scale_01,
962
- assistiveTextFontStyle: globalTokens.type_normal,
963
- assistiveTextFontWeight: globalTokens.type_regular,
964
- labelFontColor: globalTokens.hal_black,
965
- labelFontColorOnDark: globalTokens.hal_white,
966
- labelFontSize: globalTokens.type_scale_03,
967
- labelFontStyle: globalTokens.type_normal,
968
- labelFontWeight: globalTokens.type_regular,
969
- disabledColor: globalTokens.lighterBlack,
970
- disabledColorOnDark: "#575757",
971
- errorColor: globalTokens.red,
972
- errorColorOnDark: globalTokens.hal_red_l_60,
973
- optionBackgroundColor: globalTokens.hal_white,
974
- optionBorderColor: globalTokens.hal_black,
975
- optionBorderThickness: "0px",
976
- optionBorderStyle: "solid",
977
- optionFontColor: globalTokens.hal_black,
978
- optionFontColorOnDark: globalTokens.hal_white,
979
- optionFontSize: globalTokens.type_scale_root,
980
- optionFontStyle: globalTokens.type_normal,
981
- optionFontWeight: globalTokens.type_regular,
982
- optionPaddingBottom: "6px",
983
- optionPaddingTop: "6px",
984
- scrollBarThumbColor: globalTokens.hal_grey_s_40,
985
- scrollBarTrackColor: globalTokens.lightGrey,
986
- optionIconColor: globalTokens.hal_black,
987
- optionIconColorOnDark: globalTokens.hal_white,
988
- optionIconSpacing: "12px",
989
- optionIconSize: "20px",
990
- optionCheckboxSpacing: "12px",
991
- hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
992
- hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
993
- activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
994
- activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
995
- selectedOptionBackgroundColor: globalTokens.lightGrey,
996
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
997
- underlineColor: globalTokens.hal_black,
998
- underlineColorOnDark: globalTokens.hal_white,
999
- underlineFocusColor: globalTokens.hal_black,
1000
- underlineFocusColorOnDark: globalTokens.hal_white,
1001
- underlineThickness: "1px",
1002
- valueFontColor: globalTokens.hal_black,
1003
- valueFontColorOnDark: globalTokens.hal_white,
1004
- valueFontSize: globalTokens.type_scale_03,
1005
- valueFontStyle: globalTokens.type_normal,
1006
- valueFontWeight: globalTokens.type_regular,
1007
- valueIconColor: globalTokens.hal_black,
1008
- valueIconColorOnDark: globalTokens.hal_white,
1009
- valueIconSize: "20px",
1010
- valueIconSpacing: "12px",
1011
- arrowColor: globalTokens.hal_black,
1012
- arrowColorOnDark: globalTokens.hal_white,
1013
- focusColor: globalTokens.hal_blue_l_50,
1014
- focusColorOnDark: globalTokens.hal_blue_l_50
925
+ activeSelectionIndicatorActionIconColor: globalTokens.hal_black
1015
926
  },
1016
927
  sidenav: {
1017
928
  backgroundColor: globalTokens.hal_grey_l_95,
1018
929
  arrowContainerColor: globalTokens.hal_grey_l_90,
1019
930
  arrowColor: globalTokens.hal_black,
1020
931
  titleFontFamily: globalTokens.type_sans,
1021
- titleFontSize: globalTokens.type_scale_05,
932
+ titleFontSize: globalTokens.type_scale_04,
1022
933
  titleFontStyle: globalTokens.type_normal,
1023
- titleFontWeight: globalTokens.type_regular,
1024
- titleFontColor: globalTokens.hal_black,
934
+ titleFontWeight: globalTokens.type_semibold,
935
+ titleFontColor: globalTokens.color_grey_800,
1025
936
  titleFontTextTransform: "none",
1026
937
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
1027
- subtitleFontFamily: globalTokens.type_sans,
1028
- subtitleFontSize: globalTokens.type_scale_03,
1029
- subtitleFontStyle: globalTokens.type_normal,
1030
- subtitleFontWeight: globalTokens.type_regular,
1031
- subtitleFontColor: globalTokens.color_grey_800,
1032
- subtitleFontTextTransform: globalTokens.type_uppercase,
1033
- 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,
1034
951
  linkFontFamily: globalTokens.type_sans,
1035
952
  linkFontSize: globalTokens.type_scale_02,
1036
953
  linkFontStyle: globalTokens.type_normal,
1037
954
  linkFontWeight: globalTokens.type_regular,
1038
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,
1039
961
  linkFontTextTransform: "none",
1040
962
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
1041
963
  linkTextDecoration: globalTokens.type_no_line,
@@ -1049,9 +971,13 @@ var componentTokens = {
1049
971
  },
1050
972
  slider: {
1051
973
  fontFamily: globalTokens.type_sans,
1052
- fontSize: globalTokens.type_scale_03,
1053
- fontStyle: globalTokens.type_normal,
1054
- 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,
1055
981
  labelFontFamily: globalTokens.type_sans,
1056
982
  labelFontSize: globalTokens.type_scale_02,
1057
983
  labelFontStyle: globalTokens.type_normal,
@@ -1065,9 +991,13 @@ var componentTokens = {
1065
991
  fontColor: globalTokens.hal_black,
1066
992
  fontColorOnDark: globalTokens.hal_white,
1067
993
  labelFontColor: globalTokens.hal_black,
994
+ labelFontColorOnDark: globalTokens.hal_white,
1068
995
  helperTextFontColor: globalTokens.hal_black,
1069
- disabledFontColor: globalTokens.hal_grey_l_60,
1070
- 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,
1071
1001
  thumbHeight: "12px",
1072
1002
  thumbWidth: "12px",
1073
1003
  hoverThumbHeight: "14px",
@@ -1115,7 +1045,7 @@ var componentTokens = {
1115
1045
  },
1116
1046
  spinner: {
1117
1047
  trackCircleColor: "#5f249f",
1118
- trackCircleColorOnDark: "#a46ede",
1048
+ trackCircleColorOverlay: "#a46ede",
1119
1049
  totalCircleColor: globalTokens.white,
1120
1050
  labelFontFamily: globalTokens.type_sans,
1121
1051
  labelFontSize: globalTokens.type_scale_02,
@@ -1149,37 +1079,37 @@ var componentTokens = {
1149
1079
  "switch": {
1150
1080
  checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1151
1081
  checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
1152
- checkedThumbBackgroundColor: globalTokens.white,
1153
- checkedThumbBackgroundColorOnDark: globalTokens.white,
1154
- uncheckedTrackBackgroundColor: globalTokens.lightGrey,
1155
- uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
1156
- uncheckedThumbBackgroundColor: globalTokens.white,
1157
- uncheckedThumbBackgroundColorOnDark: globalTokens.white,
1158
- 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,
1159
1089
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
1160
- disabledCheckedThumbBackgroundColor: globalTokens.white,
1161
- disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
1162
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
1090
+ disabledCheckedThumbBackgroundColor: globalTokens.hal_white,
1091
+ disabledCheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1092
+ disabledUncheckedTrackBackgroundColor: globalTokens.hal_grey_l_95,
1163
1093
  disabledUncheckedTrackBackgroundColorOnDark: "#363636",
1164
- disabledUncheckedThumbBackgroundColor: globalTokens.white,
1165
- disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
1166
- disabledLabelFontColor: globalTokens.lighterBlack,
1094
+ disabledUncheckedThumbBackgroundColor: globalTokens.hal_white,
1095
+ disabledUncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1096
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1167
1097
  disabledLabelFontColorOnDark: "#575757",
1168
1098
  disabledLabelFontStyle: globalTokens.type_normal,
1169
1099
  labelFontFamily: globalTokens.type_sans,
1170
1100
  labelFontSize: globalTokens.type_scale_root,
1171
1101
  labelFontStyle: globalTokens.type_normal,
1172
1102
  labelFontWeight: globalTokens.type_regular,
1173
- labelFontColor: globalTokens.black,
1174
- labelFontColorOnDark: globalTokens.white,
1175
- thumbFocusColor: globalTokens.blue,
1103
+ labelFontColor: globalTokens.hal_black,
1104
+ labelFontColorOnDark: globalTokens.hal_white,
1105
+ thumbFocusColor: globalTokens.hal_blue_l_50,
1176
1106
  thumbFocusColorOnDark: "#1682FF",
1177
1107
  thumbHeight: "24px",
1178
1108
  thumbWidth: "24px",
1179
- thumbShift: "40%",
1109
+ thumbShift: "1.25rem",
1180
1110
  trackHeight: "12px",
1181
- trackWidth: "60px",
1182
- spaceBetweenLabelSwitch: "0px"
1111
+ trackWidth: "36px",
1112
+ spaceBetweenLabelSwitch: "8px"
1183
1113
  },
1184
1114
  tag: {
1185
1115
  fontFamily: globalTokens.type_sans,
@@ -1250,6 +1180,7 @@ var componentTokens = {
1250
1180
  disabledFontColor: "#999999",
1251
1181
  disabledIconColor: "#999999",
1252
1182
  disabledFontStyle: globalTokens.type_normal,
1183
+ disabledBadgeBackgroundColor: "#0000004D",
1253
1184
  hoverBackgroundColor: "#f2eafa",
1254
1185
  pressedBackgroundColor: "#e5d5f6",
1255
1186
  pressedFontWeight: globalTokens.type_semibold,
@@ -1287,6 +1218,8 @@ var componentTokens = {
1287
1218
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
1288
1219
  hoverErrorBorderColor: globalTokens.color_red_600,
1289
1220
  hoverErrorBorderColorOnDark: "#fe677b",
1221
+ inputMarginTop: globalTokens.spacing_02,
1222
+ inputMarginBottom: globalTokens.spacing_02,
1290
1223
  errorMessageColor: globalTokens.hal_red_s_41,
1291
1224
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
1292
1225
  labelFontColor: globalTokens.hal_black,
@@ -1306,7 +1239,7 @@ var componentTokens = {
1306
1239
  helperTextLineHeight: globalTokens.type_leading_normal,
1307
1240
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1308
1241
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1309
- placeholderFontColor: "#808080",
1242
+ placeholderFontColor: "#000000b3",
1310
1243
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1311
1244
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1312
1245
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -1318,41 +1251,6 @@ var componentTokens = {
1318
1251
  disabledValueFontColor: globalTokens.hal_grey_l_60,
1319
1252
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1320
1253
  },
1321
- V3Textarea: {
1322
- fontFamily: globalTokens.type_sans,
1323
- assistiveTextFontSize: globalTokens.type_scale_01,
1324
- assistiveTextFontStyle: globalTokens.type_normal,
1325
- assistiveTextFontWeight: globalTokens.type_regular,
1326
- assistiveTextFontColor: globalTokens.black,
1327
- assistiveTextFontColorOnDark: globalTokens.white,
1328
- assistiveTextLetterSpacing: "0.03333em",
1329
- disabledColor: globalTokens.lighterBlack,
1330
- disabledColorOnDark: "#575757",
1331
- errorColor: globalTokens.red,
1332
- errorColorOnDark: globalTokens.hal_red_l_60,
1333
- scrollBarThumbColor: globalTokens.darkGrey,
1334
- scrollBarThumbColorOnDark: globalTokens.white,
1335
- scrollBarTrackColor: globalTokens.lightGrey,
1336
- scrollBarTrackColorOnDark: "#999999",
1337
- labelFontSize: globalTokens.type_scale_03,
1338
- labelFontStyle: globalTokens.type_normal,
1339
- labelFontWeight: globalTokens.type_regular,
1340
- labelFontColor: globalTokens.black,
1341
- labelFontColorOnDark: globalTokens.white,
1342
- labelLetterSpacing: "0.00938em",
1343
- valueFontSize: globalTokens.type_scale_03,
1344
- valueFontStyle: globalTokens.type_normal,
1345
- valueFontWeight: globalTokens.type_regular,
1346
- valueFontColor: globalTokens.black,
1347
- valueFontColorOnDark: globalTokens.white,
1348
- valueLetterSpacing: globalTokens.type_spacing_normal,
1349
- valueLineHeight: "1.1875em",
1350
- underlineColor: globalTokens.black,
1351
- underlineColorOnDark: globalTokens.white,
1352
- underlineFocusColor: globalTokens.black,
1353
- underlineFocusColorOnDark: globalTokens.white,
1354
- underlineThickness: "1px"
1355
- },
1356
1254
  toggleGroup: {
1357
1255
  containerBackgroundColor: globalTokens.color_grey_50,
1358
1256
  containerBorderColor: globalTokens.hal_grey_l_60,
@@ -1401,121 +1299,65 @@ var componentTokens = {
1401
1299
  containerBorderRadius: globalTokens.border_radius_large,
1402
1300
  optionFocusBorderThickness: globalTokens.border_width_2
1403
1301
  },
1404
- upload: {
1405
- fontFamily: globalTokens.type_sans,
1406
- shadowColor: globalTokens.lightWhite,
1407
- scrollBarThumbColor: globalTokens.darkGrey,
1408
- scrollBarTrackColor: globalTokens.lightGrey,
1409
- errorColor: globalTokens.red,
1410
- backgroundColor: globalTokens.white,
1411
- draggingStateBackgroundColor: globalTokens.lightWhite,
1412
- dragAndDropIconColor: globalTokens.black,
1413
- dragAndDropIconSize: "43.5px",
1414
- dragAndDropTitleFontSize: globalTokens.type_scale_04,
1415
- dragAndDropTitleFontStyle: globalTokens.type_normal,
1416
- dragAndDropTitleFontWeight: globalTokens.type_bold,
1417
- dragAndDropTitleFontTextTransform: "none",
1418
- dragAndDropTitleFontColor: globalTokens.black,
1419
- dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1420
- dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1421
- dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1422
- dragAndDropDescriptionFontTextTransform: "none",
1423
- dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1424
- dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1425
- dragAndDropDraggingStateIconSize: "74.5px",
1426
- dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1427
- dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1428
- dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1429
- dragAndDropDraggingStateFontTextTransform: "none",
1430
- dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1431
- dragAndDropAreaIconColor: globalTokens.darkGrey,
1432
- dragAndDropAreaIconSize: "24px",
1433
- dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1434
- dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1435
- dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1436
- dragAndDropAreaTextFontTextTransform: "none",
1437
- dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1438
- fileDeleteIconColor: globalTokens.black,
1439
- fileDeleteIconSize: "30px",
1440
- fileUnderlineColor: globalTokens.lightGrey,
1441
- fileUnderlineThickness: "1px",
1442
- fileNameFontSize: globalTokens.type_scale_03,
1443
- fileNameFontStyle: globalTokens.type_normal,
1444
- fileNameFontWeight: globalTokens.type_regular,
1445
- fileNameFontTextTransform: "none",
1446
- fileNameFontColor: globalTokens.black,
1447
- fileTypeFontSize: globalTokens.type_scale_01,
1448
- fileTypeFontStyle: globalTokens.type_normal,
1449
- fileTypeFontWeight: globalTokens.type_regular,
1450
- fileTypeFontTextTransform: globalTokens.type_uppercase,
1451
- fileTypeFontColor: globalTokens.darkGrey,
1452
- hoverFileColor: globalTokens.darkWhite,
1453
- uploadedFileIconColor: globalTokens.lightGrey,
1454
- uploadedFileIconSize: "24px",
1455
- uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1456
- uploadedFilesTitleFontStyle: globalTokens.type_normal,
1457
- uploadedFilesTitleFontWeight: globalTokens.type_regular,
1458
- uploadedFilesTitleFontTextTransform: "none",
1459
- uploadedFilesTitleFontColor: globalTokens.black,
1460
- uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1461
- uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1462
- uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1463
- uploadedFilesSubtitleFontTextTransform: "none",
1464
- uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1465
- uploadedFilesNumberFontWeight: globalTokens.type_bold
1466
- },
1467
1302
  wizard: {
1468
- disabledBackgroundColor: globalTokens.lightGrey,
1469
- disabledFontColor: globalTokens.darkGrey,
1470
- stepContainerFontSize: globalTokens.type_scale_03,
1471
- stepContainerFontFamily: globalTokens.type_sans,
1472
- stepContainerFontStyle: globalTokens.type_normal,
1473
- stepContainerFontWeight: globalTokens.type_regular,
1474
- stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1475
- stepContainerFontColor: globalTokens.black,
1476
- stepContainerSelectedFontColor: globalTokens.white,
1477
- stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1478
- stepContainerBackgroundColor: globalTokens.white,
1479
- 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,
1480
1333
  labelFontSize: globalTokens.type_scale_03,
1481
1334
  labelFontFamily: globalTokens.type_sans,
1482
1335
  labelFontStyle: globalTokens.type_normal,
1483
1336
  labelFontWeight: globalTokens.type_regular,
1484
- labelLetterSpacing: globalTokens.type_spacing_normal,
1337
+ labelFontTracking: globalTokens.type_spacing_normal,
1485
1338
  labelFontTextTransform: "none",
1486
1339
  labelTextAlign: "left",
1487
- labelFontColor: globalTokens.darkGrey,
1488
- visitedLabelFontColor: globalTokens.black,
1489
- visitedDescriptionFontColor: globalTokens.black,
1490
- descriptionFontSize: globalTokens.type_scale_01,
1491
- descriptionFontFamily: globalTokens.type_sans,
1492
- descriptionFontStyle: globalTokens.type_normal,
1493
- descriptionFontWeight: globalTokens.type_regular,
1494
- descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1495
- descriptionFontTextTransform: "none",
1496
- descriptionFontColor: globalTokens.darkGrey,
1497
- descriptionTextAlign: "left",
1498
- circleWidth: "32px",
1499
- circleHeight: "32px",
1500
- circleBorderThickness: "2px",
1501
- circleBorderStyle: "solid",
1502
- circleBorderRadius: "45px",
1503
- circleBorderColor: globalTokens.black,
1504
- selectedCircleWidth: "32px",
1505
- selectedCircleHeight: "32px",
1506
- selectedCircleBorderThickness: "2px",
1507
- selectedCircleBorderStyle: "solid",
1508
- selectedCircleBorderRadius: "45px",
1509
- selectedCircleBorderColor: globalTokens.purple,
1510
- disabledCircleWidth: "32px",
1511
- disabledCircleHeight: "32px",
1512
- disabledCircleBorderThickness: "2px",
1513
- disabledCircleBorderStyle: "solid",
1514
- disabledCircleBorderRadius: "45px",
1515
- 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",
1516
1358
  separatorBorderThickness: "1px",
1517
1359
  separatorBorderStyle: "solid",
1518
- separatorColor: globalTokens.lightGrey,
1360
+ separatorColor: globalTokens.hal_grey_s_40,
1519
1361
  focusColor: globalTokens.hal_blue_l_50
1520
1362
  }
1521
1363
  };
@@ -1531,12 +1373,11 @@ var spaces = {
1531
1373
  };
1532
1374
  exports.spaces = spaces;
1533
1375
  var responsiveSizes = {
1534
- mobileSmall: "320",
1535
- mobileMedium: "375",
1536
- mobileLarge: "425",
1537
- tablet: "768",
1538
- laptop: "1024",
1539
- desktop: "1440"
1376
+ xsmall: "20",
1377
+ small: "30",
1378
+ medium: "45",
1379
+ large: "66",
1380
+ xlarge: "90"
1540
1381
  };
1541
1382
  exports.responsiveSizes = responsiveSizes;
1542
1383
  var typeface = {
@@ -1571,4 +1412,98 @@ var typeface = {
1571
1412
  textTransform: "uppercase"
1572
1413
  }
1573
1414
  };
1574
- exports.typeface = typeface;
1415
+ exports.typeface = typeface;
1416
+ var defaultTranslatedComponentLabels = {
1417
+ formFields: {
1418
+ optionalLabel: "(Optional)",
1419
+ requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
1420
+ requiredValueErrorMessage: "This field is required. Please, enter a value.",
1421
+ formatRequestedErrorMessage: "Please match the format requested.",
1422
+ lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
1423
+ return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
1424
+ },
1425
+ logoAlternativeText: "Logo"
1426
+ },
1427
+ alert: {
1428
+ infoTitleText: "information",
1429
+ successTitleText: "success",
1430
+ warningTitleText: "warning",
1431
+ errorTitleText: "error"
1432
+ },
1433
+ dateInput: {
1434
+ invalidDateErrorMessage: "Invalid date."
1435
+ },
1436
+ fileInput: {
1437
+ fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1438
+ fileSizeLessThanErrorMessage: "File size must be less than max size.",
1439
+ multipleButtonLabelDefault: "Select files",
1440
+ singleButtonLabelDefault: "Select file",
1441
+ dropAreaButtonLabelDefault: "Select",
1442
+ multipleDropAreaLabelDefault: "or drop files",
1443
+ singleDropAreaLabelDefault: "or drop a file",
1444
+ deleteFileActionTitle: "Remove file"
1445
+ },
1446
+ footer: {
1447
+ copyrightText: function copyrightText(year) {
1448
+ return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
1449
+ }
1450
+ },
1451
+ header: {
1452
+ closeIcon: "Close menu",
1453
+ hamburguerTitle: "Menu"
1454
+ },
1455
+ numberInput: {
1456
+ valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
1457
+ return "Value must be greater than or equal to ".concat(value, ".");
1458
+ },
1459
+ valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
1460
+ return "Value must be less than or equal to ".concat(value, ".");
1461
+ },
1462
+ decrementValueTitle: "Decrement value",
1463
+ incrementValueTitle: "Increment value"
1464
+ },
1465
+ paginator: {
1466
+ itemsPerPageText: "Items per page: ",
1467
+ minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
1468
+ return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
1469
+ },
1470
+ goToPageText: "Go to page:",
1471
+ pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
1472
+ return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
1473
+ }
1474
+ },
1475
+ passwordInput: {
1476
+ inputShowPasswordTitle: "Show password",
1477
+ inputHidePasswordTitle: "Hide password"
1478
+ },
1479
+ quickNav: {
1480
+ contentTitle: "Contents"
1481
+ },
1482
+ radioGroup: {
1483
+ optionalItemLabelDefault: "N/A"
1484
+ },
1485
+ select: {
1486
+ noMatchesErrorMessage: "No matches found",
1487
+ actionClearSelectionTitle: "Clear selection",
1488
+ actionClearSearchTitle: "Clear search"
1489
+ },
1490
+ tabs: {
1491
+ scrollLeft: "Scroll left",
1492
+ scrollRight: "Scroll right"
1493
+ },
1494
+ textInput: {
1495
+ clearFieldActionTitle: "Clear field",
1496
+ searchingMessage: "Searching...",
1497
+ fetchingDataErrorMessage: "Error fetching data"
1498
+ },
1499
+ calendar: {
1500
+ days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1501
+ daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
1502
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1503
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
1504
+ },
1505
+ applicationLayout: {
1506
+ visibilityToggleTitle: "Toggle visibility sidenav"
1507
+ }
1508
+ };
1509
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;