@farming-labs/nuxt-theme 0.0.2-beta.17

package/src/components/TableOfContents.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
+
+interface TocItem {
+  title: string;
+  url: string;
+  depth: number;
+}
+
+const props = defineProps<{
+  items?: TocItem[];
+  tocStyle?: "default" | "directional";
+}>();
+
+const items = computed(() => props.items ?? []);
+const isDirectional = computed(() => props.tocStyle === "directional");
+const activeIds = ref(new Set<string>());
+
+const listRef = ref<HTMLUListElement | null>(null);
+const containerRef = ref<HTMLDivElement | null>(null);
+const thumbTop = ref(0);
+const thumbHeight = ref(0);
+const svgPath = ref("");
+
+let observer: IntersectionObserver | null = null;
+
+function getItemOffset(depth: number): number {
+  if (depth <= 2) return 14;
+  if (depth === 3) return 26;
+  return 36;
+}
+
+function getLineOffset(depth: number): number {
+  return depth >= 3 ? 10 : 0;
+}
+
+function observeHeadings() {
+  if (!observer) return;
+  observer.disconnect();
+  for (const item of items.value) {
+    const el = document.querySelector(item.url);
+    if (el) observer.observe(el);
+  }
+}
+
+function isActive(item: TocItem): boolean {
+  return activeIds.value.has(item.url.slice(1));
+}
+
+function defaultLinkStyle(item: TocItem) {
+  const indent = (item.depth - 2) * 12;
+  return { paddingLeft: `${12 + indent}px` };
+}
+
+function clerkLinkStyle(item: TocItem) {
+  return {
+    position: "relative" as const,
+    paddingLeft: `${getItemOffset(item.depth)}px`,
+    paddingTop: "6px",
+    paddingBottom: "6px",
+    fontSize: item.depth <= 2 ? "14px" : "13px",
+  };
+}
+
+function verticalLineStyle(item: TocItem, index: number) {
+  const list = items.value;
+  const prevDepth = index > 0 ? list[index - 1].depth : item.depth;
+  const nextDepth = index < list.length - 1 ? list[index + 1].depth : item.depth;
+  const depthChanged = prevDepth !== item.depth;
+  const depthChangesNext = nextDepth !== item.depth;
+
+  return {
+    position: "absolute" as const,
+    left: `${getLineOffset(item.depth)}px`,
+    top: depthChanged ? "6px" : "0",
+    bottom: depthChangesNext ? "6px" : "0",
+    width: "1px",
+    background: "hsla(0, 0%, 50%, 0.1)",
+  };
+}
+
+function hasDiagonal(index: number): boolean {
+  if (index === 0) return false;
+  const list = items.value;
+  return list[index - 1].depth !== list[index].depth;
+}
+
+function diagonalSvg(index: number) {
+  const list = items.value;
+  const prevDepth = list[index - 1].depth;
+  const currDepth = list[index].depth;
+  const upperOffset = getLineOffset(prevDepth);
+  const currentOffset = getLineOffset(currDepth);
+  return { upperOffset, currentOffset };
+}
+
+function buildSvgPath() {
+  if (!listRef.value) return;
+  const links = listRef.value.querySelectorAll<HTMLAnchorElement>(".fd-toc-clerk-link");
+  if (links.length === 0) {
+    svgPath.value = "";
+    return;
+  }
+
+  const containerTop = listRef.value.offsetTop;
+  let d = "";
+  const list = items.value;
+
+  links.forEach((el, i) => {
+    if (i >= list.length) return;
+    const depth = list[i].depth;
+    const x = getLineOffset(depth) + 1;
+    const top = el.offsetTop - containerTop;
+    const bottom = top + el.clientHeight;
+    const cmd = i === 0 ? "M" : "L";
+    d += `${cmd}${x} ${top} L${x} ${bottom} `;
+  });
+
+  svgPath.value = d.trim();
+}
+
+function calcThumb() {
+  if (!listRef.value || activeIds.value.size === 0) {
+    thumbTop.value = 0;
+    thumbHeight.value = 0;
+    return;
+  }
+
+  const containerTop = listRef.value.offsetTop;
+  let upper = Infinity;
+  let lower = 0;
+
+  for (const id of activeIds.value) {
+    const el = listRef.value.querySelector<HTMLAnchorElement>(`a[href="#${id}"]`);
+    if (!el) continue;
+    const styles = getComputedStyle(el);
+    const elTop = el.offsetTop - containerTop;
+    upper = Math.min(upper, elTop + parseFloat(styles.paddingTop));
+    lower = Math.max(lower, elTop + el.clientHeight - parseFloat(styles.paddingBottom));
+  }
+
+  if (upper === Infinity) {
+    thumbTop.value = 0;
+    thumbHeight.value = 0;
+    return;
+  }
+
+  thumbTop.value = upper;
+  thumbHeight.value = lower - upper;
+}
+
+function maskSvgUrl(): string {
+  if (!svgPath.value) return "none";
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="${svgPath.value}" stroke="white" stroke-width="2" fill="none"/></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+
+onMounted(() => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      const next = new Set(activeIds.value);
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          next.add(entry.target.id);
+        } else {
+          next.delete(entry.target.id);
+        }
+      }
+      activeIds.value = next;
+    },
+    { rootMargin: "-80px 0px -80% 0px" }
+  );
+  observeHeadings();
+
+  if (isDirectional.value) {
+    nextTick(() => {
+      buildSvgPath();
+      calcThumb();
+    });
+  }
+});
+
+watch(items, () => {
+  observeHeadings();
+  if (isDirectional.value) {
+    nextTick(() => {
+      buildSvgPath();
+      calcThumb();
+    });
+  }
+}, { flush: "post" });
+
+watch(activeIds, () => {
+  if (isDirectional.value) {
+    calcThumb();
+  }
+}, { deep: true });
+
+watch(isDirectional, (val) => {
+  if (val) {
+    nextTick(() => {
+      buildSvgPath();
+      calcThumb();
+    });
+  }
+});
+
+onUnmounted(() => {
+  observer?.disconnect();
+});
+</script>
+
+<template>
+  <div ref="containerRef" class="fd-toc-inner" :class="{ 'fd-toc-directional': isDirectional }">
+    <h3 class="fd-toc-title">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+        <line x1="3" y1="6" x2="21" y2="6" />
+        <line x1="3" y1="12" x2="15" y2="12" />
+        <line x1="3" y1="18" x2="18" y2="18" />
+      </svg>
+      On this page
+    </h3>
+    <p v-if="items.length === 0" class="fd-toc-empty">No Headings</p>
+
+    <!-- Default style -->
+    <ul v-else-if="!isDirectional" class="fd-toc-list">
+      <li v-for="item in items" :key="item.url" class="fd-toc-item">
+        <a
+          :href="item.url"
+          class="fd-toc-link"
+          :class="{ 'fd-toc-link-active': isActive(item) }"
+          :style="defaultLinkStyle(item)"
+        >
+          {{ item.title }}
+        </a>
+      </li>
+    </ul>
+
+    <!-- Clerk / directional style -->
+    <ul v-else ref="listRef" class="fd-toc-list fd-toc-clerk" style="position: relative;">
+      <li v-for="(item, index) in items" :key="item.url" class="fd-toc-item">
+        <a
+          :href="item.url"
+          class="fd-toc-link fd-toc-clerk-link"
+          :style="clerkLinkStyle(item)"
+          :data-active="isActive(item) || undefined"
+        >
+          <!-- Vertical line segment -->
+          <div :style="verticalLineStyle(item, index)" />
+
+          <!-- Diagonal SVG connector when depth changes -->
+          <svg
+            v-if="hasDiagonal(index)"
+            viewBox="0 0 16 16"
+            width="16"
+            height="16"
+            style="position: absolute; top: -6px; left: 0;"
+          >
+            <line
+              :x1="diagonalSvg(index).upperOffset"
+              y1="0"
+              :x2="diagonalSvg(index).currentOffset"
+              y2="12"
+              stroke="hsla(0, 0%, 50%, 0.1)"
+              stroke-width="1"
+            />
+          </svg>
+
+          {{ item.title }}
+        </a>
+      </li>
+
+      <!-- Mask container with thumb for active highlight -->
+      <div
+        v-if="svgPath"
+        class="fd-toc-clerk-mask"
+        :style="{
+          position: 'absolute',
+          left: '0',
+          top: '0',
+          width: '100%',
+          height: '100%',
+          pointerEvents: 'none',
+          maskImage: maskSvgUrl(),
+          WebkitMaskImage: maskSvgUrl(),
+          maskRepeat: 'no-repeat',
+          WebkitMaskRepeat: 'no-repeat',
+        }"
+      >
+        <div
+          class="fd-toc-clerk-thumb"
+          :style="{
+            marginTop: `${thumbTop}px`,
+            height: `${thumbHeight}px`,
+            background: 'var(--color-fd-primary)',
+            transition: 'all 0.15s',
+          }"
+        />
+      </div>
+    </ul>
+  </div>
+</template>

package/src/components/ThemeToggle.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+const theme = ref<"light" | "dark">("light");
+
+onMounted(() => {
+  const stored = document.cookie.match(/(?:^|;\s*)theme=(\w+)/);
+  if (stored) {
+    theme.value = stored[1] as "light" | "dark";
+  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    theme.value = "dark";
+  } else {
+    theme.value = document.documentElement.classList.contains("dark") ? "dark" : "light";
+  }
+});
+
+function toggle() {
+  theme.value = theme.value === "dark" ? "light" : "dark";
+  document.documentElement.classList.remove("light", "dark");
+  document.documentElement.classList.add(theme.value);
+  document.cookie = `theme=${theme.value};path=/;max-age=31536000;SameSite=Lax`;
+}
+</script>
+
+<template>
+  <button class="fd-theme-toggle" type="button" aria-label="Toggle theme" @click="toggle">
+    <svg v-if="theme === 'dark'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
+    <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  </button>
+</template>

package/src/index.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from "vue";
+import type { DocsTheme } from "@farming-labs/docs";
+
+export const DocsLayout: Component;
+export const DocsContent: Component;
+export const DocsPage: Component;
+export const TableOfContents: Component;
+export const Breadcrumb: Component;
+export const SearchDialog: Component;
+export const FloatingAIChat: Component;
+
+export declare const fumadocs: (overrides?: Partial<DocsTheme>) => DocsTheme;
+export declare const DefaultUIDefaults: Record<string, any>;
+export declare const pixelBorder: (overrides?: Partial<DocsTheme>) => DocsTheme;
+export declare const PixelBorderUIDefaults: Record<string, any>;
+export declare const darksharp: (overrides?: Partial<DocsTheme>) => DocsTheme;
+export declare const DarksharpUIDefaults: Record<string, any>;

