@wix/design-system-tokens 1.3.6 → 1.3.8

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 +74 -2
  2. package/component.st.css +74 -2
  3. package/package.json +4 -3
  4. package/studio/all.st.css +74 -2
  5. package/studio/component.st.css +74 -2
package/all.st.css CHANGED
@@ -27,7 +27,7 @@
27
27
  @property st-global(--wds-border-width-100);
28
28
  @property st-global(--wds-border-width-200);
29
29
  @property st-global(--wds-border-width-none);
30
- @property st-global(--wds-breadcrumbs-border);
30
+ @property st-global(--wds-breadcrumbs-border-radius);
31
31
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
32
32
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
33
33
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
@@ -458,6 +458,26 @@
458
458
  @property st-global(--wds-color-yellow-400);
459
459
  @property st-global(--wds-color-yellow-500);
460
460
  @property st-global(--wds-color-yellow-600);
461
+ @property st-global(--wds-composer-sidebar-bottom-width);
462
+ @property st-global(--wds-composer-sidebar-end-max-width);
463
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-large);
464
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-medium);
465
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-small);
466
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-vertical-large);
467
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-vertical-medium);
468
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-vertical-small);
469
+ @property st-global(--wds-composer-sidebar-item-end-padding-horizontal-large);
470
+ @property st-global(--wds-composer-sidebar-item-end-padding-horizontal-medium);
471
+ @property st-global(--wds-composer-sidebar-item-end-padding-horizontal-small);
472
+ @property st-global(--wds-composer-sidebar-item-end-padding-vertical-large);
473
+ @property st-global(--wds-composer-sidebar-item-end-padding-vertical-medium);
474
+ @property st-global(--wds-composer-sidebar-item-end-padding-vertical-small);
475
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-horizontal-large);
476
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-horizontal-medium);
477
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-horizontal-small);
478
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-large);
479
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-medium);
480
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
461
481
  @property st-global(--wds-counter-badge-border-radius-medium);
462
482
  @property st-global(--wds-counter-badge-border-radius-small);
463
483
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
@@ -554,6 +574,14 @@
554
574
  @property st-global(--wds-gallery-item-padding-vertical-small);
555
575
  @property st-global(--wds-image-border-radius-default);
556
576
  @property st-global(--wds-image-border-radius-none);
577
+ @property st-global(--wds-input-area-border-radius-default-medium);
578
+ @property st-global(--wds-input-area-border-radius-default-small);
579
+ @property st-global(--wds-input-area-padding-left-medium);
580
+ @property st-global(--wds-input-area-padding-left-small);
581
+ @property st-global(--wds-input-area-padding-right-medium);
582
+ @property st-global(--wds-input-area-padding-right-small);
583
+ @property st-global(--wds-input-area-padding-vertical-medium);
584
+ @property st-global(--wds-input-area-padding-vertical-small);
557
585
  @property st-global(--wds-input-border-radius-default-large);
558
586
  @property st-global(--wds-input-border-radius-default-medium);
559
587
  @property st-global(--wds-input-border-radius-default-small);
@@ -764,6 +792,8 @@
764
792
  @property st-global(--wds-space-1600);
765
793
  @property st-global(--wds-space-1700);
766
794
  @property st-global(--wds-space-2400);
795
+ @property st-global(--wds-stepper-prefix-size-circle);
796
+ @property st-global(--wds-stepper-prefix-size-number);
767
797
  @property st-global(--wds-swatches-list-gap);
768
798
  @property st-global(--wds-swatches-list-padding-horizontal);
769
799
  @property st-global(--wds-swatches-list-padding-vertical);
@@ -774,6 +804,12 @@
774
804
  @property st-global(--wds-swatches-swatch-size-large);
775
805
  @property st-global(--wds-swatches-swatch-size-medium);
776
806
  @property st-global(--wds-swatches-swatch-size-small);
807
+ @property st-global(--wds-tabs-gap-medium);
808
+ @property st-global(--wds-tabs-gap-small);
809
+ @property st-global(--wds-tabs-padding-horizontal-medium);
810
+ @property st-global(--wds-tabs-padding-horizontal-small);
811
+ @property st-global(--wds-tabs-padding-vertical-medium);
812
+ @property st-global(--wds-tabs-padding-vertical-small);
777
813
  @property st-global(--wds-tag-border-radius-large);
778
814
  @property st-global(--wds-tag-border-radius-medium);
779
815
  @property st-global(--wds-tag-border-radius-small);
@@ -939,7 +975,7 @@
939
975
  --wds-border-width-100: 1px;
940
976
  --wds-border-width-200: 2px;
941
977
  --wds-border-width-none: 0;
