More iterations on prompt design.

packages/cells/src/inputarea.ts

@@ -317,7 +317,7 @@ class InputPrompt extends Widget implements IInputPrompt {
     if (value === null) {
       this.node.textContent = ' ';
     } else {
-        this.node.textContent = `[${value || ' '}]:`;
+        this.node.textContent = `In [${value || ' '}]:`;
     }
   }
 

packages/cells/src/widget.ts

@@ -562,7 +562,7 @@ class CodeCell extends Cell {
   protected onStateChanged(model: ICellModel, args: IChangedArgs<any>): void {
     switch (args.name) {
     case 'executionCount':
-      this.setPrompt(`${(model as ICodeCellModel).executionCount} || ''`);
+      this.setPrompt(`${(model as ICodeCellModel).executionCount || ''}`);
       break;
     default:
       break;

packages/notebook/style/index.css

@@ -98,10 +98,12 @@
 
 .jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-InputPrompt {
   opacity: var(--jp-cell-prompt-opacity-not-active);
+  color: var(--jp-cell-prompt-font-color-not-active);
 }
 
 .jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-OutputPrompt {
   opacity: var(--jp-cell-prompt-opacity-not-active);
+  color: var(--jp-cell-prompt-font-color-not-active);
 }
 
 .jp-Notebook .jp-Cell.jp-mod-active .jp-Cell-inputCollapser,

packages/theming/style/variables-light.css

@@ -152,13 +152,18 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-cell-editor-border-color: #cfcfcf;
   --jp-cell-editor-background-edit: var(--jp-ui-layout-color1);
   --jp-cell-editor-border-color-edit: var(--jp-brand-color1);
-  --jp-cell-prompt-width: 68px;
+  --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-inprompt-font-color: var(--md-grey-700);
-  --jp-cell-outprompt-font-color: var(--md-grey-700);
+  --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 */
+  --jp-cell-inprompt-font-color: #307FC1;
+  /* A custom blend of MD grey and orange 600
+   * https://meyerweb.com/eric/tools/color-blend/#546E7A:F4511E:5:hex */
+  --jp-cell-outprompt-font-color: #BF5B3D;
 
   /* Notebook specific styles */