@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/studio/all.scss CHANGED
@@ -122,6 +122,10 @@
122
122
  --wds-input-shadow-focus-warning: transparent;
123
123
  --wds-input-shadow-focus-standard: transparent;
124
124
  --wds-input-shadow-focus-destructive: transparent;
125
+ --wds-illustration-color-opacity-100: #F8F6F100;
126
+ --wds-illustration-color-opacity-75: #F8F6F700;
127
+ --wds-illustration-color-opacity-50: #F8F6F500;
128
+ --wds-illustration-color-opacity-25: #F8F6F200;
125
129
  --wds-illustration-color-background: #F8F6F6;
126
130
  --wds-illustration-color-7: #002297;
127
131
  --wds-illustration-color-6: #002296;
@@ -130,6 +134,11 @@
130
134
  --wds-illustration-color-3: #B8C4FF;
131
135
  --wds-illustration-color-2: #7896FF;
132
136
  --wds-illustration-color-1: #002291;
137
+ --wds-google-preview-title-fill: #260AA8;
138
+ --wds-google-preview-text-fill: #4D5156;
139
+ --wds-google-preview-site-name-fill: #202124;
140
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
141
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
133
142
  --wds-font-weight-semi-bold: 600;
134
143
  --wds-font-weight-regular: 400;
135
144
  --wds-font-weight-medium: 500;
@@ -147,6 +156,8 @@
147
156
  --wds-font-letter-spacing-0: 0px;
148
157
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
149
158
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
159
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
160
+ --wds-counter-badge-font-size-tiny: 10px;
150
161
  --wds-composer-sidebar-end-max-width: 240px;
151
162
  --wds-composer-sidebar-bottom-width: 88px;
152
163
  --wds-color-yellow-600: #fef6ed;
@@ -435,8 +446,10 @@
435
446
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
436
447
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-300);
437
448
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-regular);
449
+ --wds-tooltip-border-width: var(--wds-border-width-none);
438
450
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
439
451
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
452
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
440
453
  --wds-toggle-switch-padding: var(--wds-space-50);
441
454
  --wds-toggle-switch-fill-urgent-disabled: var(--wds-color-fill-urgent-secondary-disabled);
442
455
  --wds-toggle-switch-fill-success-disabled: var(--wds-color-fill-success-secondary-disabled);
@@ -535,12 +548,15 @@
535
548
  --wds-tag-border-radius-small: var(--wds-border-radius-200);
536
549
  --wds-tag-border-radius-medium: var(--wds-border-radius-200);
537
550
  --wds-tag-border-radius-large: var(--wds-border-radius-200);
551
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-300);
538
552
  --wds-tabs-padding-vertical-small: var(--wds-space-300);
539
553
  --wds-tabs-padding-vertical-medium: var(--wds-space-400);
554
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
540
555
  --wds-tabs-padding-horizontal-small: var(--wds-space-300);
541
556
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
542
557
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
543
558
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
559
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
544
560
  --wds-tabs-item-gap-small: var(--wds-space-150);
545
561
  --wds-tabs-item-gap-medium: var(--wds-space-200);
546
562
  --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
@@ -1011,6 +1027,7 @@
1011
1027
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-white-transparent-0);
1012
1028
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1013
1029
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1030
+ --wds-google-preview-surface-fill: var(--wds-color-white);
1014
1031
  --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1015
1032
  --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1016
1033
  --wds-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1061,6 +1078,7 @@
1061
1078
  --wds-field-set-gap-medium: var(--wds-space-300);
1062
1079
  --wds-field-set-gap-large: var(--wds-space-400);
1063
1080
  --wds-feature-list-gap: var(--wds-space-600);
1081
+ --wds-empty-state-title-gap: var(--wds-space-200);
1064
1082
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1065
1083
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1066
1084
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1084,6 +1102,7 @@
1084
1102
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1085
1103
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1086
1104
  --wds-custom-modal-border-radius: var(--wds-border-radius-200);
1105
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1087
1106
  --wds-counter-badge-size-small: var(--wds-space-475);
1088
1107
  --wds-counter-badge-size-medium: var(--wds-space-600);
1089
1108
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-150);
@@ -1649,6 +1668,7 @@
1649
1668
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1650
1669
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1651
1670
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1671
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1652
1672
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1653
1673
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1654
1674
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
@@ -1914,6 +1934,7 @@
1914
1934
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1915
1935
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1916
1936
  --wds-field-set-label-fill: var(--wds-color-text-standard-primary);
1937
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1917
1938
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1918
1939
  --wds-drag-handle-fill: var(--wds-color-text-primary);
1919
1940
  --wds-dock-foreground-fill-hover: var(--wds-color-fill-standard-secondary-active);
@@ -2098,6 +2119,7 @@
2098
2119
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2099
2120
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2100
2121
  --wds-tabs-selection-border: linear-gradient(90deg, var(--wds-tabs-selection-fill-secondary) 0%, var(--wds-tabs-selection-fill-primary) 20%, var(--wds-tabs-selection-fill-primary) 80%, var(--wds-tabs-selection-fill-secondary) 100%);
2122
+ --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-tiny);
2101
2123
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2102
2124
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2103
2125
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
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);
@@ -897,6 +900,8 @@
897
900
  @property st-global(--wds-empty-state-border-radius);
898
901
  @property st-global(--wds-empty-state-page-content-paddings);
899
902
  @property st-global(--wds-empty-state-section-content-paddings);
903
+ @property st-global(--wds-empty-state-subtitle-fill);
904
+ @property st-global(--wds-empty-state-title-gap);
900
905
  @property st-global(--wds-feature-list-gap);
901
906
  @property st-global(--wds-field-set-gap-large);
902
907
  @property st-global(--wds-field-set-gap-medium);
@@ -988,6 +993,12 @@
988
993
  @property st-global(--wds-gallery-item-padding-right-small);
989
994
  @property st-global(--wds-gallery-item-padding-vertical-medium);
990
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);
991
1002
  @property st-global(--wds-icon-button-color-border-dark-secondary);
992
1003
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
993
1004
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1107,6 +1118,10 @@
1107
1118
  @property st-global(--wds-illustration-color-6);
1108
1119
  @property st-global(--wds-illustration-color-7);
1109
1120
  @property st-global(--wds-illustration-color-background);
1121
+ @property st-global(--wds-illustration-color-opacity-25);
1122
+ @property st-global(--wds-illustration-color-opacity-50);
1123
+ @property st-global(--wds-illustration-color-opacity-75);
1124
+ @property st-global(--wds-illustration-color-opacity-100);
1110
1125
  @property st-global(--wds-image-border-radius-default);
1111
1126
  @property st-global(--wds-image-border-radius-none);
1112
1127
  @property st-global(--wds-info-icon-fill);
@@ -1838,16 +1853,21 @@
1838
1853
  @property st-global(--wds-tabs-item-fill-hover);
1839
1854
  @property st-global(--wds-tabs-item-gap-medium);
1840
1855
  @property st-global(--wds-tabs-item-gap-small);
1856
+ @property st-global(--wds-tabs-item-gap-small-medium);
1841
1857
  @property st-global(--wds-tabs-label-fill);
1842
1858
  @property st-global(--wds-tabs-label-fill-active);
1843
1859
  @property st-global(--wds-tabs-label-font-size-small);
1860
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1844
1861
  @property st-global(--wds-tabs-label-font-weight);
1845
1862
  @property st-global(--wds-tabs-label-font-weight-active);
1846
1863
  @property st-global(--wds-tabs-label-line-height-small);
1864
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1847
1865
  @property st-global(--wds-tabs-padding-horizontal-medium);
1848
1866
  @property st-global(--wds-tabs-padding-horizontal-small);
1867
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1849
1868
  @property st-global(--wds-tabs-padding-vertical-medium);
1850
1869
  @property st-global(--wds-tabs-padding-vertical-small);
