@wix/design-system-tokens 1.86.0 → 1.86.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/all.css +18 -6
  3. package/all.st.css +31 -7
  4. package/component.st.css +31 -7
  5. package/package.json +2 -2
  6. package/studio/all.css +16 -5
  7. package/studio/all.st.css +29 -7
  8. package/studio/component.st.css +29 -7
  9. package/wixel/all.css +33 -21
  10. package/wixel/all.st.css +47 -23
  11. package/wixel/component.st.css +39 -17
  12. package/wixel/foundation.st.css +3 -1
  13. package/wixel/semantic.st.css +5 -5
package/studio/all.st.css CHANGED
@@ -88,6 +88,7 @@
88
88
  @property st-global(--wds-button-border-radius-tiny);
89
89
  @property st-global(--wds-button-fill-gradient-hover-primary);
90
90
  @property st-global(--wds-button-fill-gradient-hover-secondary);
91
+ @property st-global(--wds-button-fill-standard-primary-hover);
91
92
  @property st-global(--wds-button-fill-standard-secondary);
92
93
  @property st-global(--wds-button-fill-standard-secondary-hover);
93
94
  @property st-global(--wds-button-font-line-height-large);
@@ -109,14 +110,17 @@
109
110
  @property st-global(--wds-button-icon-offset-tiny);
110
111
  @property st-global(--wds-button-label-font-size-large);
111
112
  @property st-global(--wds-button-outline-hover);
113
+ @property st-global(--wds-button-padding-horizontal-extra-large);
112
114
  @property st-global(--wds-button-padding-horizontal-large);
113
115
  @property st-global(--wds-button-padding-horizontal-medium);
114
116
  @property st-global(--wds-button-padding-horizontal-small);
115
117
  @property st-global(--wds-button-padding-horizontal-tiny);
118
+ @property st-global(--wds-button-padding-vertical-extra-large);
116
119
  @property st-global(--wds-button-padding-vertical-large);
117
120
  @property st-global(--wds-button-padding-vertical-medium);
118
121
  @property st-global(--wds-button-padding-vertical-small);
119
122
  @property st-global(--wds-button-padding-vertical-tiny);
123
+ @property st-global(--wds-button-size-extra-large);
120
124
  @property st-global(--wds-button-size-large);
121
125
  @property st-global(--wds-button-size-large-screen-small);
122
126
  @property st-global(--wds-button-size-medium);
@@ -680,6 +684,9 @@
680
684
  @property st-global(--wds-custom-modal-header-title-font-size);
681
685
  @property st-global(--wds-divider-fill-color-light-1);
682
686
  @property st-global(--wds-divider-fill-color-light-2);
687
+ @property st-global(--wds-divider-fill-color-light-primary);
688
+ @property st-global(--wds-divider-fill-color-light-secondary);
689
+ @property st-global(--wds-divider-gradient-border);
683
690
  @property st-global(--wds-dock-background-fill);
684
691
  @property st-global(--wds-dock-background-fill-active);
685
692
  @property st-global(--wds-dock-background-fill-disabled);
@@ -848,6 +855,7 @@
848
855
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
849
856
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
850
857
  @property st-global(--wds-linear-progress-bar-border-radius);
858
+ @property st-global(--wds-list-item-action-affix-margin);
851
859
  @property st-global(--wds-list-item-action-border-radius);
852
860
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
853
861
  @property st-global(--wds-list-item-action-label-font-line-height-small);
@@ -859,7 +867,6 @@
859
867
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
860
868
  @property st-global(--wds-list-item-action-padding-vertical-small);
861
869
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
862
- @property st-global(--wds-list-item-action-prefix-margin);
863
870
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
864
871
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
865
872
  @property st-global(--wds-list-item-gap-columns);
@@ -894,6 +901,7 @@
894
901
  @property st-global(--wds-list-item-select-active-title-disabled);
895
902
  @property st-global(--wds-list-item-select-active-title-disabled-screen-small);
896
903
  @property st-global(--wds-list-item-select-active-title-screen-small);
904
+ @property st-global(--wds-list-item-select-affix-margin);
897
905
  @property st-global(--wds-list-item-select-fill);
898
906
  @property st-global(--wds-list-item-select-fill-active);
899
907
  @property st-global(--wds-list-item-select-fill-disabled);
