@nuvoui/core 1.3.0 → 1.3.2

package/src/styles/utilities/_borders.scss

@@ -5,6 +5,8 @@
 @use "sass:map";
 @use "sass:meta";
 @use "sass:string" as str;
+@use "sass:list";
+
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
@@ -38,13 +40,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-base)) {
+@mixin border($val, $style: solid, $color: var(--border-color)) {
   $val: FN.fix-units($val);
 
+  --border-size: #{$val};
+
   border-width: $val;
   @if $val != 0 {
     border-style: $style;
     border-color: $color;
+
+    --border-style: #{$style};
+    --border-color: #{$color};
   }
 }
 
@@ -53,8 +60,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 
   border-top-width: $val;
   @if $val != 0 {
-    border-top-style: solid;
-    border-top-color: var(--border);
+    border-top-style: var(--border-style, solid);
+    border-top-color: var(--border-color);
   }
 }
 
@@ -63,8 +70,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 
   border-right-width: $val;
   @if $val != 0 {
-    border-right-style: solid;
-    border-right-color: var(--border);
+    border-right-style: var(--border-style, solid);
+    border-right-color: var(--border-color);
   }
 }
 
@@ -73,8 +80,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 
   border-bottom-width: $val;
   @if $val != 0 {
-    border-bottom-style: solid;
-    border-bottom-color: var(--border);
+    border-bottom-style: var(--border-style, solid);
+    border-bottom-color: var(--border-color);
   }
 }
 
@@ -83,15 +90,13 @@ $border-styles: (solid, dashed, dotted, double, none);
 
   border-left-width: $val;
   @if $val != 0 {
-    border-left-style: solid;
-    border-left-color: var(--border);
+    border-left-style: var(--border-style, solid);
+    border-left-color: var(--border-color);
   }
 }
 
-/**
- * @description Applies border radius to all corners
- * @param {String} $val - The border radius value
- */
+// @description Applies border radius to all corners
+// @param {String} $val - The border radius value
 @mixin rounded($val: null) {
   border-radius: get-rounded-value($val);
 }
@@ -162,319 +167,124 @@ $border-styles: (solid, dashed, dotted, double, none);
 
 @mixin pill {
   @include rounded(9999px);
-} // todo: doc missing
+}
 
-// -----------------------------------------------
-// UTILITY CLASSES
-// -----------------------------------------------
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("borders") {
   // Basic border classes (all sides)
-  .border {
+  #{VAR.$parent-selector} .border {
     @include border(1);
   }
 
-  .border-0 {
+  // Common shortcuts for single-side borders
+  #{VAR.$parent-selector} .border-0 {
     @include border(0);
   }
 
-  // All sides border width
-  @each $width in VAR.$border-widths {
-    .border-#{$width} {
-      @include border($width);
-    }
+  #{VAR.$parent-selector} .border-t {
+    @include border-top(1);
+  }
+
+  #{VAR.$parent-selector} .border-r {
+    @include border-right(1);
+  }
+
+  #{VAR.$parent-selector} .border-b {
+    @include border-bottom(1);
+  }
+
+  #{VAR.$parent-selector} .border-l {
+    @include border-left(1);
   }
 
   // Directional border width
   @each $width in VAR.$border-widths {
-    .border-t-#{$width} {
+    #{VAR.$parent-selector} .border-#{$width},
+    #{VAR.$parent-selector} .hover\:border-#{$width}:hover,
+    #{VAR.$parent-selector} .active\:border-#{$width}:active,
+    #{VAR.$parent-selector} .focus\:border-#{$width}:focus,
+    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$width} {
+      @include border($width);
+    }
+    #{VAR.$parent-selector} .border-t-#{$width} {
       @include border-top($width);
     }
-    .border-r-#{$width} {
+    #{VAR.$parent-selector} .border-r-#{$width} {
       @include border-right($width);
     }
-    .border-b-#{$width} {
+    #{VAR.$parent-selector} .border-b-#{$width} {
       @include border-bottom($width);
     }
-    .border-l-#{$width} {
+    #{VAR.$parent-selector} .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 {
+  #{VAR.$parent-selector} .rounded {
     @include rounded;
