diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss
index 928c6ca3cb..f0d1a3025c 100644
--- a/ionic/components/action-sheet/modes/ios.scss
+++ b/ionic/components/action-sheet/modes/ios.scss
@@ -15,7 +15,7 @@ $action-sheet-ios-title-font-size:          1.2rem !default;
 
 $action-sheet-ios-button-text-color:        #007aff !default;
 $action-sheet-ios-button-font-size:         2rem !default;
-$action-sheet-ios-background-active:        #ebebeb !default;
+$action-sheet-ios-background-active-color:  #ebebeb !default;
 
 $action-sheet-ios-icon-font-size:           1.4em !default;
 
@@ -38,7 +38,7 @@ ion-action-sheet button {
   background: transparent;
 
   &.activated {
-    background: $action-sheet-ios-background-active;
+    background: $action-sheet-ios-background-active-color;
   }
 }
 
diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss
index edd628ee3f..1fff74f534 100644
--- a/ionic/components/action-sheet/modes/md.scss
+++ b/ionic/components/action-sheet/modes/md.scss
@@ -12,7 +12,7 @@ $action-sheet-md-title-padding:            1.9rem 1.6rem 1.7rem !default;
 
 $action-sheet-md-button-text-color:        #222 !default;
 $action-sheet-md-button-font-size:         1.6rem !default;
-$action-sheet-md-background-active:        #f1f1f1 !default;
+$action-sheet-md-background-active-color:  #f1f1f1 !default;
 
 $action-sheet-md-icon-font-size:           2.4rem !default;
 $action-sheet-md-icon-margin:              0 28px 0 0 !default;
