@wix/design-system-tokens 1.180.0 → 1.182.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 (23) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/all.css +3 -0
  3. package/all.scss +3 -0
  4. package/all.st.css +6 -0
  5. package/component.st.css +6 -0
  6. package/odeditor/all.css +4 -1
  7. package/odeditor/all.scss +4 -1
  8. package/odeditor/all.st.css +7 -1
  9. package/odeditor/component.st.css +7 -1
  10. package/odeditor-dark/all.css +20 -17
  11. package/odeditor-dark/all.scss +20 -17
  12. package/odeditor-dark/all.st.css +17 -11
  13. package/odeditor-dark/component.st.css +16 -10
  14. package/odeditor-dark/semantic.st.css +1 -1
  15. package/package.json +2 -2
  16. package/studio/all.css +4 -1
  17. package/studio/all.scss +4 -1
  18. package/studio/all.st.css +7 -1
  19. package/studio/component.st.css +7 -1
  20. package/wixel/all.css +3 -0
  21. package/wixel/all.scss +3 -0
  22. package/wixel/all.st.css +6 -0
  23. package/wixel/component.st.css +6 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ ## 1.182.0 - 2026-04-13
2
+
3
+ ### Bug Fixes
4
+
5
+ - fix(SidePanel): made standard skin also use the blur background color [16123](https://github.com/wix-private/wix-design-systems/pull/16123)
6
+
7
+ ## 1.181.0 - 2026-04-09
8
+
9
+ ### Bug Fixes
10
+
11
+ - fix(ToggleButton): fixed shadows for dark theme [16116](https://github.com/wix-private/wix-design-systems/pull/16116)
12
+ - fix(ToggleButton): radius in Harmony theme [16119](https://github.com/wix-private/wix-design-systems/pull/16119)
13
+
1
14
  ## 1.180.0 - 2026-04-07
2
15
 
3
16
  ### Features
package/all.css CHANGED
@@ -271,6 +271,8 @@
271
271
  --wds-toggle-switch-knob-size-medium: 18px;
272
272
  --wds-toggle-switch-knob-size-large: 22px;
273
273
  --wds-toggle-switch-icon: true;
274
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
275
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
274
276
  --wds-tabs-selection-height: 3px;
275
277
  --wds-swatches-swatch-active-border-radius-small: 5px;
276
278
  --wds-swatches-swatch-active-border-radius-medium: 9px;
@@ -1064,6 +1066,7 @@
1064
1066
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-100);
1065
1067
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-100);
1066
1068
  --wds-segmented-toggle-border-width: var(--wds-border-width-100);
1069
+ --wds-segmented-toggle-border-radius-tiny: var(--wds-border-radius-300);
1067
1070
  --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-300);
1068
1071
  --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-300);
1069
1072
  --wds-section-helper-vertical-padding-small: var(--wds-space-150);
package/all.scss CHANGED
@@ -7,6 +7,8 @@
7
7
  --wds-toggle-switch-knob-size-medium: 18px;
8
8
  --wds-toggle-switch-knob-size-large: 22px;
9
9
  --wds-toggle-switch-icon: true;
10
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
11
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
10
12
  --wds-tabs-selection-height: 3px;
11
13
  --wds-swatches-swatch-active-border-radius-small: 5px;
12
14
  --wds-swatches-swatch-active-border-radius-medium: 9px;
@@ -714,6 +716,7 @@
714
716
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-100);
715
717
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-100);
716
718
  --wds-segmented-toggle-border-width: var(--wds-border-width-100);
719
+ --wds-segmented-toggle-border-radius-tiny: var(--wds-border-radius-300);
717
720
  --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-300);
718
721
  --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-300);
719
722
  --wds-section-helper-vertical-padding-small: var(--wds-space-150);
package/all.st.css CHANGED
@@ -1415,6 +1415,7 @@
1415
1415
  @property st-global(--wds-segmented-toggle-border-hover);
1416
1416
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1417
1417
  @property st-global(--wds-segmented-toggle-border-radius-small);
1418
+ @property st-global(--wds-segmented-toggle-border-radius-tiny);
1418
1419
  @property st-global(--wds-segmented-toggle-border-width);
1419
1420
  @property st-global(--wds-segmented-toggle-border-width-default);
1420
1421
  @property st-global(--wds-segmented-toggle-border-width-hover);
@@ -1947,6 +1948,8 @@
1947
1948
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1948
1949
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1949
1950
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1951
+ @property st-global(--wds-toggle-button-shadow-spread-secondary);
1952
+ @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1950
1953
  @property st-global(--wds-toggle-button-shadow-x-primary);
1951
1954
  @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1952
1955
  @property st-global(--wds-toggle-button-shadow-x-secondary);
@@ -3511,6 +3514,7 @@
3511
3514
  --wds-segmented-toggle-border-hover: #a8caff;
3512
3515
  --wds-segmented-toggle-border-radius-medium: 6px;
3513
3516
  --wds-segmented-toggle-border-radius-small: 6px;
3517
+ --wds-segmented-toggle-border-radius-tiny: 6px;
3514
3518
  --wds-segmented-toggle-border-width: 1px;
3515
3519
  --wds-segmented-toggle-border-width-default: 1px;
3516
3520
  --wds-segmented-toggle-border-width-hover: 1px;
@@ -4043,6 +4047,8 @@
4043
4047
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(0, 6, 36, 0);
4044
4048
  --wds-toggle-button-shadow-fill-tertiary: rgba(0, 6, 36, 0);
4045
4049
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(0, 6, 36, 0);
4050
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
4051
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
4046
4052
  --wds-toggle-button-shadow-x-primary: 0px;
4047
4053
  --wds-toggle-button-shadow-x-primary-inverted: 0px;
4048
4054
  --wds-toggle-button-shadow-x-secondary: 0px;
package/component.st.css CHANGED
@@ -848,6 +848,7 @@
848
848
  @property st-global(--wds-segmented-toggle-border-hover);
849
849
  @property st-global(--wds-segmented-toggle-border-radius-medium);
850
850
  @property st-global(--wds-segmented-toggle-border-radius-small);
851
+ @property st-global(--wds-segmented-toggle-border-radius-tiny);
851
852
  @property st-global(--wds-segmented-toggle-border-width);
852
853
  @property st-global(--wds-segmented-toggle-border-width-default);
853
854
  @property st-global(--wds-segmented-toggle-border-width-hover);
