@wix/design-system-tokens 1.122.0 → 1.124.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 (24) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +16 -0
  3. package/all.css +71 -19
  4. package/all.scss +81 -21
  5. package/all.st.css +140 -36
  6. package/component.st.css +138 -36
  7. package/foundation.st.css +2 -0
  8. package/odeditor/all.css +98 -22
  9. package/odeditor/all.scss +119 -34
  10. package/odeditor/all.st.css +174 -22
  11. package/odeditor/component.st.css +172 -22
  12. package/odeditor/foundation.st.css +2 -0
  13. package/package.json +4 -4
  14. package/studio/all.css +74 -30
  15. package/studio/all.scss +84 -32
  16. package/studio/all.st.css +144 -56
  17. package/studio/component.st.css +142 -56
  18. package/studio/foundation.st.css +2 -0
  19. package/wixel/all.css +81 -37
  20. package/wixel/all.scss +91 -39
  21. package/wixel/all.st.css +354 -266
  22. package/wixel/component.st.css +296 -210
  23. package/wixel/foundation.st.css +11 -9
  24. package/wixel/semantic.st.css +47 -47
package/odeditor/all.scss CHANGED
@@ -7,6 +7,21 @@
7
7
  --wds-toggle-switch-knob-size-medium: 14px;
8
8
  --wds-toggle-switch-knob-size-large: 20px;
9
9
  --wds-toggle-switch-icon: false;
10
+ --wds-toggle-button-shadow-y-tertiary-inverted: 4px;
11
+ --wds-toggle-button-shadow-y-tertiary: 0.4px;
12
+ --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
13
+ --wds-toggle-button-shadow-y-secondary: 1.2px;
14
+ --wds-toggle-button-shadow-y-primary-inverted: 5px;
15
+ --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
16
+ --wds-toggle-button-shadow-x-tertiary: 0.4px;
17
+ --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
18
+ --wds-toggle-button-shadow-x-secondary: 1.2px;
19
+ --wds-toggle-button-shadow-x-primary-inverted: -8px;
20
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
21
+ --wds-toggle-button-shadow-blur-tertiary: 0.6px;
22
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
23
+ --wds-toggle-button-shadow-blur-secondary: 1.7px;
24
+ --wds-toggle-button-shadow-blur-primary-inverted: 30px;
10
25
  --wds-thumbnail-checkmark: true;
11
26
  --wds-tabs-selection-height: 3px;
12
27
  --wds-swatches-swatch-active-border-radius-small: 5px;
@@ -289,6 +304,7 @@
289
304
  --wds-color-black-100-transparent-50: rgba(19, 23, 32, .5);
290
305
  --wds-color-black-100-transparent-40: rgba(19, 23, 32, .4);
291
306
  --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
307
+ --wds-color-black-100-transparent-25: rgba(19, 23, 32, .25);
292
308
  --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
293
309
  --wds-color-black-100-transparent-15: rgba(19, 23, 32, .15);
294
310
  --wds-color-black-100-transparent-10: rgba(19, 23, 32, .1);
@@ -369,21 +385,68 @@
369
385
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
370
386
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
371
387
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
388
+ --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-100);
389
+ --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-25);
390
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-10);
391
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-25);
392
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-300-transparent-20);
393
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-15);
394
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-5);
395
+ --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-5);
396
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-50);
372
397
  --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
373
- --wds-toggle-button-padding-tiny: var(--wds-space-150);
398
+ --wds-toggle-button-padding-tiny: var(--wds-space-300);
374
399
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
375
- --wds-toggle-button-padding-small: var(--wds-space-300);
376
- --wds-toggle-button-padding-medium-round: var(--wds-space-400);
377
- --wds-toggle-button-padding-medium: var(--wds-space-300);
378
- --wds-toggle-button-padding-large-round: var(--wds-space-400);
379
- --wds-toggle-button-padding-large: var(--wds-space-400);
380
- --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
381
- --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
400
+ --wds-toggle-button-padding-small: var(--wds-space-400);
401
+ --wds-toggle-button-padding-medium-round: var(--wds-space-500);
402
+ --wds-toggle-button-padding-medium: var(--wds-space-500);
403
+ --wds-toggle-button-padding-large-round: var(--wds-space-600);
404
+ --wds-toggle-button-padding-large: var(--wds-space-600);
405
+ --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-semi-bold);
406
+ --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-semi-bold);
382
407
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-semi-bold);
383
- --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-200);
384
- --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-0);
385
- --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-0);
386
- --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-0);
408
+ --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-black-500);
409
+ --wds-toggle-button-label-fill-standard-hover: var(--wds-color-blue-50);
410
+ --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-black-500);
411
+ --wds-toggle-button-label-fill-inverted-selected-disabled: var(--wds-color-black-500);
412
+ --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-black-500);
413
+ --wds-toggle-button-label-fill-dark-selected-disabled: var(--wds-color-black-500);
414
+ --wds-toggle-button-label-fill-dark-disabled: var(--wds-color-black-500);
415
+ --wds-toggle-button-inner-shadow-y-secondary: var(--wds-shadow-y-25);
416
+ --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-25);
417
+ --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-25);
418
+ --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-25);
419
+ --wds-toggle-button-inner-shadow-fill-secondary: var(--wds-color-white);
420
+ --wds-toggle-button-inner-shadow-fill-primary: var(--wds-color-white);
421
+ --wds-toggle-button-inner-shadow-blur-secondary: var(--wds-shadow-blur-25);
422
+ --wds-toggle-button-inner-shadow-blur-primary: var(--wds-shadow-blur-25);
423
+ --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-blue-400);
424
+ --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-black-700);
425
+ --wds-toggle-button-fill-standard-selected: var(--wds-color-blue-500);
426
+ --wds-toggle-button-fill-standard-hover: var(--wds-color-black-100-transparent-0);
427
+ --wds-toggle-button-fill-standard-disabled: var(--wds-color-black-100-transparent-0);
428
+ --wds-toggle-button-fill-standard: var(--wds-color-black-100-transparent-0);
429
+ --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-black-700);
430
+ --wds-toggle-button-fill-inverted-disabled: var(--wds-color-black-100-transparent-0);
431
+ --wds-toggle-button-fill-inverted: var(--wds-color-black-100-transparent-0);
432
+ --wds-toggle-button-fill-dark-selected-hover: var(--wds-color-black-500);
433
+ --wds-toggle-button-fill-dark-selected-disabled: var(--wds-color-black-700);
434
+ --wds-toggle-button-fill-dark-selected: var(--wds-color-black-550);
435
+ --wds-toggle-button-fill-dark-disabled: var(--wds-color-black-100-transparent-0);
436
+ --wds-toggle-button-fill-dark: var(--wds-color-black-100-transparent-0);
437
+ --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
438
+ --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-400);
439
+ --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-400);
440
+ --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-400);
441
+ --wds-toggle-button-border-color-standard-hover: var(--wds-color-blue-300);
442
+ --wds-toggle-button-border-color-standard-disabled: var(--wds-color-white-transparent-0);
443
+ --wds-toggle-button-border-color-standard: var(--wds-color-white-transparent-0);
444
+ --wds-toggle-button-border-color-inverted-hover: var(--wds-color-white-transparent-0);
445
+ --wds-toggle-button-border-color-inverted-disabled: var(--wds-color-white-transparent-0);
446
+ --wds-toggle-button-border-color-inverted: var(--wds-color-white-transparent-0);
447
+ --wds-toggle-button-border-color-dark-hover: var(--wds-color-white-transparent-0);
448
+ --wds-toggle-button-border-color-dark-disabled: var(--wds-color-white-transparent-0);
449
+ --wds-toggle-button-border-color-dark: var(--wds-color-white-transparent-0);
387
450
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
388
451
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-medium);
389
452
  --wds-thumbnail-illustration-fill-3: var(--wds-color-blue-500);
@@ -413,12 +476,21 @@
413
476
  --wds-tag-border-radius-small: var(--wds-border-radius-200);
414
477
  --wds-tag-border-radius-medium: var(--wds-border-radius-200);
415
478
  --wds-tag-border-radius-large: var(--wds-border-radius-200);
