Before you start the best thing you could do is to read the foundations package overview in Storybook to familiarize yourself with the package and the main key points.
Figma design tokens are automatically synced with this github repository.
- Create a new branch
- Copy updated
tokens.json
file and replace existing one in this project - Run
pnpm build
- that will trigger the script to split tokens into light and dark themes and generateindex.css
with updated variables - Verify output and update storybook components if needed
- Update tests/screenshots if needed
- Commit your changes if you are fine with them
- Read the general rules on how to create changesets in publishing settings
In the design-system we have two levels of nesting in tokens.json
ref
and sys
. Reference level tokens are just building blocks to compose system level tokens. They should not be used by users directly.
In automation scripts we resolve the end value of sys tokens and remove ref tokens from the final output.