giers10/textDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update markdown-render.css with scoped tokens and theme support

Browse Source
This commit is contained in:
Victor Giers
2026-01-31 14:25:21 +01:00
parent ec5bc01ab6
commit 49da9fccc4
1 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/markdown/markdown-render.css
View File

@@ -1,22 +1,28 @@
:root { /* Scoped tokens to avoid bleeding into the app */
/* Core tokens */ .md-root {
--md-border-color: #e0e0e0; --md-border-color: var(--border);
--md-surface: #f8f8f8; --md-surface: var(--bg-contrast);
--md-surface-alt: #fdfdfd; --md-surface-alt: var(--bg-input);
--md-radius: 12px; --md-radius: 12px;
--md-text-color: #111; --md-text-color: var(--ink);
--md-muted-color: #555; --md-muted-color: var(--muted);
--md-link-color: #0a66c2; --md-link-color: #5aa2ff;
--md-link-hover-color: #004182; --md-link-hover-color: #7bb6ff;
--md-code-bg: #fdfdfd; --md-code-bg: var(--bg-contrast);
--md-code-inline-bg: #f3f3f3; --md-code-inline-bg: rgba(255, 255, 255, 0.08);
--md-code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, --md-code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace; "Liberation Mono", "Courier New", monospace;
} }
body[data-theme="light"] .md-root {
--md-link-color: #0a66c2;
--md-link-hover-color: #004182;
--md-code-inline-bg: rgba(0, 0, 0, 0.06);
}
/* Optional wrapper if you choose to wrap markdown output: /* Optional wrapper if you choose to wrap markdown output:
<div class="md-root" v-html="markdownToHTML(text)"> */ <div class="md-root" v-html="markdownToHTML(text)"> */
.md-root { .md-root {
@@ -134,7 +140,7 @@
border: 1px solid var(--md-border-color); border: 1px solid var(--md-border-color);
border-radius: var(--md-radius); border-radius: var(--md-radius);
overflow: hidden; overflow: hidden;
background: #fff; background: var(--md-surface-alt);
} }
.md-codeblock__header { .md-codeblock__header {
@@ -161,13 +167,13 @@
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border: 1px solid var(--md-border-color); border: 1px solid var(--md-border-color);
border-radius: 8px; border-radius: 8px;
background: #fff; background: var(--md-surface-alt);
color: var(--md-text-color); color: var(--md-text-color);
cursor: pointer; cursor: pointer;
} }
.md-codeblock__copy:hover { .md-codeblock__copy:hover {
background: #f3f3f3; background: var(--md-surface);
} }
.md-codeblock__copy:active { .md-codeblock__copy:active {
@@ -243,8 +249,8 @@ code:not(.md-codeblock__code) {
top: 100%; top: 100%;
margin-top: 0.35rem; margin-top: 0.35rem;
padding: 0.35rem 0.5rem; padding: 0.35rem 0.5rem;
background: #111; background: var(--bg-contrast-strong);
color: #fff; color: var(--md-text-color);
border-radius: 6px; border-radius: 6px;
font-size: 0.75rem; font-size: 0.75rem;
white-space: nowrap; white-space: nowrap;
@@ -259,4 +265,4 @@ code:not(.md-codeblock__code) {
.md-link--external:focus-visible .md-link__tooltip { .md-link--external:focus-visible .md-link__tooltip {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }