@farming-labs/nuxt-theme 0.2.44 → 0.2.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/nuxt-theme",
-  "version": "0.2.44",
+  "version": "0.2.45",
   "description": "Nuxt/Vue UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -88,7 +88,7 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.2.44"
+    "@farming-labs/docs": "0.2.45"
   },
   "peerDependencies": {
     "nuxt": ">=3.0.0",

package/src/components/DocsLayout.vue

@@ -156,7 +156,9 @@ function buildTypographyCSS(typo: Record<string, any> | undefined): string {
     }
   }
   if (vars.length === 0) return "";
-  return `:root {\n  ${vars.join("\n  ")}\n}`;
+  return `:root,
+body:has(#nd-docs-layout),
+#nd-docs-layout {\n  ${vars.join("\n  ")}\n}`;
 }
 
 function buildLayoutCSS(layout: Record<string, any> | undefined): string {
@@ -168,10 +170,10 @@ function buildLayoutCSS(layout: Record<string, any> | undefined): string {
   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 (rootVars.length > 0) parts.push(`#nd-docs-layout {\n  ${rootVars.join("\n  ")}\n}`);
   if (desktopVars.length > 0)
     parts.push(
-      `@media (min-width: 1024px) {\n  :root {\n    ${desktopVars.join("\n    ")}\n  }\n}`,
+      `@media (min-width: 1024px) {\n  #nd-docs-layout {\n    ${desktopVars.join("\n    ")}\n  }\n}`,
     );
   return parts.join("\n");
 }
@@ -269,7 +271,7 @@ const showFloatingAI = computed(
 
 <template>
   <div class="fd-layout-root">
-    <div class="fd-layout" @keydown="handleKeydown">
+    <div id="nd-docs-layout" data-fd-framework="nuxt" class="fd-layout" @keydown="handleKeydown">
       <header class="fd-header">
         <button
           class="fd-menu-btn"

package/src/components/DocsPage.vue

@@ -402,7 +402,7 @@ watch(
             :to="localizedPreviousPage.url"
             class="fd-page-nav-card fd-page-nav-prev"
           >
-            <span class="fd-page-nav-label">
+            <span class="fd-page-nav-title fd-page-nav-title-prev">
               <svg
                 width="14"
                 height="14"
@@ -415,14 +415,14 @@ watch(
               >
                 <polyline points="15 18 9 12 15 6" />
               </svg>
-              Previous
+              {{ localizedPreviousPage.name }}
             </span>
-            <span class="fd-page-nav-title">{{ localizedPreviousPage.name }}</span>
+            <span class="fd-page-nav-description">Previous Page</span>
           </NuxtLink>
           <div v-else></div>
           <NuxtLink v-if="localizedNextPage" :to="localizedNextPage.url" class="fd-page-nav-card fd-page-nav-next">
-            <span class="fd-page-nav-label">
-              Next
+            <span class="fd-page-nav-title fd-page-nav-title-next">
+              {{ localizedNextPage.name }}
               <svg
                 width="14"
                 height="14"
@@ -436,7 +436,7 @@ watch(
                 <polyline points="9 18 15 12 9 6" />
               </svg>
             </span>
-            <span class="fd-page-nav-title">{{ localizedNextPage.name }}</span>
+            <span class="fd-page-nav-description">Next Page</span>
           </NuxtLink>
           <div v-else></div>
         </nav>

package/src/themes/colorful.js

@@ -24,7 +24,7 @@ const ColorfulUIDefaults = {
   layout: {
     contentWidth: 768,
     sidebarWidth: 260,
-    toc: { enabled: true, depth: 3, style: "default" },
+    toc: { enabled: true, depth: 3, style: "directional" },
     header: { height: 56, sticky: true },
   },
   components: {

package/src/themes/default.js

@@ -24,7 +24,7 @@ const DefaultUIDefaults = {
   layout: {
     contentWidth: 768,
     sidebarWidth: 280,
-    toc: { enabled: true, depth: 3, style: "default" },
+    toc: { enabled: true, depth: 3 },
     header: { height: 72, sticky: true },
   },
   components: {

package/src/themes/pixel-border.js

@@ -10,8 +10,8 @@ const PixelBorderUIDefaults = {
   typography: {
     font: {
       style: {
-        sans: "system-ui, -apple-system, sans-serif",
-        mono: "ui-monospace, monospace",
+        sans: "var(--font-sans, system-ui, -apple-system, sans-serif)",
+        mono: "var(--font-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" },

package/styles/colorful.css

@@ -221,7 +221,7 @@
 
 /* ─── Tables (rounded) ─────────────────────────────────────────────── */
 
-.fd-docs-content table {
+:is(.fd-docs-content, #nd-docs-layout .prose) table {
   border-collapse: separate;
   border-spacing: 0;
   background: var(--color-fd-card);
@@ -230,18 +230,18 @@
   overflow: hidden;
 }
 
-.fd-docs-content th {
+:is(.fd-docs-content, #nd-docs-layout .prose) th {
   background: var(--color-fd-muted);
   font-weight: 600;
 }
 
-.fd-docs-content th,
-.fd-docs-content td {
+:is(.fd-docs-content, #nd-docs-layout .prose) th,
+:is(.fd-docs-content, #nd-docs-layout .prose) td {
   padding: 0.625rem;
   border-bottom: 1px solid var(--color-fd-border);
 }
 
-.fd-docs-content tr:last-child td {
+:is(.fd-docs-content, #nd-docs-layout .prose) tr:last-child td {
   border-bottom: none;
 }
 

package/styles/command-grid-bundle.css

@@ -266,7 +266,7 @@ aside div.overflow-hidden.relative[data-state] a[data-active="true"]::before {
 .fd-page-description,
 .fd-docs-content p,
 .fd-docs-content li,
-.fd-docs-content td,
+:is(.fd-docs-content, .prose) td,
 .fd-docs-content blockquote {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
@@ -282,7 +282,7 @@ aside div.overflow-hidden.relative[data-state] a[data-active="true"]::before {
 
 .fd-card,
 [data-card],
-[class*="fd-callout"],
+.fd-callout,
 .fd-page-action-menu,
 .fd-page-action-btn,
 .fd-docs-content pre,
@@ -293,7 +293,7 @@ aside div.overflow-hidden.relative[data-state] a[data-active="true"]::before {
 [class*="page-nav"] a,
 .fd-hover-link-card,
 .fd-page-body .fd-table-wrapper,
-.fd-docs-content table,
+:is(.fd-docs-content, .prose) table,
 .fd-tabs,
 .fd-tabs-list,
 .fd-tabs-trigger,
@@ -318,7 +318,7 @@ aside div.overflow-hidden.relative[data-state] a[data-active="true"]::before {
 
 .fd-card,
 [data-card],
-[class*="fd-callout"],
+.fd-callout,
 .fd-page-action-menu,
 .fd-page-action-btn,
 .fd-page-nav,
@@ -556,8 +556,7 @@ figure.shiki:has(figcaption) > div:first-child,
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
 
-.fd-callout,
-[class*="fd-callout"] {
+.fd-callout {
   border: 2px solid var(--color-fd-border) !important;
   background: color-mix(
     in srgb,

package/styles/command-grid.css

@@ -266,7 +266,7 @@ aside div.overflow-hidden.relative[data-state] a[data-active="true"]::before {
 .fd-page-description,
 .fd-docs-content p,
 .fd-docs-content li,
-.fd-docs-content td,
+:is(.fd-docs-content, .prose) td,
 .fd-docs-content blockquote {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
@@ -282,7 +282,7 @@ aside div.overflow-hidden.relative[data-state] a[data-active="true"]::before {
 
 .fd-card,
 [data-card],
-[class*="fd-callout"],
+.fd-callout,
 .fd-page-action-menu,
 .fd-page-action-btn,
 .fd-docs-content pre,
@@ -293,7 +293,7 @@ aside div.overflow-hidden.relative[data-state] a[data-active="true"]::before {
 [class*="page-nav"] a,
 .fd-hover-link-card,
 .fd-page-body .fd-table-wrapper,
-.fd-docs-content table,
+:is(.fd-docs-content, .prose) table,
 .fd-tabs,
 .fd-tabs-list,
 .fd-tabs-trigger,
@@ -318,7 +318,7 @@ aside div.overflow-hidden.relative[data-state] a[data-active="true"]::before {
 
 .fd-card,
 [data-card],
-[class*="fd-callout"],
+.fd-callout,
 .fd-page-action-menu,
 .fd-page-action-btn,
 .fd-page-nav,
@@ -556,8 +556,7 @@ figure.shiki:has(figcaption) > div:first-child,
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
 
-.fd-callout,
-[class*="fd-callout"] {
+.fd-callout {
   border: 2px solid var(--color-fd-border) !important;
   background: color-mix(
     in srgb,

package/styles/concrete.css

@@ -95,7 +95,7 @@ aside a[data-active="true"],
 
 .fd-card,
 [data-card],
-[class*="fd-callout"],
+.fd-callout,
 .fd-page-action-menu,
 .fd-page-action-btn,
 .fd-docs-content pre,
@@ -110,7 +110,7 @@ aside a[data-active="true"],
 
 .dark .fd-card,
 .dark [data-card],
-.dark [class*="fd-callout"],
+.dark .fd-callout,
 .dark .fd-page-action-menu,
 .dark .fd-page-action-btn,
 .dark .fd-docs-content pre,
@@ -123,19 +123,21 @@ aside a[data-active="true"],
   box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
 }
 
+:is(.fd-docs-content, #nd-docs-layout .prose) table,
 .fd-page-body .fd-table-wrapper,
-.fd-docs-content table {
+.fd-page-body table {
   border: 3px solid var(--color-fd-border);
   box-shadow: 6px 6px 0 var(--color-fd-border);
   background: var(--color-fd-card);
 }
 
+.dark :is(.fd-docs-content, #nd-docs-layout .prose) table,
 .dark .fd-page-body .fd-table-wrapper,
-.dark .fd-docs-content table {
+.dark .fd-page-body table {
   box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
 }
 
-.fd-docs-content th,
+:is(.fd-docs-content, #nd-docs-layout .prose) th,
 .fd-page-body th {
   background: var(--color-fd-foreground);
   color: var(--color-fd-background);
@@ -145,22 +147,22 @@ aside a[data-active="true"],
   font-size: 0.74rem;
 }
 
-.fd-docs-content td,
+:is(.fd-docs-content, #nd-docs-layout .prose) td,
 .fd-page-body td {
   font-weight: 550;
 }
 
-.fd-docs-content tbody tr:nth-child(odd) td,
+:is(.fd-docs-content, #nd-docs-layout .prose) tbody tr:nth-child(odd) td,
 .fd-page-body tbody tr:nth-child(odd) td {
   background: color-mix(in srgb, var(--color-fd-secondary) 72%, white 28%);
 }
 
-.dark .fd-docs-content tbody tr:nth-child(odd) td,
+.dark :is(.fd-docs-content, #nd-docs-layout .prose) tbody tr:nth-child(odd) td,
 .dark .fd-page-body tbody tr:nth-child(odd) td {
   background: color-mix(in srgb, var(--color-fd-secondary) 92%, black 8%);
 }
 
-.fd-docs-content tbody tr:hover td,
+:is(.fd-docs-content, #nd-docs-layout .prose) tbody tr:hover td,
 .fd-page-body tbody tr:hover td {
   background: color-mix(in srgb, var(--color-fd-primary) 16%, var(--color-fd-card));
 }
@@ -253,15 +255,13 @@ aside a[data-active="true"],
   box-shadow: inset -3px 0 0 var(--color-fd-border);
 }
 
-.fd-callout,
-[class*="fd-callout"] {
+.fd-callout {
   border-width: 3px !important;
   box-shadow: 6px 6px 0 var(--color-fd-border);
   background: color-mix(in srgb, var(--color-fd-secondary) 82%, white 18%);
 }
 
-.dark .fd-callout,
-.dark [class*="fd-callout"] {
+.dark .fd-callout {
   box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
   background: color-mix(in srgb, var(--color-fd-secondary) 92%, black 8%);
 }

package/styles/darksharp-bundle.css

@@ -1,6 +1,6 @@
 /* @farming-labs/svelte-theme — darksharp theme (bundled)
  * Single import: includes base docs.css + darksharp overrides.
- * Usage: @import "@farming-labs/svelte-theme/darksharp/css";
+ * Usage: @import "@farming-labs/theme/darksharp/css";
  */
 @import "./docs.css";
 @import "./darksharp.css";

package/styles/docs.css

@@ -1805,45 +1805,55 @@ html.dark pre.shiki {
 }
 
 .fd-page-body .fd-table-wrapper {
-  margin: 16px 0;
+  margin: 0 0 24px;
   overflow-x: auto;
-  border: 1px solid var(--color-fd-border);
-  border-radius: 8px;
+  border: 0;
+  border-radius: 0;
 }
 
 .fd-page-body table {
   width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-.fd-page-body thead {
-  background: var(--color-fd-muted);
+  table-layout: auto;
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: hidden;
+  border: 1px solid var(--color-fd-border);
+  border-radius: var(--radius-lg, 8px);
+  background: var(--color-fd-card);
+  font-size: 0.875em;
+  line-height: 1.7142857;
 }
 
 .fd-page-body th {
-  padding: 10px 16px;
+  padding: 10px;
   text-align: left;
   font-weight: 600;
-  font-size: 13px;
-  color: var(--color-fd-muted-foreground);
+  font-size: 0.875rem;
+  color: var(--color-fd-foreground);
+  background: var(--color-fd-muted);
+  border-inline-start: 1px solid var(--color-fd-border);
   border-bottom: 1px solid var(--color-fd-border);
   white-space: nowrap;
 }
 
+.fd-page-body th:first-child {
+  border-inline-start: none;
+}
+
 .fd-page-body td {
-  padding: 10px 16px;
+  padding: 10px;
   text-align: left;
+  border-inline-start: 1px solid var(--color-fd-border);
   border-bottom: 1px solid var(--color-fd-border);
   color: var(--color-fd-foreground);
 }
 
-.fd-page-body tbody tr:last-child td {
-  border-bottom: none;
+.fd-page-body td:first-child {
+  border-inline-start: none;
 }
 
-.fd-page-body tbody tr:hover {
-  background: var(--color-fd-accent);
+.fd-page-body tbody tr:last-child td {
+  border-bottom: none;
 }
 
 .fd-page-body td code {

package/styles/greentree.css

@@ -345,7 +345,7 @@ nav[class*="header"] {
   font-weight: 400;
 }
 
-.fd-docs-content table {
+:is(.fd-docs-content, .prose) table {
   border-collapse: separate;
   border-spacing: 0;
   background: var(--color-fd-card);
@@ -355,7 +355,7 @@ nav[class*="header"] {
   width: 100%;
 }
 
-.fd-docs-content th {
+:is(.fd-docs-content, .prose) th {
   background: var(--color-fd-muted);
   font-weight: 500;
   font-size: 0.8125rem;
@@ -364,14 +364,14 @@ nav[class*="header"] {
   letter-spacing: normal;
 }
 
-.fd-docs-content th,
-.fd-docs-content td {
+:is(.fd-docs-content, .prose) th,
+:is(.fd-docs-content, .prose) td {
   padding: 0.75rem 1rem;
   border-bottom: 1px solid var(--color-fd-border);
   font-size: 0.875rem;
 }
 
-.fd-docs-content tr:last-child td {
+:is(.fd-docs-content, .prose) tr:last-child td {
   border-bottom: none;
 }
 

package/styles/hardline.css

@@ -284,7 +284,7 @@ aside button[class*="bg-fd-secondary"] {
 /* Cards, callouts, tabs, and generic surfaces */
 .fd-card,
 [data-card],
-[class*="fd-callout"],
+.fd-callout,
 .fd-page-action-menu,
 .fd-page-action-btn {
   border: 2px solid var(--color-fd-border) !important;
@@ -294,7 +294,7 @@ aside button[class*="bg-fd-secondary"] {
 
 .dark .fd-card,
 .dark [data-card],
-.dark [class*="fd-callout"],
+.dark .fd-callout,
 .dark .fd-page-action-menu,
 .dark .fd-page-action-btn {
   box-shadow: 4px 4px 0 color-mix(in srgb, var(--color-fd-primary) 40%, transparent);
@@ -365,33 +365,40 @@ aside button[class*="bg-fd-secondary"] {
   background: #121214 !important;
 }
 
-.fd-docs-content table {
-  border-collapse: collapse;
-  border: 2px solid var(--color-fd-border);
+.fd-table-wrapper {
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+}
+
+:is(.fd-docs-content, .prose) table {
+  border-collapse: collapse !important;
+  border: 2px solid var(--color-fd-border) !important;
+  border-radius: 0 !important;
   width: 100%;
-  background: var(--color-fd-card);
+  background: var(--color-fd-card) !important;
 }
 
-.fd-docs-content th,
-.fd-docs-content td {
-  border: 2px solid var(--color-fd-border);
-  padding: 0.7rem 0.85rem;
+:is(.fd-docs-content, .prose) th,
+:is(.fd-docs-content, .prose) td {
+  border: 2px solid var(--color-fd-border) !important;
+  padding: 0.7rem 0.85rem !important;
 }
 
-.fd-docs-content th {
+:is(.fd-docs-content, .prose) th {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-size: 0.78rem;
-  background: var(--color-fd-primary);
-  color: var(--color-fd-primary-foreground);
+  background: var(--color-fd-primary) !important;
+  color: var(--color-fd-primary-foreground) !important;
 }
 
-.fd-docs-content tbody tr:nth-child(even) td {
-  background: color-mix(in srgb, var(--color-fd-secondary) 85%, transparent);
+:is(.fd-docs-content, .prose) tbody tr:nth-child(even) td {
+  background: color-mix(in srgb, var(--color-fd-secondary) 85%, transparent) !important;
 }
 
-.dark .fd-docs-content tbody tr:nth-child(even) td {
-  background: #1a1a1d;
+.dark :is(.fd-docs-content, .prose) tbody tr:nth-child(even) td {
+  background: #1a1a1d !important;
 }
 
 /* Prev/next cards */

package/styles/ledger.css

@@ -197,7 +197,7 @@ body,
 .fd-page-description,
 .fd-docs-content p,
 .fd-docs-content li,
-.fd-docs-content td {
+:is(.fd-docs-content, .prose) td {
   color: var(--color-fd-muted-foreground);
   line-height: 1.7;
 }
@@ -381,7 +381,7 @@ figure.shiki:has(figcaption) > div:first-child > div:last-child {
 }
 
 .fd-table-wrapper,
-.fd-docs-content table {
+:is(.fd-docs-content, .prose) table {
   border: 1px solid var(--fd-ledger-soft-border);
   border-radius: 0.5rem;
   background: var(--color-fd-card);

package/styles/pixel-border-bundle.css

@@ -1,6 +1,6 @@
 /* @farming-labs/nuxt-theme — pixel-border theme (bundled)
  * Single import: includes base docs.css + pixel-border overrides.
- * Usage: @import "@farming-labs/nuxt-theme/pixel-border/css";
+ * Usage: @import "@farming-labs/theme/pixel-border/css";
  */
 @import "./docs.css";
 @import "./pixel-border.css";