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

package/styles/greentree.css

@@ -42,6 +42,13 @@
   --color-fd-accent: #1a1d1c;
   --color-fd-accent-foreground: #e5e7e6;
   --color-fd-border: #2a2d2c;
+
+  --fd-sidebar-bg: #0a0d0d;
+  --fd-sidebar-card-bg: #1a1d1c;
+  --fd-sidebar-active-bg: #284d2b;
+  --fd-sidebar-active-text: #26bd6c;
+  --fd-sidebar-active-line: #26bd6c;
+  --fd-sidebar-indent-line: #2a2d2c;
 }
 
 /* ─── Typography — Inter, Mintlify-style values ──────────────── */
@@ -63,79 +70,202 @@ 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;
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * SIDEBAR — GreenTree: no border, green active background
  * ═══════════════════════════════════════════════════════════════════ */
 
 aside,
 #nd-sidebar,
 aside#nd-sidebar,
-#nd-docs-layout aside {
+#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);
 }
 
-aside a[data-active] {
+.dark .fd-sidebar {
+  background: var(--color-fd-background);
+}
+
+.dark .fd-sidebar .fd-sidebar-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-fd-foreground);
+}
+
+.dark .fd-sidebar .fd-sidebar-search-btn {
+  background: var(--color-fd-secondary) !important;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 8px;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.875rem;
+}
+
+.dark .fd-sidebar .fd-sidebar-search-btn:hover {
+  background: var(--color-fd-accent) !important;
+}
+
+.dark .fd-sidebar .fd-sidebar-search-btn kbd {
+  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: 12px;
+  line-height: 1;
+}
+
+/* Nav padding */
+.fd-sidebar .fd-sidebar-nav {
+  padding: 8px 12px;
+}
+
+/* All sidebar links — 14px, 500 weight, 6px 10px padding */
+aside a[data-active],
+.fd-sidebar .fd-sidebar-link {
   font-size: 0.875rem;
   line-height: 1.5;
   font-weight: 500;
   padding: 6px 10px;
   border-radius: 8px;
   color: var(--color-fd-muted-foreground);
-  transition:
-    color 150ms,
-    background-color 150ms;
+  transition: color 150ms, background-color 150ms;
 }
 
