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

feat: enhance theme customization with layout controls and real product images

Browse Source 
Add comprehensive layout and styling controls including header layout options (standard, centered, left), content width settings (contained, wide, full), and card shadow levels. Update all theme presets with these new settings. Replace placeholder images with real Unsplash product and category images for more realistic previews. Add announcement bar and sticky header toggle options for enhanced header customization.

🤖 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
2026-01-01 16:16:05 +00:00
parent 1ca703e548
commit a8c0e150c8
16 changed files with 793 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,9 +3,12 @@
Semantic aliases for easy usage
======================================== */
:root {
.preview-frame, .shop-root {
/* Accent color - HSL components set dynamically by CSS generator */
/* Derived accent colors use the dynamic HSL values */
--t-accent-h: 24;
--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-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%);
@@ -15,8 +18,9 @@
--t-secondary-accent: #ea580c;
--t-sale-color: #dc2626;
/* Density multiplier */
--t-density: 1;
/* Font size scale */
--t-font-size-scale: 1;
--t-heading-weight: 600;
/* Layout */
--t-layout-max-width: 1400px;
@@ -48,6 +52,14 @@
--weight-heading: var(--t-heading-weight);
--tracking-heading: var(--t-heading-tracking);
/* Density-aware spacing */
--space-xs: calc(var(--p-space-2) * var(--t-density));
--space-sm: calc(var(--p-space-3) * var(--t-density));
--space-md: calc(var(--p-space-4) * var(--t-density));
--space-lg: calc(var(--p-space-6) * var(--t-density));
--space-xl: calc(var(--p-space-8) * var(--t-density));
--space-2xl: calc(var(--p-space-12) * var(--t-density));
/* Border radius */
--radius-button: var(--t-radius-button);
--radius-card: var(--t-radius-card);
@@ -59,7 +71,7 @@
0 1px 2px hsl(var(--p-shadow-color) / calc(var(--p-shadow-strength) * 0.5)),
0 1px 3px hsl(var(--p-shadow-color) / var(--p-shadow-strength));
--shadow-md:
0 2px 4px hsl(var(--p-shadow-color) / calc(--p-shadow-strength) * 0.5)),
0 2px 4px hsl(var(--p-shadow-color) / calc(var(--p-shadow-strength) * 0.5)),
0 4px 8px hsl(var(--p-shadow-color) / var(--p-shadow-strength)),
0 8px 16px hsl(var(--p-shadow-color) / calc(var(--p-shadow-strength) * 0.5));
@@ -68,3 +80,8 @@
--transition-normal: var(--p-duration-normal) var(--p-ease-out);
--transition-bounce: var(--p-duration-normal) var(--p-ease-out-back);
}
/* Dark mode accent-subtle override */
.preview-frame[data-mood="dark"], .shop-root[data-mood="dark"] {
--t-accent-subtle: hsl(var(--t-accent-h) 30% 15%);
}