@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/all.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-background-blur-0);
79
81
  @property st-global(--wds-background-blur-50);
@@ -318,6 +320,7 @@
318
320
  @property st-global(--wds-card-header-divider-width);
319
321
  @property st-global(--wds-card-header-padding-horizontal);
320
322
  @property st-global(--wds-card-header-padding-vertical);
323
+ @property st-global(--wds-card-header-suffix-align);
321
324
  @property st-global(--wds-card-header-title-subtitle-gap);
322
325
  @property st-global(--wds-card-shadow);
323
326
  @property st-global(--wds-card-subtitle-color);
@@ -717,6 +720,7 @@
717
720
  @property st-global(--wds-color-fill-surface-overlay-dark);
718
721
  @property st-global(--wds-color-fill-surface-premium);
719
722
  @property st-global(--wds-color-fill-surface-raised);
723
+ @property st-global(--wds-color-fill-surface-stage);
720
724
  @property st-global(--wds-color-fill-surface-standard);
721
725
  @property st-global(--wds-color-fill-surface-success);
722
726
  @property st-global(--wds-color-fill-surface-sunken);
@@ -889,6 +893,9 @@
889
893
  @property st-global(--wds-counter-badge-size-small);
890
894
  @property st-global(--wds-counter-badge-size-tiny);
891
895
  @property st-global(--wds-custom-modal-border-radius);
896
+ @property st-global(--wds-custom-modal-close-button-fill);
897
+ @property st-global(--wds-custom-modal-close-button-icon-size);
898
+ @property st-global(--wds-custom-modal-close-button-size);
892
899
  @property st-global(--wds-custom-modal-content-padding-horizontal);
893
900
  @property st-global(--wds-custom-modal-content-padding-vertical);
894
901
  @property st-global(--wds-custom-modal-footer-padding-horizontal);
@@ -1911,6 +1918,15 @@
1911
1918
  @property st-global(--wds-space-padding-vertical-x-tiny);
1912
1919
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1913
1920
  @property st-global(--wds-space-viewport-spacing);
1921
+ @property st-global(--wds-statistics-widget-description-font-line-height);
1922
+ @property st-global(--wds-statistics-widget-description-font-size);
1923
+ @property st-global(--wds-statistics-widget-description-info-gap);
1924
+ @property st-global(--wds-statistics-widget-trend-space-top);
1925
+ @property st-global(--wds-statistics-widget-value-font-family-tiny);
1926
+ @property st-global(--wds-statistics-widget-value-font-letter-spacing);
1927
+ @property st-global(--wds-statistics-widget-value-font-line-height-tiny);
1928
+ @property st-global(--wds-statistics-widget-value-font-size-tiny);
1929
+ @property st-global(--wds-statistics-widget-value-font-weight-tiny);
1914
1930
  @property st-global(--wds-status-toast-info-icon-fill);
1915
1931
  @property st-global(--wds-status-toast-text-font-line-height);
1916
1932
  @property st-global(--wds-status-toast-text-font-size);
@@ -2341,6 +2357,7 @@
2341
2357
  --wds-announcement-modal-top-controls-gap: 4px;
2342
2358
  --wds-announcement-modal-top-controls-padding-end: 12px;
2343
2359
  --wds-announcement-modal-top-controls-padding-top: 12px;
2360
+ --wds-avatar-color-7-fill: #BCD7C3;
2344
2361
  --wds-avatar-group-counter-background-blur: 4px;
2345
2362
  --wds-avatar-group-counter-border-fill: #ffffff;
2346
2363
  --wds-avatar-group-counter-border-width: 1px;
@@ -2350,6 +2367,7 @@
2350
2367
  --wds-avatar-group-counter-fill-hover: #e8e7e7;
2351
2368
  --wds-avatar-group-gap-condensed: -2px;
2352
2369
  --wds-avatar-group-gap-default: 4px;
2370
+ --wds-avatar-size-tiny: 20px;
2353
2371
  --wds-avatar-text-fill: #151414;
2354
2372
  --wds-background-blur-0: 0px;
2355
2373
  --wds-background-blur-50: 4px;
@@ -2569,7 +2587,7 @@
2569
2587
  --wds-card-content-padding-medium: 12px;
2570
2588
  --wds-card-content-padding-medium-bottom: 24px;
2571
2589
  --wds-card-content-padding-medium-horizontal: 24px;
2572
- --wds-card-content-padding-medium-top: 12px;
2590
+ --wds-card-content-padding-medium-top: 4px;
2573
2591
  --wds-card-content-paddings-horizontal: 12px;
2574
2592
  --wds-card-content-paddings-vertical: 12px;
