@wix/design-system-tokens 1.122.0 → 1.123.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 (19) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +16 -0
  3. package/all.css +3 -0
  4. package/all.scss +13 -2
  5. package/all.st.css +6 -0
  6. package/component.st.css +6 -0
  7. package/odeditor/all.css +5 -2
  8. package/odeditor/all.scss +26 -14
  9. package/odeditor/all.st.css +8 -2
  10. package/odeditor/component.st.css +8 -2
  11. package/package.json +3 -3
  12. package/studio/all.css +5 -2
  13. package/studio/all.scss +15 -4
  14. package/studio/all.st.css +8 -2
  15. package/studio/component.st.css +8 -2
  16. package/wixel/all.css +5 -2
  17. package/wixel/all.scss +15 -4
  18. package/wixel/all.st.css +8 -2
  19. package/wixel/component.st.css +8 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## 1.123.0 - 2025-07-30
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(Checkbox): editor3 tokenization [15119](https://github.com/wix-private/wix-design-systems/pull/15119)
6
+
7
+ ### Bug Fixes
8
+
9
+ - fix(BaseCalendar): small size weekdays alignment [15139](https://github.com/wix-private/wix-design-systems/pull/15139)
10
+
1
11
  ## 1.122.0 - 2025-07-25
2
12
 
3
13
  ### Visual Breaking Changes
package/README.md CHANGED
@@ -73,3 +73,19 @@ box-shadow: var(--wds-shadow-focus-warning);
73
73
  ### `size/px-custom`
74
74
 
75
75
  Only applies to tokens which have attribute `"type": "float"`. Adds `px` unit to token values.
76
+
77
+
78
+ ## Scoped styling - sass mixin tokens
79
+ `@mixin tokens` has been introduced to accomplish scoped styling within the same HTML document.
80
+
81
+ ### Usage
82
+ ```sass
83
+ @use "@wix/design-system-tokens/all.scss" as wds;
84
+ // @use "@wix/design-system-tokens/studio/all.scss" as wds;
85
+ // @use "@wix/design-system-tokens/wixel/all.scss" as wds;
86
+ // @use "@wix/design-system-tokens/odeditor/all.scss" as wds;
87
+
88
+ .scoped {
89
+ @include wds.tokens;
90
+ }
91
+ ```
package/all.css CHANGED
@@ -1671,6 +1671,8 @@
1671
1671
  --wds-circular-progress-bar-background-fill-premium: var(--wds-color-fill-premium-secondary);
1672
1672
  --wds-circular-progress-bar-background-fill-error: var(--wds-color-fill-destructive-secondary);
1673
1673
  --wds-checkbox-label-font-size-small: var(--wds-font-size-body-small);
1674
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-medium);
1675
+ --wds-checkbox-label-disabled: var(--wds-color-text-standard-primary);
1674
1676
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled);
1675
1677
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1676
1678
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1803,6 +1805,7 @@
1803
1805
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-medium);
1804
1806
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-small);
1805
1807
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
1808
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1806
1809
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1807
1810
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-small);
1808
1811
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/all.scss CHANGED
@@ -425,8 +425,14 @@
425
425
  --wds-tabs-padding-vertical-medium: var(--wds-space-300);
426
426
  --wds-tabs-padding-horizontal-small: var(--wds-space-200);
427
427
  --wds-tabs-padding-horizontal-medium: var(--wds-space-300);
428
- --wds-tabs-gap-small: var(--wds-space-100);
429
- --wds-tabs-gap-medium: var(--wds-space-100);
428
+ --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
429
+ --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
430
+ --wds-tabs-item-gap-small: var(--wds-space-100);
431
+ --wds-tabs-item-gap-medium: var(--wds-space-100);
432
+ --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
433
+ --wds-tabs-item-fill-active: var(--wds-color-black-100-transparent-0);
434
+ --wds-tabs-gap-horizontal: var(--wds-space-0);
435
+ --wds-tabs-border-radius: var(--wds-border-radius-0);
430
436
  --wds-table-toolbar-padding-horizontal: var(--wds-space-400);
431
437
  --wds-table-list-item-paddings: var(--wds-space-0);
432
438
  --wds-table-list-item-indentation-level-3: var(--wds-space-600);
