@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/all.st.css CHANGED
@@ -846,10 +846,13 @@
846
846
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
847
847
  @property st-global(--wds-counter-badge-border-radius-medium);
848
848
  @property st-global(--wds-counter-badge-border-radius-small);
849
+ @property st-global(--wds-counter-badge-font-size-tiny);
849
850
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
850
851
  @property st-global(--wds-counter-badge-padding-horizontal-small);
852
+ @property st-global(--wds-counter-badge-padding-horizontal-tiny);
851
853
  @property st-global(--wds-counter-badge-size-medium);
852
854
  @property st-global(--wds-counter-badge-size-small);
855
+ @property st-global(--wds-counter-badge-size-tiny);
853
856
  @property st-global(--wds-custom-modal-border-radius);
854
857
  @property st-global(--wds-custom-modal-content-padding-horizontal);
855
858
  @property st-global(--wds-custom-modal-content-padding-vertical);
@@ -971,6 +974,12 @@
971
974
  @property st-global(--wds-form-field-label-gap-tiny);
972
975
  @property st-global(--wds-form-field-label-line-height-small);
973
976
  @property st-global(--wds-form-field-label-line-height-tiny);
977
+ @property st-global(--wds-google-preview-favicon-background-fill);
978
+ @property st-global(--wds-google-preview-favicon-border-fill);
979
+ @property st-global(--wds-google-preview-site-name-fill);
980
+ @property st-global(--wds-google-preview-surface-fill);
981
+ @property st-global(--wds-google-preview-text-fill);
982
+ @property st-global(--wds-google-preview-title-fill);
974
983
  @property st-global(--wds-icon-button-color-border-dark-secondary);
975
984
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
976
985
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1810,18 +1819,23 @@
1810
1819
  @property st-global(--wds-tabs-item-fill-hover);
1811
1820
  @property st-global(--wds-tabs-item-gap-medium);
1812
1821
  @property st-global(--wds-tabs-item-gap-small);
1822
+ @property st-global(--wds-tabs-item-gap-small-medium);
1813
1823
  @property st-global(--wds-tabs-label-fill);
1814
1824
  @property st-global(--wds-tabs-label-fill-active);
1815
1825
  @property st-global(--wds-tabs-label-font-size-medium);
1816
1826
  @property st-global(--wds-tabs-label-font-size-small);
1827
+ @property st-global(--wds-tabs-label-font-size-small-medium);
1817
1828
  @property st-global(--wds-tabs-label-font-weight);
1818
1829
  @property st-global(--wds-tabs-label-font-weight-active);
1819
1830
  @property st-global(--wds-tabs-label-line-height-medium);
1820
1831
  @property st-global(--wds-tabs-label-line-height-small);
1832
+ @property st-global(--wds-tabs-label-line-height-small-medium);
1821
1833
  @property st-global(--wds-tabs-padding-horizontal-medium);
1822
1834
  @property st-global(--wds-tabs-padding-horizontal-small);
1835
+ @property st-global(--wds-tabs-padding-horizontal-small-medium);
1823
1836
  @property st-global(--wds-tabs-padding-vertical-medium);
1824
1837
  @property st-global(--wds-tabs-padding-vertical-small);
1838
+ @property st-global(--wds-tabs-padding-vertical-small-medium);
1825
1839
  @property st-global(--wds-tabs-selection-border);
1826
1840
  @property st-global(--wds-tabs-selection-fill-primary);
1827
1841
  @property st-global(--wds-tabs-selection-fill-secondary);
@@ -2956,10 +2970,13 @@
2956
2970
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
2957
2971
  --wds-counter-badge-border-radius-medium: 1000px;
2958
2972
  --wds-counter-badge-border-radius-small: 1000px;
2973
+ --wds-counter-badge-font-size-tiny: 10px;
2959
2974
  --wds-counter-badge-padding-horizontal-medium: 8px;
