@syncfusion/ej2-image-editor 26.1.41 → 26.2.5

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 (53) hide show
  1. package/dist/ej2-image-editor.umd.min.js +2 -2
  2. package/dist/ej2-image-editor.umd.min.js.map +1 -1
  3. package/dist/es6/ej2-image-editor.es2015.js +83 -19
  4. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  5. package/dist/es6/ej2-image-editor.es5.js +82 -18
  6. package/dist/es6/ej2-image-editor.es5.js.map +1 -1
  7. package/dist/global/ej2-image-editor.min.js +2 -2
  8. package/dist/global/ej2-image-editor.min.js.map +1 -1
  9. package/dist/global/index.d.ts +1 -1
  10. package/hotfix/26.1.35_Vol2.txt +1 -0
  11. package/package.json +12 -12
  12. package/src/image-editor/action/selection.js +6 -3
  13. package/src/image-editor/action/transform.js +2 -1
  14. package/src/image-editor/base/image-editor.js +56 -7
  15. package/src/image-editor/renderer/toolbar.js +18 -7
  16. package/styles/bootstrap-dark.css +0 -2
  17. package/styles/bootstrap.css +0 -2
  18. package/styles/bootstrap4.css +2 -0
  19. package/styles/bootstrap5-dark.css +2 -0
  20. package/styles/bootstrap5.css +2 -0
  21. package/styles/fabric-dark.css +1 -2
  22. package/styles/fabric.css +1 -2
  23. package/styles/fluent-dark.css +3 -2
  24. package/styles/fluent.css +3 -2
  25. package/styles/fluent2.css +26 -12
  26. package/styles/highcontrast-light.css +3 -2
  27. package/styles/highcontrast.css +3 -2
  28. package/styles/image-editor/_layout.scss +16 -0
  29. package/styles/image-editor/_theme.scss +34 -1
  30. package/styles/image-editor/bootstrap-dark.css +0 -2
  31. package/styles/image-editor/bootstrap.css +0 -2
  32. package/styles/image-editor/bootstrap4.css +2 -0
  33. package/styles/image-editor/bootstrap5-dark.css +2 -0
  34. package/styles/image-editor/bootstrap5.css +2 -0
  35. package/styles/image-editor/fabric-dark.css +1 -2
  36. package/styles/image-editor/fabric.css +1 -2
  37. package/styles/image-editor/fluent-dark.css +3 -2
  38. package/styles/image-editor/fluent.css +3 -2
  39. package/styles/image-editor/fluent2.css +26 -12
  40. package/styles/image-editor/highcontrast-light.css +3 -2
  41. package/styles/image-editor/highcontrast.css +3 -2
  42. package/styles/image-editor/material-dark.css +0 -2
  43. package/styles/image-editor/material.css +0 -2
  44. package/styles/image-editor/material3-dark.css +2 -3
  45. package/styles/image-editor/material3.css +2 -3
  46. package/styles/image-editor/tailwind-dark.css +2 -2
  47. package/styles/image-editor/tailwind.css +2 -2
  48. package/styles/material-dark.css +0 -2
  49. package/styles/material.css +0 -2
  50. package/styles/material3-dark.css +2 -3
  51. package/styles/material3.css +2 -3
  52. package/styles/tailwind-dark.css +2 -2
  53. package/styles/tailwind.css +2 -2
package/styles/image-editor/_theme.scss CHANGED
@@ -36,10 +36,13 @@
36
36
  background: inherit;
37
37
  border: none;
38
38
  margin-top: $image-editor-ddbtn-margin-top;
39
- @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' $skin-name == 'bootstrap5-dark' {
39
+ @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
40
40
  background: $tbar-default-bg;
41
41
  color: $tbar-default-icon-color;
42
42
  }
43
+ @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
44
+ border: 2px solid #000;
45
+ }
43
46
  @if $skin-name == 'Material3' {
44
47
  box-shadow: none;
45
48
  }
