@wix/design-system-tokens 1.130.0 → 1.131.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 (22) hide show
  1. package/CHANGELOG.md +14 -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 +22 -0
  6. package/odeditor/all.css +19 -11
  7. package/odeditor/all.scss +19 -11
  8. package/odeditor/all.st.css +28 -12
  9. package/odeditor/component.st.css +26 -12
  10. package/odeditor/semantic.st.css +2 -0
  11. package/package.json +2 -2
  12. package/semantic.st.css +2 -0
  13. package/studio/all.css +12 -0
  14. package/studio/all.scss +12 -0
  15. package/studio/all.st.css +24 -0
  16. package/studio/component.st.css +22 -0
  17. package/studio/semantic.st.css +2 -0
  18. package/wixel/all.css +24 -0
  19. package/wixel/all.scss +24 -0
  20. package/wixel/all.st.css +48 -0
  21. package/wixel/component.st.css +22 -0
  22. package/wixel/semantic.st.css +26 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## 1.131.0 - 2025-09-08
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(AddItem): add token [15282](https://github.com/wix-private/wix-design-systems/pull/15282)
6
+ - breaking(TableListItem): update border color & radius [15278](https://github.com/wix-private/wix-design-systems/pull/15278)
7
+ - breaking(SegmentedToggle): e3 container border radius [15280](https://github.com/wix-private/wix-design-systems/pull/15280)
8
+ - breaking(NestableListItem): add tokens [15255](https://github.com/wix-private/wix-design-systems/pull/15255)
9
+ - breaking(LinearProgressBar): tokenize component [15245](https://github.com/wix-private/wix-design-systems/pull/15245)
10
+
11
+ ### Bug Fixes
12
+
13
+ - fix(ToggleButton): reduce paddings for medium-sized buttons in E3 [15283](https://github.com/wix-private/wix-design-systems/pull/15283)
14
+
1
15
  ## 1.130.0 - 2025-09-01
2
16
 
3
17
  ### Features
package/all.css CHANGED
@@ -332,6 +332,7 @@
332
332
  --wds-inner-shadow-x-secondary: var(--wds-shadow-x-0);
333
333
  --wds-inner-shadow-x-primary: var(--wds-shadow-x-0);
334
334
  --wds-inner-shadow-x-input: var(--wds-shadow-x-0);
335
+ --wds-inner-shadow-fill-track: var(--wds-color-black-100-transparent-0);
335
336
  --wds-inner-shadow-fill-secondary: var(--wds-color-white-transparent-0);
336
337
  --wds-inner-shadow-fill-primary: var(--wds-color-white-transparent-0);
337
338
  --wds-inner-shadow-fill-input: var(--wds-color-black-100-transparent-0);
@@ -982,10 +983,12 @@
982
983
  --wds-side-panel-header-padding-vertical: var(--wds-space-300);
983
984
  --wds-side-panel-header-padding-right: var(--wds-space-150);
984
985
  --wds-side-panel-header-padding-left: var(--wds-space-400);
986
+ --wds-side-panel-header-divider-height: var(--wds-border-width-100);
985
987
  --wds-side-panel-footnote-padding-vertical: var(--wds-space-200);
986
988
  --wds-side-panel-footnote-padding-horizontal: var(--wds-space-400);
987
989
  --wds-side-panel-footer-padding-vertical: var(--wds-space-300);
988
990
  --wds-side-panel-footer-padding-horizontal: var(--wds-space-400);
991
+ --wds-side-panel-footer-divider-height: var(--wds-border-width-100);
989
992
  --wds-side-panel-footer-border-width: var(--wds-border-width-none);
990
993
  --wds-side-panel-floating-header-padding-vertical: var(--wds-space-200);
991
994
  --wds-side-panel-floating-header-padding-right: var(--wds-space-150);
@@ -1031,6 +1034,8 @@
1031
1034
  --wds-segmented-toggle-icononly-padding-horizontal-small: var(--wds-space-100);
1032
1035
  --wds-segmented-toggle-icononly-padding-horizontal-medium: var(--wds-space-100);
1033
1036
  --wds-segmented-toggle-fill-selected-disabled: var(--wds-color-white-transparent-0);
1037
+ --wds-segmented-toggle-container-border-radius-small: var(--wds-border-radius-300);
1038
+ --wds-segmented-toggle-container-border-radius-medium: var(--wds-border-radius-300);
1034
1039
  --wds-segmented-toggle-border-width-selected: var(--wds-border-width-200);
1035
1040
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-100);
1036
1041
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-100);
@@ -1100,6 +1105,7 @@
1100
1105
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1101
1106
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1102
1107
  --wds-notification-fill-error: var(--wds-color-red-200);
1108
+ --wds-nestable-list-paddings: var(--wds-space-0);
1103
1109
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-400);
1104
1110
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-400);
1105
1111
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-400);
@@ -1173,6 +1179,7 @@
1173
1179
  --wds-list-item-indentation-level-3: var(--wds-space-500);
1174
1180
  --wds-list-item-indentation-level-2: var(--wds-space-200);
1175
1181
  --wds-list-item-gap-columns: var(--wds-space-400);
1182
+ --wds-linear-progress-bar-value-gap: var(--wds-space-300);
1176
1183
  --wds-linear-progress-bar-border-radius: var(--wds-border-radius-full);
1177
1184
  --wds-internal-color-picker-padding-vertical: var(--wds-space-200);
1178
1185
  --wds-internal-color-picker-padding-horizontal: var(--wds-space-300);
@@ -1533,6 +1540,7 @@
1533
1540
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1534
1541
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1535
1542
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1543
+ --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1536
1544
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1537
1545
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1538
1546
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1607,6 +1615,7 @@
1607
1615
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1608
1616
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1609
1617
  --wds-number-input-icon-fill: var(--wds-color-text-primary);
1618
+ --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1610
1619
  --wds-multiselect-icon-fill: var(--wds-color-text-primary);
1611
1620
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-2);
1612
1621
  --wds-message-modal-text-font-size: var(--wds-font-size-body-medium);
