Tout ce que définit css/shared.css, affiché en vrai, dans les deux thèmes.
Cette page sert à deux choses : voir ce qui existe déjà avant d'inventer un énième bouton,
et repérer d'un coup d'œil ce qui casse quand on touche au socle.
Ces valeurs viennent de shared.css et changent avec le thème. Une couleur écrite en
dur dans une page ne changera pas — c'est la source de tous les défauts de mode sombre corrigés
ces derniers jours. Seules les variables dont la valeur ressemble vraiment à une couleur
apparaissent ici (corrigé le 30/08 : --font et les tokens d'espacement/typo
s'y affichaient auparavant avec une case vide, illisible).
Tokens --sp-1 à --sp-10 posés le 30/08 (C1.1) : une échelle de
référence pour le code à venir, reprenant les paliers déjà les plus utilisés dans le produit.
L'existant ne s'en sert pas encore — décision d'Arthur, aucun retrofit prévu.
Tokens --fs-xs à --fs-3xl posés le 30/08 (C1.1), avec un aperçu réel
du texte à chaque taille.
.btn, avec les variantes .pri (action principale) et
.danger. Un seul bouton principal par écran.
Enveloppés dans .fl (champ avec libellé) ou .fi (champ
seul). Le mode sombre est géré par color-scheme, y compris pour les éléments que
le navigateur dessine lui-même.
.ct pour les compteurs, .b-stat pour les statuts client.
Chacune a son équivalent sombre, avec un contraste vérifié.
Style hérité de shared.css. Les lignes typées du cardex
(.r-gold, .r-plat…) ont leur propre profondeur en mode sombre — c'est
la référence dont s'inspire tout le reste.
Gabarit commun aux modules : .mod-header puis .mod-tab.
Toute page de module devrait partir de là plutôt que de refaire son en-tête.
L'état vide est désormais un composant partagé — .es, construit par
etatVide({icone, titre, texte, action, compact}). Avant, cinq classes différentes et
une quinzaine de formulations, dont aucune ne disait quoi faire ensuite. Le titre dit ce
qui manque, le texte dit pourquoi ou quoi faire. Sans action possible, on n'invente pas de
bouton. Le squelette de chargement est lui aussi partagé : .sk, construit par squelette('texte'|'tableau', lignes, colonnes). Il doit avoir la même hauteur que le contenu réel, sinon on retrouve le saut qu'on voulait éviter — et son animation s'arrête si le système demande de réduire les animations.
Trois erreurs qui ont réellement coûté du temps cette semaine.
Quatorze paires texte/fond passent sous le seuil de lisibilité de 4,5:1. Ce ne sont pas des
régressions — elles existaient avant le chantier — mais elles ne passeraient pas un audit
d'accessibilité, et les quatre premières sont réellement difficiles à lire.
À gauche l'existant, à droite ma proposition : même teinte, luminosité ajustée
juste assez pour atteindre le seuil. Le fond ne change jamais, seul le texte bouge — vos équipes
reconnaissent une case du planning à sa couleur de fond, pas à celle de sa lettre.
Décision : aucune proposition retenue.
Trois défauts mesurés le 15 août : 32 éléments cliquables inatteignables au clavier, 38 boutons à icône seule sans libellé, et zéro règle de focus dans tout le produit. Le dernier était le plus grave : quelqu'un qui navigue au clavier ne voyait jamais où il se trouvait.
Fais Tab jusqu'à ces boutons : un contour doré apparaît. À la souris, il n'apparaît
pas — c'est :focus-visible et non :focus, ce qui permet de le rendre
franchement visible sans gêner personne.
· les éléments portant un onclick deviennent focalisables et s'activent à
Entrée ou Espace, y compris ceux créés après le chargement ;
· role="button" uniquement sur div et span — le poser sur
un tr mentirait sur la nature de l'élément ;
· cibles de 44 px minimum, au doigt seulement : élargir à la souris casserait
la densité des tableaux, qui est voulue ;
· un lien « Aller au contenu » en tête de page, invisible sauf au clavier.
npm run qa:socle vérifie mécaniquement ces trois erreurs sur l'ensemble du produit.