From 52e57b14fd3f3e1e3252410764d3a81fe57e2281 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Thu, 9 Feb 2023 18:43:02 +0800
Subject: [PATCH] feat: Add color picker themes.

---
 demo/Semi.Avalonia.Demo.Desktop/App.axaml     |   1 +
 .../Pages/ColorPickerDemo.axaml               |  37 ++
 .../Pages/ColorPickerDemo.axaml.cs            |  13 +
 .../Pages/DatePickerDemo.axaml.cs             |   6 +
 .../Semi.Avalonia.Demo.csproj                 |   1 +
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  |   3 +
 .../ColorPicker.axaml                         |   3 -
 .../Controls/ColorPicker.axaml                | 440 ++++++++++++++
 .../Controls/ColorPreviewer.axaml             | 118 ++++
 .../Controls/ColorSlider.axaml                | 220 +++++++
 .../Controls/ColorSpectrum.axaml              | 166 ++++++
 .../Controls/ColorView.axaml                  | 558 ++++++++++++++++++
 src/Semi.Avalonia.ColorPicker/Index.axaml     |  15 +-
 src/Semi.Avalonia.ColorPicker/Light.axaml     |  38 ++
 .../Semi.Avalonia.ColorPicker.csproj          |   1 +
 .../Controls/NumericUpDown.axaml              |   5 +-
 src/Semi.Avalonia/Controls/TextBox.axaml      |   2 +-
 .../Themes/Dark/NumericUpDown.axaml           |   1 +
 .../Themes/Light/NumericUpDown.axaml          |   1 +
 19 files changed, 1621 insertions(+), 8 deletions(-)
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml.cs
 delete mode 100644 src/Semi.Avalonia.ColorPicker/ColorPicker.axaml
 create mode 100644 src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
 create mode 100644 src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
 create mode 100644 src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml
 create mode 100644 src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml
 create mode 100644 src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml

diff --git a/demo/Semi.Avalonia.Demo.Desktop/App.axaml b/demo/Semi.Avalonia.Demo.Desktop/App.axaml
index 098f598..cb85fcd 100644
--- a/demo/Semi.Avalonia.Demo.Desktop/App.axaml
+++ b/demo/Semi.Avalonia.Demo.Desktop/App.axaml
@@ -7,5 +7,6 @@
         <!--<StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />-->
         <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
         <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+        <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
     </Application.Styles>
 </Application>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
