@wix/design-system-tokens 1.130.0 → 1.131.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/all.css +12 -0
  3. package/all.scss +12 -0
  4. package/all.st.css +24 -0
  5. package/component.st.css +22 -0
  6. package/odeditor/all.css +19 -11
  7. package/odeditor/all.scss +19 -11
  8. package/odeditor/all.st.css +28 -12
  9. package/odeditor/component.st.css +26 -12
  10. package/odeditor/semantic.st.css +2 -0
  11. package/package.json +2 -2
  12. package/semantic.st.css +2 -0
  13. package/studio/all.css +12 -0
  14. package/studio/all.scss +12 -0
  15. package/studio/all.st.css +24 -0
  16. package/studio/component.st.css +22 -0
  17. package/studio/semantic.st.css +2 -0
  18. package/wixel/all.css +24 -0
  19. package/wixel/all.scss +24 -0
  20. package/wixel/all.st.css +48 -0
  21. package/wixel/component.st.css +22 -0
  22. package/wixel/semantic.st.css +26 -0
package/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);
@@ -808,6 +813,8 @@
808
813
  --wds-notification-fill-standard: var(--wds-color-blue-200);
809
814
  --wds-notification-fill-premium: var(--wds-color-purple-200);
810
815
  --wds-notification-fill-error: var(--wds-color-red-200);
816
+ --wds-nestable-list-paddings: var(--wds-space-200);
817
+ --wds-nestable-list-fill: var(--wds-color-white-transparent-0);
811
818
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
812
819
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
813
820
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
@@ -864,7 +871,6 @@
864
871
  --wds-linear-progress-bar-value-gap: var(--wds-space-100);
865
872
  --wds-linear-progress-bar-label-font-letter-spacing: var(--wds-font-letter-spacing-0);
866
873
  --wds-linear-progress-bar-border-radius: var(--wds-border-radius-100);
867
- --wds-internal-linear-progress-bar-knob-offset: var(--wds-space-100);
868
874
  --wds-internal-button-border-width: var(--wds-border-width-100);
869
875
  --wds-internal-angle-input-knob-offset-bottom: var(--wds-space-100);
870
876
  --wds-internal-angle-input-knob-offset: var(--wds-space-50);
@@ -910,6 +916,7 @@
910
916
  --wds-inner-shadow-x-secondary: var(--wds-shadow-x-25);
911
917
  --wds-inner-shadow-x-primary: var(--wds-shadow-x-25);
912
918
  --wds-inner-shadow-x-input: var(--wds-shadow-x-25);
919
+ --wds-inner-shadow-fill-track: var(--wds-color-black-100-transparent-20);
913
920
  --wds-inner-shadow-fill-secondary: var(--wds-color-white);
914
921
  --wds-inner-shadow-fill-primary: var(--wds-color-white);
915
922
  --wds-inner-shadow-fill-input: var(--wds-color-black-300-transparent-20);
@@ -942,7 +949,7 @@
942
949
  --wds-icon-button-color-border-light-secondary-disabled: var(--wds-color-black-700);
943
950
  --wds-icon-button-color-border-dark-secondary-disabled: var(--wds-color-black-700);
944
951
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
945
- --wds-form-field-label-gap-small: var(--wds-space-300);
952
+ --wds-form-field-label-gap-small: var(--wds-space-200);
946
953
  --wds-form-field-label-font-weight: var(--wds-font-weight-medium);
947
954
  --wds-font-weight-heading-6: var(--wds-font-weight-regular);
948
955
  --wds-font-weight-heading-5: var(--wds-font-weight-bold);
@@ -976,7 +983,7 @@
976
983
  --wds-floating-helper-main-action-padding-top: var(--wds-space-400);
977
984
  --wds-fill-button-border-width: var(--wds-border-width-200);
978
985
  --wds-field-set-label-gap-tiny: var(--wds-space-150);
979
- --wds-field-set-label-gap-small: var(--wds-space-300);
986
+ --wds-field-set-label-gap-small: var(--wds-space-200);
980
987
  --wds-field-set-label-font-weight: var(--wds-font-weight-medium);
981
988
  --wds-field-set-gap-small: var(--wds-space-150);
982
989
  --wds-field-set-gap-medium: var(--wds-space-300);
