mirror of
https://github.com/siop-spelev/siop2.git
synced 2026-08-08 12:41:54 +00:00
4f3af5af4f
- React 19 + Vite + Tailwind v4 : tokens.css copié tel quel (source de vérité), classes composants extraites de la maquette validée, Manrope auto-hébergée, primitives shadcn-style possédées (Button cva, menu Radix) - connexion fidèle à la maquette ; liste démo affichée seulement si /auth/demo-accounts répond (404 ⇒ rien — ADR-002, l'API seule source) - coquille : sidebar 4 groupes avec rail safran actif (écrans futurs marqués R1-R3), topbar recherche/thème/chip DÉMO + sélecteur de rôle (bascule 101 ms, critère < 3 s) ; page /design = référence vivante des revues pixel - règle d'or : schema.d.ts généré depuis docs/openapi.json et committé (openapi-typescript + openapi-fetch) - tokens.css : tokens --nav-* ajoutés (valeurs de la maquette validée) ; seed réaligné sur les personas de la maquette - vérifié en navigateur réel (Playwright + Chrome headless) : 7 captures, parcours démo complet, bi-thème, zéro erreur console ; typecheck + vitest + build OK Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
170 lines
6.2 KiB
CSS
170 lines
6.2 KiB
CSS
/*
|
|
* SIOP V2 — Design tokens (source de vérité visuelle)
|
|
* Importé tel quel par apps/web ; les maquettes HD l'utilisent aussi.
|
|
* Règle : AUCUNE valeur visuelle codée en dur hors de ce fichier.
|
|
* Thèmes : clair par défaut, sombre via @media + surcharge [data-theme].
|
|
*/
|
|
|
|
:root {
|
|
/* ——— Marque ——— */
|
|
--primaire: #1f4fb8; /* bleu-treuil : actions, liens, focus */
|
|
--primaire-actif: #1a439c;
|
|
--primaire-doux: #eaf0fb; /* fonds de sélection/hover primaires */
|
|
--safran: #dd8a0b; /* accent de marque — parcimonieux */
|
|
--safran-doux: #fdf3e3;
|
|
|
|
/* ——— Neutres (acier, biais froid) ——— */
|
|
--fond: #f5f7fa;
|
|
--surface: #ffffff;
|
|
--surface-2: #eef2f7; /* en-têtes de table, zones repliées */
|
|
--bordure: #dce3ec;
|
|
--bordure-forte: #b9c4d4;
|
|
--encre: #1b2534; /* texte principal */
|
|
--encre-2: #55647a; /* texte secondaire */
|
|
--encre-3: #8494ab; /* placeholder, désactivé */
|
|
|
|
/* ——— Statuts OT (réservés) ——— */
|
|
--st-ouvert: #3d6fe0; --st-ouvert-fond: #e9effc;
|
|
--st-encours: #6d5bd8; --st-encours-fond: #efecfa;
|
|
--st-attente: #b96f07; --st-attente-fond: #fbf1df;
|
|
--st-termine: #178a50; --st-termine-fond: #e6f5ec;
|
|
--st-annule: #68788f; --st-annule-fond: #edf0f4;
|
|
|
|
/* ——— Priorités (réservées) ——— */
|
|
--prio-bloque: #d92626; --prio-bloque-fond: #fdeaea; /* personne bloquée */
|
|
--prio-haute: #d92626;
|
|
--prio-moyenne: #b96f07;
|
|
--prio-basse: #178a50;
|
|
--prio-aucune: #8494ab;
|
|
|
|
/* ——— Sémantique générale ——— */
|
|
--succes: #178a50;
|
|
--alerte: #b96f07;
|
|
--danger: #d92626;
|
|
--info: #3d6fe0;
|
|
|
|
/* ——— Palette graphique (analytics, ordre FIXE, validée CVD) ——— */
|
|
--graf-1: #3b69d6;
|
|
--graf-2: #dd8a0b;
|
|
--graf-3: #1f9e8e;
|
|
--graf-4: #8a63d2;
|
|
--graf-grille: #e6ebf2;
|
|
|
|
/* ——— Navigation (sidebar toujours sombre — identité) ——— */
|
|
--nav-fond: #16233b;
|
|
--nav-encre: #c6d2e4;
|
|
--nav-encre-vif: #ffffff;
|
|
--nav-bordure: #24344f;
|
|
|
|
/* ——— Typographie ——— */
|
|
--police-ui: "Manrope", "Avenir Next", "Segoe UI Variable", system-ui, sans-serif;
|
|
--police-mono: "SF Mono", ui-monospace, "Cascadia Mono", monospace;
|
|
--t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px;
|
|
--t-16: 16px; --t-20: 20px; --t-24: 24px; --t-32: 32px;
|
|
|
|
/* ——— Forme & espace (grille 4 px) ——— */
|
|
--e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px;
|
|
--rayon: 10px; /* cartes */
|
|
--rayon-controle: 8px; /* inputs, boutons */
|
|
--rayon-pastille: 999px;
|
|
--ombre-menu: 0 8px 24px rgb(16 30 54 / 0.14);
|
|
--rail: 3px; /* motif signature : rail actif safran */
|
|
|
|
/* ——— Mouvement ——— */
|
|
--transition: 140ms ease-out;
|
|
}
|
|
|
|
/* ——— Thème sombre (« machinerie de nuit », pas une inversion) ——— */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--nav-fond: #0c1524;
|
|
--nav-encre: #a7b4c8;
|
|
--nav-encre-vif: #f2f6fc;
|
|
--nav-bordure: #1e2c44;
|
|
|
|
--primaire: #6e92e8;
|
|
--primaire-actif: #8facf0;
|
|
--primaire-doux: #1d2c4c;
|
|
--safran: #e89a1f;
|
|
--safran-doux: #33270f;
|
|
|
|
--fond: #0f1622;
|
|
--surface: #182234;
|
|
--surface-2: #1e2a40;
|
|
--bordure: #2b3850;
|
|
--bordure-forte: #3d4d6b;
|
|
--encre: #e8edf5;
|
|
--encre-2: #a7b4c8;
|
|
--encre-3: #6d7d96;
|
|
|
|
--st-ouvert: #7da2ee; --st-ouvert-fond: #1c2a47;
|
|
--st-encours: #a394ec; --st-encours-fond: #262040;
|
|
--st-attente: #e0a33c; --st-attente-fond: #322510;
|
|
--st-termine: #4bc084; --st-termine-fond: #12301f;
|
|
--st-annule: #93a3ba; --st-annule-fond: #222d3f;
|
|
|
|
--prio-bloque: #f26d6d; --prio-bloque-fond: #3a1414;
|
|
--prio-haute: #f26d6d;
|
|
--prio-moyenne: #e0a33c;
|
|
--prio-basse: #4bc084;
|
|
--prio-aucune: #6d7d96;
|
|
|
|
--succes: #4bc084;
|
|
--alerte: #e0a33c;
|
|
--danger: #f26d6d;
|
|
--info: #7da2ee;
|
|
|
|
--graf-1: #5580e4;
|
|
--graf-2: #c7820a;
|
|
--graf-3: #26a896;
|
|
--graf-4: #9673de;
|
|
--graf-grille: #24304a;
|
|
|
|
--ombre-menu: 0 8px 24px rgb(0 0 0 / 0.45);
|
|
}
|
|
}
|
|
|
|
/* Le sélecteur de thème de l'app doit GAGNER dans les deux sens. */
|
|
:root[data-theme="light"] {
|
|
--nav-fond: #16233b; --nav-encre: #c6d2e4; --nav-encre-vif: #ffffff; --nav-bordure: #24344f;
|
|
--primaire: #1f4fb8; --primaire-actif: #1a439c; --primaire-doux: #eaf0fb;
|
|
--safran: #dd8a0b; --safran-doux: #fdf3e3;
|
|
--fond: #f5f7fa; --surface: #ffffff; --surface-2: #eef2f7;
|
|
--bordure: #dce3ec; --bordure-forte: #b9c4d4;
|
|
--encre: #1b2534; --encre-2: #55647a; --encre-3: #8494ab;
|
|
--st-ouvert: #3d6fe0; --st-ouvert-fond: #e9effc;
|
|
--st-encours: #6d5bd8; --st-encours-fond: #efecfa;
|
|
--st-attente: #b96f07; --st-attente-fond: #fbf1df;
|
|
--st-termine: #178a50; --st-termine-fond: #e6f5ec;
|
|
--st-annule: #68788f; --st-annule-fond: #edf0f4;
|
|
--prio-bloque: #d92626; --prio-bloque-fond: #fdeaea;
|
|
--prio-haute: #d92626; --prio-moyenne: #b96f07; --prio-basse: #178a50; --prio-aucune: #8494ab;
|
|
--succes: #178a50; --alerte: #b96f07; --danger: #d92626; --info: #3d6fe0;
|
|
--graf-1: #3b69d6; --graf-2: #dd8a0b; --graf-3: #1f9e8e; --graf-4: #8a63d2;
|
|
--graf-grille: #e6ebf2;
|
|
--ombre-menu: 0 8px 24px rgb(16 30 54 / 0.14);
|
|
}
|
|
:root[data-theme="dark"] {
|
|
--nav-fond: #0c1524; --nav-encre: #a7b4c8; --nav-encre-vif: #f2f6fc; --nav-bordure: #1e2c44;
|
|
--primaire: #6e92e8; --primaire-actif: #8facf0; --primaire-doux: #1d2c4c;
|
|
--safran: #e89a1f; --safran-doux: #33270f;
|
|
--fond: #0f1622; --surface: #182234; --surface-2: #1e2a40;
|
|
--bordure: #2b3850; --bordure-forte: #3d4d6b;
|
|
--encre: #e8edf5; --encre-2: #a7b4c8; --encre-3: #6d7d96;
|
|
--st-ouvert: #7da2ee; --st-ouvert-fond: #1c2a47;
|
|
--st-encours: #a394ec; --st-encours-fond: #262040;
|
|
--st-attente: #e0a33c; --st-attente-fond: #322510;
|
|
--st-termine: #4bc084; --st-termine-fond: #12301f;
|
|
--st-annule: #93a3ba; --st-annule-fond: #222d3f;
|
|
--prio-bloque: #f26d6d; --prio-bloque-fond: #3a1414;
|
|
--prio-haute: #f26d6d; --prio-moyenne: #e0a33c; --prio-basse: #4bc084; --prio-aucune: #6d7d96;
|
|
--succes: #4bc084; --alerte: #e0a33c; --danger: #f26d6d; --info: #7da2ee;
|
|
--graf-1: #5580e4; --graf-2: #c7820a; --graf-3: #26a896; --graf-4: #9673de;
|
|
--graf-grille: #24304a;
|
|
--ombre-menu: 0 8px 24px rgb(0 0 0 / 0.45);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root { --transition: 0ms; }
|
|
}
|