From f0d0ed918ad56d51b1e3de2542f875e4857b4f32 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 17 Mar 2023 23:12:24 +0800
Subject: [PATCH 1/4] feat: add checkbox border style

---
 .../Pages/CheckBoxDemo.axaml                  |  86 +++++++--
 src/Semi.Avalonia/Controls/CheckBox.axaml     | 177 +++++++++++++++++-
 src/Semi.Avalonia/Themes/Dark/CheckBox.axaml  |  10 +
 src/Semi.Avalonia/Themes/Light/CheckBox.axaml |  11 ++
 4 files changed, 269 insertions(+), 15 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
index 3ae1044..789e110 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
@@ -7,18 +7,76 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Spacing="20">
-        <CheckBox>Unchecked</CheckBox>
-        <CheckBox IsEnabled="False">Unchecked</CheckBox>
-        <CheckBox IsChecked="True">Checked</CheckBox>
-        <CheckBox IsChecked="True" IsEnabled="False">Checked</CheckBox>
-        <CheckBox IsChecked="{x:Null}" IsThreeState="True">Indeterminate</CheckBox>
-        <CheckBox
-            IsChecked="{x:Null}"
-            IsEnabled="False"
-            IsThreeState="True">
-            Indeterminate
-        </CheckBox>
-        <CheckBox Width="120">Checkbox should wrap its text</CheckBox>
-    </StackPanel>
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left">
+            <CheckBox>Unchecked</CheckBox>
+            <CheckBox IsEnabled="False">Unchecked</CheckBox>
+            <CheckBox IsChecked="True">Checked</CheckBox>
+            <CheckBox IsChecked="True" IsEnabled="False">Checked</CheckBox>
+            <CheckBox IsChecked="{x:Null}" IsThreeState="True">Indeterminate</CheckBox>
+            <CheckBox
+                IsChecked="{x:Null}"
+                IsEnabled="False"
+                IsThreeState="True">
+                Indeterminate
+            </CheckBox>
+            <CheckBox Width="120">Checkbox should wrap its text</CheckBox>
+            <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
+                <StackPanel>
+                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                </StackPanel>
+            </CheckBox>
+            <CheckBox
+                Width="300"
+                IsChecked="True"
+                Theme="{DynamicResource CardCheckBox}">
+                <StackPanel>
+                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                </StackPanel>
+            </CheckBox>
+            <CheckBox
+                Width="300"
+                IsEnabled="False"
+                Theme="{DynamicResource CardCheckBox}">
+                <StackPanel>
+                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                </StackPanel>
+            </CheckBox>
+            <CheckBox
+                Width="300"
+                IsChecked="True"
+                IsEnabled="False"
+                Theme="{DynamicResource CardCheckBox}">
+                <StackPanel>
+                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                </StackPanel>
+            </CheckBox>
+            <CheckBox
+                Width="300"
+                IsChecked="{x:Null}"
+                IsEnabled="True"
+                IsThreeState="True"
+                Theme="{DynamicResource CardCheckBox}">
+                <StackPanel>
+                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                </StackPanel>
+            </CheckBox>
+            <CheckBox
+                Width="300"
+                IsChecked="{x:Null}"
+                IsEnabled="False"
+                IsThreeState="True"
+                Theme="{DynamicResource CardCheckBox}">
+                <StackPanel>
+                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                </StackPanel>
+            </CheckBox>
+        </StackPanel>
+    </ScrollViewer>
 </UserControl>
diff --git a/src/Semi.Avalonia/Controls/CheckBox.axaml b/src/Semi.Avalonia/Controls/CheckBox.axaml
index 3c03378..6f12fd2 100644
--- a/src/Semi.Avalonia/Controls/CheckBox.axaml
+++ b/src/Semi.Avalonia/Controls/CheckBox.axaml
@@ -4,8 +4,8 @@
     x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type CheckBox}" TargetType="CheckBox">
         <Setter Property="Padding" Value="8,0,0,0" />
-        <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="FontSize" Value="{DynamicResource CheckboxFontSize}" />
@@ -21,6 +21,7 @@
                         x:Name="PART_Border"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
+                        HorizontalAlignment="Center"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
@@ -175,4 +176,178 @@
             </Style>
         </Style>
     </ControlTheme>
