/* == Themes ============================================================== Toutes les couleurs de l'application sont ici, et **nulle part ailleurs** : une couleur ecrite en dur dans une regle ne suivrait pas le theme choisi. `tests/test_themes_css.py` le verifie. Trois themes, selectionnes par l'attribut `data-theme` sur : absent ou "clair" (defaut), "nuit", "contraste". Les jetons sont **semantiques** (ce que la couleur signifie), pas descriptifs : `--danger`, pas `--rouge`. Un theme peut alors rendre le danger orange sans que le nom devienne un mensonge. /!\ Ajouter un jeton impose de le definir dans **les trois** themes. Un jeton manquant ne leve rien : la propriete est simplement ignoree, et l'element devient invisible ou illisible dans ce theme-la seulement. ====================================================================== */ :root, [data-theme="clair"] { /* Fonds et texte */ --bg: #f5f4f1; --surface: #ffffff; --surface2: #faf9f7; --border: #e0dbd3; --border2: #ccc7be; --text: #1a1a1a; --muted: #72706a; /* Accent (bleu editorial) */ --accent: #2d5a8e; --accent-light: #e8f0f8; --accent-hover: #1e4070; --accent-bord: #c6d8ef; --compteur-bg: #c6d8ef; --compteur-txt: #2d5a8e; /* Barre de navigation : un theme peut la vouloir sombre sans toucher a l'accent, d'ou ces jetons propres. */ --nav-bg: #2d5a8e; --nav-txt: #ffffff; --nav-txt-attenue: rgba(255,255,255,.75); --nav-survol: rgba(255,255,255,.15); /* Texte pose sur un aplat colore plein (bouton primaire, badge, toast) */ --sur-accent: #ffffff; /* Couleurs de sens */ --green: #2a7a4b; --green-light: #e5f3ec; --green-bord: #b5dcc6; --orange: #b85a10; --orange-light: #fdf0e3; --orange-bord: #f0c8a0; --red: #aa1e1e; --red-light: #fce8e8; --red-bord: #e8b8b8; --red-survol: #f8dcdc; --yellow: #7a6010; --yellow-light: #fdf6dc; --gray-light: #f0ede8; --warn: #e8a13c; --danger: #cc0000; /* Groupements du planning */ --year-bg: #1e3a5f; --year-text: #ffffff; --month-bg: #eaf0f8; --month-text: #2d5a8e; /* Coefficient CEP : quatre paliers, a garder distincts a l'oeil */ --coef-rouge: #b02020; --coef-orange: #c05c1a; --coef-vert: #2a7a4b; --coef-vert-fonce: #14532d; /* Statuts livre aux teintes propres */ --statut-valide-bg: #e7f0e2; --statut-valide-txt: #3d6b2e; --statut-termine-bg: #ded9d2; --statut-termine-txt: #6b6560; /* Voiles et ombres */ --voile: rgba(0,0,0,.35); --voile-bouton: rgba(0,0,0,.6); --shadow: 0 1px 4px rgba(0,0,0,.1); --shadow-lg: 0 8px 32px rgba(0,0,0,.18); --shadow-nav: 0 2px 6px rgba(0,0,0,.2); --shadow-tiroir: -6px 0 30px rgba(0,0,0,.2); --shadow-toast: 0 4px 16px rgba(0,0,0,.18); /* Mesures (identiques d'un theme a l'autre) */ --radius: 6px; --radius-sm: 4px; --drawer-w: 520px; } /* -- Nuit --------------------------------------------------------------- Les teintes de sens sont **eclaircies et desaturees**, pas seulement inversees : le rouge #aa1e1e du theme clair est illisible sur fond sombre. La barre de navigation devient sombre elle aussi, un bandeau bleu vif au-dessus d'une page sombre eblouit. */ [data-theme="nuit"] { --bg: #16181c; --surface: #1e2127; --surface2: #23262d; --border: #33383f; --border2: #474d56; --text: #e6e4e1; --muted: #9aa0a8; --accent: #6aa9de; --accent-light: #1b2a3a; --accent-hover: #8dc1ee; --accent-bord: #2c4560; --compteur-bg: #2c4560; --compteur-txt: #dbe7f4; --nav-bg: #11151b; --nav-txt: #e6e4e1; --nav-txt-attenue: rgba(230,228,225,.65); --nav-survol: rgba(255,255,255,.08); /* Sur un aplat clair (accent, vert, rouge eclaircis), c'est un texte SOMBRE qui se lit, pas du blanc. */ --sur-accent: #11151b; --green: #5cc98f; --green-light: #17302a; --green-bord: #2f5f47; --orange: #e2a057; --orange-light: #33261a; --orange-bord: #6b4a26; --red: #ef7373; --red-light: #3a1f1f; --red-bord: #6b3636; --red-survol: #482424; --yellow: #d9c05a; --yellow-light: #2f2a15; --gray-light: #2a2e35; --warn: #e8a13c; --danger: #ff7b7b; --year-bg: #0e1c2c; --year-text: #dbe7f4; --month-bg: #1b2a3a; --month-text: #8fbdec; --coef-rouge: #ff7b7b; --coef-orange: #f0ab63; --coef-vert: #5cc98f; --coef-vert-fonce: #3fae74; --statut-valide-bg: #1d3320; --statut-valide-txt: #8cd39a; --statut-termine-bg: #2e3138; --statut-termine-txt: #9aa0a8; --voile: rgba(0,0,0,.6); --voile-bouton: rgba(0,0,0,.7); --shadow: 0 1px 4px rgba(0,0,0,.5); --shadow-lg: 0 8px 32px rgba(0,0,0,.6); --shadow-nav: 0 2px 6px rgba(0,0,0,.5); --shadow-tiroir: -6px 0 30px rgba(0,0,0,.6); --shadow-toast: 0 4px 16px rgba(0,0,0,.6); } /* -- Contraste eleve ---------------------------------------------------- Pour les ecrans en plein jour et les longues sessions : fond blanc pur, texte noir, bordures franches, teintes de sens assombries pour passer largement le seuil de contraste sur blanc. */ [data-theme="contraste"] { --bg: #ffffff; --surface: #ffffff; --surface2: #f2f2f2; --border: #6f6f6f; --border2: #3d3d3d; --text: #000000; --muted: #3a3a3a; --accent: #0b4a8f; --accent-light: #dceaf8; --accent-hover: #063569; --accent-bord: #0b4a8f; --compteur-bg: #dceaf8; --compteur-txt: #00264d; --nav-bg: #00264d; --nav-txt: #ffffff; --nav-txt-attenue: rgba(255,255,255,.88); --nav-survol: rgba(255,255,255,.28); --sur-accent: #ffffff; --green: #0f6b34; --green-light: #ddf1e5; --green-bord: #0f6b34; --orange: #8a3d00; --orange-light: #ffe8d1; --orange-bord: #8a3d00; --red: #8a0000; --red-light: #ffdede; --red-bord: #8a0000; --red-survol: #ffcccc; --yellow: #5a4500; --yellow-light: #fff3cc; --gray-light: #e8e8e8; --warn: #8a5200; --danger: #8a0000; --year-bg: #00264d; --year-text: #ffffff; --month-bg: #dceaf8; --month-text: #00264d; --coef-rouge: #8a0000; --coef-orange: #8a3d00; --coef-vert: #0f6b34; --coef-vert-fonce: #063d1c; --statut-valide-bg: #ddf1e5; --statut-valide-txt: #0f4a23; --statut-termine-bg: #e0e0e0; --statut-termine-txt: #333333; --voile: rgba(0,0,0,.5); --voile-bouton: rgba(0,0,0,.75); --shadow: 0 0 0 1px #6f6f6f; --shadow-lg: 0 0 0 2px #3d3d3d; --shadow-nav: 0 2px 0 #00264d; --shadow-tiroir: -2px 0 0 #3d3d3d; --shadow-toast: 0 0 0 2px #3d3d3d; } /* == Dimensions ============================================================ Communes aux trois thèmes (lot P2, docs/etude-presentation.md) : changer la densité ou l'échelle typographique de tout l'outil, c'est changer ces valeurs, et rien d'autre. Aucune taille de texte, aucun espacement, aucun arrondi n'est écrit ailleurs (tests/test_presentation.py). Les valeurs sont celles d'avant, à l'identique. Les ESPACEMENTS sont numérotés par RANG (du plus petit au plus grand), pas en pixels : la passe de design pourra resserrer l'échelle (fondre 3, 4 et 5 px en une seule marche…) en changeant les valeurs, sans qu'un nom devienne faux. ====================================================================== */ :root { /* Texte */ --texte-2xs: 10px; --texte-xs: 11px; --texte-s: 12px; --texte-m: 13px; --texte-l: 14px; --texte-xl: 15px; --texte-2xl: 16px; --texte-3xl: 18px; --texte-4xl: 20px; --texte-geant: 64px; --texte-code: .85em; --texte-titre-page: 1.15rem; /* Espacements (rang → valeur actuelle) */ --espace-1: 1px; --espace-2: 2px; --espace-3: 3px; --espace-4: 4px; --espace-5: 5px; --espace-6: 6px; --espace-7: 7px; --espace-8: 8px; --espace-9: 9px; --espace-10: 10px; --espace-11: 12px; --espace-12: 14px; --espace-13: 16px; --espace-14: 18px; --espace-15: 20px; --espace-16: 22px; --espace-17: 24px; --espace-18: 28px; --espace-19: 48px; --espace-20: 80px; /* Arrondis (--radius et --radius-sm restent déclarés avec les thèmes) */ --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-rond: 50%; }