-aside a[data-active]:hover {
+.dark .fd-sidebar .fd-sidebar-link {
+  color: var(--color-fd-muted-foreground);
+}
+
+aside a[data-active]:hover,
+.fd-sidebar .fd-sidebar-link:hover {
   color: var(--color-fd-foreground);
   background: var(--color-fd-accent);
 }
 
-aside a[data-active="true"] {
-  color: var(--color-fd-primary);
-  font-weight: 600;
-  background: rgba(13, 147, 115, 0.08);
-  background-color: rgba(13, 147, 115, 0.08);
+.dark .fd-sidebar .fd-sidebar-link:hover {
+  color: var(--color-fd-foreground);
+  background: var(--color-fd-accent);
 }
 
-.dark aside a[data-active="true"] {
-  background: rgba(38, 189, 108, 0.1);
-  background-color: rgba(38, 189, 108, 0.1);
-  color: var(--color-fd-primary);
+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: rgba(13, 147, 115, 0.08) !important;
+  background-color: rgba(13, 147, 115, 0.08) !important;
 }
 
-aside a[data-active="true"]::before {
-  background-color: transparent;
-  width: 0;
+.dark .fd-sidebar .fd-sidebar-link-active,
+.dark .fd-sidebar .fd-sidebar-link[data-active="true"] {
+  color: var(--color-fd-primary) !important;
+  background: rgba(38, 189, 108, 0.1) !important;
+  background-color: rgba(38, 189, 108, 0.1) !important;
 }
 
-aside a[data-active].w-full {
+.fd-sidebar-folder-content .fd-sidebar-link-active::before,
+.fd-sidebar-folder-content .fd-sidebar-link[data-active="true"]::before {
+  content: "" !important;
+  display: block !important;
+  position: absolute !important;
+  left: -9px !important;
+  top: 20% !important;
+  bottom: 20% !important;
+  width: 3px !important;
+  border-radius: 0 2px 2px 0 !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: rgba(13, 147, 115, 0.08) !important;
+  background-color: rgba(13, 147, 115, 0.08) !important;
+}
+
+.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 {
+  margin: 2px 0;
+  padding: 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  overflow: visible;
+}
+.fd-sidebar .fd-sidebar-folder {
+  border: none;
+}
+.fd-page-body .fd-table-wrapper {
+  border: none !important;
+}
+
+.dark .fd-sidebar .fd-sidebar-folder.fd-sidebar-first-item {
+  margin-top: 0;
+}
+
+aside a[data-active].w-full,
+.fd-sidebar .fd-sidebar-folder-trigger {
   font-weight: 600;
   font-size: 0.875rem;
   color: var(--color-fd-foreground);
-  padding-top: 1rem;
-  padding-bottom: 0.25rem;
-  margin-top: 0.5rem;
+  padding: 4px 10px 4px 10px;
+  margin-top: 0;
+  border: none;
   background: transparent !important;
 }
 
-aside a[data-active].w-full:first-child {
+.dark .fd-sidebar .fd-sidebar-folder-trigger {
+  color: var(--color-fd-muted-foreground);
+  border: none;
+}
+
+.fd-sidebar .fd-sidebar-folder-trigger:hover {
+  background: var(--color-fd-accent) !important;
+
+}
+
+.dark .fd-sidebar .fd-sidebar-folder-trigger:hover {
+  background: var(--color-fd-accent) !important;
+}
+
+aside a[data-active].w-full:first-child,
+.fd-sidebar-nav > .fd-sidebar-folder.fd-sidebar-first-item > .fd-sidebar-folder-trigger {
   margin-top: 0;
 }
 
-aside a[data-active="true"].w-full {
-  color: var(--color-fd-primary);
+.fd-sidebar .fd-sidebar-top-link {
+  margin-top: 0;
+  padding: 6px 10px;
+}
+
+.fd-sidebar .fd-sidebar-top-link.fd-sidebar-first-item {
+  margin-top: 0;
+}
+
+aside a[data-active="true"].w-full,
+.fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active,
+.fd-sidebar .fd-sidebar-top-link[data-active="true"] {
+  color: var(--color-fd-primary) !important;
+}
+
+.dark .fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active,
+.dark .fd-sidebar .fd-sidebar-top-link[data-active="true"] {
+  color: var(--color-fd-primary) !important;
 }
 
 aside div.w-full:not([role]) {
@@ -147,7 +277,30 @@ aside div.w-full:not([role]) {
   margin-top: 0.5rem;
 }
 
-aside button[class*="bg-fd-secondary"] {
+.fd-sidebar .fd-sidebar-folder-content {
+  position: relative;
+  padding-left: 16px;
+  margin-left: 8px;
+  margin-top: -12px;
+}
+
+.fd-sidebar .fd-sidebar-folder-content::before {
+  content: "";
+  position: absolute;
+  left: 8px;
+  top: 8px;
+  height: 90%;
+  bottom: 4px;
+  width: 1px;
+  background: var(--color-fd-border);
+}
+
+.dark .fd-sidebar .fd-sidebar-folder-content::before {
+  background: var(--fd-sidebar-indent-line, var(--color-fd-border));
+}
+
+aside button[class*="bg-fd-secondary"],
+.dark .fd-sidebar .fd-sidebar-search-btn {
   background: transparent;
   border: 1px solid var(--color-fd-border);
   border-radius: 8px;
@@ -155,8 +308,10 @@ aside button[class*="bg-fd-secondary"] {
 }
 
 aside .border-t,
-aside [class*="border-t"] {
-  border-top-color: transparent;
+aside [class*="border-t"],
+.fd-sidebar .fd-sidebar-footer,
+.fd-sidebar .fd-sidebar-footer-custom {
+  border-top: 1px solid var(--color-fd-border);
 }
 
 /* ═══════════════════════════════════════════════════════════════════
@@ -236,6 +391,24 @@ nav[class*="header"] {
   margin: 1rem 0;
 }
 
+.fd-page-actions,
+[data-page-actions] {
+  gap: 0 !important;
+  margin-right: 10px;
+}
+/* 
+.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-docs-content hr {
   border-color: var(--color-fd-border);
 }
@@ -373,21 +546,30 @@ details > :not(summary) {
   padding: 0.75rem 1rem;
 }
 
-#nd-toc a[data-active="true"] {
+.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;
 }
@@ -436,13 +618,25 @@ details > :not(summary) {
   font-size: 0.8125rem;
 }
 
+.fd-page-action-dropdown {
+  position: relative;
+}
+
 .fd-page-action-menu {
   border-radius: 10px;
+  border: 1px solid var(--color-fd-border);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  background: var(--color-fd-popover);
 }
 
 .fd-page-action-menu-item {
   border-radius: 6px;
+  color: var(--color-fd-foreground);
+}
+
+.fd-page-action-menu-item:hover {
+  background: var(--color-fd-accent);
+  color: var(--color-fd-accent-foreground);
 }
 
 .fd-ai-dialog {
@@ -490,11 +684,86 @@ details > :not(summary) {
   filter: brightness(1.1);
 }
 
-.fd-ai-suggestion,
+/* Custom Ask AI trigger — same as fd-ai-floating-btn for theme */
+.dark .fd-ai-floating-trigger .ask-ai-trigger {
+  font-family: var(--fd-font-sans, inherit);
+  border-radius: 999px !important;
+  background: var(--color-fd-primary) !important;
+  color: #fff !important;
+  box-shadow: 0 2px 8px rgba(38, 189, 108, 0.25) !important;
+  border: none !important;
+}
+
+.dark .fd-ai-floating-trigger .ask-ai-trigger:hover {
+  filter: brightness(1.1);
+}
+
+:root:not(.dark) .fd-ai-floating-trigger .ask-ai-trigger {
+  font-family: var(--fd-font-sans, inherit);
+  border-radius: 999px !important;
+  background: var(--color-fd-primary) !important;
+  color: #fff !important;
+  box-shadow: 0 2px 8px rgba(13, 147, 115, 0.2) !important;
+  border: none !important;
+}
+
+:root:not(.dark) .fd-ai-floating-trigger .ask-ai-trigger:hover {
+  filter: brightness(1.1);
+}
+
+.fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger {
+  border-radius: 999px !important;
+  background: var(--color-fd-primary) !important;
+  color: #fff !important;
+  border: none !important;
+}
+
+.fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger:hover {
+  filter: brightness(1.1);
+}
+
+.fd-ai-suggestion {
+  border-radius: 10px;
+}
+.dark .fd-ai-suggestion:hover {
+  border: 1px solid var(--color-fd-primary/50);
+}
+
 .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: 20px;
+}
+
+.fd-ai-fm-msg-content table  {
+  border-radius: 20px;
+}
+.fd-ai-code-copy {
+  border-radius: 6px;
+}
+
 .fd-sidebar-search-ai-row {
   display: flex;
   gap: 8px;
@@ -519,7 +788,7 @@ details > :not(summary) {
 }
 
 .fd-sidebar-search-btn:hover {
-  background: var(--color-fd-accent);
+  background: var(--color-fd-accent) ;
 }
 
 .fd-sidebar-search-btn svg {
@@ -593,7 +862,6 @@ details > :not(summary) {
 
 .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,