@wix/design-system-tokens 1.179.0 → 1.181.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 (28) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/all.css +9 -3
  3. package/all.scss +7 -1
  4. package/all.st.css +13 -1
  5. package/component.st.css +9 -1
  6. package/odeditor/all.css +15 -9
  7. package/odeditor/all.scss +13 -7
  8. package/odeditor/all.st.css +19 -7
  9. package/odeditor/component.st.css +15 -7
  10. package/odeditor/semantic.st.css +4 -0
  11. package/odeditor-dark/all.css +37 -30
  12. package/odeditor-dark/all.scss +35 -28
  13. package/odeditor-dark/all.st.css +36 -22
  14. package/odeditor-dark/component.st.css +30 -22
  15. package/odeditor-dark/foundation.st.css +2 -0
  16. package/odeditor-dark/semantic.st.css +4 -0
  17. package/package.json +2 -2
  18. package/semantic.st.css +4 -0
  19. package/studio/all.css +7 -1
  20. package/studio/all.scss +6 -0
  21. package/studio/all.st.css +12 -0
  22. package/studio/component.st.css +8 -0
  23. package/studio/semantic.st.css +4 -0
  24. package/wixel/all.css +8 -2
  25. package/wixel/all.scss +6 -0
  26. package/wixel/all.st.css +12 -0
  27. package/wixel/component.st.css +8 -0
  28. package/wixel/semantic.st.css +4 -0
package/odeditor/component.st.css CHANGED
@@ -795,6 +795,7 @@
795
795
  @property st-global(--wds-segmented-toggle-border-hover);
796
796
  @property st-global(--wds-segmented-toggle-border-radius-medium);
797
797
  @property st-global(--wds-segmented-toggle-border-radius-small);
798
+ @property st-global(--wds-segmented-toggle-border-radius-tiny);
798
799
  @property st-global(--wds-segmented-toggle-border-width);
799
800
  @property st-global(--wds-segmented-toggle-border-width-default);
800
801
  @property st-global(--wds-segmented-toggle-border-width-hover);
@@ -823,6 +824,7 @@
823
824
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
824
825
  @property st-global(--wds-segmented-toggle-size-medium);
825
826
  @property st-global(--wds-segmented-toggle-size-small);
827
+ @property st-global(--wds-segmented-toggle-size-tiny);
826
828
  @property st-global(--wds-segmented-toggle-value-fill);
827
829
  @property st-global(--wds-segmented-toggle-value-fill-default);
828
830
  @property st-global(--wds-segmented-toggle-value-fill-disabled);
@@ -1187,6 +1189,8 @@
1187
1189
  @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1188
1190
  @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1189
1191
  @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1192
+ @property st-global(--wds-toggle-button-shadow-spread-secondary);
1193
+ @property st-global(--wds-toggle-button-shadow-spread-tertiary);
1190
1194
  @property st-global(--wds-toggle-button-shadow-x-primary);
1191
1195
  @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1192
1196
  @property st-global(--wds-toggle-button-shadow-x-secondary);
@@ -1718,7 +1722,7 @@
1718
1722
  --wds-icon-button-color-border-standard-secondary: #7896ff;
1719
1723
  --wds-icon-button-color-border-standard-secondary-active: #d5dfff;
1720
1724
  --wds-icon-button-color-border-standard-secondary-disabled: #f0efef;
1721
- --wds-icon-button-color-border-standard-secondary-hover: #eaefff;
1725
+ --wds-icon-button-color-border-standard-secondary-hover: #acbeff;
1722
1726
  --wds-icon-button-color-fill-dark-primary: #151414;
1723
1727
  --wds-icon-button-color-fill-dark-primary-active: #525150;
1724
1728
  --wds-icon-button-color-fill-dark-primary-disabled: #f0efef;
@@ -1759,7 +1763,7 @@
1759
1763
  --wds-icon-button-color-fill-standard-primary-active: #0f2ccf;
1760
1764
  --wds-icon-button-color-fill-standard-primary-disabled: #f0efef;
1761
1765
  --wds-icon-button-color-fill-standard-primary-hover: #1c3fe5;
1762
- --wds-icon-button-color-fill-standard-secondary: #ffffff;
1766
+ --wds-icon-button-color-fill-standard-secondary: rgba(19, 23, 32, 0);
1763
1767
  --wds-icon-button-color-fill-standard-secondary-active: #d5dfff;
1764
1768
  --wds-icon-button-color-fill-standard-secondary-disabled: #f0efef;
1765
1769
  --wds-icon-button-color-fill-standard-secondary-hover: #eaefff;
@@ -1838,8 +1842,8 @@
1838
1842
  --wds-input-border-color-hover: #7896ff;
1839
1843
  --wds-input-border-radius-default-large: 8px;
1840
1844
  --wds-input-border-radius-default-medium: 8px;
1841
- --wds-input-border-radius-default-small: 8px;
1842
- --wds-input-border-radius-default-tiny: 4px;
1845
+ --wds-input-border-radius-default-small: 6px;
1846
+ --wds-input-border-radius-default-tiny: 6px;
1843
1847
  --wds-input-border-radius-round-large: 1000px;
1844
1848
  --wds-input-border-radius-round-medium: 1000px;
1845
1849
  --wds-input-border-radius-round-small: 1000px;
@@ -1848,7 +1852,7 @@
1848
1852
  --wds-input-padding-horizontal-large: 12px;
1849
1853
  --wds-input-padding-horizontal-medium: 8px;
1850
1854
  --wds-input-padding-horizontal-small: 8px;
1851
- --wds-input-padding-horizontal-tiny: 4px;
1855
+ --wds-input-padding-horizontal-tiny: 6px;
1852
1856
  --wds-input-padding-vertical-large: 12px;
1853
1857
  --wds-input-padding-vertical-medium: 7px;
1854
1858
  --wds-input-padding-vertical-small: 6px;
@@ -1866,7 +1870,7 @@
1866
1870
  --wds-input-value-font-line-height-tiny: 16px;
1867
1871
  --wds-input-value-font-size-large: 14px;
1868
1872
  --wds-input-value-font-size-medium: 14px;
1869
- --wds-input-value-font-size-small: 14px;
1873
+ --wds-input-value-font-size-small: 12px;
1870
1874
  --wds-input-value-font-size-tiny: 12px;
1871
1875
  --wds-internal-angle-input-knob-offset: 2px;
1872
1876
  --wds-internal-angle-input-knob-offset-bottom: 4px;
@@ -2117,6 +2121,7 @@
2117
2121
  --wds-segmented-toggle-border-hover: #acbeff;
2118
2122
  --wds-segmented-toggle-border-radius-medium: 6px;
2119
2123
  --wds-segmented-toggle-border-radius-small: 6px;
2124
+ --wds-segmented-toggle-border-radius-tiny: 4px;
2120
2125
  --wds-segmented-toggle-border-width: 0px;
2121
2126
  --wds-segmented-toggle-border-width-default: 0px;
2122
2127
  --wds-segmented-toggle-border-width-hover: 0px;
@@ -2145,6 +2150,7 @@
2145
2150
  --wds-segmented-toggle-padding-vertical-small: 4px;
2146
2151
  --wds-segmented-toggle-size-medium: 40px;
2147
2152
  --wds-segmented-toggle-size-small: 30px;
2153
+ --wds-segmented-toggle-size-tiny: 16px;
2148
2154
  --wds-segmented-toggle-value-fill: #151414;
2149
2155
  --wds-segmented-toggle-value-fill-default: #151414;
2150
2156
  --wds-segmented-toggle-value-fill-disabled: #a8a6a5;
@@ -2430,7 +2436,7 @@
2430
2436
  --wds-toggle-button-border-radius-square-large: 8px;
2431
2437
  --wds-toggle-button-border-radius-square-medium: 8px;
2432
2438
  --wds-toggle-button-border-radius-square-small: 8px;
