fix: Fix Material BottomTabBar selection indicator and colors (#251)

src/library/Uno.Toolkit.Material/Styles/Controls/v2/BottomTabBar.xaml

@@ -47,27 +47,23 @@
 	<StaticResource x:Key="MaterialBottomTabBarItemIconForeground"
 	                ResourceKey="OnSurfaceVariantBrush" />
 	<StaticResource x:Key="MaterialBottomTabBarItemIconForegroundSelected"
-	                ResourceKey="OnSecondaryContainerBrush" />
+	                ResourceKey="OnSurfaceBrush" />
 
 
 	<StaticResource x:Key="MaterialBottomTabBarItemActiveIndicatorBackgroundSelected"
 	                ResourceKey="SecondaryContainerBrush" />
 
-	<SolidColorBrush x:Key="MaterialBottomTabBarBackgroundTint"
-	                 Opacity="0.08"
-	                 Color="{ThemeResource PrimaryColor}" />
-
 	<StaticResource x:Key="MaterialBottomFabTabBarItemDisabledBackground"
 	                ResourceKey="SystemControlTransparentBrush" />
 	<StaticResource x:Key="MaterialBottomFabTabBarItemDisabledForeground"
 	                ResourceKey="OnSurfaceDisabledBrush" />
-	<StaticResource x:Key="MaterialBottomFabTabBarItemPointerOverStateOverlay"
+	<StaticResource x:Key="MaterialBottomFabTabBarItemPointerOverBackground"
 	                ResourceKey="OnPrimaryContainerHoverBrush" />
-	<StaticResource x:Key="MaterialBottomFabTabBarItemFocusedStateOverlay"
+	<StaticResource x:Key="MaterialBottomFabTabBarItemFocusedBackground"
 	                ResourceKey="OnPrimaryContainerFocusedBrush" />
-	<StaticResource x:Key="MaterialBottomFabTabBarItemPressedStateOverlay"
+	<StaticResource x:Key="MaterialBottomFabTabBarItemPressedBackground"
 	                ResourceKey="OnPrimaryContainerPressedBrush" />
-	<StaticResource x:Key="MaterialBottomFabTabBarItemDisabledStateOverlay"
+	<StaticResource x:Key="MaterialBottomFabTabBarItemDisabledBackground"
 	                ResourceKey="OnSurfaceDisabledLowBrush" />
 
 	<x:Double x:Key="MaterialBottomTabBarFontSize">12</x:Double>
@@ -75,12 +71,12 @@
 	<x:Double x:Key="MaterialBottomTabBarHeight">80</x:Double>
 	<GridLength x:Key="MaterialBottomTabBarGridLengthHeight">80</GridLength>
 	<x:Double x:Key="FabItemVerticalOffset">-32</x:Double>
-	<x:Double x:Key="MaterialBottomTabBarItemIconHeight">16</x:Double>
-	<x:Double x:Key="MaterialBottomTabBarItemIconWidth">16</x:Double>
+	<x:Double x:Key="MaterialBottomTabBarItemIconHeight">20</x:Double>
+	<x:Double x:Key="MaterialBottomTabBarItemIconWidth">20</x:Double>
 	<Thickness x:Key="MaterialBottomTabBarItemContentMargin">0,0,0,6</Thickness>
 	<Thickness x:Key="MaterialBottomTabBarItemContentOnlyMargin">12,0</Thickness>
-	<CornerRadius x:Key="MaterialBottomTabBarItemActiveIndicatorCornerRadius">16</CornerRadius>
-	<Thickness x:Key="MaterialBottomTabBarItemActiveIndicatorPadding">26,10</Thickness>
+	<CornerRadius x:Key="MaterialBottomTabBarItemActiveIndicatorCornerRadius">12</CornerRadius>
+	<Thickness x:Key="MaterialBottomTabBarItemActiveIndicatorPadding">18,2</Thickness>
 	<!--  Code can be removed when this issue is fixed in Uno:  -->
 	<!--  https://github.com/unoplatform/uno/issues/7393  -->
 	<!--  AjustedMaterialBottomTabBarHeight = MaterialBottomTabBarHeight + Half size of the Fab TabBarItem (including ElevatedView margin)  -->
@@ -136,10 +132,6 @@
 						        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
 						        Background="{TemplateBinding Background}" />
 
-						<Border Grid.Row="1"
-						        Height="{StaticResource MaterialBottomTabBarHeight}"
-						        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-						        Background="{StaticResource MaterialBottomTabBarBackgroundTint}" />
 
 						<ItemsPresenter Grid.RowSpan="2"
 						                Height="{StaticResource AjustedMaterialBottomTabBarHeight}" />
@@ -149,9 +141,6 @@
 						        Padding="{TemplateBinding Padding}"
 						        Background="{TemplateBinding Background}" />
 
-						<Border Grid.Row="2"
-						        Padding="{TemplateBinding Padding}"
-						        Background="{StaticResource MaterialBottomTabBarBackgroundTint}" />
 					</Grid>
 				</ControlTemplate>
 			</Setter.Value>
@@ -171,7 +160,7 @@
 		<Setter Property="FontSize"
 		        Value="{StaticResource MaterialBottomTabBarFontSize}" />
 		<Setter Property="FontWeight"
-		        Value="Normal" />
+		        Value="Medium" />
 		<Setter Property="IsSelectable"
 		        Value="False" />
 		<Setter Property="UseSystemFocusVisuals"
@@ -244,7 +233,6 @@
 										                  FontSize="{TemplateBinding FontSize}" />
 									</StackPanel>
 
-									<Border x:Name="StateOverlay" />
 								</Grid>
 							</um:Ripple>
 						</toolkit:ElevatedView>
@@ -256,14 +244,14 @@
 
 								<VisualState x:Name="PointerOver">
 									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background"
-										        Value="{StaticResource MaterialBottomFabTabBarItemPointerOverStateOverlay}" />
+										<Setter Target="Root.Background"
+										        Value="{StaticResource MaterialBottomFabTabBarItemPointerOverBackground}" />
 									</VisualState.Setters>
 								</VisualState>
 								<VisualState x:Name="Pressed">
 									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background"
-										        Value="{StaticResource MaterialBottomFabTabBarItemPressedStateOverlay}" />
+										<Setter Target="Root.Background"
+										        Value="{StaticResource MaterialBottomFabTabBarItemPressedBackground}" />
 									</VisualState.Setters>
 								</VisualState>
 								<VisualState x:Name="Disabled">
@@ -274,8 +262,6 @@
 										        Value="{StaticResource MaterialBottomFabTabBarItemDisabledForeground}" />
 										<Setter Target="Root.Background"
 										        Value="{StaticResource MaterialBottomFabTabBarItemDisabledBackground}" />
-										<Setter Target="StateOverlay.Background"
-										        Value="{StaticResource MaterialBottomFabTabBarItemDisabledStateOverlay}" />
 									</VisualState.Setters>
 								</VisualState>
 							</VisualStateGroup>
@@ -284,8 +270,8 @@
 
 								<VisualState x:Name="Focused">
 									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background"
-										        Value="{StaticResource MaterialBottomFabTabBarItemFocusedStateOverlay}" />
+										<Setter Target="Root.Background"
+										        Value="{StaticResource MaterialBottomFabTabBarItemFocusedBackground}" />
 									</VisualState.Setters>
 								</VisualState>
 
@@ -338,7 +324,7 @@
 								<VisualState x:Name="Normal" />
 								<not_mobile:VisualState x:Name="PointerOver">
 									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background"
+										<Setter Target="LayoutRoot.Background"
 										        Value="{ThemeResource MaterialBottomTabBarItemBackgroundPointerOver}" />
 										<Setter Target="PointerRectangle.Fill"
 										        Value="{ThemeResource MaterialBottomTabBarItemBackgroundPointerOver}" />
@@ -350,7 +336,7 @@
 								</not_mobile:VisualState>
 								<VisualState x:Name="Pressed">
 									<VisualState.Setters>
-										<Setter Target="StateOverlay.Background"
+										<Setter Target="LayoutRoot.Background"
 										        Value="{ThemeResource MaterialBottomTabBarItemBackgroundPressed}" />
 										<Setter Target="PointerRectangle.Fill"
 										        Value="{ThemeResource MaterialBottomTabBarItemBackgroundPressed}" />
@@ -364,7 +350,7 @@
 									<VisualState.Setters>
 										<Setter Target="ActiveIndicator.Background"
 										        Value="{ThemeResource MaterialBottomTabBarItemActiveIndicatorBackgroundSelected}" />
-										<Setter Target="StateOverlay.Background"
+										<Setter Target="LayoutRoot.Background"
 										        Value="{ThemeResource MaterialBottomTabBarItemBackgroundSelected}" />
 										<Setter Target="PointerRectangle.Fill"
 										        Value="{ThemeResource MaterialBottomTabBarItemBackgroundSelected}" />
@@ -378,7 +364,7 @@
 									<VisualState.Setters>
 										<Setter Target="ActiveIndicator.Background"
 										        Value="{ThemeResource MaterialBottomTabBarItemActiveIndicatorBackgroundSelected}" />
-										<Setter Target="StateOverlay.Background"
+										<Setter Target="LayoutRoot.Background"
 										        Value="{ThemeResource MaterialBottomTabBarItemBackgroundSelectedPointerOver}" />
 										<Setter Target="PointerRectangle.Fill"
 										        Value="{ThemeResource MaterialBottomTabBarItemBackgroundSelectedPointerOver}" />
@@ -392,7 +378,7 @@
 									<VisualState.Setters>
 										<Setter Target="ActiveIndicator.Background"
 										        Value="{ThemeResource MaterialBottomTabBarItemActiveIndicatorBackgroundSelected}" />
-										<Setter Target="StateOverlay.Background"
+										<Setter Target="LayoutRoot.Background"
 										        Value="{ThemeResource MaterialBottomTabBarItemBackgroundSelectedPressed}" />
 										<Setter Target="PointerRectangle.Fill"
 										        Value="{ThemeResource MaterialBottomTabBarItemBackgroundSelectedPressed}" />
@@ -461,7 +447,8 @@
 										</Grid.RowDefinitions>
 
 										<Grid x:Name="ActiveIndicator"
-										      Padding="{StaticResource MaterialBottomTabBarItemActiveIndicatorPadding}"
+											  VerticalAlignment="Center"
+											  Padding="{StaticResource MaterialBottomTabBarItemActiveIndicatorPadding}"
 										      CornerRadius="{StaticResource MaterialBottomTabBarItemActiveIndicatorCornerRadius}">
 											<Viewbox x:Name="IconBox"
 											         Width="{StaticResource MaterialBottomTabBarItemIconWidth}"
@@ -471,8 +458,6 @@
 												                  Foreground="{StaticResource MaterialBottomTabBarItemIconForeground}" />
 											</Viewbox>
 										</Grid>
-										<Border x:Name="StateOverlay"
-										        CornerRadius="{StaticResource MaterialBottomTabBarItemActiveIndicatorCornerRadius}" />
 										<ContentPresenter x:Name="ContentPresenter"
 										                  Grid.Row="1"
 										                  Margin="{StaticResource MaterialBottomTabBarItemContentMargin}"