fix(query-builder): update fluent query builder buttons styling (#17148)

Co-authored-by: Marin Popov <desig9stein@users.noreply.github.com>

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -257,11 +257,11 @@
 
 			@if $variant == 'fluent' {
 				--background: transparent;
-				--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover});
 				--focus-visible-background: transparent;
-				--focus-background: transparent;
-				--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
-				--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--focus-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
+				--active-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
+				--hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover});
 			}
 
 			--foreground: #{var-get($theme, 'color-expression-group-and')};
@@ -307,11 +307,11 @@
 
 			@if $variant == 'fluent' {
 				--background: transparent;
-				--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover});
 				--focus-visible-background: transparent;
-				--focus-background: transparent;
-				--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
-				--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
+				--focus-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
+				--active-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
+				--hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover});
 			}
 
 			--foreground: #{var-get($theme, 'color-expression-group-or')};