@wix/design-system-tokens 1.196.0 → 1.198.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/all.css +3 -0
  3. package/all.scss +3 -0
  4. package/all.st.css +6 -0
  5. package/component.st.css +6 -0
  6. package/odeditor/all.css +12 -2
  7. package/odeditor/all.scss +12 -2
  8. package/odeditor/all.st.css +22 -2
  9. package/odeditor/component.st.css +8 -2
  10. package/odeditor/semantic.st.css +14 -0
  11. package/odeditor-dark/all.css +10 -0
  12. package/odeditor-dark/all.scss +10 -0
  13. package/odeditor-dark/all.st.css +20 -0
  14. package/odeditor-dark/component.st.css +6 -0
  15. package/odeditor-dark/semantic.st.css +14 -0
  16. package/package.json +2 -2
  17. package/studio/all.css +10 -0
  18. package/studio/all.scss +10 -0
  19. package/studio/all.st.css +20 -0
  20. package/studio/component.st.css +6 -0
  21. package/studio/semantic.st.css +14 -0
  22. package/wixel/all.css +3 -0
  23. package/wixel/all.scss +3 -0
  24. package/wixel/all.st.css +6 -0
  25. package/wixel/component.st.css +6 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## 1.198.0 - 2026-06-04
2
+
3
+ ### Bug Fixes
4
+
5
+ - fix(tokens): update icon-button secondary fill tokens in odeditor theme [16324](https://github.com/wix-private/wix-design-systems/pull/16324)
6
+
7
+ ### Features
8
+
9
+ - feat(CodeSnippet): add component [16274](https://github.com/wix-private/wix-design-systems/pull/16274)
10
+
1
11
  ## 1.196.0 - 2026-05-27
2
12
 
3
13
  ### Bug Fixes
package/all.css CHANGED
@@ -1319,6 +1319,9 @@
1319
1319
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1320
1320
  --wds-color-picker-padding-vertical: var(--wds-space-200);
1321
1321
  --wds-color-picker-padding-horizontal: var(--wds-space-300);
1322
+ --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-200);
1323
+ --wds-code-snippet-border-radius-multiline: var(--wds-border-radius-200);
1324
+ --wds-code-snippet-border-radius-inline: var(--wds-border-radius-200);
1322
1325
  --wds-close-button-standard-filled-size-small: var(--wds-space-300);
1323
1326
  --wds-close-button-standard-filled-size-medium: var(--wds-space-400);
1324
1327
  --wds-close-button-standard-filled-size-large: var(--wds-space-500);
package/all.scss CHANGED
@@ -1308,6 +1308,9 @@
1308
1308
  --wds-color-border-dark-primary-disabled: var(--wds-color-black-100-transparent-10);
1309
1309
  --wds-color-border-dark-primary-active: var(--wds-color-black-200);
1310
1310
  --wds-color-border-dark-primary: var(--wds-color-black-400);
1311
+ --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-200);
1312
+ --wds-code-snippet-border-radius-multiline: var(--wds-border-radius-200);
1313
+ --wds-code-snippet-border-radius-inline: var(--wds-border-radius-200);
1311
1314
  --wds-close-button-standard-filled-size-small: var(--wds-space-300);
1312
1315
  --wds-close-button-standard-filled-size-medium: var(--wds-space-400);
1313
1316
  --wds-close-button-standard-filled-size-large: var(--wds-space-500);
package/all.st.css CHANGED
@@ -355,6 +355,9 @@
355
355
  @property st-global(--wds-close-button-standard-filled-text);
356
356
  @property st-global(--wds-close-button-standard-filled-text-disabled);
357
357
  @property st-global(--wds-close-button-standard-filled-text-hover);
358
+ @property st-global(--wds-code-snippet-border-radius-inline);
359
+ @property st-global(--wds-code-snippet-border-radius-multiline);
360
+ @property st-global(--wds-code-snippet-border-radius-singleline);
358
361
  @property st-global(--wds-color-black-100);
359
362
  @property st-global(--wds-color-black-100-transparent-0);
360
363
  @property st-global(--wds-color-black-100-transparent-5);
@@ -2482,6 +2485,9 @@
2482
2485
  --wds-close-button-standard-filled-text: #116dff;
2483
2486
  --wds-close-button-standard-filled-text-disabled: #ffffff;
2484
2487
  --wds-close-button-standard-filled-text-hover: #116dff;
2488
+ --wds-code-snippet-border-radius-inline: 4px;
2489
+ --wds-code-snippet-border-radius-multiline: 4px;
2490
+ --wds-code-snippet-border-radius-singleline: 4px;
2485
2491
  --wds-color-black-100: #000624;
