@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/odeditor-dark/all.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @mixin tokens {
2
2
  --wds-variable-input-padding-vertical-tiny: 2px;
3
3
  --wds-variable-input-padding-vertical-small: 5px;
4
+ --wds-tooltip-background-fill: #000000;
4
5
  --wds-toggle-switch-width-small: 24px;
5
6
  --wds-toggle-switch-width-medium: 26px;
6
7
  --wds-toggle-switch-width-large: 40px;
@@ -154,6 +155,10 @@
154
155
  --wds-input-shadow-focus-warning: transparent;
155
156
  --wds-input-shadow-focus-standard: transparent;
156
157
  --wds-input-shadow-focus-destructive: transparent;
158
+ --wds-illustration-color-opacity-100: #F8F6F6FF;
159
+ --wds-illustration-color-opacity-75: #F8F6F6BF;
160
+ --wds-illustration-color-opacity-50: #F8F6F680;
161
+ --wds-illustration-color-opacity-25: #F8F6F640;
157
162
  --wds-illustration-color-background: #2D2D2E;
158
163
  --wds-illustration-color-7: #B8C4FF;
159
164
  --wds-illustration-color-6: #EAEFFF;
@@ -162,6 +167,12 @@
162
167
  --wds-illustration-color-3: #B8C4FF;
163
168
  --wds-illustration-color-2: #7896FF;
164
169
  --wds-illustration-color-1: #002294;
170
+ --wds-google-preview-title-fill: #93b4e3;
171
+ --wds-google-preview-text-fill: #bfbfbf;
172
+ --wds-google-preview-surface-fill: #212122;
173
+ --wds-google-preview-site-name-fill: #bfbfbf;
174
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
175
+ --wds-google-preview-favicon-background-fill: #e4eefe;
165
176
  --wds-font-weight-semi-bold: 600;
166
177
  --wds-font-weight-regular: 400;
167
178
  --wds-font-weight-medium: 500;
@@ -183,6 +194,8 @@
183
194
  --wds-font-family-display: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
184
195
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
185
196
  --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);
197
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
198
+ --wds-counter-badge-font-size-tiny: 10px;
186
199
  --wds-composer-sidebar-end-max-width: 240px;
187
200
  --wds-composer-sidebar-bottom-width: 88px;
188
201
  --wds-color-yellow-600: #3E2B13;
@@ -436,7 +449,9 @@
436
449
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
437
450
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-200);
438
451
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-medium);
452
+ --wds-tooltip-border-width: var(--wds-border-width-100);
439
453
  --wds-tooltip-border-radius: var(--wds-border-radius-300);
454
+ --wds-tooltip-border-fill: var(--wds-color-black-750);
440
455
  --wds-toggle-switch-padding: var(--wds-space-25);
441
456
  --wds-toggle-switch-fill-standard: var(--wds-color-black-400);
442
457
  --wds-toggle-switch-border-urgent-disabled: var(--wds-color-black-100-transparent-0);
@@ -540,16 +555,19 @@
540
555
  --wds-tabs-selection-fill-secondary: var(--wds-color-black-100-transparent-0);
541
556
  --wds-tabs-selection-fill-primary: var(--wds-color-black-100-transparent-0);
542
557
  --wds-tabs-selection-border: var(--wds-color-black-100-transparent-0);
558
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-150);
543
559
  --wds-tabs-padding-vertical-small: var(--wds-space-100);
544
560
  --wds-tabs-padding-vertical-medium: var(--wds-space-175);
561
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
545
562
  --wds-tabs-padding-horizontal-small: var(--wds-space-200);
546
563
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
547
564
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-semi-bold);
548
565
  --wds-tabs-label-font-weight: var(--wds-font-weight-medium);
549
566
  --wds-tabs-label-fill: var(--wds-color-black-300);
567
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
550
568
  --wds-tabs-item-gap-small: var(--wds-space-150);
551
569
  --wds-tabs-item-gap-medium: var(--wds-space-200);
552
- --wds-tabs-item-fill-hover: var(--wds-color-black-750);
570
+ --wds-tabs-item-fill-active: var(--wds-color-black-600);
553
571
  --wds-tabs-gap-horizontal: var(--wds-space-100);
554
572
  --wds-tabs-container-padding-horizontal: var(--wds-space-400);
555
573
  --wds-tabs-border-radius: var(--wds-border-radius-300);
@@ -775,6 +793,7 @@
775
793
  --wds-segmented-toggle-padding-horizontal-medium: var(--wds-space-400);
776
794
  --wds-segmented-toggle-padding-container: var(--wds-space-100);
777
795
  --wds-segmented-toggle-label-font-weight: var(--wds-font-weight-semi-bold);