416
- --wds-tabs-padding-vertical-small: var(--wds-space-300);
417
- --wds-tabs-padding-vertical-medium: var(--wds-space-400);
418
- --wds-tabs-padding-horizontal-small: var(--wds-space-300);
479
+ --wds-tabs-selection-fill-secondary: var(--wds-color-black-100-transparent-0);
480
+ --wds-tabs-selection-fill-primary: var(--wds-color-black-100-transparent-0);
481
+ --wds-tabs-selection-border: var(--wds-color-black-100-transparent-0);
482
+ --wds-tabs-padding-vertical-small: var(--wds-space-100);
483
+ --wds-tabs-padding-vertical-medium: var(--wds-space-200);
484
+ --wds-tabs-padding-horizontal-small: var(--wds-space-200);
419
485
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
420
- --wds-tabs-gap-small: var(--wds-space-150);
421
- --wds-tabs-gap-medium: var(--wds-space-200);
486
+ --wds-tabs-label-font-weight-active: var(--wds-font-weight-semi-bold);
487
+ --wds-tabs-label-font-weight: var(--wds-font-weight-medium);
488
+ --wds-tabs-label-fill: var(--wds-color-black-300);
489
+ --wds-tabs-item-gap-small: var(--wds-space-150);
490
+ --wds-tabs-item-gap-medium: var(--wds-space-200);
491
+ --wds-tabs-item-fill-hover: var(--wds-color-black-750);
492
+ --wds-tabs-gap-horizontal: var(--wds-space-100);
493
+ --wds-tabs-border-radius: var(--wds-border-radius-300);
422
494
  --wds-table-toolbar-padding-horizontal: var(--wds-space-600);
423
495
  --wds-table-list-item-paddings: var(--wds-space-0);
424
496
  --wds-table-list-item-indentation-level-3: var(--wds-space-700);
@@ -1392,15 +1464,25 @@
1392
1464
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1393
1465
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1394
1466
  --wds-toggle-switch-fill-error: var(--wds-color-fill-dark-primary);
1467
+ --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1468
+ --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1469
+ --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1470
+ --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1395
1471
  --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-tiny);
1396
- --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-standard-primary);
1397
- --wds-toggle-button-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
1398
- --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-standard-primary-hover);
1399
- --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1400
- --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-standard-primary);
1401
- --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
1402
- --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1403
- --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-tertiary);
1472
+ --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1473
+ --wds-toggle-button-label-fill-standard: var(--wds-color-text-standard-primary);
1474
+ --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary);
1475
+ --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary);
1476
+ --wds-toggle-button-label-fill-inverted-hover: var(--wds-color-text-standard-primary);
1477
+ --wds-toggle-button-label-fill-inverted: var(--wds-color-text-standard-primary);
1478
+ --wds-toggle-button-label-fill-dark-selected-hover: var(--wds-color-text-standard-primary);
1479
+ --wds-toggle-button-label-fill-dark-selected: var(--wds-color-text-standard-primary);
1480
+ --wds-toggle-button-label-fill-dark-hover: var(--wds-color-text-standard-primary);
1481
+ --wds-toggle-button-label-fill-dark-default: var(--wds-color-text-standard-primary);
1482
+ --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-dark-tertiary-hover);
1483
+ --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-dark-tertiary);
1484
+ --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-dark-secondary-hover);
1485
+ --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-dark-secondary-hover);
1404
1486
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1405
1487
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1406
1488
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1411,9 +1493,9 @@
1411
1493
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1412
1494
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1413
1495
  --wds-tag-label-font-line-height-small: var(--wds-font-size-body-tiny);
1414
- --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1415
- --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1416
- --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1496
+ --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1497
+ --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1498
+ --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1417
1499
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1418
1500
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1419
1501
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
@@ -1616,9 +1698,9 @@
1616
1698
  --wds-font-line-height-heading-3: var(--wds-font-line-height-400);
1617
1699
  --wds-font-line-height-heading-2: var(--wds-font-line-height-400);
1618
1700
  --wds-font-line-height-heading-1: var(--wds-font-line-height-500);
1619
- --wds-font-line-height-body-tiny: var(--wds-font-line-height-100);
1620
- --wds-font-line-height-body-small: var(--wds-font-line-height-200);
1621
- --wds-font-line-height-body-medium: var(--wds-font-line-height-300);
1701
+ --wds-font-line-height-body-tiny: var(--wds-font-line-height-200);
1702
+ --wds-font-line-height-body-small: var(--wds-font-line-height-300);
1703
+ --wds-font-line-height-body-medium: var(--wds-font-line-height-400);
1622
1704
  --wds-font-line-height-body-extra-tiny: var(--wds-font-line-height-100);
1623
1705
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1624
1706
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
@@ -1654,6 +1736,8 @@
1654
1736
  --wds-circular-progress-bar-background-fill-premium: var(--wds-color-fill-premium-secondary-disabled);
1655
1737
  --wds-circular-progress-bar-background-fill-error: var(--wds-color-fill-destructive-secondary-disabled);
