fix(toolbar): md mode use the color contrast for toolbar button/title

BREAKING CHANGES: `$toolbar-md-button-color` no longer gets passed to the function that sets the contrast color for toolbar buttons, but it can still be used to set the default button color. `$bar-button-md-color` was renamed to `$toolbar-md-button-color` `$bar-button-md-border-radius` was renamed to `$toolbar-md-button-border-radius` references #6364
ionic-team · May 5, 2016 · 9f54f16 · 9f54f16
1 parent 132d8e9
commit 9f54f16
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 18 deletions.
diff --git a/ionic/components/toolbar/test/colors/main.html b/ionic/components/toolbar/test/colors/main.html
@@ -4,6 +4,27 @@
 </ion-toolbar>
 
 
+<ion-toolbar>
+  <button menuToggle>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+  <ion-buttons start>
+    <button>
+      <ion-icon ios="contact"></ion-icon>
+    </button>
+    <button>
+      <ion-icon name="search"></ion-icon>
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <button secondary>
+      <ion-icon name="more"></ion-icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Default</ion-title>
+</ion-toolbar>
+
+
 <ion-toolbar primary>
   <ion-buttons start>
     <button>

diff --git a/ionic/components/toolbar/toolbar.md.scss b/ionic/components/toolbar/toolbar.md.scss
@@ -19,11 +19,14 @@ $toolbar-order-md: (
 $toolbar-md-padding:                     4px !default;
 $toolbar-md-height:                      5.6rem !default;
 $toolbar-md-title-font-size:             2rem !default;
+$toolbar-md-title-text-color:            color-contrast($colors-md, $toolbar-md-background, true) !default;
+
 $toolbar-md-button-font-size:            1.4rem !default;
-$navbar-md-height:                       $toolbar-md-height !default;
 
-$bar-button-md-color:                    $toolbar-md-button-color !default;
-$bar-button-md-border-radius:            2px !default;
+$toolbar-md-button-color:                $toolbar-md-title-text-color !default;
+$toolbar-md-button-border-radius:        2px !default;
+
+$navbar-md-height:                       $toolbar-md-height !default;
 
 
 .toolbar {
@@ -62,7 +65,7 @@ ion-navbar-section {
 
   font-size: $toolbar-md-title-font-size;
   font-weight: 500;
-  color: $toolbar-md-text-color;
+  color: $toolbar-md-title-text-color;
 }
 
 @mixin md-toolbar-theme($color-name, $color-base, $color-contrast) {
@@ -142,7 +145,7 @@ ion-buttons[right] {
   height: 32px;
 
   border: 0;
-  border-radius: $bar-button-md-border-radius;
+  border-radius: $toolbar-md-button-border-radius;
   font-size: $toolbar-md-button-font-size;
   font-weight: 500;
   text-transform: uppercase;
@@ -174,17 +177,17 @@ ion-buttons[right] {
 .bar-button-outline {
   border-width: 1px;
   border-style: solid;
-  border-color: $bar-button-md-color;
-  color: $bar-button-md-color;
+  border-color: $toolbar-md-button-color;
+  color: $toolbar-md-button-color;
   background-color: transparent;
 
   &:hover:not(.disable-hover) {
     opacity: .4;
   }
 
   &.activated {
-    color: color-contrast($colors-md, $bar-button-md-color);
-    background-color: $bar-button-md-color;
+    color: color-contrast($colors-md, $toolbar-md-button-color, true);
+    background-color: $toolbar-md-button-color;
   }
 }
 
@@ -209,16 +212,16 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-solid {
-  color: color-contrast($colors-md, $bar-button-md-color);
-  background-color: $bar-button-md-color;
+  color: color-contrast($colors-md, $toolbar-md-button-color, true);
+  background-color: $toolbar-md-button-color;
 
   &:hover:not(.disable-hover) {
-    color: color-contrast($colors-md, $bar-button-md-color);
+    color: color-contrast($colors-md, $toolbar-md-button-color, true);
   }
 
   &.activated {
-    color: color-contrast($colors-md, $bar-button-md-color);
-    background-color: color-shade($bar-button-md-color);
+    color: color-contrast($colors-md, $toolbar-md-button-color, true);
+    background-color: color-shade($toolbar-md-button-color);
   }
 }
 
@@ -326,7 +329,7 @@ ion-buttons[right] {
 // Material Design Toolbar Color Generation
 // --------------------------------------------------
 
-@include md-bar-button-default(default, $bar-button-md-color, color-contrast($colors-md, $bar-button-md-color));
+@include md-bar-button-default(default, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, true));
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
   @include md-toolbar-theme($color-name, $color-base, $color-contrast);

diff --git a/ionic/themes/dark.md.scss b/ionic/themes/dark.md.scss
@@ -28,7 +28,6 @@ $toolbar-md-border-color:             $toolbar-border-color !default;
 $toolbar-md-text-color:               #fff !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 Card
 // --------------------------------------------------

diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss
@@ -24,7 +24,6 @@ $toolbar-md-border-color:             $toolbar-border-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
@@ -29,7 +29,7 @@
 
 
 @function toolbar-button-inverse($color-value) {
-  @return color-inverse($color-value, $dark: $toolbar-md-button-color, $light: #fff);
+  @return color-inverse($color-value, $dark: #424242, $light: #fff);
 }