2960
2975
  --wds-counter-badge-padding-horizontal-small: 6px;
2976
+ --wds-counter-badge-padding-horizontal-tiny: 4px;
2961
2977
  --wds-counter-badge-size-medium: 24px;
2962
2978
  --wds-counter-badge-size-small: 18px;
2979
+ --wds-counter-badge-size-tiny: 14px;
2963
2980
  --wds-custom-modal-border-radius: 12px;
2964
2981
  --wds-custom-modal-content-padding-horizontal: 24px;
2965
2982
  --wds-custom-modal-content-padding-vertical: 24px;
@@ -3081,6 +3098,12 @@
3081
3098
  --wds-form-field-label-gap-tiny: 6px;
3082
3099
  --wds-form-field-label-line-height-small: 16px;
3083
3100
  --wds-form-field-label-line-height-tiny: 12px;
3101
+ --wds-google-preview-favicon-background-fill: #F1F3F4;
3102
+ --wds-google-preview-favicon-border-fill: #E6E6E6;
3103
+ --wds-google-preview-site-name-fill: #202124;
3104
+ --wds-google-preview-surface-fill: #ffffff;
3105
+ --wds-google-preview-text-fill: #4D5156;
3106
+ --wds-google-preview-title-fill: #260AA8;
3084
3107
  --wds-icon-button-color-border-dark-secondary: #767574;
3085
3108
  --wds-icon-button-color-border-dark-secondary-active: #dedede;
3086
3109
  --wds-icon-button-color-border-dark-secondary-disabled: #f0efef;
@@ -3313,19 +3336,19 @@
3313
3336
  --wds-list-item-action-suffix-fill-active: #151414;
3314
3337
  --wds-list-item-action-title-font-weight: 500;
3315
3338
  --wds-list-item-action-title-font-weight-active: 600;
3316
- --wds-list-item-section-divider-padding-bottom: 0px;
3317
- --wds-list-item-section-divider-padding-horizontal: 0px;
3339
+ --wds-list-item-section-divider-padding-bottom: 8px;
3340
+ --wds-list-item-section-divider-padding-horizontal: 8px;
3318
3341
  --wds-list-item-section-divider-padding-top: 8px;
3319
- --wds-list-item-section-fill: #ffffff;
3320
- --wds-list-item-section-fill-neutral: #ffffff;
3321
- --wds-list-item-section-font-line-height: 18px;
3322
- --wds-list-item-section-font-size: 14px;
3342
+ --wds-list-item-section-fill: rgba(82, 81, 80, 0);
3343
+ --wds-list-item-section-fill-neutral: rgba(82, 81, 80, 0);
3344
+ --wds-list-item-section-font-line-height: 16px;
3345
+ --wds-list-item-section-font-size: 12px;
3323
3346
  --wds-list-item-section-font-weight: 600;
3324
- --wds-list-item-section-font-weight-neutral: 400;
3325
- --wds-list-item-section-padding-bottom: 12px;
3326
- --wds-list-item-section-padding-horizontal: 8px;
3347
+ --wds-list-item-section-font-weight-neutral: 600;
3348
+ --wds-list-item-section-padding-bottom: 8px;
3349
+ --wds-list-item-section-padding-horizontal: 12px;
3327
3350
  --wds-list-item-section-padding-top: 8px;
3328
- --wds-list-item-section-padding-vertical-neutral: 10px;
3351
+ --wds-list-item-section-padding-vertical-neutral: 8px;
3329
3352
  --wds-list-item-section-title-label-fill: #767574;
3330
3353
  --wds-list-item-section-title-label-fill-neutral: #a8a6a5;
3331
3354
  --wds-list-item-select-active-fill: #f0efef;
@@ -3861,8 +3884,8 @@
3861
3884
  --wds-space-1700: 68px;
3862
3885
  --wds-space-2400: 96px;
3863
3886
  --wds-space-mobile-viewport-spacing: 32px;
