@nuvoui/core 1.4.2 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",

package/src/styles/config/_colors.scss

@@ -39,6 +39,16 @@ $color-names-with-basic: list.join($color-names, map.keys($basic-colors));
 // A default color for color generation function `get-color` to return a a default value on using wrong value
 $default-color: currentcolor !default;
 
+// CSS Named Colors Map
+// Purpose: This map contains 159+ CSS named colors for internal use only.
+// These colors are NOT generated as utility classes to prevent CSS bloat.
+// Used by:
+// - Color validation functions (to check if a string is a valid color)
+// - SCSS mixins that accept color names (e.g., @include apply(bg(coral)))
+// - Type detection in the framework
+// Note: Generating utilities for all these colors would create thousands of classes
+// (each color × states × breakpoints), significantly increasing bundle size.
+// If you need specific named colors as utilities, add them to $color-primitives instead.
 $colors-constants: (
     "aliceblue": aliceblue,
     "antiquewhite": antiquewhite,

package/src/styles/config/_shadows.scss

@@ -1,5 +1,5 @@
 // Configuration: Shadows
-// Shadow color definitions
+// Shadow color definitions and shadow size configurations
 
 $shadow-colors: (
     "default": rgb(0 0 0 / 10%),
@@ -7,3 +7,44 @@ $shadow-colors: (
     "darker": rgb(0 0 0 / 35%),
     "darkest": rgb(0 0 0 / 50%),
 ) !default;
+
+// Shadow size definitions
+// Each size contains x, y, blur, and spread values
+$shadow-sizes: (
+    "sm": (
+        "x": 0,
+        "y": 1px,
+        "blur": 2px,
+        "spread": 0,
+    ),
+    "md": (
+        "x": 0,
+        "y": 4px,
+        "blur": 6px,
+        "spread": -1px,
+    ),
+    "lg": (
+        "x": 0,
+        "y": 10px,
+        "blur": 15px,
+        "spread": -3px,
+    ),
+    "xl": (
+        "x": 0,
+        "y": 20px,
+        "blur": 25px,
+        "spread": -5px,
+    ),
+    "hero": (
+        "x": 0,
+        "y": 20px,
+        "blur": 25px,
+        "spread": 5px,
+    ),
+    "monster": (
+        "x": 0,
+        "y": 20px,
+        "blur": 55px,
+        "spread": 20px,
+    ),
+) !default;

package/src/styles/functions/_colors.scss

@@ -174,6 +174,11 @@ $color-cache: (); // to store the generated colors
         @return $default-color;
     }
 
+    // Convert string shade to number if needed
+    @if meta.type-of($shade) == "string" {
+        $shade: fn-math.to-number($shade);
+    }
+
     @if not is-valid-shade($shade) {
         @warn "Invalid shade value: #{$shade}. Valid range is 50 to 900.";
         @return $default-color;
@@ -273,6 +278,11 @@ $color-cache: (); // to store the generated colors
 }
 
 @function is-valid-shade($shade) {
+    // Convert string to number if needed
+    @if meta.type-of($shade) == "string" {
+        $shade: fn-math.to-number($shade);
+    }
+
     @if meta.type-of($shade) == "number" {
         @return $shade >= 50 and $shade <= 900;
     }

package/src/styles/utilities/_position.scss

@@ -78,11 +78,11 @@
     position: absolute;
 }
 
-// @mixin absolute
-// @description Sets position to absolute, removing from normal document flow
+// @mixin fixed
+// @description Sets position to fixed, removing from normal document flow and fixing relative to viewport
 // @example
 // .popup {
-//   @include absolute;
+//   @include fixed;
 //   top: 0;
 //   left: 0;
 // }
@@ -147,10 +147,15 @@
 //  @include left(0);
 // }
 @mixin left($value) {
-    left: $value;
+    left: fn-units.fix-units($value);
 }
 
-// todo: Documentation
+// @mixin absolute-center
+// @description Centers an element absolutely within its positioned parent
+// @example
+// .modal {
+//   @include absolute-center;
+// }
 @mixin absolute-center {
     position: absolute;
     left: 50%;
@@ -162,8 +167,14 @@
     transform: translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
 }
 
-// todo: Documentation
-// Fractional and percentage placements
+// @variable $position-fractions
+// @description Common percentage values for positioning elements
+// @note These values are used to generate position utility classes like .top-25p, .left-50p, etc.
+// @example
+// .sidebar {
+//   @include absolute;
+//   @include top(map.get($position-fractions, "25p")); // top: 25%
+// }
 $position-fractions: (
     "25p": 25%,
     "33p": 33.333%,

package/src/styles/utilities/_shadows.scss

@@ -7,45 +7,7 @@
 @use "../config/shadows" as config-shadow;
 @use "../functions/feature-flags" as fn-flags;
 
-// TODO: SHADOWS WITH COLOR VARIANTS WITH RESPONSIVE
-$shadow-sizes: (
-    "sm": (
-        "x": 0,
-        "y": 1px,
-        "blur": 2px,
-        "spread": 0,
-    ),
-    "md": (
-        "x": 0,
-        "y": 4px,
-        "blur": 6px,
-        "spread": -1px,
-    ),
-    "lg": (
-        "x": 0,
-        "y": 10px,
-        "blur": 15px,
-        "spread": -3px,
-    ),
-    "xl": (
-        "x": 0,
-        "y": 20px,
-        "blur": 25px,
-        "spread": -5px,
-    ),
-    "hero": (
-        "x": 0,
-        "y": 20px,
-        "blur": 25px,
-        "spread": 5px,
-    ),
-    "monster": (
-        "x": 0,
-        "y": 20px,
-        "blur": 55px,
-        "spread": 20px,
-    ),
-);
+// Shadow sizes are now configured in config/_shadows.scss
 
 // Generates a CSS shadow string from a given size.
 // @param {String} $size - The shadow size.
@@ -60,8 +22,8 @@ $shadow-sizes: (
 // @param {String} $size - The shadow size.
 // @param {String} $color - The shadow color.
 @mixin shadow($size: "md", $color: "default") {
-    @if not map.has-key($shadow-sizes, $size) {
-        @error "Shadow size '#{$size}' not found in $shadow-sizes map";
+    @if not map.has-key(config-shadow.$shadow-sizes, $size) {
+        @error "Shadow size '#{$size}' not found in config-shadow.$shadow-sizes map";
         $size: "md"; // Fallback to default
     }
     @if not map.has-key(config-shadow.$shadow-colors, $color) {
@@ -69,13 +31,13 @@ $shadow-sizes: (
         $color: "default"; // Fallback to default
     }
 
-    $shadow: map.get($shadow-sizes, $size);
+    $shadow: map.get(config-shadow.$shadow-sizes, $size);
     $shadow-color: map.get(config-shadow.$shadow-colors, $color);
     @include shadow-base(map.get($shadow, "x"), map.get($shadow, "y"), map.get($shadow, "blur"), map.get($shadow, "spread"), $shadow-color);
 }
 
 @mixin shadow-inset($size: "md", $color: "default") {
-    $shadow: map.get($shadow-sizes, $size);
+    $shadow: map.get(config-shadow.$shadow-sizes, $size);
     $shadow-color: map.get(config-shadow.$shadow-colors, $color);
 
     box-shadow: inset map.get($shadow, "x") map.get($shadow, "y") map.get($shadow, "blur") map.get($shadow, "spread") $shadow-color;
@@ -103,7 +65,7 @@ $shadow-sizes: (
         box-shadow: none !important;
     }
 
-    @each $size, $values in $shadow-sizes {
+    @each $size, $values in config-shadow.$shadow-sizes {
         #{config-flags.$parent-selector} .shadow-#{$size} {
             @include shadow($size);
         }
@@ -176,7 +138,7 @@ $shadow-sizes: (
     // Responsive variants
     @each $breakpoint, $width in config-breakpoint.$breakpoints {
         @media (min-width: #{$width}) {
-            @each $size, $values in $shadow-sizes {
+            @each $size, $values in config-shadow.$shadow-sizes {
                 // Regular shadows with breakpoints
                 #{config-flags.$parent-selector} .shadow-#{$size}\@#{$breakpoint} {
                     @include shadow($size);

package/src/styles/utilities/_spacing.scss

@@ -137,8 +137,6 @@
 // @description Sets vertical margin (top and bottom)
 // @param {Number|String} $val - Margin value
 @mixin my($val) {
-    $val: fn-units.fix-units($val);
-
     margin-block: fn-units.fix-units($val);
 }
 
@@ -146,7 +144,7 @@
 // @description Sets margin-top
 // @param {Number|String} $val - Margin value
 @mixin mt($val) {
-    margin-top: fn-units.fix-units($val, config-flags.$default-unit);
+    margin-top: fn-units.fix-units($val);
 }
 
 // @mixin mr

package/src/styles/utilities/_typography.scss

@@ -268,7 +268,7 @@
 
     @each $size, $val in config-typo.$font-sizes {
         #{config-flags.$parent-selector} .text-#{$size}#{$suffix} {
-            @include text-size($size);
+            @include font-size($size);
         }
     }
 
@@ -446,7 +446,7 @@
         @media (min-width: #{$width}) {
             @each $size, $val in config-typo.$font-sizes {
                 #{config-flags.$parent-selector} .text-#{$size}\@#{$breakpoint} {
-                    @include text-size($size);
+                    @include font-size($size);
                 }
             }
             @include responsive-config-typo($breakpoint);