80 lines
3.4 KiB
CSS
80 lines
3.4 KiB
CSS
/* ============================================================
|
|
* 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 <html data-theme="dark|light"> (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; }
|