-  } // Default rounded
-  .square {
+  }
+  #{VAR.$parent-selector} .square {
     @include rounded(0);
   } // Alias for no radius
 
   @each $name, $value in VAR.$border-radii {
-    .rounded-#{$name} {
+    #{VAR.$parent-selector} .rounded-#{$name} {
       @include rounded($value);
     }
-  }
-
-  // Directional border radius
-  @each $name, $value in VAR.$border-radii {
-    .rounded-t-#{$name} {
+    #{VAR.$parent-selector} .rounded-t-#{$name} {
       @include rounded-t($value);
     }
-    .rounded-r-#{$name} {
+    #{VAR.$parent-selector} .rounded-r-#{$name} {
       @include rounded-r($value);
     }
-    .rounded-b-#{$name} {
+    #{VAR.$parent-selector} .rounded-b-#{$name} {
       @include rounded-b($value);
     }
-    .rounded-l-#{$name} {
+    #{VAR.$parent-selector} .rounded-l-#{$name} {
       @include rounded-l($value);
     }
 
     // Individual corners
-    .rounded-tl-#{$name} {
+    #{VAR.$parent-selector} .rounded-tl-#{$name} {
       @include rounded-tl($value);
     }
-    .rounded-tr-#{$name} {
+    #{VAR.$parent-selector} .rounded-tr-#{$name} {
       @include rounded-tr($value);
     }
-    .rounded-br-#{$name} {
+    #{VAR.$parent-selector} .rounded-br-#{$name} {
       @include rounded-br($value);
     }
-    .rounded-bl-#{$name} {
+    #{VAR.$parent-selector} .rounded-bl-#{$name} {
       @include rounded-bl($value);
     }
   }
 
   // Pill shape (alias for full radius)
-  .pill {
+  #{VAR.$parent-selector} .pill {
     @include pill;
   }
 
   // Border styles - these override the default solid style if needed
   @each $style in $border-styles {
-    .border-#{$style} {
+    #{VAR.$parent-selector} .border-#{$style},
+    #{VAR.$parent-selector} .hover\:border-#{$style}:hover,
+    #{VAR.$parent-selector} .active\:border-#{$style}:active,
+    #{VAR.$parent-selector} .focus\:border-#{$style}:focus,
+    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$style} {
       @include border-style($style);
     }
   }
 
-  // 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));
-  }
-
-  .border-danger-dashed {
-    @include border-style(dashed);
-    @include border-color(var(--danger));
-  }
-
-  // -----------------------------------------------
-  // HOVER, ACTIVE, AND FOCUS STATES
-  // -----------------------------------------------
-
-  // Hover state border classes
-  @each $width in VAR.$border-widths {
-    .hover\:border-#{$width}:hover {
-      @include border($width);
-    }
-  }
-
-  @each $style in $border-styles {
-    .hover\:border-#{$style}:hover {
-      @include border-style($style);
+  @each $color-name in VAR.$color-names {
+    #{VAR.$parent-selector} .border-#{$color-name},
+    #{VAR.$parent-selector} .hover\:border-#{$color-name}:hover,
+    #{VAR.$parent-selector} .active\:border-#{$color-name}:active,
+    #{VAR.$parent-selector} .focus\:border-#{$color-name}:focus,
+    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$color-name} {
+      @include border-color(var(--#{$color-name}));
     }
   }
 
-  // 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 VAR.$border-widths {
-    .active\:border-#{$width}:active {
-      @include border($width);
-    }
-  }
-
-  @each $style in $border-styles {
-    .active\:border-#{$style}:active {
-      @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 VAR.$border-widths {
-    .focus\:border-#{$width}:focus {
-      @include border($width);
-    }
-  }
-
-  @each $style in $border-styles {
-    .focus\:border-#{$style}:focus {
-      @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));
-  }
-
   // -----------------------------------------------
   // RESPONSIVE CLASSES
   // -----------------------------------------------
@@ -483,33 +293,33 @@ $border-styles: (solid, dashed, dotted, double, none);
     @media (min-width: #{$width}) {
       // Border width responsive
       @each $val in VAR.$border-widths {
-        .border-#{$val}\@#{$breakpoint} {
+        #{VAR.$parent-selector} .border-#{$val}\@#{$breakpoint} {
           @include border($val);
         }
       }
 
       // Common shortcuts for responsive
-      .border\@#{$breakpoint} {
+      #{VAR.$parent-selector} .border\@#{$breakpoint} {
         @include border(1);
       }
-      .border-0\@#{$breakpoint} {
+      #{VAR.$parent-selector} .border-0\@#{$breakpoint} {
         @include border(0);
       }
 
       // Border radius responsive
       @each $name, $value in VAR.$border-radii {
-        .rounded-#{$name}\@#{$breakpoint} {
+        #{VAR.$parent-selector} .rounded-#{$name}\@#{$breakpoint} {
           @include rounded($value);
         }
       }
 
-      .rounded\@#{$breakpoint} {
+      #{VAR.$parent-selector} .rounded\@#{$breakpoint} {
         @include rounded;
       }
-      .square\@#{$breakpoint} {
+      #{VAR.$parent-selector} .square\@#{$breakpoint} {
         @include rounded(0);
       }
-      .pill\@#{$breakpoint} {
+      #{VAR.$parent-selector} .pill\@#{$breakpoint} {
         @include pill;
       }
     }

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

@@ -3,23 +3,19 @@
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
-/**
- * Container Query Mixins
- *
- * Usage:
- * .container {
- *   container-type: inline-size;
- *   container-name: sidebar;
- * }
- * 
- * .item {
- *   @include container-up('md', 'sidebar') {
- *     // Styles for 'md' and up within 'sidebar' container
- *   }
- * }
- */
+// Container Query Mixins
+// Usage:
+// .container {
+//   container-type: inline-size;
+//   container-name: sidebar;
+// }
+// .item {
+//   @include container-up('md', 'sidebar') {
+//     // Styles for 'md' and up within 'sidebar' container
+//   }
+// }
 
-/// Container Query: Up
+// /Container Query: Up
 @mixin container-up($breakpoint, $containerName: null) {
   $bp-val: FN.get-breakpoint-value($breakpoint);
   @container #{$containerName} (min-width: #{$bp-val}) {
@@ -27,7 +23,7 @@
   }
 }
 
-/// Container Query: Down
+// /Container Query: Down
 @mixin container-down($breakpoint, $containerName: null) {
   $bp-val: FN.get-breakpoint-value($breakpoint);
   @container #{$containerName} (max-width: (#{ $bp-val } - 0.02px)) {
@@ -35,7 +31,7 @@
   }
 }
 
-/// Container Query: Between
+// /Container Query: Between
 @mixin container-between($lower, $upper, $containerName: null) {
   $min: FN.get-breakpoint-value($lower);
   $max: FN.get-breakpoint-value($upper);
@@ -44,7 +40,7 @@
   }
 }
 
-/// Container Query: Only
+// /Container Query: Only
 @mixin container-only($breakpoint, $containerName: null) {
   $min: FN.get-breakpoint-value($breakpoint);
   $next-breakpoint: null;
@@ -66,7 +62,7 @@
   }
 }
 
-/// Container Query: Query by Size
+// /Container Query: Query by Size
 @mixin container-query($size, $containerName: null) {
   @container #{$containerName} (min-width: $size) {
     @content;
@@ -81,7 +77,7 @@
   container-name: $name;
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("container-queries") {
   // Utility classes
   #{VAR.$parent-selector} .container-inline-size {
     container-type: inline-size;

package/src/styles/utilities/_cursor.scss

@@ -1,10 +1,11 @@
 @use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
 @mixin cursor($cursor-value) {
   cursor: #{$cursor-value};
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("cursors") {
   $cursor-values: ("auto", "pointer", "default", "move", "not-allowed", "wait", "help", "text", "cell", "crosshair", "grabbing", "grab", "zoom-in", "zoom-out", "none", "progress", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "context-menu", "all-scroll");
 
   // Generate classes for each cursor value