@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/CHANGELOG.md CHANGED
@@ -1,3 +1,23 @@
1
+ ## 1.209.0 - 2026-07-03
2
+
3
+ ### Features
4
+
5
+ - feat(CounterBadge): add tiny size [16468](https://github.com/wix-private/wix-design-systems/pull/16468)
6
+ - feat(GooglePreview): theme-aware tokens for Studio 2.0 (odeditor-dark) [16473](https://github.com/wix-private/wix-design-systems/pull/16473)
7
+ - feat(Tabs): add smallMedium size and refresh odeditor active/hover fills [16466](https://github.com/wix-private/wix-design-systems/pull/16466)
8
+
9
+ ## 1.208.0 - 2026-07-02
10
+
11
+ ### Bug Fixes
12
+
13
+ - fix(SegmentedToggle): made label the correct size as figma [16449](https://github.com/wix-private/wix-design-systems/pull/16449)
14
+
15
+ ### Features
16
+
17
+ - feat(EmptyState): title uses Heading H2 across all skins (BM reimagined) [16459](https://github.com/wix-private/wix-design-systems/pull/16459)
18
+ - feat(Tooltip): odeditor-dark border + raw-black background tokens [16460](https://github.com/wix-private/wix-design-systems/pull/16460)
19
+ - feat(tokens): add illustration color opacity tokens [16450](https://github.com/wix-private/wix-design-systems/pull/16450)
20
+
1
21
  ## 1.204.0 - 2026-06-18
2
22
 
3
23
  ### Bug Fixes
package/all.css CHANGED
@@ -336,7 +336,14 @@
336
336
  --wds-input-width-medium: 72px;
337
337
  --wds-input-width-large: 96px;
338
338
  --wds-input-width-fixed: 288px;
339
+ --wds-google-preview-title-fill: #260AA8;
340
+ --wds-google-preview-text-fill: #4D5156;
341
+ --wds-google-preview-site-name-fill: #202124;
342
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
343
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
344
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
339
345
  --wds-counter-badge-padding-horizontal-medium: 8px;
346
+ --wds-counter-badge-font-size-tiny: 10px;
340
347
  --wds-composer-sidebar-end-max-width: 240px;
341
348
  --wds-composer-sidebar-bottom-width: 90px;
342
349
  --wds-color-picker-width: 240px;
@@ -842,8 +849,10 @@
842
849
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
843
850
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-400);
844
851
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-regular);
852
+ --wds-tooltip-border-width: var(--wds-border-width-none);
845
853
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
846
854
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
855
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
847
856
  --wds-toggle-switch-padding: var(--wds-space-25);
848
857
  --wds-toggle-button-shadow-y-tertiary-inverted: var(--wds-shadow-y-0);
849
858
  --wds-toggle-button-shadow-y-tertiary: var(--wds-shadow-y-0);
@@ -926,12 +935,15 @@
926
935
  --wds-tag-border-radius-small: var(--wds-border-radius-full);
927
936
  --wds-tag-border-radius-medium: var(--wds-border-radius-full);
928
937
  --wds-tag-border-radius-large: var(--wds-border-radius-full);
938
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-200);
929
939
  --wds-tabs-padding-vertical-small: var(--wds-space-200);
930
940
  --wds-tabs-padding-vertical-medium: var(--wds-space-300);
941
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-200);
931
942
  --wds-tabs-padding-horizontal-small: var(--wds-space-200);
932
943
  --wds-tabs-padding-horizontal-medium: var(--wds-space-300);
933
944
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
934
945
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
946
+ --wds-tabs-item-gap-small-medium: var(--wds-space-100);
935
947
  --wds-tabs-item-gap-small: var(--wds-space-100);
936
948
  --wds-tabs-item-gap-medium: var(--wds-space-100);
937
949
  --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
@@ -1265,6 +1277,7 @@
1265
1277
  --wds-input-border-radius-default-large: var(--wds-border-radius-300);
1266
1278
  --wds-image-border-radius-none: var(--wds-border-radius-0);
1267
1279
  --wds-image-border-radius-default: var(--wds-border-radius-400);
1280
+ --wds-google-preview-surface-fill: var(--wds-color-white);
1268
1281
  --wds-gallery-item-padding-vertical-small: var(--wds-space-200);
1269
1282
  --wds-gallery-item-padding-vertical-medium: var(--wds-space-300);
1270
1283
  --wds-gallery-item-padding-right-small: var(--wds-space-300);
@@ -1286,6 +1299,7 @@
1286
1299
  --wds-field-set-gap-medium: var(--wds-space-200);
1287
1300
  --wds-field-set-gap-large: var(--wds-space-300);
1288
1301
  --wds-feature-list-gap: var(--wds-space-500);
1302
+ --wds-empty-state-title-gap: var(--wds-space-200);
1289
1303
  --wds-empty-state-section-content-paddings: var(--wds-space-250);
1290
1304
  --wds-empty-state-page-content-paddings: var(--wds-space-300);
1291
1305
  --wds-empty-state-border-radius: var(--wds-border-radius-400);
@@ -1306,6 +1320,7 @@
1306
1320
  --wds-custom-modal-content-padding-vertical: var(--wds-space-400);
1307
1321
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-400);
1308
1322
  --wds-custom-modal-border-radius: var(--wds-border-radius-400);
1323
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1309
1324
  --wds-counter-badge-size-small: var(--wds-space-300);
1310
1325
  --wds-counter-badge-size-medium: var(--wds-space-400);
1311
1326
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-100);
@@ -1608,6 +1623,7 @@
1608
1623
  --wds-tag-label-font-size-small: var(--wds-font-size-body-small);
1609
1624
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1610
1625
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1626
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1611
1627
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1612
1628
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-medium);
1613
1629
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
@@ -1899,6 +1915,7 @@
1899
1915
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-tiny);
1900
1916
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-small);
1901
1917
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1918
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1902
1919
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1903
1920
  --wds-dropdown-icon-fill: var(--wds-color-text-primary);
1904
1921
  --wds-drag-handle-fill: var(--wds-color-text-primary);
@@ -2099,6 +2116,7 @@
2099
2116
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-small);
2100
2117
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-small);
2101
2118
  --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%);
2119
+ --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-small);
2102
2120
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2103
2121
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-medium);
2104
2122
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
package/all.scss CHANGED
@@ -119,6 +119,11 @@
119
119
  --wds-input-width-medium: 72px;
120
120
  --wds-input-width-large: 96px;
121
121
  --wds-input-width-fixed: 288px;
122
+ --wds-google-preview-title-fill: #260AA8;
123
+ --wds-google-preview-text-fill: #4D5156;
124
+ --wds-google-preview-site-name-fill: #202124;
125
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
126
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
122
127
  --wds-font-weight-semi-bold: 600;
123
128
  --wds-font-weight-regular: 400;
124
129
  --wds-font-weight-medium: 500;
@@ -136,7 +141,9 @@
136
141
  --wds-font-letter-spacing-0: 0px;
137
142
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
138
143
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
144
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
139
145
  --wds-counter-badge-padding-horizontal-medium: 8px;
146
+ --wds-counter-badge-font-size-tiny: 10px;
140
147
  --wds-composer-sidebar-end-max-width: 240px;
141
148
  --wds-composer-sidebar-bottom-width: 90px;
142
149
  --wds-color-yellow-600: #fff6e5;
@@ -402,8 +409,10 @@
402
409
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
403
410
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-400);
404
411
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-regular);
412
+ --wds-tooltip-border-width: var(--wds-border-width-none);
405
413
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
406
414
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
415
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
407
416
  --wds-toggle-switch-padding: var(--wds-space-25);
408
417
  --wds-toggle-button-shadow-y-tertiary-inverted: var(--wds-shadow-y-0);
409
418
  --wds-toggle-button-shadow-y-tertiary: var(--wds-shadow-y-0);
@@ -486,12 +495,15 @@
486
495
  --wds-tag-border-radius-small: var(--wds-border-radius-full);
487
496
  --wds-tag-border-radius-medium: var(--wds-border-radius-full);
488
497
  --wds-tag-border-radius-large: var(--wds-border-radius-full);
498
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-200);
489
499
  --wds-tabs-padding-vertical-small: var(--wds-space-200);
490
500
  --wds-tabs-padding-vertical-medium: var(--wds-space-300);
501
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-200);
491
502
  --wds-tabs-padding-horizontal-small: var(--wds-space-200);
492
503
  --wds-tabs-padding-horizontal-medium: var(--wds-space-300);
493
504
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
494
505
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
506
+ --wds-tabs-item-gap-small-medium: var(--wds-space-100);
495
507
  --wds-tabs-item-gap-small: var(--wds-space-100);
496
508
  --wds-tabs-item-gap-medium: var(--wds-space-100);
497
509
  --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
@@ -926,6 +938,7 @@
926
938
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-0);
927
939
  --wds-image-border-radius-none: var(--wds-border-radius-0);
928
940
  --wds-image-border-radius-default: var(--wds-border-radius-400);
941
+ --wds-google-preview-surface-fill: var(--wds-color-white);
929
942
  --wds-gallery-item-padding-vertical-small: var(--wds-space-200);
930
943
  --wds-gallery-item-padding-vertical-medium: var(--wds-space-300);
931
944
  --wds-gallery-item-padding-right-small: var(--wds-space-300);
@@ -976,6 +989,7 @@
976
989
  --wds-field-set-gap-medium: var(--wds-space-200);
977
990
  --wds-field-set-gap-large: var(--wds-space-300);
978
991
  --wds-feature-list-gap: var(--wds-space-500);
992
+ --wds-empty-state-title-gap: var(--wds-space-200);
979
993
  --wds-empty-state-section-content-paddings: var(--wds-space-250);
980
994
  --wds-empty-state-page-content-paddings: var(--wds-space-300);
981
995
  --wds-empty-state-border-radius: var(--wds-border-radius-400);
@@ -996,6 +1010,7 @@
996
1010
  --wds-custom-modal-content-padding-vertical: var(--wds-space-400);
997
1011
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-400);
998
1012
  --wds-custom-modal-border-radius: var(--wds-border-radius-400);
1013
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
999
1014
  --wds-counter-badge-size-small: var(--wds-space-300);
1000
1015
  --wds-counter-badge-size-medium: var(--wds-space-400);
1001
1016
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-100);
@@ -1590,6 +1605,7 @@
1590
1605
  --wds-tag-label-font-size-small: var(--wds-font-size-body-small);
1591
1606
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1592
1607
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1608
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1593
1609
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1594
1610
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-medium);
1595
1611
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
@@ -1898,6 +1914,7 @@
1898
1914
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-tiny);
1899
1915
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-small);
1900
1916
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1917
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1901
1918
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1902
1919
  --wds-dropdown-icon-fill: var(--wds-color-text-primary);
1903
1920
  --wds-drag-handle-fill: var(--wds-color-text-primary);
@@ -2099,6 +2116,7 @@
2099
2116
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-small);
2100
2117
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-small);
2101
2118
  --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%);
2119
+ --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-small);
2102
2120
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2103
2121
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-medium);
2104
2122
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
package/all.st.css CHANGED
@@ -862,10 +862,13 @@
862
862
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
863
863
  @property st-global(--wds-counter-badge-border-radius-medium);
864
864
  @property st-global(--wds-counter-badge-border-radius-small);
865
+ @property st-global(--wds-counter-badge-font-size-tiny);
865
866
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
866
867
  @property st-global(--wds-counter-badge-padding-horizontal-small);
868
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
867
869
  @property st-global(--wds-counter-badge-size-medium);
868
870
  @property st-global(--wds-counter-badge-size-small);
871
+ @property st-global(--wds-counter-badge-size-tiny);
869
872
  @property st-global(--wds-custom-modal-border-radius);
870
873
  @property st-global(--wds-custom-modal-content-padding-horizontal);
871
874
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -905,6 +908,8 @@
905
908
  @property st-global(--wds-empty-state-border-radius);
906
909
  @property st-global(--wds-empty-state-page-content-paddings);
907
910
  @property st-global(--wds-empty-state-section-content-paddings);
911
+ @property st-global(--wds-empty-state-subtitle-fill);
912
+ @property st-global(--wds-empty-state-title-gap);
908
913
  @property st-global(--wds-feature-list-gap);
909
914
  @property st-global(--wds-field-set-gap-large);
910
915
  @property st-global(--wds-field-set-gap-medium);
@@ -996,6 +1001,12 @@
996
1001
  @property st-global(--wds-gallery-item-padding-right-small);
997
1002
  @property st-global(--wds-gallery-item-padding-vertical-medium);
998
1003
  @property st-global(--wds-gallery-item-padding-vertical-small);
1004
+ @property st-global(--wds-google-preview-favicon-background-fill);
1005
+ @property st-global(--wds-google-preview-favicon-border-fill);
1006
+ @property st-global(--wds-google-preview-site-name-fill);
1007
+ @property st-global(--wds-google-preview-surface-fill);
1008
+ @property st-global(--wds-google-preview-text-fill);
1009
+ @property st-global(--wds-google-preview-title-fill);
999
1010
  @property st-global(--wds-icon-button-color-border-dark-secondary);
1000
1011
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
1001
1012
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1844,18 +1855,23 @@
1844
1855
  @property st-global(--wds-tabs-item-fill-hover);
1845
1856
  @property st-global(--wds-tabs-item-gap-medium);
1846
1857
  @property st-global(--wds-tabs-item-gap-small);
1858
+ @property st-global(--wds-tabs-item-gap-small-medium);
1847
1859
  @property st-global(--wds-tabs-label-fill);
1848
1860
  @property st-global(--wds-tabs-label-fill-active);
1849
1861
  @property st-global(--wds-tabs-label-font-size-medium);
1850
1862
  @property st-global(--wds-tabs-label-font-size-small);
1863
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1851
1864
  @property st-global(--wds-tabs-label-font-weight);
1852
1865
  @property st-global(--wds-tabs-label-font-weight-active);
1853
1866
  @property st-global(--wds-tabs-label-line-height-medium);
1854
1867
  @property st-global(--wds-tabs-label-line-height-small);
1868
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1855
1869
  @property st-global(--wds-tabs-padding-horizontal-medium);
1856
1870
  @property st-global(--wds-tabs-padding-horizontal-small);
1871
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1857
1872
  @property st-global(--wds-tabs-padding-vertical-medium);
1858
1873
  @property st-global(--wds-tabs-padding-vertical-small);
1874
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1859
1875
  @property st-global(--wds-tabs-selection-border);
1860
1876
  @property st-global(--wds-tabs-selection-fill-primary);
1861
1877
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -2051,9 +2067,11 @@
2051
2067
  @property st-global(--wds-toggle-switch-width-medium);
2052
2068
  @property st-global(--wds-toggle-switch-width-small);
2053
2069
  @property st-global(--wds-tooltip-background-fill);
2070
+ @property st-global(--wds-tooltip-border-fill);
2054
2071
  @property st-global(--wds-tooltip-border-radius);
2055
2072
  @property st-global(--wds-tooltip-border-radius-medium);
2056
2073
  @property st-global(--wds-tooltip-border-radius-small);
2074
+ @property st-global(--wds-tooltip-border-width);
2057
2075
  @property st-global(--wds-tooltip-label-font-line-height-medium);
2058
2076
  @property st-global(--wds-tooltip-label-font-line-height-small);
2059
2077
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -3011,10 +3029,13 @@
3011
3029
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 6px;
3012
3030
  --wds-counter-badge-border-radius-medium: 1000px;
3013
3031
  --wds-counter-badge-border-radius-small: 1000px;
3032
+ --wds-counter-badge-font-size-tiny: 10px;
3014
3033
  --wds-counter-badge-padding-horizontal-medium: 8px;
3015
3034
  --wds-counter-badge-padding-horizontal-small: 6px;
3035
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
3016
3036
  --wds-counter-badge-size-medium: 24px;
3017
3037
  --wds-counter-badge-size-small: 18px;
3038
+ --wds-counter-badge-size-tiny: 21px;
3018
3039
  --wds-custom-modal-border-radius: 8px;
3019
3040
  --wds-custom-modal-content-padding-horizontal: 24px;
3020
3041
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -3054,6 +3075,8 @@
3054
3075
  --wds-empty-state-border-radius: 8px;
3055
3076
  --wds-empty-state-page-content-paddings: 18px;
3056
3077
  --wds-empty-state-section-content-paddings: 15px;
3078
+ --wds-empty-state-subtitle-fill: #868aa5;
3079
+ --wds-empty-state-title-gap: 12px;
3057
3080
  --wds-feature-list-gap: 30px;
3058
3081
  --wds-field-set-gap-large: 18px;
3059
3082
  --wds-field-set-gap-medium: 12px;
@@ -3145,6 +3168,12 @@
3145
3168
  --wds-gallery-item-padding-right-small: 18px;
3146
3169
  --wds-gallery-item-padding-vertical-medium: 18px;
3147
3170
  --wds-gallery-item-padding-vertical-small: 12px;
3171
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
3172
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
3173
+ --wds-google-preview-site-name-fill: #202124;
3174
+ --wds-google-preview-surface-fill: #ffffff;
3175
+ --wds-google-preview-text-fill: #4D5156;
3176
+ --wds-google-preview-title-fill: #260AA8;
3148
3177
  --wds-icon-button-color-border-dark-secondary: #868aa5;
3149
3178
  --wds-icon-button-color-border-dark-secondary-active: #44485f;
3150
3179
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(0, 6, 36, .1);
@@ -3993,18 +4022,23 @@
3993
4022
  --wds-tabs-item-fill-hover: rgba(0, 6, 36, 0);
3994
4023
  --wds-tabs-item-gap-medium: 6px;
3995
4024
  --wds-tabs-item-gap-small: 6px;
4025
+ --wds-tabs-item-gap-small-medium: 6px;
3996
4026
  --wds-tabs-label-fill: #000624;
3997
4027
  --wds-tabs-label-fill-active: #116dff;
3998
4028
  --wds-tabs-label-font-size-medium: 16px;
3999
4029
  --wds-tabs-label-font-size-small: 14px;
4030
+ --wds-tabs-label-font-size-small-medium: 14px;
4000
4031
  --wds-tabs-label-font-weight: 400;
4001
4032
  --wds-tabs-label-font-weight-active: 400;
4002
4033
  --wds-tabs-label-line-height-medium: 24px;
4003
4034
  --wds-tabs-label-line-height-small: 18px;
4035
+ --wds-tabs-label-line-height-small-medium: 18px;
4004
4036
  --wds-tabs-padding-horizontal-medium: 18px;
4005
4037
  --wds-tabs-padding-horizontal-small: 12px;
4038
+ --wds-tabs-padding-horizontal-small-medium: 12px;
4006
4039
  --wds-tabs-padding-vertical-medium: 18px;
4007
4040
  --wds-tabs-padding-vertical-small: 12px;
4041
+ --wds-tabs-padding-vertical-small-medium: 12px;
4008
4042
  --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
4009
4043
  --wds-tabs-selection-fill-primary: #116dff;
4010
4044
  --wds-tabs-selection-fill-secondary: #116dff;
@@ -4200,9 +4234,11 @@
4200
4234
  --wds-toggle-switch-width-medium: 34px;
4201
4235
  --wds-toggle-switch-width-small: 28px;
4202
4236
  --wds-tooltip-background-fill: #000624;
4237
+ --wds-tooltip-border-fill: rgba(0, 6, 36, 0);
4203
4238
  --wds-tooltip-border-radius: 8px;
4204
4239
  --wds-tooltip-border-radius-medium: 8px;
4205
4240
  --wds-tooltip-border-radius-small: 8px;
4241
+ --wds-tooltip-border-width: 0px;
4206
4242
  --wds-tooltip-label-font-line-height-medium: 18px;
4207
4243
  --wds-tooltip-label-font-line-height-small: 18px;
4208
4244
  --wds-tooltip-label-font-size-medium: 14px;
package/component.st.css CHANGED
@@ -351,10 +351,13 @@
351
351
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
352
352
  @property st-global(--wds-counter-badge-border-radius-medium);
353
353
  @property st-global(--wds-counter-badge-border-radius-small);
354
+ @property st-global(--wds-counter-badge-font-size-tiny);
354
355
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
355
356
  @property st-global(--wds-counter-badge-padding-horizontal-small);
357
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
356
358
  @property st-global(--wds-counter-badge-size-medium);
357
359
  @property st-global(--wds-counter-badge-size-small);
360
+ @property st-global(--wds-counter-badge-size-tiny);
358
361
  @property st-global(--wds-custom-modal-border-radius);
359
362
  @property st-global(--wds-custom-modal-content-padding-horizontal);
360
363
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -394,6 +397,8 @@
394
397
  @property st-global(--wds-empty-state-border-radius);
395
398
  @property st-global(--wds-empty-state-page-content-paddings);
396
399
  @property st-global(--wds-empty-state-section-content-paddings);
400
+ @property st-global(--wds-empty-state-subtitle-fill);
401
+ @property st-global(--wds-empty-state-title-gap);
397
402
  @property st-global(--wds-feature-list-gap);
398
403
  @property st-global(--wds-field-set-gap-large);
399
404
  @property st-global(--wds-field-set-gap-medium);
@@ -429,6 +434,12 @@
429
434
  @property st-global(--wds-gallery-item-padding-right-small);
430
435
  @property st-global(--wds-gallery-item-padding-vertical-medium);
431
436
  @property st-global(--wds-gallery-item-padding-vertical-small);
437
+ @property st-global(--wds-google-preview-favicon-background-fill);
438
+ @property st-global(--wds-google-preview-favicon-border-fill);
439
+ @property st-global(--wds-google-preview-site-name-fill);
440
+ @property st-global(--wds-google-preview-surface-fill);
441
+ @property st-global(--wds-google-preview-text-fill);
442
+ @property st-global(--wds-google-preview-title-fill);
432
443
  @property st-global(--wds-icon-button-color-border-dark-secondary);
433
444
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
434
445
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1111,18 +1122,23 @@
1111
1122
  @property st-global(--wds-tabs-item-fill-hover);
1112
1123
  @property st-global(--wds-tabs-item-gap-medium);
1113
1124
  @property st-global(--wds-tabs-item-gap-small);
1125
+ @property st-global(--wds-tabs-item-gap-small-medium);
1114
1126
  @property st-global(--wds-tabs-label-fill);
1115
1127
  @property st-global(--wds-tabs-label-fill-active);
1116
1128
  @property st-global(--wds-tabs-label-font-size-medium);
1117
1129
  @property st-global(--wds-tabs-label-font-size-small);
1130
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1118
1131
  @property st-global(--wds-tabs-label-font-weight);
1119
1132
  @property st-global(--wds-tabs-label-font-weight-active);
1120
1133
  @property st-global(--wds-tabs-label-line-height-medium);
1121
1134
  @property st-global(--wds-tabs-label-line-height-small);
1135
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1122
1136
  @property st-global(--wds-tabs-padding-horizontal-medium);
1123
1137
  @property st-global(--wds-tabs-padding-horizontal-small);
1138
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1124
1139
  @property st-global(--wds-tabs-padding-vertical-medium);
1125
1140
  @property st-global(--wds-tabs-padding-vertical-small);
1141
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1126
1142
  @property st-global(--wds-tabs-selection-border);
1127
1143
  @property st-global(--wds-tabs-selection-fill-primary);
1128
1144
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -1318,9 +1334,11 @@
1318
1334
  @property st-global(--wds-toggle-switch-width-medium);
1319
1335
  @property st-global(--wds-toggle-switch-width-small);
1320
1336
  @property st-global(--wds-tooltip-background-fill);
1337
+ @property st-global(--wds-tooltip-border-fill);
1321
1338
  @property st-global(--wds-tooltip-border-radius);
1322
1339
  @property st-global(--wds-tooltip-border-radius-medium);
1323
1340
  @property st-global(--wds-tooltip-border-radius-small);
1341
+ @property st-global(--wds-tooltip-border-width);
1324
1342
  @property st-global(--wds-tooltip-label-font-line-height-medium);
1325
1343
  @property st-global(--wds-tooltip-label-font-line-height-small);
1326
1344
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -1765,10 +1783,13 @@
1765
1783
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 6px;
1766
1784
  --wds-counter-badge-border-radius-medium: 1000px;
1767
1785
  --wds-counter-badge-border-radius-small: 1000px;
1786
+ --wds-counter-badge-font-size-tiny: 10px;
1768
1787
  --wds-counter-badge-padding-horizontal-medium: 8px;
1769
1788
  --wds-counter-badge-padding-horizontal-small: 6px;
1789
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
1770
1790
  --wds-counter-badge-size-medium: 24px;
1771
1791
  --wds-counter-badge-size-small: 18px;
1792
+ --wds-counter-badge-size-tiny: 21px;
1772
1793
  --wds-custom-modal-border-radius: 8px;
1773
1794
  --wds-custom-modal-content-padding-horizontal: 24px;
1774
1795
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -1808,6 +1829,8 @@
1808
1829
  --wds-empty-state-border-radius: 8px;
1809
1830
  --wds-empty-state-page-content-paddings: 18px;
1810
1831
  --wds-empty-state-section-content-paddings: 15px;
1832
+ --wds-empty-state-subtitle-fill: #868aa5;
1833
+ --wds-empty-state-title-gap: 12px;
1811
1834
  --wds-feature-list-gap: 30px;
1812
1835
  --wds-field-set-gap-large: 18px;
1813
1836
  --wds-field-set-gap-medium: 12px;
