Dark mode colour assessment

[RobTobias123]

Outcome

A refined and full set of Dark mode colours and directions that work across all applications of it. Tested and ready for launch. Currently, there are some clashes between different astro components for eg. Mastheads and Asides share colours but have different requirements.

Scope

• Consider new saturation and Lightness values based on the given Hues
• Assess impact
• Test for WCAG contrast compliance
• Adjust values as required

Notes

• Switch light/dark toggle back on for this branch/work
• Assess current set-up - use test.mdx for visual ref.

[andij]

The first area that we can address is to understand the different combinations of content that we expect in the Asides.

• I've raised a PR for this: Feature/dark mode a11y #486

Preview: https://feature-dark-mode-a11y.nucleus-docs.pages.dev/components/ns-test/#asides

[RobTobias123]

In this morning's team catch-up, we ascertained that the following items should be considered:

Aim for simple solutions to accelerate completion

• Check the ns-test page for Asides PR and assess current colour usage/behaviour, any additional content (links, backticks etc.) review and suggest.
• Home page signposts /Masthead consistencies - eg. use dark text for both in dark mode? etc. Review and suggest.
• Form elements (eg. border strength) review and suggest
• Example Tabs selected and unselected states review and suggest
• Pill/Badge - review and suggest - start with the default set but is possible to have standalone values assigned to each type if required (currently connected with Asides colours). Default set = Note, Tip, Danger, Caution, Success.
• Pill/Badge applied to each of the guideline pages as example to assess all in one place.

[RobTobias123]

Set up an area in Figma for assessing (WIP)...
https://www.figma.com/file/wyuLUEt3qm01mR8E6Wm2Pf/Nucleus-Docs-exploration---engaging-and-interactive?type=design&node-id=606%3A28408&mode=design&t=NUg9tVpTJ3mO1Jtp-1

[RobTobias123]

Asides PR and colours assessed.

My suggestions for changes and reasons here:

https://www.figma.com/file/wyuLUEt3qm01mR8E6Wm2Pf/Nucleus-Docs-exploration---engaging-and-interactive?type=design&node-id=0%3A1&mode=design&t=NUg9tVpTJ3mO1Jtp-1

FINE AS IT IS:

• Paragraph style Hyperlinks are inheriting heading colours

- Checked for contrast compliance - all ok on aside backgrounds in both light and dark themes. 
- Happy with this behaviour
• Paragraph text and Backtick text is not as originally specified (using Starlight text values?) but is is close and conforming. 

- Happy to leave as is or change to Navy.

REQUIRES CHANGE + SUGGESTIONS:




• Backtick style Hyperlinks are inheriting heading colours
- Not conforming as background is too tonally similar IN DARK MODE ONLY.

• Suggestion: Keep text and hyperlink colours the same but change background-colour to :
  TEAL-800
  HSL 202/40/16

All pass WCAG contrast then...

[RobTobias123]

Looking at the tabs - it would be ideal if they used the proposed colours from the palette. This provides a better contrast between a highlight and the track and also is more consistent with the use of Accent colour.

https://www.figma.com/file/wyuLUEt3qm01mR8E6Wm2Pf/Nucleus-Docs-exploration---engaging-and-interactive?type=design&node-id=619%3A27575&mode=design&t=pb3ElDChD7M5gneK-1

[RobTobias123]

Form elements currently being reviewed and changes being suggested at https://www.figma.com/file/wyuLUEt3qm01mR8E6Wm2Pf/Nucleus-Docs-exploration---engaging-and-interactive?type=design&node-id=633%3A27629&mode=design&t=wJatGc2xRvcCsvP0-1

[RobTobias123]

Added further example visuals and values to form elements.
https://www.figma.com/file/wyuLUEt3qm01mR8E6Wm2Pf/Nucleus-Docs-exploration---engaging-and-interactive?type=design&node-id=633%3A27629&mode=design&t=wJatGc2xRvcCsvP0-1

[RobTobias123]

Putting on hold temporarily whilst prioritising other work on the docs.

[RobTobias123]

It was discussed yesterday that the order of the main 4 signposts read order on the home page does not match the read order of the same groups in the LHS nav menu. This should be aligned so that it is familiar to the user.

[RobTobias123]

Explored and defined more specifics of the backticks design with Drew and agreed on best approach to implement that includes a subtle border and variable background colour dependent on mode.

[RobTobias123]

Also included nsx blue values as this affects the Mastheads in the same way too.

[andij]

I've updated the PR to reflect these updated colours

• In this PR: Feature/dark mode a11y #486

In order to release this we will raise another ticket related to bringing the dark mode into the Configurator.