@wix/design-system-tokens 1.122.0 → 1.124.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 (24) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +16 -0
  3. package/all.css +71 -19
  4. package/all.scss +81 -21
  5. package/all.st.css +140 -36
  6. package/component.st.css +138 -36
  7. package/foundation.st.css +2 -0
  8. package/odeditor/all.css +98 -22
  9. package/odeditor/all.scss +119 -34
  10. package/odeditor/all.st.css +174 -22
  11. package/odeditor/component.st.css +172 -22
  12. package/odeditor/foundation.st.css +2 -0
  13. package/package.json +4 -4
  14. package/studio/all.css +74 -30
  15. package/studio/all.scss +84 -32
  16. package/studio/all.st.css +144 -56
  17. package/studio/component.st.css +142 -56
  18. package/studio/foundation.st.css +2 -0
  19. package/wixel/all.css +81 -37
  20. package/wixel/all.scss +91 -39
  21. package/wixel/all.st.css +354 -266
  22. package/wixel/component.st.css +296 -210
  23. package/wixel/foundation.st.css +11 -9
  24. package/wixel/semantic.st.css +47 -47
package/wixel/all.scss CHANGED
@@ -291,13 +291,13 @@
291
291
  --wds-color-border-ai-primary: #ffffff;
292
292
  --wds-color-blue-600: #f4f6ff;
293
293
  --wds-color-blue-500: #eef0ff;
294
- --wds-color-blue-400: #d6dcff;
295
- --wds-color-blue-300: #bac5ff;
296
- --wds-color-blue-250: #9aa9ff;
297
- --wds-color-blue-200: #7b8ef8;
298
- --wds-color-blue-100: #526cff;
299
- --wds-color-blue-50: #4c49fb;
300
- --wds-color-blue-0: #4a2ae9;
294
+ --wds-color-blue-400: #dce2ff;
295
+ --wds-color-blue-300: #bac4ff;
296
+ --wds-color-blue-250: #97a7ff;
297
+ --wds-color-blue-200: #7489ff;
298
+ --wds-color-blue-100: #4a57ff;
299
+ --wds-color-blue-50: #4849f1;
300
+ --wds-color-blue-0: #4637e3;
301
301
  --wds-color-black-750: #f7f8f8;
302
302
  --wds-color-black-700: #edeef2;
303
303
  --wds-color-black-600: #e2e3ea;
@@ -309,7 +309,7 @@
309
309
  --wds-color-black-300-transparent-50: rgba(66, 64, 62, 0.5000);
310
310
  --wds-color-black-300-transparent-20: rgba(66, 64, 62, 0.2000);
311
311
  --wds-color-black-300-transparent-0: rgba(66, 64, 62, 0.0000);
312
- --wds-color-black-300: #42454c;
312
+ --wds-color-black-300: #595d70;
313
313
  --wds-color-black-200-transparent-70: rgba(66, 64, 62, 0.7000);
314
314
  --wds-color-black-200-transparent-60: rgba(66, 64, 62, 0.6000);
315
315
  --wds-color-black-200-transparent-50: rgba(66, 64, 62, 0.5000);
@@ -319,12 +319,13 @@
319
319
  --wds-color-black-100-transparent-50: rgba(38, 37, 36, 0.5000);
320
320
  --wds-color-black-100-transparent-40: rgba(38, 37, 36, 0.4000);
321
321
  --wds-color-black-100-transparent-30: rgba(38, 37, 36, 0.3000);
322
+ --wds-color-black-100-transparent-25: rgba(38, 37, 36, 0.2500);
322
323
  --wds-color-black-100-transparent-20: rgba(38, 37, 36, 0.2000);
323
324
  --wds-color-black-100-transparent-15: rgba(38, 37, 36, 0.1500);
324
325
  --wds-color-black-100-transparent-10: rgba(38, 37, 36, 0.1000);
325
326
  --wds-color-black-100-transparent-5: rgba(38, 37, 36, 0.0500);
326
327
  --wds-color-black-100-transparent-0: rgba(38, 37, 36, 0.0000);
