Mixin

@mixin text-style($size-key, $weight-key: regular, $mode: desktop) {
  $sizes: if($mode == desktop, $sizes-desktop, $sizes-mobile);

  font-family: $font-family-base;
  font-size: map.get($sizes, $size-key);
  line-height: map.get($sizes, $size-key);
  font-weight: map.get($font-weights, $weight-key);
}

Cette mixin permet d’appliquer une règle typographique complète (police, taille, interligne, poids) à partir de clés logiques comme heading-h2, text-sm, etc.

Le paramètre $mode permet de basculer dynamiquement entre mobile et desktop.

les clés sont dans typography.scss

✅ Exemple d’utilisation d’une font

@use '../../../styles/abstracts/typography' as typo;

h2 {
  @include typo.text-style(heading-h2, extrabold, mobile);
}

Cet exemple applique :

• la police “Open Sans”
• une taille adaptée à un titre de niveau 2
• un poids fort (extrabold)
• un interligne cohérent avec la maquette``

Documentation des paramètres typographiques

Paramètres

Tailles disponibles (en px)

Desktop

Mobile

Poids disponibles