@nuvoui/core 1.2.3 → 1.2.5

package/src/styles/utilities/_borders.scss

@@ -3,12 +3,36 @@
 
 @use 'sass:math';
 @use 'sass:map';
-@use '../abstracts'  as *;
-
+@use 'sass:meta';
+@use 'sass:string' as str;
+@use '../abstracts' as *;
+@use '../abstracts/functions' as FN;
 
 
 // Common border styles
 $border-styles: (solid, dashed, dotted, double, none);
+ 
+
+@function get-rounded-value($val) {
+  @if not $val { 
+    @return map.get($border-radii, 'md');
+  } @else if meta.type-of($val) == string {
+    $clean-val: $val;
+    
+    // Try to find the value in the border-radii map
+    @if map.has-key($border-radii, $clean-val) {
+      @return map.get($border-radii, $clean-val);
+    } @else if map.has-key($border-radii, str.unquote($clean-val)) {
+      @return map.get($border-radii, str.unquote($clean-val));
+    } @else {
+      // Not a predefined value, process it as a custom value
+      @return FN.fix-units($val);
+    }
+  } @else {
+    // Case 3: $val is a custom value, ensure it has units
+    @return FN.fix-units($val);
+  }
+}
 
 // -----------------------------------------------
 // MIXINS
@@ -17,14 +41,18 @@ $border-styles: (solid, dashed, dotted, double, none);
 // Core Border Mixins - improved to include style and color by default
 // SKIP Documentation
 @mixin border($val, $style: solid, $color: var(--border)) { 
+  $val: FN.fix-units($val);
+ 
   border-width: $val; 
   @if $val != 0 {
       border-style: $style;
       border-color: $color;
     }
-}
+} 
 
 @mixin border-top($val) { 
+  $val: FN.fix-units($val);
+
   border-top-width: $val; 
   @if $val != 0 {
     border-top-style: solid;
@@ -33,6 +61,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 }
 
 @mixin border-right($val) { 
+  $val: FN.fix-units($val);
+
   border-right-width: $val; 
   @if $val != 0 {
     border-right-style: solid;
@@ -41,6 +71,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 }
 
 @mixin border-bottom($val) { 
+  $val: FN.fix-units($val);
+
   border-bottom-width: $val; 
   @if $val != 0 {
     border-bottom-style: solid;
@@ -49,6 +81,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 }
 
 @mixin border-left($val) { 
+  $val: FN.fix-units($val);
+
   border-left-width: $val; 
   @if $val != 0 {
     border-left-style: solid;
@@ -61,54 +95,54 @@ $border-styles: (solid, dashed, dotted, double, none);
  * @param {String} $val - The border radius value
  */
 @mixin rounded($val: null) {
-  border-radius: if($val == null, map.get($border-radii, 'md'), $val);
+  border-radius: get-rounded-value($val);
 }
 
 @mixin rounded-t($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
 
   border-top-left-radius: $val;
   border-top-right-radius: $val;
 }
 
 @mixin rounded-r($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
 
   border-top-right-radius: $val;
   border-bottom-right-radius: $val;
 }
 
 @mixin rounded-b($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
 
   border-bottom-left-radius: $val;
   border-bottom-right-radius: $val;
 }
 
 @mixin rounded-l($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
 
   border-top-left-radius: $val;
   border-bottom-left-radius: $val;
 }
 
 @mixin rounded-tl($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
   
   border-top-left-radius: $val; 
 }
 @mixin rounded-tr($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
   
   border-top-right-radius: $val; 
 }
 @mixin rounded-br($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
   
   border-bottom-right-radius: $val; 
 }
 @mixin rounded-bl($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
   
   border-bottom-left-radius: $val; 
 }
@@ -126,25 +160,6 @@ $border-styles: (solid, dashed, dotted, double, none);
 
 @mixin pill { @include rounded(9999px); } // todo: doc missing
 
-// -----------------------------------------------
-// VARIABLES
-// -----------------------------------------------
-
-// Common border width values that are most useful
-$border-widths: (0, 1, 2, 4, 8);
-
-// Common border radius values that are most useful
-$border-radii: (
-  'xs': 0.25rem,
-  'sm': 0.375rem,
-  'md': 0.5rem,
-  'lg': 0.75rem,
-  'xl': 1rem,
-  '2xl': 1.25rem,
-  'full': 9999px,
-  'none': 0
-);
-
 // -----------------------------------------------
 // UTILITY CLASSES
 // -----------------------------------------------

package/src/styles/utilities/_colors.scss

@@ -108,12 +108,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/_helpers.scss

@@ -6,7 +6,7 @@
 
 @use "../abstracts/config" as *;
 
-@if $enable-debuger {
+@if $enable-debugger {
   .NuvoUI-Debugger-Wrapper {
     color: #fff;
     font-family: Arial, sans-serif;

package/src/styles/utilities/_index.scss

@@ -3,6 +3,7 @@
 // Forward all utility files
 @forward "alignment";
 @forward "animations";
+@forward "backdrop-filters";
 @forward "borders";
 @forward "colors";
 @forward "container-queries";
@@ -16,5 +17,7 @@
 @forward "sizing";
 @forward "spacing";
 @forward "tooltips";
+@forward "transforms";
 @forward "transitions";
 @forward "typography";
+@forward "z-index";

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

@@ -73,6 +73,7 @@
   }
 }
 
+// todo: doc
 // Touch devices
 @mixin touch {
   @media (hover: none) and (pointer: coarse) {
@@ -80,6 +81,7 @@
   }
 }
 
+// todo: doc
 // Print media
 @mixin print {
   @media print {
@@ -87,6 +89,7 @@
   }
 }
 
+// todo: doc
 // Example: @include supports(display: grid) { }
 @mixin supports($property) {
   @supports (#{$property}) {
@@ -94,6 +97,7 @@
   }
 }
 
+// todo: doc
 // System preference only
 @mixin prefers-dark {
   @media (prefers-color-scheme: dark) {
@@ -101,21 +105,25 @@
   }
 }
 
+// todo: doc
 // User preference takes precedence
 @mixin dark-mode {
-  // 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"] & {
+  @if $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"] & {
+        @content;
+      }
+    }
   }
 }
 
+// todo: doc
 // Device orientation
 @mixin landscape {
   @media screen and (orientation: landscape) {
@@ -123,17 +131,20 @@
   }
 }
 
+// todo: doc
 @mixin portrait {
   @media screen and (orientation: portrait) {
     @content;
   }
 }
 
+// todo: doc
 // Modern aspect ratio
 @mixin aspect-ratio($ratio) {
   aspect-ratio: #{$ratio};
 }
 
+// todo: doc
 // Dynamic viewport units (modern browsers)
 @mixin dvh {
   @supports (height: 100dvh) {
@@ -145,24 +156,20 @@
   }
 }
 
+// todo: doc
 // Safe area insets (notches, home indicators)
 @mixin safe-area-inset($property, $position) {
   #{$property}: env(safe-area-inset-#{$position});
 }
 
+// todo: doc
 @mixin reduced-motion {
   @media (prefers-reduced-motion: reduce) {
     @content;
   }
 }
 
-// Data-saving mode
-@mixin save-data {
-  @media (prefers-reduced-data: reduce) {
-    @content;
-  }
-}
-
+// todo: doc
 // Mouse precision detection
 @mixin fine-pointer {
   @media (pointer: fine) {
@@ -170,6 +177,7 @@
   }
 }
 
+// todo: doc
 // Display mode for PWAs
 @mixin display-mode($mode: "standalone") {
   @media (display-mode: #{$mode}) {
@@ -177,6 +185,7 @@
   }
 }
 
+// todo: doc
 // High contrast mode
 @mixin high-contrast {
   @media (forced-colors: active) {

package/src/styles/utilities/_sizing.scss

@@ -3,16 +3,17 @@
 @use 'sass:math';
 @use 'sass:string' as str;
 @use '../abstracts'  as VAR;
+@use '../abstracts/functions' as FN;
 @use './container-queries' as Q;
 @use './media-queries' as MQ;
 
-@mixin width($value) { width: $value; }
-@mixin height($value) { height: $value; }
-@mixin min-width($value) { min-width: $value; }
-@mixin min-height($value) { min-height: $value; }
-@mixin max-width($value) { max-width: $value; }
-@mixin max-height($value) { max-height: $value; }
-
+@mixin width($value) { width: FN.fix-units($value); }
+@mixin height($value) { height: FN.fix-units($value); }
+@mixin min-width($value) { min-width: FN.fix-units($value); }
+@mixin min-height($value) { min-height: FN.fix-units($value); }
+@mixin max-width($value) { max-width: FN.fix-units($value); }
+@mixin max-height($value) { max-height: FN.fix-units($value); }
+.widthx { @include width(100%); }
 @mixin width-percent($i) { width: str.unquote($i + '%'); }
 @mixin height-percent($i) { height: str.unquote($i + '%'); }
 @mixin min-width-percent($i) { min-width: str.unquote($i + '%'); }
@@ -20,14 +21,20 @@
 @mixin max-width-percent($i) { max-width: str.unquote($i + '%'); }
 @mixin max-height-percent($i) { max-height: str.unquote($i + '%'); }
 
-@mixin w-auto { width: auto; }
-@mixin w-full { width: 100%; }
-@mixin h-auto { height: auto; }
-@mixin h-full { height: 100%; }
-@mixin min-w-full { min-width: 100%; }
-@mixin max-w-full { max-width: 100%; }
-@mixin min-h-full { min-height: 100%; }
-@mixin max-h-full { max-height: 100%; }
+@mixin w-auto { @include width(auto);}
+@mixin w-full { @include width(100%);}
+@mixin h-auto { @include height(auto);}
+@mixin h-full { @include height(100%);}
+@mixin w-max { @include width(max-content);}
+@mixin h-max { @include height(max-content);}
+@mixin w-min { @include width(min-content);}
+@mixin h-min { @include height(min-content);}
+@mixin w-fit { @include width(fit-content);}
+@mixin h-fit { @include height(fit-content);}
+@mixin min-w-full { @include min-width(100%);}
+@mixin max-w-full { @include max-width(100%);}
+@mixin min-h-full { @include min-height(100%);}
+@mixin max-h-full { @include max-height(100%);}
 
 @mixin w-screen { width: 100vw; }
 @mixin h-screen { height: 100dvh; }
@@ -38,9 +45,13 @@
 
   .w-auto { @include w-auto; }
   .w-full { @include w-full; }
-
   .h-auto { @include h-auto; }
   .h-full { @include h-full; }
+  .w-min { @include w-min;}
+  .h-min { @include h-min;}
+  .w-fit { @include w-fit;}
+  .h-fit { @include h-fit;}
+  
   .min-w-full { @include min-w-full; }
   .max-w-full { @include max-w-full; }
   .min-h-full { @include min-h-full; }
@@ -58,8 +69,13 @@
 
   // Generate utilities from spacing map
   @each $key, $value in VAR.$spacings {
-    .w-#{$key} { @include width($value); }
-    .h-#{$key} { @include height($value); }
+    .w-#{$key},
+    .hover\:w-#{$key}:hover,
+    .group:hover .group-hover\:w-#{$key} { @include width($value); }
+    .h-#{$key},
+    .hover\:h-#{$key}:hover,
+    .group:hover .group-hover\:h-#{$key} { @include height($value); }
+
     .min-w-#{$key} { @include min-width($value); }
     .min-h-#{$key} { @include min-height($value); }
     .max-w-#{$key} { @include max-width($value); }
@@ -73,11 +89,26 @@
     .min-w-#{$breakpoint} { @include min-width($width); }
     .max-w-#{$breakpoint} { @include max-width($width); }
 
+
+    .w-auto\@#{$breakpoint} { @include w-auto; }
+    .w-full\@#{$breakpoint} { @include w-full; }
+    .h-auto\@#{$breakpoint} { @include h-auto; }
+    .h-full\@#{$breakpoint} { @include h-full; }
+    .w-min\@#{$breakpoint}{ @include w-min;}
+    .h-min\@#{$breakpoint}{ @include h-min;}
+    .w-fit\@#{$breakpoint}{ @include w-fit;}
+    .h-fit\@#{$breakpoint}{ @include h-fit;}
+    
     @include MQ.media-up ($breakpoint) {
       // Generate utilities from spacing map
       @each $i in VAR.$percentages {
-        .w-#{$i}p\@#{$breakpoint} { @include width-percent($i); }
-        .h-#{$i}p\@#{$breakpoint} { @include height-percent($i); }
+        .w-#{$i}\@#{$breakpoint},
+        .hover\:w-#{$i}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:w-#{$i}\@#{$breakpoint} { @include width($i); }
+        .h-#{$i}\@#{$breakpoint},
+        .hover\:h-#{$i}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:h-#{$i}\@#{$breakpoint} { @include height($i); }
+
         .min-w-#{$i}p\@#{$breakpoint} { @include min-width-percent($i); }
         .min-h-#{$i}p\@#{$breakpoint} { @include min-height-percent($i); }
         .max-w-#{$i}p\@#{$breakpoint} { @include max-width-percent($i); }
@@ -85,8 +116,14 @@
       }
 
       @each $key, $value in VAR.$spacings {
-        .w-#{$key}\@#{$breakpoint} { @include width($value); }
-        .h-#{$key}\@#{$breakpoint} { @include height($value); }
+        .w-#{$key}\@#{$breakpoint},
+        .hover\:w-#{$key}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:w-#{$key}\@#{$breakpoint} { @include width($value); }
+        .h-#{$key}\@#{$breakpoint},
+        .hover\:h-#{$key}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:h-#{$key}\@#{$breakpoint} { @include height($value); }
+        
+
         .min-w-#{$key}\@#{$breakpoint} { @include min-width($value); }
         .min-h-#{$key}\@#{$breakpoint} { @include min-height($value); }
         .max-w-#{$key}\@#{$breakpoint} { @include max-width($value); }