@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/all.scss CHANGED
@@ -142,6 +142,10 @@
142
142
  --wds-input-shadow-focus-warning: transparent;
143
143
  --wds-input-shadow-focus-standard: transparent;
144
144
  --wds-input-shadow-focus-destructive: transparent;
145
+ --wds-illustration-color-opacity-100: #F8F6F600;
146
+ --wds-illustration-color-opacity-75: #F8F6F600;
147
+ --wds-illustration-color-opacity-50: #F8F6F600;
148
+ --wds-illustration-color-opacity-25: #F8F6F600;
145
149
  --wds-illustration-color-background: #F8F6F6;
146
150
  --wds-illustration-color-7: #002294;
147
151
  --wds-illustration-color-6: #002294;
@@ -150,6 +154,11 @@
150
154
  --wds-illustration-color-3: #B8C4FF;
151
155
  --wds-illustration-color-2: #7896FF;
152
156
  --wds-illustration-color-1: #002294;
157
+ --wds-google-preview-title-fill: #260AA8;
158
+ --wds-google-preview-text-fill: #4D5156;
159
+ --wds-google-preview-site-name-fill: #202124;
160
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
161
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
153
162
  --wds-font-weight-semi-bold: 600;
154
163
  --wds-font-weight-regular: 400;
155
164
  --wds-font-weight-medium: 500;
@@ -171,6 +180,8 @@
171
180
  --wds-font-family-display: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
172
181
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
173
182
  --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);
183
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
184
+ --wds-counter-badge-font-size-tiny: 10px;
174
185
  --wds-composer-sidebar-end-max-width: 240px;
175
186
  --wds-composer-sidebar-bottom-width: 88px;
176
187
  --wds-color-yellow-600: #fef6ed;
@@ -423,7 +434,9 @@
423
434
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
424
435
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-200);
425
436
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-medium);
437
+ --wds-tooltip-border-width: var(--wds-border-width-none);
426
438
  --wds-tooltip-border-radius: var(--wds-border-radius-300);
439
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
427
440
  --wds-toggle-switch-padding: var(--wds-space-25);
428
441
  --wds-toggle-switch-fill-standard: var(--wds-color-black-400);
429
442
  --wds-toggle-switch-border-urgent-disabled: var(--wds-color-black-100-transparent-0);
@@ -535,16 +548,19 @@
535
548
  --wds-tabs-selection-fill-secondary: var(--wds-color-black-100-transparent-0);
536
549
  --wds-tabs-selection-fill-primary: var(--wds-color-black-100-transparent-0);
537
550
  --wds-tabs-selection-border: var(--wds-color-black-100-transparent-0);
551
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-150);
538
552
  --wds-tabs-padding-vertical-small: var(--wds-space-100);
539
553
  --wds-tabs-padding-vertical-medium: var(--wds-space-175);
554
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
540
555
  --wds-tabs-padding-horizontal-small: var(--wds-space-200);
541
556
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
542
- --wds-tabs-label-font-weight-active: var(--wds-font-weight-semi-bold);
557
+ --wds-tabs-label-font-weight-active: var(--wds-font-weight-medium);
543
558
  --wds-tabs-label-font-weight: var(--wds-font-weight-medium);
544
559
  --wds-tabs-label-fill: var(--wds-color-black-300);
560
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
545
561
  --wds-tabs-item-gap-small: var(--wds-space-150);
546
562
  --wds-tabs-item-gap-medium: var(--wds-space-200);
547
- --wds-tabs-item-fill-hover: var(--wds-color-black-750);
563
+ --wds-tabs-item-fill-active: var(--wds-color-black-600);
548
564
  --wds-tabs-gap-horizontal: var(--wds-space-100);
549
565
  --wds-tabs-container-padding-horizontal: var(--wds-space-400);
550
566
  --wds-tabs-border-radius: var(--wds-border-radius-300);
@@ -1010,6 +1026,7 @@
1010
1026
  --wds-icon-button-color-border-premium-secondary-disabled: var(--wds-color-black-700);
1011
1027
  --wds-icon-button-color-border-light-secondary-disabled: var(--wds-color-black-700);
1012
1028
  --wds-icon-button-color-border-dark-secondary-disabled: var(--wds-color-black-700);
