@wix/design-system-tokens 1.195.0 → 1.197.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 (18) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/odeditor/all.css +10 -2
  3. package/odeditor/all.scss +10 -2
  4. package/odeditor/all.st.css +18 -2
  5. package/odeditor/component.st.css +2 -2
  6. package/odeditor/foundation.st.css +2 -0
  7. package/odeditor/semantic.st.css +14 -0
  8. package/odeditor-dark/all.css +14 -6
  9. package/odeditor-dark/all.scss +14 -6
  10. package/odeditor-dark/all.st.css +22 -6
  11. package/odeditor-dark/component.st.css +6 -6
  12. package/odeditor-dark/foundation.st.css +2 -0
  13. package/odeditor-dark/semantic.st.css +14 -0
  14. package/package.json +2 -2
  15. package/studio/all.css +7 -0
  16. package/studio/all.scss +7 -0
  17. package/studio/all.st.css +14 -0
  18. package/studio/semantic.st.css +14 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## 1.196.0 - 2026-05-27
2
+
3
+ ### Bug Fixes
4
+
5
+ - fix(TableListItem): reduce border-radius from 12px to 8px in odeditor and odeditor-dark [16314](https://github.com/wix-private/wix-design-systems/pull/16314)
6
+ - fix(ListItemSection): update font and padding tokens in odeditor-dark [16317](https://github.com/wix-private/wix-design-systems/pull/16317)
7
+ - fix(SegmentedToggle): fixed issue with height on segmented toggle [16302](https://github.com/wix-private/wix-design-systems/pull/16302)
8
+
1
9
  ## 1.194.0 - 2026-05-19
2
10
 
3
11
  ### Bug Fixes
package/odeditor/all.css CHANGED
@@ -1,4 +1,11 @@
1
1
  :root, .wds-tokens {
2
+ --wds-illustration-color-background: #F8F6F6;
3
+ --wds-illustration-color-6: #002294;
4
+ --wds-illustration-color-5: #EAEFFF;
5
+ --wds-illustration-color-4: #D5DFFF;
6
+ --wds-illustration-color-3: #B8C4FF;
7
+ --wds-illustration-color-2: #7896FF;
8
+ --wds-illustration-color-1: #002294;
2
9
  --wds-space-2400: 96px;
3
10
  --wds-space-1700: 68px;
4
11
  --wds-space-1600: 64px;
@@ -17,6 +24,7 @@
17
24
  --wds-space-750: 30px;
18
25
  --wds-space-700: 28px;
19
26
  --wds-space-600: 24px;
27
+ --wds-space-550: 22px;
20
28
  --wds-space-500: 20px;
21
29
  --wds-space-475: 18px;
22
30
  --wds-space-400: 16px;
@@ -952,7 +960,7 @@
952
960
  --wds-table-list-item-gap: var(--wds-space-400);
953
961
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
954
962
  --wds-table-list-item-controls-padding-medium: var(--wds-space-200);
955
- --wds-table-list-item-border-radius: var(--wds-border-radius-600);
963
+ --wds-table-list-item-border-radius: var(--wds-border-radius-400);
956
964
  --wds-table-list-item-border-color: var(--wds-color-black-550);
957
965
  --wds-table-toolbar-padding-horizontal: var(--wds-space-600);
958
966
  --wds-swatches-swatch-size-small: var(--wds-space-700);
@@ -1078,7 +1086,7 @@
1078
1086
  --wds-select-area-fill-active: var(--wds-color-blue-400);
1079
1087
  --wds-select-area-fill: var(--wds-color-black-750);
1080
1088
  --wds-select-area-border-radius: var(--wds-border-radius-200);
1081
- --wds-segmented-toggle-size-tiny: var(--wds-space-400);
1089
+ --wds-segmented-toggle-size-tiny: var(--wds-space-550);
1082
1090
  --wds-segmented-toggle-size-small: var(--wds-space-750);
1083
1091
  --wds-segmented-toggle-size-medium: var(--wds-space-1000);
1084
1092
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
package/odeditor/all.scss CHANGED
@@ -49,6 +49,7 @@
49
49
  --wds-space-750: 30px;
50
50
  --wds-space-700: 28px;
51
51
  --wds-space-600: 24px;
52
+ --wds-space-550: 22px;
52
53
  --wds-space-500: 20px;
53
54
  --wds-space-475: 18px;
54
55
  --wds-space-400: 16px;
@@ -141,6 +142,13 @@
141
142
  --wds-input-shadow-focus-warning: transparent;
142
143
  --wds-input-shadow-focus-standard: transparent;
143
144
  --wds-input-shadow-focus-destructive: transparent;
145
+ --wds-illustration-color-background: #F8F6F6;
146
+ --wds-illustration-color-6: #002294;
147
+ --wds-illustration-color-5: #EAEFFF;
148
+ --wds-illustration-color-4: #D5DFFF;
149
+ --wds-illustration-color-3: #B8C4FF;
150
+ --wds-illustration-color-2: #7896FF;
151
+ --wds-illustration-color-1: #002294;
144
152
  --wds-font-weight-semi-bold: 600;
145
153
  --wds-font-weight-regular: 400;
146
154
  --wds-font-weight-medium: 500;
@@ -532,7 +540,7 @@
532
540
  --wds-table-list-item-gap: var(--wds-space-400);
533
541
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
534
542
  --wds-table-list-item-controls-padding-medium: var(--wds-space-200);
535
- --wds-table-list-item-border-radius: var(--wds-border-radius-600);
543
+ --wds-table-list-item-border-radius: var(--wds-border-radius-400);
536
544
  --wds-table-list-item-border-color: var(--wds-color-black-550);
537
545
  --wds-swatches-swatch-size-small: var(--wds-space-700);
538
546
  --wds-swatches-swatch-size-medium: var(--wds-space-900);
@@ -739,7 +747,7 @@
739
747
  --wds-select-area-fill-active: var(--wds-color-blue-400);
740
748
  --wds-select-area-fill: var(--wds-color-black-750);
741
749
  --wds-select-area-border-radius: var(--wds-border-radius-200);
742
- --wds-segmented-toggle-size-tiny: var(--wds-space-400);
750
+ --wds-segmented-toggle-size-tiny: var(--wds-space-550);
743
751
  --wds-segmented-toggle-size-small: var(--wds-space-750);
744
752
  --wds-segmented-toggle-size-medium: var(--wds-space-1000);
745
753
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
package/odeditor/all.st.css CHANGED
@@ -1056,6 +1056,13 @@
1056
1056
  @property st-global(--wds-icon-button-color-text-standard-tertiary-active);
1057
1057
  @property st-global(--wds-icon-button-color-text-standard-tertiary-disabled);
1058
1058
  @property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
1059
+ @property st-global(--wds-illustration-color-1);
1060
+ @property st-global(--wds-illustration-color-2);
1061
+ @property st-global(--wds-illustration-color-3);
1062
+ @property st-global(--wds-illustration-color-4);
1063
+ @property st-global(--wds-illustration-color-5);
1064
+ @property st-global(--wds-illustration-color-6);
1065
+ @property st-global(--wds-illustration-color-background);
1059
1066
  @property st-global(--wds-image-border-radius-default);
1060
1067
  @property st-global(--wds-image-border-radius-none);
1061
1068
  @property st-global(--wds-info-icon-fill);
@@ -1692,6 +1699,7 @@
1692
1699
  @property st-global(--wds-space-400);
1693
1700
  @property st-global(--wds-space-475);
1694
1701
  @property st-global(--wds-space-500);
1702
+ @property st-global(--wds-space-550);
1695
1703
  @property st-global(--wds-space-600);
1696
1704
  @property st-global(--wds-space-700);
1697
1705
  @property st-global(--wds-space-750);
@@ -3124,6 +3132,13 @@
3124
3132
  --wds-icon-button-color-text-standard-tertiary-active: #0f2ccf;
3125
3133
  --wds-icon-button-color-text-standard-tertiary-disabled: #a8a6a5;
3126
3134
  --wds-icon-button-color-text-standard-tertiary-hover: #0f2ccf;
3135
+ --wds-illustration-color-1: #002294;
3136
+ --wds-illustration-color-2: #7896FF;
3137
+ --wds-illustration-color-3: #B8C4FF;
3138
+ --wds-illustration-color-4: #D5DFFF;
3139
+ --wds-illustration-color-5: #EAEFFF;
3140
+ --wds-illustration-color-6: #002294;
3141
+ --wds-illustration-color-background: #F8F6F6;
3127
3142
  --wds-image-border-radius-default: 8px;
3128
3143
  --wds-image-border-radius-none: 0px;
3129
3144
  --wds-info-icon-fill: #767574;
@@ -3470,7 +3485,7 @@
3470
3485
  --wds-segmented-toggle-padding-vertical-small: 4px;
3471
3486
  --wds-segmented-toggle-size-medium: 40px;
3472
3487
  --wds-segmented-toggle-size-small: 30px;
3473
- --wds-segmented-toggle-size-tiny: 16px;
3488
+ --wds-segmented-toggle-size-tiny: 22px;
3474
3489
  --wds-segmented-toggle-value-fill: #151414;
3475
3490
  --wds-segmented-toggle-value-fill-default: #151414;
3476
3491
  --wds-segmented-toggle-value-fill-disabled: #a8a6a5;
@@ -3760,6 +3775,7 @@
3760
3775
  --wds-space-400: 16px;
3761
3776
  --wds-space-475: 18px;
3762
3777
  --wds-space-500: 20px;
3778
+ --wds-space-550: 22px;
3763
3779
  --wds-space-600: 24px;
3764
3780
  --wds-space-700: 28px;
3765
3781
  --wds-space-750: 30px;
@@ -3819,7 +3835,7 @@
3819
3835
  --wds-swatches-swatch-size-small: 28px;
3820
3836
  --wds-swatches-swatch-size-tiny: 22px;
3821
3837
  --wds-table-list-item-border-color: #dedede;
3822
- --wds-table-list-item-border-radius: 12px;
3838
+ --wds-table-list-item-border-radius: 8px;
3823
3839
  --wds-table-list-item-controls-padding-medium: 8px;
3824
3840
  --wds-table-list-item-drag-handle-color: #151414;
3825
3841
  --wds-table-list-item-fill: #ffffff;
package/odeditor/component.st.css CHANGED
@@ -2186,7 +2186,7 @@
2186
2186
  --wds-segmented-toggle-padding-vertical-small: 4px;
2187
2187
  --wds-segmented-toggle-size-medium: 40px;
2188
2188
  --wds-segmented-toggle-size-small: 30px;
2189
- --wds-segmented-toggle-size-tiny: 16px;
2189
+ --wds-segmented-toggle-size-tiny: 22px;
2190
2190
  --wds-segmented-toggle-value-fill: #151414;
2191
2191
  --wds-segmented-toggle-value-fill-default: #151414;
2192
2192
  --wds-segmented-toggle-value-fill-disabled: #a8a6a5;
@@ -2381,7 +2381,7 @@
2381
2381
  --wds-swatches-swatch-size-small: 28px;
2382
2382
  --wds-swatches-swatch-size-tiny: 22px;
2383
2383
  --wds-table-list-item-border-color: #dedede;
2384
- --wds-table-list-item-border-radius: 12px;
2384
+ --wds-table-list-item-border-radius: 8px;
2385
2385
  --wds-table-list-item-controls-padding-medium: 8px;
2386
2386
  --wds-table-list-item-drag-handle-color: #151414;
2387
2387
  --wds-table-list-item-fill: #ffffff;
package/odeditor/foundation.st.css CHANGED
@@ -211,6 +211,7 @@
211
211
  @property st-global(--wds-space-400);
212
212
  @property st-global(--wds-space-475);
213
213
  @property st-global(--wds-space-500);
214
+ @property st-global(--wds-space-550);
214
215
  @property st-global(--wds-space-600);
215
216
  @property st-global(--wds-space-700);
216
217
  @property st-global(--wds-space-750);
@@ -444,6 +445,7 @@
444
445
  --wds-space-400: 16px;
445
446
  --wds-space-475: 18px;
446
447
  --wds-space-500: 20px;
448
+ --wds-space-550: 22px;
447
449
  --wds-space-600: 24px;
448
450
  --wds-space-700: 28px;
449
451
  --wds-space-750: 30px;
package/odeditor/semantic.st.css CHANGED
@@ -395,6 +395,13 @@
395
395
  @property st-global(--wds-font-weight-heading-4);
396
396
  @property st-global(--wds-font-weight-heading-5);
397
397
  @property st-global(--wds-font-weight-heading-6);
398
+ @property st-global(--wds-illustration-color-1);
399
+ @property st-global(--wds-illustration-color-2);
400
+ @property st-global(--wds-illustration-color-3);
401
+ @property st-global(--wds-illustration-color-4);
402
+ @property st-global(--wds-illustration-color-5);
403
+ @property st-global(--wds-illustration-color-6);
404
+ @property st-global(--wds-illustration-color-background);
398
405
  @property st-global(--wds-inner-shadow-blur-input);
399
406
  @property st-global(--wds-inner-shadow-blur-primary);
400
407
  @property st-global(--wds-inner-shadow-blur-secondary);
@@ -886,6 +893,13 @@
886
893
  --wds-font-weight-heading-4: 600;
887
894
  --wds-font-weight-heading-5: 600;
888
895
  --wds-font-weight-heading-6: 400;
896
+ --wds-illustration-color-1: #002294;
897
+ --wds-illustration-color-2: #7896FF;
898
+ --wds-illustration-color-3: #B8C4FF;
899
+ --wds-illustration-color-4: #D5DFFF;
900
+ --wds-illustration-color-5: #EAEFFF;
901
+ --wds-illustration-color-6: #002294;
902
+ --wds-illustration-color-background: #F8F6F6;
889
903
  --wds-inner-shadow-blur-input: 3px;
890
904
  --wds-inner-shadow-blur-primary: 2px;
891
905
  --wds-inner-shadow-blur-secondary: 2px;
package/odeditor-dark/all.css CHANGED
@@ -1,4 +1,11 @@
1
1
  :root, .wds-tokens {
2
+ --wds-illustration-color-background: #2D2D2E;
3
+ --wds-illustration-color-6: #EAEFFF;
4
+ --wds-illustration-color-5: #EAEFFF;
5
+ --wds-illustration-color-4: #D5DFFF;
6
+ --wds-illustration-color-3: #B8C4FF;
7
+ --wds-illustration-color-2: #7896FF;
8
+ --wds-illustration-color-1: #002294;
2
9
  --wds-space-2400: 96px;
3
10
  --wds-space-1700: 68px;
4
11
  --wds-space-1600: 64px;
@@ -17,6 +24,7 @@
17
24
  --wds-space-750: 30px;
18
25
  --wds-space-700: 28px;
19
26
  --wds-space-600: 24px;
27
+ --wds-space-550: 22px;
20
28
  --wds-space-500: 20px;
21
29
  --wds-space-475: 18px;
22
30
  --wds-space-400: 16px;
@@ -959,7 +967,7 @@
959
967
  --wds-table-list-item-gap: var(--wds-space-400);
960
968
  --wds-table-list-item-fill-highlight: var(--wds-color-black-750);
961
969
  --wds-table-list-item-controls-padding-medium: var(--wds-space-200);
962
- --wds-table-list-item-border-radius: var(--wds-border-radius-600);
970
+ --wds-table-list-item-border-radius: var(--wds-border-radius-400);
963
971
  --wds-table-list-item-border-color: var(--wds-color-black-550);
964
972
  --wds-table-toolbar-padding-horizontal: var(--wds-space-600);
965
973
  --wds-swatches-swatch-size-small: var(--wds-space-700);
@@ -1084,7 +1092,7 @@
1084
1092
  --wds-select-area-fill-active: var(--wds-color-blue-400);
1085
1093
  --wds-select-area-fill: var(--wds-color-black-750);
1086
1094
  --wds-select-area-border-radius: var(--wds-border-radius-200);
1087
- --wds-segmented-toggle-size-tiny: var(--wds-space-400);
1095
+ --wds-segmented-toggle-size-tiny: var(--wds-space-550);
1088
1096
  --wds-segmented-toggle-size-small: var(--wds-space-750);
1089
1097
  --wds-segmented-toggle-size-medium: var(--wds-space-1000);
1090
1098
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
@@ -1237,10 +1245,10 @@
1237
1245
  --wds-list-item-select-affix-margin: var(--wds-space-100);
1238
1246
  --wds-list-item-select-active-fill-hover: var(--wds-color-blue-600);
1239
1247
  --wds-list-item-section-title-label-fill-neutral: var(--wds-color-black-500);
1240
- --wds-list-item-section-padding-vertical-neutral: var(--wds-space-250);
1248
+ --wds-list-item-section-padding-vertical-neutral: var(--wds-space-200);
1241
1249
  --wds-list-item-section-padding-top: var(--wds-space-200);
1242
1250
  --wds-list-item-section-padding-horizontal: var(--wds-space-200);
1243
- --wds-list-item-section-padding-bottom: var(--wds-space-300);
1251
+ --wds-list-item-section-padding-bottom: var(--wds-space-200);
1244
1252
  --wds-list-item-section-font-weight-neutral: var(--wds-font-weight-regular);
1245
1253
  --wds-list-item-section-font-weight: var(--wds-font-weight-semi-bold);
1246
1254
  --wds-list-item-section-fill-neutral: var(--wds-color-white-transparent-0);
@@ -1779,7 +1787,7 @@
1779
1787
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-tertiary-active);
1780
1788
  --wds-list-item-select-active-fill: var(--wds-color-fill-dark-tertiary-active);
1781
1789
  --wds-list-item-section-title-label-fill: var(--wds-color-text-placeholder);
1782
- --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1790
+ --wds-list-item-section-font-size: var(--wds-font-size-body-tiny);
1783
1791
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-standard-primary);
1784
1792
  --wds-list-item-action-suffix-fill: var(--wds-color-text-standard-primary);
1785
1793
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
@@ -2046,7 +2054,7 @@
2046
2054
  --wds-message-modal-text-font-line-height: var(--wds-font-line-height-body-small);
2047
2055
  --wds-list-item-select-label-font-line-height-small: var(--wds-font-line-height-body-small);
2048
2056
  --wds-list-item-select-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2049
- --wds-list-item-section-font-line-height: var(--wds-font-line-height-body-small);
2057
+ --wds-list-item-section-font-line-height: var(--wds-font-line-height-body-tiny);
2050
2058
  --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
2051
2059
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-small);
2052
2060
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/odeditor-dark/all.scss CHANGED
@@ -58,6 +58,7 @@
58
58
  --wds-space-750: 30px;
59
59
  --wds-space-700: 28px;
60
60
  --wds-space-600: 24px;
61
+ --wds-space-550: 22px;
61
62
  --wds-space-500: 20px;
62
63
  --wds-space-475: 18px;
63
64
  --wds-space-400: 16px;
@@ -153,6 +154,13 @@
153
154
  --wds-input-shadow-focus-warning: transparent;
154
155
  --wds-input-shadow-focus-standard: transparent;
155
156
  --wds-input-shadow-focus-destructive: transparent;
157
+ --wds-illustration-color-background: #2D2D2E;
158
+ --wds-illustration-color-6: #EAEFFF;
159
+ --wds-illustration-color-5: #EAEFFF;
160
+ --wds-illustration-color-4: #D5DFFF;
161
+ --wds-illustration-color-3: #B8C4FF;
162
+ --wds-illustration-color-2: #7896FF;
163
+ --wds-illustration-color-1: #002294;
156
164
  --wds-font-weight-semi-bold: 600;
157
165
  --wds-font-weight-regular: 400;
158
166
  --wds-font-weight-medium: 500;
@@ -539,7 +547,7 @@
539
547
  --wds-table-list-item-gap: var(--wds-space-400);
540
548
  --wds-table-list-item-fill-highlight: var(--wds-color-black-750);
541
549
  --wds-table-list-item-controls-padding-medium: var(--wds-space-200);
542
- --wds-table-list-item-border-radius: var(--wds-border-radius-600);
550
+ --wds-table-list-item-border-radius: var(--wds-border-radius-400);
543
551
  --wds-table-list-item-border-color: var(--wds-color-black-550);
544
552
  --wds-swatches-swatch-size-small: var(--wds-space-700);
545
553
  --wds-swatches-swatch-size-medium: var(--wds-space-900);
@@ -744,7 +752,7 @@
744
752
  --wds-select-area-fill-active: var(--wds-color-blue-400);
745
753
  --wds-select-area-fill: var(--wds-color-black-750);
746
754
  --wds-select-area-border-radius: var(--wds-border-radius-200);
747
- --wds-segmented-toggle-size-tiny: var(--wds-space-400);
755
+ --wds-segmented-toggle-size-tiny: var(--wds-space-550);
748
756
  --wds-segmented-toggle-size-small: var(--wds-space-750);
749
757
  --wds-segmented-toggle-size-medium: var(--wds-space-1000);
750
758
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
@@ -897,10 +905,10 @@
897
905
  --wds-list-item-select-affix-margin: var(--wds-space-100);
898
906
  --wds-list-item-select-active-fill-hover: var(--wds-color-blue-600);
899
907
  --wds-list-item-section-title-label-fill-neutral: var(--wds-color-black-500);
900
- --wds-list-item-section-padding-vertical-neutral: var(--wds-space-250);
908
+ --wds-list-item-section-padding-vertical-neutral: var(--wds-space-200);
901
909
  --wds-list-item-section-padding-top: var(--wds-space-200);
902
910
  --wds-list-item-section-padding-horizontal: var(--wds-space-200);
903
- --wds-list-item-section-padding-bottom: var(--wds-space-300);
911
+ --wds-list-item-section-padding-bottom: var(--wds-space-200);
904
912
  --wds-list-item-section-font-weight-neutral: var(--wds-font-weight-regular);
905
913
  --wds-list-item-section-font-weight: var(--wds-font-weight-semi-bold);
906
914
  --wds-list-item-section-fill-neutral: var(--wds-color-white-transparent-0);
@@ -1769,7 +1777,7 @@
1769
1777
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-tertiary-active);
1770
1778
  --wds-list-item-select-active-fill: var(--wds-color-fill-dark-tertiary-active);
1771
1779
  --wds-list-item-section-title-label-fill: var(--wds-color-text-placeholder);
1772
- --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1780
+ --wds-list-item-section-font-size: var(--wds-font-size-body-tiny);
1773
1781
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-standard-primary);
1774
1782
  --wds-list-item-action-suffix-fill: var(--wds-color-text-standard-primary);
