refactor(chip): Add lightweight styling to Chip style and add Fluent theme for Chip and ChipGroup

[nguyeenvy]

closes #561
closes #597

GitHub Issue (If applicable): #561 #597

PR Type

What kind of change does this PR introduce?

• Bugfix
• Refactoring (no functional changes, no api changes)

Description

Current behavior:

Overridden behavior:

Overridden with:

<Page.Resources>
    <x:Double x:Key="ChipCheckGlyphSize">38</x:Double>
    <x:Double x:Key="ChipContentMinHeight">40</x:Double>

    <x:Double x:Key="ChipElevation">14</x:Double>
    <x:Double x:Key="ChipHeight">38</x:Double>
    <x:Double x:Key="ChipIconSize">38</x:Double>
    <x:Double x:Key="ChipSize">40</x:Double>

    <CornerRadius x:Key="ChipCornerRadius">0</CornerRadius>
    <Thickness x:Key="ChipBorderThickness">5</Thickness>
    <Thickness x:Key="ChipContentMargin">16,4</Thickness>
    <Thickness x:Key="ChipPadding">16,4</Thickness>

    <!--  Brushes  -->
    <SolidColorBrush x:Key="ChipBackground" Color="Red" />
    <SolidColorBrush x:Key="ChipBackgroundPointerOver" Color="Orange" />
    <SolidColorBrush x:Key="ChipBackgroundPressed" Color="Yellow" />
    <SolidColorBrush x:Key="ChipBackgroundDisabled" Color="Green" />
    <SolidColorBrush x:Key="ChipBackgroundChecked" Color="Blue" />
    <SolidColorBrush x:Key="ChipBackgroundCheckedPointerOver" Color="Indigo" />
    <SolidColorBrush x:Key="ChipBackgroundCheckedPressed" Color="Pink" />

    <SolidColorBrush x:Key="ChipForeground" Color="Red" />
    <SolidColorBrush x:Key="ChipForegroundPointerOver" Color="Orange" />
    <SolidColorBrush x:Key="ChipForegroundPressed" Color="Yellow" />
    <SolidColorBrush x:Key="ChipForegroundDisabled" Color="Green" />
    <SolidColorBrush x:Key="ChipForegroundChecked" Color="Blue" />
    <SolidColorBrush x:Key="ChipForegroundCheckedPointerOver" Color="Indigo" />
    <SolidColorBrush x:Key="ChipForegroundCheckedPressed" Color="Pink" />

    <SolidColorBrush x:Key="ChipDeleteIconBackground" Color="Red" />
    <SolidColorBrush x:Key="ChipDeleteIconForeground" Color="Orange" />

    <SolidColorBrush x:Key="ChipIconForeground" Color="Yellow" />
    <SolidColorBrush x:Key="ChipIconForegroundPointerOver" Color="Green" />
    <SolidColorBrush x:Key="ChipIconForegroundPressed" Color="Blue" />
    <SolidColorBrush x:Key="ChipIconForegroundDisabled" Color="Indigo" />
    <SolidColorBrush x:Key="ChipIconForegroundChecked" Color="Pink" />
    <SolidColorBrush x:Key="ChipIconForegroundCheckedPointerOver" Color="Red" />
    <SolidColorBrush x:Key="ChipIconForegroundCheckedPressed" Color="Orange" />


    <SolidColorBrush x:Key="ChipBorderBrush" Color="Yellow" />
    <SolidColorBrush x:Key="ChipBorderBrushPointerOver" Color="Green" />
    <SolidColorBrush x:Key="ChipBorderBrushPressed" Color="Blue" />
    <SolidColorBrush x:Key="ChipBorderBrushDisabled" Color="Indigo" />
    <SolidColorBrush x:Key="ChipBorderBrushChecked" Color="Pink" />
    <SolidColorBrush x:Key="ChipBorderBrushCheckedPointerOver" Color="Red" />
    <SolidColorBrush x:Key="ChipBorderBrushCheckedPressed" Color="Orange" />

    <SolidColorBrush x:Key="ChipStateOverlay" Color="Yellow" />
    <SolidColorBrush x:Key="ChipStateOverlayPointerOver" Color="Green" />
    <SolidColorBrush x:Key="ChipStateOverlayPressed" Color="Blue" />
    <SolidColorBrush x:Key="ChipStateOverlayDisabled" Color="Indigo" />
    <SolidColorBrush x:Key="ChipStateOverlayChecked" Color="Pink" />
    <SolidColorBrush x:Key="ChipStateOverlayCheckedPointerOver" Color="Red" />
    <SolidColorBrush x:Key="ChipStateOverlayCheckedPressed" Color="Orange" />
</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.

Other information

A Chip.xaml and a ChipGroup.xaml have been added to the style of Fluent in the Uno.Toolkit.UI project. However, the designs of the Fluent styles for Chip and ChipGround aren't available yet, so the content inside Chip.xaml and ChipGroup.xaml is just the base for future Fluent designs.

[welcome]

Congrats on your first pull-request! We ❤ the people who are involved in this project, and we'd love to pay it forward by sending you some swag. If you have any feedback (or ideas on how to improve the Uno Toolkit as an open-source project) please open a feedback issue.

Merci beaucoup 👋