@dxc-technology/halstack-react 0.0.0-cd617f3 → 0.0.0-cedf067

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 (332) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +1 -4
  3. package/HalstackContext.d.ts +12 -0
  4. package/HalstackContext.js +295 -0
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +15 -47
  7. package/accordion/Accordion.stories.tsx +307 -0
  8. package/accordion/Accordion.test.js +72 -0
  9. package/accordion/types.d.ts +8 -8
  10. package/accordion-group/AccordionGroup.d.ts +1 -1
  11. package/accordion-group/AccordionGroup.js +16 -17
  12. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  13. package/accordion-group/AccordionGroup.test.js +151 -0
  14. package/accordion-group/types.d.ts +8 -8
  15. package/alert/Alert.js +6 -3
  16. package/alert/Alert.stories.tsx +170 -0
  17. package/alert/Alert.test.js +92 -0
  18. package/alert/types.d.ts +1 -1
  19. package/badge/Badge.d.ts +4 -0
  20. package/badge/Badge.js +6 -4
  21. package/badge/types.d.ts +5 -0
  22. package/{radio → badge}/types.js +0 -0
  23. package/bleed/Bleed.d.ts +3 -0
  24. package/bleed/Bleed.js +51 -0
  25. package/bleed/Bleed.stories.tsx +341 -0
  26. package/bleed/types.d.ts +37 -0
  27. package/bleed/types.js +5 -0
  28. package/box/Box.d.ts +4 -0
  29. package/box/Box.js +28 -64
  30. package/box/Box.stories.tsx +132 -0
  31. package/box/Box.test.js +18 -0
  32. package/box/types.d.ts +43 -0
  33. package/box/types.js +5 -0
  34. package/bulleted-list/BulletedList.d.ts +7 -0
  35. package/bulleted-list/BulletedList.js +123 -0
  36. package/bulleted-list/BulletedList.stories.tsx +200 -0
  37. package/bulleted-list/types.d.ts +11 -0
  38. package/bulleted-list/types.js +5 -0
  39. package/button/Button.d.ts +1 -1
  40. package/button/Button.js +61 -87
  41. package/button/Button.stories.tsx +232 -242
  42. package/button/Button.test.js +35 -0
  43. package/button/types.d.ts +14 -18
  44. package/card/Card.d.ts +4 -0
  45. package/card/Card.js +38 -77
  46. package/card/Card.stories.tsx +201 -0
  47. package/card/Card.test.js +50 -0
  48. package/card/ice-cream.jpg +0 -0
  49. package/card/types.d.ts +67 -0
  50. package/card/types.js +5 -0
  51. package/checkbox/Checkbox.d.ts +1 -1
  52. package/checkbox/Checkbox.js +45 -41
  53. package/checkbox/Checkbox.stories.tsx +188 -0
  54. package/checkbox/Checkbox.test.js +78 -0
  55. package/checkbox/types.d.ts +9 -6
  56. package/chip/Chip.d.ts +4 -0
  57. package/chip/Chip.js +16 -76
  58. package/chip/Chip.stories.tsx +119 -0
  59. package/chip/Chip.test.js +56 -0
  60. package/chip/types.d.ts +45 -0
  61. package/chip/types.js +5 -0
  62. package/common/variables.js +301 -373
  63. package/date-input/DateInput.js +63 -52
  64. package/date-input/DateInput.stories.tsx +138 -0
  65. package/date-input/DateInput.test.js +479 -0
  66. package/date-input/types.d.ts +16 -9
  67. package/dialog/Dialog.d.ts +4 -0
  68. package/dialog/Dialog.js +10 -56
  69. package/dialog/Dialog.stories.tsx +212 -0
  70. package/dialog/Dialog.test.js +40 -0
  71. package/dialog/types.d.ts +43 -0
  72. package/dialog/types.js +5 -0
  73. package/dropdown/Dropdown.d.ts +4 -0
  74. package/dropdown/Dropdown.js +28 -87
  75. package/dropdown/Dropdown.stories.tsx +249 -0
  76. package/dropdown/Dropdown.test.js +189 -0
  77. package/dropdown/types.d.ts +80 -0
  78. package/dropdown/types.js +5 -0
  79. package/file-input/FileInput.d.ts +4 -0
  80. package/file-input/FileInput.js +172 -111
  81. package/file-input/FileInput.stories.tsx +507 -0
  82. package/file-input/FileInput.test.js +457 -0
  83. package/file-input/FileItem.d.ts +14 -0
  84. package/file-input/FileItem.js +16 -23
  85. package/file-input/types.d.ts +112 -0
  86. package/file-input/types.js +5 -0
  87. package/flex/Flex.d.ts +4 -0
  88. package/flex/Flex.js +57 -0
  89. package/flex/Flex.stories.tsx +103 -0
  90. package/flex/types.d.ts +21 -0
  91. package/flex/types.js +5 -0
  92. package/footer/Footer.d.ts +4 -0
  93. package/footer/Footer.js +36 -148
  94. package/footer/Footer.stories.tsx +130 -0
  95. package/footer/Footer.test.js +109 -0
  96. package/footer/Icons.d.ts +2 -0
  97. package/footer/Icons.js +4 -4
  98. package/footer/types.d.ts +65 -0
  99. package/footer/types.js +5 -0
  100. package/header/Header.d.ts +7 -0
  101. package/header/Header.js +55 -78
  102. package/header/Header.stories.tsx +172 -0
  103. package/header/Header.test.js +79 -0
  104. package/header/Icons.d.ts +2 -0
  105. package/header/Icons.js +2 -27
  106. package/header/types.d.ts +47 -0
  107. package/header/types.js +5 -0
  108. package/heading/Heading.d.ts +4 -0
  109. package/heading/Heading.js +7 -24
  110. package/heading/Heading.stories.tsx +54 -0
  111. package/heading/Heading.test.js +186 -0
  112. package/heading/types.d.ts +33 -0
  113. package/heading/types.js +5 -0
  114. package/inset/Inset.d.ts +3 -0
  115. package/inset/Inset.js +51 -0
  116. package/inset/Inset.stories.tsx +229 -0
  117. package/inset/types.d.ts +37 -0
  118. package/inset/types.js +5 -0
  119. package/layout/ApplicationLayout.d.ts +20 -0
  120. package/layout/ApplicationLayout.js +71 -135
  121. package/layout/ApplicationLayout.stories.tsx +161 -0
  122. package/layout/Icons.d.ts +5 -0
  123. package/layout/Icons.js +13 -2
  124. package/layout/SidenavContext.d.ts +5 -0
  125. package/layout/SidenavContext.js +19 -0
  126. package/layout/types.d.ts +42 -0
  127. package/layout/types.js +5 -0
  128. package/link/Link.d.ts +4 -0
  129. package/link/Link.js +60 -107
  130. package/link/Link.stories.tsx +193 -0
  131. package/link/Link.test.js +83 -0
  132. package/link/types.d.ts +54 -0
  133. package/link/types.js +5 -0
  134. package/main.d.ts +12 -12
  135. package/main.js +64 -58
  136. package/number-input/NumberInput.d.ts +4 -0
  137. package/number-input/NumberInput.js +16 -68
  138. package/number-input/NumberInput.stories.tsx +115 -0
  139. package/number-input/NumberInput.test.js +506 -0
  140. package/number-input/NumberInputContext.d.ts +4 -0
  141. package/number-input/NumberInputContext.js +5 -2
  142. package/number-input/numberInputContextTypes.d.ts +19 -0
  143. package/number-input/numberInputContextTypes.js +5 -0
  144. package/number-input/types.d.ts +124 -0
  145. package/number-input/types.js +5 -0
  146. package/package.json +10 -6
  147. package/paginator/Paginator.js +19 -46
  148. package/paginator/Paginator.stories.tsx +63 -0
  149. package/paginator/Paginator.test.js +308 -0
  150. package/paragraph/Paragraph.d.ts +6 -0
  151. package/paragraph/Paragraph.js +38 -0
  152. package/paragraph/Paragraph.stories.tsx +44 -0
  153. package/password-input/PasswordInput.d.ts +4 -0
  154. package/password-input/PasswordInput.js +22 -55
  155. package/password-input/{PasswordInput.stories.jsx → PasswordInput.stories.tsx} +4 -4
  156. package/password-input/PasswordInput.test.js +180 -0
  157. package/password-input/types.d.ts +110 -0
  158. package/password-input/types.js +5 -0
  159. package/progress-bar/ProgressBar.d.ts +4 -0
  160. package/progress-bar/ProgressBar.js +64 -71
  161. package/progress-bar/ProgressBar.stories.jsx +60 -0
  162. package/progress-bar/ProgressBar.test.js +110 -0
  163. package/progress-bar/types.d.ts +36 -0
  164. package/progress-bar/types.js +5 -0
  165. package/quick-nav/QuickNav.d.ts +4 -0
  166. package/quick-nav/QuickNav.js +118 -0
  167. package/quick-nav/QuickNav.stories.tsx +264 -0
  168. package/quick-nav/types.d.ts +21 -0
  169. package/quick-nav/types.js +5 -0
  170. package/radio-group/Radio.d.ts +4 -0
  171. package/radio-group/Radio.js +141 -0
  172. package/radio-group/RadioGroup.d.ts +4 -0
  173. package/radio-group/RadioGroup.js +283 -0
  174. package/radio-group/RadioGroup.stories.tsx +100 -0
  175. package/radio-group/RadioGroup.test.js +695 -0
  176. package/radio-group/types.d.ts +114 -0
  177. package/radio-group/types.js +5 -0
  178. package/resultsetTable/ResultsetTable.d.ts +4 -0
  179. package/resultsetTable/ResultsetTable.js +9 -29
  180. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  181. package/resultsetTable/ResultsetTable.test.js +348 -0
  182. package/resultsetTable/types.d.ts +67 -0
  183. package/resultsetTable/types.js +5 -0
  184. package/select/Icons.d.ts +10 -0
  185. package/select/Icons.js +93 -0
  186. package/select/Listbox.d.ts +4 -0
  187. package/select/Listbox.js +199 -0
  188. package/select/Option.d.ts +4 -0
  189. package/select/Option.js +110 -0
  190. package/select/Select.d.ts +4 -0
  191. package/select/Select.js +158 -380
  192. package/select/Select.stories.tsx +627 -0
  193. package/select/Select.test.js +2175 -0
  194. package/select/types.d.ts +210 -0
  195. package/select/types.js +5 -0
  196. package/sidenav/Sidenav.d.ts +10 -0
  197. package/sidenav/Sidenav.js +186 -63
  198. package/sidenav/Sidenav.stories.tsx +180 -0
  199. package/sidenav/Sidenav.test.js +44 -0
  200. package/sidenav/types.d.ts +73 -0
  201. package/sidenav/types.js +5 -0
  202. package/slider/Slider.d.ts +4 -0
  203. package/slider/Slider.js +63 -85
  204. package/slider/Slider.stories.tsx +177 -0
  205. package/slider/Slider.test.js +150 -0
  206. package/slider/types.d.ts +82 -0
  207. package/slider/types.js +5 -0
  208. package/spinner/Spinner.d.ts +4 -0
  209. package/spinner/Spinner.js +9 -26
  210. package/spinner/Spinner.stories.jsx +103 -0
  211. package/spinner/Spinner.test.js +64 -0
  212. package/spinner/types.d.ts +32 -0
  213. package/spinner/types.js +5 -0
  214. package/switch/Switch.d.ts +1 -1
  215. package/switch/Switch.js +37 -21
  216. package/switch/Switch.stories.tsx +160 -0
  217. package/switch/Switch.test.js +98 -0
  218. package/switch/types.d.ts +6 -2
  219. package/table/Table.d.ts +4 -0
  220. package/table/Table.js +3 -3
  221. package/table/Table.stories.jsx +277 -0
  222. package/table/Table.test.js +26 -0
  223. package/table/types.d.ts +21 -0
  224. package/table/types.js +5 -0
  225. package/tabs/Tabs.d.ts +4 -0
  226. package/tabs/Tabs.js +24 -72
  227. package/tabs/Tabs.stories.tsx +112 -0
  228. package/tabs/Tabs.test.js +140 -0
  229. package/tabs/types.d.ts +82 -0
  230. package/tabs/types.js +5 -0
  231. package/tabs-nav/NavTabs.d.ts +8 -0
  232. package/tabs-nav/NavTabs.js +125 -0
  233. package/tabs-nav/NavTabs.stories.tsx +170 -0
  234. package/tabs-nav/NavTabs.test.js +82 -0
  235. package/tabs-nav/Tab.d.ts +4 -0
  236. package/tabs-nav/Tab.js +132 -0
  237. package/tabs-nav/types.d.ts +53 -0
  238. package/tabs-nav/types.js +5 -0
  239. package/tag/Tag.d.ts +4 -0
  240. package/tag/Tag.js +34 -59
  241. package/tag/Tag.stories.tsx +142 -0
  242. package/tag/Tag.test.js +60 -0
  243. package/tag/types.d.ts +69 -0
  244. package/tag/types.js +5 -0
  245. package/text-input/Suggestion.d.ts +4 -0
  246. package/text-input/Suggestion.js +55 -0
  247. package/text-input/TextInput.d.ts +4 -0
  248. package/text-input/TextInput.js +91 -146
  249. package/text-input/TextInput.stories.tsx +474 -0
  250. package/text-input/TextInput.test.js +1712 -0
  251. package/text-input/types.d.ts +178 -0
  252. package/text-input/types.js +5 -0
  253. package/textarea/Textarea.d.ts +4 -0
  254. package/textarea/Textarea.js +39 -79
  255. package/textarea/Textarea.stories.jsx +157 -0
  256. package/textarea/Textarea.test.js +437 -0
  257. package/textarea/types.d.ts +137 -0
  258. package/textarea/types.js +5 -0
  259. package/toggle-group/ToggleGroup.d.ts +4 -0
  260. package/toggle-group/ToggleGroup.js +18 -46
  261. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  262. package/toggle-group/ToggleGroup.test.js +156 -0
  263. package/toggle-group/types.d.ts +105 -0
  264. package/toggle-group/types.js +5 -0
  265. package/typography/Typography.d.ts +4 -0
  266. package/typography/Typography.js +131 -0
  267. package/typography/Typography.stories.tsx +198 -0
  268. package/typography/types.d.ts +18 -0
  269. package/typography/types.js +5 -0
  270. package/useTheme.d.ts +2 -0
  271. package/useTheme.js +2 -2
  272. package/useTranslatedLabels.d.ts +2 -0
  273. package/useTranslatedLabels.js +20 -0
  274. package/wizard/Wizard.d.ts +4 -0
  275. package/wizard/Wizard.js +118 -104
  276. package/wizard/Wizard.stories.tsx +233 -0
  277. package/wizard/Wizard.test.js +141 -0
  278. package/wizard/types.d.ts +65 -0
  279. package/wizard/types.js +5 -0
  280. package/ThemeContext.js +0 -246
  281. package/V3Select/V3Select.js +0 -455
  282. package/V3Select/index.d.ts +0 -27
  283. package/V3Textarea/V3Textarea.js +0 -260
  284. package/V3Textarea/index.d.ts +0 -27
  285. package/box/index.d.ts +0 -25
  286. package/card/index.d.ts +0 -22
  287. package/chip/index.d.ts +0 -22
  288. package/date/Date.js +0 -373
  289. package/date/index.d.ts +0 -27
  290. package/dialog/index.d.ts +0 -18
  291. package/dropdown/index.d.ts +0 -26
  292. package/file-input/index.d.ts +0 -81
  293. package/footer/index.d.ts +0 -25
  294. package/header/index.d.ts +0 -25
  295. package/heading/index.d.ts +0 -17
  296. package/input-text/Icons.js +0 -22
  297. package/input-text/InputText.js +0 -611
  298. package/input-text/index.d.ts +0 -36
  299. package/link/index.d.ts +0 -23
  300. package/number-input/index.d.ts +0 -113
  301. package/password-input/index.d.ts +0 -94
  302. package/progress-bar/index.d.ts +0 -18
  303. package/radio/Radio.d.ts +0 -4
  304. package/radio/Radio.js +0 -174
  305. package/radio/types.d.ts +0 -54
  306. package/resultsetTable/index.d.ts +0 -19
  307. package/select/index.d.ts +0 -131
  308. package/sidenav/index.d.ts +0 -13
  309. package/slider/index.d.ts +0 -29
  310. package/spinner/index.d.ts +0 -17
  311. package/table/index.d.ts +0 -13
  312. package/tabs/index.d.ts +0 -19
  313. package/tag/index.d.ts +0 -24
  314. package/text-input/index.d.ts +0 -135
  315. package/textarea/index.d.ts +0 -117
  316. package/toggle/Toggle.js +0 -186
  317. package/toggle/index.d.ts +0 -21
  318. package/toggle-group/index.d.ts +0 -21
  319. package/upload/Upload.js +0 -201
  320. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  321. package/upload/buttons-upload/Icons.js +0 -40
  322. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  323. package/upload/dragAndDropArea/Icons.js +0 -39
  324. package/upload/file-upload/FileToUpload.js +0 -115
  325. package/upload/file-upload/Icons.js +0 -66
  326. package/upload/files-upload/FilesToUpload.js +0 -109
  327. package/upload/index.d.ts +0 -15
  328. package/upload/transaction/Icons.js +0 -160
  329. package/upload/transaction/Transaction.js +0 -104
  330. package/upload/transactions/Transactions.js +0 -94
  331. package/wizard/Icons.js +0 -65
  332. package/wizard/index.d.ts +0 -18