1870
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1851
1871
  @property st-global(--wds-tabs-selection-border);
1852
1872
  @property st-global(--wds-tabs-selection-fill-primary);
1853
1873
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -2044,9 +2064,11 @@
2044
2064
  @property st-global(--wds-toggle-switch-width-medium);
2045
2065
  @property st-global(--wds-toggle-switch-width-small);
2046
2066
  @property st-global(--wds-tooltip-background-fill);
2067
+ @property st-global(--wds-tooltip-border-fill);
2047
2068
  @property st-global(--wds-tooltip-border-radius);
2048
2069
  @property st-global(--wds-tooltip-border-radius-medium);
2049
2070
  @property st-global(--wds-tooltip-border-radius-small);
2071
+ @property st-global(--wds-tooltip-border-width);
2050
2072
  @property st-global(--wds-tooltip-label-font-line-height-medium);
2051
2073
  @property st-global(--wds-tooltip-label-font-line-height-small);
2052
2074
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -2996,10 +3018,13 @@
2996
3018
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
2997
3019
  --wds-counter-badge-border-radius-medium: 1000px;
2998
3020
  --wds-counter-badge-border-radius-small: 1000px;
3021
+ --wds-counter-badge-font-size-tiny: 10px;
2999
3022
  --wds-counter-badge-padding-horizontal-medium: 8px;
3000
3023
  --wds-counter-badge-padding-horizontal-small: 6px;
3024
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
3001
3025
  --wds-counter-badge-size-medium: 24px;
3002
3026
  --wds-counter-badge-size-small: 18px;
3027
+ --wds-counter-badge-size-tiny: 14px;
3003
3028
  --wds-custom-modal-border-radius: 4px;
3004
3029
  --wds-custom-modal-content-padding-horizontal: 24px;
3005
3030
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -3039,6 +3064,8 @@
3039
3064
  --wds-empty-state-border-radius: 4px;
3040
3065
  --wds-empty-state-page-content-paddings: 24px;
3041
3066
  --wds-empty-state-section-content-paddings: 24px;
3067
+ --wds-empty-state-subtitle-fill: #acafc4;
3068
+ --wds-empty-state-title-gap: 8px;
3042
3069
  --wds-feature-list-gap: 24px;
3043
3070
  --wds-field-set-gap-large: 16px;
3044
3071
  --wds-field-set-gap-medium: 12px;
@@ -3130,6 +3157,12 @@
3130
3157
  --wds-gallery-item-padding-right-small: 18px;
3131
3158
  --wds-gallery-item-padding-vertical-medium: 18px;
3132
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;
3133
3166
  --wds-icon-button-color-border-dark-secondary: #868aa5;
3134
3167
  --wds-icon-button-color-border-dark-secondary-active: #2b2e36;
3135
3168
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(19, 23, 32, .1);
@@ -3249,6 +3282,10 @@
3249
3282
  --wds-illustration-color-6: #002296;
3250
3283
  --wds-illustration-color-7: #002297;
3251
3284
  --wds-illustration-color-background: #F8F6F6;
3285
+ --wds-illustration-color-opacity-25: #F8F6F200;
3286
+ --wds-illustration-color-opacity-50: #F8F6F500;
3287
+ --wds-illustration-color-opacity-75: #F8F6F700;
3288
+ --wds-illustration-color-opacity-100: #F8F6F100;
3252
3289
  --wds-image-border-radius-default: 4px;
3253
3290
  --wds-image-border-radius-none: 0px;
3254
3291
  --wds-info-icon-fill: #868aa5;
@@ -3980,16 +4017,21 @@
3980
4017
  --wds-tabs-item-fill-hover: rgba(19, 23, 32, 0);
3981
4018
  --wds-tabs-item-gap-medium: 8px;
3982
4019
  --wds-tabs-item-gap-small: 6px;
4020
+ --wds-tabs-item-gap-small-medium: 6px;
3983
4021
  --wds-tabs-label-fill: #131720;
