fix(query-builder): update fluent query builder buttons styling#17149
fix(query-builder): update fluent query builder buttons styling#17149
Conversation
didimmova
added
❌ status: awaiting-test
There was a problem hiding this comment.
Pull request overview
Updates Fluent theme styling for Query Builder expression group buttons (AND/OR) to align hover/focus-hover backgrounds with the expression foreground colors, per issue #17080.
Changes:
- Updated Fluent AND button state backgrounds to derive from
color-expression-group-andwith theme alpha values. - Updated Fluent OR button state backgrounds to derive from
color-expression-group-orwith theme alpha values.
| @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}); |
There was a problem hiding this comment.
The linked issue requests updating only the hover and focused-hover backgrounds for Fluent AND/OR expression buttons. This change also updates --focus-background and --active-background from transparent/gray to tinted values, which will change keyboard-focus and pressed visuals beyond the requested states. If the intent is strictly to address hover + focused-hover, consider reverting --focus-background and --active-background for Fluent to their previous values (or confirm the design spec includes these state changes).
| @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}); |
There was a problem hiding this comment.
Same as the AND button: for Fluent OR expression buttons, the issue calls out hover and focused-hover only, but this hunk also changes --focus-background and --active-background to tinted values. If that’s not in the design handoff, consider limiting the Fluent changes to --hover-background and --focus-hover-background to avoid unintended visual regressions for focus/pressed states.
Closes #17080
Here's the Handoff
Additional information (check all that apply):
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)