@wix/design-system-tokens 1.231.3 → 1.232.1

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 +18 -0
  2. package/all.css +2 -0
  3. package/all.scss +2 -0
  4. package/all.st.css +4 -0
  5. package/component.st.css +4 -0
  6. package/odeditor/all.css +29 -27
  7. package/odeditor/all.scss +29 -27
  8. package/odeditor/all.st.css +29 -25
  9. package/odeditor/component.st.css +27 -23
  10. package/odeditor/semantic.st.css +2 -2
  11. package/odeditor-dark/all.css +4 -2
  12. package/odeditor-dark/all.scss +4 -2
  13. package/odeditor-dark/all.st.css +6 -2
  14. package/odeditor-dark/component.st.css +6 -2
  15. package/package.json +2 -2
  16. package/studio/all.css +2 -0
  17. package/studio/all.scss +2 -0
  18. package/studio/all.st.css +4 -0
  19. package/studio/component.st.css +4 -0
  20. package/studio2-light/all.css +13 -11
  21. package/studio2-light/all.scss +3 -1
  22. package/studio2-light/all.st.css +5 -1
  23. package/studio2-light/component.st.css +5 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,21 @@
1
+ ## 1.232.1
2
+
3
+ ### Patch Changes
4
+
5
+ - [#17295](https://github.com/wix-private/wix-design-systems/pull/17295) [`1cb6689`](https://github.com/wix-private/wix-design-systems/commit/1cb668965a96a32b501feecdedbadc5bb92bef51) - Harmony (odeditor) and Studio 2.0 Light (studio2-light): `--wds-icon-button-color-fill-dark-secondary` changed from `var(--wds-color-fill-dark-tertiary)` (`#ffffff`) to `var(--wds-color-white-transparent-0)` (`rgba(255, 255, 255, 0)`).
6
+
7
+ - [#17284](https://github.com/wix-private/wix-design-systems/pull/17284) [`362733d`](https://github.com/wix-private/wix-design-systems/commit/362733d827c18bb82b6d9612fe8aec3318f526a7) - Studio 2.0 (odeditor-dark): `--wds-popover-border-fill` changed from `#2D2D2E` to `#3A3A3B`, so the outline around popovers and dropdown menus is visible against the dark surface instead of blending into it.
8
+
9
+ - [#17232](https://github.com/wix-private/wix-design-systems/pull/17232) [`d7c728e`](https://github.com/wix-private/wix-design-systems/commit/d7c728eba326dcf4f28e272bb8763b7eab12f5b3) - The Harmony (odeditor) `toggle-button` shadow tokens match the design definition again: the standard-skin layers now resolve through the existing `--wds-shadow-*-toggle-button` semantic tokens, and the inverted layers take new offsets, blur and fills. New token `--wds-toggle-button-shadow-spread-primary-inverted` sets the inverted shadow's outermost spread: `-6px` in Harmony (odeditor), `0px` in every other theme.
10
+
11
+ - [#17285](https://github.com/wix-private/wix-design-systems/pull/17285) [`12315a2`](https://github.com/wix-private/wix-design-systems/commit/12315a23a8535f55d641ca0957cb409443c7333c) - `--wds-section-helper-border-experimental-dark` in Studio 2.0 (odeditor-dark) goes from `#ffffff` to `#acbeff`, so the `experimentalDark` SectionHelper has a visible border there.
12
+
13
+ ## 1.232.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [#17242](https://github.com/wix-private/wix-design-systems/pull/17242) [`ec3a073`](https://github.com/wix-private/wix-design-systems/commit/ec3a073695741a16ac1e0af20013d28e66e13ced) - **Deprecated:** The Stylable token files (`all.st.css`, `foundation.st.css`, `semantic.st.css` and `component.st.css`, at the package root and in every theme folder) will be removed in a future release. Use the same tokens as CSS custom properties from `all.css` instead.
18
+
1
19
  ## 1.231.3
2
20
 
3
21
  ### Patch Changes
package/all.css CHANGED
@@ -289,6 +289,7 @@
289
289
  --wds-toggle-switch-icon: true;
290
290
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
291
291
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
292
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
292
293
  --wds-tabs-selection-height: 3px;
293
294
  --wds-table-toolbar-padding-block-start: 15px;
294
295
  --wds-table-toolbar-padding-block-end: 15px;
@@ -2110,6 +2111,7 @@
2110
2111
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
2111
2112
  --wds-section-helper-fill-preview: var(--wds-color-fill-surface-neutral);
2112
2113
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2114
+ --wds-section-helper-fill-experimental-dark: var(--wds-color-fill-dark-primary);
2113
2115
  --wds-section-helper-fill-danger: var(--wds-color-fill-surface-destructive);
2114
2116
  --wds-section-helper-border-success: var(--wds-color-border-success-primary);
2115
2117
  --wds-section-helper-border-standard: var(--wds-color-border-standard-primary);
package/all.scss CHANGED
@@ -14,6 +14,7 @@
14
14
  --wds-toggle-switch-icon: true;
15
15
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
16
16
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
17
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
17
18
  --wds-tabs-selection-height: 3px;
18
19
  --wds-table-toolbar-padding-block-start: 15px;
19
20
  --wds-table-toolbar-padding-block-end: 15px;
@@ -2099,6 +2100,7 @@
2099
2100
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
2100
2101
  --wds-section-helper-fill-preview: var(--wds-color-fill-surface-neutral);
2101
2102
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2103
+ --wds-section-helper-fill-experimental-dark: var(--wds-color-fill-dark-primary);
2102
2104
  --wds-section-helper-fill-danger: var(--wds-color-fill-surface-destructive);
2103
2105
  --wds-section-helper-border-success: var(--wds-color-border-success-primary);
2104
2106
  --wds-section-helper-border-standard: var(--wds-color-border-standard-primary);
package/all.st.css CHANGED
@@ -1843,6 +1843,7 @@
1843
1843
  @property st-global(--wds-section-helper-content-gap-medium);
1844
1844
  @property st-global(--wds-section-helper-content-gap-small);
1845
1845
  @property st-global(--wds-section-helper-fill-danger);
1846
+ @property st-global(--wds-section-helper-fill-experimental-dark);
1846
1847
  @property st-global(--wds-section-helper-fill-premium);
1847
1848
  @property st-global(--wds-section-helper-fill-preview);
1848
1849
  @property st-global(--wds-section-helper-fill-standard);
@@ -2562,6 +2563,7 @@
2562
2563
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
2563
2564
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
2564
2565
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
2566
+ @property st-global(--wds-toggle-button-shadow-spread-primary-inverted);
2565
2567
  @property st-global(--wds-toggle-button-shadow-spread-secondary);
2566
2568
  @property st-global(--wds-toggle-button-shadow-spread-tertiary);
2567
2569
  @property st-global(--wds-toggle-button-shadow-x-primary);
@@ -4566,6 +4568,7 @@
4566
4568
  --wds-section-helper-content-gap-medium: 12px;
4567
4569
  --wds-section-helper-content-gap-small: 9px;
4568
4570
  --wds-section-helper-fill-danger: #fde3e1;
4571
+ --wds-section-helper-fill-experimental-dark: #000624;
4569
4572
  --wds-section-helper-fill-premium: #f1e0f9;
4570
4573
  --wds-section-helper-fill-preview: #f6f7f9;
4571
4574
  --wds-section-helper-fill-standard: #e7f0ff;
@@ -5285,6 +5288,7 @@
5285
5288
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(0, 6, 36, 0);
5286
5289
  --wds-toggle-button-shadow-fill-tertiary: rgba(0, 6, 36, 0);
5287
5290
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(0, 6, 36, 0);
5291
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
5288
5292
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
5289
5293
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
5290
5294
  --wds-toggle-button-shadow-x-primary: 0px;
package/component.st.css CHANGED
@@ -1257,6 +1257,7 @@
1257
1257
  @property st-global(--wds-section-helper-content-gap-medium);
1258
1258
  @property st-global(--wds-section-helper-content-gap-small);
1259
1259
  @property st-global(--wds-section-helper-fill-danger);
1260
+ @property st-global(--wds-section-helper-fill-experimental-dark);
1260
1261
  @property st-global(--wds-section-helper-fill-premium);
1261
1262
  @property st-global(--wds-section-helper-fill-preview);
1262
1263
  @property st-global(--wds-section-helper-fill-standard);
@@ -1823,6 +1824,7 @@
1823
1824
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1824
1825
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1825
1826
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1827
+ @property st-global(--wds-toggle-button-shadow-spread-primary-inverted);
1826
1828
  @property st-global(--wds-toggle-button-shadow-spread-secondary);
1827
1829
  @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1828
1830
  @property st-global(--wds-toggle-button-shadow-x-primary);
@@ -3239,6 +3241,7 @@
3239
3241
  --wds-section-helper-content-gap-medium: 12px;
3240
3242
  --wds-section-helper-content-gap-small: 9px;
3241
3243
  --wds-section-helper-fill-danger: #fde3e1;
3244
+ --wds-section-helper-fill-experimental-dark: #000624;
3242
3245
  --wds-section-helper-fill-premium: #f1e0f9;
3243
3246
  --wds-section-helper-fill-preview: #f6f7f9;
3244
3247
  --wds-section-helper-fill-standard: #e7f0ff;
@@ -3805,6 +3808,7 @@
3805
3808
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(0, 6, 36, 0);
3806
3809
  --wds-toggle-button-shadow-fill-tertiary: rgba(0, 6, 36, 0);
3807
3810
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(0, 6, 36, 0);
3811
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
3808
3812
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
3809
3813
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
3810
3814
  --wds-toggle-button-shadow-x-primary: 0px;
package/odeditor/all.css CHANGED
@@ -321,22 +321,18 @@
321
321
  --wds-toggle-switch-knob-size-medium: 14px;
322
322
  --wds-toggle-switch-knob-size-large: 20px;
323
323
  --wds-toggle-switch-icon: false;
324
- --wds-toggle-button-shadow-y-tertiary-inverted: 0.7px;
325
- --wds-toggle-button-shadow-y-tertiary: 0.7px;
326
- --wds-toggle-button-shadow-y-secondary-inverted: 2px;
327
- --wds-toggle-button-shadow-y-secondary: 2px;
328
- --wds-toggle-button-shadow-y-primary-inverted: 2px;
329
- --wds-toggle-button-shadow-y-primary: 2px;
330
- --wds-toggle-button-shadow-x-tertiary-inverted: 0.7px;
331
- --wds-toggle-button-shadow-x-tertiary: 0.7px;
332
- --wds-toggle-button-shadow-x-secondary-inverted: 2px;
333
- --wds-toggle-button-shadow-x-secondary: 2px;
334
- --wds-toggle-button-shadow-x-primary-inverted: 1px;
335
- --wds-toggle-button-shadow-x-primary: 1px;
324
+ --wds-toggle-button-shadow-y-tertiary-inverted: 4px;
325
+ --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
326
+ --wds-toggle-button-shadow-y-primary-inverted: 5px;
327
+ --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
328
+ --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
329
+ --wds-toggle-button-shadow-x-primary-inverted: -8px;
336
330
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
337
331
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
338
- --wds-toggle-button-shadow-blur-tertiary-inverted: 0.8px;
339
- --wds-toggle-button-shadow-blur-tertiary: 0.8px;
332
+ --wds-toggle-button-shadow-spread-primary-inverted: -6px;
333
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 5px;
334
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
335
+ --wds-toggle-button-shadow-blur-primary-inverted: 30px;
340
336
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
341
337
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
342
338
  --wds-tabs-selection-height: 3px;
@@ -580,8 +576,8 @@
580
576
  --wds-shadow-focus-inner-destructive: 0 0 0 3px var(--wds-color-red-400) inset;
581
577
  --wds-shadow-focus-destructive: 0 0 0 var(--wds-color-red-400);
582
578
  --wds-shadow-fill-tertiary-raised: var(--wds-color-black-100-transparent-5);
583
- --wds-shadow-fill-tertiary-toggle-button: var(--wds-color-black-100-transparent-25);
584
- --wds-shadow-fill-secondary-toggle-button: var(--wds-color-black-100-transparent-15);
579
+ --wds-shadow-fill-tertiary-toggle-button: var(--wds-color-black-100-transparent-5);
580
+ --wds-shadow-fill-secondary-toggle-button: var(--wds-color-black-100-transparent-10);
585
581
  --wds-shadow-fill-secondary-toggle: var(--wds-color-black-100-transparent-0);
586
582
  --wds-shadow-fill-secondary-raised: var(--wds-color-black-100-transparent-5);
587
583
  --wds-shadow-fill-secondary-overlay-dark: var(--wds-color-black-100-transparent-0);
@@ -1007,16 +1003,15 @@
1007
1003
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
1008
1004
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
1009
1005
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
1010
- --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-25);
1011
- --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-25);
1012
- --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-100-transparent-20);
1013
- --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-20);
1014
- --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-10);
1015
- --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-10);
1016
- --wds-toggle-button-shadow-blur-secondary-inverted: var(--wds-shadow-blur-25);
1017
- --wds-toggle-button-shadow-blur-secondary: var(--wds-shadow-blur-25);
1018
- --wds-toggle-button-shadow-blur-primary-inverted: var(--wds-shadow-blur-50);
1019
- --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-50);
1006
+ --wds-toggle-button-shadow-y-tertiary: var(--wds-shadow-y-tertiary-toggle-button);
1007
+ --wds-toggle-button-shadow-y-secondary: var(--wds-shadow-y-secondary-toggle-button);
1008
+ --wds-toggle-button-shadow-x-tertiary: var(--wds-shadow-x-tertiary-toggle-button);
1009
+ --wds-toggle-button-shadow-x-secondary: var(--wds-shadow-x-secondary-toggle-button);
1010
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-5);
1011
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-100-transparent-10);
1012
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-5);
1013
+ --wds-toggle-button-shadow-blur-tertiary: var(--wds-shadow-blur-tertiary-toggle-button);
1014
+ --wds-toggle-button-shadow-blur-secondary: var(--wds-shadow-blur-secondary-toggle-button);
1020
1015
  --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
