@nuvoui/core 1.2.7 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",
@@ -41,7 +41,7 @@
     "prebuild": "npm run clean",
     "build": "npm run build:scss && npm run build:minify",
     "dev": "sass src/styles/index.scss:dist/nuvoui.css --watch",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run lint && npm run format && npm run build"
   },
   "repository": {
     "type": "git",

package/src/styles/abstracts/_config.scss

@@ -5,10 +5,8 @@
 // Framework Configuration Options
 $generate-utility-classes: true !default;
 $enable-dark-mode: true !default;
-$enable-rtl: true !default;
+
 $enable-debugger: false !default;
-$enable-reduced-motion: true !default; // todo: pending
-$enable-container-queries: false !default; // todo: pending
 
 // if just a number passed, it will be assumed as px
 $default-unit: px !default;
@@ -100,9 +98,16 @@ $basic-colors: (
 }
 
 // Validate both themes
-@debug validate-theme-tokens($light-theme, $theme-tokens);
+@mixin validate-tokens {
+  @if not validate-theme-tokens($light-theme, $theme-tokens) {
+    @error "Light theme is missing required tokens.";
+  }
+  @if not validate-theme-tokens($dark-theme, $theme-tokens) {
+    @error "Dark theme is missing required tokens.";
+  }
+}
 
-@debug validate-theme-tokens($dark-theme, $theme-tokens);
+@include validate-tokens;
 
 $shadow-colors: (
   "default": rgb(0 0 0 / 10%),
@@ -187,7 +192,7 @@ $spacings: (
   64: 16rem, // 256px
 ) !default;
 
-$percentages: (0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100) !default;
+$percentages: (0, 5, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100) !default;
 
 // Common border width values that are most useful
 $border-widths: (0, 1, 2, 4, 8) !default;
@@ -200,7 +205,7 @@ $border-radii: (
   "lg": 0.75rem,
   "xl": 1rem,
   "2xl": 1.25rem,
-  "full": 9999px,
+  "circle": 50%,
   "none": 0,
 ) !default;
 

package/src/styles/layouts/_flex.scss

@@ -394,118 +394,131 @@
 }
 
 @if VAR.$generate-utility-classes {
-  // Base flex container
-  #{VAR.$parent-selector} .flex {
-    display: flex;
+  // Build flat selector list for all flex containers
+  $flex-selectors: "#{VAR.$parent-selector} .flex";
+
+  @each $breakpoint, $width in VAR.$breakpoints {
+    $flex-selectors: "#{$flex-selectors}, #{VAR.$parent-selector} .flex\\@#{$breakpoint}";
+  }
+
+  // Apply base flex styles to all flex variants at once
+  #{$flex-selectors} {
+    @include flex;
+
+    &.inline {
+      @include flex-inline;
+    }
 
     // Direction modifiers
     &.row {
-      flex-direction: row;
+      @include row;
     }
 
     &.row-reverse {
-      flex-direction: row-reverse;
+      @include row-reverse;
     }
 
     &.col {
-      flex-direction: column;
+      @include col;
     }
 
     &.col-reverse {
-      flex-direction: column-reverse;
+      @include col-reverse;
     }
 
     // Wrap modifiers
     &.wrap {
-      flex-wrap: wrap;
+      @include wrap;
     }
 
     &.nowrap {
-      flex-wrap: nowrap;
+      @include nowrap;
     }
 
     &.wrap-reverse {
-      flex-wrap: wrap-reverse;
+      @include wrap-reverse;
     }
 
     // Justify modifiers
     &.start {
-      justify-content: flex-start;
+      @include start;
     }
 
     &.end {
-      justify-content: flex-end;
+      @include end;
     }
 
     &.center {
-      justify-content: center;
+      @include center;
     }
 
     &.stretch {
-      justify-content: stretch;
-    } // todo: document
+      @include stretch;
+    }
+
     &.between {
-      justify-content: space-between;
+      @include between;
     }
 
     &.around {
-      justify-content: space-around;
+      @include around;
     }
 
     &.evenly {
-      justify-content: space-evenly;
+      @include evenly;
     }
 
     // Align modifiers
     &.x-start {
-      align-items: flex-start;
+      @include x-start;
     }
 
     &.x-end {
-      align-items: flex-end;
+      @include x-end;
     }
 
     &.x-center {
-      align-items: center;
+      @include x-center;
     }
 
     &.x-baseline {
-      align-items: baseline;
+      @include x-baseline;
     }
 
     &.x-stretch {
-      align-items: stretch;
+      @include x-stretch;
     }
 
+    // Content alignment
     &.x-content-start {
-      align-content: flex-start;
+      @include x-content-start;
     }
 
     &.x-content-end {
-      align-content: flex-end;
+      @include x-content-end;
     }
 
     &.x-content-center {
-      align-content: center;
+      @include x-content-center;
     }
 
     &.x-content-between {
-      align-content: space-between;
+      @include x-content-between;
     }
 
     &.x-content-around {
-      align-content: space-around;
+      @include x-content-around;
     }
 
     &.x-content-evenly {
-      align-content: space-evenly;
+      @include x-content-evenly;
     }
 
     &.x-content-stretch {
-      align-content: stretch;
+      @include x-content-stretch;
     }
 
-    // Child flex items (using column count)
+    // Child flex items
     > .fill-auto {
       @include fill-auto;
     }
@@ -574,164 +587,171 @@
       > .fill-#{$i} {
         @include fill($i);
       }
-
       > .order-#{$i} {
         order: $i;
       }
     }
   }
 
+  // Handle responsive variants
   @each $breakpoint, $width in VAR.$breakpoints {
-    // Get breakpoint value using FN function
     $bp-val: FN.get-breakpoint-value($breakpoint);
 
     @media (min-width: #{$bp-val}) {
-      #{VAR.$parent-selector} .flex {
-        // Direction
+      #{$flex-selectors} {
+        // Direction modifiers
         &.row\@#{$breakpoint} {
-          flex-direction: row;
+          @include row;
         }
         &.row-reverse\@#{$breakpoint} {
-          flex-direction: row-reverse;
+          @include row-reverse;
         }
         &.col\@#{$breakpoint} {
-          flex-direction: column;
+          @include col;
         }
         &.col-reverse\@#{$breakpoint} {
-          flex-direction: column-reverse;
+          @include col-reverse;
         }
 
-        // Wrap
+        // Wrap modifiers
         &.wrap\@#{$breakpoint} {
-          flex-wrap: wrap;
+          @include wrap;
         }
         &.nowrap\@#{$breakpoint} {
-          flex-wrap: nowrap;
+          @include nowrap;
         }
         &.wrap-reverse\@#{$breakpoint} {
-          flex-wrap: wrap-reverse;
+          @include wrap-reverse;
         }
 
-        // Justify
+        // Justify modifiers
         &.start\@#{$breakpoint} {
-          justify-content: flex-start;
+          @include start;
         }
         &.end\@#{$breakpoint} {
-          justify-content: flex-end;
+          @include end;
         }
         &.center\@#{$breakpoint} {
-          justify-content: center;
+          @include center;
+        }
+        &.stretch\@#{$breakpoint} {
+          @include stretch;
         }
         &.between\@#{$breakpoint} {
-          justify-content: space-between;
+          @include between;
         }
-        &.stretch\@#{$breakpoint} {
-          justify-content: stretch;
-        } // todo: document
         &.around\@#{$breakpoint} {
-          justify-content: space-around;
+          @include around;
         }
         &.evenly\@#{$breakpoint} {
-          justify-content: space-evenly;
+          @include evenly;
         }
 
-        // Align
+        // Align modifiers
         &.x-start\@#{$breakpoint} {
-          align-items: flex-start;
+          @include x-start;
         }
         &.x-end\@#{$breakpoint} {
-          align-items: flex-end;
+          @include x-end;
         }
         &.x-center\@#{$breakpoint} {
-          align-items: center;
+          @include x-center;
         }
         &.x-baseline\@#{$breakpoint} {
-          align-items: baseline;
+          @include x-baseline;
         }
         &.x-stretch\@#{$breakpoint} {
-          align-items: stretch;
+          @include x-stretch;
         }
 
+        // Content alignment
         &.x-content-start\@#{$breakpoint} {
-          align-content: flex-start;
+          @include x-content-start;
         }
         &.x-content-end\@#{$breakpoint} {
-          align-content: flex-end;
+          @include x-content-end;
         }
         &.x-content-center\@#{$breakpoint} {
-          align-content: center;
+          @include x-content-center;
         }
         &.x-content-between\@#{$breakpoint} {
-          align-content: space-between;
+          @include x-content-between;
         }
         &.x-content-around\@#{$breakpoint} {
-          align-content: space-around;
+          @include x-content-around;
         }
         &.x-content-evenly\@#{$breakpoint} {
-          align-content: space-evenly;
+          @include x-content-evenly;
         }
         &.x-content-stretch\@#{$breakpoint} {
-          align-content: stretch;
+          @include x-content-stretch;
         }
 
-        // Width (using column count)
-        & > .fill-auto\@#{$breakpoint} {
+        // Child elements
+        > .fill-auto\@#{$breakpoint} {
           @include fill-auto;
         }
-        & > .fill-full\@#{$breakpoint} {
+        > .fill-full\@#{$breakpoint} {
           @include fill-full;
         }
-        & > .grow\@#{$breakpoint} {
+        > .grow\@#{$breakpoint} {
           @include grow;
         }
-        & > .no-grow\@#{$breakpoint} {
+        > .no-grow\@#{$breakpoint} {
           @include no-grow;
         }
-        & > .order-first\@#{$breakpoint} {
+        > .order-first\@#{$breakpoint} {
           order: -1;
         }
-        & > .order-last\@#{$breakpoint} {
+        > .order-last\@#{$breakpoint} {
           order: 9999;
         }
-        & > .order-none\@#{$breakpoint} {
+        > .order-none\@#{$breakpoint} {
           order: 0;
         }
-        & > .shrink\@#{$breakpoint} {
+        > .shrink\@#{$breakpoint} {
           @include shrink;
         }
-        & > .no-shrink\@#{$breakpoint} {
+        > .no-shrink\@#{$breakpoint} {
           @include no-shrink;
         }
-        & > .shrink-twice\@#{$breakpoint} {
+        > .shrink-twice\@#{$breakpoint} {
           @include shrink-twice;
         }
-        & > .self-end\@#{$breakpoint} {
+        > .self-end\@#{$breakpoint} {
           @include self-end;
         }
-        & > .self-start\@#{$breakpoint} {
+        > .self-start\@#{$breakpoint} {
           @include self-start;
         }
-        & > .self-center\@#{$breakpoint} {
+        > .self-center\@#{$breakpoint} {
           @include self-center;
         }
-        & > .self-stretch\@#{$breakpoint} {
+        > .self-stretch\@#{$breakpoint} {
           @include self-stretch;
         }
-        & > .self-baseline\@#{$breakpoint} {
+        > .self-baseline\@#{$breakpoint} {
           @include self-baseline;
         }
-        & > .self-auto\@#{$breakpoint} {
+        > .self-auto\@#{$breakpoint} {
           @include self-auto;
         }
+
         @for $i from 1 through VAR.$column-count {
-          & > .fill-#{$i}\@#{$breakpoint} {
+          > .fill-#{$i}\@#{$breakpoint} {
             @include fill($i);
           }
-          & > .order-#{$i}\@#{$breakpoint} {
+          > .order-#{$i}\@#{$breakpoint} {
             order: $i;
           }
         }
       }
+
+      // Special case for inline@breakpoint
+      #{VAR.$parent-selector} .flex.inline\@#{$breakpoint},
+      #{VAR.$parent-selector} .flex\@#{$breakpoint}.inline\@#{$breakpoint} {
+        @include flex-inline;
+      }
     }
   }
 }

package/src/styles/layouts/_grid.scss

