@wix/design-system-tokens 1.101.1 → 1.102.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 (13) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +1 -0
  3. package/all.st.css +2 -0
  4. package/foundation.st.css +2 -0
  5. package/package.json +2 -2
  6. package/studio/all.css +8 -7
  7. package/studio/all.st.css +9 -7
  8. package/studio/component.st.css +5 -5
  9. package/studio/foundation.st.css +3 -1
  10. package/studio/semantic.st.css +1 -1
  11. package/wixel/all.css +1 -0
  12. package/wixel/all.st.css +2 -0
  13. package/wixel/foundation.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.102.0 - 2025-05-12
2
+
3
+ ### Features
4
+
5
+ - feat(Accordion): add titleSize prop [14757](https://github.com/wix-private/wix-design-systems/pull/14757)
6
+
1
7
  ## 1.101.0 - 2025-05-07
2
8
 
3
9
  ### Bug Fixes
package/all.css CHANGED
@@ -33,6 +33,7 @@
33
33
  --wds-shadow-y-300: 0;
34
34
  --wds-shadow-y-200: 0;
35
35
  --wds-shadow-y-100: 0;
36
+ --wds-shadow-y-0: 0;
36
37
  --wds-shadow-blur-400: 24px;
37
38
  --wds-shadow-blur-200: 18px;
38
39
  --wds-shadow-blur-150: 6px;
package/all.st.css CHANGED
@@ -1152,6 +1152,7 @@
1152
1152
  @property st-global(--wds-shadow-surface-overlay);
1153
1153
  @property st-global(--wds-shadow-surface-overlay-dark);
1154
1154
  @property st-global(--wds-shadow-surface-raised);
1155
+ @property st-global(--wds-shadow-y-0);
1155
1156
  @property st-global(--wds-shadow-y-100);
1156
1157
  @property st-global(--wds-shadow-y-200);
1157
1158
  @property st-global(--wds-shadow-y-300);
@@ -2680,6 +2681,7 @@
2680
2681
  --wds-shadow-surface-overlay: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
2681
2682
  --wds-shadow-surface-overlay-dark: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
2682
2683
  --wds-shadow-surface-raised: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
2684
+ --wds-shadow-y-0: 0;
2683
2685
  --wds-shadow-y-100: 0;
2684
2686
  --wds-shadow-y-200: 0;
2685
2687
  --wds-shadow-y-300: 0;
package/foundation.st.css CHANGED
@@ -165,6 +165,7 @@
165
165
  @property st-global(--wds-shadow-inner-400-right);
166
166
  @property st-global(--wds-shadow-inner-400-top);
167
167
  @property st-global(--wds-shadow-inner-400-vertical);
168
+ @property st-global(--wds-shadow-y-0);
168
169
  @property st-global(--wds-shadow-y-100);
169
170
  @property st-global(--wds-shadow-y-200);
170
171
  @property st-global(--wds-shadow-y-300);
@@ -367,6 +368,7 @@
367
368
  --wds-shadow-inner-400-right: -32px 0 24px -24px rgba(0, 6, 36, .2) inset, -8px 0 6px -6px rgba(0, 6, 36, .05) inset;
368
369
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(0, 6, 36, .2) inset, 0 8px 6px -6px rgba(0, 6, 36, .05) inset;
369
370
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset, 0 -22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset;
371
+ --wds-shadow-y-0: 0;
370
372
  --wds-shadow-y-100: 0;
371
373
  --wds-shadow-y-200: 0;
372
374
  --wds-shadow-y-300: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.101.1",
3
+ "version": "1.102.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": "a7241108beb85355035f27e390ff601dd736ed703acf3d1ed2aa1f5f"
36
+ "falconPackageHash": "ff287ce526ce947aae8ab52537c0768eb537cbce1eebf132078a09aa"
37
37
  }
package/studio/all.css CHANGED
@@ -33,9 +33,10 @@
33
33
  --wds-shadow-y-300: 0;
34
34
  --wds-shadow-y-200: 0;
35
35
  --wds-shadow-y-100: 0;
36
+ --wds-shadow-y-0: 0;
36
37
  --wds-shadow-blur-400: 24;
37
38
  --wds-shadow-blur-200: 18;
38
- --wds-shadow-blur-150: 6;
39
+ --wds-shadow-blur-150: 12;
39
40
  --wds-shadow-blur-100: 4;
40
41
  --wds-shadow-blur-50: 4;
