@dxc-technology/halstack-react 0.0.0-c8db8a2 → 0.0.0-cc01d9c

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 (219) hide show
  1. package/dist/ThemeContext.js +134 -100
  2. package/dist/V3Select/V3Select.js +549 -0
  3. package/dist/V3Select/index.d.ts +27 -0
  4. package/dist/V3Textarea/V3Textarea.js +264 -0
  5. package/dist/V3Textarea/index.d.ts +27 -0
  6. package/dist/accordion/Accordion.js +80 -83
  7. package/dist/accordion/index.d.ts +28 -0
  8. package/dist/accordion-group/AccordionGroup.js +1 -3
  9. package/dist/accordion-group/index.d.ts +16 -0
  10. package/dist/alert/Alert.js +126 -111
  11. package/dist/alert/index.d.ts +51 -0
  12. package/dist/badge/Badge.js +3 -1
  13. package/dist/box/Box.js +1 -9
  14. package/dist/box/index.d.ts +25 -0
  15. package/dist/button/Button.js +32 -22
  16. package/dist/button/index.d.ts +24 -0
  17. package/dist/card/Card.js +15 -8
  18. package/dist/card/index.d.ts +22 -0
  19. package/dist/checkbox/Checkbox.js +33 -25
  20. package/dist/checkbox/index.d.ts +24 -0
  21. package/dist/chip/Chip.js +37 -49
  22. package/dist/chip/index.d.ts +22 -0
  23. package/dist/common/variables.js +1023 -583
  24. package/dist/date/Date.js +60 -40
  25. package/dist/date/index.d.ts +27 -0
  26. package/dist/date-input/DateInput.js +400 -0
  27. package/dist/date-input/index.d.ts +95 -0
  28. package/dist/dialog/Dialog.js +21 -39
  29. package/dist/dialog/index.d.ts +18 -0
  30. package/dist/dropdown/Dropdown.js +129 -83
  31. package/dist/dropdown/index.d.ts +26 -0
  32. package/dist/file-input/FileInput.js +644 -0
  33. package/dist/file-input/FileItem.js +287 -0
  34. package/dist/file-input/index.d.ts +81 -0
  35. package/dist/footer/Footer.js +69 -53
  36. package/dist/footer/Icons.js +77 -0
  37. package/dist/footer/index.d.ts +25 -0
  38. package/dist/header/Header.js +123 -84
  39. package/dist/header/Icons.js +59 -0
  40. package/dist/header/index.d.ts +25 -0
  41. package/dist/heading/Heading.js +13 -5
  42. package/dist/heading/index.d.ts +17 -0
  43. package/dist/input-text/Icons.js +22 -0
  44. package/dist/input-text/InputText.js +131 -57
  45. package/dist/input-text/index.d.ts +36 -0
  46. package/dist/layout/ApplicationLayout.js +5 -9
  47. package/dist/layout/Icons.js +55 -0
  48. package/dist/link/Link.js +71 -46
  49. package/dist/link/index.d.ts +23 -0
  50. package/dist/main.d.ts +40 -0
  51. package/dist/main.js +63 -15
  52. package/dist/number-input/NumberInput.js +136 -0
  53. package/dist/number-input/NumberInputContext.js +16 -0
  54. package/dist/number-input/index.d.ts +113 -0
  55. package/dist/paginator/Icons.js +66 -0
  56. package/dist/paginator/Paginator.js +17 -17
  57. package/dist/paginator/index.d.ts +20 -0
  58. package/dist/password-input/PasswordInput.js +203 -0
  59. package/dist/password-input/index.d.ts +94 -0
  60. package/dist/progress-bar/ProgressBar.js +63 -27
  61. package/dist/progress-bar/index.d.ts +18 -0
  62. package/dist/radio/Radio.js +2 -2
  63. package/dist/radio/index.d.ts +23 -0
  64. package/dist/resultsetTable/ResultsetTable.js +64 -38
  65. package/dist/resultsetTable/index.d.ts +19 -0
  66. package/dist/select/Select.js +879 -308
  67. package/dist/select/index.d.ts +53 -0
  68. package/dist/sidenav/Sidenav.js +11 -15
  69. package/dist/sidenav/index.d.ts +13 -0
  70. package/dist/slider/Slider.js +159 -70
  71. package/dist/slider/index.d.ts +29 -0
  72. package/dist/spinner/Spinner.js +226 -59
  73. package/dist/spinner/index.d.ts +17 -0
  74. package/dist/switch/Switch.js +3 -3
  75. package/dist/switch/index.d.ts +24 -0
  76. package/dist/table/Table.js +19 -5
  77. package/dist/table/index.d.ts +13 -0
  78. package/dist/tabs/Tabs.js +4 -8
  79. package/dist/tabs/index.d.ts +19 -0
  80. package/dist/tag/Tag.js +38 -36
  81. package/dist/tag/index.d.ts +24 -0
  82. package/dist/text-input/TextInput.js +974 -0
  83. package/dist/text-input/index.d.ts +135 -0
  84. package/dist/textarea/Textarea.js +233 -124
  85. package/dist/textarea/index.d.ts +117 -0
  86. package/dist/toggle/index.d.ts +21 -0
  87. package/dist/toggle-group/ToggleGroup.js +130 -44
  88. package/dist/toggle-group/index.d.ts +21 -0
  89. package/dist/upload/buttons-upload/ButtonsUpload.js +13 -13
  90. package/dist/upload/buttons-upload/Icons.js +40 -0
  91. package/dist/upload/dragAndDropArea/DragAndDropArea.js +27 -23
  92. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  93. package/dist/upload/file-upload/FileToUpload.js +29 -24
  94. package/dist/upload/file-upload/Icons.js +66 -0
  95. package/dist/upload/index.d.ts +15 -0
  96. package/dist/upload/transaction/Icons.js +160 -0
  97. package/dist/upload/transaction/Transaction.js +19 -42
  98. package/dist/upload/transactions/Transactions.js +11 -11
  99. package/dist/wizard/Icons.js +65 -0
  100. package/dist/wizard/Wizard.js +85 -63
  101. package/dist/wizard/index.d.ts +18 -0
  102. package/package.json +8 -10
  103. package/test/Date.test.js +15 -13
  104. package/test/DateInput.test.js +242 -0
  105. package/test/Dropdown.test.js +15 -0
  106. package/test/FileInput.test.js +201 -0
  107. package/test/Footer.test.js +2 -7
  108. package/test/Header.test.js +5 -10
  109. package/test/Heading.test.js +60 -12
  110. package/test/Link.test.js +3 -2
  111. package/test/NumberInput.test.js +259 -0
  112. package/test/Paginator.test.js +1 -1
  113. package/test/PasswordInput.test.js +83 -0
  114. package/test/ResultsetTable.test.js +1 -2
  115. package/test/Select.test.js +371 -148
  116. package/test/Slider.test.js +9 -17
  117. package/test/Spinner.test.js +5 -0
  118. package/test/TextInput.test.js +732 -0
  119. package/test/Textarea.test.js +193 -0
  120. package/test/ToggleGroup.test.js +5 -1
  121. package/test/Upload.test.js +1 -1
  122. package/test/V3Select.test.js +212 -0
  123. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  124. package/dist/accordion/Accordion.stories.js +0 -207
  125. package/dist/accordion/readme.md +0 -96
  126. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  127. package/dist/accordion-group/readme.md +0 -70
  128. package/dist/alert/Alert.stories.js +0 -158
  129. package/dist/alert/close.svg +0 -4
  130. package/dist/alert/error.svg +0 -4
  131. package/dist/alert/info.svg +0 -4
  132. package/dist/alert/readme.md +0 -43
  133. package/dist/alert/success.svg +0 -4
  134. package/dist/alert/warning.svg +0 -4
  135. package/dist/button/Button.stories.js +0 -224
  136. package/dist/button/readme.md +0 -93
  137. package/dist/checkbox/Checkbox.stories.js +0 -144
  138. package/dist/checkbox/readme.md +0 -116
  139. package/dist/date/Date.stories.js +0 -205
  140. package/dist/date/calendar.svg +0 -1
  141. package/dist/date/calendar_dark.svg +0 -1
  142. package/dist/date/readme.md +0 -73
  143. package/dist/dialog/Dialog.stories.js +0 -217
  144. package/dist/dialog/readme.md +0 -32
  145. package/dist/dropdown/Dropdown.stories.js +0 -249
  146. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  147. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  148. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  149. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  150. package/dist/dropdown/readme.md +0 -69
  151. package/dist/footer/Footer.stories.js +0 -94
  152. package/dist/footer/dxc_logo_wht.png +0 -0
  153. package/dist/footer/readme.md +0 -41
  154. package/dist/header/Header.stories.js +0 -176
  155. package/dist/header/close_icon.svg +0 -1
  156. package/dist/header/dxc_logo_black.png +0 -0
  157. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  158. package/dist/header/dxc_logo_white.png +0 -0
  159. package/dist/header/hamb_menu_black.svg +0 -1
  160. package/dist/header/hamb_menu_white.svg +0 -1
  161. package/dist/header/readme.md +0 -33
  162. package/dist/input-text/InputText.stories.js +0 -209
  163. package/dist/input-text/error.svg +0 -1
  164. package/dist/input-text/readme.md +0 -91
  165. package/dist/layout/facebook.svg +0 -45
  166. package/dist/layout/linkedin.svg +0 -50
  167. package/dist/layout/twitter.svg +0 -53
  168. package/dist/link/readme.md +0 -51
  169. package/dist/paginator/images/next.svg +0 -3
  170. package/dist/paginator/images/nextPage.svg +0 -3
  171. package/dist/paginator/images/previous.svg +0 -3
  172. package/dist/paginator/images/previousPage.svg +0 -3
  173. package/dist/paginator/readme.md +0 -50
  174. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  175. package/dist/progress-bar/readme.md +0 -63
  176. package/dist/radio/Radio.stories.js +0 -166
  177. package/dist/radio/readme.md +0 -70
  178. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  179. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  180. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  181. package/dist/select/Select.stories.js +0 -235
  182. package/dist/select/readme.md +0 -72
  183. package/dist/slider/Slider.stories.js +0 -241
  184. package/dist/slider/readme.md +0 -64
  185. package/dist/spinner/Spinner.stories.js +0 -183
  186. package/dist/spinner/readme.md +0 -65
  187. package/dist/switch/Switch.stories.js +0 -134
  188. package/dist/switch/readme.md +0 -133
  189. package/dist/tabs/Tabs.stories.js +0 -130
  190. package/dist/tabs/readme.md +0 -78
  191. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  192. package/dist/tabs-for-sections/readme.md +0 -78
  193. package/dist/toggle/Toggle.stories.js +0 -297
  194. package/dist/toggle/readme.md +0 -80
  195. package/dist/toggle-group/readme.md +0 -82
  196. package/dist/upload/Upload.stories.js +0 -72
  197. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  198. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  199. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  200. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  201. package/dist/upload/file-upload/audio-icon.svg +0 -4
  202. package/dist/upload/file-upload/close.svg +0 -4
  203. package/dist/upload/file-upload/file-icon.svg +0 -4
  204. package/dist/upload/file-upload/video-icon.svg +0 -4
  205. package/dist/upload/readme.md +0 -37
  206. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  207. package/dist/upload/transaction/audio-icon.svg +0 -4
  208. package/dist/upload/transaction/error-icon.svg +0 -4
  209. package/dist/upload/transaction/file-icon-err.svg +0 -4
  210. package/dist/upload/transaction/file-icon.svg +0 -4
  211. package/dist/upload/transaction/image-icon-err.svg +0 -4
  212. package/dist/upload/transaction/image-icon.svg +0 -4
  213. package/dist/upload/transaction/success-icon.svg +0 -4
  214. package/dist/upload/transaction/video-icon-err.svg +0 -4
  215. package/dist/upload/transaction/video-icon.svg +0 -4
  216. package/dist/wizard/invalid_icon.svg +0 -6
  217. package/dist/wizard/valid_icon.svg +0 -6
  218. package/dist/wizard/validation-wrong.svg +0 -6
  219. package/test/TabsForSections.test.js +0 -34
@@ -7,11 +7,62 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
9
9
 
10
- var _dxc_logo_blk_rgb = _interopRequireDefault(require("../header/dxc_logo_blk_rgb.svg"));
10
+ var _Icons = require("../header/Icons");
11
11
 
12
- var _dxc_logo_wht = _interopRequireDefault(require("../footer/dxc_logo_wht.png"));
12
+ var _Icons2 = _interopRequireDefault(require("../footer/Icons"));
13
13
 