1029
+ --wds-google-preview-surface-fill: var(--wds-color-white);
1013
1030
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1014
1031
  --wds-form-field-label-gap-small: var(--wds-space-200);
1015
1032
  --wds-form-field-label-font-weight: var(--wds-font-weight-medium);
@@ -1051,6 +1068,7 @@
1051
1068
  --wds-field-set-gap-medium: var(--wds-space-300);
1052
1069
  --wds-field-set-gap-large: var(--wds-space-400);
1053
1070
  --wds-feature-list-gap: var(--wds-space-600);
1071
+ --wds-empty-state-title-gap: var(--wds-space-200);
1054
1072
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1055
1073
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1056
1074
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1068,6 +1086,7 @@
1068
1086
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1069
1087
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1070
1088
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1089
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1071
1090
  --wds-counter-badge-size-small: var(--wds-space-475);
1072
1091
  --wds-counter-badge-size-medium: var(--wds-space-600);
1073
1092
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-150);
@@ -1659,10 +1678,11 @@
1659
1678
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1660
1679
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1661
1680
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1681
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1662
1682
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1663
- --wds-tabs-label-font-size-medium: var(--wds-font-size-body-medium);
1683
+ --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1664
1684
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1665
- --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1685
+ --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1666
1686
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1667
1687
  --wds-table-list-item-fill-active: var(--wds-color-fill-dark-tertiary-active);
1668
1688
  --wds-table-list-item-fill: var(--wds-color-fill-dark-tertiary);
@@ -1907,6 +1927,7 @@
1907
1927
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1908
1928
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1909
1929
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1930
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1910
1931
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1911
1932
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1912
1933
  --wds-drag-handle-fill: var(--wds-color-text-standard-primary);
@@ -2055,8 +2076,9 @@
2055
2076
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2056
2077
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2057
2078
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2079
+ --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-small);
2058
2080
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2059
- --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-medium);
2081
+ --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-small);
2060
2082
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2061
2083
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2062
2084
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
package/odeditor/all.st.css CHANGED
@@ -846,10 +846,13 @@
846
846
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
847
847
  @property st-global(--wds-counter-badge-border-radius-medium);
848
848
  @property st-global(--wds-counter-badge-border-radius-small);
849
+ @property st-global(--wds-counter-badge-font-size-tiny);
849
850
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
850
851
  @property st-global(--wds-counter-badge-padding-horizontal-small);
852
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
851
853
  @property st-global(--wds-counter-badge-size-medium);
852
854
  @property st-global(--wds-counter-badge-size-small);
855
+ @property st-global(--wds-counter-badge-size-tiny);
853
856
  @property st-global(--wds-custom-modal-border-radius);
854
857
  @property st-global(--wds-custom-modal-content-padding-horizontal);
855
858
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -884,6 +887,8 @@
884
887
  @property st-global(--wds-empty-state-border-radius);
885
888
  @property st-global(--wds-empty-state-page-content-paddings);
886
889
  @property st-global(--wds-empty-state-section-content-paddings);
890
+ @property st-global(--wds-empty-state-subtitle-fill);
891
+ @property st-global(--wds-empty-state-title-gap);
887
892
  @property st-global(--wds-feature-list-gap);
888
893
  @property st-global(--wds-field-set-gap-large);
889
894
  @property st-global(--wds-field-set-gap-medium);
@@ -969,6 +974,12 @@
969
974
  @property st-global(--wds-form-field-label-gap-tiny);
970
975
  @property st-global(--wds-form-field-label-line-height-small);
971
976
  @property st-global(--wds-form-field-label-line-height-tiny);
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);
@@ -1088,6 +1099,10 @@
1088
1099
  @property st-global(--wds-illustration-color-6);
1089
1100
  @property st-global(--wds-illustration-color-7);
1090
1101
  @property st-global(--wds-illustration-color-background);
1102
+ @property st-global(--wds-illustration-color-opacity-25);
1103
+ @property st-global(--wds-illustration-color-opacity-50);
1104
+ @property st-global(--wds-illustration-color-opacity-75);
1105
+ @property st-global(--wds-illustration-color-opacity-100);
1091
1106
  @property st-global(--wds-image-border-radius-default);
1092
1107
  @property st-global(--wds-image-border-radius-none);
1093
1108
  @property st-global(--wds-info-icon-fill);
@@ -1804,18 +1819,23 @@
1804
1819
  @property st-global(--wds-tabs-item-fill-hover);
1805
1820
  @property st-global(--wds-tabs-item-gap-medium);
1806
1821
  @property st-global(--wds-tabs-item-gap-small);
1822
+ @property st-global(--wds-tabs-item-gap-small-medium);
1807
1823
  @property st-global(--wds-tabs-label-fill);
1808
1824
  @property st-global(--wds-tabs-label-fill-active);
1809
1825
  @property st-global(--wds-tabs-label-font-size-medium);
1810
1826
  @property st-global(--wds-tabs-label-font-size-small);
1827
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1811
1828
  @property st-global(--wds-tabs-label-font-weight);
1812
1829
  @property st-global(--wds-tabs-label-font-weight-active);
1813
1830
  @property st-global(--wds-tabs-label-line-height-medium);
1814
1831
  @property st-global(--wds-tabs-label-line-height-small);
1832
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1815
1833
  @property st-global(--wds-tabs-padding-horizontal-medium);
1816
1834
  @property st-global(--wds-tabs-padding-horizontal-small);
1835
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1817
1836
  @property st-global(--wds-tabs-padding-vertical-medium);
1818
1837
  @property st-global(--wds-tabs-padding-vertical-small);
1838
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1819
1839
  @property st-global(--wds-tabs-selection-border);
1820
1840
  @property st-global(--wds-tabs-selection-fill-primary);
1821
1841
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -2016,7 +2036,9 @@
2016
2036
  @property st-global(--wds-toggle-switch-width-medium);
2017
2037
  @property st-global(--wds-toggle-switch-width-small);
2018
2038
  @property st-global(--wds-tooltip-background-fill);
2039
+ @property st-global(--wds-tooltip-border-fill);
2019
2040
  @property st-global(--wds-tooltip-border-radius);
2041
+ @property st-global(--wds-tooltip-border-width);
2020
2042
  @property st-global(--wds-tooltip-label-font-line-height-medium);
2021
2043
  @property st-global(--wds-tooltip-label-font-line-height-small);
2022
2044
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -2948,10 +2970,13 @@
2948
2970
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
2949
2971
  --wds-counter-badge-border-radius-medium: 1000px;
2950
2972
  --wds-counter-badge-border-radius-small: 1000px;
2973
+ --wds-counter-badge-font-size-tiny: 10px;
2951
2974
  --wds-counter-badge-padding-horizontal-medium: 8px;
2952
2975
  --wds-counter-badge-padding-horizontal-small: 6px;
2976
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
2953
2977
  --wds-counter-badge-size-medium: 24px;
2954
2978
  --wds-counter-badge-size-small: 18px;
2979
+ --wds-counter-badge-size-tiny: 14px;
2955
2980
  --wds-custom-modal-border-radius: 12px;
2956
2981
  --wds-custom-modal-content-padding-horizontal: 24px;
2957
2982
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -2986,6 +3011,8 @@
2986
3011
  --wds-empty-state-border-radius: 4px;
2987
3012
  --wds-empty-state-page-content-paddings: 24px;
2988
3013
  --wds-empty-state-section-content-paddings: 24px;
3014
+ --wds-empty-state-subtitle-fill: #767574;
3015
+ --wds-empty-state-title-gap: 8px;
2989
3016
  --wds-feature-list-gap: 24px;
2990
3017
  --wds-field-set-gap-large: 16px;
2991
3018
  --wds-field-set-gap-medium: 12px;
@@ -3071,6 +3098,12 @@
3071
3098
  --wds-form-field-label-gap-tiny: 6px;
3072
3099
  --wds-form-field-label-line-height-small: 16px;
3073
3100
  --wds-form-field-label-line-height-tiny: 12px;
3101
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
3102
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
3103
+ --wds-google-preview-site-name-fill: #202124;
3104
+ --wds-google-preview-surface-fill: #ffffff;
3105
+ --wds-google-preview-text-fill: #4D5156;
3106
+ --wds-google-preview-title-fill: #260AA8;
3074
3107
  --wds-icon-button-color-border-dark-secondary: #767574;
3075
3108
  --wds-icon-button-color-border-dark-secondary-active: #dedede;
3076
3109
  --wds-icon-button-color-border-dark-secondary-disabled: #f0efef;
@@ -3190,6 +3223,10 @@
3190
3223
  --wds-illustration-color-6: #002294;
3191
3224
  --wds-illustration-color-7: #002294;
3192
3225
  --wds-illustration-color-background: #F8F6F6;
3226
+ --wds-illustration-color-opacity-25: #F8F6F600;
3227
+ --wds-illustration-color-opacity-50: #F8F6F600;
3228
+ --wds-illustration-color-opacity-75: #F8F6F600;
3229
+ --wds-illustration-color-opacity-100: #F8F6F600;
3193
3230
  --wds-image-border-radius-default: 8px;
3194
3231
  --wds-image-border-radius-none: 0px;
3195
3232
  --wds-info-icon-fill: #767574;
@@ -3902,22 +3939,27 @@
3902
3939
  --wds-tabs-border-radius: 6px;
3903
3940
  --wds-tabs-container-padding-horizontal: 16px;
3904
3941
  --wds-tabs-gap-horizontal: 4px;
3905
- --wds-tabs-item-fill-active: #f0efef;
3906
- --wds-tabs-item-fill-hover: #f8f6f6;
3942
+ --wds-tabs-item-fill-active: #e8e7e7;
3943
+ --wds-tabs-item-fill-hover: #f0efef;
3907
3944
  --wds-tabs-item-gap-medium: 8px;
3908
3945
  --wds-tabs-item-gap-small: 6px;
3946
+ --wds-tabs-item-gap-small-medium: 6px;
3909
3947
  --wds-tabs-label-fill: #525150;
3910
3948
  --wds-tabs-label-fill-active: #151414;
3911
- --wds-tabs-label-font-size-medium: 16px;
3949
+ --wds-tabs-label-font-size-medium: 14px;
3912
3950
  --wds-tabs-label-font-size-small: 14px;
3951
+ --wds-tabs-label-font-size-small-medium: 14px;
3913
3952
  --wds-tabs-label-font-weight: 500;
3914
- --wds-tabs-label-font-weight-active: 600;
3915
- --wds-tabs-label-line-height-medium: 24px;
3953
+ --wds-tabs-label-font-weight-active: 500;
3954
+ --wds-tabs-label-line-height-medium: 18px;
3916
3955
  --wds-tabs-label-line-height-small: 18px;
3956
+ --wds-tabs-label-line-height-small-medium: 18px;
3917
3957
  --wds-tabs-padding-horizontal-medium: 16px;
3918
3958
  --wds-tabs-padding-horizontal-small: 8px;
3959
+ --wds-tabs-padding-horizontal-small-medium: 12px;
3919
3960
  --wds-tabs-padding-vertical-medium: 7px;
3920
3961
  --wds-tabs-padding-vertical-small: 4px;
3962
+ --wds-tabs-padding-vertical-small-medium: 6px;
3921
3963
  --wds-tabs-selection-border: rgba(19, 23, 32, 0);
3922
3964
  --wds-tabs-selection-fill-primary: rgba(19, 23, 32, 0);
3923
3965
  --wds-tabs-selection-fill-secondary: rgba(19, 23, 32, 0);
@@ -4118,7 +4160,9 @@
4118
4160
  --wds-toggle-switch-width-medium: 26px;
4119
4161
  --wds-toggle-switch-width-small: 24px;
4120
4162
  --wds-tooltip-background-fill: #151414;
4163
+ --wds-tooltip-border-fill: rgba(19, 23, 32, 0);
4121
4164
  --wds-tooltip-border-radius: 6px;
4165
+ --wds-tooltip-border-width: 0px;
4122
4166
  --wds-tooltip-label-font-line-height-medium: 18px;
4123
4167
  --wds-tooltip-label-font-line-height-small: 12px;
4124
4168
  --wds-tooltip-label-font-size-medium: 12px;
package/odeditor/component.st.css CHANGED
@@ -339,10 +339,13 @@
339
339
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
340
340
  @property st-global(--wds-counter-badge-border-radius-medium);
341
341
  @property st-global(--wds-counter-badge-border-radius-small);
342
+ @property st-global(--wds-counter-badge-font-size-tiny);
342
343
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
343
344
  @property st-global(--wds-counter-badge-padding-horizontal-small);
345
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
344
346
  @property st-global(--wds-counter-badge-size-medium);
345
347
  @property st-global(--wds-counter-badge-size-small);
348
+ @property st-global(--wds-counter-badge-size-tiny);
346
349
  @property st-global(--wds-custom-modal-border-radius);
347
350
  @property st-global(--wds-custom-modal-content-padding-horizontal);
348
351
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -377,6 +380,8 @@
377
380
  @property st-global(--wds-empty-state-border-radius);
378
381
  @property st-global(--wds-empty-state-page-content-paddings);
379
382
  @property st-global(--wds-empty-state-section-content-paddings);
383
+ @property st-global(--wds-empty-state-subtitle-fill);
384
+ @property st-global(--wds-empty-state-title-gap);
380
385
  @property st-global(--wds-feature-list-gap);
381
386
  @property st-global(--wds-field-set-gap-large);
382
387
  @property st-global(--wds-field-set-gap-medium);
@@ -405,6 +410,12 @@
405
410
  @property st-global(--wds-form-field-label-gap-tiny);
406
411
  @property st-global(--wds-form-field-label-line-height-small);
407
412
  @property st-global(--wds-form-field-label-line-height-tiny);
413
+ @property st-global(--wds-google-preview-favicon-background-fill);
414
+ @property st-global(--wds-google-preview-favicon-border-fill);
415
+ @property st-global(--wds-google-preview-site-name-fill);
416
+ @property st-global(--wds-google-preview-surface-fill);
417
+ @property st-global(--wds-google-preview-text-fill);
418
+ @property st-global(--wds-google-preview-title-fill);
408
419
  @property st-global(--wds-icon-button-color-border-dark-secondary);
409
420
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
410
421
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1064,18 +1075,23 @@
1064
1075
  @property st-global(--wds-tabs-item-fill-hover);
1065
1076
  @property st-global(--wds-tabs-item-gap-medium);
1066
1077
  @property st-global(--wds-tabs-item-gap-small);
1078
+ @property st-global(--wds-tabs-item-gap-small-medium);
1067
1079
  @property st-global(--wds-tabs-label-fill);
1068
1080
  @property st-global(--wds-tabs-label-fill-active);
1069
1081
  @property st-global(--wds-tabs-label-font-size-medium);
1070
1082
  @property st-global(--wds-tabs-label-font-size-small);
1083
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1071
1084
  @property st-global(--wds-tabs-label-font-weight);
1072
1085
  @property st-global(--wds-tabs-label-font-weight-active);
1073
1086
  @property st-global(--wds-tabs-label-line-height-medium);
1074
1087
  @property st-global(--wds-tabs-label-line-height-small);
1088
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1075
1089
  @property st-global(--wds-tabs-padding-horizontal-medium);
1076
1090
  @property st-global(--wds-tabs-padding-horizontal-small);
1091
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1077
1092
  @property st-global(--wds-tabs-padding-vertical-medium);
1078
1093
  @property st-global(--wds-tabs-padding-vertical-small);
1094
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1079
1095
  @property st-global(--wds-tabs-selection-border);
1080
1096
  @property st-global(--wds-tabs-selection-fill-primary);
1081
1097
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -1276,7 +1292,9 @@
1276
1292
  @property st-global(--wds-toggle-switch-width-medium);
1277
1293
  @property st-global(--wds-toggle-switch-width-small);
1278
1294
  @property st-global(--wds-tooltip-background-fill);
1295
+ @property st-global(--wds-tooltip-border-fill);
1279
1296
  @property st-global(--wds-tooltip-border-radius);
1297
+ @property st-global(--wds-tooltip-border-width);
1280
1298
  @property st-global(--wds-tooltip-label-font-line-height-medium);
1281
1299
  @property st-global(--wds-tooltip-label-font-line-height-small);
1282
1300
  @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: 8px;
1703
1722
  --wds-counter-badge-padding-horizontal-small: 6px;
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: 12px;
1707
1728
  --wds-custom-modal-content-padding-horizontal: 24px;
1708
1729
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -1737,6 +1758,8 @@
1737
1758
  --wds-empty-state-border-radius: 4px;
1738
1759
  --wds-empty-state-page-content-paddings: 24px;
1739
1760
  --wds-empty-state-section-content-paddings: 24px;
1761
+ --wds-empty-state-subtitle-fill: #767574;
1762
+ --wds-empty-state-title-gap: 8px;
1740
1763
  --wds-feature-list-gap: 24px;
1741
1764
  --wds-field-set-gap-large: 16px;
1742
1765
  --wds-field-set-gap-medium: 12px;
@@ -1765,6 +1788,12 @@
1765
1788
  --wds-form-field-label-gap-tiny: 6px;
1766
1789
  --wds-form-field-label-line-height-small: 16px;
1767
1790
  --wds-form-field-label-line-height-tiny: 12px;
1791
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
1792
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
1793
+ --wds-google-preview-site-name-fill: #202124;
1794
+ --wds-google-preview-surface-fill: #ffffff;
1795
+ --wds-google-preview-text-fill: #4D5156;
1796
+ --wds-google-preview-title-fill: #260AA8;
1768
1797
  --wds-icon-button-color-border-dark-secondary: #767574;
1769
1798
  --wds-icon-button-color-border-dark-secondary-active: #dedede;
1770
1799
  --wds-icon-button-color-border-dark-secondary-disabled: #f0efef;
@@ -2420,22 +2449,27 @@
2420
2449
  --wds-tabs-border-radius: 6px;
2421
2450
  --wds-tabs-container-padding-horizontal: 16px;
2422
2451
  --wds-tabs-gap-horizontal: 4px;
2423
- --wds-tabs-item-fill-active: #f0efef;
2424
- --wds-tabs-item-fill-hover: #f8f6f6;
2452
+ --wds-tabs-item-fill-active: #e8e7e7;
2453
+ --wds-tabs-item-fill-hover: #f0efef;
2425
2454
  --wds-tabs-item-gap-medium: 8px;
2426
2455
  --wds-tabs-item-gap-small: 6px;
2456
+ --wds-tabs-item-gap-small-medium: 6px;
2427
2457
  --wds-tabs-label-fill: #525150;
2428
2458
  --wds-tabs-label-fill-active: #151414;
2429
- --wds-tabs-label-font-size-medium: 16px;
2459
+ --wds-tabs-label-font-size-medium: 14px;
2430
2460
  --wds-tabs-label-font-size-small: 14px;
2461
+ --wds-tabs-label-font-size-small-medium: 14px;
2431
2462
  --wds-tabs-label-font-weight: 500;
2432
- --wds-tabs-label-font-weight-active: 600;
2433
- --wds-tabs-label-line-height-medium: 24px;
2463
+ --wds-tabs-label-font-weight-active: 500;
2464
+ --wds-tabs-label-line-height-medium: 18px;
2434
2465
  --wds-tabs-label-line-height-small: 18px;
2466
+ --wds-tabs-label-line-height-small-medium: 18px;
2435
2467
  --wds-tabs-padding-horizontal-medium: 16px;
2436
2468
  --wds-tabs-padding-horizontal-small: 8px;
2469
+ --wds-tabs-padding-horizontal-small-medium: 12px;
2437
2470
  --wds-tabs-padding-vertical-medium: 7px;
2438
2471
  --wds-tabs-padding-vertical-small: 4px;
2472
+ --wds-tabs-padding-vertical-small-medium: 6px;
2439
2473
  --wds-tabs-selection-border: rgba(19, 23, 32, 0);
2440
2474
  --wds-tabs-selection-fill-primary: rgba(19, 23, 32, 0);
2441
2475
  --wds-tabs-selection-fill-secondary: rgba(19, 23, 32, 0);
@@ -2636,7 +2670,9 @@
2636
2670
  --wds-toggle-switch-width-medium: 26px;
2637
2671
  --wds-toggle-switch-width-small: 24px;
2638
2672
  --wds-tooltip-background-fill: #151414;
2673
+ --wds-tooltip-border-fill: rgba(19, 23, 32, 0);
2639
2674
  --wds-tooltip-border-radius: 6px;
2675
+ --wds-tooltip-border-width: 0px;
2640
2676
  --wds-tooltip-label-font-line-height-medium: 18px;
2641
2677
  --wds-tooltip-label-font-line-height-small: 12px;
2642
2678
  --wds-tooltip-label-font-size-medium: 12px;
package/odeditor/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: #002294;
911
915
  --wds-illustration-color-7: #002294;
912
916
  --wds-illustration-color-background: #F8F6F6;
917
+ --wds-illustration-color-opacity-25: #F8F6F600;
918
+ --wds-illustration-color-opacity-50: #F8F6F600;
919
+ --wds-illustration-color-opacity-75: #F8F6F600;
920
+ --wds-illustration-color-opacity-100: #F8F6F600;
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/odeditor-dark/all.css CHANGED
@@ -1,4 +1,8 @@
1
1
  :root, .wds-tokens {
2
+ --wds-illustration-color-opacity-100: #F8F6F6FF;
3
+ --wds-illustration-color-opacity-75: #F8F6F6BF;
4
+ --wds-illustration-color-opacity-50: #F8F6F680;
5
+ --wds-illustration-color-opacity-25: #F8F6F640;
2
6
  --wds-illustration-color-background: #2D2D2E;
3
7
  --wds-illustration-color-7: #B8C4FF;
4
8
  --wds-illustration-color-6: #EAEFFF;
@@ -306,6 +310,7 @@
306
310
  --wds-background-blur-0: 0px;
307
311
  --wds-variable-input-padding-vertical-tiny: 2px;
308
312
  --wds-variable-input-padding-vertical-small: 5px;
313
+ --wds-tooltip-background-fill: #000000;
309
314
  --wds-toggle-switch-width-small: 24px;
310
315
  --wds-toggle-switch-width-medium: 26px;
311
316
  --wds-toggle-switch-width-large: 40px;
@@ -390,7 +395,15 @@
390
395
  --wds-input-shadow-focus-warning: transparent;
391
396
  --wds-input-shadow-focus-standard: transparent;
392
397
  --wds-input-shadow-focus-destructive: transparent;
398
+ --wds-google-preview-title-fill: #93b4e3;
399
+ --wds-google-preview-text-fill: #bfbfbf;
400
+ --wds-google-preview-surface-fill: #212122;
401
+ --wds-google-preview-site-name-fill: #bfbfbf;
402
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
403
+ --wds-google-preview-favicon-background-fill: #e4eefe;
393
404
  --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);
405
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
406
+ --wds-counter-badge-font-size-tiny: 10px;
394
407
  --wds-composer-sidebar-end-max-width: 240px;
395
408
  --wds-composer-sidebar-bottom-width: 88px;
396
409
  --wds-color-picker-width: 236px;
@@ -857,7 +870,9 @@
857
870
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
858
871
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-200);
859
872
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-medium);
873
+ --wds-tooltip-border-width: var(--wds-border-width-100);
860
874
  --wds-tooltip-border-radius: var(--wds-border-radius-300);
875
+ --wds-tooltip-border-fill: var(--wds-color-black-750);
861
876
  --wds-toggle-switch-padding: var(--wds-space-25);
862
877
  --wds-toggle-switch-fill-standard: var(--wds-color-black-400);
863
878
  --wds-toggle-switch-border-urgent-disabled: var(--wds-color-black-100-transparent-0);
@@ -961,16 +976,19 @@
961
976
  --wds-tabs-selection-fill-secondary: var(--wds-color-black-100-transparent-0);
962
977
  --wds-tabs-selection-fill-primary: var(--wds-color-black-100-transparent-0);
963
978
  --wds-tabs-selection-border: var(--wds-color-black-100-transparent-0);
979
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-150);
964
980
  --wds-tabs-padding-vertical-small: var(--wds-space-100);
965
981
  --wds-tabs-padding-vertical-medium: var(--wds-space-175);
982
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
966
983
  --wds-tabs-padding-horizontal-small: var(--wds-space-200);
967
984
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
968
985
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-semi-bold);
969
986
  --wds-tabs-label-font-weight: var(--wds-font-weight-medium);
970
987
  --wds-tabs-label-fill: var(--wds-color-black-300);
988
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
971
989
  --wds-tabs-item-gap-small: var(--wds-space-150);
