The color picker and text input for accent color weren't syncing properly when the user changed the color picker value. This was because LiveView doesn't update input values that might have user focus, to avoid interfering with user input.
Added a JavaScript LiveView hook (ColorSync) that:
- Listens to 'input' events on both the color picker and text input
- Syncs their values in real-time as the user interacts with either one
- Provides immediate visual feedback when changing colors via the picker
The hook is attached to the accent color form with phx-hook="ColorSync" and syncs the two inputs bidirectionally, ensuring they always display the same value.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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>
- Move density-aware spacing variables from :root to .preview-frame in theme-layer2-attributes.css
This ensures the variables can reference the correct --t-density value set by data attributes
- Remove density variables from theme-semantic.css to avoid CSS variable scoping issues
- Update home.html.heex to use var(--space-*) instead of Tailwind spacing classes
Hero section, product grid, and cards now respond to density changes
- Verified all three density modes work correctly (compact: 0.85, balanced: 1, spacious: 1.25)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- 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>
- Add Google Fonts link to root layout for typography presets
- Add data-mood, data-typography, data-shape, data-density attributes to preview-frame
- Create theme-layer2-attributes.css with attribute-based CSS from demo
- Move theme CSS files from priv/static/css to assets/css for proper compilation
- Update CSS import order (primitives → layer2 → semantic)
- Add 'css' to static_paths to serve theme CSS files
This fixes the issue where theme controls updated the database but didn't
visually affect the preview. The demo's attribute-based CSS system is now
properly integrated with the Phoenix LiveView implementation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement all 7 preview pages showcasing theme customization:
- Home page: hero, featured products, testimonials, categories
- Collection page: product grid with filters and sorting
- Product detail page (PDP): gallery, variants, add to cart
- Cart page: cart items with quantity controls and order summary
- About page: company story and values
- Contact page: contact form and business information
- 404 error page: error message with product suggestions
Features:
- All pages use CSS custom properties for theming
- Preview data from PreviewData module (mock products, testimonials, categories)
- Responsive layouts with Tailwind utilities
- Grid columns respect theme settings
- Colors, typography, shapes, and spacing all theme-aware
- Components created as embed_templates for clean separation
Technical implementation:
- Created PreviewPages component module with embed_templates
- Wired up preview_data in LiveView mount
- Updated index.html.heex to render preview pages based on @preview_page
- All pages styled with inline styles using CSS variables
- Scrollable preview frame with max-height
All tests passing (197 total).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement basic theme editor interface with live preview:
- ThemeLive.Index LiveView with mount and event handlers
- Two-column layout: controls sidebar + preview area
- Display all 9 presets as clickable buttons
- Apply preset and regenerate CSS on click
- Show current theme settings (mood, typography, shape, density, color)
- Preview page switcher (7 pages: home, collection, product, cart, about, contact, 404)
- Inline <style> tag with generated CSS for instant preview
- Basic preview frame showing theme variables in action
- Authentication required via :require_authenticated_user pipeline
- Theme navigation link added to user menu
- 9 comprehensive LiveView tests
All tests passing (197 total).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add PreviewData module that provides mock data for theme preview:
- 12 diverse mock products with realistic details and placeholder images
- 3 cart items with variants and quantities
- 6 customer testimonials with ratings
- 5 product categories with counts
- Smart fallback: uses real data when available, mock otherwise
All data designed to showcase theme customization options.
Includes 19 comprehensive tests.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Create settings table for site-wide key-value configuration
- Create images table for BLOB storage of logo/header images
- Add Setting schema with JSON/string/integer/boolean support
- Add ThemeSettings embedded schema with all theme options
- Add Settings context with get/put/update operations
- Add Media context for image uploads and retrieval
- Add Image schema with SVG detection and storage
- Add 9 curated theme presets (gallery, studio, boutique, etc.)
- Add comprehensive tests for Settings and Media contexts
- Add seeds with default Studio preset
- All tests passing (29 tests, 0 failures)
