From 599119fa235b6d72b2a2a28779021458dbca0990 Mon Sep 17 00:00:00 2001
From: AL <26797547+Al12rs@users.noreply.github.com>
Date: Tue, 4 Jun 2024 13:09:29 +0200
Subject: [PATCH 1/3] Add new SurfaceTranslucentMid and High colors

---
 .../Resources/Palette/Colors/ElementColors.axaml            | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Resources/Palette/Colors/ElementColors.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Resources/Palette/Colors/ElementColors.axaml
index b4e10de6b9..be9d53a799 100644
--- a/src/Themes/NexusMods.Themes.NexusFluentDark/Resources/Palette/Colors/ElementColors.axaml
+++ b/src/Themes/NexusMods.Themes.NexusFluentDark/Resources/Palette/Colors/ElementColors.axaml
@@ -27,10 +27,14 @@
     <!-- NeutralTranslucent -->
 
     <!-- Colors -->
-    <StaticResource x:Key="SurfaceTranslucentLow" ResourceKey="BrandTranslucentLight100" />
+    <StaticResource x:Key="SurfaceTranslucentLow" ResourceKey="BrandTranslucentLight50" />
+    <StaticResource x:Key="SurfaceTranslucentMid" ResourceKey="BrandTranslucentLight100" />
+    <StaticResource x:Key="SurfaceTranslucentHigh" ResourceKey="BrandTranslucentLight200" />
 
     <!-- SolidColorBrushes -->
     <SolidColorBrush x:Key="SurfaceTranslucentLowBrush" Color="{StaticResource SurfaceTranslucentLow}" />
+    <SolidColorBrush x:Key="SurfaceTranslucentMidBrush" Color="{StaticResource SurfaceTranslucentMid}" />
+    <SolidColorBrush x:Key="SurfaceTranslucentHighBrush" Color="{StaticResource SurfaceTranslucentHigh}" />
 
     <!-- TransparentBrush -->
     <!-- NOTE: Avalonia treats Transparent color as click through, so it can't be used correctly as a background color. -->

From ed73b39ad4838dca29fd004ab489ef1edad8dd2c Mon Sep 17 00:00:00 2001
From: AL <26797547+Al12rs@users.noreply.github.com>
Date: Tue, 4 Jun 2024 14:03:17 +0200
Subject: [PATCH 2/3] Redo ImageButton Styling from scratch - Changed shape -
 Implemented all transparencies and border changes - Implemented all states -
 Fixed ToolTip inheriting the Styles for ImageButton

---
 .../Spine/Buttons/Icon/IconButton.axaml       |  22 +-
 .../Spine/Buttons/Image/ImageButton.axaml     |  35 +--
 .../Controls/Button/SpineButtonStyles.axaml   | 225 +++++++++++++-----
 3 files changed, 190 insertions(+), 92 deletions(-)

diff --git a/src/NexusMods.App.UI/Controls/Spine/Buttons/Icon/IconButton.axaml b/src/NexusMods.App.UI/Controls/Spine/Buttons/Icon/IconButton.axaml
index 5f68e0b0d6..21cedaa6b0 100644
--- a/src/NexusMods.App.UI/Controls/Spine/Buttons/Icon/IconButton.axaml
+++ b/src/NexusMods.App.UI/Controls/Spine/Buttons/Icon/IconButton.axaml
@@ -11,6 +11,7 @@
     xmlns:reactiveUi="http://reactiveui.net"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons">
+
     <Design.DataContext>
         <icon:IconButtonDesignViewModel />
     </Design.DataContext>
@@ -26,17 +27,16 @@
         <Button.Template>
             <ControlTemplate>
                 <Grid>
