@nuvoui/core 1.1.5 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "main": "dist/nuvoui.css",
   "module": "src/styles/index.scss",
@@ -51,6 +51,7 @@
     "access": "public"
   },
   "devDependencies": {
+    "chokidar": "^4.0.3",
     "cssnano": "^7.0.6",
     "glob": "^11.0.0",
     "postcss": "^8.4.49",

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

@@ -5,11 +5,15 @@
 @forward 'base/reset';
 @forward 'base/base';
 
+// Layouts
+@forward 'layouts/container';
+@forward 'layouts/flex';
+@forward 'layouts/grid';
+
 // Utilities
 @forward 'utilities/animations';
 @forward 'utilities/borders';
 @forward 'utilities/colors';
-@forward 'utilities/display';
 @forward 'utilities/opacity';
 @forward 'utilities/position';
 @forward 'utilities/media-queries';
@@ -18,11 +22,10 @@
 @forward 'utilities/spacing';
 @forward 'utilities/typography';
 @forward 'utilities/tooltips';
+@forward 'utilities/display';
+
+@forward 'utilities/helpers';
 
-// Layouts
-@forward 'layouts/container';
-@forward 'layouts/flex';
-@forward 'layouts/grid';
 
 // Theme
 @forward 'themes/theme';

package/src/styles/layouts/_flex.scss

@@ -1,63 +1,258 @@
+// Section: Layout
+// Module: Flex | Flex Inline
+
 @use 'sass:math';
+@use '../utilities/media-queries' as MC;
 @use '../utilities/variables' as *;
-@use '../utilities/functions' as *;
+@use '../utilities/functions' as FN;
 
-// Flex Container Mixins
+/**
+ * @description Establishes a flex container.
+ */
 @mixin flex {display: flex;}
+
+/**
+ * @description Establishes a flex-inline container.
+ */
 @mixin flex-inline {display: inline-flex;}
 
-// Direction Mixins
+/**
+ * @description Sets flex-direction to row.
+ * @dependencies flex | flex-inline
+ */
 @mixin row {flex-direction: row;}
+
+/**
+ * @description Sets flex-direction to row-reverse.
+ * @dependencies flex | flex-inline
+ */
 @mixin row-reverse {flex-direction: row-reverse;}
+
+/**
+ * @description Sets flex-direction to column.
+ * @dependencies flex | flex-inline
+ */
 @mixin col {flex-direction: column;}
+
+/**
+ * @description Sets flex-direction to column-reverse.
+ * @dependencies flex | flex-inline
+ */
 @mixin col-reverse {flex-direction: column-reverse;}
 
-// Wrap Mixins
+/**
+ * @description Sets flex-wrap to wrap.
+ * @dependencies flex | flex-inline
+ */
 @mixin wrap {flex-wrap: wrap;}
+
+/**
+ * @description Sets flex-wrap to nowrap.
+ * @dependencies flex | flex-inline
+ */
 @mixin nowrap {flex-wrap: nowrap;}
+
+/**
+ * @description Sets flex-wrap to wrap-reverse
+ * @dependencies flex | flex-inline
+ */
 @mixin wrap-reverse {flex-wrap: wrap-reverse;}
 
-// Main Axis Alignment Mixins
+/**
+ * @description Sets justify-content to flex-start
+ * @dependencies flex | flex-inline
+ */
 @mixin start {justify-content: flex-start;}
+
+/**
+ * @description Sets justify-content to flex-end
+ * @dependencies flex | flex-inline
+ */
 @mixin end {justify-content: flex-end;}
+
+/**
+ * @description Sets justify-content to center
+ * @dependencies flex | flex-inline
+ */
 @mixin center {justify-content: center;}
+
+/**
+ * @description Sets justify-content to space-between
+ * @dependencies flex | flex-inline
+ */
 @mixin between {justify-content: space-between;}
+
+/**
+ * @description Sets justify-content to space-around
+ * @dependencies flex | flex-inline
+ */
 @mixin around {justify-content: space-around;}
+
+/**
+ * @description Sets justify-content to space-evenly
+ * @dependencies flex | flex-inline
+ */
 @mixin evenly {justify-content: space-evenly;}
 
 // Cross Axis Alignment Mixins
+
+/**
+ * @description Sets align-items to flex-start - aligns items to the start of the cross axis.
+ * @dependencies flex | flex-inline
+ */
 @mixin x-start {align-items: flex-start;}
+
+/**
+ * @description Sets align-items to flex-end - aligns items to the end of the cross axis.
+ * @dependencies flex | flex-inline
+ */
 @mixin x-end {align-items: flex-end;}
+
+/**
+ * @description Sets align-items to center - aligns items to the center of the cross axis.
+ * @dependencies flex | flex-inline
+ */
 @mixin x-center {align-items: center;}
+
+/**
+ * @description Sets align-items to stretch - aligns items to the stretch of the cross axis.
+ * @dependencies flex | flex-inline
+ */
 @mixin x-stretch {align-items: stretch;}
+
+/**
+ * @description Sets align-items to baseline - aligns items to the baseline of the cross axis.
+ * @dependencies flex | flex-inline
+ */
 @mixin x-baseline {align-items: baseline;}
 
 // Cross Axis Content Mixins
+
+/**
+ * @description Sets align-content to flex-start - aligns content to the start of the cross axis.
+ * @dependencies flex | flex-inline
+ */
 @mixin x-content-start { align-content: flex-start; }
+
+/**
+ * @description Sets align-content to flex-end - aligns content to the end of the cross axis.
+ * @dependencies flex | flex-inline
+ */
 @mixin x-content-end { align-content: flex-end; }
+
+/**
+ * @description Sets align-content to center - aligns content to the center of the cross axis.
+ * @dependencies flex | flex-inline
+ */
 @mixin x-content-center { align-content: center; }
+
+/**
+ * @description Sets align-content to space-between - aligns content to the space between the cross axis.
+ * @dependencies flex | flex-inline
+ */
 @mixin x-content-between { align-content: space-between; }
+
+/**
+ * @description Sets align-content to space-around - aligns content to the space around the cross axis.
+ * @dependencies flex | flex-inline
+ */
 @mixin x-content-around { align-content: space-around; }
+
+/**
+ * @description Sets align-content to space-evenly - aligns content to the space evenly between the cross axis.
+ * @dependencies flex | flex-inline
+ */
 @mixin x-content-evenly { align-content: space-evenly; }
+
+/**
+ * @description Sets align-content to stretch - aligns content to the stretch of the cross axis.
+ * @dependencies flex | flex-inline
+ */
 @mixin x-content-stretch { align-content: stretch; }
 
 // Self Alignment Mixins
+
+/**
+ * @description Sets align-self to auto
+ * @dependencies flex | flex-inline
+ */
 @mixin self-auto {align-self: auto;}
+
+/**
+ * @description Sets align-self to flex-start
+ * @dependencies flex | flex-inline
+ */
 @mixin self-start {align-self: flex-start;}
+
+/**
+ * @description Sets align-self to flex-end
+ * @dependencies flex | flex-inline
+ */
 @mixin self-end {align-self: flex-end;}
+
+/**
+ * @description Sets align-self to center
+ * @dependencies flex | flex-inline
+ */
 @mixin self-center {align-self: center;}
+
+/**
+ * @description Sets align-self to stretch
+ * @dependencies flex | flex-inline
+ */
 @mixin self-stretch {align-self: stretch;}
 
+/**
+ * @description Sets align-self to baseline
+ * @dependencies flex | flex-inline
+ */
+@mixin self-baseline {align-self: baseline;}
+
+/**
+ * @description Sets flex-shrink to 1 - allows the item to shrink.
+ * @dependencies flex | flex-inline
+ */
 @mixin shrink {flex-shrink: 1;}
+
+/**
+ * @description Sets flex-shrink to 0 - prevents the item from shrinking.
+ * @dependencies flex | flex-inline
+ */
 @mixin shrink-0 {flex-shrink: 0;}
+
+/**
+ * @description Sets flex-shrink to 2 - allows the item to shrink twice as much as the other items.
+ * @dependencies flex | flex-inline
+ */
 @mixin shrink-2 {flex-shrink: 2;}
 
+
 // Flex Child Mixins
+
+/**
+ * @description Sets flex to 0 0 100%
+ */
 @mixin f-w-full {flex: 0 0 100%;}
+
+/**
+ * @description Sets flex to 1 1 auto - allows the item to grow and shrink.
+ */
 @mixin f-w-auto {flex: 1 1 auto;}
+
+/**
+ * @description Sets flex to 1 1 0% - allows the item to grow but not shrink.
+ */
 @mixin grow { flex: 1 1 0%; }
+
+/**
+ * @description Sets flex to none - prevents the item from growing.
+ */
 @mixin no-grow { flex: none; }
 
+/**
+ * @description Sets how many columns this would take using percentage of $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));
 }
@@ -119,11 +314,14 @@
   }
 }
 
-
-// Responsive variants
 @each $breakpoint, $width in $breakpoints {
-  @media (min-width: $width) {
+  // Get breakpoint value using FN function
+  $bp-val: FN.get-breakpoint-value($breakpoint);
+  
+  @media (min-width: #{$bp-val}) {
     .flex {
+      display: flex;
+
       // Direction
       &.row\@#{$breakpoint} { flex-direction: row; }
       &.row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }

package/src/styles/layouts/_grid.scss

@@ -1,14 +1,31 @@
+// Section: Layout
+// Module: Grid | Grid Inline
+
 @use 'sass:math';
+@use '../utilities/functions' as FN;
 @use '../utilities/variables' as *;
 
-// Grid Container Mixins
+/**
+ * @description Establishes a grid container.
+ */
 @mixin grid {display: grid;}
+
+/**
+ * @description Establishes a inline-grid container.
+ */
 @mixin grid-inline {display: inline-grid;}
 
 // Grid Template Mixins
 @mixin cols($count) {grid-template-columns: repeat($count, minmax(0, 1fr));}
 @mixin rows($count) {grid-template-rows: repeat($count, minmax(0, 1fr));}
 
+@mixin cols-custom($template) {
+  // Convert underscores to spaces so "1fr_auto" becomes "1fr auto"
+  $converted: FN.str-replace($template, "_", " ");
+
+  grid-template-columns: $converted;
+}
+
 // Auto-fit/fill Mixins
 @mixin auto-fit($min-width) {grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));}
 @mixin auto-fill($min-width) {grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr));}
@@ -19,8 +36,23 @@
 @mixin flow-dense-items { grid-auto-flow: dense; }
 
 // Grid Alignment Mixins
+
+/**
+ * @description justify-items container.
+ * @param {string} $value - The value for the justify-items property.
+ */
 @mixin justify-items($value) {justify-items: $value;}
+
+/**
+ * @description Establishes a align-items container.
+ * @param {string} $value - The value for the align-items property.
+ */
 @mixin align-items($value) {align-items: $value;}
+
+/**
+ * @description Establishes a place-items container.
+ * @param {string} $value - The value for the place-items property.
+ */
 @mixin place-items($value) {place-items: $value;}
 
 // Grid Item Placement Mixins
@@ -43,18 +75,26 @@
 }
 
 
+/// EXAMPLE USAGE
+.custom-grid {
+  display: grid;
+  @include cols-custom("1fr_auto_1fr");
+}
+
 // Classes
 .grid { @include grid; }
 .grid.inline { @include grid-inline; }
 
 // Grid Template Classes
-@for $i from 1 through $column-count {
-  .grid.cols-#{$i} { @include cols($i); }
-  .grid.rows-#{$i} { @include rows($i); }
-
-  // Responsive grid columns
-  @each $breakpoint, $width in $breakpoints {
-    @media (min-width: $width) {
+@each $breakpoint, $width in $breakpoints {
+    // Responsive grid columns
+    @media (min-width: #{$width}) {
+      .grid { @include grid; }
+
+      @for $i from 1 through $column-count {
+        .grid.cols-#{$i} { @include cols($i); }
+        .grid.rows-#{$i} { @include rows($i); }
+    
       .grid.cols-#{$i}\@#{$breakpoint} {
         @include cols($i);
       }
@@ -73,7 +113,7 @@
   }
 
   @each $breakpoint, $width in $breakpoints {
-    @media (min-width: $width) {
+    @media (min-width: #{$width}) {
       .span-col-#{$i}\@#{$breakpoint} {
         @include span-col($i);
       }
@@ -111,14 +151,14 @@ $alignments: (
   .place-items-#{$name} { place-items: $value; }
 
   @each $breakpoint, $width in $breakpoints {
-    @media (min-width: $width) {
+    @media (min-width: #{$width}) {
       .justify-items-#{$name}\@#{$breakpoint} {
         justify-items: $value;
       }
       .align-items-#{$name}\@#{$breakpoint} {
         align-items: $value;
       }
-      .place-items-#{$name}\@#{$breakpoint} {
+      .place-items-#{$name}\@#{$breakpoint} {  
         place-items: $value;
       }
     }