Add support for "dark" and "inverse" context

[tofumatt]

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]

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.