@barodoc/theme-docs 3.0.0 → 6.0.0

package/src/layouts/DocsLayout.astro

@@ -7,6 +7,8 @@ import MobileNav from "../components/MobileNav.astro";
 import CodeCopy from "../components/CodeCopy.astro";
 import Breadcrumb from "../components/Breadcrumb.astro";
 import Banner from "../components/Banner.astro";
+import KeyboardShortcuts from "../components/KeyboardShortcuts.astro";
+import Contributors from "../components/Contributors.astro";
 import { defaultLocale } from "virtual:barodoc/i18n";
 import { getLocaleFromPath } from "@barodoc/core";
 import config from "virtual:barodoc/config";
@@ -30,9 +32,11 @@ interface Props {
   editUrl?: string | null;
   lastUpdated?: Date | null;
   breadcrumbs?: BreadcrumbItem[];
+  readingTime?: string;
+  filePath?: string;
 }
 
-const { title, description, headings = [], prevPage, nextPage, editUrl, lastUpdated, breadcrumbs = [] } = Astro.props;
+const { title, description, headings = [], prevPage, nextPage, editUrl, lastUpdated, breadcrumbs = [], readingTime, filePath } = Astro.props;
 const currentPath = Astro.url.pathname;
 
 // Get locale from path
@@ -48,40 +52,48 @@ const feedbackEndpoint = config.feedback?.endpoint;
   <Header currentLocale={currentLocale} currentPath={currentPath} />
   
   <!-- Centered container for docs layout -->
-  <div class="w-full min-w-0 min-h-[calc(100vh-3.5rem)] flex justify-center overflow-x-hidden">
-    <div class="flex w-full max-w-[1120px] min-w-0">
+  <div class="w-full min-w-0 min-h-[calc(100vh-3.5rem)] flex justify-center overflow-x-clip">
+    <div class="flex w-full max-w-[1280px] min-w-0">
       <!-- Desktop Sidebar -->
-      <aside class="hidden lg:block w-[220px] shrink-0">
-        <div class="sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto py-6 pr-4">
+      <aside class="hidden lg:block w-[240px] shrink-0 border-r border-[var(--bd-border)]">
+        <div class="sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto overscroll-contain pt-2 pb-8 px-4 sidebar-scroll">
           <Sidebar currentPath={currentPath} currentLocale={currentLocale} />
         </div>
       </aside>
 
-      <!-- Main Content: no min-width on mobile to avoid horizontal scroll -->
-      <main class="flex-1 min-w-0 lg:min-w-[650px] max-w-[720px]">
-        <div class="px-4 py-6 sm:px-6 sm:py-8 lg:px-8 lg:py-8">
+      <!-- Main Content -->
+      <main class="flex-1 min-w-0 max-w-[768px]">
+        <div class="px-4 py-8 sm:px-6 sm:py-10 lg:px-10 lg:py-10">
           {breadcrumbs.length > 0 && <Breadcrumb items={breadcrumbs} />}