942
- --wds-breadcrumbs-border: 1000px;
978
+ --wds-breadcrumbs-border-radius: 1000px;
943
979
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
944
980
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
945
981
  --wds-breadcrumbs-on-white-fill-hover: #e7f0ff;
@@ -1370,6 +1406,26 @@
1370
1406
  --wds-color-yellow-400: #ffe2a5;
1371
1407
  --wds-color-yellow-500: #fff0d1;
1372
1408
  --wds-color-yellow-600: #fff6e5;
1409
+ --wds-composer-sidebar-bottom-width: 90px;
1410
+ --wds-composer-sidebar-end-max-width: 240px;
1411
+ --wds-composer-sidebar-item-bottom-padding-horizontal-large: 6px;
1412
+ --wds-composer-sidebar-item-bottom-padding-horizontal-medium: 6px;
1413
+ --wds-composer-sidebar-item-bottom-padding-horizontal-small: 6px;
1414
+ --wds-composer-sidebar-item-bottom-padding-vertical-large: 12px;
1415
+ --wds-composer-sidebar-item-bottom-padding-vertical-medium: 12px;
1416
+ --wds-composer-sidebar-item-bottom-padding-vertical-small: 6px;
1417
+ --wds-composer-sidebar-item-end-padding-horizontal-large: 15px;
1418
+ --wds-composer-sidebar-item-end-padding-horizontal-medium: 15px;
1419
+ --wds-composer-sidebar-item-end-padding-horizontal-small: 15px;
1420
+ --wds-composer-sidebar-item-end-padding-vertical-large: 9px;
1421
+ --wds-composer-sidebar-item-end-padding-vertical-medium: 9px;
1422
+ --wds-composer-sidebar-item-end-padding-vertical-small: 6px;
1423
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-large: 12px;
1424
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: 12px;
1425
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-small: 12px;
1426
+ --wds-composer-sidebar-item-tooltip-padding-vertical-large: 12px;
1427
+ --wds-composer-sidebar-item-tooltip-padding-vertical-medium: 12px;
1428
+ --wds-composer-sidebar-item-tooltip-padding-vertical-small: 6px;
1373
1429
  --wds-counter-badge-border-radius-medium: 1000px;
1374
1430
  --wds-counter-badge-border-radius-small: 1000px;
1375
1431
  --wds-counter-badge-padding-horizontal-medium: 9px;
@@ -1466,6 +1522,14 @@
1466
1522
  --wds-gallery-item-padding-vertical-small: 12px;
1467
1523
  --wds-image-border-radius-default: 8px;
1468
1524
  --wds-image-border-radius-none: 0;
1525
+ --wds-input-area-border-radius-default-medium: 6px;
1526
+ --wds-input-area-border-radius-default-small: 6px;
1527
+ --wds-input-area-padding-left-medium: 12px;
1528
+ --wds-input-area-padding-left-small: 12px;
1529
+ --wds-input-area-padding-right-medium: 9px;
1530
+ --wds-input-area-padding-right-small: 9px;
1531
+ --wds-input-area-padding-vertical-medium: 6px;
1532
+ --wds-input-area-padding-vertical-small: 6px;
1469
1533
  --wds-input-border-radius-default-large: 6px;
1470
1534
  --wds-input-border-radius-default-medium: 6px;
1471
1535
  --wds-input-border-radius-default-small: 6px;
@@ -1676,6 +1740,8 @@
1676
1740
  --wds-space-1600: 96px;
1677
1741
  --wds-space-1700: 102px;
1678
1742
  --wds-space-2400: 144px;
1743
+ --wds-stepper-prefix-size-circle: 30px;
1744
+ --wds-stepper-prefix-size-number: 24px;
1679
1745
  --wds-swatches-list-gap: 12px;
1680
1746
  --wds-swatches-list-padding-horizontal: 18px;
1681
1747
  --wds-swatches-list-padding-vertical: 12px;
@@ -1686,6 +1752,12 @@
1686
1752
  --wds-swatches-swatch-size-large: 30px;
1687
1753
  --wds-swatches-swatch-size-medium: 24px;
1688
1754
  --wds-swatches-swatch-size-small: 18px;
1755
+ --wds-tabs-gap-medium: 6px;
1756
+ --wds-tabs-gap-small: 6px;
1757
+ --wds-tabs-padding-horizontal-medium: 18px;
1758
+ --wds-tabs-padding-horizontal-small: 12px;
1759
+ --wds-tabs-padding-vertical-medium: 18px;
1760
+ --wds-tabs-padding-vertical-small: 12px;
1689
1761
  --wds-tag-border-radius-large: 1000px;
1690
1762
  --wds-tag-border-radius-medium: 1000px;
