@wix/design-system-tokens 1.130.0 → 1.131.1

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 +20 -11
  7. package/odeditor/all.scss +20 -11
  8. package/odeditor/all.st.css +30 -12
  9. package/odeditor/component.st.css +28 -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/studio/all.scss CHANGED
@@ -605,10 +605,12 @@
605
605
  --wds-side-panel-header-padding-vertical: var(--wds-space-400);
606
606
  --wds-side-panel-header-padding-right: var(--wds-space-200);
607
607
  --wds-side-panel-header-padding-left: var(--wds-space-600);
608
+ --wds-side-panel-header-divider-height: var(--wds-border-width-100);
608
609
  --wds-side-panel-footnote-padding-vertical: var(--wds-space-300);
609
610
  --wds-side-panel-footnote-padding-horizontal: var(--wds-space-600);
610
611
  --wds-side-panel-footer-padding-vertical: var(--wds-space-400);
611
612
  --wds-side-panel-footer-padding-horizontal: var(--wds-space-600);
613
+ --wds-side-panel-footer-divider-height: var(--wds-border-width-100);
612
614
  --wds-side-panel-footer-border-width: var(--wds-border-width-none);
613
615
  --wds-side-panel-floating-header-padding-vertical: var(--wds-space-300);
614
616
  --wds-side-panel-floating-header-padding-right: var(--wds-space-200);
@@ -731,6 +733,8 @@
731
733
  --wds-segmented-toggle-icononly-padding-horizontal-small: var(--wds-space-100);
732
734
  --wds-segmented-toggle-icononly-padding-horizontal-medium: var(--wds-space-100);
733
735
  --wds-segmented-toggle-fill-selected-disabled: var(--wds-color-white-transparent-0);
736
+ --wds-segmented-toggle-container-border-radius-small: var(--wds-border-radius-200);
737
+ --wds-segmented-toggle-container-border-radius-medium: var(--wds-border-radius-200);
734
738
  --wds-segmented-toggle-border-width-selected: var(--wds-border-width-200);
735
739
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-100);
736
740
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-100);
@@ -806,6 +810,7 @@
806
810
  --wds-notification-fill-standard: var(--wds-color-blue-200);
807
811
  --wds-notification-fill-premium: var(--wds-color-purple-200);
808
812
  --wds-notification-fill-error: var(--wds-color-red-200);
813
+ --wds-nestable-list-paddings: var(--wds-space-0);
809
814
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
810
815
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
811
816
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
@@ -886,6 +891,7 @@
886
891
  --wds-list-item-action-gap: var(--wds-space-0);
887
892
  --wds-list-item-action-border-radius: var(--wds-border-radius-0);
888
893
  --wds-list-item-action-affix-margin: var(--wds-space-100);
894
+ --wds-linear-progress-bar-value-gap: var(--wds-space-300);
889
895
  --wds-linear-progress-bar-border-radius: var(--wds-border-radius-0);
890
896
  --wds-internal-color-picker-padding-vertical: var(--wds-space-300);
891
897
  --wds-internal-color-picker-padding-horizontal: var(--wds-space-400);
@@ -924,6 +930,7 @@
924
930
  --wds-inner-shadow-x-secondary: var(--wds-shadow-x-0);
925
931
  --wds-inner-shadow-x-primary: var(--wds-shadow-x-0);
926
932
  --wds-inner-shadow-x-input: var(--wds-shadow-x-0);
933
+ --wds-inner-shadow-fill-track: var(--wds-color-black-100-transparent-0);
927
934
  --wds-inner-shadow-fill-secondary: var(--wds-color-white-transparent-0);
928
935
  --wds-inner-shadow-fill-primary: var(--wds-color-white-transparent-0);
929
936
  --wds-inner-shadow-fill-input: var(--wds-color-black-100-transparent-0);
@@ -1563,6 +1570,7 @@
1563
1570
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1564
1571
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1565
1572
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1573
+ --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1566
1574
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1567
1575
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1568
1576
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1633,6 +1641,7 @@
1633
1641
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1634
1642
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1635
1643
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1644
+ --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1636
1645
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
1637
1646
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-4);
1638
1647
  --wds-message-modal-text-font-size: var(--wds-font-size-body-small);
@@ -1673,6 +1682,7 @@
1673
1682
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1674
1683
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
1675
1684
  --wds-list-item-action-fill: var(--wds-color-fill-standard-tertiary);
