Proper theming and a few controls implemented

src/PixiEditor.Avalonia/PixiEditor.Avalonia/App.axaml

@@ -2,19 +2,10 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:themes="clr-namespace:PixiEditor.UI.Common.Themes;assembly=PixiEditor.UI.Common"
              x:Class="PixiEditor.Avalonia.App"
-             RequestedThemeVariant="Default">
+             RequestedThemeVariant="Dark">
              <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
 
     <Application.Styles>
         <themes:PixiEditorTheme />
-        <StyleInclude Source="avares://PixiEditor.UI.Common/Styles/PixiEditor.Controls.axaml"/>
     </Application.Styles>
-
-             <Application.Resources>
-                 <ResourceDictionary>
-                     <ResourceDictionary.MergedDictionaries>
-                         <ResourceInclude Source="avares://PixiEditor.UI.Common/Styles/PixiEditor.axaml"/>
-                     </ResourceDictionary.MergedDictionaries>
-                 </ResourceDictionary>
-             </Application.Resources>
 </Application>

src/PixiEditor.Avalonia/PixiEditor.Avalonia/App.axaml.cs

@@ -3,6 +3,7 @@ using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
 using PixiEditor.Avalonia.ViewModels;
 using PixiEditor.Avalonia.Views;
+using PixiEditor.UI.Common.Themes;
 using Splat;
 
 namespace PixiEditor.Avalonia;

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/MainView.axaml

@@ -6,14 +6,14 @@
              xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="PixiEditor.Avalonia.Views.MainView"
-             x:DataType="vm:MainViewModel">
+             x:DataType="vm:MainViewModel" Background="{DynamicResource ThemeBackgroundBrush}">
   <Design.DataContext>
     <!-- This only sets the DataContext for the previewer in an IDE,
          to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
     <vm:MainViewModel />
   </Design.DataContext>
 
-    <StackPanel Margin="10" HorizontalAlignment="Left">
+    <StackPanel Spacing="10" Margin="10" HorizontalAlignment="Left">
 
         <TextBlock Text="Text"/>
         <TextBlock Text="h1" Classes="h1"/>
@@ -23,6 +23,28 @@
 
         <TextBlock ui:Translator.Key="LANGUAGE" ui:Translator.TooltipKey="LANGUAGE"/>
 
+        <Button Content="Button"/>
+        <Button Content="Button Disabled" IsEnabled="False"/>
+
+        <CheckBox Content="CheckBox" IsThreeState="True"/>
+
+        <RadioButton Content="RadioButton"/>
+
+        <TextBox Text="TextBox"/>
+
+        <ComboBox SelectedIndex="0">
+            <ComboBoxItem Content="ComboBoxItem 1"/>
+            <ComboBoxItem Content="ComboBoxItem 2"/>
+            <ComboBoxItem Content="ComboBoxItem 3"/>
+        </ComboBox>
+
+        <ListBox SelectedIndex="0">
+            <ListBoxItem Content="ListBoxItem 1"/>
+            <ListBoxItem Content="ListBoxItem 2"/>
+            <ListBoxItem Content="ListBoxItem 3"/>
+        </ListBox>
+
+        <Slider Width="100" Value="50"/>
         <ProgressBar Width="100" Value="50"/>
     </StackPanel>
 

src/PixiEditor.UI.Common/Accents/Base.axaml

@@ -0,0 +1,46 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:system="clr-namespace:System;assembly=System.Runtime">
+
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Dark">
+            <Color x:Key="ThemeBackgroundColor">#252525</Color> <!--This is the lowest elevation color-->
+            <Color x:Key="ThemeBackgroundColor1">#2D2D30</Color>
+            <Color x:Key="AccentColor">#B00022</Color>
+
+            <Color x:Key="ThemeForegroundColor">#FFFFFF</Color>
+
+            <Color x:Key="ThemeControlLowColor">#252525</Color>
+            <Color x:Key="ThemeControlMidColor">#303030</Color>
+            <Color x:Key="ThemeControlHighColor">#404040</Color>
+            <Color x:Key="ThemeControlHighlightColor">#515151</Color>
+
+            <Color x:Key="ThemeBorderMidColor">#3F3F46</Color>
+            <Color x:Key="ThemeBorderHighColor">#4F4F4F</Color>
+
+            <system:Double x:Key="ThemeDisabledOpacity">0.4</system:Double>
+
+            <SolidColorBrush x:Key="ThemeBackgroundBrush" Color="{StaticResource ThemeBackgroundColor}" />
+            <SolidColorBrush x:Key="ThemeBackgroundBrush1" Color="{StaticResource ThemeBackgroundColor1}" />
+            <SolidColorBrush x:Key="AccentBrush" Color="{StaticResource AccentColor}" />
+
+            <SolidColorBrush x:Key="ThemeForegroundBrush" Color="{StaticResource ThemeForegroundColor}" />
+
+            <SolidColorBrush x:Key="ThemeControlLowBrush" Color="{StaticResource ThemeControlLowColor}" />
+            <SolidColorBrush x:Key="ThemeControlMidBrush" Color="{StaticResource ThemeControlMidColor}" />
+            <SolidColorBrush x:Key="ThemeControlHighBrush" Color="{StaticResource ThemeControlHighColor}" />
+            <SolidColorBrush x:Key="ThemeControlHighlightBrush" Color="{StaticResource ThemeControlHighlightColor}" />
+
+            <SolidColorBrush x:Key="ThemeBorderMidBrush" Color="{StaticResource ThemeBorderMidColor}" />
+            <SolidColorBrush x:Key="ThemeBorderHighBrush" Color="{StaticResource ThemeBorderHighColor}" />
+
+            <CornerRadius x:Key="ControlCornerRadius">5</CornerRadius>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+
+    <system:Double x:Key="FontSizeSmall">10</system:Double>
+    <system:Double x:Key="FontSizeNormal">12</system:Double>
+    <system:Double x:Key="FontSizeLarge">16</system:Double>
+    <FontFamily x:Key="ContentControlThemeFontFamily">fonts:Inter#Inter, $Default</FontFamily>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Button.axaml