1691
1763
  --wds-tag-border-radius-small: 1000px;
package/component.st.css CHANGED
@@ -16,7 +16,7 @@
16
16
  @property st-global(--wds-badge-size-medium);
17
17
  @property st-global(--wds-badge-size-small);
18
18
  @property st-global(--wds-badge-size-tiny);
19
- @property st-global(--wds-breadcrumbs-border);
19
+ @property st-global(--wds-breadcrumbs-border-radius);
20
20
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
21
21
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
22
22
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
@@ -83,6 +83,26 @@
83
83
  @property st-global(--wds-circular-progress-bar-size-large);
84
84
  @property st-global(--wds-circular-progress-bar-size-medium);
85
85
  @property st-global(--wds-circular-progress-bar-size-small);
86
+ @property st-global(--wds-composer-sidebar-bottom-width);
87
+ @property st-global(--wds-composer-sidebar-end-max-width);
88
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-large);
89
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-medium);
90
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-small);
91
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-vertical-large);
92
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-vertical-medium);
93
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-vertical-small);
94
+ @property st-global(--wds-composer-sidebar-item-end-padding-horizontal-large);
95
+ @property st-global(--wds-composer-sidebar-item-end-padding-horizontal-medium);
96
+ @property st-global(--wds-composer-sidebar-item-end-padding-horizontal-small);
97
+ @property st-global(--wds-composer-sidebar-item-end-padding-vertical-large);
98
+ @property st-global(--wds-composer-sidebar-item-end-padding-vertical-medium);
99
+ @property st-global(--wds-composer-sidebar-item-end-padding-vertical-small);
100
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-horizontal-large);
101
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-horizontal-medium);
102
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-horizontal-small);
103
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-large);
104
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-medium);
105
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
86
106
  @property st-global(--wds-counter-badge-border-radius-medium);
87
107
  @property st-global(--wds-counter-badge-border-radius-small);
88
108
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
@@ -127,6 +147,14 @@
127
147
  @property st-global(--wds-gallery-item-padding-vertical-small);
128
148
  @property st-global(--wds-image-border-radius-default);
129
149
  @property st-global(--wds-image-border-radius-none);
150
+ @property st-global(--wds-input-area-border-radius-default-medium);
151
+ @property st-global(--wds-input-area-border-radius-default-small);
152
+ @property st-global(--wds-input-area-padding-left-medium);
153
+ @property st-global(--wds-input-area-padding-left-small);
154
+ @property st-global(--wds-input-area-padding-right-medium);
155
+ @property st-global(--wds-input-area-padding-right-small);
156
+ @property st-global(--wds-input-area-padding-vertical-medium);
157
+ @property st-global(--wds-input-area-padding-vertical-small);
130
158
  @property st-global(--wds-input-border-radius-default-large);
131
159
  @property st-global(--wds-input-border-radius-default-medium);
132
160
  @property st-global(--wds-input-border-radius-default-small);
@@ -286,6 +314,8 @@
286
314
  @property st-global(--wds-slider-track-border-radius-transparent);
287
315
  @property st-global(--wds-slider-track-size);
288
316
  @property st-global(--wds-slider-track-size-transparent);
317
+ @property st-global(--wds-stepper-prefix-size-circle);
318
+ @property st-global(--wds-stepper-prefix-size-number);
289
319
  @property st-global(--wds-swatches-list-gap);
290
320
  @property st-global(--wds-swatches-list-padding-horizontal);
291
321
  @property st-global(--wds-swatches-list-padding-vertical);
@@ -296,6 +326,12 @@
296
326
  @property st-global(--wds-swatches-swatch-size-large);
297
327
  @property st-global(--wds-swatches-swatch-size-medium);
298
328
  @property st-global(--wds-swatches-swatch-size-small);
329
+ @property st-global(--wds-tabs-gap-medium);
330
+ @property st-global(--wds-tabs-gap-small);
331
+ @property st-global(--wds-tabs-padding-horizontal-medium);
332
+ @property st-global(--wds-tabs-padding-horizontal-small);
333
+ @property st-global(--wds-tabs-padding-vertical-medium);
334
+ @property st-global(--wds-tabs-padding-vertical-small);
299
335
  @property st-global(--wds-tag-border-radius-large);
300
336
  @property st-global(--wds-tag-border-radius-medium);
301
337
  @property st-global(--wds-tag-border-radius-small);
@@ -450,7 +486,7 @@
450
486
  --wds-badge-size-medium: 24px;
451
487
  --wds-badge-size-small: 18px;
452
488
  --wds-badge-size-tiny: 18px;
453
- --wds-breadcrumbs-border: 1000px;
489
+ --wds-breadcrumbs-border-radius: 1000px;
454
490
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
455
491
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
456
492
  --wds-breadcrumbs-on-white-fill-hover: #e7f0ff;
@@ -517,6 +553,26 @@
517
553
  --wds-circular-progress-bar-size-large: 102px;
518
554
  --wds-circular-progress-bar-size-medium: 54px;
519
555
  --wds-circular-progress-bar-size-small: 30px;
556
+ --wds-composer-sidebar-bottom-width: 90px;
557
+ --wds-composer-sidebar-end-max-width: 240px;
558
+ --wds-composer-sidebar-item-bottom-padding-horizontal-large: 6px;
559
+ --wds-composer-sidebar-item-bottom-padding-horizontal-medium: 6px;
560
+ --wds-composer-sidebar-item-bottom-padding-horizontal-small: 6px;
561
+ --wds-composer-sidebar-item-bottom-padding-vertical-large: 12px;
562
+ --wds-composer-sidebar-item-bottom-padding-vertical-medium: 12px;
563
+ --wds-composer-sidebar-item-bottom-padding-vertical-small: 6px;
564
+ --wds-composer-sidebar-item-end-padding-horizontal-large: 15px;
565
+ --wds-composer-sidebar-item-end-padding-horizontal-medium: 15px;
566
+ --wds-composer-sidebar-item-end-padding-horizontal-small: 15px;
567
+ --wds-composer-sidebar-item-end-padding-vertical-large: 9px;
568
+ --wds-composer-sidebar-item-end-padding-vertical-medium: 9px;
569
+ --wds-composer-sidebar-item-end-padding-vertical-small: 6px;
570
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-large: 12px;
571
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: 12px;
572
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-small: 12px;
573
+ --wds-composer-sidebar-item-tooltip-padding-vertical-large: 12px;
574
+ --wds-composer-sidebar-item-tooltip-padding-vertical-medium: 12px;
575
+ --wds-composer-sidebar-item-tooltip-padding-vertical-small: 6px;
520
576
  --wds-counter-badge-border-radius-medium: 1000px;
521
577
  --wds-counter-badge-border-radius-small: 1000px;
522
578
  --wds-counter-badge-padding-horizontal-medium: 9px;
@@ -561,6 +617,14 @@
561
617
  --wds-gallery-item-padding-vertical-small: 12px;
562
618
  --wds-image-border-radius-default: 8px;
563
619
  --wds-image-border-radius-none: 0;
620
+ --wds-input-area-border-radius-default-medium: 6px;
621
+ --wds-input-area-border-radius-default-small: 6px;
622
+ --wds-input-area-padding-left-medium: 12px;
623
+ --wds-input-area-padding-left-small: 12px;
624
+ --wds-input-area-padding-right-medium: 9px;
625
+ --wds-input-area-padding-right-small: 9px;
626
+ --wds-input-area-padding-vertical-medium: 6px;
627
+ --wds-input-area-padding-vertical-small: 6px;
564
628
  --wds-input-border-radius-default-large: 6px;
565
629
  --wds-input-border-radius-default-medium: 6px;
566
630
  --wds-input-border-radius-default-small: 6px;
@@ -720,6 +784,8 @@
720
784
  --wds-slider-track-border-radius-transparent: 1000px;
721
785
  --wds-slider-track-size: 4px;
722
786
  --wds-slider-track-size-transparent: 8px;
787
+ --wds-stepper-prefix-size-circle: 30px;
788
+ --wds-stepper-prefix-size-number: 24px;
723
789
  --wds-swatches-list-gap: 12px;
724
790
  --wds-swatches-list-padding-horizontal: 18px;
725
791
  --wds-swatches-list-padding-vertical: 12px;
@@ -730,6 +796,12 @@
730
796
  --wds-swatches-swatch-size-large: 30px;
731
797
  --wds-swatches-swatch-size-medium: 24px;
732
798
  --wds-swatches-swatch-size-small: 18px;
799
+ --wds-tabs-gap-medium: 6px;
800
+ --wds-tabs-gap-small: 6px;
801
+ --wds-tabs-padding-horizontal-medium: 18px;
802
+ --wds-tabs-padding-horizontal-small: 12px;
803
+ --wds-tabs-padding-vertical-medium: 18px;
804
+ --wds-tabs-padding-vertical-small: 12px;
733
805
  --wds-tag-border-radius-large: 1000px;
734
806
  --wds-tag-border-radius-medium: 1000px;
735
807
  --wds-tag-border-radius-small: 1000px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.3.6",
3
+ "version": "1.3.8",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -20,7 +20,8 @@
20
20
  "generate": "ts-node src/generate.ts & yarn run lint",
21
21
  "test": "jest",
