@wix/design-system-tokens 1.208.0 → 1.210.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 (24) 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 +31 -17
  7. package/odeditor/all.scss +31 -17
  8. package/odeditor/all.st.css +45 -17
  9. package/odeditor/component.st.css +43 -15
  10. package/odeditor/semantic.st.css +2 -2
  11. package/odeditor-dark/all.css +17 -3
  12. package/odeditor-dark/all.scss +17 -3
  13. package/odeditor-dark/all.st.css +32 -4
  14. package/odeditor-dark/component.st.css +31 -3
  15. package/odeditor-dark/semantic.st.css +1 -1
  16. package/package.json +2 -2
  17. package/studio/all.css +14 -0
  18. package/studio/all.scss +14 -0
  19. package/studio/all.st.css +28 -0
  20. package/studio/component.st.css +28 -0
  21. package/wixel/all.css +14 -0
  22. package/wixel/all.scss +14 -0
  23. package/wixel/all.st.css +28 -0
  24. package/wixel/component.st.css +28 -0
package/odeditor-dark/component.st.css CHANGED
@@ -342,10 +342,13 @@
342
342
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
343
343
  @property st-global(--wds-counter-badge-border-radius-medium);
344
344
  @property st-global(--wds-counter-badge-border-radius-small);
345
+ @property st-global(--wds-counter-badge-font-size-tiny);
345
346
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
346
347
  @property st-global(--wds-counter-badge-padding-horizontal-small);
348
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
347
349
  @property st-global(--wds-counter-badge-size-medium);
348
350
  @property st-global(--wds-counter-badge-size-small);
351
+ @property st-global(--wds-counter-badge-size-tiny);
349
352
  @property st-global(--wds-custom-modal-border-radius);
350
353
  @property st-global(--wds-custom-modal-content-padding-horizontal);
351
354
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -410,6 +413,12 @@
410
413
  @property st-global(--wds-form-field-label-gap-tiny);
411
414
  @property st-global(--wds-form-field-label-line-height-small);
412
415
  @property st-global(--wds-form-field-label-line-height-tiny);
416
+ @property st-global(--wds-google-preview-favicon-background-fill);
417
+ @property st-global(--wds-google-preview-favicon-border-fill);
418
+ @property st-global(--wds-google-preview-site-name-fill);
419
+ @property st-global(--wds-google-preview-surface-fill);
420
+ @property st-global(--wds-google-preview-text-fill);
421
+ @property st-global(--wds-google-preview-title-fill);
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);
@@ -1074,18 +1083,23 @@
1074
1083
  @property st-global(--wds-tabs-item-fill-hover);
1075
1084
  @property st-global(--wds-tabs-item-gap-medium);
1076
1085
  @property st-global(--wds-tabs-item-gap-small);
1086
+ @property st-global(--wds-tabs-item-gap-small-medium);
1077
1087
  @property st-global(--wds-tabs-label-fill);
1078
1088
  @property st-global(--wds-tabs-label-fill-active);
1079
1089
  @property st-global(--wds-tabs-label-font-size-medium);
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-medium);
1084
1095
  @property st-global(--wds-tabs-label-line-height-small);
1096
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1085
1097
  @property st-global(--wds-tabs-padding-horizontal-medium);
1086
1098
  @property st-global(--wds-tabs-padding-horizontal-small);
1099
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1087
1100
  @property st-global(--wds-tabs-padding-vertical-medium);
1088
1101
  @property st-global(--wds-tabs-padding-vertical-small);
1102
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1089
1103
  @property st-global(--wds-tabs-selection-border);
1090
1104
  @property st-global(--wds-tabs-selection-fill-primary);
1091
1105
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -1714,10 +1728,13 @@
1714
1728
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
1715
1729
  --wds-counter-badge-border-radius-medium: 1000px;
1716
1730
  --wds-counter-badge-border-radius-small: 1000px;
1731
+ --wds-counter-badge-font-size-tiny: 10px;
1717
1732
  --wds-counter-badge-padding-horizontal-medium: 8px;
1718
1733
  --wds-counter-badge-padding-horizontal-small: 6px;
1734
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
1719
1735
  --wds-counter-badge-size-medium: 24px;
1720
1736
  --wds-counter-badge-size-small: 18px;
1737
+ --wds-counter-badge-size-tiny: 14px;
1721
1738
  --wds-custom-modal-border-radius: 12px;
1722
1739
  --wds-custom-modal-content-padding-horizontal: 24px;
1723
1740
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -1782,6 +1799,12 @@
1782
1799
  --wds-form-field-label-gap-tiny: 6px;
1783
1800
  --wds-form-field-label-line-height-small: 16px;
1784
1801
  --wds-form-field-label-line-height-tiny: 12px;
1802
+ --wds-google-preview-favicon-background-fill: #e4eefe;
1803
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
1804
+ --wds-google-preview-site-name-fill: #bfbfbf;
1805
+ --wds-google-preview-surface-fill: #212122;
1806
+ --wds-google-preview-text-fill: #bfbfbf;
1807
+ --wds-google-preview-title-fill: #93b4e3;
1785
1808
  --wds-icon-button-color-border-dark-secondary: #A09E9D;
1786
1809
  --wds-icon-button-color-border-dark-secondary-active: #454544;
1787
1810
  --wds-icon-button-color-border-dark-secondary-disabled: #3A3A3B;
@@ -2117,7 +2140,7 @@
2117
2140
  --wds-popover-border-fill: #3A3A3B;
2118
2141
  --wds-popover-border-radius: 12px;
2119
2142
  --wds-popover-border-width: 1px;
2120
- --wds-popover-fill: rgba(33, 33, 34, 0.92);
2143
+ --wds-popover-fill: rgba(33, 33, 34, 0.96);
2121
2144
  --wds-popover-menu-border-radius: 12px;
2122
2145
  --wds-popover-menu-paddings-horizontal: 8px;
2123
2146
  --wds-popover-menu-paddings-vertical: 8px;
@@ -2442,22 +2465,27 @@
2442
2465
  --wds-tabs-border-radius: 6px;
2443
2466
  --wds-tabs-container-padding-horizontal: 16px;
2444
2467
  --wds-tabs-gap-horizontal: 4px;
2445
- --wds-tabs-item-fill-active: #3A3A3B;
2446
- --wds-tabs-item-fill-hover: #2D2D2E;
2468
+ --wds-tabs-item-fill-active: #454544;
2469
+ --wds-tabs-item-fill-hover: #3A3A3B;
2447
2470
  --wds-tabs-item-gap-medium: 8px;
2448
2471
  --wds-tabs-item-gap-small: 6px;
2472
+ --wds-tabs-item-gap-small-medium: 6px;
2449
2473
  --wds-tabs-label-fill: #A8A6A5;
2450
2474
  --wds-tabs-label-fill-active: #FFFFFF;
2451
2475
  --wds-tabs-label-font-size-medium: 14px;
2452
2476
  --wds-tabs-label-font-size-small: 12px;
2477
+ --wds-tabs-label-font-size-small-medium: 14px;
2453
2478
  --wds-tabs-label-font-weight: 500;
2454
2479
  --wds-tabs-label-font-weight-active: 600;
2455
2480
  --wds-tabs-label-line-height-medium: 18px;
2456
2481
  --wds-tabs-label-line-height-small: 16px;
2482
+ --wds-tabs-label-line-height-small-medium: 18px;
2457
2483
  --wds-tabs-padding-horizontal-medium: 16px;
2458
2484
  --wds-tabs-padding-horizontal-small: 8px;
2485
+ --wds-tabs-padding-horizontal-small-medium: 12px;
2459
2486
  --wds-tabs-padding-vertical-medium: 7px;
2460
2487
  --wds-tabs-padding-vertical-small: 4px;
2488
+ --wds-tabs-padding-vertical-small-medium: 6px;
2461
2489
  --wds-tabs-selection-border: rgba(255, 255, 255, 0);
2462
2490
  --wds-tabs-selection-fill-primary: rgba(255, 255, 255, 0);
2463
2491
  --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0);
package/odeditor-dark/semantic.st.css CHANGED
@@ -799,7 +799,7 @@
799
799
  --wds-color-fill-surface-modal-backdrop: rgba(0, 0, 0, .2);
800
800
  --wds-color-fill-surface-neutral: #2D2D2E;
801
801
  --wds-color-fill-surface-overlay: #212122;
802
- --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.92);
802
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.96);
803
803
  --wds-color-fill-surface-overlay-dark: #FFFFFF;
804
804
  --wds-color-fill-surface-premium: #111214;
805
805
  --wds-color-fill-surface-raised: #212122;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.208.0",
3
+ "version": "1.210.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -32,5 +32,5 @@
32
32
  "author": "augustinasv@wix.com",
33
33
  "description": "Design system tokens",
34
34
  "packageManager": "yarn@3.5.0",
35
- "falconPackageHash": "ce138218f38c047279995352ffa849edfb9de52838da9f22dd4b0974"
35
+ "falconPackageHash": "af595df309d3a2340bcbda92183bc166a4d696a4ad29d523d106cb4c"
36
36
  }
package/studio/all.css CHANGED
@@ -379,6 +379,13 @@
379
379
  --wds-input-shadow-focus-warning: transparent;
380
380
  --wds-input-shadow-focus-standard: transparent;
