@wix/design-system-tokens 1.178.0 → 1.180.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 (32) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/all.css +11 -4
  3. package/all.scss +11 -4
  4. package/all.st.css +21 -7
  5. package/component.st.css +15 -7
  6. package/foundation.st.css +2 -0
  7. package/odeditor/all.css +16 -9
  8. package/odeditor/all.scss +16 -9
  9. package/odeditor/all.st.css +26 -12
  10. package/odeditor/component.st.css +20 -12
  11. package/odeditor/foundation.st.css +2 -0
  12. package/odeditor/semantic.st.css +4 -0
  13. package/odeditor-dark/all.css +28 -20
  14. package/odeditor-dark/all.scss +28 -20
  15. package/odeditor-dark/all.st.css +280 -264
  16. package/odeditor-dark/component.st.css +208 -200
  17. package/odeditor-dark/foundation.st.css +9 -5
  18. package/odeditor-dark/semantic.st.css +63 -59
  19. package/package.json +2 -2
  20. package/semantic.st.css +4 -0
  21. package/studio/all.css +10 -3
  22. package/studio/all.scss +10 -3
  23. package/studio/all.st.css +20 -6
  24. package/studio/component.st.css +14 -6
  25. package/studio/foundation.st.css +2 -0
  26. package/studio/semantic.st.css +4 -0
  27. package/wixel/all.css +10 -3
  28. package/wixel/all.scss +10 -3
  29. package/wixel/all.st.css +20 -6
  30. package/wixel/component.st.css +14 -6
  31. package/wixel/foundation.st.css +2 -0
  32. package/wixel/semantic.st.css +4 -0
package/odeditor/all.st.css CHANGED
@@ -63,6 +63,7 @@
63
63
  @property st-global(--wds-background-blur-375);
64
64
  @property st-global(--wds-background-blur-450);
65
65
  @property st-global(--wds-background-blur-modal);
66
+ @property st-global(--wds-background-blur-surface-overlay);
66
67
  @property st-global(--wds-badge-border-radius-medium);
67
68
  @property st-global(--wds-badge-border-radius-small);
68
69
  @property st-global(--wds-badge-border-radius-tiny);
@@ -363,6 +364,7 @@
363
364
  @property st-global(--wds-color-blue-0);
364
365
  @property st-global(--wds-color-blue-50);
365
366
  @property st-global(--wds-color-blue-100);
367
+ @property st-global(--wds-color-blue-150);
366
368
  @property st-global(--wds-color-blue-200);
367
369
  @property st-global(--wds-color-blue-250);
368
370
  @property st-global(--wds-color-blue-300);
@@ -649,6 +651,7 @@
649
651
  @property st-global(--wds-color-fill-surface-modal-backdrop);
650
652
  @property st-global(--wds-color-fill-surface-neutral);
651
653
  @property st-global(--wds-color-fill-surface-overlay);
654
+ @property st-global(--wds-color-fill-surface-overlay-blur);
652
655
  @property st-global(--wds-color-fill-surface-overlay-dark);
653
656
  @property st-global(--wds-color-fill-surface-premium);
654
657
  @property st-global(--wds-color-fill-surface-raised);
@@ -1383,6 +1386,7 @@
1383
1386
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
1384
1387
  @property st-global(--wds-segmented-toggle-size-medium);
1385
1388
  @property st-global(--wds-segmented-toggle-size-small);
1389
+ @property st-global(--wds-segmented-toggle-size-tiny);
1386
1390
  @property st-global(--wds-segmented-toggle-value-fill);
1387
1391
  @property st-global(--wds-segmented-toggle-value-fill-default);
1388
1392
  @property st-global(--wds-segmented-toggle-value-fill-disabled);
@@ -1417,10 +1421,13 @@
1417
1421
  @property st-global(--wds-selector-button-size-large);
1418
1422
  @property st-global(--wds-selector-button-size-medium);
1419
1423
  @property st-global(--wds-selector-button-size-small);
1420
- @property st-global(--wds-selector-button-text-fill);
1424
+ @property st-global(--wds-selector-button-text-fill-dark);
1421
1425
  @property st-global(--wds-selector-button-text-fill-disabled);
1422
- @property st-global(--wds-selector-button-text-fill-hover);
1423
- @property st-global(--wds-selector-button-text-fill-pressed);
1426
+ @property st-global(--wds-selector-button-text-fill-hover-dark);
1427
+ @property st-global(--wds-selector-button-text-fill-hover-standard);
1428
+ @property st-global(--wds-selector-button-text-fill-pressed-dark);
1429
+ @property st-global(--wds-selector-button-text-fill-pressed-standard);
1430
+ @property st-global(--wds-selector-button-text-fill-standard);
1424
1431
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1425
1432
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1426
1433
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -2098,6 +2105,7 @@
2098
2105
  --wds-background-blur-375: 30px;
2099
2106
  --wds-background-blur-450: 40px;
2100
2107
  --wds-background-blur-modal: 14px;
2108
+ --wds-background-blur-surface-overlay: 0px;
2101
2109
  --wds-badge-border-radius-medium: 4px;
2102
2110
  --wds-badge-border-radius-small: 4px;
2103
2111
  --wds-badge-border-radius-tiny: 4px;
@@ -2398,6 +2406,7 @@
2398
2406
  --wds-color-blue-0: #0f2ccf;
