From 4e526d028eeed1fc0af8bfed63637df320b18c65 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 2 Apr 2026 09:56:02 +0300 Subject: [PATCH] fix(query-builder): update fluent query builder buttons styling --- .../query-builder/_query-builder-theme.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss index 4ca1970f5ee..00176b8490d 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss +++ b/projects/igniteui-angular/core/src/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')};