@@ -0,0 +1,48 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <StackPanel Spacing="5">
+            <Button Content="Button"/>
+            <Button Content="Button" IsEnabled="False"/>
+        </StackPanel>
+    </Design.PreviewWith>
+
+    <ControlTheme TargetType="Button" x:Key="{x:Type Button}">
+        <Setter Property="Background" Value="{DynamicResource ThemeControlMidBrush}" />
+        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Padding" Value="10,0"/>
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+        <Setter Property="Height" Value="28"/>
+        <Setter Property="Template">
+            <ControlTemplate>
+                <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}"
+                                  RecognizesAccessKey="True"
+                                  TextElement.Foreground="{TemplateBinding Foreground}" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+            <Setter Property="Cursor" Value="Hand" />
+        </Style>
+        <Style Selector="^:pressed  /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ThemeControlHighBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+        </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/>
+            <Setter Property="Cursor" Value="Arrow" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/CheckBox.axaml

@@ -0,0 +1,70 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <StackPanel HorizontalAlignment="Center">
+            <CheckBox IsChecked="True" Content="Label"/>
+            <CheckBox IsChecked="False" Content="Label"/>
+            <CheckBox IsChecked="{x:Null}" IsThreeState="True" Content="Label"/>
+        </StackPanel>
+    </Design.PreviewWith>
+
+     <ControlTheme x:Key="{x:Type CheckBox}"
+                TargetType="CheckBox">
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
+    <Setter Property="Padding" Value="4,0,0,0" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="HorizontalContentAlignment" Value="Left" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid ColumnDefinitions="Auto,*">
+         <Border x:Name="border" Width="20" Height="20" CornerRadius="2.5"
+                 BorderBrush="{DynamicResource ThemeBorderMidColor}"
+                 Background="{DynamicResource ThemeControlLowColor}"
+                                      BorderThickness="1">
+            <Panel>
+                <Path FlowDirection="LeftToRight" Width="9" Height="9" x:Name="checkMark" Margin="1 1 0 0"
+                      Stroke="{DynamicResource AccentColor}" StrokeThickness="1.5"
+                      Data="M 0 4 L 3 8 8 0" />
+              <Path x:Name="indeterminateMark"
+                    FlowDirection="LeftToRight" Width="9" Height="9" Margin="1 1 0 0"
+                    Stroke="{DynamicResource AccentColor}" StrokeThickness="1.5"
+                    Data="M 0 8 L 8 0" />
+            </Panel>
+          </Border>
+          <ContentPresenter Name="PART_ContentPresenter"
+                            Grid.Column="1"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            IsVisible="{TemplateBinding Content,
+                                                        Converter={x:Static ObjectConverters.IsNotNull}}"
+                            RecognizesAccessKey="True"
+                            TextElement.Foreground="{TemplateBinding Foreground}" />
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^:pointerover /template/ Border#border">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}" />
+    </Style>
+    <Style Selector="^ /template/ Path#checkMark">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^ /template/ Path#indeterminateMark">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^:checked /template/ Path#checkMark">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+    <Style Selector="^:indeterminate /template/ Path#indeterminateMark">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+    <Style Selector="^:disabled /template/ Border#border">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/ContentControl.axaml

@@ -0,0 +1,20 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type ContentControl}"
+                  TargetType="ContentControl">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <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}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/ProgressBar.axaml

@@ -1,4 +1,4 @@
-<Styles xmlns="https://github.com/avaloniaui"
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Design.PreviewWith>
         <Border Padding="20">
@@ -6,9 +6,9 @@
         </Border>
     </Design.PreviewWith>
 
-    <Style Selector="ProgressBar">
+    <!--<Style Selector="ProgressBar">
         <Setter Property="Foreground" Value="{DynamicResource AccentColor}"/>
         <Setter Property="Background" Value="{DynamicResource Background1}"/>
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
-    </Style>
-</Styles>
+    </Style>-->
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/UserControl.axaml

