@wix/design-system-tokens 1.144.0 → 1.148.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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,37 @@
1
+ ## 1.148.0 - 2025-12-03
2
+
3
+ ### Features
4
+
5
+ - feat(tokens): update list-item-select-active-fill to use dark-tertiar… [15612](https://github.com/wix-private/wix-design-systems/pull/15612)
6
+
7
+ ### Bug Fixes
8
+
9
+ - fix(tokens): update swatch-fill-border-no-value-dash to use border se… [15606](https://github.com/wix-private/wix-design-systems/pull/15606)
10
+
11
+ ## 1.147.0 - 2025-12-01
12
+
13
+ ### Features
14
+
15
+ - feat(ToggleButton): new skin added standard-secondary [15588](https://github.com/wix-private/wix-design-systems/pull/15588)
16
+
17
+ ### Bug Fixes
18
+
19
+ - fix(tokens): use semantic border-dark-primary token for icon-button [15600](https://github.com/wix-private/wix-design-systems/pull/15600)
20
+
21
+ ## 1.146.0 - 2025-11-28
22
+
23
+ ### Bug Fixes
24
+
25
+ - fix(Modal): make shadow-surface-modal responsive [15543](https://github.com/wix-private/wix-design-systems/pull/15543)
26
+
27
+ ### Features
28
+
29
+ - feat(Tabs): added default horizontal padding on editor3 [15560](https://github.com/wix-private/wix-design-systems/pull/15560)
30
+
31
+ ### Visual Breaking Changes
32
+
33
+ - breaking(ListItems): added/changed/deleted tokens [15556](https://github.com/wix-private/wix-design-systems/pull/15556)
34
+
1
35
  ## 1.143.0 - 2025-11-18
2
36
 
3
37
  ### Features
package/all.css CHANGED
@@ -31,14 +31,17 @@
31
31
  --wds-space-0: 0px;
32
32
  --wds-shadow-spread-secondary-raised: 0;
33
33
  --wds-shadow-focus-spread: 3;
34
+ --wds-shadow-y-600: 20px;
34
35
  --wds-shadow-y-350: 3px;
35
36
  --wds-shadow-y-300: 12px;
36
37
  --wds-shadow-y-200: 9px;
37
38
  --wds-shadow-y-150: 8px;
39
+ --wds-shadow-y-125: 5px;
38
40
  --wds-shadow-y-100: 6px;
39
41
  --wds-shadow-y-50: 3px;
40
42
  --wds-shadow-y-25: 2px;
41
43
  --wds-shadow-y-0: 0;
44
+ --wds-shadow-x-50: 3px;
42
45
  --wds-shadow-x-25: 2px;
43
46
  --wds-shadow-x-0: 0px;
44
47
  --wds-shadow-blur-800: 36px;
@@ -361,6 +364,7 @@
361
364
  --wds-space-padding-horizontal-large: var(--wds-space-400);
362
365
  --wds-space-mobile-viewport-spacing: var(--wds-space-500);
363
366
  --wds-shadow-x-secondary-raised: var(--wds-shadow-x-0);
367
+ --wds-shadow-surface-modal: var(--wds-shadow-x-0) var(--wds-shadow-y-50) var(--wds-shadow-blur-400) var(--wds-color-black-100-transparent-20), 0 var(--wds-shadow-blur-150) var(--wds-shadow-y-150) var(--wds-color-black-100-transparent-10);
364
368
  --wds-shadow-focus-warning: 0 0 0 3px var(--wds-color-yellow-400);
365
369
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
366
370
  --wds-shadow-focus-inner-warning: 0 0 0 3px var(--wds-color-yellow-400) inset;
@@ -843,6 +847,7 @@
843
847
  --wds-toggle-button-padding-medium: var(--wds-space-200);
844
848
  --wds-toggle-button-padding-large-round: var(--wds-space-500);
845
849
  --wds-toggle-button-padding-large: var(--wds-space-300);
850
+ --wds-toggle-button-label-font-weight-standard-secondary-selected: var(--wds-font-weight-bold);
846
851
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
847
852
  --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
848
853
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-regular);
@@ -901,6 +906,7 @@
901
906
  --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
902
907
  --wds-tabs-item-fill-active: var(--wds-color-black-100-transparent-0);
903
908
  --wds-tabs-gap-horizontal: var(--wds-space-0);
909
+ --wds-tabs-container-padding-horizontal: var(--wds-space-0);
904
910
  --wds-tabs-border-radius: var(--wds-border-radius-0);
905
911
  --wds-table-list-item-paddings: var(--wds-space-0);
906
912
  --wds-table-list-item-indentation-level-3: var(--wds-space-600);
@@ -1144,15 +1150,20 @@
1144
1150
  --wds-list-item-select-padding-left-medium: var(--wds-space-300);
1145
1151
  --wds-list-item-select-padding-horizontal-small: var(--wds-space-300);
1146
1152
  --wds-list-item-select-padding-horizontal-medium: var(--wds-space-300);
1147
- --wds-list-item-select-label-hover-font-weight-medium: var(--wds-font-weight-regular);
1148
1153
  --wds-list-item-select-label-font-weight-medium: var(--wds-font-weight-regular);
1149
1154
  --wds-list-item-select-label-font-weight-active: var(--wds-font-weight-regular);
1150
1155
  --wds-list-item-select-gap: var(--wds-space-0);
1151
1156
  --wds-list-item-select-border-radius: var(--wds-border-radius-0);
1152
1157
  --wds-list-item-select-affix-margin: var(--wds-space-100);
1158
+ --wds-list-item-section-padding-vertical-neutral: var(--wds-space-150);
1159
+ --wds-list-item-section-padding-top: var(--wds-space-200);
1153
1160
  --wds-list-item-section-padding-horizontal: var(--wds-space-400);
1161
+ --wds-list-item-section-padding-bottom: var(--wds-space-100);
1162
+ --wds-list-item-section-font-weight-neutral: var(--wds-font-weight-medium);
1154
1163
  --wds-list-item-section-font-weight: var(--wds-font-weight-bold);
1164
+ --wds-list-item-section-divider-padding-top: var(--wds-space-100);
1155
1165
  --wds-list-item-section-divider-padding-horizontal: var(--wds-space-400);
1166
+ --wds-list-item-section-divider-padding-bottom: var(--wds-space-100);
1156
1167
  --wds-list-item-action-title-font-weight-active: var(--wds-font-weight-regular);
1157
1168
  --wds-list-item-action-title-font-weight: var(--wds-font-weight-regular);
1158
1169
  --wds-list-item-action-padding-vertical-small-screen-small: var(--wds-space-200);
@@ -1402,7 +1413,6 @@
1402
1413
  --wds-shadow-surface-raised: var(--wds-shadow-200);
1403
1414
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1404
1415
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1405
- --wds-shadow-surface-modal: var(--wds-shadow-400);
1406
1416
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
1407
1417
  --wds-shadow-inner-400-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1408
1418
  --wds-shadow-inner-300-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -1491,6 +1501,8 @@
1491
1501
  --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-small);
1492
1502
  --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-text-disabled-light);
1493
1503
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1504
+ --wds-toggle-button-label-fill-standard-secondary-selected-hover: var(--wds-color-fill-standard-primary-hover);
1505
+ --wds-toggle-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-hover);
1494
1506
  --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-primary);
1495
1507
  --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-text-disabled);
1496
1508
  --wds-toggle-button-label-fill-standard-default: var(--wds-color-text-standard-primary);
@@ -1509,6 +1521,9 @@
1509
1521
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-fill-standard-secondary-hover);
1510
1522
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1511
1523
  --wds-toggle-button-fill-standard-selected: var(--wds-color-fill-standard-secondary);
1524
+ --wds-toggle-button-fill-standard-secondary-selected-hover: var(--wds-color-fill-standard-tertiary-hover);
1525
+ --wds-toggle-button-fill-standard-secondary-selected: var(--wds-color-fill-standard-tertiary);
1526
+ --wds-toggle-button-fill-standard-secondary-hover: var(--wds-color-fill-standard-tertiary);
1512
1527
  --wds-toggle-button-fill-standard-hover: var(--wds-color-fill-standard-tertiary);
1513
1528
  --wds-toggle-button-fill-standard-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1514
1529
  --wds-toggle-button-fill-standard: var(--wds-color-fill-standard-tertiary);
@@ -1665,8 +1680,10 @@
1665
1680
  --wds-list-item-select-active-fill-active-screen-small: var(--wds-color-fill-standard-tertiary-active);
1666
1681
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-primary-active);
1667
1682
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-primary);
1683
+ --wds-list-item-section-title-label-fill-neutral: var(--wds-color-text-standard-secondary);
1668
1684
  --wds-list-item-section-title-label-fill: var(--wds-color-text-placeholder);
1669
1685
  --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1686
+ --wds-list-item-section-fill-neutral: var(--wds-color-fill-surface-neutral);
1670
1687
  --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1671
1688
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-placeholder);
1672
1689
  --wds-list-item-action-suffix-fill: var(--wds-color-text-placeholder);
@@ -1687,7 +1704,6 @@
1687
1704
  --wds-input-shadow-focus-standard: var(--wds-shadow-focus-standard);
1688
1705
  --wds-input-shadow-focus-destructive: var(--wds-shadow-focus-destructive);
1689
1706
  --wds-input-icon-affix-fill: var(--wds-color-text-primary);
1690
- --wds-input-border-color-readonly: var(--wds-color-border-standard-secondary-readonly);
1691
1707
  --wds-input-border-color-hover: var(--wds-color-border-standard-secondary);
1692
1708
  --wds-input-border-color-focus: var(--wds-color-border-standard-secondary-active);
1693
1709
  --wds-input-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
package/all.scss CHANGED
@@ -64,14 +64,17 @@
64
64
  --wds-sidebar-clear-button-fill: #5a5d63;
65
65
  --wds-side-panel-floating-max-height: 576px;
66
66
  --wds-side-panel-control-layout-divider-border-width: 1px;
67
+ --wds-shadow-y-600: 20px;
67
68
  --wds-shadow-y-350: 3px;
68
69
  --wds-shadow-y-300: 12px;
69
70
  --wds-shadow-y-200: 9px;
70
71
  --wds-shadow-y-150: 8px;
72
+ --wds-shadow-y-125: 5px;
71
73
  --wds-shadow-y-100: 6px;
72
74
  --wds-shadow-y-50: 3px;
73
75
  --wds-shadow-y-25: 2px;
74
76
  --wds-shadow-y-0: 0;
77
+ --wds-shadow-x-50: 3px;
75
78
  --wds-shadow-x-25: 2px;
76
79
  --wds-shadow-x-0: 0px;
77
80
  --wds-shadow-spread-secondary-raised: 0;
@@ -408,6 +411,7 @@
408
411
  --wds-toggle-button-padding-medium: var(--wds-space-200);
409
412
  --wds-toggle-button-padding-large-round: var(--wds-space-500);
410
413
  --wds-toggle-button-padding-large: var(--wds-space-300);
414
+ --wds-toggle-button-label-font-weight-standard-secondary-selected: var(--wds-font-weight-bold);
411
415
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
412
416
  --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
413
417
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-regular);
@@ -466,6 +470,7 @@
466
470
  --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
467
471
  --wds-tabs-item-fill-active: var(--wds-color-black-100-transparent-0);
468
472
  --wds-tabs-gap-horizontal: var(--wds-space-0);
473
+ --wds-tabs-container-padding-horizontal: var(--wds-space-0);
469
474
  --wds-tabs-border-radius: var(--wds-border-radius-0);
470
475
  --wds-table-toolbar-padding-horizontal: var(--wds-space-400);
471
476
  --wds-table-list-item-paddings: var(--wds-space-0);
@@ -596,6 +601,7 @@
596
601
  --wds-shadow-x-secondary-raised: var(--wds-shadow-x-0);
597
602
  --wds-shadow-x-primary-toggle-button: var(--wds-shadow-x-0);
598
603
  --wds-shadow-x-input: var(--wds-shadow-x-0);
604
+ --wds-shadow-surface-modal: var(--wds-shadow-x-0) var(--wds-shadow-y-50) var(--wds-shadow-blur-400) var(--wds-color-black-100-transparent-20), 0 var(--wds-shadow-blur-150) var(--wds-shadow-y-150) var(--wds-color-black-100-transparent-10);
599
605
  --wds-shadow-inner-400-top: 0 32px 24px -24px var(--wds-color-black-100-transparent-20) inset, 0 8px 6px -6px var(--wds-color-black-100-transparent-5) inset;
600
606
  --wds-shadow-inner-400-right: -32px 0 24px -24px var(--wds-color-black-100-transparent-20) inset, -8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
601
607
  --wds-shadow-inner-400-left: 32px 0 24px -24px var(--wds-color-black-100-transparent-20) inset, 8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
@@ -791,7 +797,6 @@
791
797
  --wds-list-item-select-padding-left-medium: var(--wds-space-300);
792
798
  --wds-list-item-select-padding-horizontal-small: var(--wds-space-300);
793
799
  --wds-list-item-select-padding-horizontal-medium: var(--wds-space-300);
794
- --wds-list-item-select-label-hover-font-weight-medium: var(--wds-font-weight-regular);
795
800
  --wds-list-item-select-label-font-weight-medium: var(--wds-font-weight-regular);
796
801
  --wds-list-item-select-label-font-weight-active: var(--wds-font-weight-regular);
797
802
  --wds-list-item-select-icon-padding-vertical-small: var(--wds-space-100);
@@ -801,9 +806,15 @@
801
806
  --wds-list-item-select-gap: var(--wds-space-0);
802
807
  --wds-list-item-select-border-radius: var(--wds-border-radius-0);
803
808
  --wds-list-item-select-affix-margin: var(--wds-space-100);
809
+ --wds-list-item-section-padding-vertical-neutral: var(--wds-space-150);
810
+ --wds-list-item-section-padding-top: var(--wds-space-200);
804
811
  --wds-list-item-section-padding-horizontal: var(--wds-space-400);
812
+ --wds-list-item-section-padding-bottom: var(--wds-space-100);
813
+ --wds-list-item-section-font-weight-neutral: var(--wds-font-weight-medium);
805
814
  --wds-list-item-section-font-weight: var(--wds-font-weight-bold);
815
+ --wds-list-item-section-divider-padding-top: var(--wds-space-100);
806
816
  --wds-list-item-section-divider-padding-horizontal: var(--wds-space-400);
817
+ --wds-list-item-section-divider-padding-bottom: var(--wds-space-100);
807
818
  --wds-list-item-padding-vertical-xx-tiny: var(--wds-space-50);
808
819
  --wds-list-item-padding-vertical-x-tiny: var(--wds-space-100);
809
820
  --wds-list-item-padding-vertical-tiny: var(--wds-space-200);
@@ -1473,6 +1484,8 @@
1473
1484
  --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-small);
1474
1485
  --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-text-disabled-light);
1475
1486
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1487
+ --wds-toggle-button-label-fill-standard-secondary-selected-hover: var(--wds-color-fill-standard-primary-hover);
1488
+ --wds-toggle-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-hover);
1476
1489
  --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-primary);
1477
1490
  --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-text-disabled);
1478
1491
  --wds-toggle-button-label-fill-standard-default: var(--wds-color-text-standard-primary);
@@ -1491,6 +1504,9 @@
1491
1504
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-fill-standard-secondary-hover);
1492
1505
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1493
1506
  --wds-toggle-button-fill-standard-selected: var(--wds-color-fill-standard-secondary);
1507
+ --wds-toggle-button-fill-standard-secondary-selected-hover: var(--wds-color-fill-standard-tertiary-hover);
1508
+ --wds-toggle-button-fill-standard-secondary-selected: var(--wds-color-fill-standard-tertiary);
1509
+ --wds-toggle-button-fill-standard-secondary-hover: var(--wds-color-fill-standard-tertiary);
1494
1510
  --wds-toggle-button-fill-standard-hover: var(--wds-color-fill-standard-tertiary);
1495
1511
  --wds-toggle-button-fill-standard-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1496
1512
  --wds-toggle-button-fill-standard: var(--wds-color-fill-standard-tertiary);
@@ -1553,7 +1569,6 @@
1553
1569
  --wds-shadow-surface-raised: var(--wds-shadow-200);
1554
1570
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1555
1571
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1556
- --wds-shadow-surface-modal: var(--wds-shadow-400);
1557
1572
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
1558
1573
  --wds-shadow-inner-400-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1559
1574
  --wds-shadow-inner-300-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -1655,8 +1670,10 @@