2575
2593
  --wds-card-divider-opacity: 0;
@@ -2594,6 +2612,7 @@
2594
2612
  --wds-card-header-divider-width: 0px;
2595
2613
  --wds-card-header-padding-horizontal: 24px;
2596
2614
  --wds-card-header-padding-vertical: 24px;
2615
+ --wds-card-header-suffix-align: flex-start;
2597
2616
  --wds-card-header-title-subtitle-gap: 4px;
2598
2617
  --wds-card-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
2599
2618
  --wds-card-subtitle-color: #44485f;
@@ -2993,6 +3012,7 @@
2993
3012
  --wds-color-fill-surface-overlay-dark: #151414;
2994
3013
  --wds-color-fill-surface-premium: #f5f7ff;
2995
3014
  --wds-color-fill-surface-raised: #ffffff;
3015
+ --wds-color-fill-surface-stage: #F7F7F7;
2996
3016
  --wds-color-fill-surface-standard: #d5dfff;
2997
3017
  --wds-color-fill-surface-success: #effae5;
2998
3018
  --wds-color-fill-surface-sunken: #f8f6f6;
@@ -3165,6 +3185,9 @@
3165
3185
  --wds-counter-badge-size-small: 18px;
3166
3186
  --wds-counter-badge-size-tiny: 14px;
3167
3187
  --wds-custom-modal-border-radius: 12px;
3188
+ --wds-custom-modal-close-button-fill: #f0efef;
3189
+ --wds-custom-modal-close-button-icon-size: 8px;
3190
+ --wds-custom-modal-close-button-size: 24px;
3168
3191
  --wds-custom-modal-content-padding-horizontal: 24px;
3169
3192
  --wds-custom-modal-content-padding-vertical: 24px;
3170
3193
  --wds-custom-modal-footer-padding-horizontal: 24px;
@@ -4187,6 +4210,15 @@
4187
4210
  --wds-space-padding-vertical-x-tiny: 8px;
4188
4211
  --wds-space-padding-vertical-xx-tiny: 4px;
4189
4212
  --wds-space-viewport-spacing: 48px;
4213
+ --wds-statistics-widget-description-font-line-height: 16px;
4214
+ --wds-statistics-widget-description-font-size: 12px;
4215
+ --wds-statistics-widget-description-info-gap: 2px;
4216
+ --wds-statistics-widget-trend-space-top: 0px;
4217
+ --wds-statistics-widget-value-font-family-tiny: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
4218
+ --wds-statistics-widget-value-font-letter-spacing: -0.5px;
4219
+ --wds-statistics-widget-value-font-line-height-tiny: 32px;
4220
+ --wds-statistics-widget-value-font-size-tiny: 24px;
4221
+ --wds-statistics-widget-value-font-weight-tiny: 500;
4190
4222
  --wds-status-toast-info-icon-fill: #ffffff;
4191
4223
  --wds-status-toast-text-font-line-height: 18px;
4192
4224
  --wds-status-toast-text-font-size: 14px;
package/odeditor/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);
@@ -277,6 +279,7 @@
277
279
  @property st-global(--wds-card-header-divider-width);
278
280
  @property st-global(--wds-card-header-padding-horizontal);
279
281
  @property st-global(--wds-card-header-padding-vertical);
282
+ @property st-global(--wds-card-header-suffix-align);
280
283
  @property st-global(--wds-card-header-title-subtitle-gap);
281
284
  @property st-global(--wds-card-shadow);
282
285
  @property st-global(--wds-card-subtitle-color);
@@ -382,6 +385,9 @@
382
385
  @property st-global(--wds-counter-badge-size-small);
383
386
  @property st-global(--wds-counter-badge-size-tiny);
384
387
  @property st-global(--wds-custom-modal-border-radius);
388
+ @property st-global(--wds-custom-modal-close-button-fill);
389
+ @property st-global(--wds-custom-modal-close-button-icon-size);
390
+ @property st-global(--wds-custom-modal-close-button-size);
385
391
  @property st-global(--wds-custom-modal-content-padding-horizontal);
386
392
  @property st-global(--wds-custom-modal-content-padding-vertical);
387
393
  @property st-global(--wds-custom-modal-footer-padding-horizontal);
@@ -1167,6 +1173,15 @@
1167
1173
  @property st-global(--wds-social-post-preview-content-padding-vertical);
1168
1174
  @property st-global(--wds-social-preview-content-padding-horizontal);
1169
1175
  @property st-global(--wds-social-preview-content-padding-vertical);
