Feat/update theme

.gitignore

@@ -1,4 +1,7 @@
 LICENSE
 .astro
 node_modules
-dist
+dist
+
+# graft's local graph cache — regenerable, not committed (run `graft build`).
+/graft/

.ignore

@@ -0,0 +1,5 @@
+# graft's cards are gitignored but should stay greppable: ripgrep reads
+# .ignore before .gitignore, so this re-admits the tree to search only.
+!graft/
+graft/.cache/
+graft/.graph/

package.json

@@ -15,9 +15,10 @@
     "@astrojs/sitemap": "^3.6.0",
     "@docsearch/js": "^3.6.0",
     "@docsearch/react": "^3.6.0",
+    "@fontsource-variable/hanken-grotesk": "^5.3.0",
+    "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/lexend": "^5.0.20",
-    "@fontsource-variable/outfit": "^5.0.13",
-    "@fontsource/press-start-2p": "^5.2.6",
+    "@fontsource-variable/space-grotesk": "^5.3.0",
     "@heroicons/react": "^2.2.0",
     "@tailwindcss/vite": "^4.0.9",
     "@types/react": "^18.3.3",

src/components/common/Footer.astro

@@ -1,15 +1,25 @@
 <footer
-  class="footer footer-center bg-base-100 text-primary-content rounded-sm p-2"
+  class="footer footer-center bg-base-200 text-base-content border-t border-[var(--line)] p-6"
 >
-  <div class="max-w-(--breakpoint-xl) flex justify-between items-center w-full">
-    <aside class="hidden md:flex items-center gap-2">
-      <img src="/documentation/images/logo.webp" alt="Seedloaf" height={64} width={64} />
+  <div
+    class="max-w-(--breakpoint-xl) flex flex-col md:flex-row gap-4 justify-between items-center w-full"
+  >
+    <aside class="flex items-center gap-3">
+      <img
+        src="/documentation/images/Icon_A.svg"
+        alt="Seedloaf"
+        height={30}
+        width={31}
+        class="shrink-0"
+      />
       <div class="text-start">
-        <p class="font-bold">Seedloaf.</p>
-        <p>Copyright © 2025 - All right reserved</p>
+        <p class="font-bold tracking-[-0.025em]">Seedloaf.</p>
+        <p class="text-sm text-[var(--txt-4)]">
+          Copyright © 2025 — All rights reserved
+        </p>
       </div>
     </aside>
-    <nav class="grid grid-flow-col gap-4">
+    <nav class="grid grid-flow-col gap-4 text-[var(--txt-3)]">
       <a href="/privacy-policy" class="link link-hover"> Privacy Policy </a>
       <a href="/terms-of-service" class="link link-hover">
         Terms & Conditions

src/components/common/ThemeToggle.astro

@@ -24,39 +24,32 @@
 </button>
 
 <script is:inline>
+  const DARK = "seedloaf-dark";
+  const LIGHT = "seedloaf-light";
+
+  // Migrate the old winter/dark values to the Seedloaf themes.
+  const stored = localStorage.getItem("theme");
   const theme = (() => {
-    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
-      return localStorage.getItem("theme");
-    }
-    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      return "dark";
-    }
-    return "winter";
+    if (stored === LIGHT || stored === "winter") return LIGHT;
+    if (stored === DARK || stored === "dark") return DARK;
+    if (window.matchMedia("(prefers-color-scheme: light)").matches) return LIGHT;
+    return DARK;
   })();
 
-  if (theme === "winter") {
-    document.documentElement.setAttribute("data-theme", "winter");
-    document.getElementById("themeToggle").classList.remove("swap-active");
-  } else {
-    document.documentElement.setAttribute("data-theme", "dark");
-    document.getElementById("themeToggle").classList.add("swap-active");
-  }
-
-  window.localStorage.setItem("theme", theme);
-
-  const handleToggleClick = () => {
-    const element = document.documentElement;
-    const isDark = element.dataset.theme === "dark";
-    localStorage.setItem("theme", isDark ? "winter" : "dark");
-    element.setAttribute("data-theme", isDark ? "winter" : "dark");
-    if (isDark) {
-      document.getElementById("themeToggle").classList.remove("swap-active");
-    } else {
-      document.getElementById("themeToggle").classList.add("swap-active");
-    }
+  const applyTheme = (value) => {
+    document.documentElement.setAttribute("data-theme", value);
+    const toggle = document.getElementById("themeToggle");
+    // swap-off (sun) shows in light, swap-on (moon) shows in dark.
+    toggle.classList.toggle("swap-active", value === DARK);
   };
 
-  document
-    .getElementById("themeToggle")
-    .addEventListener("click", handleToggleClick);
+  applyTheme(theme);
+  localStorage.setItem("theme", theme);
+
+  document.getElementById("themeToggle").addEventListener("click", () => {
+    const next =
+      document.documentElement.dataset.theme === DARK ? LIGHT : DARK;
+    applyTheme(next);
+    localStorage.setItem("theme", next);
+  });
 </script>

src/components/common/TranslateToggle.astro

@@ -5,7 +5,7 @@
       <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31"/>
     </svg>
   </button>
-  <ul tabindex="0" class="menu menu-compact dropdown-content mt-2 p-2 shadow bg-base-100 rounded-box w-40" style="border: 1px solid #5e5bf7;">
+  <ul tabindex="0" class="menu menu-compact dropdown-content mt-2 p-2 bg-base-200 border border-[var(--line)] rounded-[var(--radius-box)] w-40">
     <li><a id="lang-en" class="justify-between">English</a></li>
     <li><a id="lang-es">Espaniol</a></li>
   </ul>

src/components/docs/DocsHeader.astro

@@ -12,7 +12,7 @@ const ALGOLIA_DOCSEARCH_CONFIG = {
 
 <header class="sticky top-0 z-30">
   <nav
-    class="navbar bg-base-100/90 shadow-sm backdrop-blur-lg justify-center items-center py-2 md:px-10 px-2 border-b border-base-content/10"
+    class="navbar bg-base-100/90 backdrop-blur-lg justify-center items-center py-2 md:px-10 px-2 border-b border-[var(--line)]"
   >
     <div class="navbar-start">
       <label for="my-drawer-2" class="btn btn-square btn-ghost lg:hidden">