docs: add terminal theme redesign spec (Dracula purple focus)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 04:46:30 -06:00
parent 27e3722668
commit fa2c943817
1 changed files with 150 additions and 0 deletions
--- a/docs/superpowers/specs/2026-05-18-terminal-theme-design.md
+++ 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