@farming-labs/theme 0.0.2-beta.10

package/styles/base.css

@@ -0,0 +1,298 @@
+/* AI Chat & Search Dialog styles */
+@import "./ai.css";
+
+/* Shared base styles for all @farming-labs/theme themes.
+ *
+ * Typography CSS custom properties:
+ *   --fd-font-sans   — sans-serif font family
+ *   --fd-font-mono   — monospace font family
+ *   --fd-h1-size, --fd-h1-weight, --fd-h1-line-height, --fd-h1-letter-spacing
+ *   --fd-h2-size, --fd-h2-weight, --fd-h2-line-height, --fd-h2-letter-spacing
+ *   --fd-h3-size, --fd-h3-weight, --fd-h3-line-height, --fd-h3-letter-spacing
+ *   --fd-h4-size, --fd-h4-weight, --fd-h4-line-height, --fd-h4-letter-spacing
+ *   --fd-body-size, --fd-body-weight, --fd-body-line-height
+ *   --fd-small-size, --fd-small-weight, --fd-small-line-height
+ *
+ * These are set by createDocsLayout() from the typography config.
+ * Themes can also set defaults directly in CSS.
+ */
+
+/* ─── Font families ──────────────────────────────────────────────────── */
+
+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));
+}
+
+/* ─── Prose heading typography ───────────────────────────────────────── */
+
+.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 {
+  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 {
+  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 {
+  font-size: var(--fd-h4-size, 1.125rem);
+  font-weight: var(--fd-h4-weight, 600);
+  line-height: var(--fd-h4-line-height, 1.4);
+  letter-spacing: var(--fd-h4-letter-spacing, normal);
+}
+
+/* ─── Body text ──────────────────────────────────────────────────────── */
+
+.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);
+}
+
+/* ─── Small text (captions, metadata) ─────────────────────────────── */
+
+.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);
+}
+
+/* ─── Callout icon alignment ────────────────────────────────────────── */
+
+/* Callout container: center icon + text vertically */
+[style*="--callout-color"] {
+  align-items: start;
+}
+
+/* Left indicator bar: stretch full height regardless of align-items */
+[style*="--callout-color"] > [role="none"] {
+  align-self: stretch;
+}
+
+/* Icon inside callout: prevent shrinking */
+[style*="--callout-color"] > svg {
+  flex-shrink: 0;
+  margin-top: 0;
+}
+
+/* ─── Code block base styles ─────────────────────────────────────────── */
+
+figure.shiki pre {
+  padding: 0.15rem 0.5rem;
+}
+
+figure.shiki pre > code {
+  display: grid;
+}
+
+figure.shiki pre > code > [data-line] {
+  padding: 0 0.25rem;
+}
+
+/* ─── Breadcrumb ─────────────────────────────────────────────────────── */
+
+.fd-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  font-size: 0.8rem;
+  color: var(--color-fd-muted-foreground);
+  margin-bottom: 0.5rem;
+}
+
+.fd-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.fd-breadcrumb-sep {
+  margin: 0 0.375rem;
+  opacity: 0.4;
+  font-size: 0.75rem;
+}
+
+.fd-breadcrumb-parent {
+  opacity: 0.6;
+  font-weight: 400;
+}
+
+.fd-breadcrumb-link {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition: opacity 0.15s, color 0.15s;
+}
+
+.fd-breadcrumb-link:hover {
+  opacity: 1;
+  color: var(--color-fd-foreground);
+}
+
+.fd-breadcrumb-current {
+  font-weight: 500;
+  color: var(--color-fd-foreground);
+}
+
+/* ─── Page Actions (Copy Markdown / Open in …) ────────────────────── */
+
+[data-page-actions] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  margin-top: 0.25rem;
+}
+
+.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;
+  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:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.fd-page-action-btn[data-copied="true"] {
+  color: var(--color-fd-foreground);
+}
+
+.fd-page-action-btn svg {
+  flex-shrink: 0;
+  color: var(--color-fd-muted-foreground);
+}
+
+/* ─── Open dropdown ─────────────────────────────────────────────────── */
+
+.fd-page-action-dropdown {
+  position: relative;
+}
+
+.fd-page-action-menu {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  right: 0;
+  z-index: 50;
+  min-width: 220px;
+  padding: 0.375rem;
+  background: var(--color-fd-popover);
+  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;
+  animation: fd-page-actions-fade-in 0.12s ease-out;
+}
+
+@keyframes fd-page-actions-fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.fd-page-action-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.2rem 0.625rem;
+  font-size: 0.8125rem;
+  font-weight: 400;
+  color: var(--color-fd-popover-foreground);
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  text-align: left;
+  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-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+.fd-page-action-menu-icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.fd-page-action-menu-label {
+  flex: 1;
+}
+
+/* ─── Page Footer (Edit on GitHub + Last Updated) ──────────────────── */
+
+.fd-page-footer {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-top: auto;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--color-fd-border, hsl(0 0% 80% / 50%));
+  font-size: 0.8125rem;
+}
+
+.fd-last-updated {
+  color: var(--color-fd-muted-foreground, hsl(0 0% 45%));
+  font-size: 0.75rem;
+}
+
+/* ─── Code block copy button: show on hover ────────────────────────── */
+
+figure.shiki > button,
+figure.shiki > div:first-child button {
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+figure.shiki:hover > button,
+figure.shiki:hover > div:first-child button {
+  opacity: 1;
+}
+