From c509d2024a68535718496096afb23490f7ce3725 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 9 Dec 2022 19:14:03 +0800
Subject: [PATCH 1/2] feat: update radio button theme, pending on card and pure
 card. update checkbox glyphs.

---
 src/Semi.Avalonia.Demo/MainWindow.axaml       |  18 +-
 src/Semi.Avalonia.Demo/MainWindow.axaml.cs    |   1 +
 .../Pages/RadioButtonDemo.axaml               |  56 ++++
 .../Pages/RadioButtonDemo.axaml.cs            |  18 ++
 src/Semi.Avalonia/Controls/CheckBox.axaml     |   4 +-
 src/Semi.Avalonia/Controls/Controls.axaml     |   1 +
 src/Semi.Avalonia/Controls/RadioButton.axaml  | 302 ++++++++++++++++++
 src/Semi.Avalonia/Controls/Window.axaml       |  22 +-
 src/Semi.Avalonia/Themes/Base.axaml           |  12 +-
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 .../Themes/Light/RadioButton.axaml            |  54 ++++
 11 files changed, 460 insertions(+), 29 deletions(-)
 create mode 100644 src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
 create mode 100644 src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml.cs
 create mode 100644 src/Semi.Avalonia/Controls/RadioButton.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/RadioButton.axaml

diff --git a/src/Semi.Avalonia.Demo/MainWindow.axaml b/src/Semi.Avalonia.Demo/MainWindow.axaml
index c047a31..1b98c8e 100644
--- a/src/Semi.Avalonia.Demo/MainWindow.axaml
+++ b/src/Semi.Avalonia.Demo/MainWindow.axaml
@@ -1,14 +1,9 @@
 <Window
-    Title="Semi.Demo"
-    d:DesignHeight="450"
-    d:DesignWidth="800"
-    mc:Ignorable="d"
-    x:Class="Semi.Avalonia.Demo.MainWindow"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:pages="using:Semi.Avalonia.Demo.Pages"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    x:Class="Semi.Avalonia.Demo.MainWindow" xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:pages="using:Semi.Avalonia.Demo.Pages"
+    Title="Semi.Demo" d:DesignHeight="450"
+    d:DesignWidth="800" mc:Ignorable="d">
     <TabControl TabStripPlacement="Left">
         <TabItem Header="Button">
             <pages:ButtonDemo />
@@ -16,5 +11,8 @@
         <TabItem Header="CheckBox">
             <pages:CheckBoxDemo />
         </TabItem>
+        <TabItem Header="RadioButton">
+            <pages:RadioButtonDemo />
+        </TabItem>
     </TabControl>
 </Window>
diff --git a/src/Semi.Avalonia.Demo/MainWindow.axaml.cs b/src/Semi.Avalonia.Demo/MainWindow.axaml.cs
index 9f969bb..516942c 100644
--- a/src/Semi.Avalonia.Demo/MainWindow.axaml.cs
+++ b/src/Semi.Avalonia.Demo/MainWindow.axaml.cs
@@ -1,4 +1,5 @@
 using Avalonia.Controls;
