@nuvoui/core 1.1.3 → 1.1.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.1.3",
-  "description": "NuvoUI Core SCSS Library",
+  "version": "1.1.5",
+  "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "main": "dist/nuvoui.css",
   "module": "src/styles/index.scss",
   "files": [
@@ -25,12 +25,18 @@
   "keywords": [
     "scss",
     "css",
+    "framework",
     "nuvoui",
     "ui-library",
     "design-system",
-    "frontend",
     "responsive",
-    "modern"
+    "animations",
+    "frontend",
+    "modern-ui",
+    "web-development",
+    "responsive-design",
+    "developer-friendly",
+    "mixins"
   ],
   "author": {
     "name": "AALA IT Solutions",
@@ -40,6 +46,7 @@
   "bugs": {
     "url": "https://github.com/NuvoUI/core/issues"
   },
+  "homepage": "https://nuvoui.io/",
   "publishConfig": {
     "access": "public"
   },

package/src/styles/base/_base.scss

@@ -2,6 +2,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;
@@ -18,6 +19,7 @@ body {
   font-weight: 400;
   line-height: 1.5;
   color: var(--text-primary);
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 // Headings
@@ -62,6 +64,102 @@ small {
   font-size: map.get($font-sizes, 'sm');
 }
 
+// Buttons
+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);
+  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
+  }
+  
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: #e0e0e0; // Disabled button color
+    color: #a0a0a0; // Disabled text color
+    cursor: not-allowed;
+  }
+}
+
+// Inputs
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="search"],
+textarea {
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  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;
+  }
+}
+
+// Checkboxes and Radio Buttons
+input[type="checkbox"],
+input[type="radio"] {
+  margin-right: 0.5rem; // Space between input and label
+}
+
+// Selects
+select {
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 0.25rem;
+  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;
+  }
+}
+
+// Blockquotes
+blockquote {
+  margin: 1rem 0;
+  padding: 0.5rem 1rem;
+  border-left: 4px solid var(--border);
+  font-style: italic;
+}
+
+// Horizontal Rule
+hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1rem 0;
+}
+
+// Images
+img {
+  max-width: 100%; // Responsive images
+  height: auto;
+}
+
+// Figures and Captions
+figure {
+  margin: 1rem 0;
+}
+
+figcaption {
+  font-size: 0.875rem; // Smaller font for captions
+  color: var(--text-secondary, #666); // Optional secondary text color
+}
+
 // Links
 a {
   color: var(--link-color);
@@ -84,10 +182,19 @@ a {
   border: 0 !important;
 }
 
-.focus\:outline-none:focus {
-  outline: none;
-}
 
-.focus\:ring:focus {
-  box-shadow: 0 0 0 3px rgb(66 153 225 / 50%);
-}
+
+code {
+  font-family: 'Courier New', Courier, monospace; 
+  background-color: #f8f8f8; 
+  color: #d63384; 
+  padding: 2px 6px;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  white-space: nowrap;
+
+  @include media.dark-mode {
+    background-color: #333; 
+    color: #f8f8f2; 
+  }
+}

package/src/styles/base/_reset.scss

@@ -7,7 +7,7 @@
   padding: 0;
 }
 
-// Remove default margin
+// Remove default margin and padding
 body,
 h1,
 h2,
@@ -21,6 +21,7 @@ blockquote,
 dl,
 dd {
   margin: 0;
+  padding: 0;
 }
 
 // Set core body defaults
@@ -51,11 +52,6 @@ textarea,
 select {
   font: inherit;
   transition: all 0.2s ease-in-out;
-  
-  &:focus {
-      box-shadow: inset 0 0 7px 0 #60b0cd; /* Change this to your preferred color and width */
-      outline: 2px solid #40c1bf; /* Change this to your preferred color and width */
-  }
 }
 
 // Remove all animations and transitions for people that prefer not to see them

package/src/styles/index.scss

@@ -24,9 +24,7 @@
 @forward 'layouts/flex';
 @forward 'layouts/grid';
 
-// Themes
-@forward 'themes/light';
-@forward 'themes/dark';
+// Theme
 @forward 'themes/theme';
 
 @forward './mixins-map';

package/src/styles/layouts/_container.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../utilities/variables' as *;
 
-// Container mixins
+// Base container styles
 @mixin container-base {
   width: 100%;
   margin-left: auto;
@@ -10,39 +10,30 @@
   padding-right: 1rem;
 }
 
-@mixin container {
+// Responsive container mixin
+@mixin container($display: block) {
   @include container-base;
   
-  & {
-    @each $breakpoint, $width in $container-max-widths {
-      @media (min-width: map.get($breakpoints, $breakpoint)) {
-          max-width: $width;
-      }
+  display: $display;
+
+  @each $breakpoint, $width in $container-max-widths {
+    @media (min-width: map.get($breakpoints, $breakpoint)) {
+      max-width: $width;
     }
   }
 }
 
-@mixin container-flex {
-  display: flex;
-  @include container;
-}
-
-@mixin container-grid {
-  display: grid;
-  @include container;
-}
-
 // Container classes
 .container {
   @include container;
 }
 
 .container-flex {
-  @include container-flex;
+  @include container(flex);
 }
 
 .container-grid {
-  @include container-grid;
+  @include container(grid);
 }
 
 .container-fluid {

package/src/styles/layouts/_flex.scss

@@ -26,11 +26,20 @@
 @mixin evenly {justify-content: space-evenly;}
 
 // Cross Axis Alignment Mixins
-@mixin align-start {align-items: flex-start;}
-@mixin align-end {align-items: flex-end;}
-@mixin align-center {align-items: center;}
-@mixin align-stretch {align-items: stretch;}
-@mixin align-baseline {align-items: baseline;}
+@mixin x-start {align-items: flex-start;}
+@mixin x-end {align-items: flex-end;}
+@mixin x-center {align-items: center;}
+@mixin x-stretch {align-items: stretch;}
+@mixin x-baseline {align-items: baseline;}
+
+// Cross Axis Content Mixins
+@mixin x-content-start { align-content: flex-start; }
+@mixin x-content-end { align-content: flex-end; }
+@mixin x-content-center { align-content: center; }
+@mixin x-content-between { align-content: space-between; }
+@mixin x-content-around { align-content: space-around; }
+@mixin x-content-evenly { align-content: space-evenly; }
+@mixin x-content-stretch { align-content: stretch; }
 
 // Self Alignment Mixins
 @mixin self-auto {align-self: auto;}
@@ -50,7 +59,7 @@
 @mixin no-grow { flex: none; }
 
 @mixin w-col($size) {
-  flex: 0 0 math.percentage(math.div($size, $column-count)) !important;
+  flex: 0 0 math.percentage(math.div($size, $column-count));
 }
 
 // Base flex container
@@ -77,12 +86,20 @@
   &.evenly { justify-content: space-evenly; }
   
   // Align modifiers
-  &.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; }
+  &.x-start { align-items: flex-start; }
+  &.x-end { align-items: flex-end; }
+  &.x-center { align-items: center; }
+  &.x-baseline { align-items: baseline; }
+  &.x-stretch { align-items: stretch; }
   
+  &.x-content-start { align-content: flex-start; }
+  &.x-content-end { align-content: flex-end; }
+  &.x-content-center { align-content: center; }
+  &.x-content-between { align-content: space-between; }
+  &.x-content-around { align-content: space-around; }
+  &.x-content-evenly { align-content: space-evenly; }
+  &.x-content-stretch { align-content: stretch; }
+
   // Child flex items (using column count)
   > .w-auto { @include f-w-auto }
   > .w-full { @include f-w-full }
@@ -127,12 +144,20 @@
       &.evenly\@#{$breakpoint} { justify-content: space-evenly; }
 
       // Align
-      &.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; }
-
+      &.x-start\@#{$breakpoint} { align-items: flex-start; }
+      &.x-end\@#{$breakpoint} { align-items: flex-end; }
+      &.x-center\@#{$breakpoint} { align-items: center; }
+      &.x-baseline\@#{$breakpoint} { align-items: baseline; }
+      &.x-stretch\@#{$breakpoint} { align-items: stretch; }
+
+      &.x-content-start\@#{$breakpoint} { align-content: flex-start; }
+      &.x-content-end\@#{$breakpoint} { align-content: flex-end; }
+      &.x-content-center\@#{$breakpoint} { align-content: center; }
+      &.x-content-between\@#{$breakpoint} { align-content: space-between; }
+      &.x-content-around\@#{$breakpoint} { align-content: space-around; }
+      &.x-content-evenly\@#{$breakpoint} { align-content: space-evenly; }
+      &.x-content-stretch\@#{$breakpoint} { align-content: stretch; }
+      
       // Width (using column count)
       & > .w-auto\@#{$breakpoint} { @include f-w-auto; }
       & > .w-full\@#{$breakpoint} { @include f-w-full; }

package/src/styles/layouts/_grid.scss

@@ -1,74 +1,47 @@
+@use 'sass:math';
 @use '../utilities/variables' as *;
 
 // Grid Container Mixins
-@mixin grid {
-  display: grid;
-}
-
-@mixin grid-inline {
-  display: inline-grid;
-}
+@mixin grid {display: grid;}
+@mixin grid-inline {display: inline-grid;}
 
 // Grid Template Mixins
-@mixin grid-cols($count) {
-  grid-template-columns: repeat($count, minmax(0, 1fr));
-}
-
-@mixin grid-rows($count) {
-  grid-template-rows: repeat($count, minmax(0, 1fr));
-}
+@mixin cols($count) {grid-template-columns: repeat($count, minmax(0, 1fr));}
+@mixin rows($count) {grid-template-rows: repeat($count, minmax(0, 1fr));}
 
 // Auto-fit/fill Mixins
-@mixin grid-auto-fit($min-width) {
-  grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
-}
-
-@mixin grid-auto-fill($min-width) {
-  grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr));
-}
+@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));}
 
 // Grid Flow Mixins
