updates for terminal fonts / colors (#375)

* updating fonts and colors

* use wavegreen for green

* cmdinput should use terminal colors

* adjust colors, bright up bright-white.  cmdinput use more term colors.

public/themes/default.css

@@ -1,16 +1,18 @@
 /* Copyright 2024, Command Line Inc.
    SPDX-License-Identifier: Apache-2.0 */
 
+@import url("./term-dark.css");
+
 :root {
     --fa-style-family: "Font Awesome 6 Sharp";
 
     /* these variables are overridden by user settings */
-    --termfontfamily: "JetBrains Mono", monospace;
+    --termfontfamily: "Hack";
-    --termfontsize: 12px;
+    --termfontsize: 13px;
-    --termlineheight: 15px;
+    --termlineheight: 18px;
-    --termpad: 7px; /* padding value (scaled to termfontsize) */
+    --termpad: 9px; /* padding value (scaled to termfontsize) */
-    --termfontsize-sm: 10px;
+    --termfontsize-sm: 11px;
-    --termlineheight-sm: 13px;
+    --termlineheight-sm: 15px;
 
     /* other fonts */
     --base-font-family: "Lato", sans-serif;
@@ -82,25 +84,6 @@
     --tab-pink: rgb(224, 86, 119);
     --tab-white: rgb(255, 255, 255);
 
-    /* term colors */
-    --term-black: #000000;
-    --term-red: #cc0000;
-    --term-green: #4e9a06;
-    --term-yellow: #c4a000;
-    --term-blue: #3465a4;
-    --term-magenta: #75507b;
-    --term-cyan: #06989a;
-    --term-white: #d3d7cf;
-    --term-bright-black: #555753;
-    --term-bright-red: #ef2929;
-    --term-bright-green: #58c142;
-    --term-bright-yellow: #fce94f;
-    --term-bright-blue: #32afff;
-    --term-bright-magenta: #ad7fa8;
-    --term-bright-cyan: #34e2e2;
-    --term-bright-white: #ffffff;
-    --term-gray: rgb(139, 145, 138); /* not an official terminal color */
-
     /* button colors */
     --button-text-color: rgb(255, 255, 255);
     --button-primary-bg-color: rgb(78, 154, 6);

public/themes/term-dark.css

@@ -0,0 +1,26 @@
+/* Copyright 2024, Command Line Inc.
+   SPDX-License-Identifier: Apache-2.0 */
+
+:root {
+    --term-black: #757575;
+    --term-red: #cc685c;
+    --term-green: #58c142;
+    --term-yellow: #cbca9b;
+    --term-blue: #85aacb;
+    --term-magenta: #cc72ca;
+    --term-cyan: #74a7cb;
+    --term-white: #c1c1c1;
+
+    --term-bright-black: #727272;
+    --term-bright-red: #cc9d97;
+    --term-bright-green: #8ad47b;
+    --term-bright-yellow: #cbcaaa;
+    --term-bright-blue: #9ab6cb;
+    --term-bright-magenta: #cc8ecb;
+    --term-bright-cyan: #b7b8cb;
+    --term-bright-white: #f0f0f0;
+
+    --term-gray: #8b918a;
+    --term-foreground: #c1c1c1;
+    --term-background: #000000;
+}

public/themes/term-default.css

@@ -0,0 +1,28 @@
+/* Copyright 2024, Command Line Inc.
+   SPDX-License-Identifier: Apache-2.0 */
+
+:root {
+    /* 
+     * term colors (16 + 2) form the base terminal theme 
+     * for consistency these colors should be used by plugins/applications
+     */
+    --term-black: #000000;
+    --term-red: #cc0000;
+    --term-green: #4e9a06;
+    --term-yellow: #c4a000;
+    --term-blue: #3465a4;
+    --term-magenta: #75507b;
+    --term-cyan: #06989a;
+    --term-white: #d3d7cf;
+    --term-bright-black: #555753;
+    --term-bright-red: #ef2929;
+    --term-bright-green: #58c142;
+    --term-bright-yellow: #fce94f;
+    --term-bright-blue: #32afff;
+    --term-bright-magenta: #ad7fa8;
+    --term-bright-cyan: #34e2e2;
+    --term-bright-white: #ffffff;
+    --term-gray: #8b918a; /* not an official terminal color */
+    --term-foreground: #d3d7cf;
+    --term-background: #000000;
+}

src/app/app.less

@@ -10,6 +10,7 @@ body {
     line-height: normal;
     background-color: black;
     color: var(--app-text-color);
+    -webkit-font-smoothing: auto;
 }
 
 body {

src/app/appconst.ts

@@ -25,8 +25,8 @@ export const ProdServerEndpoint = "http://127.0.0.1:1619";
 export const ProdServerWsEndpoint = "ws://127.0.0.1:1623";
 export const DevServerEndpoint = "http://127.0.0.1:8090";
 export const DevServerWsEndpoint = "ws://127.0.0.1:8091";
-export const DefaultTermFontSize = 12;
+export const DefaultTermFontSize = 13;
-export const DefaultTermFontFamily = "JetBrains Mono";
+export const DefaultTermFontFamily = "Hack";
 export const DefaultTheme = "dark";
 export const MinFontSize = 8;
 export const MaxFontSize = 24;

src/app/common/prompt/prompt.less

@@ -18,18 +18,18 @@
     }
 
     .term-prompt-python {
-        color: var(--term-bright-magenta);
+        color: var(--term-magenta);
     }
 
     .term-prompt-remote {
         color: var(--term-bright-green);
 
         &.color-green {
-            color: var(--term-bright-green);
+            color: var(--term-green);
         }
 
         &.color-red {
-            color: var(--term-bright-red);
+            color: var(--term-red);
         }
 
         &.color-blue {
@@ -62,6 +62,6 @@
     }
 
     &.term-prompt-isroot .term-prompt-cwd {
-        color: var(--term-bright-red);
+        color: var(--term-red);
     }
 }

src/app/workspace/cmdinput/cmdinput.less

@@ -39,7 +39,7 @@
     .remote-status-warning {
         display: flex;
         flex-direction: row;
-        color: var(--cmdinput-warning-color);
+        color: var(--term-yellow);
         align-items: center;
 
         .button {
@@ -51,7 +51,7 @@
         position: absolute;
         top: 5px;
         right: 5px;
-        color: var(--app-text-color);
+        color: var(--term-foreground);
 
         padding: 5px;
         cursor: pointer;
@@ -66,7 +66,7 @@
     }
 
     .cmd-input-context {
-        color: #fff;
+        color: var(--term-bright-white);
         white-space: nowrap;
         display: flex;
         justify-content: space-between;
@@ -88,11 +88,11 @@
             height: 1em;
             margin: 0 0.5em;
             vertical-align: text-top;
-            fill: var(--app-text-color);
+            fill: var(--term-foreground);
         }
 
         .warning {
-            fill: var(--cmdinput-warning-color);
+            fill: var(--term-yellow);
         }
     }
 
@@ -307,7 +307,7 @@
             top: 5px;
             left: 0;
             background-color: var(--app-bg-color);
-            color: var(--cmdinput-title-color);
+            color: var(--term-blue);
             padding-bottom: 4px;
             display: flex;
             flex-direction: row;
@@ -391,7 +391,7 @@
             left: 0;
             font-size: calc(var(--termfontsize) + 2px);
             background-color: var(--app-bg-color);
-            color: var(--cmdinput-title-color);
+            color: var(--term-blue);
             padding-bottom: 4px;
             padding-left: calc(var(--termpad) * 2);
             display: flex;
@@ -434,7 +434,7 @@
 
             .info-comp {
                 min-width: 200px;
-                color: var(--app-text-color);
+                color: var(--term-foreground);
                 margin-right: 10px;
 
                 &.has-space {

src/index.ts

@@ -16,11 +16,7 @@ let VERSION = __WAVETERM_VERSION__;
 // @ts-ignore
 let BUILD = __WAVETERM_BUILD__;
 
-let initialFontFamily = getApi().getInitialTermFontFamily();
+loadFonts();
-if (initialFontFamily == null) {
-    initialFontFamily = "JetBrains Mono";
-}
-loadFonts(initialFontFamily);
 
 document.addEventListener("DOMContentLoaded", () => {
     let reactElem = React.createElement(App, null, null);

src/models/model.ts

@@ -1206,13 +1206,10 @@ class Model {
         }
         getApi().reregisterGlobalShortcut(shortcut);
         if (ffUpdated) {
-            // this also updates fontSize vars
+            document.documentElement.style.setProperty("--termfontfamily", '"' + newFontFamily + '"');
-            loadFonts(newFontFamily);
+            clearMonoFontCache();
-            document.fonts.ready.then(() => {
+            this.updateTermFontSizeVars(); // forces an update of css vars
-                clearMonoFontCache();
+            this.bumpRenderVersion();
-                this.updateTermFontSizeVars(); // forces an update of css vars
-                this.bumpRenderVersion();
-            });
         } else if (fsUpdated) {
             this.updateTermFontSizeVars();
         }

src/plugins/terminal/term.ts

@@ -39,8 +39,8 @@ type TermWrapOpts = {
 function getThemeFromCSSVars(): ITheme {
     let theme: ITheme = {};
     let rootStyle = getComputedStyle(document.documentElement);
-    theme.foreground = rootStyle.getPropertyValue("--term-white");
+    theme.foreground = rootStyle.getPropertyValue("--term-foreground");
-    theme.background = rootStyle.getPropertyValue("--term-black");
+    theme.background = rootStyle.getPropertyValue("--term-background");
     theme.black = rootStyle.getPropertyValue("--term-black");
     theme.red = rootStyle.getPropertyValue("--term-red");
     theme.green = rootStyle.getPropertyValue("--term-green");
@@ -116,6 +116,9 @@ class TermWrap {
             cols: this.termSize.cols,
             fontSize: opts.fontSize,
             fontFamily: opts.fontFamily,
+            drawBoldTextInBrightColors: false,
+            fontWeight: "normal",
+            fontWeightBold: "bold",
             theme: theme,
         });
         this.terminal.loadAddon(

src/util/fontutil.ts

@@ -99,14 +99,11 @@ function loadBaseFonts() {
     mmFont.load();
 }
 
-function loadFonts(termFont: string) {
+function loadFonts() {
     loadBaseFonts();
     loadLatoFont();
     loadJetBrainsMonoFont();
-    if (termFont == "Hack") {
+    loadHackFont();
-        loadHackFont();
-    }
-    document.documentElement.style.setProperty("--termfontfamily", '"' + termFont + '"');
 }
 
 export { loadFonts };