From c8dc3ff29b08a5d37a8f1f3c5c9b0ccdb54a1c2c Mon Sep 17 00:00:00 2001
From: Steven Kirk <grokys@gmail.com>
Date: Fri, 26 Feb 2016 15:26:56 +0100
Subject: [PATCH] Default theme now uses style resources.

---
 .../Presenters/TextPresenter.cs               | 11 ++--
 src/Perspex.Styling/Styling/Setter.cs         | 36 +++++++------
 .../Accents/BaseLight.paml                    | 51 ++++++++-----------
 src/Perspex.Themes.Default/Button.paml        | 16 +++---
 src/Perspex.Themes.Default/CheckBox.paml      | 11 ++--
 src/Perspex.Themes.Default/DropDown.paml      | 18 +++----
 src/Perspex.Themes.Default/GridSplitter.paml  |  8 +--
 src/Perspex.Themes.Default/ListBox.paml       |  6 ++-
 src/Perspex.Themes.Default/MenuItem.paml      | 26 +++++-----
 src/Perspex.Themes.Default/PopupRoot.paml     |  1 +
 src/Perspex.Themes.Default/ProgressBar.paml   |  4 +-
 src/Perspex.Themes.Default/RadioButton.paml   | 12 +++--
 src/Perspex.Themes.Default/ScrollBar.paml     |  3 +-
 src/Perspex.Themes.Default/Separator.paml     |  8 +--
 src/Perspex.Themes.Default/TabStripItem.paml  |  6 +--
 src/Perspex.Themes.Default/TextBox.paml       | 20 ++++----
 src/Perspex.Themes.Default/ToggleButton.paml  | 18 +++----
 src/Perspex.Themes.Default/ToolTip.paml       |  5 +-
 src/Perspex.Themes.Default/TreeView.paml      |  9 ++--
 src/Perspex.Themes.Default/TreeViewItem.paml  |  2 +-
 src/Perspex.Themes.Default/Window.paml        |  3 +-
 21 files changed, 145 insertions(+), 129 deletions(-)

diff --git a/src/Perspex.Controls/Presenters/TextPresenter.cs b/src/Perspex.Controls/Presenters/TextPresenter.cs
index 625d58d9dd..284684ab6e 100644
--- a/src/Perspex.Controls/Presenters/TextPresenter.cs
+++ b/src/Perspex.Controls/Presenters/TextPresenter.cs
@@ -5,6 +5,7 @@ using System;
 using System.Linq;
 using System.Reactive.Linq;
 using Perspex.Media;
+using Perspex.Styling;
 using Perspex.Threading;
 using Perspex.VisualTree;
 
@@ -22,10 +23,9 @@ namespace Perspex.Controls.Presenters
             TextBox.SelectionEndProperty.AddOwner<TextPresenter>();
 
         private readonly DispatcherTimer _caretTimer;
-
         private bool _caretBlink;
-
         private IObservable<bool> _canScrollHorizontally;
+        private Brush _highlightBrush;
 
         static TextPresenter()
         {
@@ -85,11 +85,14 @@ namespace Perspex.Controls.Presenters
                 var length = Math.Max(selectionStart, selectionEnd) - start;
                 var rects = FormattedText.HitTestTextRange(start, length);
 
-                var brush = new SolidColorBrush(0xff086f9e);
+                if (_highlightBrush == null)
+                {
+                    _highlightBrush = (Brush)this.FindStyleResource("HighlightBrush");
+                }
 
                 foreach (var rect in rects)
                 {
-                    context.FillRectangle(brush, rect);
+                    context.FillRectangle(_highlightBrush, rect);
                 }
             }
 
