Ariane

Ariane est une librairie headless et n'impose donc aucun style par défaut.
Cela vous laisse donc le champ libre pour créer un thème adapté à votre besoin.

Chaque page de documentation d'un composant liste les différents points de personnalisation disponibles (Custom Properties CSS, CSS Parts et CSS Custom States).
Pour mieux comprendre les mécanismes et faciliter la création de votre thème, partez du thème neutre du starter-kit : il couvre tous les composants, il est commenté, et il gère les modes clair et sombre.
Copiez-le dans votre projet et adaptez-le à votre identité visuelle. Une démo (Kitchen Sink) montre tous les composants avec ce thème :

Récupérer le thème neutre (starter-kit)

Voir la démo (Kitchen Sink)

Les composants exposent aussi leurs états avec les parts d'état et les CSS Custom States (:state(open), :state(disabled)…), listés dans la section Référence API de chaque composant.

C'est la méthode principale que vous utiliserez pour créer votre thème, c'est celle illustrée dans le thème du starter-kit.

/* Personnalisation des tokens consommés par les composants */
:root {
    ...
    --ar-alert-color: #2e2e31;
    --ar-alert-close-size: 2rem;
    --ar-alert-hide-transition-duration: 0.33s;
}

/* Personnalisation des CSS Parts exposées par les composant */
ar-alert::part(close-button) {
    border-radius: 10px;
    color: currentColor;
    ...
}

Si vous avez déjà votre propre design system, pointez les tokens Ariane vers les vôtres au lieu de dupliquer les valeurs — le nom du token Ariane reste stable, sa valeur suit la vôtre (y compris un éventuel mode sombre déjà géré de votre côté) :

:root {
    ...
    --ar-alert-color: var(--mon-ds-color-alert);
}

Les propriétés disponibles par composant sont listées dans la section Référence API de chaque page de composant.

Comme pour n'importe quel élément HTML natifs, vous pouvez aussi personnaliser une instance précise.
Pour se faire, ajoutez-lui une classe et surchargez ses propriétés ou ses CSS Parts :

.alerte-succes-perso {
    --ar-alert-bg:   #f5f0ff;
    --ar-alert-icon: #7c3aed;
}

Ces mécanismes — tokens et ::part() — couvrent l'apparence à l'intérieur des composants.
Un bouton ou un champ que vous slottez dans un composant reste toutefois du HTML natif, hors de leur portée. Pour ces cas là ce sera le CSS de votre page qui prendra le relais pour personnaliser ces éléments.
En complément du thème du starter-kit, Ariane met donc à disposition un exemple de classes CSS pré-définies pour personnaliser l'apparence de ces éléments non couverts.
Chaque famille de classes vit dans son propre fichier et peut être chargée et utilisée comme base de départ pour vos propres styles, ou utilisée directement en complément du thème du starter-kit :

<!-- Charger le CSS dans le <head> -->
<link rel="stylesheet" href="https://jogo-labs.github.io/ariane-starter-kit/presets/buttons.css" />
<link rel="stylesheet" href="https://jogo-labs.github.io/ariane-starter-kit/presets/fields.css" />

<!-- Utilisez les classes dans votre HTML -->
<button class="ar-btn ar-btn-primary">Valider</button>
<textarea class="ar-input" id="mon-textarea" rows="3"></textarea>