2433
- --wds-toggle-button-border-radius-square-tiny: 8px;
2439
+ --wds-toggle-button-border-radius-square-tiny: 6px;
2434
2440
  --wds-toggle-button-fill-dark: rgba(19, 23, 32, 0);
2435
2441
  --wds-toggle-button-fill-dark-disabled: rgba(19, 23, 32, 0);
2436
2442
  --wds-toggle-button-fill-dark-hover: #e8e7e7;
@@ -2509,6 +2515,8 @@
2509
2515
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, .2);
2510
2516
  --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, .25);
2511
2517
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, .25);
2518
+ --wds-toggle-button-shadow-spread-secondary: -1.5px;
2519
+ --wds-toggle-button-shadow-spread-tertiary: -0.75px;
2512
2520
  --wds-toggle-button-shadow-x-primary: 1px;
2513
2521
  --wds-toggle-button-shadow-x-primary-inverted: 1px;
2514
2522
  --wds-toggle-button-shadow-x-secondary: 2px;
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;
@@ -271,6 +272,7 @@
271
272
  --wds-border-radius-200: 4px;
272
273
  --wds-border-radius-100: 2px;
273
274
  --wds-border-radius-0: 0px;
275
+ --wds-background-blur-500: 50px;
274
276
  --wds-background-blur-450: 40px;
275
277
  --wds-background-blur-375: 30px;
276
278
  --wds-background-blur-350: 28px;
@@ -298,18 +300,26 @@
298
300
  --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
299
301
  --wds-toggle-button-shadow-y-secondary: 1.2px;
300
302
  --wds-toggle-button-shadow-y-primary-inverted: 5px;
303
+ --wds-toggle-button-shadow-y-primary: 4px;
301
304
  --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
302
305
  --wds-toggle-button-shadow-x-tertiary: 0.4px;
303
306
  --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
304
307
  --wds-toggle-button-shadow-x-secondary: 1.2px;
305
308
  --wds-toggle-button-shadow-x-primary-inverted: -8px;
309
+ --wds-toggle-button-shadow-x-primary: 1px;
310
+ --wds-toggle-button-shadow-spread-tertiary: 0px;
311
+ --wds-toggle-button-shadow-spread-secondary: 0px;
306
312
  --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
307
313
  --wds-toggle-button-shadow-blur-tertiary: 0.6px;
308
314
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
309
315
  --wds-toggle-button-shadow-blur-secondary: 1.7px;
310
316
  --wds-toggle-button-shadow-blur-primary-inverted: 30px;
311
- --wds-toggle-button-inner-shadow-fill-secondary: #404040;
312
- --wds-toggle-button-inner-shadow-fill-primary: #333333;
317
+ --wds-toggle-button-inner-shadow-y-secondary: 1px;
318
+ --wds-toggle-button-inner-shadow-y-primary: 1px;
319
+ --wds-toggle-button-inner-shadow-x-secondary: 1px;
320
+ --wds-toggle-button-inner-shadow-x-primary: 1px;
321
+ --wds-toggle-button-inner-shadow-fill-secondary: #4a4a4c;
322
+ --wds-toggle-button-inner-shadow-fill-primary: #2c2d30;
313
323
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
314
324
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
315
325
  --wds-tabs-selection-height: 3px;
@@ -390,6 +400,7 @@
390
400
  --wds-border-radius-surface-modal-backdrop: var(--wds-border-radius-0);
391
401
  --wds-border-radius-surface-modal: var(--wds-border-radius-600);
392
402
  --wds-border-radius-surface-default: var(--wds-border-radius-600);
403
+ --wds-background-blur-surface-overlay: var(--wds-background-blur-500);
393
404
  --wds-background-blur-modal: var(--wds-background-blur-175);
394
405
  --wds-space-viewport-spacing: var(--wds-space-1200);
