@wix/design-system-tokens 1.217.0 → 1.219.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 (27) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/all.css +16 -0
  3. package/all.scss +16 -0
  4. package/all.st.css +32 -0
  5. package/component.st.css +30 -0
  6. package/odeditor/all.css +17 -1
  7. package/odeditor/all.scss +17 -1
  8. package/odeditor/all.st.css +33 -1
  9. package/odeditor/component.st.css +31 -1
  10. package/odeditor/semantic.st.css +2 -0
  11. package/odeditor-dark/all.css +22 -6
  12. package/odeditor-dark/all.scss +22 -6
  13. package/odeditor-dark/all.st.css +38 -6
  14. package/odeditor-dark/component.st.css +36 -6
  15. package/odeditor-dark/semantic.st.css +2 -0
  16. package/package.json +2 -2
  17. package/semantic.st.css +2 -0
  18. package/studio/all.css +16 -0
  19. package/studio/all.scss +16 -0
  20. package/studio/all.st.css +32 -0
  21. package/studio/component.st.css +30 -0
  22. package/studio/semantic.st.css +2 -0
  23. package/wixel/all.css +16 -0
  24. package/wixel/all.scss +16 -0
  25. package/wixel/all.st.css +32 -0
  26. package/wixel/component.st.css +30 -0
  27. package/wixel/semantic.st.css +2 -0
package/odeditor-dark/component.st.css CHANGED
@@ -65,6 +65,7 @@
65
65
  @property st-global(--wds-announcement-modal-top-controls-gap);
66
66
  @property st-global(--wds-announcement-modal-top-controls-padding-end);
67
67
  @property st-global(--wds-announcement-modal-top-controls-padding-top);
68
+ @property st-global(--wds-avatar-color-7-fill);
68
69
  @property st-global(--wds-avatar-group-counter-background-blur);
69
70
  @property st-global(--wds-avatar-group-counter-border-fill);
70
71
  @property st-global(--wds-avatar-group-counter-border-width);
@@ -74,6 +75,7 @@
74
75
  @property st-global(--wds-avatar-group-counter-fill-hover);
75
76
  @property st-global(--wds-avatar-group-gap-condensed);
76
77
  @property st-global(--wds-avatar-group-gap-default);
78
+ @property st-global(--wds-avatar-size-tiny);
77
79
  @property st-global(--wds-avatar-text-fill);
78
80
  @property st-global(--wds-badge-border-radius-medium);
79
81
  @property st-global(--wds-badge-border-radius-small);
@@ -280,6 +282,7 @@
280
282
  @property st-global(--wds-card-header-divider-width);
281
283
  @property st-global(--wds-card-header-padding-horizontal);
282
284
  @property st-global(--wds-card-header-padding-vertical);
285
+ @property st-global(--wds-card-header-suffix-align);
283
286
  @property st-global(--wds-card-header-title-subtitle-gap);
284
287
  @property st-global(--wds-card-shadow);
285
288
  @property st-global(--wds-card-subtitle-color);
@@ -385,6 +388,9 @@
385
388
  @property st-global(--wds-counter-badge-size-small);
386
389
  @property st-global(--wds-counter-badge-size-tiny);
387
390
  @property st-global(--wds-custom-modal-border-radius);
391
+ @property st-global(--wds-custom-modal-close-button-fill);
392
+ @property st-global(--wds-custom-modal-close-button-icon-size);
393
+ @property st-global(--wds-custom-modal-close-button-size);
388
394
  @property st-global(--wds-custom-modal-content-padding-horizontal);
389
395
  @property st-global(--wds-custom-modal-content-padding-vertical);
390
396
  @property st-global(--wds-custom-modal-footer-padding-horizontal);
@@ -1159,6 +1165,15 @@
1159
1165
  @property st-global(--wds-social-post-preview-content-padding-vertical);
1160
1166
  @property st-global(--wds-social-preview-content-padding-horizontal);
1161
1167
  @property st-global(--wds-social-preview-content-padding-vertical);
1168
+ @property st-global(--wds-statistics-widget-description-font-line-height);
1169
+ @property st-global(--wds-statistics-widget-description-font-size);
1170
+ @property st-global(--wds-statistics-widget-description-info-gap);
1171
+ @property st-global(--wds-statistics-widget-trend-space-top);
1172
+ @property st-global(--wds-statistics-widget-value-font-family-tiny);
1173
+ @property st-global(--wds-statistics-widget-value-font-letter-spacing);
1174
+ @property st-global(--wds-statistics-widget-value-font-line-height-tiny);
1175
+ @property st-global(--wds-statistics-widget-value-font-size-tiny);
1176
+ @property st-global(--wds-statistics-widget-value-font-weight-tiny);
1162
1177
  @property st-global(--wds-status-toast-info-icon-fill);
1163
1178
  @property st-global(--wds-status-toast-text-font-line-height);
1164
1179
  @property st-global(--wds-status-toast-text-font-size);
@@ -1587,6 +1602,7 @@
1587
1602
  --wds-announcement-modal-top-controls-gap: 4px;
1588
1603
  --wds-announcement-modal-top-controls-padding-end: 12px;
1589
1604
  --wds-announcement-modal-top-controls-padding-top: 12px;
1605
+ --wds-avatar-color-7-fill: #BCD7C3;
1590
1606
  --wds-avatar-group-counter-background-blur: 4px;
1591
1607
  --wds-avatar-group-counter-border-fill: #212122;
1592
1608
  --wds-avatar-group-counter-border-width: 1px;
@@ -1596,6 +1612,7 @@
1596
1612
  --wds-avatar-group-counter-fill-hover: #454544;
1597
1613
  --wds-avatar-group-gap-condensed: -2px;
1598
1614
  --wds-avatar-group-gap-default: 4px;
1615
+ --wds-avatar-size-tiny: 20px;
1599
1616
  --wds-avatar-text-fill: #212122;
1600
1617
  --wds-badge-border-radius-medium: 4px;
1601
1618
  --wds-badge-border-radius-small: 4px;
@@ -1775,9 +1792,9 @@
1775
1792
  --wds-card-border-radius: 12px;
1776
1793
  --wds-card-content-padding-large: 12px;
1777
1794
  --wds-card-content-padding-medium: 12px;
1778
- --wds-card-content-padding-medium-bottom: 12px;
1779
- --wds-card-content-padding-medium-horizontal: 12px;
1780
- --wds-card-content-padding-medium-top: 12px;
1795
+ --wds-card-content-padding-medium-bottom: 24px;
1796
+ --wds-card-content-padding-medium-horizontal: 24px;
1797
+ --wds-card-content-padding-medium-top: 4px;
1781
1798
  --wds-card-content-paddings-horizontal: 12px;
1782
1799
  --wds-card-content-paddings-vertical: 12px;
1783
1800
  --wds-card-divider-opacity: 0;
@@ -1802,11 +1819,12 @@
1802
1819
  --wds-card-header-divider-width: 0px;
1803
1820
  --wds-card-header-padding-horizontal: 24px;
1804
1821
  --wds-card-header-padding-vertical: 16px;
1805
- --wds-card-header-title-subtitle-gap: 0px;
1822
+ --wds-card-header-suffix-align: flex-start;
1823
+ --wds-card-header-title-subtitle-gap: 4px;
1806
1824
  --wds-card-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
1807
1825
  --wds-card-subtitle-color: #D4D3D2;
1808
- --wds-card-subtitle-font-size: 16px;
1809
- --wds-card-subtitle-line-height: 24px;
1826
+ --wds-card-subtitle-font-size: 12px;
1827
+ --wds-card-subtitle-line-height: 16px;
1810
1828
  --wds-card-tab-padding-horizontal-medium: 20px;
1811
1829
  --wds-card-tab-padding-horizontal-small: 20px;
1812
1830
  --wds-card-tab-padding-vertical-medium: 16px;
@@ -1907,6 +1925,9 @@
1907
1925
  --wds-counter-badge-size-small: 18px;
1908
1926
  --wds-counter-badge-size-tiny: 14px;
1909
1927
  --wds-custom-modal-border-radius: 12px;
1928
+ --wds-custom-modal-close-button-fill: #3A3A3B;
1929
+ --wds-custom-modal-close-button-icon-size: 8px;
1930
+ --wds-custom-modal-close-button-size: 24px;
1910
1931
  --wds-custom-modal-content-padding-horizontal: 24px;
1911
1932
  --wds-custom-modal-content-padding-vertical: 24px;
1912
1933
  --wds-custom-modal-footer-padding-horizontal: 24px;
@@ -2681,6 +2702,15 @@
2681
2702
  --wds-social-post-preview-content-padding-vertical: 12px;
2682
2703
  --wds-social-preview-content-padding-horizontal: 12px;
2683
2704
  --wds-social-preview-content-padding-vertical: 8px;
2705
+ --wds-statistics-widget-description-font-line-height: 16px;
2706
+ --wds-statistics-widget-description-font-size: 12px;
2707
+ --wds-statistics-widget-description-info-gap: 2px;
2708
+ --wds-statistics-widget-trend-space-top: 0px;
2709
+ --wds-statistics-widget-value-font-family-tiny: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2710
+ --wds-statistics-widget-value-font-letter-spacing: -0.5px;
2711
+ --wds-statistics-widget-value-font-line-height-tiny: 30px;
2712
+ --wds-statistics-widget-value-font-size-tiny: 24px;
2713
+ --wds-statistics-widget-value-font-weight-tiny: 500;
2684
2714
  --wds-status-toast-info-icon-fill: #FFFFFF;
2685
2715
  --wds-status-toast-text-font-line-height: 18px;
2686
2716
  --wds-status-toast-text-font-size: 14px;
package/odeditor-dark/semantic.st.css CHANGED
@@ -296,6 +296,7 @@
296
296
  @property st-global(--wds-color-fill-surface-overlay-dark);
297
297
  @property st-global(--wds-color-fill-surface-premium);
298
298
  @property st-global(--wds-color-fill-surface-raised);
299
+ @property st-global(--wds-color-fill-surface-stage);
299
300
  @property st-global(--wds-color-fill-surface-standard);
300
301
  @property st-global(--wds-color-fill-surface-success);
301
302
  @property st-global(--wds-color-fill-surface-sunken);
@@ -803,6 +804,7 @@
803
804
  --wds-color-fill-surface-overlay-dark: #FFFFFF;
804
805
  --wds-color-fill-surface-premium: #111214;
