@wix/design-system-tokens 1.131.1 → 1.133.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 (18) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/all.css +12 -0
  3. package/all.scss +12 -0
  4. package/all.st.css +24 -0
  5. package/component.st.css +24 -0
  6. package/odeditor/all.css +15 -9
  7. package/odeditor/all.scss +15 -9
  8. package/odeditor/all.st.css +20 -8
  9. package/odeditor/component.st.css +20 -8
  10. package/package.json +2 -2
  11. package/studio/all.css +12 -0
  12. package/studio/all.scss +12 -0
  13. package/studio/all.st.css +24 -0
  14. package/studio/component.st.css +24 -0
  15. package/wixel/all.css +6 -0
  16. package/wixel/all.scss +6 -0
  17. package/wixel/all.st.css +12 -0
  18. package/wixel/component.st.css +12 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## 1.133.0 - 2025-09-12
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(CircularProgressBar): e3 tokenization [15265](https://github.com/wix-private/wix-design-systems/pull/15265)
6
+
7
+ ## 1.132.0 - 2025-09-09
8
+
9
+ ### Features
10
+
11
+ - feat(ToggleButton): labelPlacement font & other [15274](https://github.com/wix-private/wix-design-systems/pull/15274)
12
+
13
+ ### Visual Breaking Changes
14
+
15
+ - breaking(Accordion): adjust fill colors & border radius [15292](https://github.com/wix-private/wix-design-systems/pull/15292)
16
+
1
17
  ## 1.131.0 - 2025-09-08
2
18
 
3
19
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -317,6 +317,7 @@
317
317
  --wds-composer-sidebar-end-max-width: 240px;
318
318
  --wds-composer-sidebar-bottom-width: 90px;
319
319
  --wds-color-picker-width: 240px;
320
+ --wds-circular-progress-bar-border-width: 4px;
320
321
  --wds-checkbox-size: 16px;
321
322
  --wds-button-outline-hover: transparent;
322
323
  --wds-button-icon-offset-tiny: 12px;
@@ -1288,6 +1289,10 @@
1288
1289
  --wds-circular-progress-bar-size-small: var(--wds-space-500);
1289
1290
  --wds-circular-progress-bar-size-medium: var(--wds-space-900);
1290
1291
  --wds-circular-progress-bar-size-large: var(--wds-space-1700);
1292
+ --wds-circular-progress-bar-label-padding-medium: var(--wds-space-0);
1293
+ --wds-circular-progress-bar-label-padding-large: var(--wds-space-0);
1294
+ --wds-circular-progress-bar-label-font-weight: var(--wds-font-weight-bold);
1295
+ --wds-circular-progress-bar-label-font-size: var(--wds-font-size-100);
1291
1296
  --wds-checkbox-group-gap-vertical: var(--wds-space-200);
1292
1297
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1293
1298
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
@@ -1474,6 +1479,10 @@
1474
1479
  --wds-toggle-switch-border-success-disabled: var(--wds-color-border-success-secondary-disabled);
1475
1480
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-border-standard-secondary-disabled);
1476
1481
  --wds-toggle-switch-border-error-disabled: var(--wds-color-border-destructive-secondary-disabled);
1482
+ --wds-toggle-button-square-label-font-size-tiny: var(--wds-font-size-body-tiny);
1483
+ --wds-toggle-button-square-label-font-size-small: var(--wds-font-size-body-tiny);
1484
+ --wds-toggle-button-square-label-font-size-medium: var(--wds-font-size-body-tiny);
1485
+ --wds-toggle-button-square-label-font-size-large: var(--wds-font-size-body-tiny);
1477
1486
  --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1478
1487
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1479
1488
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
@@ -1835,6 +1844,7 @@
1835
1844
  --wds-clickable-card-filled-fill-disabled: var(--wds-color-fill-light-primary-disabled);
1836
1845
  --wds-clickable-card-filled-fill-active: var(--wds-color-fill-light-primary-active);
1837
1846
  --wds-clickable-card-filled-fill: var(--wds-color-fill-light-primary);
1847
+ --wds-circular-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1838
1848
  --wds-circular-progress-bar-foreground-fill-success: var(--wds-color-fill-success-primary);
1839
1849
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1840
1850
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
@@ -1971,6 +1981,8 @@
1971
1981
  --wds-accordion-title-fill: var(--wds-color-text-standard-primary);
1972
1982
  --wds-accordion-caret-fill-hover: var(--wds-color-text-standard-secondary);
1973
1983
  --wds-accordion-caret-fill: var(--wds-color-text-standard-secondary);
1984
+ --wds-accordion-background-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
1985
+ --wds-accordion-background-fill-standard: var(--wds-color-fill-standard-tertiary);
1974
1986
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary-hover);
1975
1987
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1976
1988
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-small);
package/all.scss CHANGED
@@ -292,6 +292,7 @@
292
292
  --wds-color-black-100-transparent-5: rgba(0, 6, 36, .05);
293
293
  --wds-color-black-100-transparent-0: rgba(0, 6, 36, 0);
294
294
  --wds-color-black-100: #000624;
295
+ --wds-circular-progress-bar-border-width: 4px;
295
296
  --wds-checkbox-size: 16px;
296
297
  --wds-button-outline-hover: transparent;
297
298
  --wds-button-icon-offset-tiny: 12px;
@@ -1280,6 +1281,10 @@
1280
1281
  --wds-circular-progress-bar-size-small: var(--wds-space-500);
1281
1282
  --wds-circular-progress-bar-size-medium: var(--wds-space-900);
1282
1283
  --wds-circular-progress-bar-size-large: var(--wds-space-1700);
1284
+ --wds-circular-progress-bar-label-padding-medium: var(--wds-space-0);
1285
+ --wds-circular-progress-bar-label-padding-large: var(--wds-space-0);
1286
+ --wds-circular-progress-bar-label-font-weight: var(--wds-font-weight-bold);
1287
+ --wds-circular-progress-bar-label-font-size: var(--wds-font-size-100);
1283
1288
  --wds-checkbox-group-gap-vertical: var(--wds-space-200);
1284
1289
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1285
1290
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
@@ -1456,6 +1461,10 @@
1456
1461
  --wds-toggle-switch-border-success-disabled: var(--wds-color-border-success-secondary-disabled);
1457
1462
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-border-standard-secondary-disabled);
1458
1463
  --wds-toggle-switch-border-error-disabled: var(--wds-color-border-destructive-secondary-disabled);
1464
+ --wds-toggle-button-square-label-font-size-tiny: var(--wds-font-size-body-tiny);
1465
+ --wds-toggle-button-square-label-font-size-small: var(--wds-font-size-body-tiny);
1466
+ --wds-toggle-button-square-label-font-size-medium: var(--wds-font-size-body-tiny);
1467
+ --wds-toggle-button-square-label-font-size-large: var(--wds-font-size-body-tiny);
1459
1468
  --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1460
1469
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1461
1470
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
@@ -1835,6 +1844,7 @@
1835
1844
  --wds-clickable-card-filled-fill-disabled: var(--wds-color-fill-light-primary-disabled);
1836
1845
  --wds-clickable-card-filled-fill-active: var(--wds-color-fill-light-primary-active);
1837
1846
  --wds-clickable-card-filled-fill: var(--wds-color-fill-light-primary);
1847
+ --wds-circular-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1838
1848
  --wds-circular-progress-bar-foreground-fill-success: var(--wds-color-fill-success-primary);
1839
1849
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1840
1850
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
@@ -1971,6 +1981,8 @@
1971
1981
  --wds-accordion-title-fill: var(--wds-color-text-standard-primary);
1972
1982
  --wds-accordion-caret-fill-hover: var(--wds-color-text-standard-secondary);
1973
1983
  --wds-accordion-caret-fill: var(--wds-color-text-standard-secondary);
