Skip to main content
View as Markdown

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.
breakpoints Points de rupture responsifs en valeurs de pixels. Voir Design responsive.
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}. 
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 <link> dans <head>. 
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'

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.

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.

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.

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 — valeurs de pixels des points de rupture et surcharges par point de rupture.
  • Animations — jetons de keyframe et de mouvement.
theme:
  breakpoints:
    sm: '640px'
    md: '768px'
    lg: '1024px'

Exemple complet

Une configuration de thème complète combinant couleurs, polices, espacement et ombres.

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'

Une application CRM rendue avec des couleurs, polices et espacements personnalisés.