fix(themes): passing css variables breaks build (#12563)

Co-authored-by: Stamen Stoychev <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>

Author: 3 people

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use 'sass:color';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
@@ -114,11 +115,15 @@
         }
 
         @if not($hover-background) and $background {
-            $hover-background: color.scale($background, $lightness: 5%);
+            @if meta.type-of($background) == 'color' {
+                $hover-background: color.scale($background, $lightness: 5%);
+            }
         }
 
         @if not($hover-foreground) and $hover-background {
-            $hover-foreground: text-contrast($hover-background);
+            @if meta.type-of($hover-background) == 'color' {
+                $hover-foreground: text-contrast($hover-background);
+            }
         }
 
         @if not($focus-background) and $background {

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -393,10 +393,12 @@
     }
 
     @if not($filtering-header-background) and $header-background {
-        @if meta.type-of($header-background) == 'color' and luminance($header-background) < .5 {
-            $filtering-header-background: to-opaque(color.scale($header-background, $lightness: 5%));
-        } @else {
-            $filtering-header-background: to-opaque(color.scale($header-background, $lightness: -5%));
+        @if meta.type-of($header-background) == 'color' {
+            @if luminance($header-background) < .5 {
+                $filtering-header-background: to-opaque(color.scale($header-background, $lightness: 5%));
+            } @else {
+                $filtering-header-background: to-opaque(color.scale($header-background, $lightness: -5%));
+            }
         }
     }
 
@@ -405,10 +407,12 @@
     }
 
     @if not($filtering-row-background) and $header-background {
-        @if meta.type-of($header-background) == 'color' and luminance($header-background) < .5 {
-            $filtering-row-background: to-opaque(color.scale($header-background, $lightness: 5%));
-        } @else {
-            $filtering-row-background: to-opaque(color.scale($header-background, $lightness: -5%));
+        @if meta.type-of($header-background) == 'color' {
+            @if luminance($header-background) < .5 {
+                $filtering-row-background: to-opaque(color.scale($header-background, $lightness: 5%));
+            } @else {
+                $filtering-row-background: to-opaque(color.scale($header-background, $lightness: -5%));
+            }
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss

@@ -100,18 +100,22 @@
     }
 
     @if not($item-background-hover) and $item-background {
-        @if meta.type-of($item-background) == 'color' and luminance($item-background) < .5 {
-            $item-background-hover: color.scale($item-background, $lightness: 8%);
-        } @else {
-            $item-background-hover: color.scale($item-background, $lightness: -8%);
+        @if meta.type-of($item-background) == 'color' {
+            @if luminance($item-background) < .5 {
+                $item-background-hover: color.scale($item-background, $lightness: 8%);
+            } @else {
+                $item-background-hover: color.scale($item-background, $lightness: -8%);
+            }
         }
     }
 
     @if not($item-background-active) and $item-background {
-        @if meta.type-of($item-background) == 'color' and luminance($item-background) < .5 {
-            $item-background-active: color.scale($item-background, $lightness: 8%);
-        } @else {
-            $item-background-active: color.scale($item-background, $lightness: -8%);
+        @if meta.type-of($item-background) == 'color' {
+            @if luminance($item-background) < .5 {
+                $item-background-active: color.scale($item-background, $lightness: 8%);
+            } @else {
+                $item-background-active: color.scale($item-background, $lightness: -8%);
+            }
         }
     }