From 195ef79e0a3151007eaa3d3b64a8a79d269ee915 Mon Sep 17 00:00:00 2001
From: robloo <robloo@users.noreply.github.com>
Date: Sun, 31 Jul 2022 00:19:34 -0400
Subject: [PATCH 1/4] Convert ColorPicker default styles to ControlThemes

---
 .../Themes/Default/ColorPreviewer.xaml        |  23 +-
 .../Themes/Default/ColorSlider.xaml           | 346 +++++++++---------
 .../Themes/Default/ColorSpectrum.xaml         |  94 ++---
 .../Themes/Default/Default.xaml               |  76 ++--
 4 files changed, 274 insertions(+), 265 deletions(-)

diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
index c3bc7df4a4..e067fe4ab5 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
@@ -1,15 +1,14 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
-        x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
+                    x:CompileBindings="True">
 
-  <Styles.Resources>
-    <pc:AccentColorConverter x:Key="AccentColorConverter" />
-    <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
-    <x:Double x:Key="ColorPreviewerAccentSectionHeight">40</x:Double>
-  </Styles.Resources>
+  <pc:AccentColorConverter x:Key="AccentColorConverter" />
+  <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
+  <x:Double x:Key="ColorPreviewerAccentSectionHeight">40</x:Double>
 
-  <Style Selector="ColorPreviewer">
+  <ControlTheme x:Key="{x:Type ColorPreviewer}"
+                TargetType="ColorPreviewer">
     <Setter Property="Height" Value="70" />
     <Setter Property="CornerRadius" Value="0" />
     <Setter Property="Template">
@@ -97,6 +96,6 @@
         </Panel>
       </ControlTemplate>
     </Setter>
-  </Style>
+  </ControlTheme>
 
-</Styles>
+</ResourceDictionary>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml
index 35cd7a9faa..9aa2dcd9f9 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml
@@ -1,188 +1,190 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:CompileBindings="True">
 
-  <Style Selector="Thumb.ColorSliderThumbStyle">
-    <Setter Property="BorderThickness" Value="0" />
+  <ControlTheme x:Key="ColorSliderThumbTheme"
+                TargetType="Thumb">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeForegroundBrush}" />
+    <Setter Property="BorderThickness" Value="3" />
+    <Setter Property="CornerRadius" Value="10" />
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate>
           <Border Background="{TemplateBinding Background}"
                   BorderBrush="{TemplateBinding BorderBrush}"
                   BorderThickness="{TemplateBinding BorderThickness}"
-                  CornerRadius="10" />
+                  CornerRadius="{TemplateBinding CornerRadius}" />
         </ControlTemplate>
       </Setter.Value>
     </Setter>
-  </Style>
+  </ControlTheme>
 
-  <Style Selector="ColorSlider:horizontal">
-    <Setter Property="BorderThickness" Value="0" />
-    <Setter Property="CornerRadius" Value="10" />
-    <Setter Property="Height" Value="20" />
-    <Setter Property="Template">
-      <ControlTemplate TargetType="{x:Type ColorSlider}">
-        <Border BorderThickness="{TemplateBinding BorderThickness}"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                CornerRadius="{TemplateBinding CornerRadius}">
-          <Grid Margin="{TemplateBinding Padding}">
-            <Rectangle HorizontalAlignment="Stretch"
-                       VerticalAlignment="Stretch"
-                       Fill="{StaticResource 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"
-                   Minimum="{TemplateBinding Minimum}"
-                   Maximum="{TemplateBinding Maximum}"
-                   Value="{TemplateBinding Value, Mode=TwoWay}"
-                   IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
-                   Orientation="Horizontal">
-              <Track.DecreaseButton>
-                <RepeatButton Name="PART_DecreaseButton"
-                              Background="Transparent"
-                              Focusable="False"
-                              HorizontalAlignment="Stretch"
-                              VerticalAlignment="Stretch">
-                  <RepeatButton.Template>
-                    <ControlTemplate>
-                      <Border Name="FocusTarget"
-                              Background="Transparent"
-                              Margin="0,-10" />
-                    </ControlTemplate>
-                  </RepeatButton.Template>
-                </RepeatButton>
-              </Track.DecreaseButton>
-              <Track.IncreaseButton>
-                <RepeatButton Name="PART_IncreaseButton"
-                              Background="Transparent"
-                              Focusable="False"
-                              HorizontalAlignment="Stretch"
-                              VerticalAlignment="Stretch">
-                  <RepeatButton.Template>
-                    <ControlTemplate>
-                      <Border Name="FocusTarget"
-                              Background="Transparent"
-                              Margin="0,-10" />
-                    </ControlTemplate>
-                  </RepeatButton.Template>
-                </RepeatButton>
-              </Track.IncreaseButton>
-              <Thumb Classes="ColorSliderThumbStyle"
-                     Name="ColorSliderThumb"
-                     Margin="0"
-                     Padding="0"
-                     DataContext="{TemplateBinding Value}"
-                     Height="{TemplateBinding Height}"
-                     Width="{TemplateBinding Height}" />
-            </Track>
-          </Grid>
-        </Border>
-      </ControlTemplate>
-    </Setter>
-  </Style>
+  <ControlTheme x:Key="{x:Type ColorSlider}"
+                TargetType="ColorSlider">
 
-  <Style Selector="ColorSlider:vertical">
-    <Setter Property="BorderThickness" Value="0" />
-    <Setter Property="CornerRadius" Value="10" />
-    <Setter Property="Width" Value="20" />
-    <Setter Property="Template">
-      <ControlTemplate TargetType="{x:Type ColorSlider}">
-        <Border BorderThickness="{TemplateBinding BorderThickness}"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                CornerRadius="{TemplateBinding CornerRadius}">
-          <Grid Margin="{TemplateBinding Padding}">
-            <Rectangle HorizontalAlignment="Stretch"
-                       VerticalAlignment="Stretch"
-                       Fill="{StaticResource 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"
-                   Minimum="{TemplateBinding Minimum}"
-                   Maximum="{TemplateBinding Maximum}"
-                   Value="{TemplateBinding Value, Mode=TwoWay}"
-                   IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
-                   Orientation="Vertical">
-              <Track.DecreaseButton>
-                <RepeatButton Name="PART_DecreaseButton"
-                              Background="Transparent"
-                              Focusable="False"
-                              HorizontalAlignment="Stretch"
-                              VerticalAlignment="Stretch">
-                  <RepeatButton.Template>
-                    <ControlTemplate>
-                      <Border Name="FocusTarget"
-                              Background="Transparent"
-                              Margin="0,-10" />
-                    </ControlTemplate>
-                  </RepeatButton.Template>
-                </RepeatButton>
-              </Track.DecreaseButton>
-              <Track.IncreaseButton>
-                <RepeatButton Name="PART_IncreaseButton"
-                              Background="Transparent"
-                              Focusable="False"
-                              HorizontalAlignment="Stretch"
-                              VerticalAlignment="Stretch">
-                  <RepeatButton.Template>
-                    <ControlTemplate>
-                      <Border Name="FocusTarget"
-                              Background="Transparent"
-                              Margin="0,-10" />
-                    </ControlTemplate>
-                  </RepeatButton.Template>
-                </RepeatButton>
-              </Track.IncreaseButton>
-              <Thumb Classes="ColorSliderThumbStyle"
-                     Name="ColorSliderThumb"
-                     Margin="0"
-                     Padding="0"
-                     DataContext="{TemplateBinding Value}"
-                     Height="{TemplateBinding Width}"
-                     Width="{TemplateBinding Width}" />
-            </Track>
-          </Grid>
-        </Border>
-      </ControlTemplate>
-    </Setter>
-  </Style>
+    <Style Selector="^:horizontal">
+      <Setter Property="BorderThickness" Value="0" />
+      <Setter Property="CornerRadius" Value="10" />
+      <Setter Property="Height" Value="20" />
+      <Setter Property="Template">
+        <ControlTemplate TargetType="{x:Type ColorSlider}">
+          <Border BorderThickness="{TemplateBinding BorderThickness}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  CornerRadius="{TemplateBinding CornerRadius}">
+            <Grid Margin="{TemplateBinding Padding}">
+              <Rectangle HorizontalAlignment="Stretch"
+                         VerticalAlignment="Stretch"
+                         Fill="{StaticResource 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"
+                     Minimum="{TemplateBinding Minimum}"
+                     Maximum="{TemplateBinding Maximum}"
+                     Value="{TemplateBinding Value, Mode=TwoWay}"
+                     IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                     Orientation="Horizontal">
+                <Track.DecreaseButton>
+                  <RepeatButton Name="PART_DecreaseButton"
+                                Background="Transparent"
+                                Focusable="False"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch">
+                    <RepeatButton.Template>
+                      <ControlTemplate>
+                        <Border Name="FocusTarget"
+                                Background="Transparent"
+                                Margin="0,-10" />
+                      </ControlTemplate>
+                    </RepeatButton.Template>
+                  </RepeatButton>
+                </Track.DecreaseButton>
+                <Track.IncreaseButton>
+                  <RepeatButton Name="PART_IncreaseButton"
+                                Background="Transparent"
+                                Focusable="False"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch">
+                    <RepeatButton.Template>
+                      <ControlTemplate>
+                        <Border Name="FocusTarget"
+                                Background="Transparent"
+                                Margin="0,-10" />
+                      </ControlTemplate>
+                    </RepeatButton.Template>
+                  </RepeatButton>
+                </Track.IncreaseButton>
+                <Thumb Name="ColorSliderThumb"
+                       Theme="{StaticResource ColorSliderThumbTheme}"
+                       Margin="0"
+                       Padding="0"
+                       DataContext="{TemplateBinding Value}"
+                       Height="{TemplateBinding Height}"
+                       Width="{TemplateBinding Height}" />
+              </Track>
+            </Grid>
+          </Border>
+        </ControlTemplate>
+      </Setter>
+    </Style>
 
-  <!-- Normal State -->
-  <Style Selector="ColorSlider /template/ Thumb.ColorSliderThumbStyle">
-    <Setter Property="Background" Value="Transparent" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ThemeForegroundBrush}" />
-    <Setter Property="BorderThickness" Value="3" />
-  </Style>
+    <Style Selector="^:vertical">
+      <Setter Property="BorderThickness" Value="0" />
+      <Setter Property="CornerRadius" Value="10" />
+      <Setter Property="Width" Value="20" />
+      <Setter Property="Template">
+        <ControlTemplate TargetType="{x:Type ColorSlider}">
+          <Border BorderThickness="{TemplateBinding BorderThickness}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  CornerRadius="{TemplateBinding CornerRadius}">
+            <Grid Margin="{TemplateBinding Padding}">
+              <Rectangle HorizontalAlignment="Stretch"
+                         VerticalAlignment="Stretch"
+                         Fill="{StaticResource 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"
+                     Minimum="{TemplateBinding Minimum}"
+                     Maximum="{TemplateBinding Maximum}"
+                     Value="{TemplateBinding Value, Mode=TwoWay}"
+                     IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                     Orientation="Vertical">
+                <Track.DecreaseButton>
+                  <RepeatButton Name="PART_DecreaseButton"
+                                Background="Transparent"
+                                Focusable="False"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch">
+                    <RepeatButton.Template>
+                      <ControlTemplate>
+                        <Border Name="FocusTarget"
+                                Background="Transparent"
+                                Margin="0,-10" />
+                      </ControlTemplate>
+                    </RepeatButton.Template>
+                  </RepeatButton>
+                </Track.DecreaseButton>
+                <Track.IncreaseButton>
+                  <RepeatButton Name="PART_IncreaseButton"
+                                Background="Transparent"
+                                Focusable="False"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch">
+                    <RepeatButton.Template>
+                      <ControlTemplate>
+                        <Border Name="FocusTarget"
+                                Background="Transparent"
+                                Margin="0,-10" />
+                      </ControlTemplate>
+                    </RepeatButton.Template>
+                  </RepeatButton>
+                </Track.IncreaseButton>
+                <Thumb Name="ColorSliderThumb"
+                       Theme="{StaticResource ColorSliderThumbTheme}"
+                       Margin="0"
+                       Padding="0"
+                       DataContext="{TemplateBinding Value}"
+                       Height="{TemplateBinding Width}"
+                       Width="{TemplateBinding Width}" />
+              </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>
 
