@wix/design-system-tokens 1.13.0 → 1.13.2

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 +48 -0
  2. package/component.st.css +24 -0
  3. package/package.json +2 -2
  4. package/semantic.st.css +24 -0
  5. package/studio/all.st.css +48 -0
  6. package/studio/component.st.css +24 -0
  7. package/studio/semantic.st.css +24 -0
package/all.st.css CHANGED
@@ -750,6 +750,18 @@
750
750
  @property st-global(--wds-radio-fill-disabled);
751
751
  @property st-global(--wds-radio-fill-hover);
752
752
  @property st-global(--wds-radio-group-gap-vertical);
753
+ @property st-global(--wds-radio-group-item-padding-default-horizontal);
754
+ @property st-global(--wds-radio-group-item-padding-default-horizontal-screen-small);
755
+ @property st-global(--wds-radio-group-item-padding-default-vertical);
756
+ @property st-global(--wds-radio-group-item-padding-default-vertical-screen-small);
757
+ @property st-global(--wds-radio-group-item-padding-filled-horizontal);
758
+ @property st-global(--wds-radio-group-item-padding-filled-horizontal-screen-small);
759
+ @property st-global(--wds-radio-group-item-padding-filled-vertical);
760
+ @property st-global(--wds-radio-group-item-padding-filled-vertical-screen-small);
761
+ @property st-global(--wds-radio-group-item-padding-outlined-horizontal);
762
+ @property st-global(--wds-radio-group-item-padding-outlined-horizontal-screen-small);
763
+ @property st-global(--wds-radio-group-item-padding-outlined-vertical);
764
+ @property st-global(--wds-radio-group-item-padding-outlined-vertical-screen-small);
753
765
  @property st-global(--wds-radio-hover);
754
766
  @property st-global(--wds-search-border-radius-large);
755
767
  @property st-global(--wds-search-border-radius-medium);
@@ -869,6 +881,18 @@
869
881
  @property st-global(--wds-space-1600);
870
882
  @property st-global(--wds-space-1700);
871
883
  @property st-global(--wds-space-2400);
884
+ @property st-global(--wds-space-padding-horizontal-large);
885
+ @property st-global(--wds-space-padding-horizontal-medium);
886
+ @property st-global(--wds-space-padding-horizontal-small);
887
+ @property st-global(--wds-space-padding-horizontal-tiny);
888
+ @property st-global(--wds-space-padding-horizontal-x-tiny);
889
+ @property st-global(--wds-space-padding-horizontal-xx-tiny);
890
+ @property st-global(--wds-space-padding-vertical-large);
891
+ @property st-global(--wds-space-padding-vertical-medium);
892
+ @property st-global(--wds-space-padding-vertical-small);
893
+ @property st-global(--wds-space-padding-vertical-tiny);
894
+ @property st-global(--wds-space-padding-vertical-x-tiny);
895
+ @property st-global(--wds-space-padding-vertical-xx-tiny);
872
896
  @property st-global(--wds-stepper-prefix-size-circle);
873
897
  @property st-global(--wds-stepper-prefix-size-number);
874
898
  @property st-global(--wds-swatches-list-gap);
@@ -1775,6 +1799,18 @@
1775
1799
  --wds-radio-fill-disabled: rgba(0, 6, 36, .1);
1776
1800
  --wds-radio-fill-hover: #e7f0ff;
1777
1801
  --wds-radio-group-gap-vertical: 12px;
1802
+ --wds-radio-group-item-padding-default-horizontal: 0;
1803
+ --wds-radio-group-item-padding-default-horizontal-screen-small: 0;
1804
+ --wds-radio-group-item-padding-default-vertical: 0;
1805
+ --wds-radio-group-item-padding-default-vertical-screen-small: 12px;
1806
+ --wds-radio-group-item-padding-filled-horizontal: 18px;
1807
+ --wds-radio-group-item-padding-filled-horizontal-screen-small: 18px;
1808
+ --wds-radio-group-item-padding-filled-vertical: 12px;
1809
+ --wds-radio-group-item-padding-filled-vertical-screen-small: 12px;
1810
+ --wds-radio-group-item-padding-outlined-horizontal: 18px;
1811
+ --wds-radio-group-item-padding-outlined-horizontal-screen-small: 18px;
1812
+ --wds-radio-group-item-padding-outlined-vertical: 12px;
1813
+ --wds-radio-group-item-padding-outlined-vertical-screen-small: 12px;
1778
1814
  --wds-radio-hover: #116dff;
