@wix/design-system-tokens 1.179.0 → 1.180.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/all.css +6 -3
  3. package/all.scss +4 -1
  4. package/all.st.css +7 -1
  5. package/component.st.css +3 -1
  6. package/odeditor/all.css +11 -8
  7. package/odeditor/all.scss +9 -6
  8. package/odeditor/all.st.css +12 -6
  9. package/odeditor/component.st.css +8 -6
  10. package/odeditor/semantic.st.css +4 -0
  11. package/odeditor-dark/all.css +18 -14
  12. package/odeditor-dark/all.scss +16 -12
  13. package/odeditor-dark/all.st.css +20 -12
  14. package/odeditor-dark/component.st.css +14 -12
  15. package/odeditor-dark/foundation.st.css +2 -0
  16. package/odeditor-dark/semantic.st.css +4 -0
  17. package/package.json +2 -2
  18. package/semantic.st.css +4 -0
  19. package/studio/all.css +4 -1
  20. package/studio/all.scss +3 -0
  21. package/studio/all.st.css +6 -0
  22. package/studio/component.st.css +2 -0
  23. package/studio/semantic.st.css +4 -0
  24. package/wixel/all.css +5 -2
  25. package/wixel/all.scss +3 -0
  26. package/wixel/all.st.css +6 -0
  27. package/wixel/component.st.css +2 -0
  28. package/wixel/semantic.st.css +4 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ ## 1.180.0 - 2026-04-07
2
+
3
+ ### Features
4
+
5
+ - feat(SegmentedToggle): added new size tiny [16106](https://github.com/wix-private/wix-design-systems/pull/16106)
6
+
7
+ ### Bug Fixes
8
+
9
+ - fix(SplitAction): instead of gap, added divider as per spec [16069](https://github.com/wix-private/wix-design-systems/pull/16069)
10
+ - fix(tokens): update toggle button standard-selected tokens in odeditor-dark [16112](https://github.com/wix-private/wix-design-systems/pull/16112)
11
+ - fix(tokens): update toggle button dark selected fill in odeditor-dark [16110](https://github.com/wix-private/wix-design-systems/pull/16110)
12
+ - fix(tokens): reduce input small border-radius in OdEditor themes [16101](https://github.com/wix-private/wix-design-systems/pull/16101)
13
+
1
14
  ## 1.179.0 - 2026-04-02
2
15
 
3
16
  ### Features
package/all.css CHANGED
@@ -360,6 +360,7 @@
360
360
  --wds-border-radius-surface-modal-backdrop: var(--wds-border-radius-0);
361
361
  --wds-border-radius-surface-modal: var(--wds-border-radius-400);
362
362
  --wds-border-radius-surface-default: var(--wds-border-radius-400);
363
+ --wds-background-blur-surface-overlay: var(--wds-background-blur-0);
363
364
  --wds-background-blur-modal: var(--wds-background-blur-0);
364
365
  --wds-space-viewport-spacing: var(--wds-space-800);
365
366
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-50);
@@ -1043,6 +1044,7 @@
1043
1044
  --wds-select-area-fill-active: var(--wds-color-blue-400);
1044
1045
  --wds-select-area-fill: var(--wds-color-blue-600);
1045
1046
  --wds-select-area-border-radius: var(--wds-border-radius-400);
1047
+ --wds-segmented-toggle-size-tiny: var(--wds-space-400);
1046
1048
  --wds-segmented-toggle-size-small: var(--wds-space-500);
1047
1049
  --wds-segmented-toggle-size-medium: var(--wds-space-600);
1048
1050
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
@@ -1445,6 +1447,7 @@
1445
1447
  --wds-font-line-height-body-small: var(--wds-font-line-height-200);
1446
1448
  --wds-font-line-height-body-medium: var(--wds-font-line-height-300);
1447
1449
  --wds-font-line-height-body-extra-tiny: var(--wds-font-line-height-100);
1450
+ --wds-color-fill-surface-overlay-blur: var(--wds-color-fill-surface-overlay);
1448
1451
  --wds-vertical-tabs-section-text-font-size-small: var(--wds-font-size-body-small);
1449
1452
  --wds-vertical-tabs-item-label-text-premium-active: var(--wds-color-text-premium);
1450
1453
  --wds-vertical-tabs-item-label-text-premium: var(--wds-color-text-premium);
@@ -1602,13 +1605,13 @@
1602
1605
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1603
1606
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1604
1607
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1608
+ --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1605
1609
  --wds-selector-button-text-fill-pressed-standard: var(--wds-color-text-primary);
1606
1610
  --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
1607
1611
  --wds-selector-button-text-fill-hover-standard: var(--wds-color-fill-standard-primary-hover);
1608
1612
  --wds-selector-button-text-fill-hover-dark: var(--wds-color-text-primary);
1609
- --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1610
- --wds-selector-button-text-fill-dark: var(--wds-color-text-standard-primary);
1611
1613
  --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1614
+ --wds-selector-button-text-fill-dark: var(--wds-color-text-standard-primary);
1612
1615
  --wds-selector-button-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1613
1616
  --wds-selector-button-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1614
1617
  --wds-selector-button-fill-disabled: var(--wds-color-fill-standard-tertiary);
@@ -1948,7 +1951,7 @@
1948
1951
  --wds-button-font-size-large: var(--wds-font-size-body-medium);
1949
1952
  --wds-button-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary);
1950
1953
  --wds-button-fill-standard-secondary-disabled: var(--wds-color-fill-standard-tertiary);
1951
- --wds-button-fill-standard-secondary-active: linear-gradient(0deg, var(--wds-color-fill-standard-primary-active) 0%, var(--wds-color-fill-standard-primary-active) 100%);
1954
+ --wds-button-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
1952
1955
  --wds-button-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1953
1956
  --wds-button-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1954
1957
  --wds-button-fill-standard-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
package/all.scss CHANGED
@@ -694,6 +694,7 @@
694
694
  --wds-select-area-fill-active: var(--wds-color-blue-400);
695
695
  --wds-select-area-fill: var(--wds-color-blue-600);
696
696
  --wds-select-area-border-radius: var(--wds-border-radius-400);
697
+ --wds-segmented-toggle-size-tiny: var(--wds-space-400);
697
698
  --wds-segmented-toggle-size-small: var(--wds-space-500);
698
699
  --wds-segmented-toggle-size-medium: var(--wds-space-600);
699
700
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
@@ -1407,6 +1408,7 @@
1407
1408
  --wds-badge-border-radius-tiny: var(--wds-border-radius-100);
1408
1409
  --wds-badge-border-radius-small: var(--wds-border-radius-100);
1409
1410
  --wds-badge-border-radius-medium: var(--wds-border-radius-100);
1411
+ --wds-background-blur-surface-overlay: var(--wds-background-blur-0);
1410
1412
  --wds-background-blur-modal: var(--wds-background-blur-0);
1411
1413
  --wds-avatar-group-gap-default: var(--wds-space-100);
1412
1414
  --wds-announcement-modal-padding-vertical: var(--wds-space-800);
@@ -1875,6 +1877,7 @@
1875
1877
  --wds-divider-fill-color-light: var(--wds-color-border-dark-secondary);
1876
1878
  --wds-custom-modal-header-subtitle-font-size: var(--wds-font-size-body-medium);
1877
1879
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-small);
1880
+ --wds-color-fill-surface-overlay-blur: var(--wds-color-fill-surface-overlay);
1878
1881
  --wds-close-button-standard-filled-text-hover: var(--wds-color-text-primary);
1879
1882
  --wds-close-button-standard-filled-text-disabled: var(--wds-color-text-standard-primary-light);
1880
1883
  --wds-close-button-standard-filled-text: var(--wds-color-text-primary);
@@ -1948,7 +1951,7 @@
1948
1951
  --wds-button-font-size-large: var(--wds-font-size-body-medium);
1949
1952
  --wds-button-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary);
1950
1953
  --wds-button-fill-standard-secondary-disabled: var(--wds-color-fill-standard-tertiary);
1951
- --wds-button-fill-standard-secondary-active: linear-gradient(0deg, var(--wds-color-fill-standard-primary-active) 0%, var(--wds-color-fill-standard-primary-active) 100%);
1954
+ --wds-button-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
1952
1955
  --wds-button-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1953
1956
  --wds-button-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1954
1957
  --wds-button-fill-standard-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
package/all.st.css CHANGED
@@ -63,6 +63,7 @@
63
63
  @property st-global(--wds-background-blur-350);
64
64
  @property st-global(--wds-background-blur-375);
65
65
  @property st-global(--wds-background-blur-modal);
66
+ @property st-global(--wds-background-blur-surface-overlay);
66
67
  @property st-global(--wds-badge-border-radius-medium);
67
68
  @property st-global(--wds-badge-border-radius-small);
68
69
  @property st-global(--wds-badge-border-radius-tiny);
@@ -662,6 +663,7 @@
662
663
  @property st-global(--wds-color-fill-surface-modal-backdrop);
663
664
  @property st-global(--wds-color-fill-surface-neutral);
664
665
  @property st-global(--wds-color-fill-surface-overlay);
666
+ @property st-global(--wds-color-fill-surface-overlay-blur);
665
667
  @property st-global(--wds-color-fill-surface-overlay-dark);
666
668
  @property st-global(--wds-color-fill-surface-premium);
667
669
  @property st-global(--wds-color-fill-surface-raised);
@@ -1441,6 +1443,7 @@
1441
1443
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
1442
1444
  @property st-global(--wds-segmented-toggle-size-medium);
1443
1445
  @property st-global(--wds-segmented-toggle-size-small);
1446
+ @property st-global(--wds-segmented-toggle-size-tiny);
1444
1447
  @property st-global(--wds-segmented-toggle-value-fill);
1445
1448
  @property st-global(--wds-segmented-toggle-value-fill-default);
1446
1449
  @property st-global(--wds-segmented-toggle-value-fill-disabled);
@@ -2156,6 +2159,7 @@
2156
2159
  --wds-background-blur-350: 0px;
2157
2160
  --wds-background-blur-375: 0px;
2158
2161
  --wds-background-blur-modal: 0px;
2162
+ --wds-background-blur-surface-overlay: 0px;
2159
2163
  --wds-badge-border-radius-medium: 2px;
2160
2164
  --wds-badge-border-radius-small: 2px;
2161
2165
  --wds-badge-border-radius-tiny: 2px;
@@ -2275,7 +2279,7 @@
2275
2279
  --wds-button-fill-standard-primary-disabled: rgba(0, 6, 36, .3);
2276
2280
  --wds-button-fill-standard-primary-hover: #0f62e6;
2277
2281
  --wds-button-fill-standard-secondary: #ffffff;
2278
- --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #084ebd 0%, #084ebd 100%);
2282
+ --wds-button-fill-standard-secondary-active: #084ebd;
2279
2283
  --wds-button-fill-standard-secondary-disabled: #ffffff;
2280
2284
  --wds-button-fill-standard-secondary-hover: #116dff;
2281
2285
  --wds-button-font-line-height-extra-large: 24px;
@@ -2755,6 +2759,7 @@
2755
2759
  --wds-color-fill-surface-modal-backdrop: rgba(0, 6, 36, .7);
2756
2760
  --wds-color-fill-surface-neutral: #f6f7f9;
2757
2761
  --wds-color-fill-surface-overlay: #ffffff;
2762
+ --wds-color-fill-surface-overlay-blur: #ffffff;
2758
2763
  --wds-color-fill-surface-overlay-dark: #000624;
2759
2764
  --wds-color-fill-surface-premium: #f1e0f9;
2760
2765
  --wds-color-fill-surface-raised: #ffffff;
@@ -3534,6 +3539,7 @@
3534
3539
  --wds-segmented-toggle-padding-vertical-small: 6px;
3535
3540
  --wds-segmented-toggle-size-medium: 36px;
3536
3541
  --wds-segmented-toggle-size-small: 30px;
3542
+ --wds-segmented-toggle-size-tiny: 24px;
3537
3543
  --wds-segmented-toggle-value-fill: #000624;
3538
3544
  --wds-segmented-toggle-value-fill-default: #000624;
3539
3545
  --wds-segmented-toggle-value-fill-disabled: rgba(0, 6, 36, .3);
package/component.st.css CHANGED
@@ -876,6 +876,7 @@
876
876
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
877
877
  @property st-global(--wds-segmented-toggle-size-medium);
878
878
  @property st-global(--wds-segmented-toggle-size-small);
879
+ @property st-global(--wds-segmented-toggle-size-tiny);
879
880
  @property st-global(--wds-segmented-toggle-value-fill);
880
881
  @property st-global(--wds-segmented-toggle-value-fill-default);
881
882
  @property st-global(--wds-segmented-toggle-value-fill-disabled);
@@ -1519,7 +1520,7 @@
1519
1520
  --wds-button-fill-standard-primary-disabled: rgba(0, 6, 36, .3);
1520
1521
  --wds-button-fill-standard-primary-hover: #0f62e6;
1521
1522
  --wds-button-fill-standard-secondary: #ffffff;
1522
- --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #084ebd 0%, #084ebd 100%);
1523
+ --wds-button-fill-standard-secondary-active: #084ebd;
1523
1524
  --wds-button-fill-standard-secondary-disabled: #ffffff;
1524
1525
  --wds-button-fill-standard-secondary-hover: #116dff;
1525
1526
  --wds-button-font-line-height-extra-large: 24px;
@@ -2249,6 +2250,7 @@
2249
2250
  --wds-segmented-toggle-padding-vertical-small: 6px;
2250
2251
  --wds-segmented-toggle-size-medium: 36px;
2251
2252
  --wds-segmented-toggle-size-small: 30px;
2253
+ --wds-segmented-toggle-size-tiny: 24px;
2252
2254
  --wds-segmented-toggle-value-fill: #000624;
2253
2255
  --wds-segmented-toggle-value-fill-default: #000624;
2254
2256
  --wds-segmented-toggle-value-fill-disabled: rgba(0, 6, 36, .3);
package/odeditor/all.css CHANGED
@@ -382,6 +382,7 @@
382
382
  --wds-border-radius-surface-modal-backdrop: var(--wds-border-radius-0);
383
383
  --wds-border-radius-surface-modal: var(--wds-border-radius-600);
384
384
  --wds-border-radius-surface-default: var(--wds-border-radius-600);
385
+ --wds-background-blur-surface-overlay: var(--wds-background-blur-0);
385
386
  --wds-background-blur-modal: var(--wds-background-blur-175);
386
387
  --wds-space-viewport-spacing: var(--wds-space-1200);
387
388
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-100);
@@ -1071,6 +1072,7 @@
1071
1072
  --wds-select-area-fill-active: var(--wds-color-blue-400);
1072
1073
  --wds-select-area-fill: var(--wds-color-black-750);
1073
1074
  --wds-select-area-border-radius: var(--wds-border-radius-200);
1075
+ --wds-segmented-toggle-size-tiny: var(--wds-space-400);
1074
1076
  --wds-segmented-toggle-size-small: var(--wds-space-750);
1075
1077
  --wds-segmented-toggle-size-medium: var(--wds-space-1000);
1076
1078
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
@@ -1259,7 +1261,7 @@
1259
1261
  --wds-input-padding-vertical-small: var(--wds-space-150);
1260
1262
  --wds-input-padding-vertical-medium: var(--wds-space-175);
1261
1263
  --wds-input-padding-vertical-large: var(--wds-space-300);
1262
- --wds-input-padding-horizontal-tiny: var(--wds-space-100);
1264
+ --wds-input-padding-horizontal-tiny: var(--wds-space-150);
1263
1265
  --wds-input-padding-horizontal-small: var(--wds-space-200);
1264
1266
  --wds-input-padding-horizontal-medium: var(--wds-space-200);
1265
1267
  --wds-input-padding-horizontal-large: var(--wds-space-300);
@@ -1267,8 +1269,8 @@
1267
1269
  --wds-input-border-radius-round-small: var(--wds-border-radius-full);