@@ -0,0 +1,25 @@
+<Style xmlns="https://github.com/avaloniaui"
+       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+       Selector=":is(UserControl)">
+    <Style.Resources>
+        <ControlTheme x:Key="PixiEditorUserControl"
+                      TargetType="UserControl">
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <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}" />
+                </ControlTemplate>
+            </Setter>
+        </ControlTheme>
+    </Style.Resources>
+
+    <Setter Property="Theme" Value="{StaticResource PixiEditorUserControl}" />
+</Style>

src/PixiEditor.UI.Common/Controls/Window.axaml

@@ -0,0 +1,34 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+    <ControlTheme x:Key="{x:Type Window}"
+                  TargetType="Window">
+        <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+        <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
+        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+        <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Panel>
+                    <Border Name="PART_TransparencyFallback"
+                            IsHitTestVisible="False" />
+                    <Border Background="{TemplateBinding Background}"
+                            IsHitTestVisible="False" />
+                    <Panel Margin="{TemplateBinding WindowDecorationMargin}"
+                           Background="Transparent" />
+                    <VisualLayerManager>
+                        <VisualLayerManager.ChromeOverlayLayer>
+                            <TitleBar />
+                        </VisualLayerManager.ChromeOverlayLayer>
+                        <ContentPresenter Name="PART_ContentPresenter"
+                                          Margin="{TemplateBinding Padding}"
+                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                          Content="{TemplateBinding Content}"
+                                          ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    </VisualLayerManager>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/PixiEditor.UI.Common.csproj

@@ -25,8 +25,4 @@
     <ItemGroup>
       <UpToDateCheckInput Remove="Animations\Processing.axaml" />
     </ItemGroup>
-
-    <ItemGroup>
-      <Folder Include="UIBehaviors\" />
-    </ItemGroup>
 </Project>

src/PixiEditor.UI.Common/Styles/PixiEditor.Controls.axaml

@@ -1,6 +1,16 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <StyleInclude Source="../Controls/ProgressBar.axaml"/>
-    <StyleInclude Source="../Controls/TextBlock.axaml"/>
+    <Styles.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ContentControl.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Window.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Button.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/CheckBox.axaml"/>
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Styles.Resources>
+
+    <StyleInclude Source="avares://PixiEditor.UI.Common/Controls/UserControl.axaml" />
 </Styles>

src/PixiEditor.UI.Common/Styles/PixiEditor.axaml

@@ -1,15 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:system="clr-namespace:System;assembly=System.Runtime">
-
-    <ResourceDictionary.ThemeDictionaries>
-        <ResourceDictionary x:Key="Dark">
-            <SolidColorBrush x:Key="Background0" Color="#252525" /> <!--This is the lowest elevation color-->
-            <SolidColorBrush x:Key="Background1" Color="#2D2D30" />
-            <SolidColorBrush x:Key="AccentColor" Color="#B00022"/>
-            <FontFamily x:Key="OxygenFont">avares://PixiEditor.UI.Common/Assets/Fonts/Oxygen-Regular.ttf#Oxygen</FontFamily>
-        </ResourceDictionary>
-    </ResourceDictionary.ThemeDictionaries>
-
-    <CornerRadius x:Key="ControlCornerRadius">5</CornerRadius>
-</ResourceDictionary>

src/PixiEditor.UI.Common/Themes/PixiEditorTheme.axaml

@@ -0,0 +1,13 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        x:Class="PixiEditor.UI.Common.Themes.PixiEditorTheme"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Styles.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <MergeResourceInclude Source="/Accents/Base.axaml"/>
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Styles.Resources>
+
+    <StyleInclude Source="/Styles/PixiEditor.Controls.axaml"/>
+</Styles>

src/PixiEditor.UI.Common/Themes/PixiEditorTheme.axaml.cs

@@ -0,0 +1,12 @@
+using Avalonia.Markup.Xaml;
+using Avalonia.Styling;
+
+namespace PixiEditor.UI.Common.Themes;
+
+public class PixiEditorTheme : Styles
+{
+    public PixiEditorTheme(IServiceProvider? sp = null)
+    {
+        AvaloniaXamlLoader.Load(sp, this);
+    }
+}

src/PixiEditor.UI.Common/Themes/PixiEditorTheme.cs

@@ -1,9 +0,0 @@
-using Avalonia.Styling;
-using Avalonia.Themes.Fluent;
-
-namespace PixiEditor.UI.Common.Themes;
-
-public class PixiEditorTheme : FluentTheme
-{
-
-}

src/PixiEditor.UpdateInstaller/PixiEditor.UpdateInstaller/App.axaml

@@ -12,7 +12,7 @@
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="avares://PixiEditor.UI.Common/Styles/PixiEditor.axaml"/>
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Styles/Colors.axaml"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>