796
+ --wds-segmented-toggle-label-font-size-small: var(--wds-font-size-200);
778
797
  --wds-segmented-toggle-inner-shadow-fill-secondary: var(--wds-color-white);
779
798
  --wds-segmented-toggle-inner-shadow-fill-primary: var(--wds-color-white);
780
799
  --wds-segmented-toggle-icononly-padding-vertical-small: var(--wds-space-100);
@@ -1070,6 +1089,7 @@
1070
1089
  --wds-field-set-gap-medium: var(--wds-space-300);
1071
1090
  --wds-field-set-gap-large: var(--wds-space-400);
1072
1091
  --wds-feature-list-gap: var(--wds-space-600);
1092
+ --wds-empty-state-title-gap: var(--wds-space-200);
1073
1093
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1074
1094
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1075
1095
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1089,6 +1109,7 @@
1089
1109
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1090
1110
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1091
1111
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1112
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1092
1113
  --wds-counter-badge-size-small: var(--wds-space-475);
1093
1114
  --wds-counter-badge-size-medium: var(--wds-space-600);
1094
1115
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-150);
@@ -1629,9 +1650,8 @@
1629
1650
  --wds-vertical-tabs-icon-fill-disabled: var(--wds-color-text-disabled);
1630
1651
  --wds-vertical-tabs-icon-fill-active: var(--wds-color-text-standard-primary);
1631
1652
  --wds-vertical-tabs-icon-fill: var(--wds-color-text-standard-secondary);
1632
- --wds-tooltip-text-fill: var(--wds-color-text-standard-primary-light);
1653
+ --wds-tooltip-text-fill: var(--wds-color-text-standard-primary);
1633
1654
  --wds-tooltip-label-font-size-medium: var(--wds-font-size-body-tiny);
1634
- --wds-tooltip-background-fill: var(--wds-color-fill-surface-overlay-dark);
1635
1655
  --wds-toggle-switch-fill-urgent-hover: var(--wds-color-fill-dark-primary-hover);
1636
1656
  --wds-toggle-switch-fill-urgent-disabled: var(--wds-color-fill-urgent-primary-disabled);
1637
1657
  --wds-toggle-switch-fill-urgent-active-hover: var(--wds-color-fill-urgent-primary-hover);
@@ -1686,10 +1706,11 @@
1686
1706
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1687
1707
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1688
1708
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1709
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1689
1710
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1690
1711
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1691
1712
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1692
- --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1713
+ --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1693
1714
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1694
1715
  --wds-table-list-item-fill-active: var(--wds-color-fill-dark-tertiary-active);
1695
1716
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-standard-primary);
@@ -1737,7 +1758,6 @@
1737
1758
  --wds-segmented-toggle-value-fill-disabled: var(--wds-color-text-disabled);
1738
1759
  --wds-segmented-toggle-value-fill-default: var(--wds-color-text-standard-primary);
1739
1760
  --wds-segmented-toggle-value-fill: var(--wds-color-text-standard-primary);
1740
- --wds-segmented-toggle-label-font-size-small: var(--wds-font-size-body-small);
1741
1761
  --wds-segmented-toggle-label-font-size-medium: var(--wds-font-size-body-medium);
1742
1762
  --wds-segmented-toggle-label-font-line-height-medium: var(--wds-font-line-height-400);
1743
1763
  --wds-segmented-toggle-fill-selected-disabled: var(--wds-color-fill-standard-tertiary-disabled);
@@ -1922,6 +1942,7 @@
1922
1942
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1923
1943
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1924
1944
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1945
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1925
1946
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1926
1947
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1927
1948
  --wds-drag-handle-fill: var(--wds-color-text-standard-primary);
@@ -2063,6 +2084,7 @@
2063
2084
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2064
2085
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2065
2086
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2087
+ --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-small);
2066
2088
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2067
2089
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-small);
2068
2090
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
package/odeditor-dark/all.st.css CHANGED
@@ -850,10 +850,13 @@
850
850
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
851
851
  @property st-global(--wds-counter-badge-border-radius-medium);
852
852
  @property st-global(--wds-counter-badge-border-radius-small);
853
+ @property st-global(--wds-counter-badge-font-size-tiny);
853
854
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
854
855
  @property st-global(--wds-counter-badge-padding-horizontal-small);
856
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
855
857
  @property st-global(--wds-counter-badge-size-medium);
856
858
  @property st-global(--wds-counter-badge-size-small);
859
+ @property st-global(--wds-counter-badge-size-tiny);
857
860
  @property st-global(--wds-custom-modal-border-radius);
858
861
  @property st-global(--wds-custom-modal-content-padding-horizontal);
859
862
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -888,6 +891,8 @@
888
891
  @property st-global(--wds-empty-state-border-radius);
889
892
  @property st-global(--wds-empty-state-page-content-paddings);
890
893
  @property st-global(--wds-empty-state-section-content-paddings);
894
+ @property st-global(--wds-empty-state-subtitle-fill);
895
+ @property st-global(--wds-empty-state-title-gap);
891
896
  @property st-global(--wds-feature-list-gap);
892
897
  @property st-global(--wds-field-set-gap-large);
893
898
  @property st-global(--wds-field-set-gap-medium);
@@ -973,6 +978,12 @@
973
978
  @property st-global(--wds-form-field-label-gap-tiny);
974
979
  @property st-global(--wds-form-field-label-line-height-small);
975
980
  @property st-global(--wds-form-field-label-line-height-tiny);
981
+ @property st-global(--wds-google-preview-favicon-background-fill);
982
+ @property st-global(--wds-google-preview-favicon-border-fill);
983
+ @property st-global(--wds-google-preview-site-name-fill);
984
+ @property st-global(--wds-google-preview-surface-fill);
985
+ @property st-global(--wds-google-preview-text-fill);
986
+ @property st-global(--wds-google-preview-title-fill);
976
987
  @property st-global(--wds-icon-button-color-border-dark-secondary);
977
988
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
978
989
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1092,6 +1103,10 @@
1092
1103
  @property st-global(--wds-illustration-color-6);
1093
1104
  @property st-global(--wds-illustration-color-7);
1094
1105
  @property st-global(--wds-illustration-color-background);
1106
+ @property st-global(--wds-illustration-color-opacity-25);
1107
+ @property st-global(--wds-illustration-color-opacity-50);
1108
+ @property st-global(--wds-illustration-color-opacity-75);
1109
+ @property st-global(--wds-illustration-color-opacity-100);
1095
1110
  @property st-global(--wds-image-border-radius-default);
1096
1111
  @property st-global(--wds-image-border-radius-none);
1097
1112
  @property st-global(--wds-info-icon-fill);
@@ -1813,18 +1828,23 @@
1813
1828
  @property st-global(--wds-tabs-item-fill-hover);
1814
1829
  @property st-global(--wds-tabs-item-gap-medium);
1815
1830
  @property st-global(--wds-tabs-item-gap-small);
1831
+ @property st-global(--wds-tabs-item-gap-small-medium);
1816
1832
  @property st-global(--wds-tabs-label-fill);
1817
1833
  @property st-global(--wds-tabs-label-fill-active);
1818
1834
  @property st-global(--wds-tabs-label-font-size-medium);
1819
1835
  @property st-global(--wds-tabs-label-font-size-small);
1836
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1820
1837
  @property st-global(--wds-tabs-label-font-weight);
1821
1838
  @property st-global(--wds-tabs-label-font-weight-active);
1822
1839
  @property st-global(--wds-tabs-label-line-height-medium);
1823
1840
  @property st-global(--wds-tabs-label-line-height-small);
1841
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1824
1842
  @property st-global(--wds-tabs-padding-horizontal-medium);
1825
1843
  @property st-global(--wds-tabs-padding-horizontal-small);
1844
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1826
1845
  @property st-global(--wds-tabs-padding-vertical-medium);
1827
1846
  @property st-global(--wds-tabs-padding-vertical-small);
1847
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1828
1848
  @property st-global(--wds-tabs-selection-border);
1829
1849
  @property st-global(--wds-tabs-selection-fill-primary);
1830
1850
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -2025,7 +2045,9 @@
2025
2045
  @property st-global(--wds-toggle-switch-width-medium);
2026
2046
  @property st-global(--wds-toggle-switch-width-small);
2027
2047
  @property st-global(--wds-tooltip-background-fill);
2048
+ @property st-global(--wds-tooltip-border-fill);
2028
2049
  @property st-global(--wds-tooltip-border-radius);
2050
+ @property st-global(--wds-tooltip-border-width);
2029
2051
  @property st-global(--wds-tooltip-label-font-line-height-medium);
2030
2052
  @property st-global(--wds-tooltip-label-font-line-height-small);
2031
2053
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -2961,10 +2983,13 @@
2961
2983
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
2962
2984
  --wds-counter-badge-border-radius-medium: 1000px;
2963
2985
  --wds-counter-badge-border-radius-small: 1000px;
2986
+ --wds-counter-badge-font-size-tiny: 10px;
2964
2987
  --wds-counter-badge-padding-horizontal-medium: 8px;
2965
2988
  --wds-counter-badge-padding-horizontal-small: 6px;
2989
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
2966
2990
  --wds-counter-badge-size-medium: 24px;
2967
2991
  --wds-counter-badge-size-small: 18px;
2992
+ --wds-counter-badge-size-tiny: 14px;
2968
2993
  --wds-custom-modal-border-radius: 12px;
2969
2994
  --wds-custom-modal-content-padding-horizontal: 24px;
2970
2995
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -2999,6 +3024,8 @@
2999
3024
  --wds-empty-state-border-radius: 4px;
3000
3025
  --wds-empty-state-page-content-paddings: 24px;
3001
3026
  --wds-empty-state-section-content-paddings: 24px;
3027
+ --wds-empty-state-subtitle-fill: #A09E9D;
3028
+ --wds-empty-state-title-gap: 8px;
3002
3029
  --wds-feature-list-gap: 24px;
3003
3030
  --wds-field-set-gap-large: 16px;
3004
3031
  --wds-field-set-gap-medium: 12px;
@@ -3084,6 +3111,12 @@
3084
3111
  --wds-form-field-label-gap-tiny: 6px;
3085
3112
  --wds-form-field-label-line-height-small: 16px;
3086
3113
  --wds-form-field-label-line-height-tiny: 12px;
3114
+ --wds-google-preview-favicon-background-fill: #e4eefe;
3115
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
3116
+ --wds-google-preview-site-name-fill: #bfbfbf;
3117
+ --wds-google-preview-surface-fill: #212122;
3118
+ --wds-google-preview-text-fill: #bfbfbf;
3119
+ --wds-google-preview-title-fill: #93b4e3;
3087
3120
  --wds-icon-button-color-border-dark-secondary: #A09E9D;
3088
3121
  --wds-icon-button-color-border-dark-secondary-active: #454544;
3089
3122
  --wds-icon-button-color-border-dark-secondary-disabled: #3A3A3B;
@@ -3203,6 +3236,10 @@
3203
3236
  --wds-illustration-color-6: #EAEFFF;
3204
3237
  --wds-illustration-color-7: #B8C4FF;
3205
3238
  --wds-illustration-color-background: #2D2D2E;
3239
+ --wds-illustration-color-opacity-25: #F8F6F640;
3240
+ --wds-illustration-color-opacity-50: #F8F6F680;
3241
+ --wds-illustration-color-opacity-75: #F8F6F6BF;
3242
+ --wds-illustration-color-opacity-100: #F8F6F6FF;
3206
3243
  --wds-image-border-radius-default: 8px;
3207
3244
  --wds-image-border-radius-none: 0px;
3208
3245
  --wds-info-icon-fill: #A09E9D;
@@ -3546,7 +3583,7 @@
3546
3583
  --wds-segmented-toggle-label-font-line-height-medium: 24px;
3547
3584
  --wds-segmented-toggle-label-font-line-height-small: 18px;
3548
3585
  --wds-segmented-toggle-label-font-size-medium: 16px;
3549
- --wds-segmented-toggle-label-font-size-small: 14px;
3586
+ --wds-segmented-toggle-label-font-size-small: 12px;
3550
3587
  --wds-segmented-toggle-label-font-weight: 600;
3551
3588
  --wds-segmented-toggle-padding-container: 4px;
3552
3589
  --wds-segmented-toggle-padding-horizontal-medium: 16px;
@@ -3920,22 +3957,27 @@
3920
3957
  --wds-tabs-border-radius: 6px;
3921
3958
  --wds-tabs-container-padding-horizontal: 16px;
3922
3959
  --wds-tabs-gap-horizontal: 4px;
3923
- --wds-tabs-item-fill-active: #3A3A3B;
3924
- --wds-tabs-item-fill-hover: #2D2D2E;
3960
+ --wds-tabs-item-fill-active: #454544;
3961
+ --wds-tabs-item-fill-hover: #3A3A3B;
3925
3962
  --wds-tabs-item-gap-medium: 8px;
3926
3963
  --wds-tabs-item-gap-small: 6px;
3964
+ --wds-tabs-item-gap-small-medium: 6px;
3927
3965
  --wds-tabs-label-fill: #A8A6A5;
3928
3966
  --wds-tabs-label-fill-active: #FFFFFF;
3929
3967
  --wds-tabs-label-font-size-medium: 14px;
3930
3968
  --wds-tabs-label-font-size-small: 12px;
3969
+ --wds-tabs-label-font-size-small-medium: 14px;
3931
3970
  --wds-tabs-label-font-weight: 500;
3932
3971
  --wds-tabs-label-font-weight-active: 600;
3933
3972
  --wds-tabs-label-line-height-medium: 18px;
3934
3973
  --wds-tabs-label-line-height-small: 16px;
3974
+ --wds-tabs-label-line-height-small-medium: 18px;
3935
3975
  --wds-tabs-padding-horizontal-medium: 16px;
3936
3976
  --wds-tabs-padding-horizontal-small: 8px;
3977
+ --wds-tabs-padding-horizontal-small-medium: 12px;
3937
3978
  --wds-tabs-padding-vertical-medium: 7px;
3938
3979
  --wds-tabs-padding-vertical-small: 4px;
3980
+ --wds-tabs-padding-vertical-small-medium: 6px;
3939
3981
  --wds-tabs-selection-border: rgba(255, 255, 255, 0);
3940
3982
  --wds-tabs-selection-fill-primary: rgba(255, 255, 255, 0);
3941
3983
  --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0);
@@ -4135,8 +4177,10 @@
4135
4177
  --wds-toggle-switch-width-large: 40px;
4136
4178
  --wds-toggle-switch-width-medium: 26px;
4137
4179
  --wds-toggle-switch-width-small: 24px;
4138
- --wds-tooltip-background-fill: #FFFFFF;
4180
+ --wds-tooltip-background-fill: #000000;
4181
+ --wds-tooltip-border-fill: #2D2D2E;
4139
4182
  --wds-tooltip-border-radius: 6px;
4183
+ --wds-tooltip-border-width: 1px;
4140
4184
  --wds-tooltip-label-font-line-height-medium: 18px;
4141
4185
  --wds-tooltip-label-font-line-height-small: 12px;
4142
4186
  --wds-tooltip-label-font-size-medium: 12px;
@@ -4146,7 +4190,7 @@
4146
4190
  --wds-tooltip-padding-vertical-medium: 6px;
4147
4191
  --wds-tooltip-padding-vertical-small: 6px;
4148
4192
  --wds-tooltip-shadow: rgba(255, 255, 255, 0);
4149
- --wds-tooltip-text-fill: #212122;
4193
+ --wds-tooltip-text-fill: #FFFFFF;
4150
4194
  --wds-top-banner-fill: #d7b7fb;
4151
4195
  --wds-variable-input-padding-vertical-small: 5px;
4152
4196
  --wds-variable-input-padding-vertical-tiny: 2px;
package/odeditor-dark/component.st.css CHANGED
@@ -342,10 +342,13 @@
342
342
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
343
343
  @property st-global(--wds-counter-badge-border-radius-medium);
344
344
  @property st-global(--wds-counter-badge-border-radius-small);
345
+ @property st-global(--wds-counter-badge-font-size-tiny);
345
346
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
346
347
  @property st-global(--wds-counter-badge-padding-horizontal-small);
348
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
347
349
  @property st-global(--wds-counter-badge-size-medium);
348
350
  @property st-global(--wds-counter-badge-size-small);
351
+ @property st-global(--wds-counter-badge-size-tiny);
349
352
  @property st-global(--wds-custom-modal-border-radius);
350
353
  @property st-global(--wds-custom-modal-content-padding-horizontal);
351
354
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -380,6 +383,8 @@
380
383
  @property st-global(--wds-empty-state-border-radius);
381
384
  @property st-global(--wds-empty-state-page-content-paddings);
382
385
  @property st-global(--wds-empty-state-section-content-paddings);
386
+ @property st-global(--wds-empty-state-subtitle-fill);
387
+ @property st-global(--wds-empty-state-title-gap);
383
388
  @property st-global(--wds-feature-list-gap);
384
389
  @property st-global(--wds-field-set-gap-large);
385
390
  @property st-global(--wds-field-set-gap-medium);
@@ -408,6 +413,12 @@
408
413
  @property st-global(--wds-form-field-label-gap-tiny);
409
414
  @property st-global(--wds-form-field-label-line-height-small);
410
415
  @property st-global(--wds-form-field-label-line-height-tiny);
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);
@@ -1072,18 +1083,23 @@
1072
1083
  @property st-global(--wds-tabs-item-fill-hover);
1073
1084
  @property st-global(--wds-tabs-item-gap-medium);
1074
1085
  @property st-global(--wds-tabs-item-gap-small);
1086
+ @property st-global(--wds-tabs-item-gap-small-medium);
1075
1087
  @property st-global(--wds-tabs-label-fill);
1076
1088
  @property st-global(--wds-tabs-label-fill-active);
1077
1089
  @property st-global(--wds-tabs-label-font-size-medium);
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-medium);
1082
1095
  @property st-global(--wds-tabs-label-line-height-small);
1096
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1083
1097
  @property st-global(--wds-tabs-padding-horizontal-medium);
1084
1098
  @property st-global(--wds-tabs-padding-horizontal-small);
1099
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1085
1100
  @property st-global(--wds-tabs-padding-vertical-medium);
1086
1101
  @property st-global(--wds-tabs-padding-vertical-small);
