@wix/design-system-tokens 1.183.0 → 1.185.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 (27) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +5 -1
  3. package/all.scss +5 -1
  4. package/all.st.css +10 -2
  5. package/component.st.css +8 -2
  6. package/odeditor/all.css +5 -1
  7. package/odeditor/all.scss +5 -1
  8. package/odeditor/all.st.css +10 -2
  9. package/odeditor/component.st.css +8 -2
  10. package/odeditor/semantic.st.css +2 -0
  11. package/odeditor-dark/all.css +18 -14
  12. package/odeditor-dark/all.scss +18 -14
  13. package/odeditor-dark/all.st.css +24 -16
  14. package/odeditor-dark/component.st.css +17 -11
  15. package/odeditor-dark/semantic.st.css +7 -5
  16. package/package.json +2 -2
  17. package/semantic.st.css +2 -0
  18. package/studio/all.css +5 -1
  19. package/studio/all.scss +5 -1
  20. package/studio/all.st.css +10 -2
  21. package/studio/component.st.css +8 -2
  22. package/studio/semantic.st.css +2 -0
  23. package/wixel/all.css +5 -1
  24. package/wixel/all.scss +5 -1
  25. package/wixel/all.st.css +10 -2
  26. package/wixel/component.st.css +8 -2
  27. package/wixel/semantic.st.css +2 -0
package/odeditor-dark/all.scss CHANGED
@@ -99,7 +99,6 @@
99
99
  --wds-shadow-y-tertiary-toggle-button: 0.4px;
100
100
  --wds-shadow-y-secondary-toggle-button: 1.2px;
101
101
  --wds-shadow-y-secondary-overlay: 12;
102
- --wds-shadow-y-primary-modal: 9;
103
102
  --wds-shadow-y-600: 20px;
104
103
  --wds-shadow-y-350: 10px;
105
104
  --wds-shadow-y-300: 12px;
@@ -482,6 +481,8 @@
482
481
  --wds-toggle-button-border-color-dark: var(--wds-color-white-transparent-0);
483
482
  --wds-toast-vertical-padding: var(--wds-space-200);
484
483
  --wds-toast-horizontal-padding: var(--wds-space-300);
484
+ --wds-toast-border-radius: var(--wds-border-radius-600);
485
+ --wds-toast-background-fill: var(--wds-color-white);
485
486
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
486
487
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-medium);
487
488
  --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-10);
@@ -648,7 +649,7 @@
648
649
  --wds-side-panel-content-padding-horizontal: var(--wds-space-400);
649
650
  --wds-side-panel-back-button-top-padding: var(--wds-space-50);
650
651
  --wds-shadow-y-secondary-toggle: var(--wds-shadow-y-0);
651
- --wds-shadow-y-secondary-raised: var(--wds-shadow-y-50);
652
+ --wds-shadow-y-secondary-raised: var(--wds-shadow-y-100);
652
653
  --wds-shadow-y-secondary-overlay-dark: var(--wds-shadow-y-0);
653
654
  --wds-shadow-y-secondary-modal: var(--wds-shadow-y-0);
654
655
  --wds-shadow-y-primary-toggle-button: var(--wds-shadow-y-100);
@@ -656,10 +657,11 @@
656
657
  --wds-shadow-y-primary-raised: var(--wds-shadow-y-0);
657
658
  --wds-shadow-y-primary-overlay-dark: var(--wds-shadow-y-0);
658
659
  --wds-shadow-y-primary-overlay: var(--wds-shadow-y-0);
660
+ --wds-shadow-y-primary-modal: var(--wds-shadow-y-600);
659
661
  --wds-shadow-y-input: var(--wds-shadow-y-25);
660
662
  --wds-shadow-x-secondary-raised: var(--wds-shadow-x-0);
661
663
  --wds-shadow-x-primary-toggle-button: var(--wds-shadow-x-25);
662
- --wds-shadow-x-primary-modal: var(--wds-shadow-x-0);
664
+ --wds-shadow-x-primary-modal: var(--wds-shadow-x-50);
663
665
  --wds-shadow-x-input: var(--wds-shadow-x-25);
664
666
  --wds-shadow-surface-modal: var(--wds-shadow-x-50) var(--wds-shadow-y-600) var(--wds-shadow-blur-800) var(--wds-color-white-transparent-30), 0 var(--wds-shadow-blur-0) var(--wds-shadow-y-0) var(--wds-color-white-transparent-30);
665
667
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -695,7 +697,7 @@
695
697
  --wds-shadow-fill-primary-raised: var(--wds-color-white-transparent-30);
696
698
  --wds-shadow-fill-primary-overlay-dark: var(--wds-color-white-transparent-30);
697
699
  --wds-shadow-fill-primary-overlay: var(--wds-color-white-transparent-30);
698
- --wds-shadow-fill-primary-modal: var(--wds-color-white-transparent-30);
700
+ --wds-shadow-fill-primary-modal: var(--wds-color-white-transparent-20);
699
701
  --wds-shadow-fill-input: var(--wds-color-white-transparent-20);
700
702
  --wds-shadow-blur-secondary-toggle: var(--wds-shadow-blur-0);
701
703
  --wds-shadow-blur-secondary-raised: var(--wds-shadow-blur-50);
@@ -707,7 +709,7 @@
707
709
  --wds-shadow-blur-primary-raised: var(--wds-shadow-blur-50);