@@ -1227,6 +1228,8 @@
1227
1228
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1228
1229
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1229
1230
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1231
+ @property st-global(--wds-toggle-button-shadow-spread-secondary);
1232
+ @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1230
1233
  @property st-global(--wds-toggle-button-shadow-x-primary);
1231
1234
  @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1232
1235
  @property st-global(--wds-toggle-button-shadow-x-secondary);
@@ -2222,6 +2225,7 @@
2222
2225
  --wds-segmented-toggle-border-hover: #a8caff;
2223
2226
  --wds-segmented-toggle-border-radius-medium: 6px;
2224
2227
  --wds-segmented-toggle-border-radius-small: 6px;
2228
+ --wds-segmented-toggle-border-radius-tiny: 6px;
2225
2229
  --wds-segmented-toggle-border-width: 1px;
2226
2230
  --wds-segmented-toggle-border-width-default: 1px;
2227
2231
  --wds-segmented-toggle-border-width-hover: 1px;
@@ -2601,6 +2605,8 @@
2601
2605
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(0, 6, 36, 0);
2602
2606
  --wds-toggle-button-shadow-fill-tertiary: rgba(0, 6, 36, 0);
2603
2607
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(0, 6, 36, 0);
2608
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
2609
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
2604
2610
  --wds-toggle-button-shadow-x-primary: 0px;
2605
2611
  --wds-toggle-button-shadow-x-primary-inverted: 0px;
2606
2612
  --wds-toggle-button-shadow-x-secondary: 0px;
package/odeditor/all.css CHANGED
@@ -300,6 +300,8 @@
300
300
  --wds-toggle-button-shadow-x-secondary: 2px;
301
301
  --wds-toggle-button-shadow-x-primary-inverted: 1px;
302
302
  --wds-toggle-button-shadow-x-primary: 1px;
303
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
304
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
303
305
  --wds-toggle-button-shadow-blur-tertiary-inverted: 0.8px;
304
306
  --wds-toggle-button-shadow-blur-tertiary: 0.8px;
305
307
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
@@ -878,7 +880,7 @@
878
880
  --wds-toggle-button-fill-dark-selected: var(--wds-color-black-550);
879
881
  --wds-toggle-button-fill-dark-disabled: var(--wds-color-black-100-transparent-0);
880
882
  --wds-toggle-button-fill-dark: var(--wds-color-black-100-transparent-0);
881
- --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
883
+ --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-300);
882
884
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-400);
883
885
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-400);
884
886
  --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-400);
@@ -1093,6 +1095,7 @@
1093
1095
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-0);
1094
1096
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-0);
1095
1097
  --wds-segmented-toggle-border-width: var(--wds-border-width-0);
1098
+ --wds-segmented-toggle-border-radius-tiny: var(--wds-border-radius-200);
1096
1099
  --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-300);
1097
1100
  --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-300);
1098
1101
  --wds-segmented-toggle-border-color-selected: var(--wds-color-black-100-transparent-0);
package/odeditor/all.scss CHANGED
@@ -22,6 +22,8 @@
22
22
  --wds-toggle-button-shadow-x-secondary: 2px;
23
23
  --wds-toggle-button-shadow-x-primary-inverted: 1px;
24
24
  --wds-toggle-button-shadow-x-primary: 1px;
25
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
26
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
25
27
  --wds-toggle-button-shadow-blur-tertiary-inverted: 0.8px;
26
28
  --wds-toggle-button-shadow-blur-tertiary: 0.8px;
27
29
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
@@ -458,7 +460,7 @@
458
460
  --wds-toggle-button-fill-dark-selected: var(--wds-color-black-550);
459
461
  --wds-toggle-button-fill-dark-disabled: var(--wds-color-black-100-transparent-0);
460
462
  --wds-toggle-button-fill-dark: var(--wds-color-black-100-transparent-0);
461
- --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
463
+ --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-300);
462
464
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-400);
463
465
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-400);
464
466
  --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-400);
@@ -755,6 +757,7 @@
755
757
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-0);
756
758
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-0);
757
759
  --wds-segmented-toggle-border-width: var(--wds-border-width-0);
760
+ --wds-segmented-toggle-border-radius-tiny: var(--wds-border-radius-200);
758
761
  --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-300);
759
762
  --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-300);
760
763
  --wds-segmented-toggle-border-color-selected: var(--wds-color-black-100-transparent-0);
package/odeditor/all.st.css CHANGED
@@ -1358,6 +1358,7 @@
1358
1358
  @property st-global(--wds-segmented-toggle-border-hover);
1359
1359
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1360
1360
  @property st-global(--wds-segmented-toggle-border-radius-small);
1361
+ @property st-global(--wds-segmented-toggle-border-radius-tiny);
1361
1362
  @property st-global(--wds-segmented-toggle-border-width);
1362
1363
  @property st-global(--wds-segmented-toggle-border-width-default);
1363
1364
  @property st-global(--wds-segmented-toggle-border-width-hover);
@@ -1905,6 +1906,8 @@
1905
1906
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1906
1907
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1907
1908
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1909
+ @property st-global(--wds-toggle-button-shadow-spread-secondary);
1910
+ @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1908
1911
  @property st-global(--wds-toggle-button-shadow-x-primary);
1909
1912
  @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1910
1913
  @property st-global(--wds-toggle-button-shadow-x-secondary);
@@ -3400,6 +3403,7 @@
3400
3403
  --wds-segmented-toggle-border-hover: #acbeff;
3401
3404
  --wds-segmented-toggle-border-radius-medium: 6px;
3402
3405
  --wds-segmented-toggle-border-radius-small: 6px;
3406
+ --wds-segmented-toggle-border-radius-tiny: 4px;
3403
3407
  --wds-segmented-toggle-border-width: 0px;
3404
3408
  --wds-segmented-toggle-border-width-default: 0px;
3405
3409
  --wds-segmented-toggle-border-width-hover: 0px;
@@ -3868,7 +3872,7 @@
3868
3872
  --wds-toggle-button-border-radius-square-large: 8px;
3869
3873
  --wds-toggle-button-border-radius-square-medium: 8px;
3870
3874
  --wds-toggle-button-border-radius-square-small: 8px;
3871
- --wds-toggle-button-border-radius-square-tiny: 8px;
3875
+ --wds-toggle-button-border-radius-square-tiny: 6px;
3872
3876
  --wds-toggle-button-fill-dark: rgba(19, 23, 32, 0);
3873
3877
  --wds-toggle-button-fill-dark-disabled: rgba(19, 23, 32, 0);