@@ -1655,6 +1664,7 @@
1655
1664
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1656
1665
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
1657
1666
  --wds-list-item-action-fill: var(--wds-color-fill-standard-tertiary);
1667
+ --wds-linear-progress-bar-label-font-letter-spacing: var(--wds-font-letter-spacing-heading-6);
1658
1668
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1659
1669
  --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1660
1670
  --wds-input-value-font-size-medium: var(--wds-font-size-body-medium);
@@ -1950,6 +1960,7 @@
1950
1960
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
1951
1961
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
1952
1962
  --wds-add-item-label-color: var(--wds-color-text-primary);
1963
+ --wds-add-item-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1953
1964
  --wds-add-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1954
1965
  --wds-add-item-border-color-hover: var(--wds-color-border-standard-primary-hover);
1955
1966
  --wds-add-item-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
@@ -1987,6 +1998,7 @@
1987
1998
  --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-small);
1988
1999
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-small);
1989
2000
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2001
+ --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-heading-6);
1990
2002
  --wds-input-value-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1991
2003
  --wds-input-value-font-line-height-small: var(--wds-font-line-height-body-small);
1992
2004
  --wds-input-value-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/all.scss CHANGED
@@ -561,10 +561,12 @@
561
561
  --wds-side-panel-header-padding-vertical: var(--wds-space-300);
562
562
  --wds-side-panel-header-padding-right: var(--wds-space-150);
563
563
  --wds-side-panel-header-padding-left: var(--wds-space-400);
564
+ --wds-side-panel-header-divider-height: var(--wds-border-width-100);
564
565
  --wds-side-panel-footnote-padding-vertical: var(--wds-space-200);
565
566
  --wds-side-panel-footnote-padding-horizontal: var(--wds-space-400);
566
567
  --wds-side-panel-footer-padding-vertical: var(--wds-space-300);
567
568
  --wds-side-panel-footer-padding-horizontal: var(--wds-space-400);
569
+ --wds-side-panel-footer-divider-height: var(--wds-border-width-100);
568
570
  --wds-side-panel-footer-border-width: var(--wds-border-width-none);
569
571
  --wds-side-panel-floating-header-padding-vertical: var(--wds-space-200);
570
572
  --wds-side-panel-floating-header-padding-right: var(--wds-space-150);
@@ -682,6 +684,8 @@
682
684
  --wds-segmented-toggle-icononly-padding-horizontal-small: var(--wds-space-100);
683
685
  --wds-segmented-toggle-icononly-padding-horizontal-medium: var(--wds-space-100);
684
686
  --wds-segmented-toggle-fill-selected-disabled: var(--wds-color-white-transparent-0);
687
+ --wds-segmented-toggle-container-border-radius-small: var(--wds-border-radius-300);
688
+ --wds-segmented-toggle-container-border-radius-medium: var(--wds-border-radius-300);
685
689
  --wds-segmented-toggle-border-width-selected: var(--wds-border-width-200);
686
690
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-100);
687
691
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-100);
@@ -751,6 +755,7 @@
751
755
  --wds-notification-fill-standard: var(--wds-color-blue-200);
752
756
  --wds-notification-fill-premium: var(--wds-color-purple-200);
753
757
  --wds-notification-fill-error: var(--wds-color-red-200);
758
+ --wds-nestable-list-paddings: var(--wds-space-0);
754
759
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-400);
755
760
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-400);
756
761
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-400);
@@ -824,6 +829,7 @@
824
829
  --wds-list-item-action-gap: var(--wds-space-0);
