From 85803195291ad47faee1b0562a9a1c03a082c981 Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Mon, 21 Nov 2016 21:09:04 -0800
Subject: [PATCH] feat(Skins): theme aware classes, also fixes to button styles
 for android

closes https://github.com/NativeScript/theme/issues/112
closes https://github.com/NativeScript/theme/issues/113
https://github.com/NativeScript/theme/issues/111
---
 app/actionBar/actionBar.xml                    |  3 +--
 app/pages/tabs.xml                             | 17 +++++++++--------
 app/scss/_forms.scss                           |  2 +-
 app/scss/_segmented-bar.scss                   |  3 +++
 app/scss/_tabs.scss                            | 12 +++++++++++-
 app/scss/platforms/_buttons.android.scss       |  1 -
 app/scss/platforms/_segmented-bar.android.scss |  2 +-
 app/scss/skins/dark/_action-bar.scss           |  6 ++++--
 app/scss/skins/dark/_spacing.scss              |  3 +++
 app/scss/skins/dark/_variables.scss            |  7 ++++---
 app/scss/skins/lemon/_action-bar.scss          |  9 +++++++++
 app/scss/skins/lemon/_index.scss               |  5 ++++-
 app/scss/skins/light/_variables.scss           |  2 +-
 app/scss/skins/lime/_action-bar.scss           |  9 +++++++++
 app/scss/skins/lime/_index.scss                |  5 ++++-
 app/scss/skins/orange/_action-bar.scss         |  9 +++++++++
 app/scss/skins/orange/_index.scss              |  5 ++++-
 app/scss/skins/purple/_action-bar.scss         |  9 +++++++++
 app/scss/skins/purple/_index.scss              |  5 ++++-
 app/scss/skins/purple/_variables.scss          |  2 +-
 app/scss/skins/ruby/_variables.scss            |  2 +-
 app/scss/skins/sky/_variables.scss             |  4 ++--
 22 files changed, 94 insertions(+), 28 deletions(-)
 create mode 100644 app/scss/skins/dark/_spacing.scss
 create mode 100644 app/scss/skins/lemon/_action-bar.scss
 create mode 100644 app/scss/skins/lime/_action-bar.scss
 create mode 100644 app/scss/skins/orange/_action-bar.scss
 create mode 100644 app/scss/skins/purple/_action-bar.scss

diff --git a/app/actionBar/actionBar.xml b/app/actionBar/actionBar.xml
index 484afd1..a907f2f 100644
--- a/app/actionBar/actionBar.xml
+++ b/app/actionBar/actionBar.xml
@@ -5,8 +5,7 @@
 		<GridLayout rows="auto" columns="50,*,auto">
 			<Button tap="{{ toggleSideDrawer }}" text="{{'fa-bars' | fonticon }}" class="fa action-item text-left" row="0" col="0" />
 			<StackLayout verticalAlignment="center" row="0" col="1">
-					
-			<Label id="actionBarTitle" class="action-title"/>
+				<Label id="actionBarTitle" class="action-title"/>
 			</StackLayout>
 			<Button tap="{{ openModal }}" text="Modal" row="0" col="2" class="action-item"></Button>
 		</GridLayout>
diff --git a/app/pages/tabs.xml b/app/pages/tabs.xml
index 87d5d57..28c45de 100644
--- a/app/pages/tabs.xml
+++ b/app/pages/tabs.xml
@@ -8,15 +8,16 @@
   </Page.actionBar>
   <drawer:RadSideDrawer id="sideDrawer" drawerLocation="Left">
     <drawer:RadSideDrawer.mainContent android:showOverNavigation="false">
- <TabView class="tab-view" selectedColor="#30bcff" tabsBackgroundColor="#f9f9f9">
+ <TabView class="tab-view">
+ <!-- we want to set this via css: selectedColor="#30bcff" tabsBackgroundColor="#f9f9f9"-->
    <TabView.items>
     <!-- ITEMS -->