@@ -910,7 +918,6 @@
910
918
  @property st-global(--wds-list-item-select-padding-vertical-medium-screen-small);
911
919
  @property st-global(--wds-list-item-select-padding-vertical-small);
912
920
  @property st-global(--wds-list-item-select-padding-vertical-small-screen-small);
913
- @property st-global(--wds-list-item-select-prefix-margin);
914
921
  @property st-global(--wds-list-item-select-subtitle);
915
922
  @property st-global(--wds-list-item-select-subtitle-disabled);
916
923
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
@@ -1301,6 +1308,10 @@
1301
1308
  @property st-global(--wds-tabs-padding-horizontal-small);
1302
1309
  @property st-global(--wds-tabs-padding-vertical-medium);
1303
1310
  @property st-global(--wds-tabs-padding-vertical-small);
1311
+ @property st-global(--wds-tabs-selection-border);
1312
+ @property st-global(--wds-tabs-selection-fill-primary);
1313
+ @property st-global(--wds-tabs-selection-fill-secondary);
1314
+ @property st-global(--wds-tabs-selection-height);
1304
1315
  @property st-global(--wds-tag-border-radius-large);
1305
1316
  @property st-global(--wds-tag-border-radius-medium);
1306
1317
  @property st-global(--wds-tag-border-radius-small);
@@ -1495,8 +1506,8 @@
1495
1506
  --wds-accordion-title-font-line-height-small: 16px;
1496
1507
  --wds-accordion-title-font-size-medium: 14px;
1497
1508
  --wds-accordion-title-font-size-small: 12px;
1498
- --wds-accordion-title-font-weight: 700;
1499
- --wds-accordion-title-font-weight-small: 700;
1509
+ --wds-accordion-title-font-weight: 500;
1510
+ --wds-accordion-title-font-weight-small: 500;
1500
1511
  --wds-add-item-border-radius: 4px;
1501
1512
  --wds-add-item-padding-horizontal-large: 28px;
1502
1513
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -1575,6 +1586,7 @@
1575
1586
  --wds-button-border-radius-tiny: 4px;
1576
1587
  --wds-button-fill-gradient-hover-primary: #0f62e6;
1577
1588
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
1589
+ --wds-button-fill-standard-primary-hover: #0f62e6;
1578
1590
  --wds-button-fill-standard-secondary: #ffffff;
1579
1591
  --wds-button-fill-standard-secondary-hover: #f7f8f8;
1580
1592
  --wds-button-font-line-height-large: 24px;
@@ -1596,14 +1608,17 @@
1596
1608
  --wds-button-icon-offset-tiny: 12px;
1597
1609
  --wds-button-label-font-size-large: 16px;
1598
1610
  --wds-button-outline-hover: #e2e3ea;
1611
+ --wds-button-padding-horizontal-extra-large: 20px;
1599
1612
  --wds-button-padding-horizontal-large: 16px;
1600
1613
  --wds-button-padding-horizontal-medium: 16px;
1601
1614
  --wds-button-padding-horizontal-small: 12px;
1602
1615
  --wds-button-padding-horizontal-tiny: 12px;
1616
+ --wds-button-padding-vertical-extra-large: 10px;
1603
1617
  --wds-button-padding-vertical-large: 6px;
1604
1618
  --wds-button-padding-vertical-medium: 6px;
1605
1619
  --wds-button-padding-vertical-small: 6px;
1606
1620
  --wds-button-padding-vertical-tiny: 2px;
1621
+ --wds-button-size-extra-large: 40px;
1607
1622
  --wds-button-size-large: 36px;
1608
1623
  --wds-button-size-large-screen-small: 44px;
1609
1624
  --wds-button-size-medium: 32px;
@@ -2167,6 +2182,9 @@
2167
2182
  --wds-custom-modal-header-title-font-size: 14px;
2168
2183
  --wds-divider-fill-color-light-1: #e2e3ea;
2169
2184
  --wds-divider-fill-color-light-2: #e2e3ea;
2185
+ --wds-divider-fill-color-light-primary: #e2e3ea;
2186
+ --wds-divider-fill-color-light-secondary: #e2e3ea;
2187
+ --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
2170
2188
  --wds-dock-background-fill: #ebf2ff;
2171
2189
  --wds-dock-background-fill-active: #dce9ff;
2172
2190
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -2335,6 +2353,7 @@
2335
2353
  --wds-internal-thumbnail-illustration-size-small: 51px;
2336
2354
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
2337
2355
  --wds-linear-progress-bar-border-radius: 0;
2356
+ --wds-list-item-action-affix-margin: 4px;
2338
2357
  --wds-list-item-action-border-radius: 0;
2339
2358
  --wds-list-item-action-label-font-line-height-medium: 20px;
2340
2359
  --wds-list-item-action-label-font-line-height-small: 18px;
@@ -2346,7 +2365,6 @@
2346
2365
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
2347
2366
  --wds-list-item-action-padding-vertical-small: 6px;
2348
2367
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
2349
- --wds-list-item-action-prefix-margin: 4px;
2350
2368
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
2351
2369
  --wds-list-item-action-subtitle-font-size-medium: 12px;
2352
2370
  --wds-list-item-gap-columns: 24px;
@@ -2381,6 +2399,7 @@
2381
2399
  --wds-list-item-select-active-title-disabled: #bebebe;
2382
2400
  --wds-list-item-select-active-title-disabled-screen-small: #bebebe;
2383
2401
  --wds-list-item-select-active-title-screen-small: #116dff;
2402
+ --wds-list-item-select-affix-margin: 6px;
2384
2403
  --wds-list-item-select-fill: #ffffff;
2385
2404
  --wds-list-item-select-fill-active: #dce9ff;
2386
2405
  --wds-list-item-select-fill-disabled: #ffffff;
@@ -2397,7 +2416,6 @@
2397
2416
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
2398
2417
  --wds-list-item-select-padding-vertical-small: 4px;
2399
2418
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
2400
- --wds-list-item-select-prefix-margin: 6px;
2401
2419
  --wds-list-item-select-subtitle: #868aa5;
2402
2420
  --wds-list-item-select-subtitle-disabled: #bebebe;
2403
2421
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -2788,6 +2806,10 @@
2788
2806
  --wds-tabs-padding-horizontal-small: 12px;
2789
2807
  --wds-tabs-padding-vertical-medium: 16px;
2790
2808
  --wds-tabs-padding-vertical-small: 12px;
2809
+ --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
2810
+ --wds-tabs-selection-fill-primary: #116dff;
2811
+ --wds-tabs-selection-fill-secondary: #116dff;
2812
+ --wds-tabs-selection-height: 3px;
2791
2813
  --wds-tag-border-radius-large: 4px;
2792
2814
  --wds-tag-border-radius-medium: 4px;
2793
2815
  --wds-tag-border-radius-small: 4px;
@@ -2808,7 +2830,7 @@
2808
2830
  --wds-tag-size-tiny: 20px;
2809
2831
  --wds-testimonial-list-gap: 24px;
2810
2832
  --wds-thumbnail-border-radius: 4px;
2811
- --wds-thumbnail-border-width-default: 0;
2833
+ --wds-thumbnail-border-width-default: 1px;
2812
2834
  --wds-thumbnail-fill: rgba(255, 255, 255, 0);
2813
2835
  --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
2814
2836
  --wds-thumbnail-gap: 12px;
package/studio/component.st.css CHANGED
@@ -57,6 +57,7 @@
57
57
  @property st-global(--wds-button-border-radius-tiny);
58
58
  @property st-global(--wds-button-fill-gradient-hover-primary);
59
59
  @property st-global(--wds-button-fill-gradient-hover-secondary);
60
+ @property st-global(--wds-button-fill-standard-primary-hover);
60
61
  @property st-global(--wds-button-fill-standard-secondary);
61
62
  @property st-global(--wds-button-fill-standard-secondary-hover);
62
63
  @property st-global(--wds-button-font-line-height-large);
@@ -78,14 +79,17 @@
78
79
  @property st-global(--wds-button-icon-offset-tiny);
79
80
  @property st-global(--wds-button-label-font-size-large);
80
81
  @property st-global(--wds-button-outline-hover);
82
+ @property st-global(--wds-button-padding-horizontal-extra-large);
81
83
  @property st-global(--wds-button-padding-horizontal-large);
82
84
  @property st-global(--wds-button-padding-horizontal-medium);
