@farming-labs/astro-theme 0.0.3-beta.3 → 0.0.3-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/astro-theme",
-  "version": "0.0.3-beta.3",
+  "version": "0.0.3-beta.5",
   "description": "Astro UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "astro",
@@ -79,8 +79,8 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.3-beta.3",
-    "@farming-labs/astro": "0.0.3-beta.3"
+    "@farming-labs/docs": "0.0.3-beta.5",
+    "@farming-labs/astro": "0.0.3-beta.5"
   },
   "peerDependencies": {
     "astro": ">=4.0.0"

package/src/components/DocsPage.astro

@@ -281,14 +281,46 @@ const parentUrl = segments.length >= 2
 
       const activeSet = new Set();
       let tocUpdateScheduled = false;
+      let lastStableId = null;
+      let scrollRafId = 0;
+      const ACTIVE_ZONE_TOP = 120;
+      const HYSTERESIS_PX = 65; /* same as Nuxt/Svelte — keeps TOC highlight smooth (no flicker) */
 
-      function scheduleTocActiveUpdate() {
+      function getDistanceToZone(id) {
+        const el = document.getElementById(id);
+        if (!el) return Infinity;
+        const rect = el.getBoundingClientRect();
+        const mid = rect.top + rect.height / 2;
+        return Math.abs(mid - ACTIVE_ZONE_TOP);
+      }
+
+      function getClosestId() {
+        let bestId = null;
+        let bestDistance = Infinity;
+        tocItems.forEach(function(item) {
+          const d = getDistanceToZone(item.id);
+          if (d < bestDistance) {
+            bestDistance = d;
+            bestId = item.id;
+          }
+        });
+        return bestId;
+      }
+
+      function isInView(id) {
+        const el = document.getElementById(id);
+        if (!el) return false;
+        const rect = el.getBoundingClientRect();
+        return rect.top < window.innerHeight && rect.bottom > 0;
+      }
+
+      function applyActiveSet() {
         if (tocUpdateScheduled) return;
         tocUpdateScheduled = true;
-        requestAnimationFrame(() => {
+        requestAnimationFrame(function() {
           tocUpdateScheduled = false;
           if (isClerk) {
-            tocList.querySelectorAll('.fd-toc-clerk-link').forEach(link => {
+            tocList.querySelectorAll('.fd-toc-clerk-link').forEach(function(link) {
               const id = link.getAttribute('href')?.slice(1);
               if (activeSet.has(id)) {
                 link.setAttribute('data-active', 'true');
@@ -298,7 +330,7 @@ const parentUrl = segments.length >= 2
             });
             if (typeof updateThumb === 'function') updateThumb(activeSet);
           } else {
-            tocList.querySelectorAll('.fd-toc-link').forEach(link => {
+            tocList.querySelectorAll('.fd-toc-link').forEach(function(link) {
               const id = link.getAttribute('href')?.slice(1);
               link.classList.toggle('fd-toc-link-active', activeSet.has(id));
             });
@@ -306,18 +338,50 @@ const parentUrl = segments.length >= 2
         });
       }
 
-      const observer = new IntersectionObserver((entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            activeSet.add(entry.target.id);
-          } else {
-            activeSet.delete(entry.target.id);
-          }
+      function updateTocFromScroll() {
+        scrollRafId = 0;
+        const newId = getClosestId();
+        if (!newId) {
+          activeSet.clear();
+          applyActiveSet();
+          return;
+        }
+        if (lastStableId === null) {
+          lastStableId = newId;
+          activeSet.clear();
+          activeSet.add(newId);
+          applyActiveSet();
+          return;
         }
-        scheduleTocActiveUpdate();
-      }, { rootMargin: '-80px 0px -80% 0px' });
+        if (newId === lastStableId) {
+          activeSet.clear();
+          activeSet.add(newId);
+          applyActiveSet();
+          return;
+        }
+        const newDist = getDistanceToZone(newId);
+        const currentDist = getDistanceToZone(lastStableId);
+        const switchToNew = newDist <= currentDist - HYSTERESIS_PX || !isInView(lastStableId);
+        if (switchToNew) lastStableId = newId;
+        activeSet.clear();
+        activeSet.add(lastStableId);
+        applyActiveSet();
+      }
 
-      headings.forEach(el => observer.observe(el));
+      function scheduleTocFromScroll() {
+        if (scrollRafId !== 0) return;
+        scrollRafId = requestAnimationFrame(updateTocFromScroll);
+      }
+
+      window.addEventListener('scroll', scheduleTocFromScroll, { passive: true, capture: true });
+      document.addEventListener('scroll', scheduleTocFromScroll, { passive: true, capture: true });
+
+      var initialId = getClosestId();
+      if (initialId) {
+        lastStableId = initialId;
+        activeSet.add(initialId);
+      }
+      applyActiveSet();
 
       if (tocAside) tocAside.setAttribute('data-toc-ready', 'true');
     }

package/src/components/SearchDialog.astro

@@ -130,6 +130,8 @@ const { config = null } = Astro.props;
     if (dialog) {
       dialog.style.display = "block";
       document.body.style.overflow = "hidden";
+      bindListboxDelegation();
+      ensureListboxClickBound();
       setTimeout(function () {
         var input = getInput();
         if (input) { input.value = ""; input.focus(); }
@@ -237,49 +239,95 @@ const { config = null } = Astro.props;
     scrollActiveIntoView();
   }
 
+  function navigateToUrl(url, newTab) {
+    if (!url) return;
+    if (newTab || url.startsWith("http")) {
+      try {
+        window.open(url, "_blank", "noopener,noreferrer");
+      } catch (err) {
+        window.location.assign(url);
+      }
+    } else {
+      window.location.assign(url);
+    }
+  }
+
+  function handleOmniItemClick(e) {
+    var dialog = getDialog();
+    if (!dialog || dialog.style.display === "none") return;
+    var withinDialog = e.target.closest && e.target.closest("#fd-search-dialog");
+    if (!withinDialog) return;
+
+    var ext = e.target.closest && e.target.closest("a.omni-item-ext");
+    if (ext) {
+      e.preventDefault();
+      e.stopPropagation();
+      var url = ext.getAttribute("data-ext-url") || ext.getAttribute("href");
+      navigateToUrl(url, true);
+      return;
+    }
+    var row = e.target.closest && e.target.closest(".omni-item[data-url]");
+    if (row) {
+      e.preventDefault();
+      e.stopPropagation();
+      var url = row.getAttribute("data-url");
+      if (!url) return;
+      var labelEl = row.querySelector(".omni-item-label");
+      var label = labelEl ? labelEl.textContent : url;
+      saveRecent({ id: url, label: label, url: url });
+      closeDialog();
+      navigateToUrl(url, url.startsWith("http"));
+    }
+  }
+
+  function handleOmniItemMouseOver(e) {
+    var dialog = getDialog();
+    if (!dialog || dialog.style.display === "none") return;
+    var row = e.target.closest && e.target.closest(".omni-item[data-url]");
+    if (row) {
+      var container = row.closest("#fd-omni-recent-items") || row.closest("#fd-omni-docs-items");
+      if (container) {
+        var items = container.querySelectorAll(".omni-item[data-url]");
+        var idx = Array.prototype.indexOf.call(items, row);
+        if (idx >= 0) { activeIndex = idx; render(); }
+      }
+    }
+  }
+
   function bindListboxDelegation() {
+    if (document.body.hasAttribute("data-fd-omni-click-delegation")) return;
+    document.body.setAttribute("data-fd-omni-click-delegation", "true");
+    document.addEventListener("click", handleOmniItemClick, true);
+    document.addEventListener("mouseover", handleOmniItemMouseOver, true);
+  }
+
+  function ensureListboxClickBound() {
     var listbox = getListbox();
-    if (!listbox || listbox._fdOmniBound) return;
-    listbox._fdOmniBound = true;
-    listbox.addEventListener("click", function (e) {
+    if (!listbox || listbox._fdOmniClickBound) return;
+    listbox._fdOmniClickBound = true;
+    function onListboxClick(e) {
       var ext = e.target.closest && e.target.closest("a.omni-item-ext");
       if (ext) {
         e.preventDefault();
         e.stopPropagation();
         var url = ext.getAttribute("data-ext-url") || ext.getAttribute("href");
-        if (url) {
-          try {
-            window.open(url, "_blank", "noopener,noreferrer");
-          } catch (err) {
-            window.location.href = url;
-          }
-        }
+        navigateToUrl(url, true);
         return;
       }
       var row = e.target.closest && e.target.closest(".omni-item[data-url]");
       if (row) {
         e.preventDefault();
+        e.stopPropagation();
         var url = row.getAttribute("data-url");
         if (!url) return;
         var labelEl = row.querySelector(".omni-item-label");
         var label = labelEl ? labelEl.textContent : url;
         saveRecent({ id: url, label: label, url: url });
-        if (url.startsWith("http")) window.open(url, "_blank", "noopener,noreferrer");
-        else window.location.href = url;
         closeDialog();
+        navigateToUrl(url, url.startsWith("http"));
       }
-    });
-    listbox.addEventListener("mouseover", function (e) {
-      var row = e.target.closest && e.target.closest(".omni-item[data-url]");
-      if (row) {
-        var container = row.closest("#fd-omni-recent-items") || row.closest("#fd-omni-docs-items");
-        if (container) {
-          var items = container.querySelectorAll(".omni-item[data-url]");
-          var idx = Array.prototype.indexOf.call(items, row);
-          if (idx >= 0) { activeIndex = idx; render(); }
-        }
-      }
-    });
+    }
+    listbox.addEventListener("click", onListboxClick, true);
   }
 
   function scrollActiveIntoView() {

package/styles/greentree.css

@@ -71,7 +71,9 @@ h3 {
   font-weight: 600;
   line-height: 1.3;
 }
-
+.fd-docs-content {
+  border: none !important;
+}
 .fd-docs-content p {
   font-size: 1rem;
   line-height: 1.7;
@@ -86,40 +88,38 @@ aside#nd-sidebar,
 #nd-docs-layout aside,
 .fd-sidebar {
   border: none;
-  border-right: none;
+  border-right: 1px solid var(--color-fd-border);
   border-left: none;
-  border-color: transparent;
   box-shadow: none;
   background: var(--color-fd-background);
 }
 
 .dark .fd-sidebar {
-  background: var(--fd-sidebar-bg, #1a1a1a);
+  background: var(--color-fd-background);
 }
 
 .dark .fd-sidebar .fd-sidebar-title {
   font-size: 1.125rem;
   font-weight: 600;
-  color: #e0e0e0;
+  color: var(--color-fd-foreground);
 }
 
-/* Search bar — rounded, darker grey background, ⌘ K badges */
 .dark .fd-sidebar .fd-sidebar-search-btn {
-  background: var(--fd-sidebar-card-bg, #252525) !important;
-  border: 1px solid var(--fd-sidebar-indent-line, #3c3c3c);
+  background: var(--color-fd-secondary) !important;
+  border: 1px solid var(--color-fd-border);
   border-radius: 8px;
-  color: #a0a0a0;
+  color: var(--color-fd-muted-foreground);
   font-size: 0.875rem;
 }
 
 .dark .fd-sidebar .fd-sidebar-search-btn:hover {
-  background: #2d2d2d !important;
+  background: var(--color-fd-accent) !important;
 }
 
 .dark .fd-sidebar .fd-sidebar-search-btn kbd {
-  background: #404040 !important;
-  border-color: #3c3c3c;
-  color: #a0a0a0;
+  background: var(--color-fd-muted) !important;
+  border-color: var(--color-fd-border);
+  color: var(--color-fd-muted-foreground);
   border-radius: 4px;
   padding: 2px 6px;
   font-size: 11px;
@@ -135,7 +135,7 @@ aside a[data-active],
 .fd-sidebar .fd-sidebar-link {
   font-size: 0.875rem;
   line-height: 1.5;
-  font-weight: 400;
+  font-weight: 500;
   padding: 6px 10px;
   border-radius: 8px;
   color: var(--color-fd-muted-foreground);
@@ -143,7 +143,7 @@ aside a[data-active],
 }
 
 .dark .fd-sidebar .fd-sidebar-link {
-  color: #e0e0e0;
+  color: var(--color-fd-muted-foreground);
 }
 
 aside a[data-active]:hover,
@@ -153,69 +153,50 @@ aside a[data-active]:hover,
 }
 
 .dark .fd-sidebar .fd-sidebar-link:hover {
-  color: #e0e0e0;
-  background: #2d2d2d;
+  color: var(--color-fd-foreground);
+  background: var(--color-fd-accent);
 }
 
+/* Active sidebar item — green tinted background + left highlight line */
 aside a[data-active="true"],
 .fd-sidebar .fd-sidebar-link-active,
 .fd-sidebar .fd-sidebar-link[data-active="true"] {
+  position: relative !important;
   color: var(--color-fd-primary) !important;
   font-weight: 600 !important;
-  background: transparent !important;
-  background-color: transparent !important;
+  background: rgba(13, 147, 115, 0.08) !important;
+  background-color: rgba(13, 147, 115, 0.08) !important;
 }
 
 .dark .fd-sidebar .fd-sidebar-link-active,
 .dark .fd-sidebar .fd-sidebar-link[data-active="true"] {
-  color: var(--fd-sidebar-active-text, #50c878) !important;
-  background: transparent !important;
-  background-color: transparent !important;
+  color: var(--color-fd-primary) !important;
+  background: rgba(38, 189, 108, 0.1) !important;
+  background-color: rgba(38, 189, 108, 0.1) !important;
 }
 
 .fd-sidebar-folder-content .fd-sidebar-link-active::before,
 .fd-sidebar-folder-content .fd-sidebar-link[data-active="true"]::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background: var(--fd-sidebar-active-line, #50c878);
-  border-radius: 0;
-}
-
-.dark .fd-sidebar-folder-content .fd-sidebar-link-active::before,
-.dark .fd-sidebar-folder-content .fd-sidebar-link[data-active="true"]::before {
-  background: var(--fd-sidebar-active-line, #50c878);
+  content: "" !important;
+  display: block !important;
+  position: absolute !important;
+  left: -9px !important;
+  top: 20% !important;
+  bottom: 20% !important;
+  width: 3px !important;
+  background: var(--color-fd-primary) !important;
 }
 
 .fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active,
 .fd-sidebar .fd-sidebar-top-link[data-active="true"] {
-  background: transparent !important;
-  background-color: transparent !important;
+  background: rgba(13, 147, 115, 0.08) !important;
+  background-color: rgba(13, 147, 115, 0.08) !important;
 }
 
-.fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active::before,
-.fd-sidebar .fd-sidebar-top-link[data-active="true"]::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 25%;
-  bottom: 25%;
-  width: 2px;
-  background: var(--color-fd-primary);
-  border-radius: 1px;
-}
-
-.dark .fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active::before,
-.dark .fd-sidebar .fd-sidebar-top-link[data-active="true"]::before {
-  background: var(--fd-sidebar-active-line, #50c878);
-}
-
-aside a[data-active="true"]::before {
-  background-color: transparent;
-  width: 0;
+.dark .fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active,
+.dark .fd-sidebar .fd-sidebar-top-link[data-active="true"] {
+  background: rgba(38, 189, 108, 0.1) !important;
+  background-color: rgba(38, 189, 108, 0.1) !important;
 }
 
 .dark .fd-sidebar .fd-sidebar-folder {
@@ -236,14 +217,14 @@ aside a[data-active].w-full,
   font-weight: 600;
   font-size: 0.875rem;
   color: var(--color-fd-foreground);
-  padding: 7px 10px 8px 10px;
+  padding: 4px 10px 4px 10px;
   margin-top: 0;
   border: none;
   background: transparent !important;
 }
 
 .dark .fd-sidebar .fd-sidebar-folder-trigger {
-  color: #e0e0e0;
+  color: var(--color-fd-muted-foreground);
 }
 
 .fd-sidebar .fd-sidebar-folder-trigger:hover {
@@ -251,7 +232,7 @@ aside a[data-active].w-full,
 }
 
 .dark .fd-sidebar .fd-sidebar-folder-trigger:hover {
-  background: #2d2d2d !important;
+  background: var(--color-fd-accent) !important;
 }
 
 aside a[data-active].w-full:first-child,
@@ -277,7 +258,7 @@ aside a[data-active="true"].w-full,
 
 .dark .fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active,
 .dark .fd-sidebar .fd-sidebar-top-link[data-active="true"] {
-  color: var(--fd-sidebar-active-text, #50c878) !important;
+  color: var(--color-fd-primary) !important;
 }
 
 aside div.w-full:not([role]) {
@@ -293,14 +274,15 @@ aside div.w-full:not([role]) {
   position: relative;
   padding-left: 16px;
   margin-left: 8px;
-  margin-top: 2px;
+  margin-top: -12px;
 }
 
 .fd-sidebar .fd-sidebar-folder-content::before {
   content: "";
   position: absolute;
-  left: 4px;
-  top: 4px;
+  left: 8px;
+  top: 8px;
+  height: 90%;
   bottom: 4px;
   width: 1px;
   background: var(--color-fd-border);
@@ -322,7 +304,7 @@ aside .border-t,
 aside [class*="border-t"],
 .fd-sidebar .fd-sidebar-footer,
 .fd-sidebar .fd-sidebar-footer-custom {
-  border-top-color: transparent;
+  border-top: 1px solid var(--color-fd-border);
 }
 
 /* ═══════════════════════════════════════════════════════════════════
@@ -369,7 +351,6 @@ nav[class*="header"] {
   border-spacing: 0;
   background: var(--color-fd-card);
   border-radius: 8px;
-  border: 1px solid var(--color-fd-border);
   overflow: hidden;
   width: 100%;
 }
@@ -393,6 +374,10 @@ nav[class*="header"] {
 .fd-docs-content tr:last-child td {
   border-bottom: none;
 }
+.fd-last-modified-below-title p {
+  font-size: 0.65rem;
+  color: var(--color-fd-muted-foreground);
+}
 
 .fd-docs-content blockquote {
   border-left: 3px solid var(--color-fd-primary);
@@ -402,6 +387,24 @@ nav[class*="header"] {
   margin: 1rem 0;
 }
 
+.fd-page-actions, [data-page-actions] {
+  gap: 0 !important;
+}
+
+.fd-page-actions .fd-page-action-btn:nth-child(2) {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.fd-page-actions, [data-page-actions] .fd-page-action-btn:first-child {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-left: none !important;
+}
+/* .fd-page-actions > :first-child > .fd-page-action-btn {
+  border-right: none !important;
+  background: red !important;
+} */
 .fd-docs-content hr {
   border-color: var(--color-fd-border);
 }
@@ -539,21 +542,31 @@ details > :not(summary) {
   padding: 0.75rem 1rem;
 }
 
-#nd-toc a[data-active="true"] {
+/* TOC — use .fd-toc (matches layout); transition reduces flash when scroll spy toggles active */
+.fd-toc .fd-toc-link,
+.fd-toc .fd-toc-clerk-link {
+  transition: color 0.2s ease;
+}
+
+.fd-toc .fd-toc-link-active,
+.fd-toc .fd-toc-link[data-active="true"],
+.fd-toc .fd-toc-clerk-link[data-active="true"] {
   color: var(--color-fd-primary);
   font-weight: 500;
 }
 
-#nd-toc a[data-active="false"] {
+.fd-toc .fd-toc-link:not(.fd-toc-link-active):not([data-active="true"]),
+.fd-toc .fd-toc-clerk-link:not([data-active="true"]) {
   color: var(--color-fd-muted-foreground);
 }
 
-#nd-toc a {
+.fd-toc .fd-toc-link,
+.fd-toc .fd-toc-clerk-link {
   font-size: 0.875rem;
   line-height: 1.3;
 }
 
-#nd-toc h3 {
+.fd-toc .fd-toc-title {
   font-size: 0.875rem;
   font-weight: 500;
 }
@@ -591,6 +604,7 @@ details > :not(summary) {
 }
 
 .fd-page-description {
+  margin-bottom: 1rem;
   font-size: 1rem;
   line-height: 1.7;
   color: var(--color-fd-muted-foreground);
@@ -692,11 +706,42 @@ details > :not(summary) {
   filter: brightness(1.1);
 }
 
-.fd-ai-suggestion,
+.fd-ai-suggestion {
+  border-radius: 10px;
+}
+
 .fd-ai-result {
   border-radius: 10px;
 }
 
+.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;
+}
+
+.fd-ai-code-block {
+  border-radius: 10px;
+}
+
+.fd-ai-code-copy {
+  border-radius: 6px;
+}
+
 .fd-sidebar-search-ai-row {
   display: flex;
   gap: 8px;
@@ -773,54 +818,7 @@ details > :not(summary) {
   height: 16px;
 }
 
-.fd-page-actions {
-  display: flex;
-  gap: 0;
-  align-items: stretch;
-}
-
-.fd-page-action-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--color-fd-muted-foreground);
-  background: transparent;
-  border: 1px solid var(--color-fd-border);
-  cursor: pointer;
-  transition:
-    background-color 150ms,
-    color 150ms;
-  white-space: nowrap;
-}
-
-.fd-page-action-btn:hover {
-  background: var(--color-fd-accent);
-  color: var(--color-fd-foreground);
-}
-
-.fd-page-actions .fd-page-action-btn:first-child {
-  border-radius: 8px 0 0 8px;
-  border-right: none;
-}
-
-.fd-page-actions .fd-page-action-dropdown:last-child .fd-page-action-btn,
-.fd-page-actions > .fd-page-action-btn:last-child {
-  border-radius: 0 8px 8px 0;
-  border-left: 1px solid var(--color-fd-border);
-  padding: 6px 8px;
-}
-
-.fd-page-actions .fd-page-action-btn:only-child {
-  border-radius: 8px;
-  border: 1px solid var(--color-fd-border);
-}
-
-.fd-page-action-dropdown {
-  position: relative;
-}
+/* Page actions — greentree style overrides on top of Astro base layout */
 
 .fd-sidebar::-webkit-scrollbar {
   width: 4px;

package/styles/pixel-border.css

@@ -705,3 +705,41 @@ code:not(pre code) {
 .fd-ai-code-block code {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
+
+/* Light mode: AI code blocks — light bg + dark text + visible pixel border */
+:root:not(.dark) .fd-ai-code-block {
+  background: #f4f4f5 !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;
+}
+
+: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;
+}