1268
1270
  --wds-input-border-radius-round-medium: var(--wds-border-radius-full);
1269
1271
  --wds-input-border-radius-round-large: var(--wds-border-radius-full);
1270
- --wds-input-border-radius-default-tiny: var(--wds-border-radius-200);
1271
- --wds-input-border-radius-default-small: var(--wds-border-radius-400);
1272
+ --wds-input-border-radius-default-tiny: var(--wds-border-radius-300);
1273
+ --wds-input-border-radius-default-small: var(--wds-border-radius-300);
1272
1274
  --wds-input-border-radius-default-medium: var(--wds-border-radius-400);
1273
1275
  --wds-input-border-radius-default-large: var(--wds-border-radius-400);
1274
1276
  --wds-input-border-color-disabled: var(--wds-color-black-700);
@@ -1292,6 +1294,7 @@
1292
1294
  --wds-icon-button-color-text-dark-secondary-disabled: var(--wds-color-black-500);
1293
1295
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-black-500);
1294
1296
  --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-black-700);
1297
+ --wds-icon-button-color-fill-standard-secondary: var(--wds-color-black-100-transparent-0);
1295
1298
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-black-700);
1296
1299
  --wds-icon-button-color-fill-premium-secondary-disabled: var(--wds-color-black-700);
1297
1300
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-black-700);
@@ -1541,6 +1544,7 @@
1541
1544
  --wds-font-line-height-body-small: var(--wds-font-line-height-300);
1542
1545
  --wds-font-line-height-body-medium: var(--wds-font-line-height-400);
1543
1546
  --wds-font-line-height-body-extra-tiny: var(--wds-font-line-height-100);
1547
+ --wds-color-fill-surface-overlay-blur: var(--wds-color-fill-surface-overlay);
1544
1548
  --wds-color-fill-surface-modal-backdrop: var(--wds-color-fill-transparent-primary);
1545
1549
  --wds-vertical-tabs-item-label-text-premium-active: var(--wds-color-text-premium);
1546
1550
  --wds-vertical-tabs-item-label-text-premium: var(--wds-color-text-premium);
@@ -1662,13 +1666,13 @@
1662
1666
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1663
1667
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1664
1668
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
1669
+ --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1665
1670
  --wds-selector-button-text-fill-pressed-standard: var(--wds-color-text-primary);
1666
1671
  --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
1667
1672
  --wds-selector-button-text-fill-hover-standard: var(--wds-color-fill-standard-primary-hover);
1668
1673
  --wds-selector-button-text-fill-hover-dark: var(--wds-color-text-standard-primary);
1669
- --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1670
- --wds-selector-button-text-fill-dark: var(--wds-color-text-standard-primary);
1671
1674
  --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1675
+ --wds-selector-button-text-fill-dark: var(--wds-color-text-standard-primary);
1672
1676
  --wds-selector-button-font-size-small: var(--wds-font-size-body-tiny);
1673
1677
  --wds-selector-button-border-color-pressed: var(--wds-color-border-standard-secondary-active);
1674
1678
  --wds-selector-button-border-color-hover: var(--wds-color-border-standard-primary);
@@ -1755,7 +1759,7 @@
1755
1759
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
1756
1760
  --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1757
1761
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1758
- --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1762
+ --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1759
1763
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
1760
1764
  --wds-input-value-font-size-large: var(--wds-font-size-body-small);
1761
1765
  --wds-input-value-font-line-height-large: var(--wds-font-size-body-small);
@@ -1807,7 +1811,6 @@
1807
1811
  --wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-light-secondary);
1808
1812
  --wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-tertiary-hover);
