@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/odeditor/component.st.css CHANGED
@@ -339,10 +339,13 @@
339
339
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
340
340
  @property st-global(--wds-counter-badge-border-radius-medium);
341
341
  @property st-global(--wds-counter-badge-border-radius-small);
342
+ @property st-global(--wds-counter-badge-font-size-tiny);
342
343
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
343
344
  @property st-global(--wds-counter-badge-padding-horizontal-small);
345
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
344
346
  @property st-global(--wds-counter-badge-size-medium);
345
347
  @property st-global(--wds-counter-badge-size-small);
348
+ @property st-global(--wds-counter-badge-size-tiny);
346
349
  @property st-global(--wds-custom-modal-border-radius);
347
350
  @property st-global(--wds-custom-modal-content-padding-horizontal);
348
351
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -407,6 +410,12 @@
407
410
  @property st-global(--wds-form-field-label-gap-tiny);
408
411
  @property st-global(--wds-form-field-label-line-height-small);
409
412
  @property st-global(--wds-form-field-label-line-height-tiny);
413
+ @property st-global(--wds-google-preview-favicon-background-fill);
414
+ @property st-global(--wds-google-preview-favicon-border-fill);
415
+ @property st-global(--wds-google-preview-site-name-fill);
416
+ @property st-global(--wds-google-preview-surface-fill);
417
+ @property st-global(--wds-google-preview-text-fill);
418
+ @property st-global(--wds-google-preview-title-fill);
410
419
  @property st-global(--wds-icon-button-color-border-dark-secondary);
411
420
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
412
421
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1066,18 +1075,23 @@
1066
1075
  @property st-global(--wds-tabs-item-fill-hover);
1067
1076
  @property st-global(--wds-tabs-item-gap-medium);
1068
1077
  @property st-global(--wds-tabs-item-gap-small);
1078
+ @property st-global(--wds-tabs-item-gap-small-medium);
1069
1079
  @property st-global(--wds-tabs-label-fill);
1070
1080
  @property st-global(--wds-tabs-label-fill-active);
1071
1081
  @property st-global(--wds-tabs-label-font-size-medium);
1072
1082
  @property st-global(--wds-tabs-label-font-size-small);
1083
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1073
1084
  @property st-global(--wds-tabs-label-font-weight);
1074
1085
  @property st-global(--wds-tabs-label-font-weight-active);
1075
1086
  @property st-global(--wds-tabs-label-line-height-medium);
1076
1087
  @property st-global(--wds-tabs-label-line-height-small);
1088
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1077
1089
  @property st-global(--wds-tabs-padding-horizontal-medium);
1078
1090
  @property st-global(--wds-tabs-padding-horizontal-small);
1091
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1079
1092
  @property st-global(--wds-tabs-padding-vertical-medium);
1080
1093
  @property st-global(--wds-tabs-padding-vertical-small);
1094
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1081
1095
  @property st-global(--wds-tabs-selection-border);
1082
1096
  @property st-global(--wds-tabs-selection-fill-primary);
1083
1097
  @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: 8px;
1707
1722
  --wds-counter-badge-padding-horizontal-small: 6px;
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: 12px;
1711
1728
  --wds-custom-modal-content-padding-horizontal: 24px;
1712
1729
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -1771,6 +1788,12 @@
1771
1788
  --wds-form-field-label-gap-tiny: 6px;
1772
1789
  --wds-form-field-label-line-height-small: 16px;
1773
1790
  --wds-form-field-label-line-height-tiny: 12px;
1791
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
1792
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
1793
+ --wds-google-preview-site-name-fill: #202124;
1794
+ --wds-google-preview-surface-fill: #ffffff;
1795
+ --wds-google-preview-text-fill: #4D5156;
1796
+ --wds-google-preview-title-fill: #260AA8;
1774
1797
  --wds-icon-button-color-border-dark-secondary: #767574;
1775
1798
  --wds-icon-button-color-border-dark-secondary-active: #dedede;
1776
1799
  --wds-icon-button-color-border-dark-secondary-disabled: #f0efef;
@@ -2426,22 +2449,27 @@
2426
2449
  --wds-tabs-border-radius: 6px;
2427
2450
  --wds-tabs-container-padding-horizontal: 16px;
