@nuvoui/core 0.3.1 → 1.1.2

package/src/styles/themes/_theme.scss

@@ -28,7 +28,6 @@ $opacity-levels: (
   @each $name, $color in $colors {
     // Base color
     --#{$name}: #{$color};
-    --#{$name}-rgb: #{color.channel($color, 'red')}, #{color.channel($color, 'green')}, #{color.channel($color, 'blue')};
     
     // Variations
     @each $variant, $percentage in $color-variations {
@@ -98,7 +97,7 @@ $opacity-levels: (
   // Tooltip
   --tooltip-bg: var(--dark);
   --tooltip-text: var(--light);
-  --tooltip-shadow-color: rgba(0,0,0,0.4);
+  --tooltip-shadow-color: rgb(0 0 0 / 40%);
   --microtip-transition-duration: 0.518s;
   --microtip-transition-delay: .2s;
   --microtip-transition-easing: cubic-bezier(0.16, 1, 0.9, 1);

package/src/styles/utilities/_animations.scss

@@ -6,7 +6,7 @@
 $generated-keyframes: ();
 
 
-@mixin generateBounceKeyframes($keyframeName, $x, $y) {
+@mixin generate-bounce-keyframes($keyframeName, $x, $y) {
     @if not list.index($generated-keyframes, $keyframeName) {
         $generated-keyframes: list.append($generated-keyframes, $keyframeName) !global;
         
@@ -14,9 +14,11 @@ $generated-keyframes: ();
             0% {
                 transform: translateX(-#{$x}) translateY(-#{$y});
             }
+
             50% {
                 transform: translateX(#{$x}) translateY(#{$y});
             }
+
             100% {
                 transform: translateX(-#{$x}) translateY(-#{$y});
             }
@@ -32,9 +34,9 @@ $generated-keyframes: ();
         timing: ease-in-out,
         iteration: infinite
     );
+    
     // Merge with defaults
     $props: map.merge($defaults, $props);
-
     $x: map.get($props, 'horizontal');
     $y: map.get($props, 'vertical');
     $duration: map.get($props, 'duration');
@@ -46,16 +48,15 @@ $generated-keyframes: ();
     $y-unit: if($y, safe-unit-name(get-unit($y)), '-');
     
     // Clean values (remove units)
-    $cleanX: if($x, strip-unit($x), 0);
-    $cleanY: if($y, strip-unit($y), 0);
-
-    $animationName: anim-bounce-#{$cleanX}#{$x-unit}-#{$cleanY}#{$y-unit};
+    $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: #{$animationName} $duration $easing $iteration;
+        animation: #{$animation-name} $duration $easing $iteration;
     }
-    @include generateBounceKeyframes($animationName, $x, $y);
+    @include generate-bounce-keyframes($animation-name, $x, $y);
 }
 
 
@@ -71,64 +72,9 @@ $generated-keyframes: ();
     .anim__fade-in-reveal {
         scale: .2;
         opacity: 0.7;
-
         animation: fade-in-reveal linear forwards;
         animation-timeline: view();
-
         animation-range-start: cover;
         animation-range-end: 550px;
-
-        // animation-range: enter;
-        // animation-range: exit;
     }
-}
-
-@keyframes fadeOutAndCollapse {
-    0% {
-        opacity: 1;
-        bottom: 0px;
-        height: auto;
-    }
-    50% {
-        bottom: -500px;
-        opacity: 0;
-    }
-    100% {
-        bottom: 100%;
-        opacity: 0;
-        height: 0;
-        overflow: hidden;
-    }
-}
-
-
-
-
-// @keyframes moveVertical {
-//     0% {
-//       transform: translateY(-5%);
-//     }
-  
-//     50% {
-//       transform: translateY(5%);
-//     }
-  
-//     100% {
-//       transform: translateY(-5%);
-//     }
-//   }
-  
-//   @keyframes moveHorizontal {
-//     0% {
-//       transform: translateX(-50%) translateY(-10%);
-//     }
-  
-//     50% {
-//       transform: translateX(50%) translateY(10%);
-//     }
-  
-//     100% {
-//       transform: translateX(-50%) translateY(-10%);
-//     }
-//   }
-  
+}

package/src/styles/utilities/_borders.scss

@@ -0,0 +1,36 @@
+// _spacing.scss
+
+@use 'sass:math';
+@use './variables' as *;
+
+// todo: mixins mising and also finalize .b .bb or not to .b
+@mixin border($val) { $val: if($val == 0, $val, $val + px); border-width: $val; }
+@mixin rounded($val) { border-radius: $val; }
+
+.border { @include border(1); }
+.border-0 { @include border(0); }
+
+@each $i in 0 1 2 4 8 {
+    .border-#{$i} { @include border($i); }
+}
+
+@each $color-name, $color-value in $colors {
+    .border-#{$color-name} { border-color: $color-value; }
+}
+
+.rounded { @include rounded(0.25rem); }
+.square { @include rounded(0) }
+.pill { @include rounded(9999px); }
+
+// Responsive Position Classes
+@each $breakpoint, $width in $breakpoints {
+    @media (min-width: $width) {
+ 
+        @each $i in 0 1 2 4 8 {
+            .border-#{$i}\@#{$breakpoint} { @include border($i); }
+        }
+        @each $i in 0 2 3 4 5 10 15 20 25 {
+            .rounded-#{$i}\@#{$breakpoint} { @include border($i); }
+        }
+    }
+}

package/src/styles/utilities/_colors.scss

@@ -1,20 +1,23 @@
 @use "sass:math";
 @use 'sass:color';
 @use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
 
 @use './variables' as *;
 
+
+// todo: only functions and may be not needed
+
 @each $color-name, $color-value in $colors {
     .text-#{$color-name} { color: $color-value; }
     .bg-#{$color-name} { background-color: $color-value; }
 }
 
 // Modern Color System 
-// _colors.scss
-
 // Color Validation
 @function is-valid-color($color) {
-    @return type-of($color) == 'color';
+    @return meta.type-of($color) == 'color';
 }
 
 // Modern Color Spaces
@@ -39,22 +42,22 @@
 
 // Color Harmony Generation
 @function complementary($color) {
-    @return adjust-hue($color, 180);
+    @return color.adjust($color, 180);
 }
 
 @function triadic($color) {
     @return (
         $color,
-        adjust-hue($color, 120),
-        adjust-hue($color, 240)
+        color.adjust($color, 120),
+        color.adjust($color, 240)
     );
 }
 
 @function split-complementary($color) {
     @return (
         $color,
-        adjust-hue($color, 150),
-        adjust-hue($color, 210)
+        color.adjust($color, 150),
+        color.adjust($color, 210)
     );
 }
 
@@ -74,7 +77,7 @@
     @for $i from 0 through $steps {
         $lightness: 95 - ($i * (90 / $steps));
         $new-color: color.adjust($lch-color, $lightness: $lightness);
-        $scale: append($scale, $new-color);
+        $scale: list.append($scale, $new-color);
     }
     
     @return $scale;
@@ -88,13 +91,13 @@
 
 // Luminance Calculation
 @function luminance($color) {
-    $r: red($color) / 255;
-    $g: green($color) / 255;
-    $b: blue($color) / 255;
+    $r: color.red($color) / 255;
+    $g: color.green($color) / 255;
+    $b: color.blue($color) / 255;
     
-    $r: if($r <= 0.03928, $r / 12.92, pow(($r + 0.055) / 1.055, 2.4));
-    $g: if($g <= 0.03928, $g / 12.92, pow(($g + 0.055) / 1.055, 2.4));
-    $b: if($b <= 0.03928, $b / 12.92, pow(($b + 0.055) / 1.055, 2.4));
+    $r: if($r <= 0.0393, $r / 12.92, pow(($r + 0.055) / 1.055, 2.4));
+    $g: if($g <= 0.0393, $g / 12.92, pow(($g + 0.055) / 1.055, 2.4));
+    $b: if($b <= 0.0393, $b / 12.92, pow(($b + 0.055) / 1.055, 2.4));
     
     @return $r * 0.2126 + $g * 0.7152 + $b * 0.0722;
 }
@@ -119,28 +122,29 @@
     
     @media (prefers-contrast: more) {
         $high-contrast: adjust-contrast($background, 20%);
+        
         background: $high-contrast;
     }
 }
 
 // Filter Mixins
 @mixin backdrop-filter($value) {
-    -webkit-backdrop-filter: $value;
     backdrop-filter: $value;
 }
 
 @mixin filter($value) {
-    -webkit-filter: $value;
     filter: $value;
 }
 
 // Glass Effect Utilities
 .glass-effect {
     @include backdrop-filter(blur(10px));
-    background-color: rgba(255, 255, 255, 0.1);
+
+    background-color: rgb(255 255 255 / 10%);
 }
 
 .frosted-glass {
     @include backdrop-filter(blur(5px) saturate(180%));
-    background-color: rgba(255, 255, 255, 0.8);
+    
+    background-color: rgb(255 255 255 / 80%);
 }

package/src/styles/utilities/_display.scss

@@ -1,29 +1,26 @@
-@use "sass:math";
-@use 'sass:color';
-@use 'sass:map';
 
 @use './variables' as *;
-
-
+@use './functions' as *;
 
 // Display Mixins
 @mixin d-none { display: none; }
 @mixin d-block { display: block; }
 @mixin d-inline { display: inline; }
 @mixin d-inline-block { display: inline-block; }
-@mixin d-table { display: table; }
-@mixin d-table-row { display: table-row; }
-@mixin d-table-cell { display: table-cell; }
+@mixin d-tbl { display: table; }
+@mixin d-tbl-row { display: table-row; }
+@mixin d-tbl-cell { display: table-cell; }
 
-// Base Classes
+// Base Classes 
 .hide { @include d-none; }
 .block { @include d-block; }
 .inline { @include d-inline; }
 .inline-block { @include d-inline-block; }
+
 .d {
-  &-table { @include d-table; }
-  &-table-row { @include d-table-row; }
-  &-table-cell { @include d-table-cell; }
+  &-tbl { @include d-tbl; }
+  &-tbl-row { @include d-tbl-row; }
+  &-tbl-cell { @include d-tbl-cell; }
 }
 
 // Responsive Variants
@@ -33,10 +30,11 @@
     .block\@#{$breakpoint} { @include d-block; }
     .inline\@#{$breakpoint} { @include d-inline; }
     .inline-block\@#{$breakpoint} { @include d-inline-block; }
+    
     .d {
-      &-table\@#{$breakpoint} { @include d-table; }
-      &-table-row\@#{$breakpoint} { @include d-table-row; }
-      &-table-cell\@#{$breakpoint} { @include d-table-cell; }
+      &-tbl\@#{$breakpoint} { @include d-tbl; }
+      &-tbl-row\@#{$breakpoint} { @include d-tbl-row; }
+      &-tbl-cell\@#{$breakpoint} { @include d-tbl-cell; }
     }
   }
 }

package/src/styles/utilities/{_responsive.scss → _media-queries.scss}

@@ -29,8 +29,7 @@
 
 @mixin media-between($lower, $upper) {
   @if map.has-key($breakpoints, $lower) and map.has-key($breakpoints, $upper) {
-    @media screen and (min-width: map.get($breakpoints, $lower)) and 
-           (max-width: (map.get($breakpoints, $upper) - 0.02px)) {
+    @media screen and (min-width: map.get($breakpoints, $lower)) and (max-width: (map.get($breakpoints, $upper) - 0.02px)) {
       @content;
     }
   }
@@ -43,13 +42,13 @@
     $next-breakpoint: null;
     
     @each $name, $width in $breakpoints {
-      @if $width > $min and ($next-breakpoint == null or $width < $next-breakpoint) {
+      @if $width > $min and (meta.type-of($next-breakpoint) == 'null' or $width < $next-breakpoint) {
         $next-breakpoint: $width;
       }
     }
     
     @if $next-breakpoint {
-      @media (min-width: $min) and (max-width: $next-breakpoint - 1) {
+      @media (min-width: $min) and (max-width: ($next-breakpoint - 1)) {
         @content;
       }
     } @else {
@@ -81,13 +80,6 @@
   }
 }
 
-// Retina displays
-@mixin retina {
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-    @content;
-  }
-}
-
 // Modern feature detection
 // Example: @include supports(display: grid) { }
 @mixin supports($property) {
@@ -96,21 +88,11 @@
   }
 }
 
-// Reduced motion preference
-@mixin reduced-motion {
-  @media (prefers-reduced-motion: reduce) {
-    @content;
-  }
-}
 
-// High contrast mode
-@mixin high-contrast {
-  @media (forced-colors: active) {
-    @content;
-  }
-}
 
-// Dark mode
+
+// Mixin: Dark Mode
+// Applies styles when the user prefers a dark color scheme.
 @mixin dark-mode {
   @media (prefers-color-scheme: dark) {
     @content;
@@ -130,32 +112,9 @@
   }
 }
 
-// Modern hover capabilities
-@mixin hover-device {
-  @media (hover: hover) and (pointer: fine) {
-    @content;
-  }
-}
-
 // Modern aspect ratio
 @mixin aspect-ratio($ratio) {
-  @supports (aspect-ratio: #{$ratio}) {
-    aspect-ratio: #{$ratio};
-  }
-  
-  @supports not (aspect-ratio: #{$ratio}) {
-    &::before {
-      float: left;
-      padding-top: percentage(1 / $ratio);
-      content: '';
-    }
-    
-    &::after {
-      display: block;
-      content: '';
-      clear: both;
-    }
-  }
+  aspect-ratio: #{$ratio};
 }
 
 // Dynamic viewport units (modern browsers)
@@ -174,11 +133,15 @@
   #{$property}: env(safe-area-inset-#{$position});
 }
 
-// Color scheme transition
-@mixin color-scheme-transition {
-  @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 0.3s ease, color 0.3s ease;
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
   }
 }
 
-
+// High contrast mode
+@mixin high-contrast {
+  @media (forced-colors: active) {
+    @content;
+  }
+}

package/src/styles/utilities/_opacity.scss

@@ -0,0 +1,20 @@
+// _spacing.scss
+
+@use 'sass:math';
+@use './variables' as *;
+
+// Opacity Utilities
+@each $i in $percentages {
+  .opacity-#{$i} { opacity: math.div($i, 100); }
+  .hover\:opacity-#{$i}:hover { opacity: math.div($i, 100); }
+}
+
+// Responsive Variants for Opacity
+@each $breakpoint, $width in $breakpoints {
+  @media (min-width: $width) {
+    @each $i in $percentages {
+      .opacity-#{$i}\@#{$breakpoint} { opacity: math.div($i, 100); }
+      .hover\:opacity-#{$i}\@#{$breakpoint}:hover { opacity: math.div($i, 100); }
+    }
+  }
+}

package/src/styles/utilities/_position.scss

@@ -1,63 +1,66 @@
 @use './variables' as *;
+
 // Position Mixins
-@mixin p-static {
+@mixin static {
   position: static;
 }
 
-@mixin p-relative {
+@mixin relative {
   position: relative;
 }
 
-@mixin p-absolute {
+@mixin absolute {
   position: absolute;
 }
 
-@mixin p-fixed {
+@mixin fixed {
   position: fixed;
-}
-
-@mixin p-sticky {
+} 
+ 
+@mixin sticky {
   position: sticky;
-}
+  z-index: 999;
+  top: 0;
+} 
 
 // Position Classes
-.p-static {
-  @include p-static;
+.static {
+  @include static;
 }
 
-.p-relative {
-  @include p-relative;
+.relative {
+  @include relative;
 }
 
-.p-absolute {
-  @include p-absolute;
+.absolute {
+  @include absolute;
 }
 
-.p-fixed {
-  @include p-fixed;
+.fixed {
+  @include fixed;
 }
 
-.p-sticky {
-  @include p-sticky;
+.sticky {
+  @include sticky;
 }
 
 // Responsive Position Classes
 @each $breakpoint, $width in $breakpoints {
   @media (min-width: $width) {
-    .p-static\@#{$breakpoint} {
-      @include p-static;
+    .static\@#{$breakpoint} {
+      @include static;
     }
-    .p-relative\@#{$breakpoint} {
-      @include p-relative;
+    .relative\@#{$breakpoint} {
+      @include relative;
     }
-    .p-absolute\@#{$breakpoint} {
-      @include p-absolute;
+    .absolute\@#{$breakpoint} {
+      @include absolute;
     }
-    .p-fixed\@#{$breakpoint} {
-      @include p-fixed;
+    .fixed\@#{$breakpoint} {
+      @include fixed;
     }
-    .p-sticky\@#{$breakpoint} {
-      @include p-sticky;
+    .sticky\@#{$breakpoint} {
+      @include sticky;
     }
   }
 }
@@ -81,17 +84,23 @@
 }
 
 // Top, Right, Bottom, Left Classes
-@for $i from 0 through 100{
-  .top-#{$i} {
-    @include top($i);
-  }
-  .right-#{$i} {
-    @include right($i);
-  }
-  .bottom-#{$i} {
-    @include bottom($i);
-  }
-  .left-#{$i} {
-    @include left($i);
+@each $i in $spacings {
+  .top-#{$i} {@include top($i);}
+  .right-#{$i} {@include right($i);}
+  .bottom-#{$i} {@include bottom($i);}
+  .left-#{$i} {@include left($i);}
+}
+
+
+// Pixel widths based on spacing scale
+@each $breakpoint, $width in $breakpoints {
+  @media (min-width: $width) {
+      // Generate utilities from spacing map
+      @each $i in $spacings {
+          .top-#{$i}\@#{$breakpoint} {height: if($i == 0, $i, $i + px);}
+          .right-#{$i}\@#{$breakpoint} {width: if($i == 0, $i, $i + px);}
+          .bottom-#{$i}\@#{$breakpoint} {min-width: if($i == 0, $i, $i + px);}
+          .left-#{$i}\@#{$breakpoint} {min-height: if($i == 0, $i, $i + px);}
+      }
   }
 }

package/src/styles/utilities/_shadows.scss

@@ -7,10 +7,10 @@
 
 // Shadow Variables
 $shadow-colors: (
-  'default': rgba(0, 0, 0, 0.1),
-  'dark': rgba(0, 0, 0, 0.2),
-  'darker': rgba(0, 0, 0, 0.35),
-  'darkest': rgba(0, 0, 0, 0.5),
+  'default': rgb(0 0 0 / 10%),
+  'dark': rgb(0 0 0 / 20%),
+  'darker': rgb(0 0 0 / 35%),
+  'darkest': rgb(0 0 0 / 50%),
 );
 
 $shadow-sizes: (
@@ -60,7 +60,6 @@ $shadow-sizes: (
 
 @mixin shadow($size: 'md', $color: 'default') {
   $shadow: map.get($shadow-sizes, $size);
-
   $shadow-color: map.get($shadow-colors, $color);
   @include shadow-base(
     map.get($shadow, 'x'),