@wix/design-system-tokens 1.226.0 → 1.227.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 +18 -0
  2. package/all.css +6 -0
  3. package/all.scss +6 -0
  4. package/all.st.css +12 -0
  5. package/component.st.css +8 -0
  6. package/odeditor/all.css +14 -8
  7. package/odeditor/all.scss +14 -8
  8. package/odeditor/all.st.css +20 -8
  9. package/odeditor/component.st.css +16 -8
  10. package/odeditor/semantic.st.css +4 -0
  11. package/odeditor-dark/all.css +9 -3
  12. package/odeditor-dark/all.scss +9 -3
  13. package/odeditor-dark/all.st.css +15 -3
  14. package/odeditor-dark/component.st.css +10 -2
  15. package/odeditor-dark/semantic.st.css +5 -1
  16. package/package.json +2 -2
  17. package/semantic.st.css +4 -0
  18. package/studio/all.css +6 -0
  19. package/studio/all.scss +6 -0
  20. package/studio/all.st.css +12 -0
  21. package/studio/component.st.css +8 -0
  22. package/studio/semantic.st.css +4 -0
  23. package/wixel/all.css +6 -0
  24. package/wixel/all.scss +6 -0
  25. package/wixel/all.st.css +12 -0
  26. package/wixel/component.st.css +8 -0
  27. package/wixel/semantic.st.css +4 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,21 @@
1
+ ## 1.227.0
2
+
3
+ ### Minor Changes
4
+
5
+ - [#17022](https://github.com/wix-private/wix-design-systems/pull/17022) [`0e4aa4f`](https://github.com/wix-private/wix-design-systems/commit/0e4aa4f061b93657e4f0ff837a63197221291385) - Add `notification.border-color`, `notification.border-radius`, `notification.border-width`, and `notification.content-color` tokens covering Notification's new bordered look and its text/icon color. Harmony (odeditor)'s five `notification.fill.*` skins also move to the softer system-color palette — `standard` and `premium` now share the same blue tint (`#e7e4fe`, was `#597dff` and `#8b2df5`) — while every other theme keeps its current fill values.
6
+
7
+ ### Patch Changes
8
+
9
+ - [#16991](https://github.com/wix-private/wix-design-systems/pull/16991) [`435570e`](https://github.com/wix-private/wix-design-systems/commit/435570e741081771553c51a2c5e40109a09129df) - `--wds-card-header-padding-bottom` changed from `0px` to `4px` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), so a card header and the padded content below it add up to a 28px gap.
10
+
11
+ - [#17017](https://github.com/wix-private/wix-design-systems/pull/17017) [`e70d74d`](https://github.com/wix-private/wix-design-systems/commit/e70d74db1805b02508c24725f4a257fb0a7f3c04) - `Badge`: the three neutral skins (solid neutral-light, outlined neutral, outlined neutral-light) now share the same darker gray (`color.black.300`) for their label and border colors again in the OD Editor theme, instead of a lighter mismatched gray on the outlined variants.
12
+
13
+ - [#16981](https://github.com/wix-private/wix-design-systems/pull/16981) [`77ac2fc`](https://github.com/wix-private/wix-design-systems/commit/77ac2fcf265a922f43c84ddf5b53d01dab3c2032) - Studio 2.0 (odeditor-dark): highlighted text color (`--wds-color-text-highlight`) lightened from `#2D354E` to `#6F94D4` so it stays legible on dark backgrounds.
14
+
15
+ - [#16958](https://github.com/wix-private/wix-design-systems/pull/16958) [`a8482bb`](https://github.com/wix-private/wix-design-systems/commit/a8482bbcaef3c8271ca5f5d6f7ca8c009a4402fb) - SidePanel with standard skin now casts a shadow in the odeditor-dark theme, so the panel stays visible against same-colored backgrounds.
16
+
17
+ ## 1.226.1
18
+
1
19
  ## 1.226.0
2
20
 
3
21
  ### Minor Changes
package/all.css CHANGED
@@ -521,6 +521,7 @@
521
521
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-0);
522
522
  --wds-border-width-varied-secondary: var(--wds-border-width-none);
523
523
  --wds-border-width-varied: var(--wds-border-width-100);
524
+ --wds-border-width-surface-modal: var(--wds-border-width-none);
524
525
  --wds-border-width-default: var(--wds-border-width-100);
525
526
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
526
527
  --wds-border-radius-surface-raised: var(--wds-border-radius-400);
@@ -884,6 +885,7 @@
884
885
  --wds-color-border-transparent-primary-disabled: var(--wds-color-black-100-transparent-10);
885
886
  --wds-color-border-transparent-primary-active: var(--wds-color-black-100-transparent-20);
886
887
  --wds-color-border-transparent-primary: var(--wds-color-black-100-transparent-20);
888
+ --wds-color-border-surface-modal: var(--wds-color-black-100-transparent-0);
887
889
  --wds-color-border-success-tertiary-hover: var(--wds-color-green-400);
888
890
  --wds-color-border-success-tertiary-disabled: var(--wds-color-black-100-transparent-10);
889
891
  --wds-color-border-success-tertiary-active: var(--wds-color-green-300);
@@ -1392,6 +1394,9 @@
1392
1394
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1393
1395
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1394
1396
  --wds-notification-fill-error: var(--wds-color-red-200);
1397
+ --wds-notification-border-width: var(--wds-border-width-none);
1398
+ --wds-notification-border-radius: var(--wds-border-radius-0);
1399
+ --wds-notification-border-color: var(--wds-color-white-transparent-0);
1395
1400
  --wds-nestable-list-paddings: var(--wds-space-0);
1396
1401
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-400);
1397
1402
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-400);
@@ -2083,6 +2088,7 @@
2083
2088
  --wds-page-header-breadcrumbs-font-size: var(--wds-font-size-body-small);
2084
2089
  --wds-page-header-breadcrumbs-color: var(--wds-color-text-standard-primary);
2085
2090
  --wds-number-input-icon-fill: var(--wds-color-text-primary);
2091
+ --wds-notification-content-color: var(--wds-color-text-standard-primary-light);
2086
2092
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
2087
2093
  --wds-multiselect-icon-fill: var(--wds-color-text-primary);
2088
2094
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-2);
package/all.scss CHANGED
@@ -1039,6 +1039,9 @@
1039
1039
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1040
1040
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1041
1041
  --wds-notification-fill-error: var(--wds-color-red-200);
1042
+ --wds-notification-border-width: var(--wds-border-width-none);
1043
+ --wds-notification-border-radius: var(--wds-border-radius-0);
1044
+ --wds-notification-border-color: var(--wds-color-white-transparent-0);
1042
1045
  --wds-nestable-list-paddings: var(--wds-space-0);
1043
1046
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-400);
1044
1047
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-400);
@@ -1554,6 +1557,7 @@
1554
1557
  --wds-color-border-transparent-primary-disabled: var(--wds-color-black-100-transparent-10);
1555
1558
  --wds-color-border-transparent-primary-active: var(--wds-color-black-100-transparent-20);
1556
1559
  --wds-color-border-transparent-primary: var(--wds-color-black-100-transparent-20);
1560
+ --wds-color-border-surface-modal: var(--wds-color-black-100-transparent-0);
1557
1561
  --wds-color-border-success-tertiary-hover: var(--wds-color-green-400);
1558
1562
  --wds-color-border-success-tertiary-disabled: var(--wds-color-black-100-transparent-10);
1559
1563
  --wds-color-border-success-tertiary-active: var(--wds-color-green-300);
@@ -1746,6 +1750,7 @@
1746
1750
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-full);
1747
1751
  --wds-border-width-varied-secondary: var(--wds-border-width-none);
1748
1752
  --wds-border-width-varied: var(--wds-border-width-100);
1753
+ --wds-border-width-surface-modal: var(--wds-border-width-none);
1749
1754
  --wds-border-width-default: var(--wds-border-width-100);
1750
1755
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
1751
1756
  --wds-border-radius-surface-raised: var(--wds-border-radius-400);
@@ -2072,6 +2077,7 @@
2072
2077
  --wds-page-header-breadcrumbs-font-size: var(--wds-font-size-body-small);
2073
2078
  --wds-page-header-breadcrumbs-color: var(--wds-color-text-standard-primary);
2074
2079
  --wds-number-input-icon-fill: var(--wds-color-text-primary);
2080
+ --wds-notification-content-color: var(--wds-color-text-standard-primary-light);
2075
2081
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
2076
2082
  --wds-multiselect-icon-fill: var(--wds-color-text-primary);
2077
2083
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-2);
package/all.st.css CHANGED
@@ -183,6 +183,7 @@
183
183
  @property st-global(--wds-border-width-200);
184
184
  @property st-global(--wds-border-width-default);
185
185
  @property st-global(--wds-border-width-none);
186
+ @property st-global(--wds-border-width-surface-modal);
186
187
  @property st-global(--wds-border-width-varied);
187
188
  @property st-global(--wds-border-width-varied-secondary);
188
189
  @property st-global(--wds-breadcrumbs-border-radius);
@@ -638,6 +639,7 @@
638
639
  @property st-global(--wds-color-border-success-tertiary-active);
639
640
  @property st-global(--wds-color-border-success-tertiary-disabled);
640
641
  @property st-global(--wds-color-border-success-tertiary-hover);
642
+ @property st-global(--wds-color-border-surface-modal);
641
643
  @property st-global(--wds-color-border-transparent-primary);
642
644
  @property st-global(--wds-color-border-transparent-primary-active);
643
645
  @property st-global(--wds-color-border-transparent-primary-disabled);
@@ -1653,6 +1655,10 @@
1653
1655
  @property st-global(--wds-multiselect-icon-fill);
1654
1656
  @property st-global(--wds-nestable-list-fill);
1655
1657
  @property st-global(--wds-nestable-list-paddings);
1658
+ @property st-global(--wds-notification-border-color);
1659
+ @property st-global(--wds-notification-border-radius);
1660
+ @property st-global(--wds-notification-border-width);
1661
+ @property st-global(--wds-notification-content-color);
1656
1662
  @property st-global(--wds-notification-fill-error);
1657
1663
  @property st-global(--wds-notification-fill-premium);
