feat(@clayui/css): $container-max-widths Sass map should accept CSS C…

…ustom Properties

feat(@clayui/css): Global Functions adds `clay-get-fallback` to get Custom Property (CSS variable) fallback values.

feat(@clayui/css): Global Functions adds `to-number` that casts a string to type number

feat(@clayui/css): Global Functions adds `to-length` that adds the unit value to a number

packages/clay-css/src/scss/functions/_global-functions.scss

@@ -258,6 +258,47 @@
 	@return null;
 }
 
+/// A function that returns the fallback value of a CSS Custom Property (CSS variable).
+/// @param {String} $var - The CSS Custom Property to evaluate.
+
+@function clay-get-fallback($var) {
+	@if (type-of($var) == 'string' and str-slice($var, 1, 3) == 'var') {
+		$fallback-value: str-slice(
+			$var,
+			str-index($var, ',') + 2,
+			str-length($var) - 1
+		);
+
+		$units: (
+			'px': 1px,
+			'cm': 1cm,
+			'mm': 1mm,
+			'%': 1%,
+			'ch': 1ch,
+			'pc': 1pc,
+			'in': 1in,
+			'em': 1em,
+			'rem': 1rem,
+			'pt': 1pt,
+			'ex': 1ex,
+			'vw': 1vw,
+			'vh': 1vh,
+			'vmin': 1vmin,
+			'vmax': 1vmax,
+		);
+
+		@each $unit in map-keys($units) {
+			@if (str-index($fallback-value, $unit)) {
+				@return to-number($fallback-value);
+			}
+		}
+
+		@return $fallback-value;
+	}
+
+	@return $var;
+}
+
 /// A Bootstrap 4 function that warns the user if values in key value pairs are not in ascending order. Used to evaluate Sass maps `$grid-breakpoints` and `$container-max-widths`.
 /// @param {Map} $map - The map to evaluate
 /// @param {String} $map-name - The name of the map
@@ -267,6 +308,8 @@
 	$prev-num: null;
 
 	@each $key, $num in $map {
+		$num: clay-get-fallback($num);
+
 		@if $prev-num == null or unit($num) == '%' or unit($prev-num) == '%' {
 			// Do nothing
 		} @else if not comparable($prev-num, $num) {
@@ -603,6 +646,92 @@
 // * SPDX-FileCopyrightText: © 2016 Hugo Giraudel <https://hugogiraudel.com/>
 // *
 
+/// Add `$unit` to `$value`
+/// @author Hugo Giraudel
+/// @link https://kittygiraudel.com/2014/01/15/casting-a-string-to-a-number-in-sass/
+/// @param {Number} $value - Value to add unit to
+/// @param {String} $unit - String representation of the unit
+///
+/// @return {Number} - `$value` expressed in `$unit`
+
+@function to-length($value, $unit) {
+	$units: (
+		'px': 1px,
+		'cm': 1cm,
+		'mm': 1mm,
+		'%': 1%,
+		'ch': 1ch,
+		'pc': 1pc,
+		'in': 1in,
+		'em': 1em,
+		'rem': 1rem,
+		'pt': 1pt,
+		'ex': 1ex,
+		'vw': 1vw,
+		'vh': 1vh,
+		'vmin': 1vmin,
+		'vmax': 1vmax,
+	);
+
+	@if not index(map-keys($units), $unit) {
+		$_: log('Invalid unit `#{$unit}`.');
+	}
+
+	@return $value * map-get($units, $unit);
+}
+
+/// Casts a string into a number
+/// @author Hugo Giraudel
+/// @link https://kittygiraudel.com/2014/01/15/casting-a-string-to-a-number-in-sass/
+/// @param {String | Number} $value - Value to be parsed
+/// @return {Number}
+
+@function to-number($value) {
+	@if type-of($value) == 'number' {
+		@return $value;
+	} @else if type-of($value) != 'string' {
+		$_: log('Value for `to-number` should be a number or a string.');
+	}
+
+	$digits: 0;
+	$result: 0;
+	$minus: str-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,
+	);
+
+	@for $i from if($minus, 2, 1) through str-length($value) {
+		$character: str-slice($value, $i, $i);
+
+		@if not(index(map-keys($numbers), $character) or $character == '.') {
+			@return to-length(
+				if($minus, -$result, $result),
+				str-slice($value, $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;
+		}
+	}
+
+	@return if($minus, -$result, $result);
+}
+
 /// A function that fetches deeply nested values from a Sass map.
 /// @author Hugo Giraudel
 /// @link https://css-tricks.com/snippets/sass/deep-getset-maps/