eva-css-fluid 1.0.1

package/src/_eva.scss

@@ -0,0 +1,334 @@
+// START FRAMEWORK
+// EVA-CSS v1.0
+
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+
+$max: 1rem;
+$Φ: 1.61803398875;
+$min: 0.5rem;
+$ez: 142.4;
+$unit: 1rem;
+$unit-fluid: 1vw;
+
+$screen: 1440;
+
+$eva: 0;
+
+// CONFIGURATION ENVIRONNEMENT
+// =============================================================================
+// Variables pour contrôler le mode de génération selon l'environnement
+
+// DÉVELOPPEMENT (serveur MCP Figma + IA)
+// $px-rem-suffix: true    → Ajoute valeurs statiques -px et -rem pour debug uniquement
+// $build-class: false     → Utilise uniquement les variables CSS (pas de classes générées)
+// $build-color-classes: false → Pas de génération des classes de couleurs
+
+// PRODUCTION (avec script de purge CSS)
+// $px-rem-suffix: false   → Supprime les valeurs debug -px et -rem
+// $build-class: true      → Génère toutes les classes CSS
+// $build-color-classes: true → Génère les classes de couleurs
+
+// Configuration arrays
+$sizes: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 !default;
+$font-sizes: 12, 14, 16, 18, 20, 24, 32, 48 !default;
+
+// Configuration flags
+$px-rem-suffix: true !default;   // Valeurs statiques de debug uniquement
+$build-class: false !default;      // DEV: false | PROD: true
+$custom-class: false !default;     // true pour filtrage personnalisé des classes
+$name-by-size: true !default;      // true = utilise les valeurs, false = utilise l'index
+
+
+
+$setters-type: "__", "_", "", "-", "-px", "-rem";
+
+$sizing-class: "__", "_", "", "-";
+@if $px-rem-suffix {
+  $sizing-class: list.append($sizing-class, "-px");
+  $sizing-class: list.append($sizing-class, "-rem");
+}
+
+$font-size-class: "__", "_", "";
+@if $px-rem-suffix {
+  $font-size-class: list.append($font-size-class, "-px");
+  $font-size-class: list.append($font-size-class, "-rem");
+}
+
+$properties: (
+  w: width,
+  mw: max-width,
+  h: height,
+  p: padding,
+  px: padding-inline,
+  pr: padding-right,
+  py: padding-block,
+  br: border-radius,
+  mb: margin-bottom,
+  mr: margin-right,
+  ml: margin-left,
+  mt: margin-top,
+  pt: padding-top,
+  pb: padding-bottom,
+  g: gap,
+  gap: gap,
+);
+
+
+$font-properties: (
+  fs: font-size,
+);
+
+
+
+@function round2($number) {
+  @return math.div(math.round($number * 100), 100);
+}
+
+@function getPercent($size, $ratio: 100) {
+  @return round2((math.div($size, $screen)) * $ratio);
+}
+
+@function toPx($size) {
+  @return $size * 1px;
+}
+
+@function toRem($size) {
+  @return math.div($size, 16) * 1rem;
+}
+
+@function getMinRem($percent) {
+  @return round2($percent * $min);
+}
+
+@function getMaxRem($percent) {
+  @return round2($percent * $max);
+}
+
+@function getVW($percent) {
+  @return round2($percent * $unit-fluid);
+}
+
+@function getFinalMinDiv($size, $ratio) {
+  @return round2(math.div($size, $ratio));
+}
+
+@function getFinalMinMulti($size, $ratio) {
+  @return round2($size * $ratio);
+}
+
+
+
+@mixin getAllSizingClass($prop, $key, $eva) {
+  @each $class in $sizing-class {
+    .#{$key}-#{$eva}#{$class} {
+      #{$prop}: var(--#{$eva}#{$class});
+      @if $key =='gap' {
+        --current-gap: var(--#{$eva}-px);
+      }
+    }
+  }
+}
+
+@mixin getAllFontSizeClass($prop, $key, $eva) {
+  @each $class in $font-size-class {
+    .#{$key}-#{$eva}#{$class} {
+      #{$prop}: var(--#{$key}-#{$eva}#{$class});
+    }
+  }
+}
+
+@function is-map($var) {
+  @return meta.type-of($var) == "map";
+}
+
+// GÉNÉRATION DES VARIABLES CSS PERSONNALISÉES
+// =============================================================================
+// Génère toujours les variables CSS (mode dev et prod)
+:root {
+  // Variables pour les tailles de spacing/layout
+  @each $size in $sizes {
+    $eva: $eva + 1;
+    @if $name-by-size {
+      $eva: $size;
+    }
+    $calc-percent: getPercent($size);
+    $calc-percent_: getPercent($size, $ez);
+
+    $size-px: toPx($size);
+    $size-rem: toRem($size);
+
+    $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};
+
+    $final-min__: $min;
+    $final-min_: getFinalMinDiv($rem-min, $Φ);
+    $final-min: getFinalMinMulti($rem-min, $Φ);
+
+    $css-vars: (
+      "__": (
+        min: $final-min__,
+        fluid: $vw-extrem,
+        max: $rem-max,
+      ),
+      "_": (
+        min: $final-min_,
+        fluid: $vw-strong,
+        max: $rem-max,
+      ),
+      "": (
+        min: $rem-min,
+        fluid: $vw-medium,
+        max: $rem-max,
+      ),
+      "-": (
+        min: $final-min,
+        fluid: $vw-light,
+        max: $rem-max,
+      ),
+    );
+
+    // Ajout des variables de debug en mode développement
+    @if $px-rem-suffix {
+      $css-vars-dev: (
+        "-px": $size-px,
+        "-rem": $size-rem,
+      );
+      $css-vars: map.merge($css-vars, $css-vars-dev);
+    }
+
+    @each $key, $prop in $css-vars {
+      @if (is-map($prop)) {
+        --#{$eva}#{$key}: clamp(#{map.get($prop, min)}, #{map.get($prop, fluid)}, #{map.get($prop, max)});
+      } @else {
+        --#{$eva}#{$key}: #{$prop};
+      }
+    }
+  }
+
+  // Variables pour les font-sizes
+  $eva: 0;
+  $min: 0.6rem;
+  $Φ: 1.3;
+  $fs: "fs";
+
+  @each $size in $font-sizes {
+    $eva: $eva + 1;
+    @if $name-by-size {
+      $eva: $size;
+    }
+    $calc-percent: getPercent($size);
+
+    $size-px: toPx($size);
+    $size-rem: toRem($size);
+
+    $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))};
+
+    $rem-max: getMaxRem($calc-percent);
+
+    $final-min__: getFinalMinDiv($rem-min, $Φ);
+    $final-min: getFinalMinMulti($rem-min, $Φ);
+
+    $css-fs-vars: (
+      "__": (
+        min: $final-min__,
+        fluid: $vw-strong,
+        max: $rem-max
+      ),
+      "_": (
+        min: $rem-min,
+        fluid: $vw-medium,
+        max: $rem-max
+      ),
+      "": (
+        min: $final-min,
+        fluid: $vw-light,
+        max: $rem-max
+      ),
+    );
+
+    // Ajout des variables de debug pour les font-sizes en mode développement  
+    @if $px-rem-suffix {
+      $css-vars-dev: (
+        "-px": $size-px,
+        "-rem": $size-rem,
+      );
+      $css-fs-vars: map.merge($css-fs-vars, $css-vars-dev);
+    }
+
+    @each $key, $prop in $css-fs-vars {
+      @if (is-map($prop)) {
+
+        --#{$fs}-#{$eva}#{$key}: clamp(#{map.get($prop, min)}, #{map.get($prop, fluid)}, #{map.get($prop, max)});
+
+      } @else {
+        --#{$fs}-#{$eva}#{$key}: #{$prop};
+      }
+    }
+  }
+}
+
+@if $build-class {
+  // GÉNÉRATION DES CLASSES CSS (MODE PRODUCTION)
+  // Génère les classes utilitaires pour toutes les propriétés
+  $eva: 0;
+  @each $size in $sizes {
+    $eva: $eva + 1;
+    @if $name-by-size {
+      $eva: $size;
+    }
+    @each $key, $prop in $properties {
+      // Vérifier si cette propriété doit être générée pour cette taille
+      $should-generate: false;
+      @if $custom-class {
+        // Si custom-class est true, utiliser le filtrage par $class-config
+        $allowed-sizes: map.get($class-config, $key);
+        @if $allowed-sizes {
+          @each $allowed-size in $allowed-sizes {
+            @if $allowed-size == $size {
+              $should-generate: true;
+            }
+          }
+        }
+      } @else {
+        // Si custom-class est false, générer toutes les classes
+        $should-generate: true;
+      }
+      @if $should-generate {
+        @include getAllSizingClass($prop, $key, $eva);
+      }
+    }
+  }
+}
+
+$eva: 0;
+$min: 0.6rem;
+//$ez : 110;
+
+$Φ: 1.3;
+$fs: "fs";
+
+// GÉNÉRATION DES CLASSES FONT-SIZE (MODE PRODUCTION)
+@if ($build-class) {
+  $eva: 0;
+  @each $size in $font-sizes {
+    $eva: $eva + 1;
+    @if $name-by-size {
+      $eva: $size;
+    }
+    @each $key, $prop in $font-properties {
+      @include getAllFontSizeClass($prop, $key, $eva);
+    }
+  }
+}

