@dxc-technology/halstack-react 0.0.0-3716032 → 0.0.0-38267fd

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 (291) hide show
  1. package/BackgroundColorContext.js +0 -1
  2. package/HalstackContext.d.ts +12 -0
  3. package/HalstackContext.js +343 -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/bleed/Bleed.d.ts +3 -0
  21. package/bleed/Bleed.js +51 -0
  22. package/bleed/Bleed.stories.tsx +341 -0
  23. package/bleed/types.d.ts +37 -0
  24. package/bleed/types.js +5 -0
  25. package/box/Box.js +23 -35
  26. package/box/Box.stories.tsx +15 -0
  27. package/box/Box.test.js +18 -0
  28. package/box/types.d.ts +1 -0
  29. package/bulleted-list/BulletedList.d.ts +7 -0
  30. package/bulleted-list/BulletedList.js +123 -0
  31. package/bulleted-list/BulletedList.stories.tsx +200 -0
  32. package/bulleted-list/types.d.ts +11 -0
  33. package/bulleted-list/types.js +5 -0
  34. package/button/Button.d.ts +1 -1
  35. package/button/Button.js +54 -79
  36. package/button/Button.stories.tsx +163 -14
  37. package/button/Button.test.js +35 -0
  38. package/button/types.d.ts +8 -12
  39. package/card/Card.js +24 -27
  40. package/card/Card.stories.tsx +1 -1
  41. package/card/Card.test.js +50 -0
  42. package/card/types.d.ts +1 -0
  43. package/checkbox/Checkbox.d.ts +2 -2
  44. package/checkbox/Checkbox.js +106 -109
  45. package/checkbox/Checkbox.stories.tsx +198 -130
  46. package/checkbox/Checkbox.test.js +155 -0
  47. package/checkbox/types.d.ts +13 -5
  48. package/chip/Chip.d.ts +1 -1
  49. package/chip/Chip.js +20 -64
  50. package/chip/Chip.stories.tsx +98 -13
  51. package/chip/Chip.test.js +56 -0
  52. package/chip/types.d.ts +5 -13
  53. package/common/variables.js +514 -584
  54. package/date-input/Calendar.d.ts +4 -0
  55. package/date-input/Calendar.js +258 -0
  56. package/date-input/DateInput.js +171 -260
  57. package/date-input/DateInput.stories.tsx +199 -33
  58. package/date-input/DateInput.test.js +835 -0
  59. package/date-input/DatePicker.d.ts +4 -0
  60. package/date-input/DatePicker.js +146 -0
  61. package/date-input/Icons.d.ts +6 -0
  62. package/date-input/Icons.js +75 -0
  63. package/date-input/YearPicker.d.ts +4 -0
  64. package/date-input/YearPicker.js +126 -0
  65. package/date-input/types.d.ts +67 -9
  66. package/dialog/Dialog.js +75 -92
  67. package/dialog/Dialog.stories.tsx +230 -123
  68. package/dialog/Dialog.test.js +369 -0
  69. package/dialog/types.d.ts +3 -2
  70. package/dropdown/Dropdown.d.ts +1 -1
  71. package/dropdown/Dropdown.js +248 -277
  72. package/dropdown/Dropdown.stories.tsx +255 -64
  73. package/dropdown/Dropdown.test.js +585 -0
  74. package/dropdown/DropdownMenu.d.ts +4 -0
  75. package/dropdown/DropdownMenu.js +70 -0
  76. package/dropdown/DropdownMenuItem.d.ts +4 -0
  77. package/dropdown/DropdownMenuItem.js +81 -0
  78. package/dropdown/types.d.ts +29 -18
  79. package/file-input/FileInput.d.ts +2 -2
  80. package/file-input/FileInput.js +180 -222
  81. package/file-input/FileInput.stories.tsx +122 -10
  82. package/file-input/FileInput.test.js +457 -0
  83. package/file-input/FileItem.d.ts +4 -14
  84. package/file-input/FileItem.js +44 -66
  85. package/file-input/types.d.ts +17 -0
  86. package/flex/Flex.d.ts +4 -0
  87. package/flex/Flex.js +69 -0
  88. package/flex/Flex.stories.tsx +103 -0
  89. package/flex/types.d.ts +32 -0
  90. package/flex/types.js +5 -0
  91. package/footer/Footer.js +24 -99
  92. package/footer/Footer.stories.tsx +99 -1
  93. package/footer/Footer.test.js +109 -0
  94. package/footer/Icons.js +1 -1
  95. package/footer/types.d.ts +2 -1
  96. package/header/Header.js +107 -128
  97. package/header/Header.stories.tsx +189 -36
  98. package/header/Header.test.js +79 -0
  99. package/header/Icons.js +2 -2
  100. package/header/types.d.ts +3 -2
  101. package/heading/Heading.stories.tsx +3 -2
  102. package/heading/Heading.test.js +186 -0
  103. package/inset/Inset.d.ts +3 -0
  104. package/inset/Inset.js +51 -0
  105. package/inset/Inset.stories.tsx +229 -0
  106. package/inset/types.d.ts +37 -0
  107. package/inset/types.js +5 -0
  108. package/layout/ApplicationLayout.d.ts +16 -6
  109. package/layout/ApplicationLayout.js +71 -125
  110. package/layout/ApplicationLayout.stories.tsx +84 -93
  111. package/layout/Icons.d.ts +5 -0
  112. package/layout/Icons.js +13 -2
  113. package/layout/SidenavContext.d.ts +5 -0
  114. package/layout/SidenavContext.js +19 -0
  115. package/layout/types.d.ts +18 -33
  116. package/link/Link.d.ts +3 -2
  117. package/link/Link.js +61 -86
  118. package/link/Link.stories.tsx +159 -52
  119. package/link/Link.test.js +83 -0
  120. package/link/types.d.ts +9 -29
  121. package/main.d.ts +11 -15
  122. package/main.js +53 -79
  123. package/nav-tabs/NavTabs.d.ts +8 -0
  124. package/nav-tabs/NavTabs.js +125 -0
  125. package/nav-tabs/NavTabs.stories.tsx +260 -0
  126. package/nav-tabs/NavTabs.test.js +82 -0
  127. package/nav-tabs/Tab.d.ts +4 -0
  128. package/nav-tabs/Tab.js +150 -0
  129. package/nav-tabs/types.d.ts +53 -0
  130. package/nav-tabs/types.js +5 -0
  131. package/number-input/NumberInput.js +11 -18
  132. package/number-input/NumberInput.stories.tsx +5 -5
  133. package/number-input/NumberInput.test.js +542 -0
  134. package/number-input/types.d.ts +17 -10
  135. package/package.json +21 -22
  136. package/paginator/Icons.d.ts +5 -0
  137. package/paginator/Icons.js +16 -28
  138. package/paginator/Paginator.js +19 -46
  139. package/paginator/Paginator.stories.tsx +24 -0
  140. package/paginator/Paginator.test.js +315 -0
  141. package/paragraph/Paragraph.d.ts +6 -0
  142. package/paragraph/Paragraph.js +38 -0
  143. package/paragraph/Paragraph.stories.tsx +44 -0
  144. package/password-input/PasswordInput.js +7 -4
  145. package/password-input/PasswordInput.stories.tsx +3 -3
  146. package/password-input/PasswordInput.test.js +181 -0
  147. package/password-input/types.d.ts +14 -11
  148. package/progress-bar/ProgressBar.d.ts +2 -2
  149. package/progress-bar/ProgressBar.js +60 -54
  150. package/progress-bar/ProgressBar.stories.jsx +47 -12
  151. package/progress-bar/ProgressBar.test.js +110 -0
  152. package/progress-bar/types.d.ts +3 -4
  153. package/quick-nav/QuickNav.d.ts +4 -0
  154. package/quick-nav/QuickNav.js +117 -0
  155. package/quick-nav/QuickNav.stories.tsx +356 -0
  156. package/quick-nav/types.d.ts +21 -0
  157. package/quick-nav/types.js +5 -0
  158. package/radio-group/Radio.d.ts +4 -0
  159. package/radio-group/Radio.js +156 -0
  160. package/radio-group/RadioGroup.d.ts +4 -0
  161. package/radio-group/RadioGroup.js +283 -0
  162. package/radio-group/RadioGroup.stories.tsx +214 -0
  163. package/radio-group/RadioGroup.test.js +722 -0
  164. package/radio-group/types.d.ts +114 -0
  165. package/radio-group/types.js +5 -0
  166. package/resultsetTable/Icons.d.ts +7 -0
  167. package/resultsetTable/Icons.js +51 -0
  168. package/resultsetTable/ResultsetTable.js +49 -105
  169. package/resultsetTable/ResultsetTable.stories.tsx +56 -32
  170. package/resultsetTable/ResultsetTable.test.js +325 -0
  171. package/resultsetTable/types.d.ts +2 -2
  172. package/select/Icons.d.ts +10 -0
  173. package/select/Icons.js +93 -0
  174. package/select/Listbox.d.ts +4 -0
  175. package/select/Listbox.js +169 -0
  176. package/select/Option.d.ts +4 -0
  177. package/select/Option.js +97 -0
  178. package/select/Select.js +183 -382
  179. package/select/Select.stories.tsx +600 -201
  180. package/select/Select.test.js +2228 -0
  181. package/select/types.d.ts +53 -13
  182. package/sidenav/Sidenav.d.ts +6 -5
  183. package/sidenav/Sidenav.js +182 -52
  184. package/sidenav/Sidenav.stories.tsx +249 -132
  185. package/sidenav/Sidenav.test.js +44 -0
  186. package/sidenav/types.d.ts +50 -27
  187. package/slider/Slider.d.ts +2 -2
  188. package/slider/Slider.js +122 -96
  189. package/slider/Slider.stories.tsx +72 -9
  190. package/slider/Slider.test.js +250 -0
  191. package/slider/types.d.ts +10 -2
  192. package/spinner/Spinner.js +3 -3
  193. package/spinner/Spinner.stories.jsx +27 -0
  194. package/spinner/Spinner.test.js +64 -0
  195. package/switch/Switch.d.ts +2 -2
  196. package/switch/Switch.js +150 -67
  197. package/switch/Switch.stories.tsx +54 -43
  198. package/switch/Switch.test.js +225 -0
  199. package/switch/types.d.ts +12 -4
  200. package/table/Table.js +1 -1
  201. package/table/Table.stories.jsx +81 -1
  202. package/table/Table.test.js +26 -0
  203. package/tabs/Tab.d.ts +4 -0
  204. package/tabs/Tab.js +133 -0
  205. package/tabs/Tabs.d.ts +1 -1
  206. package/tabs/Tabs.js +364 -110
  207. package/tabs/Tabs.stories.tsx +122 -17
  208. package/tabs/Tabs.test.js +351 -0
  209. package/tabs/types.d.ts +39 -17
  210. package/tag/Tag.d.ts +1 -1
  211. package/tag/Tag.js +18 -28
  212. package/tag/Tag.stories.tsx +38 -28
  213. package/tag/Tag.test.js +60 -0
  214. package/tag/types.d.ts +23 -14
  215. package/text-input/Icons.d.ts +8 -0
  216. package/text-input/Icons.js +60 -0
  217. package/text-input/Suggestion.d.ts +4 -0
  218. package/text-input/Suggestion.js +84 -0
  219. package/text-input/Suggestions.d.ts +4 -0
  220. package/text-input/Suggestions.js +134 -0
  221. package/text-input/TextInput.js +219 -332
  222. package/text-input/TextInput.stories.tsx +309 -196
  223. package/text-input/TextInput.test.js +1724 -0
  224. package/text-input/types.d.ts +51 -13
  225. package/textarea/Textarea.js +20 -27
  226. package/textarea/Textarea.stories.jsx +96 -15
  227. package/textarea/Textarea.test.js +437 -0
  228. package/textarea/types.d.ts +18 -11
  229. package/toggle-group/ToggleGroup.d.ts +1 -1
  230. package/toggle-group/ToggleGroup.js +5 -4
  231. package/toggle-group/ToggleGroup.stories.tsx +46 -4
  232. package/toggle-group/ToggleGroup.test.js +156 -0
  233. package/toggle-group/types.d.ts +9 -1
  234. package/typography/Typography.d.ts +4 -0
  235. package/typography/Typography.js +131 -0
  236. package/typography/Typography.stories.tsx +198 -0
  237. package/typography/types.d.ts +18 -0
  238. package/typography/types.js +5 -0
  239. package/useTheme.js +2 -2
  240. package/useTranslatedLabels.d.ts +2 -0
  241. package/useTranslatedLabels.js +20 -0
  242. package/utils/FocusLock.d.ts +13 -0
  243. package/utils/FocusLock.js +139 -0
  244. package/wizard/Wizard.d.ts +1 -1
  245. package/wizard/Wizard.js +58 -54
  246. package/wizard/Wizard.stories.tsx +48 -19
  247. package/wizard/Wizard.test.js +141 -0
  248. package/wizard/types.d.ts +10 -5
  249. package/ThemeContext.d.ts +0 -15
  250. package/ThemeContext.js +0 -243
  251. package/V3Select/V3Select.js +0 -455
  252. package/V3Select/index.d.ts +0 -27
  253. package/V3Textarea/V3Textarea.js +0 -260
  254. package/V3Textarea/index.d.ts +0 -27
  255. package/common/RequiredComponent.js +0 -32
  256. package/date/Date.js +0 -373
  257. package/date/index.d.ts +0 -27
  258. package/input-text/Icons.js +0 -22
  259. package/input-text/InputText.js +0 -611
  260. package/input-text/index.d.ts +0 -36
  261. package/list/List.d.ts +0 -8
  262. package/list/List.js +0 -47
  263. package/list/List.stories.tsx +0 -85
  264. package/radio/Radio.d.ts +0 -4
  265. package/radio/Radio.js +0 -174
  266. package/radio/Radio.stories.tsx +0 -192
  267. package/radio/types.d.ts +0 -54
  268. package/row/Row.d.ts +0 -11
  269. package/row/Row.js +0 -124
  270. package/row/Row.stories.tsx +0 -223
  271. package/stack/Stack.d.ts +0 -10
  272. package/stack/Stack.js +0 -94
  273. package/stack/Stack.stories.tsx +0 -150
  274. package/text/Text.d.ts +0 -7
  275. package/text/Text.js +0 -30
  276. package/text/Text.stories.tsx +0 -19
  277. package/toggle/Toggle.js +0 -186
  278. package/toggle/index.d.ts +0 -21
  279. package/upload/Upload.js +0 -201
  280. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  281. package/upload/buttons-upload/Icons.js +0 -40
  282. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  283. package/upload/dragAndDropArea/Icons.js +0 -39
  284. package/upload/file-upload/FileToUpload.js +0 -115
  285. package/upload/file-upload/Icons.js +0 -66
  286. package/upload/files-upload/FilesToUpload.js +0 -109
  287. package/upload/index.d.ts +0 -15
  288. package/upload/transaction/Icons.js +0 -160
  289. package/upload/transaction/Transaction.js +0 -104
  290. package/upload/transactions/Transactions.js +0 -94
  291. /package/{radio → badge}/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",
@@ -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,16 @@ 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,
252
- letterSpacing: globalTokens.type_spacing_wide_01,
253
- borderRadius: "4px",
254
- borderThickness: "0px",
255
- borderStyle: "none",
243
+ backgroundColor: globalTokens.hal_white,
244
+ borderRadius: globalTokens.border_radius_medium,
245
+ borderThickness: globalTokens.border_width_0,
246
+ borderStyle: globalTokens.border_none,
256
247
  borderColor: globalTokens.transparent,
257
248
  noneShadowDepthShadowOffsetX: "none",
258
249
  noneShadowDepthShadowOffsetY: "none",
@@ -263,12 +254,21 @@ var componentTokens = {
263
254
  oneShadowDepthShadowOffsetY: "3px",
264
255
  oneShadowDepthShadowBlur: "6px",
265
256
  oneShadowDepthShadowSpread: "0px",
266
- oneShadowDepthShadowColor: "#00000033",
257
+ oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
267
258
  twoShadowDepthShadowOffsetX: "0px",
268
259
  twoShadowDepthShadowOffsetY: "3px",
269
260
  twoShadowDepthShadowBlur: "10px",
270
261
  twoShadowDepthShadowSpread: "0px",
271
- 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"
272
272
  },
273
273
  button: {
274
274
  labelFontLineHeight: globalTokens.type_leading_normal,
@@ -348,7 +348,7 @@ var componentTokens = {
348
348
  backgroundColorChecked: globalTokens.hal_blue_s_35,
349
349
  backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
350
350
  hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
351
- hoverBackgroundColorCheckedOnDark: global.hal_white,
351
+ hoverBackgroundColorCheckedOnDark: globalTokens.hal_white,
352
352
  disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
353
353
  disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
354
354
  borderColor: globalTokens.hal_blue_s_35,
@@ -383,70 +383,71 @@ var componentTokens = {
383
383
  disabledFontColor: globalTokens.hal_grey_l_60,
384
384
  borderColor: globalTokens.transparent,
385
385
  borderRadius: "80px",
386
- borderThickness: "0px",
387
- borderStyle: "solid",
386
+ borderThickness: globalTokens.border_width_0,
387
+ borderStyle: globalTokens.border_solid,
388
388
  contentPaddingLeft: "16px",
389
389
  contentPaddingRight: "16px",
390
390
  contentPaddingTop: "0px",
391
391
  contentPaddingBottom: "0px",
392
392
  iconSize: "24px",
393
393
  iconSpacing: "8px",
394
- iconColor: globalTokens.hal_black,
394
+ iconColor: globalTokens.color_grey_800,
395
+ hoverIconColor: globalTokens.color_grey_a_900,
396
+ activeIconColor: globalTokens.hal_black,
395
397
  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
398
  focusColor: globalTokens.hal_blue_l_50,
411
- fontFamily: globalTokens.type_sans,
412
- pickerHeight: "316px",
413
- pickerWidth: "290px"
399
+ focusBorderStyle: globalTokens.border_solid,
400
+ focusBorderThickness: globalTokens.border_width_2,
401
+ focusBorderRadius: globalTokens.border_radius_medium
414
402
  },
415
403
  dateInput: {
416
- pickerFontFamily: globalTokens.type_sans,
417
404
  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,
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,
428
423
  pickerFocusColor: globalTokens.hal_blue_l_50,
429
- pickerHeight: "316px",
430
- 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
431
433
  },
432
434
  dialog: {
433
- overlayColor: globalTokens.hal_black,
435
+ overlayColor: globalTokens.color_grey_a_800,
434
436
  backgroundColor: globalTokens.hal_white,
435
437
  closeIconWidth: "24px",
436
438
  closeIconHeight: "24px",
437
439
  closeIconTopPosition: "20px",
438
440
  closeIconRightPosition: "20px",
439
- closeIconBackgroundColor: "none",
440
- closeIconBorderColor: "none",
441
+ closeIconBackgroundColor: globalTokens.transparent,
442
+ closeIconBorderColor: globalTokens.border_none,
441
443
  closeIconColor: globalTokens.hal_black,
442
- closeIconBorderThickness: "0px",
443
- closeIconBorderStyle: "solid",
444
- closeIconBorderRadius: "0px",
444
+ closeIconBorderThickness: globalTokens.border_width_0,
445
+ closeIconBorderStyle: globalTokens.border_solid,
446
+ closeIconBorderRadius: "2px",
445
447
  boxShadowOffsetX: "0px",
446
448
  boxShadowOffsetY: "1px",
447
449
  boxShadowBlur: "3px",
448
- boxShadowColor: "rgba(0, 0, 0, 0.2)",
449
- overlayOpacity: "0.7"
450
+ boxShadowColor: globalTokens.color_grey_a_300
450
451
  },
451
452
  dropdown: {
452
453
  buttonBackgroundColor: globalTokens.hal_white,
@@ -464,12 +465,12 @@ var componentTokens = {
464
465
  buttonPaddingBottom: "0px",
465
466
  buttonPaddingLeft: "16px",
466
467
  buttonPaddingRight: "16px",
467
- disabledColor: globalTokens.lighterBlack,
468
+ disabledColor: globalTokens.hal_grey_l_60,
468
469
  disabledButtonBackgroundColor: globalTokens.transparent,
469
470
  disabledBorderColor: globalTokens.lighterBlack,
470
471
  optionBackgroundColor: globalTokens.hal_white,
471
472
  hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
472
- activeOptionBackgroundColor: globalTokens.lightGrey,
473
+ activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
473
474
  optionFontFamily: globalTokens.type_sans,
474
475
  optionFontSize: globalTokens.type_scale_root,
475
476
  optionFontStyle: globalTokens.type_normal,
@@ -486,8 +487,8 @@ var componentTokens = {
486
487
  caretIconColor: globalTokens.hal_black,
487
488
  caretIconSpacing: "12px",
488
489
  borderRadius: "4px",
489
- borderStyle: "none",
490
- borderThickness: "0px",
490
+ borderStyle: globalTokens.border_none,
491
+ borderThickness: globalTokens.border_width_0,
491
492
  borderColor: globalTokens.transparent,
492
493
  scrollBarThumbColor: globalTokens.hal_grey_s_40,
493
494
  scrollBarTrackColor: globalTokens.lightGrey,
@@ -506,14 +507,13 @@ var componentTokens = {
506
507
  focusDropBorderColor: globalTokens.hal_blue_l_50,
507
508
  disabledDropBorderColor: globalTokens.hal_grey_l_60,
508
509
  dragoverDropBackgroundColor: globalTokens.color_blue_50,
509
- hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
510
510
  activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
511
511
  errorFileItemBorderColor: globalTokens.hal_red_s_41,
512
512
  errorFileItemBackgroundColor: globalTokens.color_red_50,
513
- errorFileItemIconBackgroundColor: globalTokens.color_red_700,
513
+ errorFilePreviewBackgroundColor: globalTokens.color_red_700,
514
514
  errorFileItemIconColor: globalTokens.hal_red_s_41,
515
515
  fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
516
- fileItemIconColor: globalTokens.color_grey_600,
516
+ deleteFileItemColor: globalTokens.hal_black,
517
517
  errorMessageFontColor: globalTokens.hal_red_s_41,
518
518
  labelFontFamily: globalTokens.type_sans,
519
519
  labelFontSize: globalTokens.type_scale_02,
@@ -540,16 +540,19 @@ var componentTokens = {
540
540
  fileItemBorderThickness: globalTokens.border_width_1,
541
541
  fileItemBorderStyle: globalTokens.border_solid,
542
542
  fileItemBorderRadius: globalTokens.border_radius_medium,
543
- hoverDeleteFileItemBackgroundColor: "#0000000d",
544
- activeDeleteFileItemBackgroundColor: "#00000033",
545
- 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
546
549
  },
547
550
  footer: {
548
551
  height: "124px",
549
552
  backgroundColor: globalTokens.hal_black,
550
553
  bottomLinksDividerColor: globalTokens.hal_blue_l_50,
551
554
  bottomLinksDividerThickness: "1px",
552
- bottomLinksDividerStyle: "solid",
555
+ bottomLinksDividerStyle: globalTokens.border_solid,
553
556
  bottomLinksDividerSpacing: "8px",
554
557
  bottomLinksFontFamily: globalTokens.type_sans,
555
558
  bottomLinksFontSize: globalTokens.type_scale_01,
@@ -579,7 +582,7 @@ var componentTokens = {
579
582
  hamburguerFontWeight: globalTokens.type_semibold,
580
583
  hamburguerTextTransform: globalTokens.type_uppercase,
581
584
  hamburguerIconColor: globalTokens.hal_black,
582
- hamburguerHoverColor: globalTokens.mediumGreyBlack,
585
+ hamburguerHoverColor: globalTokens.hal_grey_l_90,
583
586
  logo: "",
584
587
  logoResponsive: "",
585
588
  logoHeight: "40px",
@@ -589,7 +592,7 @@ var componentTokens = {
589
592
  menuTabletWidth: "60vw",
590
593
  menuMobileWidth: "100vw",
591
594
  minHeight: "64px",
592
- overlayColor: globalTokens.softBlack,
595
+ overlayColor: globalTokens.color_grey_a_800,
593
596
  overlayOpacity: "0.7",
594
597
  overlayZindex: "1600",
595
598
  paddingTop: "0px",
@@ -598,7 +601,7 @@ var componentTokens = {
598
601
  paddingLeft: "24px",
599
602
  underlinedColor: globalTokens.hal_black,
600
603
  underlinedThickness: "2px",
601
- underlinedStyle: "solid",
604
+ underlinedStyle: globalTokens.border_solid,
602
605
  contentColor: globalTokens.hal_black,
603
606
  contentColorOnDark: globalTokens.hal_white
604
607
  },
@@ -639,216 +642,90 @@ var componentTokens = {
639
642
  level5LineHeight: globalTokens.type_leading_normal,
640
643
  level5LetterSpacing: globalTokens.type_spacing_wide_01
641
644
  },
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
645
  link: {
795
646
  fontColor: globalTokens.hal_blue_s_35,
796
647
  fontFamily: globalTokens.inherit,
797
- fontSize: globalTokens.type_scale_root,
648
+ fontSize: globalTokens.inherit,
798
649
  fontStyle: globalTokens.type_normal,
799
650
  fontWeight: globalTokens.type_regular,
800
651
  iconSize: "16px",
801
652
  iconSpacing: "4px",
802
653
  underlineSpacing: "0px",
803
- underlineStyle: "solid",
654
+ underlineStyle: globalTokens.border_solid,
804
655
  underlineThickness: "1px",
805
656
  disabledColor: globalTokens.lightGrey,
806
657
  hoverFontColor: globalTokens.hal_blue_s_35,
807
658
  hoverUnderlineColor: globalTokens.hal_blue_s_35,
808
- visitedFontColor: globalTokens.purple,
809
- visitedUnderlineColor: globalTokens.purple,
810
- activeFontColor: globalTokens.black,
811
- 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,
812
663
  focusColor: globalTokens.hal_blue_l_50
813
664
  },
665
+ navTabs: {
666
+ selectedBackgroundColor: globalTokens.white,
667
+ unselectedBackgroundColor: globalTokens.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
+ },
814
684
  paginator: {
815
- backgroundColor: globalTokens.darkWhite,
685
+ backgroundColor: globalTokens.hal_grey_l_95,
816
686
  fontColor: globalTokens.hal_black,
817
687
  fontFamily: globalTokens.type_sans,
818
688
  fontSize: globalTokens.type_scale_02,
819
689
  fontStyle: globalTokens.type_normal,
820
690
  fontWeight: globalTokens.type_regular,
821
691
  fontTextTransform: "none",
822
- height: "64px",
823
- width: "100%",
692
+ verticalPadding: "0.75rem",
693
+ horizontalPadding: "2rem",
824
694
  marginRight: "40px",
825
695
  marginLeft: "20px",
826
696
  itemsPerPageSelectorMarginLeft: "0px",
827
- itemsPerPageSelectorMarginRight: "30px",
697
+ itemsPerPageSelectorMarginRight: "0.5rem",
828
698
  pageSelectorMarginRight: "30px",
829
699
  pageSelectorMarginLeft: "0px",
830
- totalItemsContainerMarginRight: "30px",
700
+ totalItemsContainerMarginRight: "2.5rem",
831
701
  totalItemsContainerMarginLeft: "0px"
832
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
+ },
833
710
  progressBar: {
834
711
  trackLineColor: globalTokens.hal_purple_s_38,
835
712
  trackLineColorOnDark: globalTokens.hal_purple_l_65,
836
- totalLineColor: globalTokens.softGrey,
713
+ totalLineColor: globalTokens.hal_grey_l_90,
837
714
  labelFontFamily: globalTokens.type_sans,
838
715
  labelFontSize: globalTokens.type_scale_01,
839
716
  labelFontStyle: globalTokens.type_normal,
840
717
  labelFontWeight: globalTokens.type_regular,
841
- labelFontColor: globalTokens.black,
718
+ labelFontColor: globalTokens.hal_black,
842
719
  labelFontColorOnDark: globalTokens.hal_white,
843
720
  labelFontTextTransform: globalTokens.type_uppercase,
844
721
  valueFontFamily: globalTokens.type_sans,
845
722
  valueFontSize: globalTokens.type_scale_01,
846
723
  valueFontStyle: globalTokens.type_normal,
847
724
  valueFontWeight: globalTokens.type_regular,
848
- valueFontColor: globalTokens.black,
725
+ valueFontColor: globalTokens.hal_black,
849
726
  valueFontColorOnDark: globalTokens.hal_white,
850
727
  valueFontTextTransform: globalTokens.type_uppercase,
851
- helperTextFontColor: globalTokens.black,
728
+ helperTextFontColor: globalTokens.hal_black,
852
729
  helperTextFontColorOnDark: globalTokens.hal_white,
853
730
  helperTextFontSize: globalTokens.type_scale_01,
854
731
  helperTextFontStyle: globalTokens.type_normal,
@@ -856,27 +733,64 @@ var componentTokens = {
856
733
  helperTextFontFamily: globalTokens.type_sans,
857
734
  thickness: "9px",
858
735
  borderRadius: "5px",
859
- overlayColor: globalTokens.black,
860
- overlayOpacity: "0.8"
736
+ overlayColor: globalTokens.color_grey_a_800,
737
+ overlayFontColor: globalTokens.hal_white
861
738
  },
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,
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,
875
751
  fontFamily: globalTokens.type_sans,
876
- fontSize: globalTokens.type_scale_root,
752
+ fontSize: globalTokens.type_scale_02,
877
753
  fontStyle: globalTokens.type_normal,
878
754
  fontWeight: globalTokens.type_regular
879
755
  },
756
+ radioGroup: {
757
+ fontFamily: globalTokens.type_sans,
758
+ radioInputColor: globalTokens.hal_blue_l_45,
759
+ hoverRadioInputColor: globalTokens.hal_blue_s_35,
760
+ focusBorderColor: globalTokens.hal_blue_l_50,
761
+ activeRadioInputColor: globalTokens.hal_blue_d_20,
762
+ errorRadioInputColor: globalTokens.hal_red_s_41,
763
+ hoverErrorRadioInputColor: globalTokens.hal_red_d_30,
764
+ activeErrorRadioInputColor: globalTokens.hal_red_d_20,
765
+ readonlyRadioInputColor: globalTokens.hal_grey_l_60,
766
+ hoverReadonlyRadioInputColor: globalTokens.color_grey_600,
767
+ activeReadonlyRadioInputColor: globalTokens.hal_grey_s_40,
768
+ disabledRadioInputColor: globalTokens.hal_grey_l_60,
769
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
770
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
771
+ disabledRadioInputLabelFontColor: globalTokens.hal_grey_l_60,
772
+ errorMessageColor: globalTokens.hal_red_s_41,
773
+ labelFontColor: globalTokens.hal_black,
774
+ labelFontSize: globalTokens.type_scale_02,
775
+ labelFontStyle: globalTokens.type_normal,
776
+ labelFontWeight: globalTokens.type_semibold,
777
+ labelLineHeight: globalTokens.type_leading_loose_01,
778
+ optionalLabelFontWeight: globalTokens.type_regular,
779
+ helperTextFontColor: globalTokens.hal_black,
780
+ helperTextFontSize: globalTokens.type_scale_01,
781
+ helperTextFontStyle: globalTokens.type_normal,
782
+ helperTextFontWeight: globalTokens.type_regular,
783
+ helperTextLineHeight: globalTokens.type_leading_normal,
784
+ radioInputLabelFontColor: globalTokens.hal_black,
785
+ radioInputLabelFontSize: globalTokens.type_scale_02,
786
+ radioInputLabelFontStyle: globalTokens.type_normal,
787
+ radioInputLabelFontWeight: globalTokens.type_regular,
788
+ radioInputLabelLineHeight: globalTokens.type_leading_loose_01,
789
+ groupLabelMargin: globalTokens.spacing_03,
790
+ radioInputLabelMargin: globalTokens.spacing_03,
791
+ groupVerticalGutter: globalTokens.spacing_02,
792
+ groupHorizontalGutter: globalTokens.spacing_07
793
+ },
880
794
  select: {
881
795
  fontFamily: globalTokens.type_sans,
882
796
  disabledColor: globalTokens.hal_grey_l_60,
@@ -902,7 +816,7 @@ var componentTokens = {
902
816
  helperTextFontStyle: globalTokens.type_normal,
903
817
  helperTextFontWeight: globalTokens.type_regular,
904
818
  helperTextLineHeight: globalTokens.type_leading_normal,
905
- placeholderFontColor: "#000000b3",
819
+ placeholderFontColor: globalTokens.color_grey_a_800,
906
820
  valueFontColor: globalTokens.hal_black,
907
821
  valueFontSize: globalTokens.type_scale_03,
908
822
  valueFontStyle: globalTokens.type_normal,
@@ -944,88 +858,38 @@ var componentTokens = {
944
858
  activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
945
859
  activeSelectionIndicatorActionIconColor: globalTokens.hal_black
946
860
  },
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
861
  sidenav: {
1007
862
  backgroundColor: globalTokens.hal_grey_l_95,
1008
- arrowContainerColor: globalTokens.hal_grey_l_90,
1009
- arrowColor: globalTokens.hal_black,
1010
863
  titleFontFamily: globalTokens.type_sans,
1011
- titleFontSize: globalTokens.type_scale_05,
864
+ titleFontSize: globalTokens.type_scale_04,
1012
865
  titleFontStyle: globalTokens.type_normal,
1013
- titleFontWeight: globalTokens.type_regular,
1014
- titleFontColor: globalTokens.hal_black,
866
+ titleFontWeight: globalTokens.type_semibold,
867
+ titleFontColor: globalTokens.color_grey_800,
1015
868
  titleFontTextTransform: "none",
1016
869
  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,
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,
1024
883
  linkFontFamily: globalTokens.type_sans,
1025
884
  linkFontSize: globalTokens.type_scale_02,
1026
885
  linkFontStyle: globalTokens.type_normal,
1027
886
  linkFontWeight: globalTokens.type_regular,
1028
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,
1029
893
  linkFontTextTransform: "none",
1030
894
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
1031
895
  linkTextDecoration: globalTokens.type_no_line,
@@ -1034,7 +898,7 @@ var componentTokens = {
1034
898
  linkMarginRight: "16px",
1035
899
  linkMarginLeft: "16px",
1036
900
  linkFocusColor: globalTokens.hal_blue_l_50,
1037
- scrollBarThumbColor: "#66666626",
901
+ scrollBarThumbColor: globalTokens.color_grey_a_200,
1038
902
  scrollBarTrackColor: globalTokens.transparent
1039
903
  },
1040
904
  slider: {
@@ -1093,7 +957,7 @@ var componentTokens = {
1093
957
  trackLineColorOnDark: globalTokens.hal_blue_l_50,
1094
958
  totalLineThickness: "2px",
1095
959
  totalLineVerticalPosition: "50%",
1096
- totalLineColor: globalTokens.hal_grey_l_90,
960
+ totalLineColor: globalTokens.color_grey_a_200,
1097
961
  totalLineColorOnDark: globalTokens.hal_grey_l_75,
1098
962
  disabledThumbVerticalPosition: "10px",
1099
963
  disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
@@ -1112,36 +976,36 @@ var componentTokens = {
1112
976
  inputMarginLeft: globalTokens.type_scale_06
1113
977
  },
1114
978
  spinner: {
1115
- trackCircleColor: "#5f249f",
1116
- trackCircleColorOnDark: "#a46ede",
1117
- totalCircleColor: globalTokens.white,
979
+ trackCircleColor: globalTokens.hal_purple_s_38,
980
+ trackCircleColorOverlay: globalTokens.hal_purple_l_65,
981
+ totalCircleColor: globalTokens.hal_white,
1118
982
  labelFontFamily: globalTokens.type_sans,
1119
983
  labelFontSize: globalTokens.type_scale_02,
1120
984
  labelFontStyle: globalTokens.type_normal,
1121
985
  labelFontWeight: globalTokens.type_regular,
1122
- labelFontColor: globalTokens.black,
1123
- labelFontColorOnDark: globalTokens.white,
986
+ labelFontColor: globalTokens.hal_black,
987
+ labelFontColorOnDark: globalTokens.hal_white,
1124
988
  labelTextAlign: "center",
1125
989
  progressValueFontFamily: globalTokens.type_sans,
1126
990
  progressValueFontSize: globalTokens.type_scale_02,
1127
991
  progressValueFontStyle: globalTokens.type_normal,
1128
992
  progressValueFontWeight: globalTokens.type_bold,
1129
993
  progressValueFontColor: globalTokens.inherit,
1130
- progressValueFontColorOnDark: globalTokens.white,
994
+ progressValueFontColorOnDark: globalTokens.hal_white,
1131
995
  progressValueTextAlign: "center",
1132
- overlayBackgroundColor: globalTokens.black,
996
+ overlayBackgroundColor: globalTokens.hal_black,
1133
997
  overlayOpacity: "0.8",
1134
998
  overlayLabelFontFamily: globalTokens.type_sans,
1135
999
  overlayLabelFontSize: globalTokens.type_scale_02,
1136
1000
  overlayLabelFontStyle: globalTokens.type_normal,
1137
1001
  overlayLabelFontWeight: globalTokens.type_regular,
1138
- overlayLabelFontColor: globalTokens.white,
1002
+ overlayLabelFontColor: globalTokens.hal_white,
1139
1003
  overlayLabelTextAlign: "center",
1140
1004
  overlayProgressValueFontFamily: globalTokens.type_sans,
1141
1005
  overlayProgressValueFontSize: globalTokens.type_scale_02,
1142
1006
  overlayProgressValueFontStyle: globalTokens.type_normal,
1143
1007
  overlayProgressValueFontWeight: globalTokens.type_bold,
1144
- overlayProgressValueFontColor: globalTokens.white,
1008
+ overlayProgressValueFontColor: globalTokens.hal_white,
1145
1009
  overlayProgressValueTextAlign: "center"
1146
1010
  },
1147
1011
  "switch": {
@@ -1171,41 +1035,24 @@ var componentTokens = {
1171
1035
  labelFontColor: globalTokens.hal_black,
1172
1036
  labelFontColorOnDark: globalTokens.hal_white,
1173
1037
  thumbFocusColor: globalTokens.hal_blue_l_50,
1174
- thumbFocusColorOnDark: "#1682FF",
1038
+ thumbFocusColorOnDark: "#1682ff",
1175
1039
  thumbHeight: "24px",
1176
1040
  thumbWidth: "24px",
1177
- thumbShift: "40%",
1041
+ thumbShift: "1.25rem",
1178
1042
  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
1043
+ trackWidth: "36px",
1044
+ spaceBetweenLabelSwitch: "8px"
1198
1045
  },
1199
1046
  table: {
1200
1047
  rowSeparatorThickness: "1px",
1201
- rowSeparatorStyle: "solid",
1202
- rowSeparatorColor: globalTokens.lightGrey,
1203
- dataBackgroundColor: globalTokens.white,
1048
+ rowSeparatorStyle: globalTokens.border_solid,
1049
+ rowSeparatorColor: globalTokens.hal_grey_l_80,
1050
+ dataBackgroundColor: globalTokens.hal_white,
1204
1051
  dataFontFamily: globalTokens.type_sans,
1205
1052
  dataFontSize: globalTokens.type_scale_02,
1206
1053
  dataFontStyle: globalTokens.type_normal,
1207
1054
  dataFontWeight: globalTokens.type_regular,
1208
- dataFontColor: globalTokens.black,
1055
+ dataFontColor: globalTokens.hal_black,
1209
1056
  dataFontTextTransform: "none",
1210
1057
  dataPaddingTop: "14px",
1211
1058
  dataPaddingBottom: "12px",
@@ -1219,7 +1066,7 @@ var componentTokens = {
1219
1066
  headerFontSize: globalTokens.type_scale_02,
1220
1067
  headerFontStyle: globalTokens.type_normal,
1221
1068
  headerFontWeight: globalTokens.type_regular,
1222
- headerFontColor: globalTokens.white,
1069
+ headerFontColor: globalTokens.hal_white,
1223
1070
  headerFontTextTransform: "none",
1224
1071
  headerPaddingTop: "16px",
1225
1072
  headerPaddingBottom: "16px",
@@ -1227,9 +1074,9 @@ var componentTokens = {
1227
1074
  headerPaddingLeft: "40px",
1228
1075
  headerTextAlign: "left",
1229
1076
  headerTextLineHeight: "normal",
1230
- scrollBarThumbColor: globalTokens.darkGrey,
1231
- scrollBarTrackColor: globalTokens.lightGrey,
1232
- sortIconColor: globalTokens.white
1077
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
1078
+ scrollBarTrackColor: globalTokens.hal_grey_l_80,
1079
+ sortIconColor: globalTokens.hal_white
1233
1080
  },
1234
1081
  tabs: {
1235
1082
  fontFamily: globalTokens.type_sans,
@@ -1237,30 +1084,31 @@ var componentTokens = {
1237
1084
  fontStyle: globalTokens.type_normal,
1238
1085
  fontWeight: globalTokens.type_semibold,
1239
1086
  fontTextTransform: "none",
1240
- selectedBackgroundColor: globalTokens.white,
1241
- selectedFontColor: "#5f249f",
1242
- selectedIconColor: "#5f249f",
1243
- 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,
1244
1091
  selectedUnderlineThickness: "2px",
1245
- unselectedBackgroundColor: globalTokens.white,
1246
- unselectedFontColor: globalTokens.darkGrey,
1247
- unselectedIconColor: globalTokens.darkGrey,
1248
- disabledFontColor: "#999999",
1249
- 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,
1250
1097
  disabledFontStyle: globalTokens.type_normal,
1251
- hoverBackgroundColor: "#f2eafa",
1252
- pressedBackgroundColor: "#e5d5f6",
1098
+ disabledBadgeBackgroundColor: "#0000004d",
1099
+ hoverBackgroundColor: globalTokens.hal_purple_l_95,
1100
+ pressedBackgroundColor: globalTokens.hal_purple_l_90,
1253
1101
  pressedFontWeight: globalTokens.type_semibold,
1254
- dividerColor: globalTokens.mediumGrey,
1102
+ dividerColor: globalTokens.hal_grey_l_75,
1255
1103
  dividerThickness: "1px",
1256
- focusOutline: "#5f249f",
1104
+ focusOutline: globalTokens.hal_purple_s_38,
1257
1105
  scrollButtonsWidth: "48px",
1258
- badgeBackgroundColor: globalTokens.darkRed,
1106
+ badgeBackgroundColor: globalTokens.hal_red_s_41,
1259
1107
  badgeFontFamily: globalTokens.type_sans,
1260
1108
  badgeFontSize: "10px",
1261
1109
  badgeFontStyle: globalTokens.type_normal,
1262
1110
  badgeFontWeight: "500",
1263
- badgeFontColor: globalTokens.white,
1111
+ badgeFontColor: globalTokens.hal_white,
1264
1112
  badgeLetterSpacing: globalTokens.type_spacing_wide_02,
1265
1113
  badgeWidth: "16px",
1266
1114
  badgeHeight: "16px",
@@ -1269,6 +1117,23 @@ var componentTokens = {
1269
1117
  badgeHeightWithNotificationNumber: "17px",
1270
1118
  badgeRadiusWithNotificationNumber: "10px"
1271
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
+ },
1272
1137
  textarea: {
1273
1138
  fontFamily: globalTokens.type_sans,
1274
1139
  enabledBorderColor: globalTokens.hal_black,
@@ -1306,7 +1171,7 @@ var componentTokens = {
1306
1171
  helperTextLineHeight: globalTokens.type_leading_normal,
1307
1172
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1308
1173
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1309
- placeholderFontColor: "#000000b3",
1174
+ placeholderFontColor: globalTokens.color_grey_a_800,
1310
1175
  placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1311
1176
  disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1312
1177
  disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
@@ -1318,40 +1183,98 @@ var componentTokens = {
1318
1183
  disabledValueFontColor: globalTokens.hal_grey_l_60,
1319
1184
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1320
1185
  },
1321
- V3Textarea: {
1186
+ textInput: {
1322
1187
  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,
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,
1338
1211
  labelFontStyle: globalTokens.type_normal,
1339
- labelFontWeight: globalTokens.type_regular,
1340
- labelFontColor: globalTokens.black,
1341
- labelFontColorOnDark: globalTokens.white,
1342
- 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,
1343
1239
  valueFontSize: globalTokens.type_scale_03,
1344
1240
  valueFontStyle: globalTokens.type_normal,
1345
1241
  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"
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
1355
1278
  },
1356
1279
  toggleGroup: {
1357
1280
  containerBackgroundColor: globalTokens.color_grey_50,
@@ -1401,121 +1324,65 @@ var componentTokens = {
1401
1324
  containerBorderRadius: globalTokens.border_radius_large,
1402
1325
  optionFocusBorderThickness: globalTokens.border_width_2
1403
1326
  },
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
1327
  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",
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,
1480
1358
  labelFontSize: globalTokens.type_scale_03,
1481
1359
  labelFontFamily: globalTokens.type_sans,
1482
1360
  labelFontStyle: globalTokens.type_normal,
1483
1361
  labelFontWeight: globalTokens.type_regular,
1484
- labelLetterSpacing: globalTokens.type_spacing_normal,
1362
+ labelFontTracking: globalTokens.type_spacing_normal,
1485
1363
  labelFontTextTransform: "none",
1486
1364
  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,
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",
1516
1383
  separatorBorderThickness: "1px",
1517
- separatorBorderStyle: "solid",
1518
- separatorColor: globalTokens.lightGrey,
1384
+ separatorBorderStyle: globalTokens.border_solid,
1385
+ separatorColor: globalTokens.hal_grey_s_40,
1519
1386
  focusColor: globalTokens.hal_blue_l_50
1520
1387
  }
1521
1388
  };
@@ -1531,44 +1398,107 @@ var spaces = {
1531
1398
  };
1532
1399
  exports.spaces = spaces;
1533
1400
  var responsiveSizes = {
1534
- mobileSmall: "320",
1535
- mobileMedium: "375",
1536
- mobileLarge: "425",
1537
- tablet: "768",
1538
- laptop: "1024",
1539
- desktop: "1440"
1401
+ xsmall: "20",
1402
+ small: "30",
1403
+ medium: "45",
1404
+ large: "66",
1405
+ xlarge: "90"
1540
1406
  };
1541
1407
  exports.responsiveSizes = responsiveSizes;
1542
- var typeface = {
1543
- body: {
1544
- fontSize: "16px",
1545
- letterSpacing: "0.5",
1546
- 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"
1421
+ },
1422
+ alert: {
1423
+ infoTitleText: "information",
1424
+ successTitleText: "success",
1425
+ warningTitleText: "warning",
1426
+ errorTitleText: "error"
1427
+ },
1428
+ dateInput: {
1429
+ invalidDateErrorMessage: "Invalid date."
1430
+ },
1431
+ dialog: {
1432
+ closeIconAriaLabel: "Close dialog"
1433
+ },
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"
1443
+ },
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
+ }
1547
1472
  },
1548
- altBody: {
1549
- fontSize: "14px",
1550
- letterSpacing: "0.25",
1551
- textTransform: "initial"
1473
+ passwordInput: {
1474
+ inputShowPasswordTitle: "Show password",
1475
+ inputHidePasswordTitle: "Hide password"
1552
1476
  },
1553
- subtitle: {
1554
- fontSize: "16px",
1555
- letterSpacing: "0.15",
1556
- textTransform: "initial"
1477
+ quickNav: {
1478
+ contentTitle: "Contents"
1557
1479
  },
1558
- altSubtitle: {
1559
- fontSize: "14px",
1560
- letterSpacing: "0.1",
1561
- textTransform: "initial"
1480
+ radioGroup: {
1481
+ optionalItemLabelDefault: "N/A"
1562
1482
  },
1563
- caption: {
1564
- fontSize: "12px",
1565
- letterSpacing: "0.4",
1566
- textTransform: "initial"
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"
1567
1496
  },
1568
- overline: {
1569
- fontSize: "12px",
1570
- letterSpacing: "2",
1571
- 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"
1572
1502
  }
1573
1503
  };
1574
- exports.typeface = typeface;
1504
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;