@farming-labs/theme 0.0.2-beta.4

package/styles/darksharp.css

@@ -0,0 +1,433 @@
+/* @farming-labs/theme — darksharp theme CSS
+ * Inspired by all-black, sharp edges, minimal radius.
+ * 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(1 0 0);
+  --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;
+  --fd-nav-height: 56px;
+  --fd-banner-height: 0px;
+  --fd-tocnav-height: 0px;
+}
+
+.dark {
+  --color-fd-background: hsl(0 0% 0%);
+  --color-fd-foreground: oklch(0.985 0.001 106.423);
+  --color-fd-card: hsl(0 0% 0%);
+  --color-fd-card-foreground: oklch(0.985 0.001 106.423);
+  --color-fd-popover: hsl(0 0% 6%);
+  --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% 10%);
+  --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% 12%);
+  --color-fd-accent-foreground: oklch(0.985 0.001 106.423);
+  --color-fd-border: hsl(0 0% 14%);
+  --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 sharp radius — override all rounded Tailwind utilities
+ * ═══════════════════════════════════════════════════════════════════ */
+
+[class*="rounded-lg"] {
+  border-radius: 0.2rem !important;
+}
+
+[class*="rounded-md"] {
+  border-radius: 0.1rem !important;
+}
+
+[class*="rounded-xl"],
+[class*="rounded-2xl"] {
+  border-radius: 0.2rem !important;
+}
+
+/* ─── Tables ──────────────────────────────────────────────────────── */
+
+table {
+  border-radius: 0 !important;
+  border-collapse: collapse;
+}
+
+.prose-no-margin,
+[class*="overflow-auto"] {
+  border-radius: 0 !important;
+}
+
+th, td {
+  border-color: var(--color-fd-border);
+}
+
+.dark th {
+  background: hsl(0 0% 8%);
+  color: hsl(0 0% 80%);
+  font-weight: 500;
+}
+
+.dark td {
+  background: hsl(0 0% 2%);
+}
+
+.dark tr {
+  border-color: hsl(0 0% 14%);
+}
+
+/* ─── Code blocks ─────────────────────────────────────────────────── */
+
+figure[data-rehype-pretty-code-figure],
+figure[data-rehype-pretty-code-figure] pre {
+  border-radius: 0.2rem !important;
+}
+
+article figure {
+  border-radius: 0.2rem !important;
+  overflow: hidden;
+}
+
+.dark article figure {
+  border-color: hsl(0 0% 14%);
+}
+
+figure button {
+  border-radius: 0.1rem !important;
+}
+
+/* ─── Inline code ─────────────────────────────────────────────────── */
+
+code:not(pre code) {
+  border-radius: 0.1rem !important;
+}
+
+.dark code:not(pre code) {
+  background: hsl(0 0% 10%);
+  border: 1px solid hsl(0 0% 16%);
+  color: hsl(0 0% 85%);
+}
+
+/* ─── KBD (keyboard shortcuts) ────────────────────────────────────── */
+
+kbd {
+  border-radius: 0.1rem !important;
+}
+
+/* ─── Callouts ────────────────────────────────────────────────────── */
+
+[class*="bg-fd-card"],
+[class*="fd-callout"],
+[role="alert"] {
+  border-radius: 0.2rem !important;
+}
+
+.dark [class*="bg-fd-card"] {
+  border-color: hsl(0 0% 14%);
+}
+
+/* ─── Search dialog ───────────────────────────────────────────────── */
+
+[role="dialog"] {
+  border-radius: 0.2rem !important;
+}
+
+[role="dialog"] [class*="rounded"] {
+  border-radius: 0.1rem !important;
+}
+
+/* ─── Popover / Dropdown ──────────────────────────────────────────── */
+
+[data-radix-popper-content-wrapper] > * {
+  border-radius: 0.2rem !important;
+}
+
+/* ─── Nav cards (prev/next page links) ────────────────────────────── */
+
+article a[class*="border"] {
+  border-radius: 0.2rem !important;
+}
+
+.dark article a[class*="border"] {
+  border-color: hsl(0 0% 14%);
+}
+
+.dark article a[class*="border"]:hover {
+  background: hsl(0 0% 8%);
+  border-color: hsl(0 0% 20%);
+}
+
+/* ─── Breadcrumb links ────────────────────────────────────────────── */
+
+article a[class*="text-fd-muted-foreground"] {
+  border-radius: 0 !important;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * Sidebar — better-auth inspired dark sidebar
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.dark aside.bg-fd-card {
+  background: hsl(0 0% 0%);
+  border-color: hsl(0 0% 12%);
+}
+
+.dark aside a[data-active] {
+  border-radius: 0.2rem !important;
+  padding: 0.4rem 0.5rem;
+  font-size: 0.8125rem;
+}
+
+.dark aside a[data-active="true"] {
+  background: hsl(0 0% 14%) !important;
+  color: hsl(0 0% 96%) !important;
+}
+
+.dark aside a[data-active]:hover {
+  background: hsl(0 0% 10%);
+  color: hsl(0 0% 90%);
+}
+
+.dark aside button[class*="bg-fd-secondary"] {
+  background: hsl(0 0% 8%);
+  border-color: hsl(0 0% 14%);
+  border-radius: 0.2rem !important;
+}
+
+.dark aside button.text-fd-muted-foreground {
+  color: hsl(0 0% 60%);
+}
+
+.dark aside button[class*="rounded-full"] {
+  border-color: hsl(0 0% 14%);
+  border-radius: 9999px !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% 14%);
+}
+
+/* ─── Page Actions (darksharp overrides) ─────────────────────────── */
+
+.fd-page-action-btn {
+  border-radius: 0.2rem !important;
+}
+
+.fd-page-action-menu {
+  border-radius: 0.2rem !important;
+  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.4);
+}
+
+.fd-page-action-menu-item {
+  border-radius: 0.1rem !important;
+}
+
+/* ─── Breadcrumb (darksharp overrides) ───────────────────────────── */
+
+.fd-breadcrumb {
+  font-size: 0.75rem;
+}
+
+/* ─── AI Chat (darksharp — sharp edges, high contrast, minimal) ─── */
+
+.fd-ai-dialog {
+  border-radius: 2px;
+  border-width: 1px;
+  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.4);
+}
+
+.fd-ai-tab {
+  border-radius: 2px 2px 0 0;
+}
+
+.fd-ai-bubble-user {
+  border-radius: 2px;
+}
+
+.fd-ai-bubble-ai {
+  border-radius: 2px;
+}
+
+.fd-ai-input-wrap {
+  border-radius: 2px;
+}
+
+.fd-ai-send-btn {
+  border-radius: 2px;
+}
+
+.fd-ai-close-btn {
+  border-radius: 2px;
+}
+
+.fd-ai-floating-btn {
+  border-radius: 2px;
+  box-shadow: none;
+}
+
+.fd-ai-floating-btn:hover {
+  box-shadow: 0 0 0 1px var(--color-fd-ring);
+  transform: none;
+}
+
+.fd-ai-suggestion {
+  border-radius: 2px;
+}
+
+.fd-ai-result {
+  border-radius: 2px;
+}
+
+.fd-ai-esc {
+  border-radius: 2px;
+}
+
+.fd-ai-clear-btn {
+  border-radius: 2px;
+}
+
+/* ─── Full-Modal (darksharp) ─────────────────────────────────────── */
+
+.fd-ai-fm-input-container {
+  border-radius: 2px;
+}
+
+.fd-ai-fm-send-btn {
+  border-radius: 2px;
+}
+
+.fd-ai-fm-close-btn {
+  border-radius: 2px;
+}
+
+.fd-ai-fm-suggestion {
+  border-radius: 2px;
+}
+
+.fd-ai-fm-trigger-btn {
+  border-radius: 2px;
+  box-shadow: none;
+}
+
+.fd-ai-fm-trigger-btn:hover {
+  transform: none;
+}
+
+.fd-ai-fm-msg-content code {
+  border-radius: 2px;
+}
+
+.fd-ai-fm-thinking-dot {
+  border-radius: 2px;
+}
+
+/* ─── Code blocks (darksharp) ────────────────────────────────────── */
+
+.fd-ai-code-block {
+  border-radius: 2px;
+  --sh-class: #7dcfff;
+  --sh-identifier: #d4d4d8;
+  --sh-keyword: #f87171;
+  --sh-string: #86efac;
+  --sh-property: #93c5fd;
+  --sh-entity: #5eead4;
+  --sh-sign: #a1a1aa;
+  --sh-comment: #52525b;
+  --sh-jsxliterals: #c4b5fd;
+}
+
+.fd-ai-code-copy {
+  border-radius: 2px;
+}

