@wix/design-system-tokens 1.145.0 → 1.149.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 (23) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/all.css +19 -3
  3. package/all.scss +19 -3
  4. package/all.st.css +37 -5
  5. package/component.st.css +30 -4
  6. package/foundation.st.css +6 -0
  7. package/odeditor/all.css +38 -21
  8. package/odeditor/all.scss +38 -21
  9. package/odeditor/all.st.css +58 -24
  10. package/odeditor/component.st.css +47 -21
  11. package/odeditor/foundation.st.css +6 -0
  12. package/odeditor/semantic.st.css +5 -3
  13. package/package.json +2 -2
  14. package/semantic.st.css +1 -1
  15. package/studio/all.css +20 -3
  16. package/studio/all.scss +20 -3
  17. package/studio/all.st.css +38 -4
  18. package/studio/component.st.css +32 -4
  19. package/studio/foundation.st.css +6 -0
  20. package/wixel/all.css +4 -2
  21. package/wixel/all.scss +4 -2
  22. package/wixel/all.st.css +8 -4
  23. package/wixel/component.st.css +8 -4
package/odeditor/all.st.css CHANGED
@@ -1073,7 +1073,6 @@
1073
1073
  @property st-global(--wds-input-border-color-disabled);
1074
1074
  @property st-global(--wds-input-border-color-focus);
1075
1075
  @property st-global(--wds-input-border-color-hover);
1076
- @property st-global(--wds-input-border-color-readonly);
1077
1076
  @property st-global(--wds-input-border-radius-default-large);
1078
1077
  @property st-global(--wds-input-border-radius-default-medium);
1079
1078
  @property st-global(--wds-input-border-radius-default-small);
@@ -1146,13 +1145,21 @@
1146
1145
  @property st-global(--wds-list-item-action-suffix-fill-active);
1147
1146
  @property st-global(--wds-list-item-action-title-font-weight);
1148
1147
  @property st-global(--wds-list-item-action-title-font-weight-active);
1148
+ @property st-global(--wds-list-item-section-divider-padding-bottom);
1149
1149
  @property st-global(--wds-list-item-section-divider-padding-horizontal);
1150
+ @property st-global(--wds-list-item-section-divider-padding-top);
1150
1151
  @property st-global(--wds-list-item-section-fill);
1152
+ @property st-global(--wds-list-item-section-fill-neutral);
1151
1153
  @property st-global(--wds-list-item-section-font-line-height);
1152
1154
  @property st-global(--wds-list-item-section-font-size);
1153
1155
  @property st-global(--wds-list-item-section-font-weight);
1156
+ @property st-global(--wds-list-item-section-font-weight-neutral);
1157
+ @property st-global(--wds-list-item-section-padding-bottom);
1154
1158
  @property st-global(--wds-list-item-section-padding-horizontal);
1159
+ @property st-global(--wds-list-item-section-padding-top);
1160
+ @property st-global(--wds-list-item-section-padding-vertical-neutral);
1155
1161
  @property st-global(--wds-list-item-section-title-label-fill);
1162
+ @property st-global(--wds-list-item-section-title-label-fill-neutral);
1156
1163
  @property st-global(--wds-list-item-select-active-fill);
1157
1164
  @property st-global(--wds-list-item-select-active-fill-active);
1158
1165
  @property st-global(--wds-list-item-select-active-fill-active-screen-small);
@@ -1182,7 +1189,6 @@
1182
1189
  @property st-global(--wds-list-item-select-label-font-size-small);
1183
1190
  @property st-global(--wds-list-item-select-label-font-weight-active);
1184
1191
  @property st-global(--wds-list-item-select-label-font-weight-medium);
1185
- @property st-global(--wds-list-item-select-label-hover-font-weight-medium);
1186
1192
  @property st-global(--wds-list-item-select-padding-horizontal-medium);
1187
1193
  @property st-global(--wds-list-item-select-padding-horizontal-small);
1188
1194
  @property st-global(--wds-list-item-select-padding-left-medium);
@@ -1485,7 +1491,9 @@
1485
1491
  @property st-global(--wds-shadow-surface-raised);
1486
1492
  @property st-global(--wds-shadow-x-0);
1487
1493
  @property st-global(--wds-shadow-x-25);
1494
+ @property st-global(--wds-shadow-x-50);
1488
1495
  @property st-global(--wds-shadow-x-input);
1496
+ @property st-global(--wds-shadow-x-primary-modal);
1489
1497
  @property st-global(--wds-shadow-x-primary-toggle-button);
1490
1498
  @property st-global(--wds-shadow-x-secondary-raised);
1491
1499
  @property st-global(--wds-shadow-x-secondary-toggle-button);
@@ -1494,10 +1502,12 @@
1494
1502
  @property st-global(--wds-shadow-y-25);
1495
1503
  @property st-global(--wds-shadow-y-50);
1496
1504
  @property st-global(--wds-shadow-y-100);
1505
+ @property st-global(--wds-shadow-y-125);
1497
1506
  @property st-global(--wds-shadow-y-150);
1498
1507
  @property st-global(--wds-shadow-y-200);
1499
1508
  @property st-global(--wds-shadow-y-300);
1500
1509
  @property st-global(--wds-shadow-y-350);
1510
+ @property st-global(--wds-shadow-y-600);
1501
1511
  @property st-global(--wds-shadow-y-input);
1502
1512
  @property st-global(--wds-shadow-y-primary-modal);
1503
1513
  @property st-global(--wds-shadow-y-primary-overlay);
@@ -1713,6 +1723,7 @@
1713
1723
  @property st-global(--wds-table-list-item-paddings);