1655
1670
  --wds-list-item-select-active-fill-active-screen-small: var(--wds-color-fill-standard-tertiary-active);
1656
1671
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-primary-active);
1657
1672
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-primary);
1673
+ --wds-list-item-section-title-label-fill-neutral: var(--wds-color-text-standard-secondary);
1658
1674
  --wds-list-item-section-title-label-fill: var(--wds-color-text-placeholder);
1659
1675
  --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1676
+ --wds-list-item-section-fill-neutral: var(--wds-color-fill-surface-neutral);
1660
1677
  --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1661
1678
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-placeholder);
1662
1679
  --wds-list-item-action-suffix-fill: var(--wds-color-text-placeholder);
@@ -1677,7 +1694,6 @@
1677
1694
  --wds-input-shadow-focus-standard: var(--wds-shadow-focus-standard);
1678
1695
  --wds-input-shadow-focus-destructive: var(--wds-shadow-focus-destructive);
1679
1696
  --wds-input-icon-affix-fill: var(--wds-color-text-primary);
1680
- --wds-input-border-color-readonly: var(--wds-color-border-standard-secondary-readonly);
1681
1697
  --wds-input-border-color-hover: var(--wds-color-border-standard-secondary);
1682
1698
  --wds-input-border-color-focus: var(--wds-color-border-standard-secondary-active);
1683
1699
  --wds-input-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
package/all.st.css CHANGED
@@ -1092,7 +1092,6 @@
1092
1092
  @property st-global(--wds-input-border-color-disabled);
1093
1093
  @property st-global(--wds-input-border-color-focus);
1094
1094
  @property st-global(--wds-input-border-color-hover);
1095
- @property st-global(--wds-input-border-color-readonly);
1096
1095
  @property st-global(--wds-input-border-radius-default-large);
1097
1096
  @property st-global(--wds-input-border-radius-default-medium);
1098
1097
  @property st-global(--wds-input-border-radius-default-small);
@@ -1188,13 +1187,21 @@
1188
1187
  @property st-global(--wds-list-item-padding-vertical-tiny);
1189
1188
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
1190
1189
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
1190
+ @property st-global(--wds-list-item-section-divider-padding-bottom);
1191
1191
  @property st-global(--wds-list-item-section-divider-padding-horizontal);
1192
+ @property st-global(--wds-list-item-section-divider-padding-top);
1192
1193
  @property st-global(--wds-list-item-section-fill);
1194
+ @property st-global(--wds-list-item-section-fill-neutral);
1193
1195
  @property st-global(--wds-list-item-section-font-line-height);
1194
1196
  @property st-global(--wds-list-item-section-font-size);
1195
1197
  @property st-global(--wds-list-item-section-font-weight);
1198
+ @property st-global(--wds-list-item-section-font-weight-neutral);
1199
+ @property st-global(--wds-list-item-section-padding-bottom);
1196
1200
  @property st-global(--wds-list-item-section-padding-horizontal);
1201
+ @property st-global(--wds-list-item-section-padding-top);
1202
+ @property st-global(--wds-list-item-section-padding-vertical-neutral);
1197
1203
  @property st-global(--wds-list-item-section-title-label-fill);
1204
+ @property st-global(--wds-list-item-section-title-label-fill-neutral);
1198
1205
  @property st-global(--wds-list-item-select-active-fill);
1199
1206
  @property st-global(--wds-list-item-select-active-fill-active);
1200
1207
  @property st-global(--wds-list-item-select-active-fill-active-screen-small);
@@ -1226,7 +1233,6 @@
1226
1233
  @property st-global(--wds-list-item-select-label-font-size-small);
1227
1234
  @property st-global(--wds-list-item-select-label-font-weight-active);
1228
1235
  @property st-global(--wds-list-item-select-label-font-weight-medium);
1229
- @property st-global(--wds-list-item-select-label-hover-font-weight-medium);
1230
1236
  @property st-global(--wds-list-item-select-padding-horizontal-medium);
1231
1237
  @property st-global(--wds-list-item-select-padding-horizontal-small);
1232
1238
  @property st-global(--wds-list-item-select-padding-left-medium);
@@ -1533,6 +1539,7 @@
1533
1539
  @property st-global(--wds-shadow-surface-raised);
1534
1540
  @property st-global(--wds-shadow-x-0);
1535
1541
  @property st-global(--wds-shadow-x-25);
1542
+ @property st-global(--wds-shadow-x-50);
1536
1543
  @property st-global(--wds-shadow-x-input);
1537
1544
  @property st-global(--wds-shadow-x-primary-toggle-button);
1538
1545
  @property st-global(--wds-shadow-x-secondary-raised);
@@ -1542,10 +1549,12 @@
1542
1549
  @property st-global(--wds-shadow-y-25);
1543
1550
  @property st-global(--wds-shadow-y-50);
1544
1551
  @property st-global(--wds-shadow-y-100);
1552
+ @property st-global(--wds-shadow-y-125);
1545
1553
  @property st-global(--wds-shadow-y-150);
1546
1554
  @property st-global(--wds-shadow-y-200);
1547
1555
  @property st-global(--wds-shadow-y-300);
1548
1556
  @property st-global(--wds-shadow-y-350);
1557
+ @property st-global(--wds-shadow-y-600);
1549
1558
  @property st-global(--wds-shadow-y-input);
1550
1559
  @property st-global(--wds-shadow-y-primary-modal);
1551
1560
  @property st-global(--wds-shadow-y-primary-overlay);
@@ -1752,6 +1761,7 @@
1752
1761
  @property st-global(--wds-table-list-item-paddings);
1753
1762
  @property st-global(--wds-table-toolbar-padding-horizontal);
