From f869743bc32c098733cc23009b294795447705ef Mon Sep 17 00:00:00 2001 From: "f.albany" Date: Wed, 4 Nov 2026 12:48:22 +0100 Subject: [PATCH] style(editor): solid VSCode-style CodeMirror theme + bordered editor card #98 #99 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two visual issues from the post-#95 review, landed together because they touch exactly the same surface (the editor theme and its host). ## Issue #98 — solid VSCode-style theme The CodeMirror theme painted `transparent` over the frosted modal glass. New dedicated `--app-editor-*` tokens in index.css (both `data-theme` blocks — dark tracks VSCode Dark Modern values, light its slate/white counterparts): --app-editor-bg / gutter-bg / active-line / selection / border The theme object is rebuilt on them: solid canvas, opaque gutter with a borderRight of the new border token, visible indigo-alpha selection, clear active-line and active-line-gutter, matching/non-matching bracket colors, and the Ctrl+F search panel now sits on the solid editor background instead of the glass. ## Issue #99 — margin + bordered card The editor host now sits inside a padded body (`p-3 sm:p-4`) and a rounded card (`data-testid="editor-card"`, rounded-lg + the editor border/background tokens). Loading and error states render inside the card so the layout does not jump between states; the host stays a plain `h-full` child. ## TDD evidence - RED: 3 new vitest chrome tests failed for the right reasons (no token-backed canvas rule, tokens absent from index.css, no card). Two test refinements while redder than the code: CodeMirror merges built-in base-theme rules into the same