fix(markdown): use editor-side tokens in the preview (#992)

* fix(markdown): use editor-side tokens in the preview

The preview paints on var(--bg-editor) but took its text colors from
the UI tokens (--fg, --fg-strong, --fg-secondary), so with a light UI
theme plus a dark editor scheme (e.g. an imported dark .icls) it
rendered black-on-black. The code editor was unaffected because it
uses --fg-editor.

The preview now uses editor-side tokens: text var(--fg-editor),
headings var(--syn-markup-heading), code/pre/th background
var(--bg-editor-inline), blockquote var(--fg-editor) at 80%.

* chore: oxfmt src/features/run/types.ts (fixes format:check broken on main by 002401e8)

* chore: regenerate bindings after rebasing onto main
This commit is contained in:
Marius Ciepluch
2026-11-03 20:55:06 +08:00
committed by GitHub
parent a15712b670
commit 8ca25e1984
@@ -34,8 +34,11 @@
overflow: auto;
padding: 16px 28px 40vh;
outline: none;
/* The preview sits on the editor background, so its text comes from the
editor scheme: with a light UI theme + dark editor scheme, the UI's
--fg would be black-on-black here. */
background: var(--bg-editor, var(--bg-app));
color: var(--fg);
color: var(--fg-editor, var(--fg));
font-family: var(--font-ui);
font-size: calc(14px + var(--markdown-font-zoom, 0px));
line-height: 1.6;
@@ -53,7 +56,7 @@
.preview :global(h5),
.preview :global(h6) {
margin: 1.2em 0 0.6em;
color: var(--fg-strong);
color: var(--syn-markup-heading, var(--fg-strong));
line-height: 1.25;
}
.preview :global(h1) {
@@ -90,12 +93,12 @@
font-size: 0.9em;
padding: 0.1em 0.35em;
border-radius: var(--radius-small);
background: var(--bg-elev);
background: var(--bg-editor-inline, var(--bg-elev));
}
.preview :global(pre) {
padding: 10px 12px;
border-radius: var(--radius-control);
background: var(--bg-elev);
background: var(--bg-editor-inline, var(--bg-elev));
overflow: auto;
line-height: 1.45;
}
@@ -107,7 +110,8 @@
.preview :global(blockquote) {
padding: 0 1em;
border-left: 3px solid var(--border-strong);
color: var(--fg-secondary);
color: var(--fg-editor, var(--fg-secondary));
opacity: 0.8;
}
.preview :global(table) {
border-collapse: collapse;
@@ -118,7 +122,7 @@
border: 1px solid var(--border-strong);
}
.preview :global(th) {
background: var(--bg-elev);
background: var(--bg-editor-inline, var(--bg-elev));
}
.preview :global(hr) {
border: none;