@nuvoui/core 1.2.4 → 1.2.6

package/src/styles/utilities/_colors.scss

@@ -1,31 +1,32 @@
 // _colors.scss - Color functions and scale generation
 @use "sass:math";
-@use 'sass:color';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:list';
+@use "sass:color";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:list";
 
-@use '../abstracts'  as *;
+@use "../abstracts/config" as *;
 
 // 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%
+    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 {
@@ -72,9 +73,7 @@
   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%));
+    $adjusted: if(color.lightness($color) > 50%, color.adjust($color, $lightness: -10%), color.adjust($color, $lightness: 10%));
 
     background-color: $adjusted;
     color: find-text-color($adjusted);
@@ -83,12 +82,12 @@
 
 // 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
@@ -108,12 +107,3 @@ $colors-primitives: ();
 @mixin gradient($direction, $colors...) {
   background-image: linear-gradient($direction, $colors);
 }
-
-// Filter Mixins
-@mixin backdrop-filter($value) {
-  backdrop-filter: $value;
-}
-
-@mixin filter($value) {
-  filter: $value;
-} 

package/src/styles/utilities/_container-queries.scss

@@ -1,8 +1,8 @@
 @use "sass:map";
 @use "sass:meta";
-@use "../abstracts" as *;
+@use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
- 
+
 /**
  * Container Query Mixins
  *
@@ -81,19 +81,19 @@
   container-name: $name;
 }
 
-@if $generate-utility-classes {
+@if VAR.$generate-utility-classes {
   // Utility classes
-  .container-inline-size {
+  #{VAR.$parent-selector} .container-inline-size {
     container-type: inline-size;
   }
 
-  .container-size {
+  #{VAR.$parent-selector} .container-size {
     container-type: size;
   }
 
   @each $name in ("main", "sidebar", "card", "section") {
-    .container-#{$name} {
+    #{VAR.$parent-selector} .container-#{$name} {
       container-name: $name;
     }
   }
-}
+}

package/src/styles/utilities/_cursor.scss

@@ -1,23 +1,16 @@
-@use '../abstracts'  as VAR;
+@use "../abstracts/config" as VAR;
 
 @mixin cursor($cursor-value) {
-  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); }
+  $cursor-values: ("auto", "pointer", "default", "move", "not-allowed", "wait", "help", "text", "cell", "crosshair", "grabbing", "grab", "zoom-in", "zoom-out", "none", "progress", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "context-menu", "all-scroll");
+
+  // Generate classes for each cursor value
+  @each $value in $cursor-values {
+    #{VAR.$parent-selector} .cursor-#{$value} {
+      @include cursor($value);
+    }
+  }
 }

package/src/styles/utilities/_display.scss

@@ -1,8 +1,8 @@
 // Section: Utilities
 // Module: Display
 
-@use '../abstracts'  as *;
-@use '../abstracts/functions' as FN;
+@use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
 /**
  * Display Utilities
@@ -18,122 +18,271 @@
  */
 
 // Display Mixins
- 
+
 /**
  * @description Set display to none.
  */
-@mixin hide { display: none; }
+@mixin hide {
+  display: none;
+}
 
 /**
  * @description Set display to block.
  */
-@mixin block { display: block; }
+@mixin block {
+  display: block;
+}
 
 /**
  * @description Set display to inline.
  */
-@mixin inline { display: inline; }
+@mixin inline {
+  display: inline;
+}
 
 /**
  * @description Set display to inline-block.
  */
-@mixin inline-block { display: inline-block; }
+@mixin inline-block {
+  display: inline-block;
+}
 
 /**
  * @description Set display to initial original state.
  */
-@mixin show { display: revert; }
+@mixin show {
+  display: revert;
+}
 
 /**
  * @description Set display to table.
  */
-@mixin d-tbl { display: table; }
+@mixin d-tbl {
+  display: table;
+}
 
 /**
  * @description Set display to table-row.
  */
-@mixin d-tbl-row { display: table-row; }
+@mixin d-tbl-row {
+  display: table-row;
+}
 
 /**
  * @description Set display to table-cell.
  */
