From afba95fbaf84babe0fbf81e9659b98a87c807ec2 Mon Sep 17 00:00:00 2001 From: Richie Date: Thu, 21 May 2026 10:05:25 +1000 Subject: [PATCH] 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 --- .claude/settings.json | 15 ++------- ARCHITECTURE.md | 14 ++++---- CLAUDE.md | 18 ++++++----- src/tokens/tokens.css | 74 +++++++++++++++++++++++++++++++------------ 4 files changed, 74 insertions(+), 47 deletions(-) diff --git a/.claude/settings.json b/.claude/settings.json index 6cf3103..e9658ef 100644 --- a/.claude/settings.json +++ b/.claude/settings.json @@ -33,19 +33,10 @@ "WebFetch(domain:vite.dev)", "WebFetch(domain:github.com)", "WebFetch(domain:npmjs.com)", - "WebFetch(domain:help.penpot.app)", - "WebFetch(domain:penpot.app)", + "WebFetch(domain:figma.com)", + "WebFetch(domain:help.figma.com)", + "WebFetch(domain:developers.figma.com)", "WebFetch(domain:developer.mozilla.org)" ] - }, - "mcpServers": { - "storybook": { - "type": "http", - "url": "http://localhost:6006/mcp" - }, - "penpot": { - "type": "http", - "url": "http://localhost:4401/mcp" - } } } diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 6c49dd5..5a9d3aa 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -16,8 +16,8 @@ SDC-Frontend is a React component library and design system that will serve as t ## 2. Token Pipeline ``` -Penpot (design tool, self-hosted) - ↓ Penpot MCP / manual export +Figma (design tool) + ↓ Figma MCP / get_variable_defs src/tokens/tokens.css (@theme block) ↓ Tailwind CSS v4 reads @theme ↓ Generates utility classes + CSS custom properties @@ -101,11 +101,11 @@ src/ ## 7. Design Tool Integration -### Penpot (self-hosted at 192.168.50.211:9001) -- MCP server runs locally via `npx @penpot/mcp@stable` (port 4401) -- MCP plugin must be installed and active in the Penpot browser session -- Tools available: `high_level_overview`, `execute_code`, `penpot_api_info`, `export_shape`, `import_image` -- Design tokens in Penpot use W3C DTCG format — export as JSON, convert to `@theme` values +### Figma +- Project file: https://www.figma.com/design/mrabO6AtxN3ektGiTk0I9c/ResearchInsights (file key: `mrabO6AtxN3ektGiTk0I9c`) +- MCP server: Official Figma Remote MCP at `https://mcp.figma.com/mcp` (HTTP transport, OAuth auth) +- Key tools: `get_design_context`, `get_variable_defs`, `get_screenshot`, `search_design_system`, `use_figma` +- Design tokens extracted via `get_variable_defs` → mapped to `@theme` values in `tokens.css` ### Storybook MCP - Available at `localhost:6006/mcp` when Storybook dev server is running diff --git a/CLAUDE.md b/CLAUDE.md index faa96c1..b370de9 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -15,7 +15,7 @@ Before beginning any significant piece of work, write a plan as a markdown file Before choosing a library, pattern, or approach: identify your options, research the latest documentation (don't rely on training knowledge for version-specific details), verify it works within the project constraints, and state your reasoning — especially when you considered and rejected alternatives. ### Ask, Don't Assume -If you need information you don't have — about infrastructure, the team's workflow, the Penpot setup, design intent, or anything unclear — ask me. Do not fill gaps with assumptions. A question costs a moment; a wrong assumption costs hours. +If you need information you don't have — about infrastructure, the team's workflow, the Figma setup, design intent, or anything unclear — ask me. Do not fill gaps with assumptions. A question costs a moment; a wrong assumption costs hours. ### Architecture Governance `ARCHITECTURE.md` is the living contract for this project. Before starting any task, re-read the relevant section. If you need to deviate, propose the change to me first, then update the document. If you discover something new, add it. Never let the codebase and architecture drift apart. @@ -124,15 +124,17 @@ import { cn } from '@/lib/utils' ## MCP Integrations -- **Penpot MCP** — reads design specs from the self-hosted Penpot instance. Requires Penpot open in browser with the MCP plugin active, and `npx @penpot/mcp@stable` running locally. -- **Storybook MCP** — runs at `localhost:6006/mcp` alongside the Storybook dev server. Provides component docs, story generation, and a11y testing. +MCP servers are configured via `claude mcp add` (stored in `~/.claude.json`) or `.mcp.json` in the project root. **Do not** put `mcpServers` in `.claude/settings.json` or `.claude/settings.local.json` — Claude Code ignores MCP config in those files. + +- **Figma MCP** — Official Figma Remote MCP server at `https://mcp.figma.com/mcp`. Uses HTTP transport with OAuth authentication. Add via: `claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp`, then authenticate when prompted. Project file: `https://www.figma.com/design/mrabO6AtxN3ektGiTk0I9c/ResearchInsights` (file key: `mrabO6AtxN3ektGiTk0I9c`). +- **Storybook MCP** — runs at `localhost:6006/mcp` alongside the Storybook dev server. Provides component docs, story generation, and a11y testing. Add via: `claude mcp add --transport http storybook http://localhost:6006/mcp` ### Design-to-Code Workflow -1. Use Penpot MCP `high_level_overview` to understand the design file -2. Use `execute_code` with `findShapes()` to inspect specific components -3. Extract CSS with `penpot.generateStyle()` -4. Build React component using design tokens from `src/tokens/tokens.css` -5. Verify in Storybook that the component matches the Penpot design +1. Use Figma MCP `get_design_context` to inspect a selected component or frame +2. Use `get_variable_defs` to extract design variables (colours, typography, spacing) +3. Map variables to design tokens in `src/tokens/tokens.css` +4. Build React component using design tokens +5. Verify in Storybook that the component matches the Figma design --- diff --git a/src/tokens/tokens.css b/src/tokens/tokens.css index 768e0cf..7665d68 100644 --- a/src/tokens/tokens.css +++ b/src/tokens/tokens.css @@ -1,29 +1,63 @@ @theme { - /* Surface colors */ - --color-bg: #f5f6f8; - --color-surface: #ffffff; - --color-border: #e2e5ea; + /* Typography - Font Family */ + --font-sans: 'Public Sans Variable', system-ui, sans-serif; - /* Text colors */ - --color-text: #1a1d23; - --color-text-secondary: #5f6672; + /* Typography - Font Sizes & Line Heights */ + --text-h1: 48px; + --text-h1--line-height: 1.25; + --text-h2: 32px; + --text-h2--line-height: 1.25; + --text-h3: 24px; + --text-h3--line-height: 1.333; + --text-h4: 20px; + --text-h4--line-height: 1.4; + --text-h5: 16px; + --text-h5--line-height: 1.5; + --text-h6: 14px; + --text-h6--line-height: 1.43; + --text-intro: 20px; + --text-intro--line-height: 1.4; + --text-body: 16px; + --text-body--line-height: 1.5; + --text-small: 14px; + --text-small--line-height: 1.357; + --text-caption: 12px; + --text-caption--line-height: 1.5; - /* Primary */ - --color-primary: #2563eb; - --color-primary-hover: #1d4ed8; - --color-primary-light: #eff4ff; + /* Blues */ + --color-blue-01: #002664; + --color-blue-02: #146CFD; + --color-blue-03: #69B3E7; + --color-blue-04: #CBEDFD; + --color-blue-05: #EBF5FF; /* extrapolated: ultra-light background */ - /* Semantic: Success */ - --color-success: #16a34a; - --color-success-bg: #dcfce7; + /* Reds */ + --color-red-01: #3E0014; + --color-red-02: #D7153A; + --color-red-03: #F5C5D0; + --color-red-04: #FDDDE5; + --color-red-05: #FFF5F8; /* extrapolated: ultra-light background */ - /* Semantic: Warning */ - --color-warning: #d97706; - --color-warning-bg: #fef9c3; + /* Oranges */ + --color-orange-01: #7A3300; /* extrapolated: dark */ + --color-orange-02: #EC6608; + --color-orange-03: #F5B98A; + --color-orange-04: #FEF0E4; /* extrapolated: light background */ - /* Semantic: Error */ - --color-error: #dc2626; - --color-error-bg: #fee2e2; + /* Greens */ + --color-green-01: #005C35; /* extrapolated: dark */ + --color-green-02: #00A651; + --color-green-03: #89E5B3; + --color-green-04: #E0F8EA; /* extrapolated: light background */ + + /* Greys */ + --color-grey-01: #3D3D3D; + --color-grey-02: #6D7278; + --color-grey-03: #C0C0C0; + --color-grey-04: #E0E0E0; + --color-off-white: #F4F4F4; + --color-surface: #FAFAFA; + --color-white: #FFFFFF; /* Radius */ --radius-sm: 4px;