fix(tabs): fix the tabs so the color property works on tab button

fixes #14758

core/src/components/tab-button/tab-button.ios.scss

@@ -2,13 +2,13 @@
 @import "./tab-button.ios.vars";
 
 :host {
+  --color: #{$tab-button-ios-text-color};
+  --color-selected: #{$tabbar-ios-text-color-active};
+  --background-focused: #{$tabbar-ios-background-color-focused};
+
   max-width: $tab-button-ios-max-width;
 
   font-size: $tab-button-ios-font-size;
-  color: $tab-button-ios-text-color;
-
-  --color-selected: #{$tabbar-ios-text-color-active};
-  --background-focused: #{$tabbar-ios-background-color-focused};
 }
 
 .tab-button-native {

core/src/components/tab-button/tab-button.md.scss

@@ -5,14 +5,13 @@
 // --------------------------------------------------
 
 :host {
+  --color: #{$tab-button-md-text-color};
+  --color-selected: #{$tabbar-md-text-color-active};
+  --background-focused: #{$tabbar-md-background-color-focused};
+
   max-width: 168px;
 
   font-weight: $tab-button-md-font-weight;
-
-  color: $tab-button-md-text-color;
-
-  --color-selected: #{$tabbar-md-text-color-active};
-  --background-focused: #{$tabbar-md-background-color-focused};
 }
 
 .tab-button-native {

core/src/components/tab-button/tab-button.scss

@@ -20,20 +20,15 @@
   border: 0;
 
   text-decoration: none;
-  background: none;
+
+  background: var(--background);
+  color: var( --color);
 
   user-select: none;
 
   box-sizing: border-box;
 }
 
-:host(.ion-color) {
-  color: #{current-color(contrast)};
-
-  --color-selected: #{current-color(contrast)};
-  --background-selected: #{current-color(shade)};
-}
-
 :host(.focused) {
   background: var(--background-focused);
 }

core/src/components/tabbar/tabbar.ios.scss

@@ -5,16 +5,17 @@
 // --------------------------------------------------
 
 :host {
+  // default color / background
+  --background: #{$tabbar-ios-background-color};
+  --background-rgb: var(--ion-tabbar-translucent-background-color-rgb, 248, 248, 248);
+  --color: #{$tabbar-ios-text-color-active};
+
   justify-content: center;
 
   height: $tabbar-ios-height;
 
   border-top: $tabbar-ios-border;
 
-  --ion-color-base: #{$tabbar-ios-background-color};
-  --ion-color-base-rgb: var(--ion-tabbar-translucent-background-color-rgb, 248, 248, 248);
-  --ion-color-contrast: #{$tabbar-ios-text-color-active};
-
   contain: strict;
 }
 

core/src/components/tabbar/tabbar.md.scss

@@ -2,13 +2,14 @@
 @import "./tabbar.md.vars";
 
 :host {
+  // default color / background
+  --background: #{$tabbar-md-background-color};
+  --color: #{$tabbar-md-text-color-active};
+
   height: $tabbar-md-height;
 
   border-top: $tabbar-md-border;
 
-  --ion-color-base: #{$tabbar-md-background-color};
-  --ion-color-contrast: #{$tabbar-md-text-color-active};
-
   contain: strict;
 }
 
@@ -18,7 +19,6 @@ ion-scroll {
   max-width: 650px;
 }
 
-
 // TODO: REVIEW
 :host(.placement-top) .tab-button.tab-selected .tab-button-icon,
 :host(.placement-top) .tab-button.tab-selected .tab-button-text {

core/src/components/tabbar/tabbar.scss

@@ -13,8 +13,14 @@
 
   width: 100%;
 
-  background: #{current-color(base)};
-  color: #{current-color(contrast)};
+  background: var(--background);
+  color: var(--color);
+}
+
+:host(.ion-color) ion-tab-button {
+  --background: #{current-color(base)};
+  --color: #{current-color(contrast, .7)};
+  --color-selected: #{current-color(contrast)};
 }
 
 :host(.tabbar-hidden) {

core/src/components/tabs/tabs.tsx

@@ -1,5 +1,6 @@
 import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
 import { Color, Config, NavOutlet, RouteID, RouteWrite, TabbarLayout, TabbarPlacement } from '../../interface';
+import { createColorClasses } from '../../utils/theme';
 
 
 @Component({
@@ -298,6 +299,12 @@ export class Tabs implements NavOutlet {
     return !!(selectedTab && selectedTab !== leavingTab && !this.transitioning);
   }
 
+  hostData() {
+    return {
+      class: createColorClasses(this.color)
+    };
+  }
+
   render() {
     const dom = [
       <div class="tabs-inner">