m038/intotheeast-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: mark dark-mode plan complete

Browse Source
This commit is contained in:
Mischa
2026-06-20 20:01:38 +02:00
parent d6a7a8c3df
commit cf03eebb72
1 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/superpowers/plans/2026-06-19-dark-mode.md
+25 -23
View File
@@ -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. > **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. **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. **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:** **Interfaces:**
- Produces: CSS custom properties consumed by every component in `style.css` and Twig templates - 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 ```bash
cat user/themes/intotheeast/css/tokens.css 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`. 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: 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. 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 ```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 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` Expected: `200`
- [ ] **Step 4: Visual smoke check** - [x] **Step 4: Visual smoke check**
```bash ```bash
curl -s http://localhost:8081/trips/japan-korea-2026/dailies | grep -o 'color: var(--color-paper)' | head -3 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. 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 ```bash
make test-ui make test-ui
@@ -84,7 +86,7 @@ make test-ui
Expected: 24/25 pass (P2 FilePond is pre-existing failure, all others pass). Expected: 24/25 pass (P2 FilePond is pre-existing failure, all others pass).
- [ ] **Step 6: Commit** - [x] **Step 6: Commit**
```bash ```bash
git -C user add themes/intotheeast/css/tokens.css 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:** **Interfaces:**
- Consumes: dark color tokens from Task 1 - 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 ```bash
grep -n '#[0-9a-fA-F]\{3,6\}\|background: white\|background:#fff\|color: #\|background-color: #' user/themes/intotheeast/css/style.css 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). 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: 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): 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; } .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): 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) - `#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. 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: Find:
@@ -171,11 +173,11 @@ Find:
Change `margin-bottom: 1.1em` to `margin-bottom: 1.4em`. 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. 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: 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. 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 ```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 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. 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 ```bash
make test-ui make test-ui
@@ -201,7 +203,7 @@ make test-ui
Expected: 24/25 (P2 pre-existing). Expected: 24/25 (P2 pre-existing).
- [ ] **Step 10: Commit** - [x] **Step 10: Commit**
```bash ```bash
git -C user add themes/intotheeast/css/style.css 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 - Consumes: Leaflet.js already loaded in both templates
- Produces: Stadia Alidade Smooth Dark tiles replacing OpenStreetMap tiles in both map views - 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 ```bash
grep -n "tileLayer\|openstreetmap\|attribution\|stadia" user/themes/intotheeast/templates/map.html.twig user/themes/intotheeast/templates/dailies.html.twig 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. 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: Find:
@@ -248,11 +250,11 @@ L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{
}).addTo(map); }).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). 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 ```bash
curl -s -o /dev/null -w "%{http_code}" http://localhost:8081/trips/japan-korea-2026/map 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 - Entry pins render correctly on top
- Attribution footer is present - Attribution footer is present
- [ ] **Step 5: Check mini-map on dailies page** - [x] **Step 5: Check mini-map on dailies page**
```bash ```bash
curl -s http://localhost:8081/trips/japan-korea-2026/dailies | grep -o 'stadiamaps' 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`. Expected: `stadiamaps`.
- [ ] **Step 6: Run test suite** - [x] **Step 6: Run test suite**
```bash ```bash
make test-ui make test-ui
@@ -290,7 +292,7 @@ make test-ui
Expected: 24/25 (P2 pre-existing). Expected: 24/25 (P2 pre-existing).
- [ ] **Step 7: Commit** - [x] **Step 7: Commit**
```bash ```bash
git -C user add themes/intotheeast/templates/map.html.twig themes/intotheeast/templates/dailies.html.twig git -C user add themes/intotheeast/templates/map.html.twig themes/intotheeast/templates/dailies.html.twig