using penguiui

2026-06-16 12:53:11 +02:00
parent 635cb34810
commit e3b99b0fd8
7 changed files with 334 additions and 215 deletions
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -0,0 +1,73 @@
+/* ============================================================
+ * 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 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; }