1176
+ @property st-global(--wds-statistics-widget-description-font-line-height);
1177
+ @property st-global(--wds-statistics-widget-description-font-size);
1178
+ @property st-global(--wds-statistics-widget-description-info-gap);
1179
+ @property st-global(--wds-statistics-widget-trend-space-top);
1180
+ @property st-global(--wds-statistics-widget-value-font-family-tiny);
1181
+ @property st-global(--wds-statistics-widget-value-font-letter-spacing);
1182
+ @property st-global(--wds-statistics-widget-value-font-line-height-tiny);
1183
+ @property st-global(--wds-statistics-widget-value-font-size-tiny);
1184
+ @property st-global(--wds-statistics-widget-value-font-weight-tiny);
1170
1185
  @property st-global(--wds-status-toast-info-icon-fill);
1171
1186
  @property st-global(--wds-status-toast-text-font-line-height);
1172
1187
  @property st-global(--wds-status-toast-text-font-size);
@@ -1595,6 +1610,7 @@
1595
1610
  --wds-announcement-modal-top-controls-gap: 4px;
1596
1611
  --wds-announcement-modal-top-controls-padding-end: 12px;
1597
1612
  --wds-announcement-modal-top-controls-padding-top: 12px;
1613
+ --wds-avatar-color-7-fill: #BCD7C3;
1598
1614
  --wds-avatar-group-counter-background-blur: 4px;
1599
1615
  --wds-avatar-group-counter-border-fill: #ffffff;
1600
1616
  --wds-avatar-group-counter-border-width: 1px;
@@ -1604,6 +1620,7 @@
1604
1620
  --wds-avatar-group-counter-fill-hover: #e8e7e7;
1605
1621
  --wds-avatar-group-gap-condensed: -2px;
1606
1622
  --wds-avatar-group-gap-default: 4px;
1623
+ --wds-avatar-size-tiny: 20px;
1607
1624
  --wds-avatar-text-fill: #151414;
1608
1625
  --wds-badge-border-radius-medium: 4px;
1609
1626
  --wds-badge-border-radius-small: 4px;
@@ -1782,7 +1799,7 @@
1782
1799
  --wds-card-content-padding-medium: 12px;
1783
1800
  --wds-card-content-padding-medium-bottom: 24px;
1784
1801
  --wds-card-content-padding-medium-horizontal: 24px;
1785
- --wds-card-content-padding-medium-top: 12px;
1802
+ --wds-card-content-padding-medium-top: 4px;
1786
1803
  --wds-card-content-paddings-horizontal: 12px;
1787
1804
  --wds-card-content-paddings-vertical: 12px;
1788
1805
  --wds-card-divider-opacity: 0;
@@ -1807,6 +1824,7 @@
1807
1824
  --wds-card-header-divider-width: 0px;
1808
1825
  --wds-card-header-padding-horizontal: 24px;
1809
1826
  --wds-card-header-padding-vertical: 24px;
1827
+ --wds-card-header-suffix-align: flex-start;
1810
1828
  --wds-card-header-title-subtitle-gap: 4px;
1811
1829
  --wds-card-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
1812
1830
  --wds-card-subtitle-color: #44485f;
@@ -1912,6 +1930,9 @@
1912
1930
  --wds-counter-badge-size-small: 18px;
1913
1931
  --wds-counter-badge-size-tiny: 14px;
1914
1932
  --wds-custom-modal-border-radius: 12px;
1933
+ --wds-custom-modal-close-button-fill: #f0efef;
1934
+ --wds-custom-modal-close-button-icon-size: 8px;
1935
+ --wds-custom-modal-close-button-size: 24px;
1915
1936
  --wds-custom-modal-content-padding-horizontal: 24px;
1916
1937
  --wds-custom-modal-content-padding-vertical: 24px;
1917
1938
  --wds-custom-modal-footer-padding-horizontal: 24px;
@@ -2697,6 +2718,15 @@
2697
2718
  --wds-social-post-preview-content-padding-vertical: 12px;
2698
2719
  --wds-social-preview-content-padding-horizontal: 12px;
2699
2720
  --wds-social-preview-content-padding-vertical: 8px;
2721
+ --wds-statistics-widget-description-font-line-height: 16px;
2722
+ --wds-statistics-widget-description-font-size: 12px;
2723
+ --wds-statistics-widget-description-info-gap: 2px;
2724
+ --wds-statistics-widget-trend-space-top: 0px;
2725
+ --wds-statistics-widget-value-font-family-tiny: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2726
+ --wds-statistics-widget-value-font-letter-spacing: -0.5px;
2727
+ --wds-statistics-widget-value-font-line-height-tiny: 32px;
2728
+ --wds-statistics-widget-value-font-size-tiny: 24px;
2729
+ --wds-statistics-widget-value-font-weight-tiny: 500;
2700
2730
  --wds-status-toast-info-icon-fill: #ffffff;