1775
1783
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
@@ -2046,7 +2054,7 @@
2046
2054
  --wds-message-modal-text-font-line-height: var(--wds-font-line-height-body-small);
2047
2055
  --wds-list-item-select-label-font-line-height-small: var(--wds-font-line-height-body-small);
2048
2056
  --wds-list-item-select-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2049
- --wds-list-item-section-font-line-height: var(--wds-font-line-height-body-small);
2057
+ --wds-list-item-section-font-line-height: var(--wds-font-line-height-body-tiny);
2050
2058
  --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
2051
2059
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-small);
2052
2060
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/odeditor-dark/all.st.css CHANGED
@@ -1061,6 +1061,13 @@
1061
1061
  @property st-global(--wds-icon-button-color-text-standard-tertiary-active);
1062
1062
  @property st-global(--wds-icon-button-color-text-standard-tertiary-disabled);
1063
1063
  @property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
1064
+ @property st-global(--wds-illustration-color-1);
1065
+ @property st-global(--wds-illustration-color-2);
1066
+ @property st-global(--wds-illustration-color-3);
1067
+ @property st-global(--wds-illustration-color-4);
1068
+ @property st-global(--wds-illustration-color-5);
1069
+ @property st-global(--wds-illustration-color-6);
1070
+ @property st-global(--wds-illustration-color-background);
1064
1071
  @property st-global(--wds-image-border-radius-default);
1065
1072
  @property st-global(--wds-image-border-radius-none);
1066
1073
  @property st-global(--wds-info-icon-fill);
@@ -1702,6 +1709,7 @@
1702
1709
  @property st-global(--wds-space-400);
1703
1710
  @property st-global(--wds-space-475);
1704
1711
  @property st-global(--wds-space-500);
1712
+ @property st-global(--wds-space-550);
1705
1713
  @property st-global(--wds-space-600);
1706
1714
  @property st-global(--wds-space-700);
1707
1715
  @property st-global(--wds-space-750);
@@ -3139,6 +3147,13 @@
3139
3147
  --wds-icon-button-color-text-standard-tertiary-active: #E0E7FF;
3140
3148
  --wds-icon-button-color-text-standard-tertiary-disabled: #878685;
3141
3149
  --wds-icon-button-color-text-standard-tertiary-hover: #E0E7FF;
3150
+ --wds-illustration-color-1: #002294;
3151
+ --wds-illustration-color-2: #7896FF;
3152
+ --wds-illustration-color-3: #B8C4FF;
3153
+ --wds-illustration-color-4: #D5DFFF;
3154
+ --wds-illustration-color-5: #EAEFFF;
3155
+ --wds-illustration-color-6: #EAEFFF;
3156
+ --wds-illustration-color-background: #2D2D2E;
3142
3157
  --wds-image-border-radius-default: 8px;