1102
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1087
1103
  @property st-global(--wds-tabs-selection-border);
1088
1104
  @property st-global(--wds-tabs-selection-fill-primary);
1089
1105
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -1284,7 +1300,9 @@
1284
1300
  @property st-global(--wds-toggle-switch-width-medium);
1285
1301
  @property st-global(--wds-toggle-switch-width-small);
1286
1302
  @property st-global(--wds-tooltip-background-fill);
1303
+ @property st-global(--wds-tooltip-border-fill);
1287
1304
  @property st-global(--wds-tooltip-border-radius);
1305
+ @property st-global(--wds-tooltip-border-width);
1288
1306
  @property st-global(--wds-tooltip-label-font-line-height-medium);
1289
1307
  @property st-global(--wds-tooltip-label-font-line-height-small);
1290
1308
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -1710,10 +1728,13 @@
1710
1728
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
1711
1729
  --wds-counter-badge-border-radius-medium: 1000px;
1712
1730
  --wds-counter-badge-border-radius-small: 1000px;
1731
+ --wds-counter-badge-font-size-tiny: 10px;
1713
1732
  --wds-counter-badge-padding-horizontal-medium: 8px;
1714
1733
  --wds-counter-badge-padding-horizontal-small: 6px;
1734
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
1715
1735
  --wds-counter-badge-size-medium: 24px;
1716
1736
  --wds-counter-badge-size-small: 18px;
1737
+ --wds-counter-badge-size-tiny: 14px;
1717
1738
  --wds-custom-modal-border-radius: 12px;
1718
1739
  --wds-custom-modal-content-padding-horizontal: 24px;
1719
1740
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -1748,6 +1769,8 @@
1748
1769
  --wds-empty-state-border-radius: 4px;
1749
1770
  --wds-empty-state-page-content-paddings: 24px;
1750
1771
  --wds-empty-state-section-content-paddings: 24px;
1772
+ --wds-empty-state-subtitle-fill: #A09E9D;
1773
+ --wds-empty-state-title-gap: 8px;
1751
1774
  --wds-feature-list-gap: 24px;
1752
1775
  --wds-field-set-gap-large: 16px;
1753
1776
  --wds-field-set-gap-medium: 12px;
@@ -1776,6 +1799,12 @@
1776
1799
  --wds-form-field-label-gap-tiny: 6px;
1777
1800
  --wds-form-field-label-line-height-small: 16px;
1778
1801
  --wds-form-field-label-line-height-tiny: 12px;
1802
+ --wds-google-preview-favicon-background-fill: #e4eefe;
1803
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
1804
+ --wds-google-preview-site-name-fill: #bfbfbf;
1805
+ --wds-google-preview-surface-fill: #212122;
1806
+ --wds-google-preview-text-fill: #bfbfbf;
1807
+ --wds-google-preview-title-fill: #93b4e3;
1779
1808
  --wds-icon-button-color-border-dark-secondary: #A09E9D;
1780
1809
  --wds-icon-button-color-border-dark-secondary-active: #454544;
1781
1810
  --wds-icon-button-color-border-dark-secondary-disabled: #3A3A3B;
@@ -2217,7 +2246,7 @@
2217
2246
  --wds-segmented-toggle-label-font-line-height-medium: 24px;
2218
2247
  --wds-segmented-toggle-label-font-line-height-small: 18px;
2219
2248
  --wds-segmented-toggle-label-font-size-medium: 16px;
2220
- --wds-segmented-toggle-label-font-size-small: 14px;
2249
+ --wds-segmented-toggle-label-font-size-small: 12px;
2221
2250
  --wds-segmented-toggle-label-font-weight: 600;
2222
2251
  --wds-segmented-toggle-padding-container: 4px;
2223
2252
  --wds-segmented-toggle-padding-horizontal-medium: 16px;
@@ -2436,22 +2465,27 @@
2436
2465
  --wds-tabs-border-radius: 6px;
2437
2466
  --wds-tabs-container-padding-horizontal: 16px;
2438
2467
  --wds-tabs-gap-horizontal: 4px;
2439
- --wds-tabs-item-fill-active: #3A3A3B;
2440
- --wds-tabs-item-fill-hover: #2D2D2E;
2468
+ --wds-tabs-item-fill-active: #454544;
2469
+ --wds-tabs-item-fill-hover: #3A3A3B;
2441
2470
  --wds-tabs-item-gap-medium: 8px;
2442
2471
  --wds-tabs-item-gap-small: 6px;
2472
+ --wds-tabs-item-gap-small-medium: 6px;
2443
2473
  --wds-tabs-label-fill: #A8A6A5;
2444
2474
  --wds-tabs-label-fill-active: #FFFFFF;
2445
2475
  --wds-tabs-label-font-size-medium: 14px;
