feat(code): refresh syntax theme, drop terminal titlebar, polish inline chip

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(),

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',
+    },
+  },
+});

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,15 +20,14 @@ const { reportPath } = Astro.props;
           report_path: ${reportPath}
           token: "\${MERGIFY_TOKEN}"`}
 	lang="yaml"
-	theme="slack-ochin"
 />
 <p>Key Points:</p>
 <ul>
 	<li>
 		The plugin runs in the <code>post-command</code> hook, so it uploads results <strong>after</strong> your tests finish, even if they fail.
 	</li>
 	<li>
-		<Code code={`report_path: ${reportPath}`} inline lang="yaml" theme="slack-ochin" />: Points to
+		<InlineCode code={`report_path: ${reportPath}`} inline lang="yaml" themes={inlineThemes} />: Points to
 		where your JUnit file is located. Make sure it matches the path you set in your test configuration.
 	</li>
 	<li>

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"
 />
 <Aside type="tip">
 	<p>

src/components/MergifyCIUploadStep.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;
@@ -16,23 +19,22 @@ const { reportPath } = Astro.props;
     report_path: ${reportPath}
     test_step_outcome: \${{ steps.tests.outcome }}`}
 	lang="yaml"
-	theme="slack-ochin"
 />
 <p>Key Points:</p>
 <ul>
 	<li>
-		<Code code={`if: success() || failure()`} inline lang="yaml" theme="slack-ochin" />: Runs the
+		<InlineCode code={`if: success() || failure()`} inline lang="yaml" themes={inlineThemes} />: Runs the
 		upload step even if tests fail, ensuring <strong>CI Insights</strong> has the full report.
 	</li>
 	<li>
-		<Code code={`report_path: ${reportPath}`} inline lang="yaml" theme="slack-ochin" />: Points to
+		<InlineCode code={`report_path: ${reportPath}`} inline lang="yaml" themes={inlineThemes} />: Points to
 		where your JUnit file is located. Make sure it matches the path you set in your CI job.
 	</li>
 	<li>
-		<Code code={`test_step_outcome: \${{ steps.tests.outcome }}`} inline lang="yaml" theme="slack-ochin" />:
+		<InlineCode code={`test_step_outcome: \${{ steps.tests.outcome }}`} inline lang="yaml" themes={inlineThemes} />:
 		Passes the test runner step's outcome so Mergify can detect silent failures where the runner
-		crashed but the JUnit report appears clean. Add an <Code code="id" inline lang="yaml" theme="slack-ochin" /> (such
-		as <Code code="tests" inline lang="yaml" theme="slack-ochin" />) to your test runner step and
-		update the <Code code="steps.<id>.outcome" inline lang="yaml" theme="slack-ochin" /> reference to match.
+		crashed but the JUnit report appears clean. Add an <InlineCode code="id" inline lang="yaml" themes={inlineThemes} /> (such
+		as <InlineCode code="tests" inline lang="yaml" themes={inlineThemes} />) to your test runner step and
+		update the <InlineCode code="steps.<id>.outcome" inline lang="yaml" themes={inlineThemes} /> reference to match.
 	</li>
 </ul>

src/components/MergifyCIUploadStepMatrix.astro

@@ -1,5 +1,5 @@
 ---
-import { Code } from 'astro:components';
+import { Code } from 'astro-expressive-code/components';
 
 import Aside from '~/components/Aside.astro';
 
@@ -23,7 +23,6 @@ const { reportPath } = Astro.props;
       matrix:
         version: [10, 12, 14]`}
 	lang="yaml"
-	theme="slack-ochin"
 />
 <p>Your upload step should look like:</p>
 <Code
@@ -36,7 +35,6 @@ const { reportPath } = Astro.props;
     report_path: ${reportPath}
     test_step_outcome: \${{ steps.tests.outcome }}`}
 	lang="yaml"
-	theme="slack-ochin"
 />
 <Aside type="tip">
 	<p>

src/components/MergifyCliUploadStep.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;
@@ -11,8 +14,8 @@ const { reportPath, testCommand = '<your test command>' } = Astro.props;
 
 <p>
 	Install the <a href="/cli">Mergify CLI</a> in your pipeline and export
-	<Code code={`MERGIFY_TOKEN`} inline lang="bash" theme="slack-ochin" />. Run
-	<Code code={`mergify ci junit-process`} inline lang="bash" theme="slack-ochin" /> after your tests:
+	<InlineCode code="MERGIFY_TOKEN" inline lang="bash" themes={inlineThemes} />. Run
+	<InlineCode code="mergify ci junit-process" inline lang="bash" themes={inlineThemes} /> after your tests:
 </p>
 
 <Code
@@ -24,22 +27,21 @@ mergify ci junit-process \\
   ${reportPath}
 exit $exit_code`}
 	lang="bash"
-	theme="slack-ochin"
 />
 
 <p>Key Points:</p>
 <ul>
 	<li>
-		<Code code={`MERGIFY_TOKEN`} inline lang="bash" theme="slack-ochin" />: Export this
+		<InlineCode code="MERGIFY_TOKEN" inline lang="bash" themes={inlineThemes} />: Export this
 		environment variable with your Mergify application key so <code>junit-process</code> can authenticate to the API.
 	</li>
 	<li>
-		<Code code={`--test-exit-code "$exit_code"`} inline lang="bash" theme="slack-ochin" />: Passes the test runner's exit
+		<InlineCode code={`--test-exit-code "$exit_code"`} inline lang="bash" themes={inlineThemes} />: Passes the test runner's exit
 		code so Mergify can detect silent failures where the runner crashed but the JUnit report appears clean.
 	</li>
 	<li>
 		On CI systems other than GitHub Actions, also pass
-		<Code code={`--tests-target-branch <branch>`} inline lang="bash" theme="slack-ochin" /> so the command knows which
+		<InlineCode code="--tests-target-branch <branch>" inline lang="bash" themes={inlineThemes} /> so the command knows which
 		branch to compare against for quarantine decisions.
 	</li>
 </ul>

src/styles/index.css

@@ -224,23 +224,20 @@ article > section iframe {
 a > code {
   position: relative;
   color: var(--theme-link);
-  text-underline-offset: var(--padding-block);
+  text-underline-offset: 0.2rem;
 }
 
 strong {
   font-weight: 600;
   color: inherit;
 }
 
-/* Supporting Content */
+/* Cross-cutting `code` properties. Inline-vs-block specifics live in
+   the more-specific selectors below (`pre > code`,
+   `:not(pre) > code:not([class*="language"])`). */
 code {
-  --border-radius: 3px;
-  --padding-block: 0.2rem;
   font-family: var(--font-mono);
   font-size: 0.85em;
-  background-color: var(--theme-code-inline-bg);
-  margin: calc(var(--padding-block) * -1) 0;
-  border-radius: var(--border-radius);
   word-break: break-word;
 }
 
@@ -830,13 +827,68 @@ pre {
   border-radius: 8px;
 }
 
+/* Expressive Code's terminal frame ships a macOS-style window titlebar
+   (three colored dots + empty space). We don't use titled terminal blocks,
+   so the bar is decorative chrome — hide it entirely. File frames keep
+   their tab bar (it carries the filename).
+
+   The header carries the top border + top corner radius of the frame;
+   with it hidden, restore both on the `<pre>` underneath so the code
+   block looks like a regular standalone card. !important because EC's
+   inline stylesheet competes for load order. */
+.expressive-code .frame.is-terminal .header {
+  display: none !important;
+}
+.expressive-code .frame.is-terminal pre {
+  border-top: var(--ec-brdWd) solid var(--ec-brdCol) !important;
+  border-top-left-radius: var(--ec-brdRad) !important;
+  border-top-right-radius: var(--ec-brdRad) !important;
+}
+/* Copy button position is offset assuming a header — reset to a
+   value that lines up with the code's own block padding now that
+   the terminal header is hidden. */
+.expressive-code .frame.is-terminal {
+  --button-spacing: 0.5rem !important;
+}
+/* Match the horizontal offset to the new vertical offset for the
+   terminal copy button so the button sits a consistent distance
+   from both edges. File/editor frames keep EC's default placement
+   (next to the tab bar). */
+.expressive-code .frame.is-terminal .copy {
+  inset-inline-end: 0.5rem !important;
+}
+
+/* EC's defaults give the copy button `align-self: flex-end` and the
+   feedback tooltip `align-self: center`, plus the tooltip is much
+   shorter than the 2.5rem button — so even when "centered" they
+   look misaligned. Force both to center and make the tooltip's
+   box match the button height with internally-centered text. */
+.expressive-code .frame .copy button,
+.expressive-code .frame .copy .feedback {
+  align-self: center !important;
+}
+.expressive-code .frame .copy .feedback {
+  height: 2.5rem !important;
+  display: inline-flex !important;
+  align-items: center !important;
+}
+
 /* Inline code */
 :not(pre) > code:not([class*="language"]) {
   background: var(--theme-code-inline-bg);
-  padding: 0.15rem 0.4rem;
+  border: 1px solid var(--theme-border);
+  padding: 0.1em 0.4em;
+  border-radius: 4px;
   font-size: 0.85em;
 }
 
+/* Shiki dual-theme switch for inline `<Code inline themes={...} />`.
+   Astro emits spans with inline style `color: var(--shiki-light);
+   --shiki-dark: #abc;`. In dark mode swap the active variable. */
+.theme-dark :not(pre) > code span[style*="--shiki-dark"] {
+  color: var(--shiki-dark) !important;
+}
+
 /* Heading rules for MDX-rendered content. Properties match the
    typography utilities in typography.css — keep in sync. */
 #main-content h1,