1714
1724
  @property st-global(--wds-table-toolbar-padding-horizontal);
1715
1725
  @property st-global(--wds-tabs-border-radius);
1726
+ @property st-global(--wds-tabs-container-padding-horizontal);
1716
1727
  @property st-global(--wds-tabs-gap-horizontal);
1717
1728
  @property st-global(--wds-tabs-item-fill-active);
1718
1729
  @property st-global(--wds-tabs-item-fill-hover);
@@ -1809,6 +1820,9 @@
1809
1820
  @property st-global(--wds-toggle-button-fill-standard);
1810
1821
  @property st-global(--wds-toggle-button-fill-standard-disabled);
1811
1822
  @property st-global(--wds-toggle-button-fill-standard-hover);
1823
+ @property st-global(--wds-toggle-button-fill-standard-secondary-hover);
1824
+ @property st-global(--wds-toggle-button-fill-standard-secondary-selected);
1825
+ @property st-global(--wds-toggle-button-fill-standard-secondary-selected-hover);
1812
1826
  @property st-global(--wds-toggle-button-fill-standard-selected);
1813
1827
  @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
1814
1828
  @property st-global(--wds-toggle-button-fill-standard-selected-hover);
@@ -1835,6 +1849,8 @@
1835
1849
  @property st-global(--wds-toggle-button-label-fill-standard);
1836
1850
  @property st-global(--wds-toggle-button-label-fill-standard-disabled);
1837
1851
  @property st-global(--wds-toggle-button-label-fill-standard-hover);
1852
+ @property st-global(--wds-toggle-button-label-fill-standard-secondary-hover);
1853
+ @property st-global(--wds-toggle-button-label-fill-standard-secondary-selected-hover);
1838
1854
  @property st-global(--wds-toggle-button-label-fill-standard-selected);
1839
1855
  @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
1840
1856
  @property st-global(--wds-toggle-button-label-font-line-height-round-small);
@@ -1846,6 +1862,7 @@
1846
1862
  @property st-global(--wds-toggle-button-label-font-weight-pill);
1847
1863
  @property st-global(--wds-toggle-button-label-font-weight-round);
1848
1864
  @property st-global(--wds-toggle-button-label-font-weight-square);
1865
+ @property st-global(--wds-toggle-button-label-font-weight-standard-secondary-selected);
1849
1866
  @property st-global(--wds-toggle-button-padding-large);
1850
1867
  @property st-global(--wds-toggle-button-padding-large-round);
1851
1868
  @property st-global(--wds-toggle-button-padding-medium);
@@ -2273,7 +2290,7 @@
2273
2290
  --wds-card-tab-padding-horizontal-small: 20px;
2274
2291
  --wds-card-tab-padding-vertical-medium: 16px;
2275
2292
  --wds-card-tab-padding-vertical-small: 16px;
2276
- --wds-carousel-controls-shadow: 0 12px 30px rgba(19, 23, 32, .15), 0 0px 0px rgba(19, 23, 32, 0);
2293
+ --wds-carousel-controls-shadow: 0 20px 30px rgba(19, 23, 32, .1), 0 0px 0px rgba(19, 23, 32, 0);
2277
2294
  --wds-carousel-dots-width: 4px;
2278
2295
  --wds-checkbox-border: #383838;
2279
2296
  --wds-checkbox-border-active: #2f5dff;
@@ -2930,7 +2947,7 @@
2930
2947
  --wds-form-field-label-gap-tiny: 6px;
2931
2948
  --wds-form-field-label-line-height-small: 16px;
2932
2949
  --wds-form-field-label-line-height-tiny: 12px;
2933
- --wds-icon-button-color-border-dark-secondary: #e8e7e7;
2950
+ --wds-icon-button-color-border-dark-secondary: #767574;
2934
2951
  --wds-icon-button-color-border-dark-secondary-active: #e8e7e7;
2935
2952
  --wds-icon-button-color-border-dark-secondary-disabled: #f0efef;
2936
2953
  --wds-icon-button-color-border-dark-secondary-hover: #e8e7e7;
@@ -3070,12 +3087,11 @@
3070
3087
  --wds-input-background-fill-default: #f8f6f6;
3071
3088
  --wds-input-background-fill-disabled: #f8f6f6;
3072
3089
  --wds-input-background-fill-hover: #f8f6f6;
3073
- --wds-input-background-fill-readonly: #f8f6f6;
3090
+ --wds-input-background-fill-readonly: #ffffff;
3074
3091
  --wds-input-border-color: rgba(19, 23, 32, 0);
3075
3092
  --wds-input-border-color-disabled: #f0efef;
3076
3093
  --wds-input-border-color-focus: #2f5dff;
3077
3094
  --wds-input-border-color-hover: #7896ff;
3078
- --wds-input-border-color-readonly: rgba(19, 23, 32, 0);
3079
3095
  --wds-input-border-radius-default-large: 8px;
3080
3096
  --wds-input-border-radius-default-medium: 8px;
3081
3097
  --wds-input-border-radius-default-small: 8px;
@@ -3130,14 +3146,14 @@
3130
3146
  --wds-list-item-action-border-radius: 8px;
3131
3147
  --wds-list-item-action-fill-active: #f0efef;
3132
3148
  --wds-list-item-action-fill-hover: #f8f6f6;
3133
- --wds-list-item-action-gap: 10px;
3149
+ --wds-list-item-action-gap: 2px;
3134
3150
  --wds-list-item-action-label-fill-active: #151414;
3135
3151
  --wds-list-item-action-label-font-line-height-medium: 24px;
3136
3152
  --wds-list-item-action-label-font-line-height-small: 18px;
3137
3153
  --wds-list-item-action-label-font-size-medium: 14px;