1984
+ --wds-accordion-background-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
1985
+ --wds-accordion-background-fill-standard: var(--wds-color-fill-standard-tertiary);
1974
1986
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary-hover);
1975
1987
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1976
1988
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-small);
package/all.st.css CHANGED
@@ -1,5 +1,7 @@
1
1
  @property st-global(--wds-accordion-background-fill-light);
2
2
  @property st-global(--wds-accordion-background-fill-light-hover);
3
+ @property st-global(--wds-accordion-background-fill-standard);
4
+ @property st-global(--wds-accordion-background-fill-standard-hover);
3
5
  @property st-global(--wds-accordion-border-radius);
4
6
  @property st-global(--wds-accordion-caret-fill);
5
7
  @property st-global(--wds-accordion-caret-fill-hover);
@@ -293,10 +295,16 @@
293
295
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
294
296
  @property st-global(--wds-circular-progress-bar-background-fill-standard);
295
297
  @property st-global(--wds-circular-progress-bar-background-fill-success);
298
+ @property st-global(--wds-circular-progress-bar-border-width);
296
299
  @property st-global(--wds-circular-progress-bar-foreground-fill-error);
297
300
  @property st-global(--wds-circular-progress-bar-foreground-fill-premium);
298
301
  @property st-global(--wds-circular-progress-bar-foreground-fill-standard);
299
302
  @property st-global(--wds-circular-progress-bar-foreground-fill-success);
303
+ @property st-global(--wds-circular-progress-bar-label-font-line-height);
304
+ @property st-global(--wds-circular-progress-bar-label-font-size);
305
+ @property st-global(--wds-circular-progress-bar-label-font-weight);
306
+ @property st-global(--wds-circular-progress-bar-label-padding-large);
307
+ @property st-global(--wds-circular-progress-bar-label-padding-medium);
300
308
  @property st-global(--wds-circular-progress-bar-size-large);
301
309
  @property st-global(--wds-circular-progress-bar-size-medium);
302
310
  @property st-global(--wds-circular-progress-bar-size-small);
@@ -1897,6 +1905,10 @@
1897
1905
  @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1898
1906
  @property st-global(--wds-toggle-button-shadow-y-tertiary);
1899
1907
  @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1908
+ @property st-global(--wds-toggle-button-square-label-font-size-large);
1909
+ @property st-global(--wds-toggle-button-square-label-font-size-medium);
1910
+ @property st-global(--wds-toggle-button-square-label-font-size-small);
1911
+ @property st-global(--wds-toggle-button-square-label-font-size-tiny);
1900
1912
  @property st-global(--wds-toggle-switch-border-error-disabled);
1901
1913
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1902
1914
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -2029,6 +2041,8 @@
2029
2041
  .root {
2030
2042
  --wds-accordion-background-fill-light: #ffffff;
2031
2043
  --wds-accordion-background-fill-light-hover: #e7f0ff;
2044
+ --wds-accordion-background-fill-standard: #ffffff;
2045
+ --wds-accordion-background-fill-standard-hover: #e7f0ff;
2032
2046
  --wds-accordion-border-radius: 0px;
2033
2047
  --wds-accordion-caret-fill: #44485f;
2034
2048
  --wds-accordion-caret-fill-hover: #44485f;
@@ -2322,10 +2336,16 @@
2322
2336
  --wds-circular-progress-bar-background-fill-premium: #e3c3f4;
2323
2337
  --wds-circular-progress-bar-background-fill-standard: #d6e6fe;
2324
2338
  --wds-circular-progress-bar-background-fill-success: #c8e8d6;
2339
+ --wds-circular-progress-bar-border-width: 4px;
2325
2340
  --wds-circular-progress-bar-foreground-fill-error: #e62214;
2326
2341
  --wds-circular-progress-bar-foreground-fill-premium: #9a27d5;
2327
2342
  --wds-circular-progress-bar-foreground-fill-standard: #116dff;
2328
2343
  --wds-circular-progress-bar-foreground-fill-success: #25a55a;
2344
+ --wds-circular-progress-bar-label-font-line-height: 18px;
2345
+ --wds-circular-progress-bar-label-font-size: 10px;
2346
+ --wds-circular-progress-bar-label-font-weight: 700;
2347
+ --wds-circular-progress-bar-label-padding-large: 0px;
2348
+ --wds-circular-progress-bar-label-padding-medium: 0px;
2329
2349
  --wds-circular-progress-bar-size-large: 102px;
2330
2350
  --wds-circular-progress-bar-size-medium: 54px;
2331
2351
  --wds-circular-progress-bar-size-small: 30px;
@@ -3926,6 +3946,10 @@
3926
3946
  --wds-toggle-button-shadow-y-secondary-inverted: 0;
3927
3947
  --wds-toggle-button-shadow-y-tertiary: 0;
3928
3948
  --wds-toggle-button-shadow-y-tertiary-inverted: 0;
3949
+ --wds-toggle-button-square-label-font-size-large: 12px;
3950
+ --wds-toggle-button-square-label-font-size-medium: 12px;
3951
+ --wds-toggle-button-square-label-font-size-small: 12px;
3952
+ --wds-toggle-button-square-label-font-size-tiny: 12px;
3929
3953
  --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
3930
3954
  --wds-toggle-switch-border-standard-disabled: rgba(0, 6, 36, .1);
3931
3955
  --wds-toggle-switch-border-success-disabled: rgba(0, 6, 36, .1);
package/component.st.css CHANGED
@@ -1,5 +1,7 @@
1
1
  @property st-global(--wds-accordion-background-fill-light);
2
2
  @property st-global(--wds-accordion-background-fill-light-hover);
3
+ @property st-global(--wds-accordion-background-fill-standard);
4
+ @property st-global(--wds-accordion-background-fill-standard-hover);
3
5
  @property st-global(--wds-accordion-border-radius);
4
6
  @property st-global(--wds-accordion-caret-fill);
5
7
  @property st-global(--wds-accordion-caret-fill-hover);
@@ -260,10 +262,16 @@
260
262
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
261
263
  @property st-global(--wds-circular-progress-bar-background-fill-standard);
262
264
  @property st-global(--wds-circular-progress-bar-background-fill-success);
265
+ @property st-global(--wds-circular-progress-bar-border-width);
263
266
  @property st-global(--wds-circular-progress-bar-foreground-fill-error);
264
267
  @property st-global(--wds-circular-progress-bar-foreground-fill-premium);
265
268
  @property st-global(--wds-circular-progress-bar-foreground-fill-standard);
266
269
  @property st-global(--wds-circular-progress-bar-foreground-fill-success);
270
+ @property st-global(--wds-circular-progress-bar-label-font-line-height);
271
+ @property st-global(--wds-circular-progress-bar-label-font-size);
272
+ @property st-global(--wds-circular-progress-bar-label-font-weight);
273
+ @property st-global(--wds-circular-progress-bar-label-padding-large);
274
+ @property st-global(--wds-circular-progress-bar-label-padding-medium);
267
275
  @property st-global(--wds-circular-progress-bar-size-large);
268
276
  @property st-global(--wds-circular-progress-bar-size-medium);
269
277
  @property st-global(--wds-circular-progress-bar-size-small);
@@ -1183,6 +1191,10 @@
1183
1191
  @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1184
1192
  @property st-global(--wds-toggle-button-shadow-y-tertiary);
1185
1193
  @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1194
+ @property st-global(--wds-toggle-button-square-label-font-size-large);
1195
+ @property st-global(--wds-toggle-button-square-label-font-size-medium);
1196
+ @property st-global(--wds-toggle-button-square-label-font-size-small);
1197
+ @property st-global(--wds-toggle-button-square-label-font-size-tiny);
1186
1198
  @property st-global(--wds-toggle-switch-border-error-disabled);
1187
1199
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1188
1200
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1313,6 +1325,8 @@
1313
1325
  .root {
1314
1326
  --wds-accordion-background-fill-light: #ffffff;
1315
1327
  --wds-accordion-background-fill-light-hover: #e7f0ff;
1328
+ --wds-accordion-background-fill-standard: #ffffff;
1329
+ --wds-accordion-background-fill-standard-hover: #e7f0ff;
1316
1330
  --wds-accordion-border-radius: 0px;
1317
1331
  --wds-accordion-caret-fill: #44485f;
1318
1332
  --wds-accordion-caret-fill-hover: #44485f;
@@ -1573,10 +1587,16 @@
1573
1587
  --wds-circular-progress-bar-background-fill-premium: #e3c3f4;
1574
1588
  --wds-circular-progress-bar-background-fill-standard: #d6e6fe;
1575
1589
  --wds-circular-progress-bar-background-fill-success: #c8e8d6;
1590
+ --wds-circular-progress-bar-border-width: 4px;
1576
1591
  --wds-circular-progress-bar-foreground-fill-error: #e62214;
1577
1592
  --wds-circular-progress-bar-foreground-fill-premium: #9a27d5;
1578
1593
  --wds-circular-progress-bar-foreground-fill-standard: #116dff;
1579
1594
  --wds-circular-progress-bar-foreground-fill-success: #25a55a;
1595
+ --wds-circular-progress-bar-label-font-line-height: 18px;
1596
+ --wds-circular-progress-bar-label-font-size: 10px;
1597
+ --wds-circular-progress-bar-label-font-weight: 700;
1598
+ --wds-circular-progress-bar-label-padding-large: 0px;
1599
+ --wds-circular-progress-bar-label-padding-medium: 0px;
1580
1600
  --wds-circular-progress-bar-size-large: 102px;
1581
1601
  --wds-circular-progress-bar-size-medium: 54px;
1582
1602
  --wds-circular-progress-bar-size-small: 30px;
@@ -2496,6 +2516,10 @@
2496
2516
  --wds-toggle-button-shadow-y-secondary-inverted: 0;
2497
2517
  --wds-toggle-button-shadow-y-tertiary: 0;
2498
2518
  --wds-toggle-button-shadow-y-tertiary-inverted: 0;
2519
+ --wds-toggle-button-square-label-font-size-large: 12px;
2520
+ --wds-toggle-button-square-label-font-size-medium: 12px;
2521
+ --wds-toggle-button-square-label-font-size-small: 12px;
2522
+ --wds-toggle-button-square-label-font-size-tiny: 12px;
2499
2523
  --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
2500
2524
  --wds-toggle-switch-border-standard-disabled: rgba(0, 6, 36, .1);
2501
2525
  --wds-toggle-switch-border-success-disabled: rgba(0, 6, 36, .1);
package/odeditor/all.css CHANGED
@@ -301,6 +301,8 @@
301
301
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
302
302
  --wds-toggle-button-shadow-blur-secondary: 1.7px;
303
303
  --wds-toggle-button-shadow-blur-primary-inverted: 30px;
304
+ --wds-toggle-button-inner-shadow-blur-secondary: 1px;
305
+ --wds-toggle-button-inner-shadow-blur-primary: 1px;
304
306
  --wds-tabs-selection-height: 3px;
305
307
  --wds-swatches-swatch-active-border-radius-small: 5px;
306
308
  --wds-status-toast-width: 600px;
@@ -826,9 +828,9 @@
826
828
  --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-5);
827
829
  --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-50);
