From 53828c3a2a3cdf33ef099df1a44796792647e859 Mon Sep 17 00:00:00 2001
From: Jamey Greenwood <jamey@greenwood.im>
Date: Wed, 31 Dec 2025 00:55:25 +0000
Subject: [PATCH] fix: remove hardcoded accent color values from
 theme-semantic.css
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The accent color HSL components (--t-accent-h, --t-accent-s, --t-accent-l) were hardcoded in :root, which prevented the dynamically generated values from the CSS generator from taking effect properly.

Now the HSL components are only set by the CSS generator in .preview-frame, and theme-semantic.css only defines the derived colors that use those variables.

Also wrapped accent color inputs in a form element as required by Phoenix LiveView for phx-change events.

Verified that changing presets properly updates button colors (e.g., studio preset → blue buttons).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 assets/css/theme-semantic.css                 |  6 +--
 .../live/theme_live/index.html.heex           | 38 +++++++++----------
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/assets/css/theme-semantic.css b/assets/css/theme-semantic.css
index 527b7d8..2f436be 100644
--- a/assets/css/theme-semantic.css
+++ b/assets/css/theme-semantic.css
@@ -4,10 +4,8 @@
    ======================================== */
 
 :root {
-  /* Accent color (dynamic, set by theme) */
-  --t-accent-h: 24;
-  --t-accent-s: 95%;
-  --t-accent-l: 53%;
+  /* Accent color - HSL components set dynamically by CSS generator */
+  /* Derived accent colors use the dynamic HSL values */
   --t-accent: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
   --t-accent-hover: hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 8%));
   --t-accent-subtle: hsl(var(--t-accent-h) 40% 95%);
diff --git a/lib/simpleshop_theme_web/live/theme_live/index.html.heex b/lib/simpleshop_theme_web/live/theme_live/index.html.heex
index 8572992..00f57f2 100644
--- a/lib/simpleshop_theme_web/live/theme_live/index.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/index.html.heex
@@ -130,25 +130,25 @@
         <!-- Colors -->
         <div>
           <h3 class="font-semibold mb-3">Accent Color</h3>
-          <div class="flex gap-2 items-center">
-            <input
-              type="color"
-              phx-change="update_color"
-              phx-value-field="accent_color"
-              value={@theme_settings.accent_color}
-              class="w-12 h-10 rounded cursor-pointer"
-              phx-debounce="300"
-            />
-            <input
-              type="text"
-              phx-change="update_color"
-              phx-value-field="accent_color"
-              value={@theme_settings.accent_color}
-              class="input input-bordered input-sm flex-1 font-mono text-xs"
-              placeholder="#000000"
-              phx-debounce="blur"
-            />
-          </div>
+          <form phx-change="update_color" phx-value-field="accent_color">
+            <div class="flex gap-2 items-center">
+              <input
+                type="color"
+                name="value"
+                value={@theme_settings.accent_color}
+                class="w-12 h-10 rounded cursor-pointer"
+                phx-debounce="300"
+              />
+              <input
+                type="text"
+                name="value"
+                value={@theme_settings.accent_color}
+                class="input input-bordered input-sm flex-1 font-mono text-xs"
+                placeholder="#000000"
+                phx-debounce="blur"
+              />
+            </div>
+          </form>
         </div>
 
         <!-- Header Layout -->