fix(tabs): focus color

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

@@ -10,6 +10,10 @@
   fill: $tab-button-ios-icon-color;
 }
 
+.tab-button-ios.focused {
+  background: $tabbar-ios-background-color-focused;
+}
+
 .tab-button-ios .tab-cover {
   @include padding(
     $tab-button-ios-padding-top,

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

@@ -13,6 +13,10 @@
   fill: $tab-button-md-icon-color;
 }
 
+.tab-button-md.focused {
+  background: $tabbar-md-background-color-focused;
+}
+
 .tab-button-md .tab-cover {
   @include padding(
     $tab-button-md-padding-top,

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

@@ -41,6 +41,11 @@ ion-tab-button {
   color: inherit;
   background: transparent;
   cursor: pointer;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
 }
 
 .tab-disabled {

packages/core/src/components/tab-button/tab-button.tsx

@@ -1,4 +1,4 @@
-import {Component, Element, Event, EventEmitter, Listen, Prop} from '@stencil/core';
+import {Component, Element, Event, EventEmitter, Listen, Prop, State} from '@stencil/core';
 
 
 @Component({
@@ -14,6 +14,8 @@ export class TabButton {
 
   mode: string;
 
+  @State() keyFocus = false;
+
   @Prop() selected = false;
   @Prop() tab: HTMLIonTabElement;
 
@@ -35,6 +37,14 @@ export class TabButton {
     ev.stopPropagation();
   }
 
+  private onKeyUp() {
+    this.keyFocus = true;
+  }
+
+  private onBlur() {
+    this.keyFocus = false;
+  }
+
   hostData() {
     const selected = this.selected;
     const tab = this.tab;
@@ -56,6 +66,7 @@ export class TabButton {
         'has-badge': hasBadge,
         'tab-disabled': tab.disabled,
         'tab-hidden': tab.hidden,
+        'focused': this.keyFocus
       }
     };
   }
@@ -63,7 +74,12 @@ export class TabButton {
   render() {
     const tab = this.tab;
     return [
-      <button type='button' class='tab-cover' disabled={tab.disabled}>
+      <button
+        type='button'
+        class='tab-cover'
+        onKeyUp={this.onKeyUp.bind(this)}
+        onBlur={this.onBlur.bind(this)}
+        disabled={tab.disabled}>
         { tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
         { tab.title && <span class='tab-button-text'>{tab.title}</span> }
         { tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }

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

@@ -42,7 +42,7 @@
 @mixin tabbar-ios($color-name) {
   $color-base: ion-color($colors-ios, $color-name, base, ios);
   $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
-  $color-shade: ion-color($colors-ios, $color-name, tint, ios);
+  $color-shade: ion-color($colors-ios, $color-name, shade, ios);
 
   $translucent-background-color: ion-color-alpha($colors-ios, $color-name, $alpha-ios-high, ios);
 
@@ -58,6 +58,10 @@
     color: $color-contrast;
   }
 
+  .tabbar-ios-#{$color-name} .tab-button.focused {
+    background: $color-shade;
+  }
+
   .tabbar-ios-#{$color-name} .tab-button:hover:not(.disable-hover),
   .tabbar-ios-#{$color-name} .tab-selected {
     font-weight: bold;

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

@@ -26,6 +26,7 @@
 @mixin tabbar-md($color-name) {
   $color-base: ion-color($colors-md, $color-name, base, md);
   $color-contrast: ion-color($colors-md, $color-name, contrast, md);
+  $color-shade: ion-color($colors-md, $color-name, shade, ios);
 
   .tabbar-md-#{$color-name} {
     color: $color-contrast;
@@ -34,6 +35,10 @@
     fill: $color-contrast;
   }
 
+  .tabbar-md-#{$color-name} .tab-button.focused {
+    background: $color-shade;
+  }
+
   .enable-hover .tabbar-md-#{$color-name} .tab-button:hover,
   .tabbar-md-#{$color-name} .tab-button.tab-selected {
     color: $color-contrast;

packages/core/src/themes/ionic.functions.color.scss

@@ -8,6 +8,14 @@ $enable-css-variables: true;
 $css-variables: ();
 $modes: (ios, md);
 
+@function get-color-shade($color) {
+  @return mix(#000, $color, 12%);
+}
+
+@function get-color-tint($color) {
+  @return mix(#fff, $color, 10%);
+}
+
 @function force-hex($color) {
   @if type-of($color) == "color" {
     $hex: str-slice(ie-hex-str($color), 4);

packages/core/src/themes/ionic.theme.default.ios.scss

@@ -96,6 +96,7 @@ $overlay-ios-background-color:                css-var(#f9f9f9, overlay-ios-backg
 // iOS Tabs & Tab bar
 // --------------------------------------------------
 $tabbar-ios-background-color:                 css-var($tabbar-background-color, tabbar-ios-background-color) !default;
+$tabbar-ios-background-color-focused:         css-var($tabbar-background-color-focused, tabbar-ios-background-color-focused) !default;
 $tabbar-ios-translucent-background-color:     css-var(rgba(248, 248, 248, .8), tabbar-ios-translucent-background-color) !default; // TODO: @color-mod: remove
 $tabbar-ios-border-color:                     css-var(rgba(0, 0, 0, .2), tabbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
 $tabbar-ios-text-color:                       css-var($tabbar-text-color, tabbar-ios-text-color) !default;

packages/core/src/themes/ionic.theme.default.md.scss

@@ -95,6 +95,7 @@ $overlay-md-background-color:           css-var(#fafafa, overlay-md-background-c
 // Material Design Tabs & Tab bar
 // --------------------------------------------------
 $tabbar-md-background-color:            css-var($tabbar-background-color, tabbar-md-background-color) !default;
+$tabbar-md-background-color-focused:    css-var($tabbar-background-color-focused, tabbar-ios-background-color-focused) !default;
 $tabbar-md-border-color:                css-var(rgba(0, 0, 0, .07), tabbar-md-border-color) !default; // TODO: @color-mod($border-md-color, a($alpha-lowest))
 $tabbar-md-text-color:                  css-var($text-md-color-step-400, tabbar-md-text-color) !default; // TODO: @color-mod($text-md-color, a($alpha-high))
 $tabbar-md-text-color-active:           css-var($tabbar-text-color-active, tabbar-md-text-color-active) !default;

packages/core/src/themes/ionic.theme.default.scss

@@ -35,64 +35,64 @@ $ion-colors:  (
     base:             $primary,
     contrast:         #fff,
     rgb:              color-to-rgb-list($primary),
-    shade:            mix(#000, $primary, 12%),
+    shade:            get-color-shade($primary),
-    tint:             mix(#fff, $primary, 10%)
+    tint:             get-color-tint($primary)
   ),
   secondary: (
     base:             $secondary,
     contrast:         #fff,
     rgb:              color-to-rgb-list($secondary),
-    shade:            mix(#000, $secondary, 12%),
+    shade:            get-color-shade($secondary),
-    tint:             mix(#fff, $secondary, 10%)
+    tint:             get-color-tint($secondary)
   ),
   tertiary: (
     base:             $tertiary,
     contrast:         #fff,
     rgb:              color-to-rgb-list($tertiary),
-    shade:            mix(#000, $tertiary, 12%),
+    shade:            get-color-shade($tertiary),
-    tint:             mix(#fff, $tertiary, 10%)
+    tint:             get-color-tint($tertiary)
   ),
   success: (
     base:             $success,
     contrast:         #fff,
     rgb:              color-to-rgb-list($success),
-    shade:            mix(#000, $success, 12%),
+    shade:            get-color-shade($success),
-    tint:             mix(#fff, $success, 10%)
+    tint:             get-color-tint($success)
   ),
   warning: (
     base:             $warning,
     contrast:         #000,
     rgb:              color-to-rgb-list($warning),
-    shade:            mix(#000, $warning, 12%),
+    shade:            get-color-shade($warning),
-    tint:             mix(#fff, $warning, 10%)
+    tint:             get-color-tint($warning)
   ),
   danger: (
     base:             $danger,
     contrast:         #fff,
     rgb:              color-to-rgb-list($danger),
-    shade:            mix(#000, $danger, 12%),
+    shade:            get-color-shade($danger),
-    tint:             mix(#fff, $danger, 10%)
+    tint:             get-color-tint($danger)
   ),
   light: (
     base:             $light,
     contrast:         #000,
     rgb:              color-to-rgb-list($light),
-    shade:            mix(#000, $light, 12%),
+    shade:            get-color-shade($light),
-    tint:             mix(#fff, $light, 10%)
+    tint:             get-color-tint($light)
   ),
   medium: (
     base:             $medium,
     contrast:         #000,
     rgb:              color-to-rgb-list($medium),
-    shade:            mix(#000, $medium, 12%),
+    shade:            get-color-shade($medium),
-    tint:             mix(#fff, $medium, 10%)
+    tint:             get-color-tint($medium)
   ),
   dark: (
     base:             $dark,
     contrast:         #fff,
     rgb:              color-to-rgb-list($dark),
-    shade:            mix(#000, $dark, 12%),
+    shade:            get-color-shade($dark),
-    tint:             mix(#fff, $dark, 10%)
+    tint:             get-color-tint($dark)
   )
 );
 $colors:                                ion-extend-colors($ion-colors, $colors);
@@ -190,6 +190,7 @@ $overlay-background-color:              css-var(#fafafa, overlay-background-colo
 // Default Tabs & Tab bar
 // --------------------------------------------------
 $tabbar-background-color:               css-var(#f8f8f8, tabbar-background-color) !default;
+$tabbar-background-color-focused:       css-var(get-color-shade(#f8f8f8), tabbar-background-color-focused) !default;
 $tabbar-border-color:                   css-var($border-color, tabbar-border-color) !default;
 $tabbar-text-color-active:              css-var(#488aff, tabbar-text-color-active) !default;
 $tabbar-text-color:                     css-var(#8c8c8c, tabbar-text-color) !default;