/* ========================================================================== Charte graphique — §6 du cahier des charges. Seul fichier de l'application où une couleur est écrite en dur. Tout le reste, composants compris, ne consomme que les variables sémantiques (--primaire, --texte, --carte…). Ajouter un thème se réduit à ajouter un bloc de variables plus bas : aucun composant n'a à en être averti. ========================================================================== */ :root { /* --- Couleurs relevées sur le logo officiel ---------------------------- */ --ozar-turquoise: #4DB8C1; --ozar-turquoise-profond: #0894AC; --ozar-turquoise-moyen: #3BA2A4; --ozar-encre: #263F45; --ozar-turquoise-clair: #B3E5E4; --ozar-surface: #E9F6F7; --ozar-blanc: #FFFFFF; /* --- Neutres absolus --------------------------------------------------- Servent de bornes aux mélanges (color-mix), pas de couleurs d'accent. */ --blanc: #FFFFFF; --noir: #000000; /* --- États ------------------------------------------------------------- */ --succes: #2FA36B; --alerte: #E0A458; --danger: #D9534F; --neutre: #7A8B8F; --danger-profond: color-mix(in srgb, var(--danger) 82%, var(--noir)); /* --- Rôles sémantiques : ce que les composants utilisent --------------- */ --primaire: var(--ozar-turquoise); --primaire-profond: var(--ozar-turquoise-profond); --primaire-moyen: var(--ozar-turquoise-moyen); --primaire-clair: var(--ozar-turquoise-clair); --sur-primaire: #FFFFFF; --fond: var(--ozar-surface); --carte: var(--ozar-blanc); --carte-douce: color-mix(in srgb, var(--primaire) 6%, var(--carte)); --encre: var(--ozar-encre); --texte: var(--ozar-encre); --texte-doux: color-mix(in srgb, var(--encre) 62%, transparent); --texte-tenu: color-mix(in srgb, var(--encre) 42%, transparent); --bordure: color-mix(in srgb, var(--primaire) 18%, transparent); --survol: color-mix(in srgb, var(--primaire) 8%, transparent); /* Teintes douces dérivées : un thème se définit par quatre couleurs, pas par vingt. color-mix fait le travail que faisait la fonction lighten() de l'application de référence, sans passer par JavaScript. */ --succes-doux: color-mix(in srgb, var(--succes) 14%, var(--carte)); --alerte-doux: color-mix(in srgb, var(--alerte) 16%, var(--carte)); --danger-doux: color-mix(in srgb, var(--danger) 12%, var(--carte)); --neutre-doux: color-mix(in srgb, var(--neutre) 12%, var(--carte)); /* --- Palette de teintes catégorielles --------------------------------- Pour ce qui se distingue par la couleur sans rien signifier d'autre : calendriers, matières, étiquettes. La base ne stocke qu'une **clé** de cette palette (« safran »), jamais un hexadécimal — sans quoi la charte se contournerait par la porte des données, et une couleur choisie sur un thème clair deviendrait illisible sur un thème sombre. Chaque teinte vient par deux : la couleur pleine, qui porte le trait et la pastille, et le fond doux qui la mélange à la carte. Ajouter une teinte se fait ici, et nulle part ailleurs. */ --teinte-turquoise: var(--ozar-turquoise-profond); --teinte-indigo: #4C6FD0; --teinte-safran: #D9963F; --teinte-olive: #6E9440; --teinte-grenat: #C05252; --teinte-prune: #8C5AA8; --teinte-ardoise: #5C7480; --teinte-terracotta: #C4713F; --teinte-rose: #C4568E; --teinte-fond-melange: 14%; /* --- Marques de journée ------------------------------------------------- Trois teintes très légères posées sur la journée elle-même, et non sur une entrée : ce qu'elles disent vaut pour le jour entier — les filles sont en vacances, le Chabbat est obligatoire, le Chabbat est facultatif. Une pastille de plus dans la case n'aurait pas dit cela, et se serait perdue au milieu des autres. Trois familles nettement distinctes plutôt que trois nuances d'une même : à 12 % de mélange, deux tons voisins deviennent indiscernables. Le rouge reprend la couleur du calendrier « Vacances et congés » et le prune celle de « Chabbat à l'internat » — la teinte de fond rappelle la pastille de la légende au lieu de rivaliser avec elle. */ --marque-melange: 12%; --marque-vacances: color-mix(in srgb, var(--teinte-grenat) var(--marque-melange), var(--carte)); --marque-chabbat-hova: color-mix(in srgb, var(--teinte-prune) var(--marque-melange), var(--carte)); --marque-chabbat-rechout: color-mix(in srgb, var(--teinte-olive) var(--marque-melange), var(--carte)); --barre-laterale: linear-gradient(165deg, var(--encre) 0%, color-mix(in srgb, var(--encre) 78%, var(--primaire-profond)) 100%); --sur-barre-laterale: var(--blanc); --sur-barre-laterale-doux: color-mix(in srgb, var(--blanc) 75%, transparent); --sur-barre-laterale-survol: color-mix(in srgb, var(--blanc) 10%, transparent); --sur-barre-laterale-bordure: color-mix(in srgb, var(--blanc) 14%, transparent); --sur-encre: var(--blanc); /* --- Rampe d'opacité de l'encre ---------------------------------------- La hiérarchie du texte se fait par l'opacité, jamais par un gris neutre : un gris introduit une teinte que la charte n'autorise pas, et il devient illisible dès qu'on change de fond. Ces cinq valeurs couvrent tout — texte secondaire, libellés tenus, filets, fonds de rail. Elles dérivent de --texte et non de --encre : sur un thème sombre, --encre est la couleur *du fond* de la barre latérale, et une rampe bâtie dessus écrirait du sombre sur du sombre. --texte, lui, est par définition ce qui se lit sur la carte courante, dans les deux sens. */ --encre-70: color-mix(in srgb, var(--texte) 70%, transparent); --encre-55: color-mix(in srgb, var(--texte) 55%, transparent); --encre-40: color-mix(in srgb, var(--texte) 40%, transparent); --encre-12: color-mix(in srgb, var(--texte) 12%, transparent); --encre-06: color-mix(in srgb, var(--texte) 6%, transparent); --filet: color-mix(in srgb, var(--texte) 9%, transparent); /* --- Formes ------------------------------------------------------------ Aucun angle droit sur une carte, un bouton ou une modale (§6). */ --r-xs: 8px; --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px; /* --- Ombres : douces et diffuses, jamais un filet gris sec ------------- */ --ombre-1: 0 1px 2px color-mix(in srgb, var(--encre) 6%, transparent), 0 4px 12px color-mix(in srgb, var(--encre) 6%, transparent); --ombre-2: 0 2px 6px color-mix(in srgb, var(--encre) 8%, transparent), 0 12px 28px color-mix(in srgb, var(--encre) 10%, transparent); --ombre-3: 0 8px 20px color-mix(in srgb, var(--encre) 12%, transparent), 0 24px 60px color-mix(in srgb, var(--encre) 16%, transparent); /* Ombre propre à la barre d'onglets flottante : elle porte plus loin que celle d'une carte, sinon la pilule paraît collée au contenu. */ --ombre-onglets: 0 2px 8px color-mix(in srgb, var(--encre) 8%, transparent), 0 12px 32px color-mix(in srgb, var(--encre) 16%, transparent); /* --- Typographie ------------------------------------------------------- La taille de base est réglable dans les paramètres (Compact / Normal / Confort). Tout est exprimé en rem : aucune taille figée en pixels. */ --taille-base: 16px; --police-titre: 'Poppins', 'Segoe UI', system-ui, sans-serif; --police-corps: 'Inter', 'Segoe UI', system-ui, sans-serif; --police-hebreu: 'Heebo', 'Arial Hebrew', sans-serif; /* --- Densité : facteur appliqué aux espacements des composants --------- */ --densite: 1; --pas: calc(0.25rem * var(--densite)); /* --- Courbes d'animation ------------------------------------------------ Deux seulement. « sortie » pour ce qui glisse — une vue qui entre, un voile qui se lève. « ressort » pour ce qui rebondit — un tap, une bulle d'onglet, une feuille qui monte. C'est ce dépassement léger qui fait la différence entre une page web et une application native. */ --sortie: cubic-bezier(0.22, 0.68, 0.28, 1); --ressort: cubic-bezier(0.32, 1.4, 0.5, 1); /* --- Divers ------------------------------------------------------------ */ --cible-tactile: 44px; /* §6 — jamais en dessous */ --duree-anim: 180ms; --largeur-barre-laterale: 17rem; /* Barre d'onglets flottante : sa hauteur et le retrait bas de l'appareil servent au rembourrage de chaque zone de défilement. Les deux sont lus par les vues, pas seulement par la barre. */ --hauteur-onglets: 66px; --retrait-bas: env(safe-area-inset-bottom, 0px); --hauteur-barre-basse: var(--hauteur-onglets); } /* Sur ordinateur la barre latérale remplace la barre d'onglets : plus rien ne flotte au-dessus du contenu, et le rembourrage bas des vues n'a plus lieu d'être. Une seule variable à remettre à zéro, aucune vue à prévenir. */ @media (min-width: 1024px) { :root { --hauteur-onglets: 0px; } } /* ========================================================================== Thèmes. Chacun n'est qu'un bloc de variables ; les valeurs dérivées (teintes douces, ombres, bordures) se recalculent seules. ========================================================================== */ [data-theme='ozar-sombre'] { --primaire: #4DB8C1; --primaire-profond: #6FD3DA; --primaire-moyen: #3BA2A4; --primaire-clair: #1D4750; --sur-primaire: #0E1D21; --fond: #101E22; --carte: #16282D; --encre: #0B1619; --texte: #E6F3F4; --texte-doux: color-mix(in srgb, #E6F3F4 66%, transparent); --texte-tenu: color-mix(in srgb, #E6F3F4 44%, transparent); --bordure: color-mix(in srgb, #FFFFFF 12%, transparent); --survol: color-mix(in srgb, #FFFFFF 7%, transparent); --barre-laterale: linear-gradient(165deg, #0B1619 0%, #12333A 100%); } [data-theme='israel'] { --primaire: #0038B8; --primaire-profond: #00248C; --primaire-moyen: #2E5AD0; --primaire-clair: #CBD9F7; --sur-primaire: #FFFFFF; --fond: #EEF2FC; --carte: #FFFFFF; --encre: #1B2340; --texte: #1B2340; --barre-laterale: linear-gradient(165deg, #1B2340 0%, #00248C 100%); } [data-theme='israel-sombre'] { --primaire: #4C7DEE; --primaire-profond: #7AA0F5; --primaire-moyen: #2E5AD0; --primaire-clair: #1B2C57; --sur-primaire: #0B1020; --fond: #0D1220; --carte: #141A2E; --encre: #070B15; --texte: #E7ECFA; --texte-doux: color-mix(in srgb, #E7ECFA 66%, transparent); --texte-tenu: color-mix(in srgb, #E7ECFA 44%, transparent); --bordure: color-mix(in srgb, #FFFFFF 12%, transparent); --survol: color-mix(in srgb, #FFFFFF 7%, transparent); --barre-laterale: linear-gradient(165deg, #070B15 0%, #1B2C57 100%); } /* Thème personnalisé. core/theme.js ne pose que trois variables — --primaire, --encre et --fond — et rien d'autre : toutes les nuances en découlent ici. C'est ce qui garde la seule définition de couleur de l'application dans ce fichier, JavaScript compris. */ [data-theme='personnalise'] { --primaire-profond: color-mix(in srgb, var(--primaire) 78%, var(--noir)); --primaire-moyen: color-mix(in srgb, var(--primaire) 88%, var(--encre)); --primaire-clair: color-mix(in srgb, var(--primaire) 30%, var(--blanc)); --texte: var(--encre); --carte: var(--blanc); } /* Sur fond sombre, les mêmes teintes deviennent sourdes : on les éclaircit d'un seul geste plutôt que de les redéclarer une par une dans chaque thème. Le mélange avec le fond doux augmente aussi, sinon la pastille disparaît. */ [data-theme$='-sombre'] { --teinte-turquoise: #5FC9D2; --teinte-indigo: #8AA4F0; --teinte-safran: #EDB767; --teinte-olive: #9CC46C; --teinte-grenat: #E88585; --teinte-prune: #BC8FD4; --teinte-ardoise: #9AB0BC; --teinte-terracotta: #E39A6B; --teinte-rose: #E795BE; --teinte-fond-melange: 22%; /* Sur fond sombre, douze pour cent ne se voient plus. */ --marque-melange: 20%; } /* --- Variantes de mise en forme, indépendantes du thème ------------------ */ [data-cartes='teintees'] { --carte: color-mix(in srgb, var(--primaire) 5%, #FFFFFF); } [data-theme$='-sombre'][data-cartes='teintees'] { --carte: color-mix(in srgb, var(--primaire) 8%, #16282D); } [data-barre-laterale='uni'] { --barre-laterale: var(--encre); } [data-police='inter'] { --police-titre: 'Inter', 'Segoe UI', system-ui, sans-serif; } [data-police='systeme'] { --police-titre: system-ui, 'Segoe UI', sans-serif; --police-corps: system-ui, 'Segoe UI', sans-serif; } /* --- Accessibilité ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --duree-anim: 0ms; } } [data-animations='non'] { --duree-anim: 0ms; }