package/styles/default.css

@@ -0,0 +1,88 @@
+/* @farming-labs/theme — default theme CSS (neutral color preset) */
+@import "./presets/neutral.css";
+
+/* ─── Page Actions (default theme) ───────────────────────────────── */
+
+.fd-page-action-btn {
+  border-radius: 0.375rem;
+}
+
+.fd-page-action-menu {
+  border-radius: 0.5rem;
+}
+
+.fd-page-action-menu-item {
+  border-radius: 0.25rem;
+}
+
+/* ─── AI Chat (default theme — rounded, soft, indigo) ────────────── */
+
+.fd-ai-dialog {
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(99, 102, 241, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.fd-ai-bubble-user {
+  border-radius: 16px 16px 4px 16px;
+}
+
+.fd-ai-bubble-ai {
+  border-radius: 16px 16px 16px 4px;
+}
+
+.fd-ai-input-wrap {
+  border-radius: 10px;
+}
+
+.fd-ai-send-btn {
+  border-radius: 8px;
+}
+
+.fd-ai-floating-btn {
+  border-radius: 26px;
+  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
+}
+
+.fd-ai-floating-btn:hover {
+  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4);
+}
+
+.fd-ai-suggestion {
+  border-radius: 8px;
+}
+
+.fd-ai-result {
+  border-radius: 8px;
+}
+
+/* ─── Full-Modal (default) ───────────────────────────────────────── */
+
+.fd-ai-fm-input-container {
+  border-radius: 12px;
+}
+
+.fd-ai-fm-send-btn {
+  border-radius: 9999px;
+}
+
+.fd-ai-fm-suggestion {
+  border-radius: 9999px;
+}
+
+.fd-ai-fm-trigger-btn {
+  border-radius: 16px;
+}
+
+.fd-ai-fm-close-btn {
+  border-radius: 9999px;
+}
+
+/* ─── Code blocks (default) ──────────────────────────────────────── */
+
+.fd-ai-code-block {
+  border-radius: 8px;
+}
+
+.fd-ai-code-copy {
+  border-radius: 4px;
+}

package/styles/fumadocs.css

@@ -0,0 +1,2 @@
+/* @deprecated — Use @farming-labs/theme/default/css or @farming-labs/theme/darksharp/css */
+@import "./default.css";