From 38b4990e53b87716955a2e8d001e2477a347a4f7 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Mon, 26 Feb 2024 16:05:11 +0800
Subject: [PATCH 1/3] misc: success order.

---
 demo/Ursa.Demo/Pages/BadgeDemo.axaml         | 42 ++++++++++----------
 src/Ursa.Themes.Semi/Controls/Badge.axaml    | 20 +++++-----
 src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml |  8 ++--
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/BadgeDemo.axaml b/demo/Ursa.Demo/Pages/BadgeDemo.axaml
index 5d2f3d0b..88254c05 100644
--- a/demo/Ursa.Demo/Pages/BadgeDemo.axaml
+++ b/demo/Ursa.Demo/Pages/BadgeDemo.axaml
@@ -5,7 +5,7 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:u="https://irihi.tech/ursa"
-    d:DesignHeight="450"
+    d:DesignHeight="1000"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer HorizontalScrollBarVisibility="Auto">
@@ -19,7 +19,7 @@
                     <Setter Property="Margin" Value="14" />
                 </Style>
                 <Style Selector="u|Badge > Border">
-                    <Setter Property="Background" Value="Orange" />
+                    <Setter Property="Background" Value="{DynamicResource SemiOrange3}" />
                     <Setter Property="CornerRadius" Value="8" />
                 </Style>
             </StackPanel.Styles>
@@ -90,13 +90,13 @@
                 <u:Badge Header="URSA" Classes="Tertiary">
                     <Border Width="100" Height="50" />
                 </u:Badge>
-                <u:Badge Header="URSA" Classes="Warning">
+                <u:Badge Header="URSA" Classes="Success">
                     <Border Width="100" Height="50" />
                 </u:Badge>
-                <u:Badge Header="URSA" Classes="Danger">
+                <u:Badge Header="URSA" Classes="Warning">
                     <Border Width="100" Height="50" />
                 </u:Badge>
-                <u:Badge Header="URSA" Classes="Success">
+                <u:Badge Header="URSA" Classes="Danger">
                     <Border Width="100" Height="50" />
                 </u:Badge>
             </StackPanel>
@@ -110,13 +110,13 @@
                 <u:Badge Header="URSA" Classes="Light Tertiary">
                     <Border Width="100" Height="50" />
                 </u:Badge>
-                <u:Badge Header="URSA" Classes="Light Warning">
+                <u:Badge Header="URSA" Classes="Light Success">
                     <Border Width="100" Height="50" />
                 </u:Badge>
-                <u:Badge Header="URSA" Classes="Light Danger">
+                <u:Badge Header="URSA" Classes="Light Warning">
                     <Border Width="100" Height="50" />
                 </u:Badge>
-                <u:Badge Header="URSA" Classes="Light Success">
+                <u:Badge Header="URSA" Classes="Light Danger">
                     <Border Width="100" Height="50" />
                 </u:Badge>
             </StackPanel>
@@ -130,13 +130,13 @@
                 <u:Badge Header="URSA" Classes="Inverted Tertiary">
                     <Border Width="100" Height="50" />
                 </u:Badge>
-                <u:Badge Header="URSA" Classes="Inverted Warning">
+                <u:Badge Header="URSA" Classes="Inverted Success">
                     <Border Width="100" Height="50" />
                 </u:Badge>
-                <u:Badge Header="URSA" Classes="Inverted Danger">
+                <u:Badge Header="URSA" Classes="Inverted Warning">
                     <Border Width="100" Height="50" />
                 </u:Badge>
-                <u:Badge Header="URSA" Classes="Inverted Success">
+                <u:Badge Header="URSA" Classes="Inverted Danger">
                     <Border Width="100" Height="50" />
                 </u:Badge>
             </StackPanel>
@@ -161,19 +161,19 @@
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
-                    Classes="Warning"
+                    Classes="Success"
                     Dot="True">
                     <Border Width="100" Height="50" />
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
-                    Classes="Danger"
+                    Classes="Warning"
                     Dot="True">
                     <Border Width="100" Height="50" />
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
-                    Classes="Success"
+                    Classes="Danger"
                     Dot="True">
                     <Border Width="100" Height="50" />
                 </u:Badge>
