@syncfusion/ej2-image-editor 26.1.38 → 26.1.41

package/styles/fabric.css

@@ -804,4 +804,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #dadada !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: 1px solid #000;
 }

package/styles/fluent-dark.css

@@ -814,4 +814,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #323130 !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: 1px solid #fff;
 }

package/styles/fluent.css

@@ -814,4 +814,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #e1dfdd !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: 1px solid #323130;
 }

package/styles/fluent2.css

@@ -207,7 +207,7 @@
   --color-sf-info-outline: var(--color-sf-info-border-color);
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -478,7 +478,7 @@
   --color-sf-success-bg-color: #218c21;
   --color-sf-success-border-color: var(--color-sf-success-bg-color);
   --color-sf-success-text: var(--color-sf-primary-text-color);
-  --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
+  --color-sf-success-bg-color-hover: #0e700e;
   --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
   --color-sf-success-text-hover: var(--color-sf-primary-text-color);
   --color-sf-success-bg-color-pressed: #052505;
@@ -496,7 +496,7 @@
   --color-sf-warning-bg-color: #f87528;
   --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
   --color-sf-warning-text: #242424;
-  --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
+  --color-sf-warning-bg-color-hover: #de590b;
   --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
   --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
   --color-sf-warning-bg-color-pressed: #4a1e04;
@@ -555,7 +555,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -897,7 +897,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-border-light);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
   --color-sf-appbar-bg-color-alt1: #fff;
@@ -1849,4 +1849,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: var(--color-sf-content-bg-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: 1px solid var(--color-sf-secondary-text-color);
 }

package/styles/highcontrast-light.css

@@ -797,4 +797,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #000 !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: 1px solid #000;
 }

package/styles/highcontrast.css

@@ -802,4 +802,11 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-nocolor-item {
   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-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #fff;
 }

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 0 10px !default;
 $image-editor-save-dlg-grp-btn-padding: 0 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 0 15px !default;
 $image-editor-icon-button: 3px !default;
+$image-editor-filter-canvas-focus: 1px solid $gray-25 !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-grp-btn-padding: 0 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 0 12px !default;
 $image-editor-button-label: 14.2px !default;
 $image-editor-icon-button: 3px !default;
+$image-editor-filter-canvas-focus: 1px solid $grey-dark-font !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 0 10px !default;
 $image-editor-save-dlg-grp-btn-padding: 0 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 0 12px !default;
 $image-editor-icon-button: 2px !default;
+$image-editor-filter-canvas-focus: 1px solid $grey-light-font !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 4px 9px !default;
 $image-editor-save-dlg-grp-btn-padding: 4px 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 4px 12px !default;
 $image-editor-icon-button: 2px !default;
+$image-editor-filter-canvas-focus: 1px solid $black !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-grp-btn-padding: 4px 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 6px 13px !default;
 $image-editor-button-label: 15px !default;
 $image-editor-icon-button: 4px !default;
+$image-editor-filter-canvas-focus: 2px solid $icon-color !default;

package/styles/image-editor/_bootstrap5.3-definition.scss

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 4px 15px !default;
 $image-editor-save-dlg-grp-btn-padding: 4px 12px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 6px 13px !default;
 $image-editor-icon-button: 4px !default;
+$image-editor-filter-canvas-focus: 2px solid $icon-color !default;

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

@@ -24,3 +24,4 @@ $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: 2px 8px !default;
 $image-editor-icon-button: 4px !default;
+$image-editor-filter-canvas-focus: 1px solid $neutral-light-fontalt !default;

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

@@ -24,3 +24,4 @@ $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: 2px 8px !default;
 $image-editor-icon-button: 4px !default;
+$image-editor-filter-canvas-focus: 1px solid $neutral-light-fontalt !default;

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

@@ -24,3 +24,4 @@ $image-editor-save-dlg-big-btn-pad: 4px 15px !default;
 $image-editor-save-dlg-grp-btn-padding: 4px 11px !default;
 $image-editor-save-dlg-dev-grp-btn-padding: 7px 10px !default;
 $image-editor-icon-button: 5px !default;
+$image-editor-filter-canvas-focus: 1px solid $secondary-text-color !default;

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

@@ -24,3 +24,4 @@ $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;

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

@@ -22,3 +22,4 @@ $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;

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

@@ -24,3 +24,4 @@ $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;

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

@@ -24,3 +24,4 @@ $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;

package/styles/image-editor/_layout.scss

@@ -483,6 +483,14 @@
         }
       }
     }
+    & .e-ie-save-dialog .e-slider-container .e-slider .e-handle,
+    & .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+      @if $skin-name == 'Material3' {
+        height: 16px !important; /* stylelint-disable-line declaration-no-important */
+        top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+        width: 16px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
   }
   
   .e-ie-img-save-dlg .e-btn {
@@ -688,7 +696,7 @@
     @if $skin-name == 'highcontrast' {
       margin-left: calc(100% - 175px);
     }
-    @if $skin-name == 'FluentUI' or $skin-name == 'material' or $skin-name == 'Material3' {
+    @if $skin-name == 'FluentUI' or $skin-name == 'material' {
       margin-left: calc(100% - 185px);
     }
     @if $skin-name == 'fabric' {
@@ -697,6 +705,9 @@
     @if $skin-name == 'fluent2' {
       margin-left: calc(100% - 188px);
     }
+    @if $skin-name == 'Material3' {
+      margin-left: calc(100% - 190px);
+    }
   }
 
   .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
@@ -719,6 +730,9 @@
     @if $skin-name == 'bootstrap5' {
       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 {
@@ -816,7 +830,12 @@
 
     & .e-ie-img-size-value-span {
       vertical-align: middle;
-      margin-left: calc(50% - 55px);
+      @if $skin-name == 'Material3' {
+        margin-left: calc(50% - 52px);
+      }
+      @else {
+        margin-left: calc(50% - 55px);
+      }
     }
 
     & .e-btn-group .e-btn {
@@ -847,10 +866,10 @@
       }
  
       & .e-ie-img-size-value-span {
-        @if $skin-name == 'Material3' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
           margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
-        @else if $skin-name == 'bootstrap' {
+        @else if $skin-name == 'Material3' or $skin-name == 'bootstrap' {
           margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
         }
         @else if $skin-name == 'tailwind' {
@@ -873,6 +892,12 @@
     }
   }
 
+  .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+    @if $skin-name == 'Material3' {
+      top: calc(50% - 8px) !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' {

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

@@ -24,3 +24,4 @@ $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;

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

@@ -24,3 +24,4 @@ $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;

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

@@ -24,3 +24,4 @@ $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;

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

@@ -24,3 +24,4 @@ $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;

package/styles/image-editor/_theme.scss

@@ -111,3 +111,10 @@
     }
   }
 }
+
+.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;
+}

package/styles/image-editor/bootstrap-dark.css

@@ -799,4 +799,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #959595 !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: 1px solid #f0f0f0;
 }

package/styles/image-editor/bootstrap.css

@@ -801,4 +801,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #e6e6e6 !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: 1px solid #333;
 }

package/styles/image-editor/bootstrap4.css

@@ -796,4 +796,11 @@
 .e-dropdown-popup .e-selected-btn {
   background: #495057 !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !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: 1px solid #000;
 }

package/styles/image-editor/bootstrap5-dark.css

@@ -813,4 +813,11 @@
 .e-dropdown-popup .e-selected-btn {
   background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !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: 2px solid #adb5bd;
 }

package/styles/image-editor/bootstrap5.css

@@ -813,4 +813,11 @@
 .e-dropdown-popup .e-selected-btn {
   background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !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: 2px solid #6c757d;
 }

package/styles/image-editor/fabric-dark.css

@@ -801,4 +801,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #4a4848 !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: 1px solid #fff;
 }

package/styles/image-editor/fabric.css

@@ -804,4 +804,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #dadada !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: 1px solid #000;
 }

package/styles/image-editor/fluent-dark.css

