radiant-docs 0.1.47 → 0.1.49

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,20 @@
   --border-light: var(--color-neutral-100);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
-  --rd-code-surface: #ffffff;
+  --rd-panel-transition-duration-ms: 400;
+  --rd-panel-transition-duration: 400ms;
+  --rd-panel-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
+  --rd-code-surface: color-mix(
+    in srgb,
+    var(--color-neutral-100) 60%,
+    var(--background) 40%
+  );
   --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 */
@@ -86,7 +97,11 @@
     var(--color-neutral-900) 45%
   );
   --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 +212,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 +351,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));