diff --git a/core/src/components/tab-bar/test/spec/index.html b/core/src/components/tab-bar/test/spec/index.html
index ad058b2793..2f06112a48 100644
--- a/core/src/components/tab-bar/test/spec/index.html
+++ b/core/src/components/tab-bar/test/spec/index.html
@@ -30,6 +30,36 @@
+
+
+
+
+ Favorites
+
+
+
+
+ Recents
+
+
+
+
+ Contacts
+
+
+
+
+ Keypad
+
+
+
+
+ Voicemail
+
+
+
+
+
diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss
index 851c1d976f..12591597dd 100644
--- a/core/src/components/tab-button/tab-button.ios.scss
+++ b/core/src/components/tab-button/tab-button.ios.scss
@@ -12,15 +12,6 @@
font-size: $tab-button-ios-font-size;
}
-:host(.tab-has-label-only) ::slotted(ion-label) {
- @include margin(2px, 0);
-
- font-size: $tab-button-ios-font-size + 2;
- font-size: 14px;
-
- line-height: 1.1;
-}
-
// iOS Tab Button: Badge
// --------------------------------------------------
@@ -41,7 +32,7 @@
// --------------------------------------------------
::slotted(ion-icon) {
- @include margin(4px, null, null, null);
+ @include margin(2px, null, 2px, null);
font-size: $tab-button-ios-icon-size;
}
@@ -58,6 +49,21 @@
@include margin(0, null, 1px, null);
min-height: $tab-button-ios-font-size + 1;
+
+ font-weight: 500;
+}
+
+
+// iOS Tab Button Label Only
+// --------------------------------------------------
+
+:host(.tab-has-label-only) ::slotted(ion-label) {
+ @include margin(2px, 0);
+
+ font-size: $tab-button-ios-font-size + 2;
+ font-size: 14px;
+
+ line-height: 1.1;
}
diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss
index fa5b3f701b..54b0dde362 100644
--- a/core/src/themes/ionic.theme.default.ios.scss
+++ b/core/src/themes/ionic.theme.default.ios.scss
@@ -16,7 +16,7 @@ $overlay-ios-background-color: var(--ion-overlay-background-color,
$tabbar-ios-background: var(--ion-tab-bar-background, $background-color) !default;
$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
$tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
-$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-550) !default;
+$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-600) !default;
$tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
// iOS Toolbar