3138
3154
  --wds-list-item-action-label-font-size-small: 12px;
3139
- --wds-list-item-action-padding-horizontal-medium: 12px;
3140
- --wds-list-item-action-padding-horizontal-small: 12px;
3155
+ --wds-list-item-action-padding-horizontal-medium: 8px;
3156
+ --wds-list-item-action-padding-horizontal-small: 8px;
3141
3157
  --wds-list-item-action-padding-vertical-medium: 8px;
3142
3158
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
3143
3159
  --wds-list-item-action-padding-vertical-small: 8px;
@@ -3148,14 +3164,22 @@
3148
3164
  --wds-list-item-action-suffix-fill-active: #151414;
3149
3165
  --wds-list-item-action-title-font-weight: 500;
3150
3166
  --wds-list-item-action-title-font-weight-active: 600;
3167
+ --wds-list-item-section-divider-padding-bottom: 0px;
3151
3168
  --wds-list-item-section-divider-padding-horizontal: 0px;
3169
+ --wds-list-item-section-divider-padding-top: 8px;
3152
3170
  --wds-list-item-section-fill: #ffffff;
3153
- --wds-list-item-section-font-line-height: 16px;
3154
- --wds-list-item-section-font-size: 12px;
3171
+ --wds-list-item-section-fill-neutral: #ffffff;
3172
+ --wds-list-item-section-font-line-height: 18px;
3173
+ --wds-list-item-section-font-size: 14px;
3155
3174
  --wds-list-item-section-font-weight: 600;
3156
- --wds-list-item-section-padding-horizontal: 16px;
3157
- --wds-list-item-section-title-label-fill: #a8a6a5;
3158
- --wds-list-item-select-active-fill: #ffffff;
3175
+ --wds-list-item-section-font-weight-neutral: 400;
3176
+ --wds-list-item-section-padding-bottom: 12px;
3177
+ --wds-list-item-section-padding-horizontal: 8px;
3178
+ --wds-list-item-section-padding-top: 8px;
3179
+ --wds-list-item-section-padding-vertical-neutral: 10px;
3180
+ --wds-list-item-section-title-label-fill: #767574;
3181
+ --wds-list-item-section-title-label-fill-neutral: #a8a6a5;
3182
+ --wds-list-item-select-active-fill: #f0efef;
3159
3183
  --wds-list-item-select-active-fill-active: #d5dfff;
3160
3184
  --wds-list-item-select-active-fill-active-screen-small: #7896ff;
3161
3185
  --wds-list-item-select-active-fill-disabled: #ffffff;
@@ -3173,7 +3197,7 @@
3173
3197
  --wds-list-item-select-fill-active: #ffffff;
3174
3198
  --wds-list-item-select-fill-disabled: #ffffff;
3175
3199
  --wds-list-item-select-fill-hover: #f8f6f6;
3176
- --wds-list-item-select-gap: 10px;
3200
+ --wds-list-item-select-gap: 2px;
3177
3201
  --wds-list-item-select-icon-padding-horizontal-medium: 12px;
3178
3202
  --wds-list-item-select-icon-padding-horizontal-small: 12px;
3179
3203
  --wds-list-item-select-icon-padding-vertical-medium: 4px;
@@ -3184,16 +3208,15 @@
3184
3208
  --wds-list-item-select-label-font-size-small: 12px;
3185
3209
  --wds-list-item-select-label-font-weight-active: 600;
3186
3210
  --wds-list-item-select-label-font-weight-medium: 500;
3187
- --wds-list-item-select-label-hover-font-weight-medium: 600;
3188
- --wds-list-item-select-padding-horizontal-medium: 12px;
3189
- --wds-list-item-select-padding-horizontal-small: 12px;
3211
+ --wds-list-item-select-padding-horizontal-medium: 8px;
3212
+ --wds-list-item-select-padding-horizontal-small: 8px;
3190
3213
  --wds-list-item-select-padding-left-medium: 12px;
3191
3214
  --wds-list-item-select-padding-left-small: 12px;
3192
3215
  --wds-list-item-select-padding-right-medium: 16px;
3193
3216
  --wds-list-item-select-padding-right-small: 16px;
3194
- --wds-list-item-select-padding-vertical-medium: 8px;
3217
+ --wds-list-item-select-padding-vertical-medium: 4px;
3195
3218
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
3196
- --wds-list-item-select-padding-vertical-small: 8px;
3219
+ --wds-list-item-select-padding-vertical-small: 4px;
3197
3220
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
3198
3221
  --wds-list-item-select-subtitle: #767574;
3199
3222
  --wds-list-item-select-subtitle-disabled: #a8a6a5;
@@ -3441,7 +3464,7 @@
3441
3464
  --wds-shadow-blur-secondary-toggle-button: 1.7px;
3442
3465
  --wds-shadow-blur-tertiary-toggle-button: 0.6px;
3443
3466
  --wds-shadow-fill-input: rgba(118, 117, 116, 0.2);
3444
- --wds-shadow-fill-primary-modal: rgba(19, 23, 32, .15);
3467
+ --wds-shadow-fill-primary-modal: rgba(19, 23, 32, .1);
3445
3468
  --wds-shadow-fill-primary-overlay: rgba(19, 23, 32, .1);
3446
3469
  --wds-shadow-fill-primary-overlay-dark: rgba(19, 23, 32, .15);
3447
3470
  --wds-shadow-fill-primary-raised: rgba(19, 23, 32, .05);
@@ -3481,13 +3504,15 @@
3481
3504
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(19, 23, 32, .2) inset, 0 8px 6px -6px rgba(19, 23, 32, .05) inset;
3482
3505
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
3483
3506
  --wds-shadow-spread-secondary-raised: -0.70;
