From 467c2a8866344847f8d9b501482ad03127b800b9 Mon Sep 17 00:00:00 2001 From: Matteo Pietro Dazzi Date: Fri, 21 Aug 2026 10:58:29 +0200 Subject: [PATCH 1/4] fix: theme-aware copy button on code blocks Replaced hardcoded dark colors on .docs-copy-btn with theme-aware CSS variables so the button blends with the page in light mode. Closes #492 --- src/styles/prose.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/styles/prose.css b/src/styles/prose.css index f9351b64..e8d99d00 100644 --- a/src/styles/prose.css +++ b/src/styles/prose.css @@ -182,9 +182,9 @@ justify-content: center; padding: 0.375rem; border-radius: 0.375rem; - color: #8b95a1; - background: rgba(12, 15, 19, 0.6); - border: 1px solid rgba(255, 255, 255, 0.08); + color: var(--muted); + background: color-mix(in srgb, var(--surface) 80%, transparent); + border: 1px solid var(--border); transition: color 0.15s, background 0.15s, @@ -192,9 +192,9 @@ cursor: pointer; } .docs-copy-btn:hover { - color: #fff; - background: rgba(12, 15, 19, 0.85); - border-color: rgba(255, 255, 255, 0.15); + color: var(--fg); + background: color-mix(in srgb, var(--surface) 95%, transparent); + border-color: var(--border-strong); } .docs-copy-btn:focus-visible { outline: 2px solid var(--amber); From 511e3f49e13f19626831a01e627e2da2139faa83 Mon Sep 17 00:00:00 2001 From: Matteo Pietro Dazzi Date: Fri, 21 Aug 2026 11:58:10 +0200 Subject: [PATCH 2/4] fix: strip border and background from copy button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Per design feedback, the copy button needs no chrome — just an icon that tints on hover. Removes the hardcoded dark surface tint, which also fixes the same light-mode complaint without needing theme vars. Closes #492 --- src/styles/prose.css | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/styles/prose.css b/src/styles/prose.css index e8d99d00..4350a244 100644 --- a/src/styles/prose.css +++ b/src/styles/prose.css @@ -183,18 +183,11 @@ padding: 0.375rem; border-radius: 0.375rem; color: var(--muted); - background: color-mix(in srgb, var(--surface) 80%, transparent); - border: 1px solid var(--border); - transition: - color 0.15s, - background 0.15s, - border-color 0.15s; + transition: color 0.15s; cursor: pointer; } .docs-copy-btn:hover { color: var(--fg); - background: color-mix(in srgb, var(--surface) 95%, transparent); - border-color: var(--border-strong); } .docs-copy-btn:focus-visible { outline: 2px solid var(--amber); From 7418446c4986dd2102dffdb4642a0be865c9face Mon Sep 17 00:00:00 2001 From: Matteo Pietro Dazzi Date: Fri, 21 Aug 2026 12:06:41 +0200 Subject: [PATCH 3/4] chore: fix cursor --- src/components/CopyButton.astro | 2 +- src/components/InstallCommand.astro | 2 +- src/styles/prose.css | 33 ++++++++++++++++++++++++++--- 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/src/components/CopyButton.astro b/src/components/CopyButton.astro index ab393d65..2dfa78a5 100644 --- a/src/components/CopyButton.astro +++ b/src/components/CopyButton.astro @@ -32,7 +32,7 @@ const { data-copied-label={copiedLabel} aria-label={ariaLabel} class:list={[ - "inline-flex items-center gap-1.5 rounded-md transition-colors", + "inline-flex items-center gap-1.5 rounded-md transition-colors cursor-pointer", className, ]} > diff --git a/src/components/InstallCommand.astro b/src/components/InstallCommand.astro index 00599834..e1377ab2 100644 --- a/src/components/InstallCommand.astro +++ b/src/components/InstallCommand.astro @@ -13,6 +13,6 @@ const { command = "npm install fastify" } = Astro.props; text={command} variant="icon-swap" ariaLabel="Copy install command" - class="ml-2 rounded-md border border-white/10 p-1.5 text-[#8b95a1] hover:text-white" + class="p-1.5 text-[#8b95a1] hover:text-white" /> diff --git a/src/styles/prose.css b/src/styles/prose.css index 4350a244..535a699f 100644 --- a/src/styles/prose.css +++ b/src/styles/prose.css @@ -7,9 +7,11 @@ line-height: 1.75; max-width: none; } -.prose-fastify > :first-child { + +.prose-fastify> :first-child { margin-top: 0; } + .prose-fastify h1 { font-family: var(--font-display); font-size: 2.25rem; @@ -19,6 +21,7 @@ margin: 0 0 1rem; scroll-margin-top: 6rem; } + .prose-fastify h2 { font-family: var(--font-display); font-size: 1.5rem; @@ -29,6 +32,7 @@ border-top: 1px solid var(--border); scroll-margin-top: 6rem; } + .prose-fastify h3 { font-family: var(--font-display); font-size: 1.2rem; @@ -37,34 +41,42 @@ margin: 2rem 0 0.75rem; scroll-margin-top: 6rem; } + .prose-fastify p { margin: 1rem 0; } + .prose-fastify a { color: var(--amber-ink); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; } + .prose-fastify a:hover { text-decoration-color: var(--amber); } + .prose-fastify strong { color: var(--fg); font-weight: 600; } + .prose-fastify ul, .prose-fastify ol { margin: 1rem 0; padding-left: 1.4rem; } + .prose-fastify li { margin: 0.4rem 0; } + .prose-fastify ul li { list-style: none; position: relative; } + .prose-fastify ul li::before { content: ""; position: absolute; @@ -76,6 +88,7 @@ background: var(--amber); transform: rotate(45deg); } + .prose-fastify code { font-family: var(--font-mono); font-size: 0.85em; @@ -84,6 +97,7 @@ padding: 0.15em 0.4em; border-radius: 4px; } + .prose-fastify pre { background: #0c0f13; border: 1px solid var(--border); @@ -94,12 +108,14 @@ font-size: 0.875rem; line-height: 1.6; } + .prose-fastify pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; } + .prose-fastify blockquote { border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--surface) 50%, transparent); @@ -108,6 +124,7 @@ color: var(--muted); font-style: italic; } + .prose-fastify table { display: block; width: 100%; @@ -116,15 +133,18 @@ margin: 1.5rem 0; font-size: 0.9rem; } + .prose-fastify th, .prose-fastify td { border: 1px solid var(--border); padding: 0.6rem 0.9rem; text-align: left; } + .prose-fastify table td a { white-space: nowrap; } + .prose-fastify th { background: var(--surface-2); color: var(--fg); @@ -133,6 +153,7 @@ text-transform: uppercase; letter-spacing: 0.05em; } + .prose-fastify hr { border: none; border-top: 1px solid var(--border); @@ -159,6 +180,7 @@ /* biome-ignore lint/complexity/noImportantStyles: override Shiki inline styles */ background: transparent !important; } + [data-theme="light"] [data-codetabs] .astro-code { /* biome-ignore lint/complexity/noImportantStyles: override Shiki inline styles */ background: var(--shiki-light-bg) !important; @@ -169,9 +191,11 @@ position: relative; margin: 1.5rem 0; } + .prose-fastify .docs-pre-wrap pre { margin: 0; } + .docs-copy-btn { position: absolute; top: 0.5rem; @@ -184,19 +208,22 @@ border-radius: 0.375rem; color: var(--muted); transition: color 0.15s; - cursor: pointer; } + .docs-copy-btn:hover { color: var(--fg); } + .docs-copy-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } + .docs-copy-btn [data-copy-done] { color: var(--amber); } + .docs-pre-wrap[data-code-lines="single"] .docs-copy-btn { top: 50%; transform: translateY(-50%); -} +} \ No newline at end of file From 97d5ae018ba236f6df8583f6d0f94f4ad795bcd5 Mon Sep 17 00:00:00 2001 From: Matteo Pietro Dazzi Date: Fri, 21 Aug 2026 12:07:16 +0200 Subject: [PATCH 4/4] fix: format --- src/styles/prose.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/prose.css b/src/styles/prose.css index 535a699f..8b903fda 100644 --- a/src/styles/prose.css +++ b/src/styles/prose.css @@ -8,7 +8,7 @@ max-width: none; } -.prose-fastify> :first-child { +.prose-fastify > :first-child { margin-top: 0; } @@ -226,4 +226,4 @@ .docs-pre-wrap[data-code-lines="single"] .docs-copy-btn { top: 50%; transform: translateY(-50%); -} \ No newline at end of file +}