3143
3158
  --wds-image-border-radius-none: 0px;
3144
3159
  --wds-info-icon-fill: #A09E9D;
@@ -3256,14 +3271,14 @@
3256
3271
  --wds-list-item-section-divider-padding-top: 8px;
3257
3272
  --wds-list-item-section-fill: rgba(0, 0, 0, 0);
3258
3273
  --wds-list-item-section-fill-neutral: rgba(0, 0, 0, 0);
3259
- --wds-list-item-section-font-line-height: 18px;
3260
- --wds-list-item-section-font-size: 14px;
3274
+ --wds-list-item-section-font-line-height: 16px;
3275
+ --wds-list-item-section-font-size: 12px;
3261
3276
  --wds-list-item-section-font-weight: 600;
3262
3277
  --wds-list-item-section-font-weight-neutral: 400;
3263
- --wds-list-item-section-padding-bottom: 12px;
3278
+ --wds-list-item-section-padding-bottom: 8px;
3264
3279
  --wds-list-item-section-padding-horizontal: 8px;
3265
3280
  --wds-list-item-section-padding-top: 8px;
3266
- --wds-list-item-section-padding-vertical-neutral: 10px;
3281
+ --wds-list-item-section-padding-vertical-neutral: 8px;
3267
3282
  --wds-list-item-section-title-label-fill: #A09E9D;
3268
3283
  --wds-list-item-section-title-label-fill-neutral: #878685;
3269
3284
  --wds-list-item-select-active-fill: #2D2D2E;
@@ -3490,7 +3505,7 @@
3490
3505
  --wds-segmented-toggle-padding-vertical-small: 4px;
3491
3506
  --wds-segmented-toggle-size-medium: 40px;
3492
3507
  --wds-segmented-toggle-size-small: 30px;
3493
- --wds-segmented-toggle-size-tiny: 16px;
3508
+ --wds-segmented-toggle-size-tiny: 22px;
3494
3509
  --wds-segmented-toggle-value-fill: #FFFFFF;
3495
3510
  --wds-segmented-toggle-value-fill-default: #FFFFFF;
3496
3511
  --wds-segmented-toggle-value-fill-disabled: #878685;
@@ -3780,6 +3795,7 @@
3780
3795
  --wds-space-400: 16px;
3781
3796
  --wds-space-475: 18px;
3782
3797
  --wds-space-500: 20px;
3798
+ --wds-space-550: 22px;
3783
3799
  --wds-space-600: 24px;
3784
3800
  --wds-space-700: 28px;
3785
3801
  --wds-space-750: 30px;
@@ -3839,7 +3855,7 @@
3839
3855
  --wds-swatches-swatch-size-small: 28px;
3840
3856
  --wds-swatches-swatch-size-tiny: 22px;
3841
3857
  --wds-table-list-item-border-color: #666565;
3842
- --wds-table-list-item-border-radius: 12px;
3858
+ --wds-table-list-item-border-radius: 8px;
3843
3859
  --wds-table-list-item-controls-padding-medium: 8px;
3844
3860
  --wds-table-list-item-drag-handle-color: #FFFFFF;
3845
3861
  --wds-table-list-item-fill: #212122;
package/odeditor-dark/component.st.css CHANGED
@@ -1968,14 +1968,14 @@
1968
1968
  --wds-list-item-section-divider-padding-top: 8px;
1969
1969
  --wds-list-item-section-fill: rgba(0, 0, 0, 0);
1970
1970
  --wds-list-item-section-fill-neutral: rgba(0, 0, 0, 0);
1971
- --wds-list-item-section-font-line-height: 18px;
1972
- --wds-list-item-section-font-size: 14px;
1971
+ --wds-list-item-section-font-line-height: 16px;
1972
+ --wds-list-item-section-font-size: 12px;
1973
1973
  --wds-list-item-section-font-weight: 600;
1974
1974
  --wds-list-item-section-font-weight-neutral: 400;
1975
- --wds-list-item-section-padding-bottom: 12px;
1975
+ --wds-list-item-section-padding-bottom: 8px;
1976
1976
  --wds-list-item-section-padding-horizontal: 8px;