83
85
  @property st-global(--wds-button-padding-horizontal-small);
84
86
  @property st-global(--wds-button-padding-horizontal-tiny);
87
+ @property st-global(--wds-button-padding-vertical-extra-large);
85
88
  @property st-global(--wds-button-padding-vertical-large);
86
89
  @property st-global(--wds-button-padding-vertical-medium);
87
90
  @property st-global(--wds-button-padding-vertical-small);
88
91
  @property st-global(--wds-button-padding-vertical-tiny);
92
+ @property st-global(--wds-button-size-extra-large);
89
93
  @property st-global(--wds-button-size-large);
90
94
  @property st-global(--wds-button-size-large-screen-small);
91
95
  @property st-global(--wds-button-size-medium);
@@ -205,6 +209,9 @@
205
209
  @property st-global(--wds-custom-modal-header-title-font-size);
206
210
  @property st-global(--wds-divider-fill-color-light-1);
207
211
  @property st-global(--wds-divider-fill-color-light-2);
212
+ @property st-global(--wds-divider-fill-color-light-primary);
213
+ @property st-global(--wds-divider-fill-color-light-secondary);
214
+ @property st-global(--wds-divider-gradient-border);
208
215
  @property st-global(--wds-dock-background-fill);
209
216
  @property st-global(--wds-dock-background-fill-active);
210
217
  @property st-global(--wds-dock-background-fill-disabled);
@@ -318,6 +325,7 @@
318
325
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
319
326
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
320
327
  @property st-global(--wds-linear-progress-bar-border-radius);
328
+ @property st-global(--wds-list-item-action-affix-margin);
321
329
  @property st-global(--wds-list-item-action-border-radius);
322
330
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
323
331
  @property st-global(--wds-list-item-action-label-font-line-height-small);
@@ -329,7 +337,6 @@
329
337
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
330
338
  @property st-global(--wds-list-item-action-padding-vertical-small);
331
339
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
332
- @property st-global(--wds-list-item-action-prefix-margin);
333
340
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
334
341
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
335
342
  @property st-global(--wds-list-item-gap-columns);
@@ -364,6 +371,7 @@
364
371
  @property st-global(--wds-list-item-select-active-title-disabled);
365
372
  @property st-global(--wds-list-item-select-active-title-disabled-screen-small);
366
373
  @property st-global(--wds-list-item-select-active-title-screen-small);
374
+ @property st-global(--wds-list-item-select-affix-margin);
367
375
  @property st-global(--wds-list-item-select-fill);
368
376
  @property st-global(--wds-list-item-select-fill-active);
369
377
  @property st-global(--wds-list-item-select-fill-disabled);
@@ -380,7 +388,6 @@
380
388
  @property st-global(--wds-list-item-select-padding-vertical-medium-screen-small);
381
389
  @property st-global(--wds-list-item-select-padding-vertical-small);
382
390
  @property st-global(--wds-list-item-select-padding-vertical-small-screen-small);
383
- @property st-global(--wds-list-item-select-prefix-margin);
384
391
  @property st-global(--wds-list-item-select-subtitle);
385
392
  @property st-global(--wds-list-item-select-subtitle-disabled);
386
393
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
@@ -684,6 +691,10 @@
684
691
  @property st-global(--wds-tabs-padding-horizontal-small);
685
692
  @property st-global(--wds-tabs-padding-vertical-medium);
686
693
  @property st-global(--wds-tabs-padding-vertical-small);
694
+ @property st-global(--wds-tabs-selection-border);
695
+ @property st-global(--wds-tabs-selection-fill-primary);
696
+ @property st-global(--wds-tabs-selection-fill-secondary);
697
+ @property st-global(--wds-tabs-selection-height);
687
698
  @property st-global(--wds-tag-border-radius-large);
688
699
  @property st-global(--wds-tag-border-radius-medium);
689
700
  @property st-global(--wds-tag-border-radius-small);
@@ -876,8 +887,8 @@
876
887
  --wds-accordion-title-font-line-height-small: 16px;
877
888
  --wds-accordion-title-font-size-medium: 14px;
878
889
  --wds-accordion-title-font-size-small: 12px;
879
- --wds-accordion-title-font-weight: 700;
880
- --wds-accordion-title-font-weight-small: 700;
890
+ --wds-accordion-title-font-weight: 500;
891
+ --wds-accordion-title-font-weight-small: 500;
881
892
  --wds-add-item-border-radius: 4px;