@@ -199,24 +199,24 @@
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
-                    Classes="Light Warning"
+                    Classes="Light Success"
                     Dot="True">
                     <Border Width="100" Height="50" />
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
-                    Classes="Light Danger"
+                    Classes="Light Warning"
                     Dot="True">
                     <Border Width="100" Height="50" />
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
-                    Classes="Light Success"
+                    Classes="Light Danger"
                     Dot="True">
                     <Border Width="100" Height="50" />
                 </u:Badge>
             </StackPanel>
-            <Border Background="LightGray" CornerRadius="4">
+            <Border Background="{DynamicResource SemiGrey2}" CornerRadius="4">
                 <StackPanel Orientation="Horizontal">
                     <u:Badge
                         Header="URSA"
@@ -226,19 +226,19 @@
                     </u:Badge>
                     <u:Badge
                         Header="URSA"
-                        Classes="Inverted Primary"
+                        Classes="Inverted Secondary"
                         Dot="True">
                         <Border Width="100" Height="50" />
                     </u:Badge>
                     <u:Badge
                         Header="URSA"
-                        Classes="Inverted Secondary"
+                        Classes="Inverted Tertiary"
                         Dot="True">
                         <Border Width="100" Height="50" />
                     </u:Badge>
                     <u:Badge
                         Header="URSA"
-                        Classes="Inverted Tertiary"
+                        Classes="Inverted Success"
                         Dot="True">
                         <Border Width="100" Height="50" />
                     </u:Badge>
diff --git a/src/Ursa.Themes.Semi/Controls/Badge.axaml b/src/Ursa.Themes.Semi/Controls/Badge.axaml
index 4402f054..2be2ba7e 100644
--- a/src/Ursa.Themes.Semi/Controls/Badge.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Badge.axaml
@@ -125,15 +125,15 @@
         <Style Selector="^.Tertiary">
             <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeTertiaryBadgeBackground}" />
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeSuccessBadgeBackground}" />
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeWarningBadgeBackground}" />
         </Style>
         <Style Selector="^.Danger">
             <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeDangerBadgeBackground}" />
         </Style>
-        <Style Selector="^.Success">
-            <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeSuccessBadgeBackground}" />
-        </Style>
 
         <Style Selector="^.Light">
             <Style Selector="^.Primary">
@@ -148,6 +148,10 @@
                 <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightTertiaryBadgeForeground}" />
                 <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightTertiaryBadgeBackground}" />
             </Style>
+            <Style Selector="^.Success">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightSuccessBadgeForeground}" />
+                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightSuccessBadgeBackground}" />
+            </Style>
             <Style Selector="^.Warning">
                 <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightWarningBadgeForeground}" />
                 <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightWarningBadgeBackground}" />
@@ -156,10 +160,6 @@
                 <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightDangerBadgeForeground}" />
                 <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightDangerBadgeBackground}" />
             </Style>
-            <Style Selector="^.Success">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightSuccessBadgeForeground}" />
-                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightSuccessBadgeBackground}" />
-            </Style>
         </Style>
         <Style Selector="^.Inverted">
             <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" />
@@ -172,15 +172,15 @@
             <Style Selector="^.Tertiary">
                 <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedTertiaryBadgeForeground}" />
             </Style>
+            <Style Selector="^.Success">
+                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedSuccessBadgeForeground}" />
+            </Style>
             <Style Selector="^.Warning">
                 <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedWarningBadgeForeground}" />
             </Style>
             <Style Selector="^.Danger">
                 <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedDangerBadgeForeground}" />
             </Style>
-            <Style Selector="^.Success">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedSuccessBadgeForeground}" />
-            </Style>
         </Style>
     </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml b/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
index 6d973585..93181ae1 100644
--- a/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
@@ -5,9 +5,9 @@
     <SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#FF54A9FF" />
     <SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#FF40B4F3" />
     <SolidColorBrush x:Key="BadgeTertiaryBadgeBackground" Color="#FF888D92" />
+    <SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#FF5DC264" />
     <SolidColorBrush x:Key="BadgeWarningBadgeBackground" Color="#FFFFAE43" />
     <SolidColorBrush x:Key="BadgeDangerBadgeBackground" Color="#FFFC725A" />
-    <SolidColorBrush x:Key="BadgeSuccessBadgeBackground" Color="#FF5DC264" />
     <!-- Light -->
     <SolidColorBrush x:Key="BadgeLightPrimaryBadgeForeground" Color="#FF54A9FF" />
     <SolidColorBrush x:Key="BadgeLightPrimaryBadgeBackground" Color="#FF003D8F" />
@@ -15,19 +15,19 @@
     <SolidColorBrush x:Key="BadgeLightSecondaryBadgeBackground" Color="#FF004B83" />
     <SolidColorBrush x:Key="BadgeLightTertiaryBadgeForeground" Color="#FF888D92" />
     <SolidColorBrush x:Key="BadgeLightTertiaryBadgeBackground" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="BadgeLightSuccessBadgeForeground" Color="#FF5DC264" />
+    <SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#FF1B5924" />
     <SolidColorBrush x:Key="BadgeLightWarningBadgeForeground" Color="#FFFFAE43" />
     <SolidColorBrush x:Key="BadgeLightWarningBadgeBackground" Color="#FF7E3100" />
     <SolidColorBrush x:Key="BadgeLightDangerBadgeForeground" Color="#FFFC725A" />
     <SolidColorBrush x:Key="BadgeLightDangerBadgeBackground" Color="#FF8E0805" />
-    <SolidColorBrush x:Key="BadgeLightSuccessBadgeForeground" Color="#FF5DC264" />
-    <SolidColorBrush x:Key="BadgeLightSuccessBadgeBackground" Color="#FF1B5924" />
     <!-- Inverted -->
     <SolidColorBrush x:Key="BadgeInvertedBadgeBackground" Color="#1C1F23" />
 
     <SolidColorBrush x:Key="BadgeInvertedPrimaryBadgeForeground" Color="#FF54A9FF" />
     <SolidColorBrush x:Key="BadgeInvertedSecondaryBadgeForeground" Color="#FF40B4F3" />
     <SolidColorBrush x:Key="BadgeInvertedTertiaryBadgeForeground" Color="#FF888D92" />
+    <SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#FF5DC264" />
     <SolidColorBrush x:Key="BadgeInvertedWarningBadgeForeground" Color="#FFFFAE43" />
     <SolidColorBrush x:Key="BadgeInvertedDangerBadgeForeground" Color="#FFFC725A" />
-    <SolidColorBrush x:Key="BadgeInvertedSuccessBadgeForeground" Color="#FF5DC264" />
 </ResourceDictionary>
\ No newline at end of file

From 8f4c727d5ec232a756cff1e3b86f7675f67ab83c Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Mon, 26 Feb 2024 17:52:45 +0800
Subject: [PATCH 2/3] fix: BadgeContentForeground.

---
 demo/Ursa.Demo/Pages/BadgeDemo.axaml          | 204 +++++++++++++-----
 src/Ursa.Themes.Semi/Controls/Badge.axaml     |  72 ++++---
 src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml  |   1 +
 src/Ursa.Themes.Semi/Themes/Light/Badge.axaml |   1 +
 4 files changed, 190 insertions(+), 88 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/BadgeDemo.axaml b/demo/Ursa.Demo/Pages/BadgeDemo.axaml
index 88254c05..4c97eb32 100644
--- a/demo/Ursa.Demo/Pages/BadgeDemo.axaml
+++ b/demo/Ursa.Demo/Pages/BadgeDemo.axaml
@@ -5,8 +5,8 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:u="https://irihi.tech/ursa"
-    d:DesignHeight="1000"
-    d:DesignWidth="800"
+    d:DesignHeight="850"
+    d:DesignWidth="850"
     mc:Ignorable="d">
     <ScrollViewer HorizontalScrollBarVisibility="Auto">
         <StackPanel
@@ -17,10 +17,14 @@
             <StackPanel.Styles>
                 <Style Selector="u|Badge">
                     <Setter Property="Margin" Value="14" />
-                </Style>
-                <Style Selector="u|Badge > Border">
-                    <Setter Property="Background" Value="{DynamicResource SemiOrange3}" />
-                    <Setter Property="CornerRadius" Value="8" />
+                    <Style Selector="^ Border">
+                        <Setter Property="Background" Value="{DynamicResource SemiOrange3}" />
+                        <Setter Property="CornerRadius" Value="8" />
+                        <Style Selector="^ TextBlock">
+                            <Setter Property="HorizontalAlignment" Value="Center" />
+                            <Setter Property="VerticalAlignment" Value="Center" />
+                        </Style>
+                    </Style>
                 </Style>
             </StackPanel.Styles>
 
@@ -29,26 +33,38 @@
                     HorizontalAlignment="Center"
                     Header="500"
                     OverflowCount="100">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="SUCCEED!">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="Hello" />
                 <u:Badge Header="Hello" Dot="True" />
             </StackPanel>
             <StackPanel Orientation="Horizontal">
                 <u:Badge Header="5" CornerPosition="TopLeft">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="5" CornerPosition="TopRight">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="5" CornerPosition="BottomLeft">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="5" CornerPosition="BottomRight">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
@@ -56,88 +72,134 @@
                     Header="VIP"
                     CornerPosition="TopLeft"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="VIP"
                     CornerPosition="TopRight"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="VIP"
                     CornerPosition="BottomLeft"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="VIP"
                     CornerPosition="BottomRight"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
             </StackPanel>
             <u:Badge HorizontalAlignment="Stretch" Header="VIP">
-                <Border Height="50" />
+                <Border Height="50">
+                    <TextBlock Text="■■■"/>
+                </Border>
             </u:Badge>
             <StackPanel Orientation="Horizontal">
                 <u:Badge Header="URSA" Classes="Primary">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Secondary">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Tertiary">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Success">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Warning">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Danger">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
                 <u:Badge Header="URSA" Classes="Light Primary">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Light Secondary">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Light Tertiary">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Light Success">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Light Warning">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Light Danger">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
                 <u:Badge Header="URSA" Classes="Inverted Primary">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Inverted Secondary">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Inverted Tertiary">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Inverted Success">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Inverted Warning">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge Header="URSA" Classes="Inverted Danger">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
@@ -145,37 +207,49 @@
                     Header="URSA"
                     Classes="Primary"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
                     Classes="Secondary"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
                     Classes="Tertiary"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
                     Classes="Success"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
                     Classes="Warning"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
                     Classes="Danger"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
@@ -183,37 +257,49 @@
                     Header="URSA"
                     Classes="Light Primary"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
                     Classes="Light Secondary"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
                     Classes="Light Tertiary"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
                     Classes="Light Success"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
                     Classes="Light Warning"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
                 <u:Badge
                     Header="URSA"
                     Classes="Light Danger"
                     Dot="True">
-                    <Border Width="100" Height="50" />
+                    <Border Width="100" Height="50">
+                        <TextBlock Text="■■■"/>
+                    </Border>
                 </u:Badge>
             </StackPanel>
             <Border Background="{DynamicResource SemiGrey2}" CornerRadius="4">
@@ -222,37 +308,49 @@
                         Header="URSA"
                         Classes="Inverted Primary"
                         Dot="True">
-                        <Border Width="100" Height="50" />
+                        <Border Width="100" Height="50">
+                            <TextBlock Text="■■■"/>
+                        </Border>
                     </u:Badge>
                     <u:Badge
                         Header="URSA"
                         Classes="Inverted Secondary"
                         Dot="True">
-                        <Border Width="100" Height="50" />
+                        <Border Width="100" Height="50">
+                            <TextBlock Text="■■■"/>
+                        </Border>
                     </u:Badge>
                     <u:Badge
                         Header="URSA"
                         Classes="Inverted Tertiary"
                         Dot="True">
-                        <Border Width="100" Height="50" />
+                        <Border Width="100" Height="50">
+                            <TextBlock Text="■■■"/>
+                        </Border>
                     </u:Badge>
                     <u:Badge
                         Header="URSA"
                         Classes="Inverted Success"
                         Dot="True">
-                        <Border Width="100" Height="50" />
+                        <Border Width="100" Height="50">
+                            <TextBlock Text="■■■"/>
+                        </Border>
                     </u:Badge>
                     <u:Badge
                         Header="URSA"
                         Classes="Inverted Warning"
                         Dot="True">
-                        <Border Width="100" Height="50" />
+                        <Border Width="100" Height="50">
+                            <TextBlock Text="■■■"/>
+                        </Border>
                     </u:Badge>
                     <u:Badge
                         Header="URSA"
                         Classes="Inverted Danger"
                         Dot="True">
-                        <Border Width="100" Height="50" />
+                        <Border Width="100" Height="50">
+                            <TextBlock Text="■■■"/>
+                        </Border>
                     </u:Badge>
                 </StackPanel>
             </Border>
diff --git a/src/Ursa.Themes.Semi/Controls/Badge.axaml b/src/Ursa.Themes.Semi/Controls/Badge.axaml
index 2be2ba7e..fc34f889 100644
--- a/src/Ursa.Themes.Semi/Controls/Badge.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Badge.axaml
@@ -32,7 +32,8 @@
                         HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalAlignment}"
                         Content="{TemplateBinding Content}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}" />
+                        ContentTemplate="{TemplateBinding ContentTemplate}" 
+                        Foreground="{DynamicResource BadgeContentForeground}"/>
                     <Border
                         Name="{x:Static u:Badge.PART_BadgeContainer}"
                         MinWidth="{DynamicResource BadgeMinWidth}"
@@ -81,7 +82,8 @@
                             HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalAlignment}"
                             Content="{TemplateBinding Content}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            ContentTemplate="{TemplateBinding ContentTemplate}" 
+                            Foreground="{DynamicResource BadgeContentForeground}"/>
                         <Border
                             Name="{x:Static u:Badge.PART_BadgeContainer}"
                             Width="{DynamicResource BadgeDotWidth}"
@@ -100,86 +102,86 @@
         </Style>
 
         <Style Selector="^[CornerPosition=TopLeft] /template/ Border#PART_BadgeContainer">
-            <Setter Property="u:Badge.HorizontalAlignment" Value="Left" />
-            <Setter Property="u:Badge.VerticalAlignment" Value="Top" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+            <Setter Property="VerticalAlignment" Value="Top" />
         </Style>
         <Style Selector="^[CornerPosition=TopRight] /template/ Border#PART_BadgeContainer">
-            <Setter Property="u:Badge.HorizontalAlignment" Value="Right" />
-            <Setter Property="u:Badge.VerticalAlignment" Value="Top" />
+            <Setter Property="HorizontalAlignment" Value="Right" />
+            <Setter Property="VerticalAlignment" Value="Top" />
         </Style>
         <Style Selector="^[CornerPosition=BottomLeft] /template/ Border#PART_BadgeContainer">
-            <Setter Property="u:Badge.HorizontalAlignment" Value="Left" />
-            <Setter Property="u:Badge.VerticalAlignment" Value="Bottom" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+            <Setter Property="VerticalAlignment" Value="Bottom" />
         </Style>
         <Style Selector="^[CornerPosition=BottomRight] /template/ Border#PART_BadgeContainer">
-            <Setter Property="u:Badge.HorizontalAlignment" Value="Right" />
-            <Setter Property="u:Badge.VerticalAlignment" Value="Bottom" />
+            <Setter Property="HorizontalAlignment" Value="Right" />
+            <Setter Property="VerticalAlignment" Value="Bottom" />
         </Style>
 
         <Style Selector="^.Primary">
-            <Setter Property="u:Badge.Background" Value="{DynamicResource BadgePrimaryBadgeBackground}" />
+            <Setter Property="Background" Value="{DynamicResource BadgePrimaryBadgeBackground}" />
         </Style>
         <Style Selector="^.Secondary">
-            <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeSecondaryBadgeBackground}" />
+            <Setter Property="Background" Value="{DynamicResource BadgeSecondaryBadgeBackground}" />
         </Style>
         <Style Selector="^.Tertiary">
-            <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeTertiaryBadgeBackground}" />
+            <Setter Property="Background" Value="{DynamicResource BadgeTertiaryBadgeBackground}" />
         </Style>
         <Style Selector="^.Success">
-            <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeSuccessBadgeBackground}" />
+            <Setter Property="Background" Value="{DynamicResource BadgeSuccessBadgeBackground}" />
         </Style>
         <Style Selector="^.Warning">
-            <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeWarningBadgeBackground}" />
+            <Setter Property="Background" Value="{DynamicResource BadgeWarningBadgeBackground}" />
         </Style>
         <Style Selector="^.Danger">
-            <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeDangerBadgeBackground}" />
+            <Setter Property="Background" Value="{DynamicResource BadgeDangerBadgeBackground}" />
         </Style>
 
         <Style Selector="^.Light">
             <Style Selector="^.Primary">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" />
-                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightPrimaryBadgeBackground}" />
+                <Setter Property="Foreground" Value="{DynamicResource BadgeLightPrimaryBadgeForeground}" />
+                <Setter Property="Background" Value="{DynamicResource BadgeLightPrimaryBadgeBackground}" />
             </Style>
             <Style Selector="^.Secondary">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightSecondaryBadgeForeground}" />
-                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightSecondaryBadgeBackground}" />
+                <Setter Property="Foreground" Value="{DynamicResource BadgeLightSecondaryBadgeForeground}" />
+                <Setter Property="Background" Value="{DynamicResource BadgeLightSecondaryBadgeBackground}" />
             </Style>
             <Style Selector="^.Tertiary">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightTertiaryBadgeForeground}" />
-                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightTertiaryBadgeBackground}" />
+                <Setter Property="Foreground" Value="{DynamicResource BadgeLightTertiaryBadgeForeground}" />
+                <Setter Property="Background" Value="{DynamicResource BadgeLightTertiaryBadgeBackground}" />
             </Style>
             <Style Selector="^.Success">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightSuccessBadgeForeground}" />
-                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightSuccessBadgeBackground}" />
+                <Setter Property="Foreground" Value="{DynamicResource BadgeLightSuccessBadgeForeground}" />
+                <Setter Property="Background" Value="{DynamicResource BadgeLightSuccessBadgeBackground}" />
             </Style>
             <Style Selector="^.Warning">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightWarningBadgeForeground}" />
-                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightWarningBadgeBackground}" />
+                <Setter Property="Foreground" Value="{DynamicResource BadgeLightWarningBadgeForeground}" />
+                <Setter Property="Background" Value="{DynamicResource BadgeLightWarningBadgeBackground}" />
             </Style>
             <Style Selector="^.Danger">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeLightDangerBadgeForeground}" />
-                <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeLightDangerBadgeBackground}" />
+                <Setter Property="Foreground" Value="{DynamicResource BadgeLightDangerBadgeForeground}" />
+                <Setter Property="Background" Value="{DynamicResource BadgeLightDangerBadgeBackground}" />
             </Style>
         </Style>
         <Style Selector="^.Inverted">
-            <Setter Property="u:Badge.Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" />
+            <Setter Property="Background" Value="{DynamicResource BadgeInvertedBadgeBackground}" />
             <Style Selector="^.Primary">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedPrimaryBadgeForeground}" />
             </Style>
             <Style Selector="^.Secondary">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedSecondaryBadgeForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedSecondaryBadgeForeground}" />
             </Style>
             <Style Selector="^.Tertiary">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedTertiaryBadgeForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedTertiaryBadgeForeground}" />
             </Style>
             <Style Selector="^.Success">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedSuccessBadgeForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedSuccessBadgeForeground}" />
             </Style>
             <Style Selector="^.Warning">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedWarningBadgeForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedWarningBadgeForeground}" />
             </Style>
             <Style Selector="^.Danger">
-                <Setter Property="u:Badge.Foreground" Value="{DynamicResource BadgeInvertedDangerBadgeForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource BadgeInvertedDangerBadgeForeground}" />
             </Style>
         </Style>
     </ControlTheme>
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml b/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
index 93181ae1..37c65848 100644
--- a/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Dark/Badge.axaml
@@ -1,6 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <SolidColorBrush x:Key="BadgeBorderBrush" Color="#1C1F23" />
     <SolidColorBrush x:Key="BadgeForeground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="BadgeContentForeground" Color="White" />
     <!-- Solid -->
     <SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#FF54A9FF" />
     <SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#FF40B4F3" />
diff --git a/src/Ursa.Themes.Semi/Themes/Light/Badge.axaml b/src/Ursa.Themes.Semi/Themes/Light/Badge.axaml
index 61282694..403f1375 100644
--- a/src/Ursa.Themes.Semi/Themes/Light/Badge.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Light/Badge.axaml
@@ -1,6 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <SolidColorBrush x:Key="BadgeBorderBrush" Color="White"/>
     <SolidColorBrush x:Key="BadgeForeground" Color="White" />
+    <SolidColorBrush x:Key="BadgeContentForeground" Color="#1C1F23" />
     <!-- Solid -->
     <SolidColorBrush x:Key="BadgePrimaryBadgeBackground" Color="#0077F0" />
     <SolidColorBrush x:Key="BadgeSecondaryBadgeBackground" Color="#0095EE" />

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 3/3] 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 4c97eb32..012ea37b 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 fc34f889..099384fa 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>