2701
2731
  --wds-status-toast-text-font-line-height: 18px;
2702
2732
  --wds-status-toast-text-font-size: 14px;
package/odeditor/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: #151414;
804
805
  --wds-color-fill-surface-premium: #f5f7ff;
805
806
  --wds-color-fill-surface-raised: #ffffff;
807
+ --wds-color-fill-surface-stage: #F7F7F7;
806
808
  --wds-color-fill-surface-standard: #d5dfff;
807
809
  --wds-color-fill-surface-success: #effae5;
808
810
  --wds-color-fill-surface-sunken: #f8f6f6;
package/odeditor-dark/all.css CHANGED
@@ -352,6 +352,7 @@
352
352
  --wds-tabs-selection-height: 3px;
353
353
  --wds-swatches-swatch-size-tiny: 22px;
354
354
  --wds-status-toast-width: 600px;
355
+ --wds-statistics-widget-value-font-letter-spacing: -0.5px;
355
356
  --wds-slider-track-size-transparent: 2px;
356
357
  --wds-slider-track-size: 2px;
357
358
  --wds-slider-slider-knob-size-transparent: 16px;
@@ -423,11 +424,13 @@
423
424
  --wds-composer-sidebar-bottom-width: 88px;
424
425
  --wds-color-picker-width: 236px;
425
426
  --wds-card-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
427
+ --wds-card-header-suffix-align: flex-start;
426
428
  --wds-card-divider-opacity: 0;
427
429
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
428
430
  --wds-breadcrumbs-height-medium: 26px;
429
431
  --wds-avatar-group-gap-condensed: -2px;
430
432
  --wds-avatar-group-counter-background-blur: 4px;
433
+ --wds-avatar-size-tiny: 20px;
431
434
  --wds-announcement-modal-footnote-content-alignment: start;
432
435
  --wds-announcement-modal-close-button-icon-size: 8px;
433
436
  --wds-angle-input-knob-size: 6px;
@@ -634,6 +637,7 @@
634
637
  --wds-color-fill-surface-sunken: var(--wds-color-black-750);
635
638
  --wds-color-fill-surface-success: var(--wds-color-green-500);
636
639
  --wds-color-fill-surface-standard: var(--wds-color-blue-400);
640
+ --wds-color-fill-surface-stage: var(--wds-color-black-750);
637
641
  --wds-color-fill-surface-raised: var(--wds-color-white);
638
642
  --wds-color-fill-surface-premium: var(--wds-color-blue-600);
639
643
  --wds-color-fill-surface-overlay-dark: var(--wds-color-black-100);
@@ -1053,6 +1057,9 @@
1053
1057
  --wds-suffix-active-font-weight: var(--wds-font-weight-semi-bold);
1054
1058
  --wds-stepper-prefix-size-number: var(--wds-space-600);
1055
1059
  --wds-stepper-prefix-size-circle: var(--wds-space-700);
1060
+ --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-display);
1061
+ --wds-statistics-widget-trend-space-top: var(--wds-space-0);
1062
+ --wds-statistics-widget-description-info-gap: var(--wds-space-50);
1056
1063
  --wds-social-preview-content-padding-vertical: var(--wds-space-200);
1057
1064
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
1058
1065
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
@@ -1490,6 +1497,8 @@
1490
1497
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1491
1498
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1492
1499
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1500
+ --wds-custom-modal-close-button-size: var(--wds-space-600);
1501
+ --wds-custom-modal-close-button-icon-size: var(--wds-space-200);
1493
1502
  --wds-counter-badge-size-tiny: var(--wds-space-350);
1494
1503
  --wds-counter-badge-size-small: var(--wds-space-475);
1495
1504
  --wds-counter-badge-size-medium: var(--wds-space-600);
@@ -1560,15 +1569,16 @@
1560
1569
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1561
1570
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1562
1571
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1563
- --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1572
+ --wds-card-subtitle-font-size: var(--wds-font-size-200);
1573
+ --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1564
1574
  --wds-card-header-padding-vertical: var(--wds-space-400);
1565
1575
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1566
1576
  --wds-card-header-divider-width: var(--wds-border-width-none);
1567
1577
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1568
1578
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1569
- --wds-card-content-padding-medium-top: var(--wds-space-300);
1570
- --wds-card-content-padding-medium-horizontal: var(--wds-space-300);
1571
- --wds-card-content-padding-medium-bottom: var(--wds-space-300);
1579
+ --wds-card-content-padding-medium-top: var(--wds-space-100);
1580
+ --wds-card-content-padding-medium-horizontal: var(--wds-space-600);
1581
+ --wds-card-content-padding-medium-bottom: var(--wds-space-600);
1572
1582
  --wds-card-content-padding-medium: var(--wds-space-300);