1809
1813
  --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-tertiary-active);
1810
- --wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1811
1814
  --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1812
1815
  --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
1813
1816
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
@@ -1841,7 +1844,7 @@
1841
1844
  --wds-icon-button-color-fill-dark-primary-hover: var(--wds-color-fill-dark-primary-hover);
1842
1845
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
1843
1846
  --wds-icon-button-color-fill-dark-primary: var(--wds-color-fill-dark-primary);
1844
- --wds-icon-button-color-border-standard-secondary-hover: var(--wds-color-border-standard-tertiary-hover);
1847
+ --wds-icon-button-color-border-standard-secondary-hover: var(--wds-color-border-standard-secondary-hover);
1845
1848
  --wds-icon-button-color-border-standard-secondary-active: var(--wds-color-border-standard-tertiary-active);
1846
1849
  --wds-icon-button-color-border-standard-secondary: var(--wds-color-border-standard-primary);
1847
1850
  --wds-icon-button-color-border-premium-secondary-active: var(--wds-color-border-premium-tertiary-active);
package/odeditor/all.scss CHANGED
@@ -734,6 +734,7 @@
734
734
  --wds-select-area-fill-active: var(--wds-color-blue-400);
735
735
  --wds-select-area-fill: var(--wds-color-black-750);
736
736
  --wds-select-area-border-radius: var(--wds-border-radius-200);
737
+ --wds-segmented-toggle-size-tiny: var(--wds-space-400);
737
738
  --wds-segmented-toggle-size-small: var(--wds-space-750);
738
739
  --wds-segmented-toggle-size-medium: var(--wds-space-1000);
739
740
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
@@ -914,7 +915,7 @@
914
915
  --wds-input-padding-vertical-small: var(--wds-space-150);
915
916
  --wds-input-padding-vertical-medium: var(--wds-space-175);
916
917
  --wds-input-padding-vertical-large: var(--wds-space-300);
917
- --wds-input-padding-horizontal-tiny: var(--wds-space-100);
918
+ --wds-input-padding-horizontal-tiny: var(--wds-space-150);
918
919
  --wds-input-padding-horizontal-small: var(--wds-space-200);
919
920
  --wds-input-padding-horizontal-medium: var(--wds-space-200);
920
921
  --wds-input-padding-horizontal-large: var(--wds-space-300);
@@ -922,8 +923,8 @@
922
923
  --wds-input-border-radius-round-small: var(--wds-border-radius-full);
923
924
  --wds-input-border-radius-round-medium: var(--wds-border-radius-full);
924
925
  --wds-input-border-radius-round-large: var(--wds-border-radius-full);
925
- --wds-input-border-radius-default-tiny: var(--wds-border-radius-200);
926
- --wds-input-border-radius-default-small: var(--wds-border-radius-400);
926
+ --wds-input-border-radius-default-tiny: var(--wds-border-radius-300);
927
+ --wds-input-border-radius-default-small: var(--wds-border-radius-300);
927
928
  --wds-input-border-radius-default-medium: var(--wds-border-radius-400);
928
929
  --wds-input-border-radius-default-large: var(--wds-border-radius-400);
929
930
  --wds-input-border-color-disabled: var(--wds-color-black-700);
@@ -968,6 +969,7 @@
968
969
  --wds-icon-button-color-text-dark-secondary-disabled: var(--wds-color-black-500);
969
970
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-black-500);
970
971
  --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-black-700);
972
+ --wds-icon-button-color-fill-standard-secondary: var(--wds-color-black-100-transparent-0);
971
973
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-black-700);
972
974
  --wds-icon-button-color-fill-premium-secondary-disabled: var(--wds-color-black-700);
973
975
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-black-700);
@@ -1503,6 +1505,7 @@
1503
1505
  --wds-badge-border-radius-tiny: var(--wds-border-radius-200);
1504
1506
  --wds-badge-border-radius-small: var(--wds-border-radius-200);
1505
1507
  --wds-badge-border-radius-medium: var(--wds-border-radius-200);
1508
+ --wds-background-blur-surface-overlay: var(--wds-background-blur-0);
1506
1509
  --wds-background-blur-modal: var(--wds-background-blur-175);
1507
1510
  --wds-avatar-group-gap-default: var(--wds-space-100);
1508
1511
  --wds-announcement-modal-padding-vertical: var(--wds-space-1100);
@@ -1744,7 +1747,7 @@
1744
1747
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
1745
1748
  --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1746
1749
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1747
- --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1750
+ --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1748
1751
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
1749
1752
  --wds-input-value-font-size-large: var(--wds-font-size-body-small);
1750
1753
  --wds-input-value-font-line-height-large: var(--wds-font-size-body-small);
@@ -1796,7 +1799,6 @@
1796
1799
  --wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-light-secondary);
1797
1800
  --wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-tertiary-hover);
1798
1801
  --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-tertiary-active);
1799
- --wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1800
1802
  --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1801
1803
  --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
