feat(Organization): renaming and organization of theme files per disc…

…ussion

closes #11

app/_demo.scss

@@ -0,0 +1,14 @@
+.main-page {
+  Button {
+    font-size: 30;
+    margin:10;
+  }
+}
+.themes {
+  Label {
+    margin: 5;
+  }
+  Button {
+    margin:5;
+  }
+}

app/app.scss

@@ -1,8 +1,16 @@
-@import 'scss/core';
+/*!
+ * NativeScript Theme v0.1.0 (https://nativescript.org)
+ * Copyright 2016-2016 The Theme Authors
+ * Copyright 2016-2016 Telerik
+ * Licensed under MIT (https://github.com/NativeScript/theme/blob/master/LICENSE)
+ */
+
+/**
+ * Base style (un-themed)
+ */
+@import 'scss/variables';
+@import 'scss/index';
 
-.main-page {
+// demo app
+@import 'demo';
 
-  Button {
-    @include button-size(15, 15, 40, $btn-radius);
-  }
-}

app/dark.android.scss

@@ -0,0 +1,12 @@
+/*!
+ * NativeScript Theme v0.1.0 (https://nativescript.org)
+ * Copyright 2016-2016 The Theme Authors
+ * Copyright 2016-2016 Telerik
+ * Licensed under MIT (https://github.com/NativeScript/theme/blob/master/LICENSE)
+ */
+
+@import 'scss/themes/core/dark';
+@import 'scss/themes/core/platforms/index.android';
+
+// demo app
+@import 'demo';

app/dark.ios.scss

@@ -0,0 +1,12 @@
+/*!
+ * NativeScript Theme v0.1.0 (https://nativescript.org)
+ * Copyright 2016-2016 The Theme Authors
+ * Copyright 2016-2016 Telerik
+ * Licensed under MIT (https://github.com/NativeScript/theme/blob/master/LICENSE)
+ */
+
+@import 'scss/themes/core/dark';
+@import 'scss/themes/core/platforms/index.ios';
+
+// demo app
+@import 'demo';

app/light.android.scss

@@ -0,0 +1,12 @@
+/*!
+ * NativeScript Theme v0.1.0 (https://nativescript.org)
+ * Copyright 2016-2016 The Theme Authors
+ * Copyright 2016-2016 Telerik
+ * Licensed under MIT (https://github.com/NativeScript/theme/blob/master/LICENSE)
+ */
+
+@import 'scss/themes/core/light';
+@import 'scss/themes/core/platforms/index.android';
+
+// demo app
+@import 'demo';

app/light.ios.scss

@@ -0,0 +1,12 @@
+/*!
+ * NativeScript Theme v0.1.0 (https://nativescript.org)
+ * Copyright 2016-2016 The Theme Authors
+ * Copyright 2016-2016 Telerik
+ * Licensed under MIT (https://github.com/NativeScript/theme/blob/master/LICENSE)
+ */
+
+@import 'scss/themes/core/light';
+@import 'scss/themes/core/platforms/index.ios';
+
+// demo app
+@import 'demo';

app/pages/basics.xml

@@ -8,8 +8,8 @@
     </ActionBar>
   </Page.actionBar>
   <StackLayout>
-      <Button text="Button" tap="" cssClass="btn-primary" />
-      <Button text="Button" tap="" cssClass="btn-outline-primary" />
+      <Button text="Button" tap="" cssClass="btn btn-primary" />
+      <Button text="Button" tap="" cssClass="btn btn-outline-primary" />
 
   </StackLayout>
 </Page>

app/pages/themes-vm.ts

@@ -1,30 +1,43 @@
 import {Observable} from 'data/observable';
 import {topmost} from 'ui/frame';
 import {knownFolders} from 'file-system';
+import {isIOS, isAndroid} from 'platform';
 var themes = require('nativescript-themes');
 
 export class ThemesModel extends Observable {
-  public btnText: string;
+  public labelText: string;
   private _toggled: boolean = false;
 
   constructor() {
     super();
-    this.set('btnText', 'Nina');
+    this.set('labelText', 'Default');
   }
 
-  public switchTheme() {
-    this._toggled = !this._toggled;
+  public applyDefault() {
+    this.set('labelText', 'Default');
+    themes.applyTheme(this.getPath('app'));
+  }
 
-    let appPath = knownFolders.currentApp().path + '/';
-
-    if (this._toggled) {
-      this.set('btnText', 'Default');
-      themes.applyTheme(`${appPath}theme-nina.css`);
-
-    } else {
-      this.set('btnText', 'Nina');
-      themes.applyTheme(`${appPath}app.css`);
-    }
+  public applyLight() {
+    this.set('labelText', 'Light');
+    themes.applyTheme(this.getPath('light'));
+  }
 
+  public applyDark() {
+    this.set('labelText', 'Dark');
+    themes.applyTheme(this.getPath('dark'));
+  }
+
+  private getPath(name: string) {
+    let appPath = knownFolders.currentApp().path + '/';
+    let platform = '';
+    // if (name !== 'app') {
+    //   if (isIOS) {
+    //     platform = '.ios';
+    //   } else {
+    //     platform = '.android';
+    //   }
+    // }
+    return `${appPath}${name}${platform}.css`;
   }
 }

app/pages/themes.xml

@@ -7,8 +7,10 @@
       </ActionBar.actionItems>
     </ActionBar>
   </Page.actionBar>
-  <StackLayout>
-    <Button text="{{ 'Change Theme to ' + btnText}}" tap="{{ switchTheme }}" />
-    <Label text="TO DO :)" textWrap="true" />
+  <StackLayout class="main-page themes">
+    <Label text="{{ 'Active: ' + labelText }}" textWrap="true" />
+    <Button text="Apply Default" tap="{{ applyDefault }}" />
+    <Button text="Apply Light" tap="{{ applyLight }}" />
+    <Button text="Apply Dark" tap="{{ applyDark }}" />
   </StackLayout>
 </Page>

app/scss/_index.scss

@@ -0,0 +1,12 @@
+// Utilities
+@import 'mixins';
+
+// Core CSS
+@import 'action-bar';
+@import 'buttons';
+@import 'labels';
+@import 'list-view';
+@import 'segmented-bar';
+@import 'switch';
+@import 'slider';
+@import 'stack-layout';

app/scss/themes/core/_buttons.scss

@@ -0,0 +1,7 @@
+// Just a sample
+// if we need custom styles for the theme, we can create them in files like this
+
+.btn {
+  color: $btn-color;
+  @include button-size(5, 10, 18, $btn-radius);
+}

app/scss/themes/core/_dark.scss

@@ -0,0 +1,9 @@
+// Core variables and mixins
+@import '../../variables';
+@import 'variables_dark';
+
+// Core CSS
+@import '../../index';
+
+// Custom Theme Overrides
+@import 'buttons';

app/scss/themes/core/_light.scss

@@ -0,0 +1,9 @@
+// Core variables and mixins
+@import '../../variables';
+@import 'variables_light';
+
+// Core CSS
+@import '../../index';
+
+// Custom Theme Overrides
+@import 'buttons';

app/scss/themes/_variables.scss → app/scss/themes/core/_variables_dark.scss

@@ -1,3 +1,7 @@
+/**
+ * TODO .... These are not correct ... just samples.
+ */
+
 // Colors
 $primary: #528100;
 $complimentary: #7C3FE8;

app/scss/themes/core/_variables_light.scss

@@ -0,0 +1,28 @@
+/**
+ * TODO .... These are not correct ... just samples.
+ */
+
+// Colors
+$primary: pink;
+$complimentary: purple;
+$gray: lightblue;
+$white: white;
+
+// Skin
+$background: $primary;
+$text-color: $gray;
+
+// Buttons
+$btn-color: $complimentary;
+$btn-font-size: 18;
+$btn-radius: 5;
+$btn-padding-x: 20;
+$btn-padding-y: 20;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+$enable-rounded:            true !default;
+$enable-shadows:            false !default;
+$enable-gradients:          false !default;
+$enable-transitions:        false !default;

hooks/before-prepare/nativescript-dev-sass.js

@@ -9,12 +9,15 @@ function convert(logger, projectDir, options) {
 
     // Customized by Nathan Walker 
     // Allows normal SASS imports to work as expected
-		var sassFilesPath = path.join(projectDir, 'app/*.scss');
+		var sassFilesPath = path.join(projectDir, 'app/**/*.scss');
     var sassImportPath = path.join(projectDir, 'app/');
     console.log("SASS Import Path", sassImportPath);
 
-		var sassFiles = glob.sync(sassFilesPath).filter(function(fileName){
-			return fileName.indexOf("App_Resources") === -1;
+    var sassFiles = glob.sync(sassFilesPath).filter(function (filePath) {
+      var path = filePath;
+      var parts = path.split('/');
+      var filename = parts[parts.length - 1];
+			return path.indexOf("App_Resources") === -1 && filename.indexOf("_") !== 0;
 		});
 
     if(sassFiles.length === 0){