+using Avalonia.Interactivity;
 
 namespace Semi.Avalonia.Demo
 {
diff --git a/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml b/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
new file mode 100644
index 0000000..ce65be9
--- /dev/null
+++ b/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
@@ -0,0 +1,56 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo" xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
+    d:DesignWidth="800" mc:Ignorable="d">
+    <StackPanel
+        Margin="20" HorizontalAlignment="Left"
+        Spacing="20">
+        <TextBlock Text="Radio Buttons" />
+        <StackPanel>
+            <RadioButton>111</RadioButton>
+            <RadioButton>222</RadioButton>
+            <RadioButton>333</RadioButton>
+        </StackPanel>
+        <TextBlock Text="Radio Button as Button" />
+        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+            <StackPanel Orientation="Horizontal">
+                <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
+                <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小2</RadioButton>
+            </StackPanel>
+        </Border>
+        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+            <StackPanel Orientation="Horizontal">
+                <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
+                <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
+            </StackPanel>
+        </Border>
+        <Border Theme="{StaticResource RadioButtonGroupBorder}">
+            <StackPanel Orientation="Horizontal">
+                <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
+                <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大2</RadioButton>
+            </StackPanel>
+        </Border>
+        <TextBlock Text="Radio Button as Card" />
+        <StackPanel Width="300">
+            <RadioButton Theme="{DynamicResource CardRadioButton}">
+                <StackPanel>
+                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                </StackPanel>
+            </RadioButton>
+            <RadioButton Theme="{DynamicResource CardRadioButton}">
+                <StackPanel>
+                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                </StackPanel>
+            </RadioButton>
+            <RadioButton Theme="{DynamicResource CardRadioButton}">
+                <StackPanel>
+                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                </StackPanel>
+            </RadioButton>
+        </StackPanel>
+    </StackPanel>
+</UserControl>
diff --git a/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml.cs b/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml.cs
new file mode 100644
index 0000000..d288d1c
--- /dev/null
+++ b/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class RadioButtonDemo : UserControl
+{
+    public RadioButtonDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/CheckBox.axaml b/src/Semi.Avalonia/Controls/CheckBox.axaml
index a82566a..e1d9e21 100644
--- a/src/Semi.Avalonia/Controls/CheckBox.axaml
+++ b/src/Semi.Avalonia/Controls/CheckBox.axaml
@@ -90,7 +90,7 @@
             </Style>
 
             <Style Selector="^ /template/ Path#CheckGlyph">
-                <Setter Property="Data" Value="M1507 31L438 1101L-119 543L-29 453L438 919L1417 -59L1507 31Z" />
+                <Setter Property="Data" Value="M17.4111 7.30848C18.0692 7.81171 18.1947 8.75312 17.6915 9.41119L11.1915 17.9112C10.909 18.2806 10.4711 18.4981 10.0061 18.5C9.54105 18.5019 9.10143 18.288 8.81592 17.9209L5.31592 13.4209C4.80731 12.767 4.92512 11.8246 5.57904 11.316C6.23296 10.8074 7.17537 10.9252 7.68398 11.5791L9.98988 14.5438L15.3084 7.58884C15.8116 6.93077 16.7531 6.80525 17.4111 7.30848Z" />
                 <Setter Property="Width" Value="9" />
                 <Setter Property="Opacity" Value="1" />
             </Style>
@@ -134,7 +134,7 @@
             </Style>
 
             <Style Selector="^ /template/ Path#CheckGlyph">
-                <Setter Property="Data" Value="M1536 1536v-0h-1024v128h1024z" />
+                <Setter Property="Data" Value="M5 12.5C5 11.6716 5.67157 11 6.5 11H17.5C18.3284 11 19 11.6716 19 12.5C19 13.3284 18.3284 14 17.5 14H6.5C5.67157 14 5 13.3284 5 12.5Z" />
                 <Setter Property="Width" Value="9" />
                 <Setter Property="Opacity" Value="1" />
             </Style>
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index ee0dd9c..448a2b8 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -3,6 +3,7 @@
     <ResourceDictionary.MergedDictionaries>
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/RadioButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/UserControl.axaml" />
diff --git a/src/Semi.Avalonia/Controls/RadioButton.axaml b/src/Semi.Avalonia/Controls/RadioButton.axaml
new file mode 100644
index 0000000..d2a5654
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/RadioButton.axaml
@@ -0,0 +1,302 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <StackPanel>
+            <RadioButton Theme="{StaticResource ButtonRadioButton}">Hello Button</RadioButton>
+            <RadioButton>Hello Button2</RadioButton>
+            <RadioButton>Hello Button3</RadioButton>
+            <Border Theme="{StaticResource RadioButtonGroupBorder}">
+                <StackPanel Orientation="Horizontal">
+                    <RadioButton Theme="{StaticResource ButtonRadioButton}">Hello Button2</RadioButton>
+                    <RadioButton Theme="{StaticResource ButtonRadioButton}">Hello Button3</RadioButton>
+                </StackPanel>
+            </Border>
+            <RadioButton Theme="{StaticResource CardRadioButton}">Hello Button3</RadioButton>
+            <RadioButton Theme="{StaticResource CardRadioButton}">Hello Button3</RadioButton>
+        </StackPanel>
+    </Design.PreviewWith>
+    <!--  Theme: Default, Button, Card, PureCard  -->
+    <ControlTheme x:Key="{x:Type RadioButton}" TargetType="RadioButton">
+        <Setter Property="RadioButton.HorizontalAlignment" Value="Left" />
+        <Setter Property="RadioButton.VerticalAlignment" Value="Top" />
+        <Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
+        <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
+        <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="RadioButton">
+                <Border
+                    Name="RootBorder"
+                    Margin="{TemplateBinding Margin}"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid ColumnDefinitions="Auto,*">
+                        <Grid Margin="{DynamicResource RadioButtonIconMargin}" VerticalAlignment="Top">
+                            <Ellipse
+                                Name="OuterEllipse"
+                                Width="{DynamicResource RadioButtonIconRadius}"
+                                Height="{DynamicResource RadioButtonIconRadius}"
+                                Fill="{DynamicResource RadioButtonUncheckIconDefaultBackground}"
+                                Stroke="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}"
+                                StrokeThickness="1" UseLayoutRounding="False" />
+
+                            <Ellipse
+                                Name="CheckGlyph"
+                                Width="{DynamicResource RadioButtonGlyphRadius}"
+                                Height="{DynamicResource RadioButtonGlyphRadius}"
+                                Fill="{DynamicResource RadioButtonCheckGlyphFill}"
+                                Opacity="0"
+                                Stroke="{DynamicResource RadioButtonCheckGlyphFill}"
+                                StrokeThickness="0" UseLayoutRounding="False" />
+                        </Grid>
+
+                        <ContentPresenter
+                            Name="PART_ContentPresenter" Grid.Column="1"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Foreground="{TemplateBinding Foreground}"
+                            RecognizesAccessKey="True"
+                            TextElement.FontSize="{DynamicResource RadioButtonFontSize}"
+                            TextElement.Foreground="{DynamicResource RadioButtonForeground}" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  PointerOver State  -->
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="1" />
+            </Style>
+            <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
+            </Style>
+            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="1" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="1" />
+            </Style>
+            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="1" />
+            </Style>
+        </Style>
+        <Style Selector="^:unchecked">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+            <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
+            </Style>
+            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointOverBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointOverBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="RadioButtonGroupBorder" TargetType="Border">
+        <Setter Property="Border.CornerRadius" Value="{DynamicResource RadioButtonGroupCornerRadius}" />
+        <Setter Property="Border.Background" Value="{DynamicResource RadioButtonGroupBackground}" />
+    </ControlTheme>
+
+
+    <ControlTheme x:Key="ButtonRadioButton" TargetType="RadioButton">
+        <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonButtonCornerRadius}" />
+        <Setter Property="RadioButton.Margin" Value="2" />
+        <Setter Property="RadioButton.FontWeight" Value="{DynamicResource RadioButtonButtonFontWeight}" />
+        <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonButtonDefaultFontSize}" />
+        <Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonButtonDefaultPadding}" />
+        <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonUncheckedForeground}" />
+        <Setter Property="RadioButton.Template">
+            <ControlTemplate TargetType="RadioButton">
+                <ContentPresenter
+                    x:Name="PART_ContentPresenter"
+                    Margin="{TemplateBinding Margin}"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    RecognizesAccessKey="True"
+                    TextElement.FontSize="{TemplateBinding FontSize}"
+                    TextElement.FontWeight="{TemplateBinding FontWeight}"
+                    UseLayoutRounding="False" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:checked">
+            <Setter Property="RadioButton.Background" Value="White" />
+            <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonCheckedForeground}" />
+        </Style>
+        <Style Selector="^:unchecked">
+            <Setter Property="RadioButton.Background" Value="Transparent" />
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonButtonUncheckedPointeroverBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="RadioButton.FontSize" Value="{StaticResource RadioButtonButtonSmallFontSize}" />
+            <Setter Property="RadioButton.Padding" Value="{StaticResource RadioButtonButtonSmallPadding}" />
+        </Style>
+        <Style Selector="^.Large">
+            <Setter Property="RadioButton.FontSize" Value="{StaticResource RadioButtonButtonLargeFontSize}" />
+            <Setter Property="RadioButton.Padding" Value="{StaticResource RadioButtonButtonLargePadding}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="CardRadioButton" TargetType="RadioButton">
+        <Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonCardPadding}" />
+        <Setter Property="RadioButton.BorderBrush" Value="BLue" />
+        <Setter Property="RadioButton.BorderThickness" Value="1" />
+        <Setter Property="RadioButton.HorizontalAlignment" Value="Left" />
+        <Setter Property="RadioButton.VerticalAlignment" Value="Top" />
+        <Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
+        <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
+        <Setter Property="RadioButton.Background" Value="Transparent" />
+        <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="RadioButton">
+                <Border
+                    Name="RootBorder"
+                    Margin="{TemplateBinding Margin}"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid ColumnDefinitions="Auto,*">
+                        <Grid Margin="{DynamicResource RadioButtonIconMargin}" VerticalAlignment="Top">
+                            <Ellipse
+                                Name="OuterEllipse"
+                                Width="{DynamicResource RadioButtonIconRadius}"
+                                Height="{DynamicResource RadioButtonIconRadius}"
+                                Fill="{DynamicResource RadioButtonUncheckIconDefaultBackground}"
+                                Stroke="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}"
+                                StrokeThickness="1" UseLayoutRounding="False" />
+
+                            <Ellipse
+                                Name="CheckGlyph"
+                                Width="{DynamicResource RadioButtonGlyphRadius}"
+                                Height="{DynamicResource RadioButtonGlyphRadius}"
+                                Fill="{DynamicResource RadioButtonCheckGlyphFill}"
+                                Opacity="0"
+                                Stroke="{DynamicResource RadioButtonCheckGlyphFill}"
+                                StrokeThickness="0" UseLayoutRounding="False" />
+                        </Grid>
+
+                        <ContentPresenter
+                            Name="PART_ContentPresenter" Grid.Column="1"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Foreground="{TemplateBinding Foreground}"
+                            RecognizesAccessKey="True"
+                            TextElement.FontSize="{DynamicResource RadioButtonFontSize}"
+                            TextElement.Foreground="{DynamicResource RadioButtonForeground}" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  PointerOver State  -->
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="1" />
+            </Style>
+            <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
+            </Style>
+            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="1" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="1" />
+            </Style>
+            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="1" />
+            </Style>
+        </Style>
+        <Style Selector="^:unchecked">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+            <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
+            </Style>
+            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointOverBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointOverBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Controls/Window.axaml b/src/Semi.Avalonia/Controls/Window.axaml
index 2ba614f..af5f45c 100644
--- a/src/Semi.Avalonia/Controls/Window.axaml
+++ b/src/Semi.Avalonia/Controls/Window.axaml
@@ -1,27 +1,27 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ControlTheme x:Key="{x:Type Window}" TargetType="Window">
-        <Setter Property="Background" Value="{DynamicResource WindowDefaultBackground}"/>
+        <Setter Property="Background" Value="{DynamicResource WindowDefaultBackground}" />
         <Setter Property="TransparencyBackgroundFallback" Value="{DynamicResource WindowDefaultBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource WindowDefaultForeground}"/>
