528 lines
13 KiB
Markdown
528 lines
13 KiB
Markdown
# 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)"
|
||
```
|