+
+    <ControlTheme x:Key="CardCheckBox" TargetType="CheckBox">
+        <Setter Property="Padding" Value="{DynamicResource CheckboxCardPadding}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource CheckboxCardBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckboxCardCornerRadius}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="CheckBox.Template">
+            <ControlTemplate TargetType="CheckBox">
+                <Border
+                    Name="RootBorder"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
+                        <Grid Grid.Column="0" VerticalAlignment="Top">
+                            <Border
+                                x:Name="NormalRectangle"
+                                Width="{DynamicResource CheckboxBoxWidth}"
+                                Height="{DynamicResource CheckboxBoxHeight}"
+                                Background="{DynamicResource CheckboxDefaultBackground}"
+                                BorderBrush="{DynamicResource CheckboxDefaultBorderBrush}"
+                                BorderThickness="{DynamicResource CheckboxBoxBorderThickness}"
+                                CornerRadius="{DynamicResource CheckboxBoxCornerRadius}"
+                                UseLayoutRounding="False" />
+                            <PathIcon
+                                Name="CheckGlyph"
+                                Width="{DynamicResource CheckboxBoxGlyphWidth}"
+                                Height="{DynamicResource CheckboxBoxGlyphHeight}"
+                                Foreground="{DynamicResource CheckboxGlyphFill}" />
+
+                        </Grid>
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            Grid.Column="1"
+                            Margin="8,0,0,0"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            IsVisible="{TemplateBinding Content,
+                                                        Converter={x:Static ObjectConverters.IsNotNull}}"
+                            RecognizesAccessKey="True"
+                            TextWrapping="Wrap" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Unchecked PointerOver State  -->
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxPointOverBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="Background" Value="{DynamicResource CheckboxCardPointeroverBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Pressed State  -->
+        <Style Selector="^:pressed">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxPressedBorderBrush}" />
+            </Style>
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="Background" Value="{DynamicResource CheckboxCardPressedBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Disabled state  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+            </Style>
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxDefaultDisabledBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckboxDefaultDisabledBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckboxCardCheckedBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
+            </Style>
+
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked PointerOver State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPointOverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPointOverBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPressedBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDisabledBackground}" />
+                </Style>
+
+                <Style Selector="^ /template/ Path#CheckGlyph">
+                    <Setter Property="Fill" Value="{DynamicResource CheckboxGlyphDisabledFill}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:indeterminate">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
+            </Style>
+
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked PointerOver State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPointOverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPointOverBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPressedBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDisabledBackground}" />
+                </Style>
+
+                <Style Selector="^ /template/ Path#CheckGlyph">
+                    <Setter Property="Fill" Value="{DynamicResource CheckboxGlyphDisabledFill}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml b/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
index 1b0f815..e4aa3d7 100644
--- a/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
@@ -40,4 +40,14 @@
 
     <PathGeometry x:Key="CheckBoxCheckGlyph">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</PathGeometry>
     <PathGeometry x:Key="CheckBoxIndeterminateGlyph">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</PathGeometry>
+
+    <SolidColorBrush x:Key="CheckboxCardCheckedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="CheckboxCardCheckedBorderBrush" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="CheckboxCardCheckedDisabledBorderBrush" Color="#FF135CB8" />
+    <SolidColorBrush x:Key="CheckboxCardPointeroverBackground" Opacity="0.05" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="CheckboxCardPressedBackground" Opacity="0.09" Color="#FFFFFFFF" />
+
+    <Thickness x:Key="CheckboxCardBorderThickness">1</Thickness>
+    <Thickness x:Key="CheckboxCardPadding">16</Thickness>
+    <CornerRadius x:Key="CheckboxCardCornerRadius">3</CornerRadius>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/CheckBox.axaml b/src/Semi.Avalonia/Themes/Light/CheckBox.axaml
index b9d3302..a7762d4 100644
--- a/src/Semi.Avalonia/Themes/Light/CheckBox.axaml
+++ b/src/Semi.Avalonia/Themes/Light/CheckBox.axaml
@@ -40,4 +40,15 @@
 
     <PathGeometry x:Key="CheckBoxCheckGlyph">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</PathGeometry>
     <PathGeometry x:Key="CheckBoxIndeterminateGlyph">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</PathGeometry>
+
+    <SolidColorBrush x:Key="CheckboxCardCheckedBackground" Color="#FFEAF5FF" />
+    <SolidColorBrush x:Key="CheckboxCardCheckedBorderBrush" Color="#FF0077FA" />
+    <SolidColorBrush x:Key="CheckboxCardCheckedDisabledBorderBrush" Color="#FF98CDFD" />
+    <SolidColorBrush x:Key="CheckboxCardPointeroverBackground" Opacity="0.05" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="CheckboxCardPressedBackground" Opacity="0.09" Color="#FF2E3238" />
+
+    <Thickness x:Key="CheckboxCardBorderThickness">1</Thickness>
+    <Thickness x:Key="CheckboxCardPadding">16</Thickness>
+    <CornerRadius x:Key="CheckboxCardCornerRadius">3</CornerRadius>
+
 </ResourceDictionary>

From 309dc7ed23d2bdfe2ae93078b0869884dfa256c1 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 17 Mar 2023 23:20:39 +0800
Subject: [PATCH 2/4] feat: add pure card theme.

---
 .../Pages/CheckBoxDemo.axaml                  | 176 ++++++++++++------
 src/Semi.Avalonia/Controls/CheckBox.axaml     |  86 +++++++++
 2 files changed, 204 insertions(+), 58 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
index 789e110..172d2c7 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <ScrollViewer>
+    <ScrollViewer HorizontalScrollBarVisibility="Auto">
         <StackPanel HorizontalAlignment="Left">
             <CheckBox>Unchecked</CheckBox>
             <CheckBox IsEnabled="False">Unchecked</CheckBox>
