jamey/simpleshop_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
c5a251398a
simpleshop_theme/assets/css/theme-layer2-attributes.css

321 lines
7.6 KiB
CSS
Raw Normal View History

fix: add data attributes and Google Fonts to enable theme visual changes - 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>
2025-12-31 00:24:53 +00:00
/* ========================================
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);
feat: enhance theme customization with layout controls and real product images 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>
2026-01-01 16:16:05 +00:00
--t-heading-weight: 700;
fix: add data attributes and Google Fonts to enable theme visual changes - 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>
2025-12-31 00:24:53 +00:00
--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;
}
fix: support grid-cols-4, accent color, and header layout controls - Fix grid columns 4 by using conditional logic instead of string interpolation - Simplify CSS generator to only generate accent colors (mood/typography/shape/density now use data attributes) - Add header component to all 7 preview pages with logo, nav, and cart - Add header layout CSS for centered and minimal variants - Move nav display property to CSS to enable minimal mode hiding This resolves all high-priority theme control issues: - Grid columns now supports 2, 3, and 4 columns - Accent color picker now updates button colors - Header layout control now works (standard, centered, minimal) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-31 00:45:14 +00:00
feat: implement density-aware spacing system - 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>
2025-12-31 00:51:28 +00:00
/* Density-aware spacing variables */
.preview-frame {
--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));
}
fix: support grid-cols-4, accent color, and header layout controls - Fix grid columns 4 by using conditional logic instead of string interpolation - Simplify CSS generator to only generate accent colors (mood/typography/shape/density now use data attributes) - Add header component to all 7 preview pages with logo, nav, and cart - Add header layout CSS for centered and minimal variants - Move nav display property to CSS to enable minimal mode hiding This resolves all high-priority theme control issues: - Grid columns now supports 2, 3, and 4 columns - Accent color picker now updates button colors - Header layout control now works (standard, centered, minimal) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-31 00:45:14 +00:00
/* Header Layout */
.shop-nav {
display: flex;
}
feat: enhance theme customization with layout controls and real product images 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>
2026-01-01 16:16:05 +00:00
/* Standard header - logo left, nav center, cart right */
.preview-frame[data-header="standard"] .shop-header {
justify-content: space-between;
}
/* Centered header - logo on top, nav and cart on same row below */
fix: support grid-cols-4, accent color, and header layout controls - Fix grid columns 4 by using conditional logic instead of string interpolation - Simplify CSS generator to only generate accent colors (mood/typography/shape/density now use data attributes) - Add header component to all 7 preview pages with logo, nav, and cart - Add header layout CSS for centered and minimal variants - Move nav display property to CSS to enable minimal mode hiding This resolves all high-priority theme control issues: - Grid columns now supports 2, 3, and 4 columns - Accent color picker now updates button colors - Header layout control now works (standard, centered, minimal) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-31 00:45:14 +00:00
.preview-frame[data-header="centered"] .shop-header {
feat: enhance theme customization with layout controls and real product images 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>
2026-01-01 16:16:05 +00:00
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.5rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.preview-frame[data-header="centered"] .shop-logo {
width: 100%;
justify-content: center;
fix: support grid-cols-4, accent color, and header layout controls - Fix grid columns 4 by using conditional logic instead of string interpolation - Simplify CSS generator to only generate accent colors (mood/typography/shape/density now use data attributes) - Add header component to all 7 preview pages with logo, nav, and cart - Add header layout CSS for centered and minimal variants - Move nav display property to CSS to enable minimal mode hiding This resolves all high-priority theme control issues: - Grid columns now supports 2, 3, and 4 columns - Accent color picker now updates button colors - Header layout control now works (standard, centered, minimal) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-31 00:45:14 +00:00
text-align: center;
}
.preview-frame[data-header="centered"] .shop-nav {
justify-content: center;
}
feat: enhance theme customization with layout controls and real product images 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>
2026-01-01 16:16:05 +00:00
.preview-frame[data-header="centered"] .shop-cart {
/* Cart flows inline with nav, no absolute positioning */
}
/* Left header - logo and nav grouped left, cart right */
.preview-frame[data-header="left"] .shop-header {
justify-content: flex-start;
gap: 2rem;
}
.preview-frame[data-header="left"] .shop-cart {
margin-left: auto;
}
/* Sticky header */
.preview-frame[data-sticky="true"] .shop-header {
position: sticky;
top: 0;
z-index: 50;
}
/* Layout Width */
.preview-frame[data-layout="contained"] .max-w-7xl {
max-width: 1024px;
}
.preview-frame[data-layout="wide"] .max-w-7xl {
max-width: 1280px;
}
.preview-frame[data-layout="full"] .max-w-7xl {
max-width: 100%;
padding-left: 2rem;
padding-right: 2rem;
}
/* Card Shadow */
.preview-frame[data-shadow="none"] .product-card,
.preview-frame[data-shadow="none"] .category-card {
box-shadow: none;
}
.preview-frame[data-shadow="sm"] .product-card,
.preview-frame[data-shadow="sm"] .category-card {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.preview-frame[data-shadow="md"] .product-card,
.preview-frame[data-shadow="md"] .category-card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.preview-frame[data-shadow="lg"] .product-card,
.preview-frame[data-shadow="lg"] .category-card {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
/* Product Badges */
.product-badge {
position: absolute;
top: 0.5rem;
left: 0.5rem;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
border-radius: var(--t-radius-sm, 4px);
z-index: 10;
}
.badge-sale {
background-color: var(--t-sale-color, #dc2626);
color: #ffffff;
}
.badge-new {
background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
color: var(--t-text-inverse);
}
/* Product Hover Image */
.product-image-container {
position: relative;
}
.product-image-hover {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.product-card:hover .product-image-hover {
opacity: 1;
}
.product-card:hover .product-image-primary {
opacity: 0;
}
/* Social Links */
.social-link:hover {
background-color: var(--t-surface-sunken);
color: var(--t-text-primary);
}
/* Header Icon Buttons */
.header-icon-btn:hover {
background-color: var(--t-surface-sunken);
color: var(--t-text-primary);
}
/* Search Modal Animation */
.search-modal {
opacity: 1;
transition: opacity 0.2s ease;
}
.search-modal-content {
transform: translateY(0);
transition: transform 0.2s ease;
fix: support grid-cols-4, accent color, and header layout controls - Fix grid columns 4 by using conditional logic instead of string interpolation - Simplify CSS generator to only generate accent colors (mood/typography/shape/density now use data attributes) - Add header component to all 7 preview pages with logo, nav, and cart - Add header layout CSS for centered and minimal variants - Move nav display property to CSS to enable minimal mode hiding This resolves all high-priority theme control issues: - Grid columns now supports 2, 3, and 4 columns - Accent color picker now updates button colors - Header layout control now works (standard, centered, minimal) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-31 00:45:14 +00:00
}
Reference in New Issue Copy Permalink