1977
1977
  --wds-list-item-section-padding-top: 8px;
1978
- --wds-list-item-section-padding-vertical-neutral: 10px;
1978
+ --wds-list-item-section-padding-vertical-neutral: 8px;
1979
1979
  --wds-list-item-section-title-label-fill: #A09E9D;
1980
1980
  --wds-list-item-section-title-label-fill-neutral: #878685;
1981
1981
  --wds-list-item-select-active-fill: #2D2D2E;
@@ -2202,7 +2202,7 @@
2202
2202
  --wds-segmented-toggle-padding-vertical-small: 4px;
2203
2203
  --wds-segmented-toggle-size-medium: 40px;
2204
2204
  --wds-segmented-toggle-size-small: 30px;
2205
- --wds-segmented-toggle-size-tiny: 16px;
2205
+ --wds-segmented-toggle-size-tiny: 22px;
2206
2206
  --wds-segmented-toggle-value-fill: #FFFFFF;
2207
2207
  --wds-segmented-toggle-value-fill-default: #FFFFFF;
2208
2208
  --wds-segmented-toggle-value-fill-disabled: #878685;
@@ -2397,7 +2397,7 @@
2397
2397
  --wds-swatches-swatch-size-small: 28px;
2398
2398
  --wds-swatches-swatch-size-tiny: 22px;
2399
2399
  --wds-table-list-item-border-color: #666565;
2400
- --wds-table-list-item-border-radius: 12px;
2400
+ --wds-table-list-item-border-radius: 8px;
2401
2401
  --wds-table-list-item-controls-padding-medium: 8px;
2402
2402
  --wds-table-list-item-drag-handle-color: #FFFFFF;
2403
2403
  --wds-table-list-item-fill: #212122;
package/odeditor-dark/foundation.st.css CHANGED
@@ -213,6 +213,7 @@
213
213
  @property st-global(--wds-space-400);
214
214
  @property st-global(--wds-space-475);
215
215
  @property st-global(--wds-space-500);
216
+ @property st-global(--wds-space-550);
216
217
  @property st-global(--wds-space-600);
217
218
  @property st-global(--wds-space-700);
218
219
  @property st-global(--wds-space-750);
@@ -448,6 +449,7 @@
448
449
  --wds-space-400: 16px;
449
450
  --wds-space-475: 18px;
450
451
  --wds-space-500: 20px;
452
+ --wds-space-550: 22px;
451
453
  --wds-space-600: 24px;
452
454
  --wds-space-700: 28px;
453
455
  --wds-space-750: 30px;
package/odeditor-dark/semantic.st.css CHANGED
@@ -395,6 +395,13 @@
395
395
  @property st-global(--wds-font-weight-heading-4);
396
396
  @property st-global(--wds-font-weight-heading-5);
397
397
  @property st-global(--wds-font-weight-heading-6);
398
+ @property st-global(--wds-illustration-color-1);
399
+ @property st-global(--wds-illustration-color-2);
400
+ @property st-global(--wds-illustration-color-3);
401
+ @property st-global(--wds-illustration-color-4);
402
+ @property st-global(--wds-illustration-color-5);
403
+ @property st-global(--wds-illustration-color-6);
404
+ @property st-global(--wds-illustration-color-background);
398
405
  @property st-global(--wds-inner-shadow-blur-input);
399
406
  @property st-global(--wds-inner-shadow-blur-primary);
400
407
  @property st-global(--wds-inner-shadow-blur-secondary);
@@ -886,6 +893,13 @@
886
893
  --wds-font-weight-heading-4: 600;
887
894
  --wds-font-weight-heading-5: 600;
888
895
  --wds-font-weight-heading-6: 400;
896
+ --wds-illustration-color-1: #002294;
897
+ --wds-illustration-color-2: #7896FF;
898
+ --wds-illustration-color-3: #B8C4FF;
899
+ --wds-illustration-color-4: #D5DFFF;
900
+ --wds-illustration-color-5: #EAEFFF;
901
+ --wds-illustration-color-6: #EAEFFF;
902
+ --wds-illustration-color-background: #2D2D2E;
889
903
  --wds-inner-shadow-blur-input: 3px;
890
904
  --wds-inner-shadow-blur-primary: 2px;
891
905
  --wds-inner-shadow-blur-secondary: 2px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.195.0",
3
+ "version": "1.197.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -32,5 +32,5 @@
32
32
  "author": "augustinasv@wix.com",
33
33
  "description": "Design system tokens",
34
34
  "packageManager": "yarn@3.5.0",
35
- "falconPackageHash": "4bf3f1ccbddd693410f764998c7feaa67b8cba8022fa4f349d9d70d3"
35
+ "falconPackageHash": "da9b7ebe2bcba884076ae362ffccd43d341b7e57bbda82cf243fdda0"
36
36
  }
