From ab21591314af3860031a3610390d44618931bdd3 Mon Sep 17 00:00:00 2001 From: Mike Sawka Date: Mon, 4 Mar 2024 16:27:34 -0800 Subject: [PATCH] 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 | 33 ++++++------------------ public/themes/term-dark.css | 26 +++++++++++++++++++ public/themes/term-default.css | 28 ++++++++++++++++++++ src/app/app.less | 1 + src/app/appconst.ts | 4 +-- src/app/common/prompt/prompt.less | 8 +++--- src/app/workspace/cmdinput/cmdinput.less | 16 ++++++------ src/index.ts | 6 +---- src/models/model.ts | 11 +++----- src/plugins/terminal/term.ts | 7 +++-- src/util/fontutil.ts | 7 ++--- 11 files changed, 89 insertions(+), 58 deletions(-) create mode 100644 public/themes/term-dark.css create mode 100644 public/themes/term-default.css diff --git a/public/themes/default.css b/public/themes/default.css index 32b6536c..29b13547 100644 --- a/public/themes/default.css +++ b/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; - --termfontsize: 12px; - --termlineheight: 15px; - --termpad: 7px; /* padding value (scaled to termfontsize) */ - --termfontsize-sm: 10px; - --termlineheight-sm: 13px; + --termfontfamily: "Hack"; + --termfontsize: 13px; + --termlineheight: 18px; + --termpad: 9px; /* padding value (scaled to termfontsize) */ + --termfontsize-sm: 11px; + --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); diff --git a/public/themes/term-dark.css b/public/themes/term-dark.css new file mode 100644 index 00000000..e00e9643 --- /dev/null +++ b/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; +} diff --git a/public/themes/term-default.css b/public/themes/term-default.css new file mode 100644 index 00000000..96ea6d5f --- /dev/null +++ b/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; +} diff --git a/src/app/app.less b/src/app/app.less index e32cf69d..fb3319ec 100644 --- a/src/app/app.less +++ b/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 { diff --git a/src/app/appconst.ts b/src/app/appconst.ts index 6f93da9b..aedb4a53 100644 --- a/src/app/appconst.ts +++ b/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 DefaultTermFontFamily = "JetBrains Mono"; +export const DefaultTermFontSize = 13; +export const DefaultTermFontFamily = "Hack"; export const DefaultTheme = "dark"; export const MinFontSize = 8; export const MaxFontSize = 24; diff --git a/src/app/common/prompt/prompt.less b/src/app/common/prompt/prompt.less index f596dfb3..824a2ac0 100644 --- a/src/app/common/prompt/prompt.less +++ b/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); } } diff --git a/src/app/workspace/cmdinput/cmdinput.less b/src/app/workspace/cmdinput/cmdinput.less index c0bfbd7e..2f24d349 100644 --- a/src/app/workspace/cmdinput/cmdinput.less +++ b/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 { diff --git a/src/index.ts b/src/index.ts index 1119e183..1443eed2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -16,11 +16,7 @@ let VERSION = __WAVETERM_VERSION__; // @ts-ignore let BUILD = __WAVETERM_BUILD__; -let initialFontFamily = getApi().getInitialTermFontFamily(); -if (initialFontFamily == null) { - initialFontFamily = "JetBrains Mono"; -} -loadFonts(initialFontFamily); +loadFonts(); document.addEventListener("DOMContentLoaded", () => { let reactElem = React.createElement(App, null, null); diff --git a/src/models/model.ts b/src/models/model.ts index 12a02026..886fada5 100644 --- a/src/models/model.ts +++ b/src/models/model.ts @@ -1206,13 +1206,10 @@ class Model { } getApi().reregisterGlobalShortcut(shortcut); if (ffUpdated) { - // this also updates fontSize vars - loadFonts(newFontFamily); - document.fonts.ready.then(() => { - clearMonoFontCache(); - this.updateTermFontSizeVars(); // forces an update of css vars - this.bumpRenderVersion(); - }); + document.documentElement.style.setProperty("--termfontfamily", '"' + newFontFamily + '"'); + clearMonoFontCache(); + this.updateTermFontSizeVars(); // forces an update of css vars + this.bumpRenderVersion(); } else if (fsUpdated) { this.updateTermFontSizeVars(); } diff --git a/src/plugins/terminal/term.ts b/src/plugins/terminal/term.ts index f39417d9..38440f96 100644 --- a/src/plugins/terminal/term.ts +++ b/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.background = rootStyle.getPropertyValue("--term-black"); + theme.foreground = rootStyle.getPropertyValue("--term-foreground"); + 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( diff --git a/src/util/fontutil.ts b/src/util/fontutil.ts index 38171a1a..ea91e85f 100644 --- a/src/util/fontutil.ts +++ b/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(); - } - document.documentElement.style.setProperty("--termfontfamily", '"' + termFont + '"'); + loadHackFont(); } export { loadFonts };