diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear.scss
index 254884bc4b..85c890bafa 100644
--- a/ionic/components/button/button-clear.scss
+++ b/ionic/components/button/button-clear.scss
@@ -6,15 +6,10 @@
 .button-clear {
   border-color: transparent;
   background: transparent;
-  color: color-shade($button-color);
 
   &.activated {
     opacity: 0.4;
     background: transparent;
   }
 
-  &:hover:not(.disable-hover) {
-    opacity: 0.6;
-    color: color-shade($button-color);
-  }
 }
diff --git a/ionic/components/button/button-outline.scss b/ionic/components/button/button-outline.scss
deleted file mode 100644
index 6d5fa8a09a..0000000000
--- a/ionic/components/button/button-outline.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "../../globals.core";
-
-// Outline Button
-// --------------------------------------------------
-
-.button-outline {
-  border: 1px solid $button-color;
-  background: transparent;
-  color: $button-color;
-
-  &.activated {
-    opacity: 1;
-    color: $background-color;
-    background-color: $button-color;
-  }
-}
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index fda04738e1..4ea3cdb47c 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -1,5 +1,8 @@
 @import "../../globals.core";
 
+// Buttons
+// --------------------------------------------------
+
 $button-font-size:                1.6rem !default;
 $button-margin:                   0.4rem 0.2rem !default;
 $button-padding:                  0 1em !default;
@@ -9,10 +12,6 @@ $button-border-radius:            4px !default;
 $button-round-padding:            0 2.6rem !default;
 $button-round-border-radius:      64px !default;
 
-$button-color:                    map-get($colors, primary) !default;
-$button-color-activated:          color-shade($button-color) !default;
-$button-text-color:               inverse($button-color) !default;
-$button-hover-opacity:            0.8 !default;
 
 .button-disabled {
   opacity: 0.4;
@@ -59,17 +58,6 @@ a.button {
   cursor: pointer;
   @include user-select-none();
   @include appearance(none);
-
-  background: $button-color;
-   color: $button-text-color;
-   &:hover:not(.disable-hover) {
-     opacity: $button-hover-opacity;
-     text-decoration: none;
-   }
-   &.activated {
-     opacity: 1;
-     background-color: $button-color-activated;
-   }
  }
 
 // Button Types
@@ -123,31 +111,3 @@ a.button {
 // button-disabled should stand alone(?)
 // button-sizes should stand alone (button-small, button-large, etc)
 // button-fab errrrr
-
-
-// Default Button Color Mixin
-// --------------------------------------------------
-
-@mixin button-default($bg-color, $bg-color-activated, $text-color) {
-  background-color: $bg-color;
-  color: $text-color;
-
-  &.activated {
-    background-color: $bg-color-activated;
-  }
-}
-
-
-// Generate Default Button Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors {
-
-  .button-#{$color-name} {
-    $bg-color: $color-value;
-    $bg-color-activated: color-shade($bg-color);
-    $text-color: inverse($bg-color);
-    @include button-default($bg-color, $bg-color-activated, $text-color);
-  }
-
-}
diff --git a/ionic/components/button/button_OLD.scss b/ionic/components/button/button_OLD.scss
deleted file mode 100644
index 17ba64c9f5..0000000000
--- a/ionic/components/button/button_OLD.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-@import "../../globals.core";
-
-// Button Variables
-// --------------------------------------------------
-
-$button-font-size:                1.6rem !default;
-$button-margin:                   0.4rem 0.2rem !default;
-$button-padding:                  0 1em !default;
-$button-height:                   2.8em !default;
-$button-border-radius:            4px !default;
-
-$button-round-padding:            0 2.6rem !default;
-$button-round-border-radius:      64px !default;
-
-$button-color:                    color(primary) !default;
-$button-color-activated:          color-shade($button-color) !default;
-$button-text-color:               inverse($button-color) !default;
-$button-hover-opacity:            0.8 !default;
-
-
-// Default Button
-// --------------------------------------------------
-
-button,
-[button] {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-
-  transition: background-color, opacity 100ms linear;
-
-  margin: $button-margin;
-  padding: $button-padding;
-  min-height: $button-height;
-  line-height: 1;
-
-  border: 1px solid #ccc;
-  border: transparent;
-  border-radius: $button-border-radius;
-
-  font-size: $button-font-size;
-  font-family: inherit;
-  font-variant: inherit;
-  font-style: inherit;
-
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-
-  text-align: center;
-  text-transform: none;
-
-  vertical-align: top; // the better option for most scenarios
-  vertical-align: -webkit-baseline-middle; // the best for those that support it
-
-  cursor: pointer;
-  @include user-select-none();
-  @include appearance(none);
-
-  background: $button-color;
-  color: $button-text-color;
-
-  &:hover:not(.disable-hover) {
-    opacity: $button-hover-opacity;
-    text-decoration: none;
-  }
-
-  &.activated {
-    opacity: 1;
-    background-color: $button-color-activated;
-  }
-
-
-  // Button Types
-  // --------------------------------------------------
-
-  &[block] {
-    display: flex;
-    clear: both;
-    margin-right: 0;
-    margin-left: 0;
-    width: 100%;
-
-    &:after {
-      clear: both;
-    }
-  }
-
-  &[full] {
-    width: 100%;
-    margin-right: 0;
-    margin-left: 0;
-    border-radius: 0;
-    border-right-width: 0;
-    border-left-width: 0;
-
-    &[outline] {
-      border-radius: 0;
-      border-right-width: 0;
-      border-left-width: 0;
-    }
-  }
-
-  &[round] {
-    border-radius: $button-round-border-radius;
-    padding: $button-round-padding;
-  }
-
-  &[disabled] {
-    opacity: 0.4;
-    cursor: default !important;
-    pointer-events: none;
-  }
-
-}
-
-a[button] {
-  text-decoration: none;
-}
-
-[padding] > button[block]:first-child,
-[padding] > [button][block]:first-child {
-  margin-top: 0;
-}
-
-
-// Default Button Color Mixin
-// --------------------------------------------------
-
-@mixin button-default($bg-color, $bg-color-activated, $text-color) {
-  background-color: $bg-color;
-  color: $text-color;
-
-  &.activated {
-    background-color: $bg-color-activated;
-  }
-}
-
-
-// Generate Default Button Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors {
-
-  button[#{$color-name}],
-  [button][#{$color-name}] {
-
-    $bg-color: $color-value;
-    $bg-color-activated: color-shade($bg-color);
-    $text-color: inverse($bg-color);
-    @include button-default($bg-color, $bg-color-activated, $text-color);
-
-  }
-
-}
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index 4e42d10b34..d46ce704d3 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -3,23 +3,102 @@
 @import "../button-clear";
 @import "../button-fab";
 @import "../button-icon";
