@goldencomm/baseline-tokens
v0.2.0
Published
Baseline design tokens and system icons: core tokens from the Figma export, lints, Style Dictionary build and icon generation for one platform (next | wordpress | shopify | html) with an optional client override.
Readme
@goldencomm/baseline-tokens
Core Baseline tokens (the Figma variable export, imported as DTCG), the lints, the Style Dictionary build to every platform output, and the system icon generator. Two ways to run it:
In this monorepo (core): npm run tokens:import after a plugin export; npm run tokens, npm run icons:build.
Outputs are committed for every platform and gated by npm run check.
In a client project (one platform), via the CLI this package ships:
npx baseline-tokens build --platform wordpress --out wp-content/themes/<theme> --client client.tokens.json
npx baseline-tokens icons --platform wordpress --out wp-content/themes/<theme> --client client.tokens.json
npx baseline-tokens client from-defs --core-mode scheme-1=defs.json --core-mode scheme-2=defs2.json --out client.tokens.json--out is the platform root: the Next/HTML folder that imports tokens.css, or the WordPress / Shopify theme
folder. client.tokens.json holds value overrides keyed by core paths (<collection-slug>.<mode-slug> -> DTCG tree);
a name core does not have is rejected (ADR-0001: a client theme is core with different values), except additions in
Primitives folders that are never emitted (colors/* ramps, spacing/*), which a clone may add freely and the build
ignores with a note (ADR-0027 §5). The lints spacing-derived, radius-derived and tailwind-frozen (against the
installed tailwindcss) refuse hand-edited derived scales; regenerate them in the plugin's Scales panel. The Claude runbook
that produces it from a client's Figma theme is .claude/skills/baseline-client-tokens/SKILL.md.
Code Connect for a client (ADR-0021: the client's Figma library is a clone of the Core file, so node ids are Core's and only the file key differs):
npx baseline-tokens code-connect --platform wordpress --out wp-content/themes/<theme> --figma-file <clone key or URL> --parse
npx baseline-tokens code-connect --platform wordpress --out wp-content/themes/<theme> --figma-file <clone key or URL> --publish # CI onlyWrites <root>/figma.config.json (label per platform, default include globs components/ui/** for Next,
blocks/** + code-connect/** for WordPress, blocks/** for Shopify; override with --include <glob>), with
documentUrlSubstitutions mapping Core's key to the clone's. --parse checks the templates, --dry-run validates
against Figma (validation is on since ADR-0029), --publish publishes and refuses outside CI (CI unset) or without FIGMA_ACCESS_TOKEN. The Code
Connect CLI runs from the platform root (its include globs resolve against the working directory), using the
project's own @figma/code-connect when installed, otherwise npx. Re-run after every re-clone (new file key).
icons needs the client's active Iconify set installed in the project (npm i -D @iconify-json/<prefix>); the
command names it. The other sets are optional peers (this repo installs all five to keep the vocabulary complete).
Files
| | |
|---|---|
| import.mjs | plugin export -> src/figma/<collection>.<mode>.json + manifest.json |
| lint.mjs | shadcn set, naming/codeSyntax derivation (ADR-0012), component geometry rules (ADR-0017/0019) |
| build.mjs | Style Dictionary -> registry CSS/cssVars, WordPress/HTML tokens.css, Shopify snippets + settings; copies typeset.css per platform (ADR-0028) |
| typeset.css | Canonical Baseline fork of shadcn typeset (prose rhythm); platform copies are build outputs |
| icons.mjs | vocabulary x active set -> React icon map, WordPress icon collection, Shopify snippet + block options, HTML sprite, Code Connect reverse maps |
| cli.mjs | the per-platform orchestration above (scratch copy of core + client overrides -> generators -> copy out) |
| test/run.mjs | fixture -> import -> lint -> build assertions, determinism, and a client-override CLI smoke |
Env for tests/CLI: TOKENS_SRC_DIR (token source), TOKENS_OUT_ROOT (monorepo-shaped output root), TOKENS_CLIENT=1
(client mode: resolved literals may replace core aliases).
