From ffd288ee608baaa643ede5e94eaf95a22eda2b01 Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 3 Apr 2026 02:06:36 +0300
Subject: [PATCH 1/5] chore: team page sync

---
 website/app/page.tsx        | 12 ++++++++
 website/app/themes/page.tsx | 61 ++++++++++++++++++++++++++++++++++---
 2 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/website/app/page.tsx b/website/app/page.tsx
index 5dfc1f88..eec51d92 100644
--- a/website/app/page.tsx
+++ b/website/app/page.tsx
@@ -756,6 +756,18 @@ function ThemesSection() {
       import: '@import "@farming-labs/theme/greentree/css";',
       colors: ["#0D9373", "#26BD6C", "#171A18", "#DFE1E0"],
     },
+    {
+      name: "Hardline",
+      description: "Original hard-edge preset with square corners and strong borders",
+      import: '@import "@farming-labs/theme/hardline/css";',
+      colors: ["#ffd335", "#f2efe8", "#47423a", "#111111"],
+    },
+    {
+      name: "Concrete",
+      description: "Louder brutalist variant with offset shadows and poster-style contrast",
+      import: '@import "@farming-labs/theme/concrete/css";',
+      colors: ["#ff5b31", "#f6ead9", "#5b4e42", "#141210"],
+    },
   ];
 
   return (
diff --git a/website/app/themes/page.tsx b/website/app/themes/page.tsx
index 3a771d40..3a7786ba 100644
--- a/website/app/themes/page.tsx
+++ b/website/app/themes/page.tsx
@@ -93,6 +93,23 @@ export default defineDocs({
 });`,
     globalCss: `@import "tailwindcss";
 @import "@farming-labs/theme/shiny/css";`,
+  },
+  {
+    key: "darkbold",
+    name: "DarkBold",
+    description: "Pure monochrome with tight Geist typography and bold, minimal surfaces.",
+    cssImport: '@import "@farming-labs/theme/darkbold/css";',
+    colors: ["#000000", "#ffffff", "#888888", "#eaeaea"],
+    accent: "#000000",
+    configSnippet: `import { defineDocs } from "@farming-labs/docs";
+import { darkbold } from "@farming-labs/theme/darkbold";
+
+export default defineDocs({
+  entry: "docs",
+  theme: darkbold(),
+});`,
+    globalCss: `@import "tailwindcss";
+@import "@farming-labs/theme/darkbold/css";`,
   },
   {
     key: "greentree",
@@ -111,6 +128,41 @@ export default defineDocs({
     globalCss: `@import "tailwindcss";
 @import "@farming-labs/theme/greentree/css";`,
   },
+  {
+    key: "hardline",
+    name: "Hardline",
+    description: "Original hard-edge preset with square corners, bold borders, and sharp contrast.",
+    cssImport: '@import "@farming-labs/theme/hardline/css";',
+    colors: ["#ffd335", "#f2efe8", "#47423a", "#111111"],
+    accent: "#ffd335",
+    configSnippet: `import { defineDocs } from "@farming-labs/docs";
+import { hardline } from "@farming-labs/theme/hardline";
+
+export default defineDocs({
+  entry: "docs",
+  theme: hardline(),
+});`,
+    globalCss: `@import "tailwindcss";
+@import "@farming-labs/theme/hardline/css";`,
+  },
+  {
+    key: "concrete",
+    name: "Concrete",
+    description:
+      "Poster-style brutalist variant with offset shadows, square corners, and louder contrast.",
+    cssImport: '@import "@farming-labs/theme/concrete/css";',
+    colors: ["#ff5b31", "#f6ead9", "#5b4e42", "#141210"],
+    accent: "#ff5b31",
+    configSnippet: `import { defineDocs } from "@farming-labs/docs";
+import { concrete } from "@farming-labs/theme/concrete";
+
+export default defineDocs({
+  entry: "docs",
+  theme: concrete(),
+});`,
+    globalCss: `@import "tailwindcss";
+@import "@farming-labs/theme/concrete/css";`,
+  },
 ];
 
 type Theme = (typeof themes)[number];
@@ -201,7 +253,7 @@ function ThemeCard({
 
       <div className="flex items-center gap-2">
         <Link
-          href={`/docs?theme=${theme.key}`}
+          href={`/docs/themes/${theme.key}`}
           className="inline-flex items-center gap-2 text-[11px] font-mono px-4 py-2 rounded-none uppercase border transition-all hover:no-underline border-neutral-300 dark:border-transparent shadow-sm dark:shadow-none hover:opacity-90"
           style={{
             borderColor: isDark
@@ -217,7 +269,7 @@ function ThemeCard({
             background: isDark ? `${theme.accent}04` : `${theme.accent}12`,
           }}
         >
-          Try it live
+          Theme docs
           <ArrowRight className="size-3.5 -rotate-45 group-hover:rotate-0 transition-transform duration-300" />
         </Link>
 
@@ -284,9 +336,8 @@ export default function ThemesPage() {
       <main className="overflow-x-hidden mx-auto md:max-w-[90%] max-w-full px-6 py-12">
         <div className="mb-10 max-w-2xl">
           <p className="text-[13px] text-neutral-500 dark:text-white/40 leading-relaxed">
-            Each theme ships as a single CSS import and a factory function. Click{" "}
-            <strong className="text-neutral-800 dark:text-white/80">Try it live</strong> to open the
-            docs with that theme applied and the customizer drawer open, or click{" "}
+            Each theme ships as a single CSS import and a factory function. Open the dedicated docs
+            page for the theme, or click{" "}
             <strong className="text-neutral-800 dark:text-white/80">Show code</strong> to see the
             config files you need.
           </p>

From a6bc2419ccd57a7a662bba9502030191535600fe Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 3 Apr 2026 02:21:08 +0300
Subject: [PATCH 2/5] chore: clean up

---
 website/app/themes/page.tsx | 60 +++++++++++++++++++++++--------------
 1 file changed, 38 insertions(+), 22 deletions(-)

diff --git a/website/app/themes/page.tsx b/website/app/themes/page.tsx
index 3a7786ba..79b89377 100644
--- a/website/app/themes/page.tsx
+++ b/website/app/themes/page.tsx
@@ -15,6 +15,7 @@ const themes = [
     cssImport: '@import "@farming-labs/theme/default/css";',
     colors: ["#6366f1", "#0a0a0a", "#fafafa", "#262626"],
     accent: "#6366f1",
+    previewEnabled: true,
     configSnippet: `import { defineDocs } from "@farming-labs/docs";
 import { fumadocs } from "@farming-labs/theme";
 
@@ -33,6 +34,7 @@ export default defineDocs({
     cssImport: '@import "@farming-labs/theme/colorful/css";',
     colors: ["#eab308", "#0a0a0a", "#fafafa", "#262626"],
     accent: "#eab308",
+    previewEnabled: true,
     configSnippet: `import { defineDocs } from "@farming-labs/docs";
 import { colorful } from "@farming-labs/theme/colorful";
 
@@ -50,6 +52,7 @@ export default defineDocs({
     cssImport: '@import "@farming-labs/theme/darksharp/css";',
     colors: ["#fafaf9", "#000000", "#a8a29e", "#292524"],
     accent: "#fafaf9",
+    previewEnabled: true,
     configSnippet: `import { defineDocs } from "@farming-labs/docs";
 import { darksharp } from "@farming-labs/theme/darksharp";
 
@@ -67,6 +70,7 @@ export default defineDocs({
     cssImport: '@import "@farming-labs/theme/pixel-border/css";',
     colors: ["#fbfbfa", "#050505", "#8c8c8c", "#262626"],
     accent: "#fbfbfa",
+    previewEnabled: true,
     configSnippet: `import { defineDocs } from "@farming-labs/docs";
 import { pixelBorder } from "@farming-labs/theme/pixel-border";
 
@@ -84,6 +88,7 @@ export default defineDocs({
     cssImport: '@import "@farming-labs/theme/shiny/css";',
     colors: ["#f0f0f0", "#000000", "#a8a29e", "#292524"],
     accent: "#f0f0f0",
+    previewEnabled: true,
     configSnippet: `import { defineDocs } from "@farming-labs/docs";
 import { shiny } from "@farming-labs/theme/shiny";
 
@@ -101,6 +106,7 @@ export default defineDocs({
     cssImport: '@import "@farming-labs/theme/darkbold/css";',
     colors: ["#000000", "#ffffff", "#888888", "#eaeaea"],
     accent: "#000000",
+    previewEnabled: true,
     configSnippet: `import { defineDocs } from "@farming-labs/docs";
 import { darkbold } from "@farming-labs/theme/darkbold";
 
@@ -118,6 +124,7 @@ export default defineDocs({
     cssImport: '@import "@farming-labs/theme/greentree/css";',
     colors: ["#0D9373", "#26BD6C", "#171A18", "#DFE1E0"],
     accent: "#0D9373",
+    previewEnabled: false,
     configSnippet: `import { defineDocs } from "@farming-labs/docs";
 import { greentree } from "@farming-labs/theme/greentree";
 
@@ -135,6 +142,7 @@ export default defineDocs({
     cssImport: '@import "@farming-labs/theme/hardline/css";',
     colors: ["#ffd335", "#f2efe8", "#47423a", "#111111"],
     accent: "#ffd335",
+    previewEnabled: false,
     configSnippet: `import { defineDocs } from "@farming-labs/docs";
 import { hardline } from "@farming-labs/theme/hardline";
 
@@ -153,6 +161,7 @@ export default defineDocs({
     cssImport: '@import "@farming-labs/theme/concrete/css";',
     colors: ["#ff5b31", "#f6ead9", "#5b4e42", "#141210"],
     accent: "#ff5b31",
+    previewEnabled: false,
     configSnippet: `import { defineDocs } from "@farming-labs/docs";
 import { concrete } from "@farming-labs/theme/concrete";
 
@@ -252,26 +261,32 @@ function ThemeCard({
       </code>
 
       <div className="flex items-center gap-2">
-        <Link
-          href={`/docs/themes/${theme.key}`}
-          className="inline-flex items-center gap-2 text-[11px] font-mono px-4 py-2 rounded-none uppercase border transition-all hover:no-underline border-neutral-300 dark:border-transparent shadow-sm dark:shadow-none hover:opacity-90"
-          style={{
-            borderColor: isDark
-              ? `${theme.accent}20`
-              : ["shiny", "pixel-border", "darksharp"].includes(theme.key)
-                ? `#00000030`
-                : `${theme.accent}20`,
-            color: isDark
-              ? ["shiny", "pixel-border", "darksharp"].includes(theme.key)
-                ? theme.accent
-                : theme.accent
-              : "black",
-            background: isDark ? `${theme.accent}04` : `${theme.accent}12`,
-          }}
-        >
-          Theme docs
-          <ArrowRight className="size-3.5 -rotate-45 group-hover:rotate-0 transition-transform duration-300" />
-        </Link>
+        {theme.previewEnabled ? (
+          <Link
+            href={`/docs?theme=${theme.key}`}
+            className="inline-flex items-center gap-2 text-[11px] font-mono px-4 py-2 rounded-none uppercase border transition-all hover:no-underline border-neutral-300 dark:border-transparent shadow-sm dark:shadow-none hover:opacity-90"
+            style={{
+              borderColor: isDark
+                ? `${theme.accent}20`
+                : ["shiny", "pixel-border", "darksharp"].includes(theme.key)
+                  ? `#00000030`
+                  : `${theme.accent}20`,
+              color: isDark ? theme.accent : "black",
+              background: isDark ? `${theme.accent}04` : `${theme.accent}12`,
+            }}
+          >
+            Try it live
+            <ArrowRight className="size-3.5 -rotate-45 group-hover:rotate-0 transition-transform duration-300" />
+          </Link>
+        ) : (
+          <span
+            aria-disabled="true"
+            className="inline-flex items-center gap-2 text-[11px] font-mono px-4 py-2 rounded-none uppercase border border-neutral-200 dark:border-white/8 text-neutral-400 dark:text-white/20 bg-neutral-100/70 dark:bg-white/[2%] cursor-not-allowed select-none"
+          >
+            Try it live
+            <ArrowRight className="size-3.5 -rotate-45 opacity-40" />
+          </span>
+        )}
 
         <button
           onClick={onShowCode}
@@ -336,8 +351,9 @@ export default function ThemesPage() {
       <main className="overflow-x-hidden mx-auto md:max-w-[90%] max-w-full px-6 py-12">
         <div className="mb-10 max-w-2xl">
           <p className="text-[13px] text-neutral-500 dark:text-white/40 leading-relaxed">
-            Each theme ships as a single CSS import and a factory function. Open the dedicated docs
-            page for the theme, or click{" "}
+            Each theme ships as a single CSS import and a factory function. Click{" "}
+            <strong className="text-neutral-800 dark:text-white/80">Try it live</strong> on the
+            supported presets, or click{" "}
             <strong className="text-neutral-800 dark:text-white/80">Show code</strong> to see the
             config files you need.
           </p>

From ff08e6803e269fd18fe8a6053fa798a6380329af Mon Sep 17 00:00:00 2001
From: KinfeMichael Tariku <65047246+Kinfe123@users.noreply.github.com>
Date: Fri, 3 Apr 2026 02:22:13 +0300
Subject: [PATCH 3/5] Update website/app/themes/page.tsx

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
---
 website/app/themes/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/app/themes/page.tsx b/website/app/themes/page.tsx
index 79b89377..b3eebcd2 100644
--- a/website/app/themes/page.tsx
+++ b/website/app/themes/page.tsx
@@ -105,7 +105,7 @@ export default defineDocs({
     description: "Pure monochrome with tight Geist typography and bold, minimal surfaces.",
     cssImport: '@import "@farming-labs/theme/darkbold/css";',
     colors: ["#000000", "#ffffff", "#888888", "#eaeaea"],
-    accent: "#000000",
+    accent: "#ffffff",
     previewEnabled: true,
     configSnippet: `import { defineDocs } from "@farming-labs/docs";
 import { darkbold } from "@farming-labs/theme/darkbold";

From a92d8bbc4e075036a7d6851e6a06b51efeeb5ddb Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 3 Apr 2026 02:42:40 +0300
Subject: [PATCH 4/5] chore: update links

---
 website/app/themes/page.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/website/app/themes/page.tsx b/website/app/themes/page.tsx
index b3eebcd2..c7c43211 100644
--- a/website/app/themes/page.tsx
+++ b/website/app/themes/page.tsx
@@ -260,7 +260,7 @@ function ThemeCard({
         {theme.cssImport}
       </code>
 
-      <div className="flex items-center gap-2">
+      <div className="flex flex-wrap items-center gap-2">
         {theme.previewEnabled ? (
           <Link
             href={`/docs?theme=${theme.key}`}
@@ -294,6 +294,14 @@ function ThemeCard({
         >
           <span className="ml-0.5">Show code</span>
         </button>
+
+        <Link
+          href={`/docs/themes/${theme.key}`}
+          className="group inline-flex items-center gap-2 text-[11px] font-mono px-4 py-2 rounded-none uppercase border border-neutral-300 dark:border-white/6 text-neutral-500 dark:text-white/40 hover:border-neutral-400 hover:text-neutral-700 dark:hover:border-white/12 dark:hover:text-white/60 transition-all hover:no-underline"
+        >
+          Theme docs
+          <ArrowRight className="size-3.5 -rotate-45 group-hover:rotate-0 transition-transform duration-300" />
+        </Link>
       </div>
     </div>
   );

From eba1d80b07090598f20d0e6a7281b8dcc8830587 Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 3 Apr 2026 02:51:04 +0300
Subject: [PATCH 5/5] chore: update

---
 website/app/themes/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/app/themes/page.tsx b/website/app/themes/page.tsx
index c7c43211..235820f8 100644
--- a/website/app/themes/page.tsx
+++ b/website/app/themes/page.tsx
@@ -299,7 +299,7 @@ function ThemeCard({
           href={`/docs/themes/${theme.key}`}
           className="group inline-flex items-center gap-2 text-[11px] font-mono px-4 py-2 rounded-none uppercase border border-neutral-300 dark:border-white/6 text-neutral-500 dark:text-white/40 hover:border-neutral-400 hover:text-neutral-700 dark:hover:border-white/12 dark:hover:text-white/60 transition-all hover:no-underline"
         >
-          Theme docs
+          Docs
           <ArrowRight className="size-3.5 -rotate-45 group-hover:rotate-0 transition-transform duration-300" />
         </Link>
       </div>