@syncfusion/ej2-image-editor 31.2.16 → 32.1.19

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

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
 
 $image-editor-background: color.adjust($grey-black, $lightness: 16%) !default;
 $image-editor-border: 1px solid $grey-600 !default;
@@ -29,3 +31,52 @@ $image-editor-icon-button: 5px !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;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/material' as *;
+@forward 'ej2-base/styles/definition/material';
 $image-editor-background: $grey-200 !default;
 $image-editor-border: 1px solid $grey-400 !default;
 $image-editor-toolbar-icon-color: $grey-600;
@@ -27,3 +29,52 @@ $image-editor-icon-button: 5px !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;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;

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

@@ -1 +1,82 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+
+$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-alt6 !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;
+$image-editor-drop-border: 2px dashed rgba($icon-color);
+$image-editor-dropdown-btn-preview-top: -2px !default;
+$image-editor-dropdown-btn-preview-left: -9px !default;
+$image-editor-bigger-dropdown-btn-preview-top: -1px !default;
+$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: 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: $icon-color !default;
+$image-editor-button-label-mobile: 12px !default;
+$image-editor-button-width-mobile: calc(65% - 30px) !default;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-img-save-dlg-btn-radius: 0 !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
+
 $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);
@@ -27,3 +30,53 @@ $image-editor-icon-button: 3px !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;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-img-save-dlg-btn-radius: 0 !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;

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

@@ -1 +1,81 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+
+$image-editor-background: $border-light !default;
+$image-editor-border: 1px solid $image-editor-background !default;
+$image-editor-toolbar-icon-color: $icon-color !default;
+$img-editor-cp-preview-border-bottom-color: $black !default;
+$image-editor-icon-sel-bg-color: $content-bg-color-alt3 !default;
+$image-editor-ddbtn-margin-top: 2px !default;
+$image-editor-tbar-height: 38px !default;
+$image-editor-bigger-tbar-height: 48px !default;
+$image-editor-tbar-btn-fontsize: $text-lg !default;
+$image-editor-bigger-tbar-btn-fontsize: $text-xl !default;
+$image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
+$image-editor-drop-border: 2px dashed $icon-color !default;
+$image-editor-dropdown-btn-preview-top: -2px !default;
+$image-editor-dropdown-btn-preview-left: -6px !default;
+$image-editor-bigger-dropdown-btn-preview-top: -2px !default;
+$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: 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: $secondary-text-color !default;
+$image-editor-button-label-mobile: 6px !default;
+$image-editor-button-width-mobile: calc(65% - 30px) !default;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
+
 $image-editor-background: $border-light !default;
 $image-editor-border: 1px solid $image-editor-background !default;
 $image-editor-toolbar-icon-color: $icon-color !default;
@@ -27,3 +30,52 @@ $image-editor-icon-button: 2.9px !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;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-area-border-radius: 10px !default;
+$ie-drop-area-margin: 10px !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: 14px !default;
+$ie-drop-info-font-size: 14px !default;
+$ie-min-drop-content-font-size: 14px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-font-color-caret-margin-top: -4px !default;
+$ie-caret-font-size: 10px !default;
+$ie-toolbar-left-line-height: 1 !default;
+$ie-toolbar-item-span-font-weight: 500 !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: 14px !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 10px 10px 0 !default;
+$ie-img-size-font-size: 14px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: 14px !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: 400 !default;
+$ie-finetune-slider-container: 0 16px 1px 16px !default;
+$ie-default-toolbar-font-size: 12px !default;
+$ie-bigger-default-toolbar-font-size: 14px !default;
+$ie-tbtn-txt-padding: 0 !default;
+$ie-head-wrapper-height: 58px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-caret-margin-top: -4px !default;
+$ie-bigger-dropdown-caret-font-size: 10px !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-device-finetune-font-size: 16px !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 58px !default;

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

@@ -1,9 +1,11 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
 $image-editor-background: $content-bg-color !default;
 $image-editor-border: 1px solid $border !default;
 $image-editor-toolbar-icon-color: $icon-color !default;
 $img-editor-cp-preview-border-bottom-color: $black !default;
 $image-editor-icon-sel-bg-color: $secondary-bg-color-focus !default;