825
830
  --wds-list-item-action-border-radius: var(--wds-border-radius-0);
826
831
  --wds-list-item-action-affix-margin: var(--wds-space-100);
832
+ --wds-linear-progress-bar-value-gap: var(--wds-space-300);
827
833
  --wds-linear-progress-bar-border-radius: var(--wds-border-radius-full);
828
834
  --wds-internal-color-picker-padding-vertical: var(--wds-space-200);
829
835
  --wds-internal-color-picker-padding-horizontal: var(--wds-space-300);
@@ -862,6 +868,7 @@
862
868
  --wds-inner-shadow-x-secondary: var(--wds-shadow-x-0);
863
869
  --wds-inner-shadow-x-primary: var(--wds-shadow-x-0);
864
870
  --wds-inner-shadow-x-input: var(--wds-shadow-x-0);
871
+ --wds-inner-shadow-fill-track: var(--wds-color-black-100-transparent-0);
865
872
  --wds-inner-shadow-fill-secondary: var(--wds-color-white-transparent-0);
866
873
  --wds-inner-shadow-fill-primary: var(--wds-color-white-transparent-0);
867
874
  --wds-inner-shadow-fill-input: var(--wds-color-black-100-transparent-0);
@@ -1515,6 +1522,7 @@
1515
1522
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1516
1523
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1517
1524
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1525
+ --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1518
1526
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1519
1527
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1520
1528
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1597,6 +1605,7 @@
1597
1605
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1598
1606
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1599
1607
  --wds-number-input-icon-fill: var(--wds-color-text-primary);
1608
+ --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1600
1609
  --wds-multiselect-icon-fill: var(--wds-color-text-primary);
1601
1610
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-2);
1602
1611
  --wds-message-modal-text-font-size: var(--wds-font-size-body-medium);
@@ -1645,6 +1654,7 @@
1645
1654
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1646
1655
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
1647
1656
  --wds-list-item-action-fill: var(--wds-color-fill-standard-tertiary);
1657
+ --wds-linear-progress-bar-label-font-letter-spacing: var(--wds-font-letter-spacing-heading-6);
1648
1658
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1649
1659
  --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1650
1660
  --wds-input-value-font-size-medium: var(--wds-font-size-body-medium);
@@ -1950,6 +1960,7 @@
1950
1960
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
1951
1961
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
1952
1962
  --wds-add-item-label-color: var(--wds-color-text-primary);
1963
+ --wds-add-item-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1953
1964
  --wds-add-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1954
1965
  --wds-add-item-border-color-hover: var(--wds-color-border-standard-primary-hover);
1955
1966
  --wds-add-item-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
@@ -1987,6 +1998,7 @@
1987
1998
  --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-small);
1988
1999
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-small);
1989
2000
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2001
+ --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-heading-6);
1990
2002
  --wds-input-value-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1991
2003
  --wds-input-value-font-line-height-small: var(--wds-font-line-height-body-small);
1992
2004
  --wds-input-value-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/all.st.css CHANGED
@@ -21,6 +21,7 @@
21
21
  @property st-global(--wds-add-item-fill);
22
22
  @property st-global(--wds-add-item-fill-disabled);
23
23
  @property st-global(--wds-add-item-fill-hover);
24
+ @property st-global(--wds-add-item-fill-pressed);
24
25
  @property st-global(--wds-add-item-label-color);
25
26
  @property st-global(--wds-add-item-padding-horizontal-large);
26
27
  @property st-global(--wds-add-item-padding-horizontal-tiny);
@@ -1059,6 +1060,7 @@
1059
1060
  @property st-global(--wds-inner-shadow-fill-input);
1060
1061
  @property st-global(--wds-inner-shadow-fill-primary);
1061
1062
  @property st-global(--wds-inner-shadow-fill-secondary);
1063
+ @property st-global(--wds-inner-shadow-fill-track);
1062
1064
  @property st-global(--wds-inner-shadow-x-input);
1063
1065
  @property st-global(--wds-inner-shadow-x-primary);
1064
1066
  @property st-global(--wds-inner-shadow-x-secondary);
@@ -1136,6 +1138,9 @@
1136
1138
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
1137
1139
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
1138
1140
  @property st-global(--wds-linear-progress-bar-border-radius);
1141
+ @property st-global(--wds-linear-progress-bar-label-font-letter-spacing);
1142
+ @property st-global(--wds-linear-progress-bar-label-font-line-height);
1143
+ @property st-global(--wds-linear-progress-bar-value-gap);
1139
1144
  @property st-global(--wds-list-item-action-affix-margin);
1140
1145
  @property st-global(--wds-list-item-action-border-radius);
1141
1146
  @property st-global(--wds-list-item-action-fill);
@@ -1266,6 +1271,8 @@
1266
1271
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
1267
1272
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
1268
1273
  @property st-global(--wds-multiselect-icon-fill);
1274
+ @property st-global(--wds-nestable-list-fill);
1275
+ @property st-global(--wds-nestable-list-paddings);
1269
1276
  @property st-global(--wds-notification-fill-error);
1270
1277
  @property st-global(--wds-notification-fill-premium);
1271
1278
  @property st-global(--wds-notification-fill-standard);
@@ -1375,6 +1382,8 @@
1375
1382
  @property st-global(--wds-segmented-toggle-border-width-default);
1376
1383
  @property st-global(--wds-segmented-toggle-border-width-hover);
1377
1384
  @property st-global(--wds-segmented-toggle-border-width-selected);
1385
+ @property st-global(--wds-segmented-toggle-container-border-radius-medium);
1386
+ @property st-global(--wds-segmented-toggle-container-border-radius-small);
1378
1387
  @property st-global(--wds-segmented-toggle-fill);
1379
1388
  @property st-global(--wds-segmented-toggle-fill-default);
1380
1389
  @property st-global(--wds-segmented-toggle-fill-disabled);
@@ -1556,11 +1565,13 @@
1556
1565
  @property st-global(--wds-side-panel-floating-title-font-line-height);
1557
1566
  @property st-global(--wds-side-panel-floating-title-font-size);
1558
1567
  @property st-global(--wds-side-panel-footer-border-width);
1568
+ @property st-global(--wds-side-panel-footer-divider-height);
1559
1569
  @property st-global(--wds-side-panel-footer-fill);
1560
1570
  @property st-global(--wds-side-panel-footer-padding-horizontal);
1561
1571
  @property st-global(--wds-side-panel-footer-padding-vertical);
1562
1572
  @property st-global(--wds-side-panel-footnote-padding-horizontal);
1563
1573
  @property st-global(--wds-side-panel-footnote-padding-vertical);
1574
+ @property st-global(--wds-side-panel-header-divider-height);
1564
1575
  @property st-global(--wds-side-panel-header-padding-left);
1565
1576
  @property st-global(--wds-side-panel-header-padding-right);
1566
1577
  @property st-global(--wds-side-panel-header-padding-vertical);
@@ -1714,6 +1725,7 @@
1714
1725
  @property st-global(--wds-swatches-swatch-size-small);
1715
1726
  @property st-global(--wds-swatches-swatch-size-tiny);
1716
1727
  @property st-global(--wds-swatches-swatch-size-x-tiny);
1728
+ @property st-global(--wds-table-list-item-border-color);
1717
1729
  @property st-global(--wds-table-list-item-border-radius);
1718
1730
  @property st-global(--wds-table-list-item-drag-handle-color);
1719
1731
  @property st-global(--wds-table-list-item-fill);
@@ -2038,6 +2050,7 @@
2038
2050
  --wds-add-item-fill: #f4f7ff;
2039
2051
  --wds-add-item-fill-disabled: rgba(0, 6, 36, .05);
2040
2052
  --wds-add-item-fill-hover: #e7f0ff;
2053
+ --wds-add-item-fill-pressed: #d6e6fe;
2041
2054
  --wds-add-item-label-color: #116dff;
2042
2055
  --wds-add-item-padding-horizontal-large: 30px;
2043
2056
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -3076,6 +3089,7 @@
3076
3089
  --wds-inner-shadow-fill-input: rgba(0, 6, 36, 0);
3077
3090
  --wds-inner-shadow-fill-primary: rgba(255, 255, 255, 0);
3078
3091
  --wds-inner-shadow-fill-secondary: rgba(255, 255, 255, 0);
3092
+ --wds-inner-shadow-fill-track: rgba(0, 6, 36, 0);
3079
3093
  --wds-inner-shadow-x-input: 0px;
3080
3094
  --wds-inner-shadow-x-primary: 0px;
3081
3095
  --wds-inner-shadow-x-secondary: 0px;
@@ -3153,6 +3167,9 @@
3153
3167
  --wds-internal-thumbnail-illustration-size-small: 51px;
3154
3168
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
3155
3169
  --wds-linear-progress-bar-border-radius: 1000px;
3170
+ --wds-linear-progress-bar-label-font-letter-spacing: 1px;
3171
+ --wds-linear-progress-bar-label-font-line-height: 18px;
3172
+ --wds-linear-progress-bar-value-gap: 18px;
3156
3173
  --wds-list-item-action-affix-margin: 6px;
3157
3174
  --wds-list-item-action-border-radius: 0px;
3158
3175
  --wds-list-item-action-fill: #ffffff;
@@ -3283,6 +3300,8 @@
3283
3300
  --wds-mobile-modal-footer-padding-horizontal: 24px;
3284
3301
  --wds-mobile-modal-footer-padding-vertical: 24px;
3285
3302
  --wds-multiselect-icon-fill: #116dff;
3303
+ --wds-nestable-list-fill: #ffffff;
3304
+ --wds-nestable-list-paddings: 0px;
3286
3305
  --wds-notification-fill-error: #ff6d63;
3287
3306
  --wds-notification-fill-premium: #c161f0;
3288
3307
  --wds-notification-fill-standard: #5999ff;
@@ -3392,6 +3411,8 @@
3392
3411
  --wds-segmented-toggle-border-width-default: 1px;
3393
3412
  --wds-segmented-toggle-border-width-hover: 1px;
3394
3413
  --wds-segmented-toggle-border-width-selected: 2px;
3414
+ --wds-segmented-toggle-container-border-radius-medium: 6px;
3415
+ --wds-segmented-toggle-container-border-radius-small: 6px;
3395
3416
  --wds-segmented-toggle-fill: #ffffff;
3396
3417
  --wds-segmented-toggle-fill-default: #ffffff;
3397
3418
  --wds-segmented-toggle-fill-disabled: #ffffff;
@@ -3573,11 +3594,13 @@
3573
3594
  --wds-side-panel-floating-title-font-line-height: 24px;
3574
3595
  --wds-side-panel-floating-title-font-size: 16px;
3575
3596
  --wds-side-panel-footer-border-width: 0px;
3597
+ --wds-side-panel-footer-divider-height: 1px;
3576
3598
  --wds-side-panel-footer-fill: #ffffff;
3577
3599
  --wds-side-panel-footer-padding-horizontal: 24px;
3578
3600
  --wds-side-panel-footer-padding-vertical: 18px;
3579
3601
  --wds-side-panel-footnote-padding-horizontal: 24px;
3580
3602
  --wds-side-panel-footnote-padding-vertical: 12px;
3603
+ --wds-side-panel-header-divider-height: 1px;
3581
3604
  --wds-side-panel-header-padding-left: 24px;
3582
3605
  --wds-side-panel-header-padding-right: 9px;
3583
3606
  --wds-side-panel-header-padding-vertical: 18px;
@@ -3731,6 +3754,7 @@
3731
3754
  --wds-swatches-swatch-size-small: 30px;
3732
3755
  --wds-swatches-swatch-size-tiny: 24px;
3733
3756
  --wds-swatches-swatch-size-x-tiny: 18px;
3757
+ --wds-table-list-item-border-color: #d6e6fe;
3734
3758
  --wds-table-list-item-border-radius: 0px;
3735
3759
  --wds-table-list-item-drag-handle-color: #116dff;
3736
3760
  --wds-table-list-item-fill: #ffffff;
package/component.st.css CHANGED
@@ -21,6 +21,7 @@
21
21
  @property st-global(--wds-add-item-fill);
22
22
  @property st-global(--wds-add-item-fill-disabled);
23
23
  @property st-global(--wds-add-item-fill-hover);
24
+ @property st-global(--wds-add-item-fill-pressed);
24
25
  @property st-global(--wds-add-item-label-color);
25
26
  @property st-global(--wds-add-item-padding-horizontal-large);
26
27
  @property st-global(--wds-add-item-padding-horizontal-tiny);
@@ -572,6 +573,9 @@
572
573
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
573
574
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
574
575
  @property st-global(--wds-linear-progress-bar-border-radius);
576
+ @property st-global(--wds-linear-progress-bar-label-font-letter-spacing);
577
+ @property st-global(--wds-linear-progress-bar-label-font-line-height);
578
+ @property st-global(--wds-linear-progress-bar-value-gap);
575
579
  @property st-global(--wds-list-item-action-affix-margin);
576
580
  @property st-global(--wds-list-item-action-border-radius);
577
581
  @property st-global(--wds-list-item-action-fill);
@@ -702,6 +706,8 @@
702
706
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
703
707
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
704
708
  @property st-global(--wds-multiselect-icon-fill);
709
+ @property st-global(--wds-nestable-list-fill);
710
+ @property st-global(--wds-nestable-list-paddings);
705
711
  @property st-global(--wds-notification-fill-error);
706
712
  @property st-global(--wds-notification-fill-premium);
707
713
  @property st-global(--wds-notification-fill-standard);
@@ -811,6 +817,8 @@
811
817
  @property st-global(--wds-segmented-toggle-border-width-default);
812
818
  @property st-global(--wds-segmented-toggle-border-width-hover);
813
819
  @property st-global(--wds-segmented-toggle-border-width-selected);
820
+ @property st-global(--wds-segmented-toggle-container-border-radius-medium);
821
+ @property st-global(--wds-segmented-toggle-container-border-radius-small);
814
822
  @property st-global(--wds-segmented-toggle-fill);
815
823
  @property st-global(--wds-segmented-toggle-fill-default);
816
824
  @property st-global(--wds-segmented-toggle-fill-disabled);
