@nuvoui/core 1.3.4 → 1.4.0

package/src/styles/functions/_breakpoints.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+@use "sass:meta";
+
+@use "../config/breakpoints" as config-breakpoint;
+
+@function get-breakpoint-value($bp, $debug: false) {
+    @if map.has-key(config-breakpoint.$breakpoints, #{$bp}) {
+        @return map.get(config-breakpoint.$breakpoints, #{$bp});
+    } @else if meta.type-of($bp) == "number" {
+        @return $bp;
+    } @else {
+        @error 'Invalid breakpoint: #{$bp}';
+        @return null;
+    }
+}

package/src/styles/functions/_colors.scss

@@ -0,0 +1,280 @@
+// _colors.scss - Color functions and scale generation
+@use "sass:math";
+@use "sass:color";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:list";
+@use "sass:string";
+
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+@use "../config/colors" as config-color;
+@use "../config/theme-validation" as config-theme;
+@use "./css-vars" as fn-css-vars;
+@use "./types" as fn-types;
+@use "./math" as fn-math;
+@use "./strings" as fn-strings;
+
+@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(config-color.$colors-constants, $color-string) {
+        @return map.get(config-color.$colors-constants, $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: fn-strings.split($trimmed, ",");
+
+        @if list.length($values) == 3 {
+            @return rgb(fn-math.to-number(list.nth($values, 1)), fn-math.to-number(list.nth($values, 2)), fn-math.to-number(list.nth($values, 3)));
+        }
+    }
+
+    @if string.index($color-lower, "rgba(") == 1 {
+        $trimmed: string.slice($color-string, string.length("rgba(") + 1, -1);
+        $values: fn-strings.split($trimmed, ",");
+
+        @if list.length($values) == 4 {
+            @return rgba(fn-math.to-number(list.nth($values, 1)), fn-math.to-number(list.nth($values, 2)), fn-math.to-number(list.nth($values, 3)), fn-math.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;
+}
+
+// Color Validation
+@function is-valid-color($color) {
+    @return meta.type-of($color) == "color";
+}
+
+// Scale Generation Function
+@function create-color-scale($color) {
+    $scale: ();
+    $stops: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);
+
+    @each $shade in $stops {
+        $adjusted-color: get-color($color, $shade);
+        $scale: map.set($scale, $shade, $adjusted-color);
+    }
+
+    @return $scale;
+}
+
+$color-cache: (); // to store the generated colors
+// todo : add documentation for Cache
+@function get-color($color, $shade: 500, $default-color: config-color.$default-color) {
+    @if not $color {
+        @warn "No color provided to get-color()";
+        @return $default-color;
+    }
+
+    @if not is-valid-shade($shade) {
+        @warn "Invalid shade value: #{$shade}. Valid range is 50 to 900.";
+        @return $default-color;
+    }
+
+    $cache-key: "#{$color}-#{$shade}";
+    @if map.has-key($color-cache, $cache-key) {
+        @return map.get($color-cache, $cache-key);
+    }
+
+    @if fn-css-vars.is-css-var($color) {
+        @if $shade != 500 {
+            @warn "CSS variables do not support shade values. ";
+        }
+        @return fn-css-vars.get-css-var($color);
+    }
+
+    $colors-list: (
+        "primary": config-color.$primary,
+        "secondary": config-color.$secondary,
+        "success": config-color.$success,
+        "danger": config-color.$danger,
+        "warning": config-color.$warning,
+        "info": config-color.$info,
+    );
+
+    @if meta.type-of($shade) == "string" {
+        $shade: fn-math.to-number($shade);
+    }
+
+    @if fn-types.get-type($color) == "color" {
+        $color: to-color($color);
+    } @else if map.has-key($colors-list, $color) {
+        $color: map.get($colors-list, $color);
+    } @else if map.has-key(config-color.$color-primitives, $color) {
+        $color: map.get(config-color.$color-primitives, $color);
+    } @else {
+        @warn "Unexpected color value: #{$color}";
+        @return $default-color;
+    }
+
+    $x1: 50; // First input value
+    $y1: 95; // First output percentage
+    $x2: 900; // Second input value
+    $y2: 15; // Second output percentage
+    // Calculate slope (m) of the line
+    $slope: math.div($y2 - $y1, $x2 - $x1);
+
+    // Calculate y-intercept (b) of the line: y = mx + b
+    $y-intercept: $y1 - ($slope * $x1);
+
+    // Calculate the output percentage using the linear equation: y = mx + b
+    $result: ($slope * $shade) + $y-intercept;
+    $lightness: math.percentage(math.div($result, 100));
+    $adjusted-color: $color;
+
+    @if $shade < 500 {
+        // Lighter shades: mix with white
+        $mix-percentage: math.div($lightness - 50%, 50%) * 100%;
+        $adjusted-color: color.mix(white, $color, $mix-percentage);
+    } @else if $shade > 500 {
+        // Darker shades: mix with black
+        $mix-percentage: math.div(50% - $lightness, 50%) * 100%;
+        $adjusted-color: color.mix(black, $color, $mix-percentage);
+    }
+
+    $color-cache: map.set($color-cache, $cache-key, $adjusted-color) !global;
+    @return $adjusted-color;
+}
+
+// Luminance calculation for contrast
+@function luminance($color) {
+    $red: math.div(color.channel($color, "red"), 255);
+    $green: math.div(color.channel($color, "green"), 255);
+    $blue: math.div(color.channel($color, "blue"), 255);
+
+    $red: if($red <= 0.0393, math.div($red, 12.92), math.pow((math.div($red + 0.055, 1.055)), 2.4));
+    $green: if($green <= 0.0393, math.div($green, 12.92), math.pow((math.div($green + 0.055, 1.055)), 2.4));
+    $blue: if($blue <= 0.0393, math.div($blue, 12.92), math.pow((math.div($blue + 0.055, 1.055)), 2.4));
+
+    @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Find appropriate text color for a background
+@function find-text-color($background) {
+    $luminance: luminance($background);
+    $dark-color: #000;
+    @if map.has-key(config-theme.$light-theme, "text-color") {
+        $dark-color: map.get(config-theme.$light-theme, "text-color");
+    }
+
+    $light-color: #fff;
+    @if map.has-key(config-theme.$light-theme, "text-inverted") {
+        $light-color: map.get(config-theme.$light-theme, "text-inverted");
+    }
+    @return if($luminance > 0.55, $dark-color, $light-color);
+}
+
+@function is-valid-shade($shade) {
+    @if meta.type-of($shade) == "number" {
+        @return $shade >= 50 and $shade <= 900;
+    }
+    @return false;
+}

package/src/styles/functions/_css-vars.scss

@@ -0,0 +1,33 @@
+@use "sass:string";
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+
+@use "./strings" as fn-strings;
+
+@function is-css-var($value) {
+    @if meta.type-of($value) != "string" {
+        @return false;
+    }
+    $val: string.unquote(fn-strings.strip-quotes($value));
+    @return string.index($val, "var(") == 1;
+}
+
+@function get-css-var($value) {
+    @if is-css-var($value) {
+        $val: string.unquote(fn-strings.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 to-css-var($name, $fallback: null) {
+    @if $fallback {
+        @return var(--#{$name}, #{$fallback});
+    }
+    @return var(--#{$name});
+}

package/src/styles/functions/_feature-flags.scss

@@ -0,0 +1,20 @@
+@use "sass:string";
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+
+// Helper function to check if a feature is enabled
+@function feature-enabled($feature) {
+    @if not config-flags.$generate-utility-classes {
+        @return false;
+    }
+
+    @if not map.has-key(config-flags.$feature-flags, $feature) {
+        @return true; // Default to enabled if not specified
+    }
+
+    @return map.get(config-flags.$feature-flags, $feature);
+}

package/src/styles/functions/_math.scss

@@ -0,0 +1,72 @@
+@use "sass:string";
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+@use "../config/constants" as config-constants;
+@use "./strings" as fn-strings;
+
+@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(fn-strings.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 config-constants.$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);
+}

package/src/styles/functions/_strings.scss

@@ -0,0 +1,68 @@
+@use "sass:string";
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+
+@function str-replace($string, $search, $replace: " ") {
+    $index: string.index($string, $search);
+    @if $index {
+        @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+    }
+    @return $string;
+}
+
+@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);
+        }
+    }
+
+    @return $string;
+}
+
+@function str-trim($string) {
+    @while string.length($string) > 0 and string.slice($string, 1, 1) == " " {
+        $string: string.slice($string, 2);
+    }
+
+    @while string.length($string) > 0 and string.slice($string, -1) == " " {
+        $string: string.slice($string, 1, string.length($string) - 1);
+    }
+
+    @return $string;
+}
+
+@function split($string, $delimiter) {
+    $result: ();
+    $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 $result;
+}

package/src/styles/functions/_types.scss

@@ -0,0 +1,104 @@
+@use "sass:string";
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+
+@use "../config/colors" as config-colors;
+@use "../config/constants" as config-constants;
+@use "../config/borders" as config-borders;
+@use "../config/breakpoints" as config-breakpoints;
+@use "../config/typography" as config-type;
+@use "./units" as fn-units;
+@use "./strings" as fn-strings;
+@use "./math" as fn-math;
+@use "./css-vars" as fn-css-vars;
+
+@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(fn-strings.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(config-colors.$colors-constants, $val-lower) {
+        @return "color";
+    }
+
+    // Check for CSS variables first
+    @if fn-css-vars.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 config-constants.$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 fn-math.to-number($num-part) {
+                @return "number";
+            }
+        }
+    }
+
+    // Check for pure numbers
+    @if fn-math.to-number($val) {
+        @return "number";
+    }
+
+    // Check for breakpoints
+    @if map.has-key(config-breakpoints.$breakpoints, $val) {
+        @return "breakpoint";
+    }
+
+    // Check for font weights
+    @if map.has-key(config-type.$font-weights, $val-lower) {
+        @return "font-weight";
+    }
+
+    // Check for border radius values
+    @if map.has-key(config-borders.$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";
+}

package/src/styles/functions/_units.scss

@@ -0,0 +1,83 @@
+@use "sass:string";
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+@use "../config/feature-flags" as config-flags;
+@use "../config/constants" as config-constants;
+@use "../functions/strings" as fn-string;
+@use "../functions/math" as fn-math;
+
+@function strip-unit($value) {
+    @if meta.type-of($value) != "number" {
+        @error "strip-unit() requires a number";
+    }
+    @return math.div($value, ($value * 0 + 1));
+}
+
+// used in animation unique name creation
+@function safe-unit-name($unit) {
+    @if $unit == "%" {
+        @return "per";
+    } @else if $unit == "." {
+        @return "dot";
+    } @else {
+        @return $unit;
+    }
+}
+
+// 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 improve this when we can
+@function fix-units($val, $unit: config-flags.$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;
+        }
+        @return $val;
+    }
+
+    // String handling - strip quotes first
+    $val: fn-string.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};
+    }
+
+    // Check if string already has units
+    @each $u in config-constants.$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 fn-math.to-number($number-part) {
+                @return fn-math.to-number($number-part) + string.unquote($u);
+            }
+
+            @return $val;
+        }
+    }
+
+    // Try to convert to number if possible
+    @if string.index($val, ".") or fn-math.to-number($val) {
+        $number-val: fn-math.to-number($val);
+        @return $number-val + $unit;
+    }
+
+    // Default: just add the unit
+    @return string.unquote($val + $unit);
+}