@barodoc/theme-docs 3.0.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barodoc/theme-docs",
-  "version": "3.0.0",
+  "version": "6.0.0",
   "description": "Documentation theme for Barodoc",
   "type": "module",
   "exports": {
@@ -28,9 +28,13 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
+    "medium-zoom": "^1.1.0",
     "mermaid": "^11.12.2",
+    "reading-time": "^1.5.0",
+    "rehype-katex": "^7.0.1",
+    "remark-math": "^6.0.0",
     "tailwind-merge": "^3.4.0",
-    "@barodoc/core": "3.0.0"
+    "@barodoc/core": "6.0.0"
   },
   "peerDependencies": {
     "astro": "^5.0.0",

package/src/components/Breadcrumb.astro

@@ -11,20 +11,20 @@ interface Props {
 const { items } = Astro.props;
 ---
 
-<nav aria-label="Breadcrumb" class="mb-3">
-  <ol class="flex flex-wrap items-center gap-1 text-xs text-[var(--color-text-muted)]">
-    <li class="flex items-center gap-1">
-      <a href="/docs" class="hover:text-[var(--color-text-secondary)] transition-colors">Docs</a>
+<nav aria-label="Breadcrumb" class="mb-4">
+  <ol class="flex flex-wrap items-center gap-1.5 text-[13px] text-[var(--bd-text-muted)]">
+    <li class="flex items-center gap-1.5">
+      <a href="/docs" class="hover:text-[var(--bd-text)] transition-colors">Docs</a>
     </li>
     {items.map((item, i) => (
-      <li class="flex items-center gap-1">
-        <svg class="w-3 h-3 text-[var(--color-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <li class="flex items-center gap-1.5">
+        <svg class="w-3 h-3 text-[var(--bd-text-muted)] opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
         {item.href && i < items.length - 1 ? (
-          <a href={item.href} class="hover:text-[var(--color-text-secondary)] transition-colors">{item.label}</a>
+          <a href={item.href} class="hover:text-[var(--bd-text)] transition-colors">{item.label}</a>
         ) : (
-          <span class="text-[var(--color-text-secondary)]">{item.label}</span>
+          <span class="text-[var(--bd-text-secondary)] font-medium">{item.label}</span>
         )}
       </li>
     ))}

package/src/components/CodeCopy.astro

@@ -25,12 +25,13 @@
       const wrapper = document.createElement('div');
       wrapper.className = 'code-block-wrapper';
       
-      // Create header if filename exists
-      if (filename) {
+      // Create header for filename or language label
+      const displayLabel = filename || lang;
+      if (displayLabel) {
         const header = document.createElement('div');
         header.className = 'code-block-header';
         header.innerHTML = `
-          <span class="code-block-filename">${filename}</span>
+          <span class="code-block-filename">${displayLabel}</span>
         `;
         wrapper.appendChild(header);
       }
@@ -89,8 +90,8 @@
     margin: 1rem 0;
     border-radius: 0.5rem;
     overflow: hidden;
-    background: var(--color-bg-secondary);
-    border: 1px solid var(--color-border);
+    background: var(--bd-bg-subtle);
+    border: 1px solid var(--bd-border);
   }
   
   .code-block-wrapper pre {
@@ -145,14 +146,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 0.5rem 1rem;
-    background: var(--color-bg-tertiary);
-    border-bottom: 1px solid var(--color-border);
+    background: var(--bd-bg-muted);
+    border-bottom: 1px solid var(--bd-border);
   }
   
   .code-block-filename {
     font-size: 0.8125rem;
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    color: var(--color-text-secondary);
+    color: var(--bd-text-secondary);
   }
   
   .copy-button {
@@ -165,13 +166,13 @@
     padding: 0.375rem 0.625rem;
     font-size: 0.75rem;
     font-weight: 500;
-    background: var(--color-bg);
-    border: 1px solid var(--color-border);
+    background: var(--bd-bg);
+    border: 1px solid var(--bd-border);
     border-radius: 0.375rem;
     cursor: pointer;
     opacity: 0;
     transition: opacity 150ms ease, background 150ms ease;
-    color: var(--color-text-muted);
+    color: var(--bd-text-muted);
     z-index: 10;
   }
   
@@ -180,8 +181,8 @@
   }
   
   .copy-button:hover {
-    background: var(--color-bg-secondary);
-    color: var(--color-text);
+    background: var(--bd-bg-subtle);
+    color: var(--bd-text);
   }
   
   .copy-button .copy-icon,

package/src/components/Contributors.astro

@@ -0,0 +1,71 @@
+---
+import { execSync } from "node:child_process";
+
+interface Props {
+  filePath?: string;
+}
+
+interface Contributor {
+  name: string;
+  email: string;
+  avatarUrl: string;
+}
+
+const { filePath } = Astro.props;
+
+let contributors: Contributor[] = [];
+
+if (filePath) {
+  try {
+    const raw = execSync(
+      `git log --format='%aN|%aE' -- "${filePath}"`,
+      { encoding: "utf-8", timeout: 5000 }
+    ).trim();
+
+    if (raw) {
+      const seen = new Map<string, Contributor>();
+      for (const line of raw.split("\n")) {
+        const [name, email] = line.split("|");
+        if (!name || seen.has(email)) continue;
+        const hash = email.trim().toLowerCase();
+        seen.set(email, {
+          name: name.trim(),
+          email: email.trim(),
+          avatarUrl: `https://gravatar.com/avatar/${await computeHash(hash)}?s=64&d=mp`,
+        });
+      }
+      contributors = Array.from(seen.values());
+    }
+  } catch {
+    // git not available or file not tracked
+  }
+}
+
+async function computeHash(input: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(input);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+  return Array.from(new Uint8Array(hashBuffer))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+}
+---
+
+{contributors.length > 0 && (
+  <div class="bd-contributors">
+    <span class="bd-contributors-label">Contributors</span>
+    <div class="bd-contributors-avatars">
+      {contributors.map((c) => (
+        <img
+          src={c.avatarUrl}
+          alt={c.name}
+          title={c.name}
+          class="bd-contributor-avatar"
+          loading="lazy"
+          width="28"
+          height="28"
+        />
+      ))}
+    </div>
+  </div>
+)}

package/src/components/DocHeader.tsx

@@ -90,32 +90,32 @@ export function DocHeader({
 
   return (
     <TooltipProvider>
-      <header className="sticky top-0 z-50 w-full min-w-0 border-b border-[var(--color-border)] bg-[var(--color-bg)]/95 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-bg)]/80">
-        <div className="flex h-14 items-center justify-between gap-2 px-3 sm:px-4 max-w-[1120px] mx-auto min-w-0">
+      <header className="sticky top-0 z-50 w-full min-w-0 border-b border-[var(--bd-border)] bg-[var(--bd-bg)]/95 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--bd-bg)]/80">
+        <div className="flex h-14 items-center justify-between gap-2 px-4 sm:px-6 max-w-[1280px] mx-auto min-w-0">
           {/* Logo */}
           <div className="flex items-center gap-6 min-w-0 shrink">
             <a
               href="/"
-              className="flex items-center gap-2 min-w-0 shrink overflow-hidden font-semibold text-[var(--color-text)] hover:opacity-80 transition-opacity"
+              className="flex items-center gap-2.5 min-w-0 shrink overflow-hidden font-semibold text-[var(--bd-text-heading)] hover:opacity-80 transition-opacity"
             >
               {logo && <img src={logo} alt={siteName} className="h-7 w-7 shrink-0" />}
-              <span className="text-lg truncate">{siteName}</span>
+              <span className="text-[15px] tracking-tight truncate">{siteName}</span>
             </a>
           </div>
 
           {/* Right side actions */}
-          <div className="flex items-center gap-1 shrink-0">
+          <div className="flex items-center gap-1.5 shrink-0">
             {/* Search button */}
             <Button
               variant="outline"
-              className="hidden md:flex items-center gap-3 px-4 py-2 h-10 min-w-[200px] justify-start rounded-xl"
+              className="hidden md:flex items-center gap-3 px-3 py-1.5 h-9 min-w-[220px] justify-start rounded-lg border-[var(--bd-border)]"
               onClick={openSearch}
             >
-              <Search className="h-4 w-4 shrink-0 text-[var(--color-text-muted)]" />
-              <span className="flex-1 text-left text-[var(--color-text-muted)]">
+              <Search className="h-4 w-4 shrink-0 text-[var(--bd-text-muted)]" />
+              <span className="flex-1 text-left text-sm text-[var(--bd-text-muted)]">
                 Search...
               </span>
-              <kbd className="hidden lg:inline-flex items-center gap-0.5 px-2 py-1 text-xs font-medium bg-[var(--color-bg)] border border-[var(--color-border)] rounded-md text-[var(--color-text-muted)]">
+              <kbd className="hidden lg:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium bg-[var(--bd-bg-subtle)] border border-[var(--bd-border)] rounded text-[var(--bd-text-muted)]">
                 <span>⌘</span>K
               </kbd>
             </Button>
@@ -126,7 +126,7 @@ export function DocHeader({
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="md:hidden rounded-xl"
+                  className="md:hidden"
                   onClick={openSearch}
                 >
                   <Search className="h-5 w-5" />
@@ -137,7 +137,7 @@ export function DocHeader({
             </Tooltip>
 
             {/* Divider */}
-            <Separator orientation="vertical" className="hidden md:block h-6 mx-2" />
+            <Separator orientation="vertical" className="hidden md:block h-5 mx-1.5" />
 
             {/* GitHub link */}
             {githubUrl && (
@@ -146,7 +146,7 @@ export function DocHeader({
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="rounded-xl"
+                    className="h-8 w-8 text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)]"
                     asChild
                   >
                     <a
@@ -154,7 +154,7 @@ export function DocHeader({
                       target="_blank"
                       rel="noopener noreferrer"
                     >
-                      <Github className="h-5 w-5" />
+                      <Github className="h-[18px] w-[18px]" />
                       <span className="sr-only">GitHub</span>
                     </a>
                   </Button>
@@ -166,20 +166,20 @@ export function DocHeader({
             {/* Language switcher */}
             {hasMultipleLocales && locales.length > 0 && (
               <>
-                <Separator orientation="vertical" className="hidden md:block h-6 mx-2" />
+                <Separator orientation="vertical" className="hidden md:block h-5 mx-1" />
                 <div className="relative" ref={langRef}>
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <Button
                         variant="ghost"
-                        className="rounded-xl gap-1 px-2"
+                        className="h-8 gap-1 px-2 text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)]"
                         onClick={(e) => {
                           e.stopPropagation();
                           setLangOpen((o) => !o);
                         }}
                       >
                         <Globe className="h-4 w-4" />
-                        <span className="text-sm hidden sm:inline">
+                        <span className="text-[13px] hidden sm:inline">
                           {localeLabels[currentLocale] ?? currentLocale}
                         </span>
                         <ChevronDown className="h-3 w-3" />
@@ -190,7 +190,7 @@ export function DocHeader({
                   </Tooltip>
                   {langOpen && (
                     <div
-                      className="absolute right-0 mt-1 py-1 min-w-[8rem] rounded-lg border border-[var(--color-border)] bg-[var(--color-bg)] shadow-lg z-50"
+                      className="absolute right-0 mt-1 py-1 min-w-[8rem] rounded-lg border border-[var(--bd-border)] bg-[var(--bd-bg)] shadow-[var(--bd-shadow-lg)] z-50"
                       role="menu"
                     >
                       {locales.map((locale) => (
@@ -198,10 +198,10 @@ export function DocHeader({
                           key={locale}
                           href={getLocalizedUrl(currentPath, locale, defaultLocale)}
                           className={cn(
-                            "block px-3 py-2 text-sm transition-colors",
+                            "block px-3 py-1.5 text-[13px] transition-colors",
                             locale === currentLocale
-                              ? "bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300"
-                              : "text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)]"
+                              ? "bg-primary-50 dark:bg-primary-950/50 text-primary-600 dark:text-primary-400 font-medium"
+                              : "text-[var(--bd-text)] hover:bg-[var(--bd-bg-subtle)]"
                           )}
                           role="menuitem"
                         >
@@ -220,13 +220,13 @@ export function DocHeader({
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="rounded-xl"
+                  className="h-8 w-8 text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)]"
                   onClick={toggleTheme}
                 >
                   {theme === "light" ? (
-                    <Moon className="h-5 w-5" />
+                    <Moon className="h-[18px] w-[18px]" />
                   ) : (
-                    <Sun className="h-5 w-5" />
+                    <Sun className="h-[18px] w-[18px]" />
                   )}
                   <span className="sr-only">Toggle theme</span>
                 </Button>
@@ -240,7 +240,7 @@ export function DocHeader({
             <Button
               variant="ghost"
               size="icon"
-              className="lg:hidden rounded-xl"
+              className="lg:hidden h-8 w-8 text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)]"
               onClick={openMobileNav}
             >
               <Menu className="h-5 w-5" />

package/src/components/DocsSidebar.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { ChevronRight } from "lucide-react";
 import { cn } from "../lib/utils";
-import { ScrollArea } from "./ui/scroll-area";
 import {
   Collapsible,
   CollapsibleContent,
@@ -27,33 +26,30 @@ interface DocsSidebarProps {
 
 export function DocsSidebar({ groups, className }: DocsSidebarProps) {
   return (
-    <ScrollArea className={cn("h-full", className)}>
-      <nav className="space-y-4">
-        {groups.map((group, index) => (
-          <SidebarGroup key={index} group={group} />
-        ))}
-      </nav>
-    </ScrollArea>
+    <nav className={cn("space-y-5", className)}>
+      {groups.map((group, index) => (
+        <SidebarGroup key={index} group={group} />
+      ))}
+    </nav>
   );
 }
 
 function SidebarGroup({ group }: { group: NavGroup }) {
   const [isOpen, setIsOpen] = React.useState(group.defaultOpen ?? true);
-  const hasActiveItem = group.items.some((item) => item.isActive);
 
   return (
     <Collapsible open={isOpen} onOpenChange={setIsOpen}>
-      <CollapsibleTrigger className="group flex w-full items-center gap-1.5 py-1 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition-colors">
+      <CollapsibleTrigger className="group flex w-full items-center gap-1.5 py-1.5 text-[13px] font-semibold text-[var(--bd-text)] hover:text-[var(--bd-text-heading)] transition-colors">
         <ChevronRight
           className={cn(
-            "h-3 w-3 transition-transform duration-200",
+            "h-3.5 w-3.5 text-[var(--bd-text-muted)] transition-transform duration-200",
             isOpen && "rotate-90"
           )}
         />
         {group.title}
       </CollapsibleTrigger>
       <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
-        <ul className="mt-1 space-y-0.5 border-l border-[var(--color-border)] ml-1.5">
+        <ul className="mt-1 space-y-px border-l border-[var(--bd-border)] ml-2">
           {group.items.map((item, index) => (
             <SidebarItem key={index} item={item} />
           ))}
@@ -69,10 +65,10 @@ function SidebarItem({ item }: { item: NavItem }) {
       <a
         href={item.href}
         className={cn(
-          "block pl-4 pr-2 py-1.5 text-sm transition-all duration-150 -ml-px border-l-2",
+          "block pl-4 pr-2 py-1.5 text-[13px] rounded-r-md transition-all duration-150 -ml-px border-l-2",
           item.isActive
-            ? "border-primary-500 text-primary-600 dark:text-primary-400 font-medium bg-primary-50/50 dark:bg-primary-950/30"
-            : "border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:border-[var(--color-border)]"
+            ? "border-[var(--bd-sidebar-active-border)] text-[var(--bd-sidebar-active-text)] font-medium bg-[var(--bd-sidebar-active-bg)]"
+            : "border-transparent text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)] hover:border-[var(--bd-text-muted)]"
         )}
       >
         <span className="truncate">{item.title}</span>

package/src/components/KeyboardShortcuts.astro

@@ -0,0 +1,108 @@
+---
+// Keyboard shortcuts: Cmd/Ctrl+K → search, ←/→ → prev/next, ? → help modal
+---
+
+<script>
+  function initKeyboardShortcuts() {
+    if (window.__bdShortcutsInit) return;
+    window.__bdShortcutsInit = true;
+
+    const isMac = navigator.platform.toUpperCase().includes('MAC');
+    const modLabel = isMac ? '⌘' : 'Ctrl';
+
+    function isInputFocused(): boolean {
+      const el = document.activeElement;
+      if (!el) return false;
+      const tag = el.tagName;
+      return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || (el as HTMLElement).isContentEditable;
+    }
+
+    function showShortcutsModal() {
+      if (document.querySelector('.bd-shortcuts-overlay')) return;
+
+      const overlay = document.createElement('div');
+      overlay.className = 'bd-shortcuts-overlay';
+      overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) overlay.remove();
+      });
+
+      overlay.innerHTML = `
+        <div class="bd-shortcuts-modal">
+          <h3>Keyboard Shortcuts</h3>
+          <div class="bd-shortcut-row">
+            <span class="bd-shortcut-desc">Search</span>
+            <span class="bd-shortcut-keys"><kbd class="bd-kbd">${modLabel}</kbd><kbd class="bd-kbd">K</kbd></span>
+          </div>
+          <div class="bd-shortcut-row">
+            <span class="bd-shortcut-desc">Previous page</span>
+            <span class="bd-shortcut-keys"><kbd class="bd-kbd">←</kbd></span>
+          </div>
+          <div class="bd-shortcut-row">
+            <span class="bd-shortcut-desc">Next page</span>
+            <span class="bd-shortcut-keys"><kbd class="bd-kbd">→</kbd></span>
+          </div>
+          <div class="bd-shortcut-row">
+            <span class="bd-shortcut-desc">Show shortcuts</span>
+            <span class="bd-shortcut-keys"><kbd class="bd-kbd">?</kbd></span>
+          </div>
+        </div>
+      `;
+
+      document.body.appendChild(overlay);
+    }
+
+    document.addEventListener('keydown', (e: KeyboardEvent) => {
+      // Close modal on Escape
+      if (e.key === 'Escape') {
+        const modal = document.querySelector('.bd-shortcuts-overlay');
+        if (modal) { modal.remove(); return; }
+      }
+
+      // Cmd/Ctrl+K → open search
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        const searchBtn = document.querySelector('[data-search-trigger]') as HTMLButtonElement;
+        if (searchBtn) searchBtn.click();
+        return;
+      }
+
+      if (isInputFocused()) return;
+
+      // ? → show shortcuts
+      if (e.key === '?' || (e.shiftKey && e.key === '/')) {
+        e.preventDefault();
+        showShortcutsModal();
+        return;
+      }
+
+      // ← → prev page
+      if (e.key === 'ArrowLeft' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const prev = document.querySelector('nav[aria-label="Page navigation"] a:first-of-type') as HTMLAnchorElement;
+        if (prev) { prev.click(); return; }
+      }
+
+      // → → next page
+      if (e.key === 'ArrowRight' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const links = document.querySelectorAll('nav[aria-label="Page navigation"] a');
+        const next = links[links.length - 1] as HTMLAnchorElement;
+        if (next && links.length > 1) { next.click(); return; }
+        if (next && links.length === 1) {
+          const parent = next.closest('.col-span-1');
+          if (parent && parent === parent.parentElement?.lastElementChild) { next.click(); }
+        }
+      }
+    });
+  }
+
+  initKeyboardShortcuts();
+  document.addEventListener('astro:page-load', () => {
+    window.__bdShortcutsInit = false;
+    initKeyboardShortcuts();
+  });
+
+  declare global {
+    interface Window {
+      __bdShortcutsInit?: boolean;
+    }
+  }
+</script>

package/src/components/LanguageSwitcher.astro

@@ -32,7 +32,7 @@ function getLocalizedUrl(locale: string): string {
 <div class="relative">
   <button
     id="lang-switcher-btn"
-    class="flex items-center gap-1 px-2 py-1.5 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] rounded-lg hover:bg-[var(--color-bg-secondary)] transition-colors"
+    class="flex items-center gap-1 px-2 py-1.5 text-sm text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)] rounded-lg hover:bg-[var(--bd-bg-subtle)] transition-colors"
     aria-label="Select language"
   >
     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -46,7 +46,7 @@ function getLocalizedUrl(locale: string): string {
   
   <div
     id="lang-switcher-menu"
-    class="hidden absolute right-0 mt-1 py-1 w-32 bg-[var(--color-bg)] border border-[var(--color-border)] rounded-lg shadow-lg z-50"
+    class="hidden absolute right-0 mt-1 py-1 w-32 bg-[var(--bd-bg)] border border-[var(--bd-border)] rounded-lg shadow-lg z-50"
   >
     {locales.map((locale) => (
       <a
@@ -55,7 +55,7 @@ function getLocalizedUrl(locale: string): string {
           "block px-3 py-1.5 text-sm transition-colors",
           locale === currentLocale
             ? "bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300"
-            : "text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)]"
+            : "text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)] hover:bg-[var(--bd-bg-subtle)]"
         ]}
       >
         {getLocaleLabel(locale, i18n?.labels)}

package/src/components/MobileNavSheet.tsx

@@ -54,7 +54,7 @@ export function MobileNavSheet({ groups, siteName, logo }: MobileNavSheetProps)
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetContent side="left" className="w-80 p-0">
-        <SheetHeader className="px-6 py-4 border-b border-[var(--color-border)]">
+        <SheetHeader className="px-6 py-4 border-b border-[var(--bd-border)]">
           <SheetTitle className="flex items-center gap-2">
             {logo && <img src={logo} alt={siteName} className="h-6 w-6" />}
             <span>{siteName}</span>

package/src/components/Search.tsx

@@ -133,10 +133,10 @@ export function Search() {
     >
       <div className="fixed inset-0 bg-black/50" aria-hidden="true" />
       <div className="fixed inset-x-4 top-[15%] md:inset-x-auto md:left-1/2 md:-translate-x-1/2 md:w-full md:max-w-lg">
-        <div className="bg-[var(--color-bg)] rounded-xl shadow-2xl border border-[var(--color-border)] overflow-hidden">
-          <div className="flex items-center px-4 border-b border-[var(--color-border)]">
+        <div className="bg-[var(--bd-bg)] rounded-xl shadow-2xl border border-[var(--bd-border)] overflow-hidden">
+          <div className="flex items-center px-4 border-b border-[var(--bd-border)]">
             <svg
-              className="w-5 h-5 text-[var(--color-text-secondary)]"
+              className="w-5 h-5 text-[var(--bd-text-secondary)]"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -155,11 +155,11 @@ export function Search() {
               onChange={(e) => setQuery(e.target.value)}
               onKeyDown={handleKeyDown}
               placeholder="Search documentation..."
-              className="flex-1 px-4 py-4 bg-transparent text-[var(--color-text)] placeholder-[var(--color-text-secondary)] focus:outline-none"
+              className="flex-1 px-4 py-4 bg-transparent text-[var(--bd-text)] placeholder-[var(--bd-text-secondary)] focus:outline-none"
             />
             <button
               onClick={() => setIsOpen(false)}
-              className="px-2 py-1 text-xs text-[var(--color-text-secondary)] bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded"
+              className="px-2 py-1 text-xs text-[var(--bd-text-secondary)] bg-[var(--bd-bg-subtle)] border border-[var(--bd-border)] rounded"
             >
               ESC
             </button>
@@ -168,7 +168,7 @@ export function Search() {
           {query.trim() && (
             <div className="max-h-[60vh] overflow-y-auto">
               {results.length === 0 ? (
-                <div className="px-4 py-8 text-center text-[var(--color-text-secondary)]">
+                <div className="px-4 py-8 text-center text-[var(--bd-text-secondary)]">
                   {pagefind ? "No results found" : "Search index not available"}
                 </div>
               ) : (
@@ -180,14 +180,14 @@ export function Search() {
                         className={`block px-4 py-3 transition-colors ${
                           index === selectedIndex
                             ? "bg-primary-50 dark:bg-primary-900/30"
-                            : "hover:bg-[var(--color-bg-secondary)]"
+                            : "hover:bg-[var(--bd-bg-subtle)]"
                         }`}
                       >
-                        <div className="font-medium text-[var(--color-text)]">
+                        <div className="font-medium text-[var(--bd-text)]">
                           {result.meta.title}
                         </div>
                         <div
-                          className="text-sm text-[var(--color-text-secondary)] line-clamp-2 mt-0.5"
+                          className="text-sm text-[var(--bd-text-secondary)] line-clamp-2 mt-0.5"
                           dangerouslySetInnerHTML={{ __html: result.excerpt }}
                         />
                       </a>
@@ -199,7 +199,7 @@ export function Search() {
           )}
 
           {!query.trim() && (
-            <div className="px-4 py-6 text-center text-[var(--color-text-secondary)] text-sm">
+            <div className="px-4 py-6 text-center text-[var(--bd-text-secondary)] text-sm">
               Start typing to search...
             </div>
           )}