-@mixin grid-flow-row { grid-auto-flow: row; }
-@mixin grid-flow-col { grid-auto-flow: column; }
-@mixin grid-flow-dense { grid-auto-flow: dense; }
+@mixin flow-in-row { grid-auto-flow: row; }
+@mixin flow-in-col { grid-auto-flow: column; }
+@mixin flow-dense-items { grid-auto-flow: dense; }
 
 // Grid Alignment Mixins
-@mixin justify-items($value) {
-  justify-items: $value;
-}
-
-@mixin align-items($value) {
-  align-items: $value;
-}
-
-@mixin place-items($value) {
-  place-items: $value;
-}
+@mixin justify-items($value) {justify-items: $value;}
+@mixin align-items($value) {align-items: $value;}
+@mixin place-items($value) {place-items: $value;}
 
 // Grid Item Placement Mixins
-@mixin col-span($span) {
-  grid-column: span $span / span $span;
-}
+@mixin span-col($span) {grid-column: span $span / span $span;}
+@mixin span-row($span) {grid-row: span $span / span $span;}
+@mixin col-start($start) {grid-column-start: $start;}
+@mixin col-end($end) {grid-column-end: $end;}
+@mixin row-start($start) {grid-row-start: $start;}
+@mixin row-end($end) {grid-row-end: $end;}
 
