Couleurs
Les couleurs sont définies par leur rôle dans l'interface, pas par leur valeur visuelle. Un même usage implique toujours une même couleur.
Règle fondamentale
On n'utilise jamais une valeur hexadécimale directement, toujours un token sémantique.
color: #0d6efd
Valeur hexadécimale directe
color: var(--ds-color-action-primary)
Token sémantique
Si le primary d'EasyMonithor passe de bleu à violet, on change
--ds-base-primary-500 une seule fois, tous les composants suivent.
Avec des valeurs brutes, il faudrait chasser chaque occurrence à la main.
Thèmes produits
Chaque produit surcharge uniquement les base tokens. Les composants restent identiques, seule la couleur primaire change.
Actions
Utilisés pour les éléments interactifs : boutons, liens, états focus.
--ds-color-action-primary
#0d6efd
Bouton principal, lien actif, focus
--ds-color-action-primary-hover
#0a58ca
État hover du primary
--ds-color-action-primary-light
#e7f1ff
Fond léger, badge, highlight
--ds-color-action-secondary
#6c757d
Bouton secondaire, action neutre
--ds-color-action-secondary-hover
#495057
État hover du secondary
Texte
Chaque niveau de texte a son token dédié. On n'utilise jamais de gris arbitraire.
--ds-color-text-primary
#212529
Titres, contenu principal
--ds-color-text-secondary
#6c757d
Sous-titres, descriptions
--ds-color-text-muted
#9ca3af
Métadonnées, placeholders
--ds-color-text-disabled
#adb5bd
Éléments désactivés
--ds-color-text-inverse
#ffffff
Texte sur fond coloré ou sombre
Surfaces
Les fonds définissent la hiérarchie visuelle des zones de l'interface.
--ds-color-background-default
#ffffff
Fond principal des pages
--ds-color-background-subtle
#f8f9fa
Zones secondaires, séparations
--ds-color-background-elevated
#ffffff
Modales, popovers, cards
--ds-color-background-inverse
#212529
Fond sombre, header inversé
Bordures
Trois niveaux de bordure pour délimiter les éléments avec la bonne intensité.
--ds-color-border-default
#dee2e6
Bordure standard, champs, cards
--ds-color-border-subtle
#e9ecef
Séparations légères, diviseurs
--ds-color-border-focus
#0d6efd
Outline focus, champ sélectionné
Feedback
Réservés aux messages système uniquement. Ne jamais utiliser ces couleurs à des fins décoratives.
--ds-color-feedback-success
#28a745
Confirmation, validation réussie
--ds-color-feedback-warning
#f39c12
Avertissement, attention requise
--ds-color-feedback-error
#dc3545
Erreur, état critique
--ds-color-feedback-info
#3498db
Information neutre
Chaque couleur feedback a aussi ses variantes -hover et -light.
Le -light est utilisé pour les fonds d'alertes, le -hover pour les états actifs.
Do & Don't
-
Toujours passer par
var(--ds-color-*) - Même usage = même token
-
Utiliser
text.inversesur tous les fonds colorés - Réserver les couleurs feedback à leurs rôles uniquement
- Tester le contraste avant de valider un composant
-
Utiliser
#0d6efddirectement dans le CSS - Utiliser le rouge pour autre chose qu'une erreur
- Inventer une couleur hors palette
- Utiliser plusieurs bleus différents pour des actions similaires
- Mettre du texte primary sur fond coloré sans vérifier le contraste
Règles
Utiliser les couleurs via leur rôle, jamais en direct.
Limiter les variations hors système. Pas de couleur inventée.
Garantir le contraste, ratio minimum 4.5:1 pour le texte normal.
Même usage = même couleur. Pas de variations arbitraires entre produits.