From d5e05701939f1c487c74697a12f28a248e007ce8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 15 Dec 2015 16:41:33 -0500
Subject: [PATCH] fix(toolbar): fixed default button colors for MD in a
 toolbar, added new function to get this inverse

closes #91
---
 ionic/components/toolbar/test/colors/index.ts |  13 ++
 .../components/toolbar/test/colors/main.html  | 199 ++++++++++++++++++
 ionic/components/toolbar/toolbar.md.scss      |  19 +-
 ionic/themes/default.md.scss                  |   3 +-
 ionic/util/functions.scss                     |  13 ++
 5 files changed, 241 insertions(+), 6 deletions(-)
 create mode 100644 ionic/components/toolbar/test/colors/index.ts
 create mode 100644 ionic/components/toolbar/test/colors/main.html

diff --git a/ionic/components/toolbar/test/colors/index.ts b/ionic/components/toolbar/test/colors/index.ts
new file mode 100644
index 0000000000..590a6f9d35
--- /dev/null
+++ b/ionic/components/toolbar/test/colors/index.ts
@@ -0,0 +1,13 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+
+
+  buttonClick(button) {
+    console.log(button);
+  }
+}
diff --git a/ionic/components/toolbar/test/colors/main.html b/ionic/components/toolbar/test/colors/main.html
new file mode 100644
index 0000000000..b69d8ac59f
--- /dev/null
+++ b/ionic/components/toolbar/test/colors/main.html
@@ -0,0 +1,199 @@
+
+<ion-toolbar>
+  <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
+</ion-toolbar>
+
+
+<ion-toolbar primary>
+  <ion-buttons start>
+    <button>
+      <icon ios=contact></icon>
+    </button>
+    <button>
+      <icon search></icon>
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <button secondary>
+      <icon more></icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Primary</ion-title>
+</ion-toolbar>
+
+
+<ion-toolbar primary>
+  <ion-buttons start>
+    <button class="activated">
+      <icon ios="contact"></icon>
+    </button>
+    <button class="activated">
+      <icon search></icon>
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <button secondary class="activated">
+      <icon more></icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Primary.activated</ion-title>
+</ion-toolbar>
+
+
+<ion-toolbar secondary>
+  <ion-buttons start>
+    <button solid>
+      <icon contact></icon>
+    </button>
+    <button solid>
+      <icon contact></icon>
+      Solid
+    </button>
+  </ion-buttons>
+  <ion-title>Secondary</ion-title>
+  <ion-buttons end>
+    <button solid danger>
+      Help
+      <icon help-circle></icon>
+    </button>
+  </ion-buttons>
+</ion-toolbar>
+
+
+<ion-toolbar secondary>
+  <ion-buttons start>
+    <button solid class="activated">
+      <icon contact></icon>
+    </button>
+    <button solid class="activated">
+      <icon contact></icon>
+      Solid
+    </button>
+  </ion-buttons>
+  <ion-title>Secondary Activated</ion-title>
+  <ion-buttons end>
+    <button solid danger class="activated">
+      Help
+      <icon help-circle></icon>
+    </button>
+  </ion-buttons>
+</ion-toolbar>
+
+
+<ion-toolbar dark>
+  <ion-buttons start>
+    <button outline>
+      <icon contact></icon>
+    </button>
+    <button outline>
+      <icon star></icon>
+      Star
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <button secondary outline>
+      <icon contact></icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Dark</ion-title>
+</ion-toolbar>
+
+
+<ion-toolbar dark>
+  <ion-buttons start>
+    <button outline class="activated">
+      <icon contact></icon>
+    </button>
+    <button outline class="activated">
+      <icon star></icon>
+      Star
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <button secondary outline class="activated">
+      <icon contact></icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Dark.activated</ion-title>
+</ion-toolbar>
+
+
+<ion-toolbar danger>
+  <ion-buttons start>
+    <button>
+      <icon contact></icon>
+      Clear
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <button>
+      Edit
+      <icon create></icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Danger</ion-title>
+</ion-toolbar>
+
+
+<ion-toolbar danger>
+  <button menuToggle>
+    <icon menu></icon>
+  </button>
+  <ion-buttons start>
+    <button>
+      <icon star></icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Danger</ion-title>
+</ion-toolbar>
+
+
+<ion-toolbar>
+<ion-buttons end>
+  <button #button1 (click)="buttonClick(button1)">
+    <icon star></icon>
+  </button>
+</ion-buttons>
+  <ion-title>Right side menu toggle</ion-title>
+  <button menuToggle right>
+    <icon menu></icon>
+  </button>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons end>
+    <button #button2 (click)="buttonClick(button2)">
+      <icon search></icon>
+    </button>
+  </ion-buttons>
+  <ion-segment secondary>
+    <ion-segment-button>
+      Something
+    </ion-segment-button>
+    <ion-segment-button>
+      Else
+    </ion-segment-button>
+  </ion-segment>
+</ion-toolbar>
+
+<ion-toolbar>
+  <ion-segment>
+    <ion-segment-button>
+      Light
+    </ion-segment-button>
+    <ion-segment-button>
+      Toolbar
+    </ion-segment-button>
+    <ion-segment-button>
+      Default Segment
+    </ion-segment-button>
+  </ion-segment>
+</ion-toolbar>
+
+
+<style>
+  .toolbar {
+    border-bottom: 1px solid black;
+    background: #eee !important;
+  }
+</style>
diff --git a/ionic/components/toolbar/toolbar.md.scss b/ionic/components/toolbar/toolbar.md.scss
index 514da92804..ba183bd3e3 100644
--- a/ionic/components/toolbar/toolbar.md.scss
+++ b/ionic/components/toolbar/toolbar.md.scss
@@ -22,7 +22,7 @@ $toolbar-md-title-font-size:             2rem !default;
 $toolbar-md-button-font-size:            1.4rem !default;
 $navbar-md-height:                       $toolbar-md-height !default;
 
