@raintonic/formaui 0.4.0 → 0.9.0

package/styles/partials/_utilities.scss

@@ -1,4 +1,7 @@
 // Utility classes
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
 @use './constants' as *;
 @use './mixins' as *;
 
@@ -34,42 +37,19 @@
   display: inline-flex !important;
 }
 
-// Responsive display utilities
-@each $breakpoint in (sm, md, lg, xl, xxl) {
-  @include fui-breakpoint($breakpoint) {
-    .fui-#{$breakpoint}-hidden {
-      display: none !important;
-    }
-    .fui-#{$breakpoint}-inline {
-      display: inline !important;
-    }
-    .fui-#{$breakpoint}-inline-block {
-      display: inline-block !important;
-    }
-    .fui-#{$breakpoint}-block {
-      display: block !important;
-    }
-    .fui-#{$breakpoint}-grid {
-      display: grid !important;
-    }
-    .fui-#{$breakpoint}-table {
-      display: table !important;
-    }
-    .fui-#{$breakpoint}-table-row {
-      display: table-row !important;
-    }
-    .fui-#{$breakpoint}-table-cell {
-      display: table-cell !important;
-    }
-    .fui-#{$breakpoint}-flex {
-      display: flex !important;
-    }
-    .fui-#{$breakpoint}-inline-flex {
-      display: inline-flex !important;
-    }
+// Grid columns (CSS Grid)
+@for $i from 1 through 12 {
+  .fui-grid-cols-#{$i} {
+    grid-template-columns: repeat(#{$i}, minmax(0, 1fr)) !important;
   }
 }
 
+// Stack — colonna flex (gap via fui-gap-N)
+.fui-stack {
+  display: flex !important;
+  flex-direction: column !important;
+}
+
 // Flex utilities
 .fui-flex-row {
   flex-direction: row !important;
@@ -185,19 +165,20 @@
 
 // Spacing utilities
 $spacers: (
-  0: 0,
-  1: $fui-spacing-01,
-  2: $fui-spacing-02,
-  3: $fui-spacing-03,
-  4: $fui-spacing-04,
-  5: $fui-spacing-05,
-  6: $fui-spacing-06,
-  7: $fui-spacing-07,
-  8: $fui-spacing-08,
-  9: $fui-spacing-09,
+  0: $fui-spacing-0,
+  1: $fui-spacing-1,
+  2: $fui-spacing-2,
+  3: $fui-spacing-3,
+  4: $fui-spacing-4,
+  5: $fui-spacing-5,
+  6: $fui-spacing-6,
+  7: $fui-spacing-7,
+  8: $fui-spacing-8,
+  9: $fui-spacing-9,
   10: $fui-spacing-10,
   11: $fui-spacing-11,
   12: $fui-spacing-12,
+  13: $fui-spacing-13,
   auto: auto,
 );
 
@@ -225,35 +206,6 @@ $spacers: (
   }
 }
 
