@nuvoui/core 1.5.1 → 1.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",
@@ -76,15 +76,15 @@
     "not dead"
   ],
   "devDependencies": {
-    "cssnano": "^7.0.6",
-    "postcss": "^8.5.3",
+    "cssnano": "^7.1.2",
+    "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
-    "postcss-import": "^16.1.0",
+    "postcss-import": "^16.1.1",
     "postcss-nested": "^7.0.2",
-    "prettier": "^3.5.3",
-    "sass": "^1.85.1",
-    "stylelint": "^16.16.0",
-    "stylelint-config-standard-scss": "^13.1.0"
+    "prettier": "^3.7.4",
+    "sass": "^1.97.0",
+    "stylelint": "^16.26.1",
+    "stylelint-config-standard-scss": "^16.0.0"
   },
   "peerDependencies": {
     "sass": "^1.x"

package/src/styles/base/_base.scss

@@ -195,7 +195,7 @@
         padding: 0 !important;
         margin: -1px !important;
         overflow: hidden !important;
-        clip: rect(0, 0, 0, 0) !important;
+        clip-path: inset(50%) !important;
         white-space: nowrap !important;
         border: 0 !important;
     }

package/src/styles/components/_tooltips.scss

@@ -2,7 +2,7 @@
 @use "../functions/feature-flags" as fn-flags;
 @mixin tooltip-variables {
     // Tooltip core variables
-    --tooltip-bg: rgba(17 17 17 / 90%);
+    --tooltip-bg: rgb(17 17 17 / 90%);
     --tooltip-shadow-color: rgb(0 0 0 / 20%);
     --tooltip-text-color: #fff;
 

package/src/styles/functions/_colors.scss

@@ -83,7 +83,10 @@
     $b: "";
     $a: "";
     $has-alpha: $length == 5 or $length == 9;
-    $component-size: if($length < 6, 1, 2);
+    $component-size: 2;
+    @if $length < 6 {
+        $component-size: 1;
+    }
 
     // Validate and extract color components
     @for $i from 2 through $length {
@@ -255,9 +258,23 @@ $color-cache: (); // to store the generated colors
     $green: math.div(color.channel($color, "green"), 255);
     $blue: math.div(color.channel($color, "blue"), 255);
 
-    $red: if($red <= 0.0393, math.div($red, 12.92), math.pow((math.div($red + 0.055, 1.055)), 2.4));
-    $green: if($green <= 0.0393, math.div($green, 12.92), math.pow((math.div($green + 0.055, 1.055)), 2.4));
-    $blue: if($blue <= 0.0393, math.div($blue, 12.92), math.pow((math.div($blue + 0.055, 1.055)), 2.4));
+    @if $red <= 0.0393 {
+        $red: math.div($red, 12.92);
+    } @else {
+        $red: math.pow(math.div($red + 0.055, 1.055), 2.4);
+    }
+
+    @if $green <= 0.0393 {
+        $green: math.div($green, 12.92);
+    } @else {
+        $green: math.pow(math.div($green + 0.055, 1.055), 2.4);
+    }
+
+    @if $blue <= 0.0393 {
+        $blue: math.div($blue, 12.92);
+    } @else {
+        $blue: math.pow(math.div($blue + 0.055, 1.055), 2.4);
+    }
 
     @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
 }
@@ -274,7 +291,11 @@ $color-cache: (); // to store the generated colors
     @if map.has-key(config-theme.$light-theme, "text-inverted") {
         $light-color: map.get(config-theme.$light-theme, "text-inverted");
     }
-    @return if($luminance > 0.55, $dark-color, $light-color);
+    @if $luminance > 0.55 {
+        @return $dark-color;
+    } @else {
+        @return $light-color;
+    }
 }
 
 @function is-valid-shade($shade) {

package/src/styles/functions/_math.scss

@@ -32,8 +32,12 @@
         "9": 9,
     );
     $number-chars-end: 0;
+    $start-index: 1;
+    @if $minus {
+        $start-index: 2;
+    }
 