882
893
  --wds-add-item-padding-horizontal-large: 28px;
883
894
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -925,6 +936,7 @@
925
936
  --wds-button-border-radius-tiny: 4px;
926
937
  --wds-button-fill-gradient-hover-primary: #0f62e6;
927
938
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
939
+ --wds-button-fill-standard-primary-hover: #0f62e6;
928
940
  --wds-button-fill-standard-secondary: #ffffff;
929
941
  --wds-button-fill-standard-secondary-hover: #f7f8f8;
930
942
  --wds-button-font-line-height-large: 24px;
@@ -946,14 +958,17 @@
946
958
  --wds-button-icon-offset-tiny: 12px;
947
959
  --wds-button-label-font-size-large: 16px;
948
960
  --wds-button-outline-hover: #e2e3ea;
961
+ --wds-button-padding-horizontal-extra-large: 20px;
949
962
  --wds-button-padding-horizontal-large: 16px;
950
963
  --wds-button-padding-horizontal-medium: 16px;
951
964
  --wds-button-padding-horizontal-small: 12px;
952
965
  --wds-button-padding-horizontal-tiny: 12px;
966
+ --wds-button-padding-vertical-extra-large: 10px;
953
967
  --wds-button-padding-vertical-large: 6px;
954
968
  --wds-button-padding-vertical-medium: 6px;
955
969
  --wds-button-padding-vertical-small: 6px;
956
970
  --wds-button-padding-vertical-tiny: 2px;
971
+ --wds-button-size-extra-large: 40px;
957
972
  --wds-button-size-large: 36px;
958
973
  --wds-button-size-large-screen-small: 44px;
959
974
  --wds-button-size-medium: 32px;
@@ -1073,6 +1088,9 @@
1073
1088
  --wds-custom-modal-header-title-font-size: 14px;
1074
1089
  --wds-divider-fill-color-light-1: #e2e3ea;
1075
1090
  --wds-divider-fill-color-light-2: #e2e3ea;
1091
+ --wds-divider-fill-color-light-primary: #e2e3ea;
1092
+ --wds-divider-fill-color-light-secondary: #e2e3ea;
1093
+ --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
1076
1094
  --wds-dock-background-fill: #ebf2ff;
1077
1095
  --wds-dock-background-fill-active: #dce9ff;
1078
1096
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -1186,6 +1204,7 @@
1186
1204
  --wds-internal-thumbnail-illustration-size-small: 51px;
1187
1205
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1188
1206
  --wds-linear-progress-bar-border-radius: 0;
1207
+ --wds-list-item-action-affix-margin: 4px;
1189
1208
  --wds-list-item-action-border-radius: 0;
1190
1209
  --wds-list-item-action-label-font-line-height-medium: 20px;
1191
1210
  --wds-list-item-action-label-font-line-height-small: 18px;
@@ -1197,7 +1216,6 @@
1197
1216
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
1198
1217
  --wds-list-item-action-padding-vertical-small: 6px;
1199
1218
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
1200
- --wds-list-item-action-prefix-margin: 4px;
1201
1219
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
1202
1220
  --wds-list-item-action-subtitle-font-size-medium: 12px;
1203
1221
  --wds-list-item-gap-columns: 24px;
@@ -1232,6 +1250,7 @@
1232
1250
  --wds-list-item-select-active-title-disabled: #bebebe;
1233
1251
  --wds-list-item-select-active-title-disabled-screen-small: #bebebe;
1234
1252
  --wds-list-item-select-active-title-screen-small: #116dff;
1253
+ --wds-list-item-select-affix-margin: 6px;
1235
1254
  --wds-list-item-select-fill: #ffffff;
1236
1255
  --wds-list-item-select-fill-active: #dce9ff;
1237
1256
  --wds-list-item-select-fill-disabled: #ffffff;
@@ -1248,7 +1267,6 @@
1248
1267
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
1249
1268
  --wds-list-item-select-padding-vertical-small: 4px;
1250
1269
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
1251
- --wds-list-item-select-prefix-margin: 6px;
1252
1270
  --wds-list-item-select-subtitle: #868aa5;
1253
1271
  --wds-list-item-select-subtitle-disabled: #bebebe;
1254
1272
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -1552,6 +1570,10 @@
1552
1570
  --wds-tabs-padding-horizontal-small: 12px;
1553
1571
  --wds-tabs-padding-vertical-medium: 16px;
1554
1572
  --wds-tabs-padding-vertical-small: 12px;
1573
+ --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
1574
+ --wds-tabs-selection-fill-primary: #116dff;
1575
+ --wds-tabs-selection-fill-secondary: #116dff;
1576
+ --wds-tabs-selection-height: 3px;
1555
1577
  --wds-tag-border-radius-large: 4px;
1556
1578
  --wds-tag-border-radius-medium: 4px;
1557
1579
  --wds-tag-border-radius-small: 4px;
@@ -1572,7 +1594,7 @@
1572
1594
  --wds-tag-size-tiny: 20px;
1573
1595
  --wds-testimonial-list-gap: 24px;
1574
1596
  --wds-thumbnail-border-radius: 4px;
1575
- --wds-thumbnail-border-width-default: 0;
1597
+ --wds-thumbnail-border-width-default: 1px;
1576
1598
  --wds-thumbnail-fill: rgba(255, 255, 255, 0);
1577
1599
  --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
1578
1600
  --wds-thumbnail-gap: 12px;
package/wixel/all.css CHANGED
@@ -58,8 +58,9 @@
58
58
  --wds-button-border-radius-tiny: 8px;
59
59
  --wds-button-fill-gradient-hover-primary: #4a2ae9;
60
60
  --wds-button-fill-gradient-hover-secondary: #526cff;
61
+ --wds-button-fill-standard-primary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
61
62
  --wds-button-fill-standard-secondary: #ffffff;
62
- --wds-button-fill-standard-secondary-hover: #f4f6ff;
63
+ --wds-button-fill-standard-secondary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
63
64
  --wds-button-font-line-height-large: 20px;
64
65
  --wds-button-font-line-height-medium: 20px;
65
66
  --wds-button-font-line-height-small: 16px;
@@ -78,24 +79,27 @@
78
79
  --wds-button-icon-offset-small: 12px;
79
80
  --wds-button-icon-offset-tiny: 12px;
80
81
  --wds-button-label-font-size-large: 14px;
81
- --wds-button-outline-hover: #d6dcff;
82
+ --wds-button-outline-hover: transparent;
83
+ --wds-button-padding-horizontal-extra-large: 24px;
82
84
  --wds-button-padding-horizontal-large: 24px;
83
85
  --wds-button-padding-horizontal-medium: 20px;
84
86
  --wds-button-padding-horizontal-small: 16px;
85
87
  --wds-button-padding-horizontal-tiny: 12px;
88
+ --wds-button-padding-vertical-extra-large: 14px;
86
89
  --wds-button-padding-vertical-large: 10px;
87
90
  --wds-button-padding-vertical-medium: 8px;
88
91
  --wds-button-padding-vertical-small: 6px;
89
92
  --wds-button-padding-vertical-tiny: 6px;
90
- --wds-button-size-large: 48px;
93
+ --wds-button-size-extra-large: 48px;
94
+ --wds-button-size-large: 42px;
91
95
  --wds-button-size-large-screen-small: 44px;
92
- --wds-button-size-medium: 42px;
96
+ --wds-button-size-medium: 38px;
93
97
  --wds-button-size-medium-screen-small: 40px;
94
- --wds-button-size-small: 36px;
98
+ --wds-button-size-small: 32px;
95
99
  --wds-button-size-small-screen-small: 36px;
96
- --wds-button-size-tiny: 28px;
100
+ --wds-button-size-tiny: 24px;
97
101
  --wds-button-size-tiny-screen-small: 32px;
98
- --wds-button-size-x-tiny: 24px;
102
+ --wds-button-size-x-tiny: 20px;
99
103
  --wds-button-text-standard-primary: #131720;
100
104
  --wds-button-text-standard-primary-hover: #131720;
101
105
  --wds-button-text-hover: #526cff;
@@ -150,7 +154,7 @@
150
154
  --wds-circular-progress-bar-size-medium: 52px;
151
155
  --wds-circular-progress-bar-size-small: 24px;
152
156
  --wds-circular-progress-bar-size-tiny: 18px;
153
- --wds-close-button-standard-fill-active: #526cff;
157
+ --wds-close-button-standard-fill-active: #4a2ae9;
154
158
  --wds-close-button-standard-fill-disabled: #e5e5e5;
155
159
  --wds-close-button-standard-fill-hover: #bac5ff;
156
160
  --wds-close-button-standard-filled-fill: #d6dcff;
@@ -203,6 +207,9 @@
203
207
  --wds-custom-modal-header-title-font-size: 14px;
204
208
  --wds-divider-fill-color-light-1: #d6dcff;
205
209
  --wds-divider-fill-color-light-2: rgba(244, 247, 255, 0.0000);
210
+ --wds-divider-fill-color-light-primary: rgba(214, 220, 255, 1);
211
+ --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
212
+ --wds-divider-gradient-border: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, rgba(214, 220, 255, 1) 16%, rgba(214, 220, 255, 1) 84%, rgba(244, 247, 255, 0.0000) 100%);
206
213
  --wds-dock-background-fill: #eef0ff;
207
214
  --wds-dock-background-fill-active: #d6dcff;
208
215
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -331,6 +338,7 @@
331
338
  --wds-list-item-padding-vertical-tiny: 12px;
332
339
  --wds-list-item-padding-vertical-x-tiny: 8px;
333
340
  --wds-list-item-padding-vertical-xx-tiny: 4px;
341
+ --wds-list-item-action-affix-margin: 6px;
334
342
  --wds-list-item-action-border-radius: 8px;
335
343
  --wds-list-item-action-label-font-line-height-medium: 20px;
336
344
  --wds-list-item-action-label-font-line-height-small: 16px;
@@ -342,7 +350,6 @@
342
350
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
343
351
  --wds-list-item-action-padding-vertical-small: 12px;
344
352
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
345
- --wds-list-item-action-prefix-margin: 6px;
346
353
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
347
354
  --wds-list-item-action-subtitle-font-size-medium: 12px;
348
355
  --wds-list-item-section-font-line-height: 16px;
@@ -362,6 +369,7 @@
362
369
  --wds-list-item-select-active-title-disabled: rgba(38, 37, 36, 0.3000);
363
370
  --wds-list-item-select-active-title-disabled-screen-small: rgba(38, 37, 36, 0.3000);
364
371
  --wds-list-item-select-active-title-screen-small: #526cff;
372
+ --wds-list-item-select-affix-margin: 6px;
365
373
  --wds-list-item-select-border-radius: 8px;
366
374
  --wds-list-item-select-fill: #ffffff;
367
375
  --wds-list-item-select-fill-active: #eef0ff;
@@ -381,7 +389,6 @@
381
389
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
382
390
  --wds-list-item-select-padding-vertical-small: 12px;
383
391
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
384
- --wds-list-item-select-prefix-margin: 6px;
385
392
  --wds-list-item-select-subtitle: #868aa5;
386
393
  --wds-list-item-select-subtitle-disabled: rgba(38, 37, 36, 0.3000);
387
394
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -650,9 +657,9 @@
650
657
  --wds-skeleton-border-radius-rectangle: 4px;
651
658
  --wds-slider-slider-knob-border-width: 5px;
652
659
  --wds-slider-slider-knob-border-width-hover: 12px;
653
- --wds-slider-slider-knob-color: #ffffff;
654
- --wds-slider-slider-knob-color-hover: #f4f6ff;
655
- --wds-slider-slider-knob-shadow: true;
660
+ --wds-slider-slider-knob-color: #526cff;
661
+ --wds-slider-slider-knob-color-hover: #4c49fb;
662
+ --wds-slider-slider-knob-shadow: 0 1px 4px 0 rgba(38, 37, 36, 0.3000), 0 2px 4px 0 rgba(38, 37, 36, 0.0000);
656
663
  --wds-slider-slider-knob-size: 16px;
657
664
  --wds-slider-slider-knob-size-hover: 24px;
658
665
  --wds-slider-slider-knob-size-transparent: 16px;
@@ -696,6 +703,10 @@
696
703
  --wds-tabs-padding-horizontal-small: 12px;
697
704
  --wds-tabs-padding-vertical-medium: 16px;
698
705
  --wds-tabs-padding-vertical-small: 12px;
