@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/odeditor/all.scss CHANGED
@@ -80,6 +80,8 @@
80
80
  --wds-sidebar-item-level-1-fill-dark-active: #42454c;
81
81
  --wds-sidebar-divider-fill-dark-default: #42454c;
82
82
  --wds-sidebar-clear-button-fill: #5a5d63;
83
+ --wds-side-panel-header-divider-height: 0;
84
+ --wds-side-panel-footer-divider-height: 0;
83
85
  --wds-side-panel-floating-max-height: 576px;
84
86
  --wds-side-panel-control-layout-divider-border-width: false;
85
87
  --wds-shadow-y-tertiary-toggle-button: 0.4px;
@@ -409,7 +411,7 @@
409
411
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
410
412
  --wds-toggle-button-padding-small: var(--wds-space-400);
411
413
  --wds-toggle-button-padding-medium-round: var(--wds-space-500);
412
- --wds-toggle-button-padding-medium: var(--wds-space-500);
414
+ --wds-toggle-button-padding-medium: var(--wds-space-300);
413
415
  --wds-toggle-button-padding-large-round: var(--wds-space-600);
414
416
  --wds-toggle-button-padding-large: var(--wds-space-600);
415
417
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-semi-bold);
@@ -514,6 +516,7 @@
514
516
  --wds-table-list-item-gap: var(--wds-space-400);
515
517
  --wds-table-list-item-controls-padding-medium: var(--wds-space-200);
516
518
  --wds-table-list-item-border-radius: var(--wds-border-radius-600);
519
+ --wds-table-list-item-border-color: var(--wds-color-black-550);
517
520
  --wds-swatches-swatch-size-tiny: var(--wds-space-600);
518
521
  --wds-swatches-swatch-size-small: var(--wds-space-700);
519
522
  --wds-swatches-swatch-size-medium: var(--wds-space-800);
@@ -724,12 +727,14 @@
724
727
  --wds-segmented-toggle-icononly-padding-horizontal-medium: var(--wds-space-350);
725
728
  --wds-segmented-toggle-fill-disabled: var(--wds-color-black-750);
726
729
  --wds-segmented-toggle-fill: var(--wds-color-black-750);
730
+ --wds-segmented-toggle-container-border-radius-small: var(--wds-border-radius-400);
731
+ --wds-segmented-toggle-container-border-radius-medium: var(--wds-border-radius-400);
727
732
  --wds-segmented-toggle-border-width-selected: var(--wds-border-width-0);
728
733
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-0);
729
734
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-0);
730
735
  --wds-segmented-toggle-border-width: var(--wds-border-width-0);
731
- --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-400);
732
- --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-400);
736
+ --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-300);
737
+ --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-300);
733
738
  --wds-segmented-toggle-border-color-selected: var(--wds-color-black-100-transparent-0);
734
739
  --wds-segmented-toggle-border-color-hover: var(--wds-color-black-100-transparent-0);
735
740
  --wds-segmented-toggle-border-color-disabled: var(--wds-color-black-100-transparent-0);
@@ -752,10 +757,10 @@
752
757
  --wds-section-header-padding-vertical-small: var(--wds-space-200);
753
758
  --wds-section-header-padding-vertical-medium: var(--wds-space-300);
754
759
  --wds-section-header-font-weight: var(--wds-font-weight-semi-bold);
755
- --wds-search-border-radius-tiny: var(--wds-border-radius-200);
756
- --wds-search-border-radius-small: var(--wds-border-radius-200);
757
- --wds-search-border-radius-medium: var(--wds-border-radius-200);
758
- --wds-search-border-radius-large: var(--wds-border-radius-200);
760
+ --wds-search-border-radius-tiny: var(--wds-border-radius-full);
761
+ --wds-search-border-radius-small: var(--wds-border-radius-full);
762
+ --wds-search-border-radius-medium: var(--wds-border-radius-full);
763
+ --wds-search-border-radius-large: var(--wds-border-radius-full);
759
764
  --wds-scrollbar-fill-hover: var(--wds-color-black-400);
760
765
  --wds-scrollbar-fill-active: var(--wds-color-black-400);
761
766
  --wds-scrollbar-fill: var(--wds-color-black-550);
@@ -784,6 +789,7 @@
784
789
  --wds-popover-menu-paddings-horizontal: var(--wds-space-200);
785
790
  --wds-popover-menu-border-radius: var(--wds-border-radius-600);
786
791
  --wds-popover-border-width: var(--wds-border-width-none);
792
+ --wds-popover-border-radius: var(--wds-border-radius-600);
787
793
  --wds-popover-border-fill: var(--wds-color-black-100-transparent-0);
788
794
  --wds-palette-border: var(--wds-border-radius-200);
789
795
  --wds-pagination-padding-vertical: var(--wds-space-50);
@@ -808,6 +814,8 @@
808
814
  --wds-notification-fill-standard: var(--wds-color-blue-200);
809
815
  --wds-notification-fill-premium: var(--wds-color-purple-200);
810
816
  --wds-notification-fill-error: var(--wds-color-red-200);
817
+ --wds-nestable-list-paddings: var(--wds-space-200);
818
+ --wds-nestable-list-fill: var(--wds-color-white-transparent-0);
811
819
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
812
820
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
813
821
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
@@ -864,7 +872,6 @@
864
872
  --wds-linear-progress-bar-value-gap: var(--wds-space-100);