1658
1664
  @property st-global(--wds-notification-fill-standard);
@@ -2812,6 +2818,7 @@
2812
2818
  --wds-border-width-200: 2px;
2813
2819
  --wds-border-width-default: 1px;
2814
2820
  --wds-border-width-none: 0px;
2821
+ --wds-border-width-surface-modal: 0px;
2815
2822
  --wds-border-width-varied: 1px;
2816
2823
  --wds-border-width-varied-secondary: 0px;
2817
2824
  --wds-breadcrumbs-border-radius: 1000px;
@@ -3267,6 +3274,7 @@
3267
3274
  --wds-color-border-success-tertiary-active: #87cea5;
3268
3275
  --wds-color-border-success-tertiary-disabled: rgba(0, 6, 36, .1);
3269
3276
  --wds-color-border-success-tertiary-hover: #c8e8d6;
3277
+ --wds-color-border-surface-modal: rgba(0, 6, 36, 0);
3270
3278
  --wds-color-border-transparent-primary: rgba(0, 6, 36, .2);
3271
3279
  --wds-color-border-transparent-primary-active: rgba(0, 6, 36, .2);
3272
3280
  --wds-color-border-transparent-primary-disabled: rgba(0, 6, 36, .1);
@@ -4282,6 +4290,10 @@
4282
4290
  --wds-multiselect-icon-fill: #116dff;
4283
4291
  --wds-nestable-list-fill: #ffffff;
4284
4292
  --wds-nestable-list-paddings: 0px;
4293
+ --wds-notification-border-color: rgba(255, 255, 255, 0);
4294
+ --wds-notification-border-radius: 0px;
4295
+ --wds-notification-border-width: 0px;
4296
+ --wds-notification-content-color: #ffffff;
4285
4297
  --wds-notification-fill-error: #ff6d63;
4286
4298
  --wds-notification-fill-premium: #c161f0;
4287
4299
  --wds-notification-fill-standard: #5999ff;
package/component.st.css CHANGED
@@ -1071,6 +1071,10 @@
1071
1071
  @property st-global(--wds-multiselect-icon-fill);
1072
1072
  @property st-global(--wds-nestable-list-fill);
1073
1073
  @property st-global(--wds-nestable-list-paddings);
1074
+ @property st-global(--wds-notification-border-color);
1075
+ @property st-global(--wds-notification-border-radius);
1076
+ @property st-global(--wds-notification-border-width);
1077
+ @property st-global(--wds-notification-content-color);
1074
1078
  @property st-global(--wds-notification-fill-error);
1075
1079
  @property st-global(--wds-notification-fill-premium);
1076
1080
  @property st-global(--wds-notification-fill-standard);
@@ -2963,6 +2967,10 @@
2963
2967
  --wds-multiselect-icon-fill: #116dff;
2964
2968
  --wds-nestable-list-fill: #ffffff;
2965
2969
  --wds-nestable-list-paddings: 0px;
2970
+ --wds-notification-border-color: rgba(255, 255, 255, 0);
2971
+ --wds-notification-border-radius: 0px;
2972
+ --wds-notification-border-width: 0px;
2973
+ --wds-notification-content-color: #ffffff;
2966
2974
  --wds-notification-fill-error: #ff6d63;
2967
2975
  --wds-notification-fill-premium: #c161f0;
2968
2976
  --wds-notification-fill-standard: #5999ff;
package/odeditor/all.css CHANGED
@@ -543,6 +543,7 @@
543
543
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-35);
544
544
  --wds-border-width-varied-secondary: var(--wds-border-width-0);
545
545
  --wds-border-width-varied: var(--wds-border-width-0);
546
+ --wds-border-width-surface-modal: var(--wds-border-width-none);
546
547
  --wds-border-width-default: var(--wds-border-width-100);
547
548
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
548
549
  --wds-border-radius-surface-raised: var(--wds-border-radius-600);
@@ -886,6 +887,7 @@
886
887
  --wds-color-border-transparent-primary-disabled: var(--wds-color-black-100-transparent-10);
887
888
  --wds-color-border-transparent-primary-active: var(--wds-color-black-100-transparent-20);
888
889
  --wds-color-border-transparent-primary: var(--wds-color-black-100-transparent-20);
890
+ --wds-color-border-surface-modal: var(--wds-color-black-100-transparent-0);
889
891
  --wds-color-border-success-tertiary-hover: var(--wds-color-green-500);
890
892
  --wds-color-border-success-tertiary-disabled: var(--wds-color-black-100-transparent-10);
891
893
  --wds-color-border-success-tertiary-active: var(--wds-color-green-400);
@@ -1448,11 +1450,14 @@
1448
1450
  --wds-padding-left-medium: var(--wds-space-1200);
1449
1451
  --wds-notification-padding-vertical: var(--wds-space-200);
1450
1452
  --wds-notification-padding-horizontal: var(--wds-space-200);
1451
- --wds-notification-fill-warning: var(--wds-color-yellow-100);
1452
- --wds-notification-fill-success: var(--wds-color-green-200);
1453
- --wds-notification-fill-standard: var(--wds-color-blue-200);
1454
- --wds-notification-fill-premium: var(--wds-color-purple-200);
1455
- --wds-notification-fill-error: var(--wds-color-red-200);
1453
+ --wds-notification-fill-warning: var(--wds-color-yellow-400);
1454
+ --wds-notification-fill-success: var(--wds-color-green-400);
1455
+ --wds-notification-fill-standard: var(--wds-color-iris-500);
1456
+ --wds-notification-fill-premium: var(--wds-color-iris-500);
1457
+ --wds-notification-fill-error: var(--wds-color-red-400);
1458
+ --wds-notification-border-width: var(--wds-border-width-100);
1459
+ --wds-notification-border-radius: var(--wds-border-radius-400);
1460
+ --wds-notification-border-color: var(--wds-color-white);
1456
1461
  --wds-nestable-list-paddings: var(--wds-space-200);
1457
1462
  --wds-nestable-list-fill: var(--wds-color-white-transparent-0);
1458
1463
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
@@ -1824,7 +1829,7 @@
1824
1829
  --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1825
1830
  --wds-card-header-padding-vertical: var(--wds-space-600);
1826
1831
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1827
- --wds-card-header-padding-bottom: var(--wds-space-0);
1832
+ --wds-card-header-padding-bottom: var(--wds-space-100);
1828
1833
  --wds-card-header-divider-width: var(--wds-border-width-none);
1829
1834
  --wds-card-controls-padding-vertical: var(--wds-space-300);
1830
1835
  --wds-card-controls-padding-horizontal: var(--wds-space-300);
@@ -1952,8 +1957,9 @@
1952
1957
  --wds-badge-outline-standard-border-color: var(--wds-color-blue-200);
1953
1958
  --wds-badge-outline-neutral-success-border-color: var(--wds-color-green-100);
1954
1959
  --wds-badge-outline-neutral-standard-border-color: var(--wds-color-blue-200);
1955
- --wds-badge-outline-neutral-light-border-color: var(--wds-color-black-400);
1960
+ --wds-badge-outline-neutral-light-border-color: var(--wds-color-black-300);
1956
1961
  --wds-badge-outline-neutral-danger-border-color: var(--wds-color-red-200);
1962
+ --wds-badge-outline-neutral-label-color: var(--wds-color-black-300);
1957
1963
  --wds-badge-outline-neutral-border-color: var(--wds-color-black-300);
1958
1964
  --wds-badge-outline-destructive-label-color: var(--wds-color-red-50);
1959
1965
  --wds-badge-outline-destructive-fill: var(--wds-color-red-600);
@@ -2223,6 +2229,7 @@
2223
2229
  --wds-page-header-subtitle-line-height: var(--wds-font-line-height-200);
2224
2230
  --wds-number-input-spacing: var(--wds-form-field-label-gap-tiny);
2225
2231
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
2232
+ --wds-notification-content-color: var(--wds-color-text-standard-secondary);
2226
2233
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
2227
2234
  --wds-message-modal-text-font-size: var(--wds-font-size-body-small);
2228
2235
  --wds-message-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
@@ -2500,7 +2507,6 @@
2500
2507
  --wds-badge-outline-premium-label-color: var(--wds-color-text-premium);
2501
2508
  --wds-badge-outline-premium-fill: var(--wds-color-fill-premium-tertiary-hover);
2502
2509
  --wds-badge-outline-premium-border-color: var(--wds-color-border-premium-primary);
2503
- --wds-badge-outline-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2504
2510
  --wds-badge-outline-neutral-fill: var(--wds-color-fill-dark-secondary);
2505
2511
  --wds-badge-outline-dark-label-color: var(--wds-color-text-standard-secondary);
2506
2512
  --wds-badge-label-font-size-small: var(--wds-font-size-body-tiny);
package/odeditor/all.scss CHANGED
@@ -1110,11 +1110,14 @@
1110
1110
  --wds-padding-left-medium: var(--wds-space-1200);
1111
1111
  --wds-notification-padding-vertical: var(--wds-space-200);
1112
1112
  --wds-notification-padding-horizontal: var(--wds-space-200);
1113
- --wds-notification-fill-warning: var(--wds-color-yellow-100);
1114
- --wds-notification-fill-success: var(--wds-color-green-200);
1115
- --wds-notification-fill-standard: var(--wds-color-blue-200);
1116
- --wds-notification-fill-premium: var(--wds-color-purple-200);
1117
- --wds-notification-fill-error: var(--wds-color-red-200);
1113
+ --wds-notification-fill-warning: var(--wds-color-yellow-400);
1114
+ --wds-notification-fill-success: var(--wds-color-green-400);
1115
+ --wds-notification-fill-standard: var(--wds-color-iris-500);
1116
+ --wds-notification-fill-premium: var(--wds-color-iris-500);
1117
+ --wds-notification-fill-error: var(--wds-color-red-400);
1118
+ --wds-notification-border-width: var(--wds-border-width-100);
1119
+ --wds-notification-border-radius: var(--wds-border-radius-400);
1120
+ --wds-notification-border-color: var(--wds-color-white);
1118
1121
  --wds-nestable-list-paddings: var(--wds-space-200);
1119
1122
  --wds-nestable-list-fill: var(--wds-color-white-transparent-0);
1120
1123
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
@@ -1660,6 +1663,7 @@
1660
1663
  --wds-color-border-transparent-primary-disabled: var(--wds-color-black-100-transparent-10);
1661
1664
  --wds-color-border-transparent-primary-active: var(--wds-color-black-100-transparent-20);
1662
1665
  --wds-color-border-transparent-primary: var(--wds-color-black-100-transparent-20);
1666
+ --wds-color-border-surface-modal: var(--wds-color-black-100-transparent-0);
1663
1667
  --wds-color-border-success-tertiary-hover: var(--wds-color-green-500);
1664
1668
  --wds-color-border-success-tertiary-disabled: var(--wds-color-black-100-transparent-10);
1665
1669
  --wds-color-border-success-tertiary-active: var(--wds-color-green-400);
@@ -1778,7 +1782,7 @@
1778
1782
  --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1779
1783
  --wds-card-header-padding-vertical: var(--wds-space-600);
1780
1784
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1781
- --wds-card-header-padding-bottom: var(--wds-space-0);
1785
+ --wds-card-header-padding-bottom: var(--wds-space-100);
1782
1786
  --wds-card-header-divider-width: var(--wds-border-width-none);
1783
1787
  --wds-card-gallery-item-title-font-weight-small: var(--wds-font-weight-heading-3);
1784
1788
  --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-heading-3);
@@ -1906,6 +1910,7 @@
1906
1910
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-300);
1907
1911
  --wds-border-width-varied-secondary: var(--wds-border-width-0);
1908
1912
  --wds-border-width-varied: var(--wds-border-width-0);
1913
+ --wds-border-width-surface-modal: var(--wds-border-width-none);
1909
1914
  --wds-border-width-default: var(--wds-border-width-100);
1910
1915
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
1911
1916
  --wds-border-radius-surface-raised: var(--wds-border-radius-600);
@@ -1950,7 +1955,8 @@
1950
1955
  --wds-badge-outline-standard-border-color: var(--wds-color-blue-200);
1951
1956
  --wds-badge-outline-neutral-success-border-color: var(--wds-color-green-100);
1952
1957
  --wds-badge-outline-neutral-standard-border-color: var(--wds-color-blue-200);
1953
- --wds-badge-outline-neutral-light-border-color: var(--wds-color-black-400);
1958
+ --wds-badge-outline-neutral-light-border-color: var(--wds-color-black-300);
1959
+ --wds-badge-outline-neutral-label-color: var(--wds-color-black-300);
1954
1960
  --wds-badge-outline-neutral-danger-border-color: var(--wds-color-red-200);
1955
1961
  --wds-badge-outline-neutral-border-color: var(--wds-color-black-300);
1956
1962
  --wds-badge-outline-destructive-label-color: var(--wds-color-red-50);
@@ -2211,6 +2217,7 @@
2211
2217
  --wds-page-header-subtitle-line-height: var(--wds-font-line-height-200);
2212
2218
  --wds-number-input-spacing: var(--wds-form-field-label-gap-tiny);
2213
2219
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
2220
+ --wds-notification-content-color: var(--wds-color-text-standard-secondary);
2214
2221
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
2215
2222
  --wds-message-modal-text-font-size: var(--wds-font-size-body-small);
2216
2223
  --wds-message-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
@@ -2500,7 +2507,6 @@
2500
2507
  --wds-badge-outline-premium-label-color: var(--wds-color-text-premium);
2501
2508
  --wds-badge-outline-premium-fill: var(--wds-color-fill-premium-tertiary-hover);
2502
2509
  --wds-badge-outline-premium-border-color: var(--wds-color-border-premium-primary);
2503
- --wds-badge-outline-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2504
2510
  --wds-badge-outline-neutral-fill: var(--wds-color-fill-dark-secondary);
2505
2511
  --wds-badge-outline-dark-label-color: var(--wds-color-text-standard-secondary);
2506
2512
  --wds-badge-label-font-size-small: var(--wds-font-size-body-tiny);
package/odeditor/all.st.css CHANGED
@@ -185,6 +185,7 @@
185
185
  @property st-global(--wds-border-width-200);
186
186
  @property st-global(--wds-border-width-default);
187
187
  @property st-global(--wds-border-width-none);
188
+ @property st-global(--wds-border-width-surface-modal);
188
189
  @property st-global(--wds-border-width-varied);
189
190
  @property st-global(--wds-border-width-varied-secondary);
190
191
  @property st-global(--wds-breadcrumbs-border-radius);
@@ -631,6 +632,7 @@
631
632
  @property st-global(--wds-color-border-success-tertiary-active);
632
633
  @property st-global(--wds-color-border-success-tertiary-disabled);
633
634
  @property st-global(--wds-color-border-success-tertiary-hover);
635
+ @property st-global(--wds-color-border-surface-modal);
634
636
  @property st-global(--wds-color-border-transparent-primary);
635
637
  @property st-global(--wds-color-border-transparent-primary-active);
636
638
  @property st-global(--wds-color-border-transparent-primary-disabled);
@@ -1617,6 +1619,10 @@
1617
1619
  @property st-global(--wds-multiselect-icon-fill);
1618
1620
  @property st-global(--wds-nestable-list-fill);
1619
1621
  @property st-global(--wds-nestable-list-paddings);
1622
+ @property st-global(--wds-notification-border-color);
1623
+ @property st-global(--wds-notification-border-radius);
1624
+ @property st-global(--wds-notification-border-width);
1625
+ @property st-global(--wds-notification-content-color);
1620
1626
  @property st-global(--wds-notification-fill-error);
1621
1627
  @property st-global(--wds-notification-fill-premium);
1622
1628
  @property st-global(--wds-notification-fill-standard);
@@ -2723,8 +2729,8 @@
2723
2729
  --wds-badge-outline-neutral-border-color: #525150;
2724
2730
  --wds-badge-outline-neutral-danger-border-color: #e55c5e;
2725
2731
  --wds-badge-outline-neutral-fill: #f0efef;
2726
- --wds-badge-outline-neutral-label-color: #767574;
2727
- --wds-badge-outline-neutral-light-border-color: #767574;
2732
+ --wds-badge-outline-neutral-label-color: #525150;
2733
+ --wds-badge-outline-neutral-light-border-color: #525150;
2728
2734
  --wds-badge-outline-neutral-standard-border-color: #597dff;
2729
2735
  --wds-badge-outline-neutral-success-border-color: #4b916d;
2730
2736
  --wds-badge-outline-premium-border-color: #acbeff;
@@ -2791,6 +2797,7 @@
2791
2797
  --wds-border-width-200: 2px;
2792
2798
  --wds-border-width-default: 1px;
2793
2799
  --wds-border-width-none: 0px;
2800
+ --wds-border-width-surface-modal: 0px;
2794
2801
  --wds-border-width-varied: 0px;
2795
2802
  --wds-border-width-varied-secondary: 0px;
2796
2803
  --wds-breadcrumbs-border-radius: 6px;
@@ -3008,7 +3015,7 @@
3008
3015
  --wds-card-gallery-item-title-font-weight-small: 700;
3009
3016
  --wds-card-gallery-item-title-gap: 2px;
3010
3017
  --wds-card-header-divider-width: 0px;
3011
- --wds-card-header-padding-bottom: 0px;
3018
+ --wds-card-header-padding-bottom: 4px;
3012
3019
  --wds-card-header-padding-horizontal: 24px;
3013
3020
  --wds-card-header-padding-vertical: 24px;
3014
3021
  --wds-card-header-suffix-align: flex-start;
@@ -3237,6 +3244,7 @@
3237
3244
  --wds-color-border-success-tertiary-active: #daf3c0;
3238
3245
  --wds-color-border-success-tertiary-disabled: rgba(19, 23, 32, .1);
3239
3246
  --wds-color-border-success-tertiary-hover: #effae5;
3247
+ --wds-color-border-surface-modal: rgba(19, 23, 32, 0);
3240
3248
  --wds-color-border-transparent-primary: rgba(19, 23, 32, .2);
3241
3249
  --wds-color-border-transparent-primary-active: rgba(19, 23, 32, .2);
3242
3250
  --wds-color-border-transparent-primary-disabled: rgba(19, 23, 32, .1);
@@ -4223,11 +4231,15 @@
4223
4231
  --wds-multiselect-icon-fill: #383838;
4224
4232
  --wds-nestable-list-fill: rgba(255, 255, 255, 0);
4225
4233
  --wds-nestable-list-paddings: 8px;
4226
- --wds-notification-fill-error: #e55c5e;
4227
- --wds-notification-fill-premium: #8b2df5;
4228
- --wds-notification-fill-standard: #597dff;
4229
- --wds-notification-fill-success: #97c693;
4230
- --wds-notification-fill-warning: #f9ad4d;
4234
+ --wds-notification-border-color: #ffffff;
4235
+ --wds-notification-border-radius: 8px;
4236
+ --wds-notification-border-width: 1px;
4237
+ --wds-notification-content-color: #383838;
4238
+ --wds-notification-fill-error: #f4b8b9;
4239
+ --wds-notification-fill-premium: #e7e4fe;
4240
+ --wds-notification-fill-standard: #e7e4fe;
4241
+ --wds-notification-fill-success: #daf3c0;
4242
+ --wds-notification-fill-warning: #fdead2;
4231
4243
  --wds-notification-padding-horizontal: 8px;
4232
4244
  --wds-notification-padding-vertical: 8px;
4233
4245
  --wds-number-input-icon-fill: #383838;
package/odeditor/component.st.css CHANGED
@@ -1026,6 +1026,10 @@
1026
1026
  @property st-global(--wds-multiselect-icon-fill);
1027
1027
  @property st-global(--wds-nestable-list-fill);
1028
1028
  @property st-global(--wds-nestable-list-paddings);
1029
+ @property st-global(--wds-notification-border-color);
1030
+ @property st-global(--wds-notification-border-radius);
1031
+ @property st-global(--wds-notification-border-width);
1032
+ @property st-global(--wds-notification-content-color);
1029
1033
  @property st-global(--wds-notification-fill-error);