3484
- --wds-shadow-surface-modal: 0 8px 8px rgba(19, 23, 32, .1), 0 3px 24px rgba(19, 23, 32, .2);
3507
+ --wds-shadow-surface-modal: 2px 20px 30px rgba(19, 23, 32, .1), 0 0px 0px rgba(19, 23, 32, 0);
3485
3508
  --wds-shadow-surface-overlay: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
3486
3509
  --wds-shadow-surface-overlay-dark: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
3487
3510
  --wds-shadow-surface-raised: 0 2px 4px rgba(19, 23, 32, .05), 0 0 6px rgba(19, 23, 32, .1);
3488
3511
  --wds-shadow-x-0: 0px;
3489
3512
  --wds-shadow-x-25: 1px;
3513
+ --wds-shadow-x-50: 2px;
3490
3514
  --wds-shadow-x-input: 1px;
3515
+ --wds-shadow-x-primary-modal: 2px;
3491
3516
  --wds-shadow-x-primary-toggle-button: 1px;
3492
3517
  --wds-shadow-x-secondary-raised: 1px;
3493
3518
  --wds-shadow-x-secondary-toggle-button: 1.2px;
@@ -3496,12 +3521,14 @@
3496
3521
  --wds-shadow-y-25: 1px;
3497
3522
  --wds-shadow-y-50: 2px;
3498
3523
  --wds-shadow-y-100: 4px;
3524
+ --wds-shadow-y-125: 5px;
3499
3525
  --wds-shadow-y-150: 6px;
3500
3526
  --wds-shadow-y-200: 8px;
3501
3527
  --wds-shadow-y-300: 12px;
3502
3528
  --wds-shadow-y-350: 10px;
3529
+ --wds-shadow-y-600: 20px;
3503
3530
  --wds-shadow-y-input: 1px;
3504
- --wds-shadow-y-primary-modal: 12px;
3531
+ --wds-shadow-y-primary-modal: 20px;
3505
3532
  --wds-shadow-y-primary-overlay: 12px;
3506
3533
  --wds-shadow-y-primary-overlay-dark: 0px;
3507
3534
  --wds-shadow-y-primary-raised: 1px;
@@ -3687,7 +3714,7 @@
3687
3714
  --wds-suffix-active-font-weight: 600;
3688
3715
  --wds-swatches-fill-border-disabled: rgba(19, 23, 32, .05);
3689
3716
  --wds-swatches-fill-border-no-value: #e8e7e7;
3690
- --wds-swatches-fill-border-no-value-dash: #df3336;
3717
+ --wds-swatches-fill-border-no-value-dash: #ed8f90;
3691
3718
  --wds-swatches-fill-border-selected: #383838;
3692
3719
  --wds-swatches-fill-disabled: #f0efef;
3693
3720
  --wds-swatches-list-gap: 12px;
@@ -3715,6 +3742,7 @@
3715
3742
  --wds-table-list-item-paddings: 0px;
3716
3743
  --wds-table-toolbar-padding-horizontal: 24px;
3717
3744
  --wds-tabs-border-radius: 6px;
3745
+ --wds-tabs-container-padding-horizontal: 16px;
3718
3746
  --wds-tabs-gap-horizontal: 4px;
3719
3747
  --wds-tabs-item-fill-active: #f0efef;
3720
3748
  --wds-tabs-item-fill-hover: #f8f6f6;
@@ -3811,6 +3839,9 @@
3811
3839
  --wds-toggle-button-fill-standard: rgba(19, 23, 32, 0);
3812
3840
  --wds-toggle-button-fill-standard-disabled: rgba(19, 23, 32, 0);
3813
3841
  --wds-toggle-button-fill-standard-hover: rgba(19, 23, 32, 0);
3842
+ --wds-toggle-button-fill-standard-secondary-hover: #eaefff;
3843
+ --wds-toggle-button-fill-standard-secondary-selected: #eaefff;
3844
+ --wds-toggle-button-fill-standard-secondary-selected-hover: #d5dfff;
3814
3845
  --wds-toggle-button-fill-standard-selected: #eaefff;
3815
3846
  --wds-toggle-button-fill-standard-selected-disabled: #f0efef;
3816
3847
  --wds-toggle-button-fill-standard-selected-hover: #d5dfff;
@@ -3837,6 +3868,8 @@
3837
3868
  --wds-toggle-button-label-fill-standard: #151414;
3838
3869
  --wds-toggle-button-label-fill-standard-disabled: #a8a6a5;
3839
3870
  --wds-toggle-button-label-fill-standard-hover: #1c3fe5;
3871
+ --wds-toggle-button-label-fill-standard-secondary-hover: #151414;
3872
+ --wds-toggle-button-label-fill-standard-secondary-selected-hover: #1c3fe5;
3840
3873
  --wds-toggle-button-label-fill-standard-selected: #2f5dff;
3841
3874
  --wds-toggle-button-label-fill-standard-selected-disabled: #a8a6a5;
3842
3875
  --wds-toggle-button-label-font-line-height-round-small: 16px;
@@ -3848,6 +3881,7 @@
3848
3881
  --wds-toggle-button-label-font-weight-pill: 600;
3849
3882
  --wds-toggle-button-label-font-weight-round: 600;
3850
3883
  --wds-toggle-button-label-font-weight-square: 600;
3884
+ --wds-toggle-button-label-font-weight-standard-secondary-selected: 600;
3851
3885
  --wds-toggle-button-padding-large: 24px;
3852
3886
  --wds-toggle-button-padding-large-round: 24px;
3853
3887
  --wds-toggle-button-padding-medium: 12px;
package/odeditor/component.st.css CHANGED
@@ -514,7 +514,6 @@
514
514
  @property st-global(--wds-input-border-color-disabled);
515
515
  @property st-global(--wds-input-border-color-focus);
516
516
  @property st-global(--wds-input-border-color-hover);
517
- @property st-global(--wds-input-border-color-readonly);
518
517
  @property st-global(--wds-input-border-radius-default-large);
519
518
  @property st-global(--wds-input-border-radius-default-medium);
520
519
  @property st-global(--wds-input-border-radius-default-small);
@@ -587,13 +586,21 @@
587
586
  @property st-global(--wds-list-item-action-suffix-fill-active);
588
587
  @property st-global(--wds-list-item-action-title-font-weight);
589
588
  @property st-global(--wds-list-item-action-title-font-weight-active);
589
+ @property st-global(--wds-list-item-section-divider-padding-bottom);
590
590
  @property st-global(--wds-list-item-section-divider-padding-horizontal);
591
+ @property st-global(--wds-list-item-section-divider-padding-top);
591
592
  @property st-global(--wds-list-item-section-fill);
593
+ @property st-global(--wds-list-item-section-fill-neutral);
592
594
  @property st-global(--wds-list-item-section-font-line-height);
593
595
  @property st-global(--wds-list-item-section-font-size);
594
596
  @property st-global(--wds-list-item-section-font-weight);
597
+ @property st-global(--wds-list-item-section-font-weight-neutral);
598
+ @property st-global(--wds-list-item-section-padding-bottom);
595
599
  @property st-global(--wds-list-item-section-padding-horizontal);
600
+ @property st-global(--wds-list-item-section-padding-top);
601
+ @property st-global(--wds-list-item-section-padding-vertical-neutral);
596
602
  @property st-global(--wds-list-item-section-title-label-fill);
603
+ @property st-global(--wds-list-item-section-title-label-fill-neutral);
597
604
  @property st-global(--wds-list-item-select-active-fill);
598
605
  @property st-global(--wds-list-item-select-active-fill-active);
599
606
  @property st-global(--wds-list-item-select-active-fill-active-screen-small);
@@ -623,7 +630,6 @@
623
630
  @property st-global(--wds-list-item-select-label-font-size-small);
624
631
  @property st-global(--wds-list-item-select-label-font-weight-active);
625
632
  @property st-global(--wds-list-item-select-label-font-weight-medium);
626
- @property st-global(--wds-list-item-select-label-hover-font-weight-medium);
627
633
  @property st-global(--wds-list-item-select-padding-horizontal-medium);
628
634
  @property st-global(--wds-list-item-select-padding-horizontal-small);
629
635
  @property st-global(--wds-list-item-select-padding-left-medium);
@@ -1004,6 +1010,7 @@
1004
1010
  @property st-global(--wds-table-list-item-paddings);
1005
1011
  @property st-global(--wds-table-toolbar-padding-horizontal);
1006
1012
  @property st-global(--wds-tabs-border-radius);
1013
+ @property st-global(--wds-tabs-container-padding-horizontal);
1007
1014
  @property st-global(--wds-tabs-gap-horizontal);
1008
1015
  @property st-global(--wds-tabs-item-fill-active);
1009
1016
  @property st-global(--wds-tabs-item-fill-hover);
@@ -1100,6 +1107,9 @@
1100
1107
  @property st-global(--wds-toggle-button-fill-standard);
1101
1108
  @property st-global(--wds-toggle-button-fill-standard-disabled);
1102
1109
  @property st-global(--wds-toggle-button-fill-standard-hover);
1110
+ @property st-global(--wds-toggle-button-fill-standard-secondary-hover);
1111
+ @property st-global(--wds-toggle-button-fill-standard-secondary-selected);
1112
+ @property st-global(--wds-toggle-button-fill-standard-secondary-selected-hover);
1103
1113
  @property st-global(--wds-toggle-button-fill-standard-selected);
1104
1114
  @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
1105
1115
  @property st-global(--wds-toggle-button-fill-standard-selected-hover);
@@ -1126,6 +1136,8 @@
1126
1136
  @property st-global(--wds-toggle-button-label-fill-standard);
1127
1137
  @property st-global(--wds-toggle-button-label-fill-standard-disabled);
1128
1138
  @property st-global(--wds-toggle-button-label-fill-standard-hover);
1139
+ @property st-global(--wds-toggle-button-label-fill-standard-secondary-hover);
1140
+ @property st-global(--wds-toggle-button-label-fill-standard-secondary-selected-hover);
1129
1141
  @property st-global(--wds-toggle-button-label-fill-standard-selected);
1130
1142
  @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
1131
1143
  @property st-global(--wds-toggle-button-label-font-line-height-round-small);
@@ -1137,6 +1149,7 @@
1137
1149
  @property st-global(--wds-toggle-button-label-font-weight-pill);
1138
1150
  @property st-global(--wds-toggle-button-label-font-weight-round);
1139
1151
  @property st-global(--wds-toggle-button-label-font-weight-square);
1152
+ @property st-global(--wds-toggle-button-label-font-weight-standard-secondary-selected);
1140
1153
  @property st-global(--wds-toggle-button-padding-large);
1141
1154
  @property st-global(--wds-toggle-button-padding-large-round);
1142
1155
  @property st-global(--wds-toggle-button-padding-medium);
@@ -1524,7 +1537,7 @@
1524
1537
  --wds-card-tab-padding-horizontal-small: 20px;
1525
1538
  --wds-card-tab-padding-vertical-medium: 16px;
1526
1539
  --wds-card-tab-padding-vertical-small: 16px;
