@farming-labs/theme 0.0.2-beta.4

package/styles/pixel-border.css

@@ -0,0 +1,671 @@
+/* @farming-labs/theme — pixel-border theme CSS
+ * Inspired by better-auth.com — pixel-perfect borders, clean dark UI.
+ * Uses the "black" color preset as the base.
+ */
+@import "./presets/black.css";
+
+:root {
+  --color-fd-background: oklch(1 0 0);
+  --color-fd-foreground: oklch(0.147 0.004 49.25);
+  --color-fd-card: oklch(0.985 0.001 106.423);
+  --color-fd-card-foreground: oklch(0.147 0.004 49.25);
+  --color-fd-popover: oklch(1 0 0);
+  --color-fd-popover-foreground: oklch(0.147 0.004 49.25);
+  --color-fd-primary: oklch(0.216 0.006 56.043);
+  --color-fd-primary-foreground: oklch(0.985 0.001 106.423);
+  --color-fd-secondary: oklch(0.97 0.001 106.424);
+  --color-fd-secondary-foreground: oklch(0.216 0.006 56.043);
+  --color-fd-muted: oklch(0.97 0.001 106.424);
+  --color-fd-muted-foreground: oklch(0.553 0.013 58.071);
+  --color-fd-accent: oklch(0.97 0.001 106.424);
+  --color-fd-accent-foreground: oklch(0.216 0.006 56.043);
+  --color-fd-border: oklch(0.923 0.003 48.717);
+  --color-fd-ring: oklch(0.709 0.01 56.259);
+  --scrollbar-thumb: var(--color-fd-border);
+  --scrollbar-thumb-hover: var(--color-fd-ring);
+  --scrollbar-track: transparent;
+  /* Sharp corners — no rounding */
+  --radius: 0px;
+  --fd-nav-height: 56px;
+  --fd-banner-height: 0px;
+  --fd-tocnav-height: 0px;
+}
+
+.dark {
+  --color-fd-background: hsl(0 0% 2%);
+  --color-fd-foreground: oklch(0.985 0.001 106.423);
+  --color-fd-card: hsl(0 0% 4%);
+  --color-fd-card-foreground: oklch(0.985 0.001 106.423);
+  --color-fd-popover: hsl(0 0% 4%);
+  --color-fd-popover-foreground: oklch(0.985 0.001 106.423);
+  --color-fd-primary: oklch(0.985 0.001 106.423);
+  --color-fd-primary-foreground: oklch(0.216 0.006 56.043);
+  --color-fd-secondary: hsl(0 0% 8%);
+  --color-fd-secondary-foreground: oklch(0.985 0.001 106.423);
+  --color-fd-muted: hsl(0 0% 10%);
+  --color-fd-muted-foreground: hsl(0 0% 55%);
+  --color-fd-accent: hsl(0 0% 10%);
+  --color-fd-accent-foreground: oklch(0.985 0.001 106.423);
+  --color-fd-border: hsl(0 0% 15%);
+  --color-fd-ring: hsl(0 0% 30%);
+  --scrollbar-thumb: var(--color-fd-border);
+  --scrollbar-thumb-hover: var(--color-fd-ring);
+  --scrollbar-track: transparent;
+}
+
+/* ─── Scroll ──────────────────────────────────────────────────────── */
+
+html {
+  scroll-behavior: auto;
+  scroll-padding-top: calc(
+    var(--fd-nav-height, 56px) +
+    var(--fd-banner-height, 0px) +
+    var(--fd-tocnav-height, 0px) +
+    24px
+  );
+}
+
+html:not([data-anchor-scrolling]) {
+  scroll-behavior: smooth;
+}
+
+/* ─── Custom scrollbar ────────────────────────────────────────────── */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: 9999px;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover);
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* ─── Selection ───────────────────────────────────────────────────── */
+
+body {
+  overscroll-behavior: none;
+}
+
+::selection {
+  background: var(--color-fd-foreground);
+  color: var(--color-fd-background);
+}
+
+/* ─── Inline code word break ──────────────────────────────────────── */
+
+code:not(pre code) {
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * Global rounded-none: force sharp corners on all UI elements
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Cards, popovers, dialogs, inputs, buttons, badges */
+[class*="rounded-"],
+[class*="border-radius"],
+.rounded-lg,
+.rounded-md,
+.rounded-xl,
+.rounded-2xl {
+  border-radius: 0 !important;
+}
+
+/* Inline code */
+code:not(pre code) {
+  border-radius: 0 !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * Pixel-border theme — better-auth inspired sidebar, clean dark UI
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* ─── Docs grid: pin sidebar left, TOC right, content fills middle ── */
+@media (min-width: 768px) {
+  #nd-docs-layout {
+    grid-template-columns: var(--fd-sidebar-col, 0px) 1fr min-content !important;
+  }
+}
+
+/* ─── Sidebar (better-auth style) ─────────────────────────────────── */
+/* Sidebar container: dark, subtle right border */
+.dark aside#nd-sidebar {
+  background: hsl(0 0% 2%);
+  border-color: hsl(0 0% 12%);
+}
+
+/* ── Full-width border separators between top-level items ─────────── */
+/* Negative margins extend the border line across the full sidebar.    */
+.dark aside .overscroll-contain > div {
+  margin-top: -22px;
+}
+
+.dark aside .overscroll-contain > div > a[data-active] {
+  border-top: 1px solid hsl(0 0% 12%);
+  margin-left: -1rem;
+  margin-right: -1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  /* padding-top: 0.75rem; */
+  padding-bottom: 0.75rem;
+}
+
+/* Folder wrappers: border + negative margin but NO padding
+   so the parent link inside aligns with other top-level items.        */
+.dark aside .overscroll-contain > div > div {
+  border-top: 1px solid hsl(0 0% 12%);
+  margin-left: -1rem;
+  margin-right: -1rem;
+  padding: 0 !important;
+}
+
+/* Parent link inside a folder (e.g. "Introduction") — 
+   inherit the same padding as other top-level links from the
+   all-links rule so it aligns flush. No extra padding here.           */
+
+/* First item: no top border */
+.dark aside .overscroll-contain > div > a[data-active]:first-child,
+.dark aside .overscroll-contain > div > div:first-child {
+  border-top: none;
+}
+
+/* ── Sidebar links (all levels) ──────────────────────────────────── */
+
+.dark aside a[data-active] {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  border-radius: 0 !important;
+  padding: 0.5rem 0.625rem !important;
+  transition: color 0.15s ease;
+  color: hsl(0 0% 50%);
+  font-weight: 400;
+  overflow: hidden;
+  background-color: transparent !important;
+}
+
+/* Kill the Tailwind utility bg on active & hover */
+.dark aside a[data-active="true"],
+.dark aside a[data-active="true"]:hover {
+  background: transparent !important;
+  background-color: transparent !important;
+  color: var(--color-fd-primary) !important;
+  font-weight: 600;
+}
+
+/* Hover on inactive: text brightens only */
+.dark aside a[data-active="false"]:hover {
+  background: transparent !important;
+  background-color: transparent !important;
+  color: hsl(0 0% 80%);
+}
+
+/* ── Child links inside collapsible folders ──────────────────────── */
+/* Smaller text, indented, no border separators.
+   Target only links inside the inner overflow-hidden collapsible
+   content container (which has both data-state and overflow-hidden). */
+
+.dark aside div.overflow-hidden[data-state] a[data-active] {
+  font-size: 0.785rem !important;
+  padding-left: 2rem !important;
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+  color: hsl(0 0% 45%) !important;
+  overflow: hidden;
+}
+
+.dark aside div.overflow-hidden[data-state] a[data-active="true"],
+.dark aside div.overflow-hidden[data-state] a[data-active="true"]:hover {
+  color: var(--color-fd-primary) !important;
+  font-weight: 500 !important;
+}
+
+.dark aside div.overflow-hidden[data-state] a[data-active="false"]:hover {
+  color: hsl(0 0% 75%) !important;
+}
+
+/* ── Folder toggle buttons (section headers) ─────────────────────── */
+
+.dark aside button.text-fd-muted-foreground {
+  color: hsl(0 0% 90%);
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.dark aside button.text-fd-muted-foreground:hover {
+  color: hsl(0 0% 100%);
+}
+.dark aside a[data-active="true"]::before {
+  background-color: var(--color-fd-primary) !important; 
+  width: 2px !important;  
+  margin-left: 0.6rem !important;                      
+  inset-inline-start: 0.5rem !important;         
+}
+
+/* Change the static folder guide line */
+.dark aside div.overflow-hidden[data-state]::before {
+  margin-left: 0.5rem !important;
+  height: calc(100% + 20px) !important;
+  /* margin-bottom: -10px !important; */
+  margin-top: -25px !important;
+}
+
+/* ── Folder parent link when children are EXPANDED ────── */
+.dark aside div[data-state="open"] > :last-child {
+  overflow: hidden;
+}
+
+/* ── Folder parent link when children are COLLAPSED ───── */
+/* .dark aside div[data-state="closed"] > a[data-active] {
+  color: hsl(0 0% 60%) !important;
+  font-weight: 400 !important;
+} */
+
+
+/* ── Search button: full-width, border-y only ────────────────────── */
+
+
+.dark aside button[class*="bg-fd-secondary"] {
+  background: transparent !important;
+  border: none !important;
+  border-top: 1px solid hsl(0 0% 12%) !important;
+  border-bottom: 1px solid hsl(0 0% 12%) !important;
+  border-radius: 0 !important;
+  color: hsl(0 0% 45%);
+  font-size: 0.8125rem;
+  padding: 0.5rem 0 !important;
+  width: calc(100% + 2rem) !important;
+  margin-left: -1rem !important;
+  margin-right: -1rem !important;
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
+.dark aside button[class*="bg-fd-secondary"]:hover {
+  background: hsl(0 0% 4%) !important;
+  color: hsl(0 0% 65%);
+}
+
+/* ── Theme toggle ────────────────────────────────────────────────── */
+
+.dark aside button[class*="rounded-full"] {
+  border-color: hsl(0 0% 12%);
+}
+
+/* ─── Tables: visible borders, rounded wrapper ────────────────────── */
+
+.dark table {
+  border: 1px solid hsl(0 0% 15%);
+  border-radius: 0 !important;
+  overflow: hidden;
+}
+
+.dark th {
+  background: hsl(0 0% 6%);
+  color: hsl(0 0% 80%);
+  font-weight: 500;
+  border-color: hsl(0 0% 15%);
+}
+
+.dark td {
+  border-color: hsl(0 0% 12%);
+}
+
+.dark tr:last-child td {
+  border-bottom: none;
+}
+
+/* ─── Code blocks: single border only ─────────────────────────────── */
+
+/* Target the fumadocs CodeBlock figure (shiki class) */
+figure.shiki {
+  border: 1px solid hsl(0 0% 15%) !important;
+  border-radius: 0 !important;
+  overflow: hidden;
+  box-shadow: none !important;
+}
+
+/* Copy button inside code blocks */
+figure.shiki button {
+  border-radius: 0 !important;
+}
+
+/* Code block title bar */
+figure.shiki > div:first-child {
+  border-radius: 0 !important;
+}
+
+/* ─── Tabs (package manager / code tabs) ──────────────────────────── */
+
+.dark [role="tablist"] {
+  border-radius: 0 !important;
+}
+
+.dark [role="tablist"] button,
+.dark [role="tab"] {
+  border-radius: 0 !important;
+}
+
+.dark [role="tabpanel"] {
+  border-radius: 0 !important;
+}
+
+/* Tabs container */
+.dark div:has(> [role="tablist"]) {
+  border-radius: 0 !important;
+}
+
+/* ─── Inline code ─────────────────────────────────────────────────── */
+/* 
+.dark code:not(pre code) {
+  background: hsl(0 0% 8%);
+  border: 1px solid hsl(0 0% 16%);
+  color: hsl(0 0% 85%);
+  border-radius: 0.375rem;
+  padding: 0.125rem 0.375rem;
+} */
+
+/* ─── Callouts: visible border ────────────────────────────────────── */
+
+.dark [class*="bg-fd-card"] {
+  border-color: hsl(0 0% 15%);
+}
+
+/* ─── Nav cards (prev/next): visible border ───────────────────────── */
+
+.dark article a[class*="border"] {
+  border-color: hsl(0 0% 15%);
+  border-radius: 0 !important;
+}
+
+.dark article a[class*="border"]:hover {
+  background: hsl(0 0% 6%);
+  border-color: hsl(0 0% 22%);
+}
+
+/* ─── Search dialog ───────────────────────────────────────────────── */
+
+[role="dialog"] {
+  border-radius: 0 !important;
+}
+
+/* ─── TOC right panel ─────────────────────────────────────────────── */
+
+.dark nav[class*="toc"],
+.dark [class*="fd-toc"] {
+  border-color: hsl(0 0% 12%);
+}
+
+/* ─── Separator/Divider (hr) ──────────────────────────────────────── */
+
+.dark hr {
+  border-color: hsl(0 0% 15%);
+}
+
+/* ─── Breadcrumb (pixel-border overrides) ─────────────────────────── */
+
+.fd-breadcrumb {
+  font-size: 0.75rem;
+  letter-spacing: 0.01em;
+}
+.fd-breadcrumb-link {
+  color: inherit;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace));
+}
+.fd-breadcrumb-current {
+  font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace));
+  text-transform: uppercase;
+}
+/* ─── Page Actions (pixel-border overrides) ───────────────────────── */
+
+.fd-page-action-btn {
+  border-radius: 0 !important;
+  font-size: 0.75rem;
+  letter-spacing: 0.03em;
+}
+
+.fd-page-action-menu {
+  border-radius: 0 !important;
+  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.5);
+}
+
+.fd-page-action-menu-item {
+  border-radius: 0 !important;
+  font-size: 0.8rem;
+}
+
+/* ─── AI Chat (pixel-border — zero radius, pixel-art, monospace) ── */
+
+.fd-ai-dialog {
+  border-radius: 0 !important;
+  border-width: 1px;
+  box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
+}
+
+.fd-ai-tab-bar {
+  gap: 0;
+}
+
+.fd-ai-tab {
+  border-radius: 0 !important;
+  font-size: 12px;
+  letter-spacing: 0.04em;
+}
+
+.fd-ai-header-title {
+  font-size: 13px;
+}
+
+.fd-ai-bubble-user {
+  border-radius: 0 !important;
+  font-size: 12px;
+}
+
+.fd-ai-bubble-ai {
+  border-radius: 0 !important;
+  font-size: 12px;
+}
+
+.fd-ai-bubble-ai pre {
+  border-radius: 0 !important;
+  border: 1px solid var(--color-fd-border, hsl(0 0% 15%));
+}
+
+.fd-ai-bubble-ai code {
+  border-radius: 0 !important;
+}
+
+.fd-ai-input-wrap {
+  border-radius: 0 !important;
+}
+
+.fd-ai-input {
+  font-size: 13px;
+}
+
+.fd-ai-send-btn {
+  border-radius: 0 !important;
+}
+
+.fd-ai-close-btn {
+  border-radius: 0 !important;
+}
+
+.fd-ai-floating-btn {
+  border-radius: 0 !important;
+  box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%));
+}
+
+.fd-ai-floating-btn:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
+}
+
+.fd-ai-suggestion {
+  border-radius: 0 !important;
+  font-size: 12px;
+}
+
+.fd-ai-result {
+  border-radius: 0 !important;
+}
+
+.fd-ai-esc {
+  border-radius: 0 !important;
+}
+
+.fd-ai-clear-btn {
+  border-radius: 0 !important;
+  letter-spacing: 0.04em;
+}
+
+.fd-ai-msg-label {
+  letter-spacing: 0.06em;
+}
+
+.fd-ai-loading-text {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 11px;
+}
+
+.fd-ai-loading-dot {
+  border-radius: 0;
+  width: 4px;
+  height: 4px;
+}
+
+/* ─── Full-Modal (pixel-border) ──────────────────────────────────── */
+
+.fd-ai-fm-input-container {
+  border-radius: 0 !important;
+  box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
+}
+
+.fd-ai-fm-send-btn {
+  border-radius: 0 !important;
+}
+
+.fd-ai-fm-close-btn {
+  border-radius: 0 !important;
+}
+
+.fd-ai-fm-input {
+  font-size: 13px;
+}
+
+.fd-ai-fm-suggestion {
+  border-radius: 0 !important;
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.fd-ai-fm-trigger-btn {
+  border-radius: 0 !important;
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 12px;
+  box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%));
+}
+
+.fd-ai-fm-trigger-btn:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
+}
+
+.fd-ai-fm-msg-label {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 11px;
+}
+
+.fd-ai-fm-msg-content {
+  font-size: 13px;
+}
+
+.fd-ai-fm-msg-content code {
+  border-radius: 0 !important;
+}
+
+.fd-ai-fm-suggestions-label {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.fd-ai-fm-clear-btn {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.fd-ai-fm-footer-hint {
+  font-size: 11px;
+}
+
+.fd-ai-fm-thinking-dot {
+  border-radius: 0;
+  width: 5px;
+  height: 5px;
+}
+
+/* ─── Code blocks (pixel-border) ─────────────────────────────────── */
+
+.fd-ai-code-block {
+  border-radius: 0 !important;
+  box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%));
+  background: transparent;
+  --sh-class: #66d9ef;
+  --sh-identifier: #f8f8f2;
+  --sh-keyword: #f92672;
+  --sh-string: #e6db74;
+  --sh-property: #a6e22e;
+  --sh-entity: #66d9ef;
+  --sh-sign: #f8f8f2;
+  --sh-comment: #75715e;
+  --sh-jsxliterals: #ae81ff;
+}
+
+.fd-ai-code-header {
+  border-bottom-color: var(--color-fd-border, hsl(0 0% 15%));
+  background: transparent;
+}
+
+.fd-ai-code-lang {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+}
+
+.fd-ai-code-copy {
+  border-radius: 0 !important;
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.fd-ai-code-block code {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+}

package/styles/presets/base.css

@@ -0,0 +1,14 @@
+/*
+ * @farming-labs/theme — Base-only preset (no color palette)
+ *
+ * Bundles only the fumadocs-ui core preset + shared base styles,
+ * without any color palette. Use this when you want to define all
+ * CSS variables (colors, radius, etc.) from scratch.
+ *
+ * Usage in your theme CSS:
+ *   @import "@farming-labs/theme/presets/base";
+ *
+ * Then define ALL required CSS variables (:root / .dark) yourself.
+ */
+@import "fumadocs-ui/css/preset.css";
+@import "../base.css";

package/styles/presets/black.css

@@ -0,0 +1,14 @@
+/*
+ * @farming-labs/theme — Black color preset
+ *
+ * Bundles the fumadocs-ui black palette + core preset + shared base styles.
+ * Theme authors import this instead of fumadocs-ui internals directly.
+ *
+ * Usage in your theme CSS:
+ *   @import "@farming-labs/theme/presets/black";
+ *
+ * Then add your own :root / .dark overrides below.
+ */
+@import "fumadocs-ui/css/black.css";
+@import "fumadocs-ui/css/preset.css";
+@import "../base.css";

package/styles/presets/neutral.css

@@ -0,0 +1,14 @@
+/*
+ * @farming-labs/theme — Neutral color preset
+ *
+ * Bundles the fumadocs-ui neutral palette + core preset + shared base styles.
+ * Theme authors import this instead of fumadocs-ui internals directly.
+ *
+ * Usage in your theme CSS:
+ *   @import "@farming-labs/theme/presets/neutral";
+ *
+ * Then add your own :root / .dark overrides below.
+ */
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
+@import "../base.css";