@wix/design-system-tokens 1.183.0 → 1.185.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 (27) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +5 -1
  3. package/all.scss +5 -1
  4. package/all.st.css +10 -2
  5. package/component.st.css +8 -2
  6. package/odeditor/all.css +5 -1
  7. package/odeditor/all.scss +5 -1
  8. package/odeditor/all.st.css +10 -2
  9. package/odeditor/component.st.css +8 -2
  10. package/odeditor/semantic.st.css +2 -0
  11. package/odeditor-dark/all.css +18 -14
  12. package/odeditor-dark/all.scss +18 -14
  13. package/odeditor-dark/all.st.css +24 -16
  14. package/odeditor-dark/component.st.css +17 -11
  15. package/odeditor-dark/semantic.st.css +7 -5
  16. package/package.json +2 -2
  17. package/semantic.st.css +2 -0
  18. package/studio/all.css +5 -1
  19. package/studio/all.scss +5 -1
  20. package/studio/all.st.css +10 -2
  21. package/studio/component.st.css +8 -2
  22. package/studio/semantic.st.css +2 -0
  23. package/wixel/all.css +5 -1
  24. package/wixel/all.scss +5 -1
  25. package/wixel/all.st.css +10 -2
  26. package/wixel/component.st.css +8 -2
  27. package/wixel/semantic.st.css +2 -0
package/studio/component.st.css CHANGED
@@ -52,6 +52,7 @@
52
52
  @property st-global(--wds-announcement-modal-title-font-size);
53
53
  @property st-global(--wds-avatar-group-gap-condensed);
54
54
  @property st-global(--wds-avatar-group-gap-default);
55
+ @property st-global(--wds-avatar-text-fill);
55
56
  @property st-global(--wds-badge-border-radius-medium);
56
57
  @property st-global(--wds-badge-border-radius-small);
57
58
  @property st-global(--wds-badge-border-radius-tiny);
@@ -1035,7 +1036,6 @@
1035
1036
  @property st-global(--wds-social-preview-content-padding-horizontal);
1036
1037
  @property st-global(--wds-social-preview-content-padding-vertical);
1037
1038
  @property st-global(--wds-status-toast-info-icon-fill);
1038
- @property st-global(--wds-status-toast-text-fill);
1039
1039
  @property st-global(--wds-status-toast-text-font-line-height);
1040
1040
  @property st-global(--wds-status-toast-text-font-size);
1041
1041
  @property st-global(--wds-status-toast-vertical-padding);
@@ -1133,8 +1133,11 @@
1133
1133
  @property st-global(--wds-thumbnail-title-padding-top);
1134
1134
  @property st-global(--wds-timeline-title-font-line-height);
1135
1135
  @property st-global(--wds-timeline-title-font-size);
1136
+ @property st-global(--wds-toast-action-color);
1136
1137
  @property st-global(--wds-toast-background-fill);
1138
+ @property st-global(--wds-toast-border-radius);
1137
1139
  @property st-global(--wds-toast-horizontal-padding);
1140
+ @property st-global(--wds-toast-text-fill);
1138
1141
  @property st-global(--wds-toast-vertical-padding);
1139
1142
  @property st-global(--wds-toggle-button-border-color-dark);
1140
1143
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -1429,6 +1432,7 @@
1429
1432
  --wds-announcement-modal-title-font-size: 24px;
1430
1433
  --wds-avatar-group-gap-condensed: -2px;
1431
1434
  --wds-avatar-group-gap-default: 4px;
1435
+ --wds-avatar-text-fill: #ffffff;
1432
1436
  --wds-badge-border-radius-medium: 2px;
1433
1437
  --wds-badge-border-radius-small: 2px;
1434
1438
  --wds-badge-border-radius-tiny: 2px;
@@ -2412,7 +2416,6 @@
2412
2416
  --wds-social-preview-content-padding-horizontal: 12px;
