From e28ad72653436b873ccb5e1cb11ca6af5f8f632b Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 13:37:26 -0800
Subject: [PATCH 01/22] set up a simple theme system

---
 Gruntfile.js                       |  4 ++++
 dist/css/photon-theme-osx.css      | 10 ++++++++++
 dist/template-app/index.html       |  1 +
 docs/dist/css/photon-theme-osx.css | 10 ++++++++++
 docs/dist/template-app/index.html  |  1 +
 sass/theme-osx.scss                |  1 +
 6 files changed, 27 insertions(+)
 create mode 100644 dist/css/photon-theme-osx.css
 create mode 100644 docs/dist/css/photon-theme-osx.css
 create mode 100644 sass/theme-osx.scss

diff --git a/Gruntfile.js b/Gruntfile.js
index d06abc7..406effc 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -47,6 +47,10 @@ module.exports = function(grunt) {
         src: 'sass/photon.scss',
         dest: '<%= meta.distPath %>css/<%= pkg.name %>.css'
       },
+      osx: {
+        src: 'sass/theme-osx.scss',
+        dest: '<%= meta.distPath %>css/<%= pkg.name %>-theme-osx.css'
+      },
       docs: {
         src: 'sass/docs.scss',
         dest: '<%= meta.docsAssetsPath %>css/docs.css'
diff --git a/dist/css/photon-theme-osx.css b/dist/css/photon-theme-osx.css
new file mode 100644
index 0000000..b634aea
--- /dev/null
+++ b/dist/css/photon-theme-osx.css
@@ -0,0 +1,10 @@
+/*!
+ * =====================================================
+ * Photon v0.1.2
+ * Copyright 2016 Connor Sears
+ * Licensed under MIT (https://github.com/connors/proton/blob/master/LICENSE)
+ *
+ * v0.1.2 designed by @connors.
+ * =====================================================
+ */
+
diff --git a/dist/template-app/index.html b/dist/template-app/index.html
index e7bd8e0..0d99f4c 100644
--- a/dist/template-app/index.html
+++ b/dist/template-app/index.html
@@ -5,6 +5,7 @@
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="../css/photon.css">
+    <link rel="stylesheet" href="../css/photon-theme-osx.css">
 
     <!-- Javascript -->
     <script src="js/menu.js" charset="utf-8"></script>
diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
new file mode 100644
index 0000000..b634aea
--- /dev/null
+++ b/docs/dist/css/photon-theme-osx.css
@@ -0,0 +1,10 @@
+/*!
+ * =====================================================
+ * Photon v0.1.2
+ * Copyright 2016 Connor Sears
+ * Licensed under MIT (https://github.com/connors/proton/blob/master/LICENSE)
+ *
+ * v0.1.2 designed by @connors.
+ * =====================================================
+ */
+
diff --git a/docs/dist/template-app/index.html b/docs/dist/template-app/index.html
index e7bd8e0..0d99f4c 100644
--- a/docs/dist/template-app/index.html
+++ b/docs/dist/template-app/index.html
@@ -5,6 +5,7 @@
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="../css/photon.css">
+    <link rel="stylesheet" href="../css/photon-theme-osx.css">
 
     <!-- Javascript -->
     <script src="js/menu.js" charset="utf-8"></script>
diff --git a/sass/theme-osx.scss b/sass/theme-osx.scss
new file mode 100644
index 0000000..450a005
--- /dev/null
+++ b/sass/theme-osx.scss
@@ -0,0 +1 @@
+// OSX theme styles

From 594469540279f3c6cc3db6aae5a4d78606831877 Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 13:45:46 -0800
Subject: [PATCH 02/22] adding bar styles

---
 dist/css/photon-theme-osx.css      | 21 +++++++++
 dist/css/photon.css                | 13 ------
 docs/dist/css/photon-theme-osx.css | 21 +++++++++
 docs/dist/css/photon.css           | 13 ------
 sass/bars.scss                     | 11 -----
 sass/theme-osx.scss                | 75 ++++++++++++++++++++++++++++++
 6 files changed, 117 insertions(+), 37 deletions(-)

diff --git a/dist/css/photon-theme-osx.css b/dist/css/photon-theme-osx.css
index b634aea..e4f1411 100644
--- a/dist/css/photon-theme-osx.css
+++ b/dist/css/photon-theme-osx.css
@@ -8,3 +8,24 @@
  * =====================================================
  */
 
+.toolbar {
+  box-shadow: inset 0 1px 0 #f5f4f5;
+  background-color: #e8e6e8;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8e6e8), color-stop(100%, #d1cfd1));
+  background-image: -webkit-linear-gradient(top, #e8e6e8 0%, #d1cfd1 100%);
+  background-image: linear-gradient(to bottom, #e8e6e8 0%, #d1cfd1 100%);
+}
+
+.toolbar-header {
+  border-bottom: 1px solid #c2c0c2;
+}
+
+.toolbar-footer {
+  border-top: 1px solid #c2c0c2;
+}
+
+.title {
+  font-weight: 400;
+  text-align: center;
+  color: #555;
+}
diff --git a/dist/css/photon.css b/dist/css/photon.css
index b278c2c..3ca0352 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -523,11 +523,6 @@ h6 {
 
 .toolbar {
   min-height: 22px;
-  box-shadow: inset 0 1px 0 #f5f4f5;
-  background-color: #e8e6e8;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8e6e8), color-stop(100%, #d1cfd1));
-  background-image: -webkit-linear-gradient(top, #e8e6e8 0%, #d1cfd1 100%);
-  background-image: linear-gradient(to bottom, #e8e6e8 0%, #d1cfd1 100%);
 }
 .toolbar:before, .toolbar:after {
   display: table;
@@ -552,17 +547,9 @@ h6 {
 .title {
   margin: 0;
   font-size: 12px;
-  font-weight: 400;
-  text-align: center;
-  color: #555;
   cursor: default;
 }
 
-.toolbar-borderless {
-  border-top: 0;
-  border-bottom: 0;
-}
-
 .toolbar-actions {
   margin-top: 4px;
   margin-bottom: 3px;
diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
index b634aea..e4f1411 100644
--- a/docs/dist/css/photon-theme-osx.css
+++ b/docs/dist/css/photon-theme-osx.css
@@ -8,3 +8,24 @@
  * =====================================================
  */
 
+.toolbar {
+  box-shadow: inset 0 1px 0 #f5f4f5;
+  background-color: #e8e6e8;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8e6e8), color-stop(100%, #d1cfd1));
+  background-image: -webkit-linear-gradient(top, #e8e6e8 0%, #d1cfd1 100%);
+  background-image: linear-gradient(to bottom, #e8e6e8 0%, #d1cfd1 100%);
+}
+
+.toolbar-header {
+  border-bottom: 1px solid #c2c0c2;
+}
+
+.toolbar-footer {
+  border-top: 1px solid #c2c0c2;
+}
+
+.title {
+  font-weight: 400;
+  text-align: center;
+  color: #555;
+}
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index b278c2c..3ca0352 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -523,11 +523,6 @@ h6 {
 
 .toolbar {
   min-height: 22px;
-  box-shadow: inset 0 1px 0 #f5f4f5;
-  background-color: #e8e6e8;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8e6e8), color-stop(100%, #d1cfd1));
-  background-image: -webkit-linear-gradient(top, #e8e6e8 0%, #d1cfd1 100%);
-  background-image: linear-gradient(to bottom, #e8e6e8 0%, #d1cfd1 100%);
 }
 .toolbar:before, .toolbar:after {
   display: table;
@@ -552,17 +547,9 @@ h6 {
 .title {
   margin: 0;
   font-size: 12px;
-  font-weight: 400;
-  text-align: center;
-  color: #555;
   cursor: default;
 }
 
-.toolbar-borderless {
-  border-top: 0;
-  border-bottom: 0;
-}
-
 .toolbar-actions {
   margin-top: 4px;
   margin-bottom: 3px;
diff --git a/sass/bars.scss b/sass/bars.scss
index 88eaaa8..2171116 100644
--- a/sass/bars.scss
+++ b/sass/bars.scss
@@ -4,8 +4,6 @@
 
 .toolbar {
   min-height: 22px;
-  box-shadow: inset 0 1px 0 #f5f4f5;
-  @include linear-gradient(#e8e6e8, #d1cfd1);
   @include clearfix;
 }
 
@@ -26,18 +24,9 @@
 .title {
   margin: 0;
   font-size: 12px;
-  font-weight: 400;
-  text-align: center;
-  color: #555;
   cursor: default;
 }
 
-// Borderless toolbar for the clean look
-.toolbar-borderless {
-  border-top: 0;
-  border-bottom: 0;
-}
-
 // Buttons in toolbars
 .toolbar-actions {
   margin-top: 4px;
diff --git a/sass/theme-osx.scss b/sass/theme-osx.scss
index 450a005..1fdd4ee 100644
--- a/sass/theme-osx.scss
+++ b/sass/theme-osx.scss
@@ -1 +1,76 @@
+@import "mixins.scss";
+
+//
 // OSX theme styles
+// Visuals and interactions in the style of OS X
+// --------------------------------------------------
+
+// Variables
+// --------------------------------------------------
+
+// Type
+
+$font-path: '../fonts/' !default;
+// Try to use the system's font on whatever platform the user is on.
+$font-family-default: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif !default;
+$font-size-default: 13px !default;
+$font-weight: 500 !default;
+$font-weight-bold: 700 !default;
+$font-weight-light: 300 !default;
+$line-height-default: 1.6 !default;
+
+
+// Colors
+
+// Main colors
+$primary-color: #3b99fc !default;
+$chrome-color:  #fff !default;
+
+// Copy
+$gray-color: #333 !default;
+
+// Borders
+$border-color: #ddd !default;
+$dark-border-color: #c2c0c2 !default;
+$darker-bottom-border-color: #a19fa1 !default;
+$toolbar-border-color: #939293 !default;
+
+// Action colors
+$default-color:  #fff !default;
+$positive-color: #34c84a !default;
+$negative-color: #fc605b !default;
+$warning-color: #fdbc40 !default;
+
+// Shades
+$dark-color: #57acf5 !default;
+
+// Focus and active colors
+$active-color: #116cd6;
+$focus-input-color: lighten($primary-color, 10%)  !default;
+
+// Border radius
+$default-border-radius: 4px;
+
+
+// Bars
+// --------------------------------------------------
+
+.toolbar {
+  box-shadow: inset 0 1px 0 #f5f4f5;
+  @include linear-gradient(#e8e6e8, #d1cfd1);
+}
+
+.toolbar-header {
+  border-bottom: 1px solid $dark-border-color;
+}
+
+.toolbar-footer {
+  border-top: 1px solid $dark-border-color;
+}
+
+// Simple centered title to go in the toolbar
+.title {
+  font-weight: 400;
+  text-align: center;
+  color: #555;
+}

From 7c230ca7905f5890e01dfcd30463d95c1fd924bc Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 13:52:37 -0800
Subject: [PATCH 03/22] buttons and button groups

---
 dist/css/photon-theme-osx.css      | 103 +++++++++++++++++++++++++++++
 dist/css/photon.css                |  14 ++--
 docs/dist/css/photon-theme-osx.css | 103 +++++++++++++++++++++++++++++
 docs/dist/css/photon.css           |  14 ++--
 sass/button-groups.scss            |   2 +-
 sass/buttons.scss                  |   9 +--
 sass/theme-osx.scss                | 100 ++++++++++++++++++++++++++++
 7 files changed, 318 insertions(+), 27 deletions(-)

diff --git a/dist/css/photon-theme-osx.css b/dist/css/photon-theme-osx.css
index e4f1411..386c1ae 100644
--- a/dist/css/photon-theme-osx.css
+++ b/dist/css/photon-theme-osx.css
@@ -29,3 +29,106 @@
   text-align: center;
   color: #555;
 }
+
+.btn {
+  border-radius: 4px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
+}
+
+.btn-group .btn + .btn {
+  border-left: 1px solid #c2c0c2;
+}
+.btn-group .active {
+  color: #fff;
+  background-color: #6d6c6d;
+}
+.btn-group .active .icon {
+  color: #fff;
+}
+
+.btn-default {
+  color: #333;
+  border-top-color: #c2c0c2;
+  border-right-color: #c2c0c2;
+  border-bottom-color: #a19fa1;
+  border-left-color: #c2c0c2;
+  background-color: #fcfcfc;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #f1f1f1));
+  background-image: -webkit-linear-gradient(top, #fcfcfc 0%, #f1f1f1 100%);
+  background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%);
+}
+.btn-default:active {
+  background-color: #ddd;
+  background-image: none;
+}
+
+.btn-primary,
+.btn-positive,
+.btn-negative,
+.btn-warning {
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary {
+  border-color: #388df8;
+  border-bottom-color: #0866dc;
+  background-color: #6eb4f7;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6eb4f7), color-stop(100%, #1a82fb));
+  background-image: -webkit-linear-gradient(top, #6eb4f7 0%, #1a82fb 100%);
+  background-image: linear-gradient(to bottom, #6eb4f7 0%, #1a82fb 100%);
+}
+.btn-primary:active {
+  background-color: #3e9bf4;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9bf4), color-stop(100%, #0469de));
+  background-image: -webkit-linear-gradient(top, #3e9bf4 0%, #0469de 100%);
+  background-image: linear-gradient(to bottom, #3e9bf4 0%, #0469de 100%);
+}
+
+.btn-positive {
+  border-color: #29a03b;
+  border-bottom-color: #248b34;
+  background-color: #5bd46d;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bd46d), color-stop(100%, #29a03b));
+  background-image: -webkit-linear-gradient(top, #5bd46d 0%, #29a03b 100%);
+  background-image: linear-gradient(to bottom, #5bd46d 0%, #29a03b 100%);
+}
+.btn-positive:active {
+  background-color: #34c84a;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #34c84a), color-stop(100%, #248b34));
+  background-image: -webkit-linear-gradient(top, #34c84a 0%, #248b34 100%);
+  background-image: linear-gradient(to bottom, #34c84a 0%, #248b34 100%);
+}
+
+.btn-negative {
+  border-color: #fb2f29;
+  border-bottom-color: #fb1710;
+  background-color: #fd918d;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd918d), color-stop(100%, #fb2f29));
+  background-image: -webkit-linear-gradient(top, #fd918d 0%, #fb2f29 100%);
+  background-image: linear-gradient(to bottom, #fd918d 0%, #fb2f29 100%);
+}
+.btn-negative:active {
+  background-color: #fc605b;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc605b), color-stop(100%, #fb1710));
+  background-image: -webkit-linear-gradient(top, #fc605b 0%, #fb1710 100%);
+  background-image: linear-gradient(to bottom, #fc605b 0%, #fb1710 100%);
+}
+
+.btn-warning {
+  border-color: #fcaa0e;
+  border-bottom-color: #ee9d02;
+  background-color: #fece72;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fece72), color-stop(100%, #fcaa0e));
+  background-image: -webkit-linear-gradient(top, #fece72 0%, #fcaa0e 100%);
+  background-image: linear-gradient(to bottom, #fece72 0%, #fcaa0e 100%);
+}
+.btn-warning:active {
+  background-color: #fdbc40;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdbc40), color-stop(100%, #ee9d02));
+  background-image: -webkit-linear-gradient(top, #fdbc40 0%, #ee9d02 100%);
+  background-image: linear-gradient(to bottom, #fdbc40 0%, #ee9d02 100%);
+}
+
+.btn .icon {
+  color: #737475;
+}
diff --git a/dist/css/photon.css b/dist/css/photon.css
index 3ca0352..d2f44f8 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -345,7 +345,7 @@ h6 {
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   -webkit-app-region: no-drag;
 }
 .btn:focus {
@@ -372,14 +372,9 @@ h6 {
   border-right-color: #c2c0c2;
   border-bottom-color: #a19fa1;
   border-left-color: #c2c0c2;
-  background-color: #fcfcfc;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #f1f1f1));
-  background-image: -webkit-linear-gradient(top, #fcfcfc 0%, #f1f1f1 100%);
-  background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%);
 }
 .btn-default:active {
-  background-color: #ddd;
-  background-image: none;
+  background-color: #ccc;
 }
 
 .btn-primary,
@@ -387,7 +382,6 @@ h6 {
 .btn-negative,
 .btn-warning {
   color: #fff;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 .btn-primary {
@@ -456,7 +450,7 @@ h6 {
   height: 14px;
   margin-top: 1px;
   margin-bottom: 1px;
-  color: #737475;
+  color: #888;
   font-size: 14px;
   line-height: 1;
 }
@@ -514,7 +508,7 @@ h6 {
 .btn-group .active {
   color: #fff;
   border: 1px solid transparent;
-  background-color: #6d6c6d;
+  background-color: #777;
   background-image: none;
 }
 .btn-group .active .icon {
diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
index e4f1411..386c1ae 100644
--- a/docs/dist/css/photon-theme-osx.css
+++ b/docs/dist/css/photon-theme-osx.css
@@ -29,3 +29,106 @@
   text-align: center;
   color: #555;
 }
+
+.btn {
+  border-radius: 4px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
+}
+
+.btn-group .btn + .btn {
+  border-left: 1px solid #c2c0c2;
+}
+.btn-group .active {
+  color: #fff;
+  background-color: #6d6c6d;
+}
+.btn-group .active .icon {
+  color: #fff;
+}
+
+.btn-default {
+  color: #333;
+  border-top-color: #c2c0c2;
+  border-right-color: #c2c0c2;
+  border-bottom-color: #a19fa1;
+  border-left-color: #c2c0c2;
+  background-color: #fcfcfc;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #f1f1f1));
+  background-image: -webkit-linear-gradient(top, #fcfcfc 0%, #f1f1f1 100%);
+  background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%);
+}
+.btn-default:active {
+  background-color: #ddd;
+  background-image: none;
+}
+
+.btn-primary,
+.btn-positive,
+.btn-negative,
+.btn-warning {
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary {
+  border-color: #388df8;
+  border-bottom-color: #0866dc;
+  background-color: #6eb4f7;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6eb4f7), color-stop(100%, #1a82fb));
+  background-image: -webkit-linear-gradient(top, #6eb4f7 0%, #1a82fb 100%);
+  background-image: linear-gradient(to bottom, #6eb4f7 0%, #1a82fb 100%);
+}
+.btn-primary:active {
+  background-color: #3e9bf4;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9bf4), color-stop(100%, #0469de));
+  background-image: -webkit-linear-gradient(top, #3e9bf4 0%, #0469de 100%);
+  background-image: linear-gradient(to bottom, #3e9bf4 0%, #0469de 100%);
+}
+
+.btn-positive {
+  border-color: #29a03b;
+  border-bottom-color: #248b34;
+  background-color: #5bd46d;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bd46d), color-stop(100%, #29a03b));
+  background-image: -webkit-linear-gradient(top, #5bd46d 0%, #29a03b 100%);
+  background-image: linear-gradient(to bottom, #5bd46d 0%, #29a03b 100%);
+}
+.btn-positive:active {
+  background-color: #34c84a;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #34c84a), color-stop(100%, #248b34));
+  background-image: -webkit-linear-gradient(top, #34c84a 0%, #248b34 100%);
+  background-image: linear-gradient(to bottom, #34c84a 0%, #248b34 100%);
+}
+
+.btn-negative {
+  border-color: #fb2f29;
+  border-bottom-color: #fb1710;
+  background-color: #fd918d;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd918d), color-stop(100%, #fb2f29));
+  background-image: -webkit-linear-gradient(top, #fd918d 0%, #fb2f29 100%);
+  background-image: linear-gradient(to bottom, #fd918d 0%, #fb2f29 100%);
+}
+.btn-negative:active {
+  background-color: #fc605b;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc605b), color-stop(100%, #fb1710));
+  background-image: -webkit-linear-gradient(top, #fc605b 0%, #fb1710 100%);
+  background-image: linear-gradient(to bottom, #fc605b 0%, #fb1710 100%);
+}
+
+.btn-warning {
+  border-color: #fcaa0e;
+  border-bottom-color: #ee9d02;
+  background-color: #fece72;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fece72), color-stop(100%, #fcaa0e));
+  background-image: -webkit-linear-gradient(top, #fece72 0%, #fcaa0e 100%);
+  background-image: linear-gradient(to bottom, #fece72 0%, #fcaa0e 100%);
+}
+.btn-warning:active {
+  background-color: #fdbc40;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdbc40), color-stop(100%, #ee9d02));
+  background-image: -webkit-linear-gradient(top, #fdbc40 0%, #ee9d02 100%);
+  background-image: linear-gradient(to bottom, #fdbc40 0%, #ee9d02 100%);
+}
+
+.btn .icon {
+  color: #737475;
+}
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index 3ca0352..d2f44f8 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -345,7 +345,7 @@ h6 {
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   -webkit-app-region: no-drag;
 }
 .btn:focus {
@@ -372,14 +372,9 @@ h6 {
   border-right-color: #c2c0c2;
   border-bottom-color: #a19fa1;
   border-left-color: #c2c0c2;
-  background-color: #fcfcfc;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #f1f1f1));
-  background-image: -webkit-linear-gradient(top, #fcfcfc 0%, #f1f1f1 100%);
-  background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%);
 }
 .btn-default:active {
-  background-color: #ddd;
-  background-image: none;
+  background-color: #ccc;
 }
 
 .btn-primary,
@@ -387,7 +382,6 @@ h6 {
 .btn-negative,
 .btn-warning {
   color: #fff;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 .btn-primary {
@@ -456,7 +450,7 @@ h6 {
   height: 14px;
   margin-top: 1px;
   margin-bottom: 1px;
-  color: #737475;
+  color: #888;
   font-size: 14px;
   line-height: 1;
 }
@@ -514,7 +508,7 @@ h6 {
 .btn-group .active {
   color: #fff;
   border: 1px solid transparent;
-  background-color: #6d6c6d;
+  background-color: #777;
   background-image: none;
 }
 .btn-group .active .icon {
diff --git a/sass/button-groups.scss b/sass/button-groups.scss
index 4cfb970..51dd5b9 100644
--- a/sass/button-groups.scss
+++ b/sass/button-groups.scss
@@ -61,7 +61,7 @@
   .active {
     color: #fff;
     border: 1px solid transparent;
-    background-color: #6d6c6d;
+    background-color: #777;
     background-image: none;
   }
 
diff --git a/sass/buttons.scss b/sass/buttons.scss
index fa10156..b539c11 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -15,7 +15,7 @@
   background-image: none;
   border: 1px solid transparent;
   border-radius: $default-border-radius;
-  box-shadow: 0 1px 1px rgba(0,0,0,.06);
+  box-shadow: 0 1px 1px rgba(0,0,0,.1);
   -webkit-app-region: no-drag;
 
   &:focus {
@@ -44,11 +44,9 @@
   border-right-color: $dark-border-color;
   border-bottom-color: $darker-bottom-border-color;
   border-left-color: $dark-border-color;
-  @include linear-gradient(#fcfcfc, #f1f1f1);
 
   &:active {
-    background-color: #ddd;
-    background-image: none;
+    background-color: #ccc;
   }
 }
 
@@ -58,7 +56,6 @@
 .btn-negative,
 .btn-warning {
   color: #fff;
-  text-shadow: 0 1px 1px rgba(0,0,0,.1);
 }
 
 // For primary buttons
@@ -112,7 +109,7 @@
   height: 14px;
   margin-top: 1px;
   margin-bottom: 1px;
-  color: #737475;
+  color: #888;
   font-size: 14px;
   line-height: 1;
 }
diff --git a/sass/theme-osx.scss b/sass/theme-osx.scss
index 1fdd4ee..0fca96d 100644
--- a/sass/theme-osx.scss
+++ b/sass/theme-osx.scss
@@ -74,3 +74,103 @@ $default-border-radius: 4px;
   text-align: center;
   color: #555;
 }
+
+// Buttons.css
+// --------------------------------------------------
+
+.btn {
+  border-radius: $default-border-radius;
+  box-shadow: 0 1px 1px rgba(0,0,0,.06);
+}
+
+// Button groups
+// --------------------------------------------------
+
+.btn-group {
+  .btn + .btn {
+    border-left: 1px solid $dark-border-color;
+  }
+
+  // Selected state
+  .active {
+    color: #fff;
+    background-color: #6d6c6d;
+  }
+
+  // Invert the icon in the active button
+  .active .icon {
+    color: #fff;
+  }
+}
+
+// Normal buttons
+.btn-default {
+  color: $gray-color;
+  border-top-color: $dark-border-color;
+  border-right-color: $dark-border-color;
+  border-bottom-color: $darker-bottom-border-color;
+  border-left-color: $dark-border-color;
+  @include linear-gradient(#fcfcfc, #f1f1f1);
+
+  &:active {
+    background-color: #ddd;
+    background-image: none;
+  }
+}
+
+// Button variations
+.btn-primary,
+.btn-positive,
+.btn-negative,
+.btn-warning {
+  text-shadow: 0 1px 1px rgba(0,0,0,.1);
+}
+
+// For primary buttons
+.btn-primary {
+  border-color: #388df8;
+  border-bottom-color: darken(#388df8, 15%);
+  @include linear-gradient(#6eb4f7, #1a82fb);
+
+  &:active {
+    @include linear-gradient(darken(#6eb4f7, 10%), darken(#1a82fb, 10%));
+  }
+}
+
+// For positive buttons
+.btn-positive {
+  border-color: darken($positive-color, 10%);
+  border-bottom-color: darken($positive-color, 15%);
+  @include linear-gradient(lighten($positive-color, 10%), darken($positive-color, 10%));
+
+  &:active {
+    @include linear-gradient($positive-color, darken($positive-color, 15%));
+  }
+}
+
+// For negative actions
+.btn-negative {
+  border-color: darken($negative-color, 10%);
+  border-bottom-color: darken($negative-color, 15%);
+  @include linear-gradient(lighten($negative-color, 10%), darken($negative-color, 10%));
+
+  &:active {
+    @include linear-gradient($negative-color, darken($negative-color, 15%));
+  }
+}
+
+// For warning actions
+.btn-warning {
+  border-color: darken($warning-color, 10%);
+  border-bottom-color: darken($warning-color, 15%);
+  @include linear-gradient(lighten($warning-color, 10%), darken($warning-color, 10%));
+
+  &:active {
+    @include linear-gradient($warning-color, darken($warning-color, 15%));
+  }
+}
+
+// Icons in buttons
+.btn .icon {
+  color: #737475;
+}

From 59e9635c137bd3a2fc0b5aac59e8453a7568741a Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 13:59:00 -0800
Subject: [PATCH 04/22] moving over forms, images,lists, and navs

---
 dist/css/photon-theme-osx.css      | 37 ++++++++++++++++++
 dist/css/photon.css                |  4 +-
 docs/dist/css/photon-theme-osx.css | 37 ++++++++++++++++++
 docs/dist/css/photon.css           |  4 +-
 sass/lists.scss                    |  4 +-
 sass/navs.scss                     |  2 +-
 sass/theme-osx.scss                | 62 +++++++++++++++++++++++++++++-
 7 files changed, 142 insertions(+), 8 deletions(-)

diff --git a/dist/css/photon-theme-osx.css b/dist/css/photon-theme-osx.css
index 386c1ae..0ec9a04 100644
--- a/dist/css/photon-theme-osx.css
+++ b/dist/css/photon-theme-osx.css
@@ -132,3 +132,40 @@
 .btn .icon {
   color: #737475;
 }
+
+.form-control {
+  display: inline-block;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+.form-control:focus {
+  border-color: #6db3fd;
+  box-shadow: 0 0 0 3px #6db3fd;
+}
+
+.img-rounded {
+  border-radius: 4px;
+}
+
+.list-group-item {
+  color: #414142;
+  border-top: 1px solid #ddd;
+}
+.list-group-item.active, .list-group-item.selected {
+  background-color: #116cd6;
+}
+
+.nav-group-item {
+  color: #333;
+}
+.nav-group-item:active, .nav-group-item.active {
+  background-color: #dcdfe1;
+}
+.nav-group-item .icon {
+  color: #737475;
+}
+
+.nav-group-title {
+  color: #666666;
+}
diff --git a/dist/css/photon.css b/dist/css/photon.css
index d2f44f8..e40ea77 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -706,7 +706,7 @@ img {
 .list-group-item {
   padding: 10px;
   font-size: 12px;
-  color: #414142;
+  color: #555;
   border-top: 1px solid #ddd;
 }
 .list-group-item:first-child {
@@ -757,7 +757,7 @@ img {
   width: 19px;
   height: 18px;
   float: left;
-  color: #737475;
+  color: #777;
   margin-top: -3px;
   margin-right: 7px;
   font-size: 18px;
diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
index 386c1ae..0ec9a04 100644
--- a/docs/dist/css/photon-theme-osx.css
+++ b/docs/dist/css/photon-theme-osx.css
@@ -132,3 +132,40 @@
 .btn .icon {
   color: #737475;
 }
+
+.form-control {
+  display: inline-block;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+.form-control:focus {
+  border-color: #6db3fd;
+  box-shadow: 0 0 0 3px #6db3fd;
+}
+
+.img-rounded {
+  border-radius: 4px;
+}
+
+.list-group-item {
+  color: #414142;
+  border-top: 1px solid #ddd;
+}
+.list-group-item.active, .list-group-item.selected {
+  background-color: #116cd6;
+}
+
+.nav-group-item {
+  color: #333;
+}
+.nav-group-item:active, .nav-group-item.active {
+  background-color: #dcdfe1;
+}
+.nav-group-item .icon {
+  color: #737475;
+}
+
+.nav-group-title {
+  color: #666666;
+}
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index d2f44f8..e40ea77 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -706,7 +706,7 @@ img {
 .list-group-item {
   padding: 10px;
   font-size: 12px;
-  color: #414142;
+  color: #555;
   border-top: 1px solid #ddd;
 }
 .list-group-item:first-child {
@@ -757,7 +757,7 @@ img {
   width: 19px;
   height: 18px;
   float: left;
-  color: #737475;
+  color: #777;
   margin-top: -3px;
   margin-right: 7px;
   font-size: 18px;
diff --git a/sass/lists.scss b/sass/lists.scss
index 5e5c16b..5898552 100644
--- a/sass/lists.scss
+++ b/sass/lists.scss
@@ -24,13 +24,13 @@
 .list-group-item {
   padding: 10px;
   font-size: 12px;
-  color: #414142;
+  color: #555;
   border-top: 1px solid $border-color;
 
   &:first-child {
     border-top: 0;
   }
-  
+
   &.active,
   // `.selected` is deprecated. Use `.active` instead.
   &.selected {
diff --git a/sass/navs.scss b/sass/navs.scss
index 67641e8..afc19fb 100644
--- a/sass/navs.scss
+++ b/sass/navs.scss
@@ -24,7 +24,7 @@
     width: 19px; // Prevents a one pixel cutoff
     height: 18px;
     float: left;
-    color: #737475;
+    color: #777;
     margin-top: -3px;
     margin-right: 7px;
     font-size: 18px;
diff --git a/sass/theme-osx.scss b/sass/theme-osx.scss
index 0fca96d..c6dc1cc 100644
--- a/sass/theme-osx.scss
+++ b/sass/theme-osx.scss
@@ -75,7 +75,7 @@ $default-border-radius: 4px;
   color: #555;
 }
 
-// Buttons.css
+// Buttons
 // --------------------------------------------------
 
 .btn {
@@ -174,3 +174,63 @@ $default-border-radius: 4px;
 .btn .icon {
   color: #737475;
 }
+
+
+// Forms
+// --------------------------------------------------
+
+.form-control {
+  display: inline-block;
+  background-color: $chrome-color;
+  border: 1px solid $border-color;
+  border-radius: $default-border-radius;
+
+  &:focus {
+    border-color: $focus-input-color;
+    box-shadow: 0 0 0 3px $focus-input-color;
+  }
+}
+
+
+// Images
+// --------------------------------------------------
+
+.img-rounded {
+  border-radius: $default-border-radius;
+}
+
+
+// Lists
+// --------------------------------------------------
+
+.list-group-item {
+  color: #414142;
+  border-top: 1px solid $border-color;
+
+  &.active,
+  // `.selected` is deprecated. Use `.active` instead.
+  &.selected {
+    background-color: $active-color;
+  }
+}
+
+
+// Navs
+// --------------------------------------------------
+
+.nav-group-item {
+  color: $gray-color;
+
+  &:active,
+  &.active {
+    background-color: #dcdfe1;
+  }
+
+  .icon {
+    color: #737475;
+  }
+}
+
+.nav-group-title {
+  color: lighten($gray-color, 20%);
+}

From 409c1746dcea44d5ece7ef755b642d2b05b86c1b Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 14:03:58 -0800
Subject: [PATCH 05/22] tabs and tables

---
 dist/css/photon-theme-osx.css      | 52 +++++++++++++++++++++++++++
 dist/css/photon.css                | 12 +++----
 docs/dist/css/photon-theme-osx.css | 52 +++++++++++++++++++++++++++
 docs/dist/css/photon.css           | 12 +++----
 sass/tables.scss                   |  8 ++---
 sass/tabs.scss                     |  9 ++---
 sass/theme-osx.scss                | 58 ++++++++++++++++++++++++++++++
 7 files changed, 183 insertions(+), 20 deletions(-)

diff --git a/dist/css/photon-theme-osx.css b/dist/css/photon-theme-osx.css
index 0ec9a04..21c0d4c 100644
--- a/dist/css/photon-theme-osx.css
+++ b/dist/css/photon-theme-osx.css
@@ -169,3 +169,55 @@
 .nav-group-title {
   color: #666666;
 }
+
+thead {
+  background-color: #f5f5f4;
+}
+
+.table-striped tr:nth-child(even) {
+  background-color: #f5f5f4;
+}
+
+tr:active,
+.table-striped tr:active:nth-child(even) {
+  color: #fff;
+  background-color: #116cd6;
+}
+
+thead tr:active {
+  color: #333;
+  background-color: #f5f5f4;
+}
+
+th {
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}
+
+.tab-group {
+  border-top: 1px solid #989698;
+  border-bottom: 1px solid #989698;
+}
+
+.tab-item {
+  border-left: 1px solid #989698;
+  background-color: #b8b6b8;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8b6b8), color-stop(100%, #b0aeb0));
+  background-image: -webkit-linear-gradient(top, #b8b6b8 0%, #b0aeb0 100%);
+  background-image: linear-gradient(to bottom, #b8b6b8 0%, #b0aeb0 100%);
+}
+.tab-item.active {
+  background-color: #d4d2d4;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4d2d4), color-stop(100%, #cccacc));
+  background-image: -webkit-linear-gradient(top, #d4d2d4 0%, #cccacc 100%);
+  background-image: linear-gradient(to bottom, #d4d2d4 0%, #cccacc 100%);
+}
+.tab-item .icon-close-tab {
+  color: #666;
+}
+.tab-item:after {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+.tab-item .icon-close-tab:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
diff --git a/dist/css/photon.css b/dist/css/photon.css
index e40ea77..e572b20 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -2223,7 +2223,7 @@ table {
 }
 
 thead {
-  background-color: #f5f5f4;
+  background-color: #f6f6f6;
 }
 
 tbody {
@@ -2231,7 +2231,7 @@ tbody {
 }
 
 .table-striped tr:nth-child(even) {
-  background-color: #f5f5f4;
+  background-color: #f6f6f6;
 }
 
 tr:active,
@@ -2242,7 +2242,7 @@ tr:active,
 
 thead tr:active {
   color: #333;
-  background-color: #f5f5f4;
+  background-color: #f6f6f6;
 }
 
 th {
@@ -2266,8 +2266,8 @@ td:last-child {
 .tab-group {
   margin-top: -1px;
   display: flex;
-  border-top: 1px solid #989698;
-  border-bottom: 1px solid #989698;
+  border-top: 1px solid #999;
+  border-bottom: 1px solid #999;
 }
 
 .tab-item {
@@ -2276,7 +2276,7 @@ td:last-child {
   padding: 3px;
   font-size: 12px;
   text-align: center;
-  border-left: 1px solid #989698;
+  border-left: 1px solid #999;
   background-color: #b8b6b8;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8b6b8), color-stop(100%, #b0aeb0));
   background-image: -webkit-linear-gradient(top, #b8b6b8 0%, #b0aeb0 100%);
diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
index 0ec9a04..21c0d4c 100644
--- a/docs/dist/css/photon-theme-osx.css
+++ b/docs/dist/css/photon-theme-osx.css
@@ -169,3 +169,55 @@
 .nav-group-title {
   color: #666666;
 }
+
+thead {
+  background-color: #f5f5f4;
+}
+
+.table-striped tr:nth-child(even) {
+  background-color: #f5f5f4;
+}
+
+tr:active,
+.table-striped tr:active:nth-child(even) {
+  color: #fff;
+  background-color: #116cd6;
+}
+
+thead tr:active {
+  color: #333;
+  background-color: #f5f5f4;
+}
+
+th {
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}
+
+.tab-group {
+  border-top: 1px solid #989698;
+  border-bottom: 1px solid #989698;
+}
+
+.tab-item {
+  border-left: 1px solid #989698;
+  background-color: #b8b6b8;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8b6b8), color-stop(100%, #b0aeb0));
+  background-image: -webkit-linear-gradient(top, #b8b6b8 0%, #b0aeb0 100%);
+  background-image: linear-gradient(to bottom, #b8b6b8 0%, #b0aeb0 100%);
+}
+.tab-item.active {
+  background-color: #d4d2d4;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4d2d4), color-stop(100%, #cccacc));
+  background-image: -webkit-linear-gradient(top, #d4d2d4 0%, #cccacc 100%);
+  background-image: linear-gradient(to bottom, #d4d2d4 0%, #cccacc 100%);
+}
+.tab-item .icon-close-tab {
+  color: #666;
+}
+.tab-item:after {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+.tab-item .icon-close-tab:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index e40ea77..e572b20 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -2223,7 +2223,7 @@ table {
 }
 
 thead {
-  background-color: #f5f5f4;
+  background-color: #f6f6f6;
 }
 
 tbody {
@@ -2231,7 +2231,7 @@ tbody {
 }
 
 .table-striped tr:nth-child(even) {
-  background-color: #f5f5f4;
+  background-color: #f6f6f6;
 }
 
 tr:active,
@@ -2242,7 +2242,7 @@ tr:active,
 
 thead tr:active {
   color: #333;
-  background-color: #f5f5f4;
+  background-color: #f6f6f6;
 }
 
 th {
@@ -2266,8 +2266,8 @@ td:last-child {
 .tab-group {
   margin-top: -1px;
   display: flex;
-  border-top: 1px solid #989698;
-  border-bottom: 1px solid #989698;
+  border-top: 1px solid #999;
+  border-bottom: 1px solid #999;
 }
 
 .tab-item {
@@ -2276,7 +2276,7 @@ td:last-child {
   padding: 3px;
   font-size: 12px;
   text-align: center;
-  border-left: 1px solid #989698;
+  border-left: 1px solid #999;
   background-color: #b8b6b8;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8b6b8), color-stop(100%, #b0aeb0));
   background-image: -webkit-linear-gradient(top, #b8b6b8 0%, #b0aeb0 100%);
diff --git a/sass/tables.scss b/sass/tables.scss
index 8ac8088..469a5c4 100644
--- a/sass/tables.scss
+++ b/sass/tables.scss
@@ -1,5 +1,5 @@
 //
-// Navs.scss
+// Tables.scss
 // --------------------------------------------------
 
 table {
@@ -11,7 +11,7 @@ table {
 }
 
 thead {
-  background-color: #f5f5f4;
+  background-color: #f6f6f6;
 }
 
 tbody {
@@ -19,7 +19,7 @@ tbody {
 }
 
 .table-striped tr:nth-child(even) {
-   background-color: #f5f5f4;
+   background-color: #f6f6f6;
 }
 
 tr:active,
@@ -30,7 +30,7 @@ tr:active,
 
 thead tr:active {
   color: $gray-color;
-  background-color: #f5f5f4;
+  background-color: #f6f6f6;
 }
 
 th {
diff --git a/sass/tabs.scss b/sass/tabs.scss
index e97e778..fdc286c 100644
--- a/sass/tabs.scss
+++ b/sass/tabs.scss
@@ -1,10 +1,11 @@
-// Tabs
+// Tabs.scss
+// --------------------------------------------------
 
 .tab-group {
   margin-top: -1px;
   display: flex;
-  border-top: 1px solid #989698;
-  border-bottom: 1px solid #989698;
+  border-top: 1px solid #999;
+  border-bottom: 1px solid #999;
 }
 
 .tab-item {
@@ -13,7 +14,7 @@
   padding: 3px;
   font-size: 12px;
   text-align: center;
-  border-left: 1px solid #989698;
+  border-left: 1px solid #999;
   @include linear-gradient(#b8b6b8, #b0aeb0);
 
   &:first-child {
diff --git a/sass/theme-osx.scss b/sass/theme-osx.scss
index c6dc1cc..9f5bf01 100644
--- a/sass/theme-osx.scss
+++ b/sass/theme-osx.scss
@@ -234,3 +234,61 @@ $default-border-radius: 4px;
 .nav-group-title {
   color: lighten($gray-color, 20%);
 }
+
+
+// Tables
+// --------------------------------------------------
+
+thead {
+  background-color: #f5f5f4;
+}
+
+.table-striped tr:nth-child(even) {
+   background-color: #f5f5f4;
+}
+
+tr:active,
+.table-striped tr:active:nth-child(even) {
+  color: #fff;
+  background-color: $active-color;
+}
+
+thead tr:active {
+  color: $gray-color;
+  background-color: #f5f5f4;
+}
+
+th {
+  border-right: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
+}
+
+
+// Tabs
+// --------------------------------------------------
+
+.tab-group {
+  border-top: 1px solid #989698;
+  border-bottom: 1px solid #989698;
+}
+
+.tab-item {
+  border-left: 1px solid #989698;
+  @include linear-gradient(#b8b6b8, #b0aeb0);
+
+  &.active {
+    @include linear-gradient(#d4d2d4, #cccacc);
+  }
+
+  .icon-close-tab {
+    color: #666;
+  }
+
+  &:after {
+    background-color: rgba(0,0,0,.08);
+  }
+
+  .icon-close-tab:hover {
+    background-color: rgba(0,0,0,.08);
+  }
+}

From 7adaff5edcaed5963789c20f206cbe8398493446 Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 14:11:05 -0800
Subject: [PATCH 06/22] some clean up

---
 dist/css/photon-theme-osx.css      |  1 -
 dist/css/photon.css                | 12 ++++--------
 docs/dist/css/photon-theme-osx.css |  1 -
 docs/dist/css/photon.css           | 12 ++++--------
 sass/bars.scss                     |  1 +
 sass/buttons.scss                  |  1 +
 sass/tabs.scss                     |  4 ++--
 sass/theme-osx.scss                |  1 -
 8 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/dist/css/photon-theme-osx.css b/dist/css/photon-theme-osx.css
index 21c0d4c..42f61c0 100644
--- a/dist/css/photon-theme-osx.css
+++ b/dist/css/photon-theme-osx.css
@@ -26,7 +26,6 @@
 
 .title {
   font-weight: 400;
-  text-align: center;
   color: #555;
 }
 
diff --git a/dist/css/photon.css b/dist/css/photon.css
index e572b20..ca695a2 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -372,6 +372,7 @@ h6 {
   border-right-color: #c2c0c2;
   border-bottom-color: #a19fa1;
   border-left-color: #c2c0c2;
+  background-color: #fafafa;
 }
 .btn-default:active {
   background-color: #ccc;
@@ -541,6 +542,7 @@ h6 {
 .title {
   margin: 0;
   font-size: 12px;
+  text-align: center;
   cursor: default;
 }
 
@@ -2277,19 +2279,13 @@ td:last-child {
   font-size: 12px;
   text-align: center;
   border-left: 1px solid #999;
-  background-color: #b8b6b8;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8b6b8), color-stop(100%, #b0aeb0));
-  background-image: -webkit-linear-gradient(top, #b8b6b8 0%, #b0aeb0 100%);
-  background-image: linear-gradient(to bottom, #b8b6b8 0%, #b0aeb0 100%);
+  background-color: #fafafa;
 }
 .tab-item:first-child {
   border-left: 0;
 }
 .tab-item.active {
-  background-color: #d4d2d4;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4d2d4), color-stop(100%, #cccacc));
-  background-image: -webkit-linear-gradient(top, #d4d2d4 0%, #cccacc 100%);
-  background-image: linear-gradient(to bottom, #d4d2d4 0%, #cccacc 100%);
+  background-color: #ddd;
 }
 .tab-item .icon-close-tab {
   position: absolute;
diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
index 21c0d4c..42f61c0 100644
--- a/docs/dist/css/photon-theme-osx.css
+++ b/docs/dist/css/photon-theme-osx.css
@@ -26,7 +26,6 @@
 
 .title {
   font-weight: 400;
-  text-align: center;
   color: #555;
 }
 
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index e572b20..ca695a2 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -372,6 +372,7 @@ h6 {
   border-right-color: #c2c0c2;
   border-bottom-color: #a19fa1;
   border-left-color: #c2c0c2;
+  background-color: #fafafa;
 }
 .btn-default:active {
   background-color: #ccc;
@@ -541,6 +542,7 @@ h6 {
 .title {
   margin: 0;
   font-size: 12px;
+  text-align: center;
   cursor: default;
 }
 
@@ -2277,19 +2279,13 @@ td:last-child {
   font-size: 12px;
   text-align: center;
   border-left: 1px solid #999;
-  background-color: #b8b6b8;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8b6b8), color-stop(100%, #b0aeb0));
-  background-image: -webkit-linear-gradient(top, #b8b6b8 0%, #b0aeb0 100%);
-  background-image: linear-gradient(to bottom, #b8b6b8 0%, #b0aeb0 100%);
+  background-color: #fafafa;
 }
 .tab-item:first-child {
   border-left: 0;
 }
 .tab-item.active {
-  background-color: #d4d2d4;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4d2d4), color-stop(100%, #cccacc));
-  background-image: -webkit-linear-gradient(top, #d4d2d4 0%, #cccacc 100%);
-  background-image: linear-gradient(to bottom, #d4d2d4 0%, #cccacc 100%);
+  background-color: #ddd;
 }
 .tab-item .icon-close-tab {
   position: absolute;
diff --git a/sass/bars.scss b/sass/bars.scss
index 2171116..75d9af1 100644
--- a/sass/bars.scss
+++ b/sass/bars.scss
@@ -24,6 +24,7 @@
 .title {
   margin: 0;
   font-size: 12px;
+  text-align: center;
   cursor: default;
 }
 
diff --git a/sass/buttons.scss b/sass/buttons.scss
index b539c11..e428a16 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -44,6 +44,7 @@
   border-right-color: $dark-border-color;
   border-bottom-color: $darker-bottom-border-color;
   border-left-color: $dark-border-color;
+  background-color: #fafafa;
 
   &:active {
     background-color: #ccc;
diff --git a/sass/tabs.scss b/sass/tabs.scss
index fdc286c..836bf7b 100644
--- a/sass/tabs.scss
+++ b/sass/tabs.scss
@@ -15,14 +15,14 @@
   font-size: 12px;
   text-align: center;
   border-left: 1px solid #999;
-  @include linear-gradient(#b8b6b8, #b0aeb0);
+  background-color: #fafafa;
 
   &:first-child {
     border-left: 0;
   }
 
   &.active {
-    @include linear-gradient(#d4d2d4, #cccacc);
+    background-color: #ddd;
   }
 
   .icon-close-tab {
diff --git a/sass/theme-osx.scss b/sass/theme-osx.scss
index 9f5bf01..ed1e94c 100644
--- a/sass/theme-osx.scss
+++ b/sass/theme-osx.scss
@@ -71,7 +71,6 @@ $default-border-radius: 4px;
 // Simple centered title to go in the toolbar
 .title {
   font-weight: 400;
-  text-align: center;
   color: #555;
 }
 

From 3f4d1797a195c24ea0ca8b6a3f35466de79c23a1 Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 14:15:00 -0800
Subject: [PATCH 07/22] apply the osx theme

---
 docs/components/bars-actions.html  | 3 +++
 docs/components/bars-tabs.html     | 3 +++
 docs/components/bars.html          | 3 +++
 docs/components/basic-sidebar.html | 3 +++
 docs/components/basic-window.html  | 3 +++
 docs/components/button-groups.html | 3 +++
 docs/components/buttons-large.html | 3 +++
 docs/components/buttons-mini.html  | 3 +++
 docs/components/buttons.html       | 3 +++
 docs/components/common-layout.html | 3 +++
 docs/components/forms.html         | 3 +++
 docs/components/icons.html         | 3 +++
 docs/components/lists.html         | 3 +++
 docs/components/mini-sidebar.html  | 3 +++
 docs/components/navs.html          | 3 +++
 docs/components/tables.html        | 3 +++
 docs/components/three-paned.html   | 3 +++
 docs/demo-app.html                 | 3 +++
 18 files changed, 54 insertions(+)

diff --git a/docs/components/bars-actions.html b/docs/components/bars-actions.html
index 5e1fbb1..6db98e9 100644
--- a/docs/components/bars-actions.html
+++ b/docs/components/bars-actions.html
@@ -7,6 +7,9 @@
 
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
+
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
   </head>
   <body>
     <div class="window">
diff --git a/docs/components/bars-tabs.html b/docs/components/bars-tabs.html
index c93c499..6f09722 100644
--- a/docs/components/bars-tabs.html
+++ b/docs/components/bars-tabs.html
@@ -7,6 +7,9 @@
 
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
+
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
   </head>
   <body>
     <div class="window">
diff --git a/docs/components/bars.html b/docs/components/bars.html
index be44d83..63d617d 100644
--- a/docs/components/bars.html
+++ b/docs/components/bars.html
@@ -7,6 +7,9 @@
 
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
+
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
   </head>
   <body>
     <div class="window">
diff --git a/docs/components/basic-sidebar.html b/docs/components/basic-sidebar.html
index 3e77dad..9d854fb 100644
--- a/docs/components/basic-sidebar.html
+++ b/docs/components/basic-sidebar.html
@@ -7,6 +7,9 @@
 
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
+
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
   </head>
   <body>
     <div class="window">
diff --git a/docs/components/basic-window.html b/docs/components/basic-window.html
index a52c155..d01369f 100644
--- a/docs/components/basic-window.html
+++ b/docs/components/basic-window.html
@@ -7,6 +7,9 @@
 
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
+
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
   </head>
   <body>
     <div class="window">
diff --git a/docs/components/button-groups.html b/docs/components/button-groups.html
index 90e6c3c..71e2da8 100644
--- a/docs/components/button-groups.html
+++ b/docs/components/button-groups.html
@@ -8,6 +8,9 @@
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
 
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
+
     <style>
       .btn-group {
         margin-bottom: 1rem;
diff --git a/docs/components/buttons-large.html b/docs/components/buttons-large.html
index b5cc3b3..3ca2eed 100644
--- a/docs/components/buttons-large.html
+++ b/docs/components/buttons-large.html
@@ -8,6 +8,9 @@
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
 
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
+
     <style>
       .btn {
         margin-bottom: 1rem;
diff --git a/docs/components/buttons-mini.html b/docs/components/buttons-mini.html
index 52e0a1f..d8c5f0f 100644
--- a/docs/components/buttons-mini.html
+++ b/docs/components/buttons-mini.html
@@ -8,6 +8,9 @@
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
 
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
+
     <style>
       .btn {
         margin-bottom: 1rem;
diff --git a/docs/components/buttons.html b/docs/components/buttons.html
index ea83807..85e2a49 100644
--- a/docs/components/buttons.html
+++ b/docs/components/buttons.html
@@ -8,6 +8,9 @@
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
 
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
+
     <style>
       .btn {
         margin-bottom: 1rem;
diff --git a/docs/components/common-layout.html b/docs/components/common-layout.html
index 9d0e2cf..527d319 100644
--- a/docs/components/common-layout.html
+++ b/docs/components/common-layout.html
@@ -7,6 +7,9 @@
 
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
+
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
   </head>
   <body>
     <div class="window">
diff --git a/docs/components/forms.html b/docs/components/forms.html
index cc6d9c5..1209f2a 100644
--- a/docs/components/forms.html
+++ b/docs/components/forms.html
@@ -8,6 +8,9 @@
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
 
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
+
     <style>
       form {
         padding-right: 1px;
diff --git a/docs/components/icons.html b/docs/components/icons.html
index 5e26d42..533a74d 100644
--- a/docs/components/icons.html
+++ b/docs/components/icons.html
@@ -7,6 +7,9 @@
 
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
+
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
   </head>
 
   <style>
diff --git a/docs/components/lists.html b/docs/components/lists.html
index 4291802..f78352c 100644
--- a/docs/components/lists.html
+++ b/docs/components/lists.html
@@ -8,6 +8,9 @@
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
 
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
+
     <style>
       .sidebar {
         background-color: #f5f5f4;
diff --git a/docs/components/mini-sidebar.html b/docs/components/mini-sidebar.html
index 75ce0d0..8228122 100644
--- a/docs/components/mini-sidebar.html
+++ b/docs/components/mini-sidebar.html
@@ -7,6 +7,9 @@
 
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
+
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
   </head>
   <body>
     <div class="window">
diff --git a/docs/components/navs.html b/docs/components/navs.html
index 5045311..b271199 100644
--- a/docs/components/navs.html
+++ b/docs/components/navs.html
@@ -8,6 +8,9 @@
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
 
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
+
     <style>
       .sidebar {
         background-color: #f5f5f4;
diff --git a/docs/components/tables.html b/docs/components/tables.html
index 1bfbe8f..58dd3f9 100644
--- a/docs/components/tables.html
+++ b/docs/components/tables.html
@@ -7,6 +7,9 @@
 
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
+
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
   </head>
   <body>
     <div class="window">
diff --git a/docs/components/three-paned.html b/docs/components/three-paned.html
index 54b0a0d..a9ca9ec 100644
--- a/docs/components/three-paned.html
+++ b/docs/components/three-paned.html
@@ -7,6 +7,9 @@
 
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
+
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
   </head>
   <body>
     <div class="window">
diff --git a/docs/demo-app.html b/docs/demo-app.html
index 20bc311..9d64271 100644
--- a/docs/demo-app.html
+++ b/docs/demo-app.html
@@ -8,6 +8,9 @@
     <!-- Photon.css -->
     <link rel="stylesheet" href="/dist/css/photon.css">
 
+    <!-- Photon-theme-osx.css -->
+    <link rel="stylesheet" href="/dist/css/photon-theme-osx.css">
+
     <style>
       .window {
         border-radius: 6px;

From 754ef949ebf403ccf8d027ab551568589a350b4d Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 14:23:01 -0800
Subject: [PATCH 08/22] pplaying around with the template

---
 dist/css/photon.css               |  2 +-
 dist/template-app/index.html      | 30 +++++++++++++++++++++++++++++-
 docs/dist/css/photon.css          |  2 +-
 docs/dist/template-app/index.html | 30 +++++++++++++++++++++++++++++-
 sass/buttons.scss                 |  2 +-
 5 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/dist/css/photon.css b/dist/css/photon.css
index ca695a2..99ce879 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -463,7 +463,7 @@ h6 {
 .btn-dropdown:after {
   font-family: "photon-entypo";
   margin-left: 5px;
-  content: "";
+  content: '\e873';
 }
 
 .btn-group {
diff --git a/dist/template-app/index.html b/dist/template-app/index.html
index 0d99f4c..f125716 100644
--- a/dist/template-app/index.html
+++ b/dist/template-app/index.html
@@ -5,7 +5,6 @@
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="../css/photon.css">
-    <link rel="stylesheet" href="../css/photon-theme-osx.css">
 
     <!-- Javascript -->
     <script src="js/menu.js" charset="utf-8"></script>
@@ -16,6 +15,35 @@
       <!-- .toolbar-header sits at the top of your app -->
       <header class="toolbar toolbar-header">
         <h1 class="title">Photon</h1>
+
+        <div class="toolbar-actions">
+          <div class="btn-group">
+            <button class="btn btn-default">
+              <span class="icon icon-home"></span>
+            </button>
+            <button class="btn btn-default">
+              <span class="icon icon-folder"></span>
+            </button>
+            <button class="btn btn-default active">
+              <span class="icon icon-cloud"></span>
+            </button>
+            <button class="btn btn-default">
+              <span class="icon icon-popup"></span>
+            </button>
+            <button class="btn btn-default">
+              <span class="icon icon-shuffle"></span>
+            </button>
+          </div>
+
+          <button class="btn btn-default">
+            <span class="icon icon-home icon-text"></span>
+            Filters
+          </button>
+
+          <button class="btn btn-default btn-dropdown pull-right js-popover-trigger" type="button">
+            <span class="icon icon-megaphone"></span>
+          </button>
+        </div>
       </header>
 
       <!-- Your app's content goes inside .window-content -->
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index ca695a2..99ce879 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -463,7 +463,7 @@ h6 {
 .btn-dropdown:after {
   font-family: "photon-entypo";
   margin-left: 5px;
-  content: "";
+  content: '\e873';
 }
 
 .btn-group {
diff --git a/docs/dist/template-app/index.html b/docs/dist/template-app/index.html
index 0d99f4c..f125716 100644
--- a/docs/dist/template-app/index.html
+++ b/docs/dist/template-app/index.html
@@ -5,7 +5,6 @@
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="../css/photon.css">
-    <link rel="stylesheet" href="../css/photon-theme-osx.css">
 
     <!-- Javascript -->
     <script src="js/menu.js" charset="utf-8"></script>
@@ -16,6 +15,35 @@
       <!-- .toolbar-header sits at the top of your app -->
       <header class="toolbar toolbar-header">
         <h1 class="title">Photon</h1>
+
+        <div class="toolbar-actions">
+          <div class="btn-group">
+            <button class="btn btn-default">
+              <span class="icon icon-home"></span>
+            </button>
+            <button class="btn btn-default">
+              <span class="icon icon-folder"></span>
+            </button>
+            <button class="btn btn-default active">
+              <span class="icon icon-cloud"></span>
+            </button>
+            <button class="btn btn-default">
+              <span class="icon icon-popup"></span>
+            </button>
+            <button class="btn btn-default">
+              <span class="icon icon-shuffle"></span>
+            </button>
+          </div>
+
+          <button class="btn btn-default">
+            <span class="icon icon-home icon-text"></span>
+            Filters
+          </button>
+
+          <button class="btn btn-default btn-dropdown pull-right js-popover-trigger" type="button">
+            <span class="icon icon-megaphone"></span>
+          </button>
+        </div>
       </header>
 
       <!-- Your app's content goes inside .window-content -->
diff --git a/sass/buttons.scss b/sass/buttons.scss
index e428a16..2c71502 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -124,5 +124,5 @@
 .btn-dropdown:after {
   font-family: "photon-entypo";
   margin-left: 5px;
-  content: '\e873'
+  content: '\e873';
 }

From 32c4d65cce79c9d3265432bf3959ec599b2d806a Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 14:25:56 -0800
Subject: [PATCH 09/22] get rid of that button

---
 dist/css/photon.css      | 1 -
 docs/dist/css/photon.css | 1 -
 sass/buttons.scss        | 1 -
 3 files changed, 3 deletions(-)

diff --git a/dist/css/photon.css b/dist/css/photon.css
index 99ce879..b8afc2a 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -345,7 +345,6 @@ h6 {
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   -webkit-app-region: no-drag;
 }
 .btn:focus {
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index 99ce879..b8afc2a 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -345,7 +345,6 @@ h6 {
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   -webkit-app-region: no-drag;
 }
 .btn:focus {
diff --git a/sass/buttons.scss b/sass/buttons.scss
index 2c71502..e0e3294 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -15,7 +15,6 @@
   background-image: none;
   border: 1px solid transparent;
   border-radius: $default-border-radius;
-  box-shadow: 0 1px 1px rgba(0,0,0,.1);
   -webkit-app-region: no-drag;
 
   &:focus {

From 9879e616eb52ddf2d2e5bac4b3efa35b442753ee Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 14:29:02 -0800
Subject: [PATCH 10/22] type

---
 dist/css/photon.css      | 2 +-
 docs/dist/css/photon.css | 2 +-
 sass/variables.scss      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/dist/css/photon.css b/dist/css/photon.css
index b8afc2a..1f06caf 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -155,7 +155,7 @@ body {
   height: 100%;
   padding: 0;
   margin: 0;
-  font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
+  font-family: "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
   font-size: 13px;
   line-height: 1.6;
   color: #333;
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index b8afc2a..1f06caf 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -155,7 +155,7 @@ body {
   height: 100%;
   padding: 0;
   margin: 0;
-  font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
+  font-family: "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
   font-size: 13px;
   line-height: 1.6;
   color: #333;
diff --git a/sass/variables.scss b/sass/variables.scss
index da35145..704b247 100644
--- a/sass/variables.scss
+++ b/sass/variables.scss
@@ -7,7 +7,7 @@
 
 $font-path: '../fonts/' !default;
 // Try to use the system's font on whatever platform the user is on.
-$font-family-default: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif !default;
+$font-family-default: "Helvetica Neue", Helvetica, "Segoe UI", sans-serif !default;
 $font-size-default: 13px !default;
 $font-weight: 500 !default;
 $font-weight-bold: 700 !default;

From 45bb6ea7b71e8e9c162831dbc17cd9102b4d7a90 Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 14:38:56 -0800
Subject: [PATCH 11/22] some utilities too

---
 dist/css/photon-theme-osx.css      | 75 ++++++++++++++++++++++++++
 dist/css/photon.css                |  6 +--
 docs/dist/css/photon-theme-osx.css | 75 ++++++++++++++++++++++++++
 docs/dist/css/photon.css           |  6 +--
 sass/bars.scss                     |  4 +-
 sass/theme-osx.scss                | 87 ++++++++++++++++++++++++++++++
 sass/utilities.scss                |  2 +-
 7 files changed, 246 insertions(+), 9 deletions(-)

diff --git a/dist/css/photon-theme-osx.css b/dist/css/photon-theme-osx.css
index 42f61c0..a4e0f54 100644
--- a/dist/css/photon-theme-osx.css
+++ b/dist/css/photon-theme-osx.css
@@ -24,6 +24,11 @@
   border-top: 1px solid #c2c0c2;
 }
 
+.toolbar-actions {
+  margin-top: 4px;
+  margin-bottom: 3px;
+}
+
 .title {
   font-weight: 400;
   color: #555;
@@ -220,3 +225,73 @@ th {
 .tab-item .icon-close-tab:hover {
   background-color: rgba(0, 0, 0, 0.08);
 }
+
+.padded {
+  padding: 10px;
+}
+
+.padded-less {
+  padding: 5px;
+}
+
+.padded-more {
+  padding: 20px;
+}
+
+.padded-vertically {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.padded-vertically-less {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.padded-vertically-more {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.padded-horizontally {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+.padded-horizontally-less {
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+.padded-horizontally-more {
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
+.padded-top {
+  padding-top: 10px;
+}
+
+.padded-top-less {
+  padding-top: 5px;
+}
+
+.padded-top-more {
+  padding-top: 20px;
+}
+
+.padded-bottom {
+  padding-bottom: 10px;
+}
+
+.padded-bottom-less {
+  padding-bottom: 5px;
+}
+
+.padded-bottom-more {
+  padding-bottom: 20px;
+}
+
+.sidebar {
+  background-color: #f5f5f4;
+}
diff --git a/dist/css/photon.css b/dist/css/photon.css
index 1f06caf..6c56828 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -313,7 +313,7 @@ h6 {
 }
 
 .sidebar {
-  background-color: #f5f5f4;
+  background-color: #f6f6f6;
 }
 
 .draggable {
@@ -546,8 +546,8 @@ h6 {
 }
 
 .toolbar-actions {
-  margin-top: 4px;
-  margin-bottom: 3px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   padding-right: 3px;
   padding-left: 3px;
   padding-bottom: 3px;
diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
index 42f61c0..a4e0f54 100644
--- a/docs/dist/css/photon-theme-osx.css
+++ b/docs/dist/css/photon-theme-osx.css
@@ -24,6 +24,11 @@
   border-top: 1px solid #c2c0c2;
 }
 
+.toolbar-actions {
+  margin-top: 4px;
+  margin-bottom: 3px;
+}
+
 .title {
   font-weight: 400;
   color: #555;
@@ -220,3 +225,73 @@ th {
 .tab-item .icon-close-tab:hover {
   background-color: rgba(0, 0, 0, 0.08);
 }
+
+.padded {
+  padding: 10px;
+}
+
+.padded-less {
+  padding: 5px;
+}
+
+.padded-more {
+  padding: 20px;
+}
+
+.padded-vertically {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.padded-vertically-less {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.padded-vertically-more {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.padded-horizontally {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+.padded-horizontally-less {
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+.padded-horizontally-more {
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
+.padded-top {
+  padding-top: 10px;
+}
+
+.padded-top-less {
+  padding-top: 5px;
+}
+
+.padded-top-more {
+  padding-top: 20px;
+}
+
+.padded-bottom {
+  padding-bottom: 10px;
+}
+
+.padded-bottom-less {
+  padding-bottom: 5px;
+}
+
+.padded-bottom-more {
+  padding-bottom: 20px;
+}
+
+.sidebar {
+  background-color: #f5f5f4;
+}
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index 1f06caf..6c56828 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -313,7 +313,7 @@ h6 {
 }
 
 .sidebar {
-  background-color: #f5f5f4;
+  background-color: #f6f6f6;
 }
 
 .draggable {
@@ -546,8 +546,8 @@ h6 {
 }
 
 .toolbar-actions {
-  margin-top: 4px;
-  margin-bottom: 3px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   padding-right: 3px;
   padding-left: 3px;
   padding-bottom: 3px;
diff --git a/sass/bars.scss b/sass/bars.scss
index 75d9af1..a124668 100644
--- a/sass/bars.scss
+++ b/sass/bars.scss
@@ -30,8 +30,8 @@
 
 // Buttons in toolbars
 .toolbar-actions {
-  margin-top: 4px;
-  margin-bottom: 3px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   padding-right: 3px;
   padding-left: 3px;
   padding-bottom: 3px;
diff --git a/sass/theme-osx.scss b/sass/theme-osx.scss
index ed1e94c..594ce28 100644
--- a/sass/theme-osx.scss
+++ b/sass/theme-osx.scss
@@ -51,6 +51,11 @@ $focus-input-color: lighten($primary-color, 10%)  !default;
 // Border radius
 $default-border-radius: 4px;
 
+// Padding
+$padding: 10px;
+$padding-mini: 3px;
+$padding-less: 5px;
+$padding-more: 20px;
 
 // Bars
 // --------------------------------------------------
@@ -68,6 +73,12 @@ $default-border-radius: 4px;
   border-top: 1px solid $dark-border-color;
 }
 
+// Buttons in toolbars
+.toolbar-actions {
+  margin-top: 4px;
+  margin-bottom: 3px;
+}
+
 // Simple centered title to go in the toolbar
 .title {
   font-weight: 400;
@@ -291,3 +302,79 @@ th {
     background-color: rgba(0,0,0,.08);
   }
 }
+
+// Padding
+.padded {
+  padding: $padding;
+}
+
+.padded-less {
+  padding: $padding-less;
+}
+
+.padded-more {
+  padding: $padding-more;
+}
+
+// Vertical Padding
+.padded-vertically {
+  padding-top: $padding;
+  padding-bottom: $padding;
+}
+
+.padded-vertically-less {
+  padding-top: $padding-less;
+  padding-bottom: $padding-less;
+}
+
+.padded-vertically-more {
+  padding-top: $padding-more;
+  padding-bottom: $padding-more;
+}
+
+// Horizontal Padding
+.padded-horizontally {
+  padding-right: $padding;
+  padding-left: $padding;
+}
+
+.padded-horizontally-less {
+  padding-right: $padding-less;
+  padding-left: $padding-less;
+}
+
+.padded-horizontally-more {
+  padding-right: $padding-more;
+  padding-left: $padding-more;
+}
+
+// Padding top
+.padded-top {
+  padding-top: $padding;
+}
+
+.padded-top-less {
+  padding-top: $padding-less;
+}
+
+.padded-top-more {
+  padding-top: $padding-more;
+}
+
+// Padding bottom
+.padded-bottom {
+  padding-bottom: $padding;
+}
+
+.padded-bottom-less {
+  padding-bottom: $padding-less;
+}
+
+.padded-bottom-more {
+  padding-bottom: $padding-more;
+}
+
+// Set the background-color to set a sidebar back a bit.
+.sidebar {
+  background-color: #f5f5f4;
+}
diff --git a/sass/utilities.scss b/sass/utilities.scss
index 341bb11..d16c9c6 100644
--- a/sass/utilities.scss
+++ b/sass/utilities.scss
@@ -103,7 +103,7 @@
 
 // Set the background-color to set a sidebar back a bit.
 .sidebar {
-  background-color: #f5f5f4;
+  background-color: #f6f6f6;
 }
 
 // Allow the window to be dragged around the desktop by any element in the application.

From 957652d7e836642bde2afe5603c52506333b0345 Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 15:32:02 -0800
Subject: [PATCH 12/22] base theme colors

---
 dist/css/photon-theme-osx.css      |   7 +
 dist/css/photon.css                |  89 +++-----
 dist/template-app/app.js           |   4 +-
 dist/template-app/index.html       | 304 +++++++++++++--------------
 docs/dist/css/photon-theme-osx.css |   7 +
 docs/dist/css/photon.css           |  89 +++-----
 docs/dist/template-app/app.js      |   4 +-
 docs/dist/template-app/index.html  | 322 +++++++++++++++--------------
 sass/bars.scss                     |   8 +-
 sass/buttons.scss                  |  29 +--
 sass/grid.scss                     |   6 +-
 sass/theme-osx.scss                |  11 +
 sass/utilities.scss                |   2 +-
 sass/variables.scss                |   8 +-
 14 files changed, 420 insertions(+), 470 deletions(-)

diff --git a/dist/css/photon-theme-osx.css b/dist/css/photon-theme-osx.css
index a4e0f54..0134952 100644
--- a/dist/css/photon-theme-osx.css
+++ b/dist/css/photon-theme-osx.css
@@ -27,6 +27,9 @@
 .toolbar-actions {
   margin-top: 4px;
   margin-bottom: 3px;
+  padding-right: 3px;
+  padding-left: 3px;
+  padding-bottom: 3px;
 }
 
 .title {
@@ -148,6 +151,10 @@
   box-shadow: 0 0 0 3px #6db3fd;
 }
 
+.pane {
+  border-left: 1px solid #ddd;
+}
+
 .img-rounded {
   border-radius: 4px;
 }
diff --git a/dist/css/photon.css b/dist/css/photon.css
index 6c56828..84d8792 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -167,7 +167,7 @@ hr {
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #ccc;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -313,7 +313,7 @@ h6 {
 }
 
 .sidebar {
-  background-color: #f6f6f6;
+  background-color: #374249;
 }
 
 .draggable {
@@ -344,7 +344,7 @@ h6 {
   cursor: default;
   background-image: none;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: 3px;
   -webkit-app-region: no-drag;
 }
 .btn:focus {
@@ -367,10 +367,7 @@ h6 {
 
 .btn-default {
   color: #333;
-  border-top-color: #c2c0c2;
-  border-right-color: #c2c0c2;
-  border-bottom-color: #a19fa1;
-  border-left-color: #c2c0c2;
+  border-color: #c2c0c2;
   background-color: #fafafa;
 }
 .btn-default:active {
@@ -385,63 +382,31 @@ h6 {
 }
 
 .btn-primary {
-  border-color: #388df8;
-  border-bottom-color: #0866dc;
-  background-color: #6eb4f7;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6eb4f7), color-stop(100%, #1a82fb));
-  background-image: -webkit-linear-gradient(top, #6eb4f7 0%, #1a82fb 100%);
-  background-image: linear-gradient(to bottom, #6eb4f7 0%, #1a82fb 100%);
+  background-color: #57acf5;
 }
 .btn-primary:active {
-  background-color: #3e9bf4;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9bf4), color-stop(100%, #0469de));
-  background-image: -webkit-linear-gradient(top, #3e9bf4 0%, #0469de 100%);
-  background-image: linear-gradient(to bottom, #3e9bf4 0%, #0469de 100%);
+  background-color: #2794f2;
 }
 
 .btn-positive {
-  border-color: #29a03b;
-  border-bottom-color: #248b34;
-  background-color: #5bd46d;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bd46d), color-stop(100%, #29a03b));
-  background-image: -webkit-linear-gradient(top, #5bd46d 0%, #29a03b 100%);
-  background-image: linear-gradient(to bottom, #5bd46d 0%, #29a03b 100%);
+  background-color: #34c84a;
 }
 .btn-positive:active {
-  background-color: #34c84a;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #34c84a), color-stop(100%, #248b34));
-  background-image: -webkit-linear-gradient(top, #34c84a 0%, #248b34 100%);
-  background-image: linear-gradient(to bottom, #34c84a 0%, #248b34 100%);
+  background-color: #29a03b;
 }
 
 .btn-negative {
-  border-color: #fb2f29;
-  border-bottom-color: #fb1710;
-  background-color: #fd918d;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd918d), color-stop(100%, #fb2f29));
-  background-image: -webkit-linear-gradient(top, #fd918d 0%, #fb2f29 100%);
-  background-image: linear-gradient(to bottom, #fd918d 0%, #fb2f29 100%);
+  background-color: #fc605b;
 }
 .btn-negative:active {
-  background-color: #fc605b;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc605b), color-stop(100%, #fb1710));
-  background-image: -webkit-linear-gradient(top, #fc605b 0%, #fb1710 100%);
-  background-image: linear-gradient(to bottom, #fc605b 0%, #fb1710 100%);
+  background-color: #fb2f29;
 }
 
 .btn-warning {
-  border-color: #fcaa0e;
-  border-bottom-color: #ee9d02;
-  background-color: #fece72;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fece72), color-stop(100%, #fcaa0e));
-  background-image: -webkit-linear-gradient(top, #fece72 0%, #fcaa0e 100%);
-  background-image: linear-gradient(to bottom, #fece72 0%, #fcaa0e 100%);
+  background-color: #fdbc40;
 }
 .btn-warning:active {
-  background-color: #fdbc40;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdbc40), color-stop(100%, #ee9d02));
-  background-image: -webkit-linear-gradient(top, #fdbc40 0%, #ee9d02 100%);
-  background-image: linear-gradient(to bottom, #fdbc40 0%, #ee9d02 100%);
+  background-color: #fcaa0e;
 }
 
 .btn .icon {
@@ -547,10 +512,10 @@ h6 {
 
 .toolbar-actions {
   margin-top: 10px;
-  margin-bottom: 10px;
-  padding-right: 3px;
-  padding-left: 3px;
-  padding-bottom: 3px;
+  margin-bottom: 7px;
+  padding-right: 5px;
+  padding-left: 5px;
+  padding-bottom: 5px;
   -webkit-app-region: drag;
 }
 .toolbar-actions:before, .toolbar-actions:after {
@@ -593,13 +558,13 @@ input[type="checkbox"] {
   font-size: 13px;
   line-height: 1.6;
   background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
   outline: none;
 }
 .form-control:focus {
-  border-color: #6db3fd;
-  box-shadow: 0 0 0 3px #6db3fd;
+  border-color: #87c4f8;
+  box-shadow: 0 0 0 3px #87c4f8;
 }
 
 textarea {
@@ -653,12 +618,16 @@ textarea {
   position: relative;
   overflow-y: auto;
   flex: 1;
-  border-left: 1px solid #ddd;
+  border-left: 1px solid #c2c0c2;
 }
 .pane:first-child {
   border-left: 0;
 }
 
+.pane-borderless {
+  border-left: 0;
+}
+
 .pane-sm {
   max-width: 220px;
   min-width: 150px;
@@ -688,7 +657,7 @@ img {
 }
 
 .img-rounded {
-  border-radius: 4px;
+  border-radius: 3px;
 }
 
 .list-group {
@@ -708,7 +677,7 @@ img {
   padding: 10px;
   font-size: 12px;
   color: #555;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #ccc;
 }
 .list-group-item:first-child {
   border-top: 0;
@@ -2248,8 +2217,8 @@ thead tr:active {
 
 th {
   font-weight: normal;
-  border-right: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
 }
 
 th,
diff --git a/dist/template-app/app.js b/dist/template-app/app.js
index b3391f0..0b4d2fd 100644
--- a/dist/template-app/app.js
+++ b/dist/template-app/app.js
@@ -23,8 +23,8 @@ app.on('ready', function() {
     height: 300,
     'min-width': 500,
     'min-height': 200,
-    'accept-first-mouse': true,
-    'title-bar-style': 'hidden'
+    'accept-first-mouse': true
+    //'title-bar-style': 'hidden'
   });
 
   // and load the index.html of the app.
diff --git a/dist/template-app/index.html b/dist/template-app/index.html
index f125716..7990bd5 100644
--- a/dist/template-app/index.html
+++ b/dist/template-app/index.html
@@ -5,52 +5,18 @@
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="../css/photon.css">
+    <!-- <link rel="stylesheet" href="../css/photon-theme-osx.css"> -->
 
     <!-- Javascript -->
     <script src="js/menu.js" charset="utf-8"></script>
   </head>
   <body>
     <div class="window">
-
-      <!-- .toolbar-header sits at the top of your app -->
-      <header class="toolbar toolbar-header">
-        <h1 class="title">Photon</h1>
-
-        <div class="toolbar-actions">
-          <div class="btn-group">
-            <button class="btn btn-default">
-              <span class="icon icon-home"></span>
-            </button>
-            <button class="btn btn-default">
-              <span class="icon icon-folder"></span>
-            </button>
-            <button class="btn btn-default active">
-              <span class="icon icon-cloud"></span>
-            </button>
-            <button class="btn btn-default">
-              <span class="icon icon-popup"></span>
-            </button>
-            <button class="btn btn-default">
-              <span class="icon icon-shuffle"></span>
-            </button>
-          </div>
-
-          <button class="btn btn-default">
-            <span class="icon icon-home icon-text"></span>
-            Filters
-          </button>
-
-          <button class="btn btn-default btn-dropdown pull-right js-popover-trigger" type="button">
-            <span class="icon icon-megaphone"></span>
-          </button>
-        </div>
-      </header>
-
       <!-- Your app's content goes inside .window-content -->
       <div class="window-content">
         <div class="pane-group">
           <div class="pane pane-sm sidebar">
-            <nav class="nav-group">
+            <!-- <nav class="nav-group">
               <h5 class="nav-group-title">Favorites</h5>
               <span class="nav-group-item">
                 <span class="icon icon-home"></span>
@@ -80,130 +46,152 @@ <h5 class="nav-group-title">Favorites</h5>
                 <span class="icon icon-monitor"></span>
                 Desktop
               </span>
-            </nav>
+            </nav> -->
           </div>
 
-          <div class="pane">
-            <table class="table-striped">
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Kind</th>
-                  <th>Date Modified</th>
-                  <th>Author</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>bars.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>base.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>button-groups.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>buttons.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>docs.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>forms.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>grid.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>icons.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>images.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>lists.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>mixins.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>navs.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>normalize.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>photon.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>tables.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>tabs.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>utilities.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>variables.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-              </tbody>
-            </table>
+          <div class="pane pane-borderless">
+            <div class="window">
+
+            <!-- .toolbar-header sits at the top of your app -->
+            <header class="toolbar toolbar-header">
+              <div class="toolbar-actions">
+                <button class="btn btn-default btn-large">
+                  <span class="icon icon-home icon-text"></span>
+                  Home
+                </button>
+
+                <button class="btn btn-primary btn-large pull-right" type="button">
+                  Primary Button
+                </button>
+              </div>
+            </header>
+
+            <div class="window-content">
+              <div class="pane-group">
+                <div class="pane">
+                  <table class="table-striped">
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+                        <th>Kind</th>
+                        <th>Date Modified</th>
+                        <th>Author</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>bars.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>base.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>button-groups.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>buttons.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>docs.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>forms.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>grid.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>icons.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>images.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>lists.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>mixins.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>navs.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>normalize.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>photon.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>tables.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>tabs.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>utilities.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>variables.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
index a4e0f54..0134952 100644
--- a/docs/dist/css/photon-theme-osx.css
+++ b/docs/dist/css/photon-theme-osx.css
@@ -27,6 +27,9 @@
 .toolbar-actions {
   margin-top: 4px;
   margin-bottom: 3px;
+  padding-right: 3px;
+  padding-left: 3px;
+  padding-bottom: 3px;
 }
 
 .title {
@@ -148,6 +151,10 @@
   box-shadow: 0 0 0 3px #6db3fd;
 }
 
+.pane {
+  border-left: 1px solid #ddd;
+}
+
 .img-rounded {
   border-radius: 4px;
 }
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index 6c56828..84d8792 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -167,7 +167,7 @@ hr {
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #ccc;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -313,7 +313,7 @@ h6 {
 }
 
 .sidebar {
-  background-color: #f6f6f6;
+  background-color: #374249;
 }
 
 .draggable {
@@ -344,7 +344,7 @@ h6 {
   cursor: default;
   background-image: none;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: 3px;
   -webkit-app-region: no-drag;
 }
 .btn:focus {
@@ -367,10 +367,7 @@ h6 {
 
 .btn-default {
   color: #333;
-  border-top-color: #c2c0c2;
-  border-right-color: #c2c0c2;
-  border-bottom-color: #a19fa1;
-  border-left-color: #c2c0c2;
+  border-color: #c2c0c2;
   background-color: #fafafa;
 }
 .btn-default:active {
@@ -385,63 +382,31 @@ h6 {
 }
 
 .btn-primary {
-  border-color: #388df8;
-  border-bottom-color: #0866dc;
-  background-color: #6eb4f7;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6eb4f7), color-stop(100%, #1a82fb));
-  background-image: -webkit-linear-gradient(top, #6eb4f7 0%, #1a82fb 100%);
-  background-image: linear-gradient(to bottom, #6eb4f7 0%, #1a82fb 100%);
+  background-color: #57acf5;
 }
 .btn-primary:active {
-  background-color: #3e9bf4;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9bf4), color-stop(100%, #0469de));
-  background-image: -webkit-linear-gradient(top, #3e9bf4 0%, #0469de 100%);
-  background-image: linear-gradient(to bottom, #3e9bf4 0%, #0469de 100%);
+  background-color: #2794f2;
 }
 
 .btn-positive {
-  border-color: #29a03b;
-  border-bottom-color: #248b34;
-  background-color: #5bd46d;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bd46d), color-stop(100%, #29a03b));
-  background-image: -webkit-linear-gradient(top, #5bd46d 0%, #29a03b 100%);
-  background-image: linear-gradient(to bottom, #5bd46d 0%, #29a03b 100%);
+  background-color: #34c84a;
 }
 .btn-positive:active {
-  background-color: #34c84a;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #34c84a), color-stop(100%, #248b34));
-  background-image: -webkit-linear-gradient(top, #34c84a 0%, #248b34 100%);
-  background-image: linear-gradient(to bottom, #34c84a 0%, #248b34 100%);
+  background-color: #29a03b;
 }
 
 .btn-negative {
-  border-color: #fb2f29;
-  border-bottom-color: #fb1710;
-  background-color: #fd918d;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd918d), color-stop(100%, #fb2f29));
-  background-image: -webkit-linear-gradient(top, #fd918d 0%, #fb2f29 100%);
-  background-image: linear-gradient(to bottom, #fd918d 0%, #fb2f29 100%);
+  background-color: #fc605b;
 }
 .btn-negative:active {
-  background-color: #fc605b;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc605b), color-stop(100%, #fb1710));
-  background-image: -webkit-linear-gradient(top, #fc605b 0%, #fb1710 100%);
-  background-image: linear-gradient(to bottom, #fc605b 0%, #fb1710 100%);
+  background-color: #fb2f29;
 }
 
 .btn-warning {
-  border-color: #fcaa0e;
-  border-bottom-color: #ee9d02;
-  background-color: #fece72;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fece72), color-stop(100%, #fcaa0e));
-  background-image: -webkit-linear-gradient(top, #fece72 0%, #fcaa0e 100%);
-  background-image: linear-gradient(to bottom, #fece72 0%, #fcaa0e 100%);
+  background-color: #fdbc40;
 }
 .btn-warning:active {
-  background-color: #fdbc40;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdbc40), color-stop(100%, #ee9d02));
-  background-image: -webkit-linear-gradient(top, #fdbc40 0%, #ee9d02 100%);
-  background-image: linear-gradient(to bottom, #fdbc40 0%, #ee9d02 100%);
+  background-color: #fcaa0e;
 }
 
 .btn .icon {
@@ -547,10 +512,10 @@ h6 {
 
 .toolbar-actions {
   margin-top: 10px;
-  margin-bottom: 10px;
-  padding-right: 3px;
-  padding-left: 3px;
-  padding-bottom: 3px;
+  margin-bottom: 7px;
+  padding-right: 5px;
+  padding-left: 5px;
+  padding-bottom: 5px;
   -webkit-app-region: drag;
 }
 .toolbar-actions:before, .toolbar-actions:after {
@@ -593,13 +558,13 @@ input[type="checkbox"] {
   font-size: 13px;
   line-height: 1.6;
   background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
   outline: none;
 }
 .form-control:focus {
-  border-color: #6db3fd;
-  box-shadow: 0 0 0 3px #6db3fd;
+  border-color: #87c4f8;
+  box-shadow: 0 0 0 3px #87c4f8;
 }
 
 textarea {
@@ -653,12 +618,16 @@ textarea {
   position: relative;
   overflow-y: auto;
   flex: 1;
-  border-left: 1px solid #ddd;
+  border-left: 1px solid #c2c0c2;
 }
 .pane:first-child {
   border-left: 0;
 }
 
+.pane-borderless {
+  border-left: 0;
+}
+
 .pane-sm {
   max-width: 220px;
   min-width: 150px;
@@ -688,7 +657,7 @@ img {
 }
 
 .img-rounded {
-  border-radius: 4px;
+  border-radius: 3px;
 }
 
 .list-group {
@@ -708,7 +677,7 @@ img {
   padding: 10px;
   font-size: 12px;
   color: #555;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #ccc;
 }
 .list-group-item:first-child {
   border-top: 0;
@@ -2248,8 +2217,8 @@ thead tr:active {
 
 th {
   font-weight: normal;
-  border-right: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
 }
 
 th,
diff --git a/docs/dist/template-app/app.js b/docs/dist/template-app/app.js
index b3391f0..0b4d2fd 100644
--- a/docs/dist/template-app/app.js
+++ b/docs/dist/template-app/app.js
@@ -23,8 +23,8 @@ app.on('ready', function() {
     height: 300,
     'min-width': 500,
     'min-height': 200,
-    'accept-first-mouse': true,
-    'title-bar-style': 'hidden'
+    'accept-first-mouse': true
+    //'title-bar-style': 'hidden'
   });
 
   // and load the index.html of the app.
diff --git a/docs/dist/template-app/index.html b/docs/dist/template-app/index.html
index f125716..f0c00f9 100644
--- a/docs/dist/template-app/index.html
+++ b/docs/dist/template-app/index.html
@@ -5,52 +5,18 @@
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="../css/photon.css">
+    <!-- <link rel="stylesheet" href="../css/photon-theme-osx.css"> -->
 
     <!-- Javascript -->
     <script src="js/menu.js" charset="utf-8"></script>
   </head>
   <body>
     <div class="window">
-
-      <!-- .toolbar-header sits at the top of your app -->
-      <header class="toolbar toolbar-header">
-        <h1 class="title">Photon</h1>
-
-        <div class="toolbar-actions">
-          <div class="btn-group">
-            <button class="btn btn-default">
-              <span class="icon icon-home"></span>
-            </button>
-            <button class="btn btn-default">
-              <span class="icon icon-folder"></span>
-            </button>
-            <button class="btn btn-default active">
-              <span class="icon icon-cloud"></span>
-            </button>
-            <button class="btn btn-default">
-              <span class="icon icon-popup"></span>
-            </button>
-            <button class="btn btn-default">
-              <span class="icon icon-shuffle"></span>
-            </button>
-          </div>
-
-          <button class="btn btn-default">
-            <span class="icon icon-home icon-text"></span>
-            Filters
-          </button>
-
-          <button class="btn btn-default btn-dropdown pull-right js-popover-trigger" type="button">
-            <span class="icon icon-megaphone"></span>
-          </button>
-        </div>
-      </header>
-
       <!-- Your app's content goes inside .window-content -->
       <div class="window-content">
         <div class="pane-group">
           <div class="pane pane-sm sidebar">
-            <nav class="nav-group">
+            <!-- <nav class="nav-group">
               <h5 class="nav-group-title">Favorites</h5>
               <span class="nav-group-item">
                 <span class="icon icon-home"></span>
@@ -80,130 +46,170 @@ <h5 class="nav-group-title">Favorites</h5>
                 <span class="icon icon-monitor"></span>
                 Desktop
               </span>
-            </nav>
+            </nav> -->
           </div>
 
-          <div class="pane">
-            <table class="table-striped">
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Kind</th>
-                  <th>Date Modified</th>
-                  <th>Author</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>bars.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>base.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>button-groups.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>buttons.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>docs.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>forms.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>grid.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>icons.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>images.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>lists.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>mixins.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>navs.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>normalize.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>photon.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>tables.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>tabs.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>utilities.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-                <tr>
-                  <td>variables.scss</td>
-                  <td>Document</td>
-                  <td>Oct 13, 2015</td>
-                  <td>connors</td>
-                </tr>
-              </tbody>
-            </table>
+          <div class="pane pane-borderless">
+            <div class="window">
+
+            <!-- .toolbar-header sits at the top of your app -->
+            <header class="toolbar toolbar-header">
+              <div class="toolbar-actions">
+                <div class="btn-group">
+                  <button class="btn btn-default btn-large">
+                    <span class="icon icon-home"></span>
+                  </button>
+                  <button class="btn btn-default btn-large">
+                    <span class="icon icon-folder"></span>
+                  </button>
+                  <button class="btn btn-default btn-large active">
+                    <span class="icon icon-cloud"></span>
+                  </button>
+                  <button class="btn btn-default btn-large">
+                    <span class="icon icon-popup"></span>
+                  </button>
+                  <button class="btn btn-default btn-large">
+                    <span class="icon icon-shuffle"></span>
+                  </button>
+                </div>
+
+                <button class="btn btn-default btn-large">
+                  <span class="icon icon-home icon-text"></span>
+                  Filters
+                </button>
+
+                <button class="btn btn-primary btn-large pull-right" type="button">
+                  Primary Button
+                </button>
+              </div>
+            </header>
+
+            <div class="window-content">
+              <div class="pane-group">
+                <div class="pane">
+                  <table class="table-striped">
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+                        <th>Kind</th>
+                        <th>Date Modified</th>
+                        <th>Author</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>bars.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>base.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>button-groups.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>buttons.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>docs.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>forms.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>grid.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>icons.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>images.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>lists.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>mixins.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>navs.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>normalize.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>photon.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>tables.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>tabs.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>utilities.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                      <tr>
+                        <td>variables.scss</td>
+                        <td>Document</td>
+                        <td>Oct 13, 2015</td>
+                        <td>connors</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/sass/bars.scss b/sass/bars.scss
index a124668..ff67593 100644
--- a/sass/bars.scss
+++ b/sass/bars.scss
@@ -31,10 +31,10 @@
 // Buttons in toolbars
 .toolbar-actions {
   margin-top: 10px;
-  margin-bottom: 10px;
-  padding-right: 3px;
-  padding-left: 3px;
-  padding-bottom: 3px;
+  margin-bottom: 7px;
+  padding-right: $padding-less;
+  padding-left: $padding-less;
+  padding-bottom: $padding-less;
   -webkit-app-region: drag;
   @include clearfix;
 
diff --git a/sass/buttons.scss b/sass/buttons.scss
index e0e3294..de43aec 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -39,10 +39,7 @@
 // Normal buttons
 .btn-default {
   color: $gray-color;
-  border-top-color: $dark-border-color;
-  border-right-color: $dark-border-color;
-  border-bottom-color: $darker-bottom-border-color;
-  border-left-color: $dark-border-color;
+  border-color: $dark-border-color;
   background-color: #fafafa;
 
   &:active {
@@ -60,45 +57,37 @@
 
 // For primary buttons
 .btn-primary {
-  border-color: #388df8;
-  border-bottom-color: darken(#388df8, 15%);
-  @include linear-gradient(#6eb4f7, #1a82fb);
+  background-color: $primary-color;
 
   &:active {
-    @include linear-gradient(darken(#6eb4f7, 10%), darken(#1a82fb, 10%));
+    background-color: darken($primary-color, 10%);
   }
 }
 
 // For positive buttons
 .btn-positive {
-  border-color: darken($positive-color, 10%);
-  border-bottom-color: darken($positive-color, 15%);
-  @include linear-gradient(lighten($positive-color, 10%), darken($positive-color, 10%));
+  background-color: $positive-color;
 
   &:active {
-    @include linear-gradient($positive-color, darken($positive-color, 15%));
+    background-color: darken($positive-color, 10%);
   }
 }
 
 // For negative actions
 .btn-negative {
-  border-color: darken($negative-color, 10%);
-  border-bottom-color: darken($negative-color, 15%);
-  @include linear-gradient(lighten($negative-color, 10%), darken($negative-color, 10%));
+  background-color: $negative-color;
 
   &:active {
-    @include linear-gradient($negative-color, darken($negative-color, 15%));
+    background-color: darken($negative-color, 10%);
   }
 }
 
 // For warning actions
 .btn-warning {
-  border-color: darken($warning-color, 10%);
-  border-bottom-color: darken($warning-color, 15%);
-  @include linear-gradient(lighten($warning-color, 10%), darken($warning-color, 10%));
+  background-color: $warning-color;
 
   &:active {
-    @include linear-gradient($warning-color, darken($warning-color, 15%));
+    background-color: darken($warning-color, 10%);
   }
 }
 
diff --git a/sass/grid.scss b/sass/grid.scss
index 3760057..14b46bf 100644
--- a/sass/grid.scss
+++ b/sass/grid.scss
@@ -15,13 +15,17 @@
   position: relative;
   overflow-y: auto;
   flex: 1;
-  border-left: 1px solid $border-color;
+  border-left: 1px solid $dark-border-color;
 
   &:first-child {
     border-left: 0;
   }
 }
 
+.pane-borderless {
+  border-left: 0;
+}
+
 .pane-sm {
   max-width: 220px;
   min-width: 150px;
diff --git a/sass/theme-osx.scss b/sass/theme-osx.scss
index 594ce28..2d3fc33 100644
--- a/sass/theme-osx.scss
+++ b/sass/theme-osx.scss
@@ -77,6 +77,9 @@ $padding-more: 20px;
 .toolbar-actions {
   margin-top: 4px;
   margin-bottom: 3px;
+  padding-right: $padding-mini;
+  padding-left: $padding-mini;
+  padding-bottom: $padding-mini;
 }
 
 // Simple centered title to go in the toolbar
@@ -202,6 +205,14 @@ $padding-more: 20px;
 }
 
 
+// Grid
+// --------------------------------------------------
+
+.pane {
+  border-left: 1px solid $border-color;
+}
+
+
 // Images
 // --------------------------------------------------
 
diff --git a/sass/utilities.scss b/sass/utilities.scss
index d16c9c6..13aedfa 100644
--- a/sass/utilities.scss
+++ b/sass/utilities.scss
@@ -103,7 +103,7 @@
 
 // Set the background-color to set a sidebar back a bit.
 .sidebar {
-  background-color: #f6f6f6;
+  background-color: #374249;
 }
 
 // Allow the window to be dragged around the desktop by any element in the application.
diff --git a/sass/variables.scss b/sass/variables.scss
index 704b247..917a38e 100644
--- a/sass/variables.scss
+++ b/sass/variables.scss
@@ -19,20 +19,20 @@ $line-height-default: 1.6 !default;
 // --------------------------------------------------
 
 // Main colors
-$primary-color: #3b99fc !default;
+$primary-color: #57acf5 !default;
 $chrome-color:  #fff !default;
 
 // Copy
 $gray-color: #333 !default;
 
 // Borders
-$border-color: #ddd !default;
+$border-color: #ccc !default;
 $dark-border-color: #c2c0c2 !default;
 $darker-bottom-border-color: #a19fa1 !default;
 $toolbar-border-color: #939293 !default;
 
 // Action colors
-$default-color:  #fff !default;
+$default-color:  #f2f2f2 !default;
 $positive-color: #34c84a !default;
 $negative-color: #fc605b !default;
 $warning-color: #fdbc40 !default;
@@ -48,7 +48,7 @@ $focus-input-color: lighten($primary-color, 10%)  !default;
 // --------------------------------------------------
 
 // Border radius
-$default-border-radius: 4px;
+$default-border-radius: 3px;
 
 // Padding
 $padding: 10px;

From b293971f81d909428fe072cc192ba9fe9f4e537e Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 15:33:59 -0800
Subject: [PATCH 13/22] switch up the sidebar

---
 dist/template-app/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dist/template-app/index.html b/dist/template-app/index.html
index 7990bd5..8402a20 100644
--- a/dist/template-app/index.html
+++ b/dist/template-app/index.html
@@ -15,7 +15,7 @@
       <!-- Your app's content goes inside .window-content -->
       <div class="window-content">
         <div class="pane-group">
-          <div class="pane pane-sm sidebar">
+          <div class="pane pane-one-fourth sidebar">
             <!-- <nav class="nav-group">
               <h5 class="nav-group-title">Favorites</h5>
               <span class="nav-group-item">

From e1640c23b71ab307b45ba58c41f5e9d01b55684a Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 18:56:41 -0800
Subject: [PATCH 14/22] un derp tabs

---
 dist/css/photon-theme-osx.css      |  12 +
 dist/css/photon.css                |  50 ++--
 dist/template-app/index.html       | 351 ++++++++++++++++-----------
 docs/dist/css/photon-theme-osx.css |  12 +
 docs/dist/css/photon.css           |  50 ++--
 docs/dist/template-app/index.html  | 367 +++++++++++++++++------------
 sass/bars.scss                     |   4 +-
 sass/buttons.scss                  |   2 +-
 sass/tabs.scss                     |  32 +--
 sass/theme-osx.scss                |  15 +-
 sass/variables.scss                |   6 +-
 11 files changed, 509 insertions(+), 392 deletions(-)

diff --git a/dist/css/photon-theme-osx.css b/dist/css/photon-theme-osx.css
index 0134952..9be8bac 100644
--- a/dist/css/photon-theme-osx.css
+++ b/dist/css/photon-theme-osx.css
@@ -227,7 +227,19 @@ th {
   color: #666;
 }
 .tab-item:after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
   background-color: rgba(0, 0, 0, 0.08);
+  opacity: 0;
+  transition: opacity .1s linear;
+  z-index: 1;
+}
+.tab-item:hover:not(.active):after {
+  opacity: 1;
 }
 .tab-item .icon-close-tab:hover {
   background-color: rgba(0, 0, 0, 0.08);
diff --git a/dist/css/photon.css b/dist/css/photon.css
index 84d8792..e8d8cd6 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -167,7 +167,7 @@ hr {
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #ddd;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -367,11 +367,11 @@ h6 {
 
 .btn-default {
   color: #333;
-  border-color: #c2c0c2;
+  border-color: #ccc;
   background-color: #fafafa;
 }
 .btn-default:active {
-  background-color: #ccc;
+  background-color: #eee;
 }
 
 .btn-primary,
@@ -465,7 +465,7 @@ h6 {
   border-radius: 0;
 }
 .btn-group .btn + .btn {
-  border-left: 1px solid #c2c0c2;
+  border-left: 1px solid #ccc;
 }
 .btn-group .btn + .btn.active {
   border-left: 0;
@@ -492,14 +492,14 @@ h6 {
 }
 
 .toolbar-header {
-  border-bottom: 1px solid #c2c0c2;
+  border-bottom: 1px solid #ddd;
 }
 .toolbar-header .title {
   margin-top: 1px;
 }
 
 .toolbar-footer {
-  border-top: 1px solid #c2c0c2;
+  border-top: 1px solid #ddd;
   -webkit-app-region: drag;
 }
 
@@ -558,7 +558,7 @@ input[type="checkbox"] {
   font-size: 13px;
   line-height: 1.6;
   background-color: #fff;
-  border: 1px solid #ccc;
+  border: 1px solid #ddd;
   border-radius: 3px;
   outline: none;
 }
@@ -618,7 +618,7 @@ textarea {
   position: relative;
   overflow-y: auto;
   flex: 1;
-  border-left: 1px solid #c2c0c2;
+  border-left: 1px solid #ccc;
 }
 .pane:first-child {
   border-left: 0;
@@ -677,7 +677,7 @@ img {
   padding: 10px;
   font-size: 12px;
   color: #555;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid #ddd;
 }
 .list-group-item:first-child {
   border-top: 0;
@@ -2217,8 +2217,8 @@ thead tr:active {
 
 th {
   font-weight: normal;
-  border-right: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
 }
 
 th,
@@ -2236,8 +2236,8 @@ td:last-child {
 .tab-group {
   margin-top: -1px;
   display: flex;
-  border-top: 1px solid #999;
-  border-bottom: 1px solid #999;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
 }
 
 .tab-item {
@@ -2246,14 +2246,14 @@ td:last-child {
   padding: 3px;
   font-size: 12px;
   text-align: center;
-  border-left: 1px solid #999;
-  background-color: #fafafa;
+  border-left: 1px solid #ddd;
+  background-color: #eee;
 }
 .tab-item:first-child {
   border-left: 0;
 }
 .tab-item.active {
-  background-color: #ddd;
+  background-color: #fafafa;
 }
 .tab-item .icon-close-tab {
   position: absolute;
@@ -2271,27 +2271,9 @@ td:last-child {
   transform: translateY(-50%);
   z-index: 10;
 }
-.tab-item:after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  content: "";
-  background-color: rgba(0, 0, 0, 0.08);
-  opacity: 0;
-  transition: opacity .1s linear;
-  z-index: 1;
-}
-.tab-item:hover:not(.active):after {
-  opacity: 1;
-}
 .tab-item:hover .icon-close-tab {
   opacity: 1;
 }
-.tab-item .icon-close-tab:hover {
-  background-color: rgba(0, 0, 0, 0.08);
-}
 
 .tab-item-fixed {
   flex: none;
diff --git a/dist/template-app/index.html b/dist/template-app/index.html
index 8402a20..f6a89ca 100644
--- a/dist/template-app/index.html
+++ b/dist/template-app/index.html
@@ -12,10 +12,27 @@
   </head>
   <body>
     <div class="window">
+      <div class="tab-group">
+        <div class="tab-item">
+          <span class="icon icon-cancel icon-close-tab"></span>
+          Tab
+        </div>
+        <div class="tab-item active">
+          <span class="icon icon-cancel icon-close-tab"></span>
+          Tab active
+        </div>
+        <div class="tab-item">
+          <span class="icon icon-cancel icon-close-tab"></span>
+          Tab
+        </div>
+        <div class="tab-item tab-item-fixed">
+          <span class="icon icon-plus"></span>
+        </div>
+      </div>
       <!-- Your app's content goes inside .window-content -->
       <div class="window-content">
         <div class="pane-group">
-          <div class="pane pane-one-fourth sidebar">
+          <div class="pane pane-mini sidebar">
             <!-- <nav class="nav-group">
               <h5 class="nav-group-title">Favorites</h5>
               <span class="nav-group-item">
@@ -52,145 +69,207 @@ <h5 class="nav-group-title">Favorites</h5>
           <div class="pane pane-borderless">
             <div class="window">
 
-            <!-- .toolbar-header sits at the top of your app -->
-            <header class="toolbar toolbar-header">
-              <div class="toolbar-actions">
-                <button class="btn btn-default btn-large">
-                  <span class="icon icon-home icon-text"></span>
-                  Home
-                </button>
+              <div class="window-content">
+                <div class="pane-group">
+                  <div class="pane">
+                    <div class="padded-more">
+                      <h3>Buttons</h3>
+                      <button class="btn btn-large btn-default" type="button">Default</button>
+                      <button class="btn btn-large btn-primary" type="button">Primary</button>
+                      <button class="btn btn-large btn-positive" type="button">Positive</button>
+                      <button class="btn btn-large btn-negative" type="button">Negative</button>
+                      <button class="btn btn-large btn-warning" type="button">Warning</button>
+                    </div>
+
+                    <hr>
+
+                    <form class="padded-more">
+                      <h3>Forms</h3>
+                      <div class="form-group">
+                        <label>Email address</label>
+                        <input type="email" class="form-control" placeholder="Email">
+                      </div>
+                      <div class="form-group">
+                        <label>Password</label>
+                        <input type="password" class="form-control" placeholder="Password">
+                      </div>
+                      <div class="form-group">
+                        <label>Description</label>
+                        <textarea class="form-control" rows="3"></textarea>
+                      </div>
+                      <select class="form-control">
+                        <option>Option one</option>
+                        <option>Option two</option>
+                        <option>Option three</option>
+                        <option>Option four</option>
+                        <option>Option five</option>
+                        <option>Option six</option>
+                        <option>Option seven</option>
+                        <option>Option eight</option>
+                      </select>
+                      <div class="checkbox">
+                        <label>
+                          <input type="checkbox"> This is a checkbox
+                        </label>
+                      </div>
+                      <div class="checkbox">
+                        <label>
+                          <input type="checkbox"> This is a checkbox too
+                        </label>
+                      </div>
+                      <div class="radio">
+                        <label>
+                          <input type="radio" name="radios" checked>
+                          Keep your options open
+                        </label>
+                      </div>
+                      <div class="radio">
+                        <label>
+                          <input type="radio" name="radios">
+                          Be sure to remember to check for unknown unknowns
+                        </label>
+                      </div>
+                      <div class="form-actions">
+                        <button type="submit" class="btn btn-form btn-default" type="button">Cancel</button>
+                        <button type="submit" class="btn btn-form btn-primary" type="submit">OK</button>
+                      </div>
+                    </form>
 
-                <button class="btn btn-primary btn-large pull-right" type="button">
-                  Primary Button
-                </button>
-              </div>
-            </header>
 
-            <div class="window-content">
-              <div class="pane-group">
-                <div class="pane">
-                  <table class="table-striped">
-                    <thead>
-                      <tr>
-                        <th>Name</th>
-                        <th>Kind</th>
-                        <th>Date Modified</th>
-                        <th>Author</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td>bars.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>base.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>button-groups.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>buttons.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>docs.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>forms.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>grid.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>icons.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>images.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>lists.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>mixins.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>navs.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>normalize.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>photon.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>tables.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>tabs.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>utilities.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>variables.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                    </tbody>
-                  </table>
+                    <table class="table-striped">
+                      <thead>
+                        <tr>
+                          <th>Name</th>
+                          <th>Kind</th>
+                          <th>Date Modified</th>
+                          <th>Author</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>bars.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>base.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>button-groups.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>buttons.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>docs.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>forms.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>grid.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>icons.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>images.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>lists.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>mixins.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>navs.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>normalize.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>photon.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>tables.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>tabs.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>utilities.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>variables.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
                 </div>
               </div>
+              <footer class="toolbar toolbar-footer">
+                <div class="toolbar-actions">
+                  <button class="btn btn-default btn-large">
+                    Default button
+                  </button>
+
+                  <button class="btn btn-primary btn-large pull-right" type="button">
+                    Primary Button
+                  </button>
+                </div>
+              </footer>
             </div>
           </div>
         </div>
diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
index 0134952..9be8bac 100644
--- a/docs/dist/css/photon-theme-osx.css
+++ b/docs/dist/css/photon-theme-osx.css
@@ -227,7 +227,19 @@ th {
   color: #666;
 }
 .tab-item:after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
   background-color: rgba(0, 0, 0, 0.08);
+  opacity: 0;
+  transition: opacity .1s linear;
+  z-index: 1;
+}
+.tab-item:hover:not(.active):after {
+  opacity: 1;
 }
 .tab-item .icon-close-tab:hover {
   background-color: rgba(0, 0, 0, 0.08);
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index 84d8792..e8d8cd6 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -167,7 +167,7 @@ hr {
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #ddd;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -367,11 +367,11 @@ h6 {
 
 .btn-default {
   color: #333;
-  border-color: #c2c0c2;
+  border-color: #ccc;
   background-color: #fafafa;
 }
 .btn-default:active {
-  background-color: #ccc;
+  background-color: #eee;
 }
 
 .btn-primary,
@@ -465,7 +465,7 @@ h6 {
   border-radius: 0;
 }
 .btn-group .btn + .btn {
-  border-left: 1px solid #c2c0c2;
+  border-left: 1px solid #ccc;
 }
 .btn-group .btn + .btn.active {
   border-left: 0;
@@ -492,14 +492,14 @@ h6 {
 }
 
 .toolbar-header {
-  border-bottom: 1px solid #c2c0c2;
+  border-bottom: 1px solid #ddd;
 }
 .toolbar-header .title {
   margin-top: 1px;
 }
 
 .toolbar-footer {
-  border-top: 1px solid #c2c0c2;
+  border-top: 1px solid #ddd;
   -webkit-app-region: drag;
 }
 
@@ -558,7 +558,7 @@ input[type="checkbox"] {
   font-size: 13px;
   line-height: 1.6;
   background-color: #fff;
-  border: 1px solid #ccc;
+  border: 1px solid #ddd;
   border-radius: 3px;
   outline: none;
 }
@@ -618,7 +618,7 @@ textarea {
   position: relative;
   overflow-y: auto;
   flex: 1;
-  border-left: 1px solid #c2c0c2;
+  border-left: 1px solid #ccc;
 }
 .pane:first-child {
   border-left: 0;
@@ -677,7 +677,7 @@ img {
   padding: 10px;
   font-size: 12px;
   color: #555;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid #ddd;
 }
 .list-group-item:first-child {
   border-top: 0;
@@ -2217,8 +2217,8 @@ thead tr:active {
 
 th {
   font-weight: normal;
-  border-right: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
 }
 
 th,
@@ -2236,8 +2236,8 @@ td:last-child {
 .tab-group {
   margin-top: -1px;
   display: flex;
-  border-top: 1px solid #999;
-  border-bottom: 1px solid #999;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
 }
 
 .tab-item {
@@ -2246,14 +2246,14 @@ td:last-child {
   padding: 3px;
   font-size: 12px;
   text-align: center;
-  border-left: 1px solid #999;
-  background-color: #fafafa;
+  border-left: 1px solid #ddd;
+  background-color: #eee;
 }
 .tab-item:first-child {
   border-left: 0;
 }
 .tab-item.active {
-  background-color: #ddd;
+  background-color: #fafafa;
 }
 .tab-item .icon-close-tab {
   position: absolute;
@@ -2271,27 +2271,9 @@ td:last-child {
   transform: translateY(-50%);
   z-index: 10;
 }
-.tab-item:after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  content: "";
-  background-color: rgba(0, 0, 0, 0.08);
-  opacity: 0;
-  transition: opacity .1s linear;
-  z-index: 1;
-}
-.tab-item:hover:not(.active):after {
-  opacity: 1;
-}
 .tab-item:hover .icon-close-tab {
   opacity: 1;
 }
-.tab-item .icon-close-tab:hover {
-  background-color: rgba(0, 0, 0, 0.08);
-}
 
 .tab-item-fixed {
   flex: none;
diff --git a/docs/dist/template-app/index.html b/docs/dist/template-app/index.html
index f0c00f9..f6a89ca 100644
--- a/docs/dist/template-app/index.html
+++ b/docs/dist/template-app/index.html
@@ -12,10 +12,27 @@
   </head>
   <body>
     <div class="window">
+      <div class="tab-group">
+        <div class="tab-item">
+          <span class="icon icon-cancel icon-close-tab"></span>
+          Tab
+        </div>
+        <div class="tab-item active">
+          <span class="icon icon-cancel icon-close-tab"></span>
+          Tab active
+        </div>
+        <div class="tab-item">
+          <span class="icon icon-cancel icon-close-tab"></span>
+          Tab
+        </div>
+        <div class="tab-item tab-item-fixed">
+          <span class="icon icon-plus"></span>
+        </div>
+      </div>
       <!-- Your app's content goes inside .window-content -->
       <div class="window-content">
         <div class="pane-group">
-          <div class="pane pane-sm sidebar">
+          <div class="pane pane-mini sidebar">
             <!-- <nav class="nav-group">
               <h5 class="nav-group-title">Favorites</h5>
               <span class="nav-group-item">
@@ -52,163 +69,207 @@ <h5 class="nav-group-title">Favorites</h5>
           <div class="pane pane-borderless">
             <div class="window">
 
-            <!-- .toolbar-header sits at the top of your app -->
-            <header class="toolbar toolbar-header">
-              <div class="toolbar-actions">
-                <div class="btn-group">
-                  <button class="btn btn-default btn-large">
-                    <span class="icon icon-home"></span>
-                  </button>
-                  <button class="btn btn-default btn-large">
-                    <span class="icon icon-folder"></span>
-                  </button>
-                  <button class="btn btn-default btn-large active">
-                    <span class="icon icon-cloud"></span>
-                  </button>
-                  <button class="btn btn-default btn-large">
-                    <span class="icon icon-popup"></span>
-                  </button>
-                  <button class="btn btn-default btn-large">
-                    <span class="icon icon-shuffle"></span>
-                  </button>
-                </div>
+              <div class="window-content">
+                <div class="pane-group">
+                  <div class="pane">
+                    <div class="padded-more">
+                      <h3>Buttons</h3>
+                      <button class="btn btn-large btn-default" type="button">Default</button>
+                      <button class="btn btn-large btn-primary" type="button">Primary</button>
+                      <button class="btn btn-large btn-positive" type="button">Positive</button>
+                      <button class="btn btn-large btn-negative" type="button">Negative</button>
+                      <button class="btn btn-large btn-warning" type="button">Warning</button>
+                    </div>
 
-                <button class="btn btn-default btn-large">
-                  <span class="icon icon-home icon-text"></span>
-                  Filters
-                </button>
+                    <hr>
+
+                    <form class="padded-more">
+                      <h3>Forms</h3>
+                      <div class="form-group">
+                        <label>Email address</label>
+                        <input type="email" class="form-control" placeholder="Email">
+                      </div>
+                      <div class="form-group">
+                        <label>Password</label>
+                        <input type="password" class="form-control" placeholder="Password">
+                      </div>
+                      <div class="form-group">
+                        <label>Description</label>
+                        <textarea class="form-control" rows="3"></textarea>
+                      </div>
+                      <select class="form-control">
+                        <option>Option one</option>
+                        <option>Option two</option>
+                        <option>Option three</option>
+                        <option>Option four</option>
+                        <option>Option five</option>
+                        <option>Option six</option>
+                        <option>Option seven</option>
+                        <option>Option eight</option>
+                      </select>
+                      <div class="checkbox">
+                        <label>
+                          <input type="checkbox"> This is a checkbox
+                        </label>
+                      </div>
+                      <div class="checkbox">
+                        <label>
+                          <input type="checkbox"> This is a checkbox too
+                        </label>
+                      </div>
+                      <div class="radio">
+                        <label>
+                          <input type="radio" name="radios" checked>
+                          Keep your options open
+                        </label>
+                      </div>
+                      <div class="radio">
+                        <label>
+                          <input type="radio" name="radios">
+                          Be sure to remember to check for unknown unknowns
+                        </label>
+                      </div>
+                      <div class="form-actions">
+                        <button type="submit" class="btn btn-form btn-default" type="button">Cancel</button>
+                        <button type="submit" class="btn btn-form btn-primary" type="submit">OK</button>
+                      </div>
+                    </form>
 
-                <button class="btn btn-primary btn-large pull-right" type="button">
-                  Primary Button
-                </button>
-              </div>
-            </header>
 
-            <div class="window-content">
-              <div class="pane-group">
-                <div class="pane">
-                  <table class="table-striped">
-                    <thead>
-                      <tr>
-                        <th>Name</th>
-                        <th>Kind</th>
-                        <th>Date Modified</th>
-                        <th>Author</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td>bars.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>base.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>button-groups.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>buttons.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>docs.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>forms.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>grid.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>icons.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>images.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>lists.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>mixins.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>navs.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>normalize.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>photon.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>tables.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>tabs.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>utilities.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                      <tr>
-                        <td>variables.scss</td>
-                        <td>Document</td>
-                        <td>Oct 13, 2015</td>
-                        <td>connors</td>
-                      </tr>
-                    </tbody>
-                  </table>
+                    <table class="table-striped">
+                      <thead>
+                        <tr>
+                          <th>Name</th>
+                          <th>Kind</th>
+                          <th>Date Modified</th>
+                          <th>Author</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>bars.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>base.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>button-groups.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>buttons.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>docs.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>forms.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>grid.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>icons.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>images.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>lists.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>mixins.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>navs.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>normalize.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>photon.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>tables.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>tabs.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>utilities.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                        <tr>
+                          <td>variables.scss</td>
+                          <td>Document</td>
+                          <td>Oct 13, 2015</td>
+                          <td>connors</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
                 </div>
               </div>
+              <footer class="toolbar toolbar-footer">
+                <div class="toolbar-actions">
+                  <button class="btn btn-default btn-large">
+                    Default button
+                  </button>
+
+                  <button class="btn btn-primary btn-large pull-right" type="button">
+                    Primary Button
+                  </button>
+                </div>
+              </footer>
             </div>
           </div>
         </div>
diff --git a/sass/bars.scss b/sass/bars.scss
index ff67593..5e87f6b 100644
--- a/sass/bars.scss
+++ b/sass/bars.scss
@@ -8,7 +8,7 @@
 }
 
 .toolbar-header {
-  border-bottom: 1px solid $dark-border-color;
+  border-bottom: 1px solid $border-color;
 
   .title {
     margin-top: 1px;
@@ -16,7 +16,7 @@
 }
 
 .toolbar-footer {
-  border-top: 1px solid $dark-border-color;
+  border-top: 1px solid $border-color;
   -webkit-app-region: drag;
 }
 
diff --git a/sass/buttons.scss b/sass/buttons.scss
index de43aec..c6683bc 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -43,7 +43,7 @@
   background-color: #fafafa;
 
   &:active {
-    background-color: #ccc;
+    background-color: #eee;
   }
 }
 
diff --git a/sass/tabs.scss b/sass/tabs.scss
index 836bf7b..d235479 100644
--- a/sass/tabs.scss
+++ b/sass/tabs.scss
@@ -4,8 +4,8 @@
 .tab-group {
   margin-top: -1px;
   display: flex;
-  border-top: 1px solid #999;
-  border-bottom: 1px solid #999;
+  border-top: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
 }
 
 .tab-item {
@@ -14,15 +14,15 @@
   padding: 3px;
   font-size: 12px;
   text-align: center;
-  border-left: 1px solid #999;
-  background-color: #fafafa;
+  border-left: 1px solid $border-color;
+  background-color: #eee;
 
   &:first-child {
     border-left: 0;
   }
 
   &.active {
-    background-color: #ddd;
+    background-color: #fafafa;
   }
 
   .icon-close-tab {
@@ -42,31 +42,9 @@
     z-index: 10;
   }
 
-  &:after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    content: "";
-    background-color: rgba(0,0,0,.08);
-    opacity: 0;
-    transition: opacity .1s linear;
-    z-index: 1;
-  }
-
-  // Okay, I know... this is nuts but...
-  &:hover:not(.active):after {
-    opacity: 1;
-  }
-
   &:hover .icon-close-tab {
     opacity: 1;
   }
-
-  .icon-close-tab:hover {
-    background-color: rgba(0,0,0,.08);
-  }
 }
 
 .tab-item-fixed {
diff --git a/sass/theme-osx.scss b/sass/theme-osx.scss
index 2d3fc33..5159972 100644
--- a/sass/theme-osx.scss
+++ b/sass/theme-osx.scss
@@ -33,7 +33,6 @@ $gray-color: #333 !default;
 $border-color: #ddd !default;
 $dark-border-color: #c2c0c2 !default;
 $darker-bottom-border-color: #a19fa1 !default;
-$toolbar-border-color: #939293 !default;
 
 // Action colors
 $default-color:  #fff !default;
@@ -306,7 +305,21 @@ th {
   }
 
   &:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: "";
     background-color: rgba(0,0,0,.08);
+    opacity: 0;
+    transition: opacity .1s linear;
+    z-index: 1;
+  }
+
+  // Okay, I know... this is nuts but...
+  &:hover:not(.active):after {
+    opacity: 1;
   }
 
   .icon-close-tab:hover {
diff --git a/sass/variables.scss b/sass/variables.scss
index 917a38e..138c971 100644
--- a/sass/variables.scss
+++ b/sass/variables.scss
@@ -26,10 +26,8 @@ $chrome-color:  #fff !default;
 $gray-color: #333 !default;
 
 // Borders
-$border-color: #ccc !default;
-$dark-border-color: #c2c0c2 !default;
-$darker-bottom-border-color: #a19fa1 !default;
-$toolbar-border-color: #939293 !default;
+$border-color: #ddd !default;
+$dark-border-color: #ccc !default;
 
 // Action colors
 $default-color:  #f2f2f2 !default;

From f715f02e12bdccd3b549e671db55e3cd85c132d1 Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 19:19:15 -0800
Subject: [PATCH 15/22] clean up

---
 dist/css/photon.css               |  9 ++++-----
 dist/template-app/app.js          |  5 +++--
 dist/template-app/index.html      | 12 ++++++------
 docs/dist/css/photon.css          |  9 ++++-----
 docs/dist/template-app/app.js     |  5 +++--
 docs/dist/template-app/index.html | 12 ++++++------
 sass/forms.scss                   |  1 -
 sass/grid.scss                    |  2 +-
 sass/utilities.scss               |  2 +-
 sass/variables.scss               |  2 +-
 10 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/dist/css/photon.css b/dist/css/photon.css
index e8d8cd6..ec7174d 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -157,7 +157,7 @@ body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
   font-size: 13px;
-  line-height: 1.6;
+  line-height: 1.4;
   color: #333;
   background-color: transparent;
 }
@@ -313,7 +313,7 @@ h6 {
 }
 
 .sidebar {
-  background-color: #374249;
+  background-color: #fafafa;
 }
 
 .draggable {
@@ -556,7 +556,7 @@ input[type="checkbox"] {
   min-height: 25px;
   padding: 5px 10px;
   font-size: 13px;
-  line-height: 1.6;
+  line-height: 1.4;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 3px;
@@ -564,7 +564,6 @@ input[type="checkbox"] {
 }
 .form-control:focus {
   border-color: #87c4f8;
-  box-shadow: 0 0 0 3px #87c4f8;
 }
 
 textarea {
@@ -618,7 +617,7 @@ textarea {
   position: relative;
   overflow-y: auto;
   flex: 1;
-  border-left: 1px solid #ccc;
+  border-left: 1px solid #ddd;
 }
 .pane:first-child {
   border-left: 0;
diff --git a/dist/template-app/app.js b/dist/template-app/app.js
index 0b4d2fd..b9f6d82 100644
--- a/dist/template-app/app.js
+++ b/dist/template-app/app.js
@@ -23,8 +23,9 @@ app.on('ready', function() {
     height: 300,
     'min-width': 500,
     'min-height': 200,
-    'accept-first-mouse': true
-    //'title-bar-style': 'hidden'
+    'accept-first-mouse': true,
+    'title-bar-style': 'hidden',
+    frame: false 
   });
 
   // and load the index.html of the app.
diff --git a/dist/template-app/index.html b/dist/template-app/index.html
index f6a89ca..0348af7 100644
--- a/dist/template-app/index.html
+++ b/dist/template-app/index.html
@@ -32,17 +32,17 @@
       <!-- Your app's content goes inside .window-content -->
       <div class="window-content">
         <div class="pane-group">
-          <div class="pane pane-mini sidebar">
-            <!-- <nav class="nav-group">
+          <div class="pane pane-sm sidebar">
+            <nav class="nav-group">
               <h5 class="nav-group-title">Favorites</h5>
               <span class="nav-group-item">
                 <span class="icon icon-home"></span>
                 connors
               </span>
-              <span class="nav-group-item active">
+              <!-- <span class="nav-group-item active">
                 <span class="icon icon-light-up"></span>
                 Photon
-              </span>
+              </span> -->
               <span class="nav-group-item">
                 <span class="icon icon-download"></span>
                 Downloads
@@ -63,10 +63,10 @@ <h5 class="nav-group-title">Favorites</h5>
                 <span class="icon icon-monitor"></span>
                 Desktop
               </span>
-            </nav> -->
+            </nav>
           </div>
 
-          <div class="pane pane-borderless">
+          <div class="pane">
             <div class="window">
 
               <div class="window-content">
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index e8d8cd6..ec7174d 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -157,7 +157,7 @@ body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
   font-size: 13px;
-  line-height: 1.6;
+  line-height: 1.4;
   color: #333;
   background-color: transparent;
 }
@@ -313,7 +313,7 @@ h6 {
 }
 
 .sidebar {
-  background-color: #374249;
+  background-color: #fafafa;
 }
 
 .draggable {
@@ -556,7 +556,7 @@ input[type="checkbox"] {
   min-height: 25px;
   padding: 5px 10px;
   font-size: 13px;
-  line-height: 1.6;
+  line-height: 1.4;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 3px;
@@ -564,7 +564,6 @@ input[type="checkbox"] {
 }
 .form-control:focus {
   border-color: #87c4f8;
-  box-shadow: 0 0 0 3px #87c4f8;
 }
 
 textarea {
@@ -618,7 +617,7 @@ textarea {
   position: relative;
   overflow-y: auto;
   flex: 1;
-  border-left: 1px solid #ccc;
+  border-left: 1px solid #ddd;
 }
 .pane:first-child {
   border-left: 0;
diff --git a/docs/dist/template-app/app.js b/docs/dist/template-app/app.js
index 0b4d2fd..b9f6d82 100644
--- a/docs/dist/template-app/app.js
+++ b/docs/dist/template-app/app.js
@@ -23,8 +23,9 @@ app.on('ready', function() {
     height: 300,
     'min-width': 500,
     'min-height': 200,
-    'accept-first-mouse': true
-    //'title-bar-style': 'hidden'
+    'accept-first-mouse': true,
+    'title-bar-style': 'hidden',
+    frame: false 
   });
 
   // and load the index.html of the app.
diff --git a/docs/dist/template-app/index.html b/docs/dist/template-app/index.html
index f6a89ca..0348af7 100644
--- a/docs/dist/template-app/index.html
+++ b/docs/dist/template-app/index.html
@@ -32,17 +32,17 @@
       <!-- Your app's content goes inside .window-content -->
       <div class="window-content">
         <div class="pane-group">
-          <div class="pane pane-mini sidebar">
-            <!-- <nav class="nav-group">
+          <div class="pane pane-sm sidebar">
+            <nav class="nav-group">
               <h5 class="nav-group-title">Favorites</h5>
               <span class="nav-group-item">
                 <span class="icon icon-home"></span>
                 connors
               </span>
-              <span class="nav-group-item active">
+              <!-- <span class="nav-group-item active">
                 <span class="icon icon-light-up"></span>
                 Photon
-              </span>
+              </span> -->
               <span class="nav-group-item">
                 <span class="icon icon-download"></span>
                 Downloads
@@ -63,10 +63,10 @@ <h5 class="nav-group-title">Favorites</h5>
                 <span class="icon icon-monitor"></span>
                 Desktop
               </span>
-            </nav> -->
+            </nav>
           </div>
 
-          <div class="pane pane-borderless">
+          <div class="pane">
             <div class="window">
 
               <div class="window-content">
diff --git a/sass/forms.scss b/sass/forms.scss
index f24e7e8..87c84e0 100644
--- a/sass/forms.scss
+++ b/sass/forms.scss
@@ -36,7 +36,6 @@ input[type="checkbox"] {
 
   &:focus {
     border-color: $focus-input-color;
-    box-shadow: 0 0 0 3px $focus-input-color;
   }
 }
 
diff --git a/sass/grid.scss b/sass/grid.scss
index 14b46bf..0a6264b 100644
--- a/sass/grid.scss
+++ b/sass/grid.scss
@@ -15,7 +15,7 @@
   position: relative;
   overflow-y: auto;
   flex: 1;
-  border-left: 1px solid $dark-border-color;
+  border-left: 1px solid $border-color;
 
   &:first-child {
     border-left: 0;
diff --git a/sass/utilities.scss b/sass/utilities.scss
index 13aedfa..439d490 100644
--- a/sass/utilities.scss
+++ b/sass/utilities.scss
@@ -103,7 +103,7 @@
 
 // Set the background-color to set a sidebar back a bit.
 .sidebar {
-  background-color: #374249;
+  background-color: #fafafa;
 }
 
 // Allow the window to be dragged around the desktop by any element in the application.
diff --git a/sass/variables.scss b/sass/variables.scss
index 138c971..1dceb63 100644
--- a/sass/variables.scss
+++ b/sass/variables.scss
@@ -12,7 +12,7 @@ $font-size-default: 13px !default;
 $font-weight: 500 !default;
 $font-weight-bold: 700 !default;
 $font-weight-light: 300 !default;
-$line-height-default: 1.6 !default;
+$line-height-default: 1.4 !default;
 
 
 // Colors

From 93728ca94f0d04eb5a4d20a77820e6ec96ff242f Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 19:21:31 -0800
Subject: [PATCH 16/22] line height

---
 dist/css/photon.css      | 4 ++--
 docs/dist/css/photon.css | 4 ++--
 sass/variables.scss      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/dist/css/photon.css b/dist/css/photon.css
index ec7174d..d38ab6a 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -157,7 +157,7 @@ body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
   font-size: 13px;
-  line-height: 1.4;
+  line-height: 1.6;
   color: #333;
   background-color: transparent;
 }
@@ -556,7 +556,7 @@ input[type="checkbox"] {
   min-height: 25px;
   padding: 5px 10px;
   font-size: 13px;
-  line-height: 1.4;
+  line-height: 1.6;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 3px;
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index ec7174d..d38ab6a 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -157,7 +157,7 @@ body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
   font-size: 13px;
-  line-height: 1.4;
+  line-height: 1.6;
   color: #333;
   background-color: transparent;
 }
@@ -556,7 +556,7 @@ input[type="checkbox"] {
   min-height: 25px;
   padding: 5px 10px;
   font-size: 13px;
-  line-height: 1.4;
+  line-height: 1.6;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 3px;
diff --git a/sass/variables.scss b/sass/variables.scss
index 1dceb63..138c971 100644
--- a/sass/variables.scss
+++ b/sass/variables.scss
@@ -12,7 +12,7 @@ $font-size-default: 13px !default;
 $font-weight: 500 !default;
 $font-weight-bold: 700 !default;
 $font-weight-light: 300 !default;
-$line-height-default: 1.4 !default;
+$line-height-default: 1.6 !default;
 
 
 // Colors

From 77da3cc572b060d854e2126e599d95e89ab28729 Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 19:32:08 -0800
Subject: [PATCH 17/22] fix up form labels

---
 dist/css/photon-theme-osx.css      | 1 -
 dist/css/photon.css                | 2 +-
 docs/dist/css/photon-theme-osx.css | 1 -
 docs/dist/css/photon.css           | 2 +-
 sass/forms.scss                    | 2 +-
 sass/theme-osx.scss                | 1 -
 6 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/dist/css/photon-theme-osx.css b/dist/css/photon-theme-osx.css
index 9be8bac..d210481 100644
--- a/dist/css/photon-theme-osx.css
+++ b/dist/css/photon-theme-osx.css
@@ -141,7 +141,6 @@
 }
 
 .form-control {
-  display: inline-block;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 4px;
diff --git a/dist/css/photon.css b/dist/css/photon.css
index d38ab6a..ce17e1c 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -532,7 +532,7 @@ h6 {
 }
 
 label {
-  display: inline-block;
+  display: block;
   font-size: 13px;
   margin-bottom: 5px;
   white-space: nowrap;
diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
index 9be8bac..d210481 100644
--- a/docs/dist/css/photon-theme-osx.css
+++ b/docs/dist/css/photon-theme-osx.css
@@ -141,7 +141,6 @@
 }
 
 .form-control {
-  display: inline-block;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 4px;
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index d38ab6a..ce17e1c 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -532,7 +532,7 @@ h6 {
 }
 
 label {
-  display: inline-block;
+  display: block;
   font-size: 13px;
   margin-bottom: 5px;
   white-space: nowrap;
diff --git a/sass/forms.scss b/sass/forms.scss
index 87c84e0..c48cec9 100644
--- a/sass/forms.scss
+++ b/sass/forms.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 label {
-  display: inline-block;
+  display: block;
   font-size: $font-size-default;
   margin-bottom: 5px;
   white-space: nowrap;
diff --git a/sass/theme-osx.scss b/sass/theme-osx.scss
index 5159972..e0fbd08 100644
--- a/sass/theme-osx.scss
+++ b/sass/theme-osx.scss
@@ -192,7 +192,6 @@ $padding-more: 20px;
 // --------------------------------------------------
 
 .form-control {
-  display: inline-block;
   background-color: $chrome-color;
   border: 1px solid $border-color;
   border-radius: $default-border-radius;

From 892c2c1f7db8ebad0d4646fa9183da2d7cacf7a7 Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 19:45:19 -0800
Subject: [PATCH 18/22] nav clean up

---
 dist/css/photon-theme-osx.css      |  4 ++++
 dist/css/photon.css                |  6 ++++--
 dist/template-app/index.html       | 24 ++++--------------------
 docs/dist/css/photon-theme-osx.css |  4 ++++
 docs/dist/css/photon.css           |  6 ++++--
 docs/dist/template-app/index.html  | 20 ++------------------
 sass/navs.scss                     |  6 ++++--
 sass/theme-osx.scss                |  4 ++++
 8 files changed, 30 insertions(+), 44 deletions(-)

diff --git a/dist/css/photon-theme-osx.css b/dist/css/photon-theme-osx.css
index d210481..9dbde1d 100644
--- a/dist/css/photon-theme-osx.css
+++ b/dist/css/photon-theme-osx.css
@@ -167,6 +167,7 @@
 }
 
 .nav-group-item {
+  padding: 2px 10px 2px 25px;
   color: #333;
 }
 .nav-group-item:active, .nav-group-item.active {
@@ -177,6 +178,9 @@
 }
 
 .nav-group-title {
+  font-size: 12px;
+  letter-spacing: normal;
+  text-transform: none;
   color: #666666;
 }
 
diff --git a/dist/css/photon.css b/dist/css/photon.css
index ce17e1c..1052cd8 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -711,7 +711,7 @@ img {
 }
 
 .nav-group-item {
-  padding: 2px 10px 2px 25px;
+  padding: 5px 10px;
   display: block;
   color: #333;
   text-decoration: none;
@@ -736,7 +736,9 @@ img {
 .nav-group-title {
   margin: 0;
   padding: 10px 10px 2px;
-  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 11px;
   font-weight: 500;
   color: #666666;
 }
diff --git a/dist/template-app/index.html b/dist/template-app/index.html
index 0348af7..6fe6c41 100644
--- a/dist/template-app/index.html
+++ b/dist/template-app/index.html
@@ -12,23 +12,6 @@
   </head>
   <body>
     <div class="window">
-      <div class="tab-group">
-        <div class="tab-item">
-          <span class="icon icon-cancel icon-close-tab"></span>
-          Tab
-        </div>
-        <div class="tab-item active">
-          <span class="icon icon-cancel icon-close-tab"></span>
-          Tab active
-        </div>
-        <div class="tab-item">
-          <span class="icon icon-cancel icon-close-tab"></span>
-          Tab
-        </div>
-        <div class="tab-item tab-item-fixed">
-          <span class="icon icon-plus"></span>
-        </div>
-      </div>
       <!-- Your app's content goes inside .window-content -->
       <div class="window-content">
         <div class="pane-group">
@@ -39,10 +22,10 @@ <h5 class="nav-group-title">Favorites</h5>
                 <span class="icon icon-home"></span>
                 connors
               </span>
-              <!-- <span class="nav-group-item active">
+              <span class="nav-group-item active">
                 <span class="icon icon-light-up"></span>
                 Photon
-              </span> -->
+              </span>
               <span class="nav-group-item">
                 <span class="icon icon-download"></span>
                 Downloads
@@ -135,8 +118,9 @@ <h3>Forms</h3>
                       </div>
                     </form>
 
+                    <hr>
 
-                    <table class="table-striped">
+                    <table class="table-striped padded-top-more">
                       <thead>
                         <tr>
                           <th>Name</th>
diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
index d210481..9dbde1d 100644
--- a/docs/dist/css/photon-theme-osx.css
+++ b/docs/dist/css/photon-theme-osx.css
@@ -167,6 +167,7 @@
 }
 
 .nav-group-item {
+  padding: 2px 10px 2px 25px;
   color: #333;
 }
 .nav-group-item:active, .nav-group-item.active {
@@ -177,6 +178,9 @@
 }
 
 .nav-group-title {
+  font-size: 12px;
+  letter-spacing: normal;
+  text-transform: none;
   color: #666666;
 }
 
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index ce17e1c..1052cd8 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -711,7 +711,7 @@ img {
 }
 
 .nav-group-item {
-  padding: 2px 10px 2px 25px;
+  padding: 5px 10px;
   display: block;
   color: #333;
   text-decoration: none;
@@ -736,7 +736,9 @@ img {
 .nav-group-title {
   margin: 0;
   padding: 10px 10px 2px;
-  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 11px;
   font-weight: 500;
   color: #666666;
 }
diff --git a/docs/dist/template-app/index.html b/docs/dist/template-app/index.html
index 0348af7..9e09a4c 100644
--- a/docs/dist/template-app/index.html
+++ b/docs/dist/template-app/index.html
@@ -12,23 +12,6 @@
   </head>
   <body>
     <div class="window">
-      <div class="tab-group">
-        <div class="tab-item">
-          <span class="icon icon-cancel icon-close-tab"></span>
-          Tab
-        </div>
-        <div class="tab-item active">
-          <span class="icon icon-cancel icon-close-tab"></span>
-          Tab active
-        </div>
-        <div class="tab-item">
-          <span class="icon icon-cancel icon-close-tab"></span>
-          Tab
-        </div>
-        <div class="tab-item tab-item-fixed">
-          <span class="icon icon-plus"></span>
-        </div>
-      </div>
       <!-- Your app's content goes inside .window-content -->
       <div class="window-content">
         <div class="pane-group">
@@ -135,8 +118,9 @@ <h3>Forms</h3>
                       </div>
                     </form>
 
+                    <hr>
 
-                    <table class="table-striped">
+                    <table class="table-striped padded-top-more">
                       <thead>
                         <tr>
                           <th>Name</th>
diff --git a/sass/navs.scss b/sass/navs.scss
index afc19fb..e69cd3c 100644
--- a/sass/navs.scss
+++ b/sass/navs.scss
@@ -7,7 +7,7 @@
 }
 
 .nav-group-item {
-  padding: 2px 10px 2px 25px;
+  padding: 5px 10px;
   display: block;
   color: $gray-color;
   text-decoration: none;
@@ -35,7 +35,9 @@
 .nav-group-title {
   margin: 0;
   padding: 10px 10px 2px;
-  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 11px;
   font-weight: 500;
   color: lighten($gray-color, 20%);
 }
diff --git a/sass/theme-osx.scss b/sass/theme-osx.scss
index e0fbd08..b954535 100644
--- a/sass/theme-osx.scss
+++ b/sass/theme-osx.scss
@@ -238,6 +238,7 @@ $padding-more: 20px;
 // --------------------------------------------------
 
 .nav-group-item {
+  padding: 2px 10px 2px 25px;
   color: $gray-color;
 
   &:active,
@@ -251,6 +252,9 @@ $padding-more: 20px;
 }
 
 .nav-group-title {
+  font-size: 12px;
+  letter-spacing: normal;
+  text-transform: none;
   color: lighten($gray-color, 20%);
 }
 

From 05ac2191a24605bfc4b153f1591db4dd22ffc235 Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 19:47:13 -0800
Subject: [PATCH 19/22] ignore for now

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index 39444d4..8211b99 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,8 @@ _gh_pages
 _site
 .ruby-version
 .sass-cache
+dist/template-app/index-og.html
+docs/dist/template-app/index-og.html
 
 # Numerous always-ignore extensions
 *.diff

From 4a1e5a652a51192c58ee6d69d28c0588e9c5b88e Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 19:52:45 -0800
Subject: [PATCH 20/22] add link buttons

---
 dist/css/photon-theme-osx.css      |  8 ++++++++
 dist/css/photon.css                |  8 ++++++++
 dist/template-app/index.html       |  3 ++-
 docs/dist/css/photon-theme-osx.css |  8 ++++++++
 docs/dist/css/photon.css           |  8 ++++++++
 docs/dist/template-app/index.html  |  7 ++++---
 sass/buttons.scss                  | 10 ++++++++++
 sass/theme-osx.scss                | 10 ++++++++++
 8 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/dist/css/photon-theme-osx.css b/dist/css/photon-theme-osx.css
index 9dbde1d..5b3134f 100644
--- a/dist/css/photon-theme-osx.css
+++ b/dist/css/photon-theme-osx.css
@@ -136,6 +136,14 @@
   background-image: linear-gradient(to bottom, #fdbc40 0%, #ee9d02 100%);
 }
 
+.btn-link {
+  color: #3b99fc;
+  box-shadow: none;
+}
+.btn-link:active {
+  color: #097ffb;
+}
+
 .btn .icon {
   color: #737475;
 }
diff --git a/dist/css/photon.css b/dist/css/photon.css
index 1052cd8..2e23237 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -409,6 +409,14 @@ h6 {
   background-color: #fcaa0e;
 }
 
+.btn-link {
+  color: #57acf5;
+  background: none;
+}
+.btn-link:active {
+  color: #2794f2;
+}
+
 .btn .icon {
   float: left;
   width: 14px;
diff --git a/dist/template-app/index.html b/dist/template-app/index.html
index 6fe6c41..289c758 100644
--- a/dist/template-app/index.html
+++ b/dist/template-app/index.html
@@ -5,7 +5,7 @@
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="../css/photon.css">
-    <!-- <link rel="stylesheet" href="../css/photon-theme-osx.css"> -->
+    <link rel="stylesheet" href="../css/photon-theme-osx.css">
 
     <!-- Javascript -->
     <script src="js/menu.js" charset="utf-8"></script>
@@ -62,6 +62,7 @@ <h3>Buttons</h3>
                       <button class="btn btn-large btn-positive" type="button">Positive</button>
                       <button class="btn btn-large btn-negative" type="button">Negative</button>
                       <button class="btn btn-large btn-warning" type="button">Warning</button>
+                      <button class="btn btn-large btn-link" type="button">Link button</button>
                     </div>
 
                     <hr>
diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
index 9dbde1d..5b3134f 100644
--- a/docs/dist/css/photon-theme-osx.css
+++ b/docs/dist/css/photon-theme-osx.css
@@ -136,6 +136,14 @@
   background-image: linear-gradient(to bottom, #fdbc40 0%, #ee9d02 100%);
 }
 
+.btn-link {
+  color: #3b99fc;
+  box-shadow: none;
+}
+.btn-link:active {
+  color: #097ffb;
+}
+
 .btn .icon {
   color: #737475;
 }
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index 1052cd8..2e23237 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -409,6 +409,14 @@ h6 {
   background-color: #fcaa0e;
 }
 
+.btn-link {
+  color: #57acf5;
+  background: none;
+}
+.btn-link:active {
+  color: #2794f2;
+}
+
 .btn .icon {
   float: left;
   width: 14px;
diff --git a/docs/dist/template-app/index.html b/docs/dist/template-app/index.html
index 9e09a4c..289c758 100644
--- a/docs/dist/template-app/index.html
+++ b/docs/dist/template-app/index.html
@@ -5,7 +5,7 @@
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="../css/photon.css">
-    <!-- <link rel="stylesheet" href="../css/photon-theme-osx.css"> -->
+    <link rel="stylesheet" href="../css/photon-theme-osx.css">
 
     <!-- Javascript -->
     <script src="js/menu.js" charset="utf-8"></script>
@@ -22,10 +22,10 @@ <h5 class="nav-group-title">Favorites</h5>
                 <span class="icon icon-home"></span>
                 connors
               </span>
-              <!-- <span class="nav-group-item active">
+              <span class="nav-group-item active">
                 <span class="icon icon-light-up"></span>
                 Photon
-              </span> -->
+              </span>
               <span class="nav-group-item">
                 <span class="icon icon-download"></span>
                 Downloads
@@ -62,6 +62,7 @@ <h3>Buttons</h3>
                       <button class="btn btn-large btn-positive" type="button">Positive</button>
                       <button class="btn btn-large btn-negative" type="button">Negative</button>
                       <button class="btn btn-large btn-warning" type="button">Warning</button>
+                      <button class="btn btn-large btn-link" type="button">Link button</button>
                     </div>
 
                     <hr>
diff --git a/sass/buttons.scss b/sass/buttons.scss
index c6683bc..0c05bd6 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -91,6 +91,16 @@
   }
 }
 
+// Link buttons
+.btn-link {
+  color: $primary-color;
+  background: none;
+
+  &:active {
+    color: darken($primary-color, 10%);
+  }
+}
+
 // Icons in buttons
 .btn .icon {
   float: left;
diff --git a/sass/theme-osx.scss b/sass/theme-osx.scss
index b954535..ac79110 100644
--- a/sass/theme-osx.scss
+++ b/sass/theme-osx.scss
@@ -182,6 +182,16 @@ $padding-more: 20px;
   }
 }
 
+// Link buttons
+.btn-link {
+  color: $primary-color;
+  box-shadow: none;
+
+  &:active {
+    color: darken($primary-color, 10%);
+  }
+}
+
 // Icons in buttons
 .btn .icon {
   color: #737475;

From fe0ff925b663a6a9808c1c151af6e34c4133ebcd Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 19:53:22 -0800
Subject: [PATCH 21/22] derp

---
 dist/template-app/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dist/template-app/index.html b/dist/template-app/index.html
index 289c758..475dedc 100644
--- a/dist/template-app/index.html
+++ b/dist/template-app/index.html
@@ -5,7 +5,7 @@
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="../css/photon.css">
-    <link rel="stylesheet" href="../css/photon-theme-osx.css">
+    <!-- <link rel="stylesheet" href="../css/photon-theme-osx.css"> -->
 
     <!-- Javascript -->
     <script src="js/menu.js" charset="utf-8"></script>

From e4b6b4ae36d4b31362ed967a4431b2495ac83acc Mon Sep 17 00:00:00 2001
From: Connor Sears <connor.sears@github.com>
Date: Sat, 20 Feb 2016 19:57:44 -0800
Subject: [PATCH 22/22] more nuetral active state on navs

---
 dist/css/photon.css               | 2 +-
 docs/dist/css/photon.css          | 2 +-
 docs/dist/template-app/index.html | 2 +-
 sass/navs.scss                    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/dist/css/photon.css b/dist/css/photon.css
index 2e23237..bffb940 100644
--- a/dist/css/photon.css
+++ b/dist/css/photon.css
@@ -728,7 +728,7 @@ img {
   text-overflow: ellipsis;
 }
 .nav-group-item:active, .nav-group-item.active {
-  background-color: #dcdfe1;
+  background-color: #ddd;
 }
 .nav-group-item .icon {
   width: 19px;
diff --git a/docs/dist/css/photon.css b/docs/dist/css/photon.css
index 2e23237..bffb940 100644
--- a/docs/dist/css/photon.css
+++ b/docs/dist/css/photon.css
@@ -728,7 +728,7 @@ img {
   text-overflow: ellipsis;
 }
 .nav-group-item:active, .nav-group-item.active {
-  background-color: #dcdfe1;
+  background-color: #ddd;
 }
 .nav-group-item .icon {
   width: 19px;
diff --git a/docs/dist/template-app/index.html b/docs/dist/template-app/index.html
index 289c758..475dedc 100644
--- a/docs/dist/template-app/index.html
+++ b/docs/dist/template-app/index.html
@@ -5,7 +5,7 @@
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="../css/photon.css">
-    <link rel="stylesheet" href="../css/photon-theme-osx.css">
+    <!-- <link rel="stylesheet" href="../css/photon-theme-osx.css"> -->
 
     <!-- Javascript -->
     <script src="js/menu.js" charset="utf-8"></script>
diff --git a/sass/navs.scss b/sass/navs.scss
index e69cd3c..b8c15a2 100644
--- a/sass/navs.scss
+++ b/sass/navs.scss
@@ -17,7 +17,7 @@
 
   &:active,
   &.active {
-    background-color: #dcdfe1;
+    background-color: #ddd;
   }
 
   .icon {