-$bar-button-md-color:                    $toolbar-md-active-color !default;
+$bar-button-md-color:                    $toolbar-md-button-color !default;
 $bar-button-md-border-radius:            2px !default;
 
 
@@ -71,8 +71,19 @@ ion-title {
     }
 
     .toolbar-title,
-    .bar-button-default {
-      color: inverse($color-value);
+    .bar-button-default,
+    .bar-button-outline {
+      color: toolbar-button-inverse($color-value);
+    }
+
+    .bar-button-outline {
+      border-color: toolbar-button-inverse($color-value);
+    }
+
+    @each $color-name, $color-value in $colors-md {
+      @include md-bar-button-default($color-name, $color-value);
+      @include md-bar-button-outline($color-name, $color-value);
+      @include md-bar-button-solid($color-name, $color-value);
     }
   }
 }
@@ -186,12 +197,10 @@ ion-buttons[right] {
   background-color: $bar-button-md-color;
 
   &:hover:not(.disable-hover) {
-    opacity: 0.4;
     color: inverse($bar-button-md-color);
   }
 
   &.activated {
-    opacity: 0.4;
     color: inverse($bar-button-md-color);
     background-color: color-shade($bar-button-md-color);
   }
diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss
index 73980f5c80..b6bb7dd851 100644
--- a/ionic/themes/default.md.scss
+++ b/ionic/themes/default.md.scss
@@ -20,9 +20,10 @@ $font-size-md-base:                   $font-size-base !default;
 
 $toolbar-md-background:               $toolbar-background !default;
 $toolbar-md-border-color:             $toolbar-border-color !default;
-$toolbar-md-text-color:               $toolbar-text-color !default;
+$toolbar-md-text-color:               #424242 !default;
 $toolbar-md-active-color:             $toolbar-active-color !default;
 $toolbar-md-inactive-color:           $toolbar-inactive-color !default;
+$toolbar-md-button-color:             #424242 !default;
 
 
 // Material Design List
diff --git a/ionic/util/functions.scss b/ionic/util/functions.scss
index e0ed83e369..03beaa1843 100644
--- a/ionic/util/functions.scss
+++ b/ionic/util/functions.scss
@@ -15,6 +15,19 @@
 }
 
 
+@function toolbar-button-inverse($color-value) {
+  $lightness: lightness($color-value);
+  $red: red($color-value);
+  $green: green($color-value);
+
+  @if ($lightness > 65 or $green > 220 or ($red > 240 and $green > 180)) {
+    @return $toolbar-md-button-color;
+  }
+
+  @return white;
+}
+
+
 @function color-shade($color-value, $amount:8%) {
   $lightness: lightness($color-value);