diff --git a/src/Perspex.Styling/Styling/Setter.cs b/src/Perspex.Styling/Styling/Setter.cs
index d31f7a3d66..c37b156f07 100644
--- a/src/Perspex.Styling/Styling/Setter.cs
+++ b/src/Perspex.Styling/Styling/Setter.cs
@@ -101,25 +101,29 @@ namespace Perspex.Styling
                 else
                 {
                     var sourceInstance = binding.Initiate(control, Property);
-                    InstancedBinding activatedInstance;
 
-                    if (sourceInstance.Subject != null)
+                    if (sourceInstance != null)
                     {
-                        var activated = new ActivatedSubject(activator, sourceInstance.Subject, description);
-                        activatedInstance = new InstancedBinding(activated, sourceInstance.Mode, sourceInstance.Priority);
-                    }
-                    else if (sourceInstance.Observable != null)
-                    {
-                        var activated = new ActivatedObservable(activator, sourceInstance.Observable, description);
-                        activatedInstance = new InstancedBinding(activated, sourceInstance.Mode, sourceInstance.Priority);
-                    }
-                    else
-                    {
-                        var activated = new ActivatedValue(activator, sourceInstance.Value, description);
-                        activatedInstance = new InstancedBinding(activated, sourceInstance.Mode, sourceInstance.Priority);
-                    }
+                        InstancedBinding activatedInstance;
+
+                        if (sourceInstance.Subject != null)
+                        {
+                            var activated = new ActivatedSubject(activator, sourceInstance.Subject, description);
+                            activatedInstance = new InstancedBinding(activated, sourceInstance.Mode, sourceInstance.Priority);
+                        }
+                        else if (sourceInstance.Observable != null)
+                        {
+                            var activated = new ActivatedObservable(activator, sourceInstance.Observable, description);
+                            activatedInstance = new InstancedBinding(activated, sourceInstance.Mode, sourceInstance.Priority);
+                        }
+                        else
+                        {
+                            var activated = new ActivatedValue(activator, sourceInstance.Value, description);
+                            activatedInstance = new InstancedBinding(activated, BindingMode.OneWay, sourceInstance.Priority);
+                        }
 
-                    BindingOperations.Apply(control, Property, activatedInstance, null);
+                        BindingOperations.Apply(control, Property, activatedInstance, null);
+                    }
                 }
             }
         }
diff --git a/src/Perspex.Themes.Default/Accents/BaseLight.paml b/src/Perspex.Themes.Default/Accents/BaseLight.paml
index 0769dbbe0f..a9360b4297 100644
--- a/src/Perspex.Themes.Default/Accents/BaseLight.paml
+++ b/src/Perspex.Themes.Default/Accents/BaseLight.paml
@@ -1,36 +1,29 @@
 <Style xmlns="https://github.com/perspex"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-       xmlns:mut="https://github.com/perspex/mutable">
+       xmlns:mut="https://github.com/perspex/mutable"
+       xmlns:sys="clr-namespace:System;assembly=mscorlib">
   <Style.Resources>
-    <Color x:Key="SystemAltHighColor">#FF000000</Color>
-    <Color x:Key="SystemAltLowColor">#33000000</Color>
-    <Color x:Key="SystemAltMediumColor">#99000000</Color>
-    <Color x:Key="SystemAltMediumHighColor">#CC000000</Color>
-    <Color x:Key="SystemAltMediumLowColor">#66000000</Color>
-    <Color x:Key="SystemBaseHighColor">#FFFFFFFF</Color>
-    <Color x:Key="SystemBaseLowColor">#33FFFFFF</Color>
-    <Color x:Key="SystemBaseMediumColor">#99FFFFFF</Color>
-    <Color x:Key="SystemBaseMediumHighColor">#CCFFFFFF</Color>
-    <Color x:Key="SystemBaseMediumLowColor">#66FFFFFF</Color>
-    <Color x:Key="SystemChromeAltLowColor">#FFF2F2F2</Color>
-    <Color x:Key="SystemChromeBlackHighColor">#FF000000</Color>
-    <Color x:Key="SystemChromeBlackLowColor">#33000000</Color>
-    <Color x:Key="SystemChromeBlackMediumLowColor">#66000000</Color>
-    <Color x:Key="SystemChromeBlackMediumColor">#CC000000</Color>
-    <Color x:Key="SystemChromeDisabledHighColor">#FF333333</Color>
-    <Color x:Key="SystemChromeDisabledLowColor">#FF858585</Color>
-    <Color x:Key="SystemChromeHighColor">#FF767676</Color>
-    <Color x:Key="SystemChromeLowColor">#FF171717</Color>
-    <Color x:Key="SystemChromeMediumColor">#FF1F1F1F</Color>
-    <Color x:Key="SystemChromeMediumLowColor">#FF2B2B2B</Color>
-    <Color x:Key="SystemChromeWhiteColor">#FFFFFFFF</Color>
-    <Color x:Key="SystemListLowColor">#19FFFFFF</Color>
-    <Color x:Key="SystemListMediumColor">#33FFFFFF</Color>
+    <SolidColorBrush x:Key="ThemeBackgroundBrush">#FFFFFFFF</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeBorderLightBrush">#FFAAAAAA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeBorderMidBrush">#FF888888</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeBorderDarkBrush">#FF333333</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeControlLightBrush">#FFFFFFFF</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeControlMidBrush">#FFAAAAAA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeControlDarkBrush">#FF888888</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeForegroundBrush">#FF000000</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeForegroundLightBrush">#FF808080</SolidColorBrush>
 
