cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(editor): theme-aware syntax tokens + match textarea metrics

Browse source 
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>
This commit is contained in:
mwiegand 2026-05-16 19:22:27 +02:00
parent 75a586a47b
commit f9c8518212
No known key found for this signature in database
3 changed files with 19 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
docs/superpowers/plans/2026-05-16-textarea-code-editor.md
View file

@ -277,19 +277,18 @@ Create `l4d2web/l4d2web/static/css/editor.css`:
display: block; display: block;
width: 100%; width: 100%;
min-height: 6em; min-height: 6em;
padding: 0.5em 0.75em; padding: var(--space-s) var(--space-m);
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.95em; font-size: 0.875rem;
line-height: 1.45; line-height: 1.5;
color: var(--color-fg, #e6e6e6); color: var(--color-text, #e6e6e6);
background: var(--color-bg-input, #1b1b1b); background: var(--color-surface, #1b1b1b);
border: 1px solid var(--color-border, #333); border: 1px solid var(--color-border, #333);
border-radius: var(--radius-input, 4px); border-radius: var(--radius-s, 4px);
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
overflow: auto; overflow: auto;
outline: none; outline: none;
caret-color: var(--color-caret, #fff);
} }
.editor-code:focus { .editor-code:focus {

9
l4d2web/l4d2web/static/css/editor.css
View file

@ -18,10 +18,10 @@
display: block; display: block;
width: 100%; width: 100%;
min-height: 6em; min-height: 6em;
padding: 0.5em 0.75em; padding: var(--space-s) var(--space-m);
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.95em; font-size: 0.875rem;
line-height: 1.45; line-height: 1.5;
color: var(--color-text, #e6e6e6); color: var(--color-text, #e6e6e6);
background: var(--color-surface, #1b1b1b); background: var(--color-surface, #1b1b1b);
border: 1px solid var(--color-border, #333); border: 1px solid var(--color-border, #333);
@ -30,7 +30,6 @@
word-break: break-word; word-break: break-word;
overflow: auto; overflow: auto;
outline: none; outline: none;
caret-color: var(--color-caret, #fff);
} }
.editor-code:focus { .editor-code:focus {

8
l4d2web/l4d2web/static/css/tokens.css
View file

@ -13,6 +13,10 @@
--color-focus: #2563eb; --color-focus: #2563eb;
--color-log-bg: #f8fafc; --color-log-bg: #f8fafc;
--color-log-text: #18181b; --color-log-text: #18181b;
--color-string: #0a3069;
--color-keyword: #cf222e;
--color-number: #0550ae;
--color-bg-popover-active: #f3f4f6;
--space-base: 0.25rem; --space-base: 0.25rem;
--space-xs: var(--space-base); --space-xs: var(--space-base);
@ -51,6 +55,10 @@
--color-focus: #bfdbfe; --color-focus: #bfdbfe;
--color-log-bg: #111827; --color-log-bg: #111827;
--color-log-text: #e5e7eb; --color-log-text: #e5e7eb;
--color-string: #a5d6ff;
--color-keyword: #ff7b72;
--color-number: #79c0ff;
--color-bg-popover-active: #374151;
} }
} }