828
830
  --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
829
- --wds-toggle-button-padding-tiny: var(--wds-space-300);
831
+ --wds-toggle-button-padding-tiny: var(--wds-space-200);
830
832
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
831
- --wds-toggle-button-padding-small: var(--wds-space-400);
833
+ --wds-toggle-button-padding-small: var(--wds-space-300);
832
834
  --wds-toggle-button-padding-medium-round: var(--wds-space-500);
833
835
  --wds-toggle-button-padding-medium: var(--wds-space-300);
834
836
  --wds-toggle-button-padding-large-round: var(--wds-space-600);
@@ -849,8 +851,6 @@
849
851
  --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-25);
850
852
  --wds-toggle-button-inner-shadow-fill-secondary: var(--wds-color-white);
851
853
  --wds-toggle-button-inner-shadow-fill-primary: var(--wds-color-white);
852
- --wds-toggle-button-inner-shadow-blur-secondary: var(--wds-shadow-blur-25);
853
- --wds-toggle-button-inner-shadow-blur-primary: var(--wds-shadow-blur-25);
854
854
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-blue-400);
855
855
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-black-700);
856
856
  --wds-toggle-button-fill-standard-selected: var(--wds-color-blue-500);
@@ -1483,7 +1483,7 @@
1483
1483
  --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
1484
1484
  --wds-accordion-inner-content-padding-top: var(--wds-space-100);
1485
1485
  --wds-accordion-inner-content-fill: var(--wds-color-white);
1486
- --wds-accordion-border-radius: var(--wds-border-radius-600);
1486
+ --wds-accordion-border-radius: var(--wds-border-radius-0);
1487
1487
  --wds-shadow-surface-raised: var(--wds-shadow-200);
1488
1488
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1489
1489
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
@@ -1559,9 +1559,13 @@
1559
1559
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1560
1560
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1561
1561
  --wds-toggle-switch-fill-error: var(--wds-color-fill-dark-primary);
1562
+ --wds-toggle-button-square-label-font-size-tiny: var(--wds-font-size-body-tiny);
1563
+ --wds-toggle-button-square-label-font-size-small: var(--wds-font-size-body-tiny);
1564
+ --wds-toggle-button-square-label-font-size-medium: var(--wds-font-size-body-small);
1565
+ --wds-toggle-button-square-label-font-size-large: var(--wds-font-size-body-small);
1562
1566
  --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1563
- --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1564
- --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1567
+ --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-small);
1568
+ --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-small);
1565
1569
  --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1566
1570
  --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-tiny);
1567
1571
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
@@ -1933,8 +1937,10 @@
1933
1937
  --wds-accordion-title-fill: var(--wds-color-text-standard-primary);
1934
1938
  --wds-accordion-caret-fill-hover: var(--wds-color-text-standard-primary);
1935
1939
  --wds-accordion-caret-fill: var(--wds-color-text-standard-primary);
1936
- --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary-hover);
1937
- --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1940
+ --wds-accordion-background-fill-standard-hover: var(--wds-color-fill-dark-tertiary-hover);
1941
+ --wds-accordion-background-fill-standard: var(--wds-color-fill-dark-tertiary);
1942
+ --wds-accordion-background-fill-light-hover: var(--wds-color-fill-dark-tertiary-hover);
1943
+ --wds-accordion-background-fill-light: var(--wds-color-fill-dark-tertiary);
1938
1944
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-tiny);
1939
1945
  --wds-tooltip-label-font-line-height-small: var(--wds-font-line-height-body-extra-tiny);
1940
1946
  --wds-tooltip-label-font-line-height-medium: var(--wds-font-line-height-body-small);
package/odeditor/all.scss CHANGED
@@ -25,6 +25,8 @@
25
25
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
26
26
  --wds-toggle-button-shadow-blur-secondary: 1.7px;
27
27
  --wds-toggle-button-shadow-blur-primary-inverted: 30px;
28
+ --wds-toggle-button-inner-shadow-blur-secondary: 1px;
29
+ --wds-toggle-button-inner-shadow-blur-primary: 1px;
28
30
  --wds-tabs-selection-height: 3px;
29
31
  --wds-swatches-swatch-active-border-radius-small: 5px;
30
32
  --wds-status-toast-width: 600px;
@@ -407,9 +409,9 @@
407
409
  --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-5);
408
410
  --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-50);
409
411
  --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
410
- --wds-toggle-button-padding-tiny: var(--wds-space-300);
412
+ --wds-toggle-button-padding-tiny: var(--wds-space-200);
411
413
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
412
- --wds-toggle-button-padding-small: var(--wds-space-400);
414
+ --wds-toggle-button-padding-small: var(--wds-space-300);
413
415
  --wds-toggle-button-padding-medium-round: var(--wds-space-500);
414
416
  --wds-toggle-button-padding-medium: var(--wds-space-300);
415
417
  --wds-toggle-button-padding-large-round: var(--wds-space-600);
@@ -430,8 +432,6 @@
430
432
  --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-25);
431
433
  --wds-toggle-button-inner-shadow-fill-secondary: var(--wds-color-white);
432
434
  --wds-toggle-button-inner-shadow-fill-primary: var(--wds-color-white);
433
- --wds-toggle-button-inner-shadow-blur-secondary: var(--wds-shadow-blur-25);
434
- --wds-toggle-button-inner-shadow-blur-primary: var(--wds-shadow-blur-25);
435
435
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-blue-400);
436
436
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-black-700);
437
437
  --wds-toggle-button-fill-standard-selected: var(--wds-color-blue-500);
@@ -1483,7 +1483,7 @@
1483
1483
  --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
1484
1484
  --wds-accordion-inner-content-padding-top: var(--wds-space-100);
1485
1485
  --wds-accordion-inner-content-fill: var(--wds-color-white);
1486
- --wds-accordion-border-radius: var(--wds-border-radius-600);
1486
+ --wds-accordion-border-radius: var(--wds-border-radius-0);
1487
1487
  --wds-vertical-tabs-section-text-font-size-small: var(--wds-font-size-body-tiny);
1488
1488
  --wds-vertical-tabs-item-label-text-premium-active: var(--wds-color-text-premium);
1489
1489
  --wds-vertical-tabs-item-label-text-premium: var(--wds-color-text-premium);
@@ -1541,9 +1541,13 @@
1541
1541
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1542
1542
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1543
1543
  --wds-toggle-switch-fill-error: var(--wds-color-fill-dark-primary);
1544
+ --wds-toggle-button-square-label-font-size-tiny: var(--wds-font-size-body-tiny);
1545
+ --wds-toggle-button-square-label-font-size-small: var(--wds-font-size-body-tiny);
1546
+ --wds-toggle-button-square-label-font-size-medium: var(--wds-font-size-body-small);
1547
+ --wds-toggle-button-square-label-font-size-large: var(--wds-font-size-body-small);
1544
1548
  --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1545
- --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1546
- --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1549
+ --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-small);
1550
+ --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-small);
1547
1551
  --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1548
1552
  --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-tiny);
1549
1553
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
@@ -1933,8 +1937,10 @@
1933
1937
  --wds-accordion-title-fill: var(--wds-color-text-standard-primary);
1934
1938
  --wds-accordion-caret-fill-hover: var(--wds-color-text-standard-primary);
1935
1939
  --wds-accordion-caret-fill: var(--wds-color-text-standard-primary);
1936
- --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary-hover);
1937
- --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1940
+ --wds-accordion-background-fill-standard-hover: var(--wds-color-fill-dark-tertiary-hover);
1941
+ --wds-accordion-background-fill-standard: var(--wds-color-fill-dark-tertiary);
1942
+ --wds-accordion-background-fill-light-hover: var(--wds-color-fill-dark-tertiary-hover);
1943
+ --wds-accordion-background-fill-light: var(--wds-color-fill-dark-tertiary);
1938
1944
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-tiny);
1939
1945
  --wds-tooltip-label-font-line-height-small: var(--wds-font-line-height-body-extra-tiny);
1940
1946
  --wds-tooltip-label-font-line-height-medium: var(--wds-font-line-height-body-small);
package/odeditor/all.st.css CHANGED
@@ -1,5 +1,7 @@
1
1
  @property st-global(--wds-accordion-background-fill-light);
2
2
  @property st-global(--wds-accordion-background-fill-light-hover);
3
+ @property st-global(--wds-accordion-background-fill-standard);
4
+ @property st-global(--wds-accordion-background-fill-standard-hover);
3
5
  @property st-global(--wds-accordion-border-radius);
4
6
  @property st-global(--wds-accordion-caret-fill);
5
7
  @property st-global(--wds-accordion-caret-fill-hover);
@@ -1868,6 +1870,10 @@
1868
1870
  @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1869
1871
  @property st-global(--wds-toggle-button-shadow-y-tertiary);
1870
1872
  @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1873
+ @property st-global(--wds-toggle-button-square-label-font-size-large);
1874
+ @property st-global(--wds-toggle-button-square-label-font-size-medium);
1875
+ @property st-global(--wds-toggle-button-square-label-font-size-small);
1876
+ @property st-global(--wds-toggle-button-square-label-font-size-tiny);
1871
1877
  @property st-global(--wds-toggle-switch-border-error-disabled);
1872
1878
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1873
1879
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1987,8 +1993,10 @@
1987
1993
 
