feat(bootstrap-theme tabs): Fix colors

1. Make tabs to use the surface color
2. Rollback the ripple

Author: MPopov

projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss

@@ -48,16 +48,8 @@
 @mixin igx-ripple($theme, $palette: $default-palette) {
     @include igx-root-css-vars($theme);
 
-    $variant: map-get($theme, variant);
-
-    $ripple-display: map-get((
-        material: block,
-        fluent: none !important,
-        bootstrap: none !important
-    ), $variant);
-
     %igx-ripple-display {
-        display: $ripple-display;
+        display: block;
         position: absolute;
         border-radius: 50%;
         background: --var($theme, 'color');

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

@@ -375,7 +375,10 @@
             background: --var($theme, 'item-active-background');
             position: relative;
             z-index: 1;
-            border-color: --var($theme, 'border-color') --var($theme, 'border-color') --var($theme, 'item-active-background');
+            border-top-color: --var($theme, 'border-color');
+            border-left-color: --var($theme, 'border-color');
+            border-right-color: --var($theme, 'border-color');
+            border-bottom-color: transparent;
 
             &::after {
                 content: '';
@@ -389,7 +392,10 @@
 
             &:hover,
             &:focus {
-                border-color: --var($theme, 'border-color') --var($theme, 'border-color') transparent;
+                border-top-color: --var($theme, 'border-color');
+                border-left-color: --var($theme, 'border-color');
+                border-right-color: --var($theme, 'border-color');
+                border-bottom-color: transparent;
             }
         }
     }

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

@@ -30,13 +30,10 @@ $_dark-fluent-tabs: extend($_fluent-tabs, $_base-dark-tabs);
 
 /// Generates a dark bootstrap tabs schema based on a mix of $_bootstrap-tabs and $_base-dark-tabs.
 /// @type {Map}
+/// @prop {Map} item-background [igx-color: ('primary', 400)] - The background color used for the tabs header.
 /// @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-hover-color: (
         igx-color: ('primary', 400)
     ),

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

@@ -10,7 +10,7 @@
 /// @type {Map}
 ///
 /// @property {map} item-text-color [igx-color: ('grays', 700)] - The color used for the tab text color.
-/// @property {map} item-background [#fff] - The background color used for the tabs header.
+/// @property {Color} item-background [#fff] - The background color used for the tabs header.
 /// @property {map} item-hover-background [igx-color: ('grays', 200)] - The background used for the tabs on hover.
 /// @property {map} item-hover-color [igx-color: ('grays', 700)] - The text color used for the tabs on hover.
 ///
@@ -108,12 +108,14 @@ $_fluent-tabs: extend($_light-tabs, $_fluent-shape-tabs);
 /// Generates a bootstrap tabs schema.
 /// @type {Map}
 /// @property {map} item-text-color [igx-color: ('primary', 500)] - The color used for the tab text color.
-/// @property {Color} item-hover-background [#fff] - The background used for the tabs on hover.
 /// @property {map} item-hover-color [igx-color: ('primary', 700)] - The text color used for the tabs on hover.
 /// @property {map} item-active-color [igx-color: ('grays', 800)] - The color used for the active tabs text.
 /// @property {map} item-active-icon-color [igx-color: ('grays', 800)] - The color used for the active tabs icon.
-/// @property {Color} item-active-background [#fff] - The color used for the active/focused tab background.
 /// @property {map} indicator-color [igx-color: ('grays', 400)] - The color used for the tabs borders.
+/// @property {map} item-background [igx-color: ('surface')] - The background color used for the tabs header.
+/// @property {map} button-background [igx-color: ('surface')] - The color used for the button background.
+/// @property {map} item-hover-background [igx-color: ('surface')] - The background used for the tabs on hover.
+/// @property {map} item-active-background [igx-color: ('surface')] - The color used for the active/focused tab background.
 
 /// @property {Number} border-radius [4px] - The border radius fraction, between 0-1 to be used for list component.
 /// @requires {function} extend
@@ -124,6 +126,22 @@ $_bootstrap-tabs: extend(
     (
         variant: 'bootstrap',
 
+        item-background: (
+            igx-color: ('surface')
+        ),
+
+        button-background: (
+            igx-color: ('surface')
+        ),
+
+        item-hover-background: (
+            igx-color: ('surface')
+        ),
+
+        item-active-background: (
+            igx-color: ('surface')
+        ),
+
         border-color: (
             igx-color: ('grays', 300)
         ),
@@ -136,8 +154,6 @@ $_bootstrap-tabs: extend(
             igx-color: ('primary', 500)
         ),
 
-        item-hover-background: #fff,
-
         item-hover-color: (
             igx-color: ('primary', 700)
         ),
@@ -150,8 +166,6 @@ $_bootstrap-tabs: extend(
             igx-color: ('grays', 800)
         ),
 
-        item-active-background: #fff,
-
         indicator-color: (
             igx-color: ('grays', 400)
         ),