diff --git a/ionic/components/button/button-outline.scss b/ionic/components/button/button-outline.scss
index 3c2d36dd42..fc4aade773 100644
--- a/ionic/components/button/button-outline.scss
+++ b/ionic/components/button/button-outline.scss
@@ -47,7 +47,7 @@ button,
   button[#{$color}],
   [button][#{$color}] {
 
-    $fg-color: darken-or-lighten($value);
+    $fg-color: darken-or-lighten($value, 5%);
     @include button-outline($fg-color);
 
   }
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 35a6ec5db4..6f7af095a3 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -14,7 +14,7 @@ $button-round-padding:            0 2.6rem !default;
 
 $button-color:                    color(primary) !default;
 $button-color-activated:          darken-or-lighten($button-color) !default;
-$button-text-color:               inverse(primary) !default;
+$button-text-color:               inverse($button-color) !default;
 $button-hover-opacity:            0.88 !default;
 
 
@@ -112,7 +112,6 @@ button,
     padding: $button-round-padding;
   }
 
-  &.disabled,
   &[disabled] {
     opacity: 0.4;
     cursor: default !important;
@@ -121,17 +120,15 @@ button,
 
 }
 
+a[button] {
+  text-decoration: none;
+}
 
 .padding > button[block]:first-child,
 .padding > [button][block]:first-child {
   margin-top: 0;
 }
 
-a[button] {
-  color: inherit;
-  text-decoration: none;
-}
-
 
 // Default Button Color Mixin
 // --------------------------------------------------
@@ -156,7 +153,7 @@ a[button] {
 
     $bg-color: $value;
     $bg-color-activated: darken-or-lighten($bg-color);
-    $text-color: inverse($color);
+    $text-color: inverse($bg-color);
     @include button-default($bg-color, $bg-color-activated, $text-color);
 
   }
diff --git a/ionic/components/button/extensions/material.scss b/ionic/components/button/extensions/material.scss
index af7bb0ae4e..4587c39598 100644
--- a/ionic/components/button/extensions/material.scss
+++ b/ionic/components/button/extensions/material.scss
@@ -12,7 +12,6 @@ $button-md-border-radius:            3px !default;
 
 [mode="md"] button,
 [mode="md"] [button] {
-  border: 0;
   border-radius: $button-md-border-radius;
 
   min-height: $button-md-min-height;
@@ -32,18 +31,6 @@ $button-md-border-radius:            3px !default;
     box-shadow: $button-md-box-shadow-active;
   }
 
-  &[icon] {
-    //font-size: $button-icon-size;
-  }
-
-  &[large][icon] {
-    //font-size: $button-icon-large-size;
-  }
-
-  &[small][icon] {
-    //font-size: $button-icon-small-size;
-  }
-
   &[full] {
     border-radius: 0;
   }
@@ -51,40 +38,63 @@ $button-md-border-radius:            3px !default;
   &[outline] {
     box-shadow: none;
 
-    .md-ripple {
+    /*.md-ripple {
       &.is-visible {
         opacity: 0.2;
       }
-    }
+    }*/
+  }
+
+  &[round] {
+    border-radius: $button-round-border-radius;
+    padding: $button-round-padding;
+  }
+
+  &[large] {
+    padding: 0 $button-large-padding;
+    min-width: ($button-large-padding * 4);
+    min-height: $button-large-height;
+    font-size: $button-large-font-size;
+  }
+
+  &[small] {
+    padding: 0 $button-small-padding;
+    min-width: ($button-small-padding * 3);
+    min-height: $button-small-height;
+    font-size: $button-small-font-size;
   }
 
   &[fab] {
     border-radius: 50%;
   }
 
-  @each $color, $value in $colors {
+
+  // Generate iOS Checkbox Auxiliary Colors
+  // --------------------------------------------------
+
+  @each $color, $value in  {
 
     &[#{$color}] {
 
       @if lightness(get-color($color, base)) < 80 {
         .md-ripple {
-          background-color: white;
+          //background-color: white;
         }
       }
 
       &.activated {
         opacity: 1;
-        background-color: get-color($color, base);
+        //background-color: get-color($color, base);
       }
 
       &[outline] {
         @if lightness(get-color($color, base)) >= 80 {
           .md-ripple {
-            background-color: black;
+            //background-color: black;
           }
         } @else {
           .md-ripple {
-            background-color: get-color($color, base);
+            //background-color: get-color($color, base);
           }
         }
 
@@ -97,8 +107,8 @@ $button-md-border-radius:            3px !default;
           }
 
           opacity: 1;
-          background: transparent;
-          color: $fg-color;
+          //background: transparent;
+          //color: $fg-color;
         }
       }
 
@@ -107,31 +117,12 @@ $button-md-border-radius:            3px !default;
 
         &:hover,
         &.hover {
-          background-color: rgba(158, 158, 158, 0.1);
+          //background-color: rgba(158, 158, 158, 0.1);
         }
         &.activated {
-          background-color: rgba(158, 158, 158, 0.2);
+          //background-color: rgba(158, 158, 158, 0.2);
         }
       }
-
-      &[round] {
-        border-radius: $button-round-border-radius;
-        padding: $button-round-padding;
-      }
-
-      &[large] {
-        padding: 0 $button-large-padding;
-        min-width: ($button-large-padding * 4);
-        min-height: $button-large-height;
-        font-size: $button-large-font-size;
-      }
-
-      &[small] {
-        padding: 0 $button-small-padding;
-        min-width: ($button-small-padding * 3);
-        min-height: $button-small-height;
-        font-size: $button-small-font-size;
-      }
     }
   }
 }
diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss
index 00bc71b453..8185a47c70 100644
--- a/ionic/components/checkbox/checkbox.scss
+++ b/ionic/components/checkbox/checkbox.scss
@@ -11,5 +11,5 @@
 .checkbox[aria-disabled=true] {
   pointer-events: none;
   opacity: 0.5;
-  color: gray;
+  color: $subdued-text-color;
 }
diff --git a/ionic/components/checkbox/extensions/ios.scss b/ionic/components/checkbox/extensions/ios.scss
index 2415604617..2bcc45004f 100644
--- a/ionic/components/checkbox/extensions/ios.scss
+++ b/ionic/components/checkbox/extensions/ios.scss
@@ -3,8 +3,8 @@
 // --------------------------------------------------
 
 $checkbox-ios-icon-size:             21px !default;
-$checkbox-ios-bg-color-off:          $background-color !default;
-$checkbox-ios-border-color-off:      $border-color !default;
+$checkbox-ios-bg-color-off:          $list-background-color !default;
+$checkbox-ios-border-color-off:      $list-border-color !default;
 $checkbox-ios-bg-color-on:           color(primary) !default;
 $checkbox-ios-border-color-on:       color(primary) !default;
 $checkbox-ios-checkmark-color-on:    $background-color !default;
@@ -45,9 +45,9 @@ $checkbox-ios-checkmark-color-on:    $background-color !default;
 // iOS Checkbox Color Mixin
 // --------------------------------------------------
 