1527
- --wds-carousel-controls-shadow: 0 12px 30px rgba(19, 23, 32, .15), 0 0px 0px rgba(19, 23, 32, 0);
1540
+ --wds-carousel-controls-shadow: 0 20px 30px rgba(19, 23, 32, .1), 0 0px 0px rgba(19, 23, 32, 0);
1528
1541
  --wds-carousel-dots-width: 4px;
1529
1542
  --wds-checkbox-border: #383838;
1530
1543
  --wds-checkbox-border-active: #2f5dff;
@@ -1673,7 +1686,7 @@
1673
1686
  --wds-form-field-label-gap-tiny: 6px;
1674
1687
  --wds-form-field-label-line-height-small: 16px;
1675
1688
  --wds-form-field-label-line-height-tiny: 12px;
1676
- --wds-icon-button-color-border-dark-secondary: #e8e7e7;
1689
+ --wds-icon-button-color-border-dark-secondary: #767574;
1677
1690
  --wds-icon-button-color-border-dark-secondary-active: #e8e7e7;
1678
1691
  --wds-icon-button-color-border-dark-secondary-disabled: #f0efef;
1679
1692
  --wds-icon-button-color-border-dark-secondary-hover: #e8e7e7;
@@ -1800,12 +1813,11 @@
1800
1813
  --wds-input-background-fill-default: #f8f6f6;
1801
1814
  --wds-input-background-fill-disabled: #f8f6f6;
1802
1815
  --wds-input-background-fill-hover: #f8f6f6;
1803
- --wds-input-background-fill-readonly: #f8f6f6;
1816
+ --wds-input-background-fill-readonly: #ffffff;
1804
1817
  --wds-input-border-color: rgba(19, 23, 32, 0);
1805
1818
  --wds-input-border-color-disabled: #f0efef;
1806
1819
  --wds-input-border-color-focus: #2f5dff;
1807
1820
  --wds-input-border-color-hover: #7896ff;
1808
- --wds-input-border-color-readonly: rgba(19, 23, 32, 0);
1809
1821
  --wds-input-border-radius-default-large: 8px;
1810
1822
  --wds-input-border-radius-default-medium: 8px;
1811
1823
  --wds-input-border-radius-default-small: 8px;
@@ -1860,14 +1872,14 @@
1860
1872
  --wds-list-item-action-border-radius: 8px;
1861
1873
  --wds-list-item-action-fill-active: #f0efef;
1862
1874
  --wds-list-item-action-fill-hover: #f8f6f6;
1863
- --wds-list-item-action-gap: 10px;
1875
+ --wds-list-item-action-gap: 2px;
1864
1876
  --wds-list-item-action-label-fill-active: #151414;
1865
1877
  --wds-list-item-action-label-font-line-height-medium: 24px;
1866
1878
  --wds-list-item-action-label-font-line-height-small: 18px;
1867
1879
  --wds-list-item-action-label-font-size-medium: 14px;
1868
1880
  --wds-list-item-action-label-font-size-small: 12px;
1869
- --wds-list-item-action-padding-horizontal-medium: 12px;
1870
- --wds-list-item-action-padding-horizontal-small: 12px;
1881
+ --wds-list-item-action-padding-horizontal-medium: 8px;
1882
+ --wds-list-item-action-padding-horizontal-small: 8px;
1871
1883
  --wds-list-item-action-padding-vertical-medium: 8px;
1872
1884
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
1873
1885
  --wds-list-item-action-padding-vertical-small: 8px;
@@ -1878,14 +1890,22 @@
1878
1890
  --wds-list-item-action-suffix-fill-active: #151414;
1879
1891
  --wds-list-item-action-title-font-weight: 500;
1880
1892
  --wds-list-item-action-title-font-weight-active: 600;
1893
+ --wds-list-item-section-divider-padding-bottom: 0px;
1881
1894
  --wds-list-item-section-divider-padding-horizontal: 0px;
1895
+ --wds-list-item-section-divider-padding-top: 8px;
1882
1896
  --wds-list-item-section-fill: #ffffff;
1883
- --wds-list-item-section-font-line-height: 16px;
1884
- --wds-list-item-section-font-size: 12px;
1897
+ --wds-list-item-section-fill-neutral: #ffffff;
1898
+ --wds-list-item-section-font-line-height: 18px;
1899
+ --wds-list-item-section-font-size: 14px;
1885
1900
  --wds-list-item-section-font-weight: 600;
1886
- --wds-list-item-section-padding-horizontal: 16px;
1887
- --wds-list-item-section-title-label-fill: #a8a6a5;
1888
- --wds-list-item-select-active-fill: #ffffff;
1901
+ --wds-list-item-section-font-weight-neutral: 400;
1902
+ --wds-list-item-section-padding-bottom: 12px;
1903
+ --wds-list-item-section-padding-horizontal: 8px;
1904
+ --wds-list-item-section-padding-top: 8px;
1905
+ --wds-list-item-section-padding-vertical-neutral: 10px;
1906
+ --wds-list-item-section-title-label-fill: #767574;
1907
+ --wds-list-item-section-title-label-fill-neutral: #a8a6a5;
1908
+ --wds-list-item-select-active-fill: #f0efef;
1889
1909
  --wds-list-item-select-active-fill-active: #d5dfff;
1890
1910
  --wds-list-item-select-active-fill-active-screen-small: #7896ff;
1891
1911
  --wds-list-item-select-active-fill-disabled: #ffffff;
@@ -1903,7 +1923,7 @@
1903
1923
  --wds-list-item-select-fill-active: #ffffff;
1904
1924
  --wds-list-item-select-fill-disabled: #ffffff;
