@barodoc/theme-docs 3.0.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barodoc/theme-docs",
-  "version": "3.0.0",
+  "version": "5.0.0",
   "description": "Documentation theme for Barodoc",
   "type": "module",
   "exports": {
@@ -30,7 +30,7 @@
     "lucide-react": "^0.563.0",
     "mermaid": "^11.12.2",
     "tailwind-merge": "^3.4.0",
-    "@barodoc/core": "3.0.0"
+    "@barodoc/core": "5.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/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/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>
           )}

package/src/components/SearchDialog.tsx

@@ -43,19 +43,19 @@ export function SearchDialog({ className }: SearchDialogProps) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent className={cn("sm:max-w-2xl p-0 gap-0", className)}>
-        <DialogHeader className="px-4 py-3 border-b border-[var(--color-border)]">
+        <DialogHeader className="px-4 py-3 border-b border-[var(--bd-border)]">
           <DialogTitle className="sr-only">Search documentation</DialogTitle>
           <div className="flex items-center gap-3">
-            <SearchIcon className="h-5 w-5 text-[var(--color-text-muted)]" />
+            <SearchIcon className="h-5 w-5 text-[var(--bd-text-muted)]" />
             <input
               type="text"
               placeholder="Search documentation..."
               value={query}
               onChange={(e) => setQuery(e.target.value)}
-              className="flex-1 bg-transparent text-base outline-none placeholder:text-[var(--color-text-muted)]"
+              className="flex-1 bg-transparent text-base outline-none placeholder:text-[var(--bd-text-muted)]"
               autoFocus
             />
-            <kbd className="hidden sm:inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded text-[var(--color-text-muted)]">
+            <kbd className="hidden sm:inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-[var(--bd-bg-subtle)] border border-[var(--bd-border)] rounded text-[var(--bd-text-muted)]">
               Esc
             </kbd>
           </div>
@@ -65,12 +65,12 @@ export function SearchDialog({ className }: SearchDialogProps) {
             <div id="pagefind-results" className="pagefind-ui" />
           ) : (
             <div className="flex flex-col items-center justify-center h-full py-12 text-center">
-              <SearchIcon className="h-12 w-12 text-[var(--color-text-muted)] mb-4" />
-              <p className="text-sm text-[var(--color-text-secondary)]">
+              <SearchIcon className="h-12 w-12 text-[var(--bd-text-muted)] mb-4" />
+              <p className="text-sm text-[var(--bd-text-secondary)]">
                 Start typing to search the documentation
               </p>
-              <p className="text-xs text-[var(--color-text-muted)] mt-2">
-                Press <kbd className="px-1.5 py-0.5 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded text-xs">⌘K</kbd> to open search
+              <p className="text-xs text-[var(--bd-text-muted)] mt-2">
+                Press <kbd className="px-1.5 py-0.5 bg-[var(--bd-bg-subtle)] border border-[var(--bd-border)] rounded text-xs">⌘K</kbd> to open search
               </p>
             </div>
           )}

package/src/components/TableOfContents.astro