1021
1016
  --wds-toggle-button-padding-tiny: var(--wds-space-200);
1022
1017
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
@@ -1697,6 +1692,7 @@
1697
1692
  --wds-icon-button-color-fill-light-primary-disabled: var(--wds-color-black-700);
1698
1693
  --wds-icon-button-color-fill-dark-tertiary-hover: var(--wds-color-black-600);
1699
1694
  --wds-icon-button-color-fill-dark-secondary-disabled: var(--wds-color-black-700);
1695
+ --wds-icon-button-color-fill-dark-secondary: var(--wds-color-white-transparent-0);
1700
1696
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-black-700);
1701
1697
  --wds-icon-button-color-border-standard-secondary-disabled: var(--wds-color-black-700);
1702
1698
  --wds-icon-button-color-border-premium-secondary-disabled: var(--wds-color-black-700);
@@ -2148,6 +2144,12 @@
2148
2144
  --wds-toggle-button-square-label-font-size-small: var(--wds-font-size-body-tiny);
2149
2145
  --wds-toggle-button-square-label-font-size-medium: var(--wds-font-size-body-small);
2150
2146
  --wds-toggle-button-square-label-font-size-large: var(--wds-font-size-body-small);
2147
+ --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-primary-toggle-button);
2148
+ --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-primary-toggle-button);
2149
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-shadow-fill-tertiary-toggle-button);
2150
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-shadow-fill-secondary-toggle-button);
2151
+ --wds-toggle-button-shadow-fill-primary: var(--wds-shadow-fill-primary-toggle-button);
2152
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-primary-toggle-button);
2151
2153
  --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
2152
2154
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-small);
2153
2155
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-small);
@@ -2278,6 +2280,7 @@
2278
2280
  --wds-section-helper-title-font-size: var(--wds-font-size-body-tiny);
2279
2281
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
2280
2282
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2283
+ --wds-section-helper-fill-experimental-dark: var(--wds-color-fill-dark-primary);
2281
2284
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-tiny);
2282
2285
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-small);
2283
2286
  --wds-section-header-label-fill-neutral: var(--wds-color-text-placeholder);
@@ -2446,7 +2449,6 @@
2446
2449
  --wds-icon-button-color-fill-dark-tertiary: var(--wds-color-fill-light-secondary);
2447
2450
  --wds-icon-button-color-fill-dark-secondary-hover: var(--wds-color-fill-dark-tertiary-hover);
2448
2451
  --wds-icon-button-color-fill-dark-secondary-active: var(--wds-color-fill-dark-tertiary-active);
2449
- --wds-icon-button-color-fill-dark-secondary: var(--wds-color-fill-dark-tertiary);
2450
2452
  --wds-icon-button-color-fill-dark-primary-hover: var(--wds-color-fill-dark-primary-hover);
2451
2453
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
2452
2454
  --wds-icon-button-color-fill-dark-primary: var(--wds-color-fill-dark-primary);
package/odeditor/all.scss CHANGED
@@ -15,22 +15,18 @@
15
15
  --wds-toggle-switch-knob-size-medium: 14px;
16
16
  --wds-toggle-switch-knob-size-large: 20px;
17
17
  --wds-toggle-switch-icon: false;
