Initial commit

Add starter-theme

LICENSE.md

@@ -0,0 +1,21 @@
+Copyright (c) 2014 GitHub Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

README.md

@@ -1,2 +1,36 @@
-# Bemind-N1-Theme
-The Bemind theme made for Nylas N1 email client
+# N1 Theme Starter
+The N1 Theme Starter is a basic starter for any theme you want to create for [Nylas N1](http://www.nylas.com/n1), the extensible, open-source email client.
+
+## Getting Started
+Creating a new theme in N1 is easy! Here's how you can do it.
+
+1. Fork this repo or download the code. Add a name, display name, title, and description for your theme to `package.json`, and change the directory name to match.
+
+2. Open N1 and install the theme by going to `Nylas N1 > Install New Theme...` and selecting the directory.
+
+3. Choose `Developer > Run With Debug Flags` for easier debugging.
+
+4. Now, you can start playing with the theme! It's installed in `~/.nylas/packages/THEME_NAME`, so open it from there. Most of N1's React components are derived from the core variables defined in `ui-variables.less`, and any changes you make there will override the defaults for N1. You can also add more LESS files in `styles` (ideally, separated into logical components like `thread-list.less`) to make your own specific changes. To reload the theme, just open the console (`Developer > Toggle Developer Tools`) and type `NylasEnv.themes.activateThemes()`.
+
+5. Once you're happy with your theme, check how it looks in the theme picker (`Nylas N1 > Change Theme...`). We use your UI variables to pull the colors, but if you want to add your own selections to the color palette, create a `theme-colors.less` file that includes any of the variables that you want to change, and they'll only affect the theme preview. Here are the variables, on the left, with the part of the theme preview that they match:
+
+    ```
+    @background-secondary:     BACKGROUND_COLOR
+    @text-color:               TEXT_COLOR, FIRST_SWATCH_COLOR
+    @component-active-color:   MIDDLE_SWATCH_COLOR
+    @toolbar-background-color: LAST_SWATCH_COLOR
+    @panel-background-color:   STRIP_COLOR
+    ```
+
+## Structure
+```
+.
+├── styles                 # All stylesheets
+│   ├── ui-variables.less  # UI variables that override N1's defaults
+│   ├── theme-colors.less  # Theme colors for theme preview (optional)
+├── index.less             # Main LESS file to import your stylesheets
+├── package.json           # Metadata about the theme
+├── LICENSE.md             # License with usage rights
+└── README.md              # Info about your theme and how to use it
+```
+

index.less

@@ -0,0 +1 @@
+@import "styles/ui-variables";

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "",
+  "title": "",
+  "displayName": "",
+  "theme": "ui",
+  "version": "0.1.0",
+  "description": "",
+  "license": "GPL-3.0",
+  "engines": {
+    "nylas": "*"
+  },
+  "private": true
+}
+

styles/ui-variables.less

@@ -0,0 +1,83 @@
+// Change these variables to modify your theme!
+
+//=============================== Components ===========================//
+
+//== Toolbar
+@toolbar-background-color: darken(@white, 17.5%);
+
+//== Account Sidebar
+@panel-background-color:         @gray-lighter;
+@source-list-bg:                 @panel-background-color;
+@source-list-active-bg:          @panel-background-color;
+@source-list-active-color:       @component-active-color;
+
+//== Thread List (e.g, `.list-group-item`, `.list-item`)
+@list-bg:                  @white;
+@list-border:              #ddd;
+@list-hover-bg:            darken(@list-bg, 4%);
+@list-focused-color:       @list-bg;
+@list-focused-bg:          @component-active-color;
+@list-focused-border:      @list-focused-bg;
+@list-selected-color:      inherit;
+@list-selected-bg:         mix(@component-active-color, @list-bg, 17%);
+@list-selected-border:     mix(@component-active-color, @list-bg, 50%);
+
+//== Notifications
+@background-color-info: @blue-light;
+@background-color-success: #009ec4;
+@background-color-warning: #ff4800;
+@background-color-error: #f15f4b;
+@background-color-pending: #b4babd;
+
+//== Menus
+@menu-item-color-hover: fade(@blue-light, 10%);
+@menu-item-color-selected: @blue-light;
+@menu-text-color-selected: @text-color-inverse;
+
+//== Sizes
+@input-font-size: 14px;
+@component-padding: 10px;
+@component-icon-padding: 5px;
+@component-icon-size: 16px;
+@component-line-height: 25px;
+@component-border-radius: 2px;
+
+
+//=============================== Colors ===============================//
+
+@accent-primary:      @blue;
+@accent-primary-dark: @blue-dark;
+
+@background-primary:     @white;
+@background-off-primary: #fdfdfd;
+@background-secondary:   #f6f6f6;
+@background-tertiary:    #6d7987;
+
+@color-info:    @blue-dark;
+@color-success: #5CB346;
+@color-warning: #f0ad4e;
+@color-error:   #d9534f;
+@color-danger:  #d9534f;
+
+@component-active-color:        @accent-primary-dark;
+@component-active-bg:           @background-primary;
+
+@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%,
+rgba(253,253,253,0.75) 100%);
+
+@border-color-primary: darken(@background-primary, 10%);
+@border-color-secondary: darken(@background-secondary, 10%);
+@border-color-tertiary: darken(@background-tertiary, 10%);
+@border-color-divider: @border-color-secondary;
+
+//============================= Typography =============================//
+
+// ----- Colors -----
+@text-color:         @black;
+@text-color-inverse: @white;
+
+@text-color-heading: #434648;
+
+@text-color-link:        @blue;
+@text-color-link-hover:  @blue-dark;
+@text-color-link-active: @blue-dark;