@nuvoui/core 1.2.2 → 1.2.4

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/_media-queries.scss

@@ -73,6 +73,7 @@
   }
 }
 
+// todo: doc
 // Touch devices
 @mixin touch {
   @media (hover: none) and (pointer: coarse) {
@@ -80,6 +81,7 @@
   }
 }
 
+// todo: doc
 // Print media
 @mixin print {
   @media print {
@@ -87,6 +89,7 @@
   }
 }
 
+// todo: doc
 // Example: @include supports(display: grid) { }
 @mixin supports($property) {
   @supports (#{$property}) {
@@ -94,6 +97,7 @@
   }
 }
 
+// todo: doc
 // System preference only
 @mixin prefers-dark {
   @media (prefers-color-scheme: dark) {
@@ -101,21 +105,25 @@
   }
 }
 
+// todo: doc
 // User preference takes precedence
 @mixin dark-mode {
-  // Apply when user explicitly chooses dark
-  [data-theme="dark"] & {
-    @content;
-  }
-
-  // Apply when system is dark AND user hasn't made a choice
-  @media (prefers-color-scheme: dark) {
-    [data-theme="system"] & {
+  @if $enable-dark-mode { // todo: documentation as this will fully remove the dark mode by force
+    // Apply when user explicitly chooses dark
+    [data-theme="dark"] & {
       @content;
     }
+  
+    // Apply when system is dark AND user hasn't made a choice
+    @media (prefers-color-scheme: dark) {
+      [data-theme="system"] & {
+        @content;
+      }
+    }
   }
 }
 
+// todo: doc
 // Device orientation
 @mixin landscape {
   @media screen and (orientation: landscape) {
@@ -123,17 +131,20 @@
   }
 }
 
+// todo: doc
 @mixin portrait {
   @media screen and (orientation: portrait) {
     @content;
   }
 }
 
+// todo: doc
 // Modern aspect ratio
 @mixin aspect-ratio($ratio) {
   aspect-ratio: #{$ratio};
 }
 
+// todo: doc
 // Dynamic viewport units (modern browsers)
 @mixin dvh {
   @supports (height: 100dvh) {
@@ -145,24 +156,20 @@
   }
 }
 
+// todo: doc
 // Safe area insets (notches, home indicators)
 @mixin safe-area-inset($property, $position) {
   #{$property}: env(safe-area-inset-#{$position});
 }
 
+// todo: doc
 @mixin reduced-motion {
   @media (prefers-reduced-motion: reduce) {
     @content;
   }
 }
 
-// Data-saving mode
-@mixin save-data {
-  @media (prefers-reduced-data: reduce) {
-    @content;
-  }
-}
-
+// todo: doc
 // Mouse precision detection
 @mixin fine-pointer {
   @media (pointer: fine) {
@@ -170,6 +177,7 @@
   }
 }
 
+// todo: doc
 // Display mode for PWAs
 @mixin display-mode($mode: "standalone") {
   @media (display-mode: #{$mode}) {
@@ -177,6 +185,7 @@
   }
 }
 
+// todo: doc
 // High contrast mode
 @mixin high-contrast {
   @media (forced-colors: active) {

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

@@ -173,7 +173,6 @@
 
  // todo: Documentation
  @mixin absolute-center {
-  & {
     position: absolute;
     left: 50%;
     top: 50%;
@@ -182,7 +181,6 @@
     --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
@@ -255,4 +253,4 @@ $position-fractions: (
       }
     }
   }
-}
+}

package/src/styles/utilities/_sizing.scss

@@ -1,98 +1,117 @@
 // _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 { @include width(auto);}
+@mixin w-full { @include width(100%);}
+@mixin h-auto { @include height(auto);}
+@mixin h-full { @include height(100%);}
+@mixin w-max { @include width(max-content);}
+@mixin h-max { @include height(max-content);}
+@mixin w-min { @include width(min-content);}
+@mixin h-min { @include height(min-content);}
+@mixin w-fit { @include width(fit-content);}
+@mixin h-fit { @include height(fit-content);}
+@mixin min-w-full { @include min-width(100%);}
+@mixin max-w-full { @include max-width(100%);}
+@mixin min-h-full { @include min-height(100%);}
+@mixin max-h-full { @include 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; }
+  .w-min { @include w-min;}
+  .h-min { @include h-min;}
+  .w-fit { @include w-fit;}
+  .h-fit { @include h-fit;}
+  
+  .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); }
-            }
+    .w-auto\@#{$breakpoint} { @include w-auto; }
+    .w-full\@#{$breakpoint} { @include w-full; }
+    .h-auto\@#{$breakpoint} { @include h-auto; }
+    .h-full\@#{$breakpoint} { @include h-full; }
+    .w-min\@#{$breakpoint}{ @include w-min;}
+    .h-min\@#{$breakpoint}{ @include h-min;}
+    .w-fit\@#{$breakpoint}{ @include w-fit;}
+    .h-fit\@#{$breakpoint}{ @include h-fit;}
+    
+    @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); }
+      }
     }
-}
+  }
+}