From 921168722b86945ad465f76d31d0342d4f8f5092 Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Sun, 17 May 2026 01:59:41 +0200
Subject: [PATCH] feat(editor-v2): tokens.css syntax vars + editor.css shell

tokens.css gains:
- --syntax-{keyword,string,comment,number}: source-of-truth syntax
  token colors, overridden in the prefers-color-scheme: dark block.
- --cm-{bg,fg,keyword,string,comment,number,selection}: bridge
  variables the cm6 themes (themes.js) reference. --cm-bg / --cm-fg
  route through the existing --color-surface / --color-text palette
  so they pick up dark-mode automatically.

editor.css scopes the cm6 shell (.cm-editor) to match the app's
existing --line / --radius-s / --color-focus tokens. Token colors
themselves come from cm6 themes, not this stylesheet.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 l4d2web/l4d2web/static/css/editor.css | 19 +++++++++++++++++++
 l4d2web/l4d2web/static/css/tokens.css | 21 +++++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 l4d2web/l4d2web/static/css/editor.css

diff --git a/l4d2web/l4d2web/static/css/editor.css b/l4d2web/l4d2web/static/css/editor.css
new file mode 100644
index 0000000..f329423
--- /dev/null
+++ b/l4d2web/l4d2web/static/css/editor.css
@@ -0,0 +1,19 @@
+/* Editor (CodeMirror 6) shell styling. Token / gutter / selection colors
+ * are set inside cm6 themes (themes.js) bound to the --cm-* variables
+ * in tokens.css; this file scopes the editor container's chrome to
+ * match the rest of the app. */
+
+.cm-editor {
+  border: var(--line);
+  border-radius: var(--radius-s);
+  min-height: 8em;
+}
+
+.cm-editor.cm-focused {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
+}
+
+textarea[data-editor-language] + .cm-editor {
+  width: 100%;
+}
diff --git a/l4d2web/l4d2web/static/css/tokens.css b/l4d2web/l4d2web/static/css/tokens.css
index 023670b..d69823d 100644
--- a/l4d2web/l4d2web/static/css/tokens.css
+++ b/l4d2web/l4d2web/static/css/tokens.css
@@ -33,6 +33,19 @@
      background to read. Don't redefine these in the dark-mode block. */
   --color-button-primary: #1d4ed8;
   --color-button-danger: #b42318;
+
+  /* Editor (CodeMirror 6) palette — light. */
+  --syntax-keyword: #cc4488;
+  --syntax-string:  #2f8b3a;
+  --syntax-comment: #888;
+  --syntax-number:  #884488;
+  --cm-bg: var(--color-surface);
+  --cm-fg: var(--color-text);
+  --cm-selection: rgba(60, 130, 220, 0.2);
+  --cm-keyword: var(--syntax-keyword);
+  --cm-string:  var(--syntax-string);
+  --cm-comment: var(--syntax-comment);
+  --cm-number:  var(--syntax-number);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -51,6 +64,14 @@
     --color-focus: #bfdbfe;
     --color-log-bg: #111827;
     --color-log-text: #e5e7eb;
+
+    /* Editor (CodeMirror 6) palette — dark overrides. --cm-bg / --cm-fg
+       cascade automatically through --color-surface / --color-text. */
+    --syntax-keyword: #ff80c0;
+    --syntax-string:  #87d96a;
+    --syntax-comment: #888;
+    --syntax-number:  #c890ff;
+    --cm-selection: rgba(120, 170, 255, 0.25);
   }
 }