From cb97373643e44ac823e06c28fc167823a230cca7 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Mon, 26 Feb 2024 18:13:08 +0800
Subject: [PATCH] feat: more precise selector.

---
 demo/Ursa.Demo/Pages/BadgeDemo.axaml      | 72 +++++++++----------
 src/Ursa.Themes.Semi/Controls/Badge.axaml | 84 +++++++++++++++--------
 2 files changed, 91 insertions(+), 65 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/BadgeDemo.axaml b/demo/Ursa.Demo/Pages/BadgeDemo.axaml
index 4c97eb3..012ea37 100644
--- a/demo/Ursa.Demo/Pages/BadgeDemo.axaml
+++ b/demo/Ursa.Demo/Pages/BadgeDemo.axaml
@@ -109,96 +109,96 @@
             <StackPanel Orientation="Horizontal">
                 <u:Badge Header="URSA" Classes="Primary">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Solid"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Secondary">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Solid"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Tertiary">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Solid"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Success">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Solid"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Warning">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Solid"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Danger">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Solid"/>
                     </Border>
                 </u:Badge>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
                 <u:Badge Header="URSA" Classes="Light Primary">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Light"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Light Secondary">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Light"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Light Tertiary">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Light"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Light Success">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Light"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Light Warning">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Light"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Light Danger">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Light"/>
                     </Border>
                 </u:Badge>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
                 <u:Badge Header="URSA" Classes="Inverted Primary">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Inverted"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Inverted Secondary">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Inverted"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Inverted Tertiary">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Inverted"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Inverted Success">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Inverted"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Inverted Warning">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Inverted"/>
                     </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Inverted Danger">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Inverted"/>
                     </Border>
                 </u:Badge>
             </StackPanel>
@@ -208,7 +208,7 @@
                     Classes="Primary"
                     Dot="True">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Solid"/>
                     </Border>
                 </u:Badge>
                 <u:Badge
@@ -216,7 +216,7 @@
                     Classes="Secondary"
                     Dot="True">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Solid"/>
                     </Border>
                 </u:Badge>
                 <u:Badge
@@ -224,7 +224,7 @@
                     Classes="Tertiary"
                     Dot="True">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Solid"/>
                     </Border>
                 </u:Badge>
                 <u:Badge
@@ -232,7 +232,7 @@
                     Classes="Success"
                     Dot="True">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Solid"/>
                     </Border>
                 </u:Badge>
                 <u:Badge
@@ -240,7 +240,7 @@
                     Classes="Warning"
                     Dot="True">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Solid"/>
                     </Border>
                 </u:Badge>
                 <u:Badge
@@ -248,7 +248,7 @@
                     Classes="Danger"
                     Dot="True">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Solid"/>
                     </Border>
                 </u:Badge>
             </StackPanel>
@@ -258,7 +258,7 @@
                     Classes="Light Primary"
                     Dot="True">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Light"/>
                     </Border>
                 </u:Badge>
                 <u:Badge
@@ -266,7 +266,7 @@
                     Classes="Light Secondary"
                     Dot="True">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Light"/>
                     </Border>
                 </u:Badge>
                 <u:Badge
@@ -274,7 +274,7 @@
                     Classes="Light Tertiary"
                     Dot="True">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Light"/>
                     </Border>
                 </u:Badge>
                 <u:Badge
@@ -282,7 +282,7 @@
                     Classes="Light Success"
                     Dot="True">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Light"/>
                     </Border>
                 </u:Badge>
                 <u:Badge
@@ -290,7 +290,7 @@
                     Classes="Light Warning"
                     Dot="True">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Light"/>
                     </Border>
                 </u:Badge>
                 <u:Badge
@@ -298,7 +298,7 @@
                     Classes="Light Danger"
                     Dot="True">
                     <Border Width="100" Height="50">
-                        <TextBlock Text="■■■"/>
+                        <TextBlock Text="Light"/>
                     </Border>
                 </u:Badge>
             </StackPanel>
@@ -309,7 +309,7 @@
                         Classes="Inverted Primary"
                         Dot="True">
                         <Border Width="100" Height="50">
-                            <TextBlock Text="■■■"/>
+                            <TextBlock Text="Inverted"/>
                         </Border>
                     </u:Badge>
                     <u:Badge
