From fbebddeaa9649919ee13e658d24f59a13c82a23c Mon Sep 17 00:00:00 2001 From: Leo Vasanko Date: Sun, 30 Aug 2026 01:22:22 +0000 Subject: [PATCH] Style inline code; drop explicit colorspace from color-mix Inline code gets padding-inline, keep-all word-break, and a color nudged 30% toward --muted from the inherited color, so code inside accent-colored text keeps its hue. All color-mix calls now rely on the default interpolation space (oklab) instead of declaring srgb/oklab explicitly. --- frontend/src/assets/pagerite.css | 37 ++++++++++++++++++++--------- frontend/src/assets/pygments.css | 4 ++-- pagerite/themes/corporate/theme.css | 2 +- pagerite/themes/nitro/theme.css | 2 +- pagerite/themes/summer/theme.css | 2 +- 5 files changed, 31 insertions(+), 16 deletions(-) diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css index 0918dd7..ed04b5a 100644 --- a/frontend/src/assets/pagerite.css +++ b/frontend/src/assets/pagerite.css @@ -17,7 +17,7 @@ --line: #0000001a; /* Links stay quiet — mostly text color with a hint of the accent — and light up to the full accent on hover. */ - --link: color-mix(in oklab, var(--text) 50%, var(--accent)); + --link: color-mix(var(--text) 50%, var(--accent)); /* Selection fill for page text and the CodeMirror editors; themes override when the accent tint clashes with accent-colored text. */ --selection-bg: color-mix(var(--accent) 30%, transparent); @@ -111,13 +111,13 @@ html { auto-hidden scrollbars styled by the --os-* variables below, so they never reserve layout space or shift the page when appearing. */ scrollbar-width: thin; - scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; + scrollbar-color: color-mix(var(--muted) 45%, transparent) transparent; } .os-scrollbar { --os-size: 0.5rem; - --os-thumb-bg: color-mix(in srgb, var(--muted) 45%, transparent); - --os-thumb-hover-bg: color-mix(in srgb, var(--muted) 65%, transparent); + --os-thumb-bg: color-mix(var(--muted) 45%, transparent); + --os-thumb-hover-bg: color-mix(var(--muted) 65%, transparent); --os-thumb-active-bg: var(--muted); --os-track-bg: transparent; --os-thumb-border-radius: 0.25rem; @@ -406,7 +406,7 @@ body.editing #sidebar { overflow-y: auto; padding: 1rem 1rem 1rem 1.25rem; border-radius: 0 0 0.5rem 0; - background: color-mix(in srgb, var(--bg) 75%, transparent); + background: color-mix(var(--bg) 75%, transparent); backdrop-filter: blur(0.5rem); } @@ -1020,7 +1020,7 @@ blockquote p + p { padding: 0.4rem 0.9rem; border-left: 0.25rem solid var(--admonition-color, var(--accent)); border-radius: 0 0.3rem 0.3rem 0; - background: color-mix(in srgb, var(--admonition-color, var(--accent)) 7%, transparent); + background: color-mix(var(--admonition-color, var(--accent)) 7%, transparent); } .admonition> :last-child, @@ -1110,7 +1110,7 @@ blockquote p + p { padding: 0.6rem 0.9rem; font-size: 0.9rem; color: var(--muted); - background: color-mix(in srgb, var(--accent) 6%, transparent); + background: color-mix(var(--accent) 6%, transparent); border-radius: 0.3rem; } @@ -1169,6 +1169,21 @@ code { font-size-adjust: ex-height var(--code-x-height); } +/* Inline code: a slight nudge toward the muted tone rather than a fixed + color, so code inside accent-colored headings keeps the heading's hue + and the distinction stays subtle everywhere. color-mix resolves against + the inherited color (currentColor in a color declaration refers to the + inherited value), shifting it 30% toward --muted. */ +code:not(pre code) { + padding-inline: 0.2em; + word-break: keep-all; + color: color-mix(currentColor 70%, var(--muted)); +} + +code:not(pre code):first-child { + padding-left: 0; +} + /* Click-to-copy button (added by pagerite.js) */ .copy { position: absolute; @@ -1213,18 +1228,18 @@ td { th { text-align: left; background: linear-gradient(180deg, - var(--table-head-a, color-mix(in srgb, var(--accent) 10%, var(--surface))), - var(--table-head-b, color-mix(in srgb, var(--accent) 18%, var(--surface)))); + var(--table-head-a, color-mix(var(--accent) 10%, var(--surface))), + var(--table-head-b, color-mix(var(--accent) 18%, var(--surface)))); } td { background: linear-gradient(160deg, - color-mix(in srgb, var(--table-tint, var(--accent)) 5%, transparent), + color-mix(var(--table-tint, var(--accent)) 5%, transparent), transparent 75%); } tbody tr+tr td { - border-top: 1px solid color-mix(in srgb, var(--table-tint, var(--accent)) 12%, transparent); + border-top: 1px solid color-mix(var(--table-tint, var(--accent)) 12%, transparent); } /* Definition lists are laid out as a lightweight two-column grid — terms diff --git a/frontend/src/assets/pygments.css b/frontend/src/assets/pygments.css index 04835df..f424c4e 100644 --- a/frontend/src/assets/pygments.css +++ b/frontend/src/assets/pygments.css @@ -25,12 +25,12 @@ pre code .cp { color: var(--code-comment); font-weight: bold; font-style: italic pre code .cpf { color: var(--code-comment); font-style: italic } /* Comment.PreprocFile */ pre code .c1 { color: var(--code-comment); font-style: italic } /* Comment.Single */ pre code .cs { color: var(--code-comment); font-weight: bold; font-style: italic } /* Comment.Special */ -pre code .gd { color: var(--code-error); background-color: color-mix(in oklab, var(--code-error) 25%, var(--code-bg)) } /* Generic.Deleted */ +pre code .gd { color: var(--code-error); background-color: color-mix(var(--code-error) 25%, var(--code-bg)) } /* Generic.Deleted */ pre code .ge { color: var(--code-text); font-style: italic } /* Generic.Emph */ pre code .ges { color: var(--code-text); font-weight: bold; font-style: italic } /* Generic.EmphStrong */ pre code .gr { color: var(--code-error) } /* Generic.Error */ pre code .gh { color: var(--code-builtin); font-weight: bold } /* Generic.Heading */ -pre code .gi { color: var(--code-added); background-color: color-mix(in oklab, var(--code-added) 25%, var(--code-bg)) } /* Generic.Inserted */ +pre code .gi { color: var(--code-added); background-color: color-mix(var(--code-added) 25%, var(--code-bg)) } /* Generic.Inserted */ pre code .go { color: var(--code-muted) } /* Generic.Output */ pre code .gp { color: var(--code-muted) } /* Generic.Prompt */ pre code .gs { color: var(--code-text); font-weight: bold } /* Generic.Strong */ diff --git a/pagerite/themes/corporate/theme.css b/pagerite/themes/corporate/theme.css index 1677de3..55d2b2d 100644 --- a/pagerite/themes/corporate/theme.css +++ b/pagerite/themes/corporate/theme.css @@ -112,7 +112,7 @@ article h3 { blockquote { border-left-color: var(--accent); - background: color-mix(in oklab, var(--accent) 6%, transparent); + background: color-mix(var(--accent) 6%, transparent); padding: 0.4rem 0.9rem; /* Keep the quoted text on the paragraph edge: the tinted box extends past it by its own border/padding, like code blocks. */ diff --git a/pagerite/themes/nitro/theme.css b/pagerite/themes/nitro/theme.css index 0a5f3c4..6916c33 100644 --- a/pagerite/themes/nitro/theme.css +++ b/pagerite/themes/nitro/theme.css @@ -187,7 +187,7 @@ article ul ul ul li::before { blockquote { border-left-color: var(--accent2); - background: color-mix(in oklab, var(--accent2) 6%, transparent); + background: color-mix(var(--accent2) 6%, transparent); padding: 0.25rem 0.75rem; /* Keep the quoted text on the paragraph edge: the tinted box extends past it by its own border/padding, like code blocks. */ diff --git a/pagerite/themes/summer/theme.css b/pagerite/themes/summer/theme.css index e0aa3f7..5616176 100644 --- a/pagerite/themes/summer/theme.css +++ b/pagerite/themes/summer/theme.css @@ -24,7 +24,7 @@ --sun: #ffe071; --line: #4f913b29; - --link: color-mix(in oklab, var(--text) 38%, var(--accent)); + --link: color-mix(var(--text) 38%, var(--accent)); --font-body: var(--font-cause); --font-heading: var(--font-new-rocker);