@wix/design-system-tokens 1.3.4 → 1.3.5

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 (5) hide show
  1. package/all.st.css +168 -0
  2. package/component.st.css +168 -0
  3. package/package.json +2 -2
  4. package/studio/all.st.css +168 -0
  5. package/studio/component.st.css +168 -0
package/all.st.css CHANGED
@@ -464,6 +464,16 @@
464
464
  @property st-global(--wds-counter-badge-padding-horizontal-small);
465
465
  @property st-global(--wds-counter-badge-size-medium);
466
466
  @property st-global(--wds-counter-badge-size-small);
467
+ @property st-global(--wds-custom-modal-border-radius);
468
+ @property st-global(--wds-custom-modal-content-padding-horizon);
469
+ @property st-global(--wds-custom-modal-content-padding-vertical);
470
+ @property st-global(--wds-custom-modal-footer-padding-horizon);
471
+ @property st-global(--wds-custom-modal-footer-padding-vertical);
472
+ @property st-global(--wds-custom-modal-footnote-padding-horizon);
473
+ @property st-global(--wds-custom-modal-footnote-padding-vertical);
474
+ @property st-global(--wds-custom-modal-header-padding-left);
475
+ @property st-global(--wds-custom-modal-header-padding-right);
476
+ @property st-global(--wds-custom-modal-header-padding-vertical);
467
477
  @property st-global(--wds-dock-background-fill);
468
478
  @property st-global(--wds-dock-background-fill-active);
469
479
  @property st-global(--wds-dock-background-fill-disabled);
@@ -705,7 +715,20 @@
705
715
  @property st-global(--wds-shadow-surface-overlay);
706
716
  @property st-global(--wds-shadow-surface-overlay-dark);
707
717
  @property st-global(--wds-shadow-surface-raised);
718
+ @property st-global(--wds-side-panel-content-padding-horizontal);
719
+ @property st-global(--wds-side-panel-content-padding-vertical);
708
720
  @property st-global(--wds-side-panel-control-layout-divider-border-width);
721
+ @property st-global(--wds-side-panel-floating-border-radius);
722
+ @property st-global(--wds-side-panel-floating-header-padding-left);
723
+ @property st-global(--wds-side-panel-floating-header-padding-right);
724
+ @property st-global(--wds-side-panel-floating-header-padding-vertical);
725
+ @property st-global(--wds-side-panel-footer-padding-horizontal);
726
+ @property st-global(--wds-side-panel-footer-padding-vertical);
727
+ @property st-global(--wds-side-panel-footnote-padding-horizontal);
728
+ @property st-global(--wds-side-panel-footnote-padding-vertical);
729
+ @property st-global(--wds-side-panel-header-padding-left);
730
+ @property st-global(--wds-side-panel-header-padding-right);
731
+ @property st-global(--wds-side-panel-header-padding-vertical);
709
732
  @property st-global(--wds-skeleton-border-radius-circle);
710
733
  @property st-global(--wds-skeleton-border-radius-line);
711
734
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -823,6 +846,67 @@
823
846
  @property st-global(--wds-tooltip-padding-horizontal-small);
824
847
  @property st-global(--wds-tooltip-padding-vertical-medium);
825
848
  @property st-global(--wds-tooltip-padding-vertical-small);
849
+ @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
850
+ @property st-global(--wds-vertical-tabs-action-padding-horizontal-small);
851
+ @property st-global(--wds-vertical-tabs-action-padding-horizontal-tiny);
852
+ @property st-global(--wds-vertical-tabs-action-padding-vertical-medium);
853
+ @property st-global(--wds-vertical-tabs-action-padding-vertical-small);
854
+ @property st-global(--wds-vertical-tabs-action-padding-vertical-tiny);
855
+ @property st-global(--wds-vertical-tabs-item-active-title-text);
856
+ @property st-global(--wds-vertical-tabs-item-active-title-text-disabled);
857
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium);
858
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
859
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
860
+ @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
861
+ @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
862
+ @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
863
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium);
864
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium-active);
865
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium-disabled);
866
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium-hover);
867
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard);
868
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard-active);
869
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard-disabled);
870
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard-hover);
871
+ @property st-global(--wds-vertical-tabs-item-pill-padding-horizontal);
872
+ @property st-global(--wds-vertical-tabs-item-pill-padding-vertical);
873
+ @property st-global(--wds-vertical-tabs-item-round-active);
874
+ @property st-global(--wds-vertical-tabs-item-round-disabled);
875
+ @property st-global(--wds-vertical-tabs-item-round-fill);
876
+ @property st-global(--wds-vertical-tabs-item-round-fill-hover);
877
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium);
878
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium-active);
879
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium-disabled);
880
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium-hover);
881
+ @property st-global(--wds-vertical-tabs-item-round-padding-bottom-medium);
882
+ @property st-global(--wds-vertical-tabs-item-round-padding-bottom-small);
883
+ @property st-global(--wds-vertical-tabs-item-round-padding-bottom-tiny);
884
+ @property st-global(--wds-vertical-tabs-item-round-padding-horizontal-medium);
885
+ @property st-global(--wds-vertical-tabs-item-round-padding-horizontal-small);
886
+ @property st-global(--wds-vertical-tabs-item-round-padding-horizontal-tiny);
887
+ @property st-global(--wds-vertical-tabs-item-round-padding-top-medium);
888
+ @property st-global(--wds-vertical-tabs-item-round-padding-top-small);
889
+ @property st-global(--wds-vertical-tabs-item-round-padding-top-tiny);
890
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium);
891
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium-active);
892
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium-disabled);
893
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium-hover);
894
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard);
895
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard-active);
896
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard-disabled);
897
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard-hover);
898
+ @property st-global(--wds-vertical-tabs-item-title-text);
899
+ @property st-global(--wds-vertical-tabs-item-title-text-disabled);
900
+ @property st-global(--wds-vertical-tabs-round-fill);
901
+ @property st-global(--wds-vertical-tabs-section-title-padding-bottom-medium);
902
+ @property st-global(--wds-vertical-tabs-section-title-padding-bottom-small);
903
+ @property st-global(--wds-vertical-tabs-section-title-padding-bottom-tiny);
904
+ @property st-global(--wds-vertical-tabs-section-title-padding-horizontal-medium);
905
+ @property st-global(--wds-vertical-tabs-section-title-padding-horizontal-small);
906
+ @property st-global(--wds-vertical-tabs-section-title-padding-horizontal-tiny);
907
+ @property st-global(--wds-vertical-tabs-section-title-padding-top-medium);
908
+ @property st-global(--wds-vertical-tabs-section-title-padding-top-small);
909
+ @property st-global(--wds-vertical-tabs-section-title-padding-top-tiny);
826
910
 
