updates

ionic/components/app/structure.scss

@@ -76,7 +76,6 @@ body {
   text-size-adjust: none;
 
   @include user-select-none();
-  background-color: $background-color;
 }
 
 ion-app,
@@ -127,7 +126,6 @@ ion-content {
   width: 100%;
   height: 100%;
   flex: 1;
-  background-color: $background-color;
 }
 
 scroll-content {

ionic/components/app/typography.scss

@@ -32,7 +32,6 @@ body {
 }
 
 a {
-  color: $link-color;
   background-color: transparent;
 }
 .enable-hover a:hover {
@@ -101,22 +100,3 @@ sup {
 sub {
   bottom: -0.25em;
 }
-
-@each $color-name, $color-value in $colors {
-  h1, h2, h3, h4, h5, h6,
-  p,
-  span,
-  a:not([button]),
-  small,
-  b,
-  i,
-  u,
-  strong,
-  em,
-  sub,
-  sup {
-    &[#{$color-name}] {
-      color: $color-value !important;
-    }
-  }
-}

ionic/components/content/modes/ios.scss

@@ -6,6 +6,15 @@
 $outer-content-md-background-color:         #efeff4 !default;
 
 
+body,
+ion-content {
+  background-color: $background-ios-color;
+}
+
+a {
+  color: $link-ios-color;
+}
+
 .outer-content {
   background: $outer-content-md-background-color;
 }
@@ -14,3 +23,22 @@ ion-nav.has-views,
 ion-tab.has-views {
   background: #000;
 }
+
+@each $color-name, $color-value in $colors {
+  h1, h2, h3, h4, h5, h6,
+  p,
+  span,
+  a:not([button]),
+  small,
+  b,
+  i,
+  u,
+  strong,
+  em,
+  sub,
+  sup {
+    &[#{$color-name}] {
+      color: $color-value !important;
+    }
+  }
+}

ionic/components/menu/menu.scss

@@ -6,9 +6,6 @@
 $menu-width:                 304px !default;
 $menu-small-width:           $menu-width - 40px !default;
 
-$menu-background:            $background-color !default;
-$menu-shadow:                0px 0px 10px rgba(0, 0, 0, 0.25) !default;
-
 
 ion-menu {
   position: absolute;
@@ -22,8 +19,6 @@ ion-menu {
   display: flex;
   flex-direction: column;
 
-  background: $menu-background;
-
   transform: translate3d(-9999px, 0px, 0px);
 }
 
@@ -68,14 +63,6 @@ ion-menu[type=reveal].show-menu {
   transform: translate3d(0px, 0px, 0px);
 }
 
-.menu-content-reveal {
-  box-shadow: $menu-shadow;
-}
-
-.menu-content-push {
-  box-shadow: $menu-shadow;
-}
-
 
 // Menu Overlay
 // --------------------------------------------------
@@ -84,7 +71,6 @@ ion-menu[type=reveal].show-menu {
 
 ion-menu[type=overlay] {
   z-index: $z-index-menu-overlay;
-  box-shadow: $menu-shadow;
   left: -8px; // make up for the box-shadow hanging over on the left
 
   backdrop {

ionic/components/menu/modes/ios.scss

@@ -0,0 +1,24 @@
+@import "../../../ionic.globals";
+
+// iOS Menu
+// --------------------------------------------------
+
+$menu-ios-background:            $background-ios-color !default;
+$menu-ios-shadow:                0px 0px 10px rgba(0, 0, 0, 0.25) !default;
+
+
+ion-menu {
+  background: $menu-ios-background;
+}
+
+.menu-content-reveal {
+  box-shadow: $menu-ios-shadow;
+}
+
+.menu-content-push {
+  box-shadow: $menu-ios-shadow;
+}
+
+ion-menu[type=overlay] {
+  box-shadow: $menu-ios-shadow;
+}

ionic/components/menu/modes/md.scss

@@ -0,0 +1,24 @@
+@import "../../../ionic.globals";
+
+// Material Design Menu
+// --------------------------------------------------
+
+$menu-md-background:            $background-md-color !default;
+$menu-md-shadow:                0px 0px 10px rgba(0, 0, 0, 0.25) !default;
+
+
+ion-menu {
+  background: $menu-md-background;
+}
+
+.menu-content-reveal {
+  box-shadow: $menu-md-shadow;
+}
+
+.menu-content-push {
+  box-shadow: $menu-md-shadow;
+}
+
+ion-menu[type=overlay] {
+  box-shadow: $menu-md-shadow;
+}

ionic/components/modal/modal.scss

@@ -3,11 +3,7 @@
 // Modals
 // --------------------------------------------------
 
-$modal-background-color:          $background-color !default;
-
-
 ion-page.modal {
-  background-color: $modal-background-color;
   z-index: $z-index-overlay;
 
   // hidden by default to prevent flickers, the animation will show it

ionic/components/modal/modes/ios.scss

@@ -0,0 +1,11 @@
+@import "../../../ionic.globals";
+
+// iOS Modals
+// --------------------------------------------------
+
+$modal-ios-background-color:          $background-ios-color !default;
+
+
+ion-page.modal {
+  background-color: $modal-ios-background-color;
+}

ionic/components/modal/modes/md.scss

@@ -0,0 +1,11 @@
+@import "../../../ionic.globals";
+
+// Material Design Modals
+// --------------------------------------------------
+
+$modal-md-background-color:          $background-md-color !default;
+
+
+ion-page.modal {
+  background-color: $modal-md-background-color;
+}

ionic/ionic.ios.scss

@@ -19,6 +19,8 @@
   "components/content/modes/ios",
   "components/item/modes/ios",
   "components/list/modes/ios",
+  "components/menu/modes/ios",
+  "components/modal/modes/ios",
   "components/popup/modes/ios",
   "components/radio/modes/ios",
   "components/searchbar/modes/ios",

ionic/ionic.md.scss

@@ -11,19 +11,16 @@
 
 
 // Material Design Components
-@import
-  "components/item/modes/md",
-  "components/list/modes/md",
-  "components/toolbar/modes/md";
-
-
-// Material Design Optional Components
 @import
   "components/action-sheet/modes/md",
   "components/button/modes/md",
   "components/card/modes/md",
   "components/checkbox/modes/md",
   "components/content/modes/md",
+  "components/item/modes/md",
+  "components/list/modes/md",
+  "components/menu/modes/md",
+  "components/modal/modes/md",
   "components/popup/modes/md",
   "components/radio/modes/md",
   "components/tap-click/ripple",
@@ -31,4 +28,5 @@
   "components/segment/modes/md",
   "components/switch/modes/md",
   "components/tabs/modes/md",
-  "components/text-input/modes/md";
+  "components/text-input/modes/md",
+  "components/toolbar/modes/md";