1685
+ --wds-linear-progress-bar-label-font-letter-spacing: var(--wds-font-letter-spacing-heading-6);
1676
1686
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1677
1687
  --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1678
1688
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
@@ -1947,6 +1957,7 @@
1947
1957
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-tiny);
1948
1958
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-small);
1949
1959
  --wds-add-item-label-color: var(--wds-color-text-primary);
1960
+ --wds-add-item-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1950
1961
  --wds-add-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1951
1962
  --wds-add-item-border-color-hover: var(--wds-color-border-standard-primary-hover);
1952
1963
  --wds-add-item-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
@@ -1982,6 +1993,7 @@
1982
1993
  --wds-list-item-select-label-font-line-height-medium: var(--wds-font-line-height-body-small);
1983
1994
  --wds-list-item-section-font-line-height: var(--wds-font-line-height-body-tiny);
1984
1995
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-small);
1996
+ --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-heading-6);
1985
1997
  --wds-input-value-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1986
1998
  --wds-input-value-font-line-height-small: var(--wds-font-line-height-body-tiny);
1987
1999
  --wds-input-value-font-line-height-medium: var(--wds-font-line-height-body-small);
package/studio/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);
@@ -1054,6 +1055,7 @@
1054
1055
  @property st-global(--wds-inner-shadow-fill-input);
1055
1056
  @property st-global(--wds-inner-shadow-fill-primary);
1056
1057
  @property st-global(--wds-inner-shadow-fill-secondary);
1058
+ @property st-global(--wds-inner-shadow-fill-track);
1057
1059
  @property st-global(--wds-inner-shadow-x-input);
1058
1060
  @property st-global(--wds-inner-shadow-x-primary);
1059
1061
  @property st-global(--wds-inner-shadow-x-secondary);
@@ -1131,6 +1133,9 @@
1131
1133
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
1132
1134
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
1133
1135
  @property st-global(--wds-linear-progress-bar-border-radius);
1136
+ @property st-global(--wds-linear-progress-bar-label-font-letter-spacing);
1137
+ @property st-global(--wds-linear-progress-bar-label-font-line-height);
1138
+ @property st-global(--wds-linear-progress-bar-value-gap);
1134
1139
  @property st-global(--wds-list-item-action-affix-margin);
1135
1140
  @property st-global(--wds-list-item-action-border-radius);
1136
1141
  @property st-global(--wds-list-item-action-fill);
@@ -1258,6 +1263,8 @@
1258
1263
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
1259
1264
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
1260
1265
  @property st-global(--wds-multiselect-icon-fill);
1266
+ @property st-global(--wds-nestable-list-fill);
1267
+ @property st-global(--wds-nestable-list-paddings);
1261
1268
  @property st-global(--wds-notification-fill-error);
1262
1269
  @property st-global(--wds-notification-fill-premium);
1263
1270
  @property st-global(--wds-notification-fill-standard);
@@ -1366,6 +1373,8 @@
1366
1373
  @property st-global(--wds-segmented-toggle-border-width-default);
1367
1374
  @property st-global(--wds-segmented-toggle-border-width-hover);
1368
1375
  @property st-global(--wds-segmented-toggle-border-width-selected);
1376
+ @property st-global(--wds-segmented-toggle-container-border-radius-medium);
1377
+ @property st-global(--wds-segmented-toggle-container-border-radius-small);
1369
1378
  @property st-global(--wds-segmented-toggle-fill);
1370
1379
  @property st-global(--wds-segmented-toggle-fill-default);
1371
1380
  @property st-global(--wds-segmented-toggle-fill-disabled);
@@ -1547,11 +1556,13 @@
1547
1556
  @property st-global(--wds-side-panel-floating-title-font-line-height);
1548
1557
  @property st-global(--wds-side-panel-floating-title-font-size);
1549
1558
  @property st-global(--wds-side-panel-footer-border-width);
1559
+ @property st-global(--wds-side-panel-footer-divider-height);
1550
1560
  @property st-global(--wds-side-panel-footer-fill);
1551
1561
  @property st-global(--wds-side-panel-footer-padding-horizontal);
1552
1562
  @property st-global(--wds-side-panel-footer-padding-vertical);
1553
1563
  @property st-global(--wds-side-panel-footnote-padding-horizontal);
1554
1564
  @property st-global(--wds-side-panel-footnote-padding-vertical);
1565
+ @property st-global(--wds-side-panel-header-divider-height);
1555
1566
  @property st-global(--wds-side-panel-header-padding-left);
1556
1567
  @property st-global(--wds-side-panel-header-padding-right);
1557
1568
  @property st-global(--wds-side-panel-header-padding-vertical);
@@ -1706,6 +1717,7 @@
1706
1717
  @property st-global(--wds-swatches-swatch-size-small);
1707
1718
  @property st-global(--wds-swatches-swatch-size-tiny);
1708
1719
  @property st-global(--wds-swatches-swatch-size-x-tiny);
1720
+ @property st-global(--wds-table-list-item-border-color);
1709
1721
  @property st-global(--wds-table-list-item-border-radius);
1710
1722
  @property st-global(--wds-table-list-item-drag-handle-color);
1711
1723
  @property st-global(--wds-table-list-item-fill);
@@ -2030,6 +2042,7 @@
2030
2042
  --wds-add-item-fill: #f8faff;
2031
2043
  --wds-add-item-fill-disabled: rgba(19, 23, 32, .05);
2032
2044
  --wds-add-item-fill-hover: #f7f8f8;
2045
+ --wds-add-item-fill-pressed: #dce9ff;
2033
2046
  --wds-add-item-label-color: #116dff;
2034
2047
  --wds-add-item-padding-horizontal-large: 28px;
2035
2048
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -3063,6 +3076,7 @@
3063
3076
  --wds-inner-shadow-fill-input: rgba(19, 23, 32, 0);
3064
3077
  --wds-inner-shadow-fill-primary: rgba(255, 255, 255, 0);
3065
3078
  --wds-inner-shadow-fill-secondary: rgba(255, 255, 255, 0);
3079
+ --wds-inner-shadow-fill-track: rgba(19, 23, 32, 0);
3066
3080
  --wds-inner-shadow-x-input: 0px;
3067
3081
  --wds-inner-shadow-x-primary: 0px;
3068
3082
  --wds-inner-shadow-x-secondary: 0px;
@@ -3140,6 +3154,9 @@
3140
3154
  --wds-internal-thumbnail-illustration-size-small: 51px;
3141
3155
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
3142
3156
  --wds-linear-progress-bar-border-radius: 0px;
3157
+ --wds-linear-progress-bar-label-font-letter-spacing: 1px;
3158
+ --wds-linear-progress-bar-label-font-line-height: 16px;
3159
+ --wds-linear-progress-bar-value-gap: 12px;
3143
3160
  --wds-list-item-action-affix-margin: 4px;
3144
3161
  --wds-list-item-action-border-radius: 0px;
3145
3162
  --wds-list-item-action-fill: #ffffff;
@@ -3267,6 +3284,8 @@
3267
3284
  --wds-mobile-modal-footer-padding-horizontal: 24px;
3268
3285
  --wds-mobile-modal-footer-padding-vertical: 24px;
3269
3286
  --wds-multiselect-icon-fill: #42454c;
3287
+ --wds-nestable-list-fill: #ffffff;
3288
+ --wds-nestable-list-paddings: 0px;
3270
3289
  --wds-notification-fill-error: #f1695f;
3271
3290
  --wds-notification-fill-premium: #c161f0;
3272
3291
  --wds-notification-fill-standard: #418aff;
@@ -3375,6 +3394,8 @@
3375
3394
  --wds-segmented-toggle-border-width-default: 1px;
3376
3395
  --wds-segmented-toggle-border-width-hover: 1px;
3377
3396
  --wds-segmented-toggle-border-width-selected: 2px;
3397
+ --wds-segmented-toggle-container-border-radius-medium: 4px;
3398
+ --wds-segmented-toggle-container-border-radius-small: 4px;
3378
3399
  --wds-segmented-toggle-fill: #ffffff;
3379
3400
  --wds-segmented-toggle-fill-default: #ffffff;
3380
3401
  --wds-segmented-toggle-fill-disabled: #ffffff;
@@ -3556,11 +3577,13 @@
3556
3577
  --wds-side-panel-floating-title-font-line-height: 24px;
3557
3578
  --wds-side-panel-floating-title-font-size: 16px;
3558
3579
  --wds-side-panel-footer-border-width: 0px;
3580
+ --wds-side-panel-footer-divider-height: 1px;
3559
3581
  --wds-side-panel-footer-fill: #ffffff;
3560
3582
  --wds-side-panel-footer-padding-horizontal: 24px;
