perf: split CSS bundles for shop and admin pages
Create separate CSS bundles to reduce shop page load times: - app-shop.css (45KB/7.8KB gzip): Shop pages only, no daisyUI - app.css (139KB): Admin pages with daisyUI and theme editor Key changes: - Add app-shop.css with targeted @source paths for shop files only - Move .preview-frame rules from theme-layer2-attributes.css to app.css - Delete fonts.css (fonts now generated inline by CSSGenerator) - Add inline all-fonts generation in theme editor for typography switching - Configure separate Tailwind profiles and watchers for both bundles Shop pages now load 54% less CSS by excluding: - daisyUI components (admin only) - .preview-frame theme switching rules (editor only) - Admin-specific Tailwind utilities Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,183 +1,12 @@
|
||||
/* ========================================
|
||||
LAYER 2: THEME TOKENS (Attribute-based)
|
||||
LAYER 2: THEME TOKENS (Shared Styles)
|
||||
========================================
|
||||
|
||||
ARCHITECTURE:
|
||||
- .themed is the shared class for all themed content (shop + preview)
|
||||
- .preview-frame uses data-attribute selectors for CSS variable switching (editor only)
|
||||
- Shop pages get CSS variable values inline from CSSGenerator
|
||||
- All visual/behavioral styles use .themed
|
||||
This file contains .themed styles used by both shop and theme editor.
|
||||
The .preview-frame CSS variable switching rules are in app.css (admin only).
|
||||
Shop pages get CSS variables inline from CSSGenerator.
|
||||
======================================== */
|
||||
|
||||
/* =============================================
|
||||
CSS VARIABLE SWITCHING (Editor-only)
|
||||
These set CSS variables based on data attributes.
|
||||
Shop pages get these values inline from CSSGenerator.
|
||||
============================================= */
|
||||
|
||||
.preview-frame {
|
||||
/* Mood - Default (Neutral) */
|
||||
--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;
|
||||
|
||||
/* Typography - Default (Clean) */
|
||||
--t-font-heading: var(--p-font-manrope);
|
||||
--t-font-body: var(--p-font-inter);
|
||||
--t-heading-weight: 600;
|
||||
--t-heading-tracking: -0.02em;
|
||||
|
||||
/* Shape - Default (Soft) */
|
||||
--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);
|
||||
|
||||
/* Density - Default (Balanced) */
|
||||
--t-density: 1;
|
||||
--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));
|
||||
|
||||
/* Mood Variants */
|
||||
&[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;
|
||||
}
|
||||
|
||||
&[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;
|
||||
}
|
||||
|
||||
&[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 Variants */
|
||||
&[data-typography="editorial"] {
|
||||
--t-font-heading: var(--p-font-playfair);
|
||||
--t-font-body: var(--p-font-raleway);
|
||||
--t-heading-weight: 500;
|
||||
--t-heading-tracking: -0.01em;
|
||||
}
|
||||
|
||||
&[data-typography="modern"] {
|
||||
--t-font-heading: var(--p-font-space);
|
||||
--t-font-body: var(--p-font-inter);
|
||||
--t-heading-weight: 500;
|
||||
--t-heading-tracking: -0.03em;
|
||||
}
|
||||
|
||||
&[data-typography="classic"] {
|
||||
--t-font-heading: var(--p-font-cormorant);
|
||||
--t-font-body: var(--p-font-source-serif);
|
||||
--t-heading-weight: 500;
|
||||
--t-heading-tracking: 0;
|
||||
}
|
||||
|
||||
&[data-typography="friendly"] {
|
||||
--t-font-heading: var(--p-font-fraunces);
|
||||
--t-font-body: var(--p-font-work-sans);
|
||||
--t-heading-weight: 600;
|
||||
--t-heading-tracking: -0.01em;
|
||||
}
|
||||
|
||||
&[data-typography="minimal"] {
|
||||
--t-font-heading: var(--p-font-dm-sans);
|
||||
--t-font-body: var(--p-font-source-serif);
|
||||
--t-heading-weight: 500;
|
||||
--t-heading-tracking: 0;
|
||||
}
|
||||
|
||||
&[data-typography="impulse"] {
|
||||
--t-font-heading: var(--p-font-raleway);
|
||||
--t-font-body: var(--p-font-inter);
|
||||
--t-heading-weight: 300;
|
||||
--t-heading-tracking: 0.02em;
|
||||
}
|
||||
|
||||
/* Shape Variants */
|
||||
&[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;
|
||||
}
|
||||
|
||||
&[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);
|
||||
}
|
||||
|
||||
&[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 Variants */
|
||||
&[data-density="spacious"] {
|
||||
--t-density: 1.25;
|
||||
}
|
||||
|
||||
&[data-density="compact"] {
|
||||
--t-density: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
SHARED STYLES (Both Editor and Shop)
|
||||
All visual/behavioral styles use .themed
|
||||
============================================= */
|
||||
|
||||
.themed {
|
||||
/* Font size scale */
|
||||
font-size: calc(16px * var(--t-font-size-scale, 1));
|
||||
|
||||
Reference in New Issue
Block a user