@@ -20,63 +20,123 @@
                 IsThreeState="True">
                 Indeterminate
             </CheckBox>
-            <CheckBox Width="120">Checkbox should wrap its text</CheckBox>
-            <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </CheckBox>
-            <CheckBox
-                Width="300"
-                IsChecked="True"
-                Theme="{DynamicResource CardCheckBox}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </CheckBox>
-            <CheckBox
-                Width="300"
-                IsEnabled="False"
-                Theme="{DynamicResource CardCheckBox}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </CheckBox>
-            <CheckBox
-                Width="300"
-                IsChecked="True"
-                IsEnabled="False"
-                Theme="{DynamicResource CardCheckBox}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </CheckBox>
-            <CheckBox
-                Width="300"
-                IsChecked="{x:Null}"
-                IsEnabled="True"
-                IsThreeState="True"
-                Theme="{DynamicResource CardCheckBox}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </CheckBox>
-            <CheckBox
-                Width="300"
-                IsChecked="{x:Null}"
-                IsEnabled="False"
-                IsThreeState="True"
-                Theme="{DynamicResource CardCheckBox}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </CheckBox>
+            <CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsEnabled="True"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox Width="300" Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsEnabled="True"
+                    IsThreeState="True"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+            </StackPanel>
         </StackPanel>
     </ScrollViewer>
 </UserControl>
diff --git a/src/Semi.Avalonia/Controls/CheckBox.axaml b/src/Semi.Avalonia/Controls/CheckBox.axaml
index 6f12fd2..be6f058 100644
--- a/src/Semi.Avalonia/Controls/CheckBox.axaml
+++ b/src/Semi.Avalonia/Controls/CheckBox.axaml
@@ -308,6 +308,9 @@
         </Style>
 
         <Style Selector="^:indeterminate">
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
+            </Style>
             <Style Selector="^ /template/ Border#NormalRectangle">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" />
                 <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
@@ -336,6 +339,9 @@
 
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
+                </Style>
                 <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
                 </Style>
@@ -350,4 +356,84 @@
             </Style>
         </Style>
     </ControlTheme>
+
+    <ControlTheme x:Key="PureCardCheckBox" TargetType="CheckBox">
+        <Setter Property="Padding" Value="{DynamicResource CheckboxCardPadding}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource CheckboxCardBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckboxCardCornerRadius}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="CheckBox.Template">
+            <ControlTemplate TargetType="CheckBox">
+                <Border
+                    Name="RootBorder"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <ContentPresenter
+                        x:Name="ContentPresenter"
+                        Grid.Column="1"
+                        Margin="8,0,0,0"
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="Center"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        IsVisible="{TemplateBinding Content,
+                                                    Converter={x:Static ObjectConverters.IsNotNull}}"
+                        RecognizesAccessKey="True"
+                        TextWrapping="Wrap" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Unchecked PointerOver State  -->
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="Background" Value="{DynamicResource CheckboxCardPointeroverBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Pressed State  -->
+        <Style Selector="^:pressed">
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="Background" Value="{DynamicResource CheckboxCardPressedBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Disabled state  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckboxCardCheckedBackground}" />
+            </Style>
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:indeterminate">
+            <!--  Checked Disabled State  -->
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
+            </Style>
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>

From 261e17abcd25f565737c7542815ce52eed2ac183 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 17 Mar 2023 23:32:28 +0800
Subject: [PATCH 3/4] misc: update demo.

---
 demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
index 172d2c7..7adda8c 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
@@ -21,7 +21,8 @@
                 Indeterminate
             </CheckBox>
             <CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
-            <StackPanel Orientation="Horizontal">
+            <TextBlock Margin="0,16" Text="CardCheckBox" />
+            <StackPanel Orientation="Vertical">
                 <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">复选框标题</TextBlock>
@@ -79,7 +80,8 @@
                     </StackPanel>
                 </CheckBox>
             </StackPanel>
-            <StackPanel Orientation="Horizontal">
+            <TextBlock Margin="0,16" Text="PureCardCheckBox" />
+            <StackPanel Orientation="Vertical">
                 <CheckBox Width="300" Theme="{DynamicResource PureCardCheckBox}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">复选框标题</TextBlock>

From d5d3e085f7ea571eb34fdce3cbbfa124629dba82 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Sat, 18 Mar 2023 00:00:57 +0800
Subject: [PATCH 4/4] fix: fix various color issue. fix checkbox naming.

---
 src/Semi.Avalonia/Controls/CheckBox.axaml     | 219 ++++++++++--------
 src/Semi.Avalonia/Themes/Dark/CheckBox.axaml  |  76 +++---
 .../Themes/Dark/RadioButton.axaml             |   2 +-
 src/Semi.Avalonia/Themes/Light/CheckBox.axaml |  76 +++---
 4 files changed, 202 insertions(+), 171 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/CheckBox.axaml b/src/Semi.Avalonia/Controls/CheckBox.axaml
index be6f058..4560c8b 100644
--- a/src/Semi.Avalonia/Controls/CheckBox.axaml
+++ b/src/Semi.Avalonia/Controls/CheckBox.axaml
@@ -8,12 +8,13 @@
         <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="FontSize" Value="{DynamicResource CheckboxFontSize}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CheckboxBoxCornerRadius}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
         <Setter Property="MinHeight" Value="32" />
-        <Setter Property="Foreground" Value="{DynamicResource CheckboxForeground}" />
-        <Setter Property="Background" Value="{DynamicResource CheckboxDefaultBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource CheckboxDefaultBorderBrush}" />
+        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForeground}" />
+        <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
@@ -33,18 +34,18 @@
                         VerticalAlignment="Center">
                         <Border
                             x:Name="NormalRectangle"
-                            Width="{DynamicResource CheckboxBoxWidth}"
-                            Height="{DynamicResource CheckboxBoxHeight}"
-                            Background="{DynamicResource CheckboxDefaultBackground}"
-                            BorderBrush="{DynamicResource CheckboxDefaultBorderBrush}"
-                            BorderThickness="{DynamicResource CheckboxBoxBorderThickness}"
+                            Width="{DynamicResource CheckBoxBoxWidth}"
+                            Height="{DynamicResource CheckBoxBoxHeight}"
+                            Background="{DynamicResource CheckBoxDefaultBackground}"
+                            BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
+                            BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
                             CornerRadius="{TemplateBinding CornerRadius}"
                             UseLayoutRounding="False" />
                         <PathIcon
                             Name="CheckGlyph"
-                            Width="{DynamicResource CheckboxBoxGlyphWidth}"
-                            Height="{DynamicResource CheckboxBoxGlyphHeight}"
-                            Foreground="{DynamicResource CheckboxGlyphFill}" />
+                            Width="{DynamicResource CheckBoxBoxGlyphWidth}"
+                            Height="{DynamicResource CheckBoxBoxGlyphHeight}"
+                            Foreground="{DynamicResource CheckBoxGlyphFill}" />
 
                     </Grid>
                     <ContentPresenter
@@ -66,34 +67,34 @@
         <!--  Unchecked PointerOver State  -->
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxPointOverBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxPointOverBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointOverBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxPointOverBackground}" />
             </Style>
         </Style>
 
         <!--  Unchecked Pressed State  -->
         <Style Selector="^:pressed">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxPressedBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxPressedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxPressedBackground}" />
             </Style>
         </Style>
 
         <!--  Unchecked Disabled state  -->
         <Style Selector="^:disabled">
             <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
             </Style>
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxDefaultDisabledBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxDefaultDisabledBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
             </Style>
         </Style>
 
         <Style Selector="^:checked">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
             </Style>
 
             <Style Selector="^ /template/ PathIcon#CheckGlyph">
@@ -104,39 +105,39 @@
             <!--  Checked PointerOver State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPointOverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPointOverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointOverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointOverBackground}" />
                 </Style>
             </Style>
 
             <!--  Checked Pressed State  -->
             <Style Selector="^:pressed">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPressedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
                 </Style>
             </Style>
 
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDisabledBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
 
                 <Style Selector="^ /template/ Path#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckboxGlyphDisabledFill}" />
+                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
                 </Style>
             </Style>
         </Style>
 
         <Style Selector="^:indeterminate">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
             </Style>
 
             <Style Selector="^ /template/ PathIcon#CheckGlyph">
@@ -147,40 +148,41 @@
             <!--  Checked PointerOver State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPointOverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPointOverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointOverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointOverBackground}" />
                 </Style>
             </Style>
 
             <!--  Checked Pressed State  -->
             <Style Selector="^:pressed">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPressedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
                 </Style>
             </Style>
 
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDisabledBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
 
                 <Style Selector="^ /template/ Path#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckboxGlyphDisabledFill}" />
+                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
                 </Style>
             </Style>
         </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="CardCheckBox" TargetType="CheckBox">
-        <Setter Property="Padding" Value="{DynamicResource CheckboxCardPadding}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource CheckboxCardBorderThickness}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CheckboxCardCornerRadius}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Padding" Value="{DynamicResource CheckBoxCardPadding}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxCardCornerRadius}" />
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="CheckBox.Template">
             <ControlTemplate TargetType="CheckBox">
@@ -195,18 +197,18 @@
                         <Grid Grid.Column="0" VerticalAlignment="Top">
                             <Border
                                 x:Name="NormalRectangle"
-                                Width="{DynamicResource CheckboxBoxWidth}"
-                                Height="{DynamicResource CheckboxBoxHeight}"
-                                Background="{DynamicResource CheckboxDefaultBackground}"
-                                BorderBrush="{DynamicResource CheckboxDefaultBorderBrush}"
-                                BorderThickness="{DynamicResource CheckboxBoxBorderThickness}"
-                                CornerRadius="{DynamicResource CheckboxBoxCornerRadius}"
+                                Width="{DynamicResource CheckBoxBoxWidth}"
+                                Height="{DynamicResource CheckBoxBoxHeight}"
+                                Background="{DynamicResource CheckBoxDefaultBackground}"
+                                BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
+                                BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
+                                CornerRadius="{DynamicResource CheckBoxBoxCornerRadius}"
                                 UseLayoutRounding="False" />
                             <PathIcon
                                 Name="CheckGlyph"