package/src/index.js

@@ -0,0 +1,18 @@
+/**
+ * @farming-labs/nuxt-theme
+ *
+ * Nuxt/Vue UI components and theme presets for documentation sites.
+ */
+
+export { default as DocsLayout } from "./components/DocsLayout.vue";
+export { default as DocsContent } from "./components/DocsContent.vue";
+export { default as DocsPage } from "./components/DocsPage.vue";
+export { default as TableOfContents } from "./components/TableOfContents.vue";
+export { default as Breadcrumb } from "./components/Breadcrumb.vue";
+export { default as SearchDialog } from "./components/SearchDialog.vue";
+export { default as FloatingAIChat } from "./components/FloatingAIChat.vue";
+export { default as ThemeToggle } from "./components/ThemeToggle.vue";
+
+export { fumadocs, DefaultUIDefaults } from "./themes/default.js";
+export { pixelBorder, PixelBorderUIDefaults } from "./themes/pixel-border.js";
+export { darksharp, DarksharpUIDefaults } from "./themes/darksharp.js";

package/src/lib/renderMarkdown.js

@@ -0,0 +1,108 @@
+/**
+ * Markdown renderer for AI chat responses.
+ *
+ * Uses sugar-high for syntax highlighting in fenced code blocks.
+ * Supports: fenced code blocks, tables, inline code, bold, italic,
+ * links, headings, bullet lists, numbered lists.
+ */
+import { highlight } from "sugar-high";
+
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function buildCodeBlock(lang, code) {
+  const trimmed = code.replace(/\n$/, "");
+  const highlighted = highlight(trimmed).replace(/<\/span>\n<span/g, "</span><span");
+  const langLabel = lang ? `<div class="fd-ai-code-lang">${escapeHtml(lang)}</div>` : "";
+  const copyBtn = `<button class="fd-ai-code-copy" onclick="(function(btn){var code=btn.closest('.fd-ai-code-block').querySelector('code').textContent;navigator.clipboard.writeText(code).then(function(){btn.textContent='Copied!';setTimeout(function(){btn.textContent='Copy'},1500)})})(this)">Copy</button>`;
+  return `<div class="fd-ai-code-block">`
+    + `<div class="fd-ai-code-header">${langLabel}${copyBtn}</div>`
+    + `<pre><code>${highlighted}</code></pre>`
+    + `</div>`;
+}
+
+function isTableRow(line) {
+  const trimmed = line.trim();
+  return trimmed.startsWith("|") && trimmed.endsWith("|") && trimmed.includes("|");
+}
+
+function isTableSeparator(line) {
+  return /^\|[\s:]*-+[\s:]*(\|[\s:]*-+[\s:]*)*\|$/.test(line.trim());
+}
+
+function renderTable(rows) {
+  const parseRow = (row) =>
+    row.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map(c => c.trim());
+
+  const headerCells = parseRow(rows[0]);
+  const thead = `<thead><tr>${headerCells.map(c => `<th>${c}</th>`).join("")}</tr></thead>`;
+
+  const bodyRows = rows.slice(1).map(row => {
+    const cells = parseRow(row);
+    return `<tr>${cells.map(c => `<td>${c}</td>`).join("")}</tr>`;
+  }).join("");
+
+  return `<table>${thead}<tbody>${bodyRows}</tbody></table>`;
+}
+
+export function renderMarkdown(text) {
+  if (!text) return "";
+
+  const codeBlocks = [];
+
+  let processed = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
+    codeBlocks.push(buildCodeBlock(lang, code));
+    return `\x00CB${codeBlocks.length - 1}\x00`;
+  });
+
+  processed = processed.replace(/```(\w*)\n([\s\S]*)$/, (_match, lang, code) => {
+    codeBlocks.push(buildCodeBlock(lang, code));
+    return `\x00CB${codeBlocks.length - 1}\x00`;
+  });
+
+  const lines = processed.split("\n");
+  const output = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    if (isTableRow(lines[i]) && i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
+      const tableLines = [lines[i]];
+      i++;
+      i++;
+      while (i < lines.length && isTableRow(lines[i])) {
+        tableLines.push(lines[i]);
+        i++;
+      }
+      output.push(renderTable(tableLines));
+      continue;
+    }
+    output.push(lines[i]);
+    i++;
+  }
+
+  let result = output.join("\n");
+
+  result = result
+    .replace(/`([^`]+)`/g, "<code>$1</code>")
+    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+    .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>")
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
+    .replace(/^### (.*$)/gm, "<h4>$1</h4>")
+    .replace(/^## (.*$)/gm, "<h3>$1</h3>")
+    .replace(/^# (.*$)/gm, "<h2>$1</h2>")
+    .replace(
+      /^[-*] (.*$)/gm,
+      '<div style="display:flex;gap:8px;padding:2px 0"><span style="opacity:0.5">\u2022</span><span>$1</span></div>',
+    )
+    .replace(
+      /^(\d+)\. (.*$)/gm,
+      '<div style="display:flex;gap:8px;padding:2px 0"><span style="opacity:0.5">$1.</span><span>$2</span></div>',
+    )
+    .replace(/\n\n/g, '<div style="height:8px"></div>')
+    .replace(/\n/g, "<br>");
+
+  result = result.replace(/\x00CB(\d+)\x00/g, (_m, idx) => codeBlocks[Number(idx)]);
+
+  return result;
+}

package/src/themes/colorful.d.ts

@@ -0,0 +1,2 @@
+export declare const colorful: (overrides?: { ui?: Record<string, unknown> }) => import("@farming-labs/docs").DocsTheme;
+export declare const ColorfulUIDefaults: Record<string, unknown>;

package/src/themes/colorful.js

@@ -0,0 +1,42 @@
+import { createTheme } from "@farming-labs/docs";
+
+const ColorfulUIDefaults = {
+  colors: {
+    primary: "hsl(40, 96%, 40%)",
+    background: "#ffffff",
+    muted: "#64748b",
+    border: "#e5e7eb",
+  },
+  typography: {
+    font: {
+      style: {
+        sans: "Inter, system-ui, sans-serif",
+        mono: "JetBrains Mono, monospace",
+      },
+      h1: { size: "1.875rem", weight: 700, lineHeight: "1.2", letterSpacing: "-0.02em" },
+      h2: { size: "1.5rem", weight: 600, lineHeight: "1.3" },
+      h3: { size: "1.25rem", weight: 600, lineHeight: "1.4" },
+      h4: { size: "1.125rem", weight: 600, lineHeight: "1.4" },
+      body: { size: "1rem", weight: 400, lineHeight: "1.75" },
+      small: { size: "0.875rem", weight: 400, lineHeight: "1.5" },
+    },
+  },
+  layout: {
+    contentWidth: 768,
+    sidebarWidth: 260,
+    toc: { enabled: true, depth: 3, style: "directional" },
+    header: { height: 56, sticky: true },
+  },
+  components: {
+    Callout: { variant: "soft", icon: true },
+    CodeBlock: { showCopyButton: true },
+    Tabs: { style: "default" },
+  },
+};
+
+export const colorful = createTheme({
+  name: "fumadocs-colorful",
+  ui: ColorfulUIDefaults,
+});
+
+export { ColorfulUIDefaults };

package/src/themes/darksharp.d.ts

@@ -0,0 +1,4 @@
+import type { DocsTheme } from "@farming-labs/docs";
+
+export declare const darksharp: (overrides?: Partial<DocsTheme>) => DocsTheme;
+export declare const DarksharpUIDefaults: Record<string, any>;

package/src/themes/darksharp.js

@@ -0,0 +1,42 @@
+import { createTheme } from "@farming-labs/docs";
+
+const DarksharpUIDefaults = {
+  colors: {
+    primary: "#fafaf9",
+    background: "#000000",
+    muted: "#a8a29e",
+    border: "#292524",
+  },
+  typography: {
+    font: {
+      style: {
+        sans: "Geist, system-ui, sans-serif",
+        mono: "Geist Mono, monospace",
+      },
+      h1: { size: "2rem", weight: 700, lineHeight: "1.2", letterSpacing: "-0.02em" },
+      h2: { size: "1.5rem", weight: 600, lineHeight: "1.3" },
+      h3: { size: "1.25rem", weight: 600, lineHeight: "1.4" },
+      h4: { size: "1.125rem", weight: 600, lineHeight: "1.4" },
+      body: { size: "1rem", weight: 400, lineHeight: "1.75" },
+      small: { size: "0.875rem", weight: 400, lineHeight: "1.5" },
+    },
+  },
+  layout: {
+    contentWidth: 768,
+    sidebarWidth: 280,
+    toc: { enabled: true, depth: 3 },
+    header: { height: 56, sticky: true },
+  },
+  components: {
+    Callout: { variant: "soft", icon: true },
+    CodeBlock: { showCopyButton: true },
+    Tabs: { style: "default" },
+  },
+};
+
+export const darksharp = createTheme({
+  name: "fumadocs-darksharp",
+  ui: DarksharpUIDefaults,
+});
+
+export { DarksharpUIDefaults };

package/src/themes/default.d.ts

@@ -0,0 +1,4 @@
+import type { DocsTheme } from "@farming-labs/docs";
+
+export declare const fumadocs: (overrides?: Partial<DocsTheme>) => DocsTheme;
+export declare const DefaultUIDefaults: Record<string, any>;

package/src/themes/default.js

@@ -0,0 +1,42 @@
+import { createTheme } from "@farming-labs/docs";
+
+const DefaultUIDefaults = {
+  colors: {
+    primary: "#6366f1",
+    background: "#ffffff",
+    muted: "#64748b",
+    border: "#e5e7eb",
+  },
+  typography: {
+    font: {
+      style: {
+        sans: "Inter, system-ui, sans-serif",
+        mono: "JetBrains Mono, monospace",
+      },
+      h1: { size: "2rem", weight: 700, lineHeight: "1.2", letterSpacing: "-0.02em" },
+      h2: { size: "1.5rem", weight: 600, lineHeight: "1.3" },
+      h3: { size: "1.25rem", weight: 600, lineHeight: "1.4" },
+      h4: { size: "1.125rem", weight: 600, lineHeight: "1.4" },
+      body: { size: "1rem", weight: 400, lineHeight: "1.75" },
+      small: { size: "0.875rem", weight: 400, lineHeight: "1.5" },
+    },
+  },
+  layout: {
+    contentWidth: 768,
+    sidebarWidth: 280,
+    toc: { enabled: true, depth: 3 },
+    header: { height: 72, sticky: true },
+  },
+  components: {
+    Callout: { variant: "soft", icon: true },
+    CodeBlock: { showCopyButton: true },
+    Tabs: { style: "default" },
+  },
+};
+
+export const fumadocs = createTheme({
+  name: "fumadocs-default",
+  ui: DefaultUIDefaults,
+});
+
+export { DefaultUIDefaults };

package/src/themes/pixel-border.d.ts

@@ -0,0 +1,4 @@
+import type { DocsTheme } from "@farming-labs/docs";
+
+export declare const pixelBorder: (overrides?: Partial<DocsTheme>) => DocsTheme;
+export declare const PixelBorderUIDefaults: Record<string, any>;

package/src/themes/pixel-border.js

@@ -0,0 +1,38 @@
+import { createTheme } from "@farming-labs/docs";
+
+const PixelBorderUIDefaults = {
+  colors: {
+    primary: "oklch(0.985 0.001 106.423)",
+    background: "hsl(0 0% 2%)",
+    muted: "hsl(0 0% 55%)",
+    border: "hsl(0 0% 15%)",
+  },
+  typography: {
+    font: {
+      style: {
+        sans: "system-ui, -apple-system, sans-serif",
+        mono: "ui-monospace, monospace",
+      },
+      h1: { size: "2.25rem", weight: 700, lineHeight: "1.2", letterSpacing: "-0.02em" },
+      h2: { size: "1.5rem", weight: 600, lineHeight: "1.3", letterSpacing: "-0.01em" },
+      h3: { size: "1.25rem", weight: 600, lineHeight: "1.4" },
+      h4: { size: "1.125rem", weight: 600, lineHeight: "1.4" },
+      body: { size: "1rem", weight: 400, lineHeight: "1.75" },
+      small: { size: "0.875rem", weight: 400, lineHeight: "1.5" },
+    },
+  },
+  layout: {
+    contentWidth: 860,
+    sidebarWidth: 286,
+    toc: { enabled: true, depth: 3 },
+    header: { height: 56, sticky: true },
+  },
+  components: {},
+};
+
+export const pixelBorder = createTheme({
+  name: "fumadocs-pixel-border",
+  ui: PixelBorderUIDefaults,
+});
+
+export { PixelBorderUIDefaults };

package/styles/colorful-bundle.css

@@ -0,0 +1,2 @@
+@import "./docs.css";
+@import "./colorful.css";