mi6 / mi6/ic-ui-kit

Consider using dark background for nav group dark mode hover / selected state

Open
#3,615 2 comments 0 reactions 0 assignees View on GitHub
component: ic-top-navigation
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.