@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/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ ## 1.219.0 - 2026-07-28
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(Avatar): add seventh color to rotation and 20px tiny size [Harmony, Studio 2.0] [16637](https://github.com/wix-private/wix-design-systems/pull/16637)
6
+
7
+ ### Bug Fixes
8
+
9
+ - fix(CustomModalLayout): align close button with the design [Harmony] [16623](https://github.com/wix-private/wix-design-systems/pull/16623)
10
+ - fix(StatisticsWidget): align typography and gaps with Figma [Harmony] [Studio 2.0] [16635](https://github.com/wix-private/wix-design-systems/pull/16635)
11
+ - fix(Card): subtitle 12px, title-subtitle gap, top-aligned suffix, content paddings [Harmony, Studio 2.0] [16634](https://github.com/wix-private/wix-design-systems/pull/16634)
12
+
1
13
  ## 1.213.0 - 2026-07-17
2
14
 
3
15
  ### Bug Fixes
package/all.css CHANGED
@@ -289,6 +289,8 @@
289
289
  --wds-swatches-swatch-active-border-radius-small: 5px;
290
290
  --wds-swatches-swatch-active-border-radius-medium: 9px;
291
291
  --wds-status-toast-width: 600px;
292
+ --wds-statistics-widget-trend-space-top: 5px;
293
+ --wds-statistics-widget-description-info-gap: 6px;
292
294
  --wds-slider-track-size-transparent: 8px;
293
295
  --wds-slider-track-size: 4px;
294
296
  --wds-slider-slider-knob-size-transparent: 16px;
@@ -361,6 +363,7 @@
361
363
  --wds-google-preview-favicon-border-fill: #E6E6E6;
362
364
  --wds-google-preview-favicon-background-fill: #F1F3F4;
363
365
  --wds-editable-title-marker-line-style: dashed;
366
+ --wds-custom-modal-close-button-fill: transparent;
364
367
  --wds-counter-badge-padding-horizontal-tiny: 4px;
365
368
  --wds-counter-badge-padding-horizontal-medium: 8px;
366
369
  --wds-counter-badge-font-size-tiny: 10px;
@@ -370,6 +373,7 @@
370
373
  --wds-close-button-standard-filled-fill: transparent;
371
374
  --wds-circular-progress-bar-border-width: 4px;
372
375
  --wds-checkbox-size: 16px;
376
+ --wds-card-header-suffix-align: center;
373
377
  --wds-card-divider-opacity: 1;
374
378
  --wds-card-base-shadow: none;
375
379
  --wds-button-outline-hover: transparent;
@@ -382,6 +386,7 @@
382
386
  --wds-breadcrumbs-height-large: 36px;
383
387
  --wds-breadcrumbs-divider-margin-horizontal: 8px;
384
388
  --wds-avatar-group-gap-condensed: -3px;
389
+ --wds-avatar-size-tiny: 18px;
385
390
  --wds-announcement-modal-help-button-fill: transparent;
386
391
  --wds-announcement-modal-footnote-content-alignment: center;
387
392
  --wds-announcement-modal-close-button-icon-size: 12px;
@@ -604,6 +609,7 @@
604
609
  --wds-color-fill-surface-sunken: var(--wds-color-black-700);
605
610
  --wds-color-fill-surface-success: var(--wds-color-green-500);
606
611
  --wds-color-fill-surface-standard: var(--wds-color-blue-500);
612
+ --wds-color-fill-surface-stage: var(--wds-color-black-700);
607
613
  --wds-color-fill-surface-raised: var(--wds-color-white);
608
614
  --wds-color-fill-surface-premium: var(--wds-color-purple-500);
609
615
  --wds-color-fill-surface-overlay-dark: var(--wds-color-black-100);
@@ -1018,6 +1024,9 @@
1018
1024
  --wds-swatches-fill-border-disabled: var(--wds-color-black-100-transparent-0);
1019
1025
  --wds-stepper-prefix-size-number: var(--wds-space-400);
1020
1026
  --wds-stepper-prefix-size-circle: var(--wds-space-500);
1027
+ --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-bold);
1028
+ --wds-statistics-widget-value-font-letter-spacing: var(--wds-font-letter-spacing-0);
1029
+ --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-default);
1021
1030
  --wds-social-preview-content-padding-vertical: var(--wds-space-150);
1022
1031
  --wds-social-preview-content-padding-horizontal: var(--wds-space-200);
1023
1032
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-200);
@@ -1406,6 +1415,8 @@
1406
1415
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-400);
1407
1416
  --wds-custom-modal-content-padding-vertical: var(--wds-space-400);
1408
1417
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-400);
1418
+ --wds-custom-modal-close-button-size: var(--wds-space-500);
1419
+ --wds-custom-modal-close-button-icon-size: var(--wds-space-200);
1409
1420
  --wds-custom-modal-border-radius: var(--wds-border-radius-400);
1410
1421
  --wds-counter-badge-size-tiny: var(--wds-space-350);
1411
1422
  --wds-counter-badge-size-small: var(--wds-space-300);
@@ -1544,6 +1555,7 @@
1544
1555
  --wds-badge-border-radius-small: var(--wds-border-radius-100);
1545
1556
  --wds-badge-border-radius-medium: var(--wds-border-radius-100);
1546
1557
  --wds-avatar-group-gap-default: var(--wds-space-100);
1558
+ --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1547
1559
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-300);
1548
1560
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
1549
1561
  --wds-announcement-modal-top-controls-gap: var(--wds-space-50);
@@ -1736,6 +1748,8 @@
1736
1748
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1737
1749
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1738
1750
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1751
+ --wds-statistics-widget-value-font-size-tiny: var(--wds-font-size-body-medium);
1752
+ --wds-statistics-widget-description-font-size: var(--wds-font-size-body-small);
1739
1753
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1740
1754
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1741
1755
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
@@ -2240,6 +2254,8 @@
2240
2254
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2241
2255
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-medium);
2242
2256
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2257
+ --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-body-medium);
2258
+ --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-small);
2243
2259
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2244
2260
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2245
2261
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
package/all.scss CHANGED
@@ -14,6 +14,8 @@
14
14
  --wds-swatches-swatch-active-border-radius-small: 5px;
15
15
  --wds-swatches-swatch-active-border-radius-medium: 9px;
16
16
  --wds-status-toast-width: 600px;
17
+ --wds-statistics-widget-trend-space-top: 5px;
18
+ --wds-statistics-widget-description-info-gap: 6px;
17
19
  --wds-space-2400: 144px;
18
20
  --wds-space-1700: 102px;
19
21
  --wds-space-1600: 96px;
@@ -161,6 +163,7 @@
161
163
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
162
164
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
163
165
  --wds-editable-title-marker-line-style: dashed;
166
+ --wds-custom-modal-close-button-fill: transparent;
164
167
  --wds-counter-badge-padding-horizontal-tiny: 4px;
165
168
  --wds-counter-badge-padding-horizontal-medium: 8px;
166
169
  --wds-counter-badge-font-size-tiny: 10px;
@@ -343,6 +346,7 @@
343
346
  --wds-close-button-standard-filled-fill: transparent;
344
347
  --wds-circular-progress-bar-border-width: 4px;
345
348
  --wds-checkbox-size: 16px;
349
+ --wds-card-header-suffix-align: center;
346
350
  --wds-card-divider-opacity: 1;
347
351
  --wds-card-base-shadow: none;
348
352
  --wds-button-outline-hover: transparent;
@@ -381,6 +385,7 @@
381
385
  --wds-background-blur-100: 0px;
382
386
  --wds-background-blur-50: 0px;
383
387
  --wds-background-blur-0: 0px;
388
+ --wds-avatar-size-tiny: 18px;
384
389
  --wds-avatar-group-gap-condensed: -3px;
385
390
  --wds-announcement-modal-help-button-fill: transparent;
386
391
  --wds-announcement-modal-footnote-content-alignment: center;
@@ -578,6 +583,9 @@
578
583
  --wds-swatches-fill-border-disabled: var(--wds-color-black-100-transparent-0);
579
584
  --wds-stepper-prefix-size-number: var(--wds-space-400);
580
585
  --wds-stepper-prefix-size-circle: var(--wds-space-500);
586
+ --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-bold);
587
+ --wds-statistics-widget-value-font-letter-spacing: var(--wds-font-letter-spacing-0);
588
+ --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-default);
581
589
  --wds-space-viewport-spacing: var(--wds-space-800);
582
590
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-50);
583
591
  --wds-space-padding-vertical-x-tiny: var(--wds-space-100);
@@ -1096,6 +1104,8 @@
1096
1104
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-400);
1097
1105
  --wds-custom-modal-content-padding-vertical: var(--wds-space-400);