3984
4022
  --wds-tabs-label-fill-active: #116dff;
3985
4023
  --wds-tabs-label-font-size-small: 14px;
4024
+ --wds-tabs-label-font-size-small-medium: 14px;
3986
4025
  --wds-tabs-label-font-weight: 400;
3987
4026
  --wds-tabs-label-font-weight-active: 400;
3988
4027
  --wds-tabs-label-line-height-small: 16px;
4028
+ --wds-tabs-label-line-height-small-medium: 16px;
3989
4029
  --wds-tabs-padding-horizontal-medium: 16px;
3990
4030
  --wds-tabs-padding-horizontal-small: 12px;
4031
+ --wds-tabs-padding-horizontal-small-medium: 12px;
3991
4032
  --wds-tabs-padding-vertical-medium: 16px;
3992
4033
  --wds-tabs-padding-vertical-small: 12px;
4034
+ --wds-tabs-padding-vertical-small-medium: 12px;
3993
4035
  --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
3994
4036
  --wds-tabs-selection-fill-primary: #116dff;
3995
4037
  --wds-tabs-selection-fill-secondary: #116dff;
@@ -4186,9 +4228,11 @@
4186
4228
  --wds-toggle-switch-width-medium: 28px;
4187
4229
  --wds-toggle-switch-width-small: 24px;
4188
4230
  --wds-tooltip-background-fill: #ffffff;
4231
+ --wds-tooltip-border-fill: rgba(19, 23, 32, 0);
4189
4232
  --wds-tooltip-border-radius: 4px;
4190
4233
  --wds-tooltip-border-radius-medium: 8px;
4191
4234
  --wds-tooltip-border-radius-small: 8px;
4235
+ --wds-tooltip-border-width: 0px;
4192
4236
  --wds-tooltip-label-font-line-height-medium: 20px;
4193
4237
  --wds-tooltip-label-font-line-height-small: 16px;
4194
4238
  --wds-tooltip-label-font-size-medium: 14px;
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);
@@ -390,6 +393,8 @@
390
393
  @property st-global(--wds-empty-state-border-radius);
391
394
  @property st-global(--wds-empty-state-page-content-paddings);
392
395
  @property st-global(--wds-empty-state-section-content-paddings);
396
+ @property st-global(--wds-empty-state-subtitle-fill);
397
+ @property st-global(--wds-empty-state-title-gap);
393
398
  @property st-global(--wds-feature-list-gap);
394
399
  @property st-global(--wds-field-set-gap-large);
395
400
  @property st-global(--wds-field-set-gap-medium);
@@ -425,6 +430,12 @@
425
430
  @property st-global(--wds-gallery-item-padding-right-small);
426
431
  @property st-global(--wds-gallery-item-padding-vertical-medium);
427
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);
428
439
  @property st-global(--wds-icon-button-color-border-dark-secondary);
429
440
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
430
441
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1101,16 +1112,21 @@
1101
1112
  @property st-global(--wds-tabs-item-fill-hover);
1102
1113
  @property st-global(--wds-tabs-item-gap-medium);
1103
1114
  @property st-global(--wds-tabs-item-gap-small);
1115
+ @property st-global(--wds-tabs-item-gap-small-medium);
1104
1116
  @property st-global(--wds-tabs-label-fill);
1105
1117
  @property st-global(--wds-tabs-label-fill-active);
1106
1118
  @property st-global(--wds-tabs-label-font-size-small);
1119
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1107
1120
  @property st-global(--wds-tabs-label-font-weight);
1108
1121
  @property st-global(--wds-tabs-label-font-weight-active);
1109
1122
  @property st-global(--wds-tabs-label-line-height-small);
1123
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1110
1124
  @property st-global(--wds-tabs-padding-horizontal-medium);
1111
1125
  @property st-global(--wds-tabs-padding-horizontal-small);
1126
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1112
1127
  @property st-global(--wds-tabs-padding-vertical-medium);
1113
1128
  @property st-global(--wds-tabs-padding-vertical-small);
1129
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1114
1130
  @property st-global(--wds-tabs-selection-border);
1115
1131
  @property st-global(--wds-tabs-selection-fill-primary);
1116
1132
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -1307,9 +1323,11 @@
1307
1323
  @property st-global(--wds-toggle-switch-width-medium);
1308
1324
  @property st-global(--wds-toggle-switch-width-small);
1309
1325
  @property st-global(--wds-tooltip-background-fill);
1326
+ @property st-global(--wds-tooltip-border-fill);
1310
1327
  @property st-global(--wds-tooltip-border-radius);
1311
1328
  @property st-global(--wds-tooltip-border-radius-medium);
1312
1329
  @property st-global(--wds-tooltip-border-radius-small);
1330
+ @property st-global(--wds-tooltip-border-width);
1313
1331
  @property st-global(--wds-tooltip-label-font-line-height-medium);
1314
1332
  @property st-global(--wds-tooltip-label-font-line-height-small);
1315
1333
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -1750,10 +1768,13 @@
1750
1768
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
1751
1769
  --wds-counter-badge-border-radius-medium: 1000px;
1752
1770
  --wds-counter-badge-border-radius-small: 1000px;
1771
+ --wds-counter-badge-font-size-tiny: 10px;
1753
1772
  --wds-counter-badge-padding-horizontal-medium: 8px;
1754
1773
  --wds-counter-badge-padding-horizontal-small: 6px;
1774
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
1755
1775
  --wds-counter-badge-size-medium: 24px;
1756
1776
  --wds-counter-badge-size-small: 18px;
1777
+ --wds-counter-badge-size-tiny: 14px;
1757
1778
  --wds-custom-modal-border-radius: 4px;
1758
1779
  --wds-custom-modal-content-padding-horizontal: 24px;
1759
1780
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -1793,6 +1814,8 @@
1793
1814
  --wds-empty-state-border-radius: 4px;
1794
1815
  --wds-empty-state-page-content-paddings: 24px;
1795
1816
  --wds-empty-state-section-content-paddings: 24px;
1817
+ --wds-empty-state-subtitle-fill: #acafc4;
1818
+ --wds-empty-state-title-gap: 8px;
1796
1819
  --wds-feature-list-gap: 24px;
1797
1820
  --wds-field-set-gap-large: 16px;
1798
1821
  --wds-field-set-gap-medium: 12px;
@@ -1828,6 +1851,12 @@
1828
1851
  --wds-gallery-item-padding-right-small: 18px;
1829
1852
  --wds-gallery-item-padding-vertical-medium: 18px;
1830
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;
1831
1860
  --wds-icon-button-color-border-dark-secondary: #868aa5;
1832
1861
  --wds-icon-button-color-border-dark-secondary-active: #2b2e36;
1833
1862
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(19, 23, 32, .1);
@@ -2504,16 +2533,21 @@
2504
2533
  --wds-tabs-item-fill-hover: rgba(19, 23, 32, 0);
2505
2534
  --wds-tabs-item-gap-medium: 8px;
2506
2535
  --wds-tabs-item-gap-small: 6px;
2536
+ --wds-tabs-item-gap-small-medium: 6px;
2507
2537
  --wds-tabs-label-fill: #131720;
2508
2538
  --wds-tabs-label-fill-active: #116dff;
2509
2539
  --wds-tabs-label-font-size-small: 14px;
2540
+ --wds-tabs-label-font-size-small-medium: 14px;
2510
2541
  --wds-tabs-label-font-weight: 400;
2511
2542
  --wds-tabs-label-font-weight-active: 400;
2512
2543
  --wds-tabs-label-line-height-small: 16px;
2544
+ --wds-tabs-label-line-height-small-medium: 16px;
2513
2545
  --wds-tabs-padding-horizontal-medium: 16px;
2514
2546
  --wds-tabs-padding-horizontal-small: 12px;