1573
1583
  --wds-card-content-padding-large: var(--wds-space-300);
1574
1584
  --wds-button-size-x-tiny: var(--wds-space-475);
@@ -1688,6 +1698,7 @@
1688
1698
  --wds-avatar-group-counter-fill: var(--wds-color-white-transparent-50);
1689
1699
  --wds-avatar-group-counter-border-width: var(--wds-border-width-100);
1690
1700
  --wds-avatar-group-counter-border-fill: var(--wds-color-white);
1701
+ --wds-avatar-color-7-fill: var(--wds-color-fill-accent-7);
1691
1702
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-300);
1692
1703
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-300);
1693
1704
  --wds-announcement-modal-top-controls-gap: var(--wds-space-100);
@@ -1837,6 +1848,9 @@
1837
1848
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1838
1849
  --wds-status-toast-text-font-size: var(--wds-font-size-body-small);
1839
1850
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary);
1851
+ --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-heading-2);
1852
+ --wds-statistics-widget-value-font-size-tiny: var(--wds-font-size-heading-2);
1853
+ --wds-statistics-widget-description-font-size: var(--wds-font-size-body-tiny);
1840
1854
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1841
1855
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
1842
1856
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-tertiary);
@@ -2076,6 +2090,7 @@
2076
2090
  --wds-date-picker-icon-fill: var(--wds-color-text-standard-secondary);
2077
2091
  --wds-custom-modal-header-subtitle-font-size: var(--wds-font-size-body-small);
2078
2092
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
2093
+ --wds-custom-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
2079
2094
  --wds-custom-modal-border-radius: var(--wds-border-radius-surface-modal);
2080
2095
  --wds-close-button-standard-filled-text-hover: var(--wds-color-text-standard-primary);
2081
2096
  --wds-close-button-standard-filled-text-disabled: var(--wds-color-text-disabled);
@@ -2115,7 +2130,7 @@
2115
2130
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
2116
2131
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
2117
2132
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
2118
- --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
2133
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-200);
2119
2134
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2120
2135
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
2121
2136
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
@@ -2218,6 +2233,8 @@
2218
2233
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-small);
2219
2234
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2220
2235
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2236
+ --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-heading-2);
2237
+ --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-tiny);
2221
2238
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-body-small);
2222
2239
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
2223
2240
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-small);
@@ -2255,7 +2272,6 @@
2255
2272
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2256
2273
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
2257
2274
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2258
- --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2259
2275
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2260
2276
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-tiny);
2261
2277
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/odeditor-dark/all.scss CHANGED
@@ -42,6 +42,7 @@
42
42
  --wds-tabs-selection-height: 3px;
43
43
  --wds-swatches-swatch-size-tiny: 22px;
44
44
  --wds-status-toast-width: 600px;
45
+ --wds-statistics-widget-value-font-letter-spacing: -0.5px;
45
46
  --wds-space-2400: 96px;
46
47
  --wds-space-1700: 68px;
47
48
  --wds-space-1600: 64px;
@@ -393,6 +394,7 @@
393
394
  --wds-color-black-100-transparent-0: rgba(255, 255, 255, 0);
394
395
  --wds-color-black-100: #FFFFFF;
395
396
  --wds-card-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
397
+ --wds-card-header-suffix-align: flex-start;
396
398
  --wds-card-divider-opacity: 0;
397
399
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
398
400
  --wds-breakpoint-x-large: 1572px;
@@ -426,6 +428,7 @@
426
428
  --wds-background-blur-100: 8px;
427
429
  --wds-background-blur-50: 4px;
428
430
  --wds-background-blur-0: 0px;
431
+ --wds-avatar-size-tiny: 20px;
429
432
  --wds-avatar-group-gap-condensed: -2px;
430
433
  --wds-avatar-group-counter-background-blur: 4px;
431
434
  --wds-announcement-modal-footnote-content-alignment: start;
@@ -633,6 +636,9 @@
633
636
  --wds-suffix-active-font-weight: var(--wds-font-weight-semi-bold);
634
637
  --wds-stepper-prefix-size-number: var(--wds-space-600);
635
638
  --wds-stepper-prefix-size-circle: var(--wds-space-700);
639
+ --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-display);
640
+ --wds-statistics-widget-trend-space-top: var(--wds-space-0);
641
+ --wds-statistics-widget-description-info-gap: var(--wds-space-50);
636
642
  --wds-space-viewport-spacing: var(--wds-space-1200);