3874
3878
  --wds-toggle-button-fill-dark-hover: #e8e7e7;
@@ -3947,6 +3951,8 @@
3947
3951
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, .2);
3948
3952
  --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, .25);
3949
3953
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, .25);
3954
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
3955
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
3950
3956
  --wds-toggle-button-shadow-x-primary: 1px;
3951
3957
  --wds-toggle-button-shadow-x-primary-inverted: 1px;
3952
3958
  --wds-toggle-button-shadow-x-secondary: 2px;
package/odeditor/component.st.css CHANGED
@@ -795,6 +795,7 @@
795
795
  @property st-global(--wds-segmented-toggle-border-hover);
796
796
  @property st-global(--wds-segmented-toggle-border-radius-medium);
797
797
  @property st-global(--wds-segmented-toggle-border-radius-small);
798
+ @property st-global(--wds-segmented-toggle-border-radius-tiny);
798
799
  @property st-global(--wds-segmented-toggle-border-width);
799
800
  @property st-global(--wds-segmented-toggle-border-width-default);
800
801
  @property st-global(--wds-segmented-toggle-border-width-hover);
@@ -1188,6 +1189,8 @@
1188
1189
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1189
1190
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1190
1191
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1192
+ @property st-global(--wds-toggle-button-shadow-spread-secondary);
1193
+ @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1191
1194
  @property st-global(--wds-toggle-button-shadow-x-primary);
1192
1195
  @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1193
1196
  @property st-global(--wds-toggle-button-shadow-x-secondary);
@@ -2118,6 +2121,7 @@
2118
2121
  --wds-segmented-toggle-border-hover: #acbeff;
2119
2122
  --wds-segmented-toggle-border-radius-medium: 6px;
2120
2123
  --wds-segmented-toggle-border-radius-small: 6px;
2124
+ --wds-segmented-toggle-border-radius-tiny: 4px;
2121
2125
  --wds-segmented-toggle-border-width: 0px;
2122
2126
  --wds-segmented-toggle-border-width-default: 0px;
2123
2127
  --wds-segmented-toggle-border-width-hover: 0px;
@@ -2432,7 +2436,7 @@
2432
2436
  --wds-toggle-button-border-radius-square-large: 8px;
2433
2437
  --wds-toggle-button-border-radius-square-medium: 8px;
2434
2438
  --wds-toggle-button-border-radius-square-small: 8px;
2435
- --wds-toggle-button-border-radius-square-tiny: 8px;
2439
+ --wds-toggle-button-border-radius-square-tiny: 6px;
2436
2440
  --wds-toggle-button-fill-dark: rgba(19, 23, 32, 0);
2437
2441
  --wds-toggle-button-fill-dark-disabled: rgba(19, 23, 32, 0);
2438
2442
  --wds-toggle-button-fill-dark-hover: #e8e7e7;
@@ -2511,6 +2515,8 @@
2511
2515
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, .2);
2512
2516
  --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, .25);
2513
2517
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, .25);
2518
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
2519
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
2514
2520
  --wds-toggle-button-shadow-x-primary: 1px;
2515
2521
  --wds-toggle-button-shadow-x-primary-inverted: 1px;
2516
2522
  --wds-toggle-button-shadow-x-secondary: 2px;
package/odeditor-dark/all.css CHANGED
@@ -89,7 +89,7 @@
89
89
  --wds-font-family-display: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
90
90
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
91
91
  --wds-color-text-stage-section: #6f56f9;
92
- --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.70);
92
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.92);
93
93
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
94
94
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
95
95
  --wds-color-fill-stage-section-secondary: #d9d2ff;
@@ -300,18 +300,26 @@
300
300
  --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
301
301
  --wds-toggle-button-shadow-y-secondary: 1.2px;
302
302
  --wds-toggle-button-shadow-y-primary-inverted: 5px;
303
+ --wds-toggle-button-shadow-y-primary: 4px;
303
304
  --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
304
305
  --wds-toggle-button-shadow-x-tertiary: 0.4px;
305
306
  --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
306
307
  --wds-toggle-button-shadow-x-secondary: 1.2px;
307
308
  --wds-toggle-button-shadow-x-primary-inverted: -8px;
309
+ --wds-toggle-button-shadow-x-primary: 1px;
310
+ --wds-toggle-button-shadow-spread-tertiary: 0px;
311
+ --wds-toggle-button-shadow-spread-secondary: 0px;
308
312
  --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
309
313
  --wds-toggle-button-shadow-blur-tertiary: 0.6px;
310
314
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
311
315
  --wds-toggle-button-shadow-blur-secondary: 1.7px;
312
316
  --wds-toggle-button-shadow-blur-primary-inverted: 30px;
313
- --wds-toggle-button-inner-shadow-fill-secondary: #404040;
314
- --wds-toggle-button-inner-shadow-fill-primary: #333333;
317
+ --wds-toggle-button-inner-shadow-y-secondary: 1px;
318
+ --wds-toggle-button-inner-shadow-y-primary: 1px;
319
+ --wds-toggle-button-inner-shadow-x-secondary: 1px;
320
+ --wds-toggle-button-inner-shadow-x-primary: 1px;
321
+ --wds-toggle-button-inner-shadow-fill-secondary: #4a4a4c;
322
+ --wds-toggle-button-inner-shadow-fill-primary: #2c2d30;
315
323
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
316
324
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
317
325
  --wds-tabs-selection-height: 3px;
@@ -833,15 +841,13 @@
833
841
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
834
842
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
835
843
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
836
- --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-100);
837
- --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-25);
838
- --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-10);
839
- --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-25);
840
- --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-300-transparent-20);
841
- --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-15);
842
- --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-5);
843
- --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-5);
844
- --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-50);
844
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-white-transparent-10);
845
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-blue-500);
846
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-white-transparent-20);
847
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-color-blue-600);
848
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-white-transparent-5);
849
+ --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-0);
850
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-75);
845
851
  --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
846
852
  --wds-toggle-button-padding-tiny: var(--wds-space-200);
847
853
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
@@ -862,10 +868,6 @@
862
868
  --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-black-500);
863
869
  --wds-toggle-button-label-fill-dark-selected-disabled: var(--wds-color-black-500);
864
870
  --wds-toggle-button-label-fill-dark-disabled: var(--wds-color-black-500);
