@farming-labs/theme 0.0.2-beta.17 → 0.0.2-beta.18

package/dist/docs-command-search.mjs

@@ -336,7 +336,8 @@ function DocsCommandSearch() {
 			const button = e.target.closest("button");
 			if (!button) return;
 			const text = button.textContent || "";
-			if (text.includes("Search") && (text.includes("⌘") || text.includes("K"))) {
+			const ariaLabel = (button.getAttribute("aria-label") || "").toLowerCase();
+			if (text.includes("Search") && (text.includes("⌘") || text.includes("K")) || ariaLabel.includes("search") || text === "Open Search") {
 				e.preventDefault();
 				e.stopPropagation();
 				e.stopImmediatePropagation();

package/dist/shiny/index.d.mts

@@ -0,0 +1,79 @@
+import * as _farming_labs_docs0 from "@farming-labs/docs";
+
+//#region src/shiny/index.d.ts
+declare const ShinyUIDefaults: {
+  colors: {
+    primary: string;
+    background: string;
+    muted: string;
+    border: string;
+  };
+  typography: {
+    font: {
+      style: {
+        sans: string;
+        mono: string;
+      };
+      h1: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+        letterSpacing: string;
+      };
+      h2: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+        letterSpacing: string;
+      };
+      h3: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+      };
+      h4: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+      };
+      body: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+      };
+      small: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+      };
+    };
+  };
+  layout: {
+    contentWidth: number;
+    sidebarWidth: number;
+    toc: {
+      enabled: boolean;
+      depth: number;
+      style: "default";
+    };
+    header: {
+      height: number;
+      sticky: boolean;
+    };
+  };
+  components: {
+    Callout: {
+      variant: string;
+      icon: boolean;
+    };
+    CodeBlock: {
+      showCopyButton: boolean;
+    };
+    Tabs: {
+      style: string;
+    };
+  };
+};
+declare const shiny: (overrides?: Partial<_farming_labs_docs0.DocsTheme>) => _farming_labs_docs0.DocsTheme;
+//#endregion
+export { ShinyUIDefaults, shiny };

package/dist/shiny/index.mjs

@@ -0,0 +1,83 @@
+import { createTheme } from "@farming-labs/docs";
+
+//#region src/shiny/index.ts
+/**
+* Shiny theme preset — Clerk docs-inspired, clean, polished UI with
+* purple accents and a professional light/dark design.
+*
+* CSS: `@import "@farming-labs/theme/shiny/css";`
+*/
+const ShinyUIDefaults = {
+	colors: {
+		primary: "hsl(256, 100%, 64%)",
+		background: "#f7f7f8",
+		muted: "#73738c",
+		border: "#e5e5ea"
+	},
+	typography: { font: {
+		style: {
+			sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+			mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+		},
+		h1: {
+			size: "2rem",
+			weight: 600,
+			lineHeight: "1.2",
+			letterSpacing: "-0.02em"
+		},
+		h2: {
+			size: "1.5rem",
+			weight: 600,
+			lineHeight: "1.3",
+			letterSpacing: "-0.01em"
+		},
+		h3: {
+			size: "1.25rem",
+			weight: 600,
+			lineHeight: "1.4"
+		},
+		h4: {
+			size: "1.125rem",
+			weight: 600,
+			lineHeight: "1.4"
+		},
+		body: {
+			size: "0.9375rem",
+			weight: 400,
+			lineHeight: "1.7"
+		},
+		small: {
+			size: "0.8125rem",
+			weight: 400,
+			lineHeight: "1.5"
+		}
+	} },
+	layout: {
+		contentWidth: 768,
+		sidebarWidth: 280,
+		toc: {
+			enabled: true,
+			depth: 3,
+			style: "default"
+		},
+		header: {
+			height: 64,
+			sticky: true
+		}
+	},
+	components: {
+		Callout: {
+			variant: "soft",
+			icon: true
+		},
+		CodeBlock: { showCopyButton: true },
+		Tabs: { style: "default" }
+	}
+};
+const shiny = createTheme({
+	name: "shiny",
+	ui: ShinyUIDefaults
+});
+
+//#endregion
+export { ShinyUIDefaults, shiny };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/theme",
-  "version": "0.0.2-beta.17",
+  "version": "0.0.2-beta.18",
   "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
   "type": "module",
   "main": "./dist/index.mjs",
@@ -36,6 +36,11 @@
       "import": "./dist/colorful/index.mjs",
       "default": "./dist/colorful/index.mjs"
     },
+    "./shiny": {
+      "types": "./dist/shiny/index.d.mts",
+      "import": "./dist/shiny/index.mjs",
+      "default": "./dist/shiny/index.mjs"
+    },
     "./search": {
       "types": "./dist/search.d.mts",
       "import": "./dist/search.mjs",
@@ -52,6 +57,7 @@
     "./darksharp/css": "./styles/darksharp.css",
     "./pixel-border/css": "./styles/pixel-border.css",
     "./colorful/css": "./styles/colorful.css",
+    "./shiny/css": "./styles/shiny.css",
     "./presets/neutral": "./styles/presets/neutral.css",
     "./presets/black": "./styles/presets/black.css",
     "./presets/base": "./styles/presets/base.css"
@@ -80,7 +86,7 @@
     "next": ">=14.0.0",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "@farming-labs/docs": "0.0.2-beta.17"
+    "@farming-labs/docs": "0.0.2-beta.18"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/omni.css

@@ -57,6 +57,17 @@
   animation: omni-scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+@media (max-width: 639px) {
+  .omni-content {
+    top: 10%;
+    width: calc(100% - 24px);
+    max-height: 75vh;
+  }
+  .omni-kbd {
+    display: none;
+  }
+}
+
 /* Header */
 .omni-header {
   border-bottom: 1px solid var(--color-fd-border, #262626);

package/styles/shiny.css

@@ -0,0 +1,488 @@
+/* @farming-labs/theme — shiny theme CSS
+ * Clerk docs-inspired clean, polished light/dark theme with purple accents.
+ */
+@import "./presets/neutral.css";
+
+/* ─── Shiny color overrides ───────────────────────────────────────── */
+
+:root {
+  --color-fd-primary: hsl(256, 100%, 64%);
+  --color-fd-primary-foreground: hsl(0, 0%, 100%);
+  --color-fd-ring: hsl(256, 85%, 60%);
+
+  --color-fd-background: hsl(240, 6%, 97%);
+  --color-fd-foreground: hsl(240, 10%, 8%);
+  --color-fd-card: hsl(0, 0%, 100%);
+  --color-fd-card-foreground: hsl(240, 10%, 8%);
+  --color-fd-popover: hsl(0, 0%, 100%);
+  --color-fd-popover-foreground: hsl(240, 10%, 8%);
+  --color-fd-secondary: hsl(240, 5%, 96%);
+  --color-fd-secondary-foreground: hsl(240, 6%, 10%);
+  --color-fd-muted: hsl(240, 5%, 96%);
+  --color-fd-muted-foreground: hsl(240, 4%, 46%);
+  --color-fd-accent: hsl(240, 5%, 94%);
+  --color-fd-accent-foreground: hsl(240, 6%, 10%);
+  --color-fd-border: hsl(240, 6%, 90%);
+}
+
+.dark {
+  --color-fd-primary: hsl(256, 100%, 72%);
+  --color-fd-primary-foreground: hsl(0, 0%, 100%);
+  --color-fd-ring: hsl(256, 85%, 65%);
+
+  --color-fd-background: hsl(240, 10%, 7%);
+  --color-fd-foreground: hsl(0, 0%, 95%);
+  --color-fd-card: hsl(240, 8%, 10%);
+  --color-fd-card-foreground: hsl(0, 0%, 95%);
+  --color-fd-popover: hsl(240, 8%, 10%);
+  --color-fd-popover-foreground: hsl(0, 0%, 95%);
+  --color-fd-secondary: hsl(240, 6%, 14%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 90%);
+  --color-fd-muted: hsl(240, 5%, 16%);
+  --color-fd-muted-foreground: hsl(240, 4%, 58%);
+  --color-fd-accent: hsl(240, 6%, 16%);
+  --color-fd-accent-foreground: hsl(0, 0%, 90%);
+  --color-fd-border: hsl(240, 5%, 18%);
+}
+
+/* ─── Description under title ──────────────────────────────────────── */
+
+.fd-page-description {
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--color-fd-muted-foreground);
+}
+
+/* ─── Page Actions (shiny theme) ────────────────────────────────────── */
+
+.fd-page-action-btn {
+  border-radius: 0.5rem;
+  font-size: 0.8125rem;
+}
+
+.fd-page-action-menu {
+  border-radius: 0.75rem;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
+}
+
+.fd-page-action-menu-item {
+  border-radius: 0.375rem;
+}
+
+/* ─── AI Chat (shiny theme) ──────────────────────────────────────────── */
+
+.fd-ai-dialog {
+  border-radius: 16px;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.fd-ai-bubble-user {
+  border-radius: 18px 18px 4px 18px;
+}
+
+.fd-ai-bubble-ai {
+  border-radius: 18px 18px 18px 4px;
+}
+
+.fd-ai-input-wrap {
+  border-radius: 12px;
+}
+
+.fd-ai-send-btn {
+  border-radius: 10px;
+}
+
+.fd-ai-floating-btn {
+  border-radius: 6px;
+  background: hsl(240, 6%, 15%);
+  color: #fff;
+  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.07), 0 1px 3px rgba(0, 0, 0, 0.2);
+  border: none;
+}
+
+.fd-ai-floating-btn:hover {
+  background: hsl(240, 6%, 20%);
+  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.25);
+}
+
+:root .fd-ai-floating-btn {
+  background: hsl(240, 7%, 14%);
+  color: #fff;
+}
+
+:root .fd-ai-floating-btn:hover {
+  background: hsl(240, 7%, 20%);
+}
+
+.fd-ai-suggestion {
+  border-radius: 10px;
+}
+
+.fd-ai-result {
+  border-radius: 10px;
+}
+
+/* ─── Full-Modal ────────────────────────────────────────────────────── */
+
+.fd-ai-fm-input-container {
+  border-radius: 14px;
+}
+
+.fd-ai-fm-send-btn {
+  border-radius: 9999px;
+}
+
+.fd-ai-fm-suggestion {
+  border-radius: 9999px;
+}
+
+.fd-ai-fm-trigger-btn {
+  border-radius: 18px;
+}
+
+.fd-ai-fm-close-btn {
+  border-radius: 9999px;
+}
+
+/* ─── Code blocks (shiny) ────────────────────────────────────────────── */
+
+.fd-ai-code-block {
+  border-radius: 10px;
+}
+
+.fd-ai-code-copy {
+  border-radius: 6px;
+}
+
+/* ─── Sidebar shiny overrides ────────────────────────────────────────── */
+
+:root .fd-sidebar {
+  --color-fd-muted: hsl(240, 5%, 96%);
+  --color-fd-secondary: hsl(240, 5%, 94%);
+  --color-fd-muted-foreground: hsl(240, 4%, 46%);
+}
+
+.dark .fd-sidebar {
+  --color-fd-muted: hsl(240, 5%, 14%);
+  --color-fd-secondary: hsl(240, 6%, 16%);
+  --color-fd-muted-foreground: hsl(240, 4%, 56%);
+}
+
+/* Active sidebar item: subtle purple tint — scoped to sidebar only */
+:root aside [data-active="true"] > a,
+:root aside a[data-active="true"] {
+  background: hsl(256, 100%, 97%);
+  color: hsl(256, 100%, 50%);
+  font-weight: 500;
+}
+
+.dark aside [data-active="true"] > a,
+.dark aside a[data-active="true"] {
+  background: hsl(256, 40%, 16%);
+  color: hsl(256, 100%, 78%);
+  font-weight: 500;
+}
+
+/* ─── Cards (shiny style — clean, subtle shadow) ────────────────────── */
+
+.fd-card {
+  display: block;
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-fd-border);
+  background: var(--color-fd-card);
+  padding: 1.25rem;
+  font-size: 0.875rem;
+  color: var(--color-fd-card-foreground);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
+  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+}
+
+.fd-card:hover {
+  border-color: var(--color-fd-primary);
+  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 0.06);
+}
+
+.fd-card-icon {
+  margin-bottom: 0.625rem;
+  width: fit-content;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-fd-border);
+  padding: 0.5rem;
+  color: var(--color-fd-muted-foreground);
+  background: var(--color-fd-secondary);
+}
+
+.fd-card-title {
+  font-weight: 500;
+  font-size: 0.9375rem;
+}
+
+.fd-card-description {
+  color: var(--color-fd-muted-foreground);
+  margin-top: 0.25rem;
+  font-size: 0.8125rem;
+  line-height: 1.55;
+}
+
+/* ─── Cards grid ──────────────────────────────────────────────────── */
+
+.fd-cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.75rem;
+}
+
+@media (min-width: 640px) {
+  .fd-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* ─── Page nav cards (shiny style) ─────────────────────────────────── */
+
+.fd-page-nav-card {
+  border-radius: 0.75rem;
+}
+
+/* ─── Inline code (Clerk style — subtle, no heavy borders) ─────────── */
+
+.fd-docs-content :not(pre) > code {
+  padding: 2px 6px;
+  border: 1px solid var(--color-fd-border);
+  font-size: 0.8125rem;
+  border-radius: 6px;
+  background: var(--color-fd-muted);
+  color: var(--color-fd-foreground);
+  font-weight: 450;
+}
+
+/* ─── Links in prose (purple underline like Clerk) ─────────────────── */
+
+.fd-docs-content a:not(.fd-page-nav-card):not([class]) {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--color-fd-primary);
+  text-decoration-thickness: 1.5px;
+  font-weight: 500;
+  color: var(--color-fd-primary);
+  transition: opacity 150ms;
+}
+
+.fd-docs-content a:not(.fd-page-nav-card):not([class]):hover {
+  opacity: 0.8;
+}
+
+/* ─── Tables (clean, rounded like Clerk) ───────────────────────────── */
+
+.fd-docs-content table {
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--color-fd-card);
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-fd-border);
+  overflow: hidden;
+  width: 100%;
+}
+
+.fd-docs-content th {
+  background: var(--color-fd-muted);
+  font-weight: 600;
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--color-fd-muted-foreground);
+}
+
+.fd-docs-content th,
+.fd-docs-content td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-fd-border);
+  font-size: 0.875rem;
+}
+
+.fd-docs-content tr:last-child td {
+  border-bottom: none;
+}
+
+/* ─── Blockquotes (purple left border like Clerk) ──────────────────── */
+
+.fd-docs-content blockquote {
+  border-left: 3px solid var(--color-fd-primary);
+  padding-left: 1rem;
+  color: var(--color-fd-muted-foreground);
+  font-style: normal;
+  margin: 1rem 0;
+}
+
+/* ─── Horizontal rule ──────────────────────────────────────────────── */
+
+.fd-docs-content hr {
+  border-color: var(--color-fd-border);
+}
+
+/* ─── Code blocks (Clerk-style dark, no radius on inner, rounded wrapper) */
+
+figure.shiki {
+  border-radius: 0.625rem;
+  overflow: hidden;
+  border: 1px solid var(--color-fd-border);
+}
+
+:root figure.shiki {
+  border-color: hsl(240, 6%, 88%);
+}
+
+.dark figure.shiki {
+  border-color: hsl(240, 5%, 20%);
+}
+
+/* ─── Tabs (Clerk code tab style) ───────────────────────────────────── */
+
+[role="tablist"] {
+  border-bottom: 1px solid var(--color-fd-border);
+}
+
+[role="tab"] {
+  font-size: 0.8125rem;
+  font-weight: 450;
+  padding: 0.5rem 0.875rem;
+  border-radius: 0;
+  color: var(--color-fd-muted-foreground);
+  border-bottom: 2px solid transparent;
+  transition: color 150ms, border-color 150ms;
+}
+
+[role="tab"][aria-selected="true"],
+[role="tab"][data-state="active"] {
+  color: var(--color-fd-foreground);
+  border-bottom-color: var(--color-fd-primary);
+  font-weight: 500;
+}
+
+/* ─── Callout (clean, subtle) ───────────────────────────────────────── */
+
+[style*="--callout-color"] {
+  border-radius: 0.625rem;
+  border-width: 1px;
+}
+
+/* ─── Accordion ────────────────────────────────────────────────────── */
+
+details {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.625rem;
+  padding: 0;
+  margin: 0.75rem 0;
+  overflow: hidden;
+}
+
+details summary {
+  padding: 0.75rem 1rem;
+  font-weight: 500;
+  font-size: 0.9375rem;
+  cursor: pointer;
+  color: var(--color-fd-foreground);
+  background: var(--color-fd-secondary);
+  transition: background 150ms;
+}
+
+details summary:hover {
+  background: var(--color-fd-accent);
+}
+
+details[open] summary {
+  border-bottom: 1px solid var(--color-fd-border);
+}
+
+details > :not(summary) {
+  padding: 0.75rem 1rem;
+}
+
+/* ─── Steps indicator (numbered circles like Clerk) ─────────────────── */
+
+[data-type="step"] {
+  counter-increment: step;
+  position: relative;
+  padding-left: 2.5rem;
+}
+
+[data-type="step"]::before {
+  content: counter(step);
+  position: absolute;
+  left: 0;
+  top: 0.125rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground);
+  font-size: 0.75rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ─── Omni Command Palette (shiny theme) ─────────────────────────── */
+
+.omni-content {
+  border-radius: 0.875rem;
+  border: 1px solid var(--color-fd-border);
+  background: var(--color-fd-popover);
+  box-shadow: 0 24px 80px -12px rgba(0, 0, 0, 0.12), 0 8px 30px rgba(0, 0, 0, 0.08);
+}
+
+.omni-item {
+  border-radius: 0.5rem;
+}
+
+.omni-item-active {
+  background: color-mix(in srgb, var(--color-fd-primary) 10%, transparent);
+}
+
+.omni-highlight {
+  background: color-mix(in srgb, var(--color-fd-primary) 20%, transparent);
+  color: var(--color-fd-primary);
+}
+
+.omni-search-input:focus {
+  caret-color: var(--color-fd-primary);
+}
+
+/* ─── TOC (shiny) ───────────────────────────────────────────────────── */
+
+.toc-thumb {
+  background: var(--color-fd-border);
+  opacity: 1;
+}
+
+#nd-toc a[data-active="true"] {
+  box-shadow: inset 2px 0 0 var(--color-fd-primary);
+  color: var(--color-fd-primary);
+}
+
+#nd-toc a[data-active="false"] {
+  box-shadow: none;
+}
+
+/* ─── Page footer (shiny) ───────────────────────────────────────────── */
+
+.fd-page-footer {
+  border-top: 1px solid var(--color-fd-border);
+}
+
+/* ─── Scrollbar (subtle) ────────────────────────────────────────────── */
+
+.fd-sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.fd-sidebar::-webkit-scrollbar-thumb {
+  background: var(--color-fd-border);
+  border-radius: 4px;
+}
+
+.fd-sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}