P1 fondation : tokens layerés, reset, thèmes (base/renovation/aep/tmip), 9 primitives Astro, pont Tailwind 4, démo kitchen sink

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-19 18:31:52 +02:00
commit 795ca7ed4e
28 changed files with 8043 additions and 0 deletions
--- a/theme/base.css
+++ b/theme/base.css
@@ -0,0 +1,94 @@
+/* ==========================================================================
+   theme/base.css — thème neutre de départ.
+   À CLONER pour créer le thème d'un nouveau site :
+     cp theme/base.css theme/mon-site.css
+   Un thème ne surcharge QUE la palette et le couple de polices.
+   Jamais les échelles, le spacing, les rayons, le motion, le layout.
+   Structure obligatoire : bloc clair + bloc [data-theme="dark"]
+   + duplication dans @media (prefers-color-scheme: dark).
+   ========================================================================== */
+
+:root {
+  /* Polices du site (charger les @font-face côté site, fallbacks ici) */
+  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+
+  /* Palette claire — remplacer par la palette du site */
+  --bg: #ffffff;
+  --bg-alt: #f5f5f3;
+  --surface: #ffffff;
+  --surface-2: #eeeeeb;
+
+  --text: #1b1b1f;
+  --text-muted: #4b4b52;
+  --text-subtle: #6e6e76;
+
+  --border: #e0e0dd;
+  --border-strong: #a8a8a2;
+
+  --primary: #1b1b1f;
+  --primary-hover: #333338;
+  --on-primary: #ffffff;
+
+  --accent: #1b1b1f;
+  --on-accent: #ffffff;
+
+  --link: #1d4ed8;
+  --link-hover: #1e40af;
+
+  --focus-ring: #2563eb;
+}
+
+:root[data-theme="dark"] {
+  --bg: #121214;
+  --bg-alt: #18181b;
+  --surface: #1e1e21;
+  --surface-2: #26262a;
+
+  --text: #ededf0;
+  --text-muted: #b4b4bb;
+  --text-subtle: #8b8b93;
+
+  --border: #2f2f34;
+  --border-strong: #4d4d55;
+
+  --primary: #ededf0;
+  --primary-hover: #ffffff;
+  --on-primary: #121214;
+
+  --accent: #ededf0;
+  --on-accent: #121214;
+
+  --link: #8ab4f8;
+  --link-hover: #aecbfa;
+
+  --focus-ring: #8ab4f8;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #121214;
+    --bg-alt: #18181b;
+    --surface: #1e1e21;
+    --surface-2: #26262a;
+
+    --text: #ededf0;
+    --text-muted: #b4b4bb;
+    --text-subtle: #8b8b93;
+
+    --border: #2f2f34;
+    --border-strong: #4d4d55;
+
+    --primary: #ededf0;
+    --primary-hover: #ffffff;
+    --on-primary: #121214;
+
+    --accent: #ededf0;
+    --on-accent: #121214;
+
+    --link: #8ab4f8;
+    --link-hover: #aecbfa;
+
+    --focus-ring: #8ab4f8;
+  }
+}