1905
1925
  --wds-list-item-select-fill-hover: #f8f6f6;
1906
- --wds-list-item-select-gap: 10px;
1926
+ --wds-list-item-select-gap: 2px;
1907
1927
  --wds-list-item-select-icon-padding-horizontal-medium: 12px;
1908
1928
  --wds-list-item-select-icon-padding-horizontal-small: 12px;
1909
1929
  --wds-list-item-select-icon-padding-vertical-medium: 4px;
@@ -1914,16 +1934,15 @@
1914
1934
  --wds-list-item-select-label-font-size-small: 12px;
1915
1935
  --wds-list-item-select-label-font-weight-active: 600;
1916
1936
  --wds-list-item-select-label-font-weight-medium: 500;
1917
- --wds-list-item-select-label-hover-font-weight-medium: 600;
1918
- --wds-list-item-select-padding-horizontal-medium: 12px;
1919
- --wds-list-item-select-padding-horizontal-small: 12px;
1937
+ --wds-list-item-select-padding-horizontal-medium: 8px;
1938
+ --wds-list-item-select-padding-horizontal-small: 8px;
1920
1939
  --wds-list-item-select-padding-left-medium: 12px;
1921
1940
  --wds-list-item-select-padding-left-small: 12px;
1922
1941
  --wds-list-item-select-padding-right-medium: 16px;
1923
1942
  --wds-list-item-select-padding-right-small: 16px;
1924
- --wds-list-item-select-padding-vertical-medium: 8px;
1943
+ --wds-list-item-select-padding-vertical-medium: 4px;
1925
1944
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
1926
- --wds-list-item-select-padding-vertical-small: 8px;
1945
+ --wds-list-item-select-padding-vertical-small: 4px;
1927
1946
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
1928
1947
  --wds-list-item-select-subtitle: #767574;
1929
1948
  --wds-list-item-select-subtitle-disabled: #a8a6a5;
@@ -2267,7 +2286,7 @@
2267
2286
  --wds-suffix-active-font-weight: 600;
2268
2287
  --wds-swatches-fill-border-disabled: rgba(19, 23, 32, .05);
2269
2288
  --wds-swatches-fill-border-no-value: #e8e7e7;
2270
- --wds-swatches-fill-border-no-value-dash: #df3336;
2289
+ --wds-swatches-fill-border-no-value-dash: #ed8f90;
2271
2290
  --wds-swatches-fill-border-selected: #383838;
2272
2291
  --wds-swatches-fill-disabled: #f0efef;
2273
2292
  --wds-swatches-list-gap: 12px;
@@ -2295,6 +2314,7 @@
2295
2314
  --wds-table-list-item-paddings: 0px;
2296
2315
  --wds-table-toolbar-padding-horizontal: 24px;
2297
2316
  --wds-tabs-border-radius: 6px;
2317
+ --wds-tabs-container-padding-horizontal: 16px;
2298
2318
  --wds-tabs-gap-horizontal: 4px;
2299
2319
  --wds-tabs-item-fill-active: #f0efef;
2300
2320
  --wds-tabs-item-fill-hover: #f8f6f6;
@@ -2391,6 +2411,9 @@
2391
2411
  --wds-toggle-button-fill-standard: rgba(19, 23, 32, 0);
2392
2412
  --wds-toggle-button-fill-standard-disabled: rgba(19, 23, 32, 0);
2393
2413
  --wds-toggle-button-fill-standard-hover: rgba(19, 23, 32, 0);
2414
+ --wds-toggle-button-fill-standard-secondary-hover: #eaefff;
2415
+ --wds-toggle-button-fill-standard-secondary-selected: #eaefff;
2416
+ --wds-toggle-button-fill-standard-secondary-selected-hover: #d5dfff;
2394
2417
  --wds-toggle-button-fill-standard-selected: #eaefff;
2395
2418
  --wds-toggle-button-fill-standard-selected-disabled: #f0efef;
2396
2419
  --wds-toggle-button-fill-standard-selected-hover: #d5dfff;
@@ -2417,6 +2440,8 @@
2417
2440
  --wds-toggle-button-label-fill-standard: #151414;
2418
2441
  --wds-toggle-button-label-fill-standard-disabled: #a8a6a5;
2419
2442
  --wds-toggle-button-label-fill-standard-hover: #1c3fe5;
2443
+ --wds-toggle-button-label-fill-standard-secondary-hover: #151414;
2444
+ --wds-toggle-button-label-fill-standard-secondary-selected-hover: #1c3fe5;
2420
2445
  --wds-toggle-button-label-fill-standard-selected: #2f5dff;
2421
2446
  --wds-toggle-button-label-fill-standard-selected-disabled: #a8a6a5;
2422
2447
  --wds-toggle-button-label-font-line-height-round-small: 16px;
@@ -2428,6 +2453,7 @@
2428
2453
  --wds-toggle-button-label-font-weight-pill: 600;
2429
2454
  --wds-toggle-button-label-font-weight-round: 600;
2430
2455
  --wds-toggle-button-label-font-weight-square: 600;
2456
+ --wds-toggle-button-label-font-weight-standard-secondary-selected: 600;
2431
2457
  --wds-toggle-button-padding-large: 24px;
2432
2458
  --wds-toggle-button-padding-large-round: 24px;
2433
2459
  --wds-toggle-button-padding-medium: 12px;
package/odeditor/foundation.st.css CHANGED
@@ -185,14 +185,17 @@
185
185
  @property st-global(--wds-shadow-inner-400-vertical);
186
186
  @property st-global(--wds-shadow-x-0);
187
187
  @property st-global(--wds-shadow-x-25);