381
381
  --wds-input-shadow-focus-destructive: transparent;
382
+ --wds-google-preview-title-fill: #260AA8;
383
+ --wds-google-preview-text-fill: #4D5156;
384
+ --wds-google-preview-site-name-fill: #202124;
385
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
386
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
387
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
388
+ --wds-counter-badge-font-size-tiny: 10px;
382
389
  --wds-composer-sidebar-end-max-width: 240px;
383
390
  --wds-composer-sidebar-bottom-width: 88px;
384
391
  --wds-color-picker-width: 236px;
@@ -951,12 +958,15 @@
951
958
  --wds-tag-border-radius-small: var(--wds-border-radius-200);
952
959
  --wds-tag-border-radius-medium: var(--wds-border-radius-200);
953
960
  --wds-tag-border-radius-large: var(--wds-border-radius-200);
961
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-300);
954
962
  --wds-tabs-padding-vertical-small: var(--wds-space-300);
955
963
  --wds-tabs-padding-vertical-medium: var(--wds-space-400);
964
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
956
965
  --wds-tabs-padding-horizontal-small: var(--wds-space-300);
957
966
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
958
967
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
959
968
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
969
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
960
970
  --wds-tabs-item-gap-small: var(--wds-space-150);
961
971
  --wds-tabs-item-gap-medium: var(--wds-space-200);
962
972
  --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
@@ -1324,6 +1334,7 @@
1324
1334
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-white-transparent-0);
1325
1335
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1326
1336
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1337
+ --wds-google-preview-surface-fill: var(--wds-color-white);
1327
1338
  --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1328
1339
  --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1329
1340
  --wds-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1369,6 +1380,7 @@
1369
1380
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1370
1381
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1371
1382
  --wds-custom-modal-border-radius: var(--wds-border-radius-200);
1383
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1372
1384
  --wds-counter-badge-size-small: var(--wds-space-475);
1373
1385
  --wds-counter-badge-size-medium: var(--wds-space-600);
1374
1386
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-150);
@@ -1672,6 +1684,7 @@
1672
1684
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1673
1685
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1674
1686
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1687
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1675
1688
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1676
1689
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1677
1690
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
@@ -2106,6 +2119,7 @@
2106
2119
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2107
2120
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2108
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);
2109
2123
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2110
2124
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2111
2125
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
package/studio/all.scss CHANGED
@@ -134,6 +134,11 @@
134
134
  --wds-illustration-color-3: #B8C4FF;
135
135
  --wds-illustration-color-2: #7896FF;
136
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;
137
142
  --wds-font-weight-semi-bold: 600;
138
143
  --wds-font-weight-regular: 400;
139
144
  --wds-font-weight-medium: 500;
@@ -151,6 +156,8 @@
151
156
  --wds-font-letter-spacing-0: 0px;
152
157
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
153
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;
154
161
  --wds-composer-sidebar-end-max-width: 240px;
155
162
  --wds-composer-sidebar-bottom-width: 88px;
156
163
  --wds-color-yellow-600: #fef6ed;
@@ -541,12 +548,15 @@
541
548
  --wds-tag-border-radius-small: var(--wds-border-radius-200);
542
549
  --wds-tag-border-radius-medium: var(--wds-border-radius-200);
543
550
  --wds-tag-border-radius-large: var(--wds-border-radius-200);
551
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-300);
544
552
  --wds-tabs-padding-vertical-small: var(--wds-space-300);
545
553
  --wds-tabs-padding-vertical-medium: var(--wds-space-400);
554
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
546
555
  --wds-tabs-padding-horizontal-small: var(--wds-space-300);
547
556
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
548
557
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
549
558
  --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
559
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
550
560
  --wds-tabs-item-gap-small: var(--wds-space-150);
551
561
  --wds-tabs-item-gap-medium: var(--wds-space-200);
552
562
  --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
@@ -1017,6 +1027,7 @@
1017
1027
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-white-transparent-0);
1018
1028
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1019
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);
1020
1031
  --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1021
1032
  --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1022
1033
  --wds-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1091,6 +1102,7 @@
1091
1102
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1092
1103
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1093
1104
  --wds-custom-modal-border-radius: var(--wds-border-radius-200);
1105
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1094
1106
  --wds-counter-badge-size-small: var(--wds-space-475);
1095
1107
  --wds-counter-badge-size-medium: var(--wds-space-600);
1096
1108
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-150);
@@ -1656,6 +1668,7 @@
1656
1668
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1657
1669
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1658
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);
1659
1672
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1660
1673
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1661
1674
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
@@ -2106,6 +2119,7 @@
2106
2119
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2107
2120
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2108
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);
2109
2123
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2110
2124
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2111
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);
@@ -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);