@wix/design-system-tokens 1.202.0 → 1.203.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 (26) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/all.css +8 -0
  3. package/all.scss +8 -0
  4. package/all.st.css +16 -0
  5. package/foundation.st.css +16 -0
  6. package/odeditor/all.css +10 -1
  7. package/odeditor/all.scss +9 -0
  8. package/odeditor/all.st.css +18 -0
  9. package/odeditor/foundation.st.css +16 -0
  10. package/odeditor/semantic.st.css +2 -0
  11. package/odeditor-dark/all.css +11 -2
  12. package/odeditor-dark/all.scss +10 -1
  13. package/odeditor-dark/all.st.css +19 -1
  14. package/odeditor-dark/component.st.css +1 -1
  15. package/odeditor-dark/foundation.st.css +16 -0
  16. package/odeditor-dark/semantic.st.css +2 -0
  17. package/package.json +2 -2
  18. package/studio/all.css +10 -1
  19. package/studio/all.scss +10 -1
  20. package/studio/all.st.css +19 -1
  21. package/studio/foundation.st.css +16 -0
  22. package/studio/semantic.st.css +3 -1
  23. package/wixel/all.css +8 -0
  24. package/wixel/all.scss +8 -0
  25. package/wixel/all.st.css +16 -0
  26. package/wixel/foundation.st.css +16 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## 1.203.0 - 2026-06-17
