@wix/design-system-tokens 1.56.0 → 1.57.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 (10) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +9 -7
  3. package/all.st.css +11 -7
  4. package/component.st.css +8 -4
  5. package/foundation.st.css +1 -1
  6. package/package.json +2 -2
  7. package/semantic.st.css +2 -2
  8. package/studio/all.css +2 -0
  9. package/studio/all.st.css +4 -0
  10. package/studio/component.st.css +4 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.57.0 - 2024-11-25
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(Tokens): component SectionHelper neutral skin background color change & black-750 value changed in default theme [14317](https://github.com/wix-private/wix-design-systems/pull/14317)
6
+
1
7
  ## 1.53.0 - 2024-11-07
2
8
 
3
9
  ### Features
package/all.css CHANGED
@@ -364,11 +364,13 @@
364
364
  --wds-search-border-radius-small: 1000px;
365
365
  --wds-search-border-radius-tiny: 1000px;
366
366
  --wds-section-header-padding-vertical: 9px;
367
+ --wds-section-helper-border-preview: #868aa5;
367
368
  --wds-section-helper-default-action-padding-medium: 12px;
368
369
  --wds-section-helper-default-action-padding-small: 9px;
369
370
  --wds-section-helper-default-border-radius: 6px;
370
371
  --wds-section-helper-default-vertical-padding-medium: 18px;
371
372
  --wds-section-helper-default-vertical-padding-small: 9px;
373
+ --wds-section-helper-fill-preview: #f6f7f9;
372
374
  --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
373
375
  --wds-section-helper-fullwidth-horizontal-padding-small: 24px;
374
376
  --wds-section-helper-fullwidth-vertical-padding-medium: 12px;
@@ -616,13 +618,13 @@
616
618
  --wds-vertical-tabs-item-fill-light-premium-active: #e3c3f4;
617
619
  --wds-vertical-tabs-item-fill-light-premium-disabled: #ffffff;
618
620
  --wds-vertical-tabs-item-fill-light-premium-hover: #f1e0f9;
619
- --wds-vertical-tabs-item-fill-neutral: #f7f8f8;
621
+ --wds-vertical-tabs-item-fill-neutral: #f6f7f9;
620
622
  --wds-vertical-tabs-item-fill-neutral-active: #d6e6fe;
621
- --wds-vertical-tabs-item-fill-neutral-disabled: #f7f8f8;
623
+ --wds-vertical-tabs-item-fill-neutral-disabled: #f6f7f9;
622
624
  --wds-vertical-tabs-item-fill-neutral-hover: #e7f0ff;
623
- --wds-vertical-tabs-item-fill-neutral-premium: #f7f8f8;
625
+ --wds-vertical-tabs-item-fill-neutral-premium: #f6f7f9;
624
626
  --wds-vertical-tabs-item-fill-neutral-premium-active: #e3c3f4;
625
- --wds-vertical-tabs-item-fill-neutral-premium-disabled: #f7f8f8;
627
+ --wds-vertical-tabs-item-fill-neutral-premium-disabled: #f6f7f9;
626
628
  --wds-vertical-tabs-item-fill-neutral-premium-hover: #f1e0f9;
627
629
  --wds-vertical-tabs-item-fill-standard: #e7f0ff;
628
630
  --wds-vertical-tabs-item-fill-standard-active: #ffffff;
@@ -674,7 +676,7 @@
674
676
  --wds-color-black-550: #cfd1dc;
675
677
  --wds-color-black-600: #dfe5eb;
676
678
  --wds-color-black-700: #eceff3;
677
- --wds-color-black-750: #f7f8f8;
679
+ --wds-color-black-750: #f6f7f9;
678
680
  --wds-color-black-100-transparent-0: rgba(0, 6, 36, 0);
679
681
  --wds-color-black-100-transparent-5: rgba(0, 6, 36, .05);
680
682
  --wds-color-black-100-transparent-10: rgba(0, 6, 36, .1);
@@ -869,7 +871,7 @@
869
871
  --wds-color-fill-ai-tertiary: #ffffff;
870
872
  --wds-color-fill-ai-tertiary-active: #d6d1fc;
871
873
  --wds-color-fill-ai-tertiary-disabled: #ffffff;
872
- --wds-color-fill-ai-tertiary-hover: #f7f8f8;
874
+ --wds-color-fill-ai-tertiary-hover: #f6f7f9;
873
875
  --wds-color-fill-dark-primary: #000624;
874
876
  --wds-color-fill-dark-primary-active: #000624;
875
877
  --wds-color-fill-dark-primary-disabled: rgba(0, 6, 36, .3);
@@ -988,7 +990,7 @@
988
990
  --wds-color-fill-surface-destructive: #fde3e1;
989
991
  --wds-color-fill-surface-modal: #ffffff;
990
992
  --wds-color-fill-surface-modal-backdrop: rgba(0, 6, 36, .7);
991
- --wds-color-fill-surface-neutral: #f7f8f8;
993
+ --wds-color-fill-surface-neutral: #f6f7f9;
992
994
  --wds-color-fill-surface-overlay: #ffffff;
993
995
  --wds-color-fill-surface-overlay-dark: #000624;
994
996
  --wds-color-fill-surface-premium: #f1e0f9;
package/all.st.css CHANGED
@@ -809,11 +809,13 @@
809
809
  @property st-global(--wds-search-border-radius-small);
810
810
  @property st-global(--wds-search-border-radius-tiny);
811
811
  @property st-global(--wds-section-header-padding-vertical);
812
+ @property st-global(--wds-section-helper-border-preview);
812
813
  @property st-global(--wds-section-helper-default-action-padding-medium);
813
814
  @property st-global(--wds-section-helper-default-action-padding-small);
814
815
  @property st-global(--wds-section-helper-default-border-radius);
815
816
  @property st-global(--wds-section-helper-default-vertical-padding-medium);
816
817
  @property st-global(--wds-section-helper-default-vertical-padding-small);
818
+ @property st-global(--wds-section-helper-fill-preview);
817
819
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-medium);
818
820
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-small);
819
821
  @property st-global(--wds-section-helper-fullwidth-vertical-padding-medium);
@@ -1312,7 +1314,7 @@
1312
1314
  --wds-color-black-600: #dfe5eb;
1313
1315
  --wds-color-black-700: #eceff3;
1314
1316
  --wds-color-black-700-transparent-0: #eceff300;
1315
- --wds-color-black-750: #f7f8f8;
1317
+ --wds-color-black-750: #f6f7f9;
1316
1318
  --wds-color-blue-0: #084ebd;
1317
1319
  --wds-color-blue-50: #0f62e6;
1318
1320
  --wds-color-blue-100: #116dff;
@@ -1433,7 +1435,7 @@
1433
1435
  --wds-color-fill-ai-tertiary: #ffffff;
1434
1436
  --wds-color-fill-ai-tertiary-active: #d6d1fc;
1435
1437
  --wds-color-fill-ai-tertiary-disabled: #ffffff;
1436
- --wds-color-fill-ai-tertiary-hover: #f7f8f8;
1438
+ --wds-color-fill-ai-tertiary-hover: #f6f7f9;
1437
1439
  --wds-color-fill-dark-primary: #000624;
1438
1440
  --wds-color-fill-dark-primary-active: #000624;
1439
1441
  --wds-color-fill-dark-primary-disabled: rgba(0, 6, 36, .3);
@@ -1552,7 +1554,7 @@
1552
1554
  --wds-color-fill-surface-destructive: #fde3e1;
1553
1555
  --wds-color-fill-surface-modal: #ffffff;
1554
1556
  --wds-color-fill-surface-modal-backdrop: rgba(0, 6, 36, .7);
1555
- --wds-color-fill-surface-neutral: #f7f8f8;
1557
+ --wds-color-fill-surface-neutral: #f6f7f9;
1556
1558
  --wds-color-fill-surface-overlay: #ffffff;
1557
1559
  --wds-color-fill-surface-overlay-dark: #000624;
1558
1560
  --wds-color-fill-surface-premium: #f1e0f9;
@@ -1975,11 +1977,13 @@
1975
1977
  --wds-search-border-radius-small: 1000px;
1976
1978
  --wds-search-border-radius-tiny: 1000px;
1977
1979
  --wds-section-header-padding-vertical: 9px;
1980
+ --wds-section-helper-border-preview: #868aa5;
1978
1981
  --wds-section-helper-default-action-padding-medium: 12px;
1979
1982
  --wds-section-helper-default-action-padding-small: 9px;
1980
1983
  --wds-section-helper-default-border-radius: 6px;
1981
1984
  --wds-section-helper-default-vertical-padding-medium: 18px;
1982
1985
  --wds-section-helper-default-vertical-padding-small: 9px;
1986
+ --wds-section-helper-fill-preview: #f6f7f9;
1983
1987
  --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
1984
1988
  --wds-section-helper-fullwidth-horizontal-padding-small: 24px;
1985
1989
  --wds-section-helper-fullwidth-vertical-padding-medium: 12px;
@@ -2293,13 +2297,13 @@
2293
2297
  --wds-vertical-tabs-item-fill-light-premium-active: #e3c3f4;
2294
2298
  --wds-vertical-tabs-item-fill-light-premium-disabled: #ffffff;
2295
2299
  --wds-vertical-tabs-item-fill-light-premium-hover: #f1e0f9;
2296
- --wds-vertical-tabs-item-fill-neutral: #f7f8f8;
2300
+ --wds-vertical-tabs-item-fill-neutral: #f6f7f9;
2297
2301
  --wds-vertical-tabs-item-fill-neutral-active: #d6e6fe;
2298
- --wds-vertical-tabs-item-fill-neutral-disabled: #f7f8f8;
2302
+ --wds-vertical-tabs-item-fill-neutral-disabled: #f6f7f9;
2299
2303
  --wds-vertical-tabs-item-fill-neutral-hover: #e7f0ff;
2300
- --wds-vertical-tabs-item-fill-neutral-premium: #f7f8f8;
2304
+ --wds-vertical-tabs-item-fill-neutral-premium: #f6f7f9;
2301
2305
  --wds-vertical-tabs-item-fill-neutral-premium-active: #e3c3f4;
2302
- --wds-vertical-tabs-item-fill-neutral-premium-disabled: #f7f8f8;
2306
+ --wds-vertical-tabs-item-fill-neutral-premium-disabled: #f6f7f9;
2303
2307
  --wds-vertical-tabs-item-fill-neutral-premium-hover: #f1e0f9;
2304
2308
  --wds-vertical-tabs-item-fill-standard: #e7f0ff;
2305
2309
  --wds-vertical-tabs-item-fill-standard-active: #ffffff;
package/component.st.css CHANGED
@@ -363,11 +363,13 @@
363
363
  @property st-global(--wds-search-border-radius-small);
364
364
  @property st-global(--wds-search-border-radius-tiny);
365
365
  @property st-global(--wds-section-header-padding-vertical);
366
+ @property st-global(--wds-section-helper-border-preview);
366
367
  @property st-global(--wds-section-helper-default-action-padding-medium);
367
368
  @property st-global(--wds-section-helper-default-action-padding-small);
368
369
  @property st-global(--wds-section-helper-default-border-radius);
369
370
  @property st-global(--wds-section-helper-default-vertical-padding-medium);
370
371
  @property st-global(--wds-section-helper-default-vertical-padding-small);
372
+ @property st-global(--wds-section-helper-fill-preview);
371
373
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-medium);
372
374
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-small);
373
375
  @property st-global(--wds-section-helper-fullwidth-vertical-padding-medium);
@@ -1017,11 +1019,13 @@
1017
1019
  --wds-search-border-radius-small: 1000px;
1018
1020
  --wds-search-border-radius-tiny: 1000px;
1019
1021
  --wds-section-header-padding-vertical: 9px;
1022
+ --wds-section-helper-border-preview: #868aa5;
1020
1023
  --wds-section-helper-default-action-padding-medium: 12px;
1021
1024
  --wds-section-helper-default-action-padding-small: 9px;
1022
1025
  --wds-section-helper-default-border-radius: 6px;
1023
1026
  --wds-section-helper-default-vertical-padding-medium: 18px;
1024
1027
  --wds-section-helper-default-vertical-padding-small: 9px;
1028
+ --wds-section-helper-fill-preview: #f6f7f9;
1025
1029
  --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
1026
1030
  --wds-section-helper-fullwidth-horizontal-padding-small: 24px;
1027
1031
  --wds-section-helper-fullwidth-vertical-padding-medium: 12px;
@@ -1269,13 +1273,13 @@
1269
1273
  --wds-vertical-tabs-item-fill-light-premium-active: #e3c3f4;
