diff --git a/ionic/components/alert/alert.md.scss b/ionic/components/alert/alert.md.scss
index 9418a8b790..4a14f36e74 100644
--- a/ionic/components/alert/alert.md.scss
+++ b/ionic/components/alert/alert.md.scss
@@ -31,7 +31,7 @@ $alert-md-input-text-color:                   #000 !default;
 
 $alert-md-input-border-width-focused:         2px !default;
 $alert-md-input-border-style-focused:         $alert-md-input-border-style !default;
-$alert-md-input-border-color-focused:         map-get($colors-md, primary) !default;
+$alert-md-input-border-color-focused:         color($colors-md, primary) !default;
 
 $alert-md-input-margin-top:                   5px !default;
 $alert-md-input-margin-right:                 0 !default;
@@ -45,7 +45,7 @@ $alert-md-button-group-justify-content:       flex-end !default;
 $alert-md-button-padding:                     10px !default;
 $alert-md-button-margin:                      0 8px 0 0 !default;
 $alert-md-button-font-weight:                 500 !default;
-$alert-md-button-text-color:                  map-get($colors-md, primary) !default;
+$alert-md-button-text-color:                  color($colors-md, primary) !default;
 $alert-md-button-background-color:            transparent !default;
 $alert-md-button-background-color-activated:  rgba(158, 158, 158, .2) !default;
 $alert-md-button-border-radius:               2px !default;
@@ -94,9 +94,9 @@ $alert-md-checkbox-icon-width:                6px !default;
 $alert-md-checkbox-icon-height:               10px !default;
 $alert-md-checkbox-icon-border-width:         2px !default;
 $alert-md-checkbox-icon-border-style:         solid !default;
+$alert-md-checkbox-icon-border-color:         color-contrast($colors-md, $alert-md-checkbox-border-color-on) !default;
 $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
-
 .alert-wrapper {
   max-width: $alert-md-max-width;
 
@@ -304,7 +304,7 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
   border-top-width: 0;
   border-left-width: 0;
   border-style: $alert-md-checkbox-icon-border-style;
-  border-color: $alert-md-background-color;
+  border-color: $alert-md-checkbox-icon-border-color;
   transform: $alert-md-checkbox-icon-transform;
 }
 
diff --git a/ionic/components/app/app.ios.scss b/ionic/components/app/app.ios.scss
index 5a4d2a69d5..6c4a40543e 100644
--- a/ionic/components/app/app.ios.scss
+++ b/ionic/components/app/app.ios.scss
@@ -25,7 +25,6 @@ hr {
 }
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-
   h1,
   h2,
   h3,
diff --git a/ionic/components/app/app.md.scss b/ionic/components/app/app.md.scss
index e14a09a05f..a44f87cee1 100644
--- a/ionic/components/app/app.md.scss
+++ b/ionic/components/app/app.md.scss
@@ -19,7 +19,7 @@ hr {
   background-color: rgba(0, 0, 0, .08);
 }
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
   h1,
   h2,
   h3,
@@ -38,7 +38,7 @@ hr {
   sup,
   ion-icon {
     &[#{$color-name}] {
-      color: $color-value;
+      color: $color-base;
     }
   }
 }
diff --git a/ionic/components/badge/badge.md.scss b/ionic/components/badge/badge.md.scss
index ca1eb2f056..655e9af92f 100644
--- a/ionic/components/badge/badge.md.scss
+++ b/ionic/components/badge/badge.md.scss
@@ -4,12 +4,13 @@
 // --------------------------------------------------
 
 $badge-md-border-radius:            4px !default;
-$badge-md-background-color:         map-get($colors-md, primary) !default;
+$badge-md-background-color:         color($colors-md, primary) !default;
+$badge-md-text-color:               color-contrast($colors-md, $badge-md-background-color) !default;
 
 
 ion-badge {
   border-radius: $badge-md-border-radius;
-  color: color-inverse($badge-md-background-color);
+  color: $badge-md-text-color;
   background-color: $badge-md-background-color;
 }
 
@@ -17,11 +18,11 @@ ion-badge {
 // Generate Material Design Badge Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
   .badge-#{$color-name} {
-    color: color-inverse($color-value);
-    background-color: $color-value;
+    color: $color-contrast;
+    background-color: $color-base;
   }
 
 }