1988
1994
  .root {
1989
1995
  --wds-accordion-background-fill-light: #ffffff;
1990
- --wds-accordion-background-fill-light-hover: #eaefff;
1991
- --wds-accordion-border-radius: 12px;
1996
+ --wds-accordion-background-fill-light-hover: #f8f6f6;
1997
+ --wds-accordion-background-fill-standard: #ffffff;
1998
+ --wds-accordion-background-fill-standard-hover: #f8f6f6;
1999
+ --wds-accordion-border-radius: 0px;
1992
2000
  --wds-accordion-caret-fill: #151414;
1993
2001
  --wds-accordion-caret-fill-hover: #151414;
1994
2002
  --wds-accordion-inner-content-fill: #ffffff;
@@ -3790,8 +3798,8 @@
3790
3798
  --wds-toggle-button-fill-standard-selected: #eaefff;
3791
3799
  --wds-toggle-button-fill-standard-selected-disabled: #f0efef;
3792
3800
  --wds-toggle-button-fill-standard-selected-hover: #d5dfff;
3793
- --wds-toggle-button-inner-shadow-blur-primary: 2px;
3794
- --wds-toggle-button-inner-shadow-blur-secondary: 2px;
3801
+ --wds-toggle-button-inner-shadow-blur-primary: 1px;
3802
+ --wds-toggle-button-inner-shadow-blur-secondary: 1px;
3795
3803
  --wds-toggle-button-inner-shadow-fill-primary: #ffffff;
3796
3804
  --wds-toggle-button-inner-shadow-fill-secondary: #ffffff;
3797
3805
  --wds-toggle-button-inner-shadow-x-primary: 1px;
@@ -3818,8 +3826,8 @@
3818
3826
  --wds-toggle-button-label-font-line-height-round-small: 16px;
3819
3827
  --wds-toggle-button-label-font-size-round-small: 12px;
3820
3828
  --wds-toggle-button-label-font-size-square-large: 12px;
3821
- --wds-toggle-button-label-font-size-square-medium: 12px;
3822
- --wds-toggle-button-label-font-size-square-small: 12px;
3829
+ --wds-toggle-button-label-font-size-square-medium: 14px;
3830
+ --wds-toggle-button-label-font-size-square-small: 14px;
3823
3831
  --wds-toggle-button-label-font-size-square-tiny: 12px;
3824
3832
  --wds-toggle-button-label-font-weight-pill: 600;
3825
3833
  --wds-toggle-button-label-font-weight-round: 600;
@@ -3828,9 +3836,9 @@
3828
3836
  --wds-toggle-button-padding-large-round: 24px;
3829
3837
  --wds-toggle-button-padding-medium: 12px;
3830
3838
  --wds-toggle-button-padding-medium-round: 20px;
3831
- --wds-toggle-button-padding-small: 16px;
3839
+ --wds-toggle-button-padding-small: 12px;
3832
3840
  --wds-toggle-button-padding-small-round: 16px;
3833
- --wds-toggle-button-padding-tiny: 12px;
3841
+ --wds-toggle-button-padding-tiny: 8px;
3834
3842
  --wds-toggle-button-padding-tiny-round: 12px;
3835
3843
  --wds-toggle-button-shadow-blur-primary: 4px;
3836
3844
  --wds-toggle-button-shadow-blur-primary-inverted: 30px;
@@ -3856,6 +3864,10 @@
3856
3864
  --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
3857
3865
  --wds-toggle-button-shadow-y-tertiary: 0.4px;
3858
3866
  --wds-toggle-button-shadow-y-tertiary-inverted: 4px;
3867
+ --wds-toggle-button-square-label-font-size-large: 14px;
3868
+ --wds-toggle-button-square-label-font-size-medium: 14px;
3869
+ --wds-toggle-button-square-label-font-size-small: 12px;
3870
+ --wds-toggle-button-square-label-font-size-tiny: 12px;
3859
3871
  --wds-toggle-switch-border-error-disabled: rgba(19, 23, 32, 0);
3860
3872
  --wds-toggle-switch-border-standard-disabled: rgba(19, 23, 32, 0);
3861
3873
  --wds-toggle-switch-border-success-disabled: rgba(19, 23, 32, 0);
package/odeditor/component.st.css CHANGED
@@ -1,5 +1,7 @@
1
1
  @property st-global(--wds-accordion-background-fill-light);
2
2
  @property st-global(--wds-accordion-background-fill-light-hover);
3
+ @property st-global(--wds-accordion-background-fill-standard);
4
+ @property st-global(--wds-accordion-background-fill-standard-hover);
3
5
  @property st-global(--wds-accordion-border-radius);
4
6
  @property st-global(--wds-accordion-caret-fill);
5
7
  @property st-global(--wds-accordion-caret-fill-hover);
@@ -1155,6 +1157,10 @@
1155
1157
  @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1156
1158
  @property st-global(--wds-toggle-button-shadow-y-tertiary);
1157
1159
  @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1160
+ @property st-global(--wds-toggle-button-square-label-font-size-large);
1161
+ @property st-global(--wds-toggle-button-square-label-font-size-medium);
1162
+ @property st-global(--wds-toggle-button-square-label-font-size-small);
1163
+ @property st-global(--wds-toggle-button-square-label-font-size-tiny);
1158
1164
  @property st-global(--wds-toggle-switch-border-error-disabled);
1159
1165
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1160
1166
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1272,8 +1278,10 @@
1272
1278
 
1273
1279
  .root {
1274
1280
  --wds-accordion-background-fill-light: #ffffff;
1275
- --wds-accordion-background-fill-light-hover: #eaefff;
1276
- --wds-accordion-border-radius: 12px;
1281
+ --wds-accordion-background-fill-light-hover: #f8f6f6;
1282
+ --wds-accordion-background-fill-standard: #ffffff;
1283
+ --wds-accordion-background-fill-standard-hover: #f8f6f6;
1284
+ --wds-accordion-border-radius: 0px;
1277
1285
  --wds-accordion-caret-fill: #151414;
1278
1286
  --wds-accordion-caret-fill-hover: #151414;
1279
1287
  --wds-accordion-inner-content-fill: #ffffff;
@@ -2362,8 +2370,8 @@
2362
2370
  --wds-toggle-button-fill-standard-selected: #eaefff;
2363
2371
  --wds-toggle-button-fill-standard-selected-disabled: #f0efef;
2364
2372
  --wds-toggle-button-fill-standard-selected-hover: #d5dfff;
2365
- --wds-toggle-button-inner-shadow-blur-primary: 2px;
2366
- --wds-toggle-button-inner-shadow-blur-secondary: 2px;
2373
+ --wds-toggle-button-inner-shadow-blur-primary: 1px;
2374
+ --wds-toggle-button-inner-shadow-blur-secondary: 1px;
2367
2375
  --wds-toggle-button-inner-shadow-fill-primary: #ffffff;
2368
2376
  --wds-toggle-button-inner-shadow-fill-secondary: #ffffff;
2369
2377
  --wds-toggle-button-inner-shadow-x-primary: 1px;
@@ -2390,8 +2398,8 @@
2390
2398
  --wds-toggle-button-label-font-line-height-round-small: 16px;
2391
2399
  --wds-toggle-button-label-font-size-round-small: 12px;
2392
2400
  --wds-toggle-button-label-font-size-square-large: 12px;
2393
- --wds-toggle-button-label-font-size-square-medium: 12px;
2394
- --wds-toggle-button-label-font-size-square-small: 12px;
2401
+ --wds-toggle-button-label-font-size-square-medium: 14px;
2402
+ --wds-toggle-button-label-font-size-square-small: 14px;
2395
2403
  --wds-toggle-button-label-font-size-square-tiny: 12px;
2396
2404
  --wds-toggle-button-label-font-weight-pill: 600;
2397
2405
  --wds-toggle-button-label-font-weight-round: 600;
@@ -2400,9 +2408,9 @@
2400
2408
  --wds-toggle-button-padding-large-round: 24px;
2401
2409
  --wds-toggle-button-padding-medium: 12px;
2402
2410
  --wds-toggle-button-padding-medium-round: 20px;
2403
- --wds-toggle-button-padding-small: 16px;
2411
+ --wds-toggle-button-padding-small: 12px;
2404
2412
  --wds-toggle-button-padding-small-round: 16px;
2405
- --wds-toggle-button-padding-tiny: 12px;
2413
+ --wds-toggle-button-padding-tiny: 8px;
2406
2414
  --wds-toggle-button-padding-tiny-round: 12px;
2407
2415
  --wds-toggle-button-shadow-blur-primary: 4px;
2408
2416
  --wds-toggle-button-shadow-blur-primary-inverted: 30px;
@@ -2428,6 +2436,10 @@
2428
2436
  --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
2429
2437
  --wds-toggle-button-shadow-y-tertiary: 0.4px;
2430
2438
  --wds-toggle-button-shadow-y-tertiary-inverted: 4px;
2439
+ --wds-toggle-button-square-label-font-size-large: 14px;
2440
+ --wds-toggle-button-square-label-font-size-medium: 14px;
2441
+ --wds-toggle-button-square-label-font-size-small: 12px;
2442
+ --wds-toggle-button-square-label-font-size-tiny: 12px;
2431
2443
  --wds-toggle-switch-border-error-disabled: rgba(19, 23, 32, 0);
2432
2444
  --wds-toggle-switch-border-standard-disabled: rgba(19, 23, 32, 0);
2433
2445
  --wds-toggle-switch-border-success-disabled: rgba(19, 23, 32, 0);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.131.1",
3
+ "version": "1.133.0",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "15c28a628db8c3a2ecad8e9e7b1d3bba0dc60f86e8574850e20a5a82"
36
+ "falconPackageHash": "9811deb3d08ec2e20e8e231c0932bbe0c89827a258258d6b8900cd4d"
37
37
  }
package/studio/all.css CHANGED
@@ -349,6 +349,8 @@
349
349
  --wds-composer-sidebar-end-max-width: 240px;
350
350
  --wds-composer-sidebar-bottom-width: 88px;
351
351
  --wds-color-picker-width: 236px;
352
+ --wds-circular-progress-bar-label-font-line-height: 18px;
353
+ --wds-circular-progress-bar-border-width: 4px;
352
354
  --wds-button-icon-offset-tiny: 12px;
353
355
  --wds-button-icon-offset-small: 12px;
354
356
  --wds-button-icon-offset-medium: 18px;
@@ -1334,6 +1336,10 @@
1334
1336
  --wds-circular-progress-bar-size-small: var(--wds-space-600);
1335
1337
  --wds-circular-progress-bar-size-medium: var(--wds-space-1300);
1336
1338
  --wds-circular-progress-bar-size-large: var(--wds-space-2400);
1339
+ --wds-circular-progress-bar-label-padding-medium: var(--wds-space-0);
1340
+ --wds-circular-progress-bar-label-padding-large: var(--wds-space-0);
1341
+ --wds-circular-progress-bar-label-font-weight: var(--wds-font-weight-bold);
1342
+ --wds-circular-progress-bar-label-font-size: var(--wds-font-size-100);
1337
1343
  --wds-circular-progress-bar-background-fill-success: var(--wds-color-fill-success-secondary-disabled);
1338
1344
  --wds-circular-progress-bar-background-fill-standard: var(--wds-color-fill-standard-secondary-disabled);
1339
1345
  --wds-circular-progress-bar-background-fill-premium: var(--wds-color-fill-premium-secondary-disabled);
@@ -1528,6 +1534,10 @@
1528
1534
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1529
1535
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1530
1536
  --wds-toggle-switch-fill-error: var(--wds-color-fill-dark-primary);
1537
+ --wds-toggle-button-square-label-font-size-tiny: var(--wds-font-size-body-tiny);
1538
+ --wds-toggle-button-square-label-font-size-small: var(--wds-font-size-body-tiny);
1539
+ --wds-toggle-button-square-label-font-size-medium: var(--wds-font-size-body-tiny);
1540
+ --wds-toggle-button-square-label-font-size-large: var(--wds-font-size-body-tiny);
1531
1541
  --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1532
1542
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1533
1543
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
@@ -1968,6 +1978,8 @@
1968
1978
  --wds-accordion-title-fill: var(--wds-color-text-standard-primary);
1969
1979
  --wds-accordion-caret-fill-hover: var(--wds-color-text-standard-secondary);
1970
1980
  --wds-accordion-caret-fill: var(--wds-color-text-standard-secondary);
1981
+ --wds-accordion-background-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
1982
+ --wds-accordion-background-fill-standard: var(--wds-color-fill-standard-tertiary);
1971
1983
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary-hover);
1972
1984
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1973
1985
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-tiny);
package/studio/all.scss CHANGED
@@ -324,6 +324,8 @@
324
324
  --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
