robs-theme-implementation

## Overview Rob's Style Guide is a dark purple design system with pink/purple/cyan accents, dual-mode (dark/light) support, and a consistent visual language. Vanilla HTML is the source of truth. ### Quick Start The fastest way to adopt the theme is to copy the complete [vanilla `theme.css`](https://tedivm.github.io/robs-style-guide/vanilla/theme.css) into your project and reference it from your HTML. It contains all variables, typography, components, and layout utilities in a single file. Use the rest of this skill for customization, framework adaptation, or deeper understanding. --- ## Color Tokens ### Global (same in both modes) | Name | Hex | Usage | | ------------------ | --------- | ----------------------------------- | | Primary (pink) | `#de38a8` | h1, primary buttons, gradient start | | Secondary (purple) | `#b96dff` | h2, links, secondary buttons | | Accent (cyan) | `#01cdfe` | h3, accent elements | | Success (green) | `#50c878` | Success states, online | | Warning (amber) | `#ffbe32` | Warning states, degraded | | Error (red) | `#ff5050` | Error states, destructive | ### Mode-dependent | Layer | Dark | Light | | --------------- | --------- | --------- | | Background | `#1a1025` | `#fef5f7` | | Surface / Cards | `#2d1b4e` | `#fce4ec` | | Code / Inputs | `#0f0a1a` | `#fce4ec` | | Borders | `#3d2b5a` | `#e4b8c8` | | Body text | `#dcdcdc` | `#2a1525` | | Muted text | `#b4b4b4` | `#8a6578` | | Dim text | `#999` | `#a88a9a` | | Code text | `#e0e0e0` | `#4c1161` | | Surface text | `#dcdcdc` | `#2a1525` | ### Derived (transparency variants) These are `color-mix` expressions that compute at runtime from the base color tokens. The resolved hex values are shown for reference. | Variable | Resolved | Usage | | ---------------------------------------------------- | --------------------------- | -------------------------------- | | `--primary-15` | `rgba(222, 56, 168, 0.15)` | Button/badge backgrounds | | `--primary-30` | `rgba(222, 56, 168, 0.30)` | Button hover states | | `--secondary-15` | `rgba(185, 109, 255, 0.15)` | Button/badge backgrounds | | `--secondary-30` | `rgba(185, 109, 255, 0.30)` | Button hover states | | `--accent-15` | `rgba(1, 205, 254, 0.15)` | Button/badge backgrounds | | `--accent-30` | `rgba(1, 205, 254, 0.30)` | Button hover states | | `--success-15` | `rgba(80, 200, 120, 0.15)` | Success button/badge backgrounds | | `--success-30` | `rgba(80, 200, 120, 0.30)` | Success hover states | | `--warning-15` | `rgba(255, 190, 50, 0.15)` | Warning button/badge backgrounds | | `--warning-30` | `rgba(255, 190, 50, 0.30)` | Warning hover states | | `--error-15` (vanilla) / `--destructive-15` (Svelte) | `rgba(255, 80, 80, 0.15)` | Error/destructive backgrounds | | `--error-30` (vanilla) / `--destructive-30` (Svelte) | `rgba(255, 80, 80, 0.30)` | Error/destructive hover | ### Utility | Variable | Value | Usage | | -------------------- | ------------------------- | ---------------------------- | | `--sun-glow` | `#ffe033` | Sun icon in dark mode | | `--sun-glow-70` | `rgba(255, 224, 51, 0.7)` | Sun icon glow (outer) | | `--sun-glow-40` | `rgba(255, 224, 51, 0.4)` | Sun icon glow (inner) | | `--text-on-gradient` | `#ffffff` | Text on gradient backgrounds | ### Gradient Variables | Variable | Direction | Colors | Used on | | --------------------- | --------- | -------------------- | ------------------------------------------------- | | `--gradient` | 90deg → | Pink → Purple → Cyan | h2 underline, hr, btn/badge gradient, progress | | `--gradient-reverse` | 90deg → | Cyan → Purple → Pink | hr.reverse, gradient border-box, progress reverse | | `--gradient-vertical` | 180deg ↓ | Pink → Purple → Cyan | blockquote::before | --- ## CSS Variables ### `:root` (dark mode — default) ```css :root { --bg: #1a1025; --fg: #dcdcdc; --surface: #2d1b4e; --surface-fg: #dcdcdc; --code: #0f0a1a; --code-fg: #e0e0e0; --border: #3d2b5a; --primary: #de38a8; --secondary: #b96dff; --accent: #01cdfe; --muted: #b4b4b4; --dim: #999; --success: #50c878; --warning: #ffbe32; --error: #ff5050; --gradient: linear-gradient( 90deg, var(--primary), var(--secondary), var(--accent) ); --gradient-reverse: linear-gradient( 90deg, var(--accent), var(--secondary), var(--primary) ); --gradient-vertical: linear-gradient( 180deg, var(--primary), var(--secondary), var(--accent) ); --primary-15: color-mix(in srgb, var(--primary) 15%, transparent); --primary-30: color-mix(in srgb, var(--primary) 30%, transparent); --secondary-15: color-mix(in srgb, var(--secondary) 15%, transparent); --secondary-30: color-mix(in srgb, var(--secondary) 30%, transparent); --accent-15: color-mix(in srgb, var(--accent) 15%, transparent); --accent-30: color-mix(in srgb, var(--accent) 30%, transparent); --error-15: color-mix(in srgb, var(--error) 15%, transparent); --error-30: color-mix(in srgb, var(--error) 30%, transparent); --success-15: color-mix(in srgb, var(--success) 15%, transparent); --success-30: color-mix(in srgb, var(--success) 30%, transparent); --warning-15: color-mix(in srgb, var(--warning) 15%, transparent); --warning-30: color-mix(in srgb, var(--warning) 30%, transparent); --sun-glow: #ffe033; --sun-glow-70: rgba(255, 224, 51, 0.7); --sun-glow-40: rgba(255, 224, 51, 0.4); --text-on-gradient: #ffffff; } ``` ### `.light` (light mode override) Global colors and gradient variables carry through automatically — they reference color tokens that change in `.light`. ```css .light { --bg: #fef5f7; --fg: #2a1525; --surface: #fce4ec; --surface-fg: #2a1525; --code: #fce4ec; --code-fg: #4c1161; --border: #e4b8c8; --primary: #de38a8; --secondary: #b96dff; --accent: #01cdfe; --muted: #8a6578; --dim: #a88a9a; } ``` **Svelte naming** (shadcn-style `--background`, `--foreground`, `--card`, `--input`): used in `svelte/src/theme.css`. See [references/svelte-theme-css.md](references/svelte-theme-css.md). --- ## Typography ### Fonts | Role | Primary | Fallback | | --------- | -------------------------------- | ------------------------ | | Body | `Source Serif 4` (400, 600, 700) | `Roboto Slab` (400, 700) | | Monospace | `Source Code Pro` (400, 700) | `Roboto Mono` (400, 700) | **Preferred:** Download the font files and serve them locally using `@font-face`. This avoids external dependencies, improves load times, and works offline. **CDN alternative** (acceptable for quick prototypes or when self-hosting isn't practical): ```html <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Roboto+Slab:wght@400;700&family=Source+Code+Pro:wght@400;700&family=Source+Serif+4:wght@400;600;700&display=swap" rel="stylesheet" /> ``` ### Body and Headings ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Source Serif 4", "Roboto Slab", serif; max-width: 900px; margin: 0 auto; padding: 2rem; background: var(--bg); color: var(--fg); line-height: 1.6; transition: background 0.2s, color 0.2s; } h1 { font-size: 1.8rem; margin: 2rem 0 0.75rem; color: var(--primary); text-shadow: 0 0 20px color-mix(in srgb, var(--primary) 60%, transparent), 0 0 40px color-mix(in srgb, var(--primary) 35%, transparent), 0 0 60px color-mix(in srgb, var(--primary) 20%, transparent); } h2 {