/* ============================================================ * Tailwind v4 source — built into assets/static/css/app.css * ------------------------------------------------------------ * Stack: Tailwind CSS v4 + Alpine.js v3 + PenguinUI components * (https://www.penguinui.com). PenguinUI is copy-paste: paste a * component's markup into a template and it picks up the design * tokens defined in the @theme block below. * * Build: make css (one-off, minified) * make css-watch (rebuild on change while developing) * * The compiled output assets/static/css/app.css IS committed, so * the Docker image / loco static server need no Node at runtime. * ============================================================ */ @import "tailwindcss"; /* Scan every template so used utility classes are emitted. */ @source "../views"; /* penguinui-components/ is the read-only vendored PenguinUI library * (reference only — never {% include %}'d, never edited). Tailwind v4 * auto-detects it from the project root, so exclude it explicitly or * its 177 files bloat the build with classes we never render. */ @source not "../../penguinui-components"; /* PenguinUI toggles dark styles with a `dark:` variant. This app * already sets (see base.html), so * key the variant off that attribute instead of the OS setting. */ @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *)); /* === PenguinUI design tokens ================================ * "Modern" starting palette. Swap any line for another Tailwind * color (e.g. --color-primary: var(--color-emerald-600)) or grab * a ready-made theme from https://www.penguinui.com/theme. * Components reference these as bg-primary, text-on-surface, * dark:bg-surface-dark, border-outline, etc. * ============================================================ */ @theme { /* light mode */ --color-surface: var(--color-white); --color-surface-alt: var(--color-slate-100); --color-on-surface: var(--color-slate-700); --color-on-surface-strong: var(--color-slate-900); --color-primary: var(--color-indigo-600); --color-on-primary: var(--color-white); --color-secondary: var(--color-slate-600); --color-on-secondary: var(--color-white); --color-outline: var(--color-slate-300); --color-outline-strong: var(--color-slate-800); /* dark mode */ --color-surface-dark: var(--color-slate-900); --color-surface-dark-alt: var(--color-slate-800); --color-on-surface-dark: var(--color-slate-300); --color-on-surface-dark-strong: var(--color-white); --color-primary-dark: var(--color-indigo-400); --color-on-primary-dark: var(--color-slate-950); --color-secondary-dark: var(--color-slate-300); --color-on-secondary-dark: var(--color-slate-950); --color-outline-dark: var(--color-slate-700); --color-outline-dark-strong: var(--color-slate-300); /* shared status colors (same in both modes) */ --color-info: var(--color-sky-500); --color-on-info: var(--color-white); --color-success: var(--color-green-600); --color-on-success: var(--color-white); --color-warning: var(--color-amber-500); --color-on-warning: var(--color-white); --color-danger: var(--color-red-600); --color-on-danger: var(--color-white); /* shared design tokens */ --radius-radius: 0.375rem; } /* Hide Alpine x-cloak elements until Alpine initializes. */ [x-cloak] { display: none !important; }