@wix/design-system-tokens 1.208.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 (22) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/all.css +14 -0
  3. package/all.scss +14 -0
  4. package/all.st.css +28 -0
  5. package/component.st.css +28 -0
  6. package/odeditor/all.css +19 -5
  7. package/odeditor/all.scss +19 -5
  8. package/odeditor/all.st.css +33 -5
  9. package/odeditor/component.st.css +33 -5
  10. package/odeditor-dark/all.css +16 -2
  11. package/odeditor-dark/all.scss +16 -2
  12. package/odeditor-dark/all.st.css +30 -2
  13. package/odeditor-dark/component.st.css +30 -2
  14. package/package.json +2 -2
  15. package/studio/all.css +14 -0
  16. package/studio/all.scss +14 -0
  17. package/studio/all.st.css +28 -0
  18. package/studio/component.st.css +28 -0
  19. package/wixel/all.css +14 -0
  20. package/wixel/all.scss +14 -0
  21. package/wixel/all.st.css +28 -0
  22. package/wixel/component.st.css +28 -0
package/studio/all.st.css CHANGED
@@ -854,10 +854,13 @@
854
854
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
855
855
  @property st-global(--wds-counter-badge-border-radius-medium);
856
856
  @property st-global(--wds-counter-badge-border-radius-small);
857
+ @property st-global(--wds-counter-badge-font-size-tiny);
857
858
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
858
859
  @property st-global(--wds-counter-badge-padding-horizontal-small);
860
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
859
861
  @property st-global(--wds-counter-badge-size-medium);
860
862
  @property st-global(--wds-counter-badge-size-small);
863
+ @property st-global(--wds-counter-badge-size-tiny);
861
864
  @property st-global(--wds-custom-modal-border-radius);
862
865
  @property st-global(--wds-custom-modal-content-padding-horizontal);
863
866
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -990,6 +993,12 @@
990
993
  @property st-global(--wds-gallery-item-padding-right-small);
991
994
  @property st-global(--wds-gallery-item-padding-vertical-medium);
992
995
  @property st-global(--wds-gallery-item-padding-vertical-small);
996
+ @property st-global(--wds-google-preview-favicon-background-fill);
997
+ @property st-global(--wds-google-preview-favicon-border-fill);
998
+ @property st-global(--wds-google-preview-site-name-fill);
999
+ @property st-global(--wds-google-preview-surface-fill);
1000
+ @property st-global(--wds-google-preview-text-fill);
1001
+ @property st-global(--wds-google-preview-title-fill);
993
1002
  @property st-global(--wds-icon-button-color-border-dark-secondary);
994
1003
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
995
1004
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1844,16 +1853,21 @@
1844
1853
  @property st-global(--wds-tabs-item-fill-hover);
1845
1854
  @property st-global(--wds-tabs-item-gap-medium);
1846
1855
  @property st-global(--wds-tabs-item-gap-small);
1856
+ @property st-global(--wds-tabs-item-gap-small-medium);
1847
1857
  @property st-global(--wds-tabs-label-fill);
1848
1858
  @property st-global(--wds-tabs-label-fill-active);
1849
1859
  @property st-global(--wds-tabs-label-font-size-small);
1860
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1850
1861
  @property st-global(--wds-tabs-label-font-weight);
1851
1862
  @property st-global(--wds-tabs-label-font-weight-active);
1852
1863
  @property st-global(--wds-tabs-label-line-height-small);
1864
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1853
1865
  @property st-global(--wds-tabs-padding-horizontal-medium);
1854
1866
  @property st-global(--wds-tabs-padding-horizontal-small);
1867
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1855
1868
  @property st-global(--wds-tabs-padding-vertical-medium);
1856
1869
  @property st-global(--wds-tabs-padding-vertical-small);
1870
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1857
1871
  @property st-global(--wds-tabs-selection-border);
1858
1872
  @property st-global(--wds-tabs-selection-fill-primary);
1859
1873
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -3004,10 +3018,13 @@
3004
3018
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
3005
3019
  --wds-counter-badge-border-radius-medium: 1000px;
3006
3020
  --wds-counter-badge-border-radius-small: 1000px;
3021
+ --wds-counter-badge-font-size-tiny: 10px;
3007
3022
  --wds-counter-badge-padding-horizontal-medium: 8px;
3008
3023
  --wds-counter-badge-padding-horizontal-small: 6px;
3024
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
3009
3025
  --wds-counter-badge-size-medium: 24px;
3010
3026
  --wds-counter-badge-size-small: 18px;
3027
+ --wds-counter-badge-size-tiny: 14px;
3011
3028
  --wds-custom-modal-border-radius: 4px;
3012
3029
  --wds-custom-modal-content-padding-horizontal: 24px;
3013
3030
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -3140,6 +3157,12 @@
3140
3157
  --wds-gallery-item-padding-right-small: 18px;
3141
3158
  --wds-gallery-item-padding-vertical-medium: 18px;
3142
3159
  --wds-gallery-item-padding-vertical-small: 12px;
3160
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
3161
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
3162
+ --wds-google-preview-site-name-fill: #202124;
3163
+ --wds-google-preview-surface-fill: #ffffff;
3164
+ --wds-google-preview-text-fill: #4D5156;
3165
+ --wds-google-preview-title-fill: #260AA8;
3143
3166
  --wds-icon-button-color-border-dark-secondary: #868aa5;
3144
3167
  --wds-icon-button-color-border-dark-secondary-active: #2b2e36;
3145
3168
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(19, 23, 32, .1);
@@ -3994,16 +4017,21 @@
3994
4017
  --wds-tabs-item-fill-hover: rgba(19, 23, 32, 0);
3995
4018
  --wds-tabs-item-gap-medium: 8px;
3996
4019
  --wds-tabs-item-gap-small: 6px;
4020
+ --wds-tabs-item-gap-small-medium: 6px;
3997
4021
  --wds-tabs-label-fill: #131720;
3998
4022
  --wds-tabs-label-fill-active: #116dff;
3999
4023
  --wds-tabs-label-font-size-small: 14px;
4024
+ --wds-tabs-label-font-size-small-medium: 14px;
4000
4025
  --wds-tabs-label-font-weight: 400;
4001
4026
  --wds-tabs-label-font-weight-active: 400;
4002
4027
  --wds-tabs-label-line-height-small: 16px;
4028
+ --wds-tabs-label-line-height-small-medium: 16px;
4003
4029
  --wds-tabs-padding-horizontal-medium: 16px;
4004
4030
  --wds-tabs-padding-horizontal-small: 12px;
4031
+ --wds-tabs-padding-horizontal-small-medium: 12px;
4005
4032
  --wds-tabs-padding-vertical-medium: 16px;
4006
4033
  --wds-tabs-padding-vertical-small: 12px;
4034
+ --wds-tabs-padding-vertical-small-medium: 12px;
4007
4035
  --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
4008
4036
  --wds-tabs-selection-fill-primary: #116dff;
4009
4037
  --wds-tabs-selection-fill-secondary: #116dff;
package/studio/component.st.css CHANGED
@@ -347,10 +347,13 @@
347
347
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
348
348
  @property st-global(--wds-counter-badge-border-radius-medium);
349
349
  @property st-global(--wds-counter-badge-border-radius-small);
350
+ @property st-global(--wds-counter-badge-font-size-tiny);
350
351
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
351
352
  @property st-global(--wds-counter-badge-padding-horizontal-small);
353
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
352
354
  @property st-global(--wds-counter-badge-size-medium);
353
355
  @property st-global(--wds-counter-badge-size-small);
356
+ @property st-global(--wds-counter-badge-size-tiny);
354
357
  @property st-global(--wds-custom-modal-border-radius);
355
358
  @property st-global(--wds-custom-modal-content-padding-horizontal);
356
359
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -427,6 +430,12 @@
427
430
  @property st-global(--wds-gallery-item-padding-right-small);
428
431
  @property st-global(--wds-gallery-item-padding-vertical-medium);
429
432
  @property st-global(--wds-gallery-item-padding-vertical-small);
433
+ @property st-global(--wds-google-preview-favicon-background-fill);
434
+ @property st-global(--wds-google-preview-favicon-border-fill);
435
+ @property st-global(--wds-google-preview-site-name-fill);
436
+ @property st-global(--wds-google-preview-surface-fill);
437
+ @property st-global(--wds-google-preview-text-fill);
438
+ @property st-global(--wds-google-preview-title-fill);
430
439
  @property st-global(--wds-icon-button-color-border-dark-secondary);
431
440
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
432
441
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1103,16 +1112,21 @@
1103
1112
  @property st-global(--wds-tabs-item-fill-hover);
1104
1113
  @property st-global(--wds-tabs-item-gap-medium);
1105
1114
  @property st-global(--wds-tabs-item-gap-small);
1115
+ @property st-global(--wds-tabs-item-gap-small-medium);
1106
1116
  @property st-global(--wds-tabs-label-fill);
1107
1117
  @property st-global(--wds-tabs-label-fill-active);
1108
1118
  @property st-global(--wds-tabs-label-font-size-small);
1119
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1109
1120
  @property st-global(--wds-tabs-label-font-weight);
1110
1121
  @property st-global(--wds-tabs-label-font-weight-active);
1111
1122
  @property st-global(--wds-tabs-label-line-height-small);
1123
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1112
1124
  @property st-global(--wds-tabs-padding-horizontal-medium);
1113
1125
  @property st-global(--wds-tabs-padding-horizontal-small);
1126
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1114
1127
  @property st-global(--wds-tabs-padding-vertical-medium);
1115
1128
  @property st-global(--wds-tabs-padding-vertical-small);
1129
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1116
1130
  @property st-global(--wds-tabs-selection-border);
1117
1131
  @property st-global(--wds-tabs-selection-fill-primary);
1118
1132
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -1754,10 +1768,13 @@
1754
1768
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
1755
1769
  --wds-counter-badge-border-radius-medium: 1000px;
1756
1770
  --wds-counter-badge-border-radius-small: 1000px;
1771
+ --wds-counter-badge-font-size-tiny: 10px;
1757
1772
  --wds-counter-badge-padding-horizontal-medium: 8px;
1758
1773
  --wds-counter-badge-padding-horizontal-small: 6px;
1774
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
1759
1775
  --wds-counter-badge-size-medium: 24px;
1760
1776
  --wds-counter-badge-size-small: 18px;
1777
+ --wds-counter-badge-size-tiny: 14px;
1761
1778
  --wds-custom-modal-border-radius: 4px;
1762
1779
  --wds-custom-modal-content-padding-horizontal: 24px;
1763
1780
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -1834,6 +1851,12 @@
1834
1851
  --wds-gallery-item-padding-right-small: 18px;
1835
1852
  --wds-gallery-item-padding-vertical-medium: 18px;
1836
1853
  --wds-gallery-item-padding-vertical-small: 12px;
1854
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
1855
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
1856
+ --wds-google-preview-site-name-fill: #202124;
1857
+ --wds-google-preview-surface-fill: #ffffff;
1858
+ --wds-google-preview-text-fill: #4D5156;
1859
+ --wds-google-preview-title-fill: #260AA8;
1837
1860
  --wds-icon-button-color-border-dark-secondary: #868aa5;
1838
1861
  --wds-icon-button-color-border-dark-secondary-active: #2b2e36;
1839
1862
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(19, 23, 32, .1);
@@ -2510,16 +2533,21 @@
2510
2533
  --wds-tabs-item-fill-hover: rgba(19, 23, 32, 0);
2511
2534
  --wds-tabs-item-gap-medium: 8px;
2512
2535
  --wds-tabs-item-gap-small: 6px;
2536
+ --wds-tabs-item-gap-small-medium: 6px;
2513
2537
  --wds-tabs-label-fill: #131720;
2514
2538
  --wds-tabs-label-fill-active: #116dff;
2515
2539
  --wds-tabs-label-font-size-small: 14px;
2540
+ --wds-tabs-label-font-size-small-medium: 14px;
2516
2541
  --wds-tabs-label-font-weight: 400;
2517
2542
  --wds-tabs-label-font-weight-active: 400;
2518
2543
  --wds-tabs-label-line-height-small: 16px;
2544
+ --wds-tabs-label-line-height-small-medium: 16px;
2519
2545
  --wds-tabs-padding-horizontal-medium: 16px;
2520
2546
  --wds-tabs-padding-horizontal-small: 12px;
2547
+ --wds-tabs-padding-horizontal-small-medium: 12px;
2521
2548
  --wds-tabs-padding-vertical-medium: 16px;
2522
2549
  --wds-tabs-padding-vertical-small: 12px;
2550
+ --wds-tabs-padding-vertical-small-medium: 12px;
2523
2551
  --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
2524
2552
  --wds-tabs-selection-fill-primary: #116dff;
2525
2553
  --wds-tabs-selection-fill-secondary: #116dff;
package/wixel/all.css CHANGED
@@ -363,7 +363,14 @@
363
363
  --wds-input-shadow-focus-warning: transparent;
364
364
  --wds-input-shadow-focus-standard: transparent;
365
365
  --wds-input-shadow-focus-destructive: transparent;
366
+ --wds-google-preview-title-fill: #260AA8;
367
+ --wds-google-preview-text-fill: #4D5156;
368
+ --wds-google-preview-site-name-fill: #202124;
369
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
370
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
366
371
  --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
372
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
373
+ --wds-counter-badge-font-size-tiny: 10px;
367
374
  --wds-composer-sidebar-end-max-width: 240px;
368
375
  --wds-composer-sidebar-bottom-width: 88px;
369
376
  --wds-card-gallery-item-overlay-fill: rgba(76, 73, 251, 0.1500);
@@ -912,12 +919,15 @@
912
919
  --wds-tag-border-radius-medium: var(--wds-border-radius-200);
913
920
  --wds-tag-border-radius-large: var(--wds-border-radius-200);
914
921
  --wds-tabs-selection-fill-secondary: var(--wds-color-white-transparent-0);
922
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-300);
915
923
  --wds-tabs-padding-vertical-small: var(--wds-space-300);
916
924
  --wds-tabs-padding-vertical-medium: var(--wds-space-400);
925
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
917
926
  --wds-tabs-padding-horizontal-small: var(--wds-space-300);
918
927
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
919
928
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
920
929
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
930
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
921
931
  --wds-tabs-item-gap-small: var(--wds-space-150);
922
932
  --wds-tabs-item-gap-medium: var(--wds-space-200);
923
933
  --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
@@ -1262,6 +1272,7 @@
1262
1272
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1263
1273
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1264
1274
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1275
+ --wds-google-preview-surface-fill: var(--wds-color-white);
1265
1276
  --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1266
1277
  --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1267
1278
  --wds-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1309,6 +1320,7 @@
1309
1320
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1310
1321
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1311
1322
  --wds-custom-modal-border-radius: var(--wds-border-radius-200);
1323
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1312
1324
  --wds-counter-badge-size-small: var(--wds-space-475);
1313
1325
  --wds-counter-badge-size-medium: var(--wds-space-600);
1314
1326
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-100);
@@ -1607,6 +1619,7 @@
1607
1619
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1608
1620
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1609
1621
  --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%);
1622
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-tiny);
1610
1623
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1611
1624
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1612
1625
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
@@ -2035,6 +2048,7 @@
2035
2048
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2036
2049
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-extra-tiny);
2037
2050
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2051
+ --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-tiny);
2038
2052
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2039
2053
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-tiny);
2040
2054
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
package/wixel/all.scss CHANGED
@@ -119,6 +119,11 @@
119
119
  --wds-input-shadow-focus-warning: transparent;
120
120
  --wds-input-shadow-focus-standard: transparent;
121
121
  --wds-input-shadow-focus-destructive: transparent;
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;
@@ -138,6 +143,8 @@
138
143
  --wds-font-family-display: "Madefor Display", "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
139
144
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
140
145
  --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
146
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
147
+ --wds-counter-badge-font-size-tiny: 10px;
141
148
  --wds-composer-sidebar-end-max-width: 240px;
142
149
  --wds-composer-sidebar-bottom-width: 88px;
143
150
  --wds-color-yellow-600: #fef6ed;
@@ -518,12 +525,15 @@
518
525
  --wds-tag-border-radius-medium: var(--wds-border-radius-200);
519
526
  --wds-tag-border-radius-large: var(--wds-border-radius-200);
520
527
  --wds-tabs-selection-fill-secondary: var(--wds-color-white-transparent-0);
528
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-300);
521
529
  --wds-tabs-padding-vertical-small: var(--wds-space-300);
522
530
  --wds-tabs-padding-vertical-medium: var(--wds-space-400);
531
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
523
532
  --wds-tabs-padding-horizontal-small: var(--wds-space-300);
524
533
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
525
534
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
526
535
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
536
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
527
537
  --wds-tabs-item-gap-small: var(--wds-space-150);
528
538
  --wds-tabs-item-gap-medium: var(--wds-space-200);
529
539
  --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
@@ -956,6 +966,7 @@
956
966
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
957
967
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
958
968
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
969
+ --wds-google-preview-surface-fill: var(--wds-color-white);
959
970
  --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
960
971
  --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
961
972
  --wds-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1032,6 +1043,7 @@
1032
1043
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1033
1044
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1034
1045
  --wds-custom-modal-border-radius: var(--wds-border-radius-200);
1046
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1035
1047
  --wds-counter-badge-size-small: var(--wds-space-475);
1036
1048
  --wds-counter-badge-size-medium: var(--wds-space-600);
1037
1049
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-100);
@@ -1592,6 +1604,7 @@
1592
1604
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1593
1605
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1594
1606
  --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%);
1607
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-tiny);
1595
1608
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1596
1609
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1597
1610
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
@@ -2035,6 +2048,7 @@
2035
2048
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2036
2049
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-extra-tiny);
2037
2050
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2051
+ --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-tiny);
2038
2052
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2039
2053
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-tiny);
2040
2054
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
package/wixel/all.st.css CHANGED
@@ -834,10 +834,13 @@
834
834
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
835
835
  @property st-global(--wds-counter-badge-border-radius-medium);
836
836
  @property st-global(--wds-counter-badge-border-radius-small);
837
+ @property st-global(--wds-counter-badge-font-size-tiny);
837
838
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
838
839
  @property st-global(--wds-counter-badge-padding-horizontal-small);
840
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
839
841
  @property st-global(--wds-counter-badge-size-medium);
840
842
  @property st-global(--wds-counter-badge-size-small);
843
+ @property st-global(--wds-counter-badge-size-tiny);
841
844
  @property st-global(--wds-custom-modal-border-radius);
842
845
  @property st-global(--wds-custom-modal-content-padding-horizontal);
843
846
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -971,6 +974,12 @@
971
974
  @property st-global(--wds-gallery-item-padding-right-small);
972
975
  @property st-global(--wds-gallery-item-padding-vertical-medium);
973
976
  @property st-global(--wds-gallery-item-padding-vertical-small);
977
+ @property st-global(--wds-google-preview-favicon-background-fill);
978
+ @property st-global(--wds-google-preview-favicon-border-fill);
979
+ @property st-global(--wds-google-preview-site-name-fill);
980
+ @property st-global(--wds-google-preview-surface-fill);
981
+ @property st-global(--wds-google-preview-text-fill);
982
+ @property st-global(--wds-google-preview-title-fill);
974
983
  @property st-global(--wds-icon-button-color-border-dark-secondary);
975
984
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
976
985
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1786,16 +1795,21 @@
1786
1795
  @property st-global(--wds-tabs-item-fill-hover);
1787
1796
  @property st-global(--wds-tabs-item-gap-medium);
1788
1797
  @property st-global(--wds-tabs-item-gap-small);
1798
+ @property st-global(--wds-tabs-item-gap-small-medium);
1789
1799
  @property st-global(--wds-tabs-label-fill);
1790
1800
  @property st-global(--wds-tabs-label-fill-active);
1791
1801
  @property st-global(--wds-tabs-label-font-size-small);
1802
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1792
1803
  @property st-global(--wds-tabs-label-font-weight);
1793
1804
  @property st-global(--wds-tabs-label-font-weight-active);
1794
1805
  @property st-global(--wds-tabs-label-line-height-small);
1806
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1795
1807
  @property st-global(--wds-tabs-padding-horizontal-medium);
1796
1808
  @property st-global(--wds-tabs-padding-horizontal-small);
1809
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1797
1810
  @property st-global(--wds-tabs-padding-vertical-medium);
1798
1811
  @property st-global(--wds-tabs-padding-vertical-small);
1812
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1799
1813
  @property st-global(--wds-tabs-selection-border);
1800
1814
  @property st-global(--wds-tabs-selection-fill-primary);
1801
1815
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -2920,10 +2934,13 @@
2920
2934
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
2921
2935
  --wds-counter-badge-border-radius-medium: 1000px;
2922
2936
  --wds-counter-badge-border-radius-small: 1000px;
2937
+ --wds-counter-badge-font-size-tiny: 10px;
2923
2938
  --wds-counter-badge-padding-horizontal-medium: 6px;
2924
2939
  --wds-counter-badge-padding-horizontal-small: 4px;
2940
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
2925
2941
  --wds-counter-badge-size-medium: 24px;
2926
2942
  --wds-counter-badge-size-small: 18px;
2943
+ --wds-counter-badge-size-tiny: 14px;
2927
2944
  --wds-custom-modal-border-radius: 4px;
2928
2945
  --wds-custom-modal-content-padding-horizontal: 24px;