827
911
  .root {
828
912
  --wds-add-item-padding-horizontal-large: 30px;
@@ -1291,6 +1375,16 @@
1291
1375
  --wds-counter-badge-padding-horizontal-small: 6px;
1292
1376
  --wds-counter-badge-size-medium: 24px;
1293
1377
  --wds-counter-badge-size-small: 18px;
1378
+ --wds-custom-modal-border-radius: 8px;
1379
+ --wds-custom-modal-content-padding-horizon: 24px;
1380
+ --wds-custom-modal-content-padding-vertical: 24px;
1381
+ --wds-custom-modal-footer-padding-horizon: 24px;
1382
+ --wds-custom-modal-footer-padding-vertical: 18px;
1383
+ --wds-custom-modal-footnote-padding-horizon: 24px;
1384
+ --wds-custom-modal-footnote-padding-vertical: 12px;
1385
+ --wds-custom-modal-header-padding-left: 24px;
1386
+ --wds-custom-modal-header-padding-right: 9px;
1387
+ --wds-custom-modal-header-padding-vertical: 18px;
1294
1388
  --wds-dock-background-fill: #e7f0ff;
1295
1389
  --wds-dock-background-fill-active: #d6e6fe;
1296
1390
  --wds-dock-background-fill-disabled: rgba(0, 6, 36, .1);
@@ -1532,7 +1626,20 @@
1532
1626
  --wds-shadow-surface-overlay: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
1533
1627
  --wds-shadow-surface-overlay-dark: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
1534
1628
  --wds-shadow-surface-raised: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
1629
+ --wds-side-panel-content-padding-horizontal: 24px;
1630
+ --wds-side-panel-content-padding-vertical: 24px;
1535
1631
  --wds-side-panel-control-layout-divider-border-width: 1px;
1632
+ --wds-side-panel-floating-border-radius: 8px;
1633
+ --wds-side-panel-floating-header-padding-left: 24px;
1634
+ --wds-side-panel-floating-header-padding-right: 9px;
1635
+ --wds-side-panel-floating-header-padding-vertical: 12px;
1636
+ --wds-side-panel-footer-padding-horizontal: 24px;
1637
+ --wds-side-panel-footer-padding-vertical: 18px;
1638
+ --wds-side-panel-footnote-padding-horizontal: 24px;
1639
+ --wds-side-panel-footnote-padding-vertical: 12px;
1640
+ --wds-side-panel-header-padding-left: 24px;
1641
+ --wds-side-panel-header-padding-right: 9px;
1642
+ --wds-side-panel-header-padding-vertical: 18px;
1536
1643
  --wds-skeleton-border-radius-circle: 1000px;
1537
1644
  --wds-skeleton-border-radius-line: 1000px;
1538
1645
  --wds-skeleton-border-radius-rectangle: 6px;
@@ -1650,4 +1757,65 @@
1650
1757
  --wds-tooltip-padding-horizontal-small: 12px;
1651
1758
  --wds-tooltip-padding-vertical-medium: 12px;
1652
1759
  --wds-tooltip-padding-vertical-small: 6px;
1760
+ --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
1761
+ --wds-vertical-tabs-action-padding-horizontal-small: 24px;
1762
+ --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
1763
+ --wds-vertical-tabs-action-padding-vertical-medium: 12px;
1764
+ --wds-vertical-tabs-action-padding-vertical-small: 12px;
1765
+ --wds-vertical-tabs-action-padding-vertical-tiny: 6px;
1766
+ --wds-vertical-tabs-item-active-title-text: #116dff;
1767
+ --wds-vertical-tabs-item-active-title-text-disabled: rgba(0, 6, 36, .3);
1768
+ --wds-vertical-tabs-item-padding-horizontal-medium: 24px;
1769
+ --wds-vertical-tabs-item-padding-horizontal-small: 24px;
1770
+ --wds-vertical-tabs-item-padding-horizontal-tiny: 24px;
1771
+ --wds-vertical-tabs-item-padding-vertical-medium: 12px;
1772
+ --wds-vertical-tabs-item-padding-vertical-small: 12px;
1773
+ --wds-vertical-tabs-item-padding-vertical-tiny: 6px;
1774
+ --wds-vertical-tabs-item-pill-fill-premium: #f7f8f8;
1775
+ --wds-vertical-tabs-item-pill-fill-premium-active: #e3c3f4;
1776
+ --wds-vertical-tabs-item-pill-fill-premium-disabled: #f7f8f8;
1777
+ --wds-vertical-tabs-item-pill-fill-premium-hover: #f1e0f9;
1778
+ --wds-vertical-tabs-item-pill-fill-standard: #ffffff;
1779
+ --wds-vertical-tabs-item-pill-fill-standard-active: #d6e6fe;
1780
+ --wds-vertical-tabs-item-pill-fill-standard-disabled: #f7f8f8;
1781
+ --wds-vertical-tabs-item-pill-fill-standard-hover: #e7f0ff;
1782
+ --wds-vertical-tabs-item-pill-padding-horizontal: 12px;
1783
+ --wds-vertical-tabs-item-pill-padding-vertical: 6px;
1784
+ --wds-vertical-tabs-item-round-active: #f7f8f8;
1785
+ --wds-vertical-tabs-item-round-disabled: #f7f8f8;
1786
+ --wds-vertical-tabs-item-round-fill: #f7f8f8;
1787
+ --wds-vertical-tabs-item-round-fill-hover: #f7f8f8;
1788
+ --wds-vertical-tabs-item-round-fill-premium: #f7f8f8;
1789
+ --wds-vertical-tabs-item-round-fill-premium-active: #f7f8f8;
1790
+ --wds-vertical-tabs-item-round-fill-premium-disabled: #f7f8f8;
1791
+ --wds-vertical-tabs-item-round-fill-premium-hover: #f7f8f8;
1792
+ --wds-vertical-tabs-item-round-padding-bottom-medium: 3px;
1793
+ --wds-vertical-tabs-item-round-padding-bottom-small: 3px;
1794
+ --wds-vertical-tabs-item-round-padding-bottom-tiny: 3px;
1795
+ --wds-vertical-tabs-item-round-padding-horizontal-medium: 12px;
1796
+ --wds-vertical-tabs-item-round-padding-horizontal-small: 12px;
1797
+ --wds-vertical-tabs-item-round-padding-horizontal-tiny: 12px;
1798
+ --wds-vertical-tabs-item-round-padding-top-medium: 0;
1799
+ --wds-vertical-tabs-item-round-padding-top-small: 0;
1800
+ --wds-vertical-tabs-item-round-padding-top-tiny: 0;
1801
+ --wds-vertical-tabs-item-round-title-text-premium: #9a27d5;
1802
+ --wds-vertical-tabs-item-round-title-text-premium-active: #9a27d5;
1803
+ --wds-vertical-tabs-item-round-title-text-premium-disabled: rgba(0, 6, 36, .3);
1804
+ --wds-vertical-tabs-item-round-title-text-premium-hover: #9a27d5;
1805
+ --wds-vertical-tabs-item-round-title-text-standard: #000624;
1806
+ --wds-vertical-tabs-item-round-title-text-standard-active: #116dff;
1807
+ --wds-vertical-tabs-item-round-title-text-standard-disabled: rgba(0, 6, 36, .3);
1808
+ --wds-vertical-tabs-item-round-title-text-standard-hover: #000624;
1809
+ --wds-vertical-tabs-item-title-text: #000624;
1810
+ --wds-vertical-tabs-item-title-text-disabled: rgba(0, 6, 36, .3);
1811
+ --wds-vertical-tabs-round-fill: #f7f8f8;
1812
+ --wds-vertical-tabs-section-title-padding-bottom-medium: 12px;
1813
+ --wds-vertical-tabs-section-title-padding-bottom-small: 12px;
1814
+ --wds-vertical-tabs-section-title-padding-bottom-tiny: 6px;
1815
+ --wds-vertical-tabs-section-title-padding-horizontal-medium: 24px;
1816
+ --wds-vertical-tabs-section-title-padding-horizontal-small: 24px;
1817
+ --wds-vertical-tabs-section-title-padding-horizontal-tiny: 24px;
1818
+ --wds-vertical-tabs-section-title-padding-top-medium: 24px;
1819
+ --wds-vertical-tabs-section-title-padding-top-small: 18px;
1820
+ --wds-vertical-tabs-section-title-padding-top-tiny: 6px;
1653
1821
  }
package/component.st.css CHANGED
@@ -89,6 +89,16 @@
89
89
  @property st-global(--wds-counter-badge-padding-horizontal-small);
90
90
  @property st-global(--wds-counter-badge-size-medium);
91
91
  @property st-global(--wds-counter-badge-size-small);
92
+ @property st-global(--wds-custom-modal-border-radius);
93
+ @property st-global(--wds-custom-modal-content-padding-horizon);
94
+ @property st-global(--wds-custom-modal-content-padding-vertical);
95
+ @property st-global(--wds-custom-modal-footer-padding-horizon);
96
+ @property st-global(--wds-custom-modal-footer-padding-vertical);
97
+ @property st-global(--wds-custom-modal-footnote-padding-horizon);
98
+ @property st-global(--wds-custom-modal-footnote-padding-vertical);
99
+ @property st-global(--wds-custom-modal-header-padding-left);
100
+ @property st-global(--wds-custom-modal-header-padding-right);
101
+ @property st-global(--wds-custom-modal-header-padding-vertical);
92
102
  @property st-global(--wds-dock-background-fill);
93
103
  @property st-global(--wds-dock-background-fill-active);
94
104
  @property st-global(--wds-dock-background-fill-disabled);
@@ -251,7 +261,20 @@
251
261
  @property st-global(--wds-select-area-fill-hover);
252
262
  @property st-global(--wds-select-area-padding-horizontal);
253
263
  @property st-global(--wds-select-area-padding-vertical);
264
+ @property st-global(--wds-side-panel-content-padding-horizontal);
265
+ @property st-global(--wds-side-panel-content-padding-vertical);
254
266
  @property st-global(--wds-side-panel-control-layout-divider-border-width);
267
+ @property st-global(--wds-side-panel-floating-border-radius);
268
+ @property st-global(--wds-side-panel-floating-header-padding-left);
269
+ @property st-global(--wds-side-panel-floating-header-padding-right);
270
+ @property st-global(--wds-side-panel-floating-header-padding-vertical);
271
+ @property st-global(--wds-side-panel-footer-padding-horizontal);
272
+ @property st-global(--wds-side-panel-footer-padding-vertical);
273
+ @property st-global(--wds-side-panel-footnote-padding-horizontal);
274
+ @property st-global(--wds-side-panel-footnote-padding-vertical);
275
+ @property st-global(--wds-side-panel-header-padding-left);
276
+ @property st-global(--wds-side-panel-header-padding-right);
277
+ @property st-global(--wds-side-panel-header-padding-vertical);
255
278
  @property st-global(--wds-skeleton-border-radius-circle);
256
279
  @property st-global(--wds-skeleton-border-radius-line);
257
280
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -345,6 +368,67 @@
345
368
  @property st-global(--wds-tooltip-padding-horizontal-small);
346
369
  @property st-global(--wds-tooltip-padding-vertical-medium);
347
370
  @property st-global(--wds-tooltip-padding-vertical-small);
371
+ @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
372
+ @property st-global(--wds-vertical-tabs-action-padding-horizontal-small);
373
+ @property st-global(--wds-vertical-tabs-action-padding-horizontal-tiny);
374
+ @property st-global(--wds-vertical-tabs-action-padding-vertical-medium);
375
+ @property st-global(--wds-vertical-tabs-action-padding-vertical-small);
376
+ @property st-global(--wds-vertical-tabs-action-padding-vertical-tiny);
377
+ @property st-global(--wds-vertical-tabs-item-active-title-text);
378
+ @property st-global(--wds-vertical-tabs-item-active-title-text-disabled);
379
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium);
380
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
381
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
382
+ @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
383
+ @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
384
+ @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
385
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium);
386
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium-active);
387
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium-disabled);
388
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium-hover);
389
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard);
390
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard-active);
391
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard-disabled);
392
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard-hover);
393
+ @property st-global(--wds-vertical-tabs-item-pill-padding-horizontal);
394
+ @property st-global(--wds-vertical-tabs-item-pill-padding-vertical);
395
+ @property st-global(--wds-vertical-tabs-item-round-active);
396
+ @property st-global(--wds-vertical-tabs-item-round-disabled);
397
+ @property st-global(--wds-vertical-tabs-item-round-fill);
398
+ @property st-global(--wds-vertical-tabs-item-round-fill-hover);
399
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium);
400
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium-active);
401
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium-disabled);
402
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium-hover);
403
+ @property st-global(--wds-vertical-tabs-item-round-padding-bottom-medium);
404
+ @property st-global(--wds-vertical-tabs-item-round-padding-bottom-small);
405
+ @property st-global(--wds-vertical-tabs-item-round-padding-bottom-tiny);
406
+ @property st-global(--wds-vertical-tabs-item-round-padding-horizontal-medium);
407
+ @property st-global(--wds-vertical-tabs-item-round-padding-horizontal-small);
408
+ @property st-global(--wds-vertical-tabs-item-round-padding-horizontal-tiny);
409
+ @property st-global(--wds-vertical-tabs-item-round-padding-top-medium);
410
+ @property st-global(--wds-vertical-tabs-item-round-padding-top-small);
411
+ @property st-global(--wds-vertical-tabs-item-round-padding-top-tiny);
412
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium);
413
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium-active);
414
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium-disabled);
415
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium-hover);
416
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard);
417
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard-active);
418
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard-disabled);
419
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard-hover);
420
+ @property st-global(--wds-vertical-tabs-item-title-text);
421
+ @property st-global(--wds-vertical-tabs-item-title-text-disabled);
422
+ @property st-global(--wds-vertical-tabs-round-fill);
423
+ @property st-global(--wds-vertical-tabs-section-title-padding-bottom-medium);
424
+ @property st-global(--wds-vertical-tabs-section-title-padding-bottom-small);
425
+ @property st-global(--wds-vertical-tabs-section-title-padding-bottom-tiny);
426
+ @property st-global(--wds-vertical-tabs-section-title-padding-horizontal-medium);
427
+ @property st-global(--wds-vertical-tabs-section-title-padding-horizontal-small);
428
+ @property st-global(--wds-vertical-tabs-section-title-padding-horizontal-tiny);
429
+ @property st-global(--wds-vertical-tabs-section-title-padding-top-medium);
430
+ @property st-global(--wds-vertical-tabs-section-title-padding-top-small);
431
+ @property st-global(--wds-vertical-tabs-section-title-padding-top-tiny);
348
432
 
