design-token-sync · diff
git:20260414.a4061e0 to git:20260922.ece18df
13 added, 49 removed. Audit A to A.
---
name: design-token-sync
- description: Push brand-memory values (palette, typography) out to CSS custom properties, Tailwind config, TypeScript declarations, and a Figma variables JSON. One-way push from the single source of truth. Use when generating design tokens, syncing to Figma, or regenerating a Tailwind config.
+ description: One-way push of brand-memory palette and typography to CSS custom properties, Tailwind config, TypeScript declarations, and a Figma variables JSON. Use when generating design tokens, syncing to Figma, or regenerating a Tailwind config.
---
- # design-token-sync
-
- Reads the project's `brand.json` (written by **brand-memory**) and emits four token artifacts in one shot. Single source of truth → all consumers stay in sync.
-
- ## What it emits
-
- | File | Location | Purpose |
- |------|----------|---------|
- | `tokens.css` | `dist/tokens/tokens.css` | CSS custom properties (`:root { --color-bg: … }`) |
- | `tailwind.config.js` | `dist/tokens/tailwind.config.js` | Tailwind `theme.extend` with colors + fontFamily |
- | `tokens.d.ts` | `dist/tokens/tokens.d.ts` | TypeScript union types + `export const` per color |
- | `figma-variables.json` | `dist/tokens/figma-variables.json` | Figma Variables REST API payload |
+ Reads `brand.json` (from brand-memory) and writes to `dist/tokens/` (default `outDir`):
- All files start with a `/* Generated by atelier design-token-sync. Do not edit by hand. */` header. Never edit them manually — re-run the sync instead.
+ - `tokens.css`: `:root { --color-bg: … }` custom properties
+ - `tailwind.config.js`: `theme.extend` colors + fontFamily
+ - `tokens.d.ts`: TS union types + `export const` per color
+ - `figma-variables.json`: Figma Variables REST API payload
- ## Usage
+ Each starts with `/* Generated by atelier design-token-sync. Do not edit by hand. */`. Never hand-edit; re-run the sync.
- ### CLI
+ ## Run
```bash
- # Sync tokens for the current directory
- node plugins/atelier/skills/design-token-sync/index.mjs
-
- # Sync tokens for a specific project root
- node plugins/atelier/skills/design-token-sync/index.mjs /path/to/project
+ node plugins/atelier/skills/design-token-sync/index.mjs [projectRoot] # default cwd
```
- ### API
-
```js
import { syncTokens } from './plugins/atelier/skills/design-token-sync/index.mjs';
-
- const written = await syncTokens({
- projectRoot: '/path/to/project',
- outDir: 'dist/tokens', // default
- });
- // written → array of absolute file paths
- ```
-
- ### Individual emitters (pure functions)
-
- ```js
- import { emitCss } from './emitters/css.mjs';
- import { emitTailwind } from './emitters/tailwind.mjs';
- import { emitDts } from './emitters/dts.mjs';
- import { emitFigmaVariables } from './emitters/figma.mjs';
-
- const css = emitCss(cfg); // → tokens.css string
- const tw = emitTailwind(cfg); // → tailwind.config.js string
- const dts = emitDts(cfg); // → tokens.d.ts string
- const fig = emitFigmaVariables(cfg); // → figma-variables.json string
+ const written = await syncTokens({ projectRoot: '/path/to/project', outDir: 'dist/tokens' }); // absolute paths
```
- ## Figma bridge notes
-
- `figma-variables.json` matches the Figma Variables REST API shape:
+ Pure emitters, `(cfg) → string`: `emitCss` (`./emitters/css.mjs`), `emitTailwind` (`./emitters/tailwind.mjs`), `emitDts` (`./emitters/dts.mjs`), `emitFigmaVariables` (`./emitters/figma.mjs`).
- - **palette** collection — each color as `type: "COLOR"`
- - **typography** collection — each font as `type: "STRING"`
+ ## Figma
- To import into Figma: use the Figma REST API `POST /v1/files/:key/variables` with the JSON payload, or paste it into a Figma plugin that accepts the variables bulk-import format.
+ `palette` collection: each color `type: "COLOR"`. `typography` collection: each font `type: "STRING"`. Import via `POST /v1/files/:key/variables` with the payload, or a Figma plugin accepting the variables bulk-import format.
Typography entries with an empty/falsy value are omitted from all outputs.