Merge pull request #8349 from IgniteUI/simeonoff/css-vars-values

refactor(theme): allow css vars as values in themes

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -400,9 +400,13 @@
 /// @returns {String} - The value of the key in the passed map, or the name of key concatenated with the key name.
 @function --var($map, $key, $fallback: null) {
     $igx-legacy-support: if(global-variable-exists('igx-legacy-support'), $igx-legacy-support, false);
+    $css-var: str-slice(#{map-get($map, $key)}, 1, 3) == 'var';
 
     @if map-has-key($map, $key) {
         @if $igx-legacy-support == false {
+            @if $css-var {
+                @return map-get($map, $key);
+            }
             @if not($fallback) {
                 @return var(--#{map-get($map, 'name')}-#{$key})
             }