805
806
  --wds-color-fill-surface-raised: #212122;
807
+ --wds-color-fill-surface-stage: #2D2D2E;
806
808
  --wds-color-fill-surface-standard: #2D354E;
807
809
  --wds-color-fill-surface-success: #264B43;
808
810
  --wds-color-fill-surface-sunken: #2D2D2E;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.217.0",
3
+ "version": "1.219.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -36,5 +36,5 @@
36
36
  "author": "augustinasv@wix.com",
37
37
  "description": "Design system tokens",
38
38
  "packageManager": "yarn@3.5.0",
39
- "falconPackageHash": "d7c060b798874f981d10eb34f17349add72910bd28be964f6d582d08"
39
+ "falconPackageHash": "08e6285c8311e46d3feefaea473b36eddd6b9e8102bcde9355fcd7b5"
40
40
  }
package/semantic.st.css CHANGED
@@ -296,6 +296,7 @@
296
296
  @property st-global(--wds-color-fill-surface-overlay-dark);
297
297
  @property st-global(--wds-color-fill-surface-premium);
298
298
  @property st-global(--wds-color-fill-surface-raised);
299
+ @property st-global(--wds-color-fill-surface-stage);
299
300
  @property st-global(--wds-color-fill-surface-standard);
300
301
  @property st-global(--wds-color-fill-surface-success);
301
302
  @property st-global(--wds-color-fill-surface-sunken);
@@ -795,6 +796,7 @@
795
796
  --wds-color-fill-surface-overlay-dark: #000624;
796
797
  --wds-color-fill-surface-premium: #f1e0f9;
797
798
  --wds-color-fill-surface-raised: #ffffff;
799
+ --wds-color-fill-surface-stage: #eceff3;
798
800
  --wds-color-fill-surface-standard: #e7f0ff;
799
801
  --wds-color-fill-surface-success: #e1f4eb;
800
802
  --wds-color-fill-surface-sunken: #eceff3;
package/studio/all.css CHANGED
@@ -330,6 +330,8 @@
330
330
  --wds-swatches-swatch-active-border-radius-small: 5px;
331
331
  --wds-swatches-swatch-active-border-radius-medium: 7px;
332
332
  --wds-status-toast-width: 600px;
333
+ --wds-statistics-widget-trend-space-top: 5px;
334
+ --wds-statistics-widget-description-info-gap: 6px;
333
335
  --wds-slider-track-size-transparent: 2px;
334
336
  --wds-slider-track-size: 2px;
335
337
  --wds-slider-slider-knob-size-transparent: 16px;
@@ -401,6 +403,7 @@
401
403
  --wds-google-preview-favicon-border-fill: #E6E6E6;
402
404
  --wds-google-preview-favicon-background-fill: #F1F3F4;
403
405
  --wds-editable-title-marker-line-style: dashed;
406
+ --wds-custom-modal-close-button-fill: transparent;
404
407
  --wds-counter-badge-padding-horizontal-tiny: 4px;
405
408
  --wds-counter-badge-font-size-tiny: 10px;
406
409
  --wds-composer-sidebar-end-max-width: 240px;
@@ -408,6 +411,7 @@
408
411
  --wds-color-picker-width: 236px;
409
412
  --wds-circular-progress-bar-label-font-line-height: 18px;
410
413
  --wds-circular-progress-bar-border-width: 4px;
414
+ --wds-card-header-suffix-align: center;
411
415
  --wds-card-divider-opacity: 1;
412
416
  --wds-card-base-shadow: none;
413
417
  --wds-button-icon-offset-tiny: 12px;
@@ -418,6 +422,7 @@
418
422
  --wds-breadcrumbs-height-medium: 30px;
419
423
  --wds-breadcrumbs-height-large: 36px;
420
424
  --wds-avatar-group-gap-condensed: -2px;
425
+ --wds-avatar-size-tiny: 18px;
421
426
  --wds-announcement-modal-help-button-fill: transparent;
422
427
  --wds-announcement-modal-footnote-content-alignment: center;
423
428
  --wds-announcement-modal-close-button-fill: transparent;
@@ -635,6 +640,7 @@
635
640
  --wds-color-fill-surface-sunken: var(--wds-color-black-750);
636
641
  --wds-color-fill-surface-success: var(--wds-color-green-500);
637
642
  --wds-color-fill-surface-standard: var(--wds-color-blue-400);
643
+ --wds-color-fill-surface-stage: var(--wds-color-black-750);
638
644
  --wds-color-fill-surface-raised: var(--wds-color-white);
639
645
  --wds-color-fill-surface-premium: var(--wds-color-purple-500);
640
646
  --wds-color-fill-surface-overlay-dark: var(--wds-color-black-100);
@@ -1033,6 +1039,9 @@
1033
1039
  --wds-stepper-prefix-size-number: var(--wds-space-400);
1034
1040
  --wds-stepper-prefix-size-circle: var(--wds-space-700);
1035
1041
  --wds-status-toast-vertical-padding: var(--wds-space-150);
1042
+ --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-bold);
1043
+ --wds-statistics-widget-value-font-letter-spacing: var(--wds-font-letter-spacing-0);
1044
+ --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-default);
1036
1045
  --wds-social-preview-content-padding-vertical: var(--wds-space-200);
1037
1046
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
1038
1047
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
@@ -1457,6 +1466,8 @@
1457
1466
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1458
1467
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1459
1468
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1469
+ --wds-custom-modal-close-button-size: var(--wds-space-700);
1470
+ --wds-custom-modal-close-button-icon-size: var(--wds-space-300);
1460
1471
  --wds-custom-modal-border-radius: var(--wds-border-radius-200);
1461
1472
  --wds-counter-badge-size-tiny: var(--wds-space-350);
1462
1473
  --wds-counter-badge-size-small: var(--wds-space-475);
@@ -1609,6 +1620,7 @@
1609
1620
  --wds-badge-border-radius-small: var(--wds-border-radius-100);
1610
1621
  --wds-badge-border-radius-medium: var(--wds-border-radius-100);
1611
1622
  --wds-avatar-group-gap-default: var(--wds-space-100);
1623
+ --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1612
1624
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-400);
1613
1625
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
1614
1626
  --wds-announcement-modal-top-controls-gap: var(--wds-space-50);
@@ -1788,6 +1800,8 @@
1788
1800
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1789
1801
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1790
1802
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1803
+ --wds-statistics-widget-value-font-size-tiny: var(--wds-font-size-body-medium);
1804
+ --wds-statistics-widget-description-font-size: var(--wds-font-size-body-small);
1791
1805
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1792
1806
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1793
1807
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
@@ -2234,6 +2248,8 @@
2234
2248
  --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-tiny);
2235
2249
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2236
2250
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2251
+ --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-body-medium);
2252
+ --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-small);
2237
2253
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2238
2254
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2239
2255
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
package/studio/all.scss CHANGED
@@ -15,6 +15,8 @@
15
15
  --wds-swatches-swatch-active-border-radius-small: 5px;
16
16
  --wds-swatches-swatch-active-border-radius-medium: 7px;
17
17
  --wds-status-toast-width: 600px;
18
+ --wds-statistics-widget-trend-space-top: 5px;
19
+ --wds-statistics-widget-description-info-gap: 6px;
18
20
  --wds-space-2400: 96px;
19
21
  --wds-space-1700: 68px;
20
22
  --wds-space-1600: 64px;
@@ -173,6 +175,7 @@
173
175
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
174
176
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
175
177
  --wds-editable-title-marker-line-style: dashed;
178
+ --wds-custom-modal-close-button-fill: transparent;
176
179
  --wds-counter-badge-padding-horizontal-tiny: 4px;
177
180
  --wds-counter-badge-font-size-tiny: 10px;
178
181
  --wds-composer-sidebar-end-max-width: 240px;
@@ -381,6 +384,7 @@
381
384
  --wds-color-black-100: #131720;
382
385
  --wds-circular-progress-bar-label-font-line-height: 18px;
383
386
  --wds-circular-progress-bar-border-width: 4px;
387
+ --wds-card-header-suffix-align: center;
384
388
  --wds-card-divider-opacity: 1;
385
389
  --wds-card-base-shadow: none;
386
390
  --wds-button-icon-offset-tiny: 12px;
@@ -417,6 +421,7 @@
417
421
  --wds-background-blur-100: 0px;
418
422
  --wds-background-blur-50: 0px;
419
423
  --wds-background-blur-0: 0px;
424
+ --wds-avatar-size-tiny: 18px;
420
425
  --wds-avatar-group-gap-condensed: -2px;
421
426
  --wds-announcement-modal-help-button-fill: transparent;
422
427
  --wds-announcement-modal-footnote-content-alignment: center;
@@ -623,6 +628,9 @@
623
628
  --wds-stepper-prefix-size-number: var(--wds-space-400);
624
629
  --wds-stepper-prefix-size-circle: var(--wds-space-700);
625
630
  --wds-status-toast-vertical-padding: var(--wds-space-150);
631
+ --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-bold);
632
+ --wds-statistics-widget-value-font-letter-spacing: var(--wds-font-letter-spacing-0);
633
+ --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-default);
626
634
  --wds-space-viewport-spacing: var(--wds-space-1200);
627
635
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-100);
628
636
  --wds-space-padding-vertical-x-tiny: var(--wds-space-200);
@@ -1179,6 +1187,8 @@
1179
1187
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1180
1188
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1181
1189
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1190
+ --wds-custom-modal-close-button-size: var(--wds-space-700);
1191
+ --wds-custom-modal-close-button-icon-size: var(--wds-space-300);
1182
1192
  --wds-custom-modal-border-radius: var(--wds-border-radius-200);
1183
1193
  --wds-counter-badge-size-tiny: var(--wds-space-350);
1184
1194
  --wds-counter-badge-size-small: var(--wds-space-475);
@@ -1271,6 +1281,7 @@
1271
1281
  --wds-color-fill-surface-sunken: var(--wds-color-black-750);
1272
1282
  --wds-color-fill-surface-success: var(--wds-color-green-500);
1273
1283
  --wds-color-fill-surface-standard: var(--wds-color-blue-400);
1284
+ --wds-color-fill-surface-stage: var(--wds-color-black-750);
1274
1285
  --wds-color-fill-surface-raised: var(--wds-color-white);
1275
1286
  --wds-color-fill-surface-premium: var(--wds-color-purple-500);
1276
1287
  --wds-color-fill-surface-overlay-dark: var(--wds-color-black-100);
@@ -1609,6 +1620,7 @@
1609
1620
  --wds-background-blur-surface-overlay: var(--wds-background-blur-0);
1610
1621
  --wds-background-blur-modal: var(--wds-background-blur-0);
1611
1622
  --wds-avatar-group-gap-default: var(--wds-space-100);
1623
+ --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1612
1624
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-400);
1613
1625
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
1614
1626
  --wds-announcement-modal-top-controls-gap: var(--wds-space-50);
@@ -1772,6 +1784,8 @@
1772
1784
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1773
1785
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1774
1786
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1787
+ --wds-statistics-widget-value-font-size-tiny: var(--wds-font-size-body-medium);
1788
+ --wds-statistics-widget-description-font-size: var(--wds-font-size-body-small);
1775
1789
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1776
1790
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1777
1791
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
@@ -2234,6 +2248,8 @@
2234
2248
  --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-tiny);
2235
2249
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2236
2250
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2251
+ --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-body-medium);
2252
+ --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-small);
2237
2253
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2238
2254
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2239
2255
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
package/studio/all.st.css CHANGED
@@ -65,8 +65,10 @@
65
65
  @property st-global(--wds-announcement-modal-top-controls-gap);
66
66
  @property st-global(--wds-announcement-modal-top-controls-padding-end);
67
67
  @property st-global(--wds-announcement-modal-top-controls-padding-top);
68
+ @property st-global(--wds-avatar-color-7-fill);
68
69
  @property st-global(--wds-avatar-group-gap-condensed);
69
70
  @property st-global(--wds-avatar-group-gap-default);
71
+ @property st-global(--wds-avatar-size-tiny);
70
72
  @property st-global(--wds-avatar-text-fill);
71
73
  @property st-global(--wds-background-blur-0);
72
74
  @property st-global(--wds-background-blur-50);
@@ -314,6 +316,7 @@
314
316
  @property st-global(--wds-card-header-divider-width);
315
317
  @property st-global(--wds-card-header-padding-horizontal);
316
318
  @property st-global(--wds-card-header-padding-vertical);
319
+ @property st-global(--wds-card-header-suffix-align);
317
320
  @property st-global(--wds-card-header-title-subtitle-gap);
318
321
  @property st-global(--wds-card-shadow);
319
322
  @property st-global(--wds-card-subtitle-color);
@@ -716,6 +719,7 @@
716
719
  @property st-global(--wds-color-fill-surface-overlay-dark);
717
720
  @property st-global(--wds-color-fill-surface-premium);
718
721
  @property st-global(--wds-color-fill-surface-raised);
722
+ @property st-global(--wds-color-fill-surface-stage);
719
723
  @property st-global(--wds-color-fill-surface-standard);
720
724
  @property st-global(--wds-color-fill-surface-success);
721
725
  @property st-global(--wds-color-fill-surface-sunken);
@@ -888,6 +892,9 @@
888
892
  @property st-global(--wds-counter-badge-size-small);
889
893
  @property st-global(--wds-counter-badge-size-tiny);
890
894
  @property st-global(--wds-custom-modal-border-radius);
895
+ @property st-global(--wds-custom-modal-close-button-fill);
896
+ @property st-global(--wds-custom-modal-close-button-icon-size);
897
+ @property st-global(--wds-custom-modal-close-button-size);
891
898
  @property st-global(--wds-custom-modal-content-padding-horizontal);
892
899
  @property st-global(--wds-custom-modal-content-padding-vertical);
893
900
  @property st-global(--wds-custom-modal-footer-padding-horizontal);
@@ -1921,6 +1928,15 @@
1921
1928
  @property st-global(--wds-space-padding-vertical-x-tiny);
1922
1929
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1923
1930
  @property st-global(--wds-space-viewport-spacing);
1931
+ @property st-global(--wds-statistics-widget-description-font-line-height);
1932
+ @property st-global(--wds-statistics-widget-description-font-size);
1933
+ @property st-global(--wds-statistics-widget-description-info-gap);
1934
+ @property st-global(--wds-statistics-widget-trend-space-top);
1935
+ @property st-global(--wds-statistics-widget-value-font-family-tiny);
1936
+ @property st-global(--wds-statistics-widget-value-font-letter-spacing);
1937
+ @property st-global(--wds-statistics-widget-value-font-line-height-tiny);
1938
+ @property st-global(--wds-statistics-widget-value-font-size-tiny);
1939
+ @property st-global(--wds-statistics-widget-value-font-weight-tiny);
1924
1940
  @property st-global(--wds-status-toast-info-icon-fill);
1925
1941
  @property st-global(--wds-status-toast-text-font-line-height);
1926
1942
  @property st-global(--wds-status-toast-text-font-size);
@@ -2349,8 +2365,10 @@
2349
2365
  --wds-announcement-modal-top-controls-gap: 2px;
2350
2366
  --wds-announcement-modal-top-controls-padding-end: 8px;
2351
2367
  --wds-announcement-modal-top-controls-padding-top: 16px;
2368
+ --wds-avatar-color-7-fill: #ACAFC4;
2352
2369
  --wds-avatar-group-gap-condensed: -2px;
2353
2370
  --wds-avatar-group-gap-default: 4px;
2371
+ --wds-avatar-size-tiny: 18px;
2354
2372
  --wds-avatar-text-fill: #ffffff;
2355
2373
  --wds-background-blur-0: 0px;
2356
2374
  --wds-background-blur-50: 0px;
@@ -2598,6 +2616,7 @@
2598
2616
  --wds-card-header-divider-width: 0px;
2599
2617
  --wds-card-header-padding-horizontal: 24px;
2600
2618
  --wds-card-header-padding-vertical: 16px;
2619
+ --wds-card-header-suffix-align: center;
2601
2620
  --wds-card-header-title-subtitle-gap: 0px;
2602
2621
  --wds-card-shadow: 0 0px 3px 0 rgba(19, 23, 32, .1), 0 0px 0 0 rgba(19, 23, 32, .05);
2603
2622
  --wds-card-subtitle-color: #42454c;
@@ -3000,6 +3019,7 @@
3000
3019
  --wds-color-fill-surface-overlay-dark: #131720;
3001
3020
  --wds-color-fill-surface-premium: #f1e0f9;
3002
3021
  --wds-color-fill-surface-raised: #ffffff;
3022
+ --wds-color-fill-surface-stage: #f7f8f8;
3003
3023
  --wds-color-fill-surface-standard: #dce9ff;
3004
3024
  --wds-color-fill-surface-success: #e1f4eb;
3005
3025
  --wds-color-fill-surface-sunken: #f7f8f8;
@@ -3172,6 +3192,9 @@
3172
3192
  --wds-counter-badge-size-small: 18px;
3173
3193
  --wds-counter-badge-size-tiny: 14px;
3174
3194
  --wds-custom-modal-border-radius: 4px;
3195
+ --wds-custom-modal-close-button-fill: transparent;
3196
+ --wds-custom-modal-close-button-icon-size: 12px;
3197
+ --wds-custom-modal-close-button-size: 28px;
3175
3198
  --wds-custom-modal-content-padding-horizontal: 24px;
3176
3199
  --wds-custom-modal-content-padding-vertical: 24px;
3177
3200
  --wds-custom-modal-footer-padding-horizontal: 24px;
@@ -4205,6 +4228,15 @@
4205
4228
  --wds-space-padding-vertical-x-tiny: 8px;
4206
4229
  --wds-space-padding-vertical-xx-tiny: 4px;
4207
4230
  --wds-space-viewport-spacing: 48px;
4231
+ --wds-statistics-widget-description-font-line-height: 20px;
4232
+ --wds-statistics-widget-description-font-size: 14px;
4233
+ --wds-statistics-widget-description-info-gap: 6px;
4234
+ --wds-statistics-widget-trend-space-top: 5px;
4235
+ --wds-statistics-widget-value-font-family-tiny: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
4236
+ --wds-statistics-widget-value-font-letter-spacing: 0px;
4237
+ --wds-statistics-widget-value-font-line-height-tiny: 24px;
4238
+ --wds-statistics-widget-value-font-size-tiny: 16px;
4239
+ --wds-statistics-widget-value-font-weight-tiny: 700;
4208
4240
  --wds-status-toast-info-icon-fill: #ffffff;
4209
4241
  --wds-status-toast-text-font-line-height: 24px;
4210
4242
  --wds-status-toast-text-font-size: 16px;
package/studio/component.st.css CHANGED
@@ -65,8 +65,10 @@
65
65
  @property st-global(--wds-announcement-modal-top-controls-gap);
66
66
  @property st-global(--wds-announcement-modal-top-controls-padding-end);
67
67
  @property st-global(--wds-announcement-modal-top-controls-padding-top);
68
+ @property st-global(--wds-avatar-color-7-fill);
68
69
  @property st-global(--wds-avatar-group-gap-condensed);
69
70
  @property st-global(--wds-avatar-group-gap-default);
71
+ @property st-global(--wds-avatar-size-tiny);
70
72
  @property st-global(--wds-avatar-text-fill);
71
73
  @property st-global(--wds-badge-border-radius-medium);
72
74
  @property st-global(--wds-badge-border-radius-small);
@@ -276,6 +278,7 @@
276
278
  @property st-global(--wds-card-header-divider-width);
277
279
  @property st-global(--wds-card-header-padding-horizontal);
278
280
  @property st-global(--wds-card-header-padding-vertical);
281
+ @property st-global(--wds-card-header-suffix-align);
279
282
  @property st-global(--wds-card-header-title-subtitle-gap);
280
283
  @property st-global(--wds-card-shadow);
281
284
  @property st-global(--wds-card-subtitle-color);
@@ -381,6 +384,9 @@
381
384
  @property st-global(--wds-counter-badge-size-small);
382
385
  @property st-global(--wds-counter-badge-size-tiny);
383
386
  @property st-global(--wds-custom-modal-border-radius);
387
+ @property st-global(--wds-custom-modal-close-button-fill);
388
+ @property st-global(--wds-custom-modal-close-button-icon-size);
389
+ @property st-global(--wds-custom-modal-close-button-size);
384
390
  @property st-global(--wds-custom-modal-content-padding-horizontal);
385
391
  @property st-global(--wds-custom-modal-content-padding-vertical);
386
392
  @property st-global(--wds-custom-modal-footer-padding-horizontal);
@@ -1180,6 +1186,15 @@
1180
1186
  @property st-global(--wds-social-post-preview-content-padding-vertical);
1181
1187
  @property st-global(--wds-social-preview-content-padding-horizontal);
1182
1188
  @property st-global(--wds-social-preview-content-padding-vertical);
1189
+ @property st-global(--wds-statistics-widget-description-font-line-height);
1190
+ @property st-global(--wds-statistics-widget-description-font-size);
1191
+ @property st-global(--wds-statistics-widget-description-info-gap);
1192
+ @property st-global(--wds-statistics-widget-trend-space-top);
1193
+ @property st-global(--wds-statistics-widget-value-font-family-tiny);
1194
+ @property st-global(--wds-statistics-widget-value-font-letter-spacing);
1195
+ @property st-global(--wds-statistics-widget-value-font-line-height-tiny);
1196
+ @property st-global(--wds-statistics-widget-value-font-size-tiny);
1197
+ @property st-global(--wds-statistics-widget-value-font-weight-tiny);
1183
1198
  @property st-global(--wds-status-toast-info-icon-fill);
1184
1199
  @property st-global(--wds-status-toast-text-font-line-height);
1185
1200
  @property st-global(--wds-status-toast-text-font-size);
@@ -1606,8 +1621,10 @@
1606
1621
  --wds-announcement-modal-top-controls-gap: 2px;
1607
1622
  --wds-announcement-modal-top-controls-padding-end: 8px;
1608
1623
  --wds-announcement-modal-top-controls-padding-top: 16px;
1624
+ --wds-avatar-color-7-fill: #ACAFC4;
1609
1625
  --wds-avatar-group-gap-condensed: -2px;
1610
1626
  --wds-avatar-group-gap-default: 4px;
1627
+ --wds-avatar-size-tiny: 18px;
1611
1628
  --wds-avatar-text-fill: #ffffff;
1612
1629
  --wds-badge-border-radius-medium: 2px;
1613
1630
  --wds-badge-border-radius-small: 2px;
@@ -1817,6 +1834,7 @@
1817
1834
  --wds-card-header-divider-width: 0px;
1818
1835
  --wds-card-header-padding-horizontal: 24px;
1819
1836
  --wds-card-header-padding-vertical: 16px;
1837
+ --wds-card-header-suffix-align: center;
1820
1838
  --wds-card-header-title-subtitle-gap: 0px;
1821
1839
  --wds-card-shadow: 0 0px 3px 0 rgba(19, 23, 32, .1), 0 0px 0 0 rgba(19, 23, 32, .05);
1822
1840
  --wds-card-subtitle-color: #42454c;
@@ -1922,6 +1940,9 @@
1922
1940
  --wds-counter-badge-size-small: 18px;
1923
1941
  --wds-counter-badge-size-tiny: 14px;
1924
1942
  --wds-custom-modal-border-radius: 4px;
1943
+ --wds-custom-modal-close-button-fill: transparent;
1944
+ --wds-custom-modal-close-button-icon-size: 12px;
1945
+ --wds-custom-modal-close-button-size: 28px;
1925
1946
  --wds-custom-modal-content-padding-horizontal: 24px;
1926
1947
  --wds-custom-modal-content-padding-vertical: 24px;
1927
1948
  --wds-custom-modal-footer-padding-horizontal: 24px;
@@ -2721,6 +2742,15 @@
2721
2742
  --wds-social-post-preview-content-padding-vertical: 12px;
2722
2743
  --wds-social-preview-content-padding-horizontal: 12px;
2723
2744
  --wds-social-preview-content-padding-vertical: 8px;
2745
+ --wds-statistics-widget-description-font-line-height: 20px;
2746
+ --wds-statistics-widget-description-font-size: 14px;
2747
+ --wds-statistics-widget-description-info-gap: 6px;
2748
+ --wds-statistics-widget-trend-space-top: 5px;
2749
+ --wds-statistics-widget-value-font-family-tiny: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2750
+ --wds-statistics-widget-value-font-letter-spacing: 0px;
2751
+ --wds-statistics-widget-value-font-line-height-tiny: 24px;
2752
+ --wds-statistics-widget-value-font-size-tiny: 16px;
2753
+ --wds-statistics-widget-value-font-weight-tiny: 700;
2724
2754
  --wds-status-toast-info-icon-fill: #ffffff;
2725
2755
  --wds-status-toast-text-font-line-height: 24px;
2726
2756
  --wds-status-toast-text-font-size: 16px;
package/studio/semantic.st.css CHANGED
@@ -296,6 +296,7 @@
296
296
  @property st-global(--wds-color-fill-surface-overlay-dark);
297
297
  @property st-global(--wds-color-fill-surface-premium);
298
298
  @property st-global(--wds-color-fill-surface-raised);
299
+ @property st-global(--wds-color-fill-surface-stage);
299
300
  @property st-global(--wds-color-fill-surface-standard);
300
301
  @property st-global(--wds-color-fill-surface-success);
301
302
  @property st-global(--wds-color-fill-surface-sunken);
@@ -803,6 +804,7 @@
803
804
  --wds-color-fill-surface-overlay-dark: #131720;
804
805
  --wds-color-fill-surface-premium: #f1e0f9;
805
806
  --wds-color-fill-surface-raised: #ffffff;
807
+ --wds-color-fill-surface-stage: #f7f8f8;
806
808
  --wds-color-fill-surface-standard: #dce9ff;
