@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/wixel/all.scss CHANGED
@@ -13,6 +13,8 @@
13
13
  --wds-thumbnail-border-width-default: 0px;
14
14
  --wds-tabs-selection-height: 1px;
15
15
  --wds-status-toast-width: 600px;
16
+ --wds-statistics-widget-trend-space-top: 5px;
17
+ --wds-statistics-widget-description-info-gap: 6px;
16
18
  --wds-space-2400: 96px;
17
19
  --wds-space-1700: 68px;
18
20
  --wds-space-1600: 64px;
@@ -160,6 +162,7 @@
160
162
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
161
163
  --wds-editable-title-marker-line-style: dashed;
162
164
  --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
165
+ --wds-custom-modal-close-button-fill: transparent;
163
166
  --wds-counter-badge-padding-horizontal-tiny: 4px;
164
167
  --wds-counter-badge-font-size-tiny: 10px;
165
168
  --wds-composer-sidebar-end-max-width: 240px;
@@ -363,6 +366,7 @@
363
366
  --wds-color-black-100-transparent-5: rgba(38, 37, 36, 0.0500);
364
367
  --wds-color-black-100-transparent-0: rgba(38, 37, 36, 0.0000);
365
368
  --wds-color-black-100: #000624;
369
+ --wds-card-header-suffix-align: center;
366
370
  --wds-card-gallery-item-overlay-fill: rgba(76, 73, 251, 0.1500);
367
371
  --wds-card-divider-opacity: 1;
368
372
  --wds-card-base-shadow: none;
@@ -401,6 +405,7 @@
401
405
  --wds-background-blur-100: 8px;
402
406
  --wds-background-blur-50: 4px;
403
407
  --wds-background-blur-0: 0px;
408
+ --wds-avatar-size-tiny: 18px;
404
409
  --wds-avatar-group-gap-condensed: -2px;
405
410
  --wds-announcement-modal-help-button-fill: transparent;
406
411
  --wds-announcement-modal-footnote-content-alignment: center;
@@ -599,6 +604,9 @@
599
604
  --wds-swatches-fill-border-disabled: var(--wds-color-black-100-transparent-0);
600
605
  --wds-stepper-prefix-size-number: var(--wds-space-600);
601
606
  --wds-stepper-prefix-size-circle: var(--wds-space-700);
607
+ --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-bold);
608
+ --wds-statistics-widget-value-font-letter-spacing: var(--wds-font-letter-spacing-0);
609
+ --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-default);
602
610
  --wds-space-viewport-spacing: var(--wds-space-1200);
603
611
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-100);
604
612
  --wds-space-padding-vertical-x-tiny: var(--wds-space-200);
@@ -1118,6 +1126,8 @@
1118
1126
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-600);
1119
1127
  --wds-custom-modal-content-padding-vertical: var(--wds-space-600);
1120
1128
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-600);
1129
+ --wds-custom-modal-close-button-size: var(--wds-space-700);
1130
+ --wds-custom-modal-close-button-icon-size: var(--wds-space-300);
1121
1131
  --wds-custom-modal-border-radius: var(--wds-border-radius-200);
1122
1132
  --wds-counter-badge-size-tiny: var(--wds-space-350);
1123
1133
  --wds-counter-badge-size-small: var(--wds-space-475);
@@ -1209,6 +1219,7 @@
1209
1219
  --wds-color-fill-surface-sunken: var(--wds-color-black-750);
1210
1220
  --wds-color-fill-surface-success: var(--wds-color-green-500);
1211
1221
  --wds-color-fill-surface-standard: var(--wds-color-blue-400);
1222
+ --wds-color-fill-surface-stage: var(--wds-color-black-750);
1212
1223
  --wds-color-fill-surface-raised: var(--wds-color-white);
1213
1224
  --wds-color-fill-surface-premium: var(--wds-color-purple-500);
1214
1225
  --wds-color-fill-surface-overlay-dark: var(--wds-color-black-100);
@@ -1542,6 +1553,7 @@
1542
1553
  --wds-background-blur-surface-overlay: var(--wds-background-blur-0);
