@syncfusion/ej2-image-editor 21.1.35 → 21.1.36

package/styles/fabric.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,12 @@
 .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 {
@@ -252,11 +318,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 {
@@ -272,7 +338,7 @@
   border-top: 1px solid #eaeaea;
   border-bottom: 1px solid #eaeaea;
 }
-.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: #c8c8c8;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {

package/styles/fluent-dark.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,12 @@
 .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 {
@@ -259,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 {
@@ -279,7 +345,7 @@
   border-top: 1px solid #292827;
   border-bottom: 1px solid #292827;
 }
-.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: #292827;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {

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,12 @@
 .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 {
@@ -259,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 {
@@ -279,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 {

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,12 @@
 .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 {
@@ -250,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 {
@@ -270,14 +336,14 @@
   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;
@@ -321,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,12 @@
 .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 {
@@ -250,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 {
@@ -270,14 +336,14 @@
   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;
@@ -321,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

@@ -100,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 {
@@ -214,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 {
@@ -224,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

@@ -0,0 +1,11 @@
+$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: 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;
       }
     }
@@ -40,6 +42,9 @@
             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 */
@@ -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 */
     }
   }