637
643
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-100);
638
644
  --wds-space-padding-vertical-x-tiny: var(--wds-space-200);
@@ -1190,6 +1196,8 @@
1190
1196
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1191
1197
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1192
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);
1193
1201
  --wds-counter-badge-size-tiny: var(--wds-space-350);
1194
1202
  --wds-counter-badge-size-small: var(--wds-space-475);
1195
1203
  --wds-counter-badge-size-medium: var(--wds-space-600);
@@ -1286,6 +1294,7 @@
1286
1294
  --wds-color-fill-surface-sunken: var(--wds-color-black-750);
1287
1295
  --wds-color-fill-surface-success: var(--wds-color-green-500);
1288
1296
  --wds-color-fill-surface-standard: var(--wds-color-blue-400);
1297
+ --wds-color-fill-surface-stage: var(--wds-color-black-750);
1289
1298
  --wds-color-fill-surface-raised: var(--wds-color-white);
1290
1299
  --wds-color-fill-surface-premium: var(--wds-color-blue-600);
1291
1300
  --wds-color-fill-surface-overlay-dark: var(--wds-color-black-100);
@@ -1538,7 +1547,8 @@
1538
1547
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1539
1548
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1540
1549
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1541
- --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1550
+ --wds-card-subtitle-font-size: var(--wds-font-size-200);
1551
+ --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1542
1552
  --wds-card-header-padding-vertical: var(--wds-space-400);
1543
1553
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1544
1554
  --wds-card-header-divider-width: var(--wds-border-width-none);
@@ -1555,9 +1565,9 @@
1555
1565
  --wds-card-gallery-item-buttons-gap: var(--wds-space-200);
1556
1566
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1557
1567
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1558
- --wds-card-content-padding-medium-top: var(--wds-space-300);
1559
- --wds-card-content-padding-medium-horizontal: var(--wds-space-300);
1560
- --wds-card-content-padding-medium-bottom: var(--wds-space-300);
1568
+ --wds-card-content-padding-medium-top: var(--wds-space-100);
1569
+ --wds-card-content-padding-medium-horizontal: var(--wds-space-600);
1570
+ --wds-card-content-padding-medium-bottom: var(--wds-space-600);
1561
1571
  --wds-card-content-padding-medium: var(--wds-space-300);
1562
1572
  --wds-card-content-padding-large: var(--wds-space-300);
1563
1573
  --wds-button-size-x-tiny: var(--wds-space-475);
@@ -1688,6 +1698,7 @@
1688
1698
  --wds-avatar-group-counter-fill: var(--wds-color-white-transparent-50);
1689
1699
  --wds-avatar-group-counter-border-width: var(--wds-border-width-100);
1690
1700
  --wds-avatar-group-counter-border-fill: var(--wds-color-white);
1701
+ --wds-avatar-color-7-fill: var(--wds-color-fill-accent-7);
1691
1702
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-300);
1692
1703
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-300);
1693
1704
  --wds-announcement-modal-top-controls-gap: var(--wds-space-100);
@@ -1822,6 +1833,9 @@
1822
1833
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1823
1834
  --wds-status-toast-text-font-size: var(--wds-font-size-body-small);
1824
1835
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary);
1836
+ --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-heading-2);
1837
+ --wds-statistics-widget-value-font-size-tiny: var(--wds-font-size-heading-2);
1838
+ --wds-statistics-widget-description-font-size: var(--wds-font-size-body-tiny);
1825
1839
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1826
1840
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
1827
1841
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-tertiary);
@@ -2076,6 +2090,7 @@
2076
2090
  --wds-date-picker-icon-fill: var(--wds-color-text-standard-secondary);
2077
2091
  --wds-custom-modal-header-subtitle-font-size: var(--wds-font-size-body-small);
2078
2092
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
2093
+ --wds-custom-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
2079
2094
  --wds-custom-modal-border-radius: var(--wds-border-radius-surface-modal);
2080
2095
  --wds-close-button-standard-filled-text-hover: var(--wds-color-text-standard-primary);
2081
2096
  --wds-close-button-standard-filled-text-disabled: var(--wds-color-text-disabled);
@@ -2110,7 +2125,7 @@
2110
2125
  --wds-checkbox-border-disabled: var(--wds-color-border-transparent-primary);
2111
2126
  --wds-checkbox-border-active: var(--wds-color-border-standard-primary-active);
