abstract hard-coded style values to be variables for different theming

IPython/html/static/notebook/less/codecell.less

@@ -19,7 +19,7 @@ div.input {
 
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_prompt {
-    color: navy;
+    color: @input_prompt_color;
     border-top: 1px solid transparent;
 }
 

IPython/html/static/notebook/less/notificationwidget.less

@@ -5,7 +5,7 @@
     z-index: 10;
     border: 1px solid #ccc;
     border-radius: @border-radius-base;
-    background: rgba(240, 240, 240, 0.5);
+    background: @notification_widget_bg;
 
     &.span {
         padding-right:2px;

IPython/html/static/notebook/less/outputarea.less

@@ -38,7 +38,7 @@ div.out_prompt_overlay:hover {
 }
 
 div.output_prompt {
-    color: darkred;
+    color: @output_prompt_color;
 }
 
 /* This class is the outer container of all output sections. */
@@ -84,7 +84,7 @@ div.output_area pre {
     padding: 0;
     border: 0;
     vertical-align: baseline;
-    color: black;
+    color: @output_pre_color;
     background-color: transparent;
     .border-radius(0);
 }

IPython/html/static/notebook/less/renderedhtml.less

@@ -38,8 +38,8 @@
     * + ol {margin-top: 1em;}
 
     hr {
-        color: black;
-        background-color: black;
+        color: @rendered_html_border_color;
+        background-color: @rendered_html_border_color;
     }
 
     pre {margin: 1em 2em;}
@@ -57,11 +57,11 @@
     table {
         margin-left: auto;
         margin-right: auto;
-        border: 1px solid black;
+        border: 1px solid @rendered_html_border_color;
         border-collapse: collapse;
     }
     tr, th, td {
-        border: 1px solid black;
+        border: 1px solid @rendered_html_border_color;
         border-collapse: collapse;
         margin: 1em 2em;
     }

IPython/html/static/notebook/less/variables.less

@@ -11,4 +11,8 @@
 @code_line_height:              1.21429em;  // changed from 1.231 to get 17px even
 @code_padding:                  0.4em;  // 5.6 px
 @notebook-shadow:               inset 1px 4px 9px -6px rgba(0,0,0,.25);
-
+@rendered_html_border_color:    black;
+@input_prompt_color:            navy;
+@output_prompt_color:           darkred;
+@output_pre_color:              black;
+@notification_widget_bg:        rgba(240, 240, 240, 0.5);