@nuvoui/core 1.2.2 → 1.2.4

package/src/styles/themes/_theme.scss

@@ -5,137 +5,182 @@
 @use "../abstracts" as *;
 
 @if $generate-utility-classes {
-:root {
-  // Theme color CSS variables
-  @each $color-name, $scale in COL.$colors {
-    --#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
-    @each $shade, $value in $scale {
-      --#{$color-name}-#{$shade}: #{color.adjust($value, $alpha: 1)};
+  :root {
+    // Theme color CSS variables
+    @each $color-name, $scale in COL.$colors {
+      --#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
+      @each $shade, $value in $scale {
+        --#{$color-name}-#{$shade}: #{color.adjust($value, $alpha: 1)};
+      }
     }
-  }
 
-  // Primitive color CSS variables
-  @each $color-name, $scale in COL.$colors-primitives {
-    --#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
-    @each $shade, $value in $scale {
-      --#{$color-name}-#{$shade}: #{color.adjust($value, $alpha: 1)};
+    // Primitive color CSS variables
+    @each $color-name, $scale in COL.$colors-primitives {
+      --#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
+      @each $shade, $value in $scale {
+        --#{$color-name}-#{$shade}: #{color.adjust($value, $alpha: 1)};
+      }
     }
-  }
-
-  // Light theme variables
-  --background: #{map.get($light-theme, "background")};
-  --foreground: #{map.get($light-theme, "foreground")};
-  --surface: #{map.get($light-theme, "surface")};
-  --border: var(--gray-600);
-  --text-primary: var(--gray-900);
-  --text-secondary: var(--gray-600);
-  --button-bg-color: var(--primary);
-  --button-bg-color-hover: var(--primary-600);
-  --button-text-color: var(--gray-100);
-  --link-color: var(--primary);
-  --link-hover-color: var(--primary-600);
-  --inverted-text-color: var(--gray-100);
-
-  // Scrollbar styling
-  &::-webkit-scrollbar {
-    width: 12px;
-  }
 
-  &::-webkit-scrollbar-track {
-    background: var(--background);
-  }
+    // Light theme variables
+    --background: #{map.get($light-theme, "background")};
+    --foreground: #{map.get($light-theme, "foreground")};
+    --surface: #{map.get($light-theme, "surface")};
+    --border: var(--gray-600);
+    --text-primary: var(--gray-900);
+    --text-secondary: var(--gray-600);
+    --button-bg-color: var(--primary);
+    --button-bg-color-hover: var(--primary-600);
+    --button-text-color: var(--gray-100);
+    --link-color: var(--primary);
+    --link-hover-color: var(--primary-600);
+    --inverted-text-color: var(--gray-100);
+
+    // Scrollbar styling
+    &::-webkit-scrollbar {
+      width: 12px;
+    }
 
-  &::-webkit-scrollbar-thumb {
-    background-color: #888;
-    border-radius: 6px;
-    border: 3px solid var(--background);
-  }
+    &::-webkit-scrollbar-track {
+      background: var(--background);
+    }
 
-  scrollbar-width: thin;
-  scrollbar-color: #888 var(--background);
-}
+    &::-webkit-scrollbar-thumb {
+      background-color: #888;
+      border-radius: 6px;
+      border: 3px solid var(--background);
+    }
 
-// Dark theme settings
-[data-theme="dark"] {
-  --background: #{map.get($dark-theme, "background")};
-  --foreground: #{map.get($dark-theme, "foreground")};
-  --surface: #{map.get($dark-theme, "surface")};
-  --border: var(--gray-400);
-  --text-primary: var(--gray-100);
-  --text-secondary: var(--gray-400);
-  --button-bg-color: var(--primary);
-  --button-bg-color-hover: var(--primary-400);
-  --button-text-color: var(--gray-200);
-  --link-color: var(--primary);
-  --link-hover-color: var(--primary-400);
-  --inverted-text-color: var(--gray-900);
+    scrollbar-width: thin;
+    scrollbar-color: #888 var(--background);
+  }
+  
+  @if $enable-dark-mode {
+    // Dark theme settings
+    [data-theme="dark"] {
+      --background: #{map.get($dark-theme, "background")};
+      --foreground: #{map.get($dark-theme, "foreground")};
+      --surface: #{map.get($dark-theme, "surface")};
+      --border: var(--gray-400);
+      --text-primary: var(--gray-100);
+      --text-secondary: var(--gray-400);
+      --button-bg-color: var(--primary);
+      --button-bg-color-hover: var(--primary-400);
+      --button-text-color: var(--gray-200);
+      --link-color: var(--primary);
+      --link-hover-color: var(--primary-400);
+      --inverted-text-color: var(--gray-900);
+
+      &::-webkit-scrollbar-track {
+        background: var(--background);
+      }
 
-  &::-webkit-scrollbar-track {
-    background: var(--background);
-  }
+      &::-webkit-scrollbar-thumb {
+        background-color: #555;
+        border: 3px solid var(--background);
+      }
 
-  &::-webkit-scrollbar-thumb {
-    background-color: #555;
-    border: 3px solid var(--background);
+      scrollbar-color: #555 var(--background);
+    }
   }
 
-  scrollbar-color: #555 var(--background);
-}
-
-// -----------------------------------------------
-// COLOR UTILITY CLASSES
-// -----------------------------------------------
+  // -----------------------------------------------
+  // COLOR UTILITY CLASSES
+  // -----------------------------------------------
 
   // Theme color background utilities
+  // primar, secondry, warning etc.
   @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
+      // todo: documentaton may add karo issay
       .text-on-#{$color-name}-#{$shade} {
         color: COL.find-text-color($value);
       }
 
-      .text-#{$color-name}-#{$shade} {
+      .text-#{$color-name}-#{$shade},
+      .hover\:text--#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      .group:hover .group-hover\:text--#{$color-name}-#{$shade} {
         color: var(--#{$color-name}-#{$shade});
       }
+
+      .bg-#{$color-name}-#{$shade},
+      .hover\:bg-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      .group:hover .group-hover\:bg-#{$color-name}-#{$shade} {
+        background-color: var(--#{$color-name}-#{$shade});
+      }
+
+      .border-#{$color-name}-#{$shade},
+      .hover\:border-#{$color-name}-#{$shade}:hover,
+      .group:hover .group-hover\:border-#{$color-name}-#{$shade} {
+        border-color: var(--#{$color-name}-#{$shade});
+      }
     }
 
     // Base color classes
-    .bg-#{$color-name} {
+    .text-#{$color-name},
+    .hover\:text--#{$color-name}:hover, // todo: improve these loops to save time
+    .group:hover .group-hover\:text--#{$color-name} {
+      color: var(--#{$color-name});
+    }
+
+    .bg-#{$color-name},
+    .hover\:bg-#{$color-name}:hover, // todo: improve these loops to save time
+    .group:hover .group-hover\:bg-#{$color-name} {
       background-color: var(--#{$color-name});
     }
 
-    .text-#{$color-name} {
-      color: var(--#{$color-name});
+    .border-#{$color-name},
+    .hover\:border-#{$color-name}:hover,
+    .group:hover .group-hover\:border-#{$color-name} {
+      border-color: var(--#{$color-name});
     }
   }
 
   // Primitive color utilities
+  // green, purple, pink etc. 
   @each $color-name, $scale in COL.$colors-primitives {
     @each $shade, $value in $scale {
-      .bg-#{$color-name}-#{$shade} {
-        background-color: var(--#{$color-name}-#{$shade});
-      }
-
       .text-on-#{$color-name}-#{$shade} {
         color: COL.find-text-color($value);
       }
 
-      .text-#{$color-name}-#{$shade} {
+      .text-#{$color-name}-#{$shade},
+      .hover\:text--#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      .group:hover .group-hover\:text--#{$color-name}-#{$shade} {
         color: var(--#{$color-name}-#{$shade});
       }
+
+      .bg-#{$color-name}-#{$shade},
+      .hover\:bg-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      .group:hover .group-hover\:bg-#{$color-name}-#{$shade} {
+        background-color: var(--#{$color-name}-#{$shade});
+      }
+
+      .border-#{$color-name}-#{$shade},
+      .hover\:border-#{$color-name}-#{$shade}:hover,
+      .group:hover .group-hover\:border-#{$color-name}-#{$shade} {
+        border-color: var(--#{$color-name}-#{$shade});
+      }
     }
 
     // Base color classes
-    .bg-#{$color-name} {
+    .text-#{$color-name},
+    .hover\:text--#{$color-name}:hover, // todo: improve these loops to save time
+    .group:hover .group-hover\:text--#{$color-name} {
+      color: var(--#{$color-name});
+    }
+
+    .bg-#{$color-name},
+    .hover\:bg-#{$color-name}:hover, // todo: improve these loops to save time
+    .group:hover .group-hover\:bg-#{$color-name} {
       background-color: var(--#{$color-name});
     }
 
-    .text-#{$color-name} {
-      color: var(--#{$color-name});
+    .border-#{$color-name},
+    .hover\:border-#{$color-name}:hover,
+    .group:hover .group-hover\:border-#{$color-name} {
+      border-color: var(--#{$color-name});
     }
   }
 
@@ -156,6 +201,14 @@
     background-color: var(--button-bg-color-hover);
   }
 
+  .bg-white {
+    background-color: white;
+  }
+
+  .bg-black {
+    background-color: black;
+  }
+
   .text-default {
     color: var(--text-primary);
   }
@@ -173,14 +226,6 @@
     color: var(--inverted-text-color);
   }
 
