From 8d31163c008607eaff0a224d491b64018f1e556e Mon Sep 17 00:00:00 2001 From: Aaron Powell Date: Mon, 17 Aug 2026 11:47:52 +1000 Subject: [PATCH] fix(website): align raw markdown code blocks with prototype styling Astro's default Shiki config bakes in the fixed 'github-dark' theme's literal colors, ignoring the site's actual light/dark mode - this made plain markdown-fenced code blocks (as opposed to the prototype's own SyntaxHighlightedCode component) always render a hardcoded dark box regardless of theme. Switch shikiConfig to the 'css-variables' theme so highlighted tokens resolve through --astro-code-* custom properties instead, then map those to the same brand color tokens the prototype's codeBlock uses (canvas-subtle background, border-muted border, brand text/link/accent colors for tokens). Raw markdown code blocks now match the prototype's bordered, canvas-subtle surface in both color modes. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 80686fef-efe3-4cdd-8cd6-bfa61a5d0af6 --- website/astro.config.mjs | 13 +++++++ .../brand/styles/dotnet-upgrade.module.css | 36 +++++++++++++++++++ .../styles/github-copilot-app.module.css | 36 +++++++++++++++++++ 3 files changed, 85 insertions(+) diff --git a/website/astro.config.mjs b/website/astro.config.mjs index ec887a43..d237fc1b 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -27,6 +27,19 @@ export default defineConfig({ remarkPlugins: [ [remarkGithubAdmonitionsToDirectives, { mapping: githubAdmonitionMapping }], ], + // The prototype's own code blocks (SyntaxHighlightedCode.tsx) are styled + // entirely through brand CSS tokens rather than baked-in theme colours, so + // they automatically match the site's light/dark mode. Raw markdown code + // fences render through Shiki instead, which by default bakes a fixed + // "github-dark" theme's literal colours into inline styles — that ignores + // the site's actual colour mode and clashes with the prototype's bordered, + // canvas-subtle code block styling. The "css-variables" theme emits + // `var(--astro-code-*)` custom properties instead of literal colours, + // which are mapped to the same brand tokens in + // src/components/brand/styles/{dotnet-upgrade,github-copilot-app}.module.css. + shikiConfig: { + theme: "css-variables", + }, }, // English is served at the site root (no locale prefix), preserving all // existing URLs. Additional locales are served under a locale prefix diff --git a/website/src/components/brand/styles/dotnet-upgrade.module.css b/website/src/components/brand/styles/dotnet-upgrade.module.css index 9b406f2e..b7075867 100644 --- a/website/src/components/brand/styles/dotnet-upgrade.module.css +++ b/website/src/components/brand/styles/dotnet-upgrade.module.css @@ -549,6 +549,42 @@ color: var(--brand-color-text-link-pressed); } +/* Raw markdown fenced code blocks render through Shiki's "css-variables" + theme (see astro.config.mjs), which emits `--astro-code-*` custom + properties instead of baking in a fixed theme's literal colours. Map those + to the same brand tokens the prototype's SyntaxHighlightedCode component + uses, and match its bordered, canvas-subtle surface so both code paths look + identical in both colour modes. */ +.articleSection :global(pre.astro-code) { + --astro-code-foreground: var(--brand-color-text-default); + --astro-code-background: var(--brand-color-canvas-subtle); + --astro-code-token-constant: var(--brand-color-accent-primary); + --astro-code-token-string: var(--brand-color-accent-primary); + --astro-code-token-comment: var(--brand-color-text-muted); + --astro-code-token-keyword: var(--brand-color-text-link-rest); + --astro-code-token-parameter: var(--brand-color-text-default); + --astro-code-token-function: var(--brand-color-text-default); + --astro-code-token-string-expression: var(--brand-color-accent-primary); + --astro-code-token-punctuation: var(--brand-color-text-default); + --astro-code-token-link: var(--brand-color-text-link-rest); + margin: 0; + padding: var(--base-size-20); + overflow-x: auto; + border-radius: var(--brand-borderRadius-medium); + border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted); + background-color: var(--brand-color-canvas-subtle); + color: var(--brand-color-text-default); + font-family: var(--brand-fontStack-monospace); + font-size: var(--brand-text-size-100); + line-height: var(--brand-text-lineHeight-400); + tab-size: 2; +} + +.articleSection :global(pre.astro-code):focus-visible { + outline: var(--base-size-2) solid var(--brand-color-accent-primary); + outline-offset: calc(-1 * var(--base-size-2)); +} + .articleHeading { margin: 0; /* Two medium gaps separate the title from the text below, while the diff --git a/website/src/components/brand/styles/github-copilot-app.module.css b/website/src/components/brand/styles/github-copilot-app.module.css index 8f73bf82..bfcb5321 100644 --- a/website/src/components/brand/styles/github-copilot-app.module.css +++ b/website/src/components/brand/styles/github-copilot-app.module.css @@ -971,6 +971,42 @@ color: var(--brand-color-text-link-pressed); } +/* Raw markdown fenced code blocks render through Shiki's "css-variables" + theme (see astro.config.mjs), which emits `--astro-code-*` custom + properties instead of baking in a fixed theme's literal colours. Map those + to the same brand tokens the prototype's SyntaxHighlightedCode component + uses (see .codeBlock below), so both code paths look identical in both + colour modes. */ +.articleSection :global(pre.astro-code) { + --astro-code-foreground: var(--brand-color-text-default); + --astro-code-background: var(--brand-color-canvas-subtle); + --astro-code-token-constant: var(--brand-color-accent-primary); + --astro-code-token-string: var(--brand-color-accent-primary); + --astro-code-token-comment: var(--brand-color-text-muted); + --astro-code-token-keyword: var(--brand-color-text-link-rest); + --astro-code-token-parameter: var(--brand-color-text-default); + --astro-code-token-function: var(--brand-color-text-default); + --astro-code-token-string-expression: var(--brand-color-accent-primary); + --astro-code-token-punctuation: var(--brand-color-text-default); + --astro-code-token-link: var(--brand-color-text-link-rest); + margin: 0; + padding: var(--base-size-20); + overflow-x: auto; + border-radius: var(--brand-borderRadius-medium); + border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted); + background-color: var(--brand-color-canvas-subtle); + color: var(--brand-color-text-default); + font-family: var(--brand-fontStack-monospace); + font-size: var(--brand-text-size-100); + line-height: var(--brand-text-lineHeight-400); + tab-size: 2; +} + +.articleSection :global(pre.astro-code):focus-visible { + outline: var(--base-size-2) solid var(--brand-color-accent-primary); + outline-offset: calc(-1 * var(--base-size-2)); +} + .articleHeading { margin: 0; margin-block-end: var(--base-size-16);