1098
1106
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-400);
1107
+ --wds-custom-modal-close-button-size: var(--wds-space-500);
1108
+ --wds-custom-modal-close-button-icon-size: var(--wds-space-200);
1099
1109
  --wds-custom-modal-border-radius: var(--wds-border-radius-400);
1100
1110
  --wds-counter-badge-size-tiny: var(--wds-space-350);
1101
1111
  --wds-counter-badge-size-small: var(--wds-space-300);
@@ -1196,6 +1206,7 @@
1196
1206
  --wds-color-fill-surface-sunken: var(--wds-color-black-700);
1197
1207
  --wds-color-fill-surface-success: var(--wds-color-green-500);
1198
1208
  --wds-color-fill-surface-standard: var(--wds-color-blue-500);
1209
+ --wds-color-fill-surface-stage: var(--wds-color-black-700);
1199
1210
  --wds-color-fill-surface-raised: var(--wds-color-white);
1200
1211
  --wds-color-fill-surface-premium: var(--wds-color-purple-500);
1201
1212
  --wds-color-fill-surface-overlay-dark: var(--wds-color-black-100);
@@ -1544,6 +1555,7 @@
1544
1555
  --wds-background-blur-surface-overlay: var(--wds-background-blur-0);
1545
1556
  --wds-background-blur-modal: var(--wds-background-blur-0);
1546
1557
  --wds-avatar-group-gap-default: var(--wds-space-100);
1558
+ --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1547
1559
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-300);
1548
1560
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
1549
1561
  --wds-announcement-modal-top-controls-gap: var(--wds-space-50);
@@ -1718,6 +1730,8 @@
1718
1730
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1719
1731
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1720
1732
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1733
+ --wds-statistics-widget-value-font-size-tiny: var(--wds-font-size-body-medium);
1734
+ --wds-statistics-widget-description-font-size: var(--wds-font-size-body-small);
1721
1735
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1722
1736
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1723
1737
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
@@ -2240,6 +2254,8 @@
2240
2254
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2241
2255
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-medium);
2242
2256
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2257
+ --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-body-medium);
2258
+ --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-small);
2243
2259
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2244
2260
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2245
2261
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
package/all.st.css CHANGED
@@ -66,8 +66,10 @@
66
66
  @property st-global(--wds-announcement-modal-top-controls-gap);
67
67
  @property st-global(--wds-announcement-modal-top-controls-padding-end);
68
68
  @property st-global(--wds-announcement-modal-top-controls-padding-top);
69
+ @property st-global(--wds-avatar-color-7-fill);
69
70
  @property st-global(--wds-avatar-group-gap-condensed);
70
71
  @property st-global(--wds-avatar-group-gap-default);
72
+ @property st-global(--wds-avatar-size-tiny);
71
73
  @property st-global(--wds-avatar-text-fill);
72
74
  @property st-global(--wds-background-blur-0);
73
75
  @property st-global(--wds-background-blur-50);
@@ -320,6 +322,7 @@
320
322
  @property st-global(--wds-card-header-divider-width);
321
323
  @property st-global(--wds-card-header-padding-horizontal);
322
324
  @property st-global(--wds-card-header-padding-vertical);
325
+ @property st-global(--wds-card-header-suffix-align);
323
326
  @property st-global(--wds-card-header-title-subtitle-gap);
324
327
  @property st-global(--wds-card-shadow);
325
328
  @property st-global(--wds-card-subtitle-color);
@@ -722,6 +725,7 @@
722
725
  @property st-global(--wds-color-fill-surface-overlay-dark);
723
726
  @property st-global(--wds-color-fill-surface-premium);
724
727
  @property st-global(--wds-color-fill-surface-raised);
728
+ @property st-global(--wds-color-fill-surface-stage);
725
729
  @property st-global(--wds-color-fill-surface-standard);
726
730
  @property st-global(--wds-color-fill-surface-success);
727
731
  @property st-global(--wds-color-fill-surface-sunken);
@@ -898,6 +902,9 @@
898
902
  @property st-global(--wds-counter-badge-size-small);
899
903
  @property st-global(--wds-counter-badge-size-tiny);
900
904
  @property st-global(--wds-custom-modal-border-radius);
905
+ @property st-global(--wds-custom-modal-close-button-fill);
906
+ @property st-global(--wds-custom-modal-close-button-icon-size);
907
+ @property st-global(--wds-custom-modal-close-button-size);
901
908
  @property st-global(--wds-custom-modal-content-padding-horizontal);
