@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/wixel/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);
@@ -849,6 +856,7 @@
849
856
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
850
857
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
851
858
  @property st-global(--wds-linear-progress-bar-border-radius);
859
+ @property st-global(--wds-list-item-action-affix-margin);
852
860
  @property st-global(--wds-list-item-action-border-radius);
853
861
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
854
862
  @property st-global(--wds-list-item-action-label-font-line-height-small);
@@ -860,7 +868,6 @@
860
868
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
861
869
  @property st-global(--wds-list-item-action-padding-vertical-small);
862
870
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
863
- @property st-global(--wds-list-item-action-prefix-margin);
864
871
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
865
872
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
866
873
  @property st-global(--wds-list-item-gap-columns);
@@ -895,6 +902,7 @@
895
902
  @property st-global(--wds-list-item-select-active-title-disabled);
896
903
  @property st-global(--wds-list-item-select-active-title-disabled-screen-small);
897
904
  @property st-global(--wds-list-item-select-active-title-screen-small);
905
+ @property st-global(--wds-list-item-select-affix-margin);
898
906
  @property st-global(--wds-list-item-select-border-radius);
899
907
  @property st-global(--wds-list-item-select-fill);
900
908
  @property st-global(--wds-list-item-select-fill-active);
@@ -918,7 +926,6 @@
918
926
  @property st-global(--wds-list-item-select-padding-vertical-medium-screen-small);
919
927
  @property st-global(--wds-list-item-select-padding-vertical-small);
920
928
  @property st-global(--wds-list-item-select-padding-vertical-small-screen-small);
921
- @property st-global(--wds-list-item-select-prefix-margin);
922
929
  @property st-global(--wds-list-item-select-subtitle);
923
930
  @property st-global(--wds-list-item-select-subtitle-disabled);
924
931
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
@@ -1260,6 +1267,7 @@
1260
1267
  @property st-global(--wds-space-800);
1261
1268
  @property st-global(--wds-space-850);
1262
1269
  @property st-global(--wds-space-900);
1270
+ @property st-global(--wds-space-950);
1263
1271
  @property st-global(--wds-space-1000);
1264
1272
  @property st-global(--wds-space-1050);
1265
1273
  @property st-global(--wds-space-1100);
@@ -1312,6 +1320,10 @@
1312
1320
  @property st-global(--wds-tabs-padding-horizontal-small);
1313
1321
  @property st-global(--wds-tabs-padding-vertical-medium);
1314
1322
  @property st-global(--wds-tabs-padding-vertical-small);
1323
+ @property st-global(--wds-tabs-selection-border);
1324
+ @property st-global(--wds-tabs-selection-fill-primary);
1325
+ @property st-global(--wds-tabs-selection-fill-secondary);
1326
+ @property st-global(--wds-tabs-selection-height);
1315
1327
  @property st-global(--wds-tag-border-radius-large);
1316
1328
  @property st-global(--wds-tag-border-radius-medium);
1317
1329
  @property st-global(--wds-tag-border-radius-small);
@@ -1586,8 +1598,9 @@
1586
1598
  --wds-button-border-radius-tiny: 8px;
1587
1599
  --wds-button-fill-gradient-hover-primary: #4a2ae9;
1588
1600
  --wds-button-fill-gradient-hover-secondary: #526cff;
1601
+ --wds-button-fill-standard-primary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
1589
1602
  --wds-button-fill-standard-secondary: #ffffff;
1590
- --wds-button-fill-standard-secondary-hover: #f4f6ff;
1603
+ --wds-button-fill-standard-secondary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
1591
1604
  --wds-button-font-line-height-large: 20px;
1592
1605
  --wds-button-font-line-height-medium: 20px;
1593
1606
  --wds-button-font-line-height-small: 16px;
@@ -1606,24 +1619,27 @@
1606
1619
  --wds-button-icon-offset-small: 12px;
1607
1620
  --wds-button-icon-offset-tiny: 12px;
1608
1621
  --wds-button-label-font-size-large: 14px;
1609
- --wds-button-outline-hover: #d6dcff;
1622
+ --wds-button-outline-hover: transparent;
1623
+ --wds-button-padding-horizontal-extra-large: 24px;
1610
1624
  --wds-button-padding-horizontal-large: 24px;