@@ -317,7 +317,7 @@
                         Classes="Inverted Secondary"
                         Dot="True">
                         <Border Width="100" Height="50">
-                            <TextBlock Text="■■■"/>
+                            <TextBlock Text="Inverted"/>
                         </Border>
                     </u:Badge>
                     <u:Badge
@@ -325,7 +325,7 @@
                         Classes="Inverted Tertiary"
                         Dot="True">
                         <Border Width="100" Height="50">
-                            <TextBlock Text="■■■"/>
+                            <TextBlock Text="Inverted"/>
                         </Border>
                     </u:Badge>
                     <u:Badge
@@ -333,7 +333,7 @@
                         Classes="Inverted Success"
                         Dot="True">
                         <Border Width="100" Height="50">
-                            <TextBlock Text="■■■"/>
+                            <TextBlock Text="Inverted"/>
                         </Border>
                     </u:Badge>
                     <u:Badge
@@ -341,7 +341,7 @@
                         Classes="Inverted Warning"
                         Dot="True">
                         <Border Width="100" Height="50">
-                            <TextBlock Text="■■■"/>
+                            <TextBlock Text="Inverted"/>
                         </Border>
                     </u:Badge>
                     <u:Badge
@@ -349,7 +349,7 @@
                         Classes="Inverted Danger"
                         Dot="True">
                         <Border Width="100" Height="50">
-                            <TextBlock Text="■■■"/>
+                            <TextBlock Text="Inverted"/>
                         </Border>
                     </u:Badge>
                 </StackPanel>
diff --git a/src/Ursa.Themes.Semi/Controls/Badge.axaml b/src/Ursa.Themes.Semi/Controls/Badge.axaml
index fc34f88..099384f 100644
--- a/src/Ursa.Themes.Semi/Controls/Badge.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Badge.axaml
@@ -32,8 +32,8 @@
                         HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalAlignment}"
                         Content="{TemplateBinding Content}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}" 
-                        Foreground="{DynamicResource BadgeContentForeground}"/>
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        Foreground="{DynamicResource BadgeContentForeground}" />
                     <Border
                         Name="{x:Static u:Badge.PART_BadgeContainer}"
                         MinWidth="{DynamicResource BadgeMinWidth}"
@@ -82,8 +82,8 @@
                             HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalAlignment}"
                             Content="{TemplateBinding Content}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}" 
-                            Foreground="{DynamicResource BadgeContentForeground}"/>
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Foreground="{DynamicResource BadgeContentForeground}" />
                         <Border
                             Name="{x:Static u:Badge.PART_BadgeContainer}"
                             Width="{DynamicResource BadgeDotWidth}"
@@ -118,69 +118,95 @@
             <Setter Property="VerticalAlignment" Value="Bottom" />
         </Style>
 
-        <Style Selector="^.Primary">
+        <Style Selector="^.Primary /template/ Border#PART_BadgeContainer">
             <Setter Property="Background" Value="{DynamicResource BadgePrimaryBadgeBackground}" />
         </Style>
-        <Style Selector="^.Secondary">
+        <Style Selector="^.Secondary /template/ Border#PART_BadgeContainer">
             <Setter Property="Background" Value="{DynamicResource BadgeSecondaryBadgeBackground}" />
         </Style>
-        <Style Selector="^.Tertiary">
+        <Style Selector="^.Tertiary /template/ Border#PART_BadgeContainer">
             <Setter Property="Background" Value="{DynamicResource BadgeTertiaryBadgeBackground}" />
         </Style>
-        <Style Selector="^.Success">
+        <Style Selector="^.Success /template/ Border#PART_BadgeContainer">
             <Setter Property="Background" Value="{DynamicResource BadgeSuccessBadgeBackground}" />
         </Style>
-        <Style Selector="^.Warning">
+        <Style Selector="^.Warning /template/ Border#PART_BadgeContainer">
             <Setter Property="Background" Value="{DynamicResource BadgeWarningBadgeBackground}" />
         </Style>
-        <Style Selector="^.Danger">
+        <Style Selector="^.Danger /template/ Border#PART_BadgeContainer">
             <Setter Property="Background" Value="{DynamicResource BadgeDangerBadgeBackground}" />
         </Style>
 
         <Style Selector="^.Light">
             <Style Selector="^.Primary">
