fix(ui): add a shared bg-surface-code token for the always-dark code surface

apps/loopover-ui/src/components/site/api/try-it.tsx

@@ -21,7 +21,7 @@
 const LEGACY_STORAGE_KEY = "gittensory.session_token";
 
 /** Reads the session token, falling back to (and migrating forward from) the pre-rebrand legacy key. */
 export function readStoredSessionToken(storage: Pick<Storage, "getItem" | "setItem">): string {
   const stored = storage.getItem(STORAGE_KEY);
   if (stored !== null) return stored;
   const legacy = storage.getItem(LEGACY_STORAGE_KEY);
@@ -250,7 +250,7 @@
             onChange={(e) => setBody(e.target.value)}
             rows={6}
             spellCheck={false}
-            className="w-full rounded-token border border-border bg-[oklch(0.13_0.005_260)] p-3 font-mono text-[12px] text-foreground focus:border-mint/40 focus:outline-none"
+            className="w-full rounded-token border border-border bg-surface-code p-3 font-mono text-[12px] text-foreground focus:border-mint/40 focus:outline-none"
           />
         </div>
       )}
@@ -338,7 +338,7 @@
               </span>
             </div>
           </div>
-          <pre className="scrollbar-none max-h-80 overflow-auto bg-[oklch(0.13_0.005_260)] p-3 font-mono text-[12px] leading-token-relaxed text-foreground/90">
+          <pre className="scrollbar-none max-h-80 overflow-auto bg-surface-code p-3 font-mono text-[12px] leading-token-relaxed text-foreground/90">
             <code>{result.body}</code>
           </pre>
         </div>

apps/loopover-ui/src/components/site/app-panels/maintainer-panel.tsx

@@ -855,7 +855,7 @@ export function PreviewResult({
             <StatusPill status="info">sanitized</StatusPill>
           </div>
         </div>
-        <pre className="max-h-[360px] overflow-auto whitespace-pre-wrap rounded-token border border-border bg-[oklch(0.13_0.005_260)] p-3 font-mono text-token-xs leading-token-relaxed text-foreground/90">
+        <pre className="max-h-[360px] overflow-auto whitespace-pre-wrap rounded-token border border-border bg-surface-code p-3 font-mono text-token-xs leading-token-relaxed text-foreground/90">
           {preview.previewComment ?? "No public comment would be posted for this scenario."}
         </pre>
       </div>

apps/loopover-ui/src/components/site/control-primitives.tsx

@@ -120,7 +120,7 @@ export function DiffBlock({
   return (
     <div
       className={cn(
-        "overflow-hidden rounded-token border border-border bg-[oklch(0.13_0.005_260)] font-mono text-[12px]",
+        "overflow-hidden rounded-token border border-border bg-surface-code font-mono text-[12px]",
         className,
       )}
     >

apps/loopover-ui/src/components/site/surface-code-token.test.ts

@@ -0,0 +1,39 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+// #6820: `bg-[oklch(0.13_0.005_260)]` (the always-dark code-surface color) was copy-pasted across
+// 4 call sites in 3 unrelated files with no shared token. These lock in the `bg-surface-code`
+// utility (backed by `--surface-code` in theme.css) as the one place that color is now defined.
+const THEME_CSS_PATH = "../../packages/loopover-ui-kit/src/theme.css";
+const CALL_SITES = [
+  "src/components/site/control-primitives.tsx",
+  "src/components/site/app-panels/maintainer-panel.tsx",
+  "src/components/site/api/try-it.tsx",
+];
+
+describe("surface-code design token (#6820)", () => {
+  it("defines --surface-code once and maps it through @theme inline", () => {
+    const css = readFileSync(THEME_CSS_PATH, "utf8");
+    expect(css).toContain("--surface-code: oklch(0.13 0.005 260);");
+    expect(css).toContain("--color-surface-code: var(--surface-code);");
+  });
+
+  it("is not redefined inside the .dark block, so it renders identically in both themes", () => {
+    const css = readFileSync(THEME_CSS_PATH, "utf8");
+    const darkBlockStart = css.indexOf(".dark {");
+    const darkBlockEnd = css.indexOf("\n}", darkBlockStart);
+    const darkBlock = css.slice(darkBlockStart, darkBlockEnd);
+    expect(darkBlockStart).toBeGreaterThan(-1);
+    expect(darkBlock).not.toContain("--surface-code");
+  });
+
+  it.each(CALL_SITES)(
+    "uses the shared bg-surface-code utility, not a raw literal, in %s",
+    (path) => {
+      const source = readFileSync(path, "utf8");
+      expect(source).toContain("bg-surface-code");
+      expect(source).not.toContain("oklch(0.13_0.005_260)");
+      expect(source).not.toContain("oklch(0.13 0.005 260)");
+    },
+  );
+});

packages/loopover-ui-kit/src/theme.css

@@ -89,6 +89,7 @@
   --color-sidebar-ring: var(--sidebar-ring);
   --color-surface: var(--surface);
   --color-surface-2: var(--surface-2);
+  --color-surface-code: var(--surface-code);
   --color-mint: var(--mint);
   --color-mint-soft: var(--mint-soft);
   --color-aurora: var(--aurora);
@@ -111,6 +112,9 @@
   --background: oklch(0.985 0.004 110);
   --surface: oklch(0.972 0.005 110);
   --surface-2: oklch(0.955 0.006 110);
+  /* Always-dark code surface (terminal/diff/try-it blocks) — intentionally not redefined in .dark,
+     so it renders identically in both themes instead of drifting with --surface. */
+  --surface-code: oklch(0.13 0.005 260);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.18 0.01 110);
   --popover: oklch(1 0 0);