-  <!-- Selector/Thumb Color -->
-  <Style Selector="ColorSlider:pointerover /template/ Thumb.ColorSliderThumbStyle">
-    <Setter Property="Opacity" Value="0.75" />
-  </Style>
-  <Style Selector="ColorSlider:pointerover:dark-selector /template/ Thumb.ColorSliderThumbStyle">
-    <Setter Property="Opacity" Value="0.7" />
-  </Style>
-  <Style Selector="ColorSlider:pointerover:light-selector /template/ Thumb.ColorSliderThumbStyle">
-    <Setter Property="Opacity" Value="0.8" />
-  </Style>
+    <Style Selector="^:dark-selector /template/ Thumb#ColorSliderThumb">
+      <Setter Property="BorderBrush" Value="Black" />
+    </Style>
+    <Style Selector="^:light-selector /template/ Thumb#ColorSliderThumb">
+      <Setter Property="BorderBrush" Value="White" />
+    </Style>
 
-  <Style Selector="ColorSlider:dark-selector /template/ Thumb.ColorSliderThumbStyle">
-    <Setter Property="BorderBrush" Value="Black" />
-  </Style>
-  <Style Selector="ColorSlider:light-selector /template/ Thumb.ColorSliderThumbStyle">
-    <Setter Property="BorderBrush" Value="White" />
-  </Style>
+  </ControlTheme>
 
-</Styles>
+</ResourceDictionary>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml
index 0e57f6b483..0e137c89c6 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml
@@ -1,9 +1,10 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:controls="using:Avalonia.Controls"
-        x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="using:Avalonia.Controls"
+                    x:CompileBindings="True">
 
-  <Style Selector="ColorSpectrum">
+  <ControlTheme x:Key="{x:Type ColorSpectrum}"
+                TargetType="ColorSpectrum">
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type ColorSpectrum}">
@@ -79,50 +80,51 @@
         </ControlTemplate>
       </Setter.Value>
     </Setter>
-  </Style>
 
-  <!-- Normal -->
-  <!-- Separating this allows easier customization in applications -->
-  <Style Selector="ColorSpectrum /template/ Ellipse#BorderEllipse,
-                   ColorSpectrum /template/ Rectangle#BorderRectangle">
-    <Setter Property="Stroke" Value="{DynamicResource ThemeBorderLowBrush}" />
-    <Setter Property="StrokeThickness" Value="1" />
-  </Style>
+    <!-- Normal -->
+    <!-- Separating this allows easier customization in applications -->
+    <Style Selector="^ /template/ Ellipse#BorderEllipse,
+                     ^ /template/ Rectangle#BorderRectangle">
+      <Setter Property="Stroke" Value="{DynamicResource ThemeBorderLowBrush}" />
+      <Setter Property="StrokeThickness" Value="1" />
+    </Style>
 
-  <!-- Focus -->
-  <Style Selector="ColorSpectrum /template/ Ellipse#FocusEllipse">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-  <Style Selector="ColorSpectrum:focus-visible /template/ Ellipse#FocusEllipse">
-    <Setter Property="IsVisible" Value="True" />
-  </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="ColorSpectrum /template/ Ellipse#FocusEllipse">
-    <Setter Property="Stroke" Value="White" />
-  </Style>
-  <Style Selector="ColorSpectrum /template/ Ellipse#SelectionEllipse">
-    <Setter Property="Stroke" Value="Black" />
-  </Style>
-  <Style Selector="ColorSpectrum:light-selector /template/ Ellipse#FocusEllipse">
-    <Setter Property="Stroke" Value="Black" />
-  </Style>
-  <Style Selector="ColorSpectrum:light-selector /template/ Ellipse#SelectionEllipse">
-    <Setter Property="Stroke" Value="White" />
-  </Style>
+    <!-- Selector Color -->
+    <Style Selector="^ /template/ Ellipse#FocusEllipse">
+      <Setter Property="Stroke" Value="White" />
+    </Style>
+    <Style Selector="^ /template/ Ellipse#SelectionEllipse">
+      <Setter Property="Stroke" Value="Black" />
+    </Style>
+    <Style Selector="^:light-selector /template/ Ellipse#FocusEllipse">
+      <Setter Property="Stroke" Value="Black" />
+    </Style>
+    <Style Selector="^:light-selector /template/ Ellipse#SelectionEllipse">
+      <Setter Property="Stroke" Value="White" />
+    </Style>
 
