output: improve output display

The following commit performs the following updates:
- improves the display of the output content (output-view).
- refactors the ouput-view to make use of css variables.
- renames the `--theia-termina-font-family` variable.

Signed-off-by: vince-fugnitto <vincent.fugnitto@ericsson.com>

packages/core/src/browser/style/variables-bright.useable.css

@@ -50,7 +50,7 @@ is not optimized for dense, information rich UIs.
   --theia-code-line-height: 17px;
   --theia-code-padding: 5px;
   --theia-code-font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
-  --theia-terminal-font-family: monospace;
+  --theia-monospace-font-family: monospace;
   --theia-ui-padding: 6px;
 
   /* Icons */
@@ -87,7 +87,7 @@ is not optimized for dense, information rich UIs.
 
   /* Statusbar */
   --theia-statusBar-font-size: 12px;
- 
+
   /* Opacity for disabled mod  */
   --theia-mod-disabled-opacity: 0.4;
 }

packages/core/src/browser/style/variables-dark.useable.css

@@ -50,7 +50,7 @@ is not optimized for dense, information rich UIs.
   --theia-code-line-height: 17px;
   --theia-code-padding: 5px;
   --theia-code-font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
-  --theia-terminal-font-family: monospace;
+  --theia-monospace-font-family: monospace;
   --theia-ui-padding: 6px;
 
   /* Icons */

packages/output/src/browser/output-widget.tsx

@@ -111,11 +111,6 @@ export class OutputWidget extends ReactWidget {
         let id = 0;
         const result = [];
 
-        const style: React.CSSProperties = {
-            whiteSpace: 'pre',
-            fontFamily: 'monospace',
-        };
-
         if (this.outputChannelManager.selectedChannel) {
             for (const outputChannelLine of this.outputChannelManager.selectedChannel.getLines()) {
                 const lines = outputChannelLine.text.split(/[\n\r]+/);
@@ -126,12 +121,12 @@ export class OutputWidget extends ReactWidget {
                     className = 'theia-output-warning';
                 }
                 for (const line of lines) {
-                    result.push(<div style={style} className={className} key={id++}>{line}</div>);
+                    result.push(<div className={`theia-output-lines ${className}`} key={id++}>{line}</div>);
                 }
             }
         }
         if (result.length === 0) {
-            result.push(<div style={style} key={id++}>{'<no output yet>'}</div>);
+            result.push(<div className={'theia-output-lines'} key={id++}>{'<no output yet>'}</div>);
         }
         return result;
     }

packages/output/src/browser/style/output.css

@@ -32,7 +32,7 @@
 #outputView #outputChannelList {
     line-height: var(--theia-content-line-height);
     font-size: var(--theia-ui-font-size1);
-    
+
     -webkit-appearance: none;
     -moz-appearance: none;
     background-position: calc(100% - 6px) 8px, calc(100% - 2px) 8px, 100% 0;
@@ -60,6 +60,12 @@
     opacity: 1;
 }
 
+#outputView .theia-output-lines {
+    font-family: var( --theia-monospace-font-family);
+    font-weight: 600;
+    white-space: pre;
+}
+
 .output-tab-icon::before {
     content: "\f024"
 }