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

feat(editor-v2): tokens.css syntax vars + editor.css shell

Browse source 
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>
This commit is contained in:
mwiegand 2026-05-17 01:59:41 +02:00
parent 6af2e41fd8
commit 921168722b
No known key found for this signature in database
2 changed files with 40 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
l4d2web/l4d2web/static/css/editor.css Normal file
View file

@ -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%;
}

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

@ -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);
}
}