@wix/design-system-tokens 1.221.1 → 1.222.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 (28) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/all.css +5 -1
  3. package/all.scss +5 -1
  4. package/all.st.css +8 -2
  5. package/component.st.css +8 -0
  6. package/foundation.st.css +2 -2
  7. package/odeditor/all.css +5 -1
  8. package/odeditor/all.scss +5 -1
  9. package/odeditor/all.st.css +8 -2
  10. package/odeditor/component.st.css +8 -0
  11. package/odeditor/foundation.st.css +2 -2
  12. package/odeditor-dark/all.css +6 -2
  13. package/odeditor-dark/all.scss +6 -2
  14. package/odeditor-dark/all.st.css +9 -3
  15. package/odeditor-dark/component.st.css +8 -0
  16. package/odeditor-dark/foundation.st.css +2 -2
  17. package/odeditor-dark/semantic.st.css +1 -1
  18. package/package.json +2 -2
  19. package/studio/all.css +5 -1
  20. package/studio/all.scss +5 -1
  21. package/studio/all.st.css +8 -2
  22. package/studio/component.st.css +8 -0
  23. package/studio/foundation.st.css +2 -2
  24. package/wixel/all.css +5 -1
  25. package/wixel/all.scss +5 -1
  26. package/wixel/all.st.css +8 -2
  27. package/wixel/component.st.css +8 -0
  28. package/wixel/foundation.st.css +2 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## 1.222.1
2
+
3
+ ### Patch Changes
4
+
5
+ - [#16797](https://github.com/wix-private/wix-design-systems/pull/16797) [`9b91019`](https://github.com/wix-private/wix-design-systems/commit/9b910190898244bb192eb8f1471556a9a5b94dcf) - Add `--wds-vertical-tabs-item-padding-horizontal-medium-offset`, `--wds-vertical-tabs-item-padding-horizontal-small-offset` and `--wds-vertical-tabs-item-padding-horizontal-tiny-offset`, which control how far a VerticalTabs item's prefix icon reaches back into the item's start padding: medium is `24px` everywhere except Studio (`10px`), while small and tiny are `20px` in Default, Studio and Wixel and `9px` / `10px` in Harmony (odeditor) and Studio 2.0 (odeditor-dark).
6
+
7
+ ## 1.222.0
8
+
9
+ ### Minor Changes
10
+
11
+ - [#16758](https://github.com/wix-private/wix-design-systems/pull/16758) [`10a2c42`](https://github.com/wix-private/wix-design-systems/commit/10a2c42c5e4a2ed15e3d9e815679e381eb86e7e6) - Replace `--wds-internal-animations-enabled` with `--wds-internal-theme`, an internal token holding the loaded theme name (`default`, `studio`, `odeditor`, `odeditor-dark`, `wixel`). Not part of the public theming contract.
12
+
13
+ ### Patch Changes
14
+
15
+ - [#16767](https://github.com/wix-private/wix-design-systems/pull/16767) [`677224e`](https://github.com/wix-private/wix-design-systems/commit/677224e583a5c25335a75b261a0f271bab6b9560) - `--wds-illustration-color-6` in Studio 2.0 (odeditor-dark) changes back from `#002294` to `#EAEFFF`, so the illustrations that use it for thin details — alignment rules, dots and separator marks — are legible again on the dark canvas instead of rendering navy on near-navy. Image-placeholder illustrations such as `BlankImage` and the `Aspect*Image` family, which use the same token for their base plate, render that plate light again in this theme.
16
+
1
17
  ## 1.221.1
2
18
 
3
19
  ## 1.221.0
package/all.css CHANGED
@@ -274,6 +274,9 @@
274
274
  --wds-background-blur-100: 0px;
275
275
  --wds-background-blur-50: 0px;
276
276
  --wds-background-blur-0: 0px;
277
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
278
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
279
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
277
280
  --wds-top-banner-shadow: 0 0 0 transparent;
278
281
  --wds-toggle-switch-width-small: 28px;
279
282
  --wds-toggle-switch-width-medium: 34px;
@@ -358,7 +361,7 @@
358
361
  --wds-loader-stroke-width-large: 4px;
359
362
  --wds-list-item-select-min-height-medium: auto;
360
363
  --wds-list-item-action-subtitle-offset: 0px;
361
- --wds-internal-animations-enabled: false;
364
+ --wds-internal-theme: default;
362
365
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
363
366
  --wds-internal-thumbnail-illustration-size-small: 51px;
364
367
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1794,6 +1797,7 @@
1794
1797
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1795
1798
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1796
1799
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-medium);
1800
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1797
1801
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1798
1802
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1799
1803
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
package/all.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  @mixin tokens {
2
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
3
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
4
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
2
5
  --wds-top-banner-shadow: 0 0 0 transparent;
3
6
  --wds-toggle-switch-width-small: 28px;
4
7
  --wds-toggle-switch-width-medium: 34px;
@@ -145,6 +148,7 @@
145
148
  --wds-internal-thumbnail-illustration-size-small: 51px;
146
149
  --wds-internal-thumbnail-illustration-size-medium: 72px;
147
150
  --wds-internal-thumbnail-illustration-size-large: 114px;
151
+ --wds-internal-theme: default;
148
152
  --wds-internal-image-width-tiny: 106px;
149
153
  --wds-internal-image-width-small: 122px;
150
154
  --wds-internal-image-width-medium: 156px;
@@ -153,7 +157,6 @@
153
157
  --wds-internal-image-height-medium: 84px;
154
158
  --wds-internal-image-height-large: 120px;
155
159
  --wds-internal-color-picker-width: 240px;
156
- --wds-internal-animations-enabled: false;
157
160
  --wds-input-width-tiny: 48px;
158
161
  --wds-input-width-small: 54px;
159
162
  --wds-input-width-medium: 72px;
@@ -1776,6 +1779,7 @@
1776
1779
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1777
1780
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1778
1781
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-medium);
1782
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1779
1783
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1780
1784
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1781
1785
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
package/all.st.css CHANGED
@@ -1244,7 +1244,6 @@
1244
1244
  @property st-global(--wds-input-width-medium);
1245
1245
  @property st-global(--wds-input-width-small);
1246
1246
  @property st-global(--wds-input-width-tiny);
1247
- @property st-global(--wds-internal-animations-enabled);
1248
1247
  @property st-global(--wds-internal-color-picker-padding-horizontal);
1249
1248
  @property st-global(--wds-internal-color-picker-padding-vertical);
1250
1249
  @property st-global(--wds-internal-color-picker-width);
@@ -1255,6 +1254,7 @@
1255
1254
  @property st-global(--wds-internal-image-width-medium);
1256
1255
  @property st-global(--wds-internal-image-width-small);
1257
1256
  @property st-global(--wds-internal-image-width-tiny);
1257
+ @property st-global(--wds-internal-theme);
1258
1258
  @property st-global(--wds-internal-thumbnail-illustration-size-large);
1259
1259
  @property st-global(--wds-internal-thumbnail-illustration-size-medium);
1260
1260
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
@@ -2365,8 +2365,11 @@
2365
2365
  @property st-global(--wds-vertical-tabs-item-label-text-premium);
2366
2366
  @property st-global(--wds-vertical-tabs-item-label-text-premium-active);
2367
2367
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium);
2368
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium-offset);
2368
2369
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
2370
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small-offset);
2369
2371
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
2372
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny-offset);
2370
2373
  @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