-  <Style Selector="ColorSpectrum:pointerover /template/ Ellipse#SelectionEllipse">
-    <Setter Property="Opacity" Value="0.8" />
-  </Style>
+    <Style Selector="^:pointerover /template/ Ellipse#SelectionEllipse">
+      <Setter Property="Opacity" Value="0.8" />
+    </Style>
 
-  <!-- Selector Size -->
-  <Style Selector="ColorSpectrum /template/ Panel#PART_SelectionEllipsePanel">
-    <Setter Property="Width" Value="16" />
-    <Setter Property="Height" Value="16" />
-  </Style>
-  <Style Selector="ColorSpectrum:large-selector /template/ Panel#PART_SelectionEllipsePanel">
-    <Setter Property="Width" Value="48" />
-    <Setter Property="Height" Value="48" />
-  </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>
 
-</Styles>
+  </ControlTheme>
+
+</ResourceDictionary>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default/Default.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default/Default.xaml
index db1fa3ee4e..b452e34394 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Default/Default.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default/Default.xaml
@@ -3,42 +3,48 @@
         xmlns:converters="using:Avalonia.Controls.Converters">
 
   <Styles.Resources>
-    <!-- Shared Resources -->
-    <VisualBrush x:Key="ColorControlCheckeredBackgroundBrush"
-                 TileMode="Tile"
-                 Stretch="Uniform"
-                 DestinationRect="0,0,8,8">
-      <VisualBrush.Visual>
-        <DrawingPresenter Width="8"
-                          Height="8">
-          <DrawingGroup>
-            <GeometryDrawing Geometry="M0,0 L2,0 2,2, 0,2Z"
-                             Brush="Transparent" />
-            <GeometryDrawing Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z"
-                             Brush="#19808080" />
-          </DrawingGroup>
-        </DrawingPresenter>
-      </VisualBrush.Visual>
-    </VisualBrush>
-    
-    <!-- Shared Converters -->
-    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
-    <converters:ToBrushConverter x:Key="ToBrushConverter" />
-    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft"/>
-    <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight"/>
-    <converters:CornerRadiusFilterConverter x:Key="TopCornerRadiusFilterConverter" Filter="TopLeft, TopRight"/>
-    <converters:CornerRadiusFilterConverter x:Key="BottomCornerRadiusFilterConverter" Filter="BottomLeft, BottomRight"/>
-    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
-    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
-  </Styles.Resources>
+    <ResourceDictionary>
+
+      <!-- Shared Resources -->
+      <VisualBrush x:Key="ColorControlCheckeredBackgroundBrush"
+                   TileMode="Tile"
+                   Stretch="Uniform"
+                   DestinationRect="0,0,8,8">
+        <VisualBrush.Visual>
+          <DrawingPresenter Width="8"
+                            Height="8">
+            <DrawingGroup>
+              <GeometryDrawing Geometry="M0,0 L2,0 2,2, 0,2Z"
+                               Brush="Transparent" />
+              <GeometryDrawing Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z"
+                               Brush="#19808080" />
+            </DrawingGroup>
+          </DrawingPresenter>
+        </VisualBrush.Visual>
+      </VisualBrush>
+
+      <!-- Shared Converters -->
+      <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+      <converters:ToBrushConverter x:Key="ToBrushConverter" />
+      <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft"/>
+      <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight"/>
+      <converters:CornerRadiusFilterConverter x:Key="TopCornerRadiusFilterConverter" Filter="TopLeft, TopRight"/>
+      <converters:CornerRadiusFilterConverter x:Key="BottomCornerRadiusFilterConverter" Filter="BottomLeft, BottomRight"/>
+      <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
+      <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 
-  <!-- Primitives -->
-  <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml" />
-  <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml" />
-  <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml" />
+      <ResourceDictionary.MergedDictionaries>
 
-  <!-- Controls -->
-  <!-- Note the ColorPicker and ColorView are unsupported in the default theme -->
-  <!-- These controls depend on fluent styles for TabControl, Button, TextBox, etc. -->
+        <!-- Primitives -->
+        <ResourceInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml" />
+        <ResourceInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml" />
+        <ResourceInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml" />
 
+        <!-- Controls -->
+        <!-- Note the ColorPicker and ColorView are unsupported in the default theme -->
+        <!-- These controls depend on fluent styles for TabControl, Button, TextBox, etc. -->
+
+      </ResourceDictionary.MergedDictionaries>
+    </ResourceDictionary>
+  </Styles.Resources>
 </Styles>

From bdd451cdf96179dc9c28659ee21db3cec8b8ee0b Mon Sep 17 00:00:00 2001
From: robloo <robloo@users.noreply.github.com>
Date: Sun, 31 Jul 2022 00:39:45 -0400
Subject: [PATCH 2/4] Adjust ColorPicker tab background corner radius

---
 .../Themes/Fluent/ColorPicker.xaml                | 15 ++++-----------
 .../Themes/Fluent/ColorView.xaml                  |  8 ++++++++
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
index 907b00dfff..50c5c06479 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
@@ -3,9 +3,6 @@
                     xmlns:controls="using:Avalonia.Controls"
                     x:CompileBindings="True">
 
-  <!-- This must follow OverlayCornerRadius -->
-  <CornerRadius x:Key="TopOverlayCornerRadius">5,5,0,0</CornerRadius>
-
   <ControlTheme x:Key="{x:Type ColorPicker}"
                 TargetType="ColorPicker">
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
@@ -25,7 +22,7 @@
                         Padding="0,0,10,0"
                         UseLayoutRounding="False">
           <DropDownButton.Styles>
-            <Style Selector="FlyoutPresenter.NoPadding">
+            <Style Selector="FlyoutPresenter.nopadding">
               <Setter Property="Padding" Value="0" />
             </Style>
           </DropDownButton.Styles>
@@ -45,8 +42,10 @@
             </Panel>
           </DropDownButton.Content>
           <DropDownButton.Flyout>
-            <Flyout FlyoutPresenterClasses="NoPadding">
+            <Flyout FlyoutPresenterClasses="nopadding"
+                    Placement="Bottom">
               <ColorView x:Name="FlyoutColorView"
