Create website to document color variables

[colebemis]

📹 Loom video explanation: https://www.loom.com/share/4e2abf846c8c43eabcfaf9fd108aeb58

Problems

It's very difficult to find a list of available color variables.

Solution

This PR adds a mini-docs site to this repo to document the available color variables and their values in different color modes.

👀 Preview: https://primitives-git-docs.primer.vercel.app/

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primitives/p5kxcd16d
✅ Preview: https://primitives-git-docs.primer.vercel.app

[simurai]

😻 Awesome! Especially handy for copy&pasting the CSS variables. Currently I have to "chain" them together by hand.

Some thoughts for future improvements:

• Yeah, I think it would make sense to have the docs at https://primer.style/primitives. Just to make it clear that it's a separate repo.
• It might be useful to see how a hex value was defined. Like if it uses the color scale ($blue-200) or if it's a custom color like for border-secondary (lighten($gray-200, 3%)).
• Would be nice if the box-shadows could be shown in a single row. They are kinda a special case since they include the shadow size/position too.
• The dark mode column could have a dark background. So that it's more clear if something has a big or low contrast.
• And some more advanced stuff like search or filter.. where you can click on a color and it shows all the variables that use the same color so you can see how things relate to each other.

[colebemis]

@simurai I love those suggestions! ❤️

I updated the background color of the dark mode column 🌚