1543
1554
  --wds-background-blur-modal: var(--wds-background-blur-0);
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);
@@ -1704,6 +1716,8 @@
1704
1716
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1705
1717
  --wds-status-toast-text-font-size: var(--wds-font-size-body-tiny);
1706
1718
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1719
+ --wds-statistics-widget-value-font-size-tiny: var(--wds-font-size-body-medium);
1720
+ --wds-statistics-widget-description-font-size: var(--wds-font-size-body-small);
1707
1721
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1708
1722
  --wds-sidebar-item-title: var(--wds-color-text-standard-secondary-light);
1709
1723
  --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);
package/wixel/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);
@@ -699,6 +702,7 @@
699
702
  @property st-global(--wds-color-fill-surface-overlay-dark);
700
703
  @property st-global(--wds-color-fill-surface-premium);
701
704
  @property st-global(--wds-color-fill-surface-raised);
705
+ @property st-global(--wds-color-fill-surface-stage);
702
706
  @property st-global(--wds-color-fill-surface-standard);
703
707
  @property st-global(--wds-color-fill-surface-success);
704
708
  @property st-global(--wds-color-fill-surface-sunken);
@@ -868,6 +872,9 @@
868
872
  @property st-global(--wds-counter-badge-size-small);
869
873
  @property st-global(--wds-counter-badge-size-tiny);
870
874
  @property st-global(--wds-custom-modal-border-radius);
875
+ @property st-global(--wds-custom-modal-close-button-fill);
876
+ @property st-global(--wds-custom-modal-close-button-icon-size);
877
+ @property st-global(--wds-custom-modal-close-button-size);
871
878
  @property st-global(--wds-custom-modal-content-padding-horizontal);
872
879
  @property st-global(--wds-custom-modal-content-padding-vertical);
873
880
  @property st-global(--wds-custom-modal-footer-padding-horizontal);
@@ -1864,6 +1871,15 @@
1864
1871
  @property st-global(--wds-space-padding-vertical-x-tiny);
1865
1872
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1866
1873
  @property st-global(--wds-space-viewport-spacing);
1874
+ @property st-global(--wds-statistics-widget-description-font-line-height);
1875
+ @property st-global(--wds-statistics-widget-description-font-size);
1876
+ @property st-global(--wds-statistics-widget-description-info-gap);
1877
+ @property st-global(--wds-statistics-widget-trend-space-top);
1878
+ @property st-global(--wds-statistics-widget-value-font-family-tiny);
1879
+ @property st-global(--wds-statistics-widget-value-font-letter-spacing);
1880
+ @property st-global(--wds-statistics-widget-value-font-line-height-tiny);
1881
+ @property st-global(--wds-statistics-widget-value-font-size-tiny);
1882
+ @property st-global(--wds-statistics-widget-value-font-weight-tiny);
1867
1883
  @property st-global(--wds-status-toast-info-icon-fill);
1868
1884
  @property st-global(--wds-status-toast-text-font-line-height);
1869
1885
  @property st-global(--wds-status-toast-text-font-size);
@@ -2285,8 +2301,10 @@
2285
2301
  --wds-announcement-modal-top-controls-gap: 2px;
2286
2302
  --wds-announcement-modal-top-controls-padding-end: 8px;
2287
2303
  --wds-announcement-modal-top-controls-padding-top: 16px;
2304
+ --wds-avatar-color-7-fill: #acafc4;
2288
2305
  --wds-avatar-group-gap-condensed: -2px;
2289
2306
  --wds-avatar-group-gap-default: 4px;
2307
+ --wds-avatar-size-tiny: 18px;
2290
2308
  --wds-avatar-text-fill: #ffffff;
2291
2309
  --wds-background-blur-0: 0px;
2292
2310
  --wds-background-blur-50: 4px;
@@ -2534,6 +2552,7 @@
2534
2552
  --wds-card-header-divider-width: 0px;
2535
2553
  --wds-card-header-padding-horizontal: 24px;
2536
2554
  --wds-card-header-padding-vertical: 16px;
2555
+ --wds-card-header-suffix-align: center;
2537
2556
  --wds-card-header-title-subtitle-gap: 0px;
2538
2557
  --wds-card-shadow: 0 1px 4px rgba(38, 37, 36, 0.3000), 0 2px 4px rgba(38, 37, 36, 0.0000);
