Design System

A React + TypeScript component library and token pipeline, shared across three real sites/brands: Edward Guerra (personal portfolio), Material and Home, and Midwest Husbands.

🎯 Overview

• Token-based theming with Style Dictionary, sourced from each brand's actual live CSS custom properties
• 24 React components with TypeScript
• Three real brand themes — eg, materialandhome, midwest-husbands
• Storybook documentation with a live theme switcher
• Testing with Vitest + Testing Library

🚀 Quick Start

# Install dependencies
npm install

# Build tokens, CSS, and components
npm run build

# Start Storybook
npm run storybook

# Run tests
npm test

📦 Components

All 24 components are implemented: Button, Badge, Card, Input, Modal, Tabs, Accordion, Switch, Radio, ThemeProvider, Pagination, Icon, Tooltip, DescriptionList, Timeline, Carousel, List, Nav, Article, Feature, TOC, Slider, Table, Menu, Link.

Most were ported directly from the SCSS shared across the three live sites (2025-portfolio, materialandhome, midwest-husbands, which all use the same component partial structure). A few — Pagination, Icon, DescriptionList, Nav, Article, Feature, TOC, and Tooltip — didn't have a clean componentized API in the source (page-specific layout CSS, or in Tooltip's case, no CSS at all), so their React APIs are original designs built from the tokens and visual patterns those sites do use, rather than a literal mirror.

🎨 Tokens & Theming

Design tokens are defined in JSON (Style Dictionary) and compiled to CSS/SCSS/JS/TypeScript in dist/tokens/. The three brand themes live in src/brand-themes.css, keyed by [data-color-theme="eg" | "materialandhome" | "midwest-husbands"], each setting the same --eg-* semantic variable names components already use — see THEME_SWITCHING.md.

tokens/
├── core/           # Primitive tokens (colors, spacing, typography)
├── semantic/       # Component-specific tokens
└── brands/         # Brand primary/secondary/tint (eg, materialandhome, midwest-husbands)

🏗️ Project Structure

.
├── src/
│   ├── components/       # React components (24)
│   ├── brand-themes.css  # The 3 real brand theme definitions
│   ├── styles/            # Compiles to the static-site CSS bundle
│   └── index.ts           # Public exports
├── tokens/                # Design token definitions
├── dist/                  # Build output (tokens, CSS, components)
└── .storybook/             # Storybook config

🧪 Testing

npm test              # Watch mode
npm test -- --run     # Run once
npm run lint

📖 Documentation

npm run storybook            # http://localhost:6006
npm run build-storybook      # Static build

📄 License

[Your License Here]