@wix/design-system-tokens 1.207.0 → 1.209.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 (25) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/all.css +18 -0
  3. package/all.scss +18 -0
  4. package/all.st.css +36 -0
  5. package/component.st.css +36 -0
  6. package/odeditor/all.css +27 -5
  7. package/odeditor/all.scss +27 -5
  8. package/odeditor/all.st.css +49 -5
  9. package/odeditor/component.st.css +41 -5
  10. package/odeditor/semantic.st.css +8 -0
  11. package/odeditor-dark/all.css +27 -5
  12. package/odeditor-dark/all.scss +27 -5
  13. package/odeditor-dark/all.st.css +49 -5
  14. package/odeditor-dark/component.st.css +41 -5
  15. package/odeditor-dark/semantic.st.css +8 -0
  16. package/package.json +2 -2
  17. package/studio/all.css +22 -0
  18. package/studio/all.scss +22 -0
  19. package/studio/all.st.css +44 -0
  20. package/studio/component.st.css +36 -0
  21. package/studio/semantic.st.css +8 -0
  22. package/wixel/all.css +18 -0
  23. package/wixel/all.scss +18 -0
  24. package/wixel/all.st.css +36 -0
  25. package/wixel/component.st.css +36 -0
package/wixel/all.st.css CHANGED
@@ -834,10 +834,13 @@
834
834
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
835
835
  @property st-global(--wds-counter-badge-border-radius-medium);
836
836
  @property st-global(--wds-counter-badge-border-radius-small);
837
+ @property st-global(--wds-counter-badge-font-size-tiny);
837
838
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
838
839
  @property st-global(--wds-counter-badge-padding-horizontal-small);
840
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
839
841
  @property st-global(--wds-counter-badge-size-medium);
840
842
  @property st-global(--wds-counter-badge-size-small);
843
+ @property st-global(--wds-counter-badge-size-tiny);
841
844
  @property st-global(--wds-custom-modal-border-radius);
842
845
  @property st-global(--wds-custom-modal-content-padding-horizontal);
843
846
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -877,6 +880,8 @@
877
880
  @property st-global(--wds-empty-state-border-radius);
878
881
  @property st-global(--wds-empty-state-page-content-paddings);
879
882
  @property st-global(--wds-empty-state-section-content-paddings);
883
+ @property st-global(--wds-empty-state-subtitle-fill);
884
+ @property st-global(--wds-empty-state-title-gap);
880
885
  @property st-global(--wds-feature-list-gap);
881
886
  @property st-global(--wds-field-set-gap-large);
882
887
  @property st-global(--wds-field-set-gap-medium);
@@ -969,6 +974,12 @@
969
974
  @property st-global(--wds-gallery-item-padding-right-small);
970
975
  @property st-global(--wds-gallery-item-padding-vertical-medium);
971
976
  @property st-global(--wds-gallery-item-padding-vertical-small);
977
+ @property st-global(--wds-google-preview-favicon-background-fill);
978
+ @property st-global(--wds-google-preview-favicon-border-fill);
979
+ @property st-global(--wds-google-preview-site-name-fill);
980
+ @property st-global(--wds-google-preview-surface-fill);
981
+ @property st-global(--wds-google-preview-text-fill);
982
+ @property st-global(--wds-google-preview-title-fill);
972
983
  @property st-global(--wds-icon-button-color-border-dark-secondary);
973
984
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
974
985
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1784,16 +1795,21 @@
1784
1795
  @property st-global(--wds-tabs-item-fill-hover);
1785
1796
  @property st-global(--wds-tabs-item-gap-medium);
1786
1797
  @property st-global(--wds-tabs-item-gap-small);
1798
+ @property st-global(--wds-tabs-item-gap-small-medium);
1787
1799
  @property st-global(--wds-tabs-label-fill);
1788
1800
  @property st-global(--wds-tabs-label-fill-active);
1789
1801
  @property st-global(--wds-tabs-label-font-size-small);
1802
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1790
1803
  @property st-global(--wds-tabs-label-font-weight);
1791
1804
  @property st-global(--wds-tabs-label-font-weight-active);
1792
1805
  @property st-global(--wds-tabs-label-line-height-small);
1806
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1793
1807
  @property st-global(--wds-tabs-padding-horizontal-medium);
1794
1808
  @property st-global(--wds-tabs-padding-horizontal-small);
1809
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1795
1810
  @property st-global(--wds-tabs-padding-vertical-medium);
1796
1811
  @property st-global(--wds-tabs-padding-vertical-small);
1812
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1797
1813
  @property st-global(--wds-tabs-selection-border);
1798
1814
  @property st-global(--wds-tabs-selection-fill-primary);
1799
1815
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -1984,9 +2000,11 @@
1984
2000
  @property st-global(--wds-toggle-switch-width-medium);
1985
2001
  @property st-global(--wds-toggle-switch-width-small);
1986
2002
  @property st-global(--wds-tooltip-background-fill);
2003
+ @property st-global(--wds-tooltip-border-fill);
1987
2004
  @property st-global(--wds-tooltip-border-radius);
1988
2005
  @property st-global(--wds-tooltip-border-radius-medium);
1989
2006
  @property st-global(--wds-tooltip-border-radius-small);
2007
+ @property st-global(--wds-tooltip-border-width);
1990
2008
  @property st-global(--wds-tooltip-label-font-line-height-medium);
1991
2009
  @property st-global(--wds-tooltip-label-font-line-height-small);
1992
2010
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -2916,10 +2934,13 @@
2916
2934
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
2917
2935
  --wds-counter-badge-border-radius-medium: 1000px;
2918
2936
  --wds-counter-badge-border-radius-small: 1000px;
2937
+ --wds-counter-badge-font-size-tiny: 10px;
2919
2938
  --wds-counter-badge-padding-horizontal-medium: 6px;
2920
2939
  --wds-counter-badge-padding-horizontal-small: 4px;
2940
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
2921
2941
  --wds-counter-badge-size-medium: 24px;
2922
2942
  --wds-counter-badge-size-small: 18px;
2943
+ --wds-counter-badge-size-tiny: 14px;
2923
2944
  --wds-custom-modal-border-radius: 4px;
2924
2945
  --wds-custom-modal-content-padding-horizontal: 24px;
2925
2946
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -2959,6 +2980,8 @@
2959
2980
  --wds-empty-state-border-radius: 4px;
2960
2981
  --wds-empty-state-page-content-paddings: 24px;
2961
2982
  --wds-empty-state-section-content-paddings: 24px;
2983
+ --wds-empty-state-subtitle-fill: #acafc4;
2984
+ --wds-empty-state-title-gap: 8px;
2962
2985
  --wds-feature-list-gap: 24px;
2963
2986
  --wds-field-set-gap-large: 16px;
2964
2987
  --wds-field-set-gap-medium: 12px;
@@ -3051,6 +3074,12 @@
3051
3074
  --wds-gallery-item-padding-right-small: 18px;
3052
3075
  --wds-gallery-item-padding-vertical-medium: 18px;
3053
3076
  --wds-gallery-item-padding-vertical-small: 12px;
3077
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
3078
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
3079
+ --wds-google-preview-site-name-fill: #202124;
3080
+ --wds-google-preview-surface-fill: #ffffff;
3081
+ --wds-google-preview-text-fill: #4D5156;
3082
+ --wds-google-preview-title-fill: #260AA8;
3054
3083
  --wds-icon-button-color-border-dark-secondary: #868aa5;
3055
3084
  --wds-icon-button-color-border-dark-secondary-active: #2b2e36;
3056
3085
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(38, 37, 36, 0.1000);
@@ -3866,16 +3895,21 @@
3866
3895
  --wds-tabs-item-fill-hover: rgba(38, 37, 36, 0.0000);
3867
3896
  --wds-tabs-item-gap-medium: 8px;
3868
3897
  --wds-tabs-item-gap-small: 6px;
3898
+ --wds-tabs-item-gap-small-medium: 6px;
3869
3899
  --wds-tabs-label-fill: #000624;
3870
3900
  --wds-tabs-label-fill-active: #4a57ff;
3871
3901
  --wds-tabs-label-font-size-small: 12px;
3902
+ --wds-tabs-label-font-size-small-medium: 12px;
3872
3903
  --wds-tabs-label-font-weight: 400;
3873
3904
  --wds-tabs-label-font-weight-active: 400;
3874
3905
  --wds-tabs-label-line-height-small: 16px;
3906
+ --wds-tabs-label-line-height-small-medium: 16px;
3875
3907
  --wds-tabs-padding-horizontal-medium: 16px;
3876
3908
  --wds-tabs-padding-horizontal-small: 12px;
3909
+ --wds-tabs-padding-horizontal-small-medium: 12px;
3877
3910
  --wds-tabs-padding-vertical-medium: 16px;
3878
3911
  --wds-tabs-padding-vertical-small: 12px;
3912
+ --wds-tabs-padding-vertical-small-medium: 12px;
3879
3913
  --wds-tabs-selection-border: linear-gradient(90deg, rgba(255, 255, 255, 0.0000) 0%, #4a57ff 20%, #4a57ff 80%, rgba(255, 255, 255, 0.0000) 100%);
3880
3914
  --wds-tabs-selection-fill-primary: #4a57ff;
3881
3915
  --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0.0000);
@@ -4066,9 +4100,11 @@
4066
4100
  --wds-toggle-switch-width-medium: 32px;
4067
4101
  --wds-toggle-switch-width-small: 24px;
4068
4102
  --wds-tooltip-background-fill: #000624;
4103
+ --wds-tooltip-border-fill: rgba(38, 37, 36, 0.0000);
4069
4104
  --wds-tooltip-border-radius: 12px;
4070
4105
  --wds-tooltip-border-radius-medium: 8px;
4071
4106
  --wds-tooltip-border-radius-small: 8px;
4107
+ --wds-tooltip-border-width: 0px;
4072
4108
  --wds-tooltip-label-font-line-height-medium: 20px;
4073
4109
  --wds-tooltip-label-font-line-height-small: 16px;
4074
4110
  --wds-tooltip-label-font-size-medium: 14px;
package/wixel/component.st.css CHANGED
@@ -330,10 +330,13 @@
330
330
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
331
331
  @property st-global(--wds-counter-badge-border-radius-medium);
332
332
  @property st-global(--wds-counter-badge-border-radius-small);
333
+ @property st-global(--wds-counter-badge-font-size-tiny);
333
334
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
334
335
  @property st-global(--wds-counter-badge-padding-horizontal-small);
336
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
335
337
  @property st-global(--wds-counter-badge-size-medium);
336
338
  @property st-global(--wds-counter-badge-size-small);
339
+ @property st-global(--wds-counter-badge-size-tiny);
337
340
  @property st-global(--wds-custom-modal-border-radius);
338
341
  @property st-global(--wds-custom-modal-content-padding-horizontal);
339
342
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -373,6 +376,8 @@
373
376
  @property st-global(--wds-empty-state-border-radius);
374
377
  @property st-global(--wds-empty-state-page-content-paddings);
375
378
  @property st-global(--wds-empty-state-section-content-paddings);
379
+ @property st-global(--wds-empty-state-subtitle-fill);
380
+ @property st-global(--wds-empty-state-title-gap);
376
381
  @property st-global(--wds-feature-list-gap);
377
382
  @property st-global(--wds-field-set-gap-large);
378
383
  @property st-global(--wds-field-set-gap-medium);
@@ -408,6 +413,12 @@
408
413
  @property st-global(--wds-gallery-item-padding-right-small);
409
414
  @property st-global(--wds-gallery-item-padding-vertical-medium);
410
415
  @property st-global(--wds-gallery-item-padding-vertical-small);
416
+ @property st-global(--wds-google-preview-favicon-background-fill);
417
+ @property st-global(--wds-google-preview-favicon-border-fill);
418
+ @property st-global(--wds-google-preview-site-name-fill);
419
+ @property st-global(--wds-google-preview-surface-fill);
420
+ @property st-global(--wds-google-preview-text-fill);
421
+ @property st-global(--wds-google-preview-title-fill);
411
422
  @property st-global(--wds-icon-button-color-border-dark-secondary);
412
423
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
413
424
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1073,16 +1084,21 @@
1073
1084
  @property st-global(--wds-tabs-item-fill-hover);
1074
1085
  @property st-global(--wds-tabs-item-gap-medium);
1075
1086
  @property st-global(--wds-tabs-item-gap-small);
1087
+ @property st-global(--wds-tabs-item-gap-small-medium);
1076
1088
  @property st-global(--wds-tabs-label-fill);
1077
1089
  @property st-global(--wds-tabs-label-fill-active);
1078
1090
  @property st-global(--wds-tabs-label-font-size-small);
1091
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1079
1092
  @property st-global(--wds-tabs-label-font-weight);
1080
1093
  @property st-global(--wds-tabs-label-font-weight-active);
1081
1094
  @property st-global(--wds-tabs-label-line-height-small);
1095
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1082
1096
  @property st-global(--wds-tabs-padding-horizontal-medium);
1083
1097
  @property st-global(--wds-tabs-padding-horizontal-small);
1098
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1084
1099
  @property st-global(--wds-tabs-padding-vertical-medium);
1085
1100
  @property st-global(--wds-tabs-padding-vertical-small);
1101
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1086
1102
  @property st-global(--wds-tabs-selection-border);
1087
1103
  @property st-global(--wds-tabs-selection-fill-primary);
1088
1104
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -1273,9 +1289,11 @@
1273
1289
  @property st-global(--wds-toggle-switch-width-medium);
1274
1290
  @property st-global(--wds-toggle-switch-width-small);
1275
1291
  @property st-global(--wds-tooltip-background-fill);
1292
+ @property st-global(--wds-tooltip-border-fill);
1276
1293
  @property st-global(--wds-tooltip-border-radius);
1277
1294
  @property st-global(--wds-tooltip-border-radius-medium);
1278
1295
  @property st-global(--wds-tooltip-border-radius-small);
1296
+ @property st-global(--wds-tooltip-border-width);
1279
1297
  @property st-global(--wds-tooltip-label-font-line-height-medium);
1280
1298
  @property st-global(--wds-tooltip-label-font-line-height-small);
1281
1299
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -1699,10 +1717,13 @@
1699
1717
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
1700
1718
  --wds-counter-badge-border-radius-medium: 1000px;
1701
1719
  --wds-counter-badge-border-radius-small: 1000px;
1720
+ --wds-counter-badge-font-size-tiny: 10px;
1702
1721
  --wds-counter-badge-padding-horizontal-medium: 6px;
1703
1722
  --wds-counter-badge-padding-horizontal-small: 4px;
1723
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
1704
1724
  --wds-counter-badge-size-medium: 24px;
1705
1725
  --wds-counter-badge-size-small: 18px;
1726
+ --wds-counter-badge-size-tiny: 14px;
1706
1727
  --wds-custom-modal-border-radius: 4px;
1707
1728
  --wds-custom-modal-content-padding-horizontal: 24px;
1708
1729
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -1742,6 +1763,8 @@
1742
1763
  --wds-empty-state-border-radius: 4px;
1743
1764
  --wds-empty-state-page-content-paddings: 24px;
1744
1765
  --wds-empty-state-section-content-paddings: 24px;
1766
+ --wds-empty-state-subtitle-fill: #acafc4;
1767
+ --wds-empty-state-title-gap: 8px;
1745
1768
  --wds-feature-list-gap: 24px;
1746
1769
  --wds-field-set-gap-large: 16px;
1747
1770
  --wds-field-set-gap-medium: 12px;
@@ -1777,6 +1800,12 @@
1777
1800
  --wds-gallery-item-padding-right-small: 18px;
1778
1801
  --wds-gallery-item-padding-vertical-medium: 18px;
1779
1802
  --wds-gallery-item-padding-vertical-small: 12px;
1803
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
1804
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
1805
+ --wds-google-preview-site-name-fill: #202124;
1806
+ --wds-google-preview-surface-fill: #ffffff;
1807
+ --wds-google-preview-text-fill: #4D5156;
1808
+ --wds-google-preview-title-fill: #260AA8;
1780
1809
  --wds-icon-button-color-border-dark-secondary: #868aa5;
1781
1810
  --wds-icon-button-color-border-dark-secondary-active: #2b2e36;
1782
1811
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(38, 37, 36, 0.1000);
@@ -2442,16 +2471,21 @@
2442
2471
  --wds-tabs-item-fill-hover: rgba(38, 37, 36, 0.0000);
2443
2472
  --wds-tabs-item-gap-medium: 8px;
2444
2473
  --wds-tabs-item-gap-small: 6px;
2474
+ --wds-tabs-item-gap-small-medium: 6px;
2445
2475
  --wds-tabs-label-fill: #000624;
2446
2476
  --wds-tabs-label-fill-active: #4a57ff;
2447
2477
  --wds-tabs-label-font-size-small: 12px;
2478
+ --wds-tabs-label-font-size-small-medium: 12px;
2448
2479
  --wds-tabs-label-font-weight: 400;
2449
2480
  --wds-tabs-label-font-weight-active: 400;
2450
2481
  --wds-tabs-label-line-height-small: 16px;
2482
+ --wds-tabs-label-line-height-small-medium: 16px;
2451
2483
  --wds-tabs-padding-horizontal-medium: 16px;
2452
2484
  --wds-tabs-padding-horizontal-small: 12px;
2485
+ --wds-tabs-padding-horizontal-small-medium: 12px;
2453
2486
  --wds-tabs-padding-vertical-medium: 16px;
2454
2487
  --wds-tabs-padding-vertical-small: 12px;
2488
+ --wds-tabs-padding-vertical-small-medium: 12px;
2455
2489
  --wds-tabs-selection-border: linear-gradient(90deg, rgba(255, 255, 255, 0.0000) 0%, #4a57ff 20%, #4a57ff 80%, rgba(255, 255, 255, 0.0000) 100%);
2456
2490
  --wds-tabs-selection-fill-primary: #4a57ff;
2457
2491
  --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0.0000);
@@ -2642,9 +2676,11 @@
2642
2676
  --wds-toggle-switch-width-medium: 32px;
2643
2677
  --wds-toggle-switch-width-small: 24px;
2644
2678
  --wds-tooltip-background-fill: #000624;
2679
+ --wds-tooltip-border-fill: rgba(38, 37, 36, 0.0000);
2645
2680
  --wds-tooltip-border-radius: 12px;
2646
2681
  --wds-tooltip-border-radius-medium: 8px;
2647
2682
  --wds-tooltip-border-radius-small: 8px;
2683
+ --wds-tooltip-border-width: 0px;
2648
2684
  --wds-tooltip-label-font-line-height-medium: 20px;
2649
2685
  --wds-tooltip-label-font-line-height-small: 16px;
2650
2686
  --wds-tooltip-label-font-size-medium: 14px;