initial commit

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

@@ -0,0 +1,16 @@
+
+# BoraBora N1 Theme
+A bright theme for [Nylas N1](http://www.nylas.com/n1), the extensible, open-source email client.
+
+
+![Screenshot](/images/screenshot.png)
+
+## Getting Started
+Installing a new theme in N1 is easy!
+
+1. Download the [latest release](https://github.com/arimai/N1-BoraBora/releases) of BoraBora theme. 
+
+2. Open N1 and install the theme by going to `Nylas N1 > Install New Theme...` and selecting the directory where you saved the zip folder.
+
+3. Thats it! Enjoy your bright day with a bright theme :) 
+

index.less

@@ -0,0 +1,6 @@
+@import "styles/ui-variables";
+@import "styles/sheet-toolbar";
+@import "styles/account-sidebar";
+@import "styles/thread-list";
+@import "styles/mail-content";
+@import "styles/right-sidebar";

package.json

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

styles/account-sidebar.less

@@ -0,0 +1,40 @@
+.scroll-region
+{
+  background: @light-gray;
+}
+.account-sidebar{
+  background: @account-sidebar-bg;
+  &.scroll-region:after {
+    content: "";
+    background: @account-sidebar-bg-pattern;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: -1;   
+  }
+  .nylas-outline-view {
+    & .heading{
+    color:rgba(0,0,0,0.8);
+    font-weight: bolder;
+    }
+    & .item .item-count-box.alt-count{
+      background: gray;
+      color:white !important;
+    }
+  }
+  .item.selected{
+    background: @account-sidebar-selected-item-bg;
+    color:white !important;
+    margin-left: -20px;
+    padding-left: 20px;
+    border-right: solid 4px rgba(0,0,0,0.4);
+    font-weight: bold; 
+
+    & img.content-mask{
+      background-color:white !important;
+    }
+  }
+
+}

styles/mail-content.less

@@ -0,0 +1,8 @@
+//mail composer
+#message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap.focused{
+	box-shadow: none;
+}
+.button-dropdown.btn-emphasis .primary-item, .button-dropdown.btn-emphasis .secondary-picker, .button-dropdown.btn-emphasis .only-item{
+	background: @bright-green; 
+	border:none;
+}

styles/right-sidebar.less

@@ -0,0 +1,47 @@
+.column-MessageListSidebar{
+	background: @right-sidebar-bg;
+	&:after{
+		content: "";
+	    background: @right-sidebar-bg-pattern; 
+	    position: absolute;
+	    top: 0;
+	    left: 0;
+	    bottom: 0;
+	    right: 0;
+	    z-index: -1;  
+	}
+ }
+//contact-card
+.sidebar-section {
+	margin : 15px;
+}
+
+.related-threads{
+	background : @right-sidebar-contact-card-related-threads-bg;
+	color: white !important;
+	border-top:none;
+	& .timestamp{
+		color: @light-pink !important;
+	}
+
+	& .toggle{
+		color: @light-pink;
+ 		cursor: pointer;
+	}
+
+	& .related-thread{
+		color: white;
+		&:hover{
+			background: @right-sidebar-contact-card-related-threads-hover-bg;
+			cursor: pointer;
+		}
+	}
+}
+.selectable{
+	color: @pink;
+	font-weight: bold;
+}
+.notifications-sticky .notifications-sticky-item{
+	border-bottom: none;
+	background: @darker-pink;
+}

styles/sheet-toolbar.less

@@ -0,0 +1,32 @@
+.sheet-toolbar{
+	border-bottom: none !important;
+	.sheet-toolbar-container{
+		background: @sheet-toolbar-bg;
+		color:white;
+	}
+	& .selection-bar .absolute{
+		background-color: @midnight-gray !important;
+		border-left:none;
+		border-right:none;	
+		& .inner .centered{
+			color:white;
+		}
+	}
+	& .btn-toolbar:hover{
+		background: @sheet-toolbar-btn-hover;
+	}
+	& .item-back {
+		& .item-back-title{
+			color:@pink;
+		}
+		& img.content-mask{
+			background-color:@bright-green;
+		}
+	}
+	.btn-icon img.content-mask{
+		background-color:@bright-green;
+		&:hover{
+			background-color: white;
+		}
+	}	
+}

styles/thread-list.less

@@ -0,0 +1,83 @@
+.list-container{
+	& .list-item{
+		// border-bottom: none;
+		&.next-is-selected{
+			border-bottom : none;
+		}	
+		&.selected{
+			background : @thread-list-item-focused-bg;
+			border-bottom:solid 1px @light-gray;
+			&:hover{
+				background-color:@lightest-blue !important;
+			}
+			& div.personal-level-icon img{
+			   -webkit-filter : @filter-full-bright;
+			}
+		}
+		&.focused{
+			background: @thread-list-item-focused-bg;
+			color: @light-black !important;
+			border-right: 3px solid @thread-list-item-focused-border-bg;
+			border-bottom: none!important;
+			cursor: pointer !important;
+			&:hover{
+				background: transparent!important;
+			}
+			& div.personal-level-icon img{
+            	-webkit-filter : @filter-full-bright;
+ 			}
+		}
+	}
+}
+.list-tabular .list-tabular-item{
+	&.keyboard-cursor{
+		border-right : 4px solid @awesome-pink;
+		border-left:none;
+	}	
+	&.selected .checkmark .inner{
+		background-color : @bright-green;
+	}
+}
+.thread-list{
+	& .list-item.selected:hover .list-column-HoverActions .inner{
+		background-image: @list-selected-hover-gradient;
+	}
+	& .focused{
+		& .thread-icon{
+			-webkit-filter: @filter-full-bright;
+		}
+		& .mail-label, .draft-list .focused .mail-label{
+			background: @bright-green !important; 
+			color: white !important;
+		    -webkit-filter: @filter-full-bright;
+		}
+		& .timestamp, .draft-list .focused .timestamp{
+			color: @awesome-pink;
+			opacity: 1;
+		}
+	}
+	/** to avoid the blue background when an item is selected in single layout
+	   and user selects double layout **/
+	&.handler-split .list-item.selected{
+		background: @light-ghee;
+		color:inherit;
+		border-bottom:solid 1px @light-gray !important;
+
+		& .mail-label{
+			//restoring to defaults
+			background-color: rgb(243,226,202) !important;
+			box-shadow: rgb(194, 135, 45) 0px 0px 1px inset, rgba(255, 255, 255, 0.498039) 0px 1px 1px inset, rgba(255, 255, 255, 0.498039) 0px 0.5px 0px !important;		
+			color: rgb(130, 95, 43) !important;
+			-webkit-filter: @filter-full-bright !important;
+		}
+		& .mail-important-icon,& .thread-icon{
+			-webkit-filter: @filter-full-bright !important;
+		}
+	}
+}
+
+.mail-important-icon.enabled.active{
+	background-image: @thread-list-important-icon-bg;
+    -webkit-filter: @filter-full-bright;
+}
+

styles/ui-variables.less

@@ -0,0 +1,64 @@
+
+//=============================== Colors ===========================//
+@light-gray : #E4E3E1;
+@dark-gray : #414345;
+@medium-black : #333333;
+@light-black : #231f20;
+@bright-green : #97CE68;
+@awesome-pink : #EB6361;
+@light-pink : #FDA29D;
+@pink : #E26A6A;
+@darker-pink : #EB6361;
+@lightest-blue : #f2f2f2;
+@midnight-gray : #414345;
+@midnight-black : #232526;
+@light-ghee : #ECE9E6;
+@light-purple : #E3D3E4;
+@light-yellow :#FCFFB2;
+
+//gradients
+@yellow-purple : linear-gradient(to right, rgba(247,255,0, 0.2), rgba(144, 78, 149, 0.4));
+@yellow-green : linear-gradient(to right, rgba(247,255,0,0.25), rgba(77,160,176, 0.45));
+@green-purple : linear-gradient(to right, rgba(219,214,92,0.6), rgba(86,20,176, 0.4));
+@green-only-gradient : linear-gradient(to right, rgba(141,194,111,0.3), rgba(118,184,82,0.6));
+@red-purple : linear-gradient(to right, rgba(220,36,48,0.35), rgba(123,67,151,0.7));
+@peach-green : linear-gradient(to right, rgba(191,230,186,0.5), rgba(211,149,155,0.5));
+@orange-purple-original : linear-gradient(to right, rgba(233,100,67,0.6) , rgba(144,78,149,0.6));
+@midnight-black-gray : linear-gradient(to left,@midnight-black,@midnight-gray);
+@list-selected-hover-gradient : -webkit-linear-gradient(left, rgba(220, 235, 250, 0) 0%, @lightest-blue 50%, @lightest-blue 100%) !important;
+//=============================== Background ===========================//
+
+//== Sheet Toolbar
+@sheet-toolbar-bg: @midnight-black-gray;
+@sheet-toolbar-btn-hover: @bright-green !important;
+
+//== Account Sidebar
+@account-sidebar-bg: @yellow-green !important;
+/* Background pattern from subtlepatterns.com */
+@account-sidebar-bg-pattern: url(https://raw.githubusercontent.com/arimai/N1-BoraBora/master/images/pattern5.png) repeat !important; 
+@account-sidebar-selected-item-bg: rgba(0, 0, 0, 0.3) !important;
+
+//== Thread List
+@thread-list-item-focused-bg: @light-ghee !important;
+@thread-list-item-focused-border-bg: rgba(255,97,109,0.7) !important;
+@thread-list-important-icon-bg: url(https://raw.githubusercontent.com/arimai/N1-BoraBora/master/images/imp-icon-green.png) !important; 
+
+//== Mail Content
+@composer-button-bg: @bright-green !important;
+
+//== Right Sidebar
+@right-sidebar-bg: rgba(239,238,236,0.5) !important;
+/* Background pattern from subtlepatterns.com */
+@right-sidebar-bg-pattern: url(https://raw.githubusercontent.com/arimai/N1-BoraBora/master/images/pattern7.png) repeat !important; 
+@right-sidebar-contact-card-related-threads-bg: @dark-gray !important;
+@right-sidebar-contact-card-related-threads-hover-bg: @medium-black !important;
+
+
+//=============================== Filters ===========================//
+@filter-full-bright : brightness(100%) grayscale(0%) !important;
+
+//=============================== Theme preview ===========================//
+@component-active-color: @awesome-pink;
+@toolbar-background-color: @midnight-gray;
+@panel-background-color: @bright-green;
+