From 7d2de18a7c5db8d525c5d0ee0dc18526baf66dca Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Fri, 16 Mar 2018 13:00:00 -0400
Subject: [PATCH] fix(back-button): apply the proper color to the back button

fixes #14177
---
 core/src/components/back-button/back-button.ios.scss      | 3 +++
 core/src/components/back-button/back-button.ios.vars.scss | 7 ++++++-
 core/src/components/back-button/back-button.md.scss       | 6 ++++++
 core/src/components/back-button/back-button.md.vars.scss  | 7 +++++++
 4 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 core/src/components/back-button/back-button.md.vars.scss

diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss
index d5580d5ebe9..663afff7cfd 100644
--- a/core/src/components/back-button/back-button.ios.scss
+++ b/core/src/components/back-button/back-button.ios.scss
@@ -16,7 +16,10 @@
   border: 0;
   font-size: 17px;
   line-height: 1;
+
+  color: $back-button-ios-color;
   background-color: transparent;
+
   transform: translateZ(0);
 
   &.activated {
diff --git a/core/src/components/back-button/back-button.ios.vars.scss b/core/src/components/back-button/back-button.ios.vars.scss
index 5e598b4aafb..2a73e273479 100644
--- a/core/src/components/back-button/back-button.ios.vars.scss
+++ b/core/src/components/back-button/back-button.ios.vars.scss
@@ -1,5 +1,10 @@
 @import "../../themes/ionic.globals.ios";
 
+// iOS Back Button
+// --------------------------------------------------
 
-$back-button-ios-button-z-index:  $z-index-toolbar-buttons !default;
+/// @prop - Z index of the back button
+$back-button-ios-button-z-index:      $z-index-toolbar-buttons !default;
 
+/// @prop - Text color of the back button
+$back-button-ios-color:               $toolbar-ios-text-color !default;
diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss
index 2d5256300ad..798857c7fb6 100644
--- a/core/src/components/back-button/back-button.md.scss
+++ b/core/src/components/back-button/back-button.md.scss
@@ -1,7 +1,9 @@
 @import "./back-button";
+@import "./back-button.md.vars";
 
 // MD Back Button
 // --------------------------------------------------
+
 .back-button-md .back-button-inner {
   @include margin(2px, 6px, 0, 0);
   @include padding(0, 5px);
@@ -12,7 +14,10 @@
   font-size: 14px;
   font-weight: 500;
   text-transform: uppercase;
+
+  color: $back-button-md-color;
   background-color: transparent;
+
   box-shadow: none;
 
   &.activated {
@@ -25,6 +30,7 @@
   @include margin(0);
   @include padding(0, 6px);
   @include text-align(start);
+
   font-size: 24px;
   font-weight: normal;
   line-height: 0.67;
diff --git a/core/src/components/back-button/back-button.md.vars.scss b/core/src/components/back-button/back-button.md.vars.scss
new file mode 100644
index 00000000000..fe560f3de8f
--- /dev/null
+++ b/core/src/components/back-button/back-button.md.vars.scss
@@ -0,0 +1,7 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Back Button
+// --------------------------------------------------
+
+/// @prop - Text color of the back button
+$back-button-md-color:               $toolbar-md-text-color !default;