gestion_table_tournante_libre/src/interface/jetons.css

145 lines
4.6 KiB
CSS
Raw Normal View History

/* © 2026 TechnoLibre (http://www.technolibre.ca)
License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl) */
/* Jetons de l'interface, un seul fichier (§ 13.3) : couleurs, polices,
échelle typographique, espacements, rayons, ombres. Les composants ne lisent
que ces jetons ; aucune couleur n'est écrite ailleurs.
Deux thèmes, posés par l'attribut data-theme de <html>, que l'application
règle (§ 19.2) : :root[data-theme='clair'] et :root[data-theme='sombre']
définissent les mêmes jetons de couleur ; sans attribut, le clair
s'applique, son bloc portant aussi le sélecteur :root. Le sélecteur du
sombre est plus spécifique que :root seul : posé, il l'emporte. La feuille
ne lit pas la préférence du système.
La palette se valide par calcul (§ 12.7, § 14.5) : marques.js nomme, pour
chaque marque porteuse d'information et chaque texte, le jeton qui la peint
et ceux sur lesquels elle se peint ; palette.js mesure 3:1 pour une marque,
4,5:1 pour un texte, dans les deux thèmes, en couleurs d'origine puis sous
les trois dichromaties. Aucun jeton de texte ou de marque n'a de canal
alpha : la couleur relue dans le style calculé est alors la couleur peinte.
La teinte de --couleur-conflit est réservée (§ 12.7) : tout autre jeton
chromatique s'en tient à 30° au moins, et aucun ne porte sa valeur.
La hachure d'une place à pourvoir peint des traits --couleur-hachure sur le
fond de la chaise, --couleur-chaise-fond : ce sont ses deux couleurs. */
:root {
--police-interface: system-ui, sans-serif;
/* Échelle typographique, du plus petit au plus grand. */
--taille-texte-petit: 0.8125rem;
--taille-texte-bandeau: 0.9375rem;
--taille-texte: 1rem;
--taille-titre: 1.25rem;
--taille-titre-grand: 1.5rem;
--espace-1: 0.25rem;
--espace-2: 0.5rem;
--espace-3: 0.75rem;
--espace-4: 1rem;
--espace-5: 1.5rem;
--espace-6: 2rem;
--rayon-1: 0.25rem;
--rayon-2: 0.5rem;
/* Ombres : une couleur opaque par thème, --couleur-ombre. */
--ombre-1: 0 1px 2px var(--couleur-ombre);
--ombre-2: 0 2px 6px var(--couleur-ombre);
}
:root,
:root[data-theme='clair'] {
color-scheme: light;
/* Page. */
--couleur-page-fond: #f6f7f9;
--couleur-page-texte: #1c2128;
--couleur-page-texte-secondaire: #4b5563;
--couleur-page-filet: #c3c9d1;
--couleur-ombre: #b4bcc6;
/* Bandeau d'application. */
--couleur-bandeau-fond: #172b47;
--couleur-bandeau-texte: #ffffff;
--couleur-bandeau-filet: #8fb3d9;
/* Cadre de mode (§ 8.4). */
--couleur-cadre-lecture: #5c6878;
--couleur-cadre-ecriture: #2e7d32;
--couleur-cadre-bloque: #7b3fa0;
/* Messages. */
--couleur-refus: #6a1b9a;
--couleur-avis: #7a5000;
/* Désignation. Le focus, la sélection, la mise en évidence et le fantôme
passent sur une chaise vide comme sur une chaise pleine : leur clarté se
tient entre le fond et le plein de la chaise, à 3:1 de chacun. */
--couleur-focus: #8269e1;
--couleur-selection: #1a66f0;
--couleur-mise-en-evidence: #00897b;
/* Plan : sol, mobilier, marques. */
--couleur-sol: #eceef1;
--couleur-table-fond: #ffffff;
--couleur-table-trait: #4a5059;
--couleur-chaise-fond: #ffffff;
--couleur-chaise-trait: #4a5059;
--couleur-chaise-pleine: #1f1f1f;
--couleur-hachure: #1f1f1f;
--couleur-marque: #767676;
--couleur-conflit: #b3261e;
--couleur-pastille-fond: #2b2f36;
--couleur-pastille-texte: #ffffff;
--couleur-poignee: #4a5059;
--couleur-gel: #1565c0;
--couleur-liste-texte: #1c2128;
--couleur-echelle: #1c2128;
--couleur-fantome: #b040f0;
}
:root[data-theme='sombre'] {
color-scheme: dark;
--couleur-page-fond: #121519;
--couleur-page-texte: #e3e6ea;
--couleur-page-texte-secondaire: #a3acb8;
--couleur-page-filet: #3a414b;
--couleur-ombre: #000000;
--couleur-bandeau-fond: #1d2c3f;
--couleur-bandeau-texte: #f2f4f7;
--couleur-bandeau-filet: #5b7fa6;
--couleur-cadre-lecture: #9aa5b4;
--couleur-cadre-ecriture: #81c784;
--couleur-cadre-bloque: #ce93d8;
--couleur-refus: #d7a6f0;
--couleur-avis: #f0c060;
--couleur-focus: #8764e1;
--couleur-selection: #4070f0;
--couleur-mise-en-evidence: #00897b;
--couleur-sol: #1a1d21;
--couleur-table-fond: #262b31;
--couleur-table-trait: #9aa3ae;
--couleur-chaise-fond: #15181c;
--couleur-chaise-trait: #b0b8c2;
--couleur-chaise-pleine: #e8e8e8;
--couleur-hachure: #ededed;
--couleur-marque: #7a7a7a;
--couleur-conflit: #ff8a80;
--couleur-pastille-fond: #e6e8eb;
--couleur-pastille-texte: #15181c;
--couleur-poignee: #c5ccd6;
--couleur-gel: #90caf9;
--couleur-liste-texte: #e3e6ea;
--couleur-echelle: #e3e6ea;
--couleur-fantome: #b040f0;
}