Jamey Greenwood
a8c0e150c8
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>
88 lines
2.9 KiB
CSS
88 lines
2.9 KiB
CSS
/* ========================================
|
|
THEME SEMANTIC - Layer 3
|
|
Semantic aliases for easy usage
|
|
======================================== */
|
|
|
|
.preview-frame, .shop-root {
|
|
/* Accent color - HSL components set dynamically by CSS generator */
|
|
--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%);
|
|
--t-accent-ring: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.4);
|
|
|
|
/* Secondary colors */
|
|
--t-secondary-accent: #ea580c;
|
|
--t-sale-color: #dc2626;
|
|
|
|
/* Font size scale */
|
|
--t-font-size-scale: 1;
|
|
--t-heading-weight: 600;
|
|
|
|
/* Layout */
|
|
--t-layout-max-width: 1400px;
|
|
--t-button-style: filled;
|
|
--t-card-shadow: none;
|
|
--t-product-text-align: left;
|
|
|
|
/* Page colors */
|
|
--color-page: var(--t-surface-base);
|
|
--color-card: var(--t-surface-raised);
|
|
--color-input: var(--t-surface-raised);
|
|
|
|
/* Text colors */
|
|
--color-heading: var(--t-text-primary);
|
|
--color-body: var(--t-text-secondary);
|
|
--color-caption: var(--t-text-tertiary);
|
|
|
|
/* Button colors */
|
|
--color-button-primary: var(--t-accent);
|
|
--color-button-primary-hover: var(--t-secondary-accent);
|
|
--color-button-primary-text: var(--t-text-inverse);
|
|
|
|
/* Border colors */
|
|
--color-border: var(--t-border-default);
|
|
|
|
/* Typography */
|
|
--font-heading: var(--t-font-heading);
|
|
--font-body: var(--t-font-body);
|
|
--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);
|
|
--radius-input: var(--t-radius-input);
|
|
--radius-image: var(--t-radius-image);
|
|
|
|
/* Shadows */
|
|
--shadow-sm:
|
|
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(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));
|
|
|
|
/* Transitions */
|
|
--transition-fast: var(--p-duration-fast) var(--p-ease-out);
|
|
--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%);
|
|
}
|