@wix/design-system-tokens 1.20.0 → 1.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/all.css +21 -8
  2. package/all.st.css +42 -16
  3. package/component.st.css +26 -0
  4. package/package.json +2 -2
  5. package/semantic.st.css +16 -16
  6. package/studio/all.css +21 -8
  7. package/studio/all.st.css +42 -16
  8. package/studio/component.st.css +26 -0
  9. package/studio/semantic.st.css +16 -16
package/all.css CHANGED
@@ -193,6 +193,7 @@
193
193
  --wds-input-border-radius-round-medium: 1000px;
194
194
  --wds-input-border-radius-round-small: 1000px;
195
195
  --wds-input-border-radius-round-tiny: 1000px;
196
+ --wds-input-icon-affix-fill: #116dff;
196
197
  --wds-input-padding-horizontal-large: 9px;
197
198
  --wds-input-padding-horizontal-medium: 6px;
198
199
  --wds-input-padding-horizontal-small: 6px;
@@ -385,6 +386,18 @@
385
386
  --wds-select-area-fill-hover: #e7f0ff;
386
387
  --wds-select-area-padding-horizontal: 18px;
387
388
  --wds-select-area-padding-vertical: 12px;
389
+ --wds-selector-button-padding-horizontal-left-large: 12px;
390
+ --wds-selector-button-padding-horizontal-left-medium: 12px;
391
+ --wds-selector-button-padding-horizontal-left-small: 12px;
392
+ --wds-selector-button-padding-horizontal-right-large: 6px;
393
+ --wds-selector-button-padding-horizontal-right-medium: 6px;
394
+ --wds-selector-button-padding-horizontal-right-small: 6px;
395
+ --wds-selector-button-padding-vertical-large: 6px;
396
+ --wds-selector-button-padding-vertical-medium: 6px;
397
+ --wds-selector-button-padding-vertical-small: 6px;
398
+ --wds-selector-button-size-large: 42px;
399
+ --wds-selector-button-size-medium: 36px;
400
+ --wds-selector-button-size-small: 30px;
388
401
  --wds-side-panel-content-padding-horizontal: 24px;
389
402
  --wds-side-panel-content-padding-vertical: 24px;
390
403
  --wds-side-panel-control-layout-divider-border-width: 1px;
@@ -871,6 +884,14 @@
871
884
  --wds-color-fill-destructive-tertiary-active: #fbd0cd;
872
885
  --wds-color-fill-destructive-tertiary-disabled: #ffffff;
873
886
  --wds-color-fill-destructive-tertiary-hover: #fde3e1;
887
+ --wds-color-fill-light-primary: #ffffff;
888
+ --wds-color-fill-light-primary-active: #d6e6fe;
889
+ --wds-color-fill-light-primary-disabled: rgba(255, 255, 255, .3);
890
+ --wds-color-fill-light-primary-hover: #e7f0ff;
891
+ --wds-color-fill-light-secondary: rgba(255, 255, 255, 0);
892
+ --wds-color-fill-light-secondary-active: #d6e6fe;
893
+ --wds-color-fill-light-secondary-disabled: rgba(255, 255, 255, 0);
894
+ --wds-color-fill-light-secondary-hover: #e7f0ff;
874
895
  --wds-color-fill-premium-primary: #9a27d5;
875
896
  --wds-color-fill-premium-primary-active: #7416a5;
876
897
  --wds-color-fill-premium-primary-disabled: rgba(0, 6, 36, .3);
@@ -932,14 +953,6 @@
932
953
  --wds-color-fill-standard-tertiary-disabled: #ffffff;
933
954
  --wds-color-fill-standard-tertiary-hover: #e7f0ff;
934
955
  --wds-color-fill-standard-tertiary-readonly: #eceff3;
935
- --wds-color-fill-standard-light-primary: #ffffff;
936
- --wds-color-fill-standard-light-primary-active: #d6e6fe;
937
- --wds-color-fill-standard-light-primary-disabled: rgba(255, 255, 255, .3);
938
- --wds-color-fill-standard-light-primary-hover: #e7f0ff;
939
- --wds-color-fill-standard-light-secondary: rgba(255, 255, 255, 0);
940
- --wds-color-fill-standard-light-secondary-active: #d6e6fe;
941
- --wds-color-fill-standard-light-secondary-disabled: rgba(255, 255, 255, 0);
942
- --wds-color-fill-standard-light-secondary-hover: #e7f0ff;
943
956
  --wds-color-fill-success-primary: #25a55a;
944
957
  --wds-color-fill-success-primary-active: #1d8649;
945
958
  --wds-color-fill-success-primary-disabled: rgba(0, 6, 36, .3);
package/all.st.css CHANGED
@@ -292,6 +292,14 @@
292
292
  @property st-global(--wds-color-fill-destructive-tertiary-active);
293
293
  @property st-global(--wds-color-fill-destructive-tertiary-disabled);
294
294
  @property st-global(--wds-color-fill-destructive-tertiary-hover);
295
+ @property st-global(--wds-color-fill-light-primary);
296
+ @property st-global(--wds-color-fill-light-primary-active);
297
+ @property st-global(--wds-color-fill-light-primary-disabled);
298
+ @property st-global(--wds-color-fill-light-primary-hover);
299
+ @property st-global(--wds-color-fill-light-secondary);
300
+ @property st-global(--wds-color-fill-light-secondary-active);
301
+ @property st-global(--wds-color-fill-light-secondary-disabled);
302
+ @property st-global(--wds-color-fill-light-secondary-hover);
295
303
  @property st-global(--wds-color-fill-premium-light-primary);
296
304
  @property st-global(--wds-color-fill-premium-light-primary-active);
297
305
  @property st-global(--wds-color-fill-premium-light-primary-disabled);
@@ -340,14 +348,6 @@
340
348
  @property st-global(--wds-color-fill-social-youtube-active);
341
349
  @property st-global(--wds-color-fill-social-youtube-disabled);
342
350
  @property st-global(--wds-color-fill-social-youtube-hover);
343
- @property st-global(--wds-color-fill-standard-light-primary);
344
- @property st-global(--wds-color-fill-standard-light-primary-active);
345
- @property st-global(--wds-color-fill-standard-light-primary-disabled);
346
- @property st-global(--wds-color-fill-standard-light-primary-hover);
347
- @property st-global(--wds-color-fill-standard-light-secondary);
348
- @property st-global(--wds-color-fill-standard-light-secondary-active);
349
- @property st-global(--wds-color-fill-standard-light-secondary-disabled);
350
- @property st-global(--wds-color-fill-standard-light-secondary-hover);
351
351
  @property st-global(--wds-color-fill-standard-primary);
352
352
  @property st-global(--wds-color-fill-standard-primary-active);
353
353
  @property st-global(--wds-color-fill-standard-primary-disabled);
@@ -638,6 +638,7 @@
638
638
  @property st-global(--wds-input-border-radius-round-medium);
639
639
  @property st-global(--wds-input-border-radius-round-small);
640
640
  @property st-global(--wds-input-border-radius-round-tiny);
641
+ @property st-global(--wds-input-icon-affix-fill);
641
642
  @property st-global(--wds-input-padding-horizontal-large);
642
643
  @property st-global(--wds-input-padding-horizontal-medium);
643
644
  @property st-global(--wds-input-padding-horizontal-small);
@@ -822,6 +823,18 @@
822
823
  @property st-global(--wds-select-area-fill-hover);
823
824
  @property st-global(--wds-select-area-padding-horizontal);
824
825
  @property st-global(--wds-select-area-padding-vertical);
826
+ @property st-global(--wds-selector-button-padding-horizontal-left-large);
827
+ @property st-global(--wds-selector-button-padding-horizontal-left-medium);
828
+ @property st-global(--wds-selector-button-padding-horizontal-left-small);
829
+ @property st-global(--wds-selector-button-padding-horizontal-right-large);
830
+ @property st-global(--wds-selector-button-padding-horizontal-right-medium);
831
+ @property st-global(--wds-selector-button-padding-horizontal-right-small);
832
+ @property st-global(--wds-selector-button-padding-vertical-large);
833
+ @property st-global(--wds-selector-button-padding-vertical-medium);
834
+ @property st-global(--wds-selector-button-padding-vertical-small);
835
+ @property st-global(--wds-selector-button-size-large);
836
+ @property st-global(--wds-selector-button-size-medium);
837
+ @property st-global(--wds-selector-button-size-small);
825
838
  @property st-global(--wds-shadow-100);
826
839
  @property st-global(--wds-shadow-200);
827
840
  @property st-global(--wds-shadow-300);
@@ -1427,6 +1440,14 @@
1427
1440
  --wds-color-fill-destructive-tertiary-active: #fbd0cd;
1428
1441
  --wds-color-fill-destructive-tertiary-disabled: #ffffff;
1429
1442
  --wds-color-fill-destructive-tertiary-hover: #fde3e1;
1443
+ --wds-color-fill-light-primary: #ffffff;
1444
+ --wds-color-fill-light-primary-active: #d6e6fe;
1445
+ --wds-color-fill-light-primary-disabled: rgba(255, 255, 255, .3);
1446
+ --wds-color-fill-light-primary-hover: #e7f0ff;
1447
+ --wds-color-fill-light-secondary: rgba(255, 255, 255, 0);
1448
+ --wds-color-fill-light-secondary-active: #d6e6fe;
1449
+ --wds-color-fill-light-secondary-disabled: rgba(255, 255, 255, 0);
1450
+ --wds-color-fill-light-secondary-hover: #e7f0ff;
1430
1451
  --wds-color-fill-premium-light-primary: #ffffff;
1431
1452
  --wds-color-fill-premium-light-primary-active: #e3c3f4;
1432
1453
  --wds-color-fill-premium-light-primary-disabled: rgba(255, 255, 255, .3);
@@ -1475,14 +1496,6 @@
1475
1496
  --wds-color-fill-social-youtube-active: #ff0000;
1476
1497
  --wds-color-fill-social-youtube-disabled: rgba(0, 6, 36, .3);
1477
1498
  --wds-color-fill-social-youtube-hover: rgba(255, 0, 0, .8);
1478
- --wds-color-fill-standard-light-primary: #ffffff;
1479
- --wds-color-fill-standard-light-primary-active: #d6e6fe;
1480
- --wds-color-fill-standard-light-primary-disabled: rgba(255, 255, 255, .3);
1481
- --wds-color-fill-standard-light-primary-hover: #e7f0ff;
1482
- --wds-color-fill-standard-light-secondary: rgba(255, 255, 255, 0);
1483
- --wds-color-fill-standard-light-secondary-active: #d6e6fe;
1484
- --wds-color-fill-standard-light-secondary-disabled: rgba(255, 255, 255, 0);
1485
- --wds-color-fill-standard-light-secondary-hover: #e7f0ff;
1486
1499
  --wds-color-fill-standard-primary: #116dff;
1487
1500
  --wds-color-fill-standard-primary-active: #084ebd;
1488
1501
  --wds-color-fill-standard-primary-disabled: rgba(0, 6, 36, .3);
@@ -1773,6 +1786,7 @@
1773
1786
  --wds-input-border-radius-round-medium: 1000px;
1774
1787
  --wds-input-border-radius-round-small: 1000px;
1775
1788
  --wds-input-border-radius-round-tiny: 1000px;
1789
+ --wds-input-icon-affix-fill: #116dff;
1776
1790
  --wds-input-padding-horizontal-large: 9px;
1777
1791
  --wds-input-padding-horizontal-medium: 6px;
1778
1792
  --wds-input-padding-horizontal-small: 6px;
@@ -1957,6 +1971,18 @@
1957
1971
  --wds-select-area-fill-hover: #e7f0ff;
1958
1972
  --wds-select-area-padding-horizontal: 18px;
1959
1973
  --wds-select-area-padding-vertical: 12px;
1974
+ --wds-selector-button-padding-horizontal-left-large: 12px;
1975
+ --wds-selector-button-padding-horizontal-left-medium: 12px;
1976
+ --wds-selector-button-padding-horizontal-left-small: 12px;
1977
+ --wds-selector-button-padding-horizontal-right-large: 6px;
1978
+ --wds-selector-button-padding-horizontal-right-medium: 6px;
1979
+ --wds-selector-button-padding-horizontal-right-small: 6px;
1980
+ --wds-selector-button-padding-vertical-large: 6px;
1981
+ --wds-selector-button-padding-vertical-medium: 6px;
1982
+ --wds-selector-button-padding-vertical-small: 6px;
1983
+ --wds-selector-button-size-large: 42px;
1984
+ --wds-selector-button-size-medium: 36px;
1985
+ --wds-selector-button-size-small: 30px;
1960
1986
  --wds-shadow-100: 0 0 3px rgba(0, 6, 36, .1), 0 2px 1px rgba(0, 6, 36, .5);
1961
1987
  --wds-shadow-200: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
1962
1988
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
package/component.st.css CHANGED
@@ -200,6 +200,7 @@
200
200
  @property st-global(--wds-input-border-radius-round-medium);
201
201
  @property st-global(--wds-input-border-radius-round-small);
202
202
  @property st-global(--wds-input-border-radius-round-tiny);
203
+ @property st-global(--wds-input-icon-affix-fill);
203
204
  @property st-global(--wds-input-padding-horizontal-large);
204
205
  @property st-global(--wds-input-padding-horizontal-medium);
205
206
  @property st-global(--wds-input-padding-horizontal-small);
@@ -384,6 +385,18 @@
384
385
  @property st-global(--wds-select-area-fill-hover);
385
386
  @property st-global(--wds-select-area-padding-horizontal);
386
387
  @property st-global(--wds-select-area-padding-vertical);
388
+ @property st-global(--wds-selector-button-padding-horizontal-left-large);
389
+ @property st-global(--wds-selector-button-padding-horizontal-left-medium);
390
+ @property st-global(--wds-selector-button-padding-horizontal-left-small);
391
+ @property st-global(--wds-selector-button-padding-horizontal-right-large);
392
+ @property st-global(--wds-selector-button-padding-horizontal-right-medium);
393
+ @property st-global(--wds-selector-button-padding-horizontal-right-small);
394
+ @property st-global(--wds-selector-button-padding-vertical-large);
395
+ @property st-global(--wds-selector-button-padding-vertical-medium);
396
+ @property st-global(--wds-selector-button-padding-vertical-small);
397
+ @property st-global(--wds-selector-button-size-large);
398
+ @property st-global(--wds-selector-button-size-medium);
399
+ @property st-global(--wds-selector-button-size-small);
387
400
  @property st-global(--wds-side-panel-content-padding-horizontal);
388
401
  @property st-global(--wds-side-panel-content-padding-vertical);
389
402
  @property st-global(--wds-side-panel-control-layout-divider-border-width);
@@ -831,6 +844,7 @@
831
844
  --wds-input-border-radius-round-medium: 1000px;
832
845
  --wds-input-border-radius-round-small: 1000px;
833
846
  --wds-input-border-radius-round-tiny: 1000px;
847
+ --wds-input-icon-affix-fill: #116dff;
834
848
  --wds-input-padding-horizontal-large: 9px;
835
849
  --wds-input-padding-horizontal-medium: 6px;
836
850
  --wds-input-padding-horizontal-small: 6px;
@@ -1015,6 +1029,18 @@
1015
1029
  --wds-select-area-fill-hover: #e7f0ff;
1016
1030
  --wds-select-area-padding-horizontal: 18px;
1017
1031
  --wds-select-area-padding-vertical: 12px;
1032
+ --wds-selector-button-padding-horizontal-left-large: 12px;
1033
+ --wds-selector-button-padding-horizontal-left-medium: 12px;
1034
+ --wds-selector-button-padding-horizontal-left-small: 12px;
1035
+ --wds-selector-button-padding-horizontal-right-large: 6px;
1036
+ --wds-selector-button-padding-horizontal-right-medium: 6px;
1037
+ --wds-selector-button-padding-horizontal-right-small: 6px;
1038
+ --wds-selector-button-padding-vertical-large: 6px;
1039
+ --wds-selector-button-padding-vertical-medium: 6px;
1040
+ --wds-selector-button-padding-vertical-small: 6px;
1041
+ --wds-selector-button-size-large: 42px;
1042
+ --wds-selector-button-size-medium: 36px;
1043
+ --wds-selector-button-size-small: 30px;
1018
1044
  --wds-side-panel-content-padding-horizontal: 24px;
1019
1045
  --wds-side-panel-content-padding-vertical: 24px;
1020
1046
  --wds-side-panel-control-layout-divider-border-width: 1px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.20.0",
3
+ "version": "1.22.0",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "52801dc7bfbb27523ce83566ca9cdb1c6dff078631fc1d24cfc0f7cb"
36
+ "falconPackageHash": "5eb62015dd6599b096604be0ad60e54d0d43b01ad1628af16b68cf28"
37
37
  }
package/semantic.st.css CHANGED
@@ -136,6 +136,14 @@
136
136
  @property st-global(--wds-color-fill-destructive-tertiary-active);
137
137
  @property st-global(--wds-color-fill-destructive-tertiary-disabled);
138
138
  @property st-global(--wds-color-fill-destructive-tertiary-hover);
139
+ @property st-global(--wds-color-fill-light-primary);
140
+ @property st-global(--wds-color-fill-light-primary-active);
141
+ @property st-global(--wds-color-fill-light-primary-disabled);
142
+ @property st-global(--wds-color-fill-light-primary-hover);
143
+ @property st-global(--wds-color-fill-light-secondary);
144
+ @property st-global(--wds-color-fill-light-secondary-active);
145
+ @property st-global(--wds-color-fill-light-secondary-disabled);
146
+ @property st-global(--wds-color-fill-light-secondary-hover);
139
147
  @property st-global(--wds-color-fill-premium-light-primary);
140
148
  @property st-global(--wds-color-fill-premium-light-primary-active);
141
149
  @property st-global(--wds-color-fill-premium-light-primary-disabled);
@@ -184,14 +192,6 @@
184
192
  @property st-global(--wds-color-fill-social-youtube-active);
185
193
  @property st-global(--wds-color-fill-social-youtube-disabled);
186
194
  @property st-global(--wds-color-fill-social-youtube-hover);
187
- @property st-global(--wds-color-fill-standard-light-primary);
188
- @property st-global(--wds-color-fill-standard-light-primary-active);
189
- @property st-global(--wds-color-fill-standard-light-primary-disabled);
190
- @property st-global(--wds-color-fill-standard-light-primary-hover);
191
- @property st-global(--wds-color-fill-standard-light-secondary);
192
- @property st-global(--wds-color-fill-standard-light-secondary-active);
193
- @property st-global(--wds-color-fill-standard-light-secondary-disabled);
194
- @property st-global(--wds-color-fill-standard-light-secondary-hover);
195
195
  @property st-global(--wds-color-fill-standard-primary);
196
196
  @property st-global(--wds-color-fill-standard-primary-active);
197
197
  @property st-global(--wds-color-fill-standard-primary-disabled);
@@ -471,6 +471,14 @@
471
471
  --wds-color-fill-destructive-tertiary-active: #fbd0cd;
472
472
  --wds-color-fill-destructive-tertiary-disabled: #ffffff;
473
473
  --wds-color-fill-destructive-tertiary-hover: #fde3e1;
474
+ --wds-color-fill-light-primary: #ffffff;
475
+ --wds-color-fill-light-primary-active: #d6e6fe;
476
+ --wds-color-fill-light-primary-disabled: rgba(255, 255, 255, .3);
477
+ --wds-color-fill-light-primary-hover: #e7f0ff;
478
+ --wds-color-fill-light-secondary: rgba(255, 255, 255, 0);
479
+ --wds-color-fill-light-secondary-active: #d6e6fe;
480
+ --wds-color-fill-light-secondary-disabled: rgba(255, 255, 255, 0);
481
+ --wds-color-fill-light-secondary-hover: #e7f0ff;
474
482
  --wds-color-fill-premium-light-primary: #ffffff;
475
483
  --wds-color-fill-premium-light-primary-active: #e3c3f4;
476
484
  --wds-color-fill-premium-light-primary-disabled: rgba(255, 255, 255, .3);
@@ -519,14 +527,6 @@
519
527
  --wds-color-fill-social-youtube-active: #ff0000;
520
528
  --wds-color-fill-social-youtube-disabled: rgba(0, 6, 36, .3);
521
529
  --wds-color-fill-social-youtube-hover: rgba(255, 0, 0, .8);
522
- --wds-color-fill-standard-light-primary: #ffffff;
523
- --wds-color-fill-standard-light-primary-active: #d6e6fe;
524
- --wds-color-fill-standard-light-primary-disabled: rgba(255, 255, 255, .3);
525
- --wds-color-fill-standard-light-primary-hover: #e7f0ff;
526
- --wds-color-fill-standard-light-secondary: rgba(255, 255, 255, 0);
527
- --wds-color-fill-standard-light-secondary-active: #d6e6fe;
528
- --wds-color-fill-standard-light-secondary-disabled: rgba(255, 255, 255, 0);
529
- --wds-color-fill-standard-light-secondary-hover: #e7f0ff;
530
530
  --wds-color-fill-standard-primary: #116dff;
531
531
  --wds-color-fill-standard-primary-active: #084ebd;
532
532
  --wds-color-fill-standard-primary-disabled: rgba(0, 6, 36, .3);
package/studio/all.css CHANGED
@@ -193,6 +193,7 @@
193
193
  --wds-input-border-radius-round-medium: 1000px;
194
194
  --wds-input-border-radius-round-small: 1000px;
195
195
  --wds-input-border-radius-round-tiny: 1000px;
196
+ --wds-input-icon-affix-fill: #131720;
196
197
  --wds-input-padding-horizontal-large: 8px;
197
198
  --wds-input-padding-horizontal-medium: 8px;
198
199
  --wds-input-padding-horizontal-small: 4px;
@@ -385,6 +386,18 @@
385
386
  --wds-select-area-fill-hover: #edeef2;
386
387
  --wds-select-area-padding-horizontal: 16px;
387
388
  --wds-select-area-padding-vertical: 12px;
389
+ --wds-selector-button-padding-horizontal-left-large: 12px;
390
+ --wds-selector-button-padding-horizontal-left-medium: 12px;
391
+ --wds-selector-button-padding-horizontal-left-small: 12px;
392
+ --wds-selector-button-padding-horizontal-right-large: 6px;
393
+ --wds-selector-button-padding-horizontal-right-medium: 6px;
394
+ --wds-selector-button-padding-horizontal-right-small: 6px;
395
+ --wds-selector-button-padding-vertical-large: 6px;
396
+ --wds-selector-button-padding-vertical-medium: 6px;
397
+ --wds-selector-button-padding-vertical-small: 6px;
398
+ --wds-selector-button-size-large: 36px;
399
+ --wds-selector-button-size-medium: 32px;
400
+ --wds-selector-button-size-small: 28px;
388
401
  --wds-side-panel-content-padding-horizontal: 24px;
389
402
  --wds-side-panel-content-padding-vertical: 24px;
390
403
  --wds-side-panel-control-layout-divider-border-width: 0;
@@ -870,6 +883,14 @@
870
883
  --wds-color-fill-destructive-tertiary-active: #fbd0cd;
871
884
  --wds-color-fill-destructive-tertiary-disabled: #ffffff;
872
885
  --wds-color-fill-destructive-tertiary-hover: #f7f8f8;
886
+ --wds-color-fill-light-primary: #ffffff;
887
+ --wds-color-fill-light-primary-active: #dce9ff;
888
+ --wds-color-fill-light-primary-disabled: rgba(255, 255, 255, .3);
889
+ --wds-color-fill-light-primary-hover: #ebf2ff;
890
+ --wds-color-fill-light-secondary: rgba(255, 255, 255, 0);
891
+ --wds-color-fill-light-secondary-active: #dce9ff;
892
+ --wds-color-fill-light-secondary-disabled: rgba(255, 255, 255, 0);
893
+ --wds-color-fill-light-secondary-hover: #ebf2ff;
873
894
  --wds-color-fill-premium-primary: #9a27d5;
874
895
  --wds-color-fill-premium-primary-active: #9a27d5;
875
896
  --wds-color-fill-premium-primary-disabled: #bebebe;
@@ -931,14 +952,6 @@
931
952
  --wds-color-fill-standard-tertiary-disabled: #ffffff;
932
953
  --wds-color-fill-standard-tertiary-hover: #f7f8f8;
933
954
  --wds-color-fill-standard-tertiary-readonly: #edeef2;
934
- --wds-color-fill-standard-light-primary: #ffffff;
935
- --wds-color-fill-standard-light-primary-active: #dce9ff;
936
- --wds-color-fill-standard-light-primary-disabled: rgba(255, 255, 255, .3);
937
- --wds-color-fill-standard-light-primary-hover: #ebf2ff;
938
- --wds-color-fill-standard-light-secondary: rgba(255, 255, 255, 0);
939
- --wds-color-fill-standard-light-secondary-active: #dce9ff;
940
- --wds-color-fill-standard-light-secondary-disabled: rgba(255, 255, 255, 0);
941
- --wds-color-fill-standard-light-secondary-hover: #ebf2ff;
942
955
  --wds-color-fill-success-primary: #25a55a;
943
956
  --wds-color-fill-success-primary-active: #25a55a;
944
957
  --wds-color-fill-success-primary-disabled: #bebebe;
package/studio/all.st.css CHANGED
@@ -292,6 +292,14 @@
292
292
  @property st-global(--wds-color-fill-destructive-tertiary-active);
293
293
  @property st-global(--wds-color-fill-destructive-tertiary-disabled);
294
294
  @property st-global(--wds-color-fill-destructive-tertiary-hover);
295
+ @property st-global(--wds-color-fill-light-primary);
296
+ @property st-global(--wds-color-fill-light-primary-active);
297
+ @property st-global(--wds-color-fill-light-primary-disabled);
298
+ @property st-global(--wds-color-fill-light-primary-hover);
299
+ @property st-global(--wds-color-fill-light-secondary);
300
+ @property st-global(--wds-color-fill-light-secondary-active);
301
+ @property st-global(--wds-color-fill-light-secondary-disabled);
302
+ @property st-global(--wds-color-fill-light-secondary-hover);
295
303
  @property st-global(--wds-color-fill-premium-light-primary);
296
304
  @property st-global(--wds-color-fill-premium-light-primary-active);
297
305
  @property st-global(--wds-color-fill-premium-light-primary-disabled);
@@ -340,14 +348,6 @@
340
348
  @property st-global(--wds-color-fill-social-youtube-active);
341
349
  @property st-global(--wds-color-fill-social-youtube-disabled);
342
350
  @property st-global(--wds-color-fill-social-youtube-hover);
343
- @property st-global(--wds-color-fill-standard-light-primary);
344
- @property st-global(--wds-color-fill-standard-light-primary-active);
345
- @property st-global(--wds-color-fill-standard-light-primary-disabled);
346
- @property st-global(--wds-color-fill-standard-light-primary-hover);
347
- @property st-global(--wds-color-fill-standard-light-secondary);
348
- @property st-global(--wds-color-fill-standard-light-secondary-active);
349
- @property st-global(--wds-color-fill-standard-light-secondary-disabled);
350
- @property st-global(--wds-color-fill-standard-light-secondary-hover);
351
351
  @property st-global(--wds-color-fill-standard-primary);
352
352
  @property st-global(--wds-color-fill-standard-primary-active);
353
353
  @property st-global(--wds-color-fill-standard-primary-disabled);
@@ -634,6 +634,7 @@
634
634
  @property st-global(--wds-input-border-radius-round-medium);
635
635
  @property st-global(--wds-input-border-radius-round-small);
636
636
  @property st-global(--wds-input-border-radius-round-tiny);
637
+ @property st-global(--wds-input-icon-affix-fill);
637
638
  @property st-global(--wds-input-padding-horizontal-large);
638
639
  @property st-global(--wds-input-padding-horizontal-medium);
639
640
  @property st-global(--wds-input-padding-horizontal-small);
@@ -818,6 +819,18 @@
818
819
  @property st-global(--wds-select-area-fill-hover);
819
820
  @property st-global(--wds-select-area-padding-horizontal);
820
821
  @property st-global(--wds-select-area-padding-vertical);
822
+ @property st-global(--wds-selector-button-padding-horizontal-left-large);
823
+ @property st-global(--wds-selector-button-padding-horizontal-left-medium);
824
+ @property st-global(--wds-selector-button-padding-horizontal-left-small);
825
+ @property st-global(--wds-selector-button-padding-horizontal-right-large);
826
+ @property st-global(--wds-selector-button-padding-horizontal-right-medium);
827
+ @property st-global(--wds-selector-button-padding-horizontal-right-small);
828
+ @property st-global(--wds-selector-button-padding-vertical-large);
829
+ @property st-global(--wds-selector-button-padding-vertical-medium);
830
+ @property st-global(--wds-selector-button-padding-vertical-small);
831
+ @property st-global(--wds-selector-button-size-large);
832
+ @property st-global(--wds-selector-button-size-medium);
833
+ @property st-global(--wds-selector-button-size-small);
821
834
  @property st-global(--wds-shadow-100);
822
835
  @property st-global(--wds-shadow-200);
823
836
  @property st-global(--wds-shadow-300);
@@ -1422,6 +1435,14 @@
1422
1435
  --wds-color-fill-destructive-tertiary-active: #fbd0cd;
1423
1436
  --wds-color-fill-destructive-tertiary-disabled: #ffffff;
1424
1437
  --wds-color-fill-destructive-tertiary-hover: #f7f8f8;
1438
+ --wds-color-fill-light-primary: #ffffff;
1439
+ --wds-color-fill-light-primary-active: #dce9ff;
1440
+ --wds-color-fill-light-primary-disabled: rgba(255, 255, 255, .3);
1441
+ --wds-color-fill-light-primary-hover: #ebf2ff;
1442
+ --wds-color-fill-light-secondary: rgba(255, 255, 255, 0);
1443
+ --wds-color-fill-light-secondary-active: #dce9ff;
1444
+ --wds-color-fill-light-secondary-disabled: rgba(255, 255, 255, 0);
1445
+ --wds-color-fill-light-secondary-hover: #ebf2ff;
1425
1446
  --wds-color-fill-premium-light-primary: #ffffff;
1426
1447
  --wds-color-fill-premium-light-primary-active: #e3c3f4;
1427
1448
  --wds-color-fill-premium-light-primary-disabled: rgba(255, 255, 255, .3);
@@ -1470,14 +1491,6 @@
1470
1491
  --wds-color-fill-social-youtube-active: #ff0000;
1471
1492
  --wds-color-fill-social-youtube-disabled: #bebebe;
1472
1493
  --wds-color-fill-social-youtube-hover: rgba(255, 0, 0, .8);
1473
- --wds-color-fill-standard-light-primary: #ffffff;
1474
- --wds-color-fill-standard-light-primary-active: #dce9ff;
1475
- --wds-color-fill-standard-light-primary-disabled: rgba(255, 255, 255, .3);
1476
- --wds-color-fill-standard-light-primary-hover: #ebf2ff;
1477
- --wds-color-fill-standard-light-secondary: rgba(255, 255, 255, 0);
1478
- --wds-color-fill-standard-light-secondary-active: #dce9ff;
1479
- --wds-color-fill-standard-light-secondary-disabled: rgba(255, 255, 255, 0);
1480
- --wds-color-fill-standard-light-secondary-hover: #ebf2ff;
1481
1494
  --wds-color-fill-standard-primary: #116dff;
1482
1495
  --wds-color-fill-standard-primary-active: #116dff;
1483
1496
  --wds-color-fill-standard-primary-disabled: #bebebe;
@@ -1764,6 +1777,7 @@
1764
1777
  --wds-input-border-radius-round-medium: 1000px;
1765
1778
  --wds-input-border-radius-round-small: 1000px;
1766
1779
  --wds-input-border-radius-round-tiny: 1000px;
1780
+ --wds-input-icon-affix-fill: #131720;
1767
1781
  --wds-input-padding-horizontal-large: 8px;
1768
1782
  --wds-input-padding-horizontal-medium: 8px;
1769
1783
  --wds-input-padding-horizontal-small: 4px;
@@ -1948,6 +1962,18 @@
1948
1962
  --wds-select-area-fill-hover: #edeef2;
1949
1963
  --wds-select-area-padding-horizontal: 16px;
1950
1964
  --wds-select-area-padding-vertical: 12px;
1965
+ --wds-selector-button-padding-horizontal-left-large: 12px;
1966
+ --wds-selector-button-padding-horizontal-left-medium: 12px;
1967
+ --wds-selector-button-padding-horizontal-left-small: 12px;
1968
+ --wds-selector-button-padding-horizontal-right-large: 6px;
1969
+ --wds-selector-button-padding-horizontal-right-medium: 6px;
1970
+ --wds-selector-button-padding-horizontal-right-small: 6px;
1971
+ --wds-selector-button-padding-vertical-large: 6px;
1972
+ --wds-selector-button-padding-vertical-medium: 6px;
1973
+ --wds-selector-button-padding-vertical-small: 6px;
1974
+ --wds-selector-button-size-large: 36px;
1975
+ --wds-selector-button-size-medium: 32px;
1976
+ --wds-selector-button-size-small: 28px;
1951
1977
  --wds-shadow-100: 0 2px 7px rgba(19, 23, 32, .2);
1952
1978
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
1953
1979
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
package/studio/component.st.css CHANGED
@@ -200,6 +200,7 @@
200
200
  @property st-global(--wds-input-border-radius-round-medium);
201
201
  @property st-global(--wds-input-border-radius-round-small);
202
202
  @property st-global(--wds-input-border-radius-round-tiny);
203
+ @property st-global(--wds-input-icon-affix-fill);
203
204
  @property st-global(--wds-input-padding-horizontal-large);
204
205
  @property st-global(--wds-input-padding-horizontal-medium);
205
206
  @property st-global(--wds-input-padding-horizontal-small);
@@ -384,6 +385,18 @@
384
385
  @property st-global(--wds-select-area-fill-hover);
385
386
  @property st-global(--wds-select-area-padding-horizontal);
386
387
  @property st-global(--wds-select-area-padding-vertical);
388
+ @property st-global(--wds-selector-button-padding-horizontal-left-large);
389
+ @property st-global(--wds-selector-button-padding-horizontal-left-medium);
390
+ @property st-global(--wds-selector-button-padding-horizontal-left-small);
391
+ @property st-global(--wds-selector-button-padding-horizontal-right-large);
392
+ @property st-global(--wds-selector-button-padding-horizontal-right-medium);
393
+ @property st-global(--wds-selector-button-padding-horizontal-right-small);
394
+ @property st-global(--wds-selector-button-padding-vertical-large);
395
+ @property st-global(--wds-selector-button-padding-vertical-medium);
396
+ @property st-global(--wds-selector-button-padding-vertical-small);
397
+ @property st-global(--wds-selector-button-size-large);
398
+ @property st-global(--wds-selector-button-size-medium);
399
+ @property st-global(--wds-selector-button-size-small);
387
400
  @property st-global(--wds-side-panel-content-padding-horizontal);
388
401
  @property st-global(--wds-side-panel-content-padding-vertical);
389
402
  @property st-global(--wds-side-panel-control-layout-divider-border-width);
@@ -830,6 +843,7 @@
830
843
  --wds-input-border-radius-round-medium: 1000px;
831
844
  --wds-input-border-radius-round-small: 1000px;
832
845
  --wds-input-border-radius-round-tiny: 1000px;
846
+ --wds-input-icon-affix-fill: #131720;
833
847
  --wds-input-padding-horizontal-large: 8px;
834
848
  --wds-input-padding-horizontal-medium: 8px;
835
849
  --wds-input-padding-horizontal-small: 4px;
@@ -1014,6 +1028,18 @@
1014
1028
  --wds-select-area-fill-hover: #edeef2;
1015
1029
  --wds-select-area-padding-horizontal: 16px;
1016
1030
  --wds-select-area-padding-vertical: 12px;
