[Tracking] Design Tokens
laurenbarker opened this issue · comments
Overview
What
Add design-tokens package to the UI Repo.
Why
Ensure brand styles (colors, spacing, typography, etc.) can be included in all of our user facing apps while maintaining a single source of truth.
Foundation steps
- Add design-tokens package to the UI Repo (#54)
- Configure Style Dictionary to output our brand styles in SASS, JS
- Publish the design-tokens package to npm
- Consume the npm package one of our apps (#62)
Follow-up steps
Adding tokens
Manually add our brand styles in JSON format in a similar format to base.json in the prototype (link in design doc)
* To begin with, the brand styles to include are the variables currently defined in CC
* Each category of token (color, grid, etc.) will require a different level of organization. Wunderzin’s base.json provides some examples of tokens that have many variations.
- Colors (#54)
- Typography
- Grid
Stylus
Stylus variables are the same as sass variables so I think we can just use the same formatter and change the filename that is output.
- output tokens in stylus files
Generating files by category
If we decide that we want to split up the files by type, Wunderzin’s web build provides an example.
Use tokens in our apps
- Console
- ui-components package (#62)
- Admin UI (pre-req is generated stylus file)