@nuvoui/core 1.1.4 → 1.1.5

package/src/styles/utilities/_colors.scss

@@ -42,8 +42,8 @@
 
 
 // Color Relationship Functions
-@function find-text-color($background) {
-    $luminance: luminance($background);
+@function find-text-color($color) {
+    $luminance: luminance($color);
     @return if($luminance > 0.55, #000, #fff);
 }
 
@@ -61,12 +61,12 @@
 }
 
 // Context-Aware Colors
-@mixin adaptive-contrast($background) {
-    background: $background;
-    color: find-text-color($background);
+@mixin adaptive-contrast($color) {
+    background: $color;
+    color: find-text-color($color);
     
     @media (prefers-contrast: more) {
-        $high-contrast: adjust-contrast($background, 20%);
+        $high-contrast: adjust-contrast($color, 20%);
         
         background: $high-contrast;
     }

package/src/styles/utilities/_functions.scss

@@ -1,5 +1,8 @@
 @use 'sass:string';
 @use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+@use 'variables' as *;
 
 @function strip-unit($value) {
   @return math.div($value, ($value * 0 + 1));
@@ -56,4 +59,126 @@
   
   // Return empty string if no unit found
   @return '';
+}
+
+@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;
+        }
+
+        &.top-right {
+            inset: 10px 10px auto auto;
+            text-align: right;
+        }
+
+        &.bottom-left {
+            inset: auto auto 10px 10px;
+            text-align: left;
+        }
+
+        &.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 {
+            $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 {
+                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}";
+                        }
+                    }
+                }
+            }
+
+            &::after {
+                content: attr(data-size);
+            }
+        }
+
+        .NuvoUI-Debugger {
+            margin-top: 10px;
+
+            &::before,
+            &::after {
+                font-family: 'Courier New', Courier, monospace;
+                font-size: 0.8em;
+                display: block;
+            }
+
+            &::before {
+                font-weight: bold;
+                content: attr(data-element);
+            }
+
+            &::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/_media-queries.scss

@@ -28,8 +28,28 @@
 }
 
 @mixin media-between($lower, $upper) {
-  @if map.has-key($breakpoints, $lower) and map.has-key($breakpoints, $upper) {
-    @media screen and (min-width: map.get($breakpoints, $lower)) and (max-width: (map.get($breakpoints, $upper) - 0.02px)) {
+
+  $-lower: null;
+  $-upper: null;
+
+  @if map.has-key($breakpoints, $lower) {
+    $-lower: map.get($breakpoints, $lower);
+  } @else if meta.type-of($lower) == number {
+    $-lower: $lower - 0.02px;
+  } @else {
+    @warn 'Unknown lower breakpoint: #{$lower}';
+  }
+
+  @if map.has-key($breakpoints, $upper) {
+    $-upper: map.get($breakpoints, $upper);
+  } @else if meta.type-of($upper) == number {
+    $-upper: $upper - 0.02px;
+  } @else {
+    @warn 'Unknown uppper breakpoint: #{$upper}';
+  }
+  
+  @if $-lower and $-upper {
+    @media screen and (min-width: $-lower) and (max-width: $-upper) {
       @content;
     }
   }
@@ -80,17 +100,13 @@
   }
 }
 
-// Modern feature detection
 // Example: @include supports(display: grid) { }
 @mixin supports($property) {
-  @supports #{$property} {
+  @supports (#{$property}) {
     @content;
   }
 }
 
-
-
-
 // Mixin: Dark Mode
 // Applies styles when the user prefers a dark color scheme.
 @mixin dark-mode {

package/src/styles/utilities/_sizing.scss

@@ -41,10 +41,10 @@
 @each $i in $percentages {
     .w-#{$i}per { @include width-percent($i); }
     .h-#{$i}per { @include height-percent($i); }
-    .min-w-#{$i} { @include min-width-percent($i); }
-    .min-h-#{$i} { @include min-height-percent($i); }
-    .max-w-#{$i} { @include max-width-percent($i); }
-    .max-h-#{$i} { @include max-height-percent($i); }
+    .min-w-#{$i}per { @include min-width-percent($i); }
+    .min-h-#{$i}per { @include min-height-percent($i); }
+    .max-w-#{$i}per { @include max-width-percent($i); }
+    .max-h-#{$i}per { @include max-height-percent($i); }
 }
 
 // Generate utilities from spacing map
@@ -62,6 +62,12 @@
     @media (min-width: $width) {
         // Generate utilities from spacing map
         @each $i in $spacings {
+            .w-#{$i}per\@#{$breakpoint} { @include width-percent($i); }
+            .h-#{$i}per\@#{$breakpoint} { @include height-percent($i); }
+            .min-w-#{$i}per\@#{$breakpoint} { @include min-width-percent($i); }
+            .min-h-#{$i}per\@#{$breakpoint} { @include min-height-percent($i); }
+            .max-w-#{$i}per\@#{$breakpoint} { @include max-width-percent($i); }
+            .max-h-#{$i}per\@#{$breakpoint} { @include max-height-percent($i); }
             .w-#{$i}\@#{$breakpoint} { @include width($i); }
             .h-#{$i}\@#{$breakpoint} { @include height($i); }
             .min-w-#{$i}\@#{$breakpoint} { @include min-width($i) }

package/src/styles/utilities/_variables.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 
 // Global variables that might be used across different modules
+$enable-debuger: false !default;
 $enable-dark-mode: true !default;
 $enable-rtl: true !default;;
 $enable-reduced-motion: true !default;;
@@ -36,20 +37,20 @@ $theme-tokens: (
 
 // Default theme config (can be overridden)
 $light-theme: (
-  'background': #ffffff,
-  'foreground': #000000,
-  'surface': #ffffff,
+  'background': #fff,
+  'foreground': #000,
+  'surface': #fff,
   'border': #e5e7eb,
-  'text-primary': #000000,
+  'text-primary': #000,
   'text-secondary': #4b5563
 ) !default;
 
 $dark-theme: (
-  'background': #000000,
-  'foreground': #ffffff,
+  'background': #000,
+  'foreground': #fff,
   'surface': #1a1a1a,
   'border': #2e2e2e,
-  'text-primary': #ffffff,
+  'text-primary': #fff,
   'text-secondary': #a3a3a3
 ) !default;