From 92a075b46d080b7aa8217058312e12dd8133a446 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Wed, 8 Nov 2023 14:51:21 +0100
Subject: [PATCH] XAML styling

---
 .../Styles/Buttons.xaml                       | 201 +++++++++++-------
 1 file changed, 127 insertions(+), 74 deletions(-)

diff --git a/CommunityToolkit.App.Shared/Styles/Buttons.xaml b/CommunityToolkit.App.Shared/Styles/Buttons.xaml
index dc186c5..89e8332 100644
--- a/CommunityToolkit.App.Shared/Styles/Buttons.xaml
+++ b/CommunityToolkit.App.Shared/Styles/Buttons.xaml
@@ -1,4 +1,4 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
                     xmlns:controls="using:Microsoft.UI.Xaml.Controls"
@@ -7,59 +7,96 @@
 
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
-            <StaticResource x:Key="SubtleButtonBackground" ResourceKey="SubtleFillColorTransparent" />
-            <StaticResource x:Key="SubtleButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondary" />
-            <StaticResource x:Key="SubtleButtonBackgroundPressed" ResourceKey="SubtleFillColorTertiary" />
-            <StaticResource x:Key="SubtleButtonBackgroundDisabled" ResourceKey="SubtleFillColorTransparent" />
+            <StaticResource x:Key="SubtleButtonBackground"
+                            ResourceKey="SubtleFillColorTransparent" />
+            <StaticResource x:Key="SubtleButtonBackgroundPointerOver"
+                            ResourceKey="SubtleFillColorSecondary" />
+            <StaticResource x:Key="SubtleButtonBackgroundPressed"
+                            ResourceKey="SubtleFillColorTertiary" />
+            <StaticResource x:Key="SubtleButtonBackgroundDisabled"
+                            ResourceKey="SubtleFillColorTransparent" />
 
-            <StaticResource x:Key="SubtleButtonBorderBrush" ResourceKey="SubtleFillColorTransparent" />
-            <StaticResource x:Key="SubtleButtonBorderBrushPointerOver" ResourceKey="SubtleFillColorSecondary" />
-            <StaticResource x:Key="SubtleButtonBorderBrushPressed" ResourceKey="SubtleFillColorTertiary" />
-            <StaticResource x:Key="SubtleButtonBorderBrushDisabled" ResourceKey="SubtleFillColorTransparent" />
+            <StaticResource x:Key="SubtleButtonBorderBrush"
+                            ResourceKey="SubtleFillColorTransparent" />
+            <StaticResource x:Key="SubtleButtonBorderBrushPointerOver"
+                            ResourceKey="SubtleFillColorSecondary" />
+            <StaticResource x:Key="SubtleButtonBorderBrushPressed"
+                            ResourceKey="SubtleFillColorTertiary" />
+            <StaticResource x:Key="SubtleButtonBorderBrushDisabled"
+                            ResourceKey="SubtleFillColorTransparent" />
 
-            <StaticResource x:Key="SubtleButtonForeground" ResourceKey="TextFillColorPrimary" />
-            <StaticResource x:Key="SubtleButtonForegroundPointerOver" ResourceKey="TextFillColorPrimary" />
-            <StaticResource x:Key="SubtleButtonForegroundPressed" ResourceKey="TextFillColorSecondary" />
-            <StaticResource x:Key="SubtleButtonForegroundDisabled" ResourceKey="TextFillColorDisabled" />
+            <StaticResource x:Key="SubtleButtonForeground"
+                            ResourceKey="TextFillColorPrimary" />
+            <StaticResource x:Key="SubtleButtonForegroundPointerOver"
+                            ResourceKey="TextFillColorPrimary" />
+            <StaticResource x:Key="SubtleButtonForegroundPressed"
+                            ResourceKey="TextFillColorSecondary" />
+            <StaticResource x:Key="SubtleButtonForegroundDisabled"
+                            ResourceKey="TextFillColorDisabled" />
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="Light">
-            <StaticResource x:Key="SubtleButtonBackground" ResourceKey="SubtleFillColorTransparent" />
-            <StaticResource x:Key="SubtleButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondary" />
-            <StaticResource x:Key="SubtleButtonBackgroundPressed" ResourceKey="SubtleFillColorTertiary" />
-            <StaticResource x:Key="SubtleButtonBackgroundDisabled" ResourceKey="SubtleFillColorTransparent" />
+            <StaticResource x:Key="SubtleButtonBackground"
+                            ResourceKey="SubtleFillColorTransparent" />
+            <StaticResource x:Key="SubtleButtonBackgroundPointerOver"
+                            ResourceKey="SubtleFillColorSecondary" />
+            <StaticResource x:Key="SubtleButtonBackgroundPressed"
+                            ResourceKey="SubtleFillColorTertiary" />
+            <StaticResource x:Key="SubtleButtonBackgroundDisabled"
+                            ResourceKey="SubtleFillColorTransparent" />
 
-            <StaticResource x:Key="SubtleButtonBorderBrush" ResourceKey="SubtleFillColorTransparent" />
-            <StaticResource x:Key="SubtleButtonBorderBrushPointerOver" ResourceKey="SubtleFillColorSecondary" />
-            <StaticResource x:Key="SubtleButtonBorderBrushPressed" ResourceKey="SubtleFillColorTertiary" />
-            <StaticResource x:Key="SubtleButtonBorderBrushDisabled" ResourceKey="SubtleFillColorTransparent" />
+            <StaticResource x:Key="SubtleButtonBorderBrush"
+                            ResourceKey="SubtleFillColorTransparent" />
+            <StaticResource x:Key="SubtleButtonBorderBrushPointerOver"
+                            ResourceKey="SubtleFillColorSecondary" />
+            <StaticResource x:Key="SubtleButtonBorderBrushPressed"
+                            ResourceKey="SubtleFillColorTertiary" />
+            <StaticResource x:Key="SubtleButtonBorderBrushDisabled"
+                            ResourceKey="SubtleFillColorTransparent" />
 
-            <StaticResource x:Key="SubtleButtonForeground" ResourceKey="TextFillColorPrimary" />
-            <StaticResource x:Key="SubtleButtonForegroundPointerOver" ResourceKey="TextFillColorPrimary" />
-            <StaticResource x:Key="SubtleButtonForegroundPressed" ResourceKey="TextFillColorSecondary" />
-            <StaticResource x:Key="SubtleButtonForegroundDisabled" ResourceKey="TextFillColorDisabled" />
+            <StaticResource x:Key="SubtleButtonForeground"
+                            ResourceKey="TextFillColorPrimary" />
+            <StaticResource x:Key="SubtleButtonForegroundPointerOver"
+                            ResourceKey="TextFillColorPrimary" />
+            <StaticResource x:Key="SubtleButtonForegroundPressed"
+                            ResourceKey="TextFillColorSecondary" />
+            <StaticResource x:Key="SubtleButtonForegroundDisabled"
+                            ResourceKey="TextFillColorDisabled" />
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="HighContrast">
-            <StaticResource x:Key="SubtleButtonBackground" ResourceKey="SystemColorWindowColorBrush" />
-            <StaticResource x:Key="SubtleButtonBackgroundPointerOver" ResourceKey="SystemColorHighlightTextColorBrush" />
-            <StaticResource x:Key="SubtleButtonBackgroundPressed" ResourceKey="SystemColorWindowColorBrush" />
-            <StaticResource x:Key="SubtleButtonBackgroundDisabled" ResourceKey="SystemControlBackgroundBaseLowBrush" />
+            <StaticResource x:Key="SubtleButtonBackground"
+                            ResourceKey="SystemColorWindowColorBrush" />
+            <StaticResource x:Key="SubtleButtonBackgroundPointerOver"
+                            ResourceKey="SystemColorHighlightTextColorBrush" />
+            <StaticResource x:Key="SubtleButtonBackgroundPressed"
+                            ResourceKey="SystemColorWindowColorBrush" />
+            <StaticResource x:Key="SubtleButtonBackgroundDisabled"
+                            ResourceKey="SystemControlBackgroundBaseLowBrush" />
 
-            <StaticResource x:Key="SubtleButtonBorderBrush" ResourceKey="SystemColorWindowColorBrush" />
-            <StaticResource x:Key="SubtleButtonBorderBrushPointerOver" ResourceKey="SystemColorHighlightColorBrush" />
-            <StaticResource x:Key="SubtleButtonBorderBrushPressed" ResourceKey="SystemColorHighlightColorBrush" />
-            <StaticResource x:Key="SubtleButtonBorderBrushDisabled" ResourceKey="SystemColorGrayTextColor" />
+            <StaticResource x:Key="SubtleButtonBorderBrush"
+                            ResourceKey="SystemColorWindowColorBrush" />
+            <StaticResource x:Key="SubtleButtonBorderBrushPointerOver"
+                            ResourceKey="SystemColorHighlightColorBrush" />
+            <StaticResource x:Key="SubtleButtonBorderBrushPressed"
+                            ResourceKey="SystemColorHighlightColorBrush" />
+            <StaticResource x:Key="SubtleButtonBorderBrushDisabled"
+                            ResourceKey="SystemColorGrayTextColor" />
 
-            <StaticResource x:Key="SubtleButtonForeground" ResourceKey="SystemColorButtonTextColorBrush" />
-            <StaticResource x:Key="SubtleButtonForegroundPointerOver" ResourceKey="SystemControlHighlightBaseHighBrush" />
-            <StaticResource x:Key="SubtleButtonForegroundPressed" ResourceKey="SystemControlHighlightBaseHighBrush" />
-            <StaticResource x:Key="SubtleButtonForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+            <StaticResource x:Key="SubtleButtonForeground"
+                            ResourceKey="SystemColorButtonTextColorBrush" />
+            <StaticResource x:Key="SubtleButtonForegroundPointerOver"
+                            ResourceKey="SystemControlHighlightBaseHighBrush" />
+            <StaticResource x:Key="SubtleButtonForegroundPressed"
+                            ResourceKey="SystemControlHighlightBaseHighBrush" />
+            <StaticResource x:Key="SubtleButtonForegroundDisabled"
+                            ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
         </ResourceDictionary>
 
     </ResourceDictionary.ThemeDictionaries>
 
-    <Style x:Key="SubtleButtonStyle" TargetType="Button">
+    <Style x:Key="SubtleButtonStyle"
+           TargetType="Button">
         <Setter Property="Background" Value="{ThemeResource SubtleButtonBackground}" />
         <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
         <Setter Property="Foreground" Value="{ThemeResource SubtleButtonForeground}" />
@@ -77,22 +114,21 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
-                    <ContentPresenter
-                                x:Name="ContentPresenter"
-                                Padding="{TemplateBinding Padding}"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                muxc:AnimatedIcon.State="Normal"
-                                AutomationProperties.AccessibilityView="Raw"
-                                Background="{TemplateBinding Background}"
-                                BackgroundSizing="{TemplateBinding BackgroundSizing}"
-                                BorderBrush="{TemplateBinding BorderBrush}"
-                                BorderThickness="{TemplateBinding BorderThickness}"
-                                Content="{TemplateBinding Content}"
-                                ContentTemplate="{TemplateBinding ContentTemplate}"
-                                ContentTransitions="{TemplateBinding ContentTransitions}"
-                                CornerRadius="{TemplateBinding CornerRadius}"
-                                Foreground="{TemplateBinding Foreground}">
+                    <ContentPresenter x:Name="ContentPresenter"
+                                      Padding="{TemplateBinding Padding}"
+                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                      muxc:AnimatedIcon.State="Normal"
+                                      AutomationProperties.AccessibilityView="Raw"
+                                      Background="{TemplateBinding Background}"
+                                      BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                                      BorderBrush="{TemplateBinding BorderBrush}"
+                                      BorderThickness="{TemplateBinding BorderThickness}"
+                                      Content="{TemplateBinding Content}"
+                                      ContentTemplate="{TemplateBinding ContentTemplate}"
+                                      ContentTransitions="{TemplateBinding ContentTransitions}"
+                                      CornerRadius="{TemplateBinding CornerRadius}"
+                                      Foreground="{TemplateBinding Foreground}">
                         <ContentPresenter.BackgroundTransition>
                             <BrushTransition Duration="0:0:0.083" />
                         </ContentPresenter.BackgroundTransition>
@@ -101,14 +137,20 @@
                                 <VisualState x:Name="Normal" />
                                 <VisualState x:Name="PointerOver">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonBackgroundPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SubtleButtonBackgroundPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonBorderBrushPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SubtleButtonBorderBrushPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonForegroundPointerOver}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SubtleButtonForegroundPointerOver}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -117,14 +159,20 @@
                                 </VisualState>
                                 <VisualState x:Name="Pressed">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonBackgroundPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SubtleButtonBackgroundPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonBorderBrushPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SubtleButtonBorderBrushPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonForegroundPressed}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SubtleButtonForegroundPressed}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -133,14 +181,20 @@
                                 </VisualState>
                                 <VisualState x:Name="Disabled">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonBackgroundDisabled}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SubtleButtonBackgroundDisabled}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonBorderBrushDisabled}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SubtleButtonBorderBrushDisabled}" />
                                         </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonForegroundDisabled}" />
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
+                                                                       Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0"
+                                                                    Value="{ThemeResource SubtleButtonForegroundDisabled}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                     <VisualState.Setters>
@@ -155,9 +209,8 @@
             </Setter.Value>
         </Setter>
     </Style>
-</ResourceDictionary>
 
-<Style x:Key="CustomHyperlinkButtonStyle"
+    <Style x:Key="CustomHyperlinkButtonStyle"
            TargetType="HyperlinkButton">
         <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
         <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />