search

octopusthink / nautilus

Inclusive, open-source design system and React component library.
https://nautilus.octopusthink.com
MIT License
2 stars 0 forks source link

Add support for "dark" and "inverse" context #185

Open tofumatt opened 4 years ago

tofumatt commented 4 years ago

Right now we need to set inverse on components like <Link> or <Heading> if a parent component is "dark" or "inverse". It might be nice to have a wrapper HOC in Nautilus like <Dark> or <Inverse> that we could use to set the context for all components underneath it to use a "dark" or "inverted" style. This would likely help with implementing things like "Dark Mode" in the future, but would make it easier to style links with inverted text today.

sarahmonster commented 4 years ago

Agreed. As part of this, it might make sense to rename our "dark" and "light" colour variables, since they make less sense in an inverted or dark context. (See also #166 for dark mode.)

For reference, these are how we name text colours in themes right now:

default: colors.grey900,
dark: colors.black,
light: colors.grey800,
inverse: colors.grey100,
inverseLight: colors.white,
inverseDark: colors.grey300

So basically, there's a primary colour model (default/inverse) and shades within that range (dark/light). I think it would make sense for us to switch to something more akin to (dark/light or inverse/default) and (bright/muted or bold/soft), although I'm not sure yet what the exact right terminology is there.

(Not sure if we want to fix this now, or file as a separate issue?)

FYI, this is something on my list of yet-to-be-filed-bugs:

all text items (headings, lists, links, etc, maybe also form elements?) should have an inverted option

It sounds like this might simplify that so that it's no longer required, but let me know if my understanding isn't correct there. I'll see about filing those issues now since we're looping back to some Nautilus work now.