@@ -887,11 +895,13 @@
887
895
  @property st-global(--wds-side-panel-floating-title-font-line-height);
888
896
  @property st-global(--wds-side-panel-floating-title-font-size);
889
897
  @property st-global(--wds-side-panel-footer-border-width);
898
+ @property st-global(--wds-side-panel-footer-divider-height);
890
899
  @property st-global(--wds-side-panel-footer-fill);
891
900
  @property st-global(--wds-side-panel-footer-padding-horizontal);
892
901
  @property st-global(--wds-side-panel-footer-padding-vertical);
893
902
  @property st-global(--wds-side-panel-footnote-padding-horizontal);
894
903
  @property st-global(--wds-side-panel-footnote-padding-vertical);
904
+ @property st-global(--wds-side-panel-header-divider-height);
895
905
  @property st-global(--wds-side-panel-header-padding-left);
896
906
  @property st-global(--wds-side-panel-header-padding-right);
897
907
  @property st-global(--wds-side-panel-header-padding-vertical);
@@ -1001,6 +1011,7 @@
1001
1011
  @property st-global(--wds-swatches-swatch-size-small);
1002
1012
  @property st-global(--wds-swatches-swatch-size-tiny);
1003
1013
  @property st-global(--wds-swatches-swatch-size-x-tiny);
1014
+ @property st-global(--wds-table-list-item-border-color);
1004
1015
  @property st-global(--wds-table-list-item-border-radius);
1005
1016
  @property st-global(--wds-table-list-item-drag-handle-color);
1006
1017
  @property st-global(--wds-table-list-item-fill);
@@ -1323,6 +1334,7 @@
1323
1334
  --wds-add-item-fill: #f4f7ff;
1324
1335
  --wds-add-item-fill-disabled: rgba(0, 6, 36, .05);
1325
1336
  --wds-add-item-fill-hover: #e7f0ff;
1337
+ --wds-add-item-fill-pressed: #d6e6fe;
1326
1338
  --wds-add-item-label-color: #116dff;
1327
1339
  --wds-add-item-padding-horizontal-large: 30px;
1328
1340
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -1874,6 +1886,9 @@
1874
1886
  --wds-internal-thumbnail-illustration-size-small: 51px;
1875
1887
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1876
1888
  --wds-linear-progress-bar-border-radius: 1000px;
1889
+ --wds-linear-progress-bar-label-font-letter-spacing: 1px;
1890
+ --wds-linear-progress-bar-label-font-line-height: 18px;
1891
+ --wds-linear-progress-bar-value-gap: 18px;
1877
1892
  --wds-list-item-action-affix-margin: 6px;
1878
1893
  --wds-list-item-action-border-radius: 0px;
1879
1894
  --wds-list-item-action-fill: #ffffff;
@@ -2004,6 +2019,8 @@
2004
2019
  --wds-mobile-modal-footer-padding-horizontal: 24px;
2005
2020
  --wds-mobile-modal-footer-padding-vertical: 24px;
2006
2021
  --wds-multiselect-icon-fill: #116dff;
2022
+ --wds-nestable-list-fill: #ffffff;
2023
+ --wds-nestable-list-paddings: 0px;
2007
2024
  --wds-notification-fill-error: #ff6d63;
2008
2025
  --wds-notification-fill-premium: #c161f0;
2009
2026
  --wds-notification-fill-standard: #5999ff;
@@ -2113,6 +2130,8 @@
2113
2130
  --wds-segmented-toggle-border-width-default: 1px;
2114
2131
  --wds-segmented-toggle-border-width-hover: 1px;
2115
2132
  --wds-segmented-toggle-border-width-selected: 2px;
2133
+ --wds-segmented-toggle-container-border-radius-medium: 6px;
2134
+ --wds-segmented-toggle-container-border-radius-small: 6px;
2116
2135
  --wds-segmented-toggle-fill: #ffffff;
2117
2136
  --wds-segmented-toggle-fill-default: #ffffff;
2118
2137
  --wds-segmented-toggle-fill-disabled: #ffffff;
@@ -2189,11 +2208,13 @@
2189
2208
  --wds-side-panel-floating-title-font-line-height: 24px;
2190
2209
  --wds-side-panel-floating-title-font-size: 16px;
2191
2210
  --wds-side-panel-footer-border-width: 0px;
2211
+ --wds-side-panel-footer-divider-height: 1px;
2192
2212
  --wds-side-panel-footer-fill: #ffffff;
2193
2213
  --wds-side-panel-footer-padding-horizontal: 24px;
2194
2214
  --wds-side-panel-footer-padding-vertical: 18px;
2195
2215
  --wds-side-panel-footnote-padding-horizontal: 24px;
2196
2216
  --wds-side-panel-footnote-padding-vertical: 12px;