-                    <icons:UnifiedIcon
-                        Classes="HelpCircle"
-                        Size="20"
-                        HorizontalAlignment="Center"
-                        Margin="0"
-                        Padding="0"
-                        VerticalAlignment="Center" />
-                    <Border
-                        Classes="Rounded-full"
-                        Height="50"
-                        Width="50" />
+                    <icons:UnifiedIcon Classes="HelpCircle"
+                                       Size="20"
+                                       HorizontalAlignment="Center"
+                                       Margin="0"
+                                       Padding="0"
+                                       VerticalAlignment="Center" />
+                    <Border x:Name="IconButtonInnerBorder"
+                            Classes="Rounded-full"
+                            Height="50"
+                            Width="50" />
                 </Grid>
             </ControlTemplate>
         </Button.Template>
diff --git a/src/NexusMods.App.UI/Controls/Spine/Buttons/Image/ImageButton.axaml b/src/NexusMods.App.UI/Controls/Spine/Buttons/Image/ImageButton.axaml
index 6fecc16ce1..3454110cd9 100644
--- a/src/NexusMods.App.UI/Controls/Spine/Buttons/Image/ImageButton.axaml
+++ b/src/NexusMods.App.UI/Controls/Spine/Buttons/Image/ImageButton.axaml
@@ -1,6 +1,6 @@
 <reactiveUi:ReactiveUserControl
-    d:DesignHeight="90"
-    d:DesignWidth="90"
+    d:DesignHeight="150"
+    d:DesignWidth="150"
     mc:Ignorable="d"
     x:Class="NexusMods.App.UI.Controls.Spine.Buttons.Image.ImageButton"
     x:TypeArguments="buttons:IImageButtonViewModel"
@@ -15,27 +15,18 @@
         <buttons:ImageButtonDesignViewModel />
     </Design.DataContext>
 
-    <Button
-        Classes="Spine Image"
-        Height="64"
-        Width="64"
-        x:Name="Button">
+    <Button Classes="ImageButton"
+            x:Name="Button"
+            HorizontalAlignment="Stretch">
         <ToolTip.Tip>
-            <TextBlock x:Name="ToolTipTextBlock"/>
+            <TextBlock x:Name="ToolTipTextBlock" />
         </ToolTip.Tip>
-
-        <Grid>
-            <icons:UnifiedIcon
-                Size="50"
-                x:Name="Image">
-                <icons:UnifiedIcon.Clip>
-                    <EllipseGeometry Rect="0, 0, 50, 50" />
-                </icons:UnifiedIcon.Clip>
-            </icons:UnifiedIcon>
-            <Border
-                Height="50"
-                Width="50" />
-        </Grid>
-
+        <Border x:Name="ClippingBorder">
+            <Grid x:Name="InnerGrid">
+                <icons:UnifiedIcon x:Name="Image" />
+                <Rectangle x:Name="Mask" />
+                <Border x:Name="DecorationBorder" />
+            </Grid>
+        </Border>
     </Button>
 </reactiveUi:ReactiveUserControl>
diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/Button/SpineButtonStyles.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/Button/SpineButtonStyles.axaml
index 36740225f8..8465273901 100644
--- a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/Button/SpineButtonStyles.axaml
+++ b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/Button/SpineButtonStyles.axaml
@@ -8,31 +8,27 @@
             <Button Classes="Spine Icon Active Add IconTemplate" Margin="10" />
             <Button Classes="Spine Icon Inactive Home IconTemplate" Margin="10" />
             <Button Classes="Spine Icon Active Home IconTemplate" Margin="10" />
-            <Button Classes="Spine Image Inactive ImageTemplate" Margin="10" />
-            <Button Classes="Spine Image Active ImageTemplate" Margin="10" />
+            <Button Classes="ImageButton Inactive ImageTemplate" Margin="10" />
+            <Button Classes="ImageButton Active ImageTemplate" Margin="10" />
         </WrapPanel>
     </Design.PreviewWith>
 
     <!-- Styles Definitions-->
 
     <Style Selector="Button.Spine">