-                                Width="{DynamicResource CheckboxBoxGlyphWidth}"
-                                Height="{DynamicResource CheckboxBoxGlyphHeight}"
-                                Foreground="{DynamicResource CheckboxGlyphFill}" />
+                                Width="{DynamicResource CheckBoxBoxGlyphWidth}"
+                                Height="{DynamicResource CheckBoxBoxGlyphHeight}"
+                                Foreground="{DynamicResource CheckBoxGlyphFill}" />
 
                         </Grid>
                         <ContentPresenter
@@ -229,42 +231,42 @@
         <!--  Unchecked PointerOver State  -->
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxPointOverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointOverBorderBrush}" />
             </Style>
             <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="Background" Value="{DynamicResource CheckboxCardPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
             </Style>
         </Style>
 
         <!--  Unchecked Pressed State  -->
         <Style Selector="^:pressed">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxPressedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
             </Style>
             <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="Background" Value="{DynamicResource CheckboxCardPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
             </Style>
         </Style>
 
         <!--  Unchecked Disabled state  -->
         <Style Selector="^:disabled">
             <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
             </Style>
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxDefaultDisabledBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxDefaultDisabledBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
             </Style>
         </Style>
 
         <Style Selector="^:checked">
             <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxCardCheckedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
             </Style>
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
             </Style>
 
             <Style Selector="^ /template/ PathIcon#CheckGlyph">
@@ -275,45 +277,51 @@
             <!--  Checked PointerOver State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPointOverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPointOverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointOverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointOverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
                 </Style>
             </Style>
 
             <!--  Checked Pressed State  -->
             <Style Selector="^:pressed">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPressedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
                 </Style>
             </Style>
 
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ Border#RootBorder">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
                 <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDisabledBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
 
                 <Style Selector="^ /template/ Path#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckboxGlyphDisabledFill}" />
+                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
                 </Style>
             </Style>
         </Style>
 
         <Style Selector="^:indeterminate">
             <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
             </Style>
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
             </Style>
 
             <Style Selector="^ /template/ PathIcon#CheckGlyph">
@@ -324,43 +332,50 @@
             <!--  Checked PointerOver State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPointOverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPointOverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointOverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointOverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
                 </Style>
             </Style>
 
             <!--  Checked Pressed State  -->
             <Style Selector="^:pressed">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedPressedBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedPressedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
                 </Style>
             </Style>
 
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ Border#RootBorder">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
                 <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDisabledBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDisabledBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
                 </Style>
 
                 <Style Selector="^ /template/ Path#CheckGlyph">
-                    <Setter Property="Fill" Value="{DynamicResource CheckboxGlyphDisabledFill}" />
+                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
                 </Style>
             </Style>
         </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="PureCardCheckBox" TargetType="CheckBox">
-        <Setter Property="Padding" Value="{DynamicResource CheckboxCardPadding}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource CheckboxCardBorderThickness}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource CheckboxCardCornerRadius}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Padding" Value="{DynamicResource CheckBoxCardPadding}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxCardCornerRadius}" />
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="CheckBox.Template">
             <ControlTemplate TargetType="CheckBox">
@@ -390,36 +405,42 @@
         <!--  Unchecked PointerOver State  -->
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="Background" Value="{DynamicResource CheckboxCardPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
             </Style>
         </Style>
 
         <!--  Unchecked Pressed State  -->
         <Style Selector="^:pressed">
             <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="Background" Value="{DynamicResource CheckboxCardPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
             </Style>
         </Style>
 
         <!--  Unchecked Disabled state  -->
         <Style Selector="^:disabled">
             <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
             </Style>
         </Style>
 
         <Style Selector="^:checked">
             <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckboxCardCheckedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
             </Style>
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ Border#RootBorder">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
                 <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                    <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
             </Style>
         </Style>
@@ -427,11 +448,17 @@
         <Style Selector="^:indeterminate">
             <!--  Checked Disabled State  -->
             <Style Selector="^ /template/ Border#RootBorder">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
             </Style>
             <Style Selector="^:disabled">
                 <Style Selector="^ /template/ Border#RootBorder">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
             </Style>
         </Style>
diff --git a/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml b/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
index e4aa3d7..05fdd25 100644
--- a/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
@@ -2,52 +2,54 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime">
-    <SolidColorBrush x:Key="CheckboxForeground" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="CheckboxDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CheckBoxForeground" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CheckBoxDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
 
-    <SolidColorBrush x:Key="CheckboxGlyphFill" Color="#16161A" />
-    <SolidColorBrush x:Key="CheckboxGlyphDisabledFill" Color="#16161A" />
+    <SolidColorBrush x:Key="CheckBoxGlyphFill" Color="White" />
+    <SolidColorBrush x:Key="CheckBoxGlyphDisabledFill" Color="White" />
 
-    <SolidColorBrush x:Key="CheckboxDefaultBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="CheckboxDefaultBorderBrush" Opacity="0.35" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="CheckboxPointOverBackground" Opacity="0.12" Color="White" />
-    <SolidColorBrush x:Key="CheckboxPointOverBorderBrush" Color="#54A9FF" />
-    <SolidColorBrush x:Key="CheckboxPressedBackground" Color="#A9D7FF" />
-    <SolidColorBrush x:Key="CheckboxPressedBorderBrush" Color="#A9D7FF" />
+    <SolidColorBrush x:Key="CheckBoxDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="CheckBoxDefaultBorderBrush" Opacity="0.35" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CheckBoxPointOverBackground" Opacity="0.12" Color="White" />
+    <SolidColorBrush x:Key="CheckBoxPointOverBorderBrush" Color="#54A9FF" />
+    <SolidColorBrush x:Key="CheckBoxPressedBackground" Color="#A9D7FF" />
+    <SolidColorBrush x:Key="CheckBoxPressedBorderBrush" Color="#A9D7FF" />
 
-    <SolidColorBrush x:Key="CheckboxCheckedDefaultBackground" Color="#54A9FF" />
-    <SolidColorBrush x:Key="CheckboxCheckedDefaultBorderBrush" Color="#54A9FF" />
-    <SolidColorBrush x:Key="CheckboxCheckedPointOverBackground" Color="#7FC1FF" />
-    <SolidColorBrush x:Key="CheckboxCheckedPointOverBorderBrush" Color="#7FC1FF" />
-    <SolidColorBrush x:Key="CheckboxCheckedPressedBackground" Color="#A9D7FF" />
-    <SolidColorBrush x:Key="CheckboxCheckedPressedBorderBrush" Color="#A9D7FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedDefaultBackground" Color="#54A9FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedDefaultBorderBrush" Color="#54A9FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPointOverBackground" Color="#7FC1FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPointOverBorderBrush" Color="#7FC1FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPressedBackground" Color="#A9D7FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPressedBorderBrush" Color="#A9D7FF" />
 
-    <SolidColorBrush x:Key="CheckboxDefaultDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
-    <SolidColorBrush x:Key="CheckboxDefaultDisabledBorderBrush" Opacity="0.08" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="CheckboxCheckedDisabledBackground" Color="#135cb8" />
-    <SolidColorBrush x:Key="CheckboxCheckedDisabledBorderBrush" Color="#135cb8" />
+    <SolidColorBrush x:Key="CheckBoxDefaultDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
+    <SolidColorBrush x:Key="CheckBoxDefaultDisabledBorderBrush" Opacity="0.08" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="CheckBoxCheckedDisabledBackground" Color="#135cb8" />
+    <SolidColorBrush x:Key="CheckBoxCheckedDisabledBorderBrush" Color="#135cb8" />
 
-    <sys:Double x:Key="CheckboxFontSize">14</sys:Double>
-    <sys:Double x:Key="CheckboxBoxWidth">16</sys:Double>
-    <sys:Double x:Key="CheckboxBoxHeight">16</sys:Double>
-    <sys:Double x:Key="CheckboxBoxGlyphWidth">12</sys:Double>
-    <sys:Double x:Key="CheckboxBoxGlyphHeight">12</sys:Double>
-    <FontWeight x:Key="CheckboxFontWeight">400</FontWeight>
+    <sys:Double x:Key="CheckBoxFontSize">14</sys:Double>
+    <sys:Double x:Key="CheckBoxBoxWidth">16</sys:Double>
+    <sys:Double x:Key="CheckBoxBoxHeight">16</sys:Double>
+    <sys:Double x:Key="CheckBoxBoxGlyphWidth">10</sys:Double>
+    <sys:Double x:Key="CheckBoxBoxGlyphHeight">10</sys:Double>
+    <FontWeight x:Key="CheckBoxFontWeight">400</FontWeight>
 
-    <CornerRadius x:Key="CheckboxBoxCornerRadius">3</CornerRadius>
-    <Thickness x:Key="CheckboxContentMargin">8 0 0 0</Thickness>
-    <Thickness x:Key="CheckboxBoxBorderThickness">1</Thickness>
+    <CornerRadius x:Key="CheckBoxBoxCornerRadius">3</CornerRadius>
+    <Thickness x:Key="CheckBoxContentMargin">8 0 0 0</Thickness>
+    <Thickness x:Key="CheckBoxBoxBorderThickness">1</Thickness>
 
     <PathGeometry x:Key="CheckBoxCheckGlyph">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</PathGeometry>
     <PathGeometry x:Key="CheckBoxIndeterminateGlyph">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</PathGeometry>
 
-    <SolidColorBrush x:Key="CheckboxCardCheckedBackground" Opacity="0.2" Color="#FF54A9FF" />
-    <SolidColorBrush x:Key="CheckboxCardCheckedBorderBrush" Color="#FF54A9FF" />
-    <SolidColorBrush x:Key="CheckboxCardCheckedDisabledBorderBrush" Color="#FF135CB8" />
-    <SolidColorBrush x:Key="CheckboxCardPointeroverBackground" Opacity="0.05" Color="#FFFFFFFF" />
-    <SolidColorBrush x:Key="CheckboxCardPressedBackground" Opacity="0.09" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedBorderBrush" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedDisabledBorderBrush" Color="#FF135CB8" />
+    <SolidColorBrush x:Key="CheckBoxCardPointeroverBackground" Opacity="0.05" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="CheckBoxCardPressedBackground" Opacity="0.09" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedPointeroverBorderBrush" Color="#FF7FC1FF" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedPressedBorderBrush" Color="#FFA9D7FF" />
 
-    <Thickness x:Key="CheckboxCardBorderThickness">1</Thickness>
-    <Thickness x:Key="CheckboxCardPadding">16</Thickness>
-    <CornerRadius x:Key="CheckboxCardCornerRadius">3</CornerRadius>
+    <Thickness x:Key="CheckBoxCardBorderThickness">1</Thickness>
+    <Thickness x:Key="CheckBoxCardPadding">16</Thickness>
+    <CornerRadius x:Key="CheckBoxCardCornerRadius">3</CornerRadius>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Dark/RadioButton.axaml b/src/Semi.Avalonia/Themes/Dark/RadioButton.axaml
index 8ca35e3..ffe3010 100644
--- a/src/Semi.Avalonia/Themes/Dark/RadioButton.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/RadioButton.axaml
@@ -28,7 +28,7 @@
     <SolidColorBrush x:Key="RadioButtonCheckIconPressedBorderBrush" Color="#A9D7FF" />
     <SolidColorBrush x:Key="RadioButtonCheckIconDisabledBorderBrush" Color="#135cb8" />
 
-    <SolidColorBrush x:Key="RadioButtonCheckGlyphFill" Color="#16161A" />
+    <SolidColorBrush x:Key="RadioButtonCheckGlyphFill" Color="White" />
 
     <SolidColorBrush x:Key="RadioButtonForeground" Color="#F9F9F9" />
 
diff --git a/src/Semi.Avalonia/Themes/Light/CheckBox.axaml b/src/Semi.Avalonia/Themes/Light/CheckBox.axaml
index a7762d4..b11de2d 100644
--- a/src/Semi.Avalonia/Themes/Light/CheckBox.axaml
+++ b/src/Semi.Avalonia/Themes/Light/CheckBox.axaml
@@ -2,53 +2,55 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime">
-    <SolidColorBrush x:Key="CheckboxForeground" Color="#1C1F23" />
-    <SolidColorBrush x:Key="CheckboxDisabledForeground" Opacity="0.35" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CheckBoxForeground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CheckBoxDisabledForeground" Opacity="0.35" Color="#1C1F23" />
 
-    <SolidColorBrush x:Key="CheckboxGlyphFill" Color="White" />
-    <SolidColorBrush x:Key="CheckboxGlyphDisabledFill" Color="White" />
+    <SolidColorBrush x:Key="CheckBoxGlyphFill" Color="White" />
+    <SolidColorBrush x:Key="CheckBoxGlyphDisabledFill" Color="White" />
 
-    <SolidColorBrush x:Key="CheckboxDefaultBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="CheckboxDefaultBorderBrush" Opacity="0.35" Color="#1C1F23" />
-    <SolidColorBrush x:Key="CheckboxPointOverBackground" Opacity="0.05" Color="#2E3238" />
-    <SolidColorBrush x:Key="CheckboxPointOverBorderBrush" Color="#0077FA" />
-    <SolidColorBrush x:Key="CheckboxPressedBackground" Color="#004FB3" />
-    <SolidColorBrush x:Key="CheckboxPressedBorderBrush" Color="#004FB3" />
+    <SolidColorBrush x:Key="CheckBoxDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="CheckBoxDefaultBorderBrush" Opacity="0.35" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CheckBoxPointOverBackground" Opacity="0.05" Color="#2E3238" />
+    <SolidColorBrush x:Key="CheckBoxPointOverBorderBrush" Color="#0077FA" />
+    <SolidColorBrush x:Key="CheckBoxPressedBackground" Color="#004FB3" />
+    <SolidColorBrush x:Key="CheckBoxPressedBorderBrush" Color="#004FB3" />
 
