@nuvoui/core 1.2.0 → 1.2.2

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});
+      }
     }
   }
 }
@@ -217,13 +219,13 @@
 .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%); 
 }
 
 .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%); 
 }

package/src/styles/utilities/_alignment.scss

@@ -1,20 +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; }
 
-@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: ();
 
@@ -77,8 +78,64 @@ $generated-keyframes: ();
 
 @mixin hover-ready {
   & {
-    transition-property: color, background-color, border-color, box-shadow, opacity, border-radius;
+    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;
+  }
+}