349
433
  .root {
350
434
  --wds-add-item-padding-horizontal-large: 30px;
@@ -438,6 +522,16 @@
438
522
  --wds-counter-badge-padding-horizontal-small: 6px;
439
523
  --wds-counter-badge-size-medium: 24px;
440
524
  --wds-counter-badge-size-small: 18px;
525
+ --wds-custom-modal-border-radius: 8px;
526
+ --wds-custom-modal-content-padding-horizon: 24px;
527
+ --wds-custom-modal-content-padding-vertical: 24px;
528
+ --wds-custom-modal-footer-padding-horizon: 24px;
529
+ --wds-custom-modal-footer-padding-vertical: 18px;
530
+ --wds-custom-modal-footnote-padding-horizon: 24px;
531
+ --wds-custom-modal-footnote-padding-vertical: 12px;
532
+ --wds-custom-modal-header-padding-left: 24px;
533
+ --wds-custom-modal-header-padding-right: 9px;
534
+ --wds-custom-modal-header-padding-vertical: 18px;
441
535
  --wds-dock-background-fill: #e7f0ff;
442
536
  --wds-dock-background-fill-active: #d6e6fe;
443
537
  --wds-dock-background-fill-disabled: rgba(0, 6, 36, .1);
@@ -600,7 +694,20 @@
600
694
  --wds-select-area-fill-hover: #e7f0ff;
601
695
  --wds-select-area-padding-horizontal: 18px;
602
696
  --wds-select-area-padding-vertical: 12px;
697
+ --wds-side-panel-content-padding-horizontal: 24px;
698
+ --wds-side-panel-content-padding-vertical: 24px;
603
699
  --wds-side-panel-control-layout-divider-border-width: 1px;
700
+ --wds-side-panel-floating-border-radius: 8px;
701
+ --wds-side-panel-floating-header-padding-left: 24px;
702
+ --wds-side-panel-floating-header-padding-right: 9px;
703
+ --wds-side-panel-floating-header-padding-vertical: 12px;
704
+ --wds-side-panel-footer-padding-horizontal: 24px;
705
+ --wds-side-panel-footer-padding-vertical: 18px;
706
+ --wds-side-panel-footnote-padding-horizontal: 24px;
707
+ --wds-side-panel-footnote-padding-vertical: 12px;
708
+ --wds-side-panel-header-padding-left: 24px;
709
+ --wds-side-panel-header-padding-right: 9px;
710
+ --wds-side-panel-header-padding-vertical: 18px;
604
711
  --wds-skeleton-border-radius-circle: 1000px;
605
712
  --wds-skeleton-border-radius-line: 1000px;
606
713
  --wds-skeleton-border-radius-rectangle: 6px;
@@ -694,4 +801,65 @@
694
801
  --wds-tooltip-padding-horizontal-small: 12px;
695
802
  --wds-tooltip-padding-vertical-medium: 12px;
696
803
  --wds-tooltip-padding-vertical-small: 6px;
804
+ --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
805
+ --wds-vertical-tabs-action-padding-horizontal-small: 24px;
806
+ --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
807
+ --wds-vertical-tabs-action-padding-vertical-medium: 12px;
808
+ --wds-vertical-tabs-action-padding-vertical-small: 12px;
809
+ --wds-vertical-tabs-action-padding-vertical-tiny: 6px;
810
+ --wds-vertical-tabs-item-active-title-text: #116dff;
811
+ --wds-vertical-tabs-item-active-title-text-disabled: rgba(0, 6, 36, .3);
812
+ --wds-vertical-tabs-item-padding-horizontal-medium: 24px;
813
+ --wds-vertical-tabs-item-padding-horizontal-small: 24px;
814
+ --wds-vertical-tabs-item-padding-horizontal-tiny: 24px;
815
+ --wds-vertical-tabs-item-padding-vertical-medium: 12px;
816
+ --wds-vertical-tabs-item-padding-vertical-small: 12px;
817
+ --wds-vertical-tabs-item-padding-vertical-tiny: 6px;
818
+ --wds-vertical-tabs-item-pill-fill-premium: #f7f8f8;
819
+ --wds-vertical-tabs-item-pill-fill-premium-active: #e3c3f4;
820
+ --wds-vertical-tabs-item-pill-fill-premium-disabled: #f7f8f8;
821
+ --wds-vertical-tabs-item-pill-fill-premium-hover: #f1e0f9;
822
+ --wds-vertical-tabs-item-pill-fill-standard: #ffffff;
823
+ --wds-vertical-tabs-item-pill-fill-standard-active: #d6e6fe;
824
+ --wds-vertical-tabs-item-pill-fill-standard-disabled: #f7f8f8;
825
+ --wds-vertical-tabs-item-pill-fill-standard-hover: #e7f0ff;
826
+ --wds-vertical-tabs-item-pill-padding-horizontal: 12px;
827
+ --wds-vertical-tabs-item-pill-padding-vertical: 6px;
828
+ --wds-vertical-tabs-item-round-active: #f7f8f8;
829
+ --wds-vertical-tabs-item-round-disabled: #f7f8f8;
830
+ --wds-vertical-tabs-item-round-fill: #f7f8f8;
831
+ --wds-vertical-tabs-item-round-fill-hover: #f7f8f8;
832
+ --wds-vertical-tabs-item-round-fill-premium: #f7f8f8;
833
+ --wds-vertical-tabs-item-round-fill-premium-active: #f7f8f8;
834
+ --wds-vertical-tabs-item-round-fill-premium-disabled: #f7f8f8;
835
+ --wds-vertical-tabs-item-round-fill-premium-hover: #f7f8f8;
836
+ --wds-vertical-tabs-item-round-padding-bottom-medium: 3px;
837
+ --wds-vertical-tabs-item-round-padding-bottom-small: 3px;
838
+ --wds-vertical-tabs-item-round-padding-bottom-tiny: 3px;
839
+ --wds-vertical-tabs-item-round-padding-horizontal-medium: 12px;
840
+ --wds-vertical-tabs-item-round-padding-horizontal-small: 12px;
841
+ --wds-vertical-tabs-item-round-padding-horizontal-tiny: 12px;
842
+ --wds-vertical-tabs-item-round-padding-top-medium: 0;
843
+ --wds-vertical-tabs-item-round-padding-top-small: 0;
844
+ --wds-vertical-tabs-item-round-padding-top-tiny: 0;
845
+ --wds-vertical-tabs-item-round-title-text-premium: #9a27d5;
846
+ --wds-vertical-tabs-item-round-title-text-premium-active: #9a27d5;
847
+ --wds-vertical-tabs-item-round-title-text-premium-disabled: rgba(0, 6, 36, .3);
848
+ --wds-vertical-tabs-item-round-title-text-premium-hover: #9a27d5;
849
+ --wds-vertical-tabs-item-round-title-text-standard: #000624;
850
+ --wds-vertical-tabs-item-round-title-text-standard-active: #116dff;
851
+ --wds-vertical-tabs-item-round-title-text-standard-disabled: rgba(0, 6, 36, .3);
852
+ --wds-vertical-tabs-item-round-title-text-standard-hover: #000624;
853
+ --wds-vertical-tabs-item-title-text: #000624;
854
+ --wds-vertical-tabs-item-title-text-disabled: rgba(0, 6, 36, .3);
855
+ --wds-vertical-tabs-round-fill: #f7f8f8;
856
+ --wds-vertical-tabs-section-title-padding-bottom-medium: 12px;
857
+ --wds-vertical-tabs-section-title-padding-bottom-small: 12px;
858
+ --wds-vertical-tabs-section-title-padding-bottom-tiny: 6px;
859
+ --wds-vertical-tabs-section-title-padding-horizontal-medium: 24px;
860
+ --wds-vertical-tabs-section-title-padding-horizontal-small: 24px;
861
+ --wds-vertical-tabs-section-title-padding-horizontal-tiny: 24px;
862
+ --wds-vertical-tabs-section-title-padding-top-medium: 24px;
863
+ --wds-vertical-tabs-section-title-padding-top-small: 18px;
864
+ --wds-vertical-tabs-section-title-padding-top-tiny: 6px;
697
865
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.3.4",
3
+ "version": "1.3.5",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -32,5 +32,5 @@
32
32
  "groupId": "com.wixpress"
33
33
  }