@@ -1385,6 +1391,8 @@
1385
1391
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1386
1392
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1387
1393
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1394
+ --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1395
+ --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1388
1396
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1389
1397
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1390
1398
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
@@ -1663,6 +1671,8 @@
1663
1671
  --wds-circular-progress-bar-background-fill-premium: var(--wds-color-fill-premium-secondary);
1664
1672
  --wds-circular-progress-bar-background-fill-error: var(--wds-color-fill-destructive-secondary);
1665
1673
  --wds-checkbox-label-font-size-small: var(--wds-font-size-body-small);
1674
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-medium);
1675
+ --wds-checkbox-label-disabled: var(--wds-color-text-standard-primary);
1666
1676
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled);
1667
1677
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1668
1678
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1795,6 +1805,7 @@
1795
1805
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-medium);
1796
1806
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-small);
1797
1807
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
1808
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1798
1809
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1799
1810
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-small);
1800
1811
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/all.st.css CHANGED
@@ -234,7 +234,10 @@
234
234
  @property st-global(--wds-checkbox-group-gap-vertical);
235
235
  @property st-global(--wds-checkbox-icon);
236
236
  @property st-global(--wds-checkbox-icon-disabled);
237
+ @property st-global(--wds-checkbox-label-disabled);
238
+ @property st-global(--wds-checkbox-label-font-line-height-medium);
237
239
  @property st-global(--wds-checkbox-label-font-line-height-small);
240
+ @property st-global(--wds-checkbox-label-font-size-medium);
238
241
  @property st-global(--wds-checkbox-label-font-size-small);
239
242
  @property st-global(--wds-circular-progress-bar-background-fill-error);
240
243
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
@@ -2050,7 +2053,10 @@
2050
2053
  --wds-checkbox-group-gap-vertical: 12px;
2051
2054
  --wds-checkbox-icon: #ffffff;
2052
2055
  --wds-checkbox-icon-disabled: rgba(0, 6, 36, .3);
2056
+ --wds-checkbox-label-disabled: #000624;
2057
+ --wds-checkbox-label-font-line-height-medium: 24px;
2053
2058
  --wds-checkbox-label-font-line-height-small: 18px;
2059
+ --wds-checkbox-label-font-size-medium: 16px;
2054
2060
  --wds-checkbox-label-font-size-small: 14px;
2055
2061
  --wds-circular-progress-bar-background-fill-error: #fbd0cd;
2056
2062
  --wds-circular-progress-bar-background-fill-premium: #e3c3f4;
package/component.st.css CHANGED
@@ -202,7 +202,10 @@
202
202
  @property st-global(--wds-checkbox-group-gap-vertical);
203
203
  @property st-global(--wds-checkbox-icon);
204
204
  @property st-global(--wds-checkbox-icon-disabled);
205
+ @property st-global(--wds-checkbox-label-disabled);
206
+ @property st-global(--wds-checkbox-label-font-line-height-medium);
205
207
  @property st-global(--wds-checkbox-label-font-line-height-small);
208
+ @property st-global(--wds-checkbox-label-font-size-medium);
206
209
  @property st-global(--wds-checkbox-label-font-size-small);
207
210
  @property st-global(--wds-circular-progress-bar-background-fill-error);
208
211
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
@@ -1335,7 +1338,10 @@
1335
1338
  --wds-checkbox-group-gap-vertical: 12px;
1336
1339
  --wds-checkbox-icon: #ffffff;
1337
1340
  --wds-checkbox-icon-disabled: rgba(0, 6, 36, .3);
1341
+ --wds-checkbox-label-disabled: #000624;
1342
+ --wds-checkbox-label-font-line-height-medium: 24px;
1338
1343
  --wds-checkbox-label-font-line-height-small: 18px;
1344
+ --wds-checkbox-label-font-size-medium: 16px;
1339
1345
  --wds-checkbox-label-font-size-small: 14px;
1340
1346
  --wds-circular-progress-bar-background-fill-error: #fbd0cd;
1341
1347
  --wds-circular-progress-bar-background-fill-premium: #e3c3f4;
package/odeditor/all.css CHANGED
@@ -1663,6 +1663,8 @@
1663
1663
  --wds-circular-progress-bar-background-fill-premium: var(--wds-color-fill-premium-secondary-disabled);
1664
1664
  --wds-circular-progress-bar-background-fill-error: var(--wds-color-fill-destructive-secondary-disabled);
1665
1665
  --wds-checkbox-label-font-size-small: var(--wds-font-size-body-tiny);
1666
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-small);
1667
+ --wds-checkbox-label-disabled: var(--wds-color-text-disabled);
1666
1668
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled-light);
1667
1669
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1668
1670
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-tertiary);
@@ -1673,7 +1675,7 @@
1673
1675
  --wds-checkbox-fill: var(--wds-color-fill-standard-tertiary);
1674
1676
  --wds-checkbox-border-hover: var(--wds-color-fill-standard-primary);
1675
1677
  --wds-checkbox-border-disabled: var(--wds-color-border-dark-primary-disabled);
1676
- --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1678
+ --wds-checkbox-border-active: var(--wds-color-border-standard-primary-active);
1677
1679
  --wds-checkbox-border: var(--wds-color-border-dark-primary);
1678
1680
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-medium);
1679
1681
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
@@ -1794,7 +1796,8 @@
1794
1796
  --wds-field-set-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1795
1797
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-small);
1796
1798
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
1797
- --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-extra-tiny);
1799
+ --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1800
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-small);
1798
1801
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
1799
1802
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
1800
1803
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/odeditor/all.scss CHANGED
@@ -413,12 +413,21 @@
413
413
  --wds-tag-border-radius-small: var(--wds-border-radius-200);
414
414
  --wds-tag-border-radius-medium: var(--wds-border-radius-200);
415
415
  --wds-tag-border-radius-large: var(--wds-border-radius-200);
416
- --wds-tabs-padding-vertical-small: var(--wds-space-300);
417
- --wds-tabs-padding-vertical-medium: var(--wds-space-400);
418
- --wds-tabs-padding-horizontal-small: var(--wds-space-300);
416
+ --wds-tabs-selection-fill-secondary: var(--wds-color-black-100-transparent-0);
417
+ --wds-tabs-selection-fill-primary: var(--wds-color-black-100-transparent-0);
418
+ --wds-tabs-selection-border: var(--wds-color-black-100-transparent-0);
419
+ --wds-tabs-padding-vertical-small: var(--wds-space-100);
420
+ --wds-tabs-padding-vertical-medium: var(--wds-space-200);
421
+ --wds-tabs-padding-horizontal-small: var(--wds-space-200);
419
422
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
420
- --wds-tabs-gap-small: var(--wds-space-150);
421
- --wds-tabs-gap-medium: var(--wds-space-200);
423
+ --wds-tabs-label-font-weight-active: var(--wds-font-weight-semi-bold);
424
+ --wds-tabs-label-font-weight: var(--wds-font-weight-medium);
425
+ --wds-tabs-label-fill: var(--wds-color-black-300);
426
+ --wds-tabs-item-gap-small: var(--wds-space-150);
427
+ --wds-tabs-item-gap-medium: var(--wds-space-200);
428
+ --wds-tabs-item-fill-hover: var(--wds-color-black-750);
429
+ --wds-tabs-gap-horizontal: var(--wds-space-100);
430
+ --wds-tabs-border-radius: var(--wds-border-radius-300);
422
431
  --wds-table-toolbar-padding-horizontal: var(--wds-space-600);
423
432
  --wds-table-list-item-paddings: var(--wds-space-0);
424
433
  --wds-table-list-item-indentation-level-3: var(--wds-space-700);
@@ -1411,9 +1420,9 @@
1411
1420
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1412
1421
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1413
1422
  --wds-tag-label-font-line-height-small: var(--wds-font-size-body-tiny);
1414
- --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1415
- --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1416
- --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1423
+ --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1424
+ --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1425
+ --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1417
1426
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1418
1427
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1419
1428
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
@@ -1616,9 +1625,9 @@
1616
1625
  --wds-font-line-height-heading-3: var(--wds-font-line-height-400);
1617
1626
  --wds-font-line-height-heading-2: var(--wds-font-line-height-400);
1618
1627
  --wds-font-line-height-heading-1: var(--wds-font-line-height-500);
1619
- --wds-font-line-height-body-tiny: var(--wds-font-line-height-100);
1620
- --wds-font-line-height-body-small: var(--wds-font-line-height-200);
1621
- --wds-font-line-height-body-medium: var(--wds-font-line-height-300);
1628
+ --wds-font-line-height-body-tiny: var(--wds-font-line-height-200);
1629
+ --wds-font-line-height-body-small: var(--wds-font-line-height-300);
1630
+ --wds-font-line-height-body-medium: var(--wds-font-line-height-400);
1622
1631
  --wds-font-line-height-body-extra-tiny: var(--wds-font-line-height-100);
