@nuvoui/core 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "NuvoUI Core SCSS Library",
   "main": "dist/index.css",
   "module": "src/styles/index.scss",

package/src/logo.svg

@@ -0,0 +1,12 @@
+<svg width="418" height="418" viewBox="0 0 418 418" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4118_5137" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="418" height="418">
+<rect width="418" height="418" fill="#F1F4D8"/>
+</mask>
+<g mask="url(#mask0_4118_5137)">
+<rect width="418" height="418" fill="#F1F4D8"/>
+<path d="M418 419H77L296.5 262.5L418 201V419Z" fill="#0476A4"/>
+<path d="M316.794 -185.998L487.294 109.316L242.011 -2.52617L128 -76.9983L316.794 -185.998Z" fill="#0476A4"/>
+<line x1="-17.2721" y1="410.484" x2="431.728" y2="185.484" stroke="#5FCFFF" stroke-width="28"/>
+<circle cx="267" cy="183" r="66.5" stroke="#FF7B00" stroke-width="15"/>
+</g>
+</svg>

package/src/styles/base/_base.scss

@@ -66,10 +66,4 @@ a {
   &:hover {
     color: var(--link-hover-color);
   }
-}
-
-// Lists
-ul, ol {
-  margin-bottom: 1rem;
-  padding-left: 2rem;
-}
+}

package/src/styles/base/_reset.scss

@@ -69,9 +69,20 @@ select {
 }
 
 // Remove list styles
-ul[role='list'],
-ol[role='list'] {
+ul,
+ol {
   list-style: none;
+  margin: 0;
+  padding: 0;
+  // Modern properties
+  padding-inline-start: 0;  // Replaces padding-left
+  margin-block: 0;          // Replaces margin-top/bottom
+}
+
+li {
+  margin: 0;
+  padding: 0;
+  margin-block: 0;
 }
 
 // Set core root defaults

package/src/styles/components/_form.scss

@@ -83,7 +83,7 @@
 @mixin form-select {
   @include form-input;
   appearance: none;
-  background-image: url("data:image/svg+xml,...");
+  background-image: url("data:image/svg+xml,..."); // todo: colored arrow svg
   background-repeat: no-repeat;
   background-position: right 1rem center;
   padding-right: 2.5rem;
@@ -110,7 +110,7 @@
   &:checked {
     background-color: var(--primary);
     border-color: var(--primary);
-    background-image: url("data:image/svg+xml,...");
+    background-image: url("data:image/svg+xml,..."); // todo: colored arrow svg
   }
 }
 

package/src/styles/components/_navbar.scss

@@ -1,35 +1,24 @@
 // _navbar.scss
 
-@use '../utilities/variables' as *;
+@use '../utilities/responsive' as Responsive;
 @use '../utilities/shadows' as *;
+@use '../utilities/variables' as *;
 @use '../layouts/container' as Container;
 @use '../layouts/flex' as Flex;
-@use '../layouts/grid' as Grid;
-
-:root {
-    --shadow-color: 255, 0, 0;
-}
 
 .navbar {
-
-    @include Flex.between;
     @include Container.container-flex;
 
-    // @include Grid.grid-flow-row;
-    // @include Grid.grid-flow-col;
-    // @include Grid.grid-cols(2);
-    // @include Container.container-grid;
-
     & {
         @include Flex.align-center;
-        // @include shadow('md', 'colored');
-
-        background-color: var(--nav-bg);
+        @include Flex.between;
 
         &:hover {
             @include shadow('lg', 'dark');
         }
 
+        background-color: var(--nav-bg);
+
         .logo {
             img {
                 max-height: 40px;
@@ -103,23 +92,50 @@
             }
         }
 
-        @media (max-width: 768px) {
-            flex-direction: column;
-
+        // 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;
                 width: 100%;
 
-                .submenu {
-                    position: static;
-                    display: none;
+                &[data-visible="true"] {
+                    display: flex;
+                }
+
+                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);
 
-                    li a {
-                        padding-left: 2rem;
+                        &[data-visible="true"] {
+                            display: flex;
+                            flex-direction: column;
+                        }
                     }
                 }
             }
+
+            .navbar__cta {
+                width: 100%;
+                justify-content: center;
+                padding: 1rem 0;
+            }
         }
     }
 }

package/src/styles/index.scss

@@ -9,7 +9,10 @@
 // Utilities
 @forward 'utilities/animations';
 @forward 'utilities/colors';
+@forward 'utilities/display';
+@forward 'utilities/hamburger';
 @forward 'utilities/position';
+@forward 'utilities/responsive';
 @forward 'utilities/shadows';
 @forward 'utilities/spacing';
 @forward 'utilities/typography';

package/src/styles/layouts/_flex.scss

@@ -41,6 +41,12 @@
 // Flex Child Mixins
 @mixin w-full {flex: 0 0 100%;}
 @mixin 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));
+}
 
 // Base flex container
 .flex {
@@ -72,19 +78,14 @@
   &.items-baseline { align-items: baseline; }
   &.items-stretch { align-items: stretch; }
   
-  // Gap modifiers
-  @for $i from 0 through 8 {
-    &.gap-#{$i} { gap: #{$i * 0.25}rem; }
-  }
-  
   // Child flex items (using column count)
-  > .w-auto { flex: 1 1 auto; }
-  > .w-full { flex: 0 0 100%; }
-  
+  > .w-auto { @include w-auto }
+  > .w-full { @include w-full }
+  > .grow { @include grow; }
+  > .no-grow { @include no-grow; }
   @for $i from 1 through $column-count {
-    > .w-#{$i} {
-      flex: 0 0 math.percentage( math.div($i, $column-count));
-    }
+    > .w-#{$i} { @include w-col($i) }
+    > .order-#{$i} { order: $i; }
   }
 }
 
@@ -92,45 +93,42 @@
 // Responsive variants
 @each $breakpoint, $width in $breakpoints {
   @media (min-width: $width) {
-    // Direction
-    .flex.row\@#{$breakpoint} { flex-direction: row; }
-    .flex.row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
-    .flex.col\@#{$breakpoint} { flex-direction: column; }
-    .flex.col-reverse\@#{$breakpoint} { flex-direction: column-reverse; }
-    
-    // Wrap
-    .flex.wrap\@#{$breakpoint} { flex-wrap: wrap; }
-    .flex.nowrap\@#{$breakpoint} { flex-wrap: nowrap; }
-    .flex.wrap-reverse\@#{$breakpoint} { flex-wrap: wrap-reverse; }
-    
-    // Justify
-    .flex.start\@#{$breakpoint} { justify-content: flex-start; }
-    .flex.end\@#{$breakpoint} { justify-content: flex-end; }
-    .flex.center\@#{$breakpoint} { justify-content: center; }
-    .flex.between\@#{$breakpoint} { justify-content: space-between; }
-    .flex.around\@#{$breakpoint} { justify-content: space-around; }
-    .flex.evenly\@#{$breakpoint} { justify-content: space-evenly; }
+    .flex {
+      // Direction
+      &.row\@#{$breakpoint} { flex-direction: row; }
+      &.row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
+      &.col\@#{$breakpoint} { flex-direction: column; }
+      &.col-reverse\@#{$breakpoint} { flex-direction: column-reverse; }
+      
+      // Wrap
+      &.wrap\@#{$breakpoint} { flex-wrap: wrap; }
+      &.nowrap\@#{$breakpoint} { flex-wrap: nowrap; }
+      &.wrap-reverse\@#{$breakpoint} { flex-wrap: wrap-reverse; }
+      
+      // Justify
+      &.start\@#{$breakpoint} { justify-content: flex-start; }
+      &.end\@#{$breakpoint} { justify-content: flex-end; }
+      &.center\@#{$breakpoint} { justify-content: center; }
+      &.between\@#{$breakpoint} { justify-content: space-between; }
+      &.around\@#{$breakpoint} { justify-content: space-around; }
+      &.evenly\@#{$breakpoint} { justify-content: space-evenly; }
 
-    // Align
-    .flex.items-start\@#{$breakpoint} { align-items: flex-start; }
-    .flex.items-end\@#{$breakpoint} { align-items: flex-end; }
-    .flex.items-center\@#{$breakpoint} { align-items: center; }
-    .flex.items-baseline\@#{$breakpoint} { align-items: baseline; }
-    .flex.items-stretch\@#{$breakpoint} { align-items: stretch; }
-    
-    // Width (using column count)
-    .flex.w-auto\@#{$breakpoint} { flex: 1 1 auto; }
-    .flex.w-full\@#{$breakpoint} { flex: 0 0 100%; }
-    
-    @for $i from 1 through $column-count {
-      .flex.w-#{$i}\@#{$breakpoint} {
-        flex: 0 0 math.percentage(math.div($i, $column-count));
+      // Align
+      &.items-start\@#{$breakpoint} { align-items: flex-start; }
+      &.items-end\@#{$breakpoint} { align-items: flex-end; }
+      &.items-center\@#{$breakpoint} { align-items: center; }
+      &.items-baseline\@#{$breakpoint} { align-items: baseline; }
+      &.items-stretch\@#{$breakpoint} { align-items: stretch; }
+
+      // Width (using column count)
+      & > .w-auto\@#{$breakpoint} { flex: 1 1 auto; }
+      & > .w-full\@#{$breakpoint} { flex: 0 0 100%; }
+      & > .grow\@#{$breakpoint} { @include grow; }
+      & > .no-grow\@#{$breakpoint} { @include no-grow; }
+      @for $i from 1 through $column-count {
+        & > .w-#{$i}\@#{$breakpoint} { @include w-col($i) }
+        & > .order-#{$i}\@#{$breakpoint} { order: $i; }
       }
     }
-    
-    // Gap
-    @for $i from 0 through 8 {
-      .flex.gap-#{$i}\@#{$breakpoint} { gap: #{$i * 0.25}rem; }
-    }
   }
 }

package/src/styles/utilities/_animations.scss

@@ -24,8 +24,7 @@ $generated-keyframes: ();
     }
 }
 