22
22
  "test:watch": "jest --watch",
23
- "lint": "yarn run eslint ./src --fix"
23
+ "lint": "yarn run eslint ./src --fix",
24
+ "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts"
24
25
  },
25
26
  "publishConfig": {
26
27
  "registry": "https://registry.npmjs.org/",
@@ -32,5 +33,5 @@
32
33
  "groupId": "com.wixpress"
33
34
  }
34
35
  },
35
- "falconPackageHash": "445d6de5e6bebb263e271b4f4c02f34ae54fed7a9ecafe671217c662"
36
+ "falconPackageHash": "42eefc8d7935d168b8d51033780acc17afddc18da84f9ec2e7fc0f00"
36
37
  }
package/studio/all.st.css CHANGED
@@ -27,7 +27,7 @@
27
27
  @property st-global(--wds-border-width-100);
28
28
  @property st-global(--wds-border-width-200);
29
29
  @property st-global(--wds-border-width-none);
30
- @property st-global(--wds-breadcrumbs-border);
30
+ @property st-global(--wds-breadcrumbs-border-radius);
31
31
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
32
32
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
33
33
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
@@ -454,6 +454,26 @@
454
454
  @property st-global(--wds-color-yellow-400);
455
455
  @property st-global(--wds-color-yellow-500);
456
456
  @property st-global(--wds-color-yellow-600);
457
+ @property st-global(--wds-composer-sidebar-bottom-width);
458
+ @property st-global(--wds-composer-sidebar-end-max-width);
459
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-large);
460
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-medium);
461
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-small);
462
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-vertical-large);
463
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-vertical-medium);
464
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-vertical-small);
465
+ @property st-global(--wds-composer-sidebar-item-end-padding-horizontal-large);
466
+ @property st-global(--wds-composer-sidebar-item-end-padding-horizontal-medium);
467
+ @property st-global(--wds-composer-sidebar-item-end-padding-horizontal-small);
468
+ @property st-global(--wds-composer-sidebar-item-end-padding-vertical-large);
469
+ @property st-global(--wds-composer-sidebar-item-end-padding-vertical-medium);
470
+ @property st-global(--wds-composer-sidebar-item-end-padding-vertical-small);
471
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-horizontal-large);
472
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-horizontal-medium);
473
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-horizontal-small);
474
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-large);
475
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-medium);
476
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
457
477
  @property st-global(--wds-counter-badge-border-radius-medium);
458
478
  @property st-global(--wds-counter-badge-border-radius-small);
459
479
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
@@ -550,6 +570,14 @@
550
570
  @property st-global(--wds-gallery-item-padding-vertical-small);
551
571
  @property st-global(--wds-image-border-radius-default);
552
572
  @property st-global(--wds-image-border-radius-none);
573
+ @property st-global(--wds-input-area-border-radius-default-medium);
574
+ @property st-global(--wds-input-area-border-radius-default-small);
575
+ @property st-global(--wds-input-area-padding-left-medium);
576
+ @property st-global(--wds-input-area-padding-left-small);
577
+ @property st-global(--wds-input-area-padding-right-medium);
578
+ @property st-global(--wds-input-area-padding-right-small);
579
+ @property st-global(--wds-input-area-padding-vertical-medium);
580
+ @property st-global(--wds-input-area-padding-vertical-small);
553
581
  @property st-global(--wds-input-border-radius-default-large);
554
582
  @property st-global(--wds-input-border-radius-default-medium);
555
583
  @property st-global(--wds-input-border-radius-default-small);
@@ -737,6 +765,8 @@
737
765
  @property st-global(--wds-space-1600);
738
766
  @property st-global(--wds-space-1700);
739
767
  @property st-global(--wds-space-2400);
768
+ @property st-global(--wds-stepper-prefix-size-circle);
769
+ @property st-global(--wds-stepper-prefix-size-number);
740
770
  @property st-global(--wds-swatches-list-gap);
741
771
  @property st-global(--wds-swatches-list-padding-horizontal);
742
772
  @property st-global(--wds-swatches-list-padding-vertical);
@@ -747,6 +777,12 @@
747
777
  @property st-global(--wds-swatches-swatch-size-large);
748
778
  @property st-global(--wds-swatches-swatch-size-medium);
749
779
  @property st-global(--wds-swatches-swatch-size-small);
780
+ @property st-global(--wds-tabs-gap-medium);
781
+ @property st-global(--wds-tabs-gap-small);
782
+ @property st-global(--wds-tabs-padding-horizontal-medium);
783
+ @property st-global(--wds-tabs-padding-horizontal-small);
784
+ @property st-global(--wds-tabs-padding-vertical-medium);
785
+ @property st-global(--wds-tabs-padding-vertical-small);
750
786
  @property st-global(--wds-tag-border-radius-large);
751
787
  @property st-global(--wds-tag-border-radius-medium);
752
788
  @property st-global(--wds-tag-border-radius-small);
@@ -912,7 +948,7 @@
912
948
  --wds-border-width-100: 1px;
913
949
  --wds-border-width-200: 2px;
914
950
  --wds-border-width-none: 0;
915
- --wds-breadcrumbs-border: 1000px;
951
+ --wds-breadcrumbs-border-radius: 1000px;
916
952
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
917
953
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
918
954
  --wds-breadcrumbs-on-white-fill-hover: #ebf2ff;
@@ -1339,6 +1375,26 @@
1339
1375
  --wds-color-yellow-400: #fdead2;
1340
1376
  --wds-color-yellow-500: #fef3e5;
1341
1377
  --wds-color-yellow-600: #fef6ed;
1378
+ --wds-composer-sidebar-bottom-width: 88px;
1379
+ --wds-composer-sidebar-end-max-width: 240px;
1380
+ --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;
1381
+ --wds-composer-sidebar-item-bottom-padding-horizontal-medium: 4px;
1382
+ --wds-composer-sidebar-item-bottom-padding-horizontal-small: 4px;
1383
+ --wds-composer-sidebar-item-bottom-padding-vertical-large: 12px;
1384
+ --wds-composer-sidebar-item-bottom-padding-vertical-medium: 12px;
1385
+ --wds-composer-sidebar-item-bottom-padding-vertical-small: 8px;
1386
+ --wds-composer-sidebar-item-end-padding-horizontal-large: 12px;
1387
+ --wds-composer-sidebar-item-end-padding-horizontal-medium: 12px;
1388
+ --wds-composer-sidebar-item-end-padding-horizontal-small: 12px;
1389
+ --wds-composer-sidebar-item-end-padding-vertical-large: 8px;
1390
+ --wds-composer-sidebar-item-end-padding-vertical-medium: 8px;
1391
+ --wds-composer-sidebar-item-end-padding-vertical-small: 4px;
1392
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-large: 8px;
1393
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: 8px;
1394
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-small: 8px;
1395
+ --wds-composer-sidebar-item-tooltip-padding-vertical-large: 8px;
1396
+ --wds-composer-sidebar-item-tooltip-padding-vertical-medium: 8px;
1397
+ --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
1342
1398
  --wds-counter-badge-border-radius-medium: 1000px;
1343
1399
  --wds-counter-badge-border-radius-small: 1000px;
1344
1400
  --wds-counter-badge-padding-horizontal-medium: 6px;
@@ -1435,6 +1491,14 @@
1435
1491
  --wds-gallery-item-padding-vertical-small: 12px;
1436
1492
  --wds-image-border-radius-default: 4px;
1437
1493
  --wds-image-border-radius-none: 0;
1494
+ --wds-input-area-border-radius-default-medium: 4px;
1495
+ --wds-input-area-border-radius-default-small: 4px;
1496
+ --wds-input-area-padding-left-medium: 12px;
1497
+ --wds-input-area-padding-left-small: 12px;
1498
+ --wds-input-area-padding-right-medium: 10px;
1499
+ --wds-input-area-padding-right-small: 10px;
1500
+ --wds-input-area-padding-vertical-medium: 4px;
1501
+ --wds-input-area-padding-vertical-small: 4px;
1438
1502
  --wds-input-border-radius-default-large: 4px;
1439
1503
  --wds-input-border-radius-default-medium: 4px;
1440
1504
  --wds-input-border-radius-default-small: 4px;
@@ -1622,6 +1686,8 @@
1622
1686
  --wds-space-1600: 64px;
1623
1687
  --wds-space-1700: 68px;
1624
1688
  --wds-space-2400: 96px;
1689
+ --wds-stepper-prefix-size-circle: 20px;
1690
+ --wds-stepper-prefix-size-number: 16px;
1625
1691
  --wds-swatches-list-gap: 12px;
1626
1692
  --wds-swatches-list-padding-horizontal: 16px;
1627
1693
  --wds-swatches-list-padding-vertical: 12px;
@@ -1632,6 +1698,12 @@
1632
1698
  --wds-swatches-swatch-size-large: 28px;
1633
1699
  --wds-swatches-swatch-size-medium: 24px;
1634
1700
  --wds-swatches-swatch-size-small: 18px;
1701
+ --wds-tabs-gap-medium: 8px;
1702
+ --wds-tabs-gap-small: 6px;
1703
+ --wds-tabs-padding-horizontal-medium: 16px;
1704
+ --wds-tabs-padding-horizontal-small: 12px;
1705
+ --wds-tabs-padding-vertical-medium: 16px;
1706
+ --wds-tabs-padding-vertical-small: 12px;
1635
1707
  --wds-tag-border-radius-large: 4px;
1636
1708
  --wds-tag-border-radius-medium: 4px;
1637
1709
  --wds-tag-border-radius-small: 4px;
package/studio/component.st.css CHANGED
@@ -16,7 +16,7 @@
16
16
  @property st-global(--wds-badge-size-medium);
17
17
  @property st-global(--wds-badge-size-small);
18
18
  @property st-global(--wds-badge-size-tiny);
19
- @property st-global(--wds-breadcrumbs-border);
19
+ @property st-global(--wds-breadcrumbs-border-radius);
20
20
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
21
21
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
22
22
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
@@ -83,6 +83,26 @@
83
83
  @property st-global(--wds-circular-progress-bar-size-large);
84
84
  @property st-global(--wds-circular-progress-bar-size-medium);
85
85
  @property st-global(--wds-circular-progress-bar-size-small);
86
+ @property st-global(--wds-composer-sidebar-bottom-width);
87
+ @property st-global(--wds-composer-sidebar-end-max-width);
88
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-large);
89
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-medium);
90
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-small);
91
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-vertical-large);
92
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-vertical-medium);
93
+ @property st-global(--wds-composer-sidebar-item-bottom-padding-vertical-small);
94
+ @property st-global(--wds-composer-sidebar-item-end-padding-horizontal-large);
95
+ @property st-global(--wds-composer-sidebar-item-end-padding-horizontal-medium);
96
+ @property st-global(--wds-composer-sidebar-item-end-padding-horizontal-small);
97
+ @property st-global(--wds-composer-sidebar-item-end-padding-vertical-large);
98
+ @property st-global(--wds-composer-sidebar-item-end-padding-vertical-medium);
99
+ @property st-global(--wds-composer-sidebar-item-end-padding-vertical-small);
100
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-horizontal-large);
101
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-horizontal-medium);
102
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-horizontal-small);
103
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-large);
104
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-medium);
105
+ @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
86
106
  @property st-global(--wds-counter-badge-border-radius-medium);
87
107
  @property st-global(--wds-counter-badge-border-radius-small);
88
108
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
@@ -127,6 +147,14 @@
127
147
  @property st-global(--wds-gallery-item-padding-vertical-small);
128
148
  @property st-global(--wds-image-border-radius-default);
129
149
  @property st-global(--wds-image-border-radius-none);
150
+ @property st-global(--wds-input-area-border-radius-default-medium);
151
+ @property st-global(--wds-input-area-border-radius-default-small);
152
+ @property st-global(--wds-input-area-padding-left-medium);
153
+ @property st-global(--wds-input-area-padding-left-small);
154
+ @property st-global(--wds-input-area-padding-right-medium);
155
+ @property st-global(--wds-input-area-padding-right-small);
156
+ @property st-global(--wds-input-area-padding-vertical-medium);
157
+ @property st-global(--wds-input-area-padding-vertical-small);
130
158
  @property st-global(--wds-input-border-radius-default-large);
131
159
  @property st-global(--wds-input-border-radius-default-medium);
132
160
  @property st-global(--wds-input-border-radius-default-small);
@@ -286,6 +314,8 @@
286
314
  @property st-global(--wds-slider-track-border-radius);
287
315
  @property st-global(--wds-slider-track-size);
288
316
  @property st-global(--wds-slider-track-size-transparent);
317
+ @property st-global(--wds-stepper-prefix-size-circle);
318
+ @property st-global(--wds-stepper-prefix-size-number);
289
319
  @property st-global(--wds-swatches-list-gap);
290
320
  @property st-global(--wds-swatches-list-padding-horizontal);
291
321
  @property st-global(--wds-swatches-list-padding-vertical);
@@ -296,6 +326,12 @@
296
326
  @property st-global(--wds-swatches-swatch-size-large);
297
327
  @property st-global(--wds-swatches-swatch-size-medium);
298
328
  @property st-global(--wds-swatches-swatch-size-small);
329
+ @property st-global(--wds-tabs-gap-medium);
330
+ @property st-global(--wds-tabs-gap-small);
331
+ @property st-global(--wds-tabs-padding-horizontal-medium);
332
+ @property st-global(--wds-tabs-padding-horizontal-small);
333
+ @property st-global(--wds-tabs-padding-vertical-medium);
334
+ @property st-global(--wds-tabs-padding-vertical-small);
299
335
  @property st-global(--wds-tag-border-radius-large);
300
336
  @property st-global(--wds-tag-border-radius-medium);
301
337
  @property st-global(--wds-tag-border-radius-small);
@@ -450,7 +486,7 @@
450
486
  --wds-badge-size-medium: 24px;
451
487
  --wds-badge-size-small: 20px;
452
488
  --wds-badge-size-tiny: 16px;
453
- --wds-breadcrumbs-border: 1000px;
489
+ --wds-breadcrumbs-border-radius: 1000px;
454
490
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
455
491
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
456
492
  --wds-breadcrumbs-on-white-fill-hover: #ebf2ff;
@@ -517,6 +553,26 @@
517
553
  --wds-circular-progress-bar-size-large: 96px;
518
554
  --wds-circular-progress-bar-size-medium: 52px;
519
555
  --wds-circular-progress-bar-size-small: 24px;
556
+ --wds-composer-sidebar-bottom-width: 88px;
557
+ --wds-composer-sidebar-end-max-width: 240px;
558
+ --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;
559
+ --wds-composer-sidebar-item-bottom-padding-horizontal-medium: 4px;
560
+ --wds-composer-sidebar-item-bottom-padding-horizontal-small: 4px;
561
+ --wds-composer-sidebar-item-bottom-padding-vertical-large: 12px;
562
+ --wds-composer-sidebar-item-bottom-padding-vertical-medium: 12px;
563
+ --wds-composer-sidebar-item-bottom-padding-vertical-small: 8px;
564
+ --wds-composer-sidebar-item-end-padding-horizontal-large: 12px;
565
+ --wds-composer-sidebar-item-end-padding-horizontal-medium: 12px;
566
+ --wds-composer-sidebar-item-end-padding-horizontal-small: 12px;
567
+ --wds-composer-sidebar-item-end-padding-vertical-large: 8px;
568
+ --wds-composer-sidebar-item-end-padding-vertical-medium: 8px;
569
+ --wds-composer-sidebar-item-end-padding-vertical-small: 4px;
570
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-large: 8px;
571
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: 8px;
572
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-small: 8px;
573
+ --wds-composer-sidebar-item-tooltip-padding-vertical-large: 8px;
574
+ --wds-composer-sidebar-item-tooltip-padding-vertical-medium: 8px;
575
+ --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
520
576
  --wds-counter-badge-border-radius-medium: 1000px;
521
577
  --wds-counter-badge-border-radius-small: 1000px;
522
578
  --wds-counter-badge-padding-horizontal-medium: 6px;
@@ -561,6 +617,14 @@
561
617
  --wds-gallery-item-padding-vertical-small: 12px;
562
618
  --wds-image-border-radius-default: 4px;
563
619
  --wds-image-border-radius-none: 0;
620
+ --wds-input-area-border-radius-default-medium: 4px;
621
+ --wds-input-area-border-radius-default-small: 4px;
622
+ --wds-input-area-padding-left-medium: 12px;
623
+ --wds-input-area-padding-left-small: 12px;
624
+ --wds-input-area-padding-right-medium: 10px;
625
+ --wds-input-area-padding-right-small: 10px;
626
+ --wds-input-area-padding-vertical-medium: 4px;
627
+ --wds-input-area-padding-vertical-small: 4px;
564
628
  --wds-input-border-radius-default-large: 4px;
565
629
  --wds-input-border-radius-default-medium: 4px;
566
630
  --wds-input-border-radius-default-small: 4px;
@@ -720,6 +784,8 @@
720
784
  --wds-slider-track-border-radius: 1000px;
721
785
  --wds-slider-track-size: 2px;
722
786
  --wds-slider-track-size-transparent: 2px;
787
+ --wds-stepper-prefix-size-circle: 20px;
788
+ --wds-stepper-prefix-size-number: 16px;
723
789
  --wds-swatches-list-gap: 12px;
724
790
  --wds-swatches-list-padding-horizontal: 16px;
725
791
  --wds-swatches-list-padding-vertical: 12px;
@@ -730,6 +796,12 @@
730
796
  --wds-swatches-swatch-size-large: 28px;
731
797
  --wds-swatches-swatch-size-medium: 24px;
732
798
  --wds-swatches-swatch-size-small: 18px;
799
+ --wds-tabs-gap-medium: 8px;
800
+ --wds-tabs-gap-small: 6px;
801
+ --wds-tabs-padding-horizontal-medium: 16px;
802
+ --wds-tabs-padding-horizontal-small: 12px;
803
+ --wds-tabs-padding-vertical-medium: 16px;
804
+ --wds-tabs-padding-vertical-small: 12px;
733
805
  --wds-tag-border-radius-large: 4px;
734
806
  --wds-tag-border-radius-medium: 4px;
735
807
  --wds-tag-border-radius-small: 4px;