1623
1632
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1624
1633
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
@@ -1654,6 +1663,8 @@
1654
1663
  --wds-circular-progress-bar-background-fill-premium: var(--wds-color-fill-premium-secondary-disabled);
1655
1664
  --wds-circular-progress-bar-background-fill-error: var(--wds-color-fill-destructive-secondary-disabled);
1656
1665
  --wds-checkbox-label-font-size-small: var(--wds-font-size-body-tiny);
1666
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-small);
1667
+ --wds-checkbox-label-disabled: var(--wds-color-text-disabled);
1657
1668
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled-light);
1658
1669
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1659
1670
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-tertiary);
@@ -1664,7 +1675,7 @@
1664
1675
  --wds-checkbox-fill: var(--wds-color-fill-standard-tertiary);
1665
1676
  --wds-checkbox-border-hover: var(--wds-color-fill-standard-primary);
1666
1677
  --wds-checkbox-border-disabled: var(--wds-color-border-dark-primary-disabled);
1667
- --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1678
+ --wds-checkbox-border-active: var(--wds-color-border-standard-primary-active);
1668
1679
  --wds-checkbox-border: var(--wds-color-border-dark-primary);
1669
1680
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-medium);
1670
1681
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
@@ -1757,7 +1768,7 @@
1757
1768
  --wds-timeline-title-font-line-height: var(--wds-font-line-height-body-tiny);
1758
1769
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1759
1770
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1760
- --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
1771
+ --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
1761
1772
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
1762
1773
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
1763
1774
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-heading-3);
@@ -1785,7 +1796,8 @@
1785
1796
  --wds-field-set-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1786
1797
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-small);
1787
1798
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
1788
- --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-extra-tiny);
1799
+ --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1800
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-small);
1789
1801
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
1790
1802
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
1791
1803
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/odeditor/all.st.css CHANGED
@@ -278,7 +278,10 @@
278
278
  @property st-global(--wds-checkbox-group-gap-vertical);
279
279
  @property st-global(--wds-checkbox-icon);
280
280
  @property st-global(--wds-checkbox-icon-disabled);
281
+ @property st-global(--wds-checkbox-label-disabled);
282
+ @property st-global(--wds-checkbox-label-font-line-height-medium);
281
283
  @property st-global(--wds-checkbox-label-font-line-height-small);
284
+ @property st-global(--wds-checkbox-label-font-size-medium);
282
285
  @property st-global(--wds-checkbox-label-font-size-small);
283
286
  @property st-global(--wds-circular-progress-bar-background-fill-error);
284
287
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
@@ -2074,7 +2077,7 @@
2074
2077
  --wds-card-tab-padding-vertical-medium: 16px;
2075
2078
  --wds-card-tab-padding-vertical-small: 16px;
2076
2079
  --wds-checkbox-border: #767574;
2077
- --wds-checkbox-border-active: #7896ff;
2080
+ --wds-checkbox-border-active: #2f5dff;
2078
2081
  --wds-checkbox-border-active-disabled: rgba(19, 23, 32, 0);
2079
2082
  --wds-checkbox-border-active-hover: rgba(19, 23, 32, 0);
2080
2083
  --wds-checkbox-border-disabled: rgba(19, 23, 32, .1);
@@ -2089,7 +2092,10 @@
2089
2092
  --wds-checkbox-group-gap-vertical: 12px;
2090
2093
  --wds-checkbox-icon: #ffffff;
2091
2094
  --wds-checkbox-icon-disabled: rgba(255, 255, 255, .7);
2092
- --wds-checkbox-label-font-line-height-small: 12px;
2095
+ --wds-checkbox-label-disabled: #a8a6a5;
2096
+ --wds-checkbox-label-font-line-height-medium: 18px;
2097
+ --wds-checkbox-label-font-line-height-small: 16px;
2098
+ --wds-checkbox-label-font-size-medium: 14px;
2093
2099
  --wds-checkbox-label-font-size-small: 12px;
2094
2100
  --wds-circular-progress-bar-background-fill-error: rgba(19, 23, 32, .1);