706
+ --wds-tabs-selection-border: linear-gradient(90deg, rgba(255, 255, 255, 0.0000) 0%, #526cff 20%, #526cff 80%, rgba(255, 255, 255, 0.0000) 100%);
707
+ --wds-tabs-selection-fill-primary: #526cff;
708
+ --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0.0000);
709
+ --wds-tabs-selection-height: 1px;
699
710
  --wds-tag-border-radius-large: 4px;
700
711
  --wds-tag-border-radius-medium: 4px;
701
712
  --wds-tag-border-radius-small: 4px;
@@ -795,7 +806,7 @@
795
806
  --wds-toggle-switch-width-large: 40px;
796
807
  --wds-toggle-switch-width-medium: 32px;
797
808
  --wds-toggle-switch-width-small: 24px;
798
- --wds-tooltip-background-fill: #ffffff;
809
+ --wds-tooltip-background-fill: #131720;
799
810
  --wds-tooltip-border-radius: 8px;
800
811
  --wds-tooltip-border-radius-medium: 8px;
801
812
  --wds-tooltip-border-radius-small: 8px;
@@ -803,7 +814,7 @@
803
814
  --wds-tooltip-padding-horizontal-small: 8px;
804
815
  --wds-tooltip-padding-vertical-medium: 8px;
805
816
  --wds-tooltip-padding-vertical-small: 6px;
806
- --wds-tooltip-text-fill: #131720;
817
+ --wds-tooltip-text-fill: #ffffff;
807
818
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
808
819
  --wds-vertical-tabs-action-padding-horizontal-small: 24px;
809
820
  --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
@@ -1240,7 +1251,7 @@
1240
1251
  --wds-color-fill-stage-section-secondary-disabled: #e5e5e5;
1241
1252
  --wds-color-fill-stage-section-secondary-hover: #bac5ff;
1242
1253
  --wds-color-fill-standard-primary: #526cff;
1243
- --wds-color-fill-standard-primary-active: #526cff;
1254
+ --wds-color-fill-standard-primary-active: #4a2ae9;
1244
1255
  --wds-color-fill-standard-primary-disabled: #bebebe;
1245
1256
  --wds-color-fill-standard-primary-hover: #4c49fb;
1246
1257
  --wds-color-fill-standard-secondary: #eef0ff;
@@ -1405,7 +1416,7 @@
1405
1416
  --wds-font-weight-body-bold: 600;
1406
1417
  --wds-shadow-100: 0;
1407
1418
  --wds-shadow-200: 0;
1408
- --wds-shadow-300: 0;
1419
+ --wds-shadow-300: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
1409
1420
  --wds-shadow-400: 0;
1410
1421
  --wds-shadow-blur-50: 4px;
1411
1422
  --wds-shadow-blur-100: 4px;
@@ -1443,10 +1454,10 @@
1443
1454
  --wds-shadow-focus-standard: #bac5ff;
1444
1455
  --wds-shadow-focus-warning: #fdead2;
1445
1456
  --wds-shadow-focus-spread: 0;
1446
- --wds-shadow-surface-modal: 0;
1447
- --wds-shadow-surface-overlay: 0;
1448
- --wds-shadow-surface-overlay-dark: 0;
1449
- --wds-shadow-surface-raised: 0;
1457
+ --wds-shadow-surface-modal: 0 10px 10px rgba(38, 37, 36, 0.2000), 0 8px 8px rgba(38, 37, 36, 0.0000);
1458
+ --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
1459
+ --wds-shadow-surface-overlay-dark: 0 10px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
1460
+ --wds-shadow-surface-raised: 0 1px 4px rgba(38, 37, 36, 0.3000), 0 2px 4px rgba(38, 37, 36, 0.0000);
1450
1461
  --wds-space-0: 0;
1451
1462
  --wds-space-25: 1px;
1452
1463
  --wds-space-50: 2px;
@@ -1464,6 +1475,7 @@
1464
1475
  --wds-space-800: 32px;
1465
1476
  --wds-space-850: 34px;
1466
1477
  --wds-space-900: 36px;
1478
+ --wds-space-950: 38px;
1467
1479
  --wds-space-1000: 40px;
1468
1480
  --wds-space-1050: 42px;
1469
1481
  --wds-space-1100: 44px;