1779
1815
  --wds-search-border-radius-large: 1000px;
1780
1816
  --wds-search-border-radius-medium: 1000px;
@@ -1894,6 +1930,18 @@
1894
1930
  --wds-space-1600: 96px;
1895
1931
  --wds-space-1700: 102px;
1896
1932
  --wds-space-2400: 144px;
1933
+ --wds-space-padding-horizontal-large: 24px;
1934
+ --wds-space-padding-horizontal-medium: 18px;
1935
+ --wds-space-padding-horizontal-small: 15px;
1936
+ --wds-space-padding-horizontal-tiny: 12px;
1937
+ --wds-space-padding-horizontal-x-tiny: 6px;
1938
+ --wds-space-padding-horizontal-xx-tiny: 3px;
1939
+ --wds-space-padding-vertical-large: 24px;
1940
+ --wds-space-padding-vertical-medium: 18px;
1941
+ --wds-space-padding-vertical-small: 15px;
1942
+ --wds-space-padding-vertical-tiny: 12px;
1943
+ --wds-space-padding-vertical-x-tiny: 6px;
1944
+ --wds-space-padding-vertical-xx-tiny: 3px;
1897
1945
  --wds-stepper-prefix-size-circle: 30px;
1898
1946
  --wds-stepper-prefix-size-number: 24px;
1899
1947
  --wds-swatches-list-gap: 12px;
package/component.st.css CHANGED
@@ -313,6 +313,18 @@
313
313
  @property st-global(--wds-radio-fill-disabled);
314
314
  @property st-global(--wds-radio-fill-hover);
315
315
  @property st-global(--wds-radio-group-gap-vertical);
316
+ @property st-global(--wds-radio-group-item-padding-default-horizontal);
317
+ @property st-global(--wds-radio-group-item-padding-default-horizontal-screen-small);
318
+ @property st-global(--wds-radio-group-item-padding-default-vertical);
319
+ @property st-global(--wds-radio-group-item-padding-default-vertical-screen-small);
320
+ @property st-global(--wds-radio-group-item-padding-filled-horizontal);
321
+ @property st-global(--wds-radio-group-item-padding-filled-horizontal-screen-small);
322
+ @property st-global(--wds-radio-group-item-padding-filled-vertical);
323
+ @property st-global(--wds-radio-group-item-padding-filled-vertical-screen-small);
324
+ @property st-global(--wds-radio-group-item-padding-outlined-horizontal);
325
+ @property st-global(--wds-radio-group-item-padding-outlined-horizontal-screen-small);
326
+ @property st-global(--wds-radio-group-item-padding-outlined-vertical);
327
+ @property st-global(--wds-radio-group-item-padding-outlined-vertical-screen-small);
316
328
  @property st-global(--wds-radio-hover);
317
329
  @property st-global(--wds-search-border-radius-large);
318
330
  @property st-global(--wds-search-border-radius-medium);
@@ -850,6 +862,18 @@
850
862
  --wds-radio-fill-disabled: rgba(0, 6, 36, .1);
851
863
  --wds-radio-fill-hover: #e7f0ff;
852
864
  --wds-radio-group-gap-vertical: 12px;
865
+ --wds-radio-group-item-padding-default-horizontal: 0;
866
+ --wds-radio-group-item-padding-default-horizontal-screen-small: 0;
867
+ --wds-radio-group-item-padding-default-vertical: 0;
868
+ --wds-radio-group-item-padding-default-vertical-screen-small: 12px;
869
+ --wds-radio-group-item-padding-filled-horizontal: 18px;
870
+ --wds-radio-group-item-padding-filled-horizontal-screen-small: 18px;
871
+ --wds-radio-group-item-padding-filled-vertical: 12px;
872
+ --wds-radio-group-item-padding-filled-vertical-screen-small: 12px;
873
+ --wds-radio-group-item-padding-outlined-horizontal: 18px;
874
+ --wds-radio-group-item-padding-outlined-horizontal-screen-small: 18px;
875
+ --wds-radio-group-item-padding-outlined-vertical: 12px;
876
+ --wds-radio-group-item-padding-outlined-vertical-screen-small: 12px;
853
877
  --wds-radio-hover: #116dff;
854
878
  --wds-search-border-radius-large: 1000px;
855
879
  --wds-search-border-radius-medium: 1000px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.13.0",