2095
2101
  --wds-circular-progress-bar-background-fill-premium: rgba(19, 23, 32, .1);
package/odeditor/component.st.css CHANGED
@@ -246,7 +246,10 @@
246
246
  @property st-global(--wds-checkbox-group-gap-vertical);
247
247
  @property st-global(--wds-checkbox-icon);
248
248
  @property st-global(--wds-checkbox-icon-disabled);
249
+ @property st-global(--wds-checkbox-label-disabled);
250
+ @property st-global(--wds-checkbox-label-font-line-height-medium);
249
251
  @property st-global(--wds-checkbox-label-font-line-height-small);
252
+ @property st-global(--wds-checkbox-label-font-size-medium);
250
253
  @property st-global(--wds-checkbox-label-font-size-small);
251
254
  @property st-global(--wds-circular-progress-bar-background-fill-error);
252
255
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
@@ -1363,7 +1366,7 @@
1363
1366
  --wds-card-tab-padding-vertical-medium: 16px;
1364
1367
  --wds-card-tab-padding-vertical-small: 16px;
1365
1368
  --wds-checkbox-border: #767574;
1366
- --wds-checkbox-border-active: #7896ff;
1369
+ --wds-checkbox-border-active: #2f5dff;
1367
1370
  --wds-checkbox-border-active-disabled: rgba(19, 23, 32, 0);
1368
1371
  --wds-checkbox-border-active-hover: rgba(19, 23, 32, 0);
1369
1372
  --wds-checkbox-border-disabled: rgba(19, 23, 32, .1);
@@ -1378,7 +1381,10 @@
1378
1381
  --wds-checkbox-group-gap-vertical: 12px;
1379
1382
  --wds-checkbox-icon: #ffffff;
1380
1383
  --wds-checkbox-icon-disabled: rgba(255, 255, 255, .7);
1381
- --wds-checkbox-label-font-line-height-small: 12px;
1384
+ --wds-checkbox-label-disabled: #a8a6a5;
1385
+ --wds-checkbox-label-font-line-height-medium: 18px;
1386
+ --wds-checkbox-label-font-line-height-small: 16px;
1387
+ --wds-checkbox-label-font-size-medium: 14px;
1382
1388
  --wds-checkbox-label-font-size-small: 12px;
1383
1389
  --wds-circular-progress-bar-background-fill-error: rgba(19, 23, 32, .1);
1384
1390
  --wds-circular-progress-bar-background-fill-premium: rgba(19, 23, 32, .1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.122.0",
3
+ "version": "1.123.0",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -12,7 +12,7 @@
12
12
  "style-dictionary": "^3.9.2",
13
13
  "ts-jest": "^29.2.5",
14
14
  "ts-node": "^10.9.2",
15
- "typescript": "^5.7.2"
15
+ "typescript": "^5.8.3"
16
16
  },
17
17
  "description": "Design system tokens",
18
18
  "scripts": {
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "03545faac4efb65addfb12c27bb3ba990321c263d74aca3fde1b7b44"
36
+ "falconPackageHash": "5dd6bea477af171bf24c44bc04362a12799e6efea6425402b7a373b6"
37
37
  }
package/studio/all.css CHANGED
@@ -1679,7 +1679,9 @@
1679
1679
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1680
1680
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
1681
1681
  --wds-circular-progress-bar-foreground-fill-error: var(--wds-color-fill-destructive-primary);
1682
- --wds-checkbox-label-font-size-small: var(--wds-font-size-body-tiny);
1682
+ --wds-checkbox-label-font-size-small: var(--wds-font-size-body-small);
1683
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-medium);
1684
+ --wds-checkbox-label-disabled: var(--wds-color-text-standard-primary);
1683
1685
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled-light);
1684
1686
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1685
1687
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1801,7 +1803,8 @@
1801
1803
  --wds-divider-gradient-border: linear-gradient(90deg, var(--wds-divider-fill-color-light-secondary) 0%, var(--wds-divider-fill-color-light-primary) 16%, var(--wds-divider-fill-color-light-primary) 84%, var(--wds-divider-fill-color-light-secondary) 100%);
1802
1804
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-small);
1803
1805
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
1804
- --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1806
+ --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
1807
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1805
1808
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1806
1809
  --wds-button-font-line-height-large: var(--wds-font-line-height-body-medium);
1807
1810
  --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);
package/studio/all.scss CHANGED
@@ -472,8 +472,14 @@
472
472
  --wds-tabs-padding-vertical-medium: var(--wds-space-400);
473
473
  --wds-tabs-padding-horizontal-small: var(--wds-space-300);
474
474
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
475
- --wds-tabs-gap-small: var(--wds-space-150);
476
- --wds-tabs-gap-medium: var(--wds-space-200);
475
+ --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
476
+ --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
477
+ --wds-tabs-item-gap-small: var(--wds-space-150);
478
+ --wds-tabs-item-gap-medium: var(--wds-space-200);
479
+ --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
480
+ --wds-tabs-item-fill-active: var(--wds-color-black-100-transparent-0);
481
+ --wds-tabs-gap-horizontal: var(--wds-space-0);
482
+ --wds-tabs-border-radius: var(--wds-border-radius-0);
477
483
  --wds-table-toolbar-padding-horizontal: var(--wds-space-600);
478
484
  --wds-table-list-item-paddings: var(--wds-space-0);
479
485
  --wds-table-list-item-indentation-level-3: var(--wds-space-700);
@@ -1435,6 +1441,8 @@
1435
1441
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1436
1442
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1437
1443
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1444
+ --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1445
+ --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1438
1446
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1439
1447
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1440
1448
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
@@ -1671,7 +1679,9 @@
1671
1679
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1672
1680
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
1673
1681
  --wds-circular-progress-bar-foreground-fill-error: var(--wds-color-fill-destructive-primary);
1674
- --wds-checkbox-label-font-size-small: var(--wds-font-size-body-tiny);
1682
+ --wds-checkbox-label-font-size-small: var(--wds-font-size-body-small);
1683
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-medium);
1684
+ --wds-checkbox-label-disabled: var(--wds-color-text-standard-primary);
1675
1685
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled-light);
1676
1686
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1677
1687
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1793,7 +1803,8 @@
1793
1803
  --wds-divider-gradient-border: linear-gradient(90deg, var(--wds-divider-fill-color-light-secondary) 0%, var(--wds-divider-fill-color-light-primary) 16%, var(--wds-divider-fill-color-light-primary) 84%, var(--wds-divider-fill-color-light-secondary) 100%);
1794
1804
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-small);
1795
1805
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
1796
- --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1806
+ --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
1807
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1797
1808
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1798
1809
  --wds-button-font-line-height-large: var(--wds-font-line-height-body-medium);
1799
1810
  --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);
package/studio/all.st.css CHANGED
@@ -234,7 +234,10 @@
234
234
  @property st-global(--wds-checkbox-group-gap-vertical);
235
235
  @property st-global(--wds-checkbox-icon);
236
236
  @property st-global(--wds-checkbox-icon-disabled);
237
+ @property st-global(--wds-checkbox-label-disabled);
238
+ @property st-global(--wds-checkbox-label-font-line-height-medium);
237
239
  @property st-global(--wds-checkbox-label-font-line-height-small);
240
+ @property st-global(--wds-checkbox-label-font-size-medium);
238
241
  @property st-global(--wds-checkbox-label-font-size-small);
239
242
  @property st-global(--wds-circular-progress-bar-background-fill-error);
240
243
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
@@ -2046,8 +2049,11 @@
2046
2049
  --wds-checkbox-group-gap-vertical: 12px;
2047
2050
  --wds-checkbox-icon: #ffffff;
2048
2051
  --wds-checkbox-icon-disabled: rgba(255, 255, 255, .7);
2049
- --wds-checkbox-label-font-line-height-small: 16px;
2050
- --wds-checkbox-label-font-size-small: 12px;
2052
+ --wds-checkbox-label-disabled: #131720;
2053
+ --wds-checkbox-label-font-line-height-medium: 24px;
2054
+ --wds-checkbox-label-font-line-height-small: 20px;
2055
+ --wds-checkbox-label-font-size-medium: 16px;
2056
+ --wds-checkbox-label-font-size-small: 14px;
2051
2057
  --wds-circular-progress-bar-background-fill-error: #e5e5e5;
2052
2058
  --wds-circular-progress-bar-background-fill-premium: #e5e5e5;
2053
2059
  --wds-circular-progress-bar-background-fill-standard: #e5e5e5;