-        <Setter Property="FontSize" Value="{DynamicResource FontDefaultFontSize}"/>
-        <Setter Property="FontFamily" Value="{DynamicResource FontDefaultFontFamily}" />
+        <Setter Property="Foreground" Value="{DynamicResource WindowDefaultForeground}" />
+        <Setter Property="FontSize" Value="{DynamicResource DefaultFontSize}" />
+        <Setter Property="FontFamily" Value="{DynamicResource DefaultFontFamily}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Window">
                 <Panel>
                     <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
                     <Border Background="{TemplateBinding Background}" IsHitTestVisible="False" />
-                    <Panel Background="Transparent" Margin="{TemplateBinding WindowDecorationMargin}" />
+                    <Panel Margin="{TemplateBinding WindowDecorationMargin}" Background="Transparent" />
                     <VisualLayerManager>
                         <VisualLayerManager.ChromeOverlayLayer>
                             <TitleBar />
                         </VisualLayerManager.ChromeOverlayLayer>
-                        <ContentPresenter Name="PART_ContentPresenter"
-                            ContentTemplate="{TemplateBinding ContentTemplate}"
-                            Content="{TemplateBinding Content}"
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
                             Margin="{TemplateBinding Padding}"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
                     </VisualLayerManager>
                 </Panel>
             </ControlTemplate>
diff --git a/src/Semi.Avalonia/Themes/Base.axaml b/src/Semi.Avalonia/Themes/Base.axaml
index 1c53dce..fa1a177 100644
--- a/src/Semi.Avalonia/Themes/Base.axaml
+++ b/src/Semi.Avalonia/Themes/Base.axaml
@@ -1,7 +1,7 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
-    <!-- Add Resources Here -->
-    <sys:Double x:Key="FontDefaultFontSize">14</sys:Double>
-    <FontFamily x:Key="FontDefaultFontFamily">Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif</FontFamily>
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
+    <!--  Add Resources Here  -->
+    <sys:Double x:Key="DefaultFontSize">14</sys:Double>
+    <FontFamily x:Key="DefaultFontFamily">Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif</FontFamily>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 0796013..f507da3 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -4,6 +4,7 @@
         <!--  Controls  -->
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Button.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/RadioButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/RadioButton.axaml b/src/Semi.Avalonia/Themes/Light/RadioButton.axaml
new file mode 100644
index 0000000..f3cc71a
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/RadioButton.axaml
@@ -0,0 +1,54 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
+    <sys:Double x:Key="RadioButtonIconRadius">16</sys:Double>
+    <sys:Double x:Key="RadioButtonGlyphRadius">6</sys:Double>
+    <sys:Double x:Key="RadioButtonFontSize">14</sys:Double>
+    <Thickness x:Key="RadioButtonIconMargin">0 2 8 0</Thickness>
+
+
+    <SolidColorBrush x:Key="RadioButtonUncheckIconDefaultBackground" Color="White" />
+    <SolidColorBrush x:Key="RadioButtonUncheckIconPointOverBackground" Opacity="0.05" Color="#2E3238" />
+    <SolidColorBrush x:Key="RadioButtonUncheckIconPressedBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="RadioButtonUncheckIconDisabledBackground" Opacity="0.05" Color="#2E3238" />
+
+    <SolidColorBrush x:Key="RadioButtonUncheckIconDefaultBorderBrush" Opacity="0.35" Color="#1C1F23" />
+    <SolidColorBrush x:Key="RadioButtonUncheckIconPointOverBorderBrush" Color="#0062D6" />
+    <SolidColorBrush x:Key="RadioButtonUncheckIconPressedBorderBrush" Color="#004FB3" />
+    <SolidColorBrush x:Key="RadioButtonUncheckIconDisabledBorderBrush" Opacity="0.08" Color="#1C1F23" />
+
+
+    <SolidColorBrush x:Key="RadioButtonCheckIconDefaultBackground" Color="#0077FA" />
+    <SolidColorBrush x:Key="RadioButtonCheckIconPointOverBackground" Color="#0062D6" />
+    <SolidColorBrush x:Key="RadioButtonCheckIconPressedBackground" Color="#004FB3" />
+    <SolidColorBrush x:Key="RadioButtonCheckIconDisabledBackground" Color="#98CDFD" />
+    <SolidColorBrush x:Key="RadioButtonCheckIconDefaultBorderBrush" Color="#0077FA" />
+    <SolidColorBrush x:Key="RadioButtonCheckIconPointOverBorderBrush" Color="#0062D6" />
+    <SolidColorBrush x:Key="RadioButtonCheckIconPressedBorderBrush" Color="#004FB3" />
+    <SolidColorBrush x:Key="RadioButtonCheckIconDisabledBorderBrush" Color="#98CDFD" />
+
+    <SolidColorBrush x:Key="RadioButtonCheckGlyphFill" Color="White" />
+
+    <SolidColorBrush x:Key="RadioButtonForeground" Color="#1C1F23" />
+
+    <SolidColorBrush x:Key="RadioButtonGroupBackground" Opacity="0.05" Color="#2E3238" />
+
+    <CornerRadius x:Key="RadioButtonGroupCornerRadius">3</CornerRadius>
+    <CornerRadius x:Key="RadioButtonButtonCornerRadius">3</CornerRadius>
+
+    <FontWeight x:Key="RadioButtonButtonFontWeight">600</FontWeight>
+    <Thickness x:Key="RadioButtonButtonSmallPadding">16 2</Thickness>
+    <Thickness x:Key="RadioButtonButtonDefaultPadding">16 4</Thickness>
+    <Thickness x:Key="RadioButtonButtonLargePadding">24 6</Thickness>
+
+    <sys:Double x:Key="RadioButtonButtonSmallFontSize">12</sys:Double>
+    <sys:Double x:Key="RadioButtonButtonDefaultFontSize">12</sys:Double>
+    <sys:Double x:Key="RadioButtonButtonLargeFontSize">14</sys:Double>
+
+    <SolidColorBrush x:Key="RadioButtonButtonCheckedForeground" Color="#0077FA" />
+    <SolidColorBrush x:Key="RadioButtonButtonUncheckedPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="RadioButtonButtonUncheckedForeground" Opacity="0.8" Color="#1C1F23" />
+
+    <Thickness x:Key="RadioButtonCardPadding">16 12</Thickness>
+
+</ResourceDictionary>

From 6f9ed6d15ba7e339364d2408a48d835bbd7e1071 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 9 Dec 2022 22:26:57 +0800
Subject: [PATCH 2/2] feat: add pure card theme for RadioButton.

---
 .../Pages/RadioButtonDemo.axaml               |  34 ++++-
 src/Semi.Avalonia/Controls/RadioButton.axaml  | 123 ++++++++++++++----
 .../Themes/Light/RadioButton.axaml            |  13 ++
 3 files changed, 135 insertions(+), 35 deletions(-)

diff --git a/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml b/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
index ce65be9..bb655cd 100644
--- a/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
+++ b/src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
@@ -1,8 +1,7 @@
 <UserControl
     x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo" xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
-    d:DesignWidth="800" mc:Ignorable="d">
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
     <StackPanel
         Margin="20" HorizontalAlignment="Left"
         Spacing="20">
@@ -25,27 +24,48 @@
                 <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
             </StackPanel>
         </Border>
-        <Border Theme="{StaticResource RadioButtonGroupBorder}">
+        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
             <StackPanel Orientation="Horizontal">
                 <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
                 <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大2</RadioButton>
             </StackPanel>
         </Border>
         <TextBlock Text="Radio Button as Card" />
-        <StackPanel Width="300">
-            <RadioButton Theme="{DynamicResource CardRadioButton}">
+        <StackPanel Orientation="Horizontal">
+            <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
                 <StackPanel>
                     <TextBlock FontWeight="Bold">单选框标题</TextBlock>
                     <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                 </StackPanel>
             </RadioButton>
