diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss
index 14c5a70e74..8d97ef49ef 100644
--- a/src/components/action-sheet/action-sheet.ios.scss
+++ b/src/components/action-sheet/action-sheet.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./action-sheet";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Action Sheet
 // --------------------------------------------------
@@ -22,7 +21,7 @@ $action-sheet-ios-button-min-height:                    5.6rem !default;
 $action-sheet-ios-button-padding:                       18px !default;
 $action-sheet-ios-button-text-color:                    #007aff !default;
 $action-sheet-ios-button-font-size:                     2rem !default;
-$action-sheet-ios-button-border-width:                  1px !default;
+$action-sheet-ios-button-border-width:                  $hairlines-width !default;
 $action-sheet-ios-button-border-style:                  solid !default;
 $action-sheet-ios-button-border-color:                  #d1d3d6 !default;
 $action-sheet-ios-button-background:                    transparent !default;
@@ -33,28 +32,28 @@ $action-sheet-ios-button-cancel-background:             #fff !default;
 $action-sheet-ios-button-cancel-font-weight:            600 !default;
 
 
-ion-action-sheet {
+.action-sheet-ios {
   text-align: $action-sheet-ios-text-align;
 }
 
-.action-sheet-container {
+.action-sheet-ios .action-sheet-container {
   padding: $action-sheet-ios-padding;
 }
 
-.action-sheet-group {
+.action-sheet-ios .action-sheet-group {
   overflow: hidden;
 
   margin-bottom: $action-sheet-ios-group-margin-bottom - 2;
 
   border-radius: $action-sheet-ios-border-radius;
   background: $action-sheet-ios-background;
-
-  &:last-child {
-    margin-bottom: $action-sheet-ios-group-margin-bottom;
-  }
 }
 
-.action-sheet-title {
+.action-sheet-ios .action-sheet-group:last-child {
+  margin-bottom: $action-sheet-ios-group-margin-bottom;
+}
+
+.action-sheet-ios .action-sheet-title {
   padding: $action-sheet-ios-title-padding;
 
   border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
@@ -65,7 +64,7 @@ ion-action-sheet {
   color: $action-sheet-ios-title-color;
 }
 
-.action-sheet-button {
+.action-sheet-ios .action-sheet-button {
   margin: 0;
   padding: $action-sheet-ios-button-padding;
 
@@ -75,37 +74,30 @@ ion-action-sheet {
   font-size: $action-sheet-ios-button-font-size;
   color: $action-sheet-ios-button-text-color;
   background: $action-sheet-ios-button-background;
-
-  &:last-child {
-    border-bottom: 0;
-  }
-
-  &.activated {
-    margin-top: -$action-sheet-ios-button-border-width;
-
-    border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
-    border-bottom-color: $action-sheet-ios-button-background-activated;
-    background: $action-sheet-ios-button-background-activated;
-  }
 }
 
-.action-sheet-selected {
+.action-sheet-ios .action-sheet-button:last-child {
+  border-bottom: 0;
+}
+
+.action-sheet-ios .action-sheet-button.activated {
+  margin-top: -$action-sheet-ios-button-border-width;
+
+  border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
+  border-bottom-color: $action-sheet-ios-button-background-activated;
+  background: $action-sheet-ios-button-background-activated;
+}
+
+.action-sheet-ios .action-sheet-selected {
   font-weight: bold;
   background: #fff;
 }
 
-.action-sheet-destructive {
+.action-sheet-ios .action-sheet-destructive {
   color: $action-sheet-ios-button-destructive-text-color;
 }
 
-.action-sheet-cancel {
+.action-sheet-ios .action-sheet-cancel {
   font-weight: $action-sheet-ios-button-cancel-font-weight;
   background: $action-sheet-ios-button-cancel-background;
 }
-
-&.hairlines {
-  .action-sheet-title,
-  .action-sheet-button {
-    border-bottom-width: $hairlines-width;
-  }
-}
diff --git a/src/components/action-sheet/action-sheet.md.scss b/src/components/action-sheet/action-sheet.md.scss
index 908dcdfdce..4543b2e76d 100644
--- a/src/components/action-sheet/action-sheet.md.scss
+++ b/src/components/action-sheet/action-sheet.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./action-sheet";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Action Sheet
 // --------------------------------------------------
@@ -26,7 +25,7 @@ $action-sheet-md-icon-vertical-align:                   middle !default;
 $action-sheet-md-icon-margin:                           0 28px 0 0 !default;
 
 
-.action-sheet-title {
+.action-sheet-md .action-sheet-title {
   padding: $action-sheet-md-title-padding;
 
   font-size: $action-sheet-md-title-font-size;
@@ -34,7 +33,7 @@ $action-sheet-md-icon-margin:                           0 28px 0 0 !default;
   color: $action-sheet-md-title-color;
 }
 
-.action-sheet-button {
+.action-sheet-md .action-sheet-button {
   position: relative;
   overflow: hidden;
 
@@ -46,13 +45,13 @@ $action-sheet-md-icon-margin:                           0 28px 0 0 !default;
   text-align: $action-sheet-md-text-align;
   color: $action-sheet-md-button-text-color;
   background: $action-sheet-md-button-background;
-
-  &.activated {
-    background: $action-sheet-md-button-background-activated;
-  }
 }
 
-.action-sheet-icon {
+.action-sheet-md .action-sheet-button.activated {
+  background: $action-sheet-md-button-background-activated;
+}
+
+.action-sheet-md .action-sheet-icon {
   margin: $action-sheet-md-icon-margin;
 
   min-width: $action-sheet-md-icon-min-width;
@@ -62,20 +61,20 @@ $action-sheet-md-icon-margin:                           0 28px 0 0 !default;
   vertical-align: $action-sheet-md-icon-vertical-align;
 }
 
-.action-sheet-group {
+.action-sheet-md .action-sheet-group {
   overflow: hidden;
 
   background: $action-sheet-md-background;
-
-  &:last-child .action-sheet-button {
-    margin-bottom: $action-sheet-md-group-margin-bottom;
-  }
-
-  .button-inner {
-    justify-content: flex-start;
-  }
 }
 
-.action-sheet-selected {
+.action-sheet-md .action-sheet-group:last-child .action-sheet-button {
+  margin-bottom: $action-sheet-md-group-margin-bottom;
+}
+
+.action-sheet-md .action-sheet-group .button-inner {
+  justify-content: flex-start;
+}
+
+.action-sheet-md .action-sheet-selected {
   font-weight: bold;
 }
diff --git a/src/components/action-sheet/action-sheet.wp.scss b/src/components/action-sheet/action-sheet.wp.scss
index a92e44858d..2ba303d3f7 100644
--- a/src/components/action-sheet/action-sheet.wp.scss
+++ b/src/components/action-sheet/action-sheet.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./action-sheet";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Action Sheet
 // --------------------------------------------------
@@ -30,11 +29,11 @@ $action-sheet-wp-icon-font-size:                  2.4rem !default;
 $action-sheet-wp-icon-margin:                     0 16px 0 0 !default;
 
 
-.action-sheet-wrapper {
+.action-sheet-wp .action-sheet-wrapper {
   box-shadow: $action-sheet-wp-box-shadow;
 }
 
-.action-sheet-title {
+.action-sheet-wp .action-sheet-title {
   padding: $action-sheet-wp-title-padding;
 
   font-size: $action-sheet-wp-title-font-size;
@@ -42,7 +41,7 @@ $action-sheet-wp-icon-margin:                     0 16px 0 0 !default;
   color: $action-sheet-wp-title-color;
 }
 
-.action-sheet-button {
+.action-sheet-wp .action-sheet-button {
   padding: $action-sheet-wp-button-padding;
 
   min-height: $action-sheet-wp-button-height;
@@ -51,13 +50,13 @@ $action-sheet-wp-icon-margin:                     0 16px 0 0 !default;
   text-align: $action-sheet-wp-button-text-align;
   color: $action-sheet-wp-button-text-color;
   background: $action-sheet-wp-button-background;
-
-  &.activated {
-    background: $action-sheet-wp-button-background-activated;
-  }
 }
 
-.action-sheet-icon {
+.action-sheet-wp .action-sheet-button.activated {
+  background: $action-sheet-wp-button-background-activated;
+}
+
+.action-sheet-wp .action-sheet-icon {
   margin: $action-sheet-wp-icon-margin;
 
   min-width: $action-sheet-wp-icon-min-width;
@@ -67,22 +66,22 @@ $action-sheet-wp-icon-margin:                     0 16px 0 0 !default;
   vertical-align: $action-sheet-wp-icon-vertical-align;
 }
 
-.action-sheet-group {
+.action-sheet-wp .action-sheet-group {
   background: $action-sheet-wp-background;
-
-  &:last-child .action-sheet-button {
-    margin-bottom: $action-sheet-wp-group-margin-bottom;
-  }
-
-  .button-inner {
-    justify-content: flex-start;
-  }
 }
 
-.action-sheet-selected {
+.action-sheet-wp .action-sheet-group:last-child .action-sheet-button {
+  margin-bottom: $action-sheet-wp-group-margin-bottom;
+}
+
+.action-sheet-wp .action-sheet-group .button-inner {
+  justify-content: flex-start;
+}
+
+.action-sheet-wp .action-sheet-selected {
   font-weight: bold;
 }
 
-.action-sheet-cancel {
+.action-sheet-wp .action-sheet-cancel {
   background: $action-sheet-wp-button-background;
 }
diff --git a/src/components/alert/alert.ios.scss b/src/components/alert/alert.ios.scss
index 583da3d3fb..6427422fff 100644
--- a/src/components/alert/alert.ios.scss
+++ b/src/components/alert/alert.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./alert";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Alerts
 // --------------------------------------------------
@@ -30,7 +29,7 @@ $alert-ios-content-max-height:                  240px !default;
 $alert-ios-input-margin-top:                    10px !default;
 $alert-ios-input-padding:                       6px !default;
 $alert-ios-input-border-color:                  #ccc !default;
-$alert-ios-input-border:                        1px solid $alert-ios-input-border-color !default;
+$alert-ios-input-border:                        $hairlines-width solid $alert-ios-input-border-color !default;
 $alert-ios-input-border-radius:                 4px !default;
 $alert-ios-input-background-color:              #fff !default;
 
@@ -45,7 +44,7 @@ $alert-ios-button-text-color:                   color($colors-ios, primary) !def
 $alert-ios-button-background-color:             transparent !default;
 $alert-ios-button-background-color-activated:   #e9e9e9 !default;
 
-$alert-ios-button-border-width:                 1px !default;
+$alert-ios-button-border-width:                 $hairlines-width !default;
 $alert-ios-button-border-style:                 solid !default;
 $alert-ios-button-border-color:                 #dbdbdf !default;
 $alert-ios-button-border-radius:                0 !default;
@@ -73,7 +72,7 @@ $alert-ios-checkbox-label-text-color-checked:   initial !default;
 
 $alert-ios-checkbox-margin:                     10px 6px 10px 16px !default;
 $alert-ios-checkbox-size:                       21px !default;
-$alert-ios-checkbox-border-width:               1px !default;
+$alert-ios-checkbox-border-width:               $hairlines-width !default;
 $alert-ios-checkbox-border-style:               solid !default;
 $alert-ios-checkbox-border-radius:              50% !default;
 $alert-ios-checkbox-border-color-off:           $list-ios-border-color !default;
@@ -91,7 +90,7 @@ $alert-ios-checkbox-icon-border-color:          $background-ios-color !default;
 $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
 
-.alert-wrapper {
+.alert-ios .alert-wrapper {
   overflow: hidden;
 
   max-width: $alert-ios-max-width;
@@ -106,20 +105,20 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // iOS Alert Header
 // --------------------------------------------------
 
-.alert-head {
+.alert-ios .alert-head {
   padding: $alert-ios-head-padding;
 
   text-align: $alert-ios-head-text-align;
 }
 
-.alert-title {
+.alert-ios .alert-title {
   margin-top: $alert-ios-title-margin-top;
 
   font-size: $alert-ios-title-font-size;
   font-weight: $alert-ios-title-font-weight;
 }
 
-.alert-sub-title {
+.alert-ios .alert-sub-title {
   font-size: $alert-ios-sub-title-font-size;
   color: $alert-ios-sub-title-text-color;
 }
@@ -128,8 +127,8 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // iOS Alert Message
 // --------------------------------------------------
 
-.alert-message,
-.alert-input-group {
+.alert-ios .alert-message,
+.alert-ios .alert-input-group {
   padding: $alert-ios-message-padding;
 
   font-size: $alert-ios-message-font-size;
@@ -137,19 +136,19 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
   color: $alert-ios-message-text-color;
 }
 
-.alert-message {
+.alert-ios .alert-message {
   max-height: $alert-ios-content-max-height;
+}
 
-  &:empty {
-    padding: $alert-ios-message-padding-empty;
-  }
+.alert-ios .alert-message:empty {
+  padding: $alert-ios-message-padding-empty;
 }
 
 
 // iOS Alert Input
 // --------------------------------------------------
 
-.alert-input {
+.alert-ios .alert-input {
   margin-top: $alert-ios-input-margin-top;
   padding: $alert-ios-input-padding;
 
@@ -164,8 +163,8 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // iOS Alert Radio/Checkbox Group
 // --------------------------------------------------
 
-.alert-radio-group,
-.alert-checkbox-group {
+.alert-ios .alert-radio-group,
+.alert-ios .alert-checkbox-group {
   overflow: scroll;
 
   max-height: $alert-ios-content-max-height;
@@ -176,7 +175,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
 }
 
-.alert-tappable {
+.alert-ios .alert-tappable {
   display: flex;
 
   min-height: $alert-ios-button-min-height;
@@ -186,7 +185,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // iOS Alert Radio Label
 // --------------------------------------------------
 
-.alert-radio-label {
+.alert-ios .alert-radio-label {
   overflow: hidden;
 
   flex: 1;
@@ -203,7 +202,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // iOS Alert Radio Label: Checked
 // --------------------------------------------------
 
-.alert-radio[aria-checked=true] .alert-radio-label {
+.alert-ios [aria-checked=true] .alert-radio-label {
   color: $alert-ios-radio-label-text-color-checked;
 }
 
@@ -211,7 +210,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // iOS Alert Radio Checkmark: Unchecked
 // -----------------------------------------
 
-.alert-radio-icon {
+.alert-ios .alert-radio-icon {
   position: relative;
 
   order: 1;
@@ -223,7 +222,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // iOS Alert Radio Checked
 // -----------------------------------------
 
-.alert-radio[aria-checked=true] .alert-radio-inner {
+.alert-ios [aria-checked=true] .alert-radio-inner {
   position: absolute;
   top: $alert-ios-radio-icon-top;
   left: $alert-ios-radio-icon-left;
@@ -243,7 +242,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // iOS Alert Checkbox Label
 // --------------------------------------------------
 
-.alert-checkbox-label {
+.alert-ios .alert-checkbox-label {
   overflow: hidden;
 
   flex: 1;
@@ -254,14 +253,14 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
   white-space: nowrap;
 }
 
-.alert-checkbox[aria-checked=true] .alert-checkbox-label {
+.alert-ios [aria-checked=true] .alert-checkbox-label {
   color: $alert-ios-checkbox-label-text-color-checked;
 }
 
 // iOS Alert Checkbox Outer Circle: Unchecked
 // -----------------------------------------
 
-.alert-checkbox-icon {
+.alert-ios .alert-checkbox-icon {
   position: relative;
 
   margin: $alert-ios-checkbox-margin;
@@ -280,7 +279,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // iOS Alert Checkbox Outer Circle: Checked
 // -----------------------------------------
 
-.alert-checkbox[aria-checked=true] .alert-checkbox-icon {
+.alert-ios [aria-checked=true] .alert-checkbox-icon {
   border-color: $alert-ios-checkbox-border-color-on;
   background-color: $alert-ios-checkbox-background-color-on;
 }
@@ -289,7 +288,7 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // iOS Alert Checkbox Inner Checkmark: Checked
 // -----------------------------------------
 
-.alert-checkbox[aria-checked=true] .alert-checkbox-inner {
+.alert-ios [aria-checked=true] .alert-checkbox-inner {
   position: absolute;
   top: $alert-ios-checkbox-icon-top;
   left: $alert-ios-checkbox-icon-left;
@@ -309,13 +308,13 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // iOS Alert Button
 // --------------------------------------------------
 
-.alert-button-group {
+.alert-ios .alert-button-group {
   flex-wrap: $alert-ios-button-group-flex-wrap;
 
   margin-right: -$alert-ios-button-border-width;
 }
 
-.alert-button {
+.alert-ios .alert-button {
   overflow: hidden;
 
   flex: $alert-ios-button-flex;
@@ -331,29 +330,13 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
   font-size: $alert-ios-button-font-size;
   color: $alert-ios-button-text-color;
   background-color: $alert-ios-button-background-color;
-
-  &:last-child {
-    border-right: 0;
-    font-weight: $alert-ios-button-main-font-weight;
-  }
-
-  &.activated {
-    background-color: $alert-ios-button-background-color-activated;
-  }
 }
 
-&.hairlines {
-  .alert-radio-group,
-  .alert-checkbox-group {
-    border-width: $hairlines-width;
-  }
-
-  .alert-input {
-    border-width: $hairlines-width;
-  }
-
-  .alert-button {
-    border-top-width: $hairlines-width;
-    border-right-width: $hairlines-width;
-  }
+.alert-ios .alert-button:last-child {
+  border-right: 0;
+  font-weight: $alert-ios-button-main-font-weight;
+}
+
+.alert-ios .alert-button.activated {
+  background-color: $alert-ios-button-background-color-activated;
 }
diff --git a/src/components/alert/alert.md.scss b/src/components/alert/alert.md.scss
index f465d0c046..1e7ee35562 100644
--- a/src/components/alert/alert.md.scss
+++ b/src/components/alert/alert.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./alert";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Alerts
 // --------------------------------------------------
@@ -99,7 +98,7 @@ $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 {
+.alert-md .alert-wrapper {
   max-width: $alert-md-max-width;
 
   border-radius: $alert-md-border-radius;
@@ -111,17 +110,17 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // Material Design Alert Header
 // --------------------------------------------------
 
-.alert-head {
+.alert-md .alert-head {
   padding: $alert-md-head-padding;
 
   text-align: $alert-md-head-text-align;
 }
 
-.alert-title {
+.alert-md .alert-title {
   font-size: $alert-md-title-font-size;
 }
 
-.alert-sub-title {
+.alert-md .alert-sub-title {
   font-size: $alert-md-sub-title-font-size;
 }
 
@@ -129,46 +128,46 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // Material Design Alert Message
 // --------------------------------------------------
 
-.alert-message,
-.alert-input-group {
+.alert-md .alert-message,
+.alert-md .alert-input-group {
   padding: $alert-md-message-padding;
 
   color: $alert-md-message-text-color;
 }
 
-.alert-message {
+.alert-md .alert-message {
   max-height: $alert-md-content-max-height;
 
   font-size: $alert-md-message-font-size;
+}
 
-  &:empty {
-    padding: $alert-md-message-padding-empty;
-  }
+.alert-md .alert-message:empty {
+  padding: $alert-md-message-padding-empty;
 }
 
 
 // Material Design Alert Input
 // --------------------------------------------------
 
-.alert-input {
+.alert-md .alert-input {
   margin: $alert-md-input-margin-top $alert-md-input-margin-right $alert-md-input-margin-bottom $alert-md-input-margin-left;
 
   border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;
   color: $alert-md-input-text-color;
+}
 
-  &:focus {
-    margin-bottom: $alert-md-input-margin-bottom - 1;
+.alert-md .alert-input:focus {
+  margin-bottom: $alert-md-input-margin-bottom - 1;
 
-    border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
-  }
+  border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
 }
 
 
 // Material Design Alert Radio/Checkbox Group
 // --------------------------------------------------
 
-.alert-radio-group,
-.alert-checkbox-group {
+.alert-md .alert-radio-group,
+.alert-md .alert-checkbox-group {
   position: relative;
   overflow: auto;
 
@@ -178,7 +177,7 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
   border-bottom: $alert-md-list-border-bottom;
 }
 
-.alert-tappable {
+.alert-md .alert-tappable {
   position: relative;
   display: flex;
 
@@ -192,7 +191,7 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // Material Design Alert Radio
 // --------------------------------------------------
 
-.alert-radio-label {
+.alert-md .alert-radio-label {
   overflow: hidden;
 
   flex: 1;
@@ -206,7 +205,7 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // Material Design Alert Radio Unchecked Circle
 // ---------------------------------------------------
 
-.alert-radio-icon {
+.alert-md .alert-radio-icon {
   position: relative;
   top: $alert-md-radio-top;
   left: $alert-md-radio-left;
@@ -224,7 +223,7 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // Material Design Alert Radio Checked Dot
 // ---------------------------------------------------
 
-.alert-radio-inner {
+.alert-md .alert-radio-inner {
   position: absolute;
   top: $alert-md-radio-icon-top;
   left: $alert-md-radio-icon-left;
@@ -242,27 +241,23 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // Material Design Alert Radio Checked
 // ---------------------------------------------------
 
-.alert-radio[aria-checked=true] {
+.alert-md [aria-checked=true] .alert-radio-label {
+  color: $alert-md-radio-label-text-color-checked;
+}
 
-  .alert-radio-label {
-    color: $alert-md-radio-label-text-color-checked;
-  }
-
-  .alert-radio-icon {
-    border-color: $alert-md-radio-border-color-on;
-  }
-
-  .alert-radio-inner {
-    transform: $alert-md-radio-icon-transform-on;
-  }
+.alert-md [aria-checked=true] .alert-radio-icon {
+  border-color: $alert-md-radio-border-color-on;
+}
 
+.alert-md [aria-checked=true] .alert-radio-inner {
+  transform: $alert-md-radio-icon-transform-on;
 }
 
 
 // Material Design Alert Checkbox Label
 // --------------------------------------------------
 
-.alert-checkbox-label {
+.alert-md .alert-checkbox-label {
   overflow: hidden;
 
   flex: 1;
@@ -273,14 +268,14 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
   white-space: nowrap;
 }
 
-.alert-checkbox[aria-checked=true] .alert-checkbox-label {
+.alert-md [aria-checked=true] .alert-checkbox-label {
   color: $alert-md-checkbox-label-text-color-checked;
 }
 
 // Material Design Alert Checkbox Outline: Unchecked
 // --------------------------------------------------
 
-.alert-checkbox-icon {
+.alert-md .alert-checkbox-icon {
   position: relative;
   top: $alert-md-checkbox-top;
   left: $alert-md-checkbox-left;
@@ -297,12 +292,12 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // Material Design Alert Checkbox Checkmark: Checked
 // --------------------------------------------------
 
-.alert-checkbox[aria-checked=true] .alert-checkbox-icon {
+.alert-md [aria-checked=true] .alert-checkbox-icon {
   border-color: $alert-md-checkbox-border-color-on;
   background-color: $alert-md-checkbox-border-color-on;
 }
 
-.alert-checkbox[aria-checked=true] .alert-checkbox-inner {
+.alert-md [aria-checked=true] .alert-checkbox-inner {
   position: absolute;
   top: $alert-md-checkbox-icon-top;
   left: $alert-md-checkbox-icon-left;
@@ -322,14 +317,14 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // Material Design Alert Button
 // --------------------------------------------------
 
-.alert-button-group {
+.alert-md .alert-button-group {
   flex-wrap: $alert-md-button-group-flex-wrap;
   justify-content: $alert-md-button-group-justify-content;
 
   padding: $alert-md-button-group-padding;
 }
 
-.alert-button {
+.alert-md .alert-button {
   // necessary for ripple to work properly
   position: relative;
   overflow: hidden;
@@ -343,12 +338,12 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
   text-transform: $alert-md-button-text-transform;
   color: $alert-md-button-text-color;
   background-color: $alert-md-button-background-color;
-
-  &.activated {
-    background-color: $alert-md-button-background-color-activated;
-  }
-
-  .button-inner {
-    justify-content: $alert-md-button-group-justify-content;
-  }
+}
+
+.alert-md .alert-button.activated {
+  background-color: $alert-md-button-background-color-activated;
+}
+
+.alert-md .alert-button .button-inner {
+  justify-content: $alert-md-button-group-justify-content;
 }
diff --git a/src/components/alert/alert.wp.scss b/src/components/alert/alert.wp.scss
index b57c86e878..d4f6e47b90 100644
--- a/src/components/alert/alert.wp.scss
+++ b/src/components/alert/alert.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./alert";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Alerts
 // --------------------------------------------------
@@ -99,13 +98,11 @@ $alert-wp-checkbox-icon-border-color:          color-contrast($colors-wp, $alert
 $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 
 
-ion-alert {
-  ion-backdrop {
-    background: $alert-wp-backdrop-background;
-  }
+.alert-wp ion-backdrop {
+  background: $alert-wp-backdrop-background;
 }
 
-.alert-wrapper {
+.alert-wp .alert-wrapper {
   width: $alert-wp-width;
   max-width: $alert-wp-max-width;
 
@@ -117,18 +114,18 @@ ion-alert {
 // Windows Alert Header
 // --------------------------------------------------
 
-.alert-head {
+.alert-wp .alert-head {
   padding: $alert-wp-head-padding;
 
   text-align: $alert-wp-head-text-align;
 }
 
-.alert-title {
+.alert-wp .alert-title {
   font-size: $alert-wp-title-font-size;
   font-weight: $alert-wp-title-font-weight;
 }
 
-.alert-sub-title {
+.alert-wp .alert-sub-title {
   font-size: $alert-wp-sub-title-font-size;
 }
 
@@ -136,53 +133,53 @@ ion-alert {
 // Windows Alert Message
 // --------------------------------------------------
 
-.alert-message,
-.alert-input-group {
+.alert-wp .alert-message,
+.alert-wp .alert-input-group {
   padding: $alert-wp-message-padding;
 
   color: $alert-wp-message-text-color;
 }
 
-.alert-message {
+.alert-wp .alert-message {
   max-height: $alert-wp-content-max-height;
 
   font-size: $alert-wp-message-font-size;
+}
 
-  &:empty {
-    padding: $alert-wp-message-padding-empty;
-  }
+.alert-wp .alert-message:empty {
+  padding: $alert-wp-message-padding-empty;
 }
 
 
 // Windows Alert Input
 // --------------------------------------------------
 
-.alert-input {
+.alert-wp .alert-input {
   margin: $alert-wp-input-margin;
   padding: $alert-wp-input-padding;
 
   border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color;
   line-height: $alert-wp-input-line-height;
   color: $alert-wp-input-text-color;
+}
 
-  &:focus {
-    border-color: $alert-wp-input-border-color-focused;
-  }
+.alert-wp .alert-input:focus {
+  border-color: $alert-wp-input-border-color-focused;
 }
 
 
 // Windows Alert Radio/Checkbox Group
 // --------------------------------------------------
 
-.alert-radio-group,
-.alert-checkbox-group {
+.alert-wp .alert-radio-group,
+.alert-wp .alert-checkbox-group {
   position: relative;
   overflow: auto;
 
   max-height: $alert-wp-content-max-height;
 }
 
-.alert-tappable {
+.alert-wp .alert-tappable {
   position: relative;
   display: flex;
 
@@ -196,7 +193,7 @@ ion-alert {
 // Windows Alert Radio Label
 // --------------------------------------------------
 
-.alert-radio-label {
+.alert-wp .alert-radio-label {
   overflow: hidden;
 
   flex: 1;
@@ -210,7 +207,7 @@ ion-alert {
 // Windows Alert Radio Unchecked Circle
 // ---------------------------------------------------
 
-.alert-radio-icon {
+.alert-wp .alert-radio-icon {
   position: relative;
   top: $alert-wp-radio-top;
   left: $alert-wp-radio-left;
@@ -230,7 +227,7 @@ ion-alert {
 // Windows Alert Radio Checked Dot
 // ---------------------------------------------------
 
-.alert-radio-inner {
+.alert-wp .alert-radio-inner {
   position: absolute;
   top: $alert-wp-radio-icon-top;
   left: $alert-wp-radio-icon-left;
@@ -246,25 +243,23 @@ ion-alert {
 // Windows Alert Radio Checked
 // ---------------------------------------------------
 
-.alert-radio[aria-checked=true] {
-  .alert-radio-label {
-    color: $alert-wp-radio-label-text-color-checked;
-  }
+.alert-wp [aria-checked=true] .alert-radio-label {
+  color: $alert-wp-radio-label-text-color-checked;
+}
 
-  .alert-radio-icon {
-    border-color: $alert-wp-radio-border-color;
-  }
+.alert-wp [aria-checked=true] .alert-radio-icon {
+  border-color: $alert-wp-radio-border-color;
+}
 
-  .alert-radio-inner {
-    display: block;
-  }
+.alert-wp [aria-checked=true] .alert-radio-inner {
+  display: block;
 }
 
 
 // Windows Alert Checkbox Label
 // --------------------------------------------------
 
-.alert-checkbox-label {
+.alert-wp .alert-checkbox-label {
   overflow: hidden;
 
   flex: 1;
@@ -275,14 +270,14 @@ ion-alert {
   white-space: nowrap;
 }
 
-.alert-checkbox[aria-checked=true] .alert-checkbox-label {
+.alert-wp [aria-checked=true] .alert-checkbox-label {
   color: $alert-wp-checkbox-label-text-color-checked;
 }
 
 // Windows Alert Checkbox Outline: Unchecked
 // --------------------------------------------------
 
-.alert-checkbox-icon {
+.alert-wp .alert-checkbox-icon {
   position: relative;
   top: $alert-wp-checkbox-top;
   left: $alert-wp-checkbox-left;
@@ -300,7 +295,7 @@ ion-alert {
 // Windows Alert Checkbox Outline: Checked
 // --------------------------------------------------
 
-.alert-checkbox[aria-checked=true] .alert-checkbox-icon {
+.alert-wp [aria-checked=true] .alert-checkbox-icon {
   border-color: $alert-wp-checkbox-background-on;
   background: $alert-wp-checkbox-background-on;
 }
@@ -308,7 +303,7 @@ ion-alert {
 // Windows Alert Checkbox Checkmark: Checked
 // --------------------------------------------------
 
-.alert-checkbox[aria-checked=true] .alert-checkbox-inner {
+.alert-wp [aria-checked=true] .alert-checkbox-inner {
   position: absolute;
   top: $alert-wp-checkbox-icon-top;
   left: $alert-wp-checkbox-icon-left;
@@ -328,24 +323,25 @@ ion-alert {
 // Windows Alert Button
 // --------------------------------------------------
 
-.alert-button-group {
+.alert-wp .alert-button-group {
   flex-wrap: $alert-wp-button-group-flex-wrap;
   justify-content: $alert-wp-button-group-justify-content;
 
   padding: $alert-wp-button-group-padding;
-
-  &.vertical .alert-button {
-    margin-top: $alert-wp-button-group-vertical-margin-top;
-
-    width: $alert-wp-button-group-vertical-width;
-
-    &:first-child:not(:only-child) {
-      margin-top: 0;
-    }
-  }
 }
 
-.alert-button {
+.alert-wp .alert-button-group-vertical .alert-button {
+  margin-top: $alert-wp-button-group-vertical-margin-top;
+
+  width: $alert-wp-button-group-vertical-width;
+}
+
+.alert-wp .alert-button-group-vertical .alert-button:first-child:not(:only-child) {
+  margin-top: 0;
+  margin-right: 0;
+}
+
+.alert-wp .alert-button {
   padding: $alert-wp-button-padding;
 
   width: $alert-wp-button-width;
@@ -354,12 +350,12 @@ ion-alert {
   font-weight: $alert-wp-button-font-weight;
   color: $alert-wp-button-text-color;
   background: $alert-wp-button-background;
-
-  &:first-child:not(:only-child) {
-    margin-right: $alert-wp-button-margin-right;
-  }
-
-  &.activated {
-    background: $alert-wp-button-background-activated;
-  }
+}
+
+.alert-wp .alert-button:first-child:not(:only-child) {
+  margin-right: $alert-wp-button-margin-right;
+}
+
+.alert-wp .alert-button.activated {
+  background: $alert-wp-button-background-activated;
 }
diff --git a/src/components/app/app.ios.scss b/src/components/app/app.ios.scss
index b971fd310a..277cd412d5 100644
--- a/src/components/app/app.ios.scss
+++ b/src/components/app/app.ios.scss
@@ -1,16 +1,10 @@
-@import "../../globals.ios";
+@import "../../themes/ionic.globals.ios";
 
 // iOS App
 // --------------------------------------------------
 
-ion-content {
-  color: $text-ios-color;
-}
-
-hr {
-  background-color: rgba(0, 0, 0, .12);
-}
-
-&.hairlines hr {
-  height: $hairlines-width;
+ion-app.ios {
+  font-family: $font-family-ios-base;
+  font-size: $font-size-ios-base;
+  background-color: $background-ios-color;
 }
diff --git a/src/components/app/app.md.scss b/src/components/app/app.md.scss
index 63716f8631..5a18f10aff 100644
--- a/src/components/app/app.md.scss
+++ b/src/components/app/app.md.scss
@@ -1,12 +1,10 @@
-@import "../../globals.md";
+@import "../../themes/ionic.globals.md";
 
 // Material Design App
 // --------------------------------------------------
 
-ion-content {
-  color: $text-md-color;
-}
-
-hr {
-  background-color: rgba(0, 0, 0, .08);
+ion-app.md {
+  font-family: $font-family-md-base;
+  font-size: $font-size-md-base;
+  background-color: $background-md-color;
 }
diff --git a/src/components/app/app.wp.scss b/src/components/app/app.wp.scss
index 20098d88db..888ac7dea6 100644
--- a/src/components/app/app.wp.scss
+++ b/src/components/app/app.wp.scss
@@ -1,12 +1,10 @@
-@import "../../globals.wp";
+@import "../../themes/ionic.globals.wp";
 
 // Windows App
 // --------------------------------------------------
 
-ion-content {
-  color: $text-wp-color;
-}
-
-hr {
-  background-color: rgba(0, 0, 0, .08);
+ion-app.wp {
+  font-family: $font-family-wp-base;
+  font-size: $font-size-wp-base;
+  background-color: $background-wp-color;
 }
diff --git a/src/components/badge/badge.ios.scss b/src/components/badge/badge.ios.scss
index a461fbe4f6..0c1d0fa451 100644
--- a/src/components/badge/badge.ios.scss
+++ b/src/components/badge/badge.ios.scss
@@ -1,4 +1,4 @@
-@import "./badge";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Badge
 // --------------------------------------------------
@@ -13,7 +13,7 @@ $badge-ios-background-color:   color($colors-ios, primary) !default;
 $badge-ios-text-color:         color-contrast($colors-ios, $badge-ios-background-color) !default;
 
 
-ion-badge {
+.badge-ios {
   border-radius: $badge-ios-border-radius;
   color: $badge-ios-text-color;
   background-color: $badge-ios-background-color;
@@ -25,7 +25,7 @@ ion-badge {
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
-  .badge-#{$color-name} {
+  .badge-ios-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
   }
diff --git a/src/components/badge/badge.md.scss b/src/components/badge/badge.md.scss
index 3341091005..958c62ed16 100644
--- a/src/components/badge/badge.md.scss
+++ b/src/components/badge/badge.md.scss
@@ -1,4 +1,4 @@
-@import "./badge";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Badge
 // --------------------------------------------------
@@ -13,7 +13,7 @@ $badge-md-background-color:         color($colors-md, primary) !default;
 $badge-md-text-color:               color-contrast($colors-md, $badge-md-background-color) !default;
 
 
-ion-badge {
+.badge-md {
   border-radius: $badge-md-border-radius;
   color: $badge-md-text-color;
   background-color: $badge-md-background-color;
@@ -25,7 +25,7 @@ ion-badge {
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  .badge-#{$color-name} {
+  .badge-md-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
   }
diff --git a/src/components/badge/badge.wp.scss b/src/components/badge/badge.wp.scss
index 2dca9eed3c..9c86c3e126 100644
--- a/src/components/badge/badge.wp.scss
+++ b/src/components/badge/badge.wp.scss
@@ -1,4 +1,4 @@
-@import "./badge";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Badge
 // --------------------------------------------------
@@ -13,7 +13,7 @@ $badge-wp-background-color:         color($colors-wp, primary) !default;
 $badge-wp-text-color:               color-contrast($colors-wp, $badge-wp-background-color) !default;
 
 
-ion-badge {
+.badge-wp {
   border-radius: $badge-wp-border-radius;
   color: $badge-wp-text-color;
   background-color: $badge-wp-background-color;
@@ -25,7 +25,7 @@ ion-badge {
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
-  .badge-#{$color-name} {
+  .badge-wp-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
   }
diff --git a/src/components/button/button.ios.scss b/src/components/button/button.ios.scss
index 035c1d984b..5b6289b3bf 100644
--- a/src/components/button/button.ios.scss
+++ b/src/components/button/button.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./button";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Button
 // --------------------------------------------------
@@ -138,7 +137,7 @@ $button-ios-fab-border-radius:                      50% !default;
 // iOS Default Button
 // --------------------------------------------------
 
-.button {
+.button-ios {
   margin: $button-ios-margin;
   padding: $button-ios-padding;
 
@@ -149,15 +148,15 @@ $button-ios-fab-border-radius:                      50% !default;
 
   color: $button-ios-text-color;
   background-color: $button-ios-background-color;
+}
 
-  &.activated {
-    background-color: $button-ios-background-color-activated;
-    opacity: $button-ios-opacity-activated;
-  }
+.button-ios.activated {
+  background-color: $button-ios-background-color-activated;
+  opacity: $button-ios-opacity-activated;
+}
 
-  &:hover:not(.disable-hover) {
-    opacity: $button-ios-opacity-hover;
-  }
+.button-ios:hover:not(.disable-hover) {
+  opacity: $button-ios-opacity-hover;
 }
 
 
@@ -165,27 +164,25 @@ $button-ios-fab-border-radius:                      50% !default;
 // --------------------------------------------------
 
 @mixin ios-button-default($color-name, $color-base, $color-contrast) {
+  $background-color: $color-base;
+  $background-color-activated: color-shade($background-color);
+  $fg-color: $color-contrast;
 
-  .button-#{$color-name} {
-    $background-color: $color-base;
-    $background-color-activated: color-shade($background-color);
-    $fg-color: $color-contrast;
-
+  .button-ios-#{$color-name} {
     color: $fg-color;
     background-color: $background-color;
-
-    &.activated {
-      background-color: $background-color-activated;
-    }
   }
 
+  .button-ios-#{$color-name}.activated {
+    background-color: $background-color-activated;
+  }
 }
 
 
 // iOS Button Sizes
 // --------------------------------------------------
 
-.button-large {
+.button-large-ios {
   padding: $button-ios-large-padding;
 
   height: $button-ios-large-height;
@@ -193,22 +190,22 @@ $button-ios-fab-border-radius:                      50% !default;
   font-size: $button-ios-large-font-size;
 }
 
-.button-small {
+.button-small-ios {
   padding: $button-ios-small-padding;
 
   height: $button-ios-small-height;
 
   font-size: $button-ios-small-font-size;
+}
 
-  &[icon-only] ion-icon {
-    font-size: $button-ios-small-icon-font-size;
-  }
+.button-small-ios[icon-only] ion-icon {
+  font-size: $button-ios-small-icon-font-size;
 }
 
 // iOS Block Button
 // --------------------------------------------------
 
-.button-block {
+.button-block-ios {
   margin-right: 0;
   margin-left: 0;
 }
@@ -216,7 +213,7 @@ $button-ios-fab-border-radius:                      50% !default;
 // iOS Full Button
 // --------------------------------------------------
 
-.button-full {
+.button-full-ios {
   margin-right: 0;
   margin-left: 0;
 
@@ -228,19 +225,19 @@ $button-ios-fab-border-radius:                      50% !default;
 // iOS Outline Button
 // --------------------------------------------------
 
-.button-outline {
+.button-outline-ios {
   border-width: $button-ios-outline-border-width;
   border-style: $button-ios-outline-border-style;
   border-radius: $button-ios-outline-border-radius;
   border-color: $button-ios-outline-border-color;
   color: $button-ios-outline-text-color;
   background-color: $button-ios-outline-background-color;
+}
 
-  &.activated {
-    color: $button-ios-outline-text-color-activated;
-    background-color: $button-ios-outline-background-color-activated;
-    opacity: $button-ios-outline-opacity-activated;
-  }
+.button-outline-ios.activated {
+  color: $button-ios-outline-text-color-activated;
+  background-color: $button-ios-outline-background-color-activated;
+  opacity: $button-ios-outline-opacity-activated;
 }
 
 // iOS Outline Button Color Mixin
@@ -248,15 +245,15 @@ $button-ios-fab-border-radius:                      50% !default;
 
 @mixin ios-button-outline($color-name, $color-base, $color-contrast) {
 
-  .button-outline-#{$color-name} {
+  .button-outline-ios-#{$color-name} {
     border-color: $color-base;
     color: $color-base;
     background-color: $button-ios-outline-background-color;
+  }
 
-    &.activated {
-      color: $color-contrast;
-      background-color: $color-base;
-    }
+  .button-outline-ios-#{$color-name}.activated {
+    color: $color-contrast;
+    background-color: $color-base;
   }
 
 }
@@ -265,20 +262,20 @@ $button-ios-fab-border-radius:                      50% !default;
 // iOS Clear Button
 // --------------------------------------------------
 
-.button-clear {
+.button-clear-ios {
   border-color: $button-ios-clear-border-color;
   color: $button-ios-background-color;
   background-color: $button-ios-clear-background-color;
+}
 
-  &.activated {
-    background-color: $button-ios-clear-background-color-activated;
-    opacity: $button-ios-clear-opacity-activated;
-  }
+.button-clear-ios.activated {
+  background-color: $button-ios-clear-background-color-activated;
+  opacity: $button-ios-clear-opacity-activated;
+}
 
-  &:hover:not(.disable-hover) {
-    color: $button-ios-clear-text-color-hover;
-    opacity: $button-ios-clear-opacity-hover;
-  }
+.button-clear-ios:hover:not(.disable-hover) {
+  color: $button-ios-clear-text-color-hover;
+  opacity: $button-ios-clear-opacity-hover;
 }
 
 
@@ -286,28 +283,28 @@ $button-ios-fab-border-radius:                      50% !default;
 // --------------------------------------------------
 
 @mixin ios-button-clear($color-name, $color-base, $color-contrast) {
+  $fg-color: $color-base;
 
-  .button-clear-#{$color-name} {
-    $fg-color: $color-base;
+  .button-clear-ios-#{$color-name} {
     border-color: $button-ios-clear-border-color;
     color: $fg-color;
     background-color: $button-ios-clear-background-color;
-
-    &.activated {
-      opacity: $button-ios-clear-opacity-activated;
-    }
-
-    &:hover:not(.disable-hover) {
-      color: $fg-color;
-    }
   }
 
+  .button-clear-ios-#{$color-name}.activated {
+    opacity: $button-ios-clear-opacity-activated;
+  }
+
+  .button-clear-ios-#{$color-name}:hover:not(.disable-hover) {
+    color: $fg-color;
+  }
 }
 
+
 // iOS Round Button
 // --------------------------------------------------
 
-.button-round {
+.button-round-ios {
   padding: $button-ios-round-padding;
 
   border-radius: $button-ios-round-border-radius;
@@ -317,15 +314,10 @@ $button-ios-fab-border-radius:                      50% !default;
 // iOS FAB Button
 // --------------------------------------------------
 
-.button-fab {
+.button-fab-ios {
   border-radius: $button-ios-fab-border-radius;
 }
 
-// iOS does not use the button effect
-ion-button-effect {
-  display: none;
-}
-
 
 // Generate iOS Button Colors
 // --------------------------------------------------
@@ -335,10 +327,3 @@ ion-button-effect {
   @include ios-button-outline($color-name, $color-base, $color-contrast);
   @include ios-button-clear($color-name, $color-base, $color-contrast);
 }
-
-
-// Core Button Overrides
-// --------------------------------------------------
-
-@import "./button-fab";
-@import "./button-icon";
diff --git a/src/components/button/button.md.scss b/src/components/button/button.md.scss
index 6a6e9bee9d..f70587f12f 100644
--- a/src/components/button/button.md.scss
+++ b/src/components/button/button.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./button";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Button
 // --------------------------------------------------
@@ -179,7 +178,7 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
 // Material Design Default Button
 // --------------------------------------------------
 
-.button {
+.button-md {
   margin: $button-md-margin;
   padding: $button-md-padding;
 
@@ -198,19 +197,19 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
   transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
               background-color $button-md-transition-duration $button-md-transition-timing-function,
               color $button-md-transition-duration $button-md-transition-timing-function;
+}
 
-  &:hover:not(.disable-hover) {
-    background-color: $button-md-background-color-hover;
-  }
+.button-md:hover:not(.disable-hover) {
+  background-color: $button-md-background-color-hover;
+}
 
-  &.activated {
-    background-color: $button-md-background-color-activated;
-    box-shadow: $button-md-box-shadow-activated;
-  }
+.button-md.activated {
+  background-color: $button-md-background-color-activated;
+  box-shadow: $button-md-box-shadow-activated;
+}
 
-  ion-button-effect {
-    background-color: $button-md-text-color;
-  }
+.button-md .button-effect {
+  background-color: $button-md-text-color;
 }
 
 
@@ -218,36 +217,34 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
 // --------------------------------------------------
 
 @mixin md-button-default($color-name, $color-base, $color-contrast) {
+  $background-color: $color-base;
+  $background-color-activated: color-shade($background-color);
+  $fg-color: $color-contrast;
 
-  .button-#{$color-name} {
-    $background-color: $color-base;
-    $background-color-activated: color-shade($background-color);
-    $fg-color: $color-contrast;
-
+  .button-md-#{$color-name} {
     color: $fg-color;
     background-color: $background-color;
-
-    &:hover:not(.disable-hover) {
-      background-color: $background-color;
-    }
-
-    &.activated {
-      background-color: $background-color-activated;
-      opacity: $button-md-opacity-activated;
-    }
-
-    ion-button-effect {
-      background-color: $fg-color;
-    }
   }
 
+  .button-md-#{$color-name}:hover:not(.disable-hover) {
+    background-color: $background-color;
+  }
+
+  .button-md-#{$color-name}.activated {
+    background-color: $background-color-activated;
+    opacity: $button-md-opacity-activated;
+  }
+
+  .button-md-#{$color-name} .button-effect {
+    background-color: $fg-color;
+  }
 }
 
 
 // Material Design Button Sizes
 // --------------------------------------------------
 
-.button-large {
+.button-large-md {
   padding: $button-md-large-padding;
 
   height: $button-md-large-height;
@@ -255,22 +252,22 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
   font-size: $button-md-large-font-size;
 }
 
-.button-small {
+.button-small-md {
   padding: $button-md-small-padding;
 
   height: $button-md-small-height;
 
   font-size: $button-md-small-font-size;
+}
 
-  &[icon-only] ion-icon {
-    font-size: $button-md-small-icon-font-size;
-  }
+.button-small-md[icon-only] ion-icon {
+  font-size: $button-md-small-icon-font-size;
 }
 
 // Material Design Block Button
 // --------------------------------------------------
 
-.button-block {
+.button-block-md {
   margin-right: 0;
   margin-left: 0;
 }
@@ -278,7 +275,7 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
 // Material Design Full Button
 // --------------------------------------------------
 
-.button-full {
+.button-full-md {
   margin-right: 0;
   margin-left: 0;
 
@@ -290,27 +287,27 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
 // Material Design Outline Button
 // --------------------------------------------------
 
-.button-outline {
+.button-outline-md {
   border-width: $button-md-outline-border-width;
   border-style: $button-md-outline-border-style;
   border-color: $button-md-outline-border-color;
   color: $button-md-outline-text-color;
   background-color: $button-md-outline-background-color;
   box-shadow: $button-md-outline-box-shadow;
+}
 
-  &:hover:not(.disable-hover) {
-    background-color: $button-md-outline-background-color-hover;
-  }
+.button-outline-md:hover:not(.disable-hover) {
+  background-color: $button-md-outline-background-color-hover;
+}
 
-  &.activated {
-    background-color: $button-md-outline-background-color-activated;
-    box-shadow: $button-md-outline-box-shadow-activated;
-    opacity: $button-md-outline-opacity-activated;
-  }
+.button-outline-md.activated {
+  background-color: $button-md-outline-background-color-activated;
+  box-shadow: $button-md-outline-box-shadow-activated;
+  opacity: $button-md-outline-opacity-activated;
+}
 
-  ion-button-effect {
-    background-color: $button-md-outline-ripple-background-color;
-  }
+.button-outline-md .button-effect {
+  background-color: $button-md-outline-ripple-background-color;
 }
 
 
@@ -318,51 +315,50 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
 // --------------------------------------------------
 
 @mixin md-button-outline($color-name, $color-base, $color-contrast) {
+  $fg-color: color-shade($color-base, 5%);
 
-  .button-outline-#{$color-name} {
-    $fg-color: color-shade($color-base, 5%);
+  .button-outline-md-#{$color-name} {
     border-color: $fg-color;
     color: $fg-color;
     background-color: $button-md-outline-background-color;
-
-    &:hover:not(.disable-hover) {
-      background-color: $button-md-outline-background-color-hover;
-    }
-
-    &.activated {
-      background-color: $button-md-outline-background-color-activated;
-    }
-
-    ion-button-effect {
-      background-color: $fg-color;
-    }
   }
 
+  .button-outline-md-#{$color-name}:hover:not(.disable-hover) {
+    background-color: $button-md-outline-background-color-hover;
+  }
+
+  .button-outline-md-#{$color-name}.activated {
+    background-color: $button-md-outline-background-color-activated;
+  }
+
+  .button-outline-md-#{$color-name} .button-effect {
+    background-color: $fg-color;
+  }
 }
 
 
 // Material Design Clear Button
 // --------------------------------------------------
 
-.button-clear {
+.button-clear-md {
   border-color: $button-md-clear-border-color;
   color: $button-md-background-color;
   background-color: $button-md-clear-background-color;
   box-shadow: $button-md-clear-box-shadow;
   opacity: $button-md-clear-opacity;
+}
 
-  &.activated {
-    background-color: $button-md-clear-background-color-activated;
-    box-shadow: $button-md-clear-box-shadow-activated;
-  }
+.button-clear-md.activated {
+  background-color: $button-md-clear-background-color-activated;
+  box-shadow: $button-md-clear-box-shadow-activated;
+}
 
-  &:hover:not(.disable-hover) {
-    background-color: $button-md-clear-background-color-hover;
-  }
+.button-clear-md:hover:not(.disable-hover) {
+  background-color: $button-md-clear-background-color-hover;
+}
 
-  ion-button-effect {
-    background-color: $button-md-clear-ripple-background-color;
-  }
+.button-clear-md .button-effect {
+  background-color: $button-md-clear-ripple-background-color;
 }
 
 
@@ -370,21 +366,21 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
 // --------------------------------------------------
 
 @mixin md-button-clear($color-name, $color-base, $color-contrast) {
+  $fg-color: $color-base;
 
-  .button-clear-#{$color-name} {
-    $fg-color: $color-base;
+  .button-clear-md-#{$color-name} {
     border-color: $button-md-clear-border-color;
     color: $fg-color;
     background-color: $button-md-clear-background-color;
+  }
 
-    &.activated {
-      background-color: $button-md-clear-background-color-activated;
-      box-shadow: $button-md-clear-box-shadow-activated;
-    }
+  .button-clear-md-#{$color-name}.activated {
+    background-color: $button-md-clear-background-color-activated;
+    box-shadow: $button-md-clear-box-shadow-activated;
+  }
 
-    &:hover:not(.disable-hover) {
-      color: $fg-color;
-    }
+  .button-clear-md-#{$color-name}:hover:not(.disable-hover) {
+    color: $fg-color;
   }
 }
 
@@ -392,7 +388,7 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
 // Material Design Round Button
 // --------------------------------------------------
 
-.button-round {
+.button-round-md {
   padding: $button-md-round-padding;
 
   border-radius: $button-md-round-border-radius;
@@ -402,31 +398,33 @@ $button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4),
 // Material Design FAB Button
 // --------------------------------------------------
 
-.button-fab {
+.button-fab-md {
   border-radius: $button-md-fab-border-radius;
   box-shadow: $button-md-fab-box-shadow;
 
   transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
               background-color $button-md-transition-duration $button-md-transition-timing-function,
               color $button-md-transition-duration $button-md-transition-timing-function;
-
-  &.activated {
-    box-shadow: $button-md-fab-box-shadow-activated;
-  }
 }
 
-[icon-only] {
+.button-fab-md.activated {
+  box-shadow: $button-md-fab-box-shadow-activated;
+}
+
+.button-md [icon-only] {
   padding: 0;
 }
 
 
 // Material Design Ripple Effect
 // --------------------------------------------------
+// Only Material uses the button effect, so by default
+// it's display none, and .md sets to display block.
 
-ion-button-effect {
+.button-effect {
   position: absolute;
   z-index: 0;
-  display: block;
+  display: none;
 
   border-radius: 50%;
 
@@ -438,6 +436,10 @@ ion-button-effect {
   pointer-events: none;
 }
 
+.md .button-effect {
+  display: block;
+}
+
 
 // Generate Material Design Button Colors
 // --------------------------------------------------
@@ -447,10 +449,3 @@ ion-button-effect {
   @include md-button-outline($color-name, $color-base, $color-contrast);
   @include md-button-clear($color-name, $color-base, $color-contrast);
 }
-
-
-// Core Button Overrides
-// --------------------------------------------------
-
-@import "./button-fab";
-@import "./button-icon";
diff --git a/src/components/button/button.wp.scss b/src/components/button/button.wp.scss
index cc20aa70cb..1aaa40bf43 100644
--- a/src/components/button/button.wp.scss
+++ b/src/components/button/button.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./button";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Button
 // --------------------------------------------------
@@ -128,7 +127,7 @@ $button-wp-fab-border-radius:                             50% !default;
 // Windows Default Button
 // --------------------------------------------------
 
-.button {
+.button-wp {
   margin: $button-wp-margin;
   padding: $button-wp-padding;
 
@@ -141,15 +140,15 @@ $button-wp-fab-border-radius:                             50% !default;
 
   color: $button-wp-text-color;
   background-color: $button-wp-background-color;
+}
 
-  &:hover:not(.disable-hover) {
-    border-color: $button-wp-background-color-activated;
-    background-color: $button-wp-background-color;
-  }
+.button-wp:hover:not(.disable-hover) {
+  border-color: $button-wp-background-color-activated;
+  background-color: $button-wp-background-color;
+}
 
-  &.activated {
-    background-color: $button-wp-background-color-activated;
-  }
+.button-wp.activated {
+  background-color: $button-wp-background-color-activated;
 }
 
 
@@ -157,32 +156,30 @@ $button-wp-fab-border-radius:                             50% !default;
 // --------------------------------------------------
 
 @mixin wp-button-default($color-name, $color-base, $color-contrast) {
+  $bg-color: $color-base;
+  $bg-color-activated: color-shade($bg-color);
+  $fg-color: $color-contrast;
 
-  .button-#{$color-name} {
-    $bg-color: $color-base;
-    $bg-color-activated: color-shade($bg-color);
-    $fg-color: $color-contrast;
-
+  .button-wp-#{$color-name} {
     color: $fg-color;
     background-color: $bg-color;
-
-    &:hover:not(.disable-hover) {
-      border-color: $bg-color-activated;
-      background-color: $bg-color;
-    }
-
-    &.activated {
-      background-color: $bg-color-activated;
-    }
   }
 
+  .button-wp-#{$color-name}:hover:not(.disable-hover) {
+    border-color: $bg-color-activated;
+    background-color: $bg-color;
+  }
+
+  .button-wp-#{$color-name}.activated {
+    background-color: $bg-color-activated;
+  }
 }
 
 
 // Windows Button Sizes
 // --------------------------------------------------
 
-.button-large {
+.button-large-wp {
   padding: $button-wp-large-padding;
 
   height: $button-wp-large-height;
@@ -190,22 +187,22 @@ $button-wp-fab-border-radius:                             50% !default;
   font-size: $button-wp-large-font-size;
 }
 
-.button-small {
+.button-small-wp {
   padding: $button-wp-small-padding;
 
   height: $button-wp-small-height;
 
   font-size: $button-wp-small-font-size;
+}
 
-  &[icon-only] ion-icon {
-    font-size: $button-wp-small-icon-font-size;
-  }
+.button-small-wp[icon-only] ion-icon {
+  font-size: $button-wp-small-icon-font-size;
 }
 
 // Windows Block Button
 // --------------------------------------------------
 
-.button-block {
+.button-block-wp {
   margin-right: 0;
   margin-left: 0;
 }
@@ -213,7 +210,7 @@ $button-wp-fab-border-radius:                             50% !default;
 // Windows Full Button
 // --------------------------------------------------
 
-.button-full {
+.button-full-wp {
   margin-right: 0;
   margin-left: 0;
 
@@ -225,20 +222,20 @@ $button-wp-fab-border-radius:                             50% !default;
 // Windows Outline Button
 // --------------------------------------------------
 
-.button-outline {
+.button-outline-wp {
   border-width: $button-wp-outline-border-width;
   border-style: $button-wp-outline-border-style;
   border-color: $button-wp-outline-border-color;
   color: $button-wp-outline-text-color;
   background-color: $button-wp-outline-background-color;
+}
 
-  &:hover:not(.disable-hover) {
-    background-color: $button-wp-clear-background-color-hover;
-  }
+.button-outline-wp:hover:not(.disable-hover) {
+  background-color: $button-wp-clear-background-color-hover;
+}
 
-  &.activated {
-    background-color: rgba($button-wp-outline-background-color-activated, $button-wp-outline-background-color-opacity-activated);
-  }
+.button-outline-wp.activated {
+  background-color: rgba($button-wp-outline-background-color-activated, $button-wp-outline-background-color-opacity-activated);
 }
 
 
@@ -246,40 +243,39 @@ $button-wp-fab-border-radius:                             50% !default;
 // --------------------------------------------------
 
 @mixin wp-button-outline($color-name, $color-base, $color-contrast) {
+  $fg-color: color-shade($color-base, 5%);
 
-  .button-outline-#{$color-name} {
-    $fg-color: color-shade($color-base, 5%);
+  .button-outline-wp-#{$color-name} {
     border-color: $fg-color;
     color: $fg-color;
     background-color: $button-wp-outline-background-color;
-
-    &:hover:not(.disable-hover) {
-      border-color: $fg-color;
-      background-color: $button-wp-clear-background-color-hover;
-    }
-
-    &.activated {
-      background-color: rgba($fg-color, $button-wp-outline-background-color-opacity-activated);
-    }
   }
 
+  .button-outline-wp-#{$color-name}:hover:not(.disable-hover) {
+    border-color: $fg-color;
+    background-color: $button-wp-clear-background-color-hover;
+  }
+
+  .button-outline-wp-#{$color-name}.activated {
+    background-color: rgba($fg-color, $button-wp-outline-background-color-opacity-activated);
+  }
 }
 
 
 // Windows Clear Button
 // --------------------------------------------------
 
-.button-clear {
+.button-clear-wp {
   color: $button-wp-clear-text-color;
   background-color: $button-wp-clear-background-color;
+}
 
-  &.activated {
-    background-color: $button-wp-clear-background-color-activated;
-  }
+.button-clear-wp.activated {
+  background-color: $button-wp-clear-background-color-activated;
+}
 
-  &:hover:not(.disable-hover) {
-    background-color: $button-wp-clear-background-color-hover;
-  }
+.button-clear-wp:hover:not(.disable-hover) {
+  background-color: $button-wp-clear-background-color-hover;
 }
 
 
@@ -287,19 +283,19 @@ $button-wp-fab-border-radius:                             50% !default;
 // --------------------------------------------------
 
 @mixin wp-button-clear($color-name, $color-base, $color-contrast) {
+  $fg-color: $color-base;
 
-  .button-clear-#{$color-name} {
-    $fg-color: $color-base;
+  .button-clear-wp-#{$color-name} {
     color: $fg-color;
     background-color: $button-wp-clear-background-color;
+  }
 
-    &.activated {
-      background-color: $button-wp-clear-background-color-activated;
-    }
+  .button-clear-wp-#{$color-name}.activated {
+    background-color: $button-wp-clear-background-color-activated;
+  }
 
-    &:hover:not(.disable-hover) {
-      color: $fg-color;
-    }
+  .button-clear-wp-#{$color-name}:hover:not(.disable-hover) {
+    color: $fg-color;
   }
 }
 
@@ -307,7 +303,7 @@ $button-wp-fab-border-radius:                             50% !default;
 // Windows Round Button
 // --------------------------------------------------
 
-.button-round {
+.button-round-wp {
   padding: $button-wp-round-padding;
 
   border-radius: $button-wp-round-border-radius;
@@ -317,18 +313,14 @@ $button-wp-fab-border-radius:                             50% !default;
 // Windows FAB Button
 // --------------------------------------------------
 
-.button-fab {
+.button-fab-wp {
   border-radius: $button-wp-fab-border-radius;
 }
 
-[icon-only] {
+.button-wp [icon-only] {
   padding: 0;
 }
 
-ion-button-effect {
-  // wp does not use the button effect
-  display: none;
-}
 
 // Generate Windows Button Colors
 // --------------------------------------------------
@@ -338,10 +330,3 @@ ion-button-effect {
   @include wp-button-outline($color-name, $color-base, $color-contrast);
   @include wp-button-clear($color-name, $color-base, $color-contrast);
 }
-
-
-// Core Button Overrides
-// --------------------------------------------------
-
-@import "./button-fab";
-@import "./button-icon";
diff --git a/src/components/card/card.ios.scss b/src/components/card/card.ios.scss
index 0b1fab269f..aa497a6637 100644
--- a/src/components/card/card.ios.scss
+++ b/src/components/card/card.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./card";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Card
 // --------------------------------------------------
@@ -35,7 +34,7 @@ $card-ios-header-padding:              16px !default;
 $card-ios-header-color:                #333 !default;
 
 
-ion-card {
+.card-ios {
   margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;
 
   width: calc(100% - #{($card-ios-margin-right + $card-ios-margin-left)});
@@ -45,89 +44,89 @@ ion-card {
 
   background: $card-ios-background-color;
   box-shadow: $card-ios-box-shadow;
-
-  ion-list {
-    margin-bottom: 0;
-  }
-
-  > .item:last-child,
-  > .item-wrapper:last-child .item {
-    border-bottom: 0;
-  }
-
-  .item .item-inner {
-    border: 0;
-  }
-
-  ion-card-content {
-    padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
-
-    font-size: $card-ios-font-size;
-    line-height: 1.4;
-  }
-
-  ion-card-header {
-    padding: $card-ios-header-padding;
-
-    font-size: $card-ios-header-font-size;
-    font-weight: $card-ios-header-font-weight;
-    color: $card-ios-header-color;
-  }
-
-  ion-card-header + ion-card-content,
-  .item + ion-card-content {
-    padding-top: 0;
-  }
-
-  ion-note[item-left],
-  ion-note[item-right], {
-    font-size: 1.3rem;
-  }
-
-  ion-card-title {
-    display: block;
-
-    margin: $card-ios-title-margin;
-    padding: $card-ios-title-padding;
-
-    font-size: $card-ios-title-font-size;
-    line-height: 1.2;
-    color: $card-ios-title-text-color;
-  }
-
-  h1 {
-    margin: 0 0 2px;
-
-    font-size: 2.4rem;
-    font-weight: normal;
-  }
-
-  h2 {
-    margin: 2px 0;
-
-    font-size: 1.6rem;
-    font-weight: normal;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 2px 0;
-
-    font-size: 1.4rem;
-    font-weight: normal;
-  }
-
-  p {
-    margin: 0 0 2px;
-
-    font-size: 1.4rem;
-    color: $card-ios-text-color;
-  }
-
 }
 
-ion-card + ion-card {
+.card-ios ion-list {
+  margin-bottom: 0;
+}
+
+.card-ios > .item:last-child,
+.card-ios > .item:last-child .item-inner,
+.card-ios > .item-wrapper:last-child .item {
+  border-bottom: 0;
+}
+
+.card-ios .item-ios.item-block .item-inner {
+  border: 0;
+}
+
+.card-ios ion-card-content {
+  padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
+
+  font-size: $card-ios-font-size;
+  line-height: 1.4;
+}
+
+.card-ios ion-card-header {
+  padding: $card-ios-header-padding;
+
+  font-size: $card-ios-header-font-size;
+  font-weight: $card-ios-header-font-weight;
+  color: $card-ios-header-color;
+}
+
+.card-ios ion-card-header + ion-card-content,
+.card-ios .item + ion-card-content {
+  padding-top: 0;
+}
+
+.card-ios ion-note[item-left],
+.card-ios ion-note[item-right] {
+  font-size: 1.3rem;
+}
+
+.card-ios ion-card-title {
+  display: block;
+
+  margin: $card-ios-title-margin;
+  padding: $card-ios-title-padding;
+
+  font-size: $card-ios-title-font-size;
+  line-height: 1.2;
+  color: $card-ios-title-text-color;
+}
+
+.card-ios h1 {
+  margin: 0 0 2px;
+
+  font-size: 2.4rem;
+  font-weight: normal;
+}
+
+.card-ios h2 {
+  margin: 2px 0;
+
+  font-size: 1.6rem;
+  font-weight: normal;
+}
+
+.card-ios h3,
+.card-ios h4,
+.card-ios h5,
+.card-ios h6 {
+  margin: 2px 0;
+
+  font-size: 1.4rem;
+  font-weight: normal;
+}
+
+.card-ios p {
+  margin: 0 0 2px;
+
+  font-size: 1.4rem;
+  color: $card-ios-text-color;
+}
+
+.card-ios + ion-card {
   margin-top: 0;
 }
diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss
index f4acce29a7..e9d450fe26 100644
--- a/src/components/card/card.md.scss
+++ b/src/components/card/card.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./card";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Card
 // --------------------------------------------------
@@ -37,7 +36,7 @@ $card-md-header-padding:              16px !default;
 $card-md-header-color:                #222 !default;
 
 
-ion-card {
+.card-md {
   margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left;
 
   width: calc(100% - #{($card-md-margin-right + $card-md-margin-left)});
@@ -47,93 +46,93 @@ ion-card {
 
   background: $card-md-background-color;
   box-shadow: $card-md-box-shadow;
-
-  ion-list {
-    margin-bottom: 0;
-  }
-
-  > .item:last-child,
-  > .item-wrapper:last-child .item {
-    border-bottom: 0;
-  }
-
-  .item .item-inner {
-    border: 0;
-  }
-
-  ion-card-content {
-    padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left;
-
-    font-size: $card-md-font-size;
-    line-height: $card-md-line-height;
-  }
-
-  ion-card-header {
-    padding: $card-md-header-padding;
-
-    font-size: $card-md-header-font-size;
-    color: $card-md-header-color;
-  }
-
-  ion-card-header + ion-card-content,
-  .item + ion-card-content {
-    padding-top: 0;
-  }
-
-  ion-note[item-left],
-  ion-note[item-right], {
-    font-size: 1.3rem;
-  }
-
-  ion-card-title {
-    display: block;
-
-    margin: $card-md-title-margin;
-    padding: $card-md-title-padding;
-
-    font-size: $card-md-title-font-size;
-    line-height: 1.2;
-    color: $card-md-title-text-color;
-  }
-
-  h1 {
-    margin: 0 0 2px;
-
-    font-size: 2.4rem;
-    font-weight: normal;
-    color: $card-md-text-color;
-  }
-
-  h2 {
-    margin: 2px 0;
-
-    font-size: 1.6rem;
-    font-weight: normal;
-    color: $card-md-text-color;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 2px 0;
-
-    font-size: 1.4rem;
-    font-weight: normal;
-    color: $card-md-text-color;
-  }
-
-  p {
-    margin: 0 0 2px;
-
-    font-size: 1.4rem;
-    font-weight: normal;
-    line-height: 1.5;
-    color: $card-md-text-color;
-  }
-
 }
 
-ion-card + ion-card {
+.card-md ion-list {
+  margin-bottom: 0;
+}
+
+.card-md > .item:last-child,
+.card-md > .item:last-child .item-inner,
+.card-md > .item-wrapper:last-child .item {
+  border-bottom: 0;
+}
+
+.card-md .item-md.item-block .item-inner {
+  border: 0;
+}
+
+.card-md ion-card-content {
+  padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left;
+
+  font-size: $card-md-font-size;
+  line-height: $card-md-line-height;
+}
+
+.card-md ion-card-header {
+  padding: $card-md-header-padding;
+
+  font-size: $card-md-header-font-size;
+  color: $card-md-header-color;
+}
+
+.card-md ion-card-header + ion-card-content,
+.card-md .item + ion-card-content {
+  padding-top: 0;
+}
+
+.card-md ion-note[item-left],
+.card-md ion-note[item-right] {
+  font-size: 1.3rem;
+}
+
+.card-md ion-card-title {
+  display: block;
+
+  margin: $card-md-title-margin;
+  padding: $card-md-title-padding;
+
+  font-size: $card-md-title-font-size;
+  line-height: 1.2;
+  color: $card-md-title-text-color;
+}
+
+.card-md h1 {
+  margin: 0 0 2px;
+
+  font-size: 2.4rem;
+  font-weight: normal;
+  color: $card-md-text-color;
+}
+
+.card-md h2 {
+  margin: 2px 0;
+
+  font-size: 1.6rem;
+  font-weight: normal;
+  color: $card-md-text-color;
+}
+
+.card-md h3,
+.card-md h4,
+.card-md h5,
+.card-md h6 {
+  margin: 2px 0;
+
+  font-size: 1.4rem;
+  font-weight: normal;
+  color: $card-md-text-color;
+}
+
+.card-md p {
+  margin: 0 0 2px;
+
+  font-size: 1.4rem;
+  font-weight: normal;
+  line-height: 1.5;
+  color: $card-md-text-color;
+}
+
+.card-md + ion-card {
   margin-top: 0;
 }
diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss
index 771d3a1e05..dd9f5a9c15 100644
--- a/src/components/card/card.wp.scss
+++ b/src/components/card/card.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./card";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Card
 // --------------------------------------------------
@@ -38,7 +37,7 @@ $card-wp-header-padding:              16px !default;
 $card-wp-header-color:                #222 !default;
 
 
-ion-card {
+.card-wp {
   margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left;
 
   width: calc(100% - #{($card-wp-margin-right + $card-wp-margin-left)});
@@ -48,93 +47,93 @@ ion-card {
 
   background: $card-wp-background-color;
   box-shadow: $card-wp-box-shadow;
-
-  ion-list {
-    margin-bottom: 0;
-  }
-
-  > .item:last-child,
-  > .item-wrapper:last-child .item {
-    border-bottom: 0;
-  }
-
-  .item .item-inner {
-    border: 0;
-  }
-
-  ion-card-content {
-    padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left;
-
-    font-size: $card-wp-font-size;
-    line-height: $card-wp-line-height;
-  }
-
-  ion-card-header {
-    padding: $card-wp-header-padding;
-
-    font-size: $card-wp-header-font-size;
-    color: $card-wp-header-color;
-  }
-
-  ion-card-header + ion-card-content,
-  .item + ion-card-content {
-    padding-top: 0;
-  }
-
-  ion-note[item-left],
-  ion-note[item-right], {
-    font-size: 1.3rem;
-  }
-
-  ion-card-title {
-    display: block;
-
-    margin: $card-wp-title-margin;
-    padding: $card-wp-title-padding;
-
-    font-size: $card-wp-title-font-size;
-    line-height: 1.2;
-    color: $card-wp-title-text-color;
-  }
-
-  h1 {
-    margin: 0 0 2px;
-
-    font-size: 2.4rem;
-    font-weight: normal;
-    color: $card-wp-text-color;
-  }
-
-  h2 {
-    margin: 2px 0;
-
-    font-size: 1.6rem;
-    font-weight: normal;
-    color: $card-wp-text-color;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 2px 0;
-
-    font-size: 1.4rem;
-    font-weight: normal;
-    color: $card-wp-text-color;
-  }
-
-  p {
-    margin: 0 0 2px;
-
-    font-size: 1.4rem;
-    font-weight: normal;
-    line-height: 1.5;
-    color: $card-wp-text-color;
-  }
-
 }
 
-ion-card + ion-card {
+.card-wp ion-list {
+  margin-bottom: 0;
+}
+
+.card-wp > .item:last-child,
+.card-wp > .item:last-child .item-inner,
+.card-wp > .item-wrapper:last-child .item {
+  border-bottom: 0;
+}
+
+.card-wp .item-wp.item-block .item-inner {
+  border: 0;
+}
+
+.card-wp ion-card-content {
+  padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left;
+
+  font-size: $card-wp-font-size;
+  line-height: $card-wp-line-height;
+}
+
+.card-wp ion-card-header {
+  padding: $card-wp-header-padding;
+
+  font-size: $card-wp-header-font-size;
+  color: $card-wp-header-color;
+}
+
+.card-wp ion-card-header + ion-card-content,
+.card-wp .item + ion-card-content {
+  padding-top: 0;
+}
+
+.card-wp ion-note[item-left],
+.card-wp ion-note[item-right] {
+  font-size: 1.3rem;
+}
+
+.card-wp ion-card-title {
+  display: block;
+
+  margin: $card-wp-title-margin;
+  padding: $card-wp-title-padding;
+
+  font-size: $card-wp-title-font-size;
+  line-height: 1.2;
+  color: $card-wp-title-text-color;
+}
+
+.card-wp h1 {
+  margin: 0 0 2px;
+
+  font-size: 2.4rem;
+  font-weight: normal;
+  color: $card-wp-text-color;
+}
+
+.card-wp h2 {
+  margin: 2px 0;
+
+  font-size: 1.6rem;
+  font-weight: normal;
+  color: $card-wp-text-color;
+}
+
+.card-wp h3,
+.card-wp h4,
+.card-wp h5,
+.card-wp h6 {
+  margin: 2px 0;
+
+  font-size: 1.4rem;
+  font-weight: normal;
+  color: $card-wp-text-color;
+}
+
+.card-wp p {
+  margin: 0 0 2px;
+
+  font-size: 1.4rem;
+  font-weight: normal;
+  line-height: 1.5;
+  color: $card-wp-text-color;
+}
+
+.card-wp + ion-card {
   margin-top: 0;
 }
diff --git a/src/components/checkbox/checkbox.ios.scss b/src/components/checkbox/checkbox.ios.scss
index afdc0bb13b..65fe62d4ed 100644
--- a/src/components/checkbox/checkbox.ios.scss
+++ b/src/components/checkbox/checkbox.ios.scss
@@ -1,4 +1,4 @@
-@import "../../globals.ios";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Checkbox
 // --------------------------------------------------
@@ -22,7 +22,8 @@ $checkbox-ios-disabled-opacity:           .3 !default;
 $checkbox-ios-item-left-margin:           $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
 $checkbox-ios-item-right-margin:          10px 8px 9px 0 !default;
 
-ion-checkbox {
+
+.checkbox-ios {
   position: relative;
   display: inline-block;
 }
@@ -31,7 +32,7 @@ ion-checkbox {
 // iOS Checkbox Outer Circle: Unchecked
 // -----------------------------------------
 
-.checkbox-icon {
+.checkbox-ios .checkbox-icon {
   position: relative;
 
   width: $checkbox-ios-icon-size;
@@ -48,7 +49,7 @@ ion-checkbox {
 // iOS Checkbox Outer Circle: Checked
 // -----------------------------------------
 
-.checkbox-checked {
+.checkbox-ios .checkbox-checked {
   border-color: $checkbox-ios-icon-border-color-on;
   background-color: $checkbox-ios-background-color-on;
 }
@@ -57,7 +58,7 @@ ion-checkbox {
 // iOS Checkbox Inner Checkmark: Checked
 // -----------------------------------------
 
-.checkbox-checked .checkbox-inner {
+.checkbox-ios .checkbox-checked .checkbox-inner {
   position: absolute;
   top: 4px;
   left: 7px;
@@ -77,8 +78,8 @@ ion-checkbox {
 // iOS Checkbox: Disabled
 // -----------------------------------------
 
-.checkbox-disabled,
-.item-checkbox-disabled ion-label {
+.checkbox-ios.checkbox-disabled,
+.item-ios.item-checkbox-disabled ion-label {
   opacity: $checkbox-ios-disabled-opacity;
 
   pointer-events: none;
@@ -88,15 +89,15 @@ ion-checkbox {
 // iOS Checkbox Within An Item
 // -----------------------------------------
 
-.item ion-checkbox {
+.item.item-ios .checkbox-ios {
   position: static;
   display: block;
 
   margin: $checkbox-ios-item-left-margin;
+}
 
-  &[item-right] {
-    margin: $checkbox-ios-item-right-margin;
-  }
+.item.item-ios .checkbox-ios[item-right] {
+  margin: $checkbox-ios-item-right-margin;
 }
 
 
@@ -105,13 +106,13 @@ ion-checkbox {
 
 @mixin checkbox-theme-ios($color-name, $color-base, $color-contrast) {
 
-  .checkbox-#{$color-name} .checkbox-checked {
+  .checkbox-ios-#{$color-name} .checkbox-checked {
     border-color: $color-base;
     background-color: $color-base;
+  }
 
-    .checkbox-inner {
-      border-color: $color-contrast;
-    }
+  .checkbox-ios-#{$color-name} .checkbox-checked .checkbox-inner {
+    border-color: $color-contrast;
   }
 
 }
diff --git a/src/components/checkbox/checkbox.md.scss b/src/components/checkbox/checkbox.md.scss
index 52c20c473f..9f048c700a 100644
--- a/src/components/checkbox/checkbox.md.scss
+++ b/src/components/checkbox/checkbox.md.scss
@@ -1,4 +1,4 @@
-@import "../../globals.md";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Checkbox
 // --------------------------------------------------
@@ -31,7 +31,7 @@ $checkbox-md-item-left-margin:           $item-md-padding-media-top 36px $item-m
 $checkbox-md-item-right-margin:          11px 10px 10px 0 !default;
 
 
-ion-checkbox {
+.checkbox-md {
   position: relative;
   display: inline-block;
 }
@@ -40,7 +40,7 @@ ion-checkbox {
 // Material Design Checkbox Outer Square: Unchecked
 // -----------------------------------------
 
-.checkbox-icon {
+.checkbox-md .checkbox-icon {
   position: relative;
 
   width: $checkbox-md-icon-size;
@@ -61,7 +61,7 @@ ion-checkbox {
 // Material Design Checkbox Outer Square: Checked
 // -----------------------------------------
 
-.checkbox-checked {
+.checkbox-md .checkbox-checked {
   border-color: $checkbox-md-icon-border-color-on;
   background-color: $checkbox-md-icon-background-color-on;
 }
@@ -70,7 +70,7 @@ ion-checkbox {
 // Material Design Checkbox Inner Checkmark: Checked
 // -----------------------------------------
 
-.checkbox-checked .checkbox-inner {
+.checkbox-md .checkbox-checked .checkbox-inner {
   position: absolute;
   top: 0;
   left: 4px;
@@ -90,8 +90,8 @@ ion-checkbox {
 // Material Design Checkbox: Disabled
 // -----------------------------------------
 
-.checkbox-disabled,
-.item-checkbox-disabled ion-label {
+.checkbox-md.checkbox-disabled,
+.item-md.item-checkbox-disabled ion-label {
   opacity: $checkbox-md-disabled-opacity;
 
   pointer-events: none;
@@ -101,18 +101,18 @@ ion-checkbox {
 // Material Design Checkbox Within An Item
 // -----------------------------------------
 
-.item ion-checkbox {
+.item.item-md .checkbox-md {
   position: static;
   display: block;
 
   margin: $checkbox-md-item-left-margin;
-
-  &[item-right] {
-    margin: $checkbox-md-item-right-margin;
-  }
 }
 
-ion-checkbox + .item-inner ion-label {
+.item.item-md .checkbox-md[item-right] {
+  margin: $checkbox-md-item-right-margin;
+}
+
+.checkbox-md + .item-inner ion-label {
   margin-left: 0;
 }
 
@@ -122,13 +122,13 @@ ion-checkbox + .item-inner ion-label {
 
 @mixin checkbox-theme-md($color-name, $color-base, $color-contrast) {
 
-  .checkbox-#{$color-name} .checkbox-checked {
+  .checkbox-md-#{$color-name} .checkbox-checked {
     border-color: $color-base;
     background-color: $color-base;
+  }
 
-    .checkbox-inner {
-      border-color: $color-contrast;
-    }
+  .checkbox-md-#{$color-name} .checkbox-checked .checkbox-inner {
+    border-color: $color-contrast;
   }
 
 }
diff --git a/src/components/checkbox/checkbox.wp.scss b/src/components/checkbox/checkbox.wp.scss
index b3d28adb5a..3612293bc7 100644
--- a/src/components/checkbox/checkbox.wp.scss
+++ b/src/components/checkbox/checkbox.wp.scss
@@ -1,4 +1,4 @@
-@import "../../globals.wp";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Checkbox
 // --------------------------------------------------
@@ -28,7 +28,7 @@ $checkbox-wp-item-left-margin:           $item-wp-padding-media-top $item-wp-pad
 $checkbox-wp-item-right-margin:          11px 10px 10px 0 !default;
 
 
-ion-checkbox {
+.checkbox-wp {
   position: relative;
   display: inline-block;
 }
@@ -37,7 +37,7 @@ ion-checkbox {
 // Windows Checkbox Outer Square: Unchecked
 // -----------------------------------------
 
-.checkbox-icon {
+.checkbox-wp .checkbox-icon {
   position: relative;
 
   width: $checkbox-wp-icon-size;
@@ -54,7 +54,7 @@ ion-checkbox {
 // Windows Checkbox Outer Square: Checked
 // -----------------------------------------
 
-.checkbox-checked {
+.checkbox-wp .checkbox-checked {
   border-color: $checkbox-wp-icon-border-color-on;
   background-color: $checkbox-wp-icon-background-color-on;
 }
@@ -63,7 +63,7 @@ ion-checkbox {
 // Windows Checkbox Inner Checkmark: Checked
 // -----------------------------------------
 
-.checkbox-checked .checkbox-inner {
+.checkbox-wp .checkbox-checked .checkbox-inner {
   position: absolute;
   top: -2px;
   left: 3px;
@@ -83,8 +83,8 @@ ion-checkbox {
 // Windows Checkbox: Disabled
 // -----------------------------------------
 
-.checkbox-disabled,
-.item-checkbox-disabled ion-label {
+.checkbox-wp.checkbox-disabled,
+.item-wp.item-checkbox-disabled ion-label {
   opacity: $checkbox-wp-disabled-opacity;
 
   pointer-events: none;
@@ -94,18 +94,18 @@ ion-checkbox {
 // Windows Checkbox Within An Item
 // -----------------------------------------
 
-.item ion-checkbox {
+.item.item-wp .checkbox-wp {
   position: static;
   display: block;
 
   margin: $checkbox-wp-item-left-margin;
-
-  &[item-right] {
-    margin: $checkbox-wp-item-right-margin;
-  }
 }
 
-ion-checkbox + .item-inner ion-label {
+.item.item-wp .checkbox-wp[item-right] {
+  margin: $checkbox-wp-item-right-margin;
+}
+
+.checkbox-wp + .item-inner ion-label {
   margin-left: 0;
 }
 
@@ -115,13 +115,13 @@ ion-checkbox + .item-inner ion-label {
 
 @mixin checkbox-theme-wp($color-name, $color-base, $color-contrast) {
 
-  .checkbox-#{$color-name} .checkbox-checked {
+  .checkbox-wp-#{$color-name} .checkbox-checked {
     border-color: $color-base;
     background-color: $color-base;
+  }
 
-    .checkbox-inner {
-      border-color: $color-contrast;
-    }
+  .checkbox-wp-#{$color-name} .checkbox-checked .checkbox-inner {
+    border-color: $color-contrast;
   }
 
 }
diff --git a/src/components/chip/chip.ios.scss b/src/components/chip/chip.ios.scss
index 8804a29b4e..40f81caa0f 100644
--- a/src/components/chip/chip.ios.scss
+++ b/src/components/chip/chip.ios.scss
@@ -1,4 +1,3 @@
-@import "./chip";
 
 // iOS Chip
 // --------------------------------------------------
@@ -31,7 +30,7 @@ $chip-ios-icon-background-color:      color($colors-ios, primary) !default;
 $chip-ios-icon-text-color:            color-contrast($colors-ios, $chip-ios-icon-background-color) !default;
 
 
-ion-chip {
+.chip-ios {
   margin: $chip-ios-margin;
 
   height: $chip-ios-height;
@@ -41,24 +40,25 @@ ion-chip {
   line-height: $chip-ios-height;
   color: $chip-ios-text-color;
   background: $chip-ios-background-color;
-
-  > ion-label {
-    margin: $chip-ios-label-margin;
-  }
-
-  > ion-icon {
-    color: $chip-ios-icon-text-color;
-    background-color: $chip-ios-icon-background-color;
-  }
 }
 
+.chip-ios > ion-label {
+  margin: $chip-ios-label-margin;
+}
+
+.chip-ios > ion-icon {
+  color: $chip-ios-icon-text-color;
+  background-color: $chip-ios-icon-background-color;
+}
+
+
 // Generate iOS Chip Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
-  .chip-#{$color-name},
-  ion-chip .icon-#{$color-name} {
+  .chip-ios-#{$color-name},
+  .chip-ios .icon-ios-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
   }
diff --git a/src/components/chip/chip.md.scss b/src/components/chip/chip.md.scss
index b383639981..566d23d39c 100644
--- a/src/components/chip/chip.md.scss
+++ b/src/components/chip/chip.md.scss
@@ -1,4 +1,3 @@
-@import "./chip";
 
 // Material Design Chip
 // --------------------------------------------------
@@ -31,7 +30,7 @@ $chip-md-icon-background-color:      color($colors-md, primary) !default;
 $chip-md-icon-text-color:            color-contrast($colors-md, $chip-md-icon-background-color) !default;
 
 
-ion-chip {
+.chip-md {
   margin: $chip-md-margin;
 
   height: $chip-md-height;
@@ -41,24 +40,25 @@ ion-chip {
   line-height: $chip-md-height;
   color: $chip-md-text-color;
   background: $chip-md-background-color;
-
-  > ion-label {
-    margin: $chip-md-label-margin;
-  }
-
-  > ion-icon {
-    color: $chip-md-icon-text-color;
-    background-color: $chip-md-icon-background-color;
-  }
 }
 
+.chip-md > ion-label {
+  margin: $chip-md-label-margin;
+}
+
+.chip-md > ion-icon {
+  color: $chip-md-icon-text-color;
+  background-color: $chip-md-icon-background-color;
+}
+
+
 // Generate Material Design Chip Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  .chip-#{$color-name},
-  ion-chip .icon-#{$color-name} {
+  .chip-md-#{$color-name},
+  .chip-md .icon-md-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
   }
diff --git a/src/components/chip/chip.wp.scss b/src/components/chip/chip.wp.scss
index 66f073a36d..412195325f 100644
--- a/src/components/chip/chip.wp.scss
+++ b/src/components/chip/chip.wp.scss
@@ -1,4 +1,3 @@
-@import "./chip";
 
 // Windows Chip
 // --------------------------------------------------
@@ -31,7 +30,7 @@ $chip-wp-icon-background-color:      color($colors-wp, primary) !default;
 $chip-wp-icon-text-color:            color-contrast($colors-wp, $chip-wp-icon-background-color) !default;
 
 
-ion-chip {
+.chip-wp {
   margin: $chip-wp-margin;
 
   height: $chip-wp-height;
@@ -41,28 +40,29 @@ ion-chip {
   line-height: $chip-wp-height;
   color: $chip-wp-text-color;
   background: $chip-wp-background-color;
-
-  > ion-label {
-    margin: $chip-wp-label-margin;
-  }
-
-  > ion-icon {
-    color: $chip-wp-icon-text-color;
-    background-color: $chip-wp-icon-background-color;
-  }
-
-  .button {
-    border: 0;
-  }
 }
 
+.chip-wp > ion-label {
+  margin: $chip-wp-label-margin;
+}
+
+.chip-wp > ion-icon {
+  color: $chip-wp-icon-text-color;
+  background-color: $chip-wp-icon-background-color;
+}
+
+.chip-wp .button {
+  border: 0;
+}
+
+
 // Generate Windows Chip Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
-  .chip-#{$color-name},
-  ion-chip .icon-#{$color-name} {
+  .chip-wp-#{$color-name},
+  .chip-wp .icon-wp-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
   }
diff --git a/src/components/content/content.ios.scss b/src/components/content/content.ios.scss
index fda6490032..4c0f42dfbc 100644
--- a/src/components/content/content.ios.scss
+++ b/src/components/content/content.ios.scss
@@ -1,23 +1,28 @@
-@import "../../globals.ios";
-@import "./content";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Content
 // --------------------------------------------------
 
 $content-ios-outer-background:          #efeff4 !default;
-$content-ios-padding:                   $content-padding !default;
-$content-ios-margin:                    $content-margin !default;
 $content-ios-transition-background:     #000 !default;
 
-ion-content {
+
+.content-ios {
   background-color: $background-ios-color;
 }
 
-.outer-content {
+.content-ios.outer-content {
   background: $content-ios-outer-background;
 }
 
-ion-page.show-page ~ .nav-decor {
+.content-ios hr {
+  height: $hairlines-width;
+
+  color: $text-ios-color;
+  background-color: rgba(0, 0, 0, .12);
+}
+
+.ios .ion-page.show-page ~ .nav-decor {
   // when ios pages transition, the leaving page grays out
   // this is the black square behind all pages so they gray out
   position: absolute;
@@ -50,22 +55,20 @@ ion-page.show-page ~ .nav-decor {
 // iOS Content Scroll
 // --------------------------------------------------
 
-ion-content:not([no-bounce]) > scroll-content {
-  &::before,
-  &::after {
-    position: absolute;
+.content-ios:not([no-bounce]) > .scroll-content::before,
+.content-ios:not([no-bounce]) > .scroll-content::after {
+  position: absolute;
 
-    width: 1px;
-    height: 1px;
+  width: 1px;
+  height: 1px;
 
-    content: "";
-  }
-
-  &::before {
-    bottom: -1px;
-  }
-
-  &::after {
-    top: -1px;
-  }
+  content: "";
+}
+
+.content-ios:not([no-bounce]) > .scroll-content::before {
+  bottom: -1px;
+}
+
+.content-ios:not([no-bounce]) > .scroll-content::after {
+  top: -1px;
 }
diff --git a/src/components/content/content.md.scss b/src/components/content/content.md.scss
index 283fec222f..00a3e506fe 100644
--- a/src/components/content/content.md.scss
+++ b/src/components/content/content.md.scss
@@ -1,17 +1,17 @@
-@import "../../globals.md";
-@import "./content";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Content
 // --------------------------------------------------
 
-$content-md-padding:              $content-padding !default;
-$content-md-margin:               $content-margin !default;
-
-
-ion-content {
+.content-md {
+  color: $text-md-color;
   background-color: $background-md-color;
 }
 
+.content-md hr {
+  background-color: rgba(0, 0, 0, .08);
+}
+
 
 // Material Design Content Padding
 // --------------------------------------------------
diff --git a/src/components/content/content.wp.scss b/src/components/content/content.wp.scss
index 633b33a0b5..179efd9114 100644
--- a/src/components/content/content.wp.scss
+++ b/src/components/content/content.wp.scss
@@ -1,17 +1,17 @@
-@import "../../globals.wp";
-@import "./content";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Content
 // --------------------------------------------------
 
-$content-wp-padding:              $content-padding !default;
-$content-wp-margin:               $content-margin !default;
-
-
-ion-content {
+.content-wp {
+  color: $text-wp-color;
   background-color: $background-wp-color;
 }
 
+.content-wp hr {
+  background-color: rgba(0, 0, 0, .08);
+}
+
 
 // Windows Content Padding
 // --------------------------------------------------
diff --git a/src/components/datetime/datetime.ios.scss b/src/components/datetime/datetime.ios.scss
index a51b089746..eb38a27825 100644
--- a/src/components/datetime/datetime.ios.scss
+++ b/src/components/datetime/datetime.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./datetime";
+@import "../../themes/ionic.globals.ios";
 
 // iOS DateTime
 // --------------------------------------------------
@@ -10,6 +9,6 @@ $datetime-ios-padding-bottom:      $item-ios-padding-bottom !default;
 $datetime-ios-padding-left:        $item-ios-padding-left !default;
 
 
-ion-datetime {
+.datetime-ios {
   padding: $datetime-ios-padding-top $datetime-ios-padding-right $datetime-ios-padding-bottom $datetime-ios-padding-left;
 }
diff --git a/src/components/datetime/datetime.md.scss b/src/components/datetime/datetime.md.scss
index ff56545c26..590599d6e5 100644
--- a/src/components/datetime/datetime.md.scss
+++ b/src/components/datetime/datetime.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./datetime";
+@import "../../themes/ionic.globals.md";
 
 // Material Design DateTime
 // --------------------------------------------------
@@ -10,6 +9,6 @@ $datetime-md-padding-bottom:      $item-md-padding-bottom !default;
 $datetime-md-padding-left:        $item-md-padding-left !default;
 
 
-ion-datetime {
+.datetime-md {
   padding: $datetime-md-padding-top $datetime-md-padding-right $datetime-md-padding-bottom $datetime-md-padding-left;
 }
diff --git a/src/components/datetime/datetime.wp.scss b/src/components/datetime/datetime.wp.scss
index 89469c2889..de7c0ed9d0 100644
--- a/src/components/datetime/datetime.wp.scss
+++ b/src/components/datetime/datetime.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./datetime";
+@import "../../themes/ionic.globals.wp";
 
 // Windows DateTime
 // --------------------------------------------------
@@ -14,13 +13,13 @@ $datetime-wp-padding-left:        $item-wp-padding-left !default;
 $datetime-wp-border-width:        2px !default;
 $datetime-wp-border-color:        $input-wp-border-color !default;
 
-ion-datetime {
+.datetime-wp {
   padding: $datetime-wp-padding-top $datetime-wp-padding-right $datetime-wp-padding-bottom $datetime-wp-padding-left;
 
   min-width: $datetime-wp-min-width;
 }
 
-.datetime-text {
+.datetime-wp .datetime-text {
   padding: 0 8px;
 
   min-height: 3.4rem;
@@ -29,6 +28,6 @@ ion-datetime {
   line-height: 3rem;
 }
 
-.item-datetime ion-label[floating] {
+.item-datetime .datetime-wp ion-label[floating] {
   transform: translate3d(8px, 41px, 0);
 }
diff --git a/src/components/icon/icon.ios.scss b/src/components/icon/icon.ios.scss
index 3a26ecc3e1..87a75ceffa 100644
--- a/src/components/icon/icon.ios.scss
+++ b/src/components/icon/icon.ios.scss
@@ -1,4 +1,3 @@
-@import "./icon";
 
 // iOS Icon
 // --------------------------------------------------
@@ -9,7 +8,7 @@
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
-  .icon-#{$color-name} {
+  .icon-ios-#{$color-name} {
     color: $color-base;
   }
 
diff --git a/src/components/icon/icon.md.scss b/src/components/icon/icon.md.scss
index 6fb208289b..fe3f2e4c0e 100644
--- a/src/components/icon/icon.md.scss
+++ b/src/components/icon/icon.md.scss
@@ -1,4 +1,3 @@
-@import "./icon";
 
 // Material Design Icon
 // --------------------------------------------------
@@ -9,7 +8,7 @@
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  .icon-#{$color-name} {
+  .icon-md-#{$color-name} {
     color: $color-base;
   }
 
diff --git a/src/components/icon/icon.wp.scss b/src/components/icon/icon.wp.scss
index 72b6be2552..2ecd0d3ee8 100644
--- a/src/components/icon/icon.wp.scss
+++ b/src/components/icon/icon.wp.scss
@@ -1,4 +1,3 @@
-@import "./icon";
 
 // Windows Icon
 // --------------------------------------------------
@@ -9,7 +8,7 @@
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
-  .icon-#{$color-name} {
+  .icon-wp-#{$color-name} {
     color: $color-base;
   }
 
diff --git a/src/components/input/input.ios.scss b/src/components/input/input.ios.scss
index 58d180d6dc..85753e7201 100644
--- a/src/components/input/input.ios.scss
+++ b/src/components/input/input.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./input";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Input
 // --------------------------------------------------
@@ -28,7 +27,7 @@ $text-input-ios-highlight-color-invalid:   color($colors-ios, danger) !default;
 // iOS Default Input
 // --------------------------------------------------
 
-.text-input {
+.text-input-ios {
   margin: $text-input-ios-margin-top $text-input-ios-margin-right $text-input-ios-margin-bottom $text-input-ios-margin-left;
   padding: 0;
 
@@ -39,59 +38,12 @@ $text-input-ios-highlight-color-invalid:   color($colors-ios, danger) !default;
 // iOS Inset Input
 // --------------------------------------------------
 
-.inset-input {
+.input-ios .inset-input {
   margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0;
   padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
 }
 
 
-// iOS Stacked & Floating Inputs
-// --------------------------------------------------
-
-.item-label-stacked .text-input,
-.item-label-floating .text-input {
-  margin-top: 8px;
-  margin-bottom: 8px;
-  margin-left: 0;
-
-  width: calc(100% - #{$text-input-ios-margin-right});
-}
-
-.item-label-stacked ion-select,
-.item-label-floating ion-select {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 0;
-}
-
-.item-label-floating .text-input.cloned-input,
-.item-label-stacked .text-input.cloned-input {
-  top: 30px;
-}
-
-
-// iOS Clear Input Icon
-// --------------------------------------------------
-
-ion-input[clearInput] {
-  position: relative;
-
-  .text-input {
-    padding-right: $text-input-ios-input-clear-icon-width;
-  }
-}
-
-.text-input-clear-icon {
-  @include svg-background-image($text-input-ios-input-clear-icon-svg);
-
-  right: ($item-ios-padding-right / 2);
-
-  width: $text-input-ios-input-clear-icon-width;
-
-  background-size: $text-input-ios-input-clear-icon-size;
-}
-
-
 // iOS Highlighted Input
 // --------------------------------------------------
 
@@ -104,13 +56,13 @@ ion-input[clearInput] {
 @if ($text-input-ios-show-focus-highlight) {
   // In order to get a 2px border we need to add an inset
   // box-shadow 1px (this is to avoid the div resizing)
-  .item-input.input-has-focus .item-inner {
+  .item-ios.item-input.input-has-focus .item-inner {
     @include ios-input-highlight($text-input-ios-highlight-color);
   }
 
   // The last item in a list has a border on the item, not the
   // inner item, so add it to the item itself
-  ion-list .item-input.input-has-focus:last-child {
+  .list-ios .item-input.input-has-focus:last-child {
     @include ios-input-highlight($text-input-ios-highlight-color);
 
     .item-inner {
@@ -121,11 +73,11 @@ ion-input[clearInput] {
 
 // Show the valid highlight when it has the .ng-valid class and a value
 @if ($text-input-ios-show-valid-highlight) {
-  .item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
+  .item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
     @include ios-input-highlight($text-input-ios-highlight-color-valid);
   }
 
-  ion-list .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
+  .list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
     @include ios-input-highlight($text-input-ios-highlight-color-valid);
 
     .item-inner {
@@ -136,11 +88,11 @@ ion-input[clearInput] {
 
 // Show the invalid highlight when it has the invalid class and has been touched
 @if ($text-input-ios-show-invalid-highlight) {
-  .item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
+  .item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
     @include ios-input-highlight($text-input-ios-highlight-color-invalid);
   }
 
-  ion-list .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
+  .list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
     @include ios-input-highlight($text-input-ios-highlight-color-invalid);
 
     .item-inner {
@@ -148,3 +100,50 @@ ion-input[clearInput] {
     }
   }
 }
+
+
+// iOS Stacked & Floating Inputs
+// --------------------------------------------------
+
+.item-ios.item-label-stacked .text-input,
+.item-ios.item-label-floating .text-input {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  margin-left: 0;
+
+  width: calc(100% - #{$text-input-ios-margin-right});
+}
+
+.item-label-stacked .select-ios,
+.item-label-floating .select-ios {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 0;
+}
+
+.item-label-floating .text-input-ios.cloned-input,
+.item-label-stacked .text-input-ios.cloned-input {
+  top: 30px;
+}
+
+
+// iOS Clear Input Icon
+// --------------------------------------------------
+
+.input-ios[clearInput] {
+  position: relative;
+}
+
+.input-ios .text-input {
+  padding-right: $text-input-ios-input-clear-icon-width;
+}
+
+.input-ios .text-input-clear-icon {
+  @include svg-background-image($text-input-ios-input-clear-icon-svg);
+
+  right: ($item-ios-padding-right / 2);
+
+  width: $text-input-ios-input-clear-icon-width;
+
+  background-size: $text-input-ios-input-clear-icon-size;
+}
diff --git a/src/components/input/input.md.scss b/src/components/input/input.md.scss
index 32d647e7b6..10f12a1a50 100644
--- a/src/components/input/input.md.scss
+++ b/src/components/input/input.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./input";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Input
 // --------------------------------------------------
@@ -28,7 +27,7 @@ $text-input-md-highlight-color-invalid:     color($colors-md, danger) !default;
 // Material Design Default Input
 // --------------------------------------------------
 
-.text-input {
+.text-input-md {
   margin: $text-input-md-margin-top $text-input-md-margin-right $text-input-md-margin-bottom $text-input-md-margin-left;
   padding: 0;
 
@@ -39,7 +38,7 @@ $text-input-md-highlight-color-invalid:     color($colors-md, danger) !default;
 // Material Design Inset Input
 // --------------------------------------------------
 
-.inset-input {
+.input-md .inset-input {
   margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left;
   padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
 }
@@ -58,13 +57,13 @@ $text-input-md-highlight-color-invalid:     color($colors-md, danger) !default;
 @if ($text-input-md-show-focus-highlight) {
   // In order to get a 2px border we need to add an inset
   // box-shadow 1px (this is to avoid the div resizing)
-  .item-input.input-has-focus .item-inner {
+  .item-md.item-input.input-has-focus .item-inner {
     @include md-input-highlight($text-input-md-highlight-color);
   }
 
   // The last item in a list has a border on the item, not the
   // inner item, so add it to the item itself
-  ion-list .item-input.input-has-focus:last-child {
+  .list-md .item-input.input-has-focus:last-child {
     @include md-input-highlight($text-input-md-highlight-color);
 
     .item-inner {
@@ -75,11 +74,11 @@ $text-input-md-highlight-color-invalid:     color($colors-md, danger) !default;
 
 // Show the valid highlight when it has the .ng-valid class and a value
 @if ($text-input-md-show-valid-highlight) {
-  .item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
+  .item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
     @include md-input-highlight($text-input-md-highlight-color-valid);
   }
 
-  ion-list .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
+  .list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
     @include md-input-highlight($text-input-md-highlight-color-valid);
 
     .item-inner {
@@ -90,11 +89,11 @@ $text-input-md-highlight-color-invalid:     color($colors-md, danger) !default;
 
 // Show the invalid highlight when it has the invalid class and has been touched
 @if ($text-input-md-show-invalid-highlight) {
-  .item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
+  .item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
     @include md-input-highlight($text-input-md-highlight-color-invalid);
   }
 
-  ion-list .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
+  .list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
     @include md-input-highlight($text-input-md-highlight-color-invalid);
 
     .item-inner {
@@ -107,8 +106,8 @@ $text-input-md-highlight-color-invalid:     color($colors-md, danger) !default;
 // Material Design Stacked & Floating Inputs
 // --------------------------------------------------
 
-.item-label-stacked .text-input,
-.item-label-floating .text-input {
+.item-label-stacked .text-input-md,
+.item-label-floating .text-input-md {
   margin-top: 8px;
   margin-bottom: 8px;
   margin-left: 0;
@@ -116,18 +115,18 @@ $text-input-md-highlight-color-invalid:     color($colors-md, danger) !default;
   width: calc(100% - #{$text-input-md-margin-right});
 }
 
-.item-label-stacked ion-select,
-.item-label-floating ion-select {
+.item-label-stacked .select-md,
+.item-label-floating .select-md {
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 0;
 }
 
-.item-label-floating .text-input.cloned-input {
+.item-label-floating .text-input-md.cloned-input {
   top: 32px;
 }
 
-.item-label-stacked .text-input.cloned-input {
+.item-label-stacked .text-input-md.cloned-input {
   top: 27px;
 }
 
@@ -135,15 +134,15 @@ $text-input-md-highlight-color-invalid:     color($colors-md, danger) !default;
 // Material Design Clear Input Icon
 // --------------------------------------------------
 
-ion-input[clearInput] {
+.input-md[clearInput] {
   position: relative;
-
-  .text-input {
-    padding-right: $text-input-md-input-clear-icon-width;
-  }
 }
 
-.text-input-clear-icon {
+.input-md[clearInput] .text-input {
+  padding-right: $text-input-md-input-clear-icon-width;
+}
+
+.input-md .text-input-clear-icon {
   @include svg-background-image($text-input-md-input-clear-icon-svg);
 
   right: ($item-md-padding-right / 2);
diff --git a/src/components/input/input.wp.scss b/src/components/input/input.wp.scss
index 9ecbefaa69..442b954adf 100644
--- a/src/components/input/input.wp.scss
+++ b/src/components/input/input.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./input";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Input
 // --------------------------------------------------
@@ -33,7 +32,7 @@ $text-input-wp-highlight-color-invalid:     color($colors-wp, danger) !default;
 // Windows Default Input
 // --------------------------------------------------
 
-.text-input {
+.text-input-wp {
   margin: $text-input-wp-margin-top $text-input-wp-margin-right $text-input-wp-margin-bottom $text-input-wp-margin-left;
   padding: $text-input-wp-padding-vertical $text-input-wp-padding-horizontal;
 
@@ -47,7 +46,7 @@ $text-input-wp-highlight-color-invalid:     color($colors-wp, danger) !default;
 // Windows Inset Input
 // --------------------------------------------------
 
-.inset-input {
+.item-wp .inset-input {
   margin: ($item-wp-padding-top / 2) $item-wp-padding-right ($item-wp-padding-bottom / 2) $item-wp-padding-left;
   padding: ($item-wp-padding-top / 2) ($item-wp-padding-right / 2) ($item-wp-padding-bottom / 2) ($item-wp-padding-left / 2);
 }
@@ -58,21 +57,21 @@ $text-input-wp-highlight-color-invalid:     color($colors-wp, danger) !default;
 
 // Show the focus highlight when the input has focus
 @if ($text-input-wp-show-focus-highlight) {
-  .item-input.input-has-focus .text-input {
+  .item-wp.item-input.input-has-focus .text-input {
     border-color: $text-input-wp-highlight-color;
   }
 }
 
 // Show the valid highlight when it has the .ng-valid class and a value
 @if ($text-input-wp-show-valid-highlight) {
-  .item-input.ng-valid.input-has-value:not(.input-has-focus) .text-input {
+  .item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus) .text-input {
     border-color: $text-input-wp-highlight-color-valid;
   }
 }
 
 // Show the invalid highlight when it has the invalid class and has been touched
 @if ($text-input-wp-show-invalid-highlight) {
-  .item-input.ng-invalid.ng-touched:not(.input-has-focus) .text-input {
+  .item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus) .text-input {
     border-color: $text-input-wp-highlight-color-invalid;
   }
 }
@@ -81,10 +80,10 @@ $text-input-wp-highlight-color-invalid:     color($colors-wp, danger) !default;
 // Windows Stacked & Floating Inputs
 // --------------------------------------------------
 
-.item-label-stacked .text-input,
-.item-label-floating .text-input,
-.item-label-stacked ion-select,
-.item-label-floating ion-select {
+.item-label-stacked .text-input-wp,
+.item-label-floating .text-input-wp,
+.item-label-stacked .select-wp,
+.item-label-floating .select-wp {
   margin-top: 8px;
   margin-bottom: 8px;
   margin-left: 0;
@@ -92,31 +91,31 @@ $text-input-wp-highlight-color-invalid:     color($colors-wp, danger) !default;
   width: calc(100% - #{$text-input-wp-margin-right});
 }
 
-.item-label-floating .text-input.cloned-input {
+.item-label-floating .text-input-wp.cloned-input {
   top: 32px;
 }
 
-.item-label-stacked .text-input.cloned-input {
+.item-label-stacked .text-input-wp.cloned-input {
   top: 27px;
 }
 
-.item-label-stacked [item-right],
-.item-label-floating [item-right] {
+.item-wp.item-label-stacked [item-right],
+.item-wp.item-label-floating [item-right] {
   align-self: flex-end;
 }
 
 // Windows Clear Input Icon
 // --------------------------------------------------
 
-ion-input[clearInput] {
+.input-wp[clearInput] {
   position: relative;
-
-  .text-input {
-    padding-right: $text-input-wp-input-clear-icon-width;
-  }
 }
 
-.text-input-clear-icon {
+.input-wp[clearInput] .text-input {
+  padding-right: $text-input-wp-input-clear-icon-width;
+}
+
+.input-wp .text-input-clear-icon {
   @include svg-background-image($text-input-wp-input-clear-icon-svg);
 
   right: ($item-wp-padding-right / 2);
diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss
index b08fe8f6e7..4babd809b6 100644
--- a/src/components/item/item.ios.scss
+++ b/src/components/item/item.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./item";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Item
 // --------------------------------------------------
@@ -25,7 +24,7 @@ $item-ios-sliding-content-background:     $list-ios-background-color !default;
 // iOS Item
 // --------------------------------------------------
 
-.item {
+.item-ios {
   position: relative;
 
   padding-left: $item-ios-padding-left;
@@ -35,102 +34,94 @@ $item-ios-sliding-content-background:     $list-ios-background-color !default;
   color: $list-ios-text-color;
   background-color: $list-ios-background-color;
   transition-duration: 200ms;
-
-  h1 {
-    margin: 0 0 2px;
-
-    font-size: 2.4rem;
-    font-weight: normal;
-  }
-
-  h2 {
-    margin: 0 0 2px;
-
-    font-size: 1.6rem;
-    font-weight: normal;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 0 0 3px;
-
-    font-size: 1.4rem;
-    font-weight: normal;
-    line-height: normal;
-  }
-
-  p {
-    overflow: inherit;
-
-    margin: 0 0 2px;
-
-    font-size: 1.2rem;
-    line-height: normal;
-    text-overflow: inherit;
-    color: $item-ios-paragraph-text-color;
-  }
-
-  h2:last-child,
-  h3:last-child,
-  h4:last-child,
-  h5:last-child,
-  h6:last-child,
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  a {
-    text-decoration: none;
-  }
 }
 
-.item.activated {
+.item-ios.activated {
   background-color: $list-ios-activated-background-color;
   transition-duration: 0ms;
 }
 
-.item .item-inner {
-  padding-right: ($item-ios-padding-right / 2);
+.item-ios h1 {
+  margin: 0 0 2px;
 
-  border-bottom: 1px solid $list-ios-border-color;
+  font-size: 2.4rem;
+  font-weight: normal;
 }
 
-&.hairlines .item-inner {
-  border-bottom-width: $hairlines-width;
+.item-ios h2 {
+  margin: 0 0 2px;
+
+  font-size: 1.6rem;
+  font-weight: normal;
+}
+
+.item-ios h3,
+.item-ios h4,
+.item-ios h5,
+.item-ios h6 {
+  margin: 0 0 3px;
+
+  font-size: 1.4rem;
+  font-weight: normal;
+  line-height: normal;
+}
+
+.item-ios p {
+  overflow: inherit;
+
+  margin: 0 0 2px;
+
+  font-size: 1.2rem;
+  line-height: normal;
+  text-overflow: inherit;
+  color: $item-ios-paragraph-text-color;
+}
+
+.item-ios h2:last-child,
+.item-ios h3:last-child,
+.item-ios h4:last-child,
+.item-ios h5:last-child,
+.item-ios h6:last-child,
+.item-ios p:last-child {
+  margin-bottom: 0;
+}
+
+.item-ios.item-block .item-inner {
+  padding-right: ($item-ios-padding-right / 2);
+
+  border-bottom: $hairlines-width solid $list-ios-border-color;
 }
 
 
 // iOS Item Media
 // --------------------------------------------------
 
-[item-left] {
+.item-ios [item-left] {
   margin: $item-ios-padding-media-top $item-ios-padding-left $item-ios-padding-media-bottom 0;
 }
 
-[item-right] {
+.item-ios [item-right] {
   margin: $item-ios-padding-media-top ($item-ios-padding-left / 2) $item-ios-padding-media-bottom ($item-ios-padding-right / 2);
 }
 
-ion-icon[item-left],
-ion-icon[item-right] {
+.item-ios ion-icon[item-left],
+.item-ios ion-icon[item-right] {
   margin-top: $item-ios-padding-icon-top;
   margin-bottom: $item-ios-padding-icon-bottom;
   margin-left: 0;
 }
 
-ion-avatar[item-left],
-ion-thumbnail[item-left] {
+.item-ios ion-avatar[item-left],
+.item-ios ion-thumbnail[item-left] {
   margin: ($item-ios-padding-right / 2) $item-ios-padding-right ($item-ios-padding-right / 2) 0;
 }
 
-ion-avatar[item-right],
-ion-thumbnail[item-right] {
+.item-ios ion-avatar[item-right],
+.item-ios ion-thumbnail[item-right] {
   margin: ($item-ios-padding-right / 2);
 }
 
-.item-button {
+.item-ios .item-button {
   padding: 0 .5em;
 
   height: 24px;
@@ -138,34 +129,34 @@ ion-thumbnail[item-right] {
   font-size: 1.3rem;
 }
 
-.item-button[icon-only] ion-icon,
-.item-button[icon-only] {
+.item-ios .item-button[icon-only] ion-icon,
+.item-ios .item-button[icon-only] {
   padding: 0 1px;
 }
 
-ion-avatar {
+.item-ios ion-avatar {
   min-width: $item-ios-avatar-size;
   min-height: $item-ios-avatar-size;
-
-  img {
-    max-width: $item-ios-avatar-size;
-    max-height: $item-ios-avatar-size;
-
-    border-radius: $item-ios-avatar-size / 2;
-  }
 }
 
-ion-thumbnail {
+.item-ios ion-avatar img {
+  max-width: $item-ios-avatar-size;
+  max-height: $item-ios-avatar-size;
+
+  border-radius: $item-ios-avatar-size / 2;
+}
+
+.item-ios ion-thumbnail {
   min-width: $item-ios-thumbnail-size;
   min-height: $item-ios-thumbnail-size;
-
-  img {
-    max-width: $item-ios-thumbnail-size;
-    max-height: $item-ios-thumbnail-size;
-  }
 }
 
-ion-note {
+.item-ios ion-thumbnail img {
+  max-width: $item-ios-thumbnail-size;
+  max-height: $item-ios-thumbnail-size;
+}
+
+.item-ios ion-note {
   color: $item-ios-note-color;
 }
 
@@ -173,22 +164,18 @@ ion-note {
 // iOS Item Detail Push
 // --------------------------------------------------
 
-@mixin ios-detail-push() {
-  @include svg-background-image($item-ios-detail-push-svg);
-
-  padding-right: 32px;
-
-  background-repeat: no-repeat;
-  background-position: right ($item-ios-padding-right - 2) center;
-  background-size: 14px 14px;
-}
-
 // Only show the forward arrow icon if true
 @if $item-ios-detail-push-show == true {
-  .item[detail-push] .item-inner,
-  button.item:not([detail-none]) .item-inner,
-  a.item:not([detail-none]) .item-inner {
-    @include ios-detail-push();
+  .item-ios[detail-push] .item-inner,
+  button.item-ios:not([detail-none]) .item-inner,
+  a.item-ios:not([detail-none]) .item-inner {
+    @include svg-background-image($item-ios-detail-push-svg);
+
+    padding-right: 32px;
+
+    background-repeat: no-repeat;
+    background-position: right ($item-ios-padding-right - 2) center;
+    background-size: 14px 14px;
   }
 }
 
@@ -196,24 +183,20 @@ ion-note {
 // iOS Item Group
 // --------------------------------------------------
 
-ion-item-group {
-  .item:first-child {
-    .item-inner {
-      border-top-width: 0;
-    }
-  }
+ion-item-group .item-ios:first-child .item-inner {
+  border-top-width: 0;
+}
 
-  .item:last-child .item-inner,
-  .item-wrapper:last-child .item-inner {
-    border: 0;
-  }
+ion-item-group .item-ios:last-child .item-inner,
+ion-item-group .item-wrapper:last-child .item-ios .item-inner {
+  border: 0;
 }
 
 
 // iOS Item Divider
 // --------------------------------------------------
 
-ion-item-divider {
+ion-item-divider.item-ios {
   padding-left: $item-ios-padding-left;
 
   color: $item-ios-divider-color;
@@ -227,11 +210,11 @@ ion-item-divider {
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
   // If there is text with a color it should use this color
   // and override whatever item sets it to
-  .item .text-#{$color-name} {
+  .item-ios .text-ios-#{$color-name} {
     color: $color-base;
   }
 
-  .item-#{$color-name} {
+  .item-ios-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
   }
@@ -241,20 +224,6 @@ ion-item-divider {
 // iOS Item Sliding
 // --------------------------------------------------
 
-ion-item-sliding {
+.list-ios ion-item-sliding {
   background-color: $item-ios-sliding-content-background;
 }
-
-// iOS item right-to-left
-// --------------------------------------------------
-@if $include-rtl {
-  @at-root {
-
-    .rtl.ios {
-
-      // todo
-
-    }
-
-  }
-}
diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss
index 290cfdb728..05be0f26e9 100644
--- a/src/components/item/item.md.scss
+++ b/src/components/item/item.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./item";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Item
 // --------------------------------------------------
@@ -24,7 +23,7 @@ $item-md-divider-padding:            5px 15px !default;
 $item-md-sliding-content-background: $list-md-background-color !default;
 
 
-.item {
+.item-md {
   position: relative;
 
   padding-right: 0;
@@ -38,53 +37,53 @@ $item-md-sliding-content-background: $list-md-background-color !default;
   background-color: $list-md-background-color;
   box-shadow: none;
   transition: background-color 300ms cubic-bezier(.4, 0, .2, 1), transform 300ms;
-
-  h1 {
-    margin: 0 0 2px;
-
-    font-size: 2.4rem;
-    font-weight: normal;
-  }
-
-  h2 {
-    margin: 2px 0;
-
-    font-size: 1.6rem;
-    font-weight: normal;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 2px 0;
-
-    font-size: 1.4rem;
-    font-weight: normal;
-    line-height: normal;
-  }
-
-  p {
-    overflow: inherit;
-
-    margin: 0 0 2px;
-
-    font-size: 1.4rem;
-    line-height: normal;
-    text-overflow: inherit;
-    color: $item-md-paragraph-text-color;
-  }
 }
 
-.item.activated {
+.item-md.activated {
   background-color: $list-md-activated-background-color;
 }
 
-.item[no-lines] {
+.item-md[no-lines] {
   border-width: 0;
 }
 
-.item .item-inner {
+.item-md h1 {
+  margin: 0 0 2px;
+
+  font-size: 2.4rem;
+  font-weight: normal;
+}
+
+.item-md h2 {
+  margin: 2px 0;
+
+  font-size: 1.6rem;
+  font-weight: normal;
+}
+
+.item-md h3,
+.item-md h4,
+.item-md h5,
+.item-md h6 {
+  margin: 2px 0;
+
+  font-size: 1.4rem;
+  font-weight: normal;
+  line-height: normal;
+}
+
+.item-md p {
+  overflow: inherit;
+
+  margin: 0 0 2px;
+
+  font-size: 1.4rem;
+  line-height: normal;
+  text-overflow: inherit;
+  color: $item-md-paragraph-text-color;
+}
+
+.item-md.item-block .item-inner {
   padding-right: ($item-md-padding-right / 2);
 
   border-bottom: 1px solid $list-md-border-color;
@@ -94,22 +93,18 @@ $item-md-sliding-content-background: $list-md-background-color !default;
 // Material Design Item Detail Push
 // --------------------------------------------------
 
-@mixin md-detail-push() {
-  @include svg-background-image($item-md-detail-push-svg);
-
-  padding-right: 32px;
-
-  background-repeat: no-repeat;
-  background-position: right ($item-md-padding-right - 2) center;
-  background-size: 14px 14px;
-}
-
 // Only show the forward arrow icon if true
 @if $item-md-detail-push-show == true {
-  .item[detail-push] .item-inner,
-  button.item:not([detail-none]) .item-inner,
-  a.item:not([detail-none]) .item-inner {
-    @include md-detail-push();
+  .item-md[detail-push] .item-inner,
+  button.item-md:not([detail-none]) .item-inner,
+  a.item-md:not([detail-none]) .item-inner {
+    @include svg-background-image($item-md-detail-push-svg);
+
+    padding-right: 32px;
+
+    background-repeat: no-repeat;
+    background-position: right ($item-md-padding-right - 2) center;
+    background-size: 14px 14px;
   }
 }
 
@@ -117,19 +112,19 @@ $item-md-sliding-content-background: $list-md-background-color !default;
 // Material Design Item Media
 // --------------------------------------------------
 
-[item-left],
-[item-right] {
+.item-md [item-left],
+.item-md [item-right] {
   margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0;
 }
 
-ion-icon[item-left],
-ion-icon[item-right] {
+.item-md ion-icon[item-left],
+.item-md ion-icon[item-right] {
   margin-top: $item-md-padding-icon-top;
   margin-bottom: $item-md-padding-icon-bottom;
   margin-left: 0;
 }
 
-.item-button {
+.item-md .item-button {
   padding: 0 .6em;
 
   height: 25px;
@@ -137,49 +132,49 @@ ion-icon[item-right] {
   font-size: 1.2rem;
 }
 
-.item-button[icon-only] ion-icon,
-.item-button[icon-only] {
+.item-md .item-button[icon-only] ion-icon,
+.item-md .item-button[icon-only] {
   padding: 0 1px;
 }
 
-ion-icon[item-left] + .item-inner,
-ion-icon[item-left] + .item-input {
+.item-md ion-icon[item-left] + .item-inner,
+.item-md ion-icon[item-left] + .item-input {
   margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
 }
 
-ion-avatar[item-left],
-ion-thumbnail[item-left] {
+.item-md ion-avatar[item-left],
+.item-md ion-thumbnail[item-left] {
   margin: ($item-md-padding-right / 2) $item-md-padding-right ($item-md-padding-right / 2) 0;
 }
 
-ion-avatar[item-right],
-ion-thumbnail[item-right] {
+.item-md ion-avatar[item-right],
+.item-md ion-thumbnail[item-right] {
   margin: ($item-md-padding-right / 2);
 }
 
-ion-avatar {
+.item-md ion-avatar {
   min-width: $item-md-avatar-size;
   min-height: $item-md-avatar-size;
-
-  img {
-    max-width: $item-md-avatar-size;
-    max-height: $item-md-avatar-size;
-
-    border-radius: $item-md-avatar-size / 2;
-  }
 }
 
-ion-thumbnail {
+.item-md ion-avatar img {
+  max-width: $item-md-avatar-size;
+  max-height: $item-md-avatar-size;
+
+  border-radius: $item-md-avatar-size / 2;
+}
+
+.item-md ion-thumbnail {
   min-width: $item-md-thumbnail-size;
   min-height: $item-md-thumbnail-size;
-
-  img {
-    max-width: $item-md-thumbnail-size;
-    max-height: $item-md-thumbnail-size;
-  }
 }
 
-ion-note {
+.item-md ion-thumbnail img {
+  max-width: $item-md-thumbnail-size;
+  max-height: $item-md-thumbnail-size;
+}
+
+.item-md ion-note {
   color: $item-md-note-color;
 }
 
@@ -187,24 +182,20 @@ ion-note {
 // Material Design Item Group
 // --------------------------------------------------
 
-ion-item-group {
-  .item:first-child {
-    .item-inner {
-      border-top-width: 0;
-    }
-  }
+ion-item-group .item-md:first-child .item-inner {
+  border-top-width: 0;
+}
 
-  .item:last-child .item-inner,
-  .item-wrapper:last-child .item-inner {
-    border: 0;
-  }
+ion-item-group .item-md:last-child .item-inner,
+ion-item-group .item-md .item-wrapper:last-child .item-inner {
+  border: 0;
 }
 
 
 // Material Design Item Divider
 // --------------------------------------------------
 
-ion-item-divider {
+ion-item-divider.item-md {
   padding-left: $item-md-padding-left;
 
   color: $item-md-divider-color;
@@ -218,11 +209,11 @@ ion-item-divider {
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
   // If there is text with a color it should use this color
   // and override whatever item sets it to
-  .item .text-#{$color-name} {
+  .item-md .text-md-#{$color-name} {
     color: $color-base;
   }
 
-  .item-#{$color-name} {
+  .item-md-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
   }
@@ -232,14 +223,14 @@ ion-item-divider {
 // Material Design Item Sliding
 // --------------------------------------------------
 
-ion-item-sliding {
+.list-md ion-item-sliding {
   background-color: $item-md-sliding-content-background;
 }
 
 // Item reorder
 // --------------------------------------------------
 
-ion-reorder {
+.item-md ion-reorder {
   font-size: 1.5em;
   opacity: .3;
 }
diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss
index 07fc46c176..14befbaf9d 100644
--- a/src/components/item/item.wp.scss
+++ b/src/components/item/item.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./item";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Item
 // --------------------------------------------------
@@ -26,7 +25,7 @@ $item-wp-divider-padding:            5px 15px !default;
 $item-wp-sliding-content-background: $list-wp-background-color !default;
 
 
-.item {
+.item-wp {
   position: relative;
 
   padding-right: 0;
@@ -39,53 +38,53 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
   color: $item-wp-body-text-color;
   background-color: $item-wp-body-background-color;
   box-shadow: none;
-
-  h1 {
-    margin: 0 0 2px;
-
-    font-size: 2.4rem;
-    font-weight: normal;
-  }
-
-  h2 {
-    margin: 2px 0;
-
-    font-size: 1.6rem;
-    font-weight: normal;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 2px 0;
-
-    font-size: 1.4rem;
-    font-weight: normal;
-    line-height: normal;
-  }
-
-  p {
-    overflow: inherit;
-
-    margin: 0 0 2px;
-
-    font-size: 1.4rem;
-    line-height: normal;
-    text-overflow: inherit;
-    color: $item-wp-paragraph-text-color;
-  }
 }
 
-.item.activated {
+.item-wp.activated {
   background-color: $list-wp-activated-background-color;
 }
 
-.item[no-lines] {
+.item-wp[no-lines] {
   border-width: 0;
 }
 
-.item .item-inner {
+.item-wp h1 {
+  margin: 0 0 2px;
+
+  font-size: 2.4rem;
+  font-weight: normal;
+}
+
+.item-wp h2 {
+  margin: 2px 0;
+
+  font-size: 1.6rem;
+  font-weight: normal;
+}
+
+.item-wp h3,
+.item-wp h4,
+.item-wp h5,
+.item-wp h6 {
+  margin: 2px 0;
+
+  font-size: 1.4rem;
+  font-weight: normal;
+  line-height: normal;
+}
+
+.item-wp p {
+  overflow: inherit;
+
+  margin: 0 0 2px;
+
+  font-size: 1.4rem;
+  line-height: normal;
+  text-overflow: inherit;
+  color: $item-wp-paragraph-text-color;
+}
+
+.item-wp.item-block .item-inner {
   padding-right: ($item-wp-padding-right / 2);
 
   border-bottom: 1px solid $list-wp-border-color;
@@ -95,22 +94,18 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
 // Windows Item Detail Push
 // --------------------------------------------------
 
-@mixin wp-detail-push() {
-  @include svg-background-image($item-wp-detail-push-svg);
-
-  padding-right: 32px;
-
-  background-repeat: no-repeat;
-  background-position: right ($item-wp-padding-right - 2) center;
-  background-size: 14px 14px;
-}
-
 // Only show the forward arrow icon if true
 @if $item-wp-detail-push-show == true {
-  .item[detail-push] .item-inner,
-  button.item:not([detail-none]) .item-inner,
-  a.item:not([detail-none]) .item-inner {
-    @include wp-detail-push();
+  .item-wp[detail-push] .item-inner,
+  button.item-wp:not([detail-none]) .item-inner,
+  a.item-wp:not([detail-none]) .item-inner {
+    @include svg-background-image($item-wp-detail-push-svg);
+
+    padding-right: 32px;
+
+    background-repeat: no-repeat;
+    background-position: right ($item-wp-padding-right - 2) center;
+    background-size: 14px 14px;
   }
 }
 
@@ -118,19 +113,19 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
 // Windows Item Media
 // --------------------------------------------------
 
-[item-left],
-[item-right] {
+.item-wp [item-left],
+.item-wp [item-right] {
   margin: $item-wp-padding-media-top ($item-wp-padding-right / 2) $item-wp-padding-media-bottom 0;
 }
 
-ion-icon[item-left],
-ion-icon[item-right] {
+.item-wp ion-icon[item-left],
+.item-wp ion-icon[item-right] {
   margin-top: $item-wp-padding-icon-top;
   margin-bottom: $item-wp-padding-icon-bottom;
   margin-left: 0;
 }
 
-.item-button {
+.item-wp .item-button {
   padding: 0 .6em;
 
   height: 25px;
@@ -138,54 +133,54 @@ ion-icon[item-right] {
   font-size: 1.2rem;
 }
 
-.item-button[icon-only] ion-icon,
-.item-button[icon-only] {
+.item-wp .item-button[icon-only] ion-icon,
+.item-wp .item-button[icon-only] {
   padding: 0 1px;
 }
 
-[text-wrap] ion-label {
+.item-wp[text-wrap] ion-label {
   font-size: $item-wp-body-text-font-size;
   line-height: $item-wp-body-text-line-height;
 }
 
-ion-icon[item-left] + .item-inner,
-ion-icon[item-left] + .item-input {
+.item-wp ion-icon[item-left] + .item-inner,
+.item-wp ion-icon[item-left] + .item-input {
   margin-left: ($item-wp-padding-left / 2);
 }
 
-ion-avatar[item-left],
-ion-thumbnail[item-left] {
+.item-wp ion-avatar[item-left],
+.item-wp ion-thumbnail[item-left] {
   margin: ($item-wp-padding-right / 2) $item-wp-padding-right ($item-wp-padding-right / 2) 0;
 }
 
-ion-avatar[item-right],
-ion-thumbnail[item-right] {
+.item-wp ion-avatar[item-right],
+.item-wp ion-thumbnail[item-right] {
   margin: ($item-wp-padding-right / 2);
 }
 
-ion-avatar {
+.item-wp ion-avatar {
   min-width: $item-wp-avatar-size;
   min-height: $item-wp-avatar-size;
-
-  img {
-    max-width: $item-wp-avatar-size;
-    max-height: $item-wp-avatar-size;
-
-    border-radius: $item-wp-avatar-size / 2;
-  }
 }
 
-ion-thumbnail {
+.item-wp ion-avatar img {
+  max-width: $item-wp-avatar-size;
+  max-height: $item-wp-avatar-size;
+
+  border-radius: $item-wp-avatar-size / 2;
+}
+
+.item-wp ion-thumbnail {
   min-width: $item-wp-thumbnail-size;
   min-height: $item-wp-thumbnail-size;
-
-  img {
-    max-width: $item-wp-thumbnail-size;
-    max-height: $item-wp-thumbnail-size;
-  }
 }
 
-ion-note {
+.item-wp ion-thumbnail img {
+  max-width: $item-wp-thumbnail-size;
+  max-height: $item-wp-thumbnail-size;
+}
+
+.item-wp ion-note {
   color: $item-wp-note-color;
 }
 
@@ -193,7 +188,7 @@ ion-note {
 // Windows Item Divider
 // --------------------------------------------------
 
-ion-item-divider {
+ion-item-divider.item-wp {
   padding-left: $item-wp-padding-left;
 
   color: $item-wp-divider-color;
@@ -207,11 +202,11 @@ ion-item-divider {
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
   // If there is text with a color it should use this color
   // and override whatever item sets it to
-  .item .text-#{$color-name} {
+  .item-wp .text-wp-#{$color-name} {
     color: $color-base;
   }
 
-  .item-#{$color-name} {
+  .item-wp-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
   }
@@ -221,6 +216,6 @@ ion-item-divider {
 // Windows Item Sliding
 // --------------------------------------------------
 
-ion-item-sliding {
+.list-wp ion-item-sliding {
   background-color: $item-wp-sliding-content-background;
 }
diff --git a/src/components/label/label.ios.scss b/src/components/label/label.ios.scss
index 6f8031310d..fc7c13f55b 100644
--- a/src/components/label/label.ios.scss
+++ b/src/components/label/label.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./label";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Label
 // --------------------------------------------------
@@ -11,7 +10,7 @@ $label-ios-margin:             $item-ios-padding-top ($item-ios-padding-right /
 // iOS Default Label
 // --------------------------------------------------
 
-ion-label {
+.label-ios {
   margin: $label-ios-margin;
 }
 
@@ -19,14 +18,14 @@ ion-label {
 // iOS Default Label Inside An Input/Select Item
 // --------------------------------------------------
 
-.item-input ion-label,
-.item-select ion-label,
-.item-datetime ion-label {
+.item-input .label-ios,
+.item-select .label-ios,
+.item-datetime .label-ios {
   color: $label-ios-text-color;
 }
 
-ion-label + ion-input .text-input,
-ion-label + ion-textarea .text-input {
+.label-ios + ion-input .text-input,
+.label-ios + ion-textarea .text-input {
   margin-left: $item-ios-padding-left;
 
   width: calc(100% - (#{$item-ios-padding-right} / 2) - #{$item-ios-padding-left});
@@ -36,13 +35,13 @@ ion-label + ion-textarea .text-input {
 // iOS Stacked & Floating Labels
 // --------------------------------------------------
 
-ion-label[stacked] {
+.label-ios[stacked] {
   margin-bottom: 4px;
 
   font-size: 1.2rem;
 }
 
-ion-label[floating] {
+.label-ios[floating] {
   margin-bottom: 0;
 
   transform: translate3d(0, 27px, 0);
@@ -50,13 +49,13 @@ ion-label[floating] {
   transition: transform 150ms ease-in-out;
 }
 
-.input-has-focus ion-label[floating],
-.input-has-value ion-label[floating] {
+.input-has-focus .label-ios[floating],
+.input-has-value .label-ios[floating] {
   transform: translate3d(0, 0, 0) scale(.8);
 }
 
-.item-label-stacked [item-right],
-.item-label-floating [item-right] {
+.item-ios.item-label-stacked [item-right],
+.item-ios.item-label-floating [item-right] {
   margin-top: $item-ios-padding-media-top - 2;
   margin-bottom: $item-ios-padding-media-bottom - 2;
 }
@@ -67,10 +66,10 @@ ion-label[floating] {
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
-  .label-#{$color-name},
-  .item-input .label-#{$color-name},
-  .item-select .label-#{$color-name},
-  .item-datetime .label-#{$color-name} {
+  .label-ios-#{$color-name},
+  .item-input .label-ios-#{$color-name},
+  .item-select .label-ios-#{$color-name},
+  .item-datetime .label-ios-#{$color-name} {
     color: $color-base;
   }
 
diff --git a/src/components/label/label.md.scss b/src/components/label/label.md.scss
index 82f019b5ca..5fd072278d 100644
--- a/src/components/label/label.md.scss
+++ b/src/components/label/label.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./label";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Label
 // --------------------------------------------------
@@ -12,11 +11,11 @@ $label-md-margin:                     $item-md-padding-top ($item-md-padding-rig
 // Material Design Default Label
 // --------------------------------------------------
 
-ion-label {
+.label-md {
   margin: $label-md-margin;
 }
 
-[text-wrap] ion-label {
+[text-wrap] .label-md {
   font-size: $item-md-body-text-font-size;
   line-height: $item-md-body-text-line-height;
 }
@@ -24,9 +23,9 @@ ion-label {
 // Material Design Default Label Inside An Input/Select Item
 // --------------------------------------------------
 
-.item-input ion-label,
-.item-select ion-label,
-.item-datetime ion-label {
+.item-input .label-md,
+.item-select .label-md,
+.item-datetime .label-md {
   color: $label-md-text-color;
 }
 
@@ -34,34 +33,34 @@ ion-label {
 // Material Design Stacked & Floating Labels
 // --------------------------------------------------
 
-ion-label[stacked] {
+.label-md[stacked] {
   font-size: 1.2rem;
 }
 
-ion-label[floating] {
+.label-md[floating] {
   transform: translate3d(0, 27px, 0);
   transform-origin: left top;
   transition: transform 150ms ease-in-out;
 }
 
-ion-label[stacked],
-ion-label[floating] {
+.label-md[stacked],
+.label-md[floating] {
   margin-bottom: 0;
   margin-left: 0;
 }
 
-.input-has-focus ion-label[stacked],
-.input-has-focus ion-label[floating] {
+.input-has-focus .label-md[stacked],
+.input-has-focus .label-md[floating] {
   color: $label-md-text-color-focused;
 }
 
-.input-has-focus ion-label[floating],
-.input-has-value ion-label[floating] {
+.input-has-focus .label-md[floating],
+.input-has-value .label-md[floating] {
   transform: translate3d(0, 0, 0) scale(.8);
 }
 
-.item-label-stacked [item-right],
-.item-label-floating [item-right] {
+.item-md.item-label-stacked [item-right],
+.item-md.item-label-floating [item-right] {
   margin-top: $item-md-padding-media-top - 2;
   margin-bottom: $item-md-padding-media-bottom - 2;
 }
@@ -72,10 +71,10 @@ ion-label[floating] {
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  .label-#{$color-name},
-  .item-input .label-#{$color-name},
-  .item-select .label-#{$color-name},
-  .item-datetime .label-#{$color-name} {
+  .label-md-#{$color-name},
+  .item-input .label-md-#{$color-name},
+  .item-select .label-md-#{$color-name},
+  .item-datetime .label-md-#{$color-name} {
     color: $color-base;
   }
 
diff --git a/src/components/label/label.wp.scss b/src/components/label/label.wp.scss
index c4983e6a3b..e0a06299ea 100644
--- a/src/components/label/label.wp.scss
+++ b/src/components/label/label.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./label";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Label
 // --------------------------------------------------
@@ -11,7 +10,7 @@ $label-wp-text-color-focused:         color($colors-wp, primary) !default;
 // Windows Default Label
 // --------------------------------------------------
 
-ion-label {
+.label-wp {
   margin: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0;
 }
 
@@ -19,9 +18,9 @@ ion-label {
 // Windows Default Label Inside An Input/Select Item
 // --------------------------------------------------
 
-.item-input ion-label,
-.item-select ion-label,
-.item-datetime ion-label {
+.item-input .label-wp,
+.item-select .label-wp,
+.item-datetime .label-wp {
   color: $label-wp-text-color;
 }
 
@@ -29,33 +28,33 @@ ion-label {
 // Windows Stacked & Floating Labels
 // --------------------------------------------------
 
-ion-label[stacked] {
+.label-wp[stacked] {
   font-size: 1.2rem;
 }
 
-ion-label[floating] {
+.label-wp[floating] {
   transform: translate3d(8px, 34px, 0);
   transform-origin: left top;
 }
 
-ion-label[stacked],
-ion-label[floating] {
+.label-wp[stacked],
+.label-wp[floating] {
   margin-bottom: 0;
   margin-left: 0;
 }
 
-.input-has-focus ion-label[stacked],
-.input-has-focus ion-label[floating] {
+.input-has-focus .label-wp[stacked],
+.input-has-focus .label-wp[floating] {
   color: $label-wp-text-color-focused;
 }
 
-.input-has-focus ion-label[floating],
-.input-has-value ion-label[floating] {
+.input-has-focus .label-wp[floating],
+.input-has-value .label-wp[floating] {
   transform: translate3d(0, 0, 0) scale(.8);
 }
 
-.item-label-stacked [item-right],
-.item-label-floating [item-right] {
+.item-wp.item-label-stacked [item-right],
+.item-wp.item-label-floating [item-right] {
   margin-top: $item-wp-padding-media-top + 4;
   margin-bottom: $item-wp-padding-media-top + 4;
 }
@@ -66,10 +65,10 @@ ion-label[floating] {
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
-  .label-#{$color-name},
-  .item-input .label-#{$color-name},
-  .item-select .label-#{$color-name},
-  .item-datetime .label-#{$color-name} {
+  .label-wp-#{$color-name},
+  .item-input .label-wp-#{$color-name},
+  .item-select .label-wp-#{$color-name},
+  .item-datetime .label-wp-#{$color-name} {
     color: $color-base;
   }
 
diff --git a/src/components/list/list.ios.scss b/src/components/list/list.ios.scss
index 2e03d5ec94..c362b0886f 100644
--- a/src/components/list/list.ios.scss
+++ b/src/components/list/list.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./list";
+@import "../../themes/ionic.globals.ios";
 
 // iOS List
 // --------------------------------------------------
@@ -15,176 +14,137 @@ $list-inset-ios-margin-bottom:        16px !default;
 $list-inset-ios-margin-left:          16px !default;
 $list-inset-ios-border-radius:        4px !default;
 
-$list-ios-header-padding-left:             $item-ios-padding-left !default;
+$list-ios-header-padding-left:        $item-ios-padding-left !default;
 $list-ios-header-font-size:           1.2rem !default;
 $list-ios-header-font-weight:         500 !default;
 $list-ios-header-letter-spacing:      .1rem !default;
 $list-ios-header-color:               #333 !default;
+$list-ios-header-background-color:    transparent !default;
 
 
-//
-// DEFAULT LIST
-//
+// iOS Default List
+// --------------------------------------------------
 
-ion-list-header {
+.list-ios {
+  margin: -1px $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
+}
+
+.list-ios > .item-block:first-child {
+  border-top: $hairlines-width solid $list-ios-border-color;
+}
+
+.list-ios > .item-block:last-child,
+.list-ios > .item-wrapper:last-child .item-block {
+  border-bottom: $hairlines-width solid $list-ios-border-color;
+}
+
+.list-ios > .item-block:last-child .item-inner,
+.list-ios > .item-wrapper:last-child .item-block .item-inner {
+  border-bottom: 0;
+}
+
+.list-ios .item-block .item-inner {
+  border-bottom: $hairlines-width solid $list-ios-border-color;
+}
+
+// If the item has the no-lines attribute remove the bottom border from:
+// the item itself (for last-child items)
+// the item-inner class (if it is not last)
+.list-ios .item[no-lines],
+.list-ios .item[no-lines] .item-inner, {
+  border-width: 0;
+}
+
+.list-ios ion-item-options {
+  border-bottom: $hairlines-width solid $list-ios-border-color;
+}
+
+.list-ios ion-item-options .button {
+  display: inline-flex;
+
+  align-items: center;
+
+  margin: 0;
+
+  height: 100%;
+  min-height: 100%;
+
+  border: 0;
+  border-radius: 0;
+
+  box-sizing: border-box;
+}
+
+.list-ios ion-item-options .button::before {
+  margin: 0 auto;
+}
+
+.list-ios + ion-list ion-list-header {
+  margin-top: -$list-ios-margin-top;
+  padding-top: 0;
+}
+
+
+// iOS Inset List
+// --------------------------------------------------
+
+.list-ios[inset] {
+  margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
+
+  border-radius: $list-inset-ios-border-radius;
+}
+
+.list-ios[inset] ion-list-header {
+  background-color: $list-ios-background-color;
+}
+
+.list-ios[inset] .item {
+  border-bottom: 1px solid $list-ios-border-color;
+}
+
+.list-ios[inset] .item-inner {
+  border-bottom: 0;
+}
+
+.list-ios[inset] > .item:first-child,
+.list-ios[inset] > .item-wrapper:first-child .item {
+  border-top: 0;
+}
+
+.list-ios[inset] > .item:last-child,
+.list-ios[inset] > .item-wrapper:last-child .item {
+  border-bottom: 0;
+}
+
+.list-ios[inset] + ion-list[inset] {
+  margin-top: 0;
+}
+
+
+// iOS No Lines List
+// --------------------------------------------------
+
+.list-ios[no-lines] ion-list-header,
+.list-ios[no-lines] ion-item-options,
+.list-ios[no-lines] .item,
+.list-ios[no-lines] .item .item-inner {
+  border-width: 0;
+}
+
+
+// iOS List Header
+// --------------------------------------------------
+
+.list-header-ios {
   position: relative;
 
   padding-left: $list-ios-header-padding-left;
 
-  border-bottom: 1px solid $list-ios-border-color;
+  border-bottom: $hairlines-width solid $list-ios-border-color;
   font-size: $list-ios-header-font-size;
   font-weight: $list-ios-header-font-weight;
   letter-spacing: $list-ios-header-letter-spacing;
   text-transform: uppercase;
   color: $list-ios-header-color;
-}
-
-ion-list {
-  margin: -1px $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
-
-  > .item:first-child {
-    border-top: 1px solid $list-ios-border-color;
-  }
-
-  > .item:last-child,
-  > .item-wrapper:last-child .item {
-    border-bottom: 1px solid $list-ios-border-color;
-  }
-
-  > .item:last-child,
-  > .item-wrapper:last-child {
-    .item-inner {
-      border-bottom: 0;
-    }
-  }
-
-  .item .item-inner {
-    border-bottom: 1px solid $list-ios-border-color;
-  }
-
-  // If the item has the no-lines attribute remove the bottom border from:
-  // the item itself (for last-child items)
-  // the item-inner class (if it is not last)
-  .item[no-lines],
-  .item[no-lines] .item-inner, {
-    border-width: 0;
-  }
-
-  ion-item-options {
-    border-bottom: 1px solid $list-ios-border-color;
-  }
-
-  ion-item-options button,
-  ion-item-options [button] {
-    display: inline-flex;
-
-    align-items: center;
-
-    margin: 0;
-
-    height: 100%;
-    min-height: 100%;
-
-    border: 0;
-    border-radius: 0;
-
-    box-sizing: border-box;
-
-    &::before {
-      margin: 0 auto;
-    }
-  }
-}
-
-ion-list + ion-list {
-  ion-list-header {
-    margin-top: -$list-ios-margin-top;
-    padding-top: 0;
-  }
-}
-
-&.hairlines {
-
-  ion-list-header {
-    border-bottom-width: $hairlines-width;
-  }
-
-  ion-list {
-
-    ion-item-options {
-      border-width: $hairlines-width;
-    }
-
-    .item .item-inner {
-      border-width: $hairlines-width;
-    }
-
-    > .item:first-child {
-      border-top-width: $hairlines-width;
-    }
-
-    > .item:last-child,
-    > .item-wrapper:last-child .item {
-      border-bottom-width: $hairlines-width;
-    }
-  }
-
-}
-
-
-//
-// INSET LIST
-//
-
-ion-list[inset] {
-  margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
-
-  border-radius: $list-inset-ios-border-radius;
-
-  ion-list-header {
-    background-color: $list-ios-background-color;
-  }
-
-  .item {
-    border-bottom: 1px solid $list-ios-border-color;
-
-    .item-inner {
-      border-bottom: 0;
-    }
-  }
-
-  > .item:first-child,
-  > .item-wrapper:first-child .item {
-    border-top: 0;
-  }
-
-  > .item:last-child,
-  > .item-wrapper:last-child .item {
-    border-bottom: 0;
-  }
-}
-
-ion-list[inset] + ion-list[inset] {
-  margin-top: 0;
-}
-
-&.hairlines ion-list[inset] {
-  .item {
-    border-width: $hairlines-width;
-  }
-}
-
-
-//
-// NO LINES LIST
-//
-
-ion-list[no-lines],
-&.hairlines ion-list[no-lines] {
-  ion-list-header,
-  ion-item-options,
-  .item,
-  .item .item-inner {
-    border-width: 0;
-  }
+  background: $list-ios-header-background-color;
 }
diff --git a/src/components/list/list.md.scss b/src/components/list/list.md.scss
index 200f517c83..bd44e9ccad 100644
--- a/src/components/list/list.md.scss
+++ b/src/components/list/list.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./list";
+@import "../../themes/ionic.globals.md";
 
 // Material Design List
 // --------------------------------------------------
@@ -15,17 +14,132 @@ $list-inset-md-margin-bottom:    16px !default;
 $list-inset-md-margin-left:      16px !default;
 $list-inset-md-border-radius:    2px !default;
 
-$list-md-header-padding-left:         $item-md-padding-left !default;
+$list-md-header-padding-left:    $item-md-padding-left !default;
 $list-md-header-font-size:       1.4rem !default;
 $list-md-header-color:           #858585 !default;
 
 
-//
-// DEFAULT LIST
-//
+// Material Design Default List
+// --------------------------------------------------
 
-ion-list-header,
-ion-item-divider {
+.list-md {
+  margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
+}
+
+.list-md .item-block .item-inner {
+  border-bottom: 1px solid $list-md-border-color;
+}
+
+.list-md > .item-block:first-child,
+.list-md > .item-wrapper:first-child .item-block {
+  border-top: 1px solid $list-md-border-color;
+}
+
+.list-md > .item-block:last-child,
+.list-md > .item-wrapper:last-child .item-block {
+  border-bottom: 1px solid $list-md-border-color;
+}
+
+.list-md > .item-block:last-child,
+.list-md > .item-wrapper:last-child {
+  ion-label,
+  .item-inner {
+    border-bottom: 0;
+  }
+}
+
+.list-md > ion-input:last-child::after {
+  left: 0;
+}
+
+.list-md ion-item-options {
+  border-bottom: 1px solid $list-md-border-color;
+}
+
+.list-md ion-item-options .button {
+  display: inline-flex;
+
+  align-items: center;
+
+  margin: 1px 0;
+
+  height: calc(100% - 2px);
+
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+
+  box-sizing: border-box;
+}
+
+.list-md ion-item-options .button::before {
+  margin: 0 auto;
+}
+
+// If the item has the no-lines attribute remove the bottom border from:
+// the item itself (for last-child items)
+// the item-inner class (if it is not last)
+.list-md .item[no-lines],
+.list-md .item[no-lines] .item-inner {
+  border-width: 0;
+}
+
+.list-md + ion-list ion-list-header {
+  margin-top: -$list-md-margin-top;
+  padding-top: 0;
+}
+
+
+// Material Design Inset List
+// --------------------------------------------------
+
+.list-md[inset] {
+  margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left;
+
+  border-radius: $list-inset-md-border-radius;
+}
+
+.list-md[inset] .item:first-child {
+  border-top-width: 0;
+  border-top-left-radius: $list-inset-md-border-radius;
+  border-top-right-radius: $list-inset-md-border-radius;
+}
+
+.list-md[inset] .item:last-child {
+  border-bottom-width: 0;
+  border-bottom-left-radius: $list-inset-md-border-radius;
+  border-bottom-right-radius: $list-inset-md-border-radius;
+}
+
+.list-md[inset] .item-input {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.list-md[inset] + ion-list[inset] {
+  margin-top: 0;
+}
+
+.list-md[inset] ion-list-header {
+  background-color: $list-md-background-color;
+}
+
+
+// Material Design No Lines List
+// --------------------------------------------------
+
+.list-md[no-lines] .item-block,
+.list-md[no-lines] ion-item-options,
+.list-md[no-lines] .item .item-inner {
+  border-width: 0;
+}
+
+
+// Material Design List Header / Divider
+// --------------------------------------------------
+
+.list-header-md,
+.list-md ion-item-divider {
   margin-left: 0;
   padding-left: $list-md-header-padding-left;
 
@@ -33,122 +147,3 @@ ion-item-divider {
   font-size: $list-md-header-font-size;
   color: $list-md-header-color;
 }
-
-ion-list {
-  margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
-
-  .item .item-inner {
-    border-bottom: 1px solid $list-md-border-color;
-  }
-
-  > .item:first-child,
-  > .item-wrapper:first-child .item {
-    border-top: 1px solid $list-md-border-color;
-  }
-
-  > .item:last-child,
-  > .item-wrapper:last-child .item {
-    border-bottom: 1px solid $list-md-border-color;
-  }
-
-  > .item:last-child,
-  > .item-wrapper:last-child {
-    ion-label,
-    .item-inner {
-      border-bottom: 0;
-    }
-  }
-
-  > ion-input:last-child::after {
-    left: 0;
-  }
-
-  ion-item-options {
-    border-bottom: 1px solid $list-md-border-color;
-  }
-
-  ion-item-options button,
-  ion-item-options [button] {
-    display: inline-flex;
-
-    align-items: center;
-
-    margin: 1px 0;
-
-    height: calc(100% - 2px);
-
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-
-    box-sizing: border-box;
-
-    &::before {
-      margin: 0 auto;
-    }
-  }
-
-  // If the item has the no-lines attribute remove the bottom border from:
-  // the item itself (for last-child items)
-  // the item-inner class (if it is not last)
-  .item[no-lines],
-  .item[no-lines] .item-inner {
-    border-width: 0;
-  }
-
-  + ion-list {
-    ion-list-header {
-      margin-top: -$list-md-margin-top;
-      padding-top: 0;
-    }
-  }
-}
-
-
-//
-// INSET LIST
-//
-
-ion-list[inset] {
-  margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left;
-
-  border-radius: $list-inset-md-border-radius;
-
-  .item:first-child {
-    border-top-width: 0;
-    border-top-left-radius: $list-inset-md-border-radius;
-    border-top-right-radius: $list-inset-md-border-radius;
-  }
-
-  .item:last-child {
-    border-bottom-width: 0;
-    border-bottom-left-radius: $list-inset-md-border-radius;
-    border-bottom-right-radius: $list-inset-md-border-radius;
-  }
-
-  .item-input {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  + ion-list[inset] {
-    margin-top: 0;
-  }
-
-  ion-list-header {
-    background-color: $list-md-background-color;
-  }
-}
-
-
-//
-// NO LINES LIST
-//
-
-ion-list[no-lines] {
-  .item,
-  ion-item-options,
-  .item .item-inner {
-    border-width: 0;
-  }
-}
diff --git a/src/components/list/list.wp.scss b/src/components/list/list.wp.scss
index 3989dc312b..4f5847819d 100644
--- a/src/components/list/list.wp.scss
+++ b/src/components/list/list.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./list";
+@import "../../themes/ionic.globals.wp";
 
 // Windows List
 // --------------------------------------------------
@@ -20,12 +19,122 @@ $list-wp-header-font-size:       2rem !default;
 $list-wp-header-color:           $list-wp-text-color !default;
 
 
-//
-// DEFAULT LIST
-//
+// Windows Default List
+// --------------------------------------------------
 
-ion-list-header,
-ion-item-divider {
+.list-wp {
+  margin: 0 $list-wp-margin-right $list-wp-margin-bottom $list-wp-margin-left;
+}
+
+.list-wp .item-block .item-inner {
+  border-bottom: 1px solid $list-wp-border-color;
+}
+
+.list-wp > .item-block:first-child,
+.list-wp > .item-wrapper:first-child .item-block {
+  border-top: 1px solid $list-wp-border-color;
+}
+
+.list-wp > .item-block:last-child,
+.list-wp > .item-wrapper:last-child .item-block {
+  border-bottom: 1px solid $list-wp-border-color;
+}
+
+.list-wp > .item-block:last-child,
+.list-wp > .item-wrapper:last-child {
+  ion-label,
+  .item-inner {
+    border-bottom: 0;
+  }
+}
+
+.list-wp > ion-input:last-child::after {
+  left: 0;
+}
+
+.list-wp ion-item-options .button {
+  display: inline-flex;
+
+  align-items: center;
+
+  margin: 1px 0;
+
+  height: calc(100% - 2px);
+
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+
+  box-sizing: border-box;
+}
+
+.list-wp ion-item-options .button::before {
+  margin: 0 auto;
+}
+
+// If the item has the no-lines attribute remove the bottom border from:
+// the item itself (for last-child items)
+// the item-inner class (if it is not last)
+.list-wp .item[no-lines],
+.list-wp .item[no-lines] .item-inner {
+  border-width: 0;
+}
+
+.list-wp + ion-list ion-list-header {
+  margin-top: -$list-wp-margin-top;
+  padding-top: 0;
+}
+
+
+// Windows Insert List
+// --------------------------------------------------
+
+.list-wp[inset] {
+  margin: $list-inset-wp-margin-top $list-inset-wp-margin-right $list-inset-wp-margin-bottom $list-inset-wp-margin-left;
+
+  border-radius: $list-inset-wp-border-radius;
+}
+
+.list-wp[inset] .item:first-child {
+  border-top-width: 0;
+  border-top-left-radius: $list-inset-wp-border-radius;
+  border-top-right-radius: $list-inset-wp-border-radius;
+}
+
+.list-wp[inset] .item:last-child {
+  border-bottom-width: 0;
+  border-bottom-left-radius: $list-inset-wp-border-radius;
+  border-bottom-right-radius: $list-inset-wp-border-radius;
+}
+
+.list-wp[inset] .item-input {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.list-wp[inset] + ion-list[inset] {
+  margin-top: 0;
+}
+
+.list-wp[inset] ion-list-header {
+  background-color: $list-wp-background-color;
+}
+
+
+// Windows No Lines List
+// --------------------------------------------------
+
+.list-wp[no-lines] .item,
+.list-wp[no-lines] .item .item-inner {
+  border-width: 0;
+}
+
+
+// Windows List Header / Divider
+// --------------------------------------------------
+
+.list-header-wp,
+.list-wp ion-item-divider {
   margin-left: 0;
   padding-left: $list-wp-header-padding-left;
 
@@ -33,117 +142,3 @@ ion-item-divider {
   font-size: $list-wp-header-font-size;
   color: $list-wp-header-color;
 }
-
-ion-list {
-  margin: 0 $list-wp-margin-right $list-wp-margin-bottom $list-wp-margin-left;
-
-  .item .item-inner {
-    border-bottom: 1px solid $list-wp-border-color;
-  }
-
-  > .item:first-child,
-  > .item-wrapper:first-child .item {
-    border-top: 1px solid $list-wp-border-color;
-  }
-
-  > .item:last-child,
-  > .item-wrapper:last-child .item {
-    border-bottom: 1px solid $list-wp-border-color;
-  }
-
-  > .item:last-child,
-  > .item-wrapper:last-child {
-    ion-label,
-    .item-inner {
-      border-bottom: 0;
-    }
-  }
-
-  > ion-input:last-child::after {
-    left: 0;
-  }
-
-  ion-item-options button,
-  ion-item-options [button] {
-    display: inline-flex;
-
-    align-items: center;
-
-    margin: 1px 0;
-
-    height: calc(100% - 2px);
-
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-
-    box-sizing: border-box;
-
-    &::before {
-      margin: 0 auto;
-    }
-  }
-
-  // If the item has the no-lines attribute remove the bottom border from:
-  // the item itself (for last-child items)
-  // the item-inner class (if it is not last)
-  .item[no-lines],
-  .item[no-lines] .item-inner {
-    border-width: 0;
-  }
-
-  + ion-list {
-    ion-list-header {
-      margin-top: -$list-wp-margin-top;
-      padding-top: 0;
-    }
-  }
-}
-
-
-//
-// INSET LIST
-//
-
-ion-list[inset] {
-  margin: $list-inset-wp-margin-top $list-inset-wp-margin-right $list-inset-wp-margin-bottom $list-inset-wp-margin-left;
-
-  border-radius: $list-inset-wp-border-radius;
-
-  .item:first-child {
-    border-top-width: 0;
-    border-top-left-radius: $list-inset-wp-border-radius;
-    border-top-right-radius: $list-inset-wp-border-radius;
-  }
-
-  .item:last-child {
-    border-bottom-width: 0;
-    border-bottom-left-radius: $list-inset-wp-border-radius;
-    border-bottom-right-radius: $list-inset-wp-border-radius;
-  }
-
-  .item-input {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  + ion-list[inset] {
-    margin-top: 0;
-  }
-
-  ion-list-header {
-    background-color: $list-wp-background-color;
-  }
-}
-
-
-//
-// NO LINES LIST
-//
-
-ion-list[no-lines] {
-  .item,
-  .item .item-inner {
-    border-width: 0;
-  }
-}
diff --git a/src/components/loading/loading.ios.scss b/src/components/loading/loading.ios.scss
index 7360fabba9..901a273ce4 100644
--- a/src/components/loading/loading.ios.scss
+++ b/src/components/loading/loading.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.core";
-@import "./loading";
+@import "../../themes/ionic.globals";
 
 // iOS Loading Indicator
 // --------------------------------------------------
@@ -22,7 +21,7 @@ $loading-ios-spinner-crescent-color:    $loading-ios-spinner-color !default;
 $loading-ios-spinner-dots-color:        $loading-ios-spinner-color !default;
 
 
-.loading-wrapper {
+.loading-ios .loading-wrapper {
   padding: $loading-ios-padding;
 
   max-width: $loading-ios-max-width;
@@ -37,11 +36,11 @@ $loading-ios-spinner-dots-color:        $loading-ios-spinner-color !default;
 // iOS Loading Content
 // -----------------------------------------
 
-.loading-content {
+.loading-ios .loading-content {
   font-weight: $loading-ios-content-font-weight;
 }
 
-.loading-spinner + .loading-content {
+.loading-ios .loading-spinner + .loading-content {
   margin-left: 16px;
 }
 
@@ -49,25 +48,23 @@ $loading-ios-spinner-dots-color:        $loading-ios-spinner-color !default;
 // iOS Loading Spinner fill colors
 // -----------------------------------------
 
-.loading-spinner {
-  .spinner-ios line,
-  .spinner-ios-small line {
-    stroke: $loading-ios-spinner-ios-color;
-  }
-
-  .spinner-bubbles circle {
-    fill: $loading-ios-spinner-bubbles-color;
-  }
-
-  .spinner-circles circle {
-    fill: $loading-ios-spinner-circles-color;
-  }
-
-  .spinner-crescent circle {
-    stroke: $loading-ios-spinner-crescent-color;
-  }
-
-  .spinner-dots circle {
-    fill: $loading-ios-spinner-dots-color;
-  }
+.loading-ios .spinner-ios line,
+.loading-ios .spinner-ios-small line {
+  stroke: $loading-ios-spinner-ios-color;
+}
+
+.loading-ios .spinner-bubbles circle {
+  fill: $loading-ios-spinner-bubbles-color;
+}
+
+.loading-ios .spinner-circles circle {
+  fill: $loading-ios-spinner-circles-color;
+}
+
+.loading-ios .spinner-crescent circle {
+  stroke: $loading-ios-spinner-crescent-color;
+}
+
+.loading-ios .spinner-dots circle {
+  fill: $loading-ios-spinner-dots-color;
 }
diff --git a/src/components/loading/loading.md.scss b/src/components/loading/loading.md.scss
index bc21e1febf..9a2b534f5a 100644
--- a/src/components/loading/loading.md.scss
+++ b/src/components/loading/loading.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.core";
-@import "./loading";
+@import "../../themes/ionic.globals";
 
 // Material Design Loading Indicator
 // --------------------------------------------------
@@ -22,7 +21,7 @@ $loading-md-spinner-crescent-color:    $loading-md-spinner-color !default;
 $loading-md-spinner-dots-color:        $loading-md-spinner-color !default;
 
 
-.loading-wrapper {
+.loading-md .loading-wrapper {
   padding: $loading-md-padding;
 
   max-width: $loading-md-max-width;
@@ -39,7 +38,7 @@ $loading-md-spinner-dots-color:        $loading-md-spinner-color !default;
 // Material Design Loading Content
 // -----------------------------------------
 
-.loading-spinner + .loading-content {
+.loading-md .loading-spinner + .loading-content {
   margin-left: 16px;
 }
 
@@ -47,25 +46,23 @@ $loading-md-spinner-dots-color:        $loading-md-spinner-color !default;
 // Material Design Loading Spinner fill colors
 // -----------------------------------------
 
-.loading-spinner {
-  .spinner-ios line,
-  .spinner-ios-small line {
-    stroke: $loading-md-spinner-ios-color;
-  }
-
-  .spinner-bubbles circle {
-    fill: $loading-md-spinner-bubbles-color;
-  }
-
-  .spinner-circles circle {
-    fill: $loading-md-spinner-circles-color;
-  }
-
-  .spinner-crescent circle {
-    stroke: $loading-md-spinner-crescent-color;
-  }
-
-  .spinner-dots circle {
-    fill: $loading-md-spinner-dots-color;
-  }
+.loading-md .spinner-ios line,
+.loading-md .spinner-ios-small line {
+  stroke: $loading-md-spinner-ios-color;
+}
+
+.loading-md .spinner-bubbles circle {
+  fill: $loading-md-spinner-bubbles-color;
+}
+
+.loading-md .spinner-circles circle {
+  fill: $loading-md-spinner-circles-color;
+}
+
+.loading-md .spinner-crescent circle {
+  stroke: $loading-md-spinner-crescent-color;
+}
+
+.loading-md .spinner-dots circle {
+  fill: $loading-md-spinner-dots-color;
 }
diff --git a/src/components/loading/loading.wp.scss b/src/components/loading/loading.wp.scss
index 50bd066273..622f463a22 100644
--- a/src/components/loading/loading.wp.scss
+++ b/src/components/loading/loading.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.core";
-@import "./loading";
+@import "../../themes/ionic.globals";
 
 // Windows Loading Indicator
 // --------------------------------------------------
@@ -20,7 +19,7 @@ $loading-wp-spinner-crescent-color:    $loading-wp-spinner-color !default;
 $loading-wp-spinner-dots-color:        $loading-wp-spinner-color !default;
 
 
-.loading-wrapper {
+.loading-wp .loading-wrapper {
   padding: $loading-wp-padding;
 
   max-width: $loading-wp-max-width;
@@ -35,7 +34,7 @@ $loading-wp-spinner-dots-color:        $loading-wp-spinner-color !default;
 // Windows Loading Content
 // -----------------------------------------
 
-.loading-spinner + .loading-content {
+.loading-wp .loading-spinner + .loading-content {
   margin-left: 16px;
 }
 
@@ -43,25 +42,23 @@ $loading-wp-spinner-dots-color:        $loading-wp-spinner-color !default;
 // Windows Loading Spinner fill colors
 // -----------------------------------------
 
-.loading-spinner {
-  .spinner-ios line,
-  .spinner-ios-small line {
-    stroke: $loading-wp-spinner-ios-color;
-  }
-
-  .spinner-bubbles circle {
-    fill: $loading-wp-spinner-bubbles-color;
-  }
-
-  .spinner-circles circle {
-    fill: $loading-wp-spinner-circles-color;
-  }
-
-  .spinner-crescent circle {
-    stroke: $loading-wp-spinner-crescent-color;
-  }
-
-  .spinner-dots circle {
-    fill: $loading-wp-spinner-dots-color;
-  }
+.loading-wp .spinner-ios line,
+.loading-wp .spinner-ios-small line {
+  stroke: $loading-wp-spinner-ios-color;
+}
+
+.loading-wp .spinner-bubbles circle {
+  fill: $loading-wp-spinner-bubbles-color;
+}
+
+.loading-wp .spinner-circles circle {
+  fill: $loading-wp-spinner-circles-color;
+}
+
+.loading-wp .spinner-crescent circle {
+  stroke: $loading-wp-spinner-crescent-color;
+}
+
+.loading-wp .spinner-dots circle {
+  fill: $loading-wp-spinner-dots-color;
 }
diff --git a/src/components/menu/menu.ios.scss b/src/components/menu/menu.ios.scss
index 98b94b89ab..74f0ff5b88 100644
--- a/src/components/menu/menu.ios.scss
+++ b/src/components/menu/menu.ios.scss
@@ -1,4 +1,4 @@
-@import "../../globals.ios";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Menu
 // --------------------------------------------------
@@ -8,18 +8,18 @@ $menu-ios-box-shadow-color:      rgba(0, 0, 0, .25) !default;
 $menu-ios-box-shadow:            0 0 10px $menu-ios-box-shadow-color !default;
 
 
-.menu-inner {
+.ios .menu-inner {
   background: $menu-ios-background;
 }
 
-.menu-content-reveal {
+.ios .menu-content-reveal {
   box-shadow: $menu-ios-box-shadow;
 }
 
-.menu-content-push {
+.ios .menu-content-push {
   box-shadow: $menu-ios-box-shadow;
 }
 
-ion-menu[type=overlay] .menu-inner {
+.ios ion-menu[type=overlay] .menu-inner {
   box-shadow: $menu-ios-box-shadow;
 }
diff --git a/src/components/menu/menu.md.scss b/src/components/menu/menu.md.scss
index f884bb91ae..8217800b31 100644
--- a/src/components/menu/menu.md.scss
+++ b/src/components/menu/menu.md.scss
@@ -1,4 +1,4 @@
-@import "../../globals.md";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Menu
 // --------------------------------------------------
@@ -8,18 +8,18 @@ $menu-md-box-shadow-color:      rgba(0, 0, 0, .25) !default;
 $menu-md-box-shadow:            0 0 10px $menu-md-box-shadow-color !default;
 
 
-.menu-inner {
+.md .menu-inner {
   background: $menu-md-background;
 }
 
-.menu-content-reveal {
+.md .menu-content-reveal {
   box-shadow: $menu-md-box-shadow;
 }
 
-.menu-content-push {
+.md .menu-content-push {
   box-shadow: $menu-md-box-shadow;
 }
 
-ion-menu[type=overlay] .menu-inner {
+.md ion-menu[type=overlay] .menu-inner {
   box-shadow: $menu-md-box-shadow;
 }
diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss
index b892ba3b1c..b6abe1e60e 100644
--- a/src/components/menu/menu.scss
+++ b/src/components/menu/menu.scss
@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Menu
 // --------------------------------------------------
@@ -15,10 +15,10 @@ ion-menu {
   left: 0;
 
   display: none;
+}
 
-  &.show-menu {
-    display: block;
-  }
+ion-menu.show-menu {
+  display: block;
 }
 
 
@@ -99,8 +99,8 @@ ion-menu[type=reveal].show-menu .menu-inner {
 
 ion-menu[type=overlay] {
   z-index: $z-index-menu-overlay;
-
-  .show-backdrop {
-    display: block;
-  }
+}
+
+ion-menu[type=overlay] .show-backdrop {
+  display: block;
 }
diff --git a/src/components/menu/menu.wp.scss b/src/components/menu/menu.wp.scss
index 5a35114238..a4b393a475 100644
--- a/src/components/menu/menu.wp.scss
+++ b/src/components/menu/menu.wp.scss
@@ -1,4 +1,4 @@
-@import "../../globals.wp";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Menu
 // --------------------------------------------------
@@ -6,6 +6,6 @@
 $menu-wp-background:            #f2f2f2 !default;
 
 
-.menu-inner {
+.wp .menu-inner {
   background: $menu-wp-background;
 }
diff --git a/src/components/modal/modal.ios.scss b/src/components/modal/modal.ios.scss
index 4d6337a398..40854e802f 100644
--- a/src/components/modal/modal.ios.scss
+++ b/src/components/modal/modal.ios.scss
@@ -1,4 +1,4 @@
-@import "../../globals.ios";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Modals
 // --------------------------------------------------
@@ -6,7 +6,7 @@
 $modal-ios-background-color:          $background-ios-color !default;
 $modal-ios-border-radius:             5px !default;
 
-.modal-wrapper {
+.ios .modal-wrapper {
   // hidden by default to prevent flickers, the animation will show it
   transform: translate3d(0, 100%, 0);
 }
diff --git a/src/components/modal/modal.md.scss b/src/components/modal/modal.md.scss
index 1e1d123bdd..7c6eb35509 100644
--- a/src/components/modal/modal.md.scss
+++ b/src/components/modal/modal.md.scss
@@ -1,11 +1,11 @@
-@import "../../globals.md";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Modals
 // --------------------------------------------------
 
 $modal-md-background-color:          $background-md-color !default;
 
-.modal-wrapper {
+.md .modal-wrapper {
   opacity: .01;
   transform: translate3d(0, 40px, 0);
 }
diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss
index da81f77d04..ea4ab5307c 100644
--- a/src/components/modal/modal.scss
+++ b/src/components/modal/modal.scss
@@ -1,4 +1,4 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Modals
 // --------------------------------------------------
@@ -19,11 +19,11 @@ ion-modal {
 
   width: 100%;
   height: 100%;
+}
 
-  ion-backdrop {
-    @media not all and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
-      visibility: hidden;
-    }
+ion-modal ion-backdrop {
+  @media not all and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
+    visibility: hidden;
   }
 }
 
@@ -50,16 +50,3 @@ ion-modal {
     height: $modal-inset-height-large;
   }
 }
-
-// TODO remove with the structure changes
-ion-modal-inner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-
-  flex-direction: column;
-
-  width: 100%;
-  height: 100%;
-}
diff --git a/src/components/modal/modal.wp.scss b/src/components/modal/modal.wp.scss
index 52d24ffcad..69532a6dd9 100644
--- a/src/components/modal/modal.wp.scss
+++ b/src/components/modal/modal.wp.scss
@@ -1,11 +1,11 @@
-@import "../../globals.wp";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Modals
 // --------------------------------------------------
 
 $modal-wp-background-color:          $background-wp-color !default;
 
-.modal-wrapper {
+.wp .modal-wrapper {
   opacity: .01;
   transform: translate3d(0, 40px, 0);
 }
diff --git a/src/components/picker/picker.ios.scss b/src/components/picker/picker.ios.scss
index a254a7230b..dbd7e9c73d 100644
--- a/src/components/picker/picker.ios.scss
+++ b/src/components/picker/picker.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./picker";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Picker
 // --------------------------------------------------
@@ -12,7 +11,7 @@ $picker-ios-toolbar-height:                    44px !default;
 $picker-ios-toolbar-background-color:          $picker-ios-background-color !default;
 
 $picker-ios-button-height:                     $picker-ios-toolbar-height !default;
-$picker-ios-button-text-color:                 $link-ios-color !default;
+$picker-ios-button-text-color:                 color($colors-ios, primary) !default;
 $picker-ios-button-background-color:           transparent !default;
 
 $picker-ios-column-padding:                    0 4px !default;
@@ -24,10 +23,8 @@ $picker-ios-option-font-size:                  20px !default;
 $picker-ios-option-height:                     42px !default;
 $picker-ios-option-offset-y:                   (($picker-ios-height - $picker-ios-toolbar-height) / 2) - ($picker-ios-option-height / 2) - 10 !default;
 
-$picker-highlight-opacity:                     .8 !default;
 
-
-.picker-wrapper {
+.picker-ios .picker-wrapper {
   height: $picker-ios-height;
 
   border-top: 1px solid $picker-ios-border-color;
@@ -35,35 +32,30 @@ $picker-highlight-opacity:                     .8 !default;
   background: $picker-ios-background-color;
 }
 
-.picker-toolbar {
+.picker-ios .picker-toolbar {
   display: flex;
 
   height: $picker-ios-toolbar-height;
 
-  border-bottom: 1px solid $picker-ios-border-color;
+  border-bottom: $hairlines-width solid $picker-ios-border-color;
 
   background: $picker-ios-toolbar-background-color;
 }
 
-.hairlines .picker-wrapper,
-.hairlines .picker-toolbar {
-  border-width: $hairlines-width;
-}
-
-.picker-toolbar-button {
+.picker-ios .picker-toolbar-button {
   flex: 1;
 
   text-align: right;
 }
 
-.picker-toolbar-cancel {
+.picker-ios .picker-toolbar-cancel {
   font-weight: normal;
 
   text-align: left;
 }
 
-.picker-button,
-.picker-button.activated {
+.picker-ios .picker-button,
+.picker-ios .picker-button.activated {
   margin: 0;
 
   height: $picker-ios-button-height;
@@ -78,15 +70,15 @@ $picker-highlight-opacity:                     .8 !default;
   perspective: $picker-ios-column-perspective;
 }
 
-.picker-col {
+.picker-ios .picker-col {
   padding: $picker-ios-column-padding;
 
   transform-style: preserve-3d;
 }
 
-.picker-prefix,
-.picker-suffix,
-.picker-opts {
+.picker-ios .picker-prefix,
+.picker-ios .picker-suffix,
+.picker-ios .picker-opts {
   top: $picker-ios-option-offset-y;
 
   font-size: $picker-ios-option-font-size;
@@ -98,7 +90,7 @@ $picker-highlight-opacity:                     .8 !default;
   pointer-events: none;
 }
 
-.picker-opt {
+.picker-ios .picker-opt {
   margin: 0;
   padding: $picker-ios-option-padding;
 
@@ -115,7 +107,7 @@ $picker-highlight-opacity:                     .8 !default;
   pointer-events: auto;
 }
 
-.picker-above-highlight {
+.picker-ios .picker-above-highlight {
   position: absolute;
   top: 0;
   left: 0;
@@ -134,7 +126,7 @@ $picker-highlight-opacity:                     .8 !default;
   transform: translate3d(0, 0, 90px);
 }
 
-.picker-below-highlight {
+.picker-ios .picker-below-highlight {
   position: absolute;
   top: $picker-ios-option-offset-y + $picker-ios-option-height - 4;
   left: 0;
diff --git a/src/components/picker/picker.md.scss b/src/components/picker/picker.md.scss
index 8c10eb7335..424ab4bb21 100644
--- a/src/components/picker/picker.md.scss
+++ b/src/components/picker/picker.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./picker";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Picker
 // --------------------------------------------------
@@ -12,7 +11,7 @@ $picker-md-toolbar-height:                    44px !default;
 $picker-md-toolbar-background-color:          $picker-md-background-color !default;
 
 $picker-md-button-height:                     $picker-md-toolbar-height !default;
-$picker-md-button-text-color:                 $link-md-color !default;
+$picker-md-button-text-color:                 color($colors-md, primary) !default;
 $picker-md-button-background-color:           transparent !default;
 
 $picker-md-column-padding:                    0 8px !default;
@@ -24,20 +23,18 @@ $picker-md-option-height:                     42px !default;
 $picker-md-option-offset-y:                   (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default;
 
 $picker-md-option-selected-font-size:         22px !default;
-$picker-md-option-selected-color:             $link-md-color !default;
-
-$picker-highlight-opacity:                     .8 !default;
+$picker-md-option-selected-color:             color($colors-md, primary) !default;
 
 
-.picker-wrapper {
+.picker-md .picker-wrapper {
   height: $picker-md-height;
 
-  border-top: 1px solid $picker-md-border-color;
+  border-top: $hairlines-width solid $picker-md-border-color;
 
   background: $picker-md-background-color;
 }
 
-.picker-toolbar {
+.picker-md .picker-toolbar {
   display: flex;
 
   justify-content: flex-end;
@@ -47,13 +44,8 @@ $picker-highlight-opacity:                     .8 !default;
   background: $picker-md-toolbar-background-color;
 }
 
-.hairlines .picker-wrapper,
-.hairlines .picker-toolbar {
-  border-width: $hairlines-width;
-}
-
-.picker-button,
-.picker-button.activated {
+.picker-md .picker-button,
+.picker-md .picker-button.activated {
   margin: 0;
 
   height: $picker-md-button-height;
@@ -64,21 +56,21 @@ $picker-highlight-opacity:                     .8 !default;
   box-shadow: none;
 }
 
-.picker-columns {
+.picker-md .picker-columns {
   height: $picker-md-height - $picker-md-toolbar-height;
 
   perspective: 1800px;
 }
 
-.picker-col {
+.picker-md .picker-col {
   padding: $picker-md-column-padding;
 
   transform-style: preserve-3d;
 }
 
-.picker-prefix,
-.picker-suffix,
-.picker-opts {
+.picker-md .picker-prefix,
+.picker-md .picker-suffix,
+.picker-md .picker-opts {
   top: $picker-md-option-offset-y;
 
   font-size: $picker-md-option-font-size;
@@ -90,11 +82,11 @@ $picker-highlight-opacity:                     .8 !default;
   pointer-events: none;
 }
 
-.picker-opts ion-button-effect {
+.picker-md .picker-opts .button-effect {
   display: none;
 }
 
-.picker-opt {
+.picker-md .picker-opt {
   margin: 0;
   padding: $picker-md-option-padding;
 
@@ -110,19 +102,19 @@ $picker-highlight-opacity:                     .8 !default;
   pointer-events: auto;
 }
 
-.picker-opt .button-inner {
+.picker-md .picker-opt .button-inner {
   transition: 200ms;
 }
 
-.picker-prefix,
-.picker-suffix,
-.picker-opt-selected {
+.picker-md .picker-prefix,
+.picker-md .picker-suffix,
+.picker-md .picker-opt-selected {
   font-size: $picker-md-option-selected-font-size;
 
   color: $picker-md-option-selected-color;
 }
 
-.picker-above-highlight {
+.picker-md .picker-above-highlight {
   position: absolute;
   top: 0;
   left: 0;
@@ -140,7 +132,7 @@ $picker-highlight-opacity:                     .8 !default;
   transform: translate3d(0, 0, 90px);
 }
 
-.picker-below-highlight {
+.picker-md .picker-below-highlight {
   position: absolute;
   top: $picker-md-option-offset-y + $picker-md-option-height - 4;
   left: 0;
diff --git a/src/components/picker/picker.wp.scss b/src/components/picker/picker.wp.scss
index a1603409bc..212e2b8b2a 100644
--- a/src/components/picker/picker.wp.scss
+++ b/src/components/picker/picker.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./picker";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Picker
 // --------------------------------------------------
@@ -12,7 +11,7 @@ $picker-wp-toolbar-height:                    44px !default;
 $picker-wp-toolbar-background-color:          $picker-wp-background-color !default;
 
 $picker-wp-button-height:                     $picker-wp-toolbar-height !default;
-$picker-wp-button-text-color:                 $link-wp-color !default;
+$picker-wp-button-text-color:                 color($colors-wp, primary) !default;
 $picker-wp-button-background-color:           transparent !default;
 
 $picker-wp-column-padding:                    0 4px !default;
@@ -24,48 +23,43 @@ $picker-wp-option-height:                     42px !default;
 $picker-wp-option-offset-y:                   (($picker-wp-height - $picker-wp-toolbar-height) / 2) - ($picker-wp-option-height / 2) - 10 !default;
 
 $picker-wp-option-selected-font-size:         22px !default;
-$picker-wp-option-selected-color:             $link-wp-color !default;
-
-$picker-highlight-opacity:                     .8 !default;
+$picker-wp-option-selected-color:             color($colors-wp, primary) !default;
 
 
-.picker-wrapper {
+.picker-wp .picker-wrapper {
   height: $picker-wp-height;
 
-  border-top: 1px solid $picker-wp-border-color;
+  border-top: $hairlines-width solid $picker-wp-border-color;
 
   background: $picker-wp-background-color;
 }
 
-.picker-toolbar {
+.picker-wp .picker-toolbar {
   display: flex;
 
   justify-content: flex-end;
 
   height: $picker-wp-toolbar-height;
 
+  border-width: $hairlines-width;
+
   background: $picker-wp-toolbar-background-color;
 }
 
-.hairlines .picker-wrapper,
-.hairlines .picker-toolbar {
-  border-width: $hairlines-width;
-}
-
-.picker-toolbar-button {
+.picker-wp .picker-toolbar-button {
   flex: 1;
 
   text-align: right;
 }
 
-.picker-toolbar-cancel {
+.picker-wp .picker-toolbar-cancel {
   font-weight: normal;
 
   text-align: left;
 }
 
-.picker-button,
-.picker-button.activated {
+.picker-wp .picker-button,
+.picker-wp .picker-button.activated {
   margin: 0;
 
   height: $picker-wp-button-height;
@@ -76,21 +70,21 @@ $picker-highlight-opacity:                     .8 !default;
   box-shadow: none;
 }
 
-.picker-columns {
+.picker-wp .picker-columns {
   height: $picker-wp-height - $picker-wp-toolbar-height;
 
   perspective: 1800px;
 }
 
-.picker-col {
+.picker-wp .picker-col {
   padding: $picker-wp-column-padding;
 
   transform-style: preserve-3d;
 }
 
-.picker-prefix,
-.picker-suffix,
-.picker-opts {
+.picker-wp .picker-prefix,
+.picker-wp .picker-suffix,
+.picker-wp .picker-opts {
   top: $picker-wp-option-offset-y;
 
   font-size: $picker-wp-option-font-size;
@@ -102,11 +96,11 @@ $picker-highlight-opacity:                     .8 !default;
   pointer-events: none;
 }
 
-.picker-opts ion-button-effect {
+.picker-wp .picker-opts .button-effect {
   display: none;
 }
 
-.picker-opt {
+.picker-wp .picker-opt {
   margin: 0;
   padding: $picker-wp-option-padding;
 
@@ -122,19 +116,19 @@ $picker-highlight-opacity:                     .8 !default;
   pointer-events: auto;
 }
 
-.picker-opt .button-inner {
+.picker-wp .picker-opt .button-inner {
   transition: 200ms;
 }
 
-.picker-prefix,
-.picker-suffix,
-.picker-opt-selected {
+.picker-wp .picker-prefix,
+.picker-wp .picker-suffix,
+.picker-wp .picker-opt-selected {
   font-size: $picker-wp-option-selected-font-size;
 
   color: $picker-wp-option-selected-color;
 }
 
-.picker-above-highlight {
+.picker-wp .picker-above-highlight {
   position: absolute;
   top: 0;
   left: 0;
@@ -152,7 +146,7 @@ $picker-highlight-opacity:                     .8 !default;
   transform: translate3d(0, 0, 90px);
 }
 
-.picker-below-highlight {
+.picker-wp .picker-below-highlight {
   position: absolute;
   top: $picker-wp-option-offset-y + $picker-wp-option-height - 4;
   left: 0;
diff --git a/src/components/popover/popover.ios.scss b/src/components/popover/popover.ios.scss
index 1f28e5a7cd..6f1b88710a 100644
--- a/src/components/popover/popover.ios.scss
+++ b/src/components/popover/popover.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.core";
-@import "./popover";
+@import "../../themes/ionic.globals";
 
 // iOS Popover
 // --------------------------------------------------
@@ -17,7 +16,7 @@ $popover-ios-item-background:           $popover-ios-background !default;
 $popover-ios-arrow-background:          $popover-ios-background !default;
 
 
-.popover-content {
+.popover-ios .popover-content {
   width: $popover-ios-width;
   min-width: $popover-ios-min-width;
   min-height: $popover-ios-min-height;
@@ -32,7 +31,7 @@ $popover-ios-arrow-background:          $popover-ios-background !default;
   }
 }
 
-.popover-content .item {
+.popover-ios .popover-content .item {
   background-color: $popover-ios-item-background;
 }
 
@@ -40,7 +39,7 @@ $popover-ios-arrow-background:          $popover-ios-background !default;
 // Popover Arrow
 // -----------------------------------------
 
-.popover-arrow {
+.popover-ios .popover-arrow {
   position: absolute;
   display: block;
 
@@ -48,30 +47,30 @@ $popover-ios-arrow-background:          $popover-ios-background !default;
 
   width: 20px;
   height: 10px;
-
-  &::after {
-    position: absolute;
-
-    top: 3px;
-    left: 3px;
-
-    z-index: $z-index-overlay-wrapper;
-
-    width: 14px;
-    height: 14px;
-
-    border-radius: 3px;
-    background-color: $popover-ios-arrow-background;
-    content: "";
-    transform: rotate(45deg);
-  }
 }
 
-.popover-bottom .popover-arrow {
+.popover-ios .popover-arrow::after {
+  position: absolute;
+
+  top: 3px;
+  left: 3px;
+
+  z-index: $z-index-overlay-wrapper;
+
+  width: 14px;
+  height: 14px;
+
+  border-radius: 3px;
+  background-color: $popover-ios-arrow-background;
+  content: "";
+  transform: rotate(45deg);
+}
+
+.popover-ios .popover-bottom .popover-arrow {
   top: auto;
   bottom: -10px;
-
-  &::after {
-    top: -6px;
-  }
+}
+
+.popover-ios .popover-bottom .popover-arrow::after {
+  top: -6px;
 }
diff --git a/src/components/popover/popover.md.scss b/src/components/popover/popover.md.scss
index 022f02397d..98e5bf5483 100644
--- a/src/components/popover/popover.md.scss
+++ b/src/components/popover/popover.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.core";
-@import "./popover";
+@import "../../themes/ionic.globals";
 
 // Material Design Popover
 // --------------------------------------------------
@@ -18,7 +17,7 @@ $popover-md-box-shadow:                0 3px 12px 2px $popover-md-box-shadow-col
 $popover-md-item-background:           $popover-md-background !default;
 
 
-.popover-content {
+.popover-md .popover-content {
   width: $popover-md-width;
   min-width: $popover-md-min-width;
   min-height: $popover-md-min-height;
@@ -30,17 +29,17 @@ $popover-md-item-background:           $popover-md-background !default;
   box-shadow: $popover-md-box-shadow;
 
   transform-origin: top left;
-
-  ion-content {
-    background: $popover-md-background;
-  }
 }
 
-.popover-content .item {
+.popover-md .popover-content ion-content {
+  background: $popover-md-background;
+}
+
+.popover-md .popover-content .item {
   background-color: $popover-md-item-background;
 }
 
-.popover-viewport {
+.popover-md .popover-viewport {
   opacity: 0;
   transition-delay: 100ms;
 }
diff --git a/src/components/popover/popover.wp.scss b/src/components/popover/popover.wp.scss
index 528cf9e601..e70f4dddd4 100644
--- a/src/components/popover/popover.wp.scss
+++ b/src/components/popover/popover.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.core";
-@import "./popover";
+@import "../../themes/ionic.globals";
 
 // Windows Popover
 // --------------------------------------------------
@@ -17,7 +16,7 @@ $popover-wp-background:                #f2f2f2 !default;
 $popover-wp-item-background:           $popover-wp-background !default;
 
 
-.popover-content {
+.popover-wp .popover-content {
   width: $popover-wp-width;
   min-width: $popover-wp-min-width;
   min-height: $popover-wp-min-height;
@@ -29,17 +28,17 @@ $popover-wp-item-background:           $popover-wp-background !default;
   background: $popover-wp-background;
 
   transform-origin: top left;
-
-  ion-content {
-    background: $popover-wp-background;
-  }
 }
 
-.popover-content .item {
+.popover-wp ion-content {
+  background: $popover-wp-background;
+}
+
+.popover-wp .popover-content .item {
   background-color: $popover-wp-item-background;
 }
 
-.popover-viewport {
+.popover-wp .popover-viewport {
   opacity: 0;
   transition-delay: 100ms;
 }
diff --git a/src/components/radio/radio.ios.scss b/src/components/radio/radio.ios.scss
index 0060d18dd5..d47340a19c 100644
--- a/src/components/radio/radio.ios.scss
+++ b/src/components/radio/radio.ios.scss
@@ -1,4 +1,4 @@
-@import "../../globals.ios";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Radio
 // --------------------------------------------------
@@ -16,7 +16,7 @@ $radio-ios-item-left-margin:       8px 21px 8px 3px !default;
 $radio-ios-item-right-margin:      $item-ios-padding-media-top 11px $item-ios-padding-media-bottom ($item-ios-padding-left / 2) !default;
 
 
-ion-radio {
+.radio-ios {
   position: relative;
   display: inline-block;
 }
@@ -25,7 +25,7 @@ ion-radio {
 // iOS Radio Circle: Unchecked
 // -----------------------------------------
 
-.radio-icon {
+.radio-ios .radio-icon {
   position: relative;
   display: block;
 
@@ -37,7 +37,7 @@ ion-radio {
 // iOS Radio Checkmark: Checked
 // -----------------------------------------
 
-.radio-checked .radio-inner {
+.radio-ios .radio-checked .radio-inner {
   position: absolute;
   top: 4px;
   left: 7px;
@@ -57,8 +57,8 @@ ion-radio {
 // iOS Radio: Disabled
 // -----------------------------------------
 
-.radio-disabled,
-.item-radio-disabled ion-label {
+.radio-ios.radio-disabled,
+.item-ios.item-radio-disabled ion-label {
   opacity: $radio-ios-disabled-opacity;
 
   pointer-events: none;
@@ -68,7 +68,7 @@ ion-radio {
 // iOS Radio Within An Item
 // -----------------------------------------
 
-.item ion-radio {
+.item-ios .radio-ios {
   position: static;
   display: block;
 
@@ -79,7 +79,7 @@ ion-radio {
   }
 }
 
-.item-radio ion-label {
+.item-radio.item-ios ion-label {
   margin-left: 0;
 }
 
@@ -87,7 +87,7 @@ ion-radio {
 // iOS Radio Item Label: Checked
 // -----------------------------------------
 
-.item-radio-checked ion-label {
+.item-radio-checked.item-ios ion-label {
   color: $radio-ios-color-on;
 }
 
@@ -97,19 +97,16 @@ ion-radio {
 
 @mixin radio-theme-ios($color-name, $color-base) {
 
-  .item-radio-#{$color-name}.item-radio-checked {
-    ion-label {
-      color: $color-base;
-    }
+  .item-radio-ios-#{$color-name}.item-radio-checked ion-label {
+    color: $color-base;
   }
 
-  .radio-#{$color-name} .radio-checked {
+  .radio-ios-#{$color-name} .radio-checked {
     color: $color-base;
+  }
 
-    .radio-inner {
-      border-color: $color-base;
-    }
-
+  .radio-ios-#{$color-name} .radio-checked  .radio-inner {
+    border-color: $color-base;
   }
 
 }
@@ -119,7 +116,5 @@ ion-radio {
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-
   @include radio-theme-ios($color-name, $color-base);
-
 }
diff --git a/src/components/radio/radio.md.scss b/src/components/radio/radio.md.scss
index 521baa12cd..57b276b1a7 100644
--- a/src/components/radio/radio.md.scss
+++ b/src/components/radio/radio.md.scss
@@ -1,4 +1,4 @@
-@import "../../globals.md";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Radio
 // --------------------------------------------------
@@ -20,7 +20,7 @@ $radio-md-disabled-opacity:       .3 !default;
 $radio-md-item-left-margin:       11px 36px 10px 4px !default;
 $radio-md-item-right-margin:      $item-md-padding-media-top 10px $item-md-padding-media-bottom 0 !default;
 
-ion-radio {
+.radio-md {
   position: relative;
   display: inline-block;
 }
@@ -29,7 +29,7 @@ ion-radio {
 // Material Design Radio Outer Circle: Unchecked
 // -----------------------------------------
 
-.radio-icon {
+.radio-md .radio-icon {
   position: relative;
   top: 0;
   left: 0;
@@ -50,7 +50,7 @@ ion-radio {
 // Material Design Radio Inner Circle: Unchecked
 // -----------------------------------------
 
-.radio-inner {
+.radio-md .radio-inner {
   position: absolute;
   top: $radio-md-icon-border-width;
   left: $radio-md-icon-border-width;
@@ -68,7 +68,7 @@ ion-radio {
 // Material Design Radio Outer Circle: Checked
 // -----------------------------------------
 
-.radio-checked {
+.radio-md .radio-checked {
   border-color: $radio-md-color-on;
 }
 
@@ -76,7 +76,7 @@ ion-radio {
 // Material Design Radio Inner Circle: Checked
 // -----------------------------------------
 
-.radio-checked .radio-inner {
+.radio-md .radio-checked .radio-inner {
   transform: scale3d(1, 1, 1);
 }
 
@@ -84,8 +84,8 @@ ion-radio {
 // Material Design Radio: Disabled
 // -----------------------------------------
 
-.radio-disabled,
-.item-radio-disabled ion-label {
+.radio-md.radio-disabled,
+.item-md.item-radio-disabled ion-label {
   opacity: $radio-md-disabled-opacity;
 
   pointer-events: none;
@@ -95,7 +95,7 @@ ion-radio {
 // Material Design Radio Within An Item
 // -----------------------------------------
 
-.item ion-radio {
+.item-md .radio-md {
   position: static;
   display: block;
 
@@ -106,7 +106,7 @@ ion-radio {
   }
 }
 
-.item-radio ion-label {
+.item-radio.item-md ion-label {
   margin-left: 0;
 }
 
@@ -114,7 +114,7 @@ ion-radio {
 // Material Design Radio Item Label: Checked
 // -----------------------------------------
 
-.item-radio-checked ion-label {
+.item-radio-checked.item-md ion-label {
   color: $radio-md-color-on;
 }
 
@@ -124,22 +124,16 @@ ion-radio {
 
 @mixin radio-theme-md($color-name, $color-base, $color-contrast) {
 
-  .item-radio-#{$color-name}.item-radio-checked {
-    ion-label {
-      color: $color-base;
-    }
+  .item-radio-md-#{$color-name}.item-radio-checked ion-label {
+    color: $color-base;
   }
 
-  .radio-#{$color-name} {
-
-    .radio-checked {
-      border-color: $color-base;
-    }
-
-    .radio-inner {
-      background-color: $color-base;
-    }
+  .radio-md-#{$color-name} .radio-checked {
+    border-color: $color-base;
+  }
 
+  .radio-md-#{$color-name} .radio-inner {
+    background-color: $color-base;
   }
 
 }
@@ -149,7 +143,5 @@ ion-radio {
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
-
   @include radio-theme-md($color-name, $color-base, $color-contrast);
-
 }
diff --git a/src/components/radio/radio.wp.scss b/src/components/radio/radio.wp.scss
index 979a06dece..d0aa21dbac 100644
--- a/src/components/radio/radio.wp.scss
+++ b/src/components/radio/radio.wp.scss
@@ -1,4 +1,4 @@
-@import "../../globals.wp";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Radio
 // --------------------------------------------------
@@ -21,7 +21,7 @@ $radio-wp-item-left-margin:       9px 20px 9px 4px !default;
 $radio-wp-item-right-margin:      11px 10px 10px 0 !default;
 
 
-ion-radio {
+.radio-wp {
   position: relative;
   display: inline-block;
 }
@@ -30,7 +30,7 @@ ion-radio {
 // Windows Radio Outer Circle: Unchecked
 // -----------------------------------------
 
-.radio-icon {
+.radio-wp .radio-icon {
   position: relative;
   top: 0;
   left: 0;
@@ -51,7 +51,7 @@ ion-radio {
 // Windows Radio Inner Circle: Unchecked
 // -----------------------------------------
 
-.radio-inner {
+.radio-wp .radio-inner {
   position: absolute;
   top: $radio-wp-icon-border-width;
   left: $radio-wp-icon-border-width;
@@ -68,7 +68,7 @@ ion-radio {
 // Windows Radio Outer Circle: Checked
 // -----------------------------------------
 
-.radio-checked {
+.radio-wp .radio-checked {
   border-color: $radio-wp-color-on;
 }
 
@@ -76,7 +76,7 @@ ion-radio {
 // Windows Radio Inner Circle: Checked
 // -----------------------------------------
 
-.radio-checked .radio-inner {
+.radio-wp .radio-checked .radio-inner {
   // transform: scale3d(1, 1, 1);
   display: block;
 }
@@ -85,8 +85,8 @@ ion-radio {
 // Windows Radio: Disabled
 // -----------------------------------------
 
-.radio-disabled,
-.item-radio-disabled ion-label {
+.radio-wp.radio-disabled,
+.item-wp.item-radio-disabled ion-label {
   opacity: $radio-wp-disabled-opacity;
 
   pointer-events: none;
@@ -96,7 +96,7 @@ ion-radio {
 // Windows Radio Within An Item
 // -----------------------------------------
 
-.item ion-radio {
+.item-wp .radio-wp {
   position: static;
   display: block;
 
@@ -111,7 +111,7 @@ ion-radio {
   }
 }
 
-.item-radio ion-label {
+.item-radio.item-wp ion-label {
   margin-left: 0;
 }
 
@@ -121,12 +121,8 @@ ion-radio {
 
 @mixin radio-theme-wp($color-name, $color-base) {
 
-  .radio-#{$color-name} {
-
-    .radio-checked {
-      border-color: $color-base;
-    }
-
+  .radio-wp-#{$color-name} .radio-checked {
+    border-color: $color-base;
   }
 
 }
@@ -136,7 +132,5 @@ ion-radio {
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
-
   @include radio-theme-wp($color-name, $color-base);
-
 }
diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss
index 8ffcf51e6d..24eb24c0c3 100644
--- a/src/components/range/range.ios.scss
+++ b/src/components/range/range.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./range";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Range
 // --------------------------------------------------
@@ -34,32 +33,27 @@ $range-ios-pin-font-size:                     12px !default;
 $range-ios-pin-padding:                       8px !default;
 
 
-ion-range {
+.range-ios {
   padding: $range-ios-padding-vertical $range-ios-padding-horizontal;
 }
 
-[range-left],
-[range-right] {
-  margin: 0 20px;
+.range-ios [range-left] {
+  margin: 0 20px 0 0;
 }
 
-[range-left] {
-  margin-left: 0;
+.range-ios [range-right] {
+  margin: 0 0 0 20px;
 }
 
-[range-right] {
-  margin-right: 0;
-}
-
-.range-has-pin {
+.range-ios.range-has-pin {
   padding-top: $range-ios-padding-vertical + $range-ios-pin-font-size;
 }
 
-.range-slider {
+.range-ios .range-slider {
   height: $range-ios-slider-height;
 }
 
-.range-bar {
+.range-ios .range-bar {
   position: absolute;
   top: ($range-ios-slider-height / 2);
   left: 0;
@@ -74,15 +68,15 @@ ion-range {
   pointer-events: none;
 }
 
-.range-pressed .range-bar-active {
+.range-ios.range-pressed .range-bar-active {
   will-change: left, right;
 }
 
-.range-pressed .range-knob-handle {
+.range-ios.range-pressed .range-knob-handle {
   will-change: left;
 }
 
-.range-bar-active {
+.range-ios .range-bar-active {
   bottom: 0;
 
   width: auto;
@@ -90,7 +84,7 @@ ion-range {
   background: $range-ios-bar-active-background-color;
 }
 
-.range-knob-handle {
+.range-ios .range-knob-handle {
   position: absolute;
   top: ($range-ios-slider-height / 2);
   left: 0%;
@@ -104,7 +98,7 @@ ion-range {
   text-align: center;
 }
 
-.range-knob {
+.range-ios .range-knob {
   position: absolute;
   top: ($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2) - .5px;
   left: ($range-ios-hit-width / 2) - ($range-ios-knob-width / 2);
@@ -121,7 +115,7 @@ ion-range {
   pointer-events: none;
 }
 
-.range-tick {
+.range-ios .range-tick {
   position: absolute;
   top: ($range-ios-hit-height / 2) - ($range-ios-tick-height / 2) + ($range-ios-bar-height / 2);
 
@@ -137,11 +131,11 @@ ion-range {
   pointer-events: none;
 }
 
-.range-tick-active {
+.range-ios .range-tick-active {
   background: $range-ios-tick-active-background-color;
 }
 
-.range-pin {
+.range-ios .range-pin {
   position: relative;
   top: -20px;
   display: inline-block;
@@ -164,11 +158,11 @@ ion-range {
   transition: transform 120ms ease;
 }
 
-.range-knob-pressed .range-pin {
+.range-ios .range-knob-pressed .range-pin {
   transform: translate3d(0, 0, 0) scale(1);
 }
 
-.range-disabled {
+.range-ios.range-disabled {
   opacity: .5;
 }
 
@@ -178,7 +172,7 @@ ion-range {
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
-  .range-#{$color-name} {
+  .range-ios-#{$color-name} {
     .range-bar-active,
     .range-tick-active {
       background: $color-base;
diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss
index 3035b099f5..9db94123e9 100644
--- a/src/components/range/range.md.scss
+++ b/src/components/range/range.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./range";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Range
 // --------------------------------------------------
@@ -38,32 +37,27 @@ $range-md-pin-padding-horizontal:            0 !default;
 $range-md-pin-min-background-color:          $range-md-bar-background-color !default;
 
 
-ion-range {
+.range-md {
   padding: $range-md-padding-vertical $range-md-padding-horizontal;
 }
 
-[range-left],
-[range-right] {
-  margin: 0 12px;
+.range-md [range-left] {
+  margin: 0 12px 0 0;
 }
 
-[range-left] {
-  margin-left: 0;
+.range-md [range-right] {
+  margin: 0 0 0 12px;
 }
 
-[range-right] {
-  margin-right: 0;
-}
-
-.range-has-pin {
+.range-md.range-has-pin {
   padding-top: $range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical;
 }
 
-.range-slider {
+.range-md .range-slider {
   height: $range-md-slider-height;
 }
 
-.range-bar {
+.range-md .range-bar {
   position: absolute;
   top: ($range-md-slider-height / 2);
   left: 0;
@@ -76,15 +70,15 @@ ion-range {
   pointer-events: none;
 }
 
-.range-pressed .range-bar-active {
+.range-md.range-pressed .range-bar-active {
   will-change: left, right;
 }
 
-.range-pressed .range-knob-handle {
+.range-md.range-pressed .range-knob-handle {
   will-change: left;
 }
 
-.range-bar-active {
+.range-md .range-bar-active {
   bottom: 0;
 
   width: auto;
@@ -92,7 +86,7 @@ ion-range {
   background: $range-md-bar-active-background-color;
 }
 
-.range-knob-handle {
+.range-md .range-knob-handle {
   position: absolute;
   top: ($range-md-slider-height / 2);
   left: 0%;
@@ -106,7 +100,7 @@ ion-range {
   text-align: center;
 }
 
-.range-knob {
+.range-md .range-knob {
   position: absolute;
 
   top: ($range-md-hit-height / 2) - ($range-md-knob-height / 2) + ($range-md-bar-height / 2);
@@ -129,7 +123,7 @@ ion-range {
   pointer-events: none;
 }
 
-.range-tick {
+.range-md .range-tick {
   position: absolute;
 
   top: ($range-md-hit-height / 2) - ($range-md-tick-height / 2) + ($range-md-bar-height / 2);
@@ -148,11 +142,11 @@ ion-range {
   pointer-events: none;
 }
 
-.range-tick-active {
+.range-md .range-tick-active {
   background: $range-md-tick-active-background-color;
 }
 
-.range-pin {
+.range-md .range-pin {
   position: relative;
   top: -20px;
   display: inline-block;
@@ -195,16 +189,16 @@ ion-range {
   }
 }
 
-.range-knob-pressed .range-pin {
+.range-md .range-knob-pressed .range-pin {
   transform: translate3d(0, 0, 0) scale(1);
 }
 
-ion-range:not(.range-has-pin) .range-knob-pressed .range-knob {
+.range-md:not(.range-has-pin) .range-knob-pressed .range-knob {
   transform: scale(1);
 }
 
 @mixin md-range-min() {
-  .range-knob-min {
+  .range-md .range-knob-min.range-knob-min {
     .range-knob {
       border: $range-md-knob-min-border;
       background: $range-md-knob-min-background-color;
@@ -220,7 +214,7 @@ ion-range:not(.range-has-pin) .range-knob-pressed .range-knob {
 
 @include md-range-min();
 
-.range-disabled {
+.range-md.range-disabled {
   .range-bar-active {
     background-color: $range-md-bar-background-color;
   }
@@ -239,7 +233,7 @@ ion-range:not(.range-has-pin) .range-knob-pressed .range-knob {
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  .range-#{$color-name} {
+  .range-md-#{$color-name} {
     @include md-range-min();
 
     .range-bar-active,
diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss
index c032ca7480..fb82eb6c60 100644
--- a/src/components/range/range.wp.scss
+++ b/src/components/range/range.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./range";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Range
 // --------------------------------------------------
@@ -33,32 +32,27 @@ $range-wp-pin-font-size:                     12px !default;
 $range-wp-pin-padding:                       8px !default;
 
 
-ion-range {
+.range-wp {
   padding: $range-wp-padding-vertical $range-wp-padding-horizontal;
 }
 
-[range-left],
-[range-right] {
-  margin: 0 12px;
+.range-wp [range-left] {
+  margin: 0 12px 0 0;
 }
 
-[range-left] {
-  margin-left: 0;
+.range-wp [range-right] {
+  margin: 0 0 0 12px;
 }
 
-[range-right] {
-  margin-right: 0;
-}
-
-.range-has-pin {
+.range-wp.range-has-pin {
   padding-top: $range-wp-padding-vertical + $range-wp-pin-font-size + $range-wp-pin-padding;
 }
 
-.range-slider {
+.range-wp .range-slider {
   height: $range-wp-slider-height;
 }
 
-.range-bar {
+.range-wp .range-bar {
   position: absolute;
   top: ($range-wp-slider-height / 2);
   left: 0;
@@ -71,15 +65,15 @@ ion-range {
   pointer-events: none;
 }
 
-.range-pressed .range-bar-active {
+.range-wp.range-pressed .range-bar-active {
   will-change: left, right;
 }
 
-.range-pressed .range-knob-handle {
+.range-wp.range-pressed .range-knob-handle {
   will-change: left;
 }
 
-.range-bar-active {
+.range-wp .range-bar-active {
   bottom: 0;
 
   width: auto;
@@ -87,7 +81,7 @@ ion-range {
   background: $range-wp-bar-active-background-color;
 }
 
-.range-knob-handle {
+.range-wp .range-knob-handle {
   position: absolute;
   top: ($range-wp-slider-height / 2);
   left: 0%;
@@ -101,7 +95,7 @@ ion-range {
   text-align: center;
 }
 
-.range-knob {
+.range-wp .range-knob {
   position: absolute;
   top: ($range-wp-hit-height / 2) - ($range-wp-knob-height / 2) + ($range-wp-bar-height / 2);
   left: ($range-wp-hit-width / 2) - ($range-wp-knob-width / 2);
@@ -116,7 +110,7 @@ ion-range {
   pointer-events: none;
 }
 
-.range-tick {
+.range-wp .range-tick {
   position: absolute;
   top: ($range-wp-hit-height / 2) - ($range-wp-tick-height / 2) + ($range-wp-bar-height / 2);
 
@@ -132,11 +126,11 @@ ion-range {
   pointer-events: none;
 }
 
-.range-tick-active {
+.range-wp .range-tick-active {
   background: $range-wp-tick-active-background-color;
 }
 
-.range-pin {
+.range-wp .range-pin {
   position: relative;
   top: -24px;
   display: inline-block;
@@ -159,11 +153,11 @@ ion-range {
   transition: transform 120ms ease;
 }
 
-.range-knob-pressed .range-pin {
+.range-wp .range-knob-pressed .range-pin {
   transform: translate3d(0, 0, 0) scale(1);
 }
 
-.range-disabled {
+.range-wp.range-disabled {
   opacity: .5;
 }
 
@@ -172,7 +166,7 @@ ion-range {
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
-  .range-#{$color-name} {
+  .range-wp-#{$color-name} {
     .range-bar-active,
     .range-tick-active,
     .range-knob,
diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss
index a49c7f69ed..b1cea8f18f 100644
--- a/src/components/searchbar/searchbar.ios.scss
+++ b/src/components/searchbar/searchbar.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./searchbar";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Searchbar
 // --------------------------------------------------
@@ -30,13 +29,13 @@ $searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 // Searchbar
 // -----------------------------------------
 
-ion-searchbar {
+.searchbar-ios {
   padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right;
 
   min-height: $searchbar-ios-min-height;
 
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid $searchbar-ios-border-color;
+  border-top: $hairlines-width solid transparent;
+  border-bottom: $hairlines-width solid $searchbar-ios-border-color;
   background: $searchbar-ios-background-color;
 }
 
@@ -53,14 +52,15 @@ ion-searchbar {
 // Searchbar Search Icon
 // -----------------------------------------
 
-.searchbar-search-icon {
+.searchbar-ios .searchbar-search-icon {
   @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $searchbar-ios-input-search-icon-color);
-  @include calc(margin-left, "50% - 60px");
 
   position: absolute;
   top: 9px;
   left: 9px;
 
+  margin-left: calc(50% - 60px);
+
   width: $searchbar-ios-input-search-icon-size + 1;
   height: $searchbar-ios-input-search-icon-size + 1;
 
@@ -74,9 +74,8 @@ ion-searchbar {
 // Searchbar Input Field
 // -----------------------------------------
 
-.searchbar-input {
+.searchbar-ios .searchbar-input {
   @include placeholder($searchbar-ios-input-placeholder-color);
-  @include calc(padding-left, "50% - 28px");
 
   padding: 0 28px;
 
@@ -96,7 +95,7 @@ ion-searchbar {
 // Searchbar Clear Input Icon
 // -----------------------------------------
 
-.searchbar-clear-icon {
+.searchbar-ios .searchbar-clear-icon {
   @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $searchbar-ios-input-clear-icon-color);
 
   position: absolute;
@@ -115,7 +114,7 @@ ion-searchbar {
 // Searchbar Cancel (iOS only)
 // -----------------------------------------
 
-.searchbar-ios-cancel {
+.searchbar-ios .searchbar-ios-cancel {
   display: none;
 
   flex-shrink: 0;
@@ -137,115 +136,92 @@ ion-searchbar {
   pointer-events: none;
 }
 
-.searchbar-show-cancel .searchbar-ios-cancel {
+.searchbar-ios.searchbar-show-cancel .searchbar-ios-cancel {
   display: block;
 }
 
+
 // Searchbar Left Aligned (iOS only)
 // -----------------------------------------
 
-.searchbar-left-aligned {
-  .searchbar-search-icon {
-    margin-left: 0;
-  }
+.searchbar-ios.searchbar-left-aligned .searchbar-search-icon {
+  margin-left: 0;
+}
 
-  .searchbar-input {
-    padding-left: 30px;
-  }
+.searchbar-ios.searchbar-left-aligned .searchbar-input {
+  padding-left: 30px;
 }
 
 
 // Searchbar Has Focus
 // -----------------------------------------
 
-.searchbar-has-focus {
-  .searchbar-ios-cancel {
-    opacity: 1;
+.searchbar-ios.searchbar-has-focus .searchbar-ios-cancel {
+  opacity: 1;
 
-    pointer-events: auto;
-  }
+  pointer-events: auto;
 }
 
 
 // Searchbar in Toolbar
 // -----------------------------------------
 
-.toolbar {
+.toolbar .searchbar-ios {
+  border-bottom-width: 0;
+  background: transparent;
+}
 
-  ion-searchbar {
-    border-bottom-width: 0;
-    background: transparent;
+.toolbar .searchbar-ios .searchbar-input {
+  background: $searchbar-ios-toolbar-input-background;
+}
 
-    .searchbar-input {
-      background: $searchbar-ios-toolbar-input-background;
-    }
-
-    .searchbar-ios-cancel {
-      padding: 0;
-    }
-  }
-
-  .searchbar-has-focus .searchbar-ios-cancel {
-    padding-left: 8px;
-  }
+.toolbar .searchbar-ios .searchbar-ios-cancel {
+  padding: 0;
+}
 
+.toolbar .searchbar-ios.searchbar-has-focus .searchbar-ios-cancel {
+  padding-left: 8px;
 }
 
 
 // Searchbar Cancel (MD only)
 // -----------------------------------------
 
-.searchbar-md-cancel {
+.searchbar-ios .searchbar-md-cancel {
   display: none;
 }
 
 
-// Searchbar Hairlines (iOS only)
-// -----------------------------------------
-
-&.hairlines ion-searchbar {
-  border-bottom-width: $hairlines-width;
-}
-
-&.hairlines ion-toolbar ion-searchbar {
-  border-bottom-width: 0;
-}
-
-
 // Generate Default Search Bar Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
   $fg-color: rgba($color-contrast, .5);
 
-  .searchbar-#{$color-name} {
-    .searchbar-ios-cancel {
-      color: $color-base;
-
-      &:hover:not(.disable-hover) {
-        color: color-shade($color-base);
-      }
-    }
+  .searchbar-ios-#{$color-name} .searchbar-ios-cancel {
+    color: $color-base;
   }
 
-  .toolbar-#{$color-name} ion-searchbar {
-    .searchbar-search-icon {
-      @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $fg-color);
-    }
+  .searchbar-ios-#{$color-name} .searchbar-ios-cancel:hover:not(.disable-hover) {
+    color: color-shade($color-base);
+  }
 
-    .searchbar-input {
-      @include placeholder($fg-color);
-      color: $color-contrast;
-      background: rgba($color-contrast, .08);
-    }
+  .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-search-icon {
+    @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $fg-color);
+  }
 
-    .searchbar-clear-icon {
-      @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $fg-color);
-    }
+  .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-input {
+    @include placeholder($fg-color);
+    color: $color-contrast;
+    background: rgba($color-contrast, .08);
+  }
 
-    .searchbar-ios-cancel {
-      color: color-contrast($colors-ios, $color-base, ios);
-    }
+  .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-clear-icon {
+    @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $fg-color);
+  }
+
+  .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-ios-cancel {
+    color: color-contrast($colors-ios, $color-base, ios);
   }
 
 }
diff --git a/src/components/searchbar/searchbar.md.scss b/src/components/searchbar/searchbar.md.scss
index 4f5692643a..135474a4ba 100644
--- a/src/components/searchbar/searchbar.md.scss
+++ b/src/components/searchbar/searchbar.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./searchbar";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Searchbar
 // --------------------------------------------------
@@ -27,7 +26,7 @@ $searchbar-md-input-clear-icon-size:     22px !default;
 // Searchbar
 // -----------------------------------------
 
-ion-searchbar {
+.searchbar-md {
   padding: $searchbar-md-padding;
 
   background: $searchbar-md-background-color;
@@ -37,7 +36,7 @@ ion-searchbar {
 // Searchbar Search Icon
 // -----------------------------------------
 
-.searchbar-search-icon {
+.searchbar-md .searchbar-search-icon {
   @include svg-background-image($searchbar-md-input-search-icon-svg);
 
   top: 11px;
@@ -51,7 +50,7 @@ ion-searchbar {
 // Searchbar Cancel Icon (MD only)
 // -----------------------------------------
 
-.searchbar-md-cancel {
+.searchbar-md .searchbar-md-cancel {
   top: 0;
   left: 10px;
   display: none;
@@ -65,23 +64,24 @@ ion-searchbar {
 // Searchbar Search & Cancel Icon
 // -----------------------------------------
 
-.searchbar-search-icon,
-.searchbar-md-cancel {
+.searchbar-md .searchbar-search-icon,
+.searchbar-md .searchbar-md-cancel {
   position: absolute;
 
   background-repeat: no-repeat;
   background-size: $searchbar-md-input-search-icon-size;
+}
 
-  &.activated {
-    background-color: transparent;
-  }
+.searchbar-md .searchbar-search-icon.activated,
+.searchbar-md .searchbar-md-cancel.activated {
+  background-color: transparent;
 }
 
 
 // Searchbar Input Field
 // -----------------------------------------
 
-.searchbar-input {
+.searchbar-md .searchbar-input {
   @include placeholder($searchbar-md-input-placeholder-color);
 
   padding: 6px 55px;
@@ -105,7 +105,7 @@ ion-searchbar {
 // Searchbar Clear Input Icon
 // -----------------------------------------
 
-.searchbar-clear-icon {
+.searchbar-md .searchbar-clear-icon {
   @include svg-background-image($searchbar-md-input-clear-icon-svg);
 
   position: absolute;
@@ -120,44 +120,40 @@ ion-searchbar {
   background-repeat: no-repeat;
   background-position: center;
   background-size: $searchbar-md-input-clear-icon-size;
+}
 
-  &.activated {
-    background-color: transparent;
-  }
+.searchbar-md .searchbar-clear-icon.activated {
+  background-color: transparent;
 }
 
 
 // Searchbar Focused
 // -----------------------------------------
 
-.searchbar-has-focus.searchbar-show-cancel {
-  .searchbar-search-icon {
-    display: none;
-  }
+.searchbar-md .searchbar-has-focus.searchbar-show-cancel .searchbar-search-icon {
+  display: none;
+}
 
-  .searchbar-md-cancel {
-    display: inline-flex;
-  }
+.searchbar-md .searchbar-has-focus.searchbar-show-cancel .searchbar-md-cancel {
+  display: inline-flex;
 }
 
 
 // Searchbar in Toolbar
 // -----------------------------------------
 
-.toolbar {
-  ion-searchbar {
-    padding: 3px;
-  }
+.toolbar .searchbar-md {
+  padding: 3px;
+}
 
-  .searchbar-md-cancel {
-    left: 14px;
-  }
+.toolbar .searchbar-md .searchbar-md-cancel {
+  left: 14px;
 }
 
 
 // Searchbar Cancel Icon (iOS only)
 // -----------------------------------------
 
-.searchbar-ios-cancel {
+.searchbar-md .searchbar-ios-cancel {
   display: none;
 }
diff --git a/src/components/searchbar/searchbar.wp.scss b/src/components/searchbar/searchbar.wp.scss
index 9ca9872d41..72e889a93d 100644
--- a/src/components/searchbar/searchbar.wp.scss
+++ b/src/components/searchbar/searchbar.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./searchbar";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Searchbar
 // --------------------------------------------------
@@ -33,20 +32,20 @@ $searchbar-wp-input-clear-icon-size:     22px !default;
 // Searchbar
 // -----------------------------------------
 
-ion-searchbar {
+.searchbar-wp {
   padding: $searchbar-wp-padding;
 
   background: $searchbar-wp-background-color;
 }
 
-.searchbar-input-container {
+.searchbar-wp .searchbar-input-container {
   border: $searchbar-wp-border-width solid $searchbar-wp-border-color;
 }
 
 // Searchbar Search Icon
 // -----------------------------------------
 
-.searchbar-search-icon {
+.searchbar-wp .searchbar-search-icon {
   @include svg-background-image($searchbar-wp-input-search-icon-svg);
 
   position: absolute;
@@ -58,17 +57,17 @@ ion-searchbar {
 
   background-repeat: no-repeat;
   background-size: $searchbar-wp-input-search-icon-size;
+}
 
-  &.activated {
-    background-color: transparent;
-  }
+.searchbar-wp .searchbar-search-icon.activated {
+  background-color: transparent;
 }
 
 
 // Searchbar Input Field
 // -----------------------------------------
 
-.searchbar-input {
+.searchbar-wp .searchbar-input {
   @include placeholder($searchbar-wp-input-placeholder-color);
 
   padding: $searchbar-wp-input-padding-vertical $searchbar-wp-input-padding-horizontal;
@@ -90,7 +89,7 @@ ion-searchbar {
 // Searchbar Clear Input Icon
 // -----------------------------------------
 
-.searchbar-clear-icon {
+.searchbar-wp .searchbar-clear-icon {
   @include svg-background-image($searchbar-wp-input-clear-icon-svg);
 
   position: absolute;
@@ -105,17 +104,17 @@ ion-searchbar {
   background-repeat: no-repeat;
   background-position: center;
   background-size: $searchbar-wp-input-clear-icon-size;
+}
 
-  &.activated {
-    background-color: transparent;
-  }
+.searchbar-wp .searchbar-clear-icon.activated {
+  background-color: transparent;
 }
 
 
 // Searchbar Focused
 // -----------------------------------------
 
-.searchbar-has-focus .searchbar-input-container {
+.searchbar-wp.searchbar-has-focus .searchbar-input-container {
   border-color: $searchbar-wp-border-color-focused;
 }
 
@@ -123,7 +122,7 @@ ion-searchbar {
 // Searchbar Left Aligned
 // -----------------------------------------
 
-.searchbar-has-value .searchbar-search-icon {
+.searchbar-wp.searchbar-has-value .searchbar-search-icon {
   display: none;
 }
 
@@ -131,7 +130,7 @@ ion-searchbar {
 // Searchbar Cancel Icon (iOS only)
 // -----------------------------------------
 
-.searchbar-ios-cancel {
+.searchbar-wp .searchbar-ios-cancel {
   display: none;
 }
 
@@ -139,17 +138,15 @@ ion-searchbar {
 // Searchbar Cancel Icon (MD only)
 // -----------------------------------------
 
-.searchbar-md-cancel {
+.searchbar-wp .searchbar-md-cancel {
   display: none;
 }
 
 // Searchbar in Toolbar
 // -----------------------------------------
 
-.toolbar {
-  ion-searchbar {
-    padding: 2px;
-  }
+.toolbar .searchbar-wp {
+  padding: 2px;
 }
 
 
@@ -158,7 +155,7 @@ ion-searchbar {
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
-  .searchbar-#{$color-name}.searchbar-has-focus .searchbar-input-container {
+  .searchbar-wp-#{$color-name}.searchbar-has-focus .searchbar-input-container {
     border-color: $color-base;
   }
 
diff --git a/src/components/segment/segment.ios.scss b/src/components/segment/segment.ios.scss
index 656db700fd..4b7b24812e 100644
--- a/src/components/segment/segment.ios.scss
+++ b/src/components/segment/segment.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./segment";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Segment
 // --------------------------------------------------
@@ -33,7 +32,7 @@ $segment-button-ios-toolbar-icon-size:          2.2rem !default;
 $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
 
 
-.segment-button {
+.segment-ios .segment-button {
   flex: 1;
 
   width: 0;
@@ -90,33 +89,34 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
   }
 }
 
-.segment-button-disabled {
+.segment-ios .segment-button-disabled {
   color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-disabled);
 
   pointer-events: none;
 }
 
-.toolbar {
 
-  ion-segment {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
+// iOS Segment in Toolbar
+// --------------------------------------------------
 
-  .segment-button {
-    max-width: $segment-button-ios-toolbar-button-max-width;
-    height: $segment-button-ios-toolbar-button-height;
+.toolbar-ios .segment-ios {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
 
-    font-size: $segment-button-ios-toolbar-font-size;
-    line-height: $segment-button-ios-toolbar-line-height;
+.toolbar-ios .segment-button {
+  max-width: $segment-button-ios-toolbar-button-max-width;
+  height: $segment-button-ios-toolbar-button-height;
 
-    ion-icon {
-      font-size: $segment-button-ios-toolbar-icon-size;
-      line-height: $segment-button-ios-toolbar-icon-line-height;
-    }
+  font-size: $segment-button-ios-toolbar-font-size;
+  line-height: $segment-button-ios-toolbar-line-height;
+
+  ion-icon {
+    font-size: $segment-button-ios-toolbar-icon-size;
+    line-height: $segment-button-ios-toolbar-icon-line-height;
   }
 }
 
@@ -126,7 +126,7 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
 
 @mixin ios-segment-button($color-name, $color-base, $color-contrast) {
 
-  .segment-#{$color-name} {
+  .segment-ios-#{$color-name} {
 
     .segment-button {
       border-color: $color-base;
@@ -162,7 +162,7 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
 
   @include ios-segment-button($color-name, $color-base, $color-contrast);
 
-  .toolbar-#{$color-name} .segment-button.segment-activated {
+  .toolbar-ios-#{$color-name} .segment-ios .segment-button.segment-activated {
     color: $color-base;
   }
 }
diff --git a/src/components/segment/segment.md.scss b/src/components/segment/segment.md.scss
index dca6bbe4aa..6f670a2563 100644
--- a/src/components/segment/segment.md.scss
+++ b/src/components/segment/segment.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./segment";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Segment
 // --------------------------------------------------
@@ -22,7 +21,7 @@ $segment-button-md-icon-size:                  2.6rem !default;
 $segment-button-md-icon-line-height:           $segment-button-md-line-height !default;
 
 
-.segment-button {
+.segment-md .segment-button {
   flex: 1;
 
   padding: $segment-button-md-padding;
@@ -56,7 +55,7 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
   }
 }
 
-.segment-button-disabled {
+.segment-md .segment-button-disabled {
   opacity: $segment-button-md-opacity-disabled;
 
   pointer-events: none;
@@ -64,12 +63,12 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 
 .toolbar {
 
-  ion-segment {
+  .segment-md {
     margin: 0 auto;
   }
 
-  .segment-button.activated,
-  .segment-button.segment-activated {
+  .segment-md .segment-button.activated,
+  .segment-md .segment-button.segment-activated {
     opacity: 1;
   }
 
@@ -81,7 +80,7 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 
 @mixin md-segment-button($color-name, $color-base, $color-contrast) {
 
-  .segment-#{$color-name} .segment-button {
+  .segment-md-#{$color-name} .segment-button {
     color: $color-base;
 
     &.activated,
diff --git a/src/components/segment/segment.wp.scss b/src/components/segment/segment.wp.scss
index 2c3fa2fd5a..a7485c7d7f 100644
--- a/src/components/segment/segment.wp.scss
+++ b/src/components/segment/segment.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./segment";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Segment
 // --------------------------------------------------
@@ -22,11 +21,11 @@ $segment-button-wp-opacity-disabled:           .3 !default;
 
 $segment-button-wp-buttons-justify-content:    flex-start !default;
 
-ion-segment {
+.segment-wp {
   justify-content: $segment-button-wp-buttons-justify-content;
 }
 
-.segment-button {
+.segment-wp .segment-button {
   padding: $segment-button-wp-padding;
 
   height: $segment-button-wp-height;
@@ -51,7 +50,7 @@ ion-segment {
   }
 }
 
-.segment-button-disabled {
+.segment-wp .segment-button-disabled {
   opacity: $segment-button-wp-opacity-disabled;
 
   pointer-events: none;
@@ -59,7 +58,7 @@ ion-segment {
 
 .toolbar {
 
-  ion-segment {
+  .segment-wp {
     margin: 0 auto;
   }
 }
@@ -70,7 +69,7 @@ ion-segment {
 
 @mixin wp-segment-button($color-name, $color-base) {
 
-  .segment-#{$color-name} .segment-button {
+  .segment-wp-#{$color-name} .segment-button {
     color: $color-base;
 
     &.activated,
diff --git a/src/components/select/select.ios.scss b/src/components/select/select.ios.scss
index 9c9d23fc4d..b5ca935870 100644
--- a/src/components/select/select.ios.scss
+++ b/src/components/select/select.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./select";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Select
 // --------------------------------------------------
@@ -13,22 +12,22 @@ $select-ios-icon-color:          #999 !default;
 $select-ios-placeholder-color:   $select-ios-icon-color !default;
 
 
-ion-select {
+.select-ios {
   padding: $select-ios-padding-top $select-ios-padding-right  $select-ios-padding-bottom $select-ios-padding-left;
 }
 
-.select-placeholder {
+.select-ios .select-placeholder {
   color: $select-ios-placeholder-color;
 }
 
-.select-icon {
+.select-ios .select-icon {
   position: relative;
 
   width: 12px;
   height: 18px;
 }
 
-.select-icon .select-icon-inner {
+.select-ios .select-icon .select-icon-inner {
   position: absolute;
   top: 50%;
   left: 5px;
diff --git a/src/components/select/select.md.scss b/src/components/select/select.md.scss
index 1b4bfda4c6..f47338cbce 100644
--- a/src/components/select/select.md.scss
+++ b/src/components/select/select.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./select";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Select
 // --------------------------------------------------
@@ -13,26 +12,26 @@ $select-md-icon-color:          #999 !default;
 $select-md-placeholder-color:   $select-md-icon-color !default;
 
 
-ion-select {
+.select-md {
   padding: $select-md-padding-top $select-md-padding-right $select-md-padding-bottom $select-md-padding-left;
 }
 
-.select-placeholder {
+.select-md .select-placeholder {
   color: $select-md-placeholder-color;
 }
 
-.item-select ion-label {
+.select-md .item-select ion-label {
   margin-left: 0;
 }
 
-.select-icon {
+.select-md .select-icon {
   position: relative;
 
   width: 12px;
   height: 19px;
 }
 
-.select-icon .select-icon-inner {
+.select-md .select-icon .select-icon-inner {
   position: absolute;
   top: 50%;
   left: 5px;
diff --git a/src/components/select/select.wp.scss b/src/components/select/select.wp.scss
index ab76b8d397..f691e52fc4 100644
--- a/src/components/select/select.wp.scss
+++ b/src/components/select/select.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./select";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Select
 // --------------------------------------------------
@@ -22,7 +21,7 @@ $select-wp-icon-color:          $select-wp-border-color !default;
 $select-wp-placeholder-color:   $select-wp-icon-color !default;
 
 
-ion-select {
+.select-wp {
   flex: 1;
 
   margin: $select-wp-margin-top $select-wp-margin-right $select-wp-margin-bottom $select-wp-margin-left;
@@ -34,15 +33,15 @@ ion-select {
   line-height: 3rem;
 }
 
-.select-placeholder {
+.select-wp .select-placeholder {
   color: $select-wp-placeholder-color;
 }
 
-.item-select ion-label {
+.item-wp.item-select ion-label {
   margin-left: 0;
 }
 
-.select-icon {
+.select-wp .select-icon {
   position: relative;
 
   align-self: center;
@@ -51,7 +50,7 @@ ion-select {
   height: $select-wp-icon-width;
 }
 
-.select-icon .select-icon-inner {
+.select-wp .select-icon .select-icon-inner {
   position: absolute;
   top: 3px;
   left: 5px;
@@ -68,6 +67,6 @@ ion-select {
   pointer-events: none;
 }
 
-.select-text {
+.select-wp .select-text {
   min-height: 3rem;
 }
diff --git a/src/components/spinner/spinner.ios.scss b/src/components/spinner/spinner.ios.scss
index ab927cbc61..c311563b87 100644
--- a/src/components/spinner/spinner.ios.scss
+++ b/src/components/spinner/spinner.ios.scss
@@ -1,11 +1,10 @@
-@import "./spinner";
 
 // iOS Spinner
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
-  .spinner-#{$color-name} {
+  .spinner-ios-#{$color-name} {
 
     &.spinner-ios line,
     &.spinner-ios-small line,
diff --git a/src/components/spinner/spinner.md.scss b/src/components/spinner/spinner.md.scss
index dd60fb8cd2..02dd6ff416 100644
--- a/src/components/spinner/spinner.md.scss
+++ b/src/components/spinner/spinner.md.scss
@@ -1,11 +1,10 @@
-@import "./spinner";
 
 // Material Design Spinner
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  .spinner-#{$color-name} {
+  .spinner-md-#{$color-name} {
 
     &.spinner-ios line,
     &.spinner-ios-small line,
diff --git a/src/components/spinner/spinner.wp.scss b/src/components/spinner/spinner.wp.scss
index 6d96edefdb..e4900656ba 100644
--- a/src/components/spinner/spinner.wp.scss
+++ b/src/components/spinner/spinner.wp.scss
@@ -1,11 +1,10 @@
-@import "./spinner";
 
 // Windows Spinner
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
-  .spinner-#{$color-name} {
+  .spinner-wp-#{$color-name} {
 
     &.spinner-ios line,
     &.spinner-ios-small line,
diff --git a/src/components/tabs/tabs.ios.scss b/src/components/tabs/tabs.ios.scss
index fe802f5430..72134eb4ed 100644
--- a/src/components/tabs/tabs.ios.scss
+++ b/src/components/tabs/tabs.ios.scss
@@ -1,11 +1,10 @@
-@import "../../globals.ios";
-@import "./tabs";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Tabs
 // --------------------------------------------------
 
 /// @prop - Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
-$tabs-ios-border:                   1px solid $toolbar-ios-border-color !default;
+$tabs-ios-border:                   $hairlines-width solid $toolbar-ios-border-color !default;
 
 /// @prop - Background color of the tabbar
 $tabs-ios-background:               $toolbar-ios-background !default;
@@ -32,19 +31,19 @@ $tabs-ios-tab-font-size:            10px !default;
 $tabs-ios-tab-icon-size:            30px !default;
 
 
-ion-tabbar {
+.tabs-ios .tabbar {
   justify-content: center;
 
   border-top: $tabs-ios-border;
   background: $tabs-ios-background;
 }
 
-ion-tabs[tabsPlacement=top] ion-tabbar {
+.tabs-ios[tabsPlacement=top] .tabbar {
   border-top: 0;
   border-bottom: $tabs-ios-border;
 }
 
-.tab-button {
+.tabs-ios .tab-button {
   padding: $tabs-ios-tab-padding;
 
   max-width: $tabs-ios-tab-max-width;
@@ -53,12 +52,12 @@ ion-tabs[tabsPlacement=top] ion-tabbar {
   color: $tabs-ios-tab-color;
 }
 
-.tab-button:hover:not(.disable-hover),
-.tab-button[aria-selected=true] {
+.tabs-ios .tab-button:hover:not(.disable-hover),
+.tabs-ios .tab-button[aria-selected=true] {
   color: $tabs-ios-tab-color-active;
 }
 
-.tab-button-text {
+.tabs-ios .tab-button-text {
   margin-top: 0;
   margin-bottom: 0;
 
@@ -67,64 +66,51 @@ ion-tabs[tabsPlacement=top] ion-tabbar {
   font-size: $tabs-ios-tab-font-size;
 }
 
-.has-title-only .tab-button-text {
+.tabs-ios .has-title-only .tab-button-text {
   font-size: $tabs-ios-tab-font-size + 2;
 }
 
-.tab-button-icon {
+.tabs-ios .tab-button-icon {
   min-width: $tabs-ios-tab-icon-size + 5;
   height: $tabs-ios-tab-icon-size;
 
   font-size: $tabs-ios-tab-icon-size;
-
-  &::before {
-    vertical-align: top;
-  }
 }
 
-[tabsLayout=icon-right] .tab-button,
-[tabsLayout=icon-left] .tab-button {
-
-  .tab-button-text {
-    font-size: 1.4rem;
-    line-height: 1.1;
-  }
-
-  ion-icon {
-    min-width: 24px;
-    height: 26px;
-
-    font-size: 24px;
-  }
+.tabs-ios .tab-button-icon::before {
+  vertical-align: top;
 }
 
-[tabsLayout=icon-hide] .tab-button,
-.tab-button.has-title-only {
-  min-height: $tabs-ios-tab-min-height - 8;
-
-  .tab-button-text {
-    margin: 2px 0;
-
-    font-size: 1.4rem;
-    line-height: 1.1;
-  }
+.tabs-ios[tabsLayout=icon-right] .tab-button .tab-button-text,
+.tabs-ios[tabsLayout=icon-left] .tab-button .tab-button-text {
+  font-size: 1.4rem;
+  line-height: 1.1;
 }
 
-[tabsLayout=title-hide] .tab-button,
-.tab-button.icon-only {
+.tabs-ios[tabsLayout=icon-right] .tab-button ion-icon,
+.tabs-ios[tabsLayout=icon-left] .tab-button ion-icon {
+  min-width: 24px;
+  height: 26px;
+
+  font-size: 24px;
+}
+
+.tabs-ios[tabsLayout=icon-hide] .tab-button,
+.tabs-ios .tab-button.has-title-only {
   min-height: $tabs-ios-tab-min-height - 8;
 }
 
-&.hairlines ion-tabs {
+.tabs-ios[tabsLayout=icon-hide] .tab-button .tab-button-text,
+.tabs-ios .tab-button.has-title-only .tab-button-text {
+  margin: 2px 0;
 
-  ion-tabbar {
-    border-top-width: $hairlines-width;
-  }
-
-  &[tabsPlacement="top"] ion-tabbar {
-    border-bottom-width: $hairlines-width;
-  }
+  font-size: 1.4rem;
+  line-height: 1.1;
+}
 
+.tabs-ios[tabsLayout=title-hide] .tab-button,
+.tabs-ios .tab-button.icon-only {
+  min-height: $tabs-ios-tab-min-height - 8;
 }
 
 
@@ -133,18 +119,15 @@ ion-tabs[tabsPlacement=top] ion-tabbar {
 
 @mixin tabbar-ios($color-name, $color-base, $color-contrast) {
 
-  .tabs-#{$color-name} ion-tabbar {
+  .tabs-ios-#{$color-name} .tabbar {
     border-color: darken($color-base, 10%);
     background-color: $color-base;
+  }
 
-    .tab-button {
-      color: $color-contrast;
-    }
-
-    .tab-button:hover:not(.disable-hover),
-    .tab-button[aria-selected=true] {
-      color: $color-contrast;
-    }
+  .tabs-ios-#{$color-name} .tabbar .tab-button,
+  .tabs-ios-#{$color-name} .tabbar .tab-button:hover:not(.disable-hover),
+  .tabs-ios-#{$color-name} .tabbar .tab-button[aria-selected=true] {
+    color: $color-contrast;
   }
 
 }
diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss
index f8608ff7a6..9f178e77a6 100644
--- a/src/components/tabs/tabs.md.scss
+++ b/src/components/tabs/tabs.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./tabs";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Tabs
 // --------------------------------------------------
@@ -59,27 +58,27 @@ $tabs-md-tab-text-transition:          transform 200ms ease-in-out !default;
 $tabs-md-tab-icon-size:                2.4rem !default;
 
 
-ion-tabbar {
+.tabs-md .tabbar {
   background: $tabs-md-background;
 }
 
-.tab-button {
+.tabs-md .tab-button {
   padding: $tabs-md-tab-padding;
 
   min-height: $tabs-md-tab-min-height;
 
   font-weight: $tabs-md-tab-font-weight;
   color: $tabs-md-tab-color;
-
-  &[aria-selected=true] {
-    padding: $tabs-md-tab-padding-active;
-
-    font-size: $tabs-md-tab-font-size-active;
-    color: $tabs-md-tab-color-active;
-  }
 }
 
-.tab-button-text {
+.tabs-md .tab-button[aria-selected=true] {
+  padding: $tabs-md-tab-padding-active;
+
+  font-size: $tabs-md-tab-font-size-active;
+  color: $tabs-md-tab-color-active;
+}
+
+.tabs-md .tab-button-text {
   margin: $tabs-md-tab-text-margin;
 
   text-transform: $tabs-md-tab-text-capitalization;
@@ -89,76 +88,72 @@ ion-tabbar {
   transition: $tabs-md-tab-text-transition;
 }
 
-.tab-button[aria-selected=true] .tab-button-text {
+.tabs-md .tab-button[aria-selected=true] .tab-button-text {
   margin: $tabs-md-tab-text-margin-active;
 
   transform: $tabs-md-tab-text-transform-active;
 }
 
-.tab-button-icon {
+.tabs-md .tab-button-icon {
   min-width: $tabs-md-tab-icon-size + 5;
 
   font-size: $tabs-md-tab-icon-size;
 }
 
-[tabsLayout=icon-top] .has-icon .tab-button-text {
+.tabs-md[tabsLayout=icon-top] .has-icon .tab-button-text {
   margin-bottom: 0;
 }
 
-[tabsLayout=icon-bottom] {
-  .tab-button {
-    padding-top: 8px;
-    padding-bottom: 8px;
-
-    .tab-button-text {
-      margin-top: 0;
-    }
-  }
+.tabs-md[tabsLayout=icon-bottom] .tab-button {
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 
-[tabsLayout=icon-right] .tab-button,
-[tabsLayout=icon-left] .tab-button {
+.tabs-md[tabsLayout=icon-bottom] .tab-button .tab-button-text {
+  margin-top: 0;
+}
+
+.tabs-md[tabsLayout=icon-right] .tab-button,
+.tabs-md[tabsLayout=icon-left] .tab-button {
   padding-bottom: 10px;
-
-  ion-icon {
-    min-width: 24px;
-  }
 }
 
-[tabsLayout=icon-hide] .tab-button,
-[tabsLayout=title-hide] .tab-button,
-.tab-button.icon-only,
-.tab-button.has-title-only {
+.tabs-md[tabsLayout=icon-right] .tab-button ion-icon,
+.tabs-md[tabsLayout=icon-left] .tab-button ion-icon {
+  min-width: 24px;
+}
+
+.tabs-md[tabsLayout=icon-hide] .tab-button,
+.tabs-md[tabsLayout=title-hide] .tab-button,
+.tabs-md .tab-button.icon-only,
+.tabs-md .tab-button.has-title-only {
   padding: 6px 10px;
 }
 
+
 // Material Design Tab Highlight
 // --------------------------------------------------
 
-[tabsHighlight=true] {
+.tabs-md[tabsHighlight=true] .tab-highlight {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: block;
 
-  tab-highlight {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: block;
+  width: 1px;
+  height: 2px;
 
-    width: 1px;
-    height: 2px;
+  background: $tabs-md-tab-color-active;
+  transform: translateZ(0);
+  transform-origin: 0 0;
+}
 
-    background: $tabs-md-tab-color-active;
-    transform: translateZ(0);
-    transform-origin: 0 0;
-
-    &.animate {
-      transition-duration: 300ms;
-    }
-  }
-
-  &[tabsPlacement=bottom] tab-highlight {
-    top: 0;
-  }
+.tabs-md[tabsHighlight=true] .tab-highlight.animate {
+  transition-duration: 300ms;
+}
 
+.tabs-md[tabsHighlight=true][tabsPlacement=bottom] .tab-highlight {
+  top: 0;
 }
 
 
@@ -167,21 +162,21 @@ ion-tabbar {
 
 @mixin tabbar-md($color-name, $color-base, $color-contrast) {
 
-  .tabs-#{$color-name} ion-tabbar {
+  .tabs-md-#{$color-name} .tabbar {
     background-color: $color-base;
+  }
 
-    .tab-button {
-      color: rgba($color-contrast, $tabs-md-tab-opacity);
-    }
+  .tabs-md-#{$color-name} .tabbar .tab-button {
+    color: rgba($color-contrast, $tabs-md-tab-opacity);
+  }
 
-    .tab-button:hover:not(.disable-hover),
-    .tab-button[aria-selected=true] {
-      color: $color-contrast;
-    }
+  .tabs-md-#{$color-name} .tabbar .tab-button:hover:not(.disable-hover),
+  .tabs-md-#{$color-name} .tabbar .tab-button[aria-selected=true] {
+    color: $color-contrast;
+  }
 
-    tab-highlight {
-      background: $color-contrast;
-    }
+  .tabs-md-#{$color-name} .tabbar .tab-highlight {
+    background: $color-contrast;
   }
 
 }
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 6d1bc3129f..ce1d1c4ef0 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -1,12 +1,31 @@
-@import "../../globals.core";
+@import "../../themes/ionic.globals";
 
 // Tabs
 // --------------------------------------------------
 
+.tabbar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-toolbar;
+  display: flex;
+
+  width: 100%;
+
+  // default to hidden until ready
+  opacity: 0;
+}
+
+.tabbar.show-tabbar {
+  opacity: 1;
+}
+
+[tabsPlacement=top] > .tabbar {
+  top: 0;
+  bottom: auto;
+}
 
 .tab-button {
-  @include user-select-none();
-
   position: relative;
   z-index: 0;
   display: flex;
@@ -27,20 +46,18 @@
   text-decoration: none;
   background: none;
   cursor: pointer;
+
+  user-select: none;
 }
 
 .tab-disabled {
   pointer-events: none;
-
-  ion-badge,
-  ion-icon,
-  span {
-    opacity: .4;
-  }
 }
 
-.tab-hidden {
-  display: none;
+.tab-disabled ion-badge,
+.tab-disabled ion-icon,
+.tab-disabled span {
+  opacity: .4;
 }
 
 .tab-button-text {
@@ -71,42 +88,32 @@
   white-space: normal;
 }
 
-tab-highlight {
-  display: none;
-}
-
-[tabsLayout=icon-bottom] .tab-button {
-  .tab-button-icon {
-    order: 10;
-  }
-}
-
-[tabsLayout=icon-left] .tab-button {
-  flex-direction: row;
-
-  .tab-button-icon {
-    padding-right: 8px;
-
-    text-align: right;
-  }
+[tabsLayout=icon-bottom] .tab-button .tab-button-icon {
+  order: 10;
 }
 
+[tabsLayout=icon-left] .tab-button,
 [tabsLayout=icon-right] .tab-button {
   flex-direction: row;
-
-  .tab-button-icon {
-    order: 10;
-
-    padding-left: 8px;
-
-    text-align: left;
-  }
 }
 
-[tabsLayout=icon-hide] .tab-button-icon {
-  display: none;
+[tabsLayout=icon-left] .tab-button .tab-button-icon {
+  padding-right: 8px;
+
+  text-align: right;
 }
 
+[tabsLayout=icon-right] .tab-button .tab-button-icon {
+  order: 10;
+
+  padding-left: 8px;
+
+  text-align: left;
+}
+
+.tab-hidden,
+.tab-highlight,
+[tabsLayout=icon-hide] .tab-button-icon,
 [tabsLayout=title-hide] .tab-button-text {
   display: none;
 }
diff --git a/src/components/tabs/tabs.wp.scss b/src/components/tabs/tabs.wp.scss
index 9f3bdb6333..235501a46b 100644
--- a/src/components/tabs/tabs.wp.scss
+++ b/src/components/tabs/tabs.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./tabs";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Tabs
 // --------------------------------------------------
@@ -41,11 +40,11 @@ $tabs-wp-tab-background-activated:      rgba(0, 0, 0, .1) !default;
 $tabs-wp-tab-icon-size:                 2.4rem !default;
 
 
-ion-tabbar {
+.tabs-wp .tabbar {
   background: $tabs-wp-background;
 }
 
-.tab-button {
+.tabs-wp .tab-button {
   padding: $tabs-wp-tab-padding;
 
   min-height: $tabs-wp-tab-min-height;
@@ -56,59 +55,58 @@ ion-tabbar {
   font-weight: $tabs-wp-tab-font-weight;
   color: $tabs-wp-tab-color;
   box-shadow: none;
-
-  &[aria-selected=true] {
-    border-bottom-color: $tabs-wp-tab-border-color-active;
-    color: $tabs-wp-tab-color-active;
-  }
-
-  &.activated {
-    background: $tabs-wp-tab-background-activated;
-  }
 }
 
-.tab-button-text {
+.tabs-wp .tab-button[aria-selected=true] {
+  border-bottom-color: $tabs-wp-tab-border-color-active;
+  color: $tabs-wp-tab-color-active;
+}
+
+.tabs-wp .tab-button.activated {
+  background: $tabs-wp-tab-background-activated;
+}
+
+.tabs-wp .tab-button-text {
   margin-top: 5px;
   margin-bottom: 5px;
 }
 
-.tab-button-icon {
+.tabs-wp .tab-button-icon {
   min-width: $tabs-wp-tab-icon-size;
 
   font-size: $tabs-wp-tab-icon-size;
 }
 
-[tabsLayout=icon-bottom] .tab-button {
+.tabs-wp[tabsLayout=icon-bottom] .tab-button {
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
-[tabsLayout=icon-right] .tab-button,
-[tabsLayout=icon-left] .tab-button {
+.tabs-wp[tabsLayout=icon-right] .tab-button,
+.tabs-wp[tabsLayout=icon-left] .tab-button {
   padding-bottom: 10px;
-
-  ion-icon {
-    min-width: 24px;
-  }
 }
 
-[tabsLayout=icon-hide] .tab-button,
-[tabsLayout=title-hide] .tab-button,
+.tabs-wp[tabsLayout=icon-right] .tab-button ion-icon,
+.tabs-wp[tabsLayout=icon-left] .tab-button ion-icon {
+  min-width: 24px;
+}
+
+.tabs-wp[tabsLayout=icon-hide] .tab-button,
+.tabs-wp[tabsLayout=title-hide] .tab-button,
 .tab-button.icon-only,
 .tab-button.has-title-only {
   padding: 6px 10px;
 }
 
-[tabsPlacement=bottom] .tab-button {
+.tabs-wp[tabsPlacement=bottom] .tab-button {
   border-top: $tabs-wp-tab-border;
   border-bottom-width: 0;
-
-  &[aria-selected=true] {
-    border-top-color: $tabs-wp-tab-border-color-active;
-  }
 }
 
-
+.tabs-wp[tabsPlacement=bottom] .tab-button[aria-selected=true] {
+  border-top-color: $tabs-wp-tab-border-color-active;
+}
 
 
 // Windows Tabbar Color Mixin
@@ -116,18 +114,18 @@ ion-tabbar {
 
 @mixin tabbar-wp($color-name, $color-base, $color-contrast) {
 
-  .tabs-#{$color-name} ion-tabbar {
+  .tabs-wp-#{$color-name} .tabbar {
     background-color: $color-base;
+  }
 
-    .tab-button {
-      color: rgba($color-contrast, $tabs-wp-tab-opacity);
-    }
+  .tabs-wp-#{$color-name} .tabbar .tab-button {
+    color: rgba($color-contrast, $tabs-wp-tab-opacity);
+  }
 
-    .tab-button:hover:not(.disable-hover),
-    .tab-button[aria-selected=true] {
-      border-color: $color-contrast;
-      color: $color-contrast;
-    }
+  .tabs-wp-#{$color-name} .tabbar .tab-button:hover:not(.disable-hover),
+  .tabs-wp-#{$color-name} .tabbar .tab-button[aria-selected=true] {
+    border-color: $color-contrast;
+    color: $color-contrast;
   }
 
 }
diff --git a/src/components/toast/toast.ios.scss b/src/components/toast/toast.ios.scss
index 67d445f307..b400baee36 100644
--- a/src/components/toast/toast.ios.scss
+++ b/src/components/toast/toast.ios.scss
@@ -1,5 +1,4 @@
-@import "../../globals.ios";
-@import "./toast";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Toast
 // --------------------------------------------------
@@ -12,7 +11,7 @@ $toast-ios-title-color:                           #fff !default;
 $toast-ios-title-font-size:                       1.4rem !default;
 $toast-ios-title-padding:                         1.5rem !default;
 
-.toast-wrapper {
+.toast-ios .toast-wrapper {
   position: absolute;
   right: 10px;
 
@@ -27,25 +26,25 @@ $toast-ios-title-padding:                         1.5rem !default;
   border-radius: $toast-ios-border-radius;
 
   background: $toast-ios-background;
-
-  &.toast-top {
-    top: 0;
-
-    transform: translate3d(0, -100%, 0);
-  }
-
-  &.toast-bottom {
-    bottom: 0;
-
-    transform: translate3d(0, 100%, 0);
-  }
-
-  &.toast-middle {
-    opacity: .01;
-  }
 }
 
-.toast-message {
+.toast-ios .toast-wrapper.toast-top {
+  top: 0;
+
+  transform: translate3d(0, -100%, 0);
+}
+
+.toast-ios .toast-wrapper.toast-bottom {
+  bottom: 0;
+
+  transform: translate3d(0, 100%, 0);
+}
+
+.toast-ios .toast-wrapper.toast-middle {
+  opacity: .01;
+}
+
+.toast-ios .toast-message {
   padding: $toast-ios-title-padding;
 
   font-size: $toast-ios-title-font-size;
diff --git a/src/components/toast/toast.md.scss b/src/components/toast/toast.md.scss
index ee2d684cbe..bd74195e6a 100644
--- a/src/components/toast/toast.md.scss
+++ b/src/components/toast/toast.md.scss
@@ -1,5 +1,4 @@
-@import "../../globals.md";
-@import "./toast";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Toast
 // --------------------------------------------------
@@ -12,7 +11,7 @@ $toast-md-title-color:                           #fff !default;
 $toast-md-title-font-size:                       1.5rem !default;
 $toast-md-title-padding:                         19px 16px 17px !default;
 
-.toast-wrapper {
+.toast-md .toast-wrapper {
   position: absolute;
   right: 0;
   left: 0;
@@ -25,25 +24,25 @@ $toast-md-title-padding:                         19px 16px 17px !default;
   max-width: $toast-max-width;
 
   background: $toast-md-background;
-
-  &.toast-top {
-    top: 0;
-
-    transform: translate3d(0, -100%, 0);
-  }
-
-  &.toast-bottom {
-    bottom: 0;
-
-    transform: translate3d(0, 100%, 0);
-  }
-
-  &.toast-middle {
-    opacity: .01;
-  }
 }
 
-.toast-message {
+.toast-md .toast-wrapper.toast-top {
+  top: 0;
+
+  transform: translate3d(0, -100%, 0);
+}
+
+.toast-md .toast-wrapper.toast-bottom {
+  bottom: 0;
+
+  transform: translate3d(0, 100%, 0);
+}
+
+.toast-md .toast-wrapper.toast-middle {
+  opacity: .01;
+}
+
+.toast-md .toast-message {
   padding: $toast-md-title-padding;
 
   font-size: $toast-md-title-font-size;
diff --git a/src/components/toast/toast.wp.scss b/src/components/toast/toast.wp.scss
index e07d33ac89..3d1ad821b2 100644
--- a/src/components/toast/toast.wp.scss
+++ b/src/components/toast/toast.wp.scss
@@ -1,5 +1,4 @@
-@import "../../globals.wp";
-@import "./toast";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Phone Toast
 // --------------------------------------------------
@@ -13,7 +12,7 @@ $toast-wp-title-color:                           #fff !default;
 $toast-wp-title-font-size:                       1.4rem !default;
 $toast-wp-title-padding:                         1.5rem !default;
 
-.toast-wrapper {
+.toast-wp .toast-wrapper {
   position: absolute;
   right: 0;
   left: 0;
@@ -26,22 +25,22 @@ $toast-wp-title-padding:                         1.5rem !default;
 
   border-radius: $toast-wp-border-radius;
   background: $toast-wp-background;
+}
 
-  &.toast-top {
-    top: 0;
+.toast-wp .toast-wrapper.toast-top {
+  top: 0;
 
-    opacity: .01;
-  }
+  opacity: .01;
+}
 
-  &.toast-bottom {
-    bottom: 0;
+.toast-wp .toast-wrapper.toast-bottom {
+  bottom: 0;
 
-    opacity: .01;
-  }
+  opacity: .01;
+}
 
-  &.toast-middle {
-    opacity: .01;
-  }
+.toast-wp .toast-wrapper.toast-middle {
+  opacity: .01;
 }
 
 .toast-message {
diff --git a/src/components/toggle/toggle.ios.scss b/src/components/toggle/toggle.ios.scss
index 12a6a71eda..706a2550b7 100644
--- a/src/components/toggle/toggle.ios.scss
+++ b/src/components/toggle/toggle.ios.scss
@@ -1,4 +1,4 @@
-@import "../../globals.ios";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Toggle
 // --------------------------------------------------
@@ -33,7 +33,7 @@ $toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($i
 // iOS Toggle
 // -----------------------------------------
 
-ion-toggle {
+.toggle-ios {
   position: relative;
 }
 
@@ -41,7 +41,7 @@ ion-toggle {
 // iOS Toggle Background Track: Unchecked
 // -----------------------------------------
 
-.toggle-icon {
+.toggle-ios .toggle-icon {
   position: relative;
   display: block;
 
@@ -60,7 +60,7 @@ ion-toggle {
 // iOS Toggle Background Oval: Unchecked
 // -----------------------------------------
 
-.toggle-icon::before {
+.toggle-ios .toggle-icon::before {
   position: absolute;
   top: $toggle-ios-border-width;
   right: $toggle-ios-border-width;
@@ -79,7 +79,7 @@ ion-toggle {
 // iOS Toggle Inner Knob: Unchecked
 // -----------------------------------------
 
-.toggle-inner {
+.toggle-ios .toggle-inner {
   position: absolute;
   top: $toggle-ios-border-width;
   left: $toggle-ios-border-width;
@@ -98,7 +98,7 @@ ion-toggle {
 // iOS Toggle Background Track: Checked
 // -----------------------------------------
 
-.toggle-checked {
+.toggle-ios .toggle-checked {
   background-color: $toggle-ios-background-color-on;
 }
 
@@ -106,8 +106,8 @@ ion-toggle {
 // iOS Toggle Background Oval: Activated or Checked
 // -----------------------------------------
 
-.toggle-activated::before,
-.toggle-checked::before {
+.toggle-ios .toggle-activated::before,
+.toggle-ios .toggle-checked::before {
   transform: scale3d(0, 0, 0);
 }
 
@@ -115,7 +115,7 @@ ion-toggle {
 // iOS Toggle Inner Knob: Checked
 // -----------------------------------------
 
-.toggle-checked .toggle-inner {
+.toggle-ios .toggle-checked .toggle-inner {
   transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
 
 }
@@ -123,7 +123,7 @@ ion-toggle {
 // iOS Toggle Background Oval: Activated and Checked
 // -----------------------------------------
 
-.toggle-activated.toggle-checked::before {
+.toggle-ios .toggle-activated.toggle-checked::before {
   transform: scale3d(0, 0, 0);
 }
 
@@ -131,7 +131,7 @@ ion-toggle {
 // iOS Toggle Inner Knob: Activated and Unchecked
 // -----------------------------------------
 
-.toggle-activated .toggle-inner {
+.toggle-ios .toggle-activated .toggle-inner {
   width: $toggle-ios-handle-width + 6;
 }
 
@@ -139,7 +139,7 @@ ion-toggle {
 // iOS Toggle Inner Knob: Activated and Checked
 // -----------------------------------------
 
-.toggle-activated.toggle-checked .toggle-inner {
+.toggle-ios .toggle-activated.toggle-checked .toggle-inner {
   // when pressing down on the toggle and IS checked
   // make the knob wider and move it left a bit
   left: $toggle-ios-border-width - 6;
@@ -149,28 +149,24 @@ ion-toggle {
 // iOS Toggle: Disabled
 // -----------------------------------------
 
-.toggle-disabled,
-.item-toggle-disabled ion-label {
+.toggle-ios.toggle-disabled,
+.item-ios.item-toggle-disabled ion-label {
   opacity: $toggle-ios-disabled-opacity;
 
   pointer-events: none;
 }
 
-.toggle-disabled ion-radio {
-  opacity: $toggle-ios-disabled-opacity;
-}
-
 
 // iOS Toggle Within An Item
 // -----------------------------------------
 
-.item ion-toggle {
+.item-ios .toggle-ios {
   margin: $toggle-ios-media-margin;
   padding: $toggle-ios-item-right-padding;
+}
 
-  &[item-left] {
-    padding: $toggle-ios-item-left-padding;
-  }
+.item-ios .toggle-ios[item-left] {
+  padding: $toggle-ios-item-left-padding;
 }
 
 
@@ -179,7 +175,7 @@ ion-toggle {
 
 @mixin ios-toggle-theme($color-name, $color-base) {
 
-  .toggle-#{$color-name} .toggle-checked {
+  .toggle-ios-#{$color-name} .toggle-checked {
     background-color: $color-base;
   }
 
@@ -190,7 +186,5 @@ ion-toggle {
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-
   @include ios-toggle-theme($color-name, $color-base);
-
 }
diff --git a/src/components/toggle/toggle.md.scss b/src/components/toggle/toggle.md.scss
index 108b998983..d32875e121 100644
--- a/src/components/toggle/toggle.md.scss
+++ b/src/components/toggle/toggle.md.scss
@@ -1,4 +1,4 @@
-@import "../../globals.md";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Toggle
 // --------------------------------------------------
@@ -30,7 +30,7 @@ $toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px
 // Material Design Toggle
 // -----------------------------------------
 
-ion-toggle {
+.toggle-md {
   position: relative;
 }
 
@@ -38,7 +38,7 @@ ion-toggle {
 // Material Design Toggle Background Track: Unchecked
 // -----------------------------------------
 
-.toggle-icon {
+.toggle-md .toggle-icon {
   position: relative;
   display: block;
 
@@ -57,7 +57,7 @@ ion-toggle {
 // Material Design Toggle Inner Knob: Unchecked
 // -----------------------------------------
 
-.toggle-inner {
+.toggle-md .toggle-inner {
   position: absolute;
   top: ($toggle-md-handle-height - $toggle-md-track-height) / -2;
   left: 0;
@@ -78,7 +78,7 @@ ion-toggle {
 // Material Design Toggle Background Track: Checked
 // -----------------------------------------
 
-.toggle-checked {
+.toggle-md .toggle-checked {
   background-color: $toggle-md-track-background-color-on;
 }
 
@@ -86,7 +86,7 @@ ion-toggle {
 // Material Design Toggle Inner Knob: Checked
 // -----------------------------------------
 
-.toggle-checked .toggle-inner {
+.toggle-md .toggle-checked .toggle-inner {
   background-color: $toggle-md-handle-background-color-on;
   transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
 }
@@ -95,14 +95,14 @@ ion-toggle {
 // Material Design Toggle: Disabled
 // -----------------------------------------
 
-.toggle-disabled,
-.item-toggle-disabled ion-label {
+.toggle-md.toggle-disabled,
+.item-md.item-toggle-disabled ion-label {
   opacity: $toggle-md-disabled-opacity;
 
   pointer-events: none;
 }
 
-.toggle-disabled ion-radio {
+.toggle-md.toggle-disabled ion-radio {
   opacity: $toggle-md-disabled-opacity;
 }
 
@@ -110,18 +110,18 @@ ion-toggle {
 // Material Design Toggle Within An Item
 // -----------------------------------------
 
-.item ion-toggle {
+.item-md .toggle-md {
   margin: $toggle-md-media-margin;
   padding: $toggle-md-item-right-padding;
 
   cursor: pointer;
-
-  &[item-left] {
-    padding: $toggle-md-item-left-padding;
-  }
 }
 
-.item-toggle ion-label {
+.item-md .toggle-md[item-left] {
+  padding: $toggle-md-item-left-padding;
+}
+
+.item-md.item-toggle ion-label {
   margin-left: 0;
 }
 
@@ -131,16 +131,12 @@ ion-toggle {
 
 @mixin toggle-theme-md($color-name, $color-base) {
 
-  .toggle-#{$color-name} {
-
-    .toggle-checked {
-      background-color: lighten($color-base, 25%);
-    }
-
-    .toggle-checked .toggle-inner {
-      background-color: $color-base;
-    }
+  .toggle-md-#{$color-name} .toggle-checked {
+    background-color: lighten($color-base, 25%);
+  }
 
+  .toggle-md-#{$color-name} .toggle-checked .toggle-inner {
+    background-color: $color-base;
   }
 
 }
@@ -150,7 +146,5 @@ ion-toggle {
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
-
   @include toggle-theme-md($color-name, $color-base);
-
 }
diff --git a/src/components/toggle/toggle.wp.scss b/src/components/toggle/toggle.wp.scss
index 4fdc1c9547..50fe370e31 100644
--- a/src/components/toggle/toggle.wp.scss
+++ b/src/components/toggle/toggle.wp.scss
@@ -1,4 +1,4 @@
-@import "../../globals.wp";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Toggle
 // --------------------------------------------------
@@ -36,7 +36,7 @@ $toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px
 // Windows Toggle
 // -----------------------------------------
 
-ion-toggle {
+.toggle-wp {
   position: relative;
 }
 
@@ -44,7 +44,7 @@ ion-toggle {
 // Windows Toggle Background Track: Unchecked
 // -----------------------------------------
 
-.toggle-icon {
+.toggle-wp .toggle-icon {
   position: relative;
   display: block;
 
@@ -62,7 +62,7 @@ ion-toggle {
 // Windows Toggle Inner Knob: Unchecked
 // -----------------------------------------
 
-.toggle-inner {
+.toggle-wp .toggle-inner {
   position: absolute;
   top: $toggle-wp-handle-top;
   left: $toggle-wp-handle-left;
@@ -81,7 +81,7 @@ ion-toggle {
 // Windows Toggle Background Track: Checked
 // -----------------------------------------
 
-.toggle-checked {
+.toggle-wp .toggle-checked {
   border-color: $toggle-wp-track-background-color-on;
   background-color: $toggle-wp-track-background-color-on;
 }
@@ -90,7 +90,7 @@ ion-toggle {
 // Windows Toggle Inner Knob: Checked
 // -----------------------------------------
 
-.toggle-checked .toggle-inner {
+.toggle-wp .toggle-checked .toggle-inner {
   background-color: $toggle-wp-handle-background-color-on;
   // transform: translate3d(23px, 0, 0);
   transform: translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2), 0, 0);
@@ -100,14 +100,14 @@ ion-toggle {
 // Windows Toggle: Disabled
 // -----------------------------------------
 
-.toggle-disabled,
-.item-toggle-disabled ion-label {
+.toggle-wp.toggle-disabled,
+.item-wp.item-toggle-disabled ion-label {
   opacity: $toggle-wp-disabled-opacity;
 
   pointer-events: none;
 }
 
-.toggle-disabled ion-radio {
+.toggle-wp.toggle-disabled ion-radio {
   opacity: $toggle-wp-disabled-opacity;
 }
 
@@ -115,18 +115,18 @@ ion-toggle {
 // Windows Toggle Within An Item
 // -----------------------------------------
 
-.item ion-toggle {
+.item-wp .toggle-wp {
   margin: $toggle-wp-media-margin;
   padding: $toggle-wp-item-right-padding;
 
   cursor: pointer;
-
-  &[item-left] {
-    padding: $toggle-wp-item-left-padding;
-  }
 }
 
-.item-toggle ion-label {
+.item-wp .toggle-wp[item-left] {
+  padding: $toggle-wp-item-left-padding;
+}
+
+.item-wp.item-toggle ion-label {
   margin-left: 0;
 }
 
@@ -136,19 +136,14 @@ ion-toggle {
 
 @mixin toggle-theme-wp($color-name, $color-base, $color-contrast) {
 
-  .toggle-#{$color-name} {
-
-    .toggle-checked {
-      border-color: $color-base;
-      background-color: $color-base;
-    }
-
-    .toggle-checked .toggle-inner {
-      background-color: $color-contrast;
-    }
-
+  .toggle-wp-#{$color-name} .toggle-checked {
+    border-color: $color-base;
+    background-color: $color-base;
   }
 
+  .toggle-wp-#{$color-name} .toggle-checked .toggle-inner {
+    background-color: $color-contrast;
+  }
 }
 
 
diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss
index 48f96deda5..d02c446df8 100644
--- a/src/components/toolbar/toolbar.ios.scss
+++ b/src/components/toolbar/toolbar.ios.scss
@@ -1,6 +1,4 @@
-@import "../../globals.ios";
-@import "./toolbar";
-@import "./toolbar-button";
+@import "../../themes/ionic.globals.ios";
 
 // iOS Toolbar
 // --------------------------------------------------
@@ -17,7 +15,6 @@ $toolbar-order-ios: (
 );
 
 $toolbar-ios-padding:                       4px !default;
-$toolbar-ios-height:                        44px !default;
 $toolbar-ios-button-font-size:              1.7rem !default;
 
 $toolbar-ios-title-font-size:               1.7rem !default;
@@ -31,7 +28,7 @@ $toolbar-ios-button-border-radius:          4px !default;
 $navbar-ios-height:                         $toolbar-ios-height !default;
 
 
-.toolbar {
+.toolbar-ios {
   padding: $toolbar-ios-padding;
 
   min-height: $toolbar-ios-height;
@@ -41,35 +38,29 @@ $navbar-ios-height:                         $toolbar-ios-height !default;
 // iOS Toolbar Background
 // --------------------------------------------------
 
-.toolbar-background {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
+.toolbar-background-ios {
+  border-top-width: $hairlines-width;
+  border-bottom-width: $hairlines-width;
   border-style: solid;
   border-color: $toolbar-ios-border-color;
   background: $toolbar-ios-background;
 }
 
-&.hairlines .toolbar-background {
-  border-top-width: $hairlines-width;
-  border-bottom-width: $hairlines-width;
-}
-
-
 // iOS Toolbar Borders
 // --------------------------------------------------
 
-ion-header .toolbar:first-child .toolbar-background,
-ion-menu > .toolbar:first-child .toolbar-background,
-.toolbar[no-border-top] .toolbar-background {
+ion-header .toolbar-ios:first-child .toolbar-background,
+ion-menu > .toolbar-ios:first-child .toolbar-background,
+.toolbar-ios[no-border-top] .toolbar-background {
   border-top-width: 0;
 }
 
-ion-footer .toolbar:last-child .toolbar-background,
-.toolbar[no-border-bottom] .toolbar-background {
+ion-footer .toolbar-ios:last-child .toolbar-background,
+.toolbar-ios[no-border-bottom] .toolbar-background {
   border-bottom-width: 0;
 }
 
-.toolbar[no-border] .toolbar-background {
+.toolbar-ios[no-border] .toolbar-background {
   border-top-width: 0;
   border-bottom-width: 0;
 }
@@ -78,14 +69,14 @@ ion-footer .toolbar:last-child .toolbar-background,
 // iOS Toolbar Content
 // --------------------------------------------------
 
-.toolbar-content {
+.toolbar-content-ios {
   flex: 1;
   order: map-get($toolbar-order-ios, content);
 
   min-width: 0;
 }
 
-.toolbar-title {
+.toolbar-title-ios {
   font-size: $toolbar-ios-title-font-size;
   font-weight: $toolbar-ios-title-font-weight;
   text-align: $toolbar-ios-title-text-align;
@@ -94,7 +85,7 @@ ion-footer .toolbar:last-child .toolbar-background,
   pointer-events: auto;
 }
 
-ion-title {
+.toolbar-ios ion-title {
   position: absolute;
   top: 0;
   left: 0;
@@ -110,16 +101,16 @@ ion-title {
 }
 
 @mixin ios-toolbar-theme($color-name, $color-base, $color-contrast) {
-  .toolbar-#{$color-name} {
+  .toolbar-ios-#{$color-name} {
 
-    .toolbar-background {
+    .toolbar-background-ios {
       border-color: darken($color-base, 10%);
       background: $color-base;
     }
 
-    .toolbar-title,
-    .bar-button-clear,
-    .bar-button-default {
+    .toolbar-title-ios,
+    .bar-button-clear-ios,
+    .bar-button-default-ios {
       color: $color-contrast;
     }
   }
@@ -129,23 +120,23 @@ ion-title {
 // iOS Toolbar Button Placement
 // --------------------------------------------------
 
-ion-buttons {
+.bar-buttons-ios {
   order: map-get($toolbar-order-ios, buttons-start);
 
   transform: translateZ(0);
 }
 
-ion-buttons[left] {
+.bar-buttons-ios[left] {
   order: map-get($toolbar-order-ios, buttons-left);
 }
 
-ion-buttons[end] {
+.bar-buttons-ios[end] {
   order: map-get($toolbar-order-ios, buttons-end);
 
   text-align: right;
 }
 
-ion-buttons[right] {
+.bar-buttons-ios[right] {
   order: map-get($toolbar-order-ios, buttons-right);
 
   text-align: right;
@@ -155,7 +146,7 @@ ion-buttons[right] {
 // iOS Toolbar Button Default
 // --------------------------------------------------
 
-.bar-button {
+.bar-button-ios {
   padding: 0 5px;
 
   height: 32px;
@@ -167,8 +158,9 @@ ion-buttons[right] {
 
 @mixin ios-bar-button-default($color-name, $color-base, $color-contrast) {
 
-  .bar-button-#{$color-name},
-  .bar-button-clear-#{$color-name} {
+  .bar-button-#{$color-name}-ios,
+  .bar-button-default.bar-button-ios-#{$color-name},
+  .bar-button-clear-ios-#{$color-name} {
     color: $color-base;
     background-color: transparent;
 
@@ -187,7 +179,7 @@ ion-buttons[right] {
 // iOS Toolbar Button Outline
 // --------------------------------------------------
 
-.bar-button-outline {
+.bar-button-outline-ios {
   border-width: 1px;
   border-style: solid;
   border-color: $toolbar-ios-button-color;
@@ -206,7 +198,7 @@ ion-buttons[right] {
 
 @mixin ios-bar-button-outline($color-name, $color-base, $color-contrast) {
 
-  .bar-button-outline-#{$color-name} {
+  .bar-button-outline-ios-#{$color-name} {
     $fg-color: $color-base;
     border-color: $fg-color;
     color: $fg-color;
@@ -224,7 +216,7 @@ ion-buttons[right] {
 // iOS Toolbar Button Solid
 // --------------------------------------------------
 
-.bar-button-solid {
+.bar-button-solid-ios {
   color: color-contrast($colors-ios, $toolbar-ios-button-color);
   background-color: $toolbar-ios-button-color;
 
@@ -242,7 +234,7 @@ ion-buttons[right] {
 
 @mixin ios-bar-button-solid($color-name, $color-base, $color-contrast) {
 
-  .bar-button-solid-#{$color-name} {
+  .bar-button-solid-ios-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
 
@@ -258,7 +250,7 @@ ion-buttons[right] {
 // iOS Toolbar Button Icon
 // --------------------------------------------------
 
-.bar-button-icon-left ion-icon {
+.bar-button-ios.bar-button-icon-left ion-icon {
   padding-right: .3em;
 
   font-size: 1.4em;
@@ -267,7 +259,7 @@ ion-buttons[right] {
   pointer-events: none;
 }
 
-.bar-button-icon-right ion-icon {
+.bar-button-ios.bar-button-icon-right ion-icon {
   padding-left: .4em;
 
   font-size: 1.4em;
@@ -276,26 +268,26 @@ ion-buttons[right] {
   pointer-events: none;
 }
 
-.bar-button[icon-only] {
+.bar-button-ios[icon-only] {
   padding: 0;
 
   min-width: .9em;
+}
 
-  ion-icon {
-    padding: 0 .1em;
+.bar-button-ios[icon-only] ion-icon {
+  padding: 0 .1em;
 
-    font-size: 1.8em;
-    line-height: .67;
+  font-size: 1.8em;
+  line-height: .67;
 
-    pointer-events: none;
-  }
+  pointer-events: none;
 }
 
 
 // iOS Toolbar Back Button
 // --------------------------------------------------
 
-.back-button {
+.back-button-ios {
   overflow: visible;
 
   order: map-get($toolbar-order-ios, back-button);
@@ -308,7 +300,7 @@ ion-buttons[right] {
   transform: translateZ(0);
 }
 
-.back-button-icon {
+.back-button-icon-ios {
   display: inherit;
 
   margin: 0;
@@ -319,7 +311,7 @@ ion-buttons[right] {
   font-size: 3.4rem;
 }
 
-.back-button-text {
+.back-button-text-ios {
   letter-spacing: -.01em;
 }
 
@@ -327,7 +319,7 @@ ion-buttons[right] {
 // iOS Toolbar Menu Toggle
 // --------------------------------------------------
 
-.bar-button-menutoggle {
+.bar-button-menutoggle-ios {
   order: map-get($toolbar-order-ios, menu-toggle-start);
 
   margin: 0 6px;
@@ -342,8 +334,8 @@ ion-buttons[right] {
   }
 }
 
-.bar-button-menutoggle[end],
-.bar-button-menutoggle[right] {
+.bar-button-menutoggle-ios[end],
+.bar-button-menutoggle-ios[right] {
   order: map-get($toolbar-order-ios, menu-toggle-end);
 }
 
diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss
index b65ed61e01..c59184ba8b 100644
--- a/src/components/toolbar/toolbar.md.scss
+++ b/src/components/toolbar/toolbar.md.scss
@@ -1,6 +1,4 @@
-@import "../../globals.md";
-@import "./toolbar";
-@import "./toolbar-button";
+@import "../../themes/ionic.globals.md";
 
 // Material Design Toolbar
 // --------------------------------------------------
@@ -17,7 +15,6 @@ $toolbar-order-md: (
 );
 
 $toolbar-md-padding:                     4px !default;
-$toolbar-md-height:                      5.6rem !default;
 $toolbar-md-title-font-size:             2rem !default;
 $toolbar-md-title-text-color:            color-contrast($colors-md, $toolbar-md-background, md) !default;
 
@@ -29,7 +26,7 @@ $toolbar-md-button-border-radius:        2px !default;
 $navbar-md-height:                       $toolbar-md-height !default;
 
 
-.toolbar {
+.toolbar-md {
   padding: $toolbar-md-padding;
 
   min-height: $toolbar-md-height;
@@ -39,7 +36,7 @@ $navbar-md-height:                       $toolbar-md-height !default;
 // Material Design Toolbar Background
 // --------------------------------------------------
 
-.toolbar-background {
+.toolbar-background-md {
   border-color: $toolbar-md-border-color;
   background: $toolbar-md-background;
 }
@@ -48,10 +45,10 @@ $navbar-md-height:                       $toolbar-md-height !default;
 // Material Design Header / Footer / Tabs Box Shadow
 // --------------------------------------------------
 
-ion-header::after,
-[tabsPlacement="top"] > ion-tabbar::after,
-ion-footer::before,
-[tabsPlacement="bottom"] > ion-tabbar::before {
+.header-md::after,
+.tabs-md[tabsPlacement="top"] > .tabbar::after,
+.footer-md::before,
+.tabs-md[tabsPlacement="bottom"] > .tabbar::before {
   // using datauri png background image for improved scroll performance
   // rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);`
   // noticable performance difference on older Android devices
@@ -69,8 +66,8 @@ ion-footer::before,
   content: "";
 }
 
-ion-footer::before,
-[tabsPlacement="bottom"] > ion-tabbar::before {
+.footer-md::before,
+.tabs-md[tabsPlacement="bottom"] > .tabbar::before {
   top: -2px;
   bottom: auto;
 
@@ -79,17 +76,17 @@ ion-footer::before,
   background-position: 0 0;
 }
 
-ion-header[no-shadow]::after,
-ion-footer[no-shadow]::before,
-[tabsPlacement="top"][no-shadow] > ion-tabbar::after,
-[tabsPlacement="bottom"][no-shadow] > ion-tabbar::before {
+.header-md[no-shadow]::after,
+.footer-md[no-shadow]::before,
+.tabs-md[tabsPlacement="top"][no-shadow] > .tabbar::after,
+.tabs-md[tabsPlacement="bottom"][no-shadow] > .tabbar::before {
   display: none;
 }
 
 // Material Design Toolbar Content
 // --------------------------------------------------
 
-.toolbar-content {
+.toolbar-content-md {
   flex: 1;
   order: map-get($toolbar-order-md, content);
 
@@ -97,7 +94,7 @@ ion-footer[no-shadow]::before,
   max-width: 100%;
 }
 
-.toolbar-title {
+.toolbar-title-md {
   padding: 0 12px;
 
   font-size: $toolbar-md-title-font-size;
@@ -106,29 +103,29 @@ ion-footer[no-shadow]::before,
 }
 
 @mixin md-toolbar-theme($color-name, $color-base, $color-contrast) {
-  .toolbar-#{$color-name} {
+  .toolbar-md-#{$color-name} {
     $fg-color: color-contrast($colors-md, $color-base, md);
 
-    .toolbar-background {
+    .toolbar-background-md {
       background: $color-base;
     }
 
-    .bar-button-clear,
-    .bar-button-default,
-    .bar-button-outline,
-    .toolbar-title {
+    .bar-button-clear-md,
+    .bar-button-default-md,
+    .bar-button-outline-md,
+    .toolbar-title-md {
       color: $fg-color;
     }
 
-    .bar-button-clear,
-    .bar-button-default,
-    .bar-button-outline {
-      ion-button-effect {
+    .bar-button-clear-md,
+    .bar-button-default-md,
+    .bar-button-outline-md {
+      .button-effect {
         background-color: $fg-color;
       }
     }
 
-    .bar-button-outline {
+    .bar-button-outline-md {
       border-color: $fg-color;
     }
 
@@ -144,27 +141,27 @@ ion-footer[no-shadow]::before,
 // Material Design Toolbar Button Placement
 // --------------------------------------------------
 
-ion-buttons {
+.bar-buttons-md {
   order: map-get($toolbar-order-md, buttons-start);
 
   transform: translateZ(0);
 }
 
-ion-buttons[left] {
+.bar-buttons-md[left] {
   order: map-get($toolbar-order-md, buttons-left);
 }
 
-ion-buttons[left] .bar-button:first-child {
+.bar-button-md:first-child {
   margin-left: 0;
 }
 
-ion-buttons[end] {
+.bar-buttons-md[end] {
   order: map-get($toolbar-order-md, buttons-end);
 
   text-align: right;
 }
 
-ion-buttons[right] {
+.bar-buttons-md[right] {
   order: map-get($toolbar-order-md, buttons-right);
 
   text-align: right;
@@ -174,7 +171,7 @@ ion-buttons[right] {
 // Material Design Toolbar Button Default
 // --------------------------------------------------
 
-.bar-button {
+.bar-button-md {
   margin-top: 0;
   margin-right: .2rem;
   margin-bottom: 0;
@@ -190,16 +187,17 @@ ion-buttons[right] {
   text-transform: uppercase;
 }
 
-.bar-button-solid,
-.bar-button-outline {
+.bar-button-solid-md,
+.bar-button-outline-md {
   // restrict the ripple to button size
   overflow: hidden;
 }
 
 @mixin md-bar-button-default($color-name, $color-base, $color-contrast) {
 
-  .bar-button-clear-#{$color-name},
-  .bar-button-#{$color-name} {
+  .bar-button-#{$color-name}-md,
+  .bar-button-clear-md-#{$color-name},
+  .bar-button-md-#{$color-name} {
     color: $color-base;
     background-color: transparent;
 
@@ -214,7 +212,7 @@ ion-buttons[right] {
 // Material Design Toolbar Button Outline
 // --------------------------------------------------
 
-.bar-button-outline {
+.bar-button-outline-md {
   border-width: 1px;
   border-style: solid;
   border-color: $toolbar-md-button-color;
@@ -229,14 +227,14 @@ ion-buttons[right] {
     background-color: transparent;
   }
 
-  ion-button-effect {
+  .button-effect {
     background-color: $toolbar-md-button-color;
   }
 }
 
 @mixin md-bar-button-outline($color-name, $color-base, $color-contrast) {
 
-  .bar-button-outline-#{$color-name} {
+  .bar-button-outline-md-#{$color-name} {
     $fg-color: color-shade($color-base);
     border-color: $fg-color;
     color: $fg-color;
@@ -246,7 +244,7 @@ ion-buttons[right] {
       background-color: transparent;
     }
 
-    ion-button-effect {
+    .button-effect {
       background-color: $fg-color;
     }
   }
@@ -257,7 +255,7 @@ ion-buttons[right] {
 // Material Design Toolbar Button Solid
 // --------------------------------------------------
 
-.bar-button-solid {
+.bar-button-solid-md {
   color: color-contrast($colors-md, $toolbar-md-button-color, md);
   background-color: $toolbar-md-button-color;
 
@@ -273,7 +271,7 @@ ion-buttons[right] {
 
 @mixin md-bar-button-solid($color-name, $color-base, $color-contrast) {
 
-  .bar-button-solid-#{$color-name} {
+  .bar-button-solid-md-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
 
@@ -289,7 +287,7 @@ ion-buttons[right] {
 // Material Design Toolbar Button Icon
 // --------------------------------------------------
 
-.bar-button-icon-left ion-icon {
+.bar-button-md.bar-button-icon-left ion-icon {
   padding-right: .3em;
 
   font-size: 1.4em;
@@ -298,7 +296,7 @@ ion-buttons[right] {
   pointer-events: none;
 }
 
-.bar-button-icon-right ion-icon {
+.bar-button-md.bar-button-icon-right ion-icon {
   padding-left: .4em;
 
   font-size: 1.4em;
@@ -307,26 +305,26 @@ ion-buttons[right] {
   pointer-events: none;
 }
 
-.bar-button[icon-only] {
+.bar-button-md[icon-only] {
   padding: 0;
+}
 
-  ion-icon {
-    padding: 0 .1em;
+.bar-button-md[icon-only] ion-icon {
+  padding: 0 .1em;
 
-    min-width: 28px;
+  min-width: 28px;
 
-    font-size: 1.8em;
-    line-height: .67;
+  font-size: 1.8em;
+  line-height: .67;
 
-    pointer-events: none;
-  }
+  pointer-events: none;
 }
 
 
 // Material Design Toolbar Back Button
 // --------------------------------------------------
 
-.back-button {
+.back-button-md {
   margin: 0 6px;
 
   min-width: 44px;
@@ -334,7 +332,7 @@ ion-buttons[right] {
   box-shadow: none;
 }
 
-.back-button-icon {
+.back-button-icon-md {
   margin: 0;
   padding: 0 6px;
 
@@ -347,23 +345,23 @@ ion-buttons[right] {
 // Material Design Toolbar Menu Toggle
 // --------------------------------------------------
 
-.bar-button-menutoggle {
+.bar-button-menutoggle-md {
   order: map-get($toolbar-order-md, menu-toggle-start);
 
   margin: 0 6px;
   padding: 0 2px;
 
   min-width: 44px;
-
-  ion-icon {
-    padding: 0 6px;
-
-    font-size: 2.4rem;
-  }
 }
 
-.bar-button-menutoggle[end],
-.bar-button-menutoggle[right] {
+.bar-button-menutoggle-md ion-icon {
+  padding: 0 6px;
+
+  font-size: 2.4rem;
+}
+
+.bar-button-menutoggle-md[end],
+.bar-button-menutoggle-md[right] {
   order: map-get($toolbar-order-md, menu-toggle-end);
 
   margin: 0 2px;
diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
index 70b0d219b1..fd04a9d3ca 100644
--- a/src/components/toolbar/toolbar.scss
+++ b/src/components/toolbar/toolbar.scss
@@ -1,9 +1,13 @@
-@import "../../globals.core";
-
+@import "../../themes/ionic.globals";
 
 // Toolbar
 // --------------------------------------------------
 
+ion-toolbar {
+  position: relative;
+  z-index: $z-index-toolbar;
+}
+
 .toolbar {
   display: flex;
   overflow: hidden;
@@ -92,10 +96,5 @@ ion-buttons,
 ion-navbar.toolbar {
   display: flex;
 
-  opacity: 0;
   transform: translateZ(0);
-
-  &.show-navbar {
-    opacity: 1;
-  }
 }
diff --git a/src/components/toolbar/toolbar.wp.scss b/src/components/toolbar/toolbar.wp.scss
index 3593212e38..6304f96d7a 100644
--- a/src/components/toolbar/toolbar.wp.scss
+++ b/src/components/toolbar/toolbar.wp.scss
@@ -1,6 +1,4 @@
-@import "../../globals.wp";
-@import "./toolbar";
-@import "./toolbar-button";
+@import "../../themes/ionic.globals.wp";
 
 // Windows Toolbar
 // --------------------------------------------------
@@ -17,7 +15,6 @@ $toolbar-order-wp: (
 );
 
 $toolbar-wp-padding:                     4px !default;
-$toolbar-wp-height:                      4.6rem !default;
 $toolbar-wp-title-padding:               0 6px !default;
 $toolbar-wp-title-font-size:             1.5rem !default;
 $toolbar-wp-title-font-weight:           bold !default;
@@ -31,7 +28,7 @@ $toolbar-wp-button-border-radius:        2px !default;
 $navbar-wp-height:                       $toolbar-wp-height !default;
 
 
-.toolbar {
+.toolbar-wp {
   padding: $toolbar-wp-padding;
 
   min-height: $toolbar-wp-height;
@@ -41,7 +38,7 @@ $navbar-wp-height:                       $toolbar-wp-height !default;
 // Windows Toolbar Background
 // --------------------------------------------------
 
-.toolbar-background {
+.toolbar-background-wp {
   border-color: $toolbar-wp-border-color;
   background: $toolbar-wp-background;
 }
@@ -50,7 +47,7 @@ $navbar-wp-height:                       $toolbar-wp-height !default;
 // Windows Toolbar Content
 // --------------------------------------------------
 
-.toolbar-content {
+.toolbar-content-wp {
   flex: 1;
   order: map-get($toolbar-order-wp, content);
 
@@ -58,7 +55,7 @@ $navbar-wp-height:                       $toolbar-wp-height !default;
   max-width: 100%;
 }
 
-.toolbar-title {
+.toolbar-title-wp {
   padding: $toolbar-wp-title-padding;
 
   font-size: $toolbar-wp-title-font-size;
@@ -68,24 +65,23 @@ $navbar-wp-height:                       $toolbar-wp-height !default;
 }
 
 @mixin wp-toolbar-theme($color-name, $color-base, $color-contrast) {
-  .toolbar-#{$color-name} {
-    $fg-color: $color-contrast;
 
-    .toolbar-background {
-      background: $color-base;
-    }
+  .toolbar-wp-#{$color-name} .toolbar-background-wp {
+    background: $color-base;
+  }
 
-    .bar-button-clear,
-    .bar-button-default,
-    .bar-button-outline,
-    .toolbar-title {
-      color: $fg-color;
-    }
+  .toolbar-wp-#{$color-name} .bar-button-clear-wp,
+  .toolbar-wp-#{$color-name} .bar-button-default-wp,
+  .toolbar-wp-#{$color-name} .bar-button-outline-wp,
+  .toolbar-wp-#{$color-name} .toolbar-title-wp {
+    color: $color-contrast;
+  }
 
-    .bar-button-outline {
-      border-color: $fg-color;
-    }
+  .toolbar-wp-#{$color-name} .bar-button-outline-wp {
+    border-color: $color-contrast;
+  }
 
+  .toolbar-wp-#{$color-name} {
     @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
       @include wp-bar-button-default($color-name, $color-base, $color-contrast);
       @include wp-bar-button-outline($color-name, $color-base, $color-contrast);
@@ -98,27 +94,27 @@ $navbar-wp-height:                       $toolbar-wp-height !default;
 // Windows Toolbar Button Placement
 // --------------------------------------------------
 
-ion-buttons {
+.bar-buttons-wp {
   order: map-get($toolbar-order-wp, buttons-start);
 
   transform: translateZ(0);
 }
 
-ion-buttons[left] {
+.bar-buttons-wp[left] {
   order: map-get($toolbar-order-wp, buttons-left);
 }
 
-ion-buttons[left] .bar-button:first-child {
+.bar-buttons-wp[left] .bar-button:first-child {
   margin-left: 0;
 }
 
-ion-buttons[end] {
+.bar-buttons-wp[end] {
   order: map-get($toolbar-order-wp, buttons-end);
 
   text-align: right;
 }
 
-ion-buttons[right] {
+.bar-buttons-wp[right] {
   order: map-get($toolbar-order-wp, buttons-right);
 
   text-align: right;
@@ -128,7 +124,7 @@ ion-buttons[right] {
 // Windows Toolbar Button Default
 // --------------------------------------------------
 
-.bar-button {
+.bar-button-wp {
   margin-top: 0;
   margin-right: .2rem;
   margin-bottom: 0;
@@ -144,16 +140,17 @@ ion-buttons[right] {
   text-transform: uppercase;
 }
 
-.bar-button-solid,
-.bar-button-outline {
+.bar-button-solid-wp,
+.bar-button-outline-wp {
   // restrict the ripple to button size
   overflow: hidden;
 }
 
 @mixin wp-bar-button-default($color-name, $color-base, $color-contrast) {
 
-  .bar-button-clear-#{$color-name},
-  .bar-button-#{$color-name} {
+  .bar-button-#{$color-name}-wp,
+  .bar-button-clear-wp-#{$color-name},
+  .bar-button-wp-#{$color-name} {
     color: $color-base;
     background-color: transparent;
 
@@ -168,7 +165,7 @@ ion-buttons[right] {
 // Windows Toolbar Button Outline
 // --------------------------------------------------
 
-.bar-button-outline {
+.bar-button-outline-wp {
   border-width: 1px;
   border-style: solid;
   border-color: $toolbar-wp-button-color;
@@ -187,7 +184,7 @@ ion-buttons[right] {
 
 @mixin wp-bar-button-outline($color-name, $color-base, $color-contrast) {
 
-  .bar-button-outline-#{$color-name} {
+  .bar-button-outline-wp-#{$color-name} {
     $fg-color: color-shade($color-base);
     border-color: $fg-color;
     color: $fg-color;
@@ -205,7 +202,7 @@ ion-buttons[right] {
 // Windows Toolbar Button Solid
 // --------------------------------------------------
 
-.bar-button-solid {
+.bar-button-solid-wp {
   color: color-contrast($colors-wp, $toolbar-wp-button-color, wp);
   background-color: $toolbar-wp-button-color;
 
@@ -221,7 +218,7 @@ ion-buttons[right] {
 
 @mixin wp-bar-button-solid($color-name, $color-base, $color-contrast) {
 
-  .bar-button-solid-#{$color-name} {
+  .bar-button-solid-wp-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
 
@@ -237,7 +234,7 @@ ion-buttons[right] {
 // Windows Toolbar Button Icon
 // --------------------------------------------------
 
-.bar-button-icon-left ion-icon {
+.bar-button-wp.bar-button-icon-left ion-icon {
   padding-right: .3em;
 
   font-size: 1.4em;
@@ -246,7 +243,7 @@ ion-buttons[right] {
   pointer-events: none;
 }
 
-.bar-button-icon-right ion-icon {
+.bar-button-wp.bar-button-icon-right ion-icon {
   padding-left: .4em;
 
   font-size: 1.4em;
@@ -255,7 +252,7 @@ ion-buttons[right] {
   pointer-events: none;
 }
 
-.bar-button[icon-only] {
+.bar-button-wp[icon-only] {
   padding: 0;
 
   ion-icon {
@@ -274,7 +271,7 @@ ion-buttons[right] {
 // Windows Toolbar Back Button
 // --------------------------------------------------
 
-.back-button {
+.back-button-wp {
   margin: 0 6px;
 
   min-width: 44px;
@@ -282,7 +279,7 @@ ion-buttons[right] {
   box-shadow: none;
 }
 
-.back-button-icon {
+.back-button-icon-wp {
   margin: 0;
   padding: 0 6px;
 
@@ -295,7 +292,7 @@ ion-buttons[right] {
 // Windows Toolbar Menu Toggle
 // --------------------------------------------------
 
-.bar-button-menutoggle {
+.bar-button-menutoggle-wp {
   order: map-get($toolbar-order-wp, menu-toggle-start);
 
   margin: 0 6px;
@@ -310,8 +307,8 @@ ion-buttons[right] {
   }
 }
 
-.bar-button-menutoggle[end],
-.bar-button-menutoggle[right] {
+.bar-button-menutoggle-wp[end],
+.bar-button-menutoggle-wp[right] {
   order: map-get($toolbar-order-wp, menu-toggle-end);
 
   margin: 0 2px;
diff --git a/src/components/typography/typography.ios.scss b/src/components/typography/typography.ios.scss
index 9141ccad29..cd9f36a54e 100644
--- a/src/components/typography/typography.ios.scss
+++ b/src/components/typography/typography.ios.scss
@@ -1,20 +1,10 @@
-@import "./typography";
 
 // iOS Typography
 // --------------------------------------------------
 
-p {
-  color: $paragraph-ios-color;
-}
-
-a {
-  color: $link-ios-color;
-}
-
-
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
-  .text-#{$color-name} {
+  .text-ios-#{$color-name} {
     color: $color-base;
   }
 
diff --git a/src/components/typography/typography.md.scss b/src/components/typography/typography.md.scss
index 193c1d3ed1..381d8bba8e 100644
--- a/src/components/typography/typography.md.scss
+++ b/src/components/typography/typography.md.scss
@@ -1,21 +1,10 @@
-@import "./typography";
 
 // Material Design Typography
 // --------------------------------------------------
 
-
-p {
-  color: $paragraph-md-color;
-}
-
-a {
-  color: $link-md-color;
-}
-
-
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
-  .text-#{$color-name} {
+  .text-md-#{$color-name} {
     color: $color-base;
   }
 
diff --git a/src/components/typography/typography.wp.scss b/src/components/typography/typography.wp.scss
index 58bbcb02d6..5c4414fcd5 100644
--- a/src/components/typography/typography.wp.scss
+++ b/src/components/typography/typography.wp.scss
@@ -1,21 +1,10 @@
-@import "./typography";
 
 // Windows Typography
 // --------------------------------------------------
 
-
-p {
-  color: $paragraph-wp-color;
-}
-
-a {
-  color: $link-wp-color;
-}
-
-
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
-  .text-#{$color-name} {
+  .text-wp-#{$color-name} {
     color: $color-base;
   }