@nuvoui/core 0.3.1 → 1.0.1

package/src/styles/components/_navbar.scss

@@ -1,6 +1,6 @@
 // _navbar.scss
 
-@use '../utilities/responsive' as Responsive;
+@use '../utilities/media-queries' as Responsive;
 @use '../utilities/shadows' as *;
 @use '../utilities/variables' as *;
 @use '../layouts/container' as Container;
@@ -8,134 +8,130 @@
 
 .navbar {
     @include Container.container-flex;
+    @include Flex.align-center;
+    @include Flex.between;
 
-    & {
-        @include Flex.align-center;
-        @include Flex.between;
+    &:hover {
+        @include shadow('lg', 'dark');
+    }
 
-        &:hover {
-            @include shadow('lg', 'dark');
-        }
+    background-color: var(--nav-bg);
 
-        background-color: var(--nav-bg);
+    .logo {
+        img {
+            max-height: 40px;
+            width: auto;
+        }
+    }
 
-        .logo {
-            img {
-                max-height: 40px;
-                width: auto;
+    .submenu {
+        background-color: white;
+        display: block;
+        visibility: hidden; // Use visibility instead of display
+        pointer-events: none; // Prevents interaction when hidden
+        opacity: 0;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        min-width: 200px;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        box-shadow: 0 2px 5px rgba(0 0 0 / 10%);
+
+        // Animation
+        transition:
+            opacity 0.2s ease-in-out,
+            visibility 0.2s ease-in-out;
+
+        li {
+            a {
+                padding: 0.75rem 1rem;
             }
         }
 
-        .menu {
-            @include Flex.flex;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-
-            li {
-                position: relative;
-
-                a {
-                    display: block;
-                    padding: 1rem;
-                    text-decoration: none;
-                    color: var(--nav-text);
-                    transition: background-color 0.2s ease-in-out;
+        // Nested dropdowns
+        .submenu {
+            top: 0;
+            left: 100%;
+        }
+    }
 
-                    &:hover {
-                        background-color: var(--nav-hover);
-                    }
+    .menu {
+        @include Flex.flex;
+        
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+            position: relative;
+
+            a {
+                display: block;
+                padding: 1rem;
+                text-decoration: none;
+                color: var(--nav-text);
+                transition: background-color 0.2s ease-in-out;
+
+                &:hover {
+                    background-color: var(--nav-hover);
                 }
+            }
 
-                // Dropdown styles
-                &:hover>.submenu {
-                    display: block;
-                    visibility: visible;
-                    opacity: 1;
-                    pointer-events: auto; // Re-enable interactions
-                }
+            // Dropdown styles
+            &:hover>.submenu {
+                display: block;
+                visibility: visible;
+                opacity: 1;
+                pointer-events: auto; // Re-enable interactions
             }
         }
+    }
 
-        .submenu {
-            background-color: white;
-            display: block;
-            visibility: hidden; // Use visibility instead of display
-            pointer-events: none; // Prevents interaction when hidden
-            opacity: 0;
-
+    // Responsive styles
+    @include Responsive.media-down(md) {
+        .menu {
+            transition: all 1.3s ease;
+            display: none;
+            flex-direction: column;
+            background-color: var(--nav-bg);
             position: absolute;
             top: 100%;
             left: 0;
-            min-width: 200px;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-            background-color: var(--nav-bg);
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-
-            // Animation
-            transition:
-                opacity 0.2s ease-in-out,
-                visibility 0.2s ease-in-out;
+            width: 100%;
 
-            li {
-                a {
-                    padding: 0.75rem 1rem;
-                }
+            &[data-visible="true"] {
+                display: flex;
             }
 
-            // Nested dropdowns
-            .submenu {
-                top: 0;
-                left: 100%;
-            }
-        }
-
-        // Responsive styles
-        @include Responsive.media-down(md) {
-            .menu {
-                transition: all 1.3s ease;
-                display: none;
-                flex-direction: column;
-                background-color: var(--nav-bg);
-                position: absolute;
-                top: 100%;
-                left: 0;
+            li {
                 width: 100%;
+                text-align: left;
 
-                &[data-visible="true"] {
-                    display: flex;
-                }
+                .submenu {
+                    position: relative;
+                    left: 0;
+                    top: 0;
+                    display: none;
+                    visibility: visible;
+                    opacity: 1;
+                    pointer-events: auto;
+                    box-shadow: none;
+                    background-color: var(--nav-hover);
 
-                li {
-                    width: 100%;
-                    text-align: left;
-
-                    .submenu {
-                        position: relative;
-                        left: 0;
-                        top: 0;
-                        display: none;
-                        visibility: visible;
-                        opacity: 1;
-                        pointer-events: auto;
-                        box-shadow: none;
-                        background-color: var(--nav-hover);
-
-                        &[data-visible="true"] {
-                            display: flex;
-                            flex-direction: column;
-                        }
+                    &[data-visible="true"] {
+                        display: flex;
+                        flex-direction: column;
                     }
                 }
             }
+        }
 
-            .navbar__cta {
-                width: 100%;
-                justify-content: center;
-                padding: 1rem 0;
-            }
+        .navbar__cta {
+            width: 100%;
+            justify-content: center;
+            padding: 1rem 0;
         }
     }
 }

package/src/styles/index.scss

@@ -1,6 +1,5 @@
-// Forward all modules for external use
+/* Forward all modules for external use */
 @forward 'utilities/variables';
-@forward './global';
 
 // Base styles
 @forward 'base/reset';
@@ -8,12 +7,14 @@
 
 // Utilities
 @forward 'utilities/animations';
+@forward 'utilities/borders'; 
 @forward 'utilities/colors';
 @forward 'utilities/display';
-@forward 'utilities/hamburger';
+@forward 'utilities/opacity';
 @forward 'utilities/position';
-@forward 'utilities/responsive';
+@forward 'utilities/media-queries';
 @forward 'utilities/shadows';
+@forward 'utilities/sizing';
 @forward 'utilities/spacing';
 @forward 'utilities/typography';
 @forward 'utilities/tooltips';
@@ -30,8 +31,6 @@
 
 // Components
 @forward 'components/button';
+@forward 'components/hamburger';
 @forward 'components/navbar';
-@forward 'components/form';
-
-// Local usage
-@use './global' as *;
+@forward 'components/form';

package/src/styles/layouts/_container.scss

@@ -12,6 +12,7 @@
 
 @mixin container {
   @include container-base;
+  
   & {
     @each $breakpoint, $width in $container-max-widths {
       @media (min-width: map.get($breakpoints, $breakpoint)) {

package/src/styles/layouts/_flex.scss

@@ -38,14 +38,18 @@
 @mixin self-center {align-self: center;}
 @mixin self-stretch {align-self: stretch;}
 
+@mixin shrink {flex-shrink: 1;}
+@mixin shrink-0 {flex-shrink: 0;}
+@mixin shrink-2 {flex-shrink: 2;}
+
 // Flex Child Mixins
-@mixin w-full {flex: 0 0 100%;}
-@mixin w-auto {flex: 1 1 auto;}
+@mixin f-w-full {flex: 0 0 100%;}
+@mixin f-w-auto {flex: 1 1 auto;}
 @mixin grow { flex: 1 1 0%; }
 @mixin no-grow { flex: none; }
 
 @mixin w-col($size) {
-  flex: 0 0 math.percentage(math.div($size, $column-count));
+  flex: 0 0 math.percentage(math.div($size, $column-count)) !important;
 }
 
 // Base flex container
@@ -79,10 +83,18 @@
   &.items-stretch { align-items: stretch; }
   
   // Child flex items (using column count)
-  > .w-auto { @include w-auto }
-  > .w-full { @include w-full }
+  > .w-auto { @include f-w-auto }
+  > .w-full { @include f-w-full }
   > .grow { @include grow; }
   > .no-grow { @include no-grow; }
+
+  > .order-first { order: -1; }
+  > .order-last { order: 9999; }
+  > .order-none { order: 0; }
+
+  > .shrink { @include shrink; }
+  > .shrink-0 { @include shrink-0; }
+  > .shrink-2 { @include shrink-2; }
   @for $i from 1 through $column-count {
     > .w-#{$i} { @include w-col($i) }
     > .order-#{$i} { order: $i; }
@@ -121,13 +133,19 @@
       &.items-stretch\@#{$breakpoint} { align-items: stretch; }
 
       // Width (using column count)
-      & > .w-auto\@#{$breakpoint} { flex: 1 1 auto; }
-      & > .w-full\@#{$breakpoint} { flex: 0 0 100%; }
+      & > .w-auto\@#{$breakpoint} { @include f-w-auto; }
+      & > .w-full\@#{$breakpoint} { @include f-w-full; }
       & > .grow\@#{$breakpoint} { @include grow; }
       & > .no-grow\@#{$breakpoint} { @include no-grow; }
+      & > .order-first\@#{$breakpoint} { order: -1; }
+      & > .order-last\@#{$breakpoint} { order: 9999; }
+      & > .order-none\@#{$breakpoint} { order: 0; }
       @for $i from 1 through $column-count {
         & > .w-#{$i}\@#{$breakpoint} { @include w-col($i) }
         & > .order-#{$i}\@#{$breakpoint} { order: $i; }
+        & > .shrink\@#{$breakpoint} { @include shrink; }
+        & > .shrink-0\@#{$breakpoint} { @include shrink-0; }
+        & > .shrink-2\@#{$breakpoint} { @include shrink-2; }
       }
     }
   }

package/src/styles/layouts/_grid.scss

@@ -82,15 +82,13 @@
   // Responsive grid columns
   @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
-      .grid.#{$breakpoint}\:cols-#{$i} {
+      .grid.cols-#{$i}#{$breakpoint} {
         @include grid-cols($i);
       }
     }
   }
 }
 
-
-
 // Generate Column Span Classes with Responsive Variants
 @for $i from 1 through $column-count {
   .col-span-#{$i} {
@@ -99,7 +97,7 @@
 
   @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
-      .#{$breakpoint}\:col-span-#{$i} {
+      .col-span-#{$i}\@#{$breakpoint} {
         @include col-span($i);
       }
     }
@@ -108,7 +106,7 @@
 
 
 // Auto-fit/fill Classes
-@each $breakpoint, $width in $column-widths {
+@each $breakpoint, $width in $breakpoints {
   .grid.auto-fit-#{$breakpoint} { @include grid-auto-fit($width); }
   .grid.auto-fill-#{$breakpoint} { @include grid-auto-fill($width); }
 }
@@ -133,13 +131,13 @@ $alignments: (
 
   @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
-      .#{$breakpoint}\:justify-items-#{$name} {
+      .justify-items-#{$name}\@#{$breakpoint} {
         justify-items: $value;
       }
-      .#{$breakpoint}\:align-items-#{$name} {
+      .align-items-#{$name}\@#{$breakpoint} {
         align-items: $value;
       }
-      .#{$breakpoint}\:place-items-#{$name} {
+      .place-items-#{$name}\@#{$breakpoint} {
         place-items: $value;
       }
     }

package/src/styles/themes/_theme.scss

@@ -98,7 +98,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%);
 }