708
710
  --wds-shadow-blur-primary-overlay-dark: var(--wds-shadow-blur-125);
709
711
  --wds-shadow-blur-primary-overlay: var(--wds-shadow-blur-125);
710
- --wds-shadow-blur-primary-modal: var(--wds-shadow-blur-500);
712
+ --wds-shadow-blur-primary-modal: var(--wds-shadow-blur-800);
711
713
  --wds-shadow-blur-input: var(--wds-shadow-blur-35);
712
714
  --wds-shadow-400: 0 8px 8px var(--wds-color-white-transparent-10), 0 3px 24px var(--wds-color-white-transparent-20);
713
715
  --wds-shadow-300: 0 var(--wds-shadow-y-300) var(--wds-shadow-blur-800) 0 var(--wds-color-white-transparent-30), 0 var(--wds-shadow-blur-0) var(--wds-shadow-y-0) 0 var(--wds-color-white-transparent-30);
@@ -981,7 +983,10 @@
981
983
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-black-500);
982
984
  --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-black-700);
983
985
  --wds-icon-button-color-fill-standard-secondary: var(--wds-color-black-100-transparent-0);
986
+ --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-blue-200);
984
987
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-black-700);
988
+ --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-blue-100);
989
+ --wds-icon-button-color-fill-standard-primary: var(--wds-color-blue-150);
985
990
  --wds-icon-button-color-fill-premium-secondary-disabled: var(--wds-color-black-700);
986
991
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-black-700);
987
992
  --wds-icon-button-color-fill-light-secondary-disabled: var(--wds-color-black-700);
@@ -1488,6 +1493,7 @@
1488
1493
  --wds-breadcrumbs-on-dark-fill-hover: var(--wds-color-white-transparent-30);
1489
1494
  --wds-breadcrumbs-font-size-small: var(--wds-font-size-200);
1490
1495
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-100);
1496
+ --wds-border-width-varied-secondary: var(--wds-border-width-100);
1491
1497
  --wds-border-width-varied: var(--wds-border-width-0);
1492
1498
  --wds-border-width-default: var(--wds-border-width-100);
1493
1499
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -1622,7 +1628,8 @@
1622
1628
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-dark-tertiary);
1623
1629
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-dark-secondary-hover);
1624
1630
  --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-dark-secondary-hover);
1625
- --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1631
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary);
1632
+ --wds-toast-action-color: var(--wds-color-text-standard-primary);
1626
1633
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1627
1634
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1628
1635
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1645,8 +1652,7 @@
1645
1652
  --wds-swatches-fill-border-no-value: var(--wds-color-border-dark-secondary);
1646
1653
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1647
1654
  --wds-status-toast-text-font-size: var(--wds-font-size-body-small);
1648
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1649
- --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1655
+ --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary);
1650
1656
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1651
1657
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
1652
1658
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-tertiary);
@@ -1774,9 +1780,9 @@
1774
1780
  --wds-icon-button-color-text-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
1775
1781
  --wds-icon-button-color-text-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
1776
1782
  --wds-icon-button-color-text-standard-secondary: var(--wds-color-text-primary);
1777
- --wds-icon-button-color-text-standard-primary-hover: var(--wds-color-text-standard-primary-light);
1778
- --wds-icon-button-color-text-standard-primary-active: var(--wds-color-text-standard-primary-light);
1779
- --wds-icon-button-color-text-standard-primary: var(--wds-color-text-standard-primary-light);
1783
+ --wds-icon-button-color-text-standard-primary-hover: var(--wds-color-text-standard-primary);
1784
+ --wds-icon-button-color-text-standard-primary-active: var(--wds-color-text-standard-primary);
1785
+ --wds-icon-button-color-text-standard-primary: var(--wds-color-text-standard-primary);
1780
1786
  --wds-icon-button-color-text-premium-tertiary-hover: var(--wds-color-fill-premium-primary-active);
1781
1787
  --wds-icon-button-color-text-premium-tertiary-active: var(--wds-color-fill-premium-primary-active);
1782
1788
  --wds-icon-button-color-text-premium-tertiary: var(--wds-color-text-premium);
@@ -1811,9 +1817,6 @@
1811
1817
  --wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-light-secondary);
1812
1818
  --wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-tertiary-hover);
1813
1819
  --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-tertiary-active);
1814
- --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1815
- --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
1816
- --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
1817
1820
  --wds-icon-button-color-fill-premium-tertiary-hover: var(--wds-color-fill-premium-secondary-hover);
1818
1821
  --wds-icon-button-color-fill-premium-tertiary-disabled: var(--wds-color-fill-premium-secondary-disabled);
1819
1822
  --wds-icon-button-color-fill-premium-tertiary-active: var(--wds-color-fill-premium-secondary-active);
@@ -1975,6 +1978,7 @@
1975
1978
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-secondary);
1976
1979
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
1977
1980
  --wds-badge-label-font-size-small: var(--wds-font-size-body-tiny);
1981
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary);
1978
1982
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-2);
1979
1983
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1980
1984
  --wds-angle-input-ring-border: var(--wds-color-border-dark-secondary);
package/odeditor-dark/all.st.css CHANGED
@@ -51,6 +51,7 @@
51
51
  @property st-global(--wds-announcement-modal-title-font-size);
