@wix/design-system-tokens 1.221.0 → 1.222.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/all.css +2 -1
  3. package/all.scss +2 -1
  4. package/all.st.css +4 -2
  5. package/component.st.css +2 -0
  6. package/foundation.st.css +2 -2
  7. package/odeditor/all.css +2 -1
  8. package/odeditor/all.scss +2 -1
  9. package/odeditor/all.st.css +4 -2
  10. package/odeditor/component.st.css +2 -0
  11. package/odeditor/foundation.st.css +2 -2
  12. package/odeditor-dark/all.css +3 -2
  13. package/odeditor-dark/all.scss +3 -2
  14. package/odeditor-dark/all.st.css +5 -3
  15. package/odeditor-dark/component.st.css +2 -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 +2 -1
  20. package/studio/all.scss +2 -1
  21. package/studio/all.st.css +4 -2
  22. package/studio/component.st.css +2 -0
  23. package/studio/foundation.st.css +2 -2
  24. package/wixel/all.css +2 -1
  25. package/wixel/all.scss +2 -1
  26. package/wixel/all.st.css +4 -2
  27. package/wixel/component.st.css +2 -0
  28. package/wixel/foundation.st.css +2 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ ## 1.222.0
2
+
3
+ ### Minor Changes
4
+
5
+ - [#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.
6
+
7
+ ### Patch Changes
8
+
9
+ - [#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.
10
+
11
+ ## 1.221.1
12
+
1
13
  ## 1.221.0
2
14
 
3
15
  ### Minor Changes
package/all.css CHANGED
@@ -358,7 +358,7 @@
358
358
  --wds-loader-stroke-width-large: 4px;
359
359
  --wds-list-item-select-min-height-medium: auto;
360
360
  --wds-list-item-action-subtitle-offset: 0px;
361
- --wds-internal-animations-enabled: false;
361
+ --wds-internal-theme: default;
362
362
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
363
363
  --wds-internal-thumbnail-illustration-size-small: 51px;
364
364
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1794,6 +1794,7 @@
1794
1794
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1795
1795
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1796
1796
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-medium);
1797
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1797
1798
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1798
1799
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1799
1800
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
package/all.scss CHANGED
@@ -145,6 +145,7 @@
145
145
  --wds-internal-thumbnail-illustration-size-small: 51px;
146
146
  --wds-internal-thumbnail-illustration-size-medium: 72px;
147
147
  --wds-internal-thumbnail-illustration-size-large: 114px;
148
+ --wds-internal-theme: default;
148
149
  --wds-internal-image-width-tiny: 106px;
149
150
  --wds-internal-image-width-small: 122px;
150
151
  --wds-internal-image-width-medium: 156px;
@@ -153,7 +154,6 @@
153
154
  --wds-internal-image-height-medium: 84px;
154
155
  --wds-internal-image-height-large: 120px;
155
156
  --wds-internal-color-picker-width: 240px;
156
- --wds-internal-animations-enabled: false;
157
157
  --wds-input-width-tiny: 48px;
158
158
  --wds-input-width-small: 54px;
159
159
  --wds-input-width-medium: 72px;
@@ -1776,6 +1776,7 @@
1776
1776
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1777
1777
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1778
1778
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-medium);
1779
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1779
1780
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1780
1781
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1781
1782
  --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);
@@ -2081,6 +2081,7 @@
2081
2081
  @property st-global(--wds-tabs-item-gap-small-medium);
2082
2082
  @property st-global(--wds-tabs-label-fill);
2083
2083
  @property st-global(--wds-tabs-label-fill-active);
2084
+ @property st-global(--wds-tabs-label-fill-disabled);
2084
2085
  @property st-global(--wds-tabs-label-font-size-medium);
2085
2086
  @property st-global(--wds-tabs-label-font-size-small);
2086
2087
  @property st-global(--wds-tabs-label-font-size-small-medium);
@@ -3641,7 +3642,6 @@
3641
3642
  --wds-input-width-medium: 72px;
3642
3643
  --wds-input-width-small: 54px;
3643
3644
  --wds-input-width-tiny: 48px;
3644
- --wds-internal-animations-enabled: false;
3645
3645
  --wds-internal-color-picker-padding-horizontal: 18px;
3646
3646
  --wds-internal-color-picker-padding-vertical: 12px;
3647
3647
  --wds-internal-color-picker-width: 240px;
@@ -3652,6 +3652,7 @@
3652
3652
  --wds-internal-image-width-medium: 156px;
3653
3653
  --wds-internal-image-width-small: 122px;
3654
3654
  --wds-internal-image-width-tiny: 106px;
3655
+ --wds-internal-theme: default;
3655
3656
  --wds-internal-thumbnail-illustration-size-large: 114px;
3656
3657
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3657
3658
  --wds-internal-thumbnail-illustration-size-small: 51px;
@@ -4478,6 +4479,7 @@
4478
4479
  --wds-tabs-item-gap-small-medium: 6px;
4479
4480
  --wds-tabs-label-fill: #000624;
4480
4481
  --wds-tabs-label-fill-active: #116dff;
4482
+ --wds-tabs-label-fill-disabled: rgba(0, 6, 36, .3);
4481
4483
  --wds-tabs-label-font-size-medium: 16px;
4482
4484
  --wds-tabs-label-font-size-small: 14px;
4483
4485
  --wds-tabs-label-font-size-small-medium: 14px;
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);
@@ -3006,6 +3007,7 @@
3006
3007
  --wds-tabs-item-gap-small-medium: 6px;
3007
3008
  --wds-tabs-label-fill: #000624;
3008
3009
  --wds-tabs-label-fill-active: #116dff;
3010
+ --wds-tabs-label-fill-disabled: rgba(0, 6, 36, .3);
3009
3011
  --wds-tabs-label-font-size-medium: 16px;
3010
3012
  --wds-tabs-label-font-size-small: 14px;
3011
3013
  --wds-tabs-label-font-size-small-medium: 14px;
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
@@ -396,7 +396,7 @@
396
396
  --wds-loader-stroke-width-large: 2px;
397
397
  --wds-list-item-select-min-height-medium: auto;
398
398
  --wds-list-item-action-subtitle-offset: -2px;
399
- --wds-internal-animations-enabled: true;
399
+ --wds-internal-theme: odeditor;
400
400
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
401
401
  --wds-internal-thumbnail-illustration-size-small: 51px;
402
402
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1898,6 +1898,7 @@
1898
1898
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1899
1899
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1900
1900
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1901
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1901
1902
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1902
1903
  --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1903
1904
  --wds-table-list-item-fill-hover-draggable: var(--wds-color-fill-dark-tertiary-hover);
package/odeditor/all.scss CHANGED
@@ -160,6 +160,7 @@
160
160
  --wds-internal-thumbnail-illustration-size-small: 51px;
161
161
  --wds-internal-thumbnail-illustration-size-medium: 72px;
162
162
  --wds-internal-thumbnail-illustration-size-large: 114px;
163
+ --wds-internal-theme: odeditor;
163
164
  --wds-internal-image-width-tiny: 106px;
164
165
  --wds-internal-image-width-small: 122px;
165
166
  --wds-internal-image-width-medium: 156px;
@@ -167,7 +168,6 @@
167
168
  --wds-internal-image-height-small: 60px;
168
169
  --wds-internal-image-height-medium: 84px;
169
170
  --wds-internal-image-height-large: 120px;
170
- --wds-internal-animations-enabled: true;
171
171
  --wds-input-shadow-focus-warning: transparent;
172
172
  --wds-input-shadow-focus-standard: transparent;
173
173
  --wds-input-shadow-focus-destructive: transparent;
@@ -1880,6 +1880,7 @@
1880
1880
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1881
1881
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1882
1882
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1883
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1883
1884
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1884
1885
  --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1885
1886
  --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);
@@ -2060,6 +2060,7 @@
2060
2060
  @property st-global(--wds-tabs-item-gap-small-medium);
2061
2061
  @property st-global(--wds-tabs-label-fill);
2062
2062
  @property st-global(--wds-tabs-label-fill-active);
2063
+ @property st-global(--wds-tabs-label-fill-disabled);
2063
2064
  @property st-global(--wds-tabs-label-font-size-medium);
2064
2065
  @property st-global(--wds-tabs-label-font-size-small);
2065
2066
  @property st-global(--wds-tabs-label-font-size-small-medium);
@@ -3594,7 +3595,6 @@
3594
3595
  --wds-input-value-font-size-tiny: 12px;
3595
3596
  --wds-internal-angle-input-knob-offset: 2px;
3596
3597
  --wds-internal-angle-input-knob-offset-bottom: 4px;
3597
- --wds-internal-animations-enabled: true;
3598
3598
  --wds-internal-button-border-width: 1px;
3599
3599
  --wds-internal-image-height-large: 120px;
3600
3600
  --wds-internal-image-height-medium: 84px;
@@ -3603,6 +3603,7 @@
3603
3603
  --wds-internal-image-width-medium: 156px;
3604
3604
  --wds-internal-image-width-small: 122px;
3605
3605
  --wds-internal-image-width-tiny: 106px;
3606
+ --wds-internal-theme: odeditor;
3606
3607
  --wds-internal-thumbnail-illustration-size-large: 114px;
3607
3608
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3608
3609
  --wds-internal-thumbnail-illustration-size-small: 51px;
@@ -4429,6 +4430,7 @@
4429
4430
  --wds-tabs-item-gap-small-medium: 6px;
4430
4431
  --wds-tabs-label-fill: #525150;
4431
4432
  --wds-tabs-label-fill-active: #151414;
4433
+ --wds-tabs-label-fill-disabled: #a8a6a5;
4432
4434
  --wds-tabs-label-font-size-medium: 14px;
4433
4435
  --wds-tabs-label-font-size-small: 14px;
4434
4436
  --wds-tabs-label-font-size-small-medium: 14px;
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);
@@ -2935,6 +2936,7 @@
2935
2936
  --wds-tabs-item-gap-small-medium: 6px;
2936
2937
  --wds-tabs-label-fill: #525150;
2937
2938
  --wds-tabs-label-fill-active: #151414;
2939
+ --wds-tabs-label-fill-disabled: #a8a6a5;
2938
2940
  --wds-tabs-label-font-size-medium: 14px;
2939
2941
  --wds-tabs-label-font-size-small: 14px;
2940
2942
  --wds-tabs-label-font-size-small-medium: 14px;
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;
@@ -409,7 +409,7 @@
409
409
  --wds-loader-stroke-width-large: 2px;
410
410
  --wds-list-item-select-min-height-medium: auto;
411
411
  --wds-list-item-action-subtitle-offset: 0px;
412
- --wds-internal-animations-enabled: false;
412
+ --wds-internal-theme: odeditor-dark;
413
413
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
414
414
  --wds-internal-thumbnail-illustration-size-small: 51px;
415
415
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1917,6 +1917,7 @@
1917
1917
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1918
1918
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1919
1919
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1920
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1920
1921
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1921
1922
  --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1922
1923
  --wds-table-list-item-fill-hover-draggable: var(--wds-color-fill-dark-tertiary-hover);
package/odeditor-dark/all.scss CHANGED
@@ -172,6 +172,7 @@
172
172
  --wds-internal-thumbnail-illustration-size-small: 51px;
173
173
  --wds-internal-thumbnail-illustration-size-medium: 72px;
174
174
  --wds-internal-thumbnail-illustration-size-large: 114px;
175
+ --wds-internal-theme: odeditor-dark;
175
176
  --wds-internal-image-width-tiny: 106px;
176
177
  --wds-internal-image-width-small: 122px;
177
178
  --wds-internal-image-width-medium: 156px;
@@ -179,7 +180,6 @@
179
180
  --wds-internal-image-height-small: 60px;
180
181
  --wds-internal-image-height-medium: 84px;
181
182
  --wds-internal-image-height-large: 120px;
182
- --wds-internal-animations-enabled: false;
183
183
  --wds-input-shadow-focus-warning: transparent;
184
184
  --wds-input-shadow-focus-standard: transparent;
185
185
  --wds-input-shadow-focus-destructive: transparent;
@@ -189,7 +189,7 @@
189
189
  --wds-illustration-color-opacity-25: #F8F6F640;
190
190
  --wds-illustration-color-background: #2D2D2E;
191
191
  --wds-illustration-color-7: #B8C4FF;
192
- --wds-illustration-color-6: #002294;
192
+ --wds-illustration-color-6: #EAEFFF;
193
193
  --wds-illustration-color-5: #EAEFFF;
194
194
  --wds-illustration-color-4: #D5DFFF;
195
195
  --wds-illustration-color-3: #B8C4FF;
@@ -1902,6 +1902,7 @@
1902
1902
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1903
1903
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1904
1904
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1905
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1905
1906
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1906
1907
  --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1907
1908
  --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);
@@ -2062,6 +2062,7 @@
2062
2062
  @property st-global(--wds-tabs-item-gap-small-medium);
2063
2063
  @property st-global(--wds-tabs-label-fill);
2064
2064
  @property st-global(--wds-tabs-label-fill-active);
2065
+ @property st-global(--wds-tabs-label-fill-disabled);
2065
2066
  @property st-global(--wds-tabs-label-font-size-medium);
2066
2067
  @property st-global(--wds-tabs-label-font-size-small);
2067
2068
  @property st-global(--wds-tabs-label-font-size-small-medium);
@@ -3525,7 +3526,7 @@
3525
3526
  --wds-illustration-color-3: #B8C4FF;
3526
3527
  --wds-illustration-color-4: #D5DFFF;
3527
3528
  --wds-illustration-color-5: #EAEFFF;
3528
- --wds-illustration-color-6: #002294;
3529
+ --wds-illustration-color-6: #EAEFFF;
3529
3530
  --wds-illustration-color-7: #B8C4FF;
3530
3531
  --wds-illustration-color-background: #2D2D2E;
3531
3532
  --wds-illustration-color-opacity-25: #F8F6F640;
@@ -3600,7 +3601,6 @@
3600
3601
  --wds-input-value-font-size-tiny: 12px;
3601
3602
  --wds-internal-angle-input-knob-offset: 2px;
3602
3603
  --wds-internal-angle-input-knob-offset-bottom: 4px;
3603
- --wds-internal-animations-enabled: false;
3604
3604
  --wds-internal-button-border-width: 1px;
3605
3605
  --wds-internal-image-height-large: 120px;
3606
3606
  --wds-internal-image-height-medium: 84px;
@@ -3609,6 +3609,7 @@
3609
3609
  --wds-internal-image-width-medium: 156px;
3610
3610
  --wds-internal-image-width-small: 122px;
3611
3611
  --wds-internal-image-width-tiny: 106px;
3612
+ --wds-internal-theme: odeditor-dark;
3612
3613
  --wds-internal-thumbnail-illustration-size-large: 114px;
3613
3614
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3614
3615
  --wds-internal-thumbnail-illustration-size-small: 51px;
@@ -4433,6 +4434,7 @@
4433
4434
  --wds-tabs-item-gap-small-medium: 6px;
4434
4435
  --wds-tabs-label-fill: #A8A6A5;
4435
4436
  --wds-tabs-label-fill-active: #FFFFFF;
4437
+ --wds-tabs-label-fill-disabled: #878685;
4436
4438
  --wds-tabs-label-font-size-medium: 14px;
4437
4439
  --wds-tabs-label-font-size-small: 12px;
4438
4440
  --wds-tabs-label-font-size-small-medium: 14px;
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);
@@ -2937,6 +2938,7 @@
2937
2938
  --wds-tabs-item-gap-small-medium: 6px;
2938
2939
  --wds-tabs-label-fill: #A8A6A5;
2939
2940
  --wds-tabs-label-fill-active: #FFFFFF;
2941
+ --wds-tabs-label-fill-disabled: #878685;
2940
2942
  --wds-tabs-label-font-size-medium: 14px;
2941
2943
  --wds-tabs-label-font-size-small: 12px;
2942
2944
  --wds-tabs-label-font-size-small-medium: 14px;
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.0",
3
+ "version": "1.222.0",
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": "61c01963f69a01f3e0502207a7f294863997c6967cd28ae3724ca505"
39
+ "falconPackageHash": "e557b5b1e54117bb17413c27db08554b941c7a9e107122dd725fad79"
40
40
  }
package/studio/all.css CHANGED
@@ -399,7 +399,7 @@
399
399
  --wds-loader-stroke-width-large: 4px;
400
400
  --wds-list-item-select-min-height-medium: auto;
401
401
  --wds-list-item-action-subtitle-offset: 0px;
402
- --wds-internal-animations-enabled: false;
402
+ --wds-internal-theme: studio;
403
403
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
404
404
  --wds-internal-thumbnail-illustration-size-small: 51px;
405
405
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1032,6 +1032,7 @@
1032
1032
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
1033
1033
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
1034
1034
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
1035
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1035
1036
  --wds-tabs-item-gap-small-medium: var(--wds-space-150);
1036
1037
  --wds-tabs-item-gap-small: var(--wds-space-150);
1037
1038
  --wds-tabs-item-gap-medium: var(--wds-space-200);
package/studio/all.scss CHANGED
@@ -146,6 +146,7 @@
146
146
  --wds-internal-thumbnail-illustration-size-small: 51px;
147
147
  --wds-internal-thumbnail-illustration-size-medium: 72px;
148
148
  --wds-internal-thumbnail-illustration-size-large: 114px;
149
+ --wds-internal-theme: studio;
149
150
  --wds-internal-image-width-tiny: 106px;
150
151
  --wds-internal-image-width-small: 122px;
151
152
  --wds-internal-image-width-medium: 156px;
@@ -154,7 +155,6 @@
154
155
  --wds-internal-image-height-medium: 84px;
155
156
  --wds-internal-image-height-large: 120px;
156
157
  --wds-internal-color-picker-width: 236px;
157
- --wds-internal-animations-enabled: false;
158
158
  --wds-input-width-tiny: 48px;
159
159
  --wds-input-width-small: 56px;
160
160
  --wds-input-width-medium: 72px;
@@ -621,6 +621,7 @@
621
621
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
622
622
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
623
623
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
624
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
624
625
  --wds-tabs-item-gap-small-medium: var(--wds-space-150);
625
626
  --wds-tabs-item-gap-small: var(--wds-space-150);
626
627
  --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);
@@ -2069,6 +2069,7 @@
2069
2069
  @property st-global(--wds-tabs-item-gap-small-medium);
2070
2070
  @property st-global(--wds-tabs-label-fill);
2071
2071
  @property st-global(--wds-tabs-label-fill-active);
2072
+ @property st-global(--wds-tabs-label-fill-disabled);
2072
2073
  @property st-global(--wds-tabs-label-font-size-small);
2073
2074
  @property st-global(--wds-tabs-label-font-size-small-medium);
2074
2075
  @property st-global(--wds-tabs-label-font-weight);
@@ -3630,7 +3631,6 @@
3630
3631
  --wds-input-width-medium: 72px;
3631
3632
  --wds-input-width-small: 56px;
3632
3633
  --wds-input-width-tiny: 48px;
3633
- --wds-internal-animations-enabled: false;
3634
3634
  --wds-internal-color-picker-padding-horizontal: 16px;
3635
3635
  --wds-internal-color-picker-padding-vertical: 12px;
3636
3636
  --wds-internal-color-picker-width: 236px;
@@ -3641,6 +3641,7 @@
3641
3641
  --wds-internal-image-width-medium: 156px;
3642
3642
  --wds-internal-image-width-small: 122px;
3643
3643
  --wds-internal-image-width-tiny: 106px;
3644
+ --wds-internal-theme: studio;
3644
3645
  --wds-internal-thumbnail-illustration-size-large: 114px;
3645
3646
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3646
3647
  --wds-internal-thumbnail-illustration-size-small: 51px;
@@ -4453,6 +4454,7 @@
4453
4454
  --wds-tabs-item-gap-small-medium: 6px;
4454
4455
  --wds-tabs-label-fill: #131720;
4455
4456
  --wds-tabs-label-fill-active: #116dff;
4457
+ --wds-tabs-label-fill-disabled: #bebebe;
4456
4458
  --wds-tabs-label-font-size-small: 14px;
4457
4459
  --wds-tabs-label-font-size-small-medium: 14px;
4458
4460
  --wds-tabs-label-font-weight: 400;
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);
@@ -2965,6 +2966,7 @@
2965
2966
  --wds-tabs-item-gap-small-medium: 6px;
2966
2967
  --wds-tabs-label-fill: #131720;
2967
2968
  --wds-tabs-label-fill-active: #116dff;
2969
+ --wds-tabs-label-fill-disabled: #bebebe;
2968
2970
  --wds-tabs-label-font-size-small: 14px;
2969
2971
  --wds-tabs-label-font-size-small-medium: 14px;
2970
2972
  --wds-tabs-label-font-weight: 400;
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
@@ -382,7 +382,7 @@
382
382
  --wds-loader-stroke-width-large: 4px;
383
383
  --wds-list-item-select-min-height-medium: auto;