865
873
  --wds-linear-progress-bar-label-font-letter-spacing: var(--wds-font-letter-spacing-0);
866
874
  --wds-linear-progress-bar-border-radius: var(--wds-border-radius-100);
867
- --wds-internal-linear-progress-bar-knob-offset: var(--wds-space-100);
868
875
  --wds-internal-button-border-width: var(--wds-border-width-100);
869
876
  --wds-internal-angle-input-knob-offset-bottom: var(--wds-space-100);
870
877
  --wds-internal-angle-input-knob-offset: var(--wds-space-50);
@@ -910,6 +917,7 @@
910
917
  --wds-inner-shadow-x-secondary: var(--wds-shadow-x-25);
911
918
  --wds-inner-shadow-x-primary: var(--wds-shadow-x-25);
912
919
  --wds-inner-shadow-x-input: var(--wds-shadow-x-25);
920
+ --wds-inner-shadow-fill-track: var(--wds-color-black-100-transparent-20);
913
921
  --wds-inner-shadow-fill-secondary: var(--wds-color-white);
914
922
  --wds-inner-shadow-fill-primary: var(--wds-color-white);
915
923
  --wds-inner-shadow-fill-input: var(--wds-color-black-300-transparent-20);
@@ -942,7 +950,7 @@
942
950
  --wds-icon-button-color-border-light-secondary-disabled: var(--wds-color-black-700);
943
951
  --wds-icon-button-color-border-dark-secondary-disabled: var(--wds-color-black-700);
944
952
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
945
- --wds-form-field-label-gap-small: var(--wds-space-300);
953
+ --wds-form-field-label-gap-small: var(--wds-space-200);
946
954
  --wds-form-field-label-font-weight: var(--wds-font-weight-medium);
947
955
  --wds-font-weight-heading-6: var(--wds-font-weight-regular);
948
956
  --wds-font-weight-heading-5: var(--wds-font-weight-bold);
@@ -976,7 +984,7 @@
976
984
  --wds-floating-helper-main-action-padding-top: var(--wds-space-400);
977
985
  --wds-fill-button-border-width: var(--wds-border-width-200);
978
986
  --wds-field-set-label-gap-tiny: var(--wds-space-150);
979
- --wds-field-set-label-gap-small: var(--wds-space-300);
987
+ --wds-field-set-label-gap-small: var(--wds-space-200);
980
988
  --wds-field-set-label-font-weight: var(--wds-font-weight-medium);
981
989
  --wds-field-set-gap-small: var(--wds-space-150);
982
990
  --wds-field-set-gap-medium: var(--wds-space-300);
@@ -1678,6 +1686,7 @@
1678
1686
  --wds-list-item-action-label-fill-active: var(--wds-color-text-standard-primary);
1679
1687
  --wds-list-item-action-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1680
1688
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
1689
+ --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1681
1690
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1682
1691
  --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1683
1692
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
@@ -1913,6 +1922,7 @@
1913
1922
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-tiny);
1914
1923
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-small);
1915
1924
  --wds-add-item-label-color: var(--wds-color-text-standard-primary);
1925
+ --wds-add-item-fill-pressed: var(--wds-color-fill-dark-secondary-active);
1916
1926
  --wds-add-item-fill-hover: var(--wds-color-fill-dark-secondary-hover);
1917
1927
  --wds-add-item-border-color-hover: var(--wds-color-fill-dark-primary);
1918
1928
  --wds-add-item-border-color-disabled: var(--wds-color-fill-dark-primary-disabled);
@@ -1950,7 +1960,6 @@
1950
1960
  --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
1951
1961
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-small);
1952
1962
  --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
1963
  --wds-input-value-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1955
1964
  --wds-input-value-font-line-height-small: var(--wds-font-line-height-body-small);
1956
1965
  --wds-input-value-font-line-height-medium: var(--wds-font-line-height-body-small);
package/odeditor/all.st.css CHANGED
@@ -20,6 +20,7 @@
20
20
  @property st-global(--wds-add-item-fill);
21
21
  @property st-global(--wds-add-item-fill-disabled);
22
22
  @property st-global(--wds-add-item-fill-hover);
23
+ @property st-global(--wds-add-item-fill-pressed);
23
24
  @property st-global(--wds-add-item-label-color);
24
25
  @property st-global(--wds-add-item-padding-horizontal-large);
25
26
  @property st-global(--wds-add-item-padding-horizontal-tiny);
@@ -1046,6 +1047,7 @@
1046
1047
  @property st-global(--wds-inner-shadow-fill-input);
1047
1048
  @property st-global(--wds-inner-shadow-fill-primary);
1048
1049
  @property st-global(--wds-inner-shadow-fill-secondary);
1050
+ @property st-global(--wds-inner-shadow-fill-track);
1049
1051
  @property st-global(--wds-inner-shadow-x-input);
1050
1052
  @property st-global(--wds-inner-shadow-x-primary);
1051
1053
  @property st-global(--wds-inner-shadow-x-secondary);
@@ -1112,7 +1114,6 @@
1112
1114
  @property st-global(--wds-internal-image-width-medium);
1113
1115
  @property st-global(--wds-internal-image-width-small);
1114
1116
  @property st-global(--wds-internal-image-width-tiny);
1115
- @property st-global(--wds-internal-linear-progress-bar-knob-offset);
1116
1117
  @property st-global(--wds-internal-thumbnail-illustration-size-large);
1117
1118
  @property st-global(--wds-internal-thumbnail-illustration-size-medium);
1118
1119
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
@@ -1221,6 +1222,8 @@
1221
1222
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
1222
1223
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
1223
1224
  @property st-global(--wds-multiselect-icon-fill);
1225
+ @property st-global(--wds-nestable-list-fill);
1226
+ @property st-global(--wds-nestable-list-paddings);
1224
1227
  @property st-global(--wds-notification-fill-error);
1225
1228
  @property st-global(--wds-notification-fill-premium);
1226
1229
  @property st-global(--wds-notification-fill-standard);
@@ -1250,6 +1253,7 @@
1250
1253
  @property st-global(--wds-pagination-padding-vertical);
1251
1254
  @property st-global(--wds-palette-border);
1252
1255
  @property st-global(--wds-popover-border-fill);
1256
+ @property st-global(--wds-popover-border-radius);
1253
1257
  @property st-global(--wds-popover-border-width);
1254
1258
  @property st-global(--wds-popover-fill);
1255
1259
  @property st-global(--wds-popover-menu-border-radius);
@@ -1335,6 +1339,8 @@
1335
1339
  @property st-global(--wds-segmented-toggle-border-width-default);
1336
1340
  @property st-global(--wds-segmented-toggle-border-width-hover);
1337
1341
  @property st-global(--wds-segmented-toggle-border-width-selected);
1342
+ @property st-global(--wds-segmented-toggle-container-border-radius-medium);
1343
+ @property st-global(--wds-segmented-toggle-container-border-radius-small);
1338
1344
  @property st-global(--wds-segmented-toggle-fill);
1339
1345
  @property st-global(--wds-segmented-toggle-fill-default);
1340
1346
  @property st-global(--wds-segmented-toggle-fill-disabled);
@@ -1519,11 +1525,13 @@
1519
1525
  @property st-global(--wds-side-panel-footer-background-blur);
1520
1526
  @property st-global(--wds-side-panel-footer-border-fill);
1521
1527
  @property st-global(--wds-side-panel-footer-border-width);
1528
+ @property st-global(--wds-side-panel-footer-divider-height);
1522
1529
  @property st-global(--wds-side-panel-footer-fill);
1523
1530
  @property st-global(--wds-side-panel-footer-padding-horizontal);
1524
1531
  @property st-global(--wds-side-panel-footer-padding-vertical);
1525
1532
  @property st-global(--wds-side-panel-footnote-padding-horizontal);
1526
1533
  @property st-global(--wds-side-panel-footnote-padding-vertical);
1534
+ @property st-global(--wds-side-panel-header-divider-height);
1527
1535
  @property st-global(--wds-side-panel-header-padding-left);
1528
1536
  @property st-global(--wds-side-panel-header-padding-right);
1529
1537
  @property st-global(--wds-side-panel-header-padding-vertical);
@@ -1682,6 +1690,7 @@
1682
1690
  @property st-global(--wds-swatches-swatch-size-medium);
1683
1691
  @property st-global(--wds-swatches-swatch-size-small);
1684
1692
  @property st-global(--wds-swatches-swatch-size-tiny);
1693
+ @property st-global(--wds-table-list-item-border-color);
1685
1694
  @property st-global(--wds-table-list-item-border-radius);
1686
1695
  @property st-global(--wds-table-list-item-controls-padding-medium);
1687
1696
  @property st-global(--wds-table-list-item-drag-handle-color);
@@ -1999,6 +2008,7 @@
1999
2008
  --wds-add-item-fill: #f8f6f6;
2000
2009
  --wds-add-item-fill-disabled: rgba(19, 23, 32, .05);
2001
2010
  --wds-add-item-fill-hover: #e8e7e7;
2011
+ --wds-add-item-fill-pressed: #dedede;
2002
2012
  --wds-add-item-label-color: #151414;
2003
2013
  --wds-add-item-padding-horizontal-large: 28px;
2004
2014
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -2829,7 +2839,7 @@
2829
2839
  --wds-field-set-label-font-size-small: 12px;
2830
2840
  --wds-field-set-label-font-size-tiny: 10px;
2831
2841
  --wds-field-set-label-font-weight: 500;
2832
- --wds-field-set-label-gap-small: 12px;
2842
+ --wds-field-set-label-gap-small: 8px;
2833
2843
  --wds-field-set-label-gap-tiny: 6px;