2929
2946
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -3057,6 +3074,12 @@
3057
3074
  --wds-gallery-item-padding-right-small: 18px;
3058
3075
  --wds-gallery-item-padding-vertical-medium: 18px;
3059
3076
  --wds-gallery-item-padding-vertical-small: 12px;
3077
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
3078
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
3079
+ --wds-google-preview-site-name-fill: #202124;
3080
+ --wds-google-preview-surface-fill: #ffffff;
3081
+ --wds-google-preview-text-fill: #4D5156;
3082
+ --wds-google-preview-title-fill: #260AA8;
3060
3083
  --wds-icon-button-color-border-dark-secondary: #868aa5;
3061
3084
  --wds-icon-button-color-border-dark-secondary-active: #2b2e36;
3062
3085
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(38, 37, 36, 0.1000);
@@ -3872,16 +3895,21 @@
3872
3895
  --wds-tabs-item-fill-hover: rgba(38, 37, 36, 0.0000);
3873
3896
  --wds-tabs-item-gap-medium: 8px;
3874
3897
  --wds-tabs-item-gap-small: 6px;
3898
+ --wds-tabs-item-gap-small-medium: 6px;
3875
3899
  --wds-tabs-label-fill: #000624;
3876
3900
  --wds-tabs-label-fill-active: #4a57ff;
3877
3901
  --wds-tabs-label-font-size-small: 12px;
3902
+ --wds-tabs-label-font-size-small-medium: 12px;
3878
3903
  --wds-tabs-label-font-weight: 400;
3879
3904
  --wds-tabs-label-font-weight-active: 400;
3880
3905
  --wds-tabs-label-line-height-small: 16px;
3906
+ --wds-tabs-label-line-height-small-medium: 16px;
3881
3907
  --wds-tabs-padding-horizontal-medium: 16px;
3882
3908
  --wds-tabs-padding-horizontal-small: 12px;
3909
+ --wds-tabs-padding-horizontal-small-medium: 12px;
3883
3910
  --wds-tabs-padding-vertical-medium: 16px;
3884
3911
  --wds-tabs-padding-vertical-small: 12px;
3912
+ --wds-tabs-padding-vertical-small-medium: 12px;
3885
3913
  --wds-tabs-selection-border: linear-gradient(90deg, rgba(255, 255, 255, 0.0000) 0%, #4a57ff 20%, #4a57ff 80%, rgba(255, 255, 255, 0.0000) 100%);
3886
3914
  --wds-tabs-selection-fill-primary: #4a57ff;
3887
3915
  --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0.0000);
package/wixel/component.st.css CHANGED
@@ -330,10 +330,13 @@
330
330
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
331
331
  @property st-global(--wds-counter-badge-border-radius-medium);
332
332
  @property st-global(--wds-counter-badge-border-radius-small);
333
+ @property st-global(--wds-counter-badge-font-size-tiny);
333
334
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
334
335
  @property st-global(--wds-counter-badge-padding-horizontal-small);
336
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
335
337
  @property st-global(--wds-counter-badge-size-medium);
336
338
  @property st-global(--wds-counter-badge-size-small);
339
+ @property st-global(--wds-counter-badge-size-tiny);
337
340
  @property st-global(--wds-custom-modal-border-radius);
338
341
  @property st-global(--wds-custom-modal-content-padding-horizontal);
339
342
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -410,6 +413,12 @@
410
413
  @property st-global(--wds-gallery-item-padding-right-small);
411
414
  @property st-global(--wds-gallery-item-padding-vertical-medium);
412
415
  @property st-global(--wds-gallery-item-padding-vertical-small);
416
+ @property st-global(--wds-google-preview-favicon-background-fill);
417
+ @property st-global(--wds-google-preview-favicon-border-fill);
418
+ @property st-global(--wds-google-preview-site-name-fill);
419
+ @property st-global(--wds-google-preview-surface-fill);
420
+ @property st-global(--wds-google-preview-text-fill);
421
+ @property st-global(--wds-google-preview-title-fill);
413
422
  @property st-global(--wds-icon-button-color-border-dark-secondary);
414
423
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
415
424
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1075,16 +1084,21 @@
1075
1084
  @property st-global(--wds-tabs-item-fill-hover);
1076
1085
  @property st-global(--wds-tabs-item-gap-medium);
1077
1086
  @property st-global(--wds-tabs-item-gap-small);
