Fix style of search tokens in dark mode
What does this MR do and why?
Gives search token parts a perceivable background in dark mode that matches the semantic colorings used in lightmode. Also gives search dropdown items perceivable and sensible active and hover background colors in dark mode.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Issue search (uses Vue)
| Scenario | Before | After | Prod light mode (for reference) |
|---|---|---|---|
| search token at rest |
|
|
|
| search token being hovered |
|
|
|
| search dropdown with one item active |
|
|
|
|
search dropdown with one item hovered (note: "Confidential" is being hovered in all three screenshots) |
|
|
|
|
search dropdown with active item hovered (note: "Assignee" is active and being hovered in all three screenshots) |
|
|
|
MR search (uses haml)
| Scenario | Before | After | Prod light mode (for reference) |
|---|---|---|---|
| search token at rest |
|
|
|
| search token being hovered |
|
|
|
| search dropdown with one item active |
|
|
|
|
search dropdown with one item hovered (note that active and hover colors are identical in Before) |
|
|
|
| search dropdown with active item hovered |
|
|
|
How to set up and validate locally
- Check out this branch locally
- Ensure your GDK user is using dark mode
- Visit an Issues list page and search
- follow each of the scenarios for an issues search above
- Visit an MR list page and search
- follow each of the scenarios for an MR search above
Related to #451018 (closed), #457775 (closed), #444717 (closed)