From 1baa55c41772535156095f74306d2e0f4739b3bc Mon Sep 17 00:00:00 2001 From: Richie Date: Fri, 22 May 2026 13:32:45 +1000 Subject: [PATCH] Add library build pipeline and token alignment report - Configure Vite library mode to export MUI theme as plain JS - Add tsconfig.build.json for declaration generation - Add package.json exports for theme, Tailwind config, and tokens - Create src/index.ts as library entry point - Document token alignment between design system and production including colour mapping, flagged conflicts, and breakpoint alignment Co-Authored-By: Claude Opus 4.6 --- docs/token-alignment-report.md | 85 ++++++++++++++++++++++++++++++++++ package.json | 25 +++++++++- src/index.ts | 2 + tsconfig.build.json | 12 +++++ vite.config.ts | 28 +++++++++++ 5 files changed, 151 insertions(+), 1 deletion(-) create mode 100644 docs/token-alignment-report.md create mode 100644 src/index.ts create mode 100644 tsconfig.build.json diff --git a/docs/token-alignment-report.md b/docs/token-alignment-report.md new file mode 100644 index 0000000..a122af2 --- /dev/null +++ b/docs/token-alignment-report.md @@ -0,0 +1,85 @@ +# Token Alignment Report: Design System ↔ Production + +This documents how the Storybook design system tokens map to production's Tailwind config. + +## Approach + +- **Where tokens match** — production's naming and values adopted directly +- **Where Storybook adds tokens** — added alongside production's existing tokens +- **Where there's a conflict** — flagged below for review + +## Colours + +### Adopted from production (unchanged) + +| Production token | Hex | Notes | +|---|---|---| +| `grey-1` | #f4f3ef | | +| `grey-2` | #D7E1E2 | Matches `sage-200` | +| `grey-3` | #b9c7c9 | Matches `sage-400` | +| `grey-4` | #4c5459 | Matches `sage-800` — default body text | +| `grey-5` | #4c5b6b | Matches `sage-700` | +| `grey-6` | #D9D9D9 | No design system equivalent | +| `grey-7` | #EEEEEE | No design system equivalent | +| `color-1` | #B0610F | Matches `brand-600` | +| `color-1H` | #9e6f42 | No exact DS match (between brand-600 & brand-500) | +| `color-2` | #DCC1A6 | Close to `brand-200` (#EBDAC8) — slightly warmer | +| `color-2H` | #d1b79e | No exact DS match | +| `color-3` | #BA834E | Matches `brand-500` | +| `color-4` | #D0A070 | Matches `brand-400` | +| `color-5` | #F4F3EF | Same as `grey-1` | +| `color-6` | #51301B | Matches `brand-900` | +| `action-orange` | #F89E53 | No DS equivalent — unique to production | +| `success-green` | #76B041 | Different from DS `green-500` (#4A8F4A) | +| `warning-red` | #A41623 | Different from DS `red-600` (#BC2F2F) | + +### Design system palettes added alongside + +Full 11-shade palettes: `brand`, `sage`, `neutral`, `red`, `amber`, `green`, `blue` + +These are available as Tailwind classes: `bg-brand-500`, `text-sage-800`, etc. + +### Flagged for review + +| Issue | Detail | +|---|---| +| `color-2` vs `brand-200` | Production: #DCC1A6, DS: #EBDAC8. Close but not identical. Production has a slightly warmer/darker tint. | +| `color-1H` hover | Production: #9e6f42. No exact DS equivalent. Falls between brand-500 and brand-600. | +| `color-2H` hover | Production: #d1b79e. No exact DS equivalent. | +| `success-green` vs `green-500` | Production: #76B041 (lime-ish), DS: #4A8F4A (forest green). Visually different. | +| `warning-red` vs `red-600` | Production: #A41623 (dark crimson), DS: #BC2F2F (warmer red). Different hue and value. | +| `action-orange` | #F89E53 — exists only in production. No amber/orange equivalent in DS. | +| `grey-6`, `grey-7` | Exist only in production. Not mapped to DS neutral scale. | + +## Typography + +### Font families — aligned +| Production | Design system | Status | +|---|---|---| +| `font-sans` (Montserrat) | `fontFamily.body` | Aligned | +| `font-notoSerifSC` | `fontFamily.display` | Aligned | +| `font-arial` | — | Production only | + +### Font sizes — mixed +Production has custom sizes (`xxs`, `1.5xl`, `2.15xl`, `2.3xl`, `3.3xl`) that map to specific Tailwind typography classes. Design system has its own scale (`2xs`–`4xl`). Both are included in the config. + +### Typography classes +Production's `.tailwindcss-h1` through `.tailwindcss-h6` classes use hardcoded `#4C5459` text colour. Design system uses MUI Typography variants that reference tokens. Both can coexist — MUI components use the theme, Tailwind templates use the classes. + +## Breakpoints — fully aligned + +| Name | Value | Source | +|---|---|---| +| `xs` | 0px | Both (MUI default) | +| `sm` | 600px | Both (MUI default) | +| `md` | 960px | Both (MUI v4 default) | +| `lg` | 1280px | Both (MUI default) | +| `xl` | 1536px | Both (MUI v5+ default) | + +## Spacing — compatible + +Production's custom spacing (5px, 12px, 12.5px, 14px, 15px, 30px) is preserved as `padding` and `margin` extensions. Design system's 4px-base scale is available as standard Tailwind spacing utilities. + +## Conclusion + +The merged `tailwind.config.js` provides full backward compatibility with production's existing classes while adding the design system's semantic palettes. The flagged colour conflicts are minor and can be resolved when production adopts the design system tokens directly. diff --git a/package.json b/package.json index 9d8c687..04e086b 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,32 @@ "private": true, "type": "module", "description": "Funeral Arranger Design System — React 19 + MUI v7 + Storybook 9 + Tailwind v3", + "main": "./dist/index.js", + "module": "./dist/index.js", + "types": "./dist/index.d.ts", + "exports": { + ".": { + "import": "./dist/index.js", + "types": "./dist/index.d.ts" + }, + "./theme": { + "import": "./dist/index.js", + "types": "./dist/index.d.ts" + }, + "./tailwind-config": "./tailwind.config.js", + "./tailwind-tokens": "./src/theme/generated/tailwind-tokens.js", + "./tokens.css": "./src/theme/generated/tokens.css" + }, + "files": [ + "dist", + "tailwind.config.js", + "src/theme/generated/tailwind-tokens.js", + "src/theme/generated/tokens.css" + ], "scripts": { "dev": "vite", - "build": "tsc && vite build", + "build": "tsc --noEmit && vite build", + "build:lib": "vite build && tsc -p tsconfig.build.json", "preview": "vite preview", "storybook": "storybook dev -p 6006", "build:storybook": "storybook build", diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..b0e9104 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,2 @@ +export { theme } from './theme'; +export type { Theme } from '@mui/material/styles'; diff --git a/tsconfig.build.json b/tsconfig.build.json new file mode 100644 index 0000000..8a63c68 --- /dev/null +++ b/tsconfig.build.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "noEmit": false, + "declaration": true, + "emitDeclarationOnly": true, + "outDir": "dist", + "noUnusedLocals": false, + "noUnusedParameters": false + }, + "include": ["src/index.ts", "src/theme"] +} diff --git a/vite.config.ts b/vite.config.ts index 1543b9e..9693b5a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -12,4 +12,32 @@ export default defineConfig({ '@theme': path.resolve(__dirname, 'src/theme'), }, }, + build: { + lib: { + entry: path.resolve(__dirname, 'src/index.ts'), + formats: ['es'], + fileName: 'index', + }, + rollupOptions: { + external: [ + 'react', + 'react-dom', + 'react/jsx-runtime', + '@mui/material', + '@mui/material/styles', + '@mui/system', + '@mui/icons-material', + '@emotion/react', + '@emotion/styled', + ], + output: { + globals: { + react: 'React', + 'react-dom': 'ReactDOM', + }, + }, + }, + outDir: 'dist', + sourcemap: true, + }, });