katanakit-js 6.2.0 → 6.6.1

package/scss/_mixins.scss

@@ -0,0 +1,658 @@
+// ============================================================
+//  _mixins.scss
+//  Layout, breakpoint, grid and flexbox mixins, generic utility
+//  class generators and the @apply registry.
+//  Loading this module also registers the built-in @apply
+//  utilities (top-level register-utility() calls at the bottom).
+// ============================================================
+@use "sass:meta";
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:string";
+@use "variables" as v;
+@use "functions" as f;
+
+// ============================================================
+//  BREAKPOINTS
+//  Media-query helpers. The breakpoint map mirrors the one in
+//  _variables.scss and can be overridden with !default before import.
+// ============================================================
+
+// Min-width values for the breakpoint mixins.
+$breakpoints: (
+  "xs": 0, "sm": 640px, "md": 768px, "lg": 1024px,
+  "xl": 1280px, "2xl": 1536px, "3xl": 1920px
+) !default;
+
+// Private: resolves a breakpoint argument. Numbers pass through
+// (unitless ones gain px); strings must be keys of $breakpoints.
+@function _breakpoint-value($key) {
+  @if meta.type-of($key) == "number" {
+    @return if(sass(math.is-unitless($key)): $key * 1px; else: $key);
+  }
+  @if not map.has-key($breakpoints, $key) {
+    @error "Breakpoint '#{$key}' no encontrado. Disponibles: #{map.keys($breakpoints)}.";
+  }
+  @return map.get($breakpoints, $key);
+}
+
+// Private: builds the media-query string for a direction.
+// up      → min-width
+// down    → max-width (0.02px below the breakpoint to avoid overlap)
+// only    → min + max (exclusive upper bound)
+// between → min + max (inclusive upper bound)
+@function _media-query($direction, $from, $to: null) {
+  @if $direction == "up" { @return "(min-width: #{$from})"; }
+  @if $direction == "down" { $max: calc(#{$from} - 0.02px); @return "(max-width: #{$max})"; }
+  @if $direction == "only" {
+    @if $to == null { @error "only requiere un breakpoint 'to'."; }
+    $max: calc(#{$to} - 0.02px);
+    @return "(min-width: #{$from}) and (max-width: #{$max})";
+  }
+  @if $direction == "between" {
+    @if $to == null { @error "between requiere un breakpoint 'to'."; }
+    @return "(min-width: #{$from}) and (max-width: #{$to})";
+  }
+  @error "Dirección '#{$direction}' no válida. Use: up, down, only, between.";
+}
+
+// Wraps @content in a media query. Direction defaults to "up".
+// Examples:
+//   @include m.breakpoint("md") { … }               // ≥ 768px
+//   @include m.breakpoint("md", "down") { … }       // ≤ 767.98px
+//   @include m.breakpoint("md", "only", "lg") { … } // 768–1023.98px
+@mixin breakpoint($from, $direction: up, $to: null) {
+  $from-val: _breakpoint-value($from);
+  $to-val: if(sass($to != null): _breakpoint-value($to); else: null);
+  @media #{_media-query($direction, $from-val, $to-val)} { @content; }
+}
+
+// Argument-forwarding alias: @include bp("md", "only", "lg") { … }.
+@mixin bp($args...) { @include breakpoint($args...) { @content; } }
+
+// Shorthand mixins for min-width queries, one per breakpoint.
+@mixin xs     { @include breakpoint("xs", up)   { @content; } }
+@mixin sm     { @include breakpoint("sm", up)   { @content; } }
+@mixin md     { @include breakpoint("md", up)   { @content; } }
+@mixin lg     { @include breakpoint("lg", up)   { @content; } }
+@mixin xl     { @include breakpoint("xl", up)   { @content; } }
+@mixin xxl    { @include breakpoint("2xl", up)  { @content; } }
+@mixin xxxl   { @include breakpoint("3xl", up)  { @content; } }
+
+// Shorthand mixins for max-width queries (mobile-first "below" queries).
+@mixin xs-down  { @include breakpoint("xs", down)  { @content; } }
+@mixin sm-down  { @include breakpoint("sm", down)  { @content; } }
+@mixin md-down  { @include breakpoint("md", down)  { @content; } }
+@mixin lg-down  { @include breakpoint("lg", down)  { @content; } }
+@mixin xl-down  { @include breakpoint("xl", down)  { @content; } }
+@mixin x2l-down { @include breakpoint("2xl", down) { @content; } }
+@mixin x3l-down { @include breakpoint("3xl", down) { @content; } }
+// Aliases with friendlier names for the 2xl/3xl down queries.
+@mixin xxl-down { @include x2l-down { @content; } }
+@mixin xxxl-down { @include x3l-down { @content; } }
+
+// Media-feature queries: orientation, motion and pointer preferences
+// plus OS color scheme.
+@mixin portrait       { @media (orientation: portrait)              { @content; } }
+@mixin landscape      { @media (orientation: landscape)             { @content; } }
+@mixin reduced-motion { @media (prefers-reduced-motion: reduce)     { @content; } }
+@mixin hoverable      { @media (hover: hover) and (pointer: fine)   { @content; } }
+@mixin touch          { @media (hover: none) and (pointer: coarse)  { @content; } }
+@mixin dark-mode      { @media (prefers-color-scheme: dark)         { @content; } }
+@mixin light-mode     { @media (prefers-color-scheme: light)        { @content; } }
+
+// ============================================================
+//  GRID
+//  CSS Grid helpers: containers, responsive/auto grids, spans,
+//  placements, areas, subgrid, masonry and stacking.
+// ============================================================
+
+// Defaults used by the grid mixins (gap = 10px → 1rem, 12 columns).
+// Override with !default semantics before import.
+$grid-gap-default: f.rem(10px) !default;
+$grid-columns-default: 12 !default;
+
+// Private: unitless numbers are treated as rem (4 → 4rem); anything
+// with a unit passes through untouched.
+@function _to-rem($value) {
+  @if meta.type-of($value) == "number" and math.is-unitless($value) { @return $value * 1rem; }
+  @return $value;
+}
+
+// Private: validates and rounds a grid-stack() column/row index
+// (must be a unitless number ≥ 1).
+@function _stack-index($value, $name) {
+  @if meta.type-of($value) != "number" { @error "grid-stack(): #{$name} debe ser un número, recibió #{meta.inspect($value)}."; }
+  @if not math.is-unitless($value) { @error "grid-stack(): #{$name} debe ser sin unidad, recibió #{$value}."; }
+  @if $value < 1 { @error "grid-stack(): #{$name} debe ser >= 1, recibió #{$value}."; }
+  @return math.round($value);
+}
+
+// Private: strips a leading dot from a parent selector string.
+@function _stack-parent($parent) {
+  @if meta.type-of($parent) == "string" and string.index($parent, ".") == 1 { @return string.slice($parent, 2); }
+  @return $parent;
+}
+
+// Private: shared start of every grid mixin — display: grid plus an
+// optional gap (unitless → rem). Passes @content through.
+@mixin _grid-base($gap: null) {
+  display: grid;
+  @if $gap != null { gap: _to-rem($gap); }
+  @content;
+}
+
+// Responsive auto-grid: as many columns as fit, each at least
+// $min-size wide (unitless → rem) and at most $max-size.
+// $mode: "fill" (auto-fill, keeps empty tracks) or "fit" (auto-fit,
+// collapses empty tracks).
+@mixin grid-responsive($min-size, $mode: fill, $max-size: 1fr, $gap: null) {
+  $keyword: null;
+  @if $mode == fill { $keyword: "auto-fill"; }
+  @else if $mode == fit { $keyword: "auto-fit"; }
+  @if $keyword == null { @error "grid-responsive(): invalid mode '#{$mode}'. Use 'fill' or 'fit'."; }
+  @include _grid-base($gap) {
+    grid-template-columns: repeat(#{$keyword}, minmax(_to-rem($min-size), #{$max-size}));
+    @content;
+  }
+}
+
+// Convenience wrappers for the two grid-responsive modes.
+@mixin grid-autofill($min-size, $max-size: 1fr, $gap: null) { @include grid-responsive($min-size, fill, $max-size, $gap) { @content; } }
+@mixin grid-autofit($min-size, $max-size: 1fr, $gap: null)  { @include grid-responsive($min-size, fit, $max-size, $gap) { @content; } }
+
+// Fixed-column grid container. Defaults: 12 equal columns, centered
+// items. When $place-items/$place-content are null it falls back to
+// the individual $align-items/$justify-content values.
+@mixin grid-container(
+  $cols: $grid-columns-default, $rows: null, $gap: $grid-gap-default,
+  $place-items: center, $place-content: center, $align-items: null, $justify-content: null
+) {
+  @include _grid-base($gap) {
+    grid-template-columns: repeat($cols, 1fr);
+    grid-template-rows: $rows;
+    @if $place-items != null and $place-content != null {
+      place-items: $place-items; place-content: $place-content;
+    } @else { align-items: $align-items; justify-content: $justify-content; }
+    @content;
+  }
+}
+
+// Grid that centers its items both ways.
+@mixin grid-center($gap: null) { @include _grid-base($gap) { place-items: center; place-content: center; @content; } }
+// Sets gap and also exposes it as a custom property ($var-name) so it
+// can be overridden or read from plain CSS.
+@mixin grid-gap($value: $grid-gap-default, $var-name: --grid-gap) { #{$var-name}: #{_to-rem($value)}; gap: var(#{$var-name}); }
+
+// Makes an item span $cols columns and optionally $rows rows.
+@mixin grid-span($cols: 1, $rows: null) {
+  grid-column: span $cols;
+  @if $rows != null { grid-row: span $rows; }
+}
+
+// Explicit grid placement using line numbers (1-based; -1 = last line).
+// Rows are only emitted when row positions are provided.
+@mixin grid-placement($col-start: 1, $col-end: -1, $row-start: null, $row-end: null) {
+  grid-column: #{$col-start} / #{$col-end};
+  @if $row-start != null and $row-end != null { grid-row: #{$row-start} / #{$row-end}; }
+  @else if $row-start != null { grid-row: $row-start; }
+  @content;
+}
+
+// Named grid areas: pass the ASCII-area string directly.
+@mixin grid-areas($areas, $gap: null) { @include _grid-base($gap) { grid-template-areas: $areas; @content; } }
+// Assigns an item to a named area.
+@mixin grid-area($name) { grid-area: $name; @content; }
+// Centers a single grid item inside its cell.
+@mixin grid-item-center { place-self: center center; }
+
+// Spans the full width of the grid by default (columns 1 to -1),
+// optionally with a row range.
+@mixin grid-item-full($col: "1 / -1", $row: null) {
+  grid-column: #{$col};
+  @if $row != null { grid-row: $row; }
+  @content;
+}
+
+// Responsive column count driven by a map, e.g.
+// ("default": 1, "md": 2, "lg": 4) → 1 column, 2 from md, 4 from lg.
+// Without a "default" key the first entry is used as the base.
+@mixin grid-breakpoint-columns($columns-map, $gap: $grid-gap-default, $align-items: stretch) {
+  @include _grid-base($gap) {
+    align-items: $align-items;
+    $default: map.get($columns-map, "default");
+    @if $default { grid-template-columns: repeat($default, 1fr); }
+    @else { $first: list.nth(map.keys($columns-map), 1); grid-template-columns: repeat(map.get($columns-map, $first), 1fr); }
+    @each $bp, $cols in $columns-map {
+      @if $bp != "default" { @include breakpoint($bp) { grid-template-columns: repeat($cols, 1fr); } }
+    }
+    @content;
+  }
+}
+
+// Makes an item a subgrid of its parent on the given axis
+// ("column", "row" or "both", the default).
+@mixin subgrid($axis: both) {
+  display: grid;
+  @if $axis == column or $axis == both { grid-template-columns: subgrid; }
+  @if $axis == row or $axis == both { grid-template-rows: subgrid; }
+}
+
+// Experimental CSS masonry layout (grid-template-rows: masonry).
+// $axis: "block" (rows flow like masonry) or "inline" (columns).
+@mixin grid-masonry($axis: block, $gap: null) {
+  @include _grid-base($gap) {
+    grid-template-rows: masonry;
+    @if $axis == inline { grid-template-columns: masonry; grid-template-rows: none; }
+    @content;
+  }
+}
+
+// Auto-fill grid where every column is exactly $col-width wide.
+@mixin grid-fixed-columns($col-width, $gap: null) {
+  @include _grid-base($gap) { grid-template-columns: repeat(auto-fill, _to-rem($col-width)); @content; }
+}
+
+// Stacks children on top of each other in the same grid cell
+// ($col/$row — both must be unitless numbers ≥ 1).
+// With $parent (class name, optional leading dot) it emits the parent
+// rule plus one placement rule per $children selector; without
+// $parent it styles the current element (&) and its children.
+// $dp is the display value for the stack container (default "grid").
+@mixin grid-stack($dp: grid, $parent: null, $children: ("*"), $col: 1, $row: 1) {
+  @if $parent != null and meta.type-of($parent) != "string" and meta.type-of($parent) != "number" {
+    @error "grid-stack(): $parent debe ser un string o null, recibió #{meta.inspect($parent)}.";
+  }
+  $col: _stack-index($col, "$col"); $row: _stack-index($row, "$row"); $parent: _stack-parent($parent);
+  @if $parent != null { .#{$parent} { display: #{$dp}; @content; } }
+  @else { display: #{$dp}; @content; }
+  @if $children != null and list.length($children) > 0 {
+    @each $child in $children {
+      @if meta.type-of($child) != "string" and meta.type-of($child) != "number" {
+        @error "grid-stack(): cada child debe ser un string, recibió #{meta.inspect($child)}.";
+      }
+      @if $parent != null { .#{$parent} > #{$child} { @include grid-placement($col, $col + 1, $row, $row + 1); } }
+      @else { & > #{$child} { @include grid-placement($col, $col + 1, $row, $row + 1); } }
+    }
+  }
+}
+
+// Places the current item into a specific stack cell (1-based).
+@mixin grid-stack-item($col: 1, $row: 1) {
+  $col: _stack-index($col, "$col"); $row: _stack-index($row, "$row");
+  @include grid-placement($col, $col + 1, $row, $row + 1);
+}
+
+// ============================================================
+//  FLEXBOX
+//  Flex container and flex item helpers.
+// ============================================================
+
+// Private: shared start of every flex mixin — display: flex plus an
+// optional gap (unitless → rem).
+@mixin _flex-base($gap: null) {
+  display: flex;
+  @if $gap != null { gap: _to-rem($gap); }
+  @content;
+}
+
+// Full-featured flex container. $place-items/$place-content win over
+// the individual $align-items/$justify-content/$align-content when set.
+@mixin flex-container(
+  $direction: row, $wrap: nowrap, $gap: null, $align-items: stretch,
+  $justify-content: flex-start, $align-content: normal, $place-items: null, $place-content: null
+) {
+  @include _flex-base($gap) {
+    flex-direction: $direction; flex-wrap: $wrap;
+    @if $place-items != null { place-items: $place-items; } @else { align-items: $align-items; }
+    @if $place-content != null { place-content: $place-content; } @else { justify-content: $justify-content; align-content: $align-content; }
+    @content;
+  }
+}
+
+// Flex that centers its items both ways.
+@mixin flex-center($gap: null) { @include _flex-base($gap) { place-items: center; place-content: center; @content; } }
+// Sets gap and exposes it as the custom property $var-name.
+@mixin flex-gap($value: 1rem, $var-name: --flex-gap) { #{$var-name}: #{_to-rem($value)}; gap: var(#{$var-name}); }
+// Individual flex-item properties.
+@mixin flex-grow($grow: 1)     { flex-grow: $grow; }
+@mixin flex-shrink($shrink: 1) { flex-shrink: $shrink; }
+@mixin flex-basis($basis: auto) { flex-basis: $basis; }
+// Shorthand for the flex property (grow, shrink, basis).
+@mixin flex-item($grow: 1, $shrink: 1, $basis: auto) { flex: $grow $shrink $basis; }
+// Centers the item on the cross axis.
+@mixin flex-item-center { align-self: center; }
+// Item that fills its row (grow 1, basis 100%).
+@mixin flex-item-full { @include flex-item(1, 1, 100%); @content; }
+
+// ============================================================
+//  GENERIC UTIL HELPERS
+//  Building blocks used to emit utility classes and custom
+//  properties from Sass lists and maps.
+// ============================================================
+
+// Emits a custom property per list item: --prefix-item: item
+// (or --item: item when no prefix is given).
+@mixin vars-list($list, $prefix: null) {
+  @each $value in $list {
+    @if $prefix != null { --#{$prefix}-#{$value}: #{$value}; } @else { --#{$value}: #{$value}; }
+  }
+}
+
+// Same as vars-list() but for maps: --prefix-key: value.
+@mixin vars-map($map, $prefix: null) {
+  @each $key, $value in $map {
+    @if $prefix != null { --#{$prefix}-#{$key}: #{$value}; } @else { --#{$key}: #{$value}; }
+  }
+}
+
+// Centers an element with position + translate(-50%, -50%).
+// $pos can be "absolute" (default) or "fixed".
+@mixin absolute-center($pos: absolute, $y: 50%, $x: 50%) {
+  position: #{$pos}; top: #{$y}; left: #{$x}; transform: translate(-50%, -50%); @content;
+}
+
+// Horizontal / vertical auto-margin centering.
+@mixin center-mx($xvalue: auto) { margin-inline: #{$xvalue}; @content; }
+@mixin center-my($yvalue: auto) { margin-block: #{$yvalue}; @content; }
+
+// Emits one utility class per entry. Lists: class = value
+// (.prefix-value { prop: value }). Maps: class = key
+// (.prefix-key { prop: value }). No prefix → bare class names.
+@mixin utils-classes($input, $property, $prefix: null) {
+  @if meta.type-of($input) == "list" {
+    @each $value in $input {
+      @if $prefix != null { .#{$prefix}-#{$value} { #{$property}: #{$value}; } }
+      @else { .#{$value} { #{$property}: #{$value}; } }
+    }
+  } @else if meta.type-of($input) == "map" {
+    @each $key, $value in $input {
+      @if $prefix != null { .#{$prefix}-#{$key} { #{$property}: #{$value}; } }
+      @else { .#{$key} { #{$property}: #{$value}; } }
+    }
+  } @else { @error "utils-classes(): se esperaba lista o mapa, recibió #{meta.type-of($input)}."; }
+}
+
+// Hover variant of utils-classes(): emits .prefix-key:hover rules
+// (or .hover-key:hover when no prefix is given).
+@mixin utils-classes-hover($input, $property, $prefix: null) {
+  @if meta.type-of($input) == "list" {
+    @each $value in $input {
+      @if $prefix != null { .#{$prefix}-#{$value}:hover { #{$property}: #{$value}; } }
+      @else { .hover-#{$value}:hover { #{$property}: #{$value}; } }
+    }
+  } @else if meta.type-of($input) == "map" {
+    @each $key, $value in $input {
+      @if $prefix != null { .#{$prefix}-#{$key}:hover { #{$property}: #{$value}; } }
+      @else { .hover-#{$key}:hover { #{$property}: #{$value}; } }
+    }
+  }
+}
+
+// ============================================================
+//  @APPLY REGISTRY
+//  A lightweight @apply implementation: utilities are registered
+//  at load time and applied inside components via apply().
+// ============================================================
+
+// Global map holding every registered utility: name → (prop: value).
+$_utility-registry: ();
+
+// Registers a utility name with its declaration map so apply() can
+// use it later. Call once per utility (typically at module top level).
+@mixin register-utility($name, $styles) {
+  $_utility-registry: map.merge($_utility-registry, ($name: $styles)) !global;
+}
+
+// Emits the declarations of the given registered utilities inside the
+// current rule. Errors at compile time for unknown names.
+// Example: @include m.apply(flex, items-center, gap-4);
+@mixin apply($utilities...) {
+  @each $util in $utilities {
+    $util-str: "#{$util}";
+    @if not map.has-key($_utility-registry, $util-str) {
+      @error "apply(): utilidad '#{$util}' no registrada. Usa register-utility() primero.";
+    }
+    $styles: map.get($_utility-registry, $util-str);
+    @each $prop, $value in $styles { #{$prop}: #{$value}; }
+  }
+}
+
+// === Built-in registrations (executed when the module loads) ===
+
+// --- Display ---
+@include register-utility("block", (display: block));
+@include register-utility("inline-block", (display: inline-block));
+@include register-utility("inline", (display: inline));
+@include register-utility("flex", (display: flex));
+@include register-utility("inline-flex", (display: inline-flex));
+@include register-utility("grid", (display: grid));
+@include register-utility("hidden", (display: none));
+
+// --- Flexbox ---
+@include register-utility("flex-row", (flex-direction: row));
+@include register-utility("flex-col", (flex-direction: column));
+@include register-utility("flex-wrap", (flex-wrap: wrap));
+@include register-utility("flex-nowrap", (flex-wrap: nowrap));
+@include register-utility("flex-1", (flex: 1 1 0%));
+@include register-utility("flex-auto", (flex: 1 1 auto));
+@include register-utility("flex-none", (flex: none));
+@include register-utility("items-center", (align-items: center));
+@include register-utility("items-start", (align-items: flex-start));
+@include register-utility("items-end", (align-items: flex-end));
+@include register-utility("justify-center", (justify-content: center));
+@include register-utility("justify-between", (justify-content: space-between));
+@include register-utility("justify-around", (justify-content: space-around));
+@include register-utility("justify-evenly", (justify-content: space-evenly));
+
+// --- Grid ---
+@include register-utility("grid-cols-1", (grid-template-columns: repeat(1, 1fr)));
+@include register-utility("grid-cols-2", (grid-template-columns: repeat(2, 1fr)));
+@include register-utility("grid-cols-3", (grid-template-columns: repeat(3, 1fr)));
+@include register-utility("grid-cols-4", (grid-template-columns: repeat(4, 1fr)));
+@include register-utility("grid-cols-6", (grid-template-columns: repeat(6, 1fr)));
+@include register-utility("grid-cols-12", (grid-template-columns: repeat(12, 1fr)));
+@include register-utility("col-span-full", (grid-column: list.slash(1, -1)));
+
+// --- Spacing (from v.$spacing-map — same source of truth as the
+// classes emitted by _utilities.scss) ---
+@each $key, $value in v.$spacing-map {
+  @include register-utility("p-#{$key}", (padding: $value));
+  @include register-utility("px-#{$key}", (padding-left: $value, padding-right: $value));
+  @include register-utility("py-#{$key}", (padding-top: $value, padding-bottom: $value));
+  @include register-utility("pt-#{$key}", (padding-top: $value));
+  @include register-utility("pb-#{$key}", (padding-bottom: $value));
+  @include register-utility("pl-#{$key}", (padding-left: $value));
+  @include register-utility("pr-#{$key}", (padding-right: $value));
+  @include register-utility("m-#{$key}", (margin: $value));
+  @include register-utility("mx-#{$key}", (margin-left: $value, margin-right: $value));
+  @include register-utility("my-#{$key}", (margin-top: $value, margin-bottom: $value));
+  @include register-utility("mt-#{$key}", (margin-top: $value));
+  @include register-utility("mb-#{$key}", (margin-bottom: $value));
+  @include register-utility("ml-#{$key}", (margin-left: $value));
+  @include register-utility("mr-#{$key}", (margin-right: $value));
+  @include register-utility("gap-#{$key}", (gap: $value));
+  @include register-utility("gap-x-#{$key}", (column-gap: $value));
+  @include register-utility("gap-y-#{$key}", (row-gap: $value));
+}
+
+// --- Typography ---
+@include register-utility("text-xs", (font-size: 0.75rem));
+@include register-utility("text-sm", (font-size: 0.875rem));
+@include register-utility("text-base", (font-size: 1rem));
+@include register-utility("text-lg", (font-size: 1.125rem));
+@include register-utility("text-xl", (font-size: 1.25rem));
+@include register-utility("text-2xl", (font-size: 1.5rem));
+@include register-utility("text-3xl", (font-size: 1.875rem));
+@include register-utility("text-4xl", (font-size: 2.25rem));
+@include register-utility("font-thin", (font-weight: 100));
+@include register-utility("font-light", (font-weight: 300));
+@include register-utility("font-normal", (font-weight: 400));
+@include register-utility("font-medium", (font-weight: 500));
+@include register-utility("font-semibold", (font-weight: 600));
+@include register-utility("font-bold", (font-weight: 700));
+@include register-utility("font-extrabold", (font-weight: 800));
+@include register-utility("font-black", (font-weight: 900));
+@include register-utility("text-left", (text-align: left));
+@include register-utility("text-center", (text-align: center));
+@include register-utility("text-right", (text-align: right));
+
+// --- Sizing ---
+@include register-utility("w-full", (width: 100%));
+@include register-utility("w-screen", (width: 100vw));
+@include register-utility("w-auto", (width: auto));
+@include register-utility("h-full", (height: 100%));
+@include register-utility("h-screen", (height: 100vh));
+@include register-utility("h-auto", (height: auto));
+
+// --- Borders ---
+@include register-utility("rounded", (border-radius: 0.25rem));
+@include register-utility("rounded-md", (border-radius: 0.375rem));
+@include register-utility("rounded-lg", (border-radius: 0.5rem));
+@include register-utility("rounded-xl", (border-radius: 0.75rem));
+@include register-utility("rounded-full", (border-radius: 9999px));
+@include register-utility("border", (border-width: 1px, border-style: solid));
+@include register-utility("border-0", (border-width: 0));
+@include register-utility("border-2", (border-width: 2px, border-style: solid));
+@include register-utility("border-4", (border-width: 4px, border-style: solid));
+@include register-utility("border-8", (border-width: 8px, border-style: solid));
+
+// --- Effects ---
+@include register-utility("shadow-sm", (box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)));
+@include register-utility("shadow", (box-shadow: (0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1))));
+@include register-utility("shadow-md", (box-shadow: (0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))));
+@include register-utility("shadow-lg", (box-shadow: (0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))));
+@include register-utility("shadow-xl", (box-shadow: (0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1))));
+@include register-utility("opacity-0", (opacity: 0));
+@include register-utility("opacity-25", (opacity: 0.25));
+@include register-utility("opacity-50", (opacity: 0.5));
+@include register-utility("opacity-75", (opacity: 0.75));
+@include register-utility("opacity-100", (opacity: 1));
+
+// --- Position ---
+@include register-utility("static", (position: static));
+@include register-utility("fixed", (position: fixed));
+@include register-utility("absolute", (position: absolute));
+@include register-utility("relative", (position: relative));
+@include register-utility("sticky", (position: sticky));
+
+// --- Overflow ---
+@include register-utility("overflow-auto", (overflow: auto));
+@include register-utility("overflow-hidden", (overflow: hidden));
+@include register-utility("overflow-visible", (overflow: visible));
+@include register-utility("overflow-scroll", (overflow: scroll));
+
+// --- Colors ---
+@include register-utility("text-white", (color: v.get-color("white")));
+@include register-utility("text-black", (color: v.get-color("black")));
+@include register-utility("bg-white", (background-color: v.get-color("white")));
+@include register-utility("bg-black", (background-color: v.get-color("black")));
+@include register-utility("bg-transparent", (background-color: v.get-color("transparent")));
+
+// --- Transitions ---
+@include register-utility("transition", (transition: all 150ms ease));
+@include register-utility("transition-colors", (transition: (color 150ms ease, background-color 150ms ease, border-color 150ms ease)));
+@include register-utility("transition-opacity", (transition: opacity 150ms ease));
+@include register-utility("transition-transform", (transition: transform 150ms ease));
+
+// --- Map-derived registrations (same maps as _utilities.scss) ---
+
+// Local copies of the design-token maps so the registry stays
+// independent from the variables module. Every map is !default, so
+// it can be overridden before importing this module.
+// Box-shadow scale used for .shadow-*.
+$shadow-map: (
+  "none": none, "sm": 0 1px 2px 0 rgb(0 0 0 / 0.05),
+  "md": (0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)),
+  "lg": (0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)),
+  "xl": (0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)),
+  "2xl": 0 25px 50px -12px rgb(0 0 0 / 0.25), "inner": inset 0 2px 4px 0 rgb(0 0 0 / 0.05)
+) !default;
+
+// Border-radius scale used for .rounded-*.
+$radius-map: (
+  "none": 0, "sm": 0.125rem, "md": 0.375rem, "lg": 0.5rem,
+  "xl": 0.75rem, "2xl": 1rem, "3xl": 1.5rem, "full": 9999px
+) !default;
+
+// Z-index scale used for .z-*.
+$z-layers-map: (
+  "auto": auto, "0": 0, "10": 10, "20": 20, "30": 30, "40": 40, "50": 50,
+  "dropdown": 1000, "sticky": 1020, "fixed": 1030, "modal": 1040, "popover": 1050, "tooltip": 1060
+) !default;
+
+// Transition durations used for .duration-*.
+$transition-duration-map: (
+  "75": 75ms, "100": 100ms, "150": 150ms, "200": 200ms,
+  "300": 300ms, "500": 500ms, "700": 700ms, "1000": 1000ms
+) !default;
+
+// Timing functions used for .ease-*.
+$transition-timing-map: (
+  "linear": linear, "in": cubic-bezier(0.4, 0, 1, 1),
+  "out": cubic-bezier(0, 0, 0.2, 1), "in-out": cubic-bezier(0.4, 0, 0.2, 1)
+) !default;
+
+// Opacity steps used for .opacity-*.
+$opacity-values: (
+  "0": 0, "5": 0.05, "10": 0.1, "20": 0.2, "25": 0.25, "30": 0.3,
+  "40": 0.4, "50": 0.5, "60": 0.6, "70": 0.7, "75": 0.75,
+  "80": 0.8, "90": 0.9, "95": 0.95, "100": 1
+) !default;
+
+// Font weights used for .font-*.
+$font-weight-values: (
+  "thin": 100, "extralight": 200, "light": 300, "normal": 400,
+  "medium": 500, "semibold": 600, "bold": 700, "extrabold": 800, "black": 900
+) !default;
+
+// Text alignments used for .text-*.
+$text-align-values: (left, center, right, justify) !default;
+
+// Display values used for display utilities (bare class names).
+$display-values: (
+  block: block, inline-block: inline-block, inline: inline, flex: flex,
+  inline-flex: inline-flex, grid: grid, inline-grid: inline-grid,
+  table: table, table-row: table-row, table-cell: table-cell,
+  hidden: none, contents: contents
+) !default;
+
+// Position and overflow scales for .static/.fixed/… and .overflow-*.
+$position-values: (static, fixed, absolute, relative, sticky) !default;
+$overflow-values: (auto, hidden, scroll, visible) !default;
+
+// Flex direction/wrap and alignment maps used by the flex utilities.
+$flex-direction-map: ("row": row, "row-reverse": row-reverse, "col": column, "col-reverse": column-reverse) !default;
+$flex-wrap-list: (wrap, nowrap) !default;
+$align-items-map: ("start": flex-start, "center": center, "end": flex-end, "stretch": stretch) !default;
+$justify-content-map: ("start": flex-start, "center": center, "end": flex-end, "between": space-between, "around": space-around, "evenly": space-evenly) !default;
+
+// Whitespace-related scales.
+$white-space-list: (nowrap, pre, normal) !default;
+$overflow-wrap-list: (break-word,) !default;
+
+// Effects: register every entry of the effect maps
+// (.rounded-*, .shadow-*, .z-*, .duration-*, .ease-*, .opacity-*).
+@each $key, $value in $radius-map { @include register-utility("rounded-#{$key}", (border-radius: $value)); }
+@each $key, $value in $shadow-map  { @include register-utility("shadow-#{$key}", (box-shadow: $value)); }
+@each $key, $value in $z-layers-map { @include register-utility("z-#{$key}", (z-index: $value)); }
+@each $key, $value in $transition-duration-map { @include register-utility("duration-#{$key}", (transition-duration: $value)); }
+@each $key, $value in $transition-timing-map  { @include register-utility("ease-#{$key}", (transition-timing-function: $value)); }
+@each $key, $value in $opacity-values { @include register-utility("opacity-#{$key}", (opacity: $value)); }
+
+// Layout: display, position, overflow, text-align, font-weight and
+// whitespace utilities.
+@each $key, $value in $display-values { @include register-utility($key, (display: $value)); }
+@each $value in $position-values { @include register-utility($value, (position: $value)); }
+@each $value in $overflow-values { @include register-utility("overflow-#{$value}", (overflow: $value)); }
+@each $value in $text-align-values { @include register-utility("text-#{$value}", (text-align: $value)); }
+@each $key, $value in $font-weight-values { @include register-utility("font-#{$key}", (font-weight: $value)); }
+@each $value in $white-space-list { @include register-utility("whitespace-#{$value}", (white-space: $value)); }
+@each $value in $overflow-wrap-list { @include register-utility("wrap-#{$value}", (overflow-wrap: $value)); }
+
+// Flexbox: direction, wrap and alignment utilities.
+@each $key, $value in $flex-direction-map { @include register-utility("flex-#{$key}", (flex-direction: $value)); }
+@each $value in $flex-wrap-list { @include register-utility("flex-#{$value}", (flex-wrap: $value)); }
+@each $key, $value in $align-items-map { @include register-utility("items-#{$key}", (align-items: $value)); }
+@each $key, $value in $justify-content-map { @include register-utility("justify-#{$key}", (justify-content: $value)); }