2413
2417
  --wds-social-preview-content-padding-vertical: 8px;
2414
2418
  --wds-status-toast-info-icon-fill: #ffffff;
2415
- --wds-status-toast-text-fill: #ffffff;
2416
2419
  --wds-status-toast-text-font-line-height: 24px;
2417
2420
  --wds-status-toast-text-font-size: 16px;
2418
2421
  --wds-status-toast-vertical-padding: 6px;
@@ -2510,8 +2513,11 @@
2510
2513
  --wds-thumbnail-title-padding-top: 4px;
2511
2514
  --wds-timeline-title-font-line-height: 16px;
2512
2515
  --wds-timeline-title-font-size: 12px;
2516
+ --wds-toast-action-color: #ffffff;
2513
2517
  --wds-toast-background-fill: #131720;
2518
+ --wds-toast-border-radius: 8px;
2514
2519
  --wds-toast-horizontal-padding: 8px;
2520
+ --wds-toast-text-fill: #ffffff;
2515
2521
  --wds-toast-vertical-padding: 6px;
2516
2522
  --wds-toggle-button-border-color-dark: #e2e3ea;
2517
2523
  --wds-toggle-button-border-color-dark-disabled: rgba(19, 23, 32, .1);
package/studio/semantic.st.css CHANGED
@@ -8,6 +8,7 @@
8
8
  @property st-global(--wds-border-radius-surface-sunken);
9
9
  @property st-global(--wds-border-width-default);
10
10
  @property st-global(--wds-border-width-varied);
11
+ @property st-global(--wds-border-width-varied-secondary);
11
12
  @property st-global(--wds-color-border-ai-primary);
12
13
  @property st-global(--wds-color-border-ai-primary-active);
13
14
  @property st-global(--wds-color-border-ai-primary-disabled);
@@ -498,6 +499,7 @@
498
499
  --wds-border-radius-surface-sunken: 0px;
499
500
  --wds-border-width-default: 1px;
500
501
  --wds-border-width-varied: 1px;
502
+ --wds-border-width-varied-secondary: 0px;
501
503
  --wds-color-border-ai-primary: #5a48f5;
502
504
  --wds-color-border-ai-primary-active: #ffffff;
503
505
  --wds-color-border-ai-primary-disabled: #ffffff;
package/wixel/all.css CHANGED
@@ -378,6 +378,7 @@
378
378
  --wds-inner-shadow-blur-secondary: var(--wds-shadow-blur-0);
379
379
  --wds-inner-shadow-blur-primary: var(--wds-shadow-blur-0);
380
380
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-0);
381
+ --wds-border-width-varied-secondary: var(--wds-border-width-none);
381
382
  --wds-border-width-varied: var(--wds-border-width-100);
382
383
  --wds-border-width-default: var(--wds-border-width-none);
383
384
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -867,6 +868,7 @@
867
868
  --wds-toggle-button-border-color-standard-disabled: var(--wds-color-fill-standard-secondary-disabled);
868
869
  --wds-toast-vertical-padding: var(--wds-space-150);
869
870
  --wds-toast-horizontal-padding: var(--wds-space-200);
871
+ --wds-toast-border-radius: var(--wds-border-radius-400);
870
872
  --wds-thumbnail-title-padding-top: var(--wds-space-150);
871
873
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-semi-bold);
872
874
  --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-10);
@@ -1572,7 +1574,9 @@
1572
1574
  --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1573
1575
  --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1574
1576
  --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1577
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary-light);
1575
1578
  --wds-toast-background-fill: var(--wds-color-fill-surface-overlay-dark);
1579
+ --wds-toast-action-color: var(--wds-color-fill-light-primary);
1576
1580
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1577
1581
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1578
1582
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-extra-tiny);
@@ -1595,7 +1599,6 @@
1595
1599
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
1596
1600
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1597
1601
  --wds-status-toast-text-font-size: var(--wds-font-size-body-tiny);
