@farming-labs/theme 0.2.44 → 0.2.46

package/styles/ledger.css

@@ -1,7 +1,18 @@
 /* @farming-labs/theme - ledger theme CSS
  * Stripe Docs-inspired product documentation UI without Stripe branding.
  */
-@import "./presets/neutral.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, 236px))))
+    var(--fd-toc-width, 236px) 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-primary: #5f6cf6;
@@ -312,7 +323,7 @@ aside#nd-sidebar-mobile a[data-active="true"]:hover,
 .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 {
   color: var(--color-fd-muted-foreground);
   line-height: 1.7;
@@ -334,7 +345,9 @@ aside#nd-sidebar-mobile a[data-active="true"]:hover,
 .fd-hover-link-card,
 .fd-page-nav,
 .fd-page-nav-card,
-[class*="fd-callout"],
+.fd-callout,
+[data-callout],
+[style*="--callout-color"],
 .fd-page-action-menu,
 .fd-ai-dialog,
 .fd-ai-fm-input-container,
@@ -423,6 +436,7 @@ aside#nd-sidebar-mobile a[data-active="true"]:hover,
 
 .fd-tabs-trigger[data-state="active"],
 .fd-tab-trigger[data-state="active"],
+.fd-tab-trigger.fd-tab-active,
 [role="tab"][aria-selected="true"],
 [role="tab"][data-active="true"] {
   background: var(--color-fd-card) !important;
@@ -524,7 +538,7 @@ figure.shiki:has(figcaption) > div:first-child > div:last-child {
 }
 
 .fd-table-wrapper,
-.fd-docs-content table,
+:is(.fd-docs-content, .prose) table,
 .prose table {
   border: 1px solid var(--fd-ledger-soft-border) !important;
   border-radius: 0.5rem !important;
@@ -540,7 +554,8 @@ figure.shiki:has(figcaption) > div:first-child > div:last-child {
 }
 
 .fd-callout,
-[class*="fd-callout"] {
+[data-callout],
+[style*="--callout-color"] {
   background: color-mix(in srgb, var(--color-fd-primary) 7%, var(--color-fd-card)) !important;
 }
 

package/styles/pixel-border.css

@@ -2,7 +2,14 @@
  * Inspired by better-auth.com — pixel-perfect borders, clean dark UI.
  * 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-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;
+}
 
 :root {
   --color-fd-background: oklch(1 0 0);
@@ -152,8 +159,8 @@ code:not(pre code) {
 
 /* ─── Docs grid: sidebar (sticky left, full height) | content | TOC ─────── */
 @media (min-width: 768px) {
-  #nd-docs-layout,
-  [style*="fd-sidebar-col"] {
+  #nd-docs-layout:not([data-fd-framework]),
+  #nd-docs-layout:not([data-fd-framework]) [style*="fd-sidebar-col"] {
     grid-template-columns: var(--fd-sidebar-col, 0px) 1fr min-content !important;
   }
   /* Sidebar stretches to end and sticks on scroll; no max-height so content isn't clipped */
@@ -167,7 +174,7 @@ code:not(pre code) {
 }
 
 @media (min-width: 1024px) {
-  #nd-docs-layout.grid {
+  #nd-docs-layout.grid:not([data-fd-framework]) {
     grid-template:
       "sidebar header toc"
       "sidebar toc-popover toc"
@@ -358,6 +365,10 @@ table {
   overflow: hidden;
 }
 
+.fd-table-wrapper {
+  border-radius: 0 !important;
+}
+
 th {
   background: var(--color-fd-muted);
   color: var(--color-fd-foreground);
@@ -376,7 +387,8 @@ tr:last-child td {
 /* ─── Code blocks: single border, rounded-none (light + dark) ───────── */
 
 /* Target the fumadocs CodeBlock figure (shiki class) */
-figure.shiki {
+figure.shiki,
+.fd-codeblock {
   border: 1px solid var(--color-fd-border) !important;
   border-radius: 0 !important;
   overflow: hidden;
@@ -384,27 +396,33 @@ figure.shiki {
 }
 
 /* Copy button inside code blocks */
-figure.shiki button {
+figure.shiki button,
+.fd-copy-btn {
   border-radius: 0 !important;
 }
 
 /* Code block title bar */
-figure.shiki > div:first-child {
+figure.shiki > div:first-child,
+.fd-codeblock-title {
   border-radius: 0 !important;
 }
 
 /* ─── Tabs (package manager / code tabs) — light + dark ────────────── */
 
-[role="tablist"] {
+[role="tablist"],
+.fd-tabs,
+.fd-tabs-list {
   border-radius: 0 !important;
 }
 
 [role="tablist"] button,
-[role="tab"] {
+[role="tab"],
+.fd-tab-trigger {
   border-radius: 0 !important;
 }
 
-[role="tabpanel"] {
+[role="tabpanel"],
+.fd-tab-panel {
   border-radius: 0 !important;
 }
 
@@ -425,7 +443,10 @@ div:has(> [role="tablist"]) {
 
 /* ─── Callouts: visible border (light + dark) ──────────────────────── */
 
-[class*="bg-fd-card"] {
+[class*="bg-fd-card"],
+.fd-callout,
+[data-callout],
+[style*="--callout-color"] {
   border-color: var(--color-fd-border);
 }
 

package/styles/shiny.css

@@ -1,7 +1,7 @@
 /* @farming-labs/theme — shiny theme CSS
  * Clerk docs-inspired clean, polished light/dark theme with purple accents.
  */
-@import "./presets/neutral.css";
+@import "./bundles/shared-framework.css";
 
 /* ─── Shiny color overrides ───────────────────────────────────────── */
 
@@ -381,7 +381,8 @@
 
 /* ─── Inline code (Clerk style — subtle, no heavy borders) ─────────── */
 
-.fd-docs-content :not(pre) > code {
+.fd-docs-content :not(pre) > code,
+.fd-page-body :not(pre) > code {
   padding: 2px 6px;
   border: 1px solid var(--color-fd-border);
   font-size: 0.8125rem;
@@ -393,7 +394,8 @@
 
 /* ─── Links in prose (purple underline like Clerk) ─────────────────── */
 
-.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-primary);
@@ -403,13 +405,19 @@
   transition: opacity 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 {
   opacity: 0.8;
 }
 
 /* ─── Tables (clean, rounded like Clerk) ───────────────────────────── */
 
-.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);
@@ -419,7 +427,7 @@
   width: 100%;
 }
 
-.fd-docs-content th {
+:is(.fd-docs-content, .prose, .fd-page-body) th {
   background: var(--color-fd-muted);
   font-weight: 600;
   font-size: 0.8125rem;
@@ -428,20 +436,21 @@
   color: var(--color-fd-muted-foreground);
 }
 
-.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 (purple left border like Clerk) ──────────────────── */
 
-.fd-docs-content blockquote {
+.fd-docs-content blockquote,
+.fd-page-body blockquote {
   border-left: 3px solid var(--color-fd-primary);
   padding-left: 1rem;
   color: var(--color-fd-muted-foreground);
@@ -451,33 +460,40 @@
 
 /* ─── Horizontal rule ──────────────────────────────────────────────── */
 
-.fd-docs-content hr {
+.fd-docs-content hr,
+.fd-page-body hr {
   border-color: var(--color-fd-border);
 }
 
 /* ─── Code blocks (Clerk-style dark, no radius on inner, rounded wrapper) */
 
-figure.shiki {
+figure.shiki,
+.fd-codeblock {
   border-radius: 0.625rem;
   overflow: hidden;
   border: 1px solid var(--color-fd-border);
 }
 
-:root figure.shiki {
+:root figure.shiki,
+:root .fd-codeblock {
   border-color: hsl(240, 6%, 88%);
 }
 
-.dark figure.shiki {
+.dark figure.shiki,
+.dark .fd-codeblock {
   border-color: hsl(240, 5%, 20%);
 }
 
 /* ─── Tabs (Clerk code tab style) ───────────────────────────────────── */
 
-[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.8125rem;
   font-weight: 450;
   padding: 0.5rem 0.875rem;
@@ -490,7 +506,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-primary);
   font-weight: 500;
@@ -498,7 +515,9 @@ figure.shiki {
 
 /* ─── Callout (clean, subtle) ───────────────────────────────────────── */
 
-[style*="--callout-color"] {
+[style*="--callout-color"],
+.fd-callout,
+[data-callout] {
   border-radius: 0.625rem;
   border-width: 1px;
 }
@@ -595,12 +614,15 @@ details > :not(summary) {
   opacity: 1;
 }
 
-#nd-toc a[data-active="true"] {
+#nd-toc a[data-active="true"],
+.fd-toc-link.fd-toc-link-active,
+.fd-toc-clerk .fd-toc-link[data-active="true"] {
   box-shadow: inset 2px 0 0 var(--color-fd-primary);
   color: var(--color-fd-primary);
 }
 
-#nd-toc a[data-active="false"] {
+#nd-toc a[data-active="false"],
+.fd-toc-link {
   box-shadow: none;
 }
 

package/styles/threadline.css

@@ -1,7 +1,7 @@
 /* @farming-labs/theme - threadline theme CSS
  * Compact chat-docs UI with neutral shadcn-style surfaces.
  */
-@import "./presets/neutral.css";
+@import "./bundles/shared-framework.css";
 
 :root {
   --radius: 0.625rem;
@@ -141,7 +141,7 @@ body:has(#nd-docs-layout) {
 }
 
 @media (min-width: 1280px) {
-  #nd-docs-layout {
+  #nd-docs-layout:not([data-fd-framework]) {
     max-width: var(--fd-threadline-frame-width) !important;
     margin-inline: auto !important;
     grid-template-columns:
@@ -370,7 +370,7 @@ aside#nd-sidebar-mobile a[data-active="true"]:hover,
 .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,
 .prose p,
 .prose li,
@@ -428,7 +428,7 @@ aside#nd-sidebar-mobile a[data-active="true"]:hover,
   background: var(--muted) !important;
 }
 
-#nd-page :is([style*="--callout-color"], .fd-callout, [data-callout]) {
+:is(#nd-page, #nd-docs-layout[data-fd-framework] .fd-page-body) :is([style*="--callout-color"], .fd-callout, [data-callout]) {
   border: 1px solid color-mix(in srgb, var(--border) 86%, transparent) !important;
   border-radius: 0.625rem !important;
   background: color-mix(in srgb, var(--muted) 42%, transparent) !important;
@@ -436,21 +436,21 @@ aside#nd-sidebar-mobile a[data-active="true"]:hover,
   box-shadow: none !important;
 }
 
-#nd-page :is([style*="--callout-color"], .fd-callout, [data-callout]) * {
+:is(#nd-page, #nd-docs-layout[data-fd-framework] .fd-page-body) :is([style*="--callout-color"], .fd-callout, [data-callout]) * {
   color: inherit;
 }
 
-#nd-page :is([style*="--callout-color"], .fd-callout, [data-callout]) a {
+:is(#nd-page, #nd-docs-layout[data-fd-framework] .fd-page-body) :is([style*="--callout-color"], .fd-callout, [data-callout]) a {
   color: var(--fd-assistant-link) !important;
   text-decoration-color: color-mix(in srgb, var(--fd-assistant-link) 35%, transparent);
 }
 
-#nd-page :is([style*="--callout-color"], .fd-callout, [data-callout]) > svg {
+:is(#nd-page, #nd-docs-layout[data-fd-framework] .fd-page-body) :is([style*="--callout-color"], .fd-callout, [data-callout]) > svg {
   color: var(--muted-foreground) !important;
   fill: color-mix(in srgb, var(--muted-foreground) 18%, transparent) !important;
 }
 
-#nd-page :is([style*="--callout-color"], .fd-callout, [data-callout]) > [role="none"] {
+:is(#nd-page, #nd-docs-layout[data-fd-framework] .fd-page-body) :is([style*="--callout-color"], .fd-callout, [data-callout]) > [role="none"] {
   background: color-mix(in srgb, var(--muted-foreground) 28%, transparent) !important;
 }
 
@@ -516,7 +516,7 @@ figure.shiki button[aria-label*="Copy"]:hover {
 }
 
 .fd-table-wrapper,
-.fd-docs-content table,
+:is(.fd-docs-content, .prose) table,
 .prose table {
   border: 1px solid color-mix(in srgb, var(--border) 86%, transparent) !important;
   border-radius: 0.75rem !important;
@@ -525,7 +525,7 @@ figure.shiki button[aria-label*="Copy"]:hover {
   overflow: hidden;
 }
 
-.fd-docs-content table,
+:is(.fd-docs-content, .prose) table,
 .prose table {
   width: 100% !important;
   border-collapse: separate !important;
@@ -538,13 +538,13 @@ figure.shiki button[aria-label*="Copy"]:hover {
   background: transparent !important;
 }
 
-.fd-docs-content thead,
+:is(.fd-docs-content, .prose) thead,
 .prose thead {
   background: color-mix(in srgb, var(--muted) 48%, transparent) !important;
 }
 
 .fd-table-wrapper th,
-.fd-docs-content th,
+:is(.fd-docs-content, .prose) th,
 .prose th {
   background: transparent !important;
   color: var(--muted-foreground) !important;
@@ -553,21 +553,21 @@ figure.shiki button[aria-label*="Copy"]:hover {
 
 .fd-table-wrapper th,
 .fd-table-wrapper td,
-.fd-docs-content th,
-.fd-docs-content td,
+:is(.fd-docs-content, .prose) th,
+:is(.fd-docs-content, .prose) td,
 .prose th,
 .prose td {
   border-color: color-mix(in srgb, var(--border) 86%, transparent) !important;
   padding: 0.75rem 1rem !important;
 }
 
-.fd-docs-content tbody tr:nth-child(even),
+:is(.fd-docs-content, .prose) tbody tr:nth-child(even),
 .prose tbody tr:nth-child(even) {
   background: color-mix(in srgb, var(--muted) 18%, transparent) !important;
 }
 
 .fd-table-wrapper td,
-.fd-docs-content td,
+:is(.fd-docs-content, .prose) td,
 .prose td {
   background: transparent !important;
 }
@@ -1223,6 +1223,7 @@ figure.shiki button[aria-label*="Copy"]:hover {
 
 .fd-tabs-trigger[data-state="active"],
 .fd-tab-trigger[data-state="active"],
+.fd-tab-trigger.fd-tab-active,
 [role="tab"][aria-selected="true"],
 [role="tab"][data-active="true"] {
   background: var(--background) !important;