tokens for cedar design system
We are using Theo for managing design tokens.
Tokens are stored in the
tokens/ directory. The rest of the files are for outputting a simple site to visually display the tokens.
Tokens are 1 of 3 types:
- Foundational (
Colors, spacing, etc. values that will be shared globally
- Mixins (
Groups of css declarations (for things like typography)
- Variables (
Component specific variables that are single value.
If you are only updating an existing file, make changes and begin at step 3.
- Create the new yml file.
- Add the file to the appropriate index
tokens/foundations/_index.yml for foundations.
tokens/m_index.yml for mixins.
tokens/v_index.yml for variables.
- Add tokens
npm run theoto test that the files are valid and can be processed.
npm run devto start a dev server and verify the values generated are what are expected.
- Start a PR
Merging a PR/Releasing tokens
- Review the PR
- Update the static site
npm run build on the branch prior to merge (this will eventually be automated)
- Merge PR
- Create a new release tag (following semver)
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report