1030
1034
  @property st-global(--wds-notification-fill-premium);
1031
1035
  @property st-global(--wds-notification-fill-standard);
@@ -1962,8 +1966,8 @@
1962
1966
  --wds-badge-outline-neutral-border-color: #525150;
1963
1967
  --wds-badge-outline-neutral-danger-border-color: #e55c5e;
1964
1968
  --wds-badge-outline-neutral-fill: #f0efef;
1965
- --wds-badge-outline-neutral-label-color: #767574;
1966
- --wds-badge-outline-neutral-light-border-color: #767574;
1969
+ --wds-badge-outline-neutral-label-color: #525150;
1970
+ --wds-badge-outline-neutral-light-border-color: #525150;
1967
1971
  --wds-badge-outline-neutral-standard-border-color: #597dff;
1968
1972
  --wds-badge-outline-neutral-success-border-color: #4b916d;
1969
1973
  --wds-badge-outline-premium-border-color: #acbeff;
@@ -2219,7 +2223,7 @@
2219
2223
  --wds-card-gallery-item-title-font-weight-small: 700;
2220
2224
  --wds-card-gallery-item-title-gap: 2px;
2221
2225
  --wds-card-header-divider-width: 0px;
2222
- --wds-card-header-padding-bottom: 0px;
2226
+ --wds-card-header-padding-bottom: 4px;
2223
2227
  --wds-card-header-padding-horizontal: 24px;
2224
2228
  --wds-card-header-padding-vertical: 24px;
2225
2229
  --wds-card-header-suffix-align: flex-start;
@@ -2884,11 +2888,15 @@
2884
2888
  --wds-multiselect-icon-fill: #383838;
2885
2889
  --wds-nestable-list-fill: rgba(255, 255, 255, 0);
2886
2890
  --wds-nestable-list-paddings: 8px;
2887
- --wds-notification-fill-error: #e55c5e;
2888
- --wds-notification-fill-premium: #8b2df5;
2889
- --wds-notification-fill-standard: #597dff;
2890
- --wds-notification-fill-success: #97c693;
2891
- --wds-notification-fill-warning: #f9ad4d;
2891
+ --wds-notification-border-color: #ffffff;
2892
+ --wds-notification-border-radius: 8px;
2893
+ --wds-notification-border-width: 1px;
2894
+ --wds-notification-content-color: #383838;
2895
+ --wds-notification-fill-error: #f4b8b9;
2896
+ --wds-notification-fill-premium: #e7e4fe;
2897
+ --wds-notification-fill-standard: #e7e4fe;
2898
+ --wds-notification-fill-success: #daf3c0;
2899
+ --wds-notification-fill-warning: #fdead2;
2892
2900
  --wds-notification-padding-horizontal: 8px;
2893
2901
  --wds-notification-padding-vertical: 8px;
2894
2902
  --wds-number-input-icon-fill: #383838;
package/odeditor/semantic.st.css CHANGED
@@ -7,6 +7,7 @@
7
7
  @property st-global(--wds-border-radius-surface-raised);
8
8
  @property st-global(--wds-border-radius-surface-sunken);
9
9
  @property st-global(--wds-border-width-default);
10
+ @property st-global(--wds-border-width-surface-modal);
10
11
  @property st-global(--wds-border-width-varied);
11
12
  @property st-global(--wds-border-width-varied-secondary);
12
13
  @property st-global(--wds-color-border-ai-primary);
@@ -77,6 +78,7 @@
77
78
  @property st-global(--wds-color-border-success-tertiary-active);
78
79
  @property st-global(--wds-color-border-success-tertiary-disabled);
79
80
  @property st-global(--wds-color-border-success-tertiary-hover);
81
+ @property st-global(--wds-color-border-surface-modal);
80
82
  @property st-global(--wds-color-border-transparent-primary);
81
83
  @property st-global(--wds-color-border-transparent-primary-active);
82
84
  @property st-global(--wds-color-border-transparent-primary-disabled);
@@ -515,6 +517,7 @@
515
517
  --wds-border-radius-surface-raised: 12px;
516
518
  --wds-border-radius-surface-sunken: 0px;
517
519
  --wds-border-width-default: 1px;
520
+ --wds-border-width-surface-modal: 0px;
518
521
  --wds-border-width-varied: 0px;
519
522
  --wds-border-width-varied-secondary: 0px;
520
523
  --wds-color-border-ai-primary: #ffffff;
@@ -585,6 +588,7 @@
585
588
  --wds-color-border-success-tertiary-active: #daf3c0;
586
589
  --wds-color-border-success-tertiary-disabled: rgba(19, 23, 32, .1);
587
590
  --wds-color-border-success-tertiary-hover: #effae5;
591
+ --wds-color-border-surface-modal: rgba(19, 23, 32, 0);
588
592
  --wds-color-border-transparent-primary: rgba(19, 23, 32, .2);
589
593
  --wds-color-border-transparent-primary-active: rgba(19, 23, 32, .2);
590
594
  --wds-color-border-transparent-primary-disabled: rgba(19, 23, 32, .1);
package/odeditor-dark/all.css CHANGED
@@ -393,7 +393,6 @@
393
393
  --wds-sidebar-divider-fill-dark-default: #42454c;
394
394
  --wds-sidebar-clear-button-fill: #5a5d63;
395
395
  --wds-sidebar-border-inner-fill: transparent;
396
- --wds-side-panel-standard-shadow: none;
397
396
  --wds-side-panel-standard-overflow: visible;
398
397
  --wds-side-panel-header-divider-height: 0;
399
398
  --wds-side-panel-footer-divider-height: 0;
@@ -554,6 +553,7 @@
554
553
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-35);
555
554
  --wds-border-width-varied-secondary: var(--wds-border-width-100);
556
555
  --wds-border-width-varied: var(--wds-border-width-0);
556
+ --wds-border-width-surface-modal: var(--wds-border-width-100);
557
557
  --wds-border-width-default: var(--wds-border-width-100);
558
558
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
559
559
  --wds-border-radius-surface-raised: var(--wds-border-radius-600);
@@ -684,7 +684,7 @@
684
684
  --wds-color-text-premium: var(--wds-color-blue-100);
685
685
  --wds-color-text-placeholder-light: var(--wds-color-black-400);
686
686
  --wds-color-text-placeholder: var(--wds-color-black-400);
687
- --wds-color-text-highlight: var(--wds-color-blue-400);
687
+ --wds-color-text-highlight: var(--wds-color-blue-200);
688
688
  --wds-color-text-disabled-light: var(--wds-color-white-transparent-70);
689
689
  --wds-color-text-disabled: var(--wds-color-black-500);
690
690
  --wds-color-text-destructive: var(--wds-color-red-100);
@@ -898,6 +898,7 @@
898
898
  --wds-color-border-transparent-primary-disabled: var(--wds-color-black-100-transparent-10);
899
899
  --wds-color-border-transparent-primary-active: var(--wds-color-black-100-transparent-20);
900
900
  --wds-color-border-transparent-primary: var(--wds-color-black-100-transparent-40);
901
+ --wds-color-border-surface-modal: var(--wds-color-black-750);
901
902
  --wds-color-border-success-tertiary-hover: var(--wds-color-green-500);
902
903
  --wds-color-border-success-tertiary-disabled: var(--wds-color-black-100-transparent-10);
903
904
  --wds-color-border-success-tertiary-active: var(--wds-color-green-400);
@@ -1464,6 +1465,9 @@
1464
1465
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1465
1466
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1466
1467
  --wds-notification-fill-error: var(--wds-color-red-200);
1468
+ --wds-notification-border-width: var(--wds-border-width-none);
1469
+ --wds-notification-border-radius: var(--wds-border-radius-0);
1470
+ --wds-notification-border-color: var(--wds-color-white-transparent-0);
1467
1471
  --wds-nestable-list-paddings: var(--wds-space-200);
1468
1472
  --wds-nestable-list-fill: var(--wds-color-white-transparent-0);
1469
1473
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
@@ -1812,7 +1816,7 @@
1812
1816
  --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1813
1817
  --wds-card-header-padding-vertical: var(--wds-space-400);
1814
1818
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1815
- --wds-card-header-padding-bottom: var(--wds-space-0);
1819
+ --wds-card-header-padding-bottom: var(--wds-space-100);
1816
1820
  --wds-card-header-divider-width: var(--wds-border-width-none);
1817
1821
  --wds-card-controls-padding-vertical: var(--wds-space-400);
1818
1822
  --wds-card-controls-padding-horizontal: var(--wds-space-600);
@@ -2124,6 +2128,7 @@
2124
2128
  --wds-side-panel-title-font-size: var(--wds-font-size-body-small);
2125
2129
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-tiny);
2126
2130
  --wds-side-panel-subtitle-fill: var(--wds-color-text-standard-secondary);
2131
+ --wds-side-panel-standard-shadow: var(--wds-shadow-300);
2127
2132
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
2128
2133
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-small);
2129
2134
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
@@ -2182,6 +2187,7 @@
2182
2187
  --wds-page-header-subtitle-font-size: var(--wds-font-size-body-medium);
2183
2188
  --wds-number-input-spacing: var(--wds-form-field-label-gap-tiny);
2184
2189
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
2190
+ --wds-notification-content-color: var(--wds-color-text-standard-primary-light);
2185
2191
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
2186
2192
  --wds-message-modal-text-font-size: var(--wds-font-size-body-small);
2187
2193
  --wds-message-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
package/odeditor-dark/all.scss CHANGED
@@ -116,7 +116,6 @@
116
116
  --wds-sidebar-divider-fill-dark-default: #42454c;
117
117
  --wds-sidebar-clear-button-fill: #5a5d63;
118
118
  --wds-sidebar-border-inner-fill: transparent;
119
- --wds-side-panel-standard-shadow: none;
120
119
  --wds-side-panel-standard-overflow: visible;
121
120
  --wds-side-panel-header-divider-height: 0;
122
121
  --wds-side-panel-footer-divider-height: 0;
@@ -1124,6 +1123,9 @@
1124
1123
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1125
1124
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1126
1125
  --wds-notification-fill-error: var(--wds-color-red-200);