@@ -1678,6 +1685,7 @@
1678
1685
  --wds-list-item-action-label-fill-active: var(--wds-color-text-standard-primary);
1679
1686
  --wds-list-item-action-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1680
1687
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
1688
+ --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1681
1689
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1682
1690
  --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1683
1691
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
@@ -1913,6 +1921,7 @@
1913
1921
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-tiny);
1914
1922
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-small);
1915
1923
  --wds-add-item-label-color: var(--wds-color-text-standard-primary);
1924
+ --wds-add-item-fill-pressed: var(--wds-color-fill-dark-secondary-active);
1916
1925
  --wds-add-item-fill-hover: var(--wds-color-fill-dark-secondary-hover);
1917
1926
  --wds-add-item-border-color-hover: var(--wds-color-fill-dark-primary);
1918
1927
  --wds-add-item-border-color-disabled: var(--wds-color-fill-dark-primary-disabled);
@@ -1950,7 +1959,6 @@
1950
1959
  --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
1951
1960
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-small);
1952
1961
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1953
- --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-heading-4);
1954
1962
  --wds-input-value-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1955
1963
  --wds-input-value-font-line-height-small: var(--wds-font-line-height-body-small);
1956
1964
  --wds-input-value-font-line-height-medium: var(--wds-font-line-height-body-small);
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);
@@ -1335,6 +1338,8 @@
1335
1338
  @property st-global(--wds-segmented-toggle-border-width-default);
1336
1339
  @property st-global(--wds-segmented-toggle-border-width-hover);
1337
1340
  @property st-global(--wds-segmented-toggle-border-width-selected);
1341
+ @property st-global(--wds-segmented-toggle-container-border-radius-medium);
1342
+ @property st-global(--wds-segmented-toggle-container-border-radius-small);
1338
1343
  @property st-global(--wds-segmented-toggle-fill);
1339
1344
  @property st-global(--wds-segmented-toggle-fill-default);
1340
1345
  @property st-global(--wds-segmented-toggle-fill-disabled);
@@ -1519,11 +1524,13 @@
1519
1524
  @property st-global(--wds-side-panel-footer-background-blur);
1520
1525
  @property st-global(--wds-side-panel-footer-border-fill);
1521
1526
  @property st-global(--wds-side-panel-footer-border-width);
1527
+ @property st-global(--wds-side-panel-footer-divider-height);
1522
1528
  @property st-global(--wds-side-panel-footer-fill);
1523
1529
  @property st-global(--wds-side-panel-footer-padding-horizontal);
1524
1530
  @property st-global(--wds-side-panel-footer-padding-vertical);
1525
1531
  @property st-global(--wds-side-panel-footnote-padding-horizontal);
1526
1532
  @property st-global(--wds-side-panel-footnote-padding-vertical);
1533
+ @property st-global(--wds-side-panel-header-divider-height);
1527
1534
  @property st-global(--wds-side-panel-header-padding-left);
1528
1535
  @property st-global(--wds-side-panel-header-padding-right);
1529
1536
  @property st-global(--wds-side-panel-header-padding-vertical);
@@ -1682,6 +1689,7 @@
1682
1689
  @property st-global(--wds-swatches-swatch-size-medium);
1683
1690
  @property st-global(--wds-swatches-swatch-size-small);
1684
1691
  @property st-global(--wds-swatches-swatch-size-tiny);
1692
+ @property st-global(--wds-table-list-item-border-color);
1685
1693
  @property st-global(--wds-table-list-item-border-radius);
1686
1694
  @property st-global(--wds-table-list-item-controls-padding-medium);
1687
1695
  @property st-global(--wds-table-list-item-drag-handle-color);
@@ -1999,6 +2007,7 @@
1999
2007
  --wds-add-item-fill: #f8f6f6;
2000
2008
  --wds-add-item-fill-disabled: rgba(19, 23, 32, .05);
2001
2009
  --wds-add-item-fill-hover: #e8e7e7;
2010
+ --wds-add-item-fill-pressed: #dedede;
2002
2011
  --wds-add-item-label-color: #151414;
2003
2012
  --wds-add-item-padding-horizontal-large: 28px;
2004
2013
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -2829,7 +2838,7 @@
2829
2838
  --wds-field-set-label-font-size-small: 12px;
2830
2839
  --wds-field-set-label-font-size-tiny: 10px;
2831
2840
  --wds-field-set-label-font-weight: 500;
