From 3055a12178e9a3042752ca3aff839d4a4f22d6d3 Mon Sep 17 00:00:00 2001
From: Stephanie Anderl <46726333+sanderl@users.noreply.github.com>
Date: Tue, 5 May 2020 10:20:05 -0700
Subject: [PATCH] Updated EquationButton contrast fixed dark mode foreground
 color bugs (#1155)

* Fixed contrast between background and foreground colors in the equation button. Fixed the issue where the text in the equation text box is white when the background is white

* Adjust the foreground color algorithm

* moved the contrast method to utils so that it is resuable

* Moved brushes for the GetContrastColor method to the app.xaml resource dictionary

* Removed the change for the edit box colors, so it can be in a different PR
---
 src/CalcViewModel/Common/Utils.cpp               | 16 ++++++++++++++++
 src/CalcViewModel/Common/Utils.h                 |  1 +
 src/Calculator/App.xaml                          |  4 ++++
 src/Calculator/Controls/EquationTextBox.cpp      |  2 ++
 src/Calculator/Controls/EquationTextBox.h        |  1 +
 .../GraphingCalculator/EquationInputArea.xaml    | 14 ++++++++------
 .../EquationInputArea.xaml.cpp                   |  5 +++++
 .../GraphingCalculator/EquationInputArea.xaml.h  |  2 ++
 8 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/CalcViewModel/Common/Utils.cpp b/src/CalcViewModel/Common/Utils.cpp
index d87e7892..220c9bf7 100644
--- a/src/CalcViewModel/Common/Utils.cpp
+++ b/src/CalcViewModel/Common/Utils.cpp
@@ -24,6 +24,7 @@ using namespace Windows::UI;
 using namespace Windows::UI::Core;
 using namespace Windows::UI::ViewManagement;
 using namespace Windows::UI::Xaml;
+using namespace Windows::UI::Xaml::Media;
 using namespace Windows::Foundation;
 using namespace Windows::Storage;
 
@@ -302,3 +303,18 @@ bool operator!=(const Color& color1, const Color& color2)
 {
     return !(color1 == color2);
 }
+
+// This method calculates the luminance ratio between White and the given background color.
+// The luminance is calculate using the RGB values and does not use the A value.
+// White or Black is returned
+SolidColorBrush ^ Utils::GetContrastColor(Color backgroundColor)
+{
+    auto luminance = 0.2126 * backgroundColor.R + 0.7152 * backgroundColor.G + 0.0722 * backgroundColor.B;
+
+    if ((255 + 0.05) / (luminance + 0.05) >= 2.5)
+    {
+        return static_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"WhiteBrush"));
+    }
+
+    return static_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"BlackBrush"));
+}
diff --git a/src/CalcViewModel/Common/Utils.h b/src/CalcViewModel/Common/Utils.h
index 1f24b23e..ed798ad9 100644
--- a/src/CalcViewModel/Common/Utils.h
+++ b/src/CalcViewModel/Common/Utils.h
@@ -409,6 +409,7 @@ namespace Utils
 
     Platform::String ^ EscapeHtmlSpecialCharacters(Platform::String ^ originalString, std::shared_ptr<std::vector<wchar_t>> specialCharacters = nullptr);
 
+    Windows::UI::Xaml::Media::SolidColorBrush ^ GetContrastColor(Windows::UI::Color backgroundColor);
 }
 
 // This goes into the header to define the property, in the public: section of the class
diff --git a/src/Calculator/App.xaml b/src/Calculator/App.xaml
index 46739c13..fcb66b5f 100644
--- a/src/Calculator/App.xaml
+++ b/src/Calculator/App.xaml
@@ -293,6 +293,10 @@
             <x:Double x:Key="CalcOperatorCaptionSize">14</x:Double>
             <x:Double x:Key="CalcOperatorTextIconCaptionSize">16</x:Double>
 
+            <!-- White and black color brushes used for the Utils::GetContrastColor-->
+            <SolidColorBrush x:Key="WhiteBrush" Color="White"/>
+            <SolidColorBrush x:Key="BlackBrush" Color="Black"/>
+
             <!-- Base style for calc buttons -->
             <Style x:Key="CalcButtonStyle" TargetType="Controls:CalculatorButton">
                 <Setter Property="MinWidth" Value="24"/>
diff --git a/src/Calculator/Controls/EquationTextBox.cpp b/src/Calculator/Controls/EquationTextBox.cpp
index b9daab35..3984b8e7 100644
--- a/src/Calculator/Controls/EquationTextBox.cpp
+++ b/src/Calculator/Controls/EquationTextBox.cpp
@@ -20,8 +20,10 @@ using namespace Windows::UI::Xaml::Automation;
 using namespace Windows::UI::Xaml::Controls;
 using namespace Windows::UI::Xaml::Input;
 using namespace Windows::UI::Xaml::Controls::Primitives;
