From f9c8518212fc286219745e89ac4f941136343749 Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Sat, 16 May 2026 19:22:27 +0200
Subject: [PATCH] style(editor): theme-aware syntax tokens + match textarea
 metrics
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses Important #1 + #2 from the Task 3 code review:

- Adds --color-string, --color-keyword, --color-number,
  --color-bg-popover-active to tokens.css in both the :root and dark
  blocks. GitHub-style palette tuned for legibility on each theme's
  surface.
- Updates .editor-code to use the same padding tokens, font-family
  stack, font-size, and line-height as the existing textarea rule so
  the contenteditable doesn't visibly jump when the widget mounts.
- Drops the caret-color override (browser default adapts to system
  theme — no token needed).

Plan source block updated to match.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../plans/2026-05-16-textarea-code-editor.md      | 15 +++++++--------
 l4d2web/l4d2web/static/css/editor.css             |  9 ++++-----
 l4d2web/l4d2web/static/css/tokens.css             |  8 ++++++++
 3 files changed, 19 insertions(+), 13 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 f4e7974..62a1f8f 100644
--- a/docs/superpowers/plans/2026-05-16-textarea-code-editor.md
+++ b/docs/superpowers/plans/2026-05-16-textarea-code-editor.md
@@ -277,19 +277,18 @@ Create `l4d2web/l4d2web/static/css/editor.css`:
   display: block;
   width: 100%;
   min-height: 6em;
-  padding: 0.5em 0.75em;
-  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
-  font-size: 0.95em;
-  line-height: 1.45;
-  color: var(--color-fg, #e6e6e6);
-  background: var(--color-bg-input, #1b1b1b);
+  padding: var(--space-s) var(--space-m);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--color-text, #e6e6e6);
+  background: var(--color-surface, #1b1b1b);
   border: 1px solid var(--color-border, #333);
-  border-radius: var(--radius-input, 4px);
+  border-radius: var(--radius-s, 4px);
   white-space: pre-wrap;
   word-break: break-word;
   overflow: auto;
   outline: none;
-  caret-color: var(--color-caret, #fff);
 }
 
 .editor-code:focus {
diff --git a/l4d2web/l4d2web/static/css/editor.css b/l4d2web/l4d2web/static/css/editor.css
index 6d323f1..1a44cc4 100644
--- a/l4d2web/l4d2web/static/css/editor.css
+++ b/l4d2web/l4d2web/static/css/editor.css
@@ -18,10 +18,10 @@
   display: block;
   width: 100%;
   min-height: 6em;
-  padding: 0.5em 0.75em;
-  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
-  font-size: 0.95em;
-  line-height: 1.45;
+  padding: var(--space-s) var(--space-m);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
   color: var(--color-text, #e6e6e6);
   background: var(--color-surface, #1b1b1b);
   border: 1px solid var(--color-border, #333);
@@ -30,7 +30,6 @@
   word-break: break-word;
   overflow: auto;
   outline: none;
-  caret-color: var(--color-caret, #fff);
 }
 
 .editor-code:focus {
diff --git a/l4d2web/l4d2web/static/css/tokens.css b/l4d2web/l4d2web/static/css/tokens.css
index 023670b..890e5ef 100644
--- a/l4d2web/l4d2web/static/css/tokens.css
+++ b/l4d2web/l4d2web/static/css/tokens.css
@@ -13,6 +13,10 @@
   --color-focus: #2563eb;
   --color-log-bg: #f8fafc;
   --color-log-text: #18181b;
+  --color-string: #0a3069;
+  --color-keyword: #cf222e;
+  --color-number: #0550ae;
+  --color-bg-popover-active: #f3f4f6;
 
   --space-base: 0.25rem;
   --space-xs: var(--space-base);
@@ -51,6 +55,10 @@
     --color-focus: #bfdbfe;
     --color-log-bg: #111827;
     --color-log-text: #e5e7eb;
+    --color-string: #a5d6ff;
+    --color-keyword: #ff7b72;
+    --color-number: #79c0ff;
+    --color-bg-popover-active: #374151;
   }
 }