@barodoc/theme-docs 3.0.0 → 6.0.0

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/ImageZoom.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import mediumZoom from "medium-zoom";
+import type { Zoom } from "medium-zoom";
+
+interface ImageZoomProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  zoomSrc?: string;
+}
+
+export function ImageZoom({ zoomSrc, ...props }: ImageZoomProps) {
+  const imgRef = React.useRef<HTMLImageElement>(null);
+  const zoomRef = React.useRef<Zoom | null>(null);
+
+  React.useEffect(() => {
+    if (!imgRef.current) return;
+
+    zoomRef.current = mediumZoom(imgRef.current, {
+      margin: 24,
+      background: "var(--bd-bg)",
+      scrollOffset: 0,
+    });
+
+    return () => {
+      zoomRef.current?.detach();
+    };
+  }, []);
+
+  return (
+    <img
+      ref={imgRef}
+      data-zoom-src={zoomSrc}
+      className="bd-image-zoom"
+      {...props}
+    />
+  );
+}

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>

package/src/components/mdx/Steps.astro

@@ -2,7 +2,7 @@
 // Steps component for step-by-step guides
 ---
 
-<div class="not-prose my-6 space-y-4 border-l-2 border-[var(--color-border)] pl-6 ml-2">
+<div class="not-prose my-6 space-y-4 border-l-2 border-[var(--bd-border)] pl-6 ml-2">
   <slot />
 </div>
 
@@ -23,8 +23,8 @@
     height: 1.5rem;
     font-size: 0.75rem;
     font-weight: 600;
-    background-color: var(--color-bg);
-    border: 2px solid var(--color-border);
+    background-color: var(--bd-bg);
+    border: 2px solid var(--bd-border);
     border-radius: 9999px;
   }
 </style>

package/src/components/mdx/Steps.tsx

@@ -8,15 +8,8 @@ interface StepsProps {
 
 export function Steps({ children, className }: StepsProps) {
   return (
-    <div className={cn("not-prose my-6 ml-4 border-l-2 border-[var(--color-border)] pl-6 space-y-6", className)}>
-      {React.Children.map(children, (child, index) => {
-        if (React.isValidElement(child)) {
-          return React.cloneElement(child as React.ReactElement<StepProps>, {
-            stepNumber: index + 1,
-          });
-        }
-        return child;
-      })}
+    <div className={cn("bd-steps", className)}>
+      {children}
     </div>
   );
 }
@@ -24,22 +17,20 @@ export function Steps({ children, className }: StepsProps) {
 interface StepProps {
   title: string;
   children?: React.ReactNode;
-  stepNumber?: number;
   className?: string;
 }
 
-export function Step({ title, children, stepNumber = 1, className }: StepProps) {
+export function Step({ title, children, className }: StepProps) {
   return (
-    <div className={cn("relative", className)}>
-      {/* Step number circle */}
-      <div className="absolute -left-[2.125rem] flex h-6 w-6 items-center justify-center rounded-full border-2 border-[var(--color-border)] bg-[var(--color-bg)] text-xs font-semibold text-[var(--color-text-muted)]">
-        {stepNumber}
+    <div className={cn("bd-step", className)}>
+      <div className="bd-step-indicator">
+        <span className="bd-step-number" />
+        <div className="bd-step-connector" />
       </div>
-      {/* Content */}
-      <div>
-        <h3 className="font-semibold text-[var(--color-text)] mb-2">{title}</h3>
+      <div className="bd-step-content">
+        <h3 className="bd-step-title">{title}</h3>
         {children && (
-          <div className="text-sm text-[var(--color-text-secondary)] prose prose-sm dark:prose-invert max-w-none">
+          <div className="bd-step-body prose prose-sm dark:prose-invert max-w-none">
             {children}
           </div>
         )}

package/src/components/mdx/Tabs.tsx

@@ -16,22 +16,19 @@ export function Tabs({ items, defaultValue }: TabsProps) {
 
   return (
     <div className="not-prose my-4">
-      <div className="flex border-b border-[var(--color-border)]">
+      <div className="flex border-b border-[var(--bd-border)]">
         {items.map((item) => {
           const isActive = activeTab === item.value;
           return (
             <button
               key={item.value}
               type="button"
-              onClick={() => {
-                console.log('Tab clicked:', item.value);
-                setActiveTab(item.value);
-              }}
+              onClick={() => setActiveTab(item.value)}
               style={{ cursor: 'pointer' }}
               className={`px-4 py-2 text-sm font-medium transition-colors ${
                 isActive
-                  ? "border-b-2 border-blue-600 text-blue-600 -mb-px"
-                  : "text-gray-500 hover:text-gray-900"
+                  ? "border-b-2 border-primary-500 text-primary-600 dark:text-primary-400 -mb-px"
+                  : "text-[var(--bd-text-muted)] hover:text-[var(--bd-text)]"
               }`}
             >
               {item.label}
@@ -45,7 +42,7 @@ export function Tabs({ items, defaultValue }: TabsProps) {
           if (!isActive) return null;
           return (
             <div key={item.value}>
-              <pre className="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md p-3 text-sm overflow-x-auto">
+              <pre className="bg-[var(--bd-bg-code)] border border-[var(--bd-border)] rounded-md p-3 text-sm overflow-x-auto">
                 <code>{item.children}</code>
               </pre>
             </div>