3561
3583
  --wds-side-panel-footer-padding-vertical: 16px;
3562
3584
  --wds-side-panel-footnote-padding-horizontal: 24px;
3563
3585
  --wds-side-panel-footnote-padding-vertical: 12px;
3586
+ --wds-side-panel-header-divider-height: 1px;
3564
3587
  --wds-side-panel-header-padding-left: 24px;
3565
3588
  --wds-side-panel-header-padding-right: 8px;
3566
3589
  --wds-side-panel-header-padding-vertical: 16px;
@@ -3715,6 +3738,7 @@
3715
3738
  --wds-swatches-swatch-size-small: 28px;
3716
3739
  --wds-swatches-swatch-size-tiny: 24px;
3717
3740
  --wds-swatches-swatch-size-x-tiny: 18px;
3741
+ --wds-table-list-item-border-color: #e2e3ea;
3718
3742
  --wds-table-list-item-border-radius: 0px;
3719
3743
  --wds-table-list-item-drag-handle-color: #116dff;
3720
3744
  --wds-table-list-item-fill: #ffffff;
package/studio/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);
@@ -571,6 +572,9 @@
571
572
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
572
573
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
573
574
  @property st-global(--wds-linear-progress-bar-border-radius);
575
+ @property st-global(--wds-linear-progress-bar-label-font-letter-spacing);
576
+ @property st-global(--wds-linear-progress-bar-label-font-line-height);
577
+ @property st-global(--wds-linear-progress-bar-value-gap);
574
578
  @property st-global(--wds-list-item-action-affix-margin);
575
579
  @property st-global(--wds-list-item-action-border-radius);
576
580
  @property st-global(--wds-list-item-action-fill);
@@ -698,6 +702,8 @@
698
702
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
699
703
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
700
704
  @property st-global(--wds-multiselect-icon-fill);
705
+ @property st-global(--wds-nestable-list-fill);
706
+ @property st-global(--wds-nestable-list-paddings);
701
707
  @property st-global(--wds-notification-fill-error);
702
708
  @property st-global(--wds-notification-fill-premium);
703
709
  @property st-global(--wds-notification-fill-standard);
@@ -806,6 +812,8 @@
806
812
  @property st-global(--wds-segmented-toggle-border-width-default);
807
813
  @property st-global(--wds-segmented-toggle-border-width-hover);
808
814
  @property st-global(--wds-segmented-toggle-border-width-selected);
815
+ @property st-global(--wds-segmented-toggle-container-border-radius-medium);
816
+ @property st-global(--wds-segmented-toggle-container-border-radius-small);
809
817
  @property st-global(--wds-segmented-toggle-fill);
810
818
  @property st-global(--wds-segmented-toggle-fill-default);
811
819
  @property st-global(--wds-segmented-toggle-fill-disabled);
@@ -882,11 +890,13 @@
882
890
  @property st-global(--wds-side-panel-floating-title-font-line-height);
883
891
  @property st-global(--wds-side-panel-floating-title-font-size);
884
892
  @property st-global(--wds-side-panel-footer-border-width);
893
+ @property st-global(--wds-side-panel-footer-divider-height);
885
894
  @property st-global(--wds-side-panel-footer-fill);
886
895
  @property st-global(--wds-side-panel-footer-padding-horizontal);
887
896
  @property st-global(--wds-side-panel-footer-padding-vertical);
888
897
  @property st-global(--wds-side-panel-footnote-padding-horizontal);
889
898
  @property st-global(--wds-side-panel-footnote-padding-vertical);
899
+ @property st-global(--wds-side-panel-header-divider-height);
890
900
  @property st-global(--wds-side-panel-header-padding-left);
891
901
  @property st-global(--wds-side-panel-header-padding-right);
892
902
  @property st-global(--wds-side-panel-header-padding-vertical);
@@ -997,6 +1007,7 @@
997
1007
  @property st-global(--wds-swatches-swatch-size-small);
998
1008
  @property st-global(--wds-swatches-swatch-size-tiny);
999
1009
  @property st-global(--wds-swatches-swatch-size-x-tiny);
1010
+ @property st-global(--wds-table-list-item-border-color);
1000
1011
  @property st-global(--wds-table-list-item-border-radius);
1001
1012
  @property st-global(--wds-table-list-item-drag-handle-color);
1002
1013
  @property st-global(--wds-table-list-item-fill);