-// Responsive spacing utilities
-@each $breakpoint in (sm, md, lg, xl, xxl) {
-  @include fui-breakpoint($breakpoint) {
-    @each $prop, $abbrev in (margin: m, padding: p) {
-      @each $size, $length in $spacers {
-        .fui-#{$abbrev}-#{$breakpoint}-#{$size} {
-          #{$prop}: $length !important;
-        }
-        .fui-#{$abbrev}t-#{$breakpoint}-#{$size},
-        .fui-#{$abbrev}y-#{$breakpoint}-#{$size} {
-          #{$prop}-top: $length !important;
-        }
-        .fui-#{$abbrev}r-#{$breakpoint}-#{$size},
-        .fui-#{$abbrev}x-#{$breakpoint}-#{$size} {
-          #{$prop}-right: $length !important;
-        }
-        .fui-#{$abbrev}b-#{$breakpoint}-#{$size},
-        .fui-#{$abbrev}y-#{$breakpoint}-#{$size} {
-          #{$prop}-bottom: $length !important;
-        }
-        .fui-#{$abbrev}l-#{$breakpoint}-#{$size},
-        .fui-#{$abbrev}x-#{$breakpoint}-#{$size} {
-          #{$prop}-left: $length !important;
-        }
-      }
-    }
-  }
-}
-
 // Text alignment
 .fui-text-left {
   text-align: left !important;
@@ -268,25 +220,9 @@ $spacers: (
   text-align: justify !important;
 }
 
-@each $breakpoint in (sm, md, lg, xl, xxl) {
-  @include fui-breakpoint($breakpoint) {
-    .fui-text-#{$breakpoint}-left {
-      text-align: left !important;
-    }
-    .fui-text-#{$breakpoint}-right {
-      text-align: right !important;
-    }
-    .fui-text-#{$breakpoint}-center {
-      text-align: center !important;
-    }
-    .fui-text-#{$breakpoint}-justify {
-      text-align: justify !important;
-    }
-  }
-}
 // Text colors
 .fui-text-color-primary {
-  color: var(--fui-primary) !important;
+  color: var(--fui-brand-fg) !important;
 }
 .fui-text-secondary {
   color: var(--fui-text-secondary) !important;
@@ -332,31 +268,31 @@ $spacers: (
 
 // Border utilities
 .fui-border {
-  border: 1px solid var(--fui-border-color) !important;
+  border: 1px solid var(--fui-border-default) !important;
 }
 .fui-border-0 {
   border: 0 !important;
 }
 .fui-border-t {
-  border-top: 1px solid var(--fui-border-color) !important;
+  border-top: 1px solid var(--fui-border-default) !important;
 }
 .fui-border-t-0 {
   border-top: 0 !important;
 }
 .fui-border-r {
-  border-right: 1px solid var(--fui-border-color) !important;
+  border-right: 1px solid var(--fui-border-default) !important;
 }
 .fui-border-r-0 {
   border-right: 0 !important;
 }
 .fui-border-b {
-  border-bottom: 1px solid var(--fui-border-color) !important;
+  border-bottom: 1px solid var(--fui-border-default) !important;
 }
 .fui-border-b-0 {
   border-bottom: 0 !important;
 }
 .fui-border-l {
-  border-left: 1px solid var(--fui-border-color) !important;
+  border-left: 1px solid var(--fui-border-default) !important;
 }
 .fui-border-l-0 {
   border-left: 0 !important;
@@ -364,19 +300,19 @@ $spacers: (
 
 // Border radius
 .fui-rounded {
-  border-radius: var(--fui-border-radius-md) !important;
+  border-radius: var(--fui-radius-md) !important;
 }
 .fui-rounded-none {
   border-radius: 0 !important;
 }
 .fui-rounded-sm {
-  border-radius: var(--fui-border-radius-sm) !important;
+  border-radius: var(--fui-radius-sm) !important;
 }
 .fui-rounded-md {
-  border-radius: var(--fui-border-radius-md) !important;
+  border-radius: var(--fui-radius-md) !important;
 }
 .fui-rounded-lg {
-  border-radius: var(--fui-border-radius-lg) !important;
+  border-radius: var(--fui-radius-lg) !important;
 }
 .fui-rounded-full {
   border-radius: 50% !important;
@@ -471,6 +407,170 @@ $spacers: (
   flex: 2;
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Responsive utilities — Tailwind-style colon prefix `{bp}:fui-*`
+// Emette per ogni breakpoint configurato le varianti responsive di:
+//   • display      (10 classi)
+//   • spacing m/p  (5 axes × 14 sizes × 2 props)
+//   • text-align   (4 classi)
+//   • grid-cols    (12 classi)
+// Esempio: <div class="md:fui-flex lg:fui-grid-cols-3 md:fui-px-4">
+//
+// Configurabile dal consumer:
+//   @use '@raintonic/formaui/styles/partials/utilities' with (
+//     $breakpoints: (mobile: 480px, tablet: 768px, desktop: 1280px),
+//     $responsive-families: (display: true, spacing: false, text-align: true, grid-cols: true),
+//   );
+//
+// Default: sm|md|lg|xl|2xl + tutte le famiglie attive (parity con stato pre-U3).
+// Nomi di breakpoint con cifra iniziale (es. 2xl) sono escapati via
+// css-ident-escape() in _mixins.scss (Sass emette `.\32 xl\:fui-X`).
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Default breakpoint set. Le soglie sono mirror Sass dei token in
+// tokens/core/layout.json (single source of truth: _constants.scss).
+$breakpoints: (
+  sm: $fui-bp-sm,
+  md: $fui-bp-md,
+  lg: $fui-bp-lg,
+  xl: $fui-bp-xl,
+  '2xl': $fui-bp-2xl,
+) !default;
+
+// Default opt-in per famiglia responsive. Set una a `false` per non emetterla.
+$responsive-families: (
+  display: true,
+  spacing: true,
+  text-align: true,
+  grid-cols: true,
+) !default;
+
+// ── Validation ───────────────────────────────────────────────────────────────
+@if meta.type-of($breakpoints) != 'map' {
+  @error "[FormaUI U3] $breakpoints must be a map (got #{meta.type-of($breakpoints)}).";
+}
+@each $_bp-name, $_bp-value in $breakpoints {
+  @if meta.type-of($_bp-value) != 'number' or math.is-unitless($_bp-value) {
+    @error "[FormaUI U3] $breakpoints['#{$_bp-name}'] must be a length with unit (e.g. 768px). Any CSS length unit is accepted (px/em/rem). Got #{$_bp-value}.";
+  }
+}
+@if meta.type-of($responsive-families) != 'map' {
+  @error "[FormaUI U3] $responsive-families must be a map (got #{meta.type-of($responsive-families)}).";
+}
+
+// Merge col default per permettere override parziale.
+$_families: map.merge(
+  (
+    display: true,
+    spacing: true,
+    text-align: true,
+    grid-cols: true,
+  ),
+  $responsive-families
+);
+
+// ── Sub-mixin per famiglia ────────────────────────────────────────────────────
+@mixin _emit-display($prefix) {
+  .#{$prefix}\:fui-hidden {
+    display: none !important;
+  }
+  .#{$prefix}\:fui-inline {
+    display: inline !important;
+  }
+  .#{$prefix}\:fui-inline-block {
+    display: inline-block !important;
+  }
+  .#{$prefix}\:fui-block {
+    display: block !important;
+  }
+  .#{$prefix}\:fui-grid {
+    display: grid !important;
+  }
+  .#{$prefix}\:fui-table {
+    display: table !important;
+  }
+  .#{$prefix}\:fui-table-row {
+    display: table-row !important;
+  }
+  .#{$prefix}\:fui-table-cell {
+    display: table-cell !important;
+  }
+  .#{$prefix}\:fui-flex {
+    display: flex !important;
+  }
+  .#{$prefix}\:fui-inline-flex {
+    display: inline-flex !important;
+  }
+}
+
+@mixin _emit-spacing-mp($prefix) {
+  @each $prop, $abbrev in (margin: m, padding: p) {
+    @each $size, $length in $spacers {
+      .#{$prefix}\:fui-#{$abbrev}-#{$size} {
+        #{$prop}: $length !important;
+      }
+      .#{$prefix}\:fui-#{$abbrev}t-#{$size},
+      .#{$prefix}\:fui-#{$abbrev}y-#{$size} {
+        #{$prop}-top: $length !important;
+      }
+      .#{$prefix}\:fui-#{$abbrev}r-#{$size},
+      .#{$prefix}\:fui-#{$abbrev}x-#{$size} {
+        #{$prop}-right: $length !important;
+      }
+      .#{$prefix}\:fui-#{$abbrev}b-#{$size},
+      .#{$prefix}\:fui-#{$abbrev}y-#{$size} {
+        #{$prop}-bottom: $length !important;
+      }
+      .#{$prefix}\:fui-#{$abbrev}l-#{$size},
+      .#{$prefix}\:fui-#{$abbrev}x-#{$size} {
+        #{$prop}-left: $length !important;
+      }
+    }
+  }
+}
+
+@mixin _emit-text-align($prefix) {
+  .#{$prefix}\:fui-text-left {
+    text-align: left !important;
+  }
+  .#{$prefix}\:fui-text-right {
+    text-align: right !important;
+  }
+  .#{$prefix}\:fui-text-center {
+    text-align: center !important;
+  }
+  .#{$prefix}\:fui-text-justify {
+    text-align: justify !important;
+  }
+}
+
+@mixin _emit-grid-cols($prefix) {
+  @for $i from 1 through 12 {
+    .#{$prefix}\:fui-grid-cols-#{$i} {
+      grid-template-columns: repeat(#{$i}, minmax(0, 1fr)) !important;
+    }
+  }
+}
+
+// ── Driver unico ──────────────────────────────────────────────────────────────
+@each $bp-name, $bp-value in $breakpoints {
+  $prefix: css-ident-escape($bp-name);
+  @media (min-width: $bp-value) {
+    @if map.get($_families, display) {
+      @include _emit-display($prefix);
+    }
+    @if map.get($_families, spacing) {
+      @include _emit-spacing-mp($prefix);
+    }
+    @if map.get($_families, text-align) {
+      @include _emit-text-align($prefix);
+    }
+    @if map.get($_families, grid-cols) {
+      @include _emit-grid-cols($prefix);
+    }
+  }
+}
+
 // Density utility classes
 .fui-density-comfortable {
   --fui-density-scale: 1;