52
52
  @property st-global(--wds-avatar-group-gap-condensed);
53
53
  @property st-global(--wds-avatar-group-gap-default);
54
+ @property st-global(--wds-avatar-text-fill);
54
55
  @property st-global(--wds-background-blur-0);
55
56
  @property st-global(--wds-background-blur-50);
56
57
  @property st-global(--wds-background-blur-100);
@@ -125,6 +126,7 @@
125
126
  @property st-global(--wds-border-width-default);
126
127
  @property st-global(--wds-border-width-none);
127
128
  @property st-global(--wds-border-width-varied);
129
+ @property st-global(--wds-border-width-varied-secondary);
128
130
  @property st-global(--wds-breadcrumbs-border-radius);
129
131
  @property st-global(--wds-breadcrumbs-font-size-small);
130
132
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
@@ -1714,7 +1716,6 @@
1714
1716
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1715
1717
  @property st-global(--wds-space-viewport-spacing);
1716
1718
  @property st-global(--wds-status-toast-info-icon-fill);
1717
- @property st-global(--wds-status-toast-text-fill);
1718
1719
  @property st-global(--wds-status-toast-text-font-line-height);
1719
1720
  @property st-global(--wds-status-toast-text-font-size);
1720
1721
  @property st-global(--wds-status-toast-width);
@@ -1820,8 +1821,11 @@
1820
1821
  @property st-global(--wds-thumbnail-title-padding-top);
1821
1822
  @property st-global(--wds-timeline-title-font-line-height);
1822
1823
  @property st-global(--wds-timeline-title-font-size);
1824
+ @property st-global(--wds-toast-action-color);
1823
1825
  @property st-global(--wds-toast-background-fill);
1826
+ @property st-global(--wds-toast-border-radius);
1824
1827
  @property st-global(--wds-toast-horizontal-padding);
1828
+ @property st-global(--wds-toast-text-fill);
1825
1829
  @property st-global(--wds-toast-vertical-padding);
1826
1830
  @property st-global(--wds-toggle-button-border-color-dark);
1827
1831
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -2104,6 +2108,7 @@
2104
2108
  --wds-announcement-modal-title-font-size: 24px;
2105
2109
  --wds-avatar-group-gap-condensed: -2px;
2106
2110
  --wds-avatar-group-gap-default: 4px;
2111
+ --wds-avatar-text-fill: #FFFFFF;
2107
2112
  --wds-background-blur-0: 0px;
2108
2113
  --wds-background-blur-50: 4px;
2109
2114
  --wds-background-blur-100: 8px;
@@ -2178,6 +2183,7 @@
2178
2183
  --wds-border-width-default: 1px;
2179
2184
  --wds-border-width-none: 0px;
2180
2185
  --wds-border-width-varied: 0px;
2186
+ --wds-border-width-varied-secondary: 1px;
2181
2187
  --wds-breadcrumbs-border-radius: 2px;
2182
2188
  --wds-breadcrumbs-font-size-small: 12px;
2183
2189
  --wds-breadcrumbs-on-dark-fill-hover: rgba(0, 0, 0, .3);
@@ -2329,7 +2335,7 @@
2329
2335
  --wds-card-tab-padding-horizontal-small: 20px;
2330
2336
  --wds-card-tab-padding-vertical-medium: 16px;
2331
2337
  --wds-card-tab-padding-vertical-small: 16px;
2332
- --wds-carousel-controls-shadow: 0 9 20px rgba(0, 0, 0, .3), 0 0px 0px rgba(255, 255, 255, 0);
2338
+ --wds-carousel-controls-shadow: 0 20px 30px rgba(0, 0, 0, .2), 0 0px 0px rgba(255, 255, 255, 0);
2333
2339
  --wds-carousel-dots-width: 4px;
2334
2340
  --wds-checkbox-border: #D4D3D2;
2335
2341
  --wds-checkbox-border-active: #82B0FF;
@@ -3041,10 +3047,10 @@
3041
3047
  --wds-icon-button-color-fill-premium-tertiary-active: #5B78A9;
3042
3048
  --wds-icon-button-color-fill-premium-tertiary-disabled: rgba(255, 255, 255, .1);
3043
3049
  --wds-icon-button-color-fill-premium-tertiary-hover: #3F4D6E;
3044
- --wds-icon-button-color-fill-standard-primary: #82B0FF;
3045
- --wds-icon-button-color-fill-standard-primary-active: #E0E7FF;
3050
+ --wds-icon-button-color-fill-standard-primary: #3C67FF;
3051
+ --wds-icon-button-color-fill-standard-primary-active: #82B0FF;
3046
3052
  --wds-icon-button-color-fill-standard-primary-disabled: #3A3A3B;
3047
- --wds-icon-button-color-fill-standard-primary-hover: #B1CCFF;
3053
+ --wds-icon-button-color-fill-standard-primary-hover: #6F94D4;
3048
3054
  --wds-icon-button-color-fill-standard-secondary: rgba(255, 255, 255, 0);
3049
3055
  --wds-icon-button-color-fill-standard-secondary-active: #2D354E;
3050
3056
  --wds-icon-button-color-fill-standard-secondary-disabled: #3A3A3B;
@@ -3089,10 +3095,10 @@
3089
3095
  --wds-icon-button-color-text-premium-tertiary-active: #E0E7FF;
