@wix/design-system-tokens 1.118.1 → 1.120.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 (22) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/all.css +76 -11
  3. package/all.st.css +148 -18
  4. package/component.st.css +46 -14
  5. package/foundation.st.css +36 -4
  6. package/odeditor/all.css +1795 -0
  7. package/odeditor/all.st.css +3589 -0
  8. package/odeditor/component.st.css +2241 -0
  9. package/odeditor/foundation.st.css +439 -0
  10. package/odeditor/semantic.st.css +915 -0
  11. package/package.json +2 -2
  12. package/semantic.st.css +66 -0
  13. package/studio/all.css +81 -16
  14. package/studio/all.st.css +156 -26
  15. package/studio/component.st.css +47 -15
  16. package/studio/foundation.st.css +37 -5
  17. package/studio/semantic.st.css +72 -6
  18. package/wixel/all.css +68 -7
  19. package/wixel/all.st.css +136 -14
  20. package/wixel/component.st.css +46 -14
  21. package/wixel/foundation.st.css +32 -0
  22. package/wixel/semantic.st.css +58 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,20 @@
1
+ ## 1.120.0 - 2025-07-16
2
+
3
+ ### Features
4
+
5
+ - feat(tokens): introduce `Editor3` definitions [14941](https://github.com/wix-private/wix-design-systems/pull/14941)
6
+
7
+ ## 1.119.0 - 2025-07-15
8
+
9
+ ### Visual Breaking Changes
10
+
11
+ - breaking(Card): tokenization [15062](https://github.com/wix-private/wix-design-systems/pull/15062)
12
+ - breaking(Stepper): tokenization [15056](https://github.com/wix-private/wix-design-systems/pull/15056)
13
+
14
+ ### Bug Fixes
15
+
16
+ - fix(tokens): set conventional primary states for `ai` border color [15083](https://github.com/wix-private/wix-design-systems/pull/15083)
17
+
1
18
  ## 1.118.0 - 2025-07-03
2
19
 
3
20
  ### Features
package/all.css CHANGED
@@ -13,6 +13,7 @@
13
13
  --wds-space-900: 54px;
14
14
  --wds-space-850: 51px;
15
15
  --wds-space-800: 48px;
16
+ --wds-space-750: 45px;
16
17
  --wds-space-700: 42px;
17
18
  --wds-space-600: 36px;
18
19
  --wds-space-500: 30px;
@@ -28,18 +29,31 @@
28
29
  --wds-space-50: 3px;
29
30
  --wds-space-25: 1px;
30
31
  --wds-space-0: 0;
32
+ --wds-shadow-spread-secondary-raised: 0;
31
33
  --wds-shadow-focus-spread: 3;
32
34
  --wds-shadow-y-350: 3px;
33
- --wds-shadow-y-300: 0;
34
- --wds-shadow-y-200: 0;
35
- --wds-shadow-y-100: 0;
35
+ --wds-shadow-y-300: 12px;
36
+ --wds-shadow-y-200: 9px;
37
+ --wds-shadow-y-150: 8px;
38
+ --wds-shadow-y-100: 6px;
39
+ --wds-shadow-y-50: 3px;
40
+ --wds-shadow-y-25: 2px;
36
41
  --wds-shadow-y-0: 0;
42
+ --wds-shadow-x-25: 2px;
43
+ --wds-shadow-x-0: 0;
44
+ --wds-shadow-blur-800: 36px;
45
+ --wds-shadow-blur-500: 24px;
37
46
  --wds-shadow-blur-400: 24px;
38
47
  --wds-shadow-blur-200: 18px;
39
- --wds-shadow-blur-150: 6px;
48
+ --wds-shadow-blur-150: 8px;
49
+ --wds-shadow-blur-135: 7px;
50
+ --wds-shadow-blur-125: 6px;
40
51
  --wds-shadow-blur-100: 6px;
52
+ --wds-shadow-blur-75: 4px;
41
53
  --wds-shadow-blur-50: 3px;
42
54
  --wds-shadow-blur-35: 2px;
55
+ --wds-shadow-blur-25: 1px;
56
+ --wds-shadow-blur-0: 0;
43
57
  --wds-font-weight-semi-bold: 600;
44
58
  --wds-font-weight-regular: 400;
45
59
  --wds-font-weight-medium: 500;
@@ -116,6 +130,7 @@
116
130
  --wds-color-fill-accent-3: #6544F9;
117
131
  --wds-color-fill-accent-2: #17B0E2;
118
132
  --wds-color-fill-accent-1: #1684EA;
133
+ --wds-color-border-stage-wip: #ffffff;
119
134
  --wds-color-border-ai-primary-hover: #ffffff;
120
135
  --wds-color-border-ai-primary-disabled: #ffffff;
121
136
  --wds-color-border-ai-primary-active: #ffffff;
@@ -204,6 +219,7 @@
204
219
  --wds-color-black-100-transparent-40: rgba(0, 6, 36, .4);
205
220
  --wds-color-black-100-transparent-30: rgba(0, 6, 36, .3);
206
221
  --wds-color-black-100-transparent-20: rgba(0, 6, 36, .2);
222
+ --wds-color-black-100-transparent-15: rgba(0, 6, 36, 0.15);
207
223
  --wds-color-black-100-transparent-10: rgba(0, 6, 36, .1);
208
224
  --wds-color-black-100-transparent-5: rgba(0, 6, 36, .05);
209
225
  --wds-color-black-100-transparent-0: rgba(0, 6, 36, 0);
@@ -222,6 +238,7 @@
222
238
  --wds-breakpoint-large: 1186px;
223
239
  --wds-border-width-none: 0;
224
240
  --wds-border-width-200: 2px;
241
+ --wds-border-width-150: 1.5px;
225
242
  --wds-border-width-100: 1px;
226
243
  --wds-border-radius-full: 1000px;
227
244
  --wds-border-radius-600: 12px;
@@ -326,19 +343,36 @@
326
343
  --wds-space-padding-horizontal-medium: var(--wds-space-300);
327
344
  --wds-space-padding-horizontal-large: var(--wds-space-400);
328
345
  --wds-space-mobile-viewport-spacing: var(--wds-space-500);
346
+ --wds-shadow-x-secondary-raised: var(--wds-shadow-x-0);
329
347
  --wds-shadow-focus-warning: 0 0 0 3px var(--wds-color-yellow-400);
330
348
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
331
349
  --wds-shadow-focus-inner-warning: 0 0 0 3px var(--wds-color-yellow-400) inset;
332
350
  --wds-shadow-focus-inner-standard: 0 0 0 3px var(--wds-color-blue-300) inset;
333
351
  --wds-shadow-focus-inner-destructive: 0 0 0 3px var(--wds-color-red-400) inset;
334
352
  --wds-shadow-focus-destructive: 0 0 0 3px var(--wds-color-red-400);
353
+ --wds-shadow-fill-tertiary-raised: var(--wds-color-black-100-transparent-0);
335
354
  --wds-shadow-fill-secondary-toggle: var(--wds-color-black-100-transparent-50);
336
355
  --wds-shadow-fill-secondary-raised: var(--wds-color-black-100-transparent-5);
356
+ --wds-shadow-fill-secondary-overlay-dark: var(--wds-color-black-100-transparent-5);
337
357
  --wds-shadow-fill-secondary-overlay: var(--wds-color-black-100-transparent-5);
338
358
  --wds-shadow-fill-secondary-modal: var(--wds-color-black-100-transparent-10);
359
+ --wds-shadow-fill-quaternary-raised: var(--wds-color-black-100-transparent-0);
360
+ --wds-shadow-fill-primary-toggle: var(--wds-color-black-100-transparent-20);
361
+ --wds-shadow-fill-primary-slider: var(--wds-color-black-100-transparent-0);
339
362
  --wds-shadow-fill-primary-raised: var(--wds-color-black-100-transparent-10);
363
+ --wds-shadow-fill-primary-overlay-dark: var(--wds-color-black-100-transparent-10);
340
364
  --wds-shadow-fill-primary-overlay: var(--wds-color-black-100-transparent-10);
341
365
  --wds-shadow-fill-primary-modal: var(--wds-color-black-100-transparent-20);
366
+ --wds-shadow-y-secondary-toggle: var(--wds-shadow-y-25);
367
+ --wds-shadow-y-secondary-raised: var(--wds-shadow-y-25);
368
+ --wds-shadow-y-secondary-overlay-dark: var(--wds-shadow-y-100);
369
+ --wds-shadow-y-secondary-overlay: var(--wds-shadow-y-100);
370
+ --wds-shadow-y-secondary-modal: var(--wds-shadow-y-150);
371
+ --wds-shadow-y-primary-toggle: var(--wds-shadow-y-0);
372
+ --wds-shadow-y-primary-raised: var(--wds-shadow-y-0);
373
+ --wds-shadow-y-primary-overlay-dark: var(--wds-shadow-y-0);
374
+ --wds-shadow-y-primary-overlay: var(--wds-shadow-y-0);
375
+ --wds-shadow-y-primary-modal: var(--wds-shadow-y-50);
342
376
  --wds-shadow-inner-400-top: 0 32px 24px -24px var(--wds-color-black-100-transparent-20) inset, 0 8px 6px -6px var(--wds-color-black-100-transparent-5) inset;
343
377
  --wds-shadow-inner-400-right: -32px 0 24px -24px var(--wds-color-black-100-transparent-20) inset, -8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
344
378
  --wds-shadow-inner-400-left: 32px 0 24px -24px var(--wds-color-black-100-transparent-20) inset, 8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
@@ -351,6 +385,16 @@
351
385
  --wds-shadow-inner-300: 0 0 18px var(--wds-color-black-100-transparent-10) inset, 0 0 6px var(--wds-color-black-100-transparent-5) inset;
352
386
  --wds-shadow-inner-200: 1px 1px 4px var(--wds-color-black-100-transparent-20) inset;
353
387
  --wds-shadow-inner-100: 1px 1px 2px var(--wds-color-black-100-transparent-10) inset, 1px 1px 2px var(--wds-color-white-transparent-10);
388
+ --wds-shadow-blur-secondary-toggle: var(--wds-shadow-blur-25);
389
+ --wds-shadow-blur-secondary-raised: var(--wds-shadow-blur-75);
390
+ --wds-shadow-blur-secondary-overlay-dark: var(--wds-shadow-blur-100);
391
+ --wds-shadow-blur-secondary-overlay: var(--wds-shadow-blur-100);
392
+ --wds-shadow-blur-secondary-modal: var(--wds-shadow-blur-150);
393
+ --wds-shadow-blur-primary-toggle: var(--wds-shadow-blur-50);
394
+ --wds-shadow-blur-primary-raised: var(--wds-shadow-blur-100);
395
+ --wds-shadow-blur-primary-overlay-dark: var(--wds-shadow-blur-200);
396
+ --wds-shadow-blur-primary-overlay: var(--wds-shadow-blur-200);
397
+ --wds-shadow-blur-primary-modal: var(--wds-shadow-blur-400);
354
398
  --wds-shadow-400: 0 3px 24px var(--wds-color-black-100-transparent-20), 0 8px 8px var(--wds-color-black-100-transparent-10);
355
399
  --wds-shadow-300: 0 0 18px var(--wds-color-black-100-transparent-10), 0 6px 6px var(--wds-color-black-100-transparent-5);
356
400
  --wds-shadow-200: 0 0 6px var(--wds-color-black-100-transparent-10), 0 2px 4px var(--wds-color-black-100-transparent-10);
@@ -372,6 +416,7 @@
372
416
  --wds-font-size-body-small: var(--wds-font-size-300);
373
417
  --wds-font-size-body-medium: var(--wds-font-size-500);
374
418
  --wds-font-size-body-extra-tiny: var(--wds-font-size-100);
419
+ --wds-font-line-height-600: var(--wds-space-600);
375
420
  --wds-font-line-height-500: var(--wds-space-600);
376
421
  --wds-font-line-height-400: var(--wds-space-475);
377
422
  --wds-font-line-height-300: var(--wds-space-400);
@@ -543,6 +588,10 @@
543
588
  --wds-color-fill-premium-primary-disabled: var(--wds-color-black-100-transparent-30);
544
589
  --wds-color-fill-premium-primary-active: var(--wds-color-purple-0);
545
590
  --wds-color-fill-premium-primary: var(--wds-color-purple-100);
591
+ --wds-color-fill-light-tertiary-hover: var(--wds-color-blue-500);
592
+ --wds-color-fill-light-tertiary-disabled: var(--wds-color-white-transparent-0);
593
+ --wds-color-fill-light-tertiary-active: var(--wds-color-blue-400);
594
+ --wds-color-fill-light-tertiary: var(--wds-color-white);
546
595
  --wds-color-fill-light-secondary-hover: var(--wds-color-blue-500);
547
596
  --wds-color-fill-light-secondary-disabled: var(--wds-color-white-transparent-0);
548
597
  --wds-color-fill-light-secondary-active: var(--wds-color-blue-400);
@@ -992,6 +1041,7 @@
992
1041
  --wds-list-item-select-icon-padding-vertical-medium: var(--wds-space-100);
993
1042
  --wds-list-item-select-icon-padding-horizontal-small: var(--wds-space-200);
994
1043
  --wds-list-item-select-icon-padding-horizontal-medium: var(--wds-space-200);
1044
+ --wds-list-item-select-suffix-active-font-weight: var(--wds-font-weight-regular);
995
1045
  --wds-list-item-select-padding-vertical-small-screen-small: var(--wds-space-200);
996
1046
  --wds-list-item-select-padding-vertical-small: var(--wds-space-100);
997
1047
  --wds-list-item-select-padding-vertical-medium-screen-small: var(--wds-space-200);
@@ -1002,9 +1052,13 @@
1002
1052
  --wds-list-item-select-padding-left-medium: var(--wds-space-300);
1003
1053
  --wds-list-item-select-padding-horizontal-small: var(--wds-space-300);
1004
1054
  --wds-list-item-select-padding-horizontal-medium: var(--wds-space-300);
1055
+ --wds-list-item-select-label-font-weight-small: var(--wds-font-weight-regular);
1056
+ --wds-list-item-select-label-font-weight-medium: var(--wds-font-weight-regular);
1005
1057
  --wds-list-item-select-border-radius: var(--wds-border-radius-0);
1006
1058
  --wds-list-item-select-affix-margin: var(--wds-space-100);
1007
1059
  --wds-list-item-section-padding-horizontal: var(--wds-space-400);
1060
+ --wds-list-item-action-title-font-weight-active: var(--wds-font-weight-regular);
1061
+ --wds-list-item-action-title-font-weight: var(--wds-font-weight-regular);
1008
1062
  --wds-list-item-action-padding-vertical-small-screen-small: var(--wds-space-200);
1009
1063
  --wds-list-item-action-padding-vertical-small: var(--wds-space-100);
1010
1064
  --wds-list-item-action-padding-vertical-medium-screen-small: var(--wds-space-200);
@@ -1012,7 +1066,8 @@
1012
1066
  --wds-list-item-action-padding-horizontal-small: var(--wds-space-300);
1013
1067
  --wds-list-item-action-padding-horizontal-medium: var(--wds-space-300);
1014
1068
  --wds-list-item-action-border-radius: var(--wds-border-radius-0);
1015
- --wds-list-item-action-affix-margin: var(--wds-space-100);
1069
+ --wds-list-item-action-affix-margin-small: var(--wds-space-100);
1070
+ --wds-list-item-action-affix-margin-medium: var(--wds-space-100);
1016
1071
  --wds-list-item-padding-vertical-xx-tiny: var(--wds-space-50);
1017
1072
  --wds-list-item-padding-vertical-x-tiny: var(--wds-space-100);
1018
1073
  --wds-list-item-padding-vertical-tiny: var(--wds-space-200);
@@ -1151,10 +1206,10 @@
1151
1206
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1152
1207
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
1153
1208
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-300);
1154
- --wds-card-header-paddings-vertical: var(--wds-space-300);
1155
- --wds-card-header-paddings-horizontal: var(--wds-space-400);
1156
- --wds-card-content-paddings-vertical: var(--wds-space-400);
1157
- --wds-card-content-paddings-horizontal: var(--wds-space-400);
1209
+ --wds-card-header-padding-vertical: var(--wds-space-300);
1210
+ --wds-card-header-padding-horizontal: var(--wds-space-400);
1211
+ --wds-card-content-padding-medium: var(--wds-space-400);
1212
+ --wds-card-content-padding-large: var(--wds-space-600);
1158
1213
  --wds-card-border: var(--wds-border-radius-400);
1159
1214
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1160
1215
  --wds-button-text-standard-primary: var(--wds-color-black-100);
@@ -1223,6 +1278,9 @@
1223
1278
  --wds-add-item-border-radius: var(--wds-border-radius-400);
1224
1279
  --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
1225
1280
  --wds-accordion-title-font-weight: var(--wds-font-weight-medium);
1281
+ --wds-accordion-inner-content-padding-top: var(--wds-space-250);
1282
+ --wds-accordion-inner-content-fill: var(--wds-color-blue-600);
1283
+ --wds-accordion-border-radius: var(--wds-border-radius-0);
1226
1284
  --wds-shadow-surface-raised: var(--wds-shadow-200);
1227
1285
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1228
1286
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
@@ -1393,8 +1451,11 @@
1393
1451
  --wds-loader-fill-light: var(--wds-color-fill-light-primary);
1394
1452
  --wds-loader-fill-error: var(--wds-color-fill-destructive-primary);
1395
1453
  --wds-loader-fill: var(--wds-color-fill-standard-secondary);
1454
+ --wds-list-item-select-title-pressed: var(--wds-color-text-standard-primary);
1396
1455
  --wds-list-item-select-title-disabled: var(--wds-color-text-disabled);
1397
1456
  --wds-list-item-select-title: var(--wds-color-text-standard-primary);
1457
+ --wds-list-item-select-suffix-pressed: var(--wds-color-text-placeholder);
1458
+ --wds-list-item-select-suffix: var(--wds-color-text-placeholder);
1398
1459
  --wds-list-item-select-subtitle-font-size-medium: var(--wds-font-size-body-small);
1399
1460
  --wds-list-item-select-subtitle-disabled: var(--wds-color-text-disabled);
1400
1461
  --wds-list-item-select-subtitle: var(--wds-color-text-placeholder);
@@ -1420,7 +1481,9 @@
1420
1481
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-primary);
1421
1482
  --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1422
1483
  --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1423
- --wds-list-item-action-subtitle-font-size-medium: var(--wds-font-size-body-small);
1484
+ --wds-list-item-action-suffix-fill-active: var(--wds-color-text-placeholder);
1485
+ --wds-list-item-action-suffix-fill: var(--wds-color-text-placeholder);
1486
+ --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-small);
1424
1487
  --wds-list-item-action-subtitle-fill-active: var(--wds-color-text-placeholder);
1425
1488
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-small);
1426
1489
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-medium);
@@ -1518,6 +1581,7 @@
1518
1581
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1519
1582
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1520
1583
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1584
+ --wds-button-label-fill-standard-secondary: var(--wds-color-text-primary);
1521
1585
  --wds-button-font-size-tiny: var(--wds-font-size-body-tiny);
1522
1586
  --wds-button-font-size-small: var(--wds-font-size-body-small);
1523
1587
  --wds-button-font-size-medium: var(--wds-font-size-body-medium);
@@ -1530,6 +1594,7 @@
1530
1594
  --wds-button-fill-standard-primary: var(--wds-color-fill-standard-primary);
1531
1595
  --wds-button-fill-gradient-hover-secondary: var(--wds-color-fill-standard-primary-hover);
1532
1596
  --wds-button-fill-gradient-hover-primary: var(--wds-color-fill-standard-primary-hover);
1597
+ --wds-button-border-fill-standard-secondary: var(--wds-color-border-standard-secondary);
1533
1598
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1534
1599
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
1535
1600
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
@@ -1562,7 +1627,7 @@
1562
1627
  --wds-list-item-select-label-font-line-height-small: var(--wds-font-line-height-body-small);
1563
1628
  --wds-list-item-select-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1564
1629
  --wds-list-item-section-line-height: var(--wds-font-line-height-body-small);
1565
- --wds-list-item-action-subtitle-font-line-height-medium: var(--wds-font-line-height-body-small);
1630
+ --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-small);
1566
1631
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-small);
1567
1632
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1568
1633
  --wds-input-value-font-line-height-tiny: var(--wds-font-line-height-body-tiny);