@nuvoui/core 1.1.8 → 1.2.1

package/src/styles/utilities/_helpers.scss

@@ -1,128 +1,130 @@
-@use 'sass:string';
-@use 'sass:math';
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:meta';
-@use 'variables' as *;
+@use "sass:string";
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+
+@use "../abstracts/config" as *;
 
 @if $enable-debuger {
-    .NuvoUI-Debugger-Wrapper {
-        color: #fff;
-        font-family: Arial, sans-serif;
-        position: fixed;
-        z-index: 999999;
-        inset: 10px auto auto 10px;
-        pointer-events: none;
-
-        &.top-left {
-            inset: 10px auto auto 10px;
-            text-align: left;
-        }
+  .NuvoUI-Debugger-Wrapper {
+    color: #fff;
+    font-family: Arial, sans-serif;
+    position: fixed;
+    z-index: 999999;
+    inset: 10px auto auto 10px;
+    pointer-events: none;
+
+    &.top-left {
+      inset: 10px auto auto 10px;
+      text-align: left;
+    }
 
-        &.top-right {
-            inset: 10px 10px auto auto;
-            text-align: right;
-        }
+    &.top-right {
+      inset: 10px 10px auto auto;
+      text-align: right;
+    }
 
-        &.bottom-left {
-            inset: auto auto 10px 10px;
-            text-align: left;
-        }
+    &.bottom-left {
+      inset: auto auto 10px 10px;
+      text-align: left;
+    }
 
-        &.bottom-right {
-            inset: auto 10px 10px auto;
-            text-align: right;
-        }
+    &.bottom-right {
+      inset: auto 10px 10px auto;
+      text-align: right;
+    }
 
-        .NuvoUI-Debugger-Main, .NuvoUI-Debugger{
-            padding: 10px;
-            background-color: rgb(0 0 0 / 80%);
-            border-radius: 5px;
-            border: 1px solid green;
-            box-shadow: 0 0 2px 0 #fff;
-            pointer-events: none;
-        }
+    .NuvoUI-Debugger-Main,
+    .NuvoUI-Debugger {
+      padding: 10px;
+      background-color: rgb(0 0 0 / 80%);
+      border-radius: 5px;
+      border: 1px solid green;
+      box-shadow: 0 0 2px 0 #fff;
+      pointer-events: none;
+    }
 
-        .NuvoUI-Debugger-Main {
-            $breakpoint-keys: map.keys($breakpoints);
-            $total: list.length($breakpoint-keys);
+    .NuvoUI-Debugger-Main {
+      $breakpoint-keys: map.keys($breakpoints);
+      $total: list.length($breakpoint-keys);
 
-            &::before,
-            &::after {
-                font-family: 'Courier New', Courier, monospace;
-                font-size: 0.8em;
-                display: block;
-            }
+      &::before,
+      &::after {
+        font-family: "Courier New", Courier, monospace;
+        font-size: 0.8em;
+        display: block;
+      }
 
-            &::before {
-                font-weight: bold;
-            }
+      &::before {
+        font-weight: bold;
+      }
 
-            @for $i from 1 through $total {
-                $current: list.nth($breakpoint-keys, $i);
-                $current-width: map.get($breakpoints, $current);
-
-                @if $i == 1 {
-                    @media (max-width: #{$current-width}) {
-                        &::before {
-                            content: "Screen: #{$current}";
-                        }
-                    }
-                } @else {
-                    $prev: list.nth($breakpoint-keys, $i - 1);
-                    $prev-width: map.get($breakpoints, $prev);
-
-                    @media (min-width: #{$prev-width}) and (max-width: (#{$current-width} - 1)) {
-                        &::before {
-                            content: "Screen: #{$current}";
-                        }
-                    }
-                }
+      @for $i from 1 through $total {
+        $current: list.nth($breakpoint-keys, $i);
+        $current-width: map.get($breakpoints, $current);
+
+        @if $i == 1 {
+          @media (max-width: #{$current-width}) {
+            &::before {
+              content: "Screen: #{$current}";
             }
+          }
+        } @else {
+          $prev: list.nth($breakpoint-keys, $i - 1);
+          $prev-width: map.get($breakpoints, $prev);
 
-            &::after {
-                content: attr(data-size);
+          @media (min-width: #{$prev-width}) and (max-width: (#{$current-width} - 1)) {
+            &::before {
+              content: "Screen: #{$current}";
             }
+          }
         }
+      }
 
-        .NuvoUI-Debugger {
-            margin-top: 10px;
+      &::after {
+        content: attr(data-size);
+      }
+    }
 
-            &::before,
-            &::after {
-                font-family: 'Courier New', Courier, monospace;
-                font-size: 0.8em;
-                display: block;
-            }
+    .NuvoUI-Debugger {
+      margin-top: 10px;
 
-            &::before {
-                font-weight: bold;
-                content: attr(data-element);
-            }
+      &::before,
+      &::after {
+        font-family: "Courier New", Courier, monospace;
+        font-size: 0.8em;
+        display: block;
+      }
 
-            &::after {
-                content: attr(data-size);
-            }
-        }
+      &::before {
+        font-weight: bold;
+        content: attr(data-element);
+      }
 
-        .NuvoUI-Debugger-Close {
-            color: #fff;
-            cursor: pointer;
-            font-size: 14px;
-            pointer-events: auto;
-            position: absolute;
-            right: 0;
-            top: 0;
-            background: #00800199;
-            border-radius: 20px;
-            height: 14px;
-            width: 14px;
-            line-height: 14px;
-            text-align: center;
-
-            &:hover {
-                background: #008001;
-            }
-        }
+      &::after {
+        content: attr(data-size);
+      }
+    }
+
+    .NuvoUI-Debugger-Close {
+      color: #fff;
+      cursor: pointer;
+      font-size: 14px;
+      pointer-events: auto;
+      position: absolute;
+      right: 0;
+      top: 0;
+      background: #00800199;
+      border-radius: 20px;
+      height: 14px;
+      width: 14px;
+      line-height: 14px;
+      text-align: center;
+
+      &:hover {
+        background: #008001;
+      }
     }
-}
+  }
+}

package/src/styles/utilities/_index.scss

@@ -0,0 +1,19 @@
+@use "../abstracts/config" as cfg;
+
+// Forward all utility files
+@forward "alignment";
+@forward "animations";
+@forward "borders";
+@forward "colors";
+@forward "container-queries";
+@forward "display";
+@forward "helpers";
+@forward "media-queries";
+@forward "opacity";
+@forward "position";
+@forward "shadows";
+@forward "sizing";
+@forward "spacing";
+@forward "tooltips";
+@forward "transitions";
+@forward "typography";

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

@@ -1,11 +1,11 @@
 // Section: Utilities
 // Module: Media Queries
 
-@use 'sass:map';
-@use 'sass:meta';
-@use './variables' as *;
-@use './functions' as FN;
-
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "../abstracts" as *;
+@use "../abstracts/functions" as FN;
 
 /**
  * @description Media query mixins.
@@ -13,13 +13,25 @@
  * @param {string} $type - The media query type (e.g. 'lg', 'md').
  */
 @mixin media-up($breakpoint) {
-  @media screen and (min-width: FN.get-breakpoint-value($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)) {
     @content;
   }
 }
 
 @mixin media-down($breakpoint) {
-  $val: FN.get-breakpoint-value($breakpoint) - 0.02px;
+  $blueprint-value: FN.get-breakpoint-value($breakpoint);
+  $unit: math.unit($blueprint-value);
+  @if $unit == '' {
+    $blueprint-value: $blueprint-value * 1px; 
+  }
+  $val: $blueprint-value - 0.01;
   @media screen and (max-width: #{$val}) {
     @content;
   }
@@ -27,7 +39,13 @@
 
 @mixin media-between($lower, $upper) {
   $lower-val: FN.get-breakpoint-value($lower);
-  $upper-val: FN.get-breakpoint-value($upper) - 0.02px;
+  $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;
+
   @media screen and (min-width: #{$lower-val}) and (max-width: #{$upper-val}) {
     @content;
   }
@@ -37,13 +55,13 @@
 @mixin media-only($breakpoint) {
   $min: FN.get-breakpoint-value($breakpoint);
   $next-breakpoint: null;
-  
+
   @each $name, $width in $breakpoints {
-    @if $width > $min and (meta.type-of($next-breakpoint) == 'null' or $width < $next-breakpoint) {
+    @if $width > $min and (meta.type-of($next-breakpoint) == "null" or $width < $next-breakpoint) {
       $next-breakpoint: $width;
     }
   }
-  
+
   @if $next-breakpoint {
     @media (min-width: #{$min}) and (max-width: #{$next-breakpoint - 0.02px}) {
       @content;
@@ -76,12 +94,26 @@
   }
 }
 
-// Mixin: Dark Mode
-// Applies styles when the user prefers a dark color scheme.
+// System preference only
+@mixin prefers-dark {
+  @media (prefers-color-scheme: dark) {
+    @content;
+  }
+}
+
+// User preference takes precedence
 @mixin dark-mode {
-  [data-theme='dark'] & {
+  // 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;
+    }
+  }
 }
 
 // Device orientation
@@ -124,9 +156,30 @@
   }
 }
 
+// Data-saving mode
+@mixin save-data {
+  @media (prefers-reduced-data: reduce) {
+    @content;
+  }
+}
+
+// Mouse precision detection
+@mixin fine-pointer {
+  @media (pointer: fine) {
+    @content;
+  }
+}
+
+// Display mode for PWAs
+@mixin display-mode($mode: "standalone") {
+  @media (display-mode: #{$mode}) {
+    @content;
+  }
+}
+
 // High contrast mode
 @mixin high-contrast {
   @media (forced-colors: active) {
     @content;
   }
-}
+}

package/src/styles/utilities/_opacity.scss

@@ -1,10 +1,8 @@
 // Section: Presentation
 // Module: Opacity
 
-@use 'sass:math';
-@use './variables' as *;
-
-
+@use "sass:math";
+@use "../abstracts" as *;
 
 /**
  * @component Opacity
@@ -73,32 +71,58 @@
  * @see transitions
  */
 
-// Opacity Utilities
-@each $i in $percentages {
-  .opacity-#{$i} { opacity: math.div($i, 100); }
-  .hover\:opacity-#{$i}:hover { opacity: math.div($i, 100); }
-  .focus\:opacity-#{$i}:focus { opacity: math.div($i, 100); }
-  .active\:opacity-#{$i}:active { opacity: math.div($i, 100); }
-  .group:hover .group-hover\:opacity-#{$i} { opacity: math.div($i, 100); }
+@mixin opacity($value) {
+  opacity: math.div($value, 100);
 }
 
-// Responsive Variants for Opacity
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: #{$width}) {
-    @each $i in $percentages {
-      .opacity-#{$i}\@#{$breakpoint} { opacity: math.div($i, 100); }
-      .hover\:opacity-#{$i}\@#{$breakpoint}:hover { opacity: math.div($i, 100); }
-      .focus\:opacity-#{$i}\@#{$breakpoint}:focus { opacity: math.div($i, 100); }
-      .active\:opacity-#{$i}\@#{$breakpoint}:active { opacity: math.div($i, 100); }
-      .group:hover .group-hover\:opacity-#{$i}\@#{$breakpoint} { opacity: math.div($i, 100); }
+@if $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} {
+      @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;
+  // Responsive Variants for Opacity
+  @each $breakpoint, $width in $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} {
+          @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

@@ -1,4 +1,4 @@
-@use './variables' as *;
+@use '../abstracts'  as *;
 
 /**
  * @component Position
@@ -49,9 +49,9 @@
  */
 
 
-//-----------------------------------------------
+// -----------------------------------------------
 // MIXINS
-//-----------------------------------------------
+// -----------------------------------------------
 
  
 /**
@@ -171,42 +171,43 @@
 
 
 
-//-----------------------------------------------
+// -----------------------------------------------
 // UTILITY CLASSES
-//-----------------------------------------------
-
-// Position Classes
-.static { @include static; }
-.relative { @include relative; }
-.absolute { @include absolute; }
-.fixed { @include fixed; }
-.sticky { @include sticky; }
-
-// 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); }
-}
+// -----------------------------------------------
+@if $generate-utility-classes {
+  // Position Classes
+  .static { @include static; }
+  .relative { @include relative; }
+  .absolute { @include absolute; }
+  .fixed { @include fixed; }
+  .sticky { @include sticky; }
+
+  // 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); }
+  }
 
-//-----------------------------------------------
-// RESPONSIVE CLASSES
-//-----------------------------------------------
-
-// Responsive Position Classes
-@each $breakpoint, $width in $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;}
-    @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);}
+  // -----------------------------------------------
+  // RESPONSIVE CLASSES
+  // -----------------------------------------------
+
+  // Responsive Position Classes
+  @each $breakpoint, $width in $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;}
+      @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);}
+      }
     }
   }
 }