Merge pull request #179 from nsonnad/add-themes-config

Add less config for themes and apply throughout

notebook/static/base/less/page.less

@@ -47,7 +47,7 @@ body {
 #header-spacer {
     width: 100%;
     visibility: hidden;
-    
+
     @media print {
         display: none;
     }

notebook/static/notebook/less/ansicolors.less

@@ -4,20 +4,20 @@
 
 /* use dark versions for foreground, to improve visibility */
 .ansiblack {color: black;}
-.ansired {color: darkred;}
-.ansigreen {color: darkgreen;}
+.ansired {color: @ansired;}
+.ansigreen {color: @ansigreen;}
 .ansiyellow {color: #c4a000;}
-.ansiblue {color: darkblue;}
+.ansiblue {color: @ansiblue;}
 .ansipurple {color: darkviolet;}
-.ansicyan {color: steelblue;}
+.ansicyan {color: @ansicyan;}
 .ansigray {color: gray;}
 
 /* and light for background, for the same reason */
 .ansibgblack {background-color: black;}
-.ansibgred {background-color: red;}
-.ansibggreen {background-color: green;}
+.ansibgred {background-color: darken(@ansired, 20%);}
+.ansibggreen {background-color: darken(@ansigreen, 20%);}
 .ansibgyellow {background-color: yellow;}
-.ansibgblue {background-color: blue;}
+.ansibgblue {background-color: darken(@ansiblue, 20%);}
 .ansibgpurple {background-color: magenta;}
-.ansibgcyan {background-color: cyan;}
+.ansibgcyan {background-color: darken(@ansicyan, 20%);;}
 .ansibggray {background-color: gray;}

notebook/static/notebook/less/cell.less

@@ -15,7 +15,7 @@ div.cell {
     }
 
     .edit_mode &.selected {
-        border-color: green;
+        border-color: @color-muted-5;
         /* Don't border the cells when printing */
         @media print {
             border-color: transparent;
@@ -37,7 +37,7 @@ div.cell {
     margin: 0px;
     font-family: @font-family-monospace;
     text-align: right;
-    /* This has to match that of the the CodeMirror class line-height below */	
+    /* This has to match that of the the CodeMirror class line-height below */
     line-height: @code_line_height;
 }
 
@@ -82,7 +82,7 @@ div.unrecognized_cell {
     // from text_cell
     padding: 5px 5px 5px 0px;
     .hbox();
-    
+
     .inner_cell {
         .border-radius(@border-radius-base);
         padding: 5px;

notebook/static/notebook/less/highlight.less

@@ -7,8 +7,6 @@ Adapted from GitHub theme
 
 @import (reference) "highlight-refs.less";
 
-@highlight-base: #000;
-
 .highlight-base{
   color: @highlight-base;
 }
@@ -26,24 +24,24 @@ Adapted from GitHub theme
 }
 
 .highlight-string{
-  color: #BA2121;
+  color: @highlight-string;
 }
 
 .highlight-comment{
-  color: #408080;
+  color: @color-muted-5;
   font-style: italic;
 }
 
 .highlight-number{
-  color: #080;
+  color: @color-accent-3;
 }
 
 .highlight-atom{
   color: #88F;
 }
 
 .highlight-keyword{
-  color: #008000;
+  color: @highlight-keyword;
   font-weight: bold;
 }
 
@@ -52,20 +50,24 @@ Adapted from GitHub theme
 }
 
 .highlight-error{
-  color: #f00;
+  color: @highlight-error;
 }
 
 .highlight-operator{
-  color: #AA22FF;
+  color: @color-accent-1;
   font-weight: bold;
 }
 
 .highlight-meta{
   color: #AA22FF;
 }
 
+.highlight-cursor {
+  border-left: 1px solid @color-muted-6;
+}
+
 /* previously not defined, copying from default codemirror */
-.highlight-def{ .cm-s-default.cm-def() }
+.highlight-def{ color: @color-accent-2; }
 .highlight-punctuation{ .cm-s-default.cm-punctuation() }
 .highlight-property{ .cm-s-default.cm-property() }
 .highlight-string-2{ .cm-s-default.cm-string-2() }

notebook/static/notebook/less/variables.less

@@ -10,8 +10,8 @@
 @notebook_line_height:          20px;
 @code_line_height:              1.21429em;  // changed from 1.231 to get 17px even
 @code_padding:                  0.4em;  // 5.6 px
-@rendered_html_border_color:    black;
-@input_prompt_color:            navy;
-@output_prompt_color:           darkred;
-@output_pre_color:              black;
+@rendered_html_border_color:    @color-muted-3;
+@input_prompt_color:            @color-accent-1;
+@output_prompt_color:           @color-accent-2;
+@output_pre_color:              @color-muted-6;
 @notification_widget_bg:        rgba(240, 240, 240, 0.5);

notebook/static/style/ipython.less

@@ -2,6 +2,9 @@
 @import "../components/bootstrap/less/variables.less";
 @import "../components/bootstrap/less/mixins.less";
 
+// theme
+@import "../themes/theme.less";
+
 // minimal imports from font-awesome
 @import "../components/font-awesome/less/variables.less";
 

notebook/static/style/style.less

@@ -31,3 +31,6 @@
 
 // terminal
 @import "../terminal/less/terminal.less";
+
+// theme
+@import "../themes/theme.less";

notebook/static/themes/default.less

@@ -0,0 +1,26 @@
+// Tomorrow theme, light
+
+// Muted, gray-ish colors
+@color-muted-1:   #ffffff;
+@color-muted-2:   #e0e0e0;
+@color-muted-3:   #c5c8c6;
+@color-muted-4:   #b4b7b4;
+@color-muted-5:   #969896;
+@color-muted-6:   #373b41;
+@color-muted-7:   #282a2e;
+@color-muted-8:   #1d1f21;
+
+// Bright colors
+@color-primary:   #81a2be;
+@color-error:     #cc6666;
+@color-success:   #b5bd68;
+@color-accent-1:  #de935f;
+@color-accent-2:  #f0c674;
+@color-accent-3:  #8abeb7;
+@color-accent-4:  #b294bb;
+@color-accent-5:  #a3685a;
+
+// Bootstrap overrides
+@font-family-monospace:   monospace;  // to allow user to customize their fonts
+@font-size-base:          13px;
+

notebook/static/themes/eighties.less

@@ -0,0 +1,25 @@
+// Eighties theme, dark
+
+// Muted, gray-ish colors
+@color-muted-1:   #2d2d2d;
+@color-muted-2:   #393939;
+@color-muted-3:   #515151;
+@color-muted-4:   #747369;
+@color-muted-5:   #a09f93;
+@color-muted-6:   #d3d0c8;
+@color-muted-7:   #f2f0ec;
+@color-muted-8:   #e8e6df;
+
+// Bright colors
+@color-primary:   #6699cc;
+@color-error:     #f2777a;
+@color-success:   #99cc99;
+@color-accent-1:  #f99157;
+@color-accent-2:  #ffcc66;
+@color-accent-3:  #66cccc;
+@color-accent-4:  #cc99cc;
+@color-accent-5:  #d27b53;
+
+// Bootstrap overrides
+@font-family-monospace:   monospace;  // to allow user to customize their fonts
+@font-size-base:          13px;

notebook/static/themes/theme.less

@@ -0,0 +1,32 @@
+@import "eighties.less";
+
+@body-bg:                 @color-muted-1;
+@brand-primary:           @color-primary;
+@brand-success:           @color-success;
+@text-color:              @color-muted-7;
+@table-border-color:      @color-muted-3;
+@table-border-highlight:  @color-muted-7;
+@page-backdrop-color:     @color-muted-2;
+@navbar-default-bg:       @color-muted-2;
+
+@gray-base:               @color-muted-1;
+@gray-darker:             @color-muted-2;
+@gray-dark:               @color-muted-3;
+@gray:                    @color-muted-4;
+@gray-light:              @color-muted-5;
+@gray-lighter:            @color-muted-6;
+
+// IPython colors
+@border_color:            @color-muted-4;
+
+// Highlight colors
+@highlight-base:          @color-muted-6;
+@highlight-keyword:       @color-accent-4;
+@highlight-error:         @color-error;
+@highlight-string:        @color-success;
+
+// ANSI
+@ansired:                 @color-error;
+@ansigreen:               @color-success;
+@ansicyan:                @color-accent-3;
+@ansiblue:                @color-primary;

notebook/static/tree/less/tree.less

@@ -33,7 +33,7 @@ ul.breadcrumb {
         font-size: 16px;
         margin-right: 4px;
     }
-    
+
     span {
         color: @dark_dashboard_color;
     }
@@ -59,7 +59,7 @@ ul.breadcrumb {
 
 .list_header {
     font-weight: bold;
-    background-color: @page-backdrop-color
+    background-color: @page-backdrop-color;
 }
 
 .list_placeholder {
@@ -94,7 +94,7 @@ ul.breadcrumb {
   };
   a {text-decoration: none;}
   &:hover {
-    background-color: darken(white,2%);
+    background-color: @table-border-highlight;
   }
 }
 
@@ -131,7 +131,7 @@ ul.breadcrumb {
 }
 
 .item_icon {
-    font-size: 14px; 
+    font-size: 14px;
     color: @dark_dashboard_color;
     margin-right: @dashboard_lr_pad;
     margin-left: @dashboard_lr_pad;
@@ -271,7 +271,7 @@ ul#new-menu {
                 padding-left: @dashboard_lr_pad;
                 padding-right: @dashboard_lr_pad;
                 line-height: @btn_mini_height;
-                
+
                 a:focus, a:hover {
                     text-decoration: none;
                 }