Colors
Collection de tokens de couleurs sémantiques construit sur le modèle Shadcn.
Installation
npx shadcn@latest add https://ui.oward.dev/r/registry.json colorsUne fois le plugin installé, importer le CSS dans le fichier CSS Tailwind principal :
@import "../components/tailwind/semantic-colors/style.css";Conventions
En dehors des shades, les tokens sémantiques utilisent une convention simple de couleurs d'arrière-plan et de premier plan. La variable background définit la couleur de fond du composant, tandis que la variable foreground détermine la couleur du texte.
Chaque token est une variable de background excepté pour les tokens avec le suffixe -foreground qui sont des variables de couleur de texte.
Les tokens sémantique
Token de branding
Les tokens de branding sont utilisés pour les éléments clés de l'interface utilisateur qui représentent la marque, tels que les boutons principaux, les liens et les accents. Ils sont conçus pour attirer l'attention et guider les utilisateurs vers des actions importantes.
Tokens de statut
Les tokens de statut sont utilisés pour indiquer des états spécifiques dans l'interface utilisateur, tels que le succès, l'information, l'avertissement et le danger. Idéal pour les alertes, les notifications et les messages d'erreur.
Les tokens de shade
Neutral : la référence tonale
Décrit une échelle de gris (ou quasi-gris) servant de base au contraste, aux séparateurs, aux fonds génériques. Ce shade sert de référence tonale, il n'est pas destiné à être utilisé directement mais plutot consommé par les d'autres tokens (surface, border, muted, outline, etc.), et ne varie pas en dark mode.
Surface
Décrit les différentes couches de surface dans l'interface utilisateur, allant des fonds légers aux fonds plus sombres. Ces tokens sont utilisés pour créer de la profondeur et de la hiérarchie visuelle. Le shade est inversé en dark mode pour s'adapter aux différents contextes d'utilisation.
Exemple d'utilisation des shades surface pour créer des cartes imbriquées avec différents niveaux de profondeur :
Les tokens d'UI
Background et Foreground et headings
Les tokens background et foreground définissent les couleurs de fond et
de texte par défaut pour l'interface utilisateur. Ils sont utilisés pour
assurer une bonne lisibilité et un contraste suffisant entre le texte et son
arrière-plan. Tout deux sont basés par défaut sur les shades surface-50 et
surface-900.
Le token heading est spécifiquement conçu pour les titres et les en-têtes,
offrant un token distinctif. Il peut avoir la même valeur que foreground
ou une valeur différente pour créer une hiérarchie visuelle claire.
Accent et Accent Foreground
Les tokens accent et accent-foreground sont utilisés pour les éléments interactifs et les accents visuels dans l'interface utilisateur. Ils aident à attirer l'attention sur des éléments spécifiques des éléments de formulaire.
Par défaut, la couleur accent est définie par le shade surface-200, tandis que accent-foreground utilise le shade surface-400.
Border, Ring et Input
Les tokens border et ring sont utilisés pour les bordures et les anneaux de focus autour des éléments interactifs. Le token input est spécifiquement destiné aux champs de formulaire et aux éléments d'entrée utilisateur.
Les couleurs border et input sont définies par défaut par le shade surface-300.
Muted et Muted Foreground
Les tokens muted et muted-foreground sont utilisés pour les éléments
moins importants ou désactivés dans l'interface utilisateur. Ils permettent
de réduire l'attention portée à ces éléments tout en maintenant une bonne
lisibilité.
Règles globales
Par défaut, certaines règles CSS sont appliquées globalement avec les jetons sémantiques dans l'interface utilisateur.
Par exemple, les bordures et les contours ont des couleurs définies sur border et ring. Ainsi, il n'est pas nécessaire de spécifier ces couleurs manuellement pour chaque élément : border sera coloré par défaut avec border-border et les contours avec outline-ring/50.
De même, le fond et la couleur du texte du body sont définis avec les jetons background et foreground.
@layer base {
* {
@apply border-border outline-ring/50 accent-accent;
}
body {
@apply bg-background text-foreground;
}
}Tailwind-Merge
Tailwind-Merge est utilisé pour fusionner les classes Tailwind et gérer les conflits de classes. Par exemple, si vous appliquez à un élément à la fois text-sm et text-xl, tailwind-merge garantira que seule la dernière classe appliquée est prise en compte.
Cependant, tailwind-merge ne reconnaît pas automatiquement les tokens personnalisés définis dans votre fichier CSS. Sans configuration appropriée, il ne peut pas gérer correctement les conflits entre vos classes personnalisées.
Exemple de problème : Avec les classes bg-primary bg-accent, Tailwind-Merge ne reconnaît pas primary et accent comme des couleurs et peut donc conserver les deux classes au lieu de ne garder que la dernière.
Solution automatique
Pour résoudre ce problème, utilisez le script Generate TwMerge Config qui génère automatiquement la configuration tailwind-merge depuis vos tokens personnalisés. Ce script analyse votre fichier CSS et crée une configuration type-safe qui permet à tailwind-merge de reconnaître et gérer correctement tous vos tokens personnalisés.