14
14
  var globalTokens = {
15
+ // Color
16
+ inherit: "inherit",
17
+ transparent: "transparent",
18
+ hal_white: "#ffffff",
19
+ hal_grey_l_95: "#f2f2f2",
20
+ hal_grey_l_90: "#e6e6e6",
21
+ hal_grey_l_80: "#cccccc",
22
+ hal_grey_l_75: "#bfbfbf",
23
+ hal_grey_l_60: "#999999",
24
+ hal_grey_s_40: "#666666",
25
+ hal_black: "#000000",
26
+ color_grey_800: "#4d4d4d",
27
+ color_grey_600: "#808080",
28
+ color_grey_50: "#fafafa",
29
+ hal_purple_l_95: "#f2eafa",
30
+ hal_purple_l_90: "#e5d5f6",
31
+ hal_purple_l_65: "#a46ede",
32
+ hal_purple_s_38: "#5f249f",
33
+ hal_purple_d_30: "#4b1c7d",
34
+ hal_purple_d_20: "#321353",
35
+ color_purple_600: "#7D2FD0",
36
+ color_purple_300: "#cbacec",
37
+ hal_blue_l_95: "#e6f4ff",
38
+ hal_blue_l_80: "#99d5ff",
39
+ hal_blue_l_50: "#0095ff",
40
+ hal_blue_l_45: "#0086e6",
41
+ hal_blue_s_35: "#0067b3",
42
+ hal_blue_d_20: "#003c66",
43
+ color_blue_200: "#cceaff",
44
+ color_blue_500: "#33AAFF",
45
+ color_blue_50: "#f5fbff",
46
+ hal_red_l_95: "#ffe6e9",
47
+ hal_red_l_80: "#fe9aa7",
48
+ hal_red_l_60: "#fe344f",
49
+ hal_red_s_41: "#d0011b",
50
+ hal_red_d_30: "#980115",
51
+ hal_red_d_20: "#65010e",
52
+ color_red_700: "#ffccd3",
53
+ color_red_50: "#FFF5F6",
54
+ color_red_600: "#fe0123",
55
+ hal_green_l_95: "#eafaef",
56
+ hal_green_l_80: "#acecbe",
57
+ hal_green_s_39: "#24a148",
58
+ hal_green_d_30: "#1c7d38",
59
+ hal_green_d_20: "#135325",
60
+ hal_yellow_l_95: "#fef9e6",
61
+ hal_yellow_l_80: "#fbe89d",
62
+ hal_yellow_s_57: "#f7cf2b",
63
+ hal_yellow_d_40: "#c59f07",
64
+ hal_yellow_d_30: "#947705",
65
+ hal_orange_s_54: "#f38f20",
15
66
  black: "#000000",
16
67
  lightBlack: "#212121",
17
68
  yellow: "#FFED00",
@@ -27,8 +78,6 @@ var globalTokens = {
27
78
  red: "#D0011B",
28
79
  violet: "#8800F6",
29
80
  darkBlue: "#006BF6",
30
- inherit: "inherit",
31
- transparent: "transparent",
32
81
  purple: "#6f2c91",
33
82
  mediumPurple: "#ead8f3",
34
83
  lightPurple: "#f5ebf9",
@@ -46,7 +95,7 @@ var globalTokens = {
46
95
  lightWhite: "#f2f2f2",
47
96
  softGrey: "#cecece",
48
97
  softBlack: "#565656",
49
- fontSize10: "10px",
98
+ // Typography
50
99
  type_sans: "Open Sans, sans-serif",
51
100
  type_scale_root: "16px",
52
101
  type_scale_08: "3.75rem",
@@ -78,312 +127,320 @@ var globalTokens = {
78
127
  type_leading_compact_02: "1.25em",
79
128
  type_leading_compact_01: "1.365em",
80
129
  type_leading_normal: "1.5em",
81
- type_leading_loose_01: "1.75em",
82
- type_leading_loose_02: "2em"
130
+ type_leading_loose_01: "1.715em",
131
+ type_leading_loose_02: "2em",
132
+ fontSize10: "10px",
133
+ // Spacing
134
+ spacing_00: "0rem",
135
+ spacing_01: "0.125rem",
136
+ spacing_02: "0.25rem",
137
+ spacing_03: "0.5rem",
138
+ spacing_04: "0.75rem",
139
+ spacing_05: "1rem",
140
+ spacing_06: "1.5rem",
141
+ spacing_07: "2rem",
142
+ spacing_08: "2.5rem",
143
+ spacing_09: "3rem",
144
+ spacing_10: "3.5rem",
145
+ spacing_11: "4rem",
146
+ spacing_12: "5rem",
147
+ spacing_13: "6rem",
148
+ spacing_14: "7rem",
149
+ // Border
150
+ border_width_0: "0px",
151
+ border_width_1: "1px",
152
+ border_width_2: "2px",
153
+ border_width_4: "4px",
154
+ border_radius_none: "0rem",
155
+ border_radius_small: "0.125rem",
156
+ border_radius_medium: "0.25rem",
157
+ border_radius_large: "0.375rem",
158
+ border_radius_full: "9999px",
159
+ border_solid: "solid",
160
+ border_dashed: "dashed",
161
+ border_none: "none"
83
162
  };
84
163
  exports.globalTokens = globalTokens;
85
164
  var componentTokens = {
86
165
  accordion: {
87
- backgroundColor: globalTokens.white,
88
- arrowColor: globalTokens.purple,
89
- fontColorBase: globalTokens.darkGrey,
90
- hoverBackgroundColor: globalTokens.lightPurple,
91
- disabledFontColor: globalTokens.mediumGrey,
92
- customContentFontFamily: globalTokens.type_sans,
93
- customContentFontSize: globalTokens.type_scale_03,
94
- customContentFontWeight: globalTokens.type_light,
95
- customContentFontColor: "",
166
+ backgroundColor: globalTokens.hal_white,
167
+ disabledBackgroundColor: globalTokens.transparent,
168
+ hoverBackgroundColor: globalTokens.hal_purple_l_95,
169
+ arrowColor: globalTokens.hal_purple_s_38,
170
+ disabledArrowColor: globalTokens.hal_grey_l_60,
96
171
  assistiveTextFontFamily: globalTokens.type_sans,
97
172
  assistiveTextFontSize: globalTokens.type_scale_03,
98
173
  assistiveTextFontWeight: globalTokens.type_light,
99
174
  assistiveTextFontStyle: globalTokens.type_italic,
100
- assistiveTextFontColor: "",
101
175
  assistiveTextLetterSpacing: globalTokens.type_spacing_wide_01,
176
+ assistiveTextFontColor: globalTokens.hal_grey_s_40,
177
+ disabledAssistiveTextFontColor: globalTokens.hal_grey_l_60,
102
178
  assistiveTextMinWidth: "100px",
103
- titleFontFamily: globalTokens.type_sans,
104
- titleFontSize: globalTokens.type_scale_03,
105
- titleFontWeight: globalTokens.type_regular,
106
- titleFontStyle: globalTokens.type_normal,
107
- titleFontColor: "",
108
- titleMarginRight: "48px",
109
- titleMarginLeft: "0px",
110
- titleMarginTop: "0px",
111
- titleMarginBottom: "0px",
112
- headerPaddingLeft: "16px",
113
- headerPaddingRight: "16px",
114
- headerPaddingTop: "0px",
115
- headerPaddingBottom: "0px",
116
- assistiveTextMarginRight: "0px",
117
- assistiveTextMarginLeft: "0px",
118
- assistiveTextMarginTop: "1px",
119
- assistiveTextMarginBottom: "0px",
179
+ assistiveTextPaddingRight: "24px",
180
+ assistiveTextPaddingLeft: "0px",
181
+ titleLabelFontFamily: globalTokens.type_sans,
182
+ titleLabelFontSize: globalTokens.type_scale_03,
183
+ titleLabelFontWeight: globalTokens.type_regular,
184
+ titleLabelFontStyle: globalTokens.type_normal,
185
+ titleLabelFontColor: globalTokens.hal_black,
186
+ disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
187
+ titleLabelPaddingLeft: "0px",
188
+ titleLabelPaddingRight: "16px",
189
+ titleLabelPaddingTop: "0px",
190
+ titleLabelPaddingBottom: "0px",
191
+ focusBorderStyle: "solid",
192
+ focusBorderThickness: "2px",
193
+ focusBorderColor: globalTokens.hal_blue_l_50,
120
194
  borderRadius: "4px",
121
- headerFocusBorderStyle: "solid",
122
- headerFocusBorderThickness: "1px",
123
- headerFocusBorderColor: globalTokens.purple,
124
- minHeight: "48px",
125
- minWidth: "280px",
126
195
  boxShadowOffsetX: "0px",
127
196
  boxShadowOffsetY: "6px",
128
197
  boxShadowBlur: "10px",
129
- boxShadowColor: "#00000024",
130
- iconMaxHeight: "24px",
131
- iconMaxWidth: "24px",
198
+ boxShadowColor: "#0000001a",
199
+ iconColor: globalTokens.hal_purple_s_38,
200
+ disabledIconColor: globalTokens.hal_grey_l_60,
201
+ iconSize: "24px",
132
202
  iconMarginLeft: "0px",
133
203
  iconMarginRigth: "12px",
134
- accordionGroupSeparatorBorderColor: "#00000024",
204
+ accordionGroupSeparatorBorderColor: "#0000001a",
135
205
  accordionGroupSeparatorBorderThickness: "1px",
136
206
  accordionGroupSeparatorBorderRadius: "0px",
137
207
  accordionGroupSeparatorBorderStyle: "solid"
138
208
  },
139
209
  alert: {
140
- overlayColor: globalTokens.black,
141
- infoColor: globalTokens.lightBlue,
142
- successColor: globalTokens.lightGreen,
143
- warningColor: globalTokens.lightYellow,
144
- errorColor: globalTokens.lightPink,
145
- focusColor: globalTokens.blue,
146
210
  titleFontFamily: globalTokens.type_sans,
211
+ titleFontColor: globalTokens.hal_black,
147
212
  titleFontSize: globalTokens.type_scale_01,
148
- titleFontColor: globalTokens.black,
213
+ titleFontStyle: globalTokens.type_normal,
149
214
  titleFontWeight: globalTokens.type_bold,
150
215
  titleTextTransform: globalTokens.type_uppercase,
151
- titleFontStyle: globalTokens.type_normal,
152
- titlePaddingRight: "10px",
216
+ titlePaddingRight: "0px",
153
217
  titlePaddingLeft: "0px",
154
- titlePaddingTop: "0px",
155
- titlePaddingBottom: "0px",
156
- contentFontFamily: globalTokens.type_sans,
157
- contentFontSize: globalTokens.type_scale_01,
158
- contentFontColor: globalTokens.black,
159
- contentFontWeight: globalTokens.type_normal,
160
- contentPaddingLeft: "46px",
161
- contentPaddingRight: "12px",
162
- contentPaddingTop: "8px",
163
- contentPaddingBottom: "20px",
164
- overlayOpacity: "0.8",
165
- boxShadowOffsetX: "0px",
166
- boxShadowOffsetY: "3px",
167
- boxShadowBlur: "6px",
168
- boxShadowColor: "#00000012",
218
+ inlineTextFontFamily: globalTokens.type_sans,
219
+ inlineTextFontColor: globalTokens.hal_black,
220
+ inlineTextFontSize: globalTokens.type_scale_01,
221
+ inlineTextFontStyle: globalTokens.type_normal,
222
+ inlineTextFontWeight: globalTokens.type_regular,
223
+ inlineTextPaddingLeft: "0px",
224
+ inlineTextPaddingRight: "0px",
225
+ contentPaddingLeft: "0px",
226
+ contentPaddingRight: "0px",
227
+ contentPaddingTop: "20px",
228
+ contentPaddingBottom: "30px",
169
229
  borderRadius: "4px",
170
- borderStyle: "none",
171
- borderThickness: "0px",
172
- borderColor: "transparent",
173
- height: "48px",
174
- inlineTextPaddingLeft: "10px",
175
- inlineTextPaddingRight: "10px",
176
- inlineTextPaddingTop: "0px",
177
- inlineTextPaddingBottom: "0px",
178
- iconPaddingLeft: "12px",
230
+ borderStyle: "solid",
231
+ borderThickness: "1px",
232
+ infoBorderColor: globalTokens.hal_blue_s_35,
233
+ successBorderColor: globalTokens.hal_green_s_39,
234
+ warningBorderColor: globalTokens.hal_yellow_d_40,
235
+ errorBorderColor: globalTokens.hal_red_s_41,
236
+ iconSize: "24px",
237
+ iconPaddingLeft: "0px",
179
238
  iconPaddingRight: "0px",
180
- iconPaddingTop: "0px",
181
- iconPaddingBottom: "0px",
182
- iconMaxWidth: "20px",
183
- iconMaxHeight: "20px",
184
- textPaddingLeft: "12px",
185
- textPaddingRight: "12px",
186
- textPaddingTop: "0px",
187
- textPaddingBottom: "0px"
188
- },
189
- button: {
190
- primaryBackgroundColor: globalTokens.purple,
191
- primaryBackgroundColorOnDark: "#581B81",
192
- primaryHoverBackgroundColor: globalTokens.black,
193
- primaryHoverBackgroundColorOnDark: "#581B81",
194
- primaryFontColor: globalTokens.white,
195
- primaryFontColorOnDark: "#000000",
196
- primaryHoverFontColor: globalTokens.white,
197
- primaryHoverFontColorOnDark: "#000000",
198
- primaryActiveBackgroundColor: globalTokens.mediumBlack,
199
- primaryActiveBackgroundColorOnDark: "#581B81",
200
- primaryDisabledBackgroundColor: globalTokens.lighterPurple,
201
- primaryDisabledBackgroundColorOnDark: "#ffffff57",
202
- primaryDisabledFontColor: globalTokens.white,
203
- primaryDisabledFontColorOnDark: "#000000",
204
- primaryBorderThickness: "0px",
205
- primaryBorderColor: "",
206
- primaryBorderColorOnDark: "",
207
- primaryBorderStyle: "none",
208
- primaryBorderRadius: "4px",
209
- primaryFontFamily: globalTokens.type_sans,
210
- primaryFontSize: globalTokens.type_scale_02,
211
- primaryFontWeight: globalTokens.type_regular,
212
- primaryPaddingTop: "12px",
213
- primaryPaddingBottom: "12px",
214
- secondaryOutlinedColor: globalTokens.purple,
215
- secondaryOutlinedColorOnDark: "#6A229A",
216
- secondaryBackgroundColor: globalTokens.transparent,
217
- secondaryBackgroundColorOnDark: "transparent",
218
- secondaryHoverOutlinedColor: globalTokens.black,
219
- secondaryHoverOutlinedColorOnDark: "#6A229A",
220
- secondaryFontColor: globalTokens.black,
221
- secondaryFontColorOnDark: "#FFFFFF",
222
- secondaryHoverFontColor: globalTokens.black,
223
- secondaryHoverFontColorOnDark: "#FFFFFF",
224
- secondaryActiveBackgroundColor: globalTokens.mediumGreyBlack,
225
- secondaryActiveBackgroundColorOnDark: "#FFFFFF29",
226
- secondaryHoverBackgroundColor: globalTokens.darkWhite,
227
- secondaryHoverBackgroundColorOnDark: "#FFFFFF14",
228
- secondaryDisabledOutlinedColor: globalTokens.lighterPurple,
229
- secondaryDisabledOutlinedColorOnDark: "#575757",
230
- secondaryDisabledFontColor: globalTokens.lighterBlack,
231
- secondaryDisabledFontColorOnDark: "#575757",
232
- secondaryBorderThickness: "2px",
233
- secondaryBorderStyle: "solid",
234
- secondaryBorderRadius: "4px",
235
- secondaryFontFamily: globalTokens.type_sans,
236
- secondaryFontSize: globalTokens.type_scale_02,
237
- secondaryFontWeight: globalTokens.type_regular,
238
- secondaryPaddingTop: "10px",
239
- secondaryPaddingBottom: "10px",
240
- textBackgroundColor: globalTokens.transparent,
241
- textBackgroundColorOnDark: "transparent",
242
- textHoverBackgroundColor: globalTokens.black,
243
- textHoverBackgroundColorOnDark: "#6A229A80",
244
- textFontColor: globalTokens.purple,
245
- textFontColorOnDark: "#FFFFFF",
246
- textHoverFontColor: globalTokens.white,
247
- textHoverFontColorOnDark: "#FFFFFF",
248
- textActiveBackgroundColor: globalTokens.mediumBlack,
249
- textActiveBackgroundColorOnDark: "#581B81",
250
- textDisabledFontColor: globalTokens.lighterPurple,
251
- textDisabledBackgroundColor: "transparent",
252
- textDisabledBackgroundColorOnDark: "transparent",
253
- textDisabledFontColorOnDark: "#FFFFFF80",
254
- textBorderThickness: "0px",
255
- textBorderColor: "",
256
- textBorderColorOnDark: "",
257
- textBorderStyle: "none",
258
- textBorderRadius: "4px",
259
- textFontFamily: globalTokens.type_sans,
260
- textFontSize: globalTokens.type_scale_02,
261
- textFontWeight: globalTokens.type_regular,
262
- textPaddingTop: "12px",
263
- textPaddingBottom: "12px",
264
- focusColor: globalTokens.blue,
265
- labelFontLineHeight: globalTokens.type_leading_normal,
266
- labelLetterSpacing: globalTokens.type_spacing_wide_01,
267
- labelTextTransform: globalTokens.type_uppercase,
268
- iconMaxHeight: "20px",
269
- iconMaxWidth: "20px",
270
- minHeight: "43px"
239
+ infoIconColor: globalTokens.hal_blue_s_35,
240
+ successIconColor: globalTokens.hal_green_s_39,
241
+ warningIconColor: globalTokens.hal_yellow_d_40,
242
+ errorIconColor: globalTokens.hal_red_s_41,
243
+ infoBackgroundColor: globalTokens.hal_blue_l_95,
244
+ successBackgroundColor: globalTokens.hal_green_l_95,
245
+ warningBackgroundColor: globalTokens.hal_yellow_l_95,
246
+ errorBackgroundColor: globalTokens.hal_red_l_95,
247
+ hoverActionBackgroundColor: "#0000000D",
248
+ activeActionBackgroundColor: "#0000001A",
249
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
250
+ overlayColor: "#000000B3"
271
251
  },
272
252
  box: {
273
253
  backgroundColor: globalTokens.white,
274
- fontFamily: globalTokens.type_sans,
275
- fontSize: globalTokens.type_scale_02,
276
- fontWeight: globalTokens.type_regular,
277
- fontColor: globalTokens.black,
278
254
  letterSpacing: globalTokens.type_spacing_wide_01,
279
255
  borderRadius: "4px",
280
256
  borderThickness: "0px",
281
257
  borderStyle: "none",
282
- borderColor: "transparent",
283
- noneShadowDepthShadowOffsetX: "0px",
284
- noneShadowDepthShadowOffsetY: "6px",
285
- noneShadowDepthShadowBlur: "10px",
286
- noneShadowDepthShadowSpread: "0px",
287
- noneShadowDepthShadowColor: "#00000033",
258
+ borderColor: globalTokens.transparent,
259
+ noneShadowDepthShadowOffsetX: "none",
260
+ noneShadowDepthShadowOffsetY: "none",
261
+ noneShadowDepthShadowBlur: "none",
262
+ noneShadowDepthShadowSpread: "none",
263
+ noneShadowDepthShadowColor: globalTokens.transparent,
288
264
  oneShadowDepthShadowOffsetX: "0px",
289
- oneShadowDepthShadowOffsetY: "6px",
290
- oneShadowDepthShadowBlur: "10px",
291
- oneShadowDepthShadowSpread: "-1px",
265
+ oneShadowDepthShadowOffsetY: "3px",
266
+ oneShadowDepthShadowBlur: "6px",
267
+ oneShadowDepthShadowSpread: "0px",
292
268
  oneShadowDepthShadowColor: "#00000033",
293
269
  twoShadowDepthShadowOffsetX: "0px",
294
- twoShadowDepthShadowOffsetY: "6px",
270
+ twoShadowDepthShadowOffsetY: "3px",
295
271
  twoShadowDepthShadowBlur: "10px",
296
- twoShadowDepthShadowSpread: "-2px",
272
+ twoShadowDepthShadowSpread: "0px",
297
273
  twoShadowDepthShadowColor: "#00000033"
298
274
  },
275
+ button: {
276
+ labelFontLineHeight: globalTokens.type_leading_normal,
277
+ labelLetterSpacing: globalTokens.type_spacing_wide_01,
278
+ paddingLeft: globalTokens.spacing_03,
279
+ paddingRight: globalTokens.spacing_03,
280
+ paddingTop: globalTokens.spacing_03,
281
+ paddingBottom: globalTokens.spacing_03,
282
+ focusBorderColor: globalTokens.hal_blue_l_50,
283
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
284
+ primaryBackgroundColor: globalTokens.hal_purple_s_38,
285
+ primaryBackgroundColorOnDark: globalTokens.hal_purple_s_38,
286
+ primaryFontColor: globalTokens.hal_white,
287
+ primaryFontColorOnDark: globalTokens.hal_white,
288
+ primaryHoverBackgroundColor: globalTokens.hal_purple_d_30,
289
+ primaryHoverBackgroundColorOnDark: globalTokens.color_purple_600,
290
+ primaryActiveBackgroundColor: globalTokens.hal_purple_d_20,
291
+ primaryActiveBackgroundColorOnDark: globalTokens.hal_purple_d_30,
292
+ primaryDisabledBackgroundColor: globalTokens.hal_grey_l_95,
293
+ primaryDisabledBackgroundColorOnDark: globalTokens.color_grey_800,
294
+ primaryDisabledFontColor: globalTokens.hal_grey_l_60,
295
+ primaryDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
296
+ primaryBorderThickness: globalTokens.border_width_0,
297
+ primaryBorderStyle: globalTokens.border_none,
298
+ primaryBorderRadius: globalTokens.border_radius_medium,
299
+ primaryFontFamily: globalTokens.type_sans,
300
+ primaryFontSize: globalTokens.type_scale_03,
301
+ primaryFontWeight: globalTokens.type_regular,
302
+ secondaryBackgroundColor: globalTokens.transparent,
303
+ secondaryBackgroundColorOnDark: globalTokens.transparent,
304
+ secondaryFontColor: globalTokens.hal_purple_s_38,
305
+ secondaryFontColorOnDark: globalTokens.hal_white,
306
+ secondaryHoverFontColor: globalTokens.hal_white,
307
+ secondaryHoverFontColorOnDark: globalTokens.hal_black,
308
+ secondaryBorderColor: globalTokens.hal_purple_s_38,
309
+ secondaryBorderColorOnDark: globalTokens.hal_white,
310
+ secondaryHoverBackgroundColor: globalTokens.hal_purple_s_38,
311
+ secondaryHoverBackgroundColorOnDark: globalTokens.hal_white,
312
+ secondaryActiveBackgroundColor: globalTokens.hal_purple_d_20,
313
+ secondaryActiveBackgroundColorOnDark: globalTokens.hal_grey_l_90,
314
+ secondaryDisabledBackgroundColor: globalTokens.transparent,
315
+ secondaryDisabledBackgroundColorOnDark: globalTokens.transparent,
316
+ secondaryDisabledFontColor: globalTokens.lighterBlack,
317
+ secondaryDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
318
+ secondaryDisabledBorderColor: globalTokens.hal_grey_l_60,
319
+ secondaryDisabledBorderColorOnDark: globalTokens.hal_grey_l_60,
320
+ secondaryBorderThickness: globalTokens.border_width_1,
321
+ secondaryBorderStyle: globalTokens.border_solid,
322
+ secondaryBorderRadius: globalTokens.border_radius_medium,
323
+ secondaryFontFamily: globalTokens.type_sans,
324
+ secondaryFontSize: globalTokens.type_scale_03,
325
+ secondaryFontWeight: globalTokens.type_regular,
326
+ textBackgroundColor: globalTokens.transparent,
327
+ textBackgroundColorOnDark: globalTokens.transparent,
328
+ textFontColor: globalTokens.hal_purple_s_38,
329
+ textFontColorOnDark: globalTokens.hal_white,
330
+ textHoverBackgroundColor: globalTokens.hal_purple_l_95,
331
+ textHoverBackgroundColorOnDark: globalTokens.color_grey_800,
332
+ textActiveBackgroundColor: globalTokens.hal_purple_l_90,
333
+ textActiveBackgroundColorOnDark: globalTokens.hal_grey_s_40,
334
+ textDisabledBackgroundColor: globalTokens.transparent,
335
+ textDisabledBackgroundColorOnDark: globalTokens.transparent,
336
+ textDisabledFontColor: globalTokens.hal_grey_l_60,
337
+ textDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
338
+ textBorderThickness: globalTokens.border_width_0,
339
+ textBorderStyle: globalTokens.border_none,
340
+ textBorderRadius: globalTokens.border_radius_medium,
341
+ textFontFamily: globalTokens.type_sans,
342
+ textFontSize: globalTokens.type_scale_03,
343
+ textFontWeight: globalTokens.type_regular
344
+ },
345
+ card: {
346
+ height: "220px",
347
+ width: "400px"
348
+ },
299
349
  checkbox: {
300
- backgroundColorChecked: globalTokens.mediumBlue,
301
- backgroundHoverColorChecked: "#7BB0D6",
302
- backgroundColorCheckedOnDark: "#FFFFFF",
303
- backgroundHoverColorCheckedOnDark: "#B1B1B1",
304
- borderColor: globalTokens.mediumBlue,
305
- borderHoverColor: "#7BB0D6",
306
- borderColorOnDark: "#FFFFFF",
307
- borderHoverColorOnDark: "#B1B1B1",
308
- checkColor: globalTokens.white,
309
- checkColorOnDark: "#0067B3",
350
+ backgroundColorChecked: globalTokens.hal_blue_s_35,
351
+ backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
352
+ hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
353
+ hoverBackgroundColorCheckedOnDark: global.hal_white,
354
+ disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
355
+ disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
356
+ borderColor: globalTokens.hal_blue_s_35,
357
+ borderColorOnDark: globalTokens.hal_grey_l_90,
358
+ hoverBorderColor: globalTokens.hal_blue_d_20,
359
+ hoverBorderColorOnDark: globalTokens.hal_white,
360
+ disabledBorderColor: globalTokens.hal_grey_l_60,
361
+ disabledBorderColorOnDark: globalTokens.color_grey_800,
362
+ checkColor: globalTokens.hal_white,
363
+ checkColorOnDark: globalTokens.hal_black,
364
+ disabledCheckColor: globalTokens.hal_white,
365
+ disabledCheckColorOnDark: globalTokens.hal_grey_l_60,
310
366
  fontFamily: globalTokens.type_sans,
311
- fontSize: globalTokens.type_scale_01,
312
- fontWeight: globalTokens.type_normal,
313
- fontColor: globalTokens.inherit,
314
- fontColorOnDark: "#FFFFFF",
315
- disabledBackgroundColorChecked: globalTokens.softBlue,
316
- disabledBackgroundColorCheckedOnDark: globalTokens.softBlue,
317
- disabledBorderColor: globalTokens.softBlue,
318
- disabledBorderColorOnDark: globalTokens.softBlue,
319
- disabledColorOnDark: "#BFBFBF",
320
- disabledCheckColor: globalTokens.white,
321
- disabledCheckColorOnDark: "#FFFFFF",
322
- disabledFontColor: globalTokens.lighterBlack,
323
- disabledFontColorOnDark: "#575757",
324
- focusColor: globalTokens.blue,
325
- checkLabelSpacing: "10px"
367
+ fontSize: globalTokens.type_scale_02,
368
+ fontWeight: globalTokens.type_regular,
369
+ fontColor: globalTokens.hal_black,
370
+ fontColorOnDark: globalTokens.hal_white,
371
+ disabledFontColor: globalTokens.hal_grey_l_60,
372
+ disabledFontColorOnDark: globalTokens.hal_grey_l_60,
373
+ focusColor: globalTokens.hal_blue_l_50,
374
+ focusColorOnDark: globalTokens.hal_blue_l_50,
375
+ checkLabelSpacing: "8px"
326
376
  },
327
377
  chip: {
328
- backgroundColor: globalTokens.darkWhite,
329
- borderColor: "transparent",
330
- fontColor: globalTokens.black,
331
- disabledBackgroundColor: globalTokens.mediumWhite,
332
- disabledFontColor: globalTokens.lighterBlack,
378
+ backgroundColor: globalTokens.hal_grey_l_90,
379
+ disabledBackgroundColor: globalTokens.hal_grey_l_95,
333
380
  fontFamily: globalTokens.type_sans,
334
381
  fontSize: globalTokens.type_scale_03,
335
- fontWeight: "400",
336
- fontStyle: "normal",
337
- borderRadius: "50px",
338
- borderThickness: "2px",
382
+ fontStyle: globalTokens.type_normal,
383
+ fontWeight: globalTokens.type_regular,
384
+ fontColor: globalTokens.hal_black,
385
+ disabledFontColor: globalTokens.hal_grey_l_60,
386
+ borderColor: globalTokens.transparent,
387
+ borderRadius: "80px",
388
+ borderThickness: "0px",
339
389
  borderStyle: "solid",
340
- height: "18px",
341
- contentPaddingLeft: "20px",
342
- contentPaddingRight: "20px",
343
- contentPaddingTop: "10px",
344
- contentPaddingBottom: "10px",
345
- iconMaxHeight: "24px",
346
- iconMaxWidth: "24px",
347
- suffixIconPaddingLeft: "0px",
348
- suffixIconPaddingRight: "0px",
349
- suffixIconPaddingTop: "0px",
350
- suffixIconPaddingBottom: "0px",
351
- prefixIconPaddingLeft: "0px",
352
- prefixIconPaddingRight: "0px",
353
- prefixIconPaddingTop: "0px",
354
- prefixIconPaddingBottom: "0px"
390
+ contentPaddingLeft: "16px",
391
+ contentPaddingRight: "16px",
392
+ contentPaddingTop: "0px",
393
+ contentPaddingBottom: "0px",
394
+ iconSize: "24px",
395
+ iconSpacing: "8px",
396
+ iconColor: globalTokens.hal_black,
397
+ disabledIconColor: globalTokens.hal_grey_l_60,
398
+ focusColor: globalTokens.hal_blue_l_50
355
399
  },
356
400
  date: {
357
401
  pickerSelectedDateBackgroundColor: globalTokens.purple,
358
- pickerSelectedDateColor: globalTokens.white,
359
- pickerBackgroundColor: globalTokens.white,
360
- pickerFontColor: globalTokens.black,
361
- pickerActualDate: globalTokens.lightGrey,
402
+ pickerSelectedDateColor: globalTokens.hal_white,
403
+ pickerBackgroundColor: globalTokens.hal_white,
404
+ pickerFontColor: globalTokens.hal_black,
362
405
  pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
363
- pickerHoverDateFontColor: globalTokens.black,
364
- scrollBarThumbColor: globalTokens.darkGrey,
365
- scrollBarTrackColor: globalTokens.lightGrey,
366
- focusColor: globalTokens.blue,
406
+ pickerHoverDateFontColor: globalTokens.hal_black,
407
+ pickerActualDateColor: globalTokens.lightGrey,
408
+ pickerYearColor: globalTokens.hal_black,
409
+ pickerMonthColor: globalTokens.hal_black,
410
+ pickerWeekLabelColor: globalTokens.hal_black,
411
+ pickerBackgroundColorMonthArrows: globalTokens.transparent,
412
+ focusColor: globalTokens.hal_blue_l_50,
367
413
  fontFamily: globalTokens.type_sans,
368
- fontSizeBase: globalTokens.type_scale_root,
369
- fontSize: globalTokens.type_scale_06
414
+ pickerHeight: "316px",
415
+ pickerWidth: "290px"
416
+ },
417
+ dateInput: {
418
+ pickerFontFamily: globalTokens.type_sans,
419
+ pickerBackgroundColor: globalTokens.hal_white,
420
+ pickerHoverDateFontColor: globalTokens.hal_black,
421
+ pickerHoverDateBackgroundColor: globalTokens.hal_purple_l_90,
422
+ pickerSelectedDateColor: globalTokens.hal_white,
423
+ pickerSelectedDateBackgroundColor: globalTokens.hal_purple_s_38,
424
+ pickerActualDateFontColor: globalTokens.hal_grey_l_60,
425
+ pickerYearFontColor: globalTokens.hal_black,
426
+ pickerMonthFontColor: globalTokens.hal_black,
427
+ pickerWeekFontColor: globalTokens.hal_black,
428
+ pickerDayFontColor: globalTokens.hal_black,
429
+ pickerMonthArrowsBackgroundColor: globalTokens.transparent,
430
+ pickerFocusColor: globalTokens.hal_blue_l_50,
431
+ pickerHeight: "316px",
432
+ pickerWidth: "290px"
370
433
  },
371
434
  dialog: {
372
- overlayColor: globalTokens.black,
373
- scrollBarThumbColor: globalTokens.darkGrey,
374
- scrollBarTrackColor: globalTokens.lightGrey,
375
- backgroundColor: globalTokens.white,
376
- fontFamily: globalTokens.type_sans,
377
- fontSize: globalTokens.type_scale_03,
378
- fontWeight: globalTokens.type_regular,
379
- fontColor: globalTokens.black,
380
- closeIconWidth: "34px",
381
- closeIconHeight: "34px",
435
+ overlayColor: globalTokens.hal_black,
436
+ backgroundColor: globalTokens.hal_white,
437
+ closeIconWidth: "24px",
438
+ closeIconHeight: "24px",
382
439
  closeIconTopPosition: "20px",
383
440
  closeIconRightPosition: "20px",
384
441
  closeIconBackgroundColor: "none",
385
442
  closeIconBorderColor: "none",
386
- closeIconColor: globalTokens.black,
443
+ closeIconColor: globalTokens.hal_black,
387
444
  closeIconBorderThickness: "0px",
388
445
  closeIconBorderStyle: "solid",
389
446
  closeIconBorderRadius: "0px",
@@ -391,152 +448,194 @@ var componentTokens = {
391
448
  boxShadowOffsetY: "1px",
392
449
  boxShadowBlur: "3px",
393
450
  boxShadowColor: "rgba(0, 0, 0, 0.2)",
394
- overlayOpacity: "0.8"
451
+ overlayOpacity: "0.7"
395
452
  },
396
453
  dropdown: {
397
- buttonBackgroundColor: globalTokens.white,
398
- buttonFontColor: globalTokens.black,
399
- optionsListBackgroundColor: globalTokens.white,
400
- optionsListFontColor: globalTokens.black,
401
- optionsListHoverBackgroundColor: globalTokens.white,
402
- buttonHoverBackgroundColor: globalTokens.white,
403
- scrollBarThumbColor: globalTokens.darkGrey,
404
- scrollBarTrackColor: globalTokens.lightGrey,
405
- focusColor: globalTokens.blue,
406
- fontFamily: globalTokens.type_sans,
407
- fontSize: globalTokens.type_scale_03,
454
+ buttonBackgroundColor: globalTokens.hal_white,
455
+ hoverButtonBackgroundColor: globalTokens.hal_grey_l_95,
456
+ activeButtonBackgroundColor: globalTokens.lightGrey,
457
+ buttonFontFamily: globalTokens.type_sans,
408
458
  buttonFontSize: globalTokens.type_scale_03,
409
459
  buttonFontStyle: globalTokens.type_normal,
410
460
  buttonFontWeight: globalTokens.type_regular,
411
- minHeight: "46px",
412
- minWidth: "230px",
413
- borderRadius: "2px",
461
+ buttonFontColor: globalTokens.hal_black,
462
+ buttonIconSize: "20px",
463
+ buttonIconSpacing: "10px",
464
+ buttonIconColor: globalTokens.hal_black,
465
+ buttonPaddingTop: "0px",
466
+ buttonPaddingBottom: "0px",
467
+ buttonPaddingLeft: "16px",
468
+ buttonPaddingRight: "16px",
469
+ disabledColor: globalTokens.lighterBlack,
470
+ disabledButtonBackgroundColor: globalTokens.transparent,
471
+ disabledBorderColor: globalTokens.lighterBlack,
472
+ optionBackgroundColor: globalTokens.hal_white,
473
+ hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
474
+ activeOptionBackgroundColor: globalTokens.lightGrey,
475
+ optionFontFamily: globalTokens.type_sans,
476
+ optionFontSize: globalTokens.type_scale_root,
477
+ optionFontStyle: globalTokens.type_normal,
478
+ optionFontWeight: globalTokens.type_regular,
479
+ optionFontColor: globalTokens.hal_black,
480
+ optionIconSize: "20px",
481
+ optionIconSpacing: "10px",
482
+ optionIconColor: globalTokens.hal_black,
483
+ optionPaddingTop: "6px",
484
+ optionPaddingBottom: "6px",
485
+ optionPaddingLeft: "16px",
486
+ optionPaddingRight: "16px",
487
+ caretIconSize: "24px",
488
+ caretIconColor: globalTokens.hal_black,
489
+ caretIconSpacing: "12px",
490
+ borderRadius: "4px",
414
491
  borderStyle: "none",
415
492
  borderThickness: "0px",
416
- borderColor: "transparent",
417
- optionsPaddingTop: "6px",
418
- optionsPaddingBottom: "6px",
419
- optionsPaddingLeft: "6px",
420
- optionsPaddingRight: "6px",
421
- caretIconMarginRight: "10px",
422
- caretIconMarginLeft: "10px",
423
- caretIconMarginTop: "0px",
424
- caretIconMarginBottom: "0px",
425
- optionsFontColor: "",
426
- optionsFontSize: globalTokens.type_scale_root,
427
- optionsFontStyle: globalTokens.type_normal,
428
- optionsFontWeight: globalTokens.type_regular
493
+ borderColor: globalTokens.transparent,
494
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
495
+ scrollBarTrackColor: globalTokens.lightGrey,
496
+ focusColor: globalTokens.hal_blue_l_50
497
+ },
498
+ fileInput: {
499
+ dropBorderColor: globalTokens.hal_black,
500
+ fileItemBorderColor: globalTokens.hal_grey_l_80,
501
+ fileNameFontColor: globalTokens.hal_black,
502
+ labelFontColor: globalTokens.hal_black,
503
+ helperTextFontColor: globalTokens.hal_black,
504
+ dropLabelFontColor: globalTokens.hal_black,
505
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
506
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
507
+ disabledDropLabelFontColor: globalTokens.hal_grey_l_60,
508
+ focusDropBorderColor: globalTokens.hal_blue_l_50,
509
+ disabledDropBorderColor: globalTokens.hal_grey_l_60,
510
+ focusDropBackgroundColor: globalTokens.color_blue_50,
511
+ hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
512
+ activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
513
+ errorFileItemBorderColor: globalTokens.hal_red_s_41,
514
+ errorFileItemBackgroundColor: globalTokens.color_red_50,
515
+ errorFileItemIconBackgroundColor: globalTokens.color_red_700,
516
+ errorFileItemIconColor: globalTokens.hal_red_s_41,
517
+ fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
518
+ fileItemIconColor: globalTokens.color_grey_600,
519
+ errorMessageFontColor: globalTokens.hal_red_s_41,
520
+ labelFontFamily: globalTokens.type_sans,
521
+ labelFontSize: globalTokens.type_scale_02,
522
+ labelFontWeight: globalTokens.type_semibold,
523
+ labelLineHeight: globalTokens.type_leading_loose_01,
524
+ fileItemFontFamily: globalTokens.type_sans,
525
+ fileItemFontSize: globalTokens.type_scale_02,
526
+ fileItemFontWeight: globalTokens.type_regular,
527
+ fileItemLineHeight: globalTokens.type_leading_normal,
528
+ helperTextFontFamily: globalTokens.type_sans,
529
+ helperTextFontSize: globalTokens.type_scale_01,
530
+ helperTextFontWeight: globalTokens.type_regular,
531
+ helperTextLineHeight: globalTokens.type_leading_normal,
532
+ dropLabelFontFamily: globalTokens.type_sans,
533
+ dropLabelFontSize: globalTokens.type_scale_03,
534
+ dropLabelFontWeight: globalTokens.type_regular,
535
+ errorMessageFontFamily: globalTokens.type_sans,
536
+ errorMessageFontSize: globalTokens.type_scale_01,
537
+ errorMessageFontWeight: globalTokens.type_regular,
538
+ errorMessageLineHeight: globalTokens.type_scale_05,
539
+ dropBorderThickness: globalTokens.border_width_1,
540
+ dropBorderStyle: globalTokens.border_dashed,
541
+ dropBorderRadius: globalTokens.border_radius_large,
542
+ fileItemBorderThickness: globalTokens.border_width_1,
543
+ fileItemBorderStyle: globalTokens.border_solid,
544
+ fileItemBorderRadius: globalTokens.border_radius_medium,
545
+ hoverDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_95,
546
+ activeDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_80,
547
+ errorHoverDeleteFileItemBackgroundColor: globalTokens.hal_red_l_95,
548
+ errorActiveDeleteFileItemBackgroundColor: globalTokens.hal_red_s_41
429
549
  },
430
550
  footer: {
431
- backgroundColor: globalTokens.black,
432
- bottomLinksDividerColor: globalTokens.mediumBlue,
433
- bottomLinksDividerThickness: "2px",
551
+ height: "124px",
552
+ backgroundColor: globalTokens.hal_black,
553
+ bottomLinksDividerColor: globalTokens.hal_blue_l_50,
554
+ bottomLinksDividerThickness: "1px",
434
555
  bottomLinksDividerStyle: "solid",
435
- bottomLinksDividerSpacing: "6px",
556
+ bottomLinksDividerSpacing: "8px",
436
557
  bottomLinksFontFamily: globalTokens.type_sans,
437
558
  bottomLinksFontSize: globalTokens.type_scale_01,
438
559
  bottomLinksFontStyle: globalTokens.type_normal,
439
560
  bottomLinksFontWeight: globalTokens.type_regular,
440
- bottomLinksFontColor: "",
561
+ bottomLinksFontColor: globalTokens.hal_white,
441
562
  bottomLinksTextDecoration: globalTokens.type_no_line,
442
563
  copyrightFontFamily: globalTokens.type_sans,
443
564
  copyrightFontSize: globalTokens.type_scale_01,
444
565
  copyrightFontStyle: globalTokens.type_normal,
445
566
  copyrightFontWeight: globalTokens.type_regular,
446
- copyrightFontColor: "",
447
- customContentFontFamily: globalTokens.type_sans,
448
- customContentFontSize: globalTokens.type_scale_root,
449
- customContentFontStyle: globalTokens.type_normal,
450
- customContentFontWeight: globalTokens.type_regular,
451
- customContentFontColor: "",
452
- fontColorBase: globalTokens.white,
453
- logo: _dxc_logo_wht["default"],
454
- logoHeight: "34px",
567
+ copyrightFontColor: globalTokens.hal_white,
568
+ logo: _Icons2["default"],
569
+ logoHeight: "32px",
455
570
  logoWidth: "auto",
456
- minHeight: "120px",
457
- socialIconWidth: "25px",
458
- socialIconHeight: "25px",
459
- socialIconsGutter: "15px"
571
+ socialLinksSize: "24px",
572
+ socialLinksGutter: "16px",
573
+ socialLinksColor: globalTokens.hal_white
460
574
  },
461
575
  header: {
462
- backgroundColor: globalTokens.white,
463
- customContentFontFamily: "",
464
- customContentFontStyle: globalTokens.type_normal,
465
- customContentFontColor: "",
466
- customContentFontSize: "",
467
- customContentFontWeight: globalTokens.type_regular,
468
- dropdownBackgroundColor: globalTokens.transparent,
469
- dropdownHoverBackgroundColor: globalTokens.transparent,
470
- fontColorBase: globalTokens.black,
471
- fontFamilyBase: globalTokens.type_sans,
472
- fontSizeBase: globalTokens.type_scale_root,
473
- hamburguerFocusColor: globalTokens.blue,
474
- hamburguerFontFamily: "",
576
+ backgroundColor: globalTokens.hal_white,
577
+ hamburguerFocusColor: globalTokens.hal_blue_l_50,
578
+ hamburguerFontFamily: globalTokens.type_sans,
475
579
  hamburguerFontStyle: globalTokens.type_normal,
476
- hamburguerFontColor: "",
477
- hamburguerFontSize: globalTokens.fontSize10,
580
+ hamburguerFontColor: globalTokens.hal_black,
581
+ hamburguerFontSize: "10px",
478
582
  hamburguerFontWeight: globalTokens.type_semibold,
479
- hamburguerColor: globalTokens.black,
480
- hamburguerHoverColor: globalTokens.mediumGreyBlack,
481
583
  hamburguerTextTransform: globalTokens.type_uppercase,
482
- logo: _dxc_logo_blk_rgb["default"],
483
- logoResponsive: _dxc_logo_blk_rgb["default"],
484
- logoHeight: "32px",
584
+ hamburguerIconColor: globalTokens.hal_black,
585
+ hamburguerHoverColor: globalTokens.mediumGreyBlack,
586
+ logo: _Icons.dxcLogo,
587
+ logoResponsive: _Icons.dxcLogo,
588
+ logoHeight: "40px",
485
589
  logoWidth: "auto",
486
- menuBackgroundColor: globalTokens.white,
590
+ menuBackgroundColor: globalTokens.hal_white,
487
591
  menuZindex: "2000",
488
592
  menuTabletWidth: "60vw",
489
593
  menuMobileWidth: "100vw",
490
- menuCustomContentFontFamily: "",
491
- menuCustomContentFontStyle: globalTokens.type_normal,
492
- menuCustomContentFontColor: "",
493
- menuCustomContentFontSize: "",
494
- menuCustomContentFontWeight: globalTokens.type_regular,
495
594
  minHeight: "64px",
496
595
  overlayColor: globalTokens.softBlack,
497
596
  overlayOpacity: "0.7",
498
597
  overlayZindex: "1600",
499
598
  paddingTop: "0px",
500
599
  paddingBottom: "0px",
501
- paddingRight: "0px",
502
- paddingLeft: "20px",
503
- underlinedColor: globalTokens.black,
600
+ paddingRight: "24px",
601
+ paddingLeft: "24px",
602
+ underlinedColor: globalTokens.hal_black,
504
603
  underlinedThickness: "2px",
505
- underlinedStyle: "solid"
604
+ underlinedStyle: "solid",
605
+ contentColor: globalTokens.hal_black,
606
+ contentColorOnDark: globalTokens.hal_white
506
607
  },
507
608
  heading: {
508
- fontColorBase: globalTokens.inherit,
509
- fontFamilyBase: globalTokens.type_sans,
510
- level1FontColor: "",
511
- level1FontFamily: "",
609
+ level1FontColor: globalTokens.inherit,
610
+ level1FontFamily: globalTokens.type_sans,
512
611
  level1FontSize: globalTokens.type_scale_08,
513
612
  level1FontStyle: globalTokens.type_normal,
514
613
  level1FontWeight: globalTokens.type_regular,
515
614
  level1LineHeight: globalTokens.type_leading_compact_01,
516
615
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
517
- level2FontColor: "",
518
- level2FontFamily: "",
616
+ level2FontColor: globalTokens.inherit,
617
+ level2FontFamily: globalTokens.type_sans,
519
618
  level2FontSize: globalTokens.type_scale_07,
520
619
  level2FontStyle: globalTokens.type_normal,
521
620
  level2FontWeight: globalTokens.type_regular,
522
621
  level2LineHeight: globalTokens.type_leading_normal,
523
622
  level2LetterSpacing: globalTokens.type_spacing_normal,
524
- level3FontColor: "",
525
- level3FontFamily: "",
623
+ level3FontColor: globalTokens.inherit,
624
+ level3FontFamily: globalTokens.type_sans,
526
625
  level3FontSize: globalTokens.type_scale_06,
527
626
  level3FontStyle: globalTokens.type_normal,
528
627
  level3FontWeight: globalTokens.type_regular,
529
628
  level3LineHeight: globalTokens.type_leading_compact_01,
530
629
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
531
- level4FontColor: "",
532
- level4FontFamily: "",
630
+ level4FontColor: globalTokens.inherit,
631
+ level4FontFamily: globalTokens.type_sans,
533
632
  level4FontSize: globalTokens.type_scale_05,
534
633
  level4FontStyle: globalTokens.type_normal,
535
634
  level4FontWeight: globalTokens.type_regular,
536
635
  level4LineHeight: globalTokens.type_leading_normal,
537
636
  level4LetterSpacing: globalTokens.type_spacing_normal,
538
- level5FontColor: "",
539
- level5FontFamily: "",
637
+ level5FontColor: globalTokens.inherit,
638
+ level5FontFamily: globalTokens.type_sans,
540
639
  level5FontSize: globalTokens.type_scale_04,
541
640
  level5FontStyle: globalTokens.type_normal,
542
641
  level5FontWeight: globalTokens.type_regular,
@@ -544,44 +643,178 @@ var componentTokens = {
544
643
  level5LetterSpacing: globalTokens.type_spacing_wide_01
545
644
  },
546
645
  inputText: {
547
- fontColor: globalTokens.black,
548
- disabledFontColor: globalTokens.lighterBlack,
549
- error: globalTokens.red,
550
- selectedOptionBackgroundColor: globalTokens.lightWhite,
551
- hoverOptionColor: globalTokens.black,
646
+ fontFamily: globalTokens.type_sans,
647
+ assistiveTextFontColor: globalTokens.black,
648
+ assistiveTextFontColorOnDark: globalTokens.white,
649
+ assistiveTextFontSize: globalTokens.type_scale_01,
650
+ assistiveTextFontStyle: globalTokens.type_normal,
651
+ assistiveTextFontWeight: globalTokens.type_regular,
652
+ disabledColor: globalTokens.lighterBlack,
653
+ disabledColorOnDark: "#575757",
654
+ errorColor: globalTokens.red,
655
+ errorColorOnDark: globalTokens.hal_red_l_60,
656
+ optionBackgroundColor: globalTokens.white,
657
+ optionBorderColor: globalTokens.black,
658
+ optionBorderThickness: "0px",
659
+ optionBorderStyle: "solid",
660
+ optionFontColor: globalTokens.black,
661
+ optionFontColorOnDark: globalTokens.white,
662
+ optionFontSize: globalTokens.type_scale_03,
663
+ optionFontStyle: globalTokens.type_normal,
664
+ optionFontWeight: globalTokens.type_regular,
665
+ optionPaddingBottom: "6px",
666
+ optionPaddingTop: "6px",
552
667
  scrollBarThumbColor: globalTokens.darkGrey,
553
668
  scrollBarTrackColor: globalTokens.lightGrey,
669
+ hoverOptionColor: globalTokens.black,
670
+ hoverOptionBackgroundColor: globalTokens.lightWhite,
671
+ hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
672
+ selectedOptionBackgroundColor: globalTokens.lightGrey,
673
+ selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
674
+ labelFontColor: globalTokens.black,
675
+ labelFontColorOnDark: globalTokens.white,
676
+ labelFontSize: globalTokens.type_scale_03,
677
+ labelFontStyle: globalTokens.type_normal,
678
+ labelFontWeight: globalTokens.type_regular,
679
+ valueFontColor: globalTokens.black,
680
+ valueFontColorOnDark: globalTokens.white,
681
+ valueFontSize: globalTokens.type_scale_03,
682
+ valueFontStyle: globalTokens.type_normal,
683
+ valueFontWeight: globalTokens.type_regular,
684
+ prefixIconColor: globalTokens.black,
685
+ prefixIconColorOnDark: globalTokens.white,
686
+ prefixLabelFontColor: globalTokens.black,
687
+ prefixLabelFontColorOnDark: globalTokens.white,
688
+ prefixLabelFontSize: globalTokens.type_scale_03,
689
+ prefixLabelFontStyle: globalTokens.type_normal,
690
+ prefixLabelFontWeight: globalTokens.type_regular,
691
+ suffixIconColor: globalTokens.black,
692
+ suffixIconColorOnDark: globalTokens.white,
693
+ suffixLabelFontColor: globalTokens.black,
694
+ suffixLabelFontColorOnDark: globalTokens.white,
695
+ suffixLabelFontSize: globalTokens.type_scale_03,
696
+ suffixLabelFontStyle: globalTokens.type_normal,
697
+ suffixLabelFontWeight: globalTokens.type_regular,
698
+ underlineColor: globalTokens.black,
699
+ underlineColorOnDark: globalTokens.white,
700
+ underlineFocusColor: globalTokens.black,
701
+ underlineFocusColorOnDark: globalTokens.white,
702
+ underlineThickness: "1px"
703
+ },
704
+ textInput: {
554
705
  fontFamily: globalTokens.type_sans,
555
- fontSizeBase: globalTokens.type_scale_root,
556
- fontSize: globalTokens.type_scale_03
706
+ enabledBorderColor: globalTokens.hal_black,
707
+ enabledBorderColorOnDark: globalTokens.hal_white,
708
+ hoverBorderColor: globalTokens.hal_purple_l_65,
709
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
710
+ focusBorderColor: globalTokens.hal_blue_l_50,
711
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
712
+ disabledBorderColor: globalTokens.hal_grey_l_60,
713
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
714
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
715
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
716
+ errorBorderColor: globalTokens.hal_red_s_41,
717
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
718
+ hoverErrorBorderColor: globalTokens.color_red_600,
719
+ hoverErrorBorderColorOnDark: "#fe677b",
720
+ errorMessageColor: globalTokens.hal_red_s_41,
721
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
722
+ errorIconColor: globalTokens.hal_red_s_41,
723
+ errorIconColorOnDark: globalTokens.hal_red_l_60,
724
+ labelFontColor: globalTokens.hal_black,
725
+ labelFontColorOnDark: globalTokens.hal_white,
726
+ labelFontSize: globalTokens.type_scale_02,
727
+ labelFontStyle: globalTokens.type_normal,
728
+ labelFontWeight: globalTokens.type_semibold,
729
+ labelLineHeight: globalTokens.type_leading_loose_01,
730
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
731
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
732
+ optionalLabelFontWeight: globalTokens.type_regular,
733
+ helperTextFontColor: globalTokens.hal_black,
734
+ helperTextFontColorOnDark: globalTokens.hal_white,
735
+ helperTextFontSize: globalTokens.type_scale_01,
736
+ helperTextFontStyle: globalTokens.type_normal,
737
+ helperTextFontWeight: globalTokens.type_regular,
738
+ helperTextLineHeight: globalTokens.type_leading_normal,
739
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
740
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
741
+ prefixColor: globalTokens.hal_grey_s_40,
742
+ prefixColorOnDark: globalTokens.hal_white,
743
+ suffixColor: globalTokens.hal_grey_s_40,
744
+ suffixColorOnDark: globalTokens.hal_white,
745
+ disabledPrefixColor: globalTokens.hal_grey_l_75,
746
+ disabledSuffixColor: globalTokens.hal_grey_l_75,
747
+ disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
748
+ disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
749
+ placeholderFontColor: "#808080",
750
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
751
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
752
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
753
+ valueFontColor: globalTokens.hal_black,
754
+ valueFontColorOnDark: globalTokens.hal_white,
755
+ valueFontSize: globalTokens.type_scale_03,
756
+ valueFontStyle: globalTokens.type_normal,
757
+ valueFontWeight: globalTokens.type_regular,
758
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
759
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
760
+ actionIconColor: globalTokens.hal_black,
761
+ actionIconColorOnDark: globalTokens.hal_white,
762
+ disabledActionIconColor: globalTokens.hal_grey_l_60,
763
+ disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
764
+ hoverActionIconColor: globalTokens.hal_black,
765
+ hoverActionIconColorOnDark: globalTokens.hal_white,
766
+ focusActionIconColor: globalTokens.hal_black,
767
+ focusActionIconColorOnDark: globalTokens.hal_white,
768
+ activeActionIconColor: globalTokens.hal_black,
769
+ activeActionIconColorOnDark: globalTokens.hal_black,
770
+ actionBackgroundColor: globalTokens.transparent,
771
+ actionBackgroundColorOnDark: globalTokens.transparent,
772
+ disabledActionBackgroundColor: globalTokens.transparent,
773
+ disabledActionBackgroundColorOnDark: globalTokens.transparent,
774
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
775
+ hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
776
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
777
+ focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
778
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
779
+ activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
780
+ listOptionFontColor: globalTokens.hal_black,
781
+ listOptionFontSize: globalTokens.type_scale_03,
782
+ listOptionFontStyle: globalTokens.type_normal,
783
+ listOptionFontWeight: globalTokens.type_regular,
784
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
785
+ errorMessageBorderColor: globalTokens.hal_red_s_41,
786
+ errorMessageBackgroundColor: globalTokens.hal_red_l_95,
787
+ hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
788
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
557
789
  },
558
790
  link: {
559
- disabledColor: globalTokens.lightGrey,
560
- disabledUnderlineColor: globalTokens.lightGrey,
561
- fontColor: globalTokens.blue,
791
+ fontColor: globalTokens.hal_blue_s_35,
562
792
  fontFamily: globalTokens.inherit,
563
793
  fontSize: globalTokens.type_scale_root,
564
794
  fontStyle: globalTokens.type_normal,
565
795
  fontWeight: globalTokens.type_regular,
566
- hoverFontColor: globalTokens.darkBlue,
567
- hoverUnderlineColor: globalTokens.darkBlue,
568
- iconWidth: "16px",
569
- iconHeight: "16px",
570
- iconGutter: "6px",
571
- underlineColor: globalTokens.blue,
572
- underlineSpacing: "1px",
796
+ iconSize: "16px",
797
+ iconSpacing: "4px",
798
+ underlineSpacing: "0px",
573
799
  underlineStyle: "solid",
574
800
  underlineThickness: "1px",
575
- visitedFontColor: globalTokens.violet,
576
- visitedUnderlineColor: globalTokens.violet
801
+ disabledColor: globalTokens.lightGrey,
802
+ hoverFontColor: globalTokens.hal_blue_s_35,
803
+ hoverUnderlineColor: globalTokens.hal_blue_s_35,
804
+ visitedFontColor: globalTokens.purple,
805
+ visitedUnderlineColor: globalTokens.purple,
806
+ activeFontColor: globalTokens.black,
807
+ activeUnderlineColor: globalTokens.black,
808
+ focusColor: globalTokens.hal_blue_l_50
577
809
  },
578
810
  paginator: {
579
811
  backgroundColor: globalTokens.darkWhite,
580
- fontColor: globalTokens.black,
812
+ fontColor: globalTokens.hal_black,
581
813
  fontFamily: globalTokens.type_sans,
582
814
  fontSize: globalTokens.type_scale_02,
583
815
  fontStyle: globalTokens.type_normal,
584
816
  fontWeight: globalTokens.type_regular,
817
+ fontTextTransform: "none",
585
818
  height: "64px",
586
819
  width: "100%",
587
820
  marginRight: "40px",
@@ -594,20 +827,29 @@ var componentTokens = {
594
827
  totalItemsContainerMarginLeft: "0px"
595
828
  },
596
829
  progressBar: {
597
- trackLineColor: globalTokens.purple,
830
+ trackLineColor: globalTokens.hal_purple_s_38,
831
+ trackLineColorOnDark: globalTokens.hal_purple_l_65,
598
832
  totalLineColor: globalTokens.softGrey,
599
833
  labelFontFamily: globalTokens.type_sans,
600
834
  labelFontSize: globalTokens.type_scale_01,
601
835
  labelFontStyle: globalTokens.type_normal,
602
836
  labelFontWeight: globalTokens.type_regular,
603
837
  labelFontColor: globalTokens.black,
838
+ labelFontColorOnDark: globalTokens.hal_white,
604
839
  labelFontTextTransform: globalTokens.type_uppercase,
605
840
  valueFontFamily: globalTokens.type_sans,
606
841
  valueFontSize: globalTokens.type_scale_01,
607
842
  valueFontStyle: globalTokens.type_normal,
608
843
  valueFontWeight: globalTokens.type_regular,
609
844
  valueFontColor: globalTokens.black,
845
+ valueFontColorOnDark: globalTokens.hal_white,
610
846
  valueFontTextTransform: globalTokens.type_uppercase,
847
+ helperTextFontColor: globalTokens.black,
848
+ helperTextFontColorOnDark: globalTokens.hal_white,
849
+ helperTextFontSize: globalTokens.type_scale_01,
850
+ helperTextFontStyle: globalTokens.type_normal,
851
+ helperTextFontWeight: globalTokens.type_regular,
852
+ helperTextFontFamily: globalTokens.type_sans,
611
853
  thickness: "9px",
612
854
  borderRadius: "5px",
613
855
  overlayColor: globalTokens.black,
@@ -615,15 +857,14 @@ var componentTokens = {
615
857
  },
616
858
  radio: {
617
859
  circleLabelSpacing: "10px",
618
- circleHeight: "24px",
619
- circleWidth: "24px",
860
+ circleSize: "24px",
620
861
  color: globalTokens.black,
621
862
  colorOnDark: globalTokens.white,
622
863
  disabledColor: globalTokens.lighterBlack,
623
864
  disabledColorOnDark: "#575757",
624
865
  disabledFontColor: globalTokens.lighterBlack,
625
866
  disabledFontColorOnDark: "#575757",
626
- focusColor: globalTokens.blue,
867
+ focusColor: globalTokens.hal_blue_l_50,
627
868
  focusColorOnDark: "#1682FF",
628
869
  fontColor: globalTokens.inherit,
629
870
  fontColorOnDark: globalTokens.white,
@@ -633,77 +874,176 @@ var componentTokens = {
633
874
  fontWeight: globalTokens.type_regular
634
875
  },
635
876
  select: {
636
- checkboxOptionSpacing: "10px",
637
- color: globalTokens.black,
638
- colorOnDark: globalTokens.white,
639
- disabledColor: globalTokens.lighterBlack,
640
- disabledColorOnDark: "#575757",
641
- errorColor: globalTokens.red,
642
- errorColorOnDark: "#FE344F",
643
- focusColor: globalTokens.blue,
644
- focusColorOnDark: globalTokens.blue,
645
877
  fontFamily: globalTokens.type_sans,
646
- hoveredOptionBackgroundColor: globalTokens.lightWhite,
647
- hoveredOptionBackgroundColorOnDark: globalTokens.lightWhite,
648
- iconColor: "",
649
- iconOptionSpacing: "10px",
650
- iconHeight: "20px",
651
- iconWidth: "20px",
878
+ disabledColor: globalTokens.hal_grey_l_60,
879
+ enabledInputBorderColor: globalTokens.hal_black,
880
+ hoverInputBorderColor: globalTokens.hal_purple_l_65,
881
+ focusInputBorderColor: globalTokens.hal_blue_l_50,
882
+ errorInputBorderColor: globalTokens.hal_red_s_41,
883
+ hoverInputErrorBorderColor: globalTokens.color_red_600,
884
+ disabledInputBorderColor: globalTokens.hal_grey_l_60,
885
+ errorColor: globalTokens.hal_red_s_41,
886
+ labelFontColor: globalTokens.hal_black,
887
+ labelFontSize: globalTokens.type_scale_02,
888
+ labelFontStyle: globalTokens.type_normal,
889
+ labelFontWeight: globalTokens.type_semibold,
890
+ labelLineHeight: globalTokens.type_leading_loose_01,
891
+ optionalLabelFontWeight: globalTokens.type_regular,
892
+ // new
893
+ helperTextFontColor: globalTokens.hal_black,
894
+ helperTextFontSize: globalTokens.type_scale_01,
895
+ helperTextFontStyle: globalTokens.type_normal,
896
+ helperTextFontWeight: globalTokens.type_regular,
897
+ helperTextLineHeight: globalTokens.type_leading_normal,
898
+ placeholderFontColor: "#000000b3",
899
+ valueFontColor: globalTokens.hal_black,
900
+ valueFontSize: globalTokens.type_scale_03,
901
+ valueFontStyle: globalTokens.type_normal,
902
+ valueFontWeight: globalTokens.type_regular,
903
+ actionIconColor: globalTokens.hal_black,
904
+ // new
905
+ hoverActionIconColor: globalTokens.hal_black,
906
+ activeActionIconColor: globalTokens.hal_black,
907
+ actionBackgroundColor: globalTokens.transparent,
908
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
909
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
910
+ disabledActionBackgroundColor: globalTokens.transparent,
911
+ errorMessageFontSize: globalTokens.type_scale_01,
912
+ errorMessagetFontStyle: globalTokens.type_normal,
913
+ errorMessageFontWeight: globalTokens.type_regular,
914
+ errorMessagetLineHeight: globalTokens.type_leading_normal,
915
+ listItemFontColor: globalTokens.hal_black,
916
+ listItemFontSize: globalTokens.type_scale_02,
917
+ listItemFontStyle: globalTokens.type_normal,
918
+ listItemFontWeight: globalTokens.type_regular,
919
+ listItemIconColor: globalTokens.hal_black,
920
+ listGroupItemFontWeight: globalTokens.type_semibold,
921
+ listItemDividerColor: globalTokens.hal_grey_l_90,
922
+ focusListItemBorderColor: globalTokens.hal_blue_l_50,
923
+ // new
924
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
925
+ // new
926
+ collapseIndicatorColor: globalTokens.hal_black,
927
+ itemListBackgroundColor: globalTokens.hal_white,
928
+ // new
929
+ itemListBorderColor: globalTokens.hal_grey_l_75,
930
+ // new
931
+ selectedListItemBackgroundColor: globalTokens.hal_blue_l_95,
932
+ selectedHoverListItemBackgroundColor: globalTokens.color_blue_200,
933
+ selectedActiveListItemBackgroundColor: globalTokens.hal_blue_l_80,
934
+ selectedListItemIconColor: globalTokens.hal_blue_d_20,
935
+ unselectedHoverListItemBackgroundColor: globalTokens.hal_grey_l_95,
936
+ unselectedActiveListItemBackgroundColor: globalTokens.hal_grey_l_90,
937
+ selectionIndicatorFontColor: globalTokens.hal_black,
938
+ // new
939
+ selectionIndicatorFontSize: "11px",
940
+ // new
941
+ selectionIndicatorFontStyle: globalTokens.type_regular,
942
+ // new
943
+ selectionIndicatorFontWeight: globalTokens.type_normal,
944
+ // new
945
+ selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
946
+ selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
947
+ enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
948
+ enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
949
+ // new
950
+ hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
951
+ hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
952
+ // new
953
+ activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
954
+ activeSelectionIndicatorActionIconColor: globalTokens.hal_black // new
955
+
956
+ },
957
+ V3Select: {
958
+ fontFamily: globalTokens.type_sans,
959
+ assistiveTextFontColor: globalTokens.hal_black,
960
+ assistiveTextFontColorOnDark: globalTokens.hal_white,
961
+ assistiveTextFontSize: globalTokens.type_scale_01,
962
+ assistiveTextFontStyle: globalTokens.type_normal,
963
+ assistiveTextFontWeight: globalTokens.type_regular,
964
+ labelFontColor: globalTokens.hal_black,
965
+ labelFontColorOnDark: globalTokens.hal_white,
652
966
  labelFontSize: globalTokens.type_scale_03,
653
967
  labelFontStyle: globalTokens.type_normal,
654
968
  labelFontWeight: globalTokens.type_regular,
969
+ disabledColor: globalTokens.lighterBlack,
970
+ disabledColorOnDark: "#575757",
971
+ errorColor: globalTokens.red,
972
+ errorColorOnDark: globalTokens.hal_red_l_60,
973
+ optionBackgroundColor: globalTokens.hal_white,
974
+ optionBorderColor: globalTokens.hal_black,
975
+ optionBorderThickness: "0px",
976
+ optionBorderStyle: "solid",
977
+ optionFontColor: globalTokens.hal_black,
978
+ optionFontColorOnDark: globalTokens.hal_white,
979
+ optionFontSize: globalTokens.type_scale_root,
980
+ optionFontStyle: globalTokens.type_normal,
981
+ optionFontWeight: globalTokens.type_regular,
655
982
  optionPaddingBottom: "6px",
656
983
  optionPaddingTop: "6px",
657
- optionPaddingLeft: "16px",
658
- optionPaddingRight: "16px",
659
- optionsBackgroundColor: globalTokens.white,
660
- optionsBorderColor: "none",
661
- optionsBorderThickness: "0px",
662
- optionsBorderStyle: "solid",
663
- optionsFontColor: "",
664
- optionsFontSize: globalTokens.type_scale_root,
665
- optionsFontStyle: globalTokens.type_normal,
666
- optionsFontWeight: globalTokens.type_regular,
667
- scrollBarThumbColor: globalTokens.darkGrey,
984
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
668
985
  scrollBarTrackColor: globalTokens.lightGrey,
986
+ optionIconColor: globalTokens.hal_black,
987
+ optionIconColorOnDark: globalTokens.hal_white,
988
+ optionIconSpacing: "12px",
989
+ optionIconSize: "20px",
990
+ optionCheckboxSpacing: "12px",
991
+ hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
992
+ hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
993
+ activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
994
+ activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
669
995
  selectedOptionBackgroundColor: globalTokens.lightGrey,
670
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey
996
+ selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
997
+ underlineColor: globalTokens.hal_black,
998
+ underlineColorOnDark: globalTokens.hal_white,
999
+ underlineFocusColor: globalTokens.hal_black,
1000
+ underlineFocusColorOnDark: globalTokens.hal_white,
1001
+ underlineThickness: "1px",
1002
+ valueFontColor: globalTokens.hal_black,
1003
+ valueFontColorOnDark: globalTokens.hal_white,
1004
+ valueFontSize: globalTokens.type_scale_03,
1005
+ valueFontStyle: globalTokens.type_normal,
1006
+ valueFontWeight: globalTokens.type_regular,
1007
+ valueIconColor: globalTokens.hal_black,
1008
+ valueIconColorOnDark: globalTokens.hal_white,
1009
+ valueIconSize: "20px",
1010
+ valueIconSpacing: "12px",
1011
+ arrowColor: globalTokens.hal_black,
1012
+ arrowColorOnDark: globalTokens.hal_white,
1013
+ focusColor: globalTokens.hal_blue_l_50,
1014
+ focusColorOnDark: globalTokens.hal_blue_l_50
671
1015
  },
672
1016
  sidenav: {
673
- backgroundColor: globalTokens.lighterGrey,
674
- arrowContainerColor: globalTokens.lightGrey,
675
- arrowColor: globalTokens.black,
676
- customContentFontFamily: globalTokens.type_sans,
677
- customContentFontSize: globalTokens.type_scale_root,
678
- customContentFontStyle: globalTokens.type_normal,
679
- customContentFontWeight: globalTokens.type_regular,
680
- customContentFontColor: globalTokens.black,
1017
+ backgroundColor: globalTokens.hal_grey_l_95,
1018
+ arrowContainerColor: globalTokens.hal_grey_l_90,
1019
+ arrowColor: globalTokens.hal_black,
681
1020
  titleFontFamily: globalTokens.type_sans,
682
1021
  titleFontSize: globalTokens.type_scale_05,
683
1022
  titleFontStyle: globalTokens.type_normal,
684
1023
  titleFontWeight: globalTokens.type_regular,
685
- titleFontColor: "#000000de",
1024
+ titleFontColor: globalTokens.hal_black,
686
1025
  titleFontTextTransform: "none",
687
1026
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
688
1027
  subtitleFontFamily: globalTokens.type_sans,
689
- subtitleFontSize: globalTokens.type_scale_01,
1028
+ subtitleFontSize: globalTokens.type_scale_03,
690
1029
  subtitleFontStyle: globalTokens.type_normal,
691
1030
  subtitleFontWeight: globalTokens.type_regular,
692
- subtitleFontColor: "#00000099",
1031
+ subtitleFontColor: globalTokens.color_grey_800,
693
1032
  subtitleFontTextTransform: globalTokens.type_uppercase,
694
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_03,
1033
+ subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
695
1034
  linkFontFamily: globalTokens.type_sans,
696
1035
  linkFontSize: globalTokens.type_scale_02,
697
1036
  linkFontStyle: globalTokens.type_normal,
698
1037
  linkFontWeight: globalTokens.type_regular,
699
- linkFontColor: "#00000099",
1038
+ linkFontColor: globalTokens.color_grey_800,
700
1039
  linkFontTextTransform: "none",
701
1040
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
702
1041
  linkTextDecoration: globalTokens.type_no_line,
703
- linkMarginTop: "6px",
704
- linkMarginRight: "18px",
705
- linkMarginBottom: "6px",
706
- linkMarginLeft: "18px",
1042
+ linkMarginTop: "4px",
1043
+ linkMarginBottom: "4px",
1044
+ linkMarginRight: "16px",
1045
+ linkMarginLeft: "16px",
1046
+ linkFocusColor: globalTokens.hal_blue_l_50,
707
1047
  scrollBarThumbColor: "#66666626",
708
1048
  scrollBarTrackColor: globalTokens.transparent
709
1049
  },
@@ -712,89 +1052,110 @@ var componentTokens = {
712
1052
  fontSize: globalTokens.type_scale_03,
713
1053
  fontStyle: globalTokens.type_normal,
714
1054
  fontWeight: globalTokens.type_regular,
715
- fontColor: globalTokens.black,
716
- fontColorOnDark: globalTokens.white,
1055
+ labelFontFamily: globalTokens.type_sans,
1056
+ labelFontSize: globalTokens.type_scale_02,
1057
+ labelFontStyle: globalTokens.type_normal,
1058
+ labelFontWeight: globalTokens.type_semibold,
1059
+ labelLineHeight: globalTokens.type_leading_loose_01,
1060
+ helperTextFontFamily: globalTokens.type_sans,
1061
+ helperTextFontSize: globalTokens.type_scale_01,
1062
+ helperTextFontStyle: globalTokens.type_normal,
1063
+ helperTextFontWeight: globalTokens.type_regular,
1064
+ helperTextLineHeight: globalTokens.type_leading_normal,
1065
+ fontColor: globalTokens.hal_black,
1066
+ fontColorOnDark: globalTokens.hal_white,
1067
+ labelFontColor: globalTokens.hal_black,
1068
+ helperTextFontColor: globalTokens.hal_black,
1069
+ disabledFontColor: globalTokens.hal_grey_l_60,
717
1070
  fontLetterSpacing: globalTokens.type_spacing_normal,
718
- thumbHeight: "20px",
719
- thumbWidth: "20px",
720
- thumbTopPosition: "32.5%",
721
- thumbBackgroundColor: globalTokens.mediumBlue,
722
- thumbBackgroundColorOnDark: globalTokens.white,
723
- draggedThumbScale: "1",
724
- draggedThumbBackgroundColor: globalTokens.mediumBlue,
725
- draggedThumbBackgroundColorOnDark: "#0095FF",
726
- dotsHeight: "6px",
727
- dotsWidth: "6px",
728
- dotsTopPosition: "42%",
729
- dotsBackgroundColor: globalTokens.mediumBlue,
730
- dotsBackgroundColorOnDark: globalTokens.white,
1071
+ thumbHeight: "12px",
1072
+ thumbWidth: "12px",
1073
+ hoverThumbHeight: "14px",
1074
+ hoverThumbWidth: "14px",
1075
+ thumbVerticalPosition: "12px",
1076
+ hoverThumbVerticalPosition: "11px",
1077
+ thumbBackgroundColor: globalTokens.hal_blue_s_35,
1078
+ thumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1079
+ hoverThumbScale: "1.166666",
1080
+ hoverThumbBackgroundColor: globalTokens.hal_blue_d_20,
1081
+ hoverThumbBackgroundColorOnDark: globalTokens.hal_blue_d_20,
1082
+ activeThumbScale: "1.166666",
1083
+ activeThumbBackgroundColor: globalTokens.hal_blue_d_20,
1084
+ activeThumbBackgroundColorOnDark: globalTokens.hal_blue_d_20,
1085
+ focusThumbBackgroundColor: globalTokens.hal_blue_s_35,
1086
+ focusThumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1087
+ tickHeight: "4px",
1088
+ tickWidth: "4px",
1089
+ tickVerticalPosition: "11px",
1090
+ tickBackgroundColor: globalTokens.hal_blue_s_35,
1091
+ tickBackgroundColorOnDark: globalTokens.hal_blue_l_50,
731
1092
  trackLineThickness: "2px",
732
- trackLinePosition: "50%",
733
- trackLineColor: globalTokens.mediumBlue,
734
- trackLineOnDark: globalTokens.white,
735
- totalLineThickness: "",
736
- totalLineTopPosition: "50%",
737
- totalLineColor: globalTokens.softBlue,
738
- totalLineOnDark: globalTokens.white,
739
- disabledThumbTopPosition: "24%",
740
- disabledThumbBackgroundColor: globalTokens.softBlue,
1093
+ trackLineVerticalPosition: "50%",
1094
+ trackLineColor: globalTokens.hal_blue_s_35,
1095
+ trackLineColorOnDark: globalTokens.hal_blue_l_50,
1096
+ totalLineThickness: "2px",
1097
+ totalLineVerticalPosition: "50%",
1098
+ totalLineColor: globalTokens.hal_grey_l_90,
1099
+ totalLineColorOnDark: globalTokens.hal_grey_l_75,
1100
+ disabledThumbVerticalPosition: "10px",
1101
+ disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
741
1102
  disabledThumbBackgroundColorOnDark: "#575757",
742
- disabledDotsTopPosition: "",
743
- disabledDotsBackgroundColor: globalTokens.softBlue,
744
- disabledDotsBackgroundColorOnDark: "#575757",
745
- disabledTrackLineColor: globalTokens.softBlue,
746
- disabledTrackLineOnDark: "#575757",
747
- disabledTotalLineColor: globalTokens.softBlue,
748
- disabledTotalLineColorOnDark: "#575757",
749
- focusColor: globalTokens.blue,
750
- focusColorOnDark: "#1682FF"
1103
+ disabledTickVerticalPosition: "11px",
1104
+ disabledTickBackgroundColor: globalTokens.hal_grey_l_60,
1105
+ disabledTickBackgroundColorOnDark: globalTokens.hal_grey_l_60,
1106
+ disabledTrackLineColor: globalTokens.hal_grey_l_60,
1107
+ disabledTrackLineColorOnDark: globalTokens.hal_grey_l_60,
1108
+ disabledTotalLineColor: globalTokens.hal_grey_l_95,
1109
+ disabledTotalLineColorOnDark: globalTokens.hal_grey_s_40,
1110
+ focusColor: globalTokens.hal_blue_l_50,
1111
+ focusColorOnDark: globalTokens.hal_blue_l_50,
1112
+ floorLabelMarginRight: globalTokens.type_scale_03,
1113
+ ceilLabelMarginLeft: globalTokens.type_scale_03,
1114
+ inputMarginLeft: globalTokens.type_scale_06
751
1115
  },
752
1116
  spinner: {
753
- trackCircleColor: globalTokens.purple,
1117
+ trackCircleColor: "#5f249f",
1118
+ trackCircleColorOnDark: "#a46ede",
754
1119
  totalCircleColor: globalTokens.white,
755
1120
  labelFontFamily: globalTokens.type_sans,
756
- labelFontSize: globalTokens.type_scale_01,
1121
+ labelFontSize: globalTokens.type_scale_02,
757
1122
  labelFontStyle: globalTokens.type_normal,
758
1123
  labelFontWeight: globalTokens.type_regular,
759
- labelFontColor: globalTokens.inherit,
760
- labelFontTextTransform: globalTokens.type_uppercase,
761
- labelLetterSpacing: globalTokens.type_spacing_normal,
1124
+ labelFontColor: globalTokens.black,
1125
+ labelFontColorOnDark: globalTokens.white,
762
1126
  labelTextAlign: "center",
763
1127
  progressValueFontFamily: globalTokens.type_sans,
764
- progressValueFontSize: globalTokens.type_scale_01,
1128
+ progressValueFontSize: globalTokens.type_scale_02,
765
1129
  progressValueFontStyle: globalTokens.type_normal,
766
- progressValueFontWeight: globalTokens.type_regular,
1130
+ progressValueFontWeight: globalTokens.type_bold,
767
1131
  progressValueFontColor: globalTokens.inherit,
768
- progressValueLetterSpacing: globalTokens.type_spacing_normal,
1132
+ progressValueFontColorOnDark: globalTokens.white,
769
1133
  progressValueTextAlign: "center",
770
1134
  overlayBackgroundColor: globalTokens.black,
771
1135
  overlayOpacity: "0.8",
772
1136
  overlayLabelFontFamily: globalTokens.type_sans,
773
- overlayLabelFontSize: globalTokens.type_scale_01,
1137
+ overlayLabelFontSize: globalTokens.type_scale_02,
774
1138
  overlayLabelFontStyle: globalTokens.type_normal,
775
1139
  overlayLabelFontWeight: globalTokens.type_regular,
776
1140
  overlayLabelFontColor: globalTokens.white,
777
- overlayLabelFontTextTransform: globalTokens.type_uppercase,
778
- overlayLabelLetterSpacing: globalTokens.type_spacing_normal,
779
1141
  overlayLabelTextAlign: "center",
780
1142
  overlayProgressValueFontFamily: globalTokens.type_sans,
781
- overlayProgressValueFontSize: globalTokens.type_scale_01,
1143
+ overlayProgressValueFontSize: globalTokens.type_scale_02,
782
1144
  overlayProgressValueFontStyle: globalTokens.type_normal,
783
- overlayProgressValueFontWeight: globalTokens.type_regular,
1145
+ overlayProgressValueFontWeight: globalTokens.type_bold,
784
1146
  overlayProgressValueFontColor: globalTokens.white,
785
- overlayProgressValueLetterSpacing: globalTokens.type_spacing_normal,
786
1147
  overlayProgressValueTextAlign: "center"
787
1148
  },
788
1149
  "switch": {
789
- checkedTrackBackgroundColor: globalTokens.purple,
790
- checkedTrackBackgroundColorOnDark: globalTokens.purple,
1150
+ checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1151
+ checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
791
1152
  checkedThumbBackgroundColor: globalTokens.white,
792
1153
  checkedThumbBackgroundColorOnDark: globalTokens.white,
793
1154
  uncheckedTrackBackgroundColor: globalTokens.lightGrey,
794
1155
  uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
795
1156
  uncheckedThumbBackgroundColor: globalTokens.white,
796
1157
  uncheckedThumbBackgroundColorOnDark: globalTokens.white,
797
- disabledCheckedTrackBackgroundColor: globalTokens.lighterPurple,
1158
+ disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
798
1159
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
799
1160
  disabledCheckedThumbBackgroundColor: globalTokens.white,
800
1161
  disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
@@ -811,47 +1172,66 @@ var componentTokens = {
811
1172
  labelFontWeight: globalTokens.type_regular,
812
1173
  labelFontColor: globalTokens.black,
813
1174
  labelFontColorOnDark: globalTokens.white,
814
- labelMarginRight: "0px",
815
1175
  thumbFocusColor: globalTokens.blue,
816
- thumbFocusColorOnDark: "#1489FB",
1176
+ thumbFocusColorOnDark: "#1682FF",
817
1177
  thumbHeight: "24px",
818
1178
  thumbWidth: "24px",
1179
+ thumbShift: "40%",
819
1180
  trackHeight: "12px",
820
1181
  trackWidth: "60px",
821
- thumbTranslateX: "40%"
1182
+ spaceBetweenLabelSwitch: "0px"
822
1183
  },
823
1184
  tag: {
1185
+ fontFamily: globalTokens.type_sans,
1186
+ fontColor: globalTokens.hal_black,
1187
+ fontSize: globalTokens.type_scale_02,
824
1188
  fontStyle: globalTokens.type_normal,
825
- fontTextTransform: globalTokens.type_uppercase,
826
- height: "43px",
827
- iconColor: globalTokens.white,
828
- iconSectionWidth: "48px",
1189
+ fontWeight: globalTokens.type_regular,
1190
+ labelPaddingTop: "0px",
1191
+ labelPaddingBottom: "0px",
1192
+ labelPaddingLeft: "16px",
1193
+ labelPaddingRight: "16px",
1194
+ height: "40px",
1195
+ iconColor: globalTokens.hal_white,
1196
+ iconSectionWidth: "40px",
829
1197
  iconHeight: "24px",
830
- iconWidth: "auto"
1198
+ iconWidth: "auto",
1199
+ focusColor: globalTokens.hal_blue_l_50
831
1200
  },
832
1201
  table: {
833
1202
  rowSeparatorThickness: "1px",
834
1203
  rowSeparatorStyle: "solid",
835
1204
  rowSeparatorColor: globalTokens.lightGrey,
836
- rowHeight: "48px",
837
1205
  dataBackgroundColor: globalTokens.white,
838
1206
  dataFontFamily: globalTokens.type_sans,
839
- dataFontSize: globalTokens.type_scale_root,
1207
+ dataFontSize: globalTokens.type_scale_02,
840
1208
  dataFontStyle: globalTokens.type_normal,
841
1209
  dataFontWeight: globalTokens.type_regular,
842
1210
  dataFontColor: globalTokens.black,
843
1211
  dataFontTextTransform: "none",
1212
+ dataPaddingTop: "14px",
1213
+ dataPaddingBottom: "12px",
1214
+ dataPaddingRight: "20px",
1215
+ dataPaddingLeft: "40px",
844
1216
  dataTextAlign: "left",
845
- headerBackgroundColor: globalTokens.purple,
1217
+ dataTextLineHeight: "normal",
1218
+ headerBackgroundColor: globalTokens.hal_purple_s_38,
1219
+ headerBorderRadius: "4px",
846
1220
  headerFontFamily: globalTokens.type_sans,
847
1221
  headerFontSize: globalTokens.type_scale_02,
848
1222
  headerFontStyle: globalTokens.type_normal,
849
1223
  headerFontWeight: globalTokens.type_regular,
850
1224
  headerFontColor: globalTokens.white,
851
1225
  headerFontTextTransform: "none",
1226
+ headerPaddingTop: "16px",
1227
+ headerPaddingBottom: "16px",
1228
+ headerPaddingRight: "20px",
1229
+ headerPaddingLeft: "40px",
852
1230
  headerTextAlign: "left",
1231
+ headerTextLineHeight: "normal",
853
1232
  scrollBarThumbColor: globalTokens.darkGrey,
854
- scrollBarTrackColor: globalTokens.lightGrey
1233
+ scrollBarTrackColor: globalTokens.lightGrey,
1234
+ sortIconColor: globalTokens.white
855
1235
  },
856
1236
  tabs: {
857
1237
  fontFamily: globalTokens.type_sans,
@@ -860,27 +1240,23 @@ var componentTokens = {
860
1240
  fontWeight: globalTokens.type_semibold,
861
1241
  fontTextTransform: "none",
862
1242
  selectedBackgroundColor: globalTokens.white,
863
- selectedFontColor: globalTokens.purple,
864
- selectedIconColor: globalTokens.purple,
865
- selectedUnderlineColor: globalTokens.purple,
866
- selectedUnderlineThickness: "",
1243
+ selectedFontColor: "#5f249f",
1244
+ selectedIconColor: "#5f249f",
1245
+ selectedUnderlineColor: "#5f249f",
1246
+ selectedUnderlineThickness: "2px",
867
1247
  unselectedBackgroundColor: globalTokens.white,
868
1248
  unselectedFontColor: globalTokens.darkGrey,
869
1249
  unselectedIconColor: globalTokens.darkGrey,
870
- disabledFontColor: globalTokens.mediumGrey,
871
- disabledIconColor: globalTokens.mediumGrey,
1250
+ disabledFontColor: "#999999",
1251
+ disabledIconColor: "#999999",
872
1252
  disabledFontStyle: globalTokens.type_normal,
873
- hoverBackgroundColor: globalTokens.lightPurple,
874
- pressedBackgroundColor: globalTokens.mediumPurple,
1253
+ hoverBackgroundColor: "#f2eafa",
1254
+ pressedBackgroundColor: "#e5d5f6",
875
1255
  pressedFontWeight: globalTokens.type_semibold,
876
1256
  dividerColor: globalTokens.mediumGrey,
877
1257
  dividerThickness: "1px",
878
- focusOutline: globalTokens.purple,
1258
+ focusOutline: "#5f249f",
879
1259
  scrollButtonsWidth: "48px",
880
- minWidth: "90px",
881
- maxWidth: "360px",
882
- minHeight: "48px",
883
- minHeightWithLabelAndIcon: "72px",
884
1260
  badgeBackgroundColor: globalTokens.darkRed,
885
1261
  badgeFontFamily: globalTokens.type_sans,
886
1262
  badgeFontSize: "10px",
@@ -890,71 +1266,140 @@ var componentTokens = {
890
1266
  badgeLetterSpacing: globalTokens.type_spacing_wide_02,
891
1267
  badgeWidth: "16px",
892
1268
  badgeHeight: "16px",
1269
+ badgeRadius: "10px",
893
1270
  badgeWidthWithNotificationNumber: "23px",
894
- badgeHeightWithNotificationNumber: "17px"
1271
+ badgeHeightWithNotificationNumber: "17px",
1272
+ badgeRadiusWithNotificationNumber: "10px"
895
1273
  },
896
1274
  textarea: {
897
- disabledFontColor: globalTokens.lighterBlack,
898
- disabledFontColorOnDark: "#575757",
899
- errorColor: globalTokens.red,
900
- errorColorOnDark: "#FE344F",
901
- assistiveTextFontFamily: globalTokens.type_sans,
1275
+ fontFamily: globalTokens.type_sans,
1276
+ enabledBorderColor: globalTokens.hal_black,
1277
+ enabledBorderColorOnDark: globalTokens.hal_white,
1278
+ hoverBorderColor: globalTokens.hal_purple_l_65,
1279
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
1280
+ focusBorderColor: globalTokens.hal_blue_l_50,
1281
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
1282
+ disabledBorderColor: globalTokens.hal_grey_l_60,
1283
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
1284
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
1285
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1286
+ errorBorderColor: globalTokens.hal_red_s_41,
1287
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
1288
+ hoverErrorBorderColor: globalTokens.color_red_600,
1289
+ hoverErrorBorderColorOnDark: "#fe677b",
1290
+ errorMessageColor: globalTokens.hal_red_s_41,
1291
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
1292
+ labelFontColor: globalTokens.hal_black,
1293
+ labelFontColorOnDark: globalTokens.hal_white,
1294
+ labelFontSize: globalTokens.type_scale_02,
1295
+ labelFontStyle: globalTokens.type_normal,
1296
+ labelFontWeight: globalTokens.type_semibold,
1297
+ labelLineHeight: globalTokens.type_leading_loose_01,
1298
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1299
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1300
+ optionalLabelFontWeight: globalTokens.type_regular,
1301
+ helperTextFontColor: globalTokens.hal_black,
1302
+ helperTextFontColorOnDark: globalTokens.hal_white,
1303
+ helperTextFontSize: globalTokens.type_scale_01,
1304
+ helperTextFontStyle: globalTokens.type_normal,
1305
+ helperTextFontWeight: globalTokens.type_regular,
1306
+ helperTextLineHeight: globalTokens.type_leading_normal,
1307
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1308
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1309
+ placeholderFontColor: "#808080",
1310
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1311
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1312
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
1313
+ valueFontColor: globalTokens.hal_black,
1314
+ valueFontColorOnDark: globalTokens.hal_white,
1315
+ valueFontSize: globalTokens.type_scale_03,
1316
+ valueFontStyle: globalTokens.type_normal,
1317
+ valueFontWeight: globalTokens.type_regular,
1318
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
1319
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1320
+ },
1321
+ V3Textarea: {
1322
+ fontFamily: globalTokens.type_sans,
902
1323
  assistiveTextFontSize: globalTokens.type_scale_01,
903
1324
  assistiveTextFontStyle: globalTokens.type_normal,
904
1325
  assistiveTextFontWeight: globalTokens.type_regular,
905
1326
  assistiveTextFontColor: globalTokens.black,
906
1327
  assistiveTextFontColorOnDark: globalTokens.white,
907
- assistiveTextLetterSpacing: "",
908
- customContentFontFamily: globalTokens.type_sans,
909
- customContentFontSize: globalTokens.type_scale_03,
910
- customContentFontStyle: globalTokens.type_normal,
911
- customContentFontWeight: globalTokens.type_regular,
912
- customContentFontColor: globalTokens.black,
913
- customContentFontColorOnDark: globalTokens.white,
914
- customContentLetterSpacing: globalTokens.type_spacing_normal,
915
- customContentLineHeight: "1.1875em",
916
- labelFontFamily: globalTokens.type_sans,
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",
917
1337
  labelFontSize: globalTokens.type_scale_03,
918
1338
  labelFontStyle: globalTokens.type_normal,
919
1339
  labelFontWeight: globalTokens.type_regular,
920
1340
  labelFontColor: globalTokens.black,
921
1341
  labelFontColorOnDark: globalTokens.white,
922
- labelLetterSpacing: "",
923
- scrollBarThumbColor: globalTokens.darkGrey,
924
- scrollBarThumbColorOnDark: globalTokens.white,
925
- scrollBarTrackColor: globalTokens.lightGrey,
926
- scrollBarTrackColorOnDark: "#999999"
1342
+ labelLetterSpacing: "0.00938em",
1343
+ valueFontSize: globalTokens.type_scale_03,
1344
+ valueFontStyle: globalTokens.type_normal,
1345
+ 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"
927
1355
  },
928
1356
  toggleGroup: {
929
- fontFamily: globalTokens.type_sans,
930
- fontSize: globalTokens.type_scale_02,
931
- fontStyle: globalTokens.type_normal,
932
- fontWeight: globalTokens.type_regular,
933
- fontTextTransform: globalTokens.type_uppercase,
934
- fontLetterSpacing: globalTokens.type_spacing_wide_02,
935
- focusColor: globalTokens.blue,
936
- selectedBackgroundColor: globalTokens.purple,
937
- selectedBackgroundHoverColor: globalTokens.black,
938
- selectedFontColor: globalTokens.white,
939
- selectedHoverFontColor: globalTokens.white,
940
- unselectedBackgroundColor: globalTokens.lightGrey,
941
- unselectedBackgroundHoverColor: globalTokens.darkWhite,
942
- unselectedFontColor: globalTokens.black,
943
- unselectedHoverFontColor: globalTokens.black,
944
- disabledSelectedBackgroundColor: globalTokens.lighterPurple,
945
- disabledSelectedFontColor: globalTokens.white,
946
- disabledUnselectedBackgroundColor: globalTokens.lightWhite,
947
- disabledUnselectedFontColor: globalTokens.lighterBlack,
948
- iconHeight: "20px",
949
- iconWidth: "20px",
950
- iconPaddingTop: "10px",
951
- iconPaddingBottom: "10px",
952
- iconPaddingRight: "12px",
953
- iconPaddingLeft: "12px",
954
- labelPaddingTop: "12px",
955
- labelPaddingBottom: "12px",
956
- labelPaddingLeft: "30px",
957
- labelPaddingRight: "30px"
1357
+ containerBackgroundColor: globalTokens.color_grey_50,
1358
+ containerBorderColor: globalTokens.hal_grey_l_60,
1359
+ labelFontColor: globalTokens.hal_black,
1360
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1361
+ helperTextFontColor: globalTokens.hal_black,
1362
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
1363
+ unselectedBackgroundColor: globalTokens.hal_grey_l_90,
1364
+ unselectedHoverBackgroundColor: globalTokens.hal_grey_l_80,
1365
+ unselectedActiveBackgroundColor: globalTokens.hal_purple_s_38,
1366
+ unselectedDisabledBackgroundColor: globalTokens.hal_grey_l_95,
1367
+ unselectedFontColor: globalTokens.hal_black,
1368
+ unselectedDisabledFontColor: globalTokens.hal_grey_l_60,
1369
+ selectedBackgroundColor: globalTokens.hal_purple_s_38,
1370
+ selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1371
+ selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1372
+ selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1373
+ selectedFontColor: globalTokens.hal_white,
1374
+ selectedDisabledFontColor: globalTokens.color_purple_300,
1375
+ focusColor: globalTokens.hal_blue_l_50,
1376
+ labelFontFamily: globalTokens.type_sans,
1377
+ labelFontSize: globalTokens.type_scale_02,
1378
+ labelFontStyle: globalTokens.type_normal,
1379
+ labelFontWeight: globalTokens.type_semibold,
1380
+ labelLineHeight: globalTokens.type_leading_loose_01,
1381
+ helperTextFontFamily: globalTokens.type_sans,
1382
+ helperTextFontSize: globalTokens.type_scale_01,
1383
+ helperTextFontStyle: globalTokens.type_normal,
1384
+ helperTextFontWeight: globalTokens.type_regular,
1385
+ helperTextLineHeight: globalTokens.type_leading_normal,
1386
+ optionLabelFontFamily: globalTokens.type_sans,
1387
+ optionLabelFontSize: globalTokens.type_scale_03,
1388
+ optionLabelFontStyle: globalTokens.type_normal,
1389
+ optionLabelFontWeight: globalTokens.type_regular,
1390
+ iconPaddingRight: globalTokens.spacing_03,
1391
+ iconPaddingLeft: globalTokens.spacing_03,
1392
+ labelPaddingLeft: globalTokens.spacing_06,
1393
+ labelPaddingRight: globalTokens.spacing_06,
1394
+ iconMarginRight: globalTokens.spacing_03,
1395
+ containerMarginTop: globalTokens.spacing_02,
1396
+ optionBorderThickness: globalTokens.border_width_0,
1397
+ optionBorderStyle: globalTokens.border_none,
1398
+ optionBorderRadius: globalTokens.border_radius_medium,
1399
+ containerBorderThickness: globalTokens.border_width_1,
1400
+ containerBorderStyle: globalTokens.border_solid,
1401
+ containerBorderRadius: globalTokens.border_radius_large,
1402
+ optionFocusBorderThickness: globalTokens.border_width_2
958
1403
  },
959
1404
  upload: {
960
1405
  fontFamily: globalTokens.type_sans,
@@ -963,10 +1408,9 @@ var componentTokens = {
963
1408
  scrollBarTrackColor: globalTokens.lightGrey,
964
1409
  errorColor: globalTokens.red,
965
1410
  backgroundColor: globalTokens.white,
966
- draggingAreaBackgroundColor: globalTokens.lightWhite,
1411
+ draggingStateBackgroundColor: globalTokens.lightWhite,
967
1412
  dragAndDropIconColor: globalTokens.black,
968
- dragAndDropIconHeight: "43.5px",
969
- dragAndDropIconWidth: "43.5px",
1413
+ dragAndDropIconSize: "43.5px",
970
1414
  dragAndDropTitleFontSize: globalTokens.type_scale_04,
971
1415
  dragAndDropTitleFontStyle: globalTokens.type_normal,
972
1416
  dragAndDropTitleFontWeight: globalTokens.type_bold,
@@ -974,29 +1418,25 @@ var componentTokens = {
974
1418
  dragAndDropTitleFontColor: globalTokens.black,
975
1419
  dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
976
1420
  dragAndDropDescriptionFontStyle: globalTokens.type_italic,
977
- dragAndDropDescriptionFontWeight: globalTokens.type_normal,
978
- dragAndDropTextDescriptionFontTextTransform: "none",
979
- dragAndDropTextDescriptionFontColor: globalTokens.darkGrey,
1421
+ dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1422
+ dragAndDropDescriptionFontTextTransform: "none",
1423
+ dragAndDropDescriptionFontColor: globalTokens.darkGrey,
980
1424
  dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
981
- dragAndDropDraggingStateIconHeight: "74.5px",
982
- dragAndDropDraggingStateIconWidth: "74.5px",
1425
+ dragAndDropDraggingStateIconSize: "74.5px",
983
1426
  dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
984
1427
  dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
985
- dragAndDropDraggingStateFontWeight: globalTokens.type_normal,
986
- dragAndDropTextDraggingStateFontTextTransform: "none",
987
- dragAndDropTextDraggingStateFontColor: globalTokens.darkGrey,
1428
+ dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1429
+ dragAndDropDraggingStateFontTextTransform: "none",
1430
+ dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
988
1431
  dragAndDropAreaIconColor: globalTokens.darkGrey,
989
- dragAndDropAreaIconHeight: "24px",
990
- dragAndDropAreaIconWidth: "24px",
1432
+ dragAndDropAreaIconSize: "24px",
991
1433
  dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
992
1434
  dragAndDropAreaTextFontStyle: globalTokens.type_italic,
993
1435
  dragAndDropAreaTextFontWeight: globalTokens.type_regular,
994
1436
  dragAndDropAreaTextFontTextTransform: "none",
995
1437
  dragAndDropAreaTextFontColor: globalTokens.darkGrey,
996
1438
  fileDeleteIconColor: globalTokens.black,
997
- fileDeleteIconHeight: "30px",
998
- fileDeleteIconWidth: "30px",
999
- fileHoverColor: globalTokens.darkWhite,
1439
+ fileDeleteIconSize: "30px",
1000
1440
  fileUnderlineColor: globalTokens.lightGrey,
1001
1441
  fileUnderlineThickness: "1px",
1002
1442
  fileNameFontSize: globalTokens.type_scale_03,
@@ -1009,20 +1449,20 @@ var componentTokens = {
1009
1449
  fileTypeFontWeight: globalTokens.type_regular,
1010
1450
  fileTypeFontTextTransform: globalTokens.type_uppercase,
1011
1451
  fileTypeFontColor: globalTokens.darkGrey,
1012
- fileUploadedIconColor: globalTokens.lightGrey,
1013
- fileUploadedIconHeight: "24px",
1014
- fileUploadedIconWidth: "24px",
1015
- filesUploadedTitleFontSize: globalTokens.type_scale_04,
1016
- filesUploadedTitleFontStyle: globalTokens.type_normal,
1017
- filesUploadedTitleFontWeight: globalTokens.type_regular,
1018
- filesUploadedTitleFontTextTransform: "none",
1019
- filesUploadedTitleFontColor: globalTokens.black,
1020
- filesUploadedSubtitleFontSize: globalTokens.type_scale_01,
1021
- filesUploadedSubtitleFontStyle: globalTokens.type_normal,
1022
- filesUploadedSubtitleFontWeight: globalTokens.type_regular,
1023
- filesUploadedSubtitleFontTextTransform: "none",
1024
- filesUploadedSubtitleFontColor: globalTokens.darkGrey,
1025
- filesUploadedNumberFontWeight: globalTokens.type_bold
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
1026
1466
  },
1027
1467
  wizard: {
1028
1468
  disabledBackgroundColor: globalTokens.lightGrey,
@@ -1034,10 +1474,9 @@ var componentTokens = {
1034
1474
  stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1035
1475
  stepContainerFontColor: globalTokens.black,
1036
1476
  stepContainerSelectedFontColor: globalTokens.white,
1037
- stepContainerSelectedBackgroundColor: globalTokens.purple,
1477
+ stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1038
1478
  stepContainerBackgroundColor: globalTokens.white,
1039
- stepContainerIconHeight: "19px",
1040
- stepContainerIconWidth: "19px",
1479
+ stepContainerIconSize: "19px",
1041
1480
  labelFontSize: globalTokens.type_scale_03,
1042
1481
  labelFontFamily: globalTokens.type_sans,
1043
1482
  labelFontStyle: globalTokens.type_normal,
@@ -1046,7 +1485,8 @@ var componentTokens = {
1046
1485
  labelFontTextTransform: "none",
1047
1486
  labelTextAlign: "left",
1048
1487
  labelFontColor: globalTokens.darkGrey,
1049
- labelActiveFontColor: globalTokens.black,
1488
+ visitedLabelFontColor: globalTokens.black,
1489
+ visitedDescriptionFontColor: globalTokens.black,
1050
1490
  descriptionFontSize: globalTokens.type_scale_01,
1051
1491
  descriptionFontFamily: globalTokens.type_sans,
1052
1492
  descriptionFontStyle: globalTokens.type_normal,
@@ -1054,29 +1494,29 @@ var componentTokens = {
1054
1494
  descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1055
1495
  descriptionFontTextTransform: "none",
1056
1496
  descriptionFontColor: globalTokens.darkGrey,
1057
- descriptionActiveFontColor: globalTokens.black,
1058
1497
  descriptionTextAlign: "left",
1498
+ circleWidth: "32px",
1499
+ circleHeight: "32px",
1059
1500
  circleBorderThickness: "2px",
1060
1501
  circleBorderStyle: "solid",
1061
1502
  circleBorderRadius: "45px",
1062
1503
  circleBorderColor: globalTokens.black,
1063
- circleSelectedWidth: "32px",
1064
- circleSelectedHeight: "32px",
1065
- circleSelectedBorderThickness: "2px",
1066
- circleSelectedBorderStyle: "solid",
1067
- circleSelectedBorderRadius: "45px",
1068
- circleSelectedBorderColor: globalTokens.purple,
1069
- circleDisabledWidth: "32px",
1070
- circleDisabledHeight: "32px",
1071
- circleDisabledBorderThickness: "2px",
1072
- circleDisabledBorderStyle: "solid",
1073
- circleDisabledBorderRadius: "45px",
1074
- circleDisabledBorderColor: globalTokens.lightGrey,
1075
- circleWidth: "32px",
1076
- circleHeight: "32px",
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,
1077
1516
  separatorBorderThickness: "1px",
1078
1517
  separatorBorderStyle: "solid",
1079
- separatorColor: globalTokens.lightGrey
1518
+ separatorColor: globalTokens.lightGrey,
1519
+ focusColor: globalTokens.hal_blue_l_50
1080
1520
  }
1081
1521
  };
1082
1522
  exports.componentTokens = componentTokens;