902
909
  @property st-global(--wds-custom-modal-content-padding-vertical);
903
910
  @property st-global(--wds-custom-modal-footer-padding-horizontal);
@@ -1928,6 +1935,15 @@
1928
1935
  @property st-global(--wds-space-padding-vertical-x-tiny);
1929
1936
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1930
1937
  @property st-global(--wds-space-viewport-spacing);
1938
+ @property st-global(--wds-statistics-widget-description-font-line-height);
1939
+ @property st-global(--wds-statistics-widget-description-font-size);
1940
+ @property st-global(--wds-statistics-widget-description-info-gap);
1941
+ @property st-global(--wds-statistics-widget-trend-space-top);
1942
+ @property st-global(--wds-statistics-widget-value-font-family-tiny);
1943
+ @property st-global(--wds-statistics-widget-value-font-letter-spacing);
1944
+ @property st-global(--wds-statistics-widget-value-font-line-height-tiny);
1945
+ @property st-global(--wds-statistics-widget-value-font-size-tiny);
1946
+ @property st-global(--wds-statistics-widget-value-font-weight-tiny);
1931
1947
  @property st-global(--wds-status-toast-info-icon-fill);
1932
1948
  @property st-global(--wds-status-toast-text-font-line-height);
1933
1949
  @property st-global(--wds-status-toast-text-font-size);
@@ -2363,8 +2379,10 @@
2363
2379
  --wds-announcement-modal-top-controls-gap: 3px;
2364
2380
  --wds-announcement-modal-top-controls-padding-end: 12px;
2365
2381
  --wds-announcement-modal-top-controls-padding-top: 18px;
2382
+ --wds-avatar-color-7-fill: #ACAFC4;
2366
2383
  --wds-avatar-group-gap-condensed: -3px;
2367
2384
  --wds-avatar-group-gap-default: 6px;
2385
+ --wds-avatar-size-tiny: 18px;
2368
2386
  --wds-avatar-text-fill: #ffffff;
2369
2387
  --wds-background-blur-0: 0px;
2370
2388
  --wds-background-blur-50: 0px;
@@ -2617,6 +2635,7 @@
2617
2635
  --wds-card-header-divider-width: 0px;
2618
2636
  --wds-card-header-padding-horizontal: 24px;
2619
2637
  --wds-card-header-padding-vertical: 18px;
2638
+ --wds-card-header-suffix-align: center;
2620
2639
  --wds-card-header-title-subtitle-gap: 0px;
2621
2640
  --wds-card-shadow: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
2622
2641
  --wds-card-subtitle-color: #44485f;
@@ -3019,6 +3038,7 @@
3019
3038
  --wds-color-fill-surface-overlay-dark: #000624;
3020
3039
  --wds-color-fill-surface-premium: #f1e0f9;
3021
3040
  --wds-color-fill-surface-raised: #ffffff;
3041
+ --wds-color-fill-surface-stage: #eceff3;
3022
3042
  --wds-color-fill-surface-standard: #e7f0ff;
3023
3043
  --wds-color-fill-surface-success: #e1f4eb;
3024
3044
  --wds-color-fill-surface-sunken: #eceff3;
@@ -3195,6 +3215,9 @@
3195
3215
  --wds-counter-badge-size-small: 18px;
3196
3216
  --wds-counter-badge-size-tiny: 21px;
3197
3217
  --wds-custom-modal-border-radius: 8px;
3218
+ --wds-custom-modal-close-button-fill: transparent;
3219
+ --wds-custom-modal-close-button-icon-size: 12px;
3220
+ --wds-custom-modal-close-button-size: 30px;
3198
3221
  --wds-custom-modal-content-padding-horizontal: 24px;
3199
3222
  --wds-custom-modal-content-padding-vertical: 24px;
3200
3223
  --wds-custom-modal-footer-padding-horizontal: 24px;
@@ -4225,6 +4248,15 @@
4225
4248
  --wds-space-padding-vertical-x-tiny: 6px;
4226
4249
  --wds-space-padding-vertical-xx-tiny: 3px;
4227
4250
  --wds-space-viewport-spacing: 48px;
