@farming-labs/theme 0.0.2-beta.9 → 0.0.2

package/styles/base.css

@@ -1,6 +1,9 @@
 /* AI Chat & Search Dialog styles */
 @import "./ai.css";
 
+/* Omni Command Palette — built-in search */
+@import "./omni.css";
+
 /* Shared base styles for all @farming-labs/theme themes.
  *
  * Typography CSS custom properties:
@@ -23,34 +26,52 @@ body {
   font-family: var(--fd-font-sans, var(--font-geist-sans, ui-sans-serif, system-ui, sans-serif));
 }
 
-code, kbd, pre, samp {
-  font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace));
+code,
+kbd,
+pre,
+samp {
+  font-family: var(
+    --fd-font-mono,
+    var(
+      --font-geist-mono,
+      ui-monospace,
+      "Cascadia Code",
+      "Source Code Pro",
+      Menlo,
+      Consolas,
+      monospace
+    )
+  );
 }
 
 /* ─── Prose heading typography ───────────────────────────────────────── */
 
-.prose h1, article h1 {
+.prose h1,
+article h1 {
   font-size: var(--fd-h1-size, 2.25rem);
   font-weight: var(--fd-h1-weight, 700);
   line-height: var(--fd-h1-line-height, 1.2);
   letter-spacing: var(--fd-h1-letter-spacing, -0.02em);
 }
 
-.prose h2, article h2 {
+.prose h2,
+article h2 {
   font-size: var(--fd-h2-size, 1.5rem);
   font-weight: var(--fd-h2-weight, 600);
   line-height: var(--fd-h2-line-height, 1.3);
   letter-spacing: var(--fd-h2-letter-spacing, -0.01em);
 }
 
-.prose h3, article h3 {
+.prose h3,
+article h3 {
   font-size: var(--fd-h3-size, 1.25rem);
   font-weight: var(--fd-h3-weight, 600);
   line-height: var(--fd-h3-line-height, 1.4);
   letter-spacing: var(--fd-h3-letter-spacing, normal);
 }
 
-.prose h4, article h4 {
+.prose h4,
+article h4 {
   font-size: var(--fd-h4-size, 1.125rem);
   font-weight: var(--fd-h4-weight, 600);
   line-height: var(--fd-h4-line-height, 1.4);
@@ -59,7 +80,10 @@ code, kbd, pre, samp {
 
 /* ─── Body text ──────────────────────────────────────────────────────── */
 
-.prose p, .prose li, .prose td, article p {
+.prose p,
+.prose li,
+.prose td,
+article p {
   font-size: var(--fd-body-size, 1rem);
   font-weight: var(--fd-body-weight, 400);
   line-height: var(--fd-body-line-height, 1.75);
@@ -67,7 +91,9 @@ code, kbd, pre, samp {
 
 /* ─── Small text (captions, metadata) ─────────────────────────────── */
 
-.prose small, article small, .text-sm {
+.prose small,
+article small,
+.text-sm {
   font-size: var(--fd-small-size, 0.875rem);
   font-weight: var(--fd-small-weight, 400);
   line-height: var(--fd-small-line-height, 1.5);
@@ -105,6 +131,53 @@ figure.shiki pre > code > [data-line] {
   padding: 0 0.25rem;
 }
 
+/* Titled code blocks: diagonal stripe background on the title bar */
+figure.shiki:has(figcaption) > div:first-child {
+  position: relative;
+}
+
+figure.shiki:has(figcaption) > div:first-child::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    -45deg,
+    currentColor,
+    currentColor 1px,
+    transparent 1px,
+    transparent 6px
+  );
+  opacity: 0.03;
+  pointer-events: none;
+}
+
+.dark figure.shiki:has(figcaption) > div:first-child::before {
+  opacity: 0.05;
+}
+
+figure.shiki:has(figcaption) figcaption {
+  font-family: var(
+    --fd-font-mono,
+    ui-monospace,
+    SFMono-Regular,
+    "SF Mono",
+    Menlo,
+    Consolas,
+    monospace
+  );
+  font-size: 0.75rem;
+  letter-spacing: 0.01em;
+}
+
+/* ─── Page description (frontmatter) ─────────────────────────────────── */
+
+.fd-page-description {
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.75;
+  color: var(--color-fd-muted-foreground);
+}
+
 /* ─── Breadcrumb ─────────────────────────────────────────────────────── */
 
 .fd-breadcrumb {
@@ -136,7 +209,9 @@ figure.shiki pre > code > [data-line] {
   color: inherit;
   text-decoration: none;
   cursor: pointer;
-  transition: opacity 0.15s, color 0.15s;
+  transition:
+    opacity 0.15s,
+    color 0.15s;
 }
 
 .fd-breadcrumb-link:hover {
@@ -149,6 +224,32 @@ figure.shiki pre > code > [data-line] {
   color: var(--color-fd-foreground);
 }
 
+/* ─── Below-title block (Last Updated + Separator + Actions) ──────── */
+
+.fd-below-title-block {
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.fd-last-updated-inline {
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin: 0 0 0.75rem;
+  line-height: 1.5;
+}
+
+.fd-title-separator {
+  border: none;
+  border-top: 1px solid var(--color-fd-border);
+  margin: 0 0 0.75rem;
+}
+
+.fd-actions-portal [data-page-actions] {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 /* ─── Page Actions (Copy Markdown / Open in …) ────────────────────── */
 
 [data-page-actions] {
@@ -160,6 +261,14 @@ figure.shiki pre > code > [data-line] {
   margin-top: 0.25rem;
 }
 
+[data-actions-alignment="right"] > [data-page-actions] {
+  justify-content: flex-end;
+}
+
+[data-actions-alignment="left"] > [data-page-actions] {
+  justify-content: flex-start;
+}
+
 .fd-page-action-btn {
   display: inline-flex;
   align-items: center;
@@ -175,7 +284,10 @@ figure.shiki pre > code > [data-line] {
   border-radius: 0.375rem;
   cursor: pointer;
   white-space: nowrap;
-  transition: color 0.15s, background 0.15s, border-color 0.15s;
+  transition:
+    color 0.15s,
+    background 0.15s,
+    border-color 0.15s;
   user-select: none;
 }
 
@@ -222,8 +334,14 @@ figure.shiki pre > code > [data-line] {
 }
 
 @keyframes fd-page-actions-fade-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .fd-page-action-menu-item {
@@ -240,7 +358,9 @@ figure.shiki pre > code > [data-line] {
   border-radius: 0.25rem;
   cursor: pointer;
   text-align: left;
-  transition: background 0.1s, color 0.1s;
+  transition:
+    background 0.1s,
+    color 0.1s;
 }
 
 .fd-page-action-menu-item:hover {
@@ -270,8 +390,9 @@ figure.shiki pre > code > [data-line] {
 
 .fd-page-footer {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 1rem;
+  gap: 0.75rem 1rem;
   margin-top: auto;
   padding-top: 1.5rem;
   border-top: 1px solid var(--color-fd-border, hsl(0 0% 80% / 50%));
@@ -283,6 +404,42 @@ figure.shiki pre > code > [data-line] {
   font-size: 0.75rem;
 }
 
+.fd-last-updated-footer {
+  color: var(--color-fd-muted-foreground, hsl(0 0% 45%));
+  font-size: 0.8125rem;
+  margin-left: auto;
+}
+
+@media (max-width: 640px) {
+  .fd-last-updated-footer {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
+.fd-llms-txt-links {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.fd-llms-txt-link {
+  color: var(--color-fd-muted-foreground, hsl(0 0% 45%));
+  font-size: 0.75rem;
+  font-family: var(--fd-font-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace);
+  text-decoration: none;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-fd-border, hsl(0 0% 80% / 50%));
+  transition: color 150ms, border-color 150ms;
+}
+
+.fd-llms-txt-link:hover {
+  color: var(--color-fd-foreground, hsl(0 0% 10%));
+  border-color: var(--color-fd-foreground, hsl(0 0% 10%));
+  text-decoration: none;
+}
+
 /* ─── Code block copy button: show on hover ────────────────────────── */
 
 figure.shiki > button,
@@ -296,3 +453,43 @@ figure.shiki:hover > div:first-child button {
   opacity: 1;
 }
 
+/* ─── Sidebar AI trigger (sidebar-icon mode) ───────────────────────── */
+
+.fd-sidebar-ai-trigger-wrapper {
+  display: flex;
+  gap: 8px;
+  align-items: stretch;
+}
+
+.fd-sidebar-search-flex {
+  flex: 1;
+  min-width: 0;
+}
+
+.fd-sidebar-ai-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  min-width: 38px;
+  border-radius: 8px;
+  border: 1px solid var(--color-fd-border, hsl(0 0% 80% / 50%));
+  background: var(--color-fd-secondary, hsl(0 0% 96%));
+  color: var(--color-fd-muted-foreground, hsl(0 0% 45%));
+  cursor: pointer;
+  transition:
+    background-color 150ms,
+    color 150ms,
+    border-color 150ms;
+}
+
+.fd-sidebar-ai-btn:hover {
+  background: var(--color-fd-accent, hsl(0 0% 90%));
+  color: var(--color-fd-primary, hsl(220 100% 50%));
+  border-color: var(--color-fd-primary, hsl(220 100% 50%));
+}
+
+.fd-sidebar-ai-btn svg {
+  width: 16px;
+  height: 16px;
+}

package/styles/colorful.css

@@ -0,0 +1,266 @@
+/* @farming-labs/theme — colorful theme CSS
+ * Fumadocs-inspired theme with warm yellow/amber accent colors.
+ */
+@import "./presets/neutral.css";
+
+/* ─── Colorful yellow accent overrides ────────────────────────────── */
+
+:root {
+  --color-fd-primary: hsl(40, 96%, 40%);
+  --color-fd-primary-foreground: hsl(0, 0%, 100%);
+  --color-fd-ring: hsl(40, 80%, 50%);
+}
+
+.dark {
+  --color-fd-primary: hsl(45, 100%, 60%);
+  --color-fd-primary-foreground: hsl(0, 0%, 5%);
+  --color-fd-ring: hsl(45, 90%, 55%);
+}
+
+/* ─── Description under title ──────────────────────────────────────── */
+
+.fd-page-description {
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.75;
+  color: var(--color-fd-muted-foreground);
+}
+
+/* ─── Page Actions (colorful 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 (colorful theme) ───────────────────────────────────────── */
+
+.fd-ai-dialog {
+  border-radius: 12px;
+  box-shadow:
+    0 20px 60px rgba(180, 140, 20, 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(180, 140, 20, 0.3);
+}
+
+.fd-ai-floating-btn:hover {
+  box-shadow: 0 10px 40px rgba(180, 140, 20, 0.4);
+}
+
+.fd-ai-suggestion {
+  border-radius: 8px;
+}
+
+.fd-ai-result {
+  border-radius: 8px;
+}
+
+/* ─── Full-Modal ────────────────────────────────────────────────────── */
+
+.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 ───────────────────────────────────────────────────── */
+
+.fd-ai-code-block {
+  border-radius: 8px;
+}
+
+.fd-ai-code-copy {
+  border-radius: 4px;
+}
+
+/* ─── Sidebar colorful overrides ────────────────────────────────────── */
+
+.dark .fd-sidebar {
+  --color-fd-muted: hsl(0, 0%, 16%);
+  --color-fd-secondary: hsl(0, 0%, 18%);
+  --color-fd-muted-foreground: hsl(0, 0%, 72%);
+}
+
+/* ─── Cards (fumadocs style) ────────────────────────────────────────── */
+
+.fd-card {
+  display: block;
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-fd-border);
+  background: var(--color-fd-card);
+  padding: 1rem;
+  font-size: 0.875rem;
+  color: var(--color-fd-card-foreground);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  transition:
+    background-color 150ms,
+    border-color 150ms;
+}
+
+.fd-card:hover {
+  background: var(--color-fd-accent);
+}
+
+.fd-card-icon {
+  margin-bottom: 0.5rem;
+  width: fit-content;
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-fd-border);
+  padding: 0.375rem;
+  color: var(--color-fd-muted-foreground);
+}
+
+.fd-card-title {
+  font-weight: 500;
+}
+
+.fd-card-description {
+  color: var(--color-fd-muted-foreground);
+  margin-top: 0.25rem;
+}
+
+/* ─── Cards grid ──────────────────────────────────────────────────── */
+
+.fd-cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+@media (min-width: 640px) {
+  .fd-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* ─── Page nav cards (fumadocs style) ──────────────────────────────── */
+
+.fd-page-nav-card {
+  border-radius: 0.75rem;
+}
+
+/* ─── Inline code ──────────────────────────────────────────────────── */
+
+.fd-docs-content :not(pre) > code {
+  padding: 3px;
+  border: 1px solid var(--color-fd-border);
+  font-size: 13px;
+  border-radius: 5px;
+  background: var(--color-fd-muted);
+}
+
+/* ─── Links in prose ───────────────────────────────────────────────── */
+
+.fd-docs-content a:not(.fd-page-nav-card):not([class]) {
+  text-decoration: underline;
+  text-underline-offset: 3.5px;
+  text-decoration-color: var(--color-fd-primary);
+  text-decoration-thickness: 1.5px;
+  font-weight: 500;
+}
+
+/* ─── Tables (rounded style) ───────────────────────────────────────── */
+
+.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;
+}
+
+.fd-docs-content th {
+  background: var(--color-fd-muted);
+  font-weight: 600;
+}
+
+.fd-docs-content th,
+.fd-docs-content td {
+  padding: 0.625rem;
+  border-bottom: 1px solid var(--color-fd-border);
+}
+
+.fd-docs-content tr:last-child td {
+  border-bottom: none;
+}
+
+/* ─── Blockquotes ──────────────────────────────────────────────────── */
+
+.fd-docs-content blockquote {
+  border-left: 2px solid var(--color-fd-primary);
+  padding-left: 1rem;
+  color: var(--color-fd-foreground);
+  font-style: normal;
+}
+
+/* ─── Horizontal rule ──────────────────────────────────────────────── */
+
+.fd-docs-content hr {
+  border-color: var(--color-fd-border);
+}
+
+/* ─── Omni Command Palette (colorful theme) ─────────────────────── */
+
+.omni-content {
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-fd-border);
+  background: var(--color-fd-popover);
+  box-shadow:
+    0 24px 60px -12px rgba(180, 140, 20, 0.12),
+    0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+
+.omni-item-active {
+  background: color-mix(in srgb, var(--color-fd-primary) 15%, transparent);
+}
+
+.omni-highlight {
+  background: color-mix(in srgb, var(--color-fd-primary) 30%, transparent);
+  color: var(--color-fd-primary-foreground);
+}
+
+.omni-search-input:focus {
+  caret-color: var(--color-fd-primary);
+}