Use CSS Custom Property for brand color

[samselikoff]

This implementation has some debt. We can decide if we want the feature now or want to figure out a cleaner solution now.

If we could just use CSS Custom Properties, this would be super clean as the Tailwind config var would just be --brand-primary. However, there's not full browser support, so I wanted to provide a fallback. The fallback is to define a vanilla color: (or background-color or border-color) property before the variable use.

I used a Tailwind Component to insulate the rest of the codebase from this knowledge, that way we can continue to use docs-color-brand and have it work everywhere.

I had to use !important because components come before utilities, so a docs-text-grey-dark was overriding the brand color. If/when we get the router service in to improve the docs links in the header/nav components, this can be dropped.

[samselikoff]

You can see usage here: https://github.com/ember-learn/ember-cli-addon-docs/pull/304/files#diff-adce90e81a1720059afb04a995c11e05R2

[samselikoff]

This debt can easily be refactored so I’m going to go ahead and merge now so I can use this on mirage 😁

[samselikoff]

Docs here 452394a