@nuvoui/core 1.1.8 → 1.2.1

package/src/styles/utilities/_shadows.scss

@@ -1,181 +1,239 @@
 // _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);
 
-// Utility Classes
-.shadow-none {
-  box-shadow: none !important;
+  box-shadow: inset map.get($shadow, "x") map.get($shadow, "y") map.get($shadow, "blur") map.get($shadow, "spread")
+    $shadow-color;
 }
 
-@each $size, $values in $shadow-sizes {
-  .shadow-#{$size} {
-    @include shadow($size);
-  }
-  
-  .shadow-#{$size}-dark {
-    @include shadow($size, 'dark');
-  }
-  
-  .shadow-inset-#{$size} {
-    @include shadow-inset($size);
+@mixin elevation($i){
+  @if $i == 1 {
+    @include shadow("sm");
+  } @else if $i == 2 {
+    @include shadow("md");
+  } @else if $i == 3 {
+    @include shadow("lg");
+  } @else if $i == 4 {
+    @include shadow("xl");
+  } @else if $i == 5 {
+    @include shadow("monster");
   }
 
+  z-index: $i;
+}
 
-  // 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);
+// Utility Classes
+@if VAR.$generate-utility-classes {
+  .shadow-none {
+    box-shadow: none !important;
   }
-  
 
-  // focus shadows
-  .focus\:shadow-#{$size}:hover {
-    @include shadow($size);
-  }
-  
-  .focus\:shadow-#{$size}-dark:hover {
-    @include shadow($size, 'dark');
-  }
-  
-  .focus\:shadow-inset-#{$size}:hover {
-    @include shadow-inset($size);
-  }
-}
+  @each $size, $values in $shadow-sizes {
+    .shadow-#{$size} {
+      @include shadow($size);
+    }
 
-// Active variants
-@each $size, $values in $shadow-sizes {
-  .active\:shadow-#{$size}:active {
-    @include shadow($size);
-  }
-}
+    // 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\:shadow-#{$size}:hover {
+      @include shadow($size);
+    }
 
-// Responsive variants
-@each $breakpoint, $width in VAR.$breakpoints {
-  @media (min-width: #{$width}) {
-    // Regular shadows with breakpoints
-    @each $size, $values in $shadow-sizes {
-      .shadow-#{$size}\@#{$breakpoint} {
-        @include shadow($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);
+        }
       }
-      
-      // Hover shadows with breakpoints
-      .hover\:shadow-#{$size}\@#{$breakpoint}:hover {
-        @include shadow($size);
+    }
+
+    // Focus shadows
+    .focus\:shadow-#{$size}:focus {
+      @include shadow($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);
+        }
       }
-      
-      // Focus shadows with breakpoints
-      .focus\:shadow-#{$size}\@#{$breakpoint}:focus {
-        @include shadow($size);
+    }
+
+    // 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);
+        }
       }
     }
   }
-}
 
-@for $i from 1 through 5 {
-  .elevation-#{$i} {
-    @if $i == 1 {
-      @include shadow('sm');
-    } @else if $i == 2 {
-      @include shadow('md');
-    } @else if $i == 3 {
-      @include shadow('lg');
-    } @else if $i == 4 {
-      @include shadow('xl');
-    } @else if $i == 5 {
-      @include shadow('monster');
+  // Responsive variants
+  @each $breakpoint, $width in VAR.$breakpoints {
+    @media (min-width: #{$width}) {
+      @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);
+            }
+          }
+        }
+      }
     }
-    z-index: $i;
   }
-}
+
+  @for $i from 1 through 5 {
+    .elevation-#{$i} {
+      @include elevation($i);
+    }
+  }
+}

package/src/styles/utilities/_sizing.scss

@@ -1,95 +1,98 @@
 // _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; }
+@if VAR.$generate-utility-classes {
+    .w-screen { @include w-screen; }
+    .h-screen { @include h-screen; }
 
-// Width utilities need :not(.flex) to avoid conflicts with flex child sizing
-:not(.flex)>.w-auto { @include w-auto; }
-:not(.flex)>.w-full { @include w-full; }
+    // Width utilities need :not(.flex) to avoid conflicts with flex child sizing
+    :not(.flex)>.w-auto { @include w-auto; }
+    :not(.flex)>.w-full { @include w-full; }
 
-.h-auto { @include h-auto; }
-.h-full { @include h-full; }
-.min-w-full { @include min-w-full; }
-.max-w-full { @include max-w-full; }
-.min-h-full { @include min-h-full; }
-.max-h-full { @include max-h-full; }
+    .h-auto { @include h-auto; }
+    .h-full { @include h-full; }
+    .min-w-full { @include min-w-full; }
+    .max-w-full { @include max-w-full; }
+    .min-h-full { @include min-h-full; }
+    .max-h-full { @include max-h-full; }
 
-// Percentage widths
-@each $i in VAR.$percentages {
-    .w-#{$i}p { @include width-percent($i); }
-    .h-#{$i}p { @include height-percent($i); }
-    .min-w-#{$i}p { @include min-width-percent($i); }
-    .min-h-#{$i}p { @include min-height-percent($i); }
-    .max-w-#{$i}p { @include max-width-percent($i); }
-    .max-h-#{$i}p { @include max-height-percent($i); }
-}
+    // Percentage widths
+    @each $i in VAR.$percentages {
+        .w-#{$i}p { @include width-percent($i); }
+        .h-#{$i}p { @include height-percent($i); }
+        .min-w-#{$i}p { @include min-width-percent($i); }
+        .min-h-#{$i}p { @include min-height-percent($i); }
+        .max-w-#{$i}p { @include max-width-percent($i); }
+        .max-h-#{$i}p { @include max-height-percent($i); }
+    }
 
-// Generate utilities from spacing map
-@each $key, $value in VAR.$spacings {
-    .w-#{$key} { @include width($value); }
-    .h-#{$key} { @include height($value); }
-    .min-w-#{$key} { @include min-width($value); }
-    .min-h-#{$key} { @include min-height($value); }
-    .max-w-#{$key} { @include max-width($value); }
-    .max-h-#{$key} { @include max-height($value); }
-}
+    // Generate utilities from spacing map
+    @each $key, $value in VAR.$spacings {
+        .w-#{$key} { @include width($value); }
+        .h-#{$key} { @include height($value); }
+        .min-w-#{$key} { @include min-width($value); }
+        .min-h-#{$key} { @include min-height($value); }
+        .max-w-#{$key} { @include max-width($value); }
+        .max-h-#{$key} { @include max-height($value); }
+    }
 
-// Pixel widths based on spacing scale
-@each $breakpoint, $width in VAR.$breakpoints {
+    // Pixel widths based on spacing scale
+    @each $breakpoint, $width in VAR.$breakpoints {
 
-    .w-#{$breakpoint} { @include width($width); }
-    .min-w-#{$breakpoint} { @include min-width($width); }
-    .max-w-#{$breakpoint} { @include max-width($width); }
+        .w-#{$breakpoint} { @include width($width); }
+        .min-w-#{$breakpoint} { @include min-width($width); }
+        .max-w-#{$breakpoint} { @include max-width($width); }
 
-    @include MC.media-up ($breakpoint) {
-        // Generate utilities from spacing map
-        @each $i in VAR.$percentages {
-            .w-#{$i}p\@#{$breakpoint} { @include width-percent($i); }
-            .h-#{$i}p\@#{$breakpoint} { @include height-percent($i); }
-            .min-w-#{$i}p\@#{$breakpoint} { @include min-width-percent($i); }
-            .min-h-#{$i}p\@#{$breakpoint} { @include min-height-percent($i); }
-            .max-w-#{$i}p\@#{$breakpoint} { @include max-width-percent($i); }
-            .max-h-#{$i}p\@#{$breakpoint} { @include max-height-percent($i); }
-        }
+        @include MQ.media-up ($breakpoint) {
+            // Generate utilities from spacing map
+            @each $i in VAR.$percentages {
+                .w-#{$i}p\@#{$breakpoint} { @include width-percent($i); }
+                .h-#{$i}p\@#{$breakpoint} { @include height-percent($i); }
+                .min-w-#{$i}p\@#{$breakpoint} { @include min-width-percent($i); }
+                .min-h-#{$i}p\@#{$breakpoint} { @include min-height-percent($i); }
+                .max-w-#{$i}p\@#{$breakpoint} { @include max-width-percent($i); }
+                .max-h-#{$i}p\@#{$breakpoint} { @include max-height-percent($i); }
+            }
 
-        @each $key, $value in VAR.$spacings {
-            .w-#{$key}\@#{$breakpoint} { @include width($value); }
-            .h-#{$key}\@#{$breakpoint} { @include height($value); }
-            .min-w-#{$key}\@#{$breakpoint} { @include min-width($value); }
-            .min-h-#{$key}\@#{$breakpoint} { @include min-height($value); }
-            .max-w-#{$key}\@#{$breakpoint} { @include max-width($value); }
-            .max-h-#{$key}\@#{$breakpoint} { @include max-height($value); }
+            @each $key, $value in VAR.$spacings {
+                .w-#{$key}\@#{$breakpoint} { @include width($value); }
+                .h-#{$key}\@#{$breakpoint} { @include height($value); }
+                .min-w-#{$key}\@#{$breakpoint} { @include min-width($value); }
+                .min-h-#{$key}\@#{$breakpoint} { @include min-height($value); }
+                .max-w-#{$key}\@#{$breakpoint} { @include max-width($value); }
+                .max-h-#{$key}\@#{$breakpoint} { @include max-height($value); }
+            }
         }
     }
 }