npm - @launch77-shared/plugin-design-system - Versions diffs - 1.0.0 - Mend

@launch77-shared/plugin-design-system 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +244 -0
package/dist/generator.js +219 -0
package/package.json +47 -0
package/plugin.json +10 -0
package/templates/app/design-system-test/page.tsx +203 -0
package/templates/src/.gitkeep +0 -0
package/templates/src/modules/design-system/README.md +318 -0
package/templates/src/modules/design-system/config/brand.css +23 -0

package/README.md ADDED Viewed

@@ -0,0 +1,244 @@
+# Design System Plugin
+Launch77 plugin for setting up a token-driven design system with Tailwind CSS integration.
+## Features
+- 🎨 **Semantic Design Tokens** - HSL-format CSS custom properties for consistent theming
+- 🌗 **Dark Mode** - Complete dark mode support via `.dark` class
+- ⚡ **Tailwind Integration** - Automatic preset configuration with all theme colors
+- 🎬 **Animations** - 8 built-in keyframe animations
+- 🎯 **Brand Customization** - Simple CSS override system
+- 🔧 **shadcn Compatible** - Follows shadcn/ui token architecture
+- 📄 **Test Page** - Comprehensive visual testing route
+## Installation
+From your Launch77 app directory:
+```bash
+launch77 plugin:install design-system
+```
+The plugin will automatically:
+1. Add `@launch77-shared/lib-design-system` dependency to package.json
+2. Insert CSS token imports into `app/globals.css`
+3. Add Tailwind preset to `tailwind.config.ts`
+4. Copy template files:
+   - `/app/design-system-test/page.tsx` - Visual test page
+   - `/src/modules/design-system/config/brand.css` - Brand customization
+   - `/src/modules/design-system/README.md` - Module documentation
+## What Gets Modified
+### `package.json`
+```json
+{
+  "dependencies": {
+    "@launch77-shared/lib-design-system": "^0.1.0"
+  }
+}
+```
+### `app/globals.css`
+```css
+/* Launch77 Design System */
+@import '@launch77-shared/lib-design-system/tokens.css';
+@import '../src/modules/design-system/config/brand.css';
+```
+### `tailwind.config.ts`
+```typescript
+const config: Config = {
+  presets: [require('@launch77-shared/lib-design-system')],
+  // ... rest of config
+}
+```
+## Quick Start
+After installation:
+1. **Test the design system**
+   ```bash
+   npm run dev
+   # Visit http://localhost:3000/design-system-test
+   ```
+2. **Customize your brand colors**
+   Edit `src/modules/design-system/config/brand.css`:
+   ```css
+   :root {
+     /* Your brand's primary color */
+     --color-primary: 158 64% 52%;
+     --color-primary-foreground: 0 0% 100%;
+   }
+   .dark {
+     /* Dark mode overrides */
+     --color-primary: 158 64% 52%;
+   }
+   ```
+3. **Start building with semantic tokens**
+   ```tsx
+   <button className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-4 py-2">Primary Action</button>
+   ```
+## Available Tokens
+The design system provides semantic color tokens:
+- `background` / `foreground` - Main app background and text
+- `primary` / `primary-foreground` - Brand color
+- `secondary` / `secondary-foreground` - Secondary actions
+- `accent` / `accent-foreground` - Accent/highlight color
+- `muted` / `muted-foreground` - Subtle backgrounds
+- `destructive` / `destructive-foreground` - Errors/warnings
+- `card` / `card-foreground` - Card backgrounds
+- `border` - Border color
+- `input` - Input border color
+- `ring` - Focus ring color
+Use with Tailwind utilities:
+```tsx
+<div className="bg-card text-card-foreground border border-border rounded-lg p-6">
+  <p className="text-muted-foreground">Subtle text</p>
+</div>
+```
+## Alpha Channel Support
+All colors support Tailwind's alpha channel syntax:
+```tsx
+<div className="bg-primary/10">10% opacity</div>
+<div className="bg-primary/20">20% opacity</div>
+<button className="bg-primary/90 hover:bg-primary">Hover effect</button>
+```
+## Dark Mode
+Toggle dark mode by adding/removing `.dark` class on `<html>`:
+```tsx
+'use client'
+export function DarkModeToggle() {
+  const toggleDark = () => {
+    document.documentElement.classList.toggle('dark')
+  }
+  return <button onClick={toggleDark}>Toggle Dark Mode</button>
+}
+```
+## Animations
+Built-in animations available as Tailwind utilities:
+- `animate-fade-in` / `animate-fade-out`
+- `animate-slide-in-from-top` / `-bottom` / `-left` / `-right`
+- `animate-accordion-down` / `animate-accordion-up`
+All animations respect `prefers-reduced-motion` preferences.
+## shadcn/ui Integration
+This design system follows shadcn/ui's token architecture. To add shadcn components:
+```bash
+npx shadcn@latest init
+npx shadcn@latest add button
+npx shadcn@latest add card
+```
+Components will automatically use your theme tokens.
+## Documentation
+For detailed documentation, see:
+- Module README: `src/modules/design-system/README.md` (installed with plugin)
+- Library README: `@launch77-shared/lib-design-system` package
+## Development
+### Building the Plugin
+```bash
+npm run build
+```
+Compiles TypeScript to `dist/generator.js`.
+### Testing Changes
+1. Build the plugin: `npm run build`
+2. Install in a test app: `launch77 plugin:install design-system`
+3. Verify all features work
+### Type Checking
+```bash
+npm run typecheck
+```
+## Architecture
+This plugin uses the `StandardGenerator` pattern:
+1. **updateDependencies()** - Reads `plugin.json`, merges into app's `package.json`
+2. **installDependencies()** - Runs `npm install` at workspace root
+3. **copyTemplates()** - Copies `templates/` to app
+4. **injectCode()** - Surgical code edits (CSS imports, Tailwind preset)
+All operations are idempotent - safe to run multiple times.
+## Template Files
+The `templates/` directory contains:
+```
+templates/
+├── app/
+│   └── design-system-test/
+│       └── page.tsx          # Comprehensive test page
+└── src/
+    └── modules/
+        └── design-system/
+            ├── config/
+            │   └── brand.css  # Brand customization
+            └── README.md      # Module documentation
+```
+## Troubleshooting
+### Colors Not Applying
+1. Verify CSS imports in `app/globals.css`
+2. Check Tailwind preset in `tailwind.config.ts`
+3. Restart dev server
+### Dark Mode Not Working
+1. Ensure `.dark` class is on `<html>` element (not `<body>`)
+2. Check browser DevTools to verify class is applied
+### Build Errors
+1. Run `npm install` at workspace root
+2. Verify `@launch77-shared/lib-design-system` in package.json
+3. Restart dev server
+## License
+UNLICENSED

package/dist/generator.js ADDED Viewed

@@ -0,0 +1,219 @@
+#!/usr/bin/env node
+// src/generator.ts
+import * as path from "path";
+import chalk from "chalk";
+import { StandardGenerator } from "@launch77/plugin-runtime";
+// src/utils/config-modifier.ts
+import fs from "fs/promises";
+async function addTailwindPreset(filePath, presetRequire) {
+  try {
+    const fileExists = await fs.access(filePath).then(() => true).catch(() => false);
+    if (!fileExists) {
+      return {
+        success: false,
+        error: `File not found: ${filePath}`
+      };
+    }
+    const content = await fs.readFile(filePath, "utf-8");
+    if (content.includes(presetRequire)) {
+      return {
+        success: true,
+        alreadyExists: true
+      };
+    }
+    const lines = content.split("\n");
+    let configStartIndex = -1;
+    let presetsIndex = -1;
+    let indentation = "  ";
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      if (line.includes("satisfies Config") || line.includes(": Config =")) {
+        configStartIndex = i;
+        for (let j = i + 1; j < lines.length; j++) {
+          const propLine = lines[j];
+          const match = propLine.match(/^(\s+)\w+:/);
+          if (match) {
+            indentation = match[1];
+            break;
+          }
+        }
+      }
+      if (line.includes("presets:")) {
+        presetsIndex = i;
+      }
+    }
+    if (configStartIndex === -1) {
+      return {
+        success: false,
+        error: "Could not find Tailwind config object"
+      };
+    }
+    let newContent;
+    if (presetsIndex !== -1) {
+      const presetsLine = lines[presetsIndex];
+      if (presetsLine.includes("[]")) {
+        lines[presetsIndex] = presetsLine.replace("[]", `[${presetRequire}]`);
+      } else {
+        const openBracketIndex = presetsLine.indexOf("[");
+        if (openBracketIndex !== -1) {
+          lines[presetsIndex] = presetsLine.slice(0, openBracketIndex + 1) + presetRequire + ", " + presetsLine.slice(openBracketIndex + 1);
+        } else {
+          return {
+            success: false,
+            error: "Could not parse existing presets array"
+          };
+        }
+      }
+      newContent = lines.join("\n");
+    } else {
+      let insertIndex = configStartIndex + 1;
+      if (lines[configStartIndex].includes("{")) {
+      } else {
+        while (insertIndex < lines.length && !lines[insertIndex].includes("{")) {
+          insertIndex++;
+        }
+        insertIndex++;
+      }
+      const presetsLine = `${indentation}presets: [${presetRequire}],`;
+      lines.splice(insertIndex, 0, presetsLine);
+      newContent = lines.join("\n");
+    }
+    await fs.writeFile(filePath, newContent, "utf-8");
+    return {
+      success: true
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+// src/utils/css-modifier.ts
+import fs2 from "fs/promises";
+async function insertCssImports(filePath, imports) {
+  try {
+    const fileExists = await fs2.access(filePath).then(() => true).catch(() => false);
+    if (!fileExists) {
+      return {
+        success: false,
+        error: `File not found: ${filePath}`
+      };
+    }
+    const content = await fs2.readFile(filePath, "utf-8");
+    const allImportsExist = imports.every((importLine) => content.includes(importLine));
+    if (allImportsExist) {
+      return {
+        success: true,
+        alreadyExists: true
+      };
+    }
+    const lines = content.split("\n");
+    let lastTailwindIndex = -1;
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].trim().startsWith("@tailwind")) {
+        lastTailwindIndex = i;
+      }
+    }
+    if (lastTailwindIndex === -1) {
+      return {
+        success: false,
+        error: "Could not find @tailwind directives"
+      };
+    }
+    const importsToAdd = imports.filter((importLine) => !content.includes(importLine));
+    if (importsToAdd.length === 0) {
+      return {
+        success: true,
+        alreadyExists: true
+      };
+    }
+    const before = lines.slice(0, lastTailwindIndex + 1);
+    const after = lines.slice(lastTailwindIndex + 1);
+    const newContent = [...before, "", "/* Launch77 Design System */", ...importsToAdd, ...after].join("\n");
+    await fs2.writeFile(filePath, newContent, "utf-8");
+    return {
+      success: true
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+// src/generator.ts
+var DesignSystemGenerator = class extends StandardGenerator {
+  constructor(context) {
+    super(context);
+  }
+  async injectCode() {
+    console.log(chalk.cyan("\u{1F527} Configuring design system...\n"));
+    await this.updateGlobalsCss();
+    await this.updateTailwindConfig();
+  }
+  async updateGlobalsCss() {
+    const globalsCssPath = path.join(this.context.appPath, "app/globals.css");
+    const result = await insertCssImports(globalsCssPath, ["@import '@launch77-shared/lib-design-system/tokens.css';", "@import '../src/modules/design-system/config/brand.css';"]);
+    if (result.success) {
+      if (result.alreadyExists) {
+        console.log(chalk.gray("   \u2713 CSS imports already exist in app/globals.css"));
+      } else {
+        console.log(chalk.green("   \u2713 Added CSS imports to app/globals.css"));
+      }
+    } else {
+      console.log(chalk.yellow(`   \u26A0\uFE0F  Could not auto-configure app/globals.css: ${result.error}`));
+      console.log(chalk.gray("   You will need to add imports manually"));
+    }
+  }
+  async updateTailwindConfig() {
+    const tailwindConfigPath = path.join(this.context.appPath, "tailwind.config.ts");
+    const result = await addTailwindPreset(tailwindConfigPath, "require('@launch77-shared/lib-design-system')");
+    if (result.success) {
+      if (result.alreadyExists) {
+        console.log(chalk.gray("   \u2713 Design system preset already exists in tailwind.config.ts"));
+      } else {
+        console.log(chalk.green("   \u2713 Added design system preset to tailwind.config.ts"));
+      }
+    } else {
+      console.log(chalk.yellow(`   \u26A0\uFE0F  Could not auto-configure tailwind.config.ts: ${result.error}`));
+      console.log(chalk.gray("   You will need to add preset manually"));
+    }
+  }
+  showNextSteps() {
+    console.log(chalk.bold.green("\n\u2705 Plugin installed successfully!\n"));
+    console.log(chalk.bold("Next Steps:\n"));
+    console.log("1. Test your design system:");
+    console.log(chalk.cyan("   Visit http://localhost:3000/design-system-test\n"));
+    console.log("2. Customize your brand:");
+    console.log(chalk.cyan("   Edit src/modules/design-system/config/brand.css\n"));
+  }
+};
+async function main() {
+  const args = process.argv.slice(2);
+  const appPath = args.find((arg) => arg.startsWith("--appPath="))?.split("=")[1];
+  const appName = args.find((arg) => arg.startsWith("--appName="))?.split("=")[1];
+  const workspaceName = args.find((arg) => arg.startsWith("--workspaceName="))?.split("=")[1];
+  const pluginPath = args.find((arg) => arg.startsWith("--pluginPath="))?.split("=")[1];
+  if (!appPath || !appName || !workspaceName || !pluginPath) {
+    console.error(chalk.red("Error: Missing required arguments"));
+    console.error("Usage: generate --appPath=<path> --appName=<name> --workspaceName=<workspace> --pluginPath=<path>");
+    process.exit(1);
+  }
+  const generator = new DesignSystemGenerator({ appPath, appName, workspaceName, pluginPath });
+  await generator.run();
+}
+if (import.meta.url === `file://${process.argv[1]}`) {
+  main().catch((error) => {
+    console.error(chalk.red("\n\u274C Error during design system setup:"));
+    console.error(error);
+    process.exit(1);
+  });
+}
+export {
+  DesignSystemGenerator
+};

package/package.json ADDED Viewed

@@ -0,0 +1,47 @@
+{
+  "name": "@launch77-shared/plugin-design-system",
+  "version": "1.0.0",
+  "description": "Launch77 design system plugin - Setup design tokens and Tailwind preset for elegant web applications",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "dist/generator.js",
+  "bin": {
+    "generate": "./dist/generator.js"
+  },
+  "files": [
+    "dist/",
+    "templates/",
+    "plugin.json"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/**/*.ts",
+    "release:connect": "launch77-release-connect",
+    "release:verify": "launch77-release-verify"
+  },
+  "dependencies": {
+    "@launch77-shared/lib-design-system": "^0.1.0",
+    "@launch77/plugin-runtime": "^0.2.0",
+    "chalk": "^5.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "launch77": {
+    "installedPlugins": {
+      "release": {
+        "package": "release",
+        "version": "1.0.0",
+        "installedAt": "2026-01-22T23:35:14.175Z",
+        "source": "local"
+      }
+    }
+  }
+}

package/plugin.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "name": "design-system",
+  "version": "1.0.0",
+  "description": "Launch77 design system - Token-driven theming foundation with Tailwind preset",
+  "targets": ["app", "library"],
+  "pluginDependencies": {},
+  "libraryDependencies": {
+    "@launch77-shared/lib-design-system": "^0.1.0"
+  }
+}

package/templates/app/design-system-test/page.tsx ADDED Viewed

@@ -0,0 +1,203 @@
+'use client'
+import { useState } from 'react'
+export default function DesignSystemTest() {
+  const [isDark, setIsDark] = useState(false)
+  const toggleDark = () => {
+    if (isDark) {
+      document.documentElement.classList.remove('dark')
+    } else {
+      document.documentElement.classList.add('dark')
+    }
+    setIsDark(!isDark)
+  }
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      {/* Header */}
+      <header className="max-w-6xl mx-auto mb-12">
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="text-4xl font-bold">Design System Test</h1>
+          <button onClick={toggleDark} className="px-4 py-2 rounded-lg bg-secondary text-secondary-foreground hover:bg-secondary/80 transition-colors">
+            {isDark ? '☀️ Light Mode' : '🌙 Dark Mode'}
+          </button>
+        </div>
+        <p className="text-muted-foreground">Testing all features of @launch77-shared/lib-design-system</p>
+      </header>
+      <div className="max-w-6xl mx-auto space-y-12">
+        {/* Color Tokens */}
+        <section>
+          <h2 className="text-2xl font-bold mb-6">Semantic Color Tokens</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <ColorCard name="Background" className="bg-background text-foreground border border-border" />
+            <ColorCard name="Primary" className="bg-primary text-primary-foreground" />
+            <ColorCard name="Secondary" className="bg-secondary text-secondary-foreground" />
+            <ColorCard name="Accent" className="bg-accent text-accent-foreground" />
+            <ColorCard name="Muted" className="bg-muted text-muted-foreground" />
+            <ColorCard name="Destructive" className="bg-destructive text-destructive-foreground" />
+            <ColorCard name="Card" className="bg-card text-card-foreground border border-border" />
+          </div>
+        </section>
+        {/* Alpha Channel Support */}
+        <section>
+          <h2 className="text-2xl font-bold mb-6">Alpha Channel Support</h2>
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+            <div className="bg-primary/10 text-primary p-4 rounded-lg text-center">10%</div>
+            <div className="bg-primary/20 text-primary p-4 rounded-lg text-center">20%</div>
+            <div className="bg-primary/40 text-primary p-4 rounded-lg text-center">40%</div>
+            <div className="bg-primary/60 text-primary p-4 rounded-lg text-center">60%</div>
+            <div className="bg-primary/80 text-primary p-4 rounded-lg text-center">80%</div>
+          </div>
+        </section>
+        {/* Buttons */}
+        <section>
+          <h2 className="text-2xl font-bold mb-6">Button Variants</h2>
+          <div className="flex flex-wrap gap-4">
+            <button className="px-6 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">Primary</button>
+            <button className="px-6 py-2 rounded-lg bg-secondary text-secondary-foreground hover:bg-secondary/80 transition-colors">Secondary</button>
+            <button className="px-6 py-2 rounded-lg bg-destructive text-destructive-foreground hover:bg-destructive/90 transition-colors">Destructive</button>
+            <button className="px-6 py-2 rounded-lg border border-input bg-background hover:bg-accent transition-colors">Outline</button>
+            <button className="px-6 py-2 hover:bg-accent hover:text-accent-foreground transition-colors rounded-lg">Ghost</button>
+          </div>
+        </section>
+        {/* Border Radius */}
+        <section>
+          <h2 className="text-2xl font-bold mb-6">Border Radius Scale</h2>
+          <div className="flex flex-wrap gap-4">
+            <div className="bg-primary text-primary-foreground p-6 rounded-sm">rounded-sm</div>
+            <div className="bg-primary text-primary-foreground p-6 rounded-md">rounded-md</div>
+            <div className="bg-primary text-primary-foreground p-6 rounded-lg">rounded-lg</div>
+          </div>
+        </section>
+        {/* Animations */}
+        <section>
+          <h2 className="text-2xl font-bold mb-6">Animations</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <AnimationDemo name="Fade In" className="animate-fade-in" />
+            <AnimationDemo name="Slide from Top" className="animate-slide-in-from-top" />
+            <AnimationDemo name="Slide from Bottom" className="animate-slide-in-from-bottom" />
+            <AnimationDemo name="Slide from Left" className="animate-slide-in-from-left" />
+            <AnimationDemo name="Slide from Right" className="animate-slide-in-from-right" />
+          </div>
+        </section>
+        {/* Form Elements */}
+        <section>
+          <h2 className="text-2xl font-bold mb-6">Form Elements</h2>
+          <div className="space-y-4 max-w-md">
+            <div>
+              <label className="block text-sm font-medium mb-2">Input Field</label>
+              <input type="text" placeholder="Enter text..." className="w-full px-3 py-2 rounded-md border border-input bg-background ring-offset-background focus-visible:ring-2 focus-visible:ring-ring" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">Textarea</label>
+              <textarea placeholder="Enter multiline text..." rows={4} className="w-full px-3 py-2 rounded-md border border-input bg-background ring-offset-background focus-visible:ring-2 focus-visible:ring-ring" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">Select</label>
+              <select className="w-full px-3 py-2 rounded-md border border-input bg-background ring-offset-background focus-visible:ring-2 focus-visible:ring-ring">
+                <option>Option 1</option>
+                <option>Option 2</option>
+                <option>Option 3</option>
+              </select>
+            </div>
+          </div>
+        </section>
+        {/* Cards */}
+        <section>
+          <h2 className="text-2xl font-bold mb-6">Cards</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="bg-card text-card-foreground p-6 rounded-lg border border-border">
+              <h3 className="text-lg font-semibold mb-2">Card Title</h3>
+              <p className="text-muted-foreground">This is a card component using semantic tokens.</p>
+            </div>
+            <div className="bg-card text-card-foreground p-6 rounded-lg border border-border">
+              <h3 className="text-lg font-semibold mb-2">Another Card</h3>
+              <p className="text-muted-foreground">Cards adapt to dark mode automatically.</p>
+            </div>
+            <div className="bg-card text-card-foreground p-6 rounded-lg border border-border">
+              <h3 className="text-lg font-semibold mb-2">Third Card</h3>
+              <p className="text-muted-foreground">All using the same semantic tokens.</p>
+            </div>
+          </div>
+        </section>
+        {/* Typography */}
+        <section>
+          <h2 className="text-2xl font-bold mb-6">Typography</h2>
+          <div className="space-y-4">
+            <h1 className="text-4xl font-bold">Heading 1</h1>
+            <h2 className="text-3xl font-bold">Heading 2</h2>
+            <h3 className="text-2xl font-bold">Heading 3</h3>
+            <p className="text-base">This is regular body text using the foreground color.</p>
+            <p className="text-muted-foreground">This is muted text for secondary information.</p>
+            <p className="text-sm text-muted-foreground">Small text for captions and helper text.</p>
+          </div>
+        </section>
+        {/* Accessibility Features */}
+        <section>
+          <h2 className="text-2xl font-bold mb-6">Accessibility Features</h2>
+          <div className="space-y-4">
+            <div className="bg-muted p-4 rounded-lg">
+              <h3 className="font-semibold mb-2">✅ Focus Rings</h3>
+              <p className="text-sm text-muted-foreground mb-2">Tab through these buttons to see accessible focus rings:</p>
+              <div className="flex gap-2">
+                <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg">Button 1</button>
+                <button className="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg">Button 2</button>
+                <button className="px-4 py-2 bg-accent text-accent-foreground rounded-lg">Button 3</button>
+              </div>
+            </div>
+            <div className="bg-muted p-4 rounded-lg">
+              <h3 className="font-semibold mb-2">✅ Minimum Tap Targets</h3>
+              <p className="text-sm text-muted-foreground">All interactive elements have minimum 44x44px tap targets (WCAG AAA).</p>
+            </div>
+            <div className="bg-muted p-4 rounded-lg">
+              <h3 className="font-semibold mb-2">✅ Reduced Motion Support</h3>
+              <p className="text-sm text-muted-foreground">Animations respect prefers-reduced-motion preferences.</p>
+            </div>
+            <div className="bg-muted p-4 rounded-lg">
+              <h3 className="font-semibold mb-2">✅ Smooth Scrolling</h3>
+              <p className="text-sm text-muted-foreground">Smooth scrolling enabled (respects reduced motion).</p>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}
+function ColorCard({ name, className }: { name: string; className: string }) {
+  return (
+    <div className={`p-6 rounded-lg ${className}`}>
+      <div className="font-semibold">{name}</div>
+      <div className="text-sm opacity-75 mt-1">Semantic token</div>
+    </div>
+  )
+}
+function AnimationDemo({ name, className }: { name: string; className: string }) {
+  const [key, setKey] = useState(0)
+  return (
+    <div className="bg-muted p-4 rounded-lg">
+      <div key={key} className={`bg-primary text-primary-foreground p-4 rounded-md mb-2 ${className}`}>
+        {name}
+      </div>
+      <button onClick={() => setKey((k) => k + 1)} className="text-sm px-3 py-1 bg-secondary text-secondary-foreground rounded hover:bg-secondary/80 transition-colors">
+        Replay
+      </button>
+    </div>
+  )
+}

package/templates/src/.gitkeep ADDED Viewed

File without changes

package/templates/src/modules/design-system/README.md ADDED Viewed

@@ -0,0 +1,318 @@
+# Launch77 Design System
+Token-driven design system providing a consistent theming foundation for your application.
+## Features
+- 🎨 **Semantic Design Tokens** - HSL-format CSS custom properties
+- 🌗 **Dark Mode** - Complete dark mode support via `.dark` class
+- ⚡ **Tailwind Integration** - Preset with all theme colors and utilities
+- ♿ **Accessibility** - Focus rings, reduced motion, minimum tap targets
+- 🎬 **Animations** - 8 built-in keyframe animations
+- 🎯 **Brand Customization** - Simple CSS override system
+- 🔧 **shadcn Compatible** - Follows shadcn/ui token architecture
+## Quick Start
+The plugin has already configured your app with:
+1. ✅ Tailwind preset in `tailwind.config.ts`
+2. ✅ Token imports in `app/globals.css`
+3. ✅ Brand customization file at `src/modules/design-system/config/brand.css`
+You're ready to start using the design system immediately!
+## Testing
+Visit the test page to see all design tokens in action:
+```bash
+npm run dev
+# Navigate to http://localhost:3000/design-system-test
+```
+The test page demonstrates:
+- All semantic color tokens
+- Alpha channel support
+- Button variants
+- Form elements
+- Cards
+- Typography
+- Animations
+- Accessibility features
+- Dark mode toggle
+## Customizing Your Brand
+Edit `src/modules/design-system/config/brand.css` to override colors:
+```css
+:root {
+  /* Your brand's primary color */
+  --color-primary: 158 64% 52%;
+  --color-primary-foreground: 0 0% 100%;
+  /* Your brand's accent color */
+  --color-accent: 156 72% 72%;
+}
+.dark {
+  /* Dark mode overrides */
+  --color-primary: 158 64% 52%;
+}
+```
+### HSL Color Format
+Colors use HSL format: `Hue Saturation% Lightness%`
+- **Hue**: 0-360 (color wheel position)
+- **Saturation**: 0-100% (color intensity)
+- **Lightness**: 0-100% (brightness)
+Benefits:
+- Alpha channel support: `bg-primary/20` for 20% opacity
+- Easy to adjust (change lightness for variations)
+- Compatible with color pickers
+### Finding HSL Values
+Use any color picker tool:
+- https://hslpicker.com
+- Browser DevTools color picker
+- Design tools (Figma, Sketch, etc.)
+## Available Tokens
+### Color Tokens
+```css
+--color-background       /* Main app background */
+--color-foreground       /* Main text color */
+--color-primary          /* Brand color */
+--color-primary-foreground
+--color-secondary        /* Secondary actions */
+--color-secondary-foreground
+--color-accent           /* Accent/highlight color */
+--color-accent-foreground
+--color-muted            /* Subtle backgrounds */
+--color-muted-foreground
+--color-destructive      /* Errors/destructive actions */
+--color-destructive-foreground
+--color-card             /* Card backgrounds */
+--color-card-foreground
+--color-border           /* Border color */
+--color-input            /* Input border color */
+--color-ring             /* Focus ring color */
+```
+### Border Radius
+```css
+--radius: 1rem /* Base radius (16px) */;
+```
+Tailwind utilities:
+- `rounded-lg` → `var(--radius)`
+- `rounded-md` → `calc(var(--radius) - 2px)`
+- `rounded-sm` → `calc(var(--radius) - 4px)`
+## Usage Examples
+### Buttons
+```tsx
+<button className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg px-4 py-2">
+  Primary Action
+</button>
+<button className="bg-secondary text-secondary-foreground hover:bg-secondary/80 rounded-lg px-4 py-2">
+  Secondary Action
+</button>
+```
+### Cards
+```tsx
+<div className="bg-card text-card-foreground border border-border rounded-lg p-6">
+  <h2 className="text-xl font-bold mb-2">Card Title</h2>
+  <p className="text-muted-foreground">Card description text</p>
+</div>
+```
+### Form Inputs
+```tsx
+<input type="text" className="w-full px-3 py-2 rounded-md border border-input bg-background focus-visible:ring-2 focus-visible:ring-ring" placeholder="Enter text..." />
+```
+### Alpha Channel
+```tsx
+{/* Light backgrounds */}
+<div className="bg-primary/10 text-primary">10% opacity</div>
+<div className="bg-primary/20 text-primary">20% opacity</div>
+{/* Hover effects */}
+<button className="bg-primary/90 hover:bg-primary">
+  Hover me
+</button>
+```
+## Dark Mode
+Toggle dark mode by adding/removing `.dark` class on `<html>`:
+```tsx
+'use client'
+export function DarkModeToggle() {
+  const toggleDark = () => {
+    document.documentElement.classList.toggle('dark')
+  }
+  return <button onClick={toggleDark}>Toggle Dark Mode</button>
+}
+```
+### Persisting User Preference
+```tsx
+// Save to localStorage
+const toggleDark = () => {
+  const isDark = document.documentElement.classList.toggle('dark')
+  localStorage.setItem('theme', isDark ? 'dark' : 'light')
+}
+// Restore on mount
+useEffect(() => {
+  const theme = localStorage.getItem('theme')
+  if (theme === 'dark') {
+    document.documentElement.classList.add('dark')
+  }
+}, [])
+```
+## Animations
+Use built-in animation utilities:
+```tsx
+{/* Fade animations */}
+<div className="animate-fade-in">Fades in</div>
+<div className="animate-fade-out">Fades out</div>
+{/* Slide animations */}
+<div className="animate-slide-in-from-top">Slides from top</div>
+<div className="animate-slide-in-from-bottom">Slides from bottom</div>
+<div className="animate-slide-in-from-left">Slides from left</div>
+<div className="animate-slide-in-from-right">Slides from right</div>
+{/* Accordion animations (for Radix UI) */}
+<div className="animate-accordion-down">Expands</div>
+<div className="animate-accordion-up">Collapses</div>
+```
+Animations automatically respect `prefers-reduced-motion` preferences.
+## shadcn/ui Integration
+This design system follows shadcn/ui's token architecture. To add shadcn components:
+```bash
+npx shadcn@latest init
+npx shadcn@latest add button
+npx shadcn@latest add card
+```
+Components will automatically use your theme tokens!
+## Troubleshooting
+### Colors Not Applying
+**Issue:** Semantic utilities like `bg-primary` don't work.
+**Solution:**
+1. Verify tokens are imported in `app/globals.css`
+2. Check Tailwind preset is in `tailwind.config.ts`
+3. Restart dev server after changes
+### Dark Mode Not Working
+**Issue:** Colors don't change in dark mode.
+**Solution:**
+1. Ensure `.dark` class is on `<html>` element (not `<body>`)
+2. Check browser DevTools to verify class is applied
+3. Verify dark mode tokens exist in `tokens.css`
+### Brand Colors Not Showing
+**Issue:** Custom colors in `brand.css` aren't visible.
+**Solution:**
+1. Check import order in `app/globals.css`:
+   - Tokens must be imported first
+   - Brand CSS must come after
+2. Verify HSL format: `158 64% 52%` (no `hsl()` wrapper)
+3. Clear browser cache and rebuild
+### Build Errors
+**Issue:** Build fails with module not found.
+**Solution:**
+1. Run `npm install` at workspace root
+2. Verify `@launch77-shared/lib-design-system` in package.json
+3. Restart dev server
+## Best Practices
+### Do's ✅
+- Use semantic utilities (`bg-primary`, `text-foreground`)
+- Use alpha channel for transparency (`bg-primary/20`)
+- Keep components neutral (no hardcoded colors)
+- Override tokens in `brand.css` only
+### Don'ts ❌
+- Don't hardcode colors in components
+- Don't use `!important` for overrides
+- Don't modify node_modules
+- Don't skip the design system tokens
+## Next Steps
+1. **Customize Your Brand** - Edit `brand.css` with your colors
+2. **Test Thoroughly** - Visit `/design-system-test` and test all features
+3. **Build Components** - Create reusable components with semantic tokens
+4. **Add shadcn Components** - Integrate shadcn/ui for pre-built components
+5. **Set Up Dark Mode** - Implement dark mode toggle with persistence
+## Resources
+- **Library Documentation**: Check node_modules/@launch77-shared/lib-design-system
+- **shadcn/ui**: https://ui.shadcn.com
+- **HSL Color Picker**: https://hslpicker.com
+- **Tailwind CSS**: https://tailwindcss.com
+---
+Need help? Check the design system library README or ask in the Launch77 community.

package/templates/src/modules/design-system/config/brand.css ADDED Viewed

@@ -0,0 +1,23 @@
+/* Brand Colors */
+/* Customize your theme by overriding CSS variables */
+:root {
+  /* Example: Customize primary color */
+  /* --color-primary: 158 64% 52%; */
+  /* --color-primary-foreground: 0 0% 100%; */
+  /* Example: Customize accent color */
+  /* --color-accent: 25 95% 53%; */
+  /* --color-accent-foreground: 0 0% 100%; */
+  /* Example: Customize secondary color */
+  /* --color-secondary: 270 50% 40%; */
+  /* --color-secondary-foreground: 0 0% 100%; */
+}
+/* Dark mode overrides */
+.dark {
+  /* Example: Customize colors for dark mode */
+  /* --color-primary: 158 64% 52%; */
+  /* --color-primary-foreground: 240 5.9% 10%; */
+}