1656
1738
  --wds-checkbox-label-font-size-small: var(--wds-font-size-body-tiny);
1739
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-small);
1740
+ --wds-checkbox-label-disabled: var(--wds-color-text-disabled);
1657
1741
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled-light);
1658
1742
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1659
1743
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-tertiary);
@@ -1664,7 +1748,7 @@
1664
1748
  --wds-checkbox-fill: var(--wds-color-fill-standard-tertiary);
1665
1749
  --wds-checkbox-border-hover: var(--wds-color-fill-standard-primary);
1666
1750
  --wds-checkbox-border-disabled: var(--wds-color-border-dark-primary-disabled);
1667
- --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1751
+ --wds-checkbox-border-active: var(--wds-color-border-standard-primary-active);
1668
1752
  --wds-checkbox-border: var(--wds-color-border-dark-primary);
1669
1753
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-medium);
1670
1754
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
@@ -1757,7 +1841,7 @@
1757
1841
  --wds-timeline-title-font-line-height: var(--wds-font-line-height-body-tiny);
1758
1842
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1759
1843
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1760
- --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
1844
+ --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
1761
1845
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
1762
1846
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
1763
1847
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-heading-3);
@@ -1785,7 +1869,8 @@
1785
1869
  --wds-field-set-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1786
1870
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-small);
1787
1871
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
1788
- --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-extra-tiny);
1872
+ --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1873
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-small);
1789
1874
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
1790
1875
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
1791
1876
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/odeditor/all.st.css CHANGED
@@ -278,7 +278,10 @@
278
278
  @property st-global(--wds-checkbox-group-gap-vertical);
279
279
  @property st-global(--wds-checkbox-icon);
280
280
  @property st-global(--wds-checkbox-icon-disabled);
281
+ @property st-global(--wds-checkbox-label-disabled);
282
+ @property st-global(--wds-checkbox-label-font-line-height-medium);
281
283
  @property st-global(--wds-checkbox-label-font-line-height-small);
284
+ @property st-global(--wds-checkbox-label-font-size-medium);
282
285
  @property st-global(--wds-checkbox-label-font-size-small);
283
286
  @property st-global(--wds-circular-progress-bar-background-fill-error);
284
287
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
@@ -322,6 +325,7 @@
322
325
  @property st-global(--wds-color-black-100-transparent-10);
323
326
  @property st-global(--wds-color-black-100-transparent-15);
324
327
  @property st-global(--wds-color-black-100-transparent-20);
328
+ @property st-global(--wds-color-black-100-transparent-25);
325
329
  @property st-global(--wds-color-black-100-transparent-30);
326
330
  @property st-global(--wds-color-black-100-transparent-40);
327
331
  @property st-global(--wds-color-black-100-transparent-50);
@@ -1671,20 +1675,68 @@
1671
1675
  @property st-global(--wds-thumbnail-title-padding-top);
1672
1676
  @property st-global(--wds-timeline-title-font-line-height);
1673
1677
  @property st-global(--wds-timeline-title-font-size);
1678
+ @property st-global(--wds-toggle-button-border-color-dark);
1679
+ @property st-global(--wds-toggle-button-border-color-dark-disabled);
1680
+ @property st-global(--wds-toggle-button-border-color-dark-hover);
1681
+ @property st-global(--wds-toggle-button-border-color-inverted);
1682
+ @property st-global(--wds-toggle-button-border-color-inverted-disabled);
1683
+ @property st-global(--wds-toggle-button-border-color-inverted-hover);
1684
+ @property st-global(--wds-toggle-button-border-color-standard);
1685
+ @property st-global(--wds-toggle-button-border-color-standard-disabled);
1686
+ @property st-global(--wds-toggle-button-border-color-standard-hover);
1674
1687
  @property st-global(--wds-toggle-button-border-radius-square-large);
1675
1688
  @property st-global(--wds-toggle-button-border-radius-square-medium);
1676
1689
  @property st-global(--wds-toggle-button-border-radius-square-small);
1677
1690
  @property st-global(--wds-toggle-button-border-radius-square-tiny);
1691
+ @property st-global(--wds-toggle-button-fill-dark);
1692
+ @property st-global(--wds-toggle-button-fill-dark-disabled);
1693
+ @property st-global(--wds-toggle-button-fill-dark-hover);
1694
+ @property st-global(--wds-toggle-button-fill-dark-selected);
1695
+ @property st-global(--wds-toggle-button-fill-dark-selected-disabled);
1696
+ @property st-global(--wds-toggle-button-fill-dark-selected-hover);
1678
1697
  @property st-global(--wds-toggle-button-fill-inverted);
1679
1698
  @property st-global(--wds-toggle-button-fill-inverted-disabled);
1680
1699
  @property st-global(--wds-toggle-button-fill-inverted-hover);
1681
1700
  @property st-global(--wds-toggle-button-fill-inverted-selected);
1682
1701
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
1683
1702
  @property st-global(--wds-toggle-button-fill-inverted-selected-hover);
1703
+ @property st-global(--wds-toggle-button-fill-standard);
1704
+ @property st-global(--wds-toggle-button-fill-standard-disabled);
1684
1705
  @property st-global(--wds-toggle-button-fill-standard-hover);
1706
+ @property st-global(--wds-toggle-button-fill-standard-selected);
1707
+ @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
1708
+ @property st-global(--wds-toggle-button-fill-standard-selected-hover);
1709
+ @property st-global(--wds-toggle-button-inner-shadow-blur-primary);
1710
+ @property st-global(--wds-toggle-button-inner-shadow-blur-secondary);
1711
+ @property st-global(--wds-toggle-button-inner-shadow-fill-primary);
1712
+ @property st-global(--wds-toggle-button-inner-shadow-fill-secondary);
1713
+ @property st-global(--wds-toggle-button-inner-shadow-x-primary);
1714
+ @property st-global(--wds-toggle-button-inner-shadow-x-secondary);
1715
+ @property st-global(--wds-toggle-button-inner-shadow-y-primary);
1716
+ @property st-global(--wds-toggle-button-inner-shadow-y-secondary);
1717
+ @property st-global(--wds-toggle-button-label-fill-dark-default);
1718
+ @property st-global(--wds-toggle-button-label-fill-dark-disabled);
1719
+ @property st-global(--wds-toggle-button-label-fill-dark-hover);
1720
+ @property st-global(--wds-toggle-button-label-fill-dark-selected);
1721
+ @property st-global(--wds-toggle-button-label-fill-dark-selected-disabled);
1722
+ @property st-global(--wds-toggle-button-label-fill-dark-selected-hover);
1723
+ @property st-global(--wds-toggle-button-label-fill-inverted);
1724
+ @property st-global(--wds-toggle-button-label-fill-inverted-disabled);
1725
+ @property st-global(--wds-toggle-button-label-fill-inverted-hover);
1726
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected);
1727
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected-disabled);
1728
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected-hover);
1729
+ @property st-global(--wds-toggle-button-label-fill-standard);
1730
+ @property st-global(--wds-toggle-button-label-fill-standard-disabled);
1685
1731
  @property st-global(--wds-toggle-button-label-fill-standard-hover);
1732
+ @property st-global(--wds-toggle-button-label-fill-standard-selected);
1733
+ @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
1686
1734
  @property st-global(--wds-toggle-button-label-font-line-height-round-small);
1687
1735
  @property st-global(--wds-toggle-button-label-font-size-round-small);
1736
+ @property st-global(--wds-toggle-button-label-font-size-square-large);
1737
+ @property st-global(--wds-toggle-button-label-font-size-square-medium);
1738
+ @property st-global(--wds-toggle-button-label-font-size-square-small);
1739
+ @property st-global(--wds-toggle-button-label-font-size-square-tiny);
1688
1740
  @property st-global(--wds-toggle-button-label-font-weight-pill);
1689
1741
  @property st-global(--wds-toggle-button-label-font-weight-round);
1690
1742
  @property st-global(--wds-toggle-button-label-font-weight-square);
@@ -1696,6 +1748,30 @@
1696
1748
  @property st-global(--wds-toggle-button-padding-small-round);
1697
1749
  @property st-global(--wds-toggle-button-padding-tiny);
1698
1750
  @property st-global(--wds-toggle-button-padding-tiny-round);