4251
+ --wds-statistics-widget-description-font-line-height: 18px;
4252
+ --wds-statistics-widget-description-font-size: 14px;
4253
+ --wds-statistics-widget-description-info-gap: 6px;
4254
+ --wds-statistics-widget-trend-space-top: 5px;
4255
+ --wds-statistics-widget-value-font-family-tiny: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
4256
+ --wds-statistics-widget-value-font-letter-spacing: 0px;
4257
+ --wds-statistics-widget-value-font-line-height-tiny: 24px;
4258
+ --wds-statistics-widget-value-font-size-tiny: 16px;
4259
+ --wds-statistics-widget-value-font-weight-tiny: 700;
4228
4260
  --wds-status-toast-info-icon-fill: #ffffff;
4229
4261
  --wds-status-toast-text-font-line-height: 24px;
4230
4262
  --wds-status-toast-text-font-size: 16px;
package/component.st.css CHANGED
@@ -66,8 +66,10 @@
66
66
  @property st-global(--wds-announcement-modal-top-controls-gap);
67
67
  @property st-global(--wds-announcement-modal-top-controls-padding-end);
68
68
  @property st-global(--wds-announcement-modal-top-controls-padding-top);
69
+ @property st-global(--wds-avatar-color-7-fill);
69
70
  @property st-global(--wds-avatar-group-gap-condensed);
70
71
  @property st-global(--wds-avatar-group-gap-default);
72
+ @property st-global(--wds-avatar-size-tiny);
71
73
  @property st-global(--wds-avatar-text-fill);
72
74
  @property st-global(--wds-badge-border-radius-medium);
73
75
  @property st-global(--wds-badge-border-radius-small);
@@ -282,6 +284,7 @@
282
284
  @property st-global(--wds-card-header-divider-width);
283
285
  @property st-global(--wds-card-header-padding-horizontal);
284
286
  @property st-global(--wds-card-header-padding-vertical);
287
+ @property st-global(--wds-card-header-suffix-align);
285
288
  @property st-global(--wds-card-header-title-subtitle-gap);
286
289
  @property st-global(--wds-card-shadow);
287
290
  @property st-global(--wds-card-subtitle-color);
@@ -387,6 +390,9 @@
387
390
  @property st-global(--wds-counter-badge-size-small);
388
391
  @property st-global(--wds-counter-badge-size-tiny);
389
392
  @property st-global(--wds-custom-modal-border-radius);
393
+ @property st-global(--wds-custom-modal-close-button-fill);
394
+ @property st-global(--wds-custom-modal-close-button-icon-size);
395
+ @property st-global(--wds-custom-modal-close-button-size);
390
396
  @property st-global(--wds-custom-modal-content-padding-horizontal);
391
397
  @property st-global(--wds-custom-modal-content-padding-vertical);
392
398
  @property st-global(--wds-custom-modal-footer-padding-horizontal);
@@ -1195,6 +1201,15 @@
1195
1201
  @property st-global(--wds-social-post-preview-content-padding-vertical);
1196
1202
  @property st-global(--wds-social-preview-content-padding-horizontal);
1197
1203
  @property st-global(--wds-social-preview-content-padding-vertical);
1204
+ @property st-global(--wds-statistics-widget-description-font-line-height);
1205
+ @property st-global(--wds-statistics-widget-description-font-size);
1206
+ @property st-global(--wds-statistics-widget-description-info-gap);
1207
+ @property st-global(--wds-statistics-widget-trend-space-top);
1208
+ @property st-global(--wds-statistics-widget-value-font-family-tiny);
1209
+ @property st-global(--wds-statistics-widget-value-font-letter-spacing);
1210
+ @property st-global(--wds-statistics-widget-value-font-line-height-tiny);
1211
+ @property st-global(--wds-statistics-widget-value-font-size-tiny);
1212
+ @property st-global(--wds-statistics-widget-value-font-weight-tiny);
1198
1213
  @property st-global(--wds-status-toast-info-icon-fill);
1199
1214
  @property st-global(--wds-status-toast-text-font-line-height);
1200
1215
  @property st-global(--wds-status-toast-text-font-size);
@@ -1628,8 +1643,10 @@
1628
1643
  --wds-announcement-modal-top-controls-gap: 3px;
1629
1644
  --wds-announcement-modal-top-controls-padding-end: 12px;
1630
1645
  --wds-announcement-modal-top-controls-padding-top: 18px;
1646
+ --wds-avatar-color-7-fill: #ACAFC4;
1631
1647
  --wds-avatar-group-gap-condensed: -3px;
1632
1648
  --wds-avatar-group-gap-default: 6px;
1649
+ --wds-avatar-size-tiny: 18px;
1633
1650
  --wds-avatar-text-fill: #ffffff;