2832
- --wds-field-set-label-gap-small: 12px;
2841
+ --wds-field-set-label-gap-small: 8px;
2833
2842
  --wds-field-set-label-gap-tiny: 6px;
2834
2843
  --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
2844
  --wds-fill-button-border-width: 2px;
@@ -2900,7 +2909,7 @@
2900
2909
  --wds-form-field-label-font-size-small: 12px;
2901
2910
  --wds-form-field-label-font-size-tiny: 10px;
2902
2911
  --wds-form-field-label-font-weight: 500;
2903
- --wds-form-field-label-gap-small: 12px;
2912
+ --wds-form-field-label-gap-small: 8px;
2904
2913
  --wds-form-field-label-gap-tiny: 6px;
2905
2914
  --wds-form-field-label-line-height-small: 16px;
2906
2915
  --wds-form-field-label-line-height-tiny: 12px;
@@ -3025,6 +3034,7 @@
3025
3034
  --wds-inner-shadow-fill-input: rgba(118, 117, 116, 0.2);
3026
3035
  --wds-inner-shadow-fill-primary: #ffffff;
3027
3036
  --wds-inner-shadow-fill-secondary: #ffffff;
3037
+ --wds-inner-shadow-fill-track: rgba(19, 23, 32, .2);
3028
3038
  --wds-inner-shadow-x-input: 1px;
3029
3039
  --wds-inner-shadow-x-primary: 1px;
3030
3040
  --wds-inner-shadow-x-secondary: 1px;
@@ -3091,14 +3101,13 @@
3091
3101
  --wds-internal-image-width-medium: 156px;
3092
3102
  --wds-internal-image-width-small: 122px;
3093
3103
  --wds-internal-image-width-tiny: 106px;
3094
- --wds-internal-linear-progress-bar-knob-offset: 4px;
3095
3104
  --wds-internal-thumbnail-illustration-size-large: 114px;
3096
3105
  --wds-internal-thumbnail-illustration-size-medium: 72px;
3097
3106
  --wds-internal-thumbnail-illustration-size-small: 51px;
3098
3107
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
3099
3108
  --wds-linear-progress-bar-border-radius: 2px;
3100
3109
  --wds-linear-progress-bar-label-font-letter-spacing: 0px;
3101
- --wds-linear-progress-bar-label-font-line-height: 18px;
3110
+ --wds-linear-progress-bar-label-font-line-height: 16px;
3102
3111
  --wds-linear-progress-bar-value-gap: 4px;
3103
3112
  --wds-list-item-action-affix-margin: 4px;
3104
3113
  --wds-list-item-action-border-radius: 8px;
@@ -3200,6 +3209,8 @@
3200
3209
  --wds-mobile-modal-footer-padding-horizontal: 24px;
3201
3210
  --wds-mobile-modal-footer-padding-vertical: 24px;
3202
3211
  --wds-multiselect-icon-fill: #383838;
3212
+ --wds-nestable-list-fill: rgba(255, 255, 255, 0);
3213
+ --wds-nestable-list-paddings: 8px;
3203
3214
  --wds-notification-fill-error: #e55c5e;
3204
3215
  --wds-notification-fill-premium: #8b2df5;
3205
3216
  --wds-notification-fill-standard: #597dff;
@@ -3273,10 +3284,10 @@
3273
3284
  --wds-scrollbar-fill: #dedede;
3274
3285
  --wds-scrollbar-fill-active: #767574;
3275
3286
  --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;
3287
+ --wds-search-border-radius-large: 1000px;
3288
+ --wds-search-border-radius-medium: 1000px;
3289
+ --wds-search-border-radius-small: 1000px;
3290
+ --wds-search-border-radius-tiny: 1000px;
3280
3291
  --wds-section-header-fill-neutral: #ffffff;
3281
3292
  --wds-section-header-font-weight: 600;
3282
3293
  --wds-section-header-label-fill-neutral: #767574;
@@ -3308,12 +3319,14 @@
3308
3319
  --wds-segmented-toggle-border-color-hover: rgba(19, 23, 32, 0);
3309
3320
  --wds-segmented-toggle-border-color-selected: rgba(19, 23, 32, 0);
3310
3321
  --wds-segmented-toggle-border-hover: #acbeff;
3311
- --wds-segmented-toggle-border-radius-medium: 8px;
3312
- --wds-segmented-toggle-border-radius-small: 8px;
3322
+ --wds-segmented-toggle-border-radius-medium: 6px;
3323
+ --wds-segmented-toggle-border-radius-small: 6px;
3313
3324
  --wds-segmented-toggle-border-width: 0px;
3314
3325
  --wds-segmented-toggle-border-width-default: 0px;
3315
3326
  --wds-segmented-toggle-border-width-hover: 0px;
3316
3327
  --wds-segmented-toggle-border-width-selected: 0px;
3328
+ --wds-segmented-toggle-container-border-radius-medium: 8px;
3329
+ --wds-segmented-toggle-container-border-radius-small: 8px;
3317
3330
  --wds-segmented-toggle-fill: #f8f6f6;
3318
3331
  --wds-segmented-toggle-fill-default: #ffffff;
3319
3332
  --wds-segmented-toggle-fill-disabled: #f8f6f6;
@@ -3498,11 +3511,13 @@
3498
3511
  --wds-side-panel-footer-background-blur: 0px;
3499
3512
  --wds-side-panel-footer-border-fill: rgba(255, 255, 255, 0);
3500
3513
  --wds-side-panel-footer-border-width: 0px;
3514
+ --wds-side-panel-footer-divider-height: 0;
3501
3515
  --wds-side-panel-footer-fill: #ffffff;
3502
3516
  --wds-side-panel-footer-padding-horizontal: 16px;
3503
3517
  --wds-side-panel-footer-padding-vertical: 16px;
3504
3518
  --wds-side-panel-footnote-padding-horizontal: 16px;
3505
3519
  --wds-side-panel-footnote-padding-vertical: 8px;
3520
+ --wds-side-panel-header-divider-height: 0;
3506
3521
  --wds-side-panel-header-padding-left: 16px;
3507
3522
  --wds-side-panel-header-padding-right: 12px;
3508
3523
  --wds-side-panel-header-padding-vertical: 16px;
@@ -3661,6 +3676,7 @@
3661
3676
  --wds-swatches-swatch-size-medium: 32px;
3662
3677
  --wds-swatches-swatch-size-small: 28px;
3663
3678
  --wds-swatches-swatch-size-tiny: 24px;
3679
+ --wds-table-list-item-border-color: #dedede;
3664
3680
  --wds-table-list-item-border-radius: 12px;
3665
3681
  --wds-table-list-item-controls-padding-medium: 8px;
3666
3682
  --wds-table-list-item-drag-handle-color: #151414;
@@ -3808,7 +3824,7 @@
3808
3824
  --wds-toggle-button-label-font-weight-square: 600;
3809
3825
  --wds-toggle-button-padding-large: 24px;
3810
3826
  --wds-toggle-button-padding-large-round: 24px;
3811
- --wds-toggle-button-padding-medium: 20px;
3827
+ --wds-toggle-button-padding-medium: 12px;
3812
3828
  --wds-toggle-button-padding-medium-round: 20px;
3813
3829
  --wds-toggle-button-padding-small: 16px;
3814
3830
  --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);
@@ -773,6 +775,8 @@
773
775
  @property st-global(--wds-segmented-toggle-border-width-default);
774
776
  @property st-global(--wds-segmented-toggle-border-width-hover);
775
777
  @property st-global(--wds-segmented-toggle-border-width-selected);
778
+ @property st-global(--wds-segmented-toggle-container-border-radius-medium);
779
+ @property st-global(--wds-segmented-toggle-container-border-radius-small);
776
780
  @property st-global(--wds-segmented-toggle-fill);
777
781
  @property st-global(--wds-segmented-toggle-fill-default);
778
782
  @property st-global(--wds-segmented-toggle-fill-disabled);
@@ -852,11 +856,13 @@
852
856
  @property st-global(--wds-side-panel-footer-background-blur);
853
857
  @property st-global(--wds-side-panel-footer-border-fill);
854
858
  @property st-global(--wds-side-panel-footer-border-width);
859
+ @property st-global(--wds-side-panel-footer-divider-height);
855
860
  @property st-global(--wds-side-panel-footer-fill);
856
861
  @property st-global(--wds-side-panel-footer-padding-horizontal);
857
862
  @property st-global(--wds-side-panel-footer-padding-vertical);
