feat(tab-bar): add default styles (#29643)

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);

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

@@ -1,5 +1,5 @@
-@use "../../foundations/ionic.vars.scss" as tokens;
+@use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./tab-bar";
+@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;
+  padding-top: calc(globals.$ionic-space-100 + var(--ion-safe-area-top, 0));
-  gap: 12px;
+  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;
 }

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);

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

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";
 

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)};
+}