41
42
  --wds-font-weight-semi-bold: 600;
@@ -332,6 +333,7 @@
332
333
  --wds-button-icon-offset-medium: 18px;
333
334
  --wds-button-icon-offset-large: 18px;
334
335
  --wds-avatar-group-gap-condensed: -2px;
336
+ --wds-accordion-title-font-line-height-small: 18px;
335
337
  --wds-width-default-2: var(--wds-border-width-100);
336
338
  --wds-width-default: var(--wds-border-width-100);
337
339
  --wds-border-width-default: var(--wds-border-width-100);
@@ -353,6 +355,7 @@
353
355
  --wds-space-padding-horizontal-small: var(--wds-space-400);
354
356
  --wds-space-padding-horizontal-medium: var(--wds-space-500);
355
357
  --wds-space-padding-horizontal-large: var(--wds-space-600);
358
+ --wds-shadow-surface-overlay-dark: var(--wds-shadow-y-0) 0 var(--wds-shadow-blur-150) 0 var(--wds-color-black-100-transparent-20);
356
359
  --wds-shadow-focus-warning: 0 0 0 3px var(--wds-color-yellow-400);
357
360
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
358
361
  --wds-shadow-focus-inner-warning: 0 0 0 3px var(--wds-color-yellow-400) inset;
@@ -699,10 +702,10 @@
699
702
  --wds-vertical-tabs-action-padding-horizontal-tiny: var(--wds-space-600);
700
703
  --wds-vertical-tabs-action-padding-horizontal-small: var(--wds-space-600);
701
704
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-600);
702
- --wds-tooltip-padding-vertical-small: var(--wds-space-100);
703
- --wds-tooltip-padding-vertical-medium: var(--wds-space-200);
705
+ --wds-tooltip-padding-vertical-small: var(--wds-space-200);
706
+ --wds-tooltip-padding-vertical-medium: var(--wds-space-300);
704
707
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
705
- --wds-tooltip-padding-horizontal-medium: var(--wds-space-400);
708
+ --wds-tooltip-padding-horizontal-medium: var(--wds-space-300);
706
709
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
707
710
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
708
711
  --wds-tooltip-border-radius: var(--wds-border-radius-200);
@@ -1241,10 +1244,9 @@
1241
1244
  --wds-add-item-padding-horizontal-tiny: var(--wds-space-300);
1242
1245
  --wds-add-item-padding-horizontal-large: var(--wds-space-700);
1243
1246
  --wds-add-item-border-radius: var(--wds-border-radius-200);
1244
- --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
1247
+ --wds-accordion-title-font-weight-small: var(--wds-font-weight-bold);
1245
1248
  --wds-accordion-title-font-weight: var(--wds-font-weight-medium);
1246
1249
  --wds-shadow-surface-raised: var(--wds-shadow-200);
1247
- --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1248
1250
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1249
1251
  --wds-shadow-surface-modal: var(--wds-shadow-400);
1250
1252
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -1516,6 +1518,5 @@
1516
1518
  --wds-announcement-modal-text-font-line-height: var(--wds-font-line-height-body-small);
1517
1519
  --wds-add-item-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1518
1520
  --wds-add-item-title-font-line-height-medium: var(--wds-font-line-height-body-small);
1519
- --wds-accordion-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
1520
1521
  --wds-accordion-title-font-line-height-medium: var(--wds-font-line-height-body-small);
1521
1522
  }
package/studio/all.st.css CHANGED
@@ -1140,6 +1140,7 @@
1140
1140
  @property st-global(--wds-shadow-surface-overlay);
1141
1141
  @property st-global(--wds-shadow-surface-overlay-dark);
1142
1142
  @property st-global(--wds-shadow-surface-raised);
1143
+ @property st-global(--wds-shadow-y-0);
1143
1144
  @property st-global(--wds-shadow-y-100);
1144
1145
  @property st-global(--wds-shadow-y-200);
1145
1146
  @property st-global(--wds-shadow-y-300);
@@ -1526,11 +1527,11 @@
1526
1527
  --wds-accordion-title-fill: #131720;
1527
1528
  --wds-accordion-title-fill-hover: #131720;
1528
1529
  --wds-accordion-title-font-line-height-medium: 20px;
1529
- --wds-accordion-title-font-line-height-small: 16px;
1530
+ --wds-accordion-title-font-line-height-small: 18px;
1530
1531
  --wds-accordion-title-font-size-medium: 14px;
1531
1532
  --wds-accordion-title-font-size-small: 12px;
1532
1533
  --wds-accordion-title-font-weight: 500;
1533
- --wds-accordion-title-font-weight-small: 500;
1534
+ --wds-accordion-title-font-weight-small: 700;
1534
1535
  --wds-add-item-border-radius: 4px;
1535
1536
  --wds-add-item-padding-horizontal-large: 28px;
1536
1537
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -2624,7 +2625,7 @@
2624
2625
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
2625
2626
  --wds-shadow-blur-50: 4;
2626
2627
  --wds-shadow-blur-100: 4;
2627
- --wds-shadow-blur-150: 6;
2628
+ --wds-shadow-blur-150: 12;
2628
2629
  --wds-shadow-blur-200: 18;
2629
2630
  --wds-shadow-blur-400: 24;
2630
2631
  --wds-shadow-fill-primary-modal: rgba(19, 23, 32, .2);
@@ -2659,8 +2660,9 @@
2659
2660
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
2660
2661
  --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
2661
2662
  --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
2662
- --wds-shadow-surface-overlay-dark: 0 12px 20px rgba(19, 23, 32, .1);
2663
+ --wds-shadow-surface-overlay-dark: 0 0 12 0 rgba(19, 23, 32, .2);
2663
2664
  --wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
2665
+ --wds-shadow-y-0: 0;
2664
2666
  --wds-shadow-y-100: 0;
2665
2667
  --wds-shadow-y-200: 0;
2666
2668
  --wds-shadow-y-300: 0;
@@ -2959,10 +2961,10 @@
2959
2961
  --wds-tooltip-border-radius: 4px;
2960
2962
  --wds-tooltip-border-radius-medium: 8px;
2961
2963
  --wds-tooltip-border-radius-small: 8px;
2962
- --wds-tooltip-padding-horizontal-medium: 16px;
2964
+ --wds-tooltip-padding-horizontal-medium: 12px;
2963
2965
  --wds-tooltip-padding-horizontal-small: 8px;
2964
- --wds-tooltip-padding-vertical-medium: 8px;
2965
- --wds-tooltip-padding-vertical-small: 4px;
2966
+ --wds-tooltip-padding-vertical-medium: 12px;
2967
+ --wds-tooltip-padding-vertical-small: 8px;
2966
2968
  --wds-tooltip-text-fill: #131720;
2967
2969
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
2968
2970
  --wds-vertical-tabs-action-padding-horizontal-small: 24px;
package/studio/component.st.css CHANGED
@@ -905,11 +905,11 @@
905
905
  --wds-accordion-title-fill: #131720;
906
906
  --wds-accordion-title-fill-hover: #131720;
907
907
  --wds-accordion-title-font-line-height-medium: 20px;
908
- --wds-accordion-title-font-line-height-small: 16px;
908
+ --wds-accordion-title-font-line-height-small: 18px;
909
909
  --wds-accordion-title-font-size-medium: 14px;
910
910
  --wds-accordion-title-font-size-small: 12px;
911
911
  --wds-accordion-title-font-weight: 500;
912
- --wds-accordion-title-font-weight-small: 500;
912
+ --wds-accordion-title-font-weight-small: 700;
913
913
  --wds-add-item-border-radius: 4px;
914
914
  --wds-add-item-padding-horizontal-large: 28px;
915
915
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -1719,10 +1719,10 @@
1719
1719
  --wds-tooltip-border-radius: 4px;
1720
1720
  --wds-tooltip-border-radius-medium: 8px;
1721
1721
  --wds-tooltip-border-radius-small: 8px;
1722
- --wds-tooltip-padding-horizontal-medium: 16px;
1722
+ --wds-tooltip-padding-horizontal-medium: 12px;
1723
1723
  --wds-tooltip-padding-horizontal-small: 8px;
1724
- --wds-tooltip-padding-vertical-medium: 8px;
1725
- --wds-tooltip-padding-vertical-small: 4px;
1724
+ --wds-tooltip-padding-vertical-medium: 12px;
1725
+ --wds-tooltip-padding-vertical-small: 8px;
1726
1726
  --wds-tooltip-text-fill: #131720;
1727
1727
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
1728
1728
  --wds-vertical-tabs-action-padding-horizontal-small: 24px;
package/studio/foundation.st.css CHANGED
@@ -165,6 +165,7 @@
165
165
  @property st-global(--wds-shadow-inner-400-right);