@@ -17,19 +17,19 @@ const filteredHeadings = headings.filter(h => h.depth >= 2 && h.depth <= 3);
 
 {filteredHeadings.length > 0 && (
   <div class="toc-container">
-    <h4 class="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-muted)] mb-4">
+    <h4 class="text-[11px] font-semibold uppercase tracking-widest text-[var(--bd-text-muted)] mb-3">
       On this page
     </h4>
     <nav class="relative">
-      <div class="absolute left-0 top-0 bottom-0 w-px bg-[var(--color-border)]"></div>
-      <ul class="space-y-1">
+      <div class="absolute left-0 top-0 bottom-0 w-px bg-[var(--bd-border)]"></div>
+      <ul class="space-y-0.5">
         {filteredHeadings.map((heading) => (
           <li class="relative">
             <a
               href={`#${heading.slug}`}
               class:list={[
-                "toc-link block text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-all duration-150",
-                heading.depth === 2 ? "py-1.5 pl-4" : "py-1 pl-6 text-xs"
+                "toc-link block text-[var(--bd-text-muted)] hover:text-[var(--bd-text)] transition-all duration-150",
+                heading.depth === 2 ? "py-1 pl-3.5 text-[13px]" : "py-0.5 pl-6 text-xs"
               ]}
               data-heading={heading.slug}
             >

package/src/components/ThemeToggle.tsx

@@ -33,7 +33,7 @@ export function ThemeToggle() {
   if (!mounted) {
     return (
       <button
-        className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        className="p-2 rounded-lg hover:bg-[var(--bd-bg-hover)] transition-colors"
         aria-label="Toggle theme"
       >
         <div className="w-5 h-5" />
@@ -44,13 +44,13 @@ export function ThemeToggle() {
   return (
     <button
       onClick={toggleTheme}
-      className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+      className="p-2 rounded-lg hover:bg-[var(--bd-bg-hover)] transition-colors"
       aria-label={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
     >
       {theme === "light" ? (
-        <Moon className="w-5 h-5 text-gray-600" />
+        <Moon className="w-5 h-5 text-[var(--bd-text-secondary)]" />
       ) : (
-        <Sun className="w-5 h-5 text-gray-300" />
+        <Sun className="w-5 h-5 text-[var(--bd-text-secondary)]" />
       )}
     </button>
   );

package/src/components/api/ApiEndpoint.astro

@@ -16,17 +16,17 @@ const methodColors = {
 };
 ---
 
-<div class="not-prose my-6 rounded-lg border border-[var(--color-border)] overflow-hidden">
-  <div class="flex items-center gap-3 px-4 py-3 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border)]">
+<div class="not-prose my-6 rounded-lg border border-[var(--bd-border)] overflow-hidden">
+  <div class="flex items-center gap-3 px-4 py-3 bg-[var(--bd-bg-subtle)] border-b border-[var(--bd-border)]">
     <span class:list={["px-2 py-1 text-xs font-bold rounded uppercase", methodColors[method]]}>
       {method}
     </span>
-    <code class="text-sm font-mono text-[var(--color-text)]">{path}</code>
+    <code class="text-sm font-mono text-[var(--bd-text)]">{path}</code>
   </div>
   
   {description && (
-    <div class="px-4 py-3 border-b border-[var(--color-border)]">
-      <p class="text-sm text-[var(--color-text-secondary)]">{description}</p>
+    <div class="px-4 py-3 border-b border-[var(--bd-border)]">
+      <p class="text-sm text-[var(--bd-text-secondary)]">{description}</p>
     </div>
   )}
   

package/src/components/api/ApiParam.astro

@@ -9,10 +9,10 @@ interface Props {
 const { name, type, required = false, description } = Astro.props;
 ---
 
-<div class="flex flex-col gap-1 py-3 border-b border-[var(--color-border)] last:border-b-0">
+<div class="flex flex-col gap-1 py-3 border-b border-[var(--bd-border)] last:border-b-0">
   <div class="flex items-center gap-2">
-    <code class="text-sm font-semibold text-[var(--color-text)]">{name}</code>
-    <span class="text-xs text-[var(--color-text-secondary)]">{type}</span>
+    <code class="text-sm font-semibold text-[var(--bd-text)]">{name}</code>
+    <span class="text-xs text-[var(--bd-text-secondary)]">{type}</span>
     {required && (
       <span class="px-1.5 py-0.5 text-xs font-medium text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30 rounded">
         required
@@ -20,7 +20,7 @@ const { name, type, required = false, description } = Astro.props;
     )}
   </div>
   {description && (
-    <p class="text-sm text-[var(--color-text-secondary)]">{description}</p>
+    <p class="text-sm text-[var(--bd-text-secondary)]">{description}</p>
   )}
   <slot />
 </div>

package/src/components/api/ApiParams.astro

@@ -7,9 +7,9 @@ const { title = "Parameters" } = Astro.props;
 ---
 
 <div class="my-4 px-2">
-  <h4 class="text-sm font-semibold text-[var(--color-text)] mb-2">{title}</h4>
-  <div class="border border-[var(--color-border)] rounded-lg overflow-hidden">
-    <div class="divide-y divide-[var(--color-border)] px-4">
+  <h4 class="text-sm font-semibold text-[var(--bd-text)] mb-2">{title}</h4>
+  <div class="border border-[var(--bd-border)] rounded-lg overflow-hidden">
+    <div class="divide-y divide-[var(--bd-border)] px-4">
       <slot />
     </div>
   </div>

package/src/components/api/ApiResponse.astro

@@ -26,10 +26,10 @@ const statusColor = statusColors[status] || "bg-gray-100 dark:bg-gray-900/30 tex
       {status}
     </span>
     {description && (
-      <span class="text-sm text-[var(--color-text-secondary)]">{description}</span>
+      <span class="text-sm text-[var(--bd-text-secondary)]">{description}</span>
     )}
   </div>
-  <div class="border border-[var(--color-border)] rounded-lg overflow-hidden px-2">
+  <div class="border border-[var(--bd-border)] rounded-lg overflow-hidden px-2">
     <slot />
   </div>
 </div>