Making the notebook more themable.

src/cells/index.css

@@ -9,26 +9,13 @@
 |----------------------------------------------------------------------------*/
 
 
-:root {
-  --jp-private-padding: 10px;
-  --jp-private-cell-editor-background: #f7f7f7;
-  --jp-private-cell-editor-border: #cfcfcf;
-  --jp-private-cell-prompt-width: 90px;
-  --jp-private-cell-inprompt-color: #303F9F;
-  --jp-private-cell-outprompt-color: #D84315;
-  --jp-private-cell-font-family: var(--jp-ui-font-family);
-  --jp-private-cell-prompt-letter-spacing: 2px;
-}
-
-
-
 /*-----------------------------------------------------------------------------
 | Cell
 |----------------------------------------------------------------------------*/
 
 
 .jp-Cell {
-  padding: 5px;
+  padding: var(--jp-cell-padding);
   margin: 0px;
   border: var(--jp-border-width) solid transparent;
   outline: none;
@@ -39,12 +26,13 @@
 .jp-Cell-prompt {
   flex-grow: 0;
   flex-shrink: 0;
-  flex-basis: var(--jp-private-cell-prompt-width);
-  color: var(--jp-private-cell-inprompt-color);
-  font-family: var(--jp-private-cell-font-family);
+  flex-basis: var(--jp-cell-prompt-width);
+  color: var(--jp-cell-inprompt-font-color);
+  font-family: var(--jp-cell-prompt-font-family);
   padding: var(--jp-code-padding);
   text-align: right;
-  letter-spacing: var(--jp-private-cell-prompt-letter-spacing);
+  letter-spacing: var(--jp-cell-prompt-letter-spacing);
+  opacity: var(--jp-cell-prompt-opacity);
   line-height: var(--jp-code-line-height);
   font-size: var(--jp-code-font-size);
   border: var(--jp-border-width) solid transparent;
@@ -93,7 +81,7 @@
 
 
 .jp-CellEditor {
-  border: var(--jp-border-width) solid var(--jp-private-cell-editor-border);
+  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
   border-radius: 0px;
-  background: var(--jp-private-cell-editor-background);
+  background: var(--jp-cell-editor-background);
 }

src/cells/widget.ts

@@ -846,7 +846,7 @@ class InputAreaWidget extends Widget {
     if (value === 'null') {
       value = ' ';
     }
-    let text = `In [${value || ' '}]:`;
+    let text = `In[${value || ' '}]:`;
     this._prompt.node.textContent = text;
   }
 

src/default-theme/variables.css

@@ -138,4 +138,21 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-info-color2: var(--md-cyan-300);
   --jp-info-color3: var(--md-cyan-100);
 
+  /* Cell specific styles */
+
+  --jp-cell-editor-background: #f7f7f7;
+  --jp-cell-editor-border-color: #cfcfcf;
+  --jp-cell-prompt-width: 90px;
+  --jp-cell-prompt-font-family: var(--jp-ui-font-family);
+  --jp-cell-prompt-letter-spacing: 3px;
+  --jp-cell-prompt-opacity: 0.5;
+  --jp-cell-inprompt-font-color: var(--md-blue-900);
+  --jp-cell-outprompt-font-color: var(--md-orange-900);
+  --jp-cell-padding: 5px;
+
+  /* Notebook specific styles */
+
+  --jp-notebook-padding: 10px;
+  --jp-notebook-cell-border-color: #ababab;
+
 }

src/notebook/index.css

@@ -9,15 +9,12 @@
 
 
 :root {
-  --jp-private-notebook-padding: 10px;
-  --jp-private-notebook-dragImage-width: 90px;
+  --jp-private-notebook-dragImage-width: var(--jp-cell-prompt-width);
   --jp-private-notebook-dragImage-height: 39px;
   --jp-private-notebook-dragImage-circleRadius: 20px;
   --jp-private-notebook-selected-color: var(--md-blue-400);
   --jp-private-notebook-multiselected-color: var(--md-blue-50);
   --jp-private-notebook-active-color: var(--md-green-400);
-  --jp-private-notebook-cell-border-color: #ABABAB;
-  --jp-private-notebook-left-border-width: 5px;
 }
 
 /*-----------------------------------------------------------------------------
@@ -34,10 +31,10 @@
 
 
 .jp-Notebook {
-  padding-left: var(--jp-private-notebook-padding);
-  padding-right: var(--jp-private-notebook-padding);
-  padding-top: var(--jp-private-notebook-padding);
-  padding-bottom: calc( 4 * var(--jp-private-notebook-padding) );
+  padding-left: var(--jp-notebook-padding);
+  padding-right: var(--jp-notebook-padding);
+  padding-top: var(--jp-notebook-padding);
+  padding-bottom: calc( 4 * var(--jp-notebook-padding) );
   min-width: 50px;
   min-height: 50px;
   outline: none;
@@ -53,13 +50,14 @@
 }
 
 
+
 .jp-Notebook .jp-Cell.jp-Notebook-cell {
   overflow: visible
 }
 
 
 .jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active.jp-mod-selected {
-  border-color: var(--jp-private-notebook-cell-border-color);
+  border-color: var(--jp-notebook-cell-border-color);
 }
 
 
@@ -133,7 +131,7 @@
   position: absolute;
   width: var(--jp-private-notebook-dragImage-width);
   height: var(--jp-private-notebook-dragImage-height);
-  border: var(--jp-border-width) solid var(--jp-private-notebook-cell-border-color);
+  border: var(--jp-border-width) solid var(--jp-notebook-cell-border-color);
   background: var(--jp-layout-color1);
   overflow: visible;
 }
@@ -185,7 +183,7 @@
 
 
 .jp-ActiveCellTool {
-  padding: var(--jp-private-notebook-padding);
+  padding: var(--jp-notebook-padding);
 }
 
 

src/outputarea/index.css

@@ -8,12 +8,6 @@
 |----------------------------------------------------------------------------*/
 
 
-:root {
-  --jp-private-outputarea-prompt-color: #D84315;
-  --jp-private-outputarea-prompt-width: 90px;
-}
-
-
 /*-----------------------------------------------------------------------------
 | Main OutputArea
 | OutputArea has a list of Outputs
@@ -65,16 +59,18 @@
 
 
 .jp-Output-prompt {
-  color: var(--jp-private-outputarea-prompt-color);
-  font-family: var(--jp-code-font-family);
+  color: var(--jp-cell-outprompt-font-color);
+  font-family: var(  --jp-cell-prompt-font-family);
   text-align: right;
   vertical-align: middle;
   padding: var(--jp-code-padding);
   font-size: var(--jp-code-font-size);
+  letter-spacing: var(--jp-cell-prompt-letter-spacing);
   line-height: var(--jp-code-line-height);
   border: var(--jp-border-width) solid transparent;
-  flex: 0 0 var(--jp-private-outputarea-prompt-width);
+  flex: 0 0 var(--jp-cell-prompt-width);
   box-sizing: border-box;
+  opacity: var(--jp-cell-prompt-opacity);
 }