From 7a4e1593b4374569b1e475898ab0df7465cd9b4e Mon Sep 17 00:00:00 2001 From: Mike Sawka Date: Sat, 24 Feb 2024 13:13:57 -0800 Subject: [PATCH] fix default term font family and style integration (#331) * move root css vars to root.less (otherwise we get duplicate declarations). * make the default term font family consistent (fix reload loop bug) --- src/app/app.less | 14 +--- src/app/appconst.ts | 1 + src/app/common/themes/themes.less | 126 +--------------------------- src/app/root.less | 133 ++++++++++++++++++++++++++++++ src/models/model.ts | 4 +- src/util/util.ts | 5 +- 6 files changed, 144 insertions(+), 139 deletions(-) create mode 100644 src/app/root.less diff --git a/src/app/app.less b/src/app/app.less index 3cdf3051f..c7e28bf5b 100644 --- a/src/app/app.less +++ b/src/app/app.less @@ -1,14 +1,8 @@ +// Copyright 2024, Command Line Inc. +// SPDX-License-Identifier: Apache-2.0 + @import "./common/themes/themes.less"; - -: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) -} +@import "./root.less"; html, body { diff --git a/src/app/appconst.ts b/src/app/appconst.ts index d8b05e742..6e80ff10c 100644 --- a/src/app/appconst.ts +++ b/src/app/appconst.ts @@ -26,6 +26,7 @@ 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 MinFontSize = 8; export const MaxFontSize = 24; export const InputChunkSize = 500; diff --git a/src/app/common/themes/themes.less b/src/app/common/themes/themes.less index 8d90d1201..747c50501 100644 --- a/src/app/common/themes/themes.less +++ b/src/app/common/themes/themes.less @@ -1,3 +1,6 @@ +// Copyright 2024, Command Line Inc. +// SPDX-License-Identifier: Apache-2.0 + @base-color: #eceeec; @base-background: rgba(21, 23, 21, 1); @base-background-transparent: rgba(15, 17, 15, 0.7); @@ -81,126 +84,3 @@ @thin-border-color: #333; @main-content-bottom-background: #333; - -:root { - // primary - --primary-text-color: #eceeec; - --primary-icon-color: var(--primary-text-color); - --primary-border-color: #333; - --primary-background-color: rgba(21, 23, 21, 1); - --primary-background: rgba(21, 23, 21, 1); - --primary-accent-color: rgb(88, 193, 66); - --wave-green: rgb(88, 193, 66); - --wave-green-faded: rgba(88, 193, 66, 0.4); - --success-green: rgb(38, 97, 26); - --error-red: #cc0000; - --warning-yellow: #ffa500; - - --text-primary: #fff; - --text-secondary: #c3c8c2; - --text-caption: #8b918a; - - --base-background-transparent: rgba(21, 23, 21, 0.7); - --base-background-dev: rgba(21, 23, 48, 0.7); - --background-session: rgba(13, 13, 13, 0.85); - --background-session-components: rgba(48, 49, 48, 0.6); - --background-session-components-solid: rgb(33, 34, 33); - - --cmd-input-border-color: rgba(88, 193, 66, 0.8); - - --disabled-background: rgba(76, 81, 75, 1); - --disabled-color: #adadad; - --disabled-color-faded: rgba(173, 173, 173, 0.6); - --scrollbar-background: rgba(21, 23, 21, 1); - --scrollbar-thumb-background: rgb(134, 134, 134); - --button-background: rgb(38, 38, 38); - --button-disabled-background: rgb(30, 29, 29); - - --textarea-background: #2a2a2a; - - --status-connected: #46a758; - --status-connecting: #f5d90a; - --status-error: #e54d2e; - --status-disconnected: #c3c8c2; - - --term-text-error: #cc0000; - --term-error-color: rgb(204, 0, 0); - --term-text-yellow: #c4a000; - --term-black: #000000; - --term-text-red: #cc0000; - --term-green: #4e9a06; - --term-blue: #3465a4; - --term-cyan: #06989a; - --term-text-white: #d3d7cf; - --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; - - --button-bg-yellow: #e9be68; - --button-bg-red: #d06c68; - - --history-error-red: #d06c68; - --history-selected-error-red: #f79494; - - --tab-red: #e54d2e; - --tab-orange: #ef713b; - --tab-yellow: #e0b956; - --tab-green: #58c142; - --tab-mint: #4bffa9; - --tab-cyan: #4bdfff; - --tab-blue: #3971ff; - --tab-violet: #ba76ff; - --tab-pink: #e05677; - --tab-white: #ffffff; - - --soft-blue: #729fcf; - --active-menu-color: rgb(0, 71, 171); - - --app-accent-color: rgb(88, 193, 66); - --app-error-color: rgb(204, 0, 0); - --app-warning-color: rgb(255, 165, 0); - --app-scrollbar-thumb-color: rgb(134, 134, 134); - --app-text-color: rgb(236, 238, 236); - --app-border-color: #333; - --app-border: rgba(241, 246, 243, 0.08); - - --sidebar-dev-bg-color: #151730; - --sidebar-separator-color: rgba(241, 246, 243, 0.08); - --sidebar-workspace-active-color: rgba(241, 246, 243, 0.08); - --sidebar-separator-color: rgba(241, 246, 243, 0.08); - --sidebar-settings-color: #ffffff; - - --line-sidebar-message-text: #c4a000; - --line-sidebar-message-color: rgb(196, 160, 0); - - --line-background: rgba(21, 23, 21, 1); - --line-avatar-color: #eceeec; - --line-text-color: #f2f4f2; - --line-svg-fill-color: rgb(150, 152, 150); - --line-svg-hover-fill-color: #eceeec; - --line-selected-border-color: rgb(193, 195, 193); - --line-separator-color: rgb(126, 126, 126); - --line-meta-line1-color: rgb(150, 152, 150); - --line-error-color: #cc0000; - --line-warning-color: #ffa500; - --line-base-soft-blue-color: #729fcf; - --line-active-border-color: rgb(97, 158, 72); - --line-selected-bg-color: rgba(255, 255, 255, 0.1); - --line-selected-border-left-color: #ccc; - --line-selected-error-border-color: rgba(204, 0, 0, 0.8); - --line-selected-error-bg-color: rgb(19, 4, 3); - --line-error-bg-color: rgba(200, 0, 0, 0.1); - --line-error-border-left-color: --line-selected-error-border-color; - --line-simple-text-color: rgba(236, 238, 236, 0.6); - --line-meta-text-color: rgb(139, 145, 138); - --line-meta-user-color: rgba(140, 184, 232); - --line-svg-color: rgba(236, 238, 236, 0.6); - --line-svg-hover-color: rgba(236, 238, 236, 1); - --line-status-success-fill: rgb(88, 193, 66); - --line-status-error-fill: #cc0000; - --line-status-warning-fill: #ffa500; -} diff --git a/src/app/root.less b/src/app/root.less new file mode 100644 index 000000000..b2c51197f --- /dev/null +++ b/src/app/root.less @@ -0,0 +1,133 @@ +// Copyright 2024, Command Line Inc. +// SPDX-License-Identifier: Apache-2.0 + +: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) + + // primary + --primary-text-color: #eceeec; + --primary-icon-color: var(--primary-text-color); + --primary-border-color: #333; + --primary-background-color: rgba(21, 23, 21, 1); + --primary-background: rgba(21, 23, 21, 1); + --primary-accent-color: rgb(88, 193, 66); + --wave-green: rgb(88, 193, 66); + --wave-green-faded: rgba(88, 193, 66, 0.4); + --success-green: rgb(38, 97, 26); + --error-red: #cc0000; + --warning-yellow: #ffa500; + + --text-primary: #fff; + --text-secondary: #c3c8c2; + --text-caption: #8b918a; + + --base-background-transparent: rgba(21, 23, 21, 0.7); + --base-background-dev: rgba(21, 23, 48, 0.7); + --background-session: rgba(13, 13, 13, 0.85); + --background-session-components: rgba(48, 49, 48, 0.6); + --background-session-components-solid: rgb(33, 34, 33); + + --cmd-input-border-color: rgba(88, 193, 66, 0.8); + + --disabled-background: rgba(76, 81, 75, 1); + --disabled-color: #adadad; + --disabled-color-faded: rgba(173, 173, 173, 0.6); + --scrollbar-background: rgba(21, 23, 21, 1); + --scrollbar-thumb-background: rgb(134, 134, 134); + --button-background: rgb(38, 38, 38); + --button-disabled-background: rgb(30, 29, 29); + + --textarea-background: #2a2a2a; + + --status-connected: #46a758; + --status-connecting: #f5d90a; + --status-error: #e54d2e; + --status-disconnected: #c3c8c2; + + --term-text-error: #cc0000; + --term-error-color: rgb(204, 0, 0); + --term-text-yellow: #c4a000; + --term-black: #000000; + --term-text-red: #cc0000; + --term-green: #4e9a06; + --term-blue: #3465a4; + --term-cyan: #06989a; + --term-text-white: #d3d7cf; + --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; + + --button-bg-yellow: #e9be68; + --button-bg-red: #d06c68; + + --history-error-red: #d06c68; + --history-selected-error-red: #f79494; + + --tab-red: #e54d2e; + --tab-orange: #ef713b; + --tab-yellow: #e0b956; + --tab-green: #58c142; + --tab-mint: #4bffa9; + --tab-cyan: #4bdfff; + --tab-blue: #3971ff; + --tab-violet: #ba76ff; + --tab-pink: #e05677; + --tab-white: #ffffff; + + --soft-blue: #729fcf; + --active-menu-color: rgb(0, 71, 171); + + --app-accent-color: rgb(88, 193, 66); + --app-error-color: rgb(204, 0, 0); + --app-warning-color: rgb(255, 165, 0); + --app-scrollbar-thumb-color: rgb(134, 134, 134); + --app-text-color: rgb(236, 238, 236); + --app-border-color: #333; + --app-border: rgba(241, 246, 243, 0.08); + + --sidebar-dev-bg-color: #151730; + --sidebar-separator-color: rgba(241, 246, 243, 0.08); + --sidebar-workspace-active-color: rgba(241, 246, 243, 0.08); + --sidebar-separator-color: rgba(241, 246, 243, 0.08); + --sidebar-settings-color: #ffffff; + + --line-sidebar-message-text: #c4a000; + --line-sidebar-message-color: rgb(196, 160, 0); + + --line-background: rgba(21, 23, 21, 1); + --line-avatar-color: #eceeec; + --line-text-color: #f2f4f2; + --line-svg-fill-color: rgb(150, 152, 150); + --line-svg-hover-fill-color: #eceeec; + --line-selected-border-color: rgb(193, 195, 193); + --line-separator-color: rgb(126, 126, 126); + --line-meta-line1-color: rgb(150, 152, 150); + --line-error-color: #cc0000; + --line-warning-color: #ffa500; + --line-base-soft-blue-color: #729fcf; + --line-active-border-color: rgb(97, 158, 72); + --line-selected-bg-color: rgba(255, 255, 255, 0.1); + --line-selected-border-left-color: #ccc; + --line-selected-error-border-color: rgba(204, 0, 0, 0.8); + --line-selected-error-bg-color: rgb(19, 4, 3); + --line-error-bg-color: rgba(200, 0, 0, 0.1); + --line-error-border-left-color: --line-selected-error-border-color; + --line-simple-text-color: rgba(236, 238, 236, 0.6); + --line-meta-text-color: rgb(139, 145, 138); + --line-meta-user-color: rgba(140, 184, 232); + --line-svg-color: rgba(236, 238, 236, 0.6); + --line-svg-hover-color: rgba(236, 238, 236, 1); + --line-status-success-fill: rgb(88, 193, 66); + --line-status-error-fill: #cc0000; + --line-status-warning-fill: #ffa500; +} diff --git a/src/models/model.ts b/src/models/model.ts index 32ebbd106..435493a16 100644 --- a/src/models/model.ts +++ b/src/models/model.ts @@ -329,7 +329,7 @@ class Model { let cdata = this.clientData.get(); let ff = cdata?.feopts?.termfontfamily; if (ff == null) { - ff = "JetBrains Mono, monospace"; + ff = appconst.DefaultTermFontFamily; } return ff; } @@ -1143,7 +1143,7 @@ class Model { setClientData(clientData: ClientDataType) { let newFontFamily = clientData?.feopts?.termfontfamily; if (newFontFamily == null) { - newFontFamily = "JetBrains Mono"; + newFontFamily = appconst.DefaultTermFontFamily; } let newFontSize = clientData?.feopts?.termfontsize; if (newFontSize == null) { diff --git a/src/util/util.ts b/src/util/util.ts index 33e2a863e..c459f5133 100644 --- a/src/util/util.ts +++ b/src/util/util.ts @@ -334,10 +334,7 @@ function loadFonts(termFont: string) { if (termFont == "Hack") { loadHackFont(); } - document.documentElement.style.setProperty( - "--termfontfamily", - '"' + termFont + '"' + ', "JetBrains Mono", monospace' - ); + document.documentElement.style.setProperty("--termfontfamily", '"' + termFont + '"'); } const DOW_STRS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];