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

package/styles/colorful.css

@@ -84,6 +84,57 @@
   }
 }
 
+/* ─── Omni Command Palette — colorful theme ────────────────────────── */
+
+.omni-content {
+  border-radius: 0.75rem;
+}
+
+.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);
+}
+
+.omni-search-input:focus {
+  caret-color: var(--color-fd-primary);
+}
+
+/* ─── Page Actions — colorful theme ────────────────────────────────── */
+
+.fd-page-action-btn {
+  border-radius: 0.375rem !important;
+  font-size: 0.8125rem !important;
+  letter-spacing: normal !important;
+  box-shadow: none !important;
+  text-transform: capitalize !important;
+  font-family: var(--fd-font-sans, ui-sans-serif, system-ui, sans-serif) !important;
+}
+
+.fd-page-action-dropdown {
+  position: relative !important;
+}
+
+.fd-page-action-menu {
+  border-radius: 0.5rem !important;
+  border: 1px solid var(--color-fd-border) !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
+  background: var(--color-fd-popover) !important;
+}
+
+.fd-page-action-menu-item {
+  border-radius: 0.25rem !important;
+  font-size: 0.8125rem !important;
+  color: var(--color-fd-foreground) !important;
+}
+
+.fd-page-action-menu-item:hover {
+  background: var(--color-fd-accent) !important;
+  color: var(--color-fd-accent-foreground) !important;
+}
+
 /* ─── Page nav cards ───────────────────────────────────────────────── */
 
 .fd-page-nav-card {
@@ -148,3 +199,24 @@
 .fd-docs-content hr {
   border-color: var(--color-fd-border);
 }
+
+/* ─── Ask AI button (floating + custom trigger) — sync with Next.js ───── */
+
+.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-floating-trigger .ask-ai-trigger {
+  font-family: var(--fd-font-sans, inherit);
+  border-radius: 26px !important;
+  box-shadow: 0 8px 32px rgba(180, 140, 20, 0.3) !important;
+}
+
+.fd-ai-floating-trigger .ask-ai-trigger:hover {
+  box-shadow: 0 10px 40px rgba(180, 140, 20, 0.4);
+}

package/styles/darksharp.css

@@ -204,3 +204,74 @@ code:not(pre code) {
 .fd-ai-fm-trigger-btn:hover {
   transform: none;
 }
+
+/* Custom Ask AI trigger — same as fd-ai-floating-btn for theme */
+.fd-ai-floating-trigger .ask-ai-trigger {
+  font-family: var(--fd-font-sans, inherit);
+  border-radius: 2px !important;
+}
+
+.fd-ai-floating-trigger .ask-ai-trigger:hover {
+  box-shadow: 0 0 0 1px var(--color-fd-ring);
+  transform: none;
+}
+
+.fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger {
+  border-radius: 2px !important;
+}
+
+.fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger:hover {
+  transform: none;
+}
+
+/* ─── Omni Command Palette — darksharp theme ────────────────────── */
+
+.omni-content {
+  border-radius: 0.5rem !important;
+  border: 1px solid var(--color-fd-border) !important;
+  background: var(--color-fd-popover) !important;
+  box-shadow:
+    0 24px 60px -12px rgba(0, 0, 0, 0.7),
+    0 0 0 1px rgba(255, 255, 255, 0.06) !important;
+}
+
+.omni-item {
+  border-radius: 0.25rem !important;
+}
+
+.omni-highlight {
+  background: color-mix(in srgb, var(--color-fd-primary) 30%, transparent) !important;
+}
+
+/* ─── Page Actions — darksharp theme ────────────────────────────── */
+
+.fd-page-action-btn {
+  border-radius: 0.2rem !important;
+  font-size: 0.8125rem !important;
+  letter-spacing: normal !important;
+  box-shadow: none !important;
+  text-transform: capitalize !important;
+  font-family: var(--fd-font-sans, ui-sans-serif, system-ui, sans-serif) !important;
+}
+
+.fd-page-action-dropdown {
+  position: relative !important;
+}
+
+.fd-page-action-menu {
+  border-radius: 0.2rem !important;
+  border: 1px solid var(--color-fd-border) !important;
+  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.4) !important;
+  background: var(--color-fd-popover) !important;
+}
+
+.fd-page-action-menu-item {
+  border-radius: 0.1rem !important;
+  font-size: 0.8125rem !important;
+  color: var(--color-fd-foreground) !important;
+}
+
+.fd-page-action-menu-item:hover {
+  background: var(--color-fd-accent) !important;
+  color: var(--color-fd-accent-foreground) !important;
+}

package/styles/docs.css

@@ -6,6 +6,8 @@
  *   --color-fd-primary, --color-fd-background, --color-fd-foreground, etc.
  */
 
+@import "./omni.css";
+
 /* ─── CSS Reset ──────────────────────────────────────────────────────── */
 
 *,
@@ -70,10 +72,11 @@ html {
 
 body {
   font-family: var(--fd-font-sans, ui-sans-serif, system-ui, -apple-system, sans-serif);
+  font-size: var(--fd-body-size, 1rem);
+  font-weight: var(--fd-body-weight, 400);
+  line-height: var(--fd-body-line-height, 1.75);
   background: var(--color-fd-background);
   color: var(--color-fd-foreground);
-  line-height: 1.5;
-  font-size: 14px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -88,6 +91,7 @@ samp {
     "Cascadia Code",
     "Source Code Pro",
     Menlo,
+    Consolas,
     monospace
   );
 }
@@ -560,24 +564,167 @@ samp {
   }
 }
 
-/* ─── Page description (frontmatter) ─────────────────────────────────── */
+/* ─── Page title + description (match Nuxt/Astro: title first, then description) ─────── */
+
+.fd-page-title {
+  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.025em);
+  margin: 0 0 0.5rem;
+  scroll-margin-top: 80px;
+}
 
 .fd-page-description {
+  margin-top: 0;
   margin-bottom: 1rem;
-  font-size: 1.125rem;
-  line-height: 1.75;
+  font-size: var(--fd-body-size, 1.125rem);
+  font-weight: var(--fd-body-weight, 400);
+  line-height: var(--fd-body-line-height, 1.75);
   color: var(--color-fd-muted-foreground);
 }
 
+/* ─── Page Actions (Copy page / Open in …) ─────────────────────────────── */
+
+.fd-page-actions-divider {
+  border: none;
+  border-top: 1px solid var(--color-fd-border);
+  margin: 1rem 0 0.75rem;
+}
+
+.fd-page-actions,
+[data-page-actions] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  width: 100%;
+}
+
+.fd-page-actions[data-actions-alignment="right"],
+[data-page-actions][data-actions-alignment="right"] {
+  justify-content: flex-end;
+}
+
+.fd-page-actions[data-actions-alignment="left"],
+[data-page-actions][data-actions-alignment="left"] {
+  justify-content: flex-start;
+}
+
+.fd-page-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1;
+  min-height: 2rem;
+  color: var(--color-fd-muted-foreground);
+  background: var(--color-fd-secondary);
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.375rem;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    color 0.15s,
+    background 0.15s,
+    border-color 0.15s;
+  user-select: none;
+}
+
+.fd-page-action-btn:hover {
+  color: var(--color-fd-accent-foreground);
+  background: var(--color-fd-accent);
+}
+
+.fd-page-action-btn[data-copied="true"] {
+  color: var(--color-fd-foreground);
+}
+
+.fd-page-action-btn svg {
+  flex-shrink: 0;
+}
+
+.fd-page-action-dropdown {
+  position: relative;
+}
+
+.fd-page-action-menu {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 0;
+  z-index: 50;
+  min-width: 220px;
+  padding: 0.375rem;
+  background: var(--color-fd-popover, var(--color-fd-background));
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.15);
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.fd-page-action-menu[hidden] {
+  display: none !important;
+}
+
+.fd-page-action-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.35rem 0.625rem;
+  font-size: 0.8125rem;
+  font-weight: 400;
+  color: var(--color-fd-foreground);
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  text-align: left;
+  text-decoration: none;
+  transition: background 0.1s, color 0.1s;
+}
+
+.fd-page-action-menu-item:hover {
+  background: var(--color-fd-accent);
+  color: var(--color-fd-accent-foreground);
+}
+
+.fd-page-action-menu-label {
+  flex: 1;
+}
+
+.fd-page-actions a,
+.fd-page-actions button,
+.fd-page-action-menu-item,
+.fd-page-action-btn {
+  text-decoration: none !important;
+}
+
+.fd-page-action-menu-item:hover {
+  text-decoration: none !important;
+}
+
+.fd-last-modified-below-title {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
 /* ─── Breadcrumb ─────────────────────────────────────────────────────── */
 
 .fd-breadcrumb {
   display: flex;
   align-items: center;
   gap: 0;
-  font-size: 13px;
+  font-size: var(--fd-small-size, 0.8125rem);
+  font-family: var(--fd-font-sans, inherit);
   color: var(--color-fd-muted-foreground);
-  margin-bottom: 8px;
+  margin-bottom: 2rem;
 }
 
 .fd-breadcrumb-item {
@@ -588,7 +735,7 @@ samp {
 .fd-breadcrumb-sep {
   margin: 0 6px;
   opacity: 0.4;
-  font-size: 12px;
+  font-size: var(--fd-small-size, 0.75rem);
 }
 
 .fd-breadcrumb-parent {
@@ -805,6 +952,9 @@ samp {
 
 .fd-page-body p {
   margin: 0 0 16px;
+  font-size: var(--fd-body-size, 1rem);
+  font-weight: var(--fd-body-weight, 400);
+  line-height: var(--fd-body-line-height, 1.75);
 }
 
 .fd-page-body ul,
@@ -815,6 +965,9 @@ samp {
 
 .fd-page-body li {
   margin: 4px 0;
+  font-size: var(--fd-body-size, 1rem);
+  font-weight: var(--fd-body-weight, 400);
+  line-height: var(--fd-body-line-height, 1.75);
 }
 
 .fd-page-body li::marker {
@@ -1245,7 +1398,8 @@ html.dark pre.shiki {
 
 .fd-last-modified {
   color: var(--color-fd-muted-foreground);
-  font-size: 12px;
+  font-size: var(--fd-small-size, 0.75rem);
+  font-weight: var(--fd-small-weight, 400);
 }
 
 @media (max-width: 640px) {
@@ -1304,7 +1458,7 @@ html.dark pre.shiki {
 
 .fd-page-nav-card:hover {
   background: var(--color-fd-accent);
-  border-color: var(--color-fd-ring);
+  border-color: var(--color-fd-border);
 }
 
 .fd-page-nav-next {
@@ -2038,7 +2192,8 @@ html.dark pre.shiki {
   backdrop-filter: blur(4px);
   color: var(--color-fd-muted-foreground, #71717a);
   cursor: pointer;
-  font-size: 14px;
+  font-size: var(--fd-small-size, 0.875rem);
+  font-family: var(--fd-font-sans, inherit);
   box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
   transition:
     transform 150ms,
@@ -2064,6 +2219,37 @@ html.dark pre.shiki {
   animation: fd-ai-fade-in 300ms ease-out;
 }
 
+/* Custom Ask AI trigger (e.g. triggerComponent): same base as .fd-ai-floating-btn
+   so theme overrides for fd-ai-floating-btn can also target .ask-ai-trigger */
+.fd-ai-floating-trigger .ask-ai-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 12px;
+  height: 40px;
+  border-radius: 16px;
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  background: color-mix(in srgb, var(--color-fd-secondary, #f4f4f5) 80%, transparent);
+  backdrop-filter: blur(4px);
+  color: var(--color-fd-muted-foreground, #71717a);
+  cursor: pointer;
+  font-size: var(--fd-small-size, 0.875rem);
+  font-family: var(--fd-font-sans, inherit);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
+  transition: transform 150ms, background 150ms, color 150ms;
+}
+
+.fd-ai-floating-trigger .ask-ai-trigger:hover {
+  background: var(--color-fd-accent);
+  color: var(--color-fd-accent-foreground);
+  transform: scale(1.03);
+}
+
+.fd-ai-floating-trigger .ask-ai-trigger:active {
+  transform: scale(0.97);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    Full-Modal (better-auth inspired) — fd-ai-fm-*
    ═══════════════════════════════════════════════════════════════ */