2371
2374
  @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
2372
2375
  @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
@@ -3642,7 +3645,6 @@
3642
3645
  --wds-input-width-medium: 72px;
3643
3646
  --wds-input-width-small: 54px;
3644
3647
  --wds-input-width-tiny: 48px;
3645
- --wds-internal-animations-enabled: false;
3646
3648
  --wds-internal-color-picker-padding-horizontal: 18px;
3647
3649
  --wds-internal-color-picker-padding-vertical: 12px;
3648
3650
  --wds-internal-color-picker-width: 240px;
@@ -3653,6 +3655,7 @@
3653
3655
  --wds-internal-image-width-medium: 156px;
3654
3656
  --wds-internal-image-width-small: 122px;
3655
3657
  --wds-internal-image-width-tiny: 106px;
3658
+ --wds-internal-theme: default;
3656
3659
  --wds-internal-thumbnail-illustration-size-large: 114px;
3657
3660
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3658
3661
  --wds-internal-thumbnail-illustration-size-small: 51px;
@@ -4763,8 +4766,11 @@
4763
4766
  --wds-vertical-tabs-item-label-text-premium: #9a27d5;
4764
4767
  --wds-vertical-tabs-item-label-text-premium-active: #9a27d5;
4765
4768
  --wds-vertical-tabs-item-padding-horizontal-medium: 24px;
4769
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
4766
4770
  --wds-vertical-tabs-item-padding-horizontal-small: 24px;
4771
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
4767
4772
  --wds-vertical-tabs-item-padding-horizontal-tiny: 24px;
4773
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
4768
4774
  --wds-vertical-tabs-item-padding-vertical-medium: 12px;
4769
4775
  --wds-vertical-tabs-item-padding-vertical-small: 12px;
4770
4776
  --wds-vertical-tabs-item-padding-vertical-tiny: 6px;
package/component.st.css CHANGED
@@ -1346,6 +1346,7 @@
1346
1346
  @property st-global(--wds-tabs-item-gap-small-medium);
1347
1347
  @property st-global(--wds-tabs-label-fill);
1348
1348
  @property st-global(--wds-tabs-label-fill-active);
1349
+ @property st-global(--wds-tabs-label-fill-disabled);
1349
1350
  @property st-global(--wds-tabs-label-font-size-medium);
1350
1351
  @property st-global(--wds-tabs-label-font-size-small);
1351
1352
  @property st-global(--wds-tabs-label-font-size-small-medium);
@@ -1629,8 +1630,11 @@
1629
1630
  @property st-global(--wds-vertical-tabs-item-label-text-premium);
1630
1631
  @property st-global(--wds-vertical-tabs-item-label-text-premium-active);
1631
1632
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium);
1633
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium-offset);
1632
1634
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
1635
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small-offset);
1633
1636
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
1637
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny-offset);
1634
1638
  @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
1635
1639
  @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
1636
1640
  @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
@@ -3006,6 +3010,7 @@
3006
3010
  --wds-tabs-item-gap-small-medium: 6px;
3007
3011
  --wds-tabs-label-fill: #000624;
3008
3012
  --wds-tabs-label-fill-active: #116dff;
3013
+ --wds-tabs-label-fill-disabled: rgba(0, 6, 36, .3);
3009
3014
  --wds-tabs-label-font-size-medium: 16px;
3010
3015
  --wds-tabs-label-font-size-small: 14px;
3011
3016
  --wds-tabs-label-font-size-small-medium: 14px;
@@ -3289,8 +3294,11 @@
3289
3294
  --wds-vertical-tabs-item-label-text-premium: #9a27d5;
3290
3295
  --wds-vertical-tabs-item-label-text-premium-active: #9a27d5;
3291
3296
  --wds-vertical-tabs-item-padding-horizontal-medium: 24px;
3297
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
3292
3298
  --wds-vertical-tabs-item-padding-horizontal-small: 24px;
3299
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
3293
3300
  --wds-vertical-tabs-item-padding-horizontal-tiny: 24px;
3301
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
3294
3302
  --wds-vertical-tabs-item-padding-vertical-medium: 12px;
3295
3303
  --wds-vertical-tabs-item-padding-vertical-small: 12px;
3296
3304
  --wds-vertical-tabs-item-padding-vertical-tiny: 6px;
package/foundation.st.css CHANGED
@@ -160,7 +160,7 @@
160
160
  @property st-global(--wds-font-weight-medium);
161
161
  @property st-global(--wds-font-weight-regular);
162
162
  @property st-global(--wds-font-weight-semi-bold);
163
- @property st-global(--wds-internal-animations-enabled);
163
+ @property st-global(--wds-internal-theme);
164
164
  @property st-global(--wds-shadow-100);
165
165
  @property st-global(--wds-shadow-200);
166
166
  @property st-global(--wds-shadow-300);
@@ -401,7 +401,7 @@
401
401
  --wds-font-weight-medium: 500;
402
402
  --wds-font-weight-regular: 400;
403
403
  --wds-font-weight-semi-bold: 600;
404
- --wds-internal-animations-enabled: false;
404
+ --wds-internal-theme: default;
405
405
  --wds-shadow-100: 0 0 3px rgba(0, 6, 36, .1), 0 2px 1px rgba(0, 6, 36, .5);
406
406
  --wds-shadow-200: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
407
407
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
package/odeditor/all.css CHANGED
@@ -305,6 +305,9 @@
305
305
  --wds-background-blur-100: 8px;
306
306
  --wds-background-blur-50: 4px;
307
307
  --wds-background-blur-0: 0px;
308
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 10px;
309
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 9px;
310
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
308
311
  --wds-variable-input-padding-vertical-tiny: 2px;
309
312
  --wds-variable-input-padding-vertical-small: 5px;
310
313
  --wds-top-banner-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
@@ -396,7 +399,7 @@
396
399
  --wds-loader-stroke-width-large: 2px;
397
400
  --wds-list-item-select-min-height-medium: auto;
398
401
  --wds-list-item-action-subtitle-offset: -2px;
399
- --wds-internal-animations-enabled: true;
402
+ --wds-internal-theme: odeditor;
400
403
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
401
404
  --wds-internal-thumbnail-illustration-size-small: 51px;
402
405
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1898,6 +1901,7 @@
1898
1901
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1899
1902
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1900
1903
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1904
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1901
1905
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1902
1906
  --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1903
1907
  --wds-table-list-item-fill-hover-draggable: var(--wds-color-fill-dark-tertiary-hover);
package/odeditor/all.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  @mixin tokens {
2
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 10px;
3
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 9px;
4
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
2
5
  --wds-variable-input-padding-vertical-tiny: 2px;
3
6
  --wds-variable-input-padding-vertical-small: 5px;
4
7
  --wds-top-banner-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
@@ -160,6 +163,7 @@
160
163
  --wds-internal-thumbnail-illustration-size-small: 51px;
161
164
  --wds-internal-thumbnail-illustration-size-medium: 72px;
162
165
  --wds-internal-thumbnail-illustration-size-large: 114px;
166
+ --wds-internal-theme: odeditor;
163
167
  --wds-internal-image-width-tiny: 106px;
164
168
  --wds-internal-image-width-small: 122px;
165
169
  --wds-internal-image-width-medium: 156px;
@@ -167,7 +171,6 @@
167
171
  --wds-internal-image-height-small: 60px;
168
172
  --wds-internal-image-height-medium: 84px;
169
173
  --wds-internal-image-height-large: 120px;
170
- --wds-internal-animations-enabled: true;
171
174
  --wds-input-shadow-focus-warning: transparent;
172
175
  --wds-input-shadow-focus-standard: transparent;
173
176
  --wds-input-shadow-focus-destructive: transparent;
@@ -1880,6 +1883,7 @@
1880
1883
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1881
1884
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1882
1885
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1886
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1883
1887
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1884
1888
  --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1885
1889
  --wds-table-list-item-fill-hover-draggable: var(--wds-color-fill-dark-tertiary-hover);
package/odeditor/all.st.css CHANGED
@@ -1225,7 +1225,6 @@
1225
1225
  @property st-global(--wds-input-value-font-size-tiny);
1226
1226
  @property st-global(--wds-internal-angle-input-knob-offset);
1227
1227
  @property st-global(--wds-internal-angle-input-knob-offset-bottom);
1228
- @property st-global(--wds-internal-animations-enabled);
1229
1228
  @property st-global(--wds-internal-button-border-width);
1230
1229
  @property st-global(--wds-internal-image-height-large);
1231
1230
  @property st-global(--wds-internal-image-height-medium);
@@ -1234,6 +1233,7 @@
1234
1233
  @property st-global(--wds-internal-image-width-medium);
1235
1234
  @property st-global(--wds-internal-image-width-small);
1236
1235
  @property st-global(--wds-internal-image-width-tiny);
1236
+ @property st-global(--wds-internal-theme);
1237
1237
  @property st-global(--wds-internal-thumbnail-illustration-size-large);
1238
1238
  @property st-global(--wds-internal-thumbnail-illustration-size-medium);
1239
1239
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
@@ -2347,8 +2347,11 @@
2347
2347
  @property st-global(--wds-vertical-tabs-item-label-text-active);
2348
2348
  @property st-global(--wds-vertical-tabs-item-label-text-premium);
2349
2349
  @property st-global(--wds-vertical-tabs-item-label-text-premium-active);
2350
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium-offset);
2350
2351
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
2352
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small-offset);
2351
2353
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
2354
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny-offset);
2352
2355
  @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
2353
2356
  @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
2354
2357
  @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
@@ -3595,7 +3598,6 @@
3595
3598
  --wds-input-value-font-size-tiny: 12px;
3596
3599
  --wds-internal-angle-input-knob-offset: 2px;
3597
3600
  --wds-internal-angle-input-knob-offset-bottom: 4px;
3598
- --wds-internal-animations-enabled: true;
3599
3601
  --wds-internal-button-border-width: 1px;
3600
3602
  --wds-internal-image-height-large: 120px;
3601
3603
  --wds-internal-image-height-medium: 84px;
@@ -3604,6 +3606,7 @@
3604
3606
  --wds-internal-image-width-medium: 156px;
3605
3607
  --wds-internal-image-width-small: 122px;
3606
3608
  --wds-internal-image-width-tiny: 106px;
3609
+ --wds-internal-theme: odeditor;
3607
3610
  --wds-internal-thumbnail-illustration-size-large: 114px;
3608
3611
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3609
3612
  --wds-internal-thumbnail-illustration-size-small: 51px;
@@ -4717,8 +4720,11 @@
4717
4720
  --wds-vertical-tabs-item-label-text-active: #151414;
4718
4721
  --wds-vertical-tabs-item-label-text-premium: #2f5dff;
4719
4722
  --wds-vertical-tabs-item-label-text-premium-active: #2f5dff;
4723
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
4720
4724
  --wds-vertical-tabs-item-padding-horizontal-small: 12px;
4725
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 9px;
4721
4726
  --wds-vertical-tabs-item-padding-horizontal-tiny: 12px;
4727
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 10px;
4722
4728
  --wds-vertical-tabs-item-padding-vertical-medium: 8px;
4723
4729
  --wds-vertical-tabs-item-padding-vertical-small: 8px;
4724
4730
  --wds-vertical-tabs-item-padding-vertical-tiny: 4px;
package/odeditor/component.st.css CHANGED
@@ -1314,6 +1314,7 @@
1314
1314
  @property st-global(--wds-tabs-item-gap-small-medium);
1315
1315
  @property st-global(--wds-tabs-label-fill);
1316
1316
  @property st-global(--wds-tabs-label-fill-active);
1317
+ @property st-global(--wds-tabs-label-fill-disabled);
1317
1318
  @property st-global(--wds-tabs-label-font-size-medium);
1318
1319
  @property st-global(--wds-tabs-label-font-size-small);
1319
1320
  @property st-global(--wds-tabs-label-font-size-small-medium);
@@ -1600,8 +1601,11 @@
1600
1601
  @property st-global(--wds-vertical-tabs-item-label-text-active);
1601
1602
  @property st-global(--wds-vertical-tabs-item-label-text-premium);
1602
1603
  @property st-global(--wds-vertical-tabs-item-label-text-premium-active);
1604
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium-offset);
1603
1605
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
1606
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small-offset);
1604
1607
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
1608
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny-offset);
1605
1609
  @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
1606
1610
  @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
1607
1611
  @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
@@ -2935,6 +2939,7 @@
2935
2939
  --wds-tabs-item-gap-small-medium: 6px;
2936
2940
  --wds-tabs-label-fill: #525150;
2937
2941
  --wds-tabs-label-fill-active: #151414;
2942
+ --wds-tabs-label-fill-disabled: #a8a6a5;
2938
2943
  --wds-tabs-label-font-size-medium: 14px;
2939
2944
  --wds-tabs-label-font-size-small: 14px;
2940
2945
  --wds-tabs-label-font-size-small-medium: 14px;
@@ -3221,8 +3226,11 @@
3221
3226
  --wds-vertical-tabs-item-label-text-active: #151414;
3222
3227
  --wds-vertical-tabs-item-label-text-premium: #2f5dff;
3223
3228
  --wds-vertical-tabs-item-label-text-premium-active: #2f5dff;
3229
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
3224
3230
  --wds-vertical-tabs-item-padding-horizontal-small: 12px;
3231
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 9px;
3225
3232
  --wds-vertical-tabs-item-padding-horizontal-tiny: 12px;
3233
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 10px;
3226
3234
  --wds-vertical-tabs-item-padding-vertical-medium: 8px;
3227
3235
  --wds-vertical-tabs-item-padding-vertical-small: 8px;
3228
3236
  --wds-vertical-tabs-item-padding-vertical-tiny: 4px;
package/odeditor/foundation.st.css CHANGED
@@ -161,7 +161,7 @@
161
161
  @property st-global(--wds-font-weight-medium);
162
162
  @property st-global(--wds-font-weight-regular);
163
163
  @property st-global(--wds-font-weight-semi-bold);
164
- @property st-global(--wds-internal-animations-enabled);
164
+ @property st-global(--wds-internal-theme);
165
165
  @property st-global(--wds-shadow-100);
166
166
  @property st-global(--wds-shadow-200);
167
167
  @property st-global(--wds-shadow-300);
@@ -405,7 +405,7 @@
405
405
  --wds-font-weight-medium: 500;
406
406
  --wds-font-weight-regular: 400;
407
407
  --wds-font-weight-semi-bold: 600;
408
- --wds-internal-animations-enabled: true;
408
+ --wds-internal-theme: odeditor;
409
409
  --wds-shadow-100: 0 2px 1px rgba(19, 23, 32, .5), 0 0 3px rgba(19, 23, 32, .1);
410
410
  --wds-shadow-200: 0 2px 4px rgba(19, 23, 32, .05), 0 0 6px rgba(19, 23, 32, .1);
411
411
  --wds-shadow-300: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
package/odeditor-dark/all.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --wds-illustration-color-opacity-25: #F8F6F640;
6
6
  --wds-illustration-color-background: #2D2D2E;
7
7
  --wds-illustration-color-7: #B8C4FF;
8
- --wds-illustration-color-6: #002294;
8
+ --wds-illustration-color-6: #EAEFFF;
9
9
  --wds-illustration-color-5: #EAEFFF;
10
10
  --wds-illustration-color-4: #D5DFFF;
11
11
  --wds-illustration-color-3: #B8C4FF;
@@ -309,6 +309,9 @@
309
309
  --wds-background-blur-100: 8px;
310
310
  --wds-background-blur-50: 4px;
311
311
  --wds-background-blur-0: 0px;
312
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 10px;
313
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 9px;
314
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
312
315
  --wds-variable-input-padding-vertical-tiny: 2px;
313
316
  --wds-variable-input-padding-vertical-small: 5px;
314
317
  --wds-top-banner-shadow: 0 0 0 transparent;
@@ -409,7 +412,7 @@
409
412
  --wds-loader-stroke-width-large: 2px;
410
413
  --wds-list-item-select-min-height-medium: auto;
411
414
  --wds-list-item-action-subtitle-offset: 0px;
412
- --wds-internal-animations-enabled: false;
415
+ --wds-internal-theme: odeditor-dark;
413
416
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
414
417
  --wds-internal-thumbnail-illustration-size-small: 51px;
415
418
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1917,6 +1920,7 @@
1917
1920
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1918
1921
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1919
1922
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1923
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1920
1924
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1921
1925
  --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1922
1926
  --wds-table-list-item-fill-hover-draggable: var(--wds-color-fill-dark-tertiary-hover);
package/odeditor-dark/all.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  @mixin tokens {
2
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 10px;
3
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 9px;
4
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
2
5
  --wds-variable-input-padding-vertical-tiny: 2px;
3
6
  --wds-variable-input-padding-vertical-small: 5px;
4
7
  --wds-top-banner-shadow: 0 0 0 transparent;
@@ -172,6 +175,7 @@
172
175
  --wds-internal-thumbnail-illustration-size-small: 51px;
173
176
  --wds-internal-thumbnail-illustration-size-medium: 72px;
174
177
  --wds-internal-thumbnail-illustration-size-large: 114px;
178
+ --wds-internal-theme: odeditor-dark;
175
179
  --wds-internal-image-width-tiny: 106px;
176
180
  --wds-internal-image-width-small: 122px;
177
181
  --wds-internal-image-width-medium: 156px;
@@ -179,7 +183,6 @@
179
183
  --wds-internal-image-height-small: 60px;
180
184
  --wds-internal-image-height-medium: 84px;
181
185
  --wds-internal-image-height-large: 120px;
182
- --wds-internal-animations-enabled: false;
183
186
  --wds-input-shadow-focus-warning: transparent;
184
187
  --wds-input-shadow-focus-standard: transparent;
185
188
  --wds-input-shadow-focus-destructive: transparent;
@@ -189,7 +192,7 @@
189
192
  --wds-illustration-color-opacity-25: #F8F6F640;
190
193
  --wds-illustration-color-background: #2D2D2E;
191
194
  --wds-illustration-color-7: #B8C4FF;
192
- --wds-illustration-color-6: #002294;
195
+ --wds-illustration-color-6: #EAEFFF;
193
196
  --wds-illustration-color-5: #EAEFFF;
194
197
  --wds-illustration-color-4: #D5DFFF;
195
198
  --wds-illustration-color-3: #B8C4FF;
@@ -1902,6 +1905,7 @@
1902
1905
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1903
1906
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1904
1907
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1908
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1905
1909
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1906
1910
  --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1907
1911
  --wds-table-list-item-fill-hover-draggable: var(--wds-color-fill-dark-tertiary-hover);
package/odeditor-dark/all.st.css CHANGED
@@ -1229,7 +1229,6 @@
1229
1229
  @property st-global(--wds-input-value-font-size-tiny);
1230
1230
  @property st-global(--wds-internal-angle-input-knob-offset);
1231
1231
  @property st-global(--wds-internal-angle-input-knob-offset-bottom);
1232
- @property st-global(--wds-internal-animations-enabled);
1233
1232
  @property st-global(--wds-internal-button-border-width);
1234
1233
  @property st-global(--wds-internal-image-height-large);
1235
1234
  @property st-global(--wds-internal-image-height-medium);
@@ -1238,6 +1237,7 @@
1238
1237
  @property st-global(--wds-internal-image-width-medium);
1239
1238
  @property st-global(--wds-internal-image-width-small);
1240
1239
  @property st-global(--wds-internal-image-width-tiny);
1240
+ @property st-global(--wds-internal-theme);
1241
1241
  @property st-global(--wds-internal-thumbnail-illustration-size-large);
1242
1242
  @property st-global(--wds-internal-thumbnail-illustration-size-medium);
1243
1243
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
@@ -2349,8 +2349,11 @@
2349
2349
  @property st-global(--wds-vertical-tabs-item-label-text-active);
2350
2350
  @property st-global(--wds-vertical-tabs-item-label-text-premium);
2351
2351
  @property st-global(--wds-vertical-tabs-item-label-text-premium-active);
2352
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium-offset);
2352
2353
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
2354
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small-offset);
2353
2355
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
2356
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny-offset);
2354
2357
  @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
2355
2358
  @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
2356
2359
  @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
@@ -3526,7 +3529,7 @@
3526
3529
  --wds-illustration-color-3: #B8C4FF;
3527
3530
  --wds-illustration-color-4: #D5DFFF;
3528
3531
  --wds-illustration-color-5: #EAEFFF;
3529
- --wds-illustration-color-6: #002294;
3532
+ --wds-illustration-color-6: #EAEFFF;
3530
3533
  --wds-illustration-color-7: #B8C4FF;
3531
3534
  --wds-illustration-color-background: #2D2D2E;
3532
3535
  --wds-illustration-color-opacity-25: #F8F6F640;
@@ -3601,7 +3604,6 @@
3601
3604
  --wds-input-value-font-size-tiny: 12px;
3602
3605
  --wds-internal-angle-input-knob-offset: 2px;
3603
3606
  --wds-internal-angle-input-knob-offset-bottom: 4px;
3604
- --wds-internal-animations-enabled: false;
3605
3607
  --wds-internal-button-border-width: 1px;
3606
3608
  --wds-internal-image-height-large: 120px;
3607
3609
  --wds-internal-image-height-medium: 84px;
@@ -3610,6 +3612,7 @@
3610
3612
  --wds-internal-image-width-medium: 156px;
3611
3613
  --wds-internal-image-width-small: 122px;
3612
3614
  --wds-internal-image-width-tiny: 106px;
3615
+ --wds-internal-theme: odeditor-dark;
3613
3616
  --wds-internal-thumbnail-illustration-size-large: 114px;
3614
3617
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3615
3618
  --wds-internal-thumbnail-illustration-size-small: 51px;
@@ -4721,8 +4724,11 @@
4721
4724
  --wds-vertical-tabs-item-label-text-active: #FFFFFF;
4722
4725
  --wds-vertical-tabs-item-label-text-premium: #82B0FF;
4723
4726
  --wds-vertical-tabs-item-label-text-premium-active: #82B0FF;
4727
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
4724
4728
  --wds-vertical-tabs-item-padding-horizontal-small: 12px;
4729
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 9px;
4725
4730
  --wds-vertical-tabs-item-padding-horizontal-tiny: 12px;
4731
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 10px;
4726
4732
  --wds-vertical-tabs-item-padding-vertical-medium: 8px;
4727
4733
  --wds-vertical-tabs-item-padding-vertical-small: 8px;
4728
4734
  --wds-vertical-tabs-item-padding-vertical-tiny: 4px;
package/odeditor-dark/component.st.css CHANGED
@@ -1315,6 +1315,7 @@
1315
1315
  @property st-global(--wds-tabs-item-gap-small-medium);
1316
1316
  @property st-global(--wds-tabs-label-fill);
1317
1317
  @property st-global(--wds-tabs-label-fill-active);
1318
+ @property st-global(--wds-tabs-label-fill-disabled);
1318
1319
  @property st-global(--wds-tabs-label-font-size-medium);
1319
1320
  @property st-global(--wds-tabs-label-font-size-small);
1320
1321
  @property st-global(--wds-tabs-label-font-size-small-medium);
@@ -1601,8 +1602,11 @@
1601
1602
  @property st-global(--wds-vertical-tabs-item-label-text-active);
1602
1603
  @property st-global(--wds-vertical-tabs-item-label-text-premium);
1603
1604
  @property st-global(--wds-vertical-tabs-item-label-text-premium-active);
1605
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium-offset);
1604
1606
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
1607
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small-offset);
1605
1608
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
1609
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny-offset);
1606
1610
  @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
1607
1611
  @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
1608
1612
  @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
@@ -2937,6 +2941,7 @@
2937
2941
  --wds-tabs-item-gap-small-medium: 6px;
2938
2942
  --wds-tabs-label-fill: #A8A6A5;
2939
2943
  --wds-tabs-label-fill-active: #FFFFFF;
2944
+ --wds-tabs-label-fill-disabled: #878685;
2940
2945
  --wds-tabs-label-font-size-medium: 14px;
2941
2946
  --wds-tabs-label-font-size-small: 12px;
2942
2947
  --wds-tabs-label-font-size-small-medium: 14px;
@@ -3223,8 +3228,11 @@
3223
3228
  --wds-vertical-tabs-item-label-text-active: #FFFFFF;
3224
3229
  --wds-vertical-tabs-item-label-text-premium: #82B0FF;
3225
3230
  --wds-vertical-tabs-item-label-text-premium-active: #82B0FF;
3231
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
3226
3232
  --wds-vertical-tabs-item-padding-horizontal-small: 12px;
3233
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 9px;
3227
3234
  --wds-vertical-tabs-item-padding-horizontal-tiny: 12px;
3235
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 10px;
3228
3236
  --wds-vertical-tabs-item-padding-vertical-medium: 8px;
3229
3237
  --wds-vertical-tabs-item-padding-vertical-small: 8px;
3230
3238
  --wds-vertical-tabs-item-padding-vertical-tiny: 4px;
package/odeditor-dark/foundation.st.css CHANGED
@@ -162,7 +162,7 @@
162
162
  @property st-global(--wds-font-weight-medium);
163
163
  @property st-global(--wds-font-weight-regular);
164
164
  @property st-global(--wds-font-weight-semi-bold);
165
- @property st-global(--wds-internal-animations-enabled);
165
+ @property st-global(--wds-internal-theme);
166
166
  @property st-global(--wds-shadow-100);
167
167
  @property st-global(--wds-shadow-200);
168
168
  @property st-global(--wds-shadow-300);
@@ -407,7 +407,7 @@
407
407
  --wds-font-weight-medium: 500;
408
408
  --wds-font-weight-regular: 400;
409
409
  --wds-font-weight-semi-bold: 600;
410
- --wds-internal-animations-enabled: false;
410
+ --wds-internal-theme: odeditor-dark;
411
411
  --wds-shadow-100: 0 2px 1px rgba(0, 0, 0, .5), 0 0 3px rgba(0, 0, 0, .1);
412
412
  --wds-shadow-200: 0 2px 4px rgba(0, 0, 0, .05), 0 0 6px rgba(0, 0, 0, .1);