865
- --wds-toggle-button-inner-shadow-y-secondary: var(--wds-shadow-y-25);
866
- --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-25);
867
- --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-25);
868
- --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-25);
869
871
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-blue-400);
870
872
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-black-700);
871
873
  --wds-toggle-button-fill-standard-selected: var(--wds-color-black-750);
@@ -883,7 +885,7 @@
883
885
  --wds-toggle-button-fill-dark-selected: var(--wds-color-black-700);
884
886
  --wds-toggle-button-fill-dark-disabled: var(--wds-color-black-100-transparent-0);
885
887
  --wds-toggle-button-fill-dark: var(--wds-color-black-100-transparent-0);
886
- --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
888
+ --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-300);
887
889
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-400);
888
890
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-400);
889
891
  --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-400);
@@ -1097,6 +1099,7 @@
1097
1099
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-0);
1098
1100
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-0);
1099
1101
  --wds-segmented-toggle-border-width: var(--wds-border-width-0);
1102
+ --wds-segmented-toggle-border-radius-tiny: var(--wds-border-radius-200);
1100
1103
  --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-300);
1101
1104
  --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-300);
1102
1105
  --wds-segmented-toggle-border-color-selected: var(--wds-color-black-100-transparent-0);
package/odeditor-dark/all.scss CHANGED
@@ -15,18 +15,26 @@
15
15
  --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
16
16
  --wds-toggle-button-shadow-y-secondary: 1.2px;
17
17
  --wds-toggle-button-shadow-y-primary-inverted: 5px;
18
+ --wds-toggle-button-shadow-y-primary: 4px;
18
19
  --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
19
20
  --wds-toggle-button-shadow-x-tertiary: 0.4px;
20
21
  --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
21
22
  --wds-toggle-button-shadow-x-secondary: 1.2px;
22
23
  --wds-toggle-button-shadow-x-primary-inverted: -8px;
24
+ --wds-toggle-button-shadow-x-primary: 1px;
25
+ --wds-toggle-button-shadow-spread-tertiary: 0px;
26
+ --wds-toggle-button-shadow-spread-secondary: 0px;
23
27
  --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
24
28
  --wds-toggle-button-shadow-blur-tertiary: 0.6px;
25
29
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
26
30
  --wds-toggle-button-shadow-blur-secondary: 1.7px;
27
31
  --wds-toggle-button-shadow-blur-primary-inverted: 30px;
28
- --wds-toggle-button-inner-shadow-fill-secondary: #404040;
29
- --wds-toggle-button-inner-shadow-fill-primary: #333333;
32
+ --wds-toggle-button-inner-shadow-y-secondary: 1px;
33
+ --wds-toggle-button-inner-shadow-y-primary: 1px;
34
+ --wds-toggle-button-inner-shadow-x-secondary: 1px;
35
+ --wds-toggle-button-inner-shadow-x-primary: 1px;
36
+ --wds-toggle-button-inner-shadow-fill-secondary: #4a4a4c;
37
+ --wds-toggle-button-inner-shadow-fill-primary: #2c2d30;
30
38
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
31
39
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
32
40
  --wds-tabs-selection-height: 3px;
@@ -232,7 +240,7 @@
232
240
  --wds-color-green-100: #53DA98;
233
241
  --wds-color-green-50: #A3E5C5;
234
242
  --wds-color-green-0: #D6ECE1;
235
- --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.70);
243
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.92);
236
244
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
237
245
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
238
246
  --wds-color-fill-stage-section-secondary: #d9d2ff;
@@ -415,15 +423,13 @@
415
423
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
416
424
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
417
425
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
418
- --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-100);
419
- --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-25);
420
- --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-10);
421
- --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-25);
422
- --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-300-transparent-20);
423
- --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-15);
424
- --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-5);
425
- --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-5);
426
- --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-50);
426
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-white-transparent-10);
427
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-blue-500);
428
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-white-transparent-20);
429
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-color-blue-600);
430
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-white-transparent-5);
431
+ --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-0);
432
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-75);
427
433
  --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
428
434
  --wds-toggle-button-padding-tiny: var(--wds-space-200);
429
435
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
@@ -444,10 +450,6 @@
444
450
  --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-black-500);
445
451
  --wds-toggle-button-label-fill-dark-selected-disabled: var(--wds-color-black-500);
446
452
  --wds-toggle-button-label-fill-dark-disabled: var(--wds-color-black-500);
447
- --wds-toggle-button-inner-shadow-y-secondary: var(--wds-shadow-y-25);
448
- --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-25);
449
- --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-25);
450
- --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-25);
451
453
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-blue-400);
452
454
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-black-700);
453
455
  --wds-toggle-button-fill-standard-selected: var(--wds-color-black-750);
@@ -465,7 +467,7 @@
465
467
  --wds-toggle-button-fill-dark-selected: var(--wds-color-black-700);
466
468
  --wds-toggle-button-fill-dark-disabled: var(--wds-color-black-100-transparent-0);
467
469
  --wds-toggle-button-fill-dark: var(--wds-color-black-100-transparent-0);
468
- --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
470
+ --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-300);
469
471
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-400);
470
472
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-400);
471
473
  --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-400);
@@ -759,6 +761,7 @@
759
761
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-0);
760
762
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-0);
761
763
  --wds-segmented-toggle-border-width: var(--wds-border-width-0);
764
+ --wds-segmented-toggle-border-radius-tiny: var(--wds-border-radius-200);
762
765
  --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-300);
763
766
  --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-300);
764
767
  --wds-segmented-toggle-border-color-selected: var(--wds-color-black-100-transparent-0);
package/odeditor-dark/all.st.css CHANGED
@@ -1360,6 +1360,7 @@
1360
1360
  @property st-global(--wds-segmented-toggle-border-hover);
1361
1361
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1362
1362
  @property st-global(--wds-segmented-toggle-border-radius-small);
1363
+ @property st-global(--wds-segmented-toggle-border-radius-tiny);
1363
1364
  @property st-global(--wds-segmented-toggle-border-width);
1364
1365
  @property st-global(--wds-segmented-toggle-border-width-default);
1365
1366
  @property st-global(--wds-segmented-toggle-border-width-hover);
@@ -1907,6 +1908,8 @@
1907
1908
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1908
1909
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1909
1910
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1911
+ @property st-global(--wds-toggle-button-shadow-spread-secondary);
1912
+ @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1910
1913
  @property st-global(--wds-toggle-button-shadow-x-primary);
1911
1914
  @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1912
1915
  @property st-global(--wds-toggle-button-shadow-x-secondary);
@@ -2697,7 +2700,7 @@
2697
2700
  --wds-color-fill-surface-modal-backdrop: rgba(212, 211, 210, .5);
2698
2701
  --wds-color-fill-surface-neutral: #2D2D2E;
2699
2702
  --wds-color-fill-surface-overlay: #212122;
2700
- --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.70);
2703
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.92);
2701
2704
  --wds-color-fill-surface-overlay-dark: #FFFFFF;
2702
2705
  --wds-color-fill-surface-premium: #111214;
2703
2706
  --wds-color-fill-surface-raised: #212122;
@@ -3404,6 +3407,7 @@
3404
3407
  --wds-segmented-toggle-border-hover: #3F4D6E;
3405
3408
  --wds-segmented-toggle-border-radius-medium: 6px;
3406
3409
  --wds-segmented-toggle-border-radius-small: 6px;
3410
+ --wds-segmented-toggle-border-radius-tiny: 4px;
3407
3411
  --wds-segmented-toggle-border-width: 0px;
3408
3412
  --wds-segmented-toggle-border-width-default: 0px;
3409
3413
  --wds-segmented-toggle-border-width-hover: 0px;
@@ -3872,7 +3876,7 @@
3872
3876
  --wds-toggle-button-border-radius-square-large: 8px;
3873
3877
  --wds-toggle-button-border-radius-square-medium: 8px;
3874
3878
  --wds-toggle-button-border-radius-square-small: 8px;
3875
- --wds-toggle-button-border-radius-square-tiny: 8px;
3879
+ --wds-toggle-button-border-radius-square-tiny: 6px;
3876
3880
  --wds-toggle-button-fill-dark: rgba(255, 255, 255, 0);
3877
3881
  --wds-toggle-button-fill-dark-disabled: rgba(255, 255, 255, 0);
3878
3882
  --wds-toggle-button-fill-dark-hover: #454544;
@@ -3896,8 +3900,8 @@
3896
3900
  --wds-toggle-button-fill-standard-selected-hover: #2D354E;
3897
3901
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
3898
3902
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
3899
- --wds-toggle-button-inner-shadow-fill-primary: #333333;
3900
- --wds-toggle-button-inner-shadow-fill-secondary: #404040;
3903
+ --wds-toggle-button-inner-shadow-fill-primary: #2c2d30;
3904
+ --wds-toggle-button-inner-shadow-fill-secondary: #4a4a4c;
3901
3905
  --wds-toggle-button-inner-shadow-x-primary: 1px;
3902
3906
  --wds-toggle-button-inner-shadow-x-secondary: 1px;
3903
3907
  --wds-toggle-button-inner-shadow-y-primary: 1px;
@@ -3939,18 +3943,20 @@
3939
3943
  --wds-toggle-button-padding-small-round: 16px;
3940
3944
  --wds-toggle-button-padding-tiny: 8px;
3941
3945
  --wds-toggle-button-padding-tiny-round: 12px;
3942
- --wds-toggle-button-shadow-blur-primary: 4px;
3946
+ --wds-toggle-button-shadow-blur-primary: 6px;
3943
3947
  --wds-toggle-button-shadow-blur-primary-inverted: 30px;
3944
3948
  --wds-toggle-button-shadow-blur-secondary: 1.7px;
3945
3949
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
3946
3950
  --wds-toggle-button-shadow-blur-tertiary: 0.6px;
3947
3951
  --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
3948
- --wds-toggle-button-shadow-fill-primary: rgba(255, 255, 255, .05);
3949
- --wds-toggle-button-shadow-fill-primary-inverted: rgba(255, 255, 255, .05);
3950
- --wds-toggle-button-shadow-fill-secondary: rgba(255, 255, 255, .15);
3951
- --wds-toggle-button-shadow-fill-secondary-inverted: rgba(168, 166, 165, 0.2);
3952
- --wds-toggle-button-shadow-fill-tertiary: rgba(255, 255, 255, .25);
3953
- --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(255, 255, 255, .1);
3952
+ --wds-toggle-button-shadow-fill-primary: rgba(255, 255, 255, 0);
3953
+ --wds-toggle-button-shadow-fill-primary-inverted: rgba(0, 0, 0, .05);
3954
+ --wds-toggle-button-shadow-fill-secondary: #111214;
3955
+ --wds-toggle-button-shadow-fill-secondary-inverted: rgba(0, 0, 0, .2);
3956
+ --wds-toggle-button-shadow-fill-tertiary: #212328;
3957
+ --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(0, 0, 0, .1);
3958
+ --wds-toggle-button-shadow-spread-secondary: 0px;
3959
+ --wds-toggle-button-shadow-spread-tertiary: 0px;
3954
3960
  --wds-toggle-button-shadow-x-primary: 1px;
3955
3961
  --wds-toggle-button-shadow-x-primary-inverted: -8px;
3956
3962
  --wds-toggle-button-shadow-x-secondary: 1.2px;
package/odeditor-dark/component.st.css CHANGED
@@ -795,6 +795,7 @@
795
795
  @property st-global(--wds-segmented-toggle-border-hover);
796
796
  @property st-global(--wds-segmented-toggle-border-radius-medium);
797
797
  @property st-global(--wds-segmented-toggle-border-radius-small);
798
+ @property st-global(--wds-segmented-toggle-border-radius-tiny);
798
799
  @property st-global(--wds-segmented-toggle-border-width);
799
800
  @property st-global(--wds-segmented-toggle-border-width-default);
800
801
  @property st-global(--wds-segmented-toggle-border-width-hover);
@@ -1188,6 +1189,8 @@
1188
1189
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1189
1190
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1190
1191
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1192
+ @property st-global(--wds-toggle-button-shadow-spread-secondary);
1193
+ @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1191
1194
  @property st-global(--wds-toggle-button-shadow-x-primary);
1192
1195
  @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1193
1196
  @property st-global(--wds-toggle-button-shadow-x-secondary);
@@ -2118,6 +2121,7 @@
2118
2121
  --wds-segmented-toggle-border-hover: #3F4D6E;
2119
2122
  --wds-segmented-toggle-border-radius-medium: 6px;
2120
2123
  --wds-segmented-toggle-border-radius-small: 6px;
2124
+ --wds-segmented-toggle-border-radius-tiny: 4px;
2121
2125
  --wds-segmented-toggle-border-width: 0px;
2122
2126
  --wds-segmented-toggle-border-width-default: 0px;
2123
2127
  --wds-segmented-toggle-border-width-hover: 0px;
@@ -2432,7 +2436,7 @@
2432
2436
  --wds-toggle-button-border-radius-square-large: 8px;
2433
2437
  --wds-toggle-button-border-radius-square-medium: 8px;
2434
2438
  --wds-toggle-button-border-radius-square-small: 8px;
2435
- --wds-toggle-button-border-radius-square-tiny: 8px;
2439
+ --wds-toggle-button-border-radius-square-tiny: 6px;
2436
2440
  --wds-toggle-button-fill-dark: rgba(255, 255, 255, 0);
2437
2441
  --wds-toggle-button-fill-dark-disabled: rgba(255, 255, 255, 0);
2438
2442
  --wds-toggle-button-fill-dark-hover: #454544;
@@ -2456,8 +2460,8 @@
2456
2460
  --wds-toggle-button-fill-standard-selected-hover: #2D354E;
2457
2461
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
2458
2462
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
2459
- --wds-toggle-button-inner-shadow-fill-primary: #333333;
2460
- --wds-toggle-button-inner-shadow-fill-secondary: #404040;
2463
+ --wds-toggle-button-inner-shadow-fill-primary: #2c2d30;
2464
+ --wds-toggle-button-inner-shadow-fill-secondary: #4a4a4c;
2461
2465
  --wds-toggle-button-inner-shadow-x-primary: 1px;
2462
2466
  --wds-toggle-button-inner-shadow-x-secondary: 1px;
2463
2467
  --wds-toggle-button-inner-shadow-y-primary: 1px;
@@ -2499,18 +2503,20 @@
2499
2503
  --wds-toggle-button-padding-small-round: 16px;
2500
2504
  --wds-toggle-button-padding-tiny: 8px;
2501
2505
  --wds-toggle-button-padding-tiny-round: 12px;
2502
- --wds-toggle-button-shadow-blur-primary: 4px;
2506
+ --wds-toggle-button-shadow-blur-primary: 6px;
2503
2507
  --wds-toggle-button-shadow-blur-primary-inverted: 30px;
2504
2508
  --wds-toggle-button-shadow-blur-secondary: 1.7px;
2505
2509
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
2506
2510
  --wds-toggle-button-shadow-blur-tertiary: 0.6px;
2507
2511
  --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
2508
- --wds-toggle-button-shadow-fill-primary: rgba(255, 255, 255, .05);
2509
- --wds-toggle-button-shadow-fill-primary-inverted: rgba(255, 255, 255, .05);
2510
- --wds-toggle-button-shadow-fill-secondary: rgba(255, 255, 255, .15);
2511
- --wds-toggle-button-shadow-fill-secondary-inverted: rgba(168, 166, 165, 0.2);
2512
- --wds-toggle-button-shadow-fill-tertiary: rgba(255, 255, 255, .25);
2513
- --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(255, 255, 255, .1);
2512
+ --wds-toggle-button-shadow-fill-primary: rgba(255, 255, 255, 0);
2513
+ --wds-toggle-button-shadow-fill-primary-inverted: rgba(0, 0, 0, .05);
2514
+ --wds-toggle-button-shadow-fill-secondary: #111214;
2515
+ --wds-toggle-button-shadow-fill-secondary-inverted: rgba(0, 0, 0, .2);
2516
+ --wds-toggle-button-shadow-fill-tertiary: #212328;
2517
+ --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(0, 0, 0, .1);
2518
+ --wds-toggle-button-shadow-spread-secondary: 0px;
2519
+ --wds-toggle-button-shadow-spread-tertiary: 0px;
2514
2520
  --wds-toggle-button-shadow-x-primary: 1px;
2515
2521
  --wds-toggle-button-shadow-x-primary-inverted: -8px;
2516
2522
  --wds-toggle-button-shadow-x-secondary: 1.2px;
package/odeditor-dark/semantic.st.css CHANGED
@@ -777,7 +777,7 @@
777
777
  --wds-color-fill-surface-modal-backdrop: rgba(212, 211, 210, .5);
778
778
  --wds-color-fill-surface-neutral: #2D2D2E;
779
779
  --wds-color-fill-surface-overlay: #212122;
780
- --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.70);
780
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.92);
781
781
  --wds-color-fill-surface-overlay-dark: #FFFFFF;
782
782
  --wds-color-fill-surface-premium: #111214;
783
783
  --wds-color-fill-surface-raised: #212122;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.180.0",
3
+ "version": "1.182.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": "44ec1d496dca4fd3695356a822ac4edc16fdc77458ff5b4a41b77629"
37
+ "falconPackageHash": "6de0d7e2c16afae1767dc6c3840390466c0f0982df963641caf0fc10"
38
38
  }
package/studio/all.css CHANGED
@@ -299,6 +299,8 @@
299
299
  --wds-toggle-switch-knob-size-medium: 16px;
300
300
  --wds-toggle-switch-knob-size-large: 20px;
301
301
  --wds-toggle-switch-icon: false;
302
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
303
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
302
304
  --wds-tabs-selection-height: 3px;
303
305
  --wds-swatches-swatch-active-border-radius-small: 5px;
304
306
  --wds-swatches-swatch-active-border-radius-medium: 7px;
@@ -1061,7 +1063,7 @@
1061
1063
  --wds-select-area-border-radius: var(--wds-border-radius-200);
1062
1064
  --wds-segmented-toggle-value-fill-selected-disabled: var(--wds-color-text-disabled);
1063
1065
  --wds-segmented-toggle-value-fill-disabled: var(--wds-color-text-disabled);
1064
- --wds-segmented-toggle-size-tiny: var(--wds-space-400);
1066
+ --wds-segmented-toggle-size-tiny: var(--wds-space-600);
1065
1067
  --wds-segmented-toggle-size-small: var(--wds-space-700);
1066
1068
  --wds-segmented-toggle-size-medium: var(--wds-space-800);
1067
1069
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
@@ -1081,6 +1083,7 @@
1081
1083
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-100);
1082
1084
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-100);
1083
1085
  --wds-segmented-toggle-border-width: var(--wds-border-width-100);
1086
+ --wds-segmented-toggle-border-radius-tiny: var(--wds-border-radius-200);
1084
1087
  --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-200);
1085
1088
  --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-200);
1086
1089
  --wds-segmented-toggle-border-color-hover: var(--wds-color-blue-300);
package/studio/all.scss CHANGED
@@ -8,6 +8,8 @@
8
8
  --wds-toggle-switch-knob-size-medium: 16px;