2547
+ --wds-tabs-padding-horizontal-small-medium: 12px;
2515
2548
  --wds-tabs-padding-vertical-medium: 16px;
2516
2549
  --wds-tabs-padding-vertical-small: 12px;
2550
+ --wds-tabs-padding-vertical-small-medium: 12px;
2517
2551
  --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
2518
2552
  --wds-tabs-selection-fill-primary: #116dff;
2519
2553
  --wds-tabs-selection-fill-secondary: #116dff;
@@ -2710,9 +2744,11 @@
2710
2744
  --wds-toggle-switch-width-medium: 28px;
2711
2745
  --wds-toggle-switch-width-small: 24px;
2712
2746
  --wds-tooltip-background-fill: #ffffff;
2747
+ --wds-tooltip-border-fill: rgba(19, 23, 32, 0);
2713
2748
  --wds-tooltip-border-radius: 4px;
2714
2749
  --wds-tooltip-border-radius-medium: 8px;
2715
2750
  --wds-tooltip-border-radius-small: 8px;
2751
+ --wds-tooltip-border-width: 0px;
2716
2752
  --wds-tooltip-label-font-line-height-medium: 20px;
2717
2753
  --wds-tooltip-label-font-line-height-small: 16px;
2718
2754
  --wds-tooltip-label-font-size-medium: 14px;
package/studio/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: #002296;
911
915
  --wds-illustration-color-7: #002297;
912
916
  --wds-illustration-color-background: #F8F6F6;
917
+ --wds-illustration-color-opacity-25: #F8F6F200;
918
+ --wds-illustration-color-opacity-50: #F8F6F500;
919
+ --wds-illustration-color-opacity-75: #F8F6F700;
920
+ --wds-illustration-color-opacity-100: #F8F6F100;
913
921
  --wds-inner-shadow-blur-input: 0px;
914
922
  --wds-inner-shadow-blur-primary: 0px;
915
923
  --wds-inner-shadow-blur-secondary: 0px;
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);
@@ -812,8 +819,10 @@
812
819
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
813
820
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-400);
814
821
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-regular);
822
+ --wds-tooltip-border-width: var(--wds-border-width-none);
815
823
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
816
824
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
825
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
817
826
  --wds-toggle-switch-shadow: 0 2px 1px var(--wds-color-black-100-transparent-0), 0 0 3px var(--wds-color-black-100-transparent-30);
818
827
  --wds-toggle-switch-padding: var(--wds-space-25);
819
828
  --wds-toggle-switch-fill-urgent-disabled: var(--wds-color-fill-urgent-primary-disabled);
@@ -910,12 +919,15 @@
910
919
  --wds-tag-border-radius-medium: var(--wds-border-radius-200);
911
920
  --wds-tag-border-radius-large: var(--wds-border-radius-200);
912
921
  --wds-tabs-selection-fill-secondary: var(--wds-color-white-transparent-0);
922
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-300);
913
923
  --wds-tabs-padding-vertical-small: var(--wds-space-300);
914
924
  --wds-tabs-padding-vertical-medium: var(--wds-space-400);
925
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
915
926
  --wds-tabs-padding-horizontal-small: var(--wds-space-300);
916
927
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
917
928
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
918
929
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
930
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
919
931
  --wds-tabs-item-gap-small: var(--wds-space-150);
920
932
  --wds-tabs-item-gap-medium: var(--wds-space-200);
921
933
  --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
@@ -1260,6 +1272,7 @@
1260
1272
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1261
1273
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1262
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);
1263
1276
  --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1264
1277
  --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1265
1278
  --wds-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1281,6 +1294,7 @@
1281
1294
  --wds-field-set-gap-medium: var(--wds-space-300);
1282
1295
  --wds-field-set-gap-large: var(--wds-space-400);
1283
1296
  --wds-feature-list-gap: var(--wds-space-600);
1297
+ --wds-empty-state-title-gap: var(--wds-space-200);
1284
1298
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1285
1299
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1286
1300
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1306,6 +1320,7 @@
1306
1320
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1307
1321
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1308
1322
  --wds-custom-modal-border-radius: var(--wds-border-radius-200);
