@dxc-technology/halstack-react 0.0.0-4e9134c → 0.0.0-4ee80da

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 (502) 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 +294 -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/alert/Alert.js +293 -0
  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 +250 -0
  58. package/checkbox/Checkbox.stories.tsx +208 -0
  59. package/checkbox/Checkbox.test.js +155 -0
  60. package/checkbox/types.d.ts +68 -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}/fonts/OpenSans-Bold.ttf +0 -0
  70. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  71. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  72. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  73. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  74. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  75. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  76. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  77. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  78. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  79. package/{dist/common → common}/utils.js +0 -0
  80. package/common/variables.js +1512 -0
  81. package/date-input/Calendar.d.ts +4 -0
  82. package/date-input/Calendar.js +258 -0
  83. package/date-input/DateInput.d.ts +4 -0
  84. package/date-input/DateInput.js +227 -0
  85. package/date-input/DateInput.stories.tsx +151 -0
  86. package/date-input/DateInput.test.js +752 -0
  87. package/date-input/DatePicker.d.ts +4 -0
  88. package/date-input/DatePicker.js +160 -0
  89. package/date-input/YearPicker.d.ts +4 -0
  90. package/date-input/YearPicker.js +115 -0
  91. package/date-input/types.d.ts +160 -0
  92. package/date-input/types.js +5 -0
  93. package/dialog/Dialog.d.ts +4 -0
  94. package/dialog/Dialog.js +162 -0
  95. package/dialog/Dialog.stories.tsx +267 -0
  96. package/dialog/Dialog.test.js +70 -0
  97. package/dialog/types.d.ts +44 -0
  98. package/dialog/types.js +5 -0
  99. package/dropdown/Dropdown.d.ts +4 -0
  100. package/dropdown/Dropdown.js +391 -0
  101. package/dropdown/Dropdown.stories.tsx +312 -0
  102. package/dropdown/Dropdown.test.js +585 -0
  103. package/dropdown/DropdownMenu.d.ts +4 -0
  104. package/dropdown/DropdownMenu.js +80 -0
  105. package/dropdown/DropdownMenuItem.d.ts +4 -0
  106. package/dropdown/DropdownMenuItem.js +92 -0
  107. package/dropdown/types.d.ts +100 -0
  108. package/dropdown/types.js +5 -0
  109. package/file-input/FileInput.d.ts +4 -0
  110. package/file-input/FileInput.js +551 -0
  111. package/file-input/FileInput.stories.tsx +535 -0
  112. package/file-input/FileInput.test.js +498 -0
  113. package/file-input/FileItem.d.ts +4 -0
  114. package/file-input/FileItem.js +161 -0
  115. package/file-input/types.d.ts +129 -0
  116. package/file-input/types.js +5 -0
  117. package/flex/Flex.d.ts +4 -0
  118. package/flex/Flex.js +69 -0
  119. package/flex/Flex.stories.tsx +103 -0
  120. package/flex/types.d.ts +32 -0
  121. package/flex/types.js +5 -0
  122. package/footer/Footer.d.ts +4 -0
  123. package/footer/Footer.js +185 -0
  124. package/footer/Footer.stories.tsx +137 -0
  125. package/footer/Footer.test.js +109 -0
  126. package/footer/Icons.d.ts +2 -0
  127. package/footer/Icons.js +77 -0
  128. package/footer/types.d.ts +66 -0
  129. package/footer/types.js +5 -0
  130. package/header/Header.d.ts +7 -0
  131. package/header/Header.js +305 -0
  132. package/header/Header.stories.tsx +172 -0
  133. package/header/Header.test.js +79 -0
  134. package/header/Icons.d.ts +2 -0
  135. package/header/Icons.js +34 -0
  136. package/header/types.d.ts +48 -0
  137. package/header/types.js +5 -0
  138. package/heading/Heading.d.ts +4 -0
  139. package/{dist/heading → heading}/Heading.js +31 -94
  140. package/heading/Heading.stories.tsx +54 -0
  141. package/heading/Heading.test.js +186 -0
  142. package/heading/types.d.ts +33 -0
  143. package/heading/types.js +5 -0
  144. package/inset/Inset.d.ts +3 -0
  145. package/inset/Inset.js +51 -0
  146. package/inset/Inset.stories.tsx +229 -0
  147. package/inset/types.d.ts +37 -0
  148. package/inset/types.js +5 -0
  149. package/layout/ApplicationLayout.d.ts +20 -0
  150. package/layout/ApplicationLayout.js +171 -0
  151. package/layout/ApplicationLayout.stories.tsx +162 -0
  152. package/layout/Icons.d.ts +5 -0
  153. package/layout/Icons.js +66 -0
  154. package/layout/SidenavContext.d.ts +5 -0
  155. package/layout/SidenavContext.js +19 -0
  156. package/layout/types.d.ts +42 -0
  157. package/layout/types.js +5 -0
  158. package/link/Link.d.ts +4 -0
  159. package/link/Link.js +136 -0
  160. package/link/Link.stories.tsx +193 -0
  161. package/link/Link.test.js +83 -0
  162. package/link/types.d.ts +54 -0
  163. package/link/types.js +5 -0
  164. package/main.d.ts +44 -0
  165. package/{dist/main.js → main.js} +127 -109
  166. package/number-input/NumberInput.d.ts +4 -0
  167. package/number-input/NumberInput.js +76 -0
  168. package/number-input/NumberInput.stories.tsx +115 -0
  169. package/number-input/NumberInput.test.js +542 -0
  170. package/number-input/NumberInputContext.d.ts +4 -0
  171. package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +6 -3
  172. package/number-input/numberInputContextTypes.d.ts +19 -0
  173. package/number-input/numberInputContextTypes.js +5 -0
  174. package/number-input/types.d.ts +124 -0
  175. package/number-input/types.js +5 -0
  176. package/package.json +46 -39
  177. package/paginator/Icons.js +66 -0
  178. package/paginator/Paginator.d.ts +4 -0
  179. package/paginator/Paginator.js +171 -0
  180. package/paginator/Paginator.stories.tsx +63 -0
  181. package/paginator/Paginator.test.js +308 -0
  182. package/paginator/types.d.ts +38 -0
  183. package/paginator/types.js +5 -0
  184. package/paragraph/Paragraph.d.ts +6 -0
  185. package/paragraph/Paragraph.js +38 -0
  186. package/paragraph/Paragraph.stories.tsx +44 -0
  187. package/password-input/PasswordInput.d.ts +4 -0
  188. package/{dist/password/Password.js → password-input/PasswordInput.js} +51 -81
  189. package/password-input/PasswordInput.stories.tsx +131 -0
  190. package/password-input/PasswordInput.test.js +181 -0
  191. package/password-input/types.d.ts +110 -0
  192. package/password-input/types.js +5 -0
  193. package/progress-bar/ProgressBar.d.ts +4 -0
  194. package/progress-bar/ProgressBar.js +176 -0
  195. package/progress-bar/ProgressBar.stories.jsx +60 -0
  196. package/progress-bar/ProgressBar.test.js +110 -0
  197. package/progress-bar/types.d.ts +36 -0
  198. package/progress-bar/types.js +5 -0
  199. package/quick-nav/QuickNav.d.ts +4 -0
  200. package/quick-nav/QuickNav.js +117 -0
  201. package/quick-nav/QuickNav.stories.tsx +342 -0
  202. package/quick-nav/types.d.ts +21 -0
  203. package/quick-nav/types.js +5 -0
  204. package/radio-group/Radio.d.ts +4 -0
  205. package/radio-group/Radio.js +156 -0
  206. package/radio-group/RadioGroup.d.ts +4 -0
  207. package/radio-group/RadioGroup.js +283 -0
  208. package/radio-group/RadioGroup.stories.tsx +101 -0
  209. package/radio-group/RadioGroup.test.js +722 -0
  210. package/radio-group/types.d.ts +114 -0
  211. package/radio-group/types.js +5 -0
  212. package/resultsetTable/Icons.d.ts +7 -0
  213. package/resultsetTable/Icons.js +51 -0
  214. package/resultsetTable/ResultsetTable.d.ts +4 -0
  215. package/resultsetTable/ResultsetTable.js +195 -0
  216. package/resultsetTable/ResultsetTable.stories.tsx +300 -0
  217. package/resultsetTable/ResultsetTable.test.js +330 -0
  218. package/resultsetTable/types.d.ts +67 -0
  219. package/resultsetTable/types.js +5 -0
  220. package/select/Icons.d.ts +10 -0
  221. package/select/Icons.js +93 -0
  222. package/select/Listbox.d.ts +4 -0
  223. package/select/Listbox.js +198 -0
  224. package/select/Option.d.ts +4 -0
  225. package/select/Option.js +110 -0
  226. package/select/Select.d.ts +4 -0
  227. package/select/Select.js +645 -0
  228. package/select/Select.stories.tsx +624 -0
  229. package/select/Select.test.js +2233 -0
  230. package/select/types.d.ts +210 -0
  231. package/select/types.js +5 -0
  232. package/sidenav/Sidenav.d.ts +10 -0
  233. package/sidenav/Sidenav.js +268 -0
  234. package/sidenav/Sidenav.stories.tsx +180 -0
  235. package/sidenav/Sidenav.test.js +44 -0
  236. package/sidenav/types.d.ts +73 -0
  237. package/sidenav/types.js +5 -0
  238. package/slider/Slider.d.ts +4 -0
  239. package/slider/Slider.js +343 -0
  240. package/slider/Slider.stories.tsx +183 -0
  241. package/slider/Slider.test.js +250 -0
  242. package/slider/types.d.ts +86 -0
  243. package/slider/types.js +5 -0
  244. package/spinner/Spinner.d.ts +4 -0
  245. package/spinner/Spinner.js +250 -0
  246. package/spinner/Spinner.stories.jsx +103 -0
  247. package/spinner/Spinner.test.js +64 -0
  248. package/spinner/types.d.ts +32 -0
  249. package/spinner/types.js +5 -0
  250. package/switch/Switch.d.ts +4 -0
  251. package/switch/Switch.js +262 -0
  252. package/switch/Switch.stories.tsx +138 -0
  253. package/switch/Switch.test.js +225 -0
  254. package/switch/types.d.ts +66 -0
  255. package/switch/types.js +5 -0
  256. package/table/Table.d.ts +4 -0
  257. package/{dist/table → table}/Table.js +14 -24
  258. package/table/Table.stories.jsx +277 -0
  259. package/table/Table.test.js +26 -0
  260. package/table/types.d.ts +21 -0
  261. package/table/types.js +5 -0
  262. package/tabs/Tab.d.ts +4 -0
  263. package/tabs/Tab.js +135 -0
  264. package/tabs/Tabs.d.ts +4 -0
  265. package/tabs/Tabs.js +467 -0
  266. package/tabs/Tabs.stories.tsx +186 -0
  267. package/tabs/Tabs.test.js +351 -0
  268. package/tabs/types.d.ts +92 -0
  269. package/tabs/types.js +5 -0
  270. package/tabs-nav/NavTabs.d.ts +8 -0
  271. package/tabs-nav/NavTabs.js +125 -0
  272. package/tabs-nav/NavTabs.stories.tsx +170 -0
  273. package/tabs-nav/NavTabs.test.js +82 -0
  274. package/tabs-nav/Tab.d.ts +4 -0
  275. package/tabs-nav/Tab.js +130 -0
  276. package/tabs-nav/types.d.ts +53 -0
  277. package/tabs-nav/types.js +5 -0
  278. package/tag/Tag.d.ts +4 -0
  279. package/tag/Tag.js +183 -0
  280. package/tag/Tag.stories.tsx +142 -0
  281. package/tag/Tag.test.js +60 -0
  282. package/tag/types.d.ts +69 -0
  283. package/tag/types.js +5 -0
  284. package/text-input/Icons.d.ts +8 -0
  285. package/text-input/Icons.js +60 -0
  286. package/text-input/Suggestion.d.ts +4 -0
  287. package/text-input/Suggestion.js +57 -0
  288. package/text-input/Suggestions.d.ts +4 -0
  289. package/text-input/Suggestions.js +134 -0
  290. package/text-input/TextInput.d.ts +4 -0
  291. package/text-input/TextInput.js +677 -0
  292. package/text-input/TextInput.stories.tsx +481 -0
  293. package/text-input/TextInput.test.js +1624 -0
  294. package/text-input/types.d.ts +197 -0
  295. package/text-input/types.js +5 -0
  296. package/textarea/Textarea.d.ts +4 -0
  297. package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +91 -156
  298. package/textarea/Textarea.stories.jsx +157 -0
  299. package/textarea/Textarea.test.js +437 -0
  300. package/textarea/types.d.ts +137 -0
  301. package/textarea/types.js +5 -0
  302. package/toggle-group/ToggleGroup.d.ts +4 -0
  303. package/toggle-group/ToggleGroup.js +215 -0
  304. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  305. package/toggle-group/ToggleGroup.test.js +156 -0
  306. package/toggle-group/types.d.ts +105 -0
  307. package/toggle-group/types.js +5 -0
  308. package/typography/Typography.d.ts +4 -0
  309. package/typography/Typography.js +131 -0
  310. package/typography/Typography.stories.tsx +198 -0
  311. package/typography/types.d.ts +18 -0
  312. package/typography/types.js +5 -0
  313. package/useTheme.d.ts +2 -0
  314. package/{dist/useTheme.js → useTheme.js} +2 -2
  315. package/useTranslatedLabels.d.ts +2 -0
  316. package/useTranslatedLabels.js +20 -0
  317. package/wizard/Wizard.d.ts +4 -0
  318. package/wizard/Wizard.js +285 -0
  319. package/wizard/Wizard.stories.tsx +233 -0
  320. package/wizard/Wizard.test.js +141 -0
  321. package/wizard/types.d.ts +65 -0
  322. package/wizard/types.js +5 -0
  323. package/README.md +0 -66
  324. package/babel.config.js +0 -8
  325. package/dist/BackgroundColorContext.js +0 -46
  326. package/dist/ThemeContext.js +0 -216
  327. package/dist/accordion/Accordion.js +0 -346
  328. package/dist/accordion/Accordion.stories.js +0 -207
  329. package/dist/accordion/readme.md +0 -96
  330. package/dist/accordion-group/AccordionGroup.js +0 -188
  331. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  332. package/dist/accordion-group/readme.md +0 -70
  333. package/dist/alert/Alert.js +0 -388
  334. package/dist/alert/Alert.stories.js +0 -158
  335. package/dist/alert/close.svg +0 -4
  336. package/dist/alert/error.svg +0 -4
  337. package/dist/alert/info.svg +0 -4
  338. package/dist/alert/readme.md +0 -43
  339. package/dist/alert/success.svg +0 -4
  340. package/dist/alert/warning.svg +0 -4
  341. package/dist/badge/Badge.js +0 -63
  342. package/dist/box/Box.js +0 -164
  343. package/dist/button/Button.js +0 -232
  344. package/dist/button/Button.stories.js +0 -224
  345. package/dist/button/readme.md +0 -93
  346. package/dist/card/Card.js +0 -254
  347. package/dist/checkbox/Checkbox.js +0 -294
  348. package/dist/checkbox/Checkbox.stories.js +0 -144
  349. package/dist/checkbox/readme.md +0 -116
  350. package/dist/chip/Chip.js +0 -269
  351. package/dist/common/RequiredComponent.js +0 -40
  352. package/dist/common/variables.js +0 -1350
  353. package/dist/date/Date.js +0 -381
  354. package/dist/date/Date.stories.js +0 -205
  355. package/dist/date/readme.md +0 -73
  356. package/dist/dialog/Dialog.js +0 -235
  357. package/dist/dialog/Dialog.stories.js +0 -217
  358. package/dist/dialog/readme.md +0 -32
  359. package/dist/dropdown/Dropdown.js +0 -504
  360. package/dist/dropdown/Dropdown.stories.js +0 -249
  361. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  362. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  363. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  364. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  365. package/dist/dropdown/readme.md +0 -69
  366. package/dist/footer/Footer.js +0 -407
  367. package/dist/footer/Footer.stories.js +0 -94
  368. package/dist/footer/dxc_logo.svg +0 -15
  369. package/dist/footer/readme.md +0 -41
  370. package/dist/header/Header.js +0 -431
  371. package/dist/header/Header.stories.js +0 -176
  372. package/dist/header/close_icon.svg +0 -1
  373. package/dist/header/dxc_logo_black.svg +0 -8
  374. package/dist/header/hamb_menu_black.svg +0 -1
  375. package/dist/header/hamb_menu_white.svg +0 -1
  376. package/dist/header/readme.md +0 -33
  377. package/dist/input-text/InputText.js +0 -672
  378. package/dist/input-text/InputText.stories.js +0 -209
  379. package/dist/input-text/error.svg +0 -1
  380. package/dist/input-text/readme.md +0 -91
  381. package/dist/layout/ApplicationLayout.js +0 -331
  382. package/dist/layout/facebook.svg +0 -45
  383. package/dist/layout/linkedin.svg +0 -50
  384. package/dist/layout/twitter.svg +0 -53
  385. package/dist/link/Link.js +0 -241
  386. package/dist/link/readme.md +0 -51
  387. package/dist/new-date/NewDate.js +0 -395
  388. package/dist/new-input-text/NewInputText.js +0 -957
  389. package/dist/number/Number.js +0 -134
  390. package/dist/paginator/Paginator.js +0 -283
  391. package/dist/paginator/images/next.svg +0 -3
  392. package/dist/paginator/images/nextPage.svg +0 -3
  393. package/dist/paginator/images/previous.svg +0 -3
  394. package/dist/paginator/images/previousPage.svg +0 -3
  395. package/dist/paginator/readme.md +0 -50
  396. package/dist/password/styles.css +0 -3
  397. package/dist/progress-bar/ProgressBar.js +0 -206
  398. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  399. package/dist/progress-bar/readme.md +0 -63
  400. package/dist/radio/Radio.js +0 -209
  401. package/dist/radio/Radio.stories.js +0 -166
  402. package/dist/radio/readme.md +0 -70
  403. package/dist/resultsetTable/ResultsetTable.js +0 -358
  404. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  405. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  406. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  407. package/dist/select/Select.js +0 -563
  408. package/dist/select/Select.stories.js +0 -235
  409. package/dist/select/readme.md +0 -72
  410. package/dist/sidenav/Sidenav.js +0 -183
  411. package/dist/slider/Slider.js +0 -315
  412. package/dist/slider/Slider.stories.js +0 -241
  413. package/dist/slider/readme.md +0 -64
  414. package/dist/spinner/Spinner.js +0 -214
  415. package/dist/spinner/Spinner.stories.js +0 -183
  416. package/dist/spinner/readme.md +0 -65
  417. package/dist/switch/Switch.js +0 -222
  418. package/dist/switch/Switch.stories.js +0 -134
  419. package/dist/switch/readme.md +0 -133
  420. package/dist/tabs/Tabs.js +0 -343
  421. package/dist/tabs/Tabs.stories.js +0 -130
  422. package/dist/tabs/readme.md +0 -78
  423. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  424. package/dist/tabs-for-sections/readme.md +0 -78
  425. package/dist/tag/Tag.js +0 -280
  426. package/dist/textarea/Textarea.js +0 -260
  427. package/dist/toggle/Toggle.js +0 -220
  428. package/dist/toggle/Toggle.stories.js +0 -297
  429. package/dist/toggle/readme.md +0 -80
  430. package/dist/toggle-group/ToggleGroup.js +0 -241
  431. package/dist/toggle-group/readme.md +0 -82
  432. package/dist/upload/Upload.js +0 -205
  433. package/dist/upload/Upload.stories.js +0 -72
  434. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  435. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  436. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  437. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -325
  438. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  439. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  440. package/dist/upload/file-upload/FileToUpload.js +0 -184
  441. package/dist/upload/file-upload/audio-icon.svg +0 -4
  442. package/dist/upload/file-upload/close.svg +0 -4
  443. package/dist/upload/file-upload/file-icon.svg +0 -4
  444. package/dist/upload/file-upload/video-icon.svg +0 -4
  445. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  446. package/dist/upload/readme.md +0 -37
  447. package/dist/upload/transaction/Transaction.js +0 -171
  448. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  449. package/dist/upload/transaction/audio-icon.svg +0 -4
  450. package/dist/upload/transaction/error-icon.svg +0 -4
  451. package/dist/upload/transaction/file-icon-err.svg +0 -4
  452. package/dist/upload/transaction/file-icon.svg +0 -4
  453. package/dist/upload/transaction/image-icon-err.svg +0 -4
  454. package/dist/upload/transaction/image-icon.svg +0 -4
  455. package/dist/upload/transaction/success-icon.svg +0 -4
  456. package/dist/upload/transaction/video-icon-err.svg +0 -4
  457. package/dist/upload/transaction/video-icon.svg +0 -4
  458. package/dist/upload/transactions/Transactions.js +0 -138
  459. package/dist/wizard/Wizard.js +0 -411
  460. package/dist/wizard/invalid_icon.svg +0 -5
  461. package/dist/wizard/valid_icon.svg +0 -5
  462. package/dist/wizard/validation-wrong.svg +0 -6
  463. package/test/Accordion.test.js +0 -33
  464. package/test/AccordionGroup.test.js +0 -125
  465. package/test/Alert.test.js +0 -53
  466. package/test/Box.test.js +0 -10
  467. package/test/Button.test.js +0 -18
  468. package/test/Card.test.js +0 -30
  469. package/test/Checkbox.test.js +0 -45
  470. package/test/Chip.test.js +0 -25
  471. package/test/Date.test.js +0 -393
  472. package/test/Dialog.test.js +0 -23
  473. package/test/Dropdown.test.js +0 -145
  474. package/test/Footer.test.js +0 -99
  475. package/test/Header.test.js +0 -39
  476. package/test/Heading.test.js +0 -35
  477. package/test/InputText.test.js +0 -240
  478. package/test/Link.test.js +0 -43
  479. package/test/NewDate.test.js +0 -200
  480. package/test/NewInputText.test.js +0 -817
  481. package/test/NewTextarea.test.js +0 -202
  482. package/test/Number.test.js +0 -241
  483. package/test/Paginator.test.js +0 -177
  484. package/test/Password.test.js +0 -76
  485. package/test/ProgressBar.test.js +0 -35
  486. package/test/Radio.test.js +0 -37
  487. package/test/ResultsetTable.test.js +0 -330
  488. package/test/Select.test.js +0 -192
  489. package/test/Sidenav.test.js +0 -45
  490. package/test/Slider.test.js +0 -82
  491. package/test/Spinner.test.js +0 -27
  492. package/test/Switch.test.js +0 -45
  493. package/test/Table.test.js +0 -36
  494. package/test/Tabs.test.js +0 -109
  495. package/test/TabsForSections.test.js +0 -34
  496. package/test/Tag.test.js +0 -32
  497. package/test/TextArea.test.js +0 -52
  498. package/test/ToggleGroup.test.js +0 -81
  499. package/test/Upload.test.js +0 -60
  500. package/test/Wizard.test.js +0 -130
  501. package/test/mocks/pngMock.js +0 -1
  502. package/test/mocks/svgMock.js +0 -1
@@ -1,1350 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
9
-
10
- var _dxc_logo_black = _interopRequireDefault(require("../header/dxc_logo_black.svg"));
11
-
12
- var _dxc_logo = _interopRequireDefault(require("../footer/dxc_logo.svg"));
13
-
14
- var globalTokens = {
15
- // Color
16
- inherit: "inherit",
17
- transparent: "transparent",
18
- hal_white: "#ffffff",
19
- hal_grey_l_95: "#f2f2f2",
20
- hal_grey_l_90: "#e6e6e6",
21
- hal_grey_l_80: "#cccccc",
22
- hal_grey_l_75: "#bfbfbf",
23
- hal_grey_l_60: "#999999",
24
- hal_grey_s_40: "#666666",
25
- hal_black: "#000000",
26
- hal_purple_l_95: "#f2eafa",
27
- hal_purple_l_90: "#e5d5f6",
28
- hal_purple_l_65: "#a46ede",
29
- hal_purple_s_38: "#5f249f",
30
- hal_purple_d_30: "#4b1c7d",
31
- hal_purple_d_20: "#321353",
32
- hal_blue_l_95: "#e6f4ff",
33
- hal_blue_l_80: "#99d5ff",
34
- hal_blue_l_50: "#0095ff",
35
- hal_blue_l_45: "#0086e6",
36
- hal_blue_s_35: "#0067b3",
37
- hal_blue_d_20: "#003c66",
38
- hal_red_l_95: "#ffe6e9",
39
- hal_red_l_80: "#fe9aa7",
40
- hal_red_l_60: "#fe344f",
41
- hal_red_s_41: "#d0011b",
42
- hal_red_d_30: "#980115",
43
- hal_red_d_20: "#65010e",
44
- hal_green_l_95: "#eafaef",
45
- hal_green_l_80: "#acecbe",
46
- hal_green_s_39: "#24a148",
47
- hal_green_d_30: "#1c7d38",
48
- hal_green_d_20: "#135325",
49
- hal_yellow_l_95: "#fef9e6",
50
- hal_yellow_l_80: "#fbe89d",
51
- hal_yellow_s_57: "#f7cf2b",
52
- hal_yellow_d_40: "#c59f07",
53
- hal_yellow_d_30: "#947705",
54
- hal_orange_s_54: "#f38f20",
55
- black: "#000000",
56
- lightBlack: "#212121",
57
- yellow: "#FFED00",
58
- lightGrey: "#D9D9D9",
59
- darkRed: "#D0011B",
60
- lightRed: "#FF6161",
61
- lightBlue: "#CEE0F5",
62
- lightYellow: "#FCF2BD",
63
- lightPink: "#F9CFCF",
64
- lightGreen: "#DBF1C4",
65
- blue: "#005FCC",
66
- lighterGrey: "#F8F8F8",
67
- red: "#D0011B",
68
- violet: "#8800F6",
69
- darkBlue: "#006BF6",
70
- purple: "#6f2c91",
71
- mediumPurple: "#ead8f3",
72
- lightPurple: "#f5ebf9",
73
- lighterPurple: "#d0bddb",
74
- white: "#ffffff",
75
- darkGrey: "#666666",
76
- mediumGrey: "#bfbfbf",
77
- mediumWhite: "#f9f9f9",
78
- mediumBlue: "#0067b3",
79
- softBlue: "#b1cee6",
80
- darkWhite: "#eeeeee",
81
- lighterBlack: "#b1b1b1",
82
- mediumBlack: "#676767",
83
- mediumGreyBlack: "#dbdbdb",
84
- lightWhite: "#f2f2f2",
85
- softGrey: "#cecece",
86
- softBlack: "#565656",
87
- // Typography
88
- type_sans: "Open Sans, sans-serif",
89
- type_scale_root: "16px",
90
- type_scale_08: "3.75rem",
91
- type_scale_07: "3rem",
92
- type_scale_06: "2rem",
93
- type_scale_05: "1.5rem",
94
- type_scale_04: "1.25rem",
95
- type_scale_03: "1rem",
96
- type_scale_02: "0.875rem",
97
- type_scale_01: "0.75rem",
98
- type_light: "300",
99
- type_regular: "400",
100
- type_semibold: "600",
101
- type_bold: "bold",
102
- type_italic: "italic",
103
- type_normal: "normal",
104
- type_spacing_tight_02: "-0.05em",
105
- type_spacing_tight_01: "-0.025em",
106
- type_spacing_normal: "0",
107
- type_spacing_wide_01: "0.025em",
108
- type_spacing_wide_02: "0.05em",
109
- type_spacing_wide_03: "0.1em",
110
- type_initial: "initial",
111
- type_uppercase: "uppercase",
112
- type_no_line: "none",
113
- type_underline: "underline",
114
- type_line_through: "line-through",
115
- type_leading_compact_03: "1em",
116
- type_leading_compact_02: "1.25em",
117
- type_leading_compact_01: "1.365em",
118
- type_leading_normal: "1.5em",
119
- type_leading_loose_01: "1.75em",
120
- type_leading_loose_02: "2em",
121
- fontSize10: "10px",
122
- // Spacing
123
- spacing_00: "0rem",
124
- spacing_01: "0.125rem",
125
- spacing_02: "0.25rem",
126
- spacing_03: "0.5rem",
127
- spacing_04: "0.75rem",
128
- spacing_05: "1rem",
129
- spacing_06: "1.5rem",
130
- spacing_07: "2rem",
131
- spacing_08: "2.5rem",
132
- spacing_09: "3rem",
133
- spacing_10: "3.5rem",
134
- spacing_11: "4rem",
135
- spacing_12: "5rem",
136
- spacing_13: "6rem",
137
- spacing_14: "7rem",
138
- // Border
139
- border_width_01: "1px",
140
- border_width_02: "2px",
141
- border_radius_01: "2px",
142
- border_radius_02: "4px",
143
- border_solid: "solid",
144
- border_none: "none"
145
- };
146
- exports.globalTokens = globalTokens;
147
- var componentTokens = {
148
- accordion: {
149
- backgroundColor: globalTokens.white,
150
- arrowColor: globalTokens.purple,
151
- fontColorBase: globalTokens.darkGrey,
152
- hoverBackgroundColor: globalTokens.lightPurple,
153
- disabledFontColor: globalTokens.mediumGrey,
154
- customContentFontFamily: globalTokens.type_sans,
155
- customContentFontSize: globalTokens.type_scale_03,
156
- customContentFontWeight: globalTokens.type_light,
157
- customContentFontColor: "",
158
- customContentPanelHeight: "22px",
159
- assistiveTextFontFamily: globalTokens.type_sans,
160
- assistiveTextFontSize: globalTokens.type_scale_03,
161
- assistiveTextFontWeight: globalTokens.type_light,
162
- assistiveTextFontStyle: globalTokens.type_italic,
163
- assistiveTextFontColor: "",
164
- assistiveTextLetterSpacing: globalTokens.type_spacing_wide_01,
165
- assistiveTextMinWidth: "100px",
166
- assistiveTextPaddingRight: "24px",
167
- assistiveTextPaddingLeft: "0px",
168
- titleLabelFontFamily: globalTokens.type_sans,
169
- titleLabelFontSize: globalTokens.type_scale_03,
170
- titleLabelFontWeight: globalTokens.type_regular,
171
- titleLabelFontStyle: globalTokens.type_normal,
172
- titleLabelFontColor: "",
173
- titleLabelPaddingLeft: "0px",
174
- titleLabelPaddingRight: "0px",
175
- titlePaddingTop: "0px",
176
- titlePaddingBottom: "0px",
177
- titleFocusBorderStyle: "solid",
178
- titleFocusBorderThickness: "1px",
179
- titleFocusBorderColor: globalTokens.purple,
180
- borderRadius: "4px",
181
- boxShadowOffsetX: "0px",
182
- boxShadowOffsetY: "6px",
183
- boxShadowBlur: "10px",
184
- boxShadowColor: "#00000024",
185
- iconMaxHeight: "24px",
186
- iconMaxWidth: "24px",
187
- iconMarginLeft: "0px",
188
- iconMarginRigth: "12px",
189
- accordionGroupSeparatorBorderColor: "#00000024",
190
- accordionGroupSeparatorBorderThickness: "1px",
191
- accordionGroupSeparatorBorderRadius: "0px",
192
- accordionGroupSeparatorBorderStyle: "solid"
193
- },
194
- alert: {
195
- overlayColor: globalTokens.black,
196
- infoColor: globalTokens.lightBlue,
197
- successColor: globalTokens.lightGreen,
198
- warningColor: globalTokens.lightYellow,
199
- errorColor: globalTokens.lightPink,
200
- focusColor: globalTokens.blue,
201
- titleFontFamily: globalTokens.type_sans,
202
- titleFontSize: globalTokens.type_scale_01,
203
- titleFontColor: globalTokens.black,
204
- titleFontWeight: globalTokens.type_bold,
205
- titleTextTransform: globalTokens.type_uppercase,
206
- titleFontStyle: globalTokens.type_normal,
207
- titlePaddingRight: "10px",
208
- titlePaddingLeft: "0px",
209
- titlePaddingTop: "0px",
210
- titlePaddingBottom: "0px",
211
- contentFontFamily: globalTokens.type_sans,
212
- contentFontSize: globalTokens.type_scale_01,
213
- contentFontColor: globalTokens.black,
214
- contentFontWeight: globalTokens.type_normal,
215
- contentPaddingLeft: "46px",
216
- contentPaddingRight: "12px",
217
- contentPaddingTop: "8px",
218
- contentPaddingBottom: "20px",
219
- overlayOpacity: "0.8",
220
- boxShadowOffsetX: "0px",
221
- boxShadowOffsetY: "3px",
222
- boxShadowBlur: "6px",
223
- boxShadowColor: "#00000012",
224
- borderRadius: "4px",
225
- borderStyle: "none",
226
- borderThickness: "0px",
227
- borderColor: "transparent",
228
- height: "48px",
229
- inlineTextPaddingLeft: "10px",
230
- inlineTextPaddingRight: "10px",
231
- inlineTextPaddingTop: "0px",
232
- inlineTextPaddingBottom: "0px",
233
- iconPaddingLeft: "12px",
234
- iconPaddingRight: "0px",
235
- iconPaddingTop: "0px",
236
- iconPaddingBottom: "0px",
237
- iconSize: "20px",
238
- textPaddingLeft: "12px",
239
- textPaddingRight: "12px",
240
- textPaddingTop: "0px",
241
- textPaddingBottom: "0px"
242
- },
243
- button: {
244
- primaryBackgroundColor: globalTokens.purple,
245
- primaryBackgroundColorOnDark: "#581B81",
246
- primaryHoverBackgroundColor: globalTokens.black,
247
- primaryHoverBackgroundColorOnDark: "#581B81",
248
- primaryFontColor: "#FFFFFF",
249
- primaryFontColorOnDark: "#FFFFFF",
250
- primaryHoverFontColor: globalTokens.white,
251
- primaryHoverFontColorOnDark: "#000000",
252
- primaryActiveBackgroundColor: globalTokens.mediumBlack,
253
- primaryActiveBackgroundColorOnDark: "#581B81",
254
- primaryDisabledBackgroundColor: globalTokens.lightPurple,
255
- primaryDisabledBackgroundColorOnDark: "#ffffff57",
256
- primaryDisabledFontColor: globalTokens.white,
257
- primaryDisabledFontColorOnDark: "#000000",
258
- primaryBorderThickness: "0px",
259
- primaryBorderColor: "",
260
- primaryBorderColorOnDark: "",
261
- primaryBorderStyle: "none",
262
- primaryBorderRadius: "4px",
263
- primaryFontFamily: globalTokens.type_sans,
264
- primaryFontSize: globalTokens.type_scale_03,
265
- primaryFontWeight: globalTokens.type_regular,
266
- primaryPaddingTop: "12px",
267
- primaryPaddingBottom: "12px",
268
- secondaryOutlinedColor: globalTokens.purple,
269
- secondaryOutlinedColorOnDark: "#6A229A",
270
- secondaryBackgroundColor: globalTokens.transparent,
271
- secondaryBackgroundColorOnDark: "transparent",
272
- secondaryHoverOutlinedColor: globalTokens.black,
273
- secondaryHoverOutlinedColorOnDark: "#6A229A",
274
- secondaryFontColor: globalTokens.black,
275
- secondaryFontColorOnDark: "#FFFFFF",
276
- secondaryHoverFontColor: globalTokens.black,
277
- secondaryHoverFontColorOnDark: "#FFFFFF",
278
- secondaryActiveBackgroundColor: globalTokens.mediumGreyBlack,
279
- secondaryActiveBackgroundColorOnDark: "#FFFFFF29",
280
- secondaryHoverBackgroundColor: globalTokens.darkWhite,
281
- secondaryHoverBackgroundColorOnDark: "#FFFFFF14",
282
- secondaryDisabledOutlinedColor: globalTokens.lightPurple,
283
- secondaryDisabledOutlinedColorOnDark: "#575757",
284
- secondaryDisabledFontColor: globalTokens.lighterBlack,
285
- secondaryDisabledFontColorOnDark: "#575757",
286
- secondaryBorderThickness: "1px",
287
- secondaryBorderStyle: "solid",
288
- secondaryBorderRadius: "4px",
289
- secondaryFontFamily: globalTokens.type_sans,
290
- secondaryFontSize: globalTokens.type_scale_03,
291
- secondaryFontWeight: globalTokens.type_regular,
292
- secondaryPaddingTop: "10px",
293
- secondaryPaddingBottom: "10px",
294
- textBackgroundColor: globalTokens.transparent,
295
- textBackgroundColorOnDark: "transparent",
296
- textHoverBackgroundColor: globalTokens.black,
297
- textHoverBackgroundColorOnDark: "#6A229A80",
298
- textFontColor: globalTokens.purple,
299
- textFontColorOnDark: "#FFFFFF",
300
- textHoverFontColor: globalTokens.white,
301
- textHoverFontColorOnDark: "#FFFFFF",
302
- textActiveBackgroundColor: globalTokens.mediumBlack,
303
- textActiveBackgroundColorOnDark: "#581B81",
304
- textDisabledFontColor: globalTokens.lightPurple,
305
- textDisabledBackgroundColor: "transparent",
306
- textDisabledBackgroundColorOnDark: "transparent",
307
- textDisabledFontColorOnDark: "#FFFFFF80",
308
- textBorderThickness: "0px",
309
- textBorderColor: "",
310
- textBorderColorOnDark: "",
311
- textBorderStyle: "none",
312
- textBorderRadius: "4px",
313
- textFontFamily: globalTokens.type_sans,
314
- textFontSize: globalTokens.type_scale_03,
315
- textFontWeight: globalTokens.type_regular,
316
- textPaddingTop: "12px",
317
- textPaddingBottom: "12px",
318
- focusColor: globalTokens.blue,
319
- labelFontLineHeight: globalTokens.type_leading_normal,
320
- labelLetterSpacing: globalTokens.type_spacing_wide_01,
321
- iconSize: "20px",
322
- height: "40px"
323
- },
324
- box: {
325
- backgroundColor: globalTokens.white,
326
- fontFamily: globalTokens.type_sans,
327
- fontSize: globalTokens.type_scale_02,
328
- fontWeight: globalTokens.type_regular,
329
- fontColor: globalTokens.black,
330
- letterSpacing: globalTokens.type_spacing_wide_01,
331
- borderRadius: "4px",
332
- borderThickness: "0px",
333
- borderStyle: "none",
334
- borderColor: "transparent",
335
- noneShadowDepthShadowOffsetX: "none",
336
- noneShadowDepthShadowOffsetY: "none",
337
- noneShadowDepthShadowBlur: "none",
338
- noneShadowDepthShadowSpread: "none",
339
- noneShadowDepthShadowColor: "transparent",
340
- oneShadowDepthShadowOffsetX: "0px",
341
- oneShadowDepthShadowOffsetY: "3px",
342
- oneShadowDepthShadowBlur: "6px",
343
- oneShadowDepthShadowSpread: "0px",
344
- oneShadowDepthShadowColor: "#00000033",
345
- twoShadowDepthShadowOffsetX: "0px",
346
- twoShadowDepthShadowOffsetY: "3px",
347
- twoShadowDepthShadowBlur: "10px",
348
- twoShadowDepthShadowSpread: "0px",
349
- twoShadowDepthShadowColor: "#00000033"
350
- },
351
- card: {
352
- height: "220px",
353
- width: "400px"
354
- },
355
- checkbox: {
356
- backgroundColorChecked: globalTokens.mediumBlue,
357
- backgroundHoverColorChecked: "#7BB0D6",
358
- backgroundColorCheckedOnDark: "#FFFFFF",
359
- backgroundHoverColorCheckedOnDark: "#B1B1B1",
360
- borderColor: globalTokens.mediumBlue,
361
- borderHoverColor: "#7BB0D6",
362
- borderColorOnDark: "#FFFFFF",
363
- borderHoverColorOnDark: "#B1B1B1",
364
- checkColor: globalTokens.white,
365
- checkColorOnDark: "#0067B3",
366
- fontFamily: globalTokens.type_sans,
367
- fontSize: globalTokens.type_scale_03,
368
- fontWeight: globalTokens.type_normal,
369
- fontColor: globalTokens.inherit,
370
- fontColorOnDark: "#FFFFFF",
371
- disabledBackgroundColorChecked: globalTokens.softBlue,
372
- disabledBackgroundColorCheckedOnDark: globalTokens.softBlue,
373
- disabledBorderColor: globalTokens.softBlue,
374
- disabledBorderColorOnDark: globalTokens.softBlue,
375
- disabledColorOnDark: "#BFBFBF",
376
- disabledCheckColor: globalTokens.white,
377
- disabledCheckColorOnDark: "#FFFFFF",
378
- disabledFontColor: globalTokens.lighterBlack,
379
- disabledFontColorOnDark: "#575757",
380
- focusColor: globalTokens.blue,
381
- checkLabelSpacing: "10px"
382
- },
383
- chip: {
384
- backgroundColor: globalTokens.darkWhite,
385
- borderColor: "transparent",
386
- fontColor: globalTokens.black,
387
- disabledBackgroundColor: globalTokens.mediumWhite,
388
- disabledFontColor: globalTokens.lighterBlack,
389
- fontFamily: globalTokens.type_sans,
390
- fontSize: globalTokens.type_scale_03,
391
- fontWeight: "400",
392
- fontStyle: "normal",
393
- borderRadius: "50px",
394
- borderThickness: "2px",
395
- borderStyle: "solid",
396
- height: "18px",
397
- contentPaddingLeft: "20px",
398
- contentPaddingRight: "20px",
399
- contentPaddingTop: "10px",
400
- contentPaddingBottom: "10px",
401
- iconSize: "24px",
402
- iconPaddingLeft: "0px",
403
- iconPaddingRight: "0px"
404
- },
405
- date: {
406
- pickerSelectedDateBackgroundColor: globalTokens.purple,
407
- pickerSelectedDateColor: globalTokens.white,
408
- pickerBackgroundColor: globalTokens.white,
409
- pickerFontColor: globalTokens.black,
410
- pickerActualDate: globalTokens.lightGrey,
411
- pickerHoverDateBackgroundColor: globalTokens.lightPurple,
412
- pickerHoverDateFontColor: globalTokens.black,
413
- pickerYearColor: globalTokens.black,
414
- pickerMonthColor: globalTokens.black,
415
- pickerWeekLabelColor: globalTokens.black,
416
- pickerBackgroundColorMonthArrows: "transparent",
417
- focusColor: globalTokens.blue,
418
- fontFamily: globalTokens.type_sans,
419
- pickerHeight: "316px",
420
- pickerWidth: "290px"
421
- },
422
- dialog: {
423
- overlayColor: globalTokens.black,
424
- scrollBarThumbColor: globalTokens.darkGrey,
425
- scrollBarTrackColor: globalTokens.lightGrey,
426
- backgroundColor: globalTokens.white,
427
- fontFamily: globalTokens.type_sans,
428
- fontSize: globalTokens.type_scale_03,
429
- fontWeight: globalTokens.type_regular,
430
- fontColor: globalTokens.black,
431
- closeIconWidth: "24px",
432
- closeIconHeight: "24px",
433
- closeIconTopPosition: "20px",
434
- closeIconRightPosition: "20px",
435
- closeIconBackgroundColor: "none",
436
- closeIconBorderColor: "none",
437
- closeIconColor: globalTokens.black,
438
- closeIconBorderThickness: "0px",
439
- closeIconBorderStyle: "solid",
440
- closeIconBorderRadius: "0px",
441
- boxShadowOffsetX: "0px",
442
- boxShadowOffsetY: "1px",
443
- boxShadowBlur: "3px",
444
- boxShadowColor: "rgba(0, 0, 0, 0.2)",
445
- overlayOpacity: "0.7"
446
- },
447
- dropdown: {
448
- buttonBackgroundColor: globalTokens.white,
449
- buttonFontColor: globalTokens.black,
450
- optionsListBackgroundColor: globalTokens.white,
451
- optionsListFontColor: globalTokens.black,
452
- optionsListHoverBackgroundColor: globalTokens.white,
453
- buttonHoverBackgroundColor: globalTokens.lightWhite,
454
- scrollBarThumbColor: globalTokens.darkGrey,
455
- scrollBarTrackColor: globalTokens.lightGrey,
456
- focusColor: globalTokens.mediumBlue,
457
- fontFamily: globalTokens.type_sans,
458
- fontSize: globalTokens.type_scale_03,
459
- buttonFontSize: globalTokens.type_scale_03,
460
- buttonFontStyle: globalTokens.type_normal,
461
- buttonFontWeight: globalTokens.type_regular,
462
- minHeight: "36px",
463
- minWidth: "230px",
464
- borderRadius: "2px",
465
- borderStyle: "none",
466
- borderThickness: "0px",
467
- borderColor: "transparent",
468
- optionsPaddingTop: "6px",
469
- optionsPaddingBottom: "6px",
470
- optionsPaddingLeft: "16px",
471
- optionsPaddingRight: "16px",
472
- caretIconMarginRight: "0",
473
- caretIconMarginLeft: "12px",
474
- caretIconMarginTop: "0px",
475
- caretIconMarginBottom: "0px",
476
- optionsFontColor: "",
477
- optionsFontSize: globalTokens.type_scale_root,
478
- optionsFontStyle: globalTokens.type_normal,
479
- optionsFontWeight: globalTokens.type_regular,
480
- iconSize: "20px",
481
- iconOptionSpacing: "10px",
482
- iconColor: ""
483
- },
484
- footer: {
485
- backgroundColor: globalTokens.black,
486
- bottomLinksDividerColor: "#0095ff",
487
- bottomLinksDividerThickness: "1px",
488
- bottomLinksDividerStyle: "solid",
489
- bottomLinksDividerSpacing: "8px",
490
- bottomLinksFontFamily: globalTokens.type_sans,
491
- bottomLinksFontSize: globalTokens.type_scale_01,
492
- bottomLinksFontStyle: globalTokens.type_normal,
493
- bottomLinksFontWeight: globalTokens.type_regular,
494
- bottomLinksFontColor: "",
495
- bottomLinksTextDecoration: globalTokens.type_no_line,
496
- copyrightFontFamily: globalTokens.type_sans,
497
- copyrightFontSize: globalTokens.type_scale_01,
498
- copyrightFontStyle: globalTokens.type_normal,
499
- copyrightFontWeight: globalTokens.type_regular,
500
- copyrightFontColor: "",
501
- customContentFontFamily: globalTokens.type_sans,
502
- customContentFontSize: globalTokens.type_scale_root,
503
- customContentFontStyle: globalTokens.type_normal,
504
- customContentFontWeight: globalTokens.type_regular,
505
- customContentFontColor: "",
506
- fontColorBase: globalTokens.white,
507
- logo: _dxc_logo["default"],
508
- logoHeight: "32px",
509
- logoWidth: "auto",
510
- minHeight: "124px",
511
- socialIconSize: "24px",
512
- socialIconsGutter: "16px"
513
- },
514
- header: {
515
- backgroundColor: globalTokens.white,
516
- customContentFontFamily: "",
517
- customContentFontStyle: globalTokens.type_normal,
518
- customContentFontColor: "",
519
- customContentFontSize: "",
520
- customContentFontWeight: globalTokens.type_regular,
521
- dropdownBackgroundColor: globalTokens.transparent,
522
- dropdownHoverBackgroundColor: globalTokens.transparent,
523
- fontColorBase: globalTokens.black,
524
- fontFamilyBase: globalTokens.type_sans,
525
- fontSizeBase: globalTokens.type_scale_root,
526
- hamburguerFocusColor: globalTokens.blue,
527
- hamburguerFontFamily: "",
528
- hamburguerFontStyle: globalTokens.type_normal,
529
- hamburguerFontColor: "",
530
- hamburguerFontSize: globalTokens.fontSize10,
531
- hamburguerFontWeight: globalTokens.type_semibold,
532
- hamburguerColor: globalTokens.black,
533
- hamburguerHoverColor: globalTokens.mediumGreyBlack,
534
- hamburguerTextTransform: globalTokens.type_uppercase,
535
- logo: _dxc_logo_black["default"],
536
- logoResponsive: _dxc_logo_black["default"],
537
- logoHeight: "40px",
538
- logoWidth: "auto",
539
- menuBackgroundColor: globalTokens.white,
540
- menuZindex: "2000",
541
- menuTabletWidth: "60vw",
542
- menuMobileWidth: "100vw",
543
- menuCustomContentFontFamily: "",
544
- menuCustomContentFontStyle: globalTokens.type_normal,
545
- menuCustomContentFontColor: "",
546
- menuCustomContentFontSize: "",
547
- menuCustomContentFontWeight: globalTokens.type_regular,
548
- minHeight: "64px",
549
- overlayColor: globalTokens.softBlack,
550
- overlayOpacity: "0.7",
551
- overlayZindex: "1600",
552
- paddingTop: "0px",
553
- paddingBottom: "0px",
554
- paddingRight: "24px",
555
- paddingLeft: "24px",
556
- underlinedColor: globalTokens.black,
557
- underlinedThickness: "2px",
558
- underlinedStyle: "solid"
559
- },
560
- heading: {
561
- fontColorBase: globalTokens.inherit,
562
- fontFamilyBase: globalTokens.type_sans,
563
- level1FontColor: "",
564
- level1FontFamily: "",
565
- level1FontSize: globalTokens.type_scale_08,
566
- level1FontStyle: globalTokens.type_normal,
567
- level1FontWeight: globalTokens.type_regular,
568
- level1LineHeight: globalTokens.type_leading_compact_01,
569
- level1LetterSpacing: globalTokens.type_spacing_tight_01,
570
- level2FontColor: "",
571
- level2FontFamily: "",
572
- level2FontSize: globalTokens.type_scale_07,
573
- level2FontStyle: globalTokens.type_normal,
574
- level2FontWeight: globalTokens.type_regular,
575
- level2LineHeight: globalTokens.type_leading_normal,
576
- level2LetterSpacing: globalTokens.type_spacing_normal,
577
- level3FontColor: "",
578
- level3FontFamily: "",
579
- level3FontSize: globalTokens.type_scale_06,
580
- level3FontStyle: globalTokens.type_normal,
581
- level3FontWeight: globalTokens.type_regular,
582
- level3LineHeight: globalTokens.type_leading_compact_01,
583
- level3LetterSpacing: globalTokens.type_spacing_wide_01,
584
- level4FontColor: "",
585
- level4FontFamily: "",
586
- level4FontSize: globalTokens.type_scale_05,
587
- level4FontStyle: globalTokens.type_normal,
588
- level4FontWeight: globalTokens.type_regular,
589
- level4LineHeight: globalTokens.type_leading_normal,
590
- level4LetterSpacing: globalTokens.type_spacing_normal,
591
- level5FontColor: "",
592
- level5FontFamily: "",
593
- level5FontSize: globalTokens.type_scale_04,
594
- level5FontStyle: globalTokens.type_normal,
595
- level5FontWeight: globalTokens.type_regular,
596
- level5LineHeight: globalTokens.type_leading_normal,
597
- level5LetterSpacing: globalTokens.type_spacing_wide_01
598
- },
599
- inputText: {
600
- assistiveTextFontColor: "",
601
- assistiveTextFontColorOnDark: "",
602
- assistiveTextFontSize: globalTokens.type_scale_01,
603
- assistiveTextFontStyle: globalTokens.type_normal,
604
- assistiveTextFontWeight: globalTokens.type_regular,
605
- disabledFontColor: globalTokens.lighterBlack,
606
- disabledFontColorOnDark: "#575757",
607
- errorColor: globalTokens.red,
608
- errorColorOnDark: "#FE344F",
609
- fontColorBase: globalTokens.black,
610
- fontColorBaseOnDark: globalTokens.white,
611
- fontFamilyBase: globalTokens.type_sans,
612
- fontSizeBase: globalTokens.type_scale_root,
613
- hoverOptionColor: globalTokens.black,
614
- hoverOptionBackgroundColor: globalTokens.lightWhite,
615
- labelFontSize: globalTokens.type_scale_03,
616
- prefixIconColor: "",
617
- prefixIconColorOnDark: "",
618
- prefixLabelFontColor: "",
619
- prefixLabelFontColorOnDark: "",
620
- prefixLabelFontSize: globalTokens.type_scale_03,
621
- prefixLabelFontStyle: globalTokens.type_normal,
622
- prefixLabelFontWeight: globalTokens.type_regular,
623
- scrollBarThumbColor: globalTokens.darkGrey,
624
- scrollBarTrackColor: globalTokens.lightGrey,
625
- selectedOptionBackgroundColor: globalTokens.lightGrey,
626
- suffixIconColor: "",
627
- suffixIconColorOnDark: "",
628
- suffixLabelFontColor: "",
629
- suffixLabelFontColorOnDark: "",
630
- suffixLabelFontSize: globalTokens.type_scale_03,
631
- suffixLabelFontStyle: globalTokens.type_normal,
632
- suffixLabelFontWeight: globalTokens.type_regular,
633
- underlineColor: "",
634
- underlineColorOnDark: "",
635
- underlineFocusColor: "",
636
- underlineFocusColorOnDark: "",
637
- underlineThickness: "1px"
638
- },
639
- newInputText: {
640
- fontFamily: globalTokens.type_sans,
641
- enabledBorderColor: globalTokens.hal_black,
642
- enabledBorderColorOnDark: globalTokens.hal_white,
643
- hoverBorderColor: globalTokens.hal_purple_l_65,
644
- hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
645
- focusBorderColor: globalTokens.hal_blue_l_50,
646
- focusBorderColorOnDark: globalTokens.hal_blue_l_50,
647
- disabledBorderColor: globalTokens.hal_grey_l_60,
648
- disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
649
- disabledContainerFillColor: globalTokens.hal_grey_l_95,
650
- disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
651
- errorBorderColor: globalTokens.hal_red_s_41,
652
- errorBorderColorOnDark: globalTokens.hal_red_l_60,
653
- hoverErrorBorderColor: "#fe0123",
654
- hoverErrorBorderColorOnDark: "#fe677b",
655
- errorMessageColor: globalTokens.hal_red_s_41,
656
- errorMessageColorOnDark: globalTokens.hal_red_l_60,
657
- errorIconColor: globalTokens.hal_red_s_41,
658
- errorIconColorOnDark: globalTokens.hal_red_l_60,
659
- labelFontColor: globalTokens.hal_black,
660
- labelFontColorOnDark: globalTokens.hal_white,
661
- labelFontSize: globalTokens.type_scale_02,
662
- labelFontStyle: globalTokens.type_normal,
663
- labelFontWeight: globalTokens.type_semibold,
664
- disabledLabelFontColor: globalTokens.hal_grey_l_60,
665
- disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
666
- optionalLabelFontWeight: globalTokens.type_regular,
667
- helperTextFontColor: globalTokens.hal_black,
668
- helperTextFontColorOnDark: globalTokens.hal_white,
669
- helperTextFontSize: globalTokens.type_scale_01,
670
- helperTextFontStyle: globalTokens.type_normal,
671
- helperTextFontWeight: globalTokens.type_regular,
672
- disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
673
- disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
674
- prefixColor: globalTokens.hal_grey_s_40,
675
- prefixColorOnDark: globalTokens.hal_white,
676
- suffixColor: globalTokens.hal_grey_s_40,
677
- suffixColorOnDark: globalTokens.hal_white,
678
- disabledPrefixColor: globalTokens.hal_grey_l_75,
679
- disabledSuffixColor: globalTokens.hal_grey_l_75,
680
- disabledPrefixColorOnDark: globalTokens.hal_grey_s_40,
681
- disabledSuffixColorOnDark: globalTokens.hal_grey_s_40,
682
- placeholderFontColor: "#808080",
683
- placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
684
- disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
685
- disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
686
- valueFontColor: globalTokens.hal_black,
687
- valueFontColorOnDark: globalTokens.hal_white,
688
- valueFontSize: globalTokens.type_scale_03,
689
- valueFontStyle: globalTokens.type_normal,
690
- valueFontWeight: globalTokens.type_regular,
691
- disabledValueFontColor: globalTokens.hal_grey_l_60,
692
- disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
693
- actionIconColor: globalTokens.hal_black,
694
- actionIconColorOnDark: globalTokens.hal_white,
695
- disabledActionIconColor: globalTokens.hal_grey_l_60,
696
- disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
697
- hoverActionIconColor: globalTokens.hal_black,
698
- hoverActionIconColorOnDark: globalTokens.hal_white,
699
- focusActionIconColor: globalTokens.hal_black,
700
- focusActionIconColorOnDark: globalTokens.hal_white,
701
- activeActionIconColor: globalTokens.hal_black,
702
- activeActionIconColorOnDark: globalTokens.hal_black,
703
- actionBackgroundColor: globalTokens.transparent,
704
- actionBackgroundColorOnDark: globalTokens.transparent,
705
- disabledActionBackgroundColor: globalTokens.transparent,
706
- disabledActionBackgroundColorOnDark: globalTokens.transparent,
707
- hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
708
- hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
709
- focusActionBorderColor: globalTokens.hal_blue_l_50,
710
- focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
711
- activeActionBackgroundColor: globalTokens.hal_grey_l_80,
712
- activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
713
- listOptionFontColor: globalTokens.hal_black,
714
- listOptionFontSize: globalTokens.type_scale_03,
715
- listOptionFontStyle: globalTokens.type_normal,
716
- listOptionFontWeight: globalTokens.type_regular,
717
- systemMessageFontColor: globalTokens.hal_grey_s_40,
718
- errorMessageBorderColor: globalTokens.hal_red_s_41,
719
- errorMessageBackgroundColor: globalTokens.hal_red_l_95,
720
- hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
721
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
722
- },
723
- link: {
724
- fontColor: globalTokens.mediumBlue,
725
- fontFamily: globalTokens.inherit,
726
- fontSize: globalTokens.type_scale_root,
727
- fontStyle: globalTokens.type_normal,
728
- fontWeight: globalTokens.type_regular,
729
- iconSize: "16px",
730
- iconGutter: "4px",
731
- underlineSpacing: "0px",
732
- underlineStyle: "solid",
733
- underlineThickness: "1px",
734
- disabledColor: globalTokens.lightGrey,
735
- hoverFontColor: globalTokens.mediumBlue,
736
- hoverUnderlineColor: globalTokens.mediumBlue,
737
- visitedFontColor: globalTokens.purple,
738
- visitedUnderlineColor: globalTokens.purple,
739
- activeFontColor: globalTokens.black,
740
- activeUnderlineColor: globalTokens.black,
741
- focusColor: globalTokens.mediumBlue
742
- },
743
- paginator: {
744
- backgroundColor: globalTokens.darkWhite,
745
- fontColor: globalTokens.black,
746
- fontFamily: globalTokens.type_sans,
747
- fontSize: globalTokens.type_scale_02,
748
- fontStyle: globalTokens.type_normal,
749
- fontWeight: globalTokens.type_regular,
750
- height: "64px",
751
- width: "100%",
752
- marginRight: "40px",
753
- marginLeft: "20px",
754
- itemsPerPageSelectorMarginLeft: "0px",
755
- itemsPerPageSelectorMarginRight: "30px",
756
- pageSelectorMarginRight: "30px",
757
- pageSelectorMarginLeft: "0px",
758
- totalItemsContainerMarginRight: "30px",
759
- totalItemsContainerMarginLeft: "0px"
760
- },
761
- progressBar: {
762
- trackLineColor: globalTokens.purple,
763
- totalLineColor: globalTokens.softGrey,
764
- labelFontFamily: globalTokens.type_sans,
765
- labelFontSize: globalTokens.type_scale_01,
766
- labelFontStyle: globalTokens.type_normal,
767
- labelFontWeight: globalTokens.type_regular,
768
- labelFontColor: globalTokens.black,
769
- labelFontTextTransform: globalTokens.type_uppercase,
770
- valueFontFamily: globalTokens.type_sans,
771
- valueFontSize: globalTokens.type_scale_01,
772
- valueFontStyle: globalTokens.type_normal,
773
- valueFontWeight: globalTokens.type_regular,
774
- valueFontColor: globalTokens.black,
775
- valueFontTextTransform: globalTokens.type_uppercase,
776
- thickness: "9px",
777
- borderRadius: "5px",
778
- overlayColor: globalTokens.black,
779
- overlayOpacity: "0.8"
780
- },
781
- radio: {
782
- circleLabelSpacing: "10px",
783
- circleSize: "24px",
784
- color: globalTokens.black,
785
- colorOnDark: globalTokens.white,
786
- disabledColor: globalTokens.lighterBlack,
787
- disabledColorOnDark: "#575757",
788
- disabledFontColor: globalTokens.lighterBlack,
789
- disabledFontColorOnDark: "#575757",
790
- focusColor: globalTokens.blue,
791
- focusColorOnDark: "#1682FF",
792
- fontColor: globalTokens.inherit,
793
- fontColorOnDark: globalTokens.white,
794
- fontFamily: globalTokens.type_sans,
795
- fontSize: globalTokens.type_scale_root,
796
- fontStyle: globalTokens.type_normal,
797
- fontWeight: globalTokens.type_regular
798
- },
799
- select: {
800
- checkboxOptionSpacing: "12px",
801
- color: globalTokens.black,
802
- colorOnDark: globalTokens.white,
803
- disabledColor: globalTokens.lighterBlack,
804
- disabledColorOnDark: "#575757",
805
- errorColor: globalTokens.red,
806
- errorColorOnDark: "#FE344F",
807
- focusColor: globalTokens.blue,
808
- focusColorOnDark: globalTokens.blue,
809
- fontFamily: globalTokens.type_sans,
810
- hoveredOptionBackgroundColor: globalTokens.lightWhite,
811
- hoveredOptionBackgroundColorOnDark: globalTokens.lightWhite,
812
- iconColor: "",
813
- iconOptionSpacing: "12px",
814
- iconSize: "20px",
815
- labelFontSize: globalTokens.type_scale_03,
816
- labelFontStyle: globalTokens.type_normal,
817
- labelFontWeight: globalTokens.type_regular,
818
- assistiveTextFontColor: globalTokens.black,
819
- assistiveTextFontColorOnDark: globalTokens.white,
820
- assistiveTextFontSize: globalTokens.type_scale_01,
821
- assistiveTextFontStyle: globalTokens.type_normal,
822
- assistiveTextFontWeight: globalTokens.type_regular,
823
- optionPaddingBottom: "6px",
824
- optionPaddingTop: "6px",
825
- optionPaddingLeft: "16px",
826
- optionPaddingRight: "16px",
827
- optionsBackgroundColor: globalTokens.white,
828
- optionsBorderColor: "none",
829
- optionsBorderThickness: "0px",
830
- optionsBorderStyle: "solid",
831
- optionsFontColor: "",
832
- optionsFontSize: globalTokens.type_scale_root,
833
- optionsFontStyle: globalTokens.type_normal,
834
- optionsFontWeight: globalTokens.type_regular,
835
- scrollBarThumbColor: globalTokens.darkGrey,
836
- scrollBarTrackColor: globalTokens.lightGrey,
837
- selectedOptionBackgroundColor: globalTokens.lightGrey,
838
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey
839
- },
840
- sidenav: {
841
- backgroundColor: globalTokens.lighterGrey,
842
- arrowContainerColor: globalTokens.lightGrey,
843
- arrowColor: globalTokens.black,
844
- customContentFontFamily: globalTokens.type_sans,
845
- customContentFontSize: globalTokens.type_scale_root,
846
- customContentFontStyle: globalTokens.type_normal,
847
- customContentFontWeight: globalTokens.type_regular,
848
- customContentFontColor: globalTokens.black,
849
- titleFontFamily: globalTokens.type_sans,
850
- titleFontSize: globalTokens.type_scale_05,
851
- titleFontStyle: globalTokens.type_normal,
852
- titleFontWeight: globalTokens.type_regular,
853
- titleFontColor: "#000000de",
854
- titleFontTextTransform: "none",
855
- titleFontLetterSpacing: globalTokens.type_spacing_normal,
856
- subtitleFontFamily: globalTokens.type_sans,
857
- subtitleFontSize: globalTokens.type_scale_01,
858
- subtitleFontStyle: globalTokens.type_normal,
859
- subtitleFontWeight: globalTokens.type_regular,
860
- subtitleFontColor: "#00000099",
861
- subtitleFontTextTransform: globalTokens.type_uppercase,
862
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_03,
863
- linkFontFamily: globalTokens.type_sans,
864
- linkFontSize: globalTokens.type_scale_02,
865
- linkFontStyle: globalTokens.type_normal,
866
- linkFontWeight: globalTokens.type_regular,
867
- linkFontColor: "#00000099",
868
- linkFontTextTransform: "none",
869
- linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
870
- linkTextDecoration: globalTokens.type_no_line,
871
- linkMarginTop: "6px",
872
- linkMarginRight: "18px",
873
- linkMarginBottom: "6px",
874
- linkMarginLeft: "18px",
875
- scrollBarThumbColor: "#66666626",
876
- scrollBarTrackColor: globalTokens.transparent
877
- },
878
- slider: {
879
- fontFamily: globalTokens.type_sans,
880
- fontSize: globalTokens.type_scale_03,
881
- fontStyle: globalTokens.type_normal,
882
- fontWeight: globalTokens.type_regular,
883
- fontColor: globalTokens.black,
884
- fontColorOnDark: globalTokens.white,
885
- fontLetterSpacing: globalTokens.type_spacing_normal,
886
- thumbHeight: "20px",
887
- thumbWidth: "20px",
888
- thumbVerticalPosition: "32.5%",
889
- thumbBackgroundColor: globalTokens.mediumBlue,
890
- thumbBackgroundColorOnDark: globalTokens.white,
891
- draggedThumbScale: "1",
892
- draggedThumbBackgroundColor: globalTokens.mediumBlue,
893
- draggedThumbBackgroundColorOnDark: "#0095FF",
894
- dotsHeight: "6px",
895
- dotsWidth: "6px",
896
- dotsVerticalPosition: "42%",
897
- dotsBackgroundColor: globalTokens.mediumBlue,
898
- dotsBackgroundColorOnDark: globalTokens.white,
899
- trackLineThickness: "2px",
900
- trackLineVerticalPosition: "50%",
901
- trackLineColor: globalTokens.mediumBlue,
902
- trackLineOnDark: globalTokens.white,
903
- totalLineThickness: "",
904
- totalLineVerticalPosition: "50%",
905
- totalLineColor: globalTokens.softBlue,
906
- totalLineOnDark: globalTokens.white,
907
- disabledThumbVerticalPosition: "24%",
908
- disabledThumbBackgroundColor: globalTokens.softBlue,
909
- disabledThumbBackgroundColorOnDark: "#575757",
910
- disabledDotsVerticalPosition: "",
911
- disabledDotsBackgroundColor: globalTokens.softBlue,
912
- disabledDotsBackgroundColorOnDark: "#575757",
913
- disabledTrackLineColor: globalTokens.softBlue,
914
- disabledTrackLineOnDark: "#575757",
915
- disabledTotalLineColor: globalTokens.softBlue,
916
- disabledTotalLineColorOnDark: "#575757",
917
- focusColor: globalTokens.blue,
918
- focusColorOnDark: "#1682FF"
919
- },
920
- spinner: {
921
- trackCircleColor: globalTokens.purple,
922
- totalCircleColor: globalTokens.white,
923
- labelFontFamily: globalTokens.type_sans,
924
- labelFontSize: globalTokens.type_scale_01,
925
- labelFontStyle: globalTokens.type_normal,
926
- labelFontWeight: globalTokens.type_regular,
927
- labelFontColor: globalTokens.inherit,
928
- labelFontTextTransform: globalTokens.type_uppercase,
929
- labelLetterSpacing: globalTokens.type_spacing_normal,
930
- labelTextAlign: "center",
931
- progressValueFontFamily: globalTokens.type_sans,
932
- progressValueFontSize: globalTokens.type_scale_01,
933
- progressValueFontStyle: globalTokens.type_normal,
934
- progressValueFontWeight: globalTokens.type_regular,
935
- progressValueFontColor: globalTokens.inherit,
936
- progressValueLetterSpacing: globalTokens.type_spacing_normal,
937
- progressValueTextAlign: "center",
938
- overlayBackgroundColor: globalTokens.black,
939
- overlayOpacity: "0.8",
940
- overlayLabelFontFamily: globalTokens.type_sans,
941
- overlayLabelFontSize: globalTokens.type_scale_01,
942
- overlayLabelFontStyle: globalTokens.type_normal,
943
- overlayLabelFontWeight: globalTokens.type_regular,
944
- overlayLabelFontColor: globalTokens.white,
945
- overlayLabelFontTextTransform: globalTokens.type_uppercase,
946
- overlayLabelLetterSpacing: globalTokens.type_spacing_normal,
947
- overlayLabelTextAlign: "center",
948
- overlayProgressValueFontFamily: globalTokens.type_sans,
949
- overlayProgressValueFontSize: globalTokens.type_scale_01,
950
- overlayProgressValueFontStyle: globalTokens.type_normal,
951
- overlayProgressValueFontWeight: globalTokens.type_regular,
952
- overlayProgressValueFontColor: globalTokens.white,
953
- overlayProgressValueLetterSpacing: globalTokens.type_spacing_normal,
954
- overlayProgressValueTextAlign: "center"
955
- },
956
- "switch": {
957
- checkedTrackBackgroundColor: globalTokens.purple,
958
- checkedTrackBackgroundColorOnDark: globalTokens.purple,
959
- checkedThumbBackgroundColor: globalTokens.white,
960
- checkedThumbBackgroundColorOnDark: globalTokens.white,
961
- uncheckedTrackBackgroundColor: globalTokens.lightGrey,
962
- uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
963
- uncheckedThumbBackgroundColor: globalTokens.white,
964
- uncheckedThumbBackgroundColorOnDark: globalTokens.white,
965
- disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
966
- disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
967
- disabledCheckedThumbBackgroundColor: globalTokens.white,
968
- disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
969
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
970
- disabledUncheckedTrackBackgroundColorOnDark: "#363636",
971
- disabledUncheckedThumbBackgroundColor: globalTokens.white,
972
- disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
973
- disabledLabelFontColor: globalTokens.lighterBlack,
974
- disabledLabelFontColorOnDark: "#575757",
975
- disabledLabelFontStyle: globalTokens.type_normal,
976
- labelFontFamily: globalTokens.type_sans,
977
- labelFontSize: globalTokens.type_scale_root,
978
- labelFontStyle: globalTokens.type_normal,
979
- labelFontWeight: globalTokens.type_regular,
980
- labelFontColor: globalTokens.black,
981
- labelFontColorOnDark: globalTokens.white,
982
- thumbFocusColor: globalTokens.blue,
983
- thumbFocusColorOnDark: "#1489FB",
984
- thumbHeight: "24px",
985
- thumbWidth: "24px",
986
- thumbShift: "40%",
987
- trackHeight: "12px",
988
- trackWidth: "60px",
989
- spaceBetweenLabelSwitch: "0px"
990
- },
991
- tag: {
992
- fontStyle: globalTokens.type_normal,
993
- fontTextTransform: globalTokens.type_uppercase,
994
- height: "43px",
995
- iconColor: globalTokens.white,
996
- iconSectionWidth: "48px",
997
- iconHeight: "24px",
998
- iconWidth: ""
999
- },
1000
- table: {
1001
- rowSeparatorThickness: "1px",
1002
- rowSeparatorStyle: "solid",
1003
- rowSeparatorColor: globalTokens.lightGrey,
1004
- dataBackgroundColor: globalTokens.white,
1005
- dataFontFamily: globalTokens.type_sans,
1006
- dataFontSize: globalTokens.type_scale_root,
1007
- dataFontStyle: globalTokens.type_normal,
1008
- dataFontWeight: globalTokens.type_regular,
1009
- dataFontColor: globalTokens.black,
1010
- dataFontTextTransform: "none",
1011
- dataPaddingTop: "14px",
1012
- dataPaddingBottom: "12px",
1013
- dataPaddingRight: "20px",
1014
- dataPaddingLeft: "40px",
1015
- dataTextAlign: "left",
1016
- dataTextLineHeight: "normal",
1017
- headerBackgroundColor: globalTokens.purple,
1018
- headerBorderRadius: "4px",
1019
- headerFontFamily: globalTokens.type_sans,
1020
- headerFontSize: globalTokens.type_scale_02,
1021
- headerFontStyle: globalTokens.type_normal,
1022
- headerFontWeight: globalTokens.type_regular,
1023
- headerFontColor: globalTokens.white,
1024
- headerFontTextTransform: "none",
1025
- headerPaddingTop: "16px",
1026
- headerPaddingBottom: "16px",
1027
- headerPaddingRight: "20px",
1028
- headerPaddingLeft: "40px",
1029
- headerTextAlign: "left",
1030
- headerTextLineHeight: "normal",
1031
- scrollBarThumbColor: globalTokens.darkGrey,
1032
- scrollBarTrackColor: globalTokens.lightGrey,
1033
- sortIconColor: globalTokens.white
1034
- },
1035
- tabs: {
1036
- fontFamily: globalTokens.type_sans,
1037
- fontSize: globalTokens.type_scale_03,
1038
- fontStyle: globalTokens.type_normal,
1039
- fontWeight: globalTokens.type_semibold,
1040
- fontTextTransform: "none",
1041
- selectedBackgroundColor: globalTokens.white,
1042
- selectedFontColor: globalTokens.purple,
1043
- selectedIconColor: globalTokens.purple,
1044
- selectedUnderlineColor: globalTokens.purple,
1045
- selectedUnderlineThickness: "",
1046
- unselectedBackgroundColor: globalTokens.white,
1047
- unselectedFontColor: globalTokens.darkGrey,
1048
- unselectedIconColor: globalTokens.darkGrey,
1049
- disabledFontColor: globalTokens.mediumGrey,
1050
- disabledIconColor: globalTokens.mediumGrey,
1051
- disabledFontStyle: globalTokens.type_normal,
1052
- hoverBackgroundColor: globalTokens.lightPurple,
1053
- pressedBackgroundColor: globalTokens.mediumPurple,
1054
- pressedFontWeight: globalTokens.type_semibold,
1055
- dividerColor: globalTokens.mediumGrey,
1056
- dividerThickness: "1px",
1057
- focusOutline: globalTokens.purple,
1058
- scrollButtonsWidth: "48px",
1059
- badgeBackgroundColor: globalTokens.darkRed,
1060
- badgeFontFamily: globalTokens.type_sans,
1061
- badgeFontSize: "10px",
1062
- badgeFontStyle: globalTokens.type_normal,
1063
- badgeFontWeight: "500",
1064
- badgeFontColor: globalTokens.white,
1065
- badgeLetterSpacing: globalTokens.type_spacing_wide_02,
1066
- badgeWidth: "16px",
1067
- badgeHeight: "16px",
1068
- badgeRadius: "10px",
1069
- badgeWidthWithNotificationNumber: "23px",
1070
- badgeHeightWithNotificationNumber: "17px",
1071
- badgeRadiusWithNotificationNumber: "10px"
1072
- },
1073
- textarea: {
1074
- disabledFontColor: globalTokens.lighterBlack,
1075
- disabledFontColorOnDark: "#575757",
1076
- errorColor: globalTokens.red,
1077
- errorColorOnDark: "#FE344F",
1078
- assistiveTextFontFamily: globalTokens.type_sans,
1079
- assistiveTextFontSize: globalTokens.type_scale_01,
1080
- assistiveTextFontStyle: globalTokens.type_normal,
1081
- assistiveTextFontWeight: globalTokens.type_regular,
1082
- assistiveTextFontColor: globalTokens.black,
1083
- assistiveTextFontColorOnDark: globalTokens.white,
1084
- assistiveTextLetterSpacing: "",
1085
- customContentFontFamily: globalTokens.type_sans,
1086
- customContentFontSize: globalTokens.type_scale_03,
1087
- customContentFontStyle: globalTokens.type_normal,
1088
- customContentFontWeight: globalTokens.type_regular,
1089
- customContentFontColor: globalTokens.black,
1090
- customContentFontColorOnDark: globalTokens.white,
1091
- customContentLetterSpacing: globalTokens.type_spacing_normal,
1092
- customContentLineHeight: "1.1875em",
1093
- labelFontFamily: globalTokens.type_sans,
1094
- labelFontSize: globalTokens.type_scale_03,
1095
- labelFontStyle: globalTokens.type_normal,
1096
- labelFontWeight: globalTokens.type_regular,
1097
- labelFontColor: globalTokens.black,
1098
- labelFontColorOnDark: globalTokens.white,
1099
- labelLetterSpacing: "",
1100
- scrollBarThumbColor: globalTokens.darkGrey,
1101
- scrollBarThumbColorOnDark: globalTokens.white,
1102
- scrollBarTrackColor: globalTokens.lightGrey,
1103
- scrollBarTrackColorOnDark: "#999999"
1104
- },
1105
- newTextarea: {
1106
- fontFamily: globalTokens.type_sans,
1107
- enabledBorderColor: globalTokens.hal_black,
1108
- enabledBorderColorOnDark: globalTokens.hal_white,
1109
- hoverBorderColor: globalTokens.hal_purple_l_65,
1110
- hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
1111
- focusBorderColor: globalTokens.hal_blue_l_50,
1112
- focusBorderColorOnDark: globalTokens.hal_blue_l_50,
1113
- disabledBorderColor: globalTokens.hal_grey_l_60,
1114
- disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
1115
- disabledContainerFillColor: globalTokens.hal_grey_l_95,
1116
- disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1117
- errorBorderColor: globalTokens.hal_red_s_41,
1118
- errorBorderColorOnDark: globalTokens.hal_red_l_60,
1119
- hoverErrorBorderColor: "#fe0123",
1120
- hoverErrorBorderColorOnDark: "#fe677b",
1121
- errorMessageColor: globalTokens.hal_red_s_41,
1122
- errorMessageColorOnDark: globalTokens.hal_red_l_60,
1123
- labelFontColor: globalTokens.hal_black,
1124
- labelFontColorOnDark: globalTokens.hal_white,
1125
- labelFontSize: globalTokens.type_scale_02,
1126
- labelFontStyle: globalTokens.type_normal,
1127
- labelFontWeight: globalTokens.type_semibold,
1128
- disabledLabelFontColor: globalTokens.hal_grey_l_60,
1129
- disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1130
- optionalLabelFontWeight: globalTokens.type_regular,
1131
- helperTextFontColor: globalTokens.hal_black,
1132
- helperTextFontColorOnDark: globalTokens.hal_white,
1133
- helperTextFontSize: globalTokens.type_scale_01,
1134
- helperTextFontStyle: globalTokens.type_normal,
1135
- helperTextFontWeight: globalTokens.type_regular,
1136
- disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1137
- disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1138
- placeholderFontColor: "#808080",
1139
- placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1140
- disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1141
- disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
1142
- valueFontColor: globalTokens.hal_black,
1143
- valueFontColorOnDark: globalTokens.hal_white,
1144
- valueFontSize: globalTokens.type_scale_03,
1145
- valueFontStyle: globalTokens.type_normal,
1146
- valueFontWeight: globalTokens.type_regular,
1147
- disabledValueFontColor: globalTokens.hal_grey_l_60,
1148
- disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1149
- },
1150
- toggleGroup: {
1151
- fontFamily: globalTokens.type_sans,
1152
- fontSize: globalTokens.type_scale_02,
1153
- fontStyle: globalTokens.type_normal,
1154
- fontWeight: globalTokens.type_regular,
1155
- fontTextTransform: globalTokens.type_uppercase,
1156
- fontLetterSpacing: globalTokens.type_spacing_wide_02,
1157
- focusColor: globalTokens.blue,
1158
- selectedBackgroundColor: globalTokens.purple,
1159
- selectedBackgroundHoverColor: globalTokens.black,
1160
- selectedFontColor: globalTokens.white,
1161
- selectedHoverFontColor: globalTokens.white,
1162
- unselectedBackgroundColor: globalTokens.lightGrey,
1163
- unselectedBackgroundHoverColor: globalTokens.darkWhite,
1164
- unselectedFontColor: globalTokens.black,
1165
- unselectedHoverFontColor: globalTokens.black,
1166
- disabledSelectedBackgroundColor: globalTokens.lightPurple,
1167
- disabledSelectedFontColor: globalTokens.white,
1168
- disabledUnselectedBackgroundColor: globalTokens.lightWhite,
1169
- disabledUnselectedFontColor: globalTokens.lighterBlack,
1170
- iconSize: "20px",
1171
- iconPaddingTop: "10px",
1172
- iconPaddingBottom: "10px",
1173
- iconPaddingRight: "12px",
1174
- iconPaddingLeft: "12px",
1175
- labelPaddingTop: "12px",
1176
- labelPaddingBottom: "12px",
1177
- labelPaddingLeft: "30px",
1178
- labelPaddingRight: "30px"
1179
- },
1180
- upload: {
1181
- fontFamily: globalTokens.type_sans,
1182
- shadowColor: globalTokens.lightWhite,
1183
- scrollBarThumbColor: globalTokens.darkGrey,
1184
- scrollBarTrackColor: globalTokens.lightGrey,
1185
- errorColor: globalTokens.red,
1186
- backgroundColor: globalTokens.white,
1187
- draggingAreaBackgroundColor: globalTokens.lightWhite,
1188
- dragAndDropIconColor: globalTokens.black,
1189
- dragAndDropIconSize: "43.5px",
1190
- dragAndDropTitleFontSize: globalTokens.type_scale_04,
1191
- dragAndDropTitleFontStyle: globalTokens.type_normal,
1192
- dragAndDropTitleFontWeight: globalTokens.type_bold,
1193
- dragAndDropTitleFontTextTransform: "none",
1194
- dragAndDropTitleFontColor: globalTokens.black,
1195
- dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1196
- dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1197
- dragAndDropDescriptionFontWeight: globalTokens.type_normal,
1198
- dragAndDropTextDescriptionFontTextTransform: "none",
1199
- dragAndDropTextDescriptionFontColor: globalTokens.darkGrey,
1200
- dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1201
- dragAndDropDraggingStateIconSize: "74.5px",
1202
- dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1203
- dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1204
- dragAndDropDraggingStateFontWeight: globalTokens.type_normal,
1205
- dragAndDropTextDraggingStateFontTextTransform: "none",
1206
- dragAndDropTextDraggingStateFontColor: globalTokens.darkGrey,
1207
- dragAndDropAreaIconColor: globalTokens.darkGrey,
1208
- dragAndDropAreaIconSize: "24px",
1209
- dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1210
- dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1211
- dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1212
- dragAndDropAreaTextFontTextTransform: "none",
1213
- dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1214
- fileDeleteIconColor: globalTokens.black,
1215
- fileDeleteIconSize: "30px",
1216
- fileHoverColor: globalTokens.darkWhite,
1217
- fileUnderlineColor: globalTokens.lightGrey,
1218
- fileUnderlineThickness: "1px",
1219
- fileNameFontSize: globalTokens.type_scale_03,
1220
- fileNameFontStyle: globalTokens.type_normal,
1221
- fileNameFontWeight: globalTokens.type_regular,
1222
- fileNameFontTextTransform: "none",
1223
- fileNameFontColor: globalTokens.black,
1224
- fileTypeFontSize: globalTokens.type_scale_01,
1225
- fileTypeFontStyle: globalTokens.type_normal,
1226
- fileTypeFontWeight: globalTokens.type_regular,
1227
- fileTypeFontTextTransform: globalTokens.type_uppercase,
1228
- fileTypeFontColor: globalTokens.darkGrey,
1229
- fileUploadedIconColor: globalTokens.lightGrey,
1230
- fileUploadedIconSize: "24px",
1231
- filesUploadedTitleFontSize: globalTokens.type_scale_04,
1232
- filesUploadedTitleFontStyle: globalTokens.type_normal,
1233
- filesUploadedTitleFontWeight: globalTokens.type_regular,
1234
- filesUploadedTitleFontTextTransform: "none",
1235
- filesUploadedTitleFontColor: globalTokens.black,
1236
- filesUploadedSubtitleFontSize: globalTokens.type_scale_01,
1237
- filesUploadedSubtitleFontStyle: globalTokens.type_normal,
1238
- filesUploadedSubtitleFontWeight: globalTokens.type_regular,
1239
- filesUploadedSubtitleFontTextTransform: "none",
1240
- filesUploadedSubtitleFontColor: globalTokens.darkGrey,
1241
- filesUploadedNumberFontWeight: globalTokens.type_bold
1242
- },
1243
- wizard: {
1244
- disabledBackgroundColor: globalTokens.lightGrey,
1245
- disabledFontColor: globalTokens.darkGrey,
1246
- stepContainerFontSize: globalTokens.type_scale_03,
1247
- stepContainerFontFamily: globalTokens.type_sans,
1248
- stepContainerFontStyle: globalTokens.type_normal,
1249
- stepContainerFontWeight: globalTokens.type_regular,
1250
- stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1251
- stepContainerFontColor: globalTokens.black,
1252
- stepContainerSelectedFontColor: globalTokens.white,
1253
- stepContainerSelectedBackgroundColor: globalTokens.purple,
1254
- stepContainerBackgroundColor: globalTokens.white,
1255
- stepContainerIconSize: "19px",
1256
- labelFontSize: globalTokens.type_scale_03,
1257
- labelFontFamily: globalTokens.type_sans,
1258
- labelFontStyle: globalTokens.type_normal,
1259
- labelFontWeight: globalTokens.type_regular,
1260
- labelLetterSpacing: globalTokens.type_spacing_normal,
1261
- labelFontTextTransform: "none",
1262
- labelTextAlign: "left",
1263
- labelFontColor: globalTokens.darkGrey,
1264
- labelActiveFontColor: globalTokens.black,
1265
- descriptionFontSize: globalTokens.type_scale_01,
1266
- descriptionFontFamily: globalTokens.type_sans,
1267
- descriptionFontStyle: globalTokens.type_normal,
1268
- descriptionFontWeight: globalTokens.type_regular,
1269
- descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1270
- descriptionFontTextTransform: "none",
1271
- descriptionFontColor: globalTokens.darkGrey,
1272
- descriptionActiveFontColor: globalTokens.black,
1273
- descriptionTextAlign: "left",
1274
- circleBorderThickness: "2px",
1275
- circleBorderStyle: "solid",
1276
- circleBorderRadius: "45px",
1277
- circleBorderColor: globalTokens.black,
1278
- circleSelectedWidth: "32px",
1279
- circleSelectedHeight: "32px",
1280
- circleSelectedBorderThickness: "2px",
1281
- circleSelectedBorderStyle: "solid",
1282
- circleSelectedBorderRadius: "45px",
1283
- circleSelectedBorderColor: globalTokens.purple,
1284
- circleDisabledWidth: "32px",
1285
- circleDisabledHeight: "32px",
1286
- circleDisabledBorderThickness: "2px",
1287
- circleDisabledBorderStyle: "solid",
1288
- circleDisabledBorderRadius: "45px",
1289
- circleDisabledBorderColor: globalTokens.lightGrey,
1290
- circleWidth: "32px",
1291
- circleHeight: "32px",
1292
- separatorBorderThickness: "1px",
1293
- separatorBorderStyle: "solid",
1294
- separatorColor: globalTokens.lightGrey,
1295
- focusColor: globalTokens.blue
1296
- }
1297
- };
1298
- exports.componentTokens = componentTokens;
1299
- var spaces = {
1300
- xxsmall: "6px",
1301
- xsmall: "16px",
1302
- small: "24px",
1303
- medium: "36px",
1304
- large: "48px",
1305
- xlarge: "64px",
1306
- xxlarge: "100px"
1307
- };
1308
- exports.spaces = spaces;
1309
- var responsiveSizes = {
1310
- mobileSmall: "320",
1311
- mobileMedium: "375",
1312
- mobileLarge: "425",
1313
- tablet: "768",
1314
- laptop: "1024",
1315
- desktop: "1440"
1316
- };
1317
- exports.responsiveSizes = responsiveSizes;
1318
- var typeface = {
1319
- body: {
1320
- fontSize: "16px",
1321
- letterSpacing: "0.5",
1322
- textTransform: "initial"
1323
- },
1324
- altBody: {
1325
- fontSize: "14px",
1326
- letterSpacing: "0.25",
1327
- textTransform: "initial"
1328
- },
1329
- subtitle: {
1330
- fontSize: "16px",
1331
- letterSpacing: "0.15",
1332
- textTransform: "initial"
1333
- },
1334
- altSubtitle: {
1335
- fontSize: "14px",
1336
- letterSpacing: "0.1",
1337
- textTransform: "initial"
1338
- },
1339
- caption: {
1340
- fontSize: "12px",
1341
- letterSpacing: "0.4",
1342
- textTransform: "initial"
1343
- },
1344
- overline: {
1345
- fontSize: "12px",
1346
- letterSpacing: "2",
1347
- textTransform: "uppercase"
1348
- }
1349
- };
1350
- exports.typeface = typeface;