Provide fallback background-color for prefers-reduced-transparency
What does this MR do and why?
The translucent-glass-background mixin provides a background-color for
the prefers-reduced-transparency: no-preference media query, but does
not provide a fallback/default background-color. This means that users
who set prefers-reduced-transparency to true do not have a
background-color set which results in broken UI when fixed headers
display over other contents. This change leverages the CSS cascade to
provide a opaque fallback value using the $bgColor argument value
References
Screenshots or screen recordings
prefers-reduced-transparency: no-preference (no change)
| Before | After |
|---|---|
 |
 |
prefers-reduced-transparency
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
- View MR diff https://gdk.test:3443/flightjs/Flight/-/merge_requests/1/diffs
- Set `` to true in System Preferences > Accessibility > Display > Reduce transparency
- Scroll down to display fixed header
- Should have opaque background color
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.