diff --git a/assets/css/main.css b/assets/css/main.css index 9ce8eed..bb5c399 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -3,28 +3,44 @@ @tailwind utilities; /* ── Palette NAV V2 — Sobre institutionnel ─────────────────────────────── */ +/* --nav-* sont désormais des ALIAS vers les rôles @transformer/ui (tokens.css + + theme/aep.css, chargés avant ce fichier dans nuxt.config.ts). + --nav-primary-raw, --nav-primary-solid et --nav-text-on-primary restent des + valeurs PROPRES à nav-carte (non aliasées) : + - le DS n'a pas de triplet RGB (--nav-primary-raw) ; + - le --text du DS en sombre (#e8ecf5) ne correspond pas à la teinte bleu + nuit voulue ici pour --nav-primary-solid (#c8d2f0) ; + - --nav-text-on-primary sert de texte de contraste à la fois sur + --nav-primary (translucide, alias DS) ET sur --nav-primary-solid (opaque, + propre à nav-carte) — deux fonds dont la légèreté s'inverse en sombre + (translucide ≈ fond sombre, solid = lavande claire). Le rôle --on-primary + du DS ne colle qu'au premier cas ; l'aliaser cassait le contraste du AEP + logo, des boutons trouver-du-taf, BandeauBas, SimulateurFeature, + FicheDetail (texte clair sur --primary-solid clair en sombre — testé au + pixel le 25/09, illisible). Gardé littéral = identique à la prod avant B3. + Idem --nav-accent-soft, sans équivalent DS. (B3-M0, 2026-09-25) */ :root { /* Fonds */ - --nav-bg: #f8f6f1; - --nav-bg-alt: #eee9df; - --nav-surface: #ffffff; + --nav-bg: var(--bg); + --nav-bg-alt: var(--bg-alt); + --nav-surface: var(--surface); /* Bleu nuit — 60% d'opacité sur les surfaces */ --nav-primary-raw: 26, 34, 56; - --nav-primary: rgba(26, 34, 56, 0.6); + --nav-primary: var(--primary); --nav-primary-solid: #1a2238; /* Accent safran */ - --nav-accent: #f5b342; + --nav-accent: var(--accent); --nav-accent-soft: rgba(245, 179, 66, 0.85); /* Texte */ - --nav-text: #1a2238; - --nav-text-muted: rgba(26, 34, 56, 0.55); + --nav-text: var(--text); + --nav-text-muted: var(--text-muted); --nav-text-on-primary: #f8f6f1; /* Typographie */ - --nav-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + --nav-font: var(--font-body); } @layer base { @@ -58,25 +74,25 @@ /* Focus ring accessibilité */ *:focus-visible { - outline: 2px solid var(--nav-accent); + outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* ── Dark mode ──────────────────────────────────────────────────────────── */ .dark { - --nav-bg: #111520; - --nav-bg-alt: #1e2538; - --nav-surface: #1a2238; + --nav-bg: var(--bg); + --nav-bg-alt: var(--bg-alt); + --nav-surface: var(--surface); --nav-primary-raw: 200, 210, 240; - --nav-primary: rgba(200, 210, 240, 0.15); + --nav-primary: var(--primary); --nav-primary-solid: #c8d2f0; - --nav-accent: #f5b342; + --nav-accent: var(--accent); --nav-accent-soft: rgba(245, 179, 66, 0.85); - --nav-text: #e8ecf5; - --nav-text-muted: rgba(200, 210, 240, 0.55); + --nav-text: var(--text); + --nav-text-muted: var(--text-muted); --nav-text-on-primary: #111520; } diff --git a/nuxt.config.ts b/nuxt.config.ts index e20b5d6..a91ca78 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -1,6 +1,8 @@ export default defineNuxtConfig({ modules: ['@nuxtjs/tailwindcss'], css: [ + '@transformer/ui/tokens.css', + '@transformer/ui/theme/aep.css', '~/assets/css/main.css', 'leaflet/dist/leaflet.css', 'leaflet.markercluster/dist/MarkerCluster.css', diff --git a/package-lock.json b/package-lock.json index bdf6d04..83cbefe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "hasInstallScript": true, "dependencies": { "@headlessui/vue": "^1.7.23", + "@transformer/ui": "git+https://git.trans-former.fr/jules/design-system.git", "@types/leaflet": "^1.9.21", "@types/leaflet.markercluster": "^1.5.6", "d3": "^7.9.0", @@ -3625,6 +3626,11 @@ "vue": "^2.7.0 || ^3.0.0" } }, + "node_modules/@transformer/ui": { + "version": "0.1.0", + "resolved": "git+https://git.trans-former.fr/jules/design-system.git#057de406c804315e09d28fb26f10941d61e461b1", + "license": "UNLICENSED" + }, "node_modules/@tybys/wasm-util": { "version": "0.10.1", "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz", diff --git a/package.json b/package.json index c42ee54..49ca590 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@headlessui/vue": "^1.7.23", + "@transformer/ui": "git+https://git.trans-former.fr/jules/design-system.git", "@types/leaflet": "^1.9.21", "@types/leaflet.markercluster": "^1.5.6", "d3": "^7.9.0", diff --git a/tailwind.config.js b/tailwind.config.js index 91c6543..30b3050 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,16 +11,18 @@ export default { extend: { colors: { /* Palette NAV V2 — Sobre institutionnel */ + /* Pointent vers les variables CSS --nav-* (alias des rôles @transformer/ui, + voir assets/css/main.css) pour rester cohérentes clair/sombre. (B3-M0) */ nav: { - bg: '#f8f6f1', - 'bg-alt':'#eee9df', - surface: '#ffffff', - primary: 'rgba(26, 34, 56, 0.6)', - 'primary-solid': '#1a2238', - accent: '#f5b342', - text: '#1a2238', - 'text-muted': 'rgba(26, 34, 56, 0.55)', - 'text-on-primary': '#f8f6f1', + bg: 'var(--nav-bg)', + 'bg-alt':'var(--nav-bg-alt)', + surface: 'var(--nav-surface)', + primary: 'var(--nav-primary)', + 'primary-solid': 'var(--nav-primary-solid)', + accent: 'var(--nav-accent)', + text: 'var(--nav-text)', + 'text-muted': 'var(--nav-text-muted)', + 'text-on-primary': 'var(--nav-text-on-primary)', }, /* Héritage V1 — gardé pour composants existants */ sage: {