1751
+ @property st-global(--wds-toggle-button-shadow-blur-primary);
1752
+ @property st-global(--wds-toggle-button-shadow-blur-primary-inverted);
1753
+ @property st-global(--wds-toggle-button-shadow-blur-secondary);
1754
+ @property st-global(--wds-toggle-button-shadow-blur-secondary-inverted);
1755
+ @property st-global(--wds-toggle-button-shadow-blur-tertiary);
1756
+ @property st-global(--wds-toggle-button-shadow-blur-tertiary-inverted);
1757
+ @property st-global(--wds-toggle-button-shadow-fill-primary);
1758
+ @property st-global(--wds-toggle-button-shadow-fill-primary-inverted);
1759
+ @property st-global(--wds-toggle-button-shadow-fill-secondary);
1760
+ @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1761
+ @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1762
+ @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1763
+ @property st-global(--wds-toggle-button-shadow-x-primary);
1764
+ @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1765
+ @property st-global(--wds-toggle-button-shadow-x-secondary);
1766
+ @property st-global(--wds-toggle-button-shadow-x-secondary-inverted);
1767
+ @property st-global(--wds-toggle-button-shadow-x-tertiary);
1768
+ @property st-global(--wds-toggle-button-shadow-x-tertiary-inverted);
1769
+ @property st-global(--wds-toggle-button-shadow-y-primary);
1770
+ @property st-global(--wds-toggle-button-shadow-y-primary-inverted);
1771
+ @property st-global(--wds-toggle-button-shadow-y-secondary);
1772
+ @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1773
+ @property st-global(--wds-toggle-button-shadow-y-tertiary);
1774
+ @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1699
1775
  @property st-global(--wds-toggle-switch-border-error-disabled);
1700
1776
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1701
1777
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -2074,7 +2150,7 @@
2074
2150
  --wds-card-tab-padding-vertical-medium: 16px;
2075
2151
  --wds-card-tab-padding-vertical-small: 16px;
2076
2152
  --wds-checkbox-border: #767574;
2077
- --wds-checkbox-border-active: #7896ff;
2153
+ --wds-checkbox-border-active: #2f5dff;
2078
2154
  --wds-checkbox-border-active-disabled: rgba(19, 23, 32, 0);
2079
2155
  --wds-checkbox-border-active-hover: rgba(19, 23, 32, 0);
2080
2156
  --wds-checkbox-border-disabled: rgba(19, 23, 32, .1);
@@ -2089,7 +2165,10 @@
2089
2165
  --wds-checkbox-group-gap-vertical: 12px;
2090
2166
  --wds-checkbox-icon: #ffffff;
2091
2167
  --wds-checkbox-icon-disabled: rgba(255, 255, 255, .7);
2092
- --wds-checkbox-label-font-line-height-small: 12px;
2168
+ --wds-checkbox-label-disabled: #a8a6a5;
2169
+ --wds-checkbox-label-font-line-height-medium: 18px;
2170
+ --wds-checkbox-label-font-line-height-small: 16px;
2171
+ --wds-checkbox-label-font-size-medium: 14px;
2093
2172
  --wds-checkbox-label-font-size-small: 12px;
2094
2173
  --wds-circular-progress-bar-background-fill-error: rgba(19, 23, 32, .1);
2095
2174
  --wds-circular-progress-bar-background-fill-premium: rgba(19, 23, 32, .1);
@@ -2133,6 +2212,7 @@
2133
2212
  --wds-color-black-100-transparent-10: rgba(19, 23, 32, .1);
2134
2213
  --wds-color-black-100-transparent-15: rgba(19, 23, 32, .15);
2135
2214
  --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
2215
+ --wds-color-black-100-transparent-25: rgba(19, 23, 32, .25);
2136
2216
  --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
2137
2217
  --wds-color-black-100-transparent-40: rgba(19, 23, 32, .4);
2138
2218
  --wds-color-black-100-transparent-50: rgba(19, 23, 32, .5);
@@ -3482,31 +3562,103 @@
3482
3562
  --wds-thumbnail-title-padding-top: 4px;
3483
3563
  --wds-timeline-title-font-line-height: 16px;
3484
3564
  --wds-timeline-title-font-size: 12px;
3485
- --wds-toggle-button-border-radius-square-large: 0;
3486
- --wds-toggle-button-border-radius-square-medium: 0;
3487
- --wds-toggle-button-border-radius-square-small: 0;
3488
- --wds-toggle-button-border-radius-square-tiny: 4px;
3489
- --wds-toggle-button-fill-inverted: #ffffff;
3490
- --wds-toggle-button-fill-inverted-disabled: #ffffff;
3491
- --wds-toggle-button-fill-inverted-hover: #eaefff;
3492
- --wds-toggle-button-fill-inverted-selected: #2f5dff;
3493
- --wds-toggle-button-fill-inverted-selected-disabled: rgba(19, 23, 32, .3);
3494
- --wds-toggle-button-fill-inverted-selected-hover: #1c3fe5;
3495
- --wds-toggle-button-fill-standard-hover: #eaefff;
3496
- --wds-toggle-button-label-fill-standard-hover: #151414;
3565
+ --wds-toggle-button-border-color-dark: rgba(255, 255, 255, 0);
3566
+ --wds-toggle-button-border-color-dark-disabled: rgba(255, 255, 255, 0);
3567
+ --wds-toggle-button-border-color-dark-hover: rgba(255, 255, 255, 0);
3568
+ --wds-toggle-button-border-color-inverted: rgba(255, 255, 255, 0);
3569
+ --wds-toggle-button-border-color-inverted-disabled: rgba(255, 255, 255, 0);
3570
+ --wds-toggle-button-border-color-inverted-hover: rgba(255, 255, 255, 0);
3571
+ --wds-toggle-button-border-color-standard: rgba(255, 255, 255, 0);
3572
+ --wds-toggle-button-border-color-standard-disabled: rgba(255, 255, 255, 0);
3573
+ --wds-toggle-button-border-color-standard-hover: #acbeff;
3574
+ --wds-toggle-button-border-radius-square-large: 8px;
3575
+ --wds-toggle-button-border-radius-square-medium: 8px;
3576
+ --wds-toggle-button-border-radius-square-small: 8px;
3577
+ --wds-toggle-button-border-radius-square-tiny: 8px;
3578
+ --wds-toggle-button-fill-dark: rgba(19, 23, 32, 0);
3579
+ --wds-toggle-button-fill-dark-disabled: rgba(19, 23, 32, 0);
3580
+ --wds-toggle-button-fill-dark-hover: #e8e7e7;
3581
+ --wds-toggle-button-fill-dark-selected: #dedede;
3582
+ --wds-toggle-button-fill-dark-selected-disabled: #f0efef;
3583
+ --wds-toggle-button-fill-dark-selected-hover: #a8a6a5;
3584
+ --wds-toggle-button-fill-inverted: rgba(19, 23, 32, 0);
3585
+ --wds-toggle-button-fill-inverted-disabled: rgba(19, 23, 32, 0);
3586
+ --wds-toggle-button-fill-inverted-hover: #e8e7e7;
3587
+ --wds-toggle-button-fill-inverted-selected: #ffffff;
3588
+ --wds-toggle-button-fill-inverted-selected-disabled: #f0efef;
3589
+ --wds-toggle-button-fill-inverted-selected-hover: #f0efef;
3590
+ --wds-toggle-button-fill-standard: rgba(19, 23, 32, 0);
3591
+ --wds-toggle-button-fill-standard-disabled: rgba(19, 23, 32, 0);
3592
+ --wds-toggle-button-fill-standard-hover: rgba(19, 23, 32, 0);
3593
+ --wds-toggle-button-fill-standard-selected: #eaefff;
3594
+ --wds-toggle-button-fill-standard-selected-disabled: #f0efef;
3595
+ --wds-toggle-button-fill-standard-selected-hover: #d5dfff;
3596
+ --wds-toggle-button-inner-shadow-blur-primary: 2px;
3597
+ --wds-toggle-button-inner-shadow-blur-secondary: 2px;
3598
+ --wds-toggle-button-inner-shadow-fill-primary: #ffffff;
3599
+ --wds-toggle-button-inner-shadow-fill-secondary: #ffffff;
3600
+ --wds-toggle-button-inner-shadow-x-primary: 1px;
3601
+ --wds-toggle-button-inner-shadow-x-secondary: 1px;
3602
+ --wds-toggle-button-inner-shadow-y-primary: 1px;
3603
+ --wds-toggle-button-inner-shadow-y-secondary: 1px;
3604
+ --wds-toggle-button-label-fill-dark-default: #151414;
3605
+ --wds-toggle-button-label-fill-dark-disabled: #a8a6a5;
3606
+ --wds-toggle-button-label-fill-dark-hover: #151414;
3607
+ --wds-toggle-button-label-fill-dark-selected: #151414;
3608
+ --wds-toggle-button-label-fill-dark-selected-disabled: #a8a6a5;
3609
+ --wds-toggle-button-label-fill-dark-selected-hover: #151414;
3610
+ --wds-toggle-button-label-fill-inverted: #151414;
3611
+ --wds-toggle-button-label-fill-inverted-disabled: #a8a6a5;
3612
+ --wds-toggle-button-label-fill-inverted-hover: #151414;
3613
+ --wds-toggle-button-label-fill-inverted-selected: #151414;
3614
+ --wds-toggle-button-label-fill-inverted-selected-disabled: #a8a6a5;
3615
+ --wds-toggle-button-label-fill-inverted-selected-hover: #151414;
3616
+ --wds-toggle-button-label-fill-standard: #151414;
3617
+ --wds-toggle-button-label-fill-standard-disabled: #a8a6a5;
3618
+ --wds-toggle-button-label-fill-standard-hover: #1c3fe5;
3619
+ --wds-toggle-button-label-fill-standard-selected: #2f5dff;
3620
+ --wds-toggle-button-label-fill-standard-selected-disabled: #a8a6a5;
3497
3621
  --wds-toggle-button-label-font-line-height-round-small: 16px;
3498
3622
  --wds-toggle-button-label-font-size-round-small: 12px;
3623
+ --wds-toggle-button-label-font-size-square-large: 12px;
3624
+ --wds-toggle-button-label-font-size-square-medium: 12px;
3625
+ --wds-toggle-button-label-font-size-square-small: 12px;
3626
+ --wds-toggle-button-label-font-size-square-tiny: 12px;
3499
3627
  --wds-toggle-button-label-font-weight-pill: 600;
3500
- --wds-toggle-button-label-font-weight-round: 400;
3501
- --wds-toggle-button-label-font-weight-square: 400;
3502
- --wds-toggle-button-padding-large: 16px;
3503
- --wds-toggle-button-padding-large-round: 16px;
3504
- --wds-toggle-button-padding-medium: 12px;
3505
- --wds-toggle-button-padding-medium-round: 16px;
3506
- --wds-toggle-button-padding-small: 12px;
3628
+ --wds-toggle-button-label-font-weight-round: 600;
3629
+ --wds-toggle-button-label-font-weight-square: 600;
3630
+ --wds-toggle-button-padding-large: 24px;
3631
+ --wds-toggle-button-padding-large-round: 24px;
3632
+ --wds-toggle-button-padding-medium: 20px;
3633
+ --wds-toggle-button-padding-medium-round: 20px;
3634
+ --wds-toggle-button-padding-small: 16px;
3507
3635
  --wds-toggle-button-padding-small-round: 16px;
3508
- --wds-toggle-button-padding-tiny: 6px;
3636
+ --wds-toggle-button-padding-tiny: 12px;
3509
3637
  --wds-toggle-button-padding-tiny-round: 12px;
3638
+ --wds-toggle-button-shadow-blur-primary: 4px;
3639
+ --wds-toggle-button-shadow-blur-primary-inverted: 30px;
3640
+ --wds-toggle-button-shadow-blur-secondary: 1.7px;
3641
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
3642
+ --wds-toggle-button-shadow-blur-tertiary: 0.6px;
3643
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
3644
+ --wds-toggle-button-shadow-fill-primary: rgba(19, 23, 32, .05);
3645
+ --wds-toggle-button-shadow-fill-primary-inverted: rgba(19, 23, 32, .05);
3646
+ --wds-toggle-button-shadow-fill-secondary: rgba(19, 23, 32, .15);
3647
+ --wds-toggle-button-shadow-fill-secondary-inverted: rgba(118, 117, 116, 0.2);
3648
+ --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, .25);
3649
+ --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, .1);
3650
+ --wds-toggle-button-shadow-x-primary: 1px;
3651
+ --wds-toggle-button-shadow-x-primary-inverted: -8px;
3652
+ --wds-toggle-button-shadow-x-secondary: 1.2px;
3653
+ --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
3654
+ --wds-toggle-button-shadow-x-tertiary: 0.4px;
3655
+ --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
3656
+ --wds-toggle-button-shadow-y-primary: 4px;
3657
+ --wds-toggle-button-shadow-y-primary-inverted: 5px;
3658
+ --wds-toggle-button-shadow-y-secondary: 1.2px;
3659
+ --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
3660
+ --wds-toggle-button-shadow-y-tertiary: 0.4px;
3661
+ --wds-toggle-button-shadow-y-tertiary-inverted: 4px;
3510
3662
  --wds-toggle-switch-border-error-disabled: rgba(19, 23, 32, 0);
3511
3663
  --wds-toggle-switch-border-standard-disabled: rgba(19, 23, 32, 0);
3512
3664
  --wds-toggle-switch-border-success-disabled: rgba(19, 23, 32, 0);