-    <SolidColorBrush x:Key="CheckboxCheckedDefaultBackground" Color="#0077FA" />
-    <SolidColorBrush x:Key="CheckboxCheckedDefaultBorderBrush" Color="#0077FA" />
-    <SolidColorBrush x:Key="CheckboxCheckedPointOverBackground" Color="#0062D6" />
-    <SolidColorBrush x:Key="CheckboxCheckedPointOverBorderBrush" Color="#0062D6" />
-    <SolidColorBrush x:Key="CheckboxCheckedPressedBackground" Color="#004FB3" />
-    <SolidColorBrush x:Key="CheckboxCheckedPressedBorderBrush" Color="#004FB3" />
+    <SolidColorBrush x:Key="CheckBoxCheckedDefaultBackground" Color="#0077FA" />
+    <SolidColorBrush x:Key="CheckBoxCheckedDefaultBorderBrush" Color="#0077FA" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPointOverBackground" Color="#0062D6" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPointOverBorderBrush" Color="#0062D6" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPressedBackground" Color="#004FB3" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPressedBorderBrush" Color="#004FB3" />
 
-    <SolidColorBrush x:Key="CheckboxDefaultDisabledBackground" Opacity="0.02" Color="#2E3238" />
-    <SolidColorBrush x:Key="CheckboxDefaultDisabledBorderBrush" Opacity="0.08" Color="#1C1F23" />
-    <SolidColorBrush x:Key="CheckboxCheckedDisabledBackground" Color="#98CDFD" />
-    <SolidColorBrush x:Key="CheckboxCheckedDisabledBorderBrush" Color="#98CDFD" />
+    <SolidColorBrush x:Key="CheckBoxDefaultDisabledBackground" Opacity="0.02" Color="#2E3238" />
+    <SolidColorBrush x:Key="CheckBoxDefaultDisabledBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="CheckBoxCheckedDisabledBackground" Color="#98CDFD" />
+    <SolidColorBrush x:Key="CheckBoxCheckedDisabledBorderBrush" Color="#98CDFD" />
 
-    <sys:Double x:Key="CheckboxFontSize">14</sys:Double>
-    <sys:Double x:Key="CheckboxBoxWidth">16</sys:Double>
-    <sys:Double x:Key="CheckboxBoxHeight">16</sys:Double>
-    <sys:Double x:Key="CheckboxBoxGlyphWidth">12</sys:Double>
-    <sys:Double x:Key="CheckboxBoxGlyphHeight">12</sys:Double>
-    <FontWeight x:Key="CheckboxFontWeight">400</FontWeight>
+    <sys:Double x:Key="CheckBoxFontSize">14</sys:Double>
+    <sys:Double x:Key="CheckBoxBoxWidth">16</sys:Double>
+    <sys:Double x:Key="CheckBoxBoxHeight">16</sys:Double>
+    <sys:Double x:Key="CheckBoxBoxGlyphWidth">10</sys:Double>
+    <sys:Double x:Key="CheckBoxBoxGlyphHeight">10</sys:Double>
+    <FontWeight x:Key="CheckBoxFontWeight">400</FontWeight>
 
-    <CornerRadius x:Key="CheckboxBoxCornerRadius">3</CornerRadius>
-    <Thickness x:Key="CheckboxContentMargin">8 0 0 0</Thickness>
-    <Thickness x:Key="CheckboxBoxBorderThickness">1</Thickness>
+    <CornerRadius x:Key="CheckBoxBoxCornerRadius">3</CornerRadius>
+    <Thickness x:Key="CheckBoxContentMargin">8 0 0 0</Thickness>
+    <Thickness x:Key="CheckBoxBoxBorderThickness">1</Thickness>
 
     <PathGeometry x:Key="CheckBoxCheckGlyph">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</PathGeometry>
     <PathGeometry x:Key="CheckBoxIndeterminateGlyph">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</PathGeometry>
 
-    <SolidColorBrush x:Key="CheckboxCardCheckedBackground" Color="#FFEAF5FF" />
-    <SolidColorBrush x:Key="CheckboxCardCheckedBorderBrush" Color="#FF0077FA" />
-    <SolidColorBrush x:Key="CheckboxCardCheckedDisabledBorderBrush" Color="#FF98CDFD" />
-    <SolidColorBrush x:Key="CheckboxCardPointeroverBackground" Opacity="0.05" Color="#FF2E3238" />
-    <SolidColorBrush x:Key="CheckboxCardPressedBackground" Opacity="0.09" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedBackground" Color="#FFEAF5FF" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedBorderBrush" Color="#FF0077FA" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedDisabledBorderBrush" Color="#FF98CDFD" />
+    <SolidColorBrush x:Key="CheckBoxCardPointeroverBackground" Opacity="0.05" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="CheckBoxCardPressedBackground" Opacity="0.09" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedPointeroverBorderBrush" Color="#FF0062D6" />
+    <SolidColorBrush x:Key="CheckBoxCardCheckedPressedBorderBrush" Color="#FF004FB3" />
 
-    <Thickness x:Key="CheckboxCardBorderThickness">1</Thickness>
-    <Thickness x:Key="CheckboxCardPadding">16</Thickness>
-    <CornerRadius x:Key="CheckboxCardCornerRadius">3</CornerRadius>
+    <Thickness x:Key="CheckBoxCardBorderThickness">1</Thickness>
+    <Thickness x:Key="CheckBoxCardPadding">16</Thickness>
+    <CornerRadius x:Key="CheckBoxCardCornerRadius">3</CornerRadius>
 
 </ResourceDictionary>