-    @for $i from if($minus, 2, 1) through string.length($val) {
+    @for $i from $start-index through string.length($val) {
         $character: string.slice($val, $i, $i);
 
         @if list.index(map.keys($numbers), $character) or $character == "." {
@@ -54,19 +58,31 @@
             // Look for valid unit
             @each $unit in config-constants.$units {
                 @if $rest == $unit {
-                    @return if($minus, -$result, $result) + string.unquote($unit);
+                    @if $minus {
+                        @return (-1 * $result) + string.unquote($unit);
+                    } @else {
+                        @return $result + string.unquote($unit);
+                    }
                 }
             }
 
             // No valid unit - return null for non-numeric strings
-            @if $i == if($minus, 2, 1) {
+            @if $i == $start-index {
                 @return null; // First char is non-numeric
             }
 
             // Otherwise return just the parsed number
-            @return if($minus, -$result, $result);
+            @if $minus {
+                @return -1 * $result;
+            } @else {
+                @return $result;
+            }
         }
     }
 
-    @return if($minus, -$result, $result);
+    @if $minus {
+        @return -1 * $result;
+    } @else {
+        @return $result;
+    }
 }

package/src/styles/layouts/_container.scss

@@ -11,10 +11,8 @@
 }
 
 @mixin container-padding($padding) {
-    & {
-        padding-top: $padding;
-        padding-bottom: $padding;
-    }
+    padding-top: $padding;
+    padding-bottom: $padding;
 }
 
 // Responsive container mixin

package/src/styles/utilities/_animations.scss

@@ -39,12 +39,24 @@ $generated-keyframes: ();
     $iteration: map.get($props, "iteration");
 
     // Handle units
-    $x-unit: if($x, fn-units.safe-unit-name(math.unit($x)), "-");
-    $y-unit: if($y, fn-units.safe-unit-name(math.unit($y)), "-");
+    $x-unit: "-";
+    @if $x {
+        $x-unit: fn-units.safe-unit-name(math.unit($x));
+    }
+    $y-unit: "-";
+    @if $y {
+        $y-unit: fn-units.safe-unit-name(math.unit($y));
+    }
 
     // Clean values (remove units)
-    $clean-x: if($x, fn-units.strip-unit($x), 0);
-    $clean-y: if($y, fn-units.strip-unit($y), 0);
+    $clean-x: 0;
+    @if $x {
+        $clean-x: fn-units.strip-unit($x);
+    }
+    $clean-y: 0;
+    @if $y {
+        $clean-y: fn-units.strip-unit($y);
+    }
 
     $animation-name: anim-bounce-#{$clean-x}#{$x-unit}-#{$clean-y}#{$y-unit};
 

package/src/styles/utilities/_backdrop-filters.scss

@@ -216,7 +216,10 @@ $backdrop-filter-presets: (
 
 // Generate utility classes
 @mixin generate-backdrop-filter-utilities($breakpoint: null) {
-    $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
+    $suffix: "";
+    @if $breakpoint {
+        $suffix: "\\@#{$breakpoint}";
+    }
 
     // Base layer class
     #{config-flags.$parent-selector} .backdrop-layer#{$suffix} {

package/src/styles/utilities/_colors.scss

@@ -18,7 +18,10 @@
     color: color-fn.find-text-color($color);
 
     @media (prefers-contrast: more) {
-        $adjusted: if(color.lightness($color) > 50%, color.adjust($color, $lightness: -10%), color.adjust($color, $lightness: 10%));
+        $adjusted: color.adjust($color, $lightness: 10%);
+        @if color.lightness($color) > 50% {
+            $adjusted: color.adjust($color, $lightness: -10%);
+        }
 
         background-color: $adjusted;
         color: color-fn.find-text-color($adjusted);

package/src/styles/utilities/_typography.scss

@@ -271,7 +271,10 @@
 }
 
 @mixin responsive-config-typo($breakpoint: null) {
-    $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
+    $suffix: "";
+    @if $breakpoint {
+        $suffix: "\\@#{$breakpoint}";
+    }
 
     @each $size, $val in config-typo.$font-sizes {
         #{config-flags.$parent-selector} .text-#{$size}#{$suffix} {

package/src/styles/utilities/_z-index.scss

@@ -66,7 +66,10 @@ $z-index-levels: (
 // Generate z-index utility classes
 // @param {String} $breakpoint - Optional breakpoint name for responsive variants
 @mixin z-index-utilities($breakpoint: null) {
-    $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
+    $suffix: "";
+    @if $breakpoint {
+        $suffix: "\\@#{$breakpoint}";
+    }
 
     // Standard numbered z-index utilities
     @each $key, $value in $z-indexes {