From 6a94e403c970d41be1a86cb78c52a6a72eb9f68d Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sun, 14 Jul 2024 22:26:59 +0800
Subject: [PATCH] feat: add Outline Theme to Button.

---
 .../Semi.Avalonia.Demo/Pages/ButtonDemo.axaml | 22 ++++++++--
 src/Semi.Avalonia/Controls/Button.axaml       | 36 +++++++++++++++-
 .../Controls/DropDownButton.axaml             | 40 ++++++++++++++++--
 src/Semi.Avalonia/Controls/SplitButton.axaml  | 42 ++++++++++++++++---
 src/Semi.Avalonia/Themes/Dark/Button.axaml    | 12 +++++-
 src/Semi.Avalonia/Themes/Light/Button.axaml   | 12 +++++-
 6 files changed, 148 insertions(+), 16 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
index 7d96547..09a61d2 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
@@ -64,6 +64,16 @@
                     Disabled
                 </Button>
             </StackPanel>
+            <TextBlock>Outline</TextBlock>
+            <StackPanel Orientation="Horizontal" Spacing="20">
+                <Button Classes="Primary" Theme="{DynamicResource OutlineButton}">Primary</Button>
+                <Button Classes="Secondary" Theme="{DynamicResource OutlineButton}">Secondary</Button>
+                <Button Classes="Tertiary" Theme="{DynamicResource OutlineButton}">Tertiary</Button>
+                <Button Classes="Success" Theme="{DynamicResource OutlineButton}">Success</Button>
+                <Button Classes="Warning" Theme="{DynamicResource OutlineButton}">Warning</Button>
+                <Button Classes="Danger" Theme="{DynamicResource OutlineButton}">Danger</Button>
+                <Button Classes="Danger" Theme="{DynamicResource OutlineButton}" IsEnabled="False">Disabled</Button>
+            </StackPanel>
             <TextBlock>Borderless</TextBlock>
             <StackPanel Orientation="Horizontal" Spacing="20">
                 <Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
@@ -96,9 +106,11 @@
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <DropDownButton Content="Default" Classes="Success"/>
                 <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success"/>
+                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success"/>
                 <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success"/>
                 <DropDownButton Content="Default" Classes="Success" IsEnabled="False"/>
                 <DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" IsEnabled="False"/>
+                <DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success" IsEnabled="False"/>
                 <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" IsEnabled="False"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
@@ -119,11 +131,13 @@
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <SplitButton Content="Default" Classes="Success" />
-                <SplitButton Theme="{DynamicResource SolidSplitButton}" Content="Solid" Classes="Success" />
-                <SplitButton Theme="{DynamicResource BorderlessSplitButton}" Content="Borderless" Classes="Success" />
+                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}"  Classes="Success" />
+                <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" />
+                <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" />
                 <SplitButton Content="Default" Classes="Success" IsEnabled="False" />
-                <SplitButton Theme="{DynamicResource SolidSplitButton}" Content="Solid" Classes="Success" IsEnabled="False" />
-                <SplitButton Theme="{DynamicResource BorderlessSplitButton}" Content="Borderless" Classes="Success" IsEnabled="False" />
+                <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" IsEnabled="False" />
+                <SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" IsEnabled="False" />
+                <SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" IsEnabled="False" />
             </StackPanel>
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <SplitButton Classes="Small" Content="Small" />
diff --git a/src/Semi.Avalonia/Controls/Button.axaml b/src/Semi.Avalonia/Controls/Button.axaml
index 60ee4c4..3cfce82 100644
--- a/src/Semi.Avalonia/Controls/Button.axaml
+++ b/src/Semi.Avalonia/Controls/Button.axaml
@@ -48,7 +48,7 @@
         <Style Selector="^:pressed">
             <Setter Property="RenderTransform" Value="scale(0.98)" />
         </Style>
-        
+
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
             <Setter Property="Background" Value="{TemplateBinding Background}" />
@@ -216,6 +216,38 @@
         </Style>
     </ControlTheme>
 
+    <ControlTheme
+        x:Key="OutlineButton"
+        BasedOn="{StaticResource {x:Type Button}}"
+        TargetType="Button">
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^.Success /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
+        </Style>
+        <Style Selector="^.Warning /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
+        </Style>
+        <Style Selector="^.Danger /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
+        </Style>
+        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+
     <ControlTheme
         x:Key="BorderlessButton"
         BasedOn="{StaticResource {x:Type Button}}"
@@ -254,4 +286,4 @@
             <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerPressedForeground}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/DropDownButton.axaml b/src/Semi.Avalonia/Controls/DropDownButton.axaml
index b698c9e..73d0d10 100644
--- a/src/Semi.Avalonia/Controls/DropDownButton.axaml
+++ b/src/Semi.Avalonia/Controls/DropDownButton.axaml
@@ -239,17 +239,51 @@
         </Style>
     </ControlTheme>
 
+    <ControlTheme
+        x:Key="OutlineDropDownButton"
+        BasedOn="{StaticResource {x:Type DropDownButton}}"
+        TargetType="DropDownButton">
+        <Style Selector="^ /template/ Border#RootBorder">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pointerover /template/ Border#RootBorder">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pressed /template/ Border#RootBorder">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^.Success /template/ Border#RootBorder">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
+        </Style>
+        <Style Selector="^.Warning /template/ Border#RootBorder">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
+        </Style>
+        <Style Selector="^.Danger /template/ Border#RootBorder">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
+        </Style>
+        <Style Selector="^:disabled /template/ Border#RootBorder">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+        </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+
     <ControlTheme
         x:Key="BorderlessDropDownButton"
         BasedOn="{StaticResource {x:Type DropDownButton}}"
         TargetType="DropDownButton">
         <Style Selector="^ /template/ Border#RootBorder">
-            <Setter Property="DropDownButton.Background" Value="Transparent" />
-            <Setter Property="DropDownButton.BorderBrush" Value="Transparent" />
+            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="BorderBrush" Value="Transparent" />
         </Style>
         <Style Selector="^:disabled /template/ Border#RootBorder">
             <Setter Property="BorderBrush" Value="Transparent" />
             <Setter Property="Background" Value="Transparent" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/SplitButton.axaml b/src/Semi.Avalonia/Controls/SplitButton.axaml
index 4c31daf..b185c5e 100644
--- a/src/Semi.Avalonia/Controls/SplitButton.axaml
+++ b/src/Semi.Avalonia/Controls/SplitButton.axaml
@@ -116,7 +116,7 @@
                 </Border>
             </ControlTemplate>
         </Setter>
-        
+
         <Style Selector="^ /template/ Button">
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
@@ -130,7 +130,7 @@
                 <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
             </Style>
         </Style>
-        
+
 
         <Style Selector="^.Secondary /template/ Button">
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSecondaryForeground}" />
@@ -158,7 +158,7 @@
                     <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
                 </Style>
             </Style>
-            
+
             <Style Selector="^.Secondary /template/ Button">
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" />
                 <Style Selector="^:pointerover">
@@ -230,7 +230,7 @@
         <Style Selector="^ /template/ Button">
             <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
-            
+
             <Style Selector="^:pointerover">
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
             </Style>
@@ -306,6 +306,38 @@
         </Style>
     </ControlTheme>
 
+    <ControlTheme
+        x:Key="OutlineSplitButton"
+        BasedOn="{StaticResource {x:Type SplitButton}}"
+        TargetType="SplitButton">
+        <Style Selector="^ /template/ Button">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pointerover /template/ Button">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^:pressed /template/ Button">
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+        </Style>
+        <Style Selector="^.Success /template/ Button">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
+        </Style>
+        <Style Selector="^.Warning /template/ Button">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
+        </Style>
+        <Style Selector="^.Danger /template/ Button">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
+        </Style>
+        <Style Selector="^:disabled /template/ Button">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+
     <ControlTheme
         x:Key="BorderlessSplitButton"
         BasedOn="{StaticResource {x:Type SplitButton}}"
@@ -320,4 +352,4 @@
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Dark/Button.axaml b/src/Semi.Avalonia/Themes/Dark/Button.axaml
index cf4be31..73eada7 100644
--- a/src/Semi.Avalonia/Themes/Dark/Button.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Button.axaml
@@ -70,7 +70,17 @@
     <SolidColorBrush x:Key="ButtonSolidDangerPointeroverBorderBrush" Color="#FD9983" />
     <SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#FDBEAC" />
     <!--  end Solid  -->
-    
+
+    <!--  Outline -->
+    <SolidColorBrush x:Key="ButtonOutlineBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="ButtonOutlineBorderBrush" Opacity="0.08" Color="White" />
+    <SolidColorBrush x:Key="ButtonOutlinePointeroverBackground" Opacity="0.12" Color="White" />
+    <SolidColorBrush x:Key="ButtonOutlinePressedBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="ButtonOutlineSuccessBorderBrush" Color="#5DC264" />
+    <SolidColorBrush x:Key="ButtonOutlineWarningBorderBrush" Color="#FFAE43" />
+    <SolidColorBrush x:Key="ButtonOutlineDangerBorderBrush" Color="#FC725A" />
+    <!--  end Outline  -->
+
     <SolidColorBrush x:Key="ButtonInputInnerForeground" Color="#888D92" />
     <SolidColorBrush x:Key="ButtonInputInnerPointeroverForeground" Color="#A7ABB0" />
     <SolidColorBrush x:Key="ButtonInputInnerPressedForeground" Color="#C6CACD" />
diff --git a/src/Semi.Avalonia/Themes/Light/Button.axaml b/src/Semi.Avalonia/Themes/Light/Button.axaml
index 30bd3bc..c674fd7 100644
--- a/src/Semi.Avalonia/Themes/Light/Button.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Button.axaml
@@ -70,7 +70,17 @@
     <SolidColorBrush x:Key="ButtonSolidDangerPointeroverBorderBrush" Color="#D52515" />
     <SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#B2140C" />
     <!--  end Solid  -->
-    
+
+    <!--  Outline -->
+    <SolidColorBrush x:Key="ButtonOutlineBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="ButtonOutlineBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="ButtonOutlinePointeroverBackground" Opacity="0.05" Color="#2E3238" />
+    <SolidColorBrush x:Key="ButtonOutlinePressedBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="ButtonOutlineSuccessBorderBrush" Color="#3BB346" />
+    <SolidColorBrush x:Key="ButtonOutlineWarningBorderBrush" Color="#FC8800" />
+    <SolidColorBrush x:Key="ButtonOutlineDangerBorderBrush" Color="#F93920" />
+    <!--  end Outline  -->
+
     <SolidColorBrush x:Key="ButtonInputInnerForeground" Color="#6B7075" />
     <SolidColorBrush x:Key="ButtonInputInnerPointeroverForeground" Color="#555B61" />
     <SolidColorBrush x:Key="ButtonInputInnerPressedForeground" Color="#41464C" />