@wix/design-system-tokens 1.82.0 → 1.84.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.
package/all.css CHANGED
@@ -1,4 +1,16 @@
1
1
  :root {
2
+ --wds-accordion-background-fill-light: #ffffff;
3
+ --wds-accordion-background-fill-light-hover: #e7f0ff;
4
+ --wds-accordion-caret-fill: #44485f;
5
+ --wds-accordion-caret-fill-hover: #44485f;
6
+ --wds-accordion-title-fill: #000624;
7
+ --wds-accordion-title-fill-hover: #000624;
8
+ --wds-accordion-title-font-line-height-medium: 24px;
9
+ --wds-accordion-title-font-line-height-small: 18px;
10
+ --wds-accordion-title-font-size-medium: 16px;
11
+ --wds-accordion-title-font-size-small: 14px;
12
+ --wds-accordion-title-font-weight: 500;
13
+ --wds-accordion-title-font-weight-small: 500;
2
14
  --wds-add-item-border-radius: 8px;
3
15
  --wds-add-item-padding-horizontal-large: 30px;
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: 18px;
8
20
  --wds-add-item-padding-vertical-tiny: 12px;
21
+ --wds-add-item-title-font-line-height-medium: 24px;
22
+ --wds-add-item-title-font-line-height-tiny: 18px;
23
+ --wds-add-item-title-font-size-medium: 16px;
24
+ --wds-add-item-title-font-size-small: 14px;
25
+ --wds-announcement-modal-text-font-line-height: 24px;
26
+ --wds-announcement-modal-text-font-size: 16px;
9
27
  --wds-avatar-group-gap-condensed: -3px;
10
28
  --wds-avatar-group-gap-default: 6px;
11
29
  --wds-badge-border-radius-medium: 2px;
@@ -38,6 +56,8 @@
38
56
  --wds-button-border-radius-medium: 1000px;
39
57
  --wds-button-border-radius-small: 1000px;
40
58
  --wds-button-border-radius-tiny: 1000px;
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: #116dff;
43
63
  --wds-button-font-line-height-large: 24px;
@@ -56,6 +76,7 @@
56
76
  --wds-button-icon-offset-medium: 12px;
57
77
  --wds-button-icon-offset-small: 12px;
58
78
  --wds-button-icon-offset-tiny: 12px;
79
+ --wds-button-label-font-size-large: 16px;
59
80
  --wds-button-outline-hover: transparent;
60
81
  --wds-button-padding-horizontal-large: 30px;
61
82
  --wds-button-padding-horizontal-medium: 24px;
@@ -74,6 +95,8 @@
74
95
  --wds-button-size-tiny: 24px;
75
96
  --wds-button-size-tiny-screen-small: 36px;
76
97
  --wds-button-size-x-tiny: 18px;
98
+ --wds-button-text-standard-primary: #000624;
99
+ --wds-button-text-standard-primary-hover: #000624;
77
100
  --wds-button-text-hover: #ffffff;
78
101
  --wds-card-border: 8px;
79
102
  --wds-card-content-paddings-horizontal: 24px;
@@ -84,6 +107,18 @@
84
107
  --wds-card-tab-padding-horizontal-small: 18px;
85
108
  --wds-card-tab-padding-vertical-medium: 18px;
86
109
  --wds-card-tab-padding-vertical-small: 18px;
110
+ --wds-card-gallery-item-border-radius-0: 0;
111
+ --wds-card-gallery-item-border-radius-100: 8px;
112
+ --wds-card-gallery-item-content-margin-vertical: 0;
113
+ --wds-card-gallery-item-fill: #ffffff;
114
+ --wds-card-gallery-item-overlay-fill: rgba(68, 72, 95, .5);
115
+ --wds-card-gallery-item-padding-left-medium: 18px;
116
+ --wds-card-gallery-item-padding-left-small: 12px;
117
+ --wds-card-gallery-item-padding-right-medium: 24px;
118
+ --wds-card-gallery-item-padding-right-small: 18px;
119
+ --wds-card-gallery-item-padding-vertical-medium: 18px;
120
+ --wds-card-gallery-item-padding-vertical-small: 12px;
121
+ --wds-card-gallery-item-title-font-size-medium: 18px;
87
122
  --wds-checkbox-border: #116dff;
88
123
  --wds-checkbox-border-active: #116dff;
89
124
  --wds-checkbox-border-active-disabled: rgba(0, 6, 36, .1);
@@ -100,6 +135,8 @@
100
135
  --wds-checkbox-group-gap-vertical: 12px;
101
136
  --wds-checkbox-icon: #ffffff;
102
137
  --wds-checkbox-icon-disabled: rgba(0, 6, 36, .3);
138
+ --wds-checkbox-label-font-line-height-small: 18px;
139
+ --wds-checkbox-label-font-size-small: 14px;
103
140
  --wds-circular-progress-bar-background-fill-error: #fbd0cd;
104
141
  --wds-circular-progress-bar-background-fill-premium: #e3c3f4;
105
142
  --wds-circular-progress-bar-background-fill-standard: #d6e6fe;
@@ -111,6 +148,7 @@
111
148
  --wds-circular-progress-bar-size-large: 102px;
112
149
  --wds-circular-progress-bar-size-medium: 54px;
113
150
  --wds-circular-progress-bar-size-small: 30px;
151
+ --wds-circular-progress-bar-size-tiny: 18px;
114
152
  --wds-close-button-standard-fill-active: #084ebd;
115
153
  --wds-close-button-standard-fill-disabled: rgba(0, 6, 36, .1);
116
154
  --wds-close-button-standard-fill-hover: #a8caff;
@@ -155,11 +193,18 @@
155
193
  --wds-custom-modal-content-padding-vertical: 24px;
156
194
  --wds-custom-modal-footer-padding-horizon: 24px;
157
195
  --wds-custom-modal-footer-padding-vertical: 18px;
196
+ --wds-custom-modal-footnote-link-font-weight: 500;
158
197
  --wds-custom-modal-footnote-padding-horizon: 24px;
159
198
  --wds-custom-modal-footnote-padding-vertical: 12px;
199
+ --wds-custom-modal-footnote-text-font-line-height: 18px;
200
+ --wds-custom-modal-footnote-text-font-size: 14px;
160
201
  --wds-custom-modal-header-padding-left: 24px;
161
202
  --wds-custom-modal-header-padding-right: 9px;
162
203
  --wds-custom-modal-header-padding-vertical: 18px;
204
+ --wds-custom-modal-header-title-font-line-height: 24px;
205
+ --wds-custom-modal-header-title-font-size: 16px;
206
+ --wds-divider-fill-color-light-1: #dfe5eb;
207
+ --wds-divider-fill-color-light-2: #dfe5eb;
163
208
  --wds-dock-background-fill: #e7f0ff;
164
209
  --wds-dock-background-fill-active: #d6e6fe;
165
210
  --wds-dock-background-fill-disabled: rgba(0, 6, 36, .1);
@@ -168,9 +213,10 @@
168
213
  --wds-dock-foreground-fill-active: #116dff;
169
214
  --wds-dock-foreground-fill-disabled: rgba(0, 6, 36, .3);
170
215
  --wds-dock-foreground-fill-hover: #5999ff;
216
+ --wds-dropdown-icon-fill: #116dff;
217
+ --wds-dropdown-list-paddings: 0;
171
218
  --wds-dropdown-layout-option-size-big: 48px;
172
219
  --wds-dropdown-layout-option-size-small: 36px;
173
- --wds-dropdown-icon-fill: #116dff;
174
220
  --wds-empty-state-border-radius: 8px;
175
221
  --wds-empty-state-page-content-paddings: 18px;
176
222
  --wds-empty-state-section-content-paddings: 15px;
@@ -178,20 +224,27 @@
178
224
  --wds-field-set-gap-large: 18px;
179
225
  --wds-field-set-gap-medium: 12px;
180
226
  --wds-field-set-gap-small: 6px;
227
+ --wds-field-set-label-fill: #44485f;
181
228
  --wds-field-set-label-font-line-height-small: 18px;
182
229
  --wds-field-set-label-font-line-height-tiny: 18px;
183
230
  --wds-field-set-label-font-size-small: 14px;
184
231
  --wds-field-set-label-font-size-tiny: 12px;
232
+ --wds-field-set-label-font-weight: 400;
185
233
  --wds-field-set-label-gap-small: 9px;
186
234
  --wds-field-set-label-gap-tiny: 6px;
235
+ --wds-floating-helper-main-action-padding-top: 18px;
187
236
  --wds-floating-helper-padding-horizontal: 36px;
188
237
  --wds-floating-helper-padding-vertical: 30px;
238
+ --wds-form-field-label-fill: #44485f;
189
239
  --wds-form-field-label-font-line-height-small: 18px;
190
240
  --wds-form-field-label-font-line-height-tiny: 18px;
191
241
  --wds-form-field-label-font-size-small: 14px;
192
242
  --wds-form-field-label-font-size-tiny: 12px;
243
+ --wds-form-field-label-font-weight: 400;
193
244
  --wds-form-field-label-gap-small: 9px;
194
245
  --wds-form-field-label-gap-tiny: 6px;
246
+ --wds-form-field-label-line-height-small: 18px;
247
+ --wds-form-field-label-line-height-tiny: 18px;
195
248
  --wds-gallery-item-border: 8px;
196
249
  --wds-gallery-item-padding-left-medium: 18px;
197
250
  --wds-gallery-item-padding-left-small: 12px;
@@ -203,6 +256,8 @@
203
256
  --wds-image-border-radius-none: 0;
204
257
  --wds-info-icon-fill: #116dff;
205
258
  --wds-info-icon-fill-hover: #116dff;
259
+ --wds-input-background-fill-default: #ffffff;
260
+ --wds-input-background-fill-hover: #e7f0ff;
206
261
  --wds-input-border-radius-default-large: 6px;
207
262
  --wds-input-border-radius-default-medium: 6px;
208
263
  --wds-input-border-radius-default-small: 6px;
@@ -248,6 +303,20 @@
248
303
  --wds-input-area-padding-right-small: 9px;
249
304
  --wds-input-area-padding-vertical-medium: 6px;
250
305
  --wds-input-area-padding-vertical-small: 6px;
306
+ --wds-internal-color-picker-padding-horizontal: 18px;
307
+ --wds-internal-color-picker-padding-vertical: 12px;
308
+ --wds-internal-color-picker-width: 240px;
309
+ --wds-internal-image-height-large: 120px;
310
+ --wds-internal-image-height-medium: 84px;
311
+ --wds-internal-image-height-small: 60px;
312
+ --wds-internal-image-width-large: 240px;
313
+ --wds-internal-image-width-medium: 156px;
314
+ --wds-internal-image-width-small: 122px;
315
+ --wds-internal-image-width-tiny: 106px;
316
+ --wds-internal-thumbnail-illustration-size-large: 114px;
317
+ --wds-internal-thumbnail-illustration-size-medium: 72px;
318
+ --wds-internal-thumbnail-illustration-size-small: 51px;
319
+ --wds-internal-thumbnail-illustration-size-tiny: 38px;
251
320
  --wds-linear-progress-bar-border-radius: 1000px;
252
321
  --wds-list-item-gap-columns: 24px;
253
322
  --wds-list-item-indentation-level-2: 12px;
@@ -264,12 +333,20 @@
264
333
  --wds-list-item-padding-vertical-tiny: 12px;
265
334
  --wds-list-item-padding-vertical-x-tiny: 6px;
266
335
  --wds-list-item-padding-vertical-xx-tiny: 3px;
336
+ --wds-list-item-action-border-radius: 0;
337
+ --wds-list-item-action-label-font-line-height-medium: 24px;
338
+ --wds-list-item-action-label-font-line-height-small: 18px;
339
+ --wds-list-item-action-label-font-size-medium: 16px;
340
+ --wds-list-item-action-label-font-size-small: 14px;
267
341
  --wds-list-item-action-padding-horizontal-medium: 18px;
268
342
  --wds-list-item-action-padding-horizontal-small: 18px;
269
343
  --wds-list-item-action-padding-vertical-medium: 6px;
270
344
  --wds-list-item-action-padding-vertical-medium-screen-small: 12px;
271
345
  --wds-list-item-action-padding-vertical-small: 6px;
272
346
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
347
+ --wds-list-item-action-prefix-margin: 6px;
348
+ --wds-list-item-action-subtitle-font-line-height-medium: 18px;
349
+ --wds-list-item-action-subtitle-font-size-medium: 14px;
273
350
  --wds-list-item-section-font-size: 14px;
274
351
  --wds-list-item-section-line-height: 18px;
275
352
  --wds-list-item-section-padding-horizontal: 24px;
@@ -287,22 +364,36 @@
287
364
  --wds-list-item-select-active-title-disabled: rgba(255, 255, 255, .7);
288
365
  --wds-list-item-select-active-title-disabled-screen-small: rgba(0, 6, 36, .3);
289
366
  --wds-list-item-select-active-title-screen-small: #116dff;
367
+ --wds-list-item-select-border-radius: 0;
290
368
  --wds-list-item-select-fill: #ffffff;
291
369
  --wds-list-item-select-fill-active: #d6e6fe;
292
370
  --wds-list-item-select-fill-disabled: #ffffff;
293
371
  --wds-list-item-select-fill-hover: #e7f0ff;
372
+ --wds-list-item-select-label-font-line-height-medium: 24px;
373
+ --wds-list-item-select-label-font-line-height-small: 18px;
374
+ --wds-list-item-select-label-font-size-medium: 16px;
375
+ --wds-list-item-select-label-font-size-small: 14px;
294
376
  --wds-list-item-select-padding-horizontal-medium: 18px;
295
377
  --wds-list-item-select-padding-horizontal-small: 18px;
378
+ --wds-list-item-select-padding-left-medium: 18px;
379
+ --wds-list-item-select-padding-left-small: 18px;
380
+ --wds-list-item-select-padding-right-medium: 24px;
381
+ --wds-list-item-select-padding-right-small: 24px;
296
382
  --wds-list-item-select-padding-vertical-medium: 6px;
297
383
  --wds-list-item-select-padding-vertical-medium-screen-small: 12px;
298
384
  --wds-list-item-select-padding-vertical-small: 6px;
299
385
  --wds-list-item-select-padding-vertical-small-screen-small: 12px;
386
+ --wds-list-item-select-prefix-margin: 6px;
300
387
  --wds-list-item-select-subtitle: #868aa5;
301
388
  --wds-list-item-select-subtitle-disabled: rgba(0, 6, 36, .3);
389
+ --wds-list-item-select-subtitle-font-line-height-medium: 18px;
390
+ --wds-list-item-select-subtitle-font-size-medium: 14px;
302
391
  --wds-list-item-select-title: #000624;
303
392
  --wds-list-item-select-title-disabled: rgba(0, 6, 36, .3);
304
393
  --wds-list-item-select-icon-padding-horizontal-medium: 12px;
394
+ --wds-list-item-select-icon-padding-horizontal-small: 12px;
305
395
  --wds-list-item-select-icon-padding-vertical-medium: 6px;
396
+ --wds-list-item-select-icon-padding-vertical-small: 6px;
306
397
  --wds-loader-fill: #d6e6fe;
307
398
  --wds-loader-fill-error: #e62214;
308
399
  --wds-loader-fill-light: #ffffff;
@@ -324,12 +415,25 @@
324
415
  --wds-marketing-page-paddings-vertical-medium: 30px;
325
416
  --wds-message-modal-content-padding-horizontal: 24px;
326
417
  --wds-message-modal-content-padding-top: 24px;
418
+ --wds-message-modal-footer-padding-horizontal: 36px;
419
+ --wds-message-modal-footer-padding-vertical: 36px;
420
+ --wds-message-modal-text-font-line-height: 24px;
421
+ --wds-message-modal-text-font-size: 16px;
422
+ --wds-message-modal-title-font-line-height: 28px;
423
+ --wds-message-modal-title-font-size: 21px;
327
424
  --wds-mobile-modal-content-padding-horizontal: 24px;
328
425
  --wds-mobile-modal-content-padding-vertical: 24px;
329
426
  --wds-mobile-modal-footer-padding-horizontal: 24px;
330
427
  --wds-mobile-modal-footer-padding-vertical: 24px;
428
+ --wds-multiselect-icon-fill: #116dff;
429
+ --wds-notification-fill-error: #ff6d63;
430
+ --wds-notification-fill-premium: #c161f0;
431
+ --wds-notification-fill-standard: #5999ff;
432
+ --wds-notification-fill-success: #51b77b;
433
+ --wds-notification-fill-warning: #ffb700;
331
434
  --wds-notification-padding-horizontal: 12px;
332
435
  --wds-notification-padding-vertical: 9px;
436
+ --wds-number-input-icon-fill: #116dff;
333
437
  --wds-page-header-padding-horizontal: 48px;
334
438
  --wds-page-header-padding-vertical: 24px;
335
439
  --wds-page-header-padding-vertical-small: 18px;
@@ -341,6 +445,8 @@
341
445
  --wds-pagination-padding-vertical: 3px;
342
446
  --wds-palette-border: 6px;
343
447
  --wds-popover-border: 8px;
448
+ --wds-popover-menu-paddings-horizontal: 0;
449
+ --wds-popover-menu-paddings-vertical: 12px;
344
450
  --wds-radio-border: #116dff;
345
451
  --wds-radio-border-active: #116dff;
346
452
  --wds-radio-border-active-disabled: rgba(0, 6, 36, .1);
@@ -385,6 +491,7 @@
385
491
  --wds-search-border-radius-tiny: 1000px;
386
492
  --wds-section-header-padding-vertical: 9px;
387
493
  --wds-section-helper-border-preview: #868aa5;
494
+ --wds-section-helper-close-button-offset: 12px;
388
495
  --wds-section-helper-default-action-padding-medium: 12px;
389
496
  --wds-section-helper-default-action-padding-small: 9px;
390
497
  --wds-section-helper-default-border-radius: 6px;
@@ -396,11 +503,24 @@
396
503
  --wds-section-helper-fullwidth-vertical-padding-medium: 12px;
397
504
  --wds-section-helper-fullwidth-vertical-padding-small: 9px;
398
505
  --wds-section-helper-horizontal-margin: 6px;
506
+ --wds-section-helper-horizontal-padding-medium: 24px;
507
+ --wds-section-helper-horizontal-padding-small: 12px;
399
508
  --wds-section-helper-prefix-offset-margin: 6px;
509
+ --wds-section-helper-prefix-offset-medium: 18px;
400
510
  --wds-section-helper-text-font-line-height: 18px;
401
511
  --wds-section-helper-text-font-size: 14px;
512
+ --wds-section-helper-vertical-margin: 6px;
513
+ --wds-section-helper-vertical-padding-medium: 18px;
402
514
  --wds-segmented-toggle-border-radius-medium: 6px;
403
515
  --wds-segmented-toggle-border-radius-small: 6px;
516
+ --wds-segmented-toggle-default-fill-default: #000624;
517
+ --wds-segmented-toggle-default-fill-hover: #000624;
518
+ --wds-segmented-toggle-default-fill-selected: #000624;
519
+ --wds-segmented-toggle-default-fill-selected-disabled: rgba(0, 6, 36, .3);
520
+ --wds-segmented-toggle-fill-default: rgba(255, 255, 255, 0);
521
+ --wds-segmented-toggle-fill-hover: #e7f0ff;
522
+ --wds-segmented-toggle-fill-selected: rgba(255, 255, 255, 0);
523
+ --wds-segmented-toggle-fill-selected-disabled: rgba(255, 255, 255, 0);
404
524
  --wds-segmented-toggle-icononly-padding-horizontal-medium: 6px;
405
525
  --wds-segmented-toggle-icononly-padding-horizontal-small: 6px;
406
526
  --wds-segmented-toggle-icononly-padding-vertical-medium: 6px;
@@ -415,6 +535,8 @@
415
535
  --wds-segmented-toggle-padding-vertical-small: 6px;
416
536
  --wds-segmented-toggle-size-medium: 36px;
417
537
  --wds-segmented-toggle-size-small: 30px;
538
+ --wds-segmented-toggle-width-default: 1px;
539
+ --wds-segmented-toggle-width-selected: 2px;
418
540
  --wds-select-area-border-radius: 8px;
419
541
  --wds-select-area-fill: #f4f7ff;
420
542
  --wds-select-area-fill-active: #d6e6fe;
@@ -434,6 +556,11 @@
434
556
  --wds-selector-button-size-large: 42px;
435
557
  --wds-selector-button-size-medium: 36px;
436
558
  --wds-selector-button-size-small: 30px;
559
+ --wds-selector-list-item-padding-horizontal-medium: 24px;
560
+ --wds-selector-list-item-padding-horizontal-small: 18px;
561
+ --wds-selector-list-item-padding-vertical-medium: 12px;
562
+ --wds-selector-list-item-padding-vertical-small: 6px;
563
+ --wds-side-panel-back-button-top-padding: 0;
437
564
  --wds-side-panel-content-padding-horizontal: 24px;
438
565
  --wds-side-panel-content-padding-vertical: 24px;
439
566
  --wds-side-panel-control-layout-divider-border-width: 1px;
@@ -443,6 +570,11 @@
443
570
  --wds-side-panel-floating-header-padding-left: 24px;
444
571
  --wds-side-panel-floating-header-padding-right: 9px;
445
572
  --wds-side-panel-floating-header-padding-vertical: 12px;
573
+ --wds-side-panel-floating-max-height: 576px;
574
+ --wds-side-panel-floating-title-font-line-height: 24px;
575
+ --wds-side-panel-floating-title-font-size: 16px;
576
+ --wds-side-panel-footer-border-width: 0;
577
+ --wds-side-panel-footer-fill: #ffffff;
446
578
  --wds-side-panel-footer-padding-horizontal: 24px;
447
579
  --wds-side-panel-footer-padding-vertical: 18px;
448
580
  --wds-side-panel-footnote-padding-horizontal: 24px;
@@ -450,6 +582,10 @@
450
582
  --wds-side-panel-header-padding-left: 24px;
451
583
  --wds-side-panel-header-padding-right: 9px;
452
584
  --wds-side-panel-header-padding-vertical: 18px;
585
+ --wds-side-panel-title-font-letter-spacing: 0;
586
+ --wds-side-panel-title-font-line-height: 24px;
587
+ --wds-side-panel-title-font-size: 18px;
588
+ --wds-sidebar-clear-button-fill: #5a5d63;
453
589
  --wds-sidebar-divider-fill-dark-default: #42454C;
454
590
  --wds-sidebar-divider-fill-light-default: #cfd1dc;
455
591
  --wds-sidebar-divider-fill-neutral-default: #cfd1dc;
@@ -513,17 +649,26 @@
513
649
  --wds-skeleton-border-radius-circle: 1000px;
514
650
  --wds-skeleton-border-radius-line: 1000px;
515
651
  --wds-skeleton-border-radius-rectangle: 6px;
652
+ --wds-slider-slider-knob-border-width: 4px;
653
+ --wds-slider-slider-knob-border-width-hover: 12px;
654
+ --wds-slider-slider-knob-color: #116dff;
655
+ --wds-slider-slider-knob-color-hover: #116dff;
656
+ --wds-slider-slider-knob-shadow: false;
516
657
  --wds-slider-slider-knob-size: 12px;
658
+ --wds-slider-slider-knob-size-hover: 18px;
517
659
  --wds-slider-slider-knob-size-transparent: 16px;
518
660
  --wds-slider-slider-mark-size: 6px;
519
661
  --wds-slider-track-border-border-radius: 1000px;
520
662
  --wds-slider-track-border-radius-transparent: 1000px;
663
+ --wds-slider-track-color: #d6e6fe;
521
664
  --wds-slider-track-size: 4px;
522
665
  --wds-slider-track-size-transparent: 8px;
523
666
  --wds-social-post-preview-content-padding-horizontal: 12px;
524
667
  --wds-social-post-preview-content-padding-vertical: 12px;
525
668
  --wds-social-preview-content-padding-horizontal: 12px;
526
669
  --wds-social-preview-content-padding-vertical: 9px;
670
+ --wds-status-toast-text-font-line-height: 24px;
671
+ --wds-status-toast-text-font-size: 16px;
527
672
  --wds-stepper-prefix-size-circle: 30px;
528
673
  --wds-stepper-prefix-size-number: 24px;
529
674
  --wds-swatches-list-gap: 12px;
@@ -533,11 +678,18 @@
533
678
  --wds-swatches-swatch-active-border-radius-small: 5px;
534
679
  --wds-swatches-swatch-border-radius-medium: 6px;
535
680
  --wds-swatches-swatch-border-radius-small: 2px;
681
+ --wds-swatches-swatch-size-extra-tiny: 18px;
536
682
  --wds-swatches-swatch-size-large: 42px;
537
683
  --wds-swatches-swatch-size-medium: 36px;
538
684
  --wds-swatches-swatch-size-small: 30px;
539
685
  --wds-swatches-swatch-size-tiny: 24px;
540
686
  --wds-swatches-swatch-size-x-tiny: 18px;
687
+ --wds-table-toolbar-padding-horizontal: 24px;
688
+ --wds-table-list-item-border-radius: 0;
689
+ --wds-table-list-item-gap: 24px;
690
+ --wds-table-list-item-indentation-level-2: 12px;
691
+ --wds-table-list-item-indentation-level-3: 36px;
692
+ --wds-table-list-item-paddings: 0;
541
693
  --wds-tabs-gap-medium: 6px;
542
694
  --wds-tabs-gap-small: 6px;
543
695
  --wds-tabs-label-font-size-small: 14px;
@@ -550,6 +702,8 @@
550
702
  --wds-tag-border-radius-medium: 1000px;
551
703
  --wds-tag-border-radius-small: 1000px;
552
704
  --wds-tag-border-radius-tiny: 1000px;
705
+ --wds-tag-label-font-line-height-small: 18px;
706
+ --wds-tag-label-font-size-small: 14px;
553
707
  --wds-tag-padding-horizontal-large: 18px;
554
708
  --wds-tag-padding-horizontal-medium: 12px;
555
709
  --wds-tag-padding-horizontal-small: 12px;
@@ -564,7 +718,27 @@
564
718
  --wds-tag-size-tiny: 18px;
565
719
  --wds-testimonial-list-gap: 30px;
566
720
  --wds-thumbnail-border-radius: 6px;
721
+ --wds-thumbnail-border-width-default: 1;
722
+ --wds-thumbnail-fill: rgba(255, 255, 255, 0);
723
+ --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
567
724
  --wds-thumbnail-gap: 12px;
725
+ --wds-thumbnail-illustration-fill-1: #80b1ff;
726
+ --wds-thumbnail-illustration-fill-2: #116dff;
727
+ --wds-thumbnail-illustration-fill-3: #e7f0ff;
728
+ --wds-thumbnail-subtitle-fill: #44485f;
729
+ --wds-thumbnail-subtitle-font-line-height-tiny: 18px;
730
+ --wds-thumbnail-subtitle-font-size-tiny: 14px;
731
+ --wds-thumbnail-title-font-line-height-tiny: 18px;
732
+ --wds-thumbnail-title-font-size-tiny: 14px;
733
+ --wds-thumbnail-title-font-weight-tiny: 400;
734
+ --wds-thumbnail-title-padding-top: 6px;
735
+ --wds-timeline-title-font-line-height: 18px;
736
+ --wds-timeline-title-font-size: 14px;
737
+ --wds-toggle-button-border-radius-square-large: 6px;
738
+ --wds-toggle-button-border-radius-square-medium: 6px;
739
+ --wds-toggle-button-border-radius-square-small: 4px;
740
+ --wds-toggle-button-border-radius-square-tiny: 4px;
741
+ --wds-toggle-button-label-font-weight: 400;
568
742
  --wds-toggle-button-padding-left-large: 9px;
569
743
  --wds-toggle-button-padding-left-large-round: 12px;
570
744
  --wds-toggle-button-padding-left-medium: 6px;
@@ -605,6 +779,7 @@
605
779
  --wds-toggle-switch-fill-urgent-active-hover: #f05300;
606
780
  --wds-toggle-switch-fill-urgent-disabled: rgba(0, 6, 36, .1);
607
781
  --wds-toggle-switch-fill-urgent-hover: #fcbd9c;
782
+ --wds-toggle-switch-icon: true;
608
783
  --wds-toggle-switch-knob-size-large: 22px;
609
784
  --wds-toggle-switch-knob-size-medium: 18px;
610
785
  --wds-toggle-switch-knob-size-small: 14px;
@@ -615,6 +790,7 @@
615
790
  --wds-toggle-switch-width-medium: 34px;
616
791
  --wds-toggle-switch-width-small: 28px;
617
792
  --wds-tooltip-background-fill: #000624;
793
+ --wds-tooltip-border-radius: #ffffff;
618
794
  --wds-tooltip-border-radius-medium: 8px;
619
795
  --wds-tooltip-border-radius-small: 8px;
620
796
  --wds-tooltip-padding-horizontal-medium: 24px;
@@ -636,6 +812,7 @@
636
812
  --wds-vertical-tabs-icon-padding-horizontal-small: 12px;
637
813
  --wds-vertical-tabs-icon-padding-vertical-medium: 12px;
638
814
  --wds-vertical-tabs-icon-padding-vertical-small: 12px;
815
+ --wds-vertical-tabs-item-active-title-text-disabled: rgba(0, 6, 36, .3);
639
816
  --wds-vertical-tabs-item-fill-light: #ffffff;
640
817
  --wds-vertical-tabs-item-fill-light-active: #d6e6fe;
641
818
  --wds-vertical-tabs-item-fill-light-disabled: #ffffff;
@@ -671,6 +848,16 @@
671
848
  --wds-vertical-tabs-item-padding-vertical-medium: 12px;
672
849
  --wds-vertical-tabs-item-padding-vertical-small: 12px;
673
850
  --wds-vertical-tabs-item-padding-vertical-tiny: 6px;
851
+ --wds-vertical-tabs-item-pill-fill-premium-disabled: #f6f7f9;
852
+ --wds-vertical-tabs-item-pill-fill-standard: #f6f7f9;
853
+ --wds-vertical-tabs-item-pill-fill-standard-disabled: #f6f7f9;
854
+ --wds-vertical-tabs-item-round-disabled: #f6f7f9;
855
+ --wds-vertical-tabs-item-round-fill-hover: #f6f7f9;
856
+ --wds-vertical-tabs-item-round-fill-premium-active: #f6f7f9;
857
+ --wds-vertical-tabs-item-round-fill-premium-disabled: #f6f7f9;
858
+ --wds-vertical-tabs-item-round-fill-premium-hover: #f6f7f9;
859
+ --wds-vertical-tabs-item-round-padding-bottom-tiny: 3px;
860
+ --wds-vertical-tabs-item-round-padding-top-tiny: 0;
674
861
  --wds-vertical-tabs-section-text-font-line-height-small: 18px;
675
862
  --wds-vertical-tabs-section-text-font-size-small: 14px;
676
863
  --wds-vertical-tabs-section-text-font-weight-small: 400;
@@ -683,6 +870,7 @@
683
870
  --wds-vertical-tabs-section-title-padding-top-medium: 24px;
684
871
  --wds-vertical-tabs-section-title-padding-top-small: 18px;
685
872
  --wds-vertical-tabs-section-title-padding-top-tiny: 6px;
873
+ --wds-background-blur-100: 0;
686
874
  --wds-border-radius-0: 0;
687
875
  --wds-border-radius-100: 2px;
688
876
  --wds-border-radius-200: 4px;
@@ -719,6 +907,10 @@
719
907
  --wds-color-black-200-transparent-50: rgba(68, 72, 95, .5);
720
908
  --wds-color-black-200-transparent-60: rgba(68, 72, 95, .6);
721
909
  --wds-color-black-200-transparent-70: rgba(68, 72, 95, .7);
910
+ --wds-color-black-300-transparent-0: rgba(134, 138, 165, 0.0000);
911
+ --wds-color-black-300-transparent-50: rgba(134, 138, 165, 0.5000);
912
+ --wds-color-black-300-transparent-60: rgba(134, 138, 165, 0.6000);
913
+ --wds-color-black-300-transparent-70: rgba(134, 138, 165, 0.7000);
722
914
  --wds-color-black-700-transparent-0: #eceff300;
723
915
  --wds-color-blue-0: #084ebd;
724
916
  --wds-color-blue-50: #0f62e6;
@@ -791,6 +983,9 @@
791
983
  --wds-color-yellow-500: #fff0d1;
792
984
  --wds-color-yellow-600: #fff6e5;
793
985
  --wds-color-border-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
986
+ --wds-color-border-ai-primary-active: #ffffff;
987
+ --wds-color-border-ai-primary-disabled: #ffffff;
988
+ --wds-color-border-ai-primary-hover: #ffffff;
794
989
  --wds-color-border-dark-primary: #868aa5;
795
990
  --wds-color-border-dark-primary-active: #44485f;
796
991
  --wds-color-border-dark-primary-disabled: rgba(0, 6, 36, .1);
@@ -892,10 +1087,13 @@
892
1087
  --wds-color-fill-accent-10: #1F8845;
893
1088
  --wds-color-fill-accent-11: #ACAFC4;
894
1089
  --wds-color-fill-accent-12: #ACAFC4;
1090
+ --wds-color-fill-ai: #ffffff;
1091
+ --wds-color-fill-ai-hover: #ffffff;
895
1092
  --wds-color-fill-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
896
1093
  --wds-color-fill-ai-primary-active: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
897
1094
  --wds-color-fill-ai-primary-disabled: rgba(0, 6, 36, .3);
898
1095
  --wds-color-fill-ai-primary-hover: linear-gradient(81deg, #0021FF -177.08%, #116DFF 31.96%, #5FF2AE 99.97%);
1096
+ --wds-color-fill-ai-primary-pressed: #ffffff;
899
1097
  --wds-color-fill-ai-secondary: #d6d1fc;
900
1098
  --wds-color-fill-ai-secondary-active: #d6d1fc;
901
1099
  --wds-color-fill-ai-secondary-disabled: rgba(0, 6, 36, .1);
@@ -984,6 +1182,46 @@
984
1182
  --wds-color-fill-social-youtube-active: #ff0000;
985
1183
  --wds-color-fill-social-youtube-disabled: rgba(0, 6, 36, .3);
986
1184
  --wds-color-fill-social-youtube-hover: rgba(255, 0, 0, .8);
1185
+ --wds-color-fill-stage-anchor: #5effff;
1186
+ --wds-color-fill-stage-anchor-active: #5effff;
1187
+ --wds-color-fill-stage-anchor-disabled: rgba(0, 6, 36, .3);
1188
+ --wds-color-fill-stage-anchor-hover: #18d2de;
1189
+ --wds-color-fill-stage-cms: #2d3034;
1190
+ --wds-color-fill-stage-cms-active: #2d3034;
1191
+ --wds-color-fill-stage-cms-disabled: rgba(0, 6, 36, .3);
1192
+ --wds-color-fill-stage-cms-hover: #2d3034;
1193
+ --wds-color-fill-stage-element-primary: #116dff;
1194
+ --wds-color-fill-stage-element-primary-active: #084ebd;
1195
+ --wds-color-fill-stage-element-primary-disabled: rgba(0, 6, 36, .3);
1196
+ --wds-color-fill-stage-element-primary-hover: #0f62e6;
1197
+ --wds-color-fill-stage-element-secondary: #d6e6fe;
1198
+ --wds-color-fill-stage-element-secondary-active: #5999ff;
1199
+ --wds-color-fill-stage-element-secondary-disabled: rgba(0, 6, 36, .1);
1200
+ --wds-color-fill-stage-element-secondary-hover: #a8caff;
1201
+ --wds-color-fill-stage-interactions: #ff5c9f;
1202
+ --wds-color-fill-stage-interactions-active: #ff5c9f;
1203
+ --wds-color-fill-stage-interactions-disabled: rgba(0, 6, 36, .3);
1204
+ --wds-color-fill-stage-interactions-hover: #ff5c9f;
1205
+ --wds-color-fill-stage-master-primary: #fe620f;
1206
+ --wds-color-fill-stage-master-primary-active: #fe620f;
1207
+ --wds-color-fill-stage-master-primary-disabled: rgba(0, 6, 36, .3);
1208
+ --wds-color-fill-stage-master-primary-hover: #bf5727;
1209
+ --wds-color-fill-stage-master-secondary: #fddbc8;
1210
+ --wds-color-fill-stage-master-secondary-active: #ff7d38;
1211
+ --wds-color-fill-stage-master-secondary-disabled: rgba(0, 6, 36, .1);
1212
+ --wds-color-fill-stage-master-secondary-hover: #fcbd9c;
1213
+ --wds-color-fill-stage-padding: #18d9c2;
1214
+ --wds-color-fill-stage-padding-active: #18d9c2;
1215
+ --wds-color-fill-stage-padding-disabled: rgba(0, 6, 36, .3);
1216
+ --wds-color-fill-stage-padding-hover: #18d9c2;
1217
+ --wds-color-fill-stage-section-primary: #6f56f9;
1218
+ --wds-color-fill-stage-section-primary-active: #6f56f9;
1219
+ --wds-color-fill-stage-section-primary-disabled: rgba(0, 6, 36, .3);
1220
+ --wds-color-fill-stage-section-primary-hover: #6f56f9;
1221
+ --wds-color-fill-stage-section-secondary: #d9d2ff;
1222
+ --wds-color-fill-stage-section-secondary-active: #d9d2ff;
1223
+ --wds-color-fill-stage-section-secondary-disabled: rgba(0, 6, 36, .1);
1224
+ --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
987
1225
  --wds-color-fill-standard-primary: #116dff;
988
1226
  --wds-color-fill-standard-primary-active: #084ebd;
989
1227
  --wds-color-fill-standard-primary-disabled: rgba(0, 6, 36, .3);
@@ -1039,6 +1277,22 @@
1039
1277
  --wds-color-fill-transparent-secondary-active: rgba(68, 72, 95, .7);
1040
1278
  --wds-color-fill-transparent-secondary-disabled: rgba(68, 72, 95, 0);
1041
1279
  --wds-color-fill-transparent-secondary-hover: rgba(68, 72, 95, .6);
1280
+ --wds-color-fill-transparent-tertiary: rgba(0, 6, 36, 0);
1281
+ --wds-color-fill-transparent-tertiary-active: rgba(0, 6, 36, .5);
1282
+ --wds-color-fill-transparent-tertiary-disabled: rgba(0, 6, 36, 0);
1283
+ --wds-color-fill-transparent-tertiary-hover: rgba(0, 6, 36, .5);
1284
+ --wds-color-fill-transparent-neutral-primary: rgba(134, 138, 165, 0.5000);
1285
+ --wds-color-fill-transparent-neutral-primary-active: rgba(134, 138, 165, 0.7000);
1286
+ --wds-color-fill-transparent-neutral-primary-disabled: rgba(0, 6, 36, .2);
1287
+ --wds-color-fill-transparent-neutral-primary-hover: rgba(134, 138, 165, 0.6000);
1288
+ --wds-color-fill-transparent-neutral-secondary: rgba(134, 138, 165, 0.0000);
1289
+ --wds-color-fill-transparent-neutral-secondary-active: rgba(134, 138, 165, 0.7000);
1290
+ --wds-color-fill-transparent-neutral-secondary-disabled: rgba(68, 72, 95, 0);
1291
+ --wds-color-fill-transparent-neutral-secondary-hover: rgba(134, 138, 165, 0.6000);
1292
+ --wds-color-fill-transparent-neutral-tertiary: rgba(0, 6, 36, 0);
1293
+ --wds-color-fill-transparent-neutral-tertiary-active: rgba(0, 6, 36, .5);
1294
+ --wds-color-fill-transparent-neutral-tertiary-disabled: rgba(0, 6, 36, 0);
1295
+ --wds-color-fill-transparent-neutral-tertiary-hover: rgba(0, 6, 36, .5);
1042
1296
  --wds-color-fill-urgent-primary: #fe620f;
1043
1297
  --wds-color-fill-urgent-primary-active: #df4d00;
1044
1298
  --wds-color-fill-urgent-primary-disabled: rgba(0, 6, 36, .3);
@@ -1070,6 +1324,9 @@
1070
1324
  --wds-color-text-placeholder-light: #868aa5;
1071
1325
  --wds-color-text-premium: #9a27d5;
1072
1326
  --wds-color-text-primary: #116dff;
1327
+ --wds-color-text-stage-element: #116dff;
1328
+ --wds-color-text-stage-master: #fe620f;
1329
+ --wds-color-text-stage-section: #6f56f9;
1073
1330
  --wds-color-text-standard-primary: #000624;
1074
1331
  --wds-color-text-standard-primary-light: #ffffff;
1075
1332
  --wds-color-text-standard-secondary: #44485f;
@@ -1078,6 +1335,7 @@
1078
1335
  --wds-color-text-urgent: #fe620f;
1079
1336
  --wds-color-text-warning: #ffb700;
1080
1337
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1338
+ --wds-font-family-heading: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1081
1339
  --wds-font-letter-spacing-0: 0;
1082
1340
  --wds-font-letter-spacing-100: 1px;
1083
1341
  --wds-font-letter-spacing-heading-1: 0;
@@ -1123,16 +1381,23 @@
1123
1381
  --wds-font-weight-bold: 700;
1124
1382
  --wds-font-weight-medium: 500;
1125
1383
  --wds-font-weight-regular: 400;
1384
+ --wds-font-weight-semi-bold: 600;
1126
1385
  --wds-font-weight-heading-1: 700;
1127
1386
  --wds-font-weight-heading-2: 700;
1128
1387
  --wds-font-weight-heading-3: 700;
1129
1388
  --wds-font-weight-heading-4: 500;
1130
1389
  --wds-font-weight-heading-5: 400;
1131
1390
  --wds-font-weight-heading-6: 400;
1391
+ --wds-font-weight-body-bold: 700;
1132
1392
  --wds-shadow-100: 0 0 3px rgba(0, 6, 36, .1), 0 2px 1px rgba(0, 6, 36, .5);
1133
1393
  --wds-shadow-200: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
1134
1394
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
1135
1395
  --wds-shadow-400: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
1396
+ --wds-shadow-blur-50: 3px;
1397
+ --wds-shadow-blur-100: 6px;
1398
+ --wds-shadow-blur-150: 6px;
1399
+ --wds-shadow-blur-200: 18px;
1400
+ --wds-shadow-blur-400: 24px;
1136
1401
  --wds-shadow-inner-100: 1px 1px 2px rgba(0, 6, 36, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
1137
1402
  --wds-shadow-inner-200: 1px 1px 4px rgba(0, 6, 36, .2) inset;
1138
1403
  --wds-shadow-inner-300: 0 0 18px rgba(0, 6, 36, .1) inset, 0 0 6px rgba(0, 6, 36, .05) inset;
@@ -1149,12 +1414,24 @@
1149
1414
  --wds-shadow-inner-400-right: -32px 0 24px -24px rgba(0, 6, 36, .2) inset, -8px 0 6px -6px rgba(0, 6, 36, .05) inset;
1150
1415
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(0, 6, 36, .2) inset, 0 8px 6px -6px rgba(0, 6, 36, .05) inset;
1151
1416
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset, 0 -22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset;
1417
+ --wds-shadow-y-100: 0;
1418
+ --wds-shadow-y-200: 0;
1419
+ --wds-shadow-y-300: 0;
1420
+ --wds-shadow-y-350: 3px;
1421
+ --wds-shadow-fill-primary-modal: rgba(0, 6, 36, .2);
1422
+ --wds-shadow-fill-primary-overlay: rgba(0, 6, 36, .1);
1423
+ --wds-shadow-fill-primary-raised: rgba(0, 6, 36, .1);
1424
+ --wds-shadow-fill-secondary-modal: rgba(0, 6, 36, .1);
1425
+ --wds-shadow-fill-secondary-overlay: rgba(0, 6, 36, .05);
1426
+ --wds-shadow-fill-secondary-raised: rgba(0, 6, 36, .05);
1427
+ --wds-shadow-fill-secondary-toggle: rgba(0, 6, 36, .5);
1152
1428
  --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
1153
1429
  --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
1154
1430
  --wds-shadow-focus-inner-standard: 0 0 0 3px #a8caff inset;
1155
1431
  --wds-shadow-focus-inner-warning: 0 0 0 3px #ffe2a5 inset;
1156
1432
  --wds-shadow-focus-standard: 0 0 0 3px #a8caff;
1157
1433
  --wds-shadow-focus-warning: 0 0 0 3px #ffe2a5;
1434
+ --wds-shadow-focus-spread: 3;
1158
1435
  --wds-shadow-surface-modal: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
1159
1436
  --wds-shadow-surface-overlay: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
1160
1437
  --wds-shadow-surface-overlay-dark: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
@@ -1167,14 +1444,18 @@
1167
1444
  --wds-space-200: 12px;
1168
1445
  --wds-space-250: 15px;
1169
1446
  --wds-space-300: 18px;
1447
+ --wds-space-350: 21px;
1170
1448
  --wds-space-400: 24px;
1171
1449
  --wds-space-475: 28px;
1172
1450
  --wds-space-500: 30px;
1173
1451
  --wds-space-600: 36px;
1174
1452
  --wds-space-700: 42px;
1175
1453
  --wds-space-800: 48px;
1454
+ --wds-space-850: 51px;
1176
1455
  --wds-space-900: 54px;
1456
+ --wds-space-950: 57px;
1177
1457
  --wds-space-1000: 60px;
1458
+ --wds-space-1050: 63px;
1178
1459
  --wds-space-1100: 66px;
1179
1460
  --wds-space-1200: 72px;
1180
1461
  --wds-space-1300: 78px;
@@ -1197,5 +1478,10 @@
1197
1478
  --wds-space-padding-vertical-xx-tiny: 3px;
1198
1479
  --wds-border-radius-surface-default: 8px;
1199
1480
  --wds-border-radius-surface-modal: 8px;
1481
+ --wds-border-radius-surface-modal-backdrop: 0;
1200
1482
  --wds-border-radius-surface-overlay: 8px;
1483
+ --wds-border-radius-surface-raised: 8px;
1484
+ --wds-border-radius-surface-sunken: 0;
1485
+ --wds-width-default: 1px;
1486
+ --wds-width-default-2: 1px;
1201
1487
  }