From 783359af982b03f4bf3889bfe92f56d8c90704af Mon Sep 17 00:00:00 2001 From: yuetsh <517252939@qq.com> Date: Mon, 18 May 2026 04:50:06 -0600 Subject: [PATCH] docs: add terminal theme redesign implementation plan Co-Authored-By: Claude Sonnet 4.6 --- .../2026-05-18-terminal-theme-redesign.md | 527 ++++++++++++++++++ 1 file changed, 527 insertions(+) create mode 100644 docs/superpowers/plans/2026-05-18-terminal-theme-redesign.md diff --git a/docs/superpowers/plans/2026-05-18-terminal-theme-redesign.md b/docs/superpowers/plans/2026-05-18-terminal-theme-redesign.md new file mode 100644 index 0000000..18c0e00 --- /dev/null +++ b/docs/superpowers/plans/2026-05-18-terminal-theme-redesign.md @@ -0,0 +1,527 @@ +# Terminal Theme Redesign Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Replace the green-on-black terminal theme with a Dracula-palette soft-modern style (purple accent, rounded cards, dot-matrix background). + +**Architecture:** All changes are in `style.css` — update CSS variable overrides in the `html[data-design-theme="terminal"]` block, then update each component override section below it. No JS changes needed; the forced-dark logic and font chain stay unchanged. + +**Tech Stack:** Vanilla CSS, Vite. No test suite — verification is visual via `npm start`. + +**Spec:** `docs/superpowers/specs/2026-05-18-terminal-theme-design.md` + +--- + +## File Map + +| File | Action | What changes | +|---|---|---| +| `style.css` lines 51–80 | Modify | CSS variables block for terminal theme | +| `style.css` lines 702–814 | Modify | All terminal component overrides | + +--- + +### Task 1: Update CSS variable tokens + +**Files:** +- Modify: `style.css:51-80` + +- [ ] **Step 1: Replace the terminal theme variable block** + +Find this block (starts at line 51): +```css +html[data-design-theme="terminal"] { + color-scheme: dark; + + --accent: #33ff00; + --accent-rgb: 51, 255, 0; + --accent-2: #33ff00; + --accent-3: #33ff00; + --accent-secondary-rgb: 255, 176, 0; + + --page-gradient: #0a0a0a; + --page-texture: + repeating-linear-gradient( + to bottom, + rgba(var(--accent-rgb), 0.035) 0px, + rgba(var(--accent-rgb), 0.035) 1px, + transparent 2px, + transparent 4px + ), + radial-gradient( + circle at 50% 50%, + rgba(var(--accent-rgb), 0.05) 0%, + transparent 60% + ); + --title-gradient: none; + + --control-bg: rgba(10, 10, 10, 0.85); + --control-border: rgba(var(--accent-rgb), 0.35); + --control-inset: transparent; + --control-fg: var(--accent); +} +``` + +Replace it with: +```css +html[data-design-theme="terminal"] { + color-scheme: dark; + + --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; +} +``` + +- [ ] **Step 2: Start dev server and verify background color changed** + +```bash +npm start +``` + +Open the app, switch design theme to **Terminal**. The page background should now be dark blue-purple (`#282a36`) with a faint dot grid, not pure black. The dot grid may be hard to see at first — look closely at a light source on a dark background. + +--- + +### Task 2: Fix dot-matrix background size + body text + +**Files:** +- Modify: `style.css` — terminal `body` rule (~line 702) and add `body::before` size rule + +- [ ] **Step 1: Update the terminal body rule** + +Find: +```css +html[data-design-theme="terminal"] body { + font-family: + ui-monospace, "JetBrains Mono", "Fira Code", "VT323", Menlo, Consolas, + "Liberation Mono", monospace; + letter-spacing: 0.01em; + color: var(--accent); +} +``` + +Replace with: +```css +html[data-design-theme="terminal"] body { + font-family: + ui-monospace, "JetBrains Mono", "Fira Code", "VT323", Menlo, Consolas, + "Liberation Mono", monospace; + letter-spacing: 0.01em; + color: #f8f8f2; +} +``` + +- [ ] **Step 2: Add body::before background-size rule immediately after** + +After the `body` rule above, insert: +```css +html[data-design-theme="terminal"] body::before { + background-size: 20px 20px; +} +``` + +- [ ] **Step 3: Verify in browser** + +The dot matrix texture should now tile visibly at 20px intervals across the `#282a36` background. Body text should be `#f8f8f2` (off-white) instead of green. + +--- + +### Task 3: Update title styling + +**Files:** +- Modify: `style.css` — terminal `.title` and `.title::after` rules (~lines 761–775) + +- [ ] **Step 1: Update the title rule** + +Find: +```css +html[data-design-theme="terminal"] .title { + background: none; + -webkit-text-fill-color: currentColor; + color: var(--accent); + text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5); + text-transform: uppercase; + letter-spacing: 0.04em; + position: relative; +} +``` + +Replace with: +```css +html[data-design-theme="terminal"] .title { + background: var(--title-gradient); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; + text-shadow: none; + text-transform: uppercase; + letter-spacing: 0.04em; + position: relative; +} +``` + +- [ ] **Step 2: Update the cursor rule to keep it visible** + +The `::after` pseudo-element inherits `-webkit-text-fill-color: transparent` from the title, which would hide the cursor. Fix it explicitly. + +Find: +```css +html[data-design-theme="terminal"] .title::after { + content: "\2588"; + margin-left: 8px; + animation: terminal-cursor-blink 1s step-end infinite; +} +``` + +Replace with: +```css +html[data-design-theme="terminal"] .title::after { + content: "\2588"; + margin-left: 8px; + animation: terminal-cursor-blink 1s step-end infinite; + -webkit-text-fill-color: #bd93f9; +} +``` + +- [ ] **Step 3: Verify in browser** + +The page title should now show a purple-to-pink gradient text (uppercase). The blinking `█` cursor should be solid purple (`#bd93f9`), not transparent. + +--- + +### Task 4: Update card styling + +**Files:** +- Modify: `style.css` — all terminal `.card` rules (~lines 777–814) + +- [ ] **Step 1: Update the base card rule** + +Find: +```css +html[data-design-theme="terminal"] .card { + border-radius: 0; + background: transparent; + border: 1px solid rgba(var(--accent-rgb), 0.35); + box-shadow: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; + transform: none; +} +``` + +Replace with: +```css +html[data-design-theme="terminal"] .card { + border-radius: 10px; + background: #313244; + border: 1px solid #44475a; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); + backdrop-filter: none; + -webkit-backdrop-filter: none; + transform: translateY(0); + transition: all 0.2s ease; +} +``` + +- [ ] **Step 2: Add pin card variant** + +After the base card rule, add: +```css +html[data-design-theme="terminal"] .card.pin { + background: #383a4a; +} +``` + +- [ ] **Step 3: Update card h2, p, and beian (split the combined rule)** + +Find: +```css +html[data-design-theme="terminal"] .card h2, +html[data-design-theme="terminal"] .card p, +html[data-design-theme="terminal"] .beian a { + color: var(--accent); + text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.25); +} +``` + +Replace with: +```css +html[data-design-theme="terminal"] .card h2 { + color: #f8f8f2; + text-shadow: none; +} + +html[data-design-theme="terminal"] .card p { + color: #6272a4; + text-shadow: none; +} +``` + +- [ ] **Step 4: Update card hover/focus** + +Find: +```css +html[data-design-theme="terminal"] .card:hover, +html[data-design-theme="terminal"] .card:focus { + background: rgba(var(--accent-rgb), 0.06); + border-color: var(--accent); + box-shadow: none; +} +``` + +Replace with: +```css +html[data-design-theme="terminal"] .card:hover, +html[data-design-theme="terminal"] .card:focus { + background: #313244; + 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); +} +``` + +- [ ] **Step 5: Update hover h2 color** + +Find: +```css +html[data-design-theme="terminal"] .card:hover h2, +html[data-design-theme="terminal"] .card:focus h2 { + color: var(--accent); +} +``` + +Replace with: +```css +html[data-design-theme="terminal"] .card:hover h2, +html[data-design-theme="terminal"] .card:focus h2 { + color: #bd93f9; +} +``` + +- [ ] **Step 6: Add hover p color rule (currently missing)** + +Immediately after the hover h2 rule, add: +```css +html[data-design-theme="terminal"] .card:hover p, +html[data-design-theme="terminal"] .card:focus p { + color: #cdd6f4; +} +``` + +- [ ] **Step 7: Verify in browser** + +Cards should now have rounded corners, a dark-purple surface (`#313244`), and lift with a purple glow on hover. Card titles should be off-white at rest and turn purple on hover. Card descriptions should be muted (`#6272a4`) at rest and lighten on hover. + +--- + +### Task 5: Update controls and dropdown + +**Files:** +- Modify: `style.css` — terminal `.design-theme-button`, `.theme-toggle`, `.design-theme-list` rules (~lines 710–759) + +- [ ] **Step 1: Update the base button/toggle rule** + +Find: +```css +html[data-design-theme="terminal"] .design-theme-button, +html[data-design-theme="terminal"] .theme-toggle { + border-radius: 0; + box-shadow: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; + border: 1px solid rgba(var(--accent-rgb), 0.55); +} +``` + +Replace with: +```css +html[data-design-theme="terminal"] .design-theme-button, +html[data-design-theme="terminal"] .theme-toggle { + border-radius: 8px; + box-shadow: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; + border: 1px solid #44475a; +} +``` + +- [ ] **Step 2: Update button/toggle hover** + +Find: +```css +html[data-design-theme="terminal"] .design-theme-button:hover, +html[data-design-theme="terminal"] .theme-toggle:hover { + background: var(--accent); + color: #0a0a0a; + border-color: var(--accent); + transform: none; +} +``` + +Replace with: +```css +html[data-design-theme="terminal"] .design-theme-button:hover, +html[data-design-theme="terminal"] .theme-toggle:hover { + background: rgba(189, 147, 249, 0.08); + color: #bd93f9; + border-color: #bd93f9; + transform: none; +} +``` + +- [ ] **Step 3: Update dropdown list** + +Find: +```css +html[data-design-theme="terminal"] .design-theme-list { + border-radius: 0; + box-shadow: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; + background: rgba(10, 10, 10, 0.92); + border: 1px solid rgba(var(--accent-rgb), 0.55); +} +``` + +Replace with: +```css +html[data-design-theme="terminal"] .design-theme-list { + border-radius: 10px; + box-shadow: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; + background: rgba(40, 42, 54, 0.96); + border: 1px solid #44475a; +} +``` + +- [ ] **Step 4: Update dropdown option hover/selected** + +Find: +```css +html[data-design-theme="terminal"] .design-theme-list [role="option"]:hover, +html[data-design-theme="terminal"] + .design-theme-list + [role="option"][aria-selected="true"] { + background: var(--accent); + color: #0a0a0a; +} +``` + +Replace with: +```css +html[data-design-theme="terminal"] .design-theme-list [role="option"]:hover, +html[data-design-theme="terminal"] + .design-theme-list + [role="option"][aria-selected="true"] { + background: rgba(189, 147, 249, 0.15); + color: #bd93f9; +} +``` + +- [ ] **Step 5: Verify in browser** + +The theme selector button should have rounded corners and a dark surface. Hovering it should show a subtle purple tint (not green invert). Opening the dropdown should show a rounded dark panel; hovering or selecting an option highlights it in purple. + +--- + +### Task 6: Update beian footer + +**Files:** +- Modify: `style.css` — terminal `.beian a` and `.beian a:hover` rules (~lines 791–814) + +- [ ] **Step 1: Add beian rest-state rule** + +The old combined rule (`.card h2, .card p, .beian a`) was split in Task 4, which removed the beian rest-state color. Insert a new rule immediately **before** the existing `.beian a:hover` rule: + +```css +html[data-design-theme="terminal"] .beian a { + color: #6272a4; + text-shadow: none; +} +``` + +- [ ] **Step 2: Update beian hover** + +Find: +```css +html[data-design-theme="terminal"] .beian a:hover { + background: var(--accent); + color: #0a0a0a; + text-shadow: none; +} +``` + +Replace with: +```css +html[data-design-theme="terminal"] .beian a:hover { + color: #bd93f9; + background: none; + text-shadow: none; +} +``` + +- [ ] **Step 3: Verify in browser** + +The footer ICP link should appear in muted purple-grey (`#6272a4`) at rest and turn accent purple (`#bd93f9`) on hover, with no background invert. + +--- + +### Task 7: Format, QA, and commit + +**Files:** +- Modify: `style.css` (formatter pass) + +- [ ] **Step 1: Run Prettier** + +```bash +npm run fmt +``` + +Expected: `style.css` reformatted with no errors. + +- [ ] **Step 2: Full visual QA checklist** + +With `npm start` running, switch to the Terminal theme and check each item: + +| Element | Expected | +|---|---| +| Page background | `#282a36` dark blue-purple with subtle 20px dot matrix | +| Title | Purple-to-pink gradient text, uppercase, blinking purple `█` cursor | +| Cards at rest | `#313244` rounded (10px), `#44475a` border, subtle shadow | +| Pin card | Slightly lighter surface `#383a4a` | +| Card h2 at rest | `#f8f8f2` off-white | +| Card p at rest | `#6272a4` muted purple-grey | +| Card on hover | Purple border glow, lifts 2px, h2 → `#bd93f9`, p → `#cdd6f4` | +| Theme selector button | Rounded 8px, dark surface, purple hover tint (no invert) | +| Dropdown panel | Rounded 10px, dark surface, purple option highlight | +| Dark toggle | Greyed out / cursor: not-allowed (unchanged) | +| Beian footer | `#6272a4` at rest, `#bd93f9` on hover, no bg invert | +| Other themes | Completely unaffected — spot-check Cyberpunk and Fluent | + +- [ ] **Step 3: Commit** + +```bash +git add style.css +git commit -m "redesign: terminal theme — Dracula purple focus (soft modern cards, dot matrix bg)" +```