@@ -58,7 +58,7 @@ ion-action-sheet button {
   min-height: $action-sheet-md-height;
 
   &.activated {
-    background: $action-sheet-md-background-active;
+    background: $action-sheet-md-background-active-color;
     border-radius: 0;
     box-shadow: none;
   }
diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index 747edc429c..a9493c14ee 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -2,14 +2,14 @@
 // iOS Radio
 // --------------------------------------------------
 
-$radio-ios-active-color:       color(primary) !default;
+$radio-ios-color-on:       color(primary) !default;
 
 
 ion-radio {
 
   &[aria-checked=true] .radio-icon:after {
     position: absolute;
-    border: 2px solid $radio-ios-active-color;
+    border: 2px solid $radio-ios-color-on;
     top: 3px;
     left: 7px;
     width: 4px;
@@ -21,7 +21,7 @@ ion-radio {
   }
 
   &[aria-checked=true] {
-    color: $radio-ios-active-color;
+    color: $radio-ios-color-on;
   }
 
 }
diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss
index 5f4aa9a337..489317c85a 100644
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -2,7 +2,7 @@
 // Material Design Radio
 // --------------------------------------------------
 
-$radio-md-active-color:           color(primary) !default;
+$radio-md-color-on:               color(primary) !default;
 
 $radio-md-icon-size:              16px !default;
 $radio-md-border-width:           2px !default;
@@ -26,7 +26,7 @@ ion-radio {
   }
 
   &[aria-checked=true] .radio-icon {
-    border-color: $radio-md-active-color;
+    border-color: $radio-md-color-on;
   }
 
   .radio-icon:after {
@@ -35,7 +35,7 @@ ion-radio {
     left: $radio-md-border-width;
     width: $radio-md-icon-size / 2;
     height: $radio-md-icon-size / 2;
-    background: $radio-md-active-color;
+    background: $radio-md-color-on;
     border-radius: 50%;
     content: '';
     transition: transform $radio-md-transition-duration $radio-md-transition-easing;
@@ -47,7 +47,7 @@ ion-radio {
   }
 
   &[aria-checked=true] {
-    color: $radio-md-active-color;
+    color: $radio-md-color-on;
   }
 
 }
diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index fc07e2ee45..81a7b61381 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -7,17 +7,17 @@ $switch-ios-height:                    32px !default;
 $switch-ios-border-width:              2px !default;
 $switch-ios-border-radius:             $switch-ios-height / 2 !default;
 
-$switch-ios-off-background-color:      $list-background-color !default;
-$switch-ios-off-border-color:          grayscale(lighten($list-border-color, 11%)) !default;
+$switch-ios-background-color-off:      $list-background-color !default;
+$switch-ios-border-color-off:          grayscale(lighten($list-border-color, 11%)) !default;
 
-$switch-ios-on-background-color:       color(primary) !default;
+$switch-ios-background-color-on:       color(primary) !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-height / 2 !default;
 $switch-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
 
-$switch-ios-handle-background-color:   $switch-ios-off-background-color !default;
+$switch-ios-handle-background-color:   $switch-ios-background-color-off !default;
 
 $switch-ios-transition-duration:       300ms !default;
 
@@ -41,14 +41,14 @@ ion-switch {
     border-radius: $switch-ios-border-radius;
     pointer-events: none;
 
-    background-color: $switch-ios-off-border-color;
+    background-color: $switch-ios-border-color-off;
     will-change: background-color;
     transition: background-color $switch-ios-transition-duration;
   }
 
   &[aria-checked=true] .switch-icon {
     // bg track, when checked
-    background-color: $switch-ios-on-background-color;
+    background-color: $switch-ios-background-color-on;
   }
 
 
@@ -65,7 +65,7 @@ ion-switch {
     bottom: $switch-ios-border-width;
 
     border-radius: $switch-ios-border-radius;
-    background-color: $switch-ios-off-background-color;
+    background-color: $switch-ios-background-color-off;
 
     will-change: transform;
     transform: scale3d(1, 1, 1);
diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss
index bf67c8c78c..31cd816937 100644
--- a/ionic/components/switch/modes/md.scss
+++ b/ionic/components/switch/modes/md.scss
@@ -6,13 +6,13 @@ $switch-md-active-color:                 color(primary) !default;
 
 $switch-md-track-width:                  36px !default;
 $switch-md-track-height:                 14px !default;
-$switch-md-track-off-background-color:   $item-md-border-color !default;
-$switch-md-track-on-background-color:    lighten($switch-md-active-color, 25%) !default;
+$switch-md-track-background-color-off:   $item-md-border-color !default;
+$switch-md-track-background-color-on:    lighten($switch-md-active-color, 25%) !default;
 
 $switch-md-handle-width:                 20px !default;
 $switch-md-handle-height:                20px !default;
-$switch-md-handle-off-background-color:  $background-color !default;
-$switch-md-handle-on-background-color:   $switch-md-active-color !default;
+$switch-md-handle-background-color-off:  $background-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;
 
 $switch-md-transition-duration:          300ms !default;
@@ -37,14 +37,14 @@ ion-switch {
     pointer-events: none;
     border-radius: $switch-md-track-height;
 
-    background-color: $switch-md-track-off-background-color;
+    background-color: $switch-md-track-background-color-off;
     will-change: background-color;
     transition: background-color $switch-md-transition-duration
   }
 
   &[aria-checked=true] .switch-icon {
     // bg track, when not checked
-    background-color: $switch-md-track-on-background-color;
+    background-color: $switch-md-track-background-color-on;
   }
 
 
@@ -64,7 +64,7 @@ ion-switch {
     border-radius: 50%;
     box-shadow: $switch-md-handle-box-shadow;
 
-    background-color: $switch-md-handle-off-background-color;
+    background-color: $switch-md-handle-background-color-off;
 
     will-change: transform, background-color;
     transition-property: transform, background-color;
@@ -73,7 +73,7 @@ ion-switch {
 
   &[aria-checked=true] .switch-icon:after {
     // knob, when not checked
-    background-color: $switch-md-handle-on-background-color;
+    background-color: $switch-md-handle-background-color-on;
     transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
   }