Personnalisation

AstroGlass utilise Tailwind CSS v4 pour le style via le plugin @tailwindcss/vite. Il n’y a pas de fichier tailwind.config.mjs distinct — toute la personnalisation s’effectue via CSS.

Aperçu du Style

Les styles globaux et les variables CSS sont définis dans src/styles/global.css. Ce fichier gère :

Les réinitialisations de base (resets)
Les polices personnalisées (Inter & JetBrains Mono)
Les variables CSS pour les thèmes (valeurs de couleur HSL)

Les surcharges spécifiques aux thèmes se trouvent dans src/styles/_themes.css.

src/
- styles/
  - global.css — Styles de base, polices, variables CSS racines
  - _themes.css — Surcharges de couleurs par thème
  - _animations.css — Images clés d’animation partagées
  - _forms.css — Styles des formulaires
  - components/ — Styles spécifiques aux composants (héros, tarification, etc.)

Système de Couleurs

Le projet utilise un système de couleurs basé sur des variables CSS. Les couleurs sont définies comme des valeurs HSL (sans l’enveloppe hsl()), ce qui permet à la syntaxe du modificateur d’opacité de Tailwind de fonctionner correctement.

/* src/styles/global.css */
:root {
  --p: 260 80% 60%;   /* Primaire */
  --s: 310 80% 60%;   /* Secondaire */
  --a: 190 90% 60%;   /* Accent */
  --b1: 220 20% 10%;  /* Base 1 (Arrière-plan) */
  --b2: 220 18% 14%;  /* Base 2 (Surface) */
  --bc: 220 20% 90%;  /* Contenu de Base (Texte) */
  --er: 0 80% 60%;    /* Erreur */
  --su: 150 80% 50%;  /* Succès */
}

Les composants consomment ces variables via des classes utilitaires Tailwind ou hsl() :

<div class="bg-[hsl(var(--p))] text-[hsl(var(--bc))]">
  Arrière-plan Primaire avec Texte de Contenu de Base
</div>

💡

Changer les Couleurs

Pour modifier la palette de couleurs du site, mettez à jour les valeurs HSL dans global.css. Pour les surcharges spécifiques aux thèmes (mode clair/sombre, couleurs par thème), utilisez les sélecteurs [data-theme="..."] dans _themes.css.

Ajouter des Polices Personnalisées

Placez les fichiers de polices dans public/fonts/ ou importez depuis Google Fonts dans global.css.
Définissez les règles @font-face dans src/styles/global.css.
Mettez à jour les variables CSS font-family ou les utilitaires Tailwind selon vos besoins.