Merge pull request #6645 from IgniteUI/simeonoff/fix-#6634

fix(themes): app not building with ng build

Author: damyanpetev

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

@@ -297,7 +297,7 @@
 /// @param {Color} $success [#4eb862] - The success color used throughout the application.
 /// @param {Color} $warn [#fbb13c] - The warning color used throughout the application.
 /// @param {Color} $error [#ff134a] - The error color used throughout the application.
-/// @param {Color} $grays [$igx-foreground-color] - The color used for generating the grayscale palette.
+/// @param {Color} $grays [#000 | $igx-foreground-color] - The color used for generating the grayscale palette.
 /// @param {Color} $surface [#fff] - The color used as a background in components, such as cards, sheets, and menus.
 /// @returns {Map} - A map consisting of 74 color variations, including the `primary`, `secondary`, `grays`,
 /// `info`, `success`, `warn`, and `error` colors.
@@ -309,12 +309,16 @@
     $success: #4eb862,
     $warn: #fbb13c,
     $error: #ff134a,
-    $grays: if(global-variable-exists('igx-foreground-color'), $igx-foreground-color, #000),
+    $grays: #000,
     $surface: #fff
 ) {
     $saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700');
     $shades: (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87);
 
+    @if global-variable-exists('igx-foreground-color') and type-of($igx-foreground-color) == 'color' {
+        $grays: $igx-foreground-color;
+    }
+
     $primary-palette: generate-palette($primary, $saturations);
     $secondary-palette: generate-palette($secondary, $saturations);
     $grayscale-palette: grayscale-palette($grays, $shades);