-    <Color x:Key="FooColor">Red</Color>
+    <SolidColorBrush x:Key="HighlightBrush">#FF086F9E</SolidColorBrush>    
+    <SolidColorBrush x:Key="ThemeAccentBrush">#CC119EDA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeAccentBrush2">#99119EDA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeAccentBrush3">#66119EDA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeAccentBrush4">#33119EDA</SolidColorBrush>
 
-    <!--<mut:SolidColorBrush x:Key="SystemControlBackgroundBaseHighBrush" Color="{StyleResource SystemBaseHighColor}"/>
-    <mut:SolidColorBrush x:Key="SystemControlBackgroundBaseLowBrush" Color="{StyleResource SystemBaseLowColor}"/>
-    <mut:SolidColorBrush x:Key="FooBrush" Color="{StyleResource FooColor}"/>-->
+    <sys:Double x:Key="ThemeBorderThickness">2</sys:Double>
+    <sys:Double x:Key="ThemeDisabledOpacity">0.5</sys:Double>
+
+    <sys:Double x:Key="FontSizeSmall">10</sys:Double>
+    <sys:Double x:Key="FontSizeNormal">12</sys:Double>
+    <sys:Double x:Key="FontSizeLarge">16</sys:Double>
   </Style.Resources>
 </Style>
\ No newline at end of file
diff --git a/src/Perspex.Themes.Default/Button.paml b/src/Perspex.Themes.Default/Button.paml
index 7cfd1e7f35..baf85381bc 100644
--- a/src/Perspex.Themes.Default/Button.paml
+++ b/src/Perspex.Themes.Default/Button.paml
@@ -1,15 +1,15 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="Button">
-    <Setter Property="Background" Value="#ffaaaaaa"/>
-    <Setter Property="BorderBrush" Value="#ffaaaaaa"/>
-    <Setter Property="BorderThickness" Value="2"/>
-    <Setter Property="Foreground" Value="Black"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlMidBrush}"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderLightBrush}"/>
+    <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
+    <Setter Property="Foreground" Value="{StyleResource ThemeForegroundBrush}"/>
     <Setter Property="HorizontalContentAlignment" Value="Center"/>
     <Setter Property="VerticalContentAlignment" Value="Center"/>
+    <Setter Property="Padding" Value="4"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border Name="border"
-                Padding="3"
                 Background="{TemplateBinding Background}"
                 BorderBrush="{TemplateBinding BorderBrush}"
                 BorderThickness="{TemplateBinding BorderThickness}">
@@ -24,12 +24,12 @@
     </Setter>
   </Style>
   <Style Selector="Button:pointerover /template/ Border#border">
-    <Setter Property="BorderBrush" Value="#ff888888"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
   </Style>
   <Style Selector="Button:pressed  /template/ Border#border">
-    <Setter Property="Background" Value="#ff888888"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlDarkBrush}"/>
   </Style>
   <Style Selector="Button:disabled">
-    <Setter Property="Opacity" Value="0.5"/>
+    <Setter Property="Opacity" Value="{StyleResource ThemeDisabledOpacity}"/>
   </Style>
 </Styles>
\ No newline at end of file
diff --git a/src/Perspex.Themes.Default/CheckBox.paml b/src/Perspex.Themes.Default/CheckBox.paml
index cea4b2d114..d05e8b5cf6 100644
--- a/src/Perspex.Themes.Default/CheckBox.paml
+++ b/src/Perspex.Themes.Default/CheckBox.paml
@@ -1,7 +1,7 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="CheckBox">
-    <Setter Property="BorderBrush" Value="#ff333333"/>
-    <Setter Property="BorderThickness" Value="2"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+    <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Grid ColumnDefinitions="Auto,*">
@@ -12,7 +12,7 @@
                   Height="18"
                   VerticalAlignment="Center">
             <Path Name="checkMark"
-                  Fill="#ff333333"
+                  Fill="{StyleResource HighlightBrush}"
                   Width="11"
                   Height="10"
                   Stretch="Uniform"
@@ -29,6 +29,9 @@
       </ControlTemplate>
     </Setter>
   </Style>
+  <Style Selector="CheckBox:pointerover /template/ Border#border">
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderDarkBrush}"/>
+  </Style>
   <Style Selector="CheckBox /template/ Path#checkMark">
     <Setter Property="IsVisible" Value="False"/>
   </Style>
@@ -36,6 +39,6 @@
     <Setter Property="IsVisible" Value="True"/>
   </Style>
   <Style Selector="CheckBox:disabled /template/ Border#border">
-    <Setter Property="Opacity" Value="0.5"/>
+    <Setter Property="Opacity" Value="{StyleResource ThemeDisabledOpacity}"/>
   </Style>
 </Styles>
\ No newline at end of file
diff --git a/src/Perspex.Themes.Default/DropDown.paml b/src/Perspex.Themes.Default/DropDown.paml
index d1646ac21c..37dd47d49a 100644
--- a/src/Perspex.Themes.Default/DropDown.paml
+++ b/src/Perspex.Themes.Default/DropDown.paml
@@ -1,11 +1,12 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="DropDown">
-    <Setter Property="BorderBrush" Value="#ff707070"/>
-    <Setter Property="BorderThickness" Value="2"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+    <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
     <Setter Property="Padding" Value="4"/>
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Background="{TemplateBinding Background}"
+        <Border Name="border"
+                Background="{TemplateBinding Background}"
                 BorderBrush="{TemplateBinding BorderBrush}"
                 BorderThickness="{TemplateBinding BorderThickness}">
           <Grid ColumnDefinitions="*,Auto">
@@ -20,7 +21,7 @@
                           Focusable="False"
                           IsChecked="{TemplateBinding IsDropDownOpen, Mode=TwoWay}"
                           Grid.Column="1">
-              <Path Fill="Black"
+              <Path Fill="{StyleResource ThemeForegroundBrush}"
                     Width="8"
                     Height="4"
                     Stretch="Uniform"
@@ -33,7 +34,7 @@
                    MinWidth="{TemplateBinding Path=Bounds.Width}"
                    PlacementTarget="{TemplateBinding}"
                    StaysOpen="False">
-              <Border BorderBrush="Black"
+              <Border BorderBrush="{StyleResource ThemeBorderMidBrush}"
                       BorderThickness="1">
                 <ItemsPresenter Name="PART_ItemsPresenter"
                                 Items="{TemplateBinding Items}" 
@@ -45,10 +46,7 @@
       </ControlTemplate>
     </Setter>
   </Style>
-  <Style Selector="CheckBox /template/ Path#checkMark">
-    <Setter Property="IsVisible" Value="False"/>
-  </Style>
-  <Style Selector="CheckBox:checked /template/ Path#checkMark">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="DropDown:pointerover /template/ Border#border">
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderDarkBrush}"/>
   </Style>
 </Styles>
\ No newline at end of file
diff --git a/src/Perspex.Themes.Default/GridSplitter.paml b/src/Perspex.Themes.Default/GridSplitter.paml
index 6c5f936ec2..f6137af74c 100644
--- a/src/Perspex.Themes.Default/GridSplitter.paml
+++ b/src/Perspex.Themes.Default/GridSplitter.paml
@@ -1,7 +1,7 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="GridSplitter:vertical">
     <Setter Property="Width" Value="6"/>
-    <Setter Property="Background" Value="LightGray"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlLightBrush}"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border Background="{TemplateBinding Background}">
@@ -11,7 +11,7 @@
                 <Setter Property="HorizontalAlignment" Value="Center"/>
                 <Setter Property="Width" Value="4"/>
                 <Setter Property="Height" Value="4"/>
-                <Setter Property="Fill" Value="#404040"/>
+                <Setter Property="Fill" Value="{StyleResource ThemeControlMidBrush}"/>
                 <Setter Property="Margin" Value="1"/>
               </Style>
             </StackPanel.Styles>
@@ -25,7 +25,7 @@
   </Style>
   <Style Selector="GridSplitter:horizontal">
     <Setter Property="Height" Value="6"/>
-    <Setter Property="Background" Value="LightGray"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlLightBrush}"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border Background="{TemplateBinding Background}">
@@ -35,7 +35,7 @@
                 <Setter Property="VerticalAlignment" Value="Center"/>
                 <Setter Property="Width" Value="4"/>
                 <Setter Property="Height" Value="4"/>
-                <Setter Property="Fill" Value="#404040"/>
+                <Setter Property="Fill" Value="{StyleResource ThemeControlMidBrush}"/>
                 <Setter Property="Margin" Value="1"/>
               </Style>
             </StackPanel.Styles>
diff --git a/src/Perspex.Themes.Default/ListBox.paml b/src/Perspex.Themes.Default/ListBox.paml
index 2a151889a0..951a2ef575 100644
--- a/src/Perspex.Themes.Default/ListBox.paml
+++ b/src/Perspex.Themes.Default/ListBox.paml
@@ -1,6 +1,7 @@
 <Style xmlns="https://github.com/perspex" Selector="ListBox">