package/studio/component.st.css CHANGED
@@ -202,7 +202,10 @@
202
202
  @property st-global(--wds-checkbox-group-gap-vertical);
203
203
  @property st-global(--wds-checkbox-icon);
204
204
  @property st-global(--wds-checkbox-icon-disabled);
205
+ @property st-global(--wds-checkbox-label-disabled);
206
+ @property st-global(--wds-checkbox-label-font-line-height-medium);
205
207
  @property st-global(--wds-checkbox-label-font-line-height-small);
208
+ @property st-global(--wds-checkbox-label-font-size-medium);
206
209
  @property st-global(--wds-checkbox-label-font-size-small);
207
210
  @property st-global(--wds-circular-progress-bar-background-fill-error);
208
211
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
@@ -1335,8 +1338,11 @@
1335
1338
  --wds-checkbox-group-gap-vertical: 12px;
1336
1339
  --wds-checkbox-icon: #ffffff;
1337
1340
  --wds-checkbox-icon-disabled: rgba(255, 255, 255, .7);
1338
- --wds-checkbox-label-font-line-height-small: 16px;
1339
- --wds-checkbox-label-font-size-small: 12px;
1341
+ --wds-checkbox-label-disabled: #131720;
1342
+ --wds-checkbox-label-font-line-height-medium: 24px;
1343
+ --wds-checkbox-label-font-line-height-small: 20px;
1344
+ --wds-checkbox-label-font-size-medium: 16px;
1345
+ --wds-checkbox-label-font-size-small: 14px;
1340
1346
  --wds-circular-progress-bar-background-fill-error: #e5e5e5;
1341
1347
  --wds-circular-progress-bar-background-fill-premium: #e5e5e5;
1342
1348
  --wds-circular-progress-bar-background-fill-standard: #e5e5e5;
package/wixel/all.css CHANGED
@@ -1682,7 +1682,9 @@
1682
1682
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1683
1683
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
1684
1684
  --wds-circular-progress-bar-foreground-fill-error: var(--wds-color-fill-destructive-primary);
1685
- --wds-checkbox-label-font-size-small: var(--wds-font-size-body-tiny);
1685
+ --wds-checkbox-label-font-size-small: var(--wds-font-size-body-small);
1686
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-medium);
1687
+ --wds-checkbox-label-disabled: var(--wds-color-text-standard-primary);
1686
1688
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled-light);
1687
1689
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1688
1690
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-secondary-hover);
@@ -1803,7 +1805,8 @@
1803
1805
  --wds-field-set-label-font-line-height-small: var(--wds-font-line-height-body-small);
1804
1806
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-small);
1805
1807
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
1806
- --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1808
+ --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
1809
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1807
1810
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-extra-tiny);
1808
1811
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-tiny);
1809
1812
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-small);
package/wixel/all.scss CHANGED
@@ -472,8 +472,14 @@
472
472
  --wds-tabs-padding-vertical-medium: var(--wds-space-400);
473
473
  --wds-tabs-padding-horizontal-small: var(--wds-space-300);
474
474
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
475
- --wds-tabs-gap-small: var(--wds-space-150);
476
- --wds-tabs-gap-medium: var(--wds-space-200);
475
+ --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
476
+ --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
477
+ --wds-tabs-item-gap-small: var(--wds-space-150);
478
+ --wds-tabs-item-gap-medium: var(--wds-space-200);
479
+ --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
480
+ --wds-tabs-item-fill-active: var(--wds-color-black-100-transparent-0);
481
+ --wds-tabs-gap-horizontal: var(--wds-space-0);
482
+ --wds-tabs-border-radius: var(--wds-border-radius-0);
477
483
  --wds-table-toolbar-padding-horizontal: var(--wds-space-600);
478
484
  --wds-table-list-item-paddings: var(--wds-space-100);
479
485
  --wds-table-list-item-indentation-level-3: var(--wds-space-700);
@@ -1431,6 +1437,8 @@
1431
1437
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1432
1438
  --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%);
1433
1439
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1440
+ --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1441
+ --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1434
1442
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1435
1443
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1436
1444
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
@@ -1674,7 +1682,9 @@
1674
1682
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1675
1683
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
1676
1684
  --wds-circular-progress-bar-foreground-fill-error: var(--wds-color-fill-destructive-primary);