-  .bg-white {
-    background-color: white;
-  }
-
-  .bg-black {
-    background-color: black;
-  }
-
   .text-white {
     color: white;
   }
@@ -188,44 +233,19 @@
   .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\: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});
-      }
-
-      .hover\:text-#{$color-name}-#{$shade}:hover {
-        color: var(--#{$color-name}-#{$shade});
-      }
-    }
-  }
 }
 
 // Glass effects
 .glass-effect {
-  @include COL.backdrop-filter(blur(8px));
+  background-color: rgb(255 255 255 / 10%);
+  border: 1px solid rgb(255 255 255 / 20%);
 
-  background-color: rgb(255 255 255 / 10%); 
-  border: 1px solid rgb(255 255 255 / 20%); 
+  @include COL.backdrop-filter(blur(8px));
 }
 
 .frosted-glass {
-  @include COL.backdrop-filter(blur(15px));
+  background-color: rgb(255 255 255 / 70%);
+  border: 1px solid rgb(255 255 255 / 80%);
 
-  background-color: rgb(255 255 255 / 70%); 
-  border: 1px solid rgb(255 255 255 / 80%); 
+  @include COL.backdrop-filter(blur(15px));
 }

package/src/styles/utilities/_alignment.scss

@@ -6,17 +6,17 @@
 @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; }
+  .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/_animations.scss

@@ -46,15 +46,13 @@ $generated-keyframes: ();
   // Handle units
   $x-unit: if($x, safe-unit-name(get-unit($x)), "-");
   $y-unit: if($y, safe-unit-name(get-unit($y)), "-");
-
+ 
   // Clean values (remove units)
   $clean-x: if($x, strip-unit($x), 0);
   $clean-y: if($y, strip-unit($y), 0);
   $animation-name: anim-bounce-#{$clean-x}#{$x-unit}-#{$clean-y}#{$y-unit};
 
-  & {
-    animation: #{$animation-name} $duration $easing $iteration;
-  }
+  animation: #{$animation-name} $duration $easing $iteration;
   @include generate-bounce-keyframes($animation-name, $x, $y);
 }
 
@@ -77,11 +75,9 @@ $generated-keyframes: ();
 }
 
 @mixin hover-ready {
-  & {
-    transition-property: all;
-    transition-duration: 0.2s;
-    transition-timing-function: ease-in-out; 
-  }
+  transition-property: all;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out; 
 }
 
 @if VAR.$generate-utility-classes {

package/src/styles/utilities/_borders.scss

@@ -17,118 +17,115 @@ $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: if($val == 0, $val, $val + px); 
- 
-  & {
-    border-width: $val; 
-    @if $val != 0 {
-        border-style: $style;
-        border-color: $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; }
+
+ /**
+ * @description Applies border radius to all corners
+ * @param {String} $val - The border radius value
+ */
+@mixin rounded($val: null) {
+  border-radius: if($val == null, map.get($border-radii, 'md'), $val);
 }
 
-@mixin rounded-t($val) { 
-  & {
-    border-top-left-radius: $val;
-    border-top-right-radius: $val;
-  }
+@mixin rounded-t($val: null) { 
+  $val: if($val == null, map.get($border-radii, 'md'), $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;
-  }
+@mixin rounded-r($val: null) { 
+  $val: if($val == null, map.get($border-radii, 'md'), $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;
-  }
+@mixin rounded-b($val: null) { 
+  $val: if($val == null, map.get($border-radii, 'md'), $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;
-  }
+@mixin rounded-l($val: null) { 
+  $val: if($val == null, map.get($border-radii, 'md'), $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: null) { 
+  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  
+  border-top-left-radius: $val; 
+}
+@mixin rounded-tr($val: null) { 
+  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  
+  border-top-right-radius: $val; 
+}
+@mixin rounded-br($val: null) { 
+  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  
+  border-bottom-right-radius: $val; 
+}
+@mixin rounded-bl($val: null) { 
+  $val: if($val == null, map.get($border-radii, 'md'), $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) {
-  @debug "border: #{$width} #{$style} #{$color}";
-
-  & {
-    border-width: $width;
-    border-style: $style;
-    border-color: $color;
-  }
+  border-width: $width;
+  border-style: $style;
+  border-color: $color;
 }
 
+@mixin pill { @include rounded(9999px); } // todo: doc missing
+
 // -----------------------------------------------
 // VARIABLES
 // -----------------------------------------------
@@ -198,7 +195,7 @@ $border-radii: (
   }
 
   // Pill shape (alias for full radius)
-  .pill { @include rounded(9999px); }
+  .pill { @include pill; }
 
   // Border styles - these override the default solid style if needed
   @each $style in $border-styles {
@@ -313,7 +310,7 @@ $border-radii: (
       
       .rounded\@#{$breakpoint} { @include rounded; }
       .square\@#{$breakpoint} { @include rounded(0); }
-      .pill\@#{$breakpoint} { @include rounded(9999px); }
+      .pill\@#{$breakpoint} { @include pill; }
     }
   }
 }