1634
1651
  --wds-badge-border-radius-medium: 2px;
1635
1652
  --wds-badge-border-radius-small: 2px;
@@ -1844,6 +1861,7 @@
1844
1861
  --wds-card-header-divider-width: 0px;
1845
1862
  --wds-card-header-padding-horizontal: 24px;
1846
1863
  --wds-card-header-padding-vertical: 18px;
1864
+ --wds-card-header-suffix-align: center;
1847
1865
  --wds-card-header-title-subtitle-gap: 0px;
1848
1866
  --wds-card-shadow: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
1849
1867
  --wds-card-subtitle-color: #44485f;
@@ -1949,6 +1967,9 @@
1949
1967
  --wds-counter-badge-size-small: 18px;
1950
1968
  --wds-counter-badge-size-tiny: 21px;
1951
1969
  --wds-custom-modal-border-radius: 8px;
1970
+ --wds-custom-modal-close-button-fill: transparent;
1971
+ --wds-custom-modal-close-button-icon-size: 12px;
1972
+ --wds-custom-modal-close-button-size: 30px;
1952
1973
  --wds-custom-modal-content-padding-horizontal: 24px;
1953
1974
  --wds-custom-modal-content-padding-vertical: 24px;
1954
1975
  --wds-custom-modal-footer-padding-horizontal: 24px;
@@ -2757,6 +2778,15 @@
2757
2778
  --wds-social-post-preview-content-padding-vertical: 12px;
2758
2779
  --wds-social-preview-content-padding-horizontal: 12px;
2759
2780
  --wds-social-preview-content-padding-vertical: 9px;
2781
+ --wds-statistics-widget-description-font-line-height: 18px;
2782
+ --wds-statistics-widget-description-font-size: 14px;
2783
+ --wds-statistics-widget-description-info-gap: 6px;
2784
+ --wds-statistics-widget-trend-space-top: 5px;
2785
+ --wds-statistics-widget-value-font-family-tiny: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2786
+ --wds-statistics-widget-value-font-letter-spacing: 0px;
2787
+ --wds-statistics-widget-value-font-line-height-tiny: 24px;
2788
+ --wds-statistics-widget-value-font-size-tiny: 16px;
2789
+ --wds-statistics-widget-value-font-weight-tiny: 700;
2760
2790
  --wds-status-toast-info-icon-fill: #ffffff;
2761
2791
  --wds-status-toast-text-font-line-height: 24px;
2762
2792
  --wds-status-toast-text-font-size: 16px;
package/odeditor/all.css CHANGED
@@ -99,6 +99,7 @@
99
99
  --wds-font-family-display: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
100
100
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
101
101
  --wds-color-text-stage-section: #6f56f9;
102
+ --wds-color-fill-surface-stage: #F7F7F7;
102
103
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
103
104
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
104
105
  --wds-color-fill-stage-section-secondary: #d9d2ff;
@@ -337,6 +338,7 @@
337
338
  --wds-tabs-selection-height: 3px;
338
339
  --wds-swatches-swatch-size-tiny: 22px;
339
340
  --wds-status-toast-width: 600px;
341
+ --wds-statistics-widget-value-font-letter-spacing: -0.5px;
340
342
  --wds-slider-track-size-transparent: 2px;
341
343
  --wds-slider-track-size: 2px;
342
344
  --wds-slider-slider-knob-size-transparent: 16px;
@@ -405,11 +407,13 @@
405
407
  --wds-color-picker-width: 236px;
406
408
  --wds-card-subtitle-color: #44485f;
407
409
  --wds-card-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
410
+ --wds-card-header-suffix-align: flex-start;
408
411
  --wds-card-divider-opacity: 0;
409
412
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
410
413
  --wds-breadcrumbs-height-medium: 26px;
411
414
  --wds-avatar-group-gap-condensed: -2px;
412
415
  --wds-avatar-group-counter-background-blur: 4px;
416
+ --wds-avatar-size-tiny: 20px;
413
417
  --wds-announcement-modal-footnote-content-alignment: start;
414
418
  --wds-announcement-modal-close-button-icon-size: 8px;
415
419
  --wds-angle-input-knob-size: 6px;
@@ -1045,6 +1049,9 @@
1045
1049
  --wds-suffix-active-font-weight: var(--wds-font-weight-semi-bold);
1046
1050
  --wds-stepper-prefix-size-number: var(--wds-space-600);
