Design Tokens

Fichier core/css/tokens.css — le seul fichier à modifier pour configurer la charte graphique du client.

Couleurs

Modifiez uniquement les 4 couleurs de base — toutes les variantes (transparent, light, dark) se génèrent automatiquement via color-mix().

:root {
  --primary: #1E69FE;   /* À modifier */
  --secondary: #8b5cf6; /* À modifier */
  --tertiary: #ec4899;  /* À modifier */
  --accent: #f59e0b;    /* À modifier */
}

Couleurs de base

Variantes auto-générées (primary)

Changez --primary et toutes ces variantes se recalculent :

Transparent (t)

Light (l)

Dark (d)

Le même système existe pour --secondary-*, --tertiary-*, --accent-* et --neutral-*.

Sémantique & fond

Nomenclature des variantes

Polices

Le système utilise des polices locales uniquement (RGPD, pas d'appel vers Google Fonts). Les fichiers sont dans assets/fonts/.

Configuration

:root {
  --font-body: 'Inter', system-ui, sans-serif;    /* Texte courant */
  --font-heading: 'Inter', system-ui, sans-serif;  /* Titres h1-h6 */
  --font-mono: 'SF Mono', 'Fira Code', monospace;  /* Code */
}

--font-body s'applique au body, --font-heading s'applique automatiquement aux titres h1–h6. Vous pouvez utiliser deux polices différentes pour le body et les titres.

Changer de police

1. Placez vos fichiers .ttf ou .woff2 dans assets/fonts/
2. Modifiez les @font-face en haut de tokens.css
3. Mettez à jour --font-body et/ou --font-heading

/* Exemple : police statique (non-variable) */
@font-face {
  font-family: 'MaPolice';
  src: url('../../assets/fonts/MaPolice-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MaPolice';
  src: url('../../assets/fonts/MaPolice-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: 'MaPolice', system-ui, sans-serif;
  --font-heading: 'MaPolice', system-ui, sans-serif;
}

Animations Variable Font

Si votre police est variable (comme Inter), vous pouvez animer le poids de la police. Si la police n'est pas variable, l'animation est ignorée silencieusement.

<!-- Poids 400→700 au hover -->
<h2 class="anim-font-weight-hover">Survolez-moi</h2>

<!-- Poids 400→700 au scroll -->
<h2 class="anim-font-weight-scroll">Apparition au scroll</h2>

<!-- Boucle infinie -->
<h2 class="anim-font-weight-loop">Boucle infinie</h2>

<!-- Custom : poids et durée personnalisés -->
<h2 class="anim-font-weight-loop"
    data-font-from="200"
    data-font-to="900"
    data-font-duration="3s">
  Boucle custom
</h2>

Tailles de texte (dynamiques)

Les tailles utilisent clamp() pour s'adapter automatiquement entre mobile et desktop :

:root {
  --text-xs:  clamp(0.7rem, 0.66rem + 0.2vw, 0.75rem);
  --text-sm:  clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --text-lg:  clamp(1rem, 0.93rem + 0.35vw, 1.125rem);
  --text-xl:  clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --text-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-3xl: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem);
  --text-4xl: clamp(1.75rem, 1.35rem + 2vw, 2.25rem);
  --text-5xl: clamp(2rem, 1.4rem + 3vw, 3rem);
}

Border Radius

:root {
  --radius-sm: 0.25rem;    /* 4px  — inputs, badges */
  --radius-md: 0.5rem;     /* 8px  — boutons, cards */
  --radius-lg: 0.75rem;    /* 12px — modals, sections */
  --radius-xl: 1rem;       /* 16px — grandes cards */
  --radius-2xl: 1.5rem;    /* 24px — hero sections */
  --radius-full: 9999px;   /* pills, avatars */
}

Ombres

:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

Mapping interne

Le bas du fichier tokens.css contient un mapping qui connecte vos variables simples aux noms utilisés par les composants. Ne modifiez pas cette section — elle garantit que tout le système utilise vos valeurs.

/* Mapping interne — Ne pas modifier */
--color-primary: var(--primary);
--color-primary-dark: var(--primary-d-2);
--color-secondary: var(--secondary);
/* ... etc */

Mode sombre (Dark Mode)

Le système de thème sombre fonctionne par surcharge des variables CSS dans tokens.css.

Fonctionnement

Un bloc [data-theme="dark"] à la fin de tokens.css surcharge les variables brutes (--text, --bg, --bg-alt, etc.). Les mappings internes (--color-text, --color-bg...) héritent automatiquement.

Inclure le script

Ajoutez le script en synchrone dans le <head>, avant les CSS, pour éviter un flash de thème :

<script src="core/js/darkmode.js"></script>

Bouton toggle

Le header intègre automatiquement un bouton toggle soleil/lune avec animation. Vous pouvez aussi créer votre propre toggle avec l'attribut data-theme-toggle :

<!-- Toggle SVG soleil/lune (intégré dans le header) -->
<button class="header__theme-toggle" data-theme-toggle
        aria-label="Basculer le thème">
  <!-- Soleil (visible en light) -->
  <svg class="header__theme-icon header__theme-icon--sun" ...>...</svg>
  <!-- Lune (visible en dark) -->
  <svg class="header__theme-icon header__theme-icon--moon" ...>...</svg>
</button>

<!-- Toggle simple (texte) -->
<button data-theme-toggle>Mode sombre</button>

Comportement

• Vérifie d'abord localStorage, puis prefers-color-scheme du système
• Persiste le choix dans localStorage (clé : site-system-theme)
• Si l'utilisateur n'a pas fait de choix, suit la préférence système automatiquement
• Fonction globale : window.toggleTheme()

Personnaliser les couleurs sombres

Modifiez le bloc [data-theme="dark"] en fin de tokens.css :

[data-theme="dark"] {
  --text: #e5e7eb;
  --text-light: #9ca3af;
  --bg: #111827;
  --bg-alt: #1f2937;
  --border: #374151;
  --border-dark: #4b5563;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}