@dxc-technology/halstack-react 0.0.0-7da4003 → 0.0.0-7da4f49

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 (414) 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 +298 -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 +168 -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 +59 -0
  25. package/badge/types.d.ts +4 -0
  26. package/badge/types.js +5 -0
  27. package/bleed/Bleed.d.ts +3 -0
  28. package/bleed/Bleed.js +84 -0
  29. package/bleed/Bleed.stories.tsx +342 -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/{dist/box → box}/Box.js +15 -45
  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/button/Button.d.ts +4 -0
  39. package/{dist/button → button}/Button.js +34 -98
  40. package/button/Button.stories.tsx +274 -0
  41. package/button/Button.test.js +35 -0
  42. package/button/types.d.ts +53 -0
  43. package/button/types.js +5 -0
  44. package/card/Card.d.ts +4 -0
  45. package/card/Card.js +163 -0
  46. package/card/Card.stories.tsx +201 -0
  47. package/card/Card.test.js +50 -0
  48. package/card/ice-cream.jpg +0 -0
  49. package/card/types.d.ts +67 -0
  50. package/card/types.js +5 -0
  51. package/checkbox/Checkbox.d.ts +4 -0
  52. package/{dist/checkbox → checkbox}/Checkbox.js +55 -98
  53. package/checkbox/Checkbox.stories.tsx +188 -0
  54. package/checkbox/Checkbox.test.js +78 -0
  55. package/checkbox/types.d.ts +64 -0
  56. package/checkbox/types.js +5 -0
  57. package/chip/Chip.d.ts +4 -0
  58. package/chip/Chip.js +161 -0
  59. package/chip/Chip.stories.tsx +119 -0
  60. package/chip/Chip.test.js +56 -0
  61. package/chip/types.d.ts +45 -0
  62. package/chip/types.js +5 -0
  63. package/{dist/common → common}/OpenSans.css +0 -0
  64. package/{dist/common → common}/RequiredComponent.js +3 -11
  65. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  66. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  67. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  68. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  69. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  70. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  71. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  72. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  73. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  74. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  75. package/{dist/common → common}/utils.js +0 -0
  76. package/{dist/common → common}/variables.js +322 -407
  77. package/date-input/DateInput.d.ts +4 -0
  78. package/{dist/date-input → date-input}/DateInput.js +80 -108
  79. package/date-input/DateInput.stories.tsx +138 -0
  80. package/date-input/DateInput.test.js +479 -0
  81. package/date-input/types.d.ts +107 -0
  82. package/date-input/types.js +5 -0
  83. package/dialog/Dialog.d.ts +4 -0
  84. package/dialog/Dialog.js +138 -0
  85. package/dialog/Dialog.stories.tsx +212 -0
  86. package/dialog/Dialog.test.js +40 -0
  87. package/dialog/types.d.ts +43 -0
  88. package/dialog/types.js +5 -0
  89. package/dropdown/Dropdown.d.ts +4 -0
  90. package/{dist/dropdown → dropdown}/Dropdown.js +54 -207
  91. package/dropdown/Dropdown.stories.tsx +249 -0
  92. package/dropdown/Dropdown.test.js +189 -0
  93. package/dropdown/types.d.ts +80 -0
  94. package/dropdown/types.js +5 -0
  95. package/file-input/FileInput.d.ts +4 -0
  96. package/file-input/FileInput.js +593 -0
  97. package/file-input/FileInput.stories.tsx +507 -0
  98. package/file-input/FileInput.test.js +457 -0
  99. package/file-input/FileItem.d.ts +14 -0
  100. package/file-input/FileItem.js +186 -0
  101. package/file-input/types.d.ts +112 -0
  102. package/file-input/types.js +5 -0
  103. package/footer/Footer.d.ts +4 -0
  104. package/footer/Footer.js +185 -0
  105. package/footer/Footer.stories.tsx +130 -0
  106. package/footer/Footer.test.js +109 -0
  107. package/footer/Icons.d.ts +2 -0
  108. package/{dist/footer → footer}/Icons.js +15 -15
  109. package/footer/types.d.ts +65 -0
  110. package/footer/types.js +5 -0
  111. package/header/Header.d.ts +7 -0
  112. package/header/Header.js +303 -0
  113. package/header/Header.stories.tsx +172 -0
  114. package/header/Header.test.js +79 -0
  115. package/header/Icons.d.ts +2 -0
  116. package/{dist/header → header}/Icons.js +7 -32
  117. package/header/types.d.ts +47 -0
  118. package/header/types.js +5 -0
  119. package/heading/Heading.d.ts +4 -0
  120. package/{dist/heading → heading}/Heading.js +31 -90
  121. package/heading/Heading.stories.tsx +54 -0
  122. package/heading/Heading.test.js +186 -0
  123. package/heading/types.d.ts +33 -0
  124. package/heading/types.js +5 -0
  125. package/inset/Inset.d.ts +3 -0
  126. package/inset/Inset.js +84 -0
  127. package/inset/Inset.stories.tsx +229 -0
  128. package/inset/types.d.ts +37 -0
  129. package/inset/types.js +5 -0
  130. package/layout/ApplicationLayout.d.ts +10 -0
  131. package/layout/ApplicationLayout.js +218 -0
  132. package/layout/ApplicationLayout.stories.tsx +171 -0
  133. package/{dist/layout → layout}/Icons.js +7 -7
  134. package/layout/types.d.ts +57 -0
  135. package/layout/types.js +5 -0
  136. package/link/Link.d.ts +4 -0
  137. package/link/Link.js +131 -0
  138. package/link/Link.stories.tsx +186 -0
  139. package/link/Link.test.js +83 -0
  140. package/link/types.d.ts +54 -0
  141. package/link/types.js +5 -0
  142. package/list/List.d.ts +4 -0
  143. package/list/List.js +47 -0
  144. package/list/List.stories.tsx +95 -0
  145. package/list/types.d.ts +7 -0
  146. package/list/types.js +5 -0
  147. package/main.d.ts +47 -0
  148. package/{dist/main.js → main.js} +125 -99
  149. package/number-input/NumberInput.d.ts +4 -0
  150. package/number-input/NumberInput.js +76 -0
  151. package/number-input/NumberInput.stories.tsx +115 -0
  152. package/number-input/NumberInput.test.js +506 -0
  153. package/number-input/NumberInputContext.d.ts +4 -0
  154. package/{dist/number-input → number-input}/NumberInputContext.js +5 -2
  155. package/number-input/numberInputContextTypes.d.ts +19 -0
  156. package/number-input/numberInputContextTypes.js +5 -0
  157. package/number-input/types.d.ts +124 -0
  158. package/number-input/types.js +5 -0
  159. package/package.json +38 -28
  160. package/{dist/paginator → paginator}/Icons.js +9 -9
  161. package/paginator/Paginator.d.ts +4 -0
  162. package/paginator/Paginator.js +171 -0
  163. package/paginator/Paginator.stories.tsx +63 -0
  164. package/paginator/Paginator.test.js +266 -0
  165. package/paginator/types.d.ts +38 -0
  166. package/paginator/types.js +5 -0
  167. package/password-input/PasswordInput.d.ts +4 -0
  168. package/{dist/password-input → password-input}/PasswordInput.js +45 -77
  169. package/password-input/PasswordInput.stories.tsx +131 -0
  170. package/password-input/PasswordInput.test.js +180 -0
  171. package/password-input/types.d.ts +110 -0
  172. package/password-input/types.js +5 -0
  173. package/progress-bar/ProgressBar.d.ts +4 -0
  174. package/{dist/progress-bar → progress-bar}/ProgressBar.js +23 -95
  175. package/progress-bar/ProgressBar.stories.jsx +58 -0
  176. package/progress-bar/ProgressBar.test.js +65 -0
  177. package/progress-bar/types.d.ts +37 -0
  178. package/progress-bar/types.js +5 -0
  179. package/quick-nav/QuickNav.d.ts +4 -0
  180. package/quick-nav/QuickNav.js +112 -0
  181. package/quick-nav/QuickNav.stories.tsx +237 -0
  182. package/quick-nav/types.d.ts +21 -0
  183. package/quick-nav/types.js +5 -0
  184. package/radio/Radio.d.ts +4 -0
  185. package/{dist/radio → radio}/Radio.js +23 -59
  186. package/radio/Radio.stories.tsx +192 -0
  187. package/radio/Radio.test.js +71 -0
  188. package/radio/types.d.ts +54 -0
  189. package/radio/types.js +5 -0
  190. package/radio-group/Radio.d.ts +4 -0
  191. package/radio-group/Radio.js +141 -0
  192. package/radio-group/RadioGroup.d.ts +4 -0
  193. package/radio-group/RadioGroup.js +282 -0
  194. package/radio-group/RadioGroup.stories.tsx +100 -0
  195. package/radio-group/RadioGroup.test.js +695 -0
  196. package/radio-group/types.d.ts +114 -0
  197. package/radio-group/types.js +5 -0
  198. package/resultsetTable/ResultsetTable.d.ts +4 -0
  199. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +43 -147
  200. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  201. package/resultsetTable/ResultsetTable.test.js +306 -0
  202. package/resultsetTable/types.d.ts +67 -0
  203. package/resultsetTable/types.js +5 -0
  204. package/row/Row.d.ts +3 -0
  205. package/row/Row.js +127 -0
  206. package/row/Row.stories.tsx +237 -0
  207. package/row/types.d.ts +28 -0
  208. package/row/types.js +5 -0
  209. package/select/Icons.d.ts +10 -0
  210. package/select/Icons.js +93 -0
  211. package/select/Listbox.d.ts +4 -0
  212. package/select/Listbox.js +152 -0
  213. package/select/Option.d.ts +4 -0
  214. package/select/Option.js +110 -0
  215. package/select/Select.d.ts +4 -0
  216. package/select/Select.js +645 -0
  217. package/select/Select.stories.tsx +594 -0
  218. package/select/Select.test.js +2120 -0
  219. package/select/types.d.ts +213 -0
  220. package/select/types.js +5 -0
  221. package/sidenav/Sidenav.d.ts +9 -0
  222. package/{dist/sidenav → sidenav}/Sidenav.js +21 -64
  223. package/sidenav/Sidenav.stories.tsx +182 -0
  224. package/sidenav/Sidenav.test.js +56 -0
  225. package/sidenav/types.d.ts +50 -0
  226. package/sidenav/types.js +5 -0
  227. package/slider/Slider.d.ts +4 -0
  228. package/{dist/slider → slider}/Slider.js +76 -162
  229. package/slider/Slider.stories.tsx +177 -0
  230. package/slider/Slider.test.js +150 -0
  231. package/slider/types.d.ts +82 -0
  232. package/slider/types.js +5 -0
  233. package/spinner/Spinner.d.ts +4 -0
  234. package/spinner/Spinner.js +250 -0
  235. package/spinner/Spinner.stories.jsx +103 -0
  236. package/spinner/Spinner.test.js +64 -0
  237. package/spinner/types.d.ts +32 -0
  238. package/spinner/types.js +5 -0
  239. package/stack/Stack.d.ts +3 -0
  240. package/stack/Stack.js +97 -0
  241. package/stack/Stack.stories.tsx +164 -0
  242. package/stack/types.d.ts +24 -0
  243. package/stack/types.js +5 -0
  244. package/switch/Switch.d.ts +4 -0
  245. package/switch/Switch.js +195 -0
  246. package/switch/Switch.stories.tsx +160 -0
  247. package/switch/Switch.test.js +98 -0
  248. package/switch/types.d.ts +62 -0
  249. package/switch/types.js +5 -0
  250. package/table/Table.d.ts +4 -0
  251. package/{dist/table → table}/Table.js +12 -26
  252. package/table/Table.stories.jsx +277 -0
  253. package/table/Table.test.js +26 -0
  254. package/table/types.d.ts +21 -0
  255. package/table/types.js +5 -0
  256. package/tabs/Tabs.d.ts +4 -0
  257. package/tabs/Tabs.js +211 -0
  258. package/tabs/Tabs.stories.tsx +112 -0
  259. package/tabs/Tabs.test.js +140 -0
  260. package/tabs/types.d.ts +82 -0
  261. package/tabs/types.js +5 -0
  262. package/tag/Tag.d.ts +4 -0
  263. package/tag/Tag.js +183 -0
  264. package/tag/Tag.stories.tsx +142 -0
  265. package/tag/Tag.test.js +60 -0
  266. package/tag/types.d.ts +69 -0
  267. package/tag/types.js +5 -0
  268. package/text/Text.d.ts +7 -0
  269. package/text/Text.js +30 -0
  270. package/text/Text.stories.tsx +19 -0
  271. package/text-input/Suggestion.d.ts +4 -0
  272. package/text-input/Suggestion.js +55 -0
  273. package/text-input/TextInput.d.ts +4 -0
  274. package/{dist/text-input → text-input}/TextInput.js +284 -485
  275. package/text-input/TextInput.stories.tsx +474 -0
  276. package/text-input/TextInput.test.js +1712 -0
  277. package/text-input/types.d.ts +178 -0
  278. package/text-input/types.js +5 -0
  279. package/textarea/Textarea.d.ts +4 -0
  280. package/{dist/textarea → textarea}/Textarea.js +50 -142
  281. package/textarea/Textarea.stories.jsx +157 -0
  282. package/textarea/Textarea.test.js +437 -0
  283. package/textarea/types.d.ts +137 -0
  284. package/textarea/types.js +5 -0
  285. package/toggle-group/ToggleGroup.d.ts +4 -0
  286. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +36 -148
  287. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  288. package/toggle-group/ToggleGroup.test.js +156 -0
  289. package/toggle-group/types.d.ts +105 -0
  290. package/toggle-group/types.js +5 -0
  291. package/useTheme.d.ts +2 -0
  292. package/{dist/useTheme.js → useTheme.js} +2 -2
  293. package/useTranslatedLabels.d.ts +2 -0
  294. package/useTranslatedLabels.js +20 -0
  295. package/wizard/Wizard.d.ts +4 -0
  296. package/wizard/Wizard.js +292 -0
  297. package/wizard/Wizard.stories.tsx +214 -0
  298. package/wizard/Wizard.test.js +141 -0
  299. package/wizard/types.d.ts +64 -0
  300. package/wizard/types.js +5 -0
  301. package/README.md +0 -66
  302. package/babel.config.js +0 -8
  303. package/dist/BackgroundColorContext.js +0 -46
  304. package/dist/ThemeContext.js +0 -248
  305. package/dist/V3Textarea/V3Textarea.js +0 -264
  306. package/dist/accordion/Accordion.js +0 -353
  307. package/dist/accordion-group/AccordionGroup.js +0 -186
  308. package/dist/alert/index.d.ts +0 -51
  309. package/dist/badge/Badge.js +0 -63
  310. package/dist/card/Card.js +0 -254
  311. package/dist/checkbox/Checkbox.stories.js +0 -144
  312. package/dist/checkbox/readme.md +0 -116
  313. package/dist/chip/Chip.js +0 -265
  314. package/dist/date/Date.js +0 -379
  315. package/dist/date/Date.stories.js +0 -205
  316. package/dist/date/readme.md +0 -73
  317. package/dist/date-input/index.d.ts +0 -95
  318. package/dist/dialog/Dialog.js +0 -218
  319. package/dist/file-input/FileInput.js +0 -644
  320. package/dist/file-input/FileItem.js +0 -280
  321. package/dist/file-input/index.d.ts +0 -81
  322. package/dist/footer/Footer.js +0 -421
  323. package/dist/header/Header.js +0 -434
  324. package/dist/input-text/Icons.js +0 -22
  325. package/dist/input-text/InputText.js +0 -705
  326. package/dist/layout/ApplicationLayout.js +0 -327
  327. package/dist/link/Link.js +0 -237
  328. package/dist/link/readme.md +0 -51
  329. package/dist/main.d.ts +0 -8
  330. package/dist/new-select/NewSelect.js +0 -836
  331. package/dist/new-select/index.d.ts +0 -53
  332. package/dist/number-input/NumberInput.js +0 -136
  333. package/dist/number-input/index.d.ts +0 -113
  334. package/dist/paginator/Paginator.js +0 -283
  335. package/dist/password-input/index.d.ts +0 -94
  336. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  337. package/dist/progress-bar/readme.md +0 -63
  338. package/dist/radio/Radio.stories.js +0 -166
  339. package/dist/radio/readme.md +0 -70
  340. package/dist/select/Select.js +0 -549
  341. package/dist/slider/readme.md +0 -64
  342. package/dist/spinner/Spinner.js +0 -381
  343. package/dist/spinner/Spinner.stories.js +0 -183
  344. package/dist/spinner/readme.md +0 -65
  345. package/dist/switch/Switch.js +0 -222
  346. package/dist/switch/Switch.stories.js +0 -134
  347. package/dist/switch/readme.md +0 -133
  348. package/dist/tabs/Tabs.js +0 -343
  349. package/dist/tabs/Tabs.stories.js +0 -130
  350. package/dist/tabs/readme.md +0 -78
  351. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  352. package/dist/tabs-for-sections/readme.md +0 -78
  353. package/dist/tag/Tag.js +0 -282
  354. package/dist/text-input/index.d.ts +0 -135
  355. package/dist/textarea/index.d.ts +0 -117
  356. package/dist/toggle/Toggle.js +0 -220
  357. package/dist/toggle/Toggle.stories.js +0 -297
  358. package/dist/toggle/readme.md +0 -80
  359. package/dist/upload/Upload.js +0 -205
  360. package/dist/upload/Upload.stories.js +0 -72
  361. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  362. package/dist/upload/buttons-upload/Icons.js +0 -40
  363. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  364. package/dist/upload/dragAndDropArea/Icons.js +0 -39
  365. package/dist/upload/file-upload/FileToUpload.js +0 -189
  366. package/dist/upload/file-upload/Icons.js +0 -66
  367. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  368. package/dist/upload/readme.md +0 -37
  369. package/dist/upload/transaction/Icons.js +0 -160
  370. package/dist/upload/transaction/Transaction.js +0 -148
  371. package/dist/upload/transactions/Transactions.js +0 -138
  372. package/dist/wizard/Icons.js +0 -65
  373. package/dist/wizard/Wizard.js +0 -405
  374. package/test/Accordion.test.js +0 -33
  375. package/test/AccordionGroup.test.js +0 -125
  376. package/test/Alert.test.js +0 -53
  377. package/test/Box.test.js +0 -10
  378. package/test/Button.test.js +0 -18
  379. package/test/Card.test.js +0 -30
  380. package/test/Checkbox.test.js +0 -45
  381. package/test/Chip.test.js +0 -25
  382. package/test/Date.test.js +0 -397
  383. package/test/DateInput.test.js +0 -242
  384. package/test/Dialog.test.js +0 -23
  385. package/test/Dropdown.test.js +0 -145
  386. package/test/FileInput.test.js +0 -201
  387. package/test/Footer.test.js +0 -94
  388. package/test/Header.test.js +0 -34
  389. package/test/Heading.test.js +0 -35
  390. package/test/InputText.test.js +0 -248
  391. package/test/Link.test.js +0 -43
  392. package/test/NumberInput.test.js +0 -259
  393. package/test/Paginator.test.js +0 -177
  394. package/test/PasswordInput.test.js +0 -83
  395. package/test/ProgressBar.test.js +0 -35
  396. package/test/Radio.test.js +0 -37
  397. package/test/ResultsetTable.test.js +0 -329
  398. package/test/Select.test.js +0 -212
  399. package/test/Sidenav.test.js +0 -45
  400. package/test/Slider.test.js +0 -74
  401. package/test/Spinner.test.js +0 -32
  402. package/test/Switch.test.js +0 -45
  403. package/test/Table.test.js +0 -36
  404. package/test/Tabs.test.js +0 -109
  405. package/test/TabsForSections.test.js +0 -34
  406. package/test/Tag.test.js +0 -32
  407. package/test/TextInput.test.js +0 -732
  408. package/test/Textarea.test.js +0 -193
  409. package/test/ToggleGroup.test.js +0 -85
  410. package/test/Upload.test.js +0 -60
  411. package/test/V3TextArea.test.js +0 -51
  412. package/test/Wizard.test.js +0 -130
  413. package/test/mocks/pngMock.js +0 -1
  414. 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,12 @@ 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
272
269
  },
273
270
  button: {
274
271
  labelFontLineHeight: globalTokens.type_leading_normal,
@@ -395,23 +392,6 @@ var componentTokens = {
395
392
  disabledIconColor: globalTokens.hal_grey_l_60,
396
393
  focusColor: globalTokens.hal_blue_l_50
397
394
  },
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
395
  dateInput: {
416
396
  pickerFontFamily: globalTokens.type_sans,
417
397
  pickerBackgroundColor: globalTokens.hal_white,
@@ -505,15 +485,14 @@ var componentTokens = {
505
485
  disabledDropLabelFontColor: globalTokens.hal_grey_l_60,
506
486
  focusDropBorderColor: globalTokens.hal_blue_l_50,
507
487
  disabledDropBorderColor: globalTokens.hal_grey_l_60,
508
- focusDropBackgroundColor: globalTokens.color_blue_50,
509
- hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
488
+ dragoverDropBackgroundColor: globalTokens.color_blue_50,
510
489
  activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
511
490
  errorFileItemBorderColor: globalTokens.hal_red_s_41,
512
491
  errorFileItemBackgroundColor: globalTokens.color_red_50,
513
- errorFileItemIconBackgroundColor: globalTokens.color_red_700,
492
+ errorFilePreviewBackgroundColor: globalTokens.color_red_700,
514
493
  errorFileItemIconColor: globalTokens.hal_red_s_41,
515
494
  fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
516
- fileItemIconColor: globalTokens.color_grey_600,
495
+ deleteFileItemColor: globalTokens.hal_black,
517
496
  errorMessageFontColor: globalTokens.hal_red_s_41,
518
497
  labelFontFamily: globalTokens.type_sans,
519
498
  labelFontSize: globalTokens.type_scale_02,
@@ -533,13 +512,19 @@ var componentTokens = {
533
512
  errorMessageFontFamily: globalTokens.type_sans,
534
513
  errorMessageFontSize: globalTokens.type_scale_01,
535
514
  errorMessageFontWeight: globalTokens.type_regular,
536
- errorMessageLineHeight: globalTokens.type_scale_05,
515
+ errorMessageLineHeight: globalTokens.type_leading_normal,
537
516
  dropBorderThickness: globalTokens.border_width_1,
538
517
  dropBorderStyle: globalTokens.border_dashed,
539
518
  dropBorderRadius: globalTokens.border_radius_large,
540
519
  fileItemBorderThickness: globalTokens.border_width_1,
541
520
  fileItemBorderStyle: globalTokens.border_solid,
542
- fileItemBorderRadius: globalTokens.border_radius_medium
521
+ fileItemBorderRadius: globalTokens.border_radius_medium,
522
+ hoverDeleteFileItemBackgroundColor: globalTokens.color_grey_a_100,
523
+ activeDeleteFileItemBackgroundColor: globalTokens.color_grey_a_300,
524
+ focusDeleteFileItemBorderColor: globalTokens.hal_blue_l_50,
525
+ filePreviewBackgroundColor: globalTokens.hal_grey_l_95,
526
+ filePreviewIconColor: globalTokens.color_grey_600,
527
+ errorFilePreviewIconColor: globalTokens.hal_red_s_41
543
528
  },
544
529
  footer: {
545
530
  height: "124px",
@@ -559,7 +544,7 @@ var componentTokens = {
559
544
  copyrightFontStyle: globalTokens.type_normal,
560
545
  copyrightFontWeight: globalTokens.type_regular,
561
546
  copyrightFontColor: globalTokens.hal_white,
562
- logo: _Icons2["default"],
547
+ logo: "",
563
548
  logoHeight: "32px",
564
549
  logoWidth: "auto",
565
550
  socialLinksSize: "24px",
@@ -577,8 +562,8 @@ var componentTokens = {
577
562
  hamburguerTextTransform: globalTokens.type_uppercase,
578
563
  hamburguerIconColor: globalTokens.hal_black,
579
564
  hamburguerHoverColor: globalTokens.mediumGreyBlack,
580
- logo: _Icons.dxcLogo,
581
- logoResponsive: _Icons.dxcLogo,
565
+ logo: "",
566
+ logoResponsive: "",
582
567
  logoHeight: "40px",
583
568
  logoWidth: "auto",
584
569
  menuBackgroundColor: globalTokens.hal_white,
@@ -595,104 +580,47 @@ var componentTokens = {
595
580
  paddingLeft: "24px",
596
581
  underlinedColor: globalTokens.hal_black,
597
582
  underlinedThickness: "2px",
598
- underlinedStyle: "solid"
583
+ underlinedStyle: "solid",
584
+ contentColor: globalTokens.hal_black,
585
+ contentColorOnDark: globalTokens.hal_white
599
586
  },
600
587
  heading: {
601
588
  level1FontColor: globalTokens.inherit,
602
589
  level1FontFamily: globalTokens.type_sans,
603
- level1FontSize: globalTokens.type_scale_08,
590
+ level1FontSize: globalTokens.type_scale_07,
604
591
  level1FontStyle: globalTokens.type_normal,
605
- level1FontWeight: globalTokens.type_regular,
592
+ level1FontWeight: globalTokens.type_semibold,
606
593
  level1LineHeight: globalTokens.type_leading_compact_01,
607
594
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
608
595
  level2FontColor: globalTokens.inherit,
609
596
  level2FontFamily: globalTokens.type_sans,
610
- level2FontSize: globalTokens.type_scale_07,
597
+ level2FontSize: globalTokens.type_scale_05,
611
598
  level2FontStyle: globalTokens.type_normal,
612
- level2FontWeight: globalTokens.type_regular,
599
+ level2FontWeight: globalTokens.type_semibold,
613
600
  level2LineHeight: globalTokens.type_leading_normal,
614
601
  level2LetterSpacing: globalTokens.type_spacing_normal,
615
602
  level3FontColor: globalTokens.inherit,
616
603
  level3FontFamily: globalTokens.type_sans,
617
- level3FontSize: globalTokens.type_scale_06,
604
+ level3FontSize: globalTokens.type_scale_04,
618
605
  level3FontStyle: globalTokens.type_normal,
619
- level3FontWeight: globalTokens.type_regular,
606
+ level3FontWeight: globalTokens.type_semibold,
620
607
  level3LineHeight: globalTokens.type_leading_compact_01,
621
608
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
622
609
  level4FontColor: globalTokens.inherit,
623
610
  level4FontFamily: globalTokens.type_sans,
624
- level4FontSize: globalTokens.type_scale_05,
611
+ level4FontSize: globalTokens.type_scale_03,
625
612
  level4FontStyle: globalTokens.type_normal,
626
- level4FontWeight: globalTokens.type_regular,
613
+ level4FontWeight: globalTokens.type_semibold,
627
614
  level4LineHeight: globalTokens.type_leading_normal,
628
615
  level4LetterSpacing: globalTokens.type_spacing_normal,
629
616
  level5FontColor: globalTokens.inherit,
630
617
  level5FontFamily: globalTokens.type_sans,
631
- level5FontSize: globalTokens.type_scale_04,
618
+ level5FontSize: globalTokens.type_scale_02,
632
619
  level5FontStyle: globalTokens.type_normal,
633
- level5FontWeight: globalTokens.type_regular,
620
+ level5FontWeight: globalTokens.type_semibold,
634
621
  level5LineHeight: globalTokens.type_leading_normal,
635
622
  level5LetterSpacing: globalTokens.type_spacing_wide_01
636
623
  },
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
624
  textInput: {
697
625
  fontFamily: globalTokens.type_sans,
698
626
  enabledBorderColor: globalTokens.hal_black,
@@ -707,8 +635,10 @@ var componentTokens = {
707
635
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
708
636
  errorBorderColor: globalTokens.hal_red_s_41,
709
637
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
710
- hoverErrorBorderColor: "#fe0123",
638
+ hoverErrorBorderColor: globalTokens.color_red_600,
711
639
  hoverErrorBorderColorOnDark: "#fe677b",
640
+ inputMarginTop: globalTokens.spacing_02,
641
+ inputMarginBottom: globalTokens.spacing_02,
712
642
  errorMessageColor: globalTokens.hal_red_s_41,
713
643
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
714
644
  errorIconColor: globalTokens.hal_red_s_41,
@@ -738,7 +668,7 @@ var componentTokens = {
738
668
  disabledSuffixColor: globalTokens.hal_grey_l_75,
739
669
  disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
740
670
  disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
741
- placeholderFontColor: "#808080",
671
+ placeholderFontColor: "#000000b3",
742
672
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
743
673
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
744
674
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -769,20 +699,25 @@ var componentTokens = {
769
699
  focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
770
700
  activeActionBackgroundColor: globalTokens.hal_grey_l_80,
771
701
  activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
702
+ listDialogBackgroundColor: globalTokens.hal_white,
703
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
704
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
772
705
  listOptionFontColor: globalTokens.hal_black,
773
- listOptionFontSize: globalTokens.type_scale_03,
706
+ listOptionFontSize: globalTokens.type_scale_02,
774
707
  listOptionFontStyle: globalTokens.type_normal,
775
708
  listOptionFontWeight: globalTokens.type_regular,
776
709
  systemMessageFontColor: globalTokens.hal_grey_s_40,
777
- errorMessageBorderColor: globalTokens.hal_red_s_41,
778
- errorMessageBackgroundColor: globalTokens.hal_red_l_95,
710
+ errorListDialogFontColor: globalTokens.hal_black,
711
+ errorListDialogBackgroundColor: globalTokens.color_red_50,
712
+ errorListDialogBorderColor: globalTokens.hal_red_s_41,
779
713
  hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
780
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
714
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
715
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50
781
716
  },
782
717
  link: {
783
718
  fontColor: globalTokens.hal_blue_s_35,
784
719
  fontFamily: globalTokens.inherit,
785
- fontSize: globalTokens.type_scale_root,
720
+ fontSize: globalTokens.inherit,
786
721
  fontStyle: globalTokens.type_normal,
787
722
  fontWeight: globalTokens.type_regular,
788
723
  iconSize: "16px",
@@ -807,15 +742,15 @@ var componentTokens = {
807
742
  fontStyle: globalTokens.type_normal,
808
743
  fontWeight: globalTokens.type_regular,
809
744
  fontTextTransform: "none",
810
- height: "64px",
811
- width: "100%",
812
- marginRight: "40px",
813
- marginLeft: "20px",
745
+ verticalPadding: "0.75rem",
746
+ horizontalPadding: "2rem",
747
+ marginRight: "2rem",
748
+ marginLeft: "2rem",
814
749
  itemsPerPageSelectorMarginLeft: "0px",
815
- itemsPerPageSelectorMarginRight: "30px",
750
+ itemsPerPageSelectorMarginRight: "1rem",
816
751
  pageSelectorMarginRight: "30px",
817
752
  pageSelectorMarginLeft: "0px",
818
- totalItemsContainerMarginRight: "30px",
753
+ totalItemsContainerMarginRight: "3rem",
819
754
  totalItemsContainerMarginLeft: "0px"
820
755
  },
821
756
  progressBar: {
@@ -847,6 +782,24 @@ var componentTokens = {
847
782
  overlayColor: globalTokens.black,
848
783
  overlayOpacity: "0.8"
849
784
  },
785
+ quickNav: {
786
+ fontColor: globalTokens.hal_grey_s_40,
787
+ hoverFontColor: globalTokens.hal_purple_d_70,
788
+ selectedFontColor: globalTokens.hal_purple_s_38,
789
+ dividerBorderColor: globalTokens.hal_grey_l_75,
790
+ focusBorderColor: globalTokens.hal_blue_l_50,
791
+ focusBorderStyle: globalTokens.border_solid,
792
+ focusBorderThickness: globalTokens.border_width_2,
793
+ focusBorderRadius: globalTokens.border_width_2,
794
+ paddingTop: globalTokens.spacing_03,
795
+ paddingBottom: globalTokens.spacing_03,
796
+ paddingLeft: globalTokens.spacing_05,
797
+ paddingRight: globalTokens.spacing_05,
798
+ fontFamily: globalTokens.type_sans,
799
+ fontSize: globalTokens.type_scale_02,
800
+ fontStyle: globalTokens.type_normal,
801
+ fontWeight: globalTokens.type_regular
802
+ },
850
803
  radio: {
851
804
  circleLabelSpacing: "10px",
852
805
  circleSize: "24px",
@@ -865,148 +818,110 @@ var componentTokens = {
865
818
  fontStyle: globalTokens.type_normal,
866
819
  fontWeight: globalTokens.type_regular
867
820
  },
868
- select: {
821
+ radioGroup: {
869
822
  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,
823
+ radioInputColor: globalTokens.hal_blue_l_45,
824
+ hoverRadioInputColor: globalTokens.hal_blue_s_35,
825
+ focusBorderColor: globalTokens.hal_blue_l_50,
826
+ activeRadioInputColor: globalTokens.hal_blue_d_20,
827
+ errorRadioInputColor: globalTokens.hal_red_s_41,
828
+ hoverErrorRadioInputColor: globalTokens.hal_red_d_30,
829
+ activeErrorRadioInputColor: globalTokens.hal_red_d_20,
830
+ readonlyRadioInputColor: globalTokens.hal_grey_l_60,
831
+ hoverReadonlyRadioInputColor: globalTokens.color_grey_600,
832
+ activeReadonlyRadioInputColor: globalTokens.hal_grey_s_40,
833
+ disabledRadioInputColor: globalTokens.hal_grey_l_60,
834
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
835
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
836
+ disabledRadioInputLabelFontColor: globalTokens.hal_grey_l_60,
837
+ errorMessageColor: globalTokens.hal_red_s_41,
875
838
  labelFontColor: globalTokens.hal_black,
876
- labelFontColorOnDark: globalTokens.hal_white,
877
- labelFontSize: globalTokens.type_scale_03,
839
+ labelFontSize: globalTokens.type_scale_02,
878
840
  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
841
+ labelFontWeight: globalTokens.type_semibold,
842
+ labelLineHeight: globalTokens.type_leading_loose_01,
843
+ optionalLabelFontWeight: globalTokens.type_regular,
844
+ helperTextFontColor: globalTokens.hal_black,
845
+ helperTextFontSize: globalTokens.type_scale_01,
846
+ helperTextFontStyle: globalTokens.type_normal,
847
+ helperTextFontWeight: globalTokens.type_regular,
848
+ helperTextLineHeight: globalTokens.type_leading_normal,
849
+ radioInputLabelFontColor: globalTokens.hal_black,
850
+ radioInputLabelFontSize: globalTokens.type_scale_02,
851
+ radioInputLabelFontStyle: globalTokens.type_normal,
852
+ radioInputLabelFontWeight: globalTokens.type_regular,
853
+ radioInputLabelLineHeight: globalTokens.type_leading_loose_01,
854
+ groupLabelMargin: globalTokens.spacing_03,
855
+ radioInputLabelMargin: globalTokens.spacing_03,
856
+ groupVerticalGutter: globalTokens.spacing_02,
857
+ groupHorizontalGutter: globalTokens.spacing_07
926
858
  },
927
- newSelect: {
859
+ select: {
928
860
  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",
861
+ disabledColor: globalTokens.hal_grey_l_60,
862
+ enabledInputBorderColor: globalTokens.hal_black,
863
+ hoverInputBorderColor: globalTokens.hal_purple_l_65,
864
+ focusInputBorderColor: globalTokens.hal_blue_l_50,
865
+ errorInputBorderColor: globalTokens.hal_red_s_41,
866
+ hoverInputErrorBorderColor: globalTokens.color_red_600,
867
+ disabledInputBorderColor: globalTokens.hal_grey_l_60,
868
+ disabledInputBackgroundColor: globalTokens.hal_grey_l_95,
869
+ inputMarginTop: globalTokens.spacing_02,
870
+ inputMarginBottom: globalTokens.spacing_02,
943
871
  errorMessageColor: globalTokens.hal_red_s_41,
944
- errorMessageColorOnDark: globalTokens.hal_red_l_60,
945
872
  errorIconColor: globalTokens.hal_red_s_41,
946
- errorIconColorOnDark: globalTokens.hal_red_l_60,
947
873
  labelFontColor: globalTokens.hal_black,
948
- labelFontColorOnDark: globalTokens.hal_white,
949
874
  labelFontSize: globalTokens.type_scale_02,
950
875
  labelFontStyle: globalTokens.type_normal,
951
876
  labelFontWeight: globalTokens.type_semibold,
952
- disabledLabelFontColor: globalTokens.hal_grey_l_60,
953
- disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
877
+ labelLineHeight: globalTokens.type_leading_loose_01,
954
878
  optionalLabelFontWeight: globalTokens.type_regular,
955
879
  helperTextFontColor: globalTokens.hal_black,
956
- helperTextFontColorOnDark: globalTokens.hal_white,
957
880
  helperTextFontSize: globalTokens.type_scale_01,
958
881
  helperTextFontStyle: globalTokens.type_normal,
959
882
  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,
883
+ helperTextLineHeight: globalTokens.type_leading_normal,
884
+ placeholderFontColor: "#000000b3",
966
885
  valueFontColor: globalTokens.hal_black,
967
- valueFontColorOnDark: globalTokens.hal_white,
968
886
  valueFontSize: globalTokens.type_scale_03,
969
887
  valueFontStyle: globalTokens.type_normal,
970
888
  valueFontWeight: globalTokens.type_regular,
971
- disabledValueFontColor: globalTokens.hal_grey_l_60,
972
- disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
973
889
  actionIconColor: globalTokens.hal_black,
974
- actionIconColorOnDark: globalTokens.hal_white,
975
- disabledActionIconColor: globalTokens.hal_grey_l_60,
976
- disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
977
890
  hoverActionIconColor: globalTokens.hal_black,
978
- hoverActionIconColorOnDark: globalTokens.hal_white,
979
- focusActionIconColor: globalTokens.hal_black,
980
- focusActionIconColorOnDark: globalTokens.hal_white,
981
891
  activeActionIconColor: globalTokens.hal_black,
982
- activeActionIconColorOnDark: globalTokens.hal_black,
983
892
  actionBackgroundColor: globalTokens.transparent,
984
- actionBackgroundColorOnDark: globalTokens.transparent,
985
- disabledActionBackgroundColor: globalTokens.transparent,
986
- disabledActionBackgroundColorOnDark: globalTokens.transparent,
987
893
  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
894
  activeActionBackgroundColor: globalTokens.hal_grey_l_80,
992
- activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
993
895
  listOptionFontColor: globalTokens.hal_black,
994
896
  listOptionFontSize: globalTokens.type_scale_02,
995
897
  listOptionFontStyle: globalTokens.type_normal,
996
898
  listOptionFontWeight: globalTokens.type_regular,
899
+ listOptionIconColor: globalTokens.hal_black,
900
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
901
+ listGroupLabelFontWeight: globalTokens.type_semibold,
902
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50,
997
903
  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
904
+ collapseIndicatorColor: globalTokens.hal_black,
905
+ listDialogBackgroundColor: globalTokens.hal_white,
906
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
907
+ selectedListOptionBackgroundColor: globalTokens.hal_blue_l_95,
908
+ selectedHoverListOptionBackgroundColor: globalTokens.color_blue_200,
909
+ selectedActiveListOptionBackgroundColor: globalTokens.hal_blue_l_80,
910
+ selectedListOptionIconColor: globalTokens.hal_blue_d_20,
911
+ unselectedHoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
912
+ unselectedActiveListOptionBackgroundColor: globalTokens.hal_grey_l_90,
913
+ selectionIndicatorFontColor: globalTokens.hal_black,
914
+ selectionIndicatorFontSize: globalTokens.type_scale_01,
915
+ selectionIndicatorFontStyle: globalTokens.type_regular,
916
+ selectionIndicatorFontWeight: globalTokens.type_normal,
917
+ selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
918
+ selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
919
+ enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
920
+ enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
921
+ hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
922
+ hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
923
+ activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
924
+ activeSelectionIndicatorActionIconColor: globalTokens.hal_black
1010
925
  },
1011
926
  sidenav: {
1012
927
  backgroundColor: globalTokens.hal_grey_l_95,
@@ -1044,9 +959,13 @@ var componentTokens = {
1044
959
  },
1045
960
  slider: {
1046
961
  fontFamily: globalTokens.type_sans,
1047
- fontSize: globalTokens.type_scale_03,
1048
- fontStyle: globalTokens.type_normal,
1049
- fontWeight: globalTokens.type_regular,
962
+ limitValuesFontColor: globalTokens.hal_black,
963
+ limitValuesFontColorOnDark: globalTokens.hal_white,
964
+ limitValuesFontSize: globalTokens.type_scale_03,
965
+ limitValuesFontStyle: globalTokens.type_normal,
966
+ limitValuesFontWeight: globalTokens.type_regular,
967
+ limitValuesFontLetterSpacing: globalTokens.type_spacing_normal,
968
+ disabledLimitValuesFontColor: globalTokens.hal_grey_l_60,
1050
969
  labelFontFamily: globalTokens.type_sans,
1051
970
  labelFontSize: globalTokens.type_scale_02,
1052
971
  labelFontStyle: globalTokens.type_normal,
@@ -1060,9 +979,13 @@ var componentTokens = {
1060
979
  fontColor: globalTokens.hal_black,
1061
980
  fontColorOnDark: globalTokens.hal_white,
1062
981
  labelFontColor: globalTokens.hal_black,
982
+ labelFontColorOnDark: globalTokens.hal_white,
1063
983
  helperTextFontColor: globalTokens.hal_black,
1064
- disabledFontColor: globalTokens.hal_grey_l_60,
1065
- fontLetterSpacing: globalTokens.type_spacing_normal,
984
+ helperTextFontColorOnDark: globalTokens.hal_white,
985
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
986
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
987
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
988
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1066
989
  thumbHeight: "12px",
1067
990
  thumbWidth: "12px",
1068
991
  hoverThumbHeight: "14px",
@@ -1110,7 +1033,7 @@ var componentTokens = {
1110
1033
  },
1111
1034
  spinner: {
1112
1035
  trackCircleColor: "#5f249f",
1113
- trackCircleColorOnDark: "#a46ede",
1036
+ trackCircleColorOverlay: "#a46ede",
1114
1037
  totalCircleColor: globalTokens.white,
1115
1038
  labelFontFamily: globalTokens.type_sans,
1116
1039
  labelFontSize: globalTokens.type_scale_02,
@@ -1144,30 +1067,30 @@ var componentTokens = {
1144
1067
  "switch": {
1145
1068
  checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1146
1069
  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,
1070
+ checkedThumbBackgroundColor: globalTokens.hal_white,
1071
+ checkedThumbBackgroundColorOnDark: globalTokens.hal_white,
1072
+ uncheckedTrackBackgroundColor: globalTokens.hal_grey_l_75,
1073
+ uncheckedTrackBackgroundColorOnDark: globalTokens.hal_grey_l_75,
1074
+ uncheckedThumbBackgroundColor: globalTokens.hal_white,
1075
+ uncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1076
+ disabledCheckedTrackBackgroundColor: globalTokens.hal_purple_l_95,
1154
1077
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
1155
- disabledCheckedThumbBackgroundColor: globalTokens.white,
1156
- disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
1157
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
1078
+ disabledCheckedThumbBackgroundColor: globalTokens.hal_white,
1079
+ disabledCheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1080
+ disabledUncheckedTrackBackgroundColor: globalTokens.hal_grey_l_95,
1158
1081
  disabledUncheckedTrackBackgroundColorOnDark: "#363636",
1159
- disabledUncheckedThumbBackgroundColor: globalTokens.white,
1160
- disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
1161
- disabledLabelFontColor: globalTokens.lighterBlack,
1082
+ disabledUncheckedThumbBackgroundColor: globalTokens.hal_white,
1083
+ disabledUncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1084
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1162
1085
  disabledLabelFontColorOnDark: "#575757",
1163
1086
  disabledLabelFontStyle: globalTokens.type_normal,
1164
1087
  labelFontFamily: globalTokens.type_sans,
1165
1088
  labelFontSize: globalTokens.type_scale_root,
1166
1089
  labelFontStyle: globalTokens.type_normal,
1167
1090
  labelFontWeight: globalTokens.type_regular,
1168
- labelFontColor: globalTokens.black,
1169
- labelFontColorOnDark: globalTokens.white,
1170
- thumbFocusColor: globalTokens.blue,
1091
+ labelFontColor: globalTokens.hal_black,
1092
+ labelFontColorOnDark: globalTokens.hal_white,
1093
+ thumbFocusColor: globalTokens.hal_blue_l_50,
1171
1094
  thumbFocusColorOnDark: "#1682FF",
1172
1095
  thumbHeight: "24px",
1173
1096
  thumbWidth: "24px",
@@ -1280,8 +1203,10 @@ var componentTokens = {
1280
1203
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1281
1204
  errorBorderColor: globalTokens.hal_red_s_41,
1282
1205
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
1283
- hoverErrorBorderColor: "#fe0123",
1206
+ hoverErrorBorderColor: globalTokens.color_red_600,
1284
1207
  hoverErrorBorderColorOnDark: "#fe677b",
1208
+ inputMarginTop: globalTokens.spacing_02,
1209
+ inputMarginBottom: globalTokens.spacing_02,
1285
1210
  errorMessageColor: globalTokens.hal_red_s_41,
1286
1211
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
1287
1212
  labelFontColor: globalTokens.hal_black,
@@ -1301,7 +1226,7 @@ var componentTokens = {
1301
1226
  helperTextLineHeight: globalTokens.type_leading_normal,
1302
1227
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1303
1228
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1304
- placeholderFontColor: "#808080",
1229
+ placeholderFontColor: "#000000b3",
1305
1230
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1306
1231
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1307
1232
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -1361,156 +1286,65 @@ var componentTokens = {
1361
1286
  containerBorderRadius: globalTokens.border_radius_large,
1362
1287
  optionFocusBorderThickness: globalTokens.border_width_2
1363
1288
  },
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
1289
  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",
1290
+ visitedStepFontColor: globalTokens.hal_black,
1291
+ visitedStepBackgroundColor: globalTokens.hal_white,
1292
+ visitedStepBorderColor: globalTokens.hal_black,
1293
+ unvisitedStepFontColor: globalTokens.hal_grey_s_40,
1294
+ unvisitedLabelFontColor: globalTokens.hal_grey_s_40,
1295
+ unvisitedHelperTextFontColor: globalTokens.hal_grey_s_40,
1296
+ unvisitedStepBackgroundColor: globalTokens.transparent,
1297
+ unvisitedStepBorderColor: globalTokens.hal_grey_s_40,
1298
+ selectedStepFontColor: globalTokens.white,
1299
+ selectedStepBackgroundColor: globalTokens.hal_purple_s_38,
1300
+ selectedStepBorderColor: globalTokens.hal_purple_s_38,
1301
+ selectedLabelFontColor: globalTokens.hal_black,
1302
+ selectedHelperTextFontColor: globalTokens.hal_black,
1303
+ selectedStepWidth: "32px",
1304
+ selectedStepHeight: "32px",
1305
+ selectedStepBorderThickness: "2px",
1306
+ selectedStepBorderStyle: "solid",
1307
+ selectedStepBorderRadius: "45px",
1308
+ stepFontSize: globalTokens.type_scale_03,
1309
+ stepFontFamily: globalTokens.type_sans,
1310
+ stepFontStyle: globalTokens.type_normal,
1311
+ stepFontWeight: globalTokens.type_regular,
1312
+ stepFontTracking: globalTokens.type_spacing_wide_02,
1313
+ stepIconSize: "20px",
1314
+ stepWidth: "32px",
1315
+ stepHeight: "32px",
1316
+ stepBorderThickness: "2px",
1317
+ stepBorderStyle: "solid",
1318
+ stepBorderRadius: "45px",
1319
+ visitedLabelFontColor: globalTokens.hal_black,
1475
1320
  labelFontSize: globalTokens.type_scale_03,
1476
1321
  labelFontFamily: globalTokens.type_sans,
1477
1322
  labelFontStyle: globalTokens.type_normal,
1478
1323
  labelFontWeight: globalTokens.type_regular,
1479
- labelLetterSpacing: globalTokens.type_spacing_normal,
1324
+ labelFontTracking: globalTokens.type_spacing_normal,
1480
1325
  labelFontTextTransform: "none",
1481
1326
  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,
1327
+ helperTextFontSize: globalTokens.type_scale_02,
1328
+ helperTextFontFamily: globalTokens.type_sans,
1329
+ helperTextFontStyle: globalTokens.type_normal,
1330
+ helperTextFontWeight: globalTokens.type_regular,
1331
+ helperTextFontTracking: globalTokens.type_spacing_normal,
1332
+ helperTextFontTextTransform: "none",
1333
+ visitedHelperTextFontColor: globalTokens.hal_black,
1334
+ helperTextTextAlign: "left",
1335
+ disabledStepBackgroundColor: globalTokens.hal_grey_l_95,
1336
+ disabledStepFontColor: globalTokens.hal_grey_l_60,
1337
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1338
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1339
+ disabledStepBorderColor: globalTokens.hal_grey_l_95,
1340
+ disabledStepWidth: "32px",
1341
+ disabledStepHeight: "32px",
1342
+ disabledStepBorderThickness: "2px",
1343
+ disabledStepBorderStyle: "solid",
1344
+ disabledStepBorderRadius: "45px",
1511
1345
  separatorBorderThickness: "1px",
1512
1346
  separatorBorderStyle: "solid",
1513
- separatorColor: globalTokens.lightGrey,
1347
+ separatorColor: globalTokens.hal_grey_s_40,
1514
1348
  focusColor: globalTokens.hal_blue_l_50
1515
1349
  }
1516
1350
  };
@@ -1526,12 +1360,11 @@ var spaces = {
1526
1360
  };
1527
1361
  exports.spaces = spaces;
1528
1362
  var responsiveSizes = {
1529
- mobileSmall: "320",
1530
- mobileMedium: "375",
1531
- mobileLarge: "425",
1532
- tablet: "768",
1533
- laptop: "1024",
1534
- desktop: "1440"
1363
+ xsmall: "20",
1364
+ small: "30",
1365
+ medium: "45",
1366
+ large: "66",
1367
+ xlarge: "90"
1535
1368
  };
1536
1369
  exports.responsiveSizes = responsiveSizes;
1537
1370
  var typeface = {
@@ -1566,4 +1399,86 @@ var typeface = {
1566
1399
  textTransform: "uppercase"
1567
1400
  }
1568
1401
  };
1569
- exports.typeface = typeface;
1402
+ exports.typeface = typeface;
1403
+ var defaultTranslatedComponentLabels = {
1404
+ formFields: {
1405
+ optionalLabel: "(Optional)",
1406
+ requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
1407
+ requiredValueErrorMessage: "This field is required. Please, enter a value.",
1408
+ formatRequestedErrorMessage: "Please match the format requested.",
1409
+ lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
1410
+ return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
1411
+ },
1412
+ logoAlternativeText: "Logo"
1413
+ },
1414
+ alert: {
1415
+ infoTitleText: "information",
1416
+ successTitleText: "success",
1417
+ warningTitleText: "warning",
1418
+ errorTitleText: "error"
1419
+ },
1420
+ dateInput: {
1421
+ invalidDateErrorMessage: "Invalid date."
1422
+ },
1423
+ fileInput: {
1424
+ fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1425
+ fileSizeLessThanErrorMessage: "File size must be less than max size.",
1426
+ multipleButtonLabelDefault: "Select files",
1427
+ singleButtonLabelDefault: "Select file",
1428
+ dropAreaButtonLabelDefault: "Select",
1429
+ multipleDropAreaLabelDefault: "or drop files",
1430
+ singleDropAreaLabelDefault: "or drop a file"
1431
+ },
1432
+ footer: {
1433
+ copyrightText: function copyrightText(year) {
1434
+ return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
1435
+ }
1436
+ },
1437
+ numberInput: {
1438
+ valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
1439
+ return "Value must be greater than or equal to ".concat(value, ".");
1440
+ },
1441
+ valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
1442
+ return "Value must be less than or equal to ".concat(value, ".");
1443
+ },
1444
+ decrementValueTitle: "Decrement value",
1445
+ incrementValueTitle: "Increment value"
1446
+ },
1447
+ paginator: {
1448
+ itemsPerPageText: "Items per page ",
1449
+ minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
1450
+ return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
1451
+ },
1452
+ goToPageText: "Go to page:",
1453
+ pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
1454
+ return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
1455
+ }
1456
+ },
1457
+ passwordInput: {
1458
+ inputShowPasswordTitle: "Show password",
1459
+ inputHidePasswordTitle: "Hide password"
1460
+ },
1461
+ quickNav: {
1462
+ contentTitle: "Contents"
1463
+ },
1464
+ radioGroup: {
1465
+ optionalItemLabelDefault: "N/A"
1466
+ },
1467
+ select: {
1468
+ noMatchesErrorMessage: "No matches found",
1469
+ actionClearSelectionTitle: "Clear selection",
1470
+ actionClearSearchTitle: "Clear search"
1471
+ },
1472
+ textInput: {
1473
+ clearFieldActionTitle: "Clear field",
1474
+ searchingMessage: "Searching...",
1475
+ fetchingDataErrorMessage: "Error fetching data"
1476
+ },
1477
+ calendar: {
1478
+ days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1479
+ daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
1480
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1481
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
1482
+ }
1483
+ };
1484
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;