18
- --wds-toggle-button-shadow-y-tertiary-inverted: 0.7px;
19
- --wds-toggle-button-shadow-y-tertiary: 0.7px;
20
- --wds-toggle-button-shadow-y-secondary-inverted: 2px;
21
- --wds-toggle-button-shadow-y-secondary: 2px;
22
- --wds-toggle-button-shadow-y-primary-inverted: 2px;
23
- --wds-toggle-button-shadow-y-primary: 2px;
24
- --wds-toggle-button-shadow-x-tertiary-inverted: 0.7px;
25
- --wds-toggle-button-shadow-x-tertiary: 0.7px;
26
- --wds-toggle-button-shadow-x-secondary-inverted: 2px;
27
- --wds-toggle-button-shadow-x-secondary: 2px;
28
- --wds-toggle-button-shadow-x-primary-inverted: 1px;
29
- --wds-toggle-button-shadow-x-primary: 1px;
18
+ --wds-toggle-button-shadow-y-tertiary-inverted: 4px;
19
+ --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
20
+ --wds-toggle-button-shadow-y-primary-inverted: 5px;
21
+ --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
22
+ --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
23
+ --wds-toggle-button-shadow-x-primary-inverted: -8px;
30
24
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
31
25
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
32
- --wds-toggle-button-shadow-blur-tertiary-inverted: 0.8px;
33
- --wds-toggle-button-shadow-blur-tertiary: 0.8px;
26
+ --wds-toggle-button-shadow-spread-primary-inverted: -6px;
27
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 5px;
28
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
29
+ --wds-toggle-button-shadow-blur-primary-inverted: 30px;
34
30
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
35
31
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
36
32
  --wds-tabs-selection-height: 3px;
@@ -582,16 +578,15 @@
582
578
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
583
579
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
584
580
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
585
- --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-25);
586
- --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-25);
587
- --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-100-transparent-20);
588
- --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-20);
589
- --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-10);
590
- --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-10);
591
- --wds-toggle-button-shadow-blur-secondary-inverted: var(--wds-shadow-blur-25);
592
- --wds-toggle-button-shadow-blur-secondary: var(--wds-shadow-blur-25);
593
- --wds-toggle-button-shadow-blur-primary-inverted: var(--wds-shadow-blur-50);
594
- --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-50);
581
+ --wds-toggle-button-shadow-y-tertiary: var(--wds-shadow-y-tertiary-toggle-button);
582
+ --wds-toggle-button-shadow-y-secondary: var(--wds-shadow-y-secondary-toggle-button);
583
+ --wds-toggle-button-shadow-x-tertiary: var(--wds-shadow-x-tertiary-toggle-button);
584
+ --wds-toggle-button-shadow-x-secondary: var(--wds-shadow-x-secondary-toggle-button);
585
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-5);
586
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-100-transparent-10);
587
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-5);
588
+ --wds-toggle-button-shadow-blur-tertiary: var(--wds-shadow-blur-tertiary-toggle-button);
589
+ --wds-toggle-button-shadow-blur-secondary: var(--wds-shadow-blur-secondary-toggle-button);
595
590
  --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
596
591
  --wds-toggle-button-padding-tiny: var(--wds-space-200);
597
592
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
@@ -934,9 +929,9 @@
934
929
  --wds-shadow-focus-inner-standard: 0 0 0 3px var(--wds-color-blue-300) inset;
935
930
  --wds-shadow-focus-inner-destructive: 0 0 0 3px var(--wds-color-red-400) inset;
936
931
  --wds-shadow-focus-destructive: 0 0 0 var(--wds-color-red-400);
937
- --wds-shadow-fill-tertiary-toggle-button: var(--wds-color-black-100-transparent-25);
932
+ --wds-shadow-fill-tertiary-toggle-button: var(--wds-color-black-100-transparent-5);
938
933
  --wds-shadow-fill-tertiary-raised: var(--wds-color-black-100-transparent-5);
939
- --wds-shadow-fill-secondary-toggle-button: var(--wds-color-black-100-transparent-15);
934
+ --wds-shadow-fill-secondary-toggle-button: var(--wds-color-black-100-transparent-10);
940
935
  --wds-shadow-fill-secondary-toggle: var(--wds-color-black-100-transparent-0);
941
936
  --wds-shadow-fill-secondary-raised: var(--wds-color-black-100-transparent-5);
942
937
  --wds-shadow-fill-secondary-overlay-dark: var(--wds-color-black-100-transparent-0);
@@ -1370,6 +1365,7 @@
1370
1365
  --wds-icon-button-color-fill-light-primary-disabled: var(--wds-color-black-700);
1371
1366
  --wds-icon-button-color-fill-dark-tertiary-hover: var(--wds-color-black-600);
1372
1367
  --wds-icon-button-color-fill-dark-secondary-disabled: var(--wds-color-black-700);
1368
+ --wds-icon-button-color-fill-dark-secondary: var(--wds-color-white-transparent-0);
1373
1369
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-black-700);
1374
1370
  --wds-icon-button-color-border-standard-secondary-disabled: var(--wds-color-black-700);
1375
1371
  --wds-icon-button-color-border-premium-secondary-disabled: var(--wds-color-black-700);
@@ -2130,6 +2126,12 @@
2130
2126
  --wds-toggle-button-square-label-font-size-small: var(--wds-font-size-body-tiny);
2131
2127
  --wds-toggle-button-square-label-font-size-medium: var(--wds-font-size-body-small);
2132
2128
  --wds-toggle-button-square-label-font-size-large: var(--wds-font-size-body-small);
2129
+ --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-primary-toggle-button);
2130
+ --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-primary-toggle-button);
2131
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-shadow-fill-tertiary-toggle-button);
2132
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-shadow-fill-secondary-toggle-button);
2133
+ --wds-toggle-button-shadow-fill-primary: var(--wds-shadow-fill-primary-toggle-button);
2134
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-primary-toggle-button);
2133
2135
  --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
2134
2136
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-small);
2135
2137
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-small);
@@ -2266,6 +2268,7 @@
2266
2268
  --wds-section-helper-title-font-size: var(--wds-font-size-body-tiny);
2267
2269
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
2268
2270
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2271
+ --wds-section-helper-fill-experimental-dark: var(--wds-color-fill-dark-primary);
2269
2272
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-tiny);
2270
2273
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-small);
2271
2274
  --wds-section-header-label-fill-neutral: var(--wds-color-text-placeholder);
@@ -2434,7 +2437,6 @@
2434
2437
  --wds-icon-button-color-fill-dark-tertiary: var(--wds-color-fill-light-secondary);
2435
2438
  --wds-icon-button-color-fill-dark-secondary-hover: var(--wds-color-fill-dark-tertiary-hover);
2436
2439
  --wds-icon-button-color-fill-dark-secondary-active: var(--wds-color-fill-dark-tertiary-active);
2437
- --wds-icon-button-color-fill-dark-secondary: var(--wds-color-fill-dark-tertiary);
2438
2440
  --wds-icon-button-color-fill-dark-primary-hover: var(--wds-color-fill-dark-primary-hover);
2439
2441
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
2440
2442
  --wds-icon-button-color-fill-dark-primary: var(--wds-color-fill-dark-primary);
package/odeditor/all.st.css CHANGED
@@ -1824,6 +1824,7 @@
1824
1824
  @property st-global(--wds-section-helper-content-gap-medium);
1825
1825
  @property st-global(--wds-section-helper-content-gap-small);
1826
1826
  @property st-global(--wds-section-helper-fill-danger);
1827
+ @property st-global(--wds-section-helper-fill-experimental-dark);
1827
1828
  @property st-global(--wds-section-helper-fill-premium);
1828
1829
  @property st-global(--wds-section-helper-fill-preview);
1829
1830
  @property st-global(--wds-section-helper-fill-standard);
@@ -2558,6 +2559,7 @@
2558
2559
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
2559
2560
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
2560
2561
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
2562
+ @property st-global(--wds-toggle-button-shadow-spread-primary-inverted);
2561
2563
  @property st-global(--wds-toggle-button-shadow-spread-secondary);
2562
2564
  @property st-global(--wds-toggle-button-shadow-spread-tertiary);
2563
2565
  @property st-global(--wds-toggle-button-shadow-x-primary);
@@ -3939,7 +3941,7 @@
3939
3941
  --wds-icon-button-color-fill-dark-primary-active: #525150;
3940
3942
  --wds-icon-button-color-fill-dark-primary-disabled: #f0efef;
3941
3943
  --wds-icon-button-color-fill-dark-primary-hover: #383838;
3942
- --wds-icon-button-color-fill-dark-secondary: #ffffff;
3944
+ --wds-icon-button-color-fill-dark-secondary: rgba(255, 255, 255, 0);
3943
3945
  --wds-icon-button-color-fill-dark-secondary-active: #f0efef;
3944
3946
  --wds-icon-button-color-fill-dark-secondary-disabled: #f0efef;
3945
3947
  --wds-icon-button-color-fill-dark-secondary-hover: #f8f6f6;
@@ -4531,6 +4533,7 @@
4531
4533
  --wds-section-helper-content-gap-medium: 20px;
4532
4534
  --wds-section-helper-content-gap-small: 20px;
4533
4535
  --wds-section-helper-fill-danger: #fcebeb;
4536
+ --wds-section-helper-fill-experimental-dark: #151414;
4534
4537
  --wds-section-helper-fill-premium: #f5f7ff;
4535
4538
  --wds-section-helper-fill-preview: #f0efef;
4536
4539
  --wds-section-helper-fill-standard: #f5f7ff;
@@ -4681,9 +4684,9 @@
4681
4684
  --wds-shadow-fill-secondary-overlay-dark: rgba(19, 23, 32, 0);
4682
4685
  --wds-shadow-fill-secondary-raised: rgba(19, 23, 32, .05);
4683
4686
  --wds-shadow-fill-secondary-toggle: rgba(19, 23, 32, 0);
4684
- --wds-shadow-fill-secondary-toggle-button: rgba(19, 23, 32, .15);
4687
+ --wds-shadow-fill-secondary-toggle-button: rgba(19, 23, 32, .1);
4685
4688
  --wds-shadow-fill-tertiary-raised: rgba(19, 23, 32, .05);
4686
- --wds-shadow-fill-tertiary-toggle-button: rgba(19, 23, 32, .25);
4689
+ --wds-shadow-fill-tertiary-toggle-button: rgba(19, 23, 32, .05);
4687
4690
  --wds-shadow-focus-destructive: 0 0 0 #f4b8b9;
4688
4691
  --wds-shadow-focus-inner-destructive: 0 0 0 3px #f4b8b9 inset;
4689
4692
  --wds-shadow-focus-inner-standard: 0 0 0 3px #acbeff inset;
@@ -5254,31 +5257,32 @@
5254
5257
  --wds-toggle-button-padding-tiny: 8px;
5255
5258
  --wds-toggle-button-padding-tiny-round: 12px;
5256
5259
  --wds-toggle-button-shadow-blur-primary: 4px;
5257
- --wds-toggle-button-shadow-blur-primary-inverted: 4px;
5258
- --wds-toggle-button-shadow-blur-secondary: 2px;
5259
- --wds-toggle-button-shadow-blur-secondary-inverted: 2px;
5260
- --wds-toggle-button-shadow-blur-tertiary: 0.8px;
5261
- --wds-toggle-button-shadow-blur-tertiary-inverted: 0.8px;
5262
- --wds-toggle-button-shadow-fill-primary: rgba(19, 23, 32, .1);
5263
- --wds-toggle-button-shadow-fill-primary-inverted: rgba(19, 23, 32, .1);
5264
- --wds-toggle-button-shadow-fill-secondary: rgba(19, 23, 32, .2);
5265
- --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, .2);
5266
- --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, .25);
5267
- --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, .25);
5260
+ --wds-toggle-button-shadow-blur-primary-inverted: 30px;
5261
+ --wds-toggle-button-shadow-blur-secondary: 1.7px;
5262
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
5263
+ --wds-toggle-button-shadow-blur-tertiary: 0.6px;
5264
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 5px;
5265
+ --wds-toggle-button-shadow-fill-primary: rgba(19, 23, 32, .05);
5266
+ --wds-toggle-button-shadow-fill-primary-inverted: rgba(19, 23, 32, .05);
5267
+ --wds-toggle-button-shadow-fill-secondary: rgba(19, 23, 32, .1);
5268
+ --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, .1);
5269
+ --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, .05);
5270
+ --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, .05);
5271
+ --wds-toggle-button-shadow-spread-primary-inverted: -6px;
5268
5272
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
5269
5273
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
5270
5274
  --wds-toggle-button-shadow-x-primary: 1px;
5271
- --wds-toggle-button-shadow-x-primary-inverted: 1px;
5272
- --wds-toggle-button-shadow-x-secondary: 2px;
5273
- --wds-toggle-button-shadow-x-secondary-inverted: 2px;
5274
- --wds-toggle-button-shadow-x-tertiary: 0.7px;
5275
- --wds-toggle-button-shadow-x-tertiary-inverted: 0.7px;
5276
- --wds-toggle-button-shadow-y-primary: 2px;
5277
- --wds-toggle-button-shadow-y-primary-inverted: 2px;
5278
- --wds-toggle-button-shadow-y-secondary: 2px;
5279
- --wds-toggle-button-shadow-y-secondary-inverted: 2px;
5280
- --wds-toggle-button-shadow-y-tertiary: 0.7px;
5281
- --wds-toggle-button-shadow-y-tertiary-inverted: 0.7px;
5275
+ --wds-toggle-button-shadow-x-primary-inverted: -8px;
5276
+ --wds-toggle-button-shadow-x-secondary: 1.2px;
5277
+ --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
5278
+ --wds-toggle-button-shadow-x-tertiary: 0.4px;
5279
+ --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
5280
+ --wds-toggle-button-shadow-y-primary: 4px;
5281
+ --wds-toggle-button-shadow-y-primary-inverted: 5px;
5282
+ --wds-toggle-button-shadow-y-secondary: 1.2px;
5283
+ --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
5284
+ --wds-toggle-button-shadow-y-tertiary: 0.4px;
5285
+ --wds-toggle-button-shadow-y-tertiary-inverted: 4px;
5282
5286
  --wds-toggle-button-square-label-font-size-large: 14px;
5283
5287
  --wds-toggle-button-square-label-font-size-medium: 14px;
5284
5288
  --wds-toggle-button-square-label-font-size-small: 12px;
package/odeditor/component.st.css CHANGED
@@ -1229,6 +1229,7 @@
1229
1229
  @property st-global(--wds-section-helper-content-gap-medium);
1230
1230
  @property st-global(--wds-section-helper-content-gap-small);
1231
1231
  @property st-global(--wds-section-helper-fill-danger);
1232
+ @property st-global(--wds-section-helper-fill-experimental-dark);
1232
1233
  @property st-global(--wds-section-helper-fill-premium);
1233
1234
  @property st-global(--wds-section-helper-fill-preview);
1234
1235
  @property st-global(--wds-section-helper-fill-standard);
@@ -1808,6 +1809,7 @@
1808
1809
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1809
1810
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1810
1811
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1812
+ @property st-global(--wds-toggle-button-shadow-spread-primary-inverted);
1811
1813
  @property st-global(--wds-toggle-button-shadow-spread-secondary);
1812
1814
  @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1813
1815
  @property st-global(--wds-toggle-button-shadow-x-primary);
@@ -2620,7 +2622,7 @@
2620
2622
  --wds-icon-button-color-fill-dark-primary-active: #525150;
2621
2623
  --wds-icon-button-color-fill-dark-primary-disabled: #f0efef;
2622
2624
  --wds-icon-button-color-fill-dark-primary-hover: #383838;
2623
- --wds-icon-button-color-fill-dark-secondary: #ffffff;
2625
+ --wds-icon-button-color-fill-dark-secondary: rgba(255, 255, 255, 0);
2624
2626
  --wds-icon-button-color-fill-dark-secondary-active: #f0efef;
2625
2627
  --wds-icon-button-color-fill-dark-secondary-disabled: #f0efef;
2626
2628
  --wds-icon-button-color-fill-dark-secondary-hover: #f8f6f6;
@@ -3184,6 +3186,7 @@
3184
3186
  --wds-section-helper-content-gap-medium: 20px;
3185
3187
  --wds-section-helper-content-gap-small: 20px;
3186
3188
  --wds-section-helper-fill-danger: #fcebeb;
3189
+ --wds-section-helper-fill-experimental-dark: #151414;
3187
3190
  --wds-section-helper-fill-premium: #f5f7ff;
3188
3191
  --wds-section-helper-fill-preview: #f0efef;
3189
3192
  --wds-section-helper-fill-standard: #f5f7ff;
@@ -3752,31 +3755,32 @@
3752
3755
  --wds-toggle-button-padding-tiny: 8px;
3753
3756
  --wds-toggle-button-padding-tiny-round: 12px;
3754
3757
  --wds-toggle-button-shadow-blur-primary: 4px;
3755
- --wds-toggle-button-shadow-blur-primary-inverted: 4px;
3756
- --wds-toggle-button-shadow-blur-secondary: 2px;
3757
- --wds-toggle-button-shadow-blur-secondary-inverted: 2px;
3758
- --wds-toggle-button-shadow-blur-tertiary: 0.8px;
3759
- --wds-toggle-button-shadow-blur-tertiary-inverted: 0.8px;
3760
- --wds-toggle-button-shadow-fill-primary: rgba(19, 23, 32, .1);
3761
- --wds-toggle-button-shadow-fill-primary-inverted: rgba(19, 23, 32, .1);
3762
- --wds-toggle-button-shadow-fill-secondary: rgba(19, 23, 32, .2);
3763
- --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, .2);
3764
- --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, .25);
3765
- --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, .25);
3758
+ --wds-toggle-button-shadow-blur-primary-inverted: 30px;
3759
+ --wds-toggle-button-shadow-blur-secondary: 1.7px;
3760
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
3761
+ --wds-toggle-button-shadow-blur-tertiary: 0.6px;
3762
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 5px;
3763
+ --wds-toggle-button-shadow-fill-primary: rgba(19, 23, 32, .05);
3764
+ --wds-toggle-button-shadow-fill-primary-inverted: rgba(19, 23, 32, .05);
3765
+ --wds-toggle-button-shadow-fill-secondary: rgba(19, 23, 32, .1);
3766
+ --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, .1);
3767
+ --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, .05);
3768
+ --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, .05);
3769
+ --wds-toggle-button-shadow-spread-primary-inverted: -6px;
3766
3770
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
3767
3771
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
3768
3772
  --wds-toggle-button-shadow-x-primary: 1px;
