@wix/design-system-tokens 1.202.0 → 1.204.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 (30) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/all.css +9 -0
  3. package/all.scss +9 -0
  4. package/all.st.css +18 -0
  5. package/component.st.css +2 -0
  6. package/foundation.st.css +16 -0
  7. package/odeditor/all.css +13 -3
  8. package/odeditor/all.scss +12 -2
  9. package/odeditor/all.st.css +22 -2
  10. package/odeditor/component.st.css +4 -2
  11. package/odeditor/foundation.st.css +16 -0
  12. package/odeditor/semantic.st.css +2 -0
  13. package/odeditor-dark/all.css +12 -2
  14. package/odeditor-dark/all.scss +11 -1
  15. package/odeditor-dark/all.st.css +21 -1
  16. package/odeditor-dark/component.st.css +3 -1
  17. package/odeditor-dark/foundation.st.css +16 -0
  18. package/odeditor-dark/semantic.st.css +2 -0
  19. package/package.json +2 -2
  20. package/studio/all.css +11 -1
  21. package/studio/all.scss +11 -1
  22. package/studio/all.st.css +21 -1
  23. package/studio/component.st.css +2 -0
  24. package/studio/foundation.st.css +16 -0
  25. package/studio/semantic.st.css +3 -1
  26. package/wixel/all.css +9 -0
  27. package/wixel/all.scss +9 -0
  28. package/wixel/all.st.css +18 -0
  29. package/wixel/component.st.css +2 -0
  30. package/wixel/foundation.st.css +16 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## 1.204.0 - 2026-06-18
2
+
3
+ ### Bug Fixes
4
+
5
+ - fix(Pagination): harmony dark current page background and arrow fill token [16412](https://github.com/wix-private/wix-design-systems/pull/16412)
6
+
7
+ ## 1.203.0 - 2026-06-17
8
+
9
+ ### Bug Fixes
10
+
11
+ - fix(TableListItem): make TableListItem background transparent in Harmony dark theme [16397](https://github.com/wix-private/wix-design-systems/pull/16397)
12
+
13
+ ### Features
14
+
15
+ - feat(tokens): add pink color family [16392](https://github.com/wix-private/wix-design-systems/pull/16392)
16
+
1
17
  ## 1.202.0 - 2026-06-15
2
18
 
3
19
  ### 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;
@@ -1691,6 +1699,7 @@
1691
1699
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1692
1700
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1693
1701
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1702
+ --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1694
1703
  --wds-number-input-icon-fill: var(--wds-color-text-primary);
1695
1704
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1696
1705
  --wds-multiselect-icon-fill: var(--wds-color-text-primary);
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;
@@ -1680,6 +1688,7 @@
1680
1688
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1681
1689
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1682
1690
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1691
+ --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1683
1692
  --wds-number-input-icon-fill: var(--wds-color-text-primary);
1684
1693
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1685
1694
  --wds-multiselect-icon-fill: var(--wds-color-text-primary);
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);
@@ -1350,6 +1358,7 @@
1350
1358
  @property st-global(--wds-page-header-padding-horizontal-small);
1351
1359
  @property st-global(--wds-page-header-padding-vertical);
1352
1360
  @property st-global(--wds-page-header-padding-vertical-small);
1361
+ @property st-global(--wds-pagination-arrow-fill);
1353
1362
  @property st-global(--wds-pagination-fill);
1354
1363
  @property st-global(--wds-pagination-fill-active);
1355
1364
  @property st-global(--wds-pagination-fill-hover);
@@ -2917,6 +2926,14 @@
2917
2926
  --wds-color-picker-padding-horizontal: 18px;
2918
2927
  --wds-color-picker-padding-vertical: 12px;
2919
2928
  --wds-color-picker-width: 240px;
2929
+ --wds-color-pink-0: #bd22a1;
2930
+ --wds-color-pink-50: #e221ac;
2931
+ --wds-color-pink-100: #f639d3;
2932
+ --wds-color-pink-200: #ff77e6;
2933
+ --wds-color-pink-300: #ffa9ef;
2934
+ --wds-color-pink-400: #ffc2f3;
2935
+ --wds-color-pink-500: #fdd7f2;
2936
+ --wds-color-pink-600: #feebfb;
2920
2937
  --wds-color-purple-0: #7416a5;
2921
2938
  --wds-color-purple-50: #8e1dd1;
2922
2939
  --wds-color-purple-100: #9a27d5;
@@ -3490,6 +3507,7 @@
3490
3507
  --wds-page-header-padding-horizontal-small: 24px;
3491
3508
  --wds-page-header-padding-vertical: 24px;
3492
3509
  --wds-page-header-padding-vertical-small: 18px;
3510
+ --wds-pagination-arrow-fill: #116dff;
3493
3511
  --wds-pagination-fill: #ffffff;
3494
3512
  --wds-pagination-fill-active: #116dff;
3495
3513
  --wds-pagination-fill-hover: #0f62e6;
package/component.st.css CHANGED
@@ -778,6 +778,7 @@
778
778
  @property st-global(--wds-page-header-padding-horizontal-small);
779
779
  @property st-global(--wds-page-header-padding-vertical);
780
780
  @property st-global(--wds-page-header-padding-vertical-small);
781
+ @property st-global(--wds-pagination-arrow-fill);
781
782
  @property st-global(--wds-pagination-fill);
782
783
  @property st-global(--wds-pagination-fill-active);
783
784
  @property st-global(--wds-pagination-fill-hover);
@@ -2191,6 +2192,7 @@
2191
2192
  --wds-page-header-padding-horizontal-small: 24px;
2192
2193
  --wds-page-header-padding-vertical: 24px;
2193
2194
  --wds-page-header-padding-vertical-small: 18px;
2195
+ --wds-pagination-arrow-fill: #116dff;
2194
2196
  --wds-pagination-fill: #ffffff;
2195
2197
  --wds-pagination-fill-active: #116dff;
2196
2198
  --wds-pagination-fill-hover: #0f62e6;
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);
@@ -1742,9 +1751,10 @@
1742
1751
  --wds-radio-border-disabled: var(--wds-color-border-transparent-primary);
1743
1752
  --wds-radio-border-active: var(--wds-color-fill-standard-primary);
1744
1753
  --wds-popover-fill: var(--wds-color-fill-surface-overlay);
1745
- --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1746
- --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1754
+ --wds-pagination-fill-hover: var(--wds-color-fill-dark-primary-hover);
1755
+ --wds-pagination-fill-active: var(--wds-color-text-standard-primary);
1747
1756
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1757
+ --wds-pagination-arrow-fill: var(--wds-color-text-standard-primary);
1748
1758
  --wds-number-input-spacing: var(--wds-form-field-label-gap-tiny);
1749
1759
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1750
1760
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
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;
@@ -1730,9 +1739,10 @@
1730
1739
  --wds-radio-border-disabled: var(--wds-color-border-transparent-primary);
1731
1740
  --wds-radio-border-active: var(--wds-color-fill-standard-primary);
1732
1741
  --wds-popover-fill: var(--wds-color-fill-surface-overlay);
1733
- --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1734
- --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1742
+ --wds-pagination-fill-hover: var(--wds-color-fill-dark-primary-hover);
1743
+ --wds-pagination-fill-active: var(--wds-color-text-standard-primary);
1735
1744
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1745
+ --wds-pagination-arrow-fill: var(--wds-color-text-standard-primary);
1736
1746
  --wds-number-input-spacing: var(--wds-form-field-label-gap-tiny);
1737
1747
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1738
1748
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
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);
@@ -1302,6 +1311,7 @@
1302
1311
  @property st-global(--wds-page-header-padding-horizontal-small);
1303
1312
  @property st-global(--wds-page-header-padding-vertical);
1304
1313
  @property st-global(--wds-page-header-padding-vertical-small);
1314
+ @property st-global(--wds-pagination-arrow-fill);
1305
1315
  @property st-global(--wds-pagination-fill);
1306
1316
  @property st-global(--wds-pagination-fill-active);
1307
1317
  @property st-global(--wds-pagination-fill-hover);
@@ -2853,6 +2863,14 @@
2853
2863
  --wds-color-picker-padding-horizontal: 16px;