2428
2451
  --wds-tabs-gap-horizontal: 4px;
2429
- --wds-tabs-item-fill-active: #f0efef;
2430
- --wds-tabs-item-fill-hover: #f8f6f6;
2452
+ --wds-tabs-item-fill-active: #e8e7e7;
2453
+ --wds-tabs-item-fill-hover: #f0efef;
2431
2454
  --wds-tabs-item-gap-medium: 8px;
2432
2455
  --wds-tabs-item-gap-small: 6px;
2456
+ --wds-tabs-item-gap-small-medium: 6px;
2433
2457
  --wds-tabs-label-fill: #525150;
2434
2458
  --wds-tabs-label-fill-active: #151414;
2435
- --wds-tabs-label-font-size-medium: 16px;
2459
+ --wds-tabs-label-font-size-medium: 14px;
2436
2460
  --wds-tabs-label-font-size-small: 14px;
2461
+ --wds-tabs-label-font-size-small-medium: 14px;
2437
2462
  --wds-tabs-label-font-weight: 500;
2438
- --wds-tabs-label-font-weight-active: 600;
2439
- --wds-tabs-label-line-height-medium: 24px;
2463
+ --wds-tabs-label-font-weight-active: 500;
2464
+ --wds-tabs-label-line-height-medium: 18px;
2440
2465
  --wds-tabs-label-line-height-small: 18px;
2466
+ --wds-tabs-label-line-height-small-medium: 18px;
2441
2467
  --wds-tabs-padding-horizontal-medium: 16px;
2442
2468
  --wds-tabs-padding-horizontal-small: 8px;
2469
+ --wds-tabs-padding-horizontal-small-medium: 12px;
2443
2470
  --wds-tabs-padding-vertical-medium: 7px;
2444
2471
  --wds-tabs-padding-vertical-small: 4px;
2472
+ --wds-tabs-padding-vertical-small-medium: 6px;
2445
2473
  --wds-tabs-selection-border: rgba(19, 23, 32, 0);
2446
2474
  --wds-tabs-selection-fill-primary: rgba(19, 23, 32, 0);
2447
2475
  --wds-tabs-selection-fill-secondary: rgba(19, 23, 32, 0);
package/odeditor-dark/all.css CHANGED
@@ -395,7 +395,15 @@
395
395
  --wds-input-shadow-focus-warning: transparent;
396
396
  --wds-input-shadow-focus-standard: transparent;
397
397
  --wds-input-shadow-focus-destructive: transparent;
398
+ --wds-google-preview-title-fill: #93b4e3;
399
+ --wds-google-preview-text-fill: #bfbfbf;
400
+ --wds-google-preview-surface-fill: #212122;
401
+ --wds-google-preview-site-name-fill: #bfbfbf;
402
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
403
+ --wds-google-preview-favicon-background-fill: #e4eefe;
398
404
  --wds-fill-button-border-color: conic-gradient(from 180deg at 50% 50%, #3747FE 0deg, #4076FD 36deg, #B522FE 72deg, #FF1125 144deg, #F7851A 216deg, #FFCC56 251deg, #37FFC3 324deg, #37A8E8 338deg, #3775D5 352deg, #3747FE 360deg);
405
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
406
+ --wds-counter-badge-font-size-tiny: 10px;
399
407
  --wds-composer-sidebar-end-max-width: 240px;
400
408
  --wds-composer-sidebar-bottom-width: 88px;
401
409
  --wds-color-picker-width: 236px;
@@ -968,16 +976,19 @@
968
976
  --wds-tabs-selection-fill-secondary: var(--wds-color-black-100-transparent-0);
969
977
  --wds-tabs-selection-fill-primary: var(--wds-color-black-100-transparent-0);
970
978
  --wds-tabs-selection-border: var(--wds-color-black-100-transparent-0);
979
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-150);
971
980
  --wds-tabs-padding-vertical-small: var(--wds-space-100);
972
981
  --wds-tabs-padding-vertical-medium: var(--wds-space-175);
982
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
973
983
  --wds-tabs-padding-horizontal-small: var(--wds-space-200);
974
984
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
975
985
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-semi-bold);
976
986
  --wds-tabs-label-font-weight: var(--wds-font-weight-medium);
977
987
  --wds-tabs-label-fill: var(--wds-color-black-300);
988
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
978
989
  --wds-tabs-item-gap-small: var(--wds-space-150);
979
990
  --wds-tabs-item-gap-medium: var(--wds-space-200);
980
- --wds-tabs-item-fill-hover: var(--wds-color-black-750);
991
+ --wds-tabs-item-fill-active: var(--wds-color-black-600);
981
992
  --wds-tabs-gap-horizontal: var(--wds-space-100);
982
993
  --wds-tabs-container-padding-horizontal: var(--wds-space-400);
983
994
  --wds-tabs-border-radius: var(--wds-border-radius-300);
@@ -1398,6 +1409,7 @@
1398
1409
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1399
1410
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1400
1411
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1412
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1401
1413
  --wds-counter-badge-size-small: var(--wds-space-475);
1402
1414
  --wds-counter-badge-size-medium: var(--wds-space-600);
1403
1415
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-150);
@@ -1709,10 +1721,11 @@
1709
1721
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1710
1722
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1711
1723
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1724
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1712
1725
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1713
1726
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1714
1727
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1715
- --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1728
+ --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1716
1729
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1717
1730
  --wds-table-list-item-fill-active: var(--wds-color-fill-dark-tertiary-active);
1718
1731
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-standard-primary);
@@ -2071,6 +2084,7 @@
2071
2084
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2072
2085
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2073
2086
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2087
+ --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-small);
2074
2088
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2075
2089
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-small);
2076
2090
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
package/odeditor-dark/all.scss CHANGED
@@ -167,6 +167,12 @@
167
167
  --wds-illustration-color-3: #B8C4FF;
168
168
  --wds-illustration-color-2: #7896FF;
169
169
  --wds-illustration-color-1: #002294;
170
+ --wds-google-preview-title-fill: #93b4e3;
171
+ --wds-google-preview-text-fill: #bfbfbf;
172
+ --wds-google-preview-surface-fill: #212122;
173
+ --wds-google-preview-site-name-fill: #bfbfbf;
174
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
175
+ --wds-google-preview-favicon-background-fill: #e4eefe;
170
176
  --wds-font-weight-semi-bold: 600;
171
177
  --wds-font-weight-regular: 400;
172
178
  --wds-font-weight-medium: 500;
@@ -188,6 +194,8 @@
188
194
  --wds-font-family-display: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
189
195
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
190
196
  --wds-fill-button-border-color: conic-gradient(from 180deg at 50% 50%, #3747FE 0deg, #4076FD 36deg, #B522FE 72deg, #FF1125 144deg, #F7851A 216deg, #FFCC56 251deg, #37FFC3 324deg, #37A8E8 338deg, #3775D5 352deg, #3747FE 360deg);
197
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
198
+ --wds-counter-badge-font-size-tiny: 10px;
191
199
  --wds-composer-sidebar-end-max-width: 240px;
192
200
  --wds-composer-sidebar-bottom-width: 88px;
193
201
  --wds-color-yellow-600: #3E2B13;
@@ -547,16 +555,19 @@
547
555
  --wds-tabs-selection-fill-secondary: var(--wds-color-black-100-transparent-0);
548
556
  --wds-tabs-selection-fill-primary: var(--wds-color-black-100-transparent-0);
549
557
  --wds-tabs-selection-border: var(--wds-color-black-100-transparent-0);
558
+ --wds-tabs-padding-vertical-small-medium: var(--wds-space-150);
550
559
  --wds-tabs-padding-vertical-small: var(--wds-space-100);
551
560
  --wds-tabs-padding-vertical-medium: var(--wds-space-175);
561
+ --wds-tabs-padding-horizontal-small-medium: var(--wds-space-300);
552
562
  --wds-tabs-padding-horizontal-small: var(--wds-space-200);
553
563
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
554
564
  --wds-tabs-label-font-weight-active: var(--wds-font-weight-semi-bold);
555
565
  --wds-tabs-label-font-weight: var(--wds-font-weight-medium);
556
566
  --wds-tabs-label-fill: var(--wds-color-black-300);
567
+ --wds-tabs-item-gap-small-medium: var(--wds-space-150);
557
568
  --wds-tabs-item-gap-small: var(--wds-space-150);
558
569
  --wds-tabs-item-gap-medium: var(--wds-space-200);
559
- --wds-tabs-item-fill-hover: var(--wds-color-black-750);
570
+ --wds-tabs-item-fill-active: var(--wds-color-black-600);
560
571
  --wds-tabs-gap-horizontal: var(--wds-space-100);
561
572
  --wds-tabs-container-padding-horizontal: var(--wds-space-400);
562
573
  --wds-tabs-border-radius: var(--wds-border-radius-300);
@@ -1098,6 +1109,7 @@
1098
1109
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1099
1110
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1100
1111
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1112
+ --wds-counter-badge-size-tiny: var(--wds-space-350);
1101
1113
  --wds-counter-badge-size-small: var(--wds-space-475);
1102
1114
  --wds-counter-badge-size-medium: var(--wds-space-600);
1103
1115
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-150);
@@ -1694,10 +1706,11 @@
1694
1706
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1695
1707
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1696
1708
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1709
+ --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
1697
1710
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1698
1711
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1699
1712
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1700
- --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1713
+ --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1701
1714
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1702
1715
  --wds-table-list-item-fill-active: var(--wds-color-fill-dark-tertiary-active);
1703
1716
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-standard-primary);
@@ -2071,6 +2084,7 @@
2071
2084
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2072
2085
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2073
2086
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2087
+ --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-small);
2074
2088
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2075
2089
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-small);
2076
2090
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
package/odeditor-dark/all.st.css CHANGED
@@ -850,10 +850,13 @@
850
850
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
851
851
  @property st-global(--wds-counter-badge-border-radius-medium);
852
852
  @property st-global(--wds-counter-badge-border-radius-small);
853
+ @property st-global(--wds-counter-badge-font-size-tiny);
853
854
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
854
855
  @property st-global(--wds-counter-badge-padding-horizontal-small);
856
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
855
857
  @property st-global(--wds-counter-badge-size-medium);
856
858
  @property st-global(--wds-counter-badge-size-small);
859
+ @property st-global(--wds-counter-badge-size-tiny);
857
860
  @property st-global(--wds-custom-modal-border-radius);
858
861
  @property st-global(--wds-custom-modal-content-padding-horizontal);
859
862
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -975,6 +978,12 @@
975
978
  @property st-global(--wds-form-field-label-gap-tiny);
976
979
  @property st-global(--wds-form-field-label-line-height-small);
977
980
  @property st-global(--wds-form-field-label-line-height-tiny);
981
+ @property st-global(--wds-google-preview-favicon-background-fill);
982
+ @property st-global(--wds-google-preview-favicon-border-fill);
983
+ @property st-global(--wds-google-preview-site-name-fill);
984
+ @property st-global(--wds-google-preview-surface-fill);
985
+ @property st-global(--wds-google-preview-text-fill);
986
+ @property st-global(--wds-google-preview-title-fill);
978
987
  @property st-global(--wds-icon-button-color-border-dark-secondary);
979
988
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
980
989
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1819,18 +1828,23 @@
1819
1828
  @property st-global(--wds-tabs-item-fill-hover);
1820
1829
  @property st-global(--wds-tabs-item-gap-medium);
1821
1830
  @property st-global(--wds-tabs-item-gap-small);
1831
+ @property st-global(--wds-tabs-item-gap-small-medium);
1822
1832
  @property st-global(--wds-tabs-label-fill);
1823
1833
  @property st-global(--wds-tabs-label-fill-active);
1824
1834
  @property st-global(--wds-tabs-label-font-size-medium);
1825
1835
  @property st-global(--wds-tabs-label-font-size-small);
1836
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1826
1837
  @property st-global(--wds-tabs-label-font-weight);
1827
1838
  @property st-global(--wds-tabs-label-font-weight-active);
1828
1839
  @property st-global(--wds-tabs-label-line-height-medium);
1829
1840
  @property st-global(--wds-tabs-label-line-height-small);
1841
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1830
1842
  @property st-global(--wds-tabs-padding-horizontal-medium);
1831
1843
  @property st-global(--wds-tabs-padding-horizontal-small);
1844
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1832
1845
  @property st-global(--wds-tabs-padding-vertical-medium);
1833
1846
  @property st-global(--wds-tabs-padding-vertical-small);