9
9
  --wds-toggle-switch-knob-size-large: 20px;
10
10
  --wds-toggle-switch-icon: false;
11
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
12
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
11
13
  --wds-tabs-selection-height: 3px;
12
14
  --wds-swatches-swatch-active-border-radius-small: 5px;
13
15
  --wds-swatches-swatch-active-border-radius-medium: 7px;
@@ -742,7 +744,7 @@
742
744
  --wds-select-area-border-radius: var(--wds-border-radius-200);
743
745
  --wds-segmented-toggle-value-fill-selected-disabled: var(--wds-color-text-disabled);
744
746
  --wds-segmented-toggle-value-fill-disabled: var(--wds-color-text-disabled);
745
- --wds-segmented-toggle-size-tiny: var(--wds-space-400);
747
+ --wds-segmented-toggle-size-tiny: var(--wds-space-600);
746
748
  --wds-segmented-toggle-size-small: var(--wds-space-700);
747
749
  --wds-segmented-toggle-size-medium: var(--wds-space-800);
748
750
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
@@ -762,6 +764,7 @@
762
764
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-100);
763
765
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-100);
764
766
  --wds-segmented-toggle-border-width: var(--wds-border-width-100);
767
+ --wds-segmented-toggle-border-radius-tiny: var(--wds-border-radius-200);
765
768
  --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-200);
766
769
  --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-200);
767
770
  --wds-segmented-toggle-border-color-hover: var(--wds-color-blue-300);
package/studio/all.st.css CHANGED
@@ -1406,6 +1406,7 @@
1406
1406
  @property st-global(--wds-segmented-toggle-border-hover);
1407
1407
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1408
1408
  @property st-global(--wds-segmented-toggle-border-radius-small);
1409
+ @property st-global(--wds-segmented-toggle-border-radius-tiny);
1409
1410
  @property st-global(--wds-segmented-toggle-border-width);
1410
1411
  @property st-global(--wds-segmented-toggle-border-width-default);
1411
1412
  @property st-global(--wds-segmented-toggle-border-width-hover);
@@ -1940,6 +1941,8 @@
1940
1941
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1941
1942
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1942
1943
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1944
+ @property st-global(--wds-toggle-button-shadow-spread-secondary);
1945
+ @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1943
1946
  @property st-global(--wds-toggle-button-shadow-x-primary);
1944
1947
  @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1945
1948
  @property st-global(--wds-toggle-button-shadow-x-secondary);
@@ -3495,6 +3498,7 @@
3495
3498
  --wds-segmented-toggle-border-hover: #868aa5;
3496
3499
  --wds-segmented-toggle-border-radius-medium: 4px;
3497
3500
  --wds-segmented-toggle-border-radius-small: 4px;
3501
+ --wds-segmented-toggle-border-radius-tiny: 4px;
3498
3502
  --wds-segmented-toggle-border-width: 1px;
3499
3503
  --wds-segmented-toggle-border-width-default: 1px;
3500
3504
  --wds-segmented-toggle-border-width-hover: 1px;
@@ -3523,7 +3527,7 @@
3523
3527
  --wds-segmented-toggle-padding-vertical-small: 4px;
3524
3528
  --wds-segmented-toggle-size-medium: 32px;
3525
3529
  --wds-segmented-toggle-size-small: 28px;
3526
- --wds-segmented-toggle-size-tiny: 16px;
3530
+ --wds-segmented-toggle-size-tiny: 24px;
3527
3531
  --wds-segmented-toggle-value-fill: #131720;
3528
3532
  --wds-segmented-toggle-value-fill-default: #131720;
3529
3533
  --wds-segmented-toggle-value-fill-disabled: #bebebe;
@@ -4029,6 +4033,8 @@
4029
4033
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, 0);
4030
4034
  --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, 0);
4031
4035
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, 0);
4036
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
4037
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
4032
4038
  --wds-toggle-button-shadow-x-primary: 0px;
4033
4039
  --wds-toggle-button-shadow-x-primary-inverted: 0px;
4034
4040
  --wds-toggle-button-shadow-x-secondary: 0px;
package/studio/component.st.css CHANGED
@@ -843,6 +843,7 @@
843
843
  @property st-global(--wds-segmented-toggle-border-hover);
844
844
  @property st-global(--wds-segmented-toggle-border-radius-medium);
845
845
  @property st-global(--wds-segmented-toggle-border-radius-small);
846
+ @property st-global(--wds-segmented-toggle-border-radius-tiny);
846
847
  @property st-global(--wds-segmented-toggle-border-width);
847
848
  @property st-global(--wds-segmented-toggle-border-width-default);
848
849
  @property st-global(--wds-segmented-toggle-border-width-hover);
@@ -1224,6 +1225,8 @@
1224
1225
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1225
1226
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1226
1227
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1228
+ @property st-global(--wds-toggle-button-shadow-spread-secondary);
1229
+ @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1227
1230
  @property st-global(--wds-toggle-button-shadow-x-primary);
1228
1231
  @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1229
1232
  @property st-global(--wds-toggle-button-shadow-x-secondary);
@@ -2214,6 +2217,7 @@
2214
2217
  --wds-segmented-toggle-border-hover: #868aa5;
2215
2218
  --wds-segmented-toggle-border-radius-medium: 4px;
2216
2219
  --wds-segmented-toggle-border-radius-small: 4px;
2220
+ --wds-segmented-toggle-border-radius-tiny: 4px;
2217
2221
  --wds-segmented-toggle-border-width: 1px;
2218
2222
  --wds-segmented-toggle-border-width-default: 1px;
2219
2223
  --wds-segmented-toggle-border-width-hover: 1px;
@@ -2242,7 +2246,7 @@
2242
2246
  --wds-segmented-toggle-padding-vertical-small: 4px;
2243
2247
  --wds-segmented-toggle-size-medium: 32px;
2244
2248
  --wds-segmented-toggle-size-small: 28px;
2245
- --wds-segmented-toggle-size-tiny: 16px;
2249
+ --wds-segmented-toggle-size-tiny: 24px;
2246
2250
  --wds-segmented-toggle-value-fill: #131720;
2247
2251
  --wds-segmented-toggle-value-fill-default: #131720;
2248
2252
  --wds-segmented-toggle-value-fill-disabled: #bebebe;
@@ -2595,6 +2599,8 @@
2595
2599
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, 0);
2596
2600
  --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, 0);