1611
1625
  --wds-button-padding-horizontal-medium: 20px;
1612
1626
  --wds-button-padding-horizontal-small: 16px;
1613
1627
  --wds-button-padding-horizontal-tiny: 12px;
1628
+ --wds-button-padding-vertical-extra-large: 14px;
1614
1629
  --wds-button-padding-vertical-large: 10px;
1615
1630
  --wds-button-padding-vertical-medium: 8px;
1616
1631
  --wds-button-padding-vertical-small: 6px;
1617
1632
  --wds-button-padding-vertical-tiny: 6px;
1618
- --wds-button-size-large: 48px;
1633
+ --wds-button-size-extra-large: 48px;
1634
+ --wds-button-size-large: 42px;
1619
1635
  --wds-button-size-large-screen-small: 44px;
1620
- --wds-button-size-medium: 42px;
1636
+ --wds-button-size-medium: 38px;
1621
1637
  --wds-button-size-medium-screen-small: 40px;
1622
- --wds-button-size-small: 36px;
1638
+ --wds-button-size-small: 32px;
1623
1639
  --wds-button-size-small-screen-small: 36px;
1624
- --wds-button-size-tiny: 28px;
1640
+ --wds-button-size-tiny: 24px;
1625
1641
  --wds-button-size-tiny-screen-small: 32px;
1626
- --wds-button-size-x-tiny: 24px;
1642
+ --wds-button-size-x-tiny: 20px;
1627
1643
  --wds-button-text-hover: #526cff;
1628
1644
  --wds-button-text-standard-primary: #131720;
1629
1645
  --wds-button-text-standard-primary-hover: #131720;
@@ -1678,7 +1694,7 @@
1678
1694
  --wds-circular-progress-bar-size-medium: 52px;
1679
1695
  --wds-circular-progress-bar-size-small: 24px;
1680
1696
  --wds-circular-progress-bar-size-tiny: 18px;
1681
- --wds-close-button-standard-fill-active: #526cff;
1697
+ --wds-close-button-standard-fill-active: #4a2ae9;
1682
1698
  --wds-close-button-standard-fill-disabled: #e5e5e5;
1683
1699
  --wds-close-button-standard-fill-hover: #bac5ff;
1684
1700
  --wds-close-button-standard-filled-fill: #d6dcff;
@@ -1975,7 +1991,7 @@
1975
1991
  --wds-color-fill-standard-light-secondary-disabled: rgba(255, 255, 255, 0.3000);
1976
1992
  --wds-color-fill-standard-light-secondary-hover: #9aa9ff;
1977
1993
  --wds-color-fill-standard-primary: #526cff;
1978
- --wds-color-fill-standard-primary-active: #526cff;
1994
+ --wds-color-fill-standard-primary-active: #4a2ae9;
1979
1995
  --wds-color-fill-standard-primary-disabled: #bebebe;
1980
1996
  --wds-color-fill-standard-primary-hover: #4c49fb;
1981
1997
  --wds-color-fill-standard-secondary: #eef0ff;
@@ -2178,6 +2194,9 @@
2178
2194
  --wds-custom-modal-header-title-font-size: 14px;
2179
2195
  --wds-divider-fill-color-light-1: #d6dcff;
2180
2196
  --wds-divider-fill-color-light-2: rgba(244, 247, 255, 0.0000);
2197
+ --wds-divider-fill-color-light-primary: rgba(214, 220, 255, 1);
2198
+ --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
2199
+ --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%);
2181
2200
  --wds-dock-background-fill: #eef0ff;
2182
2201
  --wds-dock-background-fill-active: #d6dcff;
2183
2202
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -2347,6 +2366,7 @@
2347
2366
  --wds-internal-thumbnail-illustration-size-small: 51px;
2348
2367
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
2349
2368
  --wds-linear-progress-bar-border-radius: 0;
2369
+ --wds-list-item-action-affix-margin: 6px;
2350
2370
  --wds-list-item-action-border-radius: 8px;
2351
2371
  --wds-list-item-action-label-font-line-height-medium: 20px;
2352
2372
  --wds-list-item-action-label-font-line-height-small: 16px;
@@ -2358,7 +2378,6 @@
2358
2378
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
2359
2379
  --wds-list-item-action-padding-vertical-small: 12px;
