@wix/design-system-tokens 1.3.12 → 1.3.14

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 (7) hide show
  1. package/all.st.css +22 -2
  2. package/component.st.css +18 -2
  3. package/package.json +2 -2
  4. package/semantic.st.css +4 -0
  5. package/studio/all.st.css +22 -2
  6. package/studio/component.st.css +18 -2
  7. package/studio/semantic.st.css +4 -0
package/all.st.css CHANGED
@@ -1,9 +1,12 @@
1
+ @property st-global(--wds-add-item-border-radius);
1
2
  @property st-global(--wds-add-item-padding-horizontal-large);
2
3
  @property st-global(--wds-add-item-padding-horizontal-tiny);
3
4
  @property st-global(--wds-add-item-padding-vertical-large);
4
5
  @property st-global(--wds-add-item-padding-vertical-medium);
5
6
  @property st-global(--wds-add-item-padding-vertical-small);
6
7
  @property st-global(--wds-add-item-padding-vertical-tiny);
8
+ @property st-global(--wds-avatar-group-gap-condensed);
9
+ @property st-global(--wds-avatar-group-gap-default);
7
10
  @property st-global(--wds-badge-border-radius-medium);
8
11
  @property st-global(--wds-badge-border-radius-small);
9
12
  @property st-global(--wds-badge-border-radius-tiny);
@@ -24,6 +27,8 @@
24
27
  @property st-global(--wds-border-radius-500);
25
28
  @property st-global(--wds-border-radius-600);
26
29
  @property st-global(--wds-border-radius-full);
30
+ @property st-global(--wds-border-radius-surface-modal);
31
+ @property st-global(--wds-border-radius-surface-overlay);
27
32
  @property st-global(--wds-border-width-100);
28
33
  @property st-global(--wds-border-width-200);
29
34
  @property st-global(--wds-border-width-none);
@@ -506,7 +511,8 @@
506
511
  @property st-global(--wds-dock-foreground-fill-active);
507
512
  @property st-global(--wds-dock-foreground-fill-disabled);
508
513
  @property st-global(--wds-dock-foreground-fill-hover);
509
- @property st-global(--wds-dropdown-layout-border);
514
+ @property st-global(--wds-dropdown-layout-option-size-big);
515
+ @property st-global(--wds-dropdown-layout-option-size-small);
510
516
  @property st-global(--wds-empty-state-border);
511
517
  @property st-global(--wds-empty-state-page-content-paddings);
512
518
  @property st-global(--wds-empty-state-section-content-paddings);
@@ -785,6 +791,10 @@
785
791
  @property st-global(--wds-slider-track-border-radius-transparent);
786
792
  @property st-global(--wds-slider-track-size);
787
793
  @property st-global(--wds-slider-track-size-transparent);
794
+ @property st-global(--wds-social-post-preview-content-padding-horizontal);
795
+ @property st-global(--wds-social-post-preview-content-padding-vertical);
796
+ @property st-global(--wds-social-preview-content-padding-horizontal);
797
+ @property st-global(--wds-social-preview-content-padding-vertical);
788
798
  @property st-global(--wds-space-0);
789
799
  @property st-global(--wds-space-25);
790
800
  @property st-global(--wds-space-50);
@@ -963,12 +973,15 @@
963
973
  @property st-global(--wds-vertical-tabs-section-title-padding-top-tiny);
964
974
 
