@wix/design-system-tokens 1.16.5 → 1.16.7

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.
package/studio/all.css ADDED
@@ -0,0 +1,1114 @@
1
+ :root {
2
+ --wds-add-item-border-radius: 4px;
3
+ --wds-add-item-padding-horizontal-large: 28px;
4
+ --wds-add-item-padding-horizontal-tiny: 12px;
5
+ --wds-add-item-padding-vertical-large: 28px;
6
+ --wds-add-item-padding-vertical-medium: 24px;
7
+ --wds-add-item-padding-vertical-small: 16px;
8
+ --wds-add-item-padding-vertical-tiny: 12px;
9
+ --wds-avatar-group-gap-condensed: -2px;
10
+ --wds-avatar-group-gap-default: 4px;
11
+ --wds-badge-border-radius-medium: 2px;
12
+ --wds-badge-border-radius-small: 2px;
13
+ --wds-badge-border-radius-tiny: 2px;
14
+ --wds-badge-padding-horizontal-medium: 12px;
15
+ --wds-badge-padding-horizontal-small: 8px;
16
+ --wds-badge-padding-horizontal-tiny: 4px;
17
+ --wds-badge-padding-vertical-medium: 4px;
18
+ --wds-badge-padding-vertical-small: 2px;
19
+ --wds-badge-padding-vertical-tiny: 0;
20
+ --wds-badge-size-medium: 24px;
21
+ --wds-badge-size-small: 20px;
22
+ --wds-badge-size-tiny: 16px;
23
+ --wds-breadcrumbs-border-radius: 1000px;
24
+ --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
25
+ --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
26
+ --wds-breadcrumbs-on-white-fill-hover: #ebf2ff;
27
+ --wds-breadcrumbs-padding-horizontal: 10px;
28
+ --wds-breadcrumbs-padding-vertical: 4px;
29
+ --wds-button-border-radius-large: 4px;
30
+ --wds-button-border-radius-medium: 4px;
31
+ --wds-button-border-radius-small: 4px;
32
+ --wds-button-border-radius-tiny: 4px;
33
+ --wds-button-font-line-height-large: 24px;
34
+ --wds-button-font-line-height-medium: 20px;
35
+ --wds-button-font-line-height-small: 16px;
36
+ --wds-button-font-line-height-tiny: 16px;
37
+ --wds-button-font-size-large: 16px;
38
+ --wds-button-font-size-medium: 14px;
39
+ --wds-button-font-size-small: 12px;
40
+ --wds-button-font-size-tiny: 12px;
41
+ --wds-button-gap-large: 4px;
42
+ --wds-button-gap-medium: 4px;
43
+ --wds-button-gap-small: 4px;
44
+ --wds-button-gap-tiny: 4px;
45
+ --wds-button-icon-offset-large: 18px;
46
+ --wds-button-icon-offset-medium: 18px;
47
+ --wds-button-icon-offset-small: 12px;
48
+ --wds-button-icon-offset-tiny: 12px;
49
+ --wds-button-padding-horizontal-large: 16px;
50
+ --wds-button-padding-horizontal-medium: 16px;
51
+ --wds-button-padding-horizontal-small: 12px;
52
+ --wds-button-padding-horizontal-tiny: 12px;
53
+ --wds-button-padding-vertical-large: 6px;
54
+ --wds-button-padding-vertical-medium: 4px;
55
+ --wds-button-padding-vertical-small: 4px;
56
+ --wds-button-padding-vertical-tiny: 2px;
57
+ --wds-button-size-large: 36px;
58
+ --wds-button-size-large-screen-small: 44px;
59
+ --wds-button-size-medium: 32px;
60
+ --wds-button-size-medium-screen-small: 40px;
61
+ --wds-button-size-small: 28px;
62
+ --wds-button-size-small-screen-small: 36px;
63
+ --wds-button-size-tiny: 24px;
64
+ --wds-button-size-tiny-screen-small: 32px;
65
+ --wds-button-size-x-tiny: 18px;
66
+ --wds-card-border: 4px;
67
+ --wds-card-content-paddings-horizontal: 24px;
68
+ --wds-card-content-paddings-vertical: 24px;
69
+ --wds-card-header-paddings-horizontal: 24px;
70
+ --wds-card-header-paddings-vertical: 16px;
71
+ --wds-card-tab-padding-horizontal-medium: 20px;
72
+ --wds-card-tab-padding-horizontal-small: 20px;
73
+ --wds-card-tab-padding-vertical-medium: 16px;
74
+ --wds-card-tab-padding-vertical-small: 16px;
75
+ --wds-checkbox-border: #868aa5;
76
+ --wds-checkbox-border-active: #116dff;
77
+ --wds-checkbox-border-active-disabled: rgba(19, 23, 32, 0);
78
+ --wds-checkbox-border-active-hover: rgba(19, 23, 32, 0);
79
+ --wds-checkbox-border-disabled: rgba(19, 23, 32, .1);
80
+ --wds-checkbox-border-hover: #868aa5;
81
+ --wds-checkbox-border-radius: 4px;
82
+ --wds-checkbox-fill: #ffffff;
83
+ --wds-checkbox-fill-active: #116dff;
84
+ --wds-checkbox-fill-active-disabled: #bebebe;
85
+ --wds-checkbox-fill-active-hover: #0f62e6;
86
+ --wds-checkbox-fill-disabled: #e5e5e5;
87
+ --wds-checkbox-fill-hover: #f7f8f8;
88
+ --wds-checkbox-group-gap-vertical: 12px;
89
+ --wds-checkbox-icon: #ffffff;
90
+ --wds-checkbox-icon-disabled: rgba(255, 255, 255, .7);
91
+ --wds-circular-progress-bar-background-fill-error: #e5e5e5;
92
+ --wds-circular-progress-bar-background-fill-premium: #e5e5e5;
93
+ --wds-circular-progress-bar-background-fill-standard: #e5e5e5;
94
+ --wds-circular-progress-bar-background-fill-success: #e5e5e5;
95
+ --wds-circular-progress-bar-foreground-fill-error: #ee4437;
96
+ --wds-circular-progress-bar-foreground-fill-premium: #9a27d5;
97
+ --wds-circular-progress-bar-foreground-fill-standard: #116dff;
98
+ --wds-circular-progress-bar-foreground-fill-success: #25a55a;
99
+ --wds-circular-progress-bar-size-large: 96px;
100
+ --wds-circular-progress-bar-size-medium: 52px;
101
+ --wds-circular-progress-bar-size-small: 24px;
102
+ --wds-composer-sidebar-bottom-width: 88px;
103
+ --wds-composer-sidebar-end-max-width: 240px;
104
+ --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;
105
+ --wds-composer-sidebar-item-bottom-padding-horizontal-medium: 4px;
106
+ --wds-composer-sidebar-item-bottom-padding-horizontal-small: 4px;
107
+ --wds-composer-sidebar-item-bottom-padding-vertical-large: 12px;
108
+ --wds-composer-sidebar-item-bottom-padding-vertical-medium: 12px;
109
+ --wds-composer-sidebar-item-bottom-padding-vertical-small: 8px;
110
+ --wds-composer-sidebar-item-end-padding-horizontal-large: 12px;
111
+ --wds-composer-sidebar-item-end-padding-horizontal-medium: 12px;
112
+ --wds-composer-sidebar-item-end-padding-horizontal-small: 12px;
113
+ --wds-composer-sidebar-item-end-padding-vertical-large: 8px;
114
+ --wds-composer-sidebar-item-end-padding-vertical-medium: 8px;
115
+ --wds-composer-sidebar-item-end-padding-vertical-small: 4px;
116
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-large: 8px;
117
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: 8px;
118
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-small: 8px;
119
+ --wds-composer-sidebar-item-tooltip-padding-vertical-large: 8px;
120
+ --wds-composer-sidebar-item-tooltip-padding-vertical-medium: 8px;
121
+ --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
122
+ --wds-counter-badge-border-radius-medium: 1000px;
123
+ --wds-counter-badge-border-radius-small: 1000px;
124
+ --wds-counter-badge-padding-horizontal-medium: 6px;
125
+ --wds-counter-badge-padding-horizontal-small: 4px;
126
+ --wds-counter-badge-size-medium: 24px;
127
+ --wds-counter-badge-size-small: 18px;
128
+ --wds-custom-modal-border-radius: 4px;
129
+ --wds-custom-modal-content-padding-horizon: 24px;
130
+ --wds-custom-modal-content-padding-vertical: 24px;
131
+ --wds-custom-modal-footer-padding-horizon: 24px;
132
+ --wds-custom-modal-footer-padding-vertical: 16px;
133
+ --wds-custom-modal-footnote-padding-horizon: 24px;
134
+ --wds-custom-modal-footnote-padding-vertical: 12px;
135
+ --wds-custom-modal-header-padding-left: 24px;
136
+ --wds-custom-modal-header-padding-right: 8px;
137
+ --wds-custom-modal-header-padding-vertical: 16px;
138
+ --wds-dock-background-fill: #ebf2ff;
139
+ --wds-dock-background-fill-active: #dce9ff;
140
+ --wds-dock-background-fill-disabled: #e5e5e5;
141
+ --wds-dock-background-fill-hover: #ebf2ff;
142
+ --wds-dock-foreground-fill: #c3daff;
143
+ --wds-dock-foreground-fill-active: #116dff;
144
+ --wds-dock-foreground-fill-disabled: #bebebe;
145
+ --wds-dock-foreground-fill-hover: #dce9ff;
146
+ --wds-dropdown-layout-option-size-big: 40px;
147
+ --wds-dropdown-layout-option-size-small: 32px;
148
+ --wds-empty-state-border-radius: 4px;
149
+ --wds-empty-state-page-content-paddings: 24px;
150
+ --wds-empty-state-section-content-paddings: 24px;
151
+ --wds-feature-list-gap: 24px;
152
+ --wds-field-set-gap-large: 16px;
153
+ --wds-field-set-gap-medium: 12px;
154
+ --wds-field-set-gap-small: 6px;
155
+ --wds-field-set-label-font-line-height-small: 16px;
156
+ --wds-field-set-label-font-line-height-tiny: 16px;
157
+ --wds-field-set-label-font-size-small: 12px;
158
+ --wds-field-set-label-font-size-tiny: 11px;
159
+ --wds-field-set-label-gap-small: 8px;
160
+ --wds-field-set-label-gap-tiny: 6px;
161
+ --wds-floating-helper-padding-horizontal: 32px;
162
+ --wds-floating-helper-padding-vertical: 28px;
163
+ --wds-form-field-label-font-line-height-small: 16px;
164
+ --wds-form-field-label-font-line-height-tiny: 16px;
165
+ --wds-form-field-label-font-size-small: 12px;
166
+ --wds-form-field-label-font-size-tiny: 11px;
167
+ --wds-form-field-label-gap-small: 8px;
168
+ --wds-form-field-label-gap-tiny: 6px;
169
+ --wds-gallery-item-border: 4px;
170
+ --wds-gallery-item-padding-left-medium: 18px;
171
+ --wds-gallery-item-padding-left-small: 12px;
172
+ --wds-gallery-item-padding-right-medium: 24px;
173
+ --wds-gallery-item-padding-right-small: 18px;
174
+ --wds-gallery-item-padding-vertical-medium: 18px;
175
+ --wds-gallery-item-padding-vertical-small: 12px;
176
+ --wds-image-border-radius-default: 4px;
177
+ --wds-image-border-radius-none: 0;
178
+ --wds-input-border-radius-default-large: 4px;
179
+ --wds-input-border-radius-default-medium: 4px;
180
+ --wds-input-border-radius-default-small: 4px;
181
+ --wds-input-border-radius-default-tiny: 4px;
182
+ --wds-input-border-radius-round-large: 1000px;
183
+ --wds-input-border-radius-round-medium: 1000px;
184
+ --wds-input-border-radius-round-small: 1000px;
185
+ --wds-input-border-radius-round-tiny: 1000px;
186
+ --wds-input-padding-horizontal-large: 8px;
187
+ --wds-input-padding-horizontal-medium: 8px;
188
+ --wds-input-padding-horizontal-small: 4px;
189
+ --wds-input-padding-horizontal-tiny: 4px;
190
+ --wds-input-padding-vertical-large: 6px;
191
+ --wds-input-padding-vertical-medium: 4px;
192
+ --wds-input-padding-vertical-small: 4px;
193
+ --wds-input-padding-vertical-tiny: 4px;
194
+ --wds-input-size-large: 36px;
195
+ --wds-input-size-medium: 32px;
196
+ --wds-input-size-small: 28px;
197
+ --wds-input-size-tiny: 24px;
198
+ --wds-input-value-font-line-height-large: 24px;
199
+ --wds-input-value-font-line-height-medium: 20px;
200
+ --wds-input-value-font-line-height-small: 16px;
201
+ --wds-input-value-font-line-height-tiny: 16px;
202
+ --wds-input-value-font-size-large: 16px;
203
+ --wds-input-value-font-size-medium: 14px;
204
+ --wds-input-value-font-size-small: 12px;
205
+ --wds-input-value-font-size-tiny: 12px;
206
+ --wds-input-width-fixed: 260px;
207
+ --wds-input-width-large: 96px;
208
+ --wds-input-width-medium: 72px;
209
+ --wds-input-width-small: 56px;
210
+ --wds-input-width-tiny: 48px;
211
+ --wds-input-area-border-radius-default-medium: 4px;
212
+ --wds-input-area-border-radius-default-small: 4px;
213
+ --wds-input-area-padding-left-medium: 12px;
214
+ --wds-input-area-padding-left-small: 8px;
215
+ --wds-input-area-padding-right-medium: 10px;
216
+ --wds-input-area-padding-right-small: 6px;
217
+ --wds-input-area-padding-vertical-medium: 6px;
218
+ --wds-input-area-padding-vertical-small: 6px;
219
+ --wds-linear-progress-bar-border-radius: 0;
220
+ --wds-list-item-gap-columns: 24px;
221
+ --wds-list-item-indentation-level-2: 12px;
222
+ --wds-list-item-indentation-level-3: 28px;
223
+ --wds-list-item-padding-horizontal-large: 24px;
224
+ --wds-list-item-padding-horizontal-medium: 20px;
225
+ --wds-list-item-padding-horizontal-small: 16px;
226
+ --wds-list-item-padding-horizontal-tiny: 12px;
227
+ --wds-list-item-padding-horizontal-x-tiny: 8px;
228
+ --wds-list-item-padding-horizontal-xx-tiny: 4px;
229
+ --wds-list-item-padding-vertical-large: 24px;
230
+ --wds-list-item-padding-vertical-medium: 20px;
231
+ --wds-list-item-padding-vertical-small: 16px;
232
+ --wds-list-item-padding-vertical-tiny: 12px;
233
+ --wds-list-item-padding-vertical-x-tiny: 8px;
234
+ --wds-list-item-padding-vertical-xx-tiny: 4px;
235
+ --wds-list-item-action-padding-horizontal-medium: 12px;
236
+ --wds-list-item-action-padding-horizontal-small: 12px;
237
+ --wds-list-item-action-padding-vertical-medium: 4px;
238
+ --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
239
+ --wds-list-item-action-padding-vertical-small: 4px;
240
+ --wds-list-item-action-padding-vertical-small-screen-small: 8px;
241
+ --wds-list-item-section-padding-horizontal: 16px;
242
+ --wds-list-item-select-active-fill: #dce9ff;
243
+ --wds-list-item-select-active-fill-active: #dce9ff;
244
+ --wds-list-item-select-active-fill-active-screen-small: #dce9ff;
245
+ --wds-list-item-select-active-fill-disabled: #e5e5e5;
246
+ --wds-list-item-select-active-fill-hover: #c3daff;
247
+ --wds-list-item-select-active-fill-screen-small: #dce9ff;
248
+ --wds-list-item-select-active-subtitle: #116dff;
249
+ --wds-list-item-select-active-subtitle-disabled: #bebebe;
250
+ --wds-list-item-select-active-subtitle-disabled-screen-small: #bebebe;
251
+ --wds-list-item-select-active-subtitle-screen-small: #116dff;
252
+ --wds-list-item-select-active-title: #116dff;
253
+ --wds-list-item-select-active-title-disabled: #bebebe;
254
+ --wds-list-item-select-active-title-disabled-screen-small: #bebebe;
255
+ --wds-list-item-select-active-title-screen-small: #116dff;
256
+ --wds-list-item-select-fill: #ffffff;
257
+ --wds-list-item-select-fill-active: #dce9ff;
258
+ --wds-list-item-select-fill-disabled: #ffffff;
259
+ --wds-list-item-select-fill-hover: #f7f8f8;
260
+ --wds-list-item-select-padding-horizontal-medium: 8px;
261
+ --wds-list-item-select-padding-horizontal-small: 8px;
262
+ --wds-list-item-select-padding-vertical-medium: 4px;
263
+ --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
264
+ --wds-list-item-select-padding-vertical-small: 4px;
265
+ --wds-list-item-select-padding-vertical-small-screen-small: 8px;
266
+ --wds-list-item-select-subtitle: #868aa5;
267
+ --wds-list-item-select-subtitle-disabled: #bebebe;
268
+ --wds-list-item-select-title: #131720;
269
+ --wds-list-item-select-title-disabled: #bebebe;
270
+ --wds-marketing-layout-border: 4px;
271
+ --wds-marketing-layout-padding-left-medium: 48px;
272
+ --wds-marketing-layout-padding-left-small: 24px;
273
+ --wds-marketing-layout-padding-left-tiny: 24px;
274
+ --wds-marketing-layout-padding-right-medium: 40px;
275
+ --wds-marketing-layout-padding-right-small: 28px;
276
+ --wds-marketing-layout-padding-right-tiny: 28px;
277
+ --wds-marketing-layout-padding-vertical-medium: 24px;
278
+ --wds-marketing-layout-padding-vertical-small: 24px;
279
+ --wds-marketing-layout-padding-vertical-tiny: 20px;
280
+ --wds-marketing-page-paddings-horizontal-large: 60px;
281
+ --wds-marketing-page-paddings-horizontal-medium: 48px;
282
+ --wds-marketing-page-paddings-vertical-large: 32px;
283
+ --wds-marketing-page-paddings-vertical-medium: 20px;
284
+ --wds-message-modal-content-padding-horizontal: 24px;
285
+ --wds-message-modal-content-padding-top: 20px;
286
+ --wds-mobile-modal-content-padding-horizontal: 24px;
287
+ --wds-mobile-modal-content-padding-vertical: 24px;
288
+ --wds-mobile-modal-footer-padding-horizontal: 24px;
289
+ --wds-mobile-modal-footer-padding-vertical: 24px;
290
+ --wds-notification-padding-horizontal: 8px;
291
+ --wds-notification-padding-vertical: 8px;
292
+ --wds-page-header-padding-horizontal: 48px;
293
+ --wds-page-header-padding-vertical: 24px;
294
+ --wds-page-header-padding-vertical-small: 18px;
295
+ --wds-pagination-fill: #ffffff;
296
+ --wds-pagination-fill-active: #116dff;
297
+ --wds-pagination-fill-hover: #0f62e6;
298
+ --wds-pagination-gap: 4px;
299
+ --wds-pagination-padding-horizontal: 2px;
300
+ --wds-pagination-padding-vertical: 2px;
301
+ --wds-palette-border: 4px;
302
+ --wds-popover-border: 4px;
303
+ --wds-radio-border: #868aa5;
304
+ --wds-radio-border-active: #116dff;
305
+ --wds-radio-border-active-disabled: rgba(19, 23, 32, 0);
306
+ --wds-radio-border-disabled: rgba(19, 23, 32, .1);
307
+ --wds-radio-border-hover: #868aa5;
308
+ --wds-radio-border-radius: 1000px;
309
+ --wds-radio-dot-fill-active: #ffffff;
310
+ --wds-radio-dot-fill-disabled: #ffffff;
311
+ --wds-radio-dot-size: 4px;
312
+ --wds-radio-fill: #ffffff;
313
+ --wds-radio-fill-active: #116dff;
314
+ --wds-radio-fill-active-disabled: #bebebe;
315
+ --wds-radio-fill-active-hover: #116dff;
316
+ --wds-radio-fill-disabled: #e5e5e5;
317
+ --wds-radio-fill-hover: #f7f8f8;
318
+ --wds-radio-label-font-line-height-medium: 20px;
319
+ --wds-radio-label-font-line-height-small: 16px;
320
+ --wds-radio-label-font-size-medium: 14px;
321
+ --wds-radio-label-font-size-small: 12px;
322
+ --wds-radio-group-gap-vertical-medium: 12px;
323
+ --wds-radio-group-gap-vertical-small: 6px;
324
+ --wds-radio-group-item-padding-default-horizontal: 0;
325
+ --wds-radio-group-item-padding-default-horizontal-screen-small: 0;
326
+ --wds-radio-group-item-padding-default-vertical: 0;
327
+ --wds-radio-group-item-padding-default-vertical-screen-small: 12px;
328
+ --wds-radio-group-item-padding-filled-horizontal: 16px;
329
+ --wds-radio-group-item-padding-filled-horizontal-screen-small: 16px;
330
+ --wds-radio-group-item-padding-filled-vertical: 12px;
331
+ --wds-radio-group-item-padding-filled-vertical-screen-small: 12px;
332
+ --wds-radio-group-item-padding-outlined-horizontal: 16px;
333
+ --wds-radio-group-item-padding-outlined-horizontal-screen-small: 16px;
334
+ --wds-radio-group-item-padding-outlined-vertical: 12px;
335
+ --wds-radio-group-item-padding-outlined-vertical-screen-small: 12px;
336
+ --wds-search-border-radius-large: 4px;
337
+ --wds-search-border-radius-medium: 4px;
338
+ --wds-search-border-radius-small: 4px;
339
+ --wds-search-border-radius-tiny: 4px;
340
+ --wds-section-header-padding-vertical: 8px;
341
+ --wds-section-helper-default-action-padding-medium: 8px;
342
+ --wds-section-helper-default-action-padding-small: 8px;
343
+ --wds-section-helper-default-border-radius: 4px;
344
+ --wds-section-helper-default-vertical-padding-medium: 12px;
345
+ --wds-section-helper-default-vertical-padding-small: 8px;
346
+ --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
347
+ --wds-section-helper-fullwidth-horizontal-padding-small: 24px;
348
+ --wds-section-helper-fullwidth-vertical-padding-medium: 10px;
349
+ --wds-section-helper-fullwidth-vertical-padding-small: 6px;
350
+ --wds-segmented-toggle-border-radius-medium: 4px;
351
+ --wds-segmented-toggle-border-radius-small: 4px;
352
+ --wds-segmented-toggle-icononly-padding-horizontal-medium: 4px;
353
+ --wds-segmented-toggle-icononly-padding-horizontal-small: 4px;
354
+ --wds-segmented-toggle-icononly-padding-vertical-medium: 4px;
355
+ --wds-segmented-toggle-icononly-padding-vertical-small: 4px;
356
+ --wds-segmented-toggle-label-font-line-height-medium: 20px;
357
+ --wds-segmented-toggle-label-font-line-height-small: 16px;
358
+ --wds-segmented-toggle-label-font-size-medium: 14px;
359
+ --wds-segmented-toggle-label-font-size-small: 12px;
360
+ --wds-segmented-toggle-padding-horizontal-medium: 16px;
361
+ --wds-segmented-toggle-padding-horizontal-small: 12px;
362
+ --wds-segmented-toggle-padding-vertical-medium: 4px;
363
+ --wds-segmented-toggle-padding-vertical-small: 4px;
364
+ --wds-segmented-toggle-size-medium: 32px;
365
+ --wds-segmented-toggle-size-small: 28px;
366
+ --wds-select-area-border: 4px;
367
+ --wds-select-area-fill: #f7f8f8;
368
+ --wds-select-area-fill-active: #dce9ff;
369
+ --wds-select-area-fill-disabled: rgba(255, 255, 255, 0);
370
+ --wds-select-area-fill-hover: #edeef2;
371
+ --wds-select-area-padding-horizontal: 16px;
372
+ --wds-select-area-padding-vertical: 12px;
373
+ --wds-side-panel-content-padding-horizontal: 24px;
374
+ --wds-side-panel-content-padding-vertical: 24px;
375
+ --wds-side-panel-control-layout-divider-border-width: 0;
376
+ --wds-side-panel-field-padding-horizontal: 24px;
377
+ --wds-side-panel-field-padding-vertical: 16px;
378
+ --wds-side-panel-floating-border-radius: 4px;
379
+ --wds-side-panel-floating-header-padding-left: 24px;
380
+ --wds-side-panel-floating-header-padding-right: 8px;
381
+ --wds-side-panel-floating-header-padding-vertical: 12px;
382
+ --wds-side-panel-footer-padding-horizontal: 24px;
383
+ --wds-side-panel-footer-padding-vertical: 16px;
384
+ --wds-side-panel-footnote-padding-horizontal: 24px;
385
+ --wds-side-panel-footnote-padding-vertical: 12px;
386
+ --wds-side-panel-header-padding-left: 24px;
387
+ --wds-side-panel-header-padding-right: 8px;
388
+ --wds-side-panel-header-padding-vertical: 16px;
389
+ --wds-sidebar-divider-fill-dark-default: #42454C;
390
+ --wds-sidebar-divider-fill-light-default: #cfd1dc;
391
+ --wds-sidebar-divider-fill-neutral-default: #cfd1dc;
392
+ --wds-sidebar-header-margin-bottom: 12px;
393
+ --wds-sidebar-item-content-gap: 8px;
394
+ --wds-sidebar-item-level-1-fill-dark-active: #42454C;
395
+ --wds-sidebar-item-level-1-fill-dark-default: #131720;
396
+ --wds-sidebar-item-level-1-fill-dark-hover: #2B2E36;
397
+ --wds-sidebar-item-level-1-fill-light-active: #c3daff;
398
+ --wds-sidebar-item-level-1-fill-light-default: #ffffff;
399
+ --wds-sidebar-item-level-1-fill-light-hover: #dce9ff;
400
+ --wds-sidebar-item-level-1-fill-neutral-active: #c3daff;
401
+ --wds-sidebar-item-level-1-fill-neutral-default: #edeef2;
402
+ --wds-sidebar-item-level-1-fill-neutral-hover: #dce9ff;
403
+ --wds-sidebar-item-level-1-padding-bottom: 8px;
404
+ --wds-sidebar-item-level-1-padding-end: 18px;
405
+ --wds-sidebar-item-level-1-padding-start: 24px;
406
+ --wds-sidebar-item-level-1-padding-top: 8px;
407
+ --wds-sidebar-item-level-2-fill-dark-default: #1F222B;
408
+ --wds-sidebar-item-level-2-fill-light-default: #EAF7FF;
409
+ --wds-sidebar-item-level-2-fill-neutral-default: #edeef2;
410
+ --wds-sidebar-item-level-2-padding-bottom: 6px;
411
+ --wds-sidebar-item-level-2-padding-end: 18px;
412
+ --wds-sidebar-item-level-2-padding-start: 52px;
413
+ --wds-sidebar-item-level-2-padding-top: 6px;
414
+ --wds-sidebar-item-level-3-divider-padding-bottom: 8px;
415
+ --wds-sidebar-item-level-3-divider-padding-end: 12px;
416
+ --wds-sidebar-item-level-3-divider-padding-top: 8px;
417
+ --wds-sidebar-item-level-3-padding-bottom: 6px;
418
+ --wds-sidebar-item-level-3-padding-end: 18px;
419
+ --wds-sidebar-item-level-3-padding-start: 52px;
420
+ --wds-sidebar-item-level-3-padding-top: 6px;
421
+ --wds-sidebar-item-minimized-paddings-horizontal: 18px;
422
+ --wds-sidebar-item-minimized-paddings-vertical: 8px;
423
+ --wds-sidebar-item-prefix-padding-end: 12px;
424
+ --wds-sidebar-item-text-dark-active: #ffffff;
425
+ --wds-sidebar-item-text-dark-default: #cfd1dc;
426
+ --wds-sidebar-item-text-dark-disabled: #898B8F;
427
+ --wds-sidebar-item-text-light-active: #084ebd;
428
+ --wds-sidebar-item-text-light-default: #42454c;
429
+ --wds-sidebar-item-text-light-disabled: #bebebe;
430
+ --wds-sidebar-item-text-neutral-active: #084ebd;
431
+ --wds-sidebar-item-text-neutral-default: #42454c;
432
+ --wds-sidebar-item-text-neutral-disabled: #bebebe;
433
+ --wds-sidebar-minimize-action-fill-dark-default: #42454C;
434
+ --wds-sidebar-minimize-action-fill-light-default: #dce9ff;
435
+ --wds-sidebar-minimize-action-fill-neutral-default: #dce9ff;
436
+ --wds-sidebar-minimize-action-text-dark-default: #cfd1dc;
437
+ --wds-sidebar-minimize-action-text-light-default: #116dff;
438
+ --wds-sidebar-minimize-action-text-neutral-default: #116dff;
439
+ --wds-sidebar-minimize-tooltip-fill-dark-default: #333850;
440
+ --wds-sidebar-minimize-tooltip-fill-light-default: #ffffff;
441
+ --wds-sidebar-minimize-tooltip-fill-neutral-default: #ffffff;
442
+ --wds-sidebar-minimize-tooltip-text-dark-default: #ffffff;
443
+ --wds-sidebar-minimize-tooltip-text-light-default: #2b2e36;
444
+ --wds-sidebar-minimize-tooltip-text-neutral-default: #2b2e36;
445
+ --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
446
+ --wds-sidebar-scrollbar-fill-dark-default: #717379;
447
+ --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
448
+ --wds-skeleton-border-radius-circle: 1000px;
449
+ --wds-skeleton-border-radius-line: 4px;
450
+ --wds-skeleton-border-radius-rectangle: 4px;
451
+ --wds-slider-slider-knob-size: 12px;
452
+ --wds-slider-slider-knob-size-transparent: 16px;
453
+ --wds-slider-slider-mark-size: 8px;
454
+ --wds-slider-track-border-border-radius-transparent: 1000px;
455
+ --wds-slider-track-border-radius: 1000px;
456
+ --wds-slider-track-size: 2px;
457
+ --wds-slider-track-size-transparent: 2px;
458
+ --wds-social-post-preview-content-padding-horizontal: 12px;
459
+ --wds-social-post-preview-content-padding-vertical: 12px;
460
+ --wds-social-preview-content-padding-horizontal: 12px;
461
+ --wds-social-preview-content-padding-vertical: 8px;
462
+ --wds-stepper-prefix-size-circle: 20px;
463
+ --wds-stepper-prefix-size-number: 16px;
464
+ --wds-swatches-list-gap: 12px;
465
+ --wds-swatches-list-padding-horizontal: 16px;
466
+ --wds-swatches-list-padding-vertical: 12px;
467
+ --wds-swatches-swatch-active-border-radius-medium: 7px;
468
+ --wds-swatches-swatch-active-border-radius-small: 5px;
469
+ --wds-swatches-swatch-border-radius-medium: 4px;
470
+ --wds-swatches-swatch-border-radius-small: 2px;
471
+ --wds-swatches-swatch-size-large: 28px;
472
+ --wds-swatches-swatch-size-medium: 24px;
473
+ --wds-swatches-swatch-size-small: 18px;
474
+ --wds-tabs-gap-medium: 8px;
475
+ --wds-tabs-gap-small: 6px;
476
+ --wds-tabs-padding-horizontal-medium: 16px;
477
+ --wds-tabs-padding-horizontal-small: 12px;
478
+ --wds-tabs-padding-vertical-medium: 16px;
479
+ --wds-tabs-padding-vertical-small: 12px;
480
+ --wds-tag-border-radius-large: 4px;
481
+ --wds-tag-border-radius-medium: 4px;
482
+ --wds-tag-border-radius-small: 4px;
483
+ --wds-tag-border-radius-tiny: 4px;
484
+ --wds-tag-padding-horizontal-large: 16px;
485
+ --wds-tag-padding-horizontal-medium: 12px;
486
+ --wds-tag-padding-horizontal-small: 12px;
487
+ --wds-tag-padding-horizontal-tiny: 10px;
488
+ --wds-tag-padding-vertical-large: 2px;
489
+ --wds-tag-padding-vertical-medium: 4px;
490
+ --wds-tag-padding-vertical-small: 2px;
491
+ --wds-tag-padding-vertical-tiny: 0;
492
+ --wds-tag-size-large: 32px;
493
+ --wds-tag-size-medium: 28px;
494
+ --wds-tag-size-small: 24px;
495
+ --wds-tag-size-tiny: 20px;
496
+ --wds-testimonial-list-gap: 24px;
497
+ --wds-thumbnail-border-radius: 4px;
498
+ --wds-thumbnail-gap: 12px;
499
+ --wds-toggle-button-padding-left-large: 8px;
500
+ --wds-toggle-button-padding-left-large-round: 12px;
501
+ --wds-toggle-button-padding-left-medium: 6px;
502
+ --wds-toggle-button-padding-left-medium-round: 12px;
503
+ --wds-toggle-button-padding-left-small: 6px;
504
+ --wds-toggle-button-padding-left-small-round: 12px;
505
+ --wds-toggle-button-padding-left-tiny: 4px;
506
+ --wds-toggle-button-padding-left-tiny-round: 6px;
507
+ --wds-toggle-button-padding-right-large: 16px;
508
+ --wds-toggle-button-padding-right-large-round: 16px;
509
+ --wds-toggle-button-padding-right-medium: 12px;
510
+ --wds-toggle-button-padding-right-medium-round: 16px;
511
+ --wds-toggle-button-padding-right-small: 12px;
512
+ --wds-toggle-button-padding-right-small-round: 16px;
513
+ --wds-toggle-button-padding-right-tiny: 6px;
514
+ --wds-toggle-button-padding-right-tiny-round: 12px;
515
+ --wds-toggle-switch-border-error-disabled: rgba(19, 23, 32, 0);
516
+ --wds-toggle-switch-border-standard-disabled: rgba(19, 23, 32, 0);
517
+ --wds-toggle-switch-border-success-disabled: rgba(19, 23, 32, 0);
518
+ --wds-toggle-switch-border-urgent-disabled: rgba(19, 23, 32, 0);
519
+ --wds-toggle-switch-fill-error: #42454c;
520
+ --wds-toggle-switch-fill-error-active: #ee4437;
521
+ --wds-toggle-switch-fill-error-active-hover: #ca3a2f;
522
+ --wds-toggle-switch-fill-error-disabled: #e5e5e5;
523
+ --wds-toggle-switch-fill-error-hover: #131720;
524
+ --wds-toggle-switch-fill-standard: #42454c;
525
+ --wds-toggle-switch-fill-standard-active: #116dff;
526
+ --wds-toggle-switch-fill-standard-active-hover: #0f62e6;
527
+ --wds-toggle-switch-fill-standard-disabled: #e5e5e5;
528
+ --wds-toggle-switch-fill-standard-hover: #131720;
529
+ --wds-toggle-switch-fill-success: #42454c;
530
+ --wds-toggle-switch-fill-success-active: #25a55a;
531
+ --wds-toggle-switch-fill-success-active-hover: #1f8c4d;
532
+ --wds-toggle-switch-fill-success-disabled: #e5e5e5;
533
+ --wds-toggle-switch-fill-success-hover: #131720;
534
+ --wds-toggle-switch-fill-urgent: #42454c;
535
+ --wds-toggle-switch-fill-urgent-active: #f96132;
536
+ --wds-toggle-switch-fill-urgent-active-hover: #d4522b;
537
+ --wds-toggle-switch-fill-urgent-disabled: #e5e5e5;
538
+ --wds-toggle-switch-fill-urgent-hover: #131720;
539
+ --wds-toggle-switch-knob-size-large: 20px;
540
+ --wds-toggle-switch-knob-size-medium: 16px;
541
+ --wds-toggle-switch-knob-size-small: 12px;
542
+ --wds-toggle-switch-knob-text-height: 0;
543
+ --wds-toggle-switch-padding: 2px;
544
+ --wds-toggle-switch-shadow: unset;
545
+ --wds-toggle-switch-width-large: 40px;
546
+ --wds-toggle-switch-width-medium: 28px;
547
+ --wds-toggle-switch-width-small: 24px;
548
+ --wds-tooltip-border-radius-medium: 8px;
549
+ --wds-tooltip-border-radius-small: 8px;
550
+ --wds-tooltip-padding-horizontal-medium: 16px;
551
+ --wds-tooltip-padding-horizontal-small: 8px;
552
+ --wds-tooltip-padding-vertical-medium: 8px;
553
+ --wds-tooltip-padding-vertical-small: 4px;
554
+ --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
555
+ --wds-vertical-tabs-action-padding-horizontal-small: 24px;
556
+ --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
557
+ --wds-vertical-tabs-action-padding-vertical-medium: 12px;
558
+ --wds-vertical-tabs-action-padding-vertical-small: 12px;
559
+ --wds-vertical-tabs-action-padding-vertical-tiny: 4px;
560
+ --wds-vertical-tabs-item-active-title-text: #116dff;
561
+ --wds-vertical-tabs-item-active-title-text-disabled: #bebebe;
562
+ --wds-vertical-tabs-item-padding-horizontal-medium: 24px;
563
+ --wds-vertical-tabs-item-padding-horizontal-small: 24px;
564
+ --wds-vertical-tabs-item-padding-horizontal-tiny: 24px;
565
+ --wds-vertical-tabs-item-padding-vertical-medium: 8px;
566
+ --wds-vertical-tabs-item-padding-vertical-small: 8px;
567
+ --wds-vertical-tabs-item-padding-vertical-tiny: 4px;
568
+ --wds-vertical-tabs-item-pill-fill-premium: #ffffff;
569
+ --wds-vertical-tabs-item-pill-fill-premium-active: #e3c3f4;
570
+ --wds-vertical-tabs-item-pill-fill-premium-disabled: #ffffff;
571
+ --wds-vertical-tabs-item-pill-fill-premium-hover: #f7f8f8;
572
+ --wds-vertical-tabs-item-pill-fill-standard: #ffffff;
573
+ --wds-vertical-tabs-item-pill-fill-standard-active: #dce9ff;
574
+ --wds-vertical-tabs-item-pill-fill-standard-disabled: #ffffff;
575
+ --wds-vertical-tabs-item-pill-fill-standard-hover: #f7f8f8;
576
+ --wds-vertical-tabs-item-pill-padding-horizontal: 0;
577
+ --wds-vertical-tabs-item-pill-padding-vertical: 0;
578
+ --wds-vertical-tabs-item-round-active: #dce9ff;
579
+ --wds-vertical-tabs-item-round-disabled: #ffffff;
580
+ --wds-vertical-tabs-item-round-fill: #ffffff;
581
+ --wds-vertical-tabs-item-round-fill-hover: #f7f8f8;
582
+ --wds-vertical-tabs-item-round-fill-premium: #ffffff;
583
+ --wds-vertical-tabs-item-round-fill-premium-active: #e3c3f4;
584
+ --wds-vertical-tabs-item-round-fill-premium-disabled: #ffffff;
585
+ --wds-vertical-tabs-item-round-fill-premium-hover: #f7f8f8;
586
+ --wds-vertical-tabs-item-round-padding-bottom-medium: 8px;
587
+ --wds-vertical-tabs-item-round-padding-bottom-small: 8px;
588
+ --wds-vertical-tabs-item-round-padding-bottom-tiny: 4px;
589
+ --wds-vertical-tabs-item-round-padding-horizontal-medium: 24px;
590
+ --wds-vertical-tabs-item-round-padding-horizontal-small: 24px;
591
+ --wds-vertical-tabs-item-round-padding-horizontal-tiny: 24px;
592
+ --wds-vertical-tabs-item-round-padding-top-medium: 8px;
593
+ --wds-vertical-tabs-item-round-padding-top-small: 8px;
594
+ --wds-vertical-tabs-item-round-padding-top-tiny: 4px;
595
+ --wds-vertical-tabs-item-round-title-text-premium: #9a27d5;
596
+ --wds-vertical-tabs-item-round-title-text-premium-active: #9a27d5;
597
+ --wds-vertical-tabs-item-round-title-text-premium-disabled: #bebebe;
598
+ --wds-vertical-tabs-item-round-title-text-premium-hover: #9a27d5;
599
+ --wds-vertical-tabs-item-round-title-text-standard: #131720;
600
+ --wds-vertical-tabs-item-round-title-text-standard-active: #116dff;
601
+ --wds-vertical-tabs-item-round-title-text-standard-disabled: #bebebe;
602
+ --wds-vertical-tabs-item-round-title-text-standard-hover: #131720;
603
+ --wds-vertical-tabs-item-title-text: #131720;
604
+ --wds-vertical-tabs-item-title-text-disabled: #bebebe;
605
+ --wds-vertical-tabs-round-fill: #ffffff;
606
+ --wds-vertical-tabs-section-title-padding-bottom-medium: 12px;
607
+ --wds-vertical-tabs-section-title-padding-bottom-small: 12px;
608
+ --wds-vertical-tabs-section-title-padding-bottom-tiny: 4px;
609
+ --wds-vertical-tabs-section-title-padding-horizontal-medium: 24px;
610
+ --wds-vertical-tabs-section-title-padding-horizontal-small: 24px;
611
+ --wds-vertical-tabs-section-title-padding-horizontal-tiny: 24px;
612
+ --wds-vertical-tabs-section-title-padding-top-medium: 24px;
613
+ --wds-vertical-tabs-section-title-padding-top-small: 16px;
614
+ --wds-vertical-tabs-section-title-padding-top-tiny: 4px;
615
+ --wds-border-radius-0: 0;
616
+ --wds-border-radius-100: 2px;
617
+ --wds-border-radius-200: 4px;
618
+ --wds-border-radius-300: 6px;
619
+ --wds-border-radius-400: 8px;
620
+ --wds-border-radius-500: 10px;
621
+ --wds-border-radius-600: 12px;
622
+ --wds-border-radius-full: 1000px;
623
+ --wds-border-width-100: 1px;
624
+ --wds-border-width-200: 2px;
625
+ --wds-border-width-none: 0;
626
+ --wds-breakpoint-large: 1186px;
627
+ --wds-breakpoint-medium: 768px;
628
+ --wds-breakpoint-small: 490px;
629
+ --wds-breakpoint-x-large: 1572px;
630
+ --wds-color-black-100: #131720;
631
+ --wds-color-black-200: #2b2e36;
632
+ --wds-color-black-300: #42454c;
633
+ --wds-color-black-400: #868aa5;
634
+ --wds-color-black-500: #acafc4;
635
+ --wds-color-black-550: #cfd1dc;
636
+ --wds-color-black-600: #e2e3ea;
637
+ --wds-color-black-700: #edeef2;
638
+ --wds-color-black-750: #f7f8f8;
639
+ --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
640
+ --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
641
+ --wds-color-black-100-transparent-10: rgba(19, 23, 32, .1);
642
+ --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
643
+ --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
644
+ --wds-color-black-100-transparent-40: rgba(19, 23, 32, .4);
645
+ --wds-color-black-100-transparent-50: rgba(19, 23, 32, .5);
646
+ --wds-color-black-100-transparent-70: rgba(19, 23, 32, .7);
647
+ --wds-color-black-200-transparent-0: rgba(43, 46, 54, 0);
648
+ --wds-color-black-200-transparent-50: rgba(43, 46, 54, .5);
649
+ --wds-color-black-200-transparent-60: rgba(43, 46, 54, .6);
650
+ --wds-color-black-200-transparent-70: rgba(43, 46, 54, .7);
651
+ --wds-color-black-700-transparent: #edeef200;
652
+ --wds-color-blue-0: #084ebd;
653
+ --wds-color-blue-50: #0f62e6;
654
+ --wds-color-blue-100: #116dff;
655
+ --wds-color-blue-200: #418aff;
656
+ --wds-color-blue-250: #7cafff;
657
+ --wds-color-blue-300: #c3daff;
658
+ --wds-color-blue-400: #dce9ff;
659
+ --wds-color-blue-500: #ebf2ff;
660
+ --wds-color-blue-600: #f8faff;
661
+ --wds-color-green-0: #1f8c4d;
662
+ --wds-color-green-50: #229954;
663
+ --wds-color-green-100: #25a55a;
664
+ --wds-color-green-200: #51b77b;
665
+ --wds-color-green-300: #87cea5;
666
+ --wds-color-green-400: #c8e8d6;
667
+ --wds-color-green-500: #e1f4eb;
668
+ --wds-color-green-600: #e9f6ee;
669
+ --wds-color-iris-0: #4d3dd0;
670
+ --wds-color-iris-50: #5443e3;
671
+ --wds-color-iris-100: #5a48f5;
672
+ --wds-color-iris-200: #7b6df7;
673
+ --wds-color-iris-300: #a59bfa;
674
+ --wds-color-iris-400: #d6d1fc;
675
+ --wds-color-iris-500: #e7e4fe;
676
+ --wds-color-iris-600: #eeecfe;
677
+ --wds-color-orange-0: #d4522b;
678
+ --wds-color-orange-50: #e75a2f;
679
+ --wds-color-orange-100: #f96132;
680
+ --wds-color-orange-200: #fa815b;
681
+ --wds-color-orange-300: #fca88f;
682
+ --wds-color-orange-400: #fdd7cc;
683
+ --wds-color-orange-500: #fee8e1;
684
+ --wds-color-orange-600: #feefea;
685
+ --wds-color-purple-0: #7927a3;
686
+ --wds-color-purple-50: #8e1dd1;
687
+ --wds-color-purple-100: #9a27d5;
688
+ --wds-color-purple-200: #c161f0;
689
+ --wds-color-purple-300: #cf8cf1;
690
+ --wds-color-purple-400: #e3c3f4;
691
+ --wds-color-purple-500: #f1e0f9;
692
+ --wds-color-purple-600: #f8ebff;
693
+ --wds-color-purple-700: #faf0ff;
694
+ --wds-color-red-0: #ca3a2f;
695
+ --wds-color-red-50: #dc3f33;
696
+ --wds-color-red-100: #ee4437;
697
+ --wds-color-red-200: #f1695f;
698
+ --wds-color-red-300: #f69891;
699
+ --wds-color-red-400: #fbd0cd;
700
+ --wds-color-red-500: #fde3e1;
701
+ --wds-color-red-600: #fdeceb;
702
+ --wds-color-white: #ffffff;
703
+ --wds-color-white-transparent-0: rgba(255, 255, 255, 0);
704
+ --wds-color-white-transparent-1: rgba(255, 255, 255, .01);
705
+ --wds-color-white-transparent-5: rgba(255, 255, 255, .05);
706
+ --wds-color-white-transparent-6: rgba(255, 255, 255, .06);
707
+ --wds-color-white-transparent-10: rgba(255, 255, 255, .1);
708
+ --wds-color-white-transparent-12: rgba(255, 255, 255, .12);
709
+ --wds-color-white-transparent-20: rgba(255, 255, 255, .2);
710
+ --wds-color-white-transparent-30: rgba(255, 255, 255, .3);
711
+ --wds-color-white-transparent-50: rgba(255, 255, 255, .5);
712
+ --wds-color-white-transparent-70: rgba(255, 255, 255, .7);
713
+ --wds-color-white-transparent-80: rgba(255, 255, 255, .8);
714
+ --wds-color-yellow-0: #d49341;
715
+ --wds-color-yellow-50: #e7a047;
716
+ --wds-color-yellow-100: #f9ad4d;
717
+ --wds-color-yellow-200: #fabd71;
718
+ --wds-color-yellow-300: #fcd29d;
719
+ --wds-color-yellow-400: #fdead2;
720
+ --wds-color-yellow-500: #fef3e5;
721
+ --wds-color-yellow-600: #fef6ed;
722
+ --wds-color-border-dark-primary: #868aa5;
723
+ --wds-color-border-dark-primary-active: #2b2e36;
724
+ --wds-color-border-dark-primary-disabled: rgba(19, 23, 32, .1);
725
+ --wds-color-border-dark-primary-hover: #42454c;
726
+ --wds-color-border-dark-secondary: #e2e3ea;
727
+ --wds-color-border-dark-secondary-active: #e2e3ea;
728
+ --wds-color-border-dark-secondary-disabled: rgba(19, 23, 32, .1);
729
+ --wds-color-border-dark-secondary-hover: #e2e3ea;
730
+ --wds-color-border-destructive-primary: #f69891;
731
+ --wds-color-border-destructive-primary-active: #ee4437;
732
+ --wds-color-border-destructive-primary-disabled: rgba(19, 23, 32, .1);
733
+ --wds-color-border-destructive-primary-hover: #f1695f;
734
+ --wds-color-border-destructive-secondary: #e2e3ea;
735
+ --wds-color-border-destructive-secondary-active: #ee4437;
736
+ --wds-color-border-destructive-secondary-disabled: rgba(19, 23, 32, .1);
737
+ --wds-color-border-destructive-secondary-hover: #868aa5;
738
+ --wds-color-border-destructive-tertiary: #e2e3ea;
739
+ --wds-color-border-destructive-tertiary-active: #f69891;
740
+ --wds-color-border-destructive-tertiary-disabled: rgba(19, 23, 32, .1);
741
+ --wds-color-border-destructive-tertiary-hover: #fbd0cd;
742
+ --wds-color-border-light: rgba(255, 255, 255, .5);
743
+ --wds-color-border-light-active: #ffffff;
744
+ --wds-color-border-light-disabled: rgba(255, 255, 255, .3);
745
+ --wds-color-border-light-hover: rgba(255, 255, 255, .7);
746
+ --wds-color-border-premium-primary: #cf8cf1;
747
+ --wds-color-border-premium-primary-active: #9a27d5;
748
+ --wds-color-border-premium-primary-disabled: rgba(19, 23, 32, .1);
749
+ --wds-color-border-premium-primary-hover: #c161f0;
750
+ --wds-color-border-premium-secondary: #e2e3ea;
751
+ --wds-color-border-premium-secondary-active: #9a27d5;
752
+ --wds-color-border-premium-secondary-disabled: rgba(19, 23, 32, .1);
753
+ --wds-color-border-premium-secondary-hover: #868aa5;
754
+ --wds-color-border-premium-tertiary: #e2e3ea;
755
+ --wds-color-border-premium-tertiary-active: #cf8cf1;
756
+ --wds-color-border-premium-tertiary-disabled: rgba(19, 23, 32, .1);
757
+ --wds-color-border-premium-tertiary-hover: #e3c3f4;
758
+ --wds-color-border-standard-primary: #c3daff;
759
+ --wds-color-border-standard-primary-active: #116dff;
760
+ --wds-color-border-standard-primary-disabled: rgba(19, 23, 32, .1);
761
+ --wds-color-border-standard-primary-hover: #418aff;
762
+ --wds-color-border-standard-secondary: #e2e3ea;
763
+ --wds-color-border-standard-secondary-active: #116dff;
764
+ --wds-color-border-standard-secondary-disabled: rgba(19, 23, 32, .1);
765
+ --wds-color-border-standard-secondary-hover: #868aa5;
766
+ --wds-color-border-standard-secondary-readonly: #e2e3ea;
767
+ --wds-color-border-standard-tertiary: #e2e3ea;
768
+ --wds-color-border-standard-tertiary-active: #c3daff;
769
+ --wds-color-border-standard-tertiary-disabled: rgba(19, 23, 32, .1);
770
+ --wds-color-border-standard-tertiary-hover: #dce9ff;
771
+ --wds-color-border-success-primary: #87cea5;
772
+ --wds-color-border-success-primary-active: #25a55a;
773
+ --wds-color-border-success-primary-disabled: rgba(19, 23, 32, .1);
774
+ --wds-color-border-success-primary-hover: #51b77b;
775
+ --wds-color-border-success-secondary: #e2e3ea;
776
+ --wds-color-border-success-secondary-active: #25a55a;
777
+ --wds-color-border-success-secondary-disabled: rgba(19, 23, 32, .1);
778
+ --wds-color-border-success-secondary-hover: #868aa5;
779
+ --wds-color-border-success-tertiary: #e2e3ea;
780
+ --wds-color-border-success-tertiary-active: #87cea5;
781
+ --wds-color-border-success-tertiary-disabled: rgba(19, 23, 32, .1);
782
+ --wds-color-border-success-tertiary-hover: #c8e8d6;
783
+ --wds-color-border-transparent-primary: rgba(19, 23, 32, .2);
784
+ --wds-color-border-transparent-primary-active: rgba(19, 23, 32, .2);
785
+ --wds-color-border-transparent-primary-disabled: rgba(19, 23, 32, .1);
786
+ --wds-color-border-transparent-primary-hover: rgba(19, 23, 32, .4);
787
+ --wds-color-border-urgent-primary: #fca88f;
788
+ --wds-color-border-urgent-primary-active: #f96132;
789
+ --wds-color-border-urgent-primary-disabled: rgba(19, 23, 32, .1);
790
+ --wds-color-border-urgent-primary-hover: #fa815b;
791
+ --wds-color-border-urgent-secondary: #e2e3ea;
792
+ --wds-color-border-urgent-secondary-active: #f96132;
793
+ --wds-color-border-urgent-secondary-disabled: rgba(19, 23, 32, .1);
794
+ --wds-color-border-urgent-secondary-hover: #868aa5;
795
+ --wds-color-border-urgent-tertiary: #e2e3ea;
796
+ --wds-color-border-urgent-tertiary-active: #fca88f;
797
+ --wds-color-border-urgent-tertiary-disabled: rgba(19, 23, 32, .1);
798
+ --wds-color-border-urgent-tertiary-hover: #fdd7cc;
799
+ --wds-color-border-warning-primary: #fcd29d;
800
+ --wds-color-border-warning-primary-active: #f9ad4d;
801
+ --wds-color-border-warning-primary-disabled: rgba(19, 23, 32, .1);
802
+ --wds-color-border-warning-primary-hover: #fabd71;
803
+ --wds-color-border-warning-secondary: #e2e3ea;
804
+ --wds-color-border-warning-secondary-active: #f9ad4d;
805
+ --wds-color-border-warning-secondary-disabled: rgba(19, 23, 32, .1);
806
+ --wds-color-border-warning-secondary-hover: #868aa5;
807
+ --wds-color-border-warning-tertiary: #e2e3ea;
808
+ --wds-color-border-warning-tertiary-active: #fcd29d;
809
+ --wds-color-border-warning-tertiary-disabled: rgba(19, 23, 32, .1);
810
+ --wds-color-border-warning-tertiary-hover: #fdead2;
811
+ --wds-color-fill-accent-1: #1684EA;
812
+ --wds-color-fill-accent-2: #17B0E2;
813
+ --wds-color-fill-accent-3: #6959F0;
814
+ --wds-color-fill-accent-4: #1B838B;
815
+ --wds-color-fill-accent-5: #C42FCA;
816
+ --wds-color-fill-accent-6: #D49341;
817
+ --wds-color-fill-accent-7: #F36E1B;
818
+ --wds-color-fill-accent-8: #CC180B;
819
+ --wds-color-fill-accent-9: #59005F;
820
+ --wds-color-fill-accent-10: #1F8845;
821
+ --wds-color-fill-ai-primary: #5a48f5;
822
+ --wds-color-fill-ai-primary-active: #5a48f5;
823
+ --wds-color-fill-ai-primary-disabled: #bebebe;
824
+ --wds-color-fill-ai-primary-hover: #4d3dd0;
825
+ --wds-color-fill-ai-secondary: #d6d1fc;
826
+ --wds-color-fill-ai-secondary-active: #d6d1fc;
827
+ --wds-color-fill-ai-secondary-disabled: #e5e5e5;
828
+ --wds-color-fill-ai-secondary-hover: #a59bfa;
829
+ --wds-color-fill-ai-tertiary: #ffffff;
830
+ --wds-color-fill-ai-tertiary-active: #d6d1fc;
831
+ --wds-color-fill-ai-tertiary-disabled: #ffffff;
832
+ --wds-color-fill-ai-tertiary-hover: #f7f8f8;
833
+ --wds-color-fill-dark-primary: #42454c;
834
+ --wds-color-fill-dark-primary-active: #42454c;
835
+ --wds-color-fill-dark-primary-disabled: #bebebe;
836
+ --wds-color-fill-dark-primary-hover: #131720;
837
+ --wds-color-fill-dark-secondary: #f7f8f8;
838
+ --wds-color-fill-dark-secondary-active: #f7f8f8;
839
+ --wds-color-fill-dark-secondary-disabled: #e5e5e5;
840
+ --wds-color-fill-dark-secondary-hover: #e2e3ea;
841
+ --wds-color-fill-dark-tertiary: #ffffff;
842
+ --wds-color-fill-dark-tertiary-active: #e2e3ea;
843
+ --wds-color-fill-dark-tertiary-disabled: #ffffff;
844
+ --wds-color-fill-dark-tertiary-hover: #f7f8f8;
845
+ --wds-color-fill-destructive-primary: #ee4437;
846
+ --wds-color-fill-destructive-primary-active: #ee4437;
847
+ --wds-color-fill-destructive-primary-disabled: #bebebe;
848
+ --wds-color-fill-destructive-primary-hover: #ca3a2f;
849
+ --wds-color-fill-destructive-secondary: #fbd0cd;
850
+ --wds-color-fill-destructive-secondary-active: #fbd0cd;
851
+ --wds-color-fill-destructive-secondary-disabled: #e5e5e5;
852
+ --wds-color-fill-destructive-secondary-hover: #f69891;
853
+ --wds-color-fill-destructive-tertiary: #ffffff;
854
+ --wds-color-fill-destructive-tertiary-active: #fbd0cd;
855
+ --wds-color-fill-destructive-tertiary-disabled: #ffffff;
856
+ --wds-color-fill-destructive-tertiary-hover: #f7f8f8;
857
+ --wds-color-fill-premium-primary: #9a27d5;
858
+ --wds-color-fill-premium-primary-active: #9a27d5;
859
+ --wds-color-fill-premium-primary-disabled: #bebebe;
860
+ --wds-color-fill-premium-primary-hover: #7927a3;
861
+ --wds-color-fill-premium-secondary: #e3c3f4;
862
+ --wds-color-fill-premium-secondary-active: #e3c3f4;
863
+ --wds-color-fill-premium-secondary-disabled: #e5e5e5;
864
+ --wds-color-fill-premium-secondary-hover: #cf8cf1;
865
+ --wds-color-fill-premium-tertiary: #ffffff;
866
+ --wds-color-fill-premium-tertiary-active: #e3c3f4;
867
+ --wds-color-fill-premium-tertiary-disabled: #ffffff;
868
+ --wds-color-fill-premium-tertiary-hover: #f7f8f8;
869
+ --wds-color-fill-premium-light-primary: #ffffff;
870
+ --wds-color-fill-premium-light-primary-active: #e3c3f4;
871
+ --wds-color-fill-premium-light-primary-disabled: rgba(255, 255, 255, .3);
872
+ --wds-color-fill-premium-light-primary-hover: #f1e0f9;
873
+ --wds-color-fill-premium-light-secondary: rgba(255, 255, 255, 0);
874
+ --wds-color-fill-premium-light-secondary-active: #e3c3f4;
875
+ --wds-color-fill-premium-light-secondary-disabled: rgba(255, 255, 255, 0);
876
+ --wds-color-fill-premium-light-secondary-hover: #f1e0f9;
877
+ --wds-color-fill-social-facebook: #1877f2;
878
+ --wds-color-fill-social-facebook-active: #1877f2;
879
+ --wds-color-fill-social-facebook-disabled: #bebebe;
880
+ --wds-color-fill-social-facebook-hover: rgba(24, 119, 242, .8);
881
+ --wds-color-fill-social-instagram: #ff0175;
882
+ --wds-color-fill-social-instagram-active: #ff0175;
883
+ --wds-color-fill-social-instagram-disabled: #bebebe;
884
+ --wds-color-fill-social-instagram-hover: rgba(255, 1, 117, .8);
885
+ --wds-color-fill-social-linkedin: #0065c8;
886
+ --wds-color-fill-social-linkedin-active: #0065c8;
887
+ --wds-color-fill-social-linkedin-disabled: #bebebe;
888
+ --wds-color-fill-social-linkedin-hover: rgba(0, 101, 200, .8);
889
+ --wds-color-fill-social-pinterest: #e60019;
890
+ --wds-color-fill-social-pinterest-active: #e60019;
891
+ --wds-color-fill-social-pinterest-disabled: #bebebe;
892
+ --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, .8);
893
+ --wds-color-fill-social-twitter: #1da1f2;
894
+ --wds-color-fill-social-twitter-active: #1da1f2;
895
+ --wds-color-fill-social-twitter-disabled: #bebebe;
896
+ --wds-color-fill-social-twitter-hover: rgba(29, 161, 242, .8);
897
+ --wds-color-fill-social-xcorp: #101419;
898
+ --wds-color-fill-social-xcorp-active: #101419;
899
+ --wds-color-fill-social-xcorp-disabled: #bebebe;
900
+ --wds-color-fill-social-xcorp-hover: rgba(16, 20, 25, .8);
901
+ --wds-color-fill-social-youtube: #ff0000;
902
+ --wds-color-fill-social-youtube-active: #ff0000;
903
+ --wds-color-fill-social-youtube-disabled: #bebebe;
904
+ --wds-color-fill-social-youtube-hover: rgba(255, 0, 0, .8);
905
+ --wds-color-fill-standard-primary: #116dff;
906
+ --wds-color-fill-standard-primary-active: #116dff;
907
+ --wds-color-fill-standard-primary-disabled: #bebebe;
908
+ --wds-color-fill-standard-primary-hover: #0f62e6;
909
+ --wds-color-fill-standard-secondary: #dce9ff;
910
+ --wds-color-fill-standard-secondary-active: #dce9ff;
911
+ --wds-color-fill-standard-secondary-disabled: #e5e5e5;
912
+ --wds-color-fill-standard-secondary-hover: #c3daff;
913
+ --wds-color-fill-standard-tertiary: #ffffff;
914
+ --wds-color-fill-standard-tertiary-active: #dce9ff;
915
+ --wds-color-fill-standard-tertiary-disabled: #ffffff;
916
+ --wds-color-fill-standard-tertiary-hover: #f7f8f8;
917
+ --wds-color-fill-standard-tertiary-readonly: #edeef2;
918
+ --wds-color-fill-standard-light-primary: #ffffff;
919
+ --wds-color-fill-standard-light-primary-active: #dce9ff;
920
+ --wds-color-fill-standard-light-primary-disabled: rgba(255, 255, 255, .3);
921
+ --wds-color-fill-standard-light-primary-hover: #ebf2ff;
922
+ --wds-color-fill-standard-light-secondary: rgba(255, 255, 255, 0);
923
+ --wds-color-fill-standard-light-secondary-active: #dce9ff;
924
+ --wds-color-fill-standard-light-secondary-disabled: rgba(255, 255, 255, 0);
925
+ --wds-color-fill-standard-light-secondary-hover: #ebf2ff;
926
+ --wds-color-fill-success-primary: #25a55a;
927
+ --wds-color-fill-success-primary-active: #25a55a;
928
+ --wds-color-fill-success-primary-disabled: #bebebe;
929
+ --wds-color-fill-success-primary-hover: #1f8c4d;
930
+ --wds-color-fill-success-secondary: #c8e8d6;
931
+ --wds-color-fill-success-secondary-active: #c8e8d6;
932
+ --wds-color-fill-success-secondary-disabled: #e5e5e5;
933
+ --wds-color-fill-success-secondary-hover: #87cea5;
934
+ --wds-color-fill-success-tertiary: #ffffff;
935
+ --wds-color-fill-success-tertiary-active: #c8e8d6;
936
+ --wds-color-fill-success-tertiary-disabled: #ffffff;
937
+ --wds-color-fill-success-tertiary-hover: #f7f8f8;
938
+ --wds-color-fill-surface-dark: #131720;
939
+ --wds-color-fill-surface-default: #ffffff;
940
+ --wds-color-fill-surface-destructive: #fde3e1;
941
+ --wds-color-fill-surface-modal: #ffffff;
942
+ --wds-color-fill-surface-modal-backdrop: rgba(19, 23, 32, .7);
943
+ --wds-color-fill-surface-neutral: #edeef2;
944
+ --wds-color-fill-surface-overlay: #ffffff;
945
+ --wds-color-fill-surface-overlay-dark: #42454c;
946
+ --wds-color-fill-surface-premium: #f1e0f9;
947
+ --wds-color-fill-surface-raised: #ffffff;
948
+ --wds-color-fill-surface-standard: #dce9ff;
949
+ --wds-color-fill-surface-success: #e1f4eb;
950
+ --wds-color-fill-surface-sunken: #f7f8f8;
951
+ --wds-color-fill-surface-warning: #fef3e5;
952
+ --wds-color-fill-transparent-primary: rgba(43, 46, 54, .5);
953
+ --wds-color-fill-transparent-primary-active: rgba(43, 46, 54, .7);
954
+ --wds-color-fill-transparent-primary-disabled: rgba(19, 23, 32, .2);
955
+ --wds-color-fill-transparent-primary-hover: rgba(43, 46, 54, .6);
956
+ --wds-color-fill-transparent-secondary: rgba(43, 46, 54, 0);
957
+ --wds-color-fill-transparent-secondary-active: rgba(43, 46, 54, .7);
958
+ --wds-color-fill-transparent-secondary-disabled: rgba(43, 46, 54, 0);
959
+ --wds-color-fill-transparent-secondary-hover: rgba(43, 46, 54, .6);
960
+ --wds-color-fill-urgent-primary: #f96132;
961
+ --wds-color-fill-urgent-primary-active: #f96132;
962
+ --wds-color-fill-urgent-primary-disabled: #bebebe;
963
+ --wds-color-fill-urgent-primary-hover: #d4522b;
964
+ --wds-color-fill-urgent-secondary: #fca88f;
965
+ --wds-color-fill-urgent-secondary-active: #fdd7cc;
966
+ --wds-color-fill-urgent-secondary-disabled: #e5e5e5;
967
+ --wds-color-fill-urgent-secondary-hover: #fdd7cc;
968
+ --wds-color-fill-urgent-tertiary: #ffffff;
969
+ --wds-color-fill-urgent-tertiary-active: #fdd7cc;
970
+ --wds-color-fill-urgent-tertiary-disabled: #ffffff;
971
+ --wds-color-fill-urgent-tertiary-hover: #f7f8f8;
972
+ --wds-color-fill-warning-primary: #f9ad4d;
973
+ --wds-color-fill-warning-primary-active: #f9ad4d;
974
+ --wds-color-fill-warning-primary-disabled: #bebebe;
975
+ --wds-color-fill-warning-primary-hover: #d49341;
976
+ --wds-color-fill-warning-secondary: #fdead2;
977
+ --wds-color-fill-warning-secondary-active: #fdead2;
978
+ --wds-color-fill-warning-secondary-disabled: #e5e5e5;
979
+ --wds-color-fill-warning-secondary-hover: #fcd29d;
980
+ --wds-color-text-destructive: #ee4437;
981
+ --wds-color-text-disabled: #bebebe;
982
+ --wds-color-text-disabled-light: rgba(255, 255, 255, .7);
983
+ --wds-color-text-placeholder: #868aa5;
984
+ --wds-color-text-placeholder-light: #868aa5;
985
+ --wds-color-text-premium: #9a27d5;
986
+ --wds-color-text-primary: #116dff;
987
+ --wds-color-text-standard-primary: #131720;
988
+ --wds-color-text-standard-primary-light: #ffffff;
989
+ --wds-color-text-standard-secondary: #42454c;
990
+ --wds-color-text-standard-secondary-light: #e2e3ea;
991
+ --wds-color-text-success: #25a55a;
992
+ --wds-color-text-urgent: #f96132;
993
+ --wds-color-text-warning: #f9ad4d;
994
+ --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
995
+ --wds-font-letter-spacing-0: 0;
996
+ --wds-font-letter-spacing-100: 1px;
997
+ --wds-font-letter-spacing-heading-1: 0;
998
+ --wds-font-letter-spacing-heading-2: 0;
999
+ --wds-font-letter-spacing-heading-3: 0;
1000
+ --wds-font-letter-spacing-heading-4: 0;
1001
+ --wds-font-letter-spacing-heading-5: 1px;
1002
+ --wds-font-letter-spacing-heading-6: 1px;
1003
+ --wds-font-line-height-100: 16px;
1004
+ --wds-font-line-height-200: 20px;
1005
+ --wds-font-line-height-300: 24px;
1006
+ --wds-font-line-height-400: 28px;
1007
+ --wds-font-line-height-500: 32px;
1008
+ --wds-font-line-height-body-extra-tiny: 16px;
1009
+ --wds-font-line-height-body-medium: 24px;
1010
+ --wds-font-line-height-body-small: 20px;
1011
+ --wds-font-line-height-body-tiny: 16px;
1012
+ --wds-font-line-height-heading-1: 32px;
1013
+ --wds-font-line-height-heading-2: 28px;
1014
+ --wds-font-line-height-heading-3: 28px;
1015
+ --wds-font-line-height-heading-4: 24px;
1016
+ --wds-font-line-height-heading-5: 16px;
1017
+ --wds-font-line-height-heading-6: 16px;
1018
+ --wds-font-size-100: 11px;
1019
+ --wds-font-size-200: 12px;
1020
+ --wds-font-size-300: 14px;
1021
+ --wds-font-size-400: 15px;
1022
+ --wds-font-size-500: 16px;
1023
+ --wds-font-size-600: 18px;
1024
+ --wds-font-size-700: 20px;
1025
+ --wds-font-size-800: 22px;
1026
+ --wds-font-size-900: 24px;
1027
+ --wds-font-size-body-extra-tiny: 11px;
1028
+ --wds-font-size-body-medium: 16px;
1029
+ --wds-font-size-body-small: 14px;
1030
+ --wds-font-size-body-tiny: 12px;
1031
+ --wds-font-size-heading-1: 24px;
1032
+ --wds-font-size-heading-2: 22px;
1033
+ --wds-font-size-heading-3: 20px;
1034
+ --wds-font-size-heading-4: 18px;
1035
+ --wds-font-size-heading-5: 11px;
1036
+ --wds-font-size-heading-6: 12px;
1037
+ --wds-font-weight-bold: 700;
1038
+ --wds-font-weight-medium: 500;
1039
+ --wds-font-weight-regular: 400;
1040
+ --wds-font-weight-heading-1: 700;
1041
+ --wds-font-weight-heading-2: 700;
1042
+ --wds-font-weight-heading-3: 700;
1043
+ --wds-font-weight-heading-4: 700;
1044
+ --wds-font-weight-heading-5: 700;
1045
+ --wds-font-weight-heading-6: 400;
1046
+ --wds-shadow-100: 0 2px 7px rgba(19, 23, 32, .2);
1047
+ --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
1048
+ --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
1049
+ --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
1050
+ --wds-shadow-inner-100: 1px 1px 2px rgba(19, 23, 32, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
1051
+ --wds-shadow-inner-200: 1px 1px 4px rgba(19, 23, 32, .2) inset;
1052
+ --wds-shadow-inner-300: 0 0 18px rgba(19, 23, 32, .1) inset, 0 0 6px rgba(19, 23, 32, .05) inset;
1053
+ --wds-shadow-inner-400: 0 0 24px rgba(19, 23, 32, .2) inset, 0 0 6px rgba(19, 23, 32, .05) inset;
1054
+ --wds-shadow-inner-300-bottom: 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
1055
+ --wds-shadow-inner-300-horizontal: 22px 0 18px -18px rgba(19, 23, 32, .1) inset, 8px 0 6px -6px rgba(19, 23, 32, .05) inset, -22px 0 18px -18px rgba(19, 23, 32, .1) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
1056
+ --wds-shadow-inner-300-left: 22px 0 18px -18px rgba(19, 23, 32, .1) inset, 8px 0 6px -6px rgba(19, 23, 32, .05) inset;
1057
+ --wds-shadow-inner-300-right: -22px 0 18px -18px rgba(19, 23, 32, .1) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
1058
+ --wds-shadow-inner-300-top: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
1059
+ --wds-shadow-inner-300-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
1060
+ --wds-shadow-inner-400-bottom: 0 -32px 24px -24px rgba(19, 23, 32, .2) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
1061
+ --wds-shadow-inner-400-horizontal: 22px 0 18px -18px rgba(19, 23, 32, .1) inset, 8px 0 6px -6px rgba(19, 23, 32, .05) inset, -22px 0 18px -18px rgba(19, 23, 32, .1) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
1062
+ --wds-shadow-inner-400-left: 32px 0 24px -24px rgba(19, 23, 32, .2) inset, 8px 0 6px -6px rgba(19, 23, 32, .05) inset;
1063
+ --wds-shadow-inner-400-right: -32px 0 24px -24px rgba(19, 23, 32, .2) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
1064
+ --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(19, 23, 32, .2) inset, 0 8px 6px -6px rgba(19, 23, 32, .05) inset;
1065
+ --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
1066
+ --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
1067
+ --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
1068
+ --wds-shadow-focus-inner-standard: 0 0 0 3px #c3daff inset;
1069
+ --wds-shadow-focus-inner-warning: 0 0 0 3px #fdead2 inset;
1070
+ --wds-shadow-focus-standard: 0 0 0 3px #c3daff;
1071
+ --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
1072
+ --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
1073
+ --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
1074
+ --wds-shadow-surface-overlay-dark: 0 12px 20px rgba(19, 23, 32, .1);
1075
+ --wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
1076
+ --wds-space-0: 0;
1077
+ --wds-space-25: 1px;
1078
+ --wds-space-50: 2px;
1079
+ --wds-space-100: 4px;
1080
+ --wds-space-150: 6px;
1081
+ --wds-space-200: 8px;
1082
+ --wds-space-250: 10px;
1083
+ --wds-space-300: 12px;
1084
+ --wds-space-400: 16px;
1085
+ --wds-space-475: 18px;
1086
+ --wds-space-500: 20px;
1087
+ --wds-space-600: 24px;
1088
+ --wds-space-700: 28px;
1089
+ --wds-space-800: 32px;
1090
+ --wds-space-900: 36px;
1091
+ --wds-space-1000: 40px;
1092
+ --wds-space-1100: 44px;
1093
+ --wds-space-1200: 48px;
1094
+ --wds-space-1300: 52px;
1095
+ --wds-space-1400: 56px;
1096
+ --wds-space-1500: 60px;
1097
+ --wds-space-1600: 64px;
1098
+ --wds-space-1700: 68px;
1099
+ --wds-space-2400: 96px;
1100
+ --wds-space-padding-horizontal-large: 24px;
1101
+ --wds-space-padding-horizontal-medium: 20px;
1102
+ --wds-space-padding-horizontal-small: 16px;
1103
+ --wds-space-padding-horizontal-tiny: 12px;
1104
+ --wds-space-padding-horizontal-x-tiny: 8px;
1105
+ --wds-space-padding-horizontal-xx-tiny: 4px;
1106
+ --wds-space-padding-vertical-large: 24px;
1107
+ --wds-space-padding-vertical-medium: 20px;
1108
+ --wds-space-padding-vertical-small: 16px;
1109
+ --wds-space-padding-vertical-tiny: 12px;
1110
+ --wds-space-padding-vertical-x-tiny: 8px;
1111
+ --wds-space-padding-vertical-xx-tiny: 4px;
1112
+ --wds-border-radius-surface-modal: 4px;
1113
+ --wds-border-radius-surface-overlay: 4px;
1114
+ }