@specglass/theme-default 0.0.9 → 0.0.11

package/src/components/CodeExample.astro

@@ -0,0 +1,183 @@
+---
+/**
+ * CodeExample.astro — Renders code from an actual source file at build time.
+ *
+ * This component reads a file from the project, optionally extracts a line
+ * range, and renders it as a syntax-highlighted code block. This ensures
+ * code examples in docs never go stale — they're always pulled from the
+ * real source.
+ *
+ * @example
+ * <CodeExample src="../../examples/quickstart.ts" lines="5-20" />
+ * <CodeExample src="./utils.ts" lang="typescript" title="Utility Functions" />
+ */
+
+import { highlight } from "../utils/shiki.js";
+import { CopyButton } from "../islands/CopyButton";
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+export interface Props {
+  /** Path to the source file (relative to the content file or absolute) */
+  src: string;
+  /** Optional line range, e.g. "5-20" */
+  lines?: string;
+  /** Language override (auto-detected from extension if not provided) */
+  lang?: string;
+  /** Optional filename label for the header */
+  title?: string;
+  /** Highlight specific lines, e.g. "1,3-5" */
+  highlight?: string;
+  /** Show line numbers */
+  showLineNumbers?: boolean;
+}
+
+const {
+  src,
+  lines,
+  lang: langProp,
+  title: titleProp,
+  highlight: highlightProp,
+  showLineNumbers = false,
+} = Astro.props;
+
+// Resolve path: if relative, resolve from the current file's directory
+const currentFile = import.meta.url;
+const currentDir = path.dirname(
+  currentFile.startsWith("file://") ? new URL(currentFile).pathname : currentFile,
+);
+const resolvedPath = path.resolve(currentDir, src);
+
+// Read source file
+let fileContent: string;
+try {
+  fileContent = fs.readFileSync(resolvedPath, "utf-8");
+} catch (e) {
+  throw new Error(
+    `[CodeExample] Could not read source file: ${resolvedPath}\n` +
+      `  Referenced from: ${currentFile}\n` +
+      `  src="${src}"`,
+  );
+}
+
+// Extract line range if specified
+let codeContent = fileContent;
+let startLine = 1;
+
+if (lines) {
+  const [start, end] = lines.split("-").map(Number);
+  const allLines = fileContent.split("\n");
+
+  if (start < 1 || end > allLines.length || start > end) {
+    throw new Error(
+      `[CodeExample] Invalid line range "${lines}" — file has ${allLines.length} lines.\n` +
+        `  src="${src}"`,
+    );
+  }
+
+  codeContent = allLines.slice(start - 1, end).join("\n");
+  startLine = start;
+}
+
+// Auto-detect language from file extension
+const ext = path.extname(resolvedPath).slice(1);
+const EXTENSION_MAP: Record<string, string> = {
+  ts: "typescript",
+  tsx: "tsx",
+  js: "javascript",
+  jsx: "jsx",
+  py: "python",
+  rb: "ruby",
+  go: "go",
+  rs: "rust",
+  yml: "yaml",
+  yaml: "yaml",
+  json: "json",
+  md: "markdown",
+  mdx: "markdown",
+  css: "css",
+  html: "html",
+  sh: "bash",
+  bash: "bash",
+  sql: "sql",
+};
+const lang = langProp ?? EXTENSION_MAP[ext] ?? ext ?? "text";
+const title = titleProp ?? path.basename(resolvedPath);
+
+// Parse highlight ranges
+import { parseHighlightRange } from "../utils/parse-highlight-range.js";
+const markLines = highlightProp ? parseHighlightRange(highlightProp) : undefined;
+
+// Syntax highlight
+const highlightedHtml = await highlight(codeContent.trimEnd(), lang, {
+  highlightLines: markLines,
+});
+
+// Build CSS classes
+const classes = ["code-block", "code-block--source-linked"];
+if (showLineNumbers) classes.push("code-block--line-numbers");
+---
+
+<div class={classes.join(" ")} data-source={src} data-code={codeContent.trimEnd()}>
+  <div class="code-block-header">
+    <span class="code-block-title">{title}</span>
+    {lines && <span class="code-block-lines">L{lines}</span>}
+    <a
+      href={`#source:${src}`}
+      class="code-block-source-link"
+      title="View full source"
+      aria-label={`View source: ${title}`}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        class="w-3.5 h-3.5"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
+          clip-rule="evenodd"></path>
+      </svg>
+    </a>
+  </div>
+  <div class="code-block-body">
+    <Fragment set:html={highlightedHtml} />
+    <CopyButton code={codeContent.trimEnd()} client:idle />
+  </div>
+</div>
+
+<style>
+  .code-block--source-linked {
+    margin: 1.5rem 0;
+    border: 1px solid var(--code-block-border, oklch(0.92 0.004 286.32));
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  .code-block-lines {
+    margin-left: 0.5rem;
+    color: var(--code-block-title-color, oklch(0.552 0.016 285.938));
+    opacity: 0.6;
+    font-size: 0.75rem;
+  }
+
+  .code-block-source-link {
+    margin-left: auto;
+    color: var(--code-block-title-color, oklch(0.552 0.016 285.938));
+    opacity: 0.4;
+    transition: opacity 150ms ease;
+  }
+
+  .code-block-source-link:hover {
+    opacity: 1;
+  }
+</style>
+
+<style is:global>
+  .dark .code-block--source-linked {
+    --code-block-border: oklch(0.274 0.006 286.033);
+    --code-block-header-bg: oklch(0.21 0.006 285.885);
+    --code-block-title-color: oklch(0.705 0.015 286.067);
+  }
+</style>

package/src/components/EditLink.astro

@@ -0,0 +1,53 @@
+---
+/**
+ * EditLink.astro — "Edit on GitHub" link shown at the bottom of doc pages.
+ *
+ * Only renders when `theme.editUrl` is configured in specglass.config.ts.
+ * Appends the current page's source file path to the base edit URL.
+ */
+interface Props {
+  /** Slug of the current page, used to construct the file path */
+  currentSlug: string;
+}
+
+import { config } from "virtual:specglass/config";
+
+const { currentSlug } = Astro.props;
+const editUrl = config.theme?.editUrl;
+
+// Construct the full edit URL: base + slug + .mdx
+const fullEditUrl = editUrl ? `${editUrl.replace(/\/$/, "")}/${currentSlug}.mdx` : null;
+---
+
+{
+  fullEditUrl && (
+    <a
+      href={fullEditUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="inline-flex items-center gap-1.5 text-sm text-text-muted hover:text-text transition-colors mt-8 pt-4 border-t border-border/30"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        class="w-4 h-4"
+        aria-hidden="true"
+      >
+        <path d="m5.433 13.917 1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z" />
+        <path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z" />
+      </svg>
+      Edit this page on GitHub
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        class="w-3 h-3 opacity-50"
+        aria-hidden="true"
+      >
+        <path d="M6.22 8.72a.75.75 0 0 1 0-1.06l1.25-1.25H3.5a.75.75 0 0 1 0-1.5h3.97L6.22 3.66a.75.75 0 0 1 1.06-1.06l2.5 2.5a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0Z" />
+        <path d="M3.5 9.75a.75.75 0 0 1 0-1.5h3.97L6.22 7.06a.75.75 0 0 1 1.06-1.06l2.5 2.5a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 0 1-1.06-1.06l1.25-1.25H3.5Z" />
+      </svg>
+    </a>
+  )
+}

package/src/components/Footer.astro

@@ -2,40 +2,102 @@
 /**
  * Footer component for the specglass theme.
  *
- * Renders a simple footer with copyright year and optional text
- * from theme configuration. Can be overridden by placing a custom
- * Footer.astro at src/components/overrides/Footer.astro.
+ * Renders a multi-column footer with:
+ * - Column 1: Site title/logo + tagline
+ * - Column 2: Navigation links (headerLinks from config)
+ * - Column 3: Social/external links (socialLinks from theme config)
+ * - Bottom row: Copyright text
+ *
+ * Can be overridden by placing a custom Footer.astro at
+ * src/components/overrides/Footer.astro.
  */
 import { config } from "virtual:specglass/config";
 
 const currentYear = new Date().getFullYear();
 const footerText = config.theme?.footer;
 const headerLinks = config.theme?.headerLinks;
+const socialLinks = config.theme?.socialLinks;
+const siteTitle = config.site?.title ?? "Documentation";
+const siteDescription = config.site?.description;
+const hasNav = headerLinks && headerLinks.length > 0;
+const hasSocial = socialLinks && socialLinks.length > 0;
 ---
 
-<footer class="border-t border-border bg-surface py-8 px-6" aria-label="Site footer">
-  <div
-    class="max-w-[var(--width-content-max)] mx-auto flex flex-col items-center gap-4 text-sm text-text-muted"
-  >
+<footer class="border-t border-border/40 py-8 px-6" aria-label="Site footer">
+  <div class="max-w-(--width-content-max) mx-auto">
+    {/* Multi-column layout — falls back to single column when no nav/social */}
     {
-      headerLinks && headerLinks.length > 0 && (
-        <nav aria-label="Footer navigation" class="flex gap-6">
-          {headerLinks.map((link) => (
-            <a
-              href={link.href}
-              class="hover:text-text transition-colors"
-              {...(link.href.startsWith("http")
-                ? { target: "_blank", rel: "noopener noreferrer" }
-                : {})}
-            >
-              {link.label}
-            </a>
-          ))}
-        </nav>
-      )
+      hasNav || hasSocial ? (
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+          {/* Column 1: Branding */}
+          <div>
+            <div class="flex items-center gap-2 mb-2">
+              {config.theme?.logo && (
+                <img src={config.theme.logo} alt="" class="h-5 w-5" aria-hidden="true" />
+              )}
+              <span class="font-semibold text-text">{siteTitle}</span>
+            </div>
+            {siteDescription && (
+              <p class="text-sm text-text-muted m-0 leading-relaxed">{siteDescription}</p>
+            )}
+          </div>
+
+          {/* Column 2: Navigation */}
+          {hasNav && (
+            <div>
+              <h4 class="text-[0.6875rem] font-medium uppercase tracking-wider text-text-muted mb-3">
+                Navigation
+              </h4>
+              <nav aria-label="Footer navigation" class="flex flex-col gap-2">
+                {headerLinks.map((link) => (
+                  <a
+                    href={link.href}
+                    class="text-[0.8125rem] text-text-muted hover:text-text transition-colors no-underline focus-visible:outline-2 focus-visible:outline-text rounded"
+                    {...(link.href.startsWith("http")
+                      ? { target: "_blank", rel: "noopener noreferrer" }
+                      : {})}
+                  >
+                    {link.label}
+                  </a>
+                ))}
+              </nav>
+            </div>
+          )}
+
+          {/* Column 3: Social Links */}
+          {hasSocial && (
+            <div>
+              <h4 class="text-[0.6875rem] font-medium uppercase tracking-wider text-text-muted mb-3">
+                Connect
+              </h4>
+              <nav aria-label="Social links" class="flex flex-col gap-2">
+                {socialLinks.map((link) => (
+                  <a
+                    href={link.href}
+                    class="text-[0.8125rem] text-text-muted hover:text-text transition-colors no-underline focus-visible:outline-2 focus-visible:outline-text rounded"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {link.label}
+                  </a>
+                ))}
+              </nav>
+            </div>
+          )}
+        </div>
+      ) : null
     }
-    <p class="m-0">
-      {footerText ? footerText : `© ${currentYear} Built with specglass`}
-    </p>
+
+    {/* Bottom row: copyright */}
+    <div
+      class:list={[
+        "text-[0.8125rem] text-text-muted text-center",
+        (hasNav || hasSocial) && "border-t border-border/40 pt-6",
+      ]}
+    >
+      <p class="m-0">
+        {footerText ? footerText : `© ${currentYear} Built with specglass`}
+      </p>
+    </div>
   </div>
 </footer>

package/src/components/Header.astro

@@ -3,13 +3,15 @@
  * Header — Site-wide header with title/logo and navigation links.
  *
  * Reads from virtual:specglass/config for site title and theme config.
- * Includes a mobile menu toggle button and a slot for right-side items
+ * Includes a mobile menu toggle button and a slot for right-side items.
+ * Features scroll-aware styling: subtle primary border glow on scroll.
  */
 import { config } from "virtual:specglass/config";
 ---
 
 <header
-  class="fixed top-0 left-0 right-0 z-20 h-(--height-header) border-b border-border bg-surface/95 backdrop-blur-sm"
+  id="site-header"
+  class="fixed top-0 left-0 right-0 z-20 h-(--height-header) border-b border-border/40 bg-surface-0/80 backdrop-blur-xl transition-[border-color,box-shadow] duration-200"
   data-pagefind-ignore
 >
   <div class="flex items-center h-full px-4 md:px-6">
@@ -17,7 +19,7 @@ import { config } from "virtual:specglass/config";
     <button
       id="mobile-menu-toggle"
       type="button"
-      class="inline-flex items-center justify-center p-2 rounded-md text-text-muted hover:text-text hover:bg-hover-bg focus:outline-none focus-visible:ring-2 focus-visible:ring-primary md:hidden mr-2"
+      class="inline-flex items-center justify-center w-8 h-8 rounded-lg text-text-muted hover:text-text hover:bg-surface-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary md:hidden mr-2"
       aria-expanded="false"
       aria-controls="sidebar-mobile"
       aria-label="Toggle navigation menu"
@@ -40,7 +42,7 @@ import { config } from "virtual:specglass/config";
     <!-- Site title / logo -->
     <a
       href="/"
-      class="flex items-center gap-2 font-semibold text-lg text-text hover:text-primary transition-colors no-underline"
+      class="flex items-center gap-2 font-semibold text-[0.9375rem] text-text hover:opacity-70 transition-opacity no-underline"
     >
       {
         config.theme?.logo && (
@@ -56,11 +58,11 @@ import { config } from "virtual:specglass/config";
     <!-- Header navigation links from config -->
     {
       config.theme?.headerLinks && config.theme.headerLinks.length > 0 && (
-        <nav aria-label="Header navigation" class="hidden md:flex items-center gap-4 mr-4">
+        <nav aria-label="Header navigation" class="hidden md:flex items-center gap-1 mr-3">
           {config.theme.headerLinks.map((link) => (
             <a
               href={link.href}
-              class="text-sm text-text-muted hover:text-text transition-colors focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
+              class="text-[0.8125rem] text-text-muted hover:text-text transition-colors focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded-md px-2.5 py-1.5 hover:bg-surface-2"
               {...(link.href.startsWith("http")
                 ? { target: "_blank", rel: "noopener noreferrer" }
                 : {})}
@@ -73,8 +75,62 @@ import { config } from "virtual:specglass/config";
     }
 
     <!-- Right-side header actions (theme toggle, search, etc.) -->
-    <div id="header-actions" class="flex items-center gap-2">
+    <div id="header-actions" class="flex items-center gap-1">
       <slot />
     </div>
   </div>
 </header>
+
+<script>
+  function initHeaderScroll() {
+    const header = document.getElementById("site-header");
+    if (!header) return;
+
+    let ticking = false;
+
+    function updateHeader() {
+      if (window.scrollY > 0) {
+        header!.setAttribute("data-scrolled", "");
+      } else {
+        header!.removeAttribute("data-scrolled");
+      }
+      ticking = false;
+    }
+
+    function onScroll() {
+      if (!ticking) {
+        requestAnimationFrame(updateHeader);
+        ticking = true;
+      }
+    }
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+
+    // Set initial state
+    updateHeader();
+
+    // Cleanup on page transition to prevent listener leak
+    document.addEventListener(
+      "astro:before-swap",
+      () => {
+        window.removeEventListener("scroll", onScroll);
+      },
+      { once: true },
+    );
+  }
+
+  initHeaderScroll();
+  document.addEventListener("astro:after-swap", initHeaderScroll);
+</script>
+
+<style is:global>
+  #site-header[data-scrolled] {
+    border-bottom-color: var(--color-border);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  }
+
+  .dark #site-header[data-scrolled] {
+    border-bottom-color: var(--color-border);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+</style>

package/src/components/Sidebar.astro

@@ -17,7 +17,7 @@ export interface Props {
 const { items, currentSlug, depth = 0 } = Astro.props;
 ---
 
-<ul class:list={["list-none p-0 m-0", depth > 0 && "ml-3 border-l border-border pl-3"]}>
+<ul class:list={["list-none p-0 m-0", depth > 0 && "ml-3 pl-3"]}>
   {
     items
       .filter((item) => !item.hidden)
@@ -27,14 +27,14 @@ const { items, currentSlug, depth = 0 } = Astro.props;
         const isCollapsed = item.collapsed && !isAncestor;
 
         return (
-          <li class="my-0.5">
+          <li class:list={[item.type === "section" && depth === 0 ? "mt-5 first:mt-0" : ""]}>
             {item.type === "external-link" && item.href ? (
               /* External link */
               <a
                 href={item.href}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="flex items-center gap-1.5 px-2 py-1.5 text-sm text-text-muted hover:text-text rounded-md hover:bg-hover-bg transition-colors no-underline"
+                class="flex items-center gap-1.5 px-2 py-[3px] text-[0.8125rem] leading-relaxed text-text-muted hover:text-text transition-colors no-underline focus-visible:outline-2 focus-visible:outline-text"
               >
                 <span>{item.title}</span>
                 <svg
@@ -57,17 +57,36 @@ const { items, currentSlug, depth = 0 } = Astro.props;
               <details open={!isCollapsed}>
                 <summary
                   class:list={[
-                    "flex items-center gap-1 px-2 py-1.5 text-sm font-medium cursor-pointer select-none rounded-md hover:bg-hover-bg transition-colors list-none",
-                    isAncestor ? "text-primary" : "text-text",
+                    "flex items-center gap-1 px-2 py-1 text-[0.8125rem] cursor-pointer select-none transition-colors duration-150 list-none focus-visible:outline-2 focus-visible:outline-text",
+                    depth === 0
+                      ? "font-medium text-[0.6875rem] uppercase tracking-wider text-text-muted mb-1"
+                      : isAncestor
+                        ? "font-medium text-text"
+                        : "font-medium text-text-muted",
                   ]}
                 >
                   {item.icon && <span class="mr-1">{item.icon}</span>}
                   <span>{item.title}</span>
+                  {item.badge && (
+                    <span
+                      class:list={[
+                        "sg-sidebar-badge text-[0.625rem] font-medium px-1.5 py-0.5 rounded-full tracking-wider whitespace-nowrap ml-1.5",
+                        item.badge.toLowerCase() === "new" && "bg-green-500/10 text-green-400",
+                        item.badge.toLowerCase() === "beta" && "bg-blue-500/10 text-blue-400",
+                        item.badge.toLowerCase() === "deprecated" &&
+                          "bg-orange-500/10 text-orange-400",
+                        !["new", "beta", "deprecated"].includes(item.badge.toLowerCase()) &&
+                          "bg-surface-2 text-text-muted",
+                      ]}
+                    >
+                      {item.badge}
+                    </span>
+                  )}
                   <svg
-                    class="h-3.5 w-3.5 ml-auto opacity-40 transition-transform duration-200 details-chevron"
+                    class="h-3 w-3 ml-auto opacity-30 transition-transform duration-150 details-chevron"
                     fill="none"
                     viewBox="0 0 24 24"
-                    stroke-width="2"
+                    stroke-width="2.5"
                     stroke="currentColor"
                     aria-hidden="true"
                   >
@@ -87,15 +106,28 @@ const { items, currentSlug, depth = 0 } = Astro.props;
               <a
                 href={`/${item.slug}`}
                 class:list={[
-                  "flex items-center gap-1.5 px-2 py-1.5 text-sm rounded-md transition-colors no-underline",
-                  isActive
-                    ? "bg-primary/10 text-primary font-medium"
-                    : "text-text-muted hover:text-text hover:bg-hover-bg",
+                  "flex items-center gap-1.5 px-2 py-[3px] text-[0.8125rem] leading-relaxed rounded-md transition-colors duration-150 no-underline focus-visible:outline-2 focus-visible:outline-text",
+                  isActive ? "text-text font-medium" : "text-text-muted hover:text-text",
                 ]}
                 aria-current={isActive ? "page" : undefined}
               >
                 {item.icon && <span class="mr-1">{item.icon}</span>}
                 <span>{item.title}</span>
+                {item.badge && (
+                  <span
+                    class:list={[
+                      "sg-sidebar-badge ml-auto text-[0.625rem] font-medium px-1.5 py-0.5 rounded-full tracking-wider whitespace-nowrap",
+                      item.badge.toLowerCase() === "new" && "bg-green-500/10 text-green-400",
+                      item.badge.toLowerCase() === "beta" && "bg-blue-500/10 text-blue-400",
+                      item.badge.toLowerCase() === "deprecated" &&
+                        "bg-orange-500/10 text-orange-400",
+                      !["new", "beta", "deprecated"].includes(item.badge.toLowerCase()) &&
+                        "bg-surface-2 text-text-muted",
+                    ]}
+                  >
+                    {item.badge}
+                  </span>
+                )}
               </a>
             )}
           </li>

package/src/components/TableOfContents.astro

@@ -20,7 +20,7 @@ const tocHeadings = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
 {
   tocHeadings.length > 0 && (
     <nav aria-label="Table of contents">
-      <h2 class="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+      <h2 class="text-[0.6875rem] font-medium uppercase tracking-wider text-text-muted mb-3">
         On this page
       </h2>
       <ul class="list-none p-0 m-0 space-y-0.5" id="toc-list">
@@ -29,8 +29,8 @@ const tocHeadings = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
             <a
               href={`#${heading.slug}`}
               class:list={[
-                "block text-sm py-1 no-underline transition-colors duration-150",
-                heading.depth === 3 ? "pl-4" : "pl-0",
+                "block text-[0.8125rem] py-1 no-underline transition-colors duration-150",
+                heading.depth === 3 ? "pl-4" : "pl-2",
                 "text-text-muted hover:text-text",
               ]}
               data-toc-link
@@ -66,10 +66,10 @@ const tocHeadings = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
       tocLinks.forEach((link) => {
         const linkId = (link as HTMLElement).dataset.tocId;
         if (linkId === id) {
-          link.classList.add("text-primary", "font-medium");
+          link.classList.add("text-text", "font-medium");
           link.classList.remove("text-text-muted");
         } else {
-          link.classList.remove("text-primary", "font-medium");
+          link.classList.remove("text-text", "font-medium");
           link.classList.add("text-text-muted");
         }
       });