package/src/_flex.scss

@@ -0,0 +1,296 @@
+// ===========================================
+// EVA CSS FLEXBOX SYSTEM
+// ===========================================
+// Enhanced flexbox utility system with comprehensive layout controls
+// Unique selectors with hyphens to avoid CSS conflicts
+
+// ===========================================
+// CORE FLEX CONTAINER
+// ===========================================
+
+.flex {
+  display: flex;
+  flex-direction: row; // Default to row
+
+  // ===========================================
+  // FALLBACK MODIFIERS (when no .x or .y specified)
+  // ===========================================
+  
+  &.center {
+    align-items: center;
+    justify-content: center;
+  }
+  
+  &.start {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+  
+  &.end {
+    align-items: flex-end;
+    justify-content: flex-end;
+  }
+  
+  &.space {
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  &.around {
+    justify-content: space-around;
+    align-items: center;
+  }
+  
+  &.evenly {
+    justify-content: space-evenly;
+    align-items: center;
+  }
+
+  // ===========================================
+  // FLEX Y DIRECTION - UNIQUE SELECTORS
+  // ===========================================
+  
+  &.y {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    
+    // SIMPLE combinations (justify-content only)
+    &.start { justify-content: flex-start; }
+    &.center { justify-content: center; align-items: center; }
+    &.end { justify-content: flex-end; }
+    &.space { justify-content: space-between; }
+    &.around { justify-content: space-around; }
+    &.evenly { justify-content: space-evenly; }
+    
+    // START combinations (justify-content: flex-start)
+    &.start-start { justify-content: flex-start; align-items: flex-start; }
+    &.start-center { justify-content: flex-start; align-items: center; }
+    &.start-end { justify-content: flex-start; align-items: flex-end; }
+    &.start-stretch { justify-content: flex-start; align-items: stretch; }
+    &.start-baseline { justify-content: flex-start; align-items: baseline; }
+    
+    // CENTER combinations (justify-content: center)
+    &.center-start { justify-content: center; align-items: flex-start; }
+    &.center-center { justify-content: center; align-items: center; }
+    &.center-end { justify-content: center; align-items: flex-end; }
+    &.center-stretch { justify-content: center; align-items: stretch; }
+    &.center-baseline { justify-content: center; align-items: baseline; }
+    
+    // END combinations (justify-content: flex-end)
+    &.end-start { justify-content: flex-end; align-items: flex-start; }
+    &.end-center { justify-content: flex-end; align-items: center; }
+    &.end-end { justify-content: flex-end; align-items: flex-end; }
+    &.end-stretch { justify-content: flex-end; align-items: stretch; }
+    &.end-baseline { justify-content: flex-end; align-items: baseline; }
+    
+    // SPACE combinations (justify-content: space-between)
+    &.space-start { justify-content: space-between; align-items: flex-start; }
+    &.space-center { justify-content: space-between; align-items: center; }
+    &.space-end { justify-content: space-between; align-items: flex-end; }
+    &.space-stretch { justify-content: space-between; align-items: stretch; }
+    &.space-baseline { justify-content: space-between; align-items: baseline; }
+    
+    // AROUND combinations (justify-content: space-around)
+    &.around-start { justify-content: space-around; align-items: flex-start; }
+    &.around-center { justify-content: space-around; align-items: center; }
+    &.around-end { justify-content: space-around; align-items: flex-end; }
+    &.around-stretch { justify-content: space-around; align-items: stretch; }
+    &.around-baseline { justify-content: space-around; align-items: baseline; }
+    
+    // EVENLY combinations (justify-content: space-evenly)
+    &.evenly-start { justify-content: space-evenly; align-items: flex-start; }
+    &.evenly-center { justify-content: space-evenly; align-items: center; }
+    &.evenly-end { justify-content: space-evenly; align-items: flex-end; }
+    &.evenly-stretch { justify-content: space-evenly; align-items: stretch; }
+    &.evenly-baseline { justify-content: space-evenly; align-items: baseline; }
+  }
+
+  // ===========================================
+  // FLEX X DIRECTION - UNIQUE SELECTORS
+  // ===========================================
+  
+  &.x {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    
+    // SIMPLE combinations (justify-content only)
+    &.start { justify-content: flex-start; }
+    &.center { justify-content: center; align-items: center; }
+    &.end { justify-content: flex-end; }
+    &.space { justify-content: space-between; }
+    &.around { justify-content: space-around; }
+    &.evenly { justify-content: space-evenly; }
+    
+    // START combinations (justify-content: flex-start)
+    &.start-start { justify-content: flex-start; align-items: flex-start; }
+    &.start-center { justify-content: flex-start; align-items: center; }
+    &.start-end { justify-content: flex-start; align-items: flex-end; }
+    &.start-stretch { justify-content: flex-start; align-items: stretch; }
+    &.start-baseline { justify-content: flex-start; align-items: baseline; }
+    
+    // CENTER combinations (justify-content: center)
+    &.center-start { justify-content: center; align-items: flex-start; }
+    &.center-center { justify-content: center; align-items: center; }
+    &.center-end { justify-content: center; align-items: flex-end; }
+    &.center-stretch { justify-content: center; align-items: stretch; }
+    &.center-baseline { justify-content: center; align-items: baseline; }
+    
+    // END combinations (justify-content: flex-end)
+    &.end-start { justify-content: flex-end; align-items: flex-start; }
+    &.end-center { justify-content: flex-end; align-items: center; }
+    &.end-end { justify-content: flex-end; align-items: flex-end; }
+    &.end-stretch { justify-content: flex-end; align-items: stretch; }
+    &.end-baseline { justify-content: flex-end; align-items: baseline; }
+    
+    // SPACE combinations (justify-content: space-between)
+    &.space-start { justify-content: space-between; align-items: flex-start; }
+    &.space-center { justify-content: space-between; align-items: center; }
+    &.space-end { justify-content: space-between; align-items: flex-end; }
+    &.space-stretch { justify-content: space-between; align-items: stretch; }
+    &.space-baseline { justify-content: space-between; align-items: baseline; }
+    
+    // AROUND combinations (justify-content: space-around)
+    &.around-start { justify-content: space-around; align-items: flex-start; }
+    &.around-center { justify-content: space-around; align-items: center; }
+    &.around-end { justify-content: space-around; align-items: flex-end; }
+    &.around-stretch { justify-content: space-around; align-items: stretch; }
+    &.around-baseline { justify-content: space-around; align-items: baseline; }
+    
+    // EVENLY combinations (justify-content: space-evenly)
+    &.evenly-start { justify-content: space-evenly; align-items: flex-start; }
+    &.evenly-center { justify-content: space-evenly; align-items: center; }
+    &.evenly-end { justify-content: space-evenly; align-items: flex-end; }
+    &.evenly-stretch { justify-content: space-evenly; align-items: stretch; }
+    &.evenly-baseline { justify-content: space-evenly; align-items: baseline; }
+  }
+
+  // ===========================================
+  // EXPLICIT AXIS CONTROL (alternative syntax)
+  // ===========================================
+  
+  // Main axis (justify-content) explicit classes
+  &.justify-start { justify-content: flex-start; }
+  &.justify-center { justify-content: center; }
+  &.justify-end { justify-content: flex-end; }
+  &.justify-space { justify-content: space-between; }
+  &.justify-around { justify-content: space-around; }
+  &.justify-evenly { justify-content: space-evenly; }
+  
+  // Cross axis (align-items) explicit classes
+  &.items-start { align-items: flex-start; }
+  &.items-center { align-items: center; }
+  &.items-end { align-items: flex-end; }
+  &.items-stretch { align-items: stretch; }
+  &.items-baseline { align-items: baseline; }
+
+  // ===========================================
+  // ALIGN CONTENT (FOR MULTI-LINE)
+  // ===========================================
+  
+  &.content-start { align-content: flex-start; }
+  &.content-center { align-content: center; }
+  &.content-end { align-content: flex-end; }
+  &.content-space { align-content: space-between; }
+  &.content-around { align-content: space-around; }
+  &.content-evenly { align-content: space-evenly; }
+
+  // ===========================================
+  // FLEX WRAP MODIFIERS
+  // ===========================================
+  
+  &.wrap { flex-wrap: wrap; }
+  &.nowrap { flex-wrap: nowrap; }
+  &.wrap-reverse { flex-wrap: wrap-reverse; }
+
+  // ===========================================
+  // REVERSE MODIFIERS
+  // ===========================================
+  
+  &.reverse {
+    &.x { flex-direction: row-reverse; }
+    &.y { flex-direction: column-reverse; }
+  }
+}
+
+// ===========================================
+// FLEX ITEM MODIFIERS
+// ===========================================
+
+// Flex grow, shrink, basis utilities
+.flex-1 { flex: 1 1 0%; }
+.flex-auto { flex: 1 1 auto; }
+.flex-initial { flex: 0 1 auto; }
+.flex-none { flex: none; }
+
+// Legacy compatibility
+.stretch { flex: 1; }
+
+// Specific flex values
+.flex-2 { flex: 2 1 0%; }
+.flex-3 { flex: 3 1 0%; }
+
+// ===========================================
+// ALIGN SELF MODIFIERS
+// ===========================================
+
+.self-auto { align-self: auto; }
+.self-start { align-self: flex-start; }
+.self-center { align-self: center; }
+.self-end { align-self: flex-end; }
+.self-stretch { align-self: stretch; }
+.self-baseline { align-self: baseline; }
+
+// ===========================================
+// ORDER UTILITIES
+// ===========================================
+
+.order-first { order: -9999; }
+.order-last { order: 9999; }
+.order-none { order: 0; }
+
+// Numbered orders (1-12 common use cases)
+@for $i from 1 through 12 {
+  .order-#{$i} { order: #{$i}; }
+}
+
+// ===========================================
+// COMMON FLEX PATTERNS
+// ===========================================
+
+// Card layouts
+.flex-card {
+  display: flex;
+  flex-direction: column;
+  
+  .flex-card-header,
+  .flex-card-footer { flex-shrink: 0; }
+  
+  .flex-card-body { flex: 1; }
+}
+
+// Sidebar layouts
+.flex-sidebar {
+  display: flex;
+  
+  .flex-sidebar-nav { flex-shrink: 0; }
+  .flex-sidebar-main {
+    flex: 1;
+    min-width: 0; // Prevent flex item overflow
+  }
+}
+
+// Center content patterns
+.flex-center-page {
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-center-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/_font.scss

@@ -0,0 +1,63 @@
+// Importez le module math si vous utilisez une version moderne de Sass
+@use "sass:math";
+
+$wght-min: 200;
+$wght-max: 900;
+$wght-step: 100;
+
+$wdth-min: 50;
+$wdth-max: 170;
+$wdth-step: 10;
+
+:root {
+  --title-font: "scale-variable";
+  --body-font: "Noto Sans Display";
+
+  --title-weight: 800;
+  --title-width: 100;
+  --sub-title-weight:700;
+  --sub-title-width: 100;
+  --sub-sub-title-weight: 600;
+  --sub-sub-title-width: 60;
+  --sub-sub-title-spacing: 0.1em;
+  --body-weight: 400;
+
+  $wght-steps: math.div(($wght-max - $wght-min), $wght-step) + 1;
+  @for $i from 0 through $wght-steps - 1 {
+    --f-wg-#{$i + 1}: #{$wght-min + ($wght-step * $i)};
+  }
+
+  $wdth-steps: math.div(($wdth-max - $wdth-min), $wdth-step) + 1;
+  @for $i from 0 through $wdth-steps - 1 {
+    --f-wd-#{$i + 1}: #{$wdth-min + ($wdth-step * $i)};
+  }
+}
+
+$wght-steps: math.div(($wght-max - $wght-min), $wght-step) + 1;
+@for $i from 0 through $wght-steps - 1 {
+ 
+
+  .fwg-#{$i + 1} {
+    --current-f-wg: var(--f-wg-#{$i + 1});
+  }
+}
+
+$wdth-steps: math.div(($wdth-max - $wdth-min), $wdth-step) + 1;
+@for $i from 0 through $wdth-steps - 1 {
+  .fwd-#{$i + 1} {
+    --current-f-wd: var(--f-wd-#{$i + 1});
+  }
+}
+
+.f-scale {
+  font-variation-settings: "wght" var(--current-f-wg, 400), "wdth" var(--current-f-wd, 100), "ital" 0;
+  &.offset {
+    position: relative;
+    padding-top: 0.25em;
+    &_{
+      position: relative;
+      display: inline-block;
+      padding-top: 0.25em;
+    }
+  }
+}