upstreamable: frontend: GlobalSearch: Fix visibility on dark navbar

[skoeva]

This change ensures the search bar remains visible and consistent across all zoom levels and themes with colored or dark navbars.

Fixes: #417

Summary

• TextField and IconButton (small/zoomed breakpoint) lacked explicit backgrounds, making them invisible on colored navbars (e.g. Azure blue, dark themes). Both now use theme.palette.background.default.
• Small-breakpoint IconButton hover now uses background.muted instead of inheriting the navbar color.
• Search icons and placeholder text now use text.primary/text.secondary palette tokens. The standalone icon-only button (isIconButton) inherits currentColor from the navbar instead, so it stays visible on any navbar color.
• searchFallback (shown while GlobalSearchContent lazy-loads) had no background, causing a flash of navbar color on click. Fixed with background.default.
• The full-width overlay shown when the search is focused now correctly uses navbar.background instead of background.default.
• Added aria-label to the icon-only IconButton variant; marked the decorative TextField search icon aria-hidden. Replaced alpha(text.primary, 0.42) magic value with semantic text.secondary for WCAG-consistent contrast.

Screenshots

On load

On click

On load (zoomed in)

On click (zoomed in)

[Copilot]

Pull request overview

Improves GlobalSearch styling so the search affordance remains visible/consistent on dark/colored navbars (including at high zoom) by aligning icon/button/textfield colors and backgrounds with the active theme.

Changes:

• Adds background/hover/border/font styling to the collapsed IconButton placeholder so it isn’t transparent on dark navbars.
• Makes the search TextField background solid (background.default) and sets search icon color explicitly to text.primary.
• Styles the lazy-load searchFallback TextField with a matching background to prevent a brief navbar-color flash.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[illume]

left a note about aria-hidden for the decoration