858
863
  @property st-global(--wds-side-panel-footnote-padding-horizontal);
859
864
  @property st-global(--wds-side-panel-footnote-padding-vertical);
865
+ @property st-global(--wds-side-panel-header-divider-height);
860
866
  @property st-global(--wds-side-panel-header-padding-left);
861
867
  @property st-global(--wds-side-panel-header-padding-right);
862
868
  @property st-global(--wds-side-panel-header-padding-vertical);
@@ -970,6 +976,7 @@
970
976
  @property st-global(--wds-swatches-swatch-size-medium);
971
977
  @property st-global(--wds-swatches-swatch-size-small);
972
978
  @property st-global(--wds-swatches-swatch-size-tiny);
979
+ @property st-global(--wds-table-list-item-border-color);
973
980
  @property st-global(--wds-table-list-item-border-radius);
974
981
  @property st-global(--wds-table-list-item-controls-padding-medium);
975
982
  @property st-global(--wds-table-list-item-drag-handle-color);
@@ -1285,6 +1292,7 @@
1285
1292
  --wds-add-item-fill: #f8f6f6;
1286
1293
  --wds-add-item-fill-disabled: rgba(19, 23, 32, .05);
1287
1294
  --wds-add-item-fill-hover: #e8e7e7;
1295
+ --wds-add-item-fill-pressed: #dedede;
1288
1296
  --wds-add-item-label-color: #151414;
1289
1297
  --wds-add-item-padding-horizontal-large: 28px;
1290
1298
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -1622,7 +1630,7 @@
1622
1630
  --wds-field-set-label-font-size-small: 12px;
1623
1631
  --wds-field-set-label-font-size-tiny: 10px;
1624
1632
  --wds-field-set-label-font-weight: 500;
1625
- --wds-field-set-label-gap-small: 12px;
1633
+ --wds-field-set-label-gap-small: 8px;
1626
1634
  --wds-field-set-label-gap-tiny: 6px;
1627
1635
  --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
1636
  --wds-fill-button-border-width: 2px;
@@ -1636,7 +1644,7 @@
1636
1644
  --wds-form-field-label-font-size-small: 12px;
1637
1645
  --wds-form-field-label-font-size-tiny: 10px;
1638
1646
  --wds-form-field-label-font-weight: 500;
1639
- --wds-form-field-label-gap-small: 12px;
1647
+ --wds-form-field-label-gap-small: 8px;
1640
1648
  --wds-form-field-label-gap-tiny: 6px;
1641
1649
  --wds-form-field-label-line-height-small: 16px;
1642
1650
  --wds-form-field-label-line-height-tiny: 12px;
@@ -1815,14 +1823,13 @@
1815
1823
  --wds-internal-image-width-medium: 156px;
1816
1824
  --wds-internal-image-width-small: 122px;
1817
1825
  --wds-internal-image-width-tiny: 106px;
1818
- --wds-internal-linear-progress-bar-knob-offset: 4px;
1819
1826
  --wds-internal-thumbnail-illustration-size-large: 114px;
1820
1827
  --wds-internal-thumbnail-illustration-size-medium: 72px;
1821
1828
  --wds-internal-thumbnail-illustration-size-small: 51px;
1822
1829
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1823
1830
  --wds-linear-progress-bar-border-radius: 2px;
1824
1831
  --wds-linear-progress-bar-label-font-letter-spacing: 0px;
1825
- --wds-linear-progress-bar-label-font-line-height: 18px;
1832
+ --wds-linear-progress-bar-label-font-line-height: 16px;
1826
1833
  --wds-linear-progress-bar-value-gap: 4px;
1827
1834
  --wds-list-item-action-affix-margin: 4px;
1828
1835
  --wds-list-item-action-border-radius: 8px;
@@ -1924,6 +1931,8 @@
1924
1931
  --wds-mobile-modal-footer-padding-horizontal: 24px;
1925
1932
  --wds-mobile-modal-footer-padding-vertical: 24px;
1926
1933
  --wds-multiselect-icon-fill: #383838;
1934
+ --wds-nestable-list-fill: rgba(255, 255, 255, 0);
1935
+ --wds-nestable-list-paddings: 8px;
1927
1936
  --wds-notification-fill-error: #e55c5e;
1928
1937
  --wds-notification-fill-premium: #8b2df5;