2834
2844
  --wds-fill-button-border-color: conic-gradient(from 180deg at 50% 50%, #3747FE 0deg, #4076FD 36deg, #B522FE 72deg, #FF1125 144deg, #F7851A 216deg, #FFCC56 251deg, #37FFC3 324deg, #37A8E8 338deg, #3775D5 352deg, #3747FE 360deg);
2835
2845
  --wds-fill-button-border-width: 2px;
@@ -2900,7 +2910,7 @@
2900
2910
  --wds-form-field-label-font-size-small: 12px;
2901
2911
  --wds-form-field-label-font-size-tiny: 10px;
2902
2912
  --wds-form-field-label-font-weight: 500;
2903
- --wds-form-field-label-gap-small: 12px;
2913
+ --wds-form-field-label-gap-small: 8px;
2904
2914
  --wds-form-field-label-gap-tiny: 6px;
2905
2915
  --wds-form-field-label-line-height-small: 16px;
2906
2916
  --wds-form-field-label-line-height-tiny: 12px;
@@ -3025,6 +3035,7 @@
3025
3035
  --wds-inner-shadow-fill-input: rgba(118, 117, 116, 0.2);
3026
3036
  --wds-inner-shadow-fill-primary: #ffffff;
3027
3037
  --wds-inner-shadow-fill-secondary: #ffffff;
3038
+ --wds-inner-shadow-fill-track: rgba(19, 23, 32, .2);
3028
3039
  --wds-inner-shadow-x-input: 1px;
3029
3040
  --wds-inner-shadow-x-primary: 1px;
3030
3041
  --wds-inner-shadow-x-secondary: 1px;
@@ -3091,14 +3102,13 @@
3091
3102
  --wds-internal-image-width-medium: 156px;
3092
3103
  --wds-internal-image-width-small: 122px;
3093
3104
  --wds-internal-image-width-tiny: 106px;
3094
- --wds-internal-linear-progress-bar-knob-offset: 4px;
3095
3105
  --wds-internal-thumbnail-illustration-size-large: 114px;
3096
3106
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3097
3107
  --wds-internal-thumbnail-illustration-size-small: 51px;
3098
3108
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
3099
3109
  --wds-linear-progress-bar-border-radius: 2px;
3100
3110
  --wds-linear-progress-bar-label-font-letter-spacing: 0px;
3101
- --wds-linear-progress-bar-label-font-line-height: 18px;
3111
+ --wds-linear-progress-bar-label-font-line-height: 16px;
3102
3112
  --wds-linear-progress-bar-value-gap: 4px;
3103
3113
  --wds-list-item-action-affix-margin: 4px;
3104
3114
  --wds-list-item-action-border-radius: 8px;
@@ -3200,6 +3210,8 @@
3200
3210
  --wds-mobile-modal-footer-padding-horizontal: 24px;
3201
3211
  --wds-mobile-modal-footer-padding-vertical: 24px;
3202
3212
  --wds-multiselect-icon-fill: #383838;
3213
+ --wds-nestable-list-fill: rgba(255, 255, 255, 0);
3214
+ --wds-nestable-list-paddings: 8px;
3203
3215
  --wds-notification-fill-error: #e55c5e;
3204
3216
  --wds-notification-fill-premium: #8b2df5;
3205
3217
  --wds-notification-fill-standard: #597dff;
@@ -3229,6 +3241,7 @@
3229
3241
  --wds-pagination-padding-vertical: 2px;
3230
3242
  --wds-palette-border: 4px;
3231
3243
  --wds-popover-border-fill: rgba(19, 23, 32, 0);
3244
+ --wds-popover-border-radius: 12px;
3232
3245
  --wds-popover-border-width: 0px;
3233
3246
  --wds-popover-fill: #ffffff;
3234
3247
  --wds-popover-menu-border-radius: 12px;
@@ -3273,10 +3286,10 @@
3273
3286
  --wds-scrollbar-fill: #dedede;
3274
3287
  --wds-scrollbar-fill-active: #767574;
3275
3288
  --wds-scrollbar-fill-hover: #767574;
3276
- --wds-search-border-radius-large: 4px;
3277
- --wds-search-border-radius-medium: 4px;
3278
- --wds-search-border-radius-small: 4px;
3279
- --wds-search-border-radius-tiny: 4px;
3289
+ --wds-search-border-radius-large: 1000px;
3290
+ --wds-search-border-radius-medium: 1000px;
3291
+ --wds-search-border-radius-small: 1000px;
3292
+ --wds-search-border-radius-tiny: 1000px;
3280
3293
  --wds-section-header-fill-neutral: #ffffff;
3281
3294
  --wds-section-header-font-weight: 600;
3282
3295
  --wds-section-header-label-fill-neutral: #767574;
@@ -3308,12 +3321,14 @@
3308
3321
  --wds-segmented-toggle-border-color-hover: rgba(19, 23, 32, 0);
3309
3322
  --wds-segmented-toggle-border-color-selected: rgba(19, 23, 32, 0);
3310
3323
  --wds-segmented-toggle-border-hover: #acbeff;
3311
- --wds-segmented-toggle-border-radius-medium: 8px;
3312
- --wds-segmented-toggle-border-radius-small: 8px;
3324
+ --wds-segmented-toggle-border-radius-medium: 6px;
3325
+ --wds-segmented-toggle-border-radius-small: 6px;
3313
3326
  --wds-segmented-toggle-border-width: 0px;
3314
3327
  --wds-segmented-toggle-border-width-default: 0px;
3315
3328
  --wds-segmented-toggle-border-width-hover: 0px;
3316
3329
  --wds-segmented-toggle-border-width-selected: 0px;
3330
+ --wds-segmented-toggle-container-border-radius-medium: 8px;
3331
+ --wds-segmented-toggle-container-border-radius-small: 8px;
3317
3332
  --wds-segmented-toggle-fill: #f8f6f6;
3318
3333
  --wds-segmented-toggle-fill-default: #ffffff;
3319
3334
  --wds-segmented-toggle-fill-disabled: #f8f6f6;
@@ -3498,11 +3513,13 @@
3498
3513
  --wds-side-panel-footer-background-blur: 0px;
3499
3514
  --wds-side-panel-footer-border-fill: rgba(255, 255, 255, 0);
3500
3515
  --wds-side-panel-footer-border-width: 0px;
3516
+ --wds-side-panel-footer-divider-height: 0;
3501
3517
  --wds-side-panel-footer-fill: #ffffff;
3502
3518
  --wds-side-panel-footer-padding-horizontal: 16px;
3503
3519
  --wds-side-panel-footer-padding-vertical: 16px;
3504
3520
  --wds-side-panel-footnote-padding-horizontal: 16px;
3505
3521
  --wds-side-panel-footnote-padding-vertical: 8px;
3522
+ --wds-side-panel-header-divider-height: 0;
3506
3523
  --wds-side-panel-header-padding-left: 16px;
3507
3524
  --wds-side-panel-header-padding-right: 12px;
3508
3525
  --wds-side-panel-header-padding-vertical: 16px;
@@ -3661,6 +3678,7 @@
3661
3678
  --wds-swatches-swatch-size-medium: 32px;
3662
3679
  --wds-swatches-swatch-size-small: 28px;
3663
3680
  --wds-swatches-swatch-size-tiny: 24px;
3681
+ --wds-table-list-item-border-color: #dedede;
3664
3682
  --wds-table-list-item-border-radius: 12px;
3665
3683
  --wds-table-list-item-controls-padding-medium: 8px;
3666
3684
  --wds-table-list-item-drag-handle-color: #151414;
@@ -3808,7 +3826,7 @@
3808
3826
  --wds-toggle-button-label-font-weight-square: 600;
3809
3827
  --wds-toggle-button-padding-large: 24px;
3810
3828
  --wds-toggle-button-padding-large-round: 24px;
3811
- --wds-toggle-button-padding-medium: 20px;
3829
+ --wds-toggle-button-padding-medium: 12px;
3812
3830
  --wds-toggle-button-padding-medium-round: 20px;
3813
3831
  --wds-toggle-button-padding-small: 16px;
3814
3832
  --wds-toggle-button-padding-small-round: 16px;
package/odeditor/component.st.css CHANGED
@@ -20,6 +20,7 @@
20
20
  @property st-global(--wds-add-item-fill);
21
21
  @property st-global(--wds-add-item-fill-disabled);
22
22
  @property st-global(--wds-add-item-fill-hover);
23
+ @property st-global(--wds-add-item-fill-pressed);
23
24
  @property st-global(--wds-add-item-label-color);
24
25
  @property st-global(--wds-add-item-padding-horizontal-large);
25
26
  @property st-global(--wds-add-item-padding-horizontal-tiny);
@@ -550,7 +551,6 @@
550
551
  @property st-global(--wds-internal-image-width-medium);
551
552
  @property st-global(--wds-internal-image-width-small);
552
553
  @property st-global(--wds-internal-image-width-tiny);
553
- @property st-global(--wds-internal-linear-progress-bar-knob-offset);
554
554
  @property st-global(--wds-internal-thumbnail-illustration-size-large);
555
555
  @property st-global(--wds-internal-thumbnail-illustration-size-medium);
556
556
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
@@ -659,6 +659,8 @@
659
659
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
660
660
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
661
661
  @property st-global(--wds-multiselect-icon-fill);
662
+ @property st-global(--wds-nestable-list-fill);
663
+ @property st-global(--wds-nestable-list-paddings);
662
664
  @property st-global(--wds-notification-fill-error);
663
665
  @property st-global(--wds-notification-fill-premium);
664
666
  @property st-global(--wds-notification-fill-standard);
@@ -688,6 +690,7 @@
688
690
  @property st-global(--wds-pagination-padding-vertical);
689
691
  @property st-global(--wds-palette-border);
690
692
  @property st-global(--wds-popover-border-fill);
693
+ @property st-global(--wds-popover-border-radius);
691
694
  @property st-global(--wds-popover-border-width);
692
695
  @property st-global(--wds-popover-fill);
693
696
  @property st-global(--wds-popover-menu-border-radius);
@@ -773,6 +776,8 @@
773
776
  @property st-global(--wds-segmented-toggle-border-width-default);
774
777
  @property st-global(--wds-segmented-toggle-border-width-hover);
775
778
  @property st-global(--wds-segmented-toggle-border-width-selected);
779
+ @property st-global(--wds-segmented-toggle-container-border-radius-medium);
780
+ @property st-global(--wds-segmented-toggle-container-border-radius-small);
776
781
  @property st-global(--wds-segmented-toggle-fill);
777
782
  @property st-global(--wds-segmented-toggle-fill-default);
778
783
  @property st-global(--wds-segmented-toggle-fill-disabled);
@@ -852,11 +857,13 @@
852
857
  @property st-global(--wds-side-panel-footer-background-blur);
853
858
  @property st-global(--wds-side-panel-footer-border-fill);
854
859
  @property st-global(--wds-side-panel-footer-border-width);
860
+ @property st-global(--wds-side-panel-footer-divider-height);
855
861
  @property st-global(--wds-side-panel-footer-fill);
856
862
  @property st-global(--wds-side-panel-footer-padding-horizontal);
857
863
  @property st-global(--wds-side-panel-footer-padding-vertical);
858
864
  @property st-global(--wds-side-panel-footnote-padding-horizontal);
859
865
  @property st-global(--wds-side-panel-footnote-padding-vertical);
866
+ @property st-global(--wds-side-panel-header-divider-height);
860
867
  @property st-global(--wds-side-panel-header-padding-left);
861
868
  @property st-global(--wds-side-panel-header-padding-right);
862
869
  @property st-global(--wds-side-panel-header-padding-vertical);
@@ -970,6 +977,7 @@
970
977
  @property st-global(--wds-swatches-swatch-size-medium);
971
978
  @property st-global(--wds-swatches-swatch-size-small);
972
979
  @property st-global(--wds-swatches-swatch-size-tiny);
980
+ @property st-global(--wds-table-list-item-border-color);
973
981
  @property st-global(--wds-table-list-item-border-radius);
974
982
  @property st-global(--wds-table-list-item-controls-padding-medium);
975
983
  @property st-global(--wds-table-list-item-drag-handle-color);
@@ -1285,6 +1293,7 @@
1285
1293
  --wds-add-item-fill: #f8f6f6;
1286
1294
  --wds-add-item-fill-disabled: rgba(19, 23, 32, .05);
1287
1295
  --wds-add-item-fill-hover: #e8e7e7;
1296
+ --wds-add-item-fill-pressed: #dedede;
1288
1297
  --wds-add-item-label-color: #151414;
1289
1298
  --wds-add-item-padding-horizontal-large: 28px;
1290
1299
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -1622,7 +1631,7 @@
1622
1631
  --wds-field-set-label-font-size-small: 12px;
1623
1632
  --wds-field-set-label-font-size-tiny: 10px;
1624
1633
  --wds-field-set-label-font-weight: 500;
1625
- --wds-field-set-label-gap-small: 12px;
1634
+ --wds-field-set-label-gap-small: 8px;
1626
1635
  --wds-field-set-label-gap-tiny: 6px;
1627
1636
  --wds-fill-button-border-color: conic-gradient(from 180deg at 50% 50%, #3747FE 0deg, #4076FD 36deg, #B522FE 72deg, #FF1125 144deg, #F7851A 216deg, #FFCC56 251deg, #37FFC3 324deg, #37A8E8 338deg, #3775D5 352deg, #3747FE 360deg);
1628
1637
  --wds-fill-button-border-width: 2px;
@@ -1636,7 +1645,7 @@
1636
1645
  --wds-form-field-label-font-size-small: 12px;
1637
1646
  --wds-form-field-label-font-size-tiny: 10px;
1638
1647
  --wds-form-field-label-font-weight: 500;
1639
- --wds-form-field-label-gap-small: 12px;
1648
+ --wds-form-field-label-gap-small: 8px;
1640
1649
  --wds-form-field-label-gap-tiny: 6px;
1641
1650
  --wds-form-field-label-line-height-small: 16px;
1642
1651
  --wds-form-field-label-line-height-tiny: 12px;
@@ -1815,14 +1824,13 @@
1815
1824
  --wds-internal-image-width-medium: 156px;
1816
1825
  --wds-internal-image-width-small: 122px;
1817
1826
  --wds-internal-image-width-tiny: 106px;
1818
- --wds-internal-linear-progress-bar-knob-offset: 4px;
1819
1827
  --wds-internal-thumbnail-illustration-size-large: 114px;
1820
1828
  --wds-internal-thumbnail-illustration-size-medium: 72px;
1821
1829
  --wds-internal-thumbnail-illustration-size-small: 51px;
1822
1830
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1823
1831
  --wds-linear-progress-bar-border-radius: 2px;
1824
1832
  --wds-linear-progress-bar-label-font-letter-spacing: 0px;
1825
- --wds-linear-progress-bar-label-font-line-height: 18px;
1833
+ --wds-linear-progress-bar-label-font-line-height: 16px;
1826
1834
  --wds-linear-progress-bar-value-gap: 4px;
1827
1835
  --wds-list-item-action-affix-margin: 4px;
1828
1836
  --wds-list-item-action-border-radius: 8px;
@@ -1924,6 +1932,8 @@
1924
1932
  --wds-mobile-modal-footer-padding-horizontal: 24px;
1925
1933
  --wds-mobile-modal-footer-padding-vertical: 24px;
1926
1934
  --wds-multiselect-icon-fill: #383838;
1935
+ --wds-nestable-list-fill: rgba(255, 255, 255, 0);
1936
+ --wds-nestable-list-paddings: 8px;
1927
1937
  --wds-notification-fill-error: #e55c5e;
1928
1938
  --wds-notification-fill-premium: #8b2df5;
1929
1939
  --wds-notification-fill-standard: #597dff;
@@ -1953,6 +1963,7 @@
1953
1963
  --wds-pagination-padding-vertical: 2px;
1954
1964
  --wds-palette-border: 4px;
1955
1965
  --wds-popover-border-fill: rgba(19, 23, 32, 0);
1966
+ --wds-popover-border-radius: 12px;
1956
1967
  --wds-popover-border-width: 0px;
1957
1968
  --wds-popover-fill: #ffffff;
1958
1969
  --wds-popover-menu-border-radius: 12px;
@@ -1997,10 +2008,10 @@
1997
2008
  --wds-scrollbar-fill: #dedede;
1998
2009
  --wds-scrollbar-fill-active: #767574;
1999
2010
  --wds-scrollbar-fill-hover: #767574;
2000
- --wds-search-border-radius-large: 4px;
2001
- --wds-search-border-radius-medium: 4px;
2002
- --wds-search-border-radius-small: 4px;
2003
- --wds-search-border-radius-tiny: 4px;
2011
+ --wds-search-border-radius-large: 1000px;
2012
+ --wds-search-border-radius-medium: 1000px;
2013
+ --wds-search-border-radius-small: 1000px;
2014
+ --wds-search-border-radius-tiny: 1000px;
2004
2015
  --wds-section-header-fill-neutral: #ffffff;
2005
2016
  --wds-section-header-font-weight: 600;
2006
2017
  --wds-section-header-label-fill-neutral: #767574;
@@ -2032,12 +2043,14 @@
2032
2043
  --wds-segmented-toggle-border-color-hover: rgba(19, 23, 32, 0);
2033
2044
  --wds-segmented-toggle-border-color-selected: rgba(19, 23, 32, 0);
2034
2045
  --wds-segmented-toggle-border-hover: #acbeff;
2035
- --wds-segmented-toggle-border-radius-medium: 8px;
2036
- --wds-segmented-toggle-border-radius-small: 8px;
2046
+ --wds-segmented-toggle-border-radius-medium: 6px;
2047
+ --wds-segmented-toggle-border-radius-small: 6px;
2037
2048
  --wds-segmented-toggle-border-width: 0px;
2038
2049
  --wds-segmented-toggle-border-width-default: 0px;
2039
2050
  --wds-segmented-toggle-border-width-hover: 0px;
2040
2051
  --wds-segmented-toggle-border-width-selected: 0px;
2052
+ --wds-segmented-toggle-container-border-radius-medium: 8px;
2053
+ --wds-segmented-toggle-container-border-radius-small: 8px;
2041
2054
  --wds-segmented-toggle-fill: #f8f6f6;
2042
2055
  --wds-segmented-toggle-fill-default: #ffffff;
2043
2056
  --wds-segmented-toggle-fill-disabled: #f8f6f6;
@@ -2117,11 +2130,13 @@
2117
2130
  --wds-side-panel-footer-background-blur: 0px;
2118
2131
  --wds-side-panel-footer-border-fill: rgba(255, 255, 255, 0);
2119
2132
  --wds-side-panel-footer-border-width: 0px;
2133
+ --wds-side-panel-footer-divider-height: 0;
2120
2134
  --wds-side-panel-footer-fill: #ffffff;
2121
2135
  --wds-side-panel-footer-padding-horizontal: 16px;
2122
2136
  --wds-side-panel-footer-padding-vertical: 16px;
2123
2137
  --wds-side-panel-footnote-padding-horizontal: 16px;
2124
2138
  --wds-side-panel-footnote-padding-vertical: 8px;
2139
+ --wds-side-panel-header-divider-height: 0;
2125
2140
  --wds-side-panel-header-padding-left: 16px;
2126
2141
  --wds-side-panel-header-padding-right: 12px;
2127
2142
  --wds-side-panel-header-padding-vertical: 16px;
@@ -2235,6 +2250,7 @@
2235
2250
  --wds-swatches-swatch-size-medium: 32px;
2236
2251
  --wds-swatches-swatch-size-small: 28px;
2237
2252
  --wds-swatches-swatch-size-tiny: 24px;
2253
+ --wds-table-list-item-border-color: #dedede;
2238
2254
  --wds-table-list-item-border-radius: 12px;
2239
2255
  --wds-table-list-item-controls-padding-medium: 8px;
2240
2256
  --wds-table-list-item-drag-handle-color: #151414;
@@ -2382,7 +2398,7 @@
2382
2398
  --wds-toggle-button-label-font-weight-square: 600;
2383
2399
  --wds-toggle-button-padding-large: 24px;
2384
2400
  --wds-toggle-button-padding-large-round: 24px;
2385
- --wds-toggle-button-padding-medium: 20px;
2401
+ --wds-toggle-button-padding-medium: 12px;
2386
2402
  --wds-toggle-button-padding-medium-round: 20px;
2387
2403
  --wds-toggle-button-padding-small: 16px;
2388
2404
  --wds-toggle-button-padding-small-round: 16px;
package/odeditor/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(118, 117, 116, 0.2);
899
900
  --wds-inner-shadow-fill-primary: #ffffff;
900
901
  --wds-inner-shadow-fill-secondary: #ffffff;
902
+ --wds-inner-shadow-fill-track: rgba(19, 23, 32, .2);
901
903
  --wds-inner-shadow-x-input: 1px;
902
904
  --wds-inner-shadow-x-primary: 1px;
903
905
  --wds-inner-shadow-x-secondary: 1px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.130.0",
3
+ "version": "1.131.1",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "bd72e932b18f0a726492a89e205c9f619685574243a8434399af1206"
36
+ "falconPackageHash": "15c28a628db8c3a2ecad8e9e7b1d3bba0dc60f86e8574850e20a5a82"
37
37
  }
package/semantic.st.css CHANGED
@@ -409,6 +409,7 @@
409
409
  @property st-global(--wds-inner-shadow-fill-input);
410
410
  @property st-global(--wds-inner-shadow-fill-primary);
411
411
  @property st-global(--wds-inner-shadow-fill-secondary);
412
+ @property st-global(--wds-inner-shadow-fill-track);
412
413
  @property st-global(--wds-inner-shadow-x-input);
413
414
  @property st-global(--wds-inner-shadow-x-primary);
414
415
  @property st-global(--wds-inner-shadow-x-secondary);
@@ -906,6 +907,7 @@
906
907
  --wds-inner-shadow-fill-input: rgba(0, 6, 36, 0);
907
908
  --wds-inner-shadow-fill-primary: rgba(255, 255, 255, 0);
908
909
  --wds-inner-shadow-fill-secondary: rgba(255, 255, 255, 0);
910
+ --wds-inner-shadow-fill-track: rgba(0, 6, 36, 0);
909
911
  --wds-inner-shadow-x-input: 0px;
910
912
  --wds-inner-shadow-x-primary: 0px;
911
913
  --wds-inner-shadow-x-secondary: 0px;
package/studio/all.css CHANGED
@@ -363,6 +363,7 @@
363
363
  --wds-inner-shadow-x-secondary: var(--wds-shadow-x-0);
364
364
  --wds-inner-shadow-x-primary: var(--wds-shadow-x-0);
365
365
  --wds-inner-shadow-x-input: var(--wds-shadow-x-0);
366
+ --wds-inner-shadow-fill-track: var(--wds-color-black-100-transparent-0);
366
367
  --wds-inner-shadow-fill-secondary: var(--wds-color-white-transparent-0);
367
368
  --wds-inner-shadow-fill-primary: var(--wds-color-white-transparent-0);
368
369
  --wds-inner-shadow-fill-input: var(--wds-color-black-100-transparent-0);
@@ -995,10 +996,12 @@
995
996
  --wds-side-panel-header-padding-vertical: var(--wds-space-400);
996
997
  --wds-side-panel-header-padding-right: var(--wds-space-200);
997
998
  --wds-side-panel-header-padding-left: var(--wds-space-600);
999
+ --wds-side-panel-header-divider-height: var(--wds-border-width-100);
998
1000
  --wds-side-panel-footnote-padding-vertical: var(--wds-space-300);
999
1001
  --wds-side-panel-footnote-padding-horizontal: var(--wds-space-600);
1000
1002
  --wds-side-panel-footer-padding-vertical: var(--wds-space-400);
1001
1003
  --wds-side-panel-footer-padding-horizontal: var(--wds-space-600);
1004
+ --wds-side-panel-footer-divider-height: var(--wds-border-width-100);
1002
1005
  --wds-side-panel-footer-border-width: var(--wds-border-width-none);
1003
1006
  --wds-side-panel-floating-header-padding-vertical: var(--wds-space-300);
1004
1007
  --wds-side-panel-floating-header-padding-right: var(--wds-space-200);
@@ -1047,6 +1050,8 @@
1047
1050
  --wds-segmented-toggle-icononly-padding-horizontal-small: var(--wds-space-100);
1048
1051
  --wds-segmented-toggle-icononly-padding-horizontal-medium: var(--wds-space-100);
1049
1052
  --wds-segmented-toggle-fill-selected-disabled: var(--wds-color-white-transparent-0);
1053
+ --wds-segmented-toggle-container-border-radius-small: var(--wds-border-radius-200);
1054
+ --wds-segmented-toggle-container-border-radius-medium: var(--wds-border-radius-200);
1050
1055
  --wds-segmented-toggle-border-width-selected: var(--wds-border-width-200);
1051
1056
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-100);
1052
1057
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-100);
@@ -1122,6 +1127,7 @@
1122
1127
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1123
1128
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1124
1129
  --wds-notification-fill-error: var(--wds-color-red-200);
1130
+ --wds-nestable-list-paddings: var(--wds-space-0);
1125
1131
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
1126
1132
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
1127
1133
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
@@ -1202,6 +1208,7 @@
1202
1208
  --wds-list-item-indentation-level-3: var(--wds-space-700);
1203
1209
  --wds-list-item-indentation-level-2: var(--wds-space-300);
1204
1210
  --wds-list-item-gap-columns: var(--wds-space-600);
1211
+ --wds-linear-progress-bar-value-gap: var(--wds-space-300);
1205
1212
  --wds-linear-progress-bar-border-radius: var(--wds-border-radius-0);
1206
1213
  --wds-internal-color-picker-padding-vertical: var(--wds-space-300);
1207
1214
  --wds-internal-color-picker-padding-horizontal: var(--wds-space-400);
@@ -1579,6 +1586,7 @@
1579
1586
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1580
1587
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1581
1588
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1589
+ --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1582
1590
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1583
1591
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1584
1592
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1643,6 +1651,7 @@
1643
1651
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1644
1652
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1645
1653
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1654
+ --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1646
1655
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
1647
1656
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-4);
1648
1657
  --wds-message-modal-text-font-size: var(--wds-font-size-body-small);
@@ -1683,6 +1692,7 @@
1683
1692
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1684
1693
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
1685
1694
  --wds-list-item-action-fill: var(--wds-color-fill-standard-tertiary);
1695
+ --wds-linear-progress-bar-label-font-letter-spacing: var(--wds-font-letter-spacing-heading-6);
1686
1696
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1687
1697
  --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1688
1698
  --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);