From d68768ad84660b6c0531a46f1802e9fe39fdde6e Mon Sep 17 00:00:00 2001
From: jamey <jamey@server.jamey.stream>
Date: Fri, 20 Feb 2026 23:56:43 +0000
Subject: [PATCH] add theme bridge and .themed wrapper to admin
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 3: Rewrite admin/themes.css as a bridge mapping DaisyUI --color-*
variables to --t-* theme tokens. Admin components still reference
--color-base-100, --color-primary etc but these now resolve through the
bridge to the merchant's theme colours. Status colours (error, success,
warning, info) stay hardcoded.

Add .themed wrapper with data-mood to admin_root.html.heex. Remove the
old data-theme JS toggle script — dark mode now comes from the theme
system mood setting. Admin inherits theme colours, typography, and shape
from the merchant's chosen theme.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 assets/css/admin/themes.css                   | 127 ++++--------------
 .../components/layouts/admin_root.html.heex   |  22 +--
 2 files changed, 27 insertions(+), 122 deletions(-)

diff --git a/assets/css/admin/themes.css b/assets/css/admin/themes.css
index 32347e4..0976259 100644
--- a/assets/css/admin/themes.css
+++ b/assets/css/admin/themes.css
@@ -1,26 +1,26 @@
-/* Admin colour themes — extracted from DaisyUI theme plugin config.
-   Light is the default; dark activates via OS preference or data-theme attribute. */
+/* Admin theme bridge — maps DaisyUI --color-* variables to --t-* theme tokens.
+   Admin components still reference --color-*, which resolve through this bridge
+   to the merchant's chosen theme. Phase 4 replaces --color-* with --t-* directly,
+   then this file gets deleted. */
 
-:root {
-  color-scheme: light;
+.themed {
+  /* Surface colours */
+  --color-base-100: var(--t-surface-base);
+  --color-base-200: var(--t-surface-sunken);
+  --color-base-300: var(--t-border-default);
+  --color-base-content: var(--t-text-primary);
 
-  /* Base */
-  --color-base-100: oklch(98% 0 0);
-  --color-base-200: oklch(96% 0.001 286.375);
-  --color-base-300: oklch(92% 0.004 286.32);
-  --color-base-content: oklch(21% 0.006 285.885);
+  /* Brand colours */
+  --color-primary: var(--t-accent);
+  --color-primary-content: var(--t-text-inverse);
+  --color-secondary: var(--t-text-secondary);
+  --color-secondary-content: var(--t-text-inverse);
+  --color-accent: var(--t-text-primary);
+  --color-accent-content: var(--t-text-inverse);
+  --color-neutral: var(--t-text-tertiary);
+  --color-neutral-content: var(--t-text-inverse);
 
-  /* Brand */
-  --color-primary: oklch(70% 0.213 47.604);
-  --color-primary-content: oklch(98% 0.016 73.684);
-  --color-secondary: oklch(55% 0.027 264.364);
-  --color-secondary-content: oklch(98% 0.002 247.839);
-  --color-accent: oklch(0% 0 0);
-  --color-accent-content: oklch(100% 0 0);
-  --color-neutral: oklch(44% 0.017 285.786);
-  --color-neutral-content: oklch(98% 0 0);
-
-  /* Feedback */
+  /* Status colours — fixed, not themed */
   --color-info: oklch(62% 0.214 259.815);
   --color-info-content: oklch(97% 0.014 254.604);
   --color-success: oklch(70% 0.14 182.503);
@@ -30,87 +30,8 @@
   --color-error: oklch(58% 0.253 17.585);
   --color-error-content: oklch(96% 0.015 12.422);
 
-  /* Shape */
-  --radius-selector: 0.25rem;
-  --radius-field: 0.25rem;
-  --radius-box: 0.5rem;
-  --size-selector: 0.21875rem;
-  --size-field: 0.21875rem;
-  --border: 1.5px;
-  --depth: 1;
-  --noise: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    color-scheme: dark;
-
-    --color-base-100: oklch(30.33% 0.016 252.42);
-    --color-base-200: oklch(25.26% 0.014 253.1);
-    --color-base-300: oklch(20.15% 0.012 254.09);
-    --color-base-content: oklch(97.807% 0.029 256.847);
-
-    --color-primary: oklch(58% 0.233 277.117);
-    --color-primary-content: oklch(96% 0.018 272.314);
-    --color-secondary: oklch(58% 0.233 277.117);
-    --color-secondary-content: oklch(96% 0.018 272.314);
-    --color-accent: oklch(60% 0.25 292.717);
-    --color-accent-content: oklch(96% 0.016 293.756);
-    --color-neutral: oklch(37% 0.044 257.287);
-    --color-neutral-content: oklch(98% 0.003 247.858);
-
-    --color-info: oklch(58% 0.158 241.966);
-    --color-info-content: oklch(97% 0.013 236.62);
-    --color-success: oklch(60% 0.118 184.704);
-    --color-success-content: oklch(98% 0.014 180.72);
-    --color-warning: oklch(66% 0.179 58.318);
-    --color-warning-content: oklch(98% 0.022 95.277);
-    --color-error: oklch(58% 0.253 17.585);
-    --color-error-content: oklch(96% 0.015 12.422);
-
-    --radius-selector: 0.25rem;
-    --radius-field: 0.25rem;
-    --radius-box: 0.5rem;
-    --size-selector: 0.21875rem;
-    --size-field: 0.21875rem;
-    --border: 1.5px;
-    --depth: 1;
-    --noise: 0;
-  }
-}
-
-[data-theme="dark"] {
-  color-scheme: dark;
-
-  --color-base-100: oklch(30.33% 0.016 252.42);
-  --color-base-200: oklch(25.26% 0.014 253.1);
-  --color-base-300: oklch(20.15% 0.012 254.09);
-  --color-base-content: oklch(97.807% 0.029 256.847);
-
-  --color-primary: oklch(58% 0.233 277.117);
-  --color-primary-content: oklch(96% 0.018 272.314);
-  --color-secondary: oklch(58% 0.233 277.117);
-  --color-secondary-content: oklch(96% 0.018 272.314);
-  --color-accent: oklch(60% 0.25 292.717);
-  --color-accent-content: oklch(96% 0.016 293.756);
-  --color-neutral: oklch(37% 0.044 257.287);
-  --color-neutral-content: oklch(98% 0.003 247.858);
-
-  --color-info: oklch(58% 0.158 241.966);
-  --color-info-content: oklch(97% 0.013 236.62);
-  --color-success: oklch(60% 0.118 184.704);
-  --color-success-content: oklch(98% 0.014 180.72);
-  --color-warning: oklch(66% 0.179 58.318);
-  --color-warning-content: oklch(98% 0.022 95.277);
-  --color-error: oklch(58% 0.253 17.585);
-  --color-error-content: oklch(96% 0.015 12.422);
-
-  --radius-selector: 0.25rem;
-  --radius-field: 0.25rem;
-  --radius-box: 0.5rem;
-  --size-selector: 0.21875rem;
-  --size-field: 0.21875rem;
-  --border: 1.5px;
-  --depth: 1;
-  --noise: 0;
+  /* Shape — mapped to theme shape tokens */
+  --radius-box: var(--t-radius-card);
+  --radius-selector: var(--t-radius-button);
+  --radius-field: var(--t-radius-input);
 }
diff --git a/lib/berrypod_web/components/layouts/admin_root.html.heex b/lib/berrypod_web/components/layouts/admin_root.html.heex
index 8ddce52..a00e527 100644
--- a/lib/berrypod_web/components/layouts/admin_root.html.heex
+++ b/lib/berrypod_web/components/layouts/admin_root.html.heex
@@ -26,26 +26,10 @@
     </style>
     <script defer phx-track-static src={~p"/assets/js/app.js"}>
     </script>
-    <script>
-      (() => {
-        const setTheme = (theme) => {
-          if (theme === "system") {
-            localStorage.removeItem("phx:theme");
-            document.documentElement.removeAttribute("data-theme");
-          } else {
-            localStorage.setItem("phx:theme", theme);
-            document.documentElement.setAttribute("data-theme", theme);
-          }
-        };
-        if (!document.documentElement.hasAttribute("data-theme")) {
-          setTheme(localStorage.getItem("phx:theme") || "system");
-        }
-        window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));
-        window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));
-      })();
-    </script>
   </head>
   <body class="h-full">
-    {@inner_content}
+    <div class="themed" data-mood={@theme_settings.mood} style="min-height:100%">
+      {@inner_content}
+    </div>
   </body>
 </html>