1929
1938
  --wds-notification-fill-standard: #597dff;
@@ -1997,10 +2006,10 @@
1997
2006
  --wds-scrollbar-fill: #dedede;
1998
2007
  --wds-scrollbar-fill-active: #767574;
1999
2008
  --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;
2009
+ --wds-search-border-radius-large: 1000px;
2010
+ --wds-search-border-radius-medium: 1000px;
2011
+ --wds-search-border-radius-small: 1000px;
2012
+ --wds-search-border-radius-tiny: 1000px;
2004
2013
  --wds-section-header-fill-neutral: #ffffff;
2005
2014
  --wds-section-header-font-weight: 600;
2006
2015
  --wds-section-header-label-fill-neutral: #767574;
@@ -2032,12 +2041,14 @@
2032
2041
  --wds-segmented-toggle-border-color-hover: rgba(19, 23, 32, 0);
2033
2042
  --wds-segmented-toggle-border-color-selected: rgba(19, 23, 32, 0);
2034
2043
  --wds-segmented-toggle-border-hover: #acbeff;
2035
- --wds-segmented-toggle-border-radius-medium: 8px;
2036
- --wds-segmented-toggle-border-radius-small: 8px;
2044
+ --wds-segmented-toggle-border-radius-medium: 6px;
2045
+ --wds-segmented-toggle-border-radius-small: 6px;
2037
2046
  --wds-segmented-toggle-border-width: 0px;
2038
2047
  --wds-segmented-toggle-border-width-default: 0px;
2039
2048
  --wds-segmented-toggle-border-width-hover: 0px;
2040
2049
  --wds-segmented-toggle-border-width-selected: 0px;
2050
+ --wds-segmented-toggle-container-border-radius-medium: 8px;
2051
+ --wds-segmented-toggle-container-border-radius-small: 8px;
2041
2052
  --wds-segmented-toggle-fill: #f8f6f6;
2042
2053
  --wds-segmented-toggle-fill-default: #ffffff;
2043
2054
  --wds-segmented-toggle-fill-disabled: #f8f6f6;
@@ -2117,11 +2128,13 @@
2117
2128
  --wds-side-panel-footer-background-blur: 0px;
2118
2129
  --wds-side-panel-footer-border-fill: rgba(255, 255, 255, 0);
2119
2130
  --wds-side-panel-footer-border-width: 0px;
2131
+ --wds-side-panel-footer-divider-height: 0;
2120
2132
  --wds-side-panel-footer-fill: #ffffff;
2121
2133
  --wds-side-panel-footer-padding-horizontal: 16px;
2122
2134
  --wds-side-panel-footer-padding-vertical: 16px;
2123
2135
  --wds-side-panel-footnote-padding-horizontal: 16px;
2124
2136
  --wds-side-panel-footnote-padding-vertical: 8px;
2137
+ --wds-side-panel-header-divider-height: 0;
2125
2138
  --wds-side-panel-header-padding-left: 16px;
2126
2139
  --wds-side-panel-header-padding-right: 12px;
2127
2140
  --wds-side-panel-header-padding-vertical: 16px;
@@ -2235,6 +2248,7 @@
2235
2248
  --wds-swatches-swatch-size-medium: 32px;
2236
2249
  --wds-swatches-swatch-size-small: 28px;
2237
2250
  --wds-swatches-swatch-size-tiny: 24px;
2251
+ --wds-table-list-item-border-color: #dedede;
2238
2252
  --wds-table-list-item-border-radius: 12px;
2239
2253
  --wds-table-list-item-controls-padding-medium: 8px;
2240
2254
  --wds-table-list-item-drag-handle-color: #151414;
@@ -2382,7 +2396,7 @@
2382
2396
  --wds-toggle-button-label-font-weight-square: 600;
2383
2397
  --wds-toggle-button-padding-large: 24px;
2384
2398
  --wds-toggle-button-padding-large-round: 24px;
2385
- --wds-toggle-button-padding-medium: 20px;
2399
+ --wds-toggle-button-padding-medium: 12px;
2386
2400
  --wds-toggle-button-padding-medium-round: 20px;
2387
2401
  --wds-toggle-button-padding-small: 16px;
2388
2402
  --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.0",
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": "55909b7c2cd08c1fbd279334a5027106a470efba54a8ed9e9cf4bb40"
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);