new file mode 100644
index 0000000..5435065
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
@@ -0,0 +1,37 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
+    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>
+        <StackPanel
+            VerticalAlignment="Top"
+            Orientation="Horizontal"
+            Spacing="20">
+            <ColorView ColorSpectrumShape="Ring" />
+            <ColorView ColorSpectrumShape="Box" />
+            <ColorView>
+                <ColorView.Palette>
+                    <controls:MaterialColorPalette />
+                </ColorView.Palette>
+            </ColorView>
+        </StackPanel>
+        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+            <ColorPicker ColorSpectrumShape="Ring">
+                <ColorPicker.Palette>
+                    <controls:FlatHalfColorPalette />
+                </ColorPicker.Palette>
+            </ColorPicker>
+            <ColorPicker ColorSpectrumShape="Box">
+                <ColorPicker.Palette>
+                    <controls:MaterialColorPalette />
+                </ColorPicker.Palette>
+            </ColorPicker>
+        </StackPanel>
+    </StackPanel>
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml.cs
new file mode 100644
index 0000000..6dbfeca
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml.cs
@@ -0,0 +1,13 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class ColorPickerDemo : UserControl
+{
+    public ColorPickerDemo()
+    {
+        InitializeComponent();
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml.cs
index 6f9e209..9d7ae48 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml.cs
@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using Avalonia.Media;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -15,4 +16,9 @@ public partial class DatePickerDemo : UserControl
     {
         AvaloniaXamlLoader.Load(this);
     }
+
+    public override void Render(DrawingContext context)
+    {
+        base.Render(context);
+    }
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj b/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
index 9ef211d..7d026cc 100644
--- a/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
+++ b/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
@@ -43,6 +43,7 @@
     </ItemGroup>
 
     <ItemGroup>
+      <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj" />
       <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj" />
       <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
     </ItemGroup>
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index 158e608..c74524b 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -39,6 +39,9 @@
         <TabItem Header="CheckBox">
             <pages:CheckBoxDemo />
         </TabItem>
+        <TabItem Header="ColorPicker">
+            <pages:ColorPickerDemo />
+        </TabItem>
         <TabItem Header="ComboBox">
             <pages:ComboBoxDemo />
         </TabItem>
diff --git a/src/Semi.Avalonia.ColorPicker/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/ColorPicker.axaml
deleted file mode 100644
index 9017e8d..0000000
--- a/src/Semi.Avalonia.ColorPicker/ColorPicker.axaml
+++ /dev/null
@@ -1,3 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
-</ResourceDictionary>
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
new file mode 100644
index 0000000..2ff2d82
--- /dev/null
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -0,0 +1,440 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
+    xmlns:converters="using:Avalonia.Controls.Converters"
+    xmlns:primitives="using:Avalonia.Controls.Primitives">
+    <!--  Add Resources Here  -->
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorView.axaml" />
+    </ResourceDictionary.MergedDictionaries>
+
+    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
+    <converters:ToBrushConverter x:Key="ToBrushConverter" />
+
+    <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="Height" Value="32" />
+        <Setter Property="Width" Value="64" />
+        <Setter Property="MinWidth" Value="64" />
+        <Setter Property="Palette">
+            <controls:FluentColorPalette />
+        </Setter>
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ColorPicker}">
+                <DropDownButton
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Padding="0,0,10,0"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    ClipToBounds="True"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    UseLayoutRounding="False">
+                    <DropDownButton.Styles>
+                        <Style Selector="FlyoutPresenter.nopadding">
+                            <Setter Property="Padding" Value="0" />
+                        </Style>
+                    </DropDownButton.Styles>
+                    <DropDownButton.Content>
+                        <!--  Preview color  -->
+                        <Panel>
+                            <Border
+                                Margin="1,1,0,1"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                                CornerRadius="{TemplateBinding CornerRadius,
+                                                               Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+                            <Border
+                                Margin="1,1,0,1"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource ToBrushConverter}}"
+                                CornerRadius="{TemplateBinding CornerRadius,
+                                                               Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+                        </Panel>
+                    </DropDownButton.Content>
+                    <DropDownButton.Flyout>
+                        <Flyout FlyoutPresenterClasses="nopadding" Placement="Auto">
+
+                            <!--
+                                The following is copy-pasted from the ColorView's control template.
+                                It MUST always be kept in sync with the ColorView (which is master).
+                                Note the only changes are resources specific to the ColorPicker.
+                            -->
+                            <Grid
+                                Width="300"
+                                Height="300"
+                                RowDefinitions="*,Auto">
+                                <!--  Backgrounds  -->
+                                <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
+                                <Border
+                                    x:Name="ContentBackgroundBorder"
+                                    Grid.Row="0"
+                                    Grid.RowSpan="2"
+                                    Height="{TemplateBinding Height}"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    Background="{DynamicResource ColorViewContentBackgroundBrush}"
+                                    BorderBrush="{DynamicResource ColorViewContentBorderBrush}"
+                                    BorderThickness="0,1,0,0"
+                                    CornerRadius="{TemplateBinding CornerRadius}" />
+
+                                <TabControl
+                                    x:Name="PART_TabControl"
+                                    Grid.Row="0"
+                                    Padding="0"
+                                    VerticalAlignment="Stretch"
+                                    HorizontalContentAlignment="Stretch"
+                                    SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                                    <TabControl.Styles>
+                                        <Style Selector="TabItem">
+                                            <Setter Property="MinHeight" Value="32" />
+                                        </Style>
+                                        <Style Selector="TabItem:selected">
+                                            <Setter Property="Foreground" Value="{DynamicResource ColorViewTabItemSelectedForeground}" />
+                                        </Style>
+                                    </TabControl.Styles>
+                                    <TabControl.ItemsPanel>
+                                        <ItemsPanelTemplate>
+                                            <UniformGrid Columns="0" Rows="1" />
+                                        </ItemsPanelTemplate>
+                                    </TabControl.ItemsPanel>
+                                    <!--  Spectrum Tab  -->
+                                    <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
+                                        <TabItem.Header>
+                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                                <PathIcon
+                                                    Width="16"
+                                                    Height="16"
+                                                    Data="{DynamicResource ColorViewSpectrumIconGlyph}"
+                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            </Border>
+                                        </TabItem.Header>
+                                        <Grid Margin="12" RowDefinitions="*">
+                                            <Grid.ColumnDefinitions>
+                                                <ColumnDefinition Width="Auto" MinWidth="32" />
+                                                <ColumnDefinition Width="*" />
+                                                <ColumnDefinition Width="Auto" MinWidth="32" />
+                                            </Grid.ColumnDefinitions>
+                                            <primitives:ColorSlider
+                                                x:Name="ColorSpectrumThirdComponentSlider"
+                                                Grid.Column="0"
+                                                Margin="0,0,12,0"
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Stretch"
+                                                AutomationProperties.Name="Third Component"
+                                                ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
+                                                ColorModel="Hsva"
+                                                HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                                IsAlphaMaxForced="True"
+                                                IsSaturationValueMaxForced="False"
+                                                IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
+                                                Orientation="Vertical" />
+                                            <primitives:ColorSpectrum
+                                                x:Name="ColorSpectrum"
+                                                Grid.Column="1"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Stretch"
+                                                Components="{TemplateBinding ColorSpectrumComponents}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                MaxHue="{TemplateBinding MaxHue}"
+                                                MaxSaturation="{TemplateBinding MaxSaturation}"
+                                                MaxValue="{TemplateBinding MaxValue}"
+                                                MinHue="{TemplateBinding MinHue}"
+                                                MinSaturation="{TemplateBinding MinSaturation}"
+                                                MinValue="{TemplateBinding MinValue}"
+                                                Shape="{TemplateBinding ColorSpectrumShape}" />
+                                            <primitives:ColorSlider
+                                                x:Name="ColorSpectrumAlphaSlider"
+                                                Grid.Column="2"
+                                                Margin="12,0,0,0"
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Stretch"
+                                                AutomationProperties.Name="Alpha Component"
+                                                ColorComponent="Alpha"
+                                                ColorModel="Hsva"
+                                                HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                                IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                                Orientation="Vertical">
+                                                <primitives:ColorSlider.IsVisible>
+                                                    <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                    </MultiBinding>
+                                                </primitives:ColorSlider.IsVisible>
+                                            </primitives:ColorSlider>
+                                        </Grid>
+                                    </TabItem>
+                                    <!--  Palette Tab  -->
+                                    <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
+                                        <TabItem.Header>
+                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                                <PathIcon
+                                                    Width="16"
+                                                    Height="16"
+                                                    Data="{DynamicResource ColorViewPaletteIconGlyph}"
+                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            </Border>
+                                        </TabItem.Header>
+                                        <ListBox
+                                            Margin="12"
+                                            VerticalAlignment="Stretch"
+                                            ItemContainerTheme="{DynamicResource ColorViewPaletteListBoxItemTheme}"
+                                            Items="{TemplateBinding PaletteColors}"
+                                            SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
+                                            Theme="{DynamicResource ColorViewPaletteListBoxTheme}"
+                                            UseLayoutRounding="False">
+                                            <ListBox.ItemTemplate>
+                                                <DataTemplate DataType="{x:Type Color}">
+                                                    <Border
+                                                        HorizontalAlignment="Stretch"
+                                                        VerticalAlignment="Stretch"
+                                                        AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                                        ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}">
+                                                        <Border.Background>
+                                                            <SolidColorBrush Color="{Binding}" />
+                                                        </Border.Background>
+                                                    </Border>
+                                                </DataTemplate>
+                                            </ListBox.ItemTemplate>
+                                            <ListBox.ItemsPanel>
+                                                <ItemsPanelTemplate>
+                                                    <UniformGrid Columns="{Binding $parent[ColorView].PaletteColumnCount}" />
+                                                </ItemsPanelTemplate>
+                                            </ListBox.ItemsPanel>
+                                        </ListBox>
+                                    </TabItem>
+                                    <!--  Components Tab  -->
+                                    <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
+                                        <TabItem.Header>
+                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                                <PathIcon
+                                                    Width="16"
+                                                    Height="16"
+                                                    Data="{DynamicResource ColorViewComponentsIconGlyph}"
+                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            </Border>
+                                        </TabItem.Header>
+                                        <Grid
+                                            Margin="12"
+                                            ColumnDefinitions="Auto,*"
+                                            RowDefinitions="Auto,24,1*,1*,1*,1*,12">
+                                            <Grid.Styles>
+                                                <Style Selector="NumericUpDown /template/ TextBox">
+                                                    <Setter Property="InnerLeftContent" Value="{TemplateBinding Tag}" />
+                                                </Style>
+                                            </Grid.Styles>
+                                            <!--  Top color model & Hex input  -->
+                                            <Grid
+                                                Grid.Row="0"
+                                                Grid.Column="0"
+                                                Grid.ColumnSpan="2"
+                                                ColumnDefinitions="1*,12,1*">
+                                                <!--  RadioButtonGroup  -->
+                                                <Border
+                                                    Padding="2"
+                                                    Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
+                                                    CornerRadius="3">
+                                                    <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
+                                                        <RadioButton
+                                                            x:Name="RgbRadioButton"
+                                                            Grid.Column="0"
+                                                            HorizontalContentAlignment="Center"
+                                                            VerticalContentAlignment="Center"
+                                                            Content="RGB"
+                                                            CornerRadius="3,0,0,3"
+                                                            IsChecked="{TemplateBinding ColorModel,
+                                                                                        Converter={StaticResource EnumToBoolConverter},
+                                                                                        ConverterParameter={x:Static controls:ColorModel.Rgba},
+                                                                                        Mode=TwoWay}"
+                                                            Theme="{DynamicResource ColorViewRadioButton}" />
+                                                        <RadioButton
+                                                            x:Name="HsvRadioButton"
+                                                            Grid.Column="1"
+                                                            HorizontalContentAlignment="Center"
+                                                            VerticalContentAlignment="Center"
+                                                            Content="HSV"
+                                                            CornerRadius="0,3,3,0"
+                                                            IsChecked="{TemplateBinding ColorModel,
+                                                                                        Converter={StaticResource EnumToBoolConverter},
+                                                                                        ConverterParameter={x:Static controls:ColorModel.Hsva},
+                                                                                        Mode=TwoWay}"
+                                                            Theme="{DynamicResource ColorViewRadioButton}" />
+                                                    </Grid>
+                                                </Border>
+                                                <TextBox
+                                                    x:Name="PART_HexTextBox"
+                                                    Grid.Column="2"
+                                                    Height="32"
+                                                    HorizontalAlignment="Stretch"
+                                                    AutomationProperties.Name="Hexadecimal Color"
+                                                    InnerLeftContent="#"
+                                                    IsVisible="{TemplateBinding IsHexInputVisible}"
+                                                    MaxLength="9" />
+                                            </Grid>
+                                            <!--  Color component editing controls  -->
+                                            <!--  Component 1 RGB:Red HSV:Hue  -->
+                                            <NumericUpDown
+                                                x:Name="Component1NumericUpDown"
+                                                Grid.Row="2"
+                                                Grid.Column="0"
+                                                Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                                Margin="0,0,12,0"
+                                                VerticalAlignment="Center"
+                                                AllowSpin="True"
+                                                IsVisible="{TemplateBinding IsComponentTextInputVisible}"
+                                                Maximum="{Binding Maximum, ElementName=Component1Slider}"
+                                                Minimum="{Binding Minimum, ElementName=Component1Slider}"
+                                                NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                                ShowButtonSpinner="False"
+                                                Value="{Binding Value, ElementName=Component1Slider}">
+                                                <NumericUpDown.Styles>
+                                                    <Style Selector="NumericUpDown /template/ TextBox">
+                                                        <Setter Property="InnerLeftContent" Value="{TemplateBinding Tag}" />
+                                                    </Style>
+                                                </NumericUpDown.Styles>
+                                            </NumericUpDown>
+                                            <primitives:ColorSlider
+                                                x:Name="Component1Slider"
+                                                Grid.Row="2"
+                                                Grid.Column="1"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Center"
+                                                ColorComponent="Component1"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                IsRoundingEnabled="True"
+                                                IsSnapToTickEnabled="True"
+                                                IsVisible="{TemplateBinding IsComponentSliderVisible}"
+                                                Orientation="Horizontal"
+                                                TickFrequency="1" />
+                                            <!--  Component 2 RGB:Green HSV:Saturation  -->
+                                            <NumericUpDown
+                                                x:Name="Component2NumericUpDown"
+                                                Grid.Row="3"
+                                                Grid.Column="0"
+                                                Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                                Margin="0,0,12,0"
+                                                VerticalAlignment="Center"
+                                                AllowSpin="True"
+                                                IsVisible="{TemplateBinding IsComponentTextInputVisible}"
+                                                Maximum="{Binding Maximum, ElementName=Component2Slider}"
+                                                Minimum="{Binding Minimum, ElementName=Component2Slider}"
+                                                NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                                ShowButtonSpinner="False"
+                                                Value="{Binding Value, ElementName=Component2Slider}" />
+                                            <primitives:ColorSlider
+                                                x:Name="Component2Slider"
+                                                Grid.Row="3"
+                                                Grid.Column="1"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Center"
+                                                ColorComponent="Component2"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                IsRoundingEnabled="True"
+                                                IsSnapToTickEnabled="True"
+                                                IsVisible="{TemplateBinding IsComponentSliderVisible}"
+                                                Orientation="Horizontal"
+                                                TickFrequency="1" />
+                                            <!--  Component 3 RGB:Blue HSV:Value  -->
+                                            <NumericUpDown
+                                                x:Name="Component3NumericUpDown"
+                                                Grid.Row="4"
+                                                Grid.Column="0"
+                                                Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                                Margin="0,0,12,0"
+                                                VerticalAlignment="Center"
+                                                AllowSpin="True"
+                                                IsVisible="{TemplateBinding IsComponentTextInputVisible}"
+                                                Maximum="{Binding Maximum, ElementName=Component3Slider}"
+                                                Minimum="{Binding Minimum, ElementName=Component3Slider}"
+                                                NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                                ShowButtonSpinner="False"
+                                                Value="{Binding Value, ElementName=Component3Slider}" />
+                                            <primitives:ColorSlider
+                                                x:Name="Component3Slider"
+                                                Grid.Row="4"
+                                                Grid.Column="1"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Center"
+                                                ColorComponent="Component3"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                IsRoundingEnabled="True"
+                                                IsSnapToTickEnabled="True"
+                                                IsVisible="{TemplateBinding IsComponentSliderVisible}"
+                                                Orientation="Horizontal"
+                                                TickFrequency="1" />
+                                            <!--  Alpha Component  -->
+                                            <NumericUpDown
+                                                x:Name="AlphaComponentNumericUpDown"
+                                                Grid.Row="5"
+                                                Grid.Column="0"
+                                                Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                                Margin="0,0,12,0"
+                                                VerticalAlignment="Center"
+                                                AllowSpin="True"
+                                                IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                                Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
+                                                Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
+                                                NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                                ShowButtonSpinner="False"
+                                                Value="{Binding Value, ElementName=AlphaComponentSlider}">
+                                                <NumericUpDown.IsVisible>
+                                                    <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                    </MultiBinding>
+                                                </NumericUpDown.IsVisible>
+                                            </NumericUpDown>
+                                            <primitives:ColorSlider
+                                                x:Name="AlphaComponentSlider"
+                                                Grid.Row="5"
+                                                Grid.Column="1"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Center"
+                                                ColorComponent="Alpha"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
+                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                                IsRoundingEnabled="True"
+                                                IsSnapToTickEnabled="True"
+                                                Orientation="Horizontal"
+                                                TickFrequency="1">
+                                                <primitives:ColorSlider.IsVisible>
+                                                    <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                    </MultiBinding>
+                                                </primitives:ColorSlider.IsVisible>
+                                            </primitives:ColorSlider>
+                                        </Grid>
+                                    </TabItem>
+                                </TabControl>
+                                <!--  Previewer  -->
+                                <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
+                                <primitives:ColorPreviewer
+                                    Grid.Row="1"
+                                    Margin="12,-5,12,7"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
+                                    IsVisible="{TemplateBinding IsColorPreviewVisible}" />
+                            </Grid>
+                        </Flyout>
+                    </DropDownButton.Flyout>
+                </DropDownButton>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
new file mode 100644
index 0000000..af816c7
--- /dev/null
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
@@ -0,0 +1,118 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:Avalonia.Controls.Converters"
+    xmlns:pc="using:Avalonia.Controls.Primitives.Converters">
+    <!--  Add Resources Here  -->
+    <pc:AccentColorConverter x:Key="AccentColorConverter" />
+    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
+    <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight" />
+
+    <ControlTheme x:Key="{x:Type ColorPreviewer}" TargetType="ColorPreviewer">
+        <Setter Property="Height" Value="40" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ColorPreviewer}">
+                <Panel>
+                    <!--  Preview color with accents to the left and right  -->
+                    <Grid ColumnDefinitions="Auto,*,Auto" IsVisible="{TemplateBinding IsAccentColorsVisible}">
+                        <!--  Left accent colors  -->
+                        <Grid
+                            Grid.Column="0"
+                            Width="{DynamicResource ColorPreviewerAccentSectionWidth}"
+                            Height="{DynamicResource ColorPreviewerAccentSectionHeight}"
+                            VerticalAlignment="Center"
+                            ColumnDefinitions="*,*">
+                            <Border
+                                Grid.Column="0"
+                                Grid.ColumnSpan="2"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
+                            <Border
+                                x:Name="PART_AccentDecrement2Border"
+                                Grid.Column="0"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='-2'}"
+                                CornerRadius="{TemplateBinding CornerRadius,
+                                                               Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                                Tag="-2" />
+                            <Border
+                                x:Name="PART_AccentDecrement1Border"
+                                Grid.Column="1"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='-1'}"
+                                Tag="-1" />
+                        </Grid>
+                        <!--  Right accent colors  -->
+                        <Grid
+                            Grid.Column="2"
+                            Width="{DynamicResource ColorPreviewerAccentSectionWidth}"
+                            Height="{DynamicResource ColorPreviewerAccentSectionHeight}"
+                            VerticalAlignment="Center"
+                            ColumnDefinitions="*,*">
+                            <Border
+                                Grid.Column="0"
+                                Grid.ColumnSpan="2"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
+                            <Border
+                                x:Name="PART_AccentIncrement1Border"
+                                Grid.Column="0"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='1'}"
+                                Tag="1" />
+                            <Border
+                                x:Name="PART_AccentIncrement2Border"
+                                Grid.Column="1"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='2'}"
+                                CornerRadius="{TemplateBinding CornerRadius,
+                                                               Converter={StaticResource RightCornerRadiusFilterConverter}}"
+                                Tag="2" />
+                        </Grid>
+                        <!--  Preview color: Must be last for drop shadow Z-index  -->
+                        <Border
+                            Grid.Column="1"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            BoxShadow="{DynamicResource ColorPreviewerMainBoxShadow}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                            <Panel>
+                                <Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
+                                <Border
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    Background="{TemplateBinding HsvColor,
+                                                                 Converter={StaticResource ToBrushConverter}}"
+                                    CornerRadius="{TemplateBinding CornerRadius}" />
+                            </Panel>
+                        </Border>
+                    </Grid>
+                    <!--  Only preview color  -->
+                    <Border
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        IsVisible="{TemplateBinding IsAccentColorsVisible,
+                                                    Converter={x:Static BoolConverters.Not}}">
+                        <Panel>
+                            <Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
+                            <Border
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource ToBrushConverter}}"
+                                CornerRadius="{TemplateBinding CornerRadius}" />
+                        </Panel>
+                    </Border>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml
new file mode 100644
index 0000000..741daed
--- /dev/null
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml
@@ -0,0 +1,220 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:Avalonia.Controls.Converters">
+    <!--  Add Resources Here  -->
+
+    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
+    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
+
+    <ControlTheme x:Key="ColorSliderThumbTheme" TargetType="Thumb">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDefaultBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
+        <Setter Property="CornerRadius" Value="999" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate>
+                    <Border
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type ColorSlider}" TargetType="ColorSlider">
+        <Style Selector="^:horizontal">
+            <Setter Property="BorderThickness" Value="0" />
+            <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderCornerRadius}" />
+            <Setter Property="Height" Value="{DynamicResource ColorSliderWidth}" />
+            <Setter Property="Template">
+                <ControlTemplate TargetType="{x:Type ColorSlider}">
+                    <Border
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid Margin="{TemplateBinding Padding}">
+                            <Rectangle
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Rectangle
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Fill="{TemplateBinding Background}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Track
+                                Name="PART_Track"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="Horizontal"
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
+                                <Track.DecreaseButton>
+                                    <RepeatButton
+                                        Name="PART_DecreaseButton"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Background="Transparent"
+                                        Focusable="False">
+                                        <RepeatButton.Template>
+                                            <ControlTemplate>
+                                                <Border
+                                                    Name="FocusTarget"
+                                                    Margin="0,-8"
+                                                    Background="Transparent" />
+                                            </ControlTemplate>
+                                        </RepeatButton.Template>
+                                    </RepeatButton>
+                                </Track.DecreaseButton>
+                                <Track.IncreaseButton>
+                                    <RepeatButton
+                                        Name="PART_IncreaseButton"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Background="Transparent"
+                                        Focusable="False">
+                                        <RepeatButton.Template>
+                                            <ControlTemplate>
+                                                <Border
+                                                    Name="FocusTarget"
+                                                    Margin="0,-8"
+                                                    Background="Transparent" />
+                                            </ControlTemplate>
+                                        </RepeatButton.Template>
+                                    </RepeatButton>
+                                </Track.IncreaseButton>
+                                <Thumb
+                                    Name="ColorSliderThumb"
+                                    Width="16"
+                                    Height="16"
+                                    Margin="0"
+                                    Padding="0"
+                                    DataContext="{TemplateBinding Value}"
+                                    Theme="{StaticResource ColorSliderThumbTheme}" />
+                            </Track>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+        <Style Selector="^:vertical">
+            <Setter Property="BorderThickness" Value="0" />
+            <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderCornerRadius}" />
+            <Setter Property="Width" Value="{DynamicResource ColorSliderWidth}" />
+            <Setter Property="Template">
+                <ControlTemplate TargetType="{x:Type ColorSlider}">
+                    <Border
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid Margin="{TemplateBinding Padding}">
+                            <Rectangle
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Rectangle
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Fill="{TemplateBinding Background}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Track
+                                Name="PART_Track"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="Vertical"
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
+                                <Track.DecreaseButton>
+                                    <RepeatButton
+                                        Name="PART_DecreaseButton"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Background="Transparent"
+                                        Focusable="False">
+                                        <RepeatButton.Template>
+                                            <ControlTemplate>
+                                                <Border
+                                                    Name="FocusTarget"
+                                                    Margin="0,-8"
+                                                    Background="Transparent" />
+                                            </ControlTemplate>
+                                        </RepeatButton.Template>
+                                    </RepeatButton>
+                                </Track.DecreaseButton>
+                                <Track.IncreaseButton>
+                                    <RepeatButton
+                                        Name="PART_IncreaseButton"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Background="Transparent"
+                                        Focusable="False">
+                                        <RepeatButton.Template>
+                                            <ControlTemplate>
+                                                <Border
+                                                    Name="FocusTarget"
+                                                    Margin="0,-8"
+                                                    Background="Transparent" />
+                                            </ControlTemplate>
+                                        </RepeatButton.Template>
+                                    </RepeatButton>
+                                </Track.IncreaseButton>
+                                <Thumb
+                                    Name="ColorSliderThumb"
+                                    Width="{TemplateBinding Width}"
+                                    Height="{TemplateBinding Width}"
+                                    Margin="0"
+                                    Padding="0"
+                                    DataContext="{TemplateBinding Value}"
+                                    Theme="{StaticResource ColorSliderThumbTheme}" />
+                            </Track>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+        <!--  Selector/Thumb Color  -->
+        <Style Selector="^:pointerover /template/ Thumb#ColorSliderThumb">
+            <Setter Property="Opacity" Value="0.75" />
+        </Style>
+        <Style Selector="^:pointerover:dark-selector /template/ Thumb#ColorSliderThumb">
+            <Setter Property="Opacity" Value="0.7" />
+        </Style>
+        <Style Selector="^:pointerover:light-selector /template/ Thumb#ColorSliderThumb">
+            <Setter Property="Opacity" Value="0.8" />
+        </Style>
+
+        <Style Selector="^:dark-selector /template/ Thumb#ColorSliderThumb">
+            <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
+        </Style>
+        <Style Selector="^:light-selector /template/ Thumb#ColorSliderThumb">
+            <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderLightBorderBrush}" />
+        </Style>
+
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml
new file mode 100644
index 0000000..1ea057b
--- /dev/null
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml
@@ -0,0 +1,166 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
+    xmlns:converters="using:Avalonia.Controls.Converters">
+    <!--  Add Resources Here  -->
+    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
+    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
+
+
+    <ControlTheme x:Key="{x:Type ColorSpectrum}" TargetType="ColorSpectrum">
+        <Setter Property="CornerRadius" Value="6" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ColorSpectrum}">
+                    <Panel
+                        x:Name="PART_LayoutRoot"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
+                        <Panel
+                            x:Name="PART_SizingPanel"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            ClipToBounds="True">
+                            <Rectangle
+                                x:Name="PART_SpectrumRectangle"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Rectangle
+                                x:Name="PART_SpectrumOverlayRectangle"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Ellipse
+                                x:Name="PART_SpectrumEllipse"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
+                            <Ellipse
+                                x:Name="PART_SpectrumOverlayEllipse"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
+                            <Canvas
+                                x:Name="PART_InputTarget"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="Transparent">
+                                <!--  Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers  -->
+                                <Panel
+                                    x:Name="PART_SelectionEllipsePanel"
+                                    ToolTip.Placement="Top"
+                                    ToolTip.VerticalOffset="-10">
+                                    <Ellipse
+                                        x:Name="FocusEllipse"
+                                        Margin="-2"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        IsHitTestVisible="False"
+                                        StrokeThickness="2" />
+                                    <Ellipse
+                                        x:Name="SelectionEllipse"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        IsHitTestVisible="False"
+                                        StrokeThickness="2" />
+                                    <ToolTip.Tip>
+                                        <!--  Set in code-behind  -->
+                                    </ToolTip.Tip>
+                                </Panel>
+                            </Canvas>
+                            <Rectangle
+                                x:Name="BorderRectangle"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Ellipse
+                                x:Name="BorderEllipse"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
+                        </Panel>
+                    </Panel>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+
+        <!--  Normal  -->
+        <!--  Separating this allows easier customization in applications  -->
+        <Style Selector="^ /template/ Ellipse#BorderEllipse,                      ^ /template/ Rectangle#BorderRectangle">
+            <Setter Property="Stroke" Value="{DynamicResource ColorSpectrumBorderBrush}" />
+            <Setter Property="StrokeThickness" Value="1" />
+        </Style>
+
+        <!--  Focus  -->
+        <Style Selector="^ /template/ Ellipse#FocusEllipse">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+        <Style Selector="^:focus-visible /template/ Ellipse#FocusEllipse">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+
+        <!--  Selector Color  -->
+        <Style Selector="^ /template/ Ellipse#FocusEllipse">
+            <Setter Property="Stroke" Value="{DynamicResource ColorSliderLightBorderBrush}" />
+        </Style>
+        <Style Selector="^ /template/ Ellipse#SelectionEllipse">
+            <Setter Property="Stroke" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
+        </Style>
+        <Style Selector="^:light-selector /template/ Ellipse#FocusEllipse">
+            <Setter Property="Stroke" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
+        </Style>
+        <Style Selector="^:light-selector /template/ Ellipse#SelectionEllipse">
+            <Setter Property="Stroke" Value="{DynamicResource ColorSliderLightBorderBrush}" />
+        </Style>
+
+        <Style Selector="^:pointerover /template/ Ellipse#SelectionEllipse">
+            <Setter Property="Opacity" Value="0.7" />
+        </Style>
+        <Style Selector="^:pointerover:light-selector /template/ Ellipse#SelectionEllipse">
+            <Setter Property="Opacity" Value="0.8" />
+        </Style>
+
+        <!--  Selector Size  -->
+        <Style Selector="^ /template/ Panel#PART_SelectionEllipsePanel">
+            <Setter Property="Width" Value="16" />
+            <Setter Property="Height" Value="16" />
+        </Style>
+        <Style Selector="^:large-selector /template/ Panel#PART_SelectionEllipsePanel">
+            <Setter Property="Width" Value="48" />
+            <Setter Property="Height" Value="48" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
new file mode 100644
index 0000000..80b6429
--- /dev/null
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -0,0 +1,558 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
+    xmlns:converters="using:Avalonia.Controls.Converters"
+    xmlns:globalization="using:System.Globalization"
+    xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
+    xmlns:primitives="using:Avalonia.Controls.Primitives">
+    <!--  Add Resources Here  -->
+    <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
+    <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
+    <converters:ColorToHexConverter x:Key="ColorToHexConverter" />
+    <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
+    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+    <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
+
+    <VisualBrush
+        x:Key="ColorControlCheckeredBackgroundBrush"
+        DestinationRect="0,0,8,8"
+        Stretch="Uniform"
+        TileMode="Tile">
+        <VisualBrush.Visual>
+            <Image Width="8" Height="8">
+                <Image.Source>
+                    <DrawingImage>
+                        <DrawingImage.Drawing>
+                            <DrawingGroup>
+                                <GeometryDrawing Brush="Transparent" Geometry="M0,0 L2,0 2,2, 0,2Z" />
+                                <GeometryDrawing Brush="#19808080" Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z" />
+                            </DrawingGroup>
+                        </DrawingImage.Drawing>
+                    </DrawingImage>
+                </Image.Source>
+            </Image>
+        </VisualBrush.Visual>
+    </VisualBrush>
+
+    <ControlTheme x:Key="ColorViewPaletteListBoxTheme" TargetType="ListBox">
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ListBox">
+                <Border
+                    Name="border"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    ClipToBounds="{TemplateBinding ClipToBounds}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <ScrollViewer
+                        Name="PART_ScrollViewer"
+                        AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
+                        HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                        IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                        VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                        <ItemsPresenter
+                            Name="PART_ItemsPresenter"
+                            Margin="{TemplateBinding Padding}"
+                            ItemsPanel="{TemplateBinding ItemsPanel}" />
+                    </ScrollViewer>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="ColorViewPaletteListBoxItemTheme" TargetType="ListBoxItem">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ListBoxItem}">
+                <Grid UseLayoutRounding="False">
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        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}" />
+                    <Rectangle
+                        x:Name="BorderRectangle"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        IsHitTestVisible="False"
+                        StrokeThickness="1" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^ /template/ Rectangle#BorderRectangle">
+            <Setter Property="Stroke" Value="Transparent" />
+            <Setter Property="Opacity" Value="0" />
+        </Style>
+
+        <Style x:DataType="Color" Selector="^:pointerover /template/ Rectangle#BorderRectangle">
+            <Setter Property="Stroke" Value="{Binding Converter={StaticResource ContrastBrushConverter}}" />
+            <Setter Property="Opacity" Value="0.5" />
+        </Style>
+
+        <Style x:DataType="Color" Selector="^:selected /template/ Rectangle#BorderRectangle">
+            <Setter Property="Stroke" Value="{Binding Converter={StaticResource ContrastBrushConverter}}" />
+            <Setter Property="Opacity" Value="1" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="ColorViewRadioButton" TargetType="RadioButton">
+        <Setter Property="RadioButton.Cursor" Value="Hand" />
+        <Setter Property="RadioButton.FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
+        <Setter Property="RadioButton.Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
+        <Setter Property="RadioButton.Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
+        <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
+        <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 ColorViewRadioButtonCheckedBackground}" />
+            <Setter Property="RadioButton.Foreground" Value="{DynamicResource ColorViewRadioButtonCheckedForeground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonCheckedPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonCheckedPressedBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^:unchecked">
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonPressedBackground}" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type ColorView}" TargetType="ColorView">
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="ColorView.Width" Value="300" />
+        <Setter Property="ColorView.Height" Value="300" />
+        <Setter Property="ColorView.Palette">
+            <controls:FluentColorPalette />
+        </Setter>
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ColorView}">
+                <Grid RowDefinitions="*,Auto">
+                    <!--  Backgrounds  -->
+                    <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
+                    <Border
+                        x:Name="ContentBackgroundBorder"
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Height="{TemplateBinding Height}"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{DynamicResource ColorViewContentBackgroundBrush}"
+                        BorderBrush="{DynamicResource ColorViewContentBorderBrush}"
+                        BorderThickness="0,1,0,0"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+
+                    <TabControl
+                        x:Name="PART_TabControl"
+                        Grid.Row="0"
+                        Padding="0"
+                        VerticalAlignment="Stretch"
+                        HorizontalContentAlignment="Stretch"
+                        SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                        <TabControl.Styles>
+                            <Style Selector="TabItem">
+                                <Setter Property="MinHeight" Value="32" />
+                            </Style>
+                            <Style Selector="TabItem:selected">
+                                <Setter Property="Foreground" Value="{DynamicResource ColorViewTabItemSelectedForeground}" />
+                            </Style>
+                        </TabControl.Styles>
+                        <TabControl.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <UniformGrid Columns="0" Rows="1" />
+                            </ItemsPanelTemplate>
+                        </TabControl.ItemsPanel>
+                        <!--  Spectrum Tab  -->
+                        <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
+                            <TabItem.Header>
+                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{DynamicResource ColorViewSpectrumIconGlyph}"
+                                        Foreground="{Binding $parent[TabItem].Foreground}" />
+                                </Border>
+                            </TabItem.Header>
+                            <Grid Margin="12" RowDefinitions="*">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto" MinWidth="32" />
+                                    <ColumnDefinition Width="*" />
+                                    <ColumnDefinition Width="Auto" MinWidth="32" />
+                                </Grid.ColumnDefinitions>
+                                <primitives:ColorSlider
+                                    x:Name="ColorSpectrumThirdComponentSlider"
+                                    Grid.Column="0"
+                                    Margin="0,0,12,0"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Stretch"
+                                    AutomationProperties.Name="Third Component"
+                                    ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
+                                    ColorModel="Hsva"
+                                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                    IsAlphaMaxForced="True"
+                                    IsSaturationValueMaxForced="False"
+                                    IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
+                                    Orientation="Vertical" />
+                                <primitives:ColorSpectrum
+                                    x:Name="ColorSpectrum"
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    Components="{TemplateBinding ColorSpectrumComponents}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    MaxHue="{TemplateBinding MaxHue}"
+                                    MaxSaturation="{TemplateBinding MaxSaturation}"
+                                    MaxValue="{TemplateBinding MaxValue}"
+                                    MinHue="{TemplateBinding MinHue}"
+                                    MinSaturation="{TemplateBinding MinSaturation}"
+                                    MinValue="{TemplateBinding MinValue}"
+                                    Shape="{TemplateBinding ColorSpectrumShape}" />
+                                <primitives:ColorSlider
+                                    x:Name="ColorSpectrumAlphaSlider"
+                                    Grid.Column="2"
+                                    Margin="12,0,0,0"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Stretch"
+                                    AutomationProperties.Name="Alpha Component"
+                                    ColorComponent="Alpha"
+                                    ColorModel="Hsva"
+                                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                    IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                    Orientation="Vertical">
+                                    <primitives:ColorSlider.IsVisible>
+                                        <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                        </MultiBinding>
+                                    </primitives:ColorSlider.IsVisible>
+                                </primitives:ColorSlider>
+                            </Grid>
+                        </TabItem>
+                        <!--  Palette Tab  -->
+                        <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
+                            <TabItem.Header>
+                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{DynamicResource ColorViewPaletteIconGlyph}"
+                                        Foreground="{Binding $parent[TabItem].Foreground}" />
+                                </Border>
+                            </TabItem.Header>
+                            <ListBox
+                                Margin="12"
+                                VerticalAlignment="Stretch"
+                                ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
+                                Items="{TemplateBinding PaletteColors}"
+                                SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
+                                Theme="{StaticResource ColorViewPaletteListBoxTheme}"
+                                UseLayoutRounding="False">
+                                <ListBox.ItemTemplate>
+                                    <DataTemplate DataType="{x:Type Color}">
+                                        <Border
+                                            HorizontalAlignment="Stretch"
+                                            VerticalAlignment="Stretch"
+                                            AutomationProperties.Name="{Binding Converter={StaticResource ColorToDisplayNameConverter}}"
+                                            ToolTip.Tip="{Binding Converter={StaticResource ColorToDisplayNameConverter}}">
+                                            <Border.Background>
+                                                <SolidColorBrush Color="{Binding}" />
+                                            </Border.Background>
+                                        </Border>
+                                    </DataTemplate>
+                                </ListBox.ItemTemplate>
+                                <ListBox.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <UniformGrid Columns="{Binding $parent[ColorView].PaletteColumnCount}" />
+                                    </ItemsPanelTemplate>
+                                </ListBox.ItemsPanel>
+                            </ListBox>
+                        </TabItem>
+                        <!--  Components Tab  -->
+                        <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
+                            <TabItem.Header>
+                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{DynamicResource ColorViewComponentsIconGlyph}"
+                                        Foreground="{Binding $parent[TabItem].Foreground}" />
+                                </Border>
+                            </TabItem.Header>
+                            <Grid
+                                Margin="12"
+                                ColumnDefinitions="Auto,*"
+                                RowDefinitions="Auto,24,1*,1*,1*,1*,12">
+                                <Grid.Styles>
+                                    <Style Selector="NumericUpDown /template/ TextBox">
+                                        <Setter Property="InnerLeftContent" Value="{TemplateBinding Tag}" />
+                                    </Style>
+                                </Grid.Styles>
+                                <!--  Top color model & Hex input  -->
+                                <Grid
+                                    Grid.Row="0"
+                                    Grid.Column="0"
+                                    Grid.ColumnSpan="2"
+                                    ColumnDefinitions="1*,12,1*">
+                                    <!--  RadioButtonGroup  -->
+                                    <Border
+                                        Padding="2"
+                                        Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
+                                        CornerRadius="3">
+                                        <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
+                                            <RadioButton
+                                                x:Name="RgbRadioButton"
+                                                Grid.Column="0"
+                                                HorizontalContentAlignment="Center"
+                                                VerticalContentAlignment="Center"
+                                                Content="RGB"
+                                                CornerRadius="3,0,0,3"
+                                                IsChecked="{TemplateBinding ColorModel,
+                                                                            Converter={StaticResource EnumToBoolConverter},
+                                                                            ConverterParameter={x:Static controls:ColorModel.Rgba},
+                                                                            Mode=TwoWay}"
+                                                Theme="{DynamicResource ColorViewRadioButton}" />
+                                            <RadioButton
+                                                x:Name="HsvRadioButton"
+                                                Grid.Column="1"
+                                                HorizontalContentAlignment="Center"
+                                                VerticalContentAlignment="Center"
+                                                Content="HSV"
+                                                CornerRadius="0,3,3,0"
+                                                IsChecked="{TemplateBinding ColorModel,
+                                                                            Converter={StaticResource EnumToBoolConverter},
+                                                                            ConverterParameter={x:Static controls:ColorModel.Hsva},
+                                                                            Mode=TwoWay}"
+                                                Theme="{DynamicResource ColorViewRadioButton}" />
+                                        </Grid>
+                                    </Border>
+                                    <TextBox
+                                        x:Name="PART_HexTextBox"
+                                        Grid.Column="2"
+                                        Height="32"
+                                        HorizontalAlignment="Stretch"
+                                        AutomationProperties.Name="Hexadecimal Color"
+                                        InnerLeftContent="#"
+                                        IsVisible="{TemplateBinding IsHexInputVisible}"
+                                        MaxLength="9" />
+                                </Grid>
+                                <!--  Color component editing controls  -->
+                                <!--  Component 1 RGB:Red HSV:Hue  -->
+                                <NumericUpDown
+                                    x:Name="Component1NumericUpDown"
+                                    Grid.Row="2"
+                                    Grid.Column="0"
+                                    Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                    Margin="0,0,12,0"
+                                    VerticalAlignment="Center"
+                                    AllowSpin="True"
+                                    IsVisible="{TemplateBinding IsComponentTextInputVisible}"
+                                    Maximum="{Binding Maximum, ElementName=Component1Slider}"
+                                    Minimum="{Binding Minimum, ElementName=Component1Slider}"
+                                    NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                    ShowButtonSpinner="False"
+                                    Value="{Binding Value, ElementName=Component1Slider}">
+                                    <NumericUpDown.Styles>
+                                        <Style Selector="NumericUpDown /template/ TextBox">
+                                            <Setter Property="InnerLeftContent" Value="{TemplateBinding Tag}" />
+                                        </Style>
+                                    </NumericUpDown.Styles>
+                                </NumericUpDown>
+                                <primitives:ColorSlider
+                                    x:Name="Component1Slider"
+                                    Grid.Row="2"
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    ColorComponent="Component1"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    IsRoundingEnabled="True"
+                                    IsSnapToTickEnabled="True"
+                                    IsVisible="{TemplateBinding IsComponentSliderVisible}"
+                                    Orientation="Horizontal"
+                                    TickFrequency="1" />
+                                <!--  Component 2 RGB:Green HSV:Saturation  -->
+                                <NumericUpDown
+                                    x:Name="Component2NumericUpDown"
+                                    Grid.Row="3"
+                                    Grid.Column="0"
+                                    Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                    Margin="0,0,12,0"
+                                    VerticalAlignment="Center"
+                                    AllowSpin="True"
+                                    IsVisible="{TemplateBinding IsComponentTextInputVisible}"
+                                    Maximum="{Binding Maximum, ElementName=Component2Slider}"
+                                    Minimum="{Binding Minimum, ElementName=Component2Slider}"
+                                    NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                    ShowButtonSpinner="False"
+                                    Value="{Binding Value, ElementName=Component2Slider}" />
+                                <primitives:ColorSlider
+                                    x:Name="Component2Slider"
+                                    Grid.Row="3"
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    ColorComponent="Component2"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    IsRoundingEnabled="True"
+                                    IsSnapToTickEnabled="True"
+                                    IsVisible="{TemplateBinding IsComponentSliderVisible}"
+                                    Orientation="Horizontal"
+                                    TickFrequency="1" />
+                                <!--  Component 3 RGB:Blue HSV:Value  -->
+                                <NumericUpDown
+                                    x:Name="Component3NumericUpDown"
+                                    Grid.Row="4"
+                                    Grid.Column="0"
+                                    Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                    Margin="0,0,12,0"
+                                    VerticalAlignment="Center"
+                                    AllowSpin="True"
+                                    IsVisible="{TemplateBinding IsComponentTextInputVisible}"
+                                    Maximum="{Binding Maximum, ElementName=Component3Slider}"
+                                    Minimum="{Binding Minimum, ElementName=Component3Slider}"
+                                    NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                    ShowButtonSpinner="False"
+                                    Value="{Binding Value, ElementName=Component3Slider}" />
+                                <primitives:ColorSlider
+                                    x:Name="Component3Slider"
+                                    Grid.Row="4"
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    ColorComponent="Component3"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    IsRoundingEnabled="True"
+                                    IsSnapToTickEnabled="True"
+                                    IsVisible="{TemplateBinding IsComponentSliderVisible}"
+                                    Orientation="Horizontal"
+                                    TickFrequency="1" />
+                                <!--  Alpha Component  -->
+                                <NumericUpDown
+                                    x:Name="AlphaComponentNumericUpDown"
+                                    Grid.Row="5"
+                                    Grid.Column="0"
+                                    Width="{DynamicResource ColorViewNumericUpDownWidth}"
+                                    Margin="0,0,12,0"
+                                    VerticalAlignment="Center"
+                                    AllowSpin="True"
+                                    IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                    Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
+                                    Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
+                                    NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                    ShowButtonSpinner="False"
+                                    Value="{Binding Value, ElementName=AlphaComponentSlider}">
+                                    <NumericUpDown.IsVisible>
+                                        <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                        </MultiBinding>
+                                    </NumericUpDown.IsVisible>
+                                </NumericUpDown>
+                                <primitives:ColorSlider
+                                    x:Name="AlphaComponentSlider"
+                                    Grid.Row="5"
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    ColorComponent="Alpha"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
+                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                    IsRoundingEnabled="True"
+                                    IsSnapToTickEnabled="True"
+                                    Orientation="Horizontal"
+                                    TickFrequency="1">
+                                    <primitives:ColorSlider.IsVisible>
+                                        <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                        </MultiBinding>
+                                    </primitives:ColorSlider.IsVisible>
+                                </primitives:ColorSlider>
+                            </Grid>
+                        </TabItem>
+                    </TabControl>
+                    <!--  Previewer  -->
+                    <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
+                    <primitives:ColorPreviewer
+                        Grid.Row="1"
+                        Margin="12,-5,12,7"
+                        HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                        IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
+                        IsVisible="{TemplateBinding IsColorPreviewVisible}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^[ColorModel=Rgba]">
+            <Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="R" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="G" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="B" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="A" />
+            </Style>
+        </Style>
+        <Style Selector="^[ColorModel=Hsva]">
+            <Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="H" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="S" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="V" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
+                <Setter Property="NumericUpDown.Tag" Value="A" />
+            </Style>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia.ColorPicker/Index.axaml b/src/Semi.Avalonia.ColorPicker/Index.axaml
index 9017e8d..980ec64 100644
--- a/src/Semi.Avalonia.ColorPicker/Index.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Index.axaml
@@ -1,3 +1,14 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
-</ResourceDictionary>
+    <Styles.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.ThemeDictionaries>
+                <ResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.ColorPicker/Light.axaml" />
+                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.axaml" />
+            </ResourceDictionary.ThemeDictionaries>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Styles.Resources>
+</Styles>
diff --git a/src/Semi.Avalonia.ColorPicker/Light.axaml b/src/Semi.Avalonia.ColorPicker/Light.axaml
index 9017e8d..e71890d 100644
--- a/src/Semi.Avalonia.ColorPicker/Light.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Light.axaml
@@ -1,3 +1,41 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#0077FA" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#0077FA" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#0062D6" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#004FB3" />
+    <FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
+    <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
+    <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
+
+    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#0077FA" />
+
+    <PathGeometry x:Key="ColorViewSpectrumIconGlyph">
+        M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z
+    </PathGeometry>
+    <PathGeometry x:Key="ColorViewPaletteIconGlyph">
+        M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z
+    </PathGeometry>
+    <PathGeometry x:Key="ColorViewComponentsIconGlyph">
+        M4 6.5C5.10457 6.5 6 5.60457 6 4.5C6 3.39543 5.10457 2.5 4 2.5C2.89543 2.5 2 3.39543 2 4.5C2 5.60457 2.89543 6.5 4 6.5ZM9.5 3C8.67157 3 8 3.67157 8 4.5C8 5.32843 8.67157 6 9.5 6H20.5C21.3284 6 22 5.32843 22 4.5C22 3.67157 21.3284 3 20.5 3H9.5ZM8 11.5C8 10.6716 8.67157 10 9.5 10H20.5C21.3284 10 22 10.6716 22 11.5C22 12.3284 21.3284 13 20.5 13H9.5C8.67157 13 8 12.3284 8 11.5ZM8 18.5C8 17.6716 8.67157 17 9.5 17H20.5C21.3284 17 22 17.6716 22 18.5C22 19.3284 21.3284 20 20.5 20H9.5C8.67157 20 8 19.3284 8 18.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM4 20.5C5.10457 20.5 6 19.6046 6 18.5C6 17.3954 5.10457 16.5 4 16.5C2.89543 16.5 2 17.3954 2 18.5C2 19.6046 2.89543 20.5 4 20.5Z
+    </PathGeometry>
+
+    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
+    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
+    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
+
+    <x:Double x:Key="ColorSliderWidth">16</x:Double>
+    <CornerRadius x:Key="ColorSliderCornerRadius">8</CornerRadius>
+    <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
+
+    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
+
+    <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
+    <x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
+
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj b/src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj
index 71b6b80..d1217a7 100644
--- a/src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj
+++ b/src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj
@@ -4,6 +4,7 @@
         <TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
         <LangVersion>10</LangVersion>
         <Nullable>enable</Nullable>
