@farming-labs/svelte-theme 0.0.2-beta.13 → 0.0.2-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.0.2-beta.13",
+  "version": "0.0.2-beta.15",
   "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "type": "module",
   "svelte": "./src/index.js",
@@ -33,6 +33,22 @@
     "./pixel-border/css": "./styles/pixel-border-bundle.css",
     "./darksharp/css": "./styles/darksharp-bundle.css"
   },
+  "typesVersions": {
+    "*": {
+      "pixel-border": [
+        "./src/themes/pixel-border.d.ts"
+      ],
+      "darksharp": [
+        "./src/themes/darksharp.d.ts"
+      ],
+      "fumadocs": [
+        "./src/themes/default.d.ts"
+      ],
+      ".": [
+        "./src/index.d.ts"
+      ]
+    }
+  },
   "files": [
     "src",
     "styles"
@@ -49,8 +65,8 @@
   "dependencies": {
     "gray-matter": "^4.0.3",
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.2-beta.13",
-    "@farming-labs/svelte": "0.0.2-beta.13"
+    "@farming-labs/docs": "0.0.2-beta.15",
+    "@farming-labs/svelte": "0.0.2-beta.15"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/components/DocsLayout.svelte

@@ -115,12 +115,78 @@
     if (!iconKey) return null;
     return ICON_MAP[iconKey] || null;
   }
+
+  const COLOR_MAP = {
+    primary: "--color-fd-primary",
+    primaryForeground: "--color-fd-primary-foreground",
+    background: "--color-fd-background",
+    foreground: "--color-fd-foreground",
+    muted: "--color-fd-muted",
+    mutedForeground: "--color-fd-muted-foreground",
+    border: "--color-fd-border",
+    card: "--color-fd-card",
+    cardForeground: "--color-fd-card-foreground",
+    accent: "--color-fd-accent",
+    accentForeground: "--color-fd-accent-foreground",
+    popover: "--color-fd-popover",
+    popoverForeground: "--color-fd-popover-foreground",
+    secondary: "--color-fd-secondary",
+    secondaryForeground: "--color-fd-secondary-foreground",
+    ring: "--color-fd-ring",
+  };
+
+  function buildColorsCSS(colors) {
+    if (!colors) return "";
+    const vars = [];
+    for (const [key, value] of Object.entries(colors)) {
+      if (!value || !COLOR_MAP[key]) continue;
+      vars.push(`${COLOR_MAP[key]}: ${value};`);
+    }
+    if (vars.length === 0) return "";
+    return `:root, .dark {\n  ${vars.join("\n  ")}\n}`;
+  }
+
+  function buildFontStyleVars(prefix, style) {
+    if (!style) return "";
+    const parts = [];
+    if (style.size) parts.push(`${prefix}-size: ${style.size};`);
+    if (style.weight != null) parts.push(`${prefix}-weight: ${style.weight};`);
+    if (style.lineHeight) parts.push(`${prefix}-line-height: ${style.lineHeight};`);
+    if (style.letterSpacing) parts.push(`${prefix}-letter-spacing: ${style.letterSpacing};`);
+    return parts.join("\n  ");
+  }
+
+  function buildTypographyCSS(typo) {
+    if (!typo?.font) return "";
+    const vars = [];
+    const fontStyle = typo.font.style;
+    if (fontStyle?.sans) vars.push(`--fd-font-sans: ${fontStyle.sans};`);
+    if (fontStyle?.mono) vars.push(`--fd-font-mono: ${fontStyle.mono};`);
+    for (const el of ["h1", "h2", "h3", "h4", "body", "small"]) {
+      const elStyle = typo.font[el];
+      if (elStyle) {
+        const elVars = buildFontStyleVars(`--fd-${el}`, elStyle);
+        if (elVars) vars.push(elVars);
+      }
+    }
+    if (vars.length === 0) return "";
+    return `:root {\n  ${vars.join("\n  ")}\n}`;
+  }
+
+  let overrideCSS = $derived.by(() => {
+    const colorOverrides = config?.theme?._userColorOverrides;
+    const typography = config?.theme?.ui?.typography;
+    return [buildColorsCSS(colorOverrides), buildTypographyCSS(typography)].filter(Boolean).join("\n");
+  });
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
 <svelte:head>
   {@html `<script>${themeInitScript}</script>`}
+  {#if overrideCSS}
+    {@html `<style>${overrideCSS}</style>`}
+  {/if}
 </svelte:head>
 
 <div class="fd-layout">

package/styles/pixel-border.css

@@ -94,6 +94,11 @@
 .fd-sidebar-folder.fd-sidebar-first-item {
   border-top: none;
 }
+
+.fd-sidebar-top-link:last-child,
+.fd-sidebar-nav > .fd-sidebar-folder:last-child {
+  border-bottom: 1px solid var(--color-fd-border);
+}
 .fd-sidebar-folder-content::before {
   content: '';
   position: absolute;