-$image-editor-ddbtn-margin-top: -1px !default;
+$image-editor-ddbtn-margin-top: 0 !default;
 $image-editor-tbar-height: 48px !default;
 $image-editor-bigger-tbar-height: 56px !default;
 $image-editor-tbar-btn-fontsize: $text-base !default;
@@ -27,3 +29,75 @@ $image-editor-icon-button: 4px !default;
 $image-editor-filter-canvas-focus: $icon-color !default;
 $image-editor-button-label-mobile: 9px !default;
 $image-editor-button-width-mobile: calc(65% - 30px) !default;
+$ie-toolbar-img-font-style-margin-left: 0 !default;
+$ie-scroll-device-padding-right: 0 !default;
+$ie-toolbar-area-toolbar-border-radius: 0 !default;
+$ie-quality-option-slider-container-margin-left: 0 !default;
+$ie-spin-btn-margin: 0 !default;
+$ie-drop-icon-font-size: 50px !default;
+$ie-drop-content-font-size: $text-base !default;
+$ie-drop-content-font-weight: $font-weight-normal !default;
+$ie-drop-content-line-height: 24px !default;
+$ie-drop-content-letter-spacing: normal !default;
+$ie-drop-content-margin: 12px 44px !default;
+$ie-drop-browse-font-weight: $font-weight-semibold !default;
+$ie-drop-info-font-size: $text-sm !default;
+$ie-drop-info-font-weight: $font-weight-normal !default;
+$ie-drop-info-line-height: 20px !default;
+$ie-drop-info-letter-spacing: normal !default;
+$ie-drop-info-margin: 0 44px !default;
+$ie-min-drop-content-font-size: $text-base !default;
+$ie-min-drop-content-font-weight: $font-weight-normal !default;
+$ie-min-drop-content-line-height: 24px !default;
+$ie-min-drop-content-letter-spacing: normal !default;
+$ie-min-drop-content-margin: 12px 52px !default;
+$ie-toolbar-item-margin-left: 20px !default;
+$ie-file-select-padding: 0 !default;
+$ie-caret-font-size: $text-xxs !default;
+$ie-toolbar-left-line-height: 48px !default;
+$ie-toolbar-item-span-font-weight: $font-weight-medium !default;
+$ie-toolbar-item-span-margin: 4px !default;
+$ie-dropdown-btn-margin: 0 auto !default;
+$ie-toolbar-item-canvas-border: 2px solid transparent !default;
+$ie-straighten-font-size: $text-sm !default;
+$ie-straighten-padding-x: 10px !default;
+$ie-straighten-slider-padding-right: 2px !default;
+$ie-straighten-slider-margin-left: 8px !default;
+$ie-quality-slider-icon-margin-left: 20px !default;
+$ie-img-size-margin: 8px 0 0 !default;
+$ie-img-size-font-size: $text-xs !default;
+$ie-img-size-line-height: 16px !default;
+$ie-img-save-name-margin-right: 10px !default;
+$ie-img-save-dlg-btn-font-weight: $font-weight-normal !default;
+$ie-img-label-name-font-weight: $font-weight-medium !default;
+$ie-img-label-name-margin-bottom: 5px !default;
+$ie-quality-info-margin: 0 !default;
+$ie-quality-span-margin-left: 5px !default;
+$ie-img-quality-label-font-weight: $font-weight-medium !default;
+$ie-img-size-value-span-margin-top: 4px !default;
+$ie-img-icon-btn-margin-left: 10px !default;
+$ie-quality-option-icon-margin-left: 0 !default;
+$ie-finetune-font-size: $text-sm !default;
+$ie-finetune-line-height: 20px !default;
+$ie-finetune-letter-spacing: normal !default;
+$ie-finetune-font-weight: $font-weight-normal !default;
+$ie-finetune-slider-container: 0 16px !default;
+$ie-content-text-color: $content-text-color !default;
+$ie-browse-text-color: $primary-bg-color !default;
+$ie-drop-info-text-color: $content-text-color-alt2 !default;
+$ie-default-toolbar-font-size: $text-xs !default;
+$ie-bigger-default-toolbar-font-size: $text-sm !default;
+$ie-content-text-color-alt1: $content-text-color-alt1 !default;
+$ie-upload-icon-padding: 0 !default;
+$ie-head-wrapper-height: 60px !default;
+$ie-dropdownbtn-preview-size: 18px !default;
+$ie-bigger-dropdown-caret-font-size: $text-xxs !default;
+$ie-bigger-toolbar-left-line-height: 1 !default;
+$ie-bigger-toolbar-border-radius: 0 !default;
+$ie-bigger-img-size-font-size: $text-sm !default;
+$ie-bigger-img-size-line-height: 20px !default;
+$ie-bigger-img-size-margin-top: 9px 0 0 !default;
+$ie-bigger-qat-toolbar-border-radius: 8px !default;
+$ie-bigger-device-finetune-font-size: $text-base !default;
+$ie-bigger-device-finetune-line-height: 24px !default;
+$ie-bigger-head-wrapper-height: 64px !default;

package/styles/image-editor/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/image-editor/_theme.scss

@@ -1,5 +1,8 @@
 @use 'sass:color';
-
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
+@use 'ej2-buttons/styles/button/theme-variables' as button-vars;
+@use 'ej2-navigations/styles/toolbar/theme-variables' as tbar-vars;
 @include export-module('image-editor-theme') {
   .e-image-editor {
     background: $image-editor-background;
@@ -11,17 +14,30 @@
       & .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 */
+        border-color: button-vars.$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 */
+        border-color: button-vars.$btn-active-bgcolor !important; /* stylelint-disable-line declaration-no-important */
       }
     }
 
     & .e-toolbar {
       & .e-toolbar-items {
+        & .e-toolbar-item {
+          &.e-ie-resize-height,
+          &.e-ie-resize-width,
+          &.e-stroke,
+          &.e-frame-stroke,
+          &.e-size,
+          &.e-ie-straighten-span,
+          &.e-ie-straighten-value-span {
+            @if $skin-name == 'tailwind3' {
+              color: $ie-content-text-color;
+            }
+          }
+        }
         & .e-tbar-btn.e-btn {
           & .e-icons {
             @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap5-dark' and $skin-name != 'fluent2' {
@@ -44,8 +60,8 @@
           border: none;
           margin-top: $image-editor-ddbtn-margin-top;
           @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;
+            background: tbar-vars.$tbar-default-bg;
+            color: tbar-vars.$tbar-default-icon-color;
           }
           @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
             border: 2px solid #000;
@@ -59,20 +75,20 @@
           }
 
           &:hover {
-            background: $tbar-hover-bg;
+            background: tbar-vars.$tbar-hover-bg;
             box-shadow: none;
             @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
               color: $secondary-text-color;
             }
             @else {
-              color: $tbar-hover-font;
+              color: tbar-vars.$tbar-hover-font;
             }
           }
 
           &:focus {
-            background: $btn-focus-bgcolor;
+            background: button-vars.$btn-focus-bgcolor;
             box-shadow: none;
-            color: $btn-focus-color;
+            color: button-vars.$btn-focus-color;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
               box-shadow: inset 0 0 0 1px !important; /* stylelint-disable-line declaration-no-important */
@@ -106,9 +122,9 @@
           }
 
           &:active {
-            background: $btn-active-bgcolor;
+            background: button-vars.$btn-active-bgcolor;
             box-shadow: none;
-            color: $btn-active-color;
+            color: button-vars.$btn-active-color;
           }
         }
 
@@ -151,6 +167,38 @@
         }
       }
     }
+
+    & .e-ie-drop-area {
+      & .e-ie-drop-content,
+      & .e-ie-min-drop-content {
+        @if $skin-name == 'tailwind3' {
+          color: $ie-content-text-color;
+        }
+      }
+      .e-ie-drop-browse {
+        @if $skin-name == 'tailwind3' {
+          color: $ie-browse-text-color;
+        }
+      }
+      .e-ie-drop-info {
+        @if $skin-name == 'tailwind3' {
+          color: $ie-drop-info-text-color;
+        }
+      }
+    }
+
+    & .e-ie-finetune-slider-label,
+    & .e-ie-finetune-value-span {
+      @if $skin-name == 'tailwind3' {
+        color: $ie-content-text-color;
+      }
+    }
+
+    & .filter-wrapper {
+      @if $skin-name == 'tailwind3' {
+        color: $ie-content-text-color-alt1;
+      }
+    }
   }
 }