3
+ "version": "1.13.2",
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": "4bf0f68a66323bacbe41ca475ce14baf552678bf661ba7e1c4cdebc2"
36
+ "falconPackageHash": "7475a3fbc9866ef1a59aa148b000a506603050e71674689d1842d6b6"
37
37
  }
package/semantic.st.css CHANGED
@@ -315,6 +315,18 @@
315
315
  @property st-global(--wds-shadow-surface-overlay);
316
316
  @property st-global(--wds-shadow-surface-overlay-dark);
317
317
  @property st-global(--wds-shadow-surface-raised);
318
+ @property st-global(--wds-space-padding-horizontal-large);
319
+ @property st-global(--wds-space-padding-horizontal-medium);
320
+ @property st-global(--wds-space-padding-horizontal-small);
321
+ @property st-global(--wds-space-padding-horizontal-tiny);
322
+ @property st-global(--wds-space-padding-horizontal-x-tiny);
323
+ @property st-global(--wds-space-padding-horizontal-xx-tiny);
324
+ @property st-global(--wds-space-padding-vertical-large);
325
+ @property st-global(--wds-space-padding-vertical-medium);
326
+ @property st-global(--wds-space-padding-vertical-small);
327
+ @property st-global(--wds-space-padding-vertical-tiny);
328
+ @property st-global(--wds-space-padding-vertical-x-tiny);
329
+ @property st-global(--wds-space-padding-vertical-xx-tiny);
318
330
 
319
331
  .root {
320
332
  --wds-border-radius-surface-modal: 8px;
@@ -634,4 +646,16 @@
634
646
  --wds-shadow-surface-overlay: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
635
647
  --wds-shadow-surface-overlay-dark: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
636
648
  --wds-shadow-surface-raised: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
649
+ --wds-space-padding-horizontal-large: 24px;
650
+ --wds-space-padding-horizontal-medium: 18px;
651
+ --wds-space-padding-horizontal-small: 15px;
652
+ --wds-space-padding-horizontal-tiny: 12px;
653
+ --wds-space-padding-horizontal-x-tiny: 6px;
654
+ --wds-space-padding-horizontal-xx-tiny: 3px;
655
+ --wds-space-padding-vertical-large: 24px;
656
+ --wds-space-padding-vertical-medium: 18px;
657
+ --wds-space-padding-vertical-small: 15px;
658
+ --wds-space-padding-vertical-tiny: 12px;
659
+ --wds-space-padding-vertical-x-tiny: 6px;
660
+ --wds-space-padding-vertical-xx-tiny: 3px;
637
661
  }
package/studio/all.st.css CHANGED
@@ -746,6 +746,18 @@
746
746
  @property st-global(--wds-radio-fill-disabled);
747
747
  @property st-global(--wds-radio-fill-hover);
748
748
  @property st-global(--wds-radio-group-gap-vertical);
749
+ @property st-global(--wds-radio-group-item-padding-default-horizontal);
750
+ @property st-global(--wds-radio-group-item-padding-default-horizontal-screen-small);
751
+ @property st-global(--wds-radio-group-item-padding-default-vertical);
752
+ @property st-global(--wds-radio-group-item-padding-default-vertical-screen-small);
753
+ @property st-global(--wds-radio-group-item-padding-filled-horizontal);
754
+ @property st-global(--wds-radio-group-item-padding-filled-horizontal-screen-small);
755
+ @property st-global(--wds-radio-group-item-padding-filled-vertical);
756
+ @property st-global(--wds-radio-group-item-padding-filled-vertical-screen-small);
757
+ @property st-global(--wds-radio-group-item-padding-outlined-horizontal);
758
+ @property st-global(--wds-radio-group-item-padding-outlined-horizontal-screen-small);
759
+ @property st-global(--wds-radio-group-item-padding-outlined-vertical);
760
+ @property st-global(--wds-radio-group-item-padding-outlined-vertical-screen-small);
749
761
  @property st-global(--wds-radio-hover);
750
762
  @property st-global(--wds-search-border-radius-large);
751
763
  @property st-global(--wds-search-border-radius-medium);
@@ -842,6 +854,18 @@
842
854
  @property st-global(--wds-space-1600);
843
855
  @property st-global(--wds-space-1700);
844
856
  @property st-global(--wds-space-2400);