-     <TabViewItem title="One">
+     <TabViewItem title="One" class="tab-view-item">
        <TabViewItem.view>
-          <StackLayout class="p-20">
+          <StackLayout class="page p-20">
             <Label text="Tab 1 Content" class="h1" />
             <StackLayout>
-                <Label text="{{ tab1 }}" textWrap="true" />
+                <Label text="{{ tab1 }}" textWrap="true" class="body" />
             </StackLayout>
           </StackLayout>
        </TabViewItem.view>
@@ -24,10 +25,10 @@
 
      <TabViewItem title="Two">
       <TabViewItem.view>
-        <StackLayout class="p-20">
+        <StackLayout class="page p-20">
               <Label text="Tab 2 Content" class="h1" />
               <StackLayout>
-                <Label text="{{ tab2 }}" textWrap="true" />
+                <Label text="{{ tab2 }}" textWrap="true" class="body" />
             </StackLayout>
           </StackLayout>
         </TabViewItem.view>
@@ -35,10 +36,10 @@
 
       <TabViewItem title="Three">
         <TabViewItem.view>
-          <StackLayout class="p-20">
+          <StackLayout class="page p-20">
             <Label text="Tab 3 Content" class="h1" />
             <StackLayout>
-                <Label text="{{ tab3 }}" textWrap="true" />
+                <Label text="{{ tab3 }}" textWrap="true" class="body" />
             </StackLayout>
           </StackLayout>
         </TabViewItem.view>
