refactor(tabbar): Add lightweight styling to tab bar style

[nguyeenvy]

closes #594

GitHub Issue (If applicable): #594

PR Type

• Refactoring (no functional changes, no api changes)

Description

Current behaviour:

Overriden:

Overriden with:

<Page.Resources>
    <SolidColorBrush x:Key="TopTabBarItemBackground" Color="Red" />
    <SolidColorBrush x:Key="TopTabBarItemBackgroundPointerOver" Color="Orange" />
    <SolidColorBrush x:Key="TopTabBarItemBackgroundFocused" Color="Yellow" />
    <SolidColorBrush x:Key="TopTabBarItemBackgroundPressed" Color="Green" />
    <SolidColorBrush x:Key="TopTabBarItemBackgroundDisabled" Color="Blue" />
    <SolidColorBrush x:Key="TopTabBarItemBackgroundSelected" Color="Indigo" />
    <SolidColorBrush x:Key="TopTabBarItemBackgroundSelectedPointerOver" Color="Pink" />
    <SolidColorBrush x:Key="TopTabBarItemBackgroundSelectedPressed" Color="Red" />

    <SolidColorBrush x:Key="TopTabBarItemForeground" Color="Orange" />
    <SolidColorBrush x:Key="TopTabBarItemForegroundPointerOver" Color="Yellow" />
    <SolidColorBrush x:Key="TopTabBarItemForegroundFocused" Color="Green" />
    <SolidColorBrush x:Key="TopTabBarItemForegroundPressed" Color="Blue" />
    <SolidColorBrush x:Key="TopTabBarItemForegroundDisabled" Color="Indigo" />
    <SolidColorBrush x:Key="TopTabBarItemForegroundSelected" Color="Pink" />
    <SolidColorBrush x:Key="TopTabBarItemForegroundSelectedPointerOver" Color="Red" />
    <SolidColorBrush x:Key="TopTabBarItemForegroundSelectedPressed" Color="Orange" />

    <SolidColorBrush x:Key="TopTabBarItemBorderBrush" Color="Yellow" />

    <SolidColorBrush x:Key="TopTabBarItemIconForeground" Color="Green" />
    <SolidColorBrush x:Key="TopTabBarItemIconForegroundPointerOver" Color="Blue" />
    <SolidColorBrush x:Key="TopTabBarItemIconForegroundFocused" Color="Indigo" />
    <SolidColorBrush x:Key="TopTabBarItemIconForegroundPressed" Color="Pink" />
    <SolidColorBrush x:Key="TopTabBarItemIconForegroundDisabled" Color="Red" />
    <SolidColorBrush x:Key="TopTabBarItemIconForegroundSelected" Color="Orange" />
    <SolidColorBrush x:Key="TopTabBarItemIconForegroundSelectedPointerOver" Color="Yellow" />
    <SolidColorBrush x:Key="TopTabBarItemIconForegroundSelectedPressed" Color="Green" />

    <SolidColorBrush x:Key="TopTabBarItemPointerFillBrush" Color="Blue" />
    <SolidColorBrush x:Key="TopTabBarItemPointerFillBrushPointerOver" Color="Indigo" />
    <SolidColorBrush x:Key="TopTabBarItemPointerFillBrushFocused" Color="Pink" />
    <SolidColorBrush x:Key="TopTabBarItemPointerFillBrushPressed" Color="Red" />
    <SolidColorBrush x:Key="TopTabBarItemPointerFillBrushDisabled" Color="Orange" />
    <SolidColorBrush x:Key="TopTabBarItemPointerFillBrushSelected" Color="Yellow" />
    <SolidColorBrush x:Key="TopTabBarItemPointerFillBrushSelectedPointerOver" Color="Green" />
    <SolidColorBrush x:Key="TopTabBarItemPointerFillBrushSelectedPressed" Color="Blue" />

    <SolidColorBrush x:Key="TopTabBarItemRippleFeedback" Color="Indigo" />
</Page.Resources>

PR Checklist

• Tested code with current supported SDKs
• Docs have been added/updated
• Runtime Tests and/or UI Tests for the changes have been added (for bug fixes / features) (if applicable)
• Contains NO breaking changes
• Associated with an issue (GitHub or internal)
• Commits must be following the Conventional Commits specification.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-604.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-604.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-604.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-604.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-604.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-604.eastus2.azurestaticapps.net