@farming-labs/theme 0.0.3-beta.2 → 0.0.3-beta.4

package/styles/pixel-border.css

@@ -150,20 +150,20 @@ code:not(pre code) {
   }
 }
 
-/* ─── 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%);
+/* ─── Sidebar (better-auth style) — light + dark ───────────────────── */
+/* Sidebar container: use theme variables for both modes */
+aside#nd-sidebar {
+  background: var(--color-fd-background);
+  border-color: var(--color-fd-border);
 }
 
 /* ── Full-width border separators between top-level items ─────────── */
-.dark aside .overscroll-contain > div {
+aside .overscroll-contain > div {
   margin-top: -22px;
 }
 
-.dark aside .overscroll-contain > div > a[data-active] {
-  border-top: 1px solid hsl(0 0% 12%);
+aside .overscroll-contain > div > a[data-active] {
+  border-top: 1px solid var(--color-fd-border);
   margin-left: -1rem;
   margin-right: -1rem;
   padding-left: 1rem;
@@ -171,112 +171,112 @@ code:not(pre code) {
   padding-bottom: 0.75rem;
 }
 
-.dark aside .overscroll-contain > div > div {
-  border-top: 1px solid hsl(0 0% 12%);
+aside .overscroll-contain > div > div {
+  border-top: 1px solid var(--color-fd-border);
   margin-left: -1rem;
   margin-right: -1rem;
   padding: 0 !important;
 }
 
-.dark aside .overscroll-contain > div > a[data-active]:first-child,
-.dark aside .overscroll-contain > div > div:first-child {
+aside .overscroll-contain > div > a[data-active]:first-child,
+aside .overscroll-contain > div > div:first-child {
   border-top: none;
 }
 
-.dark aside .overscroll-contain > div > a[data-active]:last-child,
-.dark aside .overscroll-contain > div > div:last-child {
-  border-bottom: 1px solid hsl(0 0% 12%);
+aside .overscroll-contain > div > a[data-active]:last-child,
+aside .overscroll-contain > div > div:last-child {
+  border-bottom: 1px solid var(--color-fd-border);
 }
 
 /* ── Sidebar links (all levels) ──────────────────────────────────── */
 
-.dark aside a[data-active] {
+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%);
+  color: var(--color-fd-muted-foreground);
   font-weight: 400;
   overflow: hidden;
   background-color: transparent !important;
 }
 
-.dark aside a[data-active="true"],
-.dark aside a[data-active="true"]:hover {
+aside a[data-active="true"],
+aside a[data-active="true"]:hover {
   background: transparent !important;
   background-color: transparent !important;
   color: var(--color-fd-primary) !important;
   font-weight: 600;
 }
 
-.dark aside a[data-active="false"]:hover {
+aside a[data-active="false"]:hover {
   background: transparent !important;
   background-color: transparent !important;
-  color: hsl(0 0% 80%);
+  color: var(--color-fd-foreground);
 }
 
 /* ── Child links inside collapsible folders ──────────────────────── */
 
-.dark aside div.overflow-hidden[data-state] a[data-active] {
+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;
+  color: var(--color-fd-muted-foreground) !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 {
+aside div.overflow-hidden[data-state] a[data-active="true"],
+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;
+aside div.overflow-hidden[data-state] a[data-active="false"]:hover {
+  color: var(--color-fd-foreground) !important;
 }
 
 /* ── Folder toggle buttons (section headers) ─────────────────────── */
 
-.dark aside button.text-fd-muted-foreground {
-  color: hsl(0 0% 90%);
+aside button.text-fd-muted-foreground {
+  color: var(--color-fd-foreground);
   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%);
+aside button.text-fd-muted-foreground:hover {
+  color: var(--color-fd-foreground);
 }
 
-.dark aside a[data-active="true"]::before {
+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;
 }
 
-.dark aside div.overflow-hidden[data-state]::before {
+aside div.overflow-hidden[data-state]::before {
   margin-left: 0.5rem !important;
   height: calc(100% + 20px) !important;
   margin-top: -25px !important;
 }
 
-.dark aside div[data-state="open"] > :last-child {
+aside div[data-state="open"] > :last-child {
   overflow: hidden;
 }
 
-/* ── Search button: full-width, border-y only ────────────────────── */
+/* ── Search button: full-width, border-y only (light + dark) ───────── */
 
-.dark aside button[class*="bg-fd-secondary"] {
+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-top: 1px solid var(--color-fd-border) !important;
+  border-bottom: 1px solid var(--color-fd-border) !important;
   border-radius: 0 !important;
-  color: hsl(0 0% 45%);
+  color: var(--color-fd-muted-foreground);
   font-size: 0.8125rem;
   padding: 0.5rem 0 !important;
   width: calc(100% + 2rem) !important;
@@ -286,45 +286,45 @@ code:not(pre code) {
   padding-right: 1rem !important;
 }
 
-.dark aside button[class*="bg-fd-secondary"]:hover {
-  background: hsl(0 0% 4%) !important;
-  color: hsl(0 0% 65%);
+aside button[class*="bg-fd-secondary"]:hover {
+  background: var(--color-fd-accent) !important;
+  color: var(--color-fd-foreground);
 }
 
-/* ── Theme toggle ────────────────────────────────────────────────── */
+/* ── Theme toggle in sidebar (light + dark) ───────────────────────── */
 
-.dark aside button[class*="rounded-full"] {
-  border-color: hsl(0 0% 12%);
+aside button[class*="rounded-full"] {
+  border-color: var(--color-fd-border);
 }
 
-/* ─── Tables: visible borders, rounded wrapper ────────────────────── */
+/* ─── Tables: visible borders, rounded-none (light + dark) ─────────── */
 
-.dark table {
-  border: 1px solid hsl(0 0% 15%);
+table {
+  border: 1px solid var(--color-fd-border);
   border-radius: 0 !important;
   overflow: hidden;
 }
 
-.dark th {
-  background: hsl(0 0% 6%);
-  color: hsl(0 0% 80%);
+th {
+  background: var(--color-fd-muted);
+  color: var(--color-fd-foreground);
   font-weight: 500;
-  border-color: hsl(0 0% 15%);
+  border-color: var(--color-fd-border);
 }
 
-.dark td {
-  border-color: hsl(0 0% 12%);
+td {
+  border-color: var(--color-fd-border);
 }
 
-.dark tr:last-child td {
+tr:last-child td {
   border-bottom: none;
 }
 
-/* ─── Code blocks: single border only ─────────────────────────────── */
+/* ─── Code blocks: single border, rounded-none (light + dark) ───────── */
 
 /* Target the fumadocs CodeBlock figure (shiki class) */
 figure.shiki {
-  border: 1px solid hsl(0 0% 15%) !important;
+  border: 1px solid var(--color-fd-border) !important;
   border-radius: 0 !important;
   overflow: hidden;
   box-shadow: none !important;
@@ -340,23 +340,23 @@ figure.shiki > div:first-child {
   border-radius: 0 !important;
 }
 
-/* ─── Tabs (package manager / code tabs) ──────────────────────────── */
+/* ─── Tabs (package manager / code tabs) — light + dark ────────────── */
 
-.dark [role="tablist"] {
+[role="tablist"] {
   border-radius: 0 !important;
 }
 
-.dark [role="tablist"] button,
-.dark [role="tab"] {
+[role="tablist"] button,
+[role="tab"] {
   border-radius: 0 !important;
 }
 
-.dark [role="tabpanel"] {
+[role="tabpanel"] {
   border-radius: 0 !important;
 }
 
 /* Tabs container */
-.dark div:has(> [role="tablist"]) {
+div:has(> [role="tablist"]) {
   border-radius: 0 !important;
 }
 
@@ -370,22 +370,22 @@ figure.shiki > div:first-child {
   padding: 0.125rem 0.375rem;
 } */
 
-/* ─── Callouts: visible border ────────────────────────────────────── */
+/* ─── Callouts: visible border (light + dark) ──────────────────────── */
 
-.dark [class*="bg-fd-card"] {
-  border-color: hsl(0 0% 15%);
+[class*="bg-fd-card"] {
+  border-color: var(--color-fd-border);
 }
 
-/* ─── Nav cards (prev/next): visible border ───────────────────────── */
+/* ─── Nav cards (prev/next): visible border, rounded-none ──────────── */
 
-.dark article a[class*="border"] {
-  border-color: hsl(0 0% 15%);
+article a[class*="border"] {
+  border-color: var(--color-fd-border);
   border-radius: 0 !important;
 }
 
-.dark article a[class*="border"]:hover {
-  background: hsl(0 0% 6%);
-  border-color: hsl(0 0% 22%);
+article a[class*="border"]:hover {
+  background: var(--color-fd-muted);
+  border-color: var(--color-fd-ring);
 }
 
 /* ─── Search dialog ───────────────────────────────────────────────── */
@@ -394,17 +394,17 @@ figure.shiki > div:first-child {
   border-radius: 0 !important;
 }
 
-/* ─── TOC right panel ─────────────────────────────────────────────── */
+/* ─── TOC right panel (light + dark) ───────────────────────────────── */
 
-.dark nav[class*="toc"],
-.dark [class*="fd-toc"] {
-  border-color: hsl(0 0% 12%);
+nav[class*="toc"],
+[class*="fd-toc"] {
+  border-color: var(--color-fd-border);
 }
 
-/* ─── Separator/Divider (hr) ──────────────────────────────────────── */
+/* ─── Separator/Divider (hr) — light + dark ─────────────────────────── */
 
-.dark hr {
-  border-color: hsl(0 0% 15%);
+hr {
+  border-color: var(--color-fd-border);
 }
 
 /* ─── Breadcrumb (pixel-border overrides) ─────────────────────────── */
@@ -475,6 +475,95 @@ figure.shiki > div:first-child {
   font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace)) !important;
 }
 
+/* model selector  */
+.fd-ai-model-select-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  overflow: visible;
+  margin-bottom: 6px;
+}
+
+.fd-ai-model-select-row--fm {
+  padding: 8px 12px 0;
+}
+
+.fd-ai-model-dropdown {
+  position: relative;
+  margin-left: auto;
+}
+
+.fd-ai-model-dropdown-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  font-size: 12px;
+  text-transform: uppercase;
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  color: var(--color-fd-muted-foreground, #71717a);
+  background: transparent;
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.12));
+  border-radius: var(--radius, 6px);
+  cursor: pointer;
+  transition: all 150ms;
+}
+
+.fd-ai-model-dropdown-btn:hover {
+  color: var(--color-fd-foreground, #e4e4e7);
+  border-color: var(--color-fd-border, rgba(255, 255, 255, 0.25));
+}
+
+.fd-ai-model-dropdown-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.fd-ai-model-dropdown-menu {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  right: 0;
+  z-index: 99999;
+  min-width: 220px;
+  padding: 4px;
+  background: var(--color-fd-popover, var(--color-fd-background, #0c0c0c));
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--radius, 8px);
+  box-shadow: 2px 2px 0 0 var(--color-fd-border, #262626);  
+  animation: fd-ai-fade-in 100ms ease-out;
+}
+
+
+.fd-ai-model-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  color: var(--color-fd-muted-foreground, #71717a);
+  padding: 6px 10px;
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  font-size: 11px;
+  background: transparent;
+  cursor: pointer;
+  transition: background 100ms;
+}
+
+.fd-ai-model-dropdown-item:hover {
+  background: var(--color-fd-accent, rgba(255, 255, 255, 0.06));
+}
+
+.fd-ai-model-dropdown-item[data-active="true"] {
+  color: var(--color-fd-primary, #6366f1);
+}
+
+.fd-ai-model-dropdown-label {
+  flex: 1;
+  text-align: left;
+}
+
 /* ─── AI Chat (pixel-border — zero radius, pixel-art, monospace) ── */
 
 .fd-ai-dialog {
@@ -611,7 +700,6 @@ figure.shiki > div:first-child {
   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%));
@@ -687,6 +775,49 @@ figure.shiki > div:first-child {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
 
+:root:not(.dark) .fd-ai-code-block {
+  background: #f4f4f5 !important;
+  padding: 0 !important;
+  box-shadow: 3px 3px 0 0 hsl(0 0% 75%);
+  --sh-class: #b45309;
+  --sh-identifier: #1f2937;
+  --sh-keyword: #7c3aed;
+  --sh-string: #0d9488;
+  --sh-property: #dc2626;
+  --sh-entity: #059669;
+  --sh-sign: #374151;
+  --sh-comment: #6b7280;
+  --sh-jsxliterals: #7c3aed;
+}
+.fd-ai-code-block pre {
+  padding-left: -10px !important;
+  padding-right: -10px !important;
+  padding-bottom: 2px !important;
+}
+
+:root:not(.dark) .fd-ai-code-header {
+  border-bottom-color: hsl(0 0% 80%);
+  background: color-mix(in srgb, #e4e4e7 90%, transparent);
+}
+
+:root:not(.dark) .fd-ai-code-lang {
+  color: #52525b;
+}
+
+:root:not(.dark) .fd-ai-code-copy {
+  color: #52525b;
+  border-color: hsl(0 0% 75%);
+}
+
+:root:not(.dark) .fd-ai-code-copy:hover {
+  color: #18181b;
+  background: color-mix(in srgb, #d4d4d8 70%, transparent);
+}
+
+:root:not(.dark) .fd-ai-code-block code {
+  color: #1f2937;
+}
+
 /* ─── Omni Command Palette (pixel-border theme) ─────────────────── */
 
 .omni-content {