413
413
  --wds-shadow-300: 0 12px 30px 0 rgba(0, 0, 0, .3), 0 0px 0px 0 rgba(0, 0, 0, .3);
package/odeditor-dark/semantic.st.css CHANGED
@@ -913,7 +913,7 @@
913
913
  --wds-illustration-color-3: #B8C4FF;
914
914
  --wds-illustration-color-4: #D5DFFF;
915
915
  --wds-illustration-color-5: #EAEFFF;
916
- --wds-illustration-color-6: #002294;
916
+ --wds-illustration-color-6: #EAEFFF;
917
917
  --wds-illustration-color-7: #B8C4FF;
918
918
  --wds-illustration-color-background: #2D2D2E;
919
919
  --wds-illustration-color-opacity-25: #F8F6F640;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.221.1",
3
+ "version": "1.222.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": "702d420d48b761775d8ec9025c2464f23dc3909dd43c98c71804c5dd"
39
+ "falconPackageHash": "7cde14425af6c7730db58e7dfc50f68256a2d84cc6067c015f299a74"
40
40
  }
package/studio/all.css CHANGED
@@ -314,6 +314,9 @@
314
314
  --wds-background-blur-100: 0px;
315
315
  --wds-background-blur-50: 0px;
316
316
  --wds-background-blur-0: 0px;
317
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
318
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
319
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 10px;
317
320
  --wds-top-banner-shadow: 0 0 0 transparent;
318
321
  --wds-toggle-switch-width-small: 24px;
319
322
  --wds-toggle-switch-width-medium: 28px;
@@ -399,7 +402,7 @@
399
402
  --wds-loader-stroke-width-large: 4px;
400
403
  --wds-list-item-select-min-height-medium: auto;
401
404
  --wds-list-item-action-subtitle-offset: 0px;
402
- --wds-internal-animations-enabled: false;
405
+ --wds-internal-theme: studio;
403
406
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
404
407
  --wds-internal-thumbnail-illustration-size-small: 51px;
405
408
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1032,6 +1035,7 @@
1032
1035
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
1033
1036
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
1034
1037
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
1038
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1035
1039
  --wds-tabs-item-gap-small-medium: var(--wds-space-150);
1036
1040
  --wds-tabs-item-gap-small: var(--wds-space-150);
1037
1041
  --wds-tabs-item-gap-medium: var(--wds-space-200);
package/studio/all.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  @mixin tokens {
2
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
3
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
4
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 10px;
2
5
  --wds-top-banner-shadow: 0 0 0 transparent;
3
6
  --wds-toggle-switch-width-small: 24px;
4
7
  --wds-toggle-switch-width-medium: 28px;
@@ -146,6 +149,7 @@
146
149
  --wds-internal-thumbnail-illustration-size-small: 51px;
147
150
  --wds-internal-thumbnail-illustration-size-medium: 72px;
148
151
  --wds-internal-thumbnail-illustration-size-large: 114px;
152
+ --wds-internal-theme: studio;
149
153
  --wds-internal-image-width-tiny: 106px;
150
154
  --wds-internal-image-width-small: 122px;
151
155
  --wds-internal-image-width-medium: 156px;
@@ -154,7 +158,6 @@
154
158
  --wds-internal-image-height-medium: 84px;
155
159
  --wds-internal-image-height-large: 120px;
156
160
  --wds-internal-color-picker-width: 236px;
157
- --wds-internal-animations-enabled: false;
158
161
  --wds-input-width-tiny: 48px;
159
162
  --wds-input-width-small: 56px;
160
163
  --wds-input-width-medium: 72px;
@@ -621,6 +624,7 @@
621
624
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
622
625
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
623
626
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
627
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
624
628
  --wds-tabs-item-gap-small-medium: var(--wds-space-150);
625
629
  --wds-tabs-item-gap-small: var(--wds-space-150);
626
630
  --wds-tabs-item-gap-medium: var(--wds-space-200);
package/studio/all.st.css CHANGED
@@ -1246,7 +1246,6 @@
1246
1246
  @property st-global(--wds-input-width-medium);
1247
1247
  @property st-global(--wds-input-width-small);
1248
1248
  @property st-global(--wds-input-width-tiny);
1249
- @property st-global(--wds-internal-animations-enabled);
1250
1249
  @property st-global(--wds-internal-color-picker-padding-horizontal);
1251
1250
  @property st-global(--wds-internal-color-picker-padding-vertical);
1252
1251
  @property st-global(--wds-internal-color-picker-width);
@@ -1257,6 +1256,7 @@
1257
1256
  @property st-global(--wds-internal-image-width-medium);
1258
1257
  @property st-global(--wds-internal-image-width-small);
1259
1258
  @property st-global(--wds-internal-image-width-tiny);
1259
+ @property st-global(--wds-internal-theme);
1260
1260
  @property st-global(--wds-internal-thumbnail-illustration-size-large);
1261
1261
  @property st-global(--wds-internal-thumbnail-illustration-size-medium);
1262
1262
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
@@ -2352,8 +2352,11 @@
2352
2352
  @property st-global(--wds-vertical-tabs-item-label-text-premium);
2353
2353
  @property st-global(--wds-vertical-tabs-item-label-text-premium-active);
2354
2354
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium);
2355
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium-offset);
2355
2356
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
2357
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small-offset);
2356
2358
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
2359
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny-offset);
2357
2360
  @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
2358
2361
  @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
2359
2362
  @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
@@ -3631,7 +3634,6 @@
3631
3634
  --wds-input-width-medium: 72px;
3632
3635
  --wds-input-width-small: 56px;
3633
3636
  --wds-input-width-tiny: 48px;
3634
- --wds-internal-animations-enabled: false;
3635
3637
  --wds-internal-color-picker-padding-horizontal: 16px;
3636
3638
  --wds-internal-color-picker-padding-vertical: 12px;
3637
3639
  --wds-internal-color-picker-width: 236px;
@@ -3642,6 +3644,7 @@
3642
3644
  --wds-internal-image-width-medium: 156px;
3643
3645
  --wds-internal-image-width-small: 122px;
3644
3646
  --wds-internal-image-width-tiny: 106px;
3647
+ --wds-internal-theme: studio;
3645
3648
  --wds-internal-thumbnail-illustration-size-large: 114px;
3646
3649
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3647
3650
  --wds-internal-thumbnail-illustration-size-small: 51px;
@@ -4737,8 +4740,11 @@
4737
4740
  --wds-vertical-tabs-item-label-text-premium: #9a27d5;
4738
4741
  --wds-vertical-tabs-item-label-text-premium-active: #9a27d5;
4739
4742
  --wds-vertical-tabs-item-padding-horizontal-medium: 16px;
4743
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 10px;
4740
4744
  --wds-vertical-tabs-item-padding-horizontal-small: 24px;