-                <Setter Property="Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" />
-                <Setter Property="Background" Value="{DynamicResource BadgeLightPrimaryBadgeBackground}" />
+                <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" />
+                </Style>
+                <Style Selector="^/template/ Border#PART_BadgeContainer">
+                    <Setter Property="Background" Value="{DynamicResource BadgeLightPrimaryBadgeBackground}" />
+                </Style>
             </Style>
             <Style Selector="^.Secondary">
-                <Setter Property="Foreground" Value="{DynamicResource BadgeLightSecondaryBadgeForeground}" />
-                <Setter Property="Background" Value="{DynamicResource BadgeLightSecondaryBadgeBackground}" />
+                <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource BadgeLightSecondaryBadgeForeground}" />
+                </Style>
+                <Style Selector="^/template/ Border#PART_BadgeContainer">
+                    <Setter Property="Background" Value="{DynamicResource BadgeLightSecondaryBadgeBackground}" />
+                </Style>
             </Style>
             <Style Selector="^.Tertiary">
-                <Setter Property="Foreground" Value="{DynamicResource BadgeLightTertiaryBadgeForeground}" />
-                <Setter Property="Background" Value="{DynamicResource BadgeLightTertiaryBadgeBackground}" />
+                <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource BadgeLightTertiaryBadgeForeground}" />
+                </Style>
+                <Style Selector="^/template/ Border#PART_BadgeContainer">
+                    <Setter Property="Background" Value="{DynamicResource BadgeLightTertiaryBadgeBackground}" />
+                </Style>
             </Style>
             <Style Selector="^.Success">
-                <Setter Property="Foreground" Value="{DynamicResource BadgeLightSuccessBadgeForeground}" />
-                <Setter Property="Background" Value="{DynamicResource BadgeLightSuccessBadgeBackground}" />
+                <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource BadgeLightSuccessBadgeForeground}" />
+                </Style>
+                <Style Selector="^/template/ Border#PART_BadgeContainer">
+                    <Setter Property="Background" Value="{DynamicResource BadgeLightSuccessBadgeBackground}" />
+                </Style>
             </Style>
             <Style Selector="^.Warning">
-                <Setter Property="Foreground" Value="{DynamicResource BadgeLightWarningBadgeForeground}" />
-                <Setter Property="Background" Value="{DynamicResource BadgeLightWarningBadgeBackground}" />
+                <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource BadgeLightWarningBadgeForeground}" />
+                </Style>
+                <Style Selector="^/template/ Border#PART_BadgeContainer">
+                    <Setter Property="Background" Value="{DynamicResource BadgeLightWarningBadgeBackground}" />
+                </Style>
             </Style>
             <Style Selector="^.Danger">
-                <Setter Property="Foreground" Value="{DynamicResource BadgeLightDangerBadgeForeground}" />
-                <Setter Property="Background" Value="{DynamicResource BadgeLightDangerBadgeBackground}" />
+                <Style Selector="^/template/ ContentPresenter#PART_HeaderPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource BadgeLightDangerBadgeForeground}" />
+                </Style>
+                <Style Selector="^/template/ Border#PART_BadgeContainer">
+                    <Setter Property="Background" Value="{DynamicResource BadgeLightDangerBadgeBackground}" />
+                </Style>
             </Style>
         </Style>
         <Style Selector="^.Inverted">
-            <Setter Property="Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" />
-            <Style Selector="^.Primary">
+            <Style Selector="^/template/ Border#PART_BadgeContainer">
+                <Setter Property="Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" />
+            </Style>
+            <Style Selector="^.Primary /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" />
             </Style>
-            <Style Selector="^.Secondary">
+            <Style Selector="^.Secondary /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedSecondaryBadgeForeground}" />
             </Style>
-            <Style Selector="^.Tertiary">
+            <Style Selector="^.Tertiary /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedTertiaryBadgeForeground}" />
             </Style>
-            <Style Selector="^.Success">
+            <Style Selector="^.Success /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedSuccessBadgeForeground}" />
             </Style>
-            <Style Selector="^.Warning">
+            <Style Selector="^.Warning /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedWarningBadgeForeground}" />
             </Style>
-            <Style Selector="^.Danger">
+            <Style Selector="^.Danger /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedDangerBadgeForeground}" />
             </Style>
         </Style>