2360
2380
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
2361
- --wds-list-item-action-prefix-margin: 6px;
2362
2381
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
2363
2382
  --wds-list-item-action-subtitle-font-size-medium: 12px;
2364
2383
  --wds-list-item-gap-columns: 24px;
@@ -2393,6 +2412,7 @@
2393
2412
  --wds-list-item-select-active-title-disabled: rgba(38, 37, 36, 0.3000);
2394
2413
  --wds-list-item-select-active-title-disabled-screen-small: rgba(38, 37, 36, 0.3000);
2395
2414
  --wds-list-item-select-active-title-screen-small: #526cff;
2415
+ --wds-list-item-select-affix-margin: 6px;
2396
2416
  --wds-list-item-select-border-radius: 8px;
2397
2417
  --wds-list-item-select-fill: #ffffff;
2398
2418
  --wds-list-item-select-fill-active: #eef0ff;
@@ -2416,7 +2436,6 @@
2416
2436
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
2417
2437
  --wds-list-item-select-padding-vertical-small: 12px;
2418
2438
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
2419
- --wds-list-item-select-prefix-margin: 6px;
2420
2439
  --wds-list-item-select-subtitle: #868aa5;
2421
2440
  --wds-list-item-select-subtitle-disabled: rgba(38, 37, 36, 0.3000);
2422
2441
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -2592,7 +2611,7 @@
2592
2611
  --wds-selector-list-item-padding-vertical-small: 4px;
2593
2612
  --wds-shadow-100: 0;
2594
2613
  --wds-shadow-200: 0;
2595
- --wds-shadow-300: 0;
2614
+ --wds-shadow-300: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
2596
2615
  --wds-shadow-400: 0;
2597
2616
  --wds-shadow-blur-50: 4px;
2598
2617
  --wds-shadow-blur-100: 4px;
@@ -2626,10 +2645,10 @@
2626
2645
  --wds-shadow-inner-400-right: -32px 0 24px -24px rgba(38, 37, 36, 0.2000) inset, -8px 0 6px -6px rgba(38, 37, 36, 0.0500) inset;
2627
2646
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(38, 37, 36, 0.2000) inset, 0 8px 6px -6px rgba(38, 37, 36, 0.0500) inset;
2628
2647
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(38, 37, 36, 0.1000) inset, 0 -8px 6px -6px rgba(38, 37, 36, 0.0500) inset, 0 -22px 18px -18px rgba(38, 37, 36, 0.1000) inset, 0 -8px 6px -6px rgba(38, 37, 36, 0.0500) inset;
2629
- --wds-shadow-surface-modal: 0;
2630
- --wds-shadow-surface-overlay: 0;
2631
- --wds-shadow-surface-overlay-dark: 0;
2632
- --wds-shadow-surface-raised: 0;
2648
+ --wds-shadow-surface-modal: 0 10px 10px rgba(38, 37, 36, 0.2000), 0 8px 8px rgba(38, 37, 36, 0.0000);
2649
+ --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
2650
+ --wds-shadow-surface-overlay-dark: 0 10px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
2651
+ --wds-shadow-surface-raised: 0 1px 4px rgba(38, 37, 36, 0.3000), 0 2px 4px rgba(38, 37, 36, 0.0000);
2633
2652
  --wds-shadow-y-100: 1px;
2634
2653
  --wds-shadow-y-200: 2px;
2635
2654
  --wds-shadow-y-300: 10px;
@@ -2725,9 +2744,9 @@
2725
2744
  --wds-skeleton-border-radius-rectangle: 4px;
2726
2745
  --wds-slider-slider-knob-border-width: 5px;
2727
2746
  --wds-slider-slider-knob-border-width-hover: 12px;
2728
- --wds-slider-slider-knob-color: #ffffff;
2729
- --wds-slider-slider-knob-color-hover: #f4f6ff;
2730
- --wds-slider-slider-knob-shadow: true;
2747
+ --wds-slider-slider-knob-color: #526cff;
2748
+ --wds-slider-slider-knob-color-hover: #4c49fb;
2749
+ --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);
2731
2750
  --wds-slider-slider-knob-size: 16px;
2732
2751
  --wds-slider-slider-knob-size-hover: 24px;
2733
2752
  --wds-slider-slider-knob-size-transparent: 16px;
