Jamey Greenwood
476ec9667a
- 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>
59 lines
1.6 KiB
CSS
59 lines
1.6 KiB
CSS
/* ========================================
|
|
THEME PRIMITIVES - Layer 1
|
|
Fixed CSS custom properties
|
|
======================================== */
|
|
|
|
:root {
|
|
/* Spacing scale */
|
|
--p-space-1: 0.25rem;
|
|
--p-space-2: 0.5rem;
|
|
--p-space-3: 0.75rem;
|
|
--p-space-4: 1rem;
|
|
--p-space-6: 1.5rem;
|
|
--p-space-8: 2rem;
|
|
--p-space-12: 3rem;
|
|
--p-space-16: 4rem;
|
|
--p-space-24: 6rem;
|
|
|
|
/* Border radius scale */
|
|
--p-radius-none: 0;
|
|
--p-radius-sm: 0.25rem;
|
|
--p-radius-md: 0.5rem;
|
|
--p-radius-lg: 0.75rem;
|
|
--p-radius-xl: 1rem;
|
|
--p-radius-full: 9999px;
|
|
|
|
/* Font families */
|
|
--p-font-inter: 'Inter', system-ui, sans-serif;
|
|
--p-font-fraunces: 'Fraunces', serif;
|
|
--p-font-source: 'Source Sans 3', system-ui, sans-serif;
|
|
--p-font-space: 'Space Grotesk', system-ui, sans-serif;
|
|
--p-font-baskerville: 'Libre Baskerville', Georgia, serif;
|
|
--p-font-nunito: 'Nunito', system-ui, sans-serif;
|
|
--p-font-outfit: 'Outfit', system-ui, sans-serif;
|
|
--p-font-avenir: 'Nunito Sans', 'Avenir Next', 'Avenir', system-ui, sans-serif;
|
|
|
|
/* Font size scale */
|
|
--p-text-xs: 0.75rem;
|
|
--p-text-sm: 0.875rem;
|
|
--p-text-base: 1rem;
|
|
--p-text-lg: 1.125rem;
|
|
--p-text-xl: 1.25rem;
|
|
--p-text-2xl: 1.5rem;
|
|
--p-text-3xl: 1.875rem;
|
|
--p-text-4xl: 2.25rem;
|
|
|
|
/* Animation durations */
|
|
--p-duration-fast: 0.1s;
|
|
--p-duration-normal: 0.2s;
|
|
--p-duration-slow: 0.35s;
|
|
|
|
/* Easing functions */
|
|
--p-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
--p-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
|
/* Shadow base */
|
|
--p-shadow-color: 0 0% 0%;
|
|
--p-shadow-strength: 0.06;
|
|
}
|