+                         Classes="topoverlay"
                          Color="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                          ColorModel="{Binding ColorModel, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                          ColorSpectrumComponents="{TemplateBinding ColorSpectrumComponents}"
@@ -81,10 +80,4 @@
     </Setter>
   </ControlTheme>
 
-  <!-- Adjust Background within Flyout -->
-  <!-- Note: This is implemented but there seems to be an issue and the selector can't match across the Flyout -->
-  <!--<Style Selector="ColorPicker /template/ ColorView#FlyoutColorView /template/ Border#TabBackgroundBorder">
-    <Setter Property="CornerRadius" Value="{DynamicResource TopOverlayCornerRadius}" />
-  </Style>-->
-
 </ResourceDictionary>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
index 993745b1e5..153b4422ea 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
@@ -77,6 +77,8 @@
     17.7761 14 17.5 14H9.94999ZM7.5 16C6.67157 16 6 15.3284 6 14.5C6 13.6716 6.67157 13 7.5
     13C8.32843 13 9 13.6716 9 14.5C9 15.3284 8.32843 16 7.5 16Z
   </PathGeometry>
+  <!-- This must follow OverlayCornerRadius -->
+  <CornerRadius x:Key="TopOverlayCornerRadius">5,5,0,0</CornerRadius>
 
   <ControlTheme x:Key="{x:Type ColorView}"
                 TargetType="ColorView">
@@ -644,6 +646,12 @@
         </Grid>
       </ControlTemplate>
     </Setter>
+
+    <!-- Special style used to customize the top tab area corner radius -->
+    <Style Selector="^.topoverlay /template/ Border#TabBackgroundBorder">
+      <Setter Property="CornerRadius" Value="{DynamicResource TopOverlayCornerRadius}" />
+    </Style>
+
   </ControlTheme>
 
 </ResourceDictionary>

From f87052311bd6e3448a198000fd1fe1915c5ab7c6 Mon Sep 17 00:00:00 2001
From: robloo <robloo@users.noreply.github.com>
Date: Mon, 1 Aug 2022 22:01:38 -0400
Subject: [PATCH 3/4] Use resources to adjust tab background corner radius in
 ColorPicker

---
 .../Themes/Fluent/ColorPicker.xaml                   |  8 ++++++--
 .../Themes/Fluent/ColorView.xaml                     | 12 +++---------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
index 50c5c06479..797d6c90d7 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
@@ -45,7 +45,6 @@
             <Flyout FlyoutPresenterClasses="nopadding"
                     Placement="Bottom">
               <ColorView x:Name="FlyoutColorView"
-                         Classes="topoverlay"
                          Color="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                          ColorModel="{Binding ColorModel, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                          ColorSpectrumComponents="{TemplateBinding ColorSpectrumComponents}"
@@ -72,7 +71,12 @@
                          PaletteColors="{TemplateBinding PaletteColors}"
                          PaletteColumnCount="{TemplateBinding PaletteColumnCount}"
                          Palette="{TemplateBinding Palette}"
-                         SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
+                         SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                <ColorView.Resources>
+                  <!-- This radius must follow OverlayCornerRadius -->
+                  <CornerRadius x:Key="ColorViewTabBackgroundCornerRadius">5,5,0,0</CornerRadius>
+                </ColorView.Resources>
+              </ColorView>
             </Flyout>
           </DropDownButton.Flyout>
         </DropDownButton>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
index 153b4422ea..59cc48975f 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
@@ -77,8 +77,8 @@
     17.7761 14 17.5 14H9.94999ZM7.5 16C6.67157 16 6 15.3284 6 14.5C6 13.6716 6.67157 13 7.5
     13C8.32843 13 9 13.6716 9 14.5C9 15.3284 8.32843 16 7.5 16Z
   </PathGeometry>
-  <!-- This must follow OverlayCornerRadius -->
-  <CornerRadius x:Key="TopOverlayCornerRadius">5,5,0,0</CornerRadius>
+  <!-- This radius should follow ControlCornerRadius -->
+  <CornerRadius x:Key="ColorViewTabBackgroundCornerRadius">3</CornerRadius>
 
   <ControlTheme x:Key="{x:Type ColorView}"
                 TargetType="ColorView">
@@ -99,7 +99,7 @@
                   HorizontalAlignment="Stretch"
                   VerticalAlignment="Top"
                   Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"
-                  CornerRadius="{TemplateBinding CornerRadius}" />
+                  CornerRadius="{DynamicResource ColorViewTabBackgroundCornerRadius}" />
           <Border x:Name="ContentBackgroundBorder"
                   Grid.Row="0"
                   Grid.RowSpan="2"
@@ -646,12 +646,6 @@
         </Grid>
       </ControlTemplate>
     </Setter>
-
-    <!-- Special style used to customize the top tab area corner radius -->
-    <Style Selector="^.topoverlay /template/ Border#TabBackgroundBorder">
-      <Setter Property="CornerRadius" Value="{DynamicResource TopOverlayCornerRadius}" />
-    </Style>
-
   </ControlTheme>
 
 </ResourceDictionary>

From 53e7a741c9a476e83a4a0c89956715bac8cf42cc Mon Sep 17 00:00:00 2001
From: robloo <robloo@users.noreply.github.com>
Date: Mon, 1 Aug 2022 22:01:55 -0400
Subject: [PATCH 4/4] Switch back to default flyout placement in ColorPicker

---
 .../Themes/Fluent/ColorPicker.xaml                             | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
index 797d6c90d7..74a1df4991 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
@@ -42,8 +42,7 @@
             </Panel>
           </DropDownButton.Content>
           <DropDownButton.Flyout>
-            <Flyout FlyoutPresenterClasses="nopadding"
-                    Placement="Bottom">
+            <Flyout FlyoutPresenterClasses="nopadding">
               <ColorView x:Name="FlyoutColorView"
                          Color="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                          ColorModel="{Binding ColorModel, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"