3 · Le contrat de rôle

La pièce maîtresse. Les 6 rôles exposent exactement les mêmes 9 slots, mappés sur exactement les mêmes crans.

	main	hover	active	on	text	border	subtle	tint	tintStrong
primary
neutral
success
warning
danger
info

Bascule le thème : les couleurs changent, les noms ne changent pas.

À quoi sert chaque slot

Slot	Usage
`main`	Fond des composants pleins (bouton, badge, case cochée) et bordure du rôle.
`hover`	Élévation au survol d’un composant plein.
`active`	Élévation à l’état pressé.
`on`	Texte et icônes posés SUR une surface « main ». Contraste AA garanti.
`text`	Le rôle utilisé comme texte sur un fond clair (lien, texte d’alerte).
`border`	Bordure discrète aux couleurs du rôle (outlined, alerte).
`subtle`	Fond clair SOLIDE (fond d’alerte, badge doux).
`tint`	Voile TRANSLUCIDE 5 % — survol des variantes outlined/ghost. Se compose sur le fond, donc identique en dark.
`tintStrong`	Voile translucide 10 % — état pressé des variantes outlined/ghost.

Pourquoi l'uniformité garantit le contraste

Toutes les palettes sont sur la même courbe de luminosité (couche 1). Donc si main = cran 600 et on = neutral.25 passe AA pour un rôle, ça passe AA pour les six.

Mesuré sur le CSS généré — texte sur fond, pour les 6 rôles :
bouton plein, thème clair : 4,56:1 → 5,74:1 · thème sombre : 5,72:1 → 6,66:1.
Les 12 combinaisons passent WCAG AA, sans un seul token écrit à la main.

Conséquence directe : <Button color="danger"> fonctionne sans un token de plus. Un composant qui sait afficher primary sait afficher les cinq autres.

Deux règles de nommage non négociables

Un nom de rôle décrit un usage, jamais une apparence. Pas de dark / darker pour dire « survol » et « pressé » : en thème sombre, le survol doit être plus clair — le nom deviendrait un mensonge. D'où hover et active.

Un mot, un sens. surface désigne uniquement les fonds (surface.base, surface.raised…). Le voile alpha d'un rôle s'appelle tint — jamais surface.