2539
2558
  --wds-card-subtitle-color: #595d70;
@@ -2919,6 +2938,7 @@
2919
2938
  --wds-color-fill-surface-overlay-dark: #000624;
2920
2939
  --wds-color-fill-surface-premium: #f1e0f9;
2921
2940
  --wds-color-fill-surface-raised: #ffffff;
2941
+ --wds-color-fill-surface-stage: #f7f8f8;
2922
2942
  --wds-color-fill-surface-standard: #dce2ff;
2923
2943
  --wds-color-fill-surface-success: #e1f4eb;
2924
2944
  --wds-color-fill-surface-sunken: #f7f8f8;
@@ -3088,6 +3108,9 @@
3088
3108
  --wds-counter-badge-size-small: 18px;
3089
3109
  --wds-counter-badge-size-tiny: 14px;
3090
3110
  --wds-custom-modal-border-radius: 4px;
3111
+ --wds-custom-modal-close-button-fill: transparent;
3112
+ --wds-custom-modal-close-button-icon-size: 12px;
3113
+ --wds-custom-modal-close-button-size: 28px;
3091
3114
  --wds-custom-modal-content-padding-horizontal: 24px;
3092
3115
  --wds-custom-modal-content-padding-vertical: 24px;
3093
3116
  --wds-custom-modal-footer-padding-horizontal: 24px;
@@ -4084,6 +4107,15 @@
4084
4107
  --wds-space-padding-vertical-x-tiny: 8px;
4085
4108
  --wds-space-padding-vertical-xx-tiny: 4px;
4086
4109
  --wds-space-viewport-spacing: 48px;
4110
+ --wds-statistics-widget-description-font-line-height: 20px;
4111
+ --wds-statistics-widget-description-font-size: 14px;
4112
+ --wds-statistics-widget-description-info-gap: 6px;
4113
+ --wds-statistics-widget-trend-space-top: 5px;
4114
+ --wds-statistics-widget-value-font-family-tiny: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
4115
+ --wds-statistics-widget-value-font-letter-spacing: 0px;
4116
+ --wds-statistics-widget-value-font-line-height-tiny: 24px;
4117
+ --wds-statistics-widget-value-font-size-tiny: 16px;
4118
+ --wds-statistics-widget-value-font-weight-tiny: 700;
4087
4119
  --wds-status-toast-info-icon-fill: #ffffff;
4088
4120
  --wds-status-toast-text-font-line-height: 16px;
4089
4121
  --wds-status-toast-text-font-size: 12px;
package/wixel/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);
@@ -364,6 +367,9 @@
364
367
  @property st-global(--wds-counter-badge-size-small);
365
368
  @property st-global(--wds-counter-badge-size-tiny);
366
369
  @property st-global(--wds-custom-modal-border-radius);
370
+ @property st-global(--wds-custom-modal-close-button-fill);
371
+ @property st-global(--wds-custom-modal-close-button-icon-size);
372
+ @property st-global(--wds-custom-modal-close-button-size);
367
373
  @property st-global(--wds-custom-modal-content-padding-horizontal);
368
374
  @property st-global(--wds-custom-modal-content-padding-vertical);
369
375
  @property st-global(--wds-custom-modal-footer-padding-horizontal);
@@ -1153,6 +1159,15 @@
1153
1159
  @property st-global(--wds-social-post-preview-content-padding-vertical);
1154
1160
  @property st-global(--wds-social-preview-content-padding-horizontal);
1155
1161
  @property st-global(--wds-social-preview-content-padding-vertical);
1162
+ @property st-global(--wds-statistics-widget-description-font-line-height);
1163
+ @property st-global(--wds-statistics-widget-description-font-size);
1164
+ @property st-global(--wds-statistics-widget-description-info-gap);
1165
+ @property st-global(--wds-statistics-widget-trend-space-top);
1166
+ @property st-global(--wds-statistics-widget-value-font-family-tiny);
1167
+ @property st-global(--wds-statistics-widget-value-font-letter-spacing);
1168
+ @property st-global(--wds-statistics-widget-value-font-line-height-tiny);
1169
+ @property st-global(--wds-statistics-widget-value-font-size-tiny);
1170
+ @property st-global(--wds-statistics-widget-value-font-weight-tiny);
1156
1171
  @property st-global(--wds-status-toast-info-icon-fill);