1847
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1834
1848
  @property st-global(--wds-tabs-selection-border);
1835
1849
  @property st-global(--wds-tabs-selection-fill-primary);
1836
1850
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -2969,10 +2983,13 @@
2969
2983
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
2970
2984
  --wds-counter-badge-border-radius-medium: 1000px;
2971
2985
  --wds-counter-badge-border-radius-small: 1000px;
2986
+ --wds-counter-badge-font-size-tiny: 10px;
2972
2987
  --wds-counter-badge-padding-horizontal-medium: 8px;
2973
2988
  --wds-counter-badge-padding-horizontal-small: 6px;
2989
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
2974
2990
  --wds-counter-badge-size-medium: 24px;
2975
2991
  --wds-counter-badge-size-small: 18px;
2992
+ --wds-counter-badge-size-tiny: 14px;
2976
2993
  --wds-custom-modal-border-radius: 12px;
2977
2994
  --wds-custom-modal-content-padding-horizontal: 24px;
2978
2995
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -3094,6 +3111,12 @@
3094
3111
  --wds-form-field-label-gap-tiny: 6px;
3095
3112
  --wds-form-field-label-line-height-small: 16px;
3096
3113
  --wds-form-field-label-line-height-tiny: 12px;
3114
+ --wds-google-preview-favicon-background-fill: #e4eefe;
3115
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
3116
+ --wds-google-preview-site-name-fill: #bfbfbf;
3117
+ --wds-google-preview-surface-fill: #212122;
3118
+ --wds-google-preview-text-fill: #bfbfbf;
3119
+ --wds-google-preview-title-fill: #93b4e3;
3097
3120
  --wds-icon-button-color-border-dark-secondary: #A09E9D;
3098
3121
  --wds-icon-button-color-border-dark-secondary-active: #454544;
3099
3122
  --wds-icon-button-color-border-dark-secondary-disabled: #3A3A3B;
@@ -3934,22 +3957,27 @@
3934
3957
  --wds-tabs-border-radius: 6px;
3935
3958
  --wds-tabs-container-padding-horizontal: 16px;
3936
3959
  --wds-tabs-gap-horizontal: 4px;
3937
- --wds-tabs-item-fill-active: #3A3A3B;
3938
- --wds-tabs-item-fill-hover: #2D2D2E;
3960
+ --wds-tabs-item-fill-active: #454544;
3961
+ --wds-tabs-item-fill-hover: #3A3A3B;
3939
3962
  --wds-tabs-item-gap-medium: 8px;
3940
3963
  --wds-tabs-item-gap-small: 6px;
3964
+ --wds-tabs-item-gap-small-medium: 6px;
3941
3965
  --wds-tabs-label-fill: #A8A6A5;
3942
3966
  --wds-tabs-label-fill-active: #FFFFFF;
3943
3967
  --wds-tabs-label-font-size-medium: 14px;
3944
3968
  --wds-tabs-label-font-size-small: 12px;
3969
+ --wds-tabs-label-font-size-small-medium: 14px;
3945
3970
  --wds-tabs-label-font-weight: 500;
3946
3971
  --wds-tabs-label-font-weight-active: 600;
3947
3972
  --wds-tabs-label-line-height-medium: 18px;
3948
3973
  --wds-tabs-label-line-height-small: 16px;
3974
+ --wds-tabs-label-line-height-small-medium: 18px;
3949
3975
  --wds-tabs-padding-horizontal-medium: 16px;
3950
3976
  --wds-tabs-padding-horizontal-small: 8px;
3977
+ --wds-tabs-padding-horizontal-small-medium: 12px;
3951
3978
  --wds-tabs-padding-vertical-medium: 7px;
3952
3979
  --wds-tabs-padding-vertical-small: 4px;
3980
+ --wds-tabs-padding-vertical-small-medium: 6px;
3953
3981
  --wds-tabs-selection-border: rgba(255, 255, 255, 0);
3954
3982
  --wds-tabs-selection-fill-primary: rgba(255, 255, 255, 0);
3955
3983
  --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 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;
@@ -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.208.0",
3
+ "version": "1.209.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": "32f58ef6455a78f154f9ca6bc551226088fc2729f507f5515291be63"
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);