@@ -1319,6 +1330,7 @@
1319
1330
  --wds-add-item-fill: #f8faff;
1320
1331
  --wds-add-item-fill-disabled: rgba(19, 23, 32, .05);
1321
1332
  --wds-add-item-fill-hover: #f7f8f8;
1333
+ --wds-add-item-fill-pressed: #dce9ff;
1322
1334
  --wds-add-item-label-color: #116dff;
1323
1335
  --wds-add-item-padding-horizontal-large: 28px;
1324
1336
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -1869,6 +1881,9 @@
1869
1881
  --wds-internal-thumbnail-illustration-size-small: 51px;
1870
1882
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1871
1883
  --wds-linear-progress-bar-border-radius: 0px;
1884
+ --wds-linear-progress-bar-label-font-letter-spacing: 1px;
1885
+ --wds-linear-progress-bar-label-font-line-height: 16px;
1886
+ --wds-linear-progress-bar-value-gap: 12px;
1872
1887
  --wds-list-item-action-affix-margin: 4px;
1873
1888
  --wds-list-item-action-border-radius: 0px;
1874
1889
  --wds-list-item-action-fill: #ffffff;
@@ -1996,6 +2011,8 @@
1996
2011
  --wds-mobile-modal-footer-padding-horizontal: 24px;
1997
2012
  --wds-mobile-modal-footer-padding-vertical: 24px;
1998
2013
  --wds-multiselect-icon-fill: #42454c;
2014
+ --wds-nestable-list-fill: #ffffff;
2015
+ --wds-nestable-list-paddings: 0px;
1999
2016
  --wds-notification-fill-error: #f1695f;
2000
2017
  --wds-notification-fill-premium: #c161f0;
2001
2018
  --wds-notification-fill-standard: #418aff;
@@ -2104,6 +2121,8 @@
2104
2121
  --wds-segmented-toggle-border-width-default: 1px;
2105
2122
  --wds-segmented-toggle-border-width-hover: 1px;
2106
2123
  --wds-segmented-toggle-border-width-selected: 2px;
2124
+ --wds-segmented-toggle-container-border-radius-medium: 4px;
2125
+ --wds-segmented-toggle-container-border-radius-small: 4px;
2107
2126
  --wds-segmented-toggle-fill: #ffffff;
2108
2127
  --wds-segmented-toggle-fill-default: #ffffff;
2109
2128
  --wds-segmented-toggle-fill-disabled: #ffffff;
@@ -2180,11 +2199,13 @@
2180
2199
  --wds-side-panel-floating-title-font-line-height: 24px;
2181
2200
  --wds-side-panel-floating-title-font-size: 16px;
2182
2201
  --wds-side-panel-footer-border-width: 0px;
2202
+ --wds-side-panel-footer-divider-height: 1px;
2183
2203
  --wds-side-panel-footer-fill: #ffffff;
2184
2204
  --wds-side-panel-footer-padding-horizontal: 24px;
2185
2205
  --wds-side-panel-footer-padding-vertical: 16px;
2186
2206
  --wds-side-panel-footnote-padding-horizontal: 24px;
2187
2207
  --wds-side-panel-footnote-padding-vertical: 12px;
2208
+ --wds-side-panel-header-divider-height: 1px;
2188
2209
  --wds-side-panel-header-padding-left: 24px;
2189
2210
  --wds-side-panel-header-padding-right: 8px;
2190
2211
  --wds-side-panel-header-padding-vertical: 16px;
@@ -2295,6 +2316,7 @@
2295
2316
  --wds-swatches-swatch-size-small: 28px;
2296
2317
  --wds-swatches-swatch-size-tiny: 24px;
2297
2318
  --wds-swatches-swatch-size-x-tiny: 18px;
2319
+ --wds-table-list-item-border-color: #e2e3ea;
2298
2320
  --wds-table-list-item-border-radius: 0px;
2299
2321
  --wds-table-list-item-drag-handle-color: #116dff;
2300
2322
  --wds-table-list-item-fill: #ffffff;
package/studio/semantic.st.css CHANGED
@@ -405,6 +405,7 @@
405
405
  @property st-global(--wds-inner-shadow-fill-input);
406
406
  @property st-global(--wds-inner-shadow-fill-primary);
407
407
  @property st-global(--wds-inner-shadow-fill-secondary);
408
+ @property st-global(--wds-inner-shadow-fill-track);
408
409
  @property st-global(--wds-inner-shadow-x-input);
