From f5f42f803fdb64ccbf029f458745d038cce74ff7 Mon Sep 17 00:00:00 2001 From: didimmova Date: Wed, 1 Apr 2026 09:58:39 +0300 Subject: [PATCH 1/2] 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 783b9ce11ec..825a5606b7e 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')}; From 9dd6221600c17c5269237a9b45d182e0ed5314ae Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Thu, 2 Apr 2026 08:56:53 +0300 Subject: [PATCH 2/2] Update projects/igniteui-angular/core/src/core/styles/components/query-builder/_query-builder-theme.scss Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../styles/components/query-builder/_query-builder-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 825a5606b7e..a579ad671e4 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 @@ -309,7 +309,7 @@ --background: transparent; --focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover}); --focus-visible-background: transparent; - --focus-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});; + --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}); }