@nuvoui/core 0.2.1 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "NuvoUI Core SCSS Library",
   "main": "dist/index.css",
   "module": "src/styles/index.scss",
@@ -12,16 +12,33 @@
     "dev": "vite",
     "build": "vite build && npm run build:scss",
     "build:scss": "sass src/styles/index.scss:dist/index.css --style compressed",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "lint": "stylelint \"src/**/*.scss\"",
+    "format": "prettier --write \"src/**/*.{scss,js,json}\"",
+    "clean": "rimraf dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NuvoUI/core.git"
   },
   "keywords": [
     "scss",
     "css",
     "nuvoui",
-    "ui-library"
+    "ui-library",
+    "design-system",
+    "frontend",
+    "responsive",
+    "modern"
   ],
-  "author": "AALA IT Solutions",
+  "author": {
+    "name": "AALA IT Solutions",
+    "url": "https://aalasolutions.com"
+  },
   "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/NuvoUI/core/issues"
+  },
   "publishConfig": {
     "access": "public"
   },

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,46 +93,41 @@
 // Responsive variants
 @each $breakpoint, $width in $breakpoints {
   @media (min-width: $width) {
-    .#{$breakpoint}\: {
+    .flex {
       // Direction
-      &row { flex-direction: row; }
-      &row-reverse { flex-direction: row-reverse; }
-      &col { flex-direction: column; }
-      &col-reverse { flex-direction: column-reverse; }
+      &.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 { flex-wrap: wrap; }
-      &nowrap { flex-wrap: nowrap; }
-      &wrap-reverse { flex-wrap: wrap-reverse; }
+      &.wrap\@#{$breakpoint} { flex-wrap: wrap; }
+      &.nowrap\@#{$breakpoint} { flex-wrap: nowrap; }
+      &.wrap-reverse\@#{$breakpoint} { flex-wrap: wrap-reverse; }
       
       // Justify
-      &start { justify-content: flex-start; }
-      &end { justify-content: flex-end; }
-      &center { justify-content: center; }
-      &between { justify-content: space-between; }
-      &around { justify-content: space-around; }
-      &evenly { justify-content: space-evenly; }
-      
+      &.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
-      &items-start { align-items: flex-start; }
-      &items-end { align-items: flex-end; }
-      &items-center { align-items: center; }
-      &items-baseline { align-items: baseline; }
-      &items-stretch { align-items: stretch; }
-      
+      &.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 { flex: 1 1 auto; }
-      &w-full { flex: 0 0 100%; }
-      
+      & > .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} {
-          flex: 0 0 math.percentage(math.div($i, $column-count));
-        }
-      }
-      
-      // Gap
-      @for $i from 0 through 8 {
-        &gap-#{$i} { gap: #{$i * 0.25}rem; }
+        & > .w-#{$i}\@#{$breakpoint} { @include w-col($i) }
+        & > .order-#{$i}\@#{$breakpoint} { order: $i; }
       }
     }
   }

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/_position.scss

@@ -44,19 +44,19 @@
 // Responsive Position Classes
 @each $breakpoint, $width in $breakpoints {
   @media (min-width: $width) {
-    .#{$breakpoint}\:p-static {
+    .p-static\@#{$breakpoint} {
       @include p-static;
     }
-    .#{$breakpoint}\:p-relative {
+    .p-relative\@#{$breakpoint} {
       @include p-relative;
     }
-    .#{$breakpoint}\:p-absolute {
+    .p-absolute\@#{$breakpoint} {
       @include p-absolute;
     }
-    .#{$breakpoint}\:p-fixed {
+    .p-fixed\@#{$breakpoint} {
       @include p-fixed;
     }
-    .#{$breakpoint}\:p-sticky {
+    .p-sticky\@#{$breakpoint} {
       @include p-sticky;
     }
   }