1126
+ --wds-notification-border-width: var(--wds-border-width-none);
1127
+ --wds-notification-border-radius: var(--wds-border-radius-0);
1128
+ --wds-notification-border-color: var(--wds-color-white-transparent-0);
1127
1129
  --wds-nestable-list-paddings: var(--wds-space-200);
1128
1130
  --wds-nestable-list-fill: var(--wds-color-white-transparent-0);
1129
1131
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
@@ -1446,7 +1448,7 @@
1446
1448
  --wds-color-text-premium: var(--wds-color-blue-100);
1447
1449
  --wds-color-text-placeholder-light: var(--wds-color-black-400);
1448
1450
  --wds-color-text-placeholder: var(--wds-color-black-400);
1449
- --wds-color-text-highlight: var(--wds-color-blue-400);
1451
+ --wds-color-text-highlight: var(--wds-color-blue-200);
1450
1452
  --wds-color-text-disabled-light: var(--wds-color-white-transparent-70);
1451
1453
  --wds-color-text-disabled: var(--wds-color-black-500);
1452
1454
  --wds-color-text-destructive: var(--wds-color-red-100);
@@ -1662,6 +1664,7 @@
1662
1664
  --wds-color-border-transparent-primary-disabled: var(--wds-color-black-100-transparent-10);
1663
1665
  --wds-color-border-transparent-primary-active: var(--wds-color-black-100-transparent-20);
1664
1666
  --wds-color-border-transparent-primary: var(--wds-color-black-100-transparent-40);
1667
+ --wds-color-border-surface-modal: var(--wds-color-black-750);
1665
1668
  --wds-color-border-success-tertiary-hover: var(--wds-color-green-500);
1666
1669
  --wds-color-border-success-tertiary-disabled: var(--wds-color-black-100-transparent-10);
1667
1670
  --wds-color-border-success-tertiary-active: var(--wds-color-green-400);
@@ -1777,7 +1780,7 @@
1777
1780
  --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1778
1781
  --wds-card-header-padding-vertical: var(--wds-space-400);
1779
1782
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1780
- --wds-card-header-padding-bottom: var(--wds-space-0);
1783
+ --wds-card-header-padding-bottom: var(--wds-space-100);
1781
1784
  --wds-card-header-divider-width: var(--wds-border-width-none);
1782
1785
  --wds-card-gallery-item-title-font-weight-small: var(--wds-font-weight-medium);
1783
1786
  --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-bold);
@@ -1904,6 +1907,7 @@
1904
1907
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-300);
1905
1908
  --wds-border-width-varied-secondary: var(--wds-border-width-100);
1906
1909
  --wds-border-width-varied: var(--wds-border-width-0);
1910
+ --wds-border-width-surface-modal: var(--wds-border-width-100);
1907
1911
  --wds-border-width-default: var(--wds-border-width-100);
1908
1912
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
1909
1913
  --wds-border-radius-surface-raised: var(--wds-border-radius-600);
@@ -2109,6 +2113,7 @@
2109
2113
  --wds-side-panel-title-font-size: var(--wds-font-size-body-small);
2110
2114
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-tiny);
2111
2115
  --wds-side-panel-subtitle-fill: var(--wds-color-text-standard-secondary);
2116
+ --wds-side-panel-standard-shadow: var(--wds-shadow-300);
2112
2117
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
2113
2118
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-small);
2114
2119
  --wds-shadow-surface-raised: var(--wds-shadow-200);
@@ -2172,6 +2177,7 @@
2172
2177
  --wds-page-header-subtitle-font-size: var(--wds-font-size-body-medium);
2173
2178
  --wds-number-input-spacing: var(--wds-form-field-label-gap-tiny);
2174
2179
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
2180
+ --wds-notification-content-color: var(--wds-color-text-standard-primary-light);
2175
2181
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
2176
2182
  --wds-message-modal-text-font-size: var(--wds-font-size-body-small);
2177
2183
  --wds-message-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
package/odeditor-dark/all.st.css CHANGED
@@ -185,6 +185,7 @@
185
185
  @property st-global(--wds-border-width-200);
186
186
  @property st-global(--wds-border-width-default);
187
187
  @property st-global(--wds-border-width-none);
188
+ @property st-global(--wds-border-width-surface-modal);
188
189
  @property st-global(--wds-border-width-varied);
189
190
  @property st-global(--wds-border-width-varied-secondary);
190
191
  @property st-global(--wds-breadcrumbs-border-radius);
@@ -633,6 +634,7 @@
633
634
  @property st-global(--wds-color-border-success-tertiary-active);
634
635
  @property st-global(--wds-color-border-success-tertiary-disabled);
635
636
  @property st-global(--wds-color-border-success-tertiary-hover);
637
+ @property st-global(--wds-color-border-surface-modal);
636
638
  @property st-global(--wds-color-border-transparent-primary);
637
639
  @property st-global(--wds-color-border-transparent-primary-active);
638
640
  @property st-global(--wds-color-border-transparent-primary-disabled);
@@ -1621,6 +1623,10 @@
1621
1623
  @property st-global(--wds-multiselect-icon-fill);
1622
1624
  @property st-global(--wds-nestable-list-fill);
1623
1625
  @property st-global(--wds-nestable-list-paddings);
1626
+ @property st-global(--wds-notification-border-color);
1627
+ @property st-global(--wds-notification-border-radius);
1628
+ @property st-global(--wds-notification-border-width);
1629
+ @property st-global(--wds-notification-content-color);
1624
1630
  @property st-global(--wds-notification-fill-error);
1625
1631
  @property st-global(--wds-notification-fill-premium);
1626
1632
  @property st-global(--wds-notification-fill-standard);
@@ -2791,6 +2797,7 @@
2791
2797
  --wds-border-width-200: 2px;
2792
2798
  --wds-border-width-default: 1px;
2793
2799
  --wds-border-width-none: 0px;
2800
+ --wds-border-width-surface-modal: 1px;
2794
2801
  --wds-border-width-varied: 0px;
2795
2802
  --wds-border-width-varied-secondary: 1px;
2796
2803
  --wds-breadcrumbs-border-radius: 6px;
@@ -3009,7 +3016,7 @@
3009
3016
  --wds-card-gallery-item-title-font-weight-small: 500;
3010
3017
  --wds-card-gallery-item-title-gap: 0px;
3011
3018
  --wds-card-header-divider-width: 0px;
3012
- --wds-card-header-padding-bottom: 0px;
3019
+ --wds-card-header-padding-bottom: 4px;
3013
3020
  --wds-card-header-padding-horizontal: 24px;
3014
3021
  --wds-card-header-padding-vertical: 16px;
3015
3022
  --wds-card-header-suffix-align: flex-start;
@@ -3239,6 +3246,7 @@
3239
3246
  --wds-color-border-success-tertiary-active: #396F5C;
3240
3247
  --wds-color-border-success-tertiary-disabled: rgba(255, 255, 255, .1);
3241
3248
  --wds-color-border-success-tertiary-hover: #264B43;
3249
+ --wds-color-border-surface-modal: #2D2D2E;
3242
3250
  --wds-color-border-transparent-primary: rgba(255, 255, 255, .4);
3243
3251
  --wds-color-border-transparent-primary-active: rgba(255, 255, 255, .2);
3244
3252
  --wds-color-border-transparent-primary-disabled: rgba(255, 255, 255, .1);
@@ -3566,7 +3574,7 @@
3566
3574
  --wds-color-text-destructive: #FF7680;
3567
3575
  --wds-color-text-disabled: #878685;
3568
3576
  --wds-color-text-disabled-light: rgba(0, 0, 0, .7);
3569
- --wds-color-text-highlight: #2D354E;
3577
+ --wds-color-text-highlight: #6F94D4;
3570
3578
  --wds-color-text-placeholder: #A09E9D;
3571
3579
  --wds-color-text-placeholder-light: #A09E9D;
3572
3580
  --wds-color-text-premium: #82B0FF;
@@ -4227,6 +4235,10 @@
4227
4235
  --wds-multiselect-icon-fill: #D4D3D2;
4228
4236
  --wds-nestable-list-fill: rgba(0, 0, 0, 0);
4229
4237
  --wds-nestable-list-paddings: 8px;
4238
+ --wds-notification-border-color: rgba(0, 0, 0, 0);
4239
+ --wds-notification-border-radius: 0px;
4240
+ --wds-notification-border-width: 0px;
4241
+ --wds-notification-content-color: #212122;
4230
4242
  --wds-notification-fill-error: #D34D55;
4231
4243
  --wds-notification-fill-premium: #8b2df5;
4232
4244
  --wds-notification-fill-standard: #6F94D4;
@@ -4612,7 +4624,7 @@
4612
4624
  --wds-side-panel-header-padding-vertical: 16px;
4613
4625
  --wds-side-panel-standard-corner-radius: 0px;
4614
4626
  --wds-side-panel-standard-overflow: visible;
4615
- --wds-side-panel-standard-shadow: none;
4627
+ --wds-side-panel-standard-shadow: 0 12px 30px 0 rgba(0, 0, 0, .3), 0 0px 0px 0 rgba(0, 0, 0, .3);
4616
4628
  --wds-side-panel-subtitle-fill: #D4D3D2;
4617
4629
  --wds-side-panel-subtitle-font-line-height: 16px;
4618
4630
  --wds-side-panel-subtitle-font-size: 12px;
package/odeditor-dark/component.st.css CHANGED
@@ -1029,6 +1029,10 @@
1029
1029
  @property st-global(--wds-multiselect-icon-fill);
1030
1030
  @property st-global(--wds-nestable-list-fill);
1031
1031
  @property st-global(--wds-nestable-list-paddings);
1032
+ @property st-global(--wds-notification-border-color);
1033
+ @property st-global(--wds-notification-border-radius);
1034
+ @property st-global(--wds-notification-border-width);
1035
+ @property st-global(--wds-notification-content-color);
1032
1036
  @property st-global(--wds-notification-fill-error);
1033
1037
  @property st-global(--wds-notification-fill-premium);
1034
1038
  @property st-global(--wds-notification-fill-standard);
@@ -2219,7 +2223,7 @@
2219
2223
  --wds-card-gallery-item-title-font-weight-small: 500;
2220
2224
  --wds-card-gallery-item-title-gap: 0px;
2221
2225
  --wds-card-header-divider-width: 0px;
2222
- --wds-card-header-padding-bottom: 0px;
2226
+ --wds-card-header-padding-bottom: 4px;
2223
2227
  --wds-card-header-padding-horizontal: 24px;
2224
2228
  --wds-card-header-padding-vertical: 16px;
2225
2229
  --wds-card-header-suffix-align: flex-start;
@@ -2886,6 +2890,10 @@
2886
2890
  --wds-multiselect-icon-fill: #D4D3D2;
2887
2891
  --wds-nestable-list-fill: rgba(0, 0, 0, 0);
2888
2892
  --wds-nestable-list-paddings: 8px;
2893
+ --wds-notification-border-color: rgba(0, 0, 0, 0);
2894
+ --wds-notification-border-radius: 0px;
2895
+ --wds-notification-border-width: 0px;
2896
+ --wds-notification-content-color: #212122;
2889
2897
  --wds-notification-fill-error: #D34D55;
2890
2898
  --wds-notification-fill-premium: #8b2df5;
2891
2899
  --wds-notification-fill-standard: #6F94D4;
@@ -3162,7 +3170,7 @@
3162
3170
  --wds-side-panel-header-padding-vertical: 16px;
3163
3171
  --wds-side-panel-standard-corner-radius: 0px;
3164
3172
  --wds-side-panel-standard-overflow: visible;
3165
- --wds-side-panel-standard-shadow: none;
3173
+ --wds-side-panel-standard-shadow: 0 12px 30px 0 rgba(0, 0, 0, .3), 0 0px 0px 0 rgba(0, 0, 0, .3);
3166
3174
  --wds-side-panel-subtitle-fill: #D4D3D2;
3167
3175
  --wds-side-panel-subtitle-font-line-height: 16px;
3168
3176
  --wds-side-panel-subtitle-font-size: 12px;
package/odeditor-dark/semantic.st.css CHANGED
@@ -7,6 +7,7 @@
7
7
  @property st-global(--wds-border-radius-surface-raised);
8
8
  @property st-global(--wds-border-radius-surface-sunken);
9
9
  @property st-global(--wds-border-width-default);
10
+ @property st-global(--wds-border-width-surface-modal);
10
11
  @property st-global(--wds-border-width-varied);
11
12
  @property st-global(--wds-border-width-varied-secondary);
12
13
  @property st-global(--wds-color-border-ai-primary);
@@ -77,6 +78,7 @@
77
78
  @property st-global(--wds-color-border-success-tertiary-active);
78
79
  @property st-global(--wds-color-border-success-tertiary-disabled);
79
80
  @property st-global(--wds-color-border-success-tertiary-hover);
81
+ @property st-global(--wds-color-border-surface-modal);
80
82
  @property st-global(--wds-color-border-transparent-primary);
81
83
  @property st-global(--wds-color-border-transparent-primary-active);
82
84
  @property st-global(--wds-color-border-transparent-primary-disabled);
@@ -515,6 +517,7 @@
515
517
  --wds-border-radius-surface-raised: 12px;
516
518
  --wds-border-radius-surface-sunken: 0px;
517
519
  --wds-border-width-default: 1px;
520
+ --wds-border-width-surface-modal: 1px;
518
521
  --wds-border-width-varied: 0px;
519
522
  --wds-border-width-varied-secondary: 1px;
520
523
  --wds-color-border-ai-primary: #ffffff;
@@ -585,6 +588,7 @@
585
588
  --wds-color-border-success-tertiary-active: #396F5C;
586
589
  --wds-color-border-success-tertiary-disabled: rgba(255, 255, 255, .1);
587
590
  --wds-color-border-success-tertiary-hover: #264B43;
591
+ --wds-color-border-surface-modal: #2D2D2E;
588
592
  --wds-color-border-transparent-primary: rgba(255, 255, 255, .4);
589
593
  --wds-color-border-transparent-primary-active: rgba(255, 255, 255, .2);
590
594
  --wds-color-border-transparent-primary-disabled: rgba(255, 255, 255, .1);
@@ -860,7 +864,7 @@
860
864
  --wds-color-text-destructive: #FF7680;
861
865
  --wds-color-text-disabled: #878685;
862
866
  --wds-color-text-disabled-light: rgba(0, 0, 0, .7);
863
- --wds-color-text-highlight: #2D354E;
867
+ --wds-color-text-highlight: #6F94D4;
864
868
  --wds-color-text-placeholder: #A09E9D;
865
869
  --wds-color-text-placeholder-light: #A09E9D;
866
870
  --wds-color-text-premium: #82B0FF;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.226.0",
3
+ "version": "1.227.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -36,5 +36,5 @@
36
36
  "author": "augustinasv@wix.com",
37
37
  "description": "Design system tokens",
38
38
  "packageManager": "yarn@3.5.0",
39
- "falconPackageHash": "78c6b13e54cc524c4ca6bc7ec6d4be9385ae448a5235884dbfbd1cb6"
39
+ "falconPackageHash": "1eba5351d6f92ec84b95fae15abd70eb77cb81bffebba8ef70ae5514"
40
40
  }
package/semantic.st.css CHANGED
@@ -7,6 +7,7 @@
7
7
  @property st-global(--wds-border-radius-surface-raised);
8
8
  @property st-global(--wds-border-radius-surface-sunken);
9
9
  @property st-global(--wds-border-width-default);
10
+ @property st-global(--wds-border-width-surface-modal);
10
11
  @property st-global(--wds-border-width-varied);
11
12
  @property st-global(--wds-border-width-varied-secondary);
12
13
  @property st-global(--wds-color-border-ai-primary);
@@ -77,6 +78,7 @@
77
78
  @property st-global(--wds-color-border-success-tertiary-active);
78
79
  @property st-global(--wds-color-border-success-tertiary-disabled);
79
80
  @property st-global(--wds-color-border-success-tertiary-hover);
81
+ @property st-global(--wds-color-border-surface-modal);
80
82
  @property st-global(--wds-color-border-transparent-primary);
81
83
  @property st-global(--wds-color-border-transparent-primary-active);
82
84
  @property st-global(--wds-color-border-transparent-primary-disabled);
@@ -507,6 +509,7 @@
507
509
  --wds-border-radius-surface-raised: 8px;
508
510
  --wds-border-radius-surface-sunken: 0px;
509
511
  --wds-border-width-default: 1px;
512
+ --wds-border-width-surface-modal: 0px;
510
513
  --wds-border-width-varied: 1px;
511
514
  --wds-border-width-varied-secondary: 0px;
512
515
  --wds-color-border-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
@@ -577,6 +580,7 @@
577
580
  --wds-color-border-success-tertiary-active: #87cea5;
578
581
  --wds-color-border-success-tertiary-disabled: rgba(0, 6, 36, .1);
579
582
  --wds-color-border-success-tertiary-hover: #c8e8d6;
583
+ --wds-color-border-surface-modal: rgba(0, 6, 36, 0);
580
584
  --wds-color-border-transparent-primary: rgba(0, 6, 36, .2);
581
585
  --wds-color-border-transparent-primary-active: rgba(0, 6, 36, .2);
582
586
  --wds-color-border-transparent-primary-disabled: rgba(0, 6, 36, .1);
package/studio/all.css CHANGED
@@ -565,6 +565,7 @@
565
565
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-0);
566
566
  --wds-border-width-varied-secondary: var(--wds-border-width-none);
567
567
  --wds-border-width-varied: var(--wds-border-width-100);
568
+ --wds-border-width-surface-modal: var(--wds-border-width-none);
568
569
  --wds-border-width-default: var(--wds-border-width-100);
569
570
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
570
571
  --wds-border-radius-surface-raised: var(--wds-border-radius-200);
@@ -897,6 +898,7 @@
897
898
  --wds-color-border-transparent-primary-disabled: var(--wds-color-black-100-transparent-10);
898
899
  --wds-color-border-transparent-primary-active: var(--wds-color-black-100-transparent-20);
899
900
  --wds-color-border-transparent-primary: var(--wds-color-black-100-transparent-20);
901
+ --wds-color-border-surface-modal: var(--wds-color-black-100-transparent-0);
900
902
  --wds-color-border-success-tertiary-hover: var(--wds-color-green-400);
901
903
  --wds-color-border-success-tertiary-disabled: var(--wds-color-black-100-transparent-10);
902
904
  --wds-color-border-success-tertiary-active: var(--wds-color-green-300);
@@ -1419,6 +1421,9 @@
1419
1421
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1420
1422
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1421
1423
  --wds-notification-fill-error: var(--wds-color-red-200);
1424
+ --wds-notification-border-width: var(--wds-border-width-none);
1425
+ --wds-notification-border-radius: var(--wds-border-radius-0);
1426
+ --wds-notification-border-color: var(--wds-color-white-transparent-0);
1422
1427
  --wds-nestable-list-paddings: var(--wds-space-0);
1423
1428
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
1424
1429
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
@@ -2124,6 +2129,7 @@
2124
2129
  --wds-page-header-breadcrumbs-font-size: var(--wds-font-size-body-small);
2125
2130
  --wds-page-header-breadcrumbs-color: var(--wds-color-text-standard-primary);
2126
2131
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
2132
+ --wds-notification-content-color: var(--wds-color-text-standard-primary-light);
2127
2133
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
2128
2134
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
2129
2135
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-4);
package/studio/all.scss CHANGED
@@ -1098,6 +1098,9 @@
1098
1098
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1099
1099
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1100
1100
  --wds-notification-fill-error: var(--wds-color-red-200);
1101
+ --wds-notification-border-width: var(--wds-border-width-none);
1102
+ --wds-notification-border-radius: var(--wds-border-radius-0);
1103
+ --wds-notification-border-color: var(--wds-color-white-transparent-0);
1101
1104
  --wds-nestable-list-paddings: var(--wds-space-0);
1102
1105
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
1103
1106
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
@@ -1606,6 +1609,7 @@
1606
1609
  --wds-color-border-transparent-primary-disabled: var(--wds-color-black-100-transparent-10);
