Introduction
This repo holds the source of truth for our design system's design tokens.
Repo Structure
Docs
├── config.json
├── tokens/
│ ├── size/
│ ├── font.json
│ ├── color/
│ ├── font.json
│ ...
├── assets/
│ ├── fonts/
│ ├── images/
Token Files
Docs
{
"value": {
"type": "number",
"value": 16
},
"unit": {
"type": "string",
"value": "px"
}
}
Config File
Docs
{
"source": ["tokens/**/*.json"],
"platforms": {
"web": {
"transformGroup": "web",
"buildPath": "dist/",
"files": [
{
"destination": "tokens.css",
"format": "css/variables"
}
]
}
}
}
Usage
Export design tokens from Figma or write them manually in the tokens/
directory.
To see the output, run the following command:
pnpm build
This command is run by the pre-push hook, so you don't need to run it manually.