@nuvoui/core 1.2.1 → 1.2.3

package/src/styles/utilities/_colors.scss

@@ -9,42 +9,42 @@
 
 // Color Validation
 @function is-valid-color($color) {
-    @return meta.type-of($color) == 'color';
+  @return meta.type-of($color) == 'color';
 }
 
 // Scale Generation Function
 @function create-color-scale($color) {
-    $scale: ();
-    $stops: (
-      50: 95%,
-      100: 85%,
-      200: 75%,
-      300: 65%,
-      400: 55%,
-      500: 50%, // Base color
-      600: 45%,
-      700: 35%,
-      800: 25%,
-      900: 15%
-    );
-
-    @each $shade, $lightness in $stops {
-        $adjusted-color: $color;
-        
-        @if $shade < 500 {
-            // Lighter shades: mix with white
-            $mix-percentage: math.div($lightness - 50%, 50%) * 100%;
-            $adjusted-color: color.mix(white, $color, $mix-percentage);
-        } @else if $shade > 500 {
-            // Darker shades: mix with black
-            $mix-percentage: math.div(50% - $lightness, 50%) * 100%;
-            $adjusted-color: color.mix(black, $color, $mix-percentage);
-        }
-        
-        $scale: map.set($scale, $shade, $adjusted-color);
+  $scale: ();
+  $stops: (
+          50: 95%,
+          100: 85%,
+          200: 75%,
+          300: 65%,
+          400: 55%,
+          500: 50%, // Base color
+          600: 45%,
+          700: 35%,
+          800: 25%,
+          900: 15%
+  );
+
+  @each $shade, $lightness in $stops {
+    $adjusted-color: $color;
+
+    @if $shade < 500 {
+      // Lighter shades: mix with white
+      $mix-percentage: math.div($lightness - 50%, 50%) * 100%;
+      $adjusted-color: color.mix(white, $color, $mix-percentage);
+    } @else if $shade > 500 {
+      // Darker shades: mix with black
+      $mix-percentage: math.div(50% - $lightness, 50%) * 100%;
+      $adjusted-color: color.mix(black, $color, $mix-percentage);
     }
-    
-    @return $scale;
+
+    $scale: map.set($scale, $shade, $adjusted-color);
+  }
+
+  @return $scale;
 }
 
 // Luminance calculation for contrast
@@ -52,72 +52,68 @@
   $red: math.div(color.channel($color, "red"), 255);
   $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));
-    
-    @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+
+  $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));
+
+  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
 }
 
 // Find appropriate text color for a background
 @function find-text-color($background) {
-    $luminance: luminance($background);
-    @return if($luminance > 0.55, #000, #fff);
+  $luminance: luminance($background);
+  @return if($luminance > 0.55, #000, #fff);
 }
 
 // Adaptive contrast mixin
 @mixin adaptive-contrast($color) {
-    background-color: $color;
-    color: find-text-color($color);
-    
-    @media (prefers-contrast: more) {
-        $adjusted: if(color.lightness($color) > 50%, 
-            color.adjust($color, $lightness: -10%), 
+  background-color: $color;
+  color: find-text-color($color);
+
+  @media (prefers-contrast: more) {
+    $adjusted: if(color.lightness($color) > 50%,
+            color.adjust($color, $lightness: -10%),
             color.adjust($color, $lightness: 10%));
 
-        background-color: $adjusted;
-        color: find-text-color($adjusted);
-    }
+    background-color: $adjusted;
+    color: find-text-color($adjusted);
+  }
 }
 
 // Generate color scales
 $colors: (
-  'primary': create-color-scale($primary),
-  'secondary': create-color-scale($secondary),
-  'success': create-color-scale($success),
-  'danger': create-color-scale($danger),
-  'warning': create-color-scale($warning),
-  'info': create-color-scale($info)
+        'primary': create-color-scale($primary),
+        'secondary': create-color-scale($secondary),
+        'success': create-color-scale($success),
+        'danger': create-color-scale($danger),
+        'warning': create-color-scale($warning),
+        'info': create-color-scale($info)
 );
 
 // Generate scales for primitives
 $colors-primitives: ();
 
 @each $name, $color in $color-primitives {
-    $colors-primitives: map.set($colors-primitives, $name, create-color-scale($color));
+  $colors-primitives: map.set($colors-primitives, $name, create-color-scale($color));
 }
 
 // todo: documentation
 @mixin bg($color) {
-    & {
-        background-color: $color;
-    }
+  background-color: $color;
 }
 @mixin color($color) {
-    & {
-        color: $color;
-    }
+  color: $color;
 }
 @mixin gradient($direction, $colors...) {
-    background-image: linear-gradient($direction, $colors);
+  background-image: linear-gradient($direction, $colors);
 }
 
 // Filter Mixins
 @mixin backdrop-filter($value) {
-    backdrop-filter: $value;
+  backdrop-filter: $value;
 }
 
 @mixin filter($value) {
-    filter: $value;
-} 
+  filter: $value;
+} 

package/src/styles/utilities/_cursor.scss

@@ -0,0 +1,23 @@
+@use '../abstracts'  as VAR;
+
+@mixin cursor($cursor-value) {
+  cursor: $cursor-value;
+}
+
+@if VAR.$generate-utility-classes {
+  .cursor-auto {@include cursor(auto);}
+  .cursor-pointer { @include cursor(pointer); }
+  .cursor-default { @include cursor(default); }
+  .cursor-move { @include cursor(move); }
+  .cursor-not-allowed { @include cursor(not-allowed); }
+  .cursor-wait { @include cursor(wait); }
+  .cursor-help { @include cursor(help); }
+  .cursor-text { @include cursor(text); }
+  .cursor-cell { @include cursor(cell); }
+  .cursor-crosshair { @include cursor(crosshair); }
+  .cursor-grabbing { @include cursor(grabbing); }
+  .cursor-grab { @include cursor(grab); }
+  .cursor-zoom-in { @include cursor(zoom-in); }
+  .cursor-zoom-out { @include cursor(zoom-out); }
+  .cursor-none { @include cursor(none); }
+}

package/src/styles/utilities/_index.scss

@@ -6,6 +6,7 @@
 @forward "borders";
 @forward "colors";
 @forward "container-queries";
+@forward "cursor";
 @forward "display";
 @forward "helpers";
 @forward "media-queries";

package/src/styles/utilities/_opacity.scss

@@ -2,6 +2,7 @@
 // Module: Opacity
 
 @use "sass:math";
+@use "sass:meta";
 @use "../abstracts" as *;
 
 /**
@@ -68,30 +69,30 @@
  * Opacity values are defined in the $percentages variable
  * Transition timing can be customized via CSS variables
  *
- * @see transitions
+ * @see transitions 
  */
 
 @mixin opacity($value) {
-  opacity: math.div($value, 100);
+  opacity: calc(#{$value} / 100);
 }
 
 @if $generate-utility-classes {
   // Opacity Utilities
   @each $i in $percentages {
     .opacity-#{$i} {
-      @include opacity ($i);
+      @include opacity($i);
     }
     .hover\:opacity-#{$i}:hover {
-      @include opacity ($i);
+      @include opacity($i);
     }
     .focus\:opacity-#{$i}:focus {
-      @include opacity ($i);
+      @include opacity($i);
     }
     .active\:opacity-#{$i}:active {
-      @include opacity ($i);
+      @include opacity($i);
     }
     .group:hover .group-hover\:opacity-#{$i} {
-      @include opacity ($i);
+      @include opacity($i);
     }
   }
 