2399
2407
  --wds-color-blue-50: #1c3fe5;
2400
2408
  --wds-color-blue-100: #2f5dff;
2409
+ --wds-color-blue-150: #116DFF;
2401
2410
  --wds-color-blue-200: #597dff;
2402
2411
  --wds-color-blue-250: #7896ff;
2403
2412
  --wds-color-blue-300: #acbeff;
@@ -2684,6 +2693,7 @@
2684
2693
  --wds-color-fill-surface-modal-backdrop: rgba(82, 81, 80, .5);
2685
2694
  --wds-color-fill-surface-neutral: #f8f6f6;
2686
2695
  --wds-color-fill-surface-overlay: #ffffff;
2696
+ --wds-color-fill-surface-overlay-blur: #ffffff;
2687
2697
  --wds-color-fill-surface-overlay-dark: #151414;
2688
2698
  --wds-color-fill-surface-premium: #f5f7ff;
2689
2699
  --wds-color-fill-surface-raised: #ffffff;
@@ -2978,7 +2988,7 @@
2978
2988
  --wds-icon-button-color-border-standard-secondary: #7896ff;
2979
2989
  --wds-icon-button-color-border-standard-secondary-active: #d5dfff;
2980
2990
  --wds-icon-button-color-border-standard-secondary-disabled: #f0efef;
2981
- --wds-icon-button-color-border-standard-secondary-hover: #eaefff;
2991
+ --wds-icon-button-color-border-standard-secondary-hover: #acbeff;
2982
2992
  --wds-icon-button-color-fill-dark-primary: #151414;
2983
2993
  --wds-icon-button-color-fill-dark-primary-active: #525150;
2984
2994
  --wds-icon-button-color-fill-dark-primary-disabled: #f0efef;
@@ -3019,7 +3029,7 @@
3019
3029
  --wds-icon-button-color-fill-standard-primary-active: #0f2ccf;
3020
3030
  --wds-icon-button-color-fill-standard-primary-disabled: #f0efef;
3021
3031
  --wds-icon-button-color-fill-standard-primary-hover: #1c3fe5;
3022
- --wds-icon-button-color-fill-standard-secondary: #ffffff;
3032
+ --wds-icon-button-color-fill-standard-secondary: rgba(19, 23, 32, 0);
3023
3033
  --wds-icon-button-color-fill-standard-secondary-active: #d5dfff;
3024
3034
  --wds-icon-button-color-fill-standard-secondary-disabled: #f0efef;
3025
3035
  --wds-icon-button-color-fill-standard-secondary-hover: #eaefff;
@@ -3111,8 +3121,8 @@
3111
3121
  --wds-input-border-color-hover: #7896ff;
3112
3122
  --wds-input-border-radius-default-large: 8px;
3113
3123
  --wds-input-border-radius-default-medium: 8px;
3114
- --wds-input-border-radius-default-small: 8px;
3115
- --wds-input-border-radius-default-tiny: 4px;
3124
+ --wds-input-border-radius-default-small: 6px;
3125
+ --wds-input-border-radius-default-tiny: 6px;
3116
3126
  --wds-input-border-radius-round-large: 1000px;
3117
3127
  --wds-input-border-radius-round-medium: 1000px;
3118
3128
  --wds-input-border-radius-round-small: 1000px;
@@ -3121,7 +3131,7 @@
3121
3131
  --wds-input-padding-horizontal-large: 12px;
3122
3132
  --wds-input-padding-horizontal-medium: 8px;
3123
3133
  --wds-input-padding-horizontal-small: 8px;
3124
- --wds-input-padding-horizontal-tiny: 4px;
3134
+ --wds-input-padding-horizontal-tiny: 6px;
3125
3135
  --wds-input-padding-vertical-large: 12px;
3126
3136
  --wds-input-padding-vertical-medium: 7px;
3127
3137
  --wds-input-padding-vertical-small: 6px;
@@ -3139,7 +3149,7 @@
3139
3149
  --wds-input-value-font-line-height-tiny: 16px;
3140
3150
  --wds-input-value-font-size-large: 14px;
3141
3151
  --wds-input-value-font-size-medium: 14px;
3142
- --wds-input-value-font-size-small: 14px;
3152
+ --wds-input-value-font-size-small: 12px;
3143
3153
  --wds-input-value-font-size-tiny: 12px;
3144
3154
  --wds-internal-angle-input-knob-offset: 2px;
3145
3155
  --wds-internal-angle-input-knob-offset-bottom: 4px;
@@ -3418,6 +3428,7 @@
3418
3428
  --wds-segmented-toggle-padding-vertical-small: 4px;
3419
3429
  --wds-segmented-toggle-size-medium: 40px;
3420
3430
  --wds-segmented-toggle-size-small: 30px;
3431
+ --wds-segmented-toggle-size-tiny: 16px;
3421
3432
  --wds-segmented-toggle-value-fill: #151414;
3422
3433
  --wds-segmented-toggle-value-fill-default: #151414;
3423
3434
  --wds-segmented-toggle-value-fill-disabled: #a8a6a5;
@@ -3452,10 +3463,13 @@
3452
3463
  --wds-selector-button-size-large: 46px;
3453
3464
  --wds-selector-button-size-medium: 38px;
3454
3465
  --wds-selector-button-size-small: 30px;