1157
1172
  @property st-global(--wds-status-toast-text-font-line-height);
1158
1173
  @property st-global(--wds-status-toast-text-font-size);
@@ -1572,8 +1587,10 @@
1572
1587
  --wds-announcement-modal-top-controls-gap: 2px;
1573
1588
  --wds-announcement-modal-top-controls-padding-end: 8px;
1574
1589
  --wds-announcement-modal-top-controls-padding-top: 16px;
1590
+ --wds-avatar-color-7-fill: #acafc4;
1575
1591
  --wds-avatar-group-gap-condensed: -2px;
1576
1592
  --wds-avatar-group-gap-default: 4px;
1593
+ --wds-avatar-size-tiny: 18px;
1577
1594
  --wds-avatar-text-fill: #ffffff;
1578
1595
  --wds-badge-border-radius-medium: 2px;
1579
1596
  --wds-badge-border-radius-small: 2px;
@@ -1783,6 +1800,7 @@
1783
1800
  --wds-card-header-divider-width: 0px;
1784
1801
  --wds-card-header-padding-horizontal: 24px;
1785
1802
  --wds-card-header-padding-vertical: 16px;
1803
+ --wds-card-header-suffix-align: center;
1786
1804
  --wds-card-header-title-subtitle-gap: 0px;
1787
1805
  --wds-card-shadow: 0 1px 4px rgba(38, 37, 36, 0.3000), 0 2px 4px rgba(38, 37, 36, 0.0000);
1788
1806
  --wds-card-subtitle-color: #595d70;
@@ -1871,6 +1889,9 @@
1871
1889
  --wds-counter-badge-size-small: 18px;
1872
1890
  --wds-counter-badge-size-tiny: 14px;
1873
1891
  --wds-custom-modal-border-radius: 4px;
1892
+ --wds-custom-modal-close-button-fill: transparent;
1893
+ --wds-custom-modal-close-button-icon-size: 12px;
1894
+ --wds-custom-modal-close-button-size: 28px;
1874
1895
  --wds-custom-modal-content-padding-horizontal: 24px;
1875
1896
  --wds-custom-modal-content-padding-vertical: 24px;
1876
1897
  --wds-custom-modal-footer-padding-horizontal: 24px;
@@ -2660,6 +2681,15 @@
2660
2681
  --wds-social-post-preview-content-padding-vertical: 12px;
2661
2682
  --wds-social-preview-content-padding-horizontal: 12px;
2662
2683
  --wds-social-preview-content-padding-vertical: 8px;
2684
+ --wds-statistics-widget-description-font-line-height: 20px;
2685
+ --wds-statistics-widget-description-font-size: 14px;
2686
+ --wds-statistics-widget-description-info-gap: 6px;
2687
+ --wds-statistics-widget-trend-space-top: 5px;
2688
+ --wds-statistics-widget-value-font-family-tiny: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2689
+ --wds-statistics-widget-value-font-letter-spacing: 0px;
2690
+ --wds-statistics-widget-value-font-line-height-tiny: 24px;
2691
+ --wds-statistics-widget-value-font-size-tiny: 16px;
2692
+ --wds-statistics-widget-value-font-weight-tiny: 700;
2663
2693
  --wds-status-toast-info-icon-fill: #ffffff;
2664
2694
  --wds-status-toast-text-font-line-height: 16px;
2665
2695
  --wds-status-toast-text-font-size: 12px;
package/wixel/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);
@@ -778,6 +779,7 @@
778
779
  --wds-color-fill-surface-overlay-dark: #000624;
779
780
  --wds-color-fill-surface-premium: #f1e0f9;
780
781
  --wds-color-fill-surface-raised: #ffffff;
782
+ --wds-color-fill-surface-stage: #f7f8f8;
781
783
  --wds-color-fill-surface-standard: #dce2ff;
782
784
  --wds-color-fill-surface-success: #e1f4eb;
783
785
  --wds-color-fill-surface-sunken: #f7f8f8;