Initial commit: FA 2.0 Design System foundation
Token pipeline (Style Dictionary v4, DTCG format): - Primitive tokens: colour palettes (brand, sage, neutral, feedback), typography (3 font families, 21-variant type scale), spacing (4px grid), border radius, shadows, opacity - Semantic tokens: text, surface, border, interactive, feedback colours; typography roles; layout spacing - Component tokens: Button (4 sizes), Input (2 sizes) - Generated outputs: CSS custom properties, JS ES6 module, flat JSON Atoms (3 components): - Button: contained/soft/outlined/text × primary/secondary, 4 sizes, loading state, underline for text variant - Typography: 21 variants across display/heading/body/label/caption/overline, maxLines truncation - Input: external label, helper text, error/success validation, start/end icons, required indicator, 2 sizes, multiline support Infrastructure: - MUI v5 theme with full token mapping - Storybook 8 with autodocs - Claude Code agents and skills for token/component workflows - Design system documentation and cross-session memory Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
22
.claude/skills/sync-tokens/SKILL.md
Normal file
22
.claude/skills/sync-tokens/SKILL.md
Normal file
@@ -0,0 +1,22 @@
|
||||
---
|
||||
name: sync-tokens
|
||||
description: Rebuild CSS and JS outputs from token JSON sources
|
||||
---
|
||||
|
||||
Synchronise design tokens — rebuild CSS and JS outputs from token JSON sources.
|
||||
|
||||
Use this after token JSON files have been edited manually or after `/create-tokens`. This is a maintenance command — it does NOT create new tokens (use `/create-tokens` for that).
|
||||
|
||||
Use the token-architect agent to handle this task.
|
||||
|
||||
**Instructions for the agent:**
|
||||
1. Read `docs/memory/token-registry.md` to understand current token state
|
||||
2. Validate all token JSON files have required fields (`$value`, `$type`, `$description`)
|
||||
3. Run `npm run build:tokens` to regenerate:
|
||||
- `src/theme/generated/tokens.css` (CSS custom properties)
|
||||
- `src/theme/generated/tokens.js` (JS ES6 module)
|
||||
- `tokens/export/tokens-flat.json` (flat JSON export)
|
||||
4. Check that `src/theme/index.ts` is consuming the generated tokens correctly
|
||||
5. If any tokens were added/changed since the theme was last updated, update `src/theme/index.ts`
|
||||
6. Report what was generated and any issues found
|
||||
7. Update `docs/memory/token-registry.md` if it's out of date
|
||||
Reference in New Issue
Block a user