1802
1804
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
@@ -1830,7 +1832,7 @@
1830
1832
  --wds-icon-button-color-fill-dark-primary-hover: var(--wds-color-fill-dark-primary-hover);
1831
1833
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
1832
1834
  --wds-icon-button-color-fill-dark-primary: var(--wds-color-fill-dark-primary);
1833
- --wds-icon-button-color-border-standard-secondary-hover: var(--wds-color-border-standard-tertiary-hover);
1835
+ --wds-icon-button-color-border-standard-secondary-hover: var(--wds-color-border-standard-secondary-hover);
1834
1836
  --wds-icon-button-color-border-standard-secondary-active: var(--wds-color-border-standard-tertiary-active);
1835
1837
  --wds-icon-button-color-border-standard-secondary: var(--wds-color-border-standard-primary);
1836
1838
  --wds-icon-button-color-border-premium-secondary-active: var(--wds-color-border-premium-tertiary-active);
@@ -1873,6 +1875,7 @@
1873
1875
  --wds-custom-modal-header-subtitle-font-size: var(--wds-font-size-body-small);
1874
1876
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
1875
1877
  --wds-custom-modal-border-radius: var(--wds-border-radius-surface-modal);
1878
+ --wds-color-fill-surface-overlay-blur: var(--wds-color-fill-surface-overlay);
1876
1879
  --wds-color-fill-surface-modal-backdrop: var(--wds-color-fill-transparent-primary);
1877
1880
  --wds-close-button-standard-filled-text-hover: var(--wds-color-text-standard-primary);
1878
1881
  --wds-close-button-standard-filled-text-disabled: var(--wds-color-text-disabled);
package/odeditor/all.st.css CHANGED
@@ -63,6 +63,7 @@
63
63
  @property st-global(--wds-background-blur-375);
64
64
  @property st-global(--wds-background-blur-450);
65
65
  @property st-global(--wds-background-blur-modal);
66
+ @property st-global(--wds-background-blur-surface-overlay);
66
67
  @property st-global(--wds-badge-border-radius-medium);
67
68
  @property st-global(--wds-badge-border-radius-small);
68
69
  @property st-global(--wds-badge-border-radius-tiny);
@@ -650,6 +651,7 @@
650
651
  @property st-global(--wds-color-fill-surface-modal-backdrop);
651
652
  @property st-global(--wds-color-fill-surface-neutral);
652
653
  @property st-global(--wds-color-fill-surface-overlay);
654
+ @property st-global(--wds-color-fill-surface-overlay-blur);
653
655
  @property st-global(--wds-color-fill-surface-overlay-dark);
654
656
  @property st-global(--wds-color-fill-surface-premium);
655
657
  @property st-global(--wds-color-fill-surface-raised);
@@ -1384,6 +1386,7 @@
1384
1386
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
1385
1387
  @property st-global(--wds-segmented-toggle-size-medium);
1386
1388
  @property st-global(--wds-segmented-toggle-size-small);
1389
+ @property st-global(--wds-segmented-toggle-size-tiny);
1387
1390
  @property st-global(--wds-segmented-toggle-value-fill);
1388
1391
  @property st-global(--wds-segmented-toggle-value-fill-default);
1389
1392
  @property st-global(--wds-segmented-toggle-value-fill-disabled);
@@ -2102,6 +2105,7 @@
2102
2105
  --wds-background-blur-375: 30px;
2103
2106
  --wds-background-blur-450: 40px;
2104
2107
  --wds-background-blur-modal: 14px;
2108
+ --wds-background-blur-surface-overlay: 0px;
2105
2109
  --wds-badge-border-radius-medium: 4px;
2106
2110
  --wds-badge-border-radius-small: 4px;
2107
2111
  --wds-badge-border-radius-tiny: 4px;
@@ -2689,6 +2693,7 @@
2689
2693
  --wds-color-fill-surface-modal-backdrop: rgba(82, 81, 80, .5);
2690
2694
  --wds-color-fill-surface-neutral: #f8f6f6;
2691
2695
  --wds-color-fill-surface-overlay: #ffffff;
2696
+ --wds-color-fill-surface-overlay-blur: #ffffff;
2692
2697
  --wds-color-fill-surface-overlay-dark: #151414;
2693
2698
  --wds-color-fill-surface-premium: #f5f7ff;
2694
2699
  --wds-color-fill-surface-raised: #ffffff;
@@ -2983,7 +2988,7 @@
2983
2988
  --wds-icon-button-color-border-standard-secondary: #7896ff;
2984
2989
  --wds-icon-button-color-border-standard-secondary-active: #d5dfff;
2985
2990
  --wds-icon-button-color-border-standard-secondary-disabled: #f0efef;
2986
- --wds-icon-button-color-border-standard-secondary-hover: #eaefff;
2991
+ --wds-icon-button-color-border-standard-secondary-hover: #acbeff;
2987
2992
  --wds-icon-button-color-fill-dark-primary: #151414;
2988
2993
  --wds-icon-button-color-fill-dark-primary-active: #525150;
2989
2994
  --wds-icon-button-color-fill-dark-primary-disabled: #f0efef;
@@ -3024,7 +3029,7 @@
3024
3029
  --wds-icon-button-color-fill-standard-primary-active: #0f2ccf;
3025
3030
  --wds-icon-button-color-fill-standard-primary-disabled: #f0efef;
3026
3031
  --wds-icon-button-color-fill-standard-primary-hover: #1c3fe5;
3027
- --wds-icon-button-color-fill-standard-secondary: #ffffff;
3032
+ --wds-icon-button-color-fill-standard-secondary: rgba(19, 23, 32, 0);
3028
3033
  --wds-icon-button-color-fill-standard-secondary-active: #d5dfff;
3029
3034
  --wds-icon-button-color-fill-standard-secondary-disabled: #f0efef;
3030
3035
  --wds-icon-button-color-fill-standard-secondary-hover: #eaefff;
@@ -3116,8 +3121,8 @@
3116
3121
  --wds-input-border-color-hover: #7896ff;
3117
3122
  --wds-input-border-radius-default-large: 8px;
3118
3123
  --wds-input-border-radius-default-medium: 8px;
3119
- --wds-input-border-radius-default-small: 8px;
3120
- --wds-input-border-radius-default-tiny: 4px;
3124
+ --wds-input-border-radius-default-small: 6px;
3125
+ --wds-input-border-radius-default-tiny: 6px;
3121
3126
  --wds-input-border-radius-round-large: 1000px;
3122
3127
  --wds-input-border-radius-round-medium: 1000px;
3123
3128
  --wds-input-border-radius-round-small: 1000px;
@@ -3126,7 +3131,7 @@
3126
3131
  --wds-input-padding-horizontal-large: 12px;
3127
3132
  --wds-input-padding-horizontal-medium: 8px;
3128
3133
  --wds-input-padding-horizontal-small: 8px;
3129
- --wds-input-padding-horizontal-tiny: 4px;
3134
+ --wds-input-padding-horizontal-tiny: 6px;
3130
3135
  --wds-input-padding-vertical-large: 12px;
3131
3136
  --wds-input-padding-vertical-medium: 7px;
3132
3137
  --wds-input-padding-vertical-small: 6px;
@@ -3144,7 +3149,7 @@
3144
3149
  --wds-input-value-font-line-height-tiny: 16px;
3145
3150
  --wds-input-value-font-size-large: 14px;
3146
3151
  --wds-input-value-font-size-medium: 14px;
3147
- --wds-input-value-font-size-small: 14px;
3152
+ --wds-input-value-font-size-small: 12px;
3148
3153
  --wds-input-value-font-size-tiny: 12px;
3149
3154
  --wds-internal-angle-input-knob-offset: 2px;
3150
3155
  --wds-internal-angle-input-knob-offset-bottom: 4px;
@@ -3423,6 +3428,7 @@
3423
3428
  --wds-segmented-toggle-padding-vertical-small: 4px;
3424
3429
  --wds-segmented-toggle-size-medium: 40px;
3425
3430
  --wds-segmented-toggle-size-small: 30px;
3431
+ --wds-segmented-toggle-size-tiny: 16px;
3426
3432
  --wds-segmented-toggle-value-fill: #151414;
3427
3433
  --wds-segmented-toggle-value-fill-default: #151414;
3428
3434
  --wds-segmented-toggle-value-fill-disabled: #a8a6a5;
package/odeditor/component.st.css CHANGED
@@ -823,6 +823,7 @@
823
823
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
824
824
  @property st-global(--wds-segmented-toggle-size-medium);
825
825
  @property st-global(--wds-segmented-toggle-size-small);
826
+ @property st-global(--wds-segmented-toggle-size-tiny);
826
827
  @property st-global(--wds-segmented-toggle-value-fill);
827
828
  @property st-global(--wds-segmented-toggle-value-fill-default);
828
829
  @property st-global(--wds-segmented-toggle-value-fill-disabled);
@@ -1718,7 +1719,7 @@
1718
1719
  --wds-icon-button-color-border-standard-secondary: #7896ff;
1719
1720
  --wds-icon-button-color-border-standard-secondary-active: #d5dfff;
1720
1721
  --wds-icon-button-color-border-standard-secondary-disabled: #f0efef;
1721
- --wds-icon-button-color-border-standard-secondary-hover: #eaefff;
1722
+ --wds-icon-button-color-border-standard-secondary-hover: #acbeff;
1722
1723
  --wds-icon-button-color-fill-dark-primary: #151414;
1723
1724
  --wds-icon-button-color-fill-dark-primary-active: #525150;
1724
1725
  --wds-icon-button-color-fill-dark-primary-disabled: #f0efef;
@@ -1759,7 +1760,7 @@
1759
1760
  --wds-icon-button-color-fill-standard-primary-active: #0f2ccf;
1760
1761
  --wds-icon-button-color-fill-standard-primary-disabled: #f0efef;
