diff --git a/demos/action-sheet/index.ts b/demos/action-sheet/index.ts
index c3f7ae100c..37b5a41e7f 100644
--- a/demos/action-sheet/index.ts
+++ b/demos/action-sheet/index.ts
@@ -15,84 +15,45 @@ class ApiDemoApp {
   templateUrl: 'main.html'
 })
 export class InitialPage {
-  constructor(nav: NavController, platform: Platform) {
-    this.nav = nav;
-    this.platform = platform;
-  }
+  constructor(public nav: NavController, public platform: Platform) { }
 
   present() {
-    if (this.platform.is('android')) {
-      var androidSheet = {
-        title: 'Albums',
-        buttons: [
-          {
-            text: 'Delete',
-            style: 'destructive',
-            icon: 'md-trash',
-            handler: () => {
-              console.log('Destructive clicked');
-            }
-          },
-          { text: 'Share',
-            icon: 'share',
-            handler: () => {
-              console.log('Share clicked');
-            }
-          },
-          { text: 'Play',
-            icon: 'arrow-dropright-circle',
-            handler: () => {
-              console.log('Play clicked');
-            }
-          },
-          { text: 'Favorite',
-            icon: 'md-heart-outline',
-            handler: () => {
-              console.log('Favorite clicked');
-            }
-          },
-          {
-            text: 'Cancel',
-            style: 'cancel',
-            icon: 'md-close',
-            handler: () => {
-              console.log('Cancel clicked');
-            }
-          }
-        ],
-      };
-    }
-
-    let actionSheet = ActionSheet.create( androidSheet || {
+    let actionSheet = ActionSheet.create({
+      title: 'Albums',
       buttons: [
         {
           text: 'Delete',
-          style: 'destructive',
+          role: 'destructive',
+          icon: !this.platform.is('ios') ? 'trash' : null,
           handler: () => {
-            console.log('Destructive clicked');
+            console.log('Delete clicked');
           }
         },
         {
           text: 'Share',
+          icon: !this.platform.is('ios') ? 'share' : null,
           handler: () => {
             console.log('Share clicked');
           }
         },
         {
           text: 'Play',
+          icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
           handler: () => {
             console.log('Play clicked');
           }
         },
         {
           text: 'Favorite',
+          icon: !this.platform.is('ios') ? 'heart-outline' : null,
           handler: () => {
             console.log('Favorite clicked');
           }
         },
         {
           text: 'Cancel',
-          style: 'cancel',
+          role: 'cancel', // will always sort to be on the bottom
+          icon: !this.platform.is('ios') ? 'close' : null,
           handler: () => {
             console.log('Cancel clicked');
           }
diff --git a/demos/app.wp.scss b/demos/app.wp.scss
new file mode 100644
index 0000000000..0a2266b457
--- /dev/null
+++ b/demos/app.wp.scss
@@ -0,0 +1 @@
+@import "../ionic/ionic.wp";
diff --git a/demos/output.wp.scss b/demos/output.wp.scss
new file mode 100644
index 0000000000..d51d931adf
--- /dev/null
+++ b/demos/output.wp.scss
@@ -0,0 +1,36 @@
+$font-path: "../fonts";
+$roboto-font-path: "../fonts";
+
+// http://ionicframework.com/docs/v2/theming/
+
+
+// App Shared Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass variables found in Ionic's source scss files. Setting
+// variables before Ionic's Sass will use these variables rather than
+// Ionic's default Sass variable values. App Shared Sass imports belong
+// in the app.core.scss file and not this file. Sass variables specific
+// to the mode belong in either the app.ios.scss or app.md.scss files.
+
+
+// App Shared Color Variables
+// --------------------------------------------------
+// It's highly recommended to change the default colors
+// to match your app's branding. Ionic uses a Sass map of
+// colors so you can add, rename and remove colors as needed.
+// The "primary" color is the only required color in the map.
+// Both iOS and MD colors can be further customized if colors
+// are different per mode.
+
+$colors: (
+  primary:    #387ef5,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #f4f4f4,
+  dark:       #222,
+  vibrant:    rebeccapurple,
+  bright:     #FFC125
+);
+
+@import "../ionic/ionic.wp";
diff --git a/gulpfile.js b/gulpfile.js
index 7b61bcc646..5925c75711 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -648,11 +648,20 @@ function buildDemoSass(isProductionMode) {
     .pipe(concat('output.md.scss'))
     .pipe(gulp.dest('demos/'))
 
+    gulp.src([
+        sassVars,
+        'demos/app.variables.scss',
+        'demos/app.wp.scss'
+      ])
+    .pipe(concat('output.wp.scss'))
+    .pipe(gulp.dest('demos/'))
+
   })();
 
   gulp.src([
     'demos/output.ios.scss',
-    'demos/output.md.scss'
+    'demos/output.md.scss',
+    'demos/output.wp.scss'
   ])
 
   .pipe(sass({
diff --git a/scripts/demos/index.template.dev.html b/scripts/demos/index.template.dev.html
index 84f5fd335a..a4020dbcaf 100644
--- a/scripts/demos/index.template.dev.html
+++ b/scripts/demos/index.template.dev.html
@@ -8,6 +8,7 @@
   <link rel="stylesheet" type="text/css" href="/dist/demos/scrollbar-fix.css">
   <link ios-href="../output.ios.css" rel="stylesheet">
   <link md-href="../output.md.css" rel="stylesheet">
+  <link wp-href="../output.wp.css" rel="stylesheet">
   <script type="text/javascript" src="/dist/demos/scrollbar-fix.js"></script>
   <script src="../../js/es6-shim.min.js"></script>
   <script src="../../js/es6-module-loader.src.js"></script>
diff --git a/scripts/demos/index.template.html b/scripts/demos/index.template.html
index 30cbe6b066..8fd5da71e9 100644
--- a/scripts/demos/index.template.html
+++ b/scripts/demos/index.template.html
@@ -8,6 +8,7 @@
   <link rel="stylesheet" type="text/css" href="/dist/demos/scrollbar-fix.css">
   <link ios-href="../output.ios.css" rel="stylesheet">
   <link md-href="../output.md.css" rel="stylesheet">
+  <link wp-href="../output.wp.css" rel="stylesheet">
   <script type="text/javascript" src="/dist/demos/scrollbar-fix.js"></script>
 
 </head>