Signed-off-by: NotAShelf <raf@notashelf.dev> Change-Id: Ib082597066892f250696b32d649e55346a6a6964
48 lines
1.4 KiB
Markdown
48 lines
1.4 KiB
Markdown
# @frozendev/tokens
|
|
|
|
Single source of truth for FrozenDev color system. You may use the sources in
|
|
`tokens/` and run `pnpm run build` to generate outputs. Every platform gets an
|
|
up-to-date file. No manual syncing.
|
|
|
|
[Design Dictionary]: https://styledictionary.com/
|
|
[documentation]: https://styledictionary.com/getting-started/installation/
|
|
|
|
Powered by [Design Dictionary]. Please see the [documentation] for additional
|
|
configuration options and usage details.
|
|
|
|
## Editing tokens
|
|
|
|
All changes start in `tokens/`:
|
|
|
|
- **New colour stop** -> add to `tokens/color.json`
|
|
- **Semantic role change**-> edit `tokens/semantic.json`
|
|
- Never edit anything in `outputs/` directly. It will be overwritten on the next
|
|
build
|
|
|
|
After editing:
|
|
|
|
```bash
|
|
# Execute the build script in scripts/build.mjs
|
|
$ pnpm run build # regenerates all outputs
|
|
```
|
|
|
|
Commit both `tokens/` and `outputs/` so the CDN/raw GitHub URL paths keep
|
|
working.
|
|
|
|
## Local development
|
|
|
|
```bash
|
|
# This repository is designed to work with pnpm. Prefer it over npm or yarn.
|
|
$ pnpm install
|
|
$ pnpm run build
|
|
```
|
|
|
|
Outputs land in `outputs/`.
|
|
|
|
### Previewing Colors
|
|
|
|
A preview script is provided in `scripts/preview.mjs` that you can invoke with
|
|
`pnpm preview`. It will generate a HTML page in `build/` that you can open with
|
|
your browser to preview the colors before publishing any packages.
|
|
|
|

|