3769
- --wds-toggle-button-shadow-x-primary-inverted: 1px;
3770
- --wds-toggle-button-shadow-x-secondary: 2px;
3771
- --wds-toggle-button-shadow-x-secondary-inverted: 2px;
3772
- --wds-toggle-button-shadow-x-tertiary: 0.7px;
3773
- --wds-toggle-button-shadow-x-tertiary-inverted: 0.7px;
3774
- --wds-toggle-button-shadow-y-primary: 2px;
3775
- --wds-toggle-button-shadow-y-primary-inverted: 2px;
3776
- --wds-toggle-button-shadow-y-secondary: 2px;
3777
- --wds-toggle-button-shadow-y-secondary-inverted: 2px;
3778
- --wds-toggle-button-shadow-y-tertiary: 0.7px;
3779
- --wds-toggle-button-shadow-y-tertiary-inverted: 0.7px;
3773
+ --wds-toggle-button-shadow-x-primary-inverted: -8px;
3774
+ --wds-toggle-button-shadow-x-secondary: 1.2px;
3775
+ --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
3776
+ --wds-toggle-button-shadow-x-tertiary: 0.4px;
3777
+ --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
3778
+ --wds-toggle-button-shadow-y-primary: 4px;
3779
+ --wds-toggle-button-shadow-y-primary-inverted: 5px;
3780
+ --wds-toggle-button-shadow-y-secondary: 1.2px;
3781
+ --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
3782
+ --wds-toggle-button-shadow-y-tertiary: 0.4px;
3783
+ --wds-toggle-button-shadow-y-tertiary-inverted: 4px;
3780
3784
  --wds-toggle-button-square-label-font-size-large: 14px;
3781
3785
  --wds-toggle-button-square-label-font-size-medium: 14px;
3782
3786
  --wds-toggle-button-square-label-font-size-small: 12px;
package/odeditor/semantic.st.css CHANGED
@@ -974,9 +974,9 @@
974
974
  --wds-shadow-fill-secondary-overlay-dark: rgba(19, 23, 32, 0);
975
975
  --wds-shadow-fill-secondary-raised: rgba(19, 23, 32, .05);
976
976
  --wds-shadow-fill-secondary-toggle: rgba(19, 23, 32, 0);
977
- --wds-shadow-fill-secondary-toggle-button: rgba(19, 23, 32, .15);
977
+ --wds-shadow-fill-secondary-toggle-button: rgba(19, 23, 32, .1);
978
978
  --wds-shadow-fill-tertiary-raised: rgba(19, 23, 32, .05);
979
- --wds-shadow-fill-tertiary-toggle-button: rgba(19, 23, 32, .25);
979
+ --wds-shadow-fill-tertiary-toggle-button: rgba(19, 23, 32, .05);
980
980
  --wds-shadow-focus-destructive: 0 0 0 #f4b8b9;
981
981
  --wds-shadow-focus-inner-destructive: 0 0 0 3px #f4b8b9 inset;
982
982
  --wds-shadow-focus-inner-standard: 0 0 0 3px #acbeff inset;
package/odeditor-dark/all.css CHANGED
@@ -339,6 +339,7 @@
339
339
  --wds-toggle-button-shadow-x-primary: 1px;
340
340
  --wds-toggle-button-shadow-spread-tertiary: 0px;
341
341
  --wds-toggle-button-shadow-spread-secondary: 0px;
342
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
342
343
  --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
343
344
  --wds-toggle-button-shadow-blur-tertiary: 0.6px;
344
345
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
@@ -399,6 +400,8 @@
399
400
  --wds-side-panel-floating-max-height: 576px;
400
401
  --wds-side-panel-control-layout-divider-border-width: false;
401
402
  --wds-section-helper-prefix-offset-margin: 0px;
403
+ --wds-section-helper-fill-experimental-dark: #f5f7ff;
404
+ --wds-section-helper-border-experimental-dark: #acbeff;
402
405
  --wds-scrollbar-width: 4px;
403
406
  --wds-radio-dot-size: 4px;
404
407
  --wds-page-section-divider-display: block;
@@ -1437,7 +1440,7 @@
1437
1440
  --wds-popover-fill: var(--wds-color-fill-surface-overlay-blur);
1438
1441
  --wds-popover-border-width: var(--wds-border-width-100);
1439
1442
  --wds-popover-border-radius: var(--wds-border-radius-600);
1440
- --wds-popover-border-fill: var(--wds-color-black-750);
1443
+ --wds-popover-border-fill: var(--wds-color-black-700);
1441
1444
  --wds-palette-border: var(--wds-border-radius-200);
1442
1445
  --wds-pagination-padding-vertical: var(--wds-space-50);
1443
1446
  --wds-pagination-padding-horizontal: var(--wds-space-50);
@@ -2248,7 +2251,6 @@
2248
2251
  --wds-section-helper-fill-danger: var(--wds-color-fill-surface-destructive);
2249
2252
  --wds-section-helper-border-success: var(--wds-color-border-success-primary);
2250
2253
  --wds-section-helper-border-standard: var(--wds-color-border-standard-primary);
2251
- --wds-section-helper-border-experimental-dark: var(--wds-color-fill-dark-primary);
2252
2254
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-tiny);
2253
2255
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-small);
2254
2256
  --wds-section-header-label-fill-neutral: var(--wds-color-text-placeholder);
package/odeditor-dark/all.scss CHANGED
@@ -30,6 +30,7 @@
30
30
  --wds-toggle-button-shadow-x-primary: 1px;
31
31
  --wds-toggle-button-shadow-spread-tertiary: 0px;
32
32
  --wds-toggle-button-shadow-spread-secondary: 0px;
33
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
33
34
  --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
34
35
  --wds-toggle-button-shadow-blur-tertiary: 0.6px;
35
36
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
@@ -158,6 +159,8 @@
158
159
  --wds-shadow-blur-25: 2px;
159
160
  --wds-shadow-blur-0: 0px;
160
161
  --wds-section-helper-prefix-offset-margin: 0px;
162
+ --wds-section-helper-fill-experimental-dark: #f5f7ff;
163
+ --wds-section-helper-border-experimental-dark: #acbeff;
161
164
  --wds-scrollbar-width: 4px;
162
165
  --wds-radio-dot-size: 4px;
163
166
  --wds-page-section-divider-display: block;
@@ -1093,7 +1096,7 @@
1093
1096
  --wds-popover-fill: var(--wds-color-fill-surface-overlay-blur);
1094
1097
  --wds-popover-border-width: var(--wds-border-width-100);
1095
1098
  --wds-popover-border-radius: var(--wds-border-radius-600);
1096
- --wds-popover-border-fill: var(--wds-color-black-750);
1099
+ --wds-popover-border-fill: var(--wds-color-black-700);
1097
1100
  --wds-palette-border: var(--wds-border-radius-200);
1098
1101
  --wds-pagination-padding-vertical: var(--wds-space-50);
1099
1102
  --wds-pagination-padding-horizontal: var(--wds-space-50);
@@ -2238,7 +2241,6 @@
2238
2241
  --wds-section-helper-fill-danger: var(--wds-color-fill-surface-destructive);
2239
2242
  --wds-section-helper-border-success: var(--wds-color-border-success-primary);
2240
2243
  --wds-section-helper-border-standard: var(--wds-color-border-standard-primary);
2241
- --wds-section-helper-border-experimental-dark: var(--wds-color-fill-dark-primary);
2242
2244
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-tiny);
2243
2245
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-small);
2244
2246
  --wds-section-header-label-fill-neutral: var(--wds-color-text-placeholder);
package/odeditor-dark/all.st.css CHANGED
@@ -1828,6 +1828,7 @@
1828
1828
  @property st-global(--wds-section-helper-content-gap-medium);
1829
1829
  @property st-global(--wds-section-helper-content-gap-small);
1830
1830
  @property st-global(--wds-section-helper-fill-danger);
1831
+ @property st-global(--wds-section-helper-fill-experimental-dark);
1831
1832
  @property st-global(--wds-section-helper-fill-premium);
1832
1833
  @property st-global(--wds-section-helper-fill-preview);
1833
1834
  @property st-global(--wds-section-helper-fill-standard);