package/studio/all.css CHANGED
@@ -1,4 +1,11 @@
1
1
  :root, .wds-tokens {
2
+ --wds-illustration-color-background: #F8F6F6;
3
+ --wds-illustration-color-6: #002297;
4
+ --wds-illustration-color-5: #EAEFF1;
5
+ --wds-illustration-color-4: #D5DFFF;
6
+ --wds-illustration-color-3: #B8C4FF;
7
+ --wds-illustration-color-2: #7896FF;
8
+ --wds-illustration-color-1: #002291;
2
9
  --wds-space-2400: 96px;
3
10
  --wds-space-1700: 68px;
4
11
  --wds-space-1600: 64px;
package/studio/all.scss CHANGED
@@ -122,6 +122,13 @@
122
122
  --wds-input-shadow-focus-warning: transparent;
123
123
  --wds-input-shadow-focus-standard: transparent;
124
124
  --wds-input-shadow-focus-destructive: transparent;
125
+ --wds-illustration-color-background: #F8F6F6;
126
+ --wds-illustration-color-6: #002297;
127
+ --wds-illustration-color-5: #EAEFF1;
128
+ --wds-illustration-color-4: #D5DFFF;
129
+ --wds-illustration-color-3: #B8C4FF;
130
+ --wds-illustration-color-2: #7896FF;
131
+ --wds-illustration-color-1: #002291;
125
132
  --wds-font-weight-semi-bold: 600;
126
133
  --wds-font-weight-regular: 400;
127
134
  --wds-font-weight-medium: 500;
package/studio/all.st.css CHANGED
@@ -1078,6 +1078,13 @@
1078
1078
  @property st-global(--wds-icon-button-color-text-standard-tertiary-active);
1079
1079
  @property st-global(--wds-icon-button-color-text-standard-tertiary-disabled);
1080
1080
  @property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
1081
+ @property st-global(--wds-illustration-color-1);
1082
+ @property st-global(--wds-illustration-color-2);
1083
+ @property st-global(--wds-illustration-color-3);
1084
+ @property st-global(--wds-illustration-color-4);
1085
+ @property st-global(--wds-illustration-color-5);
1086
+ @property st-global(--wds-illustration-color-6);
1087
+ @property st-global(--wds-illustration-color-background);
1081
1088
  @property st-global(--wds-image-border-radius-default);
1082
1089
  @property st-global(--wds-image-border-radius-none);
1083
1090
  @property st-global(--wds-info-icon-fill);
@@ -3190,6 +3197,13 @@
3190
3197
  --wds-icon-button-color-text-standard-tertiary-active: #116dff;
3191
3198
  --wds-icon-button-color-text-standard-tertiary-disabled: #bebebe;
3192
3199
  --wds-icon-button-color-text-standard-tertiary-hover: #116dff;
3200
+ --wds-illustration-color-1: #002291;
3201
+ --wds-illustration-color-2: #7896FF;
3202
+ --wds-illustration-color-3: #B8C4FF;
3203
+ --wds-illustration-color-4: #D5DFFF;
3204
+ --wds-illustration-color-5: #EAEFF1;
3205
+ --wds-illustration-color-6: #002297;
3206
+ --wds-illustration-color-background: #F8F6F6;
3193
3207
  --wds-image-border-radius-default: 4px;
3194
3208
  --wds-image-border-radius-none: 0px;
3195
3209
  --wds-info-icon-fill: #868aa5;
package/studio/semantic.st.css CHANGED
@@ -395,6 +395,13 @@
395
395
  @property st-global(--wds-font-weight-heading-4);
396
396
  @property st-global(--wds-font-weight-heading-5);
397
397
  @property st-global(--wds-font-weight-heading-6);
398
+ @property st-global(--wds-illustration-color-1);
399
+ @property st-global(--wds-illustration-color-2);
400
+ @property st-global(--wds-illustration-color-3);
401
+ @property st-global(--wds-illustration-color-4);
402
+ @property st-global(--wds-illustration-color-5);
403
+ @property st-global(--wds-illustration-color-6);
404
+ @property st-global(--wds-illustration-color-background);
398
405
  @property st-global(--wds-inner-shadow-blur-input);
399
406
  @property st-global(--wds-inner-shadow-blur-primary);
400
407
  @property st-global(--wds-inner-shadow-blur-secondary);
@@ -886,6 +893,13 @@
886
893
  --wds-font-weight-heading-4: 700;
887
894
  --wds-font-weight-heading-5: 700;
888
895
  --wds-font-weight-heading-6: 400;
896
+ --wds-illustration-color-1: #002291;
897
+ --wds-illustration-color-2: #7896FF;
898
+ --wds-illustration-color-3: #B8C4FF;
899
+ --wds-illustration-color-4: #D5DFFF;
900
+ --wds-illustration-color-5: #EAEFF1;
901
+ --wds-illustration-color-6: #002297;
902
+ --wds-illustration-color-background: #F8F6F6;
889
903
  --wds-inner-shadow-blur-input: 0px;
890
904
  --wds-inner-shadow-blur-primary: 0px;
891
905
  --wds-inner-shadow-blur-secondary: 0px;