325
325
  --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
326
326
  --wds-color-black-100: #131720;
327
+ --wds-circular-progress-bar-label-font-line-height: 18px;
328
+ --wds-circular-progress-bar-border-width: 4px;
327
329
  --wds-button-icon-offset-tiny: 12px;
328
330
  --wds-button-icon-offset-small: 12px;
329
331
  --wds-button-icon-offset-medium: 18px;
@@ -1326,6 +1328,10 @@
1326
1328
  --wds-circular-progress-bar-size-small: var(--wds-space-600);
1327
1329
  --wds-circular-progress-bar-size-medium: var(--wds-space-1300);
1328
1330
  --wds-circular-progress-bar-size-large: var(--wds-space-2400);
1331
+ --wds-circular-progress-bar-label-padding-medium: var(--wds-space-0);
1332
+ --wds-circular-progress-bar-label-padding-large: var(--wds-space-0);
1333
+ --wds-circular-progress-bar-label-font-weight: var(--wds-font-weight-bold);
1334
+ --wds-circular-progress-bar-label-font-size: var(--wds-font-size-100);
1329
1335
  --wds-circular-progress-bar-background-fill-success: var(--wds-color-fill-success-secondary-disabled);
1330
1336
  --wds-circular-progress-bar-background-fill-standard: var(--wds-color-fill-standard-secondary-disabled);
1331
1337
  --wds-circular-progress-bar-background-fill-premium: var(--wds-color-fill-premium-secondary-disabled);
@@ -1512,6 +1518,10 @@
1512
1518
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1513
1519
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1514
1520
  --wds-toggle-switch-fill-error: var(--wds-color-fill-dark-primary);
1521
+ --wds-toggle-button-square-label-font-size-tiny: var(--wds-font-size-body-tiny);
1522
+ --wds-toggle-button-square-label-font-size-small: var(--wds-font-size-body-tiny);
1523
+ --wds-toggle-button-square-label-font-size-medium: var(--wds-font-size-body-tiny);
1524
+ --wds-toggle-button-square-label-font-size-large: var(--wds-font-size-body-tiny);
1515
1525
  --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1516
1526
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1517
1527
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
@@ -1968,6 +1978,8 @@
1968
1978
  --wds-accordion-title-fill: var(--wds-color-text-standard-primary);
1969
1979
  --wds-accordion-caret-fill-hover: var(--wds-color-text-standard-secondary);
1970
1980
  --wds-accordion-caret-fill: var(--wds-color-text-standard-secondary);
1981
+ --wds-accordion-background-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
1982
+ --wds-accordion-background-fill-standard: var(--wds-color-fill-standard-tertiary);
1971
1983
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary-hover);
1972
1984
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1973
1985
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-tiny);
package/studio/all.st.css CHANGED
@@ -1,5 +1,7 @@
1
1
  @property st-global(--wds-accordion-background-fill-light);
2
2
  @property st-global(--wds-accordion-background-fill-light-hover);
3
+ @property st-global(--wds-accordion-background-fill-standard);
4
+ @property st-global(--wds-accordion-background-fill-standard-hover);
3
5
  @property st-global(--wds-accordion-border-radius);
4
6
  @property st-global(--wds-accordion-caret-fill);
5
7
  @property st-global(--wds-accordion-caret-fill-hover);
@@ -292,10 +294,16 @@
292
294
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
293
295
  @property st-global(--wds-circular-progress-bar-background-fill-standard);
294
296
  @property st-global(--wds-circular-progress-bar-background-fill-success);
297
+ @property st-global(--wds-circular-progress-bar-border-width);
295
298
  @property st-global(--wds-circular-progress-bar-foreground-fill-error);
296
299
  @property st-global(--wds-circular-progress-bar-foreground-fill-premium);
297
300
  @property st-global(--wds-circular-progress-bar-foreground-fill-standard);
298
301
  @property st-global(--wds-circular-progress-bar-foreground-fill-success);
302
+ @property st-global(--wds-circular-progress-bar-label-font-line-height);
303
+ @property st-global(--wds-circular-progress-bar-label-font-size);
304
+ @property st-global(--wds-circular-progress-bar-label-font-weight);
305
+ @property st-global(--wds-circular-progress-bar-label-padding-large);
306
+ @property st-global(--wds-circular-progress-bar-label-padding-medium);
299
307
  @property st-global(--wds-circular-progress-bar-size-large);
300
308
  @property st-global(--wds-circular-progress-bar-size-medium);
301
309
  @property st-global(--wds-circular-progress-bar-size-small);
@@ -1889,6 +1897,10 @@
1889
1897
  @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1890
1898
  @property st-global(--wds-toggle-button-shadow-y-tertiary);
1891
1899
  @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1900
+ @property st-global(--wds-toggle-button-square-label-font-size-large);
1901
+ @property st-global(--wds-toggle-button-square-label-font-size-medium);
1902
+ @property st-global(--wds-toggle-button-square-label-font-size-small);
1903
+ @property st-global(--wds-toggle-button-square-label-font-size-tiny);
1892
1904
  @property st-global(--wds-toggle-switch-border-error-disabled);
