@syncfusion/ej2-image-editor 26.2.10 → 27.1.48

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

@@ -18,10 +18,12 @@ $image-editor-slider-handler: calc(50% - 10px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
 $image-editor-device-slider-handler: calc(50% - 9px) !default;
 $image-editor-finetune-value-span: 28% !default;
-$image-editor-finetune-span: 28% !default;
+$image-editor-finetune-span: 29% !default;
 $image-editor-button-label: 13px !default;
 $image-editor-save-dlg-big-btn-pad: 8px !default;
 $image-editor-save-dlg-grp-btn-padding: 5.2px 10.5px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 5.2px 10.5px !default;
 $image-editor-icon-button: 5px !default;
-$image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;
+$image-editor-filter-canvas-focus: $secondary-text-color !default;
+$image-editor-button-label-mobile: 9px !default;
+$image-editor-button-width-mobile: calc(65% - 30px) !default;

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

@@ -22,4 +22,6 @@ $image-editor-save-dlg-big-btn-pad: 8px !default;
 $image-editor-save-dlg-grp-btn-padding: 0 !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 4px 13px !default;
 $image-editor-icon-button: 5px !default;
-$image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;
+$image-editor-filter-canvas-focus: $secondary-text-color !default;
+$image-editor-button-label-mobile: 9px !default;
+$image-editor-button-width-mobile: calc(65% - 30px) !default;

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

@@ -24,4 +24,6 @@ $image-editor-save-dlg-big-btn-pad: 2px 11px !default;
 $image-editor-save-dlg-grp-btn-padding: 2px 10px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 3px 9px !default;
 $image-editor-icon-button: 5px !default;
-$image-editor-filter-canvas-focus: 1px solid $content-font !default;
+$image-editor-filter-canvas-focus: $content-font !default;
+$image-editor-button-label-mobile: 7px !default;
+$image-editor-button-width-mobile: calc(64% - 30px) !default;

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

@@ -24,4 +24,6 @@ $image-editor-save-dlg-big-btn-pad: 2px 11px !default;
 $image-editor-save-dlg-grp-btn-padding: 2px 10px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 3px 9px !default;
 $image-editor-icon-button: 5px !default;
-$image-editor-filter-canvas-focus: 1px solid $content-font !default;
+$image-editor-filter-canvas-focus: $content-font !default;
+$image-editor-button-label-mobile: 7px !default;
+$image-editor-button-width-mobile: calc(64% - 30px) !default;

package/styles/image-editor/_layout.scss

@@ -64,134 +64,6 @@
       height: auto !important; /* stylelint-disable-line declaration-no-important */
     }
   }