2486
2492
  --wds-color-black-100-transparent-0: rgba(0, 6, 36, 0);
2487
2493
  --wds-color-black-100-transparent-5: rgba(0, 6, 36, .05);
package/component.st.css CHANGED
@@ -317,6 +317,9 @@
317
317
  @property st-global(--wds-close-button-standard-filled-text);
318
318
  @property st-global(--wds-close-button-standard-filled-text-disabled);
319
319
  @property st-global(--wds-close-button-standard-filled-text-hover);
320
+ @property st-global(--wds-code-snippet-border-radius-inline);
321
+ @property st-global(--wds-code-snippet-border-radius-multiline);
322
+ @property st-global(--wds-code-snippet-border-radius-singleline);
320
323
  @property st-global(--wds-color-picker-padding-horizontal);
321
324
  @property st-global(--wds-color-picker-padding-vertical);
322
325
  @property st-global(--wds-color-picker-width);
@@ -1721,6 +1724,9 @@
1721
1724
  --wds-close-button-standard-filled-text: #116dff;
1722
1725
  --wds-close-button-standard-filled-text-disabled: #ffffff;
1723
1726
  --wds-close-button-standard-filled-text-hover: #116dff;
1727
+ --wds-code-snippet-border-radius-inline: 4px;
1728
+ --wds-code-snippet-border-radius-multiline: 4px;
1729
+ --wds-code-snippet-border-radius-singleline: 4px;
1724
1730
  --wds-color-picker-padding-horizontal: 18px;
1725
1731
  --wds-color-picker-padding-vertical: 12px;
1726
1732
  --wds-color-picker-width: 240px;
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;
@@ -1302,7 +1309,6 @@
1302
1309
  --wds-icon-button-color-text-dark-secondary-disabled: var(--wds-color-black-500);
1303
1310
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-black-500);
1304
1311
  --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-black-700);
1305
- --wds-icon-button-color-fill-standard-secondary: var(--wds-color-black-100-transparent-0);
1306
1312
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-black-700);
1307
1313
  --wds-icon-button-color-fill-premium-secondary-disabled: var(--wds-color-black-700);
1308
1314
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-black-700);
@@ -1371,6 +1377,9 @@
1371
1377
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1372
1378
  --wds-color-picker-padding-vertical: var(--wds-space-300);
1373
1379
  --wds-color-picker-padding-horizontal: var(--wds-space-400);
1380
+ --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-500);
1381
+ --wds-code-snippet-border-radius-multiline: var(--wds-border-radius-400);
1382
+ --wds-code-snippet-border-radius-inline: var(--wds-border-radius-300);
1374
1383
  --wds-close-button-standard-filled-size-small: var(--wds-space-475);
1375
1384
  --wds-close-button-standard-filled-size-medium: var(--wds-space-600);
1376
1385
  --wds-close-button-standard-filled-size-large: var(--wds-space-750);
@@ -1824,6 +1833,7 @@
1824
1833
  --wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-light-secondary);
1825
1834
  --wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-tertiary-hover);
1826
1835
  --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-tertiary-active);
1836
+ --wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1827
1837
  --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1828
1838
  --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
1829
1839
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
@@ -1853,7 +1863,7 @@
1853
1863
  --wds-icon-button-color-fill-dark-tertiary: var(--wds-color-fill-light-secondary);
1854
1864
  --wds-icon-button-color-fill-dark-secondary-hover: var(--wds-color-fill-dark-tertiary-hover);
1855
1865
  --wds-icon-button-color-fill-dark-secondary-active: var(--wds-color-fill-dark-tertiary-active);
1856
- --wds-icon-button-color-fill-dark-secondary: var(--wds-color-fill-light-secondary);
1866
+ --wds-icon-button-color-fill-dark-secondary: var(--wds-color-fill-dark-tertiary);
1857
1867
  --wds-icon-button-color-fill-dark-primary-hover: var(--wds-color-fill-dark-primary-hover);
1858
1868
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
1859
1869
  --wds-icon-button-color-fill-dark-primary: var(--wds-color-fill-dark-primary);
package/odeditor/all.scss CHANGED
@@ -142,6 +142,13 @@
142
142
  --wds-input-shadow-focus-warning: transparent;
143
143
  --wds-input-shadow-focus-standard: transparent;
144
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;
145
152
  --wds-font-weight-semi-bold: 600;
146
153
  --wds-font-weight-regular: 400;
147
154
  --wds-font-weight-medium: 500;
@@ -976,7 +983,6 @@
976
983
  --wds-icon-button-color-text-dark-secondary-disabled: var(--wds-color-black-500);
977
984
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-black-500);
978
985
  --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-black-700);
979
- --wds-icon-button-color-fill-standard-secondary: var(--wds-color-black-100-transparent-0);
980
986
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-black-700);
981
987
  --wds-icon-button-color-fill-premium-secondary-disabled: var(--wds-color-black-700);
982
988
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-black-700);
@@ -1360,6 +1366,9 @@
1360
1366
  --wds-color-border-dark-primary-disabled: var(--wds-color-black-100-transparent-10);
1361
1367
  --wds-color-border-dark-primary-active: var(--wds-color-black-200);
1362
1368
  --wds-color-border-dark-primary: var(--wds-color-black-400);
1369
+ --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-500);
1370
+ --wds-code-snippet-border-radius-multiline: var(--wds-border-radius-400);
1371
+ --wds-code-snippet-border-radius-inline: var(--wds-border-radius-300);
1363
1372
  --wds-close-button-standard-filled-size-small: var(--wds-space-475);
1364
1373
  --wds-close-button-standard-filled-size-medium: var(--wds-space-600);
1365
1374
  --wds-close-button-standard-filled-size-large: var(--wds-space-750);
@@ -1812,6 +1821,7 @@
1812
1821
  --wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-light-secondary);
1813
1822
  --wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-tertiary-hover);
1814
1823
  --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-tertiary-active);
1824
+ --wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1815
1825
  --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1816
1826
  --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
1817
1827
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
@@ -1841,7 +1851,7 @@
1841
1851
  --wds-icon-button-color-fill-dark-tertiary: var(--wds-color-fill-light-secondary);
1842
1852
  --wds-icon-button-color-fill-dark-secondary-hover: var(--wds-color-fill-dark-tertiary-hover);
1843
1853
  --wds-icon-button-color-fill-dark-secondary-active: var(--wds-color-fill-dark-tertiary-active);
1844
- --wds-icon-button-color-fill-dark-secondary: var(--wds-color-fill-light-secondary);
1854
+ --wds-icon-button-color-fill-dark-secondary: var(--wds-color-fill-dark-tertiary);
1845
1855
  --wds-icon-button-color-fill-dark-primary-hover: var(--wds-color-fill-dark-primary-hover);
1846
1856
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
1847
1857
  --wds-icon-button-color-fill-dark-primary: var(--wds-color-fill-dark-primary);
package/odeditor/all.st.css CHANGED
@@ -343,6 +343,9 @@
343
343
  @property st-global(--wds-close-button-standard-filled-text);
344
344
  @property st-global(--wds-close-button-standard-filled-text-disabled);
345
345
  @property st-global(--wds-close-button-standard-filled-text-hover);
346
+ @property st-global(--wds-code-snippet-border-radius-inline);
347
+ @property st-global(--wds-code-snippet-border-radius-multiline);
348
+ @property st-global(--wds-code-snippet-border-radius-singleline);
346
349
  @property st-global(--wds-color-black-100);
347
350
  @property st-global(--wds-color-black-100-transparent-0);
348
351
  @property st-global(--wds-color-black-100-transparent-5);
@@ -1056,6 +1059,13 @@
1056
1059
  @property st-global(--wds-icon-button-color-text-standard-tertiary-active);
1057
1060
  @property st-global(--wds-icon-button-color-text-standard-tertiary-disabled);
1058
1061
  @property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
1062
+ @property st-global(--wds-illustration-color-1);
1063
+ @property st-global(--wds-illustration-color-2);
1064
+ @property st-global(--wds-illustration-color-3);
1065
+ @property st-global(--wds-illustration-color-4);
1066
+ @property st-global(--wds-illustration-color-5);
1067
+ @property st-global(--wds-illustration-color-6);
1068
+ @property st-global(--wds-illustration-color-background);
1059
1069
  @property st-global(--wds-image-border-radius-default);
1060
1070
  @property st-global(--wds-image-border-radius-none);
1061
1071
  @property st-global(--wds-info-icon-fill);
@@ -2412,6 +2422,9 @@
2412
2422
  --wds-close-button-standard-filled-text: #151414;
2413
2423
  --wds-close-button-standard-filled-text-disabled: #a8a6a5;
2414
2424
  --wds-close-button-standard-filled-text-hover: #151414;
2425
+ --wds-code-snippet-border-radius-inline: 6px;
2426
+ --wds-code-snippet-border-radius-multiline: 8px;
2427
+ --wds-code-snippet-border-radius-singleline: 10px;
2415
2428
  --wds-color-black-100: #151414;
2416
2429
  --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
2417
2430
  --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
@@ -3033,7 +3046,7 @@
3033
3046
  --wds-icon-button-color-fill-dark-primary-active: #525150;
3034
3047
  --wds-icon-button-color-fill-dark-primary-disabled: #f0efef;
3035
3048
  --wds-icon-button-color-fill-dark-primary-hover: #383838;
3036
- --wds-icon-button-color-fill-dark-secondary: rgba(255, 255, 255, 0);
3049
+ --wds-icon-button-color-fill-dark-secondary: #ffffff;
3037
3050
  --wds-icon-button-color-fill-dark-secondary-active: #f0efef;
3038
3051
  --wds-icon-button-color-fill-dark-secondary-disabled: #f0efef;
3039
3052
  --wds-icon-button-color-fill-dark-secondary-hover: #f8f6f6;
@@ -3069,7 +3082,7 @@
3069
3082
  --wds-icon-button-color-fill-standard-primary-active: #0f2ccf;
3070
3083
  --wds-icon-button-color-fill-standard-primary-disabled: #f0efef;
3071
3084
  --wds-icon-button-color-fill-standard-primary-hover: #1c3fe5;
3072
- --wds-icon-button-color-fill-standard-secondary: rgba(19, 23, 32, 0);
3085
+ --wds-icon-button-color-fill-standard-secondary: #ffffff;
3073
3086
  --wds-icon-button-color-fill-standard-secondary-active: #d5dfff;
3074
3087
  --wds-icon-button-color-fill-standard-secondary-disabled: #f0efef;
3075
3088
  --wds-icon-button-color-fill-standard-secondary-hover: #eaefff;
@@ -3125,6 +3138,13 @@
3125
3138
  --wds-icon-button-color-text-standard-tertiary-active: #0f2ccf;
3126
3139
  --wds-icon-button-color-text-standard-tertiary-disabled: #a8a6a5;
3127
3140
  --wds-icon-button-color-text-standard-tertiary-hover: #0f2ccf;
3141
+ --wds-illustration-color-1: #002294;
3142
+ --wds-illustration-color-2: #7896FF;
3143
+ --wds-illustration-color-3: #B8C4FF;
3144
+ --wds-illustration-color-4: #D5DFFF;
3145
+ --wds-illustration-color-5: #EAEFFF;
3146
+ --wds-illustration-color-6: #002294;
3147
+ --wds-illustration-color-background: #F8F6F6;
3128
3148
  --wds-image-border-radius-default: 8px;
3129
3149
  --wds-image-border-radius-none: 0px;
3130
3150
  --wds-info-icon-fill: #767574;
package/odeditor/component.st.css CHANGED
@@ -303,6 +303,9 @@
303
303
  @property st-global(--wds-close-button-standard-filled-text);
304
304
  @property st-global(--wds-close-button-standard-filled-text-disabled);
305
305
  @property st-global(--wds-close-button-standard-filled-text-hover);
306
+ @property st-global(--wds-code-snippet-border-radius-inline);
307
+ @property st-global(--wds-code-snippet-border-radius-multiline);
308
+ @property st-global(--wds-code-snippet-border-radius-singleline);
306
309
  @property st-global(--wds-color-picker-padding-horizontal);
307
310
  @property st-global(--wds-color-picker-padding-vertical);
308
311
  @property st-global(--wds-color-picker-width);
@@ -1651,6 +1654,9 @@
1651
1654
  --wds-close-button-standard-filled-text: #151414;
1652
1655
  --wds-close-button-standard-filled-text-disabled: #a8a6a5;
1653
1656
  --wds-close-button-standard-filled-text-hover: #151414;
1657
+ --wds-code-snippet-border-radius-inline: 6px;
1658
+ --wds-code-snippet-border-radius-multiline: 8px;
1659
+ --wds-code-snippet-border-radius-singleline: 10px;
1654
1660
  --wds-color-picker-padding-horizontal: 16px;
1655
1661
  --wds-color-picker-padding-vertical: 12px;
1656
1662
  --wds-color-picker-width: 236px;
@@ -1761,7 +1767,7 @@
1761
1767
  --wds-icon-button-color-fill-dark-primary-active: #525150;
1762
1768
  --wds-icon-button-color-fill-dark-primary-disabled: #f0efef;
1763
1769
  --wds-icon-button-color-fill-dark-primary-hover: #383838;
1764
- --wds-icon-button-color-fill-dark-secondary: rgba(255, 255, 255, 0);
1770
+ --wds-icon-button-color-fill-dark-secondary: #ffffff;
1765
1771
  --wds-icon-button-color-fill-dark-secondary-active: #f0efef;
1766
1772
  --wds-icon-button-color-fill-dark-secondary-disabled: #f0efef;
1767
1773
  --wds-icon-button-color-fill-dark-secondary-hover: #f8f6f6;