1607
1610
  --wds-color-border-transparent-primary-active: var(--wds-color-black-100-transparent-20);
1608
1611
  --wds-color-border-transparent-primary: var(--wds-color-black-100-transparent-20);
1612
+ --wds-color-border-surface-modal: var(--wds-color-black-100-transparent-0);
1609
1613
  --wds-color-border-success-tertiary-hover: var(--wds-color-green-400);
1610
1614
  --wds-color-border-success-tertiary-disabled: var(--wds-color-black-100-transparent-10);
1611
1615
  --wds-color-border-success-tertiary-active: var(--wds-color-green-300);
@@ -1810,6 +1814,7 @@
1810
1814
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-100);
1811
1815
  --wds-border-width-varied-secondary: var(--wds-border-width-none);
1812
1816
  --wds-border-width-varied: var(--wds-border-width-100);
1817
+ --wds-border-width-surface-modal: var(--wds-border-width-none);
1813
1818
  --wds-border-width-default: var(--wds-border-width-100);
1814
1819
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
1815
1820
  --wds-border-radius-surface-raised: var(--wds-border-radius-200);
@@ -2113,6 +2118,7 @@
2113
2118
  --wds-page-header-breadcrumbs-font-size: var(--wds-font-size-body-small);
2114
2119
  --wds-page-header-breadcrumbs-color: var(--wds-color-text-standard-primary);
2115
2120
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
2121
+ --wds-notification-content-color: var(--wds-color-text-standard-primary-light);
2116
2122
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
2117
2123
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
2118
2124
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-4);
package/studio/all.st.css CHANGED
@@ -182,6 +182,7 @@
182
182
  @property st-global(--wds-border-width-200);
183
183
  @property st-global(--wds-border-width-default);
184
184
  @property st-global(--wds-border-width-none);
185
+ @property st-global(--wds-border-width-surface-modal);
185
186
  @property st-global(--wds-border-width-varied);
186
187
  @property st-global(--wds-border-width-varied-secondary);
187
188
  @property st-global(--wds-breadcrumbs-border-radius);
@@ -630,6 +631,7 @@
630
631
  @property st-global(--wds-color-border-success-tertiary-active);
631
632
  @property st-global(--wds-color-border-success-tertiary-disabled);
632
633
  @property st-global(--wds-color-border-success-tertiary-hover);
634
+ @property st-global(--wds-color-border-surface-modal);
633
635
  @property st-global(--wds-color-border-transparent-primary);
634
636
  @property st-global(--wds-color-border-transparent-primary-active);
635
637
  @property st-global(--wds-color-border-transparent-primary-disabled);
@@ -1647,6 +1649,10 @@
1647
1649
  @property st-global(--wds-multiselect-icon-fill);
1648
1650
  @property st-global(--wds-nestable-list-fill);
1649
1651
  @property st-global(--wds-nestable-list-paddings);
1652
+ @property st-global(--wds-notification-border-color);
1653
+ @property st-global(--wds-notification-border-radius);
1654
+ @property st-global(--wds-notification-border-width);
1655
+ @property st-global(--wds-notification-content-color);
1650
1656
  @property st-global(--wds-notification-fill-error);
1651
1657
  @property st-global(--wds-notification-fill-premium);
1652
1658
  @property st-global(--wds-notification-fill-standard);
@@ -2796,6 +2802,7 @@
2796
2802
  --wds-border-width-200: 2px;
2797
2803
  --wds-border-width-default: 1px;
2798
2804
  --wds-border-width-none: 0px;
2805
+ --wds-border-width-surface-modal: 0px;
2799
2806
  --wds-border-width-varied: 1px;
2800
2807
  --wds-border-width-varied-secondary: 0px;
2801
2808
  --wds-breadcrumbs-border-radius: 2px;
@@ -3244,6 +3251,7 @@
3244
3251
  --wds-color-border-success-tertiary-active: #87cea5;
3245
3252
  --wds-color-border-success-tertiary-disabled: rgba(19, 23, 32, .1);
3246
3253
  --wds-color-border-success-tertiary-hover: #c8e8d6;
3254
+ --wds-color-border-surface-modal: rgba(19, 23, 32, 0);
3247
3255
  --wds-color-border-transparent-primary: rgba(19, 23, 32, .2);
3248
3256
  --wds-color-border-transparent-primary-active: rgba(19, 23, 32, .2);
3249
3257
  --wds-color-border-transparent-primary-disabled: rgba(19, 23, 32, .1);
@@ -4261,6 +4269,10 @@
4261
4269
  --wds-multiselect-icon-fill: #42454c;
4262
4270
  --wds-nestable-list-fill: #ffffff;
4263
4271
  --wds-nestable-list-paddings: 0px;
4272
+ --wds-notification-border-color: rgba(255, 255, 255, 0);
4273
+ --wds-notification-border-radius: 0px;
4274
+ --wds-notification-border-width: 0px;
4275
+ --wds-notification-content-color: #ffffff;
4264
4276
  --wds-notification-fill-error: #f1695f;
4265
4277
  --wds-notification-fill-premium: #c161f0;
4266
4278
  --wds-notification-fill-standard: #418aff;
package/studio/component.st.css CHANGED
@@ -1057,6 +1057,10 @@
1057
1057
  @property st-global(--wds-multiselect-icon-fill);
1058
1058
  @property st-global(--wds-nestable-list-fill);
1059
1059
  @property st-global(--wds-nestable-list-paddings);
1060
+ @property st-global(--wds-notification-border-color);
1061
+ @property st-global(--wds-notification-border-radius);
1062
+ @property st-global(--wds-notification-border-width);
1063
+ @property st-global(--wds-notification-content-color);
1060
1064
  @property st-global(--wds-notification-fill-error);
1061
1065
  @property st-global(--wds-notification-fill-premium);
1062
1066
  @property st-global(--wds-notification-fill-standard);
@@ -2926,6 +2930,10 @@
2926
2930
  --wds-multiselect-icon-fill: #42454c;
2927
2931
  --wds-nestable-list-fill: #ffffff;
2928
2932
  --wds-nestable-list-paddings: 0px;
2933
+ --wds-notification-border-color: rgba(255, 255, 255, 0);
2934
+ --wds-notification-border-radius: 0px;
2935
+ --wds-notification-border-width: 0px;
2936
+ --wds-notification-content-color: #ffffff;
2929
2937
  --wds-notification-fill-error: #f1695f;
2930
2938
  --wds-notification-fill-premium: #c161f0;
2931
2939
  --wds-notification-fill-standard: #418aff;
package/studio/semantic.st.css CHANGED
@@ -7,6 +7,7 @@
7
7
  @property st-global(--wds-border-radius-surface-raised);
8
8
  @property st-global(--wds-border-radius-surface-sunken);
9
9
  @property st-global(--wds-border-width-default);
10
+ @property st-global(--wds-border-width-surface-modal);
10
11
  @property st-global(--wds-border-width-varied);
11
12
  @property st-global(--wds-border-width-varied-secondary);
12
13
  @property st-global(--wds-color-border-ai-primary);
@@ -77,6 +78,7 @@
77
78
  @property st-global(--wds-color-border-success-tertiary-active);
78
79
  @property st-global(--wds-color-border-success-tertiary-disabled);
79
80
  @property st-global(--wds-color-border-success-tertiary-hover);
81
+ @property st-global(--wds-color-border-surface-modal);
80
82
  @property st-global(--wds-color-border-transparent-primary);
81
83
  @property st-global(--wds-color-border-transparent-primary-active);
82
84
  @property st-global(--wds-color-border-transparent-primary-disabled);
@@ -515,6 +517,7 @@
515
517
  --wds-border-radius-surface-raised: 4px;
516
518
  --wds-border-radius-surface-sunken: 0px;
517
519
  --wds-border-width-default: 1px;
520
+ --wds-border-width-surface-modal: 0px;
518
521
  --wds-border-width-varied: 1px;
519
522
  --wds-border-width-varied-secondary: 0px;
520
523
  --wds-color-border-ai-primary: #5a48f5;
@@ -585,6 +588,7 @@
585
588
  --wds-color-border-success-tertiary-active: #87cea5;
586
589
  --wds-color-border-success-tertiary-disabled: rgba(19, 23, 32, .1);
587
590
  --wds-color-border-success-tertiary-hover: #c8e8d6;
591
+ --wds-color-border-surface-modal: rgba(19, 23, 32, 0);
588
592
  --wds-color-border-transparent-primary: rgba(19, 23, 32, .2);
589
593
  --wds-color-border-transparent-primary-active: rgba(19, 23, 32, .2);
590
594
  --wds-color-border-transparent-primary-disabled: rgba(19, 23, 32, .1);
package/wixel/all.css CHANGED
@@ -545,6 +545,7 @@
545
545
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-0);
546
546
  --wds-border-width-varied-secondary: var(--wds-border-width-none);
547
547
  --wds-border-width-varied: var(--wds-border-width-100);
548
+ --wds-border-width-surface-modal: var(--wds-border-width-none);
548
549
  --wds-border-width-default: var(--wds-border-width-none);
549
550
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
550
551
  --wds-border-radius-surface-raised: var(--wds-border-radius-600);
@@ -862,6 +863,7 @@
862
863
  --wds-color-border-transparent-primary-disabled: var(--wds-color-black-100-transparent-10);
863
864
  --wds-color-border-transparent-primary-active: var(--wds-color-black-100-transparent-20);
864
865
  --wds-color-border-transparent-primary: var(--wds-color-black-100-transparent-20);
866
+ --wds-color-border-surface-modal: var(--wds-color-black-100-transparent-0);
865
867
  --wds-color-border-success-tertiary-hover: var(--wds-color-green-400);
866
868
  --wds-color-border-success-tertiary-disabled: var(--wds-color-black-100-transparent-10);
867
869
  --wds-color-border-success-tertiary-active: var(--wds-color-green-300);
@@ -1376,6 +1378,9 @@
1376
1378
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1377
1379
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1378
1380
  --wds-notification-fill-error: var(--wds-color-red-200);
