@syncfusion/blazor-themes 26.1.35 → 26.1.39

package/SCSS-Themes/popups/dialog/fluent-dark.scss

@@ -119,12 +119,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     .e-dlg-header-content {
       border-radius: $header-content-border-radius;
       line-height: $dialog-header-line-height;
-
-      .e-dlg-closeicon-btn.e-btn.e-icon-btn {
-        @if $skin-name =='fluent2' {
-          line-height: 2;
-        }
-      }
     }
 
     .e-dlg-header-content + .e-dlg-content {
@@ -298,6 +292,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
       @if $skin-name == 'Material3' {
         padding: $zero-value;
       }
+      @if $skin-name == 'fluent2' {
+        padding: $dialog-bigger-header-btn-padding;
+      }
     }
 
     .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -403,6 +400,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     @if $skin-name == 'Material3' {
       padding: $zero-value;
     }
+    @if $skin-name == 'fluent2' {
+      padding: $dialog-header-btn-padding;
+    }
   }
 
   .e-rtl {

package/SCSS-Themes/popups/dialog/fluent.scss

@@ -119,12 +119,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     .e-dlg-header-content {
       border-radius: $header-content-border-radius;
       line-height: $dialog-header-line-height;
-
-      .e-dlg-closeicon-btn.e-btn.e-icon-btn {
-        @if $skin-name =='fluent2' {
-          line-height: 2;
-        }
-      }
     }
 
     .e-dlg-header-content + .e-dlg-content {
@@ -298,6 +292,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
       @if $skin-name == 'Material3' {
         padding: $zero-value;
       }
+      @if $skin-name == 'fluent2' {
+        padding: $dialog-bigger-header-btn-padding;
+      }
     }
 
     .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -403,6 +400,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     @if $skin-name == 'Material3' {
       padding: $zero-value;
     }
+    @if $skin-name == 'fluent2' {
+      padding: $dialog-header-btn-padding;
+    }
   }
 
   .e-rtl {

package/SCSS-Themes/popups/dialog/fluent2-dark.scss

@@ -35,7 +35,7 @@ $dialog-bigger-footer-button-margin-right: 12px !default;
 $dialog-close-icon-margin-left: 0 !default;
 $dialog-close-icon-width: auto !default;
 $dialog-bigger-close-icon-height: 40px !default;
-$dialog-bigger-close-icon-width: 40px !default;
+$dialog-bigger-close-icon-width: auto !default;
 $dialog-close-icon-top: 0 !default;
 $dialog-bigger-header-content-font-size: 22px !default;
 $dialog-bigger-content-font-size: $text-base !default;
@@ -50,6 +50,8 @@ $dialog-headericon-bottom: 0 !default;
 $dialog-resize-handler-width: 15px;
 $dialog-resize-handler-height: 15px;
 $dialog-resize-handler-position: 0;
+$dialog-bigger-header-btn-padding: 7px !default;
+$dialog-header-btn-padding: 7px !default;
 
 //Layout Variables End
 
@@ -93,18 +95,10 @@ $dialog-footer-flat-btn-content-color: $secondary-text-color !default;
 $dialog-enable-resize-padding-bottom: 15px !default;
 
 /* stylelint-disable */
-.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
-  padding: 0;
-}
-
-.e-bigger .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
-  padding: 0;
-}
-
 .e-dialog {
-    & .e-dlg-content {
-        border-radius: $dialog-border-radius !important;
-      }
+  & .e-dlg-content {
+    border-radius: $dialog-border-radius !important;
+  }
 }
 
 .e-dlg-overlay {
@@ -132,12 +126,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     .e-dlg-header-content {
       border-radius: $header-content-border-radius;
       line-height: $dialog-header-line-height;
-
-      .e-dlg-closeicon-btn.e-btn.e-icon-btn {
-        @if $skin-name =='fluent2' {
-          line-height: 2;
-        }
-      }
     }
 
     .e-dlg-header-content + .e-dlg-content {
@@ -311,6 +299,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
       @if $skin-name == 'Material3' {
         padding: $zero-value;
       }
+      @if $skin-name == 'fluent2' {
+        padding: $dialog-bigger-header-btn-padding;
+      }
     }
 
     .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -416,6 +407,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     @if $skin-name == 'Material3' {
       padding: $zero-value;
     }
+    @if $skin-name == 'fluent2' {
+      padding: $dialog-header-btn-padding;
+    }
   }
 
   .e-rtl {

package/SCSS-Themes/popups/dialog/fluent2.scss

@@ -35,7 +35,7 @@ $dialog-bigger-footer-button-margin-right: 12px !default;
 $dialog-close-icon-margin-left: 0 !default;
 $dialog-close-icon-width: auto !default;
 $dialog-bigger-close-icon-height: 40px !default;
-$dialog-bigger-close-icon-width: 40px !default;
+$dialog-bigger-close-icon-width: auto !default;
 $dialog-close-icon-top: 0 !default;
 $dialog-bigger-header-content-font-size: 22px !default;
 $dialog-bigger-content-font-size: $text-base !default;
@@ -50,6 +50,8 @@ $dialog-headericon-bottom: 0 !default;
 $dialog-resize-handler-width: 15px;
 $dialog-resize-handler-height: 15px;
 $dialog-resize-handler-position: 0;
+$dialog-bigger-header-btn-padding: 7px !default;
+$dialog-header-btn-padding: 7px !default;
 
 //Layout Variables End
 
@@ -93,18 +95,10 @@ $dialog-footer-flat-btn-content-color: $secondary-text-color !default;
 $dialog-enable-resize-padding-bottom: 15px !default;
 
 /* stylelint-disable */
-.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
-  padding: 0;
-}
-
-.e-bigger .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
-  padding: 0;
-}
-
 .e-dialog {
-    & .e-dlg-content {
-        border-radius: $dialog-border-radius !important;
-      }
+  & .e-dlg-content {
+    border-radius: $dialog-border-radius !important;
+  }
 }
 
 .e-dlg-overlay {
@@ -132,12 +126,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     .e-dlg-header-content {
       border-radius: $header-content-border-radius;
       line-height: $dialog-header-line-height;
-
-      .e-dlg-closeicon-btn.e-btn.e-icon-btn {
-        @if $skin-name =='fluent2' {
-          line-height: 2;
-        }
-      }
     }
 
     .e-dlg-header-content + .e-dlg-content {
@@ -311,6 +299,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
       @if $skin-name == 'Material3' {
         padding: $zero-value;
       }
+      @if $skin-name == 'fluent2' {
+        padding: $dialog-bigger-header-btn-padding;
+      }
     }
 
     .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -416,6 +407,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     @if $skin-name == 'Material3' {
       padding: $zero-value;
     }
+    @if $skin-name == 'fluent2' {
+      padding: $dialog-header-btn-padding;
+    }
   }
 
   .e-rtl {

package/SCSS-Themes/popups/dialog/highcontrast.scss

@@ -103,12 +103,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     .e-dlg-header-content {
       border-radius: $header-content-border-radius;
       line-height: $dialog-header-line-height;
-
-      .e-dlg-closeicon-btn.e-btn.e-icon-btn {
-        @if $skin-name =='fluent2' {
-          line-height: 2;
-        }
-      }
     }
 
     .e-dlg-header-content + .e-dlg-content {
@@ -282,6 +276,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
       @if $skin-name == 'Material3' {
         padding: $zero-value;
       }
+      @if $skin-name == 'fluent2' {
+        padding: $dialog-bigger-header-btn-padding;
+      }
     }
 
     .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -387,6 +384,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     @if $skin-name == 'Material3' {
       padding: $zero-value;
     }
+    @if $skin-name == 'fluent2' {
+      padding: $dialog-header-btn-padding;
+    }
   }
 
   .e-rtl {

package/SCSS-Themes/popups/dialog/material-dark.scss

@@ -108,12 +108,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     .e-dlg-header-content {
       border-radius: $header-content-border-radius;
       line-height: $dialog-header-line-height;
-
-      .e-dlg-closeicon-btn.e-btn.e-icon-btn {
-        @if $skin-name =='fluent2' {
-          line-height: 2;
-        }
-      }
     }
 
     .e-dlg-header-content + .e-dlg-content {
@@ -287,6 +281,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
       @if $skin-name == 'Material3' {
         padding: $zero-value;
       }
+      @if $skin-name == 'fluent2' {
+        padding: $dialog-bigger-header-btn-padding;
+      }
     }
 
     .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -392,6 +389,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     @if $skin-name == 'Material3' {
       padding: $zero-value;
     }
+    @if $skin-name == 'fluent2' {
+      padding: $dialog-header-btn-padding;
+    }
   }
 
   .e-rtl {

package/SCSS-Themes/popups/dialog/material.scss

@@ -103,12 +103,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     .e-dlg-header-content {
       border-radius: $header-content-border-radius;
       line-height: $dialog-header-line-height;
-
-      .e-dlg-closeicon-btn.e-btn.e-icon-btn {
-        @if $skin-name =='fluent2' {
-          line-height: 2;
-        }
-      }
     }
 
     .e-dlg-header-content + .e-dlg-content {
@@ -282,6 +276,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
       @if $skin-name == 'Material3' {
         padding: $zero-value;
       }
+      @if $skin-name == 'fluent2' {
+        padding: $dialog-bigger-header-btn-padding;
+      }
     }
 
     .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -387,6 +384,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     @if $skin-name == 'Material3' {
       padding: $zero-value;
     }
+    @if $skin-name == 'fluent2' {
+      padding: $dialog-header-btn-padding;
+    }
   }
 
   .e-rtl {

package/SCSS-Themes/popups/dialog/material3-dark.scss

@@ -110,12 +110,6 @@ $zero-value: 0 !default;
     .e-dlg-header-content {
       border-radius: $header-content-border-radius;
       line-height: $dialog-header-line-height;
-
-      .e-dlg-closeicon-btn.e-btn.e-icon-btn {
-        @if $skin-name =='fluent2' {
-          line-height: 2;
-        }
-      }
     }
 
     .e-dlg-header-content + .e-dlg-content {
@@ -289,6 +283,9 @@ $zero-value: 0 !default;
       @if $skin-name == 'Material3' {
         padding: $zero-value;
       }
+      @if $skin-name == 'fluent2' {
+        padding: $dialog-bigger-header-btn-padding;
+      }
     }
 
     .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -394,6 +391,9 @@ $zero-value: 0 !default;
     @if $skin-name == 'Material3' {
       padding: $zero-value;
     }
+    @if $skin-name == 'fluent2' {
+      padding: $dialog-header-btn-padding;
+    }
   }
 
   .e-rtl {

package/SCSS-Themes/popups/dialog/material3.scss

@@ -110,12 +110,6 @@ $zero-value: 0 !default;
     .e-dlg-header-content {
       border-radius: $header-content-border-radius;
       line-height: $dialog-header-line-height;
-
-      .e-dlg-closeicon-btn.e-btn.e-icon-btn {
-        @if $skin-name =='fluent2' {
-          line-height: 2;
-        }
-      }
     }
 
     .e-dlg-header-content + .e-dlg-content {
@@ -289,6 +283,9 @@ $zero-value: 0 !default;
       @if $skin-name == 'Material3' {
         padding: $zero-value;
       }
+      @if $skin-name == 'fluent2' {
+        padding: $dialog-bigger-header-btn-padding;
+      }
     }
 
     .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -394,6 +391,9 @@ $zero-value: 0 !default;
     @if $skin-name == 'Material3' {
       padding: $zero-value;
     }
+    @if $skin-name == 'fluent2' {
+      padding: $dialog-header-btn-padding;
+    }
   }
 
   .e-rtl {

package/SCSS-Themes/popups/dialog/tailwind-dark.scss

@@ -113,12 +113,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     .e-dlg-header-content {
       border-radius: $header-content-border-radius;
       line-height: $dialog-header-line-height;
-
-      .e-dlg-closeicon-btn.e-btn.e-icon-btn {
-        @if $skin-name =='fluent2' {
-          line-height: 2;
-        }
-      }
     }
 
     .e-dlg-header-content + .e-dlg-content {
@@ -292,6 +286,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
       @if $skin-name == 'Material3' {
         padding: $zero-value;
       }
+      @if $skin-name == 'fluent2' {
+        padding: $dialog-bigger-header-btn-padding;
+      }
     }
 
     .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -397,6 +394,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     @if $skin-name == 'Material3' {
       padding: $zero-value;
     }
+    @if $skin-name == 'fluent2' {
+      padding: $dialog-header-btn-padding;
+    }
   }
 
   .e-rtl {

package/SCSS-Themes/popups/dialog/tailwind.scss

@@ -113,12 +113,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     .e-dlg-header-content {
       border-radius: $header-content-border-radius;
       line-height: $dialog-header-line-height;
-
-      .e-dlg-closeicon-btn.e-btn.e-icon-btn {
-        @if $skin-name =='fluent2' {
-          line-height: 2;
-        }
-      }
     }
 
     .e-dlg-header-content + .e-dlg-content {
@@ -292,6 +286,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
       @if $skin-name == 'Material3' {
         padding: $zero-value;
       }
+      @if $skin-name == 'fluent2' {
+        padding: $dialog-bigger-header-btn-padding;
+      }
     }
 
     .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -397,6 +394,9 @@ $dialog-enable-resize-padding-bottom: 15px !default;
     @if $skin-name == 'Material3' {
       padding: $zero-value;
     }
+    @if $skin-name == 'fluent2' {
+      padding: $dialog-header-btn-padding;
+    }
   }
 
   .e-rtl {

package/SCSS-Themes/popups/tooltip/fluent2-dark.scss

@@ -42,7 +42,7 @@ $tooltip-mobile-vertical-padding: 12px !default;
 //color variables
 $tooltip-content-bg-color: $tooltip-bg-color !default;
 $tooltip-content-border-color: $tooltip-border !default;
-$tooltip-content-font-color: $toooltip-text-color !default;
+$tooltip-content-font-color: $tooltip-text-color !default;
 $tooltip-default-icon-color: $icon-color !default;
 $tooltip-icon-bg-normal: $secondary-bg-color !default;
 $tooltip-hover-icon-color: $icon-color-hover !default;

package/SCSS-Themes/popups/tooltip/fluent2.scss

@@ -42,7 +42,7 @@ $tooltip-mobile-vertical-padding: 12px !default;
 //color variables
 $tooltip-content-bg-color: $tooltip-bg-color !default;
 $tooltip-content-border-color: $tooltip-border !default;
-$tooltip-content-font-color: $toooltip-text-color !default;
+$tooltip-content-font-color: $tooltip-text-color !default;
 $tooltip-default-icon-color: $icon-color !default;
 $tooltip-icon-bg-normal: $secondary-bg-color !default;
 $tooltip-hover-icon-color: $icon-color-hover !default;

package/SCSS-Themes/querybuilder/query-builder/bds-dark.scss

@@ -128,6 +128,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $secondary-text-color !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -170,7 +171,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
 
       & .e-rule-value-delete {
@@ -205,9 +206,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
 
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/bds.scss

@@ -128,6 +128,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $secondary-text-color !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -170,7 +171,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
 
       & .e-rule-value-delete {
@@ -205,9 +206,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
 
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/bootstrap-dark.scss

@@ -126,6 +126,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $grey-dark-font !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -168,7 +169,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
 
       & .e-rule-value-delete {
@@ -203,9 +204,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
 
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/bootstrap.scss

@@ -126,6 +126,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $grey-light-font !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -168,7 +169,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
 
       & .e-rule-value-delete {
@@ -203,9 +204,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
 
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/bootstrap4.scss

@@ -128,6 +128,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 27px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 7px !default;
+$qryblr-drag-icon-color: $gray-700 !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -170,7 +171,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 7px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
 
       & .e-rule-value-delete {
@@ -205,9 +206,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 7px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
 
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/bootstrap5-dark.scss

@@ -129,6 +129,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $icon-color !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -171,7 +172,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
 
       & .e-rule-value-delete {
@@ -206,9 +207,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
 
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/bootstrap5.scss

@@ -129,6 +129,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $icon-color !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -171,7 +172,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
 
       & .e-rule-value-delete {
@@ -206,9 +207,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
 
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/fabric-dark.scss

@@ -126,6 +126,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 30px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $neutral-light-fontalt !default;
 
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -168,7 +169,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
 
       & .e-rule-value-delete {
@@ -203,9 +204,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
 
     & .e-group-header .e-drag-qb-rule {