@nuvoui/core 1.2.5 → 1.2.6

package/src/styles/utilities/_opacity.scss

@@ -3,7 +3,7 @@
 
 @use "sass:math";
 @use "sass:meta";
-@use "../abstracts" as *;
+@use "../abstracts/config" as VAR;
 
 /**
  * @component Opacity
@@ -76,43 +76,27 @@
   opacity: calc(#{$value} / 100);
 }
 
-@if $generate-utility-classes {
+@if VAR.$generate-utility-classes {
   // Opacity Utilities
-  @each $i in $percentages {
-    .opacity-#{$i} {
-      @include opacity($i);
-    }
-    .hover\:opacity-#{$i}:hover {
-      @include opacity($i);
-    }
-    .focus\:opacity-#{$i}:focus {
-      @include opacity($i);
-    }
-    .active\:opacity-#{$i}:active {
-      @include opacity($i);
-    }
-    .group:hover .group-hover\:opacity-#{$i} {
+  @each $i in VAR.$percentages {
+    #{VAR.$parent-selector} .opacity-#{$i},
+    #{VAR.$parent-selector} .hover\:opacity-#{$i}:hover,
+    #{VAR.$parent-selector} .focus\:opacity-#{$i}:focus,
+    #{VAR.$parent-selector} .active\:opacity-#{$i}:active,
+    #{VAR.$parent-selector} .group:hover .group-hover\:opacity-#{$i} {
       @include opacity($i);
     }
   }
 
   // Responsive Variants for Opacity
-  @each $breakpoint, $width in $breakpoints {
+  @each $breakpoint, $width in VAR.$breakpoints {
     @media (min-width: #{$width}) {
-      @each $i in $percentages {
-        .opacity-#{$i}\@#{$breakpoint} {
-          @include opacity($i);
-        }
-        .hover\:opacity-#{$i}\@#{$breakpoint}:hover {
-          @include opacity($i);
-        }
-        .focus\:opacity-#{$i}\@#{$breakpoint}:focus {
-          @include opacity($i);
-        }
-        .active\:opacity-#{$i}\@#{$breakpoint}:active {
-          @include opacity($i);
-        }
-        .group:hover .group-hover\:opacity-#{$i}\@#{$breakpoint} {
+      @each $i in VAR.$percentages {
+        #{VAR.$parent-selector} .opacity-#{$i}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:opacity-#{$i}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .focus\:opacity-#{$i}\@#{$breakpoint}:focus,
+        #{VAR.$parent-selector} .active\:opacity-#{$i}\@#{$breakpoint}:active,
+        #{VAR.$parent-selector} .group:hover .group-hover\:opacity-#{$i}\@#{$breakpoint} {
           @include opacity($i);
         }
       }

package/src/styles/utilities/_position.scss

@@ -1,4 +1,5 @@
-@use '../abstracts'  as *;
+@use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
 /**
  * @component Position
@@ -48,12 +49,10 @@
  * @see z-index, transform
  */
 
-
 // -----------------------------------------------
 // MIXINS
 // -----------------------------------------------
 
- 
 /**
  * @mixin static
  * @description Sets position to static (default document flow)
@@ -104,8 +103,8 @@
  */
 @mixin fixed {
   position: fixed;
-} 
- 
+}
+
 /**
  * @mixin sticky
  * @description Creates a sticky element that remains in view during scrolling
@@ -118,8 +117,7 @@
   position: sticky;
   z-index: 999;
   top: 0;
-} 
-
+}
 
 /**
  * @mixin top
@@ -131,9 +129,11 @@
  *   @include top(1rem);
  * }
  */
- @mixin top($value) {top: $value; }
+@mixin top($value) {
+  top: FN.fix-units($value);
+}
 
- /**
+/**
   * @mixin right
   * @description Sets the right position of an element
   * @param {Number|Length} $value - Position value (in px, rem, etc.)
@@ -143,9 +143,11 @@
   *   @include right(0);
   * }
   */
- @mixin right($value) {right: $value; }
- 
- /**
+@mixin right($value) {
+  right: FN.fix-units($value);
+}
+
+/**
   * @mixin bottom
   * @description Sets the bottom position of an element
   * @param {Number|Length} $value - Position value (in px, rem, etc.)
@@ -155,9 +157,11 @@
   *   @include bottom(0);
   * }
   */
- @mixin bottom($value) {bottom: $value; }
- 
- /**
+@mixin bottom($value) {
+  bottom: FN.fix-units($value);
+}
+
+/**
   * @mixin left
   * @description Sets the left position of an element
   * @param {Number|Length} $value - Position value (in px, rem, etc.)
@@ -167,60 +171,91 @@
   *   @include left(0);
   * }
   */
- @mixin left($value) {left: $value; }
+@mixin left($value) {
+  left: $value;
+}
 
+// todo: Documentation
+@mixin absolute-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
 
+  --translate-x: -50%;
+  --translate-y: -50%;
 
- // todo: Documentation
- @mixin absolute-center {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-   
-    --translate-x: -50%;
-    --translate-y: -50%;
-   
-    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));
+  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
 $position-fractions: (
-  '25p': 25%,
-  '33p': 33.333%,
-  '50p': 50%,
-  '66p': 66.667%,
-  '75p': 75%,
-  "100p": 100%
+  "25p": 25%,
+  "33p": 33.333%,
+  "50p": 50%,
+  "66p": 66.667%,
+  "75p": 75%,
+  "100p": 100%,
 );
 
-
-
 // -----------------------------------------------
 // UTILITY CLASSES
 // -----------------------------------------------
-@if $generate-utility-classes {
+@if VAR.$generate-utility-classes {
   // Position Classes
-  .static { @include static; }
-  .relative { @include relative; }
-  .absolute { @include absolute; }
-  .fixed { @include fixed; }
-  .sticky { @include sticky; }
-  .absolute-center { @include absolute-center; } 
+  #{VAR.$parent-selector} .static {
+    @include static;
+  }
+
+  #{VAR.$parent-selector} .relative {
+    @include relative;
+  }
+
+  #{VAR.$parent-selector} .absolute {
+    @include absolute;
+  }
+
+  #{VAR.$parent-selector} .fixed {
+    @include fixed;
+  }
+
+  #{VAR.$parent-selector} .sticky {
+    @include sticky;
+  }
+
+  #{VAR.$parent-selector} .absolute-center {
+    @include absolute-center;
+  }
 
   @each $key, $value in $position-fractions {
-    .top-#{$key} { @include top($value); }
-    .right-#{$key} { @include right($value); }
-    .bottom-#{$key} { @include bottom($value); }
-    .left-#{$key} { @include left($value); }
+    #{VAR.$parent-selector} .top-#{$key} {
+      @include top($value);
+    }
+    #{VAR.$parent-selector} .right-#{$key} {
+      @include right($value);
+    }
+    #{VAR.$parent-selector} .bottom-#{$key} {
+      @include bottom($value);
+    }
+    #{VAR.$parent-selector} .left-#{$key} {
+      @include left($value);
+    }
   }
 
   // Placement Classes
-  @each $key, $value in $spacings {
-    .top-#{$key} { @include top($value); }
-    .right-#{$key} { @include right($value); }
-    .bottom-#{$key} { @include bottom($value); }
-    .left-#{$key} { @include left($value); }
+  @each $key, $value in VAR.$spacings {
+    #{VAR.$parent-selector} .top-#{$key} {
+      @include top($value);
+    }
+    #{VAR.$parent-selector} .right-#{$key} {
+      @include right($value);
+    }
+    #{VAR.$parent-selector} .bottom-#{$key} {
+      @include bottom($value);
+    }
+    #{VAR.$parent-selector} .left-#{$key} {
+      @include left($value);
+    }
   }
 
   // -----------------------------------------------
@@ -228,28 +263,56 @@ $position-fractions: (
   // -----------------------------------------------
 
   // Responsive Position Classes
-  @each $breakpoint, $width in $breakpoints {
+  @each $breakpoint, $width in VAR.$breakpoints {
     @media (min-width: #{$width}) {
-      .static\@#{$breakpoint} {@include static;}
-      .relative\@#{$breakpoint} {@include relative;}
-      .absolute\@#{$breakpoint} {@include absolute;}
-      .fixed\@#{$breakpoint} {@include fixed;}
-      .sticky\@#{$breakpoint} {@include sticky;}
-      .absolute-center\@#{$breakpoint} { @include absolute-center; }
+      #{VAR.$parent-selector} .static\@#{$breakpoint} {
+        @include static;
+      }
+      #{VAR.$parent-selector} .relative\@#{$breakpoint} {
+        @include relative;
+      }
+      #{VAR.$parent-selector} .absolute\@#{$breakpoint} {
+        @include absolute;
+      }
+      #{VAR.$parent-selector} .fixed\@#{$breakpoint} {
+        @include fixed;
+      }
+      #{VAR.$parent-selector} .sticky\@#{$breakpoint} {
+        @include sticky;
+      }
+      #{VAR.$parent-selector} .absolute-center\@#{$breakpoint} {
+        @include absolute-center;
+      }
 
       // Fractional responsive placements
       @each $key, $value in $position-fractions {
-        .top-#{$key}\@#{$breakpoint} { @include top($value); }
-        .right-#{$key}\@#{$breakpoint} { @include right($value); }
-        .bottom-#{$key}\@#{$breakpoint} { @include bottom($value); }
-        .left-#{$key}\@#{$breakpoint} { @include left($value); }
+        #{VAR.$parent-selector} .top-#{$key}\@#{$breakpoint} {
+          @include top($value);
+        }
+        #{VAR.$parent-selector} .right-#{$key}\@#{$breakpoint} {
+          @include right($value);
+        }
+        #{VAR.$parent-selector} .bottom-#{$key}\@#{$breakpoint} {
+          @include bottom($value);
+        }
+        #{VAR.$parent-selector} .left-#{$key}\@#{$breakpoint} {
+          @include left($value);
+        }
       }
 
-      @each $key, $value in $spacings {
-          .top-#{$key}\@#{$breakpoint} {@include top($value);}
-          .right-#{$key}\@#{$breakpoint} {@include right($value);}
-          .bottom-#{$key}\@#{$breakpoint} {@include bottom($value);}
-          .left-#{$key}\@#{$breakpoint} {@include left($value);}
+      @each $key, $value in VAR.$spacings {
+        #{VAR.$parent-selector} .top-#{$key}\@#{$breakpoint} {
+          @include top($value);
+        }
+        #{VAR.$parent-selector} .right-#{$key}\@#{$breakpoint} {
+          @include right($value);
+        }
+        #{VAR.$parent-selector} .bottom-#{$key}\@#{$breakpoint} {
+          @include bottom($value);
+        }
+        #{VAR.$parent-selector} .left-#{$key}\@#{$breakpoint} {
+          @include left($value);
+        }
       }
     }
   }

package/src/styles/utilities/_shadows.scss

@@ -2,8 +2,9 @@
 @use "sass:map";
 @use "sass:math";
 @use "sass:string";
-@use "../abstracts" as VAR;
+@use "../abstracts/config" as VAR;
 
+// TODO: SHADOWS WITH COLOR VARIANTS WITH RESPONSIVE
 $shadow-sizes: (
   "sm": (
     "x": 0,
@@ -73,24 +74,17 @@ $shadow-sizes: (
 
   $shadow: map.get($shadow-sizes, $size);
   $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"),
-    $shadow-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-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;
+  box-shadow: inset map.get($shadow, "x") map.get($shadow, "y") map.get($shadow, "blur") map.get($shadow, "spread") $shadow-color;
 }
 
-@mixin elevation($i){
+@mixin elevation($i) {
   @if $i == 1 {
     @include shadow("sm");
   } @else if $i == 2 {
@@ -108,74 +102,74 @@ $shadow-sizes: (
 
 // Utility Classes
 @if VAR.$generate-utility-classes {
-  .shadow-none {
+  #{VAR.$parent-selector} .shadow-none {
     box-shadow: none !important;
   }
 
   @each $size, $values in $shadow-sizes {
-    .shadow-#{$size} {
+    #{VAR.$parent-selector} .shadow-#{$size} {
       @include shadow($size);
     }
 
     // Shadow with color variants
     @each $color-name, $color-value in VAR.$shadow-colors {
       @if $color-name != "default" {
-        .shadow-#{$size}-#{$color-name} {
+        #{VAR.$parent-selector} .shadow-#{$size}-#{$color-name} {
           @include shadow($size, $color-name);
         }
       }
     }
 
-    .shadow-inset-#{$size} {
+    #{VAR.$parent-selector} .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} {
+        #{VAR.$parent-selector} .shadow-inset-#{$size}-#{$color-name} {
           @include shadow-inset($size, $color-name);
         }
       }
     }
 
     // Hover shadows
-    .hover\:shadow-#{$size}:hover {
+    #{VAR.$parent-selector} .hover\:shadow-#{$size}:hover {
       @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 {
+        #{VAR.$parent-selector} .hover\:shadow-#{$size}-#{$color-name}:hover {
           @include shadow($size, $color-name);
         }
       }
     }
 
     // Focus shadows
-    .focus\:shadow-#{$size}:focus {
+    #{VAR.$parent-selector} .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 {
+        #{VAR.$parent-selector} .focus\:shadow-#{$size}-#{$color-name}:focus {
           @include shadow($size, $color-name);
         }
       }
     }
 
     // Active shadows
-    .active\:shadow-#{$size}:active {
+    #{VAR.$parent-selector} .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 {
+        #{VAR.$parent-selector} .active\:shadow-#{$size}-#{$color-name}:active {
           @include shadow($size, $color-name);
         }
       }
@@ -187,42 +181,42 @@ $shadow-sizes: (
     @media (min-width: #{$width}) {
       @each $size, $values in $shadow-sizes {
         // Regular shadows with breakpoints
-        .shadow-#{$size}\@#{$breakpoint} {
+        #{VAR.$parent-selector} .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} {
+            #{VAR.$parent-selector} .shadow-#{$size}-#{$color-name}\@#{$breakpoint} {
               @include shadow($size, $color-name);
             }
           }
         }
 
         // Hover shadows with breakpoints
-        .hover\:shadow-#{$size}\@#{$breakpoint}:hover {
+        #{VAR.$parent-selector} .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 {
+            #{VAR.$parent-selector} .hover\:shadow-#{$size}-#{$color-name}\@#{$breakpoint}:hover {
               @include shadow($size, $color-name);
             }
           }
         }
 
         // Focus shadows with breakpoints
-        .focus\:shadow-#{$size}\@#{$breakpoint}:focus {
+        #{VAR.$parent-selector} .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 {
+            #{VAR.$parent-selector} .focus\:shadow-#{$size}-#{$color-name}\@#{$breakpoint}:focus {
               @include shadow($size, $color-name);
             }
           }
@@ -232,7 +226,7 @@ $shadow-sizes: (
   }
 
   @for $i from 1 through 5 {
-    .elevation-#{$i} {
+    #{VAR.$parent-selector} .elevation-#{$i} {
       @include elevation($i);
     }
   }