@@ -814,4 +814,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #323130 !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: 1px solid #fff;
 }

package/styles/image-editor/fluent.css

@@ -814,4 +814,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #e1dfdd !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: 1px solid #323130;
 }

package/styles/image-editor/fluent2.css

@@ -207,7 +207,7 @@
   --color-sf-info-outline: var(--color-sf-info-border-color);
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -478,7 +478,7 @@
   --color-sf-success-bg-color: #218c21;
   --color-sf-success-border-color: var(--color-sf-success-bg-color);
   --color-sf-success-text: var(--color-sf-primary-text-color);
-  --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
+  --color-sf-success-bg-color-hover: #0e700e;
   --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
   --color-sf-success-text-hover: var(--color-sf-primary-text-color);
   --color-sf-success-bg-color-pressed: #052505;
@@ -496,7 +496,7 @@
   --color-sf-warning-bg-color: #f87528;
   --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
   --color-sf-warning-text: #242424;
-  --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
+  --color-sf-warning-bg-color-hover: #de590b;
   --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
   --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
   --color-sf-warning-bg-color-pressed: #4a1e04;
@@ -555,7 +555,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -897,7 +897,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-border-light);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
   --color-sf-appbar-bg-color-alt1: #fff;
@@ -1849,4 +1849,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: var(--color-sf-content-bg-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: 1px solid var(--color-sf-secondary-text-color);
 }

package/styles/image-editor/highcontrast-light.css

@@ -797,4 +797,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #000 !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: 1px solid #000;
 }

package/styles/image-editor/highcontrast.css

@@ -802,4 +802,11 @@
 .e-image-editor .e-toolbar .e-toolbar-items .e-nocolor-item {
   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-ie-filter-canvas:focus,
+.filter-wrapper:focus .e-ie-filter-canvas,
+.filter-wrapper:focus canvas,
+.filter-wrapper canvas:focus {
+  border: 1px solid #fff;
 }

package/styles/image-editor/material-dark.css

@@ -823,4 +823,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #757575 !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: 1px solid #fff;
 }

package/styles/image-editor/material.css

@@ -831,4 +831,11 @@
 
 .e-dropdown-popup .e-selected-btn {
   background: #bdbdbd !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: 1px solid #000;
 }

package/styles/image-editor/material3-dark.css

@@ -541,6 +541,11 @@
   top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
   width: 16px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-ie-save-dialog .e-slider-container .e-slider .e-handle, .e-image-editor .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+  height: 16px !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
+  width: 16px !important; /* stylelint-disable-line declaration-no-important */
+}
 
 .e-ie-img-save-dlg .e-btn {
   background: transparent;
@@ -740,11 +745,12 @@
   text-transform: capitalize;
   margin-left: calc(100% - 194px);
   margin-top: 4px;
-  margin-left: calc(100% - 185px);
+  margin-left: calc(100% - 190px);
 }
 
 .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
   margin-left: calc(100% - 145px) !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
@@ -802,7 +808,7 @@
 }
 .e-blr-ie-save-dialog .e-ie-img-size-value-span {
   vertical-align: middle;
-  margin-left: calc(50% - 55px);
+  margin-left: calc(50% - 52px);
 }
 .e-blr-ie-save-dialog .e-btn-group .e-btn {
   padding: 8px 10.5px;
@@ -821,11 +827,15 @@
   height: 28px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-blr-ie-save-dialog.e-device .e-ie-img-size-value-span {
-  margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
+  margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-blr-ie-save-dialog.e-device .e-btn-group .e-btn {
   padding: 11px 12px;
 }
+.e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
+  top: calc(50% - 8px) !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 */
 }
@@ -905,4 +915,11 @@
 .e-dropdown-popup .e-selected-btn {
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.16)), to(rgba(var(--color-sf-primary), 0.16))), rgba(var(--color-sf-surface)) !important;
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.16), rgba(var(--color-sf-primary), 0.16)), rgba(var(--color-sf-surface)) !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: 1px solid var(--color-sf-on-surface-variant);
 }