From 2fd76aefb0a65fefdff5d4d6fc868bcfb135b752 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Fri, 28 Jul 2023 01:30:39 +0800
Subject: [PATCH] feat: add color Classes.

---
 demo/Ursa.Demo/Pages/DualBadgeDemo.axaml      |  77 ++++++++++-
 src/Ursa.Themes.Semi/Controls/DualBadge.axaml | 100 +++++++++++++-
 .../Themes/Dark/DualBadge.axaml               | 128 +++++++++++++++++-
 .../Themes/Light/DualBadge.axaml              | 128 +++++++++++++++++-
 4 files changed, 425 insertions(+), 8 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/DualBadgeDemo.axaml b/demo/Ursa.Demo/Pages/DualBadgeDemo.axaml
index 83e4098..2dd1acb 100644
--- a/demo/Ursa.Demo/Pages/DualBadgeDemo.axaml
+++ b/demo/Ursa.Demo/Pages/DualBadgeDemo.axaml
@@ -10,8 +10,8 @@
     mc:Ignorable="d">
 
     <UserControl.Styles>
-        <Style Selector="StackPanel > u|DualBadge">
-            <Setter Property="Margin" Value="0 0 10 0" />
+        <Style Selector="u|DualBadge">
+            <Setter Property="Margin" Value="4" />
         </Style>
     </UserControl.Styles>
 
@@ -142,6 +142,79 @@
                     2.4K
                 </u:DualBadge>
             </StackPanel>
+            
+            <WrapPanel>
+                <u:DualBadge Classes="Red">Red</u:DualBadge>
+                <u:DualBadge Classes="Pink">Pink</u:DualBadge>
+                <u:DualBadge Classes="Purple">Purple</u:DualBadge>
+                <u:DualBadge Classes="Violet">Violet</u:DualBadge>
+                <u:DualBadge Classes="Indigo">Indigo</u:DualBadge>
+                <u:DualBadge Classes="Blue">Blue</u:DualBadge>
+                <u:DualBadge Classes="LightBlue">LightBlue</u:DualBadge>
+                <u:DualBadge Classes="Cyan">Cyan</u:DualBadge>
+                <u:DualBadge Classes="Teal">Teal</u:DualBadge>
+                <u:DualBadge Classes="Green">Green</u:DualBadge>
+                <u:DualBadge Classes="LightGreen">LightGreen</u:DualBadge>
+                <u:DualBadge Classes="Lime">Lime</u:DualBadge>
+                <u:DualBadge Classes="Yellow">Yellow</u:DualBadge>
+                <u:DualBadge Classes="Amber">Amber</u:DualBadge>
+                <u:DualBadge Classes="Orange">Orange</u:DualBadge>
+                <u:DualBadge Classes="Grey">Grey</u:DualBadge>
+            </WrapPanel>
+            <WrapPanel>
+                <u:DualBadge Classes="FlatSquare Red">Red</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Pink">Pink</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Purple">Purple</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Violet">Violet</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Indigo">Indigo</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Blue">Blue</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare LightBlue">LightBlue</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Cyan">Cyan</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Teal">Teal</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Green">Green</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare LightGreen">LightGreen</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Lime">Lime</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Yellow">Yellow</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Amber">Amber</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Orange">Orange</u:DualBadge>
+                <u:DualBadge Classes="FlatSquare Grey">Grey</u:DualBadge>
+            </WrapPanel>
+            <WrapPanel>
+                <u:DualBadge Classes="Plastic Red">Red</u:DualBadge>
+                <u:DualBadge Classes="Plastic Pink">Pink</u:DualBadge>
+                <u:DualBadge Classes="Plastic Purple">Purple</u:DualBadge>
+                <u:DualBadge Classes="Plastic Violet">Violet</u:DualBadge>
+                <u:DualBadge Classes="Plastic Indigo">Indigo</u:DualBadge>
+                <u:DualBadge Classes="Plastic Blue">Blue</u:DualBadge>
+                <u:DualBadge Classes="Plastic LightBlue">LightBlue</u:DualBadge>
+                <u:DualBadge Classes="Plastic Cyan">Cyan</u:DualBadge>
+                <u:DualBadge Classes="Plastic Teal">Teal</u:DualBadge>
+                <u:DualBadge Classes="Plastic Green">Green</u:DualBadge>
+                <u:DualBadge Classes="Plastic LightGreen">LightGreen</u:DualBadge>
+                <u:DualBadge Classes="Plastic Lime">Lime</u:DualBadge>
+                <u:DualBadge Classes="Plastic Yellow">Yellow</u:DualBadge>
+                <u:DualBadge Classes="Plastic Amber">Amber</u:DualBadge>
+                <u:DualBadge Classes="Plastic Orange">Orange</u:DualBadge>
+                <u:DualBadge Classes="Plastic Grey">Grey</u:DualBadge>
+            </WrapPanel>
+            <WrapPanel>
+                <u:DualBadge Classes="ForTheBadge Red">Red</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Pink">Pink</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Purple">Purple</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Violet">Violet</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Indigo">Indigo</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Blue">Blue</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge LightBlue">LightBlue</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Cyan">Cyan</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Teal">Teal</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Green">Green</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge LightGreen">LightGreen</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Lime">Lime</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Yellow">Yellow</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Amber">Amber</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Orange">Orange</u:DualBadge>
+                <u:DualBadge Classes="ForTheBadge Grey">Grey</u:DualBadge>
+            </WrapPanel>
         </StackPanel>
     </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Controls/DualBadge.axaml b/src/Ursa.Themes.Semi/Controls/DualBadge.axaml
index e0a040f..404ecfe 100644
--- a/src/Ursa.Themes.Semi/Controls/DualBadge.axaml
+++ b/src/Ursa.Themes.Semi/Controls/DualBadge.axaml
@@ -10,7 +10,7 @@
         <Setter Property="u:DualBadge.HeaderForeground" Value="{DynamicResource DualBadgeDefaultHeaderForeground}" />
         <Setter Property="u:DualBadge.HeaderBackground" Value="{DynamicResource DualBadgeDefaultHeaderBackground}" />
         <Setter Property="u:DualBadge.Foreground" Value="{DynamicResource DualBadgeDefaultForeground}" />
-        <Setter Property="u:DualBadge.Background" Value="{DynamicResource DualBadgeDefaultBackground}" />
+        <Setter Property="u:DualBadge.Background" Value="{DynamicResource DualBadgeFlatGreenBackground}" />
         <Setter Property="u:DualBadge.ClipToBounds" Value="False" />
         <Setter Property="u:DualBadge.HorizontalAlignment" Value="Left" />
         <Setter Property="u:DualBadge.VerticalAlignment" Value="Center" />
@@ -59,6 +59,55 @@
             </ControlTemplate>
         </Setter>
 
+        <Style Selector="^.Red">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatRedBackground}" />
+        </Style>
+        <Style Selector="^.Pink">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatPinkBackground}" />
+        </Style>
+        <Style Selector="^.Purple">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatPurpleBackground}" />
+        </Style>
+        <Style Selector="^.Violet">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatVioletBackground}" />
+        </Style>
+        <Style Selector="^.Indigo">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatIndigoBackground}" />
+        </Style>
+        <Style Selector="^.Blue">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatBlueBackground}" />
+        </Style>
+        <Style Selector="^.LightBlue">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatLightBlueBackground}" />
+        </Style>
+        <Style Selector="^.Cyan">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatCyanBackground}" />
+        </Style>
+        <Style Selector="^.Teal">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatTealBackground}" />
+        </Style>
+        <Style Selector="^.Green">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatGreenBackground}" />
+        </Style>
+        <Style Selector="^.LightGreen">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatLightGreenBackground}" />
+        </Style>
+        <Style Selector="^.Lime">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatLimeBackground}" />
+        </Style>
+        <Style Selector="^.Yellow">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatYellowBackground}" />
+        </Style>
+        <Style Selector="^.Amber">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatAmberBackground}" />
+        </Style>
+        <Style Selector="^.Orange">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatOrangeBackground}" />
+        </Style>
+        <Style Selector="^.Grey">
+            <Setter Property="Background" Value="{DynamicResource DualBadgeFlatGreyBackground}" />
+        </Style>
+
         <Style Selector="^.FlatSquare">
             <Setter Property="CornerRadius" Value="0" />
         </Style>
@@ -66,7 +115,54 @@
         <Style Selector="^.Plastic">
             <Setter Property="Padding" Value="4 0" />
             <Setter Property="HeaderBackground" Value="{DynamicResource DualBadgePlasticHeaderBackground}" />
-            <Setter Property="Background" Value="{DynamicResource DualBadgePlasticBackground}" />
+            <Style Selector="^.Red">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticRedBackground}" />
+            </Style>
+            <Style Selector="^.Pink">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticPinkBackground}" />
+            </Style>
+            <Style Selector="^.Purple">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticPurpleBackground}" />
+            </Style>
+            <Style Selector="^.Violet">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticVioletBackground}" />
+            </Style>
+            <Style Selector="^.Indigo">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticIndigoBackground}" />
+            </Style>
+            <Style Selector="^.Blue">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticBlueBackground}" />
+            </Style>
+            <Style Selector="^.LightBlue">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticLightBlueBackground}" />
+            </Style>
+            <Style Selector="^.Cyan">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticCyanBackground}" />
+            </Style>
+            <Style Selector="^.Teal">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticTealBackground}" />
+            </Style>
+            <Style Selector="^.Green">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticGreenBackground}" />
+            </Style>
+            <Style Selector="^.LightGreen">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticLightGreenBackground}" />
+            </Style>
+            <Style Selector="^.Lime">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticLimeBackground}" />
+            </Style>
+            <Style Selector="^.Yellow">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticYellowBackground}" />
+            </Style>
+            <Style Selector="^.Amber">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticAmberBackground}" />
+            </Style>
+            <Style Selector="^.Orange">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticOrangeBackground}" />
+            </Style>
+            <Style Selector="^.Grey">
+                <Setter Property="Background" Value="{DynamicResource DualBadgePlasticGreyBackground}" />
+            </Style>
         </Style>
 
         <Style Selector="^.ForTheBadge">
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/DualBadge.axaml b/src/Ursa.Themes.Semi/Themes/Dark/DualBadge.axaml
index 72e804c..851dc91 100644
--- a/src/Ursa.Themes.Semi/Themes/Dark/DualBadge.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Dark/DualBadge.axaml
@@ -6,16 +6,140 @@
         <GradientStop Color="#FF555B61" Offset="0" />
         <GradientStop Color="#FF41464C" Offset="1" />
     </LinearGradientBrush>
-    <LinearGradientBrush x:Key="DualBadgeDefaultBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+
+    <LinearGradientBrush x:Key="DualBadgeFlatRedBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFFA664C" Offset="0" />
+        <GradientStop Color="#FFF93920" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatPinkBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFED487B" Offset="0" />
+        <GradientStop Color="#FFE91E63" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatPurpleBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFB449C2" Offset="0" />
+        <GradientStop Color="#FF9E28B3" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatVioletBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF885BD2" Offset="0" />
+        <GradientStop Color="#FF6A3AC7" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatIndigoBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF5E6FC4" Offset="0" />
+        <GradientStop Color="#FF3F51B5" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatBlueBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF3295FB" Offset="0" />
+        <GradientStop Color="#FF0077FA" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatLightBlueBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF30ACF1" Offset="0" />
+        <GradientStop Color="#FF0095EE" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatCyanBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF2CB8C5" Offset="0" />
+        <GradientStop Color="#FF2CB8C5" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatTealBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF27C2B0" Offset="0" />
+        <GradientStop Color="#FF00B3A1" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatGreenBackground" StartPoint="0%,0%" EndPoint="0%,100%">
         <GradientStop Color="#FF5AC262" Offset="0" />
         <GradientStop Color="#FF3BB346" Offset="1" />
     </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatLightGreenBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF93C55B" Offset="0" />
+        <GradientStop Color="#FF7BB63C" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatLimeBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFA7DA2C" Offset="0" />
+        <GradientStop Color="#FF9BD100" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatYellowBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFFBDA32" Offset="0" />
+        <GradientStop Color="#FFFAC800" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatAmberBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFF3C641" Offset="0" />
+        <GradientStop Color="#FFF0B114" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatOrangeBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFFDA633" Offset="0" />
+        <GradientStop Color="#FFFC8800" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatGreyBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF888D92" Offset="0" />
+        <GradientStop Color="#FF6B7075" Offset="1" />
+    </LinearGradientBrush>
+
+
     <LinearGradientBrush x:Key="DualBadgePlasticHeaderBackground" StartPoint="0%,0%" EndPoint="0%,100%">
         <GradientStop Color="#FF555B61" Offset="0" />
         <GradientStop Color="#FF2E3238" Offset="1" />
     </LinearGradientBrush>
-    <LinearGradientBrush x:Key="DualBadgePlasticBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+
+    <LinearGradientBrush x:Key="DualBadgePlasticRedBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFFA664C" Offset="0" />
+        <GradientStop Color="#FFD52515" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticPinkBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFED487B" Offset="0" />
+        <GradientStop Color="#FFC51356" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticPurpleBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFB449C2" Offset="0" />
+        <GradientStop Color="#FF871E9E" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticVioletBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF885BD2" Offset="0" />
+        <GradientStop Color="#FF572FB3" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticIndigoBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF5E6FC4" Offset="0" />
+        <GradientStop Color="#FF3342A1" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticBlueBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF3295FB" Offset="0" />
+        <GradientStop Color="#FF0077FA" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticLightBlueBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF30ACF1" Offset="0" />
+        <GradientStop Color="#FF007BCA" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticCyanBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF2CB8C5" Offset="0" />
+        <GradientStop Color="#FF038698" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticTealBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF27C2B0" Offset="0" />
+        <GradientStop Color="#FF009589" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticGreenBackground" StartPoint="0%,0%" EndPoint="0%,100%">
         <GradientStop Color="#FF5AC262" Offset="0" />
         <GradientStop Color="#FF30953B" Offset="1" />
     </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticLightGreenBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF93C55B" Offset="0" />
+        <GradientStop Color="#FF649830" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticLimeBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFA7DA2C" Offset="0" />
+        <GradientStop Color="#FF7EAE00" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticYellowBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFFBDA32" Offset="0" />
+        <GradientStop Color="#FFD0AA00" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticAmberBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFF3C641" Offset="0" />
+        <GradientStop Color="#FFC88A0F" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticOrangeBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFFDA633" Offset="0" />
+        <GradientStop Color="#FFD26700" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticGreyBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF888D92" Offset="0" />
+        <GradientStop Color="#FF555B61" Offset="1" />
+    </LinearGradientBrush>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Themes/Light/DualBadge.axaml b/src/Ursa.Themes.Semi/Themes/Light/DualBadge.axaml
index 72e804c..851dc91 100644
--- a/src/Ursa.Themes.Semi/Themes/Light/DualBadge.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Light/DualBadge.axaml
@@ -6,16 +6,140 @@
         <GradientStop Color="#FF555B61" Offset="0" />
         <GradientStop Color="#FF41464C" Offset="1" />
     </LinearGradientBrush>
-    <LinearGradientBrush x:Key="DualBadgeDefaultBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+
+    <LinearGradientBrush x:Key="DualBadgeFlatRedBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFFA664C" Offset="0" />
+        <GradientStop Color="#FFF93920" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatPinkBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFED487B" Offset="0" />
+        <GradientStop Color="#FFE91E63" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatPurpleBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFB449C2" Offset="0" />
+        <GradientStop Color="#FF9E28B3" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatVioletBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF885BD2" Offset="0" />
+        <GradientStop Color="#FF6A3AC7" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatIndigoBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF5E6FC4" Offset="0" />
+        <GradientStop Color="#FF3F51B5" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatBlueBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF3295FB" Offset="0" />
+        <GradientStop Color="#FF0077FA" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatLightBlueBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF30ACF1" Offset="0" />
+        <GradientStop Color="#FF0095EE" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatCyanBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF2CB8C5" Offset="0" />
+        <GradientStop Color="#FF2CB8C5" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatTealBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF27C2B0" Offset="0" />
+        <GradientStop Color="#FF00B3A1" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatGreenBackground" StartPoint="0%,0%" EndPoint="0%,100%">
         <GradientStop Color="#FF5AC262" Offset="0" />
         <GradientStop Color="#FF3BB346" Offset="1" />
     </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatLightGreenBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF93C55B" Offset="0" />
+        <GradientStop Color="#FF7BB63C" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatLimeBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFA7DA2C" Offset="0" />
+        <GradientStop Color="#FF9BD100" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatYellowBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFFBDA32" Offset="0" />
+        <GradientStop Color="#FFFAC800" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatAmberBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFF3C641" Offset="0" />
+        <GradientStop Color="#FFF0B114" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatOrangeBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFFDA633" Offset="0" />
+        <GradientStop Color="#FFFC8800" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeFlatGreyBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF888D92" Offset="0" />
+        <GradientStop Color="#FF6B7075" Offset="1" />
+    </LinearGradientBrush>
+
+
     <LinearGradientBrush x:Key="DualBadgePlasticHeaderBackground" StartPoint="0%,0%" EndPoint="0%,100%">
         <GradientStop Color="#FF555B61" Offset="0" />
         <GradientStop Color="#FF2E3238" Offset="1" />
     </LinearGradientBrush>
-    <LinearGradientBrush x:Key="DualBadgePlasticBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+
+    <LinearGradientBrush x:Key="DualBadgePlasticRedBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFFA664C" Offset="0" />
+        <GradientStop Color="#FFD52515" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticPinkBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFED487B" Offset="0" />
+        <GradientStop Color="#FFC51356" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticPurpleBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFB449C2" Offset="0" />
+        <GradientStop Color="#FF871E9E" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticVioletBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF885BD2" Offset="0" />
+        <GradientStop Color="#FF572FB3" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticIndigoBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF5E6FC4" Offset="0" />
+        <GradientStop Color="#FF3342A1" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticBlueBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF3295FB" Offset="0" />
+        <GradientStop Color="#FF0077FA" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticLightBlueBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF30ACF1" Offset="0" />
+        <GradientStop Color="#FF007BCA" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticCyanBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF2CB8C5" Offset="0" />
+        <GradientStop Color="#FF038698" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticTealBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF27C2B0" Offset="0" />
+        <GradientStop Color="#FF009589" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticGreenBackground" StartPoint="0%,0%" EndPoint="0%,100%">
         <GradientStop Color="#FF5AC262" Offset="0" />
         <GradientStop Color="#FF30953B" Offset="1" />
     </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticLightGreenBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF93C55B" Offset="0" />
+        <GradientStop Color="#FF649830" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticLimeBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFA7DA2C" Offset="0" />
+        <GradientStop Color="#FF7EAE00" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticYellowBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFFBDA32" Offset="0" />
+        <GradientStop Color="#FFD0AA00" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticAmberBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFF3C641" Offset="0" />
+        <GradientStop Color="#FFC88A0F" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticOrangeBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FFFDA633" Offset="0" />
+        <GradientStop Color="#FFD26700" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgePlasticGreyBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF888D92" Offset="0" />
+        <GradientStop Color="#FF555B61" Offset="1" />
+    </LinearGradientBrush>
 </ResourceDictionary>
\ No newline at end of file