@nuvoui/core 1.1.7 → 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.
@@ -13,38 +12,39 @@
  * @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)}) {
+  @media screen and (min-width: FN.get-breakpoint-value($breakpoint)) {
     @content;
   }
 }
 
 @mixin media-down($breakpoint) {
-  @media screen and (max-width: (#{FN.get-breakpoint-value($breakpoint)} - 0.02px)) {
+  $val: FN.get-breakpoint-value($breakpoint) - 0.01rm;
+  @media screen and (max-width: #{$val}) {
     @content;
   }
 }
 
 @mixin media-between($lower, $upper) {
   $lower-val: FN.get-breakpoint-value($lower);
-  $upper-val: FN.get-breakpoint-value($upper);
-  @media screen and (min-width: #{$lower-val}) and (max-width: (#{ $upper-val } - 0.02px)) {
+  $upper-val: FN.get-breakpoint-value($upper) - 0.01rm;
+  @media screen and (min-width: #{$lower-val}) and (max-width: #{$upper-val}) {
     @content;
   }
 }
 
 // Only at specific breakpoint
-@mixin media-only($breakpoint) { // BUG BUG BUG BUG BUG
+@mixin media-only($breakpoint) {
   $min: FN.get-breakpoint-value($breakpoint);
   $next-breakpoint: null;
-  
+
   @each $name, $width in $breakpoints {
-    @if $width > $min and (not $next-breakpoint or $width < $next-breakpoint) {
-      $next-breakpoint: #{$width};
+    @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 } - 1)) {
+    @media (min-width: #{$min}) and (max-width: #{$next-breakpoint - 0.02px}) {
       @content;
     }
   } @else {
@@ -75,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
@@ -106,7 +120,7 @@
   @supports (height: 100dvh) {
     height: 100dvh;
   }
-  
+
   @supports not (height: 100dvh) {
     height: 100vh;
   }
@@ -123,6 +137,27 @@
   }
 }
 
+// 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) {

package/src/styles/utilities/_opacity.scss

@@ -1,20 +1,122 @@
-// _spacing.scss
+// Section: Presentation
+// Module: Opacity
 
-@use 'sass:math';
-@use './variables' as *;
+@use "sass:math";
+@use "../abstracts" as *;
+
+/**
+ * @component Opacity
+ * @description Controls element transparency with customizable opacity values and interactive states
+ *
+ * @example
+ * <!-- Basic opacity -->
+ * <div class="opacity-50">This element has 50% opacity</div>
+ * 
+ * <!-- Responsive opacity -->
+ * <div class="opacity-100 opacity-50@md">
+ *   100% opacity by default, 50% on medium screens and up
+ * </div>
+ * 
+ * <!-- Interactive states -->
+ * <div class="opacity-50 hover:opacity-100">
+ *   50% opacity, becomes fully visible on hover
+ * </div>
+ * 
+ * <button class="opacity-70 focus:opacity-100">
+ *   70% opacity, fully visible when focused
+ * </button>
+ * 
+ * <div class="opacity-75 active:opacity-100">
+ *   75% opacity, fully visible when clicked/active
+ * </div>
+ * 
+ * <!-- Group hover effect -->
+ * <div class="group">
+ *   <h3>Parent element with "group" class</h3>
+ *   <div class="opacity-0 group-hover:opacity-100">
+ *     Hidden by default, visible when parent is hovered
+ *   </div>
+ * </div>
+ * 
+ * <!-- With transition -->
+ * <div class="opacity-50 hover:opacity-100 transition-opacity">
+ *   Smooth opacity transition on hover
+ * </div>
+ *
+ * @classes
+ * Base:
+ * - opacity-{value}: Sets element opacity (0-100%)
+ *   Values: 0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100
+ * 
+ * Interactive States:
+ * - hover:opacity-{value}: Changes opacity on mouse hover
+ * - focus:opacity-{value}: Changes opacity when element receives focus
+ * - active:opacity-{value}: Changes opacity when element is active/pressed
+ * - group-hover:opacity-{value}: Changes opacity when parent with .group class is hovered
+ * 
+ * Animation:
+ * - transition-opacity: Adds smooth transition when opacity changes
+ *
+ * @responsive
+ * All opacity classes support responsive variants using @breakpoint suffix:
+ * - opacity-50@sm: 50% opacity on small screens and up
+ * - hover:opacity-100@md: Full opacity on hover for medium screens and up
+ * 
+ * Available breakpoints: xs, sm, md, lg, xl, xxl
+ *
+ * @customization
+ * Opacity values are defined in the $percentages variable
+ * Transition timing can be customized via CSS variables
+ *
+ * @see transitions
+ */
 
 // Opacity Utilities
 @each $i in $percentages {
-  .opacity-#{$i} { opacity: math.div($i, 100); }
-  .hover\:opacity-#{$i}:hover { 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); }
+      .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);
+      }
     }
   }
-}
+}
+
+// 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;
+}