@wix/design-system-tokens 1.184.0 → 1.186.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 +7 -1
  3. package/all.scss +7 -1
  4. package/all.st.css +14 -2
  5. package/component.st.css +12 -2
  6. package/odeditor/all.css +7 -1
  7. package/odeditor/all.scss +7 -1
  8. package/odeditor/all.st.css +14 -2
  9. package/odeditor/component.st.css +12 -2
  10. package/odeditor/semantic.st.css +2 -0
  11. package/odeditor-dark/all.css +11 -5
  12. package/odeditor-dark/all.scss +11 -5
  13. package/odeditor-dark/all.st.css +18 -6
  14. package/odeditor-dark/component.st.css +16 -6
  15. package/odeditor-dark/semantic.st.css +2 -0
  16. package/package.json +6 -8
  17. package/semantic.st.css +2 -0
  18. package/studio/all.css +7 -1
  19. package/studio/all.scss +7 -1
  20. package/studio/all.st.css +14 -2
  21. package/studio/component.st.css +12 -2
  22. package/studio/semantic.st.css +2 -0
  23. package/wixel/all.css +7 -1
  24. package/wixel/all.scss +7 -1
  25. package/wixel/all.st.css +14 -2
  26. package/wixel/component.st.css +12 -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);
@@ -1879,6 +1882,8 @@
1879
1882
  --wds-dock-foreground-fill: var(--wds-color-fill-standard-secondary-hover);
1880
1883
  --wds-dock-background-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1881
1884
  --wds-divider-vertical-fill-color-light: var(--wds-color-border-dark-secondary);
1885
+ --wds-divider-fill-light: var(--wds-color-border-dark-secondary);
1886
+ --wds-divider-fill-dark: var(--wds-color-border-dark-primary-active);
1882
1887
  --wds-divider-fill-color-light-secondary: var(--wds-color-border-dark-secondary);
1883
1888
  --wds-divider-fill-color-light-primary: var(--wds-color-border-dark-secondary);
1884
1889
  --wds-divider-fill-color-light: var(--wds-color-border-dark-secondary);
@@ -2024,6 +2029,7 @@
2024
2029
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
2025
2030
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2026
2031
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2032
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2027
2033
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2028
2034
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
2029
2035
  --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);
@@ -1878,6 +1881,8 @@
1878
1881
  --wds-dock-foreground-fill: var(--wds-color-fill-standard-secondary-hover);
1879
1882
  --wds-dock-background-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1880
1883
  --wds-divider-vertical-fill-color-light: var(--wds-color-border-dark-secondary);
1884
+ --wds-divider-fill-light: var(--wds-color-border-dark-secondary);
1885
+ --wds-divider-fill-dark: var(--wds-color-border-dark-primary-active);
1881
1886
  --wds-divider-fill-color-light-secondary: var(--wds-color-border-dark-secondary);
1882
1887
  --wds-divider-fill-color-light-primary: var(--wds-color-border-dark-secondary);
1883
1888
  --wds-divider-fill-color-light: var(--wds-color-border-dark-secondary);
@@ -2024,6 +2029,7 @@
2024
2029
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
2025
2030
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2026
2031
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2032
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2027
2033
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2028
2034
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
2029
2035
  --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);
@@ -852,6 +854,8 @@
852
854
  @property st-global(--wds-divider-fill-color-light);
853
855
  @property st-global(--wds-divider-fill-color-light-primary);
854
856
  @property st-global(--wds-divider-fill-color-light-secondary);
857
+ @property st-global(--wds-divider-fill-dark);
858
+ @property st-global(--wds-divider-fill-light);
855
859
  @property st-global(--wds-divider-gradient-border);
856
860
  @property st-global(--wds-divider-vertical-fill-color-light);
857
861
  @property st-global(--wds-dock-background-fill);
@@ -1763,7 +1767,6 @@
1763
1767
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1764
1768
  @property st-global(--wds-space-viewport-spacing);
1765
1769
  @property st-global(--wds-status-toast-info-icon-fill);
1766
- @property st-global(--wds-status-toast-text-fill);
1767
1770
  @property st-global(--wds-status-toast-text-font-line-height);
1768
1771
  @property st-global(--wds-status-toast-text-font-size);
1769
1772
  @property st-global(--wds-status-toast-width);
@@ -1860,8 +1863,11 @@
1860
1863
  @property st-global(--wds-thumbnail-title-padding-top);
1861
1864
  @property st-global(--wds-timeline-title-font-line-height);
