@nuvoui/core 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "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/styles/layouts/_flex.scss

@@ -92,47 +92,45 @@
 // Responsive variants
 @each $breakpoint, $width in $breakpoints {
   @media (min-width: $width) {
-    .#{$breakpoint}\: {
-      // Direction
-      &row { flex-direction: row; }
-      &row-reverse { flex-direction: row-reverse; }
-      &col { flex-direction: column; }
-      &col-reverse { flex-direction: column-reverse; }
-      
-      // Wrap
-      &wrap { flex-wrap: wrap; }
-      &nowrap { flex-wrap: nowrap; }
-      &wrap-reverse { 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; }
-      
-      // 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; }
-      
-      // Width (using column count)
-      &w-auto { flex: 1 1 auto; }
-      &w-full { flex: 0 0 100%; }
-      
-      @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; }
+    // 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; }
+
+    // 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));
       }
     }
+    
+    // Gap
+    @for $i from 0 through 8 {
+      .flex.gap-#{$i}\@#{$breakpoint} { gap: #{$i * 0.25}rem; }
+    }
   }
 }

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;
     }
   }

package/src/styles/utilities/_spacing.scss

@@ -52,23 +52,22 @@
         // Generate utilities from spacing map
         @each $i in $spacings {
             // Padding classes
-            .#{$breakpoint}\:p-#{$i} { @include p($i); }
-            .#{$breakpoint}\:px-#{$i} { @include px($i); }
-            .#{$breakpoint}\:py-#{$i} { @include py($i); }
-            .#{$breakpoint}\:pt-#{$i} { @include pt($i); }
-            .#{$breakpoint}\:pr-#{$i} { @include pr($i); }
-            .#{$breakpoint}\:pb-#{$i} { @include pb($i); }
-            .#{$breakpoint}\:pl-#{$i} { @include pl($i); }
+            .p-#{$i}\@#{$breakpoint} { @include p($i); }
+            .px-#{$i}\@#{$breakpoint} { @include px($i); }
+            .py-#{$i}\@#{$breakpoint} { @include py($i); }
+            .pt-#{$i}\@#{$breakpoint} { @include pt($i); }
+            .pr-#{$i}\@#{$breakpoint} { @include pr($i); }
+            .pb-#{$i}\@#{$breakpoint} { @include pb($i); }
+            .pl-#{$i}\@#{$breakpoint} { @include pl($i); }
 
             // Margin classes
-            .#{$breakpoint}\:m-#{$i} { @include m($i); }
-            .#{$breakpoint}\:mx-#{$i} { @include mx($i); }
-            .#{$breakpoint}\:my-#{$i} { @include my($i); }
-            .#{$breakpoint}\:mt-#{$i} { @include mt($i); }
-            .#{$breakpoint}\:mr-#{$i} { @include mr($i); }
-            .#{$breakpoint}\:mb-#{$i} { @include mb($i); }
-            .#{$breakpoint}\:ml-#{$i} { @include ml($i); }
-            // .gap-#{$key} { gap: $value; }
+            .m-#{$i}\@#{$breakpoint} { @include m($i); }
+            .mx-#{$i}\@#{$breakpoint} { @include mx($i); }
+            .my-#{$i}\@#{$breakpoint} { @include my($i); }
+            .mt-#{$i}\@#{$breakpoint} { @include mt($i); }
+            .mr-#{$i}\@#{$breakpoint} { @include mr($i); }
+            .mb-#{$i}\@#{$breakpoint} { @include mb($i); }
+            .ml-#{$i}\@#{$breakpoint} { @include ml($i); }
         }
     }
 }