1754
1763
  @property st-global(--wds-tabs-border-radius);
1764
+ @property st-global(--wds-tabs-container-padding-horizontal);
1755
1765
  @property st-global(--wds-tabs-gap-horizontal);
1756
1766
  @property st-global(--wds-tabs-item-fill-active);
1757
1767
  @property st-global(--wds-tabs-item-fill-hover);
@@ -1843,6 +1853,9 @@
1843
1853
  @property st-global(--wds-toggle-button-fill-standard);
1844
1854
  @property st-global(--wds-toggle-button-fill-standard-disabled);
1845
1855
  @property st-global(--wds-toggle-button-fill-standard-hover);
1856
+ @property st-global(--wds-toggle-button-fill-standard-secondary-hover);
1857
+ @property st-global(--wds-toggle-button-fill-standard-secondary-selected);
1858
+ @property st-global(--wds-toggle-button-fill-standard-secondary-selected-hover);
1846
1859
  @property st-global(--wds-toggle-button-fill-standard-selected);
1847
1860
  @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
1848
1861
  @property st-global(--wds-toggle-button-fill-standard-selected-hover);
@@ -1869,6 +1882,8 @@
1869
1882
  @property st-global(--wds-toggle-button-label-fill-standard-default);
1870
1883
  @property st-global(--wds-toggle-button-label-fill-standard-disabled);
1871
1884
  @property st-global(--wds-toggle-button-label-fill-standard-hover);
1885
+ @property st-global(--wds-toggle-button-label-fill-standard-secondary-hover);
1886
+ @property st-global(--wds-toggle-button-label-fill-standard-secondary-selected-hover);
1872
1887
  @property st-global(--wds-toggle-button-label-fill-standard-selected);
1873
1888
  @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
1874
1889
  @property st-global(--wds-toggle-button-label-font-line-height-round-small);
@@ -1880,6 +1895,7 @@
1880
1895
  @property st-global(--wds-toggle-button-label-font-weight-pill);
1881
1896
  @property st-global(--wds-toggle-button-label-font-weight-round);
1882
1897
  @property st-global(--wds-toggle-button-label-font-weight-square);
1898
+ @property st-global(--wds-toggle-button-label-font-weight-standard-secondary-selected);
1883
1899
  @property st-global(--wds-toggle-button-padding-large);
1884
1900
  @property st-global(--wds-toggle-button-padding-large-round);
1885
1901
  @property st-global(--wds-toggle-button-padding-medium);
@@ -3140,7 +3156,6 @@
3140
3156
  --wds-input-border-color-disabled: rgba(0, 6, 36, .1);
3141
3157
  --wds-input-border-color-focus: #116dff;
3142
3158
  --wds-input-border-color-hover: #d6e6fe;
3143
- --wds-input-border-color-readonly: #dfe5eb;
3144
3159
  --wds-input-border-radius-default-large: 6px;
3145
3160
  --wds-input-border-radius-default-medium: 6px;
3146
3161
  --wds-input-border-radius-default-small: 6px;
@@ -3236,13 +3251,21 @@
3236
3251
  --wds-list-item-padding-vertical-tiny: 12px;
3237
3252
  --wds-list-item-padding-vertical-x-tiny: 6px;
3238
3253
  --wds-list-item-padding-vertical-xx-tiny: 3px;
3254
+ --wds-list-item-section-divider-padding-bottom: 6px;
3239
3255
  --wds-list-item-section-divider-padding-horizontal: 24px;
3256
+ --wds-list-item-section-divider-padding-top: 6px;
3240
3257
  --wds-list-item-section-fill: #ffffff;
3258
+ --wds-list-item-section-fill-neutral: #f6f7f9;
3241
3259
  --wds-list-item-section-font-line-height: 18px;
3242
3260
  --wds-list-item-section-font-size: 14px;
3243
3261
  --wds-list-item-section-font-weight: 700;
3262
+ --wds-list-item-section-font-weight-neutral: 500;
3263
+ --wds-list-item-section-padding-bottom: 6px;
3244
3264
  --wds-list-item-section-padding-horizontal: 24px;
3265
+ --wds-list-item-section-padding-top: 12px;
3266
+ --wds-list-item-section-padding-vertical-neutral: 9px;
3245
3267
  --wds-list-item-section-title-label-fill: #868aa5;
3268
+ --wds-list-item-section-title-label-fill-neutral: #44485f;
3246
3269
  --wds-list-item-select-active-fill: #116dff;
3247
3270
  --wds-list-item-select-active-fill-active: #084ebd;
3248
3271
  --wds-list-item-select-active-fill-active-screen-small: #d6e6fe;
@@ -3274,7 +3297,6 @@
3274
3297
  --wds-list-item-select-label-font-size-small: 14px;
3275
3298
  --wds-list-item-select-label-font-weight-active: 400;
3276
3299
  --wds-list-item-select-label-font-weight-medium: 400;
3277
- --wds-list-item-select-label-hover-font-weight-medium: 400;
3278
3300
  --wds-list-item-select-padding-horizontal-medium: 18px;
3279
3301
  --wds-list-item-select-padding-horizontal-small: 18px;
3280
3302
  --wds-list-item-select-padding-left-medium: 18px;
@@ -3575,12 +3597,13 @@
3575
3597
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(0, 6, 36, .2) inset, 0 8px 6px -6px rgba(0, 6, 36, .05) inset;
3576
3598
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset, 0 -22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset;
3577
3599
  --wds-shadow-spread-secondary-raised: 0;
3578
- --wds-shadow-surface-modal: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
3600
+ --wds-shadow-surface-modal: 0px 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
3579
3601
  --wds-shadow-surface-overlay: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
3580
3602
  --wds-shadow-surface-overlay-dark: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
3581
3603
  --wds-shadow-surface-raised: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
3582
3604
  --wds-shadow-x-0: 0px;
3583
3605
  --wds-shadow-x-25: 2px;
3606
+ --wds-shadow-x-50: 3px;
3584
3607
  --wds-shadow-x-input: 0px;
3585
3608
  --wds-shadow-x-primary-toggle-button: 0px;
3586
3609
  --wds-shadow-x-secondary-raised: 0px;
@@ -3590,10 +3613,12 @@
3590
3613
  --wds-shadow-y-25: 2px;
3591
3614
  --wds-shadow-y-50: 3px;
3592
3615
  --wds-shadow-y-100: 6px;
3616
+ --wds-shadow-y-125: 5px;
3593
3617
  --wds-shadow-y-150: 8px;
3594
3618
  --wds-shadow-y-200: 9px;
3595
3619
  --wds-shadow-y-300: 12px;
3596
3620
  --wds-shadow-y-350: 3px;
3621
+ --wds-shadow-y-600: 20px;
3597
3622
  --wds-shadow-y-input: 0;
3598
3623
  --wds-shadow-y-primary-modal: 3px;
3599
3624
  --wds-shadow-y-primary-overlay: 0;
@@ -3800,6 +3825,7 @@
3800
3825
  --wds-table-list-item-paddings: 0px;
3801
3826
  --wds-table-toolbar-padding-horizontal: 24px;
3802
3827
  --wds-tabs-border-radius: 0px;
3828
+ --wds-tabs-container-padding-horizontal: 0px;
3803
3829
  --wds-tabs-gap-horizontal: 0px;
3804
3830
  --wds-tabs-item-fill-active: rgba(0, 6, 36, 0);
3805
3831
  --wds-tabs-item-fill-hover: rgba(0, 6, 36, 0);
@@ -3891,6 +3917,9 @@
3891
3917
  --wds-toggle-button-fill-standard: #ffffff;
3892
3918
  --wds-toggle-button-fill-standard-disabled: #ffffff;
3893
3919
  --wds-toggle-button-fill-standard-hover: #ffffff;
3920
+ --wds-toggle-button-fill-standard-secondary-hover: #ffffff;
3921
+ --wds-toggle-button-fill-standard-secondary-selected: #ffffff;
3922
+ --wds-toggle-button-fill-standard-secondary-selected-hover: #e7f0ff;
3894
3923
  --wds-toggle-button-fill-standard-selected: #d6e6fe;
3895
3924
  --wds-toggle-button-fill-standard-selected-disabled: rgba(0, 6, 36, .3);
3896
3925
  --wds-toggle-button-fill-standard-selected-hover: #a8caff;
@@ -3917,6 +3946,8 @@
3917
3946
  --wds-toggle-button-label-fill-standard-default: #000624;
3918
3947
  --wds-toggle-button-label-fill-standard-disabled: rgba(0, 6, 36, .3);
3919
3948
  --wds-toggle-button-label-fill-standard-hover: #116dff;
3949
+ --wds-toggle-button-label-fill-standard-secondary-hover: #0f62e6;
3950
+ --wds-toggle-button-label-fill-standard-secondary-selected-hover: #0f62e6;
3920
3951
  --wds-toggle-button-label-fill-standard-selected: #116dff;
3921
3952
  --wds-toggle-button-label-fill-standard-selected-disabled: rgba(255, 255, 255, .7);
3922
3953
  --wds-toggle-button-label-font-line-height-round-small: 18px;
@@ -3928,6 +3959,7 @@
3928
3959
  --wds-toggle-button-label-font-weight-pill: 400;
3929
3960
  --wds-toggle-button-label-font-weight-round: 400;
3930
3961
  --wds-toggle-button-label-font-weight-square: 400;
3962
+ --wds-toggle-button-label-font-weight-standard-secondary-selected: 700;
3931
3963
  --wds-toggle-button-padding-large: 18px;
3932
3964
  --wds-toggle-button-padding-large-round: 30px;
3933
3965
  --wds-toggle-button-padding-medium: 12px;
package/component.st.css CHANGED
@@ -531,7 +531,6 @@
531
531
  @property st-global(--wds-input-border-color-disabled);
532
532
  @property st-global(--wds-input-border-color-focus);
533
533
  @property st-global(--wds-input-border-color-hover);
534
- @property st-global(--wds-input-border-color-readonly);
535
534
  @property st-global(--wds-input-border-radius-default-large);
536
535
  @property st-global(--wds-input-border-radius-default-medium);
537
536
  @property st-global(--wds-input-border-radius-default-small);
@@ -627,13 +626,21 @@
627
626
  @property st-global(--wds-list-item-padding-vertical-tiny);
628
627
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
629
628
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
629
+ @property st-global(--wds-list-item-section-divider-padding-bottom);
630
630
  @property st-global(--wds-list-item-section-divider-padding-horizontal);
631
+ @property st-global(--wds-list-item-section-divider-padding-top);
631
632
  @property st-global(--wds-list-item-section-fill);
633
+ @property st-global(--wds-list-item-section-fill-neutral);
632
634
  @property st-global(--wds-list-item-section-font-line-height);
633
635
  @property st-global(--wds-list-item-section-font-size);
634
636
  @property st-global(--wds-list-item-section-font-weight);
637
+ @property st-global(--wds-list-item-section-font-weight-neutral);
638
+ @property st-global(--wds-list-item-section-padding-bottom);
635
639
  @property st-global(--wds-list-item-section-padding-horizontal);