-@mixin row-span($span) {
-  grid-row: span $span / span $span;
+@mixin grid-position($col, $row) {
+  grid-column: $col;
+  grid-row: $row;
 }
-
-@mixin col-start($start) {
-  grid-column-start: $start;
-}
-
-@mixin col-end($end) {
-  grid-column-end: $end;
+@mixin position-col($col) {
+  grid-column: $start;
 }
-
-@mixin row-start($start) {
-  grid-row-start: $start;
+@mixin position-row($row) {
+  grid-row: $row;
 }
 
-@mixin row-end($end) {
-  grid-row-end: $end;
-}
 
 // Classes
 .grid { @include grid; }
@@ -76,14 +49,14 @@
 
 // Grid Template Classes
 @for $i from 1 through $column-count {
-  .grid.cols-#{$i} { @include grid-cols($i); }
-  .grid.rows-#{$i} { @include grid-rows($i); }
+  .grid.cols-#{$i} { @include cols($i); }
+  .grid.rows-#{$i} { @include rows($i); }
 
   // Responsive grid columns
   @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
-      .grid.cols-#{$i}#{$breakpoint} {
-        @include grid-cols($i);
+      .grid.cols-#{$i}\@#{$breakpoint} {
+        @include cols($i);
       }
     }
   }
@@ -91,14 +64,22 @@
 
 // Generate Column Span Classes with Responsive Variants
 @for $i from 1 through $column-count {
-  .col-span-#{$i} {
-    @include col-span($i);
+  .span-col-#{$i} {
+    @include span-col($i);
+  }
+
+  .span-row-#{$i} {
+    @include span-row($i);
   }
 
   @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
-      .col-span-#{$i}\@#{$breakpoint} {
-        @include col-span($i);
+      .span-col-#{$i}\@#{$breakpoint} {
+        @include span-col($i);
+      }
+
+      .span-row-#{$i}\@#{$breakpoint} {
+        @include span-row($i);
       }
     }
   }
@@ -107,14 +88,14 @@
 
 // Auto-fit/fill Classes
 @each $breakpoint, $width in $breakpoints {
-  .grid.auto-fit-#{$breakpoint} { @include grid-auto-fit($width); }
-  .grid.auto-fill-#{$breakpoint} { @include grid-auto-fill($width); }
+  .grid.auto-fit-#{$breakpoint} { @include auto-fit($width); }
+  .grid.auto-fill-#{$breakpoint} { @include auto-fill($width); }
 }
 
 // Flow Classes
-.grid.flow-row { @include grid-flow-row; }
-.grid.flow-col { @include grid-flow-col; }
-.grid.flow-dense { @include grid-flow-dense; }
+.grid.flow-row { @include flow-in-row; }
+.grid.flow-col { @include flow-in-col; }
+.grid.flow-dense { @include flow-dense-items; }
 
 // Alignment Classes
 $alignments: (