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>
19 lines
494 B
CSS
19 lines
494 B
CSS
/* 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%;
|
|
}
|