1047
1051
  --wds-stepper-prefix-size-circle: var(--wds-space-700);
1052
+ --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-display);
1053
+ --wds-statistics-widget-trend-space-top: var(--wds-space-0);
1054
+ --wds-statistics-widget-description-info-gap: var(--wds-space-50);
1048
1055
  --wds-social-preview-content-padding-vertical: var(--wds-space-200);
1049
1056
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
1050
1057
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
@@ -1488,6 +1495,8 @@
1488
1495
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1489
1496
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1490
1497
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1498
+ --wds-custom-modal-close-button-size: var(--wds-space-600);
1499
+ --wds-custom-modal-close-button-icon-size: var(--wds-space-200);
1491
1500
  --wds-counter-badge-size-tiny: var(--wds-space-350);
1492
1501
  --wds-counter-badge-size-small: var(--wds-space-475);
1493
1502
  --wds-counter-badge-size-medium: var(--wds-space-600);
@@ -1565,7 +1574,7 @@
1565
1574
  --wds-card-header-divider-width: var(--wds-border-width-none);
1566
1575
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1567
1576
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1568
- --wds-card-content-padding-medium-top: var(--wds-space-300);
1577
+ --wds-card-content-padding-medium-top: var(--wds-space-100);
1569
1578
  --wds-card-content-padding-medium-horizontal: var(--wds-space-600);
1570
1579
  --wds-card-content-padding-medium-bottom: var(--wds-space-600);
1571
1580
  --wds-card-content-padding-medium: var(--wds-space-300);
@@ -1678,6 +1687,7 @@
1678
1687
  --wds-avatar-group-counter-fill: var(--wds-color-white-transparent-50);
1679
1688
  --wds-avatar-group-counter-border-width: var(--wds-border-width-100);
1680
1689
  --wds-avatar-group-counter-border-fill: var(--wds-color-white);
1690
+ --wds-avatar-color-7-fill: var(--wds-color-fill-accent-7);
1681
1691
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-300);
1682
1692
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-300);
1683
1693
  --wds-announcement-modal-top-controls-gap: var(--wds-space-100);
@@ -1834,6 +1844,9 @@
1834
1844
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1835
1845
  --wds-status-toast-text-font-size: var(--wds-font-size-body-small);
1836
1846
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1847
+ --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-heading-2);
1848
+ --wds-statistics-widget-value-font-size-tiny: var(--wds-font-size-heading-2);
1849
+ --wds-statistics-widget-description-font-size: var(--wds-font-size-body-tiny);
1837
1850
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1838
1851
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
1839
1852
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-tertiary);
@@ -2083,6 +2096,7 @@
2083
2096
  --wds-date-picker-icon-fill: var(--wds-color-text-standard-secondary);
2084
2097
  --wds-custom-modal-header-subtitle-font-size: var(--wds-font-size-body-small);
2085
2098
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
2099
+ --wds-custom-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
2086
2100
  --wds-custom-modal-border-radius: var(--wds-border-radius-surface-modal);
2087
2101
  --wds-close-button-standard-filled-text-hover: var(--wds-color-text-standard-primary);
2088
2102
  --wds-close-button-standard-filled-text-disabled: var(--wds-color-text-disabled);
@@ -2227,6 +2241,8 @@
2227
2241
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-small);
2228
2242
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2229
2243
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2244
+ --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-heading-2);
2245
+ --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-tiny);
2230
2246
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2231
2247
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
2232
2248
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-heading-3);
package/odeditor/all.scss CHANGED
@@ -32,6 +32,7 @@
32
32
  --wds-tabs-selection-height: 3px;
33
33
  --wds-swatches-swatch-size-tiny: 22px;
34
34
  --wds-status-toast-width: 600px;
35
+ --wds-statistics-widget-value-font-letter-spacing: -0.5px;
35
36
  --wds-space-2400: 96px;
36
37
  --wds-space-1700: 68px;
37
38
  --wds-space-1600: 64px;
@@ -267,6 +268,7 @@
267
268
  --wds-color-green-100: #4b916d;
268
269
  --wds-color-green-50: #11664f;
269
270
  --wds-color-green-0: #0d4f3d;
271
+ --wds-color-fill-surface-stage: #F7F7F7;
270
272
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
271
273
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
272
274
  --wds-color-fill-stage-section-secondary: #d9d2ff;
@@ -375,6 +377,7 @@
375
377
  --wds-color-black-100: #151414;
376
378
  --wds-card-subtitle-color: #44485f;
