@wix/design-system-tokens 1.82.0 → 1.83.0

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 (18) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +11 -2
  3. package/all.css +287 -1
  4. package/all.st.css +572 -0
  5. package/component.st.css +374 -0
  6. package/foundation.st.css +40 -0
  7. package/package.json +2 -2
  8. package/semantic.st.css +158 -0
  9. package/studio/all.css +285 -3
  10. package/studio/all.st.css +568 -4
  11. package/studio/component.st.css +370 -4
  12. package/studio/foundation.st.css +40 -0
  13. package/studio/semantic.st.css +158 -0
  14. package/wixel/all.css +1489 -0
  15. package/wixel/all.st.css +2977 -0
  16. package/wixel/component.st.css +1757 -0
  17. package/wixel/foundation.st.css +383 -0
  18. package/wixel/semantic.st.css +843 -0
package/studio/all.css CHANGED
@@ -1,4 +1,16 @@
1
1
  :root {
2
+ --wds-accordion-background-fill-light: #ffffff;
3
+ --wds-accordion-background-fill-light-hover: #f7f8f8;
4
+ --wds-accordion-caret-fill: #42454c;
5
+ --wds-accordion-caret-fill-hover: #42454c;
6
+ --wds-accordion-title-fill: #131720;
7
+ --wds-accordion-title-fill-hover: #131720;
8
+ --wds-accordion-title-font-line-height-medium: 20px;
9
+ --wds-accordion-title-font-line-height-small: 16px;
10
+ --wds-accordion-title-font-size-medium: 14px;
11
+ --wds-accordion-title-font-size-small: 12px;
12
+ --wds-accordion-title-font-weight: 700;
13
+ --wds-accordion-title-font-weight-small: 700;
2
14
  --wds-add-item-border-radius: 4px;
3
15
  --wds-add-item-padding-horizontal-large: 28px;
4
16
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -6,6 +18,12 @@
6
18
  --wds-add-item-padding-vertical-medium: 24px;
7
19
  --wds-add-item-padding-vertical-small: 16px;
8
20
  --wds-add-item-padding-vertical-tiny: 12px;
21
+ --wds-add-item-title-font-line-height-medium: 20px;
22
+ --wds-add-item-title-font-line-height-tiny: 16px;
23
+ --wds-add-item-title-font-size-medium: 14px;
24
+ --wds-add-item-title-font-size-small: 12px;
25
+ --wds-announcement-modal-text-font-line-height: 20px;
26
+ --wds-announcement-modal-text-font-size: 14px;
9
27
  --wds-avatar-group-gap-condensed: -2px;
10
28
  --wds-avatar-group-gap-default: 4px;
11
29
  --wds-badge-border-radius-medium: 2px;
@@ -38,6 +56,8 @@
38
56
  --wds-button-border-radius-medium: 4px;
39
57
  --wds-button-border-radius-small: 4px;
40
58
  --wds-button-border-radius-tiny: 4px;
59
+ --wds-button-fill-gradient-hover-primary: #0f62e6;
60
+ --wds-button-fill-gradient-hover-secondary: #0f62e6;
41
61
  --wds-button-fill-standard-secondary: #ffffff;
42
62
  --wds-button-fill-standard-secondary-hover: #f7f8f8;
43
63
  --wds-button-font-line-height-large: 24px;
@@ -48,6 +68,7 @@
48
68
  --wds-button-font-size-medium: 14px;
49
69
  --wds-button-font-size-small: 12px;
50
70
  --wds-button-font-size-tiny: 12px;
71
+ --wds-button-font-weight-tiny: 700;
51
72
  --wds-button-gap-large: 4px;
52
73
  --wds-button-gap-medium: 4px;
53
74
  --wds-button-gap-small: 4px;
@@ -56,6 +77,7 @@
56
77
  --wds-button-icon-offset-medium: 18px;
57
78
  --wds-button-icon-offset-small: 12px;
58
79
  --wds-button-icon-offset-tiny: 12px;
80
+ --wds-button-label-font-size-large: 16px;
59
81
  --wds-button-outline-hover: #e2e3ea;
60
82
  --wds-button-padding-horizontal-large: 16px;
61
83
  --wds-button-padding-horizontal-medium: 16px;
@@ -74,6 +96,8 @@
74
96
  --wds-button-size-tiny: 24px;
75
97
  --wds-button-size-tiny-screen-small: 32px;
76
98
  --wds-button-size-x-tiny: 18px;
99
+ --wds-button-text-standard-primary: #131720;
100
+ --wds-button-text-standard-primary-hover: #131720;
77
101
  --wds-button-text-hover: #116dff;
78
102
  --wds-card-border: 4px;
79
103
  --wds-card-content-paddings-horizontal: 24px;
@@ -84,6 +108,18 @@
84
108
  --wds-card-tab-padding-horizontal-small: 20px;
85
109
  --wds-card-tab-padding-vertical-medium: 16px;
86
110
  --wds-card-tab-padding-vertical-small: 16px;
111
+ --wds-card-gallery-item-border-radius-0: 0;
112
+ --wds-card-gallery-item-border-radius-100: 8px;
113
+ --wds-card-gallery-item-content-margin-vertical: 0;
114
+ --wds-card-gallery-item-fill: #ffffff;
115
+ --wds-card-gallery-item-overlay-fill: rgba(43, 46, 54, .5);
116
+ --wds-card-gallery-item-padding-left-medium: 18px;
117
+ --wds-card-gallery-item-padding-left-small: 12px;
118
+ --wds-card-gallery-item-padding-right-medium: 24px;
119
+ --wds-card-gallery-item-padding-right-small: 18px;
120
+ --wds-card-gallery-item-padding-vertical-medium: 18px;
121
+ --wds-card-gallery-item-padding-vertical-small: 12px;
122
+ --wds-card-gallery-item-title-font-size-medium: 16px;
87
123
  --wds-checkbox-border: #868aa5;
88
124
  --wds-checkbox-border-active: #116dff;
89
125
  --wds-checkbox-border-active-disabled: rgba(19, 23, 32, 0);
@@ -100,6 +136,8 @@
100
136
  --wds-checkbox-group-gap-vertical: 12px;
101
137
  --wds-checkbox-icon: #ffffff;
102
138
  --wds-checkbox-icon-disabled: rgba(255, 255, 255, .7);
139
+ --wds-checkbox-label-font-line-height-small: 16px;
140
+ --wds-checkbox-label-font-size-small: 12px;
103
141
  --wds-circular-progress-bar-background-fill-error: #e5e5e5;
104
142
  --wds-circular-progress-bar-background-fill-premium: #e5e5e5;
105
143
  --wds-circular-progress-bar-background-fill-standard: #e5e5e5;
@@ -111,6 +149,7 @@
111
149
  --wds-circular-progress-bar-size-large: 96px;
112
150
  --wds-circular-progress-bar-size-medium: 52px;
113
151
  --wds-circular-progress-bar-size-small: 24px;
152
+ --wds-circular-progress-bar-size-tiny: 18px;
114
153
  --wds-close-button-standard-fill-active: #42454c;
115
154
  --wds-close-button-standard-fill-disabled: #e5e5e5;
116
155
  --wds-close-button-standard-fill-hover: #42454c;
@@ -155,11 +194,18 @@
155
194
  --wds-custom-modal-content-padding-vertical: 24px;
156
195
  --wds-custom-modal-footer-padding-horizon: 24px;
157
196
  --wds-custom-modal-footer-padding-vertical: 16px;
197
+ --wds-custom-modal-footnote-link-font-weight: 400;
158
198
  --wds-custom-modal-footnote-padding-horizon: 24px;
159
199
  --wds-custom-modal-footnote-padding-vertical: 12px;
200
+ --wds-custom-modal-footnote-text-font-line-height: 16px;
201
+ --wds-custom-modal-footnote-text-font-size: 12px;
160
202
  --wds-custom-modal-header-padding-left: 24px;
161
203
  --wds-custom-modal-header-padding-right: 8px;
162
204
  --wds-custom-modal-header-padding-vertical: 16px;
205
+ --wds-custom-modal-header-title-font-line-height: 20px;
206
+ --wds-custom-modal-header-title-font-size: 14px;
207
+ --wds-divider-fill-color-light-1: #e2e3ea;
208
+ --wds-divider-fill-color-light-2: #e2e3ea;
163
209
  --wds-dock-background-fill: #ebf2ff;
164
210
  --wds-dock-background-fill-active: #dce9ff;
165
211
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -168,9 +214,10 @@
168
214
  --wds-dock-foreground-fill-active: #116dff;
169
215
  --wds-dock-foreground-fill-disabled: #bebebe;
170
216
  --wds-dock-foreground-fill-hover: #dce9ff;
217
+ --wds-dropdown-icon-fill: #42454c;
218
+ --wds-dropdown-list-paddings: 0;
171
219
  --wds-dropdown-layout-option-size-big: 40px;
172
220
  --wds-dropdown-layout-option-size-small: 32px;
173
- --wds-dropdown-icon-fill: #42454c;
174
221
  --wds-empty-state-border-radius: 4px;
175
222
  --wds-empty-state-page-content-paddings: 24px;
176
223
  --wds-empty-state-section-content-paddings: 24px;
@@ -178,20 +225,27 @@
178
225
  --wds-field-set-gap-large: 16px;
179
226
  --wds-field-set-gap-medium: 12px;
180
227
  --wds-field-set-gap-small: 6px;
228
+ --wds-field-set-label-fill: #42454c;
181
229
  --wds-field-set-label-font-line-height-small: 16px;
182
230
  --wds-field-set-label-font-line-height-tiny: 16px;
183
231
  --wds-field-set-label-font-size-small: 12px;
184
232
  --wds-field-set-label-font-size-tiny: 11px;
233
+ --wds-field-set-label-font-weight: 400;
185
234
  --wds-field-set-label-gap-small: 8px;
186
235
  --wds-field-set-label-gap-tiny: 6px;
236
+ --wds-floating-helper-main-action-padding-top: 16px;
187
237
  --wds-floating-helper-padding-horizontal: 32px;
188
238
  --wds-floating-helper-padding-vertical: 28px;
239
+ --wds-form-field-label-fill: #42454c;
189
240
  --wds-form-field-label-font-line-height-small: 16px;
190
241
  --wds-form-field-label-font-line-height-tiny: 16px;
191
242
  --wds-form-field-label-font-size-small: 12px;
192
243
  --wds-form-field-label-font-size-tiny: 11px;
244
+ --wds-form-field-label-font-weight: 400;
193
245
  --wds-form-field-label-gap-small: 8px;
194
246
  --wds-form-field-label-gap-tiny: 6px;
247
+ --wds-form-field-label-line-height-small: 16px;
248
+ --wds-form-field-label-line-height-tiny: 16px;
195
249
  --wds-gallery-item-border: 4px;
196
250
  --wds-gallery-item-padding-left-medium: 18px;
197
251
  --wds-gallery-item-padding-left-small: 12px;
@@ -203,6 +257,8 @@
203
257
  --wds-image-border-radius-none: 0;
204
258
  --wds-info-icon-fill: #868aa5;
205
259
  --wds-info-icon-fill-hover: #116dff;
260
+ --wds-input-background-fill-default: #ffffff;
261
+ --wds-input-background-fill-hover: #f7f8f8;
206
262
  --wds-input-border-radius-default-large: 4px;
207
263
  --wds-input-border-radius-default-medium: 4px;
208
264
  --wds-input-border-radius-default-small: 4px;
@@ -248,6 +304,20 @@
248
304
  --wds-input-area-padding-right-small: 6px;
249
305
  --wds-input-area-padding-vertical-medium: 6px;
250
306
  --wds-input-area-padding-vertical-small: 6px;
307
+ --wds-internal-color-picker-padding-horizontal: 16px;
308
+ --wds-internal-color-picker-padding-vertical: 12px;
309
+ --wds-internal-color-picker-width: 236px;
310
+ --wds-internal-image-height-large: 120px;
311
+ --wds-internal-image-height-medium: 84px;
312
+ --wds-internal-image-height-small: 60px;
313
+ --wds-internal-image-width-large: 240px;
314
+ --wds-internal-image-width-medium: 156px;
315
+ --wds-internal-image-width-small: 122px;
316
+ --wds-internal-image-width-tiny: 106px;
317
+ --wds-internal-thumbnail-illustration-size-large: 114px;
318
+ --wds-internal-thumbnail-illustration-size-medium: 72px;
319
+ --wds-internal-thumbnail-illustration-size-small: 51px;
320
+ --wds-internal-thumbnail-illustration-size-tiny: 38px;
251
321
  --wds-linear-progress-bar-border-radius: 0;
252
322
  --wds-list-item-gap-columns: 24px;
253
323
  --wds-list-item-indentation-level-2: 12px;
@@ -264,12 +334,20 @@
264
334
  --wds-list-item-padding-vertical-tiny: 12px;
265
335
  --wds-list-item-padding-vertical-x-tiny: 8px;
266
336
  --wds-list-item-padding-vertical-xx-tiny: 4px;
337
+ --wds-list-item-action-border-radius: 0;
338
+ --wds-list-item-action-label-font-line-height-medium: 20px;
339
+ --wds-list-item-action-label-font-line-height-small: 16px;
340
+ --wds-list-item-action-label-font-size-medium: 14px;
341
+ --wds-list-item-action-label-font-size-small: 12px;
267
342
  --wds-list-item-action-padding-horizontal-medium: 12px;
268
343
  --wds-list-item-action-padding-horizontal-small: 12px;
269
344
  --wds-list-item-action-padding-vertical-medium: 4px;
270
345
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
271
346
  --wds-list-item-action-padding-vertical-small: 4px;
272
347
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
348
+ --wds-list-item-action-prefix-margin: 4px;
349
+ --wds-list-item-action-subtitle-font-line-height-medium: 16px;
350
+ --wds-list-item-action-subtitle-font-size-medium: 12px;
273
351
  --wds-list-item-section-font-size: 12px;
274
352
  --wds-list-item-section-line-height: 16px;
275
353
  --wds-list-item-section-padding-horizontal: 16px;
@@ -293,12 +371,19 @@
293
371
  --wds-list-item-select-fill-hover: #f7f8f8;
294
372
  --wds-list-item-select-padding-horizontal-medium: 8px;
295
373
  --wds-list-item-select-padding-horizontal-small: 8px;
374
+ --wds-list-item-select-padding-left-medium: 12px;
375
+ --wds-list-item-select-padding-left-small: 12px;
376
+ --wds-list-item-select-padding-right-medium: 16px;
377
+ --wds-list-item-select-padding-right-small: 16px;
296
378
  --wds-list-item-select-padding-vertical-medium: 4px;
297
379
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
298
380
  --wds-list-item-select-padding-vertical-small: 4px;
299
381
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
382
+ --wds-list-item-select-prefix-margin: 6px;
300
383
  --wds-list-item-select-subtitle: #868aa5;
301
384
  --wds-list-item-select-subtitle-disabled: #bebebe;
385
+ --wds-list-item-select-subtitle-font-line-height-medium: 16px;
386
+ --wds-list-item-select-subtitle-font-size-medium: 12px;
302
387
  --wds-list-item-select-title: #131720;
303
388
  --wds-list-item-select-title-disabled: #bebebe;
304
389
  --wds-list-item-select-icon-padding-horizontal-medium: 12px;
@@ -324,12 +409,25 @@
324
409
  --wds-marketing-page-paddings-vertical-medium: 20px;
325
410
  --wds-message-modal-content-padding-horizontal: 24px;
326
411
  --wds-message-modal-content-padding-top: 20px;
412
+ --wds-message-modal-footer-padding-horizontal: 24px;
413
+ --wds-message-modal-footer-padding-vertical: 24px;
414
+ --wds-message-modal-text-font-line-height: 20px;
415
+ --wds-message-modal-text-font-size: 14px;
416
+ --wds-message-modal-title-font-line-height: 24px;
417
+ --wds-message-modal-title-font-size: 18px;
327
418
  --wds-mobile-modal-content-padding-horizontal: 24px;
328
419
  --wds-mobile-modal-content-padding-vertical: 24px;
329
420
  --wds-mobile-modal-footer-padding-horizontal: 24px;
330
421
  --wds-mobile-modal-footer-padding-vertical: 24px;
422
+ --wds-multiselect-icon-fill: #42454c;
423
+ --wds-notification-fill-error: #f1695f;
424
+ --wds-notification-fill-premium: #c161f0;
425
+ --wds-notification-fill-standard: #418aff;
426
+ --wds-notification-fill-success: #51b77b;
427
+ --wds-notification-fill-warning: #f9ad4d;
331
428
  --wds-notification-padding-horizontal: 8px;
332
429
  --wds-notification-padding-vertical: 8px;
430
+ --wds-number-input-icon-fill: #42454c;
333
431
  --wds-page-header-padding-horizontal: 48px;
334
432
  --wds-page-header-padding-vertical: 24px;
335
433
  --wds-page-header-padding-vertical-small: 18px;
@@ -341,6 +439,8 @@
341
439
  --wds-pagination-padding-vertical: 2px;
342
440
  --wds-palette-border: 4px;
343
441
  --wds-popover-border: 4px;
442
+ --wds-popover-menu-paddings-horizontal: 0;
443
+ --wds-popover-menu-paddings-vertical: 8px;
344
444
  --wds-radio-border: #868aa5;
345
445
  --wds-radio-border-active: #116dff;
346
446
  --wds-radio-border-active-disabled: rgba(19, 23, 32, 0);
@@ -397,10 +497,19 @@
397
497
  --wds-section-helper-fullwidth-vertical-padding-small: 6px;
398
498
  --wds-section-helper-horizontal-margin: 4px;
399
499
  --wds-section-helper-prefix-offset-margin: 4px;
500
+ --wds-section-helper-prefix-offset-medium: 16px;
400
501
  --wds-section-helper-text-font-line-height: 16px;
401
502
  --wds-section-helper-text-font-size: 12px;
402
503
  --wds-segmented-toggle-border-radius-medium: 4px;
403
504
  --wds-segmented-toggle-border-radius-small: 4px;
505
+ --wds-segmented-toggle-default-fill-default: #131720;
506
+ --wds-segmented-toggle-default-fill-hover: #131720;
507
+ --wds-segmented-toggle-default-fill-selected: #131720;
508
+ --wds-segmented-toggle-default-fill-selected-disabled: #bebebe;
509
+ --wds-segmented-toggle-fill-default: rgba(255, 255, 255, 0);
510
+ --wds-segmented-toggle-fill-hover: #f7f8f8;
511
+ --wds-segmented-toggle-fill-selected: rgba(255, 255, 255, 0);
512
+ --wds-segmented-toggle-fill-selected-disabled: rgba(255, 255, 255, 0);
404
513
  --wds-segmented-toggle-icononly-padding-horizontal-medium: 4px;
405
514
  --wds-segmented-toggle-icononly-padding-horizontal-small: 4px;
406
515
  --wds-segmented-toggle-icononly-padding-vertical-medium: 4px;
@@ -415,6 +524,8 @@
415
524
  --wds-segmented-toggle-padding-vertical-small: 4px;
416
525
  --wds-segmented-toggle-size-medium: 32px;
417
526
  --wds-segmented-toggle-size-small: 28px;
527
+ --wds-segmented-toggle-width-default: 0;
528
+ --wds-segmented-toggle-width-selected: 0;
418
529
  --wds-select-area-border-radius: 4px;
419
530
  --wds-select-area-fill: #f7f8f8;
420
531
  --wds-select-area-fill-active: #dce9ff;
@@ -434,6 +545,11 @@
434
545
  --wds-selector-button-size-large: 36px;
435
546
  --wds-selector-button-size-medium: 32px;
436
547
  --wds-selector-button-size-small: 28px;
548
+ --wds-selector-list-item-padding-horizontal-medium: 24px;
549
+ --wds-selector-list-item-padding-horizontal-small: 16px;
550
+ --wds-selector-list-item-padding-vertical-medium: 8px;
551
+ --wds-selector-list-item-padding-vertical-small: 4px;
552
+ --wds-side-panel-back-button-top-padding: 2px;
437
553
  --wds-side-panel-content-padding-horizontal: 24px;
438
554
  --wds-side-panel-content-padding-vertical: 24px;
439
555
  --wds-side-panel-control-layout-divider-border-width: 0;
@@ -443,6 +559,11 @@
443
559
  --wds-side-panel-floating-header-padding-left: 24px;
444
560
  --wds-side-panel-floating-header-padding-right: 8px;
445
561
  --wds-side-panel-floating-header-padding-vertical: 12px;
562
+ --wds-side-panel-floating-max-height: 576px;
563
+ --wds-side-panel-floating-title-font-line-height: 24px;
564
+ --wds-side-panel-floating-title-font-size: 16px;
565
+ --wds-side-panel-footer-border-width: 0;
566
+ --wds-side-panel-footer-fill: #ffffff;
446
567
  --wds-side-panel-footer-padding-horizontal: 24px;
447
568
  --wds-side-panel-footer-padding-vertical: 16px;
448
569
  --wds-side-panel-footnote-padding-horizontal: 24px;
@@ -450,6 +571,10 @@
450
571
  --wds-side-panel-header-padding-left: 24px;
451
572
  --wds-side-panel-header-padding-right: 8px;
452
573
  --wds-side-panel-header-padding-vertical: 16px;
574
+ --wds-side-panel-title-font-letter-spacing: 0;
575
+ --wds-side-panel-title-font-line-height: 24px;
576
+ --wds-side-panel-title-font-size: 18px;
577
+ --wds-sidebar-clear-button-fill: #5a5d63;
453
578
  --wds-sidebar-divider-fill-dark-default: #42454C;
454
579
  --wds-sidebar-divider-fill-light-default: #cfd1dc;
455
580
  --wds-sidebar-divider-fill-neutral-default: #cfd1dc;
@@ -494,6 +619,7 @@
494
619
  --wds-sidebar-item-text-neutral-active: #084ebd;
495
620
  --wds-sidebar-item-text-neutral-default: #42454c;
496
621
  --wds-sidebar-item-text-neutral-disabled: #bebebe;
622
+ --wds-sidebar-item-title: #acafc4;
497
623
  --wds-sidebar-minimize-action-fill-dark-default: #42454C;
498
624
  --wds-sidebar-minimize-action-fill-light-default: #dce9ff;
499
625
  --wds-sidebar-minimize-action-fill-neutral-default: #dce9ff;
@@ -512,11 +638,18 @@
512
638
  --wds-skeleton-border-radius-circle: 1000px;
513
639
  --wds-skeleton-border-radius-line: 4px;
514
640
  --wds-skeleton-border-radius-rectangle: 4px;
641
+ --wds-slider-slider-knob-border-width: 4px;
642
+ --wds-slider-slider-knob-border-width-hover: 12px;
643
+ --wds-slider-slider-knob-color: #116dff;
644
+ --wds-slider-slider-knob-color-hover: #0f62e6;
645
+ --wds-slider-slider-knob-shadow: false;
515
646
  --wds-slider-slider-knob-size: 12px;
647
+ --wds-slider-slider-knob-size-hover: 18px;
516
648
  --wds-slider-slider-knob-size-transparent: 16px;
517
649
  --wds-slider-slider-mark-size: 8px;
518
- --wds-slider-track-border-border-radius-transparent: 1000px;
519
- --wds-slider-track-border-radius: 1000px;
650
+ --wds-slider-track-border-border-radius: 1000px;
651
+ --wds-slider-track-border-radius-transparent: 1000px;
652
+ --wds-slider-track-color: #dce9ff;
520
653
  --wds-slider-track-size: 2px;
521
654
  --wds-slider-track-size-transparent: 2px;
522
655
  --wds-social-post-preview-content-padding-horizontal: 12px;
@@ -532,11 +665,18 @@
532
665
  --wds-swatches-swatch-active-border-radius-small: 5px;
533
666
  --wds-swatches-swatch-border-radius-medium: 4px;
534
667
  --wds-swatches-swatch-border-radius-small: 2px;
668
+ --wds-swatches-swatch-size-extra-tiny: 18px;
535
669
  --wds-swatches-swatch-size-large: 36px;
536
670
  --wds-swatches-swatch-size-medium: 32px;
537
671
  --wds-swatches-swatch-size-small: 28px;
538
672
  --wds-swatches-swatch-size-tiny: 24px;
539
673
  --wds-swatches-swatch-size-x-tiny: 18px;
674
+ --wds-table-toolbar-padding-horizontal: 24px;
675
+ --wds-table-list-item-border-radius: 0;
676
+ --wds-table-list-item-gap: 24px;
677
+ --wds-table-list-item-indentation-level-2: 12px;
678
+ --wds-table-list-item-indentation-level-3: 28px;
679
+ --wds-table-list-item-paddings: 0;
540
680
  --wds-tabs-gap-medium: 8px;
541
681
  --wds-tabs-gap-small: 6px;
542
682
  --wds-tabs-label-font-size-small: 12px;
@@ -549,6 +689,8 @@
549
689
  --wds-tag-border-radius-medium: 4px;
550
690
  --wds-tag-border-radius-small: 4px;
551
691
  --wds-tag-border-radius-tiny: 4px;
692
+ --wds-tag-label-font-line-height-small: 12px;
693
+ --wds-tag-label-font-size-small: 12px;
552
694
  --wds-tag-padding-horizontal-large: 16px;
553
695
  --wds-tag-padding-horizontal-medium: 12px;
554
696
  --wds-tag-padding-horizontal-small: 12px;
@@ -563,7 +705,35 @@
563
705
  --wds-tag-size-tiny: 20px;
564
706
  --wds-testimonial-list-gap: 24px;
565
707
  --wds-thumbnail-border-radius: 4px;
708
+ --wds-thumbnail-border-width-default: 0;
709
+ --wds-thumbnail-fill: rgba(255, 255, 255, 0);
710
+ --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
566
711
  --wds-thumbnail-gap: 12px;
712
+ --wds-thumbnail-illustration-fill-1: #868aa5;
713
+ --wds-thumbnail-illustration-fill-2: #131720;
714
+ --wds-thumbnail-illustration-fill-3: #f7f8f8;
715
+ --wds-thumbnail-subtitle-fill: #42454c;
716
+ --wds-thumbnail-subtitle-font-line-height-tiny: 16px;
717
+ --wds-thumbnail-subtitle-font-size-tiny: 12px;
718
+ --wds-thumbnail-title-font-line-height-tiny: 16px;
719
+ --wds-thumbnail-title-font-size-tiny: 12px;
720
+ --wds-thumbnail-title-font-weight-tiny: 400;
721
+ --wds-thumbnail-title-padding-top: 4px;
722
+ --wds-timeline-title-font-line-height: 16px;
723
+ --wds-timeline-title-font-size: 12px;
724
+ --wds-toggle-button-border-radius-square-large: 6px;
725
+ --wds-toggle-button-border-radius-square-medium: 6px;
726
+ --wds-toggle-button-border-radius-square-small: 4px;
727
+ --wds-toggle-button-border-radius-square-tiny: 4px;
728
+ --wds-toggle-button-label-font-weight: 400;
729
+ --wds-toggle-button-padding-horizontal-large: 16px;
730
+ --wds-toggle-button-padding-horizontal-large-round: 16px;
731
+ --wds-toggle-button-padding-horizontal-medium: 12px;
732
+ --wds-toggle-button-padding-horizontal-medium-round: 16px;
733
+ --wds-toggle-button-padding-horizontal-small: 12px;
734
+ --wds-toggle-button-padding-horizontal-small-round: 16px;
735
+ --wds-toggle-button-padding-horizontal-tiny: 6px;
736
+ --wds-toggle-button-padding-horizontal-tiny-round: 12px;
567
737
  --wds-toggle-button-padding-left-large: 8px;
568
738
  --wds-toggle-button-padding-left-large-round: 12px;
569
739
  --wds-toggle-button-padding-left-medium: 6px;
@@ -604,6 +774,7 @@
604
774
  --wds-toggle-switch-fill-urgent-active-hover: #d4522b;
605
775
  --wds-toggle-switch-fill-urgent-disabled: #e5e5e5;
606
776
  --wds-toggle-switch-fill-urgent-hover: #42454c;
777
+ --wds-toggle-switch-icon: false;
607
778
  --wds-toggle-switch-knob-size-large: 20px;
608
779
  --wds-toggle-switch-knob-size-medium: 16px;
609
780
  --wds-toggle-switch-knob-size-small: 12px;
@@ -614,6 +785,7 @@
614
785
  --wds-toggle-switch-width-medium: 28px;
615
786
  --wds-toggle-switch-width-small: 24px;
616
787
  --wds-tooltip-background-fill: #ffffff;
788
+ --wds-tooltip-border-radius: #ffffff;
617
789
  --wds-tooltip-border-radius-medium: 8px;
618
790
  --wds-tooltip-border-radius-small: 8px;
619
791
  --wds-tooltip-padding-horizontal-medium: 16px;
@@ -635,6 +807,7 @@
635
807
  --wds-vertical-tabs-icon-padding-horizontal-small: 8px;
636
808
  --wds-vertical-tabs-icon-padding-vertical-medium: 8px;
637
809
  --wds-vertical-tabs-icon-padding-vertical-small: 8px;
810
+ --wds-vertical-tabs-item-active-title-text-disabled: #bebebe;
638
811
  --wds-vertical-tabs-item-fill-light: #ffffff;
639
812
  --wds-vertical-tabs-item-fill-light-active: #dce9ff;
640
813
  --wds-vertical-tabs-item-fill-light-disabled: #ffffff;
@@ -670,6 +843,16 @@
670
843
  --wds-vertical-tabs-item-padding-vertical-medium: 8px;
671
844
  --wds-vertical-tabs-item-padding-vertical-small: 8px;
672
845
  --wds-vertical-tabs-item-padding-vertical-tiny: 4px;
846
+ --wds-vertical-tabs-item-pill-fill-premium-disabled: #ffffff;
847
+ --wds-vertical-tabs-item-pill-fill-standard: #ffffff;
848
+ --wds-vertical-tabs-item-pill-fill-standard-disabled: #ffffff;
849
+ --wds-vertical-tabs-item-round-disabled: #ffffff;
850
+ --wds-vertical-tabs-item-round-fill-hover: #f7f8f8;
851
+ --wds-vertical-tabs-item-round-fill-premium-active: #e3c3f4;
852
+ --wds-vertical-tabs-item-round-fill-premium-disabled: #ffffff;
853
+ --wds-vertical-tabs-item-round-fill-premium-hover: #f7f8f8;
854
+ --wds-vertical-tabs-item-round-padding-bottom-tiny: 4px;
855
+ --wds-vertical-tabs-item-round-padding-top-tiny: 4px;
673
856
  --wds-vertical-tabs-section-text-font-line-height-small: 16px;
674
857
  --wds-vertical-tabs-section-text-font-size-small: 12px;
675
858
  --wds-vertical-tabs-section-text-font-weight-small: 700;
@@ -682,6 +865,7 @@
682
865
  --wds-vertical-tabs-section-title-padding-top-medium: 24px;
683
866
  --wds-vertical-tabs-section-title-padding-top-small: 16px;
684
867
  --wds-vertical-tabs-section-title-padding-top-tiny: 4px;
868
+ --wds-background-blur-100: 0;
685
869
  --wds-border-radius-0: 0;
686
870
  --wds-border-radius-100: 2px;
687
871
  --wds-border-radius-200: 4px;
@@ -718,6 +902,10 @@
718
902
  --wds-color-black-200-transparent-50: rgba(43, 46, 54, .5);
719
903
  --wds-color-black-200-transparent-60: rgba(43, 46, 54, .6);
720
904
  --wds-color-black-200-transparent-70: rgba(43, 46, 54, .7);
905
+ --wds-color-black-300-transparent-0: rgba(43, 46, 54, 0.0000);
906
+ --wds-color-black-300-transparent-50: rgba(43, 46, 54, 0.5000);
907
+ --wds-color-black-300-transparent-60: rgba(43, 46, 54, 0.6000);
908
+ --wds-color-black-300-transparent-70: rgba(43, 46, 54, 0.7000);
721
909
  --wds-color-black-700-transparent: #edeef200;
722
910
  --wds-color-blue-0: #084ebd;
723
911
  --wds-color-blue-50: #0f62e6;
@@ -789,6 +977,9 @@
789
977
  --wds-color-yellow-400: #fdead2;
790
978
  --wds-color-yellow-500: #fef3e5;
791
979
  --wds-color-yellow-600: #fef6ed;
980
+ --wds-color-border-ai-active: #ffffff;
981
+ --wds-color-border-ai-disabled: #ffffff;
982
+ --wds-color-border-ai-hover: #ffffff;
792
983
  --wds-color-border-ai-primary: #5a48f5;
793
984
  --wds-color-border-dark-primary: #868aa5;
794
985
  --wds-color-border-dark-primary-active: #2b2e36;
@@ -891,10 +1082,13 @@
891
1082
  --wds-color-fill-accent-10: #1F8845;
892
1083
  --wds-color-fill-accent-11: #1B3689;
893
1084
  --wds-color-fill-accent-12: #ACAFC4;
1085
+ --wds-color-fill-ai: #ffffff;
1086
+ --wds-color-fill-ai-hover: #ffffff;
894
1087
  --wds-color-fill-ai-primary: #5a48f5;
895
1088
  --wds-color-fill-ai-primary-active: #5a48f5;
896
1089
  --wds-color-fill-ai-primary-disabled: #bebebe;
897
1090
  --wds-color-fill-ai-primary-hover: #4d3dd0;
1091
+ --wds-color-fill-ai-primary-pressed: #ffffff;
898
1092
  --wds-color-fill-ai-secondary: #d6d1fc;
899
1093
  --wds-color-fill-ai-secondary-active: #d6d1fc;
900
1094
  --wds-color-fill-ai-secondary-disabled: #e5e5e5;
@@ -983,6 +1177,46 @@
983
1177
  --wds-color-fill-social-youtube-active: #ff0000;
984
1178
  --wds-color-fill-social-youtube-disabled: #bebebe;
985
1179
  --wds-color-fill-social-youtube-hover: rgba(255, 0, 0, .8);
1180
+ --wds-color-fill-stage-anchor: #ffffff;
1181
+ --wds-color-fill-stage-anchor-active: #ffffff;
1182
+ --wds-color-fill-stage-anchor-disabled: #bebebe;
1183
+ --wds-color-fill-stage-anchor-hover: #ffffff;
1184
+ --wds-color-fill-stage-cms: #2d3034;
1185
+ --wds-color-fill-stage-cms-active: #2d3034;
1186
+ --wds-color-fill-stage-cms-disabled: #bebebe;
1187
+ --wds-color-fill-stage-cms-hover: #2d3034;
1188
+ --wds-color-fill-stage-element-primary: #116dff;
1189
+ --wds-color-fill-stage-element-primary-active: #116dff;
1190
+ --wds-color-fill-stage-element-primary-disabled: #bebebe;
1191
+ --wds-color-fill-stage-element-primary-hover: #0f62e6;
1192
+ --wds-color-fill-stage-element-secondary: #dce9ff;
1193
+ --wds-color-fill-stage-element-secondary-active: #dce9ff;
1194
+ --wds-color-fill-stage-element-secondary-disabled: #e5e5e5;
1195
+ --wds-color-fill-stage-element-secondary-hover: #c3daff;
1196
+ --wds-color-fill-stage-interactions: #ff5c9f;
1197
+ --wds-color-fill-stage-interactions-active: #ff5c9f;
1198
+ --wds-color-fill-stage-interactions-disabled: #bebebe;
1199
+ --wds-color-fill-stage-interactions-hover: #ff5c9f;
1200
+ --wds-color-fill-stage-master-primary: #47cb2e;
1201
+ --wds-color-fill-stage-master-primary-active: #47cb2e;
1202
+ --wds-color-fill-stage-master-primary-disabled: #bebebe;
1203
+ --wds-color-fill-stage-master-primary-hover: #47cb2e;
1204
+ --wds-color-fill-stage-master-secondary: #e4f7e0;
1205
+ --wds-color-fill-stage-master-secondary-active: #a3e597;
1206
+ --wds-color-fill-stage-master-secondary-disabled: #e5e5e5;
1207
+ --wds-color-fill-stage-master-secondary-hover: #d1f2cb;
1208
+ --wds-color-fill-stage-padding: #18d9c2;
1209
+ --wds-color-fill-stage-padding-active: #18d9c2;
1210
+ --wds-color-fill-stage-padding-disabled: #bebebe;
1211
+ --wds-color-fill-stage-padding-hover: #18d9c2;
1212
+ --wds-color-fill-stage-section-primary: #116dff;
1213
+ --wds-color-fill-stage-section-primary-active: #116dff;
1214
+ --wds-color-fill-stage-section-primary-disabled: #bebebe;
1215
+ --wds-color-fill-stage-section-primary-hover: #0f62e6;
1216
+ --wds-color-fill-stage-section-secondary: #dce9ff;
1217
+ --wds-color-fill-stage-section-secondary-active: #dce9ff;
1218
+ --wds-color-fill-stage-section-secondary-disabled: #e5e5e5;
1219
+ --wds-color-fill-stage-section-secondary-hover: #c3daff;
986
1220
  --wds-color-fill-standard-primary: #116dff;
987
1221
  --wds-color-fill-standard-primary-active: #116dff;
988
1222
  --wds-color-fill-standard-primary-disabled: #bebebe;
@@ -1038,6 +1272,22 @@
1038
1272
  --wds-color-fill-transparent-secondary-active: rgba(43, 46, 54, .7);
1039
1273
  --wds-color-fill-transparent-secondary-disabled: rgba(43, 46, 54, 0);
1040
1274
  --wds-color-fill-transparent-secondary-hover: rgba(43, 46, 54, .6);
1275
+ --wds-color-fill-transparent-tertiary: rgba(19, 23, 32, 0);
1276
+ --wds-color-fill-transparent-tertiary-active: rgba(19, 23, 32, .5);
1277
+ --wds-color-fill-transparent-tertiary-disabled: rgba(19, 23, 32, 0);
1278
+ --wds-color-fill-transparent-tertiary-hover: rgba(19, 23, 32, .5);
1279
+ --wds-color-fill-transparent-neutral-primary: rgba(43, 46, 54, .5);
1280
+ --wds-color-fill-transparent-neutral-primary-active: rgba(43, 46, 54, .7);
1281
+ --wds-color-fill-transparent-neutral-primary-disabled: rgba(19, 23, 32, .2);
1282
+ --wds-color-fill-transparent-neutral-primary-hover: rgba(43, 46, 54, .6);
1283
+ --wds-color-fill-transparent-neutral-secondary: rgba(43, 46, 54, 0);
1284
+ --wds-color-fill-transparent-neutral-secondary-active: rgba(43, 46, 54, .7);
1285
+ --wds-color-fill-transparent-neutral-secondary-disabled: rgba(43, 46, 54, 0);
1286
+ --wds-color-fill-transparent-neutral-secondary-hover: rgba(43, 46, 54, .6);
1287
+ --wds-color-fill-transparent-neutral-tertiary: rgba(19, 23, 32, 0);
1288
+ --wds-color-fill-transparent-neutral-tertiary-active: rgba(19, 23, 32, .5);
1289
+ --wds-color-fill-transparent-neutral-tertiary-disabled: rgba(19, 23, 32, 0);
1290
+ --wds-color-fill-transparent-neutral-tertiary-hover: rgba(19, 23, 32, .5);
1041
1291
  --wds-color-fill-urgent-primary: #f96132;
1042
1292
  --wds-color-fill-urgent-primary-active: #f96132;
1043
1293
  --wds-color-fill-urgent-primary-disabled: #bebebe;
@@ -1065,6 +1315,9 @@
1065
1315
  --wds-color-text-placeholder-light: #868aa5;
1066
1316
  --wds-color-text-premium: #9a27d5;
1067
1317
  --wds-color-text-primary: #116dff;
1318
+ --wds-color-text-stage-element: #116dff;
1319
+ --wds-color-text-stage-master: #47cb2e;
1320
+ --wds-color-text-stage-section: #116dff;
1068
1321
  --wds-color-text-standard-primary: #131720;
1069
1322
  --wds-color-text-standard-primary-light: #ffffff;
1070
1323
  --wds-color-text-standard-secondary: #42454c;
@@ -1073,6 +1326,7 @@
1073
1326
  --wds-color-text-urgent: #f96132;
1074
1327
  --wds-color-text-warning: #f9ad4d;
1075
1328
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1329
+ --wds-font-family-heading: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1076
1330
  --wds-font-letter-spacing-0: 0;
1077
1331
  --wds-font-letter-spacing-100: 1px;
1078
1332
  --wds-font-letter-spacing-heading-1: 0;
@@ -1118,16 +1372,23 @@
1118
1372
  --wds-font-weight-bold: 700;
1119
1373
  --wds-font-weight-medium: 500;
1120
1374
  --wds-font-weight-regular: 400;
1375
+ --wds-font-weight-semi-bold: 600;
1121
1376
  --wds-font-weight-heading-1: 700;
1122
1377
  --wds-font-weight-heading-2: 700;
1123
1378
  --wds-font-weight-heading-3: 700;
1124
1379
  --wds-font-weight-heading-4: 700;
1125
1380
  --wds-font-weight-heading-5: 700;
1126
1381
  --wds-font-weight-heading-6: 400;
1382
+ --wds-font-weight-body-bold: 700;
1127
1383
  --wds-shadow-100: 0 2px 7px rgba(19, 23, 32, .2);
1128
1384
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
1129
1385
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
1130
1386
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
1387
+ --wds-shadow-blur-50: 4;
1388
+ --wds-shadow-blur-100: 4;
1389
+ --wds-shadow-blur-150: 6;
1390
+ --wds-shadow-blur-200: 18;
1391
+ --wds-shadow-blur-400: 24;
1131
1392
  --wds-shadow-inner-100: 1px 1px 2px rgba(19, 23, 32, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
1132
1393
  --wds-shadow-inner-200: 1px 1px 4px rgba(19, 23, 32, .2) inset;
1133
1394
  --wds-shadow-inner-300: 0 0 18px rgba(19, 23, 32, .1) inset, 0 0 6px rgba(19, 23, 32, .05) inset;
@@ -1144,12 +1405,24 @@
1144
1405
  --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;
1145
1406
  --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;
1146
1407
  --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;
1408
+ --wds-shadow-y-100: 0;
1409
+ --wds-shadow-y-200: 0;
1410
+ --wds-shadow-y-300: 0;
1411
+ --wds-shadow-y-350: 0;
1412
+ --wds-shadow-fill-primary-modal: rgba(19, 23, 32, .2);
1413
+ --wds-shadow-fill-primary-overlay: rgba(19, 23, 32, .1);
1414
+ --wds-shadow-fill-primary-raised: rgba(19, 23, 32, .1);
1415
+ --wds-shadow-fill-secondary-modal: rgba(19, 23, 32, .1);
1416
+ --wds-shadow-fill-secondary-overlay: rgba(19, 23, 32, .05);
1417
+ --wds-shadow-fill-secondary-raised: rgba(19, 23, 32, .05);
1418
+ --wds-shadow-fill-secondary-toggle: rgba(19, 23, 32, 0);
1147
1419
  --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
1148
1420
  --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
1149
1421
  --wds-shadow-focus-inner-standard: 0 0 0 3px #c3daff inset;
1150
1422
  --wds-shadow-focus-inner-warning: 0 0 0 3px #fdead2 inset;
1151
1423
  --wds-shadow-focus-standard: 0 0 0 3px #c3daff;
1152
1424
  --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
1425
+ --wds-shadow-focus-spread: 0;
1153
1426
  --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
1154
1427
  --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
1155
1428
  --wds-shadow-surface-overlay-dark: 0 12px 20px rgba(19, 23, 32, .1);
@@ -1162,14 +1435,18 @@
1162
1435
  --wds-space-200: 8px;
1163
1436
  --wds-space-250: 10px;
1164
1437
  --wds-space-300: 12px;
1438
+ --wds-space-350: 14px;
1165
1439
  --wds-space-400: 16px;
1166
1440
  --wds-space-475: 18px;
1167
1441
  --wds-space-500: 20px;
1168
1442
  --wds-space-600: 24px;
1169
1443
  --wds-space-700: 28px;
1170
1444
  --wds-space-800: 32px;
1445
+ --wds-space-850: 34px;
1171
1446
  --wds-space-900: 36px;
1447
+ --wds-space-950: 38px;
1172
1448
  --wds-space-1000: 40px;
1449
+ --wds-space-1050: 42px;
1173
1450
  --wds-space-1100: 44px;
1174
1451
  --wds-space-1200: 48px;
1175
1452
  --wds-space-1300: 52px;
@@ -1192,5 +1469,10 @@
1192
1469
  --wds-space-padding-vertical-xx-tiny: 4px;
1193
1470
  --wds-border-radius-surface-default: 4px;
1194
1471
  --wds-border-radius-surface-modal: 4px;
1472
+ --wds-border-radius-surface-modal-backdrop: 0;
1195
1473
  --wds-border-radius-surface-overlay: 4px;
1474
+ --wds-border-radius-surface-raised: 4px;
1475
+ --wds-border-radius-surface-sunken: 0;
1476
+ --wds-width-default: 1px;
1477
+ --wds-width-default-2: 1px;
1196
1478
  }