188
+ @property st-global(--wds-shadow-x-50);
188
189
  @property st-global(--wds-shadow-y-0);
189
190
  @property st-global(--wds-shadow-y-25);
190
191
  @property st-global(--wds-shadow-y-50);
191
192
  @property st-global(--wds-shadow-y-100);
193
+ @property st-global(--wds-shadow-y-125);
192
194
  @property st-global(--wds-shadow-y-150);
193
195
  @property st-global(--wds-shadow-y-200);
194
196
  @property st-global(--wds-shadow-y-300);
195
197
  @property st-global(--wds-shadow-y-350);
198
+ @property st-global(--wds-shadow-y-600);
196
199
  @property st-global(--wds-space-0);
197
200
  @property st-global(--wds-space-25);
198
201
  @property st-global(--wds-space-50);
@@ -413,14 +416,17 @@
413
416
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
414
417
  --wds-shadow-x-0: 0px;
415
418
  --wds-shadow-x-25: 1px;
419
+ --wds-shadow-x-50: 2px;
416
420
  --wds-shadow-y-0: 0px;
417
421
  --wds-shadow-y-25: 1px;
418
422
  --wds-shadow-y-50: 2px;
419
423
  --wds-shadow-y-100: 4px;
424
+ --wds-shadow-y-125: 5px;
420
425
  --wds-shadow-y-150: 6px;
421
426
  --wds-shadow-y-200: 8px;
422
427
  --wds-shadow-y-300: 12px;
423
428
  --wds-shadow-y-350: 10px;
429
+ --wds-shadow-y-600: 20px;
424
430
  --wds-space-0: 0px;
425
431
  --wds-space-25: 1px;
426
432
  --wds-space-50: 2px;
package/odeditor/semantic.st.css CHANGED
@@ -449,6 +449,7 @@
449
449
  @property st-global(--wds-shadow-surface-overlay-dark);
450
450
  @property st-global(--wds-shadow-surface-raised);
451
451
  @property st-global(--wds-shadow-x-input);
452
+ @property st-global(--wds-shadow-x-primary-modal);
452
453
  @property st-global(--wds-shadow-x-primary-toggle-button);
453
454
  @property st-global(--wds-shadow-x-secondary-raised);
454
455
  @property st-global(--wds-shadow-x-secondary-toggle-button);
@@ -907,7 +908,7 @@
907
908
  --wds-shadow-blur-secondary-toggle-button: 1.7px;
908
909
  --wds-shadow-blur-tertiary-toggle-button: 0.6px;
909
910
  --wds-shadow-fill-input: rgba(118, 117, 116, 0.2);
910
- --wds-shadow-fill-primary-modal: rgba(19, 23, 32, .15);
911
+ --wds-shadow-fill-primary-modal: rgba(19, 23, 32, .1);
911
912
  --wds-shadow-fill-primary-overlay: rgba(19, 23, 32, .1);
912
913
  --wds-shadow-fill-primary-overlay-dark: rgba(19, 23, 32, .15);
913
914
  --wds-shadow-fill-primary-raised: rgba(19, 23, 32, .05);
@@ -931,17 +932,18 @@
931
932
  --wds-shadow-focus-standard: 0 0 0 3px #acbeff;
932
933
  --wds-shadow-focus-warning: 0 0 0 #fdead2;
933
934
  --wds-shadow-spread-secondary-raised: -0.70;
934
- --wds-shadow-surface-modal: 0 8px 8px rgba(19, 23, 32, .1), 0 3px 24px rgba(19, 23, 32, .2);
935
+ --wds-shadow-surface-modal: 2px 20px 30px rgba(19, 23, 32, .1), 0 0px 0px rgba(19, 23, 32, 0);
935
936
  --wds-shadow-surface-overlay: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
936
937
  --wds-shadow-surface-overlay-dark: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
937
938
  --wds-shadow-surface-raised: 0 2px 4px rgba(19, 23, 32, .05), 0 0 6px rgba(19, 23, 32, .1);
938
939
  --wds-shadow-x-input: 1px;
940
+ --wds-shadow-x-primary-modal: 2px;
939
941
  --wds-shadow-x-primary-toggle-button: 1px;
940
942
  --wds-shadow-x-secondary-raised: 1px;
941
943
  --wds-shadow-x-secondary-toggle-button: 1.2px;
942
944
  --wds-shadow-x-tertiary-toggle-button: 0.4px;
943
945
  --wds-shadow-y-input: 1px;
944
- --wds-shadow-y-primary-modal: 12px;
946
+ --wds-shadow-y-primary-modal: 20px;
945
947
  --wds-shadow-y-primary-overlay: 12px;
946
948
  --wds-shadow-y-primary-overlay-dark: 0px;
947
949
  --wds-shadow-y-primary-raised: 1px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.145.0",
3
+ "version": "1.149.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": "b00d730a1f14dab589d70157115bb485f40e9ce70ec6f7b7cde454eb"
36
+ "falconPackageHash": "9ddbb9581573121e3f93b3ace44cb774dc419872b04bdd98d21d796d"
37
37
  }
package/semantic.st.css CHANGED
@@ -939,7 +939,7 @@
939
939
  --wds-shadow-focus-standard: 0 0 0 3px #a8caff;
940
940
  --wds-shadow-focus-warning: 0 0 0 3px #ffe2a5;
941
941
  --wds-shadow-spread-secondary-raised: 0;
942
- --wds-shadow-surface-modal: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
942
+ --wds-shadow-surface-modal: 0px 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
943
943
  --wds-shadow-surface-overlay: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
944
944
  --wds-shadow-surface-overlay-dark: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
945
945
  --wds-shadow-surface-raised: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);