diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png
index 36f2372c38..9d16b5c3b3 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index a0dccc8c9f..95e534d988 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -1,6 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @import "./input";
-@import "./input.ionic.vars";
 @import "./input.ionic.outline.scss";
 
 // Ionic Input
diff --git a/core/src/components/input/input.ionic.vars.scss b/core/src/components/input/input.ionic.vars.scss
deleted file mode 100644
index 7772c81e40..0000000000
--- a/core/src/components/input/input.ionic.vars.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// Ionic Input
-// --------------------------------------------------
diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss
index 62fcf981c1..89c7b3fd2a 100644
--- a/core/src/components/item/item.ionic.scss
+++ b/core/src/components/item/item.ionic.scss
@@ -1,12 +1,11 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "./item.common";
-@use "./item.ionic.vars" as vars;
 
 // Item
 // --------------------------------------------------
 
 :host {
-  --background: #{vars.$item-ionic-background};
+  --background: #{globals.$ion-primitives-base-white};
   --background-activated: #{globals.$ion-primitives-neutral-200};
   --border-color: #{globals.$ion-primitives-neutral-300};
   --border-style: #{globals.$ion-border-style-solid};
diff --git a/core/src/components/item/item.ionic.vars.scss b/core/src/components/item/item.ionic.vars.scss
deleted file mode 100644
index ce1c63ee49..0000000000
--- a/core/src/components/item/item.ionic.vars.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@use "../../themes/ionic/ionic.globals.scss" as globals;
-
-/// @prop - Padding start for the item content
-$item-ionic-padding-start: globals.$ion-space-400;
-
-/// @prop - Padding end for the item content
-$item-ionic-padding-end: globals.$ion-space-400;
-
-/// @prop - Background color for the item content
-$item-ionic-background: globals.$ion-primitives-base-white;
diff --git a/core/src/components/list-header/list-header.ionic.scss b/core/src/components/list-header/list-header.ionic.scss
index 386d714b85..3c1ebc6038 100644
--- a/core/src/components/list-header/list-header.ionic.scss
+++ b/core/src/components/list-header/list-header.ionic.scss
@@ -1,5 +1,4 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@use "../item/item.ionic.vars" as itemVars;
 @import "./list-header";
 
 :host {
@@ -10,7 +9,7 @@
 
   min-height: 58px;
 
-  /** 
+  /**
    * The focus rings from components like buttons and links
    * are being cut off. This style ensures that the focus ring
    * is completely visible.
@@ -19,13 +18,13 @@
 
   /* stylelint-disable */
   @include ltr() {
-    padding-right: calc(var(--ion-safe-area-right, 0px) + #{itemVars.$item-ionic-padding-end});
-    padding-left: calc(var(--ion-safe-area-left, 0px) + #{itemVars.$item-ionic-padding-start});
+    padding-right: calc(var(--ion-safe-area-right, 0px) + #{globals.$ion-space-400});
+    padding-left: calc(var(--ion-safe-area-left, 0px) + #{globals.$ion-space-400});
   }
 
   @include rtl() {
-    padding-right: calc(var(--ion-safe-area-right, 0px) + #{itemVars.$item-ionic-padding-start});
-    padding-left: calc(var(--ion-safe-area-left, 0px) + #{itemVars.$item-ionic-padding-end});
+    padding-right: calc(var(--ion-safe-area-right, 0px) + #{globals.$ion-space-400});
+    padding-left: calc(var(--ion-safe-area-left, 0px) + #{globals.$ion-space-400});
   }
   /* stylelint-enable */
 }
diff --git a/core/src/components/list/list.ionic.scss b/core/src/components/list/list.ionic.scss
index ded1f9f3d8..ee1604166d 100644
--- a/core/src/components/list/list.ionic.scss
+++ b/core/src/components/list/list.ionic.scss
@@ -1,6 +1,4 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@use "../item/item.ionic.vars" as itemVars;
-@import "./list.ionic.vars.scss";
 
 // Ionic List
 // --------------------------------------------------
@@ -11,7 +9,7 @@ ion-list {
 
   display: block;
 
-  background: #{itemVars.$item-ionic-background};
+  background: #{globals.$ion-primitives-base-white};
 
   contain: content;
   list-style-type: none;
@@ -52,7 +50,7 @@ ion-list {
      * The top of the list should not have a border radius because
      * that would include the header.
      */
-    @include globals.border-radius(initial, initial, $list-ionic-border-radius-round, $list-ionic-border-radius-round);
+    @include globals.border-radius(initial, initial, globals.$ion-border-radius-400, globals.$ion-border-radius-400);
   }
 
   // Target the first element in the list after the header
@@ -62,7 +60,7 @@ ion-list {
      * The bottom of the first element should not have a border radius
      * because that would not look connected to the rest.
      */
-    @include globals.border-radius($list-ionic-border-radius-round, $list-ionic-border-radius-round, initial, initial);
+    @include globals.border-radius(globals.$ion-border-radius-400, globals.$ion-border-radius-400, initial, initial);
   }
 
   /* Soft */
@@ -72,7 +70,7 @@ ion-list {
      * The top of the list should not have a border radius because
      * that would include the header.
      */
-    @include globals.border-radius(initial, initial, $list-ionic-border-radius-soft, $list-ionic-border-radius-soft);
+    @include globals.border-radius(initial, initial, globals.$ion-border-radius-200, globals.$ion-border-radius-200);
   }
 
   // Target the first element in the list after the header
@@ -82,7 +80,7 @@ ion-list {
      * The bottom of the first element should not have a border radius
      * because that would not look connected to the rest.
      */
-    @include globals.border-radius($list-ionic-border-radius-soft, $list-ionic-border-radius-soft, initial, initial);
+    @include globals.border-radius(globals.$ion-border-radius-200, globals.$ion-border-radius-200, initial, initial);
   }
 
   /* Rectangular */
@@ -92,12 +90,7 @@ ion-list {
      * The top of the list should not have a border radius because
      * that would include the header.
      */
-    @include globals.border-radius(
-      initial,
-      initial,
-      $list-ionic-border-radius-rectangular,
-      $list-ionic-border-radius-rectangular
-    );
+    @include globals.border-radius(initial, initial, globals.$ion-border-radius-0, globals.$ion-border-radius-0);
   }
 
   // Target the first element in the list after the header
@@ -107,29 +100,24 @@ ion-list {
      * The bottom of the first element should not have a border radius
      * because that would not look connected to the rest.
      */
-    @include globals.border-radius(
-      $list-ionic-border-radius-rectangular,
-      $list-ionic-border-radius-rectangular,
-      initial,
-      initial
-    );
+    @include globals.border-radius(globals.$ion-border-radius-0, globals.$ion-border-radius-0, initial, initial);
   }
 }
 
 .list-ionic:not(:has(ion-list-header)) {
   /* Round */
   &.list-round {
-    @include globals.border-radius($list-ionic-border-radius-round);
+    @include globals.border-radius(globals.$ion-border-radius-400);
   }
 
   /* Soft */
   &.list-soft {
-    @include globals.border-radius($list-ionic-border-radius-soft);
+    @include globals.border-radius(globals.$ion-border-radius-200);
   }
 
   /* Rectangular */
   &.list-rectangular {
-    @include globals.border-radius($list-ionic-border-radius-rectangular);
+    @include globals.border-radius(globals.$ion-border-radius-0);
   }
 }
 
diff --git a/core/src/components/list/list.ionic.vars.scss b/core/src/components/list/list.ionic.vars.scss
deleted file mode 100644
index f1e1702e49..0000000000
--- a/core/src/components/list/list.ionic.vars.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// Ionic List
-// --------------------------------------------------
-
-/// @prop - Round border radius of the list
-$list-ionic-border-radius-round: globals.$ion-border-radius-400;
-
-/// @prop - Soft border radius of the list
-$list-ionic-border-radius-soft: globals.$ion-border-radius-200;
-
-/// @prop - Rectangular border radius of the list
-$list-ionic-border-radius-rectangular: globals.$ion-border-radius-0;
diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss
index 183fd168ed..7dc0f3d0e7 100644
--- a/core/src/components/tab-bar/tab-bar.ionic.scss
+++ b/core/src/components/tab-bar/tab-bar.ionic.scss
@@ -1,13 +1,13 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "./tab-bar.common";
-@import "./tab-bar.ionic.vars";
 
 :host {
-  --background: #{$tabbar-ionic-background};
-  --background-activated: #{$tabbar-ionic-background-activated};
-  --background-focused: #{$tabbar-ionic-background-focused};
-  --color: #{$tabbar-ionic-color};
-  --color-selected: #{$tabbar-ionic-color-selected};
+  --background: #{globals.$tabbar-ionic-background};
+  --background-activated: #{globals.$tabbar-ionic-background-activated};
+  --background-focused: #{globals.$tabbar-ionic-background-focused};
+  --border: #{globals.$ion-border-size-0} #{globals.$ion-border-style-solid} #{globals.$tabbar-ionic-border-color};
+  --color: #{globals.$tabbar-ionic-color};
+  --color-selected: #{globals.$tabbar-ionic-color-selected};
 
   /**
    * Tab bar has a box sizing of content-box to ensure the padding
diff --git a/core/src/components/tab-bar/tab-bar.ionic.vars.scss b/core/src/components/tab-bar/tab-bar.ionic.vars.scss
deleted file mode 100644
index 10101ba023..0000000000
--- a/core/src/components/tab-bar/tab-bar.ionic.vars.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@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, globals.$ion-primitives-base-white);
-
-/// @prop - Background color of the tab bar button when activated
-$tabbar-ionic-background-activated: var(--ion-tab-bar-background-activated, globals.$ion-primitives-neutral-100);
-
-/// @prop - Background color of the tab bar button when focused
-$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, globals.$ion-primitives-neutral-800);
-
-/// @prop - Color of the selected tab bar button
-$tabbar-ionic-color-selected: var(--ion-tab-bar-color-selected, globals.$ion-semantics-primary-base);
diff --git a/core/src/themes/ionic/ionic.theme.default.scss b/core/src/themes/ionic/ionic.theme.default.scss
index 7b64e792f6..cd702ae984 100644
--- a/core/src/themes/ionic/ionic.theme.default.scss
+++ b/core/src/themes/ionic/ionic.theme.default.scss
@@ -1,4 +1,5 @@
 @use "../functions.color" as color;
+@use "../../foundations/ionic.vars.scss" as globals;
 
 // Ionic Theme
 // -------------------------------------------------------------------------------------------
@@ -89,3 +90,13 @@ $ionic-colors: (
     tint: color.get-color-tint($dark),
   ),
 );
+
+// Ionic Tabs & Tab Bar
+// --------------------------------------------------
+
+$tabbar-ionic-background: var(--ion-tab-bar-background, globals.$ion-primitives-base-white);
+$tabbar-ionic-background-activated: var(--ion-tab-bar-background-activated, globals.$ion-primitives-neutral-100);
+$tabbar-ionic-background-focused: var(--ion-tab-bar-background-focused, transparent);
+$tabbar-ionic-color: var(--ion-tab-bar-color, globals.$ion-primitives-neutral-800);
+$tabbar-ionic-color-selected: var(--ion-tab-bar-color-selected, globals.$ion-semantics-primary-base);
+$tabbar-ionic-border-color: var(--ion-tab-bar-border-color, transparent);