wwnorton/design-system

Color Schemes [NDS-28]

sh0ji opened this issue · 1 comments

sh0ji commented

We need to finalize our color schemes and then document how they work and how to use them.

Context

Our current color system uses role tokens to capture color usage across an application. This is designed to allow for easy customization of color across the system and the components and is a core part of our theming system along with customizable role-based tokens for our other subsystems like typography.

We're currently shipping two color schemes: a light scheme and a dark scheme. The light scheme was defined by @btri-wwn and the dark scheme was defined by me for the website's "dark mode" toggle. The dark scheme is disabled by default, allowing applications to opt into it via the $enable-dark-scheme Sass configuration variable.

We also ship an undocumented useColorScheme React hook that helps React applications tie color schemes to user actions or preferences. The "Dark mode toggle" on the top navbar of our documentation uses this hook to control the color scheme context.

Naming

A note on the naming: I've been calling a palette of defined color role tokens a "color scheme" because CSS has standardized around that name (as seen in the prefers-color-scheme media query). It also avoids the word "theme," which I would prefer to use for the entire token set, not just color.

NDS-28

Issue linked to JIRA Story: NDS-28