@syncfusion/ej2-image-editor 20.4.51 → 21.1.36

package/styles/fluent.css

@@ -73,6 +73,66 @@
 .e-image-editor .e-fill.e-template .e-caret::before {
   content: "\e783";
 }
+.e-image-editor .e-custom::before {
+  content: "\e8a9";
+}
+.e-image-editor .e-circle::before {
+  content: "\e7ca";
+}
+.e-image-editor .e-square::before {
+  content: "\e8aa";
+}
+.e-image-editor .e-custom-a::before {
+  content: "\e8ab";
+}
+.e-image-editor .e-custom-b::before {
+  content: "\e8ac";
+}
+.e-image-editor .e-custom-c::before {
+  content: "\e8ad";
+}
+.e-image-editor .e-custom-d::before {
+  content: "\e8ae";
+}
+.e-image-editor .e-custom-e::before {
+  content: "\e8af";
+}
+.e-image-editor .e-horizontal-flip::before {
+  content: "\e8a3";
+}
+.e-image-editor .e-vertical-flip::before {
+  content: "\e8a4";
+}
+.e-image-editor .e-clock-wise::before {
+  content: "\e8a6";
+}
+.e-image-editor .e-anti-clock-wise::before {
+  content: "\e8a5";
+}
+.e-image-editor .e-rectangle::before {
+  content: "\e723";
+}
+.e-image-editor .e-circle::before {
+  content: "\e7ca";
+}
+.e-image-editor .e-triangle::before {
+  content: "\e89c";
+}
+.e-image-editor .e-line::before {
+  content: "\e819";
+}
+.e-image-editor .e-add-text::before {
+  content: "\e82e";
+}
+.e-image-editor .e-free-pen::before {
+  content: "\e7db";
+}
+.e-image-editor .e-arrow::before {
+  content: "\e669";
+}
+.e-image-editor .e-path::before {
+  content: "\e931";
+}
 
 .e-dropdown-popup.e-image-popup .e-custom::before {
   content: "\e8a9";
@@ -131,6 +191,17 @@
 .e-dropdown-popup.e-image-popup .e-add-text::before {
   content: "\e82e";
 }
+.e-dropdown-popup.e-image-popup .e-arrow::before {
+  content: "\e669";
+}
+.e-dropdown-popup.e-image-popup .e-path::before {
+  content: "\e931";
+}
+
+.e-ie-toolbar-upload-div.e-hide,
+.e-ie-toolbar-upload-btn.e-hide {
+  display: none;
+}
 
 .e-device.e-image-editor .e-img-font-style.e-template {
   margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
@@ -235,7 +306,7 @@
 .e-image-editor .e-toolbar-area + .e-canvas-wrapper {
   border-top: 1px solid #edebe9;
 }
-.e-image-editor .e-canvas-wrapper .e-textarea {
+.e-image-editor .e-toolbar-area + .e-canvas-wrapper .e-textarea {
   line-height: initial !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-bottom-toolbar {
@@ -254,11 +325,11 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
   border: 2px solid transparent;
   height: 100px;
 }
-.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
   border-top: 2px solid;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
@@ -274,7 +345,7 @@
   border-top: 1px solid #edebe9;
   border-bottom: 1px solid #edebe9;
 }
-.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
   border-color: #edebe9;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
@@ -287,24 +358,24 @@
   background: inherit;
   border: none;
   margin-top: 2px;
-  background-color: #f3f2f1;
+  background: #f3f2f1;
   color: #605e5c;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
-  background-color: #f3f2f1;
+  background: #f3f2f1;
   box-shadow: none;
   color: #323130;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
-  background-color: #f3f2f1;
+  background: #f3f2f1;
   box-shadow: none;
   color: #323130;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
-  background-color: #edebe9;
+  background: #edebe9;
   box-shadow: none;
   color: #323130;
 }

package/styles/highcontrast-light.css

@@ -67,6 +67,66 @@
 .e-image-editor .e-fill.e-template .e-caret::before {
   content: "\e35c";
 }
+.e-image-editor .e-custom::before {
+  content: "\e959";
+}
+.e-image-editor .e-circle::before {
+  content: "\e671";
+}
+.e-image-editor .e-square::before {
+  content: "\e95a";
+}
+.e-image-editor .e-custom-a::before {
+  content: "\e95b";
+}
+.e-image-editor .e-custom-b::before {
+  content: "\e95c";
+}
+.e-image-editor .e-custom-c::before {
+  content: "\e95d";
+}
+.e-image-editor .e-custom-d::before {
+  content: "\e95e";
+}
+.e-image-editor .e-custom-e::before {
+  content: "\e960";
+}
+.e-image-editor .e-horizontal-flip::before {
+  content: "\e951";
+}
+.e-image-editor .e-vertical-flip::before {
+  content: "\e952";
+}
+.e-image-editor .e-clock-wise::before {
+  content: "\e956";
+}
+.e-image-editor .e-anti-clock-wise::before {
+  content: "\e955";
+}
+.e-image-editor .e-rectangle::before {
+  content: "\e670";
+}
+.e-image-editor .e-circle::before {
+  content: "\e671";
+}
+.e-image-editor .e-triangle::before {
+  content: "\e949";
+}
+.e-image-editor .e-line::before {
+  content: "\e668";
+}
+.e-image-editor .e-add-text::before {
+  content: "\e35b";
+}
+.e-image-editor .e-free-pen::before {
+  content: "\e739";
+}
+.e-image-editor .e-arrow::before {
+  content: "\e669";
+}
+.e-image-editor .e-path::before {
+  content: "\e931";
+}
 
 .e-dropdown-popup.e-image-popup .e-custom::before {
   content: "\e959";
@@ -122,6 +182,17 @@
 .e-dropdown-popup.e-image-popup .e-vertical-flip::before {
   content: "\e952";
 }
+.e-dropdown-popup.e-image-popup .e-arrow::before {
+  content: "\e669";
+}
+.e-dropdown-popup.e-image-popup .e-path::before {
+  content: "\e931";
+}
+
+.e-ie-toolbar-upload-div.e-hide,
+.e-ie-toolbar-upload-btn.e-hide {
+  display: none;
+}
 
 .e-device.e-image-editor .e-img-font-style.e-template {
   margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
@@ -226,7 +297,7 @@
 .e-image-editor .e-toolbar-area + .e-canvas-wrapper {
   border-top: 1px solid #000;
 }
-.e-image-editor .e-canvas-wrapper .e-textarea {
+.e-image-editor .e-toolbar-area + .e-canvas-wrapper .e-textarea {
   line-height: initial !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-bottom-toolbar {
@@ -245,11 +316,11 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
   border: 2px solid transparent;
   height: 100px;
 }
-.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
   border-top: 2px solid;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
@@ -265,37 +336,37 @@
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
 }
-.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
   border-color: #400074;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
   color: #000;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
-  background: #000 !important; /* stylelint-disable-line declaration-no-important */
+  background: #400074 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn {
   background: inherit;
   border: none;
   margin-top: 0;
-  background-color: #fff;
+  background: #fff;
   color: #000;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
-  background-color: #ecf;
+  background: #ecf;
   box-shadow: none;
   color: #000;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
-  background-color: #fff;
+  background: #fff;
   box-shadow: none;
   color: #000;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
-  background-color: #400074;
+  background: #400074;
   box-shadow: none;
   color: #fff;
 }
@@ -316,5 +387,5 @@
 }
 
 .e-dropdown-popup .e-selected-btn {
-  background: #000 !important; /* stylelint-disable-line declaration-no-important */
+  background: #400074 !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/highcontrast.css

@@ -67,6 +67,66 @@
 .e-image-editor .e-fill.e-template .e-caret::before {
   content: "\e35c";
 }
+.e-image-editor .e-custom::before {
+  content: "\e959";
+}
+.e-image-editor .e-circle::before {
+  content: "\e671";
+}
+.e-image-editor .e-square::before {
+  content: "\e95a";
+}
+.e-image-editor .e-custom-a::before {
+  content: "\e95b";
+}
+.e-image-editor .e-custom-b::before {
+  content: "\e95c";
+}
+.e-image-editor .e-custom-c::before {
+  content: "\e95d";
+}
+.e-image-editor .e-custom-d::before {
+  content: "\e95e";
+}
+.e-image-editor .e-custom-e::before {
+  content: "\e960";
+}
+.e-image-editor .e-horizontal-flip::before {
+  content: "\e951";
+}
+.e-image-editor .e-vertical-flip::before {
+  content: "\e952";
+}
+.e-image-editor .e-clock-wise::before {
+  content: "\e956";
+}
+.e-image-editor .e-anti-clock-wise::before {
+  content: "\e955";
+}
+.e-image-editor .e-rectangle::before {
+  content: "\e670";
+}
+.e-image-editor .e-circle::before {
+  content: "\e671";
+}
+.e-image-editor .e-triangle::before {
+  content: "\e949";
+}
+.e-image-editor .e-line::before {
+  content: "\e668";
+}
+.e-image-editor .e-add-text::before {
+  content: "\e35b";
+}
+.e-image-editor .e-free-pen::before {
+  content: "\e739";
+}
+.e-image-editor .e-arrow::before {
+  content: "\e669";
+}
+.e-image-editor .e-path::before {
+  content: "\e931";
+}
 
 .e-dropdown-popup.e-image-popup .e-custom::before {
   content: "\e959";
@@ -122,6 +182,17 @@
 .e-dropdown-popup.e-image-popup .e-vertical-flip::before {
   content: "\e952";
 }
+.e-dropdown-popup.e-image-popup .e-arrow::before {
+  content: "\e669";
+}
+.e-dropdown-popup.e-image-popup .e-path::before {
+  content: "\e931";
+}
+
+.e-ie-toolbar-upload-div.e-hide,
+.e-ie-toolbar-upload-btn.e-hide {
+  display: none;
+}
 
 .e-device.e-image-editor .e-img-font-style.e-template {
   margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
@@ -226,7 +297,7 @@
 .e-image-editor .e-toolbar-area + .e-canvas-wrapper {
   border-top: 1px solid #fff;
 }
-.e-image-editor .e-canvas-wrapper .e-textarea {
+.e-image-editor .e-toolbar-area + .e-canvas-wrapper .e-textarea {
   line-height: initial !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-bottom-toolbar {
@@ -245,11 +316,11 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper {
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
   border: 2px solid transparent;
   height: 100px;
 }
-.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
   border-top: 2px solid;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
@@ -265,37 +336,37 @@
   border-top: 1px solid #fff;
   border-bottom: 1px solid #fff;
 }
-.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper {
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper {
   border-color: #ffd939;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
-  background: #fff !important; /* stylelint-disable-line declaration-no-important */
+  background: #ffd939 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn {
   background: inherit;
   border: none;
   margin-top: 0;
-  background-color: #000;
+  background: #000;
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
-  background-color: #685708;
+  background: #685708;
   box-shadow: none;
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
-  background-color: #000;
+  background: #000;
   box-shadow: none;
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
-  background-color: #ffd939;
+  background: #ffd939;
   box-shadow: none;
   color: #000;
 }
@@ -316,5 +387,6 @@
 }
 
 .e-dropdown-popup .e-selected-btn {
-  background: #fff !important; /* stylelint-disable-line declaration-no-important */
+  background: #ffd939 !important; /* stylelint-disable-line declaration-no-important */
+  color: #000 !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/image-editor/_highcontrast-definition.scss

@@ -2,7 +2,7 @@ $image-editor-background: $bg-base-0 !default;
 $image-editor-border: 1px solid $border-fg !default;
 $image-editor-toolbar-icon-color: $content-font !default;
 $img-editor-cp-preview-border-bottom-color: $selection-font !default;
-$image-editor-icon-sel-bg-color: $content-font !default;
+$image-editor-icon-sel-bg-color: $selection-bg !default;
 $image-editor-ddbtn-margin-top: 0 !default;
 $image-editor-tbar-height: 38px !default;
 $image-editor-bigger-tbar-height: 48px !default;

package/styles/image-editor/_highcontrast-light-definition.scss

@@ -2,7 +2,7 @@ $image-editor-background: $bg-base-0 !default;
 $image-editor-border: 1px solid $border-fg !default;
 $image-editor-toolbar-icon-color: $content-font !default;
 $img-editor-cp-preview-border-bottom-color: $border-fg !default;
-$image-editor-icon-sel-bg-color: $content-font !default;
+$image-editor-icon-sel-bg-color: $selection-bg !default;
 $image-editor-ddbtn-margin-top: 0 !default;
 $image-editor-tbar-height: 38px !default;
 $image-editor-bigger-tbar-height: 48px !default;

package/styles/image-editor/_layout.scss

@@ -1,5 +1,10 @@
 @include export-module('image-editor-layout') {
 
+  .e-ie-toolbar-upload-div.e-hide,
+  .e-ie-toolbar-upload-btn.e-hide {
+    display: none;
+  }
+  
   .e-device.e-image-editor {
     & .e-img-font-style.e-template{
       margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
@@ -40,6 +45,7 @@
               font-size: $image-editor-bigger-tbar-btn-fontsize;
               @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
                 padding-top: 4px;
+                padding-bottom: 4px;
               }
             }
           }
@@ -94,9 +100,10 @@
 
     & .e-toolbar {
       border: none;
-      height: $image-editor-tbar-height !important; /* stylelint-disable-line declaration-no-important */
-      min-height: $image-editor-tbar-height !important; /* stylelint-disable-line declaration-no-important */
-
+      @if $skin-name != 'Material3' {
+        height: $image-editor-tbar-height !important; /* stylelint-disable-line declaration-no-important */
+        min-height: $image-editor-tbar-height !important; /* stylelint-disable-line declaration-no-important */
+      }
       & .e-toolbar-items {
         & .e-toolbar-item {
           & .e-tbar-btn.e-btn.e-tbtn-txt {
@@ -113,6 +120,7 @@
               font-size: $image-editor-tbar-btn-fontsize;
               @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
                 padding-top: 4px;
+                padding-bottom: 4px;
               }
             }
           }
@@ -124,12 +132,6 @@
 
         & .e-file-select-wrap {
           padding: 0;
-
-          & .e-btn-icon {
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
-              margin-top: -2px !important; /* stylelint-disable-line declaration-no-important */
-            }
-          }
         }
 
         & .e-image-upload {
@@ -143,9 +145,6 @@
           }
 
           & .e-icons.e-upload-icon {
-            @if $skin-name == 'material' {
-              margin-top: 7px;
-            }
             @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
               padding-top: 6px;
             }
@@ -201,9 +200,7 @@
 
     & .e-toolbar-area + .e-canvas-wrapper {
       border-top: $image-editor-border;
-    }
 
-    & .e-canvas-wrapper {
       & .e-textarea {
         line-height: initial !important; /* stylelint-disable-line declaration-no-important */
       }
@@ -218,7 +215,12 @@
       z-index: 1;
 
       & .e-toolbar {
-        height: 130px !important; /* stylelint-disable-line declaration-no-important */
+        @if $skin-name == 'Material3' {
+          height: 140px !important; /* stylelint-disable-line declaration-no-important */
+        }
+        @else {
+          height: 130px !important; /* stylelint-disable-line declaration-no-important */
+        }
       }
 
       &.e-hide {
@@ -228,20 +230,28 @@
       & .e-toolbar-item {
         height: auto !important; /* stylelint-disable-line declaration-no-important */
 
-        & .filterwrapper {
+        & .filterwrapper,
+        & .filter-wrapper {
           border: 2px solid transparent;
           height: 100px;
         }
       }
 
       & .e-toolbar-item:hover .filterwrapper,
-      & .e-toolbar-item.e-selected .filterwrapper{
+      & .e-toolbar-item:hover .filter-wrapper,
+      & .e-toolbar-item.e-selected .filterwrapper,
+      & .e-toolbar-item.e-selected .filter-wrapper {
         border-top: 2px solid;
       }
 
       & .e-slider-container {
         margin-left: calc(50% - 137px);
-        height: 54px !important; /* stylelint-disable-line declaration-no-important */
+        @if $skin-name == 'Material3' {
+          height: 70px !important; /* stylelint-disable-line declaration-no-important */
+        }
+        @else {
+          height: 54px !important; /* stylelint-disable-line declaration-no-important */
+        }
       }
     }
   }

package/styles/image-editor/_material3-dark-definition.scss

@@ -0,0 +1 @@
+@import './material3-definition.scss';

package/styles/image-editor/_material3-definition.scss

@@ -1,11 +1,11 @@
-$image-editor-border: 1px solid $gray-900 !default;
-$image-editor-background: $gray-900 !default;
-$image-editor-toolbar-icon-color: $icon-color;
-$img-editor-cp-preview-border-bottom-color: $black !default;
-$image-editor-icon-sel-bg-color: $gray-900 !default;
+$image-editor-border: 1px solid rgba($border-light) !default;
+$image-editor-background: $content-bg-color-alt5 !default;
+$image-editor-toolbar-icon-color: rgba($icon-color);
+$img-editor-cp-preview-border-bottom-color: rgba($black) !default;
+$image-editor-icon-sel-bg-color: $content-bg-color-alt2 !default;
 $image-editor-ddbtn-margin-top: 0 !default;
-$image-editor-tbar-height: 38px !default;
-$image-editor-bigger-tbar-height: 48px !default;
-$image-editor-tbar-btn-fontsize: 14px !default;
-$image-editor-bigger-tbar-btn-fontsize: 16px !default;
-$image-editor-contextual-toolbar:  $content-bg-color-alt1 !default;
+$image-editor-tbar-height: 40px !default;
+$image-editor-bigger-tbar-height: 56px !default;
+$image-editor-tbar-btn-fontsize: $text-base !default;
+$image-editor-bigger-tbar-btn-fontsize: $text-lg !default;
+$image-editor-contextual-toolbar: $content-bg-color-alt2 !default;

package/styles/image-editor/_theme.scss

@@ -8,7 +8,9 @@
       border-bottom: $image-editor-border;
 
       & .e-toolbar-item:hover .filterwrapper,
-      & .e-toolbar-item.e-selected .filterwrapper{
+      & .e-toolbar-item.e-selected .filterwrapper,
+      & .e-toolbar-item:hover .filter-wrapper,
+      & .e-toolbar-item.e-selected .filter-wrapper {
         border-color: $btn-active-bgcolor;
       }
     }
@@ -37,28 +39,31 @@
           border: none;
           margin-top: $image-editor-ddbtn-margin-top;
           @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' $skin-name == 'bootstrap5-dark' {
-            background-color: $tbar-default-bg;
+            background: $tbar-default-bg;
             color: $tbar-default-icon-color;
           }
+          @if $skin-name == 'Material3' {
+            box-shadow: none;
+          }
 
           & .e-caret-hide {
             display: none !important; /* stylelint-disable-line declaration-no-important */
           }
 
           &:hover {
-            background-color: $btn-hover-bgcolor;
+            background: $btn-hover-bgcolor;
             box-shadow: none;
             color: $btn-hover-color;
           }
 
           &:focus {
-            background-color: $btn-focus-bgcolor;
+            background: $btn-focus-bgcolor;
             box-shadow: none;
             color: $btn-focus-color;
           }
 
           &:active {
-            background-color: $btn-active-bgcolor;
+            background: $btn-active-bgcolor;
             box-shadow: none;
             color: $btn-active-color;
           }
@@ -101,7 +106,7 @@
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }