@farming-labs/theme 0.2.44 → 0.2.45

package/styles/colorful.css

@@ -1,7 +1,14 @@
 /* @farming-labs/theme — colorful theme CSS
  * Fumadocs-inspired theme with warm yellow/amber accent colors.
  */
-@import "./presets/neutral.css";
+@import "./bundles/shared-framework.css";
+
+#nd-docs-layout[data-fd-framework] {
+  --fd-framework-page-justify: stretch;
+  --fd-framework-page-columns-with-toc: minmax(0, calc(100% - var(--fd-toc-width, 268px)))
+    var(--fd-toc-width, 268px);
+  --fd-framework-article-padding: 56px 32px 24px;
+}
 
 /* ─── Colorful yellow accent overrides ────────────────────────────── */
 
@@ -324,7 +331,8 @@
 
 /* ─── Inline code ──────────────────────────────────────────────────── */
 
-.fd-docs-content :not(pre) > code {
+.fd-docs-content :not(pre) > code,
+.fd-page-body :not(pre) > code {
   padding: 3px;
   border: 1px solid var(--color-fd-border);
   font-size: 13px;
@@ -334,7 +342,8 @@
 
 /* ─── Links in prose ───────────────────────────────────────────────── */
 
-.fd-docs-content a:not(.fd-page-nav-card):not([class]) {
+.fd-docs-content a:not(.fd-page-nav-card):not([class]),
+.fd-page-body a:not(.fd-page-nav-card):not([class]) {
   text-decoration: underline;
   text-underline-offset: 3.5px;
   text-decoration-color: var(--color-fd-primary);
@@ -344,7 +353,12 @@
 
 /* ─── Tables (rounded style) ───────────────────────────────────────── */
 
-.fd-docs-content table {
+.fd-table-wrapper {
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+:is(.fd-docs-content, .prose, .fd-page-body) table {
   border-collapse: separate;
   border-spacing: 0;
   background: var(--color-fd-card);
@@ -353,24 +367,25 @@
   overflow: hidden;
 }
 
-.fd-docs-content th {
+:is(.fd-docs-content, .prose, .fd-page-body) th {
   background: var(--color-fd-muted);
   font-weight: 600;
 }
 
-.fd-docs-content th,
-.fd-docs-content td {
+:is(.fd-docs-content, .prose, .fd-page-body) th,
+:is(.fd-docs-content, .prose, .fd-page-body) td {
   padding: 0.625rem;
   border-bottom: 1px solid var(--color-fd-border);
 }
 
-.fd-docs-content tr:last-child td {
+:is(.fd-docs-content, .prose, .fd-page-body) tr:last-child td {
   border-bottom: none;
 }
 
 /* ─── Blockquotes ──────────────────────────────────────────────────── */
 
-.fd-docs-content blockquote {
+.fd-docs-content blockquote,
+.fd-page-body blockquote {
   border-left: 2px solid var(--color-fd-primary);
   padding-left: 1rem;
   color: var(--color-fd-foreground);
@@ -379,7 +394,8 @@
 
 /* ─── Horizontal rule ──────────────────────────────────────────────── */
 
-.fd-docs-content hr {
+.fd-docs-content hr,
+.fd-page-body hr {
   border-color: var(--color-fd-border);
 }
 

package/styles/command-grid.css

@@ -1,6 +1,17 @@
 /* @farming-labs/theme - command-grid theme CSS */
 @import "./concrete.css";
 
+#nd-docs-layout[data-fd-framework] {
+  --fd-framework-page-columns-with-toc: minmax(0, 1fr)
+    minmax(0, min(980px, calc(100% - var(--fd-toc-width, 268px))))
+    var(--fd-toc-width, 268px) minmax(0, 1fr);
+  --fd-framework-article-column: 2;
+  --fd-framework-toc-column: 3;
+  --fd-framework-article-width: min(980px, 100%);
+  --fd-framework-article-justify: center;
+  --fd-framework-article-padding: 32px 48px 64px;
+}
+
 :root {
   --color-fd-primary: #141414;
   --color-fd-primary-foreground: #f8f6ed;
@@ -266,7 +277,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,21 +293,23 @@ 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,
 .fd-docs-content .shiki,
 .fd-docs-content [data-codeblock],
+.fd-codeblock,
 .fd-page-nav,
 .fd-page-nav-card,
 [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,
+.fd-tab-trigger,
 .fd-feedback-input,
 .fd-feedback-submit,
 .fd-feedback-choice,
@@ -318,7 +331,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,
@@ -449,6 +462,7 @@ button[data-search-full] kbd,
 .fd-docs-content pre,
 .fd-docs-content .shiki,
 .fd-docs-content [data-codeblock],
+.fd-codeblock,
 .fd-ai-code-block {
   border: 2px solid var(--color-fd-border) !important;
   background: var(--color-fd-card) !important;
@@ -556,8 +570,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

@@ -1,6 +1,17 @@
 /* @farming-labs/theme - concrete theme CSS */
 @import "./hardline.css";
 
+#nd-docs-layout[data-fd-framework] {
+  --fd-framework-page-columns-with-toc: minmax(0, 1fr)
+    minmax(0, min(968px, calc(100% - var(--fd-toc-width, 268px))))
+    var(--fd-toc-width, 268px) minmax(0, 1fr);
+  --fd-framework-article-column: 2;
+  --fd-framework-toc-column: 3;
+  --fd-framework-article-width: min(968px, 100%);
+  --fd-framework-article-justify: center;
+  --fd-framework-article-padding: 32px 48px 64px;
+}
+
 :root {
   --color-fd-primary: #ff5b31;
   --color-fd-primary-foreground: #140f0c;
@@ -102,12 +113,13 @@ 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,
 .fd-docs-content .shiki,
 .fd-docs-content [data-codeblock],
+.fd-codeblock,
 .fd-page-nav,
 .fd-page-nav-card,
 [class*="page-nav"] a {
@@ -116,12 +128,13 @@ 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,
 .dark .fd-docs-content .shiki,
 .dark .fd-docs-content [data-codeblock],
+.dark .fd-codeblock,
 .dark .fd-page-nav,
 .dark .fd-page-nav-card,
 .dark [class*="page-nav"] a {
@@ -129,19 +142,23 @@ aside a[data-active="true"],
 }
 
 .fd-docs-content h1,
-.fd-docs-content h2 {
+.fd-docs-content h2,
+.fd-page-body h1,
+.fd-page-body h2 {
   max-width: 14ch;
 }
 
-.fd-docs-content h1 {
+.fd-docs-content h1,
+.fd-page-body h1 {
   letter-spacing: -0.055em;
 }
 
-.fd-docs-content h2 {
+.fd-docs-content h2,
+.fd-page-body h2 {
   letter-spacing: -0.04em;
 }
 
-.fd-docs-content th {
+:is(.fd-docs-content, .prose) th {
   background: var(--color-fd-foreground);
   color: var(--color-fd-background);
 }
@@ -158,19 +175,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, .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, .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, .prose) th,
 .fd-page-body th {
   background: var(--color-fd-foreground);
   color: var(--color-fd-background);
@@ -180,22 +199,22 @@ aside a[data-active="true"],
   font-size: 0.74rem;
 }
 
-.fd-docs-content td,
+:is(.fd-docs-content, .prose) td,
 .fd-page-body td {
   font-weight: 550;
 }
 
-.fd-docs-content tbody tr:nth-child(odd) td,
+:is(.fd-docs-content, .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, .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, .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));
 }
@@ -204,6 +223,7 @@ aside a[data-active="true"],
 .fd-docs-content .shiki,
 .fd-docs-content [data-codeblock],
 .fd-docs-content .fd-codeblock,
+.fd-codeblock,
 .fd-ai-code-block {
   border-width: 3px !important;
   box-shadow: 6px 6px 0 var(--color-fd-border);
@@ -215,6 +235,7 @@ aside a[data-active="true"],
 .dark .fd-docs-content .shiki,
 .dark .fd-docs-content [data-codeblock],
 .dark .fd-docs-content .fd-codeblock,
+.dark .fd-codeblock,
 .dark .fd-ai-code-block {
   box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
   background:
@@ -288,15 +309,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/darkbold.css

@@ -1,7 +1,7 @@
 /* @farming-labs/theme — darkbold theme CSS
  * Pure monochrome design, clean typography, Geist font, no accent colors.
  */
-@import "./presets/neutral.css";
+@import "./bundles/shared-framework.css";
 
 /* ─── DarkBold color overrides ──────────────────────────────────── */
 
@@ -66,7 +66,8 @@ h3 {
 }
 
 /* Body / paragraph text — DarkBold uses 16px, 1.6 line-height */
-.fd-docs-content p {
+.fd-docs-content p,
+.fd-page-body p {
   font-size: 1rem;
   line-height: 1.6;
 }
@@ -96,7 +97,9 @@ aside a > img:first-child {
 
 /* ── Hide TOC heading icon ──────────────────────────────────────── */
 #nd-toc h3 > svg,
-#nd-toc h3 > img {
+#nd-toc h3 > img,
+.fd-toc-title > svg,
+.fd-toc-title > img {
   display: none;
 }
 
@@ -173,7 +176,8 @@ nav[class*="header"] {
  * ═══════════════════════════════════════════════════════════════════ */
 
 /* Links in prose — DarkBold uses underline, dark text */
-.fd-docs-content a:not(.fd-page-nav-card):not([class]) {
+.fd-docs-content a:not(.fd-page-nav-card):not([class]),
+.fd-page-body a:not(.fd-page-nav-card):not([class]) {
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-color: var(--color-fd-border);
@@ -183,12 +187,14 @@ nav[class*="header"] {
   transition: text-decoration-color 150ms;
 }
 
-.fd-docs-content a:not(.fd-page-nav-card):not([class]):hover {
+.fd-docs-content a:not(.fd-page-nav-card):not([class]):hover,
+.fd-page-body a:not(.fd-page-nav-card):not([class]):hover {
   text-decoration-color: var(--color-fd-foreground);
 }
 
 /* Inline code */
-.fd-docs-content :not(pre) > code {
+.fd-docs-content :not(pre) > code,
+.fd-page-body :not(pre) > code {
   padding: 1px 4px;
   border: 1px solid var(--color-fd-border);
   font-size: 0.875rem;
@@ -199,7 +205,12 @@ nav[class*="header"] {
 }
 
 /* Tables */
-.fd-docs-content table {
+.fd-table-wrapper {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+:is(.fd-docs-content, .prose, .fd-page-body) table {
   border-collapse: separate;
   border-spacing: 0;
   background: var(--color-fd-card);
@@ -209,7 +220,7 @@ nav[class*="header"] {
   width: 100%;
 }
 
-.fd-docs-content th {
+:is(.fd-docs-content, .prose, .fd-page-body) th {
   background: var(--color-fd-muted);
   font-weight: 500;
   font-size: 0.8125rem;
@@ -218,19 +229,20 @@ nav[class*="header"] {
   letter-spacing: normal;
 }
 
-.fd-docs-content th,
-.fd-docs-content td {
+:is(.fd-docs-content, .prose, .fd-page-body) th,
+:is(.fd-docs-content, .prose, .fd-page-body) 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, .fd-page-body) tr:last-child td {
   border-bottom: none;
 }
 
 /* Blockquotes */
-.fd-docs-content blockquote {
+.fd-docs-content blockquote,
+.fd-page-body blockquote {
   border-left: 3px solid var(--color-fd-border);
   padding-left: 1rem;
   color: var(--color-fd-muted-foreground);
@@ -239,7 +251,8 @@ nav[class*="header"] {
 }
 
 /* Horizontal rule */
-.fd-docs-content hr {
+.fd-docs-content hr,
+.fd-page-body hr {
   border-color: var(--color-fd-border);
 }
 
@@ -312,7 +325,8 @@ nav[class*="header"] {
  * CODE BLOCKS
  * ═══════════════════════════════════════════════════════════════════ */
 
-figure.shiki {
+figure.shiki,
+.fd-codeblock {
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid var(--color-fd-border);
@@ -322,11 +336,14 @@ figure.shiki {
  * TABS — DarkBold: bottom border indicator, no background
  * ═══════════════════════════════════════════════════════════════════ */
 
-[role="tablist"] {
+[role="tablist"],
+.fd-tabs,
+.fd-tabs-list {
   border-bottom: 1px solid var(--color-fd-border);
 }
 
-[role="tab"] {
+[role="tab"],
+.fd-tab-trigger {
   font-size: 0.875rem;
   font-weight: 400;
   padding: 0.5rem 0.75rem;
@@ -339,7 +356,8 @@ figure.shiki {
 }
 
 [role="tab"][aria-selected="true"],
-[role="tab"][data-state="active"] {
+[role="tab"][data-state="active"],
+.fd-tab-trigger.fd-tab-active {
   color: var(--color-fd-foreground);
   border-bottom-color: var(--color-fd-foreground);
   font-weight: 500;
@@ -349,7 +367,9 @@ figure.shiki {
  * CALLOUT, ACCORDION
  * ═══════════════════════════════════════════════════════════════════ */
 
-[style*="--callout-color"] {
+[style*="--callout-color"],
+.fd-callout,
+[data-callout] {
   border-radius: 8px;
   border-width: 1px;
 }
@@ -394,21 +414,27 @@ details > :not(summary) {
  * handled by fumadocs-ui based on the style prop.
  * ═══════════════════════════════════════════════════════════════════ */
 
-#nd-toc a[data-active="true"] {
+#nd-toc a[data-active="true"],
+.fd-toc-link-active,
+.fd-toc-clerk .fd-toc-link[data-active="true"] {
   color: var(--color-fd-foreground);
   font-weight: 500;
 }
 
-#nd-toc a[data-active="false"] {
+#nd-toc a[data-active="false"],
+.fd-toc-link {
   color: var(--color-fd-muted-foreground);
 }
 
-#nd-toc a {
+#nd-toc a,
+.fd-toc-link,
+.fd-toc-clerk .fd-toc-link {
   font-size: 0.875rem;
   line-height: 1.3;
 }
 
-#nd-toc h3 {
+#nd-toc h3,
+.fd-toc-title {
   font-size: 0.875rem;
   font-weight: 500;
 }

package/styles/darksharp.css

@@ -2,7 +2,18 @@
  * Inspired by all-black, sharp edges, minimal radius.
  * Uses the "black" color preset as the base.
  */
-@import "./presets/black.css";
+@import "./bundles/shared-framework.css";
+
+#nd-docs-layout[data-fd-framework] {
+  --fd-framework-page-columns-with-toc: minmax(0, 1fr)
+    minmax(0, min(900px, calc(100% - var(--fd-toc-width, 268px))))
+    var(--fd-toc-width, 268px) minmax(0, 1fr);
+  --fd-framework-article-column: 2;
+  --fd-framework-toc-column: 3;
+  --fd-framework-article-width: min(900px, 100%);
+  --fd-framework-article-justify: center;
+  --fd-framework-article-padding: 56px 32px 24px;
+}
 
 :root {
   --color-fd-background: oklch(1 0 0);
@@ -160,11 +171,14 @@ td {
 /* ─── Code blocks ─────────────────────────────────────────────────── */
 
 figure[data-rehype-pretty-code-figure],
-figure[data-rehype-pretty-code-figure] pre {
+figure[data-rehype-pretty-code-figure] pre,
+.fd-codeblock,
+.fd-codeblock pre {
   border-radius: 0.2rem !important;
 }
 
-article figure {
+article figure,
+.fd-codeblock {
   border-radius: 0.2rem !important;
   overflow: hidden;
 }
@@ -173,7 +187,19 @@ article figure {
   border-color: hsl(0 0% 14%);
 }
 
-figure button {
+figure button,
+.fd-copy-btn {
+  border-radius: 0.1rem !important;
+}
+
+.fd-codeblock-title,
+.fd-tabs,
+.fd-tabs-list,
+.fd-tab-panel {
+  border-radius: 0.2rem !important;
+}
+
+.fd-tab-trigger {
   border-radius: 0.1rem !important;
 }
 
@@ -198,7 +224,9 @@ kbd {
 /* ─── Callouts ────────────────────────────────────────────────────── */
 
 [class*="bg-fd-card"],
-[class*="fd-callout"],
+.fd-callout,
+[data-callout],
+[style*="--callout-color"],
 [role="alert"] {
   border-radius: 0.2rem !important;
 }

package/styles/default.css

@@ -1,5 +1,12 @@
 /* @farming-labs/theme — default theme CSS (neutral color preset) */
-@import "./presets/neutral.css";
+@import "./bundles/shared-framework.css";
+
+#nd-docs-layout[data-fd-framework] {
+  --fd-framework-page-justify: stretch;
+  --fd-framework-page-columns-with-toc: minmax(0, calc(100% - var(--fd-toc-width, 268px)))
+    var(--fd-toc-width, 268px);
+  --fd-framework-article-padding: 56px 32px 24px;
+}
 
 /* ─── Page Actions (default theme) ───────────────────────────────── */