radiant-docs 0.1.47 → 0.1.48

package/template/src/components/user/CodeGroup.astro

@@ -4,11 +4,11 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 ---
 
 <div
-  class="rd-prose-block group/prose-code-group not-prose relative w-full max-w-full min-w-0 shadow-xs rounded-xl"
+  class="rd-prose-block group/prose-code-group not-prose relative w-full max-w-full min-w-0 rounded-xl"
   data-rd-code-group-root="true"
 >
   <div
-    class="relative z-10 overflow-visible rounded-t-xl border border-b-0 border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80"
+    class="relative z-10 overflow-visible rounded-t-xl bg-(--rd-code-header-surface)"
   >
     <div class="flex min-w-0 items-end justify-between gap-2">
       <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
@@ -19,18 +19,16 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           <div
             data-rd-code-group-pill
             aria-hidden="true"
-            class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-neutral-200 bg-white opacity-0 transition-[left,width,opacity] duration-200 ease-out dark:border-neutral-700/70 dark:bg-(--rd-code-surface)"
+            class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) opacity-0 transition-[left,width,opacity] duration-200 ease-out"
           >
           </div>
         </div>
       </div>
 
       <div
-        class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white dark:bg-(--rd-code-surface)"
+        class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-(--rd-code-surface) border-t-[0.5px] border-r-[0.5px] border-(--rd-code-tab-edge-border)"
       >
-        <div
-          class="absolute inset-x-0 -bottom-px h-px bg-white dark:bg-(--rd-code-surface)"
-        >
+        <div class="absolute inset-x-0 -bottom-px h-px bg-(--rd-code-surface)">
         </div>
         <CodeTabEdge
           className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180"
@@ -49,7 +47,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           />
           <Icon
             name="lucide:check"
-            class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none dark:text-green-400/90"
+            class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-800/70 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none dark:text-green-400/90"
             data-rd-copy-check
             aria-hidden="true"
           />
@@ -60,7 +58,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 
   <div
     data-rd-code-group-content
-    class="relative min-w-0 overflow-hidden transition-[height] duration-300 ease-in-out"
+    class="relative min-w-0 overflow-hidden transition-[height] duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)] bg-(--rd-code-surface) rounded-xl rounded-tr-none border-[0.5px] border-(--rd-code-tab-edge-border)"
   >
     <slot />
   </div>
@@ -93,7 +91,8 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
       const prefersReducedMotion =
         typeof window.matchMedia === "function" &&
         window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-      const TRANSITION_DURATION_MS = prefersReducedMotion ? 0 : 300;
+      const TRANSITION_DURATION_MS = prefersReducedMotion ? 0 : 360;
+      const TRANSITION_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
 
       let activeIndex = 0;
       let transitionTimeoutId = null;
@@ -139,7 +138,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 
         const tabButton = document.createElement("button");
         tabButton.type = "button";
-        tabButton.className = `relative inline-flex h-9 items-center border-0 bg-transparent px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer ${hasTabIcon ? "gap-2" : ""}`;
+        tabButton.className = `relative inline-flex h-9 items-center border-0 bg-transparent px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer ${hasTabIcon ? "gap-2" : ""}`;
         tabButton.setAttribute("aria-label", filename);
         tabButton.setAttribute("data-rd-code-group-tab", String(index));
 
@@ -205,12 +204,11 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
       const updateTabButtonStates = () => {
         tabs.forEach(({ tabButton, iconContainer }, index) => {
           const isActive = index === activeIndex;
-          tabButton.classList.toggle("text-foreground", isActive);
-          tabButton.classList.toggle("text-muted-foreground", !isActive);
-
+          tabButton.classList.toggle("text-neutral-500/80", !isActive);
+          tabButton.classList.toggle("dark:text-neutral-400/80", !isActive);
           if (!iconContainer) return;
-          iconContainer.classList.toggle("opacity-100", isActive);
           iconContainer.classList.toggle("opacity-80", !isActive);
+          iconContainer.classList.toggle("grayscale-100", !isActive);
         });
         syncPill();
       };
@@ -269,15 +267,31 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         activeItemResizeObserver.observe(activeItem);
       };
 
+      const setItemToTransitionPosition = (itemElement) => {
+        itemElement.style.position = "absolute";
+        itemElement.style.inset = "";
+        itemElement.style.top = "0";
+        itemElement.style.right = "0";
+        itemElement.style.bottom = "";
+        itemElement.style.left = "0";
+      };
+
       const setPanelsToRestState = () => {
         tabs.forEach(({ itemElement, panelElement, frameElement }, index) => {
           const isActive = index === activeIndex;
           itemElement.style.position = isActive ? "relative" : "absolute";
-          itemElement.style.inset = isActive ? "" : "0";
+          itemElement.style.inset = "";
+          itemElement.style.top = isActive ? "" : "0";
+          itemElement.style.right = isActive ? "" : "0";
+          itemElement.style.bottom = isActive ? "" : "0";
+          itemElement.style.left = isActive ? "" : "0";
           itemElement.style.opacity = isActive ? "1" : "0";
           itemElement.style.visibility = isActive ? "visible" : "hidden";
           itemElement.style.pointerEvents = isActive ? "auto" : "none";
           itemElement.style.zIndex = isActive ? "1" : "0";
+          itemElement.style.transform = "translateX(0)";
+          itemElement.style.animation = "none";
+          itemElement.style.willChange = "auto";
           panelElement.style.transform = "translateX(0)";
           panelElement.style.animation = "none";
           panelElement.style.willChange = "auto";
@@ -313,8 +327,6 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         const nextItem = nextTab?.itemElement;
         const previousPanel = previousTab?.panelElement;
         const nextPanel = nextTab?.panelElement;
-        const previousFrame = previousTab?.frameElement;
-        const nextFrame = nextTab?.frameElement;
         if (!previousItem || !nextItem || !previousPanel || !nextPanel) {
           normalizeToCurrentState();
           return;
@@ -331,37 +343,35 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           });
         }
 
-        previousItem.style.position = "absolute";
-        previousItem.style.inset = "0";
+        setItemToTransitionPosition(previousItem);
         previousItem.style.opacity = "1";
         previousItem.style.visibility = "visible";
         previousItem.style.pointerEvents = "none";
         previousItem.style.zIndex = "1";
+        previousItem.style.transform = "translateX(0)";
+        previousItem.style.willChange = "transform, opacity";
         previousPanel.style.transform = "translateX(0)";
-        previousPanel.style.willChange = "transform";
-        if (previousFrame) {
-          previousFrame.style.height = "100%";
-        }
-        previousPanel.style.animation =
+        previousPanel.style.animation = "none";
+        previousPanel.style.willChange = "auto";
+        previousItem.style.animation =
           direction === 1
-            ? `rd-code-group-slide-out-to-left ${TRANSITION_DURATION_MS}ms ease-in-out both`
-            : `rd-code-group-slide-out-to-right ${TRANSITION_DURATION_MS}ms ease-in-out both`;
+            ? `rd-code-group-slide-out-to-left ${TRANSITION_DURATION_MS}ms ${TRANSITION_EASING} both`
+            : `rd-code-group-slide-out-to-right ${TRANSITION_DURATION_MS}ms ${TRANSITION_EASING} both`;
 
-        nextItem.style.position = "absolute";
-        nextItem.style.inset = "0";
+        setItemToTransitionPosition(nextItem);
         nextItem.style.opacity = "1";
         nextItem.style.visibility = "visible";
         nextItem.style.pointerEvents = "auto";
         nextItem.style.zIndex = "2";
+        nextItem.style.transform = "translateX(0)";
+        nextItem.style.willChange = "transform, opacity";
         nextPanel.style.transform = "translateX(0)";
-        nextPanel.style.willChange = "transform";
-        if (nextFrame) {
-          nextFrame.style.height = "100%";
-        }
-        nextPanel.style.animation =
+        nextPanel.style.animation = "none";
+        nextPanel.style.willChange = "auto";
+        nextItem.style.animation =
           direction === 1
-            ? `rd-code-group-slide-in-from-right ${TRANSITION_DURATION_MS}ms ease-in-out both`
-            : `rd-code-group-slide-in-from-left ${TRANSITION_DURATION_MS}ms ease-in-out both`;
+            ? `rd-code-group-slide-in-from-right ${TRANSITION_DURATION_MS}ms ${TRANSITION_EASING} both`
+            : `rd-code-group-slide-in-from-left ${TRANSITION_DURATION_MS}ms ${TRANSITION_EASING} both`;
 
         transitionTimeoutId = window.setTimeout(() => {
           transitionTimeoutId = null;

package/template/src/lib/code/code-block.ts

@@ -7,6 +7,12 @@ import {
   type ThemedToken,
 } from "shiki";
 import { DEFAULT_FILE, getIconForFile } from "vscode-icons-js";
+import { getConfig } from "../validation";
+import {
+  DEFAULT_SHIKI_DARK_THEME,
+  DEFAULT_SHIKI_LIGHT_THEME,
+  type CodeSyntaxThemeByMode,
+} from "./shiki-theme-config";
 
 export const DEFAULT_CODE_BLOCK_LANGUAGE = "plaintext";
 
@@ -137,9 +143,8 @@ const CODE_BLOCK_LANGUAGE_ICON_FILE_BY_VALUE: Record<string, string> = {
   yaml: "file_type_yaml_official.svg",
 };
 
-const SHIKI_LIGHT_THEME = "github-light";
-const SHIKI_DARK_THEME = "github-dark";
-const SHIKI_THEMES = [SHIKI_LIGHT_THEME, SHIKI_DARK_THEME] as const;
+const SHIKI_LIGHT_LINE_HIGHLIGHT_FALLBACK = "#f6f8fa";
+const SHIKI_DARK_LINE_HIGHLIGHT_FALLBACK = "#2b3036";
 const BUNDLED_LANGUAGE_SET = new Set(Object.keys(bundledLanguages));
 const LANGUAGE_RUNTIME_DEPENDENCIES: Record<string, string[]> = {
   // MDX tokenization relies on TSX grammar injections for JSX-style tags.
@@ -159,6 +164,7 @@ let iconFileNameSetPromise: Promise<Set<string>> | null = null;
 let highlighterPromise:
   | Promise<Awaited<ReturnType<typeof getSingletonHighlighter>>>
   | null = null;
+let highlighterThemeKey = "";
 const loadedLanguageSet = new Set<string>([DEFAULT_CODE_BLOCK_LANGUAGE]);
 const languageLoadPromiseByName = new Map<string, Promise<void>>();
 
@@ -371,10 +377,30 @@ function namespaceSvgIds(svg: string, namespace: string): string {
   return namespacedSvg;
 }
 
-async function getHighlighter() {
-  if (!highlighterPromise) {
+async function getConfiguredCodeSyntaxThemes(): Promise<CodeSyntaxThemeByMode> {
+  const config = await getConfig();
+  const configuredSyntaxTheme = config.theme?.code?.syntaxTheme;
+
+  if (typeof configuredSyntaxTheme === "string") {
+    return {
+      light: configuredSyntaxTheme,
+      dark: configuredSyntaxTheme,
+    };
+  }
+
+  return {
+    light: configuredSyntaxTheme?.light ?? DEFAULT_SHIKI_LIGHT_THEME,
+    dark: configuredSyntaxTheme?.dark ?? DEFAULT_SHIKI_DARK_THEME,
+  };
+}
+
+async function getHighlighter(syntaxThemes: CodeSyntaxThemeByMode) {
+  const nextThemeKey = `${syntaxThemes.light}\u0000${syntaxThemes.dark}`;
+
+  if (!highlighterPromise || highlighterThemeKey !== nextThemeKey) {
+    highlighterThemeKey = nextThemeKey;
     highlighterPromise = getSingletonHighlighter({
-      themes: [...SHIKI_THEMES],
+      themes: Array.from(new Set([syntaxThemes.light, syntaxThemes.dark])),
       langs: [DEFAULT_CODE_BLOCK_LANGUAGE],
     });
   }
@@ -382,6 +408,40 @@ async function getHighlighter() {
   return highlighterPromise;
 }
 
+function getThemeColor(
+  highlighter: Awaited<ReturnType<typeof getSingletonHighlighter>>,
+  themeName: string,
+  colorName: string,
+  fallback: string,
+): string {
+  const colorValue = highlighter.getTheme(themeName)?.colors?.[colorName];
+  return typeof colorValue === "string" && colorValue.trim().length > 0
+    ? colorValue.trim()
+    : fallback;
+}
+
+function getCodeThemeColors(
+  highlighter: Awaited<ReturnType<typeof getSingletonHighlighter>>,
+  syntaxThemes: CodeSyntaxThemeByMode,
+): CodeThemeColors {
+  return {
+    lineHighlightBackground: {
+      light: getThemeColor(
+        highlighter,
+        syntaxThemes.light,
+        "editor.lineHighlightBackground",
+        SHIKI_LIGHT_LINE_HIGHLIGHT_FALLBACK,
+      ),
+      dark: getThemeColor(
+        highlighter,
+        syntaxThemes.dark,
+        "editor.lineHighlightBackground",
+        SHIKI_DARK_LINE_HIGHLIGHT_FALLBACK,
+      ),
+    },
+  };
+}
+
 function resolveLoadableLanguage(
   highlighter: Awaited<ReturnType<typeof getSingletonHighlighter>>,
   normalizedLanguage: string,
@@ -496,8 +556,11 @@ export async function getCodeLineTokens({
 }): Promise<{
   normalizedLanguage: string;
   lines: CodeLineToken[][];
+  themeColors: CodeThemeColors;
 }> {
-  const highlighter = await getHighlighter();
+  const syntaxThemes = await getConfiguredCodeSyntaxThemes();
+  const highlighter = await getHighlighter(syntaxThemes);
+  const themeColors = getCodeThemeColors(highlighter, syntaxThemes);
   const normalizedLanguage = normalizeCodeLanguageValue(language);
   const loadableLanguage = resolveLoadableLanguage(
     highlighter,
@@ -525,26 +588,41 @@ export async function getCodeLineTokens({
   }
 
   try {
-    const themedTokenLines = getThemedTokenLines(highlighter, code, targetLanguage);
+    const themedTokenLines = getThemedTokenLines(
+      highlighter,
+      code,
+      targetLanguage,
+      syntaxThemes,
+    );
 
     return {
       normalizedLanguage: targetLanguage,
       lines: mergeTokenLines(themedTokenLines.light, themedTokenLines.dark),
+      themeColors,
     };
   } catch {
     const themedTokenLines = getThemedTokenLines(
       highlighter,
       code,
       DEFAULT_CODE_BLOCK_LANGUAGE,
+      syntaxThemes,
     );
 
     return {
       normalizedLanguage: DEFAULT_CODE_BLOCK_LANGUAGE,
       lines: mergeTokenLines(themedTokenLines.light, themedTokenLines.dark),
+      themeColors,
     };
   }
 }
 
+export type CodeThemeColors = {
+  lineHighlightBackground: {
+    light: string;
+    dark: string;
+  };
+};
+
 export type CodeLineToken = {
   content: string;
   color?: string;
@@ -560,6 +638,7 @@ function getThemedTokenLines(
   highlighter: Awaited<ReturnType<typeof getSingletonHighlighter>>,
   code: string,
   lang: string,
+  syntaxThemes: CodeSyntaxThemeByMode,
 ): {
   light: ThemedToken[][];
   dark: ThemedToken[][];
@@ -567,11 +646,11 @@ function getThemedTokenLines(
   const shikiLanguage = lang as keyof typeof bundledLanguages;
   const lightTokenResult = highlighter.codeToTokens(code, {
     lang: shikiLanguage,
-    theme: SHIKI_LIGHT_THEME,
+    theme: syntaxThemes.light,
   });
   const darkTokenResult = highlighter.codeToTokens(code, {
     lang: shikiLanguage,
-    theme: SHIKI_DARK_THEME,
+    theme: syntaxThemes.dark,
   });
 
   return {

package/template/src/lib/code/shiki-theme-config.ts

@@ -0,0 +1,16 @@
+import { bundledThemes } from "shiki";
+
+export const DEFAULT_SHIKI_LIGHT_THEME = "github-light";
+export const DEFAULT_SHIKI_DARK_THEME = "github-dark";
+
+export type CodeSyntaxThemeByMode = {
+  light: string;
+  dark: string;
+};
+
+export const SHIKI_BUNDLED_THEME_NAMES = Object.keys(bundledThemes).sort();
+const SHIKI_BUNDLED_THEME_NAME_SET = new Set(SHIKI_BUNDLED_THEME_NAMES);
+
+export function isBundledShikiThemeName(value: string): boolean {
+  return SHIKI_BUNDLED_THEME_NAME_SET.has(value);
+}

package/template/src/lib/validation.ts

@@ -6,6 +6,12 @@ import { oas } from "@stoplight/spectral-rulesets";
 import { compile } from "@mdx-js/mdx";
 import yaml from "yaml";
 import { docsSchema } from "./frontmatter-schema";
+import {
+  DEFAULT_SHIKI_DARK_THEME,
+  DEFAULT_SHIKI_LIGHT_THEME,
+  SHIKI_BUNDLED_THEME_NAMES,
+  isBundledShikiThemeName,
+} from "./code/shiki-theme-config";
 
 // --- Configuration Constants ---
 const CWD = process.cwd();
@@ -226,10 +232,20 @@ export type CardTheme = {
   cover?: CardCoverTheme;
   button?: CardButtonTheme;
 };
+export type CodeSyntaxThemeConfig =
+  | string
+  | {
+      light?: string;
+      dark?: string;
+    };
+export type CodeTheme = {
+  syntaxTheme?: CodeSyntaxThemeConfig;
+};
 export type DocsTheme = {
   baseColor?: BaseColorOption | BaseColorByMode;
   themeColor?: string | ThemeColorByMode;
   card?: CardTheme;
+  code?: CodeTheme;
 };
 export type AssistantIcon = {
   src?: string;
@@ -1718,6 +1734,127 @@ function validateTheme(theme: DocsConfig["theme"]): void {
     }
   }
 
+  const normalizeShikiThemeName = (
+    value: unknown,
+    currentPath: Path,
+    label: string,
+  ): string => {
+    checkType(value, "string", currentPath, label);
+    if (typeof value !== "string") {
+      throwConfigError(`${label} must be a string.`, currentPath);
+    }
+
+    const normalizedThemeName = value.trim().toLowerCase();
+    if (normalizedThemeName.length === 0) {
+      throwConfigError(`${label} cannot be empty.`, currentPath);
+    }
+
+    if (!isBundledShikiThemeName(normalizedThemeName)) {
+      throwConfigError(
+        `${label} must be a bundled Shiki theme name. Supported themes include: ${SHIKI_BUNDLED_THEME_NAMES.join(", ")}.`,
+        currentPath,
+      );
+    }
+
+    return normalizedThemeName;
+  };
+
+  if (theme.code !== undefined) {
+    checkType(theme.code, "object", ["theme", "code"], "Theme code");
+    if (
+      typeof theme.code !== "object" ||
+      theme.code === null ||
+      Array.isArray(theme.code)
+    ) {
+      throwConfigError("Theme code must be an object.", ["theme", "code"]);
+    }
+
+    const codeTheme = theme.code as CodeTheme & Record<string, unknown>;
+    const allowedCodeKeys = new Set(["syntaxTheme"]);
+    for (const key of Object.keys(codeTheme)) {
+      if (!allowedCodeKeys.has(key)) {
+        throwConfigError(
+          "Theme code configuration only supports 'syntaxTheme'.",
+          ["theme", "code", key],
+        );
+      }
+    }
+
+    if (codeTheme.syntaxTheme !== undefined) {
+      if (typeof codeTheme.syntaxTheme === "string") {
+        const themeName = normalizeShikiThemeName(
+          codeTheme.syntaxTheme,
+          ["theme", "code", "syntaxTheme"],
+          "Theme code syntax theme",
+        );
+        codeTheme.syntaxTheme = {
+          light: themeName,
+          dark: themeName,
+        };
+      } else {
+        checkType(
+          codeTheme.syntaxTheme,
+          "object",
+          ["theme", "code", "syntaxTheme"],
+          "Theme code syntax theme",
+        );
+        if (
+          typeof codeTheme.syntaxTheme !== "object" ||
+          codeTheme.syntaxTheme === null ||
+          Array.isArray(codeTheme.syntaxTheme)
+        ) {
+          throwConfigError(
+            "Theme code syntax theme must be a string or an object with light/dark values.",
+            ["theme", "code", "syntaxTheme"],
+          );
+        }
+
+        const syntaxThemeByMode = codeTheme.syntaxTheme as Record<
+          string,
+          unknown
+        >;
+        const allowedSyntaxThemeKeys = new Set(["light", "dark"]);
+        for (const key of Object.keys(syntaxThemeByMode)) {
+          if (!allowedSyntaxThemeKeys.has(key)) {
+            throwConfigError(
+              "Theme code syntax theme object only supports 'light' and 'dark'.",
+              ["theme", "code", "syntaxTheme", key],
+            );
+          }
+        }
+
+        const light =
+          syntaxThemeByMode.light !== undefined
+            ? normalizeShikiThemeName(
+                syntaxThemeByMode.light,
+                ["theme", "code", "syntaxTheme", "light"],
+                "Theme code syntax theme light",
+              )
+            : undefined;
+        const dark =
+          syntaxThemeByMode.dark !== undefined
+            ? normalizeShikiThemeName(
+                syntaxThemeByMode.dark,
+                ["theme", "code", "syntaxTheme", "dark"],
+                "Theme code syntax theme dark",
+              )
+            : undefined;
+
+        if (!light && !dark) {
+          throwConfigError(
+            "Theme code syntax theme object must include 'light', 'dark', or both.",
+            ["theme", "code", "syntaxTheme"],
+          );
+        }
+
+        codeTheme.syntaxTheme = {
+          light: light ?? DEFAULT_SHIKI_LIGHT_THEME,
+          dark: dark ?? DEFAULT_SHIKI_DARK_THEME,
+        };
+      }
+    }
+  }
+
   if (theme.card !== undefined) {
     checkType(theme.card, "object", ["theme", "card"], "Theme card");
     if (

package/template/src/styles/global.css

@@ -55,9 +55,18 @@
   --border-light: var(--color-neutral-100);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
-  --rd-code-surface: #ffffff;
+  --rd-code-surface: color-mix(
+    in srgb,
+    var(--color-neutral-100) 60%,
+    var(--background) 40%
+  );
+  --rd-code-header-surface: var(--color-white);
   --rd-code-tab-edge-bg: var(--rd-code-surface);
-  --rd-code-tab-edge-border: var(--color-neutral-200);
+  --rd-code-tab-edge-border: color-mix(
+    in oklab,
+    var(--color-neutral-900) 4%,
+    var(--color-white) 96%
+  );
 }
 
 /* 3. Dark Mode */
@@ -85,8 +94,17 @@
     var(--color-neutral-800) 55%,
     var(--color-neutral-900) 45%
   );
+  --rd-code-header-surface: color-mix(
+    in srgb,
+    var(--color-neutral-900) 100%,
+    var(--rd-code-surface) 0%
+  );
   --rd-code-tab-edge-bg: var(--rd-code-surface);
-  --rd-code-tab-edge-border: var(--color-neutral-800);
+  --rd-code-tab-edge-border: color-mix(
+    in oklab,
+    white 4%,
+    var(--rd-code-tab-edge-bg) 96%
+  );
 }
 
 @variant dark (&:where(.dark, .dark *));
@@ -197,6 +215,16 @@
 }
 
 @layer base {
+  .prose-rules > :first-child {
+    margin-block-start: 0 !important;
+    margin-top: 0 !important;
+  }
+
+  .prose-rules > :last-child {
+    margin-block-end: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
   .prose-rules > .rd-prose-block:first-child,
   .prose-rules > .react-renderer:first-child > .rd-prose-block,
   .prose-rules > [data-node-view-content-react]:first-child > :first-child,
@@ -326,6 +354,26 @@
   background-color: var(--rd-token-bg, transparent);
 }
 
+[data-rd-code-block-root] {
+  --rd-code-line-highlight-bg: color-mix(
+    in srgb,
+    var(--rd-code-line-highlight-theme-bg-light) 90%,
+    var(--color-neutral-400) 10%
+  );
+}
+
+.dark [data-rd-code-block-root] {
+  --rd-code-line-highlight-bg: color-mix(
+    in srgb,
+    var(--rd-code-line-highlight-theme-bg-dark) 80%,
+    var(--color-neutral-700) 20%
+  );
+}
+
+[data-rd-code-line-highlighted="true"] {
+  background-color: var(--rd-code-line-highlight-bg);
+}
+
 .dark [data-rd-code-theme] [data-rd-token] {
   color: var(--rd-token-color-dark, var(--rd-token-color, currentColor));
   background-color: var(--rd-token-bg-dark, var(--rd-token-bg, transparent));