eva-css-fluid 1.0.1

package/src/_gradients.scss

@@ -0,0 +1,128 @@
+// _gradients.scss
+// Système ultra-moderne pour les gradients - Emmet-style only!
+// Contrôle complet des couleurs et angles via variables CSS
+
+@use "colors" as colors;
+
+// Conteneur pour toutes les variables de gradient
+.all-grads {
+  --current-angle: 90deg; // Angle pour le système dynamique
+  --current-from-color: var(--brand); // Couleur de départ dynamique
+  --current-to-color: var(--accent); // Couleur d'arrivée dynamique
+}
+
+// =============================================================================
+// APPLICATEURS MODERNES : Classes Emmet-style pour les gradients
+// =============================================================================
+
+.grad-linear {
+  background: linear-gradient(var(--current-angle), var(--current-from-color) 0%, var(--current-to-color) 100%);
+}
+
+.grad-radial {
+  background: radial-gradient(circle at center, var(--current-from-color) 0%, var(--current-to-color) 100%);
+}
+
+.grad-linear-text {
+  background: linear-gradient(var(--current-angle), var(--current-from-color) 0%, var(--current-to-color) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.grad-radial-text {
+  background: radial-gradient(circle at center, var(--current-from-color) 0%, var(--current-to-color) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.grad-linear-border {
+  border-image: linear-gradient(var(--current-angle), var(--current-from-color) 0%, var(--current-to-color) 100%) 1;
+}
+
+.grad-radial-border {
+  border-image: radial-gradient(circle at center, var(--current-from-color) 0%, var(--current-to-color) 100%) 1;
+}
+
+// =============================================================================
+// EMMET-STYLE COULEURS : Version ultra-compacte
+// =============================================================================
+
+// Emmet-style color setters
+@each $color in colors.$gradients {
+  @each $variation in colors.$all-variations {
+    $color-name: if($variation == "", $color, "#{$color}#{$variation}");
+    
+    .from-#{$color-name} {
+      --current-from-color: var(--#{$color-name});
+    }
+    
+    .to-#{$color-name} {
+      --current-to-color: var(--#{$color-name});
+    }
+  }
+}
+
+// Emmet-style couleurs spéciales
+.from-transparent { --current-from-color: transparent; }
+.to-transparent { --current-to-color: transparent; }
+
+// =============================================================================
+// EMMET-STYLE ANGLES : Contrôle ultra-compact
+// =============================================================================
+
+// Emmet-style direction modificateurs
+.d-t { --current-angle: to top !important; }
+.d-b { --current-angle: to bottom !important; }
+.d-l { --current-angle: to left !important; }
+.d-r { --current-angle: to right !important; }
+.d-tl { --current-angle: to top left !important; }
+.d-tr { --current-angle: to top right !important; }
+.d-bl { --current-angle: to bottom left !important; }
+.d-br { --current-angle: to bottom right !important; }
+
+// Emmet-style angle modificateurs (génération automatique)
+@for $i from 0 through 72 {
+  $angle: $i * 5;
+  .a-#{$angle} { --current-angle: #{$angle}deg !important; }
+}
+
+// =============================================================================
+// EMMET-STYLE BACKGROUND ZOOM : Contrôle ultra-compact du background-size
+// =============================================================================
+
+// Background zoom classes - style Emmet
+.bg-size { background-size: 150% 150%; }
+.bg-size_ { background-size: 200% 200%; }
+.bg-size__ { background-size: 300% 300%; }
+
+
+
+// Background position pour les zooms
+.bg-center { background-position: center; }
+.bg-top { background-position: top; }
+.bg-bottom { background-position: bottom; }
+.bg-left { background-position: left; }
+.bg-right { background-position: right; }
+
+// =============================================================================
+// EFFETS ET ANIMATIONS MODERNES
+// =============================================================================
+
+// Animations ultra-compactes
+.animated { animation: gradient-shift 3s ease infinite; }
+.animated-slow { animation: gradient-shift 6s ease infinite; }
+.animated-fast { animation: gradient-shift 1s ease infinite; }
+
+
+
+// =============================================================================
+// KEYFRAMES pour les animations
+// =============================================================================
+
+@keyframes gradient-shift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}

package/src/_grid.scss

@@ -0,0 +1,137 @@
+// Fonction strip-unit pour retirer les unités des valeurs Sass
+@use 'sass:math';
+@use 'sass:meta';
+
+@function strip-unit($number) {
+  @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
+    @return math.div($number, ($number * 0 + 1));
+  }
+  @return $number;
+}
+
+// Configuration
+$sizes: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 !default;
+$sizing-class: "__", "_", "", "-" !default;
+
+.grid {
+  display: grid;
+  width: 100%;
+}
+
+[class*=auto-fit] {
+  grid-template-columns: repeat(auto-fit, minmax(var(--current-minmax), 1fr));
+}
+
+// Variable de taille minimale pour les grilles
+$grid-min-size: 100 !default;
+
+// Génération automatique des classes auto-fit basée sur $sizes
+@each $size in $sizes {
+  @if $size >= $grid-min-size {
+    @each $class in $sizing-class {
+      .auto-fit-#{$size}#{$class} {
+        --current-minmax: var(--#{$size}#{$class});
+      }
+    }
+  }
+}
+
+// ==========================================
+// SYSTÈME DE GRID CLASSIQUE EN FLEXBOX
+// ==========================================
+
+:root {
+  --grid-columns: 12; // Variable CSS principale (fallback)
+  --col-min-width: 200px; // Largeur minimale d'une colonne
+  --col-min-width-unitless: #{strip-unit(200px)}; // Version sans unité pour les calculs CSS
+  --current-gap: 1rem; // Gap par défaut entre les colonnes
+}
+
+// Container queries pour calcul automatique du nombre de colonnes
+.container\:flex-grid {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: var(--current-gap);
+  container-type: inline-size; // Active les container queries
+  
+  // Calcul automatique basé sur la largeur du conteneur
+  // Plus le conteneur est large, plus on a de colonnes
+  @container (min-width: 200px) { --grid-columns: 1; }
+  @container (min-width: 400px) { --grid-columns: 2; }
+  @container (min-width: 600px) { --grid-columns: 3; }
+  @container (min-width: 800px) { --grid-columns: 4; }
+  @container (min-width: 1000px) { --grid-columns: 5; }
+  @container (min-width: 1200px) { --grid-columns: 6; }
+  @container (min-width: 1400px) { --grid-columns: 8; }
+  @container (min-width: 1600px) { --grid-columns: 10; }
+  @container (min-width: 1800px) { --grid-columns: 12; }
+  @container (min-width: 2000px) { --grid-columns: 16; }
+}
+
+.flex-grid {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: var(--current-gap);
+}
+
+
+// Système de colonnes avec calcul CSS dynamique
+$max-columns: 12; // Nombre maximum de colonnes à générer
+$breakpoints: (
+  "xs": 200px,
+  "sm": 500px,
+  "md": 700px,
+  "lg": 1000px,
+  "xl": 1200px,
+  "xxl": 1400px
+);
+
+// Génération des classes col-X avec calcul CSS dynamique
+@for $i from 1 through $max-columns {
+  .col-#{$i} {
+    --col-span: #{$i};
+    flex: 0 0 auto;
+    width: min(calc(var(--col-span) / var(--grid-columns) * 100% - (var(--grid-columns) / var(--col-span) - 1) * var(--current-gap) / (var(--grid-columns) / var(--col-span))), 100%);
+  }
+}
+
+// Génération des classes avec notation fraction col-1/Y
+@for $denominator from 1 through $max-columns {
+  .col-1\/#{$denominator} {
+    --col-fraction: calc(var(--grid-columns) / #{$denominator});
+    flex: 0 0 auto;
+    // Utilise --grid-columns dans le calcul pour être adaptable
+    width: min(calc(var(--col-fraction) / var(--grid-columns) * 100% - (var(--grid-columns) / var(--col-fraction) - 1) * var(--current-gap) / (var(--grid-columns) / var(--col-fraction))), 100%);
+  }
+}
+
+// ==========================================
+// CLASSES POUR SETTER LOCALEMENT --grid-columns
+// ==========================================
+
+// Génération des classes max-col-X pour définir le nombre de colonnes localement
+@for $i from 1 through $max-columns {
+  .max-col-#{$i} {
+    --grid-columns: #{$i};
+  }
+}
+
+
+// ==========================================
+// CLASSES RESPONSIVES POUR MAX-COLUMNS
+// ==========================================
+
+// Génération des classes responsives pour max-col avec breakpoints
+@each $breakpoint-name, $breakpoint-value in $breakpoints {
+  @media (max-width: #{$breakpoint-value}) {
+    @for $i from 1 through $max-columns {
+      .#{$breakpoint-name}\:max-col-#{$i} {
+        --grid-columns: #{$i};
+      }
+    }
+  }
+}
+
+