2597
2601
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, 0);
2602
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
2603
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
2598
2604
  --wds-toggle-button-shadow-x-primary: 0px;
2599
2605
  --wds-toggle-button-shadow-x-primary-inverted: 0px;
2600
2606
  --wds-toggle-button-shadow-x-secondary: 0px;
package/wixel/all.css CHANGED
@@ -297,6 +297,8 @@
297
297
  --wds-toggle-switch-knob-size-medium: 16px;
298
298
  --wds-toggle-switch-knob-size-large: 20px;
299
299
  --wds-toggle-switch-icon: false;
300
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
301
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
300
302
  --wds-thumbnail-border-width-default: 0px;
301
303
  --wds-tabs-selection-height: 1px;
302
304
  --wds-status-toast-width: 600px;
@@ -1053,6 +1055,7 @@
1053
1055
  --wds-segmented-toggle-border-width-selected: var(--wds-border-width-none);
1054
1056
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-none);
1055
1057
  --wds-segmented-toggle-border-width: var(--wds-border-width-none);
1058
+ --wds-segmented-toggle-border-radius-tiny: var(--wds-border-radius-300);
1056
1059
  --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-400);
1057
1060
  --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-400);
1058
1061
  --wds-section-helper-vertical-padding-small: var(--wds-space-200);
package/wixel/all.scss CHANGED
@@ -7,6 +7,8 @@
7
7
  --wds-toggle-switch-knob-size-medium: 16px;
8
8
  --wds-toggle-switch-knob-size-large: 20px;
9
9
  --wds-toggle-switch-icon: false;
10
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
11
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
10
12
  --wds-thumbnail-border-width-default: 0px;
11
13
  --wds-tabs-selection-height: 1px;
12
14
  --wds-status-toast-width: 600px;
@@ -735,6 +737,7 @@
735
737
  --wds-segmented-toggle-border-width-selected: var(--wds-border-width-none);
736
738
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-none);
737
739
  --wds-segmented-toggle-border-width: var(--wds-border-width-none);
740
+ --wds-segmented-toggle-border-radius-tiny: var(--wds-border-radius-300);
738
741
  --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-400);
739
742
  --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-400);
740
743
  --wds-section-helper-vertical-padding-small: var(--wds-space-200);
package/wixel/all.st.css CHANGED
@@ -1380,6 +1380,7 @@
1380
1380
  @property st-global(--wds-segmented-toggle-border-hover);
1381
1381
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1382
1382
  @property st-global(--wds-segmented-toggle-border-radius-small);
1383
+ @property st-global(--wds-segmented-toggle-border-radius-tiny);
1383
1384
  @property st-global(--wds-segmented-toggle-border-width);
1384
1385
  @property st-global(--wds-segmented-toggle-border-width-default);
1385
1386
  @property st-global(--wds-segmented-toggle-border-width-selected);
@@ -1888,6 +1889,8 @@
1888
1889
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1889
1890
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1890
1891
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1892
+ @property st-global(--wds-toggle-button-shadow-spread-secondary);
1893
+ @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1891
1894
  @property st-global(--wds-toggle-button-shadow-x-primary);
1892
1895
  @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1893
1896
  @property st-global(--wds-toggle-button-shadow-x-secondary);
@@ -3417,6 +3420,7 @@
3417
3420
  --wds-segmented-toggle-border-hover: #dce2ff;
3418
3421
  --wds-segmented-toggle-border-radius-medium: 8px;
3419
3422
  --wds-segmented-toggle-border-radius-small: 8px;
3423
+ --wds-segmented-toggle-border-radius-tiny: 6px;
3420
3424
  --wds-segmented-toggle-border-width: 0px;
3421
3425
  --wds-segmented-toggle-border-width-default: 0px;
3422
3426
  --wds-segmented-toggle-border-width-selected: 0px;
@@ -3925,6 +3929,8 @@
3925
3929
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(38, 37, 36, 0.0000);
3926
3930
  --wds-toggle-button-shadow-fill-tertiary: rgba(38, 37, 36, 0.0000);
3927
3931
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(38, 37, 36, 0.0000);
3932
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
3933
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
3928
3934
  --wds-toggle-button-shadow-x-primary: 0px;
3929
3935
  --wds-toggle-button-shadow-x-primary-inverted: 0px;
3930
3936
  --wds-toggle-button-shadow-x-secondary: 0px;
package/wixel/component.st.css CHANGED
@@ -819,6 +819,7 @@
819
819
  @property st-global(--wds-segmented-toggle-border-hover);
820
820
  @property st-global(--wds-segmented-toggle-border-radius-medium);
821
821
  @property st-global(--wds-segmented-toggle-border-radius-small);
822
+ @property st-global(--wds-segmented-toggle-border-radius-tiny);
822
823
  @property st-global(--wds-segmented-toggle-border-width);
823
824
  @property st-global(--wds-segmented-toggle-border-width-default);
824
825
  @property st-global(--wds-segmented-toggle-border-width-selected);
@@ -1190,6 +1191,8 @@
1190
1191
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1191
1192
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1192
1193
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1194
+ @property st-global(--wds-toggle-button-shadow-spread-secondary);
1195
+ @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1193
1196
  @property st-global(--wds-toggle-button-shadow-x-primary);
1194
1197
  @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1195
1198
  @property st-global(--wds-toggle-button-shadow-x-secondary);
@@ -2156,6 +2159,7 @@
2156
2159
  --wds-segmented-toggle-border-hover: #dce2ff;
2157
2160
  --wds-segmented-toggle-border-radius-medium: 8px;
2158
2161
  --wds-segmented-toggle-border-radius-small: 8px;
2162
+ --wds-segmented-toggle-border-radius-tiny: 6px;
2159
2163
  --wds-segmented-toggle-border-width: 0px;
2160
2164
  --wds-segmented-toggle-border-width-default: 0px;
2161
2165
  --wds-segmented-toggle-border-width-selected: 0px;
@@ -2527,6 +2531,8 @@
2527
2531
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(38, 37, 36, 0.0000);
2528
2532
  --wds-toggle-button-shadow-fill-tertiary: rgba(38, 37, 36, 0.0000);
2529
2533
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(38, 37, 36, 0.0000);
2534
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
2535
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
2530
2536
  --wds-toggle-button-shadow-x-primary: 0px;
2531
2537
  --wds-toggle-button-shadow-x-primary-inverted: 0px;
2532
2538
  --wds-toggle-button-shadow-x-secondary: 0px;