Merge pull request #2892 from ellisonbg/cell-background

Lots of minor style fixes across the entire app

packages/cells/style/inputarea.css

@@ -22,9 +22,10 @@
 
 
 .jp-InputArea-editor {
-  border: var(--jp-border-width) solid var(--jp-input-border-color);
+  /* This is the non-active, default styling */
+  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
   border-radius: 0px;
-  background: var(--jp-input-background-color);
+  background: var(--jp-cell-editor-background);
 }
 
 

packages/codemirror/src/editor.ts

@@ -89,6 +89,7 @@ class CodeMirrorEditor implements CodeEditor.IEditor {
   constructor(options: CodeMirrorEditor.IOptions) {
     let host = this.host = options.host;
     host.classList.add(EDITOR_CLASS);
+    host.classList.add('jp-Editor');
     host.addEventListener('focus', this, true);
     host.addEventListener('scroll', this, true);
 

packages/codemirror/style/index.css

@@ -36,21 +36,6 @@
 }
 
 
-.CodeMirror.cm-s-jupyter {
-  background: var(--jp-layout-color0);
-}
-
-
-.CodeMirror.cm-s-jupyter pre {
-  color: var(--jp-mirror-editor-pre-color);
-}
-
-
-.jp-OutputArea-output pre {
-  color: var(--jp-mirror-editor-pre-color);
-}
-
-
 /* This causes https://github.com/jupyter/jupyterlab/issues/522 */
 /* May not cause it not because we changed it! */
 .CodeMirror-lines {
@@ -74,12 +59,11 @@
 
 
 .CodeMirror-cursor {
-  border-left: 1px solid var(--jp-code-cursor-color);
+  border-left: 1px solid var(--jp-editor-cursor-color);
 }
 
 
 .CodeMirror.jp-mod-readOnly .CodeMirror-cursor {
-  border-left: 1px solid var(--jp-code-cursor-color);
   display: none;
 }
 
@@ -106,12 +90,12 @@
 
 
 .CodeMirror-focused .CodeMirror-selected {
-  background-color: var(--jp-mirror-editor-selected-focus-state);
+  background-color: var(--jp-editor-selected-focused-background);
 }
 
 
 .CodeMirror-selected {
-  background-color: var(--jp-mirror-editor-selected-state)
+  background-color: var(--jp-editor-selected-background)
 }
 
 
@@ -131,13 +115,28 @@
 }
 
 
-/*
-  Here is our jupyter theme for CodeMirror syntax highlighting
-  This is used in our marked.js syntax highlighting and CodeMirror itself
-  The string "jupyter" is set in ../codemirror/widget.DEFAULT_CODEMIRROR_THEME
-  This came from the classic notebook, which came form highlight.js/GitHub
-*/
+/**
+ * Here is our jupyter theme for CodeMirror syntax highlighting
+ * This is used in our marked.js syntax highlighting and CodeMirror itself
+ * The string "jupyter" is set in ../codemirror/widget.DEFAULT_CODEMIRROR_THEME
+ * This came from the classic notebook, which came form highlight.js/GitHub
+ */
+
+
+/**
+ * CodeMirror themes are handling the background/color in this way. This works
+ * fine for CodeMirror editors outside the notebook, but the notebook styles
+ * these things differently.
+ */
+.CodeMirror.cm-s-jupyter {
+  background: var(--jp-layout-color0);
+  color: var(--jp-content-font-color1);
+}
 
+/* In the notebook, we want this styling to be handled by its container */
+.jp-CodeConsole .CodeMirror.cm-s-jupyter, .jp-Notebook .CodeMirror.cm-s-jupyter {
+  background: transparent;
+}
 
 .cm-s-jupyter span.cm-keyword      { color: var(--jp-mirror-editor-keyword-color); font-weight: bold; }
 .cm-s-jupyter span.cm-atom         { color: var(--jp-mirror-editor-atom-color); }

packages/completer/style/index.css

@@ -13,6 +13,7 @@
 
 .jp-Completer {
   background: var(--jp-layout-color1);
+  color: var(--jp-content-font-color1);
   border: var(--jp-border-width) solid var(--jp-border-color1);
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
   list-style-type: none;

packages/notebook/style/index.css

@@ -127,9 +127,9 @@
 /* Edit mode */
 
 .jp-Notebook.jp-mod-editMode .jp-Cell.jp-mod-active .jp-InputArea-editor {
-  border: var(--jp-border-width) solid var(--jp-input-border-color-active);
+  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color-active);
   box-shadow: var(--jp-input-box-shadow);
-  background-color: var(--jp-layout-color0);
+  background-color: var(--jp-cell-editor-background-active);
 }
 
 
@@ -156,8 +156,8 @@
   flex-direction: row;
   width: var(--jp-private-notebook-dragImage-width);
   height: var(--jp-private-notebook-dragImage-height);
-  border: var(--jp-border-width) solid var(--jp-input-border-color);
-  background: var(--jp-layout-color1);
+  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
+  background: var(--jp-cell-editor-background);
   overflow: visible;
 }
 
