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>
158 lines
4.0 KiB
CSS
158 lines
4.0 KiB
CSS
/* ========================================
|
|
LAYER 2: THEME TOKENS (Attribute-based)
|
|
======================================== */
|
|
|
|
/* Mood - Default (Neutral) */
|
|
.preview-frame {
|
|
--t-surface-base: #ffffff;
|
|
--t-surface-raised: #ffffff;
|
|
--t-surface-sunken: #f5f5f5;
|
|
--t-surface-overlay: rgba(255, 255, 255, 0.95);
|
|
--t-text-primary: #171717;
|
|
--t-text-secondary: #525252;
|
|
--t-text-tertiary: #a3a3a3;
|
|
--t-text-inverse: #ffffff;
|
|
--t-border-default: #e5e5e5;
|
|
--t-border-subtle: #f0f0f0;
|
|
}
|
|
|
|
.preview-frame[data-mood="warm"] {
|
|
--t-surface-base: #fdf8f3;
|
|
--t-surface-raised: #fffcf8;
|
|
--t-surface-sunken: #f5ebe0;
|
|
--t-text-primary: #1c1917;
|
|
--t-text-secondary: #57534e;
|
|
--t-text-tertiary: #a8a29e;
|
|
--t-border-default: #e7e0d8;
|
|
--t-border-subtle: #f0ebe4;
|
|
}
|
|
|
|
.preview-frame[data-mood="cool"] {
|
|
--t-surface-base: #f4f7fb;
|
|
--t-surface-raised: #f8fafc;
|
|
--t-surface-sunken: #e8eff7;
|
|
--t-text-primary: #0f172a;
|
|
--t-text-secondary: #475569;
|
|
--t-text-tertiary: #94a3b8;
|
|
--t-border-default: #d4dce8;
|
|
--t-border-subtle: #e8eff5;
|
|
}
|
|
|
|
.preview-frame[data-mood="dark"] {
|
|
--t-surface-base: #0a0a0a;
|
|
--t-surface-raised: #171717;
|
|
--t-surface-sunken: #000000;
|
|
--t-surface-overlay: rgba(23, 23, 23, 0.95);
|
|
--t-text-primary: #fafafa;
|
|
--t-text-secondary: #a3a3a3;
|
|
--t-text-tertiary: #737373;
|
|
--t-text-inverse: #171717;
|
|
--t-border-default: #262626;
|
|
--t-border-subtle: #1c1c1c;
|
|
--p-shadow-strength: 0.25;
|
|
}
|
|
|
|
/* Typography - Default (Clean/Inter) */
|
|
.preview-frame {
|
|
--t-font-heading: var(--p-font-inter);
|
|
--t-font-body: var(--p-font-inter);
|
|
--t-heading-weight: 600;
|
|
--t-heading-tracking: -0.025em;
|
|
}
|
|
|
|
.preview-frame[data-typography="editorial"] {
|
|
--t-font-heading: var(--p-font-fraunces);
|
|
--t-font-body: var(--p-font-source);
|
|
--t-heading-weight: 600;
|
|
--t-heading-tracking: -0.02em;
|
|
}
|
|
|
|
.preview-frame[data-typography="modern"] {
|
|
--t-font-heading: var(--p-font-space);
|
|
--t-font-body: var(--p-font-space);
|
|
--t-heading-weight: 500;
|
|
--t-heading-tracking: -0.03em;
|
|
}
|
|
|
|
.preview-frame[data-typography="classic"] {
|
|
--t-font-heading: var(--p-font-baskerville);
|
|
--t-font-body: var(--p-font-source);
|
|
--t-heading-weight: 400;
|
|
--t-heading-tracking: 0;
|
|
}
|
|
|
|
.preview-frame[data-typography="friendly"] {
|
|
--t-font-heading: var(--p-font-nunito);
|
|
--t-font-body: var(--p-font-nunito);
|
|
--t-heading-weight: 700;
|
|
--t-heading-tracking: -0.01em;
|
|
}
|
|
|
|
.preview-frame[data-typography="minimal"] {
|
|
--t-font-heading: var(--p-font-outfit);
|
|
--t-font-body: var(--p-font-outfit);
|
|
--t-heading-weight: 300;
|
|
--t-heading-tracking: 0;
|
|
}
|
|
|
|
.preview-frame[data-typography="impulse"] {
|
|
--t-font-heading: var(--p-font-avenir);
|
|
--t-font-body: var(--p-font-avenir);
|
|
--t-heading-weight: 300;
|
|
--t-heading-tracking: 0.02em;
|
|
}
|
|
|
|
/* Shape - Default (Soft) */
|
|
.preview-frame {
|
|
--t-radius-sm: var(--p-radius-sm);
|
|
--t-radius-md: var(--p-radius-md);
|
|
--t-radius-lg: var(--p-radius-lg);
|
|
--t-radius-button: var(--p-radius-md);
|
|
--t-radius-card: var(--p-radius-lg);
|
|
--t-radius-input: var(--p-radius-md);
|
|
--t-radius-image: var(--p-radius-md);
|
|
}
|
|
|
|
.preview-frame[data-shape="sharp"] {
|
|
--t-radius-sm: 0;
|
|
--t-radius-md: 0;
|
|
--t-radius-lg: 0;
|
|
--t-radius-button: 0;
|
|
--t-radius-card: 0;
|
|
--t-radius-input: 0;
|
|
--t-radius-image: 0;
|
|
}
|
|
|
|
.preview-frame[data-shape="round"] {
|
|
--t-radius-sm: var(--p-radius-md);
|
|
--t-radius-md: var(--p-radius-lg);
|
|
--t-radius-lg: var(--p-radius-xl);
|
|
--t-radius-button: var(--p-radius-lg);
|
|
--t-radius-card: var(--p-radius-xl);
|
|
--t-radius-input: var(--p-radius-lg);
|
|
--t-radius-image: var(--p-radius-lg);
|
|
}
|
|
|
|
.preview-frame[data-shape="pill"] {
|
|
--t-radius-sm: var(--p-radius-full);
|
|
--t-radius-md: var(--p-radius-full);
|
|
--t-radius-lg: var(--p-radius-xl);
|
|
--t-radius-button: var(--p-radius-full);
|
|
--t-radius-card: var(--p-radius-xl);
|
|
--t-radius-input: var(--p-radius-full);
|
|
--t-radius-image: var(--p-radius-lg);
|
|
}
|
|
|
|
/* Density - Default (Balanced) */
|
|
.preview-frame {
|
|
--t-density: 1;
|
|
}
|
|
|
|
.preview-frame[data-density="spacious"] {
|
|
--t-density: 1.25;
|
|
}
|
|
|
|
.preview-frame[data-density="compact"] {
|
|
--t-density: 0.85;
|
|
}
|