Consider using dark background for nav group dark mode hover / selected state
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
### Summary
Design task - consider whether the hover / selected state of a nav group in dark mode should be dark / black rather than white.
### 💬 Description
In dark mode, if you hover on or select a nav group in a top navigation component, the dropdown menu has a dark background but the background of the nav group title is white. See below (or [code example on website](https://design.sis.gov.uk/components/top-navigation/code#grouped-links)):
When in light mode, this white colour on the nav group title matches the background of the dropdown menu, so should it also match, i.e. change to black, when in dark mode?
This seems to be the same in Figma; setting the hover state just gives it the colour "Architectural 20".
### 💰 Use value
Changing it to a dark colour in dark mode makes it looks cleaner in my opinion; when in light mode, the nav group and the dropdown menu look like they are connected / all one element because they have the same colour.
Maybe the hover / selected state would have less contrast on a top nav with a dark theme colour, but I feel like the dropdown menu appearing basically already indicates that a nav group is hovered on or selected. And this situation is already happening on light-coloured top navs
Contributor guide
Research direction
Start with the top navigation component and its grouped-links code example on the design website, then compare the dark-mode hover and selected states with the Figma behavior described in the issue. Done means the intended dark-mode background treatment is agreed and the top navigation's visual behavior matches that decision.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100