fix: support grid-cols-4, accent color, and header layout controls

- Fix grid columns 4 by using conditional logic instead of string interpolation
- Simplify CSS generator to only generate accent colors (mood/typography/shape/density now use data attributes)
- Add header component to all 7 preview pages with logo, nav, and cart
- Add header layout CSS for centered and minimal variants
- Move nav display property to CSS to enable minimal mode hiding

This resolves all high-priority theme control issues:
- Grid columns now supports 2, 3, and 4 columns
- Accent color picker now updates button colors
- Header layout control now works (standard, centered, minimal)

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-31 00:45:14 +00:00
parent 476ec9667a
commit 0871570b7e
9 changed files with 167 additions and 8 deletions

View File

@@ -19,10 +19,6 @@ defmodule SimpleshopTheme.Theme.CSSGenerator do
.preview-frame, .shop-root {
#{generate_accent(settings.accent_color)}
#{generate_secondary_colors(settings)}
#{generate_mood(settings.mood)}
#{generate_typography(settings.typography)}
#{generate_shape(settings.shape)}
#{generate_density(settings.density)}
}
"""
|> String.trim()