857
+ @property st-global(--wds-space-padding-horizontal-large);
858
+ @property st-global(--wds-space-padding-horizontal-medium);
859
+ @property st-global(--wds-space-padding-horizontal-small);
860
+ @property st-global(--wds-space-padding-horizontal-tiny);
861
+ @property st-global(--wds-space-padding-horizontal-x-tiny);
862
+ @property st-global(--wds-space-padding-horizontal-xx-tiny);
863
+ @property st-global(--wds-space-padding-vertical-large);
864
+ @property st-global(--wds-space-padding-vertical-medium);
865
+ @property st-global(--wds-space-padding-vertical-small);
866
+ @property st-global(--wds-space-padding-vertical-tiny);
867
+ @property st-global(--wds-space-padding-vertical-x-tiny);
868
+ @property st-global(--wds-space-padding-vertical-xx-tiny);
845
869
  @property st-global(--wds-stepper-prefix-size-circle);
846
870
  @property st-global(--wds-stepper-prefix-size-number);
847
871
  @property st-global(--wds-swatches-list-gap);
@@ -1744,6 +1768,18 @@
1744
1768
  --wds-radio-fill-disabled: #e5e5e5;
1745
1769
  --wds-radio-fill-hover: #f7f8f8;
1746
1770
  --wds-radio-group-gap-vertical: 12px;
1771
+ --wds-radio-group-item-padding-default-horizontal: 0;
1772
+ --wds-radio-group-item-padding-default-horizontal-screen-small: 0;
1773
+ --wds-radio-group-item-padding-default-vertical: 0;
1774
+ --wds-radio-group-item-padding-default-vertical-screen-small: 12px;
1775
+ --wds-radio-group-item-padding-filled-horizontal: 16px;
1776
+ --wds-radio-group-item-padding-filled-horizontal-screen-small: 16px;
1777
+ --wds-radio-group-item-padding-filled-vertical: 12px;
1778
+ --wds-radio-group-item-padding-filled-vertical-screen-small: 12px;
1779
+ --wds-radio-group-item-padding-outlined-horizontal: 16px;
1780
+ --wds-radio-group-item-padding-outlined-horizontal-screen-small: 16px;
1781
+ --wds-radio-group-item-padding-outlined-vertical: 12px;
1782
+ --wds-radio-group-item-padding-outlined-vertical-screen-small: 12px;
1747
1783
  --wds-radio-hover: #868aa5;
1748
1784
  --wds-search-border-radius-large: 4px;
1749
1785
  --wds-search-border-radius-medium: 4px;
@@ -1840,6 +1876,18 @@
1840
1876
  --wds-space-1600: 64px;
1841
1877
  --wds-space-1700: 68px;
1842
1878
  --wds-space-2400: 96px;
1879
+ --wds-space-padding-horizontal-large: 24px;
1880
+ --wds-space-padding-horizontal-medium: 20px;
1881
+ --wds-space-padding-horizontal-small: 16px;
1882
+ --wds-space-padding-horizontal-tiny: 12px;
1883
+ --wds-space-padding-horizontal-x-tiny: 8px;
1884
+ --wds-space-padding-horizontal-xx-tiny: 4px;
1885
+ --wds-space-padding-vertical-large: 24px;
1886
+ --wds-space-padding-vertical-medium: 20px;
1887
+ --wds-space-padding-vertical-small: 16px;
1888
+ --wds-space-padding-vertical-tiny: 12px;
1889
+ --wds-space-padding-vertical-x-tiny: 8px;
1890
+ --wds-space-padding-vertical-xx-tiny: 4px;
1843
1891
  --wds-stepper-prefix-size-circle: 20px;
1844
1892
  --wds-stepper-prefix-size-number: 16px;
1845
1893
  --wds-swatches-list-gap: 12px;
package/studio/component.st.css CHANGED
@@ -313,6 +313,18 @@
313
313
  @property st-global(--wds-radio-fill-disabled);
314
314
  @property st-global(--wds-radio-fill-hover);
315
315
  @property st-global(--wds-radio-group-gap-vertical);
316
+ @property st-global(--wds-radio-group-item-padding-default-horizontal);
317
+ @property st-global(--wds-radio-group-item-padding-default-horizontal-screen-small);
318
+ @property st-global(--wds-radio-group-item-padding-default-vertical);
319
+ @property st-global(--wds-radio-group-item-padding-default-vertical-screen-small);
320
+ @property st-global(--wds-radio-group-item-padding-filled-horizontal);
321
+ @property st-global(--wds-radio-group-item-padding-filled-horizontal-screen-small);
322
+ @property st-global(--wds-radio-group-item-padding-filled-vertical);
323
+ @property st-global(--wds-radio-group-item-padding-filled-vertical-screen-small);
324
+ @property st-global(--wds-radio-group-item-padding-outlined-horizontal);
325
+ @property st-global(--wds-radio-group-item-padding-outlined-horizontal-screen-small);
326
+ @property st-global(--wds-radio-group-item-padding-outlined-vertical);
327
+ @property st-global(--wds-radio-group-item-padding-outlined-vertical-screen-small);
316
328
  @property st-global(--wds-radio-hover);
317
329
  @property st-global(--wds-search-border-radius-large);
318
330
  @property st-global(--wds-search-border-radius-medium);
@@ -850,6 +862,18 @@
850
862
  --wds-radio-fill-disabled: #e5e5e5;
851
863
  --wds-radio-fill-hover: #f7f8f8;
852
864
  --wds-radio-group-gap-vertical: 12px;
865
+ --wds-radio-group-item-padding-default-horizontal: 0;
866
+ --wds-radio-group-item-padding-default-horizontal-screen-small: 0;
867
+ --wds-radio-group-item-padding-default-vertical: 0;
868
+ --wds-radio-group-item-padding-default-vertical-screen-small: 12px;
869
+ --wds-radio-group-item-padding-filled-horizontal: 16px;
870
+ --wds-radio-group-item-padding-filled-horizontal-screen-small: 16px;
871
+ --wds-radio-group-item-padding-filled-vertical: 12px;
872
+ --wds-radio-group-item-padding-filled-vertical-screen-small: 12px;
873
+ --wds-radio-group-item-padding-outlined-horizontal: 16px;
874
+ --wds-radio-group-item-padding-outlined-horizontal-screen-small: 16px;
875
+ --wds-radio-group-item-padding-outlined-vertical: 12px;
876
+ --wds-radio-group-item-padding-outlined-vertical-screen-small: 12px;
853
877
  --wds-radio-hover: #868aa5;
854
878
  --wds-search-border-radius-large: 4px;
855
879
  --wds-search-border-radius-medium: 4px;
package/studio/semantic.st.css CHANGED
@@ -304,6 +304,18 @@
304
304
  @property st-global(--wds-font-weight-heading-4);
305
305
  @property st-global(--wds-font-weight-heading-5);
306
306
  @property st-global(--wds-font-weight-heading-6);
307
+ @property st-global(--wds-space-padding-horizontal-large);
308
+ @property st-global(--wds-space-padding-horizontal-medium);
309
+ @property st-global(--wds-space-padding-horizontal-small);
310
+ @property st-global(--wds-space-padding-horizontal-tiny);
311
+ @property st-global(--wds-space-padding-horizontal-x-tiny);
312
+ @property st-global(--wds-space-padding-horizontal-xx-tiny);
313
+ @property st-global(--wds-space-padding-vertical-large);
314
+ @property st-global(--wds-space-padding-vertical-medium);
315
+ @property st-global(--wds-space-padding-vertical-small);
316
+ @property st-global(--wds-space-padding-vertical-tiny);
317
+ @property st-global(--wds-space-padding-vertical-x-tiny);
318
+ @property st-global(--wds-space-padding-vertical-xx-tiny);
307
319
 
308
320
  .root {
309
321
  --wds-border-radius-surface-modal: 4px;
@@ -612,4 +624,16 @@
612
624
  --wds-font-weight-heading-4: 700;
613
625
  --wds-font-weight-heading-5: 700;
614
626
  --wds-font-weight-heading-6: 400;
627
+ --wds-space-padding-horizontal-large: 24px;
628
+ --wds-space-padding-horizontal-medium: 20px;
629
+ --wds-space-padding-horizontal-small: 16px;
630
+ --wds-space-padding-horizontal-tiny: 12px;
631
+ --wds-space-padding-horizontal-x-tiny: 8px;
632
+ --wds-space-padding-horizontal-xx-tiny: 4px;
633
+ --wds-space-padding-vertical-large: 24px;
634
+ --wds-space-padding-vertical-medium: 20px;
635
+ --wds-space-padding-vertical-small: 16px;
636
+ --wds-space-padding-vertical-tiny: 12px;
637
+ --wds-space-padding-vertical-x-tiny: 8px;
638
+ --wds-space-padding-vertical-xx-tiny: 4px;
615
639
  }