@@ -1797,7 +1803,7 @@
1797
1803
  --wds-icon-button-color-fill-standard-primary-active: #0f2ccf;
1798
1804
  --wds-icon-button-color-fill-standard-primary-disabled: #f0efef;
1799
1805
  --wds-icon-button-color-fill-standard-primary-hover: #1c3fe5;
1800
- --wds-icon-button-color-fill-standard-secondary: rgba(19, 23, 32, 0);
1806
+ --wds-icon-button-color-fill-standard-secondary: #ffffff;
1801
1807
  --wds-icon-button-color-fill-standard-secondary-active: #d5dfff;
1802
1808
  --wds-icon-button-color-fill-standard-secondary-disabled: #f0efef;
1803
1809
  --wds-icon-button-color-fill-standard-secondary-hover: #eaefff;
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;
@@ -1394,6 +1401,9 @@
1394
1401
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1395
1402
  --wds-color-picker-padding-vertical: var(--wds-space-300);
1396
1403
  --wds-color-picker-padding-horizontal: var(--wds-space-400);
1404
+ --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-500);
1405
+ --wds-code-snippet-border-radius-multiline: var(--wds-border-radius-400);
1406
+ --wds-code-snippet-border-radius-inline: var(--wds-border-radius-300);
1397
1407
  --wds-close-button-standard-filled-size-small: var(--wds-space-475);
1398
1408
  --wds-close-button-standard-filled-size-medium: var(--wds-space-600);
1399
1409
  --wds-close-button-standard-filled-size-large: var(--wds-space-750);
package/odeditor-dark/all.scss CHANGED
@@ -154,6 +154,13 @@
154
154
  --wds-input-shadow-focus-warning: transparent;
155
155
  --wds-input-shadow-focus-standard: transparent;
156
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;
157
164
  --wds-font-weight-semi-bold: 600;
158
165
  --wds-font-weight-regular: 400;
159
166
  --wds-font-weight-medium: 500;
@@ -1383,6 +1390,9 @@
1383
1390
  --wds-color-border-dark-primary-disabled: var(--wds-color-black-100-transparent-10);
1384
1391
  --wds-color-border-dark-primary-active: var(--wds-color-black-200);
1385
1392
  --wds-color-border-dark-primary: var(--wds-color-black-400);
1393
+ --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-500);
1394
+ --wds-code-snippet-border-radius-multiline: var(--wds-border-radius-400);
1395
+ --wds-code-snippet-border-radius-inline: var(--wds-border-radius-300);
1386
1396
  --wds-close-button-standard-filled-size-small: var(--wds-space-475);
1387
1397
  --wds-close-button-standard-filled-size-medium: var(--wds-space-600);
1388
1398
  --wds-close-button-standard-filled-size-large: var(--wds-space-750);
package/odeditor-dark/all.st.css CHANGED
@@ -347,6 +347,9 @@
347
347
  @property st-global(--wds-close-button-standard-filled-text);
348
348
  @property st-global(--wds-close-button-standard-filled-text-disabled);
349
349
  @property st-global(--wds-close-button-standard-filled-text-hover);
350
+ @property st-global(--wds-code-snippet-border-radius-inline);
351
+ @property st-global(--wds-code-snippet-border-radius-multiline);
352
+ @property st-global(--wds-code-snippet-border-radius-singleline);
350
353
  @property st-global(--wds-color-black-100);
351
354
  @property st-global(--wds-color-black-100-transparent-0);
352
355
  @property st-global(--wds-color-black-100-transparent-5);
@@ -1061,6 +1064,13 @@
1061
1064
  @property st-global(--wds-icon-button-color-text-standard-tertiary-active);
1062
1065
  @property st-global(--wds-icon-button-color-text-standard-tertiary-disabled);
1063
1066
  @property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
1067
+ @property st-global(--wds-illustration-color-1);
1068
+ @property st-global(--wds-illustration-color-2);
1069
+ @property st-global(--wds-illustration-color-3);
1070
+ @property st-global(--wds-illustration-color-4);
1071
+ @property st-global(--wds-illustration-color-5);
1072
+ @property st-global(--wds-illustration-color-6);
1073
+ @property st-global(--wds-illustration-color-background);
1064
1074
  @property st-global(--wds-image-border-radius-default);
1065
1075
  @property st-global(--wds-image-border-radius-none);
1066
1076
  @property st-global(--wds-info-icon-fill);
@@ -2426,6 +2436,9 @@
2426
2436
  --wds-close-button-standard-filled-text: #FFFFFF;
2427
2437
  --wds-close-button-standard-filled-text-disabled: #878685;
2428
2438
  --wds-close-button-standard-filled-text-hover: #FFFFFF;
