Design · 3 min
Tokens de design
Un accent, une police, et un jeu de variables qui font du mode sombre une redéfinition plutôt qu'une seconde feuille de styles.
Tailwind v4 n'a pas de fichier de configuration. Les tokens sont déclarés en CSS et Tailwind émet une classe pour chacun.
@theme {
--color-ink: #0b0c0f;
--color-ink-2: #5f646a;
--color-ink-3: #9297a0;
--color-line: #e6e8ea;
--color-paper: #ffffff;
--color-paper-2: #f4f5f6;
--color-brand: #f8430a;
--color-brand-soft: #fdece4;
--radius-card: 12px;
--radius-panel: 20px;
}--color-ink-2 vous donne text-ink-2, bg-ink-2, border-ink-2.
Le mode sombre
Comme chaque surface lit un token, tout le site s'inverse en les redéfinissant :
[data-theme="dark"] {
--color-ink: #f2f3f4;
--color-ink-2: #a2a8b0;
--color-line: #24272c;
--color-paper: #101216;
--color-paper-2: #171a1f;
--color-brand: #ff5a24;
}Aucun préfixe dark: sur quatre cents éléments, et aucun second jeu de classes
à maintenir. L'accent est légèrement éclairci parce que le même orange paraît
plus terne sur du presque noir que sur du blanc.
Résolvez l'attribut côté serveur depuis un cookie et posez-le sur <html>
pendant le rendu. Faites-le dans un effet client et la page s'affiche en clair
puis bascule, ce qui est le clignotement que tout le monde remarque et dont
personne ne parle.
La retenue
Les règles que suit le kit, et qui valent la peine d'être gardées :
- Un seul accent. L'orange apparaît sur le logo, sur une phrase mise en avant, et sur l'état actif. Quand tout est accentué, rien ne l'est.
- Le rayon varie selon l'élément. Les boutons sont des pilules, les petites cartes presque carrées, seuls les grands panneaux ont un angle généreux. Un rayon unique partout est un signe.
- Bordure ou ombre, pas les deux. Les deux sur le même élément donnent cet effet d'empilement qui trahit une interface générée.
- Pas de dégradé lumineux. Surtout pas du violet au bleu.
- De vraies icônes, dessinées au trait. Les emoji s'affichent différemment sur chaque plateforme et ressemblent à du clipart à 16 pixels.
La typographie
Deux polices : une sans-serif d'affichage et une monospace. next/font/google
les charge dans layout.tsx, ce qui héberge les fichiers localement et émet la
variable CSS utilisée dans @theme, donc pas de décalage de mise en page ni de
requête tierce.
Délibérément ni Inter, ni Geist, ni Space Grotesk. Elles sont excellentes et elles sont la valeur par défaut de toute interface générée, ce qui est précisément le problème.
Une erreur ou un manque sur cette page ? Dites-le-nous.