640
+ @property st-global(--wds-list-item-section-padding-top);
641
+ @property st-global(--wds-list-item-section-padding-vertical-neutral);
636
642
  @property st-global(--wds-list-item-section-title-label-fill);
643
+ @property st-global(--wds-list-item-section-title-label-fill-neutral);
637
644
  @property st-global(--wds-list-item-select-active-fill);
638
645
  @property st-global(--wds-list-item-select-active-fill-active);
639
646
  @property st-global(--wds-list-item-select-active-fill-active-screen-small);
@@ -665,7 +672,6 @@
665
672
  @property st-global(--wds-list-item-select-label-font-size-small);
666
673
  @property st-global(--wds-list-item-select-label-font-weight-active);
667
674
  @property st-global(--wds-list-item-select-label-font-weight-medium);
668
- @property st-global(--wds-list-item-select-label-hover-font-weight-medium);
669
675
  @property st-global(--wds-list-item-select-padding-horizontal-medium);
670
676
  @property st-global(--wds-list-item-select-padding-horizontal-small);
671
677
  @property st-global(--wds-list-item-select-padding-left-medium);
@@ -1042,6 +1048,7 @@
1042
1048
  @property st-global(--wds-table-list-item-paddings);
1043
1049
  @property st-global(--wds-table-toolbar-padding-horizontal);
1044
1050
  @property st-global(--wds-tabs-border-radius);
1051
+ @property st-global(--wds-tabs-container-padding-horizontal);
1045
1052
  @property st-global(--wds-tabs-gap-horizontal);
1046
1053
  @property st-global(--wds-tabs-item-fill-active);
1047
1054
  @property st-global(--wds-tabs-item-fill-hover);
@@ -1133,6 +1140,9 @@
1133
1140
  @property st-global(--wds-toggle-button-fill-standard);
1134
1141
  @property st-global(--wds-toggle-button-fill-standard-disabled);
1135
1142
  @property st-global(--wds-toggle-button-fill-standard-hover);
1143
+ @property st-global(--wds-toggle-button-fill-standard-secondary-hover);
1144
+ @property st-global(--wds-toggle-button-fill-standard-secondary-selected);
1145
+ @property st-global(--wds-toggle-button-fill-standard-secondary-selected-hover);
1136
1146
  @property st-global(--wds-toggle-button-fill-standard-selected);
1137
1147
  @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
1138
1148
  @property st-global(--wds-toggle-button-fill-standard-selected-hover);
@@ -1159,6 +1169,8 @@
1159
1169
  @property st-global(--wds-toggle-button-label-fill-standard-default);
1160
1170
  @property st-global(--wds-toggle-button-label-fill-standard-disabled);
1161
1171
  @property st-global(--wds-toggle-button-label-fill-standard-hover);
1172
+ @property st-global(--wds-toggle-button-label-fill-standard-secondary-hover);
1173
+ @property st-global(--wds-toggle-button-label-fill-standard-secondary-selected-hover);
1162
1174
  @property st-global(--wds-toggle-button-label-fill-standard-selected);
1163
1175
  @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
1164
1176
  @property st-global(--wds-toggle-button-label-font-line-height-round-small);
@@ -1170,6 +1182,7 @@
1170
1182
  @property st-global(--wds-toggle-button-label-font-weight-pill);
1171
1183
  @property st-global(--wds-toggle-button-label-font-weight-round);
1172
1184
  @property st-global(--wds-toggle-button-label-font-weight-square);
1185
+ @property st-global(--wds-toggle-button-label-font-weight-standard-secondary-selected);
1173
1186
  @property st-global(--wds-toggle-button-padding-large);
1174
1187
  @property st-global(--wds-toggle-button-padding-large-round);
1175
1188
  @property st-global(--wds-toggle-button-padding-medium);
@@ -1867,7 +1880,6 @@
1867
1880
  --wds-input-border-color-disabled: rgba(0, 6, 36, .1);
1868
1881
  --wds-input-border-color-focus: #116dff;
1869
1882
  --wds-input-border-color-hover: #d6e6fe;
1870
- --wds-input-border-color-readonly: #dfe5eb;
1871
1883
  --wds-input-border-radius-default-large: 6px;
1872
1884
  --wds-input-border-radius-default-medium: 6px;
1873
1885
  --wds-input-border-radius-default-small: 6px;
@@ -1963,13 +1975,21 @@
1963
1975
  --wds-list-item-padding-vertical-tiny: 12px;
1964
1976
  --wds-list-item-padding-vertical-x-tiny: 6px;
1965
1977
  --wds-list-item-padding-vertical-xx-tiny: 3px;
1978
+ --wds-list-item-section-divider-padding-bottom: 6px;
1966
1979
  --wds-list-item-section-divider-padding-horizontal: 24px;
1980
+ --wds-list-item-section-divider-padding-top: 6px;
1967
1981
  --wds-list-item-section-fill: #ffffff;
1982
+ --wds-list-item-section-fill-neutral: #f6f7f9;
1968
1983
  --wds-list-item-section-font-line-height: 18px;
1969
1984
  --wds-list-item-section-font-size: 14px;
1970
1985
  --wds-list-item-section-font-weight: 700;
1986
+ --wds-list-item-section-font-weight-neutral: 500;
1987
+ --wds-list-item-section-padding-bottom: 6px;
1971
1988
  --wds-list-item-section-padding-horizontal: 24px;
1989
+ --wds-list-item-section-padding-top: 12px;
1990
+ --wds-list-item-section-padding-vertical-neutral: 9px;
1972
1991
  --wds-list-item-section-title-label-fill: #868aa5;
1992
+ --wds-list-item-section-title-label-fill-neutral: #44485f;
1973
1993
  --wds-list-item-select-active-fill: #116dff;
