@nuvoui/core 1.3.1 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",

package/src/styles/abstracts/_config.scss

@@ -104,6 +104,11 @@ $basic-colors: (
   "transparent": transparent,
 ) !default;
 
+$semantic-colors: ("primary", "secondary", "success", "danger", "warning", "info");
+$primitive-color-names: map.keys($color-primitives);
+$color-names: list.join($semantic-colors, $primitive-color-names);
+$color-names-with-basic: list.join($color-names, map.keys($basic-colors));
+
 @function validate-theme-tokens($theme-map, $required-tokens) {
   $missing-tokens: ();
 
@@ -232,4 +237,17 @@ $border-radii: (
   "none": 0,
 ) !default;
 
+// Font weight map
+$font-weights: (
+  "thin": 100,
+  "extralight": 200,
+  "light": 300,
+  "normal": 400,
+  "medium": 500,
+  "semibold": 600,
+  "bold": 700,
+  "extrabold": 800,
+  "black": 900,
+) !default;
+
 $parent-selector: "" !default;

package/src/styles/abstracts/_functions.scss

@@ -5,6 +5,97 @@
 @use "sass:meta";
 @use "config" as *;
 
+$units: ("px", "rem", "%", "em", "vh", "vw", "vmin", "vmax", "ch", "ex", "cm", "mm", "in", "pt", "pc");
+
+@function get-type($value) {
+  // Handle null and empty values
+  @if not $value {
+    @return "null";
+  }
+
+  // Handle already typed values
+  @if meta.type-of($value) == "color" {
+    @return "color";
+  } @else if meta.type-of($value) == "number" {
+    @return "number";
+  } @else if meta.type-of($value) == "bool" {
+    @return "boolean";
+  } @else if meta.type-of($value) == "list" or meta.type-of($value) == "map" {
+    @return meta.type-of($value);
+  }
+
+  // Convert to string if needed
+  $val: string.unquote(strip-quotes($value));
+  $val-lower: string.to-lower-case($val);
+
+  // Check for colors
+  @if string.slice($val, 1, 1) == "#" and (string.length($val) == 4 or string.length($val) == 7 or string.length($val) == 5 or string.length($val) == 9) {
+    @return "color";
+  }
+  @if string.index($val-lower, "rgb(") == 1 or string.index($val-lower, "rgba(") == 1 {
+    @return "color";
+  }
+  @if map.has-key($colors-list, $val-lower) {
+    @return "color";
+  }
+
+  // Check for CSS variables first
+  @if is-css-var($val) {
+    @return "css-var";
+  }
+
+  // Check for known CSS states
+  $states: ("hover", "active", "focus", "visited", "disabled", "checked", "first-child", "last-child");
+  @if list.index($states, $val-lower) {
+    @return "state";
+  }
+
+  // Check for numbers with units
+  @each $unit in $units {
+    @if string.slice($val, -1 * string.length($unit)) == $unit {
+      // Check if the part before the unit is numeric
+      $num-part: string.slice($val, 1, string.length($val) - string.length($unit));
+      @if to-number($num-part) {
+        @return "number";
+      }
+    }
+  }
+
+  // Check for pure numbers
+  @if to-number($val) {
+    @return "number";
+  }
+
+  // Check for breakpoints
+  @if map.has-key($breakpoints, $val) {
+    @return "breakpoint";
+  }
+
+  // Check for font weights
+  @if map.has-key($font-weights, $val-lower) {
+    @return "font-weight";
+  }
+
+  // Check for border radius values
+  @if map.has-key($border-radii, $val-lower) {
+    @return "border-radius";
+  }
+
+  // Check for special CSS keywords
+  $keywords: ("auto", "inherit", "initial", "unset", "none", "flex", "grid", "block", "inline");
+  @if list.index($keywords, $val-lower) {
+    @return "css-keyword";
+  }
+
+  // Check for CSS functions
+  @if string.index($val-lower, "calc(") == 1 or string.index($val-lower, "var(") == 1 or string.index($val-lower, "min(") == 1 or string.index($val-lower, "max(") == 1 {
+    @return "css-function";
+  }
+
+  // Default to string
+  @return "string";
+}
+
 @function str-replace($string, $search, $replace: " ") {
   $index: string.index($string, $search);
   @if $index {
@@ -13,6 +104,25 @@
   @return $string;
 }
 
+@function is-css-var($value) {
+  @if meta.type-of($value) != "string" {
+    @return false;
+  }
+  $val: string.unquote(strip-quotes($value));
+  @return string.index($val, "var(") == 1;
+}
+
+@function get-css-var($value) {
+  @if is-css-var($value) {
+    $val: string.unquote(strip-quotes($value));
+    $var-name: string.slice($val, 5, -2);
+    @return var(#{$var-name});
+  } @else {
+    @error "Value is not a CSS variable";
+    @return null;
+  }
+}
+
 @function get-breakpoint-value($bp, $debug: false) {
   @if map.has-key($breakpoints, #{$bp}) {
     @return map.get($breakpoints, #{$bp});
@@ -31,6 +141,7 @@
   @return math.div($value, ($value * 0 + 1));
 }
 
+// used in animation unique name creation
 @function safe-unit-name($unit) {
   @if $unit == "%" {
     @return "per";
@@ -44,12 +155,20 @@
 // 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
+// todo imporve this when we can
 @function fix-units($val, $unit: $default-unit, $debug: null) {
+  // Handle null values
+  @if not $val {
+    @return null;
+  }
+
+  // Check type
   @if meta.type-of($val) != number and meta.type-of($val) != string {
     @error "fix-units() requires a number or string value";
     @return null;
   }
 
+  // Handle number type
   @if meta.type-of($val) == number {
     @if math.is-unitless($val) {
       @return $val + $unit;
@@ -57,20 +176,35 @@
     @return $val;
   }
 
+  // String handling - strip quotes first
   $val: strip-quotes($val);
 
+  // CSS keywords - return as is
   @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};
+  // Check if string already has units
+  @each $u in $units {
+    @if string.slice($val, -1 * string.length($u)) == $u {
+      // Try to convert numeric strings with units (like "20px") to actual numbers
+      $number-part: string.slice($val, 1, string.length($val) - string.length($u));
+
+      @if string.index($number-part, ".") or to-number($number-part) {
+        @return to-number($number-part) + string.unquote($u);
+      }
+
+      @return $val;
+    }
   }
 
-  @if $debug {
-    @debug "fix-units() value: " + $val;
+  // Try to convert to number if possible
+  @if string.index($val, ".") or to-number($val) {
+    $number-val: to-number($val);
+    @return $number-val + $unit;
   }
 
+  // Default: just add the unit
   @return string.unquote($val + $unit);
 }
 
@@ -100,15 +234,33 @@
 
 @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);
+  $current: "";
+  $paren-depth: 0;
+
+  @for $i from 1 through string.length($string) {
+    $char: string.slice($string, $i, $i);
+
+    @if $char == "(" {
+      $paren-depth: $paren-depth + 1;
+      $current: $current + $char;
+    } @else if $char == ")" {
+      $paren-depth: $paren-depth - 1;
+      $current: $current + $char;
+    } @else if $char == $delimiter and $paren-depth == 0 {
+      // Only split on delimiter when not inside parentheses
+      $result: list.append($result, str-trim(string.unquote(strip-quotes($current))), "comma");
+      $current: "";
+    } @else {
+      $current: $current + $char;
+    }
+  }
+
+  // Add the last parameter
+  @if $current != "" {
+    $result: list.append($result, string.unquote(str-trim($current)));
   }
 
-  @return list.append($result, str-trim($string));
+  @return $result;
 }
 
 // Helper function to check if a feature is enabled
@@ -123,3 +275,352 @@
 
   @return map.get($feature-flags, $feature);
 }
+
+@function to-number($value) {
+  @if meta.type-of($value) == "number" {
+    @return $value;
+  } @else if meta.type-of($value) != "string" {
+    @error "Value for `number` should be a number or a string.";
+    @return $value;
+  }
+
+  $val: string.unquote(strip-quotes($value));
+
+  $result: 0;
+  $digits: 0;
+  $minus: string.slice($value, 1, 1) == "-";
+  $numbers: (
+    "0": 0,
+    "1": 1,
+    "2": 2,
+    "3": 3,
+    "4": 4,
+    "5": 5,
+    "6": 6,
+    "7": 7,
+    "8": 8,
+    "9": 9,
+  );
+  $number-chars-end: 0;
+
+  @for $i from if($minus, 2, 1) through string.length($val) {
+    $character: string.slice($val, $i, $i);
+
+    @if list.index(map.keys($numbers), $character) or $character == "." {
+      $number-chars-end: $i;
+
+      @if $character == "." {
+        $digits: 1;
+      } @else if $digits == 0 {
+        $result: $result * 10 + map.get($numbers, $character);
+      } @else {
+        $digits: $digits * 10;
+        $result: $result + map.get($numbers, $character) / $digits;
+      }
+    } @else {
+      // Non-numeric character found - check for unit
+      $rest: string.slice($val, $i);
+
+      // Look for valid unit
+      @each $unit in $units {
+        @if $rest == $unit {
+          @return if($minus, -$result, $result) + string.unquote($unit);
+        }
+      }
+
+      // No valid unit - return null for non-numeric strings
+      @if $i == if($minus, 2, 1) {
+        @return null; // First char is non-numeric
+      }
+
+      // Otherwise return just the parsed number
+      @return if($minus, -$result, $result);
+    }
+  }
+
+  @return if($minus, -$result, $result);
+}
+
+$colors-list: (
+  "aliceblue": aliceblue,
+  "antiquewhite": antiquewhite,
+  "aqua": aqua,
+  "aquamarine": aquamarine,
+  "azure": azure,
+  "beige": beige,
+  "bisque": bisque,
+  "black": black,
+  "blanchedalmond": blanchedalmond,
+  "blue": blue,
+  "blueviolet": blueviolet,
+  "brown": brown,
+  "burlywood": burlywood,
+  "cadetblue": cadetblue,
+  "chartreuse": chartreuse,
+  "chocolate": chocolate,
+  "coral": coral,
+  "cornflowerblue": cornflowerblue,
+  "cornsilk": cornsilk,
+  "crimson": crimson,
+  "cyan": cyan,
+  "darkblue": darkblue,
+  "darkcyan": darkcyan,
+  "darkgoldenrod": darkgoldenrod,
+  "darkgray": darkgray,
+  "darkgreen": darkgreen,
+  "darkgrey": darkgrey,
+  "darkkhaki": darkkhaki,
+  "darkmagenta": darkmagenta,
+  "darkolivegreen": darkolivegreen,
+  "darkorange": darkorange,
+  "darkorchid": darkorchid,
+  "darkred": darkred,
+  "darksalmon": darksalmon,
+  "darkseagreen": darkseagreen,
+  "darkslateblue": darkslateblue,
+  "darkslategray": darkslategray,
+  "darkslategrey": darkslategrey,
+  "darkturquoise": darkturquoise,
+  "darkviolet": darkviolet,
+  "deeppink": deeppink,
+  "deepskyblue": deepskyblue,
+  "dimgray": dimgray,
+  "dimgrey": dimgrey,
+  "dodgerblue": dodgerblue,
+  "firebrick": firebrick,
+  "floralwhite": floralwhite,
+  "forestgreen": forestgreen,
+  "fuchsia": fuchsia,
+  "gainsboro": gainsboro,
+  "ghostwhite": ghostwhite,
+  "gold": gold,
+  "goldenrod": goldenrod,
+  "gray": gray,
+  "green": green,
+  "greenyellow": greenyellow,
+  "grey": grey,
+  "honeydew": honeydew,
+  "hotpink": hotpink,
+  "indianred": indianred,
+  "indigo": indigo,
+  "ivory": ivory,
+  "khaki": khaki,
+  "lavender": lavender,
+  "lavenderblush": lavenderblush,
+  "lawngreen": lawngreen,
+  "lemonchiffon": lemonchiffon,
+  "lightblue": lightblue,
+  "lightcoral": lightcoral,
+  "lightcyan": lightcyan,
+  "lightgoldenrodyellow": lightgoldenrodyellow,
+  "lightgray": lightgray,
+  "lightgreen": lightgreen,
+  "lightgrey": lightgrey,
+  "lightpink": lightpink,
+  "lightsalmon": lightsalmon,
+  "lightseagreen": lightseagreen,
+  "lightskyblue": lightskyblue,
+  "lightslategray": lightslategray,
+  "lightslategrey": lightslategrey,
+  "lightsteelblue": lightsteelblue,
+  "lightyellow": lightyellow,
+  "lime": lime,
+  "limegreen": limegreen,
+  "linen": linen,
+  "magenta": magenta,
+  "maroon": maroon,
+  "mediumaquamarine": mediumaquamarine,
+  "mediumblue": mediumblue,
+  "mediumorchid": mediumorchid,
+  "mediumpurple": mediumpurple,
+  "mediumseagreen": mediumseagreen,
+  "mediumslateblue": mediumslateblue,
+  "mediumspringgreen": mediumspringgreen,
+  "mediumturquoise": mediumturquoise,
+  "mediumvioletred": mediumvioletred,
+  "midnightblue": midnightblue,
+  "mintcream": mintcream,
+  "mistyrose": mistyrose,
+  "moccasin": moccasin,
+  "navajowhite": navajowhite,
+  "navy": navy,
+  "oldlace": oldlace,
+  "olive": olive,
+  "olivedrab": olivedrab,
+  "orange": orange,
+  "orangered": orangered,
+  "orchid": orchid,
+  "palegoldenrod": palegoldenrod,
+  "palegreen": palegreen,
+  "paleturquoise": paleturquoise,
+  "palevioletred": palevioletred,
+  "papayawhip": papayawhip,
+  "peachpuff": peachpuff,
+  "peru": peru,
+  "pink": pink,
+  "plum": plum,
+  "powderblue": powderblue,
+  "purple": purple,
+  "red": red,
+  "rosybrown": rosybrown,
+  "royalblue": royalblue,
+  "saddlebrown": saddlebrown,
+  "salmon": salmon,
+  "sandybrown": sandybrown,
+  "seagreen": seagreen,
+  "seashell": seashell,
+  "sienna": sienna,
+  "silver": silver,
+  "skyblue": skyblue,
+  "slateblue": slateblue,
+  "slategray": slategray,
+  "slategrey": slategrey,
+  "snow": snow,
+  "springgreen": springgreen,
+  "steelblue": steelblue,
+  "tan": tan,
+  "teal": teal,
+  "thistle": thistle,
+  "tomato": tomato,
+  "transparent": transparent,
+  "turquoise": turquoise,
+  "violet": violet,
+  "wheat": wheat,
+  "white": white,
+  "whitesmoke": whitesmoke,
+  "yellow": yellow,
+  "yellowgreen;": yellowgreen,
+);
+
+@function to-color($color-name) {
+  // Return if already a color
+  @if meta.type-of($color-name) == "color" {
+    @return $color-name;
+  }
+
+  // Convert to string if needed
+  $color-string: string.unquote($color-name);
+  $color-lower: string.to-lower-case($color-string);
+
+  // Handle named colors (red, blue, etc.)
+  @if map.has-key($colors-list, $color-string) {
+    @return map.get($colors-list, $color-string);
+  }
+
+  // Handle hex colors - use from-hex function which returns a proper RGB color
+  @if string.slice($color-string, 1, 1) == "#" {
+    @return from-hex($color-string);
+  }
+
+  // Handle rgb/rgba strings
+  @if string.index($color-lower, "rgb(") == 1 {
+    $trimmed: string.slice($color-string, string.length("rgb(") + 1, -1);
+    $values: split($trimmed, ",");
+
+    @if list.length($values) == 3 {
+      @return rgb(to-number(list.nth($values, 1)), to-number(list.nth($values, 2)), to-number(list.nth($values, 3)));
+    }
+  }
+
+  @if string.index($color-lower, "rgba(") == 1 {
+    $trimmed: string.slice($color-string, string.length("rgba(") + 1, -1);
+    $values: split($trimmed, ",");
+
+    @if list.length($values) == 4 {
+      @return rgba(to-number(list.nth($values, 1)), to-number(list.nth($values, 2)), to-number(list.nth($values, 3)), to-number(list.nth($values, 4)));
+    }
+  }
+
+  @warn "#{$color-string} is not a valid color format. Use hex colors like #FF0 or #FF0000";
+  @return null;
+}
+
+@function from-hex($hex-string) {
+  // Normalize input
+
+  $hex: string.to-lower-case(string.unquote($hex-string));
+  $valid-chars: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
+  $length: string.length($hex);
+
+  // Validate format and length
+  @if string.slice($hex, 1, 1) != "#" {
+    @warn "Invalid hex color format: #{$hex-string}. Must start with #";
+    @return $hex-string;
+  }
+
+  // Check for valid lengths: #RGB, #RGBA, #RRGGBB, #RRGGBBAA
+  @if not($length == 4 or $length == 5 or $length == 7 or $length == 9) {
+    @warn "Invalid hex color length: #{$hex-string}. Must be 4, 5, 7 or 9 characters";
+    @return $hex-string;
+  }
+
+  // Extract components
+  $r: "";
+  $g: "";
+  $b: "";
+  $a: "";
+  $has-alpha: $length == 5 or $length == 9;
+  $component-size: if($length < 6, 1, 2);
+
+  // Validate and extract color components
+  @for $i from 2 through $length {
+    $char: string.slice($hex, $i, $i);
+
+    @if not list.index($valid-chars, $char) {
+      @warn "Invalid hex character: #{$char} in #{$hex-string}";
+      @return $hex-string;
+    }
+
+    // Determine which component we're building
+    $position: $i - 1;
+
+    @if $position <= $component-size {
+      $r: $r + $char;
+    } @else if $position <= $component-size * 2 {
+      $g: $g + $char;
+    } @else if $position <= $component-size * 3 {
+      $b: $b + $char;
+    } @else {
+      $a: $a + $char;
+    }
+  }
+
+  // Double characters for short hex notation
+  @if $component-size == 1 {
+    $r: $r + $r;
+    $g: $g + $g;
+    $b: $b + $b;
+    @if $has-alpha {
+      $a: $a + $a;
+    }
+  }
+
+  // Convert to RGB/RGBA
+  @if $has-alpha {
+    $alpha-value: math.div(hex-to-dec($a), 255);
+    @return rgba(hex-to-dec($r), hex-to-dec($g), hex-to-dec($b), $alpha-value);
+  } @else {
+    @return rgb(hex-to-dec($r), hex-to-dec($g), hex-to-dec($b));
+  }
+}
+
+@function hex-to-dec($string) {
+  $hex-digits: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
+  $string: string.to-lower-case($string);
+  $length: string.length($string);
+
+  $dec: 0;
+  @for $i from 1 through $length {
+    $character: string.slice($string, $i, $i);
+    $digit-value: list.index($hex-digits, $character) - 1;
+
+    @if $digit-value >= 0 {
+      $position: $length - $i;
+      $dec: $dec + ($digit-value * math.pow(16, $position));
+    } @else {
+      @warn "Invalid hex character: #{$character}";
+    }
+  }
+
+  @return $dec;
+}

package/src/styles/base/_base.scss

@@ -107,7 +107,7 @@ body#{$parent-selector} {
 #{$parent-selector} input[type="search"],
 #{$parent-selector} textarea {
   padding: 0.5rem;
-  border: 1px solid var(--border);
+  border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
   border-radius: 0.25rem;
   width: 100%; // Full width
   font-family: var(--font-family-base);
@@ -128,7 +128,7 @@ body#{$parent-selector} {
 // Selects
 #{$parent-selector} select {
   padding: 0.5rem;
-  border: 1px solid var(--border);
+  border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
   border-radius: 0.25rem;
   width: 100%; // Full width
   font-family: var(--font-family-base);
@@ -144,14 +144,14 @@ body#{$parent-selector} {
 #{$parent-selector} blockquote {
   margin: 1rem 0;
   padding: 0.5rem 1rem;
-  border-left: 4px solid var(--border);
+  border-left: var(--border-size, 4px) var(--border-style, solid) var(--border-color, var(--secondary));
   font-style: italic;
 }
 
 // Horizontal Rule
 #{$parent-selector} hr {
   border: none;
-  border-top: 1px solid var(--border);
+  border-top: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--secondary));
   margin: 1rem 0;
 }
 

package/src/styles/layouts/_flex.scss

@@ -46,16 +46,6 @@
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
-// @description Establishes a flex container.
-@mixin flex {
-  display: flex;
-}
-
-// @description Establishes a flex-inline container.
-@mixin flex-inline {
-  display: inline-flex;
-}
-
 // @description Sets flex-direction to row.
 // @dependencies flex | flex-inline
 @mixin row {
@@ -321,12 +311,6 @@
 
   // Apply base flex styles to all flex variants at once
   #{$flex-selectors} {
-    @include flex;
-
-    &.inline {
-      @include flex-inline;
-    }
-
     // Direction modifiers
     &.row {
       @include row;
@@ -513,7 +497,7 @@
 
   // Handle responsive variants
   @each $breakpoint, $width in VAR.$breakpoints {
-    $bp-val: FN.get-breakpoint-value($breakpoint);
+    $bp-val: FN.get-breakpoint-value($breakpoint); // todo: why get-breakpoint-value?
 
     @media (min-width: #{$bp-val}) {
       #{$flex-selectors} {
@@ -664,12 +648,6 @@
           }
         }
       }
-
-      // Special case for inline@breakpoint
-      #{VAR.$parent-selector} .flex.inline\@#{$breakpoint},
-      #{VAR.$parent-selector} .flex\@#{$breakpoint}.inline\@#{$breakpoint} {
-        @include flex-inline;
-      }
     }
   }
 }