diff --git a/docs/superpowers/specs/2026-05-18-terminal-theme-design.md b/docs/superpowers/specs/2026-05-18-terminal-theme-design.md new file mode 100644 index 0000000..ee8f926 --- /dev/null +++ b/docs/superpowers/specs/2026-05-18-terminal-theme-design.md @@ -0,0 +1,150 @@ +# Terminal Theme Redesign — Design Spec + +**Date:** 2026-05-18 +**Status:** Approved + +## Summary + +Redesign the existing Terminal design theme from a sparse green-on-black aesthetic into a polished **Dracula-palette, soft-modern** style. The theme keeps its forced-dark, monospace character while gaining a richer color story, rounded cards, and a more refined hover system. + +## Design Direction + +**Palette:** Dracula +**Card style:** Soft modern — rounded corners, surface color fill, subtle shadow +**Background:** Dot matrix — `#282a36` base with 20px radial dot grid +**Accent strategy:** Purple Focus — single primary accent `#bd93f9`, pink `#ff79c6` used only in the title gradient + +## Color Tokens + +| Token | Value | Usage | +|---|---|---| +| Background | `#282a36` | Page base | +| Surface | `#313244` | Card background | +| Surface-alt | `#383a4a` | Pin card background | +| Border | `#44475a` | Card/control border | +| Accent (purple) | `#bd93f9` | Primary accent — borders on hover, h2 on hover, controls on hover, title start | +| Pink | `#ff79c6` | Title gradient end only | +| Foreground | `#f8f8f2` | Body text, card h2 | +| Muted | `#6272a4` | Card p, beian, description | +| Hover fg | `#cdd6f4` | Card p on hover | + +CSS variables to set on `html[data-design-theme="terminal"]`: + +```css +--accent: #bd93f9; +--accent-rgb: 189, 147, 249; +--accent-2: #ff79c6; +--accent-3: #8be9fd; +--accent-secondary-rgb: 255, 121, 198; +--page-gradient: #282a36; +--page-texture: radial-gradient(circle, rgba(98,114,164,0.55) 1px, transparent 1px); +--title-gradient: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%); +--control-bg: rgba(40, 42, 54, 0.92); +--control-border: #44475a; +--control-inset: transparent; +--control-fg: #f8f8f2; +``` + +The `--page-texture` background-size must be set to `20px 20px` on the `body::before` element for terminal theme. + +## Components + +### Background + +`body` uses `--page-gradient` (`#282a36`) as a flat color. +`body::before` applies the dot matrix texture via `--page-texture` at `background-size: 20px 20px`. +No `backdrop-filter` anywhere in the terminal theme. + +### Title + +- Gradient text: `linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%)` via `-webkit-background-clip: text` +- Uppercase, `letter-spacing: 0.04em` +- Blinking `█` cursor via `::after` (`\2588`, unchanged), color `#bd93f9` +- Remove the current `text-shadow` (conflicts with gradient text) + +### Cards + +| Property | Value | +|---|---| +| `background` | `#313244` | +| `border` | `1px solid #44475a` | +| `border-radius` | `10px` | +| `box-shadow` | `0 4px 16px rgba(0,0,0,0.45)` | +| `backdrop-filter` | `none` | +| `transform` | none (no translateY at rest) | + +**Pin card:** `background: #383a4a` + +**Hover / focus:** +- `border-color: #bd93f9` +- `box-shadow: 0 0 0 1px rgba(189,147,249,0.25), 0 8px 28px rgba(189,147,249,0.15), 0 4px 12px rgba(0,0,0,0.5)` +- `transform: translateY(-2px)` +- `h2 color: #bd93f9` +- `p color: #cdd6f4` + +**Card `::before`:** `display: none` (no gradient border overlay) + +**Card h2:** `#f8f8f2` at rest +**Card p:** `#6272a4` at rest + +### Controls (theme button + toggle) + +| Property | Value | +|---|---| +| `background` | `rgba(40, 42, 54, 0.92)` | +| `border` | `1px solid #44475a` | +| `border-radius` | `8px` | +| `color` | `#f8f8f2` | +| `box-shadow` | `none` | +| `backdrop-filter` | `none` | + +**Hover:** +- `border-color: #bd93f9` +- `color: #bd93f9` +- `background: rgba(189, 147, 249, 0.08)` +- No `transform` + +**Dark toggle:** remains `cursor: not-allowed` and visually disabled (terminal forces dark). + +### Dropdown list + +| Property | Value | +|---|---| +| `background` | `rgba(40, 42, 54, 0.96)` | +| `border` | `1px solid #44475a` | +| `border-radius` | `10px` | +| `box-shadow` | `none` | + +**Options hover / selected:** `background: rgba(189, 147, 249, 0.15)`, `color: #bd93f9` +**Options:** keep `text-transform: uppercase` (terminal feel) + +### Beian + +- Rest: `#6272a4` +- Hover: `#bd93f9` (remove current invert-to-black-bg behavior) + +### Body text + +- `color: #f8f8f2` +- Font chain unchanged: `ui-monospace, "JetBrains Mono", "Fira Code", "VT323", Menlo, Consolas, "Liberation Mono", monospace` + +## What Changes vs Current + +| Element | Before | After | +|---|---|---| +| Accent color | `#33ff00` green | `#bd93f9` purple | +| Background | `#0a0a0a` | `#282a36` | +| Texture | Horizontal scanlines | Dot matrix 20px | +| Card bg | Transparent | `#313244` surface fill | +| Card corners | `border-radius: 0` | `border-radius: 10px` | +| Card hover | Green tint bg | Purple glow + lift | +| Title | Green text-shadow | Purple→pink gradient | +| Button hover | Full green bg invert | Subtle purple tint | +| Dropdown options | Uppercase, green invert | Uppercase, purple highlight | + +## Out of Scope + +- No changes to any other theme (Fluent, Material You, Nord, Cyberpunk, Animal Crossing, Minecraft) +- No new animations beyond the existing cursor blink +- No changes to `FORCED_DARK_DESIGN_THEMES` logic — terminal still forces dark +- No font changes