Personnaliser vos composants
Ariane est une librairie headless, cela signifie qu'elle n'inclut aucun style visuel par défaut. Les composants fonctionnent pleinement (accessibilité, interactions, slots) mais leur apparence est brute.
Que vous travailliez sur un projet simple ou plus complexe tel qu'un Design System, il vous faudra donc ajouter une couche CSS pour adapter leur apparence à votre besoin.
Selon ce que vous cherchez à faire, un de ces trois mécanismes s'applique :
| Levier | Portée | Quand l'utiliser |
|---|---|---|
| CSS custom properties (parfois appelés "Tokens CSS") | Toute la librairie, ou une instance via une classe | Couleurs, espacements, typographie — la majorité des besoins |
| CSS parts | Une partie interne précise d'un composant | Layout ou styles non couverts par un token |
| CSS custom states (sélecteur :state()) | Le composant lui-même via :state(x), ou une des ses part via :state(x)::part(y) | Styliser selon un état du composant (ouvert, désactivé…). Sous Chrome et Edge 125, les états portent le préfixe -- : voir Compatibilité. |
Ces trois leviers couvrent l'apparence des éléments inclus dans le shadow DOM des composants.
Pour tout ce qui est à l'extérieur (certains boutons, contenus dans des slots, input ou textarea dans certains cas), il sera nécessaire de compléter ces leviers par des règles spécifiques.
Des exemples de feuilles de style sont documentées - pour servir directement ou comme base - dans la page Appliquer un thème.
Si vous découvrez tout juste les Custom Elements, commencez par la section Appliquer un thème— les autres pages partent du principe qu'un thème est chargé.