@nuvoui/core 1.2.5 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "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 build"
   },
   "repository": {
     "type": "git",

package/src/styles/abstracts/_config.scss

@@ -1,17 +1,30 @@
 @use "sass:map";
 @use "sass:math";
+@use "sass:list";
 
 // Framework Configuration Options
 $generate-utility-classes: true !default;
 $enable-dark-mode: true !default;
 $enable-rtl: true !default;
-$enable-debugger: false !default; // todo: spell mistake
+$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 !default;
+$base-size: 16px !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,27 +50,60 @@ $color-primitives: (
   "pink": #ec4899,
 ) !default;
 
-$theme-tokens: ("background", "foreground", "surface", "border", "text-primary", "text-secondary") !default;
-
 // Default theme config (can be overridden)
 $light-theme: (
-  "background": #fafafa,
-  "foreground": #1a1a1a,
-  "surface": #fff,
-  "border": #e5e7eb,
-  "text-primary": #1a1a1a,
-  "text-secondary": #4b5563,
+  "bg-base": #fbfafc,
+  "bg-alternate": #1a1a1a,
+  "bg-surface": #fff,
+  "border-base": #e5e7eb,
+  "text-color": #1a1a1a,
+  "text-muted": #1a1a1a8a,
+  "text-subtle": #1a1a1a50,
+  "text-inverted": #f1f1f1,
 ) !default;
 
+// Extract theme tokens from light theme keys
+// Users can still override this if they want to use only a subset
+$theme-tokens: map.keys($light-theme) !default;
+
 $dark-theme: (
-  "background": #1a1a1a,
-  "foreground": #f1f1f1,
-  "surface": #2e2e2e,
-  "border": #2e2e2e,
-  "text-primary": #f1f1f1,
-  "text-secondary": #a3a3a3,
+  "bg-base": #1a1a1a,
+  "bg-alternate": #f1f1f1,
+  "bg-surface": #2e2e2e,
+  "border-base": #2e2e2e,
+  "text-color": #f1f1f1,
+  "text-muted": #f1f1f18a,
+  "text-subtle": #f1f1f150,
+  "text-inverted": #1a1a1a,
 ) !default;
 
+$basic-colors: (
+  "black": #000,
+  "white": #fff,
+  "transparent": transparent,
+) !default;
+
+@function validate-theme-tokens($theme-map, $required-tokens) {
+  $missing-tokens: ();
+
+  @each $token in $required-tokens {
+    @if not map.has-key($theme-map, $token) {
+      $missing-tokens: list.append($missing-tokens, $token, comma);
+    }
+  }
+
+  @if list.length($missing-tokens) > 0 {
+    @error "Theme is missing required tokens: #{$missing-tokens}";
+  }
+
+  @return list.length($missing-tokens) == 0;
+}
+
+// Validate both themes
+@debug validate-theme-tokens($light-theme, $theme-tokens);
+
+@debug validate-theme-tokens($dark-theme, $theme-tokens);
+
 $shadow-colors: (
   "default": rgb(0 0 0 / 10%),
   "dark": rgb(0 0 0 / 20%),
@@ -85,55 +131,77 @@ $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,
+  "base": 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;
 
-
-// if just a number passed, it will be assumed as px
-$default-unit: px !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;
+  "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,83 +41,40 @@
   }
 }
 
-@function get-unit($value) {
-  $value-str: #{$value};
-
-  // 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 "%";
-  }
-
-  // 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";
-  }
-
-  // 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 empty string if no unit found
-  @return "";
-}
-
 /**
  * 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) {
-  
-  @if meta.type-of($val) != number and meta.type-of($val) != string{
+@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 string.length(math.unit($val)) == 0 {
-      @return string.unquote($val + $unit);
+    @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 string.unquote($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 string.unquote($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};
   }
 
-  @return string.unquote($val) + $unit;
-}
+  @if $debug {
+    @debug "fix-units() value: " + $val;
+  }
 
+  @return string.unquote($val + $unit);
+}
 
 @function strip-quotes($string) {
   @if meta.type-of($string) == string {
@@ -150,5 +110,5 @@
     $index: string.index($string, $delimiter);
   }
 
-  @return list.append($result, str-trim($string)); 
+  @return list.append($result, str-trim($string));
 }

package/src/styles/base/_base.scss

@@ -1,104 +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;
   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;
+
   &: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);
-    
+  // 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);
+      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;
@@ -113,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;
@@ -134,7 +141,7 @@ select {
 }
 
 // Blockquotes
-blockquote {
+#{$parent-selector} blockquote {
   margin: 1rem 0;
   padding: 0.5rem 1rem;
   border-left: 4px solid var(--border);
@@ -142,33 +149,34 @@ 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 {
+#{$parent-selector} a {
   transition: color 0.2s ease-in-out;
 
-  &:not([class*="text-"]){ // document: if no hover or normal text provided it will use the default link color
+  &:not([class*="text-"]) {
+    // document: if no hover or normal text provided it will use the default link color
     color: var(--link-color);
 
     &:hover {
@@ -178,12 +186,12 @@ a {
 }
 
 // Labels
-label[for] {
+#{$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;
@@ -195,16 +203,16 @@ label[for] {
   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) {
   *,