@nuvoui/core 1.1.8 → 1.2.0

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,10 @@
 // Section: Utilities
 // Module: Media Queries
 
-@use 'sass:map';
-@use 'sass:meta';
-@use './variables' as *;
-@use './functions' as FN;
-
+@use "sass:map";
+@use "sass:meta";
+@use "../abstracts" as *;
+@use "../abstracts/functions" as FN;
 
 /**
  * @description Media query mixins.
@@ -19,7 +18,7 @@
 }
 
 @mixin media-down($breakpoint) {
-  $val: FN.get-breakpoint-value($breakpoint) - 0.02px;
+  $val: FN.get-breakpoint-value($breakpoint) - 0.01rm;
   @media screen and (max-width: #{$val}) {
     @content;
   }
@@ -27,7 +26,7 @@
 
 @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) - 0.01rm;
   @media screen and (min-width: #{$lower-val}) and (max-width: #{$upper-val}) {
     @content;
   }
@@ -37,13 +36,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 +75,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 +137,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
@@ -75,22 +73,42 @@
 
 // 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); }
+  .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);
+  }
 }
 
 // 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); }
+      .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);
+      }
     }
   }
 }
@@ -101,4 +119,4 @@
   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,9 +171,9 @@
 
 
 
-//-----------------------------------------------
+// -----------------------------------------------
 // UTILITY CLASSES
-//-----------------------------------------------
+// -----------------------------------------------
 
 // Position Classes
 .static { @include static; }
@@ -190,9 +190,9 @@
   .left-#{$key} { @include left($value); }
 }
 
-//-----------------------------------------------
+// -----------------------------------------------
 // RESPONSIVE CLASSES
-//-----------------------------------------------
+// -----------------------------------------------
 
 // Responsive Position Classes
 @each $breakpoint, $width in $breakpoints {