@launch77-shared/lib-design-system

Token-driven design system providing a theming foundation for Launch77 applications. Built for seamless integration with shadcn/ui component libraries.

Installation

Recommended: Install via Launch77 plugin (handles all configuration automatically):

launch77 plugin:install design-system

Manual installation (not recommended):

npm install @launch77-shared/lib-design-system

Note: Manual installation requires configuring Tailwind preset and CSS imports yourself. The plugin automates this setup.

Features

• 🎨 Semantic Token System - CSS custom properties in HSL format with alpha channel support
• 🌗 Dark Mode - Complete dark mode support via .dark class
• ⚡ Tailwind Preset - Ready-to-use Tailwind configuration with theme extensions
• ♿ Accessibility First - Auto-injected base styles with focus rings and reduced motion support
• 🎬 Animations - 8 built-in keyframe animations (accordion, fade, slide)
• 🎯 Brand Customization - Simple CSS cascade for per-app theming
• 🔧 shadcn Compatible - Follows shadcn/ui token architecture

What's Included

Semantic Color Tokens

/* Available in light and dark modes */
--color-background / --color-foreground
--color-primary / --color-primary-foreground
--color-secondary / --color-secondary-foreground
--color-accent / --color-accent-foreground
--color-muted / --color-muted-foreground
--color-destructive / --color-destructive-foreground
--color-card / --color-card-foreground
--color-border
--color-input
--color-ring

Tailwind Utilities

All semantic colors available as Tailwind utilities with alpha channel support:

<div className="bg-primary/20 text-foreground border-input" />

Animations

8 pre-built animations: fade-in/out, slide-in (4 directions), accordion-up/down.

All animations automatically respect prefers-reduced-motion preferences.

Documentation

• Complete Documentation - Comprehensive guide with:

  • Design system concepts and philosophy
  • How to build components with tokens
  • Token system reference
  • Architecture overview
  • Dark mode implementation details
  • TypeScript API reference

• Plugin README - For installation and usage instructions:

  • Quick start guide
  • Usage examples (buttons, cards, forms)
  • Brand customization
  • Troubleshooting

Quick Reference

Using with Tailwind (if manually installed)

// tailwind.config.js
const preset = require('@launch77-shared/lib-design-system/preset')

module.exports = {
  presets: [preset],
  content: ['./src/**/*.{ts,tsx}'],
}

Importing Tokens (if manually installed)

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@import '@launch77-shared/lib-design-system/tokens.css';

HSL Color Format

Colors use HSL format for flexibility:

--color-primary: 222 47% 11%; /* Hue Saturation% Lightness% */

Benefits: Alpha channel support (bg-primary/20), easy to adjust, color picker compatible.

TypeScript Support

Full TypeScript definitions included for Tailwind configuration.

License

UNLICENSED - Internal Launch77 use only.