mi6
Consider using dark background for nav group dark mode hover / selected state
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):
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
Sending this into design-to-do, also requesting that they take a look at that "Alpha" not-chip, to make that dark mode too
In the Navigation bar component, the Atoms/Group contains the white background on hover state for both light and dark variants. The reason it is white in both is because the background shade of the navigation bar is dark regardless of whether the overall theme is light or dark and as such the white background on hover is required for visual feedback.
We can amend the hover of Atoms/Group to become darker (matching the colour of the menu options), it looks like this;
However, we should also need to consider what happens with Links (eg Accessibility in the image above). The white line underneath is a clear indication that this is the currently selected item. However, if we replace that white line with the same shade as the group-hover state above, we end up with a line that just disappears;
With regard to the 'Alpha' chip, this should be a separate issue, although it would end up looking something like this;
