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

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

@@ -1,44 +1,44 b''
 div.code_cell {
 }
 
 /* any special styling for code cells that are currently running goes here */
 div.code_cell.running {
 }
 
 div.input {
     page-break-inside: avoid;
     .hbox();
 }
 
 @media (max-width: 480px) {
     // move prompts above code on small screens
     div.input {
         .vbox();
     }
 }
 
 /* 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;
 }
 
 // The styles related to div.highlight are for nbconvert HTML output only. This works
 // because the .highlight div isn't present in the live notebook. We could put this into
 // nbconvert, but it easily falls out of sync, can't use our less variables and doesn't
 // help the basic template when paired with our CSS.
 
 div.input_area > div.highlight {
     margin: @code_padding;
     border: none;
     padding: 0px;
     background-color: transparent;
 }
 
 div.input_area > div.highlight > pre {
     margin: 0px;
     border: none;
     padding: 0px;
     background-color: transparent;
 }
 

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

@@ -1,13 +1,13 b''
 .notification_widget {
     color: @navbar-default-link-color;
     padding: 1px 12px;
     margin: 2px 4px;
     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

@@ -1,174 +1,174 b''
 div.output_wrapper {
     /* this position must be relative to enable descendents to be absolute within it */
     position: relative;
     .vbox()
 }
 
 /* class for the output area when it should be height-limited */
 div.output_scroll {
     /* ideally, this would be max-height, but FF barfs all over that */
     height: 24em;
     /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
     width: 100%;
 
     overflow: auto;
     .corner-all;
     .box-shadow(inset 0 2px 8px rgba(0, 0, 0, .8));
     display: block;
 }
 
 /* output div while it is collapsed */
 div.output_collapsed {
     margin: 0px;
     padding: 0px;
     .vbox();
 }
 
 div.out_prompt_overlay {
     height: 100%;
     padding: 0px @code_padding;
     position: absolute;
     .corner-all;
 }
 
 div.out_prompt_overlay:hover {
     /* use inner shadow to get border that is computed the same on WebKit/FF */
     .box-shadow(inset 0 0 1px #000);
     background: rgba(240, 240, 240, 0.5);
 }
 
 div.output_prompt {
-    color: darkred;
+    color: @output_prompt_color;
 }
 
 /* This class is the outer container of all output sections. */
 div.output_area {
     padding: 0px;
     page-break-inside: avoid;
     .hbox();
 
     .MathJax_Display {
         // Inside a CodeCell, elements are left justified
         text-align: left !important;
     }
 
     .rendered_html {
         // Inside a CodeCell, elements are left justified
         table {
             margin-left: 0;
             margin-right: 0;
         }
     
         img {
             margin-left: 0;
             margin-right: 0;
         }
     }
 }
 
 /* This is needed to protect the pre formating from global settings such
    as that of bootstrap */
 .output {
     .vbox();
 }
 
 @media (max-width: 480px) {
     // move prompts above output on small screens
     div.output_area {
         .vbox();
     }
 }
 
 div.output_area pre {
     margin: 0;
     padding: 0;
     border: 0;
     vertical-align: baseline;
-    color: black;
+    color: @output_pre_color;
     background-color: transparent;
     .border-radius(0);
 }
 
 /* This class is for the output subarea inside the output_area and after
    the prompt div. */
 div.output_subarea {
     padding: @code_padding @code_padding 0.0em @code_padding;
     .box-flex1();
 }
 
 /* The rest of the output_* classes are for special styling of the different
    output types */
 
 /* all text output has this class: */
 div.output_text {
     text-align: left;
     color: @text-color;
     /* This has to match that of the the CodeMirror class line-height below */  
     line-height: @code_line_height;
 }
 
 /* stdout/stderr are 'text' as well as 'stream', but execute_result/error are *not* streams */
 div.output_stream {
 }
 
 div.output_stdout {
 }
 
 div.output_stderr {
     background: #fdd; /* very light red background for stderr */
 }
 
 div.output_latex {
     text-align: left;
 }
 
 div.output_html {
 }
 
 div.output_png {
 }
 
 div.output_jpeg {
 }
 
 /* Empty output_javascript divs should have no height */
 div.output_javascript:empty {
     padding: 0;
 }
 
 .js-error {
     color: darkred;
 }
 
 /* raw_input styles */
 
 div.raw_input_container {
     font-family: @font-family-monospace;
     // for some reason, em padding doesn't compute the same for raw_input
     // that is not the first input, but px does
     padding-top: 5px;
 }
 
 span.raw_input_prompt {
     /* nothing needed here */
 }
 
 input.raw_input {
     font-family: inherit;
     font-size: inherit;
     color: inherit;
     width: auto;
     /* make sure input baseline aligns with prompt */
     vertical-align: baseline;
     /* padding + margin = 0.5em between prompt and cursor */
     padding: 0em 0.25em;
     margin: 0em 0.25em;
 }
 
 input.raw_input:focus {
     box-shadow: none;
 }
 
 p.p-space {
     margin-bottom: 10px;
 }

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

@@ -1,86 +1,86 b''
 .rendered_html {
 
     color: @text-color;
     em {font-style: italic;}
     strong {font-weight: bold;}
     u {text-decoration: underline;}
     :link {text-decoration: underline;}
     :visited {text-decoration: underline;}
 
     // For a 14px base font size this goes as:
     // font-size = 26, 22, 18, 14, 12, 12
     // margin-top = 14, 14, 14, 14, 8, 8
     h1 {font-size: 185.7%; margin: 1.08em 0 0 0; font-weight: bold; line-height: 1.0;}
     h2 {font-size: 157.1%; margin: 1.27em 0 0 0; font-weight: bold; line-height: 1.0;}
     h3 {font-size: 128.6%; margin: 1.55em 0 0 0; font-weight: bold; line-height: 1.0;}
     h4 {font-size: 100%; margin: 2em 0 0 0; font-weight: bold; line-height: 1.0;}
     h5 {font-size: 100%; margin: 2em 0 0 0; font-weight: bold; line-height: 1.0; font-style: italic;}
     h6 {font-size: 100%; margin: 2em 0 0 0; font-weight: bold; line-height: 1.0; font-style: italic;}
 
     // Reduce the top margins by 14px compared to above
     h1:first-child {margin-top: 0.538em;}
     h2:first-child {margin-top: 0.636em;}
     h3:first-child {margin-top: 0.777em;}
     h4:first-child {margin-top: 1em;}
     h5:first-child {margin-top: 1em;}
     h6:first-child {margin-top: 1em;}
 
     ul {list-style:disc; margin: 0em 2em; padding-left: 0px;}
     ul ul {list-style:square; margin: 0em 2em;}
     ul ul ul {list-style:circle; margin: 0em 2em;}
     ol {list-style:decimal; margin: 0em 2em; padding-left: 0px;}
     ol ol {list-style:upper-alpha; margin: 0em 2em;}
     ol ol ol {list-style:lower-alpha; margin: 0em 2em;}
     ol ol ol ol {list-style:lower-roman; margin: 0em 2em;}
     /* any extras will just be numbers: */
     ol ol ol ol ol {list-style:decimal; margin: 0em 2em;}
     * + ul {margin-top: 1em;}
     * + 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;}
 
     pre, code {
         border:             0;
         background-color:   @body-bg;
         color:              @text-color;
         font-size:          100%;
         padding:            0px;
     }
 
     blockquote {margin: 1em 2em;}
 
     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;
     }
     td, th {
         text-align: left;
         vertical-align: middle;
         padding: 4px;
     }
     th {font-weight: bold;}
     * + table {margin-top: 1em;}
 
     p {text-align: justify;}
     * + p {margin-top: 1em;}
 
     img {
         display: block;
         margin-left: auto;
         margin-right: auto;
     }
     * + img {margin-top: 1em;}
 
 }

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

@@ -1,14 +1,18 b''
 
 // Our own variables for this page
 
 @cell_selected_background:      darken(@body-bg, 2%);
 @cell_background:               darken(@body-bg, 3.2%);
 @border_color:                  darken(@cell_selected_background, 31%);
 @light_border_color:            darken(@cell_selected_background, 17%);
 @border_width:                  1px;
 @notebook_font_size:            14px;
 @notebook_line_height:          20px;
 @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);