tokens/docs/README.md
NotAShelf 806b76fb37
docs: provide preview of the preview script for previewing color output
Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: Ib082597066892f250696b32d649e55346a6a6964
2026-05-02 20:00:24 +03:00

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.
![Preview of a preview](./assets/preview.png)