-        <Setter Property="CornerRadius" Value="{StaticResource Rounded-full}" />
         <Setter Property="HorizontalAlignment" Value="Center" />
         <Setter Property="ClipToBounds" Value="False" />
         <Setter Property="Background" Value="{StaticResource SurfaceTransparentBrush}" />
 
-        <Style Selector="^ Border">
-            <Setter Property="CornerRadius" Value="{StaticResource Rounded-full}" />
-        </Style>
 
         <Style Selector="^:pressed">
             <Setter Property="RenderTransform" Value="scale(0.9)" />
         </Style>
 
         <Style Selector="^.Inactive Border">
-            <Setter Property="BorderBrush" Value="{StaticResource SurfaceMidBrush}" />
+            <Setter Property="BorderBrush" Value="{StaticResource StrokeTranslucentWeakBrush}" />
             <Setter Property="Background" Value="{StaticResource SurfaceTransparentBrush}" />
-            <Setter Property="BorderThickness" Value="1" />
+            <Setter Property="BorderThickness" Value="2" />
 
             <Setter Property="Transitions">
                 <Transitions>
@@ -50,7 +46,7 @@
                                  Opacity="{StaticResource OpacityModerate}" />
             </Setter>
             <Setter Property="BorderBrush" Value="{StaticResource NeutralStrongBrush}" />
-            <Setter Property="BorderThickness" Value="1" />
+            <Setter Property="BorderThickness" Value="2" />
         </Style>
 
         <Style Selector="^.Active Border">
@@ -71,44 +67,6 @@
             <Setter Property="BorderThickness" Value="2" />
         </Style>
 
-        <!-- ImageButton Styles -->
-        <Style Selector="^.Image">
-
-            <!-- Set the template of the button for preview purposes, actual template is defined in `ImageButton.axaml` -->
-            <Style Selector="^.ImageTemplate">
-                <Setter Property="Template">
-                    <ControlTemplate>
-                        <Grid>
-                            <Image
-                                Height="50"
-                                Width="50"
-                                x:Name="Image"
-                                Source="avares://NexusMods.Themes.NexusFluentDark/Assets/DesignTime/cyberpunk_game.png">
-                                <Image.Clip>
-                                    <EllipseGeometry Rect="0, 0, 50, 50" />
-                                </Image.Clip>
-                            </Image>
-                            <Border
-                                Background="{DynamicResource TransparentBackground}"
-                                Height="50"
-                                Width="50" />
-                        </Grid>
-                    </ControlTemplate>
-                </Setter>
-            </Style>
-
-            <Style Selector="^.Inactive:pointerover Border">
-                <Setter Property="BorderBrush">
-                    <SolidColorBrush Color="{StaticResource NeutralStrong}"
-                                     Opacity="{StaticResource Alpha50}" />
-                </Setter>
-            </Style>
-
-            <Style Selector="^.Active:pointerover Border">
-                <Setter Property="BorderBrush" Value="{DynamicResource PrimaryModerateBrush}" />
-            </Style>
-        </Style>
-
         <!-- IconButton Styles -->
         <Style Selector="^.Icon">
 
@@ -117,30 +75,32 @@
                 <Setter Property="Template">
                     <ControlTemplate>
                         <Grid>
-                            <icons:UnifiedIcon
-                                Classes="HelpCircle"
-                                Size="20"
-                                HorizontalAlignment="Center"
-                                Margin="0"
-                                Padding="0"
-                                VerticalAlignment="Center" />
-                            <Border
-                                Height="50"
-                                Width="50" />
+                            <icons:UnifiedIcon Classes="HelpCircle"
+                                               Size="20"
+                                               HorizontalAlignment="Center"
+                                               Margin="0"
+                                               Padding="0"
+                                               VerticalAlignment="Center" />
+                            <Border Classes="Rounded-full"
+                                    Height="50"
+                                    Width="50">
+                            </Border>
                         </Grid>
                     </ControlTemplate>
                 </Setter>
             </Style>
 
+            <Setter Property="CornerRadius" Value="{StaticResource Rounded-full}" />
+
             <Style Selector="^.Add /template/ icons|UnifiedIcon">
                 <Setter Property="Value">
-                    <icons:IconValue MdiValueSetter="mdi-plus"/>
+                    <icons:IconValue MdiValueSetter="mdi-plus" />
                 </Setter>
             </Style>
 
             <Style Selector="^.Home /template/ icons|UnifiedIcon">
                 <Setter Property="Value">
-                    <icons:IconValue MdiValueSetter="mdi-home"/>
+                    <icons:IconValue MdiValueSetter="mdi-home" />
                 </Setter>
             </Style>
 
@@ -157,4 +117,151 @@
     </Style>
 
 
+    <!-- ImageButton Style-->
+    <Style Selector="Button.ImageButton">
+        <Setter Property="Background" Value="{StaticResource SurfaceTransparentBrush}" />
+        <Setter Property="CornerRadius" Value="{StaticResource Rounded-lg}" />
+        <Setter Property="Height" Value="48" />
+        <Setter Property="Width" Value="48" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="ClipToBounds" Value="False" />
+        
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Transitions">
+                <Transitions>
+                    <BoxShadowsTransition Duration="0:0:0.2" Property="BoxShadow" />
+                </Transitions>
+            </Setter>
+        </Style>
+
+        <Style Selector="^ Grid#OuterGrid">
+            <Setter Property="VerticalAlignment" Value="Center" />
+            <Setter Property="HorizontalAlignment" Value="Center" />
+        </Style>
+
+        <Style Selector="^ Border#ClippingBorder">
+            <Setter Property="CornerRadius" Value="{StaticResource Rounded-lg}" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="Height" Value="48" />
+            <Setter Property="Width" Value="48" />
+            <Setter Property="ClipToBounds" Value="True" />
+        </Style>
+        
+        <Style Selector="^ icons|UnifiedIcon#Image">
+            <Setter Property="VerticalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalAlignment" Value="Stretch" />
+            <Setter Property="Size" Value="48" />
+        </Style>
+
+        <Style Selector="^ Rectangle#Mask">
+            <Setter Property="VerticalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalAlignment" Value="Stretch" />
+            <Setter Property="Height" Value="48" />
+            <Setter Property="Width" Value="48" />
+            
+            <Setter Property="Transitions">
+                <Transitions>
+                    <BrushTransition Duration="0:0:0.2" Property="Fill" />
+                </Transitions>
+            </Setter>
+        </Style>
+
+        <Style Selector="^ Border#DecorationBorder">
+            <Setter Property="CornerRadius" Value="{StaticResource Rounded-lg}" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <!-- NOTE(Al12rs): Add 1px to workaround image edges showing past the decoration border -->
+            <Setter Property="Height" Value="49" />
+            <Setter Property="Width" Value="49" />
+            
+            <Setter Property="Transitions">
+                <Transitions>
+                    <BrushTransition Duration="0:0:0.2" Property="BorderBrush" />
+                    <ThicknessTransition Duration="0:0:0.2" Property="BorderThickness" />
+                </Transitions>
+            </Setter>
+        </Style>
+        
+
+        <Style Selector="^:pressed">
+            <Setter Property="RenderTransform" Value="scale(0.9)" />
+        </Style>
+
+        
+        <Style Selector="^.Inactive">
+            
+            <Style Selector="^ Rectangle#Mask">
+                <Setter Property="Fill" Value="{StaticResource BrandTranslucentDark200Brush}" />
+            </Style>
+            
+            <Style Selector="^ Border#DecorationBorder">
+                <!-- Border is 1px thicker than design to account that it is 1px larger -->
+                <Setter Property="BorderThickness" Value="2" />
+                <Setter Property="BorderBrush" Value="{StaticResource StrokeTranslucentWeakBrush}" />
+            </Style>
+            
+            
+            <Style Selector="^:pointerover Rectangle#Mask">
+                <Setter Property="Fill" Value="{StaticResource SurfaceTranslucentHighBrush}" />
+            </Style>
+
+            <Style Selector="^:pointerover Border#DecorationBorder">
+                <!-- Border is 1px thicker than design to account that it is 1px larger -->
+                <Setter Property="BorderThickness" Value="3" />
+                <Setter Property="BorderBrush" Value="{StaticResource StrokeTranslucentModerateBrush}" />
+            </Style>
+            
+        </Style>
+
+        <Style Selector="^.Active">
+            
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="BoxShadow">
+                    <extensions:BoxShadow BlurRadius="10" SpreadRadius="0" ShadowColor="{StaticResource NeutralTranslucentWeak}" />
+                </Setter>
+            </Style>
+            
+            <Style Selector="^ Border#DecorationBorder">
+                <!-- Border is 1px thicker than design to account that it is 1px larger -->
+                <Setter Property="BorderThickness" Value="3" />
+                <Setter Property="BorderBrush" Value="{StaticResource NeutralStrongBrush}" />
+            </Style>
+            
+            
+            <Style Selector="^:pointerover Rectangle#Mask">
+                <Setter Property="Fill" Value="{StaticResource SurfaceTranslucentHighBrush}" />
+            </Style>
+
+            <Style Selector="^:pointerover Border#DecorationBorder">
+                <!-- Border is 1px thicker than design to account that it is 1px larger -->
+                <Setter Property="BorderThickness" Value="3" />
+                <Setter Property="BorderBrush" Value="{StaticResource NeutralStrongBrush}" />
+            </Style>
+            
+        </Style>
+
+
+        <!--  ~1~ Set the template of the button for preview purposes, actual template is defined in `ImageButton.axaml` @1@ -->
+        <Style Selector="^.ImageTemplate">
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Border x:Name="ClippingBorder">
+                        <Grid x:Name="InnerGrid">
+                            <icons:UnifiedIcon x:Name="Image">
+                                <icons:UnifiedIcon.Value>
+                                    <icons:IconValue ImageSetter="avares://NexusMods.Themes.NexusFluentDark/Assets/DesignTime/cyberpunk_game.png" />
+                                </icons:UnifiedIcon.Value>
+                            </icons:UnifiedIcon>
+                            <Rectangle x:Name="Mask" />
+                            <Border x:Name="DecorationBorder" />
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+    </Style>
+
+
 </Styles>

