Moved all 17 components from ui/ into atomic design tiers: atoms (Button,
IconButton, Input, Textarea, Select, Checkbox, Radio, Switch, Badge, Tag,
Chip, Tooltip) and molecules (Alert, Accordion, Card, Dialog, Popover).
Updated all Storybook titles and cross-component imports. Changed Input
icons to primary-dark and replaced palette token references with semantic
tokens.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
New primitives completing the ui/ component tier: Dialog (native <dialog>
with focus trapping), Tag (6 colours × 3 variants), Tooltip and Popover
(using @floating-ui/react for positioning), and Alert (5 status variants
with icons, close, and action slot). Reduced Button icon sizes to better
match label text. Added Tag and Alert token layers to tokens.css.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace palette token references (blue-01, red-02, grey-01) with dedicated
button domain tokens. Rename `color` prop to `intent` with semantic values
(default, danger, subtle, neutral). Add loading state with spinner and
aria-busy. Fix Checkbox and Radio error states leaking teal focus ring.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Stop tracking .claude/, CLAUDE.md, ARCHITECTURE.md, and plans/ — these are
local-only working files for Claude Code and should not be on the shared
Gitea remote. Files remain on disk, only removed from git index.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Build four form primitives from Figma references with brand-aligned creative
decisions: restrained press states (scale-95 instead of highlight splashes),
clean iconless Switch, and consistent error states with inline warning icons.
Introduce form-control semantic tokens (--color-control-*) in tokens.css so
all form components share a single source for borders, checked states, focus
rings, labels, and errors. Retrofit Input to use these tokens instead of
direct palette references.
Update CLAUDE.md and ARCHITECTURE.md with token layer documentation, token
discipline rule (no palette references in components), and component tier
decision criteria.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Pill-shaped button with three variants (primary/secondary/tertiary),
four colour schemes (navy/red/light/surface), three sizes, and optional
left/right icon slots. 17 Storybook stories cover all combinations.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Grey-01 updated from #3D3D3D to #22272B to match the NSW Design System.
Semantic aliases (primary, error, success, warning, text, surface, etc.)
now reference palette variables as the single layer of indirection.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Install @storybook/addon-designs for embedding Figma frames in stories
and claude2figma skills (preflight, component-rules, style-binding,
reference-interpreter) for enforcing design token compliance when
writing to Figma. Add PostToolUse hook for use_figma QA reminders and
pre-allow Figma MCP + Code Connect tools in settings.json.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Self-host Public Sans via @fontsource-variable (weights 100-900, normal
+ italic). Add 6 composed @utility classes in typography.css for styles
that combine multiple properties (body-strong, small-strong, label,
overline, body-link, small-link). Matching text styles created in the
Figma design file via MCP for designer use.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace self-hosted Penpot MCP references with the official Figma Remote
MCP server (OAuth, HTTP transport). Swap placeholder semantic colours in
tokens.css for the NSW Design System brand palette extracted from Figma
(blues, reds, oranges, greens, greys) and add typography size tokens.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove deprecated baseUrl from tsconfig.app.json (paths work without it
in modern TS). Remove unused .mdx pattern from Storybook story glob.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Design system and component library for the Research Synthesiser. Includes:
- Tailwind CSS v4 with @theme-based design tokens from the existing synthesiser
- Storybook 10.4 with MCP, a11y, docs, and vitest addons
- ESLint + Prettier with Tailwind class sorting
- Button component as pipeline validation
- CLAUDE.md with project principles and conventions
- ARCHITECTURE.md as living architecture document
- Penpot and Storybook MCP server configuration
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
