Merge pull request #4265 from pat270/clay-4252

 feat(@clayui/css): Mixins `clay-css` should output any CSS Custom Properties passed into it

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

@@ -634,6 +634,20 @@
 	@return max($val1, $val2);
 }
 
+/// A function that determines whether the string `$str1` begins with the characters of the specified string `$str2`. This returns `true` if `$str1` begins with `$str2`.
+/// @param {String} $str1 - The string to search.
+/// @param {String} $str2 - The search parameter.
+
+@function starts-with($str1, $str2) {
+	$returnVal: false;
+
+	@if (str-index($str1, $str2) == 1) {
+		$returnVal: true;
+	}
+
+	@return $returnVal;
+}
+
 // * REUSE-Snippet-Begin
 // * SPDX-License-Identifier: MIT
 // * SPDX-FileCopyrightText: © 2016 Hugo Giraudel <https://hugogiraudel.com/>

packages/clay-css/src/scss/mixins/_globals.scss

@@ -216,6 +216,10 @@
 				$value: null;
 			}
 
+			@if (starts-with($key, '--')) {
+				#{$key}: $value;
+			}
+
 			@if ($key == 'appearance') {
 				-moz-appearance: $value;
 				-webkit-appearance: $value;