diff --git a/src/pages/demo/tmip.astro b/src/pages/demo/tmip.astro new file mode 100644 index 0000000..b52780b --- /dev/null +++ b/src/pages/demo/tmip.astro @@ -0,0 +1,7 @@ +--- +// Démo — thème TMIP (orange / jaune / navy). +import KitchenSink from "../../demo/KitchenSink.astro"; +import "../../../theme/tmip.css"; +--- + + diff --git a/theme/tmip.css b/theme/tmip.css index b331081..3fb3226 100644 --- a/theme/tmip.css +++ b/theme/tmip.css @@ -1,38 +1,96 @@ /* ========================================================================== theme/tmip.css — tmip.trans-former.fr - PLACEHOLDER — palette à confirmer, sera remplie au prompt P2 (migration - TMIP). Ne pas importer en l'état : sans surcharge, le site tourne sur le - thème neutre de tokens.css. + Palette extraite du site réel (P2, 2026-07-20) : orange #e87425 + jaune + #f9d400 + navy #080c21, dark mode navy. Poppins partout (identité TMIP), + Open Sans en police secondaire côté site (--tmip-font-secondary). - À remplir en clonant la structure de theme/base.css : - - stacks --font-heading / --font-body - - bloc clair (:root) - - bloc sombre (:root[data-theme="dark"]) - - duplication sombre dans @media (prefers-color-scheme: dark) - avec le garde :root:not([data-theme="light"]) + Corrections AA vs l'existant : + - --on-primary = navy (blanc sur orange = 3.0:1, insuffisant en texte) + - --link clair = #bd5512 (l'orange brut sur blanc = 3.0:1) + - --text-subtle éclairci/foncé pour tenir 4.5:1 dans les deux modes ========================================================================== */ -/* :root { - --font-heading: ... ; - --font-body: ... ; + --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; + --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; + --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, Consolas, monospace; - --bg: ... ; - --bg-alt: ... ; - --surface: ... ; - --surface-2: ... ; - --text: ... ; - --text-muted: ... ; - --text-subtle: ... ; - --border: ... ; - --border-strong: ... ; - --primary: ... ; - --primary-hover: ... ; - --on-primary: ... ; - --accent: ... ; - --on-accent: ... ; - --link: ... ; - --link-hover: ... ; - --focus-ring: ... ; + /* Clair */ + --bg: #ffffff; + --bg-alt: #f7f8fc; + --surface: #ffffff; + --surface-2: #f1f3f9; + + --text: #1a1a2e; + --text-muted: #6b7280; + --text-subtle: #6e7583; + + --border: #e5e7eb; + --border-strong: #9ca3af; + + --primary: #e87425; + --primary-hover: #d4661e; + --on-primary: #080c21; + + --accent: #f9d400; + --on-accent: #080c21; + + --link: #bd5512; + --link-hover: #a34a0f; + + --focus-ring: #d4661e; +} + +:root[data-theme="dark"] { + --bg: #0f1123; + --bg-alt: #161929; + --surface: #1a1f36; + --surface-2: #1e2440; + + --text: #e2e8f0; + --text-muted: #94a3b8; + --text-subtle: #8093ab; + + --border: #2d3353; + --border-strong: #4a5480; + + --primary: #e87425; + --primary-hover: #f08b45; + --on-primary: #080c21; + + --accent: #f9d400; + --on-accent: #080c21; + + --link: #ef8b3f; + --link-hover: #f5a468; + + --focus-ring: #e87425; +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --bg: #0f1123; + --bg-alt: #161929; + --surface: #1a1f36; + --surface-2: #1e2440; + + --text: #e2e8f0; + --text-muted: #94a3b8; + --text-subtle: #8093ab; + + --border: #2d3353; + --border-strong: #4a5480; + + --primary: #e87425; + --primary-hover: #f08b45; + --on-primary: #080c21; + + --accent: #f9d400; + --on-accent: #080c21; + + --link: #ef8b3f; + --link-hover: #f5a468; + + --focus-ring: #e87425; + } } -*/