diff --git a/ionic/components/button/button.md.scss b/ionic/components/button/button.md.scss
index 1af2bb2cd3..b5d6e76e7f 100644
--- a/ionic/components/button/button.md.scss
+++ b/ionic/components/button/button.md.scss
@@ -22,9 +22,9 @@ $button-md-clear-ripple-background-color:  #999 !default;
 $button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
 $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
 
-$button-md-color:                          map-get($colors-md, primary) !default;
+$button-md-color:                          color($colors-md, primary) !default;
 $button-md-color-activated:                color-shade($button-md-color) !default;
-$button-md-text-color:                     color-inverse($button-md-color) !default;
+$button-md-text-color:                     color-contrast($colors-md, $button-md-color) !default;
 $button-md-hover-opacity:                  .8 !default;
 
 $button-md-large-font-size:                2rem !default;
@@ -77,12 +77,12 @@ $button-md-small-icon-font-size:           1.4em !default;
 // Material Design Default Button Color Mixin
 // --------------------------------------------------
 
-@mixin md-button-default($color-name, $color-value) {
+@mixin md-button-default($color-name, $color-base, $color-contrast) {
 
   .button-#{$color-name} {
-    $background-color: $color-value;
+    $background-color: $color-base;
     $background-color-activated: color-shade($background-color);
-    $fg-color: color-inverse($background-color);
+    $fg-color: $color-contrast;
 
     color: $fg-color;
     background-color: $background-color;
@@ -177,10 +177,10 @@ $button-md-small-icon-font-size:           1.4em !default;
 // Material Design Outline Button Color Mixin
 // --------------------------------------------------
 
-@mixin md-button-outline($color-name, $color-value) {
+@mixin md-button-outline($color-name, $color-base, $color-contrast) {
 
   .button-outline-#{$color-name} {
-    $fg-color: color-shade($color-value, 5%);
+    $fg-color: color-shade($color-base, 5%);
     border-color: $fg-color;
     color: $fg-color;
     background-color: transparent;
@@ -229,10 +229,10 @@ $button-md-small-icon-font-size:           1.4em !default;
 // Material Design Clear Button Color Mixin
 // --------------------------------------------------
 
-@mixin md-button-clear($color-name, $color-value) {
+@mixin md-button-clear($color-name, $color-base, $color-contrast) {
 
   .button-clear-#{$color-name} {
-    $fg-color: $color-value;
+    $fg-color: $color-base;
     border-color: transparent;
     color: $fg-color;
     background-color: transparent;
@@ -304,10 +304,10 @@ ion-button-effect {
 // Generate Material Design Button Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
-  @include md-button-default($color-name, $color-value);
-  @include md-button-outline($color-name, $color-value);
-  @include md-button-clear($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  @include md-button-default($color-name, $color-base, $color-contrast);
+  @include md-button-outline($color-name, $color-base, $color-contrast);
+  @include md-button-clear($color-name, $color-base, $color-contrast);
 }
 
 
diff --git a/ionic/components/checkbox/checkbox.md.scss b/ionic/components/checkbox/checkbox.md.scss
index d5eb4ff610..abf5afb9b6 100644
--- a/ionic/components/checkbox/checkbox.md.scss
+++ b/ionic/components/checkbox/checkbox.md.scss
@@ -12,18 +12,18 @@ $checkbox-md-media-margin:               $item-md-padding-media-top 36px $item-m
 $checkbox-md-disabled-opacity:           .3 !default;
 
 $checkbox-md-icon-background-color-off:  $list-md-background-color !default;
-$checkbox-md-icon-background-color-on:   map-get($colors-md, primary) !default;
+$checkbox-md-icon-background-color-on:   color($colors-md, primary) !default;
 $checkbox-md-icon-size:                  16px !default;
 
 $checkbox-md-icon-checkmark-width:       2px !default;
 $checkbox-md-icon-checkmark-style:       solid !default;
-$checkbox-md-icon-checkmark-color:       $background-md-color !default;
+$checkbox-md-icon-checkmark-color:       color-contrast($colors-md, $checkbox-md-icon-background-color-on) !default;
 
 $checkbox-md-icon-border-width:          2px !default;
 $checkbox-md-icon-border-style:          solid !default;
 $checkbox-md-icon-border-radius:         2px !default;
 $checkbox-md-icon-border-color-off:      darken($list-md-border-color, 40%) !default;
-$checkbox-md-icon-border-color-on:       map-get($colors-md, primary) !default;
+$checkbox-md-icon-border-color-on:       color($colors-md, primary) !default;
 
 $checkbox-md-transition-duration:        280ms !default;
 $checkbox-md-transition-easing:          cubic-bezier(.4, 0, .2, 1) !default;
@@ -114,14 +114,14 @@ ion-checkbox + .item-inner ion-label {
 // Material Design Checkbox Color Mixin
 // --------------------------------------------------
 
-@mixin checkbox-theme-md($color-name, $bg-on) {
+@mixin checkbox-theme-md($color-name, $color-base, $color-contrast) {
 
   ion-checkbox[#{$color-name}] .checkbox-checked {
-    border-color: $bg-on;
-    background-color: $bg-on;
+    border-color: $color-base;
+    background-color: $color-base;
 
     .checkbox-inner {
-      border-color: color-inverse($bg-on);
+      border-color: $color-contrast;
     }
   }
 
@@ -131,6 +131,6 @@ ion-checkbox + .item-inner ion-label {
 // Generate Material Design Checkbox Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
-  @include checkbox-theme-md($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  @include checkbox-theme-md($color-name, $color-base, $color-contrast);
 }
diff --git a/ionic/components/chip/chip.md.scss b/ionic/components/chip/chip.md.scss
index 06ac4fa8c7..6d5bcdc7c8 100644
--- a/ionic/components/chip/chip.md.scss
+++ b/ionic/components/chip/chip.md.scss
@@ -7,12 +7,12 @@
 // Generate Material Design Chip Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
   ion-chip {
     ion-icon[#{$color-name}] {
-      color: color-inverse($color-value);
-      background-color: $color-value;
+      color: $color-contrast;
+      background-color: $color-base;
     }
   }
 
diff --git a/ionic/components/input/input.md.scss b/ionic/components/input/input.md.scss
index cd2b22655f..ebdabd3ffa 100644
--- a/ionic/components/input/input.md.scss
+++ b/ionic/components/input/input.md.scss
@@ -5,9 +5,9 @@
 // --------------------------------------------------
 
 $text-input-md-background-color:            $list-md-background-color !default;
-$text-input-md-highlight-color:             map-get($colors-md, primary) !default;
-$text-input-md-hightlight-color-valid:      map-get($colors-md, secondary) !default;
-$text-input-md-hightlight-color-invalid:    map-get($colors-md, danger) !default;
+$text-input-md-highlight-color:             color($colors-md, primary) !default;
+$text-input-md-hightlight-color-valid:      color($colors-md, secondary) !default;
+$text-input-md-hightlight-color-invalid:    color($colors-md, danger) !default;
 
 $text-input-md-margin-top:                  $item-md-padding-top !default;
 $text-input-md-margin-right:                ($item-md-padding-right / 2) !default;
diff --git a/ionic/components/item/item.md.scss b/ionic/components/item/item.md.scss
index 6d2ad45716..0d5ea6fe85 100644
--- a/ionic/components/item/item.md.scss
+++ b/ionic/components/item/item.md.scss
@@ -168,10 +168,10 @@ ion-item-divider {
 // Generate Material Design Item Divider Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
   ion-item-divider[#{$color-name}] {
-    color: color-inverse($color-value);
-    background-color: $color-value;
+    color: $color-contrast;
+    background-color: $color-base;
   }
 }
 
diff --git a/ionic/components/label/label.md.scss b/ionic/components/label/label.md.scss
index 558f0a0f80..379c277ed6 100644
--- a/ionic/components/label/label.md.scss
+++ b/ionic/components/label/label.md.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 $label-md-text-color:                 #999 !default;
-$label-md-text-color-focused:         map-get($colors-md, primary) !default;
+$label-md-text-color-focused:         color($colors-md, primary) !default;
 $label-md-margin:                     $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
 
 
@@ -69,10 +69,10 @@ ion-label[floating] {
 // Generate Material Design Label colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
   ion-label[#{$color-name}] {
-    color: $color-value;
+    color: $color-base;
   }
 
 }
diff --git a/ionic/components/radio/radio.md.scss b/ionic/components/radio/radio.md.scss
index 71f4efe1cc..aa4c22fd83 100644
--- a/ionic/components/radio/radio.md.scss
+++ b/ionic/components/radio/radio.md.scss
@@ -3,7 +3,7 @@
 // Material Design Radio
 // --------------------------------------------------
 
-$radio-md-color-on:               map-get($colors-md, primary) !default;
+$radio-md-color-on:               color($colors-md, primary) !default;
 $radio-md-color-off:              darken($list-md-border-color, 40%) !default;
 
 $radio-md-icon-width:             16px !default;
@@ -116,16 +116,16 @@ ion-radio {
 // Material Design Radio Color Mixin
 // --------------------------------------------------
 
-@mixin radio-theme-md($color-name, $color-value) {
+@mixin radio-theme-md($color-name, $color-base, $color-contrast) {
 
   ion-radio[#{$color-name}] {
 
     .radio-checked {
-      border-color: $color-value;
+      border-color: $color-base;
     }
 
     .radio-inner {
-      background-color: $color-value;
+      background-color: $color-base;
     }
 
   }
@@ -136,8 +136,8 @@ ion-radio {
 // Generate Material Design Radio Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  @include radio-theme-md($color-name, $color-value);
+  @include radio-theme-md($color-name, $color-base, $color-contrast);
 
 }
diff --git a/ionic/components/segment/segment.md.scss b/ionic/components/segment/segment.md.scss
index 97358f80f0..4a8e833a69 100644
--- a/ionic/components/segment/segment.md.scss
+++ b/ionic/components/segment/segment.md.scss
@@ -47,6 +47,7 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 
   &.activated,
   &.segment-activated {
+    opacity: 1;    
     border-color: $segment-button-md-border-color-activated;
   }
 }
@@ -68,15 +69,15 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 // Material Design Segment Button Mixin
 // --------------------------------------------------
 
-@mixin md-segment-button($color-name, $color-value) {
+@mixin md-segment-button($color-name, $color-base, $color-contrast) {
 
   ion-segment[#{$color-name}] .segment-button {
-    color: $color-value;
+    color: $color-base;
 
     &.activated,
     &.segment-activated {
-      border-color: $color-value;
-      color: $color-value;
+      border-color: $color-base;
+      color: $color-base;
       opacity: 1;
     }
   }
@@ -87,6 +88,6 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 // Material Design Segment Color Generation
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
-  @include md-segment-button($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  @include md-segment-button($color-name, $color-base, $color-contrast);
 }
diff --git a/ionic/components/tabs/tabs.md.scss b/ionic/components/tabs/tabs.md.scss
index bf501903f5..0df34e15f3 100644
--- a/ionic/components/tabs/tabs.md.scss
+++ b/ionic/components/tabs/tabs.md.scss
@@ -99,22 +99,22 @@ tab-highlight {
 // Material Design  Tabbar Color Mixin
 // --------------------------------------------------
 
-@mixin tabbar-md($color-name, $color-value) {
+@mixin tabbar-md($color-name, $color-base, $color-contrast) {
 
   ion-tabs[#{$color-name}] tabbar {
-    background-color: $color-value;
+    background-color: $color-base;
 
     .tab-button {
-      color: color-inverse($color-value);
+      color: $color-contrast;
     }
 
     .tab-button:hover:not(.disable-hover),
     .tab-button[aria-selected=true] {
-      color: color-inverse($color-value);
+      color: $color-contrast;
     }
 
     tab-highlight {
-      background: color-inverse($color-value);
+      background: $color-contrast;
     }
   }
 
@@ -124,6 +124,6 @@ tab-highlight {
 // Material Design Tabbar Color Generation
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
-  @include tabbar-md($color-name, $color-value);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  @include tabbar-md($color-name, $color-base, $color-contrast);
 }
diff --git a/ionic/components/toggle/toggle.md.scss b/ionic/components/toggle/toggle.md.scss
index d0a4572f1f..eae1c008d0 100644
--- a/ionic/components/toggle/toggle.md.scss
+++ b/ionic/components/toggle/toggle.md.scss
@@ -3,7 +3,7 @@
 // Material Design Toggle
 // --------------------------------------------------
 
-$toggle-md-active-color:                 map-get($colors-md, primary) !default;
+$toggle-md-active-color:                 color($colors-md, primary) !default;
 
 $toggle-md-track-width:                  36px !default;
 $toggle-md-track-height:                 14px !default;
@@ -123,16 +123,16 @@ ion-toggle {
 // Material Design Color Mixin
 // --------------------------------------------------
 
-@mixin toggle-theme-md($color-name, $color-value) {
+@mixin toggle-theme-md($color-name, $color-base) {
 
   ion-toggle[#{$color-name}] {
 
     .toggle-checked {
-      background-color: lighten($color-value, 25%);
+      background-color: lighten($color-base, 25%);
     }
 
     .toggle-checked .toggle-inner {
-      background-color: $color-value;
+      background-color: $color-base;
     }
 
   }
@@ -143,8 +143,8 @@ ion-toggle {
 // Generate Material Design Toggle Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors-md {
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  @include toggle-theme-md($color-name, $color-value);
+  @include toggle-theme-md($color-name, $color-base);
 
 }
diff --git a/ionic/components/toolbar/toolbar.md.scss b/ionic/components/toolbar/toolbar.md.scss
index 7147c4f0cc..6a0f2b8ca8 100644
--- a/ionic/components/toolbar/toolbar.md.scss
+++ b/ionic/components/toolbar/toolbar.md.scss
@@ -65,12 +65,12 @@ ion-navbar-section {
   color: $toolbar-md-text-color;
 }
 
-@mixin md-toolbar-theme($color-name, $color-value) {
+@mixin md-toolbar-theme($color-name, $color-base, $color-contrast) {
   .toolbar[#{$color-name}] {
-    $fg-color: toolbar-button-inverse($color-value);
+    $fg-color: color-contrast($colors-md, $color-base, true);
 
     .toolbar-background {
-      background: $color-value;
+      background: $color-base;
     }
 
     .bar-button-default,
@@ -90,10 +90,10 @@ ion-navbar-section {
       border-color: $fg-color;
     }
 
-    @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);
+    @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+      @include md-bar-button-default($color-name, $color-base, $color-contrast);
+      @include md-bar-button-outline($color-name, $color-base, $color-contrast);
+      @include md-bar-button-solid($color-name, $color-base, $color-contrast);
     }
   }
 }
@@ -154,14 +154,14 @@ ion-buttons[right] {
   overflow: hidden;
 }
 
-@mixin md-bar-button-default($color-name, $color-value) {
+@mixin md-bar-button-default($color-name, $color-base, $color-contrast) {
 
   .bar-button-#{$color-name} {
-    color: $color-value;
+    color: $color-base;
     background-color: transparent;
 
     &:hover:not(.disable-hover) {
-      color: $color-value;
+      color: $color-base;
     }
   }
 
@@ -183,21 +183,21 @@ ion-buttons[right] {
   }
 
   &.activated {
-    color: color-inverse($bar-button-md-color);
+    color: color-contrast($colors-md, $bar-button-md-color);
     background-color: $bar-button-md-color;
   }
 }
 
-@mixin md-bar-button-outline($color-name, $color-value) {
+@mixin md-bar-button-outline($color-name, $color-base, $color-contrast) {
 
   .bar-button-outline-#{$color-name} {
-    $fg-color: color-shade($color-value);
+    $fg-color: color-shade($color-base);
     border-color: $fg-color;
     color: $fg-color;
     background-color: transparent;
 
     &.activated {
-      color: color-inverse($fg-color);
+      color: $color-contrast;
       background-color: $fg-color;
     }
   }
@@ -209,27 +209,28 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-solid {
-  color: color-inverse($bar-button-md-color);
+  color: color-contrast($colors-md, $bar-button-md-color);
   background-color: $bar-button-md-color;
 
   &:hover:not(.disable-hover) {
-    color: color-inverse($bar-button-md-color);
+    color: color-contrast($colors-md, $bar-button-md-color);
   }
 
   &.activated {
-    color: color-inverse($bar-button-md-color);
+    color: color-contrast($colors-md, $bar-button-md-color);
     background-color: color-shade($bar-button-md-color);
   }
 }
 
-@mixin md-bar-button-solid($color-name, $color-value) {
+@mixin md-bar-button-solid($color-name, $color-base, $color-contrast) {
 
   .bar-button-solid-#{$color-name} {
-    color: color-inverse($color-value);
-    background-color: $color-value;
+    color: $color-contrast;
+    background-color: $color-base;
 
     &.activated {
-      background-color: color-shade($color-value);
+      color: $color-contrast;       
+      background-color: color-shade($color-base);
     }
   }
 
@@ -324,11 +325,11 @@ ion-buttons[right] {
 // Material Design Toolbar Color Generation
 // --------------------------------------------------
 
-@include md-bar-button-default(default, $bar-button-md-color);
+@include md-bar-button-default(default, $bar-button-md-color, color-contrast($colors-md, $bar-button-md-color));
 
-@each $color-name, $color-value in $colors-md {
-  @include md-toolbar-theme($color-name, $color-value);
-  @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);
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  @include md-toolbar-theme($color-name, $color-base, $color-contrast);
+  @include md-bar-button-default($color-name, $color-base, $color-contrast);
+  @include md-bar-button-outline($color-name, $color-base, $color-contrast);
+  @include md-bar-button-solid($color-name, $color-base, $color-contrast);
 }
diff --git a/ionic/themes/dark.md.scss b/ionic/themes/dark.md.scss
index 8ead798c23..9fba8949f7 100644
--- a/ionic/themes/dark.md.scss
+++ b/ionic/themes/dark.md.scss
@@ -3,12 +3,12 @@
 // Material Design Dark Theme
 // ----------------------------------
 
-$colors-md: map-merge($colors, ()) !default;
+$colors-md: copy-colors($colors) !default;
 
 
 $text-md-color:                       $text-color !default;
 $paragraph-md-color:                  $paragraph-color !default;
-$link-md-color:                       map-get($colors-md, primary) !default;
+$link-md-color:                       color($colors-md, primary) !default;
 $background-md-color:                 $background-color !default;
 $subdued-text-md-color:               $subdued-text-color !default;
 
@@ -58,11 +58,11 @@ $item-md-padding-media-bottom:        9px !default;
 $item-md-padding-icon-top:            11px !default;
 $item-md-padding-icon-bottom:         10px !default;
 $item-md-divider-background:          #151515 !default;
-$item-md-divider-color:               map-get($colors-md, light) !default;
+$item-md-divider-color:               color($colors-md, light) !default;
 
 // Material Design Toggle
 // ---------------------------------------------------
-$toggle-md-handle-background-color-off: map-get($colors-md, light) !default;
+$toggle-md-handle-background-color-off: color($colors-md, light) !default;
 
 
 // Ripple Color
diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss
index b0fab3ea58..6019c0e518 100644
--- a/ionic/themes/default.md.scss
+++ b/ionic/themes/default.md.scss
@@ -8,7 +8,7 @@ $colors-md: copy-colors($colors) !default;
 
 $text-md-color:                       $text-color !default;
 $paragraph-md-color:                  $paragraph-color !default;
-$link-md-color:                       map-get($colors-md, primary) !default;
+$link-md-color:                       color($colors-md, primary) !default;
 $background-md-color:                 $background-color !default;
 $subdued-text-md-color:               $subdued-text-color !default;
 
diff --git a/ionic/util/functions.scss b/ionic/util/functions.scss
index 72fab2cf7a..390b92100a 100644
--- a/ionic/util/functions.scss
+++ b/ionic/util/functions.scss
@@ -141,9 +141,10 @@
 // map key | map value | hex color not in map
 // --------------------------------------------------
 //
+// @param {Boolean} $toolbar-button - MD toolbar button
 // @return {Color}
 // --------------------------------------------------
-@function color-contrast($colors, $value) {
+@function color-contrast($colors, $value, $toolbar-button: null) {
   $color-value: null;
 
   // If the value is a color (i.e. #fff)
@@ -162,6 +163,8 @@
   // 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);
   } @else {
     $color-value: color-inverse($color-value);
   }