Couleurs - utilisation et jetons
Les jetons sémantiques s’adaptent au thème clair ou sombre (data-bj-theme). Préférez-les aux couleurs de palette directes dans les interfaces.
Texte et fonds
Les variables ci-dessous mappent la palette brute vers des rôles lisibles en contexte administratif.
| Jeton | Thème clair | Thème sombre |
|---|---|---|
--bj-text-default | var(--bj-color-gris-50) | var(--bj-color-gris-975) |
--bj-text-title | var(--bj-color-gris-50) | var(--bj-color-gris-1000) |
--bj-text-alt | var(--bj-color-gris-425) | var(--bj-color-gris-850) |
--bj-text-mention | var(--bj-color-gris-625) | var(--bj-color-gris-750) |
--bj-text-disabled | var(--bj-color-gris-750) | var(--bj-color-gris-625) |
--bj-text-inverted | var(--bj-color-gris-1000) | var(--bj-color-gris-50) |
--bj-bg-default | var(--bj-color-gris-1000) | var(--bj-color-gris-50) |
--bj-bg-alt | var(--bj-color-gris-975) | var(--bj-color-gris-100) |
--bj-bg-contrast | var(--bj-color-gris-50) | var(--bj-color-gris-975) |
--bj-bg-elevated | var(--bj-color-gris-1000) | var(--bj-color-gris-200) |
--bj-bg-disabled | var(--bj-color-gris-925) | var(--bj-color-gris-425) |
Bordures et actions
| Jeton | Thème clair | Thème sombre |
|---|---|---|
--bj-border-default | var(--bj-color-gris-900) | var(--bj-color-gris-425) |
--bj-border-strong | var(--bj-color-gris-50) | var(--bj-color-gris-975) |
--bj-border-subtle | var(--bj-color-gris-925) | var(--bj-color-gris-200) |
--bj-border-disabled | var(--bj-color-gris-900) | var(--bj-color-gris-425) |
--bj-action-high | var(--bj-color-vert-benin-main-491) | var(--bj-color-vert-benin-moon-680) |
--bj-action-high-hover | var(--bj-color-vert-benin-sun-340) | var(--bj-color-vert-benin-850) |
--bj-action-high-active | var(--bj-color-vert-benin-425) | var(--bj-color-vert-benin-moon-680) |
--bj-action-low | var(--bj-color-vert-benin-975) | var(--bj-color-vert-benin-sun-340) |
--bj-action-low-hover | var(--bj-color-vert-benin-925) | var(--bj-color-vert-benin-425) |
--bj-accent | var(--bj-color-jaune-benin-main-822) | var(--bj-color-jaune-benin-moon-850) |
--bj-accent-text | var(--bj-color-jaune-benin-sun-600) | var(--bj-color-jaune-benin-moon-850) |
Couleurs fonctionnelles
Utilisez ces jetons pour les états informatifs, de succès, d’avertissement et d’erreur (texte, bordures, icônes). Les fonds associés portent le suffixe -bg.
| Jeton | Rôle | Thème clair | Thème sombre |
|---|---|---|---|
--bj-info | Information | var(--bj-color-info-main-500) | var(--bj-color-info-moon-625) |
--bj-info-bg | Fond info | var(--bj-color-info-975) | var(--bj-color-gris-200) |
--bj-success | Succès | var(--bj-color-succes-main-460) | var(--bj-color-succes-moon-640) |
--bj-success-bg | Fond succès | var(--bj-color-succes-975) | var(--bj-color-gris-200) |
--bj-warning | Alerte | var(--bj-color-alerte-main-510) | var(--bj-color-alerte-moon-640) |
--bj-warning-bg | Fond alerte | var(--bj-color-alerte-975) | var(--bj-color-gris-200) |
--bj-error | Erreur | var(--bj-color-erreur-main-510) | var(--bj-color-erreur-moon-640) |
--bj-error-bg | Fond erreur | var(--bj-color-erreur-975) | var(--bj-color-gris-200) |
Exemple info
Bloc avec bj-bg-info
Exemple succès
Bloc avec bj-bg-success
Exemple alerte
Bloc avec bj-bg-warning
Exemple erreur
Bloc avec bj-bg-error