@syncfusion/blazor-themes 22.1.34 → 22.1.37

package/SCSS-Themes/highcontrast.scss

@@ -4878,7 +4878,7 @@ $float-label-rtl-value: -7px !default;
   .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      top: -9px;
+      top: -7px;
     }
   }
 
@@ -4919,7 +4919,7 @@ $float-label-rtl-value: -7px !default;
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      top: -8px;
+      top: -7px;
     }
   }
 
@@ -9428,6 +9428,16 @@ $float-label-rtl-value: -7px !default;
     }
   }
 
+  .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon,
+  .e-small .e-outline.e-input-group.e-prepend .e-input-group-icon,
+  .e-small .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      margin-left: $outline-small-input-icon-margin-left;
+      margin-right: $zero-value;
+    }
+  }
+
   .e-outline.e-input-group.e-small .e-clear-icon,
   .e-outline.e-input-group .e-clear-icon.e-small,
   .e-small .e-outline.e-input-group .e-clear-icon,
@@ -9511,6 +9521,17 @@ $float-label-rtl-value: -7px !default;
     }
   }
 
+  .e-outline.e-input-group.e-prepend.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend .e-input-group-icon.e-bigger,
+  .e-bigger .e-outline.e-input-group.e-prepend .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon.e-bigger,
+  .e-bigger .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      margin: $outline-bigger-input-icon-padding $zero-value $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left;
+    }
+  }
+
   input.e-input.e-bigger.e-outline,
   .e-bigger input.e-input.e-outline,
   .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) input.e-input,
@@ -9717,6 +9738,17 @@ $float-label-rtl-value: -7px !default;
     }
   }
 
+  .e-outline.e-input-group.e-prepend.e-small.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon.e-bigger,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
+  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
+  .e-bigger .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon,
+  .e-bigger .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+      margin: $outline-bigger-small-group-icon-top $zero-value $outline-bigger-small-group-icon-bottom $outline-small-bigger-icon-margin-left;
+    }
+  }
+
   .e-outline.e-float-input.e-input-group.e-small .e-input-group-icon,
   .e-small .e-outline.e-float-input.e-input-group .e-input-group-icon,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
@@ -72073,6 +72105,7 @@ $bigger-splitbar-icon-size: 16px !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 10;
         }
 
         .e-navigate-arrow:not(.e-icon-hidden) {
@@ -72159,6 +72192,7 @@ $bigger-splitbar-icon-size: 16px !default;
         .e-resize-handler {
           background: $resize-icon-bg-color;
           color: $splitbar-icon-color;
+          z-index: 12;
         }
 
         &.e-split-bar-hover,
@@ -93431,7 +93465,6 @@ $editor-btn-icon-color: $content-font !default;
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -93441,6 +93474,16 @@ $editor-btn-icon-color: $content-font !default;
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }
@@ -102398,7 +102441,7 @@ $field-list-toggle-bg-color: $bg-base-0 !default;
 $field-list-toggle-font-color: $content-font !default;
 $field-list-button-font-color: $content-font !default;
 $field-list-button-border-color: $field-list-default-border-color !default;
-$field-list-button-back-color: #000 !default;
+$field-list-button-back-color: $invert-font !default;
 $field-list-drag-clone-text-color: $selection-font !default;
 $field-list-drag-clone-bg-color: $selection-bg !default;
 $field-list-drag-clone-border-radius: 0 !default;
@@ -102438,7 +102481,7 @@ $field-list-button-hover-color: $hover-bg !default;
 $field-list-button-focus-color: $selection-bg !default;
 $field-list-button-active-color: $selection-font !default;
 $field-list-drag-icon-color: $bg-base-100 !default;
-$error-font-color: #ff6161 !default;
+$error-font-color: $error-alt !default;
 $field-list-excel-member-filter-height: 118px !default;
 $field-list-excel-member-filter-node-limit-height: 115px !default;
 $field-list-excel-filter-height: 212px !default;
@@ -110554,8 +110597,6 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
-            border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-            border-top-left-radius: $qrybldr-btngrp-brdr-radius;
           }
           @else {
             border-bottom-right-radius: 0;
@@ -110584,14 +110625,16 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
-          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 4px;
         }
         @else {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
+          border-top-right-radius: 0;
         }
-        border-top-right-radius: $qrybldr-btngrp-brdr-radius;
 
         &.e-not-readonly {
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
@@ -110735,8 +110778,8 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
-          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
           border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         }
         @else {
@@ -110779,6 +110822,8 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
           }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
@@ -110797,11 +110842,11 @@ $qrybldr-btngrp-brdr-radius: 0 !default;
       & .e-btn.e-btngroup-or-lbl.e-small {
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
-          border-bottom-right-radius: 20px;
-          border-top-right-radius: 20px;
         }
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
 
         &.e-readonly-or-not {
           border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
@@ -117331,7 +117376,7 @@ $image-editor-background: $bg-base-0 !default;
 $image-editor-border: 1px solid $border-fg !default;
 $image-editor-toolbar-icon-color: $content-font !default;
 $img-editor-cp-preview-border-bottom-color: $selection-font !default;
-$image-editor-icon-sel-bg-color: $content-font !default;
+$image-editor-icon-sel-bg-color: $selection-bg !default;
 $image-editor-ddbtn-margin-top: 0 !default;
 $image-editor-tbar-height: 38px !default;
 $image-editor-bigger-tbar-height: 48px !default;
@@ -117703,13 +117748,11 @@ $image-editor-contextual-toolbar: $bg-base-0 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }
@@ -120377,6 +120420,7 @@ $ribbon-overflow-box-shadow: 0 6px 12px rgba($bg-base-0, .175) !default;
         > .e-split-btn-wrapper .e-btn,
         > .e-btn {
           line-height: $ribbon-overflow-item-btn-height;
+          overflow: hidden;
         }
 
         >.e-split-btn-wrapper {

package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $grey-darker !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/bootstrap.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $grey-f8 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $gray-100 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $content-bg-color-alt1 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $content-bg-color-alt1 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $neutral-lighter !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/fabric.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $neutral-white !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/fluent.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/highcontrast.scss

@@ -15,7 +15,7 @@ $image-editor-background: $bg-base-0 !default;
 $image-editor-border: 1px solid $border-fg !default;
 $image-editor-toolbar-icon-color: $content-font !default;
 $img-editor-cp-preview-border-bottom-color: $selection-font !default;
-$image-editor-icon-sel-bg-color: $content-font !default;
+$image-editor-icon-sel-bg-color: $selection-bg !default;
 $image-editor-ddbtn-margin-top: 0 !default;
 $image-editor-tbar-height: 38px !default;
 $image-editor-bigger-tbar-height: 48px !default;
@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $bg-base-0 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/material-dark.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $grey-900 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/material.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $grey-50 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/material3-dark.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/material3.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/image-editor/image-editor/tailwind.scss

@@ -387,13 +387,11 @@ $image-editor-contextual-toolbar: $content-bg-color-alt2 !default;
 
 .e-dropdown-popup {
   & .e-selected-btn {
-    @if $skin-name != 'highcontrast' {
-      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
-    }
+    background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
       color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
     }
-    @if $skin-name == 'bootstrap4' {
+    @if $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
       color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
     }
   }

package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap-dark.scss

@@ -959,7 +959,6 @@ $editor-btn-icon-color: $grey-dark-font !default;
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -969,6 +968,16 @@ $editor-btn-icon-color: $grey-dark-font !default;
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }

package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap.scss

@@ -960,7 +960,6 @@ $editor-btn-icon-color: $grey-light-font !default;
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -970,6 +969,16 @@ $editor-btn-icon-color: $grey-light-font !default;
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }

package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap4.scss

@@ -960,7 +960,6 @@ $editor-btn-icon-color: $gray-700 !default;
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -970,6 +969,16 @@ $editor-btn-icon-color: $gray-700 !default;
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }

package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap5-dark.scss

@@ -954,7 +954,6 @@ $editor-btn-icon-color: $icon-color !default;
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -964,6 +963,16 @@ $editor-btn-icon-color: $icon-color !default;
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }

package/SCSS-Themes/inplace-editor/inplace-editor/bootstrap5.scss

@@ -954,7 +954,6 @@ $editor-btn-icon-color: $icon-color !default;
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -964,6 +963,16 @@ $editor-btn-icon-color: $icon-color !default;
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }