Standardized styling for input cells, inputareas, and select nodes. Refactored the variables to be for more than just cells. Modified the layout colors for the dark theme to be a little more subtle than bright.

packages/apputils/style/commandpalette.css

@@ -40,7 +40,7 @@
   overflow: overlay;
   padding: 0px 8px;
   border: 1px solid var(--jp-border-color0);
-  background-color: var(--jp-input-background-color);
+  background-color: var(--jp-input-background-color-active);
   height: 30px;
 }
 

packages/apputils/style/styling.css

@@ -62,8 +62,9 @@ button.jp-mod-styled:focus {
 
 
 .jp-select-wrapper.jp-mod-focused select.jp-mod-styled {
-  border: var(--jp-border-width) solid var(--md-blue-500);
-  box-shadow: inset 0 0 4px var(--md-blue-300);
+  border: var(--jp-border-width) solid var(--jp-input-border-color-active);
+  box-shadow: var(--jp-input-box-shadow);
+  background-color: var(--jp-input-background-color-active);
 }
 
 
@@ -81,7 +82,7 @@ select.jp-mod-styled {
   height: 32px;
   width: 100%;
   font-size: var(--jp-ui-font-size2);
-  background: var(--jp-layout-color2);
+  background: var(--jp-input-background-color);
   color: var(--jp-ui-font-color0);
   padding-left: 8px;
   padding-right: 8px;
@@ -89,7 +90,7 @@ select.jp-mod-styled {
   background-repeat: no-repeat;
   background-position: 99% center;
   background-size: 18px;
-  border: var(--jp-border-width) solid var(--jp-border-color1);
+  border: var(--jp-border-width) solid var(--jp-input-border-color);
   border-radius: 0px;
   outline: none;
   appearance: none;

packages/cells/style/inputarea.css

@@ -22,9 +22,9 @@
 
 
 .jp-InputArea-editor {
-  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
+  border: var(--jp-border-width) solid var(--jp-input-border-color);
   border-radius: 0px;
-  background: var(--jp-cell-editor-background);
+  background: var(--jp-input-background-color);
 }
 
 

packages/codeeditor/style/index.css

@@ -15,9 +15,9 @@
 
 .jp-JSONEditor-host {
   flex: 1 1 auto;
-  border: var(--jp-border-width) solid var(--jp-border-color1);
+  border: var(--jp-border-width) solid var(--jp-input-border-color);
   border-radius: 0px;
-  background: var(--jp-layout-color2);
+  background: var(--jp-input-background-color);
   min-height: 50px;
   margin-left: 12px;
   margin-right: 12px;
@@ -78,3 +78,10 @@
 .jp-JSONEditor-host.jp-mod-collapsed {
   display: none;
 }
+
+
+.jp-JSONEditor-host.jp-mod-focused {
+  background-color: var(--jp-input-background-color-active);
+  border: 1px solid var(--jp-input-border-color-active);
+  box-shadow: var(--jp-input-box-shadow);
+}

packages/faq-extension/style/index.css

@@ -16,6 +16,7 @@
   min-height: var(--jp-toolbar-micro-height);
   border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
   box-shadow: var(--jp-toolbar-box-shadow);
+  background-color: var(--jp-layout-color1);
 }
 
 

packages/notebook/style/index.css

@@ -127,8 +127,8 @@
 /* Edit mode */
 
 .jp-Notebook.jp-mod-editMode .jp-Cell.jp-mod-active .jp-InputArea-editor {
-  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color-edit);
-  box-shadow: var(--jp-cell-editor-box-shadow);
+  border: var(--jp-border-width) solid var(--jp-input-border-color-active);
+  box-shadow: var(--jp-input-box-shadow);
   background-color: var(--jp-layout-color0);
 }
 
@@ -156,7 +156,7 @@
   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-cell-editor-border-color);
+  border: var(--jp-border-width) solid var(--jp-input-border-color);
   background: var(--jp-layout-color1);
   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-cell-editor-border-color);
-    background: var(--jp-cell-editor-background);
+    border: var(--jp-border-width) solid var(--jp-input-border-color);
+    background: var(--jp-input-background-color);
     color: var(--jp-content-font-color3);
     text-align: left;
     margin: 4px 4px 4px 0px;
@@ -202,7 +202,7 @@
   top: 8px;
   left: 8px;
   background: var(--jp-layout-color2);
-  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
+  border: var(--jp-border-width) solid var(--jp-input-border-color);
   box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.12);
 }
 
@@ -237,8 +237,8 @@
 
 .jp-ActiveCellTool .jp-InputArea-editor {
   flex: 1 1 auto;
-  background-color: var(--jp-cell-editor-background-edit);
-  border-color: var(--jp-cell-editor-border-color-edit);
+  background-color: var(--jp-layout-color0);
+  border-color: var(--jp-input-border-color-active);
 }
 
 

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

@@ -39,9 +39,9 @@ all of MD as it is not optimized for dense, information rich UIs.
    */
 
   --jp-border-width: 1px;
-  --jp-border-color0: var(--md-grey-700);
+  --jp-border-color0: var(--md-grey-800);
   --jp-border-color1: var(--md-grey-800);
-  --jp-border-color2: var(--md-grey-800);
+  --jp-border-color2: #323232; /* Midpoint between --md-grey-800 and --md-grey-900 */
   --jp-border-color3: var(--md-grey-900);
 
   /* UI Fonts
@@ -107,9 +107,9 @@ all of MD as it is not optimized for dense, information rich UIs.
 
   --jp-layout-color0: #111111;
   --jp-layout-color1: var(--md-grey-900);
-  --jp-layout-color2: var(--md-grey-800);
+  --jp-layout-color2: #323232; /* A midpoint between --md-grey-900 and --md-grey-800 */ 
   --jp-layout-color3: var(--md-grey-700);
-  --jp-layout-color4: var(--md-grey-600); /* A midpoint between --md-grey-900 and black */; 
+  --jp-layout-color4: var(--md-grey-600);
 
   /* Brand/accent */
 
@@ -188,7 +188,11 @@ all of MD as it is not optimized for dense, information rich UIs.
 
   /* Input field styles */
 
-  --jp-input-background-color: var(--jp-layout-color0);
+  --jp-input-box-shadow: inset 0 0 2px var(--md-blue-300);
+  --jp-input-background-color-active: var(--jp-layout-color0);
+  --jp-input-background-color: var(--jp-layout-color2);
+  --jp-input-border-color: var(--jp-border-color1);
+  --jp-input-border-color-active: var(--jp-brand-color1);
 
   /* Code mirror specific styles */
 

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

@@ -154,11 +154,6 @@ all of MD as it is not optimized for dense, information rich UIs.
   /* Cell specific styles */
 
   --jp-cell-padding: 5px;
-  --jp-cell-editor-background: var(--md-grey-50);
-  --jp-cell-editor-border-color: var(--md-grey-400);
-  --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300);
-  --jp-cell-editor-background-edit: var(--jp-layout-color1);
-  --jp-cell-editor-border-color-edit: var(--jp-brand-color1);
   --jp-cell-prompt-width: 100px;
   --jp-cell-prompt-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   --jp-cell-prompt-letter-spacing: 2.4px;
@@ -196,7 +191,11 @@ all of MD as it is not optimized for dense, information rich UIs.
 
   /* Input field styles */
 
-  --jp-input-background-color: var(--jp-layout-color0);
+  --jp-input-box-shadow: inset 0 0 2px var(--md-blue-300);
+  --jp-input-background-color-active: var(--jp-layout-color1);
+  --jp-input-background-color: var(--jp-layout-color2);
+  --jp-input-border-color: var(--jp-border-color1);
+  --jp-input-border-color-active: var(--jp-brand-color1);
 
    /* Code mirror specific styles */