1862
1865
  @property st-global(--wds-timeline-title-font-size);
1866
+ @property st-global(--wds-toast-action-color);
1863
1867
  @property st-global(--wds-toast-background-fill);
1868
+ @property st-global(--wds-toast-border-radius);
1864
1869
  @property st-global(--wds-toast-horizontal-padding);
1870
+ @property st-global(--wds-toast-text-fill);
1865
1871
  @property st-global(--wds-toast-vertical-padding);
1866
1872
  @property st-global(--wds-toggle-button-border-color-dark);
1867
1873
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -2157,6 +2163,7 @@
2157
2163
  --wds-announcement-modal-title-font-size: 28px;
2158
2164
  --wds-avatar-group-gap-condensed: -3px;
2159
2165
  --wds-avatar-group-gap-default: 6px;
2166
+ --wds-avatar-text-fill: #ffffff;
2160
2167
  --wds-background-blur-0: 0px;
2161
2168
  --wds-background-blur-50: 0px;
2162
2169
  --wds-background-blur-100: 0px;
@@ -2228,6 +2235,7 @@
2228
2235
  --wds-border-width-default: 1px;
2229
2236
  --wds-border-width-none: 0px;
2230
2237
  --wds-border-width-varied: 1px;
2238
+ --wds-border-width-varied-secondary: 0px;
2231
2239
  --wds-breadcrumbs-border-radius: 1000px;
2232
2240
  --wds-breadcrumbs-font-size-small: 14px;
2233
2241
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
@@ -2957,6 +2965,8 @@
2957
2965
  --wds-divider-fill-color-light: #dfe5eb;
2958
2966
  --wds-divider-fill-color-light-primary: #dfe5eb;
2959
2967
  --wds-divider-fill-color-light-secondary: #dfe5eb;
2968
+ --wds-divider-fill-dark: #44485f;
2969
+ --wds-divider-fill-light: #dfe5eb;
2960
2970
  --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
2961
2971
  --wds-divider-vertical-fill-color-light: #dfe5eb;
2962
2972
  --wds-dock-background-fill: #e7f0ff;
@@ -3868,7 +3878,6 @@
3868
3878
  --wds-space-padding-vertical-xx-tiny: 3px;
3869
3879
  --wds-space-viewport-spacing: 48px;
3870
3880
  --wds-status-toast-info-icon-fill: #ffffff;
3871
- --wds-status-toast-text-fill: #ffffff;
3872
3881
  --wds-status-toast-text-font-line-height: 24px;
3873
3882
  --wds-status-toast-text-font-size: 16px;
3874
3883
  --wds-status-toast-width: 600px;
@@ -3965,8 +3974,11 @@
3965
3974
  --wds-thumbnail-title-padding-top: 6px;
3966
3975
  --wds-timeline-title-font-line-height: 18px;
3967
3976
  --wds-timeline-title-font-size: 14px;
3977
+ --wds-toast-action-color: #ffffff;
3968
3978
  --wds-toast-background-fill: #000624;
3979
+ --wds-toast-border-radius: 8px;
3969
3980
  --wds-toast-horizontal-padding: 12px;
3981
+ --wds-toast-text-fill: #ffffff;
3970
3982
  --wds-toast-vertical-padding: 9px;
3971
3983
  --wds-toggle-button-border-color-dark: #dfe5eb;
3972
3984
  --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);
@@ -354,6 +355,8 @@
354
355
  @property st-global(--wds-divider-fill-color-light);
355
356
  @property st-global(--wds-divider-fill-color-light-primary);
356
357
  @property st-global(--wds-divider-fill-color-light-secondary);
358
+ @property st-global(--wds-divider-fill-dark);
359
+ @property st-global(--wds-divider-fill-light);
357
360
  @property st-global(--wds-divider-gradient-border);
358
361
  @property st-global(--wds-divider-vertical-fill-color-light);
359
362
  @property st-global(--wds-dock-background-fill);
@@ -1043,7 +1046,6 @@
1043
1046
  @property st-global(--wds-social-preview-content-padding-horizontal);
1044
1047
  @property st-global(--wds-social-preview-content-padding-vertical);
1045
1048
  @property st-global(--wds-status-toast-info-icon-fill);
1046
- @property st-global(--wds-status-toast-text-fill);
1047
1049
  @property st-global(--wds-status-toast-text-font-line-height);
1048
1050
  @property st-global(--wds-status-toast-text-font-size);
1049
1051
  @property st-global(--wds-status-toast-width);
@@ -1140,8 +1142,11 @@
1140
1142
  @property st-global(--wds-thumbnail-title-padding-top);
1141
1143
  @property st-global(--wds-timeline-title-font-line-height);
1142
1144
  @property st-global(--wds-timeline-title-font-size);
1145
+ @property st-global(--wds-toast-action-color);
1143
1146
  @property st-global(--wds-toast-background-fill);
1147
+ @property st-global(--wds-toast-border-radius);
1144
1148
  @property st-global(--wds-toast-horizontal-padding);
1149
+ @property st-global(--wds-toast-text-fill);
1145
1150
  @property st-global(--wds-toast-vertical-padding);
1146
1151
  @property st-global(--wds-toggle-button-border-color-dark);
1147
1152
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -1435,6 +1440,7 @@
1435
1440
  --wds-announcement-modal-title-font-size: 28px;
1436
1441
  --wds-avatar-group-gap-condensed: -3px;
1437
1442
  --wds-avatar-group-gap-default: 6px;
1443
+ --wds-avatar-text-fill: #ffffff;
1438
1444
  --wds-badge-border-radius-medium: 2px;
1439
1445
  --wds-badge-border-radius-small: 2px;
1440
1446
  --wds-badge-border-radius-tiny: 2px;
@@ -1737,6 +1743,8 @@
1737
1743
  --wds-divider-fill-color-light: #dfe5eb;
1738
1744
  --wds-divider-fill-color-light-primary: #dfe5eb;
1739
1745
  --wds-divider-fill-color-light-secondary: #dfe5eb;
1746
+ --wds-divider-fill-dark: #44485f;
1747
+ --wds-divider-fill-light: #dfe5eb;
1740
1748
  --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
1741
1749
  --wds-divider-vertical-fill-color-light: #dfe5eb;
1742
1750
  --wds-dock-background-fill: #e7f0ff;
@@ -2426,7 +2434,6 @@
2426
2434
  --wds-social-preview-content-padding-horizontal: 12px;
2427
2435
  --wds-social-preview-content-padding-vertical: 9px;
2428
2436
  --wds-status-toast-info-icon-fill: #ffffff;
2429
- --wds-status-toast-text-fill: #ffffff;
2430
2437
  --wds-status-toast-text-font-line-height: 24px;
2431
2438
  --wds-status-toast-text-font-size: 16px;
2432
2439
  --wds-status-toast-width: 600px;
@@ -2523,8 +2530,11 @@
2523
2530
  --wds-thumbnail-title-padding-top: 6px;
2524
2531
  --wds-timeline-title-font-line-height: 18px;
2525
2532
  --wds-timeline-title-font-size: 14px;
2533
+ --wds-toast-action-color: #ffffff;
2526
2534
  --wds-toast-background-fill: #000624;
2535
+ --wds-toast-border-radius: 8px;
2527
2536
  --wds-toast-horizontal-padding: 12px;
2537
+ --wds-toast-text-fill: #ffffff;
2528
2538
  --wds-toast-vertical-padding: 9px;
2529
2539
  --wds-toggle-button-border-color-dark: #dfe5eb;
2530
2540
  --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);
@@ -1876,6 +1879,8 @@
1876
1879
  --wds-dock-point-fill-hover: var(--wds-color-fill-dark-secondary-active);
1877
1880
  --wds-dock-point-fill-fill: var(--wds-color-text-standard-secondary-light);
1878
1881
  --wds-dock-point-fill-active: var(--wds-color-fill-standard-primary);
1882
+ --wds-divider-fill-light: var(--wds-color-border-dark-secondary);
1883
+ --wds-divider-fill-dark: var(--wds-color-border-dark-primary-active);
1879
1884
  --wds-divider-fill-color-light-secondary: var(--wds-color-border-dark-secondary);
1880
1885
  --wds-divider-fill-color-light-primary: var(--wds-color-border-dark-secondary);
1881
1886
  --wds-date-picker-icon-fill-disabled: var(--wds-color-text-disabled);
@@ -1971,6 +1976,7 @@
1971
1976
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-secondary);
1972
1977
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
1973
1978
  --wds-badge-label-font-size-small: var(--wds-font-size-body-tiny);
1979
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
1974
1980
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-2);
1975
1981
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1976
1982
  --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);
@@ -1874,6 +1877,8 @@
1874
1877
  --wds-dock-point-fill-hover: var(--wds-color-fill-dark-secondary-active);
1875
1878
  --wds-dock-point-fill-fill: var(--wds-color-text-standard-secondary-light);
1876
1879
  --wds-dock-point-fill-active: var(--wds-color-fill-standard-primary);
1880
+ --wds-divider-fill-light: var(--wds-color-border-dark-secondary);
1881
+ --wds-divider-fill-dark: var(--wds-color-border-dark-primary-active);
1877
1882
  --wds-divider-fill-color-light-secondary: var(--wds-color-border-dark-secondary);
1878
1883
  --wds-divider-fill-color-light-primary: var(--wds-color-border-dark-secondary);
1879
1884
  --wds-date-picker-icon-fill-disabled: var(--wds-color-text-disabled);
@@ -1971,6 +1976,7 @@
1971
1976
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-secondary);
1972
1977
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
1973
1978
  --wds-badge-label-font-size-small: var(--wds-font-size-body-tiny);
1979
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
1974
1980
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-2);
1975
1981
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1976
1982
  --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);
@@ -834,6 +836,8 @@
834
836
  @property st-global(--wds-date-picker-icon-fill-disabled);
835
837
  @property st-global(--wds-divider-fill-color-light-primary);
836
838
  @property st-global(--wds-divider-fill-color-light-secondary);
839
+ @property st-global(--wds-divider-fill-dark);
840
+ @property st-global(--wds-divider-fill-light);
837
841
  @property st-global(--wds-dock-area-fill);
838
842
  @property st-global(--wds-dock-point-fill-active);
839
843
  @property st-global(--wds-dock-point-fill-fill);
@@ -1709,7 +1713,6 @@
1709
1713
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1710
1714
  @property st-global(--wds-space-viewport-spacing);
1711
1715
  @property st-global(--wds-status-toast-info-icon-fill);
1712
- @property st-global(--wds-status-toast-text-fill);
1713
1716
  @property st-global(--wds-status-toast-text-font-line-height);
1714
1717
  @property st-global(--wds-status-toast-text-font-size);
1715
1718
  @property st-global(--wds-status-toast-width);
@@ -1815,8 +1818,11 @@
1815
1818
  @property st-global(--wds-thumbnail-title-padding-top);
1816
1819
  @property st-global(--wds-timeline-title-font-line-height);
1817
1820
  @property st-global(--wds-timeline-title-font-size);
1821
+ @property st-global(--wds-toast-action-color);
1818
1822
  @property st-global(--wds-toast-background-fill);
1823
+ @property st-global(--wds-toast-border-radius);
1819
1824
  @property st-global(--wds-toast-horizontal-padding);
1825
+ @property st-global(--wds-toast-text-fill);
1820
1826
  @property st-global(--wds-toast-vertical-padding);
1821
1827
  @property st-global(--wds-toggle-button-border-color-dark);
1822
1828
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -2099,6 +2105,7 @@
2099
2105
  --wds-announcement-modal-title-font-size: 24px;
2100
2106
  --wds-avatar-group-gap-condensed: -2px;
2101
2107
  --wds-avatar-group-gap-default: 4px;
2108
+ --wds-avatar-text-fill: #ffffff;
2102
2109
  --wds-background-blur-0: 0px;
2103
2110
  --wds-background-blur-50: 4px;
2104
2111
  --wds-background-blur-100: 8px;
@@ -2172,6 +2179,7 @@
2172
2179
  --wds-border-width-default: 1px;
2173
2180
  --wds-border-width-none: 0px;
2174
2181
  --wds-border-width-varied: 0px;
2182
+ --wds-border-width-varied-secondary: 0px;
2175
2183
  --wds-breadcrumbs-border-radius: 2px;
2176
2184
  --wds-breadcrumbs-font-size-small: 12px;
2177
2185
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
@@ -2882,6 +2890,8 @@
2882
2890
  --wds-date-picker-icon-fill-disabled: #a8a6a5;
2883
2891
  --wds-divider-fill-color-light-primary: #dedede;
2884
2892
  --wds-divider-fill-color-light-secondary: #dedede;
2893
+ --wds-divider-fill-dark: #383838;
2894
+ --wds-divider-fill-light: #dedede;
2885
2895
  --wds-dock-area-fill: #f8f6f6;
2886
2896
  --wds-dock-point-fill-active: #2f5dff;
2887
2897
  --wds-dock-point-fill-fill: #767574;
@@ -3757,7 +3767,6 @@
3757
3767
  --wds-space-padding-vertical-xx-tiny: 4px;
3758
3768
  --wds-space-viewport-spacing: 48px;
3759
3769
  --wds-status-toast-info-icon-fill: #ffffff;
3760
- --wds-status-toast-text-fill: #ffffff;
3761
3770
  --wds-status-toast-text-font-line-height: 18px;
3762
3771
  --wds-status-toast-text-font-size: 14px;
3763
3772
  --wds-status-toast-width: 600px;
@@ -3863,8 +3872,11 @@
3863
3872
  --wds-thumbnail-title-padding-top: 4px;
3864
3873
  --wds-timeline-title-font-line-height: 16px;
3865
3874
  --wds-timeline-title-font-size: 12px;
3875
+ --wds-toast-action-color: #ffffff;
3866
3876
  --wds-toast-background-fill: #151414;
3877
+ --wds-toast-border-radius: 8px;
3867
3878
  --wds-toast-horizontal-padding: 12px;
3879
+ --wds-toast-text-fill: #ffffff;
3868
3880
  --wds-toast-vertical-padding: 8px;
3869
3881
  --wds-toggle-button-border-color-dark: rgba(255, 255, 255, 0);
3870
3882
  --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);
@@ -341,6 +342,8 @@
341
342
  @property st-global(--wds-date-picker-icon-fill-disabled);
342
343
  @property st-global(--wds-divider-fill-color-light-primary);
343
344
  @property st-global(--wds-divider-fill-color-light-secondary);
345
+ @property st-global(--wds-divider-fill-dark);
346
+ @property st-global(--wds-divider-fill-light);
344
347
  @property st-global(--wds-dock-area-fill);
345
348
  @property st-global(--wds-dock-point-fill-active);
346
349
  @property st-global(--wds-dock-point-fill-fill);
@@ -992,7 +995,6 @@
992
995
  @property st-global(--wds-social-preview-content-padding-horizontal);
993
996
  @property st-global(--wds-social-preview-content-padding-vertical);
994
997
  @property st-global(--wds-status-toast-info-icon-fill);
995
- @property st-global(--wds-status-toast-text-fill);
996
998
  @property st-global(--wds-status-toast-text-font-line-height);
997
999
  @property st-global(--wds-status-toast-text-font-size);
998
1000
  @property st-global(--wds-status-toast-width);
@@ -1098,8 +1100,11 @@
1098
1100
  @property st-global(--wds-thumbnail-title-padding-top);
1099
1101
  @property st-global(--wds-timeline-title-font-line-height);
1100
1102
  @property st-global(--wds-timeline-title-font-size);
1103
+ @property st-global(--wds-toast-action-color);
1101
1104
  @property st-global(--wds-toast-background-fill);
1105
+ @property st-global(--wds-toast-border-radius);
1102
1106
  @property st-global(--wds-toast-horizontal-padding);
1107
+ @property st-global(--wds-toast-text-fill);
1103
1108
  @property st-global(--wds-toast-vertical-padding);
1104
1109
  @property st-global(--wds-toggle-button-border-color-dark);
1105
1110
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -1380,6 +1385,7 @@
1380
1385
  --wds-announcement-modal-title-font-size: 24px;
1381
1386
  --wds-avatar-group-gap-condensed: -2px;
1382
1387
  --wds-avatar-group-gap-default: 4px;
1388
+ --wds-avatar-text-fill: #ffffff;
1383
1389
  --wds-badge-border-radius-medium: 4px;
1384
1390
  --wds-badge-border-radius-small: 4px;
1385
1391
  --wds-badge-border-radius-tiny: 4px;
@@ -1670,6 +1676,8 @@
1670
1676
  --wds-date-picker-icon-fill-disabled: #a8a6a5;
1671
1677
  --wds-divider-fill-color-light-primary: #dedede;
1672
1678
  --wds-divider-fill-color-light-secondary: #dedede;
1679
+ --wds-divider-fill-dark: #383838;
1680
+ --wds-divider-fill-light: #dedede;
1673
1681
  --wds-dock-area-fill: #f8f6f6;
1674
1682
  --wds-dock-point-fill-active: #2f5dff;
1675
1683
  --wds-dock-point-fill-fill: #767574;
@@ -2321,7 +2329,6 @@
2321
2329
  --wds-social-preview-content-padding-horizontal: 12px;
2322
2330
  --wds-social-preview-content-padding-vertical: 8px;
2323
2331
  --wds-status-toast-info-icon-fill: #ffffff;
2324
- --wds-status-toast-text-fill: #ffffff;
2325
2332
  --wds-status-toast-text-font-line-height: 18px;
2326
2333
  --wds-status-toast-text-font-size: 14px;
2327
2334
  --wds-status-toast-width: 600px;
@@ -2427,8 +2434,11 @@
2427
2434
  --wds-thumbnail-title-padding-top: 4px;
2428
2435
  --wds-timeline-title-font-line-height: 16px;
2429
2436
  --wds-timeline-title-font-size: 12px;
2437
+ --wds-toast-action-color: #ffffff;
2430
2438
  --wds-toast-background-fill: #151414;
2439
+ --wds-toast-border-radius: 8px;
2431
2440
  --wds-toast-horizontal-padding: 12px;
2441
+ --wds-toast-text-fill: #ffffff;
2432
2442
  --wds-toast-vertical-padding: 8px;
2433
2443
  --wds-toggle-button-border-color-dark: rgba(255, 255, 255, 0);
2434
2444
  --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
@@ -391,6 +391,7 @@
391
391
  --wds-inner-shadow-blur-secondary: var(--wds-shadow-blur-25);
392
392
  --wds-inner-shadow-blur-primary: var(--wds-shadow-blur-25);
393
393
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-35);
394
+ --wds-border-width-varied-secondary: var(--wds-border-width-100);
394
395
  --wds-border-width-varied: var(--wds-border-width-0);
395
396
  --wds-border-width-default: var(--wds-border-width-100);
396
397
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -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);
@@ -1342,6 +1345,8 @@
1342
1345
  --wds-dropdown-layout-option-size-big: var(--wds-space-1000);
1343
1346
  --wds-dropdown-list-paddings: var(--wds-space-200);
1344
1347
  --wds-dock-area-fill: var(--wds-color-black-750);
1348
+ --wds-divider-fill-light: var(--wds-color-black-750);
1349
+ --wds-divider-fill-dark: var(--wds-color-black-700);
1345
1350
  --wds-custom-modal-header-padding-vertical: var(--wds-space-600);
1346
1351
  --wds-custom-modal-header-padding-right: var(--wds-space-500);
1347
1352
  --wds-custom-modal-header-padding-left: var(--wds-space-600);
@@ -1640,7 +1645,8 @@
1640
1645
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-dark-tertiary);
1641
1646
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-dark-secondary-hover);
1642
1647
  --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-dark-secondary-hover);
1643
- --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1648
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary);
1649
+ --wds-toast-action-color: var(--wds-color-text-standard-primary);
1644
1650
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1645
1651
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1646
1652
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1663,8 +1669,7 @@
1663
1669
  --wds-swatches-fill-border-no-value: var(--wds-color-border-dark-secondary);
1664
1670
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1665
1671
  --wds-status-toast-text-font-size: var(--wds-font-size-body-small);
1666
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1667
- --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1672
+ --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary);
1668
1673
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1669
1674
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
1670
1675
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-tertiary);
@@ -1867,13 +1872,13 @@
1867
1872
  --wds-icon-button-color-border-dark-secondary: var(--wds-color-border-dark-primary);
1868
1873
  --wds-form-field-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1869
1874
  --wds-form-field-label-font-size-small: var(--wds-font-size-body-tiny);
1870
- --wds-form-field-label-fill: var(--wds-color-text-standard-secondary);
1875
+ --wds-form-field-label-fill: var(--wds-color-text-standard-primary);
1871
1876
  --wds-fill-button-icon-color: var(--wds-color-text-standard-primary);
1872
1877
  --wds-fill-button-fill-hover: var(--wds-color-fill-standard-tertiary);
1873
1878
  --wds-fill-button-fill: var(--wds-color-fill-standard-tertiary);
1874
1879
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1875
1880
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1876
- --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1881
+ --wds-field-set-label-fill: var(--wds-color-text-standard-primary);
1877
1882
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1878
1883
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1879
1884
  --wds-drag-handle-fill: var(--wds-color-text-standard-primary);
@@ -1975,6 +1980,7 @@
1975
1980
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-secondary);
1976
1981
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
1977
1982
  --wds-badge-label-font-size-small: var(--wds-font-size-body-tiny);
1983
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary);
1978
1984
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-2);
1979
1985
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1980
1986
  --wds-angle-input-ring-border: var(--wds-color-border-dark-secondary);