Commit Graph

9 Commits

Author SHA1 Message Date
d915443b8c Align design system with ADS 3.0 and add new components
Token foundation: fix 16 palette colours to match official ADS_COLORS,
add 5 new palettes (teal, brown, purple, fuchsia, yellow), realign
semantic tokens (primary=navy, info=bright blue), fix border radii to
8px base, add responsive heading typography.

Component migration: swap primary/info references across all existing
components, update Button (44px/semibold), Switch (green/compact),
Chip (30px/8px radius + colour variants), SideNav (80px rail), Tag
(11 colours).

New components: SideNav, TopBar, Avatar, Tabs, PageHeader, Slider,
RangeSlider, FileInput, DataTable, List, Autocomplete.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-03 14:24:23 +10:00
d696619e4e Add Dialog, Tag, Tooltip, Popover, and Alert components; fix Button icon sizes
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>
2026-05-21 22:31:52 +10:00
4be996789e Add Accordion, Textarea, Select, and Card components; fix Input focus shift
New components:
- Accordion: compound component with single/multiple mode, grid-rows animation
- Textarea: multi-line input with auto-resize, character count, outlined/stacked variants
- Select: custom dropdown with keyboard navigation, combobox/listbox ARIA pattern
- Card: 4 variants (surface/outlined/elevated/filled) with header action support

Changes:
- Fix Input/Textarea focus ring layout shift (ring-1 instead of border-2)
- Add small/xsmall sizes to IconButton for card action contexts
- Add --radius-xl token (16px) for larger container corners

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 17:10:11 +10:00
e025c0eb34 Add Badge, Chip, and IconButton components with token layers
- Badge: 11 solid-colour variants (navy, info, success, error, warning + light variants, neutral, white) with icon slots
- Chip: bordered interactive element with selected, dismissible, and disabled states
- IconButton: circle/square shapes, 3 variants × 3 intents × 3 sizes, uses lucide-react icons
- Add badge and chip domain token layers to tokens.css
- Configure extendTailwindMerge in cn() to recognise custom font-size utilities (text-small, text-body, etc.)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 16:01:06 +10:00
c00335ef84 Refactor Button to semantic tokens and intent prop, fix error focus rings
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>
2026-05-21 14:19:36 +10:00
07be9d7314 Add Input, Checkbox, Radio, and Switch form components with semantic token layer
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>
2026-05-21 14:00:56 +10:00
ba796fb247 Update grey-01 to NSW DS value and add semantic colour aliases
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>
2026-05-21 11:55:59 +10:00
afba95fbaf Migrate from Penpot to Figma and add NSW brand colour palette
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>
2026-05-21 10:05:25 +10:00
dbf6a5870d Initial scaffold: React 19 + Vite + TypeScript + Tailwind CSS v4 + Storybook 10
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>
2026-05-20 14:30:41 +10:00