feat(TabBar): add Ionic theme customization

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

@@ -1,4 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./tab-bar.ionic.vars" as vars;
 @use "./tab-bar.common";
 
 :host {
@@ -85,6 +86,21 @@
   bottom: calc(globals.$ion-space-400 + var(--ion-safe-area-bottom, 0));
 }
 
+// Tab Bar Translucent
+// --------------------------------------------------
+
+@supports (backdrop-filter: blur(0)) {
+  :host(.tab-bar-translucent) {
+    --background: #{vars.$tab-bar-ionic-translucent-background-color};
+
+    backdrop-filter: var(--backdrop-filter, #{vars.$tab-bar-ionic-translucent-filter});
+  }
+
+  :host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
+    --background: transparent;
+  }
+}
+
 // Tab Bar Shapes
 // --------------------------------------------------
 

core/src/components/tab-bar/tab-bar.ionic.vars.scss

@@ -0,0 +1,13 @@
+// Tab Bar Ionic
+// --------------------------------------------------
+/// @prop - Alpha of translucent tab bar background color
+$tab-bar-ionic-translucent-background-color-alpha: 0.6;
+
+/// @prop - Translucent tab bar background color
+$tab-bar-ionic-translucent-background-color: var(
+  --translucent-background,
+  rgba(255, 255, 255, $tab-bar-ionic-translucent-background-color-alpha)
+);
+
+/// @prop - Filter of the translucent tab bar background color
+$tab-bar-ionic-translucent-filter: blur(12px);