-            <RadioButton Theme="{DynamicResource CardRadioButton}">
+            <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
                 <StackPanel>
                     <TextBlock FontWeight="Bold">单选框标题</TextBlock>
                     <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                 </StackPanel>
             </RadioButton>
-            <RadioButton Theme="{DynamicResource CardRadioButton}">
+            <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
+                <StackPanel>
+                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                </StackPanel>
+            </RadioButton>
+        </StackPanel>
+        <TextBlock Text="Radio Button as Pure Card" />
+        <StackPanel Orientation="Horizontal">
+            <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
+                <StackPanel>
+                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                </StackPanel>
+            </RadioButton>
+            <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
+                <StackPanel>
+                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                </StackPanel>
+            </RadioButton>
+            <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
                 <StackPanel>
                     <TextBlock FontWeight="Bold">单选框标题</TextBlock>
                     <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
diff --git a/src/Semi.Avalonia/Controls/RadioButton.axaml b/src/Semi.Avalonia/Controls/RadioButton.axaml
index d2a5654..49ba2dc 100644
--- a/src/Semi.Avalonia/Controls/RadioButton.axaml
+++ b/src/Semi.Avalonia/Controls/RadioButton.axaml
@@ -1,7 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Design.PreviewWith>
-        <StackPanel>
-            <RadioButton Theme="{StaticResource ButtonRadioButton}">Hello Button</RadioButton>
+        <StackPanel Margin="20">
             <RadioButton>Hello Button2</RadioButton>
             <RadioButton>Hello Button3</RadioButton>
             <Border Theme="{StaticResource RadioButtonGroupBorder}">
