@dxc-technology/halstack-react 0.0.0-10e2ec7 → 0.0.0-12908ef

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