34
34
  },
35
- "falconPackageHash": "0c10c778c611cb325b207b03ef4084418add0d7758e121237ed969ae"
35
+ "falconPackageHash": "9a64d07210b5f59f9eacfbb96de64b613b88c9c6b29401dc99bd9c66"
36
36
  }
package/studio/all.st.css CHANGED
@@ -460,6 +460,16 @@
460
460
  @property st-global(--wds-counter-badge-padding-horizontal-small);
461
461
  @property st-global(--wds-counter-badge-size-medium);
462
462
  @property st-global(--wds-counter-badge-size-small);
463
+ @property st-global(--wds-custom-modal-border-radius);
464
+ @property st-global(--wds-custom-modal-content-padding-horizon);
465
+ @property st-global(--wds-custom-modal-content-padding-vertical);
466
+ @property st-global(--wds-custom-modal-footer-padding-horizon);
467
+ @property st-global(--wds-custom-modal-footer-padding-vertical);
468
+ @property st-global(--wds-custom-modal-footnote-padding-horizon);
469
+ @property st-global(--wds-custom-modal-footnote-padding-vertical);
470
+ @property st-global(--wds-custom-modal-header-padding-left);
471
+ @property st-global(--wds-custom-modal-header-padding-right);
472
+ @property st-global(--wds-custom-modal-header-padding-vertical);
463
473
  @property st-global(--wds-dock-background-fill);
464
474
  @property st-global(--wds-dock-background-fill-active);
465
475
  @property st-global(--wds-dock-background-fill-disabled);
@@ -678,7 +688,20 @@
678
688
  @property st-global(--wds-shadow-200);
679
689
  @property st-global(--wds-shadow-300);
680
690
  @property st-global(--wds-shadow-400);
691
+ @property st-global(--wds-side-panel-content-padding-horizontal);
692
+ @property st-global(--wds-side-panel-content-padding-vertical);
681
693
  @property st-global(--wds-side-panel-control-layout-divider-border-width);
694
+ @property st-global(--wds-side-panel-floating-border-radius);
695
+ @property st-global(--wds-side-panel-floating-header-padding-left);
696
+ @property st-global(--wds-side-panel-floating-header-padding-right);
697
+ @property st-global(--wds-side-panel-floating-header-padding-vertical);
698
+ @property st-global(--wds-side-panel-footer-padding-horizontal);
699
+ @property st-global(--wds-side-panel-footer-padding-vertical);
700
+ @property st-global(--wds-side-panel-footnote-padding-horizontal);
701
+ @property st-global(--wds-side-panel-footnote-padding-vertical);
702
+ @property st-global(--wds-side-panel-header-padding-left);
703
+ @property st-global(--wds-side-panel-header-padding-right);
704
+ @property st-global(--wds-side-panel-header-padding-vertical);
682
705
  @property st-global(--wds-skeleton-border-radius-circle);
683
706
  @property st-global(--wds-skeleton-border-radius-line);
684
707
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -796,6 +819,67 @@
796
819
  @property st-global(--wds-tooltip-padding-horizontal-small);
797
820
  @property st-global(--wds-tooltip-padding-vertical-medium);
798
821
  @property st-global(--wds-tooltip-padding-vertical-small);
822
+ @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
823
+ @property st-global(--wds-vertical-tabs-action-padding-horizontal-small);
824
+ @property st-global(--wds-vertical-tabs-action-padding-horizontal-tiny);
825
+ @property st-global(--wds-vertical-tabs-action-padding-vertical-medium);
826
+ @property st-global(--wds-vertical-tabs-action-padding-vertical-small);
827
+ @property st-global(--wds-vertical-tabs-action-padding-vertical-tiny);
828
+ @property st-global(--wds-vertical-tabs-item-active-title-text);
829
+ @property st-global(--wds-vertical-tabs-item-active-title-text-disabled);
830
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium);
831
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
832
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
833
+ @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
834
+ @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
835
+ @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
836
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium);
837
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium-active);
838
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium-disabled);
839
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium-hover);
840
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard);
841
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard-active);
842
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard-disabled);
843
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard-hover);
844
+ @property st-global(--wds-vertical-tabs-item-pill-padding-horizontal);
845
+ @property st-global(--wds-vertical-tabs-item-pill-padding-vertical);
846
+ @property st-global(--wds-vertical-tabs-item-round-active);
847
+ @property st-global(--wds-vertical-tabs-item-round-disabled);
848
+ @property st-global(--wds-vertical-tabs-item-round-fill);
849
+ @property st-global(--wds-vertical-tabs-item-round-fill-hover);
850
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium);
851
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium-active);
852
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium-disabled);
853
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium-hover);
854
+ @property st-global(--wds-vertical-tabs-item-round-padding-bottom-medium);
855
+ @property st-global(--wds-vertical-tabs-item-round-padding-bottom-small);
856
+ @property st-global(--wds-vertical-tabs-item-round-padding-bottom-tiny);
857
+ @property st-global(--wds-vertical-tabs-item-round-padding-horizontal-medium);
858
+ @property st-global(--wds-vertical-tabs-item-round-padding-horizontal-small);
859
+ @property st-global(--wds-vertical-tabs-item-round-padding-horizontal-tiny);
860
+ @property st-global(--wds-vertical-tabs-item-round-padding-top-medium);
861
+ @property st-global(--wds-vertical-tabs-item-round-padding-top-small);
862
+ @property st-global(--wds-vertical-tabs-item-round-padding-top-tiny);
863
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium);
864
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium-active);
865
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium-disabled);
866
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium-hover);
867
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard);
868
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard-active);
869
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard-disabled);
870
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard-hover);
871
+ @property st-global(--wds-vertical-tabs-item-title-text);
872
+ @property st-global(--wds-vertical-tabs-item-title-text-disabled);
873
+ @property st-global(--wds-vertical-tabs-round-fill);
874
+ @property st-global(--wds-vertical-tabs-section-title-padding-bottom-medium);
875
+ @property st-global(--wds-vertical-tabs-section-title-padding-bottom-small);
876
+ @property st-global(--wds-vertical-tabs-section-title-padding-bottom-tiny);
877
+ @property st-global(--wds-vertical-tabs-section-title-padding-horizontal-medium);
878
+ @property st-global(--wds-vertical-tabs-section-title-padding-horizontal-small);
879
+ @property st-global(--wds-vertical-tabs-section-title-padding-horizontal-tiny);
880
+ @property st-global(--wds-vertical-tabs-section-title-padding-top-medium);
881
+ @property st-global(--wds-vertical-tabs-section-title-padding-top-small);
882
+ @property st-global(--wds-vertical-tabs-section-title-padding-top-tiny);
799
883
 