166
166
  @property st-global(--wds-shadow-inner-400-top);
167
167
  @property st-global(--wds-shadow-inner-400-vertical);
168
+ @property st-global(--wds-shadow-y-0);
168
169
  @property st-global(--wds-shadow-y-100);
169
170
  @property st-global(--wds-shadow-y-200);
170
171
  @property st-global(--wds-shadow-y-300);
@@ -348,7 +349,7 @@
348
349
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
349
350
  --wds-shadow-blur-50: 4;
350
351
  --wds-shadow-blur-100: 4;
351
- --wds-shadow-blur-150: 6;
352
+ --wds-shadow-blur-150: 12;
352
353
  --wds-shadow-blur-200: 18;
353
354
  --wds-shadow-blur-400: 24;
354
355
  --wds-shadow-inner-100: 1px 1px 2px rgba(19, 23, 32, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
@@ -367,6 +368,7 @@
367
368
  --wds-shadow-inner-400-right: -32px 0 24px -24px rgba(19, 23, 32, .2) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
368
369
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(19, 23, 32, .2) inset, 0 8px 6px -6px rgba(19, 23, 32, .05) inset;
369
370
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
371
+ --wds-shadow-y-0: 0;
370
372
  --wds-shadow-y-100: 0;
371
373
  --wds-shadow-y-200: 0;
372
374
  --wds-shadow-y-300: 0;
package/studio/semantic.st.css CHANGED
@@ -826,7 +826,7 @@
826
826
  --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
827
827
  --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
828
828
  --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
829
- --wds-shadow-surface-overlay-dark: 0 12px 20px rgba(19, 23, 32, .1);
829
+ --wds-shadow-surface-overlay-dark: 0 0 12 0 rgba(19, 23, 32, .2);
830
830
  --wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
831
831
  --wds-space-padding-horizontal-large: 24px;
832
832
  --wds-space-padding-horizontal-medium: 20px;
package/wixel/all.css CHANGED
@@ -33,6 +33,7 @@
33
33
  --wds-shadow-y-300: 10px;
34
34
  --wds-shadow-y-200: 2px;
35
35
  --wds-shadow-y-100: 1px;
36
+ --wds-shadow-y-0: 0;
36
37
  --wds-shadow-blur-400: 30px;
37
38
  --wds-shadow-blur-200: 18px;
38
39
  --wds-shadow-blur-150: 6px;
package/wixel/all.st.css CHANGED
@@ -1150,6 +1150,7 @@
1150
1150
  @property st-global(--wds-shadow-surface-overlay);
1151
1151
  @property st-global(--wds-shadow-surface-overlay-dark);
1152
1152
  @property st-global(--wds-shadow-surface-raised);
1153
+ @property st-global(--wds-shadow-y-0);
1153
1154
  @property st-global(--wds-shadow-y-100);
1154
1155
  @property st-global(--wds-shadow-y-200);
1155
1156
  @property st-global(--wds-shadow-y-300);
@@ -2683,6 +2684,7 @@
2683
2684
  --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
2684
2685
  --wds-shadow-surface-overlay-dark: 0 10px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
2685
2686
  --wds-shadow-surface-raised: 0 1px 4px rgba(38, 37, 36, 0.3000), 0 2px 4px rgba(38, 37, 36, 0.0000);
2687
+ --wds-shadow-y-0: 0;
2686
2688
  --wds-shadow-y-100: 1px;
2687
2689
  --wds-shadow-y-200: 2px;
2688
2690
  --wds-shadow-y-300: 10px;
package/wixel/foundation.st.css CHANGED
@@ -165,6 +165,7 @@
165
165
  @property st-global(--wds-shadow-inner-400-right);
166
166
  @property st-global(--wds-shadow-inner-400-top);
167
167
  @property st-global(--wds-shadow-inner-400-vertical);
168
+ @property st-global(--wds-shadow-y-0);
168
169
  @property st-global(--wds-shadow-y-100);
169
170
  @property st-global(--wds-shadow-y-200);
170
171
  @property st-global(--wds-shadow-y-300);
@@ -367,6 +368,7 @@
367
368
  --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;
368
369
  --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;
369
370
  --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;
371
+ --wds-shadow-y-0: 0;
370
372
  --wds-shadow-y-100: 1px;
371
373
  --wds-shadow-y-200: 2px;
372
374
  --wds-shadow-y-300: 10px;