From cdcb7e48532ae04b20db75d117c82383fd0e230c Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Sat, 16 May 2026 19:27:07 +0200
Subject: [PATCH] style(editor): visible light-mode popup active state + plan
 sync
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses Important #1 + Minor #2/#3 from the Task 3 re-review:

- --color-bg-popover-active light value: #f3f4f6 → #e5e7eb. The prior
  value was within ~1.05:1 luminance of the white surface — keyboard
  navigation through the autocomplete list had no visible focus
  indicator in light mode. e5e7eb (Tailwind gray-200) clears that.
- Drop dead fallback hexes on the four guaranteed tokens
  (--color-string/-keyword/-number/-bg-popover-active). They never
  fired post-fix and only produced a dark-mode-only palette if
  tokens.css somehow failed to load — i.e. they were misleading.
- Plan source block (Task 3 Step 2) replaced with the post-fix CSS
  verbatim + a new Step 2b that documents the tokens.css additions
  alongside the editor.css template, so a fresh regeneration
  produces the same file.

Deferred: cross-cutting --font-mono token (Minor #4 — would touch 7+
sites outside Task 3's scope).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../plans/2026-05-16-textarea-code-editor.md  | 50 +++++++++++++++----
 l4d2web/l4d2web/static/css/editor.css         |  8 +--
 l4d2web/l4d2web/static/css/tokens.css         |  2 +-
 3 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/docs/superpowers/plans/2026-05-16-textarea-code-editor.md b/docs/superpowers/plans/2026-05-16-textarea-code-editor.md
index 62a1f8f..e488b54 100644
--- a/docs/superpowers/plans/2026-05-16-textarea-code-editor.md
+++ b/docs/superpowers/plans/2026-05-16-textarea-code-editor.md
@@ -268,6 +268,13 @@ Create `l4d2web/l4d2web/static/css/editor.css`:
    any <textarea data-editor-language>. The textarea is hidden but stays
    in the DOM for form submission and JS .value reads. */
 
+/* Token swaps from spec to match tokens.css:
+   --color-fg       → --color-text    (text color token)
+   --color-bg-input → --color-surface (textarea uses --color-surface)
+   --radius-input   → --radius-s      (closest available radius token)
+   --color-bg-popover → --color-surface (surface layer for overlays)
+*/
+
 .editor-shell {
   position: relative;
   width: 100%;
@@ -295,12 +302,15 @@ Create `l4d2web/l4d2web/static/css/editor.css`:
   border-color: var(--color-focus, #6ab0ff);
 }
 
-/* Prism token colors — override defaults to match the site palette. */
-.editor-code .token.comment   { color: var(--color-muted, #888); font-style: italic; }
-.editor-code .token.string    { color: var(--color-string, #c2e886); }
-.editor-code .token.keyword   { color: var(--color-keyword, #ff7b72); font-weight: 600; }
-.editor-code .token.number    { color: var(--color-number, #f0b86e); }
-.editor-code .token.operator  { color: var(--color-muted, #888); }
+/* Prism token colors — override defaults to match the site palette.
+   --color-string / --color-keyword / --color-number / --color-bg-popover-active
+   are added to tokens.css in both :root and the dark-mode block, so the
+   editor inherits the site's light/dark theming without per-token fallbacks. */
+.editor-code .token.comment    { color: var(--color-muted, #888); font-style: italic; }
+.editor-code .token.string     { color: var(--color-string); }
+.editor-code .token.keyword    { color: var(--color-keyword); font-weight: 600; }
+.editor-code .token.number     { color: var(--color-number); }
+.editor-code .token.operator   { color: var(--color-muted, #888); }
 .editor-code .token.identifier { color: inherit; }
 
 /* Autocomplete popup. */
@@ -315,9 +325,9 @@ Create `l4d2web/l4d2web/static/css/editor.css`:
   list-style: none;
   font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
   font-size: 0.9em;
-  background: var(--color-bg-popover, #222);
+  background: var(--color-surface, #222);
   border: 1px solid var(--color-border, #333);
-  border-radius: var(--radius-input, 4px);
+  border-radius: var(--radius-s, 4px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 
@@ -328,10 +338,10 @@ Create `l4d2web/l4d2web/static/css/editor.css`:
 }
 
 .editor-popup-item.is-active {
-  background: var(--color-bg-popover-active, #2d4f7c);
+  background: var(--color-bg-popover-active);
 }
 
-.editor-popup-item .name { color: var(--color-fg, #e6e6e6); }
+.editor-popup-item .name { color: var(--color-text, #e6e6e6); }
 .editor-popup-item .desc { color: var(--color-muted, #888); margin-left: 0.5em; }
 
 /* Files-editor language dropdown. */
@@ -340,7 +350,25 @@ Create `l4d2web/l4d2web/static/css/editor.css`:
 }
 ```
 
-If `tokens.css` doesn't define some of the variables referenced (e.g. `--color-bg-input`), the `var(name, fallback)` form falls back gracefully. After Step 1 you'll know which token names are real; replace any fallback-only ones with values you've grepped.
+The token-swap comment at the top records the four `tokens.css` reconciliations applied during the original audit pass. The five-line block following the Prism-token comment block also requires the matching token additions to `tokens.css` (both `:root` and `@media (prefers-color-scheme: dark)`): see the immediately following sub-step.
+
+**Step 2b: Add the syntax-highlighting tokens to `tokens.css`**
+
+```css
+/* Inside :root (light mode) */
+--color-string: #0a3069;          /* dark blue */
+--color-keyword: #cf222e;         /* red */
+--color-number: #0550ae;          /* medium blue */
+--color-bg-popover-active: #e5e7eb;  /* light gray — visible on white surface */
+
+/* Inside @media (prefers-color-scheme: dark) */
+--color-string: #a5d6ff;          /* light blue */
+--color-keyword: #ff7b72;         /* salmon */
+--color-number: #79c0ff;          /* light blue, different hue from string */
+--color-bg-popover-active: #374151;  /* lifted gray on dark surface */
+```
+
+These are GitHub-style code-syntax colors tuned to ≥4.5:1 contrast on each theme's surface. Confirm placement matches the file's existing block structure (alphabetical-within-block in the current file).
 
 - [ ] **Step 3: Commit**
 
diff --git a/l4d2web/l4d2web/static/css/editor.css b/l4d2web/l4d2web/static/css/editor.css
index 1a44cc4..0ef983c 100644
--- a/l4d2web/l4d2web/static/css/editor.css
+++ b/l4d2web/l4d2web/static/css/editor.css
@@ -38,9 +38,9 @@
 
 /* Prism token colors — override defaults to match the site palette. */
 .editor-code .token.comment    { color: var(--color-muted, #888); font-style: italic; }
-.editor-code .token.string     { color: var(--color-string, #c2e886); }
-.editor-code .token.keyword    { color: var(--color-keyword, #ff7b72); font-weight: 600; }
-.editor-code .token.number     { color: var(--color-number, #f0b86e); }
+.editor-code .token.string     { color: var(--color-string); }
+.editor-code .token.keyword    { color: var(--color-keyword); font-weight: 600; }
+.editor-code .token.number     { color: var(--color-number); }
 .editor-code .token.operator   { color: var(--color-muted, #888); }
 .editor-code .token.identifier { color: inherit; }
 
@@ -69,7 +69,7 @@
 }
 
 .editor-popup-item.is-active {
-  background: var(--color-bg-popover-active, #2d4f7c);
+  background: var(--color-bg-popover-active);
 }
 
 .editor-popup-item .name { color: var(--color-text, #e6e6e6); }
diff --git a/l4d2web/l4d2web/static/css/tokens.css b/l4d2web/l4d2web/static/css/tokens.css
index 890e5ef..a1694df 100644
--- a/l4d2web/l4d2web/static/css/tokens.css
+++ b/l4d2web/l4d2web/static/css/tokens.css
@@ -16,7 +16,7 @@
   --color-string: #0a3069;
   --color-keyword: #cf222e;
   --color-number: #0550ae;
-  --color-bg-popover-active: #f3f4f6;
+  --color-bg-popover-active: #e5e7eb;
 
   --space-base: 0.25rem;
   --space-xs: var(--space-base);