@@ -132,16 +132,22 @@ $alignments: (
 }
 
 @if VAR.$generate-utility-classes {
-  // Classes
-  #{VAR.$parent-selector} .grid {
-    @include grid;
-  }
+  // Build the flat selector list manually with proper escaping
+  $base-grid-selector: #{VAR.$parent-selector} + " .grid";
+  $all-grid-selectors: $base-grid-selector;
 
-  #{VAR.$parent-selector} .grid.inline {
-    @include grid-inline;
+  @each $breakpoint, $width in VAR.$breakpoints {
+    $all-grid-selectors: "#{$all-grid-selectors}, #{VAR.$parent-selector} .grid\\@#{$breakpoint}";
   }
 
-  #{VAR.$parent-selector} .grid {
+  // Apply base grid styles to all grid variants at once
+  #{$all-grid-selectors} {
+    @include grid;
+
+    &.inline {
+      @include grid-inline;
+    }
+
     // Auto-fit/fill Classes
     @each $size, $width in VAR.$grid-item-sizes {
       &.auto-fit-#{$size} {
@@ -166,70 +172,70 @@ $alignments: (
       @include flow-dense-items;
     }
 
+    // Basic column and row count
     @for $i from 1 through VAR.$column-count {
       &.cols-#{$i} {
         @include cols($i);
       }
-
       &.rows-#{$i} {
         @include rows($i);
       }
     }
 
-    // Grid Template Classes
-    @each $breakpoint, $width in VAR.$breakpoints {
-      // Responsive grid columns
-      @media (min-width: #{$width}) {
-        @for $i from 1 through VAR.$column-count {
-          &.cols-#{$i}\@#{$breakpoint} {
-            @include cols($i);
-          }
-
-          &.rows-#{$i}\@#{$breakpoint} {
-            @include rows($i);
-          }
-        }
-      }
-    }
-
-    // Generate Column Span Classes with Responsive Variants
+    // Basic span classes (non-responsive)
     @for $i from 1 through VAR.$column-count {
-      & .col-span-#{$i} {
+      .col-span-#{$i} {
         @include col-span($i);
       }
-
-      & .row-span-#{$i} {
+      .row-span-#{$i} {
         @include row-span($i);
       }
-
-      @each $breakpoint, $width in VAR.$breakpoints {
-        @media (min-width: #{$width}) {
-          & .col-span-#{$i}\@#{$breakpoint} {
-            @include col-span($i);
-          }
-
-          & .row-span-#{$i}\@#{$breakpoint} {
-            @include row-span($i);
-          }
-        }
-      }
     }
 
+    // Alignment classes
     @each $name, $value in $alignments {
       &.justify-#{$name} {
         @include justify($value);
       }
-
       &.align-#{$name} {
         @include align($value);
       }
-
       &.place-#{$name} {
         @include place($value);
       }
+    }
+  }
+
+  // Handle responsive variants
+  @each $breakpoint, $width in VAR.$breakpoints {
+    @media (min-width: #{$width}) {
+      // Responsive grid columns/rows
+      #{$all-grid-selectors} {
+        @for $i from 1 through VAR.$column-count {
+          &.cols-#{$i}\@#{$breakpoint} {
+            @include cols($i);
+          }
+          &.rows-#{$i}\@#{$breakpoint} {
+            @include rows($i);
+          }
+        }
+      }
+
+      // Responsive spans
+      #{$all-grid-selectors} {
+        @for $i from 1 through VAR.$column-count {
+          .col-span-#{$i}\@#{$breakpoint} {
+            @include col-span($i);
+          }
+          .row-span-#{$i}\@#{$breakpoint} {
+            @include row-span($i);
+          }
+        }
+      }
 
-      @each $breakpoint, $width in VAR.$breakpoints {
-        @media (min-width: #{$width}) {
+      // Responsive alignments
+      #{$all-grid-selectors} {
+        @each $name, $value in $alignments {
           &.justify-#{$name}\@#{$breakpoint} {
             @include justify($value);
           }

package/src/styles/mixins-map.json

@@ -1,4 +1,5 @@
 {
+  "^validate-tokens$": "() => mixin.name",
   "^container-base$": "() => mixin.name",
   "^container-padding-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
   "^container-padding-full$": "() => `${mixin.name}(full)`",