@nuvoui/core 1.2.4 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "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 lint && npm run build"
+    "prepublishOnly": "npm run format && npm run build"
   },
   "repository": {
     "type": "git",
@@ -75,16 +75,15 @@
     "last 2 versions",
     "not dead"
   ],
- 
   "devDependencies": {
     "cssnano": "^7.0.6",
-    "postcss": "^8.4.49",
-    "postcss-cli": "^11.0.0",
+    "postcss": "^8.5.3",
+    "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.0",
     "postcss-nested": "^7.0.2",
-    "prettier": "^3.3.3",
-    "sass": "^1.81.0",
-    "stylelint": "^16.10.0",
+    "prettier": "^3.5.3",
+    "sass": "^1.85.1",
+    "stylelint": "^16.16.0",
     "stylelint-config-standard-scss": "^13.1.0"
   },
   "peerDependencies": {

package/src/styles/abstracts/_config.scss

@@ -5,13 +5,25 @@
 $generate-utility-classes: true !default;
 $enable-dark-mode: true !default;
 $enable-rtl: true !default;
-$enable-debuger: false !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;
+
 // Text
-$base-size: 16 !default; 
-$font-family: system-ui, -apple-system, "BlinkMacSystemFont", 'Segoe UI', "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
+$base-size: 16 !default;
+$font-family:
+  system-ui,
+  -apple-system,
+  "BlinkMacSystemFont",
+  "Segoe UI",
+  "Roboto",
+  "Oxygen",
+  "Ubuntu",
+  "Cantarell",
+  sans-serif !default;
 
 // Global variables that might be used across different modules
 $column-count: 12 !default; // todo: pending
@@ -37,7 +49,8 @@ $color-primitives: (
   "pink": #ec4899,
 ) !default;
 
-$theme-tokens: ("background", "foreground", "surface", "border", "text-primary", "text-secondary") !default;
+// Add item here to include in the theme
+$theme-tokens: ("background", "foreground", "surface", "border", "text-default", "text-muted") !default;
 
 // Default theme config (can be overridden)
 $light-theme: (
@@ -45,8 +58,8 @@ $light-theme: (
   "foreground": #1a1a1a,
   "surface": #fff,
   "border": #e5e7eb,
-  "text-primary": #1a1a1a,
-  "text-secondary": #4b5563,
+  "text-default": #1a1a1a,
+  "text-muted": #4b5563,
 ) !default;
 
 $dark-theme: (
@@ -54,8 +67,8 @@ $dark-theme: (
   "foreground": #f1f1f1,
   "surface": #2e2e2e,
   "border": #2e2e2e,
-  "text-primary": #f1f1f1,
-  "text-secondary": #a3a3a3,
+  "text-default": #f1f1f1,
+  "text-muted": #a3a3a3,
 ) !default;
 
 $shadow-colors: (
@@ -85,36 +98,76 @@ $grid-item-sizes: (
 
 // _variables.scss
 $font-sizes: (
-  "xs": 0.75rem,  // 12px
-  "sm": 0.875rem, // 14px
-  "md": 1rem,     // 16px
-  "lg": 1.25rem,  // 20px
-  "xl": 1.5rem,   // 24px
-  "2xl": 1.75rem, // 28px
-  "3xl": 2rem,    // 32px
-  "4xl": 2.5rem   // 40px
+  "xs": 0.75rem,
+  // 12px
+  "sm": 0.875rem,
+  // 14px
+  "md": 1rem,
+  // 16px
+  "lg": 1.25rem,
+  // 20px
+  "xl": 1.5rem,
+  // 24px
+  "2xl": 1.75rem,
+  // 28px
+  "3xl": 2rem,
+  // 32px
+  "4xl": 2.5rem, // 40px
 ) !default;
 
 // Updated spacing map
 $spacings: (
   0: 0,
-  1: 0.25rem,   // 4px
-  2: 0.5rem,    // 8px
-  3: 0.75rem,   // 12px
-  4: 1rem,      // 16px
-  5: 1.25rem,   // 20px
-  6: 1.5rem,    // 24px
-  8: 2rem,      // 32px
-  10: 2.5rem,   // 40px
-  12: 3rem,     // 48px
-  16: 4rem,     // 64px
-  20: 5rem,     // 80px
-  24: 6rem,     // 96px
-  32: 8rem,     // 128px
-  40: 10rem,    // 160px
-  48: 12rem,    // 192px 
-  56: 14rem,    // 224px   
-  64: 16rem,    // 256px
-)  !default;
+  1: 0.25rem,
+  // 4px
+  2: 0.5rem,
+  // 8px
+  3: 0.75rem,
+  // 12px
+  4: 1rem,
+  // 16px
+  5: 1.25rem,
+  // 20px
+  6: 1.5rem,
+  // 24px
+  8: 2rem,
+  // 32px
+  10: 2.5rem,
+  // 40px
+  12: 3rem,
+  // 48px
+  16: 4rem,
+  // 64px
+  20: 5rem,
+  // 80px
+  24: 6rem,
+  // 96px
+  32: 8rem,
+  // 128px
+  40: 10rem,
+  // 160px
+  48: 12rem,
+  // 192px
+  56: 14rem,
+  // 224px
+  64: 16rem, // 256px
+) !default;
 
 $percentages: (0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100) !default;
+
+// Common border width values that are most useful
+$border-widths: (0, 1, 2, 4, 8) !default;
+
+// Common border radius values that are most useful
+$border-radii: (
+  "xs": 0.25rem,
+  "sm": 0.375rem,
+  "md": 0.5rem,
+  "lg": 0.75rem,
+  "xl": 1rem,
+  "2xl": 1.25rem,
+  "full": 9999px,
+  "none": 0,
+) !default;
+
+$parent-selector: "" !default;

package/src/styles/abstracts/_functions.scss

@@ -13,18 +13,21 @@
   @return $string;
 }
 
-@function get-breakpoint-value($bp) {
-  @if map.has-key($breakpoints, $bp) {
-    @return map.get($breakpoints, $bp);
+@function get-breakpoint-value($bp, $debug: false) {
+  @if map.has-key($breakpoints, #{$bp}) {
+    @return map.get($breakpoints, #{$bp});
   } @else if meta.type-of($bp) == number {
     @return $bp;
   } @else {
-    @warn 'Invalid breakpoint: #{$bp}';
+    @error 'Invalid breakpoint: #{$bp}';
     @return null;
   }
 }
 
 @function strip-unit($value) {
+  @if meta.type-of($value) != number {
+    @error "strip-unit() requires a number";
+  }
   @return math.div($value, ($value * 0 + 1));
 }
 
@@ -38,44 +41,74 @@
   }
 }
 
-@function get-unit($value) {
-  $value-str: #{$value};
+/**
+ * Ensures a value has a unit, adding $default-unit if none exists
+ * @param {Number|String} $val - The value to check
+ * @return {String} - The value with units
+ */
+@function fix-units($val, $unit: $default-unit, $debug: null) {
+  @if meta.type-of($val) != number and meta.type-of($val) != string {
+    @error "fix-units() requires a number or string value";
+    @return null;
+  }
+
+  @if meta.type-of($val) == number {
+    @if math.is-unitless($val) {
+      @return $val + $unit;
+    }
+    @return $val;
+  }
+
+  $val: strip-quotes($val);
+
+  @if $val == auto or $val == inherit or $val == initial or $val == "min-content" or $val == "max-content" or $val == "fit-content" {
+    @return #{$val};
+  }
+
+  @if string.index($val, "px") or string.index($val, "em") or string.index($val, "rem") or string.index($val, "%") or string.index($val, "vh") or string.index($val, "vw") or string.index($val, "vmin") or string.index($val, "vmax") {
+    @return #{$val};
+  }
+
+  @if $debug {
+    @debug "fix-units() value: " + $val;
+  }
+
+  @return string.unquote($val + $unit);
+}
+
+@function strip-quotes($string) {
+  @if meta.type-of($string) == string {
+    @if string.slice($string, 1, 1) == '"' and string.slice($string, -1) == '"' {
+      @return string.slice($string, 2, -2);
+    } @else if string.slice($string, 1, 1) == "'" and string.slice($string, -1) == "'" {
+      @return string.slice($string, 2, -2);
+    }
+  }
 
-  // Relative length units
-  @if string.index($value-str, "em") {
-    @return "em";
-  } @else if string.index($value-str, "rem") {
-    @return "rem";
-  } @else if string.index($value-str, "%") {
-    @return "%";
+  @return $string;
+}
+
+@function str-trim($string) {
+  @while string.length($string) > 0 and string.slice($string, 1, 1) == " " {
+    $string: string.slice($string, 2);
   }
 
-  // Viewport units
-  @else if string.index($value-str, "vw") {
-    @return "vw";
-  } @else if string.index($value-str, "vh") {
-    @return "vh";
-  } @else if string.index($value-str, "vmin") {
-    @return "vmin";
-  } @else if string.index($value-str, "vmax") {
-    @return "vmax";
+  @while string.length($string) > 0 and string.slice($string, -1) == " " {
+    $string: string.slice($string, 1, string.length($string) - 1);
   }
 
-  // Absolute length units
-  @else if string.index($value-str, "px") {
-    @return "px";
-  } @else if string.index($value-str, "cm") {
-    @return "cm";
-  } @else if string.index($value-str, "mm") {
-    @return "mm";
-  } @else if string.index($value-str, "in") {
-    @return "in";
-  } @else if string.index($value-str, "pt") {
-    @return "pt";
-  } @else if string.index($value-str, "pc") {
-    @return "pc";
+  @return $string;
+}
+
+@function split($string, $delimiter) {
+  $result: ();
+  $index: string.index($string, $delimiter);
+  @while $index != null {
+    $item: string.slice($string, 1, $index - 1);
+    $result: list.append($result, str-trim(string.unquote(strip-quotes($item))));
+    $string: string.slice($string, $index + string.length($delimiter));
+    $index: string.index($string, $delimiter);
   }
 
-  // Return empty string if no unit found
-  @return "";
+  @return list.append($result, str-trim($string));
 }

package/src/styles/base/_base.scss

@@ -1,100 +1,111 @@
-@use 'sass:map';
+@use "sass:map";
 
 /* Import variables */
-@use '../abstracts'  as *;
-@use '../utilities/media-queries' as media;
-  
+@use "../abstracts/config" as *;
+@use "../utilities/media-queries" as media;
+
 :root {
   --font-family-base: #{$font-family};
 }
 
 // Base typography styles
 html {
-  font-size: $base-size; 
+  font-size: $base-size;
 }
 
-body {
+body#{$parent-selector} {
   font-family: var(--font-family-base);
   font-weight: 400;
   line-height: 1.5;
-  color: var(--text-primary);
+  color: var(--text-default);
 }
 
 // Headings
-h1, h2, h3, h4, h5, h6 {
+#{$parent-selector} h1,
+#{$parent-selector} h2,
+#{$parent-selector} h3,
+#{$parent-selector} h4,
+#{$parent-selector} h5,
+#{$parent-selector} h6 {
   margin-bottom: 0.5em;
   font-family: var(--font-family-heading);
   font-weight: 700;
   line-height: 1.2;
 }
 
-h1 {
-  font-size: map.get($font-sizes, '4xl');
+#{$parent-selector} h1 {
+  font-size: map.get($font-sizes, "4xl");
 }
 
-h2 {
-  font-size: map.get($font-sizes, '3xl');
+#{$parent-selector} h2 {
+  font-size: map.get($font-sizes, "3xl");
 }
 
-h3 {
-  font-size: map.get($font-sizes, '2xl');
+#{$parent-selector} h3 {
+  font-size: map.get($font-sizes, "2xl");
 }
 
-h4 {
-  font-size: map.get($font-sizes, 'xl');
+#{$parent-selector} h4 {
+  font-size: map.get($font-sizes, "xl");
 }
 
-h5 {
-  font-size: map.get($font-sizes, 'lg');
+#{$parent-selector} h5 {
+  font-size: map.get($font-sizes, "lg");
 }
 
-h6 {
-  font-size: map.get($font-sizes, 'base');
+#{$parent-selector} h6 {
+  font-size: map.get($font-sizes, "base");
 }
 
 // Paragraphs
-p {
+#{$parent-selector} p {
   margin-bottom: 1rem;
 }
 
 // Small text
-small {
-  font-size: map.get($font-sizes, 'sm');
+#{$parent-selector} small {
+  font-size: map.get($font-sizes, "sm");
 }
 
 // Buttons
-button {
+#{$parent-selector} 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, #FFF);
   font-family: var(--font-family-base);
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+  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
+    background-color: #e0e0e0; // Disabled button color
+    color: #a0a0a0; // Disabled text color
     cursor: not-allowed;
   }
+
+  // Default styling when no bg-* class is present
+  &:not([class*="bg-"]) {
+    background-color: var(--button-bg-color, #007bff); // Default button color
+    color: var(--button-text-color, #fff);
+
+    &:hover {
+      background-color: var(--button-bg-color-hover, #0056b3);
+    }
+  }
 }
 
 // Inputs
-input[type="text"],
-input[type="email"],
-input[type="password"],
-input[type="number"],
-input[type="search"],
-textarea {
+#{$parent-selector} input[type="text"],
+#{$parent-selector} input[type="email"],
+#{$parent-selector} input[type="password"],
+#{$parent-selector} input[type="number"],
+#{$parent-selector} input[type="search"],
+#{$parent-selector} textarea {
   padding: 0.5rem;
   border: 1px solid var(--border);
   border-radius: 0.25rem;
@@ -109,13 +120,13 @@ textarea {
 }
 
 // Checkboxes and Radio Buttons
-input[type="checkbox"],
-input[type="radio"] {
+#{$parent-selector} input[type="checkbox"],
+#{$parent-selector} input[type="radio"] {
   margin-right: 0.5rem; // Space between input and label
 }
 
 // Selects
-select {
+#{$parent-selector} select {
   padding: 0.5rem;
   border: 1px solid var(--border);
   border-radius: 0.25rem;
@@ -130,7 +141,7 @@ select {
 }
 
 // Blockquotes
-blockquote {
+#{$parent-selector} blockquote {
   margin: 1rem 0;
   padding: 0.5rem 1rem;
   border-left: 4px solid var(--border);
@@ -138,40 +149,49 @@ blockquote {
 }
 
 // Horizontal Rule
-hr {
+#{$parent-selector} hr {
   border: none;
   border-top: 1px solid var(--border);
   margin: 1rem 0;
 }
 
 // Images
-img {
+#{$parent-selector} img {
   max-width: 100%; // Responsive images
   height: auto;
 }
 
 // Figures and Captions
-figure {
+#{$parent-selector} figure {
   margin: 1rem 0;
 }
 
-figcaption {
+#{$parent-selector} figcaption {
   font-size: 0.875rem; // Smaller font for captions
-  color: var(--text-secondary, #666); // Optional secondary text color
+  color: var(--text-muted, #666); // Optional secondary text color
 }
 
 // Links
-a {
-  color: var(--link-color);
+#{$parent-selector} a {
   transition: color 0.2s ease-in-out;
 
-  &:hover {
-    color: var(--link-hover-color);
+  &:not([class*="text-"]) {
+    // document: if no hover or normal text provided it will use the default link color
+    color: var(--link-color);
+
+    &:hover {
+      color: var(--link-hover-color);
+    }
   }
 }
 
+// Labels
+#{$parent-selector} label[for] {
+  cursor: pointer;
+}
+
 // todo: add to doc
-.sr-only {
+#{$parent-selector} .sr-only {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
@@ -183,16 +203,16 @@ a {
   border: 0 !important;
 }
 
-code {
-  font-family: 'Courier New', Courier, monospace; 
-  background-color: #f8f8f8; 
-  color: #d63384; 
+#{$parent-selector} code {
+  font-family: "Courier New", Courier, monospace;
+  background-color: #f8f8f8;
+  color: #d63384;
   padding: 2px 6px;
   border-radius: 3px;
   white-space: nowrap;
 
   @include media.dark-mode {
-    background-color: #333; 
-    color: #f8f8f2; 
+    background-color: #333;
+    color: #f8f8f2;
   }
 }

package/src/styles/base/_reset.scss

@@ -9,7 +9,6 @@
   padding: 0;
 }
 
-
 // Remove default margin and padding
 body,
 h1,
@@ -27,7 +26,7 @@ dd {
   padding: 0;
 }
 
-// Prevent font size inflation 
+// Prevent font size inflation
 html {
   -moz-text-size-adjust: none; /* stylelint-disable-line */
   -webkit-text-size-adjust: none; /* stylelint-disable-line */
@@ -50,8 +49,13 @@ body {
 }
 
 // Set shorter line heights on headings and interactive elements
-h1, h2, h3, h4,
-button, input, label {
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
   line-height: 1.1;
 }
 
@@ -91,8 +95,8 @@ select {
 }
 
 // Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed
-ul[role='list'],
-ol[role='list'] {
+ul[role="list"],
+ol[role="list"] {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -100,7 +104,7 @@ ol[role='list'] {
   // Modern properties
   padding-inline-start: 0; // Replaces padding-left
   margin-block: 0; // Replaces margin-top/bottom
-  
+
   & > li {
     margin: 0;
     padding: 0;
@@ -125,7 +129,6 @@ textarea:not([rows]) {
   scroll-margin-block: 5ex;
 }
 
-
 // Remove all animations and transitions for people that prefer not to see them
 @media (prefers-reduced-motion: reduce) {
   *,