@@ -100,29 +101,21 @@
     @media (min-width: #{$width}) {
       @each $i in $percentages {
         .opacity-#{$i}\@#{$breakpoint} {
-          @include opacity ($i);
+          @include opacity($i);
         }
         .hover\:opacity-#{$i}\@#{$breakpoint}:hover {
-          @include opacity ($i);
+          @include opacity($i);
         }
         .focus\:opacity-#{$i}\@#{$breakpoint}:focus {
-          @include opacity ($i);
+          @include opacity($i);
         }
         .active\:opacity-#{$i}\@#{$breakpoint}:active {
-          @include opacity ($i);
+          @include opacity($i);
         }
         .group:hover .group-hover\:opacity-#{$i}\@#{$breakpoint} {
-          @include opacity ($i);
+          @include opacity($i);
         }
       }
     }
   }
-
-  // Transition Opacity
-  // TODO move to transitons may be?
-  .transition-opacity {
-    transition-property: opacity;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-}
+}

package/src/styles/utilities/_position.scss

@@ -171,6 +171,31 @@
 
 
 
+ // 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));
+}
+
+// todo: Documentation
+// Fractional and percentage placements
+$position-fractions: (
+  '25p': 25%,
+  '33p': 33.333%,
+  '50p': 50%,
+  '66p': 66.667%,
+  '75p': 75%,
+  "100p": 100%
+);
+
+
+
 // -----------------------------------------------
 // UTILITY CLASSES
 // -----------------------------------------------
@@ -181,6 +206,14 @@
   .absolute { @include absolute; }
   .fixed { @include fixed; }
   .sticky { @include sticky; }
+  .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); }
+  }
 
   // Placement Classes
   @each $key, $value in $spacings {
@@ -202,6 +235,16 @@
       .absolute\@#{$breakpoint} {@include absolute;}
       .fixed\@#{$breakpoint} {@include fixed;}
       .sticky\@#{$breakpoint} {@include sticky;}
+      .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); }
+      }
+
       @each $key, $value in $spacings {
           .top-#{$key}\@#{$breakpoint} {@include top($value);}
           .right-#{$key}\@#{$breakpoint} {@include right($value);}
@@ -210,4 +253,4 @@
       }
     }
   }
-}
+}

package/src/styles/utilities/_sizing.scss

@@ -1,98 +1,97 @@
 // _spacing.scss
-  
+
 @use 'sass:math';
 @use 'sass:string' as str;
 @use '../abstracts'  as VAR;
 @use './container-queries' as Q;
 @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: 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 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; }
 
 @if VAR.$generate-utility-classes {
-    .w-screen { @include w-screen; }
-    .h-screen { @include h-screen; }
+  .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; }
+  .w-auto { @include w-auto; }
+  .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 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); }
-            }
+    @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); }
+      }
     }
-}
+  }
+}