-
-@mixin animate-move($props) {
+@mixin animate-bounce($props) {
     $defaults: (
         vertical: 0%,
         horizontal: 0%,
@@ -36,8 +35,8 @@ $generated-keyframes: ();
     // Merge with defaults
     $props: map.merge($defaults, $props);
 
-    $x: map.get($props, 'vertical');
-    $y: map.get($props, 'horizontal');
+    $x: map.get($props, 'horizontal');
+    $y: map.get($props, 'vertical');
     $duration: map.get($props, 'duration');
     $easing: map.get($props, 'timing');
     $iteration: map.get($props, 'iteration');

package/src/styles/utilities/_colors.scss

@@ -144,15 +144,3 @@
     @include backdrop-filter(blur(5px) saturate(180%));
     background-color: rgba(255, 255, 255, 0.8);
 }
-
-// <div class="bg-primary-0">Lightest shade</div>
-// <div class="bg-primary-4">Middle shade</div>
-// <div class="bg-primary-8">Darkest shade</div>
-
-// <div class="brand-complementary">Complementary colors</div>
-
-// <div class="text-on-background">Accessible text</div>
-
-// <div class="glass-effect">
-//   Blurred backdrop
-// </div>

package/src/styles/utilities/_display.scss

@@ -0,0 +1,42 @@
+@use "sass:math";
+@use 'sass:color';
+@use 'sass:map';
+
+@use './variables' 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; }
+
+// 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; }
+}
+
+// Responsive Variants
+@each $breakpoint, $width in $breakpoints {
+  @media (min-width: $width) {
+    .hide\@#{$breakpoint} { @include d-none; }
+    .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; }
+    }
+  }
+}

package/src/styles/utilities/_hamburger.scss

