search

patternfly / patternfly-design

Use this repo to file all new feature or design change requests for the PatternFly project
115 stars 105 forks source link

Design token documentation #1258

Closed mcoker closed 4 months ago

mcoker commented 1 year ago

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[bot] commented 1 year ago

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 commented 1 year ago

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

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

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

mcarrano commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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