-  <Setter Property="BorderBrush" Value="Black"/>
-  <Setter Property="BorderThickness" Value="1"/>
+  <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+  <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
+  <Setter Property="Padding" Value="4"/>
   <Setter Property="Template">
     <ControlTemplate>
       <Border Background="{TemplateBinding Background}"
@@ -10,6 +11,7 @@
           <ItemsPresenter Name="PART_ItemsPresenter"
                           Items="{TemplateBinding Items}"
                           ItemsPanel="{TemplateBinding ItemsPanel}"
+                          Margin="{TemplateBinding Padding}"
                           MemberSelector="{TemplateBinding MemberSelector}"/>
         </ScrollViewer>
       </Border>
diff --git a/src/Perspex.Themes.Default/MenuItem.paml b/src/Perspex.Themes.Default/MenuItem.paml
index b9ba42eac5..2011bb041b 100644
--- a/src/Perspex.Themes.Default/MenuItem.paml
+++ b/src/Perspex.Themes.Default/MenuItem.paml
@@ -37,7 +37,7 @@
             </ContentPresenter>
             <Path Name="rightArrow"
                   Data="M0,0L4,3.5 0,7z"
-                  Fill="#ff212121"
+                  Fill="{StyleResource ThemeForegroundBrush}"
                   Margin="10,0,0,0"
                   VerticalAlignment="Center"
                   Grid.Column="3"/>
@@ -46,17 +46,17 @@
                    StaysOpen="True"
                    IsOpen="{TemplateBinding Path=IsSubMenuOpen, Mode=TwoWay}">
               <Border Background="{TemplateBinding Background}"
-                      BorderBrush="#ff999999"
-                      BorderThickness="1"
-                      Padding="2">
+                      BorderBrush="{StyleResource ThemeBorderMidBrush}"
+                      BorderThickness="1">
                 <ScrollViewer>
                   <Panel>
                     <ItemsPresenter Name="PART_ItemsPresenter"
                                     Items="{TemplateBinding Items}"
                                     ItemsPanel="{TemplateBinding ItemsPanel}"
+                                    Margin="2"
                                     MemberSelector="{TemplateBinding MemberSelector}"/>
                     <Rectangle Name="iconSeparator"
-                               Fill="#ffd7d7d7"
+                               Fill="{StyleResource ThemeControlMidBrush}"
                                HorizontalAlignment="Left"
                                IsHitTestVisible="False"
                                Margin="29,2,0,2"
@@ -92,17 +92,17 @@
                    IsOpen="{TemplateBinding Path=IsSubMenuOpen, Mode=TwoWay}"
                    StaysOpen="True">
               <Border Background="{TemplateBinding Background}"
-                      BorderBrush="#ff999999"
-                      BorderThickness="1"
-                      Padding="2">
+                      BorderBrush="{StyleResource ThemeBorderMidBrush}"
+                      BorderThickness="1">
                 <ScrollViewer>
                   <Panel>
                     <ItemsPresenter Name="PART_ItemsPresenter"
                                     Items="{TemplateBinding Items}"
                                     ItemsPanel="{TemplateBinding ItemsPanel}"
+                                    Margin="2"
                                     MemberSelector="{TemplateBinding MemberSelector}"/>
                     <Rectangle Name="iconSeparator"
-                               Fill="#ffd7d7d7"
+                               Fill="{StyleResource ThemeControlMidBrush}"
                                HorizontalAlignment="Left"
                                IsHitTestVisible="False"
                                Margin="29,2,0,2"
@@ -118,13 +118,13 @@
   </Style>
 
   <Style Selector="MenuItem:selected /template/ Border#root">
-    <Setter Property="Background" Value="#3d26a0da"/>
-    <Setter Property="BorderBrush" Value="#ff26a0da"/>
+    <Setter Property="Background" Value="{StyleResource ThemeAccentBrush4}"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeAccentBrush}"/>
   </Style>
 
   <Style Selector="MenuItem:pointerover /template/ Border#root">
-    <Setter Property="Background" Value="#3d26a0da"/>
-    <Setter Property="BorderBrush" Value="#ff26a0da"/>
+    <Setter Property="Background" Value="{StyleResource ThemeAccentBrush4}"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeAccentBrush}"/>
   </Style>
 
   <Style Selector="MenuItem:empty /template/ Path#rightArrow">
diff --git a/src/Perspex.Themes.Default/PopupRoot.paml b/src/Perspex.Themes.Default/PopupRoot.paml
index 61a1c33cfb..4f620a25e2 100644
--- a/src/Perspex.Themes.Default/PopupRoot.paml
+++ b/src/Perspex.Themes.Default/PopupRoot.paml
@@ -1,4 +1,5 @@
 <Style xmlns="https://github.com/perspex" Selector="PopupRoot">
+  <Setter Property="Background" Value="{StyleResource ThemeBackgroundBrush}"/>
   <Setter Property="Template">
     <ControlTemplate>
       <Border Background="{TemplateBinding Background}">
diff --git a/src/Perspex.Themes.Default/ProgressBar.paml b/src/Perspex.Themes.Default/ProgressBar.paml
index 68e3737352..181cba3f4c 100644
--- a/src/Perspex.Themes.Default/ProgressBar.paml
+++ b/src/Perspex.Themes.Default/ProgressBar.paml
@@ -1,6 +1,6 @@
 <Style xmlns="https://github.com/perspex" Selector="ProgressBar">
-  <Setter Property="Background" Value="#ffdddddd"/>
-  <Setter Property="Foreground" Value="#ffbee6fd"/>
+  <Setter Property="Background" Value="{StyleResource ThemeAccentBrush4}"/>
+  <Setter Property="Foreground" Value="{StyleResource ThemeAccentBrush}"/>
   <Setter Property="MinHeight" Value="14"/>
   <Setter Property="MinWidth" Value="200"/>
   <Setter Property="Template">
diff --git a/src/Perspex.Themes.Default/RadioButton.paml b/src/Perspex.Themes.Default/RadioButton.paml
index a310019c31..d0d43b92b2 100644
--- a/src/Perspex.Themes.Default/RadioButton.paml
+++ b/src/Perspex.Themes.Default/RadioButton.paml
@@ -1,17 +1,18 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="RadioButton">
-    <Setter Property="BorderBrush" Value="#ff333333"/>
-    <Setter Property="BorderThickness" Value="2"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+    <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Grid ColumnDefinitions="Auto,*">
-          <Ellipse Stroke="{TemplateBinding BorderBrush}"
+          <Ellipse Name="border"
+                   Stroke="{TemplateBinding BorderBrush}"
                    StrokeThickness="{TemplateBinding BorderThickness}"
                    Width="18"
                    Height="18"
                    VerticalAlignment="Center"/>
           <Ellipse Name="checkMark"
-                   Fill="{TemplateBinding BorderBrush}"
+                   Fill="{StyleResource HighlightBrush}"
                    Width="10"
                    Height="10"
                    Stretch="Uniform"
@@ -26,6 +27,9 @@
       </ControlTemplate>
     </Setter>
   </Style>
+  <Style Selector="RadioButton:pointerover /template/ Ellipse#border">
+    <Setter Property="Stroke" Value="{StyleResource ThemeBorderDarkBrush}"/>
+  </Style>
   <Style Selector="RadioButton /template/ Ellipse#checkMark">
     <Setter Property="IsVisible" Value="False"/>
   </Style>
diff --git a/src/Perspex.Themes.Default/ScrollBar.paml b/src/Perspex.Themes.Default/ScrollBar.paml
index de0aa2fd4c..9d2a15854a 100644
--- a/src/Perspex.Themes.Default/ScrollBar.paml
+++ b/src/Perspex.Themes.Default/ScrollBar.paml
@@ -2,7 +2,7 @@
   <Style Selector="ScrollBar">
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Background="Silver">
+        <Border Background="{StyleResource ThemeControlMidBrush}">
           <Track Minimum="{TemplateBinding Minimum}"
                  Maximum="{TemplateBinding Maximum}"
                  Value="{TemplateBinding Path=Value, Mode=TwoWay}"
@@ -11,6 +11,7 @@
             <Thumb Name="thumb">
               <Thumb.Template>
                 <ControlTemplate>
+                  <!-- TODO: Find out why StyleResource doesn't work here -->
                   <Border Background="Gray"/>
                 </ControlTemplate>
               </Thumb.Template>
diff --git a/src/Perspex.Themes.Default/Separator.paml b/src/Perspex.Themes.Default/Separator.paml
index ec28963688..0dc973dba8 100644
--- a/src/Perspex.Themes.Default/Separator.paml
+++ b/src/Perspex.Themes.Default/Separator.paml
@@ -3,19 +3,21 @@
   <Style Selector="Separator">
     <Setter Property="Template">
       <ControlTemplate>
-        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
+        <Border BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                Background="{TemplateBinding Background}"/>
       </ControlTemplate>
     </Setter>
   </Style>
 
   <Style Selector="MenuItem > Separator">