2112
2127
  --wds-carousel-controls-shadow: 0 var(--wds-shadow-y-primary-modal) var(--wds-shadow-blur-primary-modal) var(--wds-shadow-fill-primary-modal), 0 var(--wds-shadow-blur-secondary-modal) var(--wds-shadow-y-secondary-modal) var(--wds-shadow-fill-secondary-modal);
2113
- --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
2128
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-200);
2114
2129
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2115
2130
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-medium);
2116
2131
  --wds-card-gallery-item-subtitle-side-font-size-medium: var(--wds-font-size-body-small);
@@ -2218,6 +2233,8 @@
2218
2233
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-small);
2219
2234
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2220
2235
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2236
+ --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-heading-2);
2237
+ --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-tiny);
2221
2238
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-body-small);
2222
2239
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
2223
2240
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-small);
@@ -2253,7 +2270,6 @@
2253
2270
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
2254
2271
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2255
2272
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2256
- --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2257
2273
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
2258
2274
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2259
2275
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/odeditor-dark/all.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-background-blur-0);
79
81
  @property st-global(--wds-background-blur-50);
@@ -321,6 +323,7 @@
321
323
  @property st-global(--wds-card-header-divider-width);
322
324
  @property st-global(--wds-card-header-padding-horizontal);
323
325
  @property st-global(--wds-card-header-padding-vertical);
326
+ @property st-global(--wds-card-header-suffix-align);
324
327
  @property st-global(--wds-card-header-title-subtitle-gap);
325
328
  @property st-global(--wds-card-shadow);
326
329
  @property st-global(--wds-card-subtitle-color);
@@ -721,6 +724,7 @@
721
724
  @property st-global(--wds-color-fill-surface-overlay-dark);
722
725
  @property st-global(--wds-color-fill-surface-premium);
723
726
  @property st-global(--wds-color-fill-surface-raised);
727
+ @property st-global(--wds-color-fill-surface-stage);
724
728
  @property st-global(--wds-color-fill-surface-standard);
725
729
  @property st-global(--wds-color-fill-surface-success);
726
730
  @property st-global(--wds-color-fill-surface-sunken);
@@ -893,6 +897,9 @@
893
897
  @property st-global(--wds-counter-badge-size-small);
894
898
  @property st-global(--wds-counter-badge-size-tiny);
895
899
  @property st-global(--wds-custom-modal-border-radius);
900
+ @property st-global(--wds-custom-modal-close-button-fill);
901
+ @property st-global(--wds-custom-modal-close-button-icon-size);
902
+ @property st-global(--wds-custom-modal-close-button-size);
896
903
  @property st-global(--wds-custom-modal-content-padding-horizontal);
897
904
  @property st-global(--wds-custom-modal-content-padding-vertical);
898
905
  @property st-global(--wds-custom-modal-footer-padding-horizontal);
@@ -1904,6 +1911,15 @@
1904
1911
  @property st-global(--wds-space-padding-vertical-x-tiny);
1905
1912
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1906
1913
  @property st-global(--wds-space-viewport-spacing);
1914
+ @property st-global(--wds-statistics-widget-description-font-line-height);
1915
+ @property st-global(--wds-statistics-widget-description-font-size);
1916
+ @property st-global(--wds-statistics-widget-description-info-gap);
1917
+ @property st-global(--wds-statistics-widget-trend-space-top);
1918
+ @property st-global(--wds-statistics-widget-value-font-family-tiny);
1919
+ @property st-global(--wds-statistics-widget-value-font-letter-spacing);
1920
+ @property st-global(--wds-statistics-widget-value-font-line-height-tiny);
1921
+ @property st-global(--wds-statistics-widget-value-font-size-tiny);
1922
+ @property st-global(--wds-statistics-widget-value-font-weight-tiny);
1907
1923
  @property st-global(--wds-status-toast-info-icon-fill);
1908
1924
  @property st-global(--wds-status-toast-text-font-line-height);
1909
1925
  @property st-global(--wds-status-toast-text-font-size);
@@ -2334,6 +2350,7 @@
2334
2350
  --wds-announcement-modal-top-controls-gap: 4px;
2335
2351
  --wds-announcement-modal-top-controls-padding-end: 12px;
2336
2352
  --wds-announcement-modal-top-controls-padding-top: 12px;
2353
+ --wds-avatar-color-7-fill: #BCD7C3;
2337
2354
  --wds-avatar-group-counter-background-blur: 4px;
2338
2355
  --wds-avatar-group-counter-border-fill: #212122;
2339
2356
  --wds-avatar-group-counter-border-width: 1px;
@@ -2343,6 +2360,7 @@
2343
2360
  --wds-avatar-group-counter-fill-hover: #454544;
2344
2361
  --wds-avatar-group-gap-condensed: -2px;