1087
+ @property st-global(--wds-tabs-item-gap-small-medium);
1078
1088
  @property st-global(--wds-tabs-label-fill);
1079
1089
  @property st-global(--wds-tabs-label-fill-active);
1080
1090
  @property st-global(--wds-tabs-label-font-size-small);
1091
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1081
1092
  @property st-global(--wds-tabs-label-font-weight);
1082
1093
  @property st-global(--wds-tabs-label-font-weight-active);
1083
1094
  @property st-global(--wds-tabs-label-line-height-small);
1095
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1084
1096
  @property st-global(--wds-tabs-padding-horizontal-medium);
1085
1097
  @property st-global(--wds-tabs-padding-horizontal-small);
1098
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1086
1099
  @property st-global(--wds-tabs-padding-vertical-medium);
1087
1100
  @property st-global(--wds-tabs-padding-vertical-small);
1101
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1088
1102
  @property st-global(--wds-tabs-selection-border);
1089
1103
  @property st-global(--wds-tabs-selection-fill-primary);
1090
1104
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -1703,10 +1717,13 @@
1703
1717
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
1704
1718
  --wds-counter-badge-border-radius-medium: 1000px;
1705
1719
  --wds-counter-badge-border-radius-small: 1000px;
1720
+ --wds-counter-badge-font-size-tiny: 10px;
1706
1721
  --wds-counter-badge-padding-horizontal-medium: 6px;
1707
1722
  --wds-counter-badge-padding-horizontal-small: 4px;
1723
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
1708
1724
  --wds-counter-badge-size-medium: 24px;
1709
1725
  --wds-counter-badge-size-small: 18px;
1726
+ --wds-counter-badge-size-tiny: 14px;
1710
1727
  --wds-custom-modal-border-radius: 4px;
1711
1728
  --wds-custom-modal-content-padding-horizontal: 24px;
1712
1729
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -1783,6 +1800,12 @@
1783
1800
  --wds-gallery-item-padding-right-small: 18px;
1784
1801
  --wds-gallery-item-padding-vertical-medium: 18px;
1785
1802
  --wds-gallery-item-padding-vertical-small: 12px;
1803
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
1804
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
1805
+ --wds-google-preview-site-name-fill: #202124;
1806
+ --wds-google-preview-surface-fill: #ffffff;
1807
+ --wds-google-preview-text-fill: #4D5156;
1808
+ --wds-google-preview-title-fill: #260AA8;
1786
1809
  --wds-icon-button-color-border-dark-secondary: #868aa5;
1787
1810
  --wds-icon-button-color-border-dark-secondary-active: #2b2e36;
1788
1811
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(38, 37, 36, 0.1000);
@@ -2448,16 +2471,21 @@
2448
2471
  --wds-tabs-item-fill-hover: rgba(38, 37, 36, 0.0000);
2449
2472
  --wds-tabs-item-gap-medium: 8px;
2450
2473
  --wds-tabs-item-gap-small: 6px;
2474
+ --wds-tabs-item-gap-small-medium: 6px;
2451
2475
  --wds-tabs-label-fill: #000624;
2452
2476
  --wds-tabs-label-fill-active: #4a57ff;
2453
2477
  --wds-tabs-label-font-size-small: 12px;
2478
+ --wds-tabs-label-font-size-small-medium: 12px;
2454
2479
  --wds-tabs-label-font-weight: 400;
2455
2480
  --wds-tabs-label-font-weight-active: 400;
2456
2481
  --wds-tabs-label-line-height-small: 16px;
2482
+ --wds-tabs-label-line-height-small-medium: 16px;
2457
2483
  --wds-tabs-padding-horizontal-medium: 16px;
2458
2484
  --wds-tabs-padding-horizontal-small: 12px;
2485
+ --wds-tabs-padding-horizontal-small-medium: 12px;
2459
2486
  --wds-tabs-padding-vertical-medium: 16px;
2460
2487
  --wds-tabs-padding-vertical-small: 12px;
2488
+ --wds-tabs-padding-vertical-small-medium: 12px;
2461
2489
  --wds-tabs-selection-border: linear-gradient(90deg, rgba(255, 255, 255, 0.0000) 0%, #4a57ff 20%, #4a57ff 80%, rgba(255, 255, 255, 0.0000) 100%);
2462
2490
  --wds-tabs-selection-fill-primary: #4a57ff;
2463
2491
  --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0.0000);