2217
+ --wds-side-panel-header-divider-height: 1px;
2197
2218
  --wds-side-panel-header-padding-left: 24px;
2198
2219
  --wds-side-panel-header-padding-right: 9px;
2199
2220
  --wds-side-panel-header-padding-vertical: 18px;
@@ -2303,6 +2324,7 @@
2303
2324
  --wds-swatches-swatch-size-small: 30px;
2304
2325
  --wds-swatches-swatch-size-tiny: 24px;
2305
2326
  --wds-swatches-swatch-size-x-tiny: 18px;
2327
+ --wds-table-list-item-border-color: #d6e6fe;
2306
2328
  --wds-table-list-item-border-radius: 0px;
2307
2329
  --wds-table-list-item-drag-handle-color: #116dff;
2308
2330
  --wds-table-list-item-fill: #ffffff;
package/odeditor/all.css CHANGED
@@ -325,6 +325,8 @@
325
325
  --wds-sidebar-item-level-1-fill-dark-active: #42454c;
326
326
  --wds-sidebar-divider-fill-dark-default: #42454c;
327
327
  --wds-sidebar-clear-button-fill: #5a5d63;
328
+ --wds-side-panel-header-divider-height: 0;
329
+ --wds-side-panel-footer-divider-height: 0;
328
330
  --wds-side-panel-floating-max-height: 576px;
329
331
  --wds-side-panel-control-layout-divider-border-width: false;
330
332
  --wds-section-helper-prefix-offset-margin: 0px;
@@ -358,6 +360,7 @@
358
360
  --wds-inner-shadow-x-secondary: var(--wds-shadow-x-25);
359
361
  --wds-inner-shadow-x-primary: var(--wds-shadow-x-25);
360
362
  --wds-inner-shadow-x-input: var(--wds-shadow-x-25);
363
+ --wds-inner-shadow-fill-track: var(--wds-color-black-100-transparent-20);
361
364
  --wds-inner-shadow-fill-secondary: var(--wds-color-white);
362
365
  --wds-inner-shadow-fill-primary: var(--wds-color-white);
363
366
  --wds-inner-shadow-fill-input: var(--wds-color-black-300-transparent-20);
@@ -827,7 +830,7 @@
827
830
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
828
831
  --wds-toggle-button-padding-small: var(--wds-space-400);
829
832
  --wds-toggle-button-padding-medium-round: var(--wds-space-500);
830
- --wds-toggle-button-padding-medium: var(--wds-space-500);
833
+ --wds-toggle-button-padding-medium: var(--wds-space-300);
831
834
  --wds-toggle-button-padding-large-round: var(--wds-space-600);
832
835
  --wds-toggle-button-padding-large: var(--wds-space-600);
833
836
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-semi-bold);
@@ -931,6 +934,7 @@
931
934
  --wds-table-list-item-gap: var(--wds-space-400);
932
935
  --wds-table-list-item-controls-padding-medium: var(--wds-space-200);
933
936
  --wds-table-list-item-border-radius: var(--wds-border-radius-600);
937
+ --wds-table-list-item-border-color: var(--wds-color-black-550);
934
938
  --wds-table-toolbar-padding-horizontal: var(--wds-space-600);
935
939
  --wds-swatches-swatch-size-tiny: var(--wds-space-600);
936
940
  --wds-swatches-swatch-size-small: var(--wds-space-700);
@@ -1062,12 +1066,14 @@
1062
1066
  --wds-segmented-toggle-icononly-padding-horizontal-medium: var(--wds-space-350);
1063
1067
  --wds-segmented-toggle-fill-disabled: var(--wds-color-black-750);
1064
1068
  --wds-segmented-toggle-fill: var(--wds-color-black-750);
1069
+ --wds-segmented-toggle-container-border-radius-small: var(--wds-border-radius-400);
1070
+ --wds-segmented-toggle-container-border-radius-medium: var(--wds-border-radius-400);
1065
1071
  --wds-segmented-toggle-border-width-selected: var(--wds-border-width-0);
1066
1072
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-0);
1067
1073
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-0);
1068
1074
  --wds-segmented-toggle-border-width: var(--wds-border-width-0);
1069
- --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-400);
1070
- --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-400);
1075
+ --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-300);
1076
+ --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-300);
1071
1077
  --wds-segmented-toggle-border-color-selected: var(--wds-color-black-100-transparent-0);
1072
1078
  --wds-segmented-toggle-border-color-hover: var(--wds-color-black-100-transparent-0);
1073
1079
  --wds-segmented-toggle-border-color-disabled: var(--wds-color-black-100-transparent-0);
@@ -1090,10 +1096,10 @@
1090
1096
  --wds-section-header-padding-vertical-small: var(--wds-space-200);
1091
1097
  --wds-section-header-padding-vertical-medium: var(--wds-space-300);