@@ -58,6 +61,36 @@
58
61
  background: $btn-focus-bgcolor;
59
62
  box-shadow: none;
60
63
  color: $btn-focus-color;
64
+ @if $skin-name == 'FluentUI' {
65
+ outline: none !important; /* stylelint-disable-line declaration-no-important */
66
+ box-shadow: inset 0 0 0 1px !important; /* stylelint-disable-line declaration-no-important */
67
+ }
68
+ @else if $skin-name == 'FluentUI' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
69
+ outline: none !important; /* stylelint-disable-line declaration-no-important */
70
+ }
71
+ @else if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
72
+ outline: none !important; /* stylelint-disable-line declaration-no-important */
73
+ border: 2px solid #fff !important; /* stylelint-disable-line declaration-no-important */
74
+ }
75
+ @else if $skin-name == 'bootstrap4' {
76
+ $color-rgba: rgba(mix(lighten($btn-focus-bgcolor, 50%), $btn-focus-border-color, 15%), .5);
77
+ box-shadow: 0 0 0 .25em $color-rgba !important; /* stylelint-disable-line declaration-no-important */
78
+ }
79
+ @else if $skin-name == 'bootstrap5' {
80
+ box-shadow: $secondary-shadow-focus !important; /* stylelint-disable-line declaration-no-important */
81
+ }
82
+ @else if $skin-name == 'Material3' {
83
+ box-shadow: $shadow-focus-ring1 !important; /* stylelint-disable-line declaration-no-important */
84
+ }
85
+ @else if $skin-name == 'tailwind' {
86
+ box-shadow: 0 0 0 1px #4f46e5 !important; /* stylelint-disable-line declaration-no-important */
87
+ }
88
+ }
89
+
90
+ &:focus-visible {
91
+ @if $skin-name == 'fluent2' {
92
+ box-shadow: $keyboard-focus !important; /* stylelint-disable-line declaration-no-important */
93
+ }
61
94
  }
62
95
 
63
96
  &:active {
package/styles/image-editor/bootstrap-dark.css CHANGED
@@ -757,8 +757,6 @@
757
757
  background: inherit;
758
758
  border: none;
759
759
  margin-top: 2px;
760
- background: #131313;
761
- color: #f0f0f0;
762
760
  }
763
761
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
764
762
  display: none !important; /* stylelint-disable-line declaration-no-important */
package/styles/image-editor/bootstrap.css CHANGED
@@ -759,8 +759,6 @@
759
759
  background: inherit;
760
760
  border: none;
761
761
  margin-top: 2px;
762
- background: #f8f8f8;
763
- color: #333;
764
762
  }
765
763
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
766
764
  display: none !important; /* stylelint-disable-line declaration-no-important */
package/styles/image-editor/bootstrap4.css CHANGED
@@ -770,6 +770,8 @@
770
770
  -webkit-box-shadow: none;
771
771
  box-shadow: none;
772
772
  color: #fff;
773
+ -webkit-box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important;
774
+ box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important; /* stylelint-disable-line declaration-no-important */
773
775
  }
774
776
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
775
777
  background: #545b62;
package/styles/image-editor/bootstrap5-dark.css CHANGED
@@ -787,6 +787,8 @@
787
787
  -webkit-box-shadow: none;
788
788
  box-shadow: none;
789
789
  color: #fff;
790
+ -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important;
791
+ box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important; /* stylelint-disable-line declaration-no-important */
790
792
  }
791
793
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
792
794
  background: #565e64;
package/styles/image-editor/bootstrap5.css CHANGED
@@ -787,6 +787,8 @@
787
787
  -webkit-box-shadow: none;
788
788
  box-shadow: none;
789
789
  color: #fff;
790
+ -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important;
791
+ box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important; /* stylelint-disable-line declaration-no-important */
790
792
  }
791
793
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
792
794
  background: #565e64;