409
410
  @property st-global(--wds-inner-shadow-x-primary);
410
411
  @property st-global(--wds-inner-shadow-x-secondary);
@@ -898,6 +899,7 @@
898
899
  --wds-inner-shadow-fill-input: rgba(19, 23, 32, 0);
899
900
  --wds-inner-shadow-fill-primary: rgba(255, 255, 255, 0);
900
901
  --wds-inner-shadow-fill-secondary: rgba(255, 255, 255, 0);
902
+ --wds-inner-shadow-fill-track: rgba(19, 23, 32, 0);
901
903
  --wds-inner-shadow-x-input: 0px;
902
904
  --wds-inner-shadow-x-primary: 0px;
903
905
  --wds-inner-shadow-x-secondary: 0px;
package/wixel/all.css CHANGED
@@ -360,6 +360,19 @@
360
360
  --wds-avatar-group-gap-condensed: -2px;
361
361
  --wds-width-default-2: var(--wds-border-width-none);
362
362
  --wds-width-default: var(--wds-border-width-none);
363
+ --wds-inner-shadow-y-secondary: var(--wds-shadow-y-0);
364
+ --wds-inner-shadow-y-primary: var(--wds-shadow-y-0);
365
+ --wds-inner-shadow-y-input: var(--wds-shadow-y-0);
366
+ --wds-inner-shadow-x-secondary: var(--wds-shadow-x-0);
367
+ --wds-inner-shadow-x-primary: var(--wds-shadow-x-0);
368
+ --wds-inner-shadow-x-input: var(--wds-shadow-x-0);
369
+ --wds-inner-shadow-fill-track: var(--wds-color-black-100-transparent-0);
370
+ --wds-inner-shadow-fill-secondary: var(--wds-color-white-transparent-0);
371
+ --wds-inner-shadow-fill-primary: var(--wds-color-white-transparent-0);
372
+ --wds-inner-shadow-fill-input: var(--wds-color-black-100-transparent-0);
373
+ --wds-inner-shadow-blur-secondary: var(--wds-shadow-blur-0);
374
+ --wds-inner-shadow-blur-primary: var(--wds-shadow-blur-0);
375
+ --wds-inner-shadow-blur-input: var(--wds-shadow-blur-0);
363
376
  --wds-border-width-default: var(--wds-border-width-none);
364
377
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
365
378
  --wds-border-radius-surface-raised: var(--wds-border-radius-600);
@@ -967,11 +980,13 @@
967
980
  --wds-side-panel-header-padding-vertical: var(--wds-space-400);
968
981
  --wds-side-panel-header-padding-right: var(--wds-space-200);
969
982
  --wds-side-panel-header-padding-left: var(--wds-space-600);
983
+ --wds-side-panel-header-divider-height: var(--wds-border-width-100);
970
984
  --wds-side-panel-footnote-padding-vertical: var(--wds-space-200);
971
985
  --wds-side-panel-footnote-padding-horizontal: var(--wds-space-600);
972
986
  --wds-side-panel-footer-padding-vertical: var(--wds-space-400);
973
987
  --wds-side-panel-footer-padding-horizontal: var(--wds-space-600);
974
988
  --wds-side-panel-footer-fill: var(--wds-color-white-transparent-0);
989
+ --wds-side-panel-footer-divider-height: var(--wds-border-width-100);
975
990
  --wds-side-panel-footer-border-width: var(--wds-border-width-200);
976
991
  --wds-side-panel-floating-header-padding-vertical: var(--wds-space-475);
977
992
  --wds-side-panel-floating-header-padding-right: var(--wds-space-400);
@@ -1018,6 +1033,8 @@
1018
1033
  --wds-segmented-toggle-icononly-padding-horizontal-medium: var(--wds-space-175);
1019
1034
  --wds-segmented-toggle-fill-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1020
1035
  --wds-segmented-toggle-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1036
+ --wds-segmented-toggle-container-border-radius-small: var(--wds-border-radius-400);
1037
+ --wds-segmented-toggle-container-border-radius-medium: var(--wds-border-radius-400);
1021
1038
  --wds-segmented-toggle-border-width-selected: var(--wds-border-width-none);
1022
1039
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-none);
1023
1040
  --wds-segmented-toggle-border-width: var(--wds-border-width-none);
@@ -1090,6 +1107,7 @@
1090
1107
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1091
1108
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1092
1109
  --wds-notification-fill-error: var(--wds-color-red-200);
