@dxc-technology/halstack-react 0.0.0-d30020b → 0.0.0-d3ac293

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 (290) hide show
  1. package/BackgroundColorContext.d.ts +2 -2
  2. package/BackgroundColorContext.js +1 -1
  3. package/HalstackContext.d.ts +1336 -0
  4. package/HalstackContext.js +335 -0
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +118 -126
  7. package/accordion/Accordion.stories.tsx +115 -27
  8. package/accordion/Accordion.test.js +71 -0
  9. package/accordion/types.d.ts +9 -4
  10. package/accordion-group/AccordionGroup.d.ts +1 -1
  11. package/accordion-group/AccordionGroup.js +17 -38
  12. package/accordion-group/AccordionGroup.stories.tsx +28 -2
  13. package/accordion-group/AccordionGroup.test.js +126 -0
  14. package/accordion-group/types.d.ts +14 -3
  15. package/alert/Alert.js +7 -4
  16. package/alert/Alert.stories.tsx +28 -0
  17. package/alert/Alert.test.js +92 -0
  18. package/badge/Badge.d.ts +4 -0
  19. package/badge/Badge.js +5 -3
  20. package/badge/types.d.ts +5 -0
  21. package/bleed/Bleed.js +1 -34
  22. package/bleed/Bleed.stories.tsx +94 -95
  23. package/bleed/types.d.ts +25 -1
  24. package/box/Box.js +25 -37
  25. package/box/Box.stories.tsx +15 -0
  26. package/box/Box.test.js +18 -0
  27. package/box/types.d.ts +1 -0
  28. package/bulleted-list/BulletedList.d.ts +7 -0
  29. package/bulleted-list/BulletedList.js +123 -0
  30. package/bulleted-list/BulletedList.stories.tsx +200 -0
  31. package/bulleted-list/types.d.ts +11 -0
  32. package/button/Button.js +52 -69
  33. package/button/Button.stories.tsx +159 -8
  34. package/button/Button.test.js +35 -0
  35. package/button/types.d.ts +7 -7
  36. package/card/Card.js +25 -28
  37. package/card/Card.test.js +50 -0
  38. package/card/types.d.ts +1 -0
  39. package/checkbox/Checkbox.d.ts +2 -2
  40. package/checkbox/Checkbox.js +107 -110
  41. package/checkbox/Checkbox.stories.tsx +198 -130
  42. package/checkbox/Checkbox.test.js +155 -0
  43. package/checkbox/types.d.ts +13 -5
  44. package/chip/Chip.js +18 -24
  45. package/chip/Chip.stories.tsx +96 -9
  46. package/chip/Chip.test.js +54 -0
  47. package/chip/types.d.ts +1 -1
  48. package/common/utils.d.ts +1 -0
  49. package/common/utils.js +4 -4
  50. package/common/variables.d.ts +1625 -0
  51. package/common/variables.js +476 -583
  52. package/date-input/Calendar.d.ts +4 -0
  53. package/date-input/Calendar.js +258 -0
  54. package/date-input/DateInput.js +169 -258
  55. package/date-input/DateInput.stories.tsx +199 -33
  56. package/date-input/DateInput.test.js +835 -0
  57. package/date-input/DatePicker.d.ts +4 -0
  58. package/date-input/DatePicker.js +146 -0
  59. package/date-input/Icons.d.ts +6 -0
  60. package/date-input/Icons.js +75 -0
  61. package/date-input/YearPicker.d.ts +4 -0
  62. package/date-input/YearPicker.js +126 -0
  63. package/date-input/types.d.ts +67 -9
  64. package/dialog/Dialog.js +76 -93
  65. package/dialog/Dialog.stories.tsx +230 -123
  66. package/dialog/Dialog.test.js +369 -0
  67. package/dialog/types.d.ts +3 -2
  68. package/dropdown/Dropdown.d.ts +1 -1
  69. package/dropdown/Dropdown.js +246 -253
  70. package/dropdown/Dropdown.stories.tsx +245 -56
  71. package/dropdown/Dropdown.test.js +586 -0
  72. package/dropdown/DropdownMenu.d.ts +4 -0
  73. package/dropdown/DropdownMenu.js +70 -0
  74. package/dropdown/DropdownMenuItem.d.ts +4 -0
  75. package/dropdown/DropdownMenuItem.js +81 -0
  76. package/dropdown/types.d.ts +25 -5
  77. package/file-input/FileInput.d.ts +2 -2
  78. package/file-input/FileInput.js +181 -223
  79. package/file-input/FileInput.stories.tsx +122 -11
  80. package/file-input/FileInput.test.js +457 -0
  81. package/file-input/FileItem.d.ts +4 -14
  82. package/file-input/FileItem.js +44 -66
  83. package/file-input/types.d.ts +17 -0
  84. package/flex/Flex.d.ts +4 -0
  85. package/flex/Flex.js +69 -0
  86. package/flex/Flex.stories.tsx +103 -0
  87. package/flex/types.d.ts +32 -0
  88. package/footer/Footer.js +16 -89
  89. package/footer/Footer.stories.tsx +99 -1
  90. package/footer/Footer.test.js +97 -0
  91. package/footer/Icons.js +1 -1
  92. package/footer/types.d.ts +2 -1
  93. package/header/Header.js +108 -129
  94. package/header/Header.stories.tsx +189 -36
  95. package/header/Header.test.js +79 -0
  96. package/header/Icons.js +2 -2
  97. package/header/types.d.ts +3 -2
  98. package/heading/Heading.js +1 -1
  99. package/heading/Heading.test.js +186 -0
  100. package/inset/Inset.js +1 -34
  101. package/inset/Inset.stories.tsx +36 -36
  102. package/inset/types.d.ts +25 -1
  103. package/layout/ApplicationLayout.d.ts +16 -6
  104. package/layout/ApplicationLayout.js +72 -132
  105. package/layout/ApplicationLayout.stories.tsx +84 -93
  106. package/layout/Icons.d.ts +5 -0
  107. package/layout/Icons.js +13 -2
  108. package/layout/SidenavContext.d.ts +5 -0
  109. package/layout/SidenavContext.js +19 -0
  110. package/layout/types.d.ts +18 -33
  111. package/link/Link.d.ts +3 -2
  112. package/link/Link.js +59 -76
  113. package/link/Link.stories.tsx +155 -53
  114. package/link/Link.test.js +81 -0
  115. package/link/types.d.ts +7 -23
  116. package/main.d.ts +10 -15
  117. package/main.js +48 -82
  118. package/nav-tabs/NavTabs.d.ts +8 -0
  119. package/nav-tabs/NavTabs.js +125 -0
  120. package/nav-tabs/NavTabs.stories.tsx +260 -0
  121. package/nav-tabs/NavTabs.test.js +82 -0
  122. package/nav-tabs/Tab.d.ts +4 -0
  123. package/nav-tabs/Tab.js +150 -0
  124. package/nav-tabs/types.d.ts +53 -0
  125. package/number-input/NumberInput.js +11 -18
  126. package/number-input/NumberInput.stories.tsx +5 -5
  127. package/number-input/NumberInput.test.js +542 -0
  128. package/number-input/types.d.ts +17 -10
  129. package/package.json +20 -23
  130. package/paginator/Icons.d.ts +5 -0
  131. package/paginator/Icons.js +16 -28
  132. package/paginator/Paginator.js +19 -46
  133. package/paginator/Paginator.stories.tsx +24 -0
  134. package/paginator/Paginator.test.js +305 -0
  135. package/paragraph/Paragraph.d.ts +6 -0
  136. package/paragraph/Paragraph.js +38 -0
  137. package/paragraph/Paragraph.stories.tsx +44 -0
  138. package/password-input/PasswordInput.js +7 -4
  139. package/password-input/PasswordInput.test.js +181 -0
  140. package/password-input/types.d.ts +14 -11
  141. package/progress-bar/ProgressBar.d.ts +2 -2
  142. package/progress-bar/ProgressBar.js +61 -55
  143. package/progress-bar/ProgressBar.stories.jsx +47 -12
  144. package/progress-bar/ProgressBar.test.js +110 -0
  145. package/progress-bar/types.d.ts +3 -4
  146. package/quick-nav/QuickNav.d.ts +4 -0
  147. package/quick-nav/QuickNav.js +117 -0
  148. package/quick-nav/QuickNav.stories.tsx +356 -0
  149. package/quick-nav/types.d.ts +21 -0
  150. package/quick-nav/types.js +5 -0
  151. package/radio-group/Radio.d.ts +1 -1
  152. package/radio-group/Radio.js +53 -37
  153. package/radio-group/RadioGroup.js +67 -57
  154. package/radio-group/RadioGroup.stories.tsx +171 -36
  155. package/radio-group/RadioGroup.test.js +563 -89
  156. package/radio-group/types.d.ts +82 -4
  157. package/resultsetTable/Icons.d.ts +7 -0
  158. package/resultsetTable/Icons.js +51 -0
  159. package/resultsetTable/ResultsetTable.js +49 -108
  160. package/resultsetTable/ResultsetTable.stories.tsx +50 -25
  161. package/resultsetTable/ResultsetTable.test.js +325 -0
  162. package/resultsetTable/types.d.ts +2 -2
  163. package/select/Icons.d.ts +10 -0
  164. package/select/Icons.js +93 -0
  165. package/select/Listbox.d.ts +4 -0
  166. package/select/Listbox.js +169 -0
  167. package/select/Option.d.ts +4 -0
  168. package/select/Option.js +97 -0
  169. package/select/Select.js +185 -384
  170. package/select/Select.stories.tsx +600 -201
  171. package/select/Select.test.js +2228 -0
  172. package/select/types.d.ts +53 -13
  173. package/sidenav/Sidenav.d.ts +6 -5
  174. package/sidenav/Sidenav.js +183 -53
  175. package/sidenav/Sidenav.stories.tsx +249 -149
  176. package/sidenav/Sidenav.test.js +44 -0
  177. package/sidenav/types.d.ts +50 -27
  178. package/slider/Slider.d.ts +2 -2
  179. package/slider/Slider.js +124 -98
  180. package/slider/Slider.stories.tsx +72 -9
  181. package/slider/Slider.test.js +250 -0
  182. package/slider/types.d.ts +10 -2
  183. package/spinner/Spinner.js +4 -4
  184. package/spinner/Spinner.stories.jsx +27 -1
  185. package/spinner/Spinner.test.js +64 -0
  186. package/switch/Switch.d.ts +2 -2
  187. package/switch/Switch.js +152 -69
  188. package/switch/Switch.stories.tsx +53 -42
  189. package/switch/Switch.test.js +225 -0
  190. package/switch/types.d.ts +12 -4
  191. package/table/Table.js +3 -3
  192. package/table/Table.stories.jsx +80 -1
  193. package/table/Table.test.js +26 -0
  194. package/tabs/Tab.d.ts +4 -0
  195. package/tabs/Tab.js +133 -0
  196. package/tabs/Tabs.d.ts +1 -1
  197. package/tabs/Tabs.js +363 -109
  198. package/tabs/Tabs.stories.tsx +119 -13
  199. package/tabs/Tabs.test.js +350 -0
  200. package/tabs/types.d.ts +19 -5
  201. package/tag/Tag.js +17 -22
  202. package/tag/Tag.stories.tsx +25 -8
  203. package/tag/Tag.test.js +60 -0
  204. package/tag/types.d.ts +1 -1
  205. package/text-input/Icons.d.ts +8 -0
  206. package/text-input/Icons.js +60 -0
  207. package/text-input/Suggestion.d.ts +4 -0
  208. package/text-input/Suggestion.js +84 -0
  209. package/text-input/Suggestions.d.ts +4 -0
  210. package/text-input/Suggestions.js +134 -0
  211. package/text-input/TextInput.js +224 -345
  212. package/text-input/TextInput.stories.tsx +310 -197
  213. package/text-input/TextInput.test.js +1723 -0
  214. package/text-input/types.d.ts +50 -12
  215. package/textarea/Textarea.js +22 -29
  216. package/textarea/Textarea.stories.jsx +93 -13
  217. package/textarea/Textarea.test.js +437 -0
  218. package/textarea/types.d.ts +18 -11
  219. package/toggle-group/ToggleGroup.d.ts +1 -1
  220. package/toggle-group/ToggleGroup.js +6 -5
  221. package/toggle-group/ToggleGroup.stories.tsx +46 -4
  222. package/toggle-group/ToggleGroup.test.js +156 -0
  223. package/toggle-group/types.d.ts +9 -1
  224. package/typography/Typography.d.ts +4 -0
  225. package/typography/Typography.js +32 -0
  226. package/typography/Typography.stories.tsx +198 -0
  227. package/typography/types.d.ts +18 -0
  228. package/typography/types.js +5 -0
  229. package/useTheme.d.ts +1234 -1
  230. package/useTheme.js +3 -3
  231. package/useTranslatedLabels.d.ts +85 -0
  232. package/useTranslatedLabels.js +20 -0
  233. package/utils/BaseTypography.d.ts +21 -0
  234. package/utils/BaseTypography.js +108 -0
  235. package/utils/FocusLock.d.ts +13 -0
  236. package/utils/FocusLock.js +139 -0
  237. package/wizard/Wizard.d.ts +1 -1
  238. package/wizard/Wizard.js +59 -55
  239. package/wizard/Wizard.stories.tsx +48 -19
  240. package/wizard/Wizard.test.js +141 -0
  241. package/wizard/types.d.ts +10 -5
  242. package/ThemeContext.d.ts +0 -15
  243. package/ThemeContext.js +0 -243
  244. package/V3Select/V3Select.js +0 -455
  245. package/V3Select/index.d.ts +0 -27
  246. package/V3Textarea/V3Textarea.js +0 -260
  247. package/V3Textarea/index.d.ts +0 -27
  248. package/common/RequiredComponent.js +0 -32
  249. package/date/Date.js +0 -373
  250. package/date/index.d.ts +0 -27
  251. package/input-text/Icons.js +0 -22
  252. package/input-text/InputText.js +0 -611
  253. package/input-text/index.d.ts +0 -36
  254. package/list/List.d.ts +0 -4
  255. package/list/List.js +0 -47
  256. package/list/List.stories.tsx +0 -95
  257. package/list/types.d.ts +0 -7
  258. package/radio/Radio.d.ts +0 -4
  259. package/radio/Radio.js +0 -174
  260. package/radio/Radio.stories.tsx +0 -192
  261. package/radio/types.d.ts +0 -54
  262. package/row/Row.d.ts +0 -3
  263. package/row/Row.js +0 -127
  264. package/row/Row.stories.tsx +0 -237
  265. package/row/types.d.ts +0 -10
  266. package/stack/Stack.d.ts +0 -3
  267. package/stack/Stack.js +0 -97
  268. package/stack/Stack.stories.tsx +0 -164
  269. package/stack/types.d.ts +0 -9
  270. package/text/Text.d.ts +0 -7
  271. package/text/Text.js +0 -30
  272. package/text/Text.stories.tsx +0 -19
  273. package/toggle/Toggle.js +0 -186
  274. package/toggle/index.d.ts +0 -21
  275. package/upload/Upload.js +0 -201
  276. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  277. package/upload/buttons-upload/Icons.js +0 -40
  278. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  279. package/upload/dragAndDropArea/Icons.js +0 -39
  280. package/upload/file-upload/FileToUpload.js +0 -115
  281. package/upload/file-upload/Icons.js +0 -66
  282. package/upload/files-upload/FilesToUpload.js +0 -109
  283. package/upload/index.d.ts +0 -15
  284. package/upload/transaction/Icons.js +0 -160
  285. package/upload/transaction/Transaction.js +0 -104
  286. package/upload/transactions/Transactions.js +0 -94
  287. /package/{list → badge}/types.js +0 -0
  288. /package/{radio → bulleted-list}/types.js +0 -0
  289. /package/{row → flex}/types.js +0 -0
  290. /package/{stack → nav-tabs}/types.js +0 -0
@@ -3,14 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.componentTokens = void 0;
7
-
8
- var _Icons = require("../header/Icons");
9
-
10
- var _Icons2 = require("../footer/Icons");
11
-
6
+ exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
12
7
  var globalTokens = {
13
- // Color
8
+ // Color
14
9
  inherit: "inherit",
15
10
  transparent: "transparent",
16
11
  hal_white: "#ffffff",
@@ -24,13 +19,19 @@ var globalTokens = {
24
19
  color_grey_800: "#4d4d4d",
25
20
  color_grey_600: "#808080",
26
21
  color_grey_50: "#fafafa",
22
+ color_grey_a_100: "#0000000d",
23
+ color_grey_a_200: "#0000001a",
24
+ color_grey_a_300: "#00000033",
25
+ color_grey_a_800: "#000000b3",
26
+ color_grey_a_900: "#333333",
27
27
  hal_purple_l_95: "#f2eafa",
28
28
  hal_purple_l_90: "#e5d5f6",
29
29
  hal_purple_l_65: "#a46ede",
30
30
  hal_purple_s_38: "#5f249f",
31
31
  hal_purple_d_30: "#4b1c7d",
32
32
  hal_purple_d_20: "#321353",
33
- color_purple_600: "#7D2FD0",
33
+ hal_purple_d_70: "#9A6bb2",
34
+ color_purple_600: "#7d2fd0",
34
35
  color_purple_300: "#cbacec",
35
36
  hal_blue_l_95: "#e6f4ff",
36
37
  hal_blue_l_80: "#99d5ff",
@@ -39,7 +40,7 @@ var globalTokens = {
39
40
  hal_blue_s_35: "#0067b3",
40
41
  hal_blue_d_20: "#003c66",
41
42
  color_blue_200: "#cceaff",
42
- color_blue_500: "#33AAFF",
43
+ color_blue_500: "#33aaff",
43
44
  color_blue_50: "#f5fbff",
44
45
  hal_red_l_95: "#ffe6e9",
45
46
  hal_red_l_80: "#fe9aa7",
@@ -48,7 +49,7 @@ var globalTokens = {
48
49
  hal_red_d_30: "#980115",
49
50
  hal_red_d_20: "#65010e",
50
51
  color_red_700: "#ffccd3",
51
- color_red_50: "#FFF5F6",
52
+ color_red_50: "#fff5f6",
52
53
  color_red_600: "#fe0123",
53
54
  hal_green_l_95: "#eafaef",
54
55
  hal_green_l_80: "#acecbe",
@@ -61,36 +62,28 @@ var globalTokens = {
61
62
  hal_yellow_d_40: "#c59f07",
62
63
  hal_yellow_d_30: "#947705",
63
64
  hal_orange_s_54: "#f38f20",
64
- black: "#000000",
65
65
  lightBlack: "#212121",
66
- yellow: "#FFED00",
67
- lightGrey: "#D9D9D9",
68
- darkRed: "#D0011B",
69
- lightRed: "#FF6161",
70
- lightBlue: "#CEE0F5",
71
- lightYellow: "#FCF2BD",
72
- lightPink: "#F9CFCF",
73
- lightGreen: "#DBF1C4",
74
- blue: "#005FCC",
75
- lighterGrey: "#F8F8F8",
76
- red: "#D0011B",
77
- violet: "#8800F6",
78
- darkBlue: "#006BF6",
66
+ yellow: "#ffed00",
67
+ lightGrey: "#d9d9d9",
68
+ lightRed: "#ff6161",
69
+ lightBlue: "#cee0f5",
70
+ lightYellow: "#fcf2bd",
71
+ lightPink: "#f9cfcf",
72
+ lightGreen: "#dbf1c4",
73
+ blue: "#005fcc",
74
+ lighterGrey: "#f8f8f8",
75
+ violet: "#8800f6",
76
+ darkBlue: "#006bf6",
79
77
  purple: "#6f2c91",
80
78
  mediumPurple: "#ead8f3",
81
79
  lightPurple: "#f5ebf9",
82
80
  lighterPurple: "#d0bddb",
83
- white: "#ffffff",
84
- darkGrey: "#666666",
85
- mediumGrey: "#bfbfbf",
86
81
  mediumWhite: "#f9f9f9",
87
- mediumBlue: "#0067b3",
88
82
  softBlue: "#b1cee6",
89
83
  darkWhite: "#eeeeee",
90
84
  lighterBlack: "#b1b1b1",
91
85
  mediumBlack: "#676767",
92
86
  mediumGreyBlack: "#dbdbdb",
93
- lightWhite: "#f2f2f2",
94
87
  softGrey: "#cecece",
95
88
  softBlack: "#565656",
96
89
  // Typography
@@ -112,7 +105,7 @@ var globalTokens = {
112
105
  type_normal: "normal",
113
106
  type_spacing_tight_02: "-0.05em",
114
107
  type_spacing_tight_01: "-0.025em",
115
- type_spacing_normal: "0",
108
+ type_spacing_normal: "0em",
116
109
  type_spacing_wide_01: "0.025em",
117
110
  type_spacing_wide_02: "0.05em",
118
111
  type_spacing_wide_03: "0.1em",
@@ -181,27 +174,27 @@ var componentTokens = {
181
174
  titleLabelFontStyle: globalTokens.type_normal,
182
175
  titleLabelFontColor: globalTokens.hal_black,
183
176
  disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
184
- titleLabelPaddingLeft: "0px",
185
- titleLabelPaddingRight: "16px",
186
177
  titleLabelPaddingTop: "0px",
187
178
  titleLabelPaddingBottom: "0px",
188
- focusBorderStyle: "solid",
189
- focusBorderThickness: "2px",
179
+ titleLabelPaddingLeft: "0px",
180
+ titleLabelPaddingRight: "16px",
190
181
  focusBorderColor: globalTokens.hal_blue_l_50,
182
+ focusBorderStyle: globalTokens.border_solid,
183
+ focusBorderThickness: "2px",
191
184
  borderRadius: "4px",
192
185
  boxShadowOffsetX: "0px",
193
186
  boxShadowOffsetY: "6px",
194
187
  boxShadowBlur: "10px",
195
- boxShadowColor: "#0000001a",
188
+ boxShadowColor: globalTokens.color_grey_a_200,
196
189
  iconColor: globalTokens.hal_purple_s_38,
197
190
  disabledIconColor: globalTokens.hal_grey_l_60,
198
191
  iconSize: "24px",
199
192
  iconMarginLeft: "0px",
200
193
  iconMarginRigth: "12px",
201
- accordionGroupSeparatorBorderColor: "#0000001a",
194
+ accordionGroupSeparatorBorderColor: globalTokens.color_grey_a_200,
202
195
  accordionGroupSeparatorBorderThickness: "1px",
203
196
  accordionGroupSeparatorBorderRadius: "0px",
204
- accordionGroupSeparatorBorderStyle: "solid"
197
+ accordionGroupSeparatorBorderStyle: globalTokens.border_solid
205
198
  },
206
199
  alert: {
207
200
  titleFontFamily: globalTokens.type_sans,
@@ -224,7 +217,7 @@ var componentTokens = {
224
217
  contentPaddingTop: "20px",
225
218
  contentPaddingBottom: "30px",
226
219
  borderRadius: "4px",
227
- borderStyle: "solid",
220
+ borderStyle: globalTokens.border_solid,
228
221
  borderThickness: "1px",
229
222
  infoBorderColor: globalTokens.hal_blue_s_35,
230
223
  successBorderColor: globalTokens.hal_green_s_39,
@@ -241,17 +234,16 @@ var componentTokens = {
241
234
  successBackgroundColor: globalTokens.hal_green_l_95,
242
235
  warningBackgroundColor: globalTokens.hal_yellow_l_95,
243
236
  errorBackgroundColor: globalTokens.hal_red_l_95,
244
- hoverActionBackgroundColor: "#0000000D",
245
- activeActionBackgroundColor: "#0000001A",
237
+ hoverActionBackgroundColor: globalTokens.color_grey_a_100,
238
+ activeActionBackgroundColor: globalTokens.color_grey_a_200,
246
239
  focusActionBorderColor: globalTokens.hal_blue_l_50,
247
- overlayColor: "#000000B3"
240
+ overlayColor: globalTokens.color_grey_a_800
248
241
  },
249
242
  box: {
250
- backgroundColor: globalTokens.white,
251
- letterSpacing: globalTokens.type_spacing_wide_01,
252
- borderRadius: "4px",
253
- borderThickness: "0px",
254
- borderStyle: "none",
243
+ backgroundColor: globalTokens.hal_white,
244
+ borderRadius: globalTokens.border_radius_medium,
245
+ borderThickness: globalTokens.border_width_0,
246
+ borderStyle: globalTokens.border_none,
255
247
  borderColor: globalTokens.transparent,
256
248
  noneShadowDepthShadowOffsetX: "none",
257
249
  noneShadowDepthShadowOffsetY: "none",
@@ -262,12 +254,21 @@ var componentTokens = {
262
254
  oneShadowDepthShadowOffsetY: "3px",
263
255
  oneShadowDepthShadowBlur: "6px",
264
256
  oneShadowDepthShadowSpread: "0px",
265
- oneShadowDepthShadowColor: "#00000033",
257
+ oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
266
258
  twoShadowDepthShadowOffsetX: "0px",
267
259
  twoShadowDepthShadowOffsetY: "3px",
268
260
  twoShadowDepthShadowBlur: "10px",
269
261
  twoShadowDepthShadowSpread: "0px",
270
- twoShadowDepthShadowColor: "#00000033"
262
+ twoShadowDepthShadowColor: globalTokens.color_grey_a_300
263
+ },
264
+ bulletedList: {
265
+ fontColor: globalTokens.hal_black,
266
+ fontColorOnDark: globalTokens.hal_white,
267
+ bulletIconHeight: "1.5rem",
268
+ bulletIconWidth: "1.5rem",
269
+ bulletHeight: "5px",
270
+ bulletWidth: "5px",
271
+ bulletMarginRight: "0.5rem"
271
272
  },
272
273
  button: {
273
274
  labelFontLineHeight: globalTokens.type_leading_normal,
@@ -347,7 +348,7 @@ var componentTokens = {
347
348
  backgroundColorChecked: globalTokens.hal_blue_s_35,
348
349
  backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
349
350
  hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
350
- hoverBackgroundColorCheckedOnDark: global.hal_white,
351
+ hoverBackgroundColorCheckedOnDark: globalTokens.hal_white,
351
352
  disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
352
353
  disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
353
354
  borderColor: globalTokens.hal_blue_s_35,
@@ -382,70 +383,71 @@ var componentTokens = {
382
383
  disabledFontColor: globalTokens.hal_grey_l_60,
383
384
  borderColor: globalTokens.transparent,
384
385
  borderRadius: "80px",
385
- borderThickness: "0px",
386
- borderStyle: "solid",
386
+ borderThickness: globalTokens.border_width_0,
387
+ borderStyle: globalTokens.border_solid,
387
388
  contentPaddingLeft: "16px",
388
389
  contentPaddingRight: "16px",
389
390
  contentPaddingTop: "0px",
390
391
  contentPaddingBottom: "0px",
391
392
  iconSize: "24px",
392
393
  iconSpacing: "8px",
393
- iconColor: globalTokens.hal_black,
394
+ iconColor: globalTokens.color_grey_800,
395
+ hoverIconColor: globalTokens.color_grey_a_900,
396
+ activeIconColor: globalTokens.hal_black,
394
397
  disabledIconColor: globalTokens.hal_grey_l_60,
395
- focusColor: globalTokens.hal_blue_l_50
396
- },
397
- date: {
398
- pickerSelectedDateBackgroundColor: globalTokens.purple,
399
- pickerSelectedDateColor: globalTokens.hal_white,
400
- pickerBackgroundColor: globalTokens.hal_white,
401
- pickerFontColor: globalTokens.hal_black,
402
- pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
403
- pickerHoverDateFontColor: globalTokens.hal_black,
404
- pickerActualDateColor: globalTokens.lightGrey,
405
- pickerYearColor: globalTokens.hal_black,
406
- pickerMonthColor: globalTokens.hal_black,
407
- pickerWeekLabelColor: globalTokens.hal_black,
408
- pickerBackgroundColorMonthArrows: globalTokens.transparent,
409
398
  focusColor: globalTokens.hal_blue_l_50,
410
- fontFamily: globalTokens.type_sans,
411
- pickerHeight: "316px",
412
- pickerWidth: "290px"
399
+ focusBorderStyle: globalTokens.border_solid,
400
+ focusBorderThickness: globalTokens.border_width_2,
401
+ focusBorderRadius: globalTokens.border_radius_medium
413
402
  },
414
403
  dateInput: {
415
- pickerFontFamily: globalTokens.type_sans,
416
404
  pickerBackgroundColor: globalTokens.hal_white,
417
- pickerHoverDateFontColor: globalTokens.hal_black,
418
- pickerHoverDateBackgroundColor: globalTokens.hal_purple_l_90,
419
- pickerSelectedDateColor: globalTokens.hal_white,
420
- pickerSelectedDateBackgroundColor: globalTokens.hal_purple_s_38,
421
- pickerActualDateFontColor: globalTokens.hal_grey_l_60,
422
- pickerYearFontColor: globalTokens.hal_black,
423
- pickerMonthFontColor: globalTokens.hal_black,
424
- pickerWeekFontColor: globalTokens.hal_black,
425
- pickerDayFontColor: globalTokens.hal_black,
426
- pickerMonthArrowsBackgroundColor: globalTokens.transparent,
405
+ pickerFontColor: globalTokens.hal_black,
406
+ pickerBorderColor: globalTokens.hal_grey_l_75,
407
+ pickerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
408
+ pickerSelectedFontColor: globalTokens.hal_white,
409
+ pickerHoverBackgroundColor: globalTokens.hal_purple_l_90,
410
+ pickerHoverFontColor: globalTokens.hal_black,
411
+ pickerActiveBackgroundColor: globalTokens.hal_purple_d_30,
412
+ pickerActiveFontColor: globalTokens.hal_white,
413
+ pickerNonCurrentMonthFontColor: globalTokens.hal_grey_l_60,
414
+ pickerCurrentDateBorderColor: globalTokens.color_purple_300,
415
+ pickerCurrentDateFontColor: globalTokens.hal_black,
416
+ pickerCurrentYearFontColor: globalTokens.hal_purple_s_38,
417
+ pickerHeaderBackgroundColor: globalTokens.transparent,
418
+ pickerHeaderFontColor: globalTokens.hal_black,
419
+ pickerHeaderHoverBackgroundColor: globalTokens.hal_purple_l_90,
420
+ pickerHeaderHoverFontColor: globalTokens.hal_black,
421
+ pickerHeaderActiveBackgroundColor: globalTokens.hal_purple_d_30,
422
+ pickerHeaderActiveFontColor: globalTokens.hal_white,
427
423
  pickerFocusColor: globalTokens.hal_blue_l_50,
428
- pickerHeight: "316px",
429
- pickerWidth: "290px"
424
+ pickerBorderWidth: globalTokens.border_width_1,
425
+ pickerBorderStyle: globalTokens.border_solid,
426
+ pickerFocusWidth: globalTokens.border_width_2,
427
+ pickerCurrentDateBorderWidth: globalTokens.border_width_1,
428
+ pickerFontFamily: globalTokens.type_sans,
429
+ pickerFontSize: globalTokens.type_scale_02,
430
+ pickerFontWeight: globalTokens.type_regular,
431
+ pickerInteractedYearFontSize: globalTokens.type_scale_05,
432
+ pickerHeaderFontSize: globalTokens.type_scale_02
430
433
  },
431
434
  dialog: {
432
- overlayColor: globalTokens.hal_black,
435
+ overlayColor: globalTokens.color_grey_a_800,
433
436
  backgroundColor: globalTokens.hal_white,
434
437
  closeIconWidth: "24px",
435
438
  closeIconHeight: "24px",
436
439
  closeIconTopPosition: "20px",
437
440
  closeIconRightPosition: "20px",
438
- closeIconBackgroundColor: "none",
439
- closeIconBorderColor: "none",
441
+ closeIconBackgroundColor: globalTokens.transparent,
442
+ closeIconBorderColor: globalTokens.border_none,
440
443
  closeIconColor: globalTokens.hal_black,
441
- closeIconBorderThickness: "0px",
442
- closeIconBorderStyle: "solid",
443
- closeIconBorderRadius: "0px",
444
+ closeIconBorderThickness: globalTokens.border_width_0,
445
+ closeIconBorderStyle: globalTokens.border_solid,
446
+ closeIconBorderRadius: "2px",
444
447
  boxShadowOffsetX: "0px",
445
448
  boxShadowOffsetY: "1px",
446
449
  boxShadowBlur: "3px",
447
- boxShadowColor: "rgba(0, 0, 0, 0.2)",
448
- overlayOpacity: "0.7"
450
+ boxShadowColor: globalTokens.color_grey_a_300
449
451
  },
450
452
  dropdown: {
451
453
  buttonBackgroundColor: globalTokens.hal_white,
@@ -463,12 +465,12 @@ var componentTokens = {
463
465
  buttonPaddingBottom: "0px",
464
466
  buttonPaddingLeft: "16px",
465
467
  buttonPaddingRight: "16px",
466
- disabledColor: globalTokens.lighterBlack,
468
+ disabledColor: globalTokens.hal_grey_l_60,
467
469
  disabledButtonBackgroundColor: globalTokens.transparent,
468
470
  disabledBorderColor: globalTokens.lighterBlack,
469
471
  optionBackgroundColor: globalTokens.hal_white,
470
472
  hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
471
- activeOptionBackgroundColor: globalTokens.lightGrey,
473
+ activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
472
474
  optionFontFamily: globalTokens.type_sans,
473
475
  optionFontSize: globalTokens.type_scale_root,
474
476
  optionFontStyle: globalTokens.type_normal,
@@ -485,8 +487,8 @@ var componentTokens = {
485
487
  caretIconColor: globalTokens.hal_black,
486
488
  caretIconSpacing: "12px",
487
489
  borderRadius: "4px",
488
- borderStyle: "none",
489
- borderThickness: "0px",
490
+ borderStyle: globalTokens.border_none,
491
+ borderThickness: globalTokens.border_width_0,
490
492
  borderColor: globalTokens.transparent,
491
493
  scrollBarThumbColor: globalTokens.hal_grey_s_40,
492
494
  scrollBarTrackColor: globalTokens.lightGrey,
@@ -505,14 +507,13 @@ var componentTokens = {
505
507
  focusDropBorderColor: globalTokens.hal_blue_l_50,
506
508
  disabledDropBorderColor: globalTokens.hal_grey_l_60,
507
509
  dragoverDropBackgroundColor: globalTokens.color_blue_50,
508
- hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
509
510
  activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
510
511
  errorFileItemBorderColor: globalTokens.hal_red_s_41,
511
512
  errorFileItemBackgroundColor: globalTokens.color_red_50,
512
- errorFileItemIconBackgroundColor: globalTokens.color_red_700,
513
+ errorFilePreviewBackgroundColor: globalTokens.color_red_700,
513
514
  errorFileItemIconColor: globalTokens.hal_red_s_41,
514
515
  fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
515
- fileItemIconColor: globalTokens.color_grey_600,
516
+ deleteFileItemColor: globalTokens.hal_black,
516
517
  errorMessageFontColor: globalTokens.hal_red_s_41,
517
518
  labelFontFamily: globalTokens.type_sans,
518
519
  labelFontSize: globalTokens.type_scale_02,
@@ -539,16 +540,19 @@ var componentTokens = {
539
540
  fileItemBorderThickness: globalTokens.border_width_1,
540
541
  fileItemBorderStyle: globalTokens.border_solid,
541
542
  fileItemBorderRadius: globalTokens.border_radius_medium,
542
- hoverDeleteFileItemBackgroundColor: "#0000000d",
543
- activeDeleteFileItemBackgroundColor: "#00000033",
544
- focusActionBorderColor: globalTokens.hal_blue_l_50
543
+ hoverDeleteFileItemBackgroundColor: globalTokens.color_grey_a_100,
544
+ activeDeleteFileItemBackgroundColor: globalTokens.color_grey_a_300,
545
+ focusDeleteFileItemBorderColor: globalTokens.hal_blue_l_50,
546
+ filePreviewBackgroundColor: globalTokens.hal_grey_l_95,
547
+ filePreviewIconColor: globalTokens.color_grey_600,
548
+ errorFilePreviewIconColor: globalTokens.hal_red_s_41
545
549
  },
546
550
  footer: {
547
551
  height: "124px",
548
552
  backgroundColor: globalTokens.hal_black,
549
553
  bottomLinksDividerColor: globalTokens.hal_blue_l_50,
550
554
  bottomLinksDividerThickness: "1px",
551
- bottomLinksDividerStyle: "solid",
555
+ bottomLinksDividerStyle: globalTokens.border_solid,
552
556
  bottomLinksDividerSpacing: "8px",
553
557
  bottomLinksFontFamily: globalTokens.type_sans,
554
558
  bottomLinksFontSize: globalTokens.type_scale_01,
@@ -578,7 +582,7 @@ var componentTokens = {
578
582
  hamburguerFontWeight: globalTokens.type_semibold,
579
583
  hamburguerTextTransform: globalTokens.type_uppercase,
580
584
  hamburguerIconColor: globalTokens.hal_black,
581
- hamburguerHoverColor: globalTokens.mediumGreyBlack,
585
+ hamburguerHoverColor: globalTokens.hal_grey_l_90,
582
586
  logo: "",
583
587
  logoResponsive: "",
584
588
  logoHeight: "40px",
@@ -588,7 +592,7 @@ var componentTokens = {
588
592
  menuTabletWidth: "60vw",
589
593
  menuMobileWidth: "100vw",
590
594
  minHeight: "64px",
591
- overlayColor: globalTokens.softBlack,
595
+ overlayColor: globalTokens.color_grey_a_800,
592
596
  overlayOpacity: "0.7",
593
597
  overlayZindex: "1600",
594
598
  paddingTop: "0px",
@@ -597,7 +601,7 @@ var componentTokens = {
597
601
  paddingLeft: "24px",
598
602
  underlinedColor: globalTokens.hal_black,
599
603
  underlinedThickness: "2px",
600
- underlinedStyle: "solid",
604
+ underlinedStyle: globalTokens.border_solid,
601
605
  contentColor: globalTokens.hal_black,
602
606
  contentColorOnDark: globalTokens.hal_white
603
607
  },
@@ -638,216 +642,90 @@ var componentTokens = {
638
642
  level5LineHeight: globalTokens.type_leading_normal,
639
643
  level5LetterSpacing: globalTokens.type_spacing_wide_01
640
644
  },
641
- inputText: {
642
- fontFamily: globalTokens.type_sans,
643
- assistiveTextFontColor: globalTokens.black,
644
- assistiveTextFontColorOnDark: globalTokens.white,
645
- assistiveTextFontSize: globalTokens.type_scale_01,
646
- assistiveTextFontStyle: globalTokens.type_normal,
647
- assistiveTextFontWeight: globalTokens.type_regular,
648
- disabledColor: globalTokens.lighterBlack,
649
- disabledColorOnDark: "#575757",
650
- errorColor: globalTokens.red,
651
- errorColorOnDark: globalTokens.hal_red_l_60,
652
- optionBackgroundColor: globalTokens.white,
653
- optionBorderColor: globalTokens.black,
654
- optionBorderThickness: "0px",
655
- optionBorderStyle: "solid",
656
- optionFontColor: globalTokens.black,
657
- optionFontColorOnDark: globalTokens.white,
658
- optionFontSize: globalTokens.type_scale_03,
659
- optionFontStyle: globalTokens.type_normal,
660
- optionFontWeight: globalTokens.type_regular,
661
- optionPaddingBottom: "6px",
662
- optionPaddingTop: "6px",
663
- scrollBarThumbColor: globalTokens.darkGrey,
664
- scrollBarTrackColor: globalTokens.lightGrey,
665
- hoverOptionColor: globalTokens.black,
666
- hoverOptionBackgroundColor: globalTokens.lightWhite,
667
- hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
668
- selectedOptionBackgroundColor: globalTokens.lightGrey,
669
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
670
- labelFontColor: globalTokens.black,
671
- labelFontColorOnDark: globalTokens.white,
672
- labelFontSize: globalTokens.type_scale_03,
673
- labelFontStyle: globalTokens.type_normal,
674
- labelFontWeight: globalTokens.type_regular,
675
- valueFontColor: globalTokens.black,
676
- valueFontColorOnDark: globalTokens.white,
677
- valueFontSize: globalTokens.type_scale_03,
678
- valueFontStyle: globalTokens.type_normal,
679
- valueFontWeight: globalTokens.type_regular,
680
- prefixIconColor: globalTokens.black,
681
- prefixIconColorOnDark: globalTokens.white,
682
- prefixLabelFontColor: globalTokens.black,
683
- prefixLabelFontColorOnDark: globalTokens.white,
684
- prefixLabelFontSize: globalTokens.type_scale_03,
685
- prefixLabelFontStyle: globalTokens.type_normal,
686
- prefixLabelFontWeight: globalTokens.type_regular,
687
- suffixIconColor: globalTokens.black,
688
- suffixIconColorOnDark: globalTokens.white,
689
- suffixLabelFontColor: globalTokens.black,
690
- suffixLabelFontColorOnDark: globalTokens.white,
691
- suffixLabelFontSize: globalTokens.type_scale_03,
692
- suffixLabelFontStyle: globalTokens.type_normal,
693
- suffixLabelFontWeight: globalTokens.type_regular,
694
- underlineColor: globalTokens.black,
695
- underlineColorOnDark: globalTokens.white,
696
- underlineFocusColor: globalTokens.black,
697
- underlineFocusColorOnDark: globalTokens.white,
698
- underlineThickness: "1px"
699
- },
700
- textInput: {
701
- fontFamily: globalTokens.type_sans,
702
- enabledBorderColor: globalTokens.hal_black,
703
- enabledBorderColorOnDark: globalTokens.hal_white,
704
- hoverBorderColor: globalTokens.hal_purple_l_65,
705
- hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
706
- focusBorderColor: globalTokens.hal_blue_l_50,
707
- focusBorderColorOnDark: globalTokens.hal_blue_l_50,
708
- disabledBorderColor: globalTokens.hal_grey_l_60,
709
- disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
710
- disabledContainerFillColor: globalTokens.hal_grey_l_95,
711
- disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
712
- errorBorderColor: globalTokens.hal_red_s_41,
713
- errorBorderColorOnDark: globalTokens.hal_red_l_60,
714
- hoverErrorBorderColor: globalTokens.color_red_600,
715
- hoverErrorBorderColorOnDark: "#fe677b",
716
- inputMarginTop: globalTokens.spacing_02,
717
- inputMarginBottom: globalTokens.spacing_02,
718
- errorMessageColor: globalTokens.hal_red_s_41,
719
- errorMessageColorOnDark: globalTokens.hal_red_l_60,
720
- errorIconColor: globalTokens.hal_red_s_41,
721
- errorIconColorOnDark: globalTokens.hal_red_l_60,
722
- labelFontColor: globalTokens.hal_black,
723
- labelFontColorOnDark: globalTokens.hal_white,
724
- labelFontSize: globalTokens.type_scale_02,
725
- labelFontStyle: globalTokens.type_normal,
726
- labelFontWeight: globalTokens.type_semibold,
727
- labelLineHeight: globalTokens.type_leading_loose_01,
728
- disabledLabelFontColor: globalTokens.hal_grey_l_60,
729
- disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
730
- optionalLabelFontWeight: globalTokens.type_regular,
731
- helperTextFontColor: globalTokens.hal_black,
732
- helperTextFontColorOnDark: globalTokens.hal_white,
733
- helperTextFontSize: globalTokens.type_scale_01,
734
- helperTextFontStyle: globalTokens.type_normal,
735
- helperTextFontWeight: globalTokens.type_regular,
736
- helperTextLineHeight: globalTokens.type_leading_normal,
737
- disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
738
- disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
739
- prefixColor: globalTokens.hal_grey_s_40,
740
- prefixColorOnDark: globalTokens.hal_white,
741
- suffixColor: globalTokens.hal_grey_s_40,
742
- suffixColorOnDark: globalTokens.hal_white,
743
- disabledPrefixColor: globalTokens.hal_grey_l_75,
744
- disabledSuffixColor: globalTokens.hal_grey_l_75,
745
- disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
746
- disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
747
- placeholderFontColor: "#000000b3",
748
- placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
749
- disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
750
- disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
751
- valueFontColor: globalTokens.hal_black,
752
- valueFontColorOnDark: globalTokens.hal_white,
753
- valueFontSize: globalTokens.type_scale_03,
754
- valueFontStyle: globalTokens.type_normal,
755
- valueFontWeight: globalTokens.type_regular,
756
- disabledValueFontColor: globalTokens.hal_grey_l_60,
757
- disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
758
- actionIconColor: globalTokens.hal_black,
759
- actionIconColorOnDark: globalTokens.hal_white,
760
- disabledActionIconColor: globalTokens.hal_grey_l_60,
761
- disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
762
- hoverActionIconColor: globalTokens.hal_black,
763
- hoverActionIconColorOnDark: globalTokens.hal_white,
764
- focusActionIconColor: globalTokens.hal_black,
765
- focusActionIconColorOnDark: globalTokens.hal_white,
766
- activeActionIconColor: globalTokens.hal_black,
767
- activeActionIconColorOnDark: globalTokens.hal_black,
768
- actionBackgroundColor: globalTokens.transparent,
769
- actionBackgroundColorOnDark: globalTokens.transparent,
770
- disabledActionBackgroundColor: globalTokens.transparent,
771
- disabledActionBackgroundColorOnDark: globalTokens.transparent,
772
- hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
773
- hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
774
- focusActionBorderColor: globalTokens.hal_blue_l_50,
775
- focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
776
- activeActionBackgroundColor: globalTokens.hal_grey_l_80,
777
- activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
778
- listDialogBackgroundColor: globalTokens.hal_white,
779
- listDialogBorderColor: globalTokens.hal_grey_l_75,
780
- listOptionDividerColor: globalTokens.hal_grey_l_90,
781
- listOptionFontColor: globalTokens.hal_black,
782
- listOptionFontSize: globalTokens.type_scale_02,
783
- listOptionFontStyle: globalTokens.type_normal,
784
- listOptionFontWeight: globalTokens.type_regular,
785
- systemMessageFontColor: globalTokens.hal_grey_s_40,
786
- errorListDialogFontColor: globalTokens.hal_black,
787
- errorListDialogBackgroundColor: globalTokens.color_red_50,
788
- errorListDialogBorderColor: globalTokens.hal_red_s_41,
789
- hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
790
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
791
- focusListOptionBorderColor: globalTokens.hal_blue_l_50
792
- },
793
645
  link: {
794
646
  fontColor: globalTokens.hal_blue_s_35,
795
647
  fontFamily: globalTokens.inherit,
796
- fontSize: globalTokens.type_scale_root,
648
+ fontSize: globalTokens.inherit,
797
649
  fontStyle: globalTokens.type_normal,
798
650
  fontWeight: globalTokens.type_regular,
799
651
  iconSize: "16px",
800
652
  iconSpacing: "4px",
801
653
  underlineSpacing: "0px",
802
- underlineStyle: "solid",
654
+ underlineStyle: globalTokens.border_solid,
803
655
  underlineThickness: "1px",
804
656
  disabledColor: globalTokens.lightGrey,
805
657
  hoverFontColor: globalTokens.hal_blue_s_35,
806
658
  hoverUnderlineColor: globalTokens.hal_blue_s_35,
807
- visitedFontColor: globalTokens.purple,
808
- visitedUnderlineColor: globalTokens.purple,
809
- activeFontColor: globalTokens.black,
810
- activeUnderlineColor: globalTokens.black,
659
+ visitedFontColor: globalTokens.hal_purple_s_38,
660
+ visitedUnderlineColor: globalTokens.hal_purple_s_38,
661
+ activeFontColor: globalTokens.hal_black,
662
+ activeUnderlineColor: globalTokens.hal_black,
811
663
  focusColor: globalTokens.hal_blue_l_50
812
664
  },
665
+ navTabs: {
666
+ selectedBackgroundColor: globalTokens.hal_white,
667
+ unselectedBackgroundColor: globalTokens.hal_white,
668
+ hoverBackgroundColor: globalTokens.hal_grey_l_95,
669
+ pressedBackgroundColor: globalTokens.hal_grey_l_90,
670
+ selectedFontColor: globalTokens.hal_grey_s_40,
671
+ unselectedFontColor: globalTokens.hal_grey_s_40,
672
+ disabledFontColor: globalTokens.hal_grey_l_60,
673
+ focusOutline: globalTokens.hal_blue_l_50,
674
+ selectedUnderlineColor: globalTokens.hal_purple_s_38,
675
+ dividerColor: globalTokens.hal_grey_l_75,
676
+ fontFamily: globalTokens.type_sans,
677
+ fontSize: globalTokens.type_scale_03,
678
+ fontStyle: globalTokens.type_normal,
679
+ fontWeight: globalTokens.type_regular,
680
+ selectedIconColor: globalTokens.hal_grey_s_40,
681
+ unselectedIconColor: globalTokens.hal_grey_s_40,
682
+ disabledIconColor: globalTokens.hal_grey_l_60
683
+ },
813
684
  paginator: {
814
- backgroundColor: globalTokens.darkWhite,
685
+ backgroundColor: globalTokens.hal_grey_l_95,
815
686
  fontColor: globalTokens.hal_black,
816
687
  fontFamily: globalTokens.type_sans,
817
688
  fontSize: globalTokens.type_scale_02,
818
689
  fontStyle: globalTokens.type_normal,
819
690
  fontWeight: globalTokens.type_regular,
820
691
  fontTextTransform: "none",
821
- height: "64px",
822
- width: "100%",
692
+ verticalPadding: "0.75rem",
693
+ horizontalPadding: "2rem",
823
694
  marginRight: "40px",
824
695
  marginLeft: "20px",
825
696
  itemsPerPageSelectorMarginLeft: "0px",
826
- itemsPerPageSelectorMarginRight: "30px",
697
+ itemsPerPageSelectorMarginRight: "0.5rem",
827
698
  pageSelectorMarginRight: "30px",
828
699
  pageSelectorMarginLeft: "0px",
829
- totalItemsContainerMarginRight: "30px",
700
+ totalItemsContainerMarginRight: "2.5rem",
830
701
  totalItemsContainerMarginLeft: "0px"
831
702
  },
703
+ paragraph: {
704
+ fontColor: globalTokens.hal_black,
705
+ fontColorOnDark: globalTokens.hal_white,
706
+ display: "block",
707
+ fontSize: globalTokens.type_scale_03,
708
+ fontWeight: globalTokens.type_regular
709
+ },
832
710
  progressBar: {
833
711
  trackLineColor: globalTokens.hal_purple_s_38,
834
712
  trackLineColorOnDark: globalTokens.hal_purple_l_65,
835
- totalLineColor: globalTokens.softGrey,
713
+ totalLineColor: globalTokens.hal_grey_l_90,
836
714
  labelFontFamily: globalTokens.type_sans,
837
715
  labelFontSize: globalTokens.type_scale_01,
838
716
  labelFontStyle: globalTokens.type_normal,
839
717
  labelFontWeight: globalTokens.type_regular,
840
- labelFontColor: globalTokens.black,
718
+ labelFontColor: globalTokens.hal_black,
841
719
  labelFontColorOnDark: globalTokens.hal_white,
842
720
  labelFontTextTransform: globalTokens.type_uppercase,
843
721
  valueFontFamily: globalTokens.type_sans,
844
722
  valueFontSize: globalTokens.type_scale_01,
845
723
  valueFontStyle: globalTokens.type_normal,
846
724
  valueFontWeight: globalTokens.type_regular,
847
- valueFontColor: globalTokens.black,
725
+ valueFontColor: globalTokens.hal_black,
848
726
  valueFontColorOnDark: globalTokens.hal_white,
849
727
  valueFontTextTransform: globalTokens.type_uppercase,
850
- helperTextFontColor: globalTokens.black,
728
+ helperTextFontColor: globalTokens.hal_black,
851
729
  helperTextFontColorOnDark: globalTokens.hal_white,
852
730
  helperTextFontSize: globalTokens.type_scale_01,
853
731
  helperTextFontStyle: globalTokens.type_normal,
@@ -855,24 +733,23 @@ var componentTokens = {
855
733
  helperTextFontFamily: globalTokens.type_sans,
856
734
  thickness: "9px",
857
735
  borderRadius: "5px",
858
- overlayColor: globalTokens.black,
859
- overlayOpacity: "0.8"
736
+ overlayColor: globalTokens.color_grey_a_800,
737
+ overlayFontColor: globalTokens.hal_white
860
738
  },
861
- radio: {
862
- circleLabelSpacing: "10px",
863
- circleSize: "24px",
864
- color: globalTokens.black,
865
- colorOnDark: globalTokens.white,
866
- disabledColor: globalTokens.lighterBlack,
867
- disabledColorOnDark: "#575757",
868
- disabledFontColor: globalTokens.lighterBlack,
869
- disabledFontColorOnDark: "#575757",
870
- focusColor: globalTokens.hal_blue_l_50,
871
- focusColorOnDark: "#1682FF",
872
- fontColor: globalTokens.inherit,
873
- fontColorOnDark: globalTokens.white,
739
+ quickNav: {
740
+ fontColor: globalTokens.hal_grey_s_40,
741
+ hoverFontColor: globalTokens.hal_purple_d_70,
742
+ dividerBorderColor: globalTokens.hal_grey_l_75,
743
+ focusBorderColor: globalTokens.hal_blue_l_50,
744
+ focusBorderStyle: globalTokens.border_solid,
745
+ focusBorderThickness: globalTokens.border_width_2,
746
+ focusBorderRadius: globalTokens.border_width_2,
747
+ paddingTop: globalTokens.spacing_03,
748
+ paddingBottom: globalTokens.spacing_03,
749
+ paddingLeft: globalTokens.spacing_05,
750
+ paddingRight: globalTokens.spacing_05,
874
751
  fontFamily: globalTokens.type_sans,
875
- fontSize: globalTokens.type_scale_root,
752
+ fontSize: globalTokens.type_scale_02,
876
753
  fontStyle: globalTokens.type_normal,
877
754
  fontWeight: globalTokens.type_regular
878
755
  },
@@ -939,7 +816,7 @@ var componentTokens = {
939
816
  helperTextFontStyle: globalTokens.type_normal,
940
817
  helperTextFontWeight: globalTokens.type_regular,
941
818
  helperTextLineHeight: globalTokens.type_leading_normal,
942
- placeholderFontColor: "#000000b3",
819
+ placeholderFontColor: globalTokens.color_grey_a_800,
943
820
  valueFontColor: globalTokens.hal_black,
944
821
  valueFontSize: globalTokens.type_scale_03,
945
822
  valueFontStyle: globalTokens.type_normal,
@@ -981,88 +858,38 @@ var componentTokens = {
981
858
  activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
982
859
  activeSelectionIndicatorActionIconColor: globalTokens.hal_black
983
860
  },
984
- V3Select: {
985
- fontFamily: globalTokens.type_sans,
986
- assistiveTextFontColor: globalTokens.hal_black,
987
- assistiveTextFontColorOnDark: globalTokens.hal_white,
988
- assistiveTextFontSize: globalTokens.type_scale_01,
989
- assistiveTextFontStyle: globalTokens.type_normal,
990
- assistiveTextFontWeight: globalTokens.type_regular,
991
- labelFontColor: globalTokens.hal_black,
992
- labelFontColorOnDark: globalTokens.hal_white,
993
- labelFontSize: globalTokens.type_scale_03,
994
- labelFontStyle: globalTokens.type_normal,
995
- labelFontWeight: globalTokens.type_regular,
996
- disabledColor: globalTokens.lighterBlack,
997
- disabledColorOnDark: "#575757",
998
- errorColor: globalTokens.red,
999
- errorColorOnDark: globalTokens.hal_red_l_60,
1000
- optionBackgroundColor: globalTokens.hal_white,
1001
- optionBorderColor: globalTokens.hal_black,
1002
- optionBorderThickness: "0px",
1003
- optionBorderStyle: "solid",
1004
- optionFontColor: globalTokens.hal_black,
1005
- optionFontColorOnDark: globalTokens.hal_white,
1006
- optionFontSize: globalTokens.type_scale_root,
1007
- optionFontStyle: globalTokens.type_normal,
1008
- optionFontWeight: globalTokens.type_regular,
1009
- optionPaddingBottom: "6px",
1010
- optionPaddingTop: "6px",
1011
- scrollBarThumbColor: globalTokens.hal_grey_s_40,
1012
- scrollBarTrackColor: globalTokens.lightGrey,
1013
- optionIconColor: globalTokens.hal_black,
1014
- optionIconColorOnDark: globalTokens.hal_white,
1015
- optionIconSpacing: "12px",
1016
- optionIconSize: "20px",
1017
- optionCheckboxSpacing: "12px",
1018
- hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
1019
- hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
1020
- activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
1021
- activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
1022
- selectedOptionBackgroundColor: globalTokens.lightGrey,
1023
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
1024
- underlineColor: globalTokens.hal_black,
1025
- underlineColorOnDark: globalTokens.hal_white,
1026
- underlineFocusColor: globalTokens.hal_black,
1027
- underlineFocusColorOnDark: globalTokens.hal_white,
1028
- underlineThickness: "1px",
1029
- valueFontColor: globalTokens.hal_black,
1030
- valueFontColorOnDark: globalTokens.hal_white,
1031
- valueFontSize: globalTokens.type_scale_03,
1032
- valueFontStyle: globalTokens.type_normal,
1033
- valueFontWeight: globalTokens.type_regular,
1034
- valueIconColor: globalTokens.hal_black,
1035
- valueIconColorOnDark: globalTokens.hal_white,
1036
- valueIconSize: "20px",
1037
- valueIconSpacing: "12px",
1038
- arrowColor: globalTokens.hal_black,
1039
- arrowColorOnDark: globalTokens.hal_white,
1040
- focusColor: globalTokens.hal_blue_l_50,
1041
- focusColorOnDark: globalTokens.hal_blue_l_50
1042
- },
1043
861
  sidenav: {
1044
862
  backgroundColor: globalTokens.hal_grey_l_95,
1045
- arrowContainerColor: globalTokens.hal_grey_l_90,
1046
- arrowColor: globalTokens.hal_black,
1047
863
  titleFontFamily: globalTokens.type_sans,
1048
- titleFontSize: globalTokens.type_scale_05,
864
+ titleFontSize: globalTokens.type_scale_04,
1049
865
  titleFontStyle: globalTokens.type_normal,
1050
- titleFontWeight: globalTokens.type_regular,
1051
- titleFontColor: globalTokens.hal_black,
866
+ titleFontWeight: globalTokens.type_semibold,
867
+ titleFontColor: globalTokens.color_grey_800,
1052
868
  titleFontTextTransform: "none",
1053
869
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
1054
- subtitleFontFamily: globalTokens.type_sans,
1055
- subtitleFontSize: globalTokens.type_scale_03,
1056
- subtitleFontStyle: globalTokens.type_normal,
1057
- subtitleFontWeight: globalTokens.type_regular,
1058
- subtitleFontColor: globalTokens.color_grey_800,
1059
- subtitleFontTextTransform: globalTokens.type_uppercase,
1060
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
870
+ groupTitleFontFamily: globalTokens.type_sans,
871
+ groupTitleFontSize: globalTokens.type_scale_02,
872
+ groupTitleFontStyle: globalTokens.type_normal,
873
+ groupTitleFontWeight: globalTokens.type_semibold,
874
+ groupTitleFontColor: globalTokens.hal_black,
875
+ groupTitleHoverBackgroundColor: globalTokens.hal_grey_l_90,
876
+ groupTitleActiveBackgroundColor: globalTokens.hal_grey_l_80,
877
+ groupTitleSelectedFontColor: globalTokens.hal_white,
878
+ groupTitleSelectedBackgroundColor: globalTokens.color_grey_800,
879
+ groupTitleSelectedHoverFontColor: globalTokens.hal_white,
880
+ groupTitleSelectedHoverBackgroundColor: globalTokens.color_grey_600,
881
+ groupTitleFontTextTransform: globalTokens.type_uppercase,
882
+ groupTitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
1061
883
  linkFontFamily: globalTokens.type_sans,
1062
884
  linkFontSize: globalTokens.type_scale_02,
1063
885
  linkFontStyle: globalTokens.type_normal,
1064
886
  linkFontWeight: globalTokens.type_regular,
1065
887
  linkFontColor: globalTokens.color_grey_800,
888
+ linkHoverBackgroundColor: globalTokens.hal_grey_l_90,
889
+ linkSelectedFontColor: globalTokens.hal_white,
890
+ linkSelectedBackgroundColor: globalTokens.color_grey_800,
891
+ linkSelectedHoverFontColor: globalTokens.hal_white,
892
+ linkSelectedHoverBackgroundColor: globalTokens.color_grey_600,
1066
893
  linkFontTextTransform: "none",
1067
894
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
1068
895
  linkTextDecoration: globalTokens.type_no_line,
@@ -1071,7 +898,7 @@ var componentTokens = {
1071
898
  linkMarginRight: "16px",
1072
899
  linkMarginLeft: "16px",
1073
900
  linkFocusColor: globalTokens.hal_blue_l_50,
1074
- scrollBarThumbColor: "#66666626",
901
+ scrollBarThumbColor: globalTokens.color_grey_a_200,
1075
902
  scrollBarTrackColor: globalTokens.transparent
1076
903
  },
1077
904
  slider: {
@@ -1130,7 +957,7 @@ var componentTokens = {
1130
957
  trackLineColorOnDark: globalTokens.hal_blue_l_50,
1131
958
  totalLineThickness: "2px",
1132
959
  totalLineVerticalPosition: "50%",
1133
- totalLineColor: globalTokens.hal_grey_l_90,
960
+ totalLineColor: globalTokens.color_grey_a_200,
1134
961
  totalLineColorOnDark: globalTokens.hal_grey_l_75,
1135
962
  disabledThumbVerticalPosition: "10px",
1136
963
  disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
@@ -1149,36 +976,36 @@ var componentTokens = {
1149
976
  inputMarginLeft: globalTokens.type_scale_06
1150
977
  },
1151
978
  spinner: {
1152
- trackCircleColor: "#5f249f",
1153
- trackCircleColorOnDark: "#a46ede",
1154
- totalCircleColor: globalTokens.white,
979
+ trackCircleColor: globalTokens.hal_purple_s_38,
980
+ trackCircleColorOverlay: globalTokens.hal_purple_l_65,
981
+ totalCircleColor: globalTokens.hal_white,
1155
982
  labelFontFamily: globalTokens.type_sans,
1156
983
  labelFontSize: globalTokens.type_scale_02,
1157
984
  labelFontStyle: globalTokens.type_normal,
1158
985
  labelFontWeight: globalTokens.type_regular,
1159
- labelFontColor: globalTokens.black,
1160
- labelFontColorOnDark: globalTokens.white,
986
+ labelFontColor: globalTokens.hal_black,
987
+ labelFontColorOnDark: globalTokens.hal_white,
1161
988
  labelTextAlign: "center",
1162
989
  progressValueFontFamily: globalTokens.type_sans,
1163
990
  progressValueFontSize: globalTokens.type_scale_02,
1164
991
  progressValueFontStyle: globalTokens.type_normal,
1165
992
  progressValueFontWeight: globalTokens.type_bold,
1166
993
  progressValueFontColor: globalTokens.inherit,
1167
- progressValueFontColorOnDark: globalTokens.white,
994
+ progressValueFontColorOnDark: globalTokens.hal_white,
1168
995
  progressValueTextAlign: "center",
1169
- overlayBackgroundColor: globalTokens.black,
996
+ overlayBackgroundColor: globalTokens.hal_black,
1170
997
  overlayOpacity: "0.8",
1171
998
  overlayLabelFontFamily: globalTokens.type_sans,
1172
999
  overlayLabelFontSize: globalTokens.type_scale_02,
1173
1000
  overlayLabelFontStyle: globalTokens.type_normal,
1174
1001
  overlayLabelFontWeight: globalTokens.type_regular,
1175
- overlayLabelFontColor: globalTokens.white,
1002
+ overlayLabelFontColor: globalTokens.hal_white,
1176
1003
  overlayLabelTextAlign: "center",
1177
1004
  overlayProgressValueFontFamily: globalTokens.type_sans,
1178
1005
  overlayProgressValueFontSize: globalTokens.type_scale_02,
1179
1006
  overlayProgressValueFontStyle: globalTokens.type_normal,
1180
1007
  overlayProgressValueFontWeight: globalTokens.type_bold,
1181
- overlayProgressValueFontColor: globalTokens.white,
1008
+ overlayProgressValueFontColor: globalTokens.hal_white,
1182
1009
  overlayProgressValueTextAlign: "center"
1183
1010
  },
1184
1011
  "switch": {
@@ -1208,41 +1035,24 @@ var componentTokens = {
1208
1035
  labelFontColor: globalTokens.hal_black,
1209
1036
  labelFontColorOnDark: globalTokens.hal_white,
1210
1037
  thumbFocusColor: globalTokens.hal_blue_l_50,
1211
- thumbFocusColorOnDark: "#1682FF",
1038
+ thumbFocusColorOnDark: "#1682ff",
1212
1039
  thumbHeight: "24px",
1213
1040
  thumbWidth: "24px",
1214
- thumbShift: "40%",
1041
+ thumbShift: "1.25rem",
1215
1042
  trackHeight: "12px",
1216
- trackWidth: "60px",
1217
- spaceBetweenLabelSwitch: "0px"
1218
- },
1219
- tag: {
1220
- fontFamily: globalTokens.type_sans,
1221
- fontColor: globalTokens.hal_black,
1222
- fontSize: globalTokens.type_scale_02,
1223
- fontStyle: globalTokens.type_normal,
1224
- fontWeight: globalTokens.type_regular,
1225
- labelPaddingTop: "0px",
1226
- labelPaddingBottom: "0px",
1227
- labelPaddingLeft: "16px",
1228
- labelPaddingRight: "16px",
1229
- height: "40px",
1230
- iconColor: globalTokens.hal_white,
1231
- iconSectionWidth: "40px",
1232
- iconHeight: "24px",
1233
- iconWidth: "auto",
1234
- focusColor: globalTokens.hal_blue_l_50
1043
+ trackWidth: "36px",
1044
+ spaceBetweenLabelSwitch: "8px"
1235
1045
  },
1236
1046
  table: {
1237
1047
  rowSeparatorThickness: "1px",
1238
- rowSeparatorStyle: "solid",
1239
- rowSeparatorColor: globalTokens.lightGrey,
1240
- dataBackgroundColor: globalTokens.white,
1048
+ rowSeparatorStyle: globalTokens.border_solid,
1049
+ rowSeparatorColor: globalTokens.hal_grey_l_80,
1050
+ dataBackgroundColor: globalTokens.hal_white,
1241
1051
  dataFontFamily: globalTokens.type_sans,
1242
1052
  dataFontSize: globalTokens.type_scale_02,
1243
1053
  dataFontStyle: globalTokens.type_normal,
1244
1054
  dataFontWeight: globalTokens.type_regular,
1245
- dataFontColor: globalTokens.black,
1055
+ dataFontColor: globalTokens.hal_black,
1246
1056
  dataFontTextTransform: "none",
1247
1057
  dataPaddingTop: "14px",
1248
1058
  dataPaddingBottom: "12px",
@@ -1256,7 +1066,7 @@ var componentTokens = {
1256
1066
  headerFontSize: globalTokens.type_scale_02,
1257
1067
  headerFontStyle: globalTokens.type_normal,
1258
1068
  headerFontWeight: globalTokens.type_regular,
1259
- headerFontColor: globalTokens.white,
1069
+ headerFontColor: globalTokens.hal_white,
1260
1070
  headerFontTextTransform: "none",
1261
1071
  headerPaddingTop: "16px",
1262
1072
  headerPaddingBottom: "16px",
@@ -1264,9 +1074,9 @@ var componentTokens = {
1264
1074
  headerPaddingLeft: "40px",
1265
1075
  headerTextAlign: "left",
1266
1076
  headerTextLineHeight: "normal",
1267
- scrollBarThumbColor: globalTokens.darkGrey,
1268
- scrollBarTrackColor: globalTokens.lightGrey,
1269
- sortIconColor: globalTokens.white
1077
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
1078
+ scrollBarTrackColor: globalTokens.hal_grey_l_80,
1079
+ sortIconColor: globalTokens.hal_white
1270
1080
  },
1271
1081
  tabs: {
1272
1082
  fontFamily: globalTokens.type_sans,
@@ -1274,30 +1084,31 @@ var componentTokens = {
1274
1084
  fontStyle: globalTokens.type_normal,
1275
1085
  fontWeight: globalTokens.type_semibold,
1276
1086
  fontTextTransform: "none",
1277
- selectedBackgroundColor: globalTokens.white,
1278
- selectedFontColor: "#5f249f",
1279
- selectedIconColor: "#5f249f",
1280
- selectedUnderlineColor: "#5f249f",
1087
+ selectedBackgroundColor: globalTokens.hal_white,
1088
+ selectedFontColor: globalTokens.hal_purple_s_38,
1089
+ selectedIconColor: globalTokens.hal_purple_s_38,
1090
+ selectedUnderlineColor: globalTokens.hal_purple_s_38,
1281
1091
  selectedUnderlineThickness: "2px",
1282
- unselectedBackgroundColor: globalTokens.white,
1283
- unselectedFontColor: globalTokens.darkGrey,
1284
- unselectedIconColor: globalTokens.darkGrey,
1285
- disabledFontColor: "#999999",
1286
- disabledIconColor: "#999999",
1092
+ unselectedBackgroundColor: globalTokens.hal_white,
1093
+ unselectedFontColor: globalTokens.hal_grey_s_40,
1094
+ unselectedIconColor: globalTokens.hal_grey_s_40,
1095
+ disabledFontColor: globalTokens.hal_grey_l_60,
1096
+ disabledIconColor: globalTokens.hal_grey_l_60,
1287
1097
  disabledFontStyle: globalTokens.type_normal,
1288
- hoverBackgroundColor: "#f2eafa",
1289
- pressedBackgroundColor: "#e5d5f6",
1098
+ disabledBadgeBackgroundColor: "#0000004d",
1099
+ hoverBackgroundColor: globalTokens.hal_purple_l_95,
1100
+ pressedBackgroundColor: globalTokens.hal_purple_l_90,
1290
1101
  pressedFontWeight: globalTokens.type_semibold,
1291
- dividerColor: globalTokens.mediumGrey,
1102
+ dividerColor: globalTokens.hal_grey_l_75,
1292
1103
  dividerThickness: "1px",
1293
- focusOutline: "#5f249f",
1104
+ focusOutline: globalTokens.hal_purple_s_38,
1294
1105
  scrollButtonsWidth: "48px",
1295
- badgeBackgroundColor: globalTokens.darkRed,
1106
+ badgeBackgroundColor: globalTokens.hal_red_s_41,
1296
1107
  badgeFontFamily: globalTokens.type_sans,
1297
1108
  badgeFontSize: "10px",
1298
1109
  badgeFontStyle: globalTokens.type_normal,
1299
1110
  badgeFontWeight: "500",
1300
- badgeFontColor: globalTokens.white,
1111
+ badgeFontColor: globalTokens.hal_white,
1301
1112
  badgeLetterSpacing: globalTokens.type_spacing_wide_02,
1302
1113
  badgeWidth: "16px",
1303
1114
  badgeHeight: "16px",
@@ -1306,6 +1117,23 @@ var componentTokens = {
1306
1117
  badgeHeightWithNotificationNumber: "17px",
1307
1118
  badgeRadiusWithNotificationNumber: "10px"
1308
1119
  },
1120
+ tag: {
1121
+ fontFamily: globalTokens.type_sans,
1122
+ fontColor: globalTokens.hal_black,
1123
+ fontSize: globalTokens.type_scale_02,
1124
+ fontStyle: globalTokens.type_normal,
1125
+ fontWeight: globalTokens.type_regular,
1126
+ labelPaddingTop: "0px",
1127
+ labelPaddingBottom: "0px",
1128
+ labelPaddingLeft: "16px",
1129
+ labelPaddingRight: "16px",
1130
+ height: "40px",
1131
+ iconColor: globalTokens.hal_white,
1132
+ iconSectionWidth: "40px",
1133
+ iconHeight: "24px",
1134
+ iconWidth: "auto",
1135
+ focusColor: globalTokens.hal_blue_l_50
1136
+ },
1309
1137
  textarea: {
1310
1138
  fontFamily: globalTokens.type_sans,
1311
1139
  enabledBorderColor: globalTokens.hal_black,
@@ -1343,7 +1171,7 @@ var componentTokens = {
1343
1171
  helperTextLineHeight: globalTokens.type_leading_normal,
1344
1172
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1345
1173
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1346
- placeholderFontColor: "#000000b3",
1174
+ placeholderFontColor: globalTokens.color_grey_a_800,
1347
1175
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1348
1176
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1349
1177
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -1355,40 +1183,98 @@ var componentTokens = {
1355
1183
  disabledValueFontColor: globalTokens.hal_grey_l_60,
1356
1184
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1357
1185
  },
1358
- V3Textarea: {
1186
+ textInput: {
1359
1187
  fontFamily: globalTokens.type_sans,
1360
- assistiveTextFontSize: globalTokens.type_scale_01,
1361
- assistiveTextFontStyle: globalTokens.type_normal,
1362
- assistiveTextFontWeight: globalTokens.type_regular,
1363
- assistiveTextFontColor: globalTokens.black,
1364
- assistiveTextFontColorOnDark: globalTokens.white,
1365
- assistiveTextLetterSpacing: "0.03333em",
1366
- disabledColor: globalTokens.lighterBlack,
1367
- disabledColorOnDark: "#575757",
1368
- errorColor: globalTokens.red,
1369
- errorColorOnDark: globalTokens.hal_red_l_60,
1370
- scrollBarThumbColor: globalTokens.darkGrey,
1371
- scrollBarThumbColorOnDark: globalTokens.white,
1372
- scrollBarTrackColor: globalTokens.lightGrey,
1373
- scrollBarTrackColorOnDark: "#999999",
1374
- labelFontSize: globalTokens.type_scale_03,
1188
+ enabledBorderColor: globalTokens.hal_black,
1189
+ enabledBorderColorOnDark: globalTokens.hal_white,
1190
+ hoverBorderColor: globalTokens.hal_purple_l_65,
1191
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
1192
+ focusBorderColor: globalTokens.hal_blue_l_50,
1193
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
1194
+ disabledBorderColor: globalTokens.hal_grey_l_60,
1195
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
1196
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
1197
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1198
+ errorBorderColor: globalTokens.hal_red_s_41,
1199
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
1200
+ hoverErrorBorderColor: globalTokens.color_red_600,
1201
+ hoverErrorBorderColorOnDark: "#fe677b",
1202
+ inputMarginTop: globalTokens.spacing_02,
1203
+ inputMarginBottom: globalTokens.spacing_02,
1204
+ errorMessageColor: globalTokens.hal_red_s_41,
1205
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
1206
+ errorIconColor: globalTokens.hal_red_s_41,
1207
+ errorIconColorOnDark: globalTokens.hal_red_l_60,
1208
+ labelFontColor: globalTokens.hal_black,
1209
+ labelFontColorOnDark: globalTokens.hal_white,
1210
+ labelFontSize: globalTokens.type_scale_02,
1375
1211
  labelFontStyle: globalTokens.type_normal,
1376
- labelFontWeight: globalTokens.type_regular,
1377
- labelFontColor: globalTokens.black,
1378
- labelFontColorOnDark: globalTokens.white,
1379
- labelLetterSpacing: "0.00938em",
1212
+ labelFontWeight: globalTokens.type_semibold,
1213
+ labelLineHeight: globalTokens.type_leading_loose_01,
1214
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1215
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1216
+ optionalLabelFontWeight: globalTokens.type_regular,
1217
+ helperTextFontColor: globalTokens.hal_black,
1218
+ helperTextFontColorOnDark: globalTokens.hal_white,
1219
+ helperTextFontSize: globalTokens.type_scale_01,
1220
+ helperTextFontStyle: globalTokens.type_normal,
1221
+ helperTextFontWeight: globalTokens.type_regular,
1222
+ helperTextLineHeight: globalTokens.type_leading_normal,
1223
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1224
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1225
+ prefixColor: globalTokens.hal_grey_s_40,
1226
+ prefixColorOnDark: globalTokens.hal_white,
1227
+ suffixColor: globalTokens.hal_grey_s_40,
1228
+ suffixColorOnDark: globalTokens.hal_white,
1229
+ disabledPrefixColor: globalTokens.hal_grey_l_75,
1230
+ disabledSuffixColor: globalTokens.hal_grey_l_75,
1231
+ disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
1232
+ disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
1233
+ placeholderFontColor: globalTokens.color_grey_a_800,
1234
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1235
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1236
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
1237
+ valueFontColor: globalTokens.hal_black,
1238
+ valueFontColorOnDark: globalTokens.hal_white,
1380
1239
  valueFontSize: globalTokens.type_scale_03,
1381
1240
  valueFontStyle: globalTokens.type_normal,
1382
1241
  valueFontWeight: globalTokens.type_regular,
1383
- valueFontColor: globalTokens.black,
1384
- valueFontColorOnDark: globalTokens.white,
1385
- valueLetterSpacing: globalTokens.type_spacing_normal,
1386
- valueLineHeight: "1.1875em",
1387
- underlineColor: globalTokens.black,
1388
- underlineColorOnDark: globalTokens.white,
1389
- underlineFocusColor: globalTokens.black,
1390
- underlineFocusColorOnDark: globalTokens.white,
1391
- underlineThickness: "1px"
1242
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
1243
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
1244
+ actionIconColor: globalTokens.hal_black,
1245
+ actionIconColorOnDark: globalTokens.hal_white,
1246
+ disabledActionIconColor: globalTokens.hal_grey_l_60,
1247
+ disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
1248
+ hoverActionIconColor: globalTokens.hal_black,
1249
+ hoverActionIconColorOnDark: globalTokens.hal_white,
1250
+ focusActionIconColor: globalTokens.hal_black,
1251
+ focusActionIconColorOnDark: globalTokens.hal_white,
1252
+ activeActionIconColor: globalTokens.hal_black,
1253
+ activeActionIconColorOnDark: globalTokens.hal_black,
1254
+ actionBackgroundColor: globalTokens.transparent,
1255
+ actionBackgroundColorOnDark: globalTokens.transparent,
1256
+ disabledActionBackgroundColor: globalTokens.transparent,
1257
+ disabledActionBackgroundColorOnDark: globalTokens.transparent,
1258
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
1259
+ hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
1260
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
1261
+ focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
1262
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
1263
+ activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
1264
+ listDialogBackgroundColor: globalTokens.hal_white,
1265
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
1266
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
1267
+ listOptionFontColor: globalTokens.hal_black,
1268
+ listOptionFontSize: globalTokens.type_scale_02,
1269
+ listOptionFontStyle: globalTokens.type_normal,
1270
+ listOptionFontWeight: globalTokens.type_regular,
1271
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
1272
+ errorListDialogFontColor: globalTokens.hal_black,
1273
+ errorListDialogBackgroundColor: globalTokens.color_red_50,
1274
+ errorListDialogBorderColor: globalTokens.hal_red_s_41,
1275
+ hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
1276
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
1277
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50
1392
1278
  },
1393
1279
  toggleGroup: {
1394
1280
  containerBackgroundColor: globalTokens.color_grey_50,
@@ -1438,121 +1324,65 @@ var componentTokens = {
1438
1324
  containerBorderRadius: globalTokens.border_radius_large,
1439
1325
  optionFocusBorderThickness: globalTokens.border_width_2
1440
1326
  },
1441
- upload: {
1442
- fontFamily: globalTokens.type_sans,
1443
- shadowColor: globalTokens.lightWhite,
1444
- scrollBarThumbColor: globalTokens.darkGrey,
1445
- scrollBarTrackColor: globalTokens.lightGrey,
1446
- errorColor: globalTokens.red,
1447
- backgroundColor: globalTokens.white,
1448
- draggingStateBackgroundColor: globalTokens.lightWhite,
1449
- dragAndDropIconColor: globalTokens.black,
1450
- dragAndDropIconSize: "43.5px",
1451
- dragAndDropTitleFontSize: globalTokens.type_scale_04,
1452
- dragAndDropTitleFontStyle: globalTokens.type_normal,
1453
- dragAndDropTitleFontWeight: globalTokens.type_bold,
1454
- dragAndDropTitleFontTextTransform: "none",
1455
- dragAndDropTitleFontColor: globalTokens.black,
1456
- dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1457
- dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1458
- dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1459
- dragAndDropDescriptionFontTextTransform: "none",
1460
- dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1461
- dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1462
- dragAndDropDraggingStateIconSize: "74.5px",
1463
- dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1464
- dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1465
- dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1466
- dragAndDropDraggingStateFontTextTransform: "none",
1467
- dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1468
- dragAndDropAreaIconColor: globalTokens.darkGrey,
1469
- dragAndDropAreaIconSize: "24px",
1470
- dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1471
- dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1472
- dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1473
- dragAndDropAreaTextFontTextTransform: "none",
1474
- dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1475
- fileDeleteIconColor: globalTokens.black,
1476
- fileDeleteIconSize: "30px",
1477
- fileUnderlineColor: globalTokens.lightGrey,
1478
- fileUnderlineThickness: "1px",
1479
- fileNameFontSize: globalTokens.type_scale_03,
1480
- fileNameFontStyle: globalTokens.type_normal,
1481
- fileNameFontWeight: globalTokens.type_regular,
1482
- fileNameFontTextTransform: "none",
1483
- fileNameFontColor: globalTokens.black,
1484
- fileTypeFontSize: globalTokens.type_scale_01,
1485
- fileTypeFontStyle: globalTokens.type_normal,
1486
- fileTypeFontWeight: globalTokens.type_regular,
1487
- fileTypeFontTextTransform: globalTokens.type_uppercase,
1488
- fileTypeFontColor: globalTokens.darkGrey,
1489
- hoverFileColor: globalTokens.darkWhite,
1490
- uploadedFileIconColor: globalTokens.lightGrey,
1491
- uploadedFileIconSize: "24px",
1492
- uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1493
- uploadedFilesTitleFontStyle: globalTokens.type_normal,
1494
- uploadedFilesTitleFontWeight: globalTokens.type_regular,
1495
- uploadedFilesTitleFontTextTransform: "none",
1496
- uploadedFilesTitleFontColor: globalTokens.black,
1497
- uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1498
- uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1499
- uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1500
- uploadedFilesSubtitleFontTextTransform: "none",
1501
- uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1502
- uploadedFilesNumberFontWeight: globalTokens.type_bold
1503
- },
1504
1327
  wizard: {
1505
- disabledBackgroundColor: globalTokens.lightGrey,
1506
- disabledFontColor: globalTokens.darkGrey,
1507
- stepContainerFontSize: globalTokens.type_scale_03,
1508
- stepContainerFontFamily: globalTokens.type_sans,
1509
- stepContainerFontStyle: globalTokens.type_normal,
1510
- stepContainerFontWeight: globalTokens.type_regular,
1511
- stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1512
- stepContainerFontColor: globalTokens.black,
1513
- stepContainerSelectedFontColor: globalTokens.white,
1514
- stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1515
- stepContainerBackgroundColor: globalTokens.white,
1516
- stepContainerIconSize: "19px",
1328
+ visitedStepFontColor: globalTokens.hal_black,
1329
+ visitedStepBackgroundColor: globalTokens.hal_white,
1330
+ visitedStepBorderColor: globalTokens.hal_black,
1331
+ unvisitedStepFontColor: globalTokens.hal_grey_s_40,
1332
+ unvisitedLabelFontColor: globalTokens.hal_grey_s_40,
1333
+ unvisitedHelperTextFontColor: globalTokens.hal_grey_s_40,
1334
+ unvisitedStepBackgroundColor: globalTokens.transparent,
1335
+ unvisitedStepBorderColor: globalTokens.hal_grey_s_40,
1336
+ selectedStepFontColor: globalTokens.hal_white,
1337
+ selectedStepBackgroundColor: globalTokens.hal_purple_s_38,
1338
+ selectedStepBorderColor: globalTokens.hal_purple_s_38,
1339
+ selectedLabelFontColor: globalTokens.hal_black,
1340
+ selectedHelperTextFontColor: globalTokens.hal_black,
1341
+ selectedStepWidth: "32px",
1342
+ selectedStepHeight: "32px",
1343
+ selectedStepBorderThickness: "2px",
1344
+ selectedStepBorderStyle: globalTokens.border_solid,
1345
+ selectedStepBorderRadius: "45px",
1346
+ stepFontSize: globalTokens.type_scale_03,
1347
+ stepFontFamily: globalTokens.type_sans,
1348
+ stepFontStyle: globalTokens.type_normal,
1349
+ stepFontWeight: globalTokens.type_regular,
1350
+ stepFontTracking: globalTokens.type_spacing_wide_02,
1351
+ stepIconSize: "20px",
1352
+ stepWidth: "32px",
1353
+ stepHeight: "32px",
1354
+ stepBorderThickness: "2px",
1355
+ stepBorderStyle: globalTokens.border_solid,
1356
+ stepBorderRadius: "45px",
1357
+ visitedLabelFontColor: globalTokens.hal_black,
1517
1358
  labelFontSize: globalTokens.type_scale_03,
1518
1359
  labelFontFamily: globalTokens.type_sans,
1519
1360
  labelFontStyle: globalTokens.type_normal,
1520
1361
  labelFontWeight: globalTokens.type_regular,
1521
- labelLetterSpacing: globalTokens.type_spacing_normal,
1362
+ labelFontTracking: globalTokens.type_spacing_normal,
1522
1363
  labelFontTextTransform: "none",
1523
1364
  labelTextAlign: "left",
1524
- labelFontColor: globalTokens.darkGrey,
1525
- visitedLabelFontColor: globalTokens.black,
1526
- visitedDescriptionFontColor: globalTokens.black,
1527
- descriptionFontSize: globalTokens.type_scale_01,
1528
- descriptionFontFamily: globalTokens.type_sans,
1529
- descriptionFontStyle: globalTokens.type_normal,
1530
- descriptionFontWeight: globalTokens.type_regular,
1531
- descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1532
- descriptionFontTextTransform: "none",
1533
- descriptionFontColor: globalTokens.darkGrey,
1534
- descriptionTextAlign: "left",
1535
- circleWidth: "32px",
1536
- circleHeight: "32px",
1537
- circleBorderThickness: "2px",
1538
- circleBorderStyle: "solid",
1539
- circleBorderRadius: "45px",
1540
- circleBorderColor: globalTokens.black,
1541
- selectedCircleWidth: "32px",
1542
- selectedCircleHeight: "32px",
1543
- selectedCircleBorderThickness: "2px",
1544
- selectedCircleBorderStyle: "solid",
1545
- selectedCircleBorderRadius: "45px",
1546
- selectedCircleBorderColor: globalTokens.purple,
1547
- disabledCircleWidth: "32px",
1548
- disabledCircleHeight: "32px",
1549
- disabledCircleBorderThickness: "2px",
1550
- disabledCircleBorderStyle: "solid",
1551
- disabledCircleBorderRadius: "45px",
1552
- disabledCircleBorderColor: globalTokens.lightGrey,
1365
+ helperTextFontSize: globalTokens.type_scale_02,
1366
+ helperTextFontFamily: globalTokens.type_sans,
1367
+ helperTextFontStyle: globalTokens.type_normal,
1368
+ helperTextFontWeight: globalTokens.type_regular,
1369
+ helperTextFontTracking: globalTokens.type_spacing_normal,
1370
+ helperTextFontTextTransform: "none",
1371
+ visitedHelperTextFontColor: globalTokens.hal_black,
1372
+ helperTextTextAlign: "left",
1373
+ disabledStepBackgroundColor: globalTokens.hal_grey_l_95,
1374
+ disabledStepFontColor: globalTokens.hal_grey_l_60,
1375
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1376
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1377
+ disabledStepBorderColor: globalTokens.hal_grey_l_95,
1378
+ disabledStepWidth: "32px",
1379
+ disabledStepHeight: "32px",
1380
+ disabledStepBorderThickness: "2px",
1381
+ disabledStepBorderStyle: globalTokens.border_solid,
1382
+ disabledStepBorderRadius: "45px",
1553
1383
  separatorBorderThickness: "1px",
1554
- separatorBorderStyle: "solid",
1555
- separatorColor: globalTokens.lightGrey,
1384
+ separatorBorderStyle: globalTokens.border_solid,
1385
+ separatorColor: globalTokens.hal_grey_s_40,
1556
1386
  focusColor: globalTokens.hal_blue_l_50
1557
1387
  }
1558
1388
  };
@@ -1568,44 +1398,107 @@ var spaces = {
1568
1398
  };
1569
1399
  exports.spaces = spaces;
1570
1400
  var responsiveSizes = {
1571
- mobileSmall: "320",
1572
- mobileMedium: "375",
1573
- mobileLarge: "425",
1574
- tablet: "768",
1575
- laptop: "1024",
1576
- desktop: "1440"
1401
+ xsmall: "20",
1402
+ small: "30",
1403
+ medium: "45",
1404
+ large: "66",
1405
+ xlarge: "90"
1577
1406
  };
1578
1407
  exports.responsiveSizes = responsiveSizes;
1579
- var typeface = {
1580
- body: {
1581
- fontSize: "16px",
1582
- letterSpacing: "0.5",
1583
- textTransform: "initial"
1408
+ var defaultTranslatedComponentLabels = {
1409
+ formFields: {
1410
+ optionalLabel: "(Optional)",
1411
+ requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
1412
+ requiredValueErrorMessage: "This field is required. Please, enter a value.",
1413
+ formatRequestedErrorMessage: "Please match the format requested.",
1414
+ lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
1415
+ return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
1416
+ },
1417
+ logoAlternativeText: "Logo"
1418
+ },
1419
+ applicationLayout: {
1420
+ visibilityToggleTitle: "Toggle visibility sidenav"
1584
1421
  },
1585
- altBody: {
1586
- fontSize: "14px",
1587
- letterSpacing: "0.25",
1588
- textTransform: "initial"
1422
+ alert: {
1423
+ infoTitleText: "information",
1424
+ successTitleText: "success",
1425
+ warningTitleText: "warning",
1426
+ errorTitleText: "error"
1427
+ },
1428
+ dateInput: {
1429
+ invalidDateErrorMessage: "Invalid date."
1589
1430
  },
1590
- subtitle: {
1591
- fontSize: "16px",
1592
- letterSpacing: "0.15",
1593
- textTransform: "initial"
1431
+ dialog: {
1432
+ closeIconAriaLabel: "Close dialog"
1594
1433
  },
1595
- altSubtitle: {
1596
- fontSize: "14px",
1597
- letterSpacing: "0.1",
1598
- textTransform: "initial"
1434
+ fileInput: {
1435
+ fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1436
+ fileSizeLessThanErrorMessage: "File size must be less than max size.",
1437
+ multipleButtonLabelDefault: "Select files",
1438
+ singleButtonLabelDefault: "Select file",
1439
+ dropAreaButtonLabelDefault: "Select",
1440
+ multipleDropAreaLabelDefault: "or drop files",
1441
+ singleDropAreaLabelDefault: "or drop a file",
1442
+ deleteFileActionTitle: "Remove file"
1599
1443
  },
1600
- caption: {
1601
- fontSize: "12px",
1602
- letterSpacing: "0.4",
1603
- textTransform: "initial"
1444
+ footer: {
1445
+ copyrightText: function copyrightText(year) {
1446
+ return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
1447
+ }
1448
+ },
1449
+ header: {
1450
+ closeIcon: "Close menu",
1451
+ hamburguerTitle: "Menu"
1452
+ },
1453
+ numberInput: {
1454
+ valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
1455
+ return "Value must be greater than or equal to ".concat(value, ".");
1456
+ },
1457
+ valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
1458
+ return "Value must be less than or equal to ".concat(value, ".");
1459
+ },
1460
+ decrementValueTitle: "Decrement value",
1461
+ incrementValueTitle: "Increment value"
1462
+ },
1463
+ paginator: {
1464
+ itemsPerPageText: "Items per page: ",
1465
+ minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
1466
+ return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
1467
+ },
1468
+ goToPageText: "Go to page:",
1469
+ pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
1470
+ return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
1471
+ }
1472
+ },
1473
+ passwordInput: {
1474
+ inputShowPasswordTitle: "Show password",
1475
+ inputHidePasswordTitle: "Hide password"
1476
+ },
1477
+ quickNav: {
1478
+ contentTitle: "Contents"
1479
+ },
1480
+ radioGroup: {
1481
+ optionalItemLabelDefault: "N/A"
1482
+ },
1483
+ select: {
1484
+ noMatchesErrorMessage: "No matches found",
1485
+ actionClearSelectionTitle: "Clear selection",
1486
+ actionClearSearchTitle: "Clear search"
1487
+ },
1488
+ tabs: {
1489
+ scrollLeft: "Scroll left",
1490
+ scrollRight: "Scroll right"
1491
+ },
1492
+ textInput: {
1493
+ clearFieldActionTitle: "Clear field",
1494
+ searchingMessage: "Searching...",
1495
+ fetchingDataErrorMessage: "Error fetching data"
1604
1496
  },
1605
- overline: {
1606
- fontSize: "12px",
1607
- letterSpacing: "2",
1608
- textTransform: "uppercase"
1497
+ calendar: {
1498
+ daysShort: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
1499
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1500
+ previousMonthTitle: "Previous month",
1501
+ nextMonthTitle: "Next month"
1609
1502
  }
1610
1503
  };
1611
- exports.typeface = typeface;
1504
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;