@nuvoui/core 1.1.8 → 1.2.0

package/src/styles/utilities/_shadows.scss

@@ -1,90 +1,93 @@
 // _shadows.scss
-@use 'sass:map';
-@use 'sass:math';
-@use 'sass:string';
-@use './variables' as VAR;
-
-// Shadow Variables
-$shadow-colors: (
-  'default': rgb(0 0 0 / 10%),
-  'dark': rgb(0 0 0 / 20%),
-  'darker': rgb(0 0 0 / 35%),
-  'darkest': rgb(0 0 0 / 50%),
-);
+@use "sass:map";
+@use "sass:math";
+@use "sass:string";
+@use "../abstracts" as VAR;
 
 $shadow-sizes: (
-  'sm': (
-    'x': 0,
-    'y': 1px,
-    'blur': 2px,
-    'spread': 0
+  "sm": (
+    "x": 0,
+    "y": 1px,
+    "blur": 2px,
+    "spread": 0,
+  ),
+  "md": (
+    "x": 0,
+    "y": 4px,
+    "blur": 6px,
+    "spread": -1px,
   ),
-  'md': (
-    'x': 0,
-    'y': 4px,
-    'blur': 6px,
-    'spread': -1px
+  "lg": (
+    "x": 0,
+    "y": 10px,
+    "blur": 15px,
+    "spread": -3px,
   ),
-  'lg': (
-    'x': 0,
-    'y': 10px,
-    'blur': 15px,
-    'spread': -3px
+  "xl": (
+    "x": 0,
+    "y": 20px,
+    "blur": 25px,
+    "spread": -5px,
   ),
-  'xl': (
-    'x': 0,
-    'y': 20px,
-    'blur': 25px,
-    'spread': -5px
+  "hero": (
+    "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,
   ),
-  'monster': (
-    'x': 0,
-    'y': 20px,
-    'blur': 55px,
-    'spread': 20px
-  )
 );
 
-// Shadow Mixins
+/**
+* Generates a CSS shadow string from a given size.
+*
+* @param {String} $size - The shadow size.
+* @param {String} $color - The shadow color.
+* @return {String} - The CSS shadow string.
+*/
+
 @mixin shadow-base($x, $y, $blur, $spread, $color) {
-  transition: box-shadow 0.2s ease-in-out;
   box-shadow: $x $y $blur $spread $color;
 }
 
-@mixin shadow($size: 'md', $color: 'default') {
+/**
+* Generates a CSS shadow string from a given size.
+*
+* @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) {
     @warn "Shadow size '#{$size}' not found in $shadow-sizes map";
-    $size: 'md'; // Fallback to default
+    $size: "md"; // Fallback to default
   }
-  @if not map.has-key($shadow-colors, $color) {
-    @warn "Shadow color '#{$color}' not found in $shadow-colors map";
-    $color: 'default'; // Fallback to default
+  @if not map.has-key(VAR.$shadow-colors, $color) {
+    @warn "Shadow color '#{$color}' not found in VAR.$shadow-colors map";
+    $color: "default"; // Fallback to default
   }
 
   $shadow: map.get($shadow-sizes, $size);
-  $shadow-color: map.get($shadow-colors, $color);
+  $shadow-color: map.get(VAR.$shadow-colors, $color);
   @include shadow-base(
-    map.get($shadow, 'x'),
-    map.get($shadow, 'y'),
-    map.get($shadow, 'blur'),
-    map.get($shadow, 'spread'),
+    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') {
+@mixin shadow-inset($size: "md", $color: "default") {
   $shadow: map.get($shadow-sizes, $size);
-  $shadow-color: map.get($shadow-colors, $color);
-  
-  box-shadow: inset map.get($shadow, 'x') map.get($shadow, 'y') 
-             map.get($shadow, 'blur') map.get($shadow, 'spread') 
-             $shadow-color;
+  $shadow-color: map.get(VAR.$shadow-colors, $color);
+
+  box-shadow: inset map.get($shadow, "x") map.get($shadow, "y") map.get($shadow, "blur") map.get($shadow, "spread")
+    $shadow-color;
 }
 
 // Utility Classes
@@ -96,69 +99,117 @@ $shadow-sizes: (
   .shadow-#{$size} {
     @include shadow($size);
   }
-  
-  .shadow-#{$size}-dark {
-    @include shadow($size, 'dark');
+
+  // Shadow with color variants
+  @each $color-name, $color-value in VAR.$shadow-colors {
+    @if $color-name != "default" {
+      .shadow-#{$size}-#{$color-name} {
+        @include shadow($size, $color-name);
+      }
+    }
   }
-  
+
   .shadow-inset-#{$size} {
     @include shadow-inset($size);
   }
 
+  // Inset shadows with color variants
+  @each $color-name, $color-value in VAR.$shadow-colors {
+    @if $color-name != "default" {
+      .shadow-inset-#{$size}-#{$color-name} {
+        @include shadow-inset($size, $color-name);
+      }
+    }
+  }
 
-  // hover shadows
+  // Hover shadows
   .hover\:shadow-#{$size}:hover {
     @include shadow($size);
   }
-  
-  .hover\:shadow-#{$size}-dark:hover {
-    @include shadow($size, 'dark');
-  }
-  
-  .hover\:shadow-inset-#{$size}:hover {
-    @include shadow-inset($size);
+
+  // Hover shadows with color variants
+  @each $color-name, $color-value in VAR.$shadow-colors {
+    @if $color-name != "default" {
+      .hover\:shadow-#{$size}-#{$color-name}:hover {
+        @include shadow($size, $color-name);
+      }
+    }
   }
-  
 
-  // focus shadows
-  .focus\:shadow-#{$size}:hover {
+  // Focus shadows
+  .focus\:shadow-#{$size}:focus {
     @include shadow($size);
   }
-  
-  .focus\:shadow-#{$size}-dark:hover {
-    @include shadow($size, 'dark');
-  }
-  
-  .focus\:shadow-inset-#{$size}:hover {
-    @include shadow-inset($size);
+
+  // Focus shadows with color variants
+  @each $color-name, $color-value in VAR.$shadow-colors {
+    @if $color-name != "default" {
+      .focus\:shadow-#{$size}-#{$color-name}:focus {
+        @include shadow($size, $color-name);
+      }
+    }
   }
-}
 
-// Active variants
-@each $size, $values in $shadow-sizes {
+  // Active shadows
   .active\:shadow-#{$size}:active {
     @include shadow($size);
   }
+
+  // Active shadows with color variants
+  @each $color-name, $color-value in VAR.$shadow-colors {
+    @if $color-name != "default" {
+      .active\:shadow-#{$size}-#{$color-name}:active {
+        @include shadow($size, $color-name);
+      }
+    }
+  }
 }
 
 // Responsive variants
 @each $breakpoint, $width in VAR.$breakpoints {
   @media (min-width: #{$width}) {
-    // Regular shadows with breakpoints
     @each $size, $values in $shadow-sizes {
+      // Regular shadows with breakpoints
       .shadow-#{$size}\@#{$breakpoint} {
         @include shadow($size);
       }
-      
+
+      // Shadows with color variants at breakpoints
+      @each $color-name, $color-value in VAR.$shadow-colors {
+        @if $color-name != "default" {
+          .shadow-#{$size}-#{$color-name}\@#{$breakpoint} {
+            @include shadow($size, $color-name);
+          }
+        }
+      }
+
       // Hover shadows with breakpoints
       .hover\:shadow-#{$size}\@#{$breakpoint}:hover {
         @include shadow($size);
       }
-      
+
+      // Hover shadows with color variants at breakpoints
+      @each $color-name, $color-value in VAR.$shadow-colors {
+        @if $color-name != "default" {
+          .hover\:shadow-#{$size}-#{$color-name}\@#{$breakpoint}:hover {
+            @include shadow($size, $color-name);
+          }
+        }
+      }
+
       // Focus shadows with breakpoints
       .focus\:shadow-#{$size}\@#{$breakpoint}:focus {
         @include shadow($size);
       }
+
+      // Focus shadows with color variants at breakpoints
+      @each $color-name, $color-value in VAR.$shadow-colors {
+        @if $color-name != "default" {
+          .focus\:shadow-#{$size}-#{$color-name}\@#{$breakpoint}:focus {
+            @include shadow($size, $color-name);
+          }
+        }
+      }
     }
   }
 }
@@ -166,16 +217,17 @@ $shadow-sizes: (
 @for $i from 1 through 5 {
   .elevation-#{$i} {
     @if $i == 1 {
-      @include shadow('sm');
+      @include shadow("sm");
     } @else if $i == 2 {
-      @include shadow('md');
+      @include shadow("md");
     } @else if $i == 3 {
-      @include shadow('lg');
+      @include shadow("lg");
     } @else if $i == 4 {
-      @include shadow('xl');
+      @include shadow("xl");
     } @else if $i == 5 {
-      @include shadow('monster');
+      @include shadow("monster");
     }
+
     z-index: $i;
   }
-}
+}

package/src/styles/utilities/_sizing.scss

@@ -1,35 +1,36 @@
 // _spacing.scss
   
 @use 'sass:math';
-@use './variables' as VAR;
+@use 'sass:string' as str;
+@use '../abstracts'  as VAR;
 @use './container-queries' as Q;
-@use './media-queries' as MC;
+@use './media-queries' as MQ;
 
-@mixin width($value) { width: $value; }
-@mixin height($value) { height: $value; }
+@mixin width($value) { & { width: $value; } }
+@mixin height($value) { & { height: $value; } }
 @mixin min-width($value) { min-width: $value; }
 @mixin min-height($value) { min-height: $value; }
 @mixin max-width($value) { max-width: $value; }
 @mixin max-height($value) { max-height: $value; }
 
-@mixin width-percent($i) { width: $i + '%'; }
-@mixin height-percent($i) { height: $i + '%';  }
-@mixin min-width-percent($i) { min-width: $i + '%'; }
-@mixin min-height-percent($i) { min-height: $i + '%';  }
-@mixin max-width-percent($i) { max-width: $i + '%'; }
-@mixin max-height-percent($i) { max-height: $i + '%';  }
+@mixin width-percent($i) { & { width: str.unquote($i + '%'); } }
+@mixin height-percent($i) { & { height: str.unquote($i + '%'); } }
+@mixin min-width-percent($i) { & { min-width: str.unquote($i + '%'); } }
+@mixin min-height-percent($i) { & { min-height: str.unquote($i + '%'); } }
+@mixin max-width-percent($i) { & { max-width: str.unquote($i + '%'); } }
+@mixin max-height-percent($i) { & { max-height: str.unquote($i + '%'); } }
 
-@mixin w-auto { width: auto; }
-@mixin w-full { width: 100%; }
-@mixin h-auto { height: auto; }
-@mixin h-full { height: 100%; }
-@mixin min-w-full { min-width: 100%; }
-@mixin max-w-full { max-width: 100%; }
-@mixin min-h-full { min-height: 100%; }
-@mixin max-h-full { max-height: 100%; }
+@mixin w-auto { & { width: auto; } }
+@mixin w-full { & { width: 100%; } }
+@mixin h-auto { & { height: auto; } }
+@mixin h-full { & { height: 100%; } }
+@mixin min-w-full { & { min-width: 100%; } }
+@mixin max-w-full { & { max-width: 100%; } }
+@mixin min-h-full { & { min-height: 100%; } }
+@mixin max-h-full { & { max-height: 100%; } }
 
-@mixin w-screen { width: 100vw; }
-@mixin h-screen { height: 100dvh; }
+@mixin w-screen { & { width: 100vw; } }
+@mixin h-screen { & { height: 100dvh; } }
 
 .w-screen { @include w-screen; }
 .h-screen { @include h-screen; }
@@ -72,7 +73,7 @@
     .min-w-#{$breakpoint} { @include min-width($width); }
     .max-w-#{$breakpoint} { @include max-width($width); }
 
-    @include MC.media-up ($breakpoint) {
+    @include MQ.media-up ($breakpoint) {
         // Generate utilities from spacing map
         @each $i in VAR.$percentages {
             .w-#{$i}p\@#{$breakpoint} { @include width-percent($i); }

package/src/styles/utilities/_spacing.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 @use 'sass:string';
 @use 'sass:meta';
-@use './variables' as *; 
+@use '../abstracts'  as *; 
 
  
 /**
@@ -73,9 +73,9 @@
  * @see flex, grid, display
  */
 
-//-----------------------------------------------
+// -----------------------------------------------
 // HELPER FUNCTIONS
-//-----------------------------------------------
+// -----------------------------------------------
 
 /**
  * @function format-unit-value
@@ -108,16 +108,16 @@
 }
 
 
-//-----------------------------------------------
+// -----------------------------------------------
 // PADDING MIXINS
-//-----------------------------------------------
+// -----------------------------------------------
 
 /**
  * @mixin p
  * @description Sets padding on all sides
  * @param {Number|String} $val - Padding value
  */
-@mixin p($val) { padding: format-unit-value($val); }
+@mixin p($val) { & { padding: format-unit-value($val); }}
 
 /**
 * @mixin px
@@ -126,6 +126,7 @@
 */
 @mixin px($val) { 
   $val: format-unit-value($val); 
+  
   padding-left: $val; 
   padding-right: $val; 
 }
@@ -137,6 +138,7 @@
 */
 @mixin py($val) { 
   $val: format-unit-value($val); 
+  
   padding-top: $val; 
   padding-bottom: $val; 
 }
@@ -169,9 +171,9 @@
 */
 @mixin pl($val) { $val: format-unit-value($val); padding-left: $val; }
 
-//-----------------------------------------------
+// -----------------------------------------------
 // MARGIN MIXINS
-//-----------------------------------------------
+// -----------------------------------------------
 
 /**
 * @mixin m
@@ -187,6 +189,7 @@
 */
 @mixin mx($val) { 
   $val: format-unit-value($val); 
+  
   margin-left: $val; 
   margin-right: $val; 
 }
@@ -198,6 +201,7 @@
 */
 @mixin my($val) { 
   $val: format-unit-value($val); 
+
   margin-top: $val; 
   margin-bottom: $val; 
 }
@@ -249,27 +253,39 @@
 @mixin mx-auto { @include ml-auto; @include mr-auto; }
 
 
-//-----------------------------------------------
+// -----------------------------------------------
 // SPACING MIXINS
-//-----------------------------------------------
+// -----------------------------------------------
 
 /**
  * @mixin space-y
  * @description Adds vertical spacing between direct children
  * @param {Number|String} $i - Space amount
  */
- @mixin space-y($i) { & > * + * { $i: format-unit-value($i); margin-top: $i; } } 
+@mixin space-y($i) {
+  & > * + * {
+    $i: format-unit-value($i);
+    
+    margin-top: $i;
+  }
+}
 
  /**
   * @mixin space-x
   * @description Adds horizontal spacing between direct children
   * @param {Number|String} $i - Space amount
   */
- @mixin space-x($i) { & > * + * { $i: format-unit-value($i); margin-left: $i; } } 
+@mixin space-x($i) {
+  & > * + * {
+    $i: format-unit-value($i);
+    
+    margin-left: $i;
+  }
+}
 
-//-----------------------------------------------
+// -----------------------------------------------
 // GAP MIXINS
-//-----------------------------------------------
+// -----------------------------------------------
 
 /**
  * @mixin gap
@@ -292,23 +308,23 @@
   */
  @mixin gap-y($val) { $val: format-unit-value($val); row-gap: $val; }
 
-//-----------------------------------------------
+// -----------------------------------------------
 // AUTO MARGIN UTILITY CLASSES
-//-----------------------------------------------
+// -----------------------------------------------
 
 .mx-auto { @include mx-auto; }
 .ml-auto { @include ml-auto; }
 .mr-auto { @include mr-auto; }
 
-//-----------------------------------------------
+// -----------------------------------------------
 // GAP AUTO CLASS
-//-----------------------------------------------
+// -----------------------------------------------
 
 .gap-auto { gap: auto; }
 
-//-----------------------------------------------
+// -----------------------------------------------
 // SPACING CLASSES
-//-----------------------------------------------
+// -----------------------------------------------
 
 @each $key, $value in $spacings {
     // Padding classes
@@ -340,9 +356,9 @@
 }
 
 
-//-----------------------------------------------
+// -----------------------------------------------
 // RESPONSIVE SPACING CLASSES
-//-----------------------------------------------
+// -----------------------------------------------
 
 @each $breakpoint, $width in $breakpoints {
     @media (min-width: #{$width}) {