@farming-labs/svelte-theme 0.0.2-beta.18 → 0.0.2-beta.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.0.2-beta.18",
+  "version": "0.0.2-beta.20",
   "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "type": "module",
   "svelte": "./src/index.js",
@@ -72,8 +72,8 @@
   "dependencies": {
     "gray-matter": "^4.0.3",
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.2-beta.18",
-    "@farming-labs/svelte": "0.0.2-beta.18"
+    "@farming-labs/docs": "0.0.2-beta.20",
+    "@farming-labs/svelte": "0.0.2-beta.20"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/components/DocsLayout.svelte

@@ -174,10 +174,25 @@
     return `:root {\n  ${vars.join("\n  ")}\n}`;
   }
 
+  function buildLayoutCSS(layout) {
+    if (!layout) return "";
+    const rootVars = [];
+    const desktopVars = [];
+    if (layout.sidebarWidth) desktopVars.push(`--fd-sidebar-width: ${layout.sidebarWidth}px;`);
+    if (layout.contentWidth) rootVars.push(`--fd-content-width: ${layout.contentWidth}px;`);
+    if (layout.tocWidth) desktopVars.push(`--fd-toc-width: ${layout.tocWidth}px;`);
+    if (rootVars.length === 0 && desktopVars.length === 0) return "";
+    const parts = [];
+    if (rootVars.length > 0) parts.push(`:root {\n  ${rootVars.join("\n  ")}\n}`);
+    if (desktopVars.length > 0) parts.push(`@media (min-width: 1024px) {\n  :root {\n    ${desktopVars.join("\n    ")}\n  }\n}`);
+    return parts.join("\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");
+    const layout = config?.theme?.ui?.layout;
+    return [buildColorsCSS(colorOverrides), buildTypographyCSS(typography), buildLayoutCSS(layout)].filter(Boolean).join("\n");
   });
 </script>