@wix/design-system-tokens 1.118.1 → 1.119.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 (12) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/all.css +21 -7
  3. package/all.st.css +42 -14
  4. package/component.st.css +42 -14
  5. package/package.json +2 -2
  6. package/studio/all.css +25 -11
  7. package/studio/all.st.css +49 -21
  8. package/studio/component.st.css +43 -15
  9. package/studio/semantic.st.css +6 -6
  10. package/wixel/all.css +21 -7
  11. package/wixel/all.st.css +42 -14
  12. package/wixel/component.st.css +42 -14
package/CHANGELOG.md CHANGED
@@ -1,3 +1,14 @@
1
+ ## 1.119.0 - 2025-07-15
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(Card): tokenization [15062](https://github.com/wix-private/wix-design-systems/pull/15062)
6
+ - breaking(Stepper): tokenization [15056](https://github.com/wix-private/wix-design-systems/pull/15056)
7
+
8
+ ### Bug Fixes
9
+
10
+ - fix(tokens): set conventional primary states for `ai` border color [15083](https://github.com/wix-private/wix-design-systems/pull/15083)
11
+
1
12
  ## 1.118.0 - 2025-07-03
2
13
 
3
14
  ### Features
package/all.css CHANGED
@@ -992,6 +992,7 @@
992
992
  --wds-list-item-select-icon-padding-vertical-medium: var(--wds-space-100);
993
993
  --wds-list-item-select-icon-padding-horizontal-small: var(--wds-space-200);
994
994
  --wds-list-item-select-icon-padding-horizontal-medium: var(--wds-space-200);
995
+ --wds-list-item-select-suffix-active-font-weight: var(--wds-font-weight-regular);
995
996
  --wds-list-item-select-padding-vertical-small-screen-small: var(--wds-space-200);
996
997
  --wds-list-item-select-padding-vertical-small: var(--wds-space-100);
997
998
  --wds-list-item-select-padding-vertical-medium-screen-small: var(--wds-space-200);
@@ -1002,9 +1003,13 @@
1002
1003
  --wds-list-item-select-padding-left-medium: var(--wds-space-300);
1003
1004
  --wds-list-item-select-padding-horizontal-small: var(--wds-space-300);
1004
1005
  --wds-list-item-select-padding-horizontal-medium: var(--wds-space-300);
1006
+ --wds-list-item-select-label-font-weight-small: var(--wds-font-weight-regular);
1007
+ --wds-list-item-select-label-font-weight-medium: var(--wds-font-weight-regular);
1005
1008
  --wds-list-item-select-border-radius: var(--wds-border-radius-0);
1006
1009
  --wds-list-item-select-affix-margin: var(--wds-space-100);
1007
1010
  --wds-list-item-section-padding-horizontal: var(--wds-space-400);
1011
+ --wds-list-item-action-title-font-weight-active: var(--wds-font-weight-regular);
1012
+ --wds-list-item-action-title-font-weight: var(--wds-font-weight-regular);
1008
1013
  --wds-list-item-action-padding-vertical-small-screen-small: var(--wds-space-200);
1009
1014
  --wds-list-item-action-padding-vertical-small: var(--wds-space-100);
1010
1015
  --wds-list-item-action-padding-vertical-medium-screen-small: var(--wds-space-200);
@@ -1012,7 +1017,8 @@
1012
1017
  --wds-list-item-action-padding-horizontal-small: var(--wds-space-300);
1013
1018
  --wds-list-item-action-padding-horizontal-medium: var(--wds-space-300);
1014
1019
  --wds-list-item-action-border-radius: var(--wds-border-radius-0);
1015
- --wds-list-item-action-affix-margin: var(--wds-space-100);
1020
+ --wds-list-item-action-affix-margin-small: var(--wds-space-100);
1021
+ --wds-list-item-action-affix-margin-medium: var(--wds-space-100);
1016
1022
  --wds-list-item-padding-vertical-xx-tiny: var(--wds-space-50);
1017
1023
  --wds-list-item-padding-vertical-x-tiny: var(--wds-space-100);
1018
1024
  --wds-list-item-padding-vertical-tiny: var(--wds-space-200);
@@ -1151,10 +1157,10 @@
1151
1157
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1152
1158
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
1153
1159
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-300);
1154
- --wds-card-header-paddings-vertical: var(--wds-space-300);
1155
- --wds-card-header-paddings-horizontal: var(--wds-space-400);
1156
- --wds-card-content-paddings-vertical: var(--wds-space-400);
1157
- --wds-card-content-paddings-horizontal: var(--wds-space-400);
1160
+ --wds-card-header-padding-vertical: var(--wds-space-300);
1161
+ --wds-card-header-padding-horizontal: var(--wds-space-400);
1162
+ --wds-card-content-padding-medium: var(--wds-space-400);
1163
+ --wds-card-content-padding-large: var(--wds-space-600);
1158
1164
  --wds-card-border: var(--wds-border-radius-400);
1159
1165
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1160
1166
  --wds-button-text-standard-primary: var(--wds-color-black-100);
@@ -1223,6 +1229,9 @@
1223
1229
  --wds-add-item-border-radius: var(--wds-border-radius-400);
1224
1230
  --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
1225
1231
  --wds-accordion-title-font-weight: var(--wds-font-weight-medium);
1232
+ --wds-accordion-inner-content-padding-top: var(--wds-space-250);
1233
+ --wds-accordion-inner-content-fill: var(--wds-color-blue-600);
1234
+ --wds-accordion-border-radius: var(--wds-border-radius-0);
1226
1235
  --wds-shadow-surface-raised: var(--wds-shadow-200);
1227
1236
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1228
1237
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
@@ -1393,8 +1402,11 @@
1393
1402
  --wds-loader-fill-light: var(--wds-color-fill-light-primary);
1394
1403
  --wds-loader-fill-error: var(--wds-color-fill-destructive-primary);
1395
1404
  --wds-loader-fill: var(--wds-color-fill-standard-secondary);
1405
+ --wds-list-item-select-title-pressed: var(--wds-color-text-standard-primary);
1396
1406
  --wds-list-item-select-title-disabled: var(--wds-color-text-disabled);
1397
1407
  --wds-list-item-select-title: var(--wds-color-text-standard-primary);
1408
+ --wds-list-item-select-suffix-pressed: var(--wds-color-text-placeholder);
1409
+ --wds-list-item-select-suffix: var(--wds-color-text-placeholder);
1398
1410
  --wds-list-item-select-subtitle-font-size-medium: var(--wds-font-size-body-small);
1399
1411
  --wds-list-item-select-subtitle-disabled: var(--wds-color-text-disabled);
1400
1412
  --wds-list-item-select-subtitle: var(--wds-color-text-placeholder);
@@ -1420,7 +1432,9 @@
1420
1432
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-primary);
1421
1433
  --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1422
1434
  --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1423
- --wds-list-item-action-subtitle-font-size-medium: var(--wds-font-size-body-small);
1435
+ --wds-list-item-action-suffix-fill-active: var(--wds-color-text-placeholder);
1436
+ --wds-list-item-action-suffix-fill: var(--wds-color-text-placeholder);
1437
+ --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-small);
1424
1438
  --wds-list-item-action-subtitle-fill-active: var(--wds-color-text-placeholder);
1425
1439
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-small);
1426
1440
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-medium);
@@ -1562,7 +1576,7 @@
1562
1576
  --wds-list-item-select-label-font-line-height-small: var(--wds-font-line-height-body-small);
1563
1577
  --wds-list-item-select-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1564
1578
  --wds-list-item-section-line-height: var(--wds-font-line-height-body-small);
1565
- --wds-list-item-action-subtitle-font-line-height-medium: var(--wds-font-line-height-body-small);
1579
+ --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-small);
1566
1580
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-small);
1567
1581
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1568
1582
  --wds-input-value-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/all.st.css CHANGED
@@ -1,7 +1,10 @@
1
1
  @property st-global(--wds-accordion-background-fill-light);
2
2
  @property st-global(--wds-accordion-background-fill-light-hover);
3
+ @property st-global(--wds-accordion-border-radius);
3
4
  @property st-global(--wds-accordion-caret-fill);
4
5
  @property st-global(--wds-accordion-caret-fill-hover);
6
+ @property st-global(--wds-accordion-inner-content-fill);
7
+ @property st-global(--wds-accordion-inner-content-padding-top);
5
8
  @property st-global(--wds-accordion-title-fill);
6
9
  @property st-global(--wds-accordion-title-fill-hover);
7
10
  @property st-global(--wds-accordion-title-font-line-height-medium);
@@ -138,8 +141,8 @@
138
141
  @property st-global(--wds-button-text-standard-primary);
139
142
  @property st-global(--wds-button-text-standard-primary-hover);
140
143
  @property st-global(--wds-card-border);
141
- @property st-global(--wds-card-content-paddings-horizontal);
142
- @property st-global(--wds-card-content-paddings-vertical);
144
+ @property st-global(--wds-card-content-padding-large);
145
+ @property st-global(--wds-card-content-padding-medium);
143
146
  @property st-global(--wds-card-gallery-item-border-radius-0);
144
147
  @property st-global(--wds-card-gallery-item-border-radius-100);
145
148
  @property st-global(--wds-card-gallery-item-content-margin-vertical);
@@ -152,8 +155,8 @@
152
155
  @property st-global(--wds-card-gallery-item-padding-vertical-medium);
153
156
  @property st-global(--wds-card-gallery-item-padding-vertical-small);
154
157
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
155
- @property st-global(--wds-card-header-paddings-horizontal);
156
- @property st-global(--wds-card-header-paddings-vertical);
158
+ @property st-global(--wds-card-header-padding-horizontal);
159
+ @property st-global(--wds-card-header-padding-vertical);
157
160
  @property st-global(--wds-card-tab-padding-horizontal-medium);
158
161
  @property st-global(--wds-card-tab-padding-horizontal-small);
159
162
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -890,7 +893,8 @@
890
893
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
891
894
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
892
895
  @property st-global(--wds-linear-progress-bar-border-radius);
893
- @property st-global(--wds-list-item-action-affix-margin);
896
+ @property st-global(--wds-list-item-action-affix-margin-medium);
897
+ @property st-global(--wds-list-item-action-affix-margin-small);
894
898
  @property st-global(--wds-list-item-action-border-radius);
895
899
  @property st-global(--wds-list-item-action-fill);
896
900
  @property st-global(--wds-list-item-action-fill-active);
@@ -907,8 +911,12 @@
907
911
  @property st-global(--wds-list-item-action-padding-vertical-small);
908
912
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
909
913
  @property st-global(--wds-list-item-action-subtitle-fill-active);
910
- @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
911
- @property st-global(--wds-list-item-action-subtitle-font-size-medium);
914
+ @property st-global(--wds-list-item-action-subtitle-font-line-height);
915
+ @property st-global(--wds-list-item-action-subtitle-font-size);
916
+ @property st-global(--wds-list-item-action-suffix-fill);
917
+ @property st-global(--wds-list-item-action-suffix-fill-active);
918
+ @property st-global(--wds-list-item-action-title-font-weight);
919
+ @property st-global(--wds-list-item-action-title-font-weight-active);
912
920
  @property st-global(--wds-list-item-gap-columns);
913
921
  @property st-global(--wds-list-item-indentation-level-2);
914
922
  @property st-global(--wds-list-item-indentation-level-3);
@@ -956,6 +964,8 @@
956
964
  @property st-global(--wds-list-item-select-label-font-line-height-small);
957
965
  @property st-global(--wds-list-item-select-label-font-size-medium);
958
966
  @property st-global(--wds-list-item-select-label-font-size-small);
967
+ @property st-global(--wds-list-item-select-label-font-weight-medium);
968
+ @property st-global(--wds-list-item-select-label-font-weight-small);
959
969
  @property st-global(--wds-list-item-select-padding-horizontal-medium);
960
970
  @property st-global(--wds-list-item-select-padding-horizontal-small);
961
971
  @property st-global(--wds-list-item-select-padding-left-medium);
@@ -970,8 +980,12 @@
970
980
  @property st-global(--wds-list-item-select-subtitle-disabled);
971
981
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
972
982
  @property st-global(--wds-list-item-select-subtitle-font-size-medium);
983
+ @property st-global(--wds-list-item-select-suffix);
984
+ @property st-global(--wds-list-item-select-suffix-active-font-weight);
985
+ @property st-global(--wds-list-item-select-suffix-pressed);
973
986
  @property st-global(--wds-list-item-select-title);
974
987
  @property st-global(--wds-list-item-select-title-disabled);
988
+ @property st-global(--wds-list-item-select-title-pressed);
975
989
  @property st-global(--wds-loader-fill);
976
990
  @property st-global(--wds-loader-fill-error);
977
991
  @property st-global(--wds-loader-fill-light);