3090
3096
  --wds-icon-button-color-text-premium-tertiary-disabled: #878685;
3091
3097
  --wds-icon-button-color-text-premium-tertiary-hover: #E0E7FF;
3092
- --wds-icon-button-color-text-standard-primary: #212122;
3093
- --wds-icon-button-color-text-standard-primary-active: #212122;
3098
+ --wds-icon-button-color-text-standard-primary: #FFFFFF;
3099
+ --wds-icon-button-color-text-standard-primary-active: #FFFFFF;
3094
3100
  --wds-icon-button-color-text-standard-primary-disabled: #878685;
3095
- --wds-icon-button-color-text-standard-primary-hover: #212122;
3101
+ --wds-icon-button-color-text-standard-primary-hover: #FFFFFF;
3096
3102
  --wds-icon-button-color-text-standard-secondary: #82B0FF;
3097
3103
  --wds-icon-button-color-text-standard-secondary-active: #E0E7FF;
3098
3104
  --wds-icon-button-color-text-standard-secondary-disabled: #878685;
@@ -3510,7 +3516,7 @@
3510
3516
  --wds-shadow-blur-500: 20px;
3511
3517
  --wds-shadow-blur-800: 30px;
3512
3518
  --wds-shadow-blur-input: 3px;
3513
- --wds-shadow-blur-primary-modal: 20px;
3519
+ --wds-shadow-blur-primary-modal: 30px;
3514
3520
  --wds-shadow-blur-primary-overlay: 8px;
3515
3521
  --wds-shadow-blur-primary-overlay-dark: 8px;
3516
3522
  --wds-shadow-blur-primary-raised: 4px;
@@ -3524,7 +3530,7 @@
3524
3530
  --wds-shadow-blur-secondary-toggle-button: 1.7px;
3525
3531
  --wds-shadow-blur-tertiary-toggle-button: 0.6px;
3526
3532
  --wds-shadow-fill-input: rgba(0, 0, 0, .2);
3527
- --wds-shadow-fill-primary-modal: rgba(0, 0, 0, .3);
3533
+ --wds-shadow-fill-primary-modal: rgba(0, 0, 0, .2);
3528
3534
  --wds-shadow-fill-primary-overlay: rgba(0, 0, 0, .3);
3529
3535
  --wds-shadow-fill-primary-overlay-dark: rgba(0, 0, 0, .3);
3530
3536
  --wds-shadow-fill-primary-raised: rgba(0, 0, 0, .3);
@@ -3572,7 +3578,7 @@
3572
3578
  --wds-shadow-x-25: 1px;
3573
3579
  --wds-shadow-x-50: 2px;
3574
3580
  --wds-shadow-x-input: 1px;
3575
- --wds-shadow-x-primary-modal: 0px;
3581
+ --wds-shadow-x-primary-modal: 2px;
3576
3582
  --wds-shadow-x-primary-toggle-button: 1px;
3577
3583
  --wds-shadow-x-secondary-raised: 0px;
3578
3584
  --wds-shadow-x-secondary-toggle-button: 1.2px;
@@ -3588,7 +3594,7 @@
3588
3594
  --wds-shadow-y-350: 10px;
3589
3595
  --wds-shadow-y-600: 20px;
3590
3596
  --wds-shadow-y-input: 1px;
3591
- --wds-shadow-y-primary-modal: 9;
3597
+ --wds-shadow-y-primary-modal: 20px;
3592
3598
  --wds-shadow-y-primary-overlay: 0px;
3593
3599
  --wds-shadow-y-primary-overlay-dark: 0px;
3594
3600
  --wds-shadow-y-primary-raised: 0px;
@@ -3597,7 +3603,7 @@
3597
3603
  --wds-shadow-y-secondary-modal: 0px;
3598
3604
  --wds-shadow-y-secondary-overlay: 12;
3599
3605
  --wds-shadow-y-secondary-overlay-dark: 0px;
3600
- --wds-shadow-y-secondary-raised: 2px;
3606
+ --wds-shadow-y-secondary-raised: 4px;
3601
3607
  --wds-shadow-y-secondary-toggle: 0px;
3602
3608
  --wds-shadow-y-secondary-toggle-button: 1.2px;
3603
3609
  --wds-shadow-y-tertiary-toggle-button: 0.4px;
@@ -3766,8 +3772,7 @@
3766
3772
  --wds-space-padding-vertical-x-tiny: 8px;
3767
3773
  --wds-space-padding-vertical-xx-tiny: 4px;
3768
3774
  --wds-space-viewport-spacing: 48px;
3769
- --wds-status-toast-info-icon-fill: #212122;
3770
- --wds-status-toast-text-fill: #212122;
3775
+ --wds-status-toast-info-icon-fill: #FFFFFF;
3771
3776
  --wds-status-toast-text-font-line-height: 18px;
3772
3777
  --wds-status-toast-text-font-size: 14px;
3773
3778
  --wds-status-toast-width: 600px;
@@ -3873,8 +3878,11 @@
3873
3878
  --wds-thumbnail-title-padding-top: 4px;
3874
3879
  --wds-timeline-title-font-line-height: 16px;
3875
3880
  --wds-timeline-title-font-size: 12px;
3876
- --wds-toast-background-fill: #FFFFFF;
3881
+ --wds-toast-action-color: #FFFFFF;
3882
+ --wds-toast-background-fill: #212122;
3883
+ --wds-toast-border-radius: 12px;
3877
3884
  --wds-toast-horizontal-padding: 12px;
3885
+ --wds-toast-text-fill: #FFFFFF;
3878
3886
  --wds-toast-vertical-padding: 8px;
3879
3887
  --wds-toggle-button-border-color-dark: rgba(0, 0, 0, 0);
3880
3888
  --wds-toggle-button-border-color-dark-disabled: rgba(0, 0, 0, 0);
package/odeditor-dark/component.st.css CHANGED
@@ -51,6 +51,7 @@
51
51
  @property st-global(--wds-announcement-modal-title-font-size);
52
52
  @property st-global(--wds-avatar-group-gap-condensed);
53
53
  @property st-global(--wds-avatar-group-gap-default);
54
+ @property st-global(--wds-avatar-text-fill);
54
55
  @property st-global(--wds-badge-border-radius-medium);
55
56
  @property st-global(--wds-badge-border-radius-small);
56
57
  @property st-global(--wds-badge-border-radius-tiny);
@@ -995,7 +996,6 @@
995
996
  @property st-global(--wds-social-preview-content-padding-horizontal);
996
997
  @property st-global(--wds-social-preview-content-padding-vertical);
997
998
  @property st-global(--wds-status-toast-info-icon-fill);
998
- @property st-global(--wds-status-toast-text-fill);
999
999
  @property st-global(--wds-status-toast-text-font-line-height);
1000
1000
  @property st-global(--wds-status-toast-text-font-size);
1001
1001
  @property st-global(--wds-status-toast-width);
@@ -1101,8 +1101,11 @@
1101
1101
  @property st-global(--wds-thumbnail-title-padding-top);
1102
1102
  @property st-global(--wds-timeline-title-font-line-height);
1103
1103
  @property st-global(--wds-timeline-title-font-size);
1104
+ @property st-global(--wds-toast-action-color);
1104
1105
  @property st-global(--wds-toast-background-fill);
1106
+ @property st-global(--wds-toast-border-radius);
1105
1107
  @property st-global(--wds-toast-horizontal-padding);
1108
+ @property st-global(--wds-toast-text-fill);
1106
1109
  @property st-global(--wds-toast-vertical-padding);
1107
1110
  @property st-global(--wds-toggle-button-border-color-dark);
1108
1111
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -1383,6 +1386,7 @@
1383
1386
  --wds-announcement-modal-title-font-size: 24px;
1384
1387
  --wds-avatar-group-gap-condensed: -2px;
1385
1388
  --wds-avatar-group-gap-default: 4px;
1389
+ --wds-avatar-text-fill: #FFFFFF;
1386
1390
  --wds-badge-border-radius-medium: 4px;
1387
1391
  --wds-badge-border-radius-small: 4px;
1388
1392
  --wds-badge-border-radius-tiny: 4px;
@@ -1568,7 +1572,7 @@
1568
1572
  --wds-card-tab-padding-horizontal-small: 20px;
1569
1573
  --wds-card-tab-padding-vertical-medium: 16px;
1570
1574
  --wds-card-tab-padding-vertical-small: 16px;
1571
- --wds-carousel-controls-shadow: 0 9 20px rgba(0, 0, 0, .3), 0 0px 0px rgba(255, 255, 255, 0);
1575
+ --wds-carousel-controls-shadow: 0 20px 30px rgba(0, 0, 0, .2), 0 0px 0px rgba(255, 255, 255, 0);
1572
1576
  --wds-carousel-dots-width: 4px;
1573
1577
  --wds-checkbox-border: #D4D3D2;
1574
1578
  --wds-checkbox-border-active: #82B0FF;
@@ -1768,10 +1772,10 @@
1768
1772
  --wds-icon-button-color-fill-premium-tertiary-active: #5B78A9;
1769
1773
  --wds-icon-button-color-fill-premium-tertiary-disabled: rgba(255, 255, 255, .1);
1770
1774
  --wds-icon-button-color-fill-premium-tertiary-hover: #3F4D6E;
1771
- --wds-icon-button-color-fill-standard-primary: #82B0FF;
1772
- --wds-icon-button-color-fill-standard-primary-active: #E0E7FF;
1775
+ --wds-icon-button-color-fill-standard-primary: #3C67FF;
1776
+ --wds-icon-button-color-fill-standard-primary-active: #82B0FF;
1773
1777
  --wds-icon-button-color-fill-standard-primary-disabled: #3A3A3B;
1774
- --wds-icon-button-color-fill-standard-primary-hover: #B1CCFF;
1778
+ --wds-icon-button-color-fill-standard-primary-hover: #6F94D4;
1775
1779
  --wds-icon-button-color-fill-standard-secondary: rgba(255, 255, 255, 0);
1776
1780
  --wds-icon-button-color-fill-standard-secondary-active: #2D354E;
1777
1781
  --wds-icon-button-color-fill-standard-secondary-disabled: #3A3A3B;
@@ -1816,10 +1820,10 @@
1816
1820
  --wds-icon-button-color-text-premium-tertiary-active: #E0E7FF;
1817
1821
  --wds-icon-button-color-text-premium-tertiary-disabled: #878685;
1818
1822
  --wds-icon-button-color-text-premium-tertiary-hover: #E0E7FF;
1819
- --wds-icon-button-color-text-standard-primary: #212122;
1820
- --wds-icon-button-color-text-standard-primary-active: #212122;
1823
+ --wds-icon-button-color-text-standard-primary: #FFFFFF;
1824
+ --wds-icon-button-color-text-standard-primary-active: #FFFFFF;
1821
1825
  --wds-icon-button-color-text-standard-primary-disabled: #878685;
1822
- --wds-icon-button-color-text-standard-primary-hover: #212122;
1826
+ --wds-icon-button-color-text-standard-primary-hover: #FFFFFF;
1823
1827
  --wds-icon-button-color-text-standard-secondary: #82B0FF;
1824
1828
  --wds-icon-button-color-text-standard-secondary-active: #E0E7FF;
1825
1829
  --wds-icon-button-color-text-standard-secondary-disabled: #878685;
@@ -2326,8 +2330,7 @@
2326
2330
  --wds-social-post-preview-content-padding-vertical: 12px;
2327
2331
  --wds-social-preview-content-padding-horizontal: 12px;
2328
2332
  --wds-social-preview-content-padding-vertical: 8px;
2329
- --wds-status-toast-info-icon-fill: #212122;
2330
- --wds-status-toast-text-fill: #212122;
2333
+ --wds-status-toast-info-icon-fill: #FFFFFF;
2331
2334
  --wds-status-toast-text-font-line-height: 18px;
2332
2335
  --wds-status-toast-text-font-size: 14px;
2333
2336
  --wds-status-toast-width: 600px;
@@ -2433,8 +2436,11 @@
2433
2436
  --wds-thumbnail-title-padding-top: 4px;
2434
2437
  --wds-timeline-title-font-line-height: 16px;
2435
2438
  --wds-timeline-title-font-size: 12px;
2436
- --wds-toast-background-fill: #FFFFFF;
2439
+ --wds-toast-action-color: #FFFFFF;
2440
+ --wds-toast-background-fill: #212122;
2441
+ --wds-toast-border-radius: 12px;
2437
2442
  --wds-toast-horizontal-padding: 12px;
2443
+ --wds-toast-text-fill: #FFFFFF;
2438
2444
  --wds-toast-vertical-padding: 8px;
2439
2445
  --wds-toggle-button-border-color-dark: rgba(0, 0, 0, 0);
2440
2446
  --wds-toggle-button-border-color-dark-disabled: rgba(0, 0, 0, 0);
package/odeditor-dark/semantic.st.css CHANGED
@@ -8,6 +8,7 @@
8
8
  @property st-global(--wds-border-radius-surface-sunken);
9
9
  @property st-global(--wds-border-width-default);
10
10
  @property st-global(--wds-border-width-varied);
11
+ @property st-global(--wds-border-width-varied-secondary);
11
12
  @property st-global(--wds-color-border-ai-primary);
12
13
  @property st-global(--wds-color-border-ai-primary-active);
13
14
  @property st-global(--wds-color-border-ai-primary-disabled);
@@ -498,6 +499,7 @@
498
499
  --wds-border-radius-surface-sunken: 0px;
499
500
  --wds-border-width-default: 1px;
500
501
  --wds-border-width-varied: 0px;
502
+ --wds-border-width-varied-secondary: 1px;
501
503
  --wds-color-border-ai-primary: #ffffff;
502
504
  --wds-color-border-ai-primary-active: #ffffff;
503
505
  --wds-color-border-ai-primary-disabled: #ffffff;
@@ -898,7 +900,7 @@
898
900
  --wds-inner-shadow-y-primary: 1px;
899
901
  --wds-inner-shadow-y-secondary: 1px;
900
902
  --wds-shadow-blur-input: 3px;
901
- --wds-shadow-blur-primary-modal: 20px;
903
+ --wds-shadow-blur-primary-modal: 30px;
902
904
  --wds-shadow-blur-primary-overlay: 8px;
903
905
  --wds-shadow-blur-primary-overlay-dark: 8px;
904
906
  --wds-shadow-blur-primary-raised: 4px;
@@ -912,7 +914,7 @@
912
914
  --wds-shadow-blur-secondary-toggle-button: 1.7px;
913
915
  --wds-shadow-blur-tertiary-toggle-button: 0.6px;
914
916
  --wds-shadow-fill-input: rgba(0, 0, 0, .2);
915
- --wds-shadow-fill-primary-modal: rgba(0, 0, 0, .3);
917
+ --wds-shadow-fill-primary-modal: rgba(0, 0, 0, .2);
916
918
  --wds-shadow-fill-primary-overlay: rgba(0, 0, 0, .3);
917
919
  --wds-shadow-fill-primary-overlay-dark: rgba(0, 0, 0, .3);
918
920
  --wds-shadow-fill-primary-raised: rgba(0, 0, 0, .3);
@@ -941,13 +943,13 @@
941
943
  --wds-shadow-surface-overlay-dark: 0 12px 30px 0 rgba(0, 0, 0, .3), 0 0px 0px 0 rgba(0, 0, 0, .3);
942
944
  --wds-shadow-surface-raised: 0 2px 4px rgba(0, 0, 0, .05), 0 0 6px rgba(0, 0, 0, .1);
943
945
  --wds-shadow-x-input: 1px;
944
- --wds-shadow-x-primary-modal: 0px;
946
+ --wds-shadow-x-primary-modal: 2px;
945
947
  --wds-shadow-x-primary-toggle-button: 1px;
946
948
  --wds-shadow-x-secondary-raised: 0px;
947
949
  --wds-shadow-x-secondary-toggle-button: 1.2px;
948
950
  --wds-shadow-x-tertiary-toggle-button: 0.4px;
949
951
  --wds-shadow-y-input: 1px;
950
- --wds-shadow-y-primary-modal: 9;
952
+ --wds-shadow-y-primary-modal: 20px;
951
953
  --wds-shadow-y-primary-overlay: 0px;
952
954
  --wds-shadow-y-primary-overlay-dark: 0px;
953
955
  --wds-shadow-y-primary-raised: 0px;
@@ -956,7 +958,7 @@
956
958
  --wds-shadow-y-secondary-modal: 0px;
957
959
  --wds-shadow-y-secondary-overlay: 12;
958
960
  --wds-shadow-y-secondary-overlay-dark: 0px;
959
- --wds-shadow-y-secondary-raised: 2px;
961
+ --wds-shadow-y-secondary-raised: 4px;
960
962
  --wds-shadow-y-secondary-toggle: 0px;
961
963
  --wds-shadow-y-secondary-toggle-button: 1.2px;
962
964
  --wds-shadow-y-tertiary-toggle-button: 0.4px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.183.0",
3
+ "version": "1.185.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -34,5 +34,5 @@
34
34
  "author": "augustinasv@wix.com",
35
35
  "description": "Design system tokens",
36
36
  "packageManager": "yarn@3.5.0",
37
- "falconPackageHash": "11751591c770cac4a67e19dfa0d2a686f579f775226b88f6d6ff35a8"
37
+ "falconPackageHash": "508fb53e4fa4374c5ece203b9429d1bddbfecfe08fe8804895a26b05"
38
38
  }
package/semantic.st.css CHANGED
@@ -8,6 +8,7 @@
8
8
  @property st-global(--wds-border-radius-surface-sunken);
9
9
  @property st-global(--wds-border-width-default);
10
10
  @property st-global(--wds-border-width-varied);
11
+ @property st-global(--wds-border-width-varied-secondary);
11
12
  @property st-global(--wds-color-border-ai-primary);
12
13
  @property st-global(--wds-color-border-ai-primary-active);
13
14
  @property st-global(--wds-color-border-ai-primary-disabled);
@@ -502,6 +503,7 @@
502
503
  --wds-border-radius-surface-sunken: 0px;
503
504
  --wds-border-width-default: 1px;
504
505
  --wds-border-width-varied: 1px;
506
+ --wds-border-width-varied-secondary: 0px;
505
507
  --wds-color-border-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
506
508
  --wds-color-border-ai-primary-active: #ffffff;
507
509
  --wds-color-border-ai-primary-disabled: #ffffff;
package/studio/all.css CHANGED
@@ -383,6 +383,7 @@
383
383
  --wds-inner-shadow-blur-secondary: var(--wds-shadow-blur-0);
384
384
  --wds-inner-shadow-blur-primary: var(--wds-shadow-blur-0);
385
385
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-0);
386
+ --wds-border-width-varied-secondary: var(--wds-border-width-none);
386
387
  --wds-border-width-varied: var(--wds-border-width-100);
387
388
  --wds-border-width-default: var(--wds-border-width-100);
388
389
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -892,6 +893,7 @@
892
893
  --wds-toggle-button-border-color-standard-disabled: var(--wds-color-fill-standard-secondary-disabled);
893
894
  --wds-toast-vertical-padding: var(--wds-space-150);
894
895
  --wds-toast-horizontal-padding: var(--wds-space-200);
896
+ --wds-toast-border-radius: var(--wds-border-radius-400);
895
897
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
896
898
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-regular);
897
899
  --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-0);
@@ -1627,7 +1629,9 @@
1627
1629
  --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1628
1630
  --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1629
1631
  --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1632
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary-light);
1630
1633
  --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1634
+ --wds-toast-action-color: var(--wds-color-fill-light-primary);
1631
1635
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1632
1636
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1633
1637
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1648,7 +1652,6 @@
1648
1652
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
1649
1653
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1650
1654
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1651
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1652
1655
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1653
1656
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1654
1657
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
@@ -2019,6 +2022,7 @@
2019
2022
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
2020
2023
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2021
2024
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2025
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2022
2026
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2023
2027
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-small);
2024
2028
  --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
package/studio/all.scss CHANGED
@@ -483,6 +483,7 @@
483
483
  --wds-toggle-button-border-color-standard-disabled: var(--wds-color-fill-standard-secondary-disabled);
484
484
  --wds-toast-vertical-padding: var(--wds-space-150);
485
485
  --wds-toast-horizontal-padding: var(--wds-space-200);
486
+ --wds-toast-border-radius: var(--wds-border-radius-400);
486
487
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
487
488
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-regular);
488
489
  --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-0);
@@ -1458,6 +1459,7 @@
1458
1459
  --wds-breadcrumbs-on-dark-fill-hover: var(--wds-color-white-transparent-30);
1459
1460
  --wds-breadcrumbs-font-size-small: var(--wds-font-size-200);
