aboudjem/ui-ux-suite/design-tokens

/design-tokens: Generate Design Token System

Generate a complete design token system for the project.

Usage

/design-tokens                    # Auto-detect brand color, generate full system
/design-tokens #3b82f6            # Generate from specific brand color
/design-tokens --format tailwind  # Output as Tailwind config
/design-tokens --format css-vars  # Output as CSS custom properties
/design-tokens --format json      # Output as JSON tokens

Flow

1. Read existing tokens/theme (if any)
2. Determine brand color (from existing or user input)
3. Generate complete token system with uiux_generate_tokens:

• Color: primary, secondary, neutral (11 steps), semantic (success/error/warning/info), surfaces (light + dark)
• Typography: font, scale (8 steps), line heights, weights
• Spacing: 4px base scale (16 steps)
• Border radius: 4 steps (sm, md, lg, full)
• Shadows: 3 levels (sm, md, lg)
• Motion: duration + easing tokens

1. Output in requested format

Output Formats

• css-vars: :root { --color-primary: ...; } with dark mode media query
• tailwind: tailwind.config.js theme extension
• json: W3C Design Tokens Community Group format
• js: JavaScript module export