@syncfusion/ej2-image-editor 26.1.41 → 26.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.1.41
+*  version : 26.2.5
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/hotfix/26.1.35_Vol2.txt

@@ -0,0 +1 @@
+hotfix/26.1.35_Vol2

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@26.1.40",
+  "_id": "@syncfusion/ej2-image-editor@26.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-JkKZm0ZX+CT8SxX4R5rwflCIAkpN+SNRGGzqoaA0Ds/tZyeZ3sGWV4oRubOw7CYi1mvFhdc5d9324shHPz/bjA==",
+  "_integrity": "sha512-qP15xeRZJ0LuRT3Na9Sa/tWg3mYzNzYlBzPuPod6ILfk4WEbo8/tH7JV5cipBpyXrsdHBd9fXZ+0nOpWEW0Tfg==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-26.1.40.tgz",
-  "_shasum": "3fbde6876ebd51369e500d656bbf616aeeb2bac7",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-26.2.4.tgz",
+  "_shasum": "ac77b28875b507241c3f70bfc279d5debb727a84",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -32,13 +32,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.1.37",
-    "@syncfusion/ej2-buttons": "~26.1.40",
-    "@syncfusion/ej2-dropdowns": "~26.1.41",
-    "@syncfusion/ej2-inputs": "~26.1.41",
-    "@syncfusion/ej2-navigations": "~26.1.41",
-    "@syncfusion/ej2-popups": "~26.1.41",
-    "@syncfusion/ej2-splitbuttons": "~26.1.35"
+    "@syncfusion/ej2-base": "~26.2.5",
+    "@syncfusion/ej2-buttons": "~26.2.5",
+    "@syncfusion/ej2-dropdowns": "~26.2.5",
+    "@syncfusion/ej2-inputs": "~26.2.5",
+    "@syncfusion/ej2-navigations": "~26.2.5",
+    "@syncfusion/ej2-popups": "~26.2.5",
+    "@syncfusion/ej2-splitbuttons": "~26.2.5"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -68,7 +68,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "26.1.41",
+  "version": "26.2.5",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/image-editor/action/selection.js

