Système de couleurs sémantiques piloté par des variables CSS. Chaque couleur existe en version pleine et
en version ghost. Les états interactifs (hover, active) sont calculés automatiquement via
color-mix(). Le système supporte les thèmes
light et dark
via l'attribut data-theme.
Les couleurs sémantiques sont définies dans le fichier de tokens via :root[data-theme].
La map SCSS $colors référence chacune de ces variables pour
générer les classes utilitaires des composants.
La version pleine est la couleur brute (ex. --color-primary).
La version ghost est calculée par color-mix() en mélangeant
la couleur pleine à transparent selon le ratio
--state-ghost-transparent-mix
(30% en thème light, 15% en thème dark).
Couleurs sémantiques utilisées pour les textes, fonds et bordures. Chaque swatch affiche la couleur de fond et la couleur de texte associée via text-on-{color}.
primary
var(--color-primary)
— light: #008f5a · dark: #4fffb0
secondary
var(--color-secondary)
— light: #4B3FD1 · dark: #6658E8
tertiary
var(--color-tertiary)
— light: #E63E63 · dark: #FF5878
success
var(--color-success)
— light: #2E9E5B · dark: #4EBE79
info
var(--color-info)
— light: #1F8ED6 · dark: #3EB4E8
warning
var(--color-warning)
— light: #C88719 · dark: #E6AE2A
danger
var(--color-danger)
— light: #C0392B · dark: #E25555
neutral
var(--color-neutral)
— light: #A0A0A0 · dark: #C7C7C7
dark
var(--color-dark)
— light & dark: #2F2F2F
light
var(--color-light)
— dark: #DDDDDD
white
var(--color-white)
— #ffffff
black
var(--color-black)
— #000000
Les couleurs ghost sont calculées via color-mix(in srgb, couleur var(--state-ghost-transparent-mix), transparent).
Elles s'adaptent automatiquement au thème actif (ratio 30% en light, 15% en dark).
Le texte est rendu via text-on-{color}-ghost.
primary-ghost
var(--color-primary-ghost)
secondary-ghost
var(--color-secondary-ghost)
tertiary-ghost
var(--color-tertiary-ghost)
success-ghost
var(--color-success-ghost)
info-ghost
var(--color-info-ghost)
warning-ghost
var(--color-warning-ghost)
danger-ghost
var(--color-danger-ghost)
neutral-ghost
var(--color-neutral-ghost)
dark-ghost
var(--color-dark-ghost)
light-ghost
var(--color-light-ghost)
white-ghost
var(--color-white-ghost)
black-ghost
var(--color-black-ghost)
Les couleurs d'état hover et active sont générées automatiquement via color-mix().
Elles n'ont pas à être définies manuellement : les ratios sont contrôlés par des tokens dédiés.
| TOKEN | VALEUR LIGHT | VALEUR DARK | RÔLE |
|---|---|---|---|
--state-hover-mix |
70% | 70% | Part de la couleur dans le mélange hover (vers noir ou blanc). |
--state-active-mix |
60% | 60% | Part de la couleur dans le mélange active — effet plus prononcé que hover. |
--state-ghost-transparent-mix |
30% | 15% | Opacité des couleurs ghost. Réduite en dark pour limiter les halos. |
--state-ghost-hover-mix |
65% | 65% | Opacité du fond ghost au hover. |
--state-ghost-active-mix |
75% | 75% | Opacité du fond ghost au clic. |
/* Hover — assombrit vers var(--mix-dark) */
--hover-primary:
color-mix(in srgb, var(--color-primary) var(--state-hover-mix), var(--mix-dark) var(--state-hover-mix-rest));
/* Active — mélange plus prononcé */
--active-primary:
color-mix(in srgb, var(--color-primary) var(--state-active-mix), var(--mix-dark) var(--state-active-mix-rest));
/* Ghost — mélange vers transparent */
--color-primary-ghost:
color-mix(in srgb, var(--color-primary) var(--state-ghost-transparent-mix), transparent);
Les couleurs dark et black
utilisent var(--mix-light) (blanc) comme direction de mélange,
de sorte que leur hover les éclaircit plutôt que de les assombrir davantage.
Le thème est activé via l'attribut data-theme sur
:root. Sans attribut, le thème light s'applique par défaut.
| ATTRIBUT | FOND (--background-color) |
TEXTE (--text-color) |
BORDURE (--border-color) |
|---|---|---|---|
data-theme="light" |
--color-white (#ffffff) |
--text-color-dark (#262626) |
--gray-200 (#e5e5e5) |
data-theme="dark" |
--gray-800 (#262626) |
--text-color-light (#f5f5f5) |
--gray-700 (#404040) |
| TOKEN | LIGHT | DARK |
|---|---|---|
--color-primary |
#008f5a | #4fffb0 |
--color-secondary |
#4B3FD1 | #6658E8 |
--color-tertiary |
#E63E63 | #FF5878 |
--color-success |
#2E9E5B | #4EBE79 |
--color-info |
#1F8ED6 | #3EB4E8 |
--color-warning |
#C88719 | #E6AE2A |
--color-danger |
#C0392B | #E25555 |
--color-neutral |
#A0A0A0 | #C7C7C7 |
--color-dark |
#2F2F2F | #2F2F2F |
--color-light |
— | #DDDDDD |
--color-white |
#ffffff (global) | |
--color-black |
#000000 (global) | |
| TOKEN | RÔLE |
|---|---|
--background-color |
Fond global de la page. Référencé par --color-theme. |
--color-theme |
Fond des composants (card, dialog, dropdown…). Alias de --background-color. |
--text-color |
Couleur de texte par défaut selon le thème actif. |
--text-color-dark |
Texte foncé fixe — #262626. Indépendant du thème. |
--text-color-light |
Texte clair fixe — #f5f5f5. Indépendant du thème. |
--border-color |
Couleur de bordure par défaut — --gray-200 en light, --gray-700 en dark. |
--content-on-{color} |
Couleur de texte recommandée sur un fond coloré. Exemple : --content-on-primary donne la couleur de texte lisible sur --color-primary. |
| TOKEN | VALEUR | USAGE PRINCIPAL |
|---|---|---|
--gray-100 |
#f5f5f5 | Alias de --text-color-light. |
--gray-200 |
#e5e5e5 | Bordure par défaut en thème light. |
--gray-300 |
#d4d4d4 | — |
--gray-400 |
#a3a3a3 | — |
--gray-500 |
#737373 | Couleur des éléments désactivés (boutons, inputs, liens). |
--gray-600 |
#525252 | — |
--gray-700 |
#404040 | Bordure par défaut en thème dark. |
--gray-800 |
#262626 | Fond global en thème dark. Alias de --text-color-dark. |
--gray-900 |
#171717 | — |
Les clés de la map SCSS correspondent directement aux suffixes des classes utilitaires des composants
(ex. badge-primary-ghost, btn-success).
Toute modification d'une valeur dans :root[data-theme]
est automatiquement propagée à tous les composants qui référencent ces tokens.
Couleurs · WEBDEV-UI DOCS / V1