Design token documentation

[mcoker]

As part of the design token work, we should document each token and the intended role/usage. This can live on the core workspace, but should eventually be a page on org.

[stale]

This issue has been automatically marked as stale because it has not had activity in the last 60 days. It will be closed in 30 days if no further activity occurs.

[nicolethoen]

https://www.lightningdesignsystem.com/design-tokens/

https://polaris.shopify.com/tokens/colors

https://rei.github.io/rei-cedar-docs/tokens/all-tokens/

[mcarrano]

I am going to transfer this to design to get started on this work. We will look at the references above and recommend a presentation for this page.

[nicolethoen]

I was talking to @srambach about this issue a little bit this morning.
I think, ultimately, it'd be best to have a json file which exists as the gold source for the design tokens and their values for each theme.
That json file could be used to build a CSS file for usage in core. It could also be used to populate the tokens and their values in the sketch library. And It could also be used to populate a table or other documentation on the website.

How it'd be presented on the website will take some intentional design. And I recognize that while @mcoker is working on building out the tokens, he is writing it out initially in CSS as a bunch of CSS or SASS variables. I'm not sure how soon we'd want to convert the initial CSS into a 'gold source' JSON file - likely not something that needs to be done immediately, but would ultimately help with communication and consistence long term.

[mcoker]

A popular tool for ^ is https://amzn.github.io/style-dictionary/