@@ -2758,6 +2777,7 @@
2758
2777
  --wds-space-800: 32px;
2759
2778
  --wds-space-850: 34px;
2760
2779
  --wds-space-900: 36px;
2780
+ --wds-space-950: 38px;
2761
2781
  --wds-space-1000: 40px;
2762
2782
  --wds-space-1050: 42px;
2763
2783
  --wds-space-1100: 44px;
@@ -2810,6 +2830,10 @@
2810
2830
  --wds-tabs-padding-horizontal-small: 12px;
2811
2831
  --wds-tabs-padding-vertical-medium: 16px;
2812
2832
  --wds-tabs-padding-vertical-small: 12px;
2833
+ --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%);
2834
+ --wds-tabs-selection-fill-primary: #526cff;
2835
+ --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0.0000);
2836
+ --wds-tabs-selection-height: 1px;
2813
2837
  --wds-tag-border-radius-large: 4px;
2814
2838
  --wds-tag-border-radius-medium: 4px;
2815
2839
  --wds-tag-border-radius-small: 4px;
@@ -2909,7 +2933,7 @@
2909
2933
  --wds-toggle-switch-width-large: 40px;
2910
2934
  --wds-toggle-switch-width-medium: 32px;
2911
2935
  --wds-toggle-switch-width-small: 24px;
2912
- --wds-tooltip-background-fill: #ffffff;
2936
+ --wds-tooltip-background-fill: #131720;
2913
2937
  --wds-tooltip-border-radius: 8px;
2914
2938
  --wds-tooltip-border-radius-medium: 8px;
2915
2939
  --wds-tooltip-border-radius-small: 8px;
@@ -2917,7 +2941,7 @@
2917
2941
  --wds-tooltip-padding-horizontal-small: 8px;
2918
2942
  --wds-tooltip-padding-vertical-medium: 8px;
2919
2943
  --wds-tooltip-padding-vertical-small: 6px;
2920
- --wds-tooltip-text-fill: #131720;
2944
+ --wds-tooltip-text-fill: #ffffff;
2921
2945
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
2922
2946
  --wds-vertical-tabs-action-padding-horizontal-small: 24px;
2923
2947
  --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
package/wixel/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);
@@ -202,6 +206,9 @@
202
206
  @property st-global(--wds-custom-modal-header-title-font-size);
203
207
  @property st-global(--wds-divider-fill-color-light-1);
204
208
  @property st-global(--wds-divider-fill-color-light-2);
209
+ @property st-global(--wds-divider-fill-color-light-primary);
210
+ @property st-global(--wds-divider-fill-color-light-secondary);
211
+ @property st-global(--wds-divider-gradient-border);
205
212
  @property st-global(--wds-dock-background-fill);
206
213
  @property st-global(--wds-dock-background-fill-active);
207
214
  @property st-global(--wds-dock-background-fill-disabled);
@@ -315,6 +322,7 @@
315
322
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
316
323
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
317
324
  @property st-global(--wds-linear-progress-bar-border-radius);
325
+ @property st-global(--wds-list-item-action-affix-margin);
318
326
  @property st-global(--wds-list-item-action-border-radius);
319
327
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
320
328
  @property st-global(--wds-list-item-action-label-font-line-height-small);
@@ -326,7 +334,6 @@
326
334
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
327
335
  @property st-global(--wds-list-item-action-padding-vertical-small);
328
336
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
329
- @property st-global(--wds-list-item-action-prefix-margin);
330
337
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
331
338
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
332
339
  @property st-global(--wds-list-item-gap-columns);
@@ -361,6 +368,7 @@
361
368
  @property st-global(--wds-list-item-select-active-title-disabled);
362
369
  @property st-global(--wds-list-item-select-active-title-disabled-screen-small);
363
370
  @property st-global(--wds-list-item-select-active-title-screen-small);
371
+ @property st-global(--wds-list-item-select-affix-margin);
364
372
  @property st-global(--wds-list-item-select-border-radius);
365
373
  @property st-global(--wds-list-item-select-fill);
366
374
  @property st-global(--wds-list-item-select-fill-active);
@@ -384,7 +392,6 @@
384
392
  @property st-global(--wds-list-item-select-padding-vertical-medium-screen-small);
385
393
  @property st-global(--wds-list-item-select-padding-vertical-small);
386
394
  @property st-global(--wds-list-item-select-padding-vertical-small-screen-small);
387
- @property st-global(--wds-list-item-select-prefix-margin);
388
395
  @property st-global(--wds-list-item-select-subtitle);
389
396
  @property st-global(--wds-list-item-select-subtitle-disabled);
390
397
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
@@ -695,6 +702,10 @@
695
702
  @property st-global(--wds-tabs-padding-horizontal-small);
696
703
  @property st-global(--wds-tabs-padding-vertical-medium);
697
704
  @property st-global(--wds-tabs-padding-vertical-small);
705
+ @property st-global(--wds-tabs-selection-border);
706
+ @property st-global(--wds-tabs-selection-fill-primary);
707
+ @property st-global(--wds-tabs-selection-fill-secondary);
708
+ @property st-global(--wds-tabs-selection-height);
698
709
  @property st-global(--wds-tag-border-radius-large);
699
710
  @property st-global(--wds-tag-border-radius-medium);
700
711
  @property st-global(--wds-tag-border-radius-small);
@@ -936,8 +947,9 @@
936
947
  --wds-button-border-radius-tiny: 8px;
937
948
  --wds-button-fill-gradient-hover-primary: #4a2ae9;
938
949
  --wds-button-fill-gradient-hover-secondary: #526cff;
950
+ --wds-button-fill-standard-primary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
939
951
  --wds-button-fill-standard-secondary: #ffffff;
940
- --wds-button-fill-standard-secondary-hover: #f4f6ff;
952
+ --wds-button-fill-standard-secondary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
941
953
  --wds-button-font-line-height-large: 20px;
942
954
  --wds-button-font-line-height-medium: 20px;
943
955
  --wds-button-font-line-height-small: 16px;
@@ -956,24 +968,27 @@
956
968
  --wds-button-icon-offset-small: 12px;
957
969
  --wds-button-icon-offset-tiny: 12px;
958
970
  --wds-button-label-font-size-large: 14px;
959
- --wds-button-outline-hover: #d6dcff;
971
+ --wds-button-outline-hover: transparent;
972
+ --wds-button-padding-horizontal-extra-large: 24px;
960
973
  --wds-button-padding-horizontal-large: 24px;
961
974
  --wds-button-padding-horizontal-medium: 20px;
962
975
  --wds-button-padding-horizontal-small: 16px;
963
976
  --wds-button-padding-horizontal-tiny: 12px;
977
+ --wds-button-padding-vertical-extra-large: 14px;
964
978
  --wds-button-padding-vertical-large: 10px;
965
979
  --wds-button-padding-vertical-medium: 8px;
966
980
  --wds-button-padding-vertical-small: 6px;
967
981
  --wds-button-padding-vertical-tiny: 6px;
968
- --wds-button-size-large: 48px;
982
+ --wds-button-size-extra-large: 48px;
983
+ --wds-button-size-large: 42px;
969
984
  --wds-button-size-large-screen-small: 44px;
970
- --wds-button-size-medium: 42px;
985
+ --wds-button-size-medium: 38px;
971
986
  --wds-button-size-medium-screen-small: 40px;
972
- --wds-button-size-small: 36px;
987
+ --wds-button-size-small: 32px;
973
988
  --wds-button-size-small-screen-small: 36px;
974
- --wds-button-size-tiny: 28px;
989
+ --wds-button-size-tiny: 24px;
975
990
  --wds-button-size-tiny-screen-small: 32px;
976
- --wds-button-size-x-tiny: 24px;
991
+ --wds-button-size-x-tiny: 20px;
977
992
  --wds-button-text-hover: #526cff;
978
993
  --wds-button-text-standard-primary: #131720;
979
994
  --wds-button-text-standard-primary-hover: #131720;
@@ -1028,7 +1043,7 @@
1028
1043
  --wds-circular-progress-bar-size-medium: 52px;
1029
1044
  --wds-circular-progress-bar-size-small: 24px;
1030
1045
  --wds-circular-progress-bar-size-tiny: 18px;
1031
- --wds-close-button-standard-fill-active: #526cff;
1046
+ --wds-close-button-standard-fill-active: #4a2ae9;
1032
1047
  --wds-close-button-standard-fill-disabled: #e5e5e5;
1033
1048
  --wds-close-button-standard-fill-hover: #bac5ff;
1034
1049
  --wds-close-button-standard-filled-fill: #d6dcff;
@@ -1081,6 +1096,9 @@
1081
1096
  --wds-custom-modal-header-title-font-size: 14px;
1082
1097
  --wds-divider-fill-color-light-1: #d6dcff;
1083
1098
  --wds-divider-fill-color-light-2: rgba(244, 247, 255, 0.0000);
1099
+ --wds-divider-fill-color-light-primary: rgba(214, 220, 255, 1);
1100
+ --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
1101
+ --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%);
1084
1102
  --wds-dock-background-fill: #eef0ff;
1085
1103
  --wds-dock-background-fill-active: #d6dcff;
1086
1104
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -1194,6 +1212,7 @@
1194
1212
  --wds-internal-thumbnail-illustration-size-small: 51px;
1195
1213
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1196
1214
  --wds-linear-progress-bar-border-radius: 0;
1215
+ --wds-list-item-action-affix-margin: 6px;
1197
1216
  --wds-list-item-action-border-radius: 8px;
1198
1217
  --wds-list-item-action-label-font-line-height-medium: 20px;
1199
1218
  --wds-list-item-action-label-font-line-height-small: 16px;
@@ -1205,7 +1224,6 @@
1205
1224
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
1206
1225
  --wds-list-item-action-padding-vertical-small: 12px;
1207
1226
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
1208
- --wds-list-item-action-prefix-margin: 6px;
1209
1227
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
1210
1228
  --wds-list-item-action-subtitle-font-size-medium: 12px;
1211
1229
  --wds-list-item-gap-columns: 24px;
@@ -1240,6 +1258,7 @@
1240
1258
  --wds-list-item-select-active-title-disabled: rgba(38, 37, 36, 0.3000);
1241
1259
  --wds-list-item-select-active-title-disabled-screen-small: rgba(38, 37, 36, 0.3000);
1242
1260
  --wds-list-item-select-active-title-screen-small: #526cff;
1261
+ --wds-list-item-select-affix-margin: 6px;
1243
1262
  --wds-list-item-select-border-radius: 8px;
1244
1263
  --wds-list-item-select-fill: #ffffff;
1245
1264
  --wds-list-item-select-fill-active: #eef0ff;
@@ -1263,7 +1282,6 @@
1263
1282
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
1264
1283
  --wds-list-item-select-padding-vertical-small: 12px;
1265
1284
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
1266
- --wds-list-item-select-prefix-margin: 6px;
1267
1285
  --wds-list-item-select-subtitle: #868aa5;
1268
1286
  --wds-list-item-select-subtitle-disabled: rgba(38, 37, 36, 0.3000);
1269
1287
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -1528,9 +1546,9 @@
1528
1546
  --wds-skeleton-border-radius-rectangle: 4px;
1529
1547
  --wds-slider-slider-knob-border-width: 5px;
1530
1548
  --wds-slider-slider-knob-border-width-hover: 12px;
1531
- --wds-slider-slider-knob-color: #ffffff;
1532
- --wds-slider-slider-knob-color-hover: #f4f6ff;
1533
- --wds-slider-slider-knob-shadow: true;
1549
+ --wds-slider-slider-knob-color: #526cff;
1550
+ --wds-slider-slider-knob-color-hover: #4c49fb;
1551
+ --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);
1534
1552
  --wds-slider-slider-knob-size: 16px;
1535
1553
  --wds-slider-slider-knob-size-hover: 24px;
1536
1554
  --wds-slider-slider-knob-size-transparent: 16px;
@@ -1574,6 +1592,10 @@
1574
1592
  --wds-tabs-padding-horizontal-small: 12px;
1575
1593
  --wds-tabs-padding-vertical-medium: 16px;
1576
1594
  --wds-tabs-padding-vertical-small: 12px;
1595
+ --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%);
1596
+ --wds-tabs-selection-fill-primary: #526cff;
1597
+ --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0.0000);
1598
+ --wds-tabs-selection-height: 1px;
1577
1599
  --wds-tag-border-radius-large: 4px;
1578
1600
  --wds-tag-border-radius-medium: 4px;