1598
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1599
1602
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1600
1603
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1601
1604
  --wds-sidebar-item-title: var(--wds-color-text-standard-secondary-light);
@@ -1961,6 +1964,7 @@
1961
1964
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
1962
1965
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
1963
1966
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
1967
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
1964
1968
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
1965
1969
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-small);
1966
1970
  --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
package/wixel/all.scss CHANGED
@@ -474,6 +474,7 @@
474
474
  --wds-toggle-button-border-color-standard-disabled: var(--wds-color-fill-standard-secondary-disabled);
475
475
  --wds-toast-vertical-padding: var(--wds-space-150);
476
476
  --wds-toast-horizontal-padding: var(--wds-space-200);
477
+ --wds-toast-border-radius: var(--wds-border-radius-400);
477
478
  --wds-thumbnail-title-padding-top: var(--wds-space-150);
478
479
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-semi-bold);
479
480
  --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-10);
@@ -1405,6 +1406,7 @@
1405
1406
  --wds-breadcrumbs-on-dark-fill-hover: var(--wds-color-white-transparent-30);
1406
1407
  --wds-breadcrumbs-font-size-small: var(--wds-font-size-200);
1407
1408
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-100);
1409
+ --wds-border-width-varied-secondary: var(--wds-border-width-none);
1408
1410
  --wds-border-width-varied: var(--wds-border-width-100);
1409
1411
  --wds-border-width-default: var(--wds-border-width-none);
1410
1412
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -1557,7 +1559,9 @@
1557
1559
  --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1558
1560
  --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1559
1561
  --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1562
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary-light);
1560
1563
  --wds-toast-background-fill: var(--wds-color-fill-surface-overlay-dark);
1564
+ --wds-toast-action-color: var(--wds-color-fill-light-primary);
1561
1565
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1562
1566
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1563
1567
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-extra-tiny);
@@ -1580,7 +1584,6 @@
1580
1584
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
1581
1585
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1582
1586
  --wds-status-toast-text-font-size: var(--wds-font-size-body-tiny);
1583
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1584
1587
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1585
1588
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1586
1589
  --wds-sidebar-item-title: var(--wds-color-text-standard-secondary-light);
@@ -1961,6 +1964,7 @@
1961
1964
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
1962
1965
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
1963
1966
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
1967
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
1964
1968
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
1965
1969
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-small);
1966
1970
  --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
package/wixel/all.st.css CHANGED
@@ -52,6 +52,7 @@
52
52
  @property st-global(--wds-announcement-modal-title-font-size);
53
53
  @property st-global(--wds-avatar-group-gap-condensed);
54
54
  @property st-global(--wds-avatar-group-gap-default);
55
+ @property st-global(--wds-avatar-text-fill);
55
56
  @property st-global(--wds-background-blur-0);
56
57
  @property st-global(--wds-background-blur-50);
57
58
  @property st-global(--wds-background-blur-100);
@@ -123,6 +124,7 @@
123
124
  @property st-global(--wds-border-width-default);
124
125
  @property st-global(--wds-border-width-none);
125
126
  @property st-global(--wds-border-width-varied);
127
+ @property st-global(--wds-border-width-varied-secondary);
126
128
  @property st-global(--wds-breadcrumbs-border-radius);
127
129
  @property st-global(--wds-breadcrumbs-font-size-small);
128
130
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
@@ -1706,7 +1708,6 @@
1706
1708
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1707
1709
  @property st-global(--wds-space-viewport-spacing);
1708
1710
  @property st-global(--wds-status-toast-info-icon-fill);
1709
- @property st-global(--wds-status-toast-text-fill);
1710
1711
  @property st-global(--wds-status-toast-text-font-line-height);
1711
1712
  @property st-global(--wds-status-toast-text-font-size);
1712
1713
  @property st-global(--wds-status-toast-width);
@@ -1803,8 +1804,11 @@
1803
1804
  @property st-global(--wds-thumbnail-title-padding-top);