800
884
  .root {
801
885
  --wds-add-item-padding-horizontal-large: 28px;
@@ -1260,6 +1344,16 @@
1260
1344
  --wds-counter-badge-padding-horizontal-small: 4px;
1261
1345
  --wds-counter-badge-size-medium: 24px;
1262
1346
  --wds-counter-badge-size-small: 18px;
1347
+ --wds-custom-modal-border-radius: 4px;
1348
+ --wds-custom-modal-content-padding-horizon: 24px;
1349
+ --wds-custom-modal-content-padding-vertical: 24px;
1350
+ --wds-custom-modal-footer-padding-horizon: 24px;
1351
+ --wds-custom-modal-footer-padding-vertical: 16px;
1352
+ --wds-custom-modal-footnote-padding-horizon: 24px;
1353
+ --wds-custom-modal-footnote-padding-vertical: 12px;
1354
+ --wds-custom-modal-header-padding-left: 24px;
1355
+ --wds-custom-modal-header-padding-right: 8px;
1356
+ --wds-custom-modal-header-padding-vertical: 16px;
1263
1357
  --wds-dock-background-fill: #ebf2ff;
1264
1358
  --wds-dock-background-fill-active: #dce9ff;
1265
1359
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -1478,7 +1572,20 @@
1478
1572
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
1479
1573
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
1480
1574
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
1575
+ --wds-side-panel-content-padding-horizontal: 24px;
1576
+ --wds-side-panel-content-padding-vertical: 24px;
1481
1577
  --wds-side-panel-control-layout-divider-border-width: 0;
1578
+ --wds-side-panel-floating-border-radius: 4px;
1579
+ --wds-side-panel-floating-header-padding-left: 24px;
1580
+ --wds-side-panel-floating-header-padding-right: 8px;
1581
+ --wds-side-panel-floating-header-padding-vertical: 12px;
1582
+ --wds-side-panel-footer-padding-horizontal: 24px;
1583
+ --wds-side-panel-footer-padding-vertical: 16px;
1584
+ --wds-side-panel-footnote-padding-horizontal: 24px;
1585
+ --wds-side-panel-footnote-padding-vertical: 12px;
1586
+ --wds-side-panel-header-padding-left: 24px;
1587
+ --wds-side-panel-header-padding-right: 8px;
1588
+ --wds-side-panel-header-padding-vertical: 16px;
1482
1589
  --wds-skeleton-border-radius-circle: 1000px;
1483
1590
  --wds-skeleton-border-radius-line: 4px;
1484
1591
  --wds-skeleton-border-radius-rectangle: 4px;
@@ -1596,4 +1703,65 @@
1596
1703
  --wds-tooltip-padding-horizontal-small: 8px;
1597
1704
  --wds-tooltip-padding-vertical-medium: 8px;
1598
1705
  --wds-tooltip-padding-vertical-small: 4px;
1706
+ --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
1707
+ --wds-vertical-tabs-action-padding-horizontal-small: 24px;
1708
+ --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
1709
+ --wds-vertical-tabs-action-padding-vertical-medium: 12px;
1710
+ --wds-vertical-tabs-action-padding-vertical-small: 12px;
1711
+ --wds-vertical-tabs-action-padding-vertical-tiny: 4px;
1712
+ --wds-vertical-tabs-item-active-title-text: #116dff;
1713
+ --wds-vertical-tabs-item-active-title-text-disabled: #bebebe;
1714
+ --wds-vertical-tabs-item-padding-horizontal-medium: 24px;
1715
+ --wds-vertical-tabs-item-padding-horizontal-small: 24px;
1716
+ --wds-vertical-tabs-item-padding-horizontal-tiny: 24px;
1717
+ --wds-vertical-tabs-item-padding-vertical-medium: 8px;
1718
+ --wds-vertical-tabs-item-padding-vertical-small: 8px;
1719
+ --wds-vertical-tabs-item-padding-vertical-tiny: 4px;
1720
+ --wds-vertical-tabs-item-pill-fill-premium: #ffffff;
1721
+ --wds-vertical-tabs-item-pill-fill-premium-active: #e3c3f4;
1722
+ --wds-vertical-tabs-item-pill-fill-premium-disabled: #ffffff;
1723
+ --wds-vertical-tabs-item-pill-fill-premium-hover: #f7f8f8;
1724
+ --wds-vertical-tabs-item-pill-fill-standard: #ffffff;
1725
+ --wds-vertical-tabs-item-pill-fill-standard-active: #dce9ff;
1726
+ --wds-vertical-tabs-item-pill-fill-standard-disabled: #ffffff;
1727
+ --wds-vertical-tabs-item-pill-fill-standard-hover: #f7f8f8;
1728
+ --wds-vertical-tabs-item-pill-padding-horizontal: 0;
1729
+ --wds-vertical-tabs-item-pill-padding-vertical: 0;
1730
+ --wds-vertical-tabs-item-round-active: #dce9ff;
1731
+ --wds-vertical-tabs-item-round-disabled: #ffffff;
1732
+ --wds-vertical-tabs-item-round-fill: #ffffff;
1733
+ --wds-vertical-tabs-item-round-fill-hover: #f7f8f8;
1734
+ --wds-vertical-tabs-item-round-fill-premium: #ffffff;
1735
+ --wds-vertical-tabs-item-round-fill-premium-active: #e3c3f4;
1736
+ --wds-vertical-tabs-item-round-fill-premium-disabled: #ffffff;
1737
+ --wds-vertical-tabs-item-round-fill-premium-hover: #f7f8f8;
1738
+ --wds-vertical-tabs-item-round-padding-bottom-medium: 8px;
1739
+ --wds-vertical-tabs-item-round-padding-bottom-small: 8px;
1740
+ --wds-vertical-tabs-item-round-padding-bottom-tiny: 4px;
1741
+ --wds-vertical-tabs-item-round-padding-horizontal-medium: 24px;
1742
+ --wds-vertical-tabs-item-round-padding-horizontal-small: 24px;
1743
+ --wds-vertical-tabs-item-round-padding-horizontal-tiny: 24px;
1744
+ --wds-vertical-tabs-item-round-padding-top-medium: 8px;
1745
+ --wds-vertical-tabs-item-round-padding-top-small: 8px;
1746
+ --wds-vertical-tabs-item-round-padding-top-tiny: 4px;
1747
+ --wds-vertical-tabs-item-round-title-text-premium: #9a27d5;
1748
+ --wds-vertical-tabs-item-round-title-text-premium-active: #9a27d5;
1749
+ --wds-vertical-tabs-item-round-title-text-premium-disabled: #bebebe;
1750
+ --wds-vertical-tabs-item-round-title-text-premium-hover: #9a27d5;
1751
+ --wds-vertical-tabs-item-round-title-text-standard: #131720;
1752
+ --wds-vertical-tabs-item-round-title-text-standard-active: #116dff;
1753
+ --wds-vertical-tabs-item-round-title-text-standard-disabled: #bebebe;
1754
+ --wds-vertical-tabs-item-round-title-text-standard-hover: #131720;
1755
+ --wds-vertical-tabs-item-title-text: #131720;
1756
+ --wds-vertical-tabs-item-title-text-disabled: #bebebe;
1757
+ --wds-vertical-tabs-round-fill: #ffffff;
1758
+ --wds-vertical-tabs-section-title-padding-bottom-medium: 12px;
1759
+ --wds-vertical-tabs-section-title-padding-bottom-small: 12px;
1760
+ --wds-vertical-tabs-section-title-padding-bottom-tiny: 4px;
1761
+ --wds-vertical-tabs-section-title-padding-horizontal-medium: 24px;
1762
+ --wds-vertical-tabs-section-title-padding-horizontal-small: 24px;
1763
+ --wds-vertical-tabs-section-title-padding-horizontal-tiny: 24px;
1764
+ --wds-vertical-tabs-section-title-padding-top-medium: 24px;
1765
+ --wds-vertical-tabs-section-title-padding-top-small: 16px;
1766
+ --wds-vertical-tabs-section-title-padding-top-tiny: 4px;
1599
1767
  }
package/studio/component.st.css CHANGED
@@ -89,6 +89,16 @@
89
89
  @property st-global(--wds-counter-badge-padding-horizontal-small);
90
90
  @property st-global(--wds-counter-badge-size-medium);
91
91
  @property st-global(--wds-counter-badge-size-small);
92
+ @property st-global(--wds-custom-modal-border-radius);
93
+ @property st-global(--wds-custom-modal-content-padding-horizon);
94
+ @property st-global(--wds-custom-modal-content-padding-vertical);
95
+ @property st-global(--wds-custom-modal-footer-padding-horizon);
96
+ @property st-global(--wds-custom-modal-footer-padding-vertical);
97
+ @property st-global(--wds-custom-modal-footnote-padding-horizon);
98
+ @property st-global(--wds-custom-modal-footnote-padding-vertical);
99
+ @property st-global(--wds-custom-modal-header-padding-left);
100
+ @property st-global(--wds-custom-modal-header-padding-right);
101
+ @property st-global(--wds-custom-modal-header-padding-vertical);
92
102
  @property st-global(--wds-dock-background-fill);
93
103
  @property st-global(--wds-dock-background-fill-active);
94
104
  @property st-global(--wds-dock-background-fill-disabled);
@@ -251,7 +261,20 @@
251
261
  @property st-global(--wds-select-area-fill-hover);
252
262
  @property st-global(--wds-select-area-padding-horizontal);
253
263
  @property st-global(--wds-select-area-padding-vertical);
264
+ @property st-global(--wds-side-panel-content-padding-horizontal);
265
+ @property st-global(--wds-side-panel-content-padding-vertical);
254
266
  @property st-global(--wds-side-panel-control-layout-divider-border-width);
267
+ @property st-global(--wds-side-panel-floating-border-radius);
268
+ @property st-global(--wds-side-panel-floating-header-padding-left);
269
+ @property st-global(--wds-side-panel-floating-header-padding-right);
270
+ @property st-global(--wds-side-panel-floating-header-padding-vertical);
271
+ @property st-global(--wds-side-panel-footer-padding-horizontal);
272
+ @property st-global(--wds-side-panel-footer-padding-vertical);
273
+ @property st-global(--wds-side-panel-footnote-padding-horizontal);
274
+ @property st-global(--wds-side-panel-footnote-padding-vertical);
275
+ @property st-global(--wds-side-panel-header-padding-left);
276
+ @property st-global(--wds-side-panel-header-padding-right);
277
+ @property st-global(--wds-side-panel-header-padding-vertical);
255
278
  @property st-global(--wds-skeleton-border-radius-circle);
256
279
  @property st-global(--wds-skeleton-border-radius-line);
257
280
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -345,6 +368,67 @@
345
368
  @property st-global(--wds-tooltip-padding-horizontal-small);
346
369
  @property st-global(--wds-tooltip-padding-vertical-medium);
347
370
  @property st-global(--wds-tooltip-padding-vertical-small);
371
+ @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
372
+ @property st-global(--wds-vertical-tabs-action-padding-horizontal-small);
373
+ @property st-global(--wds-vertical-tabs-action-padding-horizontal-tiny);
374
+ @property st-global(--wds-vertical-tabs-action-padding-vertical-medium);
375
+ @property st-global(--wds-vertical-tabs-action-padding-vertical-small);
376
+ @property st-global(--wds-vertical-tabs-action-padding-vertical-tiny);
377
+ @property st-global(--wds-vertical-tabs-item-active-title-text);
378
+ @property st-global(--wds-vertical-tabs-item-active-title-text-disabled);
379
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-medium);
380
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-small);
381
+ @property st-global(--wds-vertical-tabs-item-padding-horizontal-tiny);
382
+ @property st-global(--wds-vertical-tabs-item-padding-vertical-medium);
383
+ @property st-global(--wds-vertical-tabs-item-padding-vertical-small);
384
+ @property st-global(--wds-vertical-tabs-item-padding-vertical-tiny);
385
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium);
386
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium-active);
387
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium-disabled);
388
+ @property st-global(--wds-vertical-tabs-item-pill-fill-premium-hover);
389
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard);
390
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard-active);
391
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard-disabled);
392
+ @property st-global(--wds-vertical-tabs-item-pill-fill-standard-hover);
393
+ @property st-global(--wds-vertical-tabs-item-pill-padding-horizontal);
394
+ @property st-global(--wds-vertical-tabs-item-pill-padding-vertical);
395
+ @property st-global(--wds-vertical-tabs-item-round-active);
396
+ @property st-global(--wds-vertical-tabs-item-round-disabled);
397
+ @property st-global(--wds-vertical-tabs-item-round-fill);
398
+ @property st-global(--wds-vertical-tabs-item-round-fill-hover);
399
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium);
400
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium-active);
401
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium-disabled);
402
+ @property st-global(--wds-vertical-tabs-item-round-fill-premium-hover);
403
+ @property st-global(--wds-vertical-tabs-item-round-padding-bottom-medium);
404
+ @property st-global(--wds-vertical-tabs-item-round-padding-bottom-small);
405
+ @property st-global(--wds-vertical-tabs-item-round-padding-bottom-tiny);
406
+ @property st-global(--wds-vertical-tabs-item-round-padding-horizontal-medium);
407
+ @property st-global(--wds-vertical-tabs-item-round-padding-horizontal-small);
408
+ @property st-global(--wds-vertical-tabs-item-round-padding-horizontal-tiny);
409
+ @property st-global(--wds-vertical-tabs-item-round-padding-top-medium);
410
+ @property st-global(--wds-vertical-tabs-item-round-padding-top-small);
411
+ @property st-global(--wds-vertical-tabs-item-round-padding-top-tiny);
412
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium);
413
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium-active);
414
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium-disabled);
415
+ @property st-global(--wds-vertical-tabs-item-round-title-text-premium-hover);
416
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard);
417
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard-active);
418
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard-disabled);
419
+ @property st-global(--wds-vertical-tabs-item-round-title-text-standard-hover);
420
+ @property st-global(--wds-vertical-tabs-item-title-text);
421
+ @property st-global(--wds-vertical-tabs-item-title-text-disabled);
422
+ @property st-global(--wds-vertical-tabs-round-fill);
423
+ @property st-global(--wds-vertical-tabs-section-title-padding-bottom-medium);
424
+ @property st-global(--wds-vertical-tabs-section-title-padding-bottom-small);
425
+ @property st-global(--wds-vertical-tabs-section-title-padding-bottom-tiny);
426
+ @property st-global(--wds-vertical-tabs-section-title-padding-horizontal-medium);
427
+ @property st-global(--wds-vertical-tabs-section-title-padding-horizontal-small);
428
+ @property st-global(--wds-vertical-tabs-section-title-padding-horizontal-tiny);
429
+ @property st-global(--wds-vertical-tabs-section-title-padding-top-medium);
430
+ @property st-global(--wds-vertical-tabs-section-title-padding-top-small);
431
+ @property st-global(--wds-vertical-tabs-section-title-padding-top-tiny);
348
432
 