2439
+ --wds-code-snippet-border-radius-inline: 6px;
2440
+ --wds-code-snippet-border-radius-multiline: 8px;
2441
+ --wds-code-snippet-border-radius-singleline: 10px;
2429
2442
  --wds-color-black-100: #FFFFFF;
2430
2443
  --wds-color-black-100-transparent-0: rgba(255, 255, 255, 0);
2431
2444
  --wds-color-black-100-transparent-5: rgba(255, 255, 255, .05);
@@ -3140,6 +3153,13 @@
3140
3153
  --wds-icon-button-color-text-standard-tertiary-active: #E0E7FF;
3141
3154
  --wds-icon-button-color-text-standard-tertiary-disabled: #878685;
3142
3155
  --wds-icon-button-color-text-standard-tertiary-hover: #E0E7FF;
3156
+ --wds-illustration-color-1: #002294;
3157
+ --wds-illustration-color-2: #7896FF;
3158
+ --wds-illustration-color-3: #B8C4FF;
3159
+ --wds-illustration-color-4: #D5DFFF;
3160
+ --wds-illustration-color-5: #EAEFFF;
3161
+ --wds-illustration-color-6: #EAEFFF;
3162
+ --wds-illustration-color-background: #2D2D2E;
3143
3163
  --wds-image-border-radius-default: 8px;
3144
3164
  --wds-image-border-radius-none: 0px;
3145
3165
  --wds-info-icon-fill: #A09E9D;
package/odeditor-dark/component.st.css CHANGED
@@ -306,6 +306,9 @@
306
306
  @property st-global(--wds-close-button-standard-filled-text);
307
307
  @property st-global(--wds-close-button-standard-filled-text-disabled);
308
308
  @property st-global(--wds-close-button-standard-filled-text-hover);
309
+ @property st-global(--wds-code-snippet-border-radius-inline);
310
+ @property st-global(--wds-code-snippet-border-radius-multiline);
311
+ @property st-global(--wds-code-snippet-border-radius-singleline);
309
312
  @property st-global(--wds-color-picker-padding-horizontal);
310
313
  @property st-global(--wds-color-picker-padding-vertical);
311
314
  @property st-global(--wds-color-picker-width);
@@ -1662,6 +1665,9 @@
1662
1665
  --wds-close-button-standard-filled-text: #FFFFFF;
1663
1666
  --wds-close-button-standard-filled-text-disabled: #878685;
1664
1667
  --wds-close-button-standard-filled-text-hover: #FFFFFF;
1668
+ --wds-code-snippet-border-radius-inline: 6px;
1669
+ --wds-code-snippet-border-radius-multiline: 8px;
1670
+ --wds-code-snippet-border-radius-singleline: 10px;
1665
1671
  --wds-color-picker-padding-horizontal: 16px;
1666
1672
  --wds-color-picker-padding-vertical: 12px;
1667
1673
  --wds-color-picker-width: 236px;
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.196.0",
3
+ "version": "1.198.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": "57b077fa265e6cf9e3a5aaa31b06cd0c5b4c4ecfd5797acf17c3efb0"
35
+ "falconPackageHash": "e1be04e14dff712f1d01d61c5e7a18d8f494333a902ac0b16619db26"
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;
@@ -1368,6 +1375,9 @@
1368
1375
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1369
1376
  --wds-color-picker-padding-vertical: var(--wds-space-300);
1370
1377
  --wds-color-picker-padding-horizontal: var(--wds-space-400);
1378
+ --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-100);
1379
+ --wds-code-snippet-border-radius-multiline: var(--wds-border-radius-100);
1380
+ --wds-code-snippet-border-radius-inline: var(--wds-border-radius-100);
1371
1381
  --wds-close-button-standard-filled-text-disabled: var(--wds-color-text-disabled);
1372
1382
  --wds-close-button-standard-filled-size-small: var(--wds-space-475);
1373
1383
  --wds-close-button-standard-filled-size-medium: var(--wds-space-475);
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;
@@ -1357,6 +1364,9 @@
1357
1364
  --wds-color-border-dark-primary-active: var(--wds-color-black-200);
1358
1365
  --wds-color-border-dark-primary: var(--wds-color-black-400);
1359
1366
  --wds-color-border-ai-primary: var(--wds-color-iris-100);
1367
+ --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-100);
1368
+ --wds-code-snippet-border-radius-multiline: var(--wds-border-radius-100);
1369
+ --wds-code-snippet-border-radius-inline: var(--wds-border-radius-100);
1360
1370
  --wds-close-button-standard-filled-text-disabled: var(--wds-color-text-disabled);
1361
1371
  --wds-close-button-standard-filled-size-small: var(--wds-space-475);