package/styles/image-editor/fabric-dark.css CHANGED
@@ -759,8 +759,6 @@
759
759
  background: inherit;
760
760
  border: none;
761
761
  margin-top: 0;
762
- background: #333232;
763
- color: #dadada;
764
762
  }
765
763
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
766
764
  display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -776,6 +774,7 @@
776
774
  -webkit-box-shadow: none;
777
775
  box-shadow: none;
778
776
  color: #fff;
777
+ outline: none !important; /* stylelint-disable-line declaration-no-important */
779
778
  }
780
779
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
781
780
  background: #6f6c6c;
package/styles/image-editor/fabric.css CHANGED
@@ -762,8 +762,6 @@
762
762
  background: inherit;
763
763
  border: none;
764
764
  margin-top: 0;
765
- background: #fff;
766
- color: #333;
767
765
  }
768
766
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
769
767
  display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -779,6 +777,7 @@
779
777
  -webkit-box-shadow: none;
780
778
  box-shadow: none;
781
779
  color: #333;
780
+ outline: none !important; /* stylelint-disable-line declaration-no-important */
782
781
  }
783
782
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
784
783
  background: #c8c8c8;
package/styles/image-editor/fluent-dark.css CHANGED
@@ -772,8 +772,6 @@
772
772
  background: inherit;
773
773
  border: none;
774
774
  margin-top: 2px;
775
- background: #252423;
776
- color: #a19f9d;
777
775
  }
778
776
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
779
777
  display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -789,6 +787,9 @@
789
787
  -webkit-box-shadow: none;
790
788
  box-shadow: none;
791
789
  color: #fff;
790
+ outline: none !important; /* stylelint-disable-line declaration-no-important */
791
+ -webkit-box-shadow: inset 0 0 0 1px !important;
792
+ box-shadow: inset 0 0 0 1px !important; /* stylelint-disable-line declaration-no-important */
792
793
  }
793
794
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
794
795
  background: #292827;
package/styles/image-editor/fluent.css CHANGED
@@ -772,8 +772,6 @@
772
772
  background: inherit;
773
773
  border: none;
774
774
  margin-top: 2px;
775
- background: #f3f2f1;
776
- color: #605e5c;
777
775
  }
778
776
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
779
777
  display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -789,6 +787,9 @@
789
787
  -webkit-box-shadow: none;
790
788
  box-shadow: none;
791
789
  color: #323130;
790
+ outline: none !important; /* stylelint-disable-line declaration-no-important */
791
+ -webkit-box-shadow: inset 0 0 0 1px !important;
792
+ box-shadow: inset 0 0 0 1px !important; /* stylelint-disable-line declaration-no-important */
792
793
  }
793
794
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
794
795
  background: #edebe9;
package/styles/image-editor/fluent2.css CHANGED
@@ -47,7 +47,7 @@
47
47
  --color-sf-flyout-bg-color-pressed: #e0e0e0;
48
48
  --color-sf-flyout-bg-color-selected: #ebebeb;
49
49
  --color-sf-flyout-bg-color-focus: #f5f5f5;
50
- --color-sf-overlay-bg-color: #000;
50
+ --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
51
51
  --color-sf-table-bg-color-hover: #f5f5f5;
52
52
  --color-sf-table-bg-color-pressed: #e0e0e0;
53
53
  --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
369
369
  --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
370
370
  --color-sf-flyout-bg-color-selected: #383838;
371
371
  --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
372
- --color-sf-overlay-bg-color: rgba($black, .4);
372
+ --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
373
373
  --color-sf-table-bg-color-hover: #383838;
374
374
  --color-sf-table-bg-color-pressed: #2e2e2e;
375
375
  --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
711
711
  --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
712
712
  --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
713
713
  --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
714
- --color-sf-overlay-bg-color: rgba($black, .4);
715
- --color-sf-table-bg-color-hover: var(--color-sf-black);
716
- --color-sf-table-bg-color-pressed: var(--color-sf-black);
714
+ --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
715
+ --color-sf-table-bg-color-hover: #1a3bff;
716
+ --color-sf-table-bg-color-pressed: #1a3bff;
717
717
  --color-sf-table-bg-color-selected: #1a3bff;
718
718
  --color-sf-content-text-color: #fff;
719
719
  --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
732
732
  --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
733
733
  --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
734
734
  --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
735
- --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
736
- --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
737
- --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
735
+ --color-sf-table-text-color-hover: #000;
736
+ --color-sf-table-text-color-pressed: #000;
737
+ --color-sf-table-text-color-selected: #000;
738
738
  --color-sf-icon-color: #fff;
739
- --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
740
- --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
739
+ --color-sf-icon-color-hover: #000;
740
+ --color-sf-icon-color-pressed: #000;
741
741
  --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
742
742
  --color-sf-border-light: #fff;
743
743
  --color-sf-border: var(--color-sf-border-light);
@@ -1345,6 +1345,11 @@
1345
1345
  .e-image-editor.e-bigger .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
1346
1346
  line-height: 1;
1347
1347
  }
1348
+ .e-bigger .e-image-editor .e-dropdown-btn.e-ie-ddb-popup,
1349
+ .e-image-editor.e-bigger .e-dropdown-btn.e-ie-ddb-popup {
1350
+ padding-left: 16px;
1351
+ }
1352
+
1348
1353
  .e-image-editor {
1349
1354
  border: 1px solid var(--color-sf-border-light);
1350
1355
  position: relative;
@@ -1514,6 +1519,13 @@
1514
1519
  margin-left: calc(50% - 137px);
1515
1520
  height: 54px !important; /* stylelint-disable-line declaration-no-important */
1516
1521
  }
1522
+ .e-image-editor .e-dropdown-btn.e-ie-ddb-popup {
1523
+ padding-left: 14px;
1524
+ }
1525
+ .e-image-editor .e-dropdown-btn, .e-image-editor .e-dropdown-btn span {
1526
+ font-weight: normal;
1527
+ }
1528
+
1517
1529
  .e-ie-straighten-value-span,
1518
1530
  .e-ie-straighten-span,
1519
1531
  .e-ie-toolbar-straighten {
@@ -1807,8 +1819,6 @@
1807
1819
  background: inherit;
1808
1820
  border: none;
1809
1821
  margin-top: 0;
1810
- background: var(--color-sf-content-bg-color-alt1);
1811
- color: var(--color-sf-icon-color);
1812
1822
  }
1813
1823
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
1814
1824
  display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -1825,6 +1835,10 @@
1825
1835
  box-shadow: none;
1826
1836
  color: var(--color-sf-secondary-text-color-hover);
1827
1837
  }
1838
+ .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus-visible {
1839
+ -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1) !important;
1840
+ box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1) !important; /* stylelint-disable-line declaration-no-important */
1841
+ }
1828
1842
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
1829
1843
  background: var(--color-sf-secondary-bg-color-pressed);
1830
1844
  -webkit-box-shadow: none;
package/styles/image-editor/highcontrast-light.css CHANGED
@@ -755,8 +755,7 @@
755
755
  background: inherit;
756
756
  border: none;
757
757
  margin-top: 0;
758
- background: #fff;
759
- color: #000;
758
+ border: 2px solid #000;
760
759
  }
761
760
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
762
761
  display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -772,6 +771,8 @@
772
771
  -webkit-box-shadow: none;
773
772
  box-shadow: none;
774
773
  color: #000;
774
+ outline: none !important; /* stylelint-disable-line declaration-no-important */
775
+ border: 2px solid #fff !important; /* stylelint-disable-line declaration-no-important */
775
776
  }
776
777
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
777
778
  background: #400074;
package/styles/image-editor/highcontrast.css CHANGED
@@ -764,8 +764,7 @@
764
764
  background: inherit;
765
765
  border: none;
766
766
  margin-top: 0;
767
- background: #000;
768
- color: #fff;
767
+ border: 2px solid #000;
769
768
  }
770
769
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
771
770
  display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -781,6 +780,8 @@
781
780
  -webkit-box-shadow: none;
782
781
  box-shadow: none;
783
782
  color: #fff;
783
+ outline: none !important; /* stylelint-disable-line declaration-no-important */
784
+ border: 2px solid #fff !important; /* stylelint-disable-line declaration-no-important */
784
785
  }
785
786
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
786
787
  background: #ffd939;
package/styles/image-editor/material-dark.css CHANGED
@@ -781,8 +781,6 @@
781
781
  background: inherit;
782
782
  border: none;
783
783
  margin-top: 0;
784
- background: #212121;
785
- color: #fff;
786
784
  }
787
785
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
788
786
  display: none !important; /* stylelint-disable-line declaration-no-important */
package/styles/image-editor/material.css CHANGED
@@ -789,8 +789,6 @@
789
789
  background: inherit;
790
790
  border: none;
791
791
  margin-top: 0;
792
- background: #fafafa;
793
- color: rgba(0, 0, 0, 0.54);
794
792
  }
795
793
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
796
794
  display: none !important; /* stylelint-disable-line declaration-no-important */
package/styles/image-editor/material3-dark.css CHANGED
@@ -867,9 +867,6 @@
867
867
  background: inherit;
868
868
  border: none;
869
869
  margin-top: 0;
870
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
871
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
872
- color: rgba(var(--color-sf-on-surface-variant));
873
870
  -webkit-box-shadow: none;
874
871
  box-shadow: none;
875
872
  }
@@ -888,6 +885,8 @@
888
885
  -webkit-box-shadow: none;
889
886
  box-shadow: none;
890
887
  color: rgba(var(--color-sf-on-surface));
888
+ -webkit-box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff !important;
889
+ box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff !important; /* stylelint-disable-line declaration-no-important */
891
890
  }
892
891
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
893
892
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
package/styles/image-editor/material3.css CHANGED
@@ -923,9 +923,6 @@
923
923
  background: inherit;
924
924
  border: none;
925
925
  margin-top: 0;
926
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
927
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
928
- color: rgba(var(--color-sf-on-surface-variant));
929
926
  -webkit-box-shadow: none;
930
927
  box-shadow: none;
931
928
  }
@@ -944,6 +941,8 @@
944
941
  -webkit-box-shadow: none;
945
942
  box-shadow: none;
946
943
  color: rgba(var(--color-sf-on-surface));
944
+ -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000 !important;
945
+ box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000 !important; /* stylelint-disable-line declaration-no-important */
947
946
  }
948
947
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
949
948
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
package/styles/image-editor/tailwind-dark.css CHANGED
@@ -767,8 +767,6 @@
767
767
  background: inherit;
768
768
  border: none;
769
769
  margin-top: 2px;
770
- background: #374151;
771
- color: #d1d5db;
772
770
  }
773
771
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
774
772
  display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -784,6 +782,8 @@
784
782
  -webkit-box-shadow: none;
785
783
  box-shadow: none;
786
784
  color: #fff;
785
+ -webkit-box-shadow: 0 0 0 1px #4f46e5 !important;
786
+ box-shadow: 0 0 0 1px #4f46e5 !important; /* stylelint-disable-line declaration-no-important */
787
787
  }
788
788
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
789
789
  background: #4b5563;
package/styles/image-editor/tailwind.css CHANGED
@@ -767,8 +767,6 @@
767
767
  background: inherit;
768
768
  border: none;
769
769
  margin-top: 2px;
770
- background: #f3f4f6;
771
- color: #6b7280;
772
770
  }
773
771
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
774
772
  display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -784,6 +782,8 @@
784
782
  -webkit-box-shadow: none;
785
783
  box-shadow: none;
786
784
  color: #374151;
785
+ -webkit-box-shadow: 0 0 0 1px #4f46e5 !important;
786
+ box-shadow: 0 0 0 1px #4f46e5 !important; /* stylelint-disable-line declaration-no-important */
787
787
  }
788
788
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
789
789
  background: #e5e7eb;
package/styles/material-dark.css CHANGED
@@ -781,8 +781,6 @@
781
781
  background: inherit;
782
782
  border: none;
783
783
  margin-top: 0;
784
- background: #212121;
785
- color: #fff;
786
784
  }
787
785
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
788
786
  display: none !important; /* stylelint-disable-line declaration-no-important */
package/styles/material.css CHANGED
@@ -789,8 +789,6 @@
789
789
  background: inherit;
790
790
  border: none;
791
791
  margin-top: 0;
792
- background: #fafafa;
793
- color: rgba(0, 0, 0, 0.54);
794
792
  }
795
793
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
796
794
  display: none !important; /* stylelint-disable-line declaration-no-important */
package/styles/material3-dark.css CHANGED
@@ -867,9 +867,6 @@
867
867
  background: inherit;
868
868
  border: none;
869
869
  margin-top: 0;
870
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
871
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
872
- color: rgba(var(--color-sf-on-surface-variant));
873
870
  -webkit-box-shadow: none;
874
871
  box-shadow: none;
875
872
  }
@@ -888,6 +885,8 @@
888
885
  -webkit-box-shadow: none;
889
886
  box-shadow: none;
890
887
  color: rgba(var(--color-sf-on-surface));
888
+ -webkit-box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff !important;
889
+ box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff !important; /* stylelint-disable-line declaration-no-important */
891
890
  }
892
891
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
893
892
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
package/styles/material3.css CHANGED
@@ -923,9 +923,6 @@
923
923
  background: inherit;
924
924
  border: none;
925
925
  margin-top: 0;
926
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
927
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
928
- color: rgba(var(--color-sf-on-surface-variant));
929
926
  -webkit-box-shadow: none;
930
927
  box-shadow: none;
931
928
  }
@@ -944,6 +941,8 @@
944
941
  -webkit-box-shadow: none;
945
942
  box-shadow: none;
946
943
  color: rgba(var(--color-sf-on-surface));
944
+ -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000 !important;
945
+ box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000 !important; /* stylelint-disable-line declaration-no-important */
947
946
  }
948
947
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
949
948
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
package/styles/tailwind-dark.css CHANGED
@@ -767,8 +767,6 @@
767
767
  background: inherit;
768
768
  border: none;
769
769
  margin-top: 2px;
770
- background: #374151;
771
- color: #d1d5db;
772
770
  }
773
771
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
774
772
  display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -784,6 +782,8 @@
784
782
  -webkit-box-shadow: none;
785
783
  box-shadow: none;
786
784
  color: #fff;
785
+ -webkit-box-shadow: 0 0 0 1px #4f46e5 !important;
786
+ box-shadow: 0 0 0 1px #4f46e5 !important; /* stylelint-disable-line declaration-no-important */
787
787
  }
788
788
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
789
789
  background: #4b5563;
package/styles/tailwind.css CHANGED
@@ -767,8 +767,6 @@
767
767
  background: inherit;
768
768
  border: none;
769
769
  margin-top: 2px;
770
- background: #f3f4f6;
771
- color: #6b7280;
772
770
  }
773
771
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
774
772
  display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -784,6 +782,8 @@
784
782
  -webkit-box-shadow: none;
785
783
  box-shadow: none;
786
784
  color: #374151;
785
+ -webkit-box-shadow: 0 0 0 1px #4f46e5 !important;
786
+ box-shadow: 0 0 0 1px #4f46e5 !important; /* stylelint-disable-line declaration-no-important */
787
787
  }
788
788
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
789
789
  background: #e5e7eb;