1974
1994
  --wds-list-item-select-active-fill-active: #084ebd;
1975
1995
  --wds-list-item-select-active-fill-active-screen-small: #d6e6fe;
@@ -2001,7 +2021,6 @@
2001
2021
  --wds-list-item-select-label-font-size-small: 14px;
2002
2022
  --wds-list-item-select-label-font-weight-active: 400;
2003
2023
  --wds-list-item-select-label-font-weight-medium: 400;
2004
- --wds-list-item-select-label-hover-font-weight-medium: 400;
2005
2024
  --wds-list-item-select-padding-horizontal-medium: 18px;
2006
2025
  --wds-list-item-select-padding-horizontal-small: 18px;
2007
2026
  --wds-list-item-select-padding-left-medium: 18px;
@@ -2378,6 +2397,7 @@
2378
2397
  --wds-table-list-item-paddings: 0px;
2379
2398
  --wds-table-toolbar-padding-horizontal: 24px;
2380
2399
  --wds-tabs-border-radius: 0px;
2400
+ --wds-tabs-container-padding-horizontal: 0px;
2381
2401
  --wds-tabs-gap-horizontal: 0px;
2382
2402
  --wds-tabs-item-fill-active: rgba(0, 6, 36, 0);
2383
2403
  --wds-tabs-item-fill-hover: rgba(0, 6, 36, 0);
@@ -2469,6 +2489,9 @@
2469
2489
  --wds-toggle-button-fill-standard: #ffffff;
2470
2490
  --wds-toggle-button-fill-standard-disabled: #ffffff;
2471
2491
  --wds-toggle-button-fill-standard-hover: #ffffff;
2492
+ --wds-toggle-button-fill-standard-secondary-hover: #ffffff;
2493
+ --wds-toggle-button-fill-standard-secondary-selected: #ffffff;
2494
+ --wds-toggle-button-fill-standard-secondary-selected-hover: #e7f0ff;
2472
2495
  --wds-toggle-button-fill-standard-selected: #d6e6fe;
2473
2496
  --wds-toggle-button-fill-standard-selected-disabled: rgba(0, 6, 36, .3);
2474
2497
  --wds-toggle-button-fill-standard-selected-hover: #a8caff;
@@ -2495,6 +2518,8 @@
2495
2518
  --wds-toggle-button-label-fill-standard-default: #000624;
2496
2519
  --wds-toggle-button-label-fill-standard-disabled: rgba(0, 6, 36, .3);
2497
2520
  --wds-toggle-button-label-fill-standard-hover: #116dff;
2521
+ --wds-toggle-button-label-fill-standard-secondary-hover: #0f62e6;
2522
+ --wds-toggle-button-label-fill-standard-secondary-selected-hover: #0f62e6;
2498
2523
  --wds-toggle-button-label-fill-standard-selected: #116dff;
2499
2524
  --wds-toggle-button-label-fill-standard-selected-disabled: rgba(255, 255, 255, .7);
2500
2525
  --wds-toggle-button-label-font-line-height-round-small: 18px;
@@ -2506,6 +2531,7 @@
2506
2531
  --wds-toggle-button-label-font-weight-pill: 400;
2507
2532
  --wds-toggle-button-label-font-weight-round: 400;
2508
2533
  --wds-toggle-button-label-font-weight-square: 400;
2534
+ --wds-toggle-button-label-font-weight-standard-secondary-selected: 700;
2509
2535
  --wds-toggle-button-padding-large: 18px;
2510
2536
  --wds-toggle-button-padding-large-round: 30px;
2511
2537
  --wds-toggle-button-padding-medium: 12px;
package/foundation.st.css CHANGED
@@ -183,14 +183,17 @@
183
183
  @property st-global(--wds-shadow-inner-400-vertical);
184
184
  @property st-global(--wds-shadow-x-0);
185
185
  @property st-global(--wds-shadow-x-25);
186
+ @property st-global(--wds-shadow-x-50);
186
187
  @property st-global(--wds-shadow-y-0);
187
188
  @property st-global(--wds-shadow-y-25);
188
189
  @property st-global(--wds-shadow-y-50);
189
190
  @property st-global(--wds-shadow-y-100);
191
+ @property st-global(--wds-shadow-y-125);
190
192
  @property st-global(--wds-shadow-y-150);
191
193
  @property st-global(--wds-shadow-y-200);
192
194
  @property st-global(--wds-shadow-y-300);
193
195
  @property st-global(--wds-shadow-y-350);
196
+ @property st-global(--wds-shadow-y-600);
194
197
  @property st-global(--wds-space-0);
195
198
  @property st-global(--wds-space-25);
196
199
  @property st-global(--wds-space-50);
@@ -408,14 +411,17 @@
408
411
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset, 0 -22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset;
409
412
  --wds-shadow-x-0: 0px;
410
413
  --wds-shadow-x-25: 2px;
414
+ --wds-shadow-x-50: 3px;
411
415
  --wds-shadow-y-0: 0;
412
416
  --wds-shadow-y-25: 2px;
413
417
  --wds-shadow-y-50: 3px;
414
418
  --wds-shadow-y-100: 6px;
419
+ --wds-shadow-y-125: 5px;
415
420
  --wds-shadow-y-150: 8px;
416
421
  --wds-shadow-y-200: 9px;
417
422
  --wds-shadow-y-300: 12px;
418
423
  --wds-shadow-y-350: 3px;
424
+ --wds-shadow-y-600: 20px;
419
425
  --wds-space-0: 0px;
420
426
  --wds-space-25: 1px;
421
427
  --wds-space-50: 3px;