1362
1372
  --wds-close-button-standard-filled-size-medium: var(--wds-space-475);
package/studio/all.st.css CHANGED
@@ -351,6 +351,9 @@
351
351
  @property st-global(--wds-close-button-standard-filled-text);
352
352
  @property st-global(--wds-close-button-standard-filled-text-disabled);
353
353
  @property st-global(--wds-close-button-standard-filled-text-hover);
354
+ @property st-global(--wds-code-snippet-border-radius-inline);
355
+ @property st-global(--wds-code-snippet-border-radius-multiline);
356
+ @property st-global(--wds-code-snippet-border-radius-singleline);
354
357
  @property st-global(--wds-color-black-100);
355
358
  @property st-global(--wds-color-black-100-transparent-0);
356
359
  @property st-global(--wds-color-black-100-transparent-5);
@@ -1078,6 +1081,13 @@
1078
1081
  @property st-global(--wds-icon-button-color-text-standard-tertiary-active);
1079
1082
  @property st-global(--wds-icon-button-color-text-standard-tertiary-disabled);
1080
1083
  @property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
1084
+ @property st-global(--wds-illustration-color-1);
1085
+ @property st-global(--wds-illustration-color-2);
1086
+ @property st-global(--wds-illustration-color-3);
1087
+ @property st-global(--wds-illustration-color-4);
1088
+ @property st-global(--wds-illustration-color-5);
1089
+ @property st-global(--wds-illustration-color-6);
1090
+ @property st-global(--wds-illustration-color-background);
1081
1091
  @property st-global(--wds-image-border-radius-default);
1082
1092
  @property st-global(--wds-image-border-radius-none);
1083
1093
  @property st-global(--wds-info-icon-fill);
@@ -2463,6 +2473,9 @@
2463
2473
  --wds-close-button-standard-filled-text: #131720;
2464
2474
  --wds-close-button-standard-filled-text-disabled: #bebebe;
2465
2475
  --wds-close-button-standard-filled-text-hover: #131720;
2476
+ --wds-code-snippet-border-radius-inline: 2px;
2477
+ --wds-code-snippet-border-radius-multiline: 2px;
2478
+ --wds-code-snippet-border-radius-singleline: 2px;
2466
2479
  --wds-color-black-100: #131720;
2467
2480
  --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
2468
2481
  --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
@@ -3190,6 +3203,13 @@
3190
3203
  --wds-icon-button-color-text-standard-tertiary-active: #116dff;
3191
3204
  --wds-icon-button-color-text-standard-tertiary-disabled: #bebebe;
3192
3205
  --wds-icon-button-color-text-standard-tertiary-hover: #116dff;
3206
+ --wds-illustration-color-1: #002291;
3207
+ --wds-illustration-color-2: #7896FF;
3208
+ --wds-illustration-color-3: #B8C4FF;
3209
+ --wds-illustration-color-4: #D5DFFF;
3210
+ --wds-illustration-color-5: #EAEFF1;
3211
+ --wds-illustration-color-6: #002297;
3212
+ --wds-illustration-color-background: #F8F6F6;
3193
3213
  --wds-image-border-radius-default: 4px;
3194
3214
  --wds-image-border-radius-none: 0px;
3195
3215
  --wds-info-icon-fill: #868aa5;
package/studio/component.st.css CHANGED
@@ -313,6 +313,9 @@
313
313
  @property st-global(--wds-close-button-standard-filled-text);
314
314
  @property st-global(--wds-close-button-standard-filled-text-disabled);
315
315
  @property st-global(--wds-close-button-standard-filled-text-hover);
316
+ @property st-global(--wds-code-snippet-border-radius-inline);
317
+ @property st-global(--wds-code-snippet-border-radius-multiline);
318
+ @property st-global(--wds-code-snippet-border-radius-singleline);
316
319
  @property st-global(--wds-color-picker-padding-horizontal);
317
320
  @property st-global(--wds-color-picker-padding-vertical);
318
321
  @property st-global(--wds-color-picker-width);
@@ -1706,6 +1709,9 @@
1706
1709
  --wds-close-button-standard-filled-text: #131720;
1707
1710
  --wds-close-button-standard-filled-text-disabled: #bebebe;
1708
1711
  --wds-close-button-standard-filled-text-hover: #131720;
1712
+ --wds-code-snippet-border-radius-inline: 2px;
1713
+ --wds-code-snippet-border-radius-multiline: 2px;
1714
+ --wds-code-snippet-border-radius-singleline: 2px;
1709
1715
  --wds-color-picker-padding-horizontal: 16px;
1710
1716
  --wds-color-picker-padding-vertical: 12px;