@@ -0,0 +1,74 @@
+@use "sass:math";
+@use 'sass:color';
+@use 'sass:map';
+@use '../utilities/responsive' as Responsive;
+
+@use './variables' as *;
+
+// _mixins.scss
+@mixin hamburger($color: currentColor, $size: 24px, $thickness: 2px) {
+    .hamburger {
+        @include Responsive.media-up('md') {
+            display: none;
+        }
+
+        & {
+            --hamburger-color: #{$color};
+            --hamburger-size: #{$size};
+            --hamburger-thickness: #{$thickness};
+
+            &:focus {
+                outline: none;
+                box-shadow: none;
+            }
+
+            // display: none;
+            cursor: pointer;
+            width: var(--hamburger-size);
+            height: var(--hamburger-size);
+            position: relative;
+            border: 0;
+            background: transparent;
+            padding: 0;
+
+            &[aria-expanded="true"] span {
+                &:first-child {
+                    transform: translateY(7px) rotate(45deg);
+                }
+
+                &:nth-child(2) {
+                    opacity: 0;
+                }
+
+                &:last-child {
+                    transform: translateY(-7px) rotate(-45deg);
+                }
+            }
+
+            span {
+                display: block;
+                position: absolute;
+                left: 0;
+                right: 0;
+                height: var(--hamburger-thickness);
+                background-color: var(--hamburger-color);
+                transform-origin: center;
+                transition: transform 0.2s ease,
+                    opacity 0.2s ease;
+
+                &:first-child {
+                    top: 20%;
+                }
+
+                &:nth-child(2) {
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+
+                &:last-child {
+                    bottom: 20%;
+                }
+            }
+        }
+    }
+}

package/src/styles/utilities/_responsive.scss

@@ -0,0 +1,184 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use './variables' as *;
+
+// Breakpoint mixins
+@mixin media-up($breakpoint) {
+  @if map.has-key($breakpoints, $breakpoint) {
+    @media screen and (min-width: map.get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else if meta.type-of($breakpoint) == number {
+    @media screen and (min-width: $breakpoint) {
+      @content;
+    }
+  }
+}
+
+@mixin media-down($breakpoint) {
+  @if map.has-key($breakpoints, $breakpoint) {
+    @media screen and (max-width: (map.get($breakpoints, $breakpoint) - 0.02px)) {
+      @content;
+    }
+  } @else if meta.type-of($breakpoint) == number {
+    @media screen and (max-width: ($breakpoint - 0.02px)) {
+      @content;
+    }
+  }
+}
+
+@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)) {
+      @content;
+    }
+  }
+}
+
+// Only at specific breakpoint
+@mixin media-only($breakpoint) {
+  @if map.has-key($breakpoints, $breakpoint) {
+    $min: map.get($breakpoints, $breakpoint);
+    $next-breakpoint: null;
+    
+    @each $name, $width in $breakpoints {
+      @if $width > $min and ($next-breakpoint == null or $width < $next-breakpoint) {
+        $next-breakpoint: $width;
+      }
+    }
+    
+    @if $next-breakpoint {
+      @media (min-width: $min) and (max-width: $next-breakpoint - 1) {
+        @content;
+      }
+    } @else {
+      @media (min-width: $min) {
+        @content;
+      }
+    }
+  }
+}
+
+// Example: @include container(45em) { }
+@mixin container-query($size) {
+  @container (min-width: $size) {
+    @content;
+  }
+}
+
+// Touch devices
+@mixin touch {
+  @media (hover: none) and (pointer: coarse) {
+    @content;
+  }
+}
+
+// Print media
+@mixin print {
+  @media print {
+    @content;
+  }
+}
+
+// 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) {
+  @supports #{$property} {
+    @content;
+  }
+}
+
+// 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 {
+  @media (prefers-color-scheme: dark) {
+    @content;
+  }
+}
+
+// Device orientation
+@mixin landscape {
+  @media screen and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin portrait {
+  @media screen and (orientation: portrait) {
+    @content;
+  }
+}
+
+// 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;
+    }
+  }
+}
+
+// Dynamic viewport units (modern browsers)
+@mixin dvh {
+  @supports (height: 100dvh) {
+    height: 100dvh;
+  }
+  
+  @supports not (height: 100dvh) {
+    height: 100vh;
+  }
+}
+
+// Safe area insets (notches, home indicators)
+@mixin safe-area-inset($property, $position) {
+  #{$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;
+  }
+}
+
+

package/src/styles/utilities/_spacing.scss

@@ -105,4 +105,15 @@
     .gap-#{$i} { @include gap($i); }
     .gap-x-#{$i} { @include gap-x($i); }
     .gap-y-#{$i} { @include gap-y($i); }
+}
+
+// Responsive Gap Classes
+@each $breakpoint, $width in $breakpoints {
+  @media (min-width: $width) {
+    @each $i in $spacings {
+      .gap-#{$i}\@#{$breakpoint} { gap: $i; }
+      .gap-x-#{$i}\@#{$breakpoint} { column-gap: $i; }
+      .gap-y-#{$i}\@#{$breakpoint} { row-gap: $i; }
+    }
+  }
 }