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 @@
+
+
+ This is the title that never ends. It just goes on and on my friend.
+
+
+
+
+
+
+
+
+
+
+
+ Primary
+
+
+
+
+
+
+
+
+
+
+
+ Primary.activated
+
+
+
+
+
+
+
+
+ Secondary
+
+
+
+
+
+
+
+
+
+
+
+ Secondary Activated
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dark
+
+
+
+
+
+
+
+
+
+
+
+ Dark.activated
+
+
+
+
+
+
+
+
+
+
+ Danger
+
+
+
+
+
+
+
+
+ Danger
+
+
+
+
+
+
+
+ Right side menu toggle
+
+
+
+
+
+
+
+
+
+ Something
+
+
+ Else
+
+
+
+
+
+
+
+ Light
+
+
+ Toolbar
+
+
+ Default Segment
+
+
+
+
+
+
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);