@dxc-technology/halstack-react 0.0.0-4d1e793 → 0.0.0-50712b5

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