82583822f5
replace Tailwind CLI with esbuild for admin CSS bundling. admin now uses hand-written utility classes (admin/utilities.css), static heroicon CSS generated by mix generate_admin_icons, plain CSS colour themes extracted from DaisyUI plugin config, and minimal resets. rename app.css to admin.css for clarity alongside shop.css. delete vendor/daisyui-theme.js and vendor/heroicons.js. no Tailwind dependency remains in the project. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
185 lines
5.1 KiB
CSS
185 lines
5.1 KiB
CSS
/* Admin CSS — bundled by esbuild */
|
|
|
|
/* Reset and colour themes */
|
|
@import "./admin/reset.css";
|
|
@import "./admin/themes.css";
|
|
|
|
/* Theme CSS layers (used by theme editor preview) */
|
|
@import "./theme-primitives.css";
|
|
@import "./theme-layer2-attributes.css";
|
|
@import "./theme-semantic.css";
|
|
|
|
/* Admin components, icons, and utilities */
|
|
@import "./admin/components.css";
|
|
@import "./admin/icons.css";
|
|
@import "./admin/utilities.css";
|
|
|
|
/* LiveView loading state variants */
|
|
.phx-click-loading, .phx-submit-loading, .phx-change-loading {
|
|
/* Available for component styling */
|
|
}
|
|
|
|
/* =============================================
|
|
THEME EDITOR ONLY: .preview-frame CSS variable switching
|
|
These rules enable live theme switching in the editor.
|
|
Shop pages get CSS variables 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;
|
|
}
|
|
}
|