[Tracking] Design Tokens

[laurenbarker]

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 ([design-tokens] Design token initial - colors #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 ([ui-components] Use color tokens #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 ([design-tokens] Design token initial - 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 ([ui-components] Use color tokens #62)
• Admin UI (pre-req is generated stylus file)