eva-css-fluid 2.0.8 → 2.3.0

package/src/_eva.scss

@@ -11,9 +11,22 @@ $Φ: 1.61803398875;
 $min: 0.5rem;
 $ez: 142.4;
 $unit: 1rem;
-$unit-fluid: 1vw;
+$unit-fluid: 1vw !default;
 
-$screen: 1440;
+$screen: 1440 !default;
+
+// Émettre l'unité fluide comme custom property et la multiplier en calc(),
+// au lieu de la figer au build. Permet de basculer un sous-arbre vw -> cqi
+// à l'exécution (var --eva-fluid-unit) sans rebuild ni second fichier.
+// $fluid-runtime: false  -> sortie littérale (anciennes valeurs, zéro coût runtime).
+$fluid-runtime: true !default;
+
+// Plancher de lisibilité (a11y) — plus petite taille de texte tolérée, en px.
+// Floore la borne min des clamp() de font-size : la borne min EST la taille
+// petit écran (mobile), donc le plancher = taille mobile, pas le corps desktop.
+// 13-14 reste lisible sur mobile ; 16 écraserait le rétrécissement fluide.
+// 0 = désactivé (sortie inchangée, rétrocompatible).
+$min-font-size: 0 !default;
 
 $eva: 0;
 
@@ -195,6 +208,42 @@ $font-properties: (
   @return round2($percent * $unit-fluid);
 }
 
+// Construit le terme fluide central d'un clamp().
+// $vw-val : longueur fluide (ex. 0.14vw) issue de getVW (éventuellement divisée).
+// $op     : "+" ou "-" (offset rem ajouté/retranché).
+// $rem-val: offset statique en rem.
+//
+// Mode runtime ($fluid-runtime: true) :
+//   0.14vw + 0.75rem  ->  calc(0.14 * var(--eva-fluid-unit, 1vw) + 0.75rem)
+//   Le coefficient (0.14) est la valeur numérique de $vw-val ; l'unité devient
+//   commutable à l'exécution. Valeur calculée identique au mode littéral tant
+//   que --eva-fluid-unit n'est pas redéfinie (fallback = $unit-fluid).
+//
+// Mode littéral ($fluid-runtime: false) :
+//   renvoie l'expression historique "0.14vw + 0.75rem".
+@function fluidExpr($vw-val, $op, $rem-val) {
+  @if $fluid-runtime {
+    $coef: math.div($vw-val, $unit-fluid); // unité retirée -> coefficient pur
+    @if $op == "-" {
+      @return calc(#{$coef} * var(--eva-fluid-unit, #{$unit-fluid}) - #{$rem-val});
+    } @else {
+      @return calc(#{$coef} * var(--eva-fluid-unit, #{$unit-fluid}) + #{$rem-val});
+    }
+  } @else {
+    @return #{$vw-val} #{$op} #{$rem-val};
+  }
+}
+
+// Plancher de lisibilité : remonte une borne min (rem) à au moins
+// $min-font-size (converti px -> rem pour suivre le zoom utilisateur).
+// $min-font-size: 0 -> renvoie la valeur telle quelle (no-op).
+@function floorRem($rem-val) {
+  @if $min-font-size > 0 {
+    @return math.max($rem-val, toRem($min-font-size));
+  }
+  @return $rem-val;
+}
+
 @function getFinalMinDiv($size, $ratio) {
   @return round2(math.div($size, $ratio));
 }
@@ -228,6 +277,19 @@ $font-properties: (
   @return meta.type-of($var) == "map";
 }
 
+// UNITÉ FLUIDE COMMUTABLE À L'EXÉCUTION
+// =============================================================================
+// Typer la propriété (au lieu d'une chaîne re-parsée à chaque substitution) :
+// stockage d'une valeur <length> typée, zéro re-parse. inherits: true pour que
+// l'override sur un conteneur se propage à tout son sous-arbre.
+@if $fluid-runtime {
+  @property --eva-fluid-unit {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: #{$unit-fluid};
+  }
+}
+
 // GÉNÉRATION DES VARIABLES CSS PERSONNALISÉES
 // =============================================================================
 // Génère toujours les variables CSS (mode dev et prod)
@@ -247,10 +309,10 @@ $font-properties: (
     $rem-min: getMinRem($calc-percent);
     $rem-max: getMaxRem($calc-percent);
 
-    $vw-light: #{round2(math.div(getVW($calc-percent), 4))} "+" #{round2(math.div($size-rem, 1.33))};
-    $vw-medium: #{round2(math.div(getVW($calc-percent), 2))} "+" #{round2(math.div($size-rem, 2))};
-    $vw-strong: #{round2(math.div(getVW($calc-percent), 1.33))} "+" #{round2(math.div($size-rem, 4))};
-    $vw-extrem: #{getVW($calc-percent_)} "-" #{$rem-min};
+    $vw-light: fluidExpr(round2(math.div(getVW($calc-percent), 4)), "+", round2(math.div($size-rem, 1.33)));
+    $vw-medium: fluidExpr(round2(math.div(getVW($calc-percent), 2)), "+", round2(math.div($size-rem, 2)));
+    $vw-strong: fluidExpr(round2(math.div(getVW($calc-percent), 1.33)), "+", round2(math.div($size-rem, 4)));
+    $vw-extrem: fluidExpr(getVW($calc-percent_), "-", $rem-min);
 
     $final-min__: $min;
     $final-min_: getFinalMinDiv($rem-min, $Φ);
@@ -315,9 +377,9 @@ $font-properties: (
 
     $rem-min: getMinRem($calc-percent);
 
-    $vw-light: #{round2(math.div(getVW($calc-percent), 4))} "+" #{round2(math.div($size-rem, 1.33))};
-    $vw-medium: #{round2(math.div(getVW($calc-percent), 2))} "+" #{round2(math.div($size-rem, 2))};
-    $vw-strong: #{round2(math.div(getVW($calc-percent), 1.33))} "+" #{round2(math.div($size-rem, 4))};
+    $vw-light: fluidExpr(round2(math.div(getVW($calc-percent), 4)), "+", round2(math.div($size-rem, 1.33)));
+    $vw-medium: fluidExpr(round2(math.div(getVW($calc-percent), 2)), "+", round2(math.div($size-rem, 2)));
+    $vw-strong: fluidExpr(round2(math.div(getVW($calc-percent), 1.33)), "+", round2(math.div($size-rem, 4)));
 
     $rem-max: getMaxRem($calc-percent);
 
@@ -326,17 +388,17 @@ $font-properties: (
 
     $css-fs-vars: (
       "__": (
-        min: $final-min__,
+        min: floorRem($final-min__),
         fluid: $vw-strong,
         max: $rem-max
       ),
       "_": (
-        min: $rem-min,
+        min: floorRem($rem-min),
         fluid: $vw-medium,
         max: $rem-max
       ),
       "": (
-        min: $final-min,
+        min: floorRem($final-min),
         fluid: $vw-light,
         max: $rem-max
       ),
@@ -416,3 +478,24 @@ $fs: "fs";
     }
   }
 }
+
+// UTILITAIRES CONTENEUR (opt-in) — unité fluide à l'exécution
+// =============================================================================
+// Disponibles uniquement en mode runtime + génération de classes.
+//   .eva-root : conteneur pleine largeur. cqi ≡ vw pour le livrable, et tout
+//               conteneur imbriqué peut alors override localement.
+//               (caveat: container-type sur un élément racine interagit avec
+//                position:sticky / overflow — à poser délibérément.)
+//   .eva-cqi  : bascule les tokens EVA de ce sous-arbre sur la largeur de
+//               l'élément (cards dashboard, cellule de lab, demi-colonne…).
+//               container-type + override de --eva-fluid-unit, indissociables.
+@if $fluid-runtime and $build-class {
+  .eva-root {
+    container: eva-root / inline-size;
+  }
+
+  .eva-cqi {
+    container-type: inline-size;
+    --eva-fluid-unit: 1cqi;
+  }
+}

package/src/config-schema.cjs

@@ -16,6 +16,10 @@ const defaults = {
   customClass: false,
   classConfig: {},
   debug: false,
+  fluidUnit: '1vw',       // unité fluide: '1vw' (livrable) ou '1cqi' (conteneur)
+  referenceWidth: 1440,   // largeur où les tokens atteignent leur valeur max
+  fluidRuntime: true,     // émettre var(--eva-fluid-unit) commutable à l'exécution
+  minFontSize: 0,         // plancher a11y (px) sur les min de font-size; 0 = désactivé
   theme: {
     name: 'eva',
     colors: {
@@ -110,13 +114,44 @@ function validateConfig(config, source = 'config file') {
   }
 
   // Validate boolean flags
-  const booleanFlags = ['buildClass', 'pxRemSuffix', 'nameBySize', 'customClass', 'debug'];
+  const booleanFlags = ['buildClass', 'pxRemSuffix', 'nameBySize', 'customClass', 'debug', 'fluidRuntime'];
   booleanFlags.forEach(flag => {
     if (config[flag] !== undefined && typeof config[flag] !== 'boolean') {
       errors.push(`${flag}: Must be a boolean (true or false)`);
     }
   });
 
+  // Validate fluidUnit (relative length: viewport or container unit)
+  if (config.fluidUnit !== undefined) {
+    if (typeof config.fluidUnit !== 'string') {
+      errors.push('fluidUnit: Must be a string CSS length (e.g. "1vw" or "1cqi")');
+    } else if (!/^\d*\.?\d+(vw|vi|vmin|vmax|cqi|cqw|cqmin|cqmax|svw|lvw|dvw)$/.test(config.fluidUnit.trim())) {
+      errors.push(
+        `fluidUnit: "${config.fluidUnit}" is not a recognized fluid unit. ` +
+        'Use a viewport unit (vw, vi, svw, lvw, dvw) or a container unit (cqi, cqw, cqmin, cqmax)'
+      );
+    }
+  }
+
+  // Validate referenceWidth
+  if (config.referenceWidth !== undefined) {
+    if (typeof config.referenceWidth !== 'number' || config.referenceWidth <= 0) {
+      errors.push('referenceWidth: Must be a positive number (px value, e.g. 1440)');
+    }
+  }
+
+  // Validate minFontSize (a11y readability floor, px; 0 = off)
+  if (config.minFontSize !== undefined) {
+    if (typeof config.minFontSize !== 'number' || config.minFontSize < 0) {
+      errors.push('minFontSize: Must be a number >= 0 (px value, e.g. 14; 0 disables the floor)');
+    } else if (config.minFontSize > 16) {
+      warnings.push(
+        `minFontSize: ${config.minFontSize}px is high for a mobile floor — the min bound is the ` +
+        `small-screen size, not the desktop body size (recommended: 13-14)`
+      );
+    }
+  }
+
   // Validate classConfig
   if (config.classConfig !== undefined) {
     if (typeof config.classConfig !== 'object' || Array.isArray(config.classConfig)) {
@@ -375,6 +410,12 @@ function toScssVariables(config) {
   lines.push(`$custom-class: ${config.customClass};`);
   lines.push(`$debug: ${config.debug};`);
 
+  // Fluid engine (runtime-switchable unit)
+  lines.push(`$unit-fluid: ${config.fluidUnit || defaults.fluidUnit};`);
+  lines.push(`$reference-width: ${config.referenceWidth || defaults.referenceWidth};`);
+  lines.push(`$fluid-runtime: ${config.fluidRuntime !== undefined ? config.fluidRuntime : defaults.fluidRuntime};`);
+  lines.push(`$min-font-size: ${config.minFontSize !== undefined ? config.minFontSize : defaults.minFontSize};`);
+
   // Class config (convert to SCSS map)
   if (config.customClass && Object.keys(config.classConfig).length > 0) {
     lines.push('$class-config: (');

package/src/core.scss

@@ -12,6 +12,10 @@ $font-sizes: 12, 14, 16, 18, 20, 24, 32, 48 !default;
 $px-rem-suffix: false !default;
 $name-by-size: true !default;
 $class-config: () !default;
+$unit-fluid: 1vw !default;        // unité fluide (vw|cqi) + fallback runtime
+$reference-width: 1440 !default;  // largeur où les tokens atteignent leur max
+$fluid-runtime: true !default;    // émettre var(--eva-fluid-unit) en calc()
+$min-font-size: 0 !default;       // plancher a11y (px) sur les min de font-size; 0 = off
 
 // Core variable generation system
 @use '_eva' with (
@@ -21,7 +25,11 @@ $class-config: () !default;
   $px-rem-suffix: $px-rem-suffix,
   $name-by-size: $name-by-size,
   $custom-class: false,
-  $class-config: $class-config
+  $class-config: $class-config,
+  $unit-fluid: $unit-fluid,
+  $screen: $reference-width,
+  $fluid-runtime: $fluid-runtime,
+  $min-font-size: $min-font-size
 );
 
 // Color system

package/src/index.scss

@@ -15,6 +15,10 @@ $name-by-size: true !default;
 $custom-class: false !default;
 $class-config: () !default;
 $debug: false !default;
+$unit-fluid: 1vw !default;        // unité fluide (vw|cqi) + fallback runtime
+$reference-width: 1440 !default;  // largeur où les tokens atteignent leur max
+$fluid-runtime: true !default;    // émettre var(--eva-fluid-unit) en calc()
+$min-font-size: 0 !default;       // plancher a11y (px) sur les min de font-size; 0 = off
 
 // ===========================================
 // CORE FRAMEWORK MODULES
@@ -31,7 +35,11 @@ $debug: false !default;
   $name-by-size: $name-by-size,
   $custom-class: $custom-class,
   $class-config: $class-config,
-  $debug: $debug
+  $debug: $debug,
+  $unit-fluid: $unit-fluid,
+  $screen: $reference-width,
+  $fluid-runtime: $fluid-runtime,
+  $min-font-size: $min-font-size
 );
 
 // OKLCH color system with opacity/brightness modifiers

package/src/variables.scss

@@ -11,6 +11,10 @@ $font-sizes: 12, 14, 16, 18, 20, 24, 32, 48 !default;
 $px-rem-suffix: false !default;
 $name-by-size: true !default;
 $class-config: () !default;
+$unit-fluid: 1vw !default;        // unité fluide (vw|cqi) + fallback runtime
+$reference-width: 1440 !default;  // largeur où les tokens atteignent leur max
+$fluid-runtime: true !default;    // émettre var(--eva-fluid-unit) en calc()
+$min-font-size: 0 !default;       // plancher a11y (px) sur les min de font-size; 0 = off
 
 // Import only the core variable generation system
 @use '_eva' with (
@@ -20,7 +24,11 @@ $class-config: () !default;
   $px-rem-suffix: $px-rem-suffix,
   $name-by-size: $name-by-size,
   $custom-class: false,
-  $class-config: $class-config
+  $class-config: $class-config,
+  $unit-fluid: $unit-fluid,
+  $screen: $reference-width,
+  $fluid-runtime: $fluid-runtime,
+  $min-font-size: $min-font-size
 );
 
 // Import colors system