1893
1905
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1894
1906
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -2021,6 +2033,8 @@
2021
2033
  .root {
2022
2034
  --wds-accordion-background-fill-light: #ffffff;
2023
2035
  --wds-accordion-background-fill-light-hover: #f7f8f8;
2036
+ --wds-accordion-background-fill-standard: #ffffff;
2037
+ --wds-accordion-background-fill-standard-hover: #f7f8f8;
2024
2038
  --wds-accordion-border-radius: 0px;
2025
2039
  --wds-accordion-caret-fill: #42454c;
2026
2040
  --wds-accordion-caret-fill-hover: #42454c;
@@ -2313,10 +2327,16 @@
2313
2327
  --wds-circular-progress-bar-background-fill-premium: #e5e5e5;
2314
2328
  --wds-circular-progress-bar-background-fill-standard: #e5e5e5;
2315
2329
  --wds-circular-progress-bar-background-fill-success: #e5e5e5;
2330
+ --wds-circular-progress-bar-border-width: 4px;
2316
2331
  --wds-circular-progress-bar-foreground-fill-error: #ee4437;
2317
2332
  --wds-circular-progress-bar-foreground-fill-premium: #9a27d5;
2318
2333
  --wds-circular-progress-bar-foreground-fill-standard: #116dff;
2319
2334
  --wds-circular-progress-bar-foreground-fill-success: #25a55a;
2335
+ --wds-circular-progress-bar-label-font-line-height: 18px;
2336
+ --wds-circular-progress-bar-label-font-size: 11px;
2337
+ --wds-circular-progress-bar-label-font-weight: 700;
2338
+ --wds-circular-progress-bar-label-padding-large: 0px;
2339
+ --wds-circular-progress-bar-label-padding-medium: 0px;
2320
2340
  --wds-circular-progress-bar-size-large: 96px;
2321
2341
  --wds-circular-progress-bar-size-medium: 52px;
2322
2342
  --wds-circular-progress-bar-size-small: 24px;
@@ -3910,6 +3930,10 @@
3910
3930
  --wds-toggle-button-shadow-y-secondary-inverted: 0px;
3911
3931
  --wds-toggle-button-shadow-y-tertiary: 0px;
3912
3932
  --wds-toggle-button-shadow-y-tertiary-inverted: 0px;
3933
+ --wds-toggle-button-square-label-font-size-large: 12px;
3934
+ --wds-toggle-button-square-label-font-size-medium: 12px;
3935
+ --wds-toggle-button-square-label-font-size-small: 12px;
3936
+ --wds-toggle-button-square-label-font-size-tiny: 12px;
3913
3937
  --wds-toggle-switch-border-error-disabled: rgba(19, 23, 32, 0);
3914
3938
  --wds-toggle-switch-border-standard-disabled: rgba(19, 23, 32, 0);
3915
3939
  --wds-toggle-switch-border-success-disabled: rgba(19, 23, 32, 0);
package/studio/component.st.css CHANGED
@@ -1,5 +1,7 @@
1
1
  @property st-global(--wds-accordion-background-fill-light);
2
2
  @property st-global(--wds-accordion-background-fill-light-hover);
3
+ @property st-global(--wds-accordion-background-fill-standard);
4
+ @property st-global(--wds-accordion-background-fill-standard-hover);
3
5
  @property st-global(--wds-accordion-border-radius);
4
6
  @property st-global(--wds-accordion-caret-fill);
5
7
  @property st-global(--wds-accordion-caret-fill-hover);
@@ -259,10 +261,16 @@
259
261
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
260
262
  @property st-global(--wds-circular-progress-bar-background-fill-standard);
261
263
  @property st-global(--wds-circular-progress-bar-background-fill-success);
264
+ @property st-global(--wds-circular-progress-bar-border-width);
262
265
  @property st-global(--wds-circular-progress-bar-foreground-fill-error);
263
266
  @property st-global(--wds-circular-progress-bar-foreground-fill-premium);
264
267
  @property st-global(--wds-circular-progress-bar-foreground-fill-standard);
265
268
  @property st-global(--wds-circular-progress-bar-foreground-fill-success);
269
+ @property st-global(--wds-circular-progress-bar-label-font-line-height);
270
+ @property st-global(--wds-circular-progress-bar-label-font-size);
271
+ @property st-global(--wds-circular-progress-bar-label-font-weight);
272
+ @property st-global(--wds-circular-progress-bar-label-padding-large);
273
+ @property st-global(--wds-circular-progress-bar-label-padding-medium);
266
274
  @property st-global(--wds-circular-progress-bar-size-large);
267
275
  @property st-global(--wds-circular-progress-bar-size-medium);
268
276
  @property st-global(--wds-circular-progress-bar-size-small);
@@ -1179,6 +1187,10 @@
1179
1187
  @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1180
1188
  @property st-global(--wds-toggle-button-shadow-y-tertiary);
1181
1189
  @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1190
+ @property st-global(--wds-toggle-button-square-label-font-size-large);
1191
+ @property st-global(--wds-toggle-button-square-label-font-size-medium);
1192
+ @property st-global(--wds-toggle-button-square-label-font-size-small);
1193
+ @property st-global(--wds-toggle-button-square-label-font-size-tiny);
1182
1194
  @property st-global(--wds-toggle-switch-border-error-disabled);
1183
1195
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1184
1196
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1309,6 +1321,8 @@
1309
1321
  .root {
1310
1322
  --wds-accordion-background-fill-light: #ffffff;
1311
1323
  --wds-accordion-background-fill-light-hover: #f7f8f8;
1324
+ --wds-accordion-background-fill-standard: #ffffff;
1325
+ --wds-accordion-background-fill-standard-hover: #f7f8f8;
1312
1326
  --wds-accordion-border-radius: 0px;
1313
1327
  --wds-accordion-caret-fill: #42454c;
1314
1328
  --wds-accordion-caret-fill-hover: #42454c;
@@ -1568,10 +1582,16 @@
1568
1582
  --wds-circular-progress-bar-background-fill-premium: #e5e5e5;
1569
1583
  --wds-circular-progress-bar-background-fill-standard: #e5e5e5;
1570
1584
  --wds-circular-progress-bar-background-fill-success: #e5e5e5;
1585
+ --wds-circular-progress-bar-border-width: 4px;
1571
1586
  --wds-circular-progress-bar-foreground-fill-error: #ee4437;
1572
1587
  --wds-circular-progress-bar-foreground-fill-premium: #9a27d5;
1573
1588
  --wds-circular-progress-bar-foreground-fill-standard: #116dff;
1574
1589
  --wds-circular-progress-bar-foreground-fill-success: #25a55a;
1590
+ --wds-circular-progress-bar-label-font-line-height: 18px;
1591
+ --wds-circular-progress-bar-label-font-size: 11px;
1592
+ --wds-circular-progress-bar-label-font-weight: 700;
1593
+ --wds-circular-progress-bar-label-padding-large: 0px;
1594
+ --wds-circular-progress-bar-label-padding-medium: 0px;
1575
1595
  --wds-circular-progress-bar-size-large: 96px;
1576
1596
  --wds-circular-progress-bar-size-medium: 52px;
1577
1597
  --wds-circular-progress-bar-size-small: 24px;
@@ -2488,6 +2508,10 @@
2488
2508
  --wds-toggle-button-shadow-y-secondary-inverted: 0px;
2489
2509
  --wds-toggle-button-shadow-y-tertiary: 0px;
2490
2510
  --wds-toggle-button-shadow-y-tertiary-inverted: 0px;
2511
+ --wds-toggle-button-square-label-font-size-large: 12px;
2512
+ --wds-toggle-button-square-label-font-size-medium: 12px;
2513
+ --wds-toggle-button-square-label-font-size-small: 12px;
2514
+ --wds-toggle-button-square-label-font-size-tiny: 12px;
2491
2515
  --wds-toggle-switch-border-error-disabled: rgba(19, 23, 32, 0);
2492
2516
  --wds-toggle-switch-border-standard-disabled: rgba(19, 23, 32, 0);
2493
2517
  --wds-toggle-switch-border-success-disabled: rgba(19, 23, 32, 0);
package/wixel/all.css CHANGED
@@ -1496,6 +1496,10 @@
1496
1496
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1497
1497
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1498
1498
  --wds-toggle-switch-fill-error: var(--wds-color-fill-dark-primary);
1499
+ --wds-toggle-button-square-label-font-size-tiny: var(--wds-font-size-body-tiny);
1500
+ --wds-toggle-button-square-label-font-size-small: var(--wds-font-size-body-tiny);
1501
+ --wds-toggle-button-square-label-font-size-medium: var(--wds-font-size-body-tiny);
1502
+ --wds-toggle-button-square-label-font-size-large: var(--wds-font-size-body-tiny);
1499
1503
  --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1500
1504
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1501
1505
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
@@ -1933,6 +1937,8 @@
1933
1937
  --wds-accordion-title-fill: var(--wds-color-text-standard-primary);
1934
1938
  --wds-accordion-caret-fill-hover: var(--wds-color-text-primary);
1935
1939
  --wds-accordion-caret-fill: var(--wds-color-text-standard-primary);
1940
+ --wds-accordion-background-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
1941
+ --wds-accordion-background-fill-standard: var(--wds-color-fill-standard-tertiary);
1936
1942
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary);
1937
1943
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1938
1944
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-tiny);
package/wixel/all.scss CHANGED
@@ -1482,6 +1482,10 @@
1482
1482
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1483
1483
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1484
1484
  --wds-toggle-switch-fill-error: var(--wds-color-fill-dark-primary);