2446
2476
  --wds-tabs-label-font-size-small: 12px;
2477
+ --wds-tabs-label-font-size-small-medium: 14px;
2447
2478
  --wds-tabs-label-font-weight: 500;
2448
2479
  --wds-tabs-label-font-weight-active: 600;
2449
2480
  --wds-tabs-label-line-height-medium: 18px;
2450
2481
  --wds-tabs-label-line-height-small: 16px;
2482
+ --wds-tabs-label-line-height-small-medium: 18px;
2451
2483
  --wds-tabs-padding-horizontal-medium: 16px;
2452
2484
  --wds-tabs-padding-horizontal-small: 8px;
2485
+ --wds-tabs-padding-horizontal-small-medium: 12px;
2453
2486
  --wds-tabs-padding-vertical-medium: 7px;
2454
2487
  --wds-tabs-padding-vertical-small: 4px;
2488
+ --wds-tabs-padding-vertical-small-medium: 6px;
2455
2489
  --wds-tabs-selection-border: rgba(255, 255, 255, 0);
2456
2490
  --wds-tabs-selection-fill-primary: rgba(255, 255, 255, 0);
2457
2491
  --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0);
@@ -2651,8 +2685,10 @@
2651
2685
  --wds-toggle-switch-width-large: 40px;
2652
2686
  --wds-toggle-switch-width-medium: 26px;
2653
2687
  --wds-toggle-switch-width-small: 24px;
2654
- --wds-tooltip-background-fill: #FFFFFF;
2688
+ --wds-tooltip-background-fill: #000000;
2689
+ --wds-tooltip-border-fill: #2D2D2E;
2655
2690
  --wds-tooltip-border-radius: 6px;
2691
+ --wds-tooltip-border-width: 1px;
2656
2692
  --wds-tooltip-label-font-line-height-medium: 18px;
2657
2693
  --wds-tooltip-label-font-line-height-small: 12px;
2658
2694
  --wds-tooltip-label-font-size-medium: 12px;
@@ -2662,7 +2698,7 @@
2662
2698
  --wds-tooltip-padding-vertical-medium: 6px;
2663
2699
  --wds-tooltip-padding-vertical-small: 6px;
2664
2700
  --wds-tooltip-shadow: rgba(255, 255, 255, 0);
2665
- --wds-tooltip-text-fill: #212122;
2701
+ --wds-tooltip-text-fill: #FFFFFF;
2666
2702
  --wds-top-banner-fill: #d7b7fb;
2667
2703
  --wds-variable-input-padding-vertical-small: 5px;
2668
2704
  --wds-variable-input-padding-vertical-tiny: 2px;
package/odeditor-dark/semantic.st.css CHANGED
@@ -407,6 +407,10 @@
407
407
  @property st-global(--wds-illustration-color-6);
408
408
  @property st-global(--wds-illustration-color-7);
409
409
  @property st-global(--wds-illustration-color-background);
410
+ @property st-global(--wds-illustration-color-opacity-25);
411
+ @property st-global(--wds-illustration-color-opacity-50);
412
+ @property st-global(--wds-illustration-color-opacity-75);
413
+ @property st-global(--wds-illustration-color-opacity-100);
410
414
  @property st-global(--wds-inner-shadow-blur-input);
411
415
  @property st-global(--wds-inner-shadow-blur-primary);
412
416
  @property st-global(--wds-inner-shadow-blur-secondary);
@@ -910,6 +914,10 @@
910
914
  --wds-illustration-color-6: #EAEFFF;
911
915
  --wds-illustration-color-7: #B8C4FF;
912
916
  --wds-illustration-color-background: #2D2D2E;
917
+ --wds-illustration-color-opacity-25: #F8F6F640;
918
+ --wds-illustration-color-opacity-50: #F8F6F680;
919
+ --wds-illustration-color-opacity-75: #F8F6F6BF;
920
+ --wds-illustration-color-opacity-100: #F8F6F6FF;
913
921
  --wds-inner-shadow-blur-input: 3px;
914
922
  --wds-inner-shadow-blur-primary: 2px;
915
923
  --wds-inner-shadow-blur-secondary: 2px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.207.0",
3
+ "version": "1.209.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -32,5 +32,5 @@
32
32
  "author": "augustinasv@wix.com",
33
33
  "description": "Design system tokens",
34
34
  "packageManager": "yarn@3.5.0",
35
- "falconPackageHash": "b73d6dd02bc7916773ae73459c2141221cadb1ef16beba19a08326cc"
35
+ "falconPackageHash": "32f58ef6455a78f154f9ca6bc551226088fc2729f507f5515291be63"
36
36
  }