1381
+ --wds-notification-border-width: var(--wds-border-width-none);
1382
+ --wds-notification-border-radius: var(--wds-border-radius-0);
1383
+ --wds-notification-border-color: var(--wds-color-white-transparent-0);
1379
1384
  --wds-nestable-list-paddings: var(--wds-space-0);
1380
1385
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
1381
1386
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
@@ -2050,6 +2055,7 @@
2050
2055
  --wds-page-header-breadcrumbs-font-size: var(--wds-font-size-body-small);
2051
2056
  --wds-page-header-breadcrumbs-color: var(--wds-color-text-standard-primary);
2052
2057
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
2058
+ --wds-notification-content-color: var(--wds-color-text-standard-primary-light);
2053
2059
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
2054
2060
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
2055
2061
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-4);
package/wixel/all.scss CHANGED
@@ -1056,6 +1056,9 @@
1056
1056
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1057
1057
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1058
1058
  --wds-notification-fill-error: var(--wds-color-red-200);
1059
+ --wds-notification-border-width: var(--wds-border-width-none);
1060
+ --wds-notification-border-radius: var(--wds-border-radius-0);
1061
+ --wds-notification-border-color: var(--wds-color-white-transparent-0);
1059
1062
  --wds-nestable-list-paddings: var(--wds-space-0);
1060
1063
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
1061
1064
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
@@ -1543,6 +1546,7 @@
1543
1546
  --wds-color-border-transparent-primary-disabled: var(--wds-color-black-100-transparent-10);
1544
1547
  --wds-color-border-transparent-primary-active: var(--wds-color-black-100-transparent-20);
1545
1548
  --wds-color-border-transparent-primary: var(--wds-color-black-100-transparent-20);
1549
+ --wds-color-border-surface-modal: var(--wds-color-black-100-transparent-0);
1546
1550
  --wds-color-border-success-tertiary-hover: var(--wds-color-green-400);
1547
1551
  --wds-color-border-success-tertiary-disabled: var(--wds-color-black-100-transparent-10);
1548
1552
  --wds-color-border-success-tertiary-active: var(--wds-color-green-300);
@@ -1743,6 +1747,7 @@
1743
1747
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-100);
1744
1748
  --wds-border-width-varied-secondary: var(--wds-border-width-none);
1745
1749
  --wds-border-width-varied: var(--wds-border-width-100);
1750
+ --wds-border-width-surface-modal: var(--wds-border-width-none);
1746
1751
  --wds-border-width-default: var(--wds-border-width-none);
1747
1752
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
1748
1753
  --wds-border-radius-surface-raised: var(--wds-border-radius-600);
@@ -2039,6 +2044,7 @@
2039
2044
  --wds-page-header-breadcrumbs-font-size: var(--wds-font-size-body-small);
2040
2045
  --wds-page-header-breadcrumbs-color: var(--wds-color-text-standard-primary);
2041
2046
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
2047
+ --wds-notification-content-color: var(--wds-color-text-standard-primary-light);
2042
2048
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
2043
2049
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
2044
2050
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-4);
package/wixel/all.st.css CHANGED
@@ -182,6 +182,7 @@
182
182
  @property st-global(--wds-border-width-200);
183
183
  @property st-global(--wds-border-width-default);
184
184
  @property st-global(--wds-border-width-none);
185
+ @property st-global(--wds-border-width-surface-modal);
185
186
  @property st-global(--wds-border-width-varied);
186
187
  @property st-global(--wds-border-width-varied-secondary);
187
188
  @property st-global(--wds-breadcrumbs-border-radius);
@@ -613,6 +614,7 @@
613
614
  @property st-global(--wds-color-border-success-tertiary-active);
614
615
  @property st-global(--wds-color-border-success-tertiary-disabled);
615
616
  @property st-global(--wds-color-border-success-tertiary-hover);
617
+ @property st-global(--wds-color-border-surface-modal);
616
618
  @property st-global(--wds-color-border-transparent-primary);
617
619
  @property st-global(--wds-color-border-transparent-primary-active);
618
620
  @property st-global(--wds-color-border-transparent-primary-disabled);
@@ -1614,6 +1616,10 @@
1614
1616
  @property st-global(--wds-multiselect-icon-fill);
1615
1617
  @property st-global(--wds-nestable-list-fill);
1616
1618
  @property st-global(--wds-nestable-list-paddings);
1619
+ @property st-global(--wds-notification-border-color);
1620
+ @property st-global(--wds-notification-border-radius);
1621
+ @property st-global(--wds-notification-border-width);
1622
+ @property st-global(--wds-notification-content-color);
1617
1623
  @property st-global(--wds-notification-fill-error);
1618
1624
  @property st-global(--wds-notification-fill-premium);
1619
1625
  @property st-global(--wds-notification-fill-standard);
@@ -2732,6 +2738,7 @@
2732
2738
  --wds-border-width-200: 2px;
2733
2739
  --wds-border-width-default: 0px;
2734
2740
  --wds-border-width-none: 0px;
2741
+ --wds-border-width-surface-modal: 0px;
2735
2742
  --wds-border-width-varied: 1px;
2736
2743
  --wds-border-width-varied-secondary: 0px;
2737
2744
  --wds-breadcrumbs-border-radius: 2px;
@@ -3163,6 +3170,7 @@
3163
3170
  --wds-color-border-success-tertiary-active: #87cea5;
3164
3171
  --wds-color-border-success-tertiary-disabled: rgba(38, 37, 36, 0.1000);
3165
3172
  --wds-color-border-success-tertiary-hover: #c8e8d6;
3173
+ --wds-color-border-surface-modal: rgba(38, 37, 36, 0.0000);
3166
3174
  --wds-color-border-transparent-primary: rgba(38, 37, 36, 0.2000);
3167
3175
  --wds-color-border-transparent-primary-active: rgba(38, 37, 36, 0.2000);
3168
3176
  --wds-color-border-transparent-primary-disabled: rgba(38, 37, 36, 0.1000);
@@ -4164,6 +4172,10 @@
4164
4172
  --wds-multiselect-icon-fill: #595d70;
4165
4173
  --wds-nestable-list-fill: #ffffff;
4166
4174
  --wds-nestable-list-paddings: 0px;
4175
+ --wds-notification-border-color: rgba(255, 255, 255, 0.0000);
4176
+ --wds-notification-border-radius: 0px;
4177
+ --wds-notification-border-width: 0px;
4178
+ --wds-notification-content-color: #ffffff;
4167
4179
  --wds-notification-fill-error: #f1695f;
4168
4180
  --wds-notification-fill-premium: #c161f0;
4169
4181
  --wds-notification-fill-standard: #7489ff;
package/wixel/component.st.css CHANGED
@@ -1038,6 +1038,10 @@
1038
1038
  @property st-global(--wds-multiselect-icon-fill);
1039
1039
  @property st-global(--wds-nestable-list-fill);
1040
1040
  @property st-global(--wds-nestable-list-paddings);
1041
+ @property st-global(--wds-notification-border-color);
1042
+ @property st-global(--wds-notification-border-radius);
1043
+ @property st-global(--wds-notification-border-width);
1044
+ @property st-global(--wds-notification-content-color);
1041
1045
  @property st-global(--wds-notification-fill-error);
1042
1046
  @property st-global(--wds-notification-fill-premium);
1043
1047
  @property st-global(--wds-notification-fill-standard);
@@ -2873,6 +2877,10 @@
2873
2877
  --wds-multiselect-icon-fill: #595d70;
2874
2878
  --wds-nestable-list-fill: #ffffff;
2875
2879
  --wds-nestable-list-paddings: 0px;
2880
+ --wds-notification-border-color: rgba(255, 255, 255, 0.0000);
2881
+ --wds-notification-border-radius: 0px;
2882
+ --wds-notification-border-width: 0px;
2883
+ --wds-notification-content-color: #ffffff;
2876
2884
  --wds-notification-fill-error: #f1695f;
2877
2885
  --wds-notification-fill-premium: #c161f0;
2878
2886
  --wds-notification-fill-standard: #7489ff;
package/wixel/semantic.st.css CHANGED
@@ -7,6 +7,7 @@
7
7
  @property st-global(--wds-border-radius-surface-raised);
8
8
  @property st-global(--wds-border-radius-surface-sunken);
9
9
  @property st-global(--wds-border-width-default);
10
+ @property st-global(--wds-border-width-surface-modal);
10
11
  @property st-global(--wds-border-width-varied);
11
12
  @property st-global(--wds-border-width-varied-secondary);
12
13
  @property st-global(--wds-color-border-ai-primary);
@@ -77,6 +78,7 @@
77
78
  @property st-global(--wds-color-border-success-tertiary-active);
78
79
  @property st-global(--wds-color-border-success-tertiary-disabled);
79
80
  @property st-global(--wds-color-border-success-tertiary-hover);
81
+ @property st-global(--wds-color-border-surface-modal);
80
82
  @property st-global(--wds-color-border-transparent-primary);
81
83
  @property st-global(--wds-color-border-transparent-primary-active);
82
84
  @property st-global(--wds-color-border-transparent-primary-disabled);
@@ -490,6 +492,7 @@
490
492
  --wds-border-radius-surface-raised: 12px;
491
493
  --wds-border-radius-surface-sunken: 0px;
492
494
  --wds-border-width-default: 0px;
495
+ --wds-border-width-surface-modal: 0px;
493
496
  --wds-border-width-varied: 1px;
494
497
  --wds-border-width-varied-secondary: 0px;
495
498
  --wds-color-border-ai-primary: #ffffff;
@@ -560,6 +563,7 @@
560
563
  --wds-color-border-success-tertiary-active: #87cea5;
561
564
  --wds-color-border-success-tertiary-disabled: rgba(38, 37, 36, 0.1000);
562
565
  --wds-color-border-success-tertiary-hover: #c8e8d6;
566
+ --wds-color-border-surface-modal: rgba(38, 37, 36, 0.0000);
563
567
  --wds-color-border-transparent-primary: rgba(38, 37, 36, 0.2000);
564
568
  --wds-color-border-transparent-primary-active: rgba(38, 37, 36, 0.2000);
565
569
  --wds-color-border-transparent-primary-disabled: rgba(38, 37, 36, 0.1000);