1270
1274
  --wds-vertical-tabs-item-fill-light-premium-disabled: #ffffff;
1271
1275
  --wds-vertical-tabs-item-fill-light-premium-hover: #f1e0f9;
1272
- --wds-vertical-tabs-item-fill-neutral: #f7f8f8;
1276
+ --wds-vertical-tabs-item-fill-neutral: #f6f7f9;
1273
1277
  --wds-vertical-tabs-item-fill-neutral-active: #d6e6fe;
1274
- --wds-vertical-tabs-item-fill-neutral-disabled: #f7f8f8;
1278
+ --wds-vertical-tabs-item-fill-neutral-disabled: #f6f7f9;
1275
1279
  --wds-vertical-tabs-item-fill-neutral-hover: #e7f0ff;
1276
- --wds-vertical-tabs-item-fill-neutral-premium: #f7f8f8;
1280
+ --wds-vertical-tabs-item-fill-neutral-premium: #f6f7f9;
1277
1281
  --wds-vertical-tabs-item-fill-neutral-premium-active: #e3c3f4;
1278
- --wds-vertical-tabs-item-fill-neutral-premium-disabled: #f7f8f8;
1282
+ --wds-vertical-tabs-item-fill-neutral-premium-disabled: #f6f7f9;
1279
1283
  --wds-vertical-tabs-item-fill-neutral-premium-hover: #f1e0f9;
1280
1284
  --wds-vertical-tabs-item-fill-standard: #e7f0ff;
1281
1285
  --wds-vertical-tabs-item-fill-standard-active: #ffffff;
package/foundation.st.css CHANGED
@@ -207,7 +207,7 @@
207
207
  --wds-color-black-600: #dfe5eb;
208
208
  --wds-color-black-700: #eceff3;
209
209
  --wds-color-black-700-transparent-0: #eceff300;
210
- --wds-color-black-750: #f7f8f8;
210
+ --wds-color-black-750: #f6f7f9;
211
211
  --wds-color-blue-0: #084ebd;
212
212
  --wds-color-blue-50: #0f62e6;
213
213
  --wds-color-blue-100: #116dff;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.56.0",
3
+ "version": "1.57.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": "26ff0cf5737cbffb1f32ac6ba233b9a0eda9b136c87a2ec5dabb300b"
36
+ "falconPackageHash": "9c707245be37b7274796f3be285fe6abb82d7c1d190950acc1fcfd8e"
37
37
  }
package/semantic.st.css CHANGED
@@ -454,7 +454,7 @@
454
454
  --wds-color-fill-ai-tertiary: #ffffff;
455
455
  --wds-color-fill-ai-tertiary-active: #d6d1fc;
456
456
  --wds-color-fill-ai-tertiary-disabled: #ffffff;
457
- --wds-color-fill-ai-tertiary-hover: #f7f8f8;
457
+ --wds-color-fill-ai-tertiary-hover: #f6f7f9;
458
458
  --wds-color-fill-dark-primary: #000624;
459
459
  --wds-color-fill-dark-primary-active: #000624;
460
460
  --wds-color-fill-dark-primary-disabled: rgba(0, 6, 36, .3);
@@ -573,7 +573,7 @@
573
573
  --wds-color-fill-surface-destructive: #fde3e1;
574
574
  --wds-color-fill-surface-modal: #ffffff;
575
575
  --wds-color-fill-surface-modal-backdrop: rgba(0, 6, 36, .7);
576
- --wds-color-fill-surface-neutral: #f7f8f8;
576
+ --wds-color-fill-surface-neutral: #f6f7f9;
577
577
  --wds-color-fill-surface-overlay: #ffffff;
578
578
  --wds-color-fill-surface-overlay-dark: #000624;
579
579
  --wds-color-fill-surface-premium: #f1e0f9;
package/studio/all.css CHANGED
@@ -364,11 +364,13 @@
364
364
  --wds-search-border-radius-small: 4px;
365
365
  --wds-search-border-radius-tiny: 4px;
366
366
  --wds-section-header-padding-vertical: 8px;
367
+ --wds-section-helper-border-preview: #cfd1dc;
367
368
  --wds-section-helper-default-action-padding-medium: 8px;
368
369
  --wds-section-helper-default-action-padding-small: 8px;
369
370
  --wds-section-helper-default-border-radius: 4px;
370
371
  --wds-section-helper-default-vertical-padding-medium: 12px;
371
372
  --wds-section-helper-default-vertical-padding-small: 8px;
373
+ --wds-section-helper-fill-preview: #edeef2;
372
374
  --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
373
375
  --wds-section-helper-fullwidth-horizontal-padding-small: 24px;
374
376
  --wds-section-helper-fullwidth-vertical-padding-medium: 10px;
package/studio/all.st.css CHANGED
@@ -805,11 +805,13 @@
805
805
  @property st-global(--wds-search-border-radius-small);
806
806
  @property st-global(--wds-search-border-radius-tiny);
807
807
  @property st-global(--wds-section-header-padding-vertical);
808
+ @property st-global(--wds-section-helper-border-preview);
808
809
  @property st-global(--wds-section-helper-default-action-padding-medium);
809
810
  @property st-global(--wds-section-helper-default-action-padding-small);
810
811
  @property st-global(--wds-section-helper-default-border-radius);
811
812
  @property st-global(--wds-section-helper-default-vertical-padding-medium);
812
813
  @property st-global(--wds-section-helper-default-vertical-padding-small);
814
+ @property st-global(--wds-section-helper-fill-preview);
813
815
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-medium);
814
816
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-small);
815
817
  @property st-global(--wds-section-helper-fullwidth-vertical-padding-medium);
@@ -1966,11 +1968,13 @@
1966
1968
  --wds-search-border-radius-small: 4px;
1967
1969
  --wds-search-border-radius-tiny: 4px;
1968
1970
  --wds-section-header-padding-vertical: 8px;
1971
+ --wds-section-helper-border-preview: #cfd1dc;
1969
1972
  --wds-section-helper-default-action-padding-medium: 8px;
1970
1973
  --wds-section-helper-default-action-padding-small: 8px;
1971
1974
  --wds-section-helper-default-border-radius: 4px;
1972
1975
  --wds-section-helper-default-vertical-padding-medium: 12px;
1973
1976
  --wds-section-helper-default-vertical-padding-small: 8px;
1977
+ --wds-section-helper-fill-preview: #edeef2;
1974
1978
  --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
1975
1979
  --wds-section-helper-fullwidth-horizontal-padding-small: 24px;
1976
1980
  --wds-section-helper-fullwidth-vertical-padding-medium: 10px;
package/studio/component.st.css CHANGED
@@ -363,11 +363,13 @@
363
363
  @property st-global(--wds-search-border-radius-small);
364
364
  @property st-global(--wds-search-border-radius-tiny);
365
365
  @property st-global(--wds-section-header-padding-vertical);
366
+ @property st-global(--wds-section-helper-border-preview);
366
367
  @property st-global(--wds-section-helper-default-action-padding-medium);
367
368
  @property st-global(--wds-section-helper-default-action-padding-small);
368
369
  @property st-global(--wds-section-helper-default-border-radius);
369
370
  @property st-global(--wds-section-helper-default-vertical-padding-medium);
370
371
  @property st-global(--wds-section-helper-default-vertical-padding-small);
372
+ @property st-global(--wds-section-helper-fill-preview);
371
373
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-medium);
372
374
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-small);
373
375
  @property st-global(--wds-section-helper-fullwidth-vertical-padding-medium);
@@ -1016,11 +1018,13 @@
1016
1018
  --wds-search-border-radius-small: 4px;
1017
1019
  --wds-search-border-radius-tiny: 4px;
1018
1020
  --wds-section-header-padding-vertical: 8px;
1021
+ --wds-section-helper-border-preview: #cfd1dc;
1019
1022
  --wds-section-helper-default-action-padding-medium: 8px;
1020
1023
  --wds-section-helper-default-action-padding-small: 8px;
1021
1024
  --wds-section-helper-default-border-radius: 4px;
1022
1025
  --wds-section-helper-default-vertical-padding-medium: 12px;
1023
1026
  --wds-section-helper-default-vertical-padding-small: 8px;
1027
+ --wds-section-helper-fill-preview: #edeef2;
1024
1028
  --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
1025
1029
  --wds-section-helper-fullwidth-horizontal-padding-small: 24px;
1026
1030
  --wds-section-helper-fullwidth-vertical-padding-medium: 10px;