2854
2864
  --wds-color-picker-padding-vertical: 12px;
2855
2865
  --wds-color-picker-width: 236px;
2866
+ --wds-color-pink-0: #bd22a1;
2867
+ --wds-color-pink-50: #e221ac;
2868
+ --wds-color-pink-100: #f639d3;
2869
+ --wds-color-pink-200: #ff77e6;
2870
+ --wds-color-pink-300: #ffa9ef;
2871
+ --wds-color-pink-400: #ffc2f3;
2872
+ --wds-color-pink-500: #fdd7f2;
2873
+ --wds-color-pink-600: #feebfb;
2856
2874
  --wds-color-purple-0: #5000aa;
2857
2875
  --wds-color-purple-50: #6100cf;
2858
2876
  --wds-color-purple-100: #7200f3;
@@ -3170,6 +3188,7 @@
3170
3188
  --wds-illustration-color-4: #D5DFFF;
3171
3189
  --wds-illustration-color-5: #EAEFFF;
3172
3190
  --wds-illustration-color-6: #002294;
3191
+ --wds-illustration-color-7: #002294;
3173
3192
  --wds-illustration-color-background: #F8F6F6;
3174
3193
  --wds-image-border-radius-default: 8px;
3175
3194
  --wds-image-border-radius-none: 0px;
@@ -3394,9 +3413,10 @@
3394
3413
  --wds-page-header-padding-horizontal-small: 24px;
3395
3414
  --wds-page-header-padding-vertical: 24px;
3396
3415
  --wds-page-header-padding-vertical-small: 18px;
3416
+ --wds-pagination-arrow-fill: #151414;
3397
3417
  --wds-pagination-fill: #ffffff;
3398
- --wds-pagination-fill-active: #2f5dff;
3399
- --wds-pagination-fill-hover: #1c3fe5;
3418
+ --wds-pagination-fill-active: #151414;
3419
+ --wds-pagination-fill-hover: #383838;
3400
3420
  --wds-pagination-gap: 4px;
3401
3421
  --wds-pagination-padding-horizontal: 2px;
3402
3422
  --wds-pagination-padding-vertical: 2px;
package/odeditor/component.st.css CHANGED
@@ -726,6 +726,7 @@
726
726
  @property st-global(--wds-page-header-padding-horizontal-small);
727
727
  @property st-global(--wds-page-header-padding-vertical);
728
728
  @property st-global(--wds-page-header-padding-vertical-small);
729
+ @property st-global(--wds-pagination-arrow-fill);
729
730
  @property st-global(--wds-pagination-fill);
730
731
  @property st-global(--wds-pagination-fill-active);
731
732
  @property st-global(--wds-pagination-fill-hover);
@@ -2085,9 +2086,10 @@
2085
2086
  --wds-page-header-padding-horizontal-small: 24px;
2086
2087
  --wds-page-header-padding-vertical: 24px;
2087
2088
  --wds-page-header-padding-vertical-small: 18px;
2089
+ --wds-pagination-arrow-fill: #151414;
2088
2090
  --wds-pagination-fill: #ffffff;
2089
- --wds-pagination-fill-active: #2f5dff;
2090
- --wds-pagination-fill-hover: #1c3fe5;
2091
+ --wds-pagination-fill-active: #151414;
2092
+ --wds-pagination-fill-hover: #383838;
2091
2093
  --wds-pagination-gap: 4px;
2092
2094
  --wds-pagination-padding-horizontal: 2px;
2093
2095
  --wds-pagination-padding-vertical: 2px;
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);
@@ -1767,6 +1776,7 @@
1767
1776
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1768
1777
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1769
1778
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1779
+ --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1770
1780
  --wds-number-input-spacing: var(--wds-form-field-label-gap-tiny);
1771
1781
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1772
1782
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
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);
@@ -1757,6 +1766,7 @@
1757
1766
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1758
1767
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1759
1768
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1769
+ --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1760
1770
  --wds-number-input-spacing: var(--wds-form-field-label-gap-tiny);
1761
1771
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1762
1772
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
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);
@@ -1309,6 +1318,7 @@
1309
1318
  @property st-global(--wds-page-header-padding-horizontal-small);
1310
1319
  @property st-global(--wds-page-header-padding-vertical);
1311
1320
  @property st-global(--wds-page-header-padding-vertical-small);
1321
+ @property st-global(--wds-pagination-arrow-fill);
1312
1322
  @property st-global(--wds-pagination-fill);
1313
1323
  @property st-global(--wds-pagination-fill-active);
1314
1324
  @property st-global(--wds-pagination-fill-hover);
@@ -2866,6 +2876,14 @@
2866
2876
  --wds-color-picker-padding-horizontal: 16px;
2867
2877
  --wds-color-picker-padding-vertical: 12px;
2868
2878
  --wds-color-picker-width: 236px;
2879
+ --wds-color-pink-0: #ffc2f3;
2880
+ --wds-color-pink-50: #ffa9ef;
2881
+ --wds-color-pink-100: #ff69e4;
2882
+ --wds-color-pink-200: #ea39ca;
2883
+ --wds-color-pink-300: #bd22a1;
2884
+ --wds-color-pink-400: #79466f;
2885
+ --wds-color-pink-500: #40223d;
2886
+ --wds-color-pink-600: #26021f;
2869
2887
  --wds-color-purple-0: #5000aa;
2870
2888
  --wds-color-purple-50: #6100cf;
2871
2889
  --wds-color-purple-100: #7200f3;
@@ -3183,6 +3201,7 @@
3183
3201
  --wds-illustration-color-4: #D5DFFF;
3184
3202
  --wds-illustration-color-5: #EAEFFF;
3185
3203
  --wds-illustration-color-6: #EAEFFF;
3204
+ --wds-illustration-color-7: #B8C4FF;
3186
3205
  --wds-illustration-color-background: #2D2D2E;
3187
3206
  --wds-image-border-radius-default: 8px;
3188
3207
  --wds-image-border-radius-none: 0px;
@@ -3410,6 +3429,7 @@
3410
3429
  --wds-page-header-padding-horizontal-small: 24px;
3411
3430
  --wds-page-header-padding-vertical: 24px;
3412
3431
  --wds-page-header-padding-vertical-small: 18px;
3432
+ --wds-pagination-arrow-fill: #82B0FF;
3413
3433
  --wds-pagination-fill: #212122;
3414
3434
  --wds-pagination-fill-active: #82B0FF;
3415
3435
  --wds-pagination-fill-hover: #B1CCFF;
@@ -3888,7 +3908,7 @@
3888
3908
  --wds-table-list-item-border-radius: 8px;
3889
3909
  --wds-table-list-item-controls-padding-medium: 8px;
3890
3910
  --wds-table-list-item-drag-handle-color: #FFFFFF;
3891
- --wds-table-list-item-fill: #212122;
3911
+ --wds-table-list-item-fill: rgba(255, 255, 255, 0);
3892
3912
  --wds-table-list-item-fill-active: #2D2D2E;
3893
3913
  --wds-table-list-item-fill-highlight: #2D2D2E;
3894
3914
  --wds-table-list-item-fill-hover: #3A3A3B;
package/odeditor-dark/component.st.css CHANGED
@@ -732,6 +732,7 @@
732
732
  @property st-global(--wds-page-header-padding-horizontal-small);
733
733
  @property st-global(--wds-page-header-padding-vertical);
734
734
  @property st-global(--wds-page-header-padding-vertical-small);
735
+ @property st-global(--wds-pagination-arrow-fill);
735
736
  @property st-global(--wds-pagination-fill);
736
737
  @property st-global(--wds-pagination-fill-active);
737
738
  @property st-global(--wds-pagination-fill-hover);
@@ -2099,6 +2100,7 @@
2099
2100
  --wds-page-header-padding-horizontal-small: 24px;
2100
2101
  --wds-page-header-padding-vertical: 24px;
2101
2102
  --wds-page-header-padding-vertical-small: 18px;
2103
+ --wds-pagination-arrow-fill: #82B0FF;
2102
2104
  --wds-pagination-fill: #212122;
2103
2105
  --wds-pagination-fill-active: #82B0FF;
2104
2106
  --wds-pagination-fill-hover: #B1CCFF;
@@ -2422,7 +2424,7 @@
2422
2424
  --wds-table-list-item-border-radius: 8px;
2423
2425
  --wds-table-list-item-controls-padding-medium: 8px;
2424
2426
  --wds-table-list-item-drag-handle-color: #FFFFFF;
2425
- --wds-table-list-item-fill: #212122;
2427
+ --wds-table-list-item-fill: rgba(255, 255, 255, 0);
2426
2428
  --wds-table-list-item-fill-active: #2D2D2E;
2427
2429
  --wds-table-list-item-fill-highlight: #2D2D2E;
2428
2430
  --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.204.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": "9f785cebc18bafac1c42b8af2e97cd08491a613fed333b9583230d9b"
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;
@@ -1735,6 +1744,7 @@
1735
1744
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1736
1745
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1737
1746
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1747
+ --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1738
1748
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1739
1749
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1740
1750
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
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;
@@ -1724,6 +1733,7 @@
1724
1733
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1725
1734
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1726
1735
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1736
+ --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1727
1737
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1728
1738
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1729
1739
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
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);
@@ -1343,6 +1352,7 @@
1343
1352
  @property st-global(--wds-page-header-padding-horizontal-small);
1344
1353
  @property st-global(--wds-page-header-padding-vertical);
1345
1354
  @property st-global(--wds-page-header-padding-vertical-small);
1355
+ @property st-global(--wds-pagination-arrow-fill);
1346
1356
  @property st-global(--wds-pagination-fill);
1347
1357
  @property st-global(--wds-pagination-fill-active);
1348
1358
  @property st-global(--wds-pagination-fill-hover);
@@ -2901,6 +2911,14 @@
2901
2911
  --wds-color-picker-padding-horizontal: 16px;
2902
2912
  --wds-color-picker-padding-vertical: 12px;
2903
2913
  --wds-color-picker-width: 236px;
2914
+ --wds-color-pink-0: #bd22a1;
2915
+ --wds-color-pink-50: #e221ac;
2916
+ --wds-color-pink-100: #f639d3;
2917
+ --wds-color-pink-200: #ff77e6;
2918
+ --wds-color-pink-300: #ffa9ef;
2919
+ --wds-color-pink-400: #ffc2f3;
2920
+ --wds-color-pink-500: #fdd7f2;
2921
+ --wds-color-pink-600: #feebfb;
2904
2922
  --wds-color-purple-0: #7927a3;
2905
2923
  --wds-color-purple-50: #8e1dd1;
2906
2924
  --wds-color-purple-100: #9a27d5;
@@ -3228,7 +3246,8 @@
3228
3246
  --wds-illustration-color-3: #B8C4FF;
3229
3247
  --wds-illustration-color-4: #D5DFFF;
3230
3248
  --wds-illustration-color-5: #EAEFF1;
3231
- --wds-illustration-color-6: #002297;
3249
+ --wds-illustration-color-6: #002296;
3250
+ --wds-illustration-color-7: #002297;
3232
3251
  --wds-illustration-color-background: #F8F6F6;
3233
3252
  --wds-image-border-radius-default: 4px;
3234
3253
  --wds-image-border-radius-none: 0px;
@@ -3475,6 +3494,7 @@
3475
3494
  --wds-page-header-padding-horizontal-small: 24px;
3476
3495
  --wds-page-header-padding-vertical: 24px;
3477
3496
  --wds-page-header-padding-vertical-small: 18px;
3497
+ --wds-pagination-arrow-fill: #116dff;
3478
3498
  --wds-pagination-fill: #ffffff;
3479
3499
  --wds-pagination-fill-active: #116dff;
3480
3500
  --wds-pagination-fill-hover: #0f62e6;
package/studio/component.st.css CHANGED
@@ -768,6 +768,7 @@
768
768
  @property st-global(--wds-page-header-padding-horizontal-small);
769
769
  @property st-global(--wds-page-header-padding-vertical);
770
770
  @property st-global(--wds-page-header-padding-vertical-small);
771
+ @property st-global(--wds-pagination-arrow-fill);
771
772
  @property st-global(--wds-pagination-fill);
772
773
  @property st-global(--wds-pagination-fill-active);
773
774
  @property st-global(--wds-pagination-fill-hover);
@@ -2170,6 +2171,7 @@
2170
2171
  --wds-page-header-padding-horizontal-small: 24px;
2171
2172
  --wds-page-header-padding-vertical: 24px;
2172
2173
  --wds-page-header-padding-vertical-small: 18px;
2174
+ --wds-pagination-arrow-fill: #116dff;
2173
2175
  --wds-pagination-fill: #ffffff;
2174
2176
  --wds-pagination-fill-active: #116dff;
2175
2177
  --wds-pagination-fill-hover: #0f62e6;
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;
@@ -1670,6 +1678,7 @@
1670
1678
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1671
1679
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1672
1680
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1681
+ --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1673
1682
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1674
1683
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1675
1684
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
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;
@@ -1659,6 +1667,7 @@
1659
1667
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1660
1668
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1661
1669
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1670
+ --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1662
1671
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1663
1672
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1664
1673
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
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);
@@ -1315,6 +1323,7 @@
1315
1323
  @property st-global(--wds-page-header-padding-horizontal-small);
1316
1324
  @property st-global(--wds-page-header-padding-vertical);
1317
1325
  @property st-global(--wds-page-header-padding-vertical-small);
1326
+ @property st-global(--wds-pagination-arrow-fill);
1318
1327
  @property st-global(--wds-pagination-fill);
1319
1328
  @property st-global(--wds-pagination-fill-active);
1320
1329
  @property st-global(--wds-pagination-fill-hover);
@@ -2822,6 +2831,14 @@
2822
2831
  --wds-color-orange-400: #fdd7cc;
2823
2832
  --wds-color-orange-500: #fee8e1;
2824
2833
  --wds-color-orange-600: #feefea;
2834
+ --wds-color-pink-0: #bd22a1;
2835
+ --wds-color-pink-50: #e221ac;
2836
+ --wds-color-pink-100: #f639d3;
2837
+ --wds-color-pink-200: #ff77e6;
2838
+ --wds-color-pink-300: #ffa9ef;
2839
+ --wds-color-pink-400: #ffc2f3;
2840
+ --wds-color-pink-500: #fdd7f2;
2841
+ --wds-color-pink-600: #feebfb;
2825
2842
  --wds-color-purple-0: #7927a3;
2826
2843
  --wds-color-purple-50: #8e1dd1;
2827
2844
  --wds-color-purple-100: #9a27d5;
@@ -3388,6 +3405,7 @@
3388
3405
  --wds-page-header-padding-horizontal-small: 24px;
3389
3406
  --wds-page-header-padding-vertical: 24px;
3390
3407
  --wds-page-header-padding-vertical-small: 18px;
3408
+ --wds-pagination-arrow-fill: #4a57ff;
3391
3409
  --wds-pagination-fill: #ffffff;
3392
3410
  --wds-pagination-fill-active: #4a57ff;
3393
3411
  --wds-pagination-fill-hover: #4849f1;
package/wixel/component.st.css CHANGED
@@ -749,6 +749,7 @@
749
749
  @property st-global(--wds-page-header-padding-horizontal-small);
750
750
  @property st-global(--wds-page-header-padding-vertical);
751
751
  @property st-global(--wds-page-header-padding-vertical-small);
752
+ @property st-global(--wds-pagination-arrow-fill);
752
753
  @property st-global(--wds-pagination-fill);
753
754
  @property st-global(--wds-pagination-fill-active);
754
755
  @property st-global(--wds-pagination-fill-hover);
@@ -2117,6 +2118,7 @@
2117
2118
  --wds-page-header-padding-horizontal-small: 24px;
2118
2119
  --wds-page-header-padding-vertical: 24px;
2119
2120
  --wds-page-header-padding-vertical-small: 18px;
2121
+ --wds-pagination-arrow-fill: #4a57ff;
2120
2122
  --wds-pagination-fill: #ffffff;
2121
2123
  --wds-pagination-fill-active: #4a57ff;
2122
2124
  --wds-pagination-fill-hover: #4849f1;
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;