-
-  .e-bigger .e-image-editor,
-  .e-image-editor.e-bigger {
-    & .e-contextual-toolbar-wrapper {
-      & .e-slider-container {
-        & .e-slider {
-          & .e-handle {
-            top: $image-editor-device-slider-handler !important; /* stylelint-disable-line declaration-no-important */
-          }
-        }
-      }
-    }
-    
-    & .e-toolbar {
-      height: $image-editor-bigger-tbar-height !important; /* stylelint-disable-line declaration-no-important */
-      min-height: $image-editor-bigger-tbar-height !important; /* stylelint-disable-line declaration-no-important */
-
-      & .e-toolbar-items {
-        @if $skin-name == 'material' {
-          height: $image-editor-bigger-tbar-height !important; /* stylelint-disable-line declaration-no-important */
-          min-height: $image-editor-bigger-tbar-height !important; /* stylelint-disable-line declaration-no-important */
-        }
-      }
-
-      & .e-toolbar-items {
-        & .e-toolbar-item {
-          &.e-ie-resize-height span,
-          &.e-ie-resize-width span {
-            font-size: 16px;
-          }
-        }
-      }
-      & .e-toolbar-items {
-        & .e-toolbar-item {
-          & .e-tbar-btn.e-btn.e-tbtn-txt {
-            .e-icons.e-btn-icon {
-              @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'boostrap4' {
-                padding: 0;
-              }
-              font-size: $image-editor-bigger-tbar-btn-fontsize;
-            }
-          }
-
-          & .e-tbar-btn.e-btn {
-            .e-icons.e-btn-icon {
-              font-size: $image-editor-bigger-tbar-btn-fontsize;
-              @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
-                padding-top: 4px;
-                padding-bottom: 4px;
-              }
-            }
-          }
-        }
-
-        & .e-fill.e-template,
-        & .e-stroke.e-template,
-        & .e-frame-stroke.e-template,
-        & .e-pen-stroke-color.e-template,
-        & .e-text-font-color.e-template,
-        & .e-save.e-template {
-          & .e-dropdown-btn {
-            & .e-icons.e-caret {
-              font-size: $image-editor-bigger-tbar-btn-fontsize;
-            }
-          }
-        }
-
-        & .e-text-font-color.e-template {
-          & .e-dropdown-btn {
-            & .e-icons.e-caret {
-              margin-top: -4px;
-            }
-          }
-        }
-
-        & .e-btn-icon.e-dropdownbtn-preview {
-          margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
-          margin-left: $image-editor-bigger-dropdown-btn-preview-left;
-        }
-
-        & .e-dropdown-btn.e-icon-btn {
-          @if $skin-name == 'Material3' {
-            padding: 7px 15px;
-          }
-        }
-
-        & .e-dropdown-btn.e-image-popup {
-          & .e-select,
-          & .e-annotation,
-          & .e-transform {
-            font-size: $image-editor-bigger-tbar-btn-fontsize;
-
-            & .e-icons.e-caret {
-              font-size: 10px;
-            }
-          }
-        }
-
-        & .e-dropdown-btn {
-          & .e-save {
-            font-size: $image-editor-bigger-tbar-btn-fontsize;
-
-            & .e-icons.e-caret {
-              font-size: 10px;
-            }
-          }
-        }
-
-        &.e-tbar-pos {
-          .e-toolbar-left {
-            line-height: 1;
-          }
-        }
-      }
-    }
-
-    & .e-ie-save-dialog .e-ie-img-save-dlg .e-btn {
-      @if $skin-name == 'Material3' {
-        margin-top: 5px !important; /* stylelint-disable-line declaration-no-important */
-      }
-    }
-
-    @if $skin-name == 'fluent2' {
-      & .e-dropdown-btn.e-ie-ddb-popup {
-        padding-left: 16px;
-      }
-    }
-  }
   
   .e-image-editor {
     border: $image-editor-border;
@@ -293,7 +165,7 @@
           & .e-tbar-btn.e-btn {
             .e-icons.e-btn-icon {
               font-size: $image-editor-tbar-btn-fontsize;
-              @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
+              @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
                 padding-top: 4px;
                 padding-bottom: 4px;
               }
@@ -320,7 +192,7 @@
           }
 
           & .e-icons.e-upload-icon {
-            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
+            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
               padding-top: 6px;
             }
           }
@@ -331,7 +203,9 @@
         & .e-frame-stroke.e-template,
         & .e-pen-stroke-color.e-template,
         & .e-text-font-color.e-template,