@@ -174,8 +174,8 @@
     font-family: var(--jp-code-font-family);
     line-height: var(--jp-code-line-height);
     padding: var(--jp-code-padding);
-    border: var(--jp-border-width) solid var(--jp-input-border-color);
-    background: var(--jp-input-background-color);
+    border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
+    background: var(--jp-cell-editor-background-color);
     color: var(--jp-content-font-color3);
     text-align: left;
     margin: 4px 4px 4px 0px;
@@ -238,9 +238,9 @@
 
 .jp-ActiveCellTool .jp-InputArea-editor {
   flex: 1 1 auto;
-  background-color: var(--jp-layout-color0);
-  border-color: var(--jp-input-border-color-active);
-  box-shadow: var(--jp-input-box-shadow);
+  background-color: var(--jp-cell-editor-background-active);
+  border-color: var(--jp-cell-editor-border-color-active);
+  box-shadow: var(--jp-cell-editor-box-shadow);
 }
 
 

packages/rendermime/style/index.css

@@ -19,7 +19,7 @@
 
 .jp-RenderedText pre,
 .jp-RenderedHTMLCommon pre {
-  color: var(--jp-ui-font-color0);
+  color: var(--jp-content-font-color1);
   border: none;
   margin: 0px;
   padding: 0px;

packages/theme-dark-extension/style/variables.css

@@ -98,7 +98,6 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-code-padding: 5px;
   --jp-code-font-family: monospace;
 
-
   /* Layout
 
   The following are the main layout colors use in JupyterLab. In a light
@@ -145,27 +144,25 @@ 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-padding: 5px;
   --jp-cell-editor-background: var(--jp-layout-color1);
+  --jp-cell-editor-border-color: var(--md-grey-700);
   --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300);
-  --jp-cell-editor-border-color: var(--md-grey-600);
-  --jp-cell-editor-background-edit: var(--jp-layout-color0);
-  --jp-cell-editor-border-color-edit: var(--jp-brand-color1);
-  --jp-cell-prompt-width: 68px;
+  --jp-cell-editor-background-active: var(--jp-layout-color0);
+  --jp-cell-editor-border-color-active: var(--jp-brand-color1);
+  --jp-cell-padding: 5px;
+  --jp-cell-prompt-width: 100px;
   --jp-cell-prompt-font-family: 'Roboto Mono', monospace;
   --jp-cell-prompt-letter-spacing: 0px;
   --jp-cell-prompt-opacity: 1.0;
-  --jp-cell-prompt-opacity-not-active: 0.4;
-  --jp-cell-prompt-font-color-not-active: var(--md-grey-50);
+  --jp-cell-prompt-opacity-not-active: 0.5;
+  --jp-cell-prompt-font-color-not-active: var(--md-grey-300);
   --jp-cell-inprompt-font-color: var(--md-grey-50);
-  --jp-cell-outprompt-font-color: var(--md-grey-700);
+  --jp-cell-outprompt-font-color: var(--md-grey-50);
 
   /* Notebook specific styles */
 
-  --jp-code-cursor-color: var(--jp-ui-font-color0);
   --jp-notebook-padding: 10px;
   --jp-notebook-scroll-padding: 100px;
   --jp-notebook-select-background-color: var(--jp-layout-color1);
@@ -182,7 +179,7 @@ all of MD as it is not optimized for dense, information rich UIs.
 
   /* Console specific styles */
 
-  --jp-console-background: var(--jp-layout-color0);
+  --jp-console-background: var(--jp-layout-color1);
 
   /* Toolbar specific styles */
 
@@ -202,18 +199,19 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-input-border-color: var(--jp-border-color1);
   --jp-input-border-color-active: var(--jp-brand-color1);
 
-  /* Code mirror specific styles */
+  /* General editor styles */
+
+  --jp-editor-selected-background: var(--jp-layout-color2);
+  --jp-editor-selected-focused-background: rgba(33,150,243,.24);
+  --jp-editor-cursor-color: var(--jp-ui-font-color0);
 
-  --jp-mirror-editor-selected-state: var(--jp-layout-color2);
-  --jp-mirror-editor-selected-focus-state: rgba(33,150,243,.24);
-  --jp-mirror-editor-pre-color: var(--md-grey-400);
-  --jp-mirror-editor-gutter-border: none;
-  --jp-mirror-editor-gutter-background-color: var(--jp-layout-color2);
+  /* Code mirror specific styles */
+ 
   --jp-mirror-editor-keyword-color: var(--md-green-500);
   --jp-mirror-editor-atom-color: var(--md-blue-300);
   --jp-mirror-editor-number-color: var(--md-green-400);
   --jp-mirror-editor-def-color: var(--md-blue-600);
-  --jp-mirror-span-variable-color: var(--md-grey-300);
+  --jp-mirror-editor-variable-color: var(--md-grey-300);
   --jp-mirror-editor-variable-2-color: var(--md-grey-500);
   --jp-mirror-editor-variable-3-color: var(--md-grey-600);
   --jp-mirror-editor-punctuation-color: var(--md-blue-400);

packages/theme-light-extension/style/variables.css

@@ -98,7 +98,6 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-code-padding: 5px;
   --jp-code-font-family: monospace;
 
-
   /* Layout
 
   The following are the main layout colors use in JupyterLab. In a light
@@ -153,12 +152,17 @@ all of MD as it is not optimized for dense, information rich UIs.
 
   /* Cell specific styles */
 
+  --jp-cell-editor-background: var(--md-grey-100);	
+  --jp-cell-editor-border-color: var(--md-grey-300);
+  --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300);
+  --jp-cell-editor-background-active: var(--jp-layout-color0);
+  --jp-cell-editor-border-color-active: var(--jp-brand-color1);
   --jp-cell-padding: 5px;
   --jp-cell-prompt-width: 100px;
-  --jp-cell-prompt-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --jp-cell-prompt-letter-spacing: 2.4px;
+  --jp-cell-prompt-font-family: 'Roboto Mono', monospace;
+  --jp-cell-prompt-letter-spacing: 0px;
   --jp-cell-prompt-opacity: 1.0;
-  --jp-cell-prompt-opacity-not-active: 0.56;
+  --jp-cell-prompt-opacity-not-active: 0.5;
   --jp-cell-prompt-font-color-not-active: var(--md-grey-700);
   /* A custom blend of MD grey and blue 600
    * See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */
@@ -169,7 +173,6 @@ all of MD as it is not optimized for dense, information rich UIs.
 
   /* Notebook specific styles */
 
-  --jp-code-cursor-color: var(--jp-ui-font-color0);
   --jp-notebook-padding: 10px;
   --jp-notebook-scroll-padding: 100px;
   --jp-notebook-multiselected-color: var(--md-blue-50);
@@ -206,13 +209,14 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-input-border-color: var(--jp-border-color1);
   --jp-input-border-color-active: var(--jp-brand-color1);
 
-   /* Code mirror specific styles */
+  /* General editor styles */
+
+  --jp-editor-selected-background: #d9d9d9;
+  --jp-editor-selected-focused-background: #d7d4f0;
+  --jp-editor-cursor-color: var(--jp-ui-font-color0);
+
+  /* Code mirror specific styles */
 
-  --jp-mirror-editor-selected-state: #d9d9d9;
-  --jp-mirror-editor-selected-focus-state: #d7d4f0;
-  --jp-mirror-editor-pre-color: black;
-  --jp-mirror-editor-gutter-border: 1px solid #ddd;
-  --jp-mirror-editor-gutter-background-color: #f7f7f7;
   --jp-mirror-editor-keyword-color: #008000;
   --jp-mirror-editor-atom-color: #88F;
   --jp-mirror-editor-number-color: #080;