Guide de style — Règle agent

Ce document explique la "Règle agent" : comment appliquer et maintenir le style global du site afin de conserver l'apparence initiale de Fumadocs sur toutes les pages.

Principes

• Il existe un seul fichier source de styles globaux : src/app/global.css.
• Utilisez les variables CSS définies (--fd-*) pour les couleurs, la typographie et les espacements.
• Utilisez les classes utilitaires déclarées (ex. nd-container, nd-surface, nd-btn, nd-flex, nd-stack) pour structurer les pages.
• Évitez les styles inline (ex. style={{ color: '...' }}) et l'ajout de nouveaux fichiers CSS ou modules CSS.

Variables disponibles

• Couleurs : --fd-bg, --fd-surface, --fd-muted, --fd-text, --fd-accent, --fd-accent-2, --fd-success, --fd-danger, --fd-border.
• Typographie : --fd-font-sans, --fd-base-size.

Exemple :

<section class="nd-container nd-surface">
  <h2>Mon titre</h2>
  <p class="nd-muted">Exemple de texte secondaire</p>
  <a class="nd-accent" href="/docs">Lien</a>
</section>

Composants & intégration

• Si vous créez un composant React/MDX, appliquez les classes utilitaires ci-dessus.
• Pour les boutons, utilisez nd-btn ou nd-btn secondary.
• Pour les formulaires, utilisez les balises natives (input/textarea) : le style global s'appliquera automatiquement.

Ce qu'il est interdit de faire (sans approbation)

• Ajouter de nouvelles feuilles CSS globales ou modules.
• Redéfinir les variables CSS existantes ailleurs.
• Utiliser des styles inline pour modifier couleurs/typos.
• Introduire des librairies de style concurrentes (ex. custom theme CSS) qui contredisent fumadocs-ui.

Cas particulier : besoin d'ajouter une règle

1. Vérifiez si une variable existante peut être réutilisée.
2. Sinon, proposez un changement en PR : modifiez src/app/global.css et documentez la nouvelle variable dans ce fichier.
3. Un reviewer validera l'impact visuel.

Merci d'appliquer la règle agent et de garder l'UI cohérente sur tout le site.