377
379
  --wds-card-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
380
+ --wds-card-header-suffix-align: flex-start;
378
381
  --wds-card-divider-opacity: 0;
379
382
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
380
383
  --wds-breakpoint-x-large: 1572px;
@@ -408,6 +411,7 @@
408
411
  --wds-background-blur-100: 8px;
409
412
  --wds-background-blur-50: 4px;
410
413
  --wds-background-blur-0: 0px;
414
+ --wds-avatar-size-tiny: 20px;
411
415
  --wds-avatar-group-gap-condensed: -2px;
412
416
  --wds-avatar-group-counter-background-blur: 4px;
413
417
  --wds-announcement-modal-footnote-content-alignment: start;
@@ -624,6 +628,9 @@
624
628
  --wds-suffix-active-font-weight: var(--wds-font-weight-semi-bold);
625
629
  --wds-stepper-prefix-size-number: var(--wds-space-600);
626
630
  --wds-stepper-prefix-size-circle: var(--wds-space-700);
631
+ --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-display);
632
+ --wds-statistics-widget-trend-space-top: var(--wds-space-0);
633
+ --wds-statistics-widget-description-info-gap: var(--wds-space-50);
627
634
  --wds-space-viewport-spacing: var(--wds-space-1200);
628
635
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-100);
629
636
  --wds-space-padding-vertical-x-tiny: var(--wds-space-200);
@@ -1189,6 +1196,8 @@
1189
1196
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1190
1197
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1191
1198
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1199
+ --wds-custom-modal-close-button-size: var(--wds-space-600);
1200
+ --wds-custom-modal-close-button-icon-size: var(--wds-space-200);
1192
1201
  --wds-counter-badge-size-tiny: var(--wds-space-350);
1193
1202
  --wds-counter-badge-size-small: var(--wds-space-475);
1194
1203
  --wds-counter-badge-size-medium: var(--wds-space-600);
@@ -1554,7 +1563,7 @@
1554
1563
  --wds-card-gallery-item-buttons-gap: var(--wds-space-200);
1555
1564
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1556
1565
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1557
- --wds-card-content-padding-medium-top: var(--wds-space-300);
1566
+ --wds-card-content-padding-medium-top: var(--wds-space-100);
1558
1567
  --wds-card-content-padding-medium-horizontal: var(--wds-space-600);
1559
1568
  --wds-card-content-padding-medium-bottom: var(--wds-space-600);
1560
1569
  --wds-card-content-padding-medium: var(--wds-space-300);
@@ -1678,6 +1687,7 @@
1678
1687
  --wds-avatar-group-counter-fill: var(--wds-color-white-transparent-50);
1679
1688
  --wds-avatar-group-counter-border-width: var(--wds-border-width-100);
1680
1689
  --wds-avatar-group-counter-border-fill: var(--wds-color-white);
1690
+ --wds-avatar-color-7-fill: var(--wds-color-fill-accent-7);
1681
1691
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-300);
1682
1692
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-300);
1683
1693
  --wds-announcement-modal-top-controls-gap: var(--wds-space-100);
@@ -1816,6 +1826,9 @@
1816
1826
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1817
1827
  --wds-status-toast-text-font-size: var(--wds-font-size-body-small);
1818
1828
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1829
+ --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-heading-2);
1830
+ --wds-statistics-widget-value-font-size-tiny: var(--wds-font-size-heading-2);
1831
+ --wds-statistics-widget-description-font-size: var(--wds-font-size-body-tiny);
1819
1832
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1820
1833
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
1821
1834
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-tertiary);
@@ -2081,6 +2094,7 @@
2081
2094
  --wds-date-picker-icon-fill: var(--wds-color-text-standard-secondary);
2082
2095
  --wds-custom-modal-header-subtitle-font-size: var(--wds-font-size-body-small);
2083
2096
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
2097
+ --wds-custom-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
2084
2098
  --wds-custom-modal-border-radius: var(--wds-border-radius-surface-modal);
2085
2099
  --wds-color-fill-surface-overlay-blur: var(--wds-color-fill-surface-overlay);
2086
2100
  --wds-color-fill-surface-modal-backdrop: var(--wds-color-fill-transparent-primary);
@@ -2227,6 +2241,8 @@
2227
2241
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-small);
2228
2242
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2229
2243
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2244
+ --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-heading-2);
2245
+ --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-tiny);
2230
2246
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2231
2247
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
2232
2248
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-heading-3);