1711
1717
  --wds-color-picker-width: 236px;
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;
package/wixel/all.css CHANGED
@@ -1318,6 +1318,9 @@
1318
1318
  --wds-composer-sidebar-item-bottom-padding-horizontal-small: var(--wds-space-100);
1319
1319
  --wds-composer-sidebar-item-bottom-padding-horizontal-medium: var(--wds-space-100);
1320
1320
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1321
+ --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-200);
1322
+ --wds-code-snippet-border-radius-multiline: var(--wds-border-radius-200);
1323
+ --wds-code-snippet-border-radius-inline: var(--wds-border-radius-200);
1321
1324
  --wds-close-button-standard-filled-size-small: var(--wds-space-475);
1322
1325
  --wds-close-button-standard-filled-size-medium: var(--wds-space-475);
1323
1326
  --wds-close-button-standard-filled-size-large: var(--wds-space-700);
package/wixel/all.scss CHANGED
@@ -1307,6 +1307,9 @@
1307
1307
  --wds-color-border-dark-primary-disabled: var(--wds-color-black-100-transparent-10);
1308
1308
  --wds-color-border-dark-primary-active: var(--wds-color-black-200);
1309
1309
  --wds-color-border-dark-primary: var(--wds-color-black-400);
1310
+ --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-200);
1311
+ --wds-code-snippet-border-radius-multiline: var(--wds-border-radius-200);
1312
+ --wds-code-snippet-border-radius-inline: var(--wds-border-radius-200);
1310
1313
  --wds-close-button-standard-filled-size-small: var(--wds-space-475);
1311
1314
  --wds-close-button-standard-filled-size-medium: var(--wds-space-475);
1312
1315
  --wds-close-button-standard-filled-size-large: var(--wds-space-700);
package/wixel/all.st.css CHANGED
@@ -337,6 +337,9 @@
337
337
  @property st-global(--wds-close-button-standard-filled-text);
338
338
  @property st-global(--wds-close-button-standard-filled-text-disabled);
339
339
  @property st-global(--wds-close-button-standard-filled-text-hover);
340
+ @property st-global(--wds-code-snippet-border-radius-inline);
341
+ @property st-global(--wds-code-snippet-border-radius-multiline);
342
+ @property st-global(--wds-code-snippet-border-radius-singleline);
340
343
  @property st-global(--wds-color-black-100);
341
344
  @property st-global(--wds-color-black-100-transparent-0);
342
345
  @property st-global(--wds-color-black-100-transparent-5);
@@ -2397,6 +2400,9 @@
2397
2400
  --wds-close-button-standard-filled-text: #4a57ff;
2398
2401
  --wds-close-button-standard-filled-text-disabled: #ffffff;
2399
2402
  --wds-close-button-standard-filled-text-hover: #4a57ff;
2403
+ --wds-code-snippet-border-radius-inline: 4px;
2404
+ --wds-code-snippet-border-radius-multiline: 4px;
2405
+ --wds-code-snippet-border-radius-singleline: 4px;
2400
2406
  --wds-color-black-100: #000624;
2401
2407
  --wds-color-black-100-transparent-0: rgba(38, 37, 36, 0.0000);
2402
2408
  --wds-color-black-100-transparent-5: rgba(38, 37, 36, 0.0500);
package/wixel/component.st.css CHANGED
@@ -299,6 +299,9 @@
299
299
  @property st-global(--wds-close-button-standard-filled-text);
300
300
  @property st-global(--wds-close-button-standard-filled-text-disabled);
301
301
  @property st-global(--wds-close-button-standard-filled-text-hover);
302
+ @property st-global(--wds-code-snippet-border-radius-inline);
303
+ @property st-global(--wds-code-snippet-border-radius-multiline);
304
+ @property st-global(--wds-code-snippet-border-radius-singleline);
302
305
  @property st-global(--wds-composer-sidebar-bottom-width);
303
306
  @property st-global(--wds-composer-sidebar-end-max-width);
304
307
  @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-large);
@@ -1658,6 +1661,9 @@
1658
1661
  --wds-close-button-standard-filled-text: #4a57ff;
1659
1662
  --wds-close-button-standard-filled-text-disabled: #ffffff;
1660
1663
  --wds-close-button-standard-filled-text-hover: #4a57ff;
1664
+ --wds-code-snippet-border-radius-inline: 4px;
1665
+ --wds-code-snippet-border-radius-multiline: 4px;
1666
+ --wds-code-snippet-border-radius-singleline: 4px;
1661
1667
  --wds-composer-sidebar-bottom-width: 88px;
1662
1668
  --wds-composer-sidebar-end-max-width: 240px;
1663
1669
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;