@barodoc/theme-docs 2.0.0 → 5.0.0

package/src/components/mdx/Accordion.tsx

@@ -11,21 +11,21 @@ export function Accordion({ title, icon, defaultOpen = false, children }: Accord
   const [isOpen, setIsOpen] = useState(defaultOpen);
 
   return (
-    <div className="accordion-item border border-[var(--color-border)] rounded-xl overflow-hidden bg-[var(--color-bg)] my-3">
+    <div className="accordion-item border border-[var(--bd-border)] rounded-xl overflow-hidden bg-[var(--bd-bg)] my-3">
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className="w-full flex items-center gap-3 px-5 py-4 text-left hover:bg-[var(--color-bg-secondary)] transition-colors"
+        className="w-full flex items-center gap-3 px-5 py-4 text-left hover:bg-[var(--bd-bg-subtle)] transition-colors"
         aria-expanded={isOpen}
       >
         {icon && (
-          <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-[var(--color-bg-secondary)] text-lg shrink-0">
+          <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-[var(--bd-bg-subtle)] text-lg shrink-0">
             {icon}
           </span>
         )}
-        <span className="flex-1 font-medium text-[var(--color-text)]">{title}</span>
+        <span className="flex-1 font-medium text-[var(--bd-text)]">{title}</span>
         <svg
-          className={`w-5 h-5 text-[var(--color-text-secondary)] transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
+          className={`w-5 h-5 text-[var(--bd-text-secondary)] transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -38,7 +38,7 @@ export function Accordion({ title, icon, defaultOpen = false, children }: Accord
           isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
         }`}
       >
-        <div className="px-5 pb-5 pt-1 text-sm text-[var(--color-text-secondary)] leading-relaxed">
+        <div className="px-5 pb-5 pt-1 text-sm text-[var(--bd-text-secondary)] leading-relaxed">
           {children}
         </div>
       </div>

package/src/components/mdx/Badge.tsx

@@ -13,7 +13,7 @@ const badgeVariants = cva(
         warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
         error: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
         info: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
-        outline: "border border-[var(--color-border)] text-[var(--color-text-secondary)]",
+        outline: "border border-[var(--bd-border)] text-[var(--bd-text-secondary)]",
       },
     },
     defaultVariants: {

package/src/components/mdx/Callout.astro

@@ -8,34 +8,34 @@ const { type = "info", title } = Astro.props;
 
 const styles = {
   info: {
-    container: "bg-blue-50/70 dark:bg-blue-950/30 border-l-blue-500",
-    iconBg: "bg-blue-100 dark:bg-blue-900/50",
+    container: "bg-blue-50/70 dark:bg-blue-500/10 border-l-blue-500",
+    iconBg: "bg-blue-100 dark:bg-blue-500/20",
     icon: "text-blue-600 dark:text-blue-400",
-    title: "text-blue-900 dark:text-blue-100",
+    title: "text-blue-900 dark:text-blue-200",
   },
   note: {
-    container: "bg-gray-50/70 dark:bg-gray-950/30 border-l-gray-400",
-    iconBg: "bg-gray-100 dark:bg-gray-900/50",
+    container: "bg-gray-50/70 dark:bg-gray-500/10 border-l-gray-400",
+    iconBg: "bg-gray-100 dark:bg-gray-500/20",
     icon: "text-gray-600 dark:text-gray-400",
-    title: "text-gray-900 dark:text-gray-100",
+    title: "text-gray-900 dark:text-gray-200",
   },
   warning: {
-    container: "bg-orange-50/70 dark:bg-orange-950/30 border-l-orange-500",
-    iconBg: "bg-orange-100 dark:bg-orange-900/50",
+    container: "bg-orange-50/70 dark:bg-orange-500/10 border-l-orange-500",
+    iconBg: "bg-orange-100 dark:bg-orange-500/20",
     icon: "text-orange-600 dark:text-orange-400",
-    title: "text-orange-900 dark:text-orange-100",
+    title: "text-orange-900 dark:text-orange-200",
   },
   tip: {
-    container: "bg-green-50/70 dark:bg-green-950/30 border-l-green-500",
-    iconBg: "bg-green-100 dark:bg-green-900/50",
+    container: "bg-green-50/70 dark:bg-green-500/10 border-l-green-500",
+    iconBg: "bg-green-100 dark:bg-green-500/20",
     icon: "text-green-600 dark:text-green-400",
-    title: "text-green-900 dark:text-green-100",
+    title: "text-green-900 dark:text-green-200",
   },
   danger: {
-    container: "bg-red-50/70 dark:bg-red-950/30 border-l-red-500",
-    iconBg: "bg-red-100 dark:bg-red-900/50",
+    container: "bg-red-50/70 dark:bg-red-500/10 border-l-red-500",
+    iconBg: "bg-red-100 dark:bg-red-500/20",
     icon: "text-red-600 dark:text-red-400",
-    title: "text-red-900 dark:text-red-100",
+    title: "text-red-900 dark:text-red-200",
   },
 };
 
@@ -60,17 +60,17 @@ const icon = icons[type];
 const displayTitle = title || defaultTitles[type];
 ---
 
-<div class:list={["not-prose my-4 rounded-md border-l-4 overflow-hidden", style.container]}>
-  <div class="p-3">
+<div class:list={["not-prose my-5 rounded-lg border-l-4 overflow-hidden", style.container]}>
+  <div class="px-4 py-3.5">
     <div class="flex items-start gap-3">
-      <div class:list={["shrink-0 flex items-center justify-center w-6 h-6 rounded", style.iconBg]}>
+      <div class:list={["shrink-0 flex items-center justify-center w-6 h-6 rounded-md", style.iconBg]}>
         <div class:list={[style.icon]} set:html={icon} />
       </div>
       <div class="flex-1 min-w-0">
         {displayTitle && (
-          <p class:list={["font-semibold text-sm mb-1", style.title]}>{displayTitle}</p>
+          <p class:list={["font-semibold text-[13px] mb-1", style.title]}>{displayTitle}</p>
         )}
-        <div class="text-sm text-[var(--color-text-secondary)] leading-relaxed [&>p]:m-0 [&>p+p]:mt-1">
+        <div class="text-[13px] text-zinc-700 dark:text-zinc-300 leading-relaxed [&>p]:m-0 [&>p+p]:mt-1.5">
           <slot />
         </div>
       </div>

package/src/components/mdx/Card.astro

@@ -13,27 +13,27 @@ const Tag = href ? "a" : "div";
 <Tag
   href={href}
   class:list={[
-    "card-component not-prose group block p-4 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg)] no-underline",
+    "card-component not-prose group block p-4 rounded-lg border border-[var(--bd-border)] bg-[var(--bd-bg)] no-underline",
     href && "cursor-pointer hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-md transition-all duration-200"
   ]}
   style={href ? "cursor: pointer;" : ""}
 >
   <div class="flex flex-col gap-3">
     {icon && (
-      <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--color-bg-secondary)] group-hover:bg-primary-50 dark:group-hover:bg-primary-950/50 transition-colors">
+      <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--bd-bg-subtle)] group-hover:bg-primary-50 dark:group-hover:bg-primary-950/50 transition-colors">
         <span class="text-xl">{icon}</span>
       </div>
     )}
     <div class="flex-1 min-w-0">
       <div class="flex items-center gap-2">
-        <h3 class="font-semibold text-[var(--color-text)] group-hover:text-primary-700 dark:group-hover:text-primary-300 transition-colors">{title}</h3>
+        <h3 class="font-semibold text-[var(--bd-text)] group-hover:text-primary-700 dark:group-hover:text-primary-300 transition-colors">{title}</h3>
         {href && (
-          <svg class="w-4 h-4 text-[var(--color-text-muted)] opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-4 h-4 text-[var(--bd-text-muted)] opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" 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"></path>
           </svg>
         )}
       </div>
-      <div class="mt-1 text-sm text-[var(--color-text-secondary)] group-hover:text-[var(--color-text)] leading-relaxed transition-colors">
+      <div class="mt-1 text-sm text-[var(--bd-text-secondary)] group-hover:text-[var(--bd-text)] leading-relaxed transition-colors">
         <slot />
       </div>
     </div>

package/src/components/mdx/CodeGroup.astro

@@ -9,9 +9,9 @@ interface Props {
 const { titles = [] } = Astro.props;
 ---
 
-<div class="code-group not-prose my-4 rounded-lg border border-[var(--color-border)] overflow-hidden" data-titles={JSON.stringify(titles)}>
-  <div class="code-group-tabs flex flex-wrap gap-0 border-b border-[var(--color-border)] bg-[var(--color-bg-tertiary)]"></div>
-  <div class="code-group-content bg-[var(--color-bg-secondary)]">
+<div class="code-group not-prose my-4 rounded-lg border border-[var(--bd-border)] overflow-hidden" data-titles={JSON.stringify(titles)}>
+  <div class="code-group-tabs flex flex-wrap gap-0 border-b border-[var(--bd-border)] bg-[var(--bd-bg-muted)]"></div>
+  <div class="code-group-content bg-[var(--bd-bg-subtle)]">
     <slot />
   </div>
 </div>
@@ -21,37 +21,40 @@ const { titles = [] } = Astro.props;
     document.querySelectorAll('.code-group').forEach((group) => {
       const tabsContainer = group.querySelector('.code-group-tabs');
       const contentContainer = group.querySelector('.code-group-content');
+      if (!tabsContainer || !contentContainer) return;
+
+      tabsContainer.innerHTML = '';
+
       const fallbackTitles = JSON.parse(group.getAttribute('data-titles') || '[]');
 
-      const codeItems = contentContainer?.querySelectorAll(':scope > .code-item');
-      const directPres = contentContainer?.querySelectorAll(':scope > pre');
+      const codeItems = contentContainer.querySelectorAll(':scope > .code-item');
+      const directPres = contentContainer.querySelectorAll(':scope > pre');
 
-      // When CodeItem children exist: use them for tabs (titles from data-title), one tab per .code-item
-      const useCodeItems = (codeItems?.length ?? 0) > 0;
+      const useCodeItems = codeItems.length > 0;
       const tabPanels = useCodeItems
-        ? Array.from(codeItems!)
-        : Array.from(directPres || []);
-      const titles = useCodeItems && codeItems?.length
-        ? Array.from(codeItems!).map((el) => (el as HTMLElement).getAttribute('data-title') ?? '')
+        ? Array.from(codeItems)
+        : Array.from(directPres);
+      const titles = useCodeItems
+        ? Array.from(codeItems).map((el) => (el as HTMLElement).getAttribute('data-title') ?? '')
         : fallbackTitles;
       const numTabs = tabPanels.length;
 
-      if (!tabsContainer || !contentContainer || numTabs === 0) return;
+      if (numTabs === 0) return;
 
       // Create tabs from titles; show/hide tabPanels
       tabPanels.forEach((_panel, index) => {
         const tab = document.createElement('button');
-        tab.className = 'shrink-0 px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap text-[var(--color-text-muted)] hover:text-[var(--color-text)]';
+        tab.className = 'shrink-0 px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap text-[var(--bd-text-muted)] hover:text-[var(--bd-text)]';
         tab.textContent = titles[index]?.trim() || `Tab ${index + 1}`;
         const panel = tabPanels[index] as HTMLElement;
         tab.addEventListener('click', () => {
           tabsContainer.querySelectorAll('button').forEach((t, i) => {
             if (i === index) {
-              t.classList.add('border-b-2', 'border-primary-500', 'text-[var(--color-text)]', '-mb-px');
-              t.classList.remove('text-[var(--color-text-muted)]');
+              t.classList.add('border-b-2', 'border-primary-500', 'text-[var(--bd-text)]', '-mb-px');
+              t.classList.remove('text-[var(--bd-text-muted)]');
             } else {
-              t.classList.remove('border-b-2', 'border-primary-500', 'text-[var(--color-text)]', '-mb-px');
-              t.classList.add('text-[var(--color-text-muted)]');
+              t.classList.remove('border-b-2', 'border-primary-500', 'text-[var(--bd-text)]', '-mb-px');
+              t.classList.add('text-[var(--bd-text-muted)]');
             }
           });
           tabPanels.forEach((p, i) => {
@@ -61,8 +64,8 @@ const { titles = [] } = Astro.props;
         tabsContainer.appendChild(tab);
 
         if (index === 0) {
-          tab.classList.add('border-b-2', 'border-primary-500', 'text-[var(--color-text)]', '-mb-px');
-          tab.classList.remove('text-[var(--color-text-muted)]');
+          tab.classList.add('border-b-2', 'border-primary-500', 'text-[var(--bd-text)]', '-mb-px');
+          tab.classList.remove('text-[var(--bd-text-muted)]');
         } else {
           panel.style.display = 'none';
         }
@@ -70,6 +73,6 @@ const { titles = [] } = Astro.props;
     });
   }
 
-  initCodeGroups();
   document.addEventListener('astro:page-load', initCodeGroups);
+  if (document.readyState === 'complete') initCodeGroups();
 </script>

package/src/components/mdx/CodeGroup.tsx

@@ -72,16 +72,16 @@ export function CodeGroup({ children, titles = [] }: CodeGroupProps) {
 
   if (codeBlocks.length === 0) {
     return (
-      <div className="code-group not-prose my-4 rounded-lg border border-[var(--color-border)] overflow-hidden p-4 text-[var(--color-text-muted)] text-sm">
+      <div className="code-group not-prose my-4 rounded-lg border border-[var(--bd-border)] overflow-hidden p-4 text-[var(--bd-text-muted)] text-sm">
         No code blocks found inside CodeGroup.
       </div>
     );
   }
 
   return (
-    <div className="code-group not-prose my-4 rounded-lg border border-[var(--color-border)] overflow-hidden">
+    <div className="code-group not-prose my-4 rounded-lg border border-[var(--bd-border)] overflow-hidden">
       {/* Tabs */}
-      <div className="flex flex-wrap gap-0 bg-[var(--color-bg-tertiary)] border-b border-[var(--color-border)]">
+      <div className="flex flex-wrap gap-0 bg-[var(--bd-bg-muted)] border-b border-[var(--bd-border)]">
         {tabTitles.map((title, index) => {
           const isActive = activeIndex === index;
           return (
@@ -91,8 +91,8 @@ export function CodeGroup({ children, titles = [] }: CodeGroupProps) {
               onClick={() => setActiveIndex(index)}
               className={`shrink-0 px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap ${
                 isActive
-                  ? "bg-[var(--color-bg-secondary)] text-[var(--color-text)] border-b-2 border-primary-500 -mb-px"
-                  : "text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+                  ? "bg-[var(--bd-bg-subtle)] text-[var(--bd-text)] border-b-2 border-primary-500 -mb-px"
+                  : "text-[var(--bd-text-muted)] hover:text-[var(--bd-text)]"
               }`}
             >
               {title}
@@ -102,7 +102,7 @@ export function CodeGroup({ children, titles = [] }: CodeGroupProps) {
       </div>
 
       {/* Content */}
-      <div className="bg-[var(--color-bg-secondary)]">
+      <div className="bg-[var(--bd-bg-subtle)]">
         {codeBlocks.map((block, index) => (
           <div
             key={index}

package/src/components/mdx/DocAccordion.tsx

@@ -36,11 +36,11 @@ export function DocAccordion({
         <AccordionItem 
           key={value} 
           value={value}
-          className="border-b border-[var(--color-border)] last:border-b-0"
+          className="border-b border-[var(--bd-border)] last:border-b-0"
         >
           <div className="flex items-start gap-3 px-4">
             {item.icon && (
-              <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-[var(--color-bg-secondary)] text-lg shrink-0 mt-3">
+              <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-[var(--bd-bg-subtle)] text-lg shrink-0 mt-3">
                 {item.icon}
               </span>
             )}
@@ -48,7 +48,7 @@ export function DocAccordion({
               <AccordionTrigger className="text-left">
                 {item.title}
               </AccordionTrigger>
-              <AccordionContent className="text-[var(--color-text-secondary)]">
+              <AccordionContent className="text-[var(--bd-text-secondary)]">
                 {item.content}
               </AccordionContent>
             </div>
@@ -63,7 +63,7 @@ export function DocAccordion({
         type="single" 
         collapsible={collapsible}
         defaultValue={defaultValue as string}
-        className={cn("not-prose my-6 rounded-xl border border-[var(--color-border)] overflow-hidden", className)}
+        className={cn("not-prose my-6 rounded-xl border border-[var(--bd-border)] overflow-hidden", className)}
       >
         {renderItems()}
       </Accordion>
@@ -74,7 +74,7 @@ export function DocAccordion({
     <Accordion 
       type="multiple" 
       defaultValue={defaultValue as string[]}
-      className={cn("not-prose my-6 rounded-xl border border-[var(--color-border)] overflow-hidden", className)}
+      className={cn("not-prose my-6 rounded-xl border border-[var(--bd-border)] overflow-hidden", className)}
     >
       {renderItems()}
     </Accordion>

package/src/components/mdx/DocCard.tsx

@@ -24,7 +24,7 @@ export function DocCard({ title, icon, href, children }: DocCardProps) {
         <div className="absolute inset-0 bg-gradient-to-br from-primary-50/50 to-transparent dark:from-primary-950/30 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
         <CardHeader className="relative">
           {icon && (
-            <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--color-bg-secondary)] group-hover:bg-primary-50 dark:group-hover:bg-primary-950/50 mb-3 transition-colors">
+            <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--bd-bg-subtle)] group-hover:bg-primary-50 dark:group-hover:bg-primary-950/50 mb-3 transition-colors">
               <span className="text-xl">{icon}</span>
             </div>
           )}
@@ -33,7 +33,7 @@ export function DocCard({ title, icon, href, children }: DocCardProps) {
               {title}
             </CardTitle>
             {href && (
-              <ChevronRight className="h-4 w-4 text-[var(--color-text-muted)] opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" />
+              <ChevronRight className="h-4 w-4 text-[var(--bd-text-muted)] opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" />
             )}
           </div>
           {children && (

package/src/components/mdx/DocTabs.tsx

@@ -19,12 +19,12 @@ export function DocTabs({ items, defaultValue, className }: DocTabsProps) {
 
   return (
     <Tabs defaultValue={defaultTab} className={cn("not-prose my-6", className)}>
-      <TabsList className="w-full justify-start bg-[var(--color-bg-secondary)] rounded-lg p-1">
+      <TabsList className="w-full justify-start bg-[var(--bd-bg-subtle)] rounded-lg p-1">
         {items.map((item) => (
           <TabsTrigger 
             key={item.value} 
             value={item.value}
-            className="data-[state=active]:bg-[var(--color-bg)] data-[state=active]:shadow-sm"
+            className="data-[state=active]:bg-[var(--bd-bg)] data-[state=active]:shadow-sm"
           >
             {item.label}
           </TabsTrigger>
@@ -34,7 +34,7 @@ export function DocTabs({ items, defaultValue, className }: DocTabsProps) {
         <TabsContent 
           key={item.value} 
           value={item.value}
-          className="mt-4 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-4"
+          className="mt-4 rounded-lg border border-[var(--bd-border)] bg-[var(--bd-bg-subtle)] p-4"
         >
           <div className="text-sm">
             {item.children}

package/src/components/mdx/Expandable.tsx

@@ -20,27 +20,27 @@ export function Expandable({
   return (
     <div
       className={cn(
-        "not-prose border border-[var(--color-border)] rounded-lg overflow-hidden my-4",
+        "not-prose border border-[var(--bd-border)] rounded-lg overflow-hidden my-4",
         className
       )}
     >
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className="flex w-full items-center justify-between px-4 py-3 bg-[var(--color-bg-secondary)] hover:bg-[var(--color-bg-tertiary)] transition-colors text-left"
+        className="flex w-full items-center justify-between px-4 py-3 bg-[var(--bd-bg-subtle)] hover:bg-[var(--bd-bg-muted)] transition-colors text-left"
       >
-        <span className="text-sm font-medium text-[var(--color-text)]">
+        <span className="text-sm font-medium text-[var(--bd-text)]">
           {title}
         </span>
         <ChevronDown
           className={cn(
-            "h-4 w-4 text-[var(--color-text-muted)] transition-transform",
+            "h-4 w-4 text-[var(--bd-text-muted)] transition-transform",
             isOpen && "rotate-180"
           )}
         />
       </button>
       {isOpen && (
-        <div className="px-4 py-3 bg-[var(--color-bg)] border-t border-[var(--color-border)] text-sm text-[var(--color-text-secondary)]">
+        <div className="px-4 py-3 bg-[var(--bd-bg)] border-t border-[var(--bd-border)] text-sm text-[var(--bd-text-secondary)]">
           {children}
         </div>
       )}
@@ -77,28 +77,28 @@ export function ExpandableItem({
   const [isOpen, setIsOpen] = React.useState(defaultOpen);
 
   return (
-    <div className="not-prose border-l-2 border-[var(--color-border)] pl-4">
+    <div className="not-prose border-l-2 border-[var(--bd-border)] pl-4">
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
         className="flex items-center gap-2 text-left group"
       >
         {isOpen ? (
-          <Minus className="h-3 w-3 text-[var(--color-text-muted)]" />
+          <Minus className="h-3 w-3 text-[var(--bd-text-muted)]" />
         ) : (
-          <Plus className="h-3 w-3 text-[var(--color-text-muted)]" />
+          <Plus className="h-3 w-3 text-[var(--bd-text-muted)]" />
         )}
-        <code className="font-mono text-sm text-[var(--color-text)] group-hover:text-primary-600 dark:group-hover:text-primary-400">
+        <code className="font-mono text-sm text-[var(--bd-text)] group-hover:text-primary-600 dark:group-hover:text-primary-400">
           {title}
         </code>
         {type && (
-          <span className="font-mono text-xs text-[var(--color-text-muted)]">
+          <span className="font-mono text-xs text-[var(--bd-text-muted)]">
             {type}
           </span>
         )}
       </button>
       {isOpen && (
-        <div className="mt-2 ml-5 text-sm text-[var(--color-text-secondary)]">
+        <div className="mt-2 ml-5 text-sm text-[var(--bd-text-secondary)]">
           {children}
         </div>
       )}

package/src/components/mdx/FileTree.tsx

@@ -9,7 +9,7 @@ interface FileTreeProps {
 
 export function FileTree({ children, className }: FileTreeProps) {
   return (
-    <div className={cn("not-prose my-4 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)] p-4 font-mono text-sm", className)}>
+    <div className={cn("not-prose my-4 rounded-lg border border-[var(--bd-border)] bg-[var(--bd-bg-subtle)] p-4 font-mono text-sm", className)}>
       <ul className="space-y-1">{children}</ul>
     </div>
   );
@@ -22,8 +22,8 @@ interface FileProps {
 
 export function TreeFile({ name, icon }: FileProps) {
   return (
-    <li className="flex items-center gap-2 py-0.5 text-[var(--color-text-secondary)]">
-      {icon || <File className="h-4 w-4 text-[var(--color-text-muted)]" />}
+    <li className="flex items-center gap-2 py-0.5 text-[var(--bd-text-secondary)]">
+      {icon || <File className="h-4 w-4 text-[var(--bd-text-muted)]" />}
       <span>{name}</span>
     </li>
   );
@@ -44,12 +44,12 @@ export function TreeFolder({ name, children, defaultOpen = false }: FolderProps)
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className="flex w-full items-center gap-1 py-0.5 text-[var(--color-text)] hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+        className="flex w-full items-center gap-1 py-0.5 text-[var(--bd-text)] hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
       >
         {hasChildren && (
           <ChevronRight
             className={cn(
-              "h-3 w-3 text-[var(--color-text-muted)] transition-transform",
+              "h-3 w-3 text-[var(--bd-text-muted)] transition-transform",
               isOpen && "rotate-90"
             )}
           />
@@ -63,7 +63,7 @@ export function TreeFolder({ name, children, defaultOpen = false }: FolderProps)
         <span className="font-medium">{name}</span>
       </button>
       {isOpen && hasChildren && (
-        <ul className="ml-4 border-l border-[var(--color-border)] pl-3 mt-1 space-y-1">
+        <ul className="ml-4 border-l border-[var(--bd-border)] pl-3 mt-1 space-y-1">
           {children}
         </ul>
       )}

package/src/components/mdx/Frame.tsx

@@ -10,11 +10,11 @@ interface FrameProps {
 export function Frame({ children, caption, className }: FrameProps) {
   return (
     <figure className={cn("not-prose my-6", className)}>
-      <div className="overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)]">
+      <div className="overflow-hidden rounded-lg border border-[var(--bd-border)] bg-[var(--bd-bg-subtle)]">
         {children}
       </div>
       {caption && (
-        <figcaption className="mt-2 text-center text-sm text-[var(--color-text-muted)]">
+        <figcaption className="mt-2 text-center text-sm text-[var(--bd-text-muted)]">
           {caption}
         </figcaption>
       )}

package/src/components/mdx/Mermaid.tsx

@@ -78,8 +78,8 @@ export function Mermaid({ chart, className }: MermaidProps) {
 
   if (!svg) {
     return (
-      <div className={cn("not-prose my-4 flex items-center justify-center p-8 bg-[var(--color-bg-secondary)] rounded-lg", className)}>
-        <div className="text-sm text-[var(--color-text-muted)]">Loading diagram...</div>
+      <div className={cn("not-prose my-4 flex items-center justify-center p-8 bg-[var(--bd-bg-subtle)] rounded-lg", className)}>
+        <div className="text-sm text-[var(--bd-text-muted)]">Loading diagram...</div>
       </div>
     );
   }
@@ -87,7 +87,7 @@ export function Mermaid({ chart, className }: MermaidProps) {
   return (
     <div
       ref={containerRef}
-      className={cn("not-prose my-4 flex justify-center overflow-x-auto rounded-lg bg-[var(--color-bg)] p-4", className)}
+      className={cn("not-prose my-4 flex justify-center overflow-x-auto rounded-lg bg-[var(--bd-bg)] p-4", className)}
       dangerouslySetInnerHTML={{ __html: svg }}
     />
   );

package/src/components/mdx/ParamField.tsx

@@ -21,16 +21,16 @@ export function ParamField({
   return (
     <div
       className={cn(
-        "not-prose border-b border-[var(--color-border)] py-4 last:border-b-0",
+        "not-prose border-b border-[var(--bd-border)] py-4 last:border-b-0",
         className
       )}
     >
       <div className="flex flex-wrap items-baseline gap-2">
-        <code className="font-mono text-sm font-semibold text-[var(--color-text)]">
+        <code className="font-mono text-sm font-semibold text-[var(--bd-text)]">
           {name}
         </code>
         {type && (
-          <span className="font-mono text-xs text-[var(--color-text-muted)]">
+          <span className="font-mono text-xs text-[var(--bd-text-muted)]">
             {type}
           </span>
         )}
@@ -40,13 +40,13 @@ export function ParamField({
           </span>
         )}
         {defaultValue && (
-          <span className="text-xs text-[var(--color-text-muted)]">
+          <span className="text-xs text-[var(--bd-text-muted)]">
             default: <code className="font-mono">{defaultValue}</code>
           </span>
         )}
       </div>
       {children && (
-        <div className="mt-2 text-sm text-[var(--color-text-secondary)] prose prose-sm dark:prose-invert max-w-none">
+        <div className="mt-2 text-sm text-[var(--bd-text-secondary)] prose prose-sm dark:prose-invert max-w-none">
           {children}
         </div>
       )}
@@ -64,11 +64,11 @@ export function ParamFieldGroup({ children, title, className }: ParamFieldGroupP
   return (
     <div className={cn("my-6", className)}>
       {title && (
-        <h4 className="text-sm font-semibold text-[var(--color-text)] mb-4 uppercase tracking-wide">
+        <h4 className="text-sm font-semibold text-[var(--bd-text)] mb-4 uppercase tracking-wide">
           {title}
         </h4>
       )}
-      <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg)] px-4">
+      <div className="rounded-lg border border-[var(--bd-border)] bg-[var(--bd-bg)] px-4">
         {children}
       </div>
     </div>

package/src/components/mdx/ResponseField.tsx

@@ -17,22 +17,22 @@ export function ResponseField({
   return (
     <div
       className={cn(
-        "not-prose border-b border-[var(--color-border)] py-4 first:pt-0 last:border-b-0",
+        "not-prose border-b border-[var(--bd-border)] py-4 first:pt-0 last:border-b-0",
         className
       )}
     >
       <div className="flex flex-wrap items-baseline gap-2">
-        <code className="font-mono text-sm font-semibold text-[var(--color-text)]">
+        <code className="font-mono text-sm font-semibold text-[var(--bd-text)]">
           {name}
         </code>
         {type && (
-          <span className="font-mono text-xs text-[var(--color-text-muted)]">
+          <span className="font-mono text-xs text-[var(--bd-text-muted)]">
             {type}
           </span>
         )}
       </div>
       {children && (
-        <div className="mt-2 text-sm text-[var(--color-text-secondary)] prose prose-sm dark:prose-invert max-w-none">
+        <div className="mt-2 text-sm text-[var(--bd-text-secondary)] prose prose-sm dark:prose-invert max-w-none">
           {children}
         </div>
       )}
@@ -50,11 +50,11 @@ export function ResponseFieldGroup({ children, title, className }: ResponseField
   return (
     <div className={cn("my-6", className)}>
       {title && (
-        <h4 className="text-sm font-semibold text-[var(--color-text)] mb-4 uppercase tracking-wide">
+        <h4 className="text-sm font-semibold text-[var(--bd-text)] mb-4 uppercase tracking-wide">
           {title}
         </h4>
       )}
-      <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-bg)] px-4">
+      <div className="rounded-lg border border-[var(--bd-border)] bg-[var(--bd-bg)] px-4">
         {children}
       </div>
     </div>

package/src/components/mdx/Step.astro

@@ -7,8 +7,8 @@ const { title } = Astro.props;
 ---
 
 <div class="relative">
-  <h3 class="font-semibold text-[var(--color-text)] mb-2">{title}</h3>
-  <div class="text-sm text-[var(--color-text-secondary)]">
+  <h3 class="font-semibold text-[var(--bd-text)] mb-2">{title}</h3>
+  <div class="text-sm text-[var(--bd-text-secondary)]">
     <slot />
   </div>
 </div>