@nuvoui/core 1.2.0 → 1.2.1

package/src/styles/themes/_theme.scss

@@ -4,6 +4,7 @@
 @use "../utilities/colors" as COL;
 @use "../abstracts" as *;
 
+@if $generate-utility-classes {
 :root {
   // Theme color CSS variables
   @each $color-name, $scale in COL.$colors {
@@ -85,130 +86,131 @@
 // COLOR UTILITY CLASSES
 // -----------------------------------------------
 
-// Theme color background utilities
-@each $color-name, $scale in COL.$colors {
-  @each $shade, $value in $scale {
-    .bg-#{$color-name}-#{$shade} {
-      background-color: var(--#{$color-name}-#{$shade});
+  // Theme color background utilities
+  @each $color-name, $scale in COL.$colors {
+    @each $shade, $value in $scale {
+      .bg-#{$color-name}-#{$shade} {
+        background-color: var(--#{$color-name}-#{$shade});
+      }
+
+      // Automatic text contrast for backgrounds
+      .text-on-#{$color-name}-#{$shade} {
+        color: COL.find-text-color($value);
+      }
+
+      .text-#{$color-name}-#{$shade} {
+        color: var(--#{$color-name}-#{$shade});
+      }
     }
 
-    // Automatic text contrast for backgrounds
-    .text-on-#{$color-name}-#{$shade} {
-      color: COL.find-text-color($value);
+    // Base color classes
+    .bg-#{$color-name} {
+      background-color: var(--#{$color-name});
     }
 
-    .text-#{$color-name}-#{$shade} {
-      color: var(--#{$color-name}-#{$shade});
+    .text-#{$color-name} {
+      color: var(--#{$color-name});
     }
   }
 
-  // Base color classes
-  .bg-#{$color-name} {
-    background-color: var(--#{$color-name});
-  }
+  // Primitive color utilities
+  @each $color-name, $scale in COL.$colors-primitives {
+    @each $shade, $value in $scale {
+      .bg-#{$color-name}-#{$shade} {
+        background-color: var(--#{$color-name}-#{$shade});
+      }
 
-  .text-#{$color-name} {
-    color: var(--#{$color-name});
-  }
-}
+      .text-on-#{$color-name}-#{$shade} {
+        color: COL.find-text-color($value);
+      }
 
-// Primitive color utilities
-@each $color-name, $scale in COL.$colors-primitives {
-  @each $shade, $value in $scale {
-    .bg-#{$color-name}-#{$shade} {
-      background-color: var(--#{$color-name}-#{$shade});
+      .text-#{$color-name}-#{$shade} {
+        color: var(--#{$color-name}-#{$shade});
+      }
     }
 
-    .text-on-#{$color-name}-#{$shade} {
-      color: COL.find-text-color($value);
+    // Base color classes
+    .bg-#{$color-name} {
+      background-color: var(--#{$color-name});
     }
 
-    .text-#{$color-name}-#{$shade} {
-      color: var(--#{$color-name}-#{$shade});
+    .text-#{$color-name} {
+      color: var(--#{$color-name});
     }
   }
 
-  // Base color classes
-  .bg-#{$color-name} {
-    background-color: var(--#{$color-name});
+  // Semantic color utilities
+  .bg-page {
+    background-color: var(--background);
   }
 
-  .text-#{$color-name} {
-    color: var(--#{$color-name});
+  .bg-card {
+    background-color: var(--surface);
   }
-}
-
-// Semantic color utilities
-.bg-page {
-  background-color: var(--background);
-}
 
-.bg-card {
-  background-color: var(--surface);
-}
-
-.bg-active {
-  background-color: var(--button-bg-color);
-}
+  .bg-active {
+    background-color: var(--button-bg-color);
+  }
 
-.bg-hover {
-  background-color: var(--button-bg-color-hover);
-}
+  .bg-hover {
+    background-color: var(--button-bg-color-hover);
+  }
 
-.text-default {
-  color: var(--text-primary);
-}
+  .text-default {
+    color: var(--text-primary);
+  }
 
-.text-muted {
-  color: var(--text-secondary);
-}
+  .text-muted {
+    color: var(--text-secondary);
+  }
 
-.text-subtle {
-  color: var(--text-secondary);
-  opacity: 0.7;
-}
+  .text-subtle {
+    color: var(--text-secondary);
+    opacity: 0.7;
+  }
 
-.text-inverted {
-  color: var(--inverted-text-color);
-}
+  .text-inverted {
+    color: var(--inverted-text-color);
+  }
 
-.bg-white {
-  background-color: white;
-}
+  .bg-white {
+    background-color: white;
+  }
 
-.bg-black {
-  background-color: black;
-}
+  .bg-black {
+    background-color: black;
+  }
 
-.text-white {
-  color: white;
-}
+  .text-white {
+    color: white;
+  }
 
-.text-black {
-  color: black;
-}
+  .text-black {
+    color: black;
+  }
 
-// Hover utilities
-@each $color-name, $scale in COL.$colors {
-  @each $shade, $value in $scale {
-    .hover\:bg-#{$color-name}-#{$shade}:hover {
-      background-color: var(--#{$color-name}-#{$shade});
-    }
+  // Hover utilities
+  @each $color-name, $scale in COL.$colors {
+    @each $shade, $value in $scale {
+      .hover\:bg-#{$color-name}-#{$shade}:hover {
+        background-color: var(--#{$color-name}-#{$shade});
+      }
 
-    .hover\:text-#{$color-name}-#{$shade}:hover {
-      color: var(--#{$color-name}-#{$shade});
+      .hover\:text-#{$color-name}-#{$shade}:hover {
+        color: var(--#{$color-name}-#{$shade});
+      }
     }
   }
-}
 
-@each $color-name, $scale in COL.$colors-primitives {
-  @each $shade, $value in $scale {
-    .hover\:bg-#{$color-name}-#{$shade}:hover {
-      background-color: var(--#{$color-name}-#{$shade});
-    }
+  @each $color-name, $scale in COL.$colors-primitives {
+    @each $shade, $value in $scale {
+      .hover\:bg-#{$color-name}-#{$shade}:hover {
+        background-color: var(--#{$color-name}-#{$shade});
+      }
 
-    .hover\:text-#{$color-name}-#{$shade}:hover {
-      color: var(--#{$color-name}-#{$shade});
+      .hover\:text-#{$color-name}-#{$shade}:hover {
+        color: var(--#{$color-name}-#{$shade});
+      }
     }
   }
 }

package/src/styles/utilities/_alignment.scss

@@ -5,16 +5,18 @@
 @mixin align-middle { vertical-align: middle; }
 @mixin align-bottom { vertical-align: bottom; }
 
+@if VAR.$generate-utility-classes {
 .align-baseline { @include align-baseline; }
 .align-top { @include align-top; }
 .align-middle { @include align-middle; }
 .align-bottom { @include align-bottom; }
 
-@each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-        .align-baseline\@#{$breakpoint} { @include align-baseline; }
-        .align-top\@#{$breakpoint} { @include align-top; }
-        .align-middle\@#{$breakpoint} { @include align-middle; }
-        .align-bottom\@#{$breakpoint} { @include align-bottom; }
+    @each $breakpoint, $width in VAR.$breakpoints {
+        @media (min-width: #{$width}) {
+            .align-baseline\@#{$breakpoint} { @include align-baseline; }
+            .align-top\@#{$breakpoint} { @include align-top; }
+            .align-middle\@#{$breakpoint} { @include align-middle; }
+            .align-bottom\@#{$breakpoint} { @include align-bottom; }
+        }
     }
 }

package/src/styles/utilities/_borders.scss

@@ -126,168 +126,169 @@ $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); }
+  // 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); }
+  }
 
-// Border radius classes
-.rounded { @include rounded; } // Default rounded
-.square { @include rounded(0); } // Alias for no radius
+  // 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); }
 
-@each $name, $value in $border-radii {
-  .rounded-#{$name} { @include rounded($value); }
-}
-
-// 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/_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;
+    }
   }
-}
+}