1485
+ --wds-toggle-button-square-label-font-size-tiny: var(--wds-font-size-body-tiny);
1486
+ --wds-toggle-button-square-label-font-size-small: var(--wds-font-size-body-tiny);
1487
+ --wds-toggle-button-square-label-font-size-medium: var(--wds-font-size-body-tiny);
1488
+ --wds-toggle-button-square-label-font-size-large: var(--wds-font-size-body-tiny);
1485
1489
  --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1486
1490
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1487
1491
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
@@ -1933,6 +1937,8 @@
1933
1937
  --wds-accordion-title-fill: var(--wds-color-text-standard-primary);
1934
1938
  --wds-accordion-caret-fill-hover: var(--wds-color-text-primary);
1935
1939
  --wds-accordion-caret-fill: var(--wds-color-text-standard-primary);
1940
+ --wds-accordion-background-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
1941
+ --wds-accordion-background-fill-standard: var(--wds-color-fill-standard-tertiary);
1936
1942
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary);
1937
1943
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1938
1944
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-tiny);
package/wixel/all.st.css CHANGED
@@ -1,5 +1,7 @@
1
1
  @property st-global(--wds-accordion-background-fill-light);
2
2
  @property st-global(--wds-accordion-background-fill-light-hover);
3
+ @property st-global(--wds-accordion-background-fill-standard);
4
+ @property st-global(--wds-accordion-background-fill-standard-hover);
3
5
  @property st-global(--wds-accordion-border-radius);
4
6
  @property st-global(--wds-accordion-caret-fill);
5
7
  @property st-global(--wds-accordion-caret-fill-hover);
@@ -1860,6 +1862,10 @@
1860
1862
  @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1861
1863
  @property st-global(--wds-toggle-button-shadow-y-tertiary);
1862
1864
  @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1865
+ @property st-global(--wds-toggle-button-square-label-font-size-large);
1866
+ @property st-global(--wds-toggle-button-square-label-font-size-medium);
1867
+ @property st-global(--wds-toggle-button-square-label-font-size-small);
1868
+ @property st-global(--wds-toggle-button-square-label-font-size-tiny);
1863
1869
  @property st-global(--wds-toggle-switch-border-error-disabled);
1864
1870
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1865
1871
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1992,6 +1998,8 @@
1992
1998
  .root {
1993
1999
  --wds-accordion-background-fill-light: #ffffff;
1994
2000
  --wds-accordion-background-fill-light-hover: #ffffff;
2001
+ --wds-accordion-background-fill-standard: #ffffff;
2002
+ --wds-accordion-background-fill-standard-hover: #f4f6ff;
1995
2003
  --wds-accordion-border-radius: 0px;
1996
2004
  --wds-accordion-caret-fill: #000624;
1997
2005
  --wds-accordion-caret-fill-hover: #4a57ff;
@@ -3852,6 +3860,10 @@
3852
3860
  --wds-toggle-button-shadow-y-secondary-inverted: 0px;
3853
3861
  --wds-toggle-button-shadow-y-tertiary: 0px;
3854
3862
  --wds-toggle-button-shadow-y-tertiary-inverted: 0px;
3863
+ --wds-toggle-button-square-label-font-size-large: 12px;
3864
+ --wds-toggle-button-square-label-font-size-medium: 12px;
3865
+ --wds-toggle-button-square-label-font-size-small: 12px;
3866
+ --wds-toggle-button-square-label-font-size-tiny: 12px;
3855
3867
  --wds-toggle-switch-border-error-disabled: rgba(38, 37, 36, 0.0000);
3856
3868
  --wds-toggle-switch-border-standard-disabled: rgba(38, 37, 36, 0.0000);
3857
3869
  --wds-toggle-switch-border-success-disabled: rgba(38, 37, 36, 0.0000);
package/wixel/component.st.css CHANGED
@@ -1,5 +1,7 @@
1
1
  @property st-global(--wds-accordion-background-fill-light);
2
2
  @property st-global(--wds-accordion-background-fill-light-hover);
3
+ @property st-global(--wds-accordion-background-fill-standard);
4
+ @property st-global(--wds-accordion-background-fill-standard-hover);
3
5
  @property st-global(--wds-accordion-border-radius);
4
6
  @property st-global(--wds-accordion-caret-fill);
5
7
  @property st-global(--wds-accordion-caret-fill-hover);
@@ -1162,6 +1164,10 @@
1162
1164
  @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1163
1165
  @property st-global(--wds-toggle-button-shadow-y-tertiary);
1164
1166
  @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1167
+ @property st-global(--wds-toggle-button-square-label-font-size-large);
1168
+ @property st-global(--wds-toggle-button-square-label-font-size-medium);
1169
+ @property st-global(--wds-toggle-button-square-label-font-size-small);
1170
+ @property st-global(--wds-toggle-button-square-label-font-size-tiny);
1165
1171
  @property st-global(--wds-toggle-switch-border-error-disabled);
1166
1172
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1167
1173
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1292,6 +1298,8 @@
1292
1298
  .root {
1293
1299
  --wds-accordion-background-fill-light: #ffffff;
1294
1300
  --wds-accordion-background-fill-light-hover: #ffffff;
1301
+ --wds-accordion-background-fill-standard: #ffffff;
1302
+ --wds-accordion-background-fill-standard-hover: #f4f6ff;
1295
1303
  --wds-accordion-border-radius: 0px;
1296
1304
  --wds-accordion-caret-fill: #000624;
1297
1305
  --wds-accordion-caret-fill-hover: #4a57ff;
@@ -2454,6 +2462,10 @@
2454
2462
  --wds-toggle-button-shadow-y-secondary-inverted: 0px;
2455
2463
  --wds-toggle-button-shadow-y-tertiary: 0px;
2456
2464
  --wds-toggle-button-shadow-y-tertiary-inverted: 0px;
2465
+ --wds-toggle-button-square-label-font-size-large: 12px;
2466
+ --wds-toggle-button-square-label-font-size-medium: 12px;
2467
+ --wds-toggle-button-square-label-font-size-small: 12px;
2468
+ --wds-toggle-button-square-label-font-size-tiny: 12px;
2457
2469
  --wds-toggle-switch-border-error-disabled: rgba(38, 37, 36, 0.0000);
2458
2470
  --wds-toggle-switch-border-standard-disabled: rgba(38, 37, 36, 0.0000);
2459
2471
  --wds-toggle-switch-border-success-disabled: rgba(38, 37, 36, 0.0000);