{"_id":"@aaronshepard/design-system-base","_rev":"4-6c8048fe8eb31c7e453623b1b4060b57","name":"@aaronshepard/design-system-base","dist-tags":{"latest":"1.1.2"},"versions":{"1.0.2":{"name":"@aaronshepard/design-system-base","version":"1.0.2","author":{"name":"Aaron Shepard"},"license":"PRIVATE","_id":"@aaronshepard/design-system-base@1.0.2","maintainers":[{"name":"aaronshepard","email":"aaronkshepard@gmail.com"}],"dist":{"shasum":"68160e49f7b480fa91c3699e2f5e9b5f2ef9c90b","tarball":"https://registry.npmjs.org/@aaronshepard/design-system-base/-/design-system-base-1.0.2.tgz","fileCount":44,"integrity":"sha512-cIRV3uOK9nLuTO+Tc96uGy8IDvvnr4CoEfLQoG3YZqvOhlVCbjuGU0wtrUF9R4CI6tIq5zQYU4gdp5M8B1TSeQ==","signatures":[{"sig":"MEQCICHbZ7P+FiQA7B6EbyVRTtqVbooNqE6+I4WBLxXUfQLdAiBH8N0sOscvhe/EV5VzOI0PdtssUmBRpDnxqaVTvzUErg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":221044},"main":"dist/index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./dist/index.js","require":"./dist/index.js"},"./dist/*":"./dist/*","./src/styles/*":"./src/styles/*"},"gitHead":"9a062eb899c874a73f93f181685efadb822d145d","scripts":{"build":"tsc && npm run copy-css","watch":"tsc --watch","copy-css":"cp src/components/Button/Button.css dist/components/Button/ 2>/dev/null || true && cp src/components/IconButton/IconButton.css dist/components/IconButton/ 2>/dev/null || true && cp src/components/ButtonGroup/ButtonGroup.css dist/components/ButtonGroup/ 2>/dev/null || true && cp src/components/Header/Header.css dist/components/Header/ 2>/dev/null || true && cp src/components/Sidebar/Sidebar.css dist/components/Sidebar/ 2>/dev/null || true && cp src/components/SidebarButton/SidebarButton.css dist/components/SidebarButton/ 2>/dev/null || true && cp src/components/SidebarTitle/SidebarTitle.css dist/components/SidebarTitle/ 2>/dev/null || true && cp src/components/SidebarListItemSingle/SidebarListItemSingle.css dist/components/SidebarListItemSingle/ 2>/dev/null || true && cp src/components/SidebarListItemDouble/SidebarListItemDouble.css dist/components/SidebarListItemDouble/ 2>/dev/null || true && cp src/components/SearchInput/SearchInput.css dist/components/SearchInput/ 2>/dev/null || true && cp src/components/ListItem/ListItem.css dist/components/ListItem/ 2>/dev/null || true"},"_npmUser":{"name":"aaronshepard","email":"aaronkshepard@gmail.com"},"_npmVersion":"10.9.2","description":"Shared design system for all company applications","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^4.9.5","@types/react":"^19.1.6","lucide-react":"^0.553.0","@types/react-dom":"^19.1.5"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0","lucide-react":"^0.553.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-base_1.0.2_1769890288870_0.16951713432068094","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@aaronshepard/design-system-base","version":"1.1.0","author":{"name":"Aaron Shepard"},"license":"PRIVATE","_id":"@aaronshepard/design-system-base@1.1.0","maintainers":[{"name":"aaronshepard","email":"aaronkshepard@gmail.com"}],"dist":{"shasum":"7e91cd0efd9875e87cb8b07602ec87ae0901e89d","tarball":"https://registry.npmjs.org/@aaronshepard/design-system-base/-/design-system-base-1.1.0.tgz","fileCount":53,"integrity":"sha512-pzsfsAQvxDg4u3N4mFdyuWmgWUpK8AU4ni+UCRAlbc5zldEUX3tH0WbXay5DE0V1SxAhHcRTYdecgXxR2CG9qQ==","signatures":[{"sig":"MEQCIDtGzh7l985HuJkbpK2o0UjaNBn0f1ob4nqXZsvOr9lSAiAPqVGcMK/Wmw9IyXRy+CI7lT7zVzM8lzjgqBvuOH6QQw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":262369},"main":"dist/index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./dist/index.js","require":"./dist/index.js"},"./dist/*":"./dist/*","./src/styles/*":"./src/styles/*"},"gitHead":"6a3706492d1ba8cd6d1fd1231bcf04c8c844d103","scripts":{"build":"tsc && npm run copy-css","watch":"tsc --watch","copy-css":"cp src/components/Button/Button.css dist/components/Button/ 2>/dev/null || true && cp src/components/IconButton/IconButton.css dist/components/IconButton/ 2>/dev/null || true && cp src/components/ButtonGroup/ButtonGroup.css dist/components/ButtonGroup/ 2>/dev/null || true && cp src/components/Header/Header.css dist/components/Header/ 2>/dev/null || true && cp src/components/Sidebar/Sidebar.css dist/components/Sidebar/ 2>/dev/null || true && cp src/components/SidebarButton/SidebarButton.css dist/components/SidebarButton/ 2>/dev/null || true && cp src/components/SidebarTitle/SidebarTitle.css dist/components/SidebarTitle/ 2>/dev/null || true && cp src/components/SidebarListItemSingle/SidebarListItemSingle.css dist/components/SidebarListItemSingle/ 2>/dev/null || true && cp src/components/SidebarListItemDouble/SidebarListItemDouble.css dist/components/SidebarListItemDouble/ 2>/dev/null || true && cp src/components/SearchInput/SearchInput.css dist/components/SearchInput/ 2>/dev/null || true && cp src/components/ListItem/ListItem.css dist/components/ListItem/ 2>/dev/null || true && cp src/components/ScrollableDropdown/ScrollableDropdown.css dist/components/ScrollableDropdown/ 2>/dev/null || true"},"_npmUser":{"name":"aaronshepard","email":"aaronkshepard@gmail.com"},"_npmVersion":"10.9.2","description":"Shared design system for all company applications","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^4.9.5","@types/react":"^19.1.6","lucide-react":"^0.553.0","@types/react-dom":"^19.1.5"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0","lucide-react":"^0.553.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-base_1.1.0_1772988694360_0.1186446311475251","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@aaronshepard/design-system-base","version":"1.1.1","author":{"name":"Aaron Shepard"},"license":"PRIVATE","_id":"@aaronshepard/design-system-base@1.1.1","maintainers":[{"name":"aaronshepard","email":"aaronkshepard@gmail.com"}],"dist":{"shasum":"8df39c7bda57205545d8c30622a62bca1b05a513","tarball":"https://registry.npmjs.org/@aaronshepard/design-system-base/-/design-system-base-1.1.1.tgz","fileCount":53,"integrity":"sha512-HEHHDLbKsWu9EaNwVRvqzvwVxAkq9T/7y+zwXi+a6kMZjOeuOdf+eG/wxTZFtRu008kW61kF/PAaxRTSf7dUXg==","signatures":[{"sig":"MEYCIQDXW3XKS6wR+7rHjbhIVKe7vuiSCNTsKKFHXEELR7FPegIhAMOAta1jVg45QwNY2xEFPUppRJXlPX3sLY1/WQycftP6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":263027},"main":"dist/index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./dist/index.js","require":"./dist/index.js"},"./dist/*":"./dist/*","./src/styles/*":"./src/styles/*"},"gitHead":"6a3706492d1ba8cd6d1fd1231bcf04c8c844d103","scripts":{"build":"tsc && npm run copy-css","watch":"tsc --watch","copy-css":"cp src/components/Button/Button.css dist/components/Button/ 2>/dev/null || true && cp src/components/IconButton/IconButton.css dist/components/IconButton/ 2>/dev/null || true && cp src/components/ButtonGroup/ButtonGroup.css dist/components/ButtonGroup/ 2>/dev/null || true && cp src/components/Header/Header.css dist/components/Header/ 2>/dev/null || true && cp src/components/Sidebar/Sidebar.css dist/components/Sidebar/ 2>/dev/null || true && cp src/components/SidebarButton/SidebarButton.css dist/components/SidebarButton/ 2>/dev/null || true && cp src/components/SidebarTitle/SidebarTitle.css dist/components/SidebarTitle/ 2>/dev/null || true && cp src/components/SidebarListItemSingle/SidebarListItemSingle.css dist/components/SidebarListItemSingle/ 2>/dev/null || true && cp src/components/SidebarListItemDouble/SidebarListItemDouble.css dist/components/SidebarListItemDouble/ 2>/dev/null || true && cp src/components/SearchInput/SearchInput.css dist/components/SearchInput/ 2>/dev/null || true && cp src/components/ListItem/ListItem.css dist/components/ListItem/ 2>/dev/null || true && cp src/components/ScrollableDropdown/ScrollableDropdown.css dist/components/ScrollableDropdown/ 2>/dev/null || true"},"_npmUser":{"name":"aaronshepard","email":"aaronkshepard@gmail.com"},"_npmVersion":"10.9.2","description":"Shared design system for all company applications","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^4.9.5","@types/react":"^19.1.6","lucide-react":"^0.553.0","@types/react-dom":"^19.1.5"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0","lucide-react":"^0.553.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-base_1.1.1_1772991206079_0.6950390277228111","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@aaronshepard/design-system-base","version":"1.1.2","description":"Shared design system for all company applications","main":"dist/index.js","types":"index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./dist/index.js","require":"./dist/index.js"},"./dist/*":"./dist/*","./src/styles/*":"./src/styles/*"},"author":{"name":"Aaron Shepard"},"license":"PRIVATE","publishConfig":{"access":"public"},"scripts":{"build":"tsc && npm run copy-css","copy-css":"cp src/components/Button/Button.css dist/components/Button/ 2>/dev/null || true && cp src/components/IconButton/IconButton.css dist/components/IconButton/ 2>/dev/null || true && cp src/components/ButtonGroup/ButtonGroup.css dist/components/ButtonGroup/ 2>/dev/null || true && cp src/components/Header/Header.css dist/components/Header/ 2>/dev/null || true && cp src/components/Sidebar/Sidebar.css dist/components/Sidebar/ 2>/dev/null || true && cp src/components/SidebarButton/SidebarButton.css dist/components/SidebarButton/ 2>/dev/null || true && cp src/components/SidebarTitle/SidebarTitle.css dist/components/SidebarTitle/ 2>/dev/null || true && cp src/components/SidebarListItemSingle/SidebarListItemSingle.css dist/components/SidebarListItemSingle/ 2>/dev/null || true && cp src/components/SidebarListItemDouble/SidebarListItemDouble.css dist/components/SidebarListItemDouble/ 2>/dev/null || true && cp src/components/SearchInput/SearchInput.css dist/components/SearchInput/ 2>/dev/null || true && cp src/components/ListItem/ListItem.css dist/components/ListItem/ 2>/dev/null || true && cp src/components/ScrollableDropdown/ScrollableDropdown.css dist/components/ScrollableDropdown/ 2>/dev/null || true","watch":"tsc --watch"},"peerDependencies":{"lucide-react":"^0.553.0","react":"^19.1.0","react-dom":"^19.1.0"},"devDependencies":{"@types/react":"^19.1.6","@types/react-dom":"^19.1.5","lucide-react":"^0.553.0","typescript":"^4.9.5"},"_id":"@aaronshepard/design-system-base@1.1.2","gitHead":"6a3706492d1ba8cd6d1fd1231bcf04c8c844d103","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-WNJ5z45tLuriX2NmF7l6JCeGT6vBJyL75d5W35mzgvf7P2F2r8/drnZ84vz0Gkgo1jU8bMKN2SQi604KbdTGTw==","shasum":"492d7551600aab761b17f9baeca4ab7e5ac33232","tarball":"https://registry.npmjs.org/@aaronshepard/design-system-base/-/design-system-base-1.1.2.tgz","fileCount":53,"unpackedSize":263246,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC/L5wpNbo1O8dQkeEGxSOYsH5NyvU29e6ZPNaaOzTEUAiBXR0puQuCHYEK+6pcR+szSqy8Jkefeu8DH6qP/IDLeYQ=="}]},"_npmUser":{"name":"aaronshepard","email":"aaronkshepard@gmail.com"},"directories":{},"maintainers":[{"name":"aaronshepard","email":"aaronkshepard@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system-base_1.1.2_1773074291568_0.057489953149804096"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-31T20:11:28.479Z","modified":"2026-03-09T16:38:11.865Z","1.0.2":"2026-01-31T20:11:29.019Z","1.1.0":"2026-03-08T16:51:34.518Z","1.1.1":"2026-03-08T17:33:26.223Z","1.1.2":"2026-03-09T16:38:11.742Z"},"author":{"name":"Aaron Shepard"},"license":"PRIVATE","description":"Shared design system for all company applications","maintainers":[{"name":"aaronshepard","email":"aaronkshepard@gmail.com"}],"readme":"# Design System Base\n\n**Version:** 1.0.0  \n**Status:** ✅ Foundation Complete (Week 1)  \n**Purpose:** Shared, brand-agnostic design system for 10+ applications\n\n---\n\n## 🎯 What is This?\n\nA **scalable design system** that enables multiple applications to:\n\n- ✅ Share components and styles\n- ✅ Apply different brand themes (colors, logos, fonts)\n- ✅ Switch themes at runtime\n- ✅ Maintain consistency across 10+ apps\n- ✅ Change entire app color scheme in **1 line of code**\n\n### The Problem We're Solving\n\n**Before:** Each app has duplicated code. Changing a color means editing 83+ files per app.\n\n**After:** Single source of truth. One brand config file changes the entire app.\n\n---\n\n## 🚀 Quick Start\n\n### 1. Install in Your App\n\nSince this is a local package, add it to your `package.json`:\n\n```json\n{\n  \"dependencies\": {\n    \"design-system-base\": \"file:../design-system-base\"\n  }\n}\n```\n\nThen install:\n\n```bash\nnpm install\n```\n\n### 2. Create Your Brand Config\n\nCreate `src/brand/brand-config.ts` in your app:\n\n```typescript\nimport { BrandConfig } from 'design-system-base';\n\nexport const myAppBrand: BrandConfig = {\n  name: 'My App',\n  \n  colors: {\n    primary: '#8B5CF6',    // Your brand color\n    secondary: '#A78BFA',   // Optional\n    accent: '#C4B5FD',      // Optional\n    neutral: '#525252',     // Optional\n  },\n  \n  logo: {\n    collapsed: 'M',         // Text or path to SVG\n    expanded: 'My App',\n    alt: 'My App Logo',\n  },\n  \n  favicon: '/favicon.svg',\n};\n```\n\n### 3. Import CSS Tokens\n\nCopy these CSS files to your app's `src/styles/`:\n\n```bash\ncp ../design-system-base/src/styles/primitives.css ./src/styles/primitives-from-ds.css\ncp ../design-system-base/src/styles/semantic-tokens.css ./src/styles/semantic-tokens-from-ds.css\n```\n\nThen import in your `src/index.css`:\n\n```css\n@import './styles/primitives-from-ds.css';\n@import './styles/semantic-tokens-from-ds.css';\n```\n\n### 4. Wrap Your App with ThemeProvider\n\n```typescript\n// src/App.tsx\nimport { ThemeProvider } from 'design-system-base';\nimport { myAppBrand } from './brand/brand-config';\n\nfunction App() {\n  return (\n    <ThemeProvider brand={myAppBrand}>\n      <YourApp />\n    </ThemeProvider>\n  );\n}\n```\n\n### 5. That's It! 🎉\n\nYour app now uses your brand colors everywhere!\n\n---\n\n## 📁 Package Structure\n\n```\ndesign-system-base/\n├── src/\n│   ├── styles/\n│   │   ├── primitives.css              # Generic color scales (blue, violet, etc.)\n│   │   └── semantic-tokens.css         # Component tokens (--button-primary-bg, etc.)\n│   │\n│   ├── themes/\n│   │   ├── ThemeProvider.tsx           # React Context provider\n│   │   ├── theme-types.ts              # TypeScript interfaces\n│   │   └── index.ts                    # Public API\n│   │\n│   ├── components/                     # Shared components (Week 2+)\n│   │   └── (coming soon)\n│   │\n│   └── index.ts                        # Main entry point\n│\n├── dist/                               # Compiled JavaScript (auto-generated)\n│   └── (CommonJS output)\n│\n├── docs/\n│   └── TOKEN-REFERENCE.md              # CSS variable documentation\n│\n├── package.json\n├── tsconfig.json\n└── README.md                           # You are here!\n```\n\n---\n\n## 🎨 How Theming Works\n\n### 4-Layer Token System\n\n```\n┌─────────────────────────────────────────────┐\n│ LAYER 1: Primitives (Brand-Agnostic)       │\n│ --violet-500: #8B5CF6                       │\n│ --blue-600: #2E75B9                         │\n└─────────────────────────────────────────────┘\n                    ↓\n┌─────────────────────────────────────────────┐\n│ LAYER 2: Brand Tokens (Set by App)         │\n│ --brand-primary: var(--violet-500)          │\n└─────────────────────────────────────────────┘\n                    ↓\n┌─────────────────────────────────────────────┐\n│ LAYER 3: Component Tokens (Semantic)       │\n│ --button-primary-bg: var(--brand-primary)   │\n└─────────────────────────────────────────────┘\n                    ↓\n┌─────────────────────────────────────────────┐\n│ LAYER 4: Component Styles (Usage)          │\n│ background: var(--button-primary-bg)        │\n└─────────────────────────────────────────────┘\n```\n\n### The Magic ✨\n\nWhen you set `colors.primary: '#8B5CF6'` in your brand config:\n\n1. ThemeProvider injects `--brand-primary: #8B5CF6` into the DOM\n2. All semantic tokens reference `--brand-primary`\n3. All components use semantic tokens\n4. **Result:** Entire app becomes violet!\n\n---\n\n## 🎨 Example: Multiple Apps, Different Colors\n\n### Oh Yeah App (Violet)\n\n```typescript\n// oh-yeah/src/brand/brand-config.ts\nexport const ohYeahBrand: BrandConfig = {\n  name: 'Oh Yeah',\n  colors: { primary: '#8B5CF6' },  // Violet\n};\n```\n\n### HearstGPT App (Blue)\n\n```typescript\n// hearst-gpt/src/brand/brand-config.ts\nexport const hearstBrand: BrandConfig = {\n  name: 'HearstGPT',\n  colors: { primary: '#2E75B9' },  // Blue\n};\n```\n\n### Medical App (Red)\n\n```typescript\n// medical-app/src/brand/brand-config.ts\nexport const medicalBrand: BrandConfig = {\n  name: 'Medical App',\n  colors: { primary: '#EF4444' },  // Red\n};\n```\n\n**Same components, different colors!** 🌈\n\n---\n\n## 🧩 Available CSS Variables\n\n### Brand Tokens (Set by Your App)\n\nThese are what you control in `brand-config.ts`:\n\n```css\n--brand-primary          /* Main brand color */\n--brand-primary-hover    /* Hover state */\n--brand-primary-active   /* Active/pressed state */\n--brand-primary-light    /* Light tint */\n--brand-primary-lighter  /* Lighter tint */\n--brand-secondary        /* Secondary color */\n--brand-accent           /* Accent color */\n--brand-neutral          /* Neutral text/borders */\n```\n\n### Component Tokens (Pre-configured)\n\nThese automatically use your brand colors:\n\n```css\n/* Buttons */\n--button-primary-bg\n--button-primary-text\n--button-primary-border\n--button-primary-bg-hover\n\n/* Sidebar */\n--sidebar-focus-color\n--sidebar-text-active\n\n/* Forms */\n--input-focus-border\n--input-focus-ring\n\n/* ... and many more! */\n```\n\nSee [`docs/TOKEN-REFERENCE.md`](./docs/TOKEN-REFERENCE.md) for complete list.\n\n---\n\n## 🛠️ Development\n\n### Build the Package\n\n```bash\ncd design-system-base\nnpm run build\n```\n\nThis compiles TypeScript to JavaScript in the `dist/` folder.\n\n### Watch Mode (Development)\n\n```bash\nnpm run watch\n```\n\nAuto-rebuilds on file changes.\n\n### Link to an App (Local Development)\n\n```bash\n# In your app\ncd oh-yeah\nnpm install\n```\n\nThe `file:../design-system-base` reference auto-links.\n\n---\n\n## 📦 Package Details\n\n### Entry Points\n\n- **Main:** `dist/index.js` (CommonJS)\n- **Types:** `dist/index.d.ts` (TypeScript definitions)\n- **CSS:** `src/styles/*.css` (CSS files)\n\n### Exports\n\n```typescript\n// Main exports\nimport { ThemeProvider, useTheme } from 'design-system-base';\n\n// Types\nimport type { BrandConfig, Theme, ThemeMode } from 'design-system-base';\n```\n\n### Dependencies\n\n- **Peer Dependencies:** `react ^19.1.0`, `react-dom ^19.1.0`\n  - Your app provides these (avoids duplicate React instances)\n\n---\n\n## 🎓 TypeScript Support\n\n### BrandConfig Interface\n\n```typescript\ninterface BrandConfig {\n  name: string;\n  \n  colors: {\n    primary: string;\n    secondary?: string;\n    accent?: string;\n    neutral?: string;\n  };\n  \n  logo: {\n    collapsed: string | React.ReactNode;\n    expanded: string | React.ReactNode;\n    alt: string;\n    header?: string;\n  };\n  \n  favicon: string;\n  \n  typography?: {\n    primary?: string;\n    mono?: string;\n  };\n  \n  variants?: {\n    button?: 'rounded' | 'sharp';\n    sidebar?: 'compact' | 'spacious';\n  };\n}\n```\n\n### ThemeProvider Props\n\n```typescript\ninterface ThemeProviderProps {\n  brand: BrandConfig;\n  defaultMode?: 'light' | 'dark';\n  children: React.ReactNode;\n}\n```\n\n### useTheme Hook\n\n```typescript\nconst { theme, setMode } = useTheme();\n\n// theme.brand.name\n// theme.brand.colors.primary\n// theme.mode  // 'light' or 'dark'\n// setMode('dark')\n```\n\n---\n\n## 🧪 Testing Your Theme\n\n### 1. Check Browser Console\n\nYou should see:\n\n```\n✅ Theme applied: My App (light mode)\nBrand colors: {primary: '#8B5CF6', ...}\n```\n\n### 2. Inspect CSS Variables\n\nOpen DevTools → Elements → `<html>` → Computed styles\n\nSearch for `--brand-primary` → Should be your color!\n\n### 3. Visual Check\n\n- Buttons should use your brand color\n- Links should use your brand color\n- Focus states should use your brand color\n\n---\n\n## 📚 Documentation\n\n- **[TOKEN-REFERENCE.md](./docs/TOKEN-REFERENCE.md)** - Complete CSS variable reference\n- **[../oh-yeah/docs/MULTI-APP-ARCHITECTURE-PLAN.md](../oh-yeah/docs/MULTI-APP-ARCHITECTURE-PLAN.md)** - Strategic overview\n- **[../oh-yeah/docs/DESIGN-SYSTEM-EXTRACTION-GUIDE.md](../oh-yeah/docs/DESIGN-SYSTEM-EXTRACTION-GUIDE.md)** - Technical implementation guide\n- **[../oh-yeah/docs/WEEK-1-KICKOFF.md](../oh-yeah/docs/WEEK-1-KICKOFF.md)** - Week 1 progress\n\n---\n\n## 🚧 Roadmap\n\n### ✅ Week 1 - Foundation (COMPLETE)\n- [x] Package structure\n- [x] Primitives (brand-agnostic colors)\n- [x] Semantic tokens (--brand-primary)\n- [x] ThemeProvider + TypeScript types\n- [x] Oh Yeah brand config (violet theme)\n- [x] Integration & testing\n\n### 🔜 Week 2 - Component Migration\n- [ ] Extract Button component\n- [ ] Extract Sidebar component\n- [ ] Extract Header component\n- [ ] Extract Form components\n- [ ] Document component APIs\n\n### 🔜 Weeks 3-5 - More Components\n- [ ] Extract remaining components\n- [ ] Add component variants\n- [ ] Build component playground\n- [ ] Write component documentation\n\n### 🔜 Week 6 - Polish\n- [ ] Complete documentation\n- [ ] Build demo apps\n- [ ] Performance optimization\n- [ ] Final testing\n\n---\n\n## ❓ FAQ\n\n### Q: Why copy CSS files instead of importing from node_modules?\n\n**A:** Create React App's Webpack doesn't allow CSS imports from outside `src/`. Copying is the simplest solution. In the future, we may publish to npm and use proper module resolution.\n\n### Q: Can I use this with dark mode?\n\n**A:** Yes! Use `setMode('dark')` from the `useTheme()` hook. Dark mode tokens coming in Week 2.\n\n### Q: What if I need a custom color that's not in primitives?\n\n**A:** Add it to your app's local CSS file. If it's useful for other apps, submit a request to add it to primitives.\n\n### Q: How do I update to new versions?\n\n**A:** Since it's a local `file:` link, changes automatically sync. Just rebuild the package and restart your app's dev server.\n\n### Q: Can I use this without React?\n\n**A:** The CSS tokens work standalone! Just don't use ThemeProvider. Set CSS variables manually with JavaScript.\n\n---\n\n## 🤝 Contributing\n\n### Adding New Colors to Primitives\n\n1. Add to `src/styles/primitives.css`\n2. Use generic names (e.g., `--teal-500`, not `--medical-primary`)\n3. Provide full scale (50-900)\n4. Document in TOKEN-REFERENCE.md\n\n### Adding New Semantic Tokens\n\n1. Add to `src/styles/semantic-tokens.css`\n2. Reference `--brand-*` or primitives, never hard-coded values\n3. Use semantic names (e.g., `--button-danger-bg`, not `--button-red`)\n4. Document in TOKEN-REFERENCE.md\n\n### Extracting Components (Week 2+)\n\nSee **Component Migration Guide** (coming soon)\n\n---\n\n## 📊 Current Apps\n\n| App Name | Theme Color | Status | Link |\n|----------|------------|--------|------|\n| Oh Yeah | Violet (#8B5CF6) | ✅ Live | http://localhost:3002 |\n| HearstGPT | Blue (#2E75B9) | 🔜 Coming | - |\n| App 3-10 | TBD | 🔜 Coming | - |\n\n---\n\n## 🎉 Success Stories\n\n### Before Design System\n\n**To change HearstGPT from blue to violet:**\n- Edit 83 component files\n- Find/replace color values\n- Test every component\n- Risk breaking things\n- **Time:** 2-3 days\n\n### After Design System\n\n**To change Oh Yeah to violet:**\n\n```typescript\ncolors: { primary: '#8B5CF6' }  // DONE! ✨\n```\n\n- **Time:** 5 seconds\n- **Files changed:** 1\n- **Risk:** Zero\n\n---\n\n## 📞 Support\n\nQuestions? Issues? Ideas?\n\n- See `/docs` for detailed guides\n- Check `TOKEN-REFERENCE.md` for CSS variables\n- Review `oh-yeah/docs/` for implementation examples\n\n---\n\n## 🏆 Credits\n\n**Built by:** Aaron Shepard + AI Assistant  \n**Started:** November 2025  \n**Purpose:** Scale to 10+ applications with consistent design\n\n---\n\n## 📄 License\n\nPRIVATE - Internal use only\n\n---\n\n**Happy Theming! 🎨**\n","readmeFilename":"README.md"}