3455
- --wds-selector-button-text-fill: #151414;
3466
+ --wds-selector-button-text-fill-dark: #151414;
3456
3467
  --wds-selector-button-text-fill-disabled: #a8a6a5;
3457
- --wds-selector-button-text-fill-hover: #151414;
3458
- --wds-selector-button-text-fill-pressed: #2f5dff;
3468
+ --wds-selector-button-text-fill-hover-dark: #151414;
3469
+ --wds-selector-button-text-fill-hover-standard: #1c3fe5;
3470
+ --wds-selector-button-text-fill-pressed-dark: #2f5dff;
3471
+ --wds-selector-button-text-fill-pressed-standard: #2f5dff;
3472
+ --wds-selector-button-text-fill-standard: #2f5dff;
3459
3473
  --wds-selector-list-item-padding-horizontal-medium: 24px;
3460
3474
  --wds-selector-list-item-padding-horizontal-small: 16px;
3461
3475
  --wds-selector-list-item-padding-vertical-medium: 8px;
package/odeditor/component.st.css CHANGED
@@ -823,6 +823,7 @@
823
823
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
824
824
  @property st-global(--wds-segmented-toggle-size-medium);
825
825
  @property st-global(--wds-segmented-toggle-size-small);
826
+ @property st-global(--wds-segmented-toggle-size-tiny);
826
827
  @property st-global(--wds-segmented-toggle-value-fill);
827
828
  @property st-global(--wds-segmented-toggle-value-fill-default);
828
829
  @property st-global(--wds-segmented-toggle-value-fill-disabled);
@@ -857,10 +858,13 @@
857
858
  @property st-global(--wds-selector-button-size-large);
858
859
  @property st-global(--wds-selector-button-size-medium);
859
860
  @property st-global(--wds-selector-button-size-small);
860
- @property st-global(--wds-selector-button-text-fill);
861
+ @property st-global(--wds-selector-button-text-fill-dark);
861
862
  @property st-global(--wds-selector-button-text-fill-disabled);
862
- @property st-global(--wds-selector-button-text-fill-hover);
863
- @property st-global(--wds-selector-button-text-fill-pressed);
863
+ @property st-global(--wds-selector-button-text-fill-hover-dark);
864
+ @property st-global(--wds-selector-button-text-fill-hover-standard);
865
+ @property st-global(--wds-selector-button-text-fill-pressed-dark);
866
+ @property st-global(--wds-selector-button-text-fill-pressed-standard);
867
+ @property st-global(--wds-selector-button-text-fill-standard);
864
868
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
865
869
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
866
870
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1715,7 +1719,7 @@
1715
1719
  --wds-icon-button-color-border-standard-secondary: #7896ff;
1716
1720
  --wds-icon-button-color-border-standard-secondary-active: #d5dfff;
1717
1721
  --wds-icon-button-color-border-standard-secondary-disabled: #f0efef;
1718
- --wds-icon-button-color-border-standard-secondary-hover: #eaefff;
1722
+ --wds-icon-button-color-border-standard-secondary-hover: #acbeff;
1719
1723
  --wds-icon-button-color-fill-dark-primary: #151414;
1720
1724
  --wds-icon-button-color-fill-dark-primary-active: #525150;
1721
1725
  --wds-icon-button-color-fill-dark-primary-disabled: #f0efef;
@@ -1756,7 +1760,7 @@
1756
1760
  --wds-icon-button-color-fill-standard-primary-active: #0f2ccf;
1757
1761
  --wds-icon-button-color-fill-standard-primary-disabled: #f0efef;
1758
1762
  --wds-icon-button-color-fill-standard-primary-hover: #1c3fe5;
1759
- --wds-icon-button-color-fill-standard-secondary: #ffffff;
1763
+ --wds-icon-button-color-fill-standard-secondary: rgba(19, 23, 32, 0);
1760
1764
  --wds-icon-button-color-fill-standard-secondary-active: #d5dfff;
1761
1765
  --wds-icon-button-color-fill-standard-secondary-disabled: #f0efef;
1762
1766
  --wds-icon-button-color-fill-standard-secondary-hover: #eaefff;
@@ -1835,8 +1839,8 @@
1835
1839
  --wds-input-border-color-hover: #7896ff;
1836
1840
  --wds-input-border-radius-default-large: 8px;
1837
1841
  --wds-input-border-radius-default-medium: 8px;
1838
- --wds-input-border-radius-default-small: 8px;
1839
- --wds-input-border-radius-default-tiny: 4px;
1842
+ --wds-input-border-radius-default-small: 6px;
1843
+ --wds-input-border-radius-default-tiny: 6px;
1840
1844
  --wds-input-border-radius-round-large: 1000px;
1841
1845
  --wds-input-border-radius-round-medium: 1000px;
1842
1846
  --wds-input-border-radius-round-small: 1000px;
@@ -1845,7 +1849,7 @@
1845
1849
  --wds-input-padding-horizontal-large: 12px;
1846
1850
  --wds-input-padding-horizontal-medium: 8px;
1847
1851
  --wds-input-padding-horizontal-small: 8px;
1848
- --wds-input-padding-horizontal-tiny: 4px;
1852
+ --wds-input-padding-horizontal-tiny: 6px;
1849
1853
  --wds-input-padding-vertical-large: 12px;
1850
1854
  --wds-input-padding-vertical-medium: 7px;
1851
1855
  --wds-input-padding-vertical-small: 6px;
@@ -1863,7 +1867,7 @@
1863
1867
  --wds-input-value-font-line-height-tiny: 16px;
1864
1868
  --wds-input-value-font-size-large: 14px;
1865
1869
  --wds-input-value-font-size-medium: 14px;
1866
- --wds-input-value-font-size-small: 14px;
1870
+ --wds-input-value-font-size-small: 12px;
1867
1871
  --wds-input-value-font-size-tiny: 12px;
1868
1872
  --wds-internal-angle-input-knob-offset: 2px;
1869
1873
  --wds-internal-angle-input-knob-offset-bottom: 4px;
@@ -2142,6 +2146,7 @@
2142
2146
  --wds-segmented-toggle-padding-vertical-small: 4px;
2143
2147
  --wds-segmented-toggle-size-medium: 40px;
2144
2148
  --wds-segmented-toggle-size-small: 30px;
2149
+ --wds-segmented-toggle-size-tiny: 16px;
2145
2150
  --wds-segmented-toggle-value-fill: #151414;
2146
2151
  --wds-segmented-toggle-value-fill-default: #151414;
2147
2152
  --wds-segmented-toggle-value-fill-disabled: #a8a6a5;
@@ -2176,10 +2181,13 @@
2176
2181
  --wds-selector-button-size-large: 46px;
2177
2182
  --wds-selector-button-size-medium: 38px;
2178
2183
  --wds-selector-button-size-small: 30px;
2179
- --wds-selector-button-text-fill: #151414;
2184
+ --wds-selector-button-text-fill-dark: #151414;
2180
2185
  --wds-selector-button-text-fill-disabled: #a8a6a5;
2181
- --wds-selector-button-text-fill-hover: #151414;
2182
- --wds-selector-button-text-fill-pressed: #2f5dff;
2186
+ --wds-selector-button-text-fill-hover-dark: #151414;
2187
+ --wds-selector-button-text-fill-hover-standard: #1c3fe5;
2188
+ --wds-selector-button-text-fill-pressed-dark: #2f5dff;
2189
+ --wds-selector-button-text-fill-pressed-standard: #2f5dff;
2190
+ --wds-selector-button-text-fill-standard: #2f5dff;
2183
2191
  --wds-selector-list-item-padding-horizontal-medium: 24px;
2184
2192
  --wds-selector-list-item-padding-horizontal-small: 16px;
2185
2193
  --wds-selector-list-item-padding-vertical-medium: 8px;
package/odeditor/foundation.st.css CHANGED
@@ -59,6 +59,7 @@
59
59
  @property st-global(--wds-color-blue-0);
60
60
  @property st-global(--wds-color-blue-50);
61
61
  @property st-global(--wds-color-blue-100);
62
+ @property st-global(--wds-color-blue-150);
62
63
  @property st-global(--wds-color-blue-200);
63
64
  @property st-global(--wds-color-blue-250);
64
65
  @property st-global(--wds-color-blue-300);
@@ -291,6 +292,7 @@
291
292
  --wds-color-blue-0: #0f2ccf;
292
293
  --wds-color-blue-50: #1c3fe5;
293
294
  --wds-color-blue-100: #2f5dff;
295
+ --wds-color-blue-150: #116DFF;
294
296
  --wds-color-blue-200: #597dff;
295
297
  --wds-color-blue-250: #7896ff;
296
298
  --wds-color-blue-300: #acbeff;
package/odeditor/semantic.st.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @property st-global(--wds-background-blur-modal);
2
+ @property st-global(--wds-background-blur-surface-overlay);
2
3
  @property st-global(--wds-border-radius-surface-default);
3
4
  @property st-global(--wds-border-radius-surface-modal);
4
5
  @property st-global(--wds-border-radius-surface-modal-backdrop);
@@ -286,6 +287,7 @@
286
287
  @property st-global(--wds-color-fill-surface-modal-backdrop);
287
288
  @property st-global(--wds-color-fill-surface-neutral);
288
289
  @property st-global(--wds-color-fill-surface-overlay);
290
+ @property st-global(--wds-color-fill-surface-overlay-blur);
289
291
  @property st-global(--wds-color-fill-surface-overlay-dark);
290
292
  @property st-global(--wds-color-fill-surface-premium);
291
293
  @property st-global(--wds-color-fill-surface-raised);
@@ -487,6 +489,7 @@
487
489
 
488
490
  .root {
489
491
  --wds-background-blur-modal: 14px;
492
+ --wds-background-blur-surface-overlay: 0px;
490
493
  --wds-border-radius-surface-default: 12px;
491
494
  --wds-border-radius-surface-modal: 12px;
492
495
  --wds-border-radius-surface-modal-backdrop: 0px;
@@ -774,6 +777,7 @@
774
777
  --wds-color-fill-surface-modal-backdrop: rgba(82, 81, 80, .5);
775
778
  --wds-color-fill-surface-neutral: #f8f6f6;
776
779
  --wds-color-fill-surface-overlay: #ffffff;
780
+ --wds-color-fill-surface-overlay-blur: #ffffff;
777
781
  --wds-color-fill-surface-overlay-dark: #151414;
778
782
  --wds-color-fill-surface-premium: #f5f7ff;
779
783
  --wds-color-fill-surface-raised: #ffffff;
package/odeditor-dark/all.css CHANGED
@@ -89,6 +89,7 @@
89
89
  --wds-font-family-display: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
90
90
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
91
91
  --wds-color-text-stage-section: #6f56f9;
92
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.70);
92
93
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
93
94
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
94
95
  --wds-color-fill-stage-section-secondary: #d9d2ff;
@@ -170,7 +171,7 @@
170
171
  --wds-color-white-transparent-5: rgba(0, 0, 0, .05);
171
172
  --wds-color-white-transparent-1: rgba(0, 0, 0, .01);
172
173
  --wds-color-white-transparent-0: rgba(0, 0, 0, 0);
173
- --wds-color-white: #2C2D30;
174
+ --wds-color-white: #212122;
174
175
  --wds-color-red-600: #380D0E;
175
176
  --wds-color-red-500: #4D2324;
176
177
  --wds-color-red-400: #A6464B;
@@ -214,11 +215,12 @@
214
215
  --wds-color-green-0: #D6ECE1;
215
216
  --wds-color-blue-600: #111214;
216
217
  --wds-color-blue-500: #212328;
217
- --wds-color-blue-400: #343F53;
218
+ --wds-color-blue-400: #2D354E;
218
219
  --wds-color-blue-350: #40506C;
219
- --wds-color-blue-300: #485B7E;
220
+ --wds-color-blue-300: #3F4D6E;
220
221
  --wds-color-blue-250: #5B78A9;
221
222
  --wds-color-blue-200: #6F94D4;
223
+ --wds-color-blue-150: #3C67FF;
222
224
  --wds-color-blue-100: #82B0FF;
223
225
  --wds-color-blue-50: #B1CCFF;
224
226
  --wds-color-blue-0: #E0E7FF;
@@ -243,8 +245,8 @@
243
245
  --wds-color-black-100-transparent-10: rgba(255, 255, 255, .1);
244
246
  --wds-color-black-100-transparent-5: rgba(255, 255, 255, .05);
245
247
  --wds-color-black-100-transparent-0: rgba(255, 255, 255, 0);
246
- --wds-color-black-750: #212122;
247
- --wds-color-black-700: #353534;
248
+ --wds-color-black-750: #2D2D2E;
249
+ --wds-color-black-700: #3A3A3B;
248
250
  --wds-color-black-600: #454544;
249
251
  --wds-color-black-550: #666565;
250
252
  --wds-color-black-500: #878685;
@@ -270,6 +272,7 @@
270
272
  --wds-border-radius-200: 4px;
271
273
  --wds-border-radius-100: 2px;
272
274
  --wds-border-radius-0: 0px;
275
+ --wds-background-blur-500: 50px;
273
276
  --wds-background-blur-450: 40px;
274
277
  --wds-background-blur-375: 30px;
275
278
  --wds-background-blur-350: 28px;
@@ -389,6 +392,7 @@
389
392
  --wds-border-radius-surface-modal-backdrop: var(--wds-border-radius-0);
390
393
  --wds-border-radius-surface-modal: var(--wds-border-radius-600);
391
394
  --wds-border-radius-surface-default: var(--wds-border-radius-600);
395
+ --wds-background-blur-surface-overlay: var(--wds-background-blur-500);
392
396
  --wds-background-blur-modal: var(--wds-background-blur-175);
393
397
  --wds-space-viewport-spacing: var(--wds-space-1200);
394
398
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-100);
@@ -852,7 +856,7 @@
852
856
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-semi-bold);
853
857
  --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-black-500);
854
858
  --wds-toggle-button-label-fill-standard-secondary-selected-hover: var(--wds-color-blue-50);
855
- --wds-toggle-button-label-fill-standard-hover: var(--wds-color-blue-50);
859
+ --wds-toggle-button-label-fill-standard-secondary-hover: var(--wds-color-blue-50);
856
860
  --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-black-500);
857
861
  --wds-toggle-button-label-fill-inverted-selected-disabled: var(--wds-color-black-500);
858
862
  --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-black-500);
@@ -864,10 +868,10 @@
864
868
  --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-25);
865
869
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-blue-400);
866
870
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-black-700);
867
- --wds-toggle-button-fill-standard-selected: var(--wds-color-blue-500);
868
- --wds-toggle-button-fill-standard-secondary-selected-hover: var(--wds-color-blue-400);
869
- --wds-toggle-button-fill-standard-secondary-selected: var(--wds-color-blue-500);
870
- --wds-toggle-button-fill-standard-secondary-hover: var(--wds-color-blue-500);
871
+ --wds-toggle-button-fill-standard-selected: var(--wds-color-black-750);
872
+ --wds-toggle-button-fill-standard-secondary-selected-hover: var(--wds-color-blue-250);
873
+ --wds-toggle-button-fill-standard-secondary-selected: var(--wds-color-blue-400);
874
+ --wds-toggle-button-fill-standard-secondary-hover: var(--wds-color-blue-300);
871
875
  --wds-toggle-button-fill-standard-hover: var(--wds-color-black-100-transparent-0);
872
876
  --wds-toggle-button-fill-standard-disabled: var(--wds-color-black-100-transparent-0);
873
877
  --wds-toggle-button-fill-standard: var(--wds-color-black-100-transparent-0);
@@ -876,7 +880,7 @@
876
880
  --wds-toggle-button-fill-inverted: var(--wds-color-black-100-transparent-0);
877
881
  --wds-toggle-button-fill-dark-selected-hover: var(--wds-color-black-550);
878
882
  --wds-toggle-button-fill-dark-selected-disabled: var(--wds-color-black-700);
879
- --wds-toggle-button-fill-dark-selected: var(--wds-color-black-550);
883
+ --wds-toggle-button-fill-dark-selected: var(--wds-color-black-700);
880
884
  --wds-toggle-button-fill-dark-disabled: var(--wds-color-black-100-transparent-0);
881
885
  --wds-toggle-button-fill-dark: var(--wds-color-black-100-transparent-0);
882
886
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
@@ -1072,6 +1076,7 @@
1072
1076
  --wds-select-area-fill-active: var(--wds-color-blue-400);
1073
1077
  --wds-select-area-fill: var(--wds-color-black-750);
1074
1078
  --wds-select-area-border-radius: var(--wds-border-radius-200);
1079
+ --wds-segmented-toggle-size-tiny: var(--wds-space-400);
1075
1080
  --wds-segmented-toggle-size-small: var(--wds-space-750);
1076
1081
  --wds-segmented-toggle-size-medium: var(--wds-space-1000);
1077
1082
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
@@ -1262,7 +1267,7 @@
1262
1267
  --wds-input-padding-vertical-small: var(--wds-space-150);
1263
1268
  --wds-input-padding-vertical-medium: var(--wds-space-175);
1264
1269
  --wds-input-padding-vertical-large: var(--wds-space-300);
1265
- --wds-input-padding-horizontal-tiny: var(--wds-space-100);
1270
+ --wds-input-padding-horizontal-tiny: var(--wds-space-150);
1266
1271
  --wds-input-padding-horizontal-small: var(--wds-space-200);
1267
1272
  --wds-input-padding-horizontal-medium: var(--wds-space-200);
1268
1273
  --wds-input-padding-horizontal-large: var(--wds-space-300);
@@ -1270,8 +1275,8 @@
1270
1275
  --wds-input-border-radius-round-small: var(--wds-border-radius-full);
1271
1276
  --wds-input-border-radius-round-medium: var(--wds-border-radius-full);
1272
1277
  --wds-input-border-radius-round-large: var(--wds-border-radius-full);
1273
- --wds-input-border-radius-default-tiny: var(--wds-border-radius-200);
1274
- --wds-input-border-radius-default-small: var(--wds-border-radius-400);
1278
+ --wds-input-border-radius-default-tiny: var(--wds-border-radius-300);
1279
+ --wds-input-border-radius-default-small: var(--wds-border-radius-300);
1275
1280
  --wds-input-border-radius-default-medium: var(--wds-border-radius-400);
1276
1281
  --wds-input-border-radius-default-large: var(--wds-border-radius-400);
1277
1282
  --wds-input-border-color-disabled: var(--wds-color-black-700);
@@ -1295,6 +1300,7 @@
1295
1300
  --wds-icon-button-color-text-dark-secondary-disabled: var(--wds-color-black-500);
1296
1301
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-black-500);
1297
1302
  --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-black-700);
1303
+ --wds-icon-button-color-fill-standard-secondary: var(--wds-color-black-100-transparent-0);
1298
1304
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-black-700);
1299
1305
  --wds-icon-button-color-fill-premium-secondary-disabled: var(--wds-color-black-700);
1300
1306
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-black-700);
@@ -1610,7 +1616,7 @@
1610
1616
  --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1611
1617
  --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-tiny);
1612
1618
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1613
- --wds-toggle-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary);
1619
+ --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-standard-primary);
1614
1620
  --wds-toggle-button-label-fill-standard: var(--wds-color-text-standard-primary);
1615
1621
  --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary);
1616
1622
  --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary);
@@ -1664,10 +1670,13 @@
1664
1670
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1665
1671
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1666
1672
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
1667
- --wds-selector-button-text-fill-pressed: var(--wds-color-text-primary);
1668
- --wds-selector-button-text-fill-hover: var(--wds-color-text-standard-primary);
1673
+ --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1674
+ --wds-selector-button-text-fill-pressed-standard: var(--wds-color-text-primary);
1675
+ --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
1676
+ --wds-selector-button-text-fill-hover-standard: var(--wds-color-fill-standard-primary-hover);
1677
+ --wds-selector-button-text-fill-hover-dark: var(--wds-color-text-standard-primary);
1669
1678
  --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1670
- --wds-selector-button-text-fill: var(--wds-color-text-standard-primary);
1679
+ --wds-selector-button-text-fill-dark: var(--wds-color-text-standard-primary);
1671
1680
  --wds-selector-button-font-size-small: var(--wds-font-size-body-tiny);
1672
1681
  --wds-selector-button-border-color-pressed: var(--wds-color-border-standard-secondary-active);
1673
1682
  --wds-selector-button-border-color-hover: var(--wds-color-border-standard-primary);
@@ -1752,7 +1761,7 @@
1752
1761
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
1753
1762
  --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1754
1763
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1755
- --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1764
+ --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1756
1765
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
1757
1766
  --wds-input-value-font-size-large: var(--wds-font-size-body-small);
1758
1767
  --wds-input-value-font-line-height-large: var(--wds-font-size-body-small);
@@ -1804,7 +1813,6 @@
1804
1813
  --wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-light-secondary);
1805
1814
  --wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-tertiary-hover);
1806
1815
  --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-tertiary-active);
1807
- --wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1808
1816
  --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1809
1817
  --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
1810
1818
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
package/odeditor-dark/all.scss CHANGED
@@ -188,7 +188,7 @@
188
188
  --wds-color-white-transparent-5: rgba(0, 0, 0, .05);
189
189
  --wds-color-white-transparent-1: rgba(0, 0, 0, .01);
190
190
  --wds-color-white-transparent-0: rgba(0, 0, 0, 0);
191
- --wds-color-white: #2C2D30;
191
+ --wds-color-white: #212122;
192
192
  --wds-color-text-stage-section: #6f56f9;
193
193
  --wds-color-red-600: #380D0E;
194
194
  --wds-color-red-500: #4D2324;
@@ -232,6 +232,7 @@
232
232
  --wds-color-green-100: #53DA98;
233
233
  --wds-color-green-50: #A3E5C5;
234
234
  --wds-color-green-0: #D6ECE1;
235
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.70);
235
236
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
236
237
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
237
238
  --wds-color-fill-stage-section-secondary: #d9d2ff;
@@ -296,16 +297,17 @@
296
297
  --wds-color-border-ai-primary: #ffffff;
297
298
  --wds-color-blue-600: #111214;
298
299
  --wds-color-blue-500: #212328;
299
- --wds-color-blue-400: #343F53;
300
+ --wds-color-blue-400: #2D354E;
300
301
  --wds-color-blue-350: #40506C;
301
- --wds-color-blue-300: #485B7E;
302
+ --wds-color-blue-300: #3F4D6E;
302
303
  --wds-color-blue-250: #5B78A9;
303
304
  --wds-color-blue-200: #6F94D4;
305
+ --wds-color-blue-150: #3C67FF;
304
306
  --wds-color-blue-100: #82B0FF;
305
307
  --wds-color-blue-50: #B1CCFF;
306
308
  --wds-color-blue-0: #E0E7FF;
307
- --wds-color-black-750: #212122;
308
- --wds-color-black-700: #353534;
309
+ --wds-color-black-750: #2D2D2E;
310
+ --wds-color-black-700: #3A3A3B;
309
311
  --wds-color-black-600: #454544;
310
312
  --wds-color-black-550: #666565;
311
313
  --wds-color-black-500: #878685;
@@ -352,6 +354,7 @@
352
354
  --wds-border-radius-200: 4px;
353
355
  --wds-border-radius-100: 2px;
354
356
  --wds-border-radius-0: 0px;
357
+ --wds-background-blur-500: 50px;
355
358
  --wds-background-blur-450: 40px;
356
359
  --wds-background-blur-375: 30px;
357
360
  --wds-background-blur-350: 28px;
@@ -435,7 +438,7 @@
435
438
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-semi-bold);
436
439
  --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-black-500);
437
440
  --wds-toggle-button-label-fill-standard-secondary-selected-hover: var(--wds-color-blue-50);
438
- --wds-toggle-button-label-fill-standard-hover: var(--wds-color-blue-50);
441
+ --wds-toggle-button-label-fill-standard-secondary-hover: var(--wds-color-blue-50);
439
442
  --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-black-500);
440
443
  --wds-toggle-button-label-fill-inverted-selected-disabled: var(--wds-color-black-500);
441
444
  --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-black-500);
@@ -447,10 +450,10 @@
447
450
  --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-25);
448
451
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-blue-400);
449
452
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-black-700);
450
- --wds-toggle-button-fill-standard-selected: var(--wds-color-blue-500);
451
- --wds-toggle-button-fill-standard-secondary-selected-hover: var(--wds-color-blue-400);
452
- --wds-toggle-button-fill-standard-secondary-selected: var(--wds-color-blue-500);
453
- --wds-toggle-button-fill-standard-secondary-hover: var(--wds-color-blue-500);
453
+ --wds-toggle-button-fill-standard-selected: var(--wds-color-black-750);
454
+ --wds-toggle-button-fill-standard-secondary-selected-hover: var(--wds-color-blue-250);
455
+ --wds-toggle-button-fill-standard-secondary-selected: var(--wds-color-blue-400);
456
+ --wds-toggle-button-fill-standard-secondary-hover: var(--wds-color-blue-300);
454
457
  --wds-toggle-button-fill-standard-hover: var(--wds-color-black-100-transparent-0);
455
458
  --wds-toggle-button-fill-standard-disabled: var(--wds-color-black-100-transparent-0);
456
459
  --wds-toggle-button-fill-standard: var(--wds-color-black-100-transparent-0);
@@ -459,7 +462,7 @@
459
462
  --wds-toggle-button-fill-inverted: var(--wds-color-black-100-transparent-0);
460
463
  --wds-toggle-button-fill-dark-selected-hover: var(--wds-color-black-550);
461
464
  --wds-toggle-button-fill-dark-selected-disabled: var(--wds-color-black-700);
462
- --wds-toggle-button-fill-dark-selected: var(--wds-color-black-550);
465
+ --wds-toggle-button-fill-dark-selected: var(--wds-color-black-700);
463
466
  --wds-toggle-button-fill-dark-disabled: var(--wds-color-black-100-transparent-0);
464
467
  --wds-toggle-button-fill-dark: var(--wds-color-black-100-transparent-0);
465
468
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
@@ -735,6 +738,7 @@
735
738
  --wds-select-area-fill-active: var(--wds-color-blue-400);
736
739
  --wds-select-area-fill: var(--wds-color-black-750);
737
740
  --wds-select-area-border-radius: var(--wds-border-radius-200);
741
+ --wds-segmented-toggle-size-tiny: var(--wds-space-400);
738
742
  --wds-segmented-toggle-size-small: var(--wds-space-750);
739
743
  --wds-segmented-toggle-size-medium: var(--wds-space-1000);
740
744
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
@@ -917,7 +921,7 @@
917
921
  --wds-input-padding-vertical-small: var(--wds-space-150);
918
922
  --wds-input-padding-vertical-medium: var(--wds-space-175);
919
923
  --wds-input-padding-vertical-large: var(--wds-space-300);
920
- --wds-input-padding-horizontal-tiny: var(--wds-space-100);
924
+ --wds-input-padding-horizontal-tiny: var(--wds-space-150);
921
925
  --wds-input-padding-horizontal-small: var(--wds-space-200);
922
926
  --wds-input-padding-horizontal-medium: var(--wds-space-200);
923
927
  --wds-input-padding-horizontal-large: var(--wds-space-300);
@@ -925,8 +929,8 @@
925
929
  --wds-input-border-radius-round-small: var(--wds-border-radius-full);
926
930
  --wds-input-border-radius-round-medium: var(--wds-border-radius-full);
927
931
  --wds-input-border-radius-round-large: var(--wds-border-radius-full);
928
- --wds-input-border-radius-default-tiny: var(--wds-border-radius-200);
929
- --wds-input-border-radius-default-small: var(--wds-border-radius-400);
932
+ --wds-input-border-radius-default-tiny: var(--wds-border-radius-300);
933
+ --wds-input-border-radius-default-small: var(--wds-border-radius-300);
930
934
  --wds-input-border-radius-default-medium: var(--wds-border-radius-400);
931
935
  --wds-input-border-radius-default-large: var(--wds-border-radius-400);
932
936
  --wds-input-border-color-disabled: var(--wds-color-black-700);
@@ -971,6 +975,7 @@
971
975
  --wds-icon-button-color-text-dark-secondary-disabled: var(--wds-color-black-500);
972
976
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-black-500);
973
977
  --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-black-700);
978
+ --wds-icon-button-color-fill-standard-secondary: var(--wds-color-black-100-transparent-0);
974
979
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-black-700);
975
980
  --wds-icon-button-color-fill-premium-secondary-disabled: var(--wds-color-black-700);
976
981
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-black-700);
@@ -1506,6 +1511,7 @@
1506
1511
  --wds-badge-border-radius-tiny: var(--wds-border-radius-200);
1507
1512
  --wds-badge-border-radius-small: var(--wds-border-radius-200);
1508
1513
  --wds-badge-border-radius-medium: var(--wds-border-radius-200);
1514
+ --wds-background-blur-surface-overlay: var(--wds-background-blur-500);
1509
1515
  --wds-background-blur-modal: var(--wds-background-blur-175);
1510
1516
  --wds-avatar-group-gap-default: var(--wds-space-100);
1511
1517
  --wds-announcement-modal-padding-vertical: var(--wds-space-1100);
@@ -1594,7 +1600,7 @@
1594
1600
  --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1595
1601
  --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-tiny);
1596
1602
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1597
- --wds-toggle-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary);
1603
+ --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-standard-primary);
1598
1604
  --wds-toggle-button-label-fill-standard: var(--wds-color-text-standard-primary);
1599
1605
  --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary);
1600
1606
  --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary);
@@ -1653,10 +1659,13 @@
1653
1659
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1654
1660
  --wds-shadow-inner-400-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1655
1661
  --wds-shadow-inner-300-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1656
- --wds-selector-button-text-fill-pressed: var(--wds-color-text-primary);
1657
- --wds-selector-button-text-fill-hover: var(--wds-color-text-standard-primary);
1662
+ --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1663
+ --wds-selector-button-text-fill-pressed-standard: var(--wds-color-text-primary);
1664
+ --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
1665
+ --wds-selector-button-text-fill-hover-standard: var(--wds-color-fill-standard-primary-hover);
1666
+ --wds-selector-button-text-fill-hover-dark: var(--wds-color-text-standard-primary);
1658
1667
  --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1659
- --wds-selector-button-text-fill: var(--wds-color-text-standard-primary);
1668
+ --wds-selector-button-text-fill-dark: var(--wds-color-text-standard-primary);
1660
1669
  --wds-selector-button-font-size-small: var(--wds-font-size-body-tiny);
1661
1670
  --wds-selector-button-border-color-pressed: var(--wds-color-border-standard-secondary-active);
1662
1671
  --wds-selector-button-border-color-hover: var(--wds-color-border-standard-primary);
@@ -1741,7 +1750,7 @@
1741
1750
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
1742
1751
  --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1743
1752
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1744
- --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1753
+ --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1745
1754
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
1746
1755
  --wds-input-value-font-size-large: var(--wds-font-size-body-small);
1747
1756
  --wds-input-value-font-line-height-large: var(--wds-font-size-body-small);
@@ -1793,7 +1802,6 @@
1793
1802
  --wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-light-secondary);
1794
1803
  --wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-tertiary-hover);
1795
1804
  --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-tertiary-active);
1796
- --wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1797
1805
  --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1798
1806
  --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
1799
1807
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);