3864
- --wds-space-padding-horizontal-large: 16px;
3865
- --wds-space-padding-horizontal-medium: 12px;
3887
+ --wds-space-padding-horizontal-large: 24px;
3888
+ --wds-space-padding-horizontal-medium: 20px;
3866
3889
  --wds-space-padding-horizontal-small: 16px;
3867
3890
  --wds-space-padding-horizontal-tiny: 12px;
3868
3891
  --wds-space-padding-horizontal-x-tiny: 8px;
@@ -3916,22 +3939,27 @@
3916
3939
  --wds-tabs-border-radius: 6px;
3917
3940
  --wds-tabs-container-padding-horizontal: 16px;
3918
3941
  --wds-tabs-gap-horizontal: 4px;
3919
- --wds-tabs-item-fill-active: #f0efef;
3920
- --wds-tabs-item-fill-hover: #f8f6f6;
3942
+ --wds-tabs-item-fill-active: #e8e7e7;
3943
+ --wds-tabs-item-fill-hover: #f0efef;
3921
3944
  --wds-tabs-item-gap-medium: 8px;
3922
3945
  --wds-tabs-item-gap-small: 6px;
3946
+ --wds-tabs-item-gap-small-medium: 6px;
3923
3947
  --wds-tabs-label-fill: #525150;
3924
3948
  --wds-tabs-label-fill-active: #151414;
3925
- --wds-tabs-label-font-size-medium: 16px;
3949
+ --wds-tabs-label-font-size-medium: 14px;
3926
3950
  --wds-tabs-label-font-size-small: 14px;
3951
+ --wds-tabs-label-font-size-small-medium: 14px;
3927
3952
  --wds-tabs-label-font-weight: 500;
3928
- --wds-tabs-label-font-weight-active: 600;
3929
- --wds-tabs-label-line-height-medium: 24px;
3953
+ --wds-tabs-label-font-weight-active: 500;
3954
+ --wds-tabs-label-line-height-medium: 18px;
3930
3955
  --wds-tabs-label-line-height-small: 18px;
3956
+ --wds-tabs-label-line-height-small-medium: 18px;
3931
3957
  --wds-tabs-padding-horizontal-medium: 16px;
3932
3958
  --wds-tabs-padding-horizontal-small: 8px;
3959
+ --wds-tabs-padding-horizontal-small-medium: 12px;
3933
3960
  --wds-tabs-padding-vertical-medium: 7px;
3934
3961
  --wds-tabs-padding-vertical-small: 4px;
3962
+ --wds-tabs-padding-vertical-small-medium: 6px;
3935
3963
  --wds-tabs-selection-border: rgba(19, 23, 32, 0);
3936
3964
  --wds-tabs-selection-fill-primary: rgba(19, 23, 32, 0);
3937
3965
  --wds-tabs-selection-fill-secondary: rgba(19, 23, 32, 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;
@@ -1978,19 +2001,19 @@
1978
2001
  --wds-list-item-action-suffix-fill-active: #151414;
1979
2002
  --wds-list-item-action-title-font-weight: 500;
1980
2003
  --wds-list-item-action-title-font-weight-active: 600;
1981
- --wds-list-item-section-divider-padding-bottom: 0px;
1982
- --wds-list-item-section-divider-padding-horizontal: 0px;
2004
+ --wds-list-item-section-divider-padding-bottom: 8px;
2005
+ --wds-list-item-section-divider-padding-horizontal: 8px;
1983
2006
  --wds-list-item-section-divider-padding-top: 8px;
1984
- --wds-list-item-section-fill: #ffffff;
1985
- --wds-list-item-section-fill-neutral: #ffffff;
1986
- --wds-list-item-section-font-line-height: 18px;
1987
- --wds-list-item-section-font-size: 14px;
2007
+ --wds-list-item-section-fill: rgba(82, 81, 80, 0);
2008
+ --wds-list-item-section-fill-neutral: rgba(82, 81, 80, 0);
2009
+ --wds-list-item-section-font-line-height: 16px;
2010
+ --wds-list-item-section-font-size: 12px;
1988
2011
  --wds-list-item-section-font-weight: 600;
1989
- --wds-list-item-section-font-weight-neutral: 400;
1990
- --wds-list-item-section-padding-bottom: 12px;
1991
- --wds-list-item-section-padding-horizontal: 8px;
2012
+ --wds-list-item-section-font-weight-neutral: 600;
2013
+ --wds-list-item-section-padding-bottom: 8px;
2014
+ --wds-list-item-section-padding-horizontal: 12px;
1992
2015
  --wds-list-item-section-padding-top: 8px;
1993
- --wds-list-item-section-padding-vertical-neutral: 10px;
2016
+ --wds-list-item-section-padding-vertical-neutral: 8px;
1994
2017
  --wds-list-item-section-title-label-fill: #767574;
1995
2018
  --wds-list-item-section-title-label-fill-neutral: #a8a6a5;
1996
2019
  --wds-list-item-select-active-fill: #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/semantic.st.css CHANGED
@@ -995,8 +995,8 @@
995
995
  --wds-shadow-y-secondary-toggle-button: 1.2px;
996
996
  --wds-shadow-y-tertiary-toggle-button: 0.4px;
997
997
  --wds-space-mobile-viewport-spacing: 32px;
998
- --wds-space-padding-horizontal-large: 16px;
999
- --wds-space-padding-horizontal-medium: 12px;
998
+ --wds-space-padding-horizontal-large: 24px;
999
+ --wds-space-padding-horizontal-medium: 20px;
1000
1000
  --wds-space-padding-horizontal-small: 16px;
1001
1001
  --wds-space-padding-horizontal-tiny: 12px;
1002
1002
  --wds-space-padding-horizontal-x-tiny: 8px;
package/odeditor-dark/all.css CHANGED
@@ -101,7 +101,7 @@
101
101
  --wds-font-family-display: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
102
102
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
103
103
  --wds-color-text-stage-section: #6f56f9;
104
- --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.92);
104
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.96);
105
105
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
106
106
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
107
107
  --wds-color-fill-stage-section-secondary: #d9d2ff;
@@ -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;
@@ -261,7 +269,7 @@
261
269
  --wds-color-green-100: #53DA98;
262
270
  --wds-color-green-50: #A3E5C5;
263
271
  --wds-color-green-0: #D6ECE1;
264
- --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.92);
272
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.96);
265
273
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
266
274
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
267
275
  --wds-color-fill-stage-section-secondary: #d9d2ff;
@@ -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);
@@ -2801,7 +2815,7 @@
2801
2815
  --wds-color-fill-surface-modal-backdrop: rgba(0, 0, 0, .2);
2802
2816
  --wds-color-fill-surface-neutral: #2D2D2E;
2803
2817
  --wds-color-fill-surface-overlay: #212122;
2804
- --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.92);
2818
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.96);
2805
2819
  --wds-color-fill-surface-overlay-dark: #FFFFFF;
2806
2820
  --wds-color-fill-surface-premium: #111214;
2807
2821
  --wds-color-fill-surface-raised: #212122;
@@ -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;
@@ -3454,7 +3477,7 @@
3454
3477
  --wds-popover-border-fill: #3A3A3B;
3455
3478
  --wds-popover-border-radius: 12px;
3456
3479
  --wds-popover-border-width: 1px;
3457
- --wds-popover-fill: rgba(33, 33, 34, 0.92);
3480
+ --wds-popover-fill: rgba(33, 33, 34, 0.96);
3458
3481
  --wds-popover-menu-border-radius: 12px;
3459
3482
  --wds-popover-menu-paddings-horizontal: 8px;
3460
3483
  --wds-popover-menu-paddings-vertical: 8px;
@@ -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);