1110
+ --wds-nestable-list-paddings: var(--wds-space-0);
1093
1111
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
1094
1112
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
1095
1113
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
@@ -1166,6 +1184,7 @@
1166
1184
  --wds-list-item-indentation-level-3: var(--wds-space-700);
1167
1185
  --wds-list-item-indentation-level-2: var(--wds-space-300);
1168
1186
  --wds-list-item-gap-columns: var(--wds-space-600);
1187
+ --wds-linear-progress-bar-value-gap: var(--wds-space-300);
1169
1188
  --wds-linear-progress-bar-border-radius: var(--wds-border-radius-0);
1170
1189
  --wds-internal-color-picker-padding-vertical: var(--wds-space-300);
1171
1190
  --wds-internal-color-picker-padding-horizontal: var(--wds-space-400);
@@ -1539,6 +1558,7 @@
1539
1558
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1540
1559
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1541
1560
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1561
+ --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1542
1562
  --wds-status-toast-text-font-size: var(--wds-font-size-body-tiny);
1543
1563
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1544
1564
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1598,6 +1618,7 @@
1598
1618
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1599
1619
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1600
1620
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1621
+ --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1601
1622
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
1602
1623
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-4);
1603
1624
  --wds-message-modal-text-font-size: var(--wds-font-size-body-small);
@@ -1644,6 +1665,7 @@
1644
1665
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1645
1666
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
1646
1667
  --wds-list-item-action-fill: var(--wds-color-fill-standard-tertiary);
1668
+ --wds-linear-progress-bar-label-font-letter-spacing: var(--wds-font-letter-spacing-heading-6);
1647
1669
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1648
1670
  --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1649
1671
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
@@ -1900,6 +1922,7 @@
1900
1922
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-tiny);
1901
1923
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-small);
1902
1924
  --wds-add-item-label-color: var(--wds-color-text-primary);
1925
+ --wds-add-item-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1903
1926
  --wds-add-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1904
1927
  --wds-add-item-border-color-hover: var(--wds-color-border-standard-primary-hover);
1905
1928
  --wds-add-item-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
@@ -1937,6 +1960,7 @@
1937
1960
  --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
1938
1961
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1939
1962
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-small);
1963
+ --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-heading-6);
1940
1964
  --wds-input-value-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1941
1965
  --wds-input-value-font-line-height-small: var(--wds-font-line-height-body-tiny);
1942
1966
  --wds-input-value-font-line-height-medium: var(--wds-font-line-height-body-small);
package/wixel/all.scss CHANGED
@@ -603,11 +603,13 @@
603
603
  --wds-side-panel-header-padding-vertical: var(--wds-space-400);
604
604
  --wds-side-panel-header-padding-right: var(--wds-space-200);
605
605
  --wds-side-panel-header-padding-left: var(--wds-space-600);
606
+ --wds-side-panel-header-divider-height: var(--wds-border-width-100);
606
607
  --wds-side-panel-footnote-padding-vertical: var(--wds-space-200);
607
608
  --wds-side-panel-footnote-padding-horizontal: var(--wds-space-600);
608
609
  --wds-side-panel-footer-padding-vertical: var(--wds-space-400);
609
610
  --wds-side-panel-footer-padding-horizontal: var(--wds-space-600);
610
611
  --wds-side-panel-footer-fill: var(--wds-color-white-transparent-0);
612
+ --wds-side-panel-footer-divider-height: var(--wds-border-width-100);
611
613
  --wds-side-panel-footer-border-width: var(--wds-border-width-200);
612
614
  --wds-side-panel-floating-header-padding-vertical: var(--wds-space-475);
613
615
  --wds-side-panel-floating-header-padding-right: var(--wds-space-400);
@@ -715,6 +717,8 @@
715
717
  --wds-segmented-toggle-icononly-padding-horizontal-medium: var(--wds-space-175);
716
718
  --wds-segmented-toggle-fill-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
717
719
  --wds-segmented-toggle-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
720
+ --wds-segmented-toggle-container-border-radius-small: var(--wds-border-radius-400);
721
+ --wds-segmented-toggle-container-border-radius-medium: var(--wds-border-radius-400);
718
722
  --wds-segmented-toggle-border-width-selected: var(--wds-border-width-none);
719
723
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-none);
720
724
  --wds-segmented-toggle-border-width: var(--wds-border-width-none);