package/studio/all.css CHANGED
@@ -1,4 +1,8 @@
1
1
  :root, .wds-tokens {
2
+ --wds-illustration-color-opacity-100: #F8F6F100;
3
+ --wds-illustration-color-opacity-75: #F8F6F700;
4
+ --wds-illustration-color-opacity-50: #F8F6F500;
5
+ --wds-illustration-color-opacity-25: #F8F6F200;
2
6
  --wds-illustration-color-background: #F8F6F6;
3
7
  --wds-illustration-color-7: #002297;
4
8
  --wds-illustration-color-6: #002296;
@@ -375,6 +379,13 @@
375
379
  --wds-input-shadow-focus-warning: transparent;
376
380
  --wds-input-shadow-focus-standard: transparent;
377
381
  --wds-input-shadow-focus-destructive: transparent;
382
+ --wds-google-preview-title-fill: #260AA8;
383
+ --wds-google-preview-text-fill: #4D5156;
384
+ --wds-google-preview-site-name-fill: #202124;
385
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
386
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
387
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
388
+ --wds-counter-badge-font-size-tiny: 10px;
378
389
  --wds-composer-sidebar-end-max-width: 240px;
379
390
  --wds-composer-sidebar-bottom-width: 88px;
380
391
  --wds-color-picker-width: 236px;
@@ -845,8 +856,10 @@
845
856
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
846
857
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-300);
847
858
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-regular);
859
+ --wds-tooltip-border-width: var(--wds-border-width-none);
848
860
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
849
861
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
862
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
850
863
  --wds-toggle-switch-padding: var(--wds-space-50);
851
864
  --wds-toggle-switch-fill-urgent-disabled: var(--wds-color-fill-urgent-secondary-disabled);
852
865
  --wds-toggle-switch-fill-success-disabled: var(--wds-color-fill-success-secondary-disabled);
@@ -945,12 +958,15 @@
945
958
  --wds-tag-border-radius-small: var(--wds-border-radius-200);
946
959
  --wds-tag-border-radius-medium: var(--wds-border-radius-200);
947
960
  --wds-tag-border-radius-large: var(--wds-border-radius-200);
961
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-300);
948
962
  --wds-tabs-padding-vertical-small: var(--wds-space-300);
949
963
  --wds-tabs-padding-vertical-medium: var(--wds-space-400);
964
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
950
965
  --wds-tabs-padding-horizontal-small: var(--wds-space-300);
951
966
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
952
967
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
953
968
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
969
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
954
970
  --wds-tabs-item-gap-small: var(--wds-space-150);
955
971
  --wds-tabs-item-gap-medium: var(--wds-space-200);
956
972
  --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
@@ -1318,6 +1334,7 @@
1318
1334
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-white-transparent-0);
1319
1335
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1320
1336
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1337
+ --wds-google-preview-surface-fill: var(--wds-color-white);
1321
1338
  --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1322
1339
  --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1323
1340
  --wds-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1339,6 +1356,7 @@
1339
1356
  --wds-field-set-gap-medium: var(--wds-space-300);
1340
1357
  --wds-field-set-gap-large: var(--wds-space-400);
1341
1358
  --wds-feature-list-gap: var(--wds-space-600);
1359
+ --wds-empty-state-title-gap: var(--wds-space-200);
1342
1360
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1343
1361
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1344
1362
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1362,6 +1380,7 @@
1362
1380
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1363
1381
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1364
1382
  --wds-custom-modal-border-radius: var(--wds-border-radius-200);
1383
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1365
1384
  --wds-counter-badge-size-small: var(--wds-space-475);
1366
1385
  --wds-counter-badge-size-medium: var(--wds-space-600);
1367
1386
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-150);
@@ -1665,6 +1684,7 @@
1665
1684
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1666
1685
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1667
1686
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1687
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1668
1688
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1669
1689
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1670
1690
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
@@ -1915,6 +1935,7 @@
1915
1935
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1916
1936
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1917
1937
  --wds-field-set-label-fill: var(--wds-color-text-standard-primary);
1938
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1918
1939
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1919
1940
  --wds-drag-handle-fill: var(--wds-color-text-primary);
1920
1941
  --wds-dock-foreground-fill-hover: var(--wds-color-fill-standard-secondary-active);
@@ -2098,6 +2119,7 @@
2098
2119
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2099
2120
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2100
2121
  --wds-tabs-selection-border: linear-gradient(90deg, var(--wds-tabs-selection-fill-secondary) 0%, var(--wds-tabs-selection-fill-primary) 20%, var(--wds-tabs-selection-fill-primary) 80%, var(--wds-tabs-selection-fill-secondary) 100%);
2122
+ --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-tiny);
2101
2123
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2102
2124
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2103
2125
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);