1579
1601
  --wds-tag-border-radius-small: 4px;
@@ -1673,7 +1695,7 @@
1673
1695
  --wds-toggle-switch-width-large: 40px;
1674
1696
  --wds-toggle-switch-width-medium: 32px;
1675
1697
  --wds-toggle-switch-width-small: 24px;
1676
- --wds-tooltip-background-fill: #ffffff;
1698
+ --wds-tooltip-background-fill: #131720;
1677
1699
  --wds-tooltip-border-radius: 8px;
1678
1700
  --wds-tooltip-border-radius-medium: 8px;
1679
1701
  --wds-tooltip-border-radius-small: 8px;
@@ -1681,7 +1703,7 @@
1681
1703
  --wds-tooltip-padding-horizontal-small: 8px;
1682
1704
  --wds-tooltip-padding-vertical-medium: 8px;
1683
1705
  --wds-tooltip-padding-vertical-small: 6px;
1684
- --wds-tooltip-text-fill: #131720;
1706
+ --wds-tooltip-text-fill: #ffffff;
1685
1707
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
1686
1708
  --wds-vertical-tabs-action-padding-horizontal-small: 24px;
1687
1709
  --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
package/wixel/foundation.st.css CHANGED
@@ -186,6 +186,7 @@
186
186
  @property st-global(--wds-space-800);
187
187
  @property st-global(--wds-space-850);
188
188
  @property st-global(--wds-space-900);
189
+ @property st-global(--wds-space-950);
189
190
  @property st-global(--wds-space-1000);
190
191
  @property st-global(--wds-space-1050);
191
192
  @property st-global(--wds-space-1100);
@@ -342,7 +343,7 @@
342
343
  --wds-font-weight-semi-bold: 600;
343
344
  --wds-shadow-100: 0;
344
345
  --wds-shadow-200: 0;
345
- --wds-shadow-300: 0;
346
+ --wds-shadow-300: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
346
347
  --wds-shadow-400: 0;
347
348
  --wds-shadow-blur-50: 4px;
348
349
  --wds-shadow-blur-100: 4px;
@@ -386,6 +387,7 @@
386
387
  --wds-space-800: 32px;
387
388
  --wds-space-850: 34px;
388
389
  --wds-space-900: 36px;
390
+ --wds-space-950: 38px;
389
391
  --wds-space-1000: 40px;
390
392
  --wds-space-1050: 42px;
391
393
  --wds-space-1100: 44px;
package/wixel/semantic.st.css CHANGED
@@ -681,7 +681,7 @@
681
681
  --wds-color-fill-standard-light-secondary-disabled: rgba(255, 255, 255, 0.3000);
682
682
  --wds-color-fill-standard-light-secondary-hover: #9aa9ff;
683
683
  --wds-color-fill-standard-primary: #526cff;
684
- --wds-color-fill-standard-primary-active: #526cff;
684
+ --wds-color-fill-standard-primary-active: #4a2ae9;
685
685
  --wds-color-fill-standard-primary-disabled: #bebebe;
686
686
  --wds-color-fill-standard-primary-hover: #4c49fb;
687
687
  --wds-color-fill-standard-secondary: #eef0ff;
@@ -824,10 +824,10 @@
824
824
  --wds-shadow-focus-spread: 0;
825
825
  --wds-shadow-focus-standard: #bac5ff;
826
826
  --wds-shadow-focus-warning: #fdead2;
827
- --wds-shadow-surface-modal: 0;
828
- --wds-shadow-surface-overlay: 0;
829
- --wds-shadow-surface-overlay-dark: 0;
830
- --wds-shadow-surface-raised: 0;
827
+ --wds-shadow-surface-modal: 0 10px 10px rgba(38, 37, 36, 0.2000), 0 8px 8px rgba(38, 37, 36, 0.0000);
828
+ --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
829
+ --wds-shadow-surface-overlay-dark: 0 10px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
830
+ --wds-shadow-surface-raised: 0 1px 4px rgba(38, 37, 36, 0.3000), 0 2px 4px rgba(38, 37, 36, 0.0000);
831
831
  --wds-space-padding-horizontal-large: 24px;
832
832
  --wds-space-padding-horizontal-medium: 20px;
833
833
  --wds-space-padding-horizontal-small: 16px;