@@ -1,18 +1,11 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
- exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.componentTokens = void 0;
9
-
10
- var _Icons = require("../header/Icons");
11
-
12
- var _Icons2 = _interopRequireDefault(require("../footer/Icons"));
13
-
6
+ exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
14
7
  var globalTokens = {
15
- // Color
8
+ // Color
16
9
  inherit: "inherit",
17
10
  transparent: "transparent",
18
11
  hal_white: "#ffffff",
@@ -26,12 +19,15 @@ var globalTokens = {
26
19
  color_grey_800: "#4d4d4d",
27
20
  color_grey_600: "#808080",
28
21
  color_grey_50: "#fafafa",
22
+ color_grey_a_100: "#0000000d",
23
+ color_grey_a_300: "#00000033",
29
24
  hal_purple_l_95: "#f2eafa",
30
25
  hal_purple_l_90: "#e5d5f6",
31
26
  hal_purple_l_65: "#a46ede",
32
27
  hal_purple_s_38: "#5f249f",
33
28
  hal_purple_d_30: "#4b1c7d",
34
29
  hal_purple_d_20: "#321353",
30
+ hal_purple_d_70: "#9A6BB2",
35
31
  color_purple_600: "#7D2FD0",
36
32
  color_purple_300: "#cbacec",
37
33
  hal_blue_l_95: "#e6f4ff",
@@ -99,7 +95,7 @@ var globalTokens = {
99
95
  type_sans: "Open Sans, sans-serif",
100
96
  type_scale_root: "16px",
101
97
  type_scale_08: "3.75rem",
102
- type_scale_07: "3rem",
98
+ type_scale_07: "2.5rem",
103
99
  type_scale_06: "2rem",
104
100
  type_scale_05: "1.5rem",
105
101
  type_scale_04: "1.25rem",
@@ -114,7 +110,7 @@ var globalTokens = {
114
110
  type_normal: "normal",
115
111
  type_spacing_tight_02: "-0.05em",
116
112
  type_spacing_tight_01: "-0.025em",
117
- type_spacing_normal: "0",
113
+ type_spacing_normal: "0em",
118
114
  type_spacing_wide_01: "0.025em",
119
115
  type_spacing_wide_02: "0.05em",
120
116
  type_spacing_wide_03: "0.1em",
@@ -164,7 +160,6 @@ exports.globalTokens = globalTokens;
164
160
  var componentTokens = {
165
161
  accordion: {
166
162
  backgroundColor: globalTokens.hal_white,
167
- disabledBackgroundColor: globalTokens.transparent,
168
163
  hoverBackgroundColor: globalTokens.hal_purple_l_95,
169
164
  arrowColor: globalTokens.hal_purple_s_38,
170
165
  disabledArrowColor: globalTokens.hal_grey_l_60,
@@ -244,7 +239,7 @@ var componentTokens = {
244
239
  successBackgroundColor: globalTokens.hal_green_l_95,
245
240
  warningBackgroundColor: globalTokens.hal_yellow_l_95,
246
241
  errorBackgroundColor: globalTokens.hal_red_l_95,
247
- hoverActionBackgroundColor: "#0000000D",
242
+ hoverActionBackgroundColor: globalTokens.color_grey_a_100,
248
243
  activeActionBackgroundColor: "#0000001A",
249
244
  focusActionBorderColor: globalTokens.hal_blue_l_50,
250
245
  overlayColor: "#000000B3"
@@ -265,12 +260,21 @@ var componentTokens = {
265
260
  oneShadowDepthShadowOffsetY: "3px",
266
261
  oneShadowDepthShadowBlur: "6px",
267
262
  oneShadowDepthShadowSpread: "0px",
268
- oneShadowDepthShadowColor: "#00000033",
263
+ oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
269
264
  twoShadowDepthShadowOffsetX: "0px",
270
265
  twoShadowDepthShadowOffsetY: "3px",
271
266
  twoShadowDepthShadowBlur: "10px",
272
267
  twoShadowDepthShadowSpread: "0px",
273
- twoShadowDepthShadowColor: "#00000033"
268
+ twoShadowDepthShadowColor: globalTokens.color_grey_a_300
269
+ },
270
+ bulletedList: {
271
+ fontColor: globalTokens.hal_black,
272
+ fontColorOnDark: globalTokens.hal_white,
273
+ bulletIconHeight: "1.5rem",
274
+ bulletIconWidth: "1.5rem",
275
+ bulletHeight: "5px",
276
+ bulletWidth: "5px",
277
+ bulletMarginRight: "0.5rem"
274
278
  },
275
279
  button: {
276
280
  labelFontLineHeight: globalTokens.type_leading_normal,
@@ -397,23 +401,6 @@ var componentTokens = {
397
401
  disabledIconColor: globalTokens.hal_grey_l_60,
398
402
  focusColor: globalTokens.hal_blue_l_50
399
403
  },
400
- date: {
401
- pickerSelectedDateBackgroundColor: globalTokens.purple,
402
- pickerSelectedDateColor: globalTokens.hal_white,
403
- pickerBackgroundColor: globalTokens.hal_white,
404
- pickerFontColor: globalTokens.hal_black,
405
- pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
406
- pickerHoverDateFontColor: globalTokens.hal_black,
407
- pickerActualDateColor: globalTokens.lightGrey,
408
- pickerYearColor: globalTokens.hal_black,
409
- pickerMonthColor: globalTokens.hal_black,
410
- pickerWeekLabelColor: globalTokens.hal_black,
411
- pickerBackgroundColorMonthArrows: globalTokens.transparent,
412
- focusColor: globalTokens.hal_blue_l_50,
413
- fontFamily: globalTokens.type_sans,
414
- pickerHeight: "316px",
415
- pickerWidth: "290px"
416
- },
417
404
  dateInput: {
418
405
  pickerFontFamily: globalTokens.type_sans,
419
406
  pickerBackgroundColor: globalTokens.hal_white,
@@ -508,14 +495,13 @@ var componentTokens = {
508
495
  focusDropBorderColor: globalTokens.hal_blue_l_50,
509
496
  disabledDropBorderColor: globalTokens.hal_grey_l_60,
510
497
  dragoverDropBackgroundColor: globalTokens.color_blue_50,
511
- hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
512
498
  activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
513
499
  errorFileItemBorderColor: globalTokens.hal_red_s_41,
514
500
  errorFileItemBackgroundColor: globalTokens.color_red_50,
515
- errorFileItemIconBackgroundColor: globalTokens.color_red_700,
501
+ errorFilePreviewBackgroundColor: globalTokens.color_red_700,
516
502
  errorFileItemIconColor: globalTokens.hal_red_s_41,
517
503
  fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
518
- fileItemIconColor: globalTokens.color_grey_600,
504
+ deleteFileItemColor: globalTokens.hal_black,
519
505
  errorMessageFontColor: globalTokens.hal_red_s_41,
520
506
  labelFontFamily: globalTokens.type_sans,
521
507
  labelFontSize: globalTokens.type_scale_02,
@@ -535,17 +521,19 @@ var componentTokens = {
535
521
  errorMessageFontFamily: globalTokens.type_sans,
536
522
  errorMessageFontSize: globalTokens.type_scale_01,
537
523
  errorMessageFontWeight: globalTokens.type_regular,
538
- errorMessageLineHeight: globalTokens.type_scale_05,
524
+ errorMessageLineHeight: globalTokens.type_leading_normal,
539
525
  dropBorderThickness: globalTokens.border_width_1,
540
526
  dropBorderStyle: globalTokens.border_dashed,
541
527
  dropBorderRadius: globalTokens.border_radius_large,
542
528
  fileItemBorderThickness: globalTokens.border_width_1,
543
529
  fileItemBorderStyle: globalTokens.border_solid,
544
530
  fileItemBorderRadius: globalTokens.border_radius_medium,
545
- hoverDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_95,
546
- activeDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_80,
547
- errorHoverDeleteFileItemBackgroundColor: globalTokens.hal_red_l_95,
548
- errorActiveDeleteFileItemBackgroundColor: globalTokens.hal_red_s_41
531
+ hoverDeleteFileItemBackgroundColor: globalTokens.color_grey_a_100,
532
+ activeDeleteFileItemBackgroundColor: globalTokens.color_grey_a_300,
533
+ focusDeleteFileItemBorderColor: globalTokens.hal_blue_l_50,
534
+ filePreviewBackgroundColor: globalTokens.hal_grey_l_95,
535
+ filePreviewIconColor: globalTokens.color_grey_600,
536
+ errorFilePreviewIconColor: globalTokens.hal_red_s_41
549
537
  },
550
538
  footer: {
551
539
  height: "124px",
@@ -565,7 +553,7 @@ var componentTokens = {
565
553
  copyrightFontStyle: globalTokens.type_normal,
566
554
  copyrightFontWeight: globalTokens.type_regular,
567
555
  copyrightFontColor: globalTokens.hal_white,
568
- logo: _Icons2["default"],
556
+ logo: "",
569
557
  logoHeight: "32px",
570
558
  logoWidth: "auto",
571
559
  socialLinksSize: "24px",
@@ -583,8 +571,8 @@ var componentTokens = {
583
571
  hamburguerTextTransform: globalTokens.type_uppercase,
584
572
  hamburguerIconColor: globalTokens.hal_black,
585
573
  hamburguerHoverColor: globalTokens.mediumGreyBlack,
586
- logo: _Icons.dxcLogo,
587
- logoResponsive: _Icons.dxcLogo,
574
+ logo: "",
575
+ logoResponsive: "",
588
576
  logoHeight: "40px",
589
577
  logoWidth: "auto",
590
578
  menuBackgroundColor: globalTokens.hal_white,
@@ -608,99 +596,40 @@ var componentTokens = {
608
596
  heading: {
609
597
  level1FontColor: globalTokens.inherit,
610
598
  level1FontFamily: globalTokens.type_sans,
611
- level1FontSize: globalTokens.type_scale_08,
599
+ level1FontSize: globalTokens.type_scale_07,
612
600
  level1FontStyle: globalTokens.type_normal,
613
- level1FontWeight: globalTokens.type_regular,
601
+ level1FontWeight: globalTokens.type_semibold,
614
602
  level1LineHeight: globalTokens.type_leading_compact_01,
615
603
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
616
604
  level2FontColor: globalTokens.inherit,
617
605
  level2FontFamily: globalTokens.type_sans,
618
- level2FontSize: globalTokens.type_scale_07,
606
+ level2FontSize: globalTokens.type_scale_05,
619
607
  level2FontStyle: globalTokens.type_normal,
620
- level2FontWeight: globalTokens.type_regular,
608
+ level2FontWeight: globalTokens.type_semibold,
621
609
  level2LineHeight: globalTokens.type_leading_normal,
622
610
  level2LetterSpacing: globalTokens.type_spacing_normal,
623
611
  level3FontColor: globalTokens.inherit,
624
612
  level3FontFamily: globalTokens.type_sans,
625
- level3FontSize: globalTokens.type_scale_06,
613
+ level3FontSize: globalTokens.type_scale_04,
626
614
  level3FontStyle: globalTokens.type_normal,
627
- level3FontWeight: globalTokens.type_regular,
615
+ level3FontWeight: globalTokens.type_semibold,
628
616
  level3LineHeight: globalTokens.type_leading_compact_01,
629
617
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
630
618
  level4FontColor: globalTokens.inherit,
631
619
  level4FontFamily: globalTokens.type_sans,
632
- level4FontSize: globalTokens.type_scale_05,
620
+ level4FontSize: globalTokens.type_scale_03,
633
621
  level4FontStyle: globalTokens.type_normal,
634
- level4FontWeight: globalTokens.type_regular,
622
+ level4FontWeight: globalTokens.type_semibold,
635
623
  level4LineHeight: globalTokens.type_leading_normal,
636
624
  level4LetterSpacing: globalTokens.type_spacing_normal,
637
625
  level5FontColor: globalTokens.inherit,
638
626
  level5FontFamily: globalTokens.type_sans,
639
- level5FontSize: globalTokens.type_scale_04,
627
+ level5FontSize: globalTokens.type_scale_02,
640
628
  level5FontStyle: globalTokens.type_normal,
641
- level5FontWeight: globalTokens.type_regular,
629
+ level5FontWeight: globalTokens.type_semibold,
642
630
  level5LineHeight: globalTokens.type_leading_normal,
643
631
  level5LetterSpacing: globalTokens.type_spacing_wide_01
644
632
  },
645
- inputText: {
646
- fontFamily: globalTokens.type_sans,
647
- assistiveTextFontColor: globalTokens.black,
648
- assistiveTextFontColorOnDark: globalTokens.white,
649
- assistiveTextFontSize: globalTokens.type_scale_01,
650
- assistiveTextFontStyle: globalTokens.type_normal,
651
- assistiveTextFontWeight: globalTokens.type_regular,
652
- disabledColor: globalTokens.lighterBlack,
653
- disabledColorOnDark: "#575757",
654
- errorColor: globalTokens.red,
655
- errorColorOnDark: globalTokens.hal_red_l_60,
656
- optionBackgroundColor: globalTokens.white,
657
- optionBorderColor: globalTokens.black,
658
- optionBorderThickness: "0px",
659
- optionBorderStyle: "solid",
660
- optionFontColor: globalTokens.black,
661
- optionFontColorOnDark: globalTokens.white,
662
- optionFontSize: globalTokens.type_scale_03,
663
- optionFontStyle: globalTokens.type_normal,
664
- optionFontWeight: globalTokens.type_regular,
665
- optionPaddingBottom: "6px",
666
- optionPaddingTop: "6px",
667
- scrollBarThumbColor: globalTokens.darkGrey,
668
- scrollBarTrackColor: globalTokens.lightGrey,
669
- hoverOptionColor: globalTokens.black,
670
- hoverOptionBackgroundColor: globalTokens.lightWhite,
671
- hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
672
- selectedOptionBackgroundColor: globalTokens.lightGrey,
673
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
674
- labelFontColor: globalTokens.black,
675
- labelFontColorOnDark: globalTokens.white,
676
- labelFontSize: globalTokens.type_scale_03,
677
- labelFontStyle: globalTokens.type_normal,
678
- labelFontWeight: globalTokens.type_regular,
679
- valueFontColor: globalTokens.black,
680
- valueFontColorOnDark: globalTokens.white,
681
- valueFontSize: globalTokens.type_scale_03,
682
- valueFontStyle: globalTokens.type_normal,
683
- valueFontWeight: globalTokens.type_regular,
684
- prefixIconColor: globalTokens.black,
685
- prefixIconColorOnDark: globalTokens.white,
686
- prefixLabelFontColor: globalTokens.black,
687
- prefixLabelFontColorOnDark: globalTokens.white,
688
- prefixLabelFontSize: globalTokens.type_scale_03,
689
- prefixLabelFontStyle: globalTokens.type_normal,
690
- prefixLabelFontWeight: globalTokens.type_regular,
691
- suffixIconColor: globalTokens.black,
692
- suffixIconColorOnDark: globalTokens.white,
693
- suffixLabelFontColor: globalTokens.black,
694
- suffixLabelFontColorOnDark: globalTokens.white,
695
- suffixLabelFontSize: globalTokens.type_scale_03,
696
- suffixLabelFontStyle: globalTokens.type_normal,
697
- suffixLabelFontWeight: globalTokens.type_regular,
698
- underlineColor: globalTokens.black,
699
- underlineColorOnDark: globalTokens.white,
700
- underlineFocusColor: globalTokens.black,
701
- underlineFocusColorOnDark: globalTokens.white,
702
- underlineThickness: "1px"
703
- },
704
633
  textInput: {
705
634
  fontFamily: globalTokens.type_sans,
706
635
  enabledBorderColor: globalTokens.hal_black,
@@ -780,7 +709,7 @@ var componentTokens = {
780
709
  activeActionBackgroundColor: globalTokens.hal_grey_l_80,
781
710
  activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
782
711
  listDialogBackgroundColor: globalTokens.hal_white,
783
- listDialogBorderColor: globalTokens.hal_black,
712
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
784
713
  listOptionDividerColor: globalTokens.hal_grey_l_90,
785
714
  listOptionFontColor: globalTokens.hal_black,
786
715
  listOptionFontSize: globalTokens.type_scale_02,
@@ -797,7 +726,7 @@ var componentTokens = {
797
726
  link: {
798
727
  fontColor: globalTokens.hal_blue_s_35,
799
728
  fontFamily: globalTokens.inherit,
800
- fontSize: globalTokens.type_scale_root,
729
+ fontSize: globalTokens.inherit,
801
730
  fontStyle: globalTokens.type_normal,
802
731
  fontWeight: globalTokens.type_regular,
803
732
  iconSize: "16px",
@@ -814,6 +743,13 @@ var componentTokens = {
814
743
  activeUnderlineColor: globalTokens.black,
815
744
  focusColor: globalTokens.hal_blue_l_50
816
745
  },
746
+ paragraph: {
747
+ fontColor: globalTokens.hal_black,
748
+ fontColorOnDark: globalTokens.hal_white,
749
+ display: "block",
750
+ fontSize: globalTokens.type_scale_03,
751
+ fontWeight: globalTokens.type_regular
752
+ },
817
753
  paginator: {
818
754
  backgroundColor: globalTokens.darkWhite,
819
755
  fontColor: globalTokens.hal_black,
@@ -822,15 +758,15 @@ var componentTokens = {
822
758
  fontStyle: globalTokens.type_normal,
823
759
  fontWeight: globalTokens.type_regular,
824
760
  fontTextTransform: "none",
825
- height: "64px",
826
- width: "100%",
827
- marginRight: "40px",
828
- marginLeft: "20px",
761
+ verticalPadding: "0.75rem",
762
+ horizontalPadding: "2rem",
763
+ marginRight: "2rem",
764
+ marginLeft: "2rem",
829
765
  itemsPerPageSelectorMarginLeft: "0px",
830
- itemsPerPageSelectorMarginRight: "30px",
766
+ itemsPerPageSelectorMarginRight: "1rem",
831
767
  pageSelectorMarginRight: "30px",
832
768
  pageSelectorMarginLeft: "0px",
833
- totalItemsContainerMarginRight: "30px",
769
+ totalItemsContainerMarginRight: "3rem",
834
770
  totalItemsContainerMarginLeft: "0px"
835
771
  },
836
772
  progressBar: {
@@ -862,24 +798,62 @@ var componentTokens = {
862
798
  overlayColor: globalTokens.black,
863
799
  overlayOpacity: "0.8"
864
800
  },
865
- radio: {
866
- circleLabelSpacing: "10px",
867
- circleSize: "24px",
868
- color: globalTokens.black,
869
- colorOnDark: globalTokens.white,
870
- disabledColor: globalTokens.lighterBlack,
871
- disabledColorOnDark: "#575757",
872
- disabledFontColor: globalTokens.lighterBlack,
873
- disabledFontColorOnDark: "#575757",
874
- focusColor: globalTokens.hal_blue_l_50,
875
- focusColorOnDark: "#1682FF",
876
- fontColor: globalTokens.inherit,
877
- fontColorOnDark: globalTokens.white,
801
+ quickNav: {
802
+ fontColor: globalTokens.hal_grey_s_40,
803
+ hoverFontColor: globalTokens.hal_purple_d_70,
804
+ selectedFontColor: globalTokens.hal_purple_s_38,
805
+ dividerBorderColor: globalTokens.hal_grey_l_75,
806
+ focusBorderColor: globalTokens.hal_blue_l_50,
807
+ focusBorderStyle: globalTokens.border_solid,
808
+ focusBorderThickness: globalTokens.border_width_2,
809
+ focusBorderRadius: globalTokens.border_width_2,
810
+ paddingTop: globalTokens.spacing_03,
811
+ paddingBottom: globalTokens.spacing_03,
812
+ paddingLeft: globalTokens.spacing_05,
813
+ paddingRight: globalTokens.spacing_05,
878
814
  fontFamily: globalTokens.type_sans,
879
- fontSize: globalTokens.type_scale_root,
815
+ fontSize: globalTokens.type_scale_02,
880
816
  fontStyle: globalTokens.type_normal,
881
817
  fontWeight: globalTokens.type_regular
882
818
  },
819
+ radioGroup: {
820
+ fontFamily: globalTokens.type_sans,
821
+ radioInputColor: globalTokens.hal_blue_l_45,
822
+ hoverRadioInputColor: globalTokens.hal_blue_s_35,
823
+ focusBorderColor: globalTokens.hal_blue_l_50,
824
+ activeRadioInputColor: globalTokens.hal_blue_d_20,
825
+ errorRadioInputColor: globalTokens.hal_red_s_41,
826
+ hoverErrorRadioInputColor: globalTokens.hal_red_d_30,
827
+ activeErrorRadioInputColor: globalTokens.hal_red_d_20,
828
+ readonlyRadioInputColor: globalTokens.hal_grey_l_60,
829
+ hoverReadonlyRadioInputColor: globalTokens.color_grey_600,
830
+ activeReadonlyRadioInputColor: globalTokens.hal_grey_s_40,
831
+ disabledRadioInputColor: globalTokens.hal_grey_l_60,
832
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
833
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
834
+ disabledRadioInputLabelFontColor: globalTokens.hal_grey_l_60,
835
+ errorMessageColor: globalTokens.hal_red_s_41,
836
+ labelFontColor: globalTokens.hal_black,
837
+ labelFontSize: globalTokens.type_scale_02,
838
+ labelFontStyle: globalTokens.type_normal,
839
+ labelFontWeight: globalTokens.type_semibold,
840
+ labelLineHeight: globalTokens.type_leading_loose_01,
841
+ optionalLabelFontWeight: globalTokens.type_regular,
842
+ helperTextFontColor: globalTokens.hal_black,
843
+ helperTextFontSize: globalTokens.type_scale_01,
844
+ helperTextFontStyle: globalTokens.type_normal,
845
+ helperTextFontWeight: globalTokens.type_regular,
846
+ helperTextLineHeight: globalTokens.type_leading_normal,
847
+ radioInputLabelFontColor: globalTokens.hal_black,
848
+ radioInputLabelFontSize: globalTokens.type_scale_02,
849
+ radioInputLabelFontStyle: globalTokens.type_normal,
850
+ radioInputLabelFontWeight: globalTokens.type_regular,
851
+ radioInputLabelLineHeight: globalTokens.type_leading_loose_01,
852
+ groupLabelMargin: globalTokens.spacing_03,
853
+ radioInputLabelMargin: globalTokens.spacing_03,
854
+ groupVerticalGutter: globalTokens.spacing_02,
855
+ groupHorizontalGutter: globalTokens.spacing_07
856
+ },
883
857
  select: {
884
858
  fontFamily: globalTokens.type_sans,
885
859
  disabledColor: globalTokens.hal_grey_l_60,
@@ -947,88 +921,40 @@ var componentTokens = {
947
921
  activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
948
922
  activeSelectionIndicatorActionIconColor: globalTokens.hal_black
949
923
  },
950
- V3Select: {
951
- fontFamily: globalTokens.type_sans,
952
- assistiveTextFontColor: globalTokens.hal_black,
953
- assistiveTextFontColorOnDark: globalTokens.hal_white,
954
- assistiveTextFontSize: globalTokens.type_scale_01,
955
- assistiveTextFontStyle: globalTokens.type_normal,
956
- assistiveTextFontWeight: globalTokens.type_regular,
957
- labelFontColor: globalTokens.hal_black,
958
- labelFontColorOnDark: globalTokens.hal_white,
959
- labelFontSize: globalTokens.type_scale_03,
960
- labelFontStyle: globalTokens.type_normal,
961
- labelFontWeight: globalTokens.type_regular,
962
- disabledColor: globalTokens.lighterBlack,
963
- disabledColorOnDark: "#575757",
964
- errorColor: globalTokens.red,
965
- errorColorOnDark: globalTokens.hal_red_l_60,
966
- optionBackgroundColor: globalTokens.hal_white,
967
- optionBorderColor: globalTokens.hal_black,
968
- optionBorderThickness: "0px",
969
- optionBorderStyle: "solid",
970
- optionFontColor: globalTokens.hal_black,
971
- optionFontColorOnDark: globalTokens.hal_white,
972
- optionFontSize: globalTokens.type_scale_root,
973
- optionFontStyle: globalTokens.type_normal,
974
- optionFontWeight: globalTokens.type_regular,
975
- optionPaddingBottom: "6px",
976
- optionPaddingTop: "6px",
977
- scrollBarThumbColor: globalTokens.hal_grey_s_40,
978
- scrollBarTrackColor: globalTokens.lightGrey,
979
- optionIconColor: globalTokens.hal_black,
980
- optionIconColorOnDark: globalTokens.hal_white,
981
- optionIconSpacing: "12px",
982
- optionIconSize: "20px",
983
- optionCheckboxSpacing: "12px",
984
- hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
985
- hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
986
- activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
987
- activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
988
- selectedOptionBackgroundColor: globalTokens.lightGrey,
989
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
990
- underlineColor: globalTokens.hal_black,
991
- underlineColorOnDark: globalTokens.hal_white,
992
- underlineFocusColor: globalTokens.hal_black,
993
- underlineFocusColorOnDark: globalTokens.hal_white,
994
- underlineThickness: "1px",
995
- valueFontColor: globalTokens.hal_black,
996
- valueFontColorOnDark: globalTokens.hal_white,
997
- valueFontSize: globalTokens.type_scale_03,
998
- valueFontStyle: globalTokens.type_normal,
999
- valueFontWeight: globalTokens.type_regular,
1000
- valueIconColor: globalTokens.hal_black,
1001
- valueIconColorOnDark: globalTokens.hal_white,
1002
- valueIconSize: "20px",
1003
- valueIconSpacing: "12px",
1004
- arrowColor: globalTokens.hal_black,
1005
- arrowColorOnDark: globalTokens.hal_white,
1006
- focusColor: globalTokens.hal_blue_l_50,
1007
- focusColorOnDark: globalTokens.hal_blue_l_50
1008
- },
1009
924
  sidenav: {
1010
925
  backgroundColor: globalTokens.hal_grey_l_95,
1011
926
  arrowContainerColor: globalTokens.hal_grey_l_90,
1012
927
  arrowColor: globalTokens.hal_black,
1013
928
  titleFontFamily: globalTokens.type_sans,
1014
- titleFontSize: globalTokens.type_scale_05,
929
+ titleFontSize: globalTokens.type_scale_04,
1015
930
  titleFontStyle: globalTokens.type_normal,
1016
- titleFontWeight: globalTokens.type_regular,
1017
- titleFontColor: globalTokens.hal_black,
931
+ titleFontWeight: globalTokens.type_semibold,
932
+ titleFontColor: globalTokens.color_grey_800,
1018
933
  titleFontTextTransform: "none",
1019
934
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
1020
- subtitleFontFamily: globalTokens.type_sans,
1021
- subtitleFontSize: globalTokens.type_scale_03,
1022
- subtitleFontStyle: globalTokens.type_normal,
1023
- subtitleFontWeight: globalTokens.type_regular,
1024
- subtitleFontColor: globalTokens.color_grey_800,
1025
- subtitleFontTextTransform: globalTokens.type_uppercase,
1026
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
935
+ groupTitleFontFamily: globalTokens.type_sans,
936
+ groupTitleFontSize: globalTokens.type_scale_02,
937
+ groupTitleFontStyle: globalTokens.type_normal,
938
+ groupTitleFontWeight: globalTokens.type_semibold,
939
+ groupTitleFontColor: globalTokens.black,
940
+ groupTitleHoverBackgroundColor: globalTokens.hal_grey_l_90,
941
+ groupTitleActiveBackgroundColor: globalTokens.hal_grey_l_80,
942
+ groupTitleSelectedFontColor: globalTokens.white,
943
+ groupTitleSelectedBackgroundColor: globalTokens.color_grey_800,
944
+ groupTitleSelectedHoverFontColor: globalTokens.white,
945
+ groupTitleSelectedHoverBackgroundColor: globalTokens.color_grey_600,
946
+ groupTitleFontTextTransform: globalTokens.type_uppercase,
947
+ groupTitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
1027
948
  linkFontFamily: globalTokens.type_sans,
1028
949
  linkFontSize: globalTokens.type_scale_02,
1029
950
  linkFontStyle: globalTokens.type_normal,
1030
951
  linkFontWeight: globalTokens.type_regular,
1031
952
  linkFontColor: globalTokens.color_grey_800,
953
+ linkHoverBackgroundColor: globalTokens.hal_grey_l_90,
954
+ linkSelectedFontColor: globalTokens.white,
955
+ linkSelectedBackgroundColor: globalTokens.color_grey_800,
956
+ linkSelectedHoverFontColor: globalTokens.white,
957
+ linkSelectedHoverBackgroundColor: globalTokens.color_grey_600,
1032
958
  linkFontTextTransform: "none",
1033
959
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
1034
960
  linkTextDecoration: globalTokens.type_no_line,
@@ -1042,9 +968,13 @@ var componentTokens = {
1042
968
  },
1043
969
  slider: {
1044
970
  fontFamily: globalTokens.type_sans,
1045
- fontSize: globalTokens.type_scale_03,
1046
- fontStyle: globalTokens.type_normal,
1047
- fontWeight: globalTokens.type_regular,
971
+ limitValuesFontColor: globalTokens.hal_black,
972
+ limitValuesFontColorOnDark: globalTokens.hal_white,
973
+ limitValuesFontSize: globalTokens.type_scale_03,
974
+ limitValuesFontStyle: globalTokens.type_normal,
975
+ limitValuesFontWeight: globalTokens.type_regular,
976
+ limitValuesFontLetterSpacing: globalTokens.type_spacing_normal,
977
+ disabledLimitValuesFontColor: globalTokens.hal_grey_l_60,
1048
978
  labelFontFamily: globalTokens.type_sans,
1049
979
  labelFontSize: globalTokens.type_scale_02,
1050
980
  labelFontStyle: globalTokens.type_normal,
@@ -1058,9 +988,13 @@ var componentTokens = {
1058
988
  fontColor: globalTokens.hal_black,
1059
989
  fontColorOnDark: globalTokens.hal_white,
1060
990
  labelFontColor: globalTokens.hal_black,
991
+ labelFontColorOnDark: globalTokens.hal_white,
1061
992
  helperTextFontColor: globalTokens.hal_black,
1062
- disabledFontColor: globalTokens.hal_grey_l_60,
1063
- fontLetterSpacing: globalTokens.type_spacing_normal,
993
+ helperTextFontColorOnDark: globalTokens.hal_white,
994
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
995
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
996
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
997
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1064
998
  thumbHeight: "12px",
1065
999
  thumbWidth: "12px",
1066
1000
  hoverThumbHeight: "14px",
@@ -1108,7 +1042,7 @@ var componentTokens = {
1108
1042
  },
1109
1043
  spinner: {
1110
1044
  trackCircleColor: "#5f249f",
1111
- trackCircleColorOnDark: "#a46ede",
1045
+ trackCircleColorOverlay: "#a46ede",
1112
1046
  totalCircleColor: globalTokens.white,
1113
1047
  labelFontFamily: globalTokens.type_sans,
1114
1048
  labelFontSize: globalTokens.type_scale_02,
@@ -1142,30 +1076,30 @@ var componentTokens = {
1142
1076
  "switch": {
1143
1077
  checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1144
1078
  checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
1145
- checkedThumbBackgroundColor: globalTokens.white,
1146
- checkedThumbBackgroundColorOnDark: globalTokens.white,
1147
- uncheckedTrackBackgroundColor: globalTokens.lightGrey,
1148
- uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
1149
- uncheckedThumbBackgroundColor: globalTokens.white,
1150
- uncheckedThumbBackgroundColorOnDark: globalTokens.white,
1151
- disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
1079
+ checkedThumbBackgroundColor: globalTokens.hal_white,
1080
+ checkedThumbBackgroundColorOnDark: globalTokens.hal_white,
1081
+ uncheckedTrackBackgroundColor: globalTokens.hal_grey_l_75,
1082
+ uncheckedTrackBackgroundColorOnDark: globalTokens.hal_grey_l_75,
1083
+ uncheckedThumbBackgroundColor: globalTokens.hal_white,
1084
+ uncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1085
+ disabledCheckedTrackBackgroundColor: globalTokens.hal_purple_l_95,
1152
1086
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
1153
- disabledCheckedThumbBackgroundColor: globalTokens.white,
1154
- disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
1155
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
1087
+ disabledCheckedThumbBackgroundColor: globalTokens.hal_white,
1088
+ disabledCheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1089
+ disabledUncheckedTrackBackgroundColor: globalTokens.hal_grey_l_95,
1156
1090
  disabledUncheckedTrackBackgroundColorOnDark: "#363636",
1157
- disabledUncheckedThumbBackgroundColor: globalTokens.white,
1158
- disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
1159
- disabledLabelFontColor: globalTokens.lighterBlack,
1091
+ disabledUncheckedThumbBackgroundColor: globalTokens.hal_white,
1092
+ disabledUncheckedThumbBackgroundColorOnDark: globalTokens.hal_white,
1093
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1160
1094
  disabledLabelFontColorOnDark: "#575757",
1161
1095
  disabledLabelFontStyle: globalTokens.type_normal,
1162
1096
  labelFontFamily: globalTokens.type_sans,
1163
1097
  labelFontSize: globalTokens.type_scale_root,
1164
1098
  labelFontStyle: globalTokens.type_normal,
1165
1099
  labelFontWeight: globalTokens.type_regular,
1166
- labelFontColor: globalTokens.black,
1167
- labelFontColorOnDark: globalTokens.white,
1168
- thumbFocusColor: globalTokens.blue,
1100
+ labelFontColor: globalTokens.hal_black,
1101
+ labelFontColorOnDark: globalTokens.hal_white,
1102
+ thumbFocusColor: globalTokens.hal_blue_l_50,
1169
1103
  thumbFocusColorOnDark: "#1682FF",
1170
1104
  thumbHeight: "24px",
1171
1105
  thumbWidth: "24px",
@@ -1243,6 +1177,7 @@ var componentTokens = {
1243
1177
  disabledFontColor: "#999999",
1244
1178
  disabledIconColor: "#999999",
1245
1179
  disabledFontStyle: globalTokens.type_normal,
1180
+ disabledBadgeBackgroundColor: "#0000004D",
1246
1181
  hoverBackgroundColor: "#f2eafa",
1247
1182
  pressedBackgroundColor: "#e5d5f6",
1248
1183
  pressedFontWeight: globalTokens.type_semibold,
@@ -1313,41 +1248,6 @@ var componentTokens = {
1313
1248
  disabledValueFontColor: globalTokens.hal_grey_l_60,
1314
1249
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1315
1250
  },
1316
- V3Textarea: {
1317
- fontFamily: globalTokens.type_sans,
1318
- assistiveTextFontSize: globalTokens.type_scale_01,
1319
- assistiveTextFontStyle: globalTokens.type_normal,
1320
- assistiveTextFontWeight: globalTokens.type_regular,
1321
- assistiveTextFontColor: globalTokens.black,
1322
- assistiveTextFontColorOnDark: globalTokens.white,
1323
- assistiveTextLetterSpacing: "0.03333em",
1324
- disabledColor: globalTokens.lighterBlack,
1325
- disabledColorOnDark: "#575757",
1326
- errorColor: globalTokens.red,
1327
- errorColorOnDark: globalTokens.hal_red_l_60,
1328
- scrollBarThumbColor: globalTokens.darkGrey,
1329
- scrollBarThumbColorOnDark: globalTokens.white,
1330
- scrollBarTrackColor: globalTokens.lightGrey,
1331
- scrollBarTrackColorOnDark: "#999999",
1332
- labelFontSize: globalTokens.type_scale_03,
1333
- labelFontStyle: globalTokens.type_normal,
1334
- labelFontWeight: globalTokens.type_regular,
1335
- labelFontColor: globalTokens.black,
1336
- labelFontColorOnDark: globalTokens.white,
1337
- labelLetterSpacing: "0.00938em",
1338
- valueFontSize: globalTokens.type_scale_03,
1339
- valueFontStyle: globalTokens.type_normal,
1340
- valueFontWeight: globalTokens.type_regular,
1341
- valueFontColor: globalTokens.black,
1342
- valueFontColorOnDark: globalTokens.white,
1343
- valueLetterSpacing: globalTokens.type_spacing_normal,
1344
- valueLineHeight: "1.1875em",
1345
- underlineColor: globalTokens.black,
1346
- underlineColorOnDark: globalTokens.white,
1347
- underlineFocusColor: globalTokens.black,
1348
- underlineFocusColorOnDark: globalTokens.white,
1349
- underlineThickness: "1px"
1350
- },
1351
1251
  toggleGroup: {
1352
1252
  containerBackgroundColor: globalTokens.color_grey_50,
1353
1253
  containerBorderColor: globalTokens.hal_grey_l_60,
@@ -1396,121 +1296,65 @@ var componentTokens = {
1396
1296
  containerBorderRadius: globalTokens.border_radius_large,
1397
1297
  optionFocusBorderThickness: globalTokens.border_width_2
1398
1298
  },
1399
- upload: {
1400
- fontFamily: globalTokens.type_sans,
1401
- shadowColor: globalTokens.lightWhite,
1402
- scrollBarThumbColor: globalTokens.darkGrey,
1403
- scrollBarTrackColor: globalTokens.lightGrey,
1404
- errorColor: globalTokens.red,
1405
- backgroundColor: globalTokens.white,
1406
- draggingStateBackgroundColor: globalTokens.lightWhite,
1407
- dragAndDropIconColor: globalTokens.black,
1408
- dragAndDropIconSize: "43.5px",
1409
- dragAndDropTitleFontSize: globalTokens.type_scale_04,
1410
- dragAndDropTitleFontStyle: globalTokens.type_normal,
1411
- dragAndDropTitleFontWeight: globalTokens.type_bold,
1412
- dragAndDropTitleFontTextTransform: "none",
1413
- dragAndDropTitleFontColor: globalTokens.black,
1414
- dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1415
- dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1416
- dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1417
- dragAndDropDescriptionFontTextTransform: "none",
1418
- dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1419
- dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1420
- dragAndDropDraggingStateIconSize: "74.5px",
1421
- dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1422
- dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1423
- dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1424
- dragAndDropDraggingStateFontTextTransform: "none",
1425
- dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1426
- dragAndDropAreaIconColor: globalTokens.darkGrey,
1427
- dragAndDropAreaIconSize: "24px",
1428
- dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1429
- dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1430
- dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1431
- dragAndDropAreaTextFontTextTransform: "none",
1432
- dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1433
- fileDeleteIconColor: globalTokens.black,
1434
- fileDeleteIconSize: "30px",
1435
- fileUnderlineColor: globalTokens.lightGrey,
1436
- fileUnderlineThickness: "1px",
1437
- fileNameFontSize: globalTokens.type_scale_03,
1438
- fileNameFontStyle: globalTokens.type_normal,
1439
- fileNameFontWeight: globalTokens.type_regular,
1440
- fileNameFontTextTransform: "none",
1441
- fileNameFontColor: globalTokens.black,
1442
- fileTypeFontSize: globalTokens.type_scale_01,
1443
- fileTypeFontStyle: globalTokens.type_normal,
1444
- fileTypeFontWeight: globalTokens.type_regular,
1445
- fileTypeFontTextTransform: globalTokens.type_uppercase,
1446
- fileTypeFontColor: globalTokens.darkGrey,
1447
- hoverFileColor: globalTokens.darkWhite,
1448
- uploadedFileIconColor: globalTokens.lightGrey,
1449
- uploadedFileIconSize: "24px",
1450
- uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1451
- uploadedFilesTitleFontStyle: globalTokens.type_normal,
1452
- uploadedFilesTitleFontWeight: globalTokens.type_regular,
1453
- uploadedFilesTitleFontTextTransform: "none",
1454
- uploadedFilesTitleFontColor: globalTokens.black,
1455
- uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1456
- uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1457
- uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1458
- uploadedFilesSubtitleFontTextTransform: "none",
1459
- uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1460
- uploadedFilesNumberFontWeight: globalTokens.type_bold
1461
- },
1462
1299
  wizard: {
1463
- disabledBackgroundColor: globalTokens.lightGrey,
1464
- disabledFontColor: globalTokens.darkGrey,
1465
- stepContainerFontSize: globalTokens.type_scale_03,
1466
- stepContainerFontFamily: globalTokens.type_sans,
1467
- stepContainerFontStyle: globalTokens.type_normal,
1468
- stepContainerFontWeight: globalTokens.type_regular,
1469
- stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1470
- stepContainerFontColor: globalTokens.black,
1471
- stepContainerSelectedFontColor: globalTokens.white,
1472
- stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1473
- stepContainerBackgroundColor: globalTokens.white,
1474
- stepContainerIconSize: "19px",
1300
+ visitedStepFontColor: globalTokens.hal_black,
1301
+ visitedStepBackgroundColor: globalTokens.hal_white,
1302
+ visitedStepBorderColor: globalTokens.hal_black,
1303
+ unvisitedStepFontColor: globalTokens.hal_grey_s_40,
1304
+ unvisitedLabelFontColor: globalTokens.hal_grey_s_40,
1305
+ unvisitedHelperTextFontColor: globalTokens.hal_grey_s_40,
1306
+ unvisitedStepBackgroundColor: globalTokens.transparent,
1307
+ unvisitedStepBorderColor: globalTokens.hal_grey_s_40,
1308
+ selectedStepFontColor: globalTokens.white,
1309
+ selectedStepBackgroundColor: globalTokens.hal_purple_s_38,
1310
+ selectedStepBorderColor: globalTokens.hal_purple_s_38,
1311
+ selectedLabelFontColor: globalTokens.hal_black,
1312
+ selectedHelperTextFontColor: globalTokens.hal_black,
1313
+ selectedStepWidth: "32px",
1314
+ selectedStepHeight: "32px",
1315
+ selectedStepBorderThickness: "2px",
1316
+ selectedStepBorderStyle: "solid",
1317
+ selectedStepBorderRadius: "45px",
1318
+ stepFontSize: globalTokens.type_scale_03,
1319
+ stepFontFamily: globalTokens.type_sans,
1320
+ stepFontStyle: globalTokens.type_normal,
1321
+ stepFontWeight: globalTokens.type_regular,
1322
+ stepFontTracking: globalTokens.type_spacing_wide_02,
1323
+ stepIconSize: "20px",
1324
+ stepWidth: "32px",
1325
+ stepHeight: "32px",
1326
+ stepBorderThickness: "2px",
1327
+ stepBorderStyle: "solid",
1328
+ stepBorderRadius: "45px",
1329
+ visitedLabelFontColor: globalTokens.hal_black,
1475
1330
  labelFontSize: globalTokens.type_scale_03,
1476
1331
  labelFontFamily: globalTokens.type_sans,
1477
1332
  labelFontStyle: globalTokens.type_normal,
1478
1333
  labelFontWeight: globalTokens.type_regular,
1479
- labelLetterSpacing: globalTokens.type_spacing_normal,
1334
+ labelFontTracking: globalTokens.type_spacing_normal,
1480
1335
  labelFontTextTransform: "none",
1481
1336
  labelTextAlign: "left",
1482
- labelFontColor: globalTokens.darkGrey,
1483
- visitedLabelFontColor: globalTokens.black,
1484
- visitedDescriptionFontColor: globalTokens.black,
1485
- descriptionFontSize: globalTokens.type_scale_01,
1486
- descriptionFontFamily: globalTokens.type_sans,
1487
- descriptionFontStyle: globalTokens.type_normal,
1488
- descriptionFontWeight: globalTokens.type_regular,
1489
- descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1490
- descriptionFontTextTransform: "none",
1491
- descriptionFontColor: globalTokens.darkGrey,
1492
- descriptionTextAlign: "left",
1493
- circleWidth: "32px",
1494
- circleHeight: "32px",
1495
- circleBorderThickness: "2px",
1496
- circleBorderStyle: "solid",
1497
- circleBorderRadius: "45px",
1498
- circleBorderColor: globalTokens.black,
1499
- selectedCircleWidth: "32px",
1500
- selectedCircleHeight: "32px",
1501
- selectedCircleBorderThickness: "2px",
1502
- selectedCircleBorderStyle: "solid",
1503
- selectedCircleBorderRadius: "45px",
1504
- selectedCircleBorderColor: globalTokens.purple,
1505
- disabledCircleWidth: "32px",
1506
- disabledCircleHeight: "32px",
1507
- disabledCircleBorderThickness: "2px",
1508
- disabledCircleBorderStyle: "solid",
1509
- disabledCircleBorderRadius: "45px",
1510
- disabledCircleBorderColor: globalTokens.lightGrey,
1337
+ helperTextFontSize: globalTokens.type_scale_02,
1338
+ helperTextFontFamily: globalTokens.type_sans,
1339
+ helperTextFontStyle: globalTokens.type_normal,
1340
+ helperTextFontWeight: globalTokens.type_regular,
1341
+ helperTextFontTracking: globalTokens.type_spacing_normal,
1342
+ helperTextFontTextTransform: "none",
1343
+ visitedHelperTextFontColor: globalTokens.hal_black,
1344
+ helperTextTextAlign: "left",
1345
+ disabledStepBackgroundColor: globalTokens.hal_grey_l_95,
1346
+ disabledStepFontColor: globalTokens.hal_grey_l_60,
1347
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1348
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1349
+ disabledStepBorderColor: globalTokens.hal_grey_l_95,
1350
+ disabledStepWidth: "32px",
1351
+ disabledStepHeight: "32px",
1352
+ disabledStepBorderThickness: "2px",
1353
+ disabledStepBorderStyle: "solid",
1354
+ disabledStepBorderRadius: "45px",
1511
1355
  separatorBorderThickness: "1px",
1512
1356
  separatorBorderStyle: "solid",
1513
- separatorColor: globalTokens.lightGrey,
1357
+ separatorColor: globalTokens.hal_grey_s_40,
1514
1358
  focusColor: globalTokens.hal_blue_l_50
1515
1359
  }
1516
1360
  };
@@ -1526,12 +1370,11 @@ var spaces = {
1526
1370
  };
1527
1371
  exports.spaces = spaces;
1528
1372
  var responsiveSizes = {
1529
- mobileSmall: "320",
1530
- mobileMedium: "375",
1531
- mobileLarge: "425",
1532
- tablet: "768",
1533
- laptop: "1024",
1534
- desktop: "1440"
1373
+ xsmall: "20",
1374
+ small: "30",
1375
+ medium: "45",
1376
+ large: "66",
1377
+ xlarge: "90"
1535
1378
  };
1536
1379
  exports.responsiveSizes = responsiveSizes;
1537
1380
  var typeface = {
@@ -1566,4 +1409,89 @@ var typeface = {
1566
1409
  textTransform: "uppercase"
1567
1410
  }
1568
1411
  };
1569
- exports.typeface = typeface;
1412
+ exports.typeface = typeface;
1413
+ var defaultTranslatedComponentLabels = {
1414
+ formFields: {
1415
+ optionalLabel: "(Optional)",
1416
+ requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
1417
+ requiredValueErrorMessage: "This field is required. Please, enter a value.",
1418
+ formatRequestedErrorMessage: "Please match the format requested.",
1419
+ lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
1420
+ return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
1421
+ },
1422
+ logoAlternativeText: "Logo"
1423
+ },
1424
+ alert: {
1425
+ infoTitleText: "information",
1426
+ successTitleText: "success",
1427
+ warningTitleText: "warning",
1428
+ errorTitleText: "error"
1429
+ },
1430
+ dateInput: {
1431
+ invalidDateErrorMessage: "Invalid date."
1432
+ },
1433
+ fileInput: {
1434
+ fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1435
+ fileSizeLessThanErrorMessage: "File size must be less than max size.",
1436
+ multipleButtonLabelDefault: "Select files",
1437
+ singleButtonLabelDefault: "Select file",
1438
+ dropAreaButtonLabelDefault: "Select",
1439
+ multipleDropAreaLabelDefault: "or drop files",
1440
+ singleDropAreaLabelDefault: "or drop a file"
1441
+ },
1442
+ footer: {
1443
+ copyrightText: function copyrightText(year) {
1444
+ return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
1445
+ }
1446
+ },
1447
+ numberInput: {
1448
+ valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
1449
+ return "Value must be greater than or equal to ".concat(value, ".");
1450
+ },
1451
+ valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
1452
+ return "Value must be less than or equal to ".concat(value, ".");
1453
+ },
1454
+ decrementValueTitle: "Decrement value",
1455
+ incrementValueTitle: "Increment value"
1456
+ },
1457
+ paginator: {
1458
+ itemsPerPageText: "Items per page ",
1459
+ minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
1460
+ return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
1461
+ },
1462
+ goToPageText: "Go to page:",
1463
+ pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
1464
+ return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
1465
+ }
1466
+ },
1467
+ passwordInput: {
1468
+ inputShowPasswordTitle: "Show password",
1469
+ inputHidePasswordTitle: "Hide password"
1470
+ },
1471
+ quickNav: {
1472
+ contentTitle: "Contents"
1473
+ },
1474
+ radioGroup: {
1475
+ optionalItemLabelDefault: "N/A"
1476
+ },
1477
+ select: {
1478
+ noMatchesErrorMessage: "No matches found",
1479
+ actionClearSelectionTitle: "Clear selection",
1480
+ actionClearSearchTitle: "Clear search"
1481
+ },
1482
+ textInput: {
1483
+ clearFieldActionTitle: "Clear field",
1484
+ searchingMessage: "Searching...",
1485
+ fetchingDataErrorMessage: "Error fetching data"
1486
+ },
1487
+ calendar: {
1488
+ days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1489
+ daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
1490
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1491
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
1492
+ },
1493
+ applicationLayout: {
1494
+ visibilityToggleTitle: "Toggle visibility sidenav"
1495
+ }
1496
+ };
1497
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;