@barodoc/theme-docs 3.0.0 → 6.0.0

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

@@ -0,0 +1,79 @@
+import * as React from "react";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+
+interface VersionConfig {
+  label: string;
+  path: string;
+}
+
+interface VersionSwitcherProps {
+  versions: VersionConfig[];
+  currentPath: string;
+}
+
+export function VersionSwitcher({ versions, currentPath }: VersionSwitcherProps) {
+  if (!versions || versions.length <= 1) return null;
+
+  const current = versions.find((v) => currentPath.includes(`/docs/${v.path}/`)) || versions[0];
+
+  function switchVersion(target: VersionConfig) {
+    const regex = /\/docs\/([^/]+)\//;
+    const match = currentPath.match(regex);
+    if (match) {
+      const newPath = currentPath.replace(`/docs/${match[1]}/`, `/docs/${target.path}/`);
+      window.location.href = newPath;
+    } else {
+      window.location.href = `/docs/${target.path}/`;
+    }
+  }
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button className="bd-version-trigger">
+          {current.label}
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content className="bd-version-menu" sideOffset={4} align="start">
+          {versions.map((v) => (
+            <DropdownMenu.Item
+              key={v.path}
+              className={`bd-version-item ${v.path === current.path ? "bd-version-active" : ""}`}
+              onSelect={() => switchVersion(v)}
+            >
+              {v.label}
+              {v.path === current.path && (
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              )}
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}

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>

package/src/components/index.ts

@@ -24,6 +24,11 @@ export { Expandable, ExpandableList, ExpandableItem } from "./mdx/Expandable.tsx
 export { Icon, CheckIcon, XIcon, InfoIcon, WarningIcon } from "./mdx/Icon.tsx";
 export { Steps, Step } from "./mdx/Steps.tsx";
 export { Mermaid } from "./mdx/Mermaid.tsx";
+export { ImageZoom } from "./mdx/ImageZoom.tsx";
+export { Video } from "./mdx/Video.tsx";
+export { ApiPlayground } from "./mdx/ApiPlayground.tsx";
+
+export { VersionSwitcher } from "./VersionSwitcher.tsx";
 
 // Legacy exports for backwards compatibility
 export { Tabs, Tab } from "./mdx/Tabs.tsx";

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

@@ -0,0 +1,200 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+interface ParamDef {
+  name: string;
+  in: "query" | "path" | "header" | "body";
+  type?: string;
+  required?: boolean;
+  defaultValue?: string;
+  description?: string;
+}
+
+interface ApiPlaygroundProps {
+  method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+  url: string;
+  params?: ParamDef[];
+  body?: string;
+  headers?: Record<string, string>;
+  className?: string;
+}
+
+const methodColors: Record<string, string> = {
+  GET: "bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-300",
+  POST: "bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300",
+  PUT: "bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300",
+  PATCH: "bg-orange-100 text-orange-800 dark:bg-orange-950 dark:text-orange-300",
+  DELETE: "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300",
+};
+
+export function ApiPlayground({
+  method = "GET",
+  url,
+  params = [],
+  body: initialBody,
+  headers: initialHeaders = {},
+  className,
+}: ApiPlaygroundProps) {
+  const [paramValues, setParamValues] = React.useState<Record<string, string>>(() => {
+    const vals: Record<string, string> = {};
+    for (const p of params) {
+      vals[p.name] = p.defaultValue || "";
+    }
+    return vals;
+  });
+  const [bodyValue, setBodyValue] = React.useState(initialBody || "");
+  const [response, setResponse] = React.useState<{
+    status: number;
+    statusText: string;
+    body: string;
+    time: number;
+  } | null>(null);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  function buildUrl(): string {
+    let finalUrl = url;
+    const queryParams = new URLSearchParams();
+
+    for (const p of params) {
+      const val = paramValues[p.name] || "";
+      if (p.in === "path") {
+        finalUrl = finalUrl.replace(`{${p.name}}`, encodeURIComponent(val));
+      } else if (p.in === "query" && val) {
+        queryParams.set(p.name, val);
+      }
+    }
+
+    const qs = queryParams.toString();
+    return qs ? `${finalUrl}?${qs}` : finalUrl;
+  }
+
+  async function sendRequest() {
+    setLoading(true);
+    setError(null);
+    setResponse(null);
+
+    const start = performance.now();
+    const reqUrl = buildUrl();
+
+    const headers: Record<string, string> = { ...initialHeaders };
+    for (const p of params) {
+      if (p.in === "header" && paramValues[p.name]) {
+        headers[p.name] = paramValues[p.name];
+      }
+    }
+
+    const hasBody = ["POST", "PUT", "PATCH"].includes(method) && bodyValue;
+    if (hasBody && !headers["Content-Type"]) {
+      headers["Content-Type"] = "application/json";
+    }
+
+    try {
+      const res = await fetch(reqUrl, {
+        method,
+        headers,
+        body: hasBody ? bodyValue : undefined,
+      });
+
+      const elapsed = Math.round(performance.now() - start);
+      let text: string;
+      try {
+        const json = await res.json();
+        text = JSON.stringify(json, null, 2);
+      } catch {
+        text = await res.text();
+      }
+
+      setResponse({ status: res.status, statusText: res.statusText, body: text, time: elapsed });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Request failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className={cn("bd-playground", className)}>
+      {/* Header */}
+      <div className="bd-playground-header">
+        <span className={cn("bd-playground-method", methodColors[method])}>
+          {method}
+        </span>
+        <code className="bd-playground-url">{url}</code>
+        <button
+          className="bd-playground-send"
+          onClick={sendRequest}
+          disabled={loading}
+        >
+          {loading ? "Sending..." : "Send"}
+        </button>
+      </div>
+
+      {/* Parameters */}
+      {params.length > 0 && (
+        <div className="bd-playground-params">
+          {params.map((p) => (
+            <div key={p.name} className="bd-playground-param">
+              <label className="bd-playground-label">
+                <span>{p.name}</span>
+                <span className="bd-playground-param-meta">
+                  {p.in}
+                  {p.required && <span className="bd-playground-required">*</span>}
+                </span>
+              </label>
+              <input
+                type="text"
+                className="bd-playground-input"
+                value={paramValues[p.name] || ""}
+                placeholder={p.description || p.type || ""}
+                onChange={(e) =>
+                  setParamValues((prev) => ({ ...prev, [p.name]: e.target.value }))
+                }
+              />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Body */}
+      {["POST", "PUT", "PATCH"].includes(method) && (
+        <div className="bd-playground-body-section">
+          <label className="bd-playground-label">Request Body</label>
+          <textarea
+            className="bd-playground-textarea"
+            value={bodyValue}
+            onChange={(e) => setBodyValue(e.target.value)}
+            rows={6}
+            placeholder='{ "key": "value" }'
+          />
+        </div>
+      )}
+
+      {/* Response */}
+      {(response || error) && (
+        <div className="bd-playground-response">
+          {error ? (
+            <div className="bd-playground-error">{error}</div>
+          ) : response ? (
+            <>
+              <div className="bd-playground-response-header">
+                <span
+                  className={cn(
+                    "bd-playground-status",
+                    response.status < 300 ? "bd-status-ok" : "bd-status-err"
+                  )}
+                >
+                  {response.status} {response.statusText}
+                </span>
+                <span className="bd-playground-time">{response.time}ms</span>
+              </div>
+              <pre className="bd-playground-pre">
+                <code>{response.body}</code>
+              </pre>
+            </>
+          ) : null}
+        </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>