@wix/design-system-tokens 1.221.1 → 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 +10 -0
  2. package/all.css +2 -1
  3. package/all.scss +2 -1
  4. package/all.st.css +2 -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 +2 -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 +3 -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 +2 -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 +2 -2
  27. package/wixel/component.st.css +2 -0
  28. package/wixel/foundation.st.css +2 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
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
+
1
11
  ## 1.221.1
2
12
 
3
13
  ## 1.221.0
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);
@@ -3642,7 +3642,6 @@
3642
3642
  --wds-input-width-medium: 72px;
3643
3643
  --wds-input-width-small: 54px;
3644
3644
  --wds-input-width-tiny: 48px;
3645
- --wds-internal-animations-enabled: false;
3646
3645
  --wds-internal-color-picker-padding-horizontal: 18px;
3647
3646
  --wds-internal-color-picker-padding-vertical: 12px;
3648
3647
  --wds-internal-color-picker-width: 240px;
@@ -3653,6 +3652,7 @@
3653
3652
  --wds-internal-image-width-medium: 156px;
3654
3653
  --wds-internal-image-width-small: 122px;
3655
3654
  --wds-internal-image-width-tiny: 106px;
3655
+ --wds-internal-theme: default;
3656
3656
  --wds-internal-thumbnail-illustration-size-large: 114px;
3657
3657
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3658
3658
  --wds-internal-thumbnail-illustration-size-small: 51px;
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);
@@ -3595,7 +3595,6 @@
3595
3595
  --wds-input-value-font-size-tiny: 12px;
3596
3596
  --wds-internal-angle-input-knob-offset: 2px;
3597
3597
  --wds-internal-angle-input-knob-offset-bottom: 4px;
3598
- --wds-internal-animations-enabled: true;
3599
3598
  --wds-internal-button-border-width: 1px;
3600
3599
  --wds-internal-image-height-large: 120px;
3601
3600
  --wds-internal-image-height-medium: 84px;
@@ -3604,6 +3603,7 @@
3604
3603
  --wds-internal-image-width-medium: 156px;
3605
3604
  --wds-internal-image-width-small: 122px;
3606
3605
  --wds-internal-image-width-tiny: 106px;
3606
+ --wds-internal-theme: odeditor;
3607
3607
  --wds-internal-thumbnail-illustration-size-large: 114px;
3608
3608
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3609
3609
  --wds-internal-thumbnail-illustration-size-small: 51px;
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);
@@ -3526,7 +3526,7 @@
3526
3526
  --wds-illustration-color-3: #B8C4FF;
3527
3527
  --wds-illustration-color-4: #D5DFFF;
3528
3528
  --wds-illustration-color-5: #EAEFFF;
3529
- --wds-illustration-color-6: #002294;
3529
+ --wds-illustration-color-6: #EAEFFF;
3530
3530
  --wds-illustration-color-7: #B8C4FF;
3531
3531
  --wds-illustration-color-background: #2D2D2E;
3532
3532
  --wds-illustration-color-opacity-25: #F8F6F640;
@@ -3601,7 +3601,6 @@
3601
3601
  --wds-input-value-font-size-tiny: 12px;
3602
3602
  --wds-internal-angle-input-knob-offset: 2px;
3603
3603
  --wds-internal-angle-input-knob-offset-bottom: 4px;
3604
- --wds-internal-animations-enabled: false;
3605
3604
  --wds-internal-button-border-width: 1px;
3606
3605
  --wds-internal-image-height-large: 120px;
3607
3606
  --wds-internal-image-height-medium: 84px;
@@ -3610,6 +3609,7 @@
3610
3609
  --wds-internal-image-width-medium: 156px;
3611
3610
  --wds-internal-image-width-small: 122px;
3612
3611
  --wds-internal-image-width-tiny: 106px;
3612
+ --wds-internal-theme: odeditor-dark;
3613
3613
  --wds-internal-thumbnail-illustration-size-large: 114px;
3614
3614
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3615
3615
  --wds-internal-thumbnail-illustration-size-small: 51px;
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.1",
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": "702d420d48b761775d8ec9025c2464f23dc3909dd43c98c71804c5dd"
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);
@@ -3631,7 +3631,6 @@
3631
3631
  --wds-input-width-medium: 72px;
3632
3632
  --wds-input-width-small: 56px;
3633
3633
  --wds-input-width-tiny: 48px;
3634
- --wds-internal-animations-enabled: false;
3635
3634
  --wds-internal-color-picker-padding-horizontal: 16px;
3636
3635
  --wds-internal-color-picker-padding-vertical: 12px;
3637
3636
  --wds-internal-color-picker-width: 236px;
@@ -3642,6 +3641,7 @@
3642
3641
  --wds-internal-image-width-medium: 156px;
3643
3642
  --wds-internal-image-width-small: 122px;
3644
3643
  --wds-internal-image-width-tiny: 106px;
3644
+ --wds-internal-theme: studio;
3645
3645
  --wds-internal-thumbnail-illustration-size-large: 114px;
3646
3646
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3647
3647
  --wds-internal-thumbnail-illustration-size-small: 51px;
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);
@@ -3536,7 +3536,6 @@
3536
3536
  --wds-input-width-medium: 72px;
3537
3537
  --wds-input-width-small: 56px;
3538
3538
  --wds-input-width-tiny: 48px;
3539
- --wds-internal-animations-enabled: false;
3540
3539
  --wds-internal-color-picker-padding-horizontal: 16px;
3541
3540
  --wds-internal-color-picker-padding-vertical: 12px;
3542
3541
  --wds-internal-color-picker-width: 236px;
@@ -3547,6 +3546,7 @@
3547
3546
  --wds-internal-image-width-medium: 156px;
3548
3547
  --wds-internal-image-width-small: 122px;
3549
3548
  --wds-internal-image-width-tiny: 106px;
3549
+ --wds-internal-theme: wixel;
3550
3550
  --wds-internal-thumbnail-illustration-size-large: 114px;
3551
3551
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3552
3552
  --wds-internal-thumbnail-illustration-size-small: 51px;
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);