diff --git a/core/src/components/tab-bar/tab-bar.scss b/core/src/components/tab-bar/tab-bar.common.scss
similarity index 69%
rename from core/src/components/tab-bar/tab-bar.scss
rename to core/src/components/tab-bar/tab-bar.common.scss
index 60b1d1b7cd..b78f8014da 100644
--- a/core/src/components/tab-bar/tab-bar.scss
+++ b/core/src/components/tab-bar/tab-bar.common.scss
@@ -1,5 +1,3 @@
-@import "../../themes/native/native.globals";
-
 :host {
   /**
    * @prop --background: Background of the tab bar
@@ -28,31 +26,11 @@
 
   contain: strict;
   user-select: none;
-  z-index: $z-index-toolbar;
 
   /* stylelint-disable-next-line declaration-no-important */
   box-sizing: content-box !important;
 }
 
-:host(.ion-color) ::slotted(ion-tab-button) {
-  --background-focused: #{current-color(shade)};
-  --color-selected: #{current-color(contrast)};
-}
-
-:host(.ion-color) ::slotted(.tab-selected) {
-  color: #{current-color(contrast)};
-}
-
-:host(.ion-color),
-:host(.ion-color) ::slotted(ion-tab-button) {
-  color: #{current-color(contrast, 0.7)};
-}
-
-:host(.ion-color),
-:host(.ion-color) ::slotted(ion-tab-button) {
-  background: #{current-color(base)};
-}
-
 :host(.ion-color) ::slotted(ion-tab-button.ion-focused),
 :host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
   background: var(--background-focused);
diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss
index dd629a9e85..0b7ab0cfce 100644
--- a/core/src/components/tab-bar/tab-bar.ionic.scss
+++ b/core/src/components/tab-bar/tab-bar.ionic.scss
@@ -1,5 +1,5 @@
-@use "../../foundations/ionic.vars.scss" as tokens;
-@import "./tab-bar";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./tab-bar.common";
 @import "./tab-bar.ionic.vars";
 
 :host {
@@ -9,10 +9,26 @@
   --color: #{$tabbar-ionic-color};
   --color-selected: #{$tabbar-ionic-color-selected};
 
-  @include padding(4px, 16px);
+  /**
+   * Tab bar has a box sizing of content-box to ensure the padding
+   * is not included in the height. This is important for the
+   * component to adjust to the safe area bottom.
+   *
+   * In order for the height to be calculated correctly, the padding
+   * top and bottom must be excluded from the height calculation.
+   */
+  min-height: calc(globals.$ionic-scale-1400 - calc(globals.$ionic-space-100 * 2));
 
-  height: 52px;
-  gap: 12px;
+  padding-top: calc(globals.$ionic-space-100 + var(--ion-safe-area-top, 0));
+  padding-bottom: calc(globals.$ionic-space-100 + var(--ion-safe-area-bottom, 0));
 
-  box-shadow: tokens.$ionic-elevation-200;
+  /* stylelint-disable */
+  padding-right: calc(globals.$ionic-space-400 + var(--ion-safe-area-right, 0));
+  padding-left: calc(globals.$ionic-space-400 + var(--ion-safe-area-left, 0));
+  /* stylelint-enable */
+
+  gap: globals.$ionic-space-300;
+
+  // TODO(ROU-10853): replace this value with a layer token
+  z-index: 10;
 }
diff --git a/core/src/components/tab-bar/tab-bar.ionic.vars.scss b/core/src/components/tab-bar/tab-bar.ionic.vars.scss
index 437a53108c..49db0d582b 100644
--- a/core/src/components/tab-bar/tab-bar.ionic.vars.scss
+++ b/core/src/components/tab-bar/tab-bar.ionic.vars.scss
@@ -1,10 +1,10 @@
-@use "../../foundations/ionic.vars.scss" as tokens;
+@use "../../themes/ionic/ionic.globals.scss" as globals;
 
 // Ionic Tab Bar
 // --------------------------------------------------
 
 /// @prop - Background color of the tab bar
-$tabbar-ionic-background: var(--ion-tab-bar-background, tokens.$ionic-color-base-white);
+$tabbar-ionic-background: var(--ion-tab-bar-background, globals.$ionic-color-base-white);
 
 /// @prop - Background color of the tab bar button when activated
 // TODO(FW-6186): use design token here when it is added
@@ -14,7 +14,7 @@ $tabbar-ionic-background-activated: var(--ion-tab-bar-background-activated, #ece
 $tabbar-ionic-background-focused: var(--ion-tab-bar-background-focused, transparent);
 
 /// @prop - Color of the tab bar button
-$tabbar-ionic-color: var(--ion-tab-bar-color, tokens.$ionic-color-neutral-500);
+$tabbar-ionic-color: var(--ion-tab-bar-color, globals.$ionic-color-neutral-800);
 
 /// @prop - Color of the selected tab bar button
-$tabbar-ionic-color-selected: var(--ion-tab-bar-color-selected, tokens.$ionic-color-primary-400);
+$tabbar-ionic-color-selected: var(--ion-tab-bar-color-selected, globals.$ionic-color-primary-400);
diff --git a/core/src/components/tab-bar/tab-bar.ios.scss b/core/src/components/tab-bar/tab-bar.ios.scss
index 696ff35400..9b2769acf8 100644
--- a/core/src/components/tab-bar/tab-bar.ios.scss
+++ b/core/src/components/tab-bar/tab-bar.ios.scss
@@ -1,4 +1,4 @@
-@import "./tab-bar";
+@import "./tab-bar.native";
 @import "./tab-bar.ios.vars";
 
 // iOS Tabs
diff --git a/core/src/components/tab-bar/tab-bar.md.scss b/core/src/components/tab-bar/tab-bar.md.scss
index 6902b01a1a..3ed1b0eb66 100644
--- a/core/src/components/tab-bar/tab-bar.md.scss
+++ b/core/src/components/tab-bar/tab-bar.md.scss
@@ -1,4 +1,4 @@
-@import "./tab-bar";
+@import "./tab-bar.native";
 @import "../../themes/native/native.globals.md";
 @import "../tab-button/tab-button.md.vars";
 
diff --git a/core/src/components/tab-bar/tab-bar.native.scss b/core/src/components/tab-bar/tab-bar.native.scss
new file mode 100644
index 0000000000..f30da1f835
--- /dev/null
+++ b/core/src/components/tab-bar/tab-bar.native.scss
@@ -0,0 +1,25 @@
+@import "./tab-bar.common";
+@import "../../themes/native/native.globals";
+
+:host {
+  z-index: $z-index-toolbar;
+}
+
+:host(.ion-color) ::slotted(ion-tab-button) {
+  --background-focused: #{current-color(shade)};
+  --color-selected: #{current-color(contrast)};
+}
+
+:host(.ion-color) ::slotted(.tab-selected) {
+  color: #{current-color(contrast)};
+}
+
+:host(.ion-color),
+:host(.ion-color) ::slotted(ion-tab-button) {
+  color: #{current-color(contrast, 0.7)};
+}
+
+:host(.ion-color),
+:host(.ion-color) ::slotted(ion-tab-button) {
+  background: #{current-color(base)};
+}
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3293756dcd..2022889947 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 6a1f96261d..636cc8852a 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0690136503..a79c609475 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png
index f11bb7d3a7..64795ccfa6 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png
index d056d30cc6..6ce04a1413 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png
index 1443c32c30..4087812ba1 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