+          {readingTime && (
+            <div class="bd-reading-time mb-4">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+              </svg>
+              <span>{readingTime}</span>
+            </div>
+          )}
           <article class="prose prose-gray dark:prose-invert max-w-none min-w-0 overflow-x-auto">
             <slot />
           </article>
           
           <!-- Page Navigation -->
           {(prevPage || nextPage) && (
-            <nav class="mt-8 pt-6 border-t border-[var(--color-border)]" aria-label="Page navigation">
+            <nav class="mt-12 pt-8 border-t border-[var(--bd-border)]" aria-label="Page navigation">
               <div class="grid grid-cols-2 gap-4">
                 <div class="col-span-1">
                   {prevPage && (
                     <a 
                       href={prevPage.href}
-                      class="group flex flex-col gap-1 p-3 rounded-lg border border-[var(--color-border)] hover:border-primary-300 dark:hover:border-primary-700 hover:bg-[var(--color-bg-secondary)] transition-all"
+                      class="group flex flex-col gap-1.5 p-4 rounded-lg border border-[var(--bd-border)] hover:border-primary-400/50 dark:hover:border-primary-500/40 hover:shadow-[var(--bd-shadow-sm)] transition-all"
                     >
-                      <span class="text-xs text-[var(--color-text-muted)] flex items-center gap-1">
+                      <span class="text-xs font-medium text-[var(--bd-text-muted)] flex items-center gap-1">
                         <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                         </svg>
                         Previous
                       </span>
-                      <span class="text-sm font-medium text-[var(--color-text)] group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+                      <span class="text-sm font-medium text-[var(--bd-text)] group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
                         {prevPage.title}
                       </span>
                     </a>
@@ -91,15 +103,15 @@ const feedbackEndpoint = config.feedback?.endpoint;
                   {nextPage && (
                     <a 
                       href={nextPage.href}
-                      class="group flex flex-col gap-1 p-3 rounded-lg border border-[var(--color-border)] hover:border-primary-300 dark:hover:border-primary-700 hover:bg-[var(--color-bg-secondary)] transition-all text-right"
+                      class="group flex flex-col gap-1.5 p-4 rounded-lg border border-[var(--bd-border)] hover:border-primary-400/50 dark:hover:border-primary-500/40 hover:shadow-[var(--bd-shadow-sm)] transition-all text-right"
                     >
-                      <span class="text-xs text-[var(--color-text-muted)] flex items-center gap-1 justify-end">
+                      <span class="text-xs font-medium text-[var(--bd-text-muted)] flex items-center gap-1 justify-end">
                         Next
                         <svg class="w-3 h-3" 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>
                       </span>
-                      <span class="text-sm font-medium text-[var(--color-text)] group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+                      <span class="text-sm font-medium text-[var(--bd-text)] group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
                         {nextPage.title}
                       </span>
                     </a>
@@ -110,8 +122,9 @@ const feedbackEndpoint = config.feedback?.endpoint;
           )}
 
           <!-- Page footer -->
-          <footer class="mt-6 pt-4 border-t border-[var(--color-border-light)] flex flex-col gap-3">
-            <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-[var(--color-text-muted)]">
+          <footer class="mt-8 pt-6 border-t border-[var(--bd-border-subtle)] flex flex-col gap-3">
+            {filePath && <Contributors filePath={filePath} />}
+            <div class="flex flex-wrap items-center justify-between gap-2 text-[13px] text-[var(--bd-text-muted)]">
               {lastUpdated && (
                 <span>
                   Last updated: <time datetime={lastUpdated.toISOString()}>
@@ -124,7 +137,7 @@ const feedbackEndpoint = config.feedback?.endpoint;
                   href={editUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 hover:underline"
+                  class="inline-flex items-center gap-1.5 text-[var(--bd-text-secondary)] hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
                 >
                   <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
@@ -134,12 +147,12 @@ const feedbackEndpoint = config.feedback?.endpoint;
               )}
             </div>
             {hasFeedback && (
-              <div class="doc-feedback flex items-center gap-3 text-sm text-[var(--color-text-muted)]" data-endpoint={feedbackEndpoint}>
+              <div class="doc-feedback flex items-center gap-3 text-sm text-[var(--bd-text-muted)]" data-endpoint={feedbackEndpoint}>
                 <span>Was this page helpful?</span>
-                <button type="button" class="feedback-btn inline-flex items-center gap-1 px-2 py-1 rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-value="yes" aria-label="Yes">
+                <button type="button" class="feedback-btn inline-flex items-center gap-1 px-2 py-1 rounded border border-[var(--bd-border)] hover:bg-[var(--bd-bg-subtle)] transition-colors" data-value="yes" aria-label="Yes">
                   <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14z" /></svg>
                 </button>
-                <button type="button" class="feedback-btn inline-flex items-center gap-1 px-2 py-1 rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-value="no" aria-label="No">
+                <button type="button" class="feedback-btn inline-flex items-center gap-1 px-2 py-1 rounded border border-[var(--bd-border)] hover:bg-[var(--bd-bg-subtle)] transition-colors" data-value="no" aria-label="No">
                   <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 15v3.586a1 1 0 01-.293.707l-2 2A1 1 0 016 20.586V15m4 0h5.17a2 2 0 001.98-1.742l1.08-7.56A1 1 0 0017.242 4.5H10m0 10.5V4.5m0 0H7.5A2.5 2.5 0 005 7v3" /></svg>
                 </button>
                 <span class="feedback-thanks hidden text-green-600 dark:text-green-400">Thanks for your feedback!</span>
@@ -151,8 +164,8 @@ const feedbackEndpoint = config.feedback?.endpoint;
 
       <!-- Table of Contents -->
       {headings.length > 0 && (
-        <aside class="hidden xl:block w-[180px] shrink-0">
-          <div class="sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto py-6 pl-6">
+        <aside class="hidden xl:block w-[220px] shrink-0">
+          <div class="sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto py-10 pl-8">
             <TableOfContents headings={headings} />
           </div>
         </aside>
@@ -166,6 +179,42 @@ const feedbackEndpoint = config.feedback?.endpoint;
   <!-- Code copy functionality -->
   <CodeCopy />
 
+  <!-- Keyboard shortcuts -->
+  <KeyboardShortcuts />
+
+  <!-- Image zoom for all prose images -->
+  <script>
+    async function initImageZoom() {
+      const images = document.querySelectorAll('.prose img:not(.bd-no-zoom):not(.medium-zoom-image)');
+      if (images.length === 0) return;
+      const { default: mediumZoom } = await import('medium-zoom');
+      mediumZoom(images as any, {
+        margin: 24,
+        background: 'var(--bd-bg)',
+        scrollOffset: 0,
+      });
+    }
+    initImageZoom();
+    document.addEventListener('astro:page-load', initImageZoom);
+  </script>
+
+  <!-- Heading anchor links -->
+  <script>
+    function initHeadingAnchors() {
+      document.querySelectorAll('.prose h2[id], .prose h3[id], .prose h4[id]').forEach((heading) => {
+        if (heading.querySelector('.heading-anchor')) return;
+        const anchor = document.createElement('a');
+        anchor.className = 'heading-anchor';
+        anchor.href = `#${heading.id}`;
+        anchor.textContent = '#';
+        anchor.setAttribute('aria-label', `Link to ${heading.textContent}`);
+        heading.appendChild(anchor);
+      });
+    }
+    initHeadingAnchors();
+    document.addEventListener('astro:page-load', initHeadingAnchors);
+  </script>
+
   {hasFeedback && (
     <script>
       function initFeedback() {

package/src/pages/404.astro

@@ -8,10 +8,10 @@ const pathname = new URL(Astro.request.url).pathname;
 <BaseLayout title={`${config.name} · Page not found`} description="The page you are looking for does not exist.">
   <div class="min-h-screen flex flex-col items-center justify-center px-4">
     <div class="text-center max-w-md">
-      <p class="text-8xl font-bold text-[var(--color-text-muted)] select-none" aria-hidden="true">404</p>
-      <h1 class="text-2xl font-semibold text-[var(--color-text)] mt-4">Page not found</h1>
-      <p class="text-[var(--color-text-secondary)] mt-2">
-        The page at <code class="text-sm bg-[var(--color-bg-secondary)] px-2 py-1 rounded break-all">{pathname}</code> does not exist.
+      <p class="text-8xl font-bold text-[var(--bd-text-muted)] select-none" aria-hidden="true">404</p>
+      <h1 class="text-2xl font-semibold text-[var(--bd-text)] mt-4">Page not found</h1>
+      <p class="text-[var(--bd-text-secondary)] mt-2">
+        The page at <code class="text-sm bg-[var(--bd-bg-subtle)] px-2 py-1 rounded break-all">{pathname}</code> does not exist.
       </p>
       <div class="flex flex-col sm:flex-row items-center justify-center gap-3 mt-8">
         <a
@@ -22,7 +22,7 @@ const pathname = new URL(Astro.request.url).pathname;
         </a>
         <a
           href="/docs/introduction"
-          class="px-5 py-2.5 border border-[var(--color-border)] text-[var(--color-text)] rounded-xl hover:bg-[var(--color-bg-secondary)] transition-colors font-medium"
+          class="px-5 py-2.5 border border-[var(--bd-border)] text-[var(--bd-text)] rounded-xl hover:bg-[var(--bd-bg-subtle)] transition-colors font-medium"
         >
           Documentation
         </a>

package/src/pages/blog/[...slug].astro

@@ -0,0 +1,39 @@
+---
+import { getCollection } from "astro:content";
+import BlogLayout from "../../layouts/BlogLayout.astro";
+import readingTime from "reading-time";
+
+export async function getStaticPaths() {
+  let posts: Awaited<ReturnType<typeof getCollection<"blog">>> = [];
+  try {
+    posts = await getCollection("blog");
+  } catch {
+    return [];
+  }
+
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+interface Props {
+  post: Awaited<ReturnType<typeof getCollection<"blog">>>[number];
+}
+
+const { post } = Astro.props;
+const { Content } = await post.render();
+const readTime = readingTime(post.body ?? "");
+---
+
+<BlogLayout
+  title={post.data.title}
+  description={post.data.description || post.data.excerpt}
+  date={post.data.date ? new Date(post.data.date) : undefined}
+  author={post.data.author}
+  image={post.data.image}
+  tags={post.data.tags}
+  readingTime={readTime.text}
+>
+  <Content />
+</BlogLayout>

package/src/pages/blog/index.astro

@@ -0,0 +1,92 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Header from "../../components/Header.astro";
+import Banner from "../../components/Banner.astro";
+import { defaultLocale } from "virtual:barodoc/i18n";
+import { getLocaleFromPath } from "@barodoc/core";
+import config from "virtual:barodoc/config";
+
+const currentPath = Astro.url.pathname;
+const i18nConfig = { defaultLocale, locales: [defaultLocale] };
+const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
+
+let posts: Awaited<ReturnType<typeof getCollection<"blog">>> = [];
+try {
+  posts = await getCollection("blog");
+} catch {
+  // blog collection may not exist
+}
+
+const sortedPosts = posts.sort((a, b) => {
+  const dateA = a.data.date ? new Date(a.data.date).getTime() : 0;
+  const dateB = b.data.date ? new Date(b.data.date).getTime() : 0;
+  return dateB - dateA;
+});
+---
+
+<BaseLayout title={`Blog - ${config.name}`} description="Latest blog posts and updates">
+  <Banner />
+  <Header currentLocale={currentLocale} currentPath={currentPath} />
+  
+  <div class="w-full min-w-0 min-h-[calc(100vh-3.5rem)] flex justify-center">
+    <div class="w-full max-w-[960px] px-4 py-10 sm:px-6 lg:px-8">
+      <header class="mb-10">
+        <h1 class="text-3xl font-bold tracking-tight text-[var(--bd-text-heading)]">Blog</h1>
+        <p class="mt-2 text-[var(--bd-text-secondary)]">Latest posts and updates</p>
+      </header>
+
+      {sortedPosts.length === 0 ? (
+        <p class="text-[var(--bd-text-muted)]">No posts yet.</p>
+      ) : (
+        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {sortedPosts.map((post) => (
+            <a
+              href={`/blog/${post.slug}`}
+              class="group flex flex-col rounded-lg border border-[var(--bd-border)] hover:border-primary-400/50 dark:hover:border-primary-500/40 hover:shadow-[var(--bd-shadow-sm)] transition-all overflow-hidden"
+            >
+              {post.data.image && (
+                <div class="aspect-[16/9] overflow-hidden bg-[var(--bd-bg-subtle)]">
+                  <img
+                    src={post.data.image}
+                    alt={post.data.title}
+                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                    loading="lazy"
+                  />
+                </div>
+              )}
+              <div class="flex flex-col gap-2 p-5">
+                {post.data.tags && post.data.tags.length > 0 && (
+                  <div class="flex flex-wrap gap-1.5">
+                    {post.data.tags.slice(0, 3).map((tag: string) => (
+                      <span class="text-[11px] font-medium px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                <h2 class="text-base font-semibold text-[var(--bd-text)] group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors leading-snug">
+                  {post.data.title}
+                </h2>
+                {post.data.excerpt && (
+                  <p class="text-sm text-[var(--bd-text-muted)] line-clamp-2">
+                    {post.data.excerpt}
+                  </p>
+                )}
+                <div class="mt-auto pt-2 flex items-center gap-2 text-xs text-[var(--bd-text-muted)]">
+                  {post.data.author && <span>{post.data.author}</span>}
+                  {post.data.author && post.data.date && <span>&middot;</span>}
+                  {post.data.date && (
+                    <time datetime={new Date(post.data.date).toISOString()}>
+                      {new Date(post.data.date).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" })}
+                    </time>
+                  )}
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  </div>
+</BaseLayout>

package/src/pages/changelog/index.astro

@@ -0,0 +1,72 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Header from "../../components/Header.astro";
+import Banner from "../../components/Banner.astro";
+import { defaultLocale } from "virtual:barodoc/i18n";
+import { getLocaleFromPath } from "@barodoc/core";
+import config from "virtual:barodoc/config";
+
+const currentPath = Astro.url.pathname;
+const i18nConfig = { defaultLocale, locales: [defaultLocale] };
+const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
+
+let entries: Awaited<ReturnType<typeof getCollection<"changelog">>> = [];
+try {
+  entries = await getCollection("changelog");
+} catch {
+  // changelog collection may not exist
+}
+
+const sorted = entries.sort((a, b) => {
+  return new Date(b.data.date).getTime() - new Date(a.data.date).getTime();
+});
+---
+
+<BaseLayout title={`Changelog - ${config.name}`} description="Release history and changelog">
+  <Banner />
+  <Header currentLocale={currentLocale} currentPath={currentPath} />
+
+  <div class="w-full min-w-0 min-h-[calc(100vh-3.5rem)] flex justify-center">
+    <div class="w-full max-w-[720px] px-4 py-10 sm:px-6 lg:px-8">
+      <header class="mb-10">
+        <h1 class="text-3xl font-bold tracking-tight text-[var(--bd-text-heading)]">Changelog</h1>
+        <p class="mt-2 text-[var(--bd-text-secondary)]">Release history and notable changes</p>
+      </header>
+
+      {sorted.length === 0 ? (
+        <p class="text-[var(--bd-text-muted)]">No changelog entries yet.</p>
+      ) : (
+        <div class="bd-changelog-timeline">
+          {sorted.map(async (entry) => {
+            const { Content } = await entry.render();
+            return (
+              <article class="bd-changelog-entry">
+                <div class="bd-changelog-marker">
+                  <div class="bd-changelog-dot" />
+                  <div class="bd-changelog-line" />
+                </div>
+                <div class="bd-changelog-content">
+                  <div class="bd-changelog-header">
+                    <span class="bd-changelog-version">{entry.data.version}</span>
+                    <time class="bd-changelog-date" datetime={new Date(entry.data.date).toISOString()}>
+                      {new Date(entry.data.date).toLocaleDateString("en-US", {
+                        year: "numeric", month: "long", day: "numeric",
+                      })}
+                    </time>
+                  </div>
+                  {entry.data.title && (
+                    <h2 class="bd-changelog-title">{entry.data.title}</h2>
+                  )}
+                  <div class="prose prose-sm prose-gray dark:prose-invert max-w-none bd-changelog-body">
+                    <Content />
+                  </div>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  </div>
+</BaseLayout>

package/src/pages/docs/[...slug].astro

@@ -4,6 +4,7 @@ import DocsLayout from "../../layouts/DocsLayout.astro";
 import config from "virtual:barodoc/config";
 import { defaultLocale, locales } from "virtual:barodoc/i18n";
 import { getLocalizedNavGroup } from "@barodoc/core";
+import readingTime from "reading-time";
 
 export async function getStaticPaths() {
   const docs = await getCollection("docs");
@@ -41,6 +42,7 @@ interface Props {
 
 const { doc, locale, cleanSlug } = Astro.props;
 const { Content, headings } = await doc.render();
+const readTime = readingTime(doc.body ?? "");
 
 // Find the category (navigation group) for this page
 function findCategory(slug: string): string | null {
@@ -122,15 +124,17 @@ breadcrumbs.push({ label: doc.data.title });
   editUrl={editUrl}
   lastUpdated={lastUpdated}
   breadcrumbs={breadcrumbs}
+  readingTime={readTime.text}
+  filePath={doc.id}
 >
   {category && (
-    <p class="text-xs font-medium uppercase tracking-wider text-primary-600 dark:text-primary-400 mb-2">
+    <p class="text-xs font-semibold uppercase tracking-widest text-primary-600 dark:text-primary-400 mb-3">
       {category}
     </p>
   )}
   <h1>{doc.data.title}</h1>
   {doc.data.description && (
-    <p class="lead text-sm text-[var(--color-text-secondary)] mt-1 mb-4">
+    <p class="lead text-base text-[var(--bd-text-secondary)] mt-2 mb-6 leading-relaxed">
       {doc.data.description}
     </p>
   )}

package/src/pages/index.astro

@@ -40,10 +40,10 @@ const features = [
 <BaseLayout title={config.name}>
   <div class="min-h-screen flex flex-col">
     <!-- Header -->
-    <header class="sticky top-0 z-50 border-b border-[var(--color-border)] bg-[var(--color-bg)]/95 backdrop-blur-md">
+    <header class="sticky top-0 z-50 border-b border-[var(--bd-border)] bg-[var(--bd-bg)]/95 backdrop-blur-md">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex h-16 items-center justify-between">
-          <a href="/" class="flex items-center gap-2.5 font-semibold text-[var(--color-text)]">
+          <a href="/" class="flex items-center gap-2.5 font-semibold text-[var(--bd-text)]">
             {config.logo && <img src={config.logo} alt={config.name} class="h-7 w-7" />}
             <span class="text-lg">{config.name}</span>
           </a>
@@ -53,7 +53,7 @@ const features = [
                 href={config.topbar.github}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="p-2.5 rounded-xl text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-all"
+                class="p-2.5 rounded-xl text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)] hover:bg-[var(--bd-bg-subtle)] transition-all"
                 aria-label="GitHub"
               >
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -91,12 +91,12 @@ const features = [
               <span class="text-sm font-medium text-primary-700 dark:text-primary-300">Powered by Astro</span>
             </div>
             
-            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-[var(--color-text)] mb-6 leading-tight">
+            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-[var(--bd-text)] mb-6 leading-tight">
               Build beautiful
               <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-primary-400"> documentation</span>
             </h1>
             
-            <p class="text-lg sm:text-xl text-[var(--color-text-secondary)] mb-10 max-w-2xl mx-auto leading-relaxed">
+            <p class="text-lg sm:text-xl text-[var(--bd-text-secondary)] mb-10 max-w-2xl mx-auto leading-relaxed">
               Create stunning documentation sites with MDX, Astro, and Tailwind CSS. 
               Deploy anywhere with static site generation.
             </p>
@@ -110,19 +110,19 @@ const features = [
               </a>
               <a
                 href="/docs/quickstart"
-                class="w-full sm:w-auto px-8 py-3.5 border border-[var(--color-border)] text-[var(--color-text)] rounded-xl hover:bg-[var(--color-bg-secondary)] hover:border-[var(--color-text-muted)] transition-all font-medium"
+                class="w-full sm:w-auto px-8 py-3.5 border border-[var(--bd-border)] text-[var(--bd-text)] rounded-xl hover:bg-[var(--bd-bg-subtle)] hover:border-[var(--bd-text-muted)] transition-all font-medium"
               >
                 Quick Start
               </a>
             </div>
             
             <!-- Install command -->
-            <div class="mt-12 inline-flex items-center gap-3 px-5 py-3 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-xl">
-              <code class="text-sm text-[var(--color-text-secondary)] font-mono">
+            <div class="mt-12 inline-flex items-center gap-3 px-5 py-3 bg-[var(--bd-bg-subtle)] border border-[var(--bd-border)] rounded-xl">
+              <code class="text-sm text-[var(--bd-text-secondary)] font-mono">
                 npx create-barodoc my-docs
               </code>
               <button 
-                class="p-1.5 rounded-lg hover:bg-[var(--color-bg-tertiary)] text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition-colors"
+                class="p-1.5 rounded-lg hover:bg-[var(--bd-bg-muted)] text-[var(--bd-text-muted)] hover:text-[var(--bd-text)] transition-colors"
                 onclick="navigator.clipboard.writeText('npx create-barodoc my-docs')"
                 aria-label="Copy command"
               >
@@ -136,27 +136,27 @@ const features = [
       </div>
 
       <!-- Features Section -->
-      <div class="py-20 bg-[var(--color-bg-secondary)] border-y border-[var(--color-border)]">
+      <div class="py-20 bg-[var(--bd-bg-subtle)] border-y border-[var(--bd-border)]">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div class="text-center mb-16">
-            <h2 class="text-3xl font-bold text-[var(--color-text)] mb-4">
+            <h2 class="text-3xl font-bold text-[var(--bd-text)] mb-4">
               Everything you need
             </h2>
-            <p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
+            <p class="text-lg text-[var(--bd-text-secondary)] max-w-2xl mx-auto">
               Barodoc comes with all the features you need to create beautiful documentation.
             </p>
           </div>
           
           <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
             {features.map((feature) => (
-              <div class="group p-6 bg-[var(--color-bg)] rounded-2xl border border-[var(--color-border)] hover:border-primary-300 dark:hover:border-primary-700 hover:shadow-lg transition-all duration-200">
+              <div class="group p-6 bg-[var(--bd-bg)] rounded-2xl border border-[var(--bd-border)] hover:border-primary-300 dark:hover:border-primary-700 hover:shadow-lg transition-all duration-200">
                 <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-primary-50 dark:bg-primary-950/50 mb-4 group-hover:scale-110 transition-transform">
                   <span class="text-2xl">{feature.icon}</span>
                 </div>
-                <h3 class="text-lg font-semibold text-[var(--color-text)] mb-2">
+                <h3 class="text-lg font-semibold text-[var(--bd-text)] mb-2">
                   {feature.title}
                 </h3>
-                <p class="text-sm text-[var(--color-text-secondary)] leading-relaxed">
+                <p class="text-sm text-[var(--bd-text-secondary)] leading-relaxed">
                   {feature.description}
                 </p>
               </div>
@@ -168,10 +168,10 @@ const features = [
       <!-- CTA Section -->
       <div class="py-20">
         <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 class="text-3xl font-bold text-[var(--color-text)] mb-4">
+          <h2 class="text-3xl font-bold text-[var(--bd-text)] mb-4">
             Ready to get started?
           </h2>
-          <p class="text-lg text-[var(--color-text-secondary)] mb-8">
+          <p class="text-lg text-[var(--bd-text-secondary)] mb-8">
             Create your documentation site in minutes.
           </p>
           <a
@@ -185,10 +185,10 @@ const features = [
     </main>
 
     <!-- Footer -->
-    <footer class="border-t border-[var(--color-border)] bg-[var(--color-bg-secondary)]">
+    <footer class="border-t border-[var(--bd-border)] bg-[var(--bd-bg-subtle)]">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
-          <div class="flex items-center gap-2 text-[var(--color-text-secondary)]">
+          <div class="flex items-center gap-2 text-[var(--bd-text-secondary)]">
             {config.logo && <img src={config.logo} alt={config.name} class="h-5 w-5 opacity-60" />}
             <span class="text-sm">Built with Barodoc</span>
           </div>
@@ -198,14 +198,14 @@ const features = [
                 href={config.topbar.github}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
+                class="text-sm text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)] transition-colors"
               >
                 GitHub
               </a>
             )}
             <a
               href="/docs/introduction"
-              class="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
+              class="text-sm text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)] transition-colors"
             >
               Documentation
             </a>