@@ -1843,6 +1866,12 @@
1843
1866
  --wds-gallery-item-padding-right-small: 18px;
1844
1867
  --wds-gallery-item-padding-vertical-medium: 18px;
1845
1868
  --wds-gallery-item-padding-vertical-small: 12px;
1869
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
1870
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
1871
+ --wds-google-preview-site-name-fill: #202124;
1872
+ --wds-google-preview-surface-fill: #ffffff;
1873
+ --wds-google-preview-text-fill: #4D5156;
1874
+ --wds-google-preview-title-fill: #260AA8;
1846
1875
  --wds-icon-button-color-border-dark-secondary: #868aa5;
1847
1876
  --wds-icon-button-color-border-dark-secondary-active: #44485f;
1848
1877
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(0, 6, 36, .1);
@@ -2525,18 +2554,23 @@
2525
2554
  --wds-tabs-item-fill-hover: rgba(0, 6, 36, 0);
2526
2555
  --wds-tabs-item-gap-medium: 6px;
2527
2556
  --wds-tabs-item-gap-small: 6px;
2557
+ --wds-tabs-item-gap-small-medium: 6px;
2528
2558
  --wds-tabs-label-fill: #000624;
2529
2559
  --wds-tabs-label-fill-active: #116dff;
2530
2560
  --wds-tabs-label-font-size-medium: 16px;
2531
2561
  --wds-tabs-label-font-size-small: 14px;
2562
+ --wds-tabs-label-font-size-small-medium: 14px;
2532
2563
  --wds-tabs-label-font-weight: 400;
2533
2564
  --wds-tabs-label-font-weight-active: 400;
2534
2565
  --wds-tabs-label-line-height-medium: 24px;
2535
2566
  --wds-tabs-label-line-height-small: 18px;
2567
+ --wds-tabs-label-line-height-small-medium: 18px;
2536
2568
  --wds-tabs-padding-horizontal-medium: 18px;
2537
2569
  --wds-tabs-padding-horizontal-small: 12px;
2570
+ --wds-tabs-padding-horizontal-small-medium: 12px;
2538
2571
  --wds-tabs-padding-vertical-medium: 18px;
2539
2572
  --wds-tabs-padding-vertical-small: 12px;
2573
+ --wds-tabs-padding-vertical-small-medium: 12px;
2540
2574
  --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
2541
2575
  --wds-tabs-selection-fill-primary: #116dff;
2542
2576
  --wds-tabs-selection-fill-secondary: #116dff;
@@ -2732,9 +2766,11 @@
2732
2766
  --wds-toggle-switch-width-medium: 34px;
2733
2767
  --wds-toggle-switch-width-small: 28px;
2734
2768
  --wds-tooltip-background-fill: #000624;
2769
+ --wds-tooltip-border-fill: rgba(0, 6, 36, 0);
2735
2770
  --wds-tooltip-border-radius: 8px;
2736
2771
  --wds-tooltip-border-radius-medium: 8px;
2737
2772
  --wds-tooltip-border-radius-small: 8px;
2773
+ --wds-tooltip-border-width: 0px;
2738
2774
  --wds-tooltip-label-font-line-height-medium: 18px;
2739
2775
  --wds-tooltip-label-font-line-height-small: 18px;
2740
2776
  --wds-tooltip-label-font-size-medium: 14px;
package/odeditor/all.css CHANGED
@@ -1,4 +1,8 @@
1
1
  :root, .wds-tokens {
2
+ --wds-illustration-color-opacity-100: #F8F6F600;
3
+ --wds-illustration-color-opacity-75: #F8F6F600;
4
+ --wds-illustration-color-opacity-50: #F8F6F600;
5
+ --wds-illustration-color-opacity-25: #F8F6F600;
2
6
  --wds-illustration-color-background: #F8F6F6;
3
7
  --wds-illustration-color-7: #002294;
4
8
  --wds-illustration-color-6: #002294;
@@ -376,7 +380,14 @@
376
380
  --wds-input-shadow-focus-warning: transparent;
377
381
  --wds-input-shadow-focus-standard: transparent;
378
382
  --wds-input-shadow-focus-destructive: transparent;
383
+ --wds-google-preview-title-fill: #260AA8;
384
+ --wds-google-preview-text-fill: #4D5156;
385
+ --wds-google-preview-site-name-fill: #202124;
386
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
387
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
379
388
  --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);
