@nuvoui/core 1.2.1 → 1.2.3

package/src/styles/themes/_theme.scss

@@ -5,88 +5,89 @@
 @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);
+  }
+
+  // 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} {
@@ -94,6 +95,7 @@
       }
 
       // Automatic text contrast for backgrounds
+      // todo: documentaton may add karo issay
       .text-on-#{$color-name}-#{$shade} {
         color: COL.find-text-color($value);
       }
@@ -101,6 +103,9 @@
       .text-#{$color-name}-#{$shade} {
         color: var(--#{$color-name}-#{$shade});
       }
+      .border-#{$color-name}-#{$shade} {
+        border-color: var(--#{$color-name}-#{$shade});
+      }
     }
 
     // Base color classes
@@ -111,9 +116,14 @@
     .text-#{$color-name} {
       color: var(--#{$color-name});
     }
+    
+    .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} {
@@ -127,6 +137,9 @@
       .text-#{$color-name}-#{$shade} {
         color: var(--#{$color-name}-#{$shade});
       }
+      .border-#{$color-name}-#{$shade} {
+        border-color: var(--#{$color-name}-#{$shade});
+      }
     }
 
     // Base color classes
@@ -137,6 +150,10 @@
     .text-#{$color-name} {
       color: var(--#{$color-name});
     }
+    
+    .border-#{$color-name} {
+      border-color: var(--#{$color-name});
+    }
   }
 
   // Semantic color utilities
@@ -217,15 +234,16 @@
 
 // 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%);
+
+  @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%);
+
+  @include COL.backdrop-filter(blur(15px));
 }

package/src/styles/utilities/_alignment.scss

@@ -1,22 +1,22 @@
 @use '../abstracts'  as VAR;
 
-@mixin align-baseline { vertical-align: baseline; }
-@mixin align-top { vertical-align: top; }
-@mixin align-middle { vertical-align: middle; }
-@mixin align-bottom { vertical-align: bottom; }
+@mixin align-baseline { & { vertical-align: baseline; } }
+@mixin align-top { & { vertical-align: top; } }
+@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; }
+  .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

@@ -2,6 +2,7 @@
 
 @use "sass:map";
 @use "../abstracts/functions" as *;
+@use "../abstracts" as VAR;
 
 $generated-keyframes: ();
 
@@ -45,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);
 }
 
@@ -76,9 +75,63 @@ $generated-keyframes: ();
 }
 
 @mixin hover-ready {
-  & {
-    transition-property: color, background-color, border-color, box-shadow, opacity, border-radius;
-    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 {
+  .anim__bounce {
+    @include animate-bounce((
+      vertical: 50%,
+      horizontal: 50%,
+      duration: 1s,
+      timing: ease-in-out,
+      iteration: infinite,
+    ));
+  }
+
+  .anim__bounce-sm {
+    @include animate-bounce((
+      vertical: 25%,
+      horizontal: 25%,
+      duration: 1s,
+      timing: ease-in-out,
+      iteration: infinite,
+    ));
+  }
+
+  .anim__bounce-md {
+    @include animate-bounce((
+      vertical: 50%,
+      horizontal: 50%,
+      duration: 1s,
+      timing: ease-in-out,
+      iteration: infinite,
+    ));
+  }
+
+  .anim__bounce-lg {
+    @include animate-bounce((
+      vertical: 75%,
+      horizontal: 75%,
+      duration: 1s,
+      timing: ease-in-out,
+      iteration: infinite,
+    ));
+  }
+
+  .anim__bounce-xl {
+    @include animate-bounce((
+      vertical: 100%,
+      horizontal: 100%,
+      duration: 1s,
+      timing: ease-in-out,
+      iteration: infinite,
+    ));
+  }
+
+  .hover-ready{
+    @include hover-ready;
   }
 }

package/src/styles/utilities/_borders.scss

@@ -5,24 +5,26 @@
 @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) { 
-  $val: if($val == 0, $val, $val + px); 
-  
+// SKIP Documentation
+@mixin border($val, $style: solid, $color: var(--border)) { 
   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-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;
@@ -31,8 +33,6 @@
 }
 
 @mixin border-right($val) { 
-  $val: if($val == 0, $val, $val + px); 
-  
   border-right-width: $val; 
   @if $val != 0 {
     border-right-style: solid;
@@ -41,8 +41,6 @@
 }
 
 @mixin border-bottom($val) { 
-  $val: if($val == 0, $val, $val + px); 
-  
   border-bottom-width: $val; 
   @if $val != 0 {
     border-bottom-style: solid;
@@ -51,8 +49,6 @@
 }
 
 @mixin border-left($val) { 
-  $val: if($val == 0, $val, $val + px); 
-
   border-left-width: $val; 
   @if $val != 0 {
     border-left-style: solid;
@@ -60,35 +56,62 @@
   }
 }
 
-// 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) { 
+@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) { 
+@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) { 
+@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) { 
+@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; }
@@ -101,6 +124,8 @@
   border-color: $color;
 }
 
+@mixin pill { @include rounded(9999px); } // todo: doc missing
+
 // -----------------------------------------------
 // VARIABLES
 // -----------------------------------------------
@@ -120,9 +145,6 @@ $border-radii: (
   'none': 0
 );
 
-// Common border styles
-$border-styles: (solid, dashed, dotted, double, none);
-
 // -----------------------------------------------
 // UTILITY CLASSES
 // -----------------------------------------------
@@ -173,7 +195,7 @@ $border-styles: (solid, dashed, dotted, double, none);
   }
 
   // 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 {
@@ -288,7 +310,7 @@ $border-styles: (solid, dashed, dotted, double, none);
       
       .rounded\@#{$breakpoint} { @include rounded; }
       .square\@#{$breakpoint} { @include rounded(0); }
-      .pill\@#{$breakpoint} { @include rounded(9999px); }
+      .pill\@#{$breakpoint} { @include pill; }
     }
   }
-}
+}