-@import "../button-outline";
 @import "../button-size";
 
-// iOS Button (largely the core button styles)
+// iOS Button
 // --------------------------------------------------
 
+$button-ios-color:                    map-get($colors-ios, primary) !default;
+$button-ios-color-activated:          color-shade($button-ios-color) !default;
+$button-ios-text-color:               inverse($button-ios-color) !default;
+$button-ios-hover-opacity:            0.8 !default;
+
+
+.button {
+  background: $button-ios-color;
+  color: $button-ios-text-color;
+
+  &:hover:not(.disable-hover) {
+     opacity: $button-ios-hover-opacity;
+     text-decoration: none;
+   }
+
+   &.activated {
+     opacity: 1;
+     background-color: $button-ios-color-activated;
+   }
+}
+
+
 .button-block {
   // This fixes an issue with flexbox and button on iOS Safari. See #225
   display: block;
 }
 
 
+// Clear Button
+// --------------------------------------------------
+
+.button-clear {
+  color: color-shade($button-ios-color);
+
+  &:hover:not(.disable-hover) {
+    opacity: 0.6;
+    color: color-shade($button-ios-color);
+  }
+}
+
+
+// Outline Button
+// --------------------------------------------------
+
+.button-outline {
+  border: 1px solid $button-ios-color;
+  background: transparent;
+  color: $button-ios-color;
+
+  &.activated {
+    opacity: 1;
+    color: $background-ios-color;
+    background-color: $button-ios-color;
+  }
+}
+
+
+
+// Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin button-default($bg-color, $bg-color-activated, $fg-color) {
+  background-color: $bg-color;
+  color: $fg-color;
+
+  &.activated {
+    background-color: $bg-color-activated;
+  }
+}
+
+
+// Generate Default Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-ios {
+
+  .button-#{$color-name} {
+    $bg-color: $color-value;
+    $bg-color-activated: color-shade($bg-color);
+    $fg-color: inverse($bg-color);
+    @include button-default($bg-color, $bg-color-activated, $fg-color);
+  }
+
+}
+
+
 // Generate Clear Button Colors
 // --------------------------------------------------
 
 // TODO primary activated is wrong
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
 
   $fg-color: color-shade($color-value);
 
@@ -52,7 +131,7 @@
   color: $fg-color;
 
   &.activated {
-    color: $background-color;
+    color: $background-ios-color;
     background-color: $fg-color;
   }
 
@@ -62,7 +141,7 @@
 // Outline Clear Button Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
 
   .button-outline-#{$color-name} {
 
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 337926db57..4d4050ffa1 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -3,7 +3,6 @@
 @import "../button-clear";
 @import "../button-fab";
 @import "../button-icon";
-@import "../button-outline";
 @import "../button-size";
 
 // Material Design Button
@@ -25,6 +24,11 @@ $button-md-clear-active-background-color:  rgba(158, 158, 158, 0.2) !default;
 $button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
 $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
 
+$button-md-color:                          map-get($colors-md, primary) !default;
+$button-md-color-activated:                color-shade($button-md-color) !default;
+$button-md-text-color:                     inverse($button-md-color) !default;
+$button-md-hover-opacity:                  0.8 !default;
+
 
 .button {
   border-radius: $button-md-border-radius;
@@ -93,7 +97,7 @@ $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
   }
 
   md-ripple {
-    background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
+    background: rgba( red($button-md-color), green($button-md-color), blue($button-md-color), 0.1);
   }
 }
 
@@ -108,6 +112,22 @@ $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
   }
 }
 
+
+// Outline Button
+// --------------------------------------------------
+
+.button-outline {
+  border: 1px solid $button-md-color;
+  background: transparent;
+  color: $button-md-color;
+
+  &.activated {
+    opacity: 1;
+    color: $background-md-color;
+    background-color: $button-md-color;
+  }
+}
+
 // Material Design Button Color Mixin
 // --------------------------------------------------
 
@@ -138,7 +158,7 @@ $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
 // Generate Material Design Button Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-md {
 
   @include button-theme-md($color-name, $color-value);
 
diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss
index bc8f463cb2..a26627c934 100644
--- a/ionic/components/card/modes/ios.scss
+++ b/ionic/components/card/modes/ios.scss
@@ -17,7 +17,7 @@ $card-ios-padding-left:                16px !default;
 $card-ios-padding-media-top:           10px !default;
 $card-ios-padding-media-bottom:        9px !default;
 
