ui-theming

What this skill does

# UI Theming Skill

Initialize the design system. This skill should be run **ONCE** at project start to set up:
- Color theme selection
- Design token generation
- Typography system
- SCSS structure

## Usage

```
/ui-theming
```

## Workflow

### Step 0: Check Existing Design System

Before creating files, check if a design system already exists:

```bash
ls frontend/src/styles/tokens/ 2>/dev/null
```

**If directory exists with files, show:**

```
⚠️ Design System bereits vorhanden!

Gefundene Dateien:
- _colors.scss
- _typography.scss
- [weitere Dateien...]

Optionen:
1. Abbrechen (bestehende Dateien behalten)
2. Überschreiben (Theme neu generieren)
3. Nur Theme-Preview generieren (keine Änderungen)

Wie möchten Sie fortfahren?
```

- **Option 1:** Exit skill, no changes
- **Option 2:** Continue with Step 1 (files will be overwritten)
- **Option 3:** Skip to Step 7 (Theme-Auswahl + Preview generieren, keine SCSS-Änderungen)

**If directory does not exist:** Continue with Step 1.

---

### Step 1: Theme Selection

Present the available themes:

```
Available Themes:

1. Ocean Depths     - Professional maritime (Blue/Teal)
2. Sunset Boulevard - Warm vibrant (Orange/Pink)
3. Forest Canopy    - Natural earth tones (Green/Brown)
4. Modern Minimalist - Clean grayscale (Gray/Black)
5. Golden Hour      - Rich autumnal (Gold/Orange)
6. Arctic Frost     - Cool crisp winter (Light Blue/White)
7. Desert Rose      - Soft sophisticated (Pink/Beige)
8. Tech Innovation  - Bold modern tech (Blue/Purple) [RECOMMENDED]
9. Botanical Garden - Fresh organic (Green/Cream)
10. Midnight Galaxy - Dramatic cosmic (Dark Purple/Blue)

Which theme would you like for your project?
```

### Step 2: Read Selected Theme

After user selects a theme, read the theme file:

```
Read: ${CLAUDE_PLUGIN_ROOT}/skills/ui-theming/themes/[selected-theme].md
```

Extract:
- Primary color
- Secondary color
- Font family
- Font weights

### Step 3: Farbvarianten berechnen

Aus den Theme-Farben (Primary + Accent) die Light/Dark-Varianten ableiten.

**Algorithmus (HSL-Farbraum):**

| Variante | Berechnung |
|----------|-----------|
| `primary-light` | Lightness +20%, Saturation -10% |
| `primary-dark` | Lightness -20%, Saturation +5% |
| `accent-light` | Lightness +20%, Saturation -10% |
| `accent-dark` | Lightness -20%, Saturation +5% |

**Beispiel:** Primary `#0066ff` (HSL: 216°, 100%, 50%)
→ Light: HSL(216°, 90%, 70%) = `#5c9aff`
→ Dark: HSL(216°, 100%, 30%) = `#003d99`

**Contrast-Farbe:** Weiß (`#ffffff`) wenn Lightness < 50%, sonst Schwarz (`#000000`).

**Dark-Mode Semantic Colors** (fest definiert):

| Token | Light Mode | Dark Mode |
|-------|-----------|-----------|
| success | `#4caf50` | `#81c784` |
| warning | `#ff9800` | `#ffb74d` |
| error | `#f44336` | `#e57373` |
| info | `#2196f3` | `#64b5f6` |

### Step 4: Create Token Files

Create the following modular structure in `frontend/src/styles/tokens/`:

```
frontend/src/styles/
├── tokens/
│   ├── _colors.scss        # Color palette + light/dark mode
│   ├── _typography.scss    # Font system as CSS Custom Properties
│   ├── _spacing.scss       # 8pt grid + semantic aliases
│   ├── _elevation.scss     # Material elevation shadows
│   ├── _breakpoints.scss   # Responsive breakpoints + mixins
│   └── _index.scss         # Central export (@forward + theme mixins)
└── styles.scss             # Root file (@use tokens)
```