1031
+ --wds-selector-button-padding-horizontal-left-large: 12px;
1032
+ --wds-selector-button-padding-horizontal-left-medium: 12px;
1033
+ --wds-selector-button-padding-horizontal-left-small: 12px;
1034
+ --wds-selector-button-padding-horizontal-right-large: 6px;
1035
+ --wds-selector-button-padding-horizontal-right-medium: 6px;
1036
+ --wds-selector-button-padding-horizontal-right-small: 6px;
1037
+ --wds-selector-button-padding-vertical-large: 6px;
1038
+ --wds-selector-button-padding-vertical-medium: 6px;
1039
+ --wds-selector-button-padding-vertical-small: 6px;
1040
+ --wds-selector-button-size-large: 36px;
1041
+ --wds-selector-button-size-medium: 32px;
1042
+ --wds-selector-button-size-small: 28px;
1017
1043
  --wds-side-panel-content-padding-horizontal: 24px;
1018
1044
  --wds-side-panel-content-padding-vertical: 24px;
1019
1045
  --wds-side-panel-control-layout-divider-border-width: 0;
package/studio/semantic.st.css CHANGED
@@ -136,6 +136,14 @@
136
136
  @property st-global(--wds-color-fill-destructive-tertiary-active);
137
137
  @property st-global(--wds-color-fill-destructive-tertiary-disabled);
138
138
  @property st-global(--wds-color-fill-destructive-tertiary-hover);
139
+ @property st-global(--wds-color-fill-light-primary);
140
+ @property st-global(--wds-color-fill-light-primary-active);
141
+ @property st-global(--wds-color-fill-light-primary-disabled);
142
+ @property st-global(--wds-color-fill-light-primary-hover);
143
+ @property st-global(--wds-color-fill-light-secondary);
144
+ @property st-global(--wds-color-fill-light-secondary-active);
145
+ @property st-global(--wds-color-fill-light-secondary-disabled);
146
+ @property st-global(--wds-color-fill-light-secondary-hover);
139
147
  @property st-global(--wds-color-fill-premium-light-primary);
140
148
  @property st-global(--wds-color-fill-premium-light-primary-active);
141
149
  @property st-global(--wds-color-fill-premium-light-primary-disabled);
@@ -184,14 +192,6 @@
184
192
  @property st-global(--wds-color-fill-social-youtube-active);
185
193
  @property st-global(--wds-color-fill-social-youtube-disabled);
186
194
  @property st-global(--wds-color-fill-social-youtube-hover);
187
- @property st-global(--wds-color-fill-standard-light-primary);
188
- @property st-global(--wds-color-fill-standard-light-primary-active);
189
- @property st-global(--wds-color-fill-standard-light-primary-disabled);
190
- @property st-global(--wds-color-fill-standard-light-primary-hover);
191
- @property st-global(--wds-color-fill-standard-light-secondary);
192
- @property st-global(--wds-color-fill-standard-light-secondary-active);
193
- @property st-global(--wds-color-fill-standard-light-secondary-disabled);
194
- @property st-global(--wds-color-fill-standard-light-secondary-hover);
195
195
  @property st-global(--wds-color-fill-standard-primary);
196
196
  @property st-global(--wds-color-fill-standard-primary-active);
197
197
  @property st-global(--wds-color-fill-standard-primary-disabled);
@@ -467,6 +467,14 @@
467
467
  --wds-color-fill-destructive-tertiary-active: #fbd0cd;
468
468
  --wds-color-fill-destructive-tertiary-disabled: #ffffff;
469
469
  --wds-color-fill-destructive-tertiary-hover: #f7f8f8;
470
+ --wds-color-fill-light-primary: #ffffff;
471
+ --wds-color-fill-light-primary-active: #dce9ff;
472
+ --wds-color-fill-light-primary-disabled: rgba(255, 255, 255, .3);
473
+ --wds-color-fill-light-primary-hover: #ebf2ff;
474
+ --wds-color-fill-light-secondary: rgba(255, 255, 255, 0);
475
+ --wds-color-fill-light-secondary-active: #dce9ff;
476
+ --wds-color-fill-light-secondary-disabled: rgba(255, 255, 255, 0);
477
+ --wds-color-fill-light-secondary-hover: #ebf2ff;
470
478
  --wds-color-fill-premium-light-primary: #ffffff;
471
479
  --wds-color-fill-premium-light-primary-active: #e3c3f4;
472
480
  --wds-color-fill-premium-light-primary-disabled: rgba(255, 255, 255, .3);
@@ -515,14 +523,6 @@
515
523
  --wds-color-fill-social-youtube-active: #ff0000;
516
524
  --wds-color-fill-social-youtube-disabled: #bebebe;
517
525
  --wds-color-fill-social-youtube-hover: rgba(255, 0, 0, .8);
518
- --wds-color-fill-standard-light-primary: #ffffff;
519
- --wds-color-fill-standard-light-primary-active: #dce9ff;
520
- --wds-color-fill-standard-light-primary-disabled: rgba(255, 255, 255, .3);
521
- --wds-color-fill-standard-light-primary-hover: #ebf2ff;
522
- --wds-color-fill-standard-light-secondary: rgba(255, 255, 255, 0);
523
- --wds-color-fill-standard-light-secondary-active: #dce9ff;
524
- --wds-color-fill-standard-light-secondary-disabled: rgba(255, 255, 255, 0);
525
- --wds-color-fill-standard-light-secondary-hover: #ebf2ff;
526
526
  --wds-color-fill-standard-primary: #116dff;
527
527
  --wds-color-fill-standard-primary-active: #116dff;
528
528
  --wds-color-fill-standard-primary-disabled: #bebebe;