fix(toolbar): add the mode to the inverse function for a toolbar

Use the mode instead of the sass variable to determine which color the
buttons in a toolbar should be based on the background color. Added
error messages when anything other than a color is passed and more
comments.

BREAKING CHANGES: ios mode `$toolbar-ios-button-color` now has a
default value of `color-contrast($colors-ios, $toolbar-ios-background,
ios)` which will evaluate to the primary color for light background
toolbars and white for dark background toolbars.

fixes #6364

ionic/components/toolbar/toolbar.ios.scss

@@ -25,7 +25,7 @@ $toolbar-ios-title-font-weight:             600 !default;
 $toolbar-ios-title-text-align:              center !default;
 $toolbar-ios-title-text-color:              color-contrast($colors-ios, $toolbar-ios-background) !default;
 
-$toolbar-ios-button-color:                  $toolbar-ios-active-color !default;
+$toolbar-ios-button-color:                  color-contrast($colors-ios, $toolbar-ios-background, ios) !default;
 $toolbar-ios-button-border-radius:          4px !default;
 
 $navbar-ios-height:                         $toolbar-ios-height !default;
@@ -340,7 +340,7 @@ ion-buttons[right] {
 // iOS Toolbar Color Generation
 // --------------------------------------------------
 
-@include ios-bar-button-default(default, $toolbar-ios-button-color, color-contrast($colors-ios, $toolbar-ios-button-color));
+@include ios-bar-button-default(default, $toolbar-ios-button-color, color-contrast($colors-ios, $toolbar-ios-button-color, ios));
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
   @include ios-toolbar-theme($color-name, $color-base, $color-contrast);

ionic/components/toolbar/toolbar.md.scss

@@ -19,7 +19,7 @@ $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-title-text-color:            color-contrast($colors-md, $toolbar-md-background, md) !default;
 
 $toolbar-md-button-font-size:            1.4rem !default;
 
@@ -70,7 +70,7 @@ ion-navbar-section {
 
 @mixin md-toolbar-theme($color-name, $color-base, $color-contrast) {
   .toolbar[#{$color-name}] {
-    $fg-color: color-contrast($colors-md, $color-base, true);
+    $fg-color: color-contrast($colors-md, $color-base, md);
 
     .toolbar-background {
       background: $color-base;
@@ -218,15 +218,15 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-solid {
-  color: color-contrast($colors-md, $toolbar-md-button-color, true);
+  color: color-contrast($colors-md, $toolbar-md-button-color, md);
   background-color: $toolbar-md-button-color;
 
   &:hover:not(.disable-hover) {
-    color: color-contrast($colors-md, $toolbar-md-button-color, true);
+    color: color-contrast($colors-md, $toolbar-md-button-color, md);
   }
 
   &.activated {
-    color: color-contrast($colors-md, $toolbar-md-button-color, true);
+    color: color-contrast($colors-md, $toolbar-md-button-color, md);
     background-color: color-shade($toolbar-md-button-color);
   }
 }
@@ -335,7 +335,7 @@ ion-buttons[right] {
 // Material Design Toolbar Color Generation
 // --------------------------------------------------
 
-@include md-bar-button-default(default, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, true));
+@include md-bar-button-default(default, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, md));
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
   @include md-toolbar-theme($color-name, $color-base, $color-contrast);

ionic/components/toolbar/toolbar.wp.scss

@@ -22,10 +22,10 @@ $toolbar-wp-title-padding:               0 6px !default;
 $toolbar-wp-title-font-size:             1.5rem !default;
 $toolbar-wp-title-font-weight:           bold !default;
 $toolbar-wp-title-text-transform:        uppercase !default;
-$toolbar-wp-title-text-color:            color-contrast($colors-wp, $toolbar-wp-background) !default;
+$toolbar-wp-title-text-color:            color-contrast($colors-wp, $toolbar-wp-background, wp) !default;
 
 $toolbar-wp-button-font-size:            1.4rem !default;
-$toolbar-wp-button-color:                color-contrast($colors-wp, $toolbar-wp-background) !default;
+$toolbar-wp-button-color:                color-contrast($colors-wp, $toolbar-wp-background, wp) !default;
 $toolbar-wp-button-border-radius:        2px !default;
 
 $navbar-wp-height:                       $toolbar-wp-height !default;
@@ -189,7 +189,7 @@ ion-buttons[right] {
   }
 
   &.activated {
-    color: color-contrast($colors-wp, $toolbar-wp-button-color);
+    color: color-contrast($colors-wp, $toolbar-wp-button-color, wp);
     background-color: $toolbar-wp-button-color;
   }
 }
@@ -215,15 +215,15 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-solid {
-  color: color-contrast($colors-wp, $toolbar-wp-button-color);
+  color: color-contrast($colors-wp, $toolbar-wp-button-color, wp);
   background-color: $toolbar-wp-button-color;
 
   &:hover:not(.disable-hover) {
-    color: color-contrast($colors-wp, $toolbar-wp-button-color);
+    color: color-contrast($colors-wp, $toolbar-wp-button-color, wp);
   }
 
   &.activated {
-    color: color-contrast($colors-wp, $toolbar-wp-button-color);
+    color: color-contrast($colors-wp, $toolbar-wp-button-color, wp);
     background-color: color-shade($toolbar-wp-button-color);
   }
 }
@@ -332,7 +332,7 @@ ion-buttons[right] {
 // Windows Toolbar Color Generation
 // --------------------------------------------------
 
-@include wp-bar-button-default(default, $toolbar-wp-button-color, color-contrast($colors-wp, $toolbar-wp-button-color));
+@include wp-bar-button-default(default, $toolbar-wp-button-color, color-contrast($colors-wp, $toolbar-wp-button-color, wp));
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
   @include wp-toolbar-theme($color-name, $color-base, $color-contrast);

ionic/util/functions.scss

@@ -3,11 +3,19 @@
 // --------------------------------------------------
 
 @function color-brightness($color-value) {
+  @if (type-of($color-value) != color) {
+    @return color-error($color-value);
+  }
+
   @return (red($color-value) * .299 + green($color-value) * .587 + blue($color-value) * .114) / 255 * 100%;
 }
 
 
 @function color-inverse($color-value, $dark: #000, $light: #fff) {
+  @if (type-of($color-value) != color) {
+    @return color-error($color-value);
+  }
+
   $brightness: color-brightness($color-value);
   $red: red($color-value);
   $green: green($color-value);
@@ -27,13 +35,36 @@
   @return $light;
 }
 
+// Pass dark and light colors based on the mode
+// this is mostly used for toolbar buttons/titles
+//
+// @param {String} $color-value - color to get the inverse of
+// @param {Boolean} $custom-contrast-mode - the mode to use
+// in order to pass the custom colors
+//
+// @return {Color}
+// --------------------------------------------------
+@function mode-inverse($color-value, $custom-contrast-mode) {
+  $dark: #000;
+  $light: #fff;
 
-@function toolbar-button-inverse($color-value) {
-  @return color-inverse($color-value, $dark: #424242, $light: #fff);
+  @if ($custom-contrast-mode == md) {
+    $dark: #424242;
+    $light: #fff;
+  } @else if ($custom-contrast-mode == ios) {
+    $dark: color($colors-ios, primary);
+    $light: #fff;
+  }
+
+  @return color-inverse($color-value, $dark, $light);
 }
 
 
 @function color-shade($color-value, $amount:8%) {
+  @if (type-of($color-value) != color) {
+    @return color-error($color-value);
+  }
+
   $lightness: lightness($color-value);
 
   $shade: #fff;
@@ -45,6 +76,22 @@
   @return mix($shade, $color-value, $amount);
 }
 
+@function color-error($color-value) {
+  @error "
+
+  The value `#{$color-value}` must be a color.
+  If you are setting the value as a map make sure
+  both the base and contrast are defined as colors.
+
+  For example:
+
+  $colors: (
+    primary:    #327eff,
+    secondary:  (base: #32db64, contrast: #000),
+  );";
+
+  @return false;
+}
 
 // Copy Colors Map
 // --------------------------------------------------
@@ -141,34 +188,57 @@
 // map key | map value | hex color not in map
 // --------------------------------------------------
 //
-// @param {Boolean} $toolbar-button - MD toolbar button
+// @param {Boolean} $custom-contrast-mode - use custom
+// contrast function
 // @return {Color}
 // --------------------------------------------------
-@function color-contrast($colors, $value, $toolbar-button: null) {
+@function color-contrast($colors, $value, $custom-contrast-mode: null) {
   $color-value: null;
 
-  // If the value is a color (i.e. #fff)
+  // If the value is a color (e.g. #fff)
   // we need to call color-key to see if
   // it exists in the color map or not
-  @if(type-of($value) == color) {
+  @if (type-of($value) == color) {
     $color-value: color-key($colors, $value);
 
-  // If the value is a string (i.e. primary)
+  // If the value is a string (e.g. primary)
   // we want to get the value from the map
   // where it is the key
   } @else {
     $color-value: map-get($colors, $value);
   }
 
-  // If the value is a map
-  @if(type-of($color-value) == map) {
-    $color-value: map-get($color-value, contrast);
-  } @elseif ($toolbar-button) {
-    $color-value: toolbar-button-inverse($color-value);
+  // If the value is a map then get the contrast
+  // from the map (e.g. (base: #327eff, contrast: blue))
+  @if (type-of($color-value) == map) {
+    // If the map has the contrast key then use that
+    // otherwise it is a map with just a base so get
+    // the inverse of that base color
+    @if map-has-key($color-value, contrast) {
+      $color-value: map-get($color-value, contrast);
+    } @else {
+      $color-value: color-inverse(map-get($color-value, base));
+    }
+
+  // If a mode was passed we need to call
+  // the custom inverse function to get the inverse
+  // color based on the mode
+} @elseif ($custom-contrast-mode) {
+    $color-value: mode-inverse($color-value, $custom-contrast-mode);
+
+  // Otherwise we were passed a color and can use the
+  // function to get the inverse of that color
+  // (e.g. #f4f4f4)
   } @else {
     $color-value: color-inverse($color-value);
   }
 
+  // If the final value being returned is not a color
+  // we should error
+  @if (type-of($color-value) != color) {
+    @return color-error($color-value);
+  }
+
   @return $color-value;
 }