395
406
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-100);
@@ -830,15 +841,13 @@
830
841
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
831
842
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
832
843
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
833
- --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-100);
834
- --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-25);
835
- --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-10);
836
- --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-25);
837
- --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-300-transparent-20);
838
- --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-15);
839
- --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-5);
840
- --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-5);
841
- --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-50);
844
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-white-transparent-10);
845
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-blue-500);
846
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-white-transparent-20);
847
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-color-blue-600);
848
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-white-transparent-5);
849
+ --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-0);
850
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-75);
842
851
  --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
843
852
  --wds-toggle-button-padding-tiny: var(--wds-space-200);
844
853
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
@@ -853,22 +862,18 @@
853
862
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-semi-bold);
854
863
  --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-black-500);
855
864
  --wds-toggle-button-label-fill-standard-secondary-selected-hover: var(--wds-color-blue-50);
856
- --wds-toggle-button-label-fill-standard-hover: var(--wds-color-blue-50);
865
+ --wds-toggle-button-label-fill-standard-secondary-hover: var(--wds-color-blue-50);
857
866
  --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-black-500);
858
867
  --wds-toggle-button-label-fill-inverted-selected-disabled: var(--wds-color-black-500);
859
868
  --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-black-500);
860
869
  --wds-toggle-button-label-fill-dark-selected-disabled: var(--wds-color-black-500);
861
870
  --wds-toggle-button-label-fill-dark-disabled: var(--wds-color-black-500);
862
- --wds-toggle-button-inner-shadow-y-secondary: var(--wds-shadow-y-25);
863
- --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-25);
864
- --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-25);
865
- --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-25);
866
871
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-blue-400);
867
872
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-black-700);
868
- --wds-toggle-button-fill-standard-selected: var(--wds-color-blue-500);
869
- --wds-toggle-button-fill-standard-secondary-selected-hover: var(--wds-color-blue-400);
870
- --wds-toggle-button-fill-standard-secondary-selected: var(--wds-color-blue-500);
871
- --wds-toggle-button-fill-standard-secondary-hover: var(--wds-color-blue-500);
873
+ --wds-toggle-button-fill-standard-selected: var(--wds-color-black-750);
874
+ --wds-toggle-button-fill-standard-secondary-selected-hover: var(--wds-color-blue-250);
875
+ --wds-toggle-button-fill-standard-secondary-selected: var(--wds-color-blue-400);
876
+ --wds-toggle-button-fill-standard-secondary-hover: var(--wds-color-blue-300);
872
877
  --wds-toggle-button-fill-standard-hover: var(--wds-color-black-100-transparent-0);
873
878
  --wds-toggle-button-fill-standard-disabled: var(--wds-color-black-100-transparent-0);
874
879
  --wds-toggle-button-fill-standard: var(--wds-color-black-100-transparent-0);
@@ -877,10 +882,10 @@
877
882
  --wds-toggle-button-fill-inverted: var(--wds-color-black-100-transparent-0);
878
883
  --wds-toggle-button-fill-dark-selected-hover: var(--wds-color-black-550);
879
884
  --wds-toggle-button-fill-dark-selected-disabled: var(--wds-color-black-700);
880
- --wds-toggle-button-fill-dark-selected: var(--wds-color-black-550);
885
+ --wds-toggle-button-fill-dark-selected: var(--wds-color-black-700);
881
886
  --wds-toggle-button-fill-dark-disabled: var(--wds-color-black-100-transparent-0);
882
887
  --wds-toggle-button-fill-dark: var(--wds-color-black-100-transparent-0);
883
- --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
888
+ --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-300);
884
889
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-400);
885
890
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-400);
886
891
  --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-400);
@@ -1073,6 +1078,7 @@
1073
1078
  --wds-select-area-fill-active: var(--wds-color-blue-400);
1074
1079
  --wds-select-area-fill: var(--wds-color-black-750);
1075
1080
  --wds-select-area-border-radius: var(--wds-border-radius-200);
1081
+ --wds-segmented-toggle-size-tiny: var(--wds-space-400);
1076
1082
  --wds-segmented-toggle-size-small: var(--wds-space-750);
1077
1083
  --wds-segmented-toggle-size-medium: var(--wds-space-1000);
1078
1084
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
@@ -1093,6 +1099,7 @@
1093
1099
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-0);
1094
1100
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-0);
1095
1101
  --wds-segmented-toggle-border-width: var(--wds-border-width-0);
1102
+ --wds-segmented-toggle-border-radius-tiny: var(--wds-border-radius-200);
1096
1103
  --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-300);
1097
1104
  --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-300);
1098
1105
  --wds-segmented-toggle-border-color-selected: var(--wds-color-black-100-transparent-0);
@@ -1263,7 +1270,7 @@
1263
1270
  --wds-input-padding-vertical-small: var(--wds-space-150);
1264
1271
  --wds-input-padding-vertical-medium: var(--wds-space-175);
1265
1272
  --wds-input-padding-vertical-large: var(--wds-space-300);
1266
- --wds-input-padding-horizontal-tiny: var(--wds-space-100);
1273
+ --wds-input-padding-horizontal-tiny: var(--wds-space-150);
1267
1274
  --wds-input-padding-horizontal-small: var(--wds-space-200);
1268
1275
  --wds-input-padding-horizontal-medium: var(--wds-space-200);
1269
1276
  --wds-input-padding-horizontal-large: var(--wds-space-300);
@@ -1271,8 +1278,8 @@
1271
1278
  --wds-input-border-radius-round-small: var(--wds-border-radius-full);
1272
1279
  --wds-input-border-radius-round-medium: var(--wds-border-radius-full);
1273
1280
  --wds-input-border-radius-round-large: var(--wds-border-radius-full);
1274
- --wds-input-border-radius-default-tiny: var(--wds-border-radius-200);
1275
- --wds-input-border-radius-default-small: var(--wds-border-radius-400);
1281
+ --wds-input-border-radius-default-tiny: var(--wds-border-radius-300);
1282
+ --wds-input-border-radius-default-small: var(--wds-border-radius-300);
1276
1283
  --wds-input-border-radius-default-medium: var(--wds-border-radius-400);
1277
1284
  --wds-input-border-radius-default-large: var(--wds-border-radius-400);
1278
1285
  --wds-input-border-color-disabled: var(--wds-color-black-700);
@@ -1296,6 +1303,7 @@
1296
1303
  --wds-icon-button-color-text-dark-secondary-disabled: var(--wds-color-black-500);
1297
1304
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-black-500);
1298
1305
  --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-black-700);
1306
+ --wds-icon-button-color-fill-standard-secondary: var(--wds-color-black-100-transparent-0);
1299
1307
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-black-700);
1300
1308
  --wds-icon-button-color-fill-premium-secondary-disabled: var(--wds-color-black-700);
1301
1309
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-black-700);
@@ -1611,7 +1619,7 @@
1611
1619
  --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1612
1620
  --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-tiny);
1613
1621
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1614
- --wds-toggle-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary);
1622
+ --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-standard-primary);
1615
1623
  --wds-toggle-button-label-fill-standard: var(--wds-color-text-standard-primary);
1616
1624
  --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary);
1617
1625
  --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary);
@@ -1665,13 +1673,13 @@
1665
1673
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1666
1674
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1667
1675
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
1676
+ --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1668
1677
  --wds-selector-button-text-fill-pressed-standard: var(--wds-color-text-primary);
1669
1678
  --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
1670
1679
  --wds-selector-button-text-fill-hover-standard: var(--wds-color-fill-standard-primary-hover);
1671
1680
  --wds-selector-button-text-fill-hover-dark: var(--wds-color-text-standard-primary);
1672
- --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1673
- --wds-selector-button-text-fill-dark: var(--wds-color-text-standard-primary);
1674
1681
  --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1682
+ --wds-selector-button-text-fill-dark: var(--wds-color-text-standard-primary);
1675
1683
  --wds-selector-button-font-size-small: var(--wds-font-size-body-tiny);
1676
1684
  --wds-selector-button-border-color-pressed: var(--wds-color-border-standard-secondary-active);
1677
1685
  --wds-selector-button-border-color-hover: var(--wds-color-border-standard-primary);
@@ -1756,7 +1764,7 @@
1756
1764
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
1757
1765
  --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1758
1766
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1759
- --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1767
+ --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1760
1768
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
1761
1769
  --wds-input-value-font-size-large: var(--wds-font-size-body-small);
1762
1770
  --wds-input-value-font-line-height-large: var(--wds-font-size-body-small);
@@ -1808,7 +1816,6 @@
1808
1816
  --wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-light-secondary);
1809
1817
  --wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-tertiary-hover);
1810
1818
  --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-tertiary-active);
1811
- --wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1812
1819
  --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1813
1820
  --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
1814
1821
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
package/odeditor-dark/all.scss CHANGED
@@ -15,18 +15,26 @@
15
15
  --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
16
16
  --wds-toggle-button-shadow-y-secondary: 1.2px;
17
17
  --wds-toggle-button-shadow-y-primary-inverted: 5px;
18
+ --wds-toggle-button-shadow-y-primary: 4px;
18
19
  --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
19
20
  --wds-toggle-button-shadow-x-tertiary: 0.4px;
20
21
  --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
21
22
  --wds-toggle-button-shadow-x-secondary: 1.2px;
22
23
  --wds-toggle-button-shadow-x-primary-inverted: -8px;
24
+ --wds-toggle-button-shadow-x-primary: 1px;
25
+ --wds-toggle-button-shadow-spread-tertiary: 0px;
26
+ --wds-toggle-button-shadow-spread-secondary: 0px;
23
27
  --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
24
28
  --wds-toggle-button-shadow-blur-tertiary: 0.6px;
25
29
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
26
30
  --wds-toggle-button-shadow-blur-secondary: 1.7px;
27
31
  --wds-toggle-button-shadow-blur-primary-inverted: 30px;
28
- --wds-toggle-button-inner-shadow-fill-secondary: #404040;
29
- --wds-toggle-button-inner-shadow-fill-primary: #333333;
32
+ --wds-toggle-button-inner-shadow-y-secondary: 1px;
33
+ --wds-toggle-button-inner-shadow-y-primary: 1px;
34
+ --wds-toggle-button-inner-shadow-x-secondary: 1px;
35
+ --wds-toggle-button-inner-shadow-x-primary: 1px;
36
+ --wds-toggle-button-inner-shadow-fill-secondary: #4a4a4c;
37
+ --wds-toggle-button-inner-shadow-fill-primary: #2c2d30;
30
38
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
31
39
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
32
40
  --wds-tabs-selection-height: 3px;
@@ -232,6 +240,7 @@
232
240
  --wds-color-green-100: #53DA98;
233
241
  --wds-color-green-50: #A3E5C5;
234
242
  --wds-color-green-0: #D6ECE1;
243
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.70);
235
244
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
236
245
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
237
246
  --wds-color-fill-stage-section-secondary: #d9d2ff;
@@ -353,6 +362,7 @@
353
362
  --wds-border-radius-200: 4px;
354
363
  --wds-border-radius-100: 2px;
355
364
  --wds-border-radius-0: 0px;
365
+ --wds-background-blur-500: 50px;
356
366
  --wds-background-blur-450: 40px;
357
367
  --wds-background-blur-375: 30px;
358
368
  --wds-background-blur-350: 28px;
@@ -413,15 +423,13 @@
413
423
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
414
424
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
415
425
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
416
- --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-100);
417
- --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-25);
418
- --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-10);
419
- --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-25);
420
- --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-300-transparent-20);
421
- --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-15);
422
- --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-5);
423
- --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-5);
424
- --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-50);
426
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-white-transparent-10);
427
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-blue-500);
428
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-white-transparent-20);
429
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-color-blue-600);
430
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-white-transparent-5);
431
+ --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-0);
432
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-75);
425
433
  --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
426
434
  --wds-toggle-button-padding-tiny: var(--wds-space-200);
427
435
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
@@ -436,22 +444,18 @@
436
444
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-semi-bold);
437
445
  --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-black-500);
438
446
  --wds-toggle-button-label-fill-standard-secondary-selected-hover: var(--wds-color-blue-50);
439
- --wds-toggle-button-label-fill-standard-hover: var(--wds-color-blue-50);
447
+ --wds-toggle-button-label-fill-standard-secondary-hover: var(--wds-color-blue-50);
440
448
  --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-black-500);
441
449
  --wds-toggle-button-label-fill-inverted-selected-disabled: var(--wds-color-black-500);
442
450
  --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-black-500);
443
451
  --wds-toggle-button-label-fill-dark-selected-disabled: var(--wds-color-black-500);
444
452
  --wds-toggle-button-label-fill-dark-disabled: var(--wds-color-black-500);
445
- --wds-toggle-button-inner-shadow-y-secondary: var(--wds-shadow-y-25);
446
- --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-25);
447
- --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-25);
448
- --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-25);
449
453
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-blue-400);
450
454
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-black-700);
451
- --wds-toggle-button-fill-standard-selected: var(--wds-color-blue-500);
452
- --wds-toggle-button-fill-standard-secondary-selected-hover: var(--wds-color-blue-400);
453
- --wds-toggle-button-fill-standard-secondary-selected: var(--wds-color-blue-500);
454
- --wds-toggle-button-fill-standard-secondary-hover: var(--wds-color-blue-500);
455
+ --wds-toggle-button-fill-standard-selected: var(--wds-color-black-750);
456
+ --wds-toggle-button-fill-standard-secondary-selected-hover: var(--wds-color-blue-250);
457
+ --wds-toggle-button-fill-standard-secondary-selected: var(--wds-color-blue-400);
458
+ --wds-toggle-button-fill-standard-secondary-hover: var(--wds-color-blue-300);
455
459
  --wds-toggle-button-fill-standard-hover: var(--wds-color-black-100-transparent-0);
456
460
  --wds-toggle-button-fill-standard-disabled: var(--wds-color-black-100-transparent-0);
457
461
  --wds-toggle-button-fill-standard: var(--wds-color-black-100-transparent-0);
@@ -460,10 +464,10 @@
460
464
  --wds-toggle-button-fill-inverted: var(--wds-color-black-100-transparent-0);
461
465
  --wds-toggle-button-fill-dark-selected-hover: var(--wds-color-black-550);
462
466
  --wds-toggle-button-fill-dark-selected-disabled: var(--wds-color-black-700);
463
- --wds-toggle-button-fill-dark-selected: var(--wds-color-black-550);
467
+ --wds-toggle-button-fill-dark-selected: var(--wds-color-black-700);
464
468
  --wds-toggle-button-fill-dark-disabled: var(--wds-color-black-100-transparent-0);
465
469
  --wds-toggle-button-fill-dark: var(--wds-color-black-100-transparent-0);
466
- --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
470
+ --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-300);
467
471
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-400);
468
472
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-400);
469
473
  --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-400);
@@ -736,6 +740,7 @@
736
740
  --wds-select-area-fill-active: var(--wds-color-blue-400);
737
741
  --wds-select-area-fill: var(--wds-color-black-750);
738
742
  --wds-select-area-border-radius: var(--wds-border-radius-200);
743
+ --wds-segmented-toggle-size-tiny: var(--wds-space-400);
739
744
  --wds-segmented-toggle-size-small: var(--wds-space-750);
740
745
  --wds-segmented-toggle-size-medium: var(--wds-space-1000);
741
746
  --wds-segmented-toggle-padding-vertical-small: var(--wds-space-100);
@@ -756,6 +761,7 @@
756
761
  --wds-segmented-toggle-border-width-hover: var(--wds-border-width-0);
757
762
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-0);
758
763
  --wds-segmented-toggle-border-width: var(--wds-border-width-0);
764
+ --wds-segmented-toggle-border-radius-tiny: var(--wds-border-radius-200);
759
765
  --wds-segmented-toggle-border-radius-small: var(--wds-border-radius-300);
760
766
  --wds-segmented-toggle-border-radius-medium: var(--wds-border-radius-300);
761
767
  --wds-segmented-toggle-border-color-selected: var(--wds-color-black-100-transparent-0);
@@ -918,7 +924,7 @@
918
924
  --wds-input-padding-vertical-small: var(--wds-space-150);
919
925
  --wds-input-padding-vertical-medium: var(--wds-space-175);
920
926
  --wds-input-padding-vertical-large: var(--wds-space-300);
921
- --wds-input-padding-horizontal-tiny: var(--wds-space-100);
927
+ --wds-input-padding-horizontal-tiny: var(--wds-space-150);
922
928
  --wds-input-padding-horizontal-small: var(--wds-space-200);
923
929
  --wds-input-padding-horizontal-medium: var(--wds-space-200);
924
930
  --wds-input-padding-horizontal-large: var(--wds-space-300);
@@ -926,8 +932,8 @@
926
932
  --wds-input-border-radius-round-small: var(--wds-border-radius-full);
927
933
  --wds-input-border-radius-round-medium: var(--wds-border-radius-full);
928
934
  --wds-input-border-radius-round-large: var(--wds-border-radius-full);
929
- --wds-input-border-radius-default-tiny: var(--wds-border-radius-200);
930
- --wds-input-border-radius-default-small: var(--wds-border-radius-400);
935
+ --wds-input-border-radius-default-tiny: var(--wds-border-radius-300);
936
+ --wds-input-border-radius-default-small: var(--wds-border-radius-300);
931
937
  --wds-input-border-radius-default-medium: var(--wds-border-radius-400);
932
938
  --wds-input-border-radius-default-large: var(--wds-border-radius-400);
933
939
  --wds-input-border-color-disabled: var(--wds-color-black-700);
@@ -972,6 +978,7 @@
972
978
  --wds-icon-button-color-text-dark-secondary-disabled: var(--wds-color-black-500);
973
979
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-black-500);
974
980
  --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-black-700);
981
+ --wds-icon-button-color-fill-standard-secondary: var(--wds-color-black-100-transparent-0);
975
982
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-black-700);
976
983
  --wds-icon-button-color-fill-premium-secondary-disabled: var(--wds-color-black-700);
977
984
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-black-700);
@@ -1507,6 +1514,7 @@
1507
1514
  --wds-badge-border-radius-tiny: var(--wds-border-radius-200);
1508
1515
  --wds-badge-border-radius-small: var(--wds-border-radius-200);
1509
1516
  --wds-badge-border-radius-medium: var(--wds-border-radius-200);
1517
+ --wds-background-blur-surface-overlay: var(--wds-background-blur-500);
1510
1518
  --wds-background-blur-modal: var(--wds-background-blur-175);
1511
1519
  --wds-avatar-group-gap-default: var(--wds-space-100);
1512
1520
  --wds-announcement-modal-padding-vertical: var(--wds-space-1100);
@@ -1595,7 +1603,7 @@
1595
1603
  --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1596
1604
  --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-tiny);
1597
1605
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1598
- --wds-toggle-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary);
1606
+ --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-standard-primary);
1599
1607
  --wds-toggle-button-label-fill-standard: var(--wds-color-text-standard-primary);
1600
1608
  --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary);
1601
1609
  --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary);
@@ -1745,7 +1753,7 @@
1745
1753
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
1746
1754
  --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1747
1755
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1748
- --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1756
+ --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1749
1757
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
1750
1758
  --wds-input-value-font-size-large: var(--wds-font-size-body-small);
1751
1759
  --wds-input-value-font-line-height-large: var(--wds-font-size-body-small);
@@ -1797,7 +1805,6 @@
1797
1805
  --wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-light-secondary);
1798
1806
  --wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-tertiary-hover);
1799
1807
  --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-tertiary-active);
1800
- --wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1801
1808
  --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1802
1809
  --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
1803
1810
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);