-        & .e-save.e-template {
+        & .e-save.e-template,
+        & .e-text-background-color.e-template,
+        & .e-stroke-text-font-color.e-template {
           & .e-dropdown-btn {
             & .e-icons.e-caret {
               font-size: $image-editor-tbar-btn-fontsize;
@@ -460,19 +334,19 @@
       & .e-toolbar-item {
         height: auto !important; /* stylelint-disable-line declaration-no-important */
 
-        & .filterwrapper,
-        & .filter-wrapper {
+        & .filterwrapper canvas,
+        & .filter-wrapper canvas {
           border: 2px solid transparent;
           height: 100px;
         }
       }
 
-      & .e-toolbar-item:hover .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-toolbar-item:hover .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);
@@ -555,14 +429,31 @@
     top: $image-editor-finetune-value-span !important; /* stylelint-disable-line declaration-no-important */
   }
 
+  .e-device.e-image-editor .e-ie-finetune-value-span {
+    @if $skin-name == 'fluent2' {
+      top: 29% !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+
   .e-ie-finetune-slider-label {
     top: $image-editor-finetune-span !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-ie-finetune-slider-wrap {
-    top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
-    @if $skin-name == 'Material3' or $skin-name == 'tailwind' {
-      top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+    @if $skin-name == 'Material3' {
+      top: calc(50% - 11px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+    @else if $skin-name == 'tailwind' {
+      top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+    @else {
+      top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-device.e-image-editor .e-ie-finetune-slider-wrap {
+    @if $skin-name == 'Material3' {
+      top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
     }
   }
 
@@ -571,15 +462,12 @@
   }
 
   .e-ie-slider-wrap {
-    top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
-  }
-
-  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
-    @if $skin-name == 'Material3' {
-      height: 22px !important; /* stylelint-disable-line declaration-no-important */
-      width: 22px !important; /* stylelint-disable-line declaration-no-important */
+    @if $skin-name == 'tailwind' or $skin-name == 'Material3' {
+      top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+    }
+    @else {
+      top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
     }
-    top: $image-editor-bigger-slider-handler !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-dropdown-popup.e-ie-crop-ddb-popup ul {
@@ -743,17 +631,13 @@
     @if $skin-name == 'tailwind' {
       margin-left: calc(100% - 163px) !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap5' {
+    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
       margin-left: calc(100% - 156px) !important; /* stylelint-disable-line declaration-no-important */
     }
     @if $skin-name == 'Material3' {
       margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
     }
   }
-
-  .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
-    width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
-  }
   
   .e-device.e-ie-save-dialog .e-ie-img-save-name {
     width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
@@ -776,50 +660,11 @@
     }
   }
 
-  .e-bigger .e-image-editor .e-dlg-container .e-dialog,
-  .e-bigger.e-image-editor .e-dlg-container .e-dialog {
-    width: 656px;
-  }
-
-  .e-bigger .e-ie-img-save-dlg {
-    width: 106px;
-  }
-
-  .e-bigger .e-image-editor .e-control-wrapper.e-slider-container.e-horizontal,
-  .e-bigger.e-image-editor .e-control-wrapper.e-slider-container.e-horizontal {
-    width: 217px;
-  }
-
   .e-ie-quality-option-container .e-btn-group .e-btn {
     padding-left: $image-editor-button-label;
     padding-right: $image-editor-button-label;
   }
 
-  .e-bigger .e-dialog.e-blr-ie-save-dialog:not(.e-device) {
-    @if $skin-name == 'FluentUI' {
-      width: 656px !important; /* stylelint-disable-line declaration-no-important */
-    }
-    @else if $skin-name == 'highcontrast' or $skin-name == 'tailwind' {
-      width: 625px !important; /* stylelint-disable-line declaration-no-important */
-    }
-    @else if $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
-      width: 635px !important; /* stylelint-disable-line declaration-no-important */
-    }
-    @else {
-      width: 620px !important; /* stylelint-disable-line declaration-no-important */
-    }
-
-    & .e-ie-img-icon-button {
-      padding: $image-editor-save-dlg-big-btn-pad;
-    }
-
-    & .e-btn-group .e-btn {
-      @if $skin-name == 'material' or $skin-name == 'material-dark' {
-        padding: 4px 10px 2px;
-      }
-    }
-  }
-
   .e-blr-ie-save-dialog {
     & .e-ie-img-save-name {
       width: calc(67% - 13px);
@@ -908,32 +753,50 @@
     }
   }
 
-  .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+  .e-ie-save-dialog .e-ie-quality-slider.e-slider-container + .e-ie-img-icon-button,
+  .e-ie-save-dialog .e-ie-quality-option-container .e-slider-container.e-horizontal + .e-ie-img-icon-button {
     @if $skin-name == 'Material3' {
-      top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
+      margin-left: 30px !important; /* stylelint-disable-line declaration-no-important */
     }
   }
-
-  .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
-    width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
-    @if $skin-name == 'tailwind' or $skin-name == 'material' or $skin-name == 'bootstrap4' {
-      width: calc(65% - 13px) !important; /* stylelint-disable-line declaration-no-important */
+  
+  .e-bigger .e-blr-ie-save-dialog .e-dialog {
+    @if $skin-name == 'fluent2' {
+      border: none;
     }
-    @if $skin-name == 'highcontrast' {
-      width: calc(62% - 13px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-ie-straighten-value-span {
+    margin-left: 7px !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-device.e-image-editor {
+    & .e-ie-straighten-value-span {
+      margin-left: 15px !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'FluentUI' {
-      width: calc(68% - 30px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+  
+  @media only screen and (max-width: 390px) {
+    .e-device.e-image-editor .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-ie-img-quality-name .e-btn-group .e-btn {
+      padding-left: $image-editor-button-label-mobile;
+      padding-right: $image-editor-button-label-mobile;
     }
-    @if $skin-name == 'fabric' or $skin-name == 'bootstrap' {
-      width: calc(64% - 13px) !important; /* stylelint-disable-line declaration-no-important */
+  
+    .e-device.e-image-editor .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-ie-img-save-name {
+      width: $image-editor-button-width-mobile !important; /* stylelint-disable-line declaration-no-important */
     }
   }
+   
+  .e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-slider-label {
+    left: calc(50% - 145px) !important; /* stylelint-disable-line declaration-no-important */
+  }
 
-  .e-ie-save-dialog .e-ie-quality-slider.e-slider-container + .e-ie-img-icon-button,
-  .e-ie-save-dialog .e-ie-quality-option-container .e-slider-container.e-horizontal + .e-ie-img-icon-button {
-    @if $skin-name == 'Material3' {
-      margin-left: 30px !important; /* stylelint-disable-line declaration-no-important */
-    }
+  .e-device.e-image-editor .e-contextual-toolbar-wrapper .e-slider-container {
+    width: 170px !important; /* stylelint-disable-line declaration-no-important */
+    margin-left: calc(50% - 62px) !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-value-span {
+    margin-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   }
 }

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

@@ -24,4 +24,6 @@ $image-editor-save-dlg-big-btn-pad: 4px 11px 2px !default;
 $image-editor-save-dlg-grp-btn-padding: 6px 7.5px 4px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 2px 9.5px !default;
 $image-editor-icon-button: 5px !default;
-$image-editor-filter-canvas-focus: 1px solid $grey-white !default;
+$image-editor-filter-canvas-focus: $grey-white !default;
+$image-editor-button-label-mobile: 10px !default;
+$image-editor-button-width-mobile: calc(65% - 30px) !default;

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

@@ -24,4 +24,6 @@ $image-editor-save-dlg-big-btn-pad: 4px 11px 2px !default;
 $image-editor-save-dlg-grp-btn-padding: 6px 7.5px 4px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 2px 9.5px !default;
 $image-editor-icon-button: 5px !default;
-$image-editor-filter-canvas-focus: 1px solid $grey-light-font !default;
+$image-editor-filter-canvas-focus: $grey-light-font !default;
+$image-editor-button-label-mobile: 10px !default;
+$image-editor-button-width-mobile: calc(65% - 30px) !default;

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

@@ -17,11 +17,13 @@ $image-editor-bigger-dropdown-btn-preview-left: -7px !default;
 $image-editor-slider-handler: calc(50% - 8px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 10px) !default;
 $image-editor-device-slider-handler: calc(50% - 8px) !default;
-$image-editor-finetune-value-span: 29% !default;
-$image-editor-finetune-span: 28% !default;
+$image-editor-finetune-value-span: 33% !default;
+$image-editor-finetune-span: 33% !default;
 $image-editor-button-label: 13px !default;
 $image-editor-save-dlg-big-btn-pad: 8px 11px !default;
 $image-editor-save-dlg-grp-btn-padding: 8px 10.5px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 11px 12px !default;
 $image-editor-icon-button: 3px !default;
-$image-editor-filter-canvas-focus: 1px solid $icon-color !default;
+$image-editor-filter-canvas-focus: $icon-color !default;
+$image-editor-button-label-mobile: 12px !default;
+$image-editor-button-width-mobile: calc(65% - 30px) !default;

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

@@ -17,11 +17,13 @@ $image-editor-bigger-dropdown-btn-preview-left: -6px !default;
 $image-editor-slider-handler: calc(50% - 6px) !default;
 $image-editor-bigger-slider-handler: calc(50% - 7px) !default;
 $image-editor-device-slider-handler: calc(50% - 9px) !default;
-$image-editor-finetune-value-span: 28% !default;
-$image-editor-finetune-span: 28% !default;
+$image-editor-finetune-value-span: 33% !default;
+$image-editor-finetune-span: 33% !default;
 $image-editor-button-label: 13px !default;
 $image-editor-save-dlg-big-btn-pad: 4px 15px !default;
 $image-editor-save-dlg-grp-btn-padding: 4px 10px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 4px 9px !default;
 $image-editor-icon-button: 2.9px !default;
-$image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;
+$image-editor-filter-canvas-focus: $secondary-text-color !default;
+$image-editor-button-label-mobile: 6px !default;
+$image-editor-button-width-mobile: calc(65% - 30px) !default;

package/styles/image-editor/_theme.scss

@@ -5,11 +5,16 @@
     & .e-contextual-toolbar-wrapper {
       background: $image-editor-contextual-toolbar;
 
-      & .e-toolbar-item:hover .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;
+      & .e-toolbar-item:hover .filterwrapper canvas,
+      & .e-toolbar-item.e-selected .filterwrapper canvas,
+      & .e-toolbar-item:hover .filter-wrapper canvas,
+      & .e-toolbar-item.e-selected .filter-wrapper canvas {
+        border-color: $btn-active-bgcolor !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      & .e-toolbar-item.e-selected .filterwrapper:focus canvas,
+      & .e-toolbar-item.e-selected .filter-wrapper:focus canvas {
+        border-color: $btn-active-bgcolor !important; /* stylelint-disable-line declaration-no-important */
       }
     }
 
@@ -17,7 +22,7 @@
       & .e-toolbar-items {
         & .e-tbar-btn.e-btn {
           & .e-icons {
-            @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark' {
+            @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap5-dark' and $skin-name != 'fluent2' {
               color: $image-editor-toolbar-icon-color;
             }
           }
@@ -25,7 +30,7 @@
           &.e-selected-btn {
             background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
             & .e-icons {
-              @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
+              @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
                 color: $secondary-text-color-focus;
               }
             }
@@ -36,7 +41,7 @@
           background: inherit;
           border: none;
           margin-top: $image-editor-ddbtn-margin-top;
-          @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
+          @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
             background: $tbar-default-bg;
             color: $tbar-default-icon-color;
           }
@@ -54,7 +59,12 @@
           &:hover {
             background: $tbar-hover-bg;
             box-shadow: none;
-            color: $tbar-hover-font;
+            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
+              color: $secondary-text-color;
+            }
+            @else {
+              color: $tbar-hover-font;
+            }
           }
 
           &:focus {
@@ -126,6 +136,17 @@
           background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') !important; /* stylelint-disable-line declaration-no-important */
           background-size: 8px !important; /* stylelint-disable-line declaration-no-important */
         }
+
+        & .e-toolbar-item.e-overlay .e-btn {
+          box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
+          @if $skin-name == 'fluent2' {
+            background: $content-bg-color-alt1 !important; /* stylelint-disable-line declaration-no-important */
+
+            &:focus .e-icons {
+              color: $icon-color-disabled !important; /* stylelint-disable-line declaration-no-important */
+            }
+          }
+        }
       }
     }
   }
@@ -133,7 +154,7 @@
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
+    @if $skin-name != 'highcontrast' and $theme-name != 'bootstrap5.3' and $theme-name != 'bootstrap5.3-dark' {
       background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     }
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
@@ -143,11 +164,27 @@
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }
+
+  & .e-item.e-selected-btn {
+    @if $skin-name == 'fluent2' {
+      color: $flyout-text-color-selected;
+    }
+    @if $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
+      background-color: $content-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
+      color: $content-text-color-selected !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
 }
 
 .e-ie-filter-canvas:focus,
 .filter-wrapper:focus .e-ie-filter-canvas,
 .filter-wrapper:focus canvas,
 .filter-wrapper canvas:focus {
-  border: $image-editor-filter-canvas-focus;
+  border-color: $image-editor-filter-canvas-focus !important; /* stylelint-disable-line declaration-no-important */
+}
+
+@if $skin-name == 'fluent2' {
+  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-active {
+    background-color: $secondary-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
+  }
 }