@dxc-technology/halstack-react 0.0.0-02e2a15 → 0.0.0-02fc653

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 (340) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/V3Select/V3Select.js +455 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/V3Textarea/V3Textarea.js +260 -0
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/accordion/Accordion.js +258 -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 +170 -0
  13. package/accordion-group/types.d.ts +72 -0
  14. package/accordion-group/types.js +5 -0
  15. package/alert/Alert.d.ts +4 -0
  16. package/alert/Alert.js +290 -0
  17. package/alert/types.d.ts +49 -0
  18. package/alert/types.js +5 -0
  19. package/badge/Badge.js +59 -0
  20. package/{dist/box → box}/Box.js +34 -29
  21. package/box/Box.stories.jsx +132 -0
  22. package/box/index.d.ts +25 -0
  23. package/button/Button.d.ts +4 -0
  24. package/button/Button.js +177 -0
  25. package/button/Button.stories.tsx +293 -0
  26. package/button/types.d.ts +57 -0
  27. package/button/types.js +5 -0
  28. package/card/Card.d.ts +4 -0
  29. package/{dist/card → card}/Card.js +42 -124
  30. package/card/types.d.ts +69 -0
  31. package/card/types.js +5 -0
  32. package/checkbox/Checkbox.d.ts +4 -0
  33. package/checkbox/Checkbox.js +253 -0
  34. package/checkbox/Checkbox.stories.tsx +192 -0
  35. package/checkbox/types.d.ts +60 -0
  36. package/checkbox/types.js +5 -0
  37. package/{dist/chip → chip}/Chip.js +74 -76
  38. package/chip/index.d.ts +22 -0
  39. package/{dist/common → common}/OpenSans.css +0 -0
  40. package/{dist/common → common}/RequiredComponent.js +3 -11
  41. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  42. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  43. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  44. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  45. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  46. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  47. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  48. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  49. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  50. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  51. package/{dist/common → common}/utils.js +0 -0
  52. package/common/variables.js +1569 -0
  53. package/{dist/date → date}/Date.js +71 -55
  54. package/date/index.d.ts +27 -0
  55. package/date-input/DateInput.d.ts +4 -0
  56. package/date-input/DateInput.js +361 -0
  57. package/date-input/types.d.ts +100 -0
  58. package/date-input/types.js +5 -0
  59. package/dialog/Dialog.d.ts +4 -0
  60. package/dialog/Dialog.js +165 -0
  61. package/dialog/types.d.ts +43 -0
  62. package/dialog/types.js +5 -0
  63. package/dropdown/Dropdown.d.ts +4 -0
  64. package/dropdown/Dropdown.js +417 -0
  65. package/dropdown/types.d.ts +89 -0
  66. package/dropdown/types.js +5 -0
  67. package/file-input/FileInput.js +532 -0
  68. package/file-input/FileItem.js +193 -0
  69. package/file-input/index.d.ts +81 -0
  70. package/footer/Footer.d.ts +4 -0
  71. package/footer/Footer.js +266 -0
  72. package/footer/Footer.stories.jsx +151 -0
  73. package/footer/Icons.js +77 -0
  74. package/footer/types.d.ts +61 -0
  75. package/footer/types.js +5 -0
  76. package/header/Header.d.ts +7 -0
  77. package/header/Header.js +324 -0
  78. package/header/Icons.js +34 -0
  79. package/header/types.d.ts +45 -0
  80. package/header/types.js +5 -0
  81. package/heading/Heading.js +176 -0
  82. package/heading/index.d.ts +17 -0
  83. package/input-text/Icons.js +22 -0
  84. package/input-text/InputText.js +611 -0
  85. package/input-text/index.d.ts +36 -0
  86. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  87. package/layout/Icons.js +55 -0
  88. package/link/Link.d.ts +3 -0
  89. package/link/Link.js +161 -0
  90. package/link/types.d.ts +74 -0
  91. package/link/types.js +5 -0
  92. package/main.d.ts +44 -0
  93. package/{dist/main.js → main.js} +121 -69
  94. package/number-input/NumberInput.js +128 -0
  95. package/number-input/NumberInput.stories.jsx +115 -0
  96. package/number-input/NumberInputContext.js +16 -0
  97. package/number-input/index.d.ts +113 -0
  98. package/package.json +32 -23
  99. package/paginator/Icons.js +66 -0
  100. package/paginator/Paginator.d.ts +4 -0
  101. package/paginator/Paginator.js +198 -0
  102. package/paginator/Paginator.stories.tsx +63 -0
  103. package/paginator/types.d.ts +38 -0
  104. package/paginator/types.js +5 -0
  105. package/password-input/PasswordInput.d.ts +4 -0
  106. package/password-input/PasswordInput.js +162 -0
  107. package/password-input/PasswordInput.stories.tsx +131 -0
  108. package/password-input/types.d.ts +100 -0
  109. package/password-input/types.js +5 -0
  110. package/progress-bar/ProgressBar.d.ts +4 -0
  111. package/progress-bar/ProgressBar.js +170 -0
  112. package/progress-bar/types.d.ts +37 -0
  113. package/progress-bar/types.js +5 -0
  114. package/radio/Radio.d.ts +4 -0
  115. package/radio/Radio.js +174 -0
  116. package/radio/Radio.stories.tsx +192 -0
  117. package/radio/types.d.ts +54 -0
  118. package/radio/types.js +5 -0
  119. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +77 -135
  120. package/resultsetTable/index.d.ts +19 -0
  121. package/select/Select.js +865 -0
  122. package/select/index.d.ts +131 -0
  123. package/{dist/sidenav → sidenav}/Sidenav.js +24 -58
  124. package/sidenav/index.d.ts +13 -0
  125. package/slider/Slider.d.ts +4 -0
  126. package/slider/Slider.js +306 -0
  127. package/slider/types.d.ts +83 -0
  128. package/slider/types.js +5 -0
  129. package/spinner/Spinner.d.ts +4 -0
  130. package/spinner/Spinner.js +250 -0
  131. package/spinner/Spinner.stories.jsx +102 -0
  132. package/spinner/types.d.ts +32 -0
  133. package/spinner/types.js +5 -0
  134. package/switch/Switch.d.ts +4 -0
  135. package/switch/Switch.js +179 -0
  136. package/switch/types.d.ts +58 -0
  137. package/switch/types.js +5 -0
  138. package/table/Table.d.ts +4 -0
  139. package/table/Table.js +118 -0
  140. package/table/Table.stories.jsx +276 -0
  141. package/table/types.d.ts +21 -0
  142. package/table/types.js +5 -0
  143. package/tabs/Tabs.d.ts +4 -0
  144. package/tabs/Tabs.js +211 -0
  145. package/tabs/types.d.ts +71 -0
  146. package/tabs/types.js +5 -0
  147. package/tag/Tag.js +214 -0
  148. package/tag/Tag.stories.jsx +145 -0
  149. package/tag/index.d.ts +24 -0
  150. package/text-input/TextInput.js +825 -0
  151. package/text-input/index.d.ts +135 -0
  152. package/textarea/Textarea.js +317 -0
  153. package/textarea/Textarea.stories.jsx +135 -0
  154. package/textarea/index.d.ts +117 -0
  155. package/{dist/toggle → toggle}/Toggle.js +15 -49
  156. package/toggle/index.d.ts +21 -0
  157. package/toggle-group/ToggleGroup.js +243 -0
  158. package/toggle-group/index.d.ts +21 -0
  159. package/{dist/upload → upload}/Upload.js +11 -19
  160. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  161. package/upload/buttons-upload/Icons.js +40 -0
  162. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  163. package/upload/dragAndDropArea/Icons.js +39 -0
  164. package/upload/file-upload/FileToUpload.js +115 -0
  165. package/upload/file-upload/Icons.js +66 -0
  166. package/{dist/upload → upload}/files-upload/FilesToUpload.js +14 -28
  167. package/upload/index.d.ts +15 -0
  168. package/upload/transaction/Icons.js +160 -0
  169. package/upload/transaction/Transaction.js +104 -0
  170. package/upload/transactions/Transactions.js +94 -0
  171. package/{dist/useTheme.js → useTheme.js} +0 -0
  172. package/wizard/Icons.js +65 -0
  173. package/wizard/Wizard.js +271 -0
  174. package/wizard/index.d.ts +18 -0
  175. package/README.md +0 -66
  176. package/babel.config.js +0 -8
  177. package/dist/BackgroundColorContext.js +0 -46
  178. package/dist/ThemeContext.js +0 -216
  179. package/dist/accordion/Accordion.js +0 -284
  180. package/dist/accordion/Accordion.stories.js +0 -207
  181. package/dist/accordion/readme.md +0 -96
  182. package/dist/accordion-group/AccordionGroup.js +0 -154
  183. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  184. package/dist/accordion-group/readme.md +0 -70
  185. package/dist/alert/Alert.js +0 -318
  186. package/dist/alert/Alert.stories.js +0 -158
  187. package/dist/alert/close.svg +0 -4
  188. package/dist/alert/error.svg +0 -4
  189. package/dist/alert/info.svg +0 -4
  190. package/dist/alert/readme.md +0 -43
  191. package/dist/alert/success.svg +0 -4
  192. package/dist/alert/warning.svg +0 -4
  193. package/dist/badge/Badge.js +0 -40
  194. package/dist/button/Button.js +0 -219
  195. package/dist/button/Button.stories.js +0 -224
  196. package/dist/button/readme.md +0 -93
  197. package/dist/checkbox/Checkbox.js +0 -233
  198. package/dist/checkbox/Checkbox.stories.js +0 -144
  199. package/dist/checkbox/readme.md +0 -116
  200. package/dist/common/variables.js +0 -588
  201. package/dist/date/Date.stories.js +0 -205
  202. package/dist/date/calendar.svg +0 -1
  203. package/dist/date/calendar_dark.svg +0 -1
  204. package/dist/date/readme.md +0 -73
  205. package/dist/dialog/Dialog.js +0 -203
  206. package/dist/dialog/Dialog.stories.js +0 -217
  207. package/dist/dialog/readme.md +0 -32
  208. package/dist/dropdown/Dropdown.js +0 -456
  209. package/dist/dropdown/Dropdown.stories.js +0 -249
  210. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  211. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  212. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  213. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  214. package/dist/dropdown/readme.md +0 -69
  215. package/dist/footer/Footer.js +0 -405
  216. package/dist/footer/Footer.stories.js +0 -94
  217. package/dist/footer/dxc_logo_wht.png +0 -0
  218. package/dist/footer/readme.md +0 -41
  219. package/dist/header/Header.js +0 -385
  220. package/dist/header/Header.stories.js +0 -176
  221. package/dist/header/close_icon.svg +0 -1
  222. package/dist/header/dxc_logo_black.png +0 -0
  223. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  224. package/dist/header/dxc_logo_white.png +0 -0
  225. package/dist/header/hamb_menu_black.svg +0 -1
  226. package/dist/header/hamb_menu_white.svg +0 -1
  227. package/dist/header/readme.md +0 -33
  228. package/dist/heading/Heading.js +0 -163
  229. package/dist/input-text/InputText.js +0 -609
  230. package/dist/input-text/InputText.stories.js +0 -209
  231. package/dist/input-text/error.svg +0 -1
  232. package/dist/input-text/readme.md +0 -91
  233. package/dist/layout/facebook.svg +0 -45
  234. package/dist/layout/linkedin.svg +0 -50
  235. package/dist/layout/twitter.svg +0 -53
  236. package/dist/link/Link.js +0 -200
  237. package/dist/link/readme.md +0 -51
  238. package/dist/paginator/Paginator.js +0 -261
  239. package/dist/paginator/images/next.svg +0 -3
  240. package/dist/paginator/images/nextPage.svg +0 -3
  241. package/dist/paginator/images/previous.svg +0 -3
  242. package/dist/paginator/images/previousPage.svg +0 -3
  243. package/dist/paginator/readme.md +0 -50
  244. package/dist/progress-bar/ProgressBar.js +0 -192
  245. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  246. package/dist/progress-bar/readme.md +0 -63
  247. package/dist/radio/Radio.js +0 -190
  248. package/dist/radio/Radio.stories.js +0 -166
  249. package/dist/radio/readme.md +0 -70
  250. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  251. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  252. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  253. package/dist/select/Select.js +0 -490
  254. package/dist/select/Select.stories.js +0 -235
  255. package/dist/select/readme.md +0 -72
  256. package/dist/slider/Slider.js +0 -267
  257. package/dist/slider/Slider.stories.js +0 -241
  258. package/dist/slider/readme.md +0 -64
  259. package/dist/spinner/Spinner.js +0 -214
  260. package/dist/spinner/Spinner.stories.js +0 -183
  261. package/dist/spinner/readme.md +0 -65
  262. package/dist/switch/Switch.js +0 -194
  263. package/dist/switch/Switch.stories.js +0 -134
  264. package/dist/switch/readme.md +0 -133
  265. package/dist/table/Table.js +0 -98
  266. package/dist/tabs/Tabs.js +0 -325
  267. package/dist/tabs/Tabs.stories.js +0 -130
  268. package/dist/tabs/readme.md +0 -78
  269. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  270. package/dist/tabs-for-sections/readme.md +0 -78
  271. package/dist/tag/Tag.js +0 -268
  272. package/dist/textarea/Textarea.js +0 -238
  273. package/dist/toggle/Toggle.stories.js +0 -297
  274. package/dist/toggle/readme.md +0 -80
  275. package/dist/toggle-group/ToggleGroup.js +0 -223
  276. package/dist/toggle-group/readme.md +0 -82
  277. package/dist/upload/Upload.stories.js +0 -72
  278. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -123
  279. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  280. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  281. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -293
  282. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  283. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  284. package/dist/upload/file-upload/FileToUpload.js +0 -162
  285. package/dist/upload/file-upload/audio-icon.svg +0 -4
  286. package/dist/upload/file-upload/close.svg +0 -4
  287. package/dist/upload/file-upload/file-icon.svg +0 -4
  288. package/dist/upload/file-upload/video-icon.svg +0 -4
  289. package/dist/upload/readme.md +0 -37
  290. package/dist/upload/transaction/Transaction.js +0 -152
  291. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  292. package/dist/upload/transaction/audio-icon.svg +0 -4
  293. package/dist/upload/transaction/error-icon.svg +0 -4
  294. package/dist/upload/transaction/file-icon-err.svg +0 -4
  295. package/dist/upload/transaction/file-icon.svg +0 -4
  296. package/dist/upload/transaction/image-icon-err.svg +0 -4
  297. package/dist/upload/transaction/image-icon.svg +0 -4
  298. package/dist/upload/transaction/success-icon.svg +0 -4
  299. package/dist/upload/transaction/video-icon-err.svg +0 -4
  300. package/dist/upload/transaction/video-icon.svg +0 -4
  301. package/dist/upload/transactions/Transactions.js +0 -122
  302. package/dist/wizard/Wizard.js +0 -355
  303. package/dist/wizard/invalid_icon.svg +0 -6
  304. package/dist/wizard/valid_icon.svg +0 -6
  305. package/dist/wizard/validation-wrong.svg +0 -6
  306. package/test/Accordion.test.js +0 -33
  307. package/test/AccordionGroup.test.js +0 -125
  308. package/test/Alert.test.js +0 -53
  309. package/test/Box.test.js +0 -10
  310. package/test/Button.test.js +0 -18
  311. package/test/Card.test.js +0 -30
  312. package/test/Checkbox.test.js +0 -45
  313. package/test/Chip.test.js +0 -25
  314. package/test/Date.test.js +0 -393
  315. package/test/Dialog.test.js +0 -23
  316. package/test/Dropdown.test.js +0 -130
  317. package/test/Footer.test.js +0 -99
  318. package/test/Header.test.js +0 -39
  319. package/test/Heading.test.js +0 -35
  320. package/test/InputText.test.js +0 -240
  321. package/test/Link.test.js +0 -42
  322. package/test/Paginator.test.js +0 -177
  323. package/test/ProgressBar.test.js +0 -35
  324. package/test/Radio.test.js +0 -37
  325. package/test/ResultsetTable.test.js +0 -330
  326. package/test/Select.test.js +0 -192
  327. package/test/Sidenav.test.js +0 -45
  328. package/test/Slider.test.js +0 -82
  329. package/test/Spinner.test.js +0 -27
  330. package/test/Switch.test.js +0 -45
  331. package/test/Table.test.js +0 -36
  332. package/test/Tabs.test.js +0 -109
  333. package/test/TabsForSections.test.js +0 -34
  334. package/test/Tag.test.js +0 -32
  335. package/test/TextArea.test.js +0 -52
  336. package/test/ToggleGroup.test.js +0 -81
  337. package/test/Upload.test.js +0 -60
  338. package/test/Wizard.test.js +0 -130
  339. package/test/mocks/pngMock.js +0 -1
  340. package/test/mocks/svgMock.js +0 -1
@@ -1,588 +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_blk_rgb = _interopRequireDefault(require("../header/dxc_logo_blk_rgb.svg"));
11
-
12
- var _dxc_logo_wht = _interopRequireDefault(require("../footer/dxc_logo_wht.png"));
13
-
14
- var globalTokens = {
15
- black: "#000000",
16
- lightBlack: "#212121",
17
- yellow: "#FFED00",
18
- lightGrey: "#D9D9D9",
19
- darkRed: "#D0011B",
20
- lightRed: "#FF6161",
21
- lightBlue: "#CEE0F5",
22
- lightYellow: "#FCF2BD",
23
- lightPink: "#F9CFCF",
24
- lightGreen: "#DBF1C4",
25
- blue: "#005FCC",
26
- lighterGrey: "#F8F8F8",
27
- red: "#D0011B",
28
- violet: "#8800F6",
29
- darkBlue: "#006BF6",
30
- inherit: "inherit",
31
- transparent: "transparent",
32
- purple: "#6f2c91",
33
- mediumPurple: "#ead8f3",
34
- lightPurple: "#f5ebf9",
35
- lighterPurple: "#d0bddb",
36
- white: "#ffffff",
37
- darkGrey: "#666666",
38
- mediumGrey: "#bfbfbf",
39
- mediumWhite: "#f9f9f9",
40
- mediumBlue: "#0067b3",
41
- softBlue: "#b1cee6",
42
- darkWhite: "#eeeeee",
43
- lighterBlack: "#b1b1b1",
44
- mediumBlack: "#676767",
45
- mediumGreyBlack: "#dbdbdb",
46
- lightWhite: "#f2f2f2",
47
- softGrey: "#cecece",
48
- softBlack: "#565656",
49
- fontSize10: "10px",
50
- type_sans: "Open Sans, sans-serif",
51
- type_scale_root: "16px",
52
- type_scale_08: "3.75rem",
53
- type_scale_07: "3rem",
54
- type_scale_06: "2rem",
55
- type_scale_05: "1.5rem",
56
- type_scale_04: "1.25rem",
57
- type_scale_03: "1rem",
58
- type_scale_02: "0.875rem",
59
- type_scale_01: "0.75rem",
60
- type_ligth: "300",
61
- type_regular: "400",
62
- type_semibold: "600",
63
- type_bold: "bold",
64
- type_italic: "italic",
65
- type_normal: "normal",
66
- type_spacing_tight_02: "-0.05em",
67
- type_spacing_tight_01: "-0.025em",
68
- type_spacing_normal: "0",
69
- type_spacing_wide_01: "0.025em",
70
- type_spacing_wide_02: "0.05em",
71
- type_spacing_wide_03: "0.1em",
72
- type_initial: "initial",
73
- type_uppercase: "uppercase",
74
- type_no_line: "none",
75
- type_underline: "underline",
76
- type_line_through: "line-through",
77
- type_leading_compact_03: "1em",
78
- type_leading_compact_02: "1.25em",
79
- type_leading_compact_01: "1.365em",
80
- type_leading_normal: "1.5em",
81
- type_leading_loose_01: "1.75em",
82
- type_leading_loose_02: "2em"
83
- };
84
- exports.globalTokens = globalTokens;
85
- var componentTokens = {
86
- accordion: {
87
- backgroundColor: globalTokens.white,
88
- fontColor: globalTokens.darkGrey,
89
- arrowColor: globalTokens.purple,
90
- hoverBackgroundColor: globalTokens.lightPurple,
91
- disabledFontColor: globalTokens.mediumGrey,
92
- focusOutline: globalTokens.purple,
93
- fontFamily: globalTokens.type_sans,
94
- fontSizeBase: globalTokens.type_scale_root,
95
- fontSize: globalTokens.type_scale_03,
96
- fontWeight: globalTokens.type_ligth,
97
- fontStyle: globalTokens.type_italic,
98
- fontLetterSpacingWide01: globalTokens.type_spacing_wide_01
99
- },
100
- alert: {
101
- overlayColor: globalTokens.black,
102
- infoColor: globalTokens.lightBlue,
103
- confirmColor: globalTokens.lightGreen,
104
- warningColor: globalTokens.lightYellow,
105
- errorColor: globalTokens.lightPink,
106
- focusColor: globalTokens.blue,
107
- fontFamily: globalTokens.type_sans,
108
- fontSizeBase: globalTokens.type_scale_root,
109
- fontSize: globalTokens.type_scale_01,
110
- fontTextTransform: globalTokens.type_uppercase,
111
- fontWeight: globalTokens.type_bold
112
- },
113
- button: {
114
- primaryBackgroundColor: globalTokens.purple,
115
- primaryHoverBackgroundColor: globalTokens.black,
116
- primaryFontColor: globalTokens.white,
117
- primaryHoverFontColor: globalTokens.white,
118
- primaryActiveBackgroundColor: globalTokens.mediumBlack,
119
- disabledPrimaryBackgroundColor: globalTokens.lighterPurple,
120
- disabledPrimaryFontColor: globalTokens.white,
121
- secondaryOutlinedColor: globalTokens.purple,
122
- secondaryBackgroundColor: globalTokens.transparent,
123
- hoverOutlinedColor: globalTokens.black,
124
- secondaryFontColor: globalTokens.black,
125
- secondaryHoverFontColor: globalTokens.black,
126
- secondaryActiveBackgroundColor: globalTokens.mediumGreyBlack,
127
- secondaryHoverBackgroundColor: globalTokens.darkWhite,
128
- disabledSecondaryOutlinedColor: globalTokens.lighterPurple,
129
- disabledSecondaryFontColor: globalTokens.lighterBlack,
130
- textBackgroundColor: globalTokens.transparent,
131
- textHoverBackgroundColor: globalTokens.black,
132
- textFontColor: globalTokens.purple,
133
- textHoverFontColor: globalTokens.white,
134
- textActiveBackgroundColor: globalTokens.mediumBlack,
135
- disabledTextFontColor: globalTokens.lighterPurple,
136
- focusColor: globalTokens.blue,
137
- fontFamily: globalTokens.type_sans,
138
- fontSizeBase: globalTokens.type_scale_root,
139
- fontSize: globalTokens.type_scale_02,
140
- fontLineHeight: globalTokens.type_leading_normal,
141
- fontWeight: globalTokens.type_regular,
142
- fontLetterSpacingWide01: globalTokens.type_spacing_wide_01
143
- },
144
- box: {
145
- backgroundColor: globalTokens.white,
146
- fontFamily: globalTokens.type_sans,
147
- fontSizeBase: globalTokens.type_scale_root,
148
- fontSize: globalTokens.type_scale_02,
149
- fontLetterSpacingWide01: globalTokens.type_spacing_wide_01
150
- },
151
- card: {
152
- backgroundColor: globalTokens.white,
153
- textDecoration: globalTokens.type_no_line
154
- },
155
- checkbox: {
156
- backgroundColorChecked: globalTokens.mediumBlue,
157
- borderColor: globalTokens.mediumBlue,
158
- checkColor: globalTokens.white,
159
- fontColor: globalTokens.inherit,
160
- disabledBackgroundColorChecked: globalTokens.softBlue,
161
- disabledBorderColor: globalTokens.softBlue,
162
- disabledCheckColor: globalTokens.white,
163
- disabledFontColor: globalTokens.lighterBlack,
164
- focusColor: globalTokens.blue,
165
- fontFamily: globalTokens.type_sans
166
- },
167
- chip: {
168
- backgroundColor: globalTokens.darkWhite,
169
- outlinedColor: "",
170
- fontColor: globalTokens.black,
171
- disabledBackgroundColor: globalTokens.mediumWhite,
172
- disabledFontColor: globalTokens.lighterBlack,
173
- fontFamily: globalTokens.type_sans,
174
- fontSizeBase: globalTokens.type_scale_root,
175
- fontSize: globalTokens.type_scale_03
176
- },
177
- date: {
178
- pickerSelectedDateBackgroundColor: globalTokens.purple,
179
- pickerSelectedDateColor: globalTokens.white,
180
- pickerBackgroundColor: globalTokens.white,
181
- pickerFontColor: globalTokens.black,
182
- pickerActualDate: globalTokens.lightGrey,
183
- pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
184
- pickerHoverDateFontColor: globalTokens.black,
185
- scrollBarThumbColor: globalTokens.darkGrey,
186
- scrollBarTrackColor: globalTokens.lightGrey,
187
- focusColor: globalTokens.blue,
188
- fontFamily: globalTokens.type_sans,
189
- fontSizeBase: globalTokens.type_scale_root,
190
- fontSize: globalTokens.type_scale_06
191
- },
192
- dialog: {
193
- overlayColor: globalTokens.black,
194
- scrollBarThumbColor: globalTokens.darkGrey,
195
- scrollBarTrackColor: globalTokens.lightGrey,
196
- backgroundColor: globalTokens.white,
197
- fontFamily: globalTokens.type_sans
198
- },
199
- dropdown: {
200
- backgroundColor: globalTokens.white,
201
- fontColor: globalTokens.black,
202
- dropdownBackgroundColor: globalTokens.white,
203
- dropdownFontColor: globalTokens.black,
204
- hoverBackgroundOption: globalTokens.white,
205
- hoverBackgroundColor: globalTokens.white,
206
- scrollBarThumbColor: globalTokens.darkGrey,
207
- scrollBarTrackColor: globalTokens.lightGrey,
208
- focusColor: globalTokens.blue,
209
- fontFamily: globalTokens.type_sans,
210
- fontSizeBase: globalTokens.type_scale_root,
211
- fontSize: globalTokens.type_scale_03
212
- },
213
- footer: {
214
- backgroundColor: globalTokens.black,
215
- bottomLinksDividerColor: globalTokens.mediumBlue,
216
- bottomLinksDividerThickness: "2px",
217
- bottomLinksDividerStyle: "solid",
218
- bottomLinksDividerSpacing: "6px",
219
- bottomLinksFontFamily: globalTokens.type_sans,
220
- bottomLinksFontSize: globalTokens.type_scale_01,
221
- bottomLinksFontStyle: globalTokens.type_normal,
222
- bottomLinksFontWeight: globalTokens.type_regular,
223
- bottomLinksFontColor: "",
224
- bottomLinksTextDecoration: globalTokens.type_no_line,
225
- copyrightFontFamily: globalTokens.type_sans,
226
- copyrightFontSize: globalTokens.type_scale_01,
227
- copyrightFontStyle: globalTokens.type_normal,
228
- copyrightFontWeight: globalTokens.type_regular,
229
- copyrightFontColor: "",
230
- customContentFontFamily: globalTokens.type_sans,
231
- customContentFontSize: globalTokens.type_scale_root,
232
- customContentFontStyle: globalTokens.type_normal,
233
- customContentFontWeight: globalTokens.type_regular,
234
- customContentFontColor: "",
235
- fontColorBase: globalTokens.white,
236
- logo: _dxc_logo_wht["default"],
237
- logoHeight: "34px",
238
- logoWidth: "auto",
239
- minHeight: "120px",
240
- socialIconWidth: "25px",
241
- socialIconHeight: "25px",
242
- socialIconsGutter: "15px"
243
- },
244
- header: {
245
- backgroundColor: globalTokens.white,
246
- underlinedColor: globalTokens.black,
247
- fontColor: globalTokens.black,
248
- backgroundColorMenu: globalTokens.white,
249
- fontColorMenu: globalTokens.black,
250
- hamburguerColor: globalTokens.black,
251
- hoverHamburguerColor: globalTokens.mediumGreyBlack,
252
- overlayColor: globalTokens.softBlack,
253
- focusColor: globalTokens.blue,
254
- logo: _dxc_logo_blk_rgb["default"],
255
- logoResponsive: _dxc_logo_blk_rgb["default"],
256
- fontFamily: globalTokens.type_sans,
257
- fontSizeBase: globalTokens.type_scale_root,
258
- fontSize: globalTokens.fontSize10,
259
- fontWeight: globalTokens.type_semibold,
260
- fontTextTransform: globalTokens.type_uppercase
261
- },
262
- heading: {
263
- fontFamily: globalTokens.type_sans,
264
- fontSizeBase: globalTokens.type_scale_root,
265
- fontSize16: globalTokens.type_scale_03,
266
- fontSize20: globalTokens.type_scale_04,
267
- fontSize24: globalTokens.type_scale_05,
268
- fontSize34: globalTokens.type_scale_06,
269
- fontSize48: globalTokens.type_scale_07,
270
- fontSize60: globalTokens.type_scale_08,
271
- fontWeightLight: globalTokens.type_light,
272
- fontWeight400: globalTokens.type_regular,
273
- fontWeight600: globalTokens.type_semibold,
274
- fontHeightLevelCompact: globalTokens.type_leading_compact_01,
275
- fontHeightLevelNormal: globalTokens.type_leading_normal,
276
- fontLetterSpacingTight01: globalTokens.type_spacing_tight_01,
277
- fontLetterSpacingNormal: globalTokens.type_spacing_normal,
278
- fontLetterSpacingWide01: globalTokens.type_spacing_wide_01
279
- },
280
- inputText: {
281
- fontColor: globalTokens.black,
282
- disabledFontColor: globalTokens.lighterBlack,
283
- error: globalTokens.red,
284
- selectedOptionBackgroundColor: globalTokens.lightWhite,
285
- hoverOptionColor: globalTokens.black,
286
- scrollBarThumbColor: globalTokens.darkGrey,
287
- scrollBarTrackColor: globalTokens.lightGrey,
288
- fontFamily: globalTokens.type_sans,
289
- fontSizeBase: globalTokens.type_scale_root,
290
- fontSize: globalTokens.type_scale_03
291
- },
292
- link: {
293
- fontColor: globalTokens.blue,
294
- visitedFontColor: globalTokens.violet,
295
- underlinedBackgroundColor: globalTokens.blue,
296
- visitedUnderlinedBackgroundColor: globalTokens.violet,
297
- disabledColor: globalTokens.lightGrey,
298
- disabledUnderlinedBackgroundColor: globalTokens.lightGrey,
299
- hoverFontColor: globalTokens.darkBlue,
300
- fontSizeBase: globalTokens.type_scale_root,
301
- fontSize: globalTokens.type_scale_03,
302
- textDecoration: globalTokens.type_no_line
303
- },
304
- paginator: {
305
- paginatorBackgroundColor: globalTokens.darkWhite,
306
- paginatorFontColor: globalTokens.black,
307
- fontFamily: globalTokens.type_sans,
308
- fontSizeBase: globalTokens.type_scale_root,
309
- fontSize: globalTokens.type_scale_02
310
- },
311
- progressBar: {
312
- trackLine: globalTokens.purple,
313
- totalLine: globalTokens.softGrey,
314
- fontColor: globalTokens.inherit,
315
- overlayColor: globalTokens.black,
316
- fontFamily: globalTokens.type_sans,
317
- fontSizeBase: globalTokens.type_scale_root,
318
- fontSize: globalTokens.type_scale_01,
319
- fontTextTransform: globalTokens.type_uppercase
320
- },
321
- radio: {
322
- color: globalTokens.black,
323
- disabledColor: globalTokens.lighterBlack,
324
- fontColor: globalTokens.inherit,
325
- disabledFontColor: globalTokens.lighterBlack,
326
- focusColor: globalTokens.blue,
327
- fontFamily: globalTokens.type_sans
328
- },
329
- select: {
330
- selectedOptionBackgroundColor: globalTokens.lightGrey,
331
- color: globalTokens.black,
332
- hoveredOptionBackgroundColor: globalTokens.lightWhite,
333
- error: globalTokens.red,
334
- scrollBarThumbColor: globalTokens.darkGrey,
335
- scrollBarTrackColor: globalTokens.lightGrey,
336
- disabledColor: globalTokens.lighterBlack,
337
- focusColor: globalTokens.blue,
338
- fontFamily: globalTokens.type_sans,
339
- fontSizeBase: globalTokens.type_scale_root,
340
- fontSize: globalTokens.type_scale_03
341
- },
342
- sidenav: {
343
- backgroundColor: globalTokens.lighterGrey,
344
- arrowContainerColor: globalTokens.lightGrey,
345
- arrowColor: globalTokens.black,
346
- customContentFontFamily: globalTokens.type_sans,
347
- customContentFontSize: globalTokens.type_scale_root,
348
- customContentFontStyle: globalTokens.type_normal,
349
- customContentFontWeight: globalTokens.type_regular,
350
- customContentFontColor: globalTokens.black,
351
- titleFontFamily: globalTokens.type_sans,
352
- titleFontSize: globalTokens.type_scale_05,
353
- titleFontStyle: globalTokens.type_normal,
354
- titleFontWeight: globalTokens.type_regular,
355
- titleFontColor: "#000000de",
356
- titleFontTextTransform: "none",
357
- titleFontLetterSpacing: globalTokens.type_spacing_normal,
358
- subtitleFontFamily: globalTokens.type_sans,
359
- subtitleFontSize: globalTokens.type_scale_01,
360
- subtitleFontStyle: globalTokens.type_normal,
361
- subtitleFontWeight: globalTokens.type_regular,
362
- subtitleFontColor: "#00000099",
363
- subtitleFontTextTransform: globalTokens.type_uppercase,
364
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_03,
365
- linkFontFamily: globalTokens.type_sans,
366
- linkFontSize: globalTokens.type_scale_02,
367
- linkFontStyle: globalTokens.type_normal,
368
- linkFontWeight: globalTokens.type_regular,
369
- linkFontColor: "#00000099",
370
- linkFontTextTransform: "none",
371
- linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
372
- linkTextDecoration: globalTokens.type_no_line,
373
- linkMarginTop: "6px",
374
- linkMarginRight: "18px",
375
- linkMarginBottom: "6px",
376
- linkMarginLeft: "18px"
377
- },
378
- slider: {
379
- thumbBackgroundColor: globalTokens.mediumBlue,
380
- dotsBackgroundColor: globalTokens.mediumBlue,
381
- trackLine: globalTokens.mediumBlue,
382
- totalLine: globalTokens.softBlue,
383
- disabledThumbBackgroundColor: globalTokens.softBlue,
384
- disabledDotsBackgroundColor: globalTokens.softBlue,
385
- disabledTrackLine: globalTokens.softBlue,
386
- focusColor: globalTokens.blue,
387
- fontFamily: globalTokens.type_sans,
388
- fontSizeBase: globalTokens.type_scale_root,
389
- fontSize: globalTokens.type_scale_03
390
- },
391
- spinner: {
392
- trackCircleColor: globalTokens.purple,
393
- totalCircleColor: globalTokens.white,
394
- labelFontFamily: globalTokens.type_sans,
395
- labelFontSize: globalTokens.type_scale_01,
396
- labelFontStyle: globalTokens.type_normal,
397
- labelFontWeight: globalTokens.type_regular,
398
- labelFontColor: globalTokens.inherit,
399
- labelFontTextTransform: globalTokens.type_uppercase,
400
- labelLetterSpacing: globalTokens.type_spacing_normal,
401
- labelTextAlign: "center",
402
- progressValueFontFamily: globalTokens.type_sans,
403
- progressValueFontSize: globalTokens.type_scale_01,
404
- progressValueFontStyle: globalTokens.type_normal,
405
- progressValueFontWeight: globalTokens.type_regular,
406
- progressValueFontColor: globalTokens.inherit,
407
- progressValueLetterSpacing: globalTokens.type_spacing_normal,
408
- progressValueTextAlign: "center",
409
- overlayBackgroundColor: globalTokens.black,
410
- overlayOpacity: "0.8",
411
- overlayLabelFontFamily: globalTokens.type_sans,
412
- overlayLabelFontSize: globalTokens.type_scale_01,
413
- overlayLabelFontStyle: globalTokens.type_normal,
414
- overlayLabelFontWeight: globalTokens.type_regular,
415
- overlayLabelFontColor: globalTokens.white,
416
- overlayLabelFontTextTransform: globalTokens.type_uppercase,
417
- overlayLabelLetterSpacing: globalTokens.type_spacing_normal,
418
- overlayLabelTextAlign: "center",
419
- overlayProgressValueFontFamily: globalTokens.type_sans,
420
- overlayProgressValueFontSize: globalTokens.type_scale_01,
421
- overlayProgressValueFontStyle: globalTokens.type_normal,
422
- overlayProgressValueFontWeight: globalTokens.type_regular,
423
- overlayProgressValueFontColor: globalTokens.white,
424
- overlayProgressValueLetterSpacing: globalTokens.type_spacing_normal,
425
- overlayProgressValueTextAlign: "center"
426
- },
427
- "switch": {
428
- checkedTrackBackgroundColor: globalTokens.purple,
429
- disabledCheckedTrackBackgroundColor: globalTokens.lighterPurple,
430
- checkedThumbBackgroundColor: globalTokens.white,
431
- uncheckedThumbBackgroundColor: globalTokens.white,
432
- uncheckedTrackBackgroundColor: globalTokens.lightGrey,
433
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
434
- fontColor: globalTokens.black,
435
- disabledFontColor: globalTokens.lighterBlack,
436
- focusColor: globalTokens.blue,
437
- fontFamily: globalTokens.type_sans
438
- },
439
- tag: {
440
- textDecoration: globalTokens.type_no_line
441
- },
442
- table: {
443
- headerBackgroundColor: globalTokens.purple,
444
- headerFontColor: globalTokens.white,
445
- separatorColor: globalTokens.lightGrey,
446
- bodyBackgroundColor: globalTokens.white,
447
- bodyFontColor: globalTokens.black,
448
- scrollBarThumbColor: globalTokens.darkGrey,
449
- scrollBarTrackColor: globalTokens.lightGrey,
450
- fontFamily: globalTokens.type_sans,
451
- fontSizeBase: globalTokens.type_scale_root,
452
- fontSize: globalTokens.type_scale_02,
453
- fontWeight: globalTokens.type_regular
454
- },
455
- tabs: {
456
- selectedFontColor: globalTokens.purple,
457
- selectedIconColor: globalTokens.purple,
458
- selectedUnderlineColor: globalTokens.purple,
459
- backgroundColor: globalTokens.white,
460
- fontColor: globalTokens.darkGrey,
461
- disabledFontColor: globalTokens.mediumGrey,
462
- focusOutline: globalTokens.purple,
463
- divider: globalTokens.mediumGrey,
464
- hoverBackgroundColor: globalTokens.lightPurple,
465
- pressedBackgroundColor: globalTokens.mediumPurple,
466
- fontFamily: globalTokens.type_sans,
467
- fontSizeBase: globalTokens.type_scale_root,
468
- fontSize: globalTokens.type_scale_03,
469
- fontWeight: globalTokens.type_semibold
470
- },
471
- textarea: {
472
- fontColor: globalTokens.black,
473
- disabledFontColor: globalTokens.lighterBlack,
474
- error: globalTokens.red,
475
- scrollBarThumbColor: globalTokens.darkGrey,
476
- scrollBarTrackColor: globalTokens.lightGrey,
477
- fontFamily: globalTokens.type_sans,
478
- fontSizeBase: globalTokens.type_scale_root,
479
- fontSize: globalTokens.type_scale_03
480
- },
481
- toggleGroup: {
482
- selectedBackgroundColor: globalTokens.purple,
483
- disabledSelectedBackgroundColor: globalTokens.lighterPurple,
484
- selectedBackgroundHoverColor: globalTokens.black,
485
- selectedFontColor: globalTokens.white,
486
- selectedHoverFontColor: globalTokens.white,
487
- unselectedBackgroundColor: globalTokens.lightGrey,
488
- disabledUnselectedBackgroundColor: globalTokens.lightWhite,
489
- unselectedBackgroundHoverColor: globalTokens.darkWhite,
490
- unselectedFontColor: globalTokens.black,
491
- unselectedHoverFontColor: globalTokens.black,
492
- disabledUnselectedFontColor: globalTokens.lighterBlack,
493
- disabledSelectedFontColor: globalTokens.white,
494
- fontFamily: globalTokens.type_sans,
495
- fontSizeBase: globalTokens.type_scale_root,
496
- fontSize: globalTokens.type_scale_02,
497
- fontStyle: globalTokens.type_normal,
498
- fontTextTransform: globalTokens.type_uppercase,
499
- fontLetterSpacingWide02: globalTokens.type_spacing_wide_02
500
- },
501
- upload: {
502
- fontColor: globalTokens.darkGrey,
503
- shadowColor: globalTokens.lightWhite,
504
- backgroundDragColor: globalTokens.lightWhite,
505
- accentColor: globalTokens.lightGrey,
506
- fileHoverColor: globalTokens.darkWhite,
507
- scrollBarThumbColor: globalTokens.darkGrey,
508
- scrollBarTrackColor: globalTokens.lightGrey,
509
- errorColor: globalTokens.red,
510
- fontFamily: globalTokens.type_sans,
511
- fontSizeBase: globalTokens.type_scale_root,
512
- fontSize20: globalTokens.type_scale_04,
513
- fontSize16: globalTokens.type_scale_03,
514
- fontSize12: globalTokens.type_scale_01,
515
- fontStyle: globalTokens.type_italic,
516
- fontTextTransform: globalTokens.type_uppercase,
517
- fontWeight: globalTokens.type_bold
518
- },
519
- wizard: {
520
- selectedBackgroundColor: globalTokens.purple,
521
- selectedFont: globalTokens.white,
522
- borderColor: globalTokens.black,
523
- fontColor: globalTokens.inherit,
524
- lineColor: globalTokens.lightGrey,
525
- disabledBackground: globalTokens.lightGrey,
526
- disabledFont: globalTokens.darkGrey,
527
- fontFamily: globalTokens.type_sans,
528
- fontSizeBase: globalTokens.type_scale_root,
529
- fontSize16: globalTokens.type_scale_03,
530
- fontSize12: globalTokens.type_scale_01,
531
- fontStyle: globalTokens.type_normal,
532
- fontLetterSpacingWide01: globalTokens.type_spacing_wide_01,
533
- fontLetterSpacingWide02: globalTokens.type_spacing_wide_02
534
- }
535
- };
536
- exports.componentTokens = componentTokens;
537
- var spaces = {
538
- xxsmall: "6px",
539
- xsmall: "16px",
540
- small: "24px",
541
- medium: "36px",
542
- large: "48px",
543
- xlarge: "64px",
544
- xxlarge: "100px"
545
- };
546
- exports.spaces = spaces;
547
- var responsiveSizes = {
548
- mobileSmall: "320",
549
- mobileMedium: "375",
550
- mobileLarge: "425",
551
- tablet: "768",
552
- laptop: "1024",
553
- desktop: "1440"
554
- };
555
- exports.responsiveSizes = responsiveSizes;
556
- var typeface = {
557
- body: {
558
- fontSize: "16px",
559
- letterSpacing: "0.5",
560
- textTransform: "initial"
561
- },
562
- altBody: {
563
- fontSize: "14px",
564
- letterSpacing: "0.25",
565
- textTransform: "initial"
566
- },
567
- subtitle: {
568
- fontSize: "16px",
569
- letterSpacing: "0.15",
570
- textTransform: "initial"
571
- },
572
- altSubtitle: {
573
- fontSize: "14px",
574
- letterSpacing: "0.1",
575
- textTransform: "initial"
576
- },
577
- caption: {
578
- fontSize: "12px",
579
- letterSpacing: "0.4",
580
- textTransform: "initial"
581
- },
582
- overline: {
583
- fontSize: "12px",
584
- letterSpacing: "2",
585
- textTransform: "uppercase"
586
- }
587
- };
588
- exports.typeface = typeface;