From 87d73498b4f8615bec7dd49cfcab345ff402e9d8 Mon Sep 17 00:00:00 2001
From: AL <26797547+Al12rs@users.noreply.github.com>
Date: Tue, 4 Jun 2024 14:31:00 +0200
Subject: [PATCH 3/3] Update UIStyling guidelines to recommend not using
 generic selectors

---
 .../development-guidelines/UIStylingGuidelines.md | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/docs/development-guidelines/UIStylingGuidelines.md b/docs/development-guidelines/UIStylingGuidelines.md
index 66e8454c6f..740ac18128 100644
--- a/docs/development-guidelines/UIStylingGuidelines.md
+++ b/docs/development-guidelines/UIStylingGuidelines.md
@@ -29,15 +29,20 @@ Each setter element identifies the property that will be changed by name, and th
 
 !!! example
 
-    ```xml
-    <Style Selector="selector syntax">
-         <Setter Property="property name" Value="new value"/>
+```xml
+<Style Selector="selector syntax">
+    <Setter Property="property name" Value="new value"/>
          ...
-    </Style>
-    ```
+</Style>
+```
 
 The Avalonia UI style selector syntax is analogous to that used by CSS (cascading style sheets).
 
+!!! warning "If selectors are not made specific enough, ToolTips and Context menu contents will also be affected"
+
+Selectors should either use the `x:Name`, a Class or the hierarchical path of the control to be styled, 
+to avoid affecting other controls of the same type. 
+
 ### Example
 
 This is an example of how a style is written and applied to a `Control` element, with a style class to help selection: