From c16d71b07e62268e5beeea51b6d8ac4c3167b5e7 Mon Sep 17 00:00:00 2001 From: Julien Danjou Date: Wed, 20 May 2026 15:55:56 +0200 Subject: [PATCH] feat(code): refresh syntax theme, drop terminal titlebar, polish inline chip MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Switch Expressive Code themes: slack-ochin / slack-dark → github-light / github-dark — calmer, more familiar palette for developer readers - Hide the macOS-style window titlebar on terminal frames (we never use titled terminal blocks; the bar was decorative chrome). Restore the top border and corner radius on the bare 
 underneath so the
  block remains a clean rounded card
- Nudge the copy button position to align with the code's own padding
  now that the terminal header is gone
- Inline `` gets the Pass-A chip treatment: --theme-code-inline-bg
  fill, 1px --theme-border outline, 4px radius, 0.1em x 0.4em padding —
  replacing the flat-gray bg with no padding
- Components rendering inline code via Astro's `` now
  use dual themes (github-light / github-dark) and a `.theme-dark`
  CSS rule swaps the active shiki variable. Block code in those
  components uses Expressive Code's `` so it matches markdown
  blocks
- Move the Expressive Code config out of astro.config.ts into a new
  ec.config.mjs (required for EC's runtime `` component because
  the `themeCssSelector` function isn't JSON-serializable)

Co-Authored-By: Claude Opus 4.7 
Change-Id: I672ba86013bd3936026725c8910dd211b6208816
---
 astro.config.ts                               | 35 +---------
 ec.config.mjs                                 | 41 +++++++++++
 src/components/BuildkiteCIUploadStep.astro    |  8 ++-
 .../BuildkiteCIUploadStepMatrix.astro         |  3 +-
 src/components/MergifyCIUploadStep.astro      | 18 ++---
 .../MergifyCIUploadStepMatrix.astro           |  4 +-
 src/components/MergifyCliUploadStep.astro     | 16 +++--
 src/styles/index.css                          | 68 ++++++++++++++++---
 8 files changed, 128 insertions(+), 65 deletions(-)
 create mode 100644 ec.config.mjs

diff --git a/astro.config.ts b/astro.config.ts
index 7096ad6d99..5a38570049 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -37,40 +37,7 @@ export default defineConfig({
     }),
     astroAsides(),
     astroYoutubeEmbeds(),
-    astroExpressiveCode({
-      themes: ['slack-ochin', 'slack-dark'],
-      themeCssSelector: (theme) => {
-        if (theme.name === 'slack-ochin') return ':root:not(.theme-dark)';
-        if (theme.name === 'slack-dark') return ':root.theme-dark';
-        return `[data-theme='${theme.name}']`;
-      },
-      styleOverrides: {
-        borderColor: 'var(--theme-border)',
-        borderRadius: '0.5rem',
-        borderWidth: '1px',
-        codePaddingBlock: '1rem',
-        codePaddingInline: '1.25rem',
-        codeFontFamily: 'var(--font-mono)',
-        codeFontSize: '0.85rem',
-        codeLineHeight: '1.7',
-        uiFontFamily: 'var(--font-body)',
-        uiFontSize: '0.8rem',
-        focusBorder: 'var(--theme-link)',
-        frames: {
-          frameBoxShadowCssValue: 'none',
-          editorTabBarBorderBottomColor: 'var(--theme-divider)',
-          editorActiveTabIndicatorBottomColor: 'var(--theme-link)',
-          editorActiveTabIndicatorTopColor: 'transparent',
-          terminalTitlebarBorderBottomColor: 'var(--theme-divider)',
-          tooltipSuccessBackground: 'var(--theme-link)',
-          tooltipSuccessForeground: '#fff',
-          inlineButtonBorder: 'var(--theme-divider)',
-          inlineButtonForeground: 'var(--theme-text-muted)',
-          inlineButtonBackgroundIdleOpacity: '0',
-          inlineButtonBackgroundHoverOrFocusOpacity: '0.08',
-        },
-      },
-    }),
+    astroExpressiveCode(),
     mdx(),
     react(),
     vue(),
diff --git a/ec.config.mjs b/ec.config.mjs
new file mode 100644
index 0000000000..7c0112c2e9
--- /dev/null
+++ b/ec.config.mjs
@@ -0,0 +1,41 @@
+import { defineEcConfig } from 'astro-expressive-code';
+
+export default defineEcConfig({
+  themes: ['github-light', 'github-dark'],
+  themeCssSelector: (theme) => {
+    if (theme.name === 'github-light') return ':root:not(.theme-dark)';
+    if (theme.name === 'github-dark') return ':root.theme-dark';
+    return `[data-theme='${theme.name}']`;
+  },
+  styleOverrides: {
+    borderColor: 'var(--theme-border)',
+    borderRadius: '0.5rem',
+    borderWidth: '1px',
+    codePaddingBlock: '1rem',
+    codePaddingInline: '1.25rem',
+    codeFontFamily: 'var(--font-mono)',
+    codeFontSize: '0.85rem',
+    codeLineHeight: '1.7',
+    uiFontFamily: 'var(--font-body)',
+    uiFontSize: '0.8rem',
+    focusBorder: 'var(--theme-link)',
+    frames: {
+      frameBoxShadowCssValue: 'none',
+      editorTabBarBorderBottomColor: 'var(--theme-divider)',
+      editorActiveTabIndicatorBottomColor: 'var(--theme-link)',
+      editorActiveTabIndicatorTopColor: 'transparent',
+      editorTabBarBackground: 'var(--theme-bg-offset)',
+      editorActiveTabBackground: 'var(--theme-bg-content)',
+      terminalTitlebarBackground: 'var(--theme-bg-offset)',
+      terminalTitlebarBorderBottomColor: 'var(--theme-divider)',
+      terminalTitlebarForeground: 'var(--theme-text-muted)',
+      terminalTitlebarDotsForeground: 'transparent',
+      tooltipSuccessBackground: 'var(--theme-text)',
+      tooltipSuccessForeground: 'var(--theme-bg-content)',
+      inlineButtonBorder: 'var(--theme-divider)',
+      inlineButtonForeground: 'var(--theme-text-muted)',
+      inlineButtonBackgroundIdleOpacity: '0',
+      inlineButtonBackgroundHoverOrFocusOpacity: '0.08',
+    },
+  },
+});
diff --git a/src/components/BuildkiteCIUploadStep.astro b/src/components/BuildkiteCIUploadStep.astro
index 4bd89b35ef..34f261b267 100644
--- a/src/components/BuildkiteCIUploadStep.astro
+++ b/src/components/BuildkiteCIUploadStep.astro
@@ -1,5 +1,8 @@
 ---
-import { Code } from 'astro:components';
+import { Code as InlineCode } from 'astro:components';
+import { Code } from 'astro-expressive-code/components';
+
+const inlineThemes = { light: 'github-light', dark: 'github-dark' } as const;
 
 export interface Props {
   reportPath: string;
@@ -17,7 +20,6 @@ const { reportPath } = Astro.props;
           report_path: ${reportPath}
           token: "\${MERGIFY_TOKEN}"`}
 	lang="yaml"
-	theme="slack-ochin"
 />
 
Key Points:

 
    
@@ -25,7 +27,7 @@ const { reportPath } = Astro.props;
 		The plugin runs in the post-command hook, so it uploads results after your tests finish, even if they fail.
 	
 	
  • 
-		: Points to
+		: Points to
 		where your JUnit file is located. Make sure it matches the path you set in your test configuration.
 	
    • 
 	
  • 
diff --git a/src/components/BuildkiteCIUploadStepMatrix.astro b/src/components/BuildkiteCIUploadStepMatrix.astro
index cb3f44ed74..724de1dd7f 100644
--- a/src/components/BuildkiteCIUploadStepMatrix.astro
+++ b/src/components/BuildkiteCIUploadStepMatrix.astro
@@ -1,5 +1,5 @@
 ---
-import { Code } from 'astro:components';
+import { Code } from 'astro-expressive-code/components';
 
 import Aside from '~/components/Aside.astro';
 
@@ -28,7 +28,6 @@ const { reportPath } = Astro.props;
           report_path: ${reportPath}
           token: "\${MERGIFY_TOKEN}"`}
 	lang="yaml"
-	theme="slack-ochin"
 />