-@mixin checkbox-theme-ios($color, $bg-on) {
+@mixin checkbox-theme-ios($color-name, $bg-on) {
 
-  .checkbox[mode=ios][#{$color}] {
+  .checkbox[mode=ios][#{$color-name}] {
 
     &[aria-checked=true] .checkbox-icon {
       background-color: $bg-on;
@@ -58,11 +58,12 @@ $checkbox-ios-checkmark-color-on:    $background-color !default;
 
 }
 
+
 // Generate iOS Checkbox Auxiliary Colors
 // --------------------------------------------------
 
-@each $color, $value in auxiliary-colors() {
+@each $color-name, $value in auxiliary-colors() {
 
-  @include checkbox-theme-ios($color, $value);
+  @include checkbox-theme-ios($color-name, $value);
 
 }
diff --git a/ionic/components/checkbox/extensions/material.scss b/ionic/components/checkbox/extensions/material.scss
index 3c559cafef..9d5547943e 100644
--- a/ionic/components/checkbox/extensions/material.scss
+++ b/ionic/components/checkbox/extensions/material.scss
@@ -1,38 +1,69 @@
 
-// Material Design Checkbox
+// Material Design Checkbox Structure
 // --------------------------------------------------
 
-$checkbox-md-icon-size:              24px !default;
-$checkbox-md-background-color:       get-color(primary, base) !default;
-$checkbox-md-foreground-color:       get-color(primary, inverse) !default;
+$checkbox-md-icon-size:             21px !default;
+$checkbox-md-bg-color-off:          $list-background-color !default;
+$checkbox-md-border-color-off:      $list-border-color !default;
+$checkbox-md-bg-color-on:           color(primary) !default;
+$checkbox-md-border-color-on:       color(primary) !default;
+$checkbox-md-checkmark-color-on:    $background-color !default;
 
 
-.checkbox[mode="md"] {
+.checkbox[mode=md] {
 
   .checkbox-icon {
     position: relative;
     width: $checkbox-md-icon-size;
     height: $checkbox-md-icon-size;
-    border-radius: $checkbox-md-icon-size / 2;
-    background-color: $checkbox-md-foreground-color;
-    border: 1px solid $checkbox-md-background-color;
+    border-radius: 50%;
+    border: 1px solid $checkbox-md-border-color-off;
+    background-color: $checkbox-md-bg-color-off;
   }
 
   &[aria-checked=true] .checkbox-icon {
-    background-color: $checkbox-md-background-color;
+    background-color: $checkbox-md-bg-color-on;
+    border-color: $checkbox-md-border-color-on;
+  }
 
-    &::after {
-      position: absolute;
-      border: 1px solid $checkbox-md-foreground-color;
-      top: 3px;
-      left: 8px;
-      width: 5px;
-      height: 12px;
-      border-left: none;
-      border-top: none;
-      content: '';
-      transform: rotate(45deg);
-    }
+  &[aria-checked=true] .checkbox-icon::after {
+    position: absolute;
+    border: 1px solid $checkbox-md-checkmark-color-on;
+    top: 3px;
+    left: 7px;
+    width: 4px;
+    height: 9px;
+    border-left: none;
+    border-top: none;
+    content: '';
+    transform: rotate(45deg);
   }
 
 }
+
+
+// Material Design Checkbox Color Mixin
+// --------------------------------------------------
+
+@mixin checkbox-theme-md($color-name, $bg-on) {
+
+  .checkbox[mode=md][#{$color-name}] {
+
+    &[aria-checked=true] .checkbox-icon {
+      background-color: $bg-on;
+      border-color: $bg-on;
+    }
+
+  }
+
+}
+
+
+// Generate Material Design Checkbox Auxiliary Colors
+// --------------------------------------------------
+
+@each $color-name, $value in auxiliary-colors() {
+
+  @include checkbox-theme-md($color-name, $value);
+
+}
diff --git a/ionic/components/item/extensions/ios.scss b/ionic/components/item/extensions/ios.scss
index 04bc251e04..4f1ccce9d3 100644
--- a/ionic/components/item/extensions/ios.scss
+++ b/ionic/components/item/extensions/ios.scss
@@ -2,7 +2,7 @@
 // iOS Item
 // --------------------------------------------------
 
-$item-ios-border-color:           #c8c7cc !default;
+$item-ios-border-color:           $list-border-color !default;
 $item-ios-font-size:              1.6rem !default;
 
 $item-ios-padding-top:            13px !default;
@@ -15,7 +15,8 @@ $item-ios-padding-media-bottom:   11px !default;
 
 $item-ios-avatar-size:            3.6rem !default;
 $item-ios-thumbnail-size:         5.6rem !default;
-$item-ios-note-color:             #999 !default;
+$item-ios-note-color:             $item-ios-border-color !default;
+$item-ios-forward-icon-color:     $item-ios-border-color !default;
 
 
 .list[mode="ios"] {
@@ -73,7 +74,7 @@ $item-ios-note-color:             #999 !default;
 
   icon[forward] {
     font-size: 2rem;
-    color: #cfcfcf;
+    color: $item-ios-forward-icon-color;
   }
 
   button {
@@ -115,46 +116,3 @@ $item-ios-note-color:             #999 !default;
 
 }
 
-/*
-.list[mode="ios"] {
-  margin-top: -1px;
-
-  .item {
-    background: $item-ios-background-color;
-    min-height: $item-ios-min-height;
-    padding-left: $item-ios-padding-left;
-
-    .item-media + .item-content {
-      margin-left: $item-ios-padding-left;
-    }
-
-    .item-content {
-      min-height: $item-ios-min-height;
-      padding: 0;
-    }
-
-    .item:last-of-type .item-content:after {
-      background: none;
-    }
-
-    .item-accessory {
-      color: $item-ios-accessory-color;
-    }
-
-    .item-subtitle {
-      width: 100%;
-      color: #808080;
-    }
-    .item-full {
-      // No left ios-style padding
-      padding-left: 0;
-
-      button {
-        width: 100%;
-        font-size: 1.3em;
-      }
-    }
-  }
-
-}
-*/
diff --git a/ionic/components/item/extensions/material.scss b/ionic/components/item/extensions/material.scss
index d5f7689e61..d53c3cb676 100644
--- a/ionic/components/item/extensions/material.scss
+++ b/ionic/components/item/extensions/material.scss
@@ -2,7 +2,7 @@
 // Material Design Item
 // --------------------------------------------------
 
-$item-md-border-color:           #c8c7cc !default;
+$item-md-border-color:           $list-border-color !default;
 $item-md-font-size:              1.6rem !default;
 
 $item-md-padding-top:            13px !default;
@@ -15,7 +15,8 @@ $item-md-padding-media-bottom:   11px !default;
 
 $item-md-avatar-size:            4rem !default;
 $item-md-thumbnail-size:         8rem !default;
-$item-md-note-color:             #999 !default;
+$item-md-note-color:             $item-md-border-color !default;
+$item-md-forward-icon-color:     $item-md-border-color !default;
 
 
 .list[mode="md"] {
@@ -73,7 +74,7 @@ $item-md-note-color:             #999 !default;
 
   icon[forward] {
     font-size: 2rem;
-    color: #cfcfcf;
+    color: $item-md-forward-icon-color;
   }
 
   button {
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index ef9aee1898..b0d6d834a9 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -15,6 +15,9 @@
   border: 0;
   min-height: 4.4rem;
   text-align: initial;
+
+  background-color: $list-background-color;
+  color: $list-text-color;
 }
 
 a.item,
diff --git a/ionic/components/popup/extensions/ios.scss b/ionic/components/popup/extensions/ios.scss
index 07e0a41603..3430388022 100644
--- a/ionic/components/popup/extensions/ios.scss
+++ b/ionic/components/popup/extensions/ios.scss
@@ -2,8 +2,9 @@
 // iOS Popups
 // --------------------------------------------------
 
-$popup-ios-border-radius:       13px !default;
-$popup-ios-bg-color:            #f8f8f8 !default;
+$popup-ios-border-radius:         13px !default;
+$popup-ios-bg-color:              #f8f8f8 !default;
+$popup-ios-button-text-color:     color(primary) !default;
 
 
 .popup[mode="ios"] {
@@ -25,9 +26,9 @@ $popup-ios-bg-color:            #f8f8f8 !default;
     padding: 0;
     min-height: 0;
 
-    .button {
-      min-height: 42px;
-      color: get-color('primary', base);
+    button {
+      background-color: transparent;
+      color: $popup-ios-button-text-color;
       font-size: 14px;
 
       &:last-child {
diff --git a/ionic/components/popup/popup.scss b/ionic/components/popup/popup.scss
index 4e721d9e22..64c1c747c4 100644
--- a/ionic/components/popup/popup.scss
+++ b/ionic/components/popup/popup.scss
@@ -46,7 +46,6 @@ ion-popup {
 
 .popup-head {
   padding: 15px 10px;
-  border-bottom: 1px solid #eee;
   text-align: center;
 }
 
@@ -74,7 +73,7 @@ h3.popup-title {
   padding: 10px;
   min-height: $popup-button-min-height + 20;
 
-  .button {
+  button {
     flex: 1;
     display: block;
     min-height: $popup-button-min-height;
diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts
index 270c54c9c6..a7fe4bdf81 100644
--- a/ionic/components/popup/popup.ts
+++ b/ionic/components/popup/popup.ts
@@ -27,7 +27,7 @@ export class Popup extends Overlay {
     if (typeof context === 'string') {
       context = {
         title: context
-      }
+      };
     }
     let button = {
       text: 'OK',
@@ -139,7 +139,7 @@ const OVERLAY_TYPE = 'popup';
       '<input type="text" *ng-if="showPrompt" placeholder="{{promptPlaceholder}}">' +
     '</div>' +
     '<div class="popup-buttons" *ng-if="buttons.length">' +
-      '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" class="button" [class]="button.type || \'button-default\'" [inner-html]="button.text"></button>' +
+      '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [class]="button.type || \'button-default\'" [inner-html]="button.text"></button>' +
     '</div>' +
   '</popup-wrapper>',
   directives: [formDirectives, CSSClass, NgIf, NgFor]
diff --git a/ionic/components/radio/extensions/ios.scss b/ionic/components/radio/extensions/ios.scss
index 85f9b69b67..b479884ec1 100644
--- a/ionic/components/radio/extensions/ios.scss
+++ b/ionic/components/radio/extensions/ios.scss
@@ -2,7 +2,7 @@
 // iOS Radio
 // --------------------------------------------------
 
-$radio-ios-foreground-color:       get-color(primary, base) !default;
+$radio-ios-active-color:       color(primary) !default;
 
 
 .radio[mode="ios"] {
@@ -13,29 +13,51 @@ $radio-ios-foreground-color:       get-color(primary, base) !default;
     height: 21px;
   }
 
-  &[aria-checked=true] .radio-icon {
-    border-color: $radio-ios-foreground-color;
-
-    &::after {
-      position: absolute;
-      border: 2px solid $radio-ios-foreground-color;
-      top: 3px;
-      left: 7px;
-      width: 4px;
-      height: 10px;
-      border-left: none;
-      border-top: none;
-      content: '';
-      transform: rotate(45deg);
-    }
+  &[aria-checked=true] .radio-icon::after {
+    position: absolute;
+    border: 2px solid $radio-ios-active-color;
+    top: 3px;
+    left: 7px;
+    width: 4px;
+    height: 10px;
+    border-left: none;
+    border-top: none;
+    content: '';
+    transform: rotate(45deg);
   }
 
   &[aria-checked=true] {
-    color: $radio-ios-foreground-color;
-  }
-
-  .input-label {
-    color: inherit;
+    color: $radio-ios-active-color;
   }
 
 }
+
+
+// iOS Radio Color Mixin
+// --------------------------------------------------
+
+@mixin radio-theme-ios($color-name, $color-value) {
+
+  .radio[mode=ios][#{$color-name}] {
+
+    &[aria-checked=true] .radio-icon::after {
+      border-color: $color-value;
+    }
+
+    &[aria-checked=true] {
+      color: $color-value;
+    }
+
+  }
+
+}
+
+
+// Generate iOS Radio Auxiliary Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in auxiliary-colors() {
+
+  @include radio-theme-ios($color-name, $color-value);
+
+}
diff --git a/ionic/components/radio/radio.scss b/ionic/components/radio/radio.scss
index 07fd5f1456..f319a42b3a 100644
--- a/ionic/components/radio/radio.scss
+++ b/ionic/components/radio/radio.scss
@@ -2,12 +2,14 @@
 // Radio
 // --------------------------------------------------
 
+
 .radio {
   cursor: pointer;
   @include user-select-none();
 }
 
 .radio[aria-disabled=true] {
+  pointer-events: none;
   opacity: 0.5;
-  color: gray;
+  color: $subdued-text-color;
 }
diff --git a/ionic/components/radio/test/basic/main.html b/ionic/components/radio/test/basic/main.html
index d09a808907..91ff5830fc 100644
--- a/ionic/components/radio/test/basic/main.html
+++ b/ionic/components/radio/test/basic/main.html
@@ -20,8 +20,12 @@
         Banana
       </ion-radio>
 
-      <ion-radio value="cherry">
-        Cherry
+      <ion-radio value="cherry" secondary>
+        Cherry (secondary color)
+      </ion-radio>
+
+      <ion-radio value="disabled" disabled="true">
+        Disabled
       </ion-radio>
 
     </ion-radio-group>
diff --git a/ionic/components/switch/extensions/ios.scss b/ionic/components/switch/extensions/ios.scss
index 4aa9c67a1f..c42ba32ecf 100644
--- a/ionic/components/switch/extensions/ios.scss
+++ b/ionic/components/switch/extensions/ios.scss
@@ -2,27 +2,27 @@
 // iOS Switch
 // --------------------------------------------------
 
-$switch-ios-width:                    51px !default;
-$switch-ios-height:                   32px !default;
-$switch-ios-border-width:             2px !default;
-$switch-ios-border-radius:            30px !default;
+$switch-ios-width:                     51px !default;
+$switch-ios-height:                    32px !default;
+$switch-ios-border-width:              2px !default;
+$switch-ios-border-radius:             30px !default;
 
-$switch-ios-off-bg-color:             #fff !default;
-$switch-ios-off-border-color:         #e6e6e6 !default;
+$switch-ios-off-bg-color:              $list-background-color !default;
+$switch-ios-off-border-color:          $list-border-color !default;
 
-$switch-ios-on-bg-color:              get-color(primary, base) !default;
-$switch-ios-on-border-color:          $switch-ios-on-bg-color !default;
+$switch-ios-on-bg-color:               color(primary) !default;
+$switch-ios-on-border-color:           $switch-ios-on-bg-color !default;
 
-$switch-ios-handle-width:             $switch-ios-height - ($switch-ios-border-width * 2) !default;
-$switch-ios-handle-height:            $switch-ios-handle-width !default;
-$switch-ios-handle-radius:            $switch-ios-handle-width !default;
-$switch-ios-handle-dragging-bg-color: darken(#fff, 5%) !default;
-$switch-ios-handle-box-shadow:        0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.15) !default;
+$switch-ios-handle-width:              $switch-ios-height - ($switch-ios-border-width * 2) !default;
+$switch-ios-handle-height:             $switch-ios-handle-width !default;
+$switch-ios-handle-radius:             $switch-ios-handle-width !default;
+$switch-ios-handle-dragging-bg-color:  darken($switch-ios-off-bg-color, 5%) !default;
+$switch-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.15) !default;
 
-$switch-ios-handle-off-bg-color:      #fff !default;
-$switch-ios-handle-on-bg-color:       #fff !default;
+$switch-ios-handle-off-bg-color:       $switch-ios-off-bg-color !default;
+$switch-ios-handle-on-bg-color:        $switch-ios-off-bg-color !default;
 
-$switch-ios-transition-duration:      200ms !default;
+$switch-ios-transition-duration:       200ms !default;
 
 
 .switch[mode="ios"] {
@@ -55,6 +55,19 @@ $switch-ios-transition-duration:      200ms !default;
     transition-delay: 100ms;
   }
 
+  .switch-track::before {
+    position: absolute;
+    top: $switch-ios-border-width;
+    left: $switch-ios-border-width;
+    right: 50%;
+    bottom: $switch-ios-border-width;
+    content: '';
+    border-radius: $switch-ios-border-radius;
+    background-color: $switch-ios-off-border-color;
+    will-change: right;
+    transition: right $switch-ios-transition-duration;
+  }
+
   .switch-handle {
     position: absolute;
     top: $switch-ios-border-width;
@@ -88,6 +101,10 @@ $switch-ios-transition-duration:      200ms !default;
 
   &[aria-checked=true] .switch-track {
     opacity: 0;
+
+    &::before {
+      right: 15%;
+    }
   }
 
   &[aria-checked=true] .switch-handle {
@@ -100,3 +117,29 @@ $switch-ios-transition-duration:      200ms !default;
   }
 
 }
+
+
+// iOS Switch Color Mixin
+// --------------------------------------------------
+
+@mixin switch-theme-ios($color-name, $bg-on) {
+
+  .switch[mode=ios][#{$color-name}] {
+
+    &[aria-checked=true] .switch-icon {
+      background-color: $bg-on;
+    }
+
+  }
+
+}
+
+
+// Generate iOS Switch Auxiliary Colors
+// --------------------------------------------------
+
+@each $color-name, $value in auxiliary-colors() {
+
+  @include switch-theme-ios($color-name, $value);
+
+}
diff --git a/ionic/components/switch/switch.scss b/ionic/components/switch/switch.scss
index 5d83cd53d0..b966d02923 100644
--- a/ionic/components/switch/switch.scss
+++ b/ionic/components/switch/switch.scss
@@ -15,5 +15,5 @@
 .switch[aria-disabled=true] {
   pointer-events: none;
   opacity: 0.5;
-  color: gray;
+  color: $subdued-text-color;
 }
diff --git a/ionic/components/switch/test/basic/main.html b/ionic/components/switch/test/basic/main.html
index 4dc652accb..44d5e34076 100644
--- a/ionic/components/switch/test/basic/main.html
+++ b/ionic/components/switch/test/basic/main.html
@@ -24,6 +24,10 @@
         Grape, value=grape, init checked, disabled
       </ion-switch>
 
+      <ion-switch secondary checked="true">
+        Secondary color
+      </ion-switch>
+
     </ion-list>
 
   </form>
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index 39a9ca6040..66b97baf06 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -134,6 +134,5 @@ button.tab-button {
 }
 
 button.tab-button[aria-selected="true"] {
-  // Default color is primary
-  color: get-color(primary, base);
+  color: $toolbar-active-color;
 }
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index e5192b24c5..943f59d501 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -28,8 +28,16 @@ $toolbar-order: (
 
   button,
   [button] {
+    background-color: transparent;
     color: $toolbar-active-color;
     box-shadow: none;
+
+    &.activated,
+    &:hover,
+    &.hover {
+      color: $toolbar-active-color;
+      background-color: transparent;
+    }
   }
 }
 
@@ -84,12 +92,12 @@ ion-title {
 @each $color, $value in $colors {
 
   .toolbar[#{$color}] {
-    background-color: get-color($color, base);
+    background-color: $value;
 
     ion-title,
     button,
     [button] {
-      color: get-color($color, inverse);
+      color: inverse($value);
     }
   }
 
diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss
index 17cb016c95..2f7d14f2dd 100644
--- a/ionic/themes/dark.scss
+++ b/ionic/themes/dark.scss
@@ -15,7 +15,10 @@ $colors: (
 
 $text-color:                 #fff !default;
 $background-color:           #222 !default;
-$border-color:               #666 !default;
+
+$list-text-color:            $text-color !default;
+$list-background-color:      $background-color !default;
+$list-border-color:               #666 !default;
 
 $link-color:                 map-get($colors, primary) !default;
 $link-hover-color:           lighten($link-color, 15%) !default;
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
index 2793edc2ed..b9d659436a 100644
--- a/ionic/themes/default.scss
+++ b/ionic/themes/default.scss
@@ -15,7 +15,11 @@ $colors: (
 
 $text-color:                 #000 !default;
 $background-color:           #fff !default;
-$border-color:               #ddd !default;
+$subdued-text-color:         #666 !default;
+
+$list-text-color:            $text-color !default;
+$list-background-color:      $background-color !default;
+$list-border-color:          #c8c7cc !default;
 
 $link-color:                 map-get($colors, primary) !default;
 $link-hover-color:           darken($link-color, 15%) !default;
diff --git a/ionic/util/mixins.scss b/ionic/util/mixins.scss
index 8f6df585dc..e69a6660d4 100644
--- a/ionic/util/mixins.scss
+++ b/ionic/util/mixins.scss
@@ -1,13 +1,13 @@
 
-// Color Mixins/Functions
+// Color Functions
 // --------------------------------------------------
 
 @function get-color($color, $tone: base) {
   @return red;
 }
 
-@function inverse($color-name) {
-  @if (lightness( color($color-name) ) > 70) {
+@function inverse($color-value) {
+  @if (lightness($color-value) > 70) {
     @return #000;
   }
   @else {
@@ -15,23 +15,23 @@
   }
 }
 
-@function darken-or-lighten($color, $amount:12%) {
+@function darken-or-lighten($color-value, $amount:8%) {
   // lightness is a percent value, 0% darkest, 100% lightest
-  $lightness-percent: lightness($color);
+  $lightness-percent: lightness($color-value);
 
 
   @if ($lightness-percent > 80) {
     // really light foreground color, so really darken it up
-    @return darken($color, ($amount * 2));
+    @return darken($color-value, ($amount * 2));
   }
 
   @if ($lightness-percent < 35) {
     // dark foreground color, so light it up
-    @return lighten($color, $amount);
+    @return lighten($color-value, $amount);
   }
 
   // default to darken
-  @return darken($color, $amount);
+  @return darken($color-value, $amount);
 }
 
 @function color($color-name) {
@@ -39,6 +39,7 @@
 }
 
 @function auxiliary-colors() {
+  // get a map of all the colors, except "primary"
   @return map-remove($colors, primary);
 }