1677
- --wds-checkbox-label-font-size-small: var(--wds-font-size-body-tiny);
1685
+ --wds-checkbox-label-font-size-small: var(--wds-font-size-body-small);
1686
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-medium);
1687
+ --wds-checkbox-label-disabled: var(--wds-color-text-standard-primary);
1678
1688
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled-light);
1679
1689
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1680
1690
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-secondary-hover);
@@ -1795,7 +1805,8 @@
1795
1805
  --wds-field-set-label-font-line-height-small: var(--wds-font-line-height-body-small);
1796
1806
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-small);
1797
1807
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
1798
- --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1808
+ --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
1809
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1799
1810
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-extra-tiny);
1800
1811
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-tiny);
1801
1812
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-small);
package/wixel/all.st.css CHANGED
@@ -234,7 +234,10 @@
234
234
  @property st-global(--wds-checkbox-group-gap-vertical);
235
235
  @property st-global(--wds-checkbox-icon);
236
236
  @property st-global(--wds-checkbox-icon-disabled);
237
+ @property st-global(--wds-checkbox-label-disabled);
238
+ @property st-global(--wds-checkbox-label-font-line-height-medium);
237
239
  @property st-global(--wds-checkbox-label-font-line-height-small);
240
+ @property st-global(--wds-checkbox-label-font-size-medium);
238
241
  @property st-global(--wds-checkbox-label-font-size-small);
239
242
  @property st-global(--wds-circular-progress-bar-background-fill-error);
240
243
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
@@ -2051,8 +2054,11 @@
2051
2054
  --wds-checkbox-group-gap-vertical: 12px;
2052
2055
  --wds-checkbox-icon: #ffffff;
2053
2056
  --wds-checkbox-icon-disabled: rgba(255, 255, 255, 0.7000);
2054
- --wds-checkbox-label-font-line-height-small: 16px;
2055
- --wds-checkbox-label-font-size-small: 12px;
2057
+ --wds-checkbox-label-disabled: #131720;
2058
+ --wds-checkbox-label-font-line-height-medium: 24px;
2059
+ --wds-checkbox-label-font-line-height-small: 20px;
2060
+ --wds-checkbox-label-font-size-medium: 16px;
2061
+ --wds-checkbox-label-font-size-small: 14px;
2056
2062
  --wds-circular-progress-bar-background-fill-error: #e5e5e5;
2057
2063
  --wds-circular-progress-bar-background-fill-premium: #e5e5e5;
2058
2064
  --wds-circular-progress-bar-background-fill-standard: #e5e5e5;
package/wixel/component.st.css CHANGED
@@ -202,7 +202,10 @@
202
202
  @property st-global(--wds-checkbox-group-gap-vertical);
203
203
  @property st-global(--wds-checkbox-icon);
204
204
  @property st-global(--wds-checkbox-icon-disabled);
205
+ @property st-global(--wds-checkbox-label-disabled);
206
+ @property st-global(--wds-checkbox-label-font-line-height-medium);
205
207
  @property st-global(--wds-checkbox-label-font-line-height-small);
208
+ @property st-global(--wds-checkbox-label-font-size-medium);
206
209
  @property st-global(--wds-checkbox-label-font-size-small);
207
210
  @property st-global(--wds-circular-progress-bar-background-fill-error);
208
211
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
@@ -1340,8 +1343,11 @@
1340
1343
  --wds-checkbox-group-gap-vertical: 12px;
1341
1344
  --wds-checkbox-icon: #ffffff;
1342
1345
  --wds-checkbox-icon-disabled: rgba(255, 255, 255, 0.7000);
1343
- --wds-checkbox-label-font-line-height-small: 16px;
1344
- --wds-checkbox-label-font-size-small: 12px;
1346
+ --wds-checkbox-label-disabled: #131720;
1347
+ --wds-checkbox-label-font-line-height-medium: 24px;
1348
+ --wds-checkbox-label-font-line-height-small: 20px;
1349
+ --wds-checkbox-label-font-size-medium: 16px;
1350
+ --wds-checkbox-label-font-size-small: 14px;
1345
1351
  --wds-circular-progress-bar-background-fill-error: #e5e5e5;
1346
1352
  --wds-circular-progress-bar-background-fill-premium: #e5e5e5;
1347
1353
  --wds-circular-progress-bar-background-fill-standard: #e5e5e5;