+using namespace Windows::UI::Xaml::Media;
 
 DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, EquationColor);
+DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, EquationButtonForegroundColor);
 DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, ColorChooserFlyout);
 DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, EquationButtonContentIndex);
 DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, HasError);
diff --git a/src/Calculator/Controls/EquationTextBox.h b/src/Calculator/Controls/EquationTextBox.h
index a9fcc262..10d0f44b 100644
--- a/src/Calculator/Controls/EquationTextBox.h
+++ b/src/Calculator/Controls/EquationTextBox.h
@@ -20,6 +20,7 @@ namespace CalculatorApp
 
             DEPENDENCY_PROPERTY_OWNER(EquationTextBox);
             DEPENDENCY_PROPERTY(Windows::UI::Xaml::Media::SolidColorBrush ^, EquationColor);
+            DEPENDENCY_PROPERTY(Windows::UI::Xaml::Media::SolidColorBrush ^, EquationButtonForegroundColor);
             DEPENDENCY_PROPERTY(Windows::UI::Xaml::Controls::Flyout ^, ColorChooserFlyout);
             DEPENDENCY_PROPERTY(Platform::String ^, EquationButtonContentIndex);
             DEPENDENCY_PROPERTY(Platform::String ^, MathEquation);
diff --git a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
index 97e13afd..13d37a5a 100644
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
+++ b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
@@ -325,6 +325,7 @@
                                             <VisualState.Setters>
                                                 <Setter Target="EquationBoxBorder.BorderBrush" Value="{ThemeResource EquationTextBoxBorderBrushFocused}"/>
                                                 <Setter Target="EquationBoxBorder.Background" Value="{ThemeResource TextBoxBackgroundThemeBrush}"/>
+                                                <Setter Target="MathRichEditBox.Foreground" Value="{ThemeResource TextControlForegroundFocused}"/>
                                             </VisualState.Setters>
                                         </VisualState>
                                         <VisualState x:Name="FocusedError">
@@ -385,12 +386,12 @@
                                                     <SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="White"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBackground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBorderBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonForeground" Color="White"/>
+                                                    <SolidColorBrush x:Key="ToggleButtonForeground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{ThemeResource SystemChromeWhiteColor}"/>
+                                                    <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource SystemChromeWhiteColor}"/>
+                                                    <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
                                                     <StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
                                                     <StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
@@ -408,12 +409,12 @@
                                                     <SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="Black"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBackground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBorderBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonForeground" Color="White"/>
+                                                    <SolidColorBrush x:Key="ToggleButtonForeground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{ThemeResource SystemChromeWhiteColor}"/>
+                                                    <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource SystemChromeWhiteColor}"/>
+                                                    <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
                                                     <StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
                                                     <StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
@@ -803,6 +804,7 @@
                                                   IsEquationLineDisabled="{x:Bind IsLineEnabled, Converter={StaticResource BooleanNegationConverter}, Mode=OneWay}"
                                                   EquationButtonContentIndex="{x:Bind FunctionLabelIndex, Mode=OneWay}"
                                                   EquationColor="{x:Bind local:EquationInputArea.ToSolidColorBrush(LineColor), Mode=OneWay}"
+                                                  EquationButtonForegroundColor ="{x:Bind local:EquationInputArea.GetForegroundColor(LineColor), Mode=OneWay}"
                                                   EquationFormatRequested="EquationTextBox_EquationFormatRequested"
                                                   EquationSubmitted="EquationTextBox_Submitted"
                                                   ErrorText="{x:Bind vm:EquationViewModel.EquationErrorText(GraphEquation.GraphErrorType, GraphEquation.GraphErrorCode), Mode=OneWay}"
diff --git a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp
index 3c357c74..560a577f 100644
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp
+++ b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp
@@ -557,3 +557,8 @@ EquationViewModel ^ EquationInputArea::GetViewModelFromEquationTextBox(Object ^
 
     return eq;
 }
+
+ SolidColorBrush ^ EquationInputArea::GetForegroundColor(Color lineColor)
+ {
+     return Utils::GetContrastColor(lineColor);
+ }
diff --git a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h
index dd95b75c..b82f8786 100644
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h
+++ b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h
@@ -40,6 +40,8 @@ public
         static Windows::UI::Xaml::Media::SolidColorBrush
             ^ ToSolidColorBrush(Windows::UI::Color color) { return ref new Windows::UI::Xaml::Media::SolidColorBrush(color); }
 
+        static Windows::UI::Xaml::Media::SolidColorBrush ^ GetForegroundColor(Windows::UI::Color lineColor);
+
         void FocusEquationTextBox(ViewModel::EquationViewModel ^ equation);
     private:
         void OnPropertyChanged(Platform::String ^ propertyName);