docs: migrate to @sentry/starlight-theme

Replace the 1900-line custom dark theme CSS and hand-rolled component
overrides with the shared @sentry/starlight-theme Starlight plugin.

Changes:
- Add @sentry/starlight-theme dependency and plugin to astro config
- Use monochromeCodeTheme for syntax highlighting (replaces github-dark)
- Bump @astrojs/starlight to ^0.39.2 (theme peer dep)
- Remove custom ThemeProvider, ThemeSelect, Header components
  (now provided by the shared theme)
- Remove CodeBlock, CommandBox (unused)
- Replace 1869-line custom.css with ~250-line cli.css containing only
  CLI-specific styles (splash page, feature sections, overscroll)
- Update font references in components to use CSS custom properties
- Update InstallSelector to use shared monochrome code theme
- Use theme design tokens (--ve-*) in PageTitle

Author: sentry-junior[bot]

docs/astro.config.mjs

@@ -1,5 +1,8 @@
 import starlight from "@astrojs/starlight";
 import sentry from "@sentry/astro";
+import sentryStarlightTheme, {
+  monochromeCodeTheme,
+} from "@sentry/starlight-theme";
 import { defineConfig } from "astro/config";
 
 // Allow base path override via environment variable for PR previews
@@ -10,6 +13,9 @@ export default defineConfig({
   base,
   markdown: {
     smartypants: false,
+    shikiConfig: {
+      theme: monochromeCodeTheme,
+    },
   },
   // Generate sourcemaps for Sentry. "hidden" produces .map files without
   // adding //# sourceMappingURL comments to the output (the debug IDs
@@ -52,28 +58,8 @@ export default defineConfig({
           href: "https://github.com/getsentry/cli",
         },
       ],
-      expressiveCode: {
-        themes: ["github-dark"],
-        styleOverrides: {
-          frames: {
-            frameBoxShadowCssValue: "none",
-            editorActiveTabIndicatorTopColor: "transparent",
-            editorActiveTabIndicatorBottomColor: "transparent",
-            editorTabBarBorderBottomColor: "transparent",
-            editorTabBarBackground: "transparent",
-            terminalTitlebarBorderBottomColor: "transparent",
-            terminalTitlebarBackground: "rgba(255, 255, 255, 0.03)",
-            terminalBackground: "#0a0a0f",
-          },
-          borderRadius: "12px",
-          borderColor: "rgba(255, 255, 255, 0.1)",
-          codeBackground: "#0a0a0f",
-        },
-      },
+      plugins: [sentryStarlightTheme()],
       components: {
-        ThemeProvider: "./src/components/ThemeProvider.astro",
-        Header: "./src/components/Header.astro",
-        ThemeSelect: "./src/components/ThemeSelect.astro",
         PageTitle: "./src/components/PageTitle.astro",
       },
       head: [
@@ -91,7 +77,7 @@ export default defineConfig({
                 const path = window.location.pathname;
                 // Works with both / (prod) and /pr-preview/pr-XX (preview)
                 return path === '/' || 
-                       /^\\/_preview\\/pr-(\\d+|main)\\/?$/.test(path);
+                       /^\\/\\_preview\\/pr-(\\d+|main)\\/?$/.test(path);
               }
               
               function checkAtBottom() {
@@ -245,7 +231,7 @@ export default defineConfig({
           ],
         },
       ],
-      customCss: ["./src/styles/custom.css"],
+      customCss: ["./src/styles/cli.css"],
     }),
   ],
 });

docs/package.json

@@ -8,9 +8,10 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.38.3",
+    "@astrojs/starlight": "^0.39.2",
     "@sentry/astro": "^10.38.0",
-    "astro": "^6.1.8",
+    "@sentry/starlight-theme": "^0.2.0",
+    "astro": "^6.3.5",
     "sharp": "^0.33.5",
     "shiki": "^3.21.0"
   }

docs/src/components/CodeBlock.astro

@@ -65,7 +65,7 @@ const { title = "Terminal" } = Astro.props;
 
   .feature-terminal-body {
     padding: 0 1.5rem 1.25rem;
-    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-family: var(--sl-font-mono);
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.85);
   }
@@ -108,7 +108,7 @@ const { title = "Terminal" } = Astro.props;
 
   /* Table box styles */
   .feature-terminal-body :global(.table-box) {
-    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-family: var(--sl-font-mono);
     font-size: 0.7rem;
     line-height: 1.5;
     margin: 0;