fix(theme): various fixes and improvements

Author: simeonoff

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

@@ -23,6 +23,3 @@ $components: () !default;
 /// The global themes registry map.
 $themes: () !default;
 
-/// The global background color.
-$igx-background-color: #fff !default;
-$igx-foreground-color: rgba(0, 0, 0, .87) !default;

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

@@ -297,18 +297,19 @@
 /// @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 [#000] - The color used for generating the grayscale palette.
+/// @param {Color} $grays [$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.
+/// @see $igx-foreground-color
 @function igx-palette(
     $primary,
     $secondary,
     $info: #1377d5,
     $success: #4eb862,
     $warn: #fbb13c,
     $error: #ff134a,
-    $grays: #000,
+    $grays: if(global-variable-exists('igx-foreground-color'), $igx-foreground-color, #000),
     $surface: #fff
 ) {
     $saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700');

projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss

@@ -474,7 +474,6 @@
         }
     }
 
-    %igx-card-content,
     %igx-card-content > p {
         @include igx-type-style($type-scale, $content) {
             margin: 0;

projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -240,6 +240,7 @@
         align-items: center;
         overflow: hidden;
         background: --var($theme, 'item-background');
+
         @if $not-bootstrap-theme {
             box-shadow: --var($theme, 'tab-area-shadow');
         }
@@ -350,6 +351,9 @@
         outline: 0;
         color: --var($theme, 'item-active-color');
 
+        @if $bootstrap-theme {
+            border-color: --var($theme, 'border-color--hover') --var($theme, 'border-color--hover') transparent;
+        }
 
         &:focus {
             background: --var($theme, 'item-active-background');

projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss

@@ -354,7 +354,9 @@
     }
 
     %time-picker__header-hour {
-        @include igx-type-style($type-scale, $header-hour);
+        @include igx-type-style($type-scale, $header-hour) {
+            margin-top: 0;
+        }
     }
 
     %time-picker__column {

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

@@ -61,7 +61,6 @@
 @import '../print/index';
 
 /// Includes the base for each theme.
-
 [class^='igx-'] {
     &,
     *,
@@ -71,14 +70,27 @@
     }
 }
 
-@mixin igx-core($print-layout: true, $direction: ltr) {
+/// @param {boolean} $print-layout [true] - Activates the printing styles of the components.
+/// @param {string} $direction [ltr] - Sets the layout direction. Can be 'ltr' or 'rtl'.
+/// @param {color} $foreground-color [0, 0, 0, .87] - Sets the value of the global $igx-foreground-color used in all typography styles.
+/// @see $igx-foreground-color
+/// @requires {mixin} igx-typography
+/// @requires {mixin} igx-vhelper
+/// @requires {mixin} igx-print-layout
+@mixin igx-core(
+    $print-layout: true,
+    $direction: ltr,
+    $foreground-color: rgba(0, 0, 0, .87)
+) {
     @if $direction != ltr and $direction != rtl {
         $direction: ltr !global;
     } @else {
         $direction: $direction !global;
     }
 
-    @include igx-typography();
+    $igx-foreground-color: $foreground-color !global;
+
+    @include igx-typography($base-color: $foreground-color);
     @include igx-vhelper();
 
     @if $print-layout == true {

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_tabs.scss

@@ -33,10 +33,7 @@ $_dark-fluent-tabs: extend($_fluent-tabs, $_base-dark-tabs);
 /// @requires {function} extend
 /// @requires $_bootstrap-tabs
 $_dark-bootstrap-tabs: extend($_bootstrap-tabs, (
-    item-background: #333,
-    button-background: #333,
-    item-hover-background: #333,
-    item-active-background: #333,
+    // item-active-background: #333,
     item-hover-color: (
         igx-color: ('primary', 400)
     ),

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_tabs.scss

@@ -124,6 +124,8 @@ $_bootstrap-tabs: extend(
     (
         variant: 'bootstrap',
 
+        item-background: inherit,
+
         border-color: (
             igx-color: ('grays', 300)
         ),
@@ -136,7 +138,7 @@ $_bootstrap-tabs: extend(
             igx-color: ('primary', 500)
         ),
 
-        item-hover-background: #fff,
+        item-hover-background: inherit,
 
         item-hover-color: (
             igx-color: ('primary', 700)
@@ -150,7 +152,7 @@ $_bootstrap-tabs: extend(
             igx-color: ('grays', 800)
         ),
 
-        item-active-background: #fff,
+        item-active-background: inherit,
 
         indicator-color: (
             igx-color: ('grays', 400)

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

@@ -82,11 +82,11 @@
             }
 
             // Add native element typographic styles.
-            @if $e != null {
-                #{$e} {
-                    @extend %#{$category};
-                }
-            }
+            // @if $e != null {
+            //     #{$e} {
+            //         @extend %#{$category};
+            //     }
+            // }
 
             // Add class selector typographic styles.
             @include e(#{$category}) {