@@ -2556,6 +2557,7 @@
2556
2557
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
2557
2558
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
2558
2559
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
2560
+ @property st-global(--wds-toggle-button-shadow-spread-primary-inverted);
2559
2561
  @property st-global(--wds-toggle-button-shadow-spread-secondary);
2560
2562
  @property st-global(--wds-toggle-button-shadow-spread-tertiary);
2561
2563
  @property st-global(--wds-toggle-button-shadow-x-primary);
@@ -4446,7 +4448,7 @@
4446
4448
  --wds-pagination-padding-horizontal: 2px;
4447
4449
  --wds-pagination-padding-vertical: 2px;
4448
4450
  --wds-palette-border: 4px;
4449
- --wds-popover-border-fill: #2D2D2E;
4451
+ --wds-popover-border-fill: #3A3A3B;
4450
4452
  --wds-popover-border-radius: 12px;
4451
4453
  --wds-popover-border-width: 1px;
4452
4454
  --wds-popover-fill: rgba(33, 33, 34, 0.98);
@@ -4520,7 +4522,7 @@
4520
4522
  --wds-section-header-padding-vertical-small: 8px;
4521
4523
  --wds-section-helper-action-padding-medium: 12px;
4522
4524
  --wds-section-helper-action-padding-small: 8px;
4523
- --wds-section-helper-border-experimental-dark: #FFFFFF;
4525
+ --wds-section-helper-border-experimental-dark: #acbeff;
4524
4526
  --wds-section-helper-border-preview: #454544;
4525
4527
  --wds-section-helper-border-radius: 12px;
4526
4528
  --wds-section-helper-border-standard: #5B78A9;
@@ -4533,6 +4535,7 @@
4533
4535
  --wds-section-helper-content-gap-medium: 20px;
4534
4536
  --wds-section-helper-content-gap-small: 20px;
4535
4537
  --wds-section-helper-fill-danger: #4D2324;
4538
+ --wds-section-helper-fill-experimental-dark: #f5f7ff;
4536
4539
  --wds-section-helper-fill-premium: #212328;
4537
4540
  --wds-section-helper-fill-preview: #2D2D2E;
4538
4541
  --wds-section-helper-fill-standard: #212328;
@@ -5261,6 +5264,7 @@
5261
5264
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(0, 0, 0, .2);
5262
5265
  --wds-toggle-button-shadow-fill-tertiary: #212328;
5263
5266
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(0, 0, 0, .1);
5267
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
5264
5268
  --wds-toggle-button-shadow-spread-secondary: 0px;
5265
5269
  --wds-toggle-button-shadow-spread-tertiary: 0px;
5266
5270
  --wds-toggle-button-shadow-x-primary: 1px;
package/odeditor-dark/component.st.css CHANGED
@@ -1232,6 +1232,7 @@
1232
1232
  @property st-global(--wds-section-helper-content-gap-medium);
1233
1233
  @property st-global(--wds-section-helper-content-gap-small);
1234
1234
  @property st-global(--wds-section-helper-fill-danger);
1235
+ @property st-global(--wds-section-helper-fill-experimental-dark);
1235
1236
  @property st-global(--wds-section-helper-fill-premium);
1236
1237
  @property st-global(--wds-section-helper-fill-preview);
1237
1238
  @property st-global(--wds-section-helper-fill-standard);
@@ -1805,6 +1806,7 @@
1805
1806
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1806
1807
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1807
1808
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1809
+ @property st-global(--wds-toggle-button-shadow-spread-primary-inverted);
1808
1810
  @property st-global(--wds-toggle-button-shadow-spread-secondary);
1809
1811
  @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1810
1812
  @property st-global(--wds-toggle-button-shadow-x-primary);
@@ -3097,7 +3099,7 @@
3097
3099
  --wds-pagination-padding-horizontal: 2px;
3098
3100
  --wds-pagination-padding-vertical: 2px;
3099
3101
  --wds-palette-border: 4px;
3100
- --wds-popover-border-fill: #2D2D2E;
3102
+ --wds-popover-border-fill: #3A3A3B;
3101
3103
  --wds-popover-border-radius: 12px;
3102
3104
  --wds-popover-border-width: 1px;
3103
3105
  --wds-popover-fill: rgba(33, 33, 34, 0.98);
@@ -3171,7 +3173,7 @@
3171
3173
  --wds-section-header-padding-vertical-small: 8px;
3172
3174
  --wds-section-helper-action-padding-medium: 12px;
3173
3175
  --wds-section-helper-action-padding-small: 8px;
3174
- --wds-section-helper-border-experimental-dark: #FFFFFF;
3176
+ --wds-section-helper-border-experimental-dark: #acbeff;
3175
3177
  --wds-section-helper-border-preview: #454544;
3176
3178
  --wds-section-helper-border-radius: 12px;
3177
3179
  --wds-section-helper-border-standard: #5B78A9;
@@ -3184,6 +3186,7 @@
3184
3186
  --wds-section-helper-content-gap-medium: 20px;
3185
3187
  --wds-section-helper-content-gap-small: 20px;
3186
3188
  --wds-section-helper-fill-danger: #4D2324;
3189
+ --wds-section-helper-fill-experimental-dark: #f5f7ff;
3187
3190
  --wds-section-helper-fill-premium: #212328;
3188
3191
  --wds-section-helper-fill-preview: #2D2D2E;
3189
3192
  --wds-section-helper-fill-standard: #212328;
@@ -3757,6 +3760,7 @@
3757
3760
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(0, 0, 0, .2);
3758
3761
  --wds-toggle-button-shadow-fill-tertiary: #212328;
3759
3762
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(0, 0, 0, .1);
3763
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
3760
3764
  --wds-toggle-button-shadow-spread-secondary: 0px;
3761
3765
  --wds-toggle-button-shadow-spread-tertiary: 0px;
3762
3766
  --wds-toggle-button-shadow-x-primary: 1px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.231.3",
3
+ "version": "1.232.1",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -36,5 +36,5 @@
36
36
  "author": "augustinasv@wix.com",
37
37
  "description": "Design system tokens",
38
38
  "packageManager": "yarn@3.5.0",
39
- "falconPackageHash": "ba3cd03747d48d22ed89f64f797b63e62f4215adbd4ea684baf5f6dc"
39
+ "falconPackageHash": "d302767f30de2ae83b141099aa1d0c0801b02d091584eb4d0f1d4008"
40
40
  }
package/studio/all.css CHANGED
@@ -330,6 +330,7 @@
330
330
  --wds-toggle-switch-icon: false;
331
331
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
332
332
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
333
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
333
334
  --wds-tabs-selection-height: 3px;
334
335
  --wds-table-toolbar-padding-block-start: 15px;
335
336
  --wds-table-toolbar-padding-block-end: 15px;
@@ -2155,6 +2156,7 @@
2155
2156
  --wds-section-helper-fill-success: var(--wds-color-fill-surface-success);
2156
2157
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
2157
2158
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2159
+ --wds-section-helper-fill-experimental-dark: var(--wds-color-fill-dark-primary);
2158
2160
  --wds-section-helper-fill-danger: var(--wds-color-fill-surface-destructive);
2159
2161
  --wds-section-helper-border-success: var(--wds-color-border-success-primary);
2160
2162
  --wds-section-helper-border-standard: var(--wds-color-border-standard-primary);
package/studio/all.scss CHANGED
@@ -15,6 +15,7 @@
15
15
  --wds-toggle-switch-icon: false;
16
16
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
17
17
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
18
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
18
19
  --wds-tabs-selection-height: 3px;
19
20
  --wds-table-toolbar-padding-block-start: 15px;
20
21
  --wds-table-toolbar-padding-block-end: 15px;
@@ -2144,6 +2145,7 @@
2144
2145
  --wds-section-helper-fill-success: var(--wds-color-fill-surface-success);
2145
2146
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
2146
2147
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2148
+ --wds-section-helper-fill-experimental-dark: var(--wds-color-fill-dark-primary);
2147
2149
  --wds-section-helper-fill-danger: var(--wds-color-fill-surface-destructive);
2148
2150
  --wds-section-helper-border-success: var(--wds-color-border-success-primary);
2149
2151
  --wds-section-helper-border-standard: var(--wds-color-border-standard-primary);
package/studio/all.st.css CHANGED
@@ -1836,6 +1836,7 @@
1836
1836
  @property st-global(--wds-section-helper-content-gap-medium);
1837
1837
  @property st-global(--wds-section-helper-content-gap-small);
1838
1838
  @property st-global(--wds-section-helper-fill-danger);
1839
+ @property st-global(--wds-section-helper-fill-experimental-dark);
1839
1840
  @property st-global(--wds-section-helper-fill-premium);
1840
1841
  @property st-global(--wds-section-helper-fill-preview);
1841
1842
  @property st-global(--wds-section-helper-fill-standard);
@@ -2547,6 +2548,7 @@
2547
2548
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
2548
2549
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
2549
2550
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
2551
+ @property st-global(--wds-toggle-button-shadow-spread-primary-inverted);
2550
2552
  @property st-global(--wds-toggle-button-shadow-spread-secondary);
2551
2553
  @property st-global(--wds-toggle-button-shadow-spread-tertiary);
2552
2554
  @property st-global(--wds-toggle-button-shadow-x-primary);
@@ -4544,6 +4546,7 @@
4544
4546
  --wds-section-helper-content-gap-medium: 8px;
4545
4547
  --wds-section-helper-content-gap-small: 8px;
4546
4548
  --wds-section-helper-fill-danger: #fde3e1;
4549
+ --wds-section-helper-fill-experimental-dark: #131720;
4547
4550
  --wds-section-helper-fill-premium: #f1e0f9;
4548
4551
  --wds-section-helper-fill-preview: #edeef2;
4549
4552
  --wds-section-helper-fill-standard: #dce9ff;
@@ -5255,6 +5258,7 @@
5255
5258
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, 0);
5256
5259
  --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, 0);
5257
5260
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, 0);
5261
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
5258
5262
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
5259
5263
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
5260
5264
  --wds-toggle-button-shadow-x-primary: 0px;
package/studio/component.st.css CHANGED
@@ -1242,6 +1242,7 @@
1242
1242
  @property st-global(--wds-section-helper-content-gap-medium);
1243
1243
  @property st-global(--wds-section-helper-content-gap-small);
1244
1244
  @property st-global(--wds-section-helper-fill-danger);
1245
+ @property st-global(--wds-section-helper-fill-experimental-dark);
1245
1246
  @property st-global(--wds-section-helper-fill-premium);
1246
1247
  @property st-global(--wds-section-helper-fill-preview);
1247
1248
  @property st-global(--wds-section-helper-fill-standard);
@@ -1800,6 +1801,7 @@
1800
1801
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1801
1802
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1802
1803
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1804
+ @property st-global(--wds-toggle-button-shadow-spread-primary-inverted);
1803
1805
  @property st-global(--wds-toggle-button-shadow-spread-secondary);
1804
1806
  @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1805
1807
  @property st-global(--wds-toggle-button-shadow-x-primary);
@@ -3201,6 +3203,7 @@
3201
3203
  --wds-section-helper-content-gap-medium: 8px;
3202
3204
  --wds-section-helper-content-gap-small: 8px;
3203
3205
  --wds-section-helper-fill-danger: #fde3e1;
3206
+ --wds-section-helper-fill-experimental-dark: #131720;
3204
3207
  --wds-section-helper-fill-premium: #f1e0f9;
3205
3208
  --wds-section-helper-fill-preview: #edeef2;
3206
3209
  --wds-section-helper-fill-standard: #dce9ff;
@@ -3759,6 +3762,7 @@
3759
3762
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, 0);
3760
3763
  --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, 0);
3761
3764
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, 0);
3765
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
3762
3766
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
3763
3767
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
3764
3768
  --wds-toggle-button-shadow-x-primary: 0px;
package/studio2-light/all.css CHANGED
@@ -335,6 +335,7 @@
335
335
  --wds-toggle-button-shadow-x-primary: 1px;
336
336
  --wds-toggle-button-shadow-spread-tertiary: 0px;
337
337
  --wds-toggle-button-shadow-spread-secondary: 0px;
338
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
338
339
  --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
339
340
  --wds-toggle-button-shadow-blur-tertiary: 0.6px;
340
341
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
@@ -471,9 +472,9 @@
471
472
  --wds-editable-title-marker-line-style: none;
472
473
  --wds-counter-badge-padding-horizontal-tiny: 4px;
473
474
  --wds-counter-badge-font-size-tiny: 10px;
474
- --wds-composer-sidebar-border-width: 1px;
475
475
  --wds-composer-sidebar-end-max-width: 240px;
476
476
  --wds-composer-sidebar-bottom-width: 88px;
477
+ --wds-composer-sidebar-border-width: 1px;
477
478
  --wds-color-picker-width: 236px;
478
479
  --wds-clickable-card-standard-box-shadow-hover: none;
479
480
  --wds-carousel-gradient-opacity: 50%;
@@ -967,14 +968,6 @@
967
968
  --wds-color-border-dark-primary-disabled: var(--wds-color-black-100-transparent-10);
968
969
  --wds-color-border-dark-primary-active: var(--wds-color-black-200);
969
970
  --wds-color-border-dark-primary: var(--wds-color-black-400);
970
- --wds-composer-header-padding-vertical-small: var(--wds-space-250);
971
- --wds-composer-header-height-small: var(--wds-space-750);
972
- --wds-composer-header-height-medium: var(--wds-space-750);
973
- --wds-composer-header-divider-margin: var(--wds-space-400);
974
- --wds-composer-header-border-fill: var(--wds-color-white-transparent-0);
975
- --wds-composer-header-back-button-icon-size-small: var(--wds-space-475);
976
- --wds-composer-header-back-button-icon-size-medium: var(--wds-space-475);
977
- --wds-composer-header-actions-gap: var(--wds-space-50);
978
971
  --wds-vertical-tabs-item-padding-vertical-tiny: var(--wds-space-100);
979
972
  --wds-vertical-tabs-item-padding-vertical-small: var(--wds-space-200);
980
973
  --wds-vertical-tabs-item-padding-vertical-medium: var(--wds-space-200);
@@ -1697,6 +1690,7 @@
1697
1690
  --wds-icon-button-color-fill-light-primary-disabled: var(--wds-color-black-700);
1698
1691
  --wds-icon-button-color-fill-dark-tertiary-hover: var(--wds-color-black-600);
1699
1692
  --wds-icon-button-color-fill-dark-secondary-disabled: var(--wds-color-black-700);
1693
+ --wds-icon-button-color-fill-dark-secondary: var(--wds-color-white-transparent-0);
1700
1694
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-black-700);
1701
1695
  --wds-icon-button-color-border-standard-secondary-disabled: var(--wds-color-black-700);
1702
1696
  --wds-icon-button-color-border-premium-secondary-disabled: var(--wds-color-black-700);
@@ -1773,6 +1767,14 @@
1773
1767
  --wds-composer-sidebar-item-bottom-padding-horizontal-small: var(--wds-space-100);
1774
1768
  --wds-composer-sidebar-item-bottom-padding-horizontal-medium: var(--wds-space-100);
1775
1769
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1770
+ --wds-composer-header-padding-vertical-small: var(--wds-space-250);
1771
+ --wds-composer-header-height-small: var(--wds-space-750);
1772
+ --wds-composer-header-height-medium: var(--wds-space-750);
1773
+ --wds-composer-header-divider-margin: var(--wds-space-400);
1774
+ --wds-composer-header-border-fill: var(--wds-color-white-transparent-0);
1775
+ --wds-composer-header-back-button-icon-size-small: var(--wds-space-475);
1776
+ --wds-composer-header-back-button-icon-size-medium: var(--wds-space-475);
1777
+ --wds-composer-header-actions-gap: var(--wds-space-50);
1776
1778
  --wds-color-picker-padding-vertical: var(--wds-space-300);
1777
1779
  --wds-color-picker-padding-horizontal: var(--wds-space-400);
1778
1780
  --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-500);
@@ -2066,7 +2068,6 @@
2066
2068
  --wds-font-line-height-body-extra-tiny: var(--wds-font-line-height-100);
2067
2069
  --wds-color-fill-surface-overlay-blur: var(--wds-color-fill-surface-overlay);
2068
2070
  --wds-color-fill-surface-modal-backdrop: var(--wds-color-fill-transparent-primary);
2069
- --wds-composer-header-fill: var(--wds-color-fill-surface-sunken);
2070
2071
  --wds-vertical-tabs-item-label-text-premium-active: var(--wds-color-text-premium);
2071
2072
  --wds-vertical-tabs-item-label-text-premium: var(--wds-color-text-premium);
2072
2073
  --wds-vertical-tabs-item-label-text-active: var(--wds-color-text-standard-primary);
@@ -2258,6 +2259,7 @@
2258
2259
  --wds-section-helper-title-font-size: var(--wds-font-size-body-tiny);
2259
2260
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
2260
2261
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2262
+ --wds-section-helper-fill-experimental-dark: var(--wds-color-fill-dark-primary);
2261
2263
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-tiny);
2262
2264
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-small);
2263
2265
  --wds-section-header-label-fill-neutral: var(--wds-color-text-placeholder);
@@ -2431,7 +2433,6 @@
2431
2433
  --wds-icon-button-color-fill-dark-tertiary: var(--wds-color-fill-light-secondary);
2432
2434
  --wds-icon-button-color-fill-dark-secondary-hover: var(--wds-color-fill-dark-tertiary-hover);
2433
2435
  --wds-icon-button-color-fill-dark-secondary-active: var(--wds-color-fill-dark-tertiary-active);
2434
- --wds-icon-button-color-fill-dark-secondary: var(--wds-color-fill-dark-tertiary);
2435
2436
  --wds-icon-button-color-fill-dark-primary-hover: var(--wds-color-fill-dark-primary-hover);
2436
2437
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
2437
2438
  --wds-icon-button-color-fill-dark-primary: var(--wds-color-fill-dark-primary);
@@ -2474,6 +2475,7 @@
2474
2475
  --wds-custom-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
2475
2476
  --wds-custom-modal-border-radius: var(--wds-border-radius-surface-modal);
2476
2477
  --wds-composer-sidebar-fill: var(--wds-color-fill-surface-sunken);
2478
+ --wds-composer-header-fill: var(--wds-color-fill-surface-sunken);
2477
2479
  --wds-close-button-standard-filled-text-hover: var(--wds-color-text-standard-primary);
2478
2480
  --wds-close-button-standard-filled-text-disabled: var(--wds-color-text-disabled);
2479
2481
  --wds-close-button-standard-filled-text: var(--wds-color-text-standard-primary);
package/studio2-light/all.scss CHANGED
@@ -29,6 +29,7 @@
29
29
  --wds-toggle-button-shadow-x-primary: 1px;
30
30
  --wds-toggle-button-shadow-spread-tertiary: 0px;
31
31
  --wds-toggle-button-shadow-spread-secondary: 0px;
32
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
32
33
  --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
33
34
  --wds-toggle-button-shadow-blur-tertiary: 0.6px;
34
35
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
@@ -1362,6 +1363,7 @@
1362
1363
  --wds-icon-button-color-fill-light-primary-disabled: var(--wds-color-black-700);
1363
1364
  --wds-icon-button-color-fill-dark-tertiary-hover: var(--wds-color-black-600);
1364
1365
  --wds-icon-button-color-fill-dark-secondary-disabled: var(--wds-color-black-700);
1366
+ --wds-icon-button-color-fill-dark-secondary: var(--wds-color-white-transparent-0);
1365
1367
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-black-700);
1366
1368
  --wds-icon-button-color-border-standard-secondary-disabled: var(--wds-color-black-700);
1367
1369
  --wds-icon-button-color-border-premium-secondary-disabled: var(--wds-color-black-700);
@@ -2245,6 +2247,7 @@
2245
2247
  --wds-section-helper-title-font-size: var(--wds-font-size-body-tiny);
2246
2248
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
2247
2249
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2250
+ --wds-section-helper-fill-experimental-dark: var(--wds-color-fill-dark-primary);
2248
2251
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-tiny);
2249
2252
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-small);
2250
2253
  --wds-section-header-label-fill-neutral: var(--wds-color-text-placeholder);
@@ -2418,7 +2421,6 @@
2418
2421
  --wds-icon-button-color-fill-dark-tertiary: var(--wds-color-fill-light-secondary);
2419
2422
  --wds-icon-button-color-fill-dark-secondary-hover: var(--wds-color-fill-dark-tertiary-hover);
2420
2423
  --wds-icon-button-color-fill-dark-secondary-active: var(--wds-color-fill-dark-tertiary-active);
2421
- --wds-icon-button-color-fill-dark-secondary: var(--wds-color-fill-dark-tertiary);
2422
2424
  --wds-icon-button-color-fill-dark-primary-hover: var(--wds-color-fill-dark-primary-hover);
2423
2425
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
2424
2426
  --wds-icon-button-color-fill-dark-primary: var(--wds-color-fill-dark-primary);
package/studio2-light/all.st.css CHANGED
@@ -1824,6 +1824,7 @@
1824
1824
  @property st-global(--wds-section-helper-content-gap-medium);
1825
1825
  @property st-global(--wds-section-helper-content-gap-small);
1826
1826
  @property st-global(--wds-section-helper-fill-danger);
1827
+ @property st-global(--wds-section-helper-fill-experimental-dark);
1827
1828
  @property st-global(--wds-section-helper-fill-premium);
1828
1829
  @property st-global(--wds-section-helper-fill-preview);
1829
1830
  @property st-global(--wds-section-helper-fill-standard);
@@ -2554,6 +2555,7 @@
2554
2555
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
2555
2556
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
2556
2557
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
2558
+ @property st-global(--wds-toggle-button-shadow-spread-primary-inverted);
2557
2559
  @property st-global(--wds-toggle-button-shadow-spread-secondary);
2558
2560
  @property st-global(--wds-toggle-button-shadow-spread-tertiary);
2559
2561
  @property st-global(--wds-toggle-button-shadow-x-primary);
@@ -3933,7 +3935,7 @@
3933
3935
  --wds-icon-button-color-fill-dark-primary-active: #525150;
3934
3936
  --wds-icon-button-color-fill-dark-primary-disabled: #f0efef;
3935
3937
  --wds-icon-button-color-fill-dark-primary-hover: #383838;
3936
- --wds-icon-button-color-fill-dark-secondary: #ffffff;
3938
+ --wds-icon-button-color-fill-dark-secondary: rgba(255, 255, 255, 0);
3937
3939
  --wds-icon-button-color-fill-dark-secondary-active: #f0efef;
3938
3940
  --wds-icon-button-color-fill-dark-secondary-disabled: #f0efef;
3939
3941
  --wds-icon-button-color-fill-dark-secondary-hover: #f8f6f6;
@@ -4527,6 +4529,7 @@
4527
4529
  --wds-section-helper-content-gap-medium: 20px;
4528
4530
  --wds-section-helper-content-gap-small: 20px;
4529
4531
  --wds-section-helper-fill-danger: #fcebeb;
4532
+ --wds-section-helper-fill-experimental-dark: #151414;
4530
4533
  --wds-section-helper-fill-premium: #f5f7ff;
4531
4534
  --wds-section-helper-fill-preview: #f0efef;
4532
4535
  --wds-section-helper-fill-standard: #f5f7ff;
@@ -5257,6 +5260,7 @@
5257
5260
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, .2);
5258
5261
  --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, .25);
5259
5262
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, .25);
5263
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
5260
5264
  --wds-toggle-button-shadow-spread-secondary: 0px;
5261
5265
  --wds-toggle-button-shadow-spread-tertiary: 0px;
5262
5266
  --wds-toggle-button-shadow-x-primary: 1px;
package/studio2-light/component.st.css CHANGED
@@ -1229,6 +1229,7 @@
1229
1229
  @property st-global(--wds-section-helper-content-gap-medium);
1230
1230
  @property st-global(--wds-section-helper-content-gap-small);
1231
1231
  @property st-global(--wds-section-helper-fill-danger);
1232
+ @property st-global(--wds-section-helper-fill-experimental-dark);
1232
1233
  @property st-global(--wds-section-helper-fill-premium);
1233
1234
  @property st-global(--wds-section-helper-fill-preview);
1234
1235
  @property st-global(--wds-section-helper-fill-standard);
@@ -1804,6 +1805,7 @@
1804
1805
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1805
1806
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1806
1807
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1808
+ @property st-global(--wds-toggle-button-shadow-spread-primary-inverted);
1807
1809
  @property st-global(--wds-toggle-button-shadow-spread-secondary);
1808
1810
  @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1809
1811
  @property st-global(--wds-toggle-button-shadow-x-primary);
@@ -2614,7 +2616,7 @@
2614
2616
  --wds-icon-button-color-fill-dark-primary-active: #525150;
2615
2617
  --wds-icon-button-color-fill-dark-primary-disabled: #f0efef;
2616
2618
  --wds-icon-button-color-fill-dark-primary-hover: #383838;
2617
- --wds-icon-button-color-fill-dark-secondary: #ffffff;
2619
+ --wds-icon-button-color-fill-dark-secondary: rgba(255, 255, 255, 0);
2618
2620
  --wds-icon-button-color-fill-dark-secondary-active: #f0efef;
2619
2621
  --wds-icon-button-color-fill-dark-secondary-disabled: #f0efef;
2620
2622
  --wds-icon-button-color-fill-dark-secondary-hover: #f8f6f6;
@@ -3180,6 +3182,7 @@
3180
3182
  --wds-section-helper-content-gap-medium: 20px;
3181
3183
  --wds-section-helper-content-gap-small: 20px;
3182
3184
  --wds-section-helper-fill-danger: #fcebeb;
3185
+ --wds-section-helper-fill-experimental-dark: #151414;
3183
3186
  --wds-section-helper-fill-premium: #f5f7ff;
3184
3187
  --wds-section-helper-fill-preview: #f0efef;
3185
3188
  --wds-section-helper-fill-standard: #f5f7ff;
@@ -3755,6 +3758,7 @@
3755
3758
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, .2);
3756
3759
  --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, .25);
3757
3760
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, .25);
3761
+ --wds-toggle-button-shadow-spread-primary-inverted: 0px;
3758
3762
  --wds-toggle-button-shadow-spread-secondary: 0px;
3759
3763
  --wds-toggle-button-shadow-spread-tertiary: 0px;
3760
3764
  --wds-toggle-button-shadow-x-primary: 1px;