327
- --wds-color-black-100: #131720;
328
+ --wds-color-black-100: #000624;
328
329
  --wds-card-gallery-item-overlay-fill: rgba(76, 73, 251, 0.1500);
329
330
  --wds-button-outline-hover: transparent;
330
331
  --wds-button-icon-offset-tiny: 12px;
@@ -406,43 +407,58 @@
406
407
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
407
408
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
408
409
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
410
+ --wds-toggle-button-shadow-y-tertiary-inverted: var(--wds-shadow-y-0);
411
+ --wds-toggle-button-shadow-y-tertiary: var(--wds-shadow-y-0);
412
+ --wds-toggle-button-shadow-y-secondary-inverted: var(--wds-shadow-y-0);
413
+ --wds-toggle-button-shadow-y-secondary: var(--wds-shadow-y-0);
414
+ --wds-toggle-button-shadow-y-primary-inverted: var(--wds-shadow-y-0);
415
+ --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-0);
416
+ --wds-toggle-button-shadow-x-tertiary-inverted: var(--wds-shadow-x-0);
417
+ --wds-toggle-button-shadow-x-tertiary: var(--wds-shadow-x-0);
418
+ --wds-toggle-button-shadow-x-secondary-inverted: var(--wds-shadow-x-0);
419
+ --wds-toggle-button-shadow-x-secondary: var(--wds-shadow-x-0);
420
+ --wds-toggle-button-shadow-x-primary-inverted: var(--wds-shadow-x-0);
421
+ --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-0);
422
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-0);
423
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-0);
424
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-100-transparent-0);
425
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-0);
426
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-0);
427
+ --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-0);
428
+ --wds-toggle-button-shadow-blur-tertiary-inverted: var(--wds-shadow-blur-0);
429
+ --wds-toggle-button-shadow-blur-tertiary: var(--wds-shadow-blur-0);
430
+ --wds-toggle-button-shadow-blur-secondary-inverted: var(--wds-shadow-blur-0);
431
+ --wds-toggle-button-shadow-blur-secondary: var(--wds-shadow-blur-0);
432
+ --wds-toggle-button-shadow-blur-primary-inverted: var(--wds-shadow-blur-0);
433
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-0);
434
+ --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
409
435
  --wds-toggle-button-padding-tiny: var(--wds-space-300);
436
+ --wds-toggle-button-padding-small-round: var(--wds-space-400);
410
437
  --wds-toggle-button-padding-small: var(--wds-space-400);
438
+ --wds-toggle-button-padding-medium-round: var(--wds-space-500);
411
439
  --wds-toggle-button-padding-medium: var(--wds-space-500);
440
+ --wds-toggle-button-padding-large-round: var(--wds-space-600);
412
441
  --wds-toggle-button-padding-large: var(--wds-space-600);
413
- --wds-toggle-button-padding-horizontal-tiny-round: var(--wds-space-300);
414
- --wds-toggle-button-padding-horizontal-tiny: var(--wds-space-300);
415
- --wds-toggle-button-padding-horizontal-small-round: var(--wds-space-400);
416
- --wds-toggle-button-padding-horizontal-small: var(--wds-space-400);
417
- --wds-toggle-button-padding-horizontal-right-tiny-round: var(--wds-space-300);
418
- --wds-toggle-button-padding-horizontal-right-tiny: var(--wds-space-150);
419
- --wds-toggle-button-padding-horizontal-right-small-round: var(--wds-space-400);
420
- --wds-toggle-button-padding-horizontal-right-small: var(--wds-space-300);
421
- --wds-toggle-button-padding-horizontal-right-medium-round: var(--wds-space-400);
422
- --wds-toggle-button-padding-horizontal-right-medium: var(--wds-space-300);
423
- --wds-toggle-button-padding-horizontal-right-large-round: var(--wds-space-400);
424
- --wds-toggle-button-padding-horizontal-right-large: var(--wds-space-400);
425
- --wds-toggle-button-padding-horizontal-medium-round: var(--wds-space-500);
426
- --wds-toggle-button-padding-horizontal-medium: var(--wds-space-500);
427
- --wds-toggle-button-padding-horizontal-left-tiny-round: var(--wds-space-150);
428
- --wds-toggle-button-padding-horizontal-left-tiny: var(--wds-space-100);
429
- --wds-toggle-button-padding-horizontal-left-small-round: var(--wds-space-300);
430
- --wds-toggle-button-padding-horizontal-left-small: var(--wds-space-150);
431
- --wds-toggle-button-padding-horizontal-left-medium-round: var(--wds-space-300);
432
- --wds-toggle-button-padding-horizontal-left-medium: var(--wds-space-150);
433
- --wds-toggle-button-padding-horizontal-left-large-round: var(--wds-space-300);
434
- --wds-toggle-button-padding-horizontal-left-large: var(--wds-space-200);
435
- --wds-toggle-button-padding-horizontal-large-round: var(--wds-space-600);
436
- --wds-toggle-button-padding-horizontal-large: var(--wds-space-600);
437
442
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-semi-bold);
443
+ --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
438
444
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-regular);
445
+ --wds-toggle-button-inner-shadow-y-secondary: var(--wds-shadow-y-0);
446
+ --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-0);
447
+ --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-0);
448
+ --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-0);
449
+ --wds-toggle-button-inner-shadow-fill-secondary: var(--wds-color-white-transparent-0);
450
+ --wds-toggle-button-inner-shadow-fill-primary: var(--wds-color-white-transparent-0);
451
+ --wds-toggle-button-inner-shadow-blur-secondary: var(--wds-shadow-blur-0);
452
+ --wds-toggle-button-inner-shadow-blur-primary: var(--wds-shadow-blur-0);
439
453
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
440
454
  --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
441
455
  --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-secondary-disabled);
456
+ --wds-toggle-button-fill-dark-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
442
457
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
443
458
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-400);
444
459
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-400);
445
460
  --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-400);
461
+ --wds-toggle-button-border-color-standard-disabled: var(--wds-color-fill-standard-secondary-disabled);
446
462
  --wds-thumbnail-title-padding-top: var(--wds-space-150);
447
463
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-semi-bold);
448
464
  --wds-thumbnail-illustration-fill-3: var(--wds-color-black-750);
@@ -472,8 +488,14 @@
472
488
  --wds-tabs-padding-vertical-medium: var(--wds-space-400);
473
489
  --wds-tabs-padding-horizontal-small: var(--wds-space-300);
474
490
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
475
- --wds-tabs-gap-small: var(--wds-space-150);
476
- --wds-tabs-gap-medium: var(--wds-space-200);
491
+ --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
492
+ --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
493
+ --wds-tabs-item-gap-small: var(--wds-space-150);
494
+ --wds-tabs-item-gap-medium: var(--wds-space-200);
495
+ --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
496
+ --wds-tabs-item-fill-active: var(--wds-color-black-100-transparent-0);
497
+ --wds-tabs-gap-horizontal: var(--wds-space-0);
498
+ --wds-tabs-border-radius: var(--wds-border-radius-0);
477
499
  --wds-table-toolbar-padding-horizontal: var(--wds-space-600);
478
500
  --wds-table-list-item-paddings: var(--wds-space-100);
479
501
  --wds-table-list-item-indentation-level-3: var(--wds-space-700);
@@ -1403,12 +1425,24 @@
1403
1425
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1404
1426
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1405
1427
  --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1406
- --wds-toggle-button-label-font-size-pill-small: var(--wds-font-size-body-tiny);
1428
+ --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-tiny);
1407
1429
  --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-text-disabled-light);
1408
1430
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1409
1431
  --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-standard-primary);
1410
1432
  --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-text-disabled);
1411
1433
  --wds-toggle-button-label-fill-standard-default: var(--wds-color-text-standard-primary);
1434
+ --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary-light);
1435
+ --wds-toggle-button-label-fill-inverted-selected-disabled: var(--wds-color-text-standard-primary-light);
1436
+ --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary-light);
1437
+ --wds-toggle-button-label-fill-inverted-hover: var(--wds-color-text-standard-primary);
1438
+ --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-text-disabled);
1439
+ --wds-toggle-button-label-fill-inverted-default: var(--wds-color-text-standard-primary);
1440
+ --wds-toggle-button-label-fill-dark-selected-hover: var(--wds-color-text-standard-primary-light);
1441
+ --wds-toggle-button-label-fill-dark-selected-disabled: var(--wds-color-text-disabled-light);
1442
+ --wds-toggle-button-label-fill-dark-selected: var(--wds-color-text-standard-primary-light);
1443
+ --wds-toggle-button-label-fill-dark-hover: var(--wds-color-text-standard-secondary);
1444
+ --wds-toggle-button-label-fill-dark-disabled: var(--wds-color-text-disabled);
1445
+ --wds-toggle-button-label-fill-dark-default: var(--wds-color-text-standard-primary);
1412
1446
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-fill-standard-secondary-hover);
1413
1447
  --wds-toggle-button-fill-standard-selected: var(--wds-color-fill-standard-secondary);
1414
1448
  --wds-toggle-button-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1418,6 +1452,19 @@
1418
1452
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-standard-primary);
1419
1453
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-secondary-hover);
1420
1454
  --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-secondary);
1455
+ --wds-toggle-button-fill-dark-selected-hover: var(--wds-color-fill-dark-primary-hover);
1456
+ --wds-toggle-button-fill-dark-selected: var(--wds-color-fill-dark-primary);
1457
+ --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-standard-tertiary-hover);
1458
+ --wds-toggle-button-fill-dark-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1459
+ --wds-toggle-button-fill-dark: var(--wds-color-fill-standard-tertiary);
1460
+ --wds-toggle-button-border-color-standard-hover: var(--wds-color-border-standard-tertiary);
1461
+ --wds-toggle-button-border-color-standard: var(--wds-color-fill-standard-secondary);
1462
+ --wds-toggle-button-border-color-inverted-hover: var(--wds-color-border-standard-tertiary-hover);
1463
+ --wds-toggle-button-border-color-inverted-disabled: var(--wds-color-border-standard-tertiary-disabled);
1464
+ --wds-toggle-button-border-color-inverted: var(--wds-color-border-standard-tertiary);
1465
+ --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1466
+ --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1467
+ --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1421
1468
  --wds-toast-background-fill: var(--wds-color-fill-surface-overlay-dark);
1422
1469
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1423
1470
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1431,6 +1478,8 @@
1431
1478
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1432
1479
  --wds-tabs-selection-border: linear-gradient(90deg, var(--wds-tabs-selection-fill-secondary) 0%, var(--wds-tabs-selection-fill-primary) 20%, var(--wds-tabs-selection-fill-primary) 80%, var(--wds-tabs-selection-fill-secondary) 100%);
1433
1480
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1481
+ --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1482
+ --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1434
1483
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1435
1484
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1436
1485
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
@@ -1674,7 +1723,9 @@
1674
1723
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1675
1724
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
1676
1725
  --wds-circular-progress-bar-foreground-fill-error: var(--wds-color-fill-destructive-primary);
1677
- --wds-checkbox-label-font-size-small: var(--wds-font-size-body-tiny);
1726
+ --wds-checkbox-label-font-size-small: var(--wds-font-size-body-small);
1727
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-medium);
1728
+ --wds-checkbox-label-disabled: var(--wds-color-text-standard-primary);
1678
1729
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled-light);
1679
1730
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1680
1731
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-secondary-hover);
@@ -1759,7 +1810,7 @@
1759
1810
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary);
1760
1811
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1761
1812
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-tiny);
1762
- --wds-toggle-button-label-font-line-height-pill-small: var(--wds-font-line-height-body-tiny);
1813
+ --wds-toggle-button-label-font-line-height-round-small: var(--wds-font-line-height-body-tiny);
1763
1814
  --wds-timeline-title-font-line-height: var(--wds-font-line-height-body-tiny);
1764
1815
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1765
1816
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-extra-tiny);
@@ -1795,7 +1846,8 @@
1795
1846
  --wds-field-set-label-font-line-height-small: var(--wds-font-line-height-body-small);
1796
1847
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-small);
1797
1848
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
1798
- --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1849
+ --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
1850
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1799
1851
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-extra-tiny);
1800
1852
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-tiny);
1801
1853
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-small);