349
433
  .root {
350
434
  --wds-add-item-padding-horizontal-large: 28px;
@@ -438,6 +522,16 @@
438
522
  --wds-counter-badge-padding-horizontal-small: 4px;
439
523
  --wds-counter-badge-size-medium: 24px;
440
524
  --wds-counter-badge-size-small: 18px;
525
+ --wds-custom-modal-border-radius: 4px;
526
+ --wds-custom-modal-content-padding-horizon: 24px;
527
+ --wds-custom-modal-content-padding-vertical: 24px;
528
+ --wds-custom-modal-footer-padding-horizon: 24px;
529
+ --wds-custom-modal-footer-padding-vertical: 16px;
530
+ --wds-custom-modal-footnote-padding-horizon: 24px;
531
+ --wds-custom-modal-footnote-padding-vertical: 12px;
532
+ --wds-custom-modal-header-padding-left: 24px;
533
+ --wds-custom-modal-header-padding-right: 8px;
534
+ --wds-custom-modal-header-padding-vertical: 16px;
441
535
  --wds-dock-background-fill: #ebf2ff;
442
536
  --wds-dock-background-fill-active: #dce9ff;
443
537
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -600,7 +694,20 @@
600
694
  --wds-select-area-fill-hover: #edeef2;
601
695
  --wds-select-area-padding-horizontal: 16px;
602
696
  --wds-select-area-padding-vertical: 12px;
697
+ --wds-side-panel-content-padding-horizontal: 24px;
698
+ --wds-side-panel-content-padding-vertical: 24px;
603
699
  --wds-side-panel-control-layout-divider-border-width: 0;
700
+ --wds-side-panel-floating-border-radius: 4px;
701
+ --wds-side-panel-floating-header-padding-left: 24px;
702
+ --wds-side-panel-floating-header-padding-right: 8px;
703
+ --wds-side-panel-floating-header-padding-vertical: 12px;
704
+ --wds-side-panel-footer-padding-horizontal: 24px;
705
+ --wds-side-panel-footer-padding-vertical: 16px;
706
+ --wds-side-panel-footnote-padding-horizontal: 24px;
707
+ --wds-side-panel-footnote-padding-vertical: 12px;
708
+ --wds-side-panel-header-padding-left: 24px;
709
+ --wds-side-panel-header-padding-right: 8px;
710
+ --wds-side-panel-header-padding-vertical: 16px;
604
711
  --wds-skeleton-border-radius-circle: 1000px;
605
712
  --wds-skeleton-border-radius-line: 4px;
606
713
  --wds-skeleton-border-radius-rectangle: 4px;
@@ -694,4 +801,65 @@
694
801
  --wds-tooltip-padding-horizontal-small: 8px;
695
802
  --wds-tooltip-padding-vertical-medium: 8px;
696
803
  --wds-tooltip-padding-vertical-small: 4px;
804
+ --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
805
+ --wds-vertical-tabs-action-padding-horizontal-small: 24px;
806
+ --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
807
+ --wds-vertical-tabs-action-padding-vertical-medium: 12px;
808
+ --wds-vertical-tabs-action-padding-vertical-small: 12px;
809
+ --wds-vertical-tabs-action-padding-vertical-tiny: 4px;
810
+ --wds-vertical-tabs-item-active-title-text: #116dff;
811
+ --wds-vertical-tabs-item-active-title-text-disabled: #bebebe;
812
+ --wds-vertical-tabs-item-padding-horizontal-medium: 24px;
813
+ --wds-vertical-tabs-item-padding-horizontal-small: 24px;
814
+ --wds-vertical-tabs-item-padding-horizontal-tiny: 24px;
815
+ --wds-vertical-tabs-item-padding-vertical-medium: 8px;
816
+ --wds-vertical-tabs-item-padding-vertical-small: 8px;
817
+ --wds-vertical-tabs-item-padding-vertical-tiny: 4px;
818
+ --wds-vertical-tabs-item-pill-fill-premium: #ffffff;
819
+ --wds-vertical-tabs-item-pill-fill-premium-active: #e3c3f4;
820
+ --wds-vertical-tabs-item-pill-fill-premium-disabled: #ffffff;
821
+ --wds-vertical-tabs-item-pill-fill-premium-hover: #f7f8f8;
822
+ --wds-vertical-tabs-item-pill-fill-standard: #ffffff;
823
+ --wds-vertical-tabs-item-pill-fill-standard-active: #dce9ff;
824
+ --wds-vertical-tabs-item-pill-fill-standard-disabled: #ffffff;
825
+ --wds-vertical-tabs-item-pill-fill-standard-hover: #f7f8f8;
826
+ --wds-vertical-tabs-item-pill-padding-horizontal: 0;
827
+ --wds-vertical-tabs-item-pill-padding-vertical: 0;
828
+ --wds-vertical-tabs-item-round-active: #dce9ff;
829
+ --wds-vertical-tabs-item-round-disabled: #ffffff;
830
+ --wds-vertical-tabs-item-round-fill: #ffffff;
831
+ --wds-vertical-tabs-item-round-fill-hover: #f7f8f8;
832
+ --wds-vertical-tabs-item-round-fill-premium: #ffffff;
833
+ --wds-vertical-tabs-item-round-fill-premium-active: #e3c3f4;
834
+ --wds-vertical-tabs-item-round-fill-premium-disabled: #ffffff;
835
+ --wds-vertical-tabs-item-round-fill-premium-hover: #f7f8f8;
836
+ --wds-vertical-tabs-item-round-padding-bottom-medium: 8px;
837
+ --wds-vertical-tabs-item-round-padding-bottom-small: 8px;
838
+ --wds-vertical-tabs-item-round-padding-bottom-tiny: 4px;
839
+ --wds-vertical-tabs-item-round-padding-horizontal-medium: 24px;
840
+ --wds-vertical-tabs-item-round-padding-horizontal-small: 24px;
841
+ --wds-vertical-tabs-item-round-padding-horizontal-tiny: 24px;
842
+ --wds-vertical-tabs-item-round-padding-top-medium: 8px;
843
+ --wds-vertical-tabs-item-round-padding-top-small: 8px;
844
+ --wds-vertical-tabs-item-round-padding-top-tiny: 4px;
845
+ --wds-vertical-tabs-item-round-title-text-premium: #9a27d5;
846
+ --wds-vertical-tabs-item-round-title-text-premium-active: #9a27d5;
847
+ --wds-vertical-tabs-item-round-title-text-premium-disabled: #bebebe;
848
+ --wds-vertical-tabs-item-round-title-text-premium-hover: #9a27d5;
849
+ --wds-vertical-tabs-item-round-title-text-standard: #131720;
850
+ --wds-vertical-tabs-item-round-title-text-standard-active: #116dff;
851
+ --wds-vertical-tabs-item-round-title-text-standard-disabled: #bebebe;
852
+ --wds-vertical-tabs-item-round-title-text-standard-hover: #131720;
853
+ --wds-vertical-tabs-item-title-text: #131720;
854
+ --wds-vertical-tabs-item-title-text-disabled: #bebebe;
855
+ --wds-vertical-tabs-round-fill: #ffffff;
856
+ --wds-vertical-tabs-section-title-padding-bottom-medium: 12px;
857
+ --wds-vertical-tabs-section-title-padding-bottom-small: 12px;
858
+ --wds-vertical-tabs-section-title-padding-bottom-tiny: 4px;
859
+ --wds-vertical-tabs-section-title-padding-horizontal-medium: 24px;
860
+ --wds-vertical-tabs-section-title-padding-horizontal-small: 24px;
861
+ --wds-vertical-tabs-section-title-padding-horizontal-tiny: 24px;
862
+ --wds-vertical-tabs-section-title-padding-top-medium: 24px;
863
+ --wds-vertical-tabs-section-title-padding-top-small: 16px;
864
+ --wds-vertical-tabs-section-title-padding-top-tiny: 4px;
697
865
  }