#### tokens/_colors.scss
```scss
// Color System - CSS Custom Properties
// Generated by /ui-theming
// Theme: [Selected Theme]

@mixin colors-light {
  // Brand Colors (from selected theme)
  --color-primary: [primary-hex];
  --color-primary-light: [primary-light-hex];
  --color-primary-dark: [primary-dark-hex];
  --color-primary-contrast: #ffffff;

  --color-accent: [accent-hex];
  --color-accent-light: [accent-light-hex];
  --color-accent-dark: [accent-dark-hex];
  --color-accent-contrast: #ffffff;

  // Semantic Colors
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-error: #f44336;
  --color-info: #2196f3;

  // Neutral Palette
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;

  // Surface & Background
  --color-background: #fafafa;
  --color-surface: #ffffff;
  --color-surface-variant: #f5f5f5;

  // Text
  --color-text-primary: rgba(0, 0, 0, 0.87);
  --color-text-secondary: rgba(0, 0, 0, 0.6);
  --color-text-disabled: rgba(0, 0, 0, 0.38);
  --color-text-on-primary: #ffffff;

  // Borders
  --color-divider: rgba(0, 0, 0, 0.12);
  --color-border: rgba(0, 0, 0, 0.23);
}

@mixin colors-dark {
  --color-primary: [primary-light-hex];
  --color-primary-light: [primary-hex];
  --color-primary-dark: [primary-dark-hex];
  --color-primary-contrast: #000000;

  --color-accent: [accent-light-hex];
  --color-accent-contrast: #000000;

  --color-success: #81c784;
  --color-warning: #ffb74d;
  --color-error: #e57373;
  --color-info: #64b5f6;

  --color-gray-50: #212121;
  --color-gray-100: #303030;
  --color-gray-200: #424242;
  --color-gray-300: #616161;
  --color-gray-400: #757575;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #bdbdbd;
  --color-gray-700: #e0e0e0;
  --color-gray-800: #eeeeee;
  --color-gray-900: #fafafa;

  --color-background: #121212;
  --color-surface: #1e1e1e;
  --color-surface-variant: #2c2c2c;

  --color-text-primary: rgba(255, 255, 255, 0.87);
  --color-text-secondary: rgba(255, 255, 255, 0.6);
  --color-text-disabled: rgba(255, 255, 255, 0.38);
  --color-text-on-primary: #000000;

  --color-divider: rgba(255, 255, 255, 0.12);
  --color-border: rgba(255, 255, 255, 0.23);
}
```

#### tokens/_typography.scss
```scss
// Typography System - CSS Custom Properties
// Generated by /ui-theming

@mixin typography {
  // Font Families (from selected theme)
  --font-family-base: '[theme-font]', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'Roboto Mono', 'Consolas', monospace;

  // Font Sizes (Modular Scale 1.25)
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  // Font Weights
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  // Line Heights
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

  // Letter Spacing
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  // Semantic Typography Tokens
  --font-heading-1: var(--font-weight-light) var(--font-size-5xl) / var(--line-height-tight) var(--font-family-base);
  --font-heading-2: var(--font-weight-light) var(--font-size-4xl) / var(--line-height-tight) var(--font-family-base);
  --font-heading-3: var(--font-weight-regular) var(--font-size-3xl) / var(--line-height-tight) var(--font-family-base);
  --font-heading-4: var(--font-weight-regular) var(--font-size-2xl) / var(--line-height-base) var(--font-family-base);
  --font-heading-5: var(--font-weight-medium) var(--font-size-xl) / var(--line-height-base) var(--font-family-base);
  --font-heading-6: var(--font-weight-medium) var(--font-size-lg) / var(--line-height-base) var(--font-family-base);
  --font-body-1: var(--font-weight-regular) var(--font-size-base) / var(--line-height-base) var(--font-family-base);
  --font-body-2: var(--font-weight-regular) var(--font-size-sm) / var(--line-height-base) var(--font-family-base);
  --font-caption: var(--font-weight-regular) var(--font-size-xs) / var(--line-height-base) var(--font-family-base);
}
```

#### tokens/_spacing.scss
```scss
// Spacing System - 8pt Grid
// Generated by /ui-theming

@mixin spacing {
  // Base Scale
  --spacing-0: 0;