-@mixin d-tbl-cell { display: table-cell; }
-
-
-@mixin visible { visibility: visible; }
-@mixin invisible { visibility: hidden; }
-@mixin collapse { visibility: collapse; }
-@mixin contents { display: contents; }
-
-@mixin overflow-hidden { overflow: hidden; }
-@mixin overflow-visible { overflow: visible; }
-@mixin overflow-scroll { overflow: scroll; }
-@mixin overflow-auto { overflow: auto; }
-@mixin overflow-x-hidden { overflow-x: hidden; }
-@mixin overflow-y-hidden { overflow-y: hidden; }
-@mixin overflow-x-scroll { overflow-x: scroll; }
-@mixin overflow-y-scroll { overflow-y: scroll; }
-@mixin overflow-x-auto { overflow-x: auto; }
-@mixin overflow-y-auto { overflow-y: auto; }
-
-
-@if $generate-utility-classes {
-  // Base Classes 
-  .hide { @include hide; }
-  .show { @include show; }
-  .block { @include block; }
-  .inline { @include inline; }
-  .inline-block { @include inline-block; }
-  .visible { @include visible; }
-  .invisible { @include invisible; }
-  .collapse { @include collapse; }
-  .contents { @include contents; }
-  .overflow-hidden { @include overflow-hidden; }
-  .overflow-visible { @include overflow-visible; }
-  .overflow-scroll { @include overflow-scroll; }
-  .overflow-auto { @include overflow-auto; }
-  .overflow-x-hidden { @include overflow-x-hidden; }
-  .overflow-y-hidden { @include overflow-y-hidden; }
-  .overflow-x-scroll { @include overflow-x-scroll; }
-  .overflow-y-scroll { @include overflow-y-scroll; }
-  .overflow-x-auto { @include overflow-x-auto; }
-  .overflow-y-auto { @include overflow-y-auto; }
-
-
-  .d {
-    &-tbl { @include d-tbl; }
-    &-tbl-row { @include d-tbl-row; }
-    &-tbl-cell { @include d-tbl-cell; }
-  }
-                  
+@mixin d-tbl-cell {
+  display: table-cell;
+}
+
+@mixin visible {
+  visibility: visible;
+}
+@mixin invisible {
+  visibility: hidden;
+}
+@mixin collapse {
+  visibility: collapse;
+}
+@mixin contents {
+  display: contents;
+}
+
+@mixin overflow-hidden {
+  overflow: hidden;
+}
+@mixin overflow-visible {
+  overflow: visible;
+}
+@mixin overflow-scroll {
+  overflow: scroll;
+}
+@mixin overflow-auto {
+  overflow: auto;
+}
+@mixin overflow-x-hidden {
+  overflow-x: hidden;
+}
+@mixin overflow-y-hidden {
+  overflow-y: hidden;
+}
+@mixin overflow-x-scroll {
+  overflow-x: scroll;
+}
+@mixin overflow-y-scroll {
+  overflow-y: scroll;
+}
+@mixin overflow-x-auto {
+  overflow-x: auto;
+}
+@mixin overflow-y-auto {
+  overflow-y: auto;
+}
+
+@if VAR.$generate-utility-classes {
+  // Base Classes
+  #{VAR.$parent-selector} .hide {
+    @include hide;
+  }
+
+  #{VAR.$parent-selector} .show {
+    @include show;
+  }
+
+  #{VAR.$parent-selector} .block {
+    @include block;
+  }
+
+  #{VAR.$parent-selector} .inline {
+    @include inline;
+  }
+
+  #{VAR.$parent-selector} .inline-block {
+    @include inline-block;
+  }
+
+  #{VAR.$parent-selector} .visible {
+    @include visible;
+  }
+
+  #{VAR.$parent-selector} .invisible {
+    @include invisible;
+  }
+
+  #{VAR.$parent-selector} .collapse {
+    @include collapse;
+  }
+
+  #{VAR.$parent-selector} .contents {
+    @include contents;
+  }
+
+  #{VAR.$parent-selector} .overflow-hidden {
+    @include overflow-hidden;
+  }
+
+  #{VAR.$parent-selector} .overflow-visible {
+    @include overflow-visible;
+  }
+
+  #{VAR.$parent-selector} .overflow-scroll {
+    @include overflow-scroll;
+  }
+
+  #{VAR.$parent-selector} .overflow-auto {
+    @include overflow-auto;
+  }
+
+  #{VAR.$parent-selector} .overflow-x-hidden {
+    @include overflow-x-hidden;
+  }
+
+  #{VAR.$parent-selector} .overflow-y-hidden {
+    @include overflow-y-hidden;
+  }
+
+  #{VAR.$parent-selector} .overflow-x-scroll {
+    @include overflow-x-scroll;
+  }
+
+  #{VAR.$parent-selector} .overflow-y-scroll {
+    @include overflow-y-scroll;
+  }
+
+  #{VAR.$parent-selector} .overflow-x-auto {
+    @include overflow-x-auto;
+  }
+
+  #{VAR.$parent-selector} .overflow-y-auto {
+    @include overflow-y-auto;
+  }
+
+  #{VAR.$parent-selector} .d {
+    &-tbl {
+      @include d-tbl;
+    }
+
+    &-tbl-row {
+      @include d-tbl-row;
+    }
+
+    &-tbl-cell {
+      @include d-tbl-cell;
+    }
+  }
+
   // Responsive Variants
-  @each $breakpoint, $width in $breakpoints {
+  @each $breakpoint, $width in VAR.$breakpoints {
     @media (min-width: #{$width}) {
-      .hide\@#{$breakpoint} { @include hide; }
-      .show\@#{$breakpoint} { @include show; }
-      .block\@#{$breakpoint} { @include block; }
-      .inline\@#{$breakpoint} { @include inline; }
-      .inline-block\@#{$breakpoint} { @include inline-block; }
-      .visible\@#{$breakpoint} { @include visible; }
-      .invisible\@#{$breakpoint} { @include invisible; }
-      .collapse\@#{$breakpoint} { @include collapse; }
-      .contents\@#{$breakpoint} { @include contents; }
-      .overflow-hidden\@#{$breakpoint} { @include overflow-hidden; }
-      .overflow-visible\@#{$breakpoint} { @include overflow-visible; }
-      .overflow-scroll\@#{$breakpoint} { @include overflow-scroll; }
-      .overflow-auto\@#{$breakpoint} { @include overflow-auto; }
-      .overflow-x-hidden\@#{$breakpoint} { @include overflow-x-hidden; }
-      .overflow-y-hidden\@#{$breakpoint} { @include overflow-y-hidden; }
-      .overflow-x-scroll\@#{$breakpoint} { @include overflow-x-scroll; }
-      .overflow-y-scroll\@#{$breakpoint} { @include overflow-y-scroll; }
-      .overflow-x-auto\@#{$breakpoint} { @include overflow-x-auto; }
-      .overflow-y-auto\@#{$breakpoint} { @include overflow-y-auto; }
-
-      .d {
-        &-tbl\@#{$breakpoint} { @include d-tbl; }
-        &-tbl-row\@#{$breakpoint} { @include d-tbl-row; }
-        &-tbl-cell\@#{$breakpoint} { @include d-tbl-cell; }
+      #{VAR.$parent-selector} .hide\@#{$breakpoint} {
+        @include hide;
+      }
+      #{VAR.$parent-selector} .show\@#{$breakpoint} {
+        @include show;
+      }
+      #{VAR.$parent-selector} .block\@#{$breakpoint} {
+        @include block;
+      }
+      #{VAR.$parent-selector} .inline\@#{$breakpoint} {
+        @include inline;
+      }
+      #{VAR.$parent-selector} .inline-block\@#{$breakpoint} {
+        @include inline-block;
+      }
+      #{VAR.$parent-selector} .visible\@#{$breakpoint} {
+        @include visible;
+      }
+      #{VAR.$parent-selector} .invisible\@#{$breakpoint} {
+        @include invisible;
+      }
+      #{VAR.$parent-selector} .collapse\@#{$breakpoint} {
+        @include collapse;
+      }
+      #{VAR.$parent-selector} .contents\@#{$breakpoint} {
+        @include contents;
+      }
+      #{VAR.$parent-selector} .overflow-hidden\@#{$breakpoint} {
+        @include overflow-hidden;
+      }
+      #{VAR.$parent-selector} .overflow-visible\@#{$breakpoint} {
+        @include overflow-visible;
+      }
+      #{VAR.$parent-selector} .overflow-scroll\@#{$breakpoint} {
+        @include overflow-scroll;
+      }
+      #{VAR.$parent-selector} .overflow-auto\@#{$breakpoint} {
+        @include overflow-auto;
+      }
+      #{VAR.$parent-selector} .overflow-x-hidden\@#{$breakpoint} {
+        @include overflow-x-hidden;
+      }
+      #{VAR.$parent-selector} .overflow-y-hidden\@#{$breakpoint} {
+        @include overflow-y-hidden;
+      }
+      #{VAR.$parent-selector} .overflow-x-scroll\@#{$breakpoint} {
+        @include overflow-x-scroll;
+      }
+      #{VAR.$parent-selector} .overflow-y-scroll\@#{$breakpoint} {
+        @include overflow-y-scroll;
+      }
+      #{VAR.$parent-selector} .overflow-x-auto\@#{$breakpoint} {
+        @include overflow-x-auto;
+      }
+      #{VAR.$parent-selector} .overflow-y-auto\@#{$breakpoint} {
+        @include overflow-y-auto;
+      }
+
+      #{VAR.$parent-selector} .d {
+        &-tbl\@#{$breakpoint} {
+          @include d-tbl;
+        }
+        &-tbl-row\@#{$breakpoint} {
+          @include d-tbl-row;
+        }
+        &-tbl-cell\@#{$breakpoint} {
+          @include d-tbl-cell;
+        }
       }
     }
   }
-}
+}

package/src/styles/utilities/_helpers.scss

@@ -4,9 +4,9 @@
 @use "sass:list";
 @use "sass:meta";
 
-@use "../abstracts/config" as *;
+@use "../abstracts/config" as VAR;
 
-@if $enable-debuger {
+@if VAR.$enable-debugger {
   .NuvoUI-Debugger-Wrapper {
     color: #fff;
     font-family: Arial, sans-serif;
@@ -46,7 +46,7 @@
     }
 
     .NuvoUI-Debugger-Main {
-      $breakpoint-keys: map.keys($breakpoints);
+      $breakpoint-keys: map.keys(VAR.$breakpoints);
       $total: list.length($breakpoint-keys);
 
       &::before,
@@ -62,7 +62,7 @@
 
       @for $i from 1 through $total {
         $current: list.nth($breakpoint-keys, $i);
-        $current-width: map.get($breakpoints, $current);
+        $current-width: map.get(VAR.$breakpoints, $current);
 
         @if $i == 1 {
           @media (max-width: #{$current-width}) {
@@ -72,7 +72,7 @@
           }
         } @else {
           $prev: list.nth($breakpoint-keys, $i - 1);
-          $prev-width: map.get($breakpoints, $prev);
+          $prev-width: map.get(VAR.$breakpoints, $prev);
 
           @media (min-width: #{$prev-width}) and (max-width: (#{$current-width} - 1)) {
             &::before {

package/src/styles/utilities/_media-queries.scss

@@ -2,9 +2,10 @@
 // Module: Media Queries
 
 @use "sass:map";
+@use "sass:string";
 @use "sass:math";
 @use "sass:meta";
-@use "../abstracts" as *;
+@use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
 /**
@@ -12,25 +13,16 @@
  * @param {string|number} $breakpoint - The breakpoint value.
  * @param {string} $type - The media query type (e.g. 'lg', 'md').
  */
-@mixin media-up($breakpoint) {
-  $blueprint-value: FN.get-breakpoint-value($breakpoint);
-  $unit: math.unit($blueprint-value);
-  @if $unit == '' {
-    $blueprint-value: $blueprint-value * 1px; 
-    $unit: 'px';
-  }
-  
-  @media screen and (min-width: FN.get-breakpoint-value($blueprint-value)) {
+@mixin media-up($breakpoint, $debug: null) {
+  $blueprint-value: FN.fix-units(FN.get-breakpoint-value($breakpoint, $debug));
+  $val: $blueprint-value - 0.01;
+  @media screen and (min-width: #{$val}) {
     @content;
   }
 }
 
 @mixin media-down($breakpoint) {
-  $blueprint-value: FN.get-breakpoint-value($breakpoint);
-  $unit: math.unit($blueprint-value);
-  @if $unit == '' {
-    $blueprint-value: $blueprint-value * 1px; 
-  }
+  $blueprint-value: FN.fix-units(FN.get-breakpoint-value($breakpoint));
   $val: $blueprint-value - 0.01;
   @media screen and (max-width: #{$val}) {
     @content;
@@ -38,14 +30,9 @@
 }
 
 @mixin media-between($lower, $upper) {
-  $lower-val: FN.get-breakpoint-value($lower);
-  $upper-val: FN.get-breakpoint-value($upper);
-  $unit: math.unit($upper-val);
-  @if $unit == '' {
-    $upper-val: $upper-val * 1px; 
-  }
-  $upper-val: $blueprint-value - 0.01;
-
+  $lower-val: FN.fix-units(FN.get-breakpoint-value($lower));
+  $upper-val: FN.fix-units(FN.get-breakpoint-value($upper));
+  $upper-val: $upper-val - 0.01;
   @media screen and (min-width: #{$lower-val}) and (max-width: #{$upper-val}) {
     @content;
   }
@@ -53,10 +40,19 @@
 
 // Only at specific breakpoint
 @mixin media-only($breakpoint) {
-  $min: FN.get-breakpoint-value($breakpoint);
+  @if meta.type-of($breakpoint) == number and math.is-unitless($breakpoint) {
+    @error "media-only() needs a breakpoint value";
+  }
+
+  @if map.has-key(VAR.$breakpoints, $breakpoint) {
+    $min: FN.get-breakpoint-value($breakpoint);
+  } @else {
+    @error "media-only() needs a valid breakpoint value #{$breakpoint} is not in your $breakpoints map";
+  }
+
   $next-breakpoint: null;
 
-  @each $name, $width in $breakpoints {
+  @each $name, $width in VAR.$breakpoints {
     @if $width > $min and (meta.type-of($next-breakpoint) == "null" or $width < $next-breakpoint) {
       $next-breakpoint: $width;
     }
@@ -108,12 +104,13 @@
 // todo: doc
 // User preference takes precedence
 @mixin dark-mode {
-  @if $enable-dark-mode { // todo: documentation as this will fully remove the dark mode by force
+  @if VAR.$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"] & {