389
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
390
+ --wds-counter-badge-font-size-tiny: 10px;
380
391
  --wds-composer-sidebar-end-max-width: 240px;
381
392
  --wds-composer-sidebar-bottom-width: 88px;
382
393
  --wds-color-picker-width: 236px;
@@ -845,7 +856,9 @@
845
856
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
846
857
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-200);
847
858
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-medium);
859
+ --wds-tooltip-border-width: var(--wds-border-width-none);
848
860
  --wds-tooltip-border-radius: var(--wds-border-radius-300);
861
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
849
862
  --wds-toggle-switch-padding: var(--wds-space-25);
850
863
  --wds-toggle-switch-fill-standard: var(--wds-color-black-400);
851
864
  --wds-toggle-switch-border-urgent-disabled: var(--wds-color-black-100-transparent-0);
@@ -957,16 +970,19 @@
957
970
  --wds-tabs-selection-fill-secondary: var(--wds-color-black-100-transparent-0);
958
971
  --wds-tabs-selection-fill-primary: var(--wds-color-black-100-transparent-0);
959
972
  --wds-tabs-selection-border: var(--wds-color-black-100-transparent-0);
973
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-150);
960
974
  --wds-tabs-padding-vertical-small: var(--wds-space-100);
961
975
  --wds-tabs-padding-vertical-medium: var(--wds-space-175);
976
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
962
977
  --wds-tabs-padding-horizontal-small: var(--wds-space-200);
963
978
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
964
- --wds-tabs-label-font-weight-active: var(--wds-font-weight-semi-bold);
979
+ --wds-tabs-label-font-weight-active: var(--wds-font-weight-medium);
965
980
  --wds-tabs-label-font-weight: var(--wds-font-weight-medium);
966
981
  --wds-tabs-label-fill: var(--wds-color-black-300);
982
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
967
983
  --wds-tabs-item-gap-small: var(--wds-space-150);
968
984
  --wds-tabs-item-gap-medium: var(--wds-space-200);
969
- --wds-tabs-item-fill-hover: var(--wds-color-black-750);
985
+ --wds-tabs-item-fill-active: var(--wds-color-black-600);
970
986
  --wds-tabs-gap-horizontal: var(--wds-space-100);
971
987
  --wds-tabs-container-padding-horizontal: var(--wds-space-400);
972
988
  --wds-tabs-border-radius: var(--wds-border-radius-300);
@@ -1336,6 +1352,7 @@
1336
1352
  --wds-icon-button-color-border-premium-secondary-disabled: var(--wds-color-black-700);
1337
1353
  --wds-icon-button-color-border-light-secondary-disabled: var(--wds-color-black-700);
1338
1354
  --wds-icon-button-color-border-dark-secondary-disabled: var(--wds-color-black-700);
1355
+ --wds-google-preview-surface-fill: var(--wds-color-white);
1339
1356
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1340
1357
  --wds-form-field-label-gap-small: var(--wds-space-200);
1341
1358
  --wds-form-field-label-font-weight: var(--wds-font-weight-medium);
@@ -1350,6 +1367,7 @@
1350
1367
  --wds-field-set-gap-medium: var(--wds-space-300);
1351
1368
  --wds-field-set-gap-large: var(--wds-space-400);
1352
1369
  --wds-feature-list-gap: var(--wds-space-600);
1370
+ --wds-empty-state-title-gap: var(--wds-space-200);
1353
1371
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1354
1372
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1355
1373
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1367,6 +1385,7 @@
1367
1385
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1368
1386
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1369
1387
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1388
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1370
1389
  --wds-counter-badge-size-small: var(--wds-space-475);
1371
1390
  --wds-counter-badge-size-medium: var(--wds-space-600);
1372
1391
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-150);
@@ -1677,10 +1696,11 @@
1677
1696
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1678
1697
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1679
1698
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1699
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1680
1700
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1681
- --wds-tabs-label-font-size-medium: var(--wds-font-size-body-medium);
1701
+ --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1682
1702
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1683
- --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1703
+ --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1684
1704
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1685
1705
  --wds-table-list-item-fill-active: var(--wds-color-fill-dark-tertiary-active);
1686
1706
  --wds-table-list-item-fill: var(--wds-color-fill-dark-tertiary);
@@ -1909,6 +1929,7 @@
1909
1929
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1910
1930
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1911
1931
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1932
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1912
1933
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1913
1934
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1914
1935
  --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);