@nuvoui/core 1.2.0 → 1.2.2

package/src/styles/utilities/_borders.scss

@@ -5,100 +5,128 @@
 @use 'sass:map';
 @use '../abstracts'  as *;
 
+
+
+// Common border styles
+$border-styles: (solid, dashed, dotted, double, none);
+
 // -----------------------------------------------
 // MIXINS
 // -----------------------------------------------
 
 // Core Border Mixins - improved to include style and color by default
-@mixin border($val) { 
+// SKIP Documentation
+@mixin border($val, $style: solid, $color: var(--border)) { 
   $val: if($val == 0, $val, $val + px); 
-  
-  border-width: $val; 
-  @if $val != 0 {
-    border-style: solid; // Apply solid style by default when width > 0
-    border-color: var(--border, var(--border)); // Apply default color
+ 
+  & {
+    border-width: $val; 
+    @if $val != 0 {
+        border-style: $style;
+        border-color: $color;
+      }
   }
 }
 
 @mixin border-top($val) { 
   $val: if($val == 0, $val, $val + px); 
-  
-  border-top-width: $val; 
-  @if $val != 0 {
-    border-top-style: solid;
-    border-top-color: var(--border, var(--border));
+ 
+  & {
+    border-top-width: $val; 
+    @if $val != 0 {
+      border-top-style: solid;
+      border-top-color: var(--border, var(--border));
+    }
   }
 }
 
 @mixin border-right($val) { 
   $val: if($val == 0, $val, $val + px); 
-  
-  border-right-width: $val; 
-  @if $val != 0 {
-    border-right-style: solid;
-    border-right-color: var(--border, var(--border));
+
+  & {
+    border-right-width: $val; 
+    @if $val != 0 {
+      border-right-style: solid;
+      border-right-color: var(--border, var(--border));
+    }
   }
 }
 
 @mixin border-bottom($val) { 
   $val: if($val == 0, $val, $val + px); 
-  
-  border-bottom-width: $val; 
-  @if $val != 0 {
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, var(--border));
+
+  & {
+    border-bottom-width: $val; 
+    @if $val != 0 {
+      border-bottom-style: solid;
+      border-bottom-color: var(--border, var(--border));
+    }
   }
 }
 
 @mixin border-left($val) { 
   $val: if($val == 0, $val, $val + px); 
 
-  border-left-width: $val; 
-  @if $val != 0 {
-    border-left-style: solid;
-    border-left-color: var(--border, var(--border));
+  & { 
+    border-left-width: $val; 
+    @if $val != 0 {
+      border-left-style: solid;
+      border-left-color: var(--border, var(--border));
+    }
   }
 }
-
+ 
 // Border Radius Mixins
 @mixin rounded($val: map.get($border-radii, 'md')) { 
-  border-radius: $val; 
+  & {border-radius: $val; }
 }
 
 @mixin rounded-t($val) { 
-  border-top-left-radius: $val;
-  border-top-right-radius: $val;
+  & {
+    border-top-left-radius: $val;
+    border-top-right-radius: $val;
+  }
 }
 
 @mixin rounded-r($val) { 
-  border-top-right-radius: $val;
-  border-bottom-right-radius: $val;
+  & {
+    border-top-right-radius: $val;
+    border-bottom-right-radius: $val;
+  }
 }
 
 @mixin rounded-b($val) { 
-  border-bottom-left-radius: $val;
-  border-bottom-right-radius: $val;
+  & {
+    border-bottom-left-radius: $val;
+    border-bottom-right-radius: $val;
+  }
 }
 
 @mixin rounded-l($val) { 
-  border-top-left-radius: $val;
-  border-bottom-left-radius: $val;
+  & {
+    border-top-left-radius: $val;
+    border-bottom-left-radius: $val;
+  }
 }
 
-@mixin rounded-tl($val) { border-top-left-radius: $val; }
-@mixin rounded-tr($val) { border-top-right-radius: $val; }
-@mixin rounded-br($val) { border-bottom-right-radius: $val; }
-@mixin rounded-bl($val) { border-bottom-left-radius: $val; }
+@mixin rounded-tl($val) { & {border-top-left-radius: $val; }}
+@mixin rounded-tr($val) { & {border-top-right-radius: $val; }}
+@mixin rounded-br($val) { & {border-bottom-right-radius: $val; }}
+@mixin rounded-bl($val) { & {border-bottom-left-radius: $val; }}
 
 // Border Style and Color
-@mixin border-style($style) { border-style: $style; }
-@mixin border-color($color) { border-color: $color; }
+@mixin border-style($style) { & {border-style: $style; }}
+@mixin border-color($color) { & {border-color: $color; }}
 
 // Combined border properties
 @mixin border-all($width, $style, $color) {
-  border-width: $width;
-  border-style: $style;
-  border-color: $color;
+  @debug "border: #{$width} #{$style} #{$color}";
+
+  & {
+    border-width: $width;
+    border-style: $style;
+    border-color: $color;
+  }
 }
 
 // -----------------------------------------------
@@ -120,174 +148,172 @@ $border-radii: (
   'none': 0
 );
 
-// Common border styles
-$border-styles: (solid, dashed, dotted, double, none);
-
 // -----------------------------------------------
 // UTILITY CLASSES
 // -----------------------------------------------
+@if $generate-utility-classes {
+  // Basic border classes (all sides)
+  .border { @include border(1); }
+  .border-0 { @include border(0); }
+
+  // All sides border width
+  @each $width in $border-widths {
+    .border-#{$width} { @include border($width); }
+  }
 
-// Basic border classes (all sides)
-.border { @include border(1); }
-.border-0 { @include border(0); }
-
-// All sides border width
-@each $width in $border-widths {
-  .border-#{$width} { @include border($width); }
-}
-
-// Directional border width
-@each $width in $border-widths {
-  .border-t-#{$width} { @include border-top($width); }
-  .border-r-#{$width} { @include border-right($width); }
-  .border-b-#{$width} { @include border-bottom($width); }
-  .border-l-#{$width} { @include border-left($width); }
-}
-
-// Common shortcuts for single-side borders
-.border-t { @include border-top(1); }
-.border-r { @include border-right(1); }
-.border-b { @include border-bottom(1); }
-.border-l { @include border-left(1); }
-
-// Border radius classes
-.rounded { @include rounded; } // Default rounded
-.square { @include rounded(0); } // Alias for no radius
+  // Directional border width
+  @each $width in $border-widths {
+    .border-t-#{$width} { @include border-top($width); }
+    .border-r-#{$width} { @include border-right($width); }
+    .border-b-#{$width} { @include border-bottom($width); }
+    .border-l-#{$width} { @include border-left($width); }
+  }
 
-@each $name, $value in $border-radii {
-  .rounded-#{$name} { @include rounded($value); }
-}
+  // Common shortcuts for single-side borders
+  .border-t { @include border-top(1); }
+  .border-r { @include border-right(1); }
+  .border-b { @include border-bottom(1); }
+  .border-l { @include border-left(1); }
 
-// Directional border radius
-@each $name, $value in $border-radii {
-  .rounded-t-#{$name} { @include rounded-t($value); }
-  .rounded-r-#{$name} { @include rounded-r($value); }
-  .rounded-b-#{$name} { @include rounded-b($value); }
-  .rounded-l-#{$name} { @include rounded-l($value); }
-  
-  // Individual corners
-  .rounded-tl-#{$name} { @include rounded-tl($value); }
-  .rounded-tr-#{$name} { @include rounded-tr($value); }
-  .rounded-br-#{$name} { @include rounded-br($value); }
-  .rounded-bl-#{$name} { @include rounded-bl($value); }
-}
+  // Border radius classes
+  .rounded { @include rounded; } // Default rounded
+  .square { @include rounded(0); } // Alias for no radius
 
-// Pill shape (alias for full radius)
-.pill { @include rounded(9999px); }
+  @each $name, $value in $border-radii {
+    .rounded-#{$name} { @include rounded($value); }
+  }
 
-// Border styles - these override the default solid style if needed
-@each $style in $border-styles {
-  .border-#{$style} { @include border-style($style); }
-}
+  // Directional border radius
+  @each $name, $value in $border-radii {
+    .rounded-t-#{$name} { @include rounded-t($value); }
+    .rounded-r-#{$name} { @include rounded-r($value); }
+    .rounded-b-#{$name} { @include rounded-b($value); }
+    .rounded-l-#{$name} { @include rounded-l($value); }
+    
+    // Individual corners
+    .rounded-tl-#{$name} { @include rounded-tl($value); }
+    .rounded-tr-#{$name} { @include rounded-tr($value); }
+    .rounded-br-#{$name} { @include rounded-br($value); }
+    .rounded-bl-#{$name} { @include rounded-bl($value); }
+  }
 
-// Border colors - these override the default color if needed
-.border-default { @include border-color(var(--border)); }
-.border-light { @include border-color(var(--border-light-color)); }
-.border-dark { @include border-color(var(--border-dark-color)); }
-.border-primary { @include border-color(var(--primary)); }
-.border-secondary { @include border-color(var(--secondary)); }
-.border-success { @include border-color(var(--success)); }
-.border-danger { @include border-color(var(--danger)); }
-.border-warning { @include border-color(var(--warning)); }
-.border-info { @include border-color(var(--info)); }
-
-// Common combined border utilities (style + color)
-.border-primary-solid {
-  @include border-style(solid);
-  @include border-color(var(--primary));
-}
+  // Pill shape (alias for full radius)
+  .pill { @include rounded(9999px); }
 
-.border-danger-dashed {
-  @include border-style(dashed);
-  @include border-color(var(--danger));
-}
+  // Border styles - these override the default solid style if needed
+  @each $style in $border-styles {
+    .border-#{$style} { @include border-style($style); }
+  }
 
-// -----------------------------------------------
-// HOVER, ACTIVE, AND FOCUS STATES
-// -----------------------------------------------
+  // Border colors - these override the default color if needed
+  .border-default { @include border-color(var(--border)); }
+  .border-light { @include border-color(var(--border-light-color)); }
+  .border-dark { @include border-color(var(--border-dark-color)); }
+  .border-primary { @include border-color(var(--primary)); }
+  .border-secondary { @include border-color(var(--secondary)); }
+  .border-success { @include border-color(var(--success)); }
+  .border-danger { @include border-color(var(--danger)); }
+  .border-warning { @include border-color(var(--warning)); }
+  .border-info { @include border-color(var(--info)); }
+
+  // Common combined border utilities (style + color)
+  .border-primary-solid {
+    @include border-style(solid);
+    @include border-color(var(--primary));
+  }
 
-// Hover state border classes
-@each $width in $border-widths {
-  .hover\:border-#{$width}:hover { @include border($width); }
-}
+  .border-danger-dashed {
+    @include border-style(dashed);
+    @include border-color(var(--danger));
+  }
 
-@each $style in $border-styles {
-  .hover\:border-#{$style}:hover { @include border-style($style); }
-}
+  // -----------------------------------------------
+  // HOVER, ACTIVE, AND FOCUS STATES
+  // -----------------------------------------------
 
-// Border colors on hover
-.hover\:border-default:hover { @include border-color(var(--border)); }
-.hover\:border-light:hover { @include border-color(var(--border-light-color)); }
-.hover\:border-dark:hover { @include border-color(var(--border-dark-color)); }
-.hover\:border-primary:hover { @include border-color(var(--primary)); }
-.hover\:border-secondary:hover { @include border-color(var(--secondary)); }
-.hover\:border-success:hover { @include border-color(var(--success)); }
-.hover\:border-danger:hover { @include border-color(var(--danger)); }
-.hover\:border-warning:hover { @include border-color(var(--warning)); }
-.hover\:border-info:hover { @include border-color(var(--info)); }
-
-// Active state border classes
-@each $width in $border-widths {
-  .active\:border-#{$width}:active { @include border($width); }
-}
+  // Hover state border classes
+  @each $width in $border-widths {
+    .hover\:border-#{$width}:hover { @include border($width); }
+  }
 
-@each $style in $border-styles {
-  .active\:border-#{$style}:active { @include border-style($style); }
-}
+  @each $style in $border-styles {
+    .hover\:border-#{$style}:hover { @include border-style($style); }
+  }
 
-// Border colors on active state
-.active\:border-default:active { @include border-color(var(--border)); }
-.active\:border-light:active { @include border-color(var(--border-light-color)); }
-.active\:border-dark:active { @include border-color(var(--border-dark-color)); }
-.active\:border-primary:active { @include border-color(var(--primary)); }
-.active\:border-secondary:active { @include border-color(var(--secondary)); }
-.active\:border-success:active { @include border-color(var(--success)); }
-.active\:border-danger:active { @include border-color(var(--danger)); }
-.active\:border-warning:active { @include border-color(var(--warning)); }
-.active\:border-info:active { @include border-color(var(--info)); }
-
-// Focus state border classes
-@each $width in $border-widths {
-  .focus\:border-#{$width}:focus { @include border($width); }
-}
+  // Border colors on hover
+  .hover\:border-default:hover { @include border-color(var(--border)); }
+  .hover\:border-light:hover { @include border-color(var(--border-light-color)); }
+  .hover\:border-dark:hover { @include border-color(var(--border-dark-color)); }
+  .hover\:border-primary:hover { @include border-color(var(--primary)); }
+  .hover\:border-secondary:hover { @include border-color(var(--secondary)); }
+  .hover\:border-success:hover { @include border-color(var(--success)); }
+  .hover\:border-danger:hover { @include border-color(var(--danger)); }
+  .hover\:border-warning:hover { @include border-color(var(--warning)); }
+  .hover\:border-info:hover { @include border-color(var(--info)); }
+
+  // Active state border classes
+  @each $width in $border-widths {
+    .active\:border-#{$width}:active { @include border($width); }
+  }
 
-@each $style in $border-styles {
-  .focus\:border-#{$style}:focus { @include border-style($style); }
-}
+  @each $style in $border-styles {
+    .active\:border-#{$style}:active { @include border-style($style); }
+  }
 
-// Border colors on focus
-.focus\:border-default:focus { @include border-color(var(--border)); }
-.focus\:border-light:focus { @include border-color(var(--border-light-color)); }
-.focus\:border-dark:focus { @include border-color(var(--border-dark-color)); }
-.focus\:border-primary:focus { @include border-color(var(--primary)); }
-.focus\:border-secondary:focus { @include border-color(var(--secondary)); }
-.focus\:border-success:focus { @include border-color(var(--success)); }
-.focus\:border-danger:focus { @include border-color(var(--danger)); }
-.focus\:border-warning:focus { @include border-color(var(--warning)); }
-.focus\:border-info:focus { @include border-color(var(--info)); }
+  // Border colors on active state
+  .active\:border-default:active { @include border-color(var(--border)); }
+  .active\:border-light:active { @include border-color(var(--border-light-color)); }
+  .active\:border-dark:active { @include border-color(var(--border-dark-color)); }
+  .active\:border-primary:active { @include border-color(var(--primary)); }
+  .active\:border-secondary:active { @include border-color(var(--secondary)); }
+  .active\:border-success:active { @include border-color(var(--success)); }
+  .active\:border-danger:active { @include border-color(var(--danger)); }
+  .active\:border-warning:active { @include border-color(var(--warning)); }
+  .active\:border-info:active { @include border-color(var(--info)); }
+
+  // Focus state border classes
+  @each $width in $border-widths {
+    .focus\:border-#{$width}:focus { @include border($width); }
+  }
 
-// -----------------------------------------------
-// RESPONSIVE CLASSES
-// -----------------------------------------------
+  @each $style in $border-styles {
+    .focus\:border-#{$style}:focus { @include border-style($style); }
+  }
 
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: #{$width}) {
-    // Border width responsive
-    @each $val in $border-widths {
-      .border-#{$val}\@#{$breakpoint} { @include border($val); }
+  // Border colors on focus
+  .focus\:border-default:focus { @include border-color(var(--border)); }
+  .focus\:border-light:focus { @include border-color(var(--border-light-color)); }
+  .focus\:border-dark:focus { @include border-color(var(--border-dark-color)); }
+  .focus\:border-primary:focus { @include border-color(var(--primary)); }
+  .focus\:border-secondary:focus { @include border-color(var(--secondary)); }
+  .focus\:border-success:focus { @include border-color(var(--success)); }
+  .focus\:border-danger:focus { @include border-color(var(--danger)); }
+  .focus\:border-warning:focus { @include border-color(var(--warning)); }
+  .focus\:border-info:focus { @include border-color(var(--info)); }
+
+  // -----------------------------------------------
+  // RESPONSIVE CLASSES
+  // -----------------------------------------------
+
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: #{$width}) {
+      // Border width responsive
+      @each $val in $border-widths {
+        .border-#{$val}\@#{$breakpoint} { @include border($val); }
+      }
+      
+      // Common shortcuts for responsive
+      .border\@#{$breakpoint} { @include border(1); }
+      .border-0\@#{$breakpoint} { @include border(0); }
+      
+      // Border radius responsive
+      @each $name, $value in $border-radii {
+        .rounded-#{$name}\@#{$breakpoint} { @include rounded($value); }
+      }
+      
+      .rounded\@#{$breakpoint} { @include rounded; }
+      .square\@#{$breakpoint} { @include rounded(0); }
+      .pill\@#{$breakpoint} { @include rounded(9999px); }
     }
-    
-    // Common shortcuts for responsive
-    .border\@#{$breakpoint} { @include border(1); }
-    .border-0\@#{$breakpoint} { @include border(0); }
-    
-    // Border radius responsive
-    @each $name, $value in $border-radii {
-      .rounded-#{$name}\@#{$breakpoint} { @include rounded($value); }
-    }
-    
-    .rounded\@#{$breakpoint} { @include rounded; }
-    .square\@#{$breakpoint} { @include rounded(0); }
-    .pill\@#{$breakpoint} { @include rounded(9999px); }
   }
-}
+}

package/src/styles/utilities/_colors.scss

@@ -110,14 +110,14 @@ $colors-primitives: ();
     }
 }
 @mixin gradient($direction, $colors...) {
-    background-image: linear-gradient($direction, $colors);
+    & { background-image: linear-gradient($direction, $colors); }
 }
 
 // Filter Mixins
 @mixin backdrop-filter($value) {
-    backdrop-filter: $value;
+    & { backdrop-filter: $value; }
 }
 
 @mixin filter($value) {
-    filter: $value;
+    & { filter: $value; }
 } 

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

@@ -81,17 +81,19 @@
   container-name: $name;
 }
 
-// Utility classes
-.container-inline-size {
-  container-type: inline-size;
-}
+@if $generate-utility-classes {
+  // Utility classes
+  .container-inline-size {
+    container-type: inline-size;
+  }
 
-.container-size {
-  container-type: size;
-}
+  .container-size {
+    container-type: size;
+  }
 
-@each $name in ("main", "sidebar", "card", "section") {
-  .container-#{$name} {
-    container-name: $name;
+  @each $name in ("main", "sidebar", "card", "section") {
+    .container-#{$name} {
+      container-name: $name;
+    }
   }
-}
+}