2345
2362
  --wds-avatar-group-gap-default: 4px;
2363
+ --wds-avatar-size-tiny: 20px;
2346
2364
  --wds-avatar-text-fill: #212122;
2347
2365
  --wds-background-blur-0: 0px;
2348
2366
  --wds-background-blur-50: 4px;
@@ -2563,9 +2581,9 @@
2563
2581
  --wds-card-border-radius: 12px;
2564
2582
  --wds-card-content-padding-large: 12px;
2565
2583
  --wds-card-content-padding-medium: 12px;
2566
- --wds-card-content-padding-medium-bottom: 12px;
2567
- --wds-card-content-padding-medium-horizontal: 12px;
2568
- --wds-card-content-padding-medium-top: 12px;
2584
+ --wds-card-content-padding-medium-bottom: 24px;
2585
+ --wds-card-content-padding-medium-horizontal: 24px;
2586
+ --wds-card-content-padding-medium-top: 4px;
2569
2587
  --wds-card-content-paddings-horizontal: 12px;
2570
2588
  --wds-card-content-paddings-vertical: 12px;
2571
2589
  --wds-card-divider-opacity: 0;
@@ -2590,11 +2608,12 @@
2590
2608
  --wds-card-header-divider-width: 0px;
2591
2609
  --wds-card-header-padding-horizontal: 24px;
2592
2610
  --wds-card-header-padding-vertical: 16px;
2593
- --wds-card-header-title-subtitle-gap: 0px;
2611
+ --wds-card-header-suffix-align: flex-start;
2612
+ --wds-card-header-title-subtitle-gap: 4px;
2594
2613
  --wds-card-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
2595
2614
  --wds-card-subtitle-color: #D4D3D2;
2596
- --wds-card-subtitle-font-size: 16px;
2597
- --wds-card-subtitle-line-height: 24px;
2615
+ --wds-card-subtitle-font-size: 12px;
2616
+ --wds-card-subtitle-line-height: 16px;
2598
2617
  --wds-card-tab-padding-horizontal-medium: 20px;
2599
2618
  --wds-card-tab-padding-horizontal-small: 20px;
2600
2619
  --wds-card-tab-padding-vertical-medium: 16px;
@@ -2990,6 +3009,7 @@
2990
3009
  --wds-color-fill-surface-overlay-dark: #FFFFFF;
2991
3010
  --wds-color-fill-surface-premium: #111214;
2992
3011
  --wds-color-fill-surface-raised: #212122;
3012
+ --wds-color-fill-surface-stage: #2D2D2E;
2993
3013
  --wds-color-fill-surface-standard: #2D354E;
2994
3014
  --wds-color-fill-surface-success: #264B43;
2995
3015
  --wds-color-fill-surface-sunken: #2D2D2E;
@@ -3162,6 +3182,9 @@
3162
3182
  --wds-counter-badge-size-small: 18px;
3163
3183
  --wds-counter-badge-size-tiny: 14px;
3164
3184
  --wds-custom-modal-border-radius: 12px;
3185
+ --wds-custom-modal-close-button-fill: #3A3A3B;
3186
+ --wds-custom-modal-close-button-icon-size: 8px;
3187
+ --wds-custom-modal-close-button-size: 24px;
3165
3188
  --wds-custom-modal-content-padding-horizontal: 24px;
3166
3189
  --wds-custom-modal-content-padding-vertical: 24px;
3167
3190
  --wds-custom-modal-footer-padding-horizontal: 24px;
@@ -4173,6 +4196,15 @@
4173
4196
  --wds-space-padding-vertical-x-tiny: 8px;
4174
4197
  --wds-space-padding-vertical-xx-tiny: 4px;
4175
4198
  --wds-space-viewport-spacing: 48px;
4199
+ --wds-statistics-widget-description-font-line-height: 16px;
4200
+ --wds-statistics-widget-description-font-size: 12px;
4201
+ --wds-statistics-widget-description-info-gap: 2px;
4202
+ --wds-statistics-widget-trend-space-top: 0px;
4203
+ --wds-statistics-widget-value-font-family-tiny: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
4204
+ --wds-statistics-widget-value-font-letter-spacing: -0.5px;
4205
+ --wds-statistics-widget-value-font-line-height-tiny: 30px;
4206
+ --wds-statistics-widget-value-font-size-tiny: 24px;
4207
+ --wds-statistics-widget-value-font-weight-tiny: 500;
4176
4208
  --wds-status-toast-info-icon-fill: #FFFFFF;
4177
4209
  --wds-status-toast-text-font-line-height: 18px;
4178
4210
  --wds-status-toast-text-font-size: 14px;