@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/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.185.0 - 2026-04-22
2
+
3
+ ### Features
4
+
5
+ - feat(tokens): add avatar-text-fill component token [16189](https://github.com/wix-private/wix-design-systems/pull/16189)
6
+
1
7
  ## 1.183.0 - 2026-04-15
2
8
 
3
9
  ### Features
package/all.css CHANGED
@@ -354,6 +354,7 @@
354
354
  --wds-inner-shadow-blur-secondary: var(--wds-shadow-blur-0);
355
355
  --wds-inner-shadow-blur-primary: var(--wds-shadow-blur-0);
356
356
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-0);
357
+ --wds-border-width-varied-secondary: var(--wds-border-width-none);
357
358
  --wds-border-width-varied: var(--wds-border-width-100);
358
359
  --wds-border-width-default: var(--wds-border-width-100);
359
360
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -882,6 +883,7 @@
882
883
  --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-300);
883
884
  --wds-toast-vertical-padding: var(--wds-space-150);
884
885
  --wds-toast-horizontal-padding: var(--wds-space-200);
886
+ --wds-toast-border-radius: var(--wds-border-radius-400);
885
887
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
886
888
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-regular);
887
889
  --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-0);
@@ -1574,7 +1576,9 @@
1574
1576
  --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1575
1577
  --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1576
1578
  --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1579
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary-light);
1577
1580
  --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1581
+ --wds-toast-action-color: var(--wds-color-fill-light-primary);
1578
1582
  --wds-timeline-title-font-size: var(--wds-font-size-body-small);
1579
1583
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1580
1584
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1597,7 +1601,6 @@
1597
1601
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
1598
1602
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1599
1603
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1600
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1601
1604
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1602
1605
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1603
1606
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
@@ -2024,6 +2027,7 @@
2024
2027
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
2025
2028
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2026
2029
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2030
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2027
2031
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2028
2032
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
2029
2033
  --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
package/all.scss CHANGED
@@ -444,6 +444,7 @@
444
444
  --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-300);
445
445
  --wds-toast-vertical-padding: var(--wds-space-150);
446
446
  --wds-toast-horizontal-padding: var(--wds-space-200);
447
+ --wds-toast-border-radius: var(--wds-border-radius-400);
447
448
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
448
449
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-regular);
449
450
  --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-0);
@@ -1393,6 +1394,7 @@
1393
1394
  --wds-breadcrumbs-on-dark-fill-hover: var(--wds-color-white-transparent-30);
1394
1395
  --wds-breadcrumbs-font-size-small: var(--wds-font-size-300);
1395
1396
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-full);
1397
+ --wds-border-width-varied-secondary: var(--wds-border-width-none);
1396
1398
  --wds-border-width-varied: var(--wds-border-width-100);
1397
1399
  --wds-border-width-default: var(--wds-border-width-100);
1398
1400
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -1556,7 +1558,9 @@
1556
1558
  --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1557
1559
  --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1558
1560
  --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1561
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary-light);
1559
1562
  --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1563
+ --wds-toast-action-color: var(--wds-color-fill-light-primary);
1560
1564
  --wds-timeline-title-font-size: var(--wds-font-size-body-small);
1561
1565
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1562
1566
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1579,7 +1583,6 @@
1579
1583
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
1580
1584
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1581
1585
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1582
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1583
1586
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1584
1587
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1585
1588
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
@@ -2024,6 +2027,7 @@
2024
2027
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
2025
2028
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2026
2029
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2030
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2027
2031
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2028
2032
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
2029
2033
  --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
package/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);
@@ -1763,7 +1765,6 @@
1763
1765
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1764
1766
  @property st-global(--wds-space-viewport-spacing);
1765
1767
  @property st-global(--wds-status-toast-info-icon-fill);
1766
- @property st-global(--wds-status-toast-text-fill);
1767
1768
  @property st-global(--wds-status-toast-text-font-line-height);
1768
1769
  @property st-global(--wds-status-toast-text-font-size);
1769
1770
  @property st-global(--wds-status-toast-width);
@@ -1860,8 +1861,11 @@
1860
1861
  @property st-global(--wds-thumbnail-title-padding-top);
1861
1862
  @property st-global(--wds-timeline-title-font-line-height);
1862
1863
  @property st-global(--wds-timeline-title-font-size);
1864
+ @property st-global(--wds-toast-action-color);
1863
1865
  @property st-global(--wds-toast-background-fill);
1866
+ @property st-global(--wds-toast-border-radius);
1864
1867
  @property st-global(--wds-toast-horizontal-padding);
1868
+ @property st-global(--wds-toast-text-fill);
1865
1869
  @property st-global(--wds-toast-vertical-padding);
1866
1870
  @property st-global(--wds-toggle-button-border-color-dark);
1867
1871
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -2157,6 +2161,7 @@
2157
2161
  --wds-announcement-modal-title-font-size: 28px;
2158
2162
  --wds-avatar-group-gap-condensed: -3px;
2159
2163
  --wds-avatar-group-gap-default: 6px;
2164
+ --wds-avatar-text-fill: #ffffff;
2160
2165
  --wds-background-blur-0: 0px;
2161
2166
  --wds-background-blur-50: 0px;
2162
2167
  --wds-background-blur-100: 0px;
@@ -2228,6 +2233,7 @@
2228
2233
  --wds-border-width-default: 1px;
2229
2234
  --wds-border-width-none: 0px;
2230
2235
  --wds-border-width-varied: 1px;
2236
+ --wds-border-width-varied-secondary: 0px;
2231
2237
  --wds-breadcrumbs-border-radius: 1000px;
2232
2238
  --wds-breadcrumbs-font-size-small: 14px;
2233
2239
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
@@ -3868,7 +3874,6 @@
3868
3874
  --wds-space-padding-vertical-xx-tiny: 3px;
3869
3875
  --wds-space-viewport-spacing: 48px;
3870
3876
  --wds-status-toast-info-icon-fill: #ffffff;
3871
- --wds-status-toast-text-fill: #ffffff;
3872
3877
  --wds-status-toast-text-font-line-height: 24px;
3873
3878
  --wds-status-toast-text-font-size: 16px;
3874
3879
  --wds-status-toast-width: 600px;
@@ -3965,8 +3970,11 @@
3965
3970
  --wds-thumbnail-title-padding-top: 6px;
3966
3971
  --wds-timeline-title-font-line-height: 18px;
3967
3972
  --wds-timeline-title-font-size: 14px;
3973
+ --wds-toast-action-color: #ffffff;
3968
3974
  --wds-toast-background-fill: #000624;
3975
+ --wds-toast-border-radius: 8px;
3969
3976
  --wds-toast-horizontal-padding: 12px;
3977
+ --wds-toast-text-fill: #ffffff;
3970
3978
  --wds-toast-vertical-padding: 9px;
3971
3979
  --wds-toggle-button-border-color-dark: #dfe5eb;
3972
3980
  --wds-toggle-button-border-color-dark-disabled: rgba(0, 6, 36, .1);
package/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);
@@ -1043,7 +1044,6 @@
1043
1044
  @property st-global(--wds-social-preview-content-padding-horizontal);
1044
1045
  @property st-global(--wds-social-preview-content-padding-vertical);
1045
1046
  @property st-global(--wds-status-toast-info-icon-fill);
1046
- @property st-global(--wds-status-toast-text-fill);
1047
1047
  @property st-global(--wds-status-toast-text-font-line-height);
1048
1048
  @property st-global(--wds-status-toast-text-font-size);
1049
1049
  @property st-global(--wds-status-toast-width);
@@ -1140,8 +1140,11 @@
1140
1140
  @property st-global(--wds-thumbnail-title-padding-top);
1141
1141
  @property st-global(--wds-timeline-title-font-line-height);
1142
1142
  @property st-global(--wds-timeline-title-font-size);
1143
+ @property st-global(--wds-toast-action-color);
1143
1144
  @property st-global(--wds-toast-background-fill);
1145
+ @property st-global(--wds-toast-border-radius);
1144
1146
  @property st-global(--wds-toast-horizontal-padding);
1147
+ @property st-global(--wds-toast-text-fill);
1145
1148
  @property st-global(--wds-toast-vertical-padding);
1146
1149
  @property st-global(--wds-toggle-button-border-color-dark);
1147
1150
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -1435,6 +1438,7 @@
1435
1438
  --wds-announcement-modal-title-font-size: 28px;
1436
1439
  --wds-avatar-group-gap-condensed: -3px;
1437
1440
  --wds-avatar-group-gap-default: 6px;
1441
+ --wds-avatar-text-fill: #ffffff;
1438
1442
  --wds-badge-border-radius-medium: 2px;
1439
1443
  --wds-badge-border-radius-small: 2px;
1440
1444
  --wds-badge-border-radius-tiny: 2px;
@@ -2426,7 +2430,6 @@
2426
2430
  --wds-social-preview-content-padding-horizontal: 12px;
2427
2431
  --wds-social-preview-content-padding-vertical: 9px;
2428
2432
  --wds-status-toast-info-icon-fill: #ffffff;
2429
- --wds-status-toast-text-fill: #ffffff;
2430
2433
  --wds-status-toast-text-font-line-height: 24px;
2431
2434
  --wds-status-toast-text-font-size: 16px;
2432
2435
  --wds-status-toast-width: 600px;
@@ -2523,8 +2526,11 @@
2523
2526
  --wds-thumbnail-title-padding-top: 6px;
2524
2527
  --wds-timeline-title-font-line-height: 18px;
2525
2528
  --wds-timeline-title-font-size: 14px;
2529
+ --wds-toast-action-color: #ffffff;
2526
2530
  --wds-toast-background-fill: #000624;
2531
+ --wds-toast-border-radius: 8px;
2527
2532
  --wds-toast-horizontal-padding: 12px;
2533
+ --wds-toast-text-fill: #ffffff;
2528
2534
  --wds-toast-vertical-padding: 9px;
2529
2535
  --wds-toggle-button-border-color-dark: #dfe5eb;
2530
2536
  --wds-toggle-button-border-color-dark-disabled: rgba(0, 6, 36, .1);
package/odeditor/all.css CHANGED
@@ -376,6 +376,7 @@
376
376
  --wds-inner-shadow-blur-secondary: var(--wds-shadow-blur-25);
377
377
  --wds-inner-shadow-blur-primary: var(--wds-shadow-blur-25);
378
378
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-35);
379
+ --wds-border-width-varied-secondary: var(--wds-border-width-0);
379
380
  --wds-border-width-varied: var(--wds-border-width-0);
380
381
  --wds-border-width-default: var(--wds-border-width-100);
381
382
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -895,6 +896,7 @@
895
896
  --wds-toggle-button-border-color-dark: var(--wds-color-white-transparent-0);
896
897
  --wds-toast-vertical-padding: var(--wds-space-200);
897
898
  --wds-toast-horizontal-padding: var(--wds-space-300);
899
+ --wds-toast-border-radius: var(--wds-border-radius-400);
898
900
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
899
901
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-medium);
900
902
  --wds-thumbnail-overlay-fill: var(--wds-color-white-transparent-0);
@@ -1632,7 +1634,9 @@
1632
1634
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-dark-tertiary);
1633
1635
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-dark-secondary-hover);
1634
1636
  --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-dark-secondary-hover);
1637
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary-light);
1635
1638
  --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1639
+ --wds-toast-action-color: var(--wds-color-fill-light-primary);
1636
1640
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1637
1641
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1638
1642
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1655,7 +1659,6 @@
1655
1659
  --wds-swatches-fill-border-no-value: var(--wds-color-border-dark-secondary);
1656
1660
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1657
1661
  --wds-status-toast-text-font-size: var(--wds-font-size-body-small);
1658
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1659
1662
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1660
1663
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1661
1664
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
@@ -1971,6 +1974,7 @@
1971
1974
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-secondary);
1972
1975
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
1973
1976
  --wds-badge-label-font-size-small: var(--wds-font-size-body-tiny);
1977
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
1974
1978
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-2);
1975
1979
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1976
1980
  --wds-angle-input-ring-border: var(--wds-color-border-dark-secondary);
package/odeditor/all.scss CHANGED
@@ -475,6 +475,7 @@
475
475
  --wds-toggle-button-border-color-dark: var(--wds-color-white-transparent-0);
476
476
  --wds-toast-vertical-padding: var(--wds-space-200);
477
477
  --wds-toast-horizontal-padding: var(--wds-space-300);
478
+ --wds-toast-border-radius: var(--wds-border-radius-400);
478
479
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
479
480
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-medium);
480
481
  --wds-thumbnail-overlay-fill: var(--wds-color-white-transparent-0);
@@ -1478,6 +1479,7 @@
1478
1479
  --wds-breadcrumbs-on-dark-fill-hover: var(--wds-color-white-transparent-30);
1479
1480
  --wds-breadcrumbs-font-size-small: var(--wds-font-size-200);
1480
1481
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-100);
1482
+ --wds-border-width-varied-secondary: var(--wds-border-width-0);
1481
1483
  --wds-border-width-varied: var(--wds-border-width-0);
1482
1484
  --wds-border-width-default: var(--wds-border-width-100);
1483
1485
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -1613,7 +1615,9 @@
1613
1615
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-dark-tertiary);
1614
1616
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-dark-secondary-hover);
1615
1617
  --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-dark-secondary-hover);
1618
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary-light);
1616
1619
  --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1620
+ --wds-toast-action-color: var(--wds-color-fill-light-primary);
1617
1621
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1618
1622
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1619
1623
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1636,7 +1640,6 @@
1636
1640
  --wds-swatches-fill-border-no-value: var(--wds-color-border-dark-secondary);
1637
1641
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1638
1642
  --wds-status-toast-text-font-size: var(--wds-font-size-body-small);
1639
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1640
1643
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1641
1644
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1642
1645
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
@@ -1971,6 +1974,7 @@
1971
1974
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-secondary);
1972
1975
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
1973
1976
  --wds-badge-label-font-size-small: var(--wds-font-size-body-tiny);
1977
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
1974
1978
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-2);
1975
1979
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1976
1980
  --wds-angle-input-ring-border: var(--wds-color-border-dark-secondary);
package/odeditor/all.st.css CHANGED
@@ -51,6 +51,7 @@
51
51
  @property st-global(--wds-announcement-modal-title-font-size);
52
52
  @property st-global(--wds-avatar-group-gap-condensed);
53
53
  @property st-global(--wds-avatar-group-gap-default);
54
+ @property st-global(--wds-avatar-text-fill);
54
55
  @property st-global(--wds-background-blur-0);
55
56
  @property st-global(--wds-background-blur-50);
56
57
  @property st-global(--wds-background-blur-100);
@@ -124,6 +125,7 @@
124
125
  @property st-global(--wds-border-width-default);
125
126
  @property st-global(--wds-border-width-none);
126
127
  @property st-global(--wds-border-width-varied);
128
+ @property st-global(--wds-border-width-varied-secondary);
127
129
  @property st-global(--wds-breadcrumbs-border-radius);
128
130
  @property st-global(--wds-breadcrumbs-font-size-small);
129
131
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
@@ -1709,7 +1711,6 @@
1709
1711
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1710
1712
  @property st-global(--wds-space-viewport-spacing);
1711
1713
  @property st-global(--wds-status-toast-info-icon-fill);
1712
- @property st-global(--wds-status-toast-text-fill);
1713
1714
  @property st-global(--wds-status-toast-text-font-line-height);
1714
1715
  @property st-global(--wds-status-toast-text-font-size);
1715
1716
  @property st-global(--wds-status-toast-width);
@@ -1815,8 +1816,11 @@
1815
1816
  @property st-global(--wds-thumbnail-title-padding-top);
1816
1817
  @property st-global(--wds-timeline-title-font-line-height);
1817
1818
  @property st-global(--wds-timeline-title-font-size);
1819
+ @property st-global(--wds-toast-action-color);
1818
1820
  @property st-global(--wds-toast-background-fill);
1821
+ @property st-global(--wds-toast-border-radius);
1819
1822
  @property st-global(--wds-toast-horizontal-padding);
1823
+ @property st-global(--wds-toast-text-fill);
1820
1824
  @property st-global(--wds-toast-vertical-padding);
1821
1825
  @property st-global(--wds-toggle-button-border-color-dark);
1822
1826
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -2099,6 +2103,7 @@
2099
2103
  --wds-announcement-modal-title-font-size: 24px;
2100
2104
  --wds-avatar-group-gap-condensed: -2px;
2101
2105
  --wds-avatar-group-gap-default: 4px;
2106
+ --wds-avatar-text-fill: #ffffff;
2102
2107
  --wds-background-blur-0: 0px;
2103
2108
  --wds-background-blur-50: 4px;
2104
2109
  --wds-background-blur-100: 8px;
@@ -2172,6 +2177,7 @@
2172
2177
  --wds-border-width-default: 1px;
2173
2178
  --wds-border-width-none: 0px;
2174
2179
  --wds-border-width-varied: 0px;
2180
+ --wds-border-width-varied-secondary: 0px;
2175
2181
  --wds-breadcrumbs-border-radius: 2px;
2176
2182
  --wds-breadcrumbs-font-size-small: 12px;
2177
2183
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
@@ -3757,7 +3763,6 @@
3757
3763
  --wds-space-padding-vertical-xx-tiny: 4px;
3758
3764
  --wds-space-viewport-spacing: 48px;
3759
3765
  --wds-status-toast-info-icon-fill: #ffffff;
3760
- --wds-status-toast-text-fill: #ffffff;
3761
3766
  --wds-status-toast-text-font-line-height: 18px;
3762
3767
  --wds-status-toast-text-font-size: 14px;
3763
3768
  --wds-status-toast-width: 600px;
@@ -3863,8 +3868,11 @@
3863
3868
  --wds-thumbnail-title-padding-top: 4px;
3864
3869
  --wds-timeline-title-font-line-height: 16px;
3865
3870
  --wds-timeline-title-font-size: 12px;
3871
+ --wds-toast-action-color: #ffffff;
3866
3872
  --wds-toast-background-fill: #151414;
3873
+ --wds-toast-border-radius: 8px;
3867
3874
  --wds-toast-horizontal-padding: 12px;
3875
+ --wds-toast-text-fill: #ffffff;
3868
3876
  --wds-toast-vertical-padding: 8px;
3869
3877
  --wds-toggle-button-border-color-dark: rgba(255, 255, 255, 0);
3870
3878
  --wds-toggle-button-border-color-dark-disabled: rgba(255, 255, 255, 0);
package/odeditor/component.st.css CHANGED
@@ -51,6 +51,7 @@
51
51
  @property st-global(--wds-announcement-modal-title-font-size);
52
52
  @property st-global(--wds-avatar-group-gap-condensed);
53
53
  @property st-global(--wds-avatar-group-gap-default);
54
+ @property st-global(--wds-avatar-text-fill);
54
55
  @property st-global(--wds-badge-border-radius-medium);
55
56
  @property st-global(--wds-badge-border-radius-small);
56
57
  @property st-global(--wds-badge-border-radius-tiny);
@@ -992,7 +993,6 @@
992
993
  @property st-global(--wds-social-preview-content-padding-horizontal);
993
994
  @property st-global(--wds-social-preview-content-padding-vertical);
994
995
  @property st-global(--wds-status-toast-info-icon-fill);
995
- @property st-global(--wds-status-toast-text-fill);
996
996
  @property st-global(--wds-status-toast-text-font-line-height);
997
997
  @property st-global(--wds-status-toast-text-font-size);
998
998
  @property st-global(--wds-status-toast-width);
@@ -1098,8 +1098,11 @@
1098
1098
  @property st-global(--wds-thumbnail-title-padding-top);
1099
1099
  @property st-global(--wds-timeline-title-font-line-height);
1100
1100
  @property st-global(--wds-timeline-title-font-size);
1101
+ @property st-global(--wds-toast-action-color);
1101
1102
  @property st-global(--wds-toast-background-fill);
1103
+ @property st-global(--wds-toast-border-radius);
1102
1104
  @property st-global(--wds-toast-horizontal-padding);
1105
+ @property st-global(--wds-toast-text-fill);
1103
1106
  @property st-global(--wds-toast-vertical-padding);
1104
1107
  @property st-global(--wds-toggle-button-border-color-dark);
1105
1108
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -1380,6 +1383,7 @@
1380
1383
  --wds-announcement-modal-title-font-size: 24px;
1381
1384
  --wds-avatar-group-gap-condensed: -2px;
1382
1385
  --wds-avatar-group-gap-default: 4px;
1386
+ --wds-avatar-text-fill: #ffffff;
1383
1387
  --wds-badge-border-radius-medium: 4px;
1384
1388
  --wds-badge-border-radius-small: 4px;
1385
1389
  --wds-badge-border-radius-tiny: 4px;
@@ -2321,7 +2325,6 @@
2321
2325
  --wds-social-preview-content-padding-horizontal: 12px;
2322
2326
  --wds-social-preview-content-padding-vertical: 8px;
2323
2327
  --wds-status-toast-info-icon-fill: #ffffff;
2324
- --wds-status-toast-text-fill: #ffffff;
2325
2328
  --wds-status-toast-text-font-line-height: 18px;
2326
2329
  --wds-status-toast-text-font-size: 14px;
2327
2330
  --wds-status-toast-width: 600px;
@@ -2427,8 +2430,11 @@
2427
2430
  --wds-thumbnail-title-padding-top: 4px;
2428
2431
  --wds-timeline-title-font-line-height: 16px;
2429
2432
  --wds-timeline-title-font-size: 12px;
2433
+ --wds-toast-action-color: #ffffff;
2430
2434
  --wds-toast-background-fill: #151414;
2435
+ --wds-toast-border-radius: 8px;
2431
2436
  --wds-toast-horizontal-padding: 12px;
2437
+ --wds-toast-text-fill: #ffffff;
2432
2438
  --wds-toast-vertical-padding: 8px;
2433
2439
  --wds-toggle-button-border-color-dark: rgba(255, 255, 255, 0);
2434
2440
  --wds-toggle-button-border-color-dark-disabled: rgba(255, 255, 255, 0);
package/odeditor/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: 0px;
502
+ --wds-border-width-varied-secondary: 0px;
501
503
  --wds-color-border-ai-primary: #ffffff;
502
504
  --wds-color-border-ai-primary-active: #ffffff;
503
505
  --wds-color-border-ai-primary-disabled: #ffffff;
package/odeditor-dark/all.css CHANGED
@@ -35,7 +35,6 @@
35
35
  --wds-shadow-y-tertiary-toggle-button: 0.4px;
36
36
  --wds-shadow-y-secondary-toggle-button: 1.2px;
37
37
  --wds-shadow-y-secondary-overlay: 12;
38
- --wds-shadow-y-primary-modal: 9;
39
38
  --wds-shadow-y-600: 20px;
40
39
  --wds-shadow-y-350: 10px;
41
40
  --wds-shadow-y-300: 12px;
@@ -392,6 +391,7 @@
392
391
  --wds-inner-shadow-blur-secondary: var(--wds-shadow-blur-25);
393
392
  --wds-inner-shadow-blur-primary: var(--wds-shadow-blur-25);
394
393
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-35);
394
+ --wds-border-width-varied-secondary: var(--wds-border-width-100);
395
395
  --wds-border-width-varied: var(--wds-border-width-0);
396
396
  --wds-border-width-default: var(--wds-border-width-100);
397
397
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -438,10 +438,10 @@
438
438
  --wds-shadow-fill-primary-raised: var(--wds-color-white-transparent-30);
439
439
  --wds-shadow-fill-primary-overlay-dark: var(--wds-color-white-transparent-30);
440
440
  --wds-shadow-fill-primary-overlay: var(--wds-color-white-transparent-30);
441
- --wds-shadow-fill-primary-modal: var(--wds-color-white-transparent-30);
441
+ --wds-shadow-fill-primary-modal: var(--wds-color-white-transparent-20);
442
442
  --wds-shadow-fill-input: var(--wds-color-white-transparent-20);
443
443
  --wds-shadow-y-secondary-toggle: var(--wds-shadow-y-0);
444
- --wds-shadow-y-secondary-raised: var(--wds-shadow-y-50);
444
+ --wds-shadow-y-secondary-raised: var(--wds-shadow-y-100);
445
445
  --wds-shadow-y-secondary-overlay-dark: var(--wds-shadow-y-0);
446
446
  --wds-shadow-y-secondary-modal: var(--wds-shadow-y-0);
447
447
  --wds-shadow-y-primary-toggle-button: var(--wds-shadow-y-100);
@@ -449,10 +449,11 @@
449
449
  --wds-shadow-y-primary-raised: var(--wds-shadow-y-0);
450
450
  --wds-shadow-y-primary-overlay-dark: var(--wds-shadow-y-0);
451
451
  --wds-shadow-y-primary-overlay: var(--wds-shadow-y-0);
452
+ --wds-shadow-y-primary-modal: var(--wds-shadow-y-600);
452
453
  --wds-shadow-y-input: var(--wds-shadow-y-25);
453
454
  --wds-shadow-x-secondary-raised: var(--wds-shadow-x-0);
454
455
  --wds-shadow-x-primary-toggle-button: var(--wds-shadow-x-25);
455
- --wds-shadow-x-primary-modal: var(--wds-shadow-x-0);
456
+ --wds-shadow-x-primary-modal: var(--wds-shadow-x-50);
456
457
  --wds-shadow-x-input: var(--wds-shadow-x-25);
457
458
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
458
459
  --wds-shadow-inner-400-top: 0 32px 24px -24px var(--wds-color-white-transparent-20) inset, 0 8px 6px -6px var(--wds-color-white-transparent-5) inset;
@@ -476,7 +477,7 @@
476
477
  --wds-shadow-blur-primary-raised: var(--wds-shadow-blur-50);
477
478
  --wds-shadow-blur-primary-overlay-dark: var(--wds-shadow-blur-125);
478
479
  --wds-shadow-blur-primary-overlay: var(--wds-shadow-blur-125);
479
- --wds-shadow-blur-primary-modal: var(--wds-shadow-blur-500);
480
+ --wds-shadow-blur-primary-modal: var(--wds-shadow-blur-800);
480
481
  --wds-shadow-blur-input: var(--wds-shadow-blur-35);
481
482
  --wds-shadow-400: 0 8px 8px var(--wds-color-white-transparent-10), 0 3px 24px var(--wds-color-white-transparent-20);
482
483
  --wds-shadow-300: 0 var(--wds-shadow-y-300) var(--wds-shadow-blur-800) 0 var(--wds-color-white-transparent-30), 0 var(--wds-shadow-blur-0) var(--wds-shadow-y-0) 0 var(--wds-color-white-transparent-30);
@@ -901,6 +902,8 @@
901
902
  --wds-toggle-button-border-color-dark: var(--wds-color-white-transparent-0);
902
903
  --wds-toast-vertical-padding: var(--wds-space-200);
903
904
  --wds-toast-horizontal-padding: var(--wds-space-300);
905
+ --wds-toast-border-radius: var(--wds-border-radius-600);
906
+ --wds-toast-background-fill: var(--wds-color-white);
904
907
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
905
908
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-medium);
906
909
  --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-10);
@@ -1307,7 +1310,10 @@
1307
1310
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-black-500);
1308
1311
  --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-black-700);
1309
1312
  --wds-icon-button-color-fill-standard-secondary: var(--wds-color-black-100-transparent-0);
1313
+ --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-blue-200);
1310
1314
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-black-700);
1315
+ --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-blue-100);
1316
+ --wds-icon-button-color-fill-standard-primary: var(--wds-color-blue-150);
1311
1317
  --wds-icon-button-color-fill-premium-secondary-disabled: var(--wds-color-black-700);
1312
1318
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-black-700);
1313
1319
  --wds-icon-button-color-fill-light-secondary-disabled: var(--wds-color-black-700);
@@ -1637,7 +1643,8 @@
1637
1643
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-dark-tertiary);
1638
1644
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-dark-secondary-hover);
1639
1645
  --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-dark-secondary-hover);
1640
- --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1646
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary);
1647
+ --wds-toast-action-color: var(--wds-color-text-standard-primary);
1641
1648
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1642
1649
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1643
1650
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1660,8 +1667,7 @@
1660
1667
  --wds-swatches-fill-border-no-value: var(--wds-color-border-dark-secondary);
1661
1668
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1662
1669
  --wds-status-toast-text-font-size: var(--wds-font-size-body-small);
1663
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1664
- --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1670
+ --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary);
1665
1671
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1666
1672
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
1667
1673
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-tertiary);
@@ -1784,9 +1790,9 @@
1784
1790
  --wds-icon-button-color-text-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
1785
1791
  --wds-icon-button-color-text-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
1786
1792
  --wds-icon-button-color-text-standard-secondary: var(--wds-color-text-primary);
1787
- --wds-icon-button-color-text-standard-primary-hover: var(--wds-color-text-standard-primary-light);
1788
- --wds-icon-button-color-text-standard-primary-active: var(--wds-color-text-standard-primary-light);
1789
- --wds-icon-button-color-text-standard-primary: var(--wds-color-text-standard-primary-light);
1793
+ --wds-icon-button-color-text-standard-primary-hover: var(--wds-color-text-standard-primary);
1794
+ --wds-icon-button-color-text-standard-primary-active: var(--wds-color-text-standard-primary);
1795
+ --wds-icon-button-color-text-standard-primary: var(--wds-color-text-standard-primary);
1790
1796
  --wds-icon-button-color-text-premium-tertiary-hover: var(--wds-color-fill-premium-primary-active);
1791
1797
  --wds-icon-button-color-text-premium-tertiary-active: var(--wds-color-fill-premium-primary-active);
1792
1798
  --wds-icon-button-color-text-premium-tertiary: var(--wds-color-text-premium);
@@ -1821,9 +1827,6 @@
1821
1827
  --wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-light-secondary);
1822
1828
  --wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-tertiary-hover);
1823
1829
  --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-tertiary-active);
1824
- --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1825
- --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
1826
- --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
1827
1830
  --wds-icon-button-color-fill-premium-tertiary-hover: var(--wds-color-fill-premium-secondary-hover);
1828
1831
  --wds-icon-button-color-fill-premium-tertiary-disabled: var(--wds-color-fill-premium-secondary-disabled);
1829
1832
  --wds-icon-button-color-fill-premium-tertiary-active: var(--wds-color-fill-premium-secondary-active);
@@ -1975,6 +1978,7 @@
1975
1978
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-secondary);
1976
1979
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
1977
1980
  --wds-badge-label-font-size-small: var(--wds-font-size-body-tiny);
1981
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary);
1978
1982
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-2);
1979
1983
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1980
1984
  --wds-angle-input-ring-border: var(--wds-color-border-dark-secondary);