@@ -1591,8 +1605,11 @@
1591
1605
  .root {
1592
1606
  --wds-accordion-background-fill-light: #ffffff;
1593
1607
  --wds-accordion-background-fill-light-hover: #e7f0ff;
1608
+ --wds-accordion-border-radius: 0;
1594
1609
  --wds-accordion-caret-fill: #44485f;
1595
1610
  --wds-accordion-caret-fill-hover: #44485f;
1611
+ --wds-accordion-inner-content-fill: #f4f7ff;
1612
+ --wds-accordion-inner-content-padding-top: 15px;
1596
1613
  --wds-accordion-title-fill: #000624;
1597
1614
  --wds-accordion-title-fill-hover: #000624;
1598
1615
  --wds-accordion-title-font-line-height-medium: 24px;
@@ -1729,8 +1746,8 @@
1729
1746
  --wds-button-text-standard-primary: #000624;
1730
1747
  --wds-button-text-standard-primary-hover: #000624;
1731
1748
  --wds-card-border: 8px;
1732
- --wds-card-content-paddings-horizontal: 24px;
1733
- --wds-card-content-paddings-vertical: 24px;
1749
+ --wds-card-content-padding-large: 36px;
1750
+ --wds-card-content-padding-medium: 24px;
1734
1751
  --wds-card-gallery-item-border-radius-0: 0;
1735
1752
  --wds-card-gallery-item-border-radius-100: 8px;
1736
1753
  --wds-card-gallery-item-content-margin-vertical: 0;
@@ -1743,8 +1760,8 @@
1743
1760
  --wds-card-gallery-item-padding-vertical-medium: 18px;
1744
1761
  --wds-card-gallery-item-padding-vertical-small: 12px;
1745
1762
  --wds-card-gallery-item-title-font-size-medium: 18px;
1746
- --wds-card-header-paddings-horizontal: 24px;
1747
- --wds-card-header-paddings-vertical: 18px;
1763
+ --wds-card-header-padding-horizontal: 24px;
1764
+ --wds-card-header-padding-vertical: 18px;
1748
1765
  --wds-card-tab-padding-horizontal-medium: 18px;
1749
1766
  --wds-card-tab-padding-horizontal-small: 18px;
1750
1767
  --wds-card-tab-padding-vertical-medium: 18px;
@@ -2481,7 +2498,8 @@
2481
2498
  --wds-internal-thumbnail-illustration-size-small: 51px;
2482
2499
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
2483
2500
  --wds-linear-progress-bar-border-radius: 1000px;
2484
- --wds-list-item-action-affix-margin: 6px;
2501
+ --wds-list-item-action-affix-margin-medium: 6px;
2502
+ --wds-list-item-action-affix-margin-small: 6px;
2485
2503
  --wds-list-item-action-border-radius: 0;
2486
2504
  --wds-list-item-action-fill: #ffffff;
2487
2505
  --wds-list-item-action-fill-active: #d6e6fe;
@@ -2498,8 +2516,12 @@
2498
2516
  --wds-list-item-action-padding-vertical-small: 6px;
2499
2517
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
2500
2518
  --wds-list-item-action-subtitle-fill-active: #868aa5;
2501
- --wds-list-item-action-subtitle-font-line-height-medium: 18px;
2502
- --wds-list-item-action-subtitle-font-size-medium: 14px;
2519
+ --wds-list-item-action-subtitle-font-line-height: 18px;
2520
+ --wds-list-item-action-subtitle-font-size: 14px;
2521
+ --wds-list-item-action-suffix-fill: #868aa5;
2522
+ --wds-list-item-action-suffix-fill-active: #868aa5;
2523
+ --wds-list-item-action-title-font-weight: 400;
2524
+ --wds-list-item-action-title-font-weight-active: 400;
2503
2525
  --wds-list-item-gap-columns: 24px;
2504
2526
  --wds-list-item-indentation-level-2: 12px;
2505
2527
  --wds-list-item-indentation-level-3: 30px;
@@ -2547,6 +2569,8 @@
2547
2569
  --wds-list-item-select-label-font-line-height-small: 18px;
2548
2570
  --wds-list-item-select-label-font-size-medium: 16px;
2549
2571
  --wds-list-item-select-label-font-size-small: 14px;
2572
+ --wds-list-item-select-label-font-weight-medium: 400;
2573
+ --wds-list-item-select-label-font-weight-small: 400;
2550
2574
  --wds-list-item-select-padding-horizontal-medium: 18px;
2551
2575
  --wds-list-item-select-padding-horizontal-small: 18px;
2552
2576
  --wds-list-item-select-padding-left-medium: 18px;
@@ -2561,8 +2585,12 @@
2561
2585
  --wds-list-item-select-subtitle-disabled: rgba(0, 6, 36, .3);
2562
2586
  --wds-list-item-select-subtitle-font-line-height-medium: 18px;
2563
2587
  --wds-list-item-select-subtitle-font-size-medium: 14px;
2588
+ --wds-list-item-select-suffix: #868aa5;
2589
+ --wds-list-item-select-suffix-active-font-weight: 400;
2590
+ --wds-list-item-select-suffix-pressed: #868aa5;
2564
2591
  --wds-list-item-select-title: #000624;
2565
2592
  --wds-list-item-select-title-disabled: rgba(0, 6, 36, .3);
2593
+ --wds-list-item-select-title-pressed: #000624;
2566
2594
  --wds-loader-fill: #d6e6fe;
2567
2595
  --wds-loader-fill-error: #e62214;
2568
2596
  --wds-loader-fill-light: #ffffff;
package/component.st.css CHANGED
@@ -1,7 +1,10 @@
1
1
  @property st-global(--wds-accordion-background-fill-light);
2
2
  @property st-global(--wds-accordion-background-fill-light-hover);
3
+ @property st-global(--wds-accordion-border-radius);
3
4
  @property st-global(--wds-accordion-caret-fill);
4
5
  @property st-global(--wds-accordion-caret-fill-hover);
6
+ @property st-global(--wds-accordion-inner-content-fill);
7
+ @property st-global(--wds-accordion-inner-content-padding-top);
5
8
  @property st-global(--wds-accordion-title-fill);
6
9
  @property st-global(--wds-accordion-title-fill-hover);
7
10
  @property st-global(--wds-accordion-title-font-line-height-medium);
@@ -107,8 +110,8 @@
107
110
  @property st-global(--wds-button-text-standard-primary);
108
111
  @property st-global(--wds-button-text-standard-primary-hover);
109
112
  @property st-global(--wds-card-border);
110
- @property st-global(--wds-card-content-paddings-horizontal);
111
- @property st-global(--wds-card-content-paddings-vertical);
113
+ @property st-global(--wds-card-content-padding-large);
114
+ @property st-global(--wds-card-content-padding-medium);
112
115
  @property st-global(--wds-card-gallery-item-border-radius-0);
113
116
  @property st-global(--wds-card-gallery-item-border-radius-100);
114
117
  @property st-global(--wds-card-gallery-item-content-margin-vertical);
@@ -121,8 +124,8 @@
121
124
  @property st-global(--wds-card-gallery-item-padding-vertical-medium);
122
125
  @property st-global(--wds-card-gallery-item-padding-vertical-small);
123
126
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
124
- @property st-global(--wds-card-header-paddings-horizontal);
125
- @property st-global(--wds-card-header-paddings-vertical);
127
+ @property st-global(--wds-card-header-padding-horizontal);
128
+ @property st-global(--wds-card-header-padding-vertical);
126
129
  @property st-global(--wds-card-tab-padding-horizontal-medium);
127
130
  @property st-global(--wds-card-tab-padding-horizontal-small);
128
131
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -355,7 +358,8 @@
355
358
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
356
359
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
357
360
  @property st-global(--wds-linear-progress-bar-border-radius);
358
- @property st-global(--wds-list-item-action-affix-margin);
361
+ @property st-global(--wds-list-item-action-affix-margin-medium);
362
+ @property st-global(--wds-list-item-action-affix-margin-small);
359
363
  @property st-global(--wds-list-item-action-border-radius);
360
364
  @property st-global(--wds-list-item-action-fill);
361
365
  @property st-global(--wds-list-item-action-fill-active);
@@ -372,8 +376,12 @@
372
376
  @property st-global(--wds-list-item-action-padding-vertical-small);
373
377
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
374
378
  @property st-global(--wds-list-item-action-subtitle-fill-active);
375
- @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
376
- @property st-global(--wds-list-item-action-subtitle-font-size-medium);
379
+ @property st-global(--wds-list-item-action-subtitle-font-line-height);
380
+ @property st-global(--wds-list-item-action-subtitle-font-size);
381
+ @property st-global(--wds-list-item-action-suffix-fill);
382
+ @property st-global(--wds-list-item-action-suffix-fill-active);
383
+ @property st-global(--wds-list-item-action-title-font-weight);
384
+ @property st-global(--wds-list-item-action-title-font-weight-active);
377
385
  @property st-global(--wds-list-item-gap-columns);
378
386
  @property st-global(--wds-list-item-indentation-level-2);
379
387
  @property st-global(--wds-list-item-indentation-level-3);
@@ -421,6 +429,8 @@
421
429
  @property st-global(--wds-list-item-select-label-font-line-height-small);
422
430
  @property st-global(--wds-list-item-select-label-font-size-medium);
423
431
  @property st-global(--wds-list-item-select-label-font-size-small);
432
+ @property st-global(--wds-list-item-select-label-font-weight-medium);
433
+ @property st-global(--wds-list-item-select-label-font-weight-small);
424
434
  @property st-global(--wds-list-item-select-padding-horizontal-medium);
425
435
  @property st-global(--wds-list-item-select-padding-horizontal-small);
426
436
  @property st-global(--wds-list-item-select-padding-left-medium);
@@ -435,8 +445,12 @@
435
445
  @property st-global(--wds-list-item-select-subtitle-disabled);
436
446
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
437
447
  @property st-global(--wds-list-item-select-subtitle-font-size-medium);
448
+ @property st-global(--wds-list-item-select-suffix);
449
+ @property st-global(--wds-list-item-select-suffix-active-font-weight);
450
+ @property st-global(--wds-list-item-select-suffix-pressed);
438
451
  @property st-global(--wds-list-item-select-title);
439
452
  @property st-global(--wds-list-item-select-title-disabled);
453
+ @property st-global(--wds-list-item-select-title-pressed);
440
454
  @property st-global(--wds-loader-fill);
441
455
  @property st-global(--wds-loader-fill-error);
442
456
  @property st-global(--wds-loader-fill-light);
@@ -962,8 +976,11 @@
962
976
  .root {
963
977
  --wds-accordion-background-fill-light: #ffffff;
964
978
  --wds-accordion-background-fill-light-hover: #e7f0ff;
979
+ --wds-accordion-border-radius: 0;
965
980
  --wds-accordion-caret-fill: #44485f;
966
981
  --wds-accordion-caret-fill-hover: #44485f;
982
+ --wds-accordion-inner-content-fill: #f4f7ff;
983
+ --wds-accordion-inner-content-padding-top: 15px;
967
984
  --wds-accordion-title-fill: #000624;
968
985
  --wds-accordion-title-fill-hover: #000624;
969
986
  --wds-accordion-title-font-line-height-medium: 24px;
@@ -1069,8 +1086,8 @@
1069
1086
  --wds-button-text-standard-primary: #000624;
1070
1087
  --wds-button-text-standard-primary-hover: #000624;
1071
1088
  --wds-card-border: 8px;
1072
- --wds-card-content-paddings-horizontal: 24px;
1073
- --wds-card-content-paddings-vertical: 24px;
1089
+ --wds-card-content-padding-large: 36px;
1090
+ --wds-card-content-padding-medium: 24px;
1074
1091
  --wds-card-gallery-item-border-radius-0: 0;
1075
1092
  --wds-card-gallery-item-border-radius-100: 8px;
1076
1093
  --wds-card-gallery-item-content-margin-vertical: 0;
@@ -1083,8 +1100,8 @@
1083
1100
  --wds-card-gallery-item-padding-vertical-medium: 18px;
1084
1101
  --wds-card-gallery-item-padding-vertical-small: 12px;
1085
1102
  --wds-card-gallery-item-title-font-size-medium: 18px;
1086
- --wds-card-header-paddings-horizontal: 24px;
1087
- --wds-card-header-paddings-vertical: 18px;
1103
+ --wds-card-header-padding-horizontal: 24px;
1104
+ --wds-card-header-padding-vertical: 18px;
1088
1105
  --wds-card-tab-padding-horizontal-medium: 18px;
1089
1106
  --wds-card-tab-padding-horizontal-small: 18px;
1090
1107
  --wds-card-tab-padding-vertical-medium: 18px;
@@ -1317,7 +1334,8 @@
1317
1334
  --wds-internal-thumbnail-illustration-size-small: 51px;
1318
1335
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1319
1336
  --wds-linear-progress-bar-border-radius: 1000px;
1320
- --wds-list-item-action-affix-margin: 6px;
1337
+ --wds-list-item-action-affix-margin-medium: 6px;
1338
+ --wds-list-item-action-affix-margin-small: 6px;
1321
1339
  --wds-list-item-action-border-radius: 0;
1322
1340
  --wds-list-item-action-fill: #ffffff;
1323
1341
  --wds-list-item-action-fill-active: #d6e6fe;
@@ -1334,8 +1352,12 @@
1334
1352
  --wds-list-item-action-padding-vertical-small: 6px;
1335
1353
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
1336
1354
  --wds-list-item-action-subtitle-fill-active: #868aa5;
1337
- --wds-list-item-action-subtitle-font-line-height-medium: 18px;
1338
- --wds-list-item-action-subtitle-font-size-medium: 14px;
1355
+ --wds-list-item-action-subtitle-font-line-height: 18px;
1356
+ --wds-list-item-action-subtitle-font-size: 14px;
1357
+ --wds-list-item-action-suffix-fill: #868aa5;
1358
+ --wds-list-item-action-suffix-fill-active: #868aa5;
1359
+ --wds-list-item-action-title-font-weight: 400;
1360
+ --wds-list-item-action-title-font-weight-active: 400;
1339
1361
  --wds-list-item-gap-columns: 24px;
1340
1362
  --wds-list-item-indentation-level-2: 12px;
1341
1363
  --wds-list-item-indentation-level-3: 30px;
@@ -1383,6 +1405,8 @@
1383
1405
  --wds-list-item-select-label-font-line-height-small: 18px;
1384
1406
  --wds-list-item-select-label-font-size-medium: 16px;
1385
1407
  --wds-list-item-select-label-font-size-small: 14px;
1408
+ --wds-list-item-select-label-font-weight-medium: 400;
1409
+ --wds-list-item-select-label-font-weight-small: 400;
1386
1410
  --wds-list-item-select-padding-horizontal-medium: 18px;
1387
1411
  --wds-list-item-select-padding-horizontal-small: 18px;
1388
1412
  --wds-list-item-select-padding-left-medium: 18px;
@@ -1397,8 +1421,12 @@
1397
1421
  --wds-list-item-select-subtitle-disabled: rgba(0, 6, 36, .3);
1398
1422
  --wds-list-item-select-subtitle-font-line-height-medium: 18px;
1399
1423
  --wds-list-item-select-subtitle-font-size-medium: 14px;
1424
+ --wds-list-item-select-suffix: #868aa5;
1425
+ --wds-list-item-select-suffix-active-font-weight: 400;
1426
+ --wds-list-item-select-suffix-pressed: #868aa5;
1400
1427
  --wds-list-item-select-title: #000624;
1401
1428
  --wds-list-item-select-title-disabled: rgba(0, 6, 36, .3);
1429
+ --wds-list-item-select-title-pressed: #000624;
1402
1430
  --wds-loader-fill: #d6e6fe;
1403
1431
  --wds-loader-fill-error: #e62214;
1404
1432
  --wds-loader-fill-light: #ffffff;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.118.1",
3
+ "version": "1.119.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": "19eb85ad853884a43686b342f97ea8b6dbd4e64c569047b2cadb4dd9"
36
+ "falconPackageHash": "74b28db2a45670bf06857367d68a816268a23a8d27fe7cbce9f45ca4"
37
37
  }
package/studio/all.css CHANGED
@@ -146,9 +146,9 @@
146
146
  --wds-color-fill-accent-3: #6959F0;
147
147
  --wds-color-fill-accent-2: #17B0E2;
148
148
  --wds-color-fill-accent-1: #1684EA;
149
- --wds-color-border-ai-hover: #ffffff;
150
- --wds-color-border-ai-disabled: #ffffff;
151
- --wds-color-border-ai-active: #ffffff;
149
+ --wds-color-border-ai-primary-hover: #ffffff;
150
+ --wds-color-border-ai-primary-disabled: #ffffff;
151
+ --wds-color-border-ai-primary-active: #ffffff;
152
152
  --wds-color-yellow-600: #fef6ed;
153
153
  --wds-color-yellow-500: #fef3e5;
154
154
  --wds-color-yellow-400: #fdead2;
@@ -811,7 +811,7 @@
811
811
  --wds-swatches-list-padding-horizontal: var(--wds-space-400);
812
812
  --wds-swatches-list-gap: var(--wds-space-300);
813
813
  --wds-stepper-prefix-size-number: var(--wds-space-400);
814
- --wds-stepper-prefix-size-circle: var(--wds-space-500);
814
+ --wds-stepper-prefix-size-circle: var(--wds-space-700);
815
815
  --wds-social-preview-content-padding-vertical: var(--wds-space-200);
816
816
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
817
817
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
@@ -1010,6 +1010,7 @@
1010
1010
  --wds-list-item-select-icon-padding-vertical-medium: var(--wds-space-100);
1011
1011
  --wds-list-item-select-icon-padding-horizontal-medium: var(--wds-space-300);
1012
1012
  --wds-list-item-select-title-disabled: var(--wds-color-text-disabled);
1013
+ --wds-list-item-select-suffix-active-font-weight: var(--wds-font-weight-regular);
1013
1014
  --wds-list-item-select-subtitle-disabled: var(--wds-color-text-disabled);
1014
1015
  --wds-list-item-select-padding-vertical-small-screen-small: var(--wds-space-200);
1015
1016
  --wds-list-item-select-padding-vertical-small: var(--wds-space-150);
@@ -1021,6 +1022,8 @@
1021
1022
  --wds-list-item-select-padding-left-medium: var(--wds-space-300);
1022
1023
  --wds-list-item-select-padding-horizontal-small: var(--wds-space-200);
1023
1024
  --wds-list-item-select-padding-horizontal-medium: var(--wds-space-200);
1025
+ --wds-list-item-select-label-font-weight-small: var(--wds-font-weight-regular);
1026
+ --wds-list-item-select-label-font-weight-medium: var(--wds-font-weight-regular);
1024
1027
  --wds-list-item-select-affix-margin: var(--wds-space-150);
1025
1028
  --wds-list-item-select-active-title-disabled-screen-small: var(--wds-color-text-disabled);
1026
1029
  --wds-list-item-select-active-title-disabled: var(--wds-color-text-disabled);
@@ -1028,6 +1031,9 @@
1028
1031
  --wds-list-item-select-active-subtitle-disabled: var(--wds-color-text-disabled);
1029
1032
  --wds-list-item-select-active-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1030
1033
  --wds-list-item-section-padding-horizontal: var(--wds-space-400);
1034
+ --wds-list-item-action-title-font-weight-active: var(--wds-font-weight-regular);
1035
+ --wds-list-item-action-title-font-weight: var(--wds-font-weight-regular);
1036
+ --wds-list-item-action-subtitle-font-line-height: var(--wds-space-475);
1031
1037
  --wds-list-item-action-padding-vertical-small-screen-small: var(--wds-space-200);
1032
1038
  --wds-list-item-action-padding-vertical-small: var(--wds-space-150);
1033
1039
  --wds-list-item-action-padding-vertical-medium-screen-small: var(--wds-space-200);
@@ -1036,7 +1042,8 @@
1036
1042
  --wds-list-item-action-padding-horizontal-medium: var(--wds-space-300);
1037
1043
  --wds-list-item-action-label-font-line-height-small: var(--wds-space-475);
1038
1044
  --wds-list-item-action-border-radius: var(--wds-border-radius-0);
1039
- --wds-list-item-action-affix-margin: var(--wds-space-100);
1045
+ --wds-list-item-action-affix-margin-small: var(--wds-space-100);
1046
+ --wds-list-item-action-affix-margin-medium: var(--wds-space-100);
1040
1047
  --wds-list-item-padding-vertical-xx-tiny: var(--wds-space-100);
1041
1048
  --wds-list-item-padding-vertical-x-tiny: var(--wds-space-200);
1042
1049
  --wds-list-item-padding-vertical-tiny: var(--wds-space-300);
@@ -1187,10 +1194,10 @@
1187
1194
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1188
1195
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1189
1196
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1190
- --wds-card-header-paddings-vertical: var(--wds-space-400);
1191
- --wds-card-header-paddings-horizontal: var(--wds-space-600);
1192
- --wds-card-content-paddings-vertical: var(--wds-space-600);
1193
- --wds-card-content-paddings-horizontal: var(--wds-space-600);
1197
+ --wds-card-header-padding-vertical: var(--wds-space-400);
1198
+ --wds-card-header-padding-horizontal: var(--wds-space-600);
1199
+ --wds-card-content-padding-medium: var(--wds-space-600);
1200
+ --wds-card-content-padding-large: var(--wds-space-900);
1194
1201
  --wds-card-border: var(--wds-border-radius-200);
1195
1202
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1196
1203
  --wds-button-text-standard-primary: var(--wds-color-black-100);
@@ -1259,6 +1266,9 @@
1259
1266
  --wds-add-item-border-radius: var(--wds-border-radius-200);
1260
1267
  --wds-accordion-title-font-weight-small: var(--wds-font-weight-bold);
1261
1268
  --wds-accordion-title-font-weight: var(--wds-font-weight-medium);
1269
+ --wds-accordion-inner-content-padding-top: var(--wds-space-400);
1270
+ --wds-accordion-inner-content-fill: var(--wds-color-blue-600);
1271
+ --wds-accordion-border-radius: var(--wds-border-radius-0);
1262
1272
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1263
1273
  --wds-shadow-surface-modal: var(--wds-shadow-400);
1264
1274
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -1413,7 +1423,10 @@
1413
1423
  --wds-loader-fill-light: var(--wds-color-fill-light-primary);
1414
1424
  --wds-loader-fill-error: var(--wds-color-fill-destructive-primary);
1415
1425
  --wds-loader-fill: var(--wds-color-fill-standard-secondary);
1426
+ --wds-list-item-select-title-pressed: var(--wds-color-text-standard-primary);
1416
1427
  --wds-list-item-select-title: var(--wds-color-text-standard-primary);
1428
+ --wds-list-item-select-suffix-pressed: var(--wds-color-text-placeholder);
1429
+ --wds-list-item-select-suffix: var(--wds-color-text-placeholder);
1417
1430
  --wds-list-item-select-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1418
1431
  --wds-list-item-select-subtitle: var(--wds-color-text-placeholder);
1419
1432
  --wds-list-item-select-label-font-size-small: var(--wds-font-size-body-tiny);
@@ -1433,7 +1446,9 @@
1433
1446
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-secondary);
1434
1447
  --wds-list-item-section-font-size: var(--wds-font-size-body-tiny);
1435
1448
  --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1436
- --wds-list-item-action-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1449
+ --wds-list-item-action-suffix-fill-active: var(--wds-color-text-placeholder);
1450
+ --wds-list-item-action-suffix-fill: var(--wds-color-text-placeholder);
1451
+ --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
1437
1452
  --wds-list-item-action-subtitle-fill-active: var(--wds-color-text-placeholder);
1438
1453
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-tiny);
1439
1454
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-small);
@@ -1562,7 +1577,6 @@
1562
1577
  --wds-list-item-select-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1563
1578
  --wds-list-item-select-label-font-line-height-medium: var(--wds-font-line-height-body-small);
1564
1579
  --wds-list-item-section-line-height: var(--wds-font-line-height-body-tiny);
1565
- --wds-list-item-action-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
1566
1580
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-small);
1567
1581
  --wds-input-value-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1568
1582
  --wds-input-value-font-line-height-small: var(--wds-font-line-height-body-tiny);