diff --git a/app/scss/_forms.scss b/app/scss/_forms.scss
index 6465a4d..23aff27 100644
--- a/app/scss/_forms.scss
+++ b/app/scss/_forms.scss
@@ -28,7 +28,7 @@
 
     .label {
       font-size:12;
-      color:$grey;
+      color:$grey-background;//$grey;
     }
 
     .input {
diff --git a/app/scss/_segmented-bar.scss b/app/scss/_segmented-bar.scss
index 40347f5..9641ea7 100644
--- a/app/scss/_segmented-bar.scss
+++ b/app/scss/_segmented-bar.scss
@@ -1,3 +1,6 @@
 .segmented-bar {
     font-size: 13;
+    background-color: $background;
+    color: $primary;
+    selected-background-color: $accent;
 }
diff --git a/app/scss/_tabs.scss b/app/scss/_tabs.scss
index 0887a82..78b3cff 100644
--- a/app/scss/_tabs.scss
+++ b/app/scss/_tabs.scss
@@ -1,3 +1,13 @@
 .tab-view {
-  color: $secondary;
+  /*color: $secondary;*/
+
+  // not supported but we want this
+  selected-color:$sky;
+  tabs-background-color:$background;
+
+  .tab-view-item {
+    // not supported but we want this
+    background-color: $background;
+    tabs-background-color: $background;
+  }
 }
diff --git a/app/scss/platforms/_buttons.android.scss b/app/scss/platforms/_buttons.android.scss
index 450277c..cbabd21 100644
--- a/app/scss/platforms/_buttons.android.scss
+++ b/app/scss/platforms/_buttons.android.scss
@@ -4,7 +4,6 @@
 }
 .btn-primary {
   border-color:rgba(255, 0, 0, 0.0);
-  border-width: 1;
 }
 .btn-outline {
   background-color: rgba(255, 0, 0, 0.0);
diff --git a/app/scss/platforms/_segmented-bar.android.scss b/app/scss/platforms/_segmented-bar.android.scss
index 332cea8..197687a 100644
--- a/app/scss/platforms/_segmented-bar.android.scss
+++ b/app/scss/platforms/_segmented-bar.android.scss
@@ -1,3 +1,3 @@
 .segmented-bar{
-    color: $charcoal;
+    
 }
\ No newline at end of file
diff --git a/app/scss/skins/dark/_action-bar.scss b/app/scss/skins/dark/_action-bar.scss
index dbf7f70..c2319aa 100644
--- a/app/scss/skins/dark/_action-bar.scss
+++ b/app/scss/skins/dark/_action-bar.scss
@@ -1,7 +1,9 @@
 .action-bar {
-  background-color:$background;
 
+  .action-title {
+    color: $primary;
+  }
   .action-item {
-    color: $white;
+    color: $primary;
   }
 }
\ No newline at end of file
diff --git a/app/scss/skins/dark/_spacing.scss b/app/scss/skins/dark/_spacing.scss
new file mode 100644
index 0000000..434e1e5
--- /dev/null
+++ b/app/scss/skins/dark/_spacing.scss
@@ -0,0 +1,3 @@
+.hr-dark {
+  background-color: $charcoal;
+}
\ No newline at end of file
diff --git a/app/scss/skins/dark/_variables.scss b/app/scss/skins/dark/_variables.scss
index af6f126..77cbbf7 100644
--- a/app/scss/skins/dark/_variables.scss
+++ b/app/scss/skins/dark/_variables.scss
@@ -8,12 +8,13 @@
 // Colors
 $background: #303030;
 $primary: #fff;
-$secondary: lighten(#fff, 30%);
-$disabled: lighten(#fff, 50%);
-$accent: #30bcff;
+$secondary: darken($primary, 30%);
+$disabled: darken($primary, 50%);
+$accent: $sky;
 
 // ActionBar
 $ab-background: $background;
+$ab-color: $primary;
 
 // Headings
 $headings-color: $primary;
diff --git a/app/scss/skins/lemon/_action-bar.scss b/app/scss/skins/lemon/_action-bar.scss
new file mode 100644
index 0000000..ade26b7
--- /dev/null
+++ b/app/scss/skins/lemon/_action-bar.scss
@@ -0,0 +1,9 @@
+.action-bar {
+
+  .action-title {
+    color: $ab-color;
+  }
+  .action-item {
+    color: $ab-color;
+  }
+}
\ No newline at end of file
diff --git a/app/scss/skins/lemon/_index.scss b/app/scss/skins/lemon/_index.scss
index 3af70b5..88a6d3c 100644
--- a/app/scss/skins/lemon/_index.scss
+++ b/app/scss/skins/lemon/_index.scss
@@ -2,4 +2,7 @@
 @import 'variables';
 
 // Core CSS
-@import '../../index';
\ No newline at end of file
+@import '../../index';
+
+// Custom Skin Overrides
+@import 'action-bar';
\ No newline at end of file
diff --git a/app/scss/skins/light/_variables.scss b/app/scss/skins/light/_variables.scss
index 6609a1c..e2edf8a 100644
--- a/app/scss/skins/light/_variables.scss
+++ b/app/scss/skins/light/_variables.scss
@@ -10,7 +10,7 @@ $background: #fff;
 $primary: lighten(#000, 13%);
 $secondary: lighten(#000, 46%);
 $disabled: lighten(#000, 62%);
-$accent: #30bcff;
+$accent: $sky;
 
 // SideDrawer
 $item-color-android : #737373;
diff --git a/app/scss/skins/lime/_action-bar.scss b/app/scss/skins/lime/_action-bar.scss
new file mode 100644
index 0000000..ade26b7
--- /dev/null
+++ b/app/scss/skins/lime/_action-bar.scss
@@ -0,0 +1,9 @@
+.action-bar {
+
+  .action-title {
+    color: $ab-color;
+  }
+  .action-item {
+    color: $ab-color;
+  }
+}
\ No newline at end of file
diff --git a/app/scss/skins/lime/_index.scss b/app/scss/skins/lime/_index.scss
index 3af70b5..88a6d3c 100644
--- a/app/scss/skins/lime/_index.scss
+++ b/app/scss/skins/lime/_index.scss
@@ -2,4 +2,7 @@
 @import 'variables';
 
 // Core CSS
-@import '../../index';
\ No newline at end of file
+@import '../../index';
+
+// Custom Skin Overrides
+@import 'action-bar';
\ No newline at end of file
diff --git a/app/scss/skins/orange/_action-bar.scss b/app/scss/skins/orange/_action-bar.scss
new file mode 100644
index 0000000..ade26b7
--- /dev/null
+++ b/app/scss/skins/orange/_action-bar.scss
@@ -0,0 +1,9 @@
+.action-bar {
+
+  .action-title {
+    color: $ab-color;
+  }
+  .action-item {
+    color: $ab-color;
+  }
+}
\ No newline at end of file
diff --git a/app/scss/skins/orange/_index.scss b/app/scss/skins/orange/_index.scss
index 3af70b5..88a6d3c 100644
--- a/app/scss/skins/orange/_index.scss
+++ b/app/scss/skins/orange/_index.scss
@@ -2,4 +2,7 @@
 @import 'variables';
 
 // Core CSS
-@import '../../index';
\ No newline at end of file
+@import '../../index';
+
+// Custom Skin Overrides
+@import 'action-bar';
\ No newline at end of file
diff --git a/app/scss/skins/purple/_action-bar.scss b/app/scss/skins/purple/_action-bar.scss
new file mode 100644
index 0000000..ade26b7
--- /dev/null
+++ b/app/scss/skins/purple/_action-bar.scss
@@ -0,0 +1,9 @@
+.action-bar {
+
+  .action-title {
+    color: $ab-color;
+  }
+  .action-item {
+    color: $ab-color;
+  }
+}
\ No newline at end of file
diff --git a/app/scss/skins/purple/_index.scss b/app/scss/skins/purple/_index.scss
index 3af70b5..88a6d3c 100644
--- a/app/scss/skins/purple/_index.scss
+++ b/app/scss/skins/purple/_index.scss
@@ -2,4 +2,7 @@
 @import 'variables';
 
 // Core CSS
-@import '../../index';
\ No newline at end of file
+@import '../../index';
+
+// Custom Skin Overrides
+@import 'action-bar';
\ No newline at end of file
diff --git a/app/scss/skins/purple/_variables.scss b/app/scss/skins/purple/_variables.scss
index 469e326..6ff8054 100644
--- a/app/scss/skins/purple/_variables.scss
+++ b/app/scss/skins/purple/_variables.scss
@@ -10,7 +10,7 @@ $ab-background: $purple;
 $ab-color: $white;
 
 // Accent
-$accent: #30bcff;
+$accent: $sky;
 $item-active-color: $white;
 $item-active-icon-color: $item-active-color;
 $item-active-background: $accent;
diff --git a/app/scss/skins/ruby/_variables.scss b/app/scss/skins/ruby/_variables.scss
index cea8f13..93c4275 100644
--- a/app/scss/skins/ruby/_variables.scss
+++ b/app/scss/skins/ruby/_variables.scss
@@ -16,7 +16,7 @@ $item-active-icon-color: $item-active-color;
 $item-active-background: $accent;
 
 // Buttons
-$btn-color-inverse: $white;
+$btn-color-inverse: $charcoal;
 $btn-color: $accent;
 $btn-color-secondary: darken($btn-color, 10%);
 $btn-color-outline-highlighted: lighten($btn-color, 10%);
\ No newline at end of file
diff --git a/app/scss/skins/sky/_variables.scss b/app/scss/skins/sky/_variables.scss
index d88f7c7..fe8f60d 100644
--- a/app/scss/skins/sky/_variables.scss
+++ b/app/scss/skins/sky/_variables.scss
@@ -6,7 +6,7 @@
  **/
 
 // ActionBar
-$ab-background: #30bcff;
+$ab-background: $sky;
 $ab-color: $white;
 
 // Accent
@@ -16,7 +16,7 @@ $item-active-icon-color: $item-active-color;
 $item-active-background: $accent;
 
 // Buttons
-$btn-color-inverse: $white;
+$btn-color-inverse: $charcoal;
 $btn-color: $accent;
 $btn-color-secondary: darken($btn-color, 10%);
 $btn-color-outline-highlighted: lighten($btn-color, 10%);
\ No newline at end of file