Thèmes
Les thèmes sont des collections de valeurs pour les mêmes chemins de jetons sémantiques. Ils ne constituent pas une deuxième feuille de style de composants ni un ensemble d’exceptions dark:.
Collections#
| Collection | Source | Sélecteur | Rôle |
|---|---|---|---|
| Clair | tokens/themes/light.tokens.json | :root, [data-theme="light"] | Surface de lecture par défaut et palette de diagrammes exportée |
| Sombre | tokens/themes/dark.tokens.json | [data-theme="dark"] | Surface de lecture sombre avec la même API sémantique |
Les deux collections remplacent color.ink, color.paper, color.line, color.accent et l’échelle neutre. Les composants continuent d’utiliser des variables comme --color-paper; ils ne décident pas quelle collection est active.
npm run tokens:themes génère assets/css/generated/themes.css. Le Sélecteur de thème de l’en-tête choisit une collection au moyen de data-theme et enregistre un choix explicite seulement après une action de la personne qui lit.
Règles#
- Ajoutez une dérogation de thème seulement lorsqu’un même rôle sémantique a besoin d’une valeur différente dans un autre mode.
- Gardez la géométrie des composants, la typographie, les rayons, les ombres et le mouvement hors d’une collection de modes de couleur, sauf si le mode change réellement cette décision.
- Ajoutez des chemins équivalents aux deux collections. Le générateur refuse une collection dont l’ensemble de dérogations diffère de Clair.
- Utilisez un rôle sémantique plutôt qu’une primitive de palette dans CSS des composants, la configuration Tailwind, Mermaid et les exemples de documentation.