Jamey Greenwood
8aedb3466a
- 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>
73 lines
2.3 KiB
CSS
73 lines
2.3 KiB
CSS
/* ========================================
|
|
THEME SEMANTIC - Layer 3
|
|
Semantic aliases for easy usage
|
|
======================================== */
|
|
|
|
:root {
|
|
/* Accent color (dynamic, set by theme) */
|
|
--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;
|
|
|
|
/* Density multiplier */
|
|
--t-density: 1;
|
|
|
|
/* 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);
|
|
|
|
/* 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(--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);
|
|
}
|