@@ -787,6 +791,7 @@
787
791
  --wds-notification-fill-standard: var(--wds-color-blue-200);
788
792
  --wds-notification-fill-premium: var(--wds-color-purple-200);
789
793
  --wds-notification-fill-error: var(--wds-color-red-200);
794
+ --wds-nestable-list-paddings: var(--wds-space-0);
790
795
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
791
796
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
792
797
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
@@ -863,6 +868,7 @@
863
868
  --wds-list-item-action-gap: var(--wds-space-0);
864
869
  --wds-list-item-action-border-radius: var(--wds-border-radius-400);
865
870
  --wds-list-item-action-affix-margin: var(--wds-space-100);
871
+ --wds-linear-progress-bar-value-gap: var(--wds-space-300);
866
872
  --wds-linear-progress-bar-border-radius: var(--wds-border-radius-0);
867
873
  --wds-internal-color-picker-padding-vertical: var(--wds-space-300);
868
874
  --wds-internal-color-picker-padding-horizontal: var(--wds-space-400);
@@ -895,6 +901,19 @@
895
901
  --wds-input-area-padding-left-medium: var(--wds-space-400);
896
902
  --wds-input-area-border-radius-default-small: var(--wds-border-radius-400);
897
903
  --wds-input-area-border-radius-default-medium: var(--wds-border-radius-600);
904
+ --wds-inner-shadow-y-secondary: var(--wds-shadow-y-0);
905
+ --wds-inner-shadow-y-primary: var(--wds-shadow-y-0);
906
+ --wds-inner-shadow-y-input: var(--wds-shadow-y-0);
907
+ --wds-inner-shadow-x-secondary: var(--wds-shadow-x-0);
908
+ --wds-inner-shadow-x-primary: var(--wds-shadow-x-0);
909
+ --wds-inner-shadow-x-input: var(--wds-shadow-x-0);
910
+ --wds-inner-shadow-fill-track: var(--wds-color-black-100-transparent-0);
911
+ --wds-inner-shadow-fill-secondary: var(--wds-color-white-transparent-0);
912
+ --wds-inner-shadow-fill-primary: var(--wds-color-white-transparent-0);
913
+ --wds-inner-shadow-fill-input: var(--wds-color-black-100-transparent-0);
914
+ --wds-inner-shadow-blur-secondary: var(--wds-shadow-blur-0);
915
+ --wds-inner-shadow-blur-primary: var(--wds-shadow-blur-0);
916
+ --wds-inner-shadow-blur-input: var(--wds-shadow-blur-0);
898
917
  --wds-image-border-radius-none: var(--wds-border-radius-0);
899
918
  --wds-image-border-radius-default: var(--wds-border-radius-200);
900
919
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
@@ -1525,6 +1544,7 @@
1525
1544
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1526
1545
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1527
1546
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1547
+ --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1528
1548
  --wds-status-toast-text-font-size: var(--wds-font-size-body-tiny);
1529
1549
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1530
1550
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1588,6 +1608,7 @@
1588
1608
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1589
1609
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1590
1610
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1611
+ --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1591
1612
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
1592
1613
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-4);
1593
1614
  --wds-message-modal-text-font-size: var(--wds-font-size-body-small);
@@ -1634,6 +1655,7 @@
1634
1655
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1635
1656
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
1636
1657
  --wds-list-item-action-fill: var(--wds-color-fill-standard-tertiary);
1658
+ --wds-linear-progress-bar-label-font-letter-spacing: var(--wds-font-letter-spacing-heading-6);
1637
1659
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1638
1660
  --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1639
1661
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
@@ -1900,6 +1922,7 @@
1900
1922
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-tiny);
1901
1923
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-small);
1902
1924
  --wds-add-item-label-color: var(--wds-color-text-primary);
1925
+ --wds-add-item-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1903
1926
  --wds-add-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1904
1927
  --wds-add-item-border-color-hover: var(--wds-color-border-standard-primary-hover);
1905
1928
  --wds-add-item-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
@@ -1937,6 +1960,7 @@
1937
1960
  --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
1938
1961
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1939
1962
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-small);
1963
+ --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-heading-6);
1940
1964
  --wds-input-value-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1941
1965
  --wds-input-value-font-line-height-small: var(--wds-font-line-height-body-tiny);
1942
1966
  --wds-input-value-font-line-height-medium: var(--wds-font-line-height-body-small);