4745
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
4741
4746
  --wds-vertical-tabs-item-padding-horizontal-tiny: 24px;
4747
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
4742
4748
  --wds-vertical-tabs-item-padding-vertical-medium: 8px;
4743
4749
  --wds-vertical-tabs-item-padding-vertical-small: 8px;
4744
4750
  --wds-vertical-tabs-item-padding-vertical-tiny: 4px;
package/studio/component.st.css CHANGED
@@ -1326,6 +1326,7 @@
1326
1326
  @property st-global(--wds-tabs-item-gap-small-medium);
1327
1327
  @property st-global(--wds-tabs-label-fill);
1328
1328
  @property st-global(--wds-tabs-label-fill-active);
1329
+ @property st-global(--wds-tabs-label-fill-disabled);
1329
1330
  @property st-global(--wds-tabs-label-font-size-small);
1330
1331
  @property st-global(--wds-tabs-label-font-size-small-medium);
1331
1332
  @property st-global(--wds-tabs-label-font-weight);
@@ -1608,8 +1609,11 @@
1608
1609
  @property st-global(--wds-vertical-tabs-item-label-text-premium);
1609
1610
  @property st-global(--wds-vertical-tabs-item-label-text-premium-active);
1610
1611
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium);
1612
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium-offset);
1611
1613
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
1614
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small-offset);
1612
1615
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
1616
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny-offset);
1613
1617
  @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
1614
1618
  @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
1615
1619
  @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
@@ -2965,6 +2969,7 @@
2965
2969
  --wds-tabs-item-gap-small-medium: 6px;
2966
2970
  --wds-tabs-label-fill: #131720;
2967
2971
  --wds-tabs-label-fill-active: #116dff;
2972
+ --wds-tabs-label-fill-disabled: #bebebe;
2968
2973
  --wds-tabs-label-font-size-small: 14px;
2969
2974
  --wds-tabs-label-font-size-small-medium: 14px;
2970
2975
  --wds-tabs-label-font-weight: 400;
@@ -3247,8 +3252,11 @@
3247
3252
  --wds-vertical-tabs-item-label-text-premium: #9a27d5;
3248
3253
  --wds-vertical-tabs-item-label-text-premium-active: #9a27d5;
3249
3254
  --wds-vertical-tabs-item-padding-horizontal-medium: 16px;
3255
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 10px;
3250
3256
  --wds-vertical-tabs-item-padding-horizontal-small: 24px;
3257
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
3251
3258
  --wds-vertical-tabs-item-padding-horizontal-tiny: 24px;
3259
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
3252
3260
  --wds-vertical-tabs-item-padding-vertical-medium: 8px;
3253
3261
  --wds-vertical-tabs-item-padding-vertical-small: 8px;
3254
3262
  --wds-vertical-tabs-item-padding-vertical-tiny: 4px;
package/studio/foundation.st.css CHANGED
@@ -160,7 +160,7 @@
160
160
  @property st-global(--wds-font-weight-medium);
161
161
  @property st-global(--wds-font-weight-regular);
162
162
  @property st-global(--wds-font-weight-semi-bold);
163
- @property st-global(--wds-internal-animations-enabled);
163
+ @property st-global(--wds-internal-theme);
164
164
  @property st-global(--wds-shadow-100);
165
165
  @property st-global(--wds-shadow-200);
166
166
  @property st-global(--wds-shadow-300);
@@ -401,7 +401,7 @@
401
401
  --wds-font-weight-medium: 500;
402
402
  --wds-font-weight-regular: 400;
403
403
  --wds-font-weight-semi-bold: 600;
404
- --wds-internal-animations-enabled: false;
404
+ --wds-internal-theme: studio;
405
405
  --wds-shadow-100: 0 2px 7px rgba(19, 23, 32, .2);
406
406
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
407
407
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
package/wixel/all.css CHANGED
@@ -301,6 +301,9 @@
301
301
  --wds-background-blur-100: 8px;
302
302
  --wds-background-blur-50: 4px;
303
303
  --wds-background-blur-0: 0px;
304
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
305
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
306
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
304
307
  --wds-top-banner-shadow: 0 0 0 transparent;
305
308
  --wds-toggle-switch-width-small: 24px;
306
309
  --wds-toggle-switch-width-medium: 32px;
@@ -382,7 +385,7 @@
382
385
  --wds-loader-stroke-width-large: 4px;
383
386
  --wds-list-item-select-min-height-medium: auto;
384
387
  --wds-list-item-action-subtitle-offset: 0px;
385
- --wds-internal-animations-enabled: false;
388
+ --wds-internal-theme: wixel;
386
389
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
387
390
  --wds-internal-thumbnail-illustration-size-small: 51px;
388
391
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1779,6 +1782,7 @@
1779
1782
  --wds-tabs-selection-border: linear-gradient(90deg, var(--wds-tabs-selection-fill-secondary) 0%, var(--wds-tabs-selection-fill-primary) 20%, var(--wds-tabs-selection-fill-primary) 80%, var(--wds-tabs-selection-fill-secondary) 100%);
1780
1783
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-tiny);
1781
1784
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1785
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1782
1786
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1783
1787
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1784
1788
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
package/wixel/all.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  @mixin tokens {
2
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
3
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
4
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
2
5
  --wds-top-banner-shadow: 0 0 0 transparent;
3
6
  --wds-toggle-switch-width-small: 24px;
4
7
  --wds-toggle-switch-width-medium: 32px;
@@ -142,6 +145,7 @@
142
145
  --wds-internal-thumbnail-illustration-size-small: 51px;
143
146
  --wds-internal-thumbnail-illustration-size-medium: 72px;
144
147
  --wds-internal-thumbnail-illustration-size-large: 114px;
148
+ --wds-internal-theme: wixel;
145
149
  --wds-internal-image-width-tiny: 106px;
146
150
  --wds-internal-image-width-small: 122px;
147
151
  --wds-internal-image-width-medium: 156px;
@@ -150,7 +154,6 @@
150
154
  --wds-internal-image-height-medium: 84px;
151
155
  --wds-internal-image-height-large: 120px;
152
156
  --wds-internal-color-picker-width: 236px;
153
- --wds-internal-animations-enabled: false;
154
157
  --wds-input-width-tiny: 48px;
155
158
  --wds-input-width-small: 56px;
156
159
  --wds-input-width-medium: 72px;
@@ -1764,6 +1767,7 @@
1764
1767
  --wds-tabs-selection-border: linear-gradient(90deg, var(--wds-tabs-selection-fill-secondary) 0%, var(--wds-tabs-selection-fill-primary) 20%, var(--wds-tabs-selection-fill-primary) 80%, var(--wds-tabs-selection-fill-secondary) 100%);
1765
1768
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-tiny);
1766
1769
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1770
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1767
1771
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1768
1772
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1769
1773
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
package/wixel/all.st.css CHANGED
@@ -1215,7 +1215,6 @@
1215
1215
  @property st-global(--wds-input-width-medium);
1216
1216
  @property st-global(--wds-input-width-small);
1217
1217
  @property st-global(--wds-input-width-tiny);
1218
- @property st-global(--wds-internal-animations-enabled);
1219
1218
  @property st-global(--wds-internal-color-picker-padding-horizontal);
1220
1219
  @property st-global(--wds-internal-color-picker-padding-vertical);
1221
1220
  @property st-global(--wds-internal-color-picker-width);
@@ -1226,6 +1225,7 @@
1226
1225
  @property st-global(--wds-internal-image-width-medium);
1227
1226
  @property st-global(--wds-internal-image-width-small);
1228
1227
  @property st-global(--wds-internal-image-width-tiny);
1228
+ @property st-global(--wds-internal-theme);
1229
1229
  @property st-global(--wds-internal-thumbnail-illustration-size-large);
1230
1230
  @property st-global(--wds-internal-thumbnail-illustration-size-medium);
1231
1231
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
@@ -2288,8 +2288,11 @@
2288
2288
  @property st-global(--wds-vertical-tabs-item-label-text-premium);
2289
2289
  @property st-global(--wds-vertical-tabs-item-label-text-premium-active);
2290
2290
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium);
2291
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium-offset);
2291
2292
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
2293
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small-offset);
2292
2294
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
2295
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny-offset);
2293
2296
  @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
2294
2297
  @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
2295
2298
  @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
@@ -3536,7 +3539,6 @@
3536
3539
  --wds-input-width-medium: 72px;
3537
3540
  --wds-input-width-small: 56px;
3538
3541
  --wds-input-width-tiny: 48px;
3539
- --wds-internal-animations-enabled: false;
3540
3542
  --wds-internal-color-picker-padding-horizontal: 16px;
3541
3543
  --wds-internal-color-picker-padding-vertical: 12px;
3542
3544
  --wds-internal-color-picker-width: 236px;
@@ -3547,6 +3549,7 @@
3547
3549
  --wds-internal-image-width-medium: 156px;
3548
3550
  --wds-internal-image-width-small: 122px;
3549
3551
  --wds-internal-image-width-tiny: 106px;
3552
+ --wds-internal-theme: wixel;
3550
3553
  --wds-internal-thumbnail-illustration-size-large: 114px;
3551
3554
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3552
3555
  --wds-internal-thumbnail-illustration-size-small: 51px;
@@ -4609,8 +4612,11 @@
4609
4612
  --wds-vertical-tabs-item-label-text-premium: #9a27d5;
4610
4613
  --wds-vertical-tabs-item-label-text-premium-active: #9a27d5;
4611
4614
  --wds-vertical-tabs-item-padding-horizontal-medium: 16px;
4615
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
4612
4616
  --wds-vertical-tabs-item-padding-horizontal-small: 24px;
4617
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
4613
4618
  --wds-vertical-tabs-item-padding-horizontal-tiny: 24px;
4619
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
4614
4620
  --wds-vertical-tabs-item-padding-vertical-medium: 8px;
4615
4621
  --wds-vertical-tabs-item-padding-vertical-small: 8px;
4616
4622
  --wds-vertical-tabs-item-padding-vertical-tiny: 4px;
package/wixel/component.st.css CHANGED
@@ -1298,6 +1298,7 @@
1298
1298
  @property st-global(--wds-tabs-item-gap-small-medium);
1299
1299
  @property st-global(--wds-tabs-label-fill);
1300
1300
  @property st-global(--wds-tabs-label-fill-active);
1301
+ @property st-global(--wds-tabs-label-fill-disabled);
1301
1302
  @property st-global(--wds-tabs-label-font-size-small);
1302
1303
  @property st-global(--wds-tabs-label-font-size-small-medium);
1303
1304
  @property st-global(--wds-tabs-label-font-weight);
@@ -1574,8 +1575,11 @@
1574
1575
  @property st-global(--wds-vertical-tabs-item-label-text-premium);
1575
1576
  @property st-global(--wds-vertical-tabs-item-label-text-premium-active);
1576
1577
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium);
1578
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium-offset);
1577
1579
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
1580
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small-offset);
1578
1581
  @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
1582
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny-offset);
1579
1583
  @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
1580
1584
  @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
1581
1585
  @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
@@ -2903,6 +2907,7 @@
2903
2907
  --wds-tabs-item-gap-small-medium: 6px;
2904
2908
  --wds-tabs-label-fill: #000624;
2905
2909
  --wds-tabs-label-fill-active: #4a57ff;
2910
+ --wds-tabs-label-fill-disabled: rgba(38, 37, 36, 0.3000);
2906
2911
  --wds-tabs-label-font-size-small: 12px;
2907
2912
  --wds-tabs-label-font-size-small-medium: 12px;
2908
2913
  --wds-tabs-label-font-weight: 400;
@@ -3179,8 +3184,11 @@
3179
3184
  --wds-vertical-tabs-item-label-text-premium: #9a27d5;
3180
3185
  --wds-vertical-tabs-item-label-text-premium-active: #9a27d5;
3181
3186
  --wds-vertical-tabs-item-padding-horizontal-medium: 16px;
3187
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
3182
3188
  --wds-vertical-tabs-item-padding-horizontal-small: 24px;
3189
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
3183
3190
  --wds-vertical-tabs-item-padding-horizontal-tiny: 24px;
3191
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
3184
3192
  --wds-vertical-tabs-item-padding-vertical-medium: 8px;
3185
3193
  --wds-vertical-tabs-item-padding-vertical-small: 8px;
3186
3194
  --wds-vertical-tabs-item-padding-vertical-tiny: 4px;
package/wixel/foundation.st.css CHANGED
@@ -158,7 +158,7 @@
158
158
  @property st-global(--wds-font-weight-medium);
159
159
  @property st-global(--wds-font-weight-regular);
160
160
  @property st-global(--wds-font-weight-semi-bold);
161
- @property st-global(--wds-internal-animations-enabled);
161
+ @property st-global(--wds-internal-theme);
162
162
  @property st-global(--wds-shadow-100);
163
163
  @property st-global(--wds-shadow-200);
164
164
  @property st-global(--wds-shadow-300);
@@ -394,7 +394,7 @@
394
394
  --wds-font-weight-medium: 500;
395
395
  --wds-font-weight-regular: 400;
396
396
  --wds-font-weight-semi-bold: 600;
397
- --wds-internal-animations-enabled: false;
397
+ --wds-internal-theme: wixel;
398
398
  --wds-shadow-100: 0px;
399
399
  --wds-shadow-200: 0px;
400
400
  --wds-shadow-300: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);