fix(themes): make sure that $base-color is not used anywhere in the framework

Author: MPopov

projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

@@ -497,7 +497,6 @@
     @include igx-typography(
         $font-family: "'Open Sans', Helvetica, Arial, sans-serif",
         $type-scale: $fluent-type-scale,
-        $base-color: #323130
     );
 
     @include igx-theme(
@@ -532,8 +531,7 @@
 
     @include igx-typography(
         $font-family: "'Open Sans', Helvetica, Arial, sans-serif",
-        $type-scale: $fluent-type-scale,
-        $base-color: #fff
+        $type-scale: $fluent-type-scale
     );
 
     @include igx-theme(
@@ -569,8 +567,7 @@
 
     @include igx-typography(
         $font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-        $type-scale: $bootstrap-type-scale,
-        $base-color: #212529
+        $type-scale: $bootstrap-type-scale
     );
 
     @include igx-calendar-typography($bootstrap-type-scale, $categories: (
@@ -632,8 +629,7 @@
 
     @include igx-typography(
         $font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-        $type-scale: $bootstrap-type-scale,
-        $base-color: #fff
+        $type-scale: $bootstrap-type-scale
     );
 
     @include igx-calendar-typography($bootstrap-type-scale, $categories: (

projects/igniteui-angular/src/lib/core/styles/typography/README.md

@@ -84,15 +84,13 @@ The typography mixin defines the global typography styles for an application, in
 It currently accepts 3 arguments:
 - `$font-family` - The global font family to be used by the application.
 - `$type-scale` - The default type scale to be used by the application.
-- `$base-color` - The base text color to be used by the application.
 
 To overwrite the default typography, include the `igx-typography` mixin anywhere after the `igx-core` mixin. Let's take advantage of the type scale `$my-type-scale` we defined above and make it the default type scale.
 
 ```scss
 @include igx-typography(
     $font-family: "'Roboto', sans-serif",
-    $type-scale: $my-type-scale,
-    $base-color: #484848
+    $type-scale: $my-type-scale
 );
 ```
 

projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss

@@ -36,7 +36,6 @@
 /// default-type-scale will be used.
 /// @param {String} $font-family ["'Titillium Web', sans-serif"] - The font family to be used across all typographic elements.
 /// @param {Map} $type-scale [$default-type-scale] - A type scale map as produced by igx-type-scale.
-/// @param {String} $base-color [rgba(0, 0, 0, .74)] - The default color used across all typographic elements (Components define their own text colors).
 @mixin igx-typography(
     $font-family: "'Titillium Web', sans-serif",
     $type-scale: $default-type-scale,

src/styles/igniteui-theme.scss

@@ -5,39 +5,43 @@
 @import 'app-palettes';
 @import 'app-layout';
 
+$igx-background-color: igx-color($default-palette, 'surface');
+$igx-foreground-color: text-contrast($igx-background-color);
+
+body {
+    background: $igx-background-color;
+    color: #222;
+}
+
 @include igx-core($direction: ltr);
 
 /* autoprefixer grid: on */
-.default-theme {
-    $igx-background-color: igx-color($default-palette, 'surface');
-    $igx-foreground-color: text-contrast($igx-background-color);
 
-    background: $igx-background-color;
-    color: $igx-foreground-color;
-
-    @include scrollbar-love();
-    @include igx-theme($default-palette);
 
-    .nav-header {
-        @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-background-color);
-    }
-}
 
-// .dark-theme {
-//     $igx-background-color: igx-color($green-dark-palette, 'surface');
-//     $igx-foreground-color: text-contrast($igx-background-color);
+@include scrollbar-love();
+@include igx-theme($default-palette);
 
-//     background: $igx-background-color;
-//     color: $igx-foreground-color;
+.nav-header {
+    @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-background-color);
+}
 
-//     @include scrollbar-love(lighten($igx-background-color, 15%));
-//     @include igx-dark-theme($green-dark-palette);
-//     @include igx-typography($font-family: 'sans-serif', $base-color: gray);
 
-//     .nav-header {
-//         @include nav-logo('../assets/images/rsrcs/igniteui-logo-dark-bg', $igx-background-color);
-//     }
-// }
+//.dark-theme {
+//    $igx-background-color: igx-color($green-dark-palette, 'surface');
+//    $igx-foreground-color: text-contrast($igx-background-color);
+//
+//    background: $igx-background-color;
+//    color: $igx-foreground-color;
+//
+//    @include scrollbar-love(lighten($igx-background-color, 15%));
+//    @include igx-dark-theme($green-dark-palette);
+//    @include igx-typography($font-family: 'sans-serif');
+//
+//    .nav-header {
+//        @include nav-logo('../assets/images/rsrcs/igniteui-logo-dark-bg', $igx-background-color);
+//    }
+//}
 
 // .bootstrap-theme {
 //     $igx-background-color: igx-color($bootstrap-palette, 'surface');