Mathieu Benoit
4d34039f47
Screens need colour that separates information without ever carrying it alone. Tokens gain state, membership and status tints whose marks hold 3:1 and texts 4.5:1 in both themes and under three dichromacies, and every hue stays 30 degrees from the reserved conflict hues. Commands get three levels; Pastille, Carte and an icon module join the primitives; memberships map to six stable tints over sorted names. A pill label wraps and never truncates, and keeps one line beside a nowrap neighbour. Checked: node 3949; browser 767, only the walkthrough captures differ. --- FR --- [ADD] interface : fondations, pastilles, cartes, icônes, bandeau marine Les écrans ont besoin d'une couleur qui distingue l'information sans jamais la porter seule. Les jetons gagnent des teintes d'état, d'appartenance et de statut dont les marques tiennent 3:1 et les textes 4,5:1 dans les deux thèmes et sous trois dichromaties, chaque teinte à 30 degrés des teintes de conflit réservées. Les commandes ont trois niveaux ; Pastille, Carte et un module d'icônes rejoignent les primitives ; les appartenances reçoivent six teintes stables sur les noms triés. Un libellé de pastille se replie, jamais tronqué. Vérifié : node 3949 ; navigateur 767, seules les captures du parcours. Assisted-by: Claude Opus 5.5
363 lines
14 KiB
CSS
363 lines
14 KiB
CSS
/* © 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.
|
|
|
|
Trois teintes sont réservées aux conflits (§ 7.5, § 12.7), une par règle
|
|
que le plan localise : --couleur-conflit-appartenance (séparer les
|
|
appartenances), --couleur-conflit-voisins (nouveaux voisins) et
|
|
--couleur-conflit-table (nouvelle table). Chacune ne peint que la trame de
|
|
sa règle ; tout autre jeton chromatique se tient à 30° au moins de chacune,
|
|
et aucun ne porte la valeur de l'une. Elles se distinguent entre elles et
|
|
des autres marques du plan sous les trois dichromaties (SEPARATIONS,
|
|
marques.js), et tiennent 3:1 sur le fond du plateau, qui borde leurs
|
|
traits. Le contour épaissi d'une table en conflit, commun aux trois, est
|
|
de l'encre forte du plan, --couleur-contour-fort.
|
|
|
|
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.
|
|
|
|
Le papier est clair quel que soit le thème (§ 11.7) : le bloc du clair
|
|
porte aussi le sélecteur [data-impression], et le document imprimé de
|
|
l'aperçu redéclare sur lui-même chaque jeton du clair, à l'écran comme
|
|
sur la page. Le fond d'une feuille, --couleur-papier, et le contour du
|
|
filigrane BROUILLON, --couleur-filigrane, ne se peignent que sur ce
|
|
document : chacun garde la même valeur dans les deux thèmes.
|
|
|
|
La police de l'interface est la police embarquée, Noto Sans (§ 11.1,
|
|
§ 19.4) : deux faces, 400 et 700, dont les fichiers sont ceux de
|
|
src/polices, que la production de la planche embarque aussi. La
|
|
construction les émet en fichiers à côté de la feuille, que la page lit
|
|
sous file:// comme sous http://. Les replis du système ne servent qu'à une
|
|
face qui ne se charge pas : src/main.js attend les deux faces avant de
|
|
monter l'application (attendrePolices, src/polices/chargement.js).
|
|
|
|
Le corps porte la police (App) ; les contrôles de formulaire — button,
|
|
input, select, textarea — n'en héritent pas d'eux-mêmes : le moteur leur
|
|
donne sa propre police, de son propre corps. La règle sous les faces les
|
|
fait hériter de leur parent, police, corps et interligne ; le style d'un
|
|
composant, plus spécifique, règle ensuite le corps qu'il veut.
|
|
|
|
L'interligne du texte courant est fixé, --police-interligne, et non
|
|
laissé à « normal », que chaque police calcule de ses propres métriques :
|
|
celui de Noto Sans vaut 1,362 corps, et une police de repli en donnerait
|
|
un autre. Fixé, il rend les mêmes hauteurs de ligne quelle que soit la
|
|
face rendue. À 1,3, une ligne de Noto Sans s'étend de 1,038 corps
|
|
au-dessus de sa ligne de base à 0,262 au-dessous : les capitales
|
|
accentuées (0,944) et les jambages (0,244) du latin y tiennent ; seules
|
|
les capitales à deux diacritiques superposés (jusqu'à 1,059) en
|
|
débordent.
|
|
|
|
Les familles de l'interface, en plus de la page, du bandeau, du plan et
|
|
du papier : la carte — son fond, son fond sourd, qui porte une bande ou
|
|
un en-tête de tableau, son filet, son ombre, le filet léger entre deux
|
|
lignes d'un tableau — ; l'action principale — son fond, son texte, sa
|
|
teinte claire et son encre, celle d'un lien — ; les quatre états du plan,
|
|
le neutre et les appartenances, chacun un fond teinté et une marque, que
|
|
lisent les pastilles ; la bande de mode, un fond et un filet par mode, sa
|
|
marque étant la teinte du cadre de mode ; les messages — avis, refus,
|
|
information —, chacun son encre, un fond, un filet et une marque.
|
|
|
|
Le texte d'une pastille ou de la bande de mode garde l'encre de la page
|
|
(§ 12.7) : la teinte se porte par le fond et la marque. Les marques des
|
|
pastilles, des messages et de la bande se valident par calcul (SIGNES,
|
|
marques.js).
|
|
|
|
Les teintes d'appartenance ne vont que sur les listes, jamais sur le
|
|
plan : six teintes au plus, catégorielles, chacune à 30° au moins des
|
|
teintes de conflit, distinctes deux à deux sous les trois dichromaties et,
|
|
deux teintes voisines, en clarté (TEINTES_APPARTENANCE, marques.js). */
|
|
|
|
@font-face {
|
|
font-family: 'Noto Sans';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('../polices/NotoSans-Regular.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Noto Sans';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('../polices/NotoSans-Bold.ttf') format('truetype');
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
:root {
|
|
--police-interface: 'Noto Sans', system-ui, sans-serif;
|
|
--police-interligne: 1.3;
|
|
|
|
/* Échelle typographique, du plus petit au plus grand ; l'intertitre en
|
|
petites capitales prend --interlettre-capitales. */
|
|
--taille-intertitre: 0.75rem;
|
|
--taille-texte-petit: 0.8125rem;
|
|
--taille-texte-bandeau: 0.9375rem;
|
|
--taille-texte: 1rem;
|
|
--taille-titre-carte: 1.125rem;
|
|
--taille-titre: 1.25rem;
|
|
--taille-titre-grand: 1.5rem;
|
|
--taille-titre-page: 1.875rem;
|
|
--interlettre-capitales: 0.05em;
|
|
|
|
--espace-1: 0.25rem;
|
|
--espace-2: 0.5rem;
|
|
--espace-3: 0.75rem;
|
|
--espace-4: 1rem;
|
|
--espace-5: 1.5rem;
|
|
--espace-6: 2rem;
|
|
|
|
/* Rayons : celui d'un contrôle, d'un bouton, d'une carte, d'une pilule. */
|
|
--rayon-1: 0.25rem;
|
|
--rayon-2: 0.5rem;
|
|
--rayon-3: 0.75rem;
|
|
--rayon-pilule: 62.5rem;
|
|
|
|
/* La hauteur d'une cible principale (44 px), et la largeur au-delà de
|
|
laquelle le contenu d'un écran se centre. */
|
|
--hauteur-cible: 2.75rem;
|
|
--largeur-page: 87rem;
|
|
|
|
/* Ombres : une couleur opaque par thème, --couleur-ombre ; celle d'une
|
|
carte, plus légère, --couleur-carte-ombre. */
|
|
--ombre-1: 0 1px 2px var(--couleur-ombre);
|
|
--ombre-2: 0 2px 6px var(--couleur-ombre);
|
|
--ombre-carte: 0 1px 2px var(--couleur-carte-ombre);
|
|
}
|
|
|
|
:root,
|
|
:root[data-theme='clair'],
|
|
[data-impression] {
|
|
color-scheme: light;
|
|
|
|
/* Page. */
|
|
--couleur-page-fond: #f3f5f8;
|
|
--couleur-page-texte: #18212f;
|
|
--couleur-page-texte-secondaire: #586374;
|
|
--couleur-page-filet: #c3cbd6;
|
|
--couleur-ombre: #b4bcc6;
|
|
|
|
/* Carte. */
|
|
--couleur-carte-fond: #ffffff;
|
|
--couleur-carte-fond-sourd: #f8fafc;
|
|
--couleur-carte-filet: #dce1e8;
|
|
--couleur-carte-ombre: #e1e5eb;
|
|
--couleur-ligne-filet: #edf0f4;
|
|
|
|
/* Bandeau d'application. */
|
|
--couleur-bandeau-fond: #13223a;
|
|
--couleur-bandeau-texte: #ffffff;
|
|
--couleur-bandeau-texte-secondaire: #b9c4d6;
|
|
--couleur-bandeau-filet: #4a6185;
|
|
--couleur-bandeau-marque: #7fb0f0;
|
|
|
|
/* Action principale. */
|
|
--couleur-action-fond: #1f5fbf;
|
|
--couleur-action-texte: #ffffff;
|
|
--couleur-action-teinte: #e8f0fb;
|
|
--couleur-action-encre: #184c99;
|
|
|
|
/* États du plan (§ 9), le neutre et les appartenances : fond teinté et
|
|
marque. */
|
|
--couleur-neutre-fond: #eef1f5;
|
|
--couleur-neutre-marque: #5e6b7a;
|
|
--couleur-etat-brouillon-fond: var(--couleur-neutre-fond);
|
|
--couleur-etat-brouillon-marque: var(--couleur-neutre-marque);
|
|
--couleur-etat-propose-fond: #fbf0de;
|
|
--couleur-etat-propose-marque: #9a6500;
|
|
--couleur-etat-retenu-fond: #e1f3ec;
|
|
--couleur-etat-retenu-marque: #1a8566;
|
|
--couleur-etat-bloque-fond: #ece9fa;
|
|
--couleur-etat-bloque-marque: #6a55c8;
|
|
--couleur-appartenance-1-fond: #e4eff4;
|
|
--couleur-appartenance-1-marque: #185a72;
|
|
--couleur-appartenance-2-fond: #f7f1e3;
|
|
--couleur-appartenance-2-marque: #a17317;
|
|
--couleur-appartenance-3-fond: #f1eafc;
|
|
--couleur-appartenance-3-marque: #7c24e0;
|
|
--couleur-appartenance-4-fond: #e4f2ef;
|
|
--couleur-appartenance-4-marque: #32857a;
|
|
--couleur-appartenance-5-fond: #f2ede3;
|
|
--couleur-appartenance-5-marque: #6b4d0f;
|
|
--couleur-appartenance-6-fond: #f3f0fc;
|
|
--couleur-appartenance-6-marque: #8f6dd5;
|
|
|
|
/* Cadre de mode (§ 8.4), et bande de mode : fond et filet ; sa marque est
|
|
la teinte du cadre. */
|
|
--couleur-cadre-lecture: #5c6878;
|
|
--couleur-cadre-ecriture: #2e7d32;
|
|
--couleur-cadre-bloque: #7b3fa0;
|
|
--couleur-mode-lecture-fond: #e9edf3;
|
|
--couleur-mode-lecture-filet: #c3cbd6;
|
|
--couleur-mode-ecriture-fond: #e3f4e8;
|
|
--couleur-mode-ecriture-filet: #a9d8b8;
|
|
--couleur-mode-bloque-fond: #f1eaf7;
|
|
--couleur-mode-bloque-filet: #cfb5e3;
|
|
|
|
/* Messages : encre, fond, filet, marque. */
|
|
--couleur-refus: #6a1b9a;
|
|
--couleur-refus-fond: #f6effb;
|
|
--couleur-refus-filet: #cfb3e6;
|
|
--couleur-refus-marque: var(--couleur-refus);
|
|
--couleur-avis: #7a5000;
|
|
--couleur-avis-fond: #fff6e5;
|
|
--couleur-avis-filet: #f0c77a;
|
|
--couleur-avis-marque: var(--couleur-avis);
|
|
--couleur-information: #1d5bb8;
|
|
--couleur-information-fond: #e8f0fb;
|
|
--couleur-information-filet: #b7cef0;
|
|
--couleur-information-marque: var(--couleur-information);
|
|
|
|
/* 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-contour-fort: #2b2f36;
|
|
--couleur-conflit-appartenance: #8f1d14;
|
|
--couleur-conflit-voisins: #c0189f;
|
|
--couleur-conflit-table: #6a9400;
|
|
--couleur-pastille-fond: #2b2f36;
|
|
--couleur-pastille-texte: #ffffff;
|
|
--couleur-poignee: #4a5059;
|
|
--couleur-gel: #1565c0;
|
|
--couleur-liste-texte: #1c2128;
|
|
--couleur-echelle: #1c2128;
|
|
--couleur-fantome: #b040f0;
|
|
|
|
/* Le document imprimé : le papier, et le contour du filigrane. */
|
|
--couleur-papier: #ffffff;
|
|
--couleur-filigrane: #6e6e6e;
|
|
}
|
|
|
|
: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-carte-fond: #1b1f25;
|
|
--couleur-carte-fond-sourd: #20252c;
|
|
--couleur-carte-filet: #2e353f;
|
|
--couleur-carte-ombre: #0b0d10;
|
|
--couleur-ligne-filet: #262c34;
|
|
|
|
--couleur-bandeau-fond: #1d2c3f;
|
|
--couleur-bandeau-texte: #f2f4f7;
|
|
--couleur-bandeau-texte-secondaire: #b3bfd0;
|
|
--couleur-bandeau-filet: #5b7fa6;
|
|
--couleur-bandeau-marque: #8fbaf2;
|
|
|
|
--couleur-action-fond: #8ab4f8;
|
|
--couleur-action-texte: #0b1730;
|
|
--couleur-action-teinte: #1a2b45;
|
|
--couleur-action-encre: #a8c7fa;
|
|
|
|
--couleur-neutre-fond: #272d36;
|
|
--couleur-neutre-marque: #9aa5b4;
|
|
--couleur-etat-brouillon-fond: var(--couleur-neutre-fond);
|
|
--couleur-etat-brouillon-marque: var(--couleur-neutre-marque);
|
|
--couleur-etat-propose-fond: #352a15;
|
|
--couleur-etat-propose-marque: #e0a54a;
|
|
--couleur-etat-retenu-fond: #15322a;
|
|
--couleur-etat-retenu-marque: #4cc3a0;
|
|
--couleur-etat-bloque-fond: #29254a;
|
|
--couleur-etat-bloque-marque: #a99af0;
|
|
--couleur-appartenance-1-fond: #1f2335;
|
|
--couleur-appartenance-1-marque: #96a1e9;
|
|
--couleur-appartenance-2-fond: #2b2416;
|
|
--couleur-appartenance-2-marque: #c98f1d;
|
|
--couleur-appartenance-3-fond: #251d34;
|
|
--couleur-appartenance-3-marque: #9c5ae7;
|
|
--couleur-appartenance-4-fond: #162b2a;
|
|
--couleur-appartenance-4-marque: #70e1d2;
|
|
--couleur-appartenance-5-fond: #2a2717;
|
|
--couleur-appartenance-5-marque: #e7cb5a;
|
|
--couleur-appartenance-6-fond: #152826;
|
|
--couleur-appartenance-6-marque: #298e88;
|
|
|
|
--couleur-cadre-lecture: #9aa5b4;
|
|
--couleur-cadre-ecriture: #81c784;
|
|
--couleur-cadre-bloque: #ce93d8;
|
|
--couleur-mode-lecture-fond: #1f252d;
|
|
--couleur-mode-lecture-filet: #3a434f;
|
|
--couleur-mode-ecriture-fond: #16291c;
|
|
--couleur-mode-ecriture-filet: #2f5e3c;
|
|
--couleur-mode-bloque-fond: #271e33;
|
|
--couleur-mode-bloque-filet: #56407a;
|
|
|
|
--couleur-refus: #d7a6f0;
|
|
--couleur-refus-fond: #261d31;
|
|
--couleur-refus-filet: #5d4677;
|
|
--couleur-refus-marque: var(--couleur-refus);
|
|
--couleur-avis: #f0c060;
|
|
--couleur-avis-fond: #2e2513;
|
|
--couleur-avis-filet: #6b5424;
|
|
--couleur-avis-marque: var(--couleur-avis);
|
|
--couleur-information: #9cc2f5;
|
|
--couleur-information-fond: #172338;
|
|
--couleur-information-filet: #34507a;
|
|
--couleur-information-marque: var(--couleur-information);
|
|
|
|
--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-contour-fort: #e6e8eb;
|
|
--couleur-conflit-appartenance: #fc9890;
|
|
--couleur-conflit-voisins: #c0689c;
|
|
--couleur-conflit-table: #549c00;
|
|
--couleur-pastille-fond: #e6e8eb;
|
|
--couleur-pastille-texte: #15181c;
|
|
--couleur-poignee: #c5ccd6;
|
|
--couleur-gel: #90caf9;
|
|
--couleur-liste-texte: #e3e6ea;
|
|
--couleur-echelle: #e3e6ea;
|
|
--couleur-fantome: #b040f0;
|
|
|
|
--couleur-papier: #ffffff;
|
|
--couleur-filigrane: #6e6e6e;
|
|
}
|