965
975
  .root {
976
+ --wds-add-item-border-radius: 8px;
966
977
  --wds-add-item-padding-horizontal-large: 30px;
967
978
  --wds-add-item-padding-horizontal-tiny: 12px;
968
979
  --wds-add-item-padding-vertical-large: 30px;
969
980
  --wds-add-item-padding-vertical-medium: 24px;
970
981
  --wds-add-item-padding-vertical-small: 18px;
971
982
  --wds-add-item-padding-vertical-tiny: 12px;
983
+ --wds-avatar-group-gap-condensed: -3px;
984
+ --wds-avatar-group-gap-default: 6px;
972
985
  --wds-badge-border-radius-medium: 2px;
973
986
  --wds-badge-border-radius-small: 2px;
974
987
  --wds-badge-border-radius-tiny: 2px;
@@ -989,6 +1002,8 @@
989
1002
  --wds-border-radius-500: 10px;
990
1003
  --wds-border-radius-600: 12px;
991
1004
  --wds-border-radius-full: 1000px;
1005
+ --wds-border-radius-surface-modal: 8px;
1006
+ --wds-border-radius-surface-overlay: 8px;
992
1007
  --wds-border-width-100: 1px;
993
1008
  --wds-border-width-200: 2px;
994
1009
  --wds-border-width-none: 0;
@@ -1471,7 +1486,8 @@
1471
1486
  --wds-dock-foreground-fill-active: #116dff;
1472
1487
  --wds-dock-foreground-fill-disabled: rgba(0, 6, 36, .3);
1473
1488
  --wds-dock-foreground-fill-hover: #5999ff;
1474
- --wds-dropdown-layout-border: 6px;
1489
+ --wds-dropdown-layout-option-size-big: 48px;
1490
+ --wds-dropdown-layout-option-size-small: 36px;
1475
1491
  --wds-empty-state-border: 8px;
1476
1492
  --wds-empty-state-page-content-paddings: 18px;
1477
1493
  --wds-empty-state-section-content-paddings: 15px;
@@ -1750,6 +1766,10 @@
1750
1766
  --wds-slider-track-border-radius-transparent: 1000px;
1751
1767
  --wds-slider-track-size: 4px;
1752
1768
  --wds-slider-track-size-transparent: 8px;
1769
+ --wds-social-post-preview-content-padding-horizontal: 12px;
1770
+ --wds-social-post-preview-content-padding-vertical: 12px;
1771
+ --wds-social-preview-content-padding-horizontal: 12px;
1772
+ --wds-social-preview-content-padding-vertical: 9px;
1753
1773
  --wds-space-0: 0;
1754
1774
  --wds-space-25: 1px;
1755
1775
  --wds-space-50: 3px;
package/component.st.css CHANGED
@@ -1,9 +1,12 @@
1
+ @property st-global(--wds-add-item-border-radius);
1
2
  @property st-global(--wds-add-item-padding-horizontal-large);
2
3
  @property st-global(--wds-add-item-padding-horizontal-tiny);
3
4
  @property st-global(--wds-add-item-padding-vertical-large);
4
5
  @property st-global(--wds-add-item-padding-vertical-medium);
5
6
  @property st-global(--wds-add-item-padding-vertical-small);
6
7
  @property st-global(--wds-add-item-padding-vertical-tiny);
8
+ @property st-global(--wds-avatar-group-gap-condensed);
9
+ @property st-global(--wds-avatar-group-gap-default);
7
10
  @property st-global(--wds-badge-border-radius-medium);
8
11
  @property st-global(--wds-badge-border-radius-small);
9
12
  @property st-global(--wds-badge-border-radius-tiny);
@@ -127,7 +130,8 @@
127
130
  @property st-global(--wds-dock-foreground-fill-active);
128
131
  @property st-global(--wds-dock-foreground-fill-disabled);
129
132
  @property st-global(--wds-dock-foreground-fill-hover);
130
- @property st-global(--wds-dropdown-layout-border);
133
+ @property st-global(--wds-dropdown-layout-option-size-big);
134
+ @property st-global(--wds-dropdown-layout-option-size-small);
131
135
  @property st-global(--wds-empty-state-border);
132
136
  @property st-global(--wds-empty-state-page-content-paddings);
133
137
  @property st-global(--wds-empty-state-section-content-paddings);
@@ -327,6 +331,10 @@
327
331
  @property st-global(--wds-slider-track-border-radius-transparent);
328
332
  @property st-global(--wds-slider-track-size);
329
333
  @property st-global(--wds-slider-track-size-transparent);
334
+ @property st-global(--wds-social-post-preview-content-padding-horizontal);
335
+ @property st-global(--wds-social-post-preview-content-padding-vertical);
336
+ @property st-global(--wds-social-preview-content-padding-horizontal);
337
+ @property st-global(--wds-social-preview-content-padding-vertical);
330
338
  @property st-global(--wds-stepper-prefix-size-circle);
331
339
  @property st-global(--wds-stepper-prefix-size-number);
332
340
  @property st-global(--wds-swatches-list-gap);
@@ -481,12 +489,15 @@
481
489
  @property st-global(--wds-vertical-tabs-section-title-padding-top-tiny);
482
490
 
483
491
  .root {
492
+ --wds-add-item-border-radius: 8px;
484
493
  --wds-add-item-padding-horizontal-large: 30px;
485
494
  --wds-add-item-padding-horizontal-tiny: 12px;
486
495
  --wds-add-item-padding-vertical-large: 30px;
487
496
  --wds-add-item-padding-vertical-medium: 24px;
488
497
  --wds-add-item-padding-vertical-small: 18px;
489
498
  --wds-add-item-padding-vertical-tiny: 12px;
499
+ --wds-avatar-group-gap-condensed: -3px;
500
+ --wds-avatar-group-gap-default: 6px;
490
501
  --wds-badge-border-radius-medium: 2px;
491
502
  --wds-badge-border-radius-small: 2px;
492
503
  --wds-badge-border-radius-tiny: 2px;
@@ -610,7 +621,8 @@
610
621
  --wds-dock-foreground-fill-active: #116dff;
611
622
  --wds-dock-foreground-fill-disabled: rgba(0, 6, 36, .3);
612
623
  --wds-dock-foreground-fill-hover: #5999ff;
613
- --wds-dropdown-layout-border: 6px;
624
+ --wds-dropdown-layout-option-size-big: 48px;
625
+ --wds-dropdown-layout-option-size-small: 36px;
614
626
  --wds-empty-state-border: 8px;
615
627
  --wds-empty-state-page-content-paddings: 18px;
616
628
  --wds-empty-state-section-content-paddings: 15px;
@@ -810,6 +822,10 @@
810
822
  --wds-slider-track-border-radius-transparent: 1000px;
811
823
  --wds-slider-track-size: 4px;
812
824
  --wds-slider-track-size-transparent: 8px;
825
+ --wds-social-post-preview-content-padding-horizontal: 12px;
826
+ --wds-social-post-preview-content-padding-vertical: 12px;
827
+ --wds-social-preview-content-padding-horizontal: 12px;
828
+ --wds-social-preview-content-padding-vertical: 9px;
813
829
  --wds-stepper-prefix-size-circle: 30px;
814
830
  --wds-stepper-prefix-size-number: 24px;
815
831
  --wds-swatches-list-gap: 12px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.3.12",
3
+ "version": "1.3.14",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "f7484c4b4b52bb83a1061a73be8fec4cc46c53f48cd4bc90a4700359"
36
+ "falconPackageHash": "84bcc2673db4f31206ef98008b5fc4d6635ada4e631c95fa409dbd97"
37
37
  }
package/semantic.st.css CHANGED
@@ -1,3 +1,5 @@
1
+ @property st-global(--wds-border-radius-surface-modal);
2
+ @property st-global(--wds-border-radius-surface-overlay);
1
3
  @property st-global(--wds-color-border-dark-primary);
2
4
  @property st-global(--wds-color-border-dark-primary-active);
3
5
  @property st-global(--wds-color-border-dark-primary-disabled);
@@ -315,6 +317,8 @@
315
317
  @property st-global(--wds-shadow-surface-raised);
316
318
 
317
319
  .root {
320
+ --wds-border-radius-surface-modal: 8px;
321
+ --wds-border-radius-surface-overlay: 8px;
318
322
  --wds-color-border-dark-primary: #868aa5;
319
323
  --wds-color-border-dark-primary-active: #44485f;
320
324
  --wds-color-border-dark-primary-disabled: rgba(0, 6, 36, .1);
package/studio/all.st.css CHANGED
@@ -1,9 +1,12 @@
1
+ @property st-global(--wds-add-item-border-radius);
1
2
  @property st-global(--wds-add-item-padding-horizontal-large);
2
3
  @property st-global(--wds-add-item-padding-horizontal-tiny);
3
4
  @property st-global(--wds-add-item-padding-vertical-large);
4
5
  @property st-global(--wds-add-item-padding-vertical-medium);
5
6
  @property st-global(--wds-add-item-padding-vertical-small);
6
7
  @property st-global(--wds-add-item-padding-vertical-tiny);
8
+ @property st-global(--wds-avatar-group-gap-condensed);
9
+ @property st-global(--wds-avatar-group-gap-default);
7
10
  @property st-global(--wds-badge-border-radius-medium);
8
11
  @property st-global(--wds-badge-border-radius-small);
9
12
  @property st-global(--wds-badge-border-radius-tiny);
@@ -24,6 +27,8 @@
24
27
  @property st-global(--wds-border-radius-500);
25
28
  @property st-global(--wds-border-radius-600);
26
29
  @property st-global(--wds-border-radius-full);
30
+ @property st-global(--wds-border-radius-surface-modal);
31
+ @property st-global(--wds-border-radius-surface-overlay);
27
32
  @property st-global(--wds-border-width-100);
28
33
  @property st-global(--wds-border-width-200);
29
34
  @property st-global(--wds-border-width-none);
@@ -502,7 +507,8 @@
502
507
  @property st-global(--wds-dock-foreground-fill-active);
503
508
  @property st-global(--wds-dock-foreground-fill-disabled);
504
509
  @property st-global(--wds-dock-foreground-fill-hover);
505
- @property st-global(--wds-dropdown-layout-border);
510
+ @property st-global(--wds-dropdown-layout-option-size-big);
511
+ @property st-global(--wds-dropdown-layout-option-size-small);
506
512
  @property st-global(--wds-empty-state-border);
507
513
  @property st-global(--wds-empty-state-page-content-paddings);
508
514
  @property st-global(--wds-empty-state-section-content-paddings);
@@ -758,6 +764,10 @@
758
764
  @property st-global(--wds-slider-track-border-radius);
759
765
  @property st-global(--wds-slider-track-size);
760
766
  @property st-global(--wds-slider-track-size-transparent);
767
+ @property st-global(--wds-social-post-preview-content-padding-horizontal);
768
+ @property st-global(--wds-social-post-preview-content-padding-vertical);
769
+ @property st-global(--wds-social-preview-content-padding-horizontal);
770
+ @property st-global(--wds-social-preview-content-padding-vertical);
761
771
  @property st-global(--wds-space-0);
762
772
  @property st-global(--wds-space-25);
763
773
  @property st-global(--wds-space-50);
@@ -936,12 +946,15 @@
936
946
  @property st-global(--wds-vertical-tabs-section-title-padding-top-tiny);
937
947
 
938
948
  .root {
949
+ --wds-add-item-border-radius: 4px;
939
950
  --wds-add-item-padding-horizontal-large: 28px;
940
951
  --wds-add-item-padding-horizontal-tiny: 12px;
941
952
  --wds-add-item-padding-vertical-large: 28px;
942
953
  --wds-add-item-padding-vertical-medium: 24px;
943
954
  --wds-add-item-padding-vertical-small: 16px;
944
955
  --wds-add-item-padding-vertical-tiny: 12px;
956
+ --wds-avatar-group-gap-condensed: -2px;
957
+ --wds-avatar-group-gap-default: 4px;
945
958
  --wds-badge-border-radius-medium: 2px;
946
959
  --wds-badge-border-radius-small: 2px;
947
960
  --wds-badge-border-radius-tiny: 2px;
@@ -962,6 +975,8 @@
962
975
  --wds-border-radius-500: 10px;
963
976
  --wds-border-radius-600: 12px;
964
977
  --wds-border-radius-full: 1000px;
978
+ --wds-border-radius-surface-modal: 4px;
979
+ --wds-border-radius-surface-overlay: 4px;
965
980
  --wds-border-width-100: 1px;
966
981
  --wds-border-width-200: 2px;
967
982
  --wds-border-width-none: 0;
@@ -1440,7 +1455,8 @@
1440
1455
  --wds-dock-foreground-fill-active: #116dff;
1441
1456
  --wds-dock-foreground-fill-disabled: #bebebe;
1442
1457
  --wds-dock-foreground-fill-hover: #dce9ff;
1443
- --wds-dropdown-layout-border: 4px;
1458
+ --wds-dropdown-layout-option-size-big: 40px;
1459
+ --wds-dropdown-layout-option-size-small: 32px;
1444
1460
  --wds-empty-state-border: 4px;
1445
1461
  --wds-empty-state-page-content-paddings: 24px;
1446
1462
  --wds-empty-state-section-content-paddings: 24px;
@@ -1696,6 +1712,10 @@
1696
1712
  --wds-slider-track-border-radius: 1000px;
1697
1713
  --wds-slider-track-size: 2px;
1698
1714
  --wds-slider-track-size-transparent: 2px;
1715
+ --wds-social-post-preview-content-padding-horizontal: 12px;
1716
+ --wds-social-post-preview-content-padding-vertical: 12px;
1717
+ --wds-social-preview-content-padding-horizontal: 12px;
1718
+ --wds-social-preview-content-padding-vertical: 8px;
1699
1719
  --wds-space-0: 0;
1700
1720
  --wds-space-25: 1px;
1701
1721
  --wds-space-50: 2px;
package/studio/component.st.css CHANGED
@@ -1,9 +1,12 @@
1
+ @property st-global(--wds-add-item-border-radius);
1
2
  @property st-global(--wds-add-item-padding-horizontal-large);
2
3
  @property st-global(--wds-add-item-padding-horizontal-tiny);
3
4
  @property st-global(--wds-add-item-padding-vertical-large);
4
5
  @property st-global(--wds-add-item-padding-vertical-medium);
5
6
  @property st-global(--wds-add-item-padding-vertical-small);
6
7
  @property st-global(--wds-add-item-padding-vertical-tiny);
8
+ @property st-global(--wds-avatar-group-gap-condensed);
9
+ @property st-global(--wds-avatar-group-gap-default);
7
10
  @property st-global(--wds-badge-border-radius-medium);
8
11
  @property st-global(--wds-badge-border-radius-small);
9
12
  @property st-global(--wds-badge-border-radius-tiny);
@@ -127,7 +130,8 @@
127
130
  @property st-global(--wds-dock-foreground-fill-active);
128
131
  @property st-global(--wds-dock-foreground-fill-disabled);
129
132
  @property st-global(--wds-dock-foreground-fill-hover);
130
- @property st-global(--wds-dropdown-layout-border);
133
+ @property st-global(--wds-dropdown-layout-option-size-big);
134
+ @property st-global(--wds-dropdown-layout-option-size-small);
131
135
  @property st-global(--wds-empty-state-border);
132
136
  @property st-global(--wds-empty-state-page-content-paddings);
133
137
  @property st-global(--wds-empty-state-section-content-paddings);
@@ -327,6 +331,10 @@
327
331
  @property st-global(--wds-slider-track-border-radius);
328
332
  @property st-global(--wds-slider-track-size);
329
333
  @property st-global(--wds-slider-track-size-transparent);
334
+ @property st-global(--wds-social-post-preview-content-padding-horizontal);
335
+ @property st-global(--wds-social-post-preview-content-padding-vertical);
336
+ @property st-global(--wds-social-preview-content-padding-horizontal);
337
+ @property st-global(--wds-social-preview-content-padding-vertical);
330
338
  @property st-global(--wds-stepper-prefix-size-circle);
331
339
  @property st-global(--wds-stepper-prefix-size-number);
332
340
  @property st-global(--wds-swatches-list-gap);
@@ -481,12 +489,15 @@
481
489
  @property st-global(--wds-vertical-tabs-section-title-padding-top-tiny);
482
490
 
483
491
  .root {
492
+ --wds-add-item-border-radius: 4px;
484
493
  --wds-add-item-padding-horizontal-large: 28px;
485
494
  --wds-add-item-padding-horizontal-tiny: 12px;
486
495
  --wds-add-item-padding-vertical-large: 28px;
487
496
  --wds-add-item-padding-vertical-medium: 24px;
488
497
  --wds-add-item-padding-vertical-small: 16px;
489
498
  --wds-add-item-padding-vertical-tiny: 12px;
499
+ --wds-avatar-group-gap-condensed: -2px;
500
+ --wds-avatar-group-gap-default: 4px;
490
501
  --wds-badge-border-radius-medium: 2px;
491
502
  --wds-badge-border-radius-small: 2px;
492
503
  --wds-badge-border-radius-tiny: 2px;
@@ -610,7 +621,8 @@
610
621
  --wds-dock-foreground-fill-active: #116dff;
611
622
  --wds-dock-foreground-fill-disabled: #bebebe;
612
623
  --wds-dock-foreground-fill-hover: #dce9ff;
613
- --wds-dropdown-layout-border: 4px;
624
+ --wds-dropdown-layout-option-size-big: 40px;
625
+ --wds-dropdown-layout-option-size-small: 32px;
614
626
  --wds-empty-state-border: 4px;
615
627
  --wds-empty-state-page-content-paddings: 24px;
616
628
  --wds-empty-state-section-content-paddings: 24px;
@@ -810,6 +822,10 @@
810
822
  --wds-slider-track-border-radius: 1000px;
811
823
  --wds-slider-track-size: 2px;
812
824
  --wds-slider-track-size-transparent: 2px;
825
+ --wds-social-post-preview-content-padding-horizontal: 12px;
826
+ --wds-social-post-preview-content-padding-vertical: 12px;
827
+ --wds-social-preview-content-padding-horizontal: 12px;
828
+ --wds-social-preview-content-padding-vertical: 8px;
813
829
  --wds-stepper-prefix-size-circle: 20px;
814
830
  --wds-stepper-prefix-size-number: 16px;
815
831
  --wds-swatches-list-gap: 12px;
package/studio/semantic.st.css CHANGED
@@ -1,3 +1,5 @@
1
+ @property st-global(--wds-border-radius-surface-modal);
2
+ @property st-global(--wds-border-radius-surface-overlay);
1
3
  @property st-global(--wds-color-border-dark-primary);
2
4
  @property st-global(--wds-color-border-dark-primary-active);
3
5
  @property st-global(--wds-color-border-dark-primary-disabled);
@@ -304,6 +306,8 @@
304
306
  @property st-global(--wds-font-weight-heading-6);
305
307
 
306
308
  .root {
309
+ --wds-border-radius-surface-modal: 4px;
310
+ --wds-border-radius-surface-overlay: 4px;
307
311
  --wds-color-border-dark-primary: #868aa5;
308
312
  --wds-color-border-dark-primary-active: #2b2e36;
309
313
  --wds-color-border-dark-primary-disabled: rgba(19, 23, 32, .1);