@dxc-technology/halstack-react 0.0.0-220a9ab → 0.0.0-228c4cf

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 (187) hide show
  1. package/dist/ThemeContext.js +134 -100
  2. package/dist/V3Select/V3Select.js +549 -0
  3. package/dist/V3Textarea/V3Textarea.js +264 -0
  4. package/dist/accordion/Accordion.js +80 -83
  5. package/dist/accordion-group/AccordionGroup.js +1 -3
  6. package/dist/alert/Alert.js +126 -111
  7. package/dist/alert/index.d.ts +51 -0
  8. package/dist/badge/Badge.js +3 -1
  9. package/dist/box/Box.js +1 -9
  10. package/dist/button/Button.js +32 -22
  11. package/dist/card/Card.js +2 -4
  12. package/dist/checkbox/Checkbox.js +33 -25
  13. package/dist/chip/Chip.js +37 -49
  14. package/dist/common/variables.js +1002 -594
  15. package/dist/date/Date.js +23 -35
  16. package/dist/date-input/DateInput.js +400 -0
  17. package/dist/date-input/index.d.ts +95 -0
  18. package/dist/dialog/Dialog.js +21 -39
  19. package/dist/dropdown/Dropdown.js +129 -83
  20. package/dist/file-input/FileInput.js +644 -0
  21. package/dist/file-input/FileItem.js +287 -0
  22. package/dist/file-input/index.d.ts +81 -0
  23. package/dist/footer/Footer.js +69 -53
  24. package/dist/footer/Icons.js +77 -0
  25. package/dist/header/Header.js +123 -84
  26. package/dist/header/Icons.js +59 -0
  27. package/dist/heading/Heading.js +13 -5
  28. package/dist/input-text/Icons.js +22 -0
  29. package/dist/input-text/InputText.js +97 -61
  30. package/dist/layout/ApplicationLayout.js +5 -9
  31. package/dist/layout/Icons.js +55 -0
  32. package/dist/link/Link.js +71 -46
  33. package/dist/main.d.ts +8 -0
  34. package/dist/main.js +65 -17
  35. package/dist/number-input/NumberInput.js +136 -0
  36. package/dist/number-input/NumberInputContext.js +16 -0
  37. package/dist/number-input/index.d.ts +113 -0
  38. package/dist/paginator/Icons.js +66 -0
  39. package/dist/paginator/Paginator.js +17 -17
  40. package/dist/password-input/PasswordInput.js +203 -0
  41. package/dist/password-input/index.d.ts +94 -0
  42. package/dist/progress-bar/ProgressBar.js +63 -27
  43. package/dist/resultsetTable/ResultsetTable.js +5 -22
  44. package/dist/select/Select.js +853 -309
  45. package/dist/select/index.d.ts +53 -0
  46. package/dist/sidenav/Sidenav.js +11 -15
  47. package/dist/slider/Slider.js +159 -70
  48. package/dist/spinner/Spinner.js +226 -59
  49. package/dist/switch/Switch.js +3 -3
  50. package/dist/table/Table.js +15 -5
  51. package/dist/tabs/Tabs.js +4 -8
  52. package/dist/tag/Tag.js +38 -36
  53. package/dist/text-input/TextInput.js +974 -0
  54. package/dist/text-input/index.d.ts +135 -0
  55. package/dist/textarea/Textarea.js +233 -124
  56. package/dist/textarea/index.d.ts +117 -0
  57. package/dist/toggle-group/ToggleGroup.js +130 -44
  58. package/dist/upload/Upload.js +3 -3
  59. package/dist/upload/buttons-upload/ButtonsUpload.js +13 -13
  60. package/dist/upload/buttons-upload/Icons.js +40 -0
  61. package/dist/upload/dragAndDropArea/DragAndDropArea.js +27 -23
  62. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  63. package/dist/upload/file-upload/FileToUpload.js +29 -24
  64. package/dist/upload/file-upload/Icons.js +66 -0
  65. package/dist/upload/transaction/Icons.js +160 -0
  66. package/dist/upload/transaction/Transaction.js +19 -42
  67. package/dist/upload/transactions/Transactions.js +11 -11
  68. package/dist/wizard/Icons.js +65 -0
  69. package/dist/wizard/Wizard.js +85 -63
  70. package/package.json +8 -10
  71. package/test/Date.test.js +48 -44
  72. package/test/DateInput.test.js +242 -0
  73. package/test/Dropdown.test.js +15 -0
  74. package/test/FileInput.test.js +201 -0
  75. package/test/Footer.test.js +2 -7
  76. package/test/Header.test.js +5 -10
  77. package/test/Heading.test.js +60 -12
  78. package/test/InputText.test.js +24 -16
  79. package/test/Link.test.js +3 -2
  80. package/test/NumberInput.test.js +259 -0
  81. package/test/Paginator.test.js +1 -1
  82. package/test/PasswordInput.test.js +83 -0
  83. package/test/ResultsetTable.test.js +1 -2
  84. package/test/Slider.test.js +9 -17
  85. package/test/Spinner.test.js +5 -0
  86. package/test/TextInput.test.js +732 -0
  87. package/test/Textarea.test.js +193 -0
  88. package/test/ToggleGroup.test.js +5 -1
  89. package/test/Upload.test.js +5 -5
  90. package/test/{Select.test.js → V3Select.test.js} +56 -36
  91. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  92. package/dist/accordion/Accordion.stories.js +0 -207
  93. package/dist/accordion/readme.md +0 -96
  94. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  95. package/dist/accordion-group/readme.md +0 -70
  96. package/dist/alert/Alert.stories.js +0 -158
  97. package/dist/alert/close.svg +0 -4
  98. package/dist/alert/error.svg +0 -4
  99. package/dist/alert/info.svg +0 -4
  100. package/dist/alert/readme.md +0 -43
  101. package/dist/alert/success.svg +0 -4
  102. package/dist/alert/warning.svg +0 -4
  103. package/dist/button/Button.stories.js +0 -224
  104. package/dist/button/readme.md +0 -93
  105. package/dist/checkbox/Checkbox.stories.js +0 -144
  106. package/dist/checkbox/readme.md +0 -116
  107. package/dist/date/Date.stories.js +0 -205
  108. package/dist/date/calendar.svg +0 -1
  109. package/dist/date/calendar_dark.svg +0 -1
  110. package/dist/date/readme.md +0 -73
  111. package/dist/dialog/Dialog.stories.js +0 -217
  112. package/dist/dialog/readme.md +0 -32
  113. package/dist/dropdown/Dropdown.stories.js +0 -249
  114. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  115. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  116. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  117. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  118. package/dist/dropdown/readme.md +0 -69
  119. package/dist/footer/Footer.stories.js +0 -94
  120. package/dist/footer/dxc_logo_wht.png +0 -0
  121. package/dist/footer/readme.md +0 -41
  122. package/dist/header/Header.stories.js +0 -176
  123. package/dist/header/close_icon.svg +0 -1
  124. package/dist/header/dxc_logo_black.png +0 -0
  125. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  126. package/dist/header/dxc_logo_white.png +0 -0
  127. package/dist/header/hamb_menu_black.svg +0 -1
  128. package/dist/header/hamb_menu_white.svg +0 -1
  129. package/dist/header/readme.md +0 -33
  130. package/dist/input-text/InputText.stories.js +0 -209
  131. package/dist/input-text/error.svg +0 -1
  132. package/dist/input-text/readme.md +0 -91
  133. package/dist/layout/facebook.svg +0 -45
  134. package/dist/layout/linkedin.svg +0 -50
  135. package/dist/layout/twitter.svg +0 -53
  136. package/dist/link/readme.md +0 -51
  137. package/dist/paginator/images/next.svg +0 -3
  138. package/dist/paginator/images/nextPage.svg +0 -3
  139. package/dist/paginator/images/previous.svg +0 -3
  140. package/dist/paginator/images/previousPage.svg +0 -3
  141. package/dist/paginator/readme.md +0 -50
  142. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  143. package/dist/progress-bar/readme.md +0 -63
  144. package/dist/radio/Radio.stories.js +0 -166
  145. package/dist/radio/readme.md +0 -70
  146. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  147. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  148. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  149. package/dist/select/Select.stories.js +0 -235
  150. package/dist/select/readme.md +0 -72
  151. package/dist/slider/Slider.stories.js +0 -241
  152. package/dist/slider/readme.md +0 -64
  153. package/dist/spinner/Spinner.stories.js +0 -183
  154. package/dist/spinner/readme.md +0 -65
  155. package/dist/switch/Switch.stories.js +0 -134
  156. package/dist/switch/readme.md +0 -133
  157. package/dist/tabs/Tabs.stories.js +0 -130
  158. package/dist/tabs/readme.md +0 -78
  159. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  160. package/dist/tabs-for-sections/readme.md +0 -78
  161. package/dist/toggle/Toggle.stories.js +0 -297
  162. package/dist/toggle/readme.md +0 -80
  163. package/dist/toggle-group/readme.md +0 -82
  164. package/dist/upload/Upload.stories.js +0 -72
  165. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  166. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  167. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  168. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  169. package/dist/upload/file-upload/audio-icon.svg +0 -4
  170. package/dist/upload/file-upload/close.svg +0 -4
  171. package/dist/upload/file-upload/file-icon.svg +0 -4
  172. package/dist/upload/file-upload/video-icon.svg +0 -4
  173. package/dist/upload/readme.md +0 -37
  174. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  175. package/dist/upload/transaction/audio-icon.svg +0 -4
  176. package/dist/upload/transaction/error-icon.svg +0 -4
  177. package/dist/upload/transaction/file-icon-err.svg +0 -4
  178. package/dist/upload/transaction/file-icon.svg +0 -4
  179. package/dist/upload/transaction/image-icon-err.svg +0 -4
  180. package/dist/upload/transaction/image-icon.svg +0 -4
  181. package/dist/upload/transaction/success-icon.svg +0 -4
  182. package/dist/upload/transaction/video-icon-err.svg +0 -4
  183. package/dist/upload/transaction/video-icon.svg +0 -4
  184. package/dist/wizard/invalid_icon.svg +0 -6
  185. package/dist/wizard/valid_icon.svg +0 -6
  186. package/dist/wizard/validation-wrong.svg +0 -6
  187. 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,318 +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
+ },
299
345
  card: {
300
346
  height: "220px",
301
347
  width: "400px"
302
348
  },
303
349
  checkbox: {
304
- backgroundColorChecked: globalTokens.mediumBlue,
305
- backgroundHoverColorChecked: "#7BB0D6",
306
- backgroundColorCheckedOnDark: "#FFFFFF",
307
- backgroundHoverColorCheckedOnDark: "#B1B1B1",
308
- borderColor: globalTokens.mediumBlue,
309
- borderHoverColor: "#7BB0D6",
310
- borderColorOnDark: "#FFFFFF",
311
- borderHoverColorOnDark: "#B1B1B1",
312
- checkColor: globalTokens.white,
313
- 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,
314
366
  fontFamily: globalTokens.type_sans,
315
- fontSize: globalTokens.type_scale_01,
316
- fontWeight: globalTokens.type_normal,
317
- fontColor: globalTokens.inherit,
318
- fontColorOnDark: "#FFFFFF",
319
- disabledBackgroundColorChecked: globalTokens.softBlue,
320
- disabledBackgroundColorCheckedOnDark: globalTokens.softBlue,
321
- disabledBorderColor: globalTokens.softBlue,
322
- disabledBorderColorOnDark: globalTokens.softBlue,
323
- disabledColorOnDark: "#BFBFBF",
324
- disabledCheckColor: globalTokens.white,
325
- disabledCheckColorOnDark: "#FFFFFF",
326
- disabledFontColor: globalTokens.lighterBlack,
327
- disabledFontColorOnDark: "#575757",
328
- focusColor: globalTokens.blue,
329
- 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"
330
376
  },
331
377
  chip: {
332
- backgroundColor: globalTokens.darkWhite,
333
- borderColor: "transparent",
334
- fontColor: globalTokens.black,
335
- disabledBackgroundColor: globalTokens.mediumWhite,
336
- disabledFontColor: globalTokens.lighterBlack,
378
+ backgroundColor: globalTokens.hal_grey_l_90,
379
+ disabledBackgroundColor: globalTokens.hal_grey_l_95,
337
380
  fontFamily: globalTokens.type_sans,
338
381
  fontSize: globalTokens.type_scale_03,
339
- fontWeight: "400",
340
- fontStyle: "normal",
341
- borderRadius: "50px",
342
- 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",
343
389
  borderStyle: "solid",
344
- height: "18px",
345
- contentPaddingLeft: "20px",
346
- contentPaddingRight: "20px",
347
- contentPaddingTop: "10px",
348
- contentPaddingBottom: "10px",
349
- iconMaxHeight: "24px",
350
- iconMaxWidth: "24px",
351
- suffixIconPaddingLeft: "0px",
352
- suffixIconPaddingRight: "0px",
353
- suffixIconPaddingTop: "0px",
354
- suffixIconPaddingBottom: "0px",
355
- prefixIconPaddingLeft: "0px",
356
- prefixIconPaddingRight: "0px",
357
- prefixIconPaddingTop: "0px",
358
- 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
359
399
  },
