fix(tab-bar): use correct colors

Author: thetaPC

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

@@ -8,7 +8,7 @@
   // default color / background
   --background: var(--ion-components-ion-tabbar-bg);
   --background-focused: #{$tabbar-ios-background-focused};
-  --border: #{$hairlines-width solid var(--ion-components-ion-tabbar-border-color)};
+  --border: #{$hairlines-width solid (var(--ion-tab-bar-border-color, var(--ion-components-ion-tab-bar-border-color)))};
   --color: #{$tab-button-ios-text-color};
   --color-selected: #{$tabbar-ios-color-selected};
 

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

@@ -6,7 +6,7 @@
   // default color / background
   --background: #{$tabbar-md-background};
   --background-focused: #{$tabbar-md-background-focused};
-  --border: #{1px solid var(--ion-components-ion-tabbar-border-color)};
+  --border: #{1px solid (var(--ion-tab-bar-border-color, var(--ion-components-ion-tab-bar-border-color)))};
   --color: #{$tab-button-md-text-color};
   --color-selected: #{$tabbar-md-color-selected};
 

core/src/themes/ios/default.tokens.ts

@@ -119,12 +119,12 @@ export const defaultTheme: DefaultTheme = {
     },
     IonTabbar: {
       bg: 'var(--ion-tab-bar-background-color, var(--ion-color-gray-50))',
-      borderColor: 'var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-gray-150)))',
+      borderColor: 'var(--ion-border-color, var(--ion-color-gray-150))',
     },
     IonToolbar: {
       activatedButtonColor: 'var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))',
       bg: 'var(--ion-color-gray-50)',
-      borderColor: 'var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-gray-150)))',
+      borderColor: 'var(--ion-border-color, var(--ion-color-gray-150))',
     },
   },
 };

core/src/themes/ios/light.tokens.ts

@@ -48,11 +48,11 @@ export const lightTheme: LightTheme = {
     },
     IonTabbar: {
       bg: 'var(--ion-tab-bar-background-color, #f7f7f7)',
-      borderColor: 'var(--ion-tab-bar-border-color, var(--ion-border-color, rgba(0, 0, 0, 0.2)))',
+      borderColor: 'var(--ion-border-color, rgba(0, 0, 0, 0.2))',
     },
     IonToolbar: {
       bg: '#f7f7f7',
-      borderColor: 'var(--ion-toolbar-border-color, var(--ion-border-color, rgba(0, 0, 0, 0.2)))',
+      borderColor: 'var(--ion-border-color, rgba(0, 0, 0, 0.2))',
     },
   },
 };

core/src/themes/md/default.tokens.ts

@@ -110,12 +110,12 @@ export const defaultTheme: DefaultTheme = {
       nativeSpinnerBg: 'var(--ion-color-gray-250)', // Available only in md
     },
     IonTabBar: {
-      borderColor: 'var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-gray-150)))',
+      borderColor: 'var(--ion-border-color, var(--ion-color-gray-150))',
     },
     IonToolbar: {
       activatedButtonBg: 'var(--ion-toolbar-background, var(--color))',
       bg: '#1f1f1f',
-      borderColor: 'var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-gray-150)))',
+      borderColor: 'var(--ion-border-color, var(--ion-color-gray-150))',
     },
   },
 };

core/src/themes/md/light.tokens.ts

@@ -28,11 +28,11 @@ export const lightTheme: LightTheme = {
       nativeSpinnerBg: defaultColors.white, // Available only in md
     },
     IonTabBar: {
-      borderColor: 'var(--ion-tab-bar-border-color, var(--ion-border-color, rgba(0, 0, 0, 0.07)))',
+      borderColor: 'var(--ion-border-color, rgba(0, 0, 0, 0.07))',
     },
     IonToolbar: {
       bg: `var(--ion-background-color, ${defaultColors.white})`,
-      borderColor: 'var(--ion-toolbar-border-color, var(--ion-border-color, #c1c4cd))',
+      borderColor: 'var(--ion-border-color, #c1c4cd)',
     },
   },
 };

core/src/themes/native/native.theme.default.ios.scss

@@ -17,7 +17,7 @@ $tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary,
 // iOS Toolbar
 // --------------------------------------------------
 $toolbar-ios-background: var(--ion-toolbar-background, var(--ion-components-ion-toolbar-bg));
-$toolbar-ios-border-color: var(--ion-components-ion-toolbar-border-color);
+$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-components-ion-toolbar-border-color));
 $toolbar-ios-color: var(--ion-toolbar-color, $text-color);
 
 // iOS List & List Items

core/src/themes/native/native.theme.default.md.scss

@@ -19,7 +19,7 @@ $tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary,
 // Material Design Toolbar
 // --------------------------------------------------
 $toolbar-md-background: var(--ion-toolbar-background, var(--ion-components-ion-toolbar-bg));
-$toolbar-md-border-color: var(--ion-components-ion-toolbar-border-color);
+$toolbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-components-ion-toolbar-border-color));
 $toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242));
 
 // Material Design List & List Items