@dxc-technology/halstack-react 0.0.0-9179a3a → 0.0.0-918d2c8

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