ui: Fix brand coloring for inline-code plus docs

[johncowen]

I noticed the coloring of our %inline-code style wasn't picking up the Consul brand color. So this PR fixes that up by also moving --brand to use a --tone- prefix and require rgb like all our other colors, which fixes that up.

Before:

After:

I also took the opportunity to add some documentation explaining all of the tone/rgb thing plus all of our colors swatches. I made these easier to copypasta using our with-copyable modifier. So you can click on these swatches to get the right thing to paste.

While I was there I did the same for all our icons and typography, which makes a good reference/document for when we need to tweak all this.

[evrowe]

Ah ha, so this is what that modifier does. Cool 😎

[johncowen]

😸 well kinda, tbh this one started out as a "only give me the variables for this element" - the important bit being "for this element". This one turned into getting things from the root element (not the modified element) so 'theoretically' shouldn't be a modifier - in the scheme of things (and as its only for documentation purposes) I just left it as is. I may move it to be a helper at some point but no biggie really (unless we use it in app code)

I always decide on a modifier if ever the "I just need a reference to the DOM element" slips into my head. The below with-copyable is probably a better example.

[evrowe]

Just need to address the minor typos in docs and should be good to ship 👍🏻

[hashicorp-cla]

All committers have signed the CLA.

[johncowen]

K those are in @evrowe gimme a yell/ 👍 when you are around and we can get this one in!

[evrowe]

🚀

[hc-github-team-consul-core]

🍒 If backport labels were added before merging, cherry-picking will start automatically.

To retroactively trigger a backport after merging, add backport labels and re-run https://circleci.com/gh/hashicorp/consul/507889.