807
809
  --wds-color-fill-surface-success: #e1f4eb;
808
810
  --wds-color-fill-surface-sunken: #f7f8f8;
package/wixel/all.css CHANGED
@@ -315,6 +315,8 @@
315
315
  --wds-thumbnail-border-width-default: 0px;
316
316
  --wds-tabs-selection-height: 1px;
317
317
  --wds-status-toast-width: 600px;
318
+ --wds-statistics-widget-trend-space-top: 5px;
319
+ --wds-statistics-widget-description-info-gap: 6px;
318
320
  --wds-slider-track-size-transparent: 4px;
319
321
  --wds-slider-track-size: 4px;
320
322
  --wds-slider-slider-knob-size-transparent: 16px;
@@ -386,11 +388,13 @@
386
388
  --wds-google-preview-favicon-background-fill: #F1F3F4;
387
389
  --wds-editable-title-marker-line-style: dashed;
388
390
  --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
391
+ --wds-custom-modal-close-button-fill: transparent;
389
392
  --wds-counter-badge-padding-horizontal-tiny: 4px;
390
393
  --wds-counter-badge-font-size-tiny: 10px;
391
394
  --wds-composer-sidebar-end-max-width: 240px;
392
395
  --wds-composer-sidebar-bottom-width: 88px;
393
396
  --wds-card-gallery-item-overlay-fill: rgba(76, 73, 251, 0.1500);
397
+ --wds-card-header-suffix-align: center;
394
398
  --wds-card-divider-opacity: 1;
395
399
  --wds-card-base-shadow: none;
396
400
  --wds-button-outline-hover: transparent;
@@ -402,6 +406,7 @@
402
406
  --wds-breadcrumbs-height-medium: 30px;
403
407
  --wds-breadcrumbs-height-large: 36px;
404
408
  --wds-avatar-group-gap-condensed: -2px;
409
+ --wds-avatar-size-tiny: 18px;
405
410
  --wds-announcement-modal-help-button-fill: transparent;
406
411
  --wds-announcement-modal-footnote-content-alignment: center;
407
412
  --wds-announcement-modal-close-button-fill: transparent;
@@ -602,6 +607,7 @@
602
607
  --wds-color-fill-surface-sunken: var(--wds-color-black-750);
603
608
  --wds-color-fill-surface-success: var(--wds-color-green-500);
604
609
  --wds-color-fill-surface-standard: var(--wds-color-blue-400);
610
+ --wds-color-fill-surface-stage: var(--wds-color-black-750);
605
611
  --wds-color-fill-surface-raised: var(--wds-color-white);
606
612
  --wds-color-fill-surface-premium: var(--wds-color-purple-500);
607
613
  --wds-color-fill-surface-overlay-dark: var(--wds-color-black-100);
@@ -993,6 +999,9 @@
993
999
  --wds-swatches-fill-border-disabled: var(--wds-color-black-100-transparent-0);
994
1000
  --wds-stepper-prefix-size-number: var(--wds-space-600);
995
1001
  --wds-stepper-prefix-size-circle: var(--wds-space-700);
1002
+ --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-bold);
1003
+ --wds-statistics-widget-value-font-letter-spacing: var(--wds-font-letter-spacing-0);
1004
+ --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-default);
996
1005
  --wds-social-preview-content-padding-vertical: var(--wds-space-200);
997
1006
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
998
1007
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
@@ -1395,6 +1404,8 @@
1395
1404
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1396
1405
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1397
1406
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1407
+ --wds-custom-modal-close-button-size: var(--wds-space-700);
1408
+ --wds-custom-modal-close-button-icon-size: var(--wds-space-300);
1398
1409
  --wds-custom-modal-border-radius: var(--wds-border-radius-200);
1399
1410
  --wds-counter-badge-size-tiny: var(--wds-space-350);
1400
1411
  --wds-counter-badge-size-small: var(--wds-space-475);
@@ -1542,6 +1553,7 @@
1542
1553
  --wds-badge-border-radius-small: var(--wds-border-radius-100);
1543
1554
  --wds-badge-border-radius-medium: var(--wds-border-radius-100);
1544
1555
  --wds-avatar-group-gap-default: var(--wds-space-100);
1556
+ --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1545
1557
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-400);
1546
1558
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
1547
1559
  --wds-announcement-modal-top-controls-gap: var(--wds-space-50);
@@ -1719,6 +1731,8 @@
1719
1731
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1720
1732
  --wds-status-toast-text-font-size: var(--wds-font-size-body-tiny);
1721
1733
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1734
+ --wds-statistics-widget-value-font-size-tiny: var(--wds-font-size-body-medium);
1735
+ --wds-statistics-widget-description-font-size: var(--wds-font-size-body-small);
1722
1736
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1723
1737
  --wds-sidebar-item-title: var(--wds-color-text-standard-secondary-light);
1724
1738
  --wds-sidebar-item-text-neutral-disabled: var(--wds-color-text-disabled);
@@ -2162,6 +2176,8 @@
2162
2176
  --wds-tabs-label-line-height-small-medium: var(--wds-font-line-height-body-tiny);
2163
2177
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2164
2178
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-tiny);
2179
+ --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-body-medium);
2180
+ --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-small);
2165
2181
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2166
2182
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2167
2183
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);