package/src/_reset.scss

@@ -0,0 +1,83 @@
+/* stylelint-disable property-no-vendor-suffix */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  color: currentcolor;
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  display: block;
+  max-width: 100%;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Make sure textAreas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 3rem;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}

package/src/_theme.scss

@@ -0,0 +1,99 @@
+.theme-eva {
+  // brand - oklch(81.16% 0.1924 75.18);
+
+  --brand-lightness: 80%;
+  --brand-chroma: 0.1924;
+  --brand-hue: 169;
+
+  --accent-lightness: 80%;
+  --accent-chroma: 0.1924;
+  --accent-hue: 10;
+
+  --extra-lightness: 80%;
+  --extra-chroma: 0.1924;
+  --extra-hue: 200;
+
+
+  --current-lightness: 96.4%; 
+  --current-darkness: 6.4%;  
+
+
+  --dark-lightness: var(--current-darkness);  
+  --dark-chroma: 0.05;      
+  --dark-hue: var(--brand-hue);           
+
+  --light-lightness: var(--current-lightness); 
+  --light-chroma: 0.01;      
+  --light-hue: var(--brand-hue);          
+
+}
+
+.theme-ghost {
+
+  --brand-lightness: 50%;
+  --brand-chroma: 0;
+  --brand-hue: 0.1;
+
+  --accent-lightness: 50%;
+  --accent-chroma: 0;
+  --accent-hue: 0;
+
+  --extra-lightness: 50%;
+  --extra-chroma: 0;
+  --extra-hue: 0;
+
+  --current-lightness: 80%; 
+  --current-darkness: 20%;  
+
+
+  --dark-lightness: var(--current-darkness);  
+  --dark-chroma: 0;      
+  --dark-hue: var(--brand-hue);           
+
+  --light-lightness: var(--current-lightness); 
+  --light-chroma: 0;      
+  --light-hue: var(--brand-hue);      
+
+
+}
+
+// proxy class for UI elements
+._bg-app {
+  --current-bg-color: var(--bg-color);
+  --current-f-color: var(--bg-color-2);
+}
+
+._shadow {
+  box-shadow: 4px 4px 0px 0px var(--current-sh-color);
+  &_ {
+    box-shadow: 8px 8px 0px 0px var(--current-sh-color);
+  }
+}
+
+// hovers
+
+.hover\:_c-brand:hover {
+  color: var(--brand);
+}
+
+.hover\:_bg-brand__:hover {
+  background: var(--brand__);
+}
+.hover\:_bg-dark___:hover {
+  background: var(--dark___);
+}
+
+[class*="hover\:_bg"] {
+  transition: background-color 0.2s;
+}
+
+// acticve
+
+.active.active\:_bg-brand__ {
+  background: var(--brand__);
+}
+
+
+.active.active\:_c-brand {
+  color: var(--brand);
+}

package/src/_utils.scss

@@ -0,0 +1,114 @@
+
+.pointer{
+  cursor: pointer;
+}
+
+.poa {
+  position: absolute;
+  &.center {
+    left: 50%;
+    top: 50%;
+    translate: -50% -50%;
+  }
+}
+.por {
+  position: relative;
+}
+.pof {
+  position: fixed;
+}
+
+.pos {
+  position: sticky;
+  top: 101px;
+}
+
+.ar-1 {
+  aspect-ratio: 1/1;
+}
+
+.tac {
+  text-align: center;
+}
+
+.circle {
+  border-radius: 100%;
+}
+
+pre {
+  white-space: pre-line !important;
+}
+
+.mt-auto{
+  margin-top: auto;
+}
+
+.mb-auto{
+  margin-bottom: auto;
+}
+
+.mr-auto{
+  margin-right: auto;
+}
+
+.ml-auto{
+  margin-left: auto;
+}
+
+.border {
+  border-style: solid;
+  &.thin {
+    border-width: 1px;
+  }
+}
+
+.oh {
+  overflow: hidden;
+}
+
+.lt {
+  letter-spacing: 0.1em;
+}
+
+.lh-0 {
+  line-height: 0;
+}
+
+.lh-1 {
+  line-height: 1;
+}
+
+img {
+  object-fit: cover;
+}
+
+.ttu {
+  text-transform: uppercase;
+}
+
+.hide {
+  display: none !important;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.blur {
+  filter: blur(1rem);
+  &_ {
+    filter: blur(2rem);
+    &_ {
+      filter: blur(3rem);
+    }
+  }
+}
+
+.w-full{
+  width: 100%;
+}
+
+
+.h-full{
+  height: 100%;
+}

package/src/index.scss

@@ -0,0 +1,60 @@
+// ===========================================
+// EVA CSS FRAMEWORK - Main Entry Point
+// ===========================================
+// Fluid design framework with OKLCH colors
+// Transform static designs into responsive fluid systems
+// ===========================================
+
+// Configuration variables with default values
+// These can be overridden using @use with custom values
+$sizes: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 !default;
+$font-sizes: 12, 14, 16, 18, 20, 24, 32, 48 !default;
+$build-class: true !default;
+$px-rem-suffix: false !default;
+$name-by-size: true !default;
+$custom-class: false !default;
+
+// ===========================================
+// CORE FRAMEWORK MODULES
+// ===========================================
+
+// Import and configure all modules
+
+// Core fluid scaling system and variable generation
+@use '_eva' with (
+  $sizes: $sizes,
+  $font-sizes: $font-sizes,
+  $build-class: $build-class,
+  $px-rem-suffix: $px-rem-suffix,
+  $name-by-size: $name-by-size,
+  $custom-class: $custom-class
+);
+
+// OKLCH color system with opacity/brightness modifiers
+@use '_colors';
+
+// Modern gradient system with Emmet-style syntax
+@use '_gradients';
+
+// Theme switching and dark/light mode
+@use '_theme';
+
+// CSS reset and base styles
+@use '_reset';
+
+// Typography and font utilities
+@use '_font';
+
+// Flexbox utilities
+@use '_flex';
+
+// Grid utilities with configuration
+@use '_grid' with (
+  $sizes: $sizes
+);
+
+// Component utilities
+// @use '_components';
+
+// General utility classes
+@use '_utils';