connors · SubaghaBose · Feb 20, 2016 · Feb 20, 2016 · Feb 20, 2016 · Feb 20, 2016
diff --git 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

diff --git 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
@@ -0,0 +1,327 @@
+/*!
+ * =====================================================
+ * 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.
+ * =====================================================
+ */
+
+.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;
+}
+
+.toolbar-actions {
+  margin-top: 4px;
+  margin-bottom: 3px;
+  padding-right: 3px;
+  padding-left: 3px;
+  padding-bottom: 3px;
+}
+
+.title {
+  font-weight: 400;
+  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-link {
+  color: #3b99fc;
+  box-shadow: none;
+}
+.btn-link:active {
+  color: #097ffb;
+}
+
+.btn .icon {
+  color: #737475;
+}
+
+.form-control {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+.form-control:focus {
+  border-color: #6db3fd;
+  box-shadow: 0 0 0 3px #6db3fd;
+}
+
+.pane {
+  border-left: 1px solid #ddd;
+}
+
+.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 {
+  padding: 2px 10px 2px 25px;
+  color: #333;
+}
+.nav-group-item:active, .nav-group-item.active {
+  background-color: #dcdfe1;
+}
+.nav-group-item .icon {
+  color: #737475;
+}
+
+.nav-group-title {
+  font-size: 12px;
+  letter-spacing: normal;
+  text-transform: none;
+  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 {
+  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);
+}
+
+.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
diff --git a/dist/template-app/app.js b/dist/template-app/app.js
@@ -24,7 +24,8 @@ app.on('ready', function() {
     'min-width': 500,
     'min-height': 200,
     'accept-first-mouse': true,
-    'title-bar-style': 'hidden'
+    '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
@@ -5,18 +5,13 @@
 
     <!-- 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>
-      </header>
-
       <!-- Your app's content goes inside .window-content -->
       <div class="window-content">
         <div class="pane-group">
@@ -55,126 +50,212 @@ <h5 class="nav-group-title">Favorites</h5>
           </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="window">
+
+              <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>
+                      <button class="btn btn-large btn-link" type="button">Link button</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>
+
+                    <hr>
+
+                    <table class="table-striped padded-top-more">
+                      <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>
       </div>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;

diff --git a/docs/dist/css/photon-theme-osx.css b/docs/dist/css/photon-theme-osx.css
@@ -0,0 +1,327 @@
+/*!
+ * =====================================================
+ * 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.
+ * =====================================================
+ */
+
+.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;
+}
+
+.toolbar-actions {
+  margin-top: 4px;
+  margin-bottom: 3px;
+  padding-right: 3px;
+  padding-left: 3px;
+  padding-bottom: 3px;
+}
+
+.title {
+  font-weight: 400;
+  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-link {
+  color: #3b99fc;
+  box-shadow: none;
+}
+.btn-link:active {
+  color: #097ffb;
+}
+
+.btn .icon {
+  color: #737475;
+}
+
+.form-control {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+.form-control:focus {
+  border-color: #6db3fd;
+  box-shadow: 0 0 0 3px #6db3fd;
+}
+
+.pane {
+  border-left: 1px solid #ddd;
+}
+
+.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 {
+  padding: 2px 10px 2px 25px;
+  color: #333;
+}
+.nav-group-item:active, .nav-group-item.active {
+  background-color: #dcdfe1;
+}
+.nav-group-item .icon {
+  color: #737475;
+}
+
+.nav-group-title {
+  font-size: 12px;
+  letter-spacing: normal;
+  text-transform: none;
+  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 {
+  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);
+}
+
+.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
diff --git a/docs/dist/template-app/app.js b/docs/dist/template-app/app.js
@@ -24,7 +24,8 @@ app.on('ready', function() {
     'min-width': 500,
     'min-height': 200,
     'accept-first-mouse': true,
-    'title-bar-style': 'hidden'
+    '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
@@ -5,18 +5,13 @@
 
     <!-- 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>
-      </header>
-
       <!-- Your app's content goes inside .window-content -->
       <div class="window-content">
         <div class="pane-group">
@@ -55,126 +50,212 @@ <h5 class="nav-group-title">Favorites</h5>
           </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="window">
+
+              <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>
+                      <button class="btn btn-large btn-link" type="button">Link button</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>
+
+                    <hr>
+
+                    <table class="table-striped padded-top-more">
+                      <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>
       </div>

diff --git a/sass/bars.scss b/sass/bars.scss
@@ -4,47 +4,37 @@
 
 .toolbar {
   min-height: 22px;
-  box-shadow: inset 0 1px 0 #f5f4f5;
-  @include linear-gradient(#e8e6e8, #d1cfd1);
   @include clearfix;
 }
 
 .toolbar-header {
-  border-bottom: 1px solid $dark-border-color;
+  border-bottom: 1px solid $border-color;
 
   .title {
     margin-top: 1px;
   }
 }
 
 .toolbar-footer {
-  border-top: 1px solid $dark-border-color;
+  border-top: 1px solid $border-color;
   -webkit-app-region: drag;
 }
 
 // Simple centered title to go in the toolbar
 .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;
-  margin-bottom: 3px;
-  padding-right: 3px;
-  padding-left: 3px;
-  padding-bottom: 3px;
+  margin-top: 10px;
+  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/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
@@ -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,.06);
   -webkit-app-region: no-drag;
 
   &:focus {
@@ -40,15 +39,11 @@
 // 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);
+  border-color: $dark-border-color;
+  background-color: #fafafa;
 
   &:active {
-    background-color: #ddd;
-    background-image: none;
+    background-color: #eee;
   }
 }
 
@@ -58,50 +53,51 @@
 .btn-negative,
 .btn-warning {
   color: #fff;
-  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);
+  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%);
+  }
+}
+
+// Link buttons
+.btn-link {
+  color: $primary-color;
+  background: none;
+
+  &:active {
+    color: darken($primary-color, 10%);
   }
 }
 
@@ -112,7 +108,7 @@
   height: 14px;
   margin-top: 1px;
   margin-bottom: 1px;
-  color: #737475;
+  color: #888;
   font-size: 14px;
   line-height: 1;
 }
@@ -126,5 +122,5 @@
 .btn-dropdown:after {
   font-family: "photon-entypo";
   margin-left: 5px;
-  content: '\e873'
+  content: '\e873';
 }
diff --git 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;
@@ -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
@@ -22,6 +22,10 @@
   }
 }
 
+.pane-borderless {
+  border-left: 0;
+}
+
 .pane-sm {
   max-width: 220px;
   min-width: 150px;

diff --git 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
@@ -7,7 +7,7 @@
 }
 
 .nav-group-item {
-  padding: 2px 10px 2px 25px;
+  padding: 5px 10px;
   display: block;
   color: $gray-color;
   text-decoration: none;
@@ -17,14 +17,14 @@
 
   &:active,
   &.active {
-    background-color: #dcdfe1;
+    background-color: #ddd;
   }
 
   .icon {
     width: 19px; // Prevents a one pixel cutoff
     height: 18px;
     float: left;
-    color: #737475;
+    color: #777;
     margin-top: -3px;
     margin-right: 7px;
     font-size: 18px;
@@ -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/tables.scss b/sass/tables.scss
@@ -1,5 +1,5 @@
 //
-// Navs.scss
+// Tables.scss
 // --------------------------------------------------
 
 table {
@@ -11,15 +11,15 @@ table {
 }
 
 thead {
-  background-color: #f5f5f4;
+  background-color: #f6f6f6;
 }
 
 tbody {
   background-color: #fff;
 }
 
 .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
@@ -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 $border-color;
+  border-bottom: 1px solid $border-color;
 }
 
 .tab-item {
@@ -13,15 +14,15 @@
   padding: 3px;
   font-size: 12px;
   text-align: center;
-  border-left: 1px solid #989698;
-  @include linear-gradient(#b8b6b8, #b0aeb0);
+  border-left: 1px solid $border-color;
+  background-color: #eee;
 
   &:first-child {
     border-left: 0;
   }
 
   &.active {
-    @include linear-gradient(#d4d2d4, #cccacc);
+    background-color: #fafafa;
   }
 
   .icon-close-tab {
@@ -41,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
diff --git 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: #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
@@ -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;
@@ -19,20 +19,18 @@ $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;
-$dark-border-color: #c2c0c2 !default;
-$darker-bottom-border-color: #a19fa1 !default;
-$toolbar-border-color: #939293 !default;
+$dark-border-color: #ccc !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 +46,7 @@ $focus-input-color: lighten($primary-color, 10%)  !default;
 // --------------------------------------------------
 
 // Border radius
-$default-border-radius: 4px;
+$default-border-radius: 3px;
 
 // Padding
 $padding: 10px;