@wix/design-system-tokens 1.184.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 +7 -3
  12. package/odeditor-dark/all.scss +7 -3
  13. package/odeditor-dark/all.st.css +12 -4
  14. package/odeditor-dark/component.st.css +10 -4
  15. package/odeditor-dark/semantic.st.css +2 -0
  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
@@ -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);
@@ -1640,7 +1643,8 @@
1640
1643
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-dark-tertiary);
1641
1644
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-dark-secondary-hover);
1642
1645
  --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-dark-secondary-hover);
1643
- --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);
1644
1648
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1645
1649
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1646
1650
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1663,8 +1667,7 @@
1663
1667
  --wds-swatches-fill-border-no-value: var(--wds-color-border-dark-secondary);
1664
1668
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1665
1669
  --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);
1670
+ --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary);
1668
1671
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1669
1672
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
1670
1673
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-tertiary);
@@ -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);
package/odeditor-dark/all.scss CHANGED
@@ -481,6 +481,8 @@
481
481
  --wds-toggle-button-border-color-dark: var(--wds-color-white-transparent-0);
482
482
  --wds-toast-vertical-padding: var(--wds-space-200);
483
483
  --wds-toast-horizontal-padding: var(--wds-space-300);
484
+ --wds-toast-border-radius: var(--wds-border-radius-600);
485
+ --wds-toast-background-fill: var(--wds-color-white);
484
486
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
485
487
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-medium);
486
488
  --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-10);
@@ -1491,6 +1493,7 @@
1491
1493
  --wds-breadcrumbs-on-dark-fill-hover: var(--wds-color-white-transparent-30);
1492
1494
  --wds-breadcrumbs-font-size-small: var(--wds-font-size-200);
1493
1495
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-100);
1496
+ --wds-border-width-varied-secondary: var(--wds-border-width-100);
1494
1497
  --wds-border-width-varied: var(--wds-border-width-0);
1495
1498
  --wds-border-width-default: var(--wds-border-width-100);
1496
1499
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -1625,7 +1628,8 @@
1625
1628
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-dark-tertiary);
1626
1629
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-dark-secondary-hover);
1627
1630
  --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-dark-secondary-hover);
1628
- --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1631
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary);
1632
+ --wds-toast-action-color: var(--wds-color-text-standard-primary);
1629
1633
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1630
1634
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1631
1635
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1648,8 +1652,7 @@
1648
1652
  --wds-swatches-fill-border-no-value: var(--wds-color-border-dark-secondary);
1649
1653
  --wds-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1650
1654
  --wds-status-toast-text-font-size: var(--wds-font-size-body-small);
1651
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1652
- --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1655
+ --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary);
1653
1656
  --wds-slider-track-color: var(--wds-color-fill-dark-secondary-hover);
1654
1657
  --wds-slider-slider-marks-label-font-line-height: var(--wds-font-line-height-100);
1655
1658
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-tertiary);
@@ -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);
package/odeditor-dark/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);
@@ -125,6 +126,7 @@
125
126
  @property st-global(--wds-border-width-default);
126
127
  @property st-global(--wds-border-width-none);
127
128
  @property st-global(--wds-border-width-varied);
129
+ @property st-global(--wds-border-width-varied-secondary);
128
130
  @property st-global(--wds-breadcrumbs-border-radius);
129
131
  @property st-global(--wds-breadcrumbs-font-size-small);
130
132
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
@@ -1714,7 +1716,6 @@
1714
1716
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1715
1717
  @property st-global(--wds-space-viewport-spacing);
1716
1718
  @property st-global(--wds-status-toast-info-icon-fill);
1717
- @property st-global(--wds-status-toast-text-fill);
1718
1719
  @property st-global(--wds-status-toast-text-font-line-height);
1719
1720
  @property st-global(--wds-status-toast-text-font-size);
1720
1721
  @property st-global(--wds-status-toast-width);
@@ -1820,8 +1821,11 @@
1820
1821
  @property st-global(--wds-thumbnail-title-padding-top);
1821
1822
  @property st-global(--wds-timeline-title-font-line-height);
1822
1823
  @property st-global(--wds-timeline-title-font-size);
1824
+ @property st-global(--wds-toast-action-color);
1823
1825
  @property st-global(--wds-toast-background-fill);
1826
+ @property st-global(--wds-toast-border-radius);
1824
1827
  @property st-global(--wds-toast-horizontal-padding);
1828
+ @property st-global(--wds-toast-text-fill);
1825
1829
  @property st-global(--wds-toast-vertical-padding);
1826
1830
  @property st-global(--wds-toggle-button-border-color-dark);
1827
1831
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -2104,6 +2108,7 @@
2104
2108
  --wds-announcement-modal-title-font-size: 24px;
2105
2109
  --wds-avatar-group-gap-condensed: -2px;
2106
2110
  --wds-avatar-group-gap-default: 4px;
2111
+ --wds-avatar-text-fill: #FFFFFF;
2107
2112
  --wds-background-blur-0: 0px;
2108
2113
  --wds-background-blur-50: 4px;
2109
2114
  --wds-background-blur-100: 8px;
@@ -2178,6 +2183,7 @@
2178
2183
  --wds-border-width-default: 1px;
2179
2184
  --wds-border-width-none: 0px;
2180
2185
  --wds-border-width-varied: 0px;
2186
+ --wds-border-width-varied-secondary: 1px;
2181
2187
  --wds-breadcrumbs-border-radius: 2px;
2182
2188
  --wds-breadcrumbs-font-size-small: 12px;
2183
2189
  --wds-breadcrumbs-on-dark-fill-hover: rgba(0, 0, 0, .3);
@@ -3766,8 +3772,7 @@
3766
3772
  --wds-space-padding-vertical-x-tiny: 8px;
3767
3773
  --wds-space-padding-vertical-xx-tiny: 4px;
3768
3774
  --wds-space-viewport-spacing: 48px;
3769
- --wds-status-toast-info-icon-fill: #212122;
3770
- --wds-status-toast-text-fill: #212122;
3775
+ --wds-status-toast-info-icon-fill: #FFFFFF;
3771
3776
  --wds-status-toast-text-font-line-height: 18px;
3772
3777
  --wds-status-toast-text-font-size: 14px;
3773
3778
  --wds-status-toast-width: 600px;
@@ -3873,8 +3878,11 @@
3873
3878
  --wds-thumbnail-title-padding-top: 4px;
3874
3879
  --wds-timeline-title-font-line-height: 16px;
3875
3880
  --wds-timeline-title-font-size: 12px;
3876
- --wds-toast-background-fill: #FFFFFF;
3881
+ --wds-toast-action-color: #FFFFFF;
3882
+ --wds-toast-background-fill: #212122;
3883
+ --wds-toast-border-radius: 12px;
3877
3884
  --wds-toast-horizontal-padding: 12px;
3885
+ --wds-toast-text-fill: #FFFFFF;
3878
3886
  --wds-toast-vertical-padding: 8px;
3879
3887
  --wds-toggle-button-border-color-dark: rgba(0, 0, 0, 0);
3880
3888
  --wds-toggle-button-border-color-dark-disabled: rgba(0, 0, 0, 0);
package/odeditor-dark/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);
@@ -995,7 +996,6 @@
995
996
  @property st-global(--wds-social-preview-content-padding-horizontal);
996
997
  @property st-global(--wds-social-preview-content-padding-vertical);
997
998
  @property st-global(--wds-status-toast-info-icon-fill);
998
- @property st-global(--wds-status-toast-text-fill);
999
999
  @property st-global(--wds-status-toast-text-font-line-height);
1000
1000
  @property st-global(--wds-status-toast-text-font-size);
1001
1001
  @property st-global(--wds-status-toast-width);
@@ -1101,8 +1101,11 @@
1101
1101
  @property st-global(--wds-thumbnail-title-padding-top);
1102
1102
  @property st-global(--wds-timeline-title-font-line-height);
1103
1103
  @property st-global(--wds-timeline-title-font-size);
1104
+ @property st-global(--wds-toast-action-color);
1104
1105
  @property st-global(--wds-toast-background-fill);
1106
+ @property st-global(--wds-toast-border-radius);
1105
1107
  @property st-global(--wds-toast-horizontal-padding);
1108
+ @property st-global(--wds-toast-text-fill);
1106
1109
  @property st-global(--wds-toast-vertical-padding);
1107
1110
  @property st-global(--wds-toggle-button-border-color-dark);
1108
1111
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -1383,6 +1386,7 @@
1383
1386
  --wds-announcement-modal-title-font-size: 24px;
1384
1387
  --wds-avatar-group-gap-condensed: -2px;
1385
1388
  --wds-avatar-group-gap-default: 4px;
1389
+ --wds-avatar-text-fill: #FFFFFF;
1386
1390
  --wds-badge-border-radius-medium: 4px;
1387
1391
  --wds-badge-border-radius-small: 4px;
1388
1392
  --wds-badge-border-radius-tiny: 4px;
@@ -2326,8 +2330,7 @@
2326
2330
  --wds-social-post-preview-content-padding-vertical: 12px;
2327
2331
  --wds-social-preview-content-padding-horizontal: 12px;
2328
2332
  --wds-social-preview-content-padding-vertical: 8px;
2329
- --wds-status-toast-info-icon-fill: #212122;
2330
- --wds-status-toast-text-fill: #212122;
2333
+ --wds-status-toast-info-icon-fill: #FFFFFF;
2331
2334
  --wds-status-toast-text-font-line-height: 18px;
2332
2335
  --wds-status-toast-text-font-size: 14px;
2333
2336
  --wds-status-toast-width: 600px;
@@ -2433,8 +2436,11 @@
2433
2436
  --wds-thumbnail-title-padding-top: 4px;
2434
2437
  --wds-timeline-title-font-line-height: 16px;
2435
2438
  --wds-timeline-title-font-size: 12px;
2436
- --wds-toast-background-fill: #FFFFFF;
2439
+ --wds-toast-action-color: #FFFFFF;
2440
+ --wds-toast-background-fill: #212122;
2441
+ --wds-toast-border-radius: 12px;
2437
2442
  --wds-toast-horizontal-padding: 12px;
2443
+ --wds-toast-text-fill: #FFFFFF;
2438
2444
  --wds-toast-vertical-padding: 8px;
2439
2445
  --wds-toggle-button-border-color-dark: rgba(0, 0, 0, 0);
2440
2446
  --wds-toggle-button-border-color-dark-disabled: rgba(0, 0, 0, 0);
package/odeditor-dark/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: 1px;
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.184.0",
3
+ "version": "1.185.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -34,5 +34,5 @@
34
34
  "author": "augustinasv@wix.com",
35
35
  "description": "Design system tokens",
36
36
  "packageManager": "yarn@3.5.0",
37
- "falconPackageHash": "eff20f0ad0f62b0d2d2390a271e1daaca8adbf9d10f77c22a8f93fa6"
37
+ "falconPackageHash": "508fb53e4fa4374c5ece203b9429d1bddbfecfe08fe8804895a26b05"
38
38
  }
package/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);
@@ -502,6 +503,7 @@
502
503
  --wds-border-radius-surface-sunken: 0px;
503
504
  --wds-border-width-default: 1px;
504
505
  --wds-border-width-varied: 1px;
506
+ --wds-border-width-varied-secondary: 0px;
505
507
  --wds-color-border-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
506
508
  --wds-color-border-ai-primary-active: #ffffff;
507
509
  --wds-color-border-ai-primary-disabled: #ffffff;
package/studio/all.css CHANGED
@@ -383,6 +383,7 @@
383
383
  --wds-inner-shadow-blur-secondary: var(--wds-shadow-blur-0);
384
384
  --wds-inner-shadow-blur-primary: var(--wds-shadow-blur-0);
385
385
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-0);
386
+ --wds-border-width-varied-secondary: var(--wds-border-width-none);
386
387
  --wds-border-width-varied: var(--wds-border-width-100);
387
388
  --wds-border-width-default: var(--wds-border-width-100);
388
389
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -892,6 +893,7 @@
892
893
  --wds-toggle-button-border-color-standard-disabled: var(--wds-color-fill-standard-secondary-disabled);
893
894
  --wds-toast-vertical-padding: var(--wds-space-150);
894
895
  --wds-toast-horizontal-padding: var(--wds-space-200);
896
+ --wds-toast-border-radius: var(--wds-border-radius-400);
895
897
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
896
898
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-regular);
897
899
  --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-0);
@@ -1627,7 +1629,9 @@
1627
1629
  --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1628
1630
  --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1629
1631
  --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1632
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary-light);
1630
1633
  --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1634
+ --wds-toast-action-color: var(--wds-color-fill-light-primary);
1631
1635
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1632
1636
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1633
1637
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1648,7 +1652,6 @@
1648
1652
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
1649
1653
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1650
1654
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1651
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1652
1655
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1653
1656
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1654
1657
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
@@ -2019,6 +2022,7 @@
2019
2022
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
2020
2023
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2021
2024
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2025
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2022
2026
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2023
2027
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-small);
2024
2028
  --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
package/studio/all.scss CHANGED
@@ -483,6 +483,7 @@
483
483
  --wds-toggle-button-border-color-standard-disabled: var(--wds-color-fill-standard-secondary-disabled);
484
484
  --wds-toast-vertical-padding: var(--wds-space-150);
485
485
  --wds-toast-horizontal-padding: var(--wds-space-200);
486
+ --wds-toast-border-radius: var(--wds-border-radius-400);
486
487
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
487
488
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-regular);
488
489
  --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-0);
@@ -1458,6 +1459,7 @@
1458
1459
  --wds-breadcrumbs-on-dark-fill-hover: var(--wds-color-white-transparent-30);
1459
1460
  --wds-breadcrumbs-font-size-small: var(--wds-font-size-200);
1460
1461
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-100);
1462
+ --wds-border-width-varied-secondary: var(--wds-border-width-none);
1461
1463
  --wds-border-width-varied: var(--wds-border-width-100);
1462
1464
  --wds-border-width-default: var(--wds-border-width-100);
1463
1465
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
@@ -1611,7 +1613,9 @@
1611
1613
  --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1612
1614
  --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1613
1615
  --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1616
+ --wds-toast-text-fill: var(--wds-color-text-standard-primary-light);
1614
1617
  --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1618
+ --wds-toast-action-color: var(--wds-color-fill-light-primary);
1615
1619
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1616
1620
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1617
1621
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1632,7 +1636,6 @@
1632
1636
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
1633
1637
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1634
1638
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1635
- --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1636
1639
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1637
1640
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1638
1641
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
@@ -2019,6 +2022,7 @@
2019
2022
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
2020
2023
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2021
2024
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2025
+ --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2022
2026
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2023
2027
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-small);
2024
2028
  --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
package/studio/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);
@@ -1751,7 +1753,6 @@
1751
1753
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1752
1754
  @property st-global(--wds-space-viewport-spacing);
1753
1755
  @property st-global(--wds-status-toast-info-icon-fill);
1754
- @property st-global(--wds-status-toast-text-fill);
1755
1756
  @property st-global(--wds-status-toast-text-font-line-height);
1756
1757
  @property st-global(--wds-status-toast-text-font-size);
1757
1758
  @property st-global(--wds-status-toast-vertical-padding);
@@ -1849,8 +1850,11 @@
1849
1850
  @property st-global(--wds-thumbnail-title-padding-top);
1850
1851
  @property st-global(--wds-timeline-title-font-line-height);
1851
1852
  @property st-global(--wds-timeline-title-font-size);
1853
+ @property st-global(--wds-toast-action-color);
1852
1854
  @property st-global(--wds-toast-background-fill);
1855
+ @property st-global(--wds-toast-border-radius);
1853
1856
  @property st-global(--wds-toast-horizontal-padding);
1857
+ @property st-global(--wds-toast-text-fill);
1854
1858
  @property st-global(--wds-toast-vertical-padding);
1855
1859
  @property st-global(--wds-toggle-button-border-color-dark);
1856
1860
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
@@ -2147,6 +2151,7 @@
2147
2151
  --wds-announcement-modal-title-font-size: 24px;
2148
2152
  --wds-avatar-group-gap-condensed: -2px;
2149
2153
  --wds-avatar-group-gap-default: 4px;
2154
+ --wds-avatar-text-fill: #ffffff;
2150
2155
  --wds-background-blur-0: 0px;
2151
2156
  --wds-background-blur-50: 0px;
2152
2157
  --wds-background-blur-100: 0px;
@@ -2218,6 +2223,7 @@
2218
2223
  --wds-border-width-default: 1px;
2219
2224
  --wds-border-width-none: 0px;
2220
2225
  --wds-border-width-varied: 1px;
2226
+ --wds-border-width-varied-secondary: 0px;
2221
2227
  --wds-breadcrumbs-border-radius: 2px;
2222
2228
  --wds-breadcrumbs-font-size-small: 12px;
2223
2229
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
@@ -3846,7 +3852,6 @@
3846
3852
  --wds-space-padding-vertical-xx-tiny: 4px;
3847
3853
  --wds-space-viewport-spacing: 48px;
3848
3854
  --wds-status-toast-info-icon-fill: #ffffff;
3849
- --wds-status-toast-text-fill: #ffffff;
3850
3855
  --wds-status-toast-text-font-line-height: 24px;
3851
3856
  --wds-status-toast-text-font-size: 16px;
3852
3857
  --wds-status-toast-vertical-padding: 6px;
@@ -3944,8 +3949,11 @@
3944
3949
  --wds-thumbnail-title-padding-top: 4px;
3945
3950
  --wds-timeline-title-font-line-height: 16px;
3946
3951
  --wds-timeline-title-font-size: 12px;
3952
+ --wds-toast-action-color: #ffffff;
3947
3953
  --wds-toast-background-fill: #131720;
3954
+ --wds-toast-border-radius: 8px;
3948
3955
  --wds-toast-horizontal-padding: 8px;
3956
+ --wds-toast-text-fill: #ffffff;
3949
3957
  --wds-toast-vertical-padding: 6px;
3950
3958
  --wds-toggle-button-border-color-dark: #e2e3ea;
3951
3959
  --wds-toggle-button-border-color-dark-disabled: rgba(19, 23, 32, .1);
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;