diff --git a/docs/superpowers/plans/2026-06-19-dark-mode.md b/docs/superpowers/plans/2026-06-19-dark-mode.md index ce355bf..19784a8 100644 --- a/docs/superpowers/plans/2026-06-19-dark-mode.md +++ b/docs/superpowers/plans/2026-06-19-dark-mode.md @@ -2,6 +2,8 @@ > **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. +**Status:** ✅ Complete (2026-06-20) + **Goal:** Replace the warm-paper light theme with a warm-dark "notebook at night" aesthetic — dark-only, no toggle, paper grain texture, dark terrain map tiles, typography polish. **Architecture:** Pure CSS token swap in `tokens.css` (all components update automatically), grain overlay via `body::after` SVG data URI in `style.css`, map tile URL swap in two Twig templates. No new dependencies, no JS changes, no structural changes. @@ -29,7 +31,7 @@ **Interfaces:** - Produces: CSS custom properties consumed by every component in `style.css` and Twig templates -- [ ] **Step 1: Read the current tokens file** +- [x] **Step 1: Read the current tokens file** ```bash cat user/themes/intotheeast/css/tokens.css @@ -37,7 +39,7 @@ cat user/themes/intotheeast/css/tokens.css Confirm these token names exist before editing: `--color-paper`, `--color-canvas`, `--color-ink`, `--color-ink-2`, `--color-ink-muted`, `--color-border`, `--color-border-soft`, `--color-accent`, `--color-accent-hover`, `--color-accent-light`, `--color-accent-on`. -- [ ] **Step 2: Replace the color block in tokens.css** +- [x] **Step 2: Replace the color block in tokens.css** Replace the entire `:root` color block (from `--color-paper` through `--color-accent-on`) with: @@ -60,7 +62,7 @@ Replace the entire `:root` color block (from `--color-paper` through `--color-ac Keep all non-color tokens (`--text-*`, `--leading-*`, `--space-*`, font variables, etc.) unchanged. -- [ ] **Step 3: Verify no syntax errors** +- [x] **Step 3: Verify no syntax errors** ```bash docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache" && curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026/dailies @@ -68,7 +70,7 @@ docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcach Expected: `200` -- [ ] **Step 4: Visual smoke check** +- [x] **Step 4: Visual smoke check** ```bash curl -s http://localhost:8081/trips/japan-korea-2026/dailies | grep -o 'color: var(--color-paper)' | head -3 @@ -76,7 +78,7 @@ curl -s http://localhost:8081/trips/japan-korea-2026/dailies | grep -o 'color: v Not a definitive check — just confirm the page renders. Open a browser and verify the background is dark and text is cream. -- [ ] **Step 5: Run test suite** +- [x] **Step 5: Run test suite** ```bash make test-ui @@ -84,7 +86,7 @@ make test-ui Expected: 24/25 pass (P2 FilePond is pre-existing failure, all others pass). -- [ ] **Step 6: Commit** +- [x] **Step 6: Commit** ```bash git -C user add themes/intotheeast/css/tokens.css @@ -101,7 +103,7 @@ git -C user commit -m "feat: switch to warm-dark color tokens" **Interfaces:** - Consumes: dark color tokens from Task 1 -- [ ] **Step 1: Find all hardcoded color literals in style.css** +- [x] **Step 1: Find all hardcoded color literals in style.css** ```bash grep -n '#[0-9a-fA-F]\{3,6\}\|background: white\|background:#fff\|color: #\|background-color: #' user/themes/intotheeast/css/style.css @@ -109,7 +111,7 @@ grep -n '#[0-9a-fA-F]\{3,6\}\|background: white\|background:#fff\|color: #\|back Make note of every hit — each one is a candidate to replace with a token. Exceptions: the CSS SVG data URI you are about to add (the noise filter hex values are part of the graphic, not UI colors). -- [ ] **Step 2: Add paper grain texture to body** +- [x] **Step 2: Add paper grain texture to body** Find the `body` rule in `style.css`. It will look something like: @@ -137,7 +139,7 @@ body::after { } ``` -- [ ] **Step 3: Fix hardcoded login form colors** +- [x] **Step 3: Fix hardcoded login form colors** Find this rule (around line 497): @@ -151,7 +153,7 @@ Replace with: .login-form .button.secondary { background: var(--color-canvas); color: var(--color-ink); text-decoration: none; line-height: 44px; padding: 0 1rem; } ``` -- [ ] **Step 4: Fix any other hardcoded colors found in Step 1** +- [x] **Step 4: Fix any other hardcoded colors found in Step 1** For each hardcoded literal found in Step 1 (excluding the data URI you added): - `#fff` / `white` → `var(--color-canvas)` (if a surface) or `var(--color-paper)` (if a page background) @@ -161,7 +163,7 @@ For each hardcoded literal found in Step 1 (excluding the data URI you added): Use judgment: if a hex is inside a gradient or SVG path data, leave it alone. -- [ ] **Step 5: Typography — increase entry body paragraph spacing** +- [x] **Step 5: Typography — increase entry body paragraph spacing** Find: @@ -171,11 +173,11 @@ Find: Change `margin-bottom: 1.1em` to `margin-bottom: 1.4em`. -- [ ] **Step 6: Typography — tighten h1/h2 tracking** +- [x] **Step 6: Typography — tighten h1/h2 tracking** Find the `h1` and `h2` rules. Any rule that applies `letter-spacing: -0.01em` to an `h1` or `h2` — change it to `-0.02em`. Do not touch h3/h4/h5/h6. -- [ ] **Step 7: Stats page — tabular numbers** +- [x] **Step 7: Stats page — tabular numbers** Find any CSS rule targeting stats numbers (look for `.stat-value`, `.stats-number`, or similar). Add `font-variant-numeric: tabular-nums` to it. If no such specific rule exists, search the template: @@ -185,7 +187,7 @@ grep -n 'stat\|number\|count' user/themes/intotheeast/templates/stats.html.twig Then add a targeted rule in style.css for whatever class wraps the numeric values. -- [ ] **Step 8: Verify no syntax errors and visual check** +- [x] **Step 8: Verify no syntax errors and visual check** ```bash docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcache" && curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026/dailies @@ -193,7 +195,7 @@ docker exec intotheeast_grav bash -c "cd /var/www/html && php bin/grav clearcach Expected: `200`. Open browser — grain should be subtly visible on the dark background. -- [ ] **Step 9: Run test suite** +- [x] **Step 9: Run test suite** ```bash make test-ui @@ -201,7 +203,7 @@ make test-ui Expected: 24/25 (P2 pre-existing). -- [ ] **Step 10: Commit** +- [x] **Step 10: Commit** ```bash git -C user add themes/intotheeast/css/style.css @@ -220,7 +222,7 @@ git -C user commit -m "feat: add paper grain texture, fix hardcoded colors, impr - Consumes: Leaflet.js already loaded in both templates - Produces: Stadia Alidade Smooth Dark tiles replacing OpenStreetMap tiles in both map views -- [ ] **Step 1: Read current tile setup in both templates** +- [x] **Step 1: Read current tile setup in both templates** ```bash grep -n "tileLayer\|openstreetmap\|attribution\|stadia" user/themes/intotheeast/templates/map.html.twig user/themes/intotheeast/templates/dailies.html.twig @@ -228,7 +230,7 @@ grep -n "tileLayer\|openstreetmap\|attribution\|stadia" user/themes/intotheeast/ Confirm the current tile URL pattern (`{s}.tile.openstreetmap.org`) in both files. -- [ ] **Step 2: Replace tile layer in map.html.twig** +- [x] **Step 2: Replace tile layer in map.html.twig** Find: @@ -248,11 +250,11 @@ L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{ }).addTo(map); ``` -- [ ] **Step 3: Replace tile layer in dailies.html.twig (mini-map)** +- [x] **Step 3: Replace tile layer in dailies.html.twig (mini-map)** Apply the identical tile swap to the mini-map `L.tileLayer` call in `dailies.html.twig`. Find the OpenStreetMap tile URL and replace it with the Stadia dark URL (same as Step 2, same attribution, same TODO comment). -- [ ] **Step 4: Verify tiles load** +- [x] **Step 4: Verify tiles load** ```bash curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026/map @@ -274,7 +276,7 @@ Open the map in a browser and confirm: - Entry pins render correctly on top - Attribution footer is present -- [ ] **Step 5: Check mini-map on dailies page** +- [x] **Step 5: Check mini-map on dailies page** ```bash curl -s http://localhost:8081/trips/japan-korea-2026/dailies | grep -o 'stadiamaps' @@ -282,7 +284,7 @@ curl -s http://localhost:8081/trips/japan-korea-2026/dailies | grep -o 'stadiama Expected: `stadiamaps`. -- [ ] **Step 6: Run test suite** +- [x] **Step 6: Run test suite** ```bash make test-ui @@ -290,7 +292,7 @@ make test-ui Expected: 24/25 (P2 pre-existing). -- [ ] **Step 7: Commit** +- [x] **Step 7: Commit** ```bash git -C user add themes/intotheeast/templates/map.html.twig themes/intotheeast/templates/dailies.html.twig