360
400
  date: {
361
401
  pickerSelectedDateBackgroundColor: globalTokens.purple,
362
- pickerSelectedDateColor: globalTokens.white,
363
- pickerBackgroundColor: globalTokens.white,
364
- pickerFontColor: globalTokens.black,
365
- pickerActualDate: globalTokens.lightGrey,
402
+ pickerSelectedDateColor: globalTokens.hal_white,
403
+ pickerBackgroundColor: globalTokens.hal_white,
404
+ pickerFontColor: globalTokens.hal_black,
366
405
  pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
367
- pickerHoverDateFontColor: globalTokens.black,
368
- pickerYearColor: globalTokens.black,
369
- pickerMonthColor: globalTokens.black,
370
- pickerWeekLabelColor: globalTokens.black,
371
- pickerBackgroundColorMonthArrows: globalTokens.black,
372
- 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,
373
413
  fontFamily: globalTokens.type_sans,
374
414
  pickerHeight: "316px",
375
415
  pickerWidth: "290px"
376
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"
433
+ },
377
434
  dialog: {
378
- overlayColor: globalTokens.black,
379
- scrollBarThumbColor: globalTokens.darkGrey,
380
- scrollBarTrackColor: globalTokens.lightGrey,
381
- backgroundColor: globalTokens.white,
382
- fontFamily: globalTokens.type_sans,
383
- fontSize: globalTokens.type_scale_03,
384
- fontWeight: globalTokens.type_regular,
385
- fontColor: globalTokens.black,
386
- closeIconWidth: "34px",
387
- closeIconHeight: "34px",
435
+ overlayColor: globalTokens.hal_black,
436
+ backgroundColor: globalTokens.hal_white,
437
+ closeIconWidth: "24px",
438
+ closeIconHeight: "24px",
388
439
  closeIconTopPosition: "20px",
389
440
  closeIconRightPosition: "20px",
390
441
  closeIconBackgroundColor: "none",
391
442
  closeIconBorderColor: "none",
392
- closeIconColor: globalTokens.black,
443
+ closeIconColor: globalTokens.hal_black,
393
444
  closeIconBorderThickness: "0px",
394
445
  closeIconBorderStyle: "solid",
395
446
  closeIconBorderRadius: "0px",
@@ -397,151 +448,194 @@ var componentTokens = {
397
448
  boxShadowOffsetY: "1px",
398
449
  boxShadowBlur: "3px",
399
450
  boxShadowColor: "rgba(0, 0, 0, 0.2)",
400
- overlayOpacity: "0.8"
451
+ overlayOpacity: "0.7"
401
452
  },
402
453
  dropdown: {
403
- buttonBackgroundColor: globalTokens.white,
404
- buttonFontColor: globalTokens.black,
405
- optionsListBackgroundColor: globalTokens.white,
406
- optionsListFontColor: globalTokens.black,
407
- optionsListHoverBackgroundColor: globalTokens.white,
408
- buttonHoverBackgroundColor: globalTokens.white,
409
- scrollBarThumbColor: globalTokens.darkGrey,
410
- scrollBarTrackColor: globalTokens.lightGrey,
411
- focusColor: globalTokens.blue,
412
- fontFamily: globalTokens.type_sans,
413
- 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,
414
458
  buttonFontSize: globalTokens.type_scale_03,
415
459
  buttonFontStyle: globalTokens.type_normal,
416
460
  buttonFontWeight: globalTokens.type_regular,
417
- minHeight: "46px",
418
- minWidth: "230px",
419
- 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",
420
491
  borderStyle: "none",
421
492
  borderThickness: "0px",
422
- borderColor: "transparent",
423
- optionsPaddingTop: "6px",
424
- optionsPaddingBottom: "6px",
425
- optionsPaddingLeft: "6px",
426
- optionsPaddingRight: "6px",
427
- caretIconMarginRight: "10px",
428
- caretIconMarginLeft: "10px",
429
- caretIconMarginTop: "0px",
430
- caretIconMarginBottom: "0px",
431
- optionsFontColor: "",
432
- optionsFontSize: globalTokens.type_scale_root,
433
- optionsFontStyle: globalTokens.type_normal,
434
- 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
435
549
  },
436
550
  footer: {
437
- backgroundColor: globalTokens.black,
438
- bottomLinksDividerColor: globalTokens.mediumBlue,
439
- bottomLinksDividerThickness: "2px",
551
+ height: "124px",
552
+ backgroundColor: globalTokens.hal_black,
553
+ bottomLinksDividerColor: globalTokens.hal_blue_l_50,
554
+ bottomLinksDividerThickness: "1px",
440
555
  bottomLinksDividerStyle: "solid",
441
- bottomLinksDividerSpacing: "6px",
556
+ bottomLinksDividerSpacing: "8px",
442
557
  bottomLinksFontFamily: globalTokens.type_sans,
443
558
  bottomLinksFontSize: globalTokens.type_scale_01,
444
559
  bottomLinksFontStyle: globalTokens.type_normal,
445
560
  bottomLinksFontWeight: globalTokens.type_regular,
446
- bottomLinksFontColor: "",
561
+ bottomLinksFontColor: globalTokens.hal_white,
447
562
  bottomLinksTextDecoration: globalTokens.type_no_line,
448
563
  copyrightFontFamily: globalTokens.type_sans,
449
564
  copyrightFontSize: globalTokens.type_scale_01,
450
565
  copyrightFontStyle: globalTokens.type_normal,
451
566
  copyrightFontWeight: globalTokens.type_regular,
452
- copyrightFontColor: "",
453
- customContentFontFamily: globalTokens.type_sans,
454
- customContentFontSize: globalTokens.type_scale_root,
455
- customContentFontStyle: globalTokens.type_normal,
456
- customContentFontWeight: globalTokens.type_regular,
457
- customContentFontColor: "",
458
- fontColorBase: globalTokens.white,
459
- logo: _dxc_logo_wht["default"],
460
- logoHeight: "34px",
567
+ copyrightFontColor: globalTokens.hal_white,
568
+ logo: _Icons2["default"],
569
+ logoHeight: "32px",
461
570
  logoWidth: "auto",
462
- minHeight: "120px",
463
- socialIconSize: "25px",
464
- socialIconsGutter: "15px"
571
+ socialLinksSize: "24px",
572
+ socialLinksGutter: "16px",
573
+ socialLinksColor: globalTokens.hal_white
465
574
  },
466
575
  header: {
467
- backgroundColor: globalTokens.white,
468
- customContentFontFamily: "",
469
- customContentFontStyle: globalTokens.type_normal,
470
- customContentFontColor: "",
471
- customContentFontSize: "",
472
- customContentFontWeight: globalTokens.type_regular,
473
- dropdownBackgroundColor: globalTokens.transparent,
474
- dropdownHoverBackgroundColor: globalTokens.transparent,
475
- fontColorBase: globalTokens.black,
476
- fontFamilyBase: globalTokens.type_sans,
477
- fontSizeBase: globalTokens.type_scale_root,
478
- hamburguerFocusColor: globalTokens.blue,
479
- hamburguerFontFamily: "",
576
+ backgroundColor: globalTokens.hal_white,
577
+ hamburguerFocusColor: globalTokens.hal_blue_l_50,
578
+ hamburguerFontFamily: globalTokens.type_sans,
480
579
  hamburguerFontStyle: globalTokens.type_normal,
481
- hamburguerFontColor: "",
482
- hamburguerFontSize: globalTokens.fontSize10,
580
+ hamburguerFontColor: globalTokens.hal_black,
581
+ hamburguerFontSize: "10px",
483
582
  hamburguerFontWeight: globalTokens.type_semibold,
484
- hamburguerColor: globalTokens.black,
485
- hamburguerHoverColor: globalTokens.mediumGreyBlack,
486
583
  hamburguerTextTransform: globalTokens.type_uppercase,
487
- logo: _dxc_logo_blk_rgb["default"],
488
- logoResponsive: _dxc_logo_blk_rgb["default"],
489
- logoHeight: "32px",
584
+ hamburguerIconColor: globalTokens.hal_black,
585
+ hamburguerHoverColor: globalTokens.mediumGreyBlack,
586
+ logo: _Icons.dxcLogo,
587
+ logoResponsive: _Icons.dxcLogo,
588
+ logoHeight: "40px",
490
589
  logoWidth: "auto",
491
- menuBackgroundColor: globalTokens.white,
590
+ menuBackgroundColor: globalTokens.hal_white,
492
591
  menuZindex: "2000",
493
592
  menuTabletWidth: "60vw",
494
593
  menuMobileWidth: "100vw",
495
- menuCustomContentFontFamily: "",
496
- menuCustomContentFontStyle: globalTokens.type_normal,
497
- menuCustomContentFontColor: "",
498
- menuCustomContentFontSize: "",
499
- menuCustomContentFontWeight: globalTokens.type_regular,
500
594
  minHeight: "64px",
501
595
  overlayColor: globalTokens.softBlack,
502
596
  overlayOpacity: "0.7",
503
597
  overlayZindex: "1600",
504
598
  paddingTop: "0px",
505
599
  paddingBottom: "0px",
506
- paddingRight: "0px",
507
- paddingLeft: "20px",
508
- underlinedColor: globalTokens.black,
600
+ paddingRight: "24px",
601
+ paddingLeft: "24px",
602
+ underlinedColor: globalTokens.hal_black,
509
603
  underlinedThickness: "2px",
510
- underlinedStyle: "solid"
604
+ underlinedStyle: "solid",
605
+ contentColor: globalTokens.hal_black,
606
+ contentColorOnDark: globalTokens.hal_white
511
607
  },
512
608
  heading: {
513
- fontColorBase: globalTokens.inherit,
514
- fontFamilyBase: globalTokens.type_sans,
515
- level1FontColor: "",
516
- level1FontFamily: "",
609
+ level1FontColor: globalTokens.inherit,
610
+ level1FontFamily: globalTokens.type_sans,
517
611
  level1FontSize: globalTokens.type_scale_08,
518
612
  level1FontStyle: globalTokens.type_normal,
519
613
  level1FontWeight: globalTokens.type_regular,
520
614
  level1LineHeight: globalTokens.type_leading_compact_01,
521
615
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
522
- level2FontColor: "",
523
- level2FontFamily: "",
616
+ level2FontColor: globalTokens.inherit,
617
+ level2FontFamily: globalTokens.type_sans,
524
618
  level2FontSize: globalTokens.type_scale_07,
525
619
  level2FontStyle: globalTokens.type_normal,
526
620
  level2FontWeight: globalTokens.type_regular,
527
621
  level2LineHeight: globalTokens.type_leading_normal,
528
622
  level2LetterSpacing: globalTokens.type_spacing_normal,
529
- level3FontColor: "",
530
- level3FontFamily: "",
623
+ level3FontColor: globalTokens.inherit,
624
+ level3FontFamily: globalTokens.type_sans,
531
625
  level3FontSize: globalTokens.type_scale_06,
532
626
  level3FontStyle: globalTokens.type_normal,
533
627
  level3FontWeight: globalTokens.type_regular,
534
628
  level3LineHeight: globalTokens.type_leading_compact_01,
535
629
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
536
- level4FontColor: "",
537
- level4FontFamily: "",
630
+ level4FontColor: globalTokens.inherit,
631
+ level4FontFamily: globalTokens.type_sans,
538
632
  level4FontSize: globalTokens.type_scale_05,
539
633
  level4FontStyle: globalTokens.type_normal,
540
634
  level4FontWeight: globalTokens.type_regular,
541
635
  level4LineHeight: globalTokens.type_leading_normal,
542
636
  level4LetterSpacing: globalTokens.type_spacing_normal,
543
- level5FontColor: "",
544
- level5FontFamily: "",
637
+ level5FontColor: globalTokens.inherit,
638
+ level5FontFamily: globalTokens.type_sans,
545
639
  level5FontSize: globalTokens.type_scale_04,
546
640
  level5FontStyle: globalTokens.type_normal,
547
641
  level5FontWeight: globalTokens.type_regular,
@@ -549,70 +643,178 @@ var componentTokens = {
549
643
  level5LetterSpacing: globalTokens.type_spacing_wide_01
550
644
  },
551
645
  inputText: {
552
- assistiveTextFontColor: "",
553
- assistiveTextFontColorOnDark: "",
646
+ fontFamily: globalTokens.type_sans,
647
+ assistiveTextFontColor: globalTokens.black,
648
+ assistiveTextFontColorOnDark: globalTokens.white,
554
649
  assistiveTextFontSize: globalTokens.type_scale_01,
555
650
  assistiveTextFontStyle: globalTokens.type_normal,
556
651
  assistiveTextFontWeight: globalTokens.type_regular,
557
- disabledFontColor: globalTokens.lighterBlack,
558
- disabledFontColorOnDark: "#575757",
652
+ disabledColor: globalTokens.lighterBlack,
653
+ disabledColorOnDark: "#575757",
559
654
  errorColor: globalTokens.red,
560
- errorColorOnDark: "#FE344F",
561
- fontColorBase: globalTokens.black,
562
- fontColorBaseOnDark: globalTokens.white,
563
- fontFamilyBase: globalTokens.type_sans,
564
- fontSizeBase: globalTokens.type_scale_root,
655
+ errorColorOnDark: globalTokens.hal_red_l_60,
656
+ optionBackgroundColor: globalTokens.white,
657
+ optionBorderColor: globalTokens.black,
658
+ optionBorderThickness: "0px",
659
+ optionBorderStyle: "solid",
660
+ optionFontColor: globalTokens.black,
661
+ optionFontColorOnDark: globalTokens.white,
662
+ optionFontSize: globalTokens.type_scale_03,
663
+ optionFontStyle: globalTokens.type_normal,
664
+ optionFontWeight: globalTokens.type_regular,
665
+ optionPaddingBottom: "6px",
666
+ optionPaddingTop: "6px",
667
+ scrollBarThumbColor: globalTokens.darkGrey,
668
+ scrollBarTrackColor: globalTokens.lightGrey,
565
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,
566
676
  labelFontSize: globalTokens.type_scale_03,
567
- prefixIconColor: "",
568
- prefixIconColorOnDark: "",
569
- prefixLabelFontColor: "",
570
- prefixLabelFontColorOnDark: "",
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,
571
688
  prefixLabelFontSize: globalTokens.type_scale_03,
572
689
  prefixLabelFontStyle: globalTokens.type_normal,
573
690
  prefixLabelFontWeight: globalTokens.type_regular,
574
- scrollBarThumbColor: globalTokens.darkGrey,
575
- scrollBarTrackColor: globalTokens.lightGrey,
576
- selectedOptionBackgroundColor: globalTokens.lightWhite,
577
- suffixIconColor: "",
578
- suffixIconColorOnDark: "",
579
- suffixLabelFontColor: "",
580
- suffixLabelFontColorOnDark: "",
691
+ suffixIconColor: globalTokens.black,
692
+ suffixIconColorOnDark: globalTokens.white,
693
+ suffixLabelFontColor: globalTokens.black,
694
+ suffixLabelFontColorOnDark: globalTokens.white,
581
695
  suffixLabelFontSize: globalTokens.type_scale_03,
582
696
  suffixLabelFontStyle: globalTokens.type_normal,
583
697
  suffixLabelFontWeight: globalTokens.type_regular,
584
- underlineColor: "",
585
- underlineColorOnDark: "",
586
- underlineFocusColor: "",
587
- underlineFocusColorOnDark: "",
698
+ underlineColor: globalTokens.black,
699
+ underlineColorOnDark: globalTokens.white,
700
+ underlineFocusColor: globalTokens.black,
701
+ underlineFocusColorOnDark: globalTokens.white,
588
702
  underlineThickness: "1px"
589
703
  },
704
+ textInput: {
705
+ fontFamily: globalTokens.type_sans,
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
789
+ },
590
790
  link: {
591
- disabledColor: globalTokens.lightGrey,
592
- disabledUnderlineColor: globalTokens.lightGrey,
593
- fontColor: globalTokens.blue,
791
+ fontColor: globalTokens.hal_blue_s_35,
594
792
  fontFamily: globalTokens.inherit,
595
793
  fontSize: globalTokens.type_scale_root,
596
794
  fontStyle: globalTokens.type_normal,
597
795
  fontWeight: globalTokens.type_regular,
598
- hoverFontColor: globalTokens.darkBlue,
599
- hoverUnderlineColor: globalTokens.darkBlue,
600
796
  iconSize: "16px",
601
- iconGutter: "6px",
602
- underlineColor: globalTokens.blue,
603
- underlineSpacing: "1px",
797
+ iconSpacing: "4px",
798
+ underlineSpacing: "0px",
604
799
  underlineStyle: "solid",
605
800
  underlineThickness: "1px",
606
- visitedFontColor: globalTokens.violet,
607
- 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
608
809
  },
609
810
  paginator: {
610
811
  backgroundColor: globalTokens.darkWhite,
611
- fontColor: globalTokens.black,
812
+ fontColor: globalTokens.hal_black,
612
813
  fontFamily: globalTokens.type_sans,
613
814
  fontSize: globalTokens.type_scale_02,
614
815
  fontStyle: globalTokens.type_normal,
615
816
  fontWeight: globalTokens.type_regular,
817
+ fontTextTransform: "none",
616
818
  height: "64px",
617
819
  width: "100%",
618
820
  marginRight: "40px",
@@ -625,20 +827,29 @@ var componentTokens = {
625
827
  totalItemsContainerMarginLeft: "0px"
626
828
  },
627
829
  progressBar: {
628
- trackLineColor: globalTokens.purple,
830
+ trackLineColor: globalTokens.hal_purple_s_38,
831
+ trackLineColorOnDark: globalTokens.hal_purple_l_65,
629
832
  totalLineColor: globalTokens.softGrey,
630
833
  labelFontFamily: globalTokens.type_sans,
631
834
  labelFontSize: globalTokens.type_scale_01,
632
835
  labelFontStyle: globalTokens.type_normal,
633
836
  labelFontWeight: globalTokens.type_regular,
634
837
  labelFontColor: globalTokens.black,
838
+ labelFontColorOnDark: globalTokens.hal_white,
635
839
  labelFontTextTransform: globalTokens.type_uppercase,
636
840
  valueFontFamily: globalTokens.type_sans,
637
841
  valueFontSize: globalTokens.type_scale_01,
638
842
  valueFontStyle: globalTokens.type_normal,
639
843
  valueFontWeight: globalTokens.type_regular,
640
844
  valueFontColor: globalTokens.black,
845
+ valueFontColorOnDark: globalTokens.hal_white,
641
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,
642
853
  thickness: "9px",
643
854
  borderRadius: "5px",
644
855
  overlayColor: globalTokens.black,
@@ -653,7 +864,7 @@ var componentTokens = {
653
864
  disabledColorOnDark: "#575757",
654
865
  disabledFontColor: globalTokens.lighterBlack,
655
866
  disabledFontColorOnDark: "#575757",
656
- focusColor: globalTokens.blue,
867
+ focusColor: globalTokens.hal_blue_l_50,
657
868
  focusColorOnDark: "#1682FF",
658
869
  fontColor: globalTokens.inherit,
659
870
  fontColorOnDark: globalTokens.white,
@@ -663,77 +874,176 @@ var componentTokens = {
663
874
  fontWeight: globalTokens.type_regular
664
875
  },
665
876
  select: {
666
- checkboxOptionSpacing: "10px",
667
- color: globalTokens.black,
668
- colorOnDark: globalTokens.white,
669
- disabledColor: globalTokens.lighterBlack,
670
- disabledColorOnDark: "#575757",
671
- errorColor: globalTokens.red,
672
- errorColorOnDark: "#FE344F",
673
- focusColor: globalTokens.blue,
674
- focusColorOnDark: globalTokens.blue,
675
877
  fontFamily: globalTokens.type_sans,
676
- hoveredOptionBackgroundColor: globalTokens.lightWhite,
677
- hoveredOptionBackgroundColorOnDark: globalTokens.lightWhite,
678
- iconColor: "",
679
- iconOptionSpacing: "10px",
680
- iconHeight: "20px",
681
- 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,
682
966
  labelFontSize: globalTokens.type_scale_03,
683
967
  labelFontStyle: globalTokens.type_normal,
684
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,
685
982
  optionPaddingBottom: "6px",
686
983
  optionPaddingTop: "6px",
687
- optionPaddingLeft: "16px",
688
- optionPaddingRight: "16px",
689
- optionsBackgroundColor: globalTokens.white,
690
- optionsBorderColor: "none",
691
- optionsBorderThickness: "0px",
692
- optionsBorderStyle: "solid",
693
- optionsFontColor: "",
694
- optionsFontSize: globalTokens.type_scale_root,
695
- optionsFontStyle: globalTokens.type_normal,
696
- optionsFontWeight: globalTokens.type_regular,
697
- scrollBarThumbColor: globalTokens.darkGrey,
984
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
698
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,
699
995
  selectedOptionBackgroundColor: globalTokens.lightGrey,
700
- 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
701
1015
  },
702
1016
  sidenav: {
703
- backgroundColor: globalTokens.lighterGrey,
704
- arrowContainerColor: globalTokens.lightGrey,
705
- arrowColor: globalTokens.black,
706
- customContentFontFamily: globalTokens.type_sans,
707
- customContentFontSize: globalTokens.type_scale_root,
708
- customContentFontStyle: globalTokens.type_normal,
709
- customContentFontWeight: globalTokens.type_regular,
710
- customContentFontColor: globalTokens.black,
1017
+ backgroundColor: globalTokens.hal_grey_l_95,
1018
+ arrowContainerColor: globalTokens.hal_grey_l_90,
1019
+ arrowColor: globalTokens.hal_black,
711
1020
  titleFontFamily: globalTokens.type_sans,
712
1021
  titleFontSize: globalTokens.type_scale_05,
713
1022
  titleFontStyle: globalTokens.type_normal,
714
1023
  titleFontWeight: globalTokens.type_regular,
715
- titleFontColor: "#000000de",
1024
+ titleFontColor: globalTokens.hal_black,
716
1025
  titleFontTextTransform: "none",
717
1026
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
718
1027
  subtitleFontFamily: globalTokens.type_sans,
719
- subtitleFontSize: globalTokens.type_scale_01,
1028
+ subtitleFontSize: globalTokens.type_scale_03,
720
1029
  subtitleFontStyle: globalTokens.type_normal,
721
1030
  subtitleFontWeight: globalTokens.type_regular,
722
- subtitleFontColor: "#00000099",
1031
+ subtitleFontColor: globalTokens.color_grey_800,
723
1032
  subtitleFontTextTransform: globalTokens.type_uppercase,
724
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_03,
1033
+ subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
725
1034
  linkFontFamily: globalTokens.type_sans,
726
1035
  linkFontSize: globalTokens.type_scale_02,
727
1036
  linkFontStyle: globalTokens.type_normal,
728
1037
  linkFontWeight: globalTokens.type_regular,
729
- linkFontColor: "#00000099",
1038
+ linkFontColor: globalTokens.color_grey_800,
730
1039
  linkFontTextTransform: "none",
731
1040
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
732
1041
  linkTextDecoration: globalTokens.type_no_line,
733
- linkMarginTop: "6px",
734
- linkMarginRight: "18px",
735
- linkMarginBottom: "6px",
736
- linkMarginLeft: "18px",
1042
+ linkMarginTop: "4px",
1043
+ linkMarginBottom: "4px",
1044
+ linkMarginRight: "16px",
1045
+ linkMarginLeft: "16px",
1046
+ linkFocusColor: globalTokens.hal_blue_l_50,
737
1047
  scrollBarThumbColor: "#66666626",
738
1048
  scrollBarTrackColor: globalTokens.transparent
739
1049
  },
@@ -742,89 +1052,110 @@ var componentTokens = {
742
1052
  fontSize: globalTokens.type_scale_03,
743
1053
  fontStyle: globalTokens.type_normal,
744
1054
  fontWeight: globalTokens.type_regular,
745
- fontColor: globalTokens.black,
746
- 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,
747
1070
  fontLetterSpacing: globalTokens.type_spacing_normal,
748
- thumbHeight: "20px",
749
- thumbWidth: "20px",
750
- thumbTopPosition: "32.5%",
751
- thumbBackgroundColor: globalTokens.mediumBlue,
752
- thumbBackgroundColorOnDark: globalTokens.white,
753
- draggedThumbScale: "1",
754
- draggedThumbBackgroundColor: globalTokens.mediumBlue,
755
- draggedThumbBackgroundColorOnDark: "#0095FF",
756
- dotsHeight: "6px",
757
- dotsWidth: "6px",
758
- dotsTopPosition: "42%",
759
- dotsBackgroundColor: globalTokens.mediumBlue,
760
- 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,
761
1092
  trackLineThickness: "2px",
762
- trackLinePosition: "50%",
763
- trackLineColor: globalTokens.mediumBlue,
764
- trackLineOnDark: globalTokens.white,
765
- totalLineThickness: "",
766
- totalLineTopPosition: "50%",
767
- totalLineColor: globalTokens.softBlue,
768
- totalLineOnDark: globalTokens.white,
769
- disabledThumbTopPosition: "24%",
770
- 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,
771
1102
  disabledThumbBackgroundColorOnDark: "#575757",
772
- disabledDotsTopPosition: "",
773
- disabledDotsBackgroundColor: globalTokens.softBlue,
774
- disabledDotsBackgroundColorOnDark: "#575757",
775
- disabledTrackLineColor: globalTokens.softBlue,
776
- disabledTrackLineOnDark: "#575757",
777
- disabledTotalLineColor: globalTokens.softBlue,
778
- disabledTotalLineColorOnDark: "#575757",
779
- focusColor: globalTokens.blue,
780
- 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
781
1115
  },
782
1116
  spinner: {
783
- trackCircleColor: globalTokens.purple,
1117
+ trackCircleColor: "#5f249f",
1118
+ trackCircleColorOnDark: "#a46ede",
784
1119
  totalCircleColor: globalTokens.white,
785
1120
  labelFontFamily: globalTokens.type_sans,
786
- labelFontSize: globalTokens.type_scale_01,
1121
+ labelFontSize: globalTokens.type_scale_02,
787
1122
  labelFontStyle: globalTokens.type_normal,
788
1123
  labelFontWeight: globalTokens.type_regular,
789
- labelFontColor: globalTokens.inherit,
790
- labelFontTextTransform: globalTokens.type_uppercase,
791
- labelLetterSpacing: globalTokens.type_spacing_normal,
1124
+ labelFontColor: globalTokens.black,
1125
+ labelFontColorOnDark: globalTokens.white,
792
1126
  labelTextAlign: "center",
793
1127
  progressValueFontFamily: globalTokens.type_sans,
794
- progressValueFontSize: globalTokens.type_scale_01,
1128
+ progressValueFontSize: globalTokens.type_scale_02,
795
1129
  progressValueFontStyle: globalTokens.type_normal,
796
- progressValueFontWeight: globalTokens.type_regular,
1130
+ progressValueFontWeight: globalTokens.type_bold,
797
1131
  progressValueFontColor: globalTokens.inherit,
798
- progressValueLetterSpacing: globalTokens.type_spacing_normal,
1132
+ progressValueFontColorOnDark: globalTokens.white,
799
1133
  progressValueTextAlign: "center",
800
1134
  overlayBackgroundColor: globalTokens.black,
801
1135
  overlayOpacity: "0.8",
802
1136
  overlayLabelFontFamily: globalTokens.type_sans,
803
- overlayLabelFontSize: globalTokens.type_scale_01,
1137
+ overlayLabelFontSize: globalTokens.type_scale_02,
804
1138
  overlayLabelFontStyle: globalTokens.type_normal,
805
1139
  overlayLabelFontWeight: globalTokens.type_regular,
806
1140
  overlayLabelFontColor: globalTokens.white,
807
- overlayLabelFontTextTransform: globalTokens.type_uppercase,
808
- overlayLabelLetterSpacing: globalTokens.type_spacing_normal,
809
1141
  overlayLabelTextAlign: "center",
810
1142
  overlayProgressValueFontFamily: globalTokens.type_sans,
811
- overlayProgressValueFontSize: globalTokens.type_scale_01,
1143
+ overlayProgressValueFontSize: globalTokens.type_scale_02,
812
1144
  overlayProgressValueFontStyle: globalTokens.type_normal,
813
- overlayProgressValueFontWeight: globalTokens.type_regular,
1145
+ overlayProgressValueFontWeight: globalTokens.type_bold,
814
1146
  overlayProgressValueFontColor: globalTokens.white,
815
- overlayProgressValueLetterSpacing: globalTokens.type_spacing_normal,
816
1147
  overlayProgressValueTextAlign: "center"
817
1148
  },
818
1149
  "switch": {
819
- checkedTrackBackgroundColor: globalTokens.purple,
820
- checkedTrackBackgroundColorOnDark: globalTokens.purple,
1150
+ checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1151
+ checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
821
1152
  checkedThumbBackgroundColor: globalTokens.white,
822
1153
  checkedThumbBackgroundColorOnDark: globalTokens.white,
823
1154
  uncheckedTrackBackgroundColor: globalTokens.lightGrey,
824
1155
  uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
825
1156
  uncheckedThumbBackgroundColor: globalTokens.white,
826
1157
  uncheckedThumbBackgroundColorOnDark: globalTokens.white,
827
- disabledCheckedTrackBackgroundColor: globalTokens.lighterPurple,
1158
+ disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
828
1159
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
829
1160
  disabledCheckedThumbBackgroundColor: globalTokens.white,
830
1161
  disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
@@ -841,38 +1172,50 @@ var componentTokens = {
841
1172
  labelFontWeight: globalTokens.type_regular,
842
1173
  labelFontColor: globalTokens.black,
843
1174
  labelFontColorOnDark: globalTokens.white,
844
- labelMarginRight: "0px",
845
1175
  thumbFocusColor: globalTokens.blue,
846
- thumbFocusColorOnDark: "#1489FB",
1176
+ thumbFocusColorOnDark: "#1682FF",
847
1177
  thumbHeight: "24px",
848
1178
  thumbWidth: "24px",
1179
+ thumbShift: "40%",
849
1180
  trackHeight: "12px",
850
1181
  trackWidth: "60px",
851
- thumbTranslateX: "40%"
1182
+ spaceBetweenLabelSwitch: "0px"
852
1183
  },
853
1184
  tag: {
1185
+ fontFamily: globalTokens.type_sans,
1186
+ fontColor: globalTokens.hal_black,
1187
+ fontSize: globalTokens.type_scale_02,
854
1188
  fontStyle: globalTokens.type_normal,
855
- fontTextTransform: globalTokens.type_uppercase,
856
- height: "43px",
857
- iconColor: globalTokens.white,
858
- 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",
859
1197
  iconHeight: "24px",
860
- iconWidth: "auto"
1198
+ iconWidth: "auto",
1199
+ focusColor: globalTokens.hal_blue_l_50
861
1200
  },
862
1201
  table: {
863
1202
  rowSeparatorThickness: "1px",
864
1203
  rowSeparatorStyle: "solid",
865
1204
  rowSeparatorColor: globalTokens.lightGrey,
866
- rowHeight: "48px",
867
1205
  dataBackgroundColor: globalTokens.white,
868
1206
  dataFontFamily: globalTokens.type_sans,
869
- dataFontSize: globalTokens.type_scale_root,
1207
+ dataFontSize: globalTokens.type_scale_02,
870
1208
  dataFontStyle: globalTokens.type_normal,
871
1209
  dataFontWeight: globalTokens.type_regular,
872
1210
  dataFontColor: globalTokens.black,
873
1211
  dataFontTextTransform: "none",
1212
+ dataPaddingTop: "14px",
1213
+ dataPaddingBottom: "12px",
1214
+ dataPaddingRight: "20px",
1215
+ dataPaddingLeft: "40px",
874
1216
  dataTextAlign: "left",
875
- headerBackgroundColor: globalTokens.purple,
1217
+ dataTextLineHeight: "normal",
1218
+ headerBackgroundColor: globalTokens.hal_purple_s_38,
876
1219
  headerBorderRadius: "4px",
877
1220
  headerFontFamily: globalTokens.type_sans,
878
1221
  headerFontSize: globalTokens.type_scale_02,
@@ -880,7 +1223,12 @@ var componentTokens = {
880
1223
  headerFontWeight: globalTokens.type_regular,
881
1224
  headerFontColor: globalTokens.white,
882
1225
  headerFontTextTransform: "none",
1226
+ headerPaddingTop: "16px",
1227
+ headerPaddingBottom: "16px",
1228
+ headerPaddingRight: "20px",
1229
+ headerPaddingLeft: "40px",
883
1230
  headerTextAlign: "left",
1231
+ headerTextLineHeight: "normal",
884
1232
  scrollBarThumbColor: globalTokens.darkGrey,
885
1233
  scrollBarTrackColor: globalTokens.lightGrey,
886
1234
  sortIconColor: globalTokens.white
@@ -892,27 +1240,23 @@ var componentTokens = {
892
1240
  fontWeight: globalTokens.type_semibold,
893
1241
  fontTextTransform: "none",
894
1242
  selectedBackgroundColor: globalTokens.white,
895
- selectedFontColor: globalTokens.purple,
896
- selectedIconColor: globalTokens.purple,
897
- selectedUnderlineColor: globalTokens.purple,
898
- selectedUnderlineThickness: "",
1243
+ selectedFontColor: "#5f249f",
1244
+ selectedIconColor: "#5f249f",
1245
+ selectedUnderlineColor: "#5f249f",
1246
+ selectedUnderlineThickness: "2px",
899
1247
  unselectedBackgroundColor: globalTokens.white,
900
1248
  unselectedFontColor: globalTokens.darkGrey,
901
1249
  unselectedIconColor: globalTokens.darkGrey,
902
- disabledFontColor: globalTokens.mediumGrey,
903
- disabledIconColor: globalTokens.mediumGrey,
1250
+ disabledFontColor: "#999999",
1251
+ disabledIconColor: "#999999",
904
1252
  disabledFontStyle: globalTokens.type_normal,
905
- hoverBackgroundColor: globalTokens.lightPurple,
906
- pressedBackgroundColor: globalTokens.mediumPurple,
1253
+ hoverBackgroundColor: "#f2eafa",
1254
+ pressedBackgroundColor: "#e5d5f6",
907
1255
  pressedFontWeight: globalTokens.type_semibold,
908
1256
  dividerColor: globalTokens.mediumGrey,
909
1257
  dividerThickness: "1px",
910
- focusOutline: globalTokens.purple,
1258
+ focusOutline: "#5f249f",
911
1259
  scrollButtonsWidth: "48px",
912
- minWidth: "90px",
913
- maxWidth: "360px",
914
- minHeight: "48px",
915
- minHeightWithLabelAndIcon: "72px",
916
1260
  badgeBackgroundColor: globalTokens.darkRed,
917
1261
  badgeFontFamily: globalTokens.type_sans,
918
1262
  badgeFontSize: "10px",
@@ -922,71 +1266,140 @@ var componentTokens = {
922
1266
  badgeLetterSpacing: globalTokens.type_spacing_wide_02,
923
1267
  badgeWidth: "16px",
924
1268
  badgeHeight: "16px",
1269
+ badgeRadius: "10px",
925
1270
  badgeWidthWithNotificationNumber: "23px",
926
- badgeHeightWithNotificationNumber: "17px"
1271
+ badgeHeightWithNotificationNumber: "17px",
1272
+ badgeRadiusWithNotificationNumber: "10px"
927
1273
  },
928
1274
  textarea: {
929
- disabledFontColor: globalTokens.lighterBlack,
930
- disabledFontColorOnDark: "#575757",
931
- errorColor: globalTokens.red,
932
- errorColorOnDark: "#FE344F",
933
- 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,
934
1323
  assistiveTextFontSize: globalTokens.type_scale_01,
935
1324
  assistiveTextFontStyle: globalTokens.type_normal,
936
1325
  assistiveTextFontWeight: globalTokens.type_regular,
937
1326
  assistiveTextFontColor: globalTokens.black,
938
1327
  assistiveTextFontColorOnDark: globalTokens.white,
939
- assistiveTextLetterSpacing: "",
940
- customContentFontFamily: globalTokens.type_sans,
941
- customContentFontSize: globalTokens.type_scale_03,
942
- customContentFontStyle: globalTokens.type_normal,
943
- customContentFontWeight: globalTokens.type_regular,
944
- customContentFontColor: globalTokens.black,
945
- customContentFontColorOnDark: globalTokens.white,
946
- customContentLetterSpacing: globalTokens.type_spacing_normal,
947
- customContentLineHeight: "1.1875em",
948
- 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",
949
1337
  labelFontSize: globalTokens.type_scale_03,
950
1338
  labelFontStyle: globalTokens.type_normal,
951
1339
  labelFontWeight: globalTokens.type_regular,
952
1340
  labelFontColor: globalTokens.black,
953
1341
  labelFontColorOnDark: globalTokens.white,
954
- labelLetterSpacing: "",
955
- scrollBarThumbColor: globalTokens.darkGrey,
956
- scrollBarThumbColorOnDark: globalTokens.white,
957
- scrollBarTrackColor: globalTokens.lightGrey,
958
- 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"
959
1355
  },
960
1356
  toggleGroup: {
961
- fontFamily: globalTokens.type_sans,
962
- fontSize: globalTokens.type_scale_02,
963
- fontStyle: globalTokens.type_normal,
964
- fontWeight: globalTokens.type_regular,
965
- fontTextTransform: globalTokens.type_uppercase,
966
- fontLetterSpacing: globalTokens.type_spacing_wide_02,
967
- focusColor: globalTokens.blue,
968
- selectedBackgroundColor: globalTokens.purple,
969
- selectedBackgroundHoverColor: globalTokens.black,
970
- selectedFontColor: globalTokens.white,
971
- selectedHoverFontColor: globalTokens.white,
972
- unselectedBackgroundColor: globalTokens.lightGrey,
973
- unselectedBackgroundHoverColor: globalTokens.darkWhite,
974
- unselectedFontColor: globalTokens.black,
975
- unselectedHoverFontColor: globalTokens.black,
976
- disabledSelectedBackgroundColor: globalTokens.lighterPurple,
977
- disabledSelectedFontColor: globalTokens.white,
978
- disabledUnselectedBackgroundColor: globalTokens.lightWhite,
979
- disabledUnselectedFontColor: globalTokens.lighterBlack,
980
- iconHeight: "20px",
981
- iconWidth: "20px",
982
- iconPaddingTop: "10px",
983
- iconPaddingBottom: "10px",
984
- iconPaddingRight: "12px",
985
- iconPaddingLeft: "12px",
986
- labelPaddingTop: "12px",
987
- labelPaddingBottom: "12px",
988
- labelPaddingLeft: "30px",
989
- 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
990
1403
  },
991
1404
  upload: {
992
1405
  fontFamily: globalTokens.type_sans,
@@ -995,10 +1408,9 @@ var componentTokens = {
995
1408
  scrollBarTrackColor: globalTokens.lightGrey,
996
1409
  errorColor: globalTokens.red,
997
1410
  backgroundColor: globalTokens.white,
998
- draggingAreaBackgroundColor: globalTokens.lightWhite,
1411
+ draggingStateBackgroundColor: globalTokens.lightWhite,
999
1412
  dragAndDropIconColor: globalTokens.black,
1000
- dragAndDropIconHeight: "43.5px",
1001
- dragAndDropIconWidth: "43.5px",
1413
+ dragAndDropIconSize: "43.5px",
1002
1414
  dragAndDropTitleFontSize: globalTokens.type_scale_04,
1003
1415
  dragAndDropTitleFontStyle: globalTokens.type_normal,
1004
1416
  dragAndDropTitleFontWeight: globalTokens.type_bold,
@@ -1006,29 +1418,25 @@ var componentTokens = {
1006
1418
  dragAndDropTitleFontColor: globalTokens.black,
1007
1419
  dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1008
1420
  dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1009
- dragAndDropDescriptionFontWeight: globalTokens.type_normal,
1010
- dragAndDropTextDescriptionFontTextTransform: "none",
1011
- dragAndDropTextDescriptionFontColor: globalTokens.darkGrey,
1421
+ dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1422
+ dragAndDropDescriptionFontTextTransform: "none",
1423
+ dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1012
1424
  dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1013
- dragAndDropDraggingStateIconHeight: "74.5px",
1014
- dragAndDropDraggingStateIconWidth: "74.5px",
1425
+ dragAndDropDraggingStateIconSize: "74.5px",
1015
1426
  dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1016
1427
  dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1017
- dragAndDropDraggingStateFontWeight: globalTokens.type_normal,
1018
- dragAndDropTextDraggingStateFontTextTransform: "none",
1019
- dragAndDropTextDraggingStateFontColor: globalTokens.darkGrey,
1428
+ dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1429
+ dragAndDropDraggingStateFontTextTransform: "none",
1430
+ dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1020
1431
  dragAndDropAreaIconColor: globalTokens.darkGrey,
1021
- dragAndDropAreaIconHeight: "24px",
1022
- dragAndDropAreaIconWidth: "24px",
1432
+ dragAndDropAreaIconSize: "24px",
1023
1433
  dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1024
1434
  dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1025
1435
  dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1026
1436
  dragAndDropAreaTextFontTextTransform: "none",
1027
1437
  dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1028
1438
  fileDeleteIconColor: globalTokens.black,
1029
- fileDeleteIconHeight: "30px",
1030
- fileDeleteIconWidth: "30px",
1031
- fileHoverColor: globalTokens.darkWhite,
1439
+ fileDeleteIconSize: "30px",
1032
1440
  fileUnderlineColor: globalTokens.lightGrey,
1033
1441
  fileUnderlineThickness: "1px",
1034
1442
  fileNameFontSize: globalTokens.type_scale_03,
@@ -1041,20 +1449,20 @@ var componentTokens = {
1041
1449
  fileTypeFontWeight: globalTokens.type_regular,
1042
1450
  fileTypeFontTextTransform: globalTokens.type_uppercase,
1043
1451
  fileTypeFontColor: globalTokens.darkGrey,
1044
- fileUploadedIconColor: globalTokens.lightGrey,
1045
- fileUploadedIconHeight: "24px",
1046
- fileUploadedIconWidth: "24px",
1047
- filesUploadedTitleFontSize: globalTokens.type_scale_04,
1048
- filesUploadedTitleFontStyle: globalTokens.type_normal,
1049
- filesUploadedTitleFontWeight: globalTokens.type_regular,
1050
- filesUploadedTitleFontTextTransform: "none",
1051
- filesUploadedTitleFontColor: globalTokens.black,
1052
- filesUploadedSubtitleFontSize: globalTokens.type_scale_01,
1053
- filesUploadedSubtitleFontStyle: globalTokens.type_normal,
1054
- filesUploadedSubtitleFontWeight: globalTokens.type_regular,
1055
- filesUploadedSubtitleFontTextTransform: "none",
1056
- filesUploadedSubtitleFontColor: globalTokens.darkGrey,
1057
- 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
1058
1466
  },
1059
1467
  wizard: {
1060
1468
  disabledBackgroundColor: globalTokens.lightGrey,
@@ -1066,10 +1474,9 @@ var componentTokens = {
1066
1474
  stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1067
1475
  stepContainerFontColor: globalTokens.black,
1068
1476
  stepContainerSelectedFontColor: globalTokens.white,
1069
- stepContainerSelectedBackgroundColor: globalTokens.purple,
1477
+ stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1070
1478
  stepContainerBackgroundColor: globalTokens.white,
1071
- stepContainerIconHeight: "19px",
1072
- stepContainerIconWidth: "19px",
1479
+ stepContainerIconSize: "19px",
1073
1480
  labelFontSize: globalTokens.type_scale_03,
1074
1481
  labelFontFamily: globalTokens.type_sans,
1075
1482
  labelFontStyle: globalTokens.type_normal,
@@ -1078,7 +1485,8 @@ var componentTokens = {
1078
1485
  labelFontTextTransform: "none",
1079
1486
  labelTextAlign: "left",
1080
1487
  labelFontColor: globalTokens.darkGrey,
1081
- labelActiveFontColor: globalTokens.black,
1488
+ visitedLabelFontColor: globalTokens.black,
1489
+ visitedDescriptionFontColor: globalTokens.black,
1082
1490
  descriptionFontSize: globalTokens.type_scale_01,
1083
1491
  descriptionFontFamily: globalTokens.type_sans,
1084
1492
  descriptionFontStyle: globalTokens.type_normal,
@@ -1086,29 +1494,29 @@ var componentTokens = {
1086
1494
  descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1087
1495
  descriptionFontTextTransform: "none",
1088
1496
  descriptionFontColor: globalTokens.darkGrey,
1089
- descriptionActiveFontColor: globalTokens.black,
1090
1497
  descriptionTextAlign: "left",
1498
+ circleWidth: "32px",
1499
+ circleHeight: "32px",
1091
1500
  circleBorderThickness: "2px",
1092
1501
  circleBorderStyle: "solid",
1093
1502
  circleBorderRadius: "45px",
1094
1503
  circleBorderColor: globalTokens.black,
1095
- circleSelectedWidth: "32px",
1096
- circleSelectedHeight: "32px",
1097
- circleSelectedBorderThickness: "2px",
1098
- circleSelectedBorderStyle: "solid",
1099
- circleSelectedBorderRadius: "45px",
1100
- circleSelectedBorderColor: globalTokens.purple,
1101
- circleDisabledWidth: "32px",
1102
- circleDisabledHeight: "32px",
1103
- circleDisabledBorderThickness: "2px",
1104
- circleDisabledBorderStyle: "solid",
1105
- circleDisabledBorderRadius: "45px",
1106
- circleDisabledBorderColor: globalTokens.lightGrey,
1107
- circleWidth: "32px",
1108
- 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,
1109
1516
  separatorBorderThickness: "1px",
1110
1517
  separatorBorderStyle: "solid",
1111
- separatorColor: globalTokens.lightGrey
1518
+ separatorColor: globalTokens.lightGrey,
1519
+ focusColor: globalTokens.hal_blue_l_50
1112
1520
  }
1113
1521
  };
1114
1522
  exports.componentTokens = componentTokens;