1804
1805
  @property st-global(--wds-timeline-title-font-line-height);
1805
1806
  @property st-global(--wds-timeline-title-font-size);
1807
+ @property st-global(--wds-toast-action-color);
1806
1808
  @property st-global(--wds-toast-background-fill);
1809
+ @property st-global(--wds-toast-border-radius);
1807
1810
  @property st-global(--wds-toast-horizontal-padding);
1811
+ @property st-global(--wds-toast-text-fill);
1808
1812
  @property st-global(--wds-toast-vertical-padding);
1809
1813
  @property st-global(--wds-toggle-button-border-color-dark);
1810
1814
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -2095,6 +2099,7 @@
2095
2099
  --wds-announcement-modal-title-font-size: 32px;
2096
2100
  --wds-avatar-group-gap-condensed: -2px;
2097
2101
  --wds-avatar-group-gap-default: 4px;
2102
+ --wds-avatar-text-fill: #ffffff;
2098
2103
  --wds-background-blur-0: 0px;
2099
2104
  --wds-background-blur-50: 4px;
2100
2105
  --wds-background-blur-100: 8px;
@@ -2166,6 +2171,7 @@
2166
2171
  --wds-border-width-default: 0px;
2167
2172
  --wds-border-width-none: 0px;
2168
2173
  --wds-border-width-varied: 1px;
2174
+ --wds-border-width-varied-secondary: 0px;
2169
2175
  --wds-breadcrumbs-border-radius: 2px;
2170
2176
  --wds-breadcrumbs-font-size-small: 12px;
2171
2177
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, 0.3000);
@@ -3749,7 +3755,6 @@
3749
3755
  --wds-space-padding-vertical-xx-tiny: 4px;
3750
3756
  --wds-space-viewport-spacing: 48px;
3751
3757
  --wds-status-toast-info-icon-fill: #ffffff;
3752
- --wds-status-toast-text-fill: #ffffff;
3753
3758
  --wds-status-toast-text-font-line-height: 16px;
3754
3759
  --wds-status-toast-text-font-size: 12px;
3755
3760
  --wds-status-toast-width: 600px;
@@ -3846,8 +3851,11 @@
3846
3851
  --wds-thumbnail-title-padding-top: 6px;
3847
3852
  --wds-timeline-title-font-line-height: 16px;
3848
3853
  --wds-timeline-title-font-size: 12px;
3854
+ --wds-toast-action-color: #ffffff;
3849
3855
  --wds-toast-background-fill: #000624;
3856
+ --wds-toast-border-radius: 8px;
3850
3857
  --wds-toast-horizontal-padding: 8px;
3858
+ --wds-toast-text-fill: #ffffff;
3851
3859
  --wds-toast-vertical-padding: 6px;
3852
3860
  --wds-toggle-button-border-color-dark: #e2e3ea;
3853
3861
  --wds-toggle-button-border-color-dark-disabled: rgba(38, 37, 36, 0.1000);
package/wixel/component.st.css CHANGED
@@ -52,6 +52,7 @@
52
52
  @property st-global(--wds-announcement-modal-title-font-size);
53
53
  @property st-global(--wds-avatar-group-gap-condensed);
54
54
  @property st-global(--wds-avatar-group-gap-default);
55
+ @property st-global(--wds-avatar-text-fill);
55
56
  @property st-global(--wds-badge-border-radius-medium);
56
57
  @property st-global(--wds-badge-border-radius-small);
57
58
  @property st-global(--wds-badge-border-radius-tiny);
@@ -1008,7 +1009,6 @@
1008
1009
  @property st-global(--wds-social-preview-content-padding-horizontal);
1009
1010
  @property st-global(--wds-social-preview-content-padding-vertical);
1010
1011
  @property st-global(--wds-status-toast-info-icon-fill);
1011
- @property st-global(--wds-status-toast-text-fill);
1012
1012
  @property st-global(--wds-status-toast-text-font-line-height);
1013
1013
  @property st-global(--wds-status-toast-text-font-size);
1014
1014
  @property st-global(--wds-status-toast-width);
@@ -1105,8 +1105,11 @@
1105
1105
  @property st-global(--wds-thumbnail-title-padding-top);
1106
1106
  @property st-global(--wds-timeline-title-font-line-height);
1107
1107
  @property st-global(--wds-timeline-title-font-size);
1108
+ @property st-global(--wds-toast-action-color);
1108
1109
  @property st-global(--wds-toast-background-fill);
1110
+ @property st-global(--wds-toast-border-radius);
1109
1111
  @property st-global(--wds-toast-horizontal-padding);
1112
+ @property st-global(--wds-toast-text-fill);
1110
1113
  @property st-global(--wds-toast-vertical-padding);
1111
1114
  @property st-global(--wds-toggle-button-border-color-dark);
1112
1115
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -1395,6 +1398,7 @@
1395
1398
  --wds-announcement-modal-title-font-size: 32px;
1396
1399
  --wds-avatar-group-gap-condensed: -2px;
1397
1400
  --wds-avatar-group-gap-default: 4px;
1401
+ --wds-avatar-text-fill: #ffffff;
1398
1402
  --wds-badge-border-radius-medium: 2px;
1399
1403
  --wds-badge-border-radius-small: 2px;
1400
1404
  --wds-badge-border-radius-tiny: 2px;
@@ -2351,7 +2355,6 @@
2351
2355
  --wds-social-preview-content-padding-horizontal: 12px;
2352
2356
  --wds-social-preview-content-padding-vertical: 8px;
2353
2357
  --wds-status-toast-info-icon-fill: #ffffff;
2354
- --wds-status-toast-text-fill: #ffffff;
2355
2358
  --wds-status-toast-text-font-line-height: 16px;
2356
2359
  --wds-status-toast-text-font-size: 12px;
2357
2360
  --wds-status-toast-width: 600px;
@@ -2448,8 +2451,11 @@
2448
2451
  --wds-thumbnail-title-padding-top: 6px;
2449
2452
  --wds-timeline-title-font-line-height: 16px;
2450
2453
  --wds-timeline-title-font-size: 12px;
2454
+ --wds-toast-action-color: #ffffff;
2451
2455
  --wds-toast-background-fill: #000624;
2456
+ --wds-toast-border-radius: 8px;
2452
2457
  --wds-toast-horizontal-padding: 8px;
2458
+ --wds-toast-text-fill: #ffffff;
2453
2459
  --wds-toast-vertical-padding: 6px;
2454
2460
  --wds-toggle-button-border-color-dark: #e2e3ea;
2455
2461
  --wds-toggle-button-border-color-dark-disabled: rgba(38, 37, 36, 0.1000);
package/wixel/semantic.st.css CHANGED
@@ -8,6 +8,7 @@
8
8
  @property st-global(--wds-border-radius-surface-sunken);
9
9
  @property st-global(--wds-border-width-default);
10
10
  @property st-global(--wds-border-width-varied);
11
+ @property st-global(--wds-border-width-varied-secondary);
11
12
  @property st-global(--wds-color-border-ai-primary);
12
13
  @property st-global(--wds-color-border-ai-primary-active);
13
14
  @property st-global(--wds-color-border-ai-primary-disabled);
@@ -485,6 +486,7 @@
485
486
  --wds-border-radius-surface-sunken: 0px;
486
487
  --wds-border-width-default: 0px;
487
488
  --wds-border-width-varied: 1px;
489
+ --wds-border-width-varied-secondary: 0px;
488
490
  --wds-color-border-ai-primary: #ffffff;
489
491
  --wds-color-border-ai-primary-active: #ffffff;
490
492
  --wds-color-border-ai-primary-disabled: #ffffff;