-$card-ios-background-color:            $list-background-color !default;
+$card-ios-background-color:            $list-ios-background-color !default;
 $card-ios-box-shadow:                  0 1px 2px rgba(0,0,0,.3) !default;
 $card-ios-border-radius:               2px !default;
 $card-ios-font-size:                   1.4rem !default;
diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss
index 58a7c17886..43b1537ae7 100644
--- a/ionic/components/card/modes/md.scss
+++ b/ionic/components/card/modes/md.scss
@@ -20,7 +20,7 @@ $card-md-padding-media-bottom:        10px !default;
 $card-md-avatar-size:                 4rem !default;
 $card-md-thumbnail-size:              8rem !default;
 
-$card-md-background-color:            $list-background-color !default;
+$card-md-background-color:            $list-md-background-color !default;
 $card-md-box-shadow:                  0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 $card-md-border-radius:               2px !default;
 $card-md-font-size:                   1.4rem !default;
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index 74c82081b0..721c1a6fa4 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -5,11 +5,11 @@
 // --------------------------------------------------
 
 $checkbox-ios-icon-size:             21px !default;
-$checkbox-ios-background-color-off:  $list-background-color !default;
-$checkbox-ios-border-color-off:      $list-border-color !default;
-$checkbox-ios-background-color-on:   map-get($colors, primary) !default;
-$checkbox-ios-border-color-on:       map-get($colors, primary) !default;
-$checkbox-ios-checkmark-color-on:    $background-color !default;
+$checkbox-ios-background-color-off:  $list-ios-background-color !default;
+$checkbox-ios-border-color-off:      $list-ios-border-color !default;
+$checkbox-ios-background-color-on:   map-get($colors-ios, primary) !default;
+$checkbox-ios-border-color-on:       map-get($colors-ios, primary) !default;
+$checkbox-ios-checkmark-color-on:    $background-ios-color !default;
 
 
 ion-checkbox {
@@ -33,7 +33,7 @@ ion-checkbox {
   }
 
   &.item.activated {
-    background-color: $list-background-color;
+    background-color: $list-ios-background-color;
   }
 
 }
@@ -70,7 +70,7 @@ checkbox-icon {
 // Generate iOS Checkbox Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $value in $colors {
+@each $color-name, $value in $colors-ios {
 
   @include checkbox-theme-ios($color-name, $value);
 
diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss
index 8e9d7526bc..f0df3b9a06 100644
--- a/ionic/components/checkbox/modes/md.scss
+++ b/ionic/components/checkbox/modes/md.scss
@@ -5,13 +5,13 @@
 // --------------------------------------------------
 
 $checkbox-md-icon-size:             16px !default;
-$checkbox-md-background-color-off:  $list-background-color !default;
+$checkbox-md-background-color-off:  $list-md-background-color !default;
 $checkbox-md-border-width:          2px !default;
 $checkbox-md-border-radius:         2px !default;
 $checkbox-md-border-color-off:      darken($item-md-border-color, 40%) !default;
-$checkbox-md-background-color-on:   color(primary) !default;
-$checkbox-md-border-color-on:       color(primary) !default;
-$checkbox-md-checkmark-color-on:    $background-color !default;
+$checkbox-md-background-color-on:   map-get($colors-md, primary) !default;
+$checkbox-md-border-color-on:       map-get($colors-md, primary) !default;
+$checkbox-md-checkmark-color-on:    $background-md-color !default;
 
 
 ion-checkbox {
@@ -76,10 +76,10 @@ checkbox-icon {
 }
 
 
-// Generate Material Design Checkbox Auxiliary Colors
+// Generate Material Design Checkbox Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-md {
 
   @include checkbox-theme-md($color-name, $color-value);
 
diff --git a/ionic/components/content/modes/ios.scss b/ionic/components/content/modes/ios.scss
index 198f032f27..0ac8f94ce6 100644
--- a/ionic/components/content/modes/ios.scss
+++ b/ionic/components/content/modes/ios.scss
@@ -3,7 +3,7 @@
 // iOS Content
 // --------------------------------------------------
 
-$outer-content-md-background-color:         #efeff4 !default;
+$outer-content-ios-background-color:         #efeff4 !default;
 
 
 body,
@@ -16,7 +16,7 @@ a {
 }
 
 .outer-content {
-  background: $outer-content-md-background-color;
+  background: $outer-content-ios-background-color;
 }
 
 ion-nav.has-views,
@@ -24,7 +24,7 @@ ion-tab.has-views {
   background: #000;
 }
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
   h1, h2, h3, h4, h5, h6,
   p,
   span,
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index c8a75316b0..c7e4998fda 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -17,9 +17,6 @@
   text-align: initial;
   overflow: hidden;
 
-  background-color: $list-background-color;
-  color: $list-text-color;
-
   box-sizing: border-box;
 
   &[no-lines] {
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 7e05a1e032..ea92fe34f4 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -13,10 +13,16 @@ $item-ios-divider-bg:                 #f7f7f7 !default;
 $item-ios-divider-color:              #222 !default;
 $item-ios-divider-padding:            5px 15px !default;
 
-$item-ios-sliding-content-bg:         $background-color !default;
+$item-ios-sliding-content-bg:         $background-ios-color !default;
 $item-ios-sliding-transition:         transform 250ms ease-in-out !default;
 
 
+.item {
+  background-color: $list-ios-background-color;
+  color: $list-ios-text-color;
+}
+
+
 ion-item-group {
   .item:first-child {
     .item-inner {
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index aff884fed2..28a83da50c 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -4,7 +4,7 @@
 // Material Design Item
 // --------------------------------------------------
 
-$item-md-border-color:                grayscale(lighten($list-border-color, 8%)) !default;
+$item-md-border-color:                grayscale(lighten($list-md-border-color, 8%)) !default;
 $item-md-activated-background-color:  #f1f1f1 !default;
 $item-md-font-size:                   1.6rem !default;
 
@@ -30,7 +30,7 @@ $item-md-divider-bg:                 #fff !default;
 $item-md-divider-color:              #222 !default;
 $item-md-divider-padding:            5px 15px !default;
 
-$item-md-sliding-content-bg:         $background-color !default;
+$item-md-sliding-content-bg:         $background-md-color !default;
 $item-md-sliding-transition:         transform 250ms ease-in-out !default;
 
 
@@ -53,6 +53,9 @@ ion-note {
   font-weight: normal;
   box-shadow: none;
 
+  background-color: $list-md-background-color;
+  color: $list-md-text-color;
+
   h1 {
     margin: 0 0 2px;
     font-size: 2.4rem;
diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss
index b17a9af89f..147dd359b0 100644
--- a/ionic/components/list/list.scss
+++ b/ionic/components/list/list.scss
@@ -20,8 +20,4 @@ ion-list {
 ion-list[inset] {
   overflow: hidden;
   transform: translateZ(0);
-
-  ion-list-header {
-    background-color: $list-background-color;
-  }
 }
diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss
index 56644ae858..f377a826fd 100644
--- a/ionic/components/list/modes/ios.scss
+++ b/ionic/components/list/modes/ios.scss
@@ -21,8 +21,6 @@ $list-ios-header-font-weight:         500 !default;
 $list-ios-header-letter-spacing:      0.1rem !default;
 $list-ios-header-color:               #333 !default;
 
-$list-ios-border-color:               $list-border-color !default;
-
 
 /****************/
 /* DEFAULT LIST */
diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss
index 7a6b761d87..b8b720a424 100644
--- a/ionic/components/list/modes/md.scss
+++ b/ionic/components/list/modes/md.scss
@@ -130,6 +130,10 @@ ion-list[inset] {
   + ion-list[inset] {
     margin-top: 0;
   }
+
+  ion-list-header {
+    background-color: $list-md-background-color;
+  }
 }
 
 
diff --git a/ionic/components/popup/modes/md.scss b/ionic/components/popup/modes/md.scss
index 75e49bba86..5e57c9f567 100644
--- a/ionic/components/popup/modes/md.scss
+++ b/ionic/components/popup/modes/md.scss
@@ -18,7 +18,7 @@ $popup-md-button-min-height:              36px !default;
 
 $popup-md-prompt-input-border-color:      #dedede !default;
 $popup-md-prompt-input-text-color:        #000000 !default;
-$popup-md-prompt-input-highlight-color:   map-get($colors, primary) !default;
+$popup-md-prompt-input-highlight-color:   map-get($colors-md, primary) !default;
 $popup-md-prompt-input-placeholder-color: #b9b9b9 !default;
 $popup-md-prompt-input-margin-top:        5px !default;
 $popup-md-prompt-input-margin-bottom:     5px !default;
diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index 7a04a099eb..50dbafa0c3 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -4,7 +4,7 @@
 // iOS Radio
 // --------------------------------------------------
 
-$radio-ios-color-on:       color(primary) !default;
+$radio-ios-color-on:       map-get($colors-ios, primary) !default;
 
 
 ion-radio {
@@ -27,7 +27,7 @@ ion-radio {
   }
 
   &.item.activated {
-    background-color: $list-background-color;
+    background-color: $list-ios-background-color;
   }
 
 }
@@ -68,7 +68,7 @@ radio-icon {
 // Generate iOS Radio Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
 
   @include radio-theme-ios($color-name, $color-value);
 
diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss
index a2441f7456..050b5804b8 100644
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -4,7 +4,7 @@
 // Material Design Radio
 // --------------------------------------------------
 
-$radio-md-color-on:               color(primary) !default;
+$radio-md-color-on:               map-get($colors-md, primary) !default;
 
 $radio-md-icon-size:              16px !default;
 $radio-md-border-width:           2px !default;
@@ -85,10 +85,10 @@ media-radio {
 }
 
 
-// Generate Material Design Radio Auxiliary Colors
+// Generate Material Design Radio Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-md {
 
   @include radio-theme-md($color-name, $color-value);
 
diff --git a/ionic/components/searchbar/modes/ios.scss b/ionic/components/searchbar/modes/ios.scss
index acd600659d..e4ab7fd12f 100644
--- a/ionic/components/searchbar/modes/ios.scss
+++ b/ionic/components/searchbar/modes/ios.scss
@@ -139,7 +139,7 @@ ion-searchbar.left-align {
 // Generate Default Search Bar Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
 
   ion-searchbar[#{$color-name}] {
 
diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index d633beba72..51269fc009 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -11,7 +11,7 @@ $segment-button-ios-bg-color:                 transparent !default;
 $segment-button-ios-font-size:                1.3rem !default;
 $segment-button-ios-border-radius:            4px !default;
 
-$segment-button-ios-bg-color-activated:       map-get($colors, primary) !default;
+$segment-button-ios-bg-color-activated:       map-get($colors-ios, primary) !default;
 $segment-button-ios-text-color:               inverse($segment-button-ios-bg-color-activated) !default;
 $segment-button-ios-activated-transition:     100ms all linear !default;
 $segment-button-ios-hover-opacity:            0.16 !default;
@@ -112,7 +112,7 @@ ion-segment {
 // Loop through all of the colors to change the segment colors
 // based on the toolbar color or if it isn't in a toolbar then based on
 // the segment color value
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
   $inverse-color-value: inverse($color-value);
 
   .toolbar[#{$color-name}] {
@@ -126,7 +126,7 @@ ion-segment {
     // Loop through all of the colors again to change the segment colors
     // for each toolbar based on the segment color
     // this will take priority over the default toolbar colors
-    @each $color-name, $color-value in $colors {
+    @each $color-name, $color-value in $colors-ios {
       $inverse-color-value: inverse($color-value);
 
       ion-segment[#{$color-name}] {
diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
index 6b3377c622..896a7b63a2 100644
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -8,8 +8,8 @@ $segment-button-md-font-size:                  1.2rem !default;
 $segment-button-md-min-height:                 4.0rem !default;
 $segment-button-md-line-height:                4.0rem !default;
 
-$segment-button-md-text-color-activated:       color(primary) !default;
-$segment-button-md-border-color-activated:     color(primary) !default;
+$segment-button-md-text-color-activated:       map-get($colors-md, primary) !default;
+$segment-button-md-border-color-activated:     map-get($colors-md, primary) !default;
 $segment-button-md-border-bottom:              2px solid rgba(#000000, 0.10) !default;
 
 
@@ -72,7 +72,7 @@ ion-segment {
 // Loop through all of the colors to change the segment colors
 // based on the toolbar color or if it isn't in a toolbar then based on
 // the segment color value
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-md {
   $inverse-color-value: inverse($color-value);
 
   .toolbar[#{$color-name}] {
@@ -86,7 +86,7 @@ ion-segment {
     // Loop through all of the colors again to change the segment colors
     // for each toolbar based on the segment color
     // this will take priority over the default toolbar colors
-    @each $color-name, $color-value in $colors {
+    @each $color-name, $color-value in $colors-md {
       ion-segment[#{$color-name}] {
         ion-segment-button[button] {
           @include segment-button($color-value);
diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index a2b3a23fe7..e1d29da473 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -9,10 +9,10 @@ $switch-ios-height:                    32px !default;
 $switch-ios-border-width:              2px !default;
 $switch-ios-border-radius:             $switch-ios-height / 2 !default;
 
-$switch-ios-background-color-off:      $list-background-color !default;
-$switch-ios-border-color-off:          grayscale(lighten($list-border-color, 11%)) !default;
+$switch-ios-background-color-off:      $list-ios-background-color !default;
+$switch-ios-border-color-off:          grayscale(lighten($list-ios-border-color, 11%)) !default;
 
-$switch-ios-background-color-on:       color(primary) !default;
+$switch-ios-background-color-on:       map-get($colors-ios, primary) !default;
 
 $switch-ios-handle-width:              $switch-ios-height - ($switch-ios-border-width * 2) !default;
 $switch-ios-handle-height:             $switch-ios-handle-width !default;
@@ -27,7 +27,7 @@ $switch-ios-transition-duration:       300ms !default;
 ion-switch {
 
   &.item.activated {
-    background: $list-background-color;
+    background: $list-ios-background-color;
   }
 
   media-switch {
@@ -145,7 +145,7 @@ ion-switch {
 // Generate iOS Switch Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $value in $colors {
+@each $color-name, $value in $colors-ios {
 
   @include switch-theme-ios($color-name, $value);
 
diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss
index 002976a84c..e938bd48bd 100644
--- a/ionic/components/switch/modes/md.scss
+++ b/ionic/components/switch/modes/md.scss
@@ -4,7 +4,7 @@
 // Material Design Switch
 // --------------------------------------------------
 
-$switch-md-active-color:                 map-get($colors, primary) !default;
+$switch-md-active-color:                 map-get($colors-md, primary) !default;
 
 $switch-md-track-width:                  36px !default;
 $switch-md-track-height:                 14px !default;
@@ -13,7 +13,7 @@ $switch-md-track-background-color-on:    lighten($switch-md-active-color, 25%) !
 
 $switch-md-handle-width:                 20px !default;
 $switch-md-handle-height:                20px !default;
-$switch-md-handle-background-color-off:  $background-color !default;
+$switch-md-handle-background-color-off:  $background-md-color !default;
 $switch-md-handle-background-color-on:   $switch-md-active-color !default;
 $switch-md-handle-box-shadow:            0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 
@@ -105,7 +105,7 @@ ion-switch {
 // Generate Material Design Switch Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $value in $colors {
+@each $color-name, $value in $colors-md {
 
   @include switch-theme-md($color-name, $value);
 
diff --git a/ionic/components/tabs/modes/ios.scss b/ionic/components/tabs/modes/ios.scss
index 601a0517bd..dbb301d3f7 100644
--- a/ionic/components/tabs/modes/ios.scss
+++ b/ionic/components/tabs/modes/ios.scss
@@ -4,14 +4,21 @@
 // iOS Tabs
 // --------------------------------------------------
 
+$tabbar-ios-background-color:         $toolbar-ios-background-color !default;
 $tabbar-ios-item-padding:             0px 10px !default;
 $tabbar-ios-item-font-size:           10px !default;
 $tabbar-ios-item-icon-size:           32px !default;
 $tabbar-ios-height:                   49px !default;
 
+$tab-button-ios-min-width:            80px !default;
+$tab-button-ios-max-width:            240px !default;
+$tab-button-ios-active-color:         $toolbar-ios-active-color !default;
+$tab-button-ios-inactive-color:       $toolbar-ios-inactive-color !default;
+
 
 tabbar {
   border-top: 1px solid $toolbar-ios-border-color;
+  background: $tabbar-ios-background-color;
 }
 
 ion-tabs[tabbar-placement=top] tabbar {
@@ -21,7 +28,16 @@ ion-tabs[tabbar-placement=top] tabbar {
 
 .tab-button {
   padding: $tabbar-ios-item-padding;
+  min-width: $tab-button-ios-min-width;
+  max-width: $tab-button-ios-max-width;
   min-height: $tabbar-ios-height;
+
+  color: $tab-button-ios-inactive-color;
+}
+
+.tab-button:hover:not(.disable-hover),
+.tab-button[aria-selected=true] {
+  color: $tab-button-ios-active-color;
 }
 
 .tab-button-text {
@@ -91,10 +107,32 @@ ion-tabs[tabbar-placement=top] tabbar {
 
 }
 
-@each $color-name, $color-value in $colors {
+
+// iOS Tabbar Color Mixin
+// --------------------------------------------------
+
+@mixin tabbar-ios($color-name, $color-value) {
 
   tabbar[#{$color-name}] {
     border-color: darken($color-value, 10%);
+    background-color: $color-value;
+
+    .tab-button {
+      color: inverse($color-value);
+    }
+
+    .tab-button:hover:not(.disable-hover),
+    .tab-button[aria-selected=true] {
+      color: inverse($color-value);
+    }
   }
 
 }
+
+
+// iOS Tabbar Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-ios {
+  @include tabbar-ios($color-name, $color-value);
+}
diff --git a/ionic/components/tabs/modes/md.scss b/ionic/components/tabs/modes/md.scss
index 46f90e6156..38b09d5d5c 100644
--- a/ionic/components/tabs/modes/md.scss
+++ b/ionic/components/tabs/modes/md.scss
@@ -4,12 +4,21 @@
 // Material Design Tabs
 // --------------------------------------------------
 
+$tabbar-md-background-color:         $toolbar-md-background-color !default;
 $tabbar-md-item-padding:             12px 10px 5px 10px !default;
 $tabbar-md-item-font-size:           1.4rem !default;
 $tabbar-md-item-font-weight:         500 !default;
 $tabbar-md-item-icon-size:           2.4rem !default;
 $tabbar-md-item-height:              4.8rem !default;
 
+$tab-button-md-active-color:         $toolbar-md-active-color !default;
+$tab-button-md-inactive-color:       $toolbar-md-inactive-color !default;
+
+
+tabbar {
+  background: $tabbar-md-background-color;
+}
+
 
 .tab-button {
   padding: $tabbar-md-item-padding;
@@ -21,6 +30,7 @@ $tabbar-md-item-height:              4.8rem !default;
   box-shadow: none;
   border-radius: 0;
   border-bottom: 2px solid transparent;
+  color: $tab-button-md-inactive-color;
 
   &[aria-selected=true] {
     opacity: 1.0;
@@ -64,7 +74,7 @@ tab-highlight {
   width: 1px;
   bottom: 0;
   left: 0;
-  background: $tab-button-active-color;
+  background: $tab-button-md-active-color;
   transform-origin: 0 0;
   transform: translateZ(0);
 
@@ -78,14 +88,34 @@ tab-highlight {
 }
 
 
-@each $color-name, $color-value in $colors {
+// Material Design  Tabbar Color Mixin
+// --------------------------------------------------
+
+@mixin tabbar-md($color-name, $color-value) {
 
   tabbar[#{$color-name}] {
+    background-color: $color-value;
+
+    .tab-button {
+      color: inverse($color-value);
+    }
+
+    .tab-button:hover:not(.disable-hover),
+    .tab-button[aria-selected=true] {
+      color: inverse($color-value);
+    }
 
     tab-highlight {
       background: inverse($color-value);
     }
-
   }
 
 }
+
+
+// Material Design Tabbar Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-md {
+  @include tabbar-md($color-name, $color-value);
+}
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index ae26419ea9..4da71363b6 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -3,15 +3,6 @@
 // Tabs
 // --------------------------------------------------
 
-$tabbar-background-color:        $toolbar-background-color !default;
-
-$tab-button-text-color:           $toolbar-text-color !default;
-$tab-button-active-color:         $toolbar-active-color !default;
-$tab-button-inactive-color:       $toolbar-inactive-color !default;
-$tab-button-padding:              10px !default;
-$tab-button-min-width:            80px !default;
-$tab-button-max-width:            240px !default;
-
 
 ion-tabs {
   display: flex;
@@ -61,7 +52,6 @@ tabbar {
   display: flex;
   justify-content: center;
   overflow: hidden;
-  background: $tabbar-background-color;
 }
 
 .tab-button {
@@ -76,25 +66,16 @@ tabbar {
   align-items: center;
 
   margin: 0;
-  padding: $tab-button-padding;
-  min-width: $tab-button-min-width;
-  max-width: $tab-button-max-width;
 
   text-align: center;
   cursor: pointer;
   @include user-select-none();
 
-  color: $tab-button-inactive-color;
   border: 0;
   border-radius: 0;
   background: none;
 }
 
-.tab-button:hover:not(.disable-hover),
-.tab-button[aria-selected=true] {
-  color: $tab-button-active-color;
-}
-
 .tab-button-text {
   margin-top: 3px;
   margin-bottom: 2px;
@@ -155,24 +136,3 @@ tab-highlight {
 [tabbar-icons=hide] .tab-button-icon {
   display: none;
 }
-
-
-// Tabbar Color Generation
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors {
-
-  tabbar[#{$color-name}] {
-    background-color: $color-value;
-
-    .tab-button {
-      color: inverse($color-value);
-    }
-
-    .tab-button:hover:not(.disable-hover),
-    .tab-button[aria-selected=true] {
-      color: inverse($color-value);
-    }
-  }
-
-}
diff --git a/ionic/components/text-input/modes/ios.scss b/ionic/components/text-input/modes/ios.scss
index 2b8ff5410a..f6ebb8adbb 100644
--- a/ionic/components/text-input/modes/ios.scss
+++ b/ionic/components/text-input/modes/ios.scss
@@ -5,12 +5,14 @@
 // iOS Text Input
 // --------------------------------------------------
 
+$text-input-ios-background-color:    $list-ios-background-color !default;
 $text-input-ios-label-color:         #7f7f7f !default;
 
 
 [text-input] {
   margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
   padding: 0;
+  background-color: $text-input-ios-background-color;
 }
 
 ion-input[inset] [text-input] {
@@ -50,3 +52,10 @@ ion-label + [text-input] {
 [floating-label].has-value ion-label  {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
+
+
+@each $color-name, $color-value in $colors-ios {
+  ion-label[#{$color-name}] {
+    color: $color-value !important;
+  }
+}
diff --git a/ionic/components/text-input/modes/md.scss b/ionic/components/text-input/modes/md.scss
index e604bae33f..23a728c389 100644
--- a/ionic/components/text-input/modes/md.scss
+++ b/ionic/components/text-input/modes/md.scss
@@ -5,15 +5,17 @@
 // Material Design Text Input
 // --------------------------------------------------
 
+$text-input-md-background-color:            $list-md-background-color !default;
 $text-input-md-label-color:                 #999 !default;
-$text-input-md-highlight-color:             color(primary) !default;
-$text-input-md-hightlight-color-valid:      color(secondary) !default;
-$text-input-md-hightlight-color-invalid:    color(danger) !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] {
   margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
   padding: 0;
+  background-color: $text-input-md-background-color;
 }
 
 ion-input[inset] [text-input] {
@@ -80,3 +82,9 @@ ion-input.ng-invalid.ng-touched:after {
 [floating-label].has-value ion-label  {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
+
+@each $color-name, $color-value in $colors-md {
+  ion-label[#{$color-name}] {
+    color: $color-value !important;
+  }
+}
diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss
index 0b020aa81c..2f3d9cab20 100644
--- a/ionic/components/text-input/text-input.scss
+++ b/ionic/components/text-input/text-input.scss
@@ -3,8 +3,6 @@
 // Text Input
 // --------------------------------------------------
 
-$text-input-background-color:   $list-background-color !default;
-
 
 ion-input {
 
@@ -33,7 +31,6 @@ ion-input {
 
 ion-input [text-input] {
   flex: 1;
-  background-color: $text-input-background-color;
   pointer-events: none;
 }
 
@@ -71,11 +68,3 @@ input,
 textarea {
   @include placeholder();
 }
-
-@each $color-name, $color-value in $colors {
-  ion-label {
-    &[#{$color-name}] {
-      color: $color-value !important;
-    }
-  }
-}
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index e0e012acf7..5f5a0405e7 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -12,7 +12,6 @@ $toolbar-order-ios: (
 );
 
 $toolbar-ios-height:                        4.4rem !default;
-$toolbar-ios-border-color:                  $toolbar-border-color !default;
 $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
 
@@ -41,6 +40,7 @@ $toolbar-ios-title-font-size:               1.7rem !default;
     margin-bottom: 0;
     padding: 0 5px;
     min-height: 32px;
+    color: $toolbar-ios-active-color;
   }
 
   button.icon-only,
@@ -72,9 +72,19 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
 }
 
+.toolbar button:hover:not(.disable-hover),
+.toolbar [button]:hover:not(.disable-hover),
+.toolbar button.activated,
+.toolbar [button].activated {
+  color: $toolbar-ios-active-color;
+  background-color: transparent;
+}
+
 .toolbar toolbar-background {
   border-bottom-width: 1px;
   border-bottom-style: solid;
+  border-color: $toolbar-ios-border-color;
+  background-color: $toolbar-ios-background-color;
 }
 
 ion-title {
@@ -93,6 +103,7 @@ ion-title {
   font-weight: 500;
   text-align: center;
   pointer-events: auto;
+  color: $toolbar-ios-text-color;
 }
 
 ion-nav-items {
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index bef35e0c6b..7e9c1957a0 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -21,6 +21,7 @@ $toolbar-md-button-font-size:        1.4rem !default;
     min-height: 32px;
     box-shadow: none;
     overflow: visible;
+    color: $toolbar-md-active-color;
   }
 
   button.icon-only,
@@ -53,12 +54,29 @@ $toolbar-md-button-font-size:        1.4rem !default;
 
 }
 
+.toolbar button:hover:not(.disable-hover),
+.toolbar [button]:hover:not(.disable-hover),
+.toolbar button.activated,
+.toolbar [button].activated {
+  color: $toolbar-md-active-color;
+  background-color: transparent;
+}
+
+.toolbar toolbar-background {
+  border-color: $toolbar-md-border-color;
+  background-color: $toolbar-md-background-color;
+}
+
 ion-title {
   padding: 0 12px;
   font-size: $toolbar-md-title-font-size;
   font-weight: 500;
 }
 
+.toolbar-title {
+  color: $toolbar-md-text-color;
+}
+
 ion-nav-items[primary] button:first-child {
   margin-left: 0;
 }
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index e53669f031..38166b4e97 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -33,7 +33,6 @@ $toolbar-order: (
   button,
   [button] {
     background-color: transparent;
-    color: $toolbar-active-color;
     box-shadow: none;
   }
 }
@@ -47,8 +46,6 @@ $toolbar-order: (
   z-index: $z-index-toolbar-background;
 
   border: 0;
-  border-color: $toolbar-border-color;
-  background-color: $toolbar-background-color;
 
   pointer-events: none;
 }
@@ -59,14 +56,6 @@ toolbar-content {
   order: map-get($toolbar-order, content);
 }
 
-.toolbar button:hover:not(.disable-hover),
-.toolbar [button]:hover:not(.disable-hover),
-.toolbar button.activated,
-.toolbar [button].activated {
-  color: $toolbar-active-color;
-  background-color: transparent;
-}
-
 .toolbar[position=bottom] {
   order: $flex-order-toolbar-bottom;
 }
@@ -83,7 +72,6 @@ ion-title {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  color: $toolbar-text-color;
 }
 
 .toolbar [menu-toggle] {
diff --git a/ionic/themes/default.ios.scss b/ionic/themes/default.ios.scss
index ecab9adfaf..799dc2ff72 100644
--- a/ionic/themes/default.ios.scss
+++ b/ionic/themes/default.ios.scss
@@ -3,7 +3,7 @@
 // iOS Default Theme
 // ----------------------------------
 
-$colors: (
+$colors-ios: (
 
   primary:    #387ef5,
   secondary:  #32db64,
@@ -15,30 +15,29 @@ $colors: (
 
 
 $text-ios-color:                 $text-color !default;
+$link-ios-color:                 map-get($colors-ios, primary) !default;
 $background-ios-color:           $background-color !default;
 $subdued-text-ios-color:         $subdued-text-color !default;
 
-$list-ios-text-color:            $text-ios-color !default;
-$list-ios-background-color:      $background-color !default;
+$list-ios-text-color:            $list-text-color !default;
+$list-ios-background-color:      $list-background-color !default;
 $list-ios-border-color:          $list-border-color !default;
 
-$link-ios-color:                 map-get($colors, primary) !default;
-
 
 // iOS Toolbar
 // --------------------------------------------------
 
 $toolbar-ios-background-color:   $toolbar-background-color !default;
 $toolbar-ios-border-color:       $toolbar-border-color !default;
-$toolbar-ios-text-color:         $text-ios-color !default;
-$toolbar-ios-active-color:       $link-ios-color !default;
+$toolbar-ios-text-color:         $toolbar-text-color !default;
+$toolbar-ios-active-color:       $toolbar-active-color !default;
 $toolbar-ios-inactive-color:     $toolbar-inactive-color !default;
 
 
 // iOS Item
 // --------------------------------------------------
 
-$item-ios-border-color:               $list-border-color !default;
+$item-ios-border-color:               $list-ios-border-color !default;
 $item-ios-activated-background-color: #d9d9d9 !default;
 $item-ios-font-size:                  1.6rem !default;
 
diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss
index f183d8416d..c3ee7214e8 100644
--- a/ionic/themes/default.md.scss
+++ b/ionic/themes/default.md.scss
@@ -3,7 +3,7 @@
 // Material Design Default Theme
 // ----------------------------------
 
-$colors: (
+$colors-md: (
 
   primary:    #387ef5,
   secondary:  #32db64,
@@ -15,30 +15,29 @@ $colors: (
 
 
 $text-md-color:                 $text-color !default;
+$link-md-color:                 map-get($colors-md, primary) !default;
 $background-md-color:           $background-color !default;
 $subdued-text-md-color:         $subdued-text-color !default;
 
-$list-md-text-color:            $text-md-color !default;
-$list-md-background-color:      $background-color !default;
+$list-md-text-color:            $list-text-color !default;
+$list-md-background-color:      $list-background-color !default;
 $list-md-border-color:          $list-border-color !default;
 
-$link-md-color:                 map-get($colors, primary) !default;
 
-
-// iOS Toolbar
+// Material Design Toolbar
 // --------------------------------------------------
 
 $toolbar-md-background-color:   $toolbar-background-color !default;
 $toolbar-md-border-color:       $toolbar-border-color !default;
-$toolbar-md-text-color:         $text-md-color !default;
-$toolbar-md-active-color:       $link-md-color !default;
+$toolbar-md-text-color:         $toolbar-text-color !default;
+$toolbar-md-active-color:       $toolbar-active-color !default;
 $toolbar-md-inactive-color:     $toolbar-inactive-color !default;
 
 
 // Material Design Item
 // --------------------------------------------------
 
-$item-md-border-color:               $list-border-color !default;
+$item-md-border-color:               $list-md-border-color !default;
 $item-md-activated-background-color: #d9d9d9 !default;
 $item-md-font-size:                  1.6rem !default;
 
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
index 733be5a230..d4f3fd9f63 100644
--- a/ionic/themes/default.scss
+++ b/ionic/themes/default.scss
@@ -14,6 +14,7 @@ $colors: (
 
 
 $text-color:                 #000 !default;
+$link-color:                 map-get($colors, primary) !default;
 $background-color:           #fff !default;
 $subdued-text-color:         #666 !default;
 
@@ -21,8 +22,6 @@ $list-text-color:            $text-color !default;
 $list-background-color:      $background-color !default;
 $list-border-color:          #c8c7cc !default;
 
-$link-color:                 map-get($colors, primary) !default;
-
 $toolbar-background-color:   #f8f8f8 !default;
 $toolbar-border-color:       #b2b2b2 !default;
 $toolbar-text-color:         $text-color !default;
diff --git a/ionic/util/functions.scss b/ionic/util/functions.scss
index 95e2ea1550..e0ed83e369 100644
--- a/ionic/util/functions.scss
+++ b/ionic/util/functions.scss
@@ -28,6 +28,14 @@
 }
 
 
+// Copy Colors Map
+// --------------------------------------------------
+
+@function copy-colors($colors-map) {
+  @return map-merge($colors-map, ());
+}
+
+
 // String Replace Function
 // --------------------------------------------------