972
990
  --wds-tabs-item-gap-medium: var(--wds-space-200);
973
- --wds-tabs-item-fill-hover: var(--wds-color-black-750);
991
+ --wds-tabs-item-fill-active: var(--wds-color-black-600);
974
992
  --wds-tabs-gap-horizontal: var(--wds-space-100);
975
993
  --wds-tabs-container-padding-horizontal: var(--wds-space-400);
976
994
  --wds-tabs-border-radius: var(--wds-border-radius-300);
@@ -1115,6 +1133,7 @@
1115
1133
  --wds-segmented-toggle-padding-horizontal-medium: var(--wds-space-400);
1116
1134
  --wds-segmented-toggle-padding-container: var(--wds-space-100);
1117
1135
  --wds-segmented-toggle-label-font-weight: var(--wds-font-weight-semi-bold);
1136
+ --wds-segmented-toggle-label-font-size-small: var(--wds-font-size-200);
1118
1137
  --wds-segmented-toggle-inner-shadow-fill-secondary: var(--wds-color-white);
1119
1138
  --wds-segmented-toggle-inner-shadow-fill-primary: var(--wds-color-white);
1120
1139
  --wds-segmented-toggle-icononly-padding-vertical-small: var(--wds-space-100);
@@ -1370,6 +1389,7 @@
1370
1389
  --wds-field-set-gap-medium: var(--wds-space-300);
1371
1390
  --wds-field-set-gap-large: var(--wds-space-400);
1372
1391
  --wds-feature-list-gap: var(--wds-space-600);
1392
+ --wds-empty-state-title-gap: var(--wds-space-200);
1373
1393
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1374
1394
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1375
1395
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1389,6 +1409,7 @@
1389
1409
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1390
1410
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1391
1411
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1412
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1392
1413
  --wds-counter-badge-size-small: var(--wds-space-475);
1393
1414
  --wds-counter-badge-size-medium: var(--wds-space-600);
1394
1415
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-150);
@@ -1644,9 +1665,8 @@
1644
1665
  --wds-vertical-tabs-icon-fill-disabled: var(--wds-color-text-disabled);
1645
1666
  --wds-vertical-tabs-icon-fill-active: var(--wds-color-text-standard-primary);
1646
1667
  --wds-vertical-tabs-icon-fill: var(--wds-color-text-standard-secondary);
1647
- --wds-tooltip-text-fill: var(--wds-color-text-standard-primary-light);
1668
+ --wds-tooltip-text-fill: var(--wds-color-text-standard-primary);
1648
1669
  --wds-tooltip-label-font-size-medium: var(--wds-font-size-body-tiny);
1649
- --wds-tooltip-background-fill: var(--wds-color-fill-surface-overlay-dark);
1650
1670
  --wds-toggle-switch-fill-urgent-hover: var(--wds-color-fill-dark-primary-hover);
1651
1671
  --wds-toggle-switch-fill-urgent-disabled: var(--wds-color-fill-urgent-primary-disabled);
1652
1672
  --wds-toggle-switch-fill-urgent-active-hover: var(--wds-color-fill-urgent-primary-hover);
@@ -1701,10 +1721,11 @@
1701
1721
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1702
1722
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1703
1723
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1724
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1704
1725
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1705
1726
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1706
1727
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1707
- --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1728
+ --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1708
1729
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1709
1730
  --wds-table-list-item-fill-active: var(--wds-color-fill-dark-tertiary-active);
1710
1731
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-standard-primary);
@@ -1747,7 +1768,6 @@
1747
1768
  --wds-segmented-toggle-value-fill-disabled: var(--wds-color-text-disabled);
1748
1769
  --wds-segmented-toggle-value-fill-default: var(--wds-color-text-standard-primary);
1749
1770
  --wds-segmented-toggle-value-fill: var(--wds-color-text-standard-primary);
1750
- --wds-segmented-toggle-label-font-size-small: var(--wds-font-size-body-small);
1751
1771
  --wds-segmented-toggle-label-font-size-medium: var(--wds-font-size-body-medium);
1752
1772
  --wds-segmented-toggle-label-font-line-height-medium: var(--wds-font-line-height-400);
1753
1773
  --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);