# Thème
La propriété `theme` définit votre système de design à travers des catégories de jetons optionnelles. Tous les jetons génèrent des propriétés CSS personnalisées et des classes utilitaires Tailwind CSS. Chaque catégorie est optionnelle — un thème minimal peut se limiter aux couleurs.
## Propriétés du thème
| Propriété | Description |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `baseline` | `'extend'` (défaut) conserve l'apparence du système de design par défaut de Sovrium ; `'replace'` la remplace par un socle neutre. |
| `colors` | Jetons de couleur nommés. Chacun génère `--color-{name}` et les utilitaires `bg-{name}`/`text-{name}`/`border-{name}`. |
| `darkColors` | Surcharges de couleur pour le mode sombre, reflétant la structure de `colors`. |
| `fonts` | Typographie pour les polices de titre, corps et monospace. |
| `spacing` | Jetons d'espacement nommés sous forme de chaînes de classes Tailwind. |
| `animations` | Jetons de design pour les keyframes et le mouvement. Voir [Animations](/fr/docs/animations). |
| `breakpoints` | Points de rupture responsifs en valeurs de pixels. Voir [Design responsive](/fr/docs/responsive-design). |
| `shadows` | Jetons de box-shadow nommés, chacun devenant un utilitaire `shadow-{name}`. |
| `borderRadius` | Jetons de rayon nommés, chacun devenant un utilitaire `rounded-{name}`. |
| `codeBlock` | Thème de coloration syntaxique pour les blocs de code délimités en markdown. |
## `colors`
Jetons de couleur nommés sous forme de paires clé-valeur. Chacun devient une variable CSS (`--color-{name}`) et une classe Tailwind (`bg-{name}`, `text-{name}`).
| Propriété | Description |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `{name}` | Nom du jeton (par ex. `primary`, `accent`). Utilisé pour générer la variable CSS `--color-{name}` et les utilitaires Tailwind. |
| Sortie CSS | Génère la variable CSS `--color-{name}` ainsi que les classes utilitaires `bg-{name}`, `text-{name}`, `border-{name}`. |
```yaml
theme:
colors:
primary: '#3b82f6'
secondary: '#8b5cf6'
accent: '#f59e0b'
background: '#0a0e1a'
text: '#e8ecf4'
muted: '#64748b'
```
## `fonts`
Configuration typographique pour les polices de titre, corps et monospace. Prend en charge la famille, la pile de secours, les graisses, le style, la taille, l'interligne, l'espacement des lettres, la transformation et l'url.
| Propriété | Description |
| --------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `family` | Nom de la famille de police (par ex. `"Inter"`, `"Roboto"`). Correspond à la propriété CSS `font-family`. |
| `fallback` | Pile de polices de secours utilisée lorsque la police principale est indisponible (par ex. `"system-ui, sans-serif"`). |
| `weights` | Tableau de graisses numériques à charger (par ex. `[400, 600, 700]`). Optimise la taille du téléchargement. |
| `style` | Style de police : `normal`, `italic` ou `oblique` (défaut : `normal`). |
| `size` | Taille de police de base en valeur CSS (par ex. `"16px"`, `"1rem"`). Appliquée au texte du corps. |
| `lineHeight` | Multiplicateur d'interligne ou valeur CSS (par ex. `"1.5"`, `"1.2"`). Contrôle l'espacement vertical entre les lignes. |
| `letterSpacing` | Espacement des lettres en valeur CSS (par ex. `"0.05em"`, `"-0.01em"`). |
| `transform` | Transformation du texte : `none`, `uppercase`, `lowercase` ou `capitalize`. |
| `url` | URL de fichier de police ou URL Google Fonts. Injectée comme `` dans ``. |
```yaml
theme:
fonts:
heading:
family: Inter
weights: [600, 700]
lineHeight: '1.2'
body:
family: Inter
size: '16px'
url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700'
```
:::callout
**Google Fonts.** Ajoutez une `url` pour charger automatiquement des polices personnalisées. L'URL est injectée comme balise `` dans le head de la page.
:::
## `spacing`
Jetons d'espacement nommés sous forme de chaînes de classes Tailwind. Définissez les largeurs de conteneur, le padding de section, les gaps et l'espacement des composants.
```yaml
theme:
spacing:
container: 'max-w-7xl mx-auto px-4'
section: 'py-16 sm:py-20'
card: 'p-6'
gap: 'gap-8'
```
## `baseline` et mode sombre
`baseline` contrôle si les composants préconstruits de Sovrium étendent l'apparence par défaut ou partent d'un socle neutre.
| Valeur | Comportement |
| ----------- | -------------------------------------------------------------------------------------------- |
| `'extend'` | _(défaut)_ Les composants héritent des jetons du système de design v1 par défaut de Sovrium. |
| `'replace'` | Les composants abandonnent l'apparence par défaut et partent d'un socle neutre, sans style. |
`darkColors` reflète la structure de `colors` et fournit des surcharges appliquées en mode sombre, de sorte qu'un même thème peut livrer les deux palettes.
```yaml
theme:
baseline: extend
colors:
background: '#ffffff'
text: '#0f172a'
darkColors:
background: '#0f172a'
text: '#f8fafc'
```
## Ombres, rayons de bordure et blocs de code
Jetons de design supplémentaires pour l'élévation, le style des coins et la coloration syntaxique.
### `shadows`
Jetons d'ombre nommés sous forme de valeurs CSS `box-shadow`. Chacun devient un utilitaire `shadow-{name}`.
### `borderRadius`
Jetons de rayon de bordure nommés sous forme de valeurs CSS. Chacun devient une classe utilitaire `rounded-{name}`.
### `codeBlock`
Sélectionne le thème de coloration syntaxique utilisé pour les blocs de code délimités en markdown.
```yaml
theme:
shadows:
card: '0 4px 6px rgba(0, 0, 0, 0.1)'
elevated: '0 10px 30px rgba(0, 0, 0, 0.2)'
borderRadius:
card: '0.75rem'
button: '0.5rem'
```
## Points de rupture responsifs et animations
`breakpoints` et `animations` disposent chacun d'une page de référence dédiée :
- [Design responsive](/fr/docs/responsive-design) — valeurs de pixels des points de rupture et surcharges par point de rupture.
- [Animations](/fr/docs/animations) — jetons de keyframe et de mouvement.
```yaml
theme:
breakpoints:
sm: '640px'
md: '768px'
lg: '1024px'
```
:::callout
**Les valeurs de point de rupture sont des chaînes de pixels.** Chaque valeur de `breakpoints` doit respecter le format `px` (par ex. `'768px'`) — les nombres bruts et les unités non pixel sont rejetés par le schéma.
:::
## Exemple complet
Une configuration de thème complète combinant couleurs, polices, espacement et ombres.
```yaml
theme:
colors:
primary: '#6366f1'
secondary: '#8b5cf6'
accent: '#f59e0b'
background: '#0f172a'
surface: '#1e293b'
text: '#f8fafc'
muted: '#94a3b8'
fonts:
heading:
family: Inter
weights: [600, 700]
url: 'https://fonts.googleapis.com/css2?family=Inter:wght@600;700&display=swap'
body:
family: Inter
weights: [400, 500]
spacing:
container: 'max-w-6xl mx-auto px-4'
section: 'py-16 sm:py-20'
```