1092
1098
  --wds-section-header-font-weight: var(--wds-font-weight-semi-bold);
1093
- --wds-search-border-radius-tiny: var(--wds-border-radius-200);
1094
- --wds-search-border-radius-small: var(--wds-border-radius-200);
1095
- --wds-search-border-radius-medium: var(--wds-border-radius-200);
1096
- --wds-search-border-radius-large: var(--wds-border-radius-200);
1099
+ --wds-search-border-radius-tiny: var(--wds-border-radius-full);
1100
+ --wds-search-border-radius-small: var(--wds-border-radius-full);
1101
+ --wds-search-border-radius-medium: var(--wds-border-radius-full);
1102
+ --wds-search-border-radius-large: var(--wds-border-radius-full);
1097
1103
  --wds-scrollbar-fill-hover: var(--wds-color-black-400);
1098
1104
  --wds-scrollbar-fill-active: var(--wds-color-black-400);
1099
1105
  --wds-scrollbar-fill: var(--wds-color-black-550);
@@ -1146,6 +1152,8 @@
1146
1152
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1147
1153
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1148
1154
  --wds-notification-fill-error: var(--wds-color-red-200);
1155
+ --wds-nestable-list-paddings: var(--wds-space-200);
1156
+ --wds-nestable-list-fill: var(--wds-color-white-transparent-0);
1149
1157
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
1150
1158
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
1151
1159
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
@@ -1202,7 +1210,6 @@
1202
1210
  --wds-linear-progress-bar-value-gap: var(--wds-space-100);
1203
1211
  --wds-linear-progress-bar-label-font-letter-spacing: var(--wds-font-letter-spacing-0);
1204
1212
  --wds-linear-progress-bar-border-radius: var(--wds-border-radius-100);
1205
- --wds-internal-linear-progress-bar-knob-offset: var(--wds-space-100);
1206
1213
  --wds-internal-button-border-width: var(--wds-border-width-100);
1207
1214
  --wds-internal-angle-input-knob-offset-bottom: var(--wds-space-100);
1208
1215
  --wds-internal-angle-input-knob-offset: var(--wds-space-50);
@@ -1268,14 +1275,14 @@
1268
1275
  --wds-icon-button-color-border-light-secondary-disabled: var(--wds-color-black-700);
1269
1276
  --wds-icon-button-color-border-dark-secondary-disabled: var(--wds-color-black-700);
1270
1277
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1271
- --wds-form-field-label-gap-small: var(--wds-space-300);
1278
+ --wds-form-field-label-gap-small: var(--wds-space-200);
1272
1279
  --wds-form-field-label-font-weight: var(--wds-font-weight-medium);
1273
1280
  --wds-floating-helper-padding-vertical: var(--wds-space-700);
1274
1281
  --wds-floating-helper-padding-horizontal: var(--wds-space-800);
1275
1282
  --wds-floating-helper-main-action-padding-top: var(--wds-space-400);
1276
1283
  --wds-fill-button-border-width: var(--wds-border-width-200);
1277
1284
  --wds-field-set-label-gap-tiny: var(--wds-space-150);
1278
- --wds-field-set-label-gap-small: var(--wds-space-300);
1285
+ --wds-field-set-label-gap-small: var(--wds-space-200);
1279
1286
  --wds-field-set-label-font-weight: var(--wds-font-weight-medium);
1280
1287
  --wds-field-set-gap-small: var(--wds-space-150);
1281
1288
  --wds-field-set-gap-medium: var(--wds-space-300);
@@ -1688,6 +1695,7 @@
1688
1695
  --wds-list-item-action-label-fill-active: var(--wds-color-text-standard-primary);
1689
1696
  --wds-list-item-action-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1690
1697
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
1698
+ --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1691
1699
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1692
1700
  --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1693
1701
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
@@ -1913,6 +1921,7 @@
1913
1921
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-tiny);
1914
1922
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-small);
1915
1923
  --wds-add-item-label-color: var(--wds-color-text-standard-primary);
1924
+ --wds-add-item-fill-pressed: var(--wds-color-fill-dark-secondary-active);
1916
1925
  --wds-add-item-fill-hover: var(--wds-color-fill-dark-secondary-hover);
1917
1926
  --wds-add-item-border-color-hover: var(--wds-color-fill-dark-primary);
1918
1927
  --wds-add-item-border-color-disabled: var(--wds-color-fill-dark-primary-disabled);
@@ -1950,7 +1959,6 @@
1950
1959
  --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
1951
1960
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-small);
1952
1961
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1953
- --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-heading-4);
1954
1962
  --wds-input-value-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1955
1963
  --wds-input-value-font-line-height-small: var(--wds-font-line-height-body-small);
1956
1964
  --wds-input-value-font-line-height-medium: var(--wds-font-line-height-body-small);