@dxc-technology/halstack-react 0.0.0-6b245df → 0.0.0-6bc7b92

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