+        <Version>0.1.0-preview5</Version>
         <Title>Semi.Avalonia.ColorPicker</Title>
         <Authors>IRIHI Technology</Authors>
         <Description>Avalonia Theme inspired by Semi Design. </Description>
diff --git a/src/Semi.Avalonia/Controls/NumericUpDown.axaml b/src/Semi.Avalonia/Controls/NumericUpDown.axaml
index 300bce6..cf268f8 100644
--- a/src/Semi.Avalonia/Controls/NumericUpDown.axaml
+++ b/src/Semi.Avalonia/Controls/NumericUpDown.axaml
@@ -2,8 +2,9 @@
     <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type NumericUpDown}" TargetType="NumericUpDown">
         <Setter Property="NumericUpDown.VerticalContentAlignment" Value="Center" />
+        <Setter Property="NumericUpDown.CornerRadius" Value="{DynamicResource NumericUpDownCornerRadius}" />
         <Setter Property="NumericUpDown.Template">
-            <ControlTemplate>
+            <ControlTemplate TargetType="NumericUpDown">
                 <ButtonSpinner
                     Name="PART_Spinner"
                     MinWidth="0"
@@ -14,13 +15,13 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
                     ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
                     <TextBox
                         Name="PART_TextBox"
                         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                         AcceptsReturn="False"
+                        CornerRadius="{TemplateBinding CornerRadius}"
                         FontSize="{TemplateBinding FontSize}"
                         Foreground="{TemplateBinding Foreground}"
                         IsReadOnly="{TemplateBinding IsReadOnly}"
diff --git a/src/Semi.Avalonia/Controls/TextBox.axaml b/src/Semi.Avalonia/Controls/TextBox.axaml
index cabc5b3..3d67fd1 100644
--- a/src/Semi.Avalonia/Controls/TextBox.axaml
+++ b/src/Semi.Avalonia/Controls/TextBox.axaml
@@ -108,7 +108,7 @@
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{DynamicResource TextBoxDefaultCornerRadius}">
+                    CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto,*,Auto, Auto, Auto">
                         <ContentPresenter
                             Grid.Column="0"
diff --git a/src/Semi.Avalonia/Themes/Dark/NumericUpDown.axaml b/src/Semi.Avalonia/Themes/Dark/NumericUpDown.axaml
index 9017e8d..60ebcd9 100644
--- a/src/Semi.Avalonia/Themes/Dark/NumericUpDown.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/NumericUpDown.axaml
@@ -1,3 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
+    <CornerRadius x:Key="NumericUpDownCornerRadius">3</CornerRadius>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/NumericUpDown.axaml b/src/Semi.Avalonia/Themes/Light/NumericUpDown.axaml
index 9017e8d..60ebcd9 100644
--- a/src/Semi.Avalonia/Themes/Light/NumericUpDown.axaml
+++ b/src/Semi.Avalonia/Themes/Light/NumericUpDown.axaml
@@ -1,3 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
+    <CornerRadius x:Key="NumericUpDownCornerRadius">3</CornerRadius>
 </ResourceDictionary>