1323
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1309
1324
  --wds-counter-badge-size-small: var(--wds-space-475);
1310
1325
  --wds-counter-badge-size-medium: var(--wds-space-600);
1311
1326
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-100);
@@ -1604,6 +1619,7 @@
1604
1619
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1605
1620
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1606
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);
1607
1623
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1608
1624
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1609
1625
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
@@ -1864,6 +1880,7 @@
1864
1880
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-tiny);
1865
1881
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-small);
1866
1882
  --wds-field-set-label-fill: var(--wds-color-text-standard-primary);
1883
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1867
1884
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1868
1885
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1869
1886
  --wds-drag-handle-fill: var(--wds-color-text-primary);
@@ -2031,6 +2048,7 @@
2031
2048
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2032
2049
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-extra-tiny);
2033
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);
2034
2052
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2035
2053
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-tiny);
2036
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;
@@ -418,8 +425,10 @@
418
425
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
419
426
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-400);
420
427
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-regular);
428
+ --wds-tooltip-border-width: var(--wds-border-width-none);
421
429
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
422
430
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
431
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
423
432
  --wds-toggle-switch-shadow: 0 2px 1px var(--wds-color-black-100-transparent-0), 0 0 3px var(--wds-color-black-100-transparent-30);
424
433
  --wds-toggle-switch-padding: var(--wds-space-25);
425
434
  --wds-toggle-switch-fill-urgent-disabled: var(--wds-color-fill-urgent-primary-disabled);
@@ -516,12 +525,15 @@
516
525
  --wds-tag-border-radius-medium: var(--wds-border-radius-200);
517
526
  --wds-tag-border-radius-large: var(--wds-border-radius-200);
518
527
  --wds-tabs-selection-fill-secondary: var(--wds-color-white-transparent-0);
528
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-300);
519
529
  --wds-tabs-padding-vertical-small: var(--wds-space-300);
520
530
  --wds-tabs-padding-vertical-medium: var(--wds-space-400);
531
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
521
532
  --wds-tabs-padding-horizontal-small: var(--wds-space-300);
522
533
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
523
534
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
524
535
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
536
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
525
537
  --wds-tabs-item-gap-small: var(--wds-space-150);
526
538
  --wds-tabs-item-gap-medium: var(--wds-space-200);
527
539
  --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
@@ -954,6 +966,7 @@
954
966
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
955
967
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
956
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);
957
970
  --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
958
971
  --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
959
972
  --wds-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1004,6 +1017,7 @@
1004
1017
  --wds-field-set-gap-medium: var(--wds-space-300);
1005
1018
  --wds-field-set-gap-large: var(--wds-space-400);
1006
1019
  --wds-feature-list-gap: var(--wds-space-600);
1020
+ --wds-empty-state-title-gap: var(--wds-space-200);
1007
1021
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1008
1022
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1009
1023
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1029,6 +1043,7 @@
1029
1043
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1030
1044
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1031
1045
  --wds-custom-modal-border-radius: var(--wds-border-radius-200);
1046
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1032
1047
  --wds-counter-badge-size-small: var(--wds-space-475);
1033
1048
  --wds-counter-badge-size-medium: var(--wds-space-600);
1034
1049
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-100);
@@ -1589,6 +1604,7 @@
1589
1604
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1590
1605
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1591
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);
1592
1608
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1593
1609
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1594
1610
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
@@ -1863,6 +1879,7 @@
1863
1879
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-tiny);
1864
1880
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-small);
1865
1881
  --wds-field-set-label-fill: var(--wds-color-text-standard-primary);
1882
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1866
1883
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1867
1884
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1868
1885
  --wds-drag-handle-fill: var(--wds-color-text-primary);
@@ -2031,6 +2048,7 @@
2031
2048
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2032
2049
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-extra-tiny);
2033
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);
2034
2052
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2035
2053
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-tiny);
2036
2054
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);