1460
1461
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-100);
1462
+ --wds-border-width-varied-secondary: var(--wds-border-width-none);
1461
1463
  --wds-border-width-varied: var(--wds-border-width-100);
1462
1464
  --wds-border-width-default: var(--wds-border-width-100);
1463
1465
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -1611,7 +1613,9 @@
1611
1613
  --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1612
1614
  --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1613
1615
  --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1616
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary-light);
1614
1617
  --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1618
+ --wds-toast-action-color: var(--wds-color-fill-light-primary);
1615
1619
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1616
1620
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1617
1621
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1632,7 +1636,6 @@
1632
1636
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
1633
1637
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1634
1638
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1635
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1636
1639
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1637
1640
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1638
1641
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
@@ -2019,6 +2022,7 @@
2019
2022
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
2020
2023
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2021
2024
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2025
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2022
2026
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2023
2027
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-small);
2024
2028
  --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
package/studio/all.st.css CHANGED
@@ -52,6 +52,7 @@
52
52
  @property st-global(--wds-announcement-modal-title-font-size);
53
53
  @property st-global(--wds-avatar-group-gap-condensed);
54
54
  @property st-global(--wds-avatar-group-gap-default);
55
+ @property st-global(--wds-avatar-text-fill);
55
56
  @property st-global(--wds-background-blur-0);
56
57
  @property st-global(--wds-background-blur-50);
57
58
  @property st-global(--wds-background-blur-100);
@@ -123,6 +124,7 @@
123
124
  @property st-global(--wds-border-width-default);
124
125
  @property st-global(--wds-border-width-none);
125
126
  @property st-global(--wds-border-width-varied);
127
+ @property st-global(--wds-border-width-varied-secondary);
126
128
  @property st-global(--wds-breadcrumbs-border-radius);
127
129
  @property st-global(--wds-breadcrumbs-font-size-small);
128
130
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
@@ -1751,7 +1753,6 @@
1751
1753
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1752
1754
  @property st-global(--wds-space-viewport-spacing);
1753
1755
  @property st-global(--wds-status-toast-info-icon-fill);
1754
- @property st-global(--wds-status-toast-text-fill);
1755
1756
  @property st-global(--wds-status-toast-text-font-line-height);
1756
1757
  @property st-global(--wds-status-toast-text-font-size);
1757
1758
  @property st-global(--wds-status-toast-vertical-padding);
@@ -1849,8 +1850,11 @@
1849
1850
  @property st-global(--wds-thumbnail-title-padding-top);
1850
1851
  @property st-global(--wds-timeline-title-font-line-height);
1851
1852
  @property st-global(--wds-timeline-title-font-size);
1853
+ @property st-global(--wds-toast-action-color);
1852
1854
  @property st-global(--wds-toast-background-fill);
1855
+ @property st-global(--wds-toast-border-radius);
1853
1856
  @property st-global(--wds-toast-horizontal-padding);
1857
+ @property st-global(--wds-toast-text-fill);
1854
1858
  @property st-global(--wds-toast-vertical-padding);
1855
1859
  @property st-global(--wds-toggle-button-border-color-dark);
1856
1860
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -2147,6 +2151,7 @@
2147
2151
  --wds-announcement-modal-title-font-size: 24px;
2148
2152
  --wds-avatar-group-gap-condensed: -2px;
2149
2153
  --wds-avatar-group-gap-default: 4px;
2154
+ --wds-avatar-text-fill: #ffffff;
2150
2155
  --wds-background-blur-0: 0px;
2151
2156
  --wds-background-blur-50: 0px;
2152
2157
  --wds-background-blur-100: 0px;
@@ -2218,6 +2223,7 @@
2218
2223
  --wds-border-width-default: 1px;
2219
2224
  --wds-border-width-none: 0px;
2220
2225
  --wds-border-width-varied: 1px;
2226
+ --wds-border-width-varied-secondary: 0px;
2221
2227
  --wds-breadcrumbs-border-radius: 2px;
2222
2228
  --wds-breadcrumbs-font-size-small: 12px;
2223
2229
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
@@ -3846,7 +3852,6 @@
3846
3852
  --wds-space-padding-vertical-xx-tiny: 4px;
3847
3853
  --wds-space-viewport-spacing: 48px;
3848
3854
  --wds-status-toast-info-icon-fill: #ffffff;
3849
- --wds-status-toast-text-fill: #ffffff;
3850
3855
  --wds-status-toast-text-font-line-height: 24px;
3851
3856
  --wds-status-toast-text-font-size: 16px;
3852
3857
  --wds-status-toast-vertical-padding: 6px;
@@ -3944,8 +3949,11 @@
3944
3949
  --wds-thumbnail-title-padding-top: 4px;
3945
3950
  --wds-timeline-title-font-line-height: 16px;
3946
3951
  --wds-timeline-title-font-size: 12px;
3952
+ --wds-toast-action-color: #ffffff;
3947
3953
  --wds-toast-background-fill: #131720;
3954
+ --wds-toast-border-radius: 8px;
3948
3955
  --wds-toast-horizontal-padding: 8px;
3956
+ --wds-toast-text-fill: #ffffff;
3949
3957
  --wds-toast-vertical-padding: 6px;
3950
3958
  --wds-toggle-button-border-color-dark: #e2e3ea;
3951
3959
  --wds-toggle-button-border-color-dark-disabled: rgba(19, 23, 32, .1);