From 9070d08bcbb6a06ead376cfbf36f6dc4f58ef307 Mon Sep 17 00:00:00 2001
From: Ewan Croft <git@ewancroft.uk>
Date: Thu, 4 Jun 2026 20:37:26 +0100
Subject: [PATCH] feat(assets): sync OG generator and favicon with theme
 palette

---
 src/lib/assets/favicon.svg        |  7 ++++---
 src/lib/server/theme.js           |  4 ++--
 src/routes/og/generate/+server.ts | 30 +++++++++++++++++++++++-------
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/lib/assets/favicon.svg b/src/lib/assets/favicon.svg
index 951a5c3..d23e746 100644
--- a/src/lib/assets/favicon.svg
+++ b/src/lib/assets/favicon.svg
@@ -1,9 +1,10 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
   <style>
-    .bg { fill: oklch(17.5% 0.012 150); }
-    .fg { fill: oklch(78.5% 0.095 150); }
+    /* Baseline colors derived from Ostara/baseline green */
+    .bg { fill: oklch(23.5% 0.036 136.87); }
+    .fg { fill: oklch(69.5% 0.157 138.19); }
     @media (prefers-color-scheme: dark) {
-      .bg { fill: oklch(22% 0.015 150); }
+      .bg { fill: oklch(93.5% 0.026 136.58); }
     }
   </style>
   <rect class="bg" width="32" height="32" rx="7"/>
diff --git a/src/lib/server/theme.js b/src/lib/server/theme.js
index a5589ed..12edcad 100644
--- a/src/lib/server/theme.js
+++ b/src/lib/server/theme.js
@@ -12,7 +12,7 @@ import chroma from "chroma-js";
  * Precisely preserves L and C for both light and dark modes to maintain A11Y contrast.
  * Reference date: Ostara (March 21)
  */
-const baseline = {
+export const baseline = {
   text: {
     50: { light: [0.967, 0.012, 133.22], dark: [0.168, 0.019, 137.9] },
     100: { light: [0.935, 0.026, 136.26], dark: [0.235, 0.036, 136.87] },
@@ -91,7 +91,7 @@ const sabbats = [
   { name: "yule", month: 12, day: 21, rotation: 270 },
 ];
 
-function getHueRotation(now) {
+export function getHueRotation(now) {
   const year = now.getFullYear();
   const getSabbatDate = (s, y) => new Date(y, s.month - 1, s.day);
   const allSabbats = [
diff --git a/src/routes/og/generate/+server.ts b/src/routes/og/generate/+server.ts
index 3de86d9..abd38e6 100644
--- a/src/routes/og/generate/+server.ts
+++ b/src/routes/og/generate/+server.ts
@@ -1,4 +1,10 @@
 import type { RequestHandler } from "./$types";
+import {
+  getCurrentPrimaryShade,
+  baseline,
+  getHueRotation,
+} from "$lib/server/theme";
+import chroma from "chroma-js";
 
 export const GET: RequestHandler = async ({ url }) => {
   const title = url.searchParams.get("title") ?? "ewan croft";
@@ -15,13 +21,23 @@ export const GET: RequestHandler = async ({ url }) => {
   const displayTitle =
     title.length > maxChars ? title.slice(0, maxChars - 1) + "…" : title;
 
-  // Colours based on site theme (dark mode)
-  const bg = "#1a201c"; // ink-950 dark
-  const surface = "#222a26"; // surface-raised
-  const border = "#3a4643"; // surface-color
-  const primary = "#a6e3a1"; // primary-500 equivalent
-  const text = "#d9e4de"; // ink-50
-  const textMuted = "#a0b0a8"; // ink-500
+  const now = new Date();
+  const rotation = getHueRotation(now);
+
+  const getSeasonalColor = (scale: keyof typeof baseline, step: number) => {
+    const data = baseline[scale][step];
+    const [l, c, hBase] = data.light;
+    const h = (hBase + rotation) % 360;
+    return chroma.oklch(l, c, h).hex();
+  };
+
+  // Colours based on site theme, with dynamic Sabbat-interpolated primary
+  const bg = getSeasonalColor("background", 950);
+  const surface = getSeasonalColor("background", 100);
+  const border = getSeasonalColor("background", 400);
+  const primary = getCurrentPrimaryShade(500);
+  const text = getSeasonalColor("text", 50);
+  const textMuted = getSeasonalColor("text", 500);
 
   const svg = `
     <svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
-- 
2.51.2