# clone the repo
git clone https://github.com/workday/canvas-tokens.git
# install dependencies
yarn install
All tokens are built from the @workday/canvas-tokens
package. To build tokens, run:
yarn build:tokens
To ensure you're seeing the latest token updates, run
yarn build:tokens
first.
Our token documentation and visual tests are rendered in Storybook. To start Storybook locally, run:
yarn storybook
Building and serving a static Storybook locally can be useful to debug issues. To do so, run:
# build static Storybook
yarn build-storybook
# serve locally
yarn serve-storybook
Our Tokens Studio config currently lives in Canvas Tokens Studio as a single source of truth for design and code. Canvas Tokens uses a script to sync the token config with that repo.
To run these scripts locally, you'll need to generate your own API key. You'll need a GitHub personal access token with repo scope access.
Once you have your key, you'll want to keep it somewhere safe. You can copy the content of the
.env.example
file into a new .env
file which is ignored by git.
cat .env.example > .env
Then add your GH personal access token to its respective environment variable, and you're good to go.
yarn tokens-config sync
By default, this script fetches the config files for base, brand, and system tokens from the Canvas
Tokens Studio repo, and updates the corresponding config files in Canvas Tokens on the
tokens-studio-sync
branch. Base, brand, and system token updates will each be in their own commit.
If you only want to update one type of tokens, you can specify it in the script.
# only sync base tokens
yarn tokens-config sync base
To merge the updates, you can either manually create a pull request or you can run the script. The script below will create a pull request to merge the tokens-studio-sync branch into main. If a pull request already exists, it will fail.
yarn tokens-config create-pull
We use Jest to unit test internal logic. To run these tests locally:
yarn test
We use Chromatic for visual regression tests. Chromatic runs automatically on every pull request and requires changes to be verified before merging. When branch is merged to main
, the baseline is updated.