jamey/simpleshop_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove hardcoded accent color values from theme-semantic.css

Browse Source 
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>
This commit is contained in:
Jamey Greenwood 2025-12-31 00:55:25 +00:00
parent 8aedb3466a
commit 53828c3a2a
2 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/theme-semantic.css
View File

@ -4,10 +4,8 @@
======================================== */ ======================================== */
:root { :root {
/* Accent color (dynamic, set by theme) */ /* Accent color - HSL components set dynamically by CSS generator */
--t-accent-h: 24; /* Derived accent colors use the dynamic HSL values */
--t-accent-s: 95%;
--t-accent-l: 53%;
--t-accent: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); --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-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%); --t-accent-subtle: hsl(var(--t-accent-h) 40% 95%);

8
lib/simpleshop_theme_web/live/theme_live/index.html.heex
View File

@ -130,25 +130,25 @@
<!-- Colors --> <!-- Colors -->
<div> <div>
<h3 class="font-semibold mb-3">Accent Color</h3> <h3 class="font-semibold mb-3">Accent Color</h3>
<form phx-change="update_color" phx-value-field="accent_color">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<input <input
type="color" type="color"
phx-change="update_color" name="value"
phx-value-field="accent_color"
value={@theme_settings.accent_color} value={@theme_settings.accent_color}
class="w-12 h-10 rounded cursor-pointer" class="w-12 h-10 rounded cursor-pointer"
phx-debounce="300" phx-debounce="300"
/> />
<input <input
type="text" type="text"
phx-change="update_color" name="value"
phx-value-field="accent_color"
value={@theme_settings.accent_color} value={@theme_settings.accent_color}
class="input input-bordered input-sm flex-1 font-mono text-xs" class="input input-bordered input-sm flex-1 font-mono text-xs"
placeholder="#000000" placeholder="#000000"
phx-debounce="blur" phx-debounce="blur"
/> />
</div> </div>
</form>
</div> </div>
<!-- Header Layout --> <!-- Header Layout -->