@farming-labs/svelte-theme 0.0.68 → 0.0.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.0.68",
+  "version": "0.0.72",
   "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -32,6 +32,12 @@
       ],
       "greentree": [
         "./src/themes/greentree.d.ts"
+      ],
+      "concrete": [
+        "./src/themes/concrete.d.ts"
+      ],
+      "hardline": [
+        "./src/themes/hardline.d.ts"
       ]
     }
   },
@@ -63,6 +69,16 @@
       "import": "./src/themes/colorful.js",
       "default": "./src/themes/colorful.js"
     },
+    "./hardline": {
+      "types": "./src/themes/hardline.d.ts",
+      "import": "./src/themes/hardline.js",
+      "default": "./src/themes/hardline.js"
+    },
+    "./concrete": {
+      "types": "./src/themes/concrete.d.ts",
+      "import": "./src/themes/concrete.js",
+      "default": "./src/themes/concrete.js"
+    },
     "./css": "./styles/docs.css",
     "./fumadocs/css": "./styles/docs.css",
     "./styles/pixel-border.css": "./styles/pixel-border.css",
@@ -77,13 +93,17 @@
       "default": "./src/themes/greentree.js"
     },
     "./styles/greentree.css": "./styles/greentree.css",
-    "./greentree/css": "./styles/greentree-bundle.css"
+    "./greentree/css": "./styles/greentree-bundle.css",
+    "./styles/hardline.css": "./styles/hardline.css",
+    "./hardline/css": "./styles/hardline-bundle.css",
+    "./styles/concrete.css": "./styles/concrete.css",
+    "./concrete/css": "./styles/concrete-bundle.css"
   },
   "dependencies": {
     "gray-matter": "^4.0.3",
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.68",
-    "@farming-labs/svelte": "0.0.68"
+    "@farming-labs/docs": "0.0.72",
+    "@farming-labs/svelte": "0.0.72"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/index.d.ts

@@ -21,3 +21,9 @@ export declare const PixelBorderUIDefaults: Record<string, any>;
 
 export declare const darksharp: (overrides?: Partial<DocsTheme>) => DocsTheme;
 export declare const DarksharpUIDefaults: Record<string, any>;
+
+export declare const concrete: (overrides?: { ui?: Record<string, unknown> }) => DocsTheme;
+export declare const ConcreteUIDefaults: Record<string, unknown>;
+
+export declare const hardline: (overrides?: { ui?: Record<string, unknown> }) => DocsTheme;
+export declare const HardlineUIDefaults: Record<string, unknown>;

package/src/index.js

@@ -21,3 +21,5 @@ export { default as Callout } from "./components/Callout.svelte";
 export { fumadocs, DefaultUIDefaults } from "./themes/default.js";
 export { pixelBorder, PixelBorderUIDefaults } from "./themes/pixel-border.js";
 export { darksharp, DarksharpUIDefaults } from "./themes/darksharp.js";
+export { concrete, ConcreteUIDefaults } from "./themes/concrete.js";
+export { hardline, HardlineUIDefaults } from "./themes/hardline.js";

package/src/themes/concrete.d.ts

@@ -0,0 +1,4 @@
+export declare const concrete: (overrides?: {
+  ui?: Record<string, unknown>;
+}) => import("@farming-labs/docs").DocsTheme;
+export declare const ConcreteUIDefaults: Record<string, unknown>;

package/src/themes/concrete.js

@@ -0,0 +1,47 @@
+import { createTheme } from "@farming-labs/docs";
+
+const ConcreteUIDefaults = {
+  colors: {
+    primary: "#ff5b31",
+    background: "#f6ead9",
+    muted: "#5a4c42",
+    border: "#141210",
+  },
+  typography: {
+    font: {
+      style: {
+        sans: "'Archivo', 'IBM Plex Sans', 'Space Grotesk', system-ui, sans-serif",
+        mono: "'Space Mono', 'IBM Plex Mono', ui-monospace, monospace",
+      },
+      h1: { size: "2.85rem", weight: 900, lineHeight: "0.98", letterSpacing: "-0.05em" },
+      h2: { size: "2.05rem", weight: 850, lineHeight: "1.04", letterSpacing: "-0.035em" },
+      h3: { size: "1.52rem", weight: 800, lineHeight: "1.14", letterSpacing: "-0.02em" },
+      h4: { size: "1.16rem", weight: 750, lineHeight: "1.28", letterSpacing: "-0.01em" },
+      body: { size: "1.02rem", weight: 550, lineHeight: "1.68" },
+      small: { size: "0.83rem", weight: 600, lineHeight: "1.42", letterSpacing: "0.02em" },
+    },
+  },
+  radius: "0px",
+  layout: {
+    contentWidth: 896,
+    sidebarWidth: 316,
+    toc: { enabled: true, depth: 3, style: "directional" },
+    header: { height: 68, sticky: true },
+  },
+  sidebar: {
+    style: "bordered",
+  },
+  components: {
+    Callout: { variant: "outline", icon: true },
+    CodeBlock: { showCopyButton: true },
+    HoverLink: { linkLabel: "View doc", showIndicator: false },
+    Tabs: { style: "default" },
+  },
+};
+
+export const concrete = createTheme({
+  name: "concrete",
+  ui: ConcreteUIDefaults,
+});
+
+export { ConcreteUIDefaults };

package/src/themes/hardline.d.ts

@@ -0,0 +1,4 @@
+export declare const hardline: (overrides?: {
+  ui?: Record<string, unknown>;
+}) => import("@farming-labs/docs").DocsTheme;
+export declare const HardlineUIDefaults: Record<string, unknown>;

package/src/themes/hardline.js

@@ -0,0 +1,47 @@
+import { createTheme } from "@farming-labs/docs";
+
+const HardlineUIDefaults = {
+  colors: {
+    primary: "#ffd335",
+    background: "#f2efe8",
+    muted: "#4b4944",
+    border: "#121212",
+  },
+  typography: {
+    font: {
+      style: {
+        sans: "'IBM Plex Sans', 'Space Grotesk', system-ui, sans-serif",
+        mono: "'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace",
+      },
+      h1: { size: "2.6rem", weight: 800, lineHeight: "1.05", letterSpacing: "-0.03em" },
+      h2: { size: "1.95rem", weight: 800, lineHeight: "1.15", letterSpacing: "-0.02em" },
+      h3: { size: "1.45rem", weight: 700, lineHeight: "1.2", letterSpacing: "-0.015em" },
+      h4: { size: "1.15rem", weight: 700, lineHeight: "1.3" },
+      body: { size: "1rem", weight: 500, lineHeight: "1.65" },
+      small: { size: "0.875rem", weight: 500, lineHeight: "1.45" },
+    },
+  },
+  radius: "0px",
+  layout: {
+    contentWidth: 860,
+    sidebarWidth: 300,
+    toc: { enabled: true, depth: 3, style: "default" },
+    header: { height: 64, sticky: true },
+  },
+  sidebar: {
+    style: "bordered",
+  },
+  components: {
+    Callout: { variant: "outline", icon: true },
+    CodeBlock: { showCopyButton: true },
+    HoverLink: { linkLabel: "Open page", showIndicator: true },
+    Tabs: { style: "underline" },
+  },
+};
+
+export const hardline = createTheme({
+  name: "hardline",
+  ui: HardlineUIDefaults,
+});
+
+export { HardlineUIDefaults };

package/styles/concrete-bundle.css

@@ -0,0 +1,2 @@
+@import "./docs.css";
+@import "./concrete.css";

package/styles/concrete.css

@@ -0,0 +1,345 @@
+@import "./hardline.css";
+
+:root {
+  --color-fd-primary: #ff5b31;
+  --color-fd-primary-foreground: #140f0c;
+  --color-fd-ring: #141210;
+  --color-fd-background: #f6ead9;
+  --color-fd-foreground: #15120f;
+  --color-fd-card: #fbf4ea;
+  --color-fd-card-foreground: #15120f;
+  --color-fd-popover: #fbf4ea;
+  --color-fd-popover-foreground: #15120f;
+  --color-fd-secondary: #eadcc9;
+  --color-fd-secondary-foreground: #15120f;
+  --color-fd-muted: #e2d0b9;
+  --color-fd-muted-foreground: #5b4e42;
+  --color-fd-accent: #245dff;
+  --color-fd-accent-foreground: #f8f5ef;
+  --color-fd-border: #141210;
+  --fd-nav-height: 68px;
+}
+
+.dark {
+  --color-fd-primary: #ff744d;
+  --color-fd-primary-foreground: #180f0b;
+  --color-fd-ring: #ff744d;
+  --color-fd-background: #12100f;
+  --color-fd-foreground: #f6eee2;
+  --color-fd-card: #1a1614;
+  --color-fd-card-foreground: #f6eee2;
+  --color-fd-popover: #1a1614;
+  --color-fd-popover-foreground: #f6eee2;
+  --color-fd-secondary: #211b18;
+  --color-fd-secondary-foreground: #f6eee2;
+  --color-fd-muted: #2d2520;
+  --color-fd-muted-foreground: #c8b6a5;
+  --color-fd-accent: #7ba2ff;
+  --color-fd-accent-foreground: #101216;
+  --color-fd-border: rgba(246, 238, 226, 0.88);
+}
+
+#nd-docs-layout > header,
+[role="banner"] {
+  background: linear-gradient(180deg, color-mix(in srgb, var(--color-fd-primary) 10%, var(--color-fd-background)), var(--color-fd-background));
+}
+
+aside a[data-active] {
+  text-transform: uppercase;
+  letter-spacing: 0.045em;
+  font-size: 0.79rem;
+}
+
+aside a[data-active="true"],
+.fd-page-action-btn:hover,
+.fd-page-action-btn[data-selected="true"],
+.fd-page-action-btn[data-copied="true"],
+.fd-feedback-choice:hover,
+.fd-feedback-choice[data-selected="true"],
+.fd-ai-tab[data-active="true"] {
+  box-shadow: 5px 5px 0 var(--color-fd-border);
+  transform: translate(-2px, -2px);
+}
+
+.dark aside a[data-active="true"],
+.dark .fd-page-action-btn:hover,
+.dark .fd-page-action-btn[data-selected="true"],
+.dark .fd-page-action-btn[data-copied="true"],
+.dark .fd-feedback-choice:hover,
+.dark .fd-feedback-choice[data-selected="true"],
+.dark .fd-ai-tab[data-active="true"] {
+  box-shadow: 5px 5px 0 color-mix(in srgb, var(--color-fd-primary) 55%, transparent);
+}
+
+.omni-item-active {
+  background: color-mix(in srgb, var(--color-fd-primary) 20%, var(--color-fd-card)) !important;
+  color: var(--color-fd-foreground) !important;
+}
+
+.omni-item-active .omni-item-icon,
+.omni-item-active .omni-item-badge,
+.omni-item-active .omni-item-ext,
+.omni-item-active .omni-item-chevron {
+  color: var(--color-fd-foreground) !important;
+}
+
+.omni-item-active .omni-item-subtitle,
+.omni-item-active .omni-item-shortcuts {
+  color: color-mix(in srgb, var(--color-fd-foreground) 78%, var(--color-fd-muted-foreground)) !important;
+  opacity: 1;
+}
+
+.dark .omni-item-active {
+  background: color-mix(in srgb, var(--color-fd-primary) 26%, var(--color-fd-card)) !important;
+}
+
+.fd-card,
+[data-card],
+[class*="fd-callout"],
+.fd-page-action-menu,
+.fd-page-action-btn,
+.fd-docs-content pre,
+.fd-docs-content .shiki,
+.fd-docs-content [data-codeblock],
+.fd-page-nav,
+.fd-page-nav-card,
+[class*="page-nav"] a,
+.fd-hover-link-card {
+  box-shadow: 6px 6px 0 var(--color-fd-border);
+}
+
+.dark .fd-card,
+.dark [data-card],
+.dark [class*="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-page-nav,
+.dark .fd-page-nav-card,
+.dark [class*="page-nav"] a,
+.dark .fd-hover-link-card {
+  box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
+}
+
+.fd-page-body .fd-table-wrapper,
+.fd-docs-content table {
+  border: 3px solid var(--color-fd-border);
+  box-shadow: 6px 6px 0 var(--color-fd-border);
+  background: var(--color-fd-card);
+}
+
+.dark .fd-page-body .fd-table-wrapper,
+.dark .fd-docs-content table {
+  box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
+}
+
+.fd-docs-content th,
+.fd-page-body th {
+  background: var(--color-fd-foreground);
+  color: var(--color-fd-background);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  font-size: 0.74rem;
+}
+
+.fd-docs-content td,
+.fd-page-body td {
+  font-weight: 550;
+}
+
+.fd-docs-content 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 .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,
+.fd-page-body tbody tr:hover td {
+  background: color-mix(in srgb, var(--color-fd-primary) 16%, var(--color-fd-card));
+}
+
+.fd-docs-content pre,
+.fd-docs-content .shiki,
+.fd-docs-content [data-codeblock],
+.fd-docs-content .fd-codeblock,
+.fd-ai-code-block {
+  border-width: 3px !important;
+  box-shadow: 6px 6px 0 var(--color-fd-border);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-fd-primary) 7%, var(--color-fd-card)) 0, var(--color-fd-card) 56px) !important;
+}
+
+.dark .fd-docs-content pre,
+.dark .fd-docs-content .shiki,
+.dark .fd-docs-content [data-codeblock],
+.dark .fd-docs-content .fd-codeblock,
+.dark .fd-ai-code-block {
+  box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-fd-primary) 10%, var(--color-fd-card)) 0, var(--color-fd-card) 56px) !important;
+}
+
+.fd-codeblock-title {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.72rem;
+  font-weight: 700;
+  padding-block: 0.8rem;
+  padding-inline: 1rem;
+  border-bottom: 3px solid var(--color-fd-border);
+  background: color-mix(in srgb, var(--color-fd-primary) 12%, var(--color-fd-card));
+}
+
+.fd-copy-btn,
+.fd-ai-code-copy {
+  border: 2px solid var(--color-fd-border) !important;
+  border-radius: 0 !important;
+  background: var(--color-fd-background) !important;
+  color: var(--color-fd-foreground) !important;
+  box-shadow: 3px 3px 0 var(--color-fd-border);
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  font-size: 0.7rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.fd-copy-btn:hover,
+.fd-ai-code-copy:hover {
+  background: var(--color-fd-primary) !important;
+  color: var(--color-fd-primary-foreground) !important;
+  transform: translate(-1px, -1px);
+}
+
+.fd-tabs {
+  border: 3px solid var(--color-fd-border);
+  box-shadow: 6px 6px 0 var(--color-fd-border);
+  background: var(--color-fd-card);
+}
+
+.dark .fd-tabs {
+  box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-fd-primary) 42%, transparent);
+}
+
+.fd-tabs-list {
+  border-bottom: 3px solid var(--color-fd-border);
+  background: var(--color-fd-foreground);
+}
+
+.fd-tab-trigger {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.72rem;
+  color: color-mix(in srgb, var(--color-fd-background) 82%, transparent);
+  border-bottom-width: 0;
+}
+
+.fd-tab-trigger:hover {
+  color: var(--color-fd-background);
+  background: color-mix(in srgb, var(--color-fd-primary) 18%, transparent);
+}
+
+.fd-tab-trigger.fd-tab-active {
+  color: var(--color-fd-primary-foreground);
+  background: var(--color-fd-primary);
+  box-shadow: inset -3px 0 0 var(--color-fd-border);
+}
+
+.fd-callout,
+[class*="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"] {
+  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%);
+}
+
+.fd-callout-indicator {
+  width: 10px;
+}
+
+.fd-callout-title {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.72rem;
+}
+
+.fd-page-nav,
+.fd-page-nav-card,
+[class*="page-nav"] a,
+.fd-hover-link-card,
+.fd-page-action-menu,
+.fd-ai-dialog,
+.fd-ai-input-wrap,
+.fd-ai-model-dropdown-menu,
+.fd-ai-fm-topbar,
+.fd-ai-fm-input-container,
+.fd-feedback {
+  border-width: 3px !important;
+}
+
+.fd-page-nav-card:hover,
+[class*="page-nav"] a:hover {
+  transform: translate(-2px, -2px);
+}
+
+.fd-hover-link-card {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-fd-primary) 10%, var(--color-fd-card)) 0, var(--color-fd-card) 52px);
+}
+
+.fd-hover-link-title,
+.fd-hover-link-description + a {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.fd-toc-link,
+.fd-toc-clerk .fd-toc-link {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.7rem;
+  border-left: 2px solid transparent;
+  padding-left: 0.75rem;
+}
+
+.fd-toc-link:hover,
+.fd-toc-clerk .fd-toc-link:hover {
+  border-left-color: var(--color-fd-border);
+  background: color-mix(in srgb, var(--color-fd-primary) 12%, transparent);
+}
+
+.fd-toc-link-active,
+.fd-toc-clerk .fd-toc-link[data-active="true"] {
+  border-left-color: var(--color-fd-primary);
+  color: var(--color-fd-foreground);
+  background: color-mix(in srgb, var(--color-fd-primary) 16%, transparent);
+}
+
+.fd-ai-tab,
+.fd-feedback-choice,
+.fd-feedback-submit,
+.fd-ai-send-btn,
+.fd-ai-clear-btn,
+.fd-ai-model-dropdown-btn,
+.fd-ai-fm-send-btn,
+.fd-ai-fm-trigger-btn {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  box-shadow: 3px 3px 0 var(--color-fd-border);
+}

package/styles/hardline-bundle.css

@@ -0,0 +1,2 @@
+@import "./docs.css";
+@import "./hardline.css";

package/styles/hardline.css

@@ -0,0 +1,556 @@
+/* @farming-labs/theme - hardline theme CSS */
+
+:root {
+  --color-fd-primary: #ffd335;
+  --color-fd-primary-foreground: #121212;
+  --color-fd-ring: #121212;
+
+  --color-fd-background: #f2efe8;
+  --color-fd-foreground: #111111;
+  --color-fd-card: #f7f4ed;
+  --color-fd-card-foreground: #111111;
+  --color-fd-popover: #f7f4ed;
+  --color-fd-popover-foreground: #111111;
+  --color-fd-secondary: #ece7de;
+  --color-fd-secondary-foreground: #111111;
+  --color-fd-muted: #e5dfd3;
+  --color-fd-muted-foreground: #47423a;
+  --color-fd-accent: #ffe16e;
+  --color-fd-accent-foreground: #111111;
+  --color-fd-border: #111111;
+
+  --radius: 0px;
+  --fd-nav-height: 64px;
+}
+
+.dark {
+  --color-fd-primary: #ffcf3a;
+  --color-fd-primary-foreground: #101010;
+  --color-fd-ring: #ffcf3a;
+
+  --color-fd-background: #0f0f10;
+  --color-fd-foreground: #f4f1e8;
+  --color-fd-card: #171718;
+  --color-fd-card-foreground: #f4f1e8;
+  --color-fd-popover: #171718;
+  --color-fd-popover-foreground: #f4f1e8;
+  --color-fd-secondary: #1e1e20;
+  --color-fd-secondary-foreground: #f4f1e8;
+  --color-fd-muted: #242427;
+  --color-fd-muted-foreground: #b8b09f;
+  --color-fd-accent: #2d2612;
+  --color-fd-accent-foreground: #ffcf3a;
+  --color-fd-border: rgba(213, 204, 185, 0.82);
+}
+
+* {
+  scrollbar-width: auto;
+}
+
+::selection {
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground);
+}
+
+/* Hard-edge layout baseline */
+#nd-docs-layout [class*="rounded-"],
+#nd-docs-layout [style*="border-radius"],
+#nd-docs-layout code:not(pre code) {
+  border-radius: 0 !important;
+}
+
+#nd-docs-layout [class*="shadow-"] {
+  box-shadow: none !important;
+}
+
+/* Header and sidebar structure */
+#nd-docs-layout > header,
+[role="banner"] {
+  border-bottom: 2px solid var(--color-fd-border);
+  background: var(--color-fd-background);
+}
+
+aside#nd-sidebar,
+#nd-docs-layout aside {
+  background: var(--color-fd-background);
+  border-right: 2px solid var(--color-fd-border);
+}
+
+/* Sidebar links and categories */
+aside a[data-active] {
+  font-weight: 600;
+  font-size: 0.92rem;
+  letter-spacing: 0.01em;
+  padding: 0.5rem 0.625rem;
+  border: 1px solid transparent;
+  color: var(--color-fd-foreground);
+}
+
+aside a[data-active]:hover {
+  border-color: var(--color-fd-border);
+  background: color-mix(in srgb, var(--color-fd-primary) 24%, transparent);
+}
+
+aside a[data-active="true"] {
+  font-weight: 800;
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground);
+  border-color: var(--color-fd-border);
+}
+
+aside a[data-active="true"]::before {
+  display: none !important;
+}
+
+aside button.text-fd-muted-foreground {
+  font-size: 0.83rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-fd-muted-foreground);
+}
+
+/* Search/action inputs in sidebar */
+aside button[class*="bg-fd-secondary"] {
+  border: 2px solid var(--color-fd-border);
+  background: var(--color-fd-card);
+  font-weight: 600;
+}
+
+.dark aside a[data-active]:hover {
+  background: color-mix(in srgb, var(--color-fd-primary) 16%, transparent);
+}
+
+.dark aside button[class*="bg-fd-secondary"] {
+  background: #151516;
+}
+
+/* Search UI (sidebar + command palette) */
+.fd-sidebar-search-ai-row {
+  display: flex;
+  gap: 8px;
+  align-items: stretch;
+  width: 100%;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-search-btn,
+.fd-sidebar-search-btn {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 2px solid var(--color-fd-border) !important;
+  border-radius: 0 !important;
+  background: var(--color-fd-card) !important;
+  color: var(--color-fd-foreground) !important;
+  font-weight: 600;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover,
+.fd-sidebar-search-btn:hover {
+  background: color-mix(in srgb, var(--color-fd-primary) 18%, var(--color-fd-card)) !important;
+}
+
+.fd-sidebar-search-kbd {
+  margin-left: auto;
+  display: flex;
+  gap: 3px;
+}
+
+.fd-sidebar-search-kbd kbd {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0 !important;
+  background: var(--color-fd-secondary);
+  color: var(--color-fd-muted-foreground);
+  padding: 1px 4px;
+  font-size: 0.68rem;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-ai-btn,
+.fd-sidebar-ai-btn {
+  width: 38px;
+  min-width: 38px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--color-fd-border) !important;
+  border-radius: 0 !important;
+  background: var(--color-fd-card) !important;
+  color: var(--color-fd-foreground) !important;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover,
+.fd-sidebar-ai-btn:hover {
+  background: var(--color-fd-primary) !important;
+  color: var(--color-fd-primary-foreground) !important;
+}
+
+.omni-content {
+  border-radius: 0 !important;
+  border: 2px solid var(--color-fd-border) !important;
+  background: var(--color-fd-popover);
+  box-shadow: 6px 6px 0 var(--color-fd-border);
+}
+
+.omni-header {
+  border-bottom: 2px solid var(--color-fd-border) !important;
+}
+
+.omni-search-row {
+  gap: 0.625rem;
+  padding: 0.625rem 0.75rem;
+}
+
+.omni-search-input {
+  font-weight: 600;
+}
+
+.omni-search-input:focus {
+  caret-color: var(--color-fd-primary);
+}
+
+.omni-kbd,
+.omni-kbd-sm,
+.omni-close-btn {
+  border-radius: 0 !important;
+}
+
+.omni-kbd,
+.omni-kbd-sm {
+  border: 1px solid var(--color-fd-border);
+  background: var(--color-fd-secondary);
+}
+
+.omni-close-btn:hover {
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground);
+}
+
+.omni-item {
+  border-radius: 0 !important;
+  border: 1px solid transparent;
+  font-weight: 600;
+}
+
+.omni-item:hover,
+.omni-item-active {
+  border-color: var(--color-fd-border);
+  background: color-mix(in srgb, var(--color-fd-primary) 16%, transparent);
+}
+
+.omni-highlight {
+  border-radius: 0 !important;
+  background: color-mix(in srgb, var(--color-fd-primary) 36%, transparent);
+}
+
+/* Top-level content width and spacing */
+@media (min-width: 1024px) {
+  #nd-docs-layout article#nd-page {
+    max-width: none;
+  }
+
+  #nd-docs-layout article#nd-page > .prose {
+    max-width: none;
+  }
+}
+
+/* Typography */
+.fd-docs-content h1,
+.fd-docs-content h2,
+.fd-docs-content h3,
+.fd-docs-content h4 {
+  text-transform: uppercase;
+  letter-spacing: 0.01em;
+}
+
+.fd-docs-content h1 {
+  font-weight: 900;
+}
+
+.fd-docs-content p {
+  font-weight: 500;
+}
+
+.fd-docs-content a:not(.fd-page-nav-card):not([class]) {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--color-fd-primary);
+}
+
+/* Cards, callouts, tabs, and generic surfaces */
+.fd-card,
+[data-card],
+[class*="fd-callout"],
+.fd-page-action-menu,
+.fd-page-action-btn {
+  border: 2px solid var(--color-fd-border) !important;
+  background: var(--color-fd-card);
+  box-shadow: 4px 4px 0 var(--color-fd-border);
+}
+
+.dark .fd-card,
+.dark [data-card],
+.dark [class*="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);
+}
+
+/* Page actions: hardline hard edges */
+.fd-page-action-btn,
+.fd-page-action-menu,
+.fd-page-action-menu-item,
+.fd-page-action-dropdown {
+  border-radius: 0 !important;
+}
+
+.fd-page-action-btn {
+  border: 2px solid var(--color-fd-border) !important;
+  background: var(--color-fd-card) !important;
+  color: var(--color-fd-foreground) !important;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.fd-page-action-btn:hover,
+.fd-page-action-btn[data-selected="true"],
+.fd-page-action-btn[data-copied="true"] {
+  background: var(--color-fd-primary) !important;
+  color: var(--color-fd-primary-foreground) !important;
+  border-color: var(--color-fd-border) !important;
+}
+
+.fd-page-action-btn svg,
+.fd-page-action-btn[data-selected="true"] svg,
+.fd-page-action-btn[data-copied="true"] svg {
+  color: currentColor;
+}
+
+.fd-page-action-menu {
+  border: 2px solid var(--color-fd-border);
+  padding: 0.35rem;
+}
+
+.fd-page-action-menu-item {
+  border: 1px solid transparent;
+  font-weight: 600;
+}
+
+.fd-page-action-menu-item:hover {
+  border-color: var(--color-fd-border);
+  background: color-mix(in srgb, var(--color-fd-primary) 20%, transparent);
+}
+
+.fd-docs-content :not(pre) > code {
+  border: 2px solid var(--color-fd-border);
+  background: var(--color-fd-secondary);
+  padding: 1px 6px;
+  font-weight: 700;
+}
+
+.fd-docs-content pre,
+.fd-docs-content .shiki,
+.fd-docs-content [data-codeblock] {
+  border: 2px solid var(--color-fd-border) !important;
+  background: var(--color-fd-card) !important;
+}
+
+.dark .fd-docs-content pre,
+.dark .fd-docs-content .shiki,
+.dark .fd-docs-content [data-codeblock] {
+  background: #121214 !important;
+}
+
+.fd-docs-content table {
+  border-collapse: collapse;
+  border: 2px solid var(--color-fd-border);
+  width: 100%;
+  background: var(--color-fd-card);
+}
+
+.fd-docs-content th,
+.fd-docs-content td {
+  border: 2px solid var(--color-fd-border);
+  padding: 0.7rem 0.85rem;
+}
+
+.fd-docs-content th {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.78rem;
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground);
+}
+
+.fd-docs-content tbody tr:nth-child(even) td {
+  background: color-mix(in srgb, var(--color-fd-secondary) 85%, transparent);
+}
+
+.dark .fd-docs-content tbody tr:nth-child(even) td {
+  background: #1a1a1d;
+}
+
+/* Prev/next cards */
+.fd-page-nav,
+.fd-page-nav-card,
+[class*="page-nav"] a {
+  border: 2px solid var(--color-fd-border);
+  background: var(--color-fd-card);
+  box-shadow: 4px 4px 0 var(--color-fd-border);
+  border-radius: 0 !important;
+}
+
+.fd-page-nav-card:hover,
+[class*="page-nav"] a:hover {
+  background: color-mix(in srgb, var(--color-fd-primary) 18%, var(--color-fd-card));
+}
+
+.fd-page-nav-card [class*="text-"] {
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.dark .fd-page-nav,
+.dark .fd-page-nav-card,
+.dark [class*="page-nav"] a {
+  box-shadow: 4px 4px 0 color-mix(in srgb, var(--color-fd-primary) 35%, transparent);
+}
+
+/* Ask AI and feedback - hardline treatment */
+.fd-ai-dialog,
+.fd-ai-tab,
+.fd-ai-input-wrap,
+.fd-ai-send-btn,
+.fd-ai-close-btn,
+.fd-ai-clear-btn,
+.fd-ai-floating-btn,
+.fd-ai-suggestion,
+.fd-ai-result,
+.fd-ai-model-dropdown-btn,
+.fd-ai-model-dropdown-menu,
+.fd-ai-model-dropdown-item,
+.fd-ai-fm-input-container,
+.fd-ai-fm-send-btn,
+.fd-ai-fm-suggestion,
+.fd-ai-fm-trigger-btn,
+.fd-ai-fm-close-btn,
+.fd-ai-code-block,
+.fd-ai-code-copy,
+.fd-feedback-input,
+.fd-feedback-submit,
+.fd-feedback-choice {
+  border-radius: 0 !important;
+}
+
+.fd-ai-dialog,
+.fd-ai-input-wrap,
+.fd-ai-model-dropdown-menu,
+.fd-ai-fm-topbar,
+.fd-ai-fm-input-container,
+.fd-ai-code-block {
+  border: 2px solid var(--color-fd-border) !important;
+  background: var(--color-fd-card) !important;
+  box-shadow: 4px 4px 0 var(--color-fd-border);
+}
+
+.dark .fd-ai-dialog,
+.dark .fd-ai-input-wrap,
+.dark .fd-ai-model-dropdown-menu,
+.dark .fd-ai-fm-topbar,
+.dark .fd-ai-fm-input-container,
+.dark .fd-ai-code-block {
+  box-shadow: 4px 4px 0 color-mix(in srgb, var(--color-fd-primary) 35%, transparent);
+}
+
+.fd-ai-send-btn,
+.fd-ai-close-btn,
+.fd-ai-clear-btn,
+.fd-ai-floating-btn,
+.fd-ai-model-dropdown-btn,
+.fd-ai-fm-send-btn,
+.fd-ai-fm-trigger-btn,
+.fd-ai-fm-close-btn,
+.fd-feedback-submit,
+.fd-feedback-choice {
+  border: 2px solid var(--color-fd-border) !important;
+  background: var(--color-fd-secondary) !important;
+  color: var(--color-fd-foreground) !important;
+  font-weight: 700;
+}
+
+.fd-ai-send-btn:hover,
+.fd-ai-clear-btn:hover,
+.fd-ai-floating-btn:hover,
+.fd-ai-model-dropdown-btn:hover,
+.fd-ai-fm-send-btn:hover,
+.fd-ai-fm-trigger-btn:hover,
+.fd-feedback-submit:hover,
+.fd-feedback-choice:hover,
+.fd-feedback-choice[data-selected="true"] {
+  background: var(--color-fd-primary) !important;
+  color: var(--color-fd-primary-foreground) !important;
+}
+
+.fd-ai-tab {
+  border: 2px solid transparent;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.fd-ai-tab[data-active="true"] {
+  border-color: var(--color-fd-border);
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground);
+}
+
+.fd-ai-bubble-user,
+.fd-ai-bubble-ai {
+  border: 2px solid var(--color-fd-border);
+  border-radius: 0 !important;
+}
+
+.fd-ai-bubble-user {
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground);
+}
+
+.fd-ai-bubble-ai {
+  background: var(--color-fd-card);
+  color: var(--color-fd-card-foreground);
+}
+
+.fd-ai-bubble-ai table,
+.fd-ai-fm-msg-content table {
+  border-collapse: collapse;
+  border: 2px solid var(--color-fd-border);
+}
+
+.fd-ai-bubble-ai th,
+.fd-ai-bubble-ai td,
+.fd-ai-fm-msg-content th,
+.fd-ai-fm-msg-content td {
+  border: 2px solid var(--color-fd-border);
+}
+
+/* API reference panels */
+[data-api-reference] [class*="border"],
+[class*="fd-api"] [class*="border"] {
+  border-color: var(--color-fd-border) !important;
+}
+
+[class*="fd-api"] button,
+[class*="fd-api"] [role="tab"] {
+  border-radius: 0 !important;
+  border: 2px solid transparent;
+}
+
+[class*="fd-api"] [role="tab"][data-state="active"] {
+  border-color: var(--color-fd-border);
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground);
+}