@@ -950,6 +950,10 @@ var Selection = /** @class */ (function () {
                 return;
             }
             var actObj = extend({}, obj[i], {}, true);
+            if (actObj.activePoint.width === 0 && actObj.activePoint.height === 0) {
+                obj.splice(i, 1);
+                return;
+            }
             this.cursorTargetId = actObj.currIndex;
             if (actObj.shape === 'line' || actObj.shape === 'arrow') {
                 this.setCursorForLineArrow(actObj, x, y, upperCanvas);
@@ -3539,7 +3543,6 @@ var Selection = /** @class */ (function () {
                         var tempObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
                         parent.objColl.pop();
                         this.redrawShape(tempObj);
-                        parent.objColl.push(tempObj);
                         this.tempObjColl = undefined;
                     }
                     if (!this.isFhdEditing) {
@@ -4025,10 +4028,10 @@ var Selection = /** @class */ (function () {
                 this.panDown = null;
                 parent.notify('transform', { prop: 'setPanMove', onPropertyChange: false,
                     value: { point: null } });
-                parent.notify('transform', { prop: 'setTempPanMove', onPropertyChange: false,
-                    value: { point: null } });
             }
         }
+        parent.notify('transform', { prop: 'setTempPanMove', onPropertyChange: false,
+            value: { point: null } });
         if (this.currentDrawingShape !== 'path') {
             parent.currObjType.isDragging = false;
         }

package/src/image-editor/action/transform.js

@@ -1557,7 +1557,8 @@ var Transform = /** @class */ (function () {
             if (freehandObj['bool']) {
                 parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
             }
-            if (parent.activeObj.shape !== undefined) {
+            var actPoint = extend({}, parent.activeObj.activePoint, {}, true);
+            if (parent.activeObj.shape && (actPoint.width !== 0 || actPoint.height !== 0)) {
                 isActiveObj = true;
                 if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
                     parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,

package/src/image-editor/base/image-editor.js

@@ -2576,7 +2576,12 @@ var ImageEditor = /** @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.updateArrow = function (type, id) {
+        var isObjPushed = false;
+        var collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var object = { currObj: {} };
         var objt = { shapeSettingsObj: {} };
@@ -2587,7 +2592,9 @@ var ImageEditor = /** @class */ (function (_super) {
         prevObj.objColl = extend([], this.objColl, [], true);
         prevObj.pointColl = extend([], this.pointColl, [], true);
         prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         if (type === 'startArrow') {
             this.activeObj.start = this.getTextFromId(id);
         }
@@ -2631,7 +2638,12 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.updateFontFamily = function (id) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        var isObjPushed = false;
+        var collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         var objColl = extend([], this.objColl, [], true);
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var objt = { shapeSettingsObj: {} };
@@ -2647,7 +2659,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
             this.notify('shape', { prop: 'updateFontRatio', onPropertyChange: false,
                 value: { obj: this.activeObj, isTextArea: true } });
@@ -2707,7 +2721,12 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.updateFontSize = function (text) {
         var itemText = text;
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        var isObjPushed = false;
+        var collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var objt = { shapeSettingsObj: {} };
         this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
@@ -2722,7 +2741,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
             this.notify('shape', { prop: 'updateFontRatio', onPropertyChange: false,
                 value: { obj: this.activeObj, isTextArea: true } });
@@ -2810,7 +2831,12 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.updateFontColor = function (value) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        var isObjPushed = false;
+        var collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var objt = { shapeSettingsObj: {} };
         this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
@@ -2825,7 +2851,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         if (this.textArea.style.display === 'none') {
             this.activeObj.strokeSettings.strokeColor = value;
             this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null,
@@ -3002,7 +3030,12 @@ var ImageEditor = /** @class */ (function (_super) {
             var obj = { shapeSettingsObj: {} };
             this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
             var shapeSettings = obj['shapeSettingsObj'];
+            var isObjPushed = false;
+            var collLength = this.objColl.length;
             this.notify('shape', { prop: 'pushActItemIntoObj' });
+            if (collLength !== this.objColl.length) {
+                isObjPushed = true;
+            }
             var prevCropObj = extend({}, this.cropObj, {}, true);
             var object = { currObj: {} };
             this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -3014,7 +3047,9 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
                 value: { obj: selPointCollObj } });
             prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-            this.objColl.pop();
+            if (isObjPushed) {
+                this.objColl.pop();
+            }
             this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10);
             if (this.activeObj.shape === 'rectangle' || this.activeObj.shape === 'ellipse') {
                 this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10) - 1;
@@ -3056,7 +3091,12 @@ var ImageEditor = /** @class */ (function (_super) {
         var shapeSettings = objt['shapeSettingsObj'];
         if (this.activeObj.shape && (this.activeObj.shape !== 'path' || (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length > 0))) {
+            var isObjPushed = false;
+            var collLength = this.objColl.length;
             this.notify('shape', { prop: 'pushActItemIntoObj' });
+            if (collLength !== this.objColl.length) {
+                isObjPushed = true;
+            }
             var prevCropObj = extend({}, this.cropObj, {}, true);
             var object = { currObj: {} };
             this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -3068,7 +3108,9 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
                 value: { obj: selPointCollObj } });
             prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-            this.objColl.pop();
+            if (isObjPushed) {
+                this.objColl.pop();
+            }
             this.activeObj.strokeSettings.strokeColor = value;
             this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: this.activeObj.strokeSettings.strokeColor, fillColor: null, strokeWidth: null } });
             if (!this.togglePen) {
@@ -3103,7 +3145,12 @@ var ImageEditor = /** @class */ (function (_super) {
         var obj = { shapeSettingsObj: {} };
         this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
         var shapeSettings = obj['shapeSettingsObj'];
+        var isObjPushed = false;
+        var collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         var prevCropObj = extend({}, this.cropObj, {}, true);
         var object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -3115,7 +3162,9 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         this.activeObj.strokeSettings.fillColor = value;
         this.notify('shape', { prop: 'setStrokeSettings',
             value: { strokeSettings: null, strokeColor: null, fillColor: this.activeObj.strokeSettings.fillColor,

package/src/image-editor/renderer/toolbar.js

@@ -1649,7 +1649,7 @@ var ToolbarModule = /** @class */ (function () {
         }
         var fileObj = { fileName: '', fileType: '' };
         parent.notify('draw', { prop: 'getFileName', onPropertyChange: false, value: { obj: fileObj } });
-        this.fileType = fileObj['fileType'];
+        this.fileType = fileObj['fileType'] ? fileObj['fileType'] : 'JPEG';
         parent.notify('export', { prop: 'exportToCanvas', value: { object: obj } });
         var tempCanvas = obj['canvas'];
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -1661,7 +1661,7 @@ var ToolbarModule = /** @class */ (function () {
         var ddbElem = document.getElementById(id + '_saveDropdownbtn');
         if (ddbElem) {
             var spanElem_1 = document.createElement('span');
-            spanElem_1.innerHTML = fileObj['fileType'].toUpperCase();
+            spanElem_1.innerHTML = this.fileType.toUpperCase();
             if (ddbElem) {
                 ddbElem.appendChild(spanElem_1);
             }
@@ -2872,6 +2872,15 @@ var ToolbarModule = /** @class */ (function () {
                     args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'z-order', 'duplicate', 'remove'];
                 }
                 this.initShapesToolbarItem(args.toolbarItems);
+                if (parent.activeObj.shape === 'image') {
+                    var actObj = extend({}, parent.activeObj, {}, true);
+                    parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.activeObj = actObj;
+                    parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj,
+                            isCropRatio: null, points: null, isPreventDrag: true } });
+                    this.renderQAT(false);
+                }
                 break;
             case 'text':
                 if (Browser.isDevice) {
@@ -2955,14 +2964,14 @@ var ToolbarModule = /** @class */ (function () {
                 parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
                 break;
         }
-        this.currToolbar = type;
         this.refreshDropDownBtn(isCropping);
-        this.updateKBDNavigation(this.currToolbar);
+        this.updateKBDNavigation(type);
+        this.currToolbar = type;
     };
     ToolbarModule.prototype.updateKBDNavigation = function (type) {
         var parent = this.parent;
         var id = parent.element.id;
-        if (!parent.isKBDNavigation) {
+        if (!parent.isKBDNavigation || this.currToolbar === type) {
             return;
         }
         if (this.isToolbar()) {
@@ -5454,8 +5463,10 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 parent.notify('selection', { prop: 'setSliderActive', onPropertyChange: false, value: { bool: false } });
                 if (type === 'transparency') {
-                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
-                    parent.element.querySelector('#' + parent.element.id + '_transparency').click();
+                    setTimeout(function () {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                        parent.element.querySelector('#' + parent.element.id + '_transparency').click();
+                    }, 50);
                 }
             }
         });

package/styles/bootstrap-dark.css

@@ -757,8 +757,6 @@
   background: inherit;
   border: none;
   margin-top: 2px;
-  background: #131313;
-  color: #f0f0f0;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */

package/styles/bootstrap.css

@@ -759,8 +759,6 @@
   background: inherit;
   border: none;
   margin-top: 2px;
-  background: #f8f8f8;
-  color: #333;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */

package/styles/bootstrap4.css

@@ -770,6 +770,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  -webkit-box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important;
+          box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #545b62;

package/styles/bootstrap5-dark.css

@@ -787,6 +787,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important;
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #565e64;

package/styles/bootstrap5.css

@@ -787,6 +787,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important;
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #565e64;

package/styles/fabric-dark.css

@@ -759,8 +759,6 @@
   background: inherit;
   border: none;
   margin-top: 0;
-  background: #333232;
-  color: #dadada;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -776,6 +774,7 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #6f6c6c;

package/styles/fabric.css

@@ -762,8 +762,6 @@
   background: inherit;
   border: none;
   margin-top: 0;
-  background: #fff;
-  color: #333;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -779,6 +777,7 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #333;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #c8c8c8;

package/styles/fluent-dark.css

@@ -772,8 +772,6 @@
   background: inherit;
   border: none;
   margin-top: 2px;
-  background: #252423;
-  color: #a19f9d;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -789,6 +787,9 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
+  -webkit-box-shadow: inset 0 0 0 1px !important;
+          box-shadow: inset 0 0 0 1px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #292827;

package/styles/fluent.css

@@ -772,8 +772,6 @@
   background: inherit;
   border: none;
   margin-top: 2px;
-  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 */
@@ -789,6 +787,9 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #323130;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
+  -webkit-box-shadow: inset 0 0 0 1px !important;
+          box-shadow: inset 0 0 0 1px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #edebe9;

package/styles/fluent2.css

@@ -47,7 +47,7 @@
   --color-sf-flyout-bg-color-pressed: #e0e0e0;
   --color-sf-flyout-bg-color-selected: #ebebeb;
   --color-sf-flyout-bg-color-focus: #f5f5f5;
-  --color-sf-overlay-bg-color: #000;
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #f5f5f5;
   --color-sf-table-bg-color-pressed: #e0e0e0;
   --color-sf-table-bg-color-selected: #ebf3fc;
@@ -369,7 +369,7 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
   --color-sf-flyout-bg-color-selected: #383838;
   --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
   --color-sf-table-bg-color-hover: #383838;
   --color-sf-table-bg-color-pressed: #2e2e2e;
   --color-sf-table-bg-color-selected: #082338;
@@ -711,9 +711,9 @@
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
-  --color-sf-overlay-bg-color: rgba($black, .4);
-  --color-sf-table-bg-color-hover: var(--color-sf-black);
-  --color-sf-table-bg-color-pressed: var(--color-sf-black);
+  --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
+  --color-sf-table-bg-color-hover: #1a3bff;
+  --color-sf-table-bg-color-pressed: #1a3bff;
   --color-sf-table-bg-color-selected: #1a3bff;
   --color-sf-content-text-color: #fff;
   --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
@@ -732,12 +732,12 @@
   --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
-  --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
-  --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
+  --color-sf-table-text-color-hover: #000;
+  --color-sf-table-text-color-pressed: #000;
+  --color-sf-table-text-color-selected: #000;
   --color-sf-icon-color: #fff;
-  --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
-  --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
+  --color-sf-icon-color-hover: #000;
+  --color-sf-icon-color-pressed: #000;
   --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
   --color-sf-border-light: #fff;
   --color-sf-border: var(--color-sf-border-light);
@@ -1345,6 +1345,11 @@
 .e-image-editor.e-bigger .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
   line-height: 1;
 }
+.e-bigger .e-image-editor .e-dropdown-btn.e-ie-ddb-popup,
+.e-image-editor.e-bigger .e-dropdown-btn.e-ie-ddb-popup {
+  padding-left: 16px;
+}
+
 .e-image-editor {
   border: 1px solid var(--color-sf-border-light);
   position: relative;
@@ -1514,6 +1519,13 @@
   margin-left: calc(50% - 137px);
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-dropdown-btn.e-ie-ddb-popup {
+  padding-left: 14px;
+}
+.e-image-editor .e-dropdown-btn, .e-image-editor .e-dropdown-btn span {
+  font-weight: normal;
+}
+
 .e-ie-straighten-value-span,
 .e-ie-straighten-span,
 .e-ie-toolbar-straighten {
@@ -1807,8 +1819,6 @@
   background: inherit;
   border: none;
   margin-top: 0;
-  background: var(--color-sf-content-bg-color-alt1);
-  color: var(--color-sf-icon-color);
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -1825,6 +1835,10 @@
           box-shadow: none;
   color: var(--color-sf-secondary-text-color-hover);
 }
+.e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus-visible {
+  -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1) !important;
+          box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1) !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: var(--color-sf-secondary-bg-color-pressed);
   -webkit-box-shadow: none;

package/styles/highcontrast-light.css

@@ -755,8 +755,7 @@
   background: inherit;
   border: none;
   margin-top: 0;
-  background: #fff;
-  color: #000;
+  border: 2px solid #000;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -772,6 +771,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #000;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
+  border: 2px solid #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #400074;

package/styles/highcontrast.css

@@ -764,8 +764,7 @@
   background: inherit;
   border: none;
   margin-top: 0;
-  background: #000;
-  color: #fff;
+  border: 2px solid #000;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   display: none !important; /* stylelint-disable-line declaration-no-important */
@@ -781,6 +780,8 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
+  border: 2px solid #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
   background: #ffd939;

package/styles/image-editor/_layout.scss

@@ -185,6 +185,12 @@
         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 {
@@ -491,6 +497,16 @@
         width: 16px !important; /* stylelint-disable-line declaration-no-important */
       }
     }
+
+    @if $skin-name == 'fluent2' {
+      & .e-dropdown-btn.e-ie-ddb-popup {
+        padding-left: 14px;
+      }
+      & .e-dropdown-btn,
+      & .e-dropdown-btn span {
+        font-weight: normal;
+      }
+    }
   }
   
   .e-ie-img-save-dlg .e-btn {