-    <Setter Property="Background" Value="#ffd7d7d7"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlMidBrush}"/>
     <Setter Property="Margin" Value="29,1,0,1"/>
     <Setter Property="Height" Value="1"/>
   </Style>
 
   <Style Selector="ContextMenu > Separator">
-    <Setter Property="Background" Value="#ffd7d7d7"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlMidBrush}"/>
     <Setter Property="Margin" Value="29,1,0,1"/>
     <Setter Property="Height" Value="1"/>
   </Style>
diff --git a/src/Perspex.Themes.Default/TabStripItem.paml b/src/Perspex.Themes.Default/TabStripItem.paml
index 38ad8d139d..3af1f98f82 100644
--- a/src/Perspex.Themes.Default/TabStripItem.paml
+++ b/src/Perspex.Themes.Default/TabStripItem.paml
@@ -1,7 +1,7 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="TabStripItem">
-    <Setter Property="FontSize" Value="16"/>
-    <Setter Property="Foreground" Value="Gray"/>
+    <Setter Property="FontSize" Value="{StyleResource FontSizeLarge}"/>
+    <Setter Property="Foreground" Value="{StyleResource ThemeForegroundLightBrush}"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border Background="{TemplateBinding Background}"
@@ -15,6 +15,6 @@
     </Setter>
   </Style>
   <Style Selector="TabStripItem:selected">
-    <Setter Property="Foreground" Value="Black"/>
+    <Setter Property="Foreground" Value="{StyleResource ThemeForegroundBrush}"/>
   </Style>
 </Styles>
\ No newline at end of file
diff --git a/src/Perspex.Themes.Default/TextBox.paml b/src/Perspex.Themes.Default/TextBox.paml
index db477a6313..dcb4230e7b 100644
--- a/src/Perspex.Themes.Default/TextBox.paml
+++ b/src/Perspex.Themes.Default/TextBox.paml
@@ -1,23 +1,22 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="TextBox">
-    <Setter Property="Background" Value="White"/>
-    <Setter Property="BorderBrush" Value="#ff707070"/>
-    <Setter Property="BorderThickness" Value="2"/>
-    <Setter Property="Padding" Value="2"/>
+    <Setter Property="Background" Value="{StyleResource ThemeBackgroundBrush}"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+    <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
+    <Setter Property="Padding" Value="4"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border Name="border"
                 Background="{TemplateBinding Background}"
                 BorderBrush="{TemplateBinding BorderBrush}"
-                BorderThickness="{TemplateBinding BorderThickness}"
-                Padding="2">
+                BorderThickness="{TemplateBinding BorderThickness}">
           <ScrollViewer CanScrollHorizontally="{TemplateBinding CanScrollHorizontally}"
                         HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
                         VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}">
             <StackPanel Margin="{TemplateBinding Padding}">
               <TextBlock Name="floatingWatermark"
-                         Foreground="#ff007ACC"
-                         FontSize="10"
+                         Foreground="{StyleResource ThemeAccentBrush}"
+                         FontSize="{StyleResource FontSizeSmall}"
                          Text="{TemplateBinding Watermark}">
                 <TextBlock.IsVisible>
                   <MultiBinding Converter="{Static BoolConverters.And}">
@@ -48,7 +47,10 @@
       </ControlTemplate>
     </Setter>
   </Style>
+  <Style Selector="TextBox:pointerover /template/ Border#border">
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderDarkBrush}"/>
+  </Style>
   <Style Selector="TextBox:focus /template/ Border#border">
-    <Setter Property="BorderBrush" Value="Black"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderDarkBrush}"/>
   </Style>
 </Styles>
\ No newline at end of file
diff --git a/src/Perspex.Themes.Default/ToggleButton.paml b/src/Perspex.Themes.Default/ToggleButton.paml
index 0311294db9..90b80129c6 100644
--- a/src/Perspex.Themes.Default/ToggleButton.paml
+++ b/src/Perspex.Themes.Default/ToggleButton.paml
@@ -1,9 +1,9 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="ToggleButton">
-    <Setter Property="Background" Value="#ffaaaaaa"/>
-    <Setter Property="BorderBrush" Value="#ffaaaaaa"/>
-    <Setter Property="BorderThickness" Value="2"/>
-    <Setter Property="Foreground" Value="Black"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlMidBrush}"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderLightBrush}"/>
+    <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
+    <Setter Property="Foreground" Value="{StyleResource ThemeForegroundBrush}"/>
     <Setter Property="HorizontalContentAlignment" Value="Center"/>
     <Setter Property="VerticalContentAlignment" Value="Center"/>
     <Setter Property="Template">
@@ -24,16 +24,16 @@
     </Setter>
   </Style>
   <Style Selector="ToggleButton:checked /template/ Border#border">
-    <Setter Property="Background" Value="#ff777777"/>
-    <Setter Property="BorderBrush" Value="#ff777777"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlDarkBrush}"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
   </Style>
   <Style Selector="ToggleButton:pointerover /template/ Border#border">
-    <Setter Property="BorderBrush" Value="#ff888888"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
   </Style>
   <Style Selector="ToggleButton:pressed  /template/ Border#border">
-    <Setter Property="Background" Value="#ff888888"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlDarkBrush}"/>
   </Style>
   <Style Selector="ToggleButton:disabled">
-    <Setter Property="Opacity" Value="0.5"/>
+    <Setter Property="Opacity" Value="{StyleResource ThemeDisabledOpacity}"/>
   </Style>
 </Styles>
\ No newline at end of file
diff --git a/src/Perspex.Themes.Default/ToolTip.paml b/src/Perspex.Themes.Default/ToolTip.paml
index ed59c08a70..a6fe7bdf1f 100644
--- a/src/Perspex.Themes.Default/ToolTip.paml
+++ b/src/Perspex.Themes.Default/ToolTip.paml
@@ -1,6 +1,7 @@
 <Style xmlns="https://github.com/perspex" Selector="ToolTip">
-  <Setter Property="BorderBrush" Value="Gray"/>
-  <Setter Property="BorderThickness" Value="1"/>
+  <Setter Property="Background" Value="{StyleResource ThemeBackgroundBrush}"/>
+  <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+  <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
   <Setter Property="Padding" Value="4,2"/>
   <Setter Property="Template">
     <ControlTemplate>
diff --git a/src/Perspex.Themes.Default/TreeView.paml b/src/Perspex.Themes.Default/TreeView.paml
index e4a57400be..7617a7eced 100644
--- a/src/Perspex.Themes.Default/TreeView.paml
+++ b/src/Perspex.Themes.Default/TreeView.paml
@@ -1,16 +1,17 @@
 <Style xmlns="https://github.com/perspex" Selector="TreeView">
-  <Setter Property="BorderBrush" Value="Black"/>
-  <Setter Property="BorderThickness" Value="1"/>
+  <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+  <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
+  <Setter Property="Padding" Value="4"/>
   <Setter Property="Template">
     <ControlTemplate>
       <Border Background="{TemplateBinding Background}"
               BorderBrush="{TemplateBinding BorderBrush}"
-              BorderThickness="{TemplateBinding BorderThickness}"
-              Padding="4">
+              BorderThickness="{TemplateBinding BorderThickness}">
         <ScrollViewer CanScrollHorizontally="True">
           <ItemsPresenter Name="PART_ItemsPresenter"
                           Items="{TemplateBinding Items}"
                           ItemsPanel="{TemplateBinding ItemsPanel}"
+                          Margin="{TemplateBinding Padding}"
                           MemberSelector="{TemplateBinding MemberSelector}"/>
         </ScrollViewer>
       </Border>
diff --git a/src/Perspex.Themes.Default/TreeViewItem.paml b/src/Perspex.Themes.Default/TreeViewItem.paml
index 9df1ec1545..f5fc37f236 100644
--- a/src/Perspex.Themes.Default/TreeViewItem.paml
+++ b/src/Perspex.Themes.Default/TreeViewItem.paml
@@ -36,7 +36,7 @@
                 Height="12"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center">
-          <Path Fill="Black"
+          <Path Fill="{StyleResource ThemeForegroundBrush}"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
                 Data="M 0 2 L 4 6 L 0 10 Z"/>
diff --git a/src/Perspex.Themes.Default/Window.paml b/src/Perspex.Themes.Default/Window.paml
index 0ef9473a22..4316626e58 100644
--- a/src/Perspex.Themes.Default/Window.paml
+++ b/src/Perspex.Themes.Default/Window.paml
@@ -1,6 +1,7 @@
 <Style xmlns="https://github.com/perspex" Selector="Window">
+  <Setter Property="Background" Value="{StyleResource ThemeBackgroundBrush}"/>
   <Setter Property="FontFamily" Value="Segoe UI"/>
-  <Setter Property="FontSize" Value="12"/>
+  <Setter Property="FontSize" Value="{StyleResource FontSizeNormal}"/>
   <Setter Property="Template">
     <ControlTemplate>
       <Border Background="{TemplateBinding Background}">