@@ -10,14 +9,15 @@
                     <RadioButton Theme="{StaticResource ButtonRadioButton}">Hello Button3</RadioButton>
                 </StackPanel>
             </Border>
-            <RadioButton Theme="{StaticResource CardRadioButton}">Hello Button3</RadioButton>
-            <RadioButton Theme="{StaticResource CardRadioButton}">Hello Button3</RadioButton>
+            <RadioButton Theme="{StaticResource PureCardRadioButton}">Hello Button3</RadioButton>
+            <RadioButton Theme="{StaticResource PureCardRadioButton}">Hello Button3</RadioButton>
         </StackPanel>
     </Design.PreviewWith>
     <!--  Theme: Default, Button, Card, PureCard  -->
     <ControlTheme x:Key="{x:Type RadioButton}" TargetType="RadioButton">
         <Setter Property="RadioButton.HorizontalAlignment" Value="Left" />
         <Setter Property="RadioButton.VerticalAlignment" Value="Top" />
+        <Setter Property="RadioButton.Cursor" Value="Hand" />
         <Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
         <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
@@ -138,6 +138,7 @@
     <ControlTheme x:Key="ButtonRadioButton" TargetType="RadioButton">
         <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonButtonCornerRadius}" />
         <Setter Property="RadioButton.Margin" Value="2" />
+        <Setter Property="RadioButton.Cursor" Value="Hand" />
         <Setter Property="RadioButton.FontWeight" Value="{DynamicResource RadioButtonButtonFontWeight}" />
         <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonButtonDefaultFontSize}" />
         <Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonButtonDefaultPadding}" />
@@ -184,13 +185,14 @@
 
     <ControlTheme x:Key="CardRadioButton" TargetType="RadioButton">
         <Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonCardPadding}" />
-        <Setter Property="RadioButton.BorderBrush" Value="BLue" />
         <Setter Property="RadioButton.BorderThickness" Value="1" />
+        <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonCardCornerRadius}" />
+        <Setter Property="RadioButton.Cursor" Value="Hand" />
         <Setter Property="RadioButton.HorizontalAlignment" Value="Left" />
         <Setter Property="RadioButton.VerticalAlignment" Value="Top" />
         <Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
         <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
-        <Setter Property="RadioButton.Background" Value="Transparent" />
+        <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardDefaultBackground}" />
         <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="RadioButton">
@@ -239,6 +241,8 @@
 
         <!--  PointerOver State  -->
         <Style Selector="^:checked">
+            <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
+            <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
             <Style Selector="^ /template/ Ellipse#OuterEllipse">
                 <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
                 <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
@@ -253,19 +257,29 @@
             <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
                 <Setter Property="Ellipse.Opacity" Value="1" />
             </Style>
-            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointOverBorderBrush}" />
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
             </Style>
-            <Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
-            </Style>
-            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
-            </Style>
-            <Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
+            <Style Selector="^:pressed">
+                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
             </Style>
         </Style>
         <Style Selector="^:unchecked">
@@ -283,19 +297,72 @@
             <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
                 <Setter Property="Ellipse.Opacity" Value="0" />
             </Style>
-            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointOverBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointOverBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointOverBackground}" />
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointOverBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
             </Style>
-            <Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="0" />
+            <Style Selector="^:pressed">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
             </Style>
-            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="PureCardRadioButton" TargetType="RadioButton">
+        <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonCardCornerRadius}" />
+        <Setter Property="RadioButton.Cursor" Value="Hand" />
+        <Setter Property="RadioButton.BorderThickness" Value="1" />
+        <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
+        <Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonCardPadding}" />
+        <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonUncheckedForeground}" />
+        <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardDefaultBackground}" />
+        <Setter Property="RadioButton.Template">
+            <ControlTemplate TargetType="RadioButton">
+                <ContentPresenter
+                    x:Name="PART_ContentPresenter"
+                    Margin="{TemplateBinding Margin}"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    RecognizesAccessKey="True"
+                    TextElement.FontSize="{TemplateBinding FontSize}"
+                    TextElement.FontWeight="{TemplateBinding FontWeight}"
+                    UseLayoutRounding="False" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:checked">
+            <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
+            <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointOverBorderBrush}" />
             </Style>
-            <Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="0" />
+            <Style Selector="^:pressed">
+                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
+            </Style>
+        </Style>
+        <Style Selector="^:unchecked">
+            <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardDefaultBorderBrush}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointOverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
             </Style>
         </Style>
     </ControlTheme>
diff --git a/src/Semi.Avalonia/Themes/Light/RadioButton.axaml b/src/Semi.Avalonia/Themes/Light/RadioButton.axaml
index f3cc71a..63f99cc 100644
--- a/src/Semi.Avalonia/Themes/Light/RadioButton.axaml
+++ b/src/Semi.Avalonia/Themes/Light/RadioButton.axaml
@@ -51,4 +51,17 @@
 
     <Thickness x:Key="RadioButtonCardPadding">16 12</Thickness>
 
+    <SolidColorBrush x:Key="RadioButtonCardDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="RadioButtonCardDefaultBorderBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="RadioButtonCardCheckedBackground" Color="#EAF5FF" />
+    <SolidColorBrush x:Key="RadioButtonCardCheckDefaultBorderBrush" Color="#0077FA" />
+    <SolidColorBrush x:Key="RadioButtonCardCheckPointOverBorderBrush" Color="#0062D6" />
+    <SolidColorBrush x:Key="RadioButtonCardCheckPressedBorderBrush" Color="#004FB3" />
+    <SolidColorBrush x:Key="RadioButtonCardCheckDisabledBorderBrush" Color="#98CDFD" />
+    <SolidColorBrush x:Key="RadioButtonCardUncheckPointOverBackground" Opacity="0.05" Color="#2E3238" />
+    <SolidColorBrush x:Key="RadioButtonCardUncheckPressedBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="RadioButtonCardUncheckDisabledBackground" Opacity="0.05" Color="#2E3238" />
+
+    <CornerRadius x:Key="RadioButtonCardCornerRadius">3</CornerRadius>
+
 </ResourceDictionary>