@wix/design-system-tokens 1.236.3 → 1.238.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 (25) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/all.css +1 -0
  3. package/all.scss +1 -0
  4. package/all.st.css +2 -0
  5. package/odeditor/all.css +6 -4
  6. package/odeditor/all.scss +6 -4
  7. package/odeditor/all.st.css +8 -4
  8. package/odeditor/component.st.css +6 -4
  9. package/odeditor/semantic.st.css +2 -0
  10. package/odeditor-dark/all.css +3 -1
  11. package/odeditor-dark/all.scss +3 -1
  12. package/odeditor-dark/all.st.css +5 -1
  13. package/odeditor-dark/component.st.css +3 -1
  14. package/odeditor-dark/semantic.st.css +2 -0
  15. package/package.json +2 -2
  16. package/semantic.st.css +2 -0
  17. package/studio/all.css +1 -0
  18. package/studio/all.scss +1 -0
  19. package/studio/all.st.css +2 -0
  20. package/studio/semantic.st.css +2 -0
  21. package/studio2-light/all.css +3 -1
  22. package/studio2-light/all.scss +3 -1
  23. package/studio2-light/all.st.css +5 -1
  24. package/studio2-light/component.st.css +3 -1
  25. package/studio2-light/semantic.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,21 @@
1
+ ## 1.238.0
2
+
3
+ ### Minor Changes
4
+
5
+ - [#17565](https://github.com/wix-private/wix-design-systems/pull/17565) [`45f2af0`](https://github.com/wix-private/wix-design-systems/commit/45f2af0f255ee13aae4b5aca77bd8c927069804b) - **Visual breaking change:** in Harmony (odeditor), `--wds-composer-header-fill` and `--wds-composer-sidebar-fill` change from `#F8F6F6` to `#FFFFFF00`.
6
+
7
+ ### Patch Changes
8
+
9
+ - [#17615](https://github.com/wix-private/wix-design-systems/pull/17615) [`78ce278`](https://github.com/wix-private/wix-design-systems/commit/78ce278b8dc8ead70b7740df5e3784c317f38235) - In Harmony (odeditor), Studio 2.0 (odeditor-dark) and Studio 2.0 light (studio2-light), `--wds-accordion-title-font-weight-small` changes from `500` to `600` and `--wds-accordion-title-font-weight`, previously undefined there, is now `600`.
10
+
11
+ - [#17625](https://github.com/wix-private/wix-design-systems/pull/17625) [`9c59bbe`](https://github.com/wix-private/wix-design-systems/commit/9c59bbe9e4beb951b13974f706fbecbc625d8e60) - In Harmony (odeditor), `--wds-icon-button-color-fill-dark-secondary-hover` changes from `#f8f6f6` (`--wds-color-fill-dark-tertiary-hover`) to `#f0efef` (`--wds-color-black-700`).
12
+
13
+ ## 1.237.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [#17647](https://github.com/wix-private/wix-design-systems/pull/17647) [`4a87d76`](https://github.com/wix-private/wix-design-systems/commit/4a87d763e409b0b71c9bb3ec48341dd1b67f2efb) - Add `--wds-illustration-color-background-2`, a translucent illustration background: `#7896FF40` (light blue) in every theme except Studio 2.0 (odeditor-dark), where it's `#F8F6F640` (grey).
18
+
1
19
  ## 1.236.3
2
20
 
3
21
  ## 1.236.2
package/all.css CHANGED
@@ -1,4 +1,5 @@
1
1
  :root, .wds-tokens {
2
+ --wds-illustration-color-background-2: #7896FF40;
2
3
  --wds-space-2400: 144px;
3
4
  --wds-space-1700: 102px;
4
5
  --wds-space-1600: 96px;
package/all.scss CHANGED
@@ -201,6 +201,7 @@
201
201
  --wds-input-width-medium: 72px;
202
202
  --wds-input-width-large: 96px;
203
203
  --wds-input-width-fixed: 288px;
204
+ --wds-illustration-color-background-2: #7896FF40;
204
205
  --wds-icon-button-color-fill-ai-tertiary-active: transparent;
205
206
  --wds-icon-button-color-border-ai-secondary-hover: transparent;
206
207
  --wds-icon-button-color-border-ai-secondary-active: transparent;
package/all.st.css CHANGED
@@ -1394,6 +1394,7 @@
1394
1394
  @property st-global(--wds-icon-button-color-text-standard-tertiary-active);
1395
1395
  @property st-global(--wds-icon-button-color-text-standard-tertiary-disabled);
1396
1396
  @property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
1397
+ @property st-global(--wds-illustration-color-background-2);
1397
1398
  @property st-global(--wds-image-border-radius-default);
1398
1399
  @property st-global(--wds-image-border-radius-none);
1399
1400
  @property st-global(--wds-info-icon-fill);
@@ -4174,6 +4175,7 @@
4174
4175
  --wds-icon-button-color-text-standard-tertiary-active: #116dff;
4175
4176
  --wds-icon-button-color-text-standard-tertiary-disabled: rgba(0, 6, 36, .3);
4176
4177
  --wds-icon-button-color-text-standard-tertiary-hover: #116dff;
4178
+ --wds-illustration-color-background-2: #7896FF40;
4177
4179
  --wds-image-border-radius-default: 8px;
4178
4180
  --wds-image-border-radius-none: 0px;
4179
4181
  --wds-info-icon-fill: #116dff;
package/odeditor/all.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --wds-illustration-color-opacity-75: #F8F6F600;
4
4
  --wds-illustration-color-opacity-50: #F8F6F600;
5
5
  --wds-illustration-color-opacity-25: #F8F6F600;
6
+ --wds-illustration-color-background-2: #7896FF40;
6
7
  --wds-illustration-color-background: #F8F6F6;
7
8
  --wds-illustration-color-7: #002294;
8
9
  --wds-illustration-color-6: #002294;
@@ -1695,6 +1696,7 @@
1695
1696
  --wds-icon-button-color-fill-light-secondary-disabled: var(--wds-color-black-700);
1696
1697
  --wds-icon-button-color-fill-light-primary-disabled: var(--wds-color-black-700);
1697
1698
  --wds-icon-button-color-fill-dark-tertiary-hover: var(--wds-color-black-600);
1699
+ --wds-icon-button-color-fill-dark-secondary-hover: var(--wds-color-black-700);
1698
1700
  --wds-icon-button-color-fill-dark-secondary-disabled: var(--wds-color-black-700);
1699
1701
  --wds-icon-button-color-fill-dark-secondary: var(--wds-color-white-transparent-0);
1700
1702
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-black-700);
@@ -1777,9 +1779,11 @@
1777
1779
  --wds-composer-sidebar-item-bottom-padding-horizontal-small: var(--wds-space-100);
1778
1780
  --wds-composer-sidebar-item-bottom-padding-horizontal-medium: var(--wds-space-100);
1779
1781
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1782
+ --wds-composer-sidebar-fill: var(--wds-color-white-transparent-0);
1780
1783
  --wds-composer-header-padding-vertical-small: var(--wds-space-250);
1781
1784
  --wds-composer-header-height-small: var(--wds-space-750);
1782
1785
  --wds-composer-header-height-medium: var(--wds-space-750);
1786
+ --wds-composer-header-fill: var(--wds-color-white-transparent-0);
1783
1787
  --wds-composer-header-divider-margin: var(--wds-space-400);
1784
1788
  --wds-composer-header-border-fill: var(--wds-color-white-transparent-0);
1785
1789
  --wds-composer-header-back-button-icon-size-small: var(--wds-space-475);
@@ -2075,7 +2079,8 @@
2075
2079
  --wds-add-item-fill: var(--wds-color-black-750);
2076
2080
  --wds-add-item-border-radius: var(--wds-border-radius-600);
2077
2081
  --wds-add-item-border-dashed-radius: var(--wds-border-radius-400);
2078
- --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
2082
+ --wds-accordion-title-font-weight-small: var(--wds-font-weight-semi-bold);
2083
+ --wds-accordion-title-font-weight: var(--wds-font-weight-semi-bold);
2079
2084
  --wds-accordion-padding-horizontal-large: var(--wds-space-400);
2080
2085
  --wds-accordion-inner-content-padding-top-flat: var(--wds-space-200);
2081
2086
  --wds-accordion-inner-content-padding-top: var(--wds-space-200);
@@ -2479,7 +2484,6 @@
2479
2484
  --wds-icon-button-color-fill-dark-tertiary-disabled: var(--wds-color-fill-light-secondary);
2480
2485
  --wds-icon-button-color-fill-dark-tertiary-active: var(--wds-color-fill-dark-tertiary-active);
2481
2486
  --wds-icon-button-color-fill-dark-tertiary: var(--wds-color-fill-light-secondary);
2482
- --wds-icon-button-color-fill-dark-secondary-hover: var(--wds-color-fill-dark-tertiary-hover);
2483
2487
  --wds-icon-button-color-fill-dark-secondary-active: var(--wds-color-fill-dark-tertiary-active);
2484
2488
  --wds-icon-button-color-fill-dark-primary-hover: var(--wds-color-fill-dark-primary-hover);
2485
2489
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
@@ -2538,8 +2542,6 @@
2538
2542
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
2539
2543
  --wds-custom-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
2540
2544
  --wds-custom-modal-border-radius: var(--wds-border-radius-surface-modal);
2541
- --wds-composer-sidebar-fill: var(--wds-color-fill-surface-sunken);
2542
- --wds-composer-header-fill: var(--wds-color-fill-surface-sunken);
2543
2545
  --wds-close-button-standard-filled-text-hover: var(--wds-color-text-standard-primary);
2544
2546
  --wds-close-button-standard-filled-text-disabled: var(--wds-color-text-disabled);
2545
2547
  --wds-close-button-standard-filled-text: var(--wds-color-text-standard-primary);
package/odeditor/all.scss CHANGED
@@ -213,6 +213,7 @@
213
213
  --wds-illustration-color-opacity-75: #F8F6F600;
214
214
  --wds-illustration-color-opacity-50: #F8F6F600;
215
215
  --wds-illustration-color-opacity-25: #F8F6F600;
216
+ --wds-illustration-color-background-2: #7896FF40;
216
217
  --wds-illustration-color-background: #F8F6F6;
217
218
  --wds-illustration-color-7: #002294;
218
219
  --wds-illustration-color-6: #002294;
@@ -1378,6 +1379,7 @@
1378
1379
  --wds-icon-button-color-fill-light-secondary-disabled: var(--wds-color-black-700);
1379
1380
  --wds-icon-button-color-fill-light-primary-disabled: var(--wds-color-black-700);
1380
1381
  --wds-icon-button-color-fill-dark-tertiary-hover: var(--wds-color-black-600);
1382
+ --wds-icon-button-color-fill-dark-secondary-hover: var(--wds-color-black-700);
1381
1383
  --wds-icon-button-color-fill-dark-secondary-disabled: var(--wds-color-black-700);
1382
1384
  --wds-icon-button-color-fill-dark-secondary: var(--wds-color-white-transparent-0);
1383
1385
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-black-700);
@@ -1486,9 +1488,11 @@
1486
1488
  --wds-composer-sidebar-item-bottom-padding-horizontal-medium: var(--wds-space-100);
1487
1489
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1488
1490
  --wds-composer-sidebar-item-border-radius: var(--wds-border-radius-400);
1491
+ --wds-composer-sidebar-fill: var(--wds-color-white-transparent-0);
1489
1492
  --wds-composer-header-padding-vertical-small: var(--wds-space-250);
1490
1493
  --wds-composer-header-height-small: var(--wds-space-750);
1491
1494
  --wds-composer-header-height-medium: var(--wds-space-750);
1495
+ --wds-composer-header-fill: var(--wds-color-white-transparent-0);
1492
1496
  --wds-composer-header-divider-margin: var(--wds-space-400);
1493
1497
  --wds-composer-header-border-fill: var(--wds-color-white-transparent-0);
1494
1498
  --wds-composer-header-back-button-icon-size-small: var(--wds-space-475);
@@ -2075,7 +2079,8 @@
2075
2079
  --wds-add-item-fill: var(--wds-color-black-750);
2076
2080
  --wds-add-item-border-radius: var(--wds-border-radius-600);
2077
2081
  --wds-add-item-border-dashed-radius: var(--wds-border-radius-400);
2078
- --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
2082
+ --wds-accordion-title-font-weight-small: var(--wds-font-weight-semi-bold);
2083
+ --wds-accordion-title-font-weight: var(--wds-font-weight-semi-bold);
2079
2084
  --wds-accordion-padding-horizontal-large: var(--wds-space-400);
2080
2085
  --wds-accordion-inner-content-padding-top-flat: var(--wds-space-200);
2081
2086
  --wds-accordion-inner-content-padding-top: var(--wds-space-200);
@@ -2448,7 +2453,6 @@
2448
2453
  --wds-icon-button-color-fill-dark-tertiary-disabled: var(--wds-color-fill-light-secondary);
2449
2454
  --wds-icon-button-color-fill-dark-tertiary-active: var(--wds-color-fill-dark-tertiary-active);
2450
2455
  --wds-icon-button-color-fill-dark-tertiary: var(--wds-color-fill-light-secondary);
2451
- --wds-icon-button-color-fill-dark-secondary-hover: var(--wds-color-fill-dark-tertiary-hover);
2452
2456
  --wds-icon-button-color-fill-dark-secondary-active: var(--wds-color-fill-dark-tertiary-active);
2453
2457
  --wds-icon-button-color-fill-dark-primary-hover: var(--wds-color-fill-dark-primary-hover);
2454
2458
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
@@ -2517,8 +2521,6 @@
2517
2521
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
2518
2522
  --wds-custom-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
2519
2523
  --wds-custom-modal-border-radius: var(--wds-border-radius-surface-modal);
2520
- --wds-composer-sidebar-fill: var(--wds-color-fill-surface-sunken);
2521
- --wds-composer-header-fill: var(--wds-color-fill-surface-sunken);
2522
2524
  --wds-color-fill-surface-overlay-blur: var(--wds-color-fill-surface-overlay);
2523
2525
  --wds-color-fill-surface-modal-backdrop: var(--wds-color-fill-transparent-primary);
2524
2526
  --wds-color-fill-ai-tertiary-hover: var(--wds-color-fill-standard-tertiary-hover);
package/odeditor/all.st.css CHANGED
@@ -24,6 +24,7 @@
24
24
  @property st-global(--wds-accordion-title-font-line-height-small);
25
25
  @property st-global(--wds-accordion-title-font-size-medium);
26
26
  @property st-global(--wds-accordion-title-font-size-small);
27
+ @property st-global(--wds-accordion-title-font-weight);
27
28
  @property st-global(--wds-accordion-title-font-weight-small);
28
29
  @property st-global(--wds-add-item-border-color);
29
30
  @property st-global(--wds-add-item-border-color-disabled);
@@ -1387,6 +1388,7 @@
1387
1388
  @property st-global(--wds-illustration-color-6);
1388
1389
  @property st-global(--wds-illustration-color-7);
1389
1390
  @property st-global(--wds-illustration-color-background);
1391
+ @property st-global(--wds-illustration-color-background-2);
1390
1392
  @property st-global(--wds-illustration-color-opacity-25);
1391
1393
  @property st-global(--wds-illustration-color-opacity-50);
1392
1394
  @property st-global(--wds-illustration-color-opacity-75);
@@ -2794,7 +2796,8 @@
2794
2796
  --wds-accordion-title-font-line-height-small: 24px;
2795
2797
  --wds-accordion-title-font-size-medium: 14px;
2796
2798
  --wds-accordion-title-font-size-small: 12px;
2797
- --wds-accordion-title-font-weight-small: 500;
2799
+ --wds-accordion-title-font-weight: 600;
2800
+ --wds-accordion-title-font-weight-small: 600;
2798
2801
  --wds-add-item-border-color: #151414;
2799
2802
  --wds-add-item-border-color-disabled: rgba(19, 23, 32, .3);
2800
2803
  --wds-add-item-border-color-hover: #151414;
@@ -3826,14 +3829,14 @@
3826
3829
  --wds-composer-header-back-button-icon-size-small: 18px;
3827
3830
  --wds-composer-header-border-fill: rgba(255, 255, 255, 0);
3828
3831
  --wds-composer-header-divider-margin: 16px;
3829
- --wds-composer-header-fill: #f8f6f6;
3832
+ --wds-composer-header-fill: rgba(255, 255, 255, 0);
3830
3833
  --wds-composer-header-height-medium: 30px;
3831
3834
  --wds-composer-header-height-small: 30px;
3832
3835
  --wds-composer-header-padding-vertical-small: 10px;
3833
3836
  --wds-composer-sidebar-border-width: 0px;
3834
3837
  --wds-composer-sidebar-bottom-width: 88px;
3835
3838
  --wds-composer-sidebar-end-max-width: 240px;
3836
- --wds-composer-sidebar-fill: #f8f6f6;
3839
+ --wds-composer-sidebar-fill: rgba(255, 255, 255, 0);
3837
3840
  --wds-composer-sidebar-item-border-radius: 8px;
3838
3841
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;
3839
3842
  --wds-composer-sidebar-item-bottom-padding-horizontal-medium: 4px;
@@ -4050,7 +4053,7 @@
4050
4053
  --wds-icon-button-color-fill-dark-secondary: rgba(255, 255, 255, 0);
4051
4054
  --wds-icon-button-color-fill-dark-secondary-active: #f0efef;
4052
4055
  --wds-icon-button-color-fill-dark-secondary-disabled: #f0efef;
4053
- --wds-icon-button-color-fill-dark-secondary-hover: #f8f6f6;
4056
+ --wds-icon-button-color-fill-dark-secondary-hover: #f0efef;
4054
4057
  --wds-icon-button-color-fill-dark-tertiary: rgba(255, 255, 255, 0);
4055
4058
  --wds-icon-button-color-fill-dark-tertiary-active: #f0efef;
4056
4059
  --wds-icon-button-color-fill-dark-tertiary-disabled: rgba(255, 255, 255, 0);
@@ -4157,6 +4160,7 @@
4157
4160
  --wds-illustration-color-6: #002294;
4158
4161
  --wds-illustration-color-7: #002294;
4159
4162
  --wds-illustration-color-background: #F8F6F6;
4163
+ --wds-illustration-color-background-2: #7896FF40;
4160
4164
  --wds-illustration-color-opacity-25: #F8F6F600;
4161
4165
  --wds-illustration-color-opacity-50: #F8F6F600;
4162
4166
  --wds-illustration-color-opacity-75: #F8F6F600;
package/odeditor/component.st.css CHANGED
@@ -24,6 +24,7 @@
24
24
  @property st-global(--wds-accordion-title-font-line-height-small);
25
25
  @property st-global(--wds-accordion-title-font-size-medium);
26
26
  @property st-global(--wds-accordion-title-font-size-small);
27
+ @property st-global(--wds-accordion-title-font-weight);
27
28
  @property st-global(--wds-accordion-title-font-weight-small);
28
29
  @property st-global(--wds-add-item-border-color);
29
30
  @property st-global(--wds-add-item-border-color-disabled);
@@ -2041,7 +2042,8 @@
2041
2042
  --wds-accordion-title-font-line-height-small: 24px;
2042
2043
  --wds-accordion-title-font-size-medium: 14px;
2043
2044
  --wds-accordion-title-font-size-small: 12px;
2044
- --wds-accordion-title-font-weight-small: 500;
2045
+ --wds-accordion-title-font-weight: 600;
2046
+ --wds-accordion-title-font-weight-small: 600;
2045
2047
  --wds-add-item-border-color: #151414;
2046
2048
  --wds-add-item-border-color-disabled: rgba(19, 23, 32, .3);
2047
2049
  --wds-add-item-border-color-hover: #151414;
@@ -2562,14 +2564,14 @@
2562
2564
  --wds-composer-header-back-button-icon-size-small: 18px;
2563
2565
  --wds-composer-header-border-fill: rgba(255, 255, 255, 0);
2564
2566
  --wds-composer-header-divider-margin: 16px;
2565
- --wds-composer-header-fill: #f8f6f6;
2567
+ --wds-composer-header-fill: rgba(255, 255, 255, 0);
2566
2568
  --wds-composer-header-height-medium: 30px;
2567
2569
  --wds-composer-header-height-small: 30px;
2568
2570
  --wds-composer-header-padding-vertical-small: 10px;
2569
2571
  --wds-composer-sidebar-border-width: 0px;
2570
2572
  --wds-composer-sidebar-bottom-width: 88px;
2571
2573
  --wds-composer-sidebar-end-max-width: 240px;
2572
- --wds-composer-sidebar-fill: #f8f6f6;
2574
+ --wds-composer-sidebar-fill: rgba(255, 255, 255, 0);
2573
2575
  --wds-composer-sidebar-item-border-radius: 8px;
2574
2576
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;
2575
2577
  --wds-composer-sidebar-item-bottom-padding-horizontal-medium: 4px;
@@ -2729,7 +2731,7 @@
2729
2731
  --wds-icon-button-color-fill-dark-secondary: rgba(255, 255, 255, 0);
2730
2732
  --wds-icon-button-color-fill-dark-secondary-active: #f0efef;
2731
2733
  --wds-icon-button-color-fill-dark-secondary-disabled: #f0efef;
2732
- --wds-icon-button-color-fill-dark-secondary-hover: #f8f6f6;
2734
+ --wds-icon-button-color-fill-dark-secondary-hover: #f0efef;
2733
2735
  --wds-icon-button-color-fill-dark-tertiary: rgba(255, 255, 255, 0);
2734
2736
  --wds-icon-button-color-fill-dark-tertiary-active: #f0efef;
2735
2737
  --wds-icon-button-color-fill-dark-tertiary-disabled: rgba(255, 255, 255, 0);
package/odeditor/semantic.st.css CHANGED
@@ -416,6 +416,7 @@
416
416
  @property st-global(--wds-illustration-color-6);
417
417
  @property st-global(--wds-illustration-color-7);
418
418
  @property st-global(--wds-illustration-color-background);
419
+ @property st-global(--wds-illustration-color-background-2);
419
420
  @property st-global(--wds-illustration-color-opacity-25);
420
421
  @property st-global(--wds-illustration-color-opacity-50);
421
422
  @property st-global(--wds-illustration-color-opacity-75);
@@ -929,6 +930,7 @@
929
930
  --wds-illustration-color-6: #002294;
930
931
  --wds-illustration-color-7: #002294;
931
932
  --wds-illustration-color-background: #F8F6F6;
933
+ --wds-illustration-color-background-2: #7896FF40;
932
934
  --wds-illustration-color-opacity-25: #F8F6F600;
933
935
  --wds-illustration-color-opacity-50: #F8F6F600;
934
936
  --wds-illustration-color-opacity-75: #F8F6F600;
package/odeditor-dark/all.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --wds-illustration-color-opacity-75: #F8F6F6BF;
4
4
  --wds-illustration-color-opacity-50: #F8F6F680;
5
5
  --wds-illustration-color-opacity-25: #F8F6F640;
6
+ --wds-illustration-color-background-2: #F8F6F640;
6
7
  --wds-illustration-color-background: #2D2D2E;
7
8
  --wds-illustration-color-7: #B8C4FF;
8
9
  --wds-illustration-color-6: #EAEFFF;
@@ -2052,7 +2053,8 @@
2052
2053
  --wds-add-item-fill: var(--wds-color-black-700);
2053
2054
  --wds-add-item-border-radius: var(--wds-border-radius-600);
2054
2055
  --wds-add-item-border-dashed-radius: var(--wds-border-radius-400);
2055
- --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
2056
+ --wds-accordion-title-font-weight-small: var(--wds-font-weight-semi-bold);
2057
+ --wds-accordion-title-font-weight: var(--wds-font-weight-semi-bold);
2056
2058
  --wds-accordion-padding-horizontal-medium: var(--wds-space-300);
2057
2059
  --wds-accordion-padding-horizontal-large: var(--wds-space-400);
2058
2060
  --wds-accordion-inner-content-shadow-last: var(--wds-shadow-inner-300-top);
package/odeditor-dark/all.scss CHANGED
@@ -231,6 +231,7 @@
231
231
  --wds-illustration-color-opacity-75: #F8F6F6BF;
232
232
  --wds-illustration-color-opacity-50: #F8F6F680;
233
233
  --wds-illustration-color-opacity-25: #F8F6F640;
234
+ --wds-illustration-color-background-2: #F8F6F640;
234
235
  --wds-illustration-color-background: #2D2D2E;
235
236
  --wds-illustration-color-7: #B8C4FF;
236
237
  --wds-illustration-color-6: #EAEFFF;
@@ -2052,7 +2053,8 @@
2052
2053
  --wds-add-item-fill: var(--wds-color-black-700);
2053
2054
  --wds-add-item-border-radius: var(--wds-border-radius-600);
2054
2055
  --wds-add-item-border-dashed-radius: var(--wds-border-radius-400);
2055
- --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
2056
+ --wds-accordion-title-font-weight-small: var(--wds-font-weight-semi-bold);
2057
+ --wds-accordion-title-font-weight: var(--wds-font-weight-semi-bold);
2056
2058
  --wds-accordion-padding-horizontal-medium: var(--wds-space-300);
2057
2059
  --wds-accordion-padding-horizontal-large: var(--wds-space-400);
2058
2060
  --wds-accordion-inner-content-shadow-last: var(--wds-shadow-inner-300-top);
package/odeditor-dark/all.st.css CHANGED
@@ -24,6 +24,7 @@
24
24
  @property st-global(--wds-accordion-title-font-line-height-small);
25
25
  @property st-global(--wds-accordion-title-font-size-medium);
26
26
  @property st-global(--wds-accordion-title-font-size-small);
27
+ @property st-global(--wds-accordion-title-font-weight);
27
28
  @property st-global(--wds-accordion-title-font-weight-small);
28
29
  @property st-global(--wds-add-item-border-color);
29
30
  @property st-global(--wds-add-item-border-color-disabled);
@@ -1391,6 +1392,7 @@
1391
1392
  @property st-global(--wds-illustration-color-6);
1392
1393
  @property st-global(--wds-illustration-color-7);
1393
1394
  @property st-global(--wds-illustration-color-background);
1395
+ @property st-global(--wds-illustration-color-background-2);
1394
1396
  @property st-global(--wds-illustration-color-opacity-25);
1395
1397
  @property st-global(--wds-illustration-color-opacity-50);
1396
1398
  @property st-global(--wds-illustration-color-opacity-75);
@@ -2794,7 +2796,8 @@
2794
2796
  --wds-accordion-title-font-line-height-small: 24px;
2795
2797
  --wds-accordion-title-font-size-medium: 14px;
2796
2798
  --wds-accordion-title-font-size-small: 12px;
2797
- --wds-accordion-title-font-weight-small: 500;
2799
+ --wds-accordion-title-font-weight: 600;
2800
+ --wds-accordion-title-font-weight-small: 600;
2798
2801
  --wds-add-item-border-color: #FFFFFF;
2799
2802
  --wds-add-item-border-color-disabled: rgba(255, 255, 255, .3);
2800
2803
  --wds-add-item-border-color-hover: #FFFFFF;
@@ -4161,6 +4164,7 @@
4161
4164
  --wds-illustration-color-6: #EAEFFF;
4162
4165
  --wds-illustration-color-7: #B8C4FF;
4163
4166
  --wds-illustration-color-background: #2D2D2E;
4167
+ --wds-illustration-color-background-2: #F8F6F640;
4164
4168
  --wds-illustration-color-opacity-25: #F8F6F640;
4165
4169
  --wds-illustration-color-opacity-50: #F8F6F680;
4166
4170
  --wds-illustration-color-opacity-75: #F8F6F6BF;
package/odeditor-dark/component.st.css CHANGED
@@ -24,6 +24,7 @@
24
24
  @property st-global(--wds-accordion-title-font-line-height-small);
25
25
  @property st-global(--wds-accordion-title-font-size-medium);
26
26
  @property st-global(--wds-accordion-title-font-size-small);
27
+ @property st-global(--wds-accordion-title-font-weight);
27
28
  @property st-global(--wds-accordion-title-font-weight-small);
28
29
  @property st-global(--wds-add-item-border-color);
29
30
  @property st-global(--wds-add-item-border-color-disabled);
@@ -2040,7 +2041,8 @@
2040
2041
  --wds-accordion-title-font-line-height-small: 24px;
2041
2042
  --wds-accordion-title-font-size-medium: 14px;
2042
2043
  --wds-accordion-title-font-size-small: 12px;
2043
- --wds-accordion-title-font-weight-small: 500;
2044
+ --wds-accordion-title-font-weight: 600;
2045
+ --wds-accordion-title-font-weight-small: 600;
2044
2046
  --wds-add-item-border-color: #FFFFFF;
2045
2047
  --wds-add-item-border-color-disabled: rgba(255, 255, 255, .3);
2046
2048
  --wds-add-item-border-color-hover: #FFFFFF;
package/odeditor-dark/semantic.st.css CHANGED
@@ -416,6 +416,7 @@
416
416
  @property st-global(--wds-illustration-color-6);
417
417
  @property st-global(--wds-illustration-color-7);
418
418
  @property st-global(--wds-illustration-color-background);
419
+ @property st-global(--wds-illustration-color-background-2);
419
420
  @property st-global(--wds-illustration-color-opacity-25);
420
421
  @property st-global(--wds-illustration-color-opacity-50);
421
422
  @property st-global(--wds-illustration-color-opacity-75);
@@ -929,6 +930,7 @@
929
930
  --wds-illustration-color-6: #EAEFFF;
930
931
  --wds-illustration-color-7: #B8C4FF;
931
932
  --wds-illustration-color-background: #2D2D2E;
933
+ --wds-illustration-color-background-2: #F8F6F640;
932
934
  --wds-illustration-color-opacity-25: #F8F6F640;
933
935
  --wds-illustration-color-opacity-50: #F8F6F680;
934
936
  --wds-illustration-color-opacity-75: #F8F6F6BF;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.236.3",
3
+ "version": "1.238.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -35,5 +35,5 @@
35
35
  "license": "MIT",
36
36
  "author": "augustinasv@wix.com",
37
37
  "description": "Design system tokens",
38
- "falconPackageHash": "2c38b076d6544cf79edc643c34d36a571e481a4c86ee07ef0683e3b1"
38
+ "falconPackageHash": "7fd5647eeda45d95b487f341479b1bb1e1ef24aa57205fada3e54b92"
39
39
  }
package/semantic.st.css CHANGED
@@ -412,6 +412,7 @@
412
412
  @property st-global(--wds-font-weight-heading-4);
413
413
  @property st-global(--wds-font-weight-heading-5);
414
414
  @property st-global(--wds-font-weight-heading-6);
415
+ @property st-global(--wds-illustration-color-background-2);
415
416
  @property st-global(--wds-inner-shadow-blur-input);
416
417
  @property st-global(--wds-inner-shadow-blur-primary);
417
418
  @property st-global(--wds-inner-shadow-blur-secondary);
@@ -917,6 +918,7 @@
917
918
  --wds-font-weight-heading-4: 500;
918
919
  --wds-font-weight-heading-5: 400;
919
920
  --wds-font-weight-heading-6: 400;
921
+ --wds-illustration-color-background-2: #7896FF40;
920
922
  --wds-inner-shadow-blur-input: 0px;
921
923
  --wds-inner-shadow-blur-primary: 0px;
922
924
  --wds-inner-shadow-blur-secondary: 0px;
package/studio/all.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --wds-illustration-color-opacity-75: #F8F6F700;
4
4
  --wds-illustration-color-opacity-50: #F8F6F500;
5
5
  --wds-illustration-color-opacity-25: #F8F6F200;
6
+ --wds-illustration-color-background-2: #7896FF40;
6
7
  --wds-illustration-color-background: #F8F6F6;
7
8
  --wds-illustration-color-7: #002297;
8
9
  --wds-illustration-color-6: #002296;
package/studio/all.scss CHANGED
@@ -211,6 +211,7 @@
211
211
  --wds-illustration-color-opacity-75: #F8F6F700;
212
212
  --wds-illustration-color-opacity-50: #F8F6F500;
213
213
  --wds-illustration-color-opacity-25: #F8F6F200;
214
+ --wds-illustration-color-background-2: #7896FF40;
214
215
  --wds-illustration-color-background: #F8F6F6;
215
216
  --wds-illustration-color-7: #002297;
216
217
  --wds-illustration-color-6: #002296;
package/studio/all.st.css CHANGED
@@ -1392,6 +1392,7 @@
1392
1392
  @property st-global(--wds-illustration-color-6);
1393
1393
  @property st-global(--wds-illustration-color-7);
1394
1394
  @property st-global(--wds-illustration-color-background);
1395
+ @property st-global(--wds-illustration-color-background-2);
1395
1396
  @property st-global(--wds-illustration-color-opacity-25);
1396
1397
  @property st-global(--wds-illustration-color-opacity-50);
1397
1398
  @property st-global(--wds-illustration-color-opacity-75);
@@ -4159,6 +4160,7 @@
4159
4160
  --wds-illustration-color-6: #002296;
4160
4161
  --wds-illustration-color-7: #002297;
4161
4162
  --wds-illustration-color-background: #F8F6F6;
4163
+ --wds-illustration-color-background-2: #7896FF40;
4162
4164
  --wds-illustration-color-opacity-25: #F8F6F200;
4163
4165
  --wds-illustration-color-opacity-50: #F8F6F500;
4164
4166
  --wds-illustration-color-opacity-75: #F8F6F700;
package/studio/semantic.st.css CHANGED
@@ -416,6 +416,7 @@
416
416
  @property st-global(--wds-illustration-color-6);
417
417
  @property st-global(--wds-illustration-color-7);
418
418
  @property st-global(--wds-illustration-color-background);
419
+ @property st-global(--wds-illustration-color-background-2);
419
420
  @property st-global(--wds-illustration-color-opacity-25);
420
421
  @property st-global(--wds-illustration-color-opacity-50);
421
422
  @property st-global(--wds-illustration-color-opacity-75);
@@ -929,6 +930,7 @@
929
930
  --wds-illustration-color-6: #002296;
930
931
  --wds-illustration-color-7: #002297;
931
932
  --wds-illustration-color-background: #F8F6F6;
933
+ --wds-illustration-color-background-2: #7896FF40;
932
934
  --wds-illustration-color-opacity-25: #F8F6F200;
933
935
  --wds-illustration-color-opacity-50: #F8F6F500;
934
936
  --wds-illustration-color-opacity-75: #F8F6F700;
package/studio2-light/all.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --wds-illustration-color-opacity-75: #F8F6F600;
4
4
  --wds-illustration-color-opacity-50: #F8F6F600;
5
5
  --wds-illustration-color-opacity-25: #F8F6F600;
6
+ --wds-illustration-color-background-2: #7896FF40;
6
7
  --wds-illustration-color-background: #F8F6F6;
7
8
  --wds-illustration-color-7: #002294;
8
9
  --wds-illustration-color-6: #002294;
@@ -2061,7 +2062,8 @@
2061
2062
  --wds-add-item-fill: var(--wds-color-black-750);
2062
2063
  --wds-add-item-border-radius: var(--wds-border-radius-600);
2063
2064
  --wds-add-item-border-dashed-radius: var(--wds-border-radius-400);
2064
- --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
2065
+ --wds-accordion-title-font-weight-small: var(--wds-font-weight-semi-bold);
2066
+ --wds-accordion-title-font-weight: var(--wds-font-weight-semi-bold);
2065
2067
  --wds-accordion-padding-horizontal-medium: var(--wds-space-300);
2066
2068
  --wds-accordion-padding-horizontal-large: var(--wds-space-400);
2067
2069
  --wds-accordion-inner-content-padding-top-flat: var(--wds-space-0);
package/studio2-light/all.scss CHANGED
@@ -229,6 +229,7 @@
229
229
  --wds-illustration-color-opacity-75: #F8F6F600;
230
230
  --wds-illustration-color-opacity-50: #F8F6F600;
231
231
  --wds-illustration-color-opacity-25: #F8F6F600;
232
+ --wds-illustration-color-background-2: #7896FF40;
232
233
  --wds-illustration-color-background: #F8F6F6;
233
234
  --wds-illustration-color-7: #002294;
234
235
  --wds-illustration-color-6: #002294;
@@ -2061,7 +2062,8 @@
2061
2062
  --wds-add-item-fill: var(--wds-color-black-750);
2062
2063
  --wds-add-item-border-radius: var(--wds-border-radius-600);
2063
2064
  --wds-add-item-border-dashed-radius: var(--wds-border-radius-400);
2064
- --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
2065
+ --wds-accordion-title-font-weight-small: var(--wds-font-weight-semi-bold);
2066
+ --wds-accordion-title-font-weight: var(--wds-font-weight-semi-bold);
2065
2067
  --wds-accordion-padding-horizontal-medium: var(--wds-space-300);
2066
2068
  --wds-accordion-padding-horizontal-large: var(--wds-space-400);
2067
2069
  --wds-accordion-inner-content-padding-top-flat: var(--wds-space-0);
package/studio2-light/all.st.css CHANGED
@@ -24,6 +24,7 @@
24
24
  @property st-global(--wds-accordion-title-font-line-height-small);
25
25
  @property st-global(--wds-accordion-title-font-size-medium);
26
26
  @property st-global(--wds-accordion-title-font-size-small);
27
+ @property st-global(--wds-accordion-title-font-weight);
27
28
  @property st-global(--wds-accordion-title-font-weight-small);
28
29
  @property st-global(--wds-add-item-border-color);
29
30
  @property st-global(--wds-add-item-border-color-disabled);
@@ -1387,6 +1388,7 @@
1387
1388
  @property st-global(--wds-illustration-color-6);
1388
1389
  @property st-global(--wds-illustration-color-7);
1389
1390
  @property st-global(--wds-illustration-color-background);
1391
+ @property st-global(--wds-illustration-color-background-2);
1390
1392
  @property st-global(--wds-illustration-color-opacity-25);
1391
1393
  @property st-global(--wds-illustration-color-opacity-50);
1392
1394
  @property st-global(--wds-illustration-color-opacity-75);
@@ -2792,7 +2794,8 @@
2792
2794
  --wds-accordion-title-font-line-height-small: 24px;
2793
2795
  --wds-accordion-title-font-size-medium: 14px;
2794
2796
  --wds-accordion-title-font-size-small: 12px;
2795
- --wds-accordion-title-font-weight-small: 500;
2797
+ --wds-accordion-title-font-weight: 600;
2798
+ --wds-accordion-title-font-weight-small: 600;
2796
2799
  --wds-add-item-border-color: #151414;
2797
2800
  --wds-add-item-border-color-disabled: rgba(19, 23, 32, .3);
2798
2801
  --wds-add-item-border-color-hover: #151414;
@@ -4155,6 +4158,7 @@
4155
4158
  --wds-illustration-color-6: #002294;
4156
4159
  --wds-illustration-color-7: #002294;
4157
4160
  --wds-illustration-color-background: #F8F6F6;
4161
+ --wds-illustration-color-background-2: #7896FF40;
4158
4162
  --wds-illustration-color-opacity-25: #F8F6F600;
4159
4163
  --wds-illustration-color-opacity-50: #F8F6F600;
4160
4164
  --wds-illustration-color-opacity-75: #F8F6F600;
package/studio2-light/component.st.css CHANGED
@@ -24,6 +24,7 @@
24
24
  @property st-global(--wds-accordion-title-font-line-height-small);
25
25
  @property st-global(--wds-accordion-title-font-size-medium);
26
26
  @property st-global(--wds-accordion-title-font-size-small);
27
+ @property st-global(--wds-accordion-title-font-weight);
27
28
  @property st-global(--wds-accordion-title-font-weight-small);
28
29
  @property st-global(--wds-add-item-border-color);
29
30
  @property st-global(--wds-add-item-border-color-disabled);
@@ -2039,7 +2040,8 @@
2039
2040
  --wds-accordion-title-font-line-height-small: 24px;
2040
2041
  --wds-accordion-title-font-size-medium: 14px;
2041
2042
  --wds-accordion-title-font-size-small: 12px;
2042
- --wds-accordion-title-font-weight-small: 500;
2043
+ --wds-accordion-title-font-weight: 600;
2044
+ --wds-accordion-title-font-weight-small: 600;
2043
2045
  --wds-add-item-border-color: #151414;
2044
2046
  --wds-add-item-border-color-disabled: rgba(19, 23, 32, .3);
2045
2047
  --wds-add-item-border-color-hover: #151414;
package/studio2-light/semantic.st.css CHANGED
@@ -416,6 +416,7 @@
416
416
  @property st-global(--wds-illustration-color-6);
417
417
  @property st-global(--wds-illustration-color-7);
418
418
  @property st-global(--wds-illustration-color-background);
419
+ @property st-global(--wds-illustration-color-background-2);
419
420
  @property st-global(--wds-illustration-color-opacity-25);
420
421
  @property st-global(--wds-illustration-color-opacity-50);
421
422
  @property st-global(--wds-illustration-color-opacity-75);
@@ -929,6 +930,7 @@
929
930
  --wds-illustration-color-6: #002294;
930
931
  --wds-illustration-color-7: #002294;
931
932
  --wds-illustration-color-background: #F8F6F6;
933
+ --wds-illustration-color-background-2: #7896FF40;
932
934
  --wds-illustration-color-opacity-25: #F8F6F600;
933
935
  --wds-illustration-color-opacity-50: #F8F6F600;
934
936
  --wds-illustration-color-opacity-75: #F8F6F600;