1761
1762
  --wds-icon-button-color-fill-standard-primary-hover: #1c3fe5;
1762
- --wds-icon-button-color-fill-standard-secondary: #ffffff;
1763
+ --wds-icon-button-color-fill-standard-secondary: rgba(19, 23, 32, 0);
1763
1764
  --wds-icon-button-color-fill-standard-secondary-active: #d5dfff;
1764
1765
  --wds-icon-button-color-fill-standard-secondary-disabled: #f0efef;
1765
1766
  --wds-icon-button-color-fill-standard-secondary-hover: #eaefff;
@@ -1838,8 +1839,8 @@
1838
1839
  --wds-input-border-color-hover: #7896ff;
1839
1840
  --wds-input-border-radius-default-large: 8px;
1840
1841
  --wds-input-border-radius-default-medium: 8px;
1841
- --wds-input-border-radius-default-small: 8px;
1842
- --wds-input-border-radius-default-tiny: 4px;
1842
+ --wds-input-border-radius-default-small: 6px;
1843
+ --wds-input-border-radius-default-tiny: 6px;
1843
1844
  --wds-input-border-radius-round-large: 1000px;
1844
1845
  --wds-input-border-radius-round-medium: 1000px;
1845
1846
  --wds-input-border-radius-round-small: 1000px;
@@ -1848,7 +1849,7 @@
1848
1849
  --wds-input-padding-horizontal-large: 12px;
1849
1850
  --wds-input-padding-horizontal-medium: 8px;
1850
1851
  --wds-input-padding-horizontal-small: 8px;
1851
- --wds-input-padding-horizontal-tiny: 4px;
1852
+ --wds-input-padding-horizontal-tiny: 6px;
1852
1853
  --wds-input-padding-vertical-large: 12px;
1853
1854
  --wds-input-padding-vertical-medium: 7px;
1854
1855
  --wds-input-padding-vertical-small: 6px;
@@ -1866,7 +1867,7 @@
1866
1867
  --wds-input-value-font-line-height-tiny: 16px;
1867
1868
  --wds-input-value-font-size-large: 14px;
1868
1869
  --wds-input-value-font-size-medium: 14px;
1869
- --wds-input-value-font-size-small: 14px;
1870
+ --wds-input-value-font-size-small: 12px;
1870
1871
  --wds-input-value-font-size-tiny: 12px;
1871
1872
  --wds-internal-angle-input-knob-offset: 2px;
1872
1873
  --wds-internal-angle-input-knob-offset-bottom: 4px;
@@ -2145,6 +2146,7 @@
2145
2146
  --wds-segmented-toggle-padding-vertical-small: 4px;
2146
2147
  --wds-segmented-toggle-size-medium: 40px;
2147
2148
  --wds-segmented-toggle-size-small: 30px;
2149
+ --wds-segmented-toggle-size-tiny: 16px;
2148
2150
  --wds-segmented-toggle-value-fill: #151414;
2149
2151
  --wds-segmented-toggle-value-fill-default: #151414;
2150
2152
  --wds-segmented-toggle-value-fill-disabled: #a8a6a5;
package/odeditor/semantic.st.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @property st-global(--wds-background-blur-modal);
2
+ @property st-global(--wds-background-blur-surface-overlay);
2
3
  @property st-global(--wds-border-radius-surface-default);
3
4
  @property st-global(--wds-border-radius-surface-modal);
4
5
  @property st-global(--wds-border-radius-surface-modal-backdrop);
@@ -286,6 +287,7 @@
286
287
  @property st-global(--wds-color-fill-surface-modal-backdrop);
287
288
  @property st-global(--wds-color-fill-surface-neutral);
288
289
  @property st-global(--wds-color-fill-surface-overlay);
290
+ @property st-global(--wds-color-fill-surface-overlay-blur);
289
291
  @property st-global(--wds-color-fill-surface-overlay-dark);
290
292
  @property st-global(--wds-color-fill-surface-premium);
291
293
  @property st-global(--wds-color-fill-surface-raised);
@@ -487,6 +489,7 @@
487
489
 
488
490
  .root {
489
491
  --wds-background-blur-modal: 14px;
492
+ --wds-background-blur-surface-overlay: 0px;
490
493
  --wds-border-radius-surface-default: 12px;
491
494
  --wds-border-radius-surface-modal: 12px;
492
495
  --wds-border-radius-surface-modal-backdrop: 0px;
@@ -774,6 +777,7 @@
774
777
  --wds-color-fill-surface-modal-backdrop: rgba(82, 81, 80, .5);
775
778
  --wds-color-fill-surface-neutral: #f8f6f6;
776
779
  --wds-color-fill-surface-overlay: #ffffff;
780
+ --wds-color-fill-surface-overlay-blur: #ffffff;
777
781
  --wds-color-fill-surface-overlay-dark: #151414;
778
782
  --wds-color-fill-surface-premium: #f5f7ff;
779
783
  --wds-color-fill-surface-raised: #ffffff;