384
384
  --wds-list-item-action-subtitle-offset: 0px;
385
- --wds-internal-animations-enabled: false;
385
+ --wds-internal-theme: wixel;
386
386
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
387
387
  --wds-internal-thumbnail-illustration-size-small: 51px;
388
388
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1779,6 +1779,7 @@
1779
1779
  --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
1780
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-tiny);
1781
1781
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1782
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1782
1783
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1783
1784
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1784
1785
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
package/wixel/all.scss CHANGED
@@ -142,6 +142,7 @@
142
142
  --wds-internal-thumbnail-illustration-size-small: 51px;
143
143
  --wds-internal-thumbnail-illustration-size-medium: 72px;
144
144
  --wds-internal-thumbnail-illustration-size-large: 114px;
145
+ --wds-internal-theme: wixel;
145
146
  --wds-internal-image-width-tiny: 106px;
146
147
  --wds-internal-image-width-small: 122px;
147
148
  --wds-internal-image-width-medium: 156px;
@@ -150,7 +151,6 @@
150
151
  --wds-internal-image-height-medium: 84px;
151
152
  --wds-internal-image-height-large: 120px;
152
153
  --wds-internal-color-picker-width: 236px;
153
- --wds-internal-animations-enabled: false;
154
154
  --wds-input-width-tiny: 48px;
155
155
  --wds-input-width-small: 56px;
156
156
  --wds-input-width-medium: 72px;
@@ -1764,6 +1764,7 @@
1764
1764
  --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
1765
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-tiny);
1766
1766
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1767
+ --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1767
1768
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1768
1769
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1769
1770
  --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);
@@ -2011,6 +2011,7 @@
2011
2011
  @property st-global(--wds-tabs-item-gap-small-medium);
2012
2012
  @property st-global(--wds-tabs-label-fill);
2013
2013
  @property st-global(--wds-tabs-label-fill-active);
2014
+ @property st-global(--wds-tabs-label-fill-disabled);
2014
2015
  @property st-global(--wds-tabs-label-font-size-small);
2015
2016
  @property st-global(--wds-tabs-label-font-size-small-medium);
2016
2017
  @property st-global(--wds-tabs-label-font-weight);
@@ -3535,7 +3536,6 @@
3535
3536
  --wds-input-width-medium: 72px;
3536
3537
  --wds-input-width-small: 56px;
3537
3538
  --wds-input-width-tiny: 48px;
3538
- --wds-internal-animations-enabled: false;
3539
3539
  --wds-internal-color-picker-padding-horizontal: 16px;
3540
3540
  --wds-internal-color-picker-padding-vertical: 12px;
3541
3541
  --wds-internal-color-picker-width: 236px;
@@ -3546,6 +3546,7 @@
3546
3546
  --wds-internal-image-width-medium: 156px;
3547
3547
  --wds-internal-image-width-small: 122px;
3548
3548
  --wds-internal-image-width-tiny: 106px;
3549
+ --wds-internal-theme: wixel;
3549
3550
  --wds-internal-thumbnail-illustration-size-large: 114px;
3550
3551
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3551
3552
  --wds-internal-thumbnail-illustration-size-small: 51px;
@@ -4331,6 +4332,7 @@
4331
4332
  --wds-tabs-item-gap-small-medium: 6px;
4332
4333
  --wds-tabs-label-fill: #000624;
4333
4334
  --wds-tabs-label-fill-active: #4a57ff;
4335
+ --wds-tabs-label-fill-disabled: rgba(38, 37, 36, 0.3000);
4334
4336
  --wds-tabs-label-font-size-small: 12px;
4335
4337
  --wds-tabs-label-font-size-small-medium: 12px;
4336
4338
  --wds-tabs-label-font-weight: 400;
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);
@@ -2903,6 +2904,7 @@
2903
2904
  --wds-tabs-item-gap-small-medium: 6px;
2904
2905
  --wds-tabs-label-fill: #000624;
2905
2906
  --wds-tabs-label-fill-active: #4a57ff;
2907
+ --wds-tabs-label-fill-disabled: rgba(38, 37, 36, 0.3000);
2906
2908
  --wds-tabs-label-font-size-small: 12px;
2907
2909
  --wds-tabs-label-font-size-small-medium: 12px;
2908
2910
  --wds-tabs-label-font-weight: 400;
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);