Cet article n'est disponible qu'en français.
Tokens CSS : trois variables, six palettes
Le système de couleurs de ce site repose sur trois variables : --brand-h (la teinte de la couleur de marque), --brand-s (sa saturation), et --neutral-h (la teinte des gris). Tout le reste (fonds, textes, bordures, états de focus) est calculé en HSL à partir de ces trois nombres.
Pourquoi pas des couleurs nommées directement ?
Si chaque composant écrivait background: #2f1321, changer de palette demanderait de retoucher chaque fichier. En ne touchant qu’à --brand-h/--brand-s/--neutral-h, les six palettes ci-dessous (et leurs variantes claire/sombre) sortent du même calcul.
Clique sur une pastille : la palette change sur toute la page, y compris dans cet article.
Le piège du mode sombre
Le vrai piège n’est pas de définir des couleurs sombres, mais d’éviter que deux thèmes ne deviennent deux systèmes à maintenir séparément. Ici, le mode sombre n’est qu’un second jeu de valeurs assignées aux mêmes variables, sous [data-theme="dark"]. Un composant qui utilise var(--text-primary) n’a jamais besoin de savoir dans quel thème il se trouve.
C’est aussi ce qui permet au composant <Prose> de ce blog (celui qui habille le texte que tu lis) de rester lisible en clair et en sombre sans variante dark: : il utilise les mêmes tokens que le reste du site.