2
+
3
+ ### Bug Fixes
4
+
5
+ - fix(TableListItem): make TableListItem background transparent in Harmony dark theme [16397](https://github.com/wix-private/wix-design-systems/pull/16397)
6
+
7
+ ### Features
8
+
9
+ - feat(tokens): add pink color family [16392](https://github.com/wix-private/wix-design-systems/pull/16392)
10
+
1
11
  ## 1.202.0 - 2026-06-15
2
12
 
3
13
  ### Features
package/all.css CHANGED
@@ -172,6 +172,14 @@
172
172
  --wds-color-purple-100: #9a27d5;
173
173
  --wds-color-purple-50: #8e1dd1;
174
174
  --wds-color-purple-0: #7416a5;
175
+ --wds-color-pink-600: #feebfb;
176
+ --wds-color-pink-500: #fdd7f2;
177
+ --wds-color-pink-400: #ffc2f3;
178
+ --wds-color-pink-300: #ffa9ef;
179
+ --wds-color-pink-200: #ff77e6;
180
+ --wds-color-pink-100: #f639d3;
181
+ --wds-color-pink-50: #e221ac;
182
+ --wds-color-pink-0: #bd22a1;
175
183
  --wds-color-orange-600: #feefe6;
176
184
  --wds-color-orange-500: #fee5d7;
177
185
  --wds-color-orange-400: #fddbc8;
package/all.scss CHANGED
@@ -177,6 +177,14 @@
177
177
  --wds-color-purple-100: #9a27d5;
178
178
  --wds-color-purple-50: #8e1dd1;
179
179
  --wds-color-purple-0: #7416a5;
180
+ --wds-color-pink-600: #feebfb;
181
+ --wds-color-pink-500: #fdd7f2;
182
+ --wds-color-pink-400: #ffc2f3;
183
+ --wds-color-pink-300: #ffa9ef;
184
+ --wds-color-pink-200: #ff77e6;
185
+ --wds-color-pink-100: #f639d3;
186
+ --wds-color-pink-50: #e221ac;
187
+ --wds-color-pink-0: #bd22a1;
180
188
  --wds-color-picker-width: 240px;
181
189
  --wds-color-orange-600: #feefe6;
182
190
  --wds-color-orange-500: #fee5d7;
package/all.st.css CHANGED
@@ -777,6 +777,14 @@
777
777
  @property st-global(--wds-color-picker-padding-horizontal);
778
778
  @property st-global(--wds-color-picker-padding-vertical);
779
779
  @property st-global(--wds-color-picker-width);
780
+ @property st-global(--wds-color-pink-0);
781
+ @property st-global(--wds-color-pink-50);
782
+ @property st-global(--wds-color-pink-100);
783
+ @property st-global(--wds-color-pink-200);
784
+ @property st-global(--wds-color-pink-300);
785
+ @property st-global(--wds-color-pink-400);
786
+ @property st-global(--wds-color-pink-500);
787
+ @property st-global(--wds-color-pink-600);
780
788
  @property st-global(--wds-color-purple-0);
781
789
  @property st-global(--wds-color-purple-50);
782
790
  @property st-global(--wds-color-purple-100);
@@ -2917,6 +2925,14 @@
2917
2925
  --wds-color-picker-padding-horizontal: 18px;
2918
2926
  --wds-color-picker-padding-vertical: 12px;
2919
2927
  --wds-color-picker-width: 240px;
2928
+ --wds-color-pink-0: #bd22a1;
2929
+ --wds-color-pink-50: #e221ac;
2930
+ --wds-color-pink-100: #f639d3;
2931
+ --wds-color-pink-200: #ff77e6;
2932
+ --wds-color-pink-300: #ffa9ef;
2933
+ --wds-color-pink-400: #ffc2f3;
2934
+ --wds-color-pink-500: #fdd7f2;
2935
+ --wds-color-pink-600: #feebfb;
2920
2936
  --wds-color-purple-0: #7416a5;
2921
2937
  --wds-color-purple-50: #8e1dd1;
2922
2938
  --wds-color-purple-100: #9a27d5;
package/foundation.st.css CHANGED
@@ -92,6 +92,14 @@
92
92
  @property st-global(--wds-color-orange-400);
93
93
  @property st-global(--wds-color-orange-500);
94
94
  @property st-global(--wds-color-orange-600);
95
+ @property st-global(--wds-color-pink-0);
96
+ @property st-global(--wds-color-pink-50);
97
+ @property st-global(--wds-color-pink-100);
98
+ @property st-global(--wds-color-pink-200);
99
+ @property st-global(--wds-color-pink-300);
100
+ @property st-global(--wds-color-pink-400);
101
+ @property st-global(--wds-color-pink-500);
102
+ @property st-global(--wds-color-pink-600);
95
103
  @property st-global(--wds-color-purple-0);
96
104
  @property st-global(--wds-color-purple-50);
97
105
  @property st-global(--wds-color-purple-100);
@@ -324,6 +332,14 @@
324
332
  --wds-color-orange-400: #fddbc8;
325
333
  --wds-color-orange-500: #fee5d7;
326
334
  --wds-color-orange-600: #feefe6;
335
+ --wds-color-pink-0: #bd22a1;
336
+ --wds-color-pink-50: #e221ac;
337
+ --wds-color-pink-100: #f639d3;
338
+ --wds-color-pink-200: #ff77e6;
339
+ --wds-color-pink-300: #ffa9ef;
340
+ --wds-color-pink-400: #ffc2f3;
341
+ --wds-color-pink-500: #fdd7f2;
342
+ --wds-color-pink-600: #feebfb;
327
343
  --wds-color-purple-0: #7416a5;
328
344
  --wds-color-purple-50: #8e1dd1;
329
345
  --wds-color-purple-100: #9a27d5;
package/odeditor/all.css CHANGED
@@ -1,5 +1,6 @@
1
1
  :root, .wds-tokens {
2
2
  --wds-illustration-color-background: #F8F6F6;
3
+ --wds-illustration-color-7: #002294;
3
4
  --wds-illustration-color-6: #002294;
4
5
  --wds-illustration-color-5: #EAEFFF;
5
6
  --wds-illustration-color-4: #D5DFFF;
@@ -196,6 +197,14 @@
196
197
  --wds-color-purple-100: #7200f3;
197
198
  --wds-color-purple-50: #6100cf;
198
199
  --wds-color-purple-0: #5000aa;
200
+ --wds-color-pink-600: #feebfb;
201
+ --wds-color-pink-500: #fdd7f2;
202
+ --wds-color-pink-400: #ffc2f3;
203
+ --wds-color-pink-300: #ffa9ef;
204
+ --wds-color-pink-200: #ff77e6;
205
+ --wds-color-pink-100: #f639d3;
206
+ --wds-color-pink-50: #e221ac;
207
+ --wds-color-pink-0: #bd22a1;
199
208
  --wds-color-orange-600: #fdf1ec;
200
209
  --wds-color-orange-500: #fbe3d9;
201
210
  --wds-color-orange-400: #fbcfbb;
@@ -1433,8 +1442,8 @@
1433
1442
  --wds-card-header-divider-width: var(--wds-border-width-none);
1434
1443
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1435
1444
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1436
- --wds-card-content-padding-large: var(--wds-space-300);
1437
1445
  --wds-card-content-padding-medium: var(--wds-space-300);
1446
+ --wds-card-content-padding-large: var(--wds-space-300);
1438
1447
  --wds-card-border-radius: var(--wds-border-radius-800);
1439
1448
  --wds-button-size-x-tiny: var(--wds-space-475);
1440
1449
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
package/odeditor/all.scss CHANGED
@@ -143,6 +143,7 @@
143
143
  --wds-input-shadow-focus-standard: transparent;
144
144
  --wds-input-shadow-focus-destructive: transparent;
145
145
  --wds-illustration-color-background: #F8F6F6;
146
+ --wds-illustration-color-7: #002294;
146
147
  --wds-illustration-color-6: #002294;
147
148
  --wds-illustration-color-5: #EAEFFF;
148
149
  --wds-illustration-color-4: #D5DFFF;
@@ -210,6 +211,14 @@
210
211
  --wds-color-purple-100: #7200f3;
211
212
  --wds-color-purple-50: #6100cf;
212
213
  --wds-color-purple-0: #5000aa;
214
+ --wds-color-pink-600: #feebfb;
215
+ --wds-color-pink-500: #fdd7f2;
216
+ --wds-color-pink-400: #ffc2f3;
217
+ --wds-color-pink-300: #ffa9ef;
218
+ --wds-color-pink-200: #ff77e6;
219
+ --wds-color-pink-100: #f639d3;
220
+ --wds-color-pink-50: #e221ac;
221
+ --wds-color-pink-0: #bd22a1;
213
222
  --wds-color-picker-width: 236px;
214
223
  --wds-color-orange-600: #fdf1ec;
215
224
  --wds-color-orange-500: #fbe3d9;
package/odeditor/all.st.css CHANGED
@@ -761,6 +761,14 @@
761
761
  @property st-global(--wds-color-picker-padding-horizontal);
762
762
  @property st-global(--wds-color-picker-padding-vertical);
763
763
  @property st-global(--wds-color-picker-width);
764
+ @property st-global(--wds-color-pink-0);
765
+ @property st-global(--wds-color-pink-50);
766
+ @property st-global(--wds-color-pink-100);
767
+ @property st-global(--wds-color-pink-200);
768
+ @property st-global(--wds-color-pink-300);
769
+ @property st-global(--wds-color-pink-400);
770
+ @property st-global(--wds-color-pink-500);
771
+ @property st-global(--wds-color-pink-600);
764
772
  @property st-global(--wds-color-purple-0);
765
773
  @property st-global(--wds-color-purple-50);
766
774
  @property st-global(--wds-color-purple-100);
@@ -1078,6 +1086,7 @@
1078
1086
  @property st-global(--wds-illustration-color-4);
1079
1087
  @property st-global(--wds-illustration-color-5);
1080
1088
  @property st-global(--wds-illustration-color-6);
1089
+ @property st-global(--wds-illustration-color-7);
1081
1090
  @property st-global(--wds-illustration-color-background);
1082
1091
  @property st-global(--wds-image-border-radius-default);
1083
1092
  @property st-global(--wds-image-border-radius-none);
@@ -2853,6 +2862,14 @@
2853
2862
  --wds-color-picker-padding-horizontal: 16px;
2854
2863
  --wds-color-picker-padding-vertical: 12px;
2855
2864
  --wds-color-picker-width: 236px;
2865
+ --wds-color-pink-0: #bd22a1;
2866
+ --wds-color-pink-50: #e221ac;
2867
+ --wds-color-pink-100: #f639d3;
2868
+ --wds-color-pink-200: #ff77e6;
2869
+ --wds-color-pink-300: #ffa9ef;
2870
+ --wds-color-pink-400: #ffc2f3;
2871
+ --wds-color-pink-500: #fdd7f2;
2872
+ --wds-color-pink-600: #feebfb;
2856
2873
  --wds-color-purple-0: #5000aa;
2857
2874
  --wds-color-purple-50: #6100cf;
2858
2875
  --wds-color-purple-100: #7200f3;
@@ -3170,6 +3187,7 @@
3170
3187
  --wds-illustration-color-4: #D5DFFF;
3171
3188
  --wds-illustration-color-5: #EAEFFF;
3172
3189
  --wds-illustration-color-6: #002294;
3190
+ --wds-illustration-color-7: #002294;
3173
3191
  --wds-illustration-color-background: #F8F6F6;
3174
3192
  --wds-image-border-radius-default: 8px;
3175
3193
  --wds-image-border-radius-none: 0px;
package/odeditor/foundation.st.css CHANGED
@@ -92,6 +92,14 @@
92
92
  @property st-global(--wds-color-orange-400);
93
93
  @property st-global(--wds-color-orange-500);
94
94
  @property st-global(--wds-color-orange-600);
95
+ @property st-global(--wds-color-pink-0);
96
+ @property st-global(--wds-color-pink-50);
97
+ @property st-global(--wds-color-pink-100);
98
+ @property st-global(--wds-color-pink-200);
99
+ @property st-global(--wds-color-pink-300);
100
+ @property st-global(--wds-color-pink-400);
101
+ @property st-global(--wds-color-pink-500);
102
+ @property st-global(--wds-color-pink-600);
95
103
  @property st-global(--wds-color-purple-0);
96
104
  @property st-global(--wds-color-purple-50);
97
105
  @property st-global(--wds-color-purple-100);
@@ -327,6 +335,14 @@
327
335
  --wds-color-orange-400: #fbcfbb;
328
336
  --wds-color-orange-500: #fbe3d9;
329
337
  --wds-color-orange-600: #fdf1ec;
338
+ --wds-color-pink-0: #bd22a1;
339
+ --wds-color-pink-50: #e221ac;
340
+ --wds-color-pink-100: #f639d3;
341
+ --wds-color-pink-200: #ff77e6;
342
+ --wds-color-pink-300: #ffa9ef;
343
+ --wds-color-pink-400: #ffc2f3;
344
+ --wds-color-pink-500: #fdd7f2;
345
+ --wds-color-pink-600: #feebfb;
330
346
  --wds-color-purple-0: #5000aa;
331
347
  --wds-color-purple-50: #6100cf;
332
348
  --wds-color-purple-100: #7200f3;
package/odeditor/semantic.st.css CHANGED
@@ -405,6 +405,7 @@
405
405
  @property st-global(--wds-illustration-color-4);
406
406
  @property st-global(--wds-illustration-color-5);
407
407
  @property st-global(--wds-illustration-color-6);
408
+ @property st-global(--wds-illustration-color-7);
408
409
  @property st-global(--wds-illustration-color-background);
409
410
  @property st-global(--wds-inner-shadow-blur-input);
410
411
  @property st-global(--wds-inner-shadow-blur-primary);
@@ -907,6 +908,7 @@
907
908
  --wds-illustration-color-4: #D5DFFF;
908
909
  --wds-illustration-color-5: #EAEFFF;
909
910
  --wds-illustration-color-6: #002294;
911
+ --wds-illustration-color-7: #002294;
910
912
  --wds-illustration-color-background: #F8F6F6;
911
913
  --wds-inner-shadow-blur-input: 3px;
912
914
  --wds-inner-shadow-blur-primary: 2px;
package/odeditor-dark/all.css CHANGED
@@ -1,5 +1,6 @@
1
1
  :root, .wds-tokens {
2
2
  --wds-illustration-color-background: #2D2D2E;
3
+ --wds-illustration-color-7: #B8C4FF;
3
4
  --wds-illustration-color-6: #EAEFFF;
4
5
  --wds-illustration-color-5: #EAEFFF;
5
6
  --wds-illustration-color-4: #D5DFFF;
@@ -200,6 +201,14 @@
200
201
  --wds-color-purple-100: #7200f3;
201
202
  --wds-color-purple-50: #6100cf;
202
203
  --wds-color-purple-0: #5000aa;
204
+ --wds-color-pink-600: #26021f;
205
+ --wds-color-pink-500: #40223d;
206
+ --wds-color-pink-400: #79466f;
207
+ --wds-color-pink-300: #bd22a1;
208
+ --wds-color-pink-200: #ea39ca;
209
+ --wds-color-pink-100: #ff69e4;
210
+ --wds-color-pink-50: #ffa9ef;
211
+ --wds-color-pink-0: #ffc2f3;
203
212
  --wds-color-orange-600: #26130A;
204
213
  --wds-color-orange-500: #512916;
205
214
  --wds-color-orange-400: #7D3F21;
@@ -970,6 +979,7 @@
970
979
  --wds-table-list-item-indentation-level-2: var(--wds-space-300);
971
980
  --wds-table-list-item-gap: var(--wds-space-400);
972
981
  --wds-table-list-item-fill-highlight: var(--wds-color-black-750);
982
+ --wds-table-list-item-fill: var(--wds-color-black-100-transparent-0);
973
983
  --wds-table-list-item-controls-padding-medium: var(--wds-space-200);
974
984
  --wds-table-list-item-border-radius: var(--wds-border-radius-400);
975
985
  --wds-table-list-item-border-color: var(--wds-color-black-550);
@@ -1453,8 +1463,8 @@
1453
1463
  --wds-card-header-divider-width: var(--wds-border-width-none);
1454
1464
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1455
1465
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1456
- --wds-card-content-padding-large: var(--wds-space-300);
1457
1466
  --wds-card-content-padding-medium: var(--wds-space-300);
1467
+ --wds-card-content-padding-large: var(--wds-space-300);
1458
1468
  --wds-button-size-x-tiny: var(--wds-space-475);
1459
1469
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1460
1470
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1697,7 +1707,6 @@
1697
1707
  --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1698
1708
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1699
1709
  --wds-table-list-item-fill-active: var(--wds-color-fill-dark-tertiary-active);
1700
- --wds-table-list-item-fill: var(--wds-color-fill-dark-tertiary);
1701
1710
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-standard-primary);
1702
1711
  --wds-swatches-fill-disabled: var(--wds-color-fill-dark-secondary);
1703
1712
  --wds-swatches-fill-border-selected: var(--wds-color-border-dark-primary-active);
package/odeditor-dark/all.scss CHANGED
@@ -155,6 +155,7 @@
155
155
  --wds-input-shadow-focus-standard: transparent;
156
156
  --wds-input-shadow-focus-destructive: transparent;
157
157
  --wds-illustration-color-background: #2D2D2E;
158
+ --wds-illustration-color-7: #B8C4FF;
158
159
  --wds-illustration-color-6: #EAEFFF;
159
160
  --wds-illustration-color-5: #EAEFFF;
160
161
  --wds-illustration-color-4: #D5DFFF;
@@ -222,6 +223,14 @@
222
223
  --wds-color-purple-100: #7200f3;
223
224
  --wds-color-purple-50: #6100cf;
224
225
  --wds-color-purple-0: #5000aa;
226
+ --wds-color-pink-600: #26021f;
227
+ --wds-color-pink-500: #40223d;
228
+ --wds-color-pink-400: #79466f;
229
+ --wds-color-pink-300: #bd22a1;
230
+ --wds-color-pink-200: #ea39ca;
231
+ --wds-color-pink-100: #ff69e4;
232
+ --wds-color-pink-50: #ffa9ef;
233
+ --wds-color-pink-0: #ffc2f3;
225
234
  --wds-color-picker-width: 236px;
226
235
  --wds-color-orange-600: #26130A;
227
236
  --wds-color-orange-500: #512916;
@@ -550,6 +559,7 @@
550
559
  --wds-table-list-item-indentation-level-2: var(--wds-space-300);
551
560
  --wds-table-list-item-gap: var(--wds-space-400);
552
561
  --wds-table-list-item-fill-highlight: var(--wds-color-black-750);
562
+ --wds-table-list-item-fill: var(--wds-color-black-100-transparent-0);
553
563
  --wds-table-list-item-controls-padding-medium: var(--wds-space-200);
554
564
  --wds-table-list-item-border-radius: var(--wds-border-radius-400);
555
565
  --wds-table-list-item-border-color: var(--wds-color-black-550);
@@ -1682,7 +1692,6 @@
1682
1692
  --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1683
1693
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1684
1694
  --wds-table-list-item-fill-active: var(--wds-color-fill-dark-tertiary-active);
1685
- --wds-table-list-item-fill: var(--wds-color-fill-dark-tertiary);
1686
1695
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-standard-primary);
1687
1696
  --wds-swatches-fill-disabled: var(--wds-color-fill-dark-secondary);
1688
1697
  --wds-swatches-fill-border-selected: var(--wds-color-border-dark-primary-active);
package/odeditor-dark/all.st.css CHANGED
@@ -765,6 +765,14 @@
765
765
  @property st-global(--wds-color-picker-padding-horizontal);
766
766
  @property st-global(--wds-color-picker-padding-vertical);
767
767
  @property st-global(--wds-color-picker-width);
768
+ @property st-global(--wds-color-pink-0);
769
+ @property st-global(--wds-color-pink-50);
770
+ @property st-global(--wds-color-pink-100);
771
+ @property st-global(--wds-color-pink-200);
772
+ @property st-global(--wds-color-pink-300);
773
+ @property st-global(--wds-color-pink-400);
774
+ @property st-global(--wds-color-pink-500);
775
+ @property st-global(--wds-color-pink-600);
768
776
  @property st-global(--wds-color-purple-0);
769
777
  @property st-global(--wds-color-purple-50);
770
778
  @property st-global(--wds-color-purple-100);
@@ -1082,6 +1090,7 @@
1082
1090
  @property st-global(--wds-illustration-color-4);
1083
1091
  @property st-global(--wds-illustration-color-5);
1084
1092
  @property st-global(--wds-illustration-color-6);
1093
+ @property st-global(--wds-illustration-color-7);
1085
1094
  @property st-global(--wds-illustration-color-background);
1086
1095
  @property st-global(--wds-image-border-radius-default);
1087
1096
  @property st-global(--wds-image-border-radius-none);
@@ -2866,6 +2875,14 @@
2866
2875
  --wds-color-picker-padding-horizontal: 16px;
2867
2876
  --wds-color-picker-padding-vertical: 12px;
2868
2877
  --wds-color-picker-width: 236px;
2878
+ --wds-color-pink-0: #ffc2f3;
2879
+ --wds-color-pink-50: #ffa9ef;
2880
+ --wds-color-pink-100: #ff69e4;
2881
+ --wds-color-pink-200: #ea39ca;
2882
+ --wds-color-pink-300: #bd22a1;
2883
+ --wds-color-pink-400: #79466f;
2884
+ --wds-color-pink-500: #40223d;
2885
+ --wds-color-pink-600: #26021f;
2869
2886
  --wds-color-purple-0: #5000aa;
2870
2887
  --wds-color-purple-50: #6100cf;
2871
2888
  --wds-color-purple-100: #7200f3;
@@ -3183,6 +3200,7 @@
3183
3200
  --wds-illustration-color-4: #D5DFFF;
3184
3201
  --wds-illustration-color-5: #EAEFFF;
3185
3202
  --wds-illustration-color-6: #EAEFFF;
3203
+ --wds-illustration-color-7: #B8C4FF;
3186
3204
  --wds-illustration-color-background: #2D2D2E;
3187
3205
  --wds-image-border-radius-default: 8px;
3188
3206
  --wds-image-border-radius-none: 0px;
@@ -3888,7 +3906,7 @@
3888
3906
  --wds-table-list-item-border-radius: 8px;
3889
3907
  --wds-table-list-item-controls-padding-medium: 8px;
3890
3908
  --wds-table-list-item-drag-handle-color: #FFFFFF;
3891
- --wds-table-list-item-fill: #212122;
3909
+ --wds-table-list-item-fill: rgba(255, 255, 255, 0);
3892
3910
  --wds-table-list-item-fill-active: #2D2D2E;
3893
3911
  --wds-table-list-item-fill-highlight: #2D2D2E;
3894
3912
  --wds-table-list-item-fill-hover: #3A3A3B;
package/odeditor-dark/component.st.css CHANGED
@@ -2422,7 +2422,7 @@
2422
2422
  --wds-table-list-item-border-radius: 8px;
2423
2423
  --wds-table-list-item-controls-padding-medium: 8px;
2424
2424
  --wds-table-list-item-drag-handle-color: #FFFFFF;
2425
- --wds-table-list-item-fill: #212122;
2425
+ --wds-table-list-item-fill: rgba(255, 255, 255, 0);
2426
2426
  --wds-table-list-item-fill-active: #2D2D2E;
2427
2427
  --wds-table-list-item-fill-highlight: #2D2D2E;
2428
2428
  --wds-table-list-item-fill-hover: #3A3A3B;
package/odeditor-dark/foundation.st.css CHANGED
@@ -93,6 +93,14 @@
93
93
  @property st-global(--wds-color-orange-400);
94
94
  @property st-global(--wds-color-orange-500);
95
95
  @property st-global(--wds-color-orange-600);
96
+ @property st-global(--wds-color-pink-0);
97
+ @property st-global(--wds-color-pink-50);
98
+ @property st-global(--wds-color-pink-100);
99
+ @property st-global(--wds-color-pink-200);
100
+ @property st-global(--wds-color-pink-300);
101
+ @property st-global(--wds-color-pink-400);
102
+ @property st-global(--wds-color-pink-500);
103
+ @property st-global(--wds-color-pink-600);
96
104
  @property st-global(--wds-color-purple-0);
97
105
  @property st-global(--wds-color-purple-50);
98
106
  @property st-global(--wds-color-purple-100);
@@ -329,6 +337,14 @@
329
337
  --wds-color-orange-400: #7D3F21;
330
338
  --wds-color-orange-500: #512916;
331
339
  --wds-color-orange-600: #26130A;
340
+ --wds-color-pink-0: #ffc2f3;
341
+ --wds-color-pink-50: #ffa9ef;
342
+ --wds-color-pink-100: #ff69e4;
343
+ --wds-color-pink-200: #ea39ca;
344
+ --wds-color-pink-300: #bd22a1;
345
+ --wds-color-pink-400: #79466f;
346
+ --wds-color-pink-500: #40223d;
347
+ --wds-color-pink-600: #26021f;
332
348
  --wds-color-purple-0: #5000aa;
333
349
  --wds-color-purple-50: #6100cf;
334
350
  --wds-color-purple-100: #7200f3;
package/odeditor-dark/semantic.st.css CHANGED
@@ -405,6 +405,7 @@
405
405
  @property st-global(--wds-illustration-color-4);
406
406
  @property st-global(--wds-illustration-color-5);
407
407
  @property st-global(--wds-illustration-color-6);
408
+ @property st-global(--wds-illustration-color-7);
408
409
  @property st-global(--wds-illustration-color-background);
409
410
  @property st-global(--wds-inner-shadow-blur-input);
410
411
  @property st-global(--wds-inner-shadow-blur-primary);
@@ -907,6 +908,7 @@
907
908
  --wds-illustration-color-4: #D5DFFF;
908
909
  --wds-illustration-color-5: #EAEFFF;
909
910
  --wds-illustration-color-6: #EAEFFF;
911
+ --wds-illustration-color-7: #B8C4FF;
910
912
  --wds-illustration-color-background: #2D2D2E;
911
913
  --wds-inner-shadow-blur-input: 3px;
912
914
  --wds-inner-shadow-blur-primary: 2px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.202.0",
3
+ "version": "1.203.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": "600306c206d6d3954bf671195508d3fb78110776f2648926c51c2c9d"
35
+ "falconPackageHash": "f9e57f137412fd8f8c55b7217cb8c1f7269ede438e8dbc6cdf793334"
36
36
  }
package/studio/all.css CHANGED
@@ -1,6 +1,7 @@
1
1
  :root, .wds-tokens {
2
2
  --wds-illustration-color-background: #F8F6F6;
3
- --wds-illustration-color-6: #002297;
3
+ --wds-illustration-color-7: #002297;
4
+ --wds-illustration-color-6: #002296;
4
5
  --wds-illustration-color-5: #EAEFF1;
5
6
  --wds-illustration-color-4: #D5DFFF;
6
7
  --wds-illustration-color-3: #B8C4FF;
@@ -207,6 +208,14 @@
207
208
  --wds-color-purple-100: #9a27d5;
208
209
  --wds-color-purple-50: #8e1dd1;
209
210
  --wds-color-purple-0: #7927a3;
211
+ --wds-color-pink-600: #feebfb;
212
+ --wds-color-pink-500: #fdd7f2;
213
+ --wds-color-pink-400: #ffc2f3;
214
+ --wds-color-pink-300: #ffa9ef;
215
+ --wds-color-pink-200: #ff77e6;
216
+ --wds-color-pink-100: #f639d3;
217
+ --wds-color-pink-50: #e221ac;
218
+ --wds-color-pink-0: #bd22a1;
210
219
  --wds-color-orange-600: #feefea;
211
220
  --wds-color-orange-500: #fee8e1;
212
221
  --wds-color-orange-400: #fdd7cc;
package/studio/all.scss CHANGED
@@ -123,7 +123,8 @@
123
123
  --wds-input-shadow-focus-standard: transparent;
124
124
  --wds-input-shadow-focus-destructive: transparent;
125
125
  --wds-illustration-color-background: #F8F6F6;
126
- --wds-illustration-color-6: #002297;
126
+ --wds-illustration-color-7: #002297;
127
+ --wds-illustration-color-6: #002296;
127
128
  --wds-illustration-color-5: #EAEFF1;
128
129
  --wds-illustration-color-4: #D5DFFF;
129
130
  --wds-illustration-color-3: #B8C4FF;
@@ -187,6 +188,14 @@
187
188
  --wds-color-purple-100: #9a27d5;
188
189
  --wds-color-purple-50: #8e1dd1;
189
190
  --wds-color-purple-0: #7927a3;
191
+ --wds-color-pink-600: #feebfb;
192
+ --wds-color-pink-500: #fdd7f2;
193
+ --wds-color-pink-400: #ffc2f3;
194
+ --wds-color-pink-300: #ffa9ef;
195
+ --wds-color-pink-200: #ff77e6;
196
+ --wds-color-pink-100: #f639d3;
197
+ --wds-color-pink-50: #e221ac;
198
+ --wds-color-pink-0: #bd22a1;
190
199
  --wds-color-picker-width: 236px;
191
200
  --wds-color-orange-600: #feefea;
192
201
  --wds-color-orange-500: #fee8e1;
package/studio/all.st.css CHANGED
@@ -769,6 +769,14 @@
769
769
  @property st-global(--wds-color-picker-padding-horizontal);
770
770
  @property st-global(--wds-color-picker-padding-vertical);
771
771
  @property st-global(--wds-color-picker-width);
772
+ @property st-global(--wds-color-pink-0);
773
+ @property st-global(--wds-color-pink-50);
774
+ @property st-global(--wds-color-pink-100);
775
+ @property st-global(--wds-color-pink-200);
776
+ @property st-global(--wds-color-pink-300);
777
+ @property st-global(--wds-color-pink-400);
778
+ @property st-global(--wds-color-pink-500);
779
+ @property st-global(--wds-color-pink-600);
772
780
  @property st-global(--wds-color-purple-0);
773
781
  @property st-global(--wds-color-purple-50);
774
782
  @property st-global(--wds-color-purple-100);
@@ -1097,6 +1105,7 @@
1097
1105
  @property st-global(--wds-illustration-color-4);
1098
1106
  @property st-global(--wds-illustration-color-5);
1099
1107
  @property st-global(--wds-illustration-color-6);
1108
+ @property st-global(--wds-illustration-color-7);
1100
1109
  @property st-global(--wds-illustration-color-background);
1101
1110
  @property st-global(--wds-image-border-radius-default);
1102
1111
  @property st-global(--wds-image-border-radius-none);
@@ -2901,6 +2910,14 @@
2901
2910
  --wds-color-picker-padding-horizontal: 16px;
2902
2911
  --wds-color-picker-padding-vertical: 12px;
2903
2912
  --wds-color-picker-width: 236px;
2913
+ --wds-color-pink-0: #bd22a1;
2914
+ --wds-color-pink-50: #e221ac;
2915
+ --wds-color-pink-100: #f639d3;
2916
+ --wds-color-pink-200: #ff77e6;
2917
+ --wds-color-pink-300: #ffa9ef;
2918
+ --wds-color-pink-400: #ffc2f3;
2919
+ --wds-color-pink-500: #fdd7f2;
2920
+ --wds-color-pink-600: #feebfb;
2904
2921
  --wds-color-purple-0: #7927a3;
2905
2922
  --wds-color-purple-50: #8e1dd1;
2906
2923
  --wds-color-purple-100: #9a27d5;
@@ -3228,7 +3245,8 @@
3228
3245
  --wds-illustration-color-3: #B8C4FF;
3229
3246
  --wds-illustration-color-4: #D5DFFF;
3230
3247
  --wds-illustration-color-5: #EAEFF1;
3231
- --wds-illustration-color-6: #002297;
3248
+ --wds-illustration-color-6: #002296;
3249
+ --wds-illustration-color-7: #002297;
3232
3250
  --wds-illustration-color-background: #F8F6F6;
3233
3251
  --wds-image-border-radius-default: 4px;
3234
3252
  --wds-image-border-radius-none: 0px;
package/studio/foundation.st.css CHANGED
@@ -92,6 +92,14 @@
92
92
  @property st-global(--wds-color-orange-400);
93
93
  @property st-global(--wds-color-orange-500);
94
94
  @property st-global(--wds-color-orange-600);
95
+ @property st-global(--wds-color-pink-0);
96
+ @property st-global(--wds-color-pink-50);
97
+ @property st-global(--wds-color-pink-100);
98
+ @property st-global(--wds-color-pink-200);
99
+ @property st-global(--wds-color-pink-300);
100
+ @property st-global(--wds-color-pink-400);
101
+ @property st-global(--wds-color-pink-500);
102
+ @property st-global(--wds-color-pink-600);
95
103
  @property st-global(--wds-color-purple-0);
96
104
  @property st-global(--wds-color-purple-50);
97
105
  @property st-global(--wds-color-purple-100);
@@ -324,6 +332,14 @@
324
332
  --wds-color-orange-400: #fdd7cc;
325
333
  --wds-color-orange-500: #fee8e1;
326
334
  --wds-color-orange-600: #feefea;
335
+ --wds-color-pink-0: #bd22a1;
336
+ --wds-color-pink-50: #e221ac;
337
+ --wds-color-pink-100: #f639d3;
338
+ --wds-color-pink-200: #ff77e6;
339
+ --wds-color-pink-300: #ffa9ef;
340
+ --wds-color-pink-400: #ffc2f3;
341
+ --wds-color-pink-500: #fdd7f2;
342
+ --wds-color-pink-600: #feebfb;
327
343
  --wds-color-purple-0: #7927a3;
328
344
  --wds-color-purple-50: #8e1dd1;
329
345
  --wds-color-purple-100: #9a27d5;
package/studio/semantic.st.css CHANGED
@@ -405,6 +405,7 @@
405
405
  @property st-global(--wds-illustration-color-4);
406
406
  @property st-global(--wds-illustration-color-5);
407
407
  @property st-global(--wds-illustration-color-6);
408
+ @property st-global(--wds-illustration-color-7);
408
409
  @property st-global(--wds-illustration-color-background);
409
410
  @property st-global(--wds-inner-shadow-blur-input);
410
411
  @property st-global(--wds-inner-shadow-blur-primary);
@@ -906,7 +907,8 @@
906
907
  --wds-illustration-color-3: #B8C4FF;
907
908
  --wds-illustration-color-4: #D5DFFF;
908
909
  --wds-illustration-color-5: #EAEFF1;
909
- --wds-illustration-color-6: #002297;
910
+ --wds-illustration-color-6: #002296;
911
+ --wds-illustration-color-7: #002297;
910
912
  --wds-illustration-color-background: #F8F6F6;
911
913
  --wds-inner-shadow-blur-input: 0px;
912
914
  --wds-inner-shadow-blur-primary: 0px;
package/wixel/all.css CHANGED
@@ -202,6 +202,14 @@
202
202
  --wds-color-purple-100: #9a27d5;
203
203
  --wds-color-purple-50: #8e1dd1;
204
204
  --wds-color-purple-0: #7927a3;
205
+ --wds-color-pink-600: #feebfb;
206
+ --wds-color-pink-500: #fdd7f2;
207
+ --wds-color-pink-400: #ffc2f3;
208
+ --wds-color-pink-300: #ffa9ef;
209
+ --wds-color-pink-200: #ff77e6;
210
+ --wds-color-pink-100: #f639d3;
211
+ --wds-color-pink-50: #e221ac;
212
+ --wds-color-pink-0: #bd22a1;
205
213
  --wds-color-orange-600: #feefea;
206
214
  --wds-color-orange-500: #fee8e1;
207
215
  --wds-color-orange-400: #fdd7cc;
package/wixel/all.scss CHANGED
@@ -178,6 +178,14 @@
178
178
  --wds-color-purple-100: #9a27d5;
179
179
  --wds-color-purple-50: #8e1dd1;
180
180
  --wds-color-purple-0: #7927a3;
181
+ --wds-color-pink-600: #feebfb;
182
+ --wds-color-pink-500: #fdd7f2;
183
+ --wds-color-pink-400: #ffc2f3;
184
+ --wds-color-pink-300: #ffa9ef;
185
+ --wds-color-pink-200: #ff77e6;
186
+ --wds-color-pink-100: #f639d3;
187
+ --wds-color-pink-50: #e221ac;
188
+ --wds-color-pink-0: #bd22a1;
181
189
  --wds-color-orange-600: #feefea;
182
190
  --wds-color-orange-500: #fee8e1;
183
191
  --wds-color-orange-400: #fdd7cc;
package/wixel/all.st.css CHANGED
@@ -749,6 +749,14 @@
749
749
  @property st-global(--wds-color-orange-400);
750
750
  @property st-global(--wds-color-orange-500);
751
751
  @property st-global(--wds-color-orange-600);
752
+ @property st-global(--wds-color-pink-0);
753
+ @property st-global(--wds-color-pink-50);
754
+ @property st-global(--wds-color-pink-100);
755
+ @property st-global(--wds-color-pink-200);
756
+ @property st-global(--wds-color-pink-300);
757
+ @property st-global(--wds-color-pink-400);
758
+ @property st-global(--wds-color-pink-500);
759
+ @property st-global(--wds-color-pink-600);
752
760
  @property st-global(--wds-color-purple-0);
753
761
  @property st-global(--wds-color-purple-50);
754
762
  @property st-global(--wds-color-purple-100);
@@ -2822,6 +2830,14 @@
2822
2830
  --wds-color-orange-400: #fdd7cc;
2823
2831
  --wds-color-orange-500: #fee8e1;
2824
2832
  --wds-color-orange-600: #feefea;
2833
+ --wds-color-pink-0: #bd22a1;
2834
+ --wds-color-pink-50: #e221ac;
2835
+ --wds-color-pink-100: #f639d3;
2836
+ --wds-color-pink-200: #ff77e6;
2837
+ --wds-color-pink-300: #ffa9ef;
2838
+ --wds-color-pink-400: #ffc2f3;
2839
+ --wds-color-pink-500: #fdd7f2;
2840
+ --wds-color-pink-600: #feebfb;
2825
2841
  --wds-color-purple-0: #7927a3;
2826
2842
  --wds-color-purple-50: #8e1dd1;
2827
2843
  --wds-color-purple-100: #9a27d5;
package/wixel/foundation.st.css CHANGED
@@ -89,6 +89,14 @@
89
89
  @property st-global(--wds-color-orange-400);
90
90
  @property st-global(--wds-color-orange-500);
91
91
  @property st-global(--wds-color-orange-600);
92
+ @property st-global(--wds-color-pink-0);
93
+ @property st-global(--wds-color-pink-50);
94
+ @property st-global(--wds-color-pink-100);
95
+ @property st-global(--wds-color-pink-200);
96
+ @property st-global(--wds-color-pink-300);
97
+ @property st-global(--wds-color-pink-400);
98
+ @property st-global(--wds-color-pink-500);
99
+ @property st-global(--wds-color-pink-600);
92
100
  @property st-global(--wds-color-purple-0);
93
101
  @property st-global(--wds-color-purple-50);
94
102
  @property st-global(--wds-color-purple-100);
@@ -316,6 +324,14 @@
316
324
  --wds-color-orange-400: #fdd7cc;
317
325
  --wds-color-orange-500: #fee8e1;
318
326
  --wds-color-orange-600: #feefea;
327
+ --wds-color-pink-0: #bd22a1;
328
+ --wds-color-pink-50: #e221ac;
329
+ --wds-color-pink-100: #f639d3;
330
+ --wds-color-pink-200: #ff77e6;
331
+ --wds-color-pink-300: #ffa9ef;
332
+ --wds-color-pink-400: #ffc2f3;
333
+ --wds-color-pink-500: #fdd7f2;
334
+ --wds-color-pink-600: #feebfb;
319
335
  --wds-color-purple-0: #7927a3;
320
336
  --wds-color-purple-50: #8e1dd1;
321
337
  --wds-color-purple-100: #9a27d5;