@nuvoui/core 1.1.6 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "main": "dist/nuvoui.css",
   "module": "src/styles/index.scss",

package/src/styles/base/_base.scss

@@ -3,7 +3,7 @@
 /* Import variables */
 @use '../utilities/variables' as *;
 @use '../utilities/media-queries' as media;
-
+  
 :root {
   --font-family-base: system-ui, -apple-system, "BlinkMacSystemFont", 'Segoe UI', "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
 }
@@ -69,14 +69,14 @@ button {
   padding: 0.5rem 1rem;
   border: 0;
   border-radius: 0.25rem;
-  background-color: var(--button-bg-color, #007bff); // Default button color
-  color: var(--button-text-color, #ffffff);
+  background-color: var(--button-bg-color, #007BFF); // Default button color
+  color: var(--button-text-color, #FFF);
   font-family: var(--font-family-base);
   cursor: pointer;
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 
   &:hover {
-    background-color: var(--button-bg-color-hover, #0056b3); // Hover button color
+    background-color: var(--button-bg-color-hover, #0056B3); // Hover button color
   }
   
   &:focus {
@@ -84,8 +84,8 @@ button {
   }
 
   &:disabled {
-    background-color: #e0e0e0; // Disabled button color
-    color: #a0a0a0; // Disabled text color
+    background-color: #E0E0E0; // Disabled button color
+    color: #A0A0A0; // Disabled text color
     cursor: not-allowed;
   }
 }
@@ -103,6 +103,7 @@ textarea {
   width: 100%; // Full width
   font-family: var(--font-family-base);
   transition: border 0.2s ease-in-out;
+
   &:focus {
     border-color: var(--link-color);
     outline: none;
@@ -123,6 +124,7 @@ select {
   width: 100%; // Full width
   font-family: var(--font-family-base);
   transition: border 0.2s ease-in-out;
+
   &:focus {
     border-color: var(--link-color);
     outline: none;

package/src/styles/index.scss

@@ -11,6 +11,7 @@
 @forward 'layouts/grid';
 
 // Utilities
+@forward 'utilities/alignment';
 @forward 'utilities/animations';
 @forward 'utilities/borders';
 @forward 'utilities/colors';
@@ -20,6 +21,7 @@
 @forward 'utilities/shadows';
 @forward 'utilities/sizing';
 @forward 'utilities/spacing';
+@forward 'utilities/transitions';
 @forward 'utilities/typography';
 @forward 'utilities/tooltips';
 @forward 'utilities/display';

package/src/styles/layouts/_container.scss

@@ -1,26 +1,31 @@
 @use 'sass:map';
-@use '../utilities/variables' as *;
+@use '../utilities/variables' as VAR;
 
 // Base container styles
 @mixin container-base {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
 }
 
+@mixin container-padding($padding) {
+  & {
+    padding-top: $padding;
+    padding-bottom: $padding;
+  }
+}
+
+
 // Responsive container mixin
 @mixin container($display: block) {
-  @include container-base;
-  
   display: $display;
-
-  @each $breakpoint, $width in $container-max-widths {
-    @media (min-width: map.get($breakpoints, $breakpoint)) {
-      max-width: $width;
+  @include container-base;
+  @each $breakpoint, $width in VAR.$breakpoints {
+    @media (min-width: $width) {
+      max-width: $width - 100px;
     }
   }
+  @include container-padding(1rem);
 }
 
 // Container classes
@@ -38,4 +43,10 @@
 
 .container-fluid {
   @include container-base;
+  @include container-padding(1rem);
+}
+
+.container-no-padding {
+  @include container;
+  @include container-padding(0);
 }

package/src/styles/layouts/_flex.scss

@@ -1,9 +1,50 @@
 // Section: Layout
 // Module: Flex | Flex Inline
 
+/**
+ * @component Flex
+ * @description Flexbox layout system for creating flexible page layouts
+ *
+ * @example
+ * <div class="flex row between x-center">
+ *   <div class="w-6">Left column (6 units)</div>
+ *   <div class="w-6">Right column (6 units)</div>
+ * </div>
+ * 
+ * <div class="flex col@md row@lg">
+ *   <!-- Changes direction based on breakpoint -->
+ * </div>
+ *
+ * @classes
+ * Base:
+ * - flex: Creates a flex container
+ * 
+ * Direction:
+ * - row: Sets flex-direction to row
+ * - col: Sets flex-direction to column
+ * - row-reverse: Reverses row direction
+ * - col-reverse: Reverses column direction
+ * 
+ * Alignment:
+ * - start/end/center: Controls justify-content
+ * - x-start/x-end/x-center: Controls align-items
+ * 
+ * Child elements:
+ * - w-{1-12}: Sets width based on column count
+ * - grow: Allows item to grow
+ * - shrink/shrink-0: Controls shrink behavior
+ *
+ * @responsive
+ * All classes support responsive variants using @breakpoint suffix:
+ * - row@md: Row direction on medium screens and up
+ * - between@lg: Space-between on large screens
+ *
+ * @see grid
+ */
+ 
 @use 'sass:math';
 @use '../utilities/media-queries' as MC;
-@use '../utilities/variables' as *;
+@use '../utilities/variables' as VAR;
 @use '../utilities/functions' as FN;
 
 /**
@@ -250,11 +291,11 @@
 @mixin no-grow { flex: none; }
 
 /**
- * @description Sets how many columns this would take using percentage of $column-count.
+ * @description Sets how many columns this would take using percentage of VAR.$column-count.
  * @param {Number} $size - The number of columns to span.
  */
 @mixin w-col($size) {
-  flex: 0 0 math.percentage(math.div($size, $column-count));
+  flex: 0 0 math.percentage(math.div($size, VAR.$column-count));
 }
 
 // Base flex container
@@ -296,8 +337,8 @@
   &.x-content-stretch { align-content: stretch; }
 
   // Child flex items (using column count)
-  > .w-auto { @include f-w-auto }
-  > .w-full { @include f-w-full }
+  > .w-auto { @include f-w-auto; }
+  > .w-full { @include f-w-full; }
   > .grow { @include grow; }
   > .no-grow { @include no-grow; }
 
@@ -308,20 +349,18 @@
   > .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) }
+  @for $i from 1 through VAR.$column-count {
+    > .w-#{$i} { @include w-col($i); }
     > .order-#{$i} { order: $i; }
   }
 }
 
-@each $breakpoint, $width in $breakpoints {
+@each $breakpoint, $width in VAR.$breakpoints {
   // Get breakpoint value using FN function
   $bp-val: FN.get-breakpoint-value($breakpoint);
   
   @media (min-width: #{$bp-val}) {
-    .flex\@#{$breakpoint} {
-      display: flex;
-
+    .flex {
       // Direction
       &.row\@#{$breakpoint} { flex-direction: row; }
       &.row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
@@ -364,12 +403,14 @@
       & > .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) }
+      & > .shrink\@#{$breakpoint} { @include shrink; }
+      & > .shrink-0\@#{$breakpoint} { @include shrink-0; }
+      & > .shrink-2\@#{$breakpoint} { @include shrink-2; }
+
+      @for $i from 1 through VAR.$column-count {
+        & > .w-#{$i}\@#{$breakpoint} { @include w-col($i); }
+        & > .col-#{$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

@@ -3,7 +3,7 @@
 
 @use 'sass:math';
 @use '../utilities/functions' as FN;
-@use '../utilities/variables' as *;
+@use '../utilities/variables' as VAR;
 
 /**
  * @description Establishes a grid container.
@@ -19,9 +19,23 @@
 @mixin cols($count) {grid-template-columns: repeat($count, minmax(0, 1fr));}
 @mixin rows($count) {grid-template-rows: repeat($count, minmax(0, 1fr));}
 
-@mixin grid-cols-custom($template) {
+
+/**
+* @description Establishes a grid container with a specified number of columns.
+* @param {number} $count - The number of columns.
+
+/// EXAMPLE USAGE
+.custom-grid {
+  display: grid;
+  @include cols-custom("1fr_auto_1fr");
+}
+
+*/
+
+@mixin cols-custom($template) {
   // Convert underscores to spaces so "1fr_auto" becomes "1fr auto"
   $converted: FN.str-replace($template, "_", " ");
+
   grid-template-columns: $converted;
 }
 
@@ -67,42 +81,69 @@
   grid-row: $row;
 }
 @mixin position-col($col) {
-  grid-column: $start;
+  grid-column: $col;
 }
 @mixin position-row($row) {
   grid-row: $row;
 }
 
-
-/// EXAMPLE USAGE
-.custom-grid {
-  display: grid;
-  @include grid-cols-custom("1fr_auto_1fr");
-}
+@mixin grid-gap($value) { gap: $value; }
+@mixin col-gap($value) { column-gap: $value; }
+@mixin row-gap($value) { row-gap: $value; }
 
 // Classes
 .grid { @include grid; }
 .grid.inline { @include grid-inline; }
 
+
+@for $i from 1 through VAR.$column-count {
+  .grid.cols-#{$i} { @include cols($i); }
+  .grid.rows-#{$i} { @include rows($i); }
+}
+
 // Grid Template Classes
-@each $breakpoint, $width in $breakpoints {
-    // Responsive grid columns
-    @media (min-width: #{$width}) {
-      .grid { @include grid; }
+@each $breakpoint, $width in VAR.$breakpoints {
+  // Responsive grid columns
+  @media (min-width: #{$width}) {
+    @for $i from 1 through VAR.$column-count {
+      .grid.cols-#{$i}\@#{$breakpoint} { @include cols($i); }
+      .grid.rows-#{$i}\@#{$breakpoint} { @include rows($i); }
+    }
+  }
+}
+
 
-      @for $i from 1 through $column-count {
-        .grid.cols-#{$i} { @include cols($i); }
-        .grid.rows-#{$i} { @include rows($i); }
+// Add corresponding classes
+.grid-gap-1 { @include grid-gap(0.25rem); }
+.grid-gap-2 { @include grid-gap(0.5rem); }
+.grid-gap-4 { @include grid-gap(1rem); }
+.col-gap-1 { @include col-gap(0.25rem); }
+.col-gap-2 { @include col-gap(0.5rem); }
+.col-gap-4 { @include col-gap(1rem); }
+.row-gap-1 { @include row-gap(0.25rem); }
+.row-gap-2 { @include row-gap(0.5rem); }
+.row-gap-4 { @include row-gap(1rem); }
+
+// Responsive grid gaps
+@each $breakpoint, $width in VAR.$breakpoints {
+  @media (min-width: #{$width}) {
+    .grid-gap-1\@#{$breakpoint} { @include grid-gap(0.25rem); }
+    .grid-gap-2\@#{$breakpoint} { @include grid-gap(0.5rem); }
+    .grid-gap-4\@#{$breakpoint} { @include grid-gap(1rem); }
+
+    .col-gap-1\@#{$breakpoint} { @include col-gap(0.25rem); }
+    .col-gap-2\@#{$breakpoint} { @include col-gap(0.5rem); }
+    .col-gap-4\@#{$breakpoint} { @include col-gap(1rem); }
     
-      .grid.cols-#{$i}\@#{$breakpoint} {
-        @include cols($i);
-      }
-    }
+    .row-gap-1\@#{$breakpoint} { @include row-gap(0.25rem); }
+    .row-gap-2\@#{$breakpoint} { @include row-gap(0.5rem); }
+    .row-gap-4\@#{$breakpoint} { @include row-gap(1rem); }
   }
 }
 
+
 // Generate Column Span Classes with Responsive Variants
-@for $i from 1 through $column-count {
+@for $i from 1 through VAR.$column-count {
   .span-col-#{$i} {
     @include span-col($i);
   }
@@ -111,7 +152,7 @@
     @include span-row($i);
   }
 
-  @each $breakpoint, $width in $breakpoints {
+  @each $breakpoint, $width in VAR.$breakpoints {
     @media (min-width: #{$width}) {
       .span-col-#{$i}\@#{$breakpoint} {
         @include span-col($i);
@@ -126,9 +167,9 @@
 
 
 // Auto-fit/fill Classes
-@each $breakpoint, $width in $breakpoints {
-  .grid.auto-fit-#{$breakpoint} { @include auto-fit($width); }
-  .grid.auto-fill-#{$breakpoint} { @include auto-fill($width); }
+@each $size, $width in VAR.$grid-item-sizes {
+  .grid.auto-fit-#{$size} { @include auto-fit($width); }
+  .grid.auto-fill-#{$size} { @include auto-fill($width); }
 }
 
 // Flow Classes
@@ -149,7 +190,7 @@ $alignments: (
   .align-items-#{$name} { align-items: $value; }
   .place-items-#{$name} { place-items: $value; }
 
-  @each $breakpoint, $width in $breakpoints {
+  @each $breakpoint, $width in VAR.$breakpoints {
     @media (min-width: #{$width}) {
       .justify-items-#{$name}\@#{$breakpoint} {
         justify-items: $value;