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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/nuxt-theme",
-  "version": "0.0.2-beta.18",
+  "version": "0.0.2-beta.20",
   "description": "Nuxt/Vue UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "type": "module",
   "exports": {
@@ -53,7 +53,7 @@
   "license": "MIT",
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.2-beta.18"
+    "@farming-labs/docs": "0.0.2-beta.20"
   },
   "peerDependencies": {
     "vue": ">=3.0.0",

package/src/components/DocsLayout.vue

@@ -132,11 +132,26 @@ function buildTypographyCSS(typo: Record<string, any> | undefined): string {
   return `:root {\n  ${vars.join("\n  ")}\n}`;
 }
 
+function buildLayoutCSS(layout: Record<string, any> | undefined): string {
+  if (!layout) return "";
+  const rootVars: string[] = [];
+  const desktopVars: string[] = [];
+  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: string[] = [];
+  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");
+}
+
 const overrideCSS = computed(() => {
   const colorOverrides = (props.config?.theme as any)?._userColorOverrides
     ?? (props.config?.theme as any)?.ui?.colors;
   const typography = (props.config?.theme as any)?.ui?.typography;
-  return [buildColorsCSS(colorOverrides), buildTypographyCSS(typography)].filter(Boolean).join("\n");
+  const layout = (props.config?.theme as any)?.ui?.layout;
+  return [buildColorsCSS(colorOverrides), buildTypographyCSS(typography), buildLayoutCSS(layout)].filter(Boolean).join("\n");
 });
 
 useHead(() => ({