Évolution de la fonction fluid-size

[cedric07]

Contexte

La fonction SCSS fluid-size (dans src/scss/02-tools/_f-fluid-size.scss) génère des valeurs fluides via clamp() et une interpolation linéaire en vw, sur le modèle décrit par Aleksandr Hovhannisyan. Elle est utilisée notamment dans src/scss/03-base/_variables-css.scss pour les tailles de titres et de paragraphes exposées en variables CSS (--heading--font-size-*, --paragraph--font-size-*).

Jusqu’ici, l’API supposait implicitement une échelle croissante : la première valeur était le minimum (mobile) et la seconde le maximum (desktop). Dès que $from > $to, clamp(min, …, max) devenait incohérent (borne min > borne max) et le comportement ne correspondait plus à une réduction progressive sur grand écran.

Cette PR aligne la fonction sur un usage bidirectionnel et clarifie la sémantique des paramètres, tout en ajustant la plage fluide par défaut.

Changements fonctionnels

Paramètres renommés

Avant	Après	Rôle
$min	$from	Valeur à la borne de début ($start, par défaut xs → 480px)
$max	$to	Valeur à la borne de fin ($end)

Les deux arguments restent positionnels : on décrit une transition de $from vers $to entre les deux breakpoints, que la valeur augmente ou diminue.

Échelles croissantes et décroissantes

La formule du milieu de clamp reste une interpolation linéaire :

$from + (1vw - start) / (end - start) * (to - from)

Les bornes de clamp sont désormais calculées explicitement :

• $lower = min($from, $to)
• $upper = max($from, $to)

Ainsi, pour fluid-size(40px, 3px) (exemple documenté dans le fichier), l’espacement est plus grand sur mobile et se resserre vers le desktop, sans casser clamp.

Les cas existants du type fluid-size(45px, 56px) (typo qui grossit) conservent le même principe ; seule la plage viewport par défaut change (voir ci-dessous).

Breakpoint de fin par défaut : sm → l

Paramètre	Avant	Après
$start	xs (480px)	xs (480px)
$end	sm (782px)	l (1440px)

Impact : tous les appels qui ne passent pas explicitement $start / $end — dont les variables de typo dans _variables-css.scss — interpolent désormais sur une fenêtre plus large (mobile → grand desktop) au lieu de s’arrêter vers ~782px. La transition est plus progressive ; les valeurs aux viewports intermédiaires et à 1440px ne sont plus identiques à l’ancien comportement.

Pour retrouver l’ancienne plage sur un appel précis :

#{fluid-size(45px, 56px, xs, sm)};

Pour une plage personnalisée, utiliser les clés de $breakpoints (xs, s, sm, m, md, l, etc.) définies dans src/scss/01-abstract/_variables.scss.

Fichier modifié

• src/scss/02-tools/_f-fluid-size.scss — documentation, renommage des paramètres, bornes clamp, défaut $end: l, exemple « shrinking scale ».

Aucun autre fichier du dépôt n’est modifié dans cette PR ; les consommateurs existants de fluid-size héritent du nouveau défaut $end dès le prochain build CSS.

Exemples d’usage

// Typo : plus grande sur desktop (comportement classique)
h1 {
  font-size: #{fluid-size(58px, 156px, sm, md)};
  line-height: #{fluid-size(1.05, 1.2)};
}

// Espacement : plus grand sur mobile, plus petit sur desktop
.hero {
  padding-top: #{fluid-size(40px, 3px)};
}

// Ancienne plage fluide par défaut (xs → sm)
.title {
  font-size: #{fluid-size(45px, 56px, xs, sm)};
}

Points d’attention pour la revue

1. Régression visuelle : vérifier titres / paragraphes sur viewports 480px, 782px, 1080px et 1440px après changement du défaut $end.
2. Unités : la fonction accepte des nombres unitless (line-height) ou des longueurs (px) comme avant ; le delta utilise strip-units sur $to - $from.
3. Cohérence breakpoints : les valeurs passées à $start / $end sont les mêmes que pour les mixins breakpoint du thème (carte $breakpoints).

Synthèse

La PR rend fluid-size utilisable pour des propriétés qui diminuent entre mobile et desktop, clarifie le vocabulaire (from / to) et étend la plage fluide par défaut jusqu’à l (1440px). Les intégrateurs qui dépendaient de l’ancien arrêt à sm doivent passer les breakpoints explicitement sur les appels concernés.

---

Note

Medium Risk
No logic outside the mixin file changes, but the new default $end alters compiled typography/spacing for every two-argument fluid-size consumer until breakpoints are pinned explicitly.

Overview
Updates the fluid-size SCSS helper so the first two arguments mean size at $start and at $end ($from / $to, replacing $min / $max), not strictly mobile-min and desktop-max.

clamp now uses min($from, $to) and max($from, $to) as bounds while the middle term still interpolates $from → $to, so values can shrink on larger viewports (e.g. fluid-size(40px, 3px)). Docs add an example for that case.

The default fluid window changes: $end defaults to l (1440px) instead of sm (~782px). Any call that omits breakpoints—including heading and paragraph CSS variables in _variables-css.scss—will interpolate over a longer, gentler range than before. To keep the old xs→sm behavior, pass xs, sm explicitly on those calls.

^{Reviewed by Cursor Bugbot for commit e0df54a. Bugbot is set up for automated code reviews on this repo. Configure here.}