diff --git a/public/themes/default.css b/public/themes/default.css index 29b13547..213a7ce8 100644 --- a/public/themes/default.css +++ b/public/themes/default.css @@ -14,10 +14,8 @@ --termfontsize-sm: 11px; --termlineheight-sm: 15px; - /* other fonts */ - --base-font-family: "Lato", sans-serif; - --base-font-size: 15px; - --base-font-weight: normal; + /* base fonts */ + --base-font: normal 15px "Lato", sans-serif; --title-font-size: 18px; --input-bg-color: #171717; @@ -56,6 +54,10 @@ --app-maincontent-bg-color: #333; --app-panel-bg-color: rgba(21, 23, 21, 1); --app-panel-bg-color-dev: rgb(21, 23, 48); + --app-icon-color: rgb(139, 145, 138); + --app-icon-hover-color: #fff; + + /* icon colors */ /* just for macos */ --app-border-radius-darwin: 10px; @@ -84,33 +86,41 @@ --tab-pink: rgb(224, 86, 119); --tab-white: rgb(255, 255, 255); + --form-element-border-color: rgba(241, 246, 243, 0.15); + --form-element-bg-color: var(--app-bg-color); + --form-element-text-color: #ffffff; + --form-element-label-color: rgb(195, 200, 194); + --form-element-primary-color: rgb(78, 154, 6); + --form-element-secondary-color: rgba(255, 255, 255, 0.09); + --form-element-error-color: rgb(204, 0, 0); + --form-element-icon-color: #fff; + /* button colors */ - --button-text-color: rgb(255, 255, 255); - --button-primary-bg-color: rgb(78, 154, 6); - --button-secondary-bg-color: rgba(255, 255, 255, 0.09); - --button-warning-bg-color: rgb(204, 0, 0); + /* todo: use --form-element-* directly in elements */ + --button-text-color: var(--form-element-text-color); + --button-primary-bg-color: var(--form-element-primary-color); + --button-secondary-bg-color: var(--form-element-secondary-color); + --button-warning-bg-color: var(--form-element-error-color); /* input colors */ - --checkbox-text-color: rgb(255, 255, 255); - --checkbox-bg-color: rgb(78, 154, 6); - --checkbox-check-color: rgb(255, 255, 255); + /* todo: use --form-element-* directly in elements */ + --checkbox-text-color: var(--form-element-text-color); + --checkbox-bg-color: var(--form-element-primary-color); + --checkbox-check-color: var(--form-element-text-color); /* dropdown colors */ - --dropdown-text-color: rgb(211, 215, 207); - --dropdown-error-color: rgb(229, 77, 46); - --dropdown-focus-color: rgb(78, 154, 6); - - /* textfield colors */ - --textfield-focused-border-color: rgb(78, 154, 6); - --textfield-error-border-color: rgb(229, 77, 46); - --textfield-label-color: rgb(195, 200, 194); - --textfield-text-color: rgb(255, 255, 255); - --textfield-bg-color: rgba(48, 49, 48, 0.6); + /* todo: use --form-element-* directly in elements */ + --dropdown-text-color: var(--form-element-text-color); + --dropdown-label-color: var(--form-element-label-color); + --dropdown-error-color: var(--form-element-error-color); + --dropdown-focus-color: var(--form-element-primary-color); + --dropdown-bg-color: var(--form-element-bg-color); + --dropdown-border-color: var(--form-element-border-color); /* toggle colors */ --toggle-bg-color: rgb(51, 51, 51); --toggle-thumb-color: rgb(211, 215, 207); - --toggle-checked-bg-color: rgb(78, 154, 6); + --toggle-checked-bg-color: var(--form-element-primary-color); /* cmdstrcode colors */ --cmdstrcode-bg-color: rgb(0, 0, 0); @@ -118,7 +128,7 @@ /* markdown colors */ --markdown-bg-color: rgb(35, 35, 35); - --markdown-outline-color: rgb(78, 154, 6); + --markdown-outline-color: var(--form-element-primary-color); /* status(remote) colors */ /* todo: all status colors must be unified */ @@ -181,6 +191,7 @@ --line-status-warning-fill: #ffa500; --line-actions-inactive-color: rgba(255, 255, 255, 0.5); --line-actions-active-color: rgba(255, 255, 255, 1); + --line-actions-bg-color: rgba(21, 23, 21, 1); /* view colors */ /* todo: bookmarks is a view, colors must be unified with --view* colors */ @@ -193,16 +204,22 @@ --view-error-color: rgb(204, 0, 0); --view-text-color: rgb(195, 200, 194); + /* table colors */ + --table-border-color: rgba(241, 246, 243, 0.15); + --table-thead-border-top-color: rgba(250, 250, 250, 0.1); + --table-thead-border-bottom-color: var(--table-border-color); + --table-thead-bg-color: rgba(250, 250, 250, 0.02); + --table-tr-border-bottom-color: rgba(241, 246, 243, 0.15); + --table-tr-hover-bg-color: rgba(255, 255, 255, 0.06); + /* session colors */ --session-bg-color: rgba(13, 13, 13, 0.85); /* cmdinput colors */ --cmdinput-textarea-bg-color: #171717; - --cmdinput-text-error-color: rgb(239, 41, 41); - --cmdinput-title-color: rgb(114, 159, 207); - --cmdinput-history-item-error-color: rgb(220, 119, 118); - --cmdinput-history-item-selected-error-color: rgb(247, 148, 148); - --cmdinput-warning-color: rgb(255, 165, 0); + --cmdinput-text-error-color: var(--term-red); + --cmdinput-history-item-error-color: var(--term-bright-red); + --cmdinput-history-item-selected-error-color: var(--term-bright-red); --cmdinput-button-bg-color: rgb(88, 193, 66); --cmdinput-comment-button-bg-color: rgb(57, 113, 255); --cmdinput-disabled-icon-color: rgb(76, 81, 75, 1); @@ -213,4 +230,12 @@ /* plugins colors */ --code-gutter-bg-color: rgba(88, 193, 66, 0.4); + + /* modals colors */ + --modal-bg-color: var(--app-bg-color); + --modal-header-bottom-border-color: rgba(241, 246, 243, 0.15); + + --logo-button-hover-bg-color: #1e1e1e; + + --xterm-viewport-border-color: rgba(241, 246, 243, 0.15); } diff --git a/public/themes/light.css b/public/themes/light.css index 25fb2eb9..0b6ecb01 100644 --- a/public/themes/light.css +++ b/public/themes/light.css @@ -2,15 +2,64 @@ SPDX-License-Identifier: Apache-2.0 */ @import "./default.css"; +@import "./term-light.css"; :root { - --app-bg-color: #ffffff; - --app-text-color: #000000; + --app-bg-color: #fefefe; + --app-text-color: #000; + --app-text-primary-color: rgb(0, 0, 0, 0.9); + --app-text-secondary-color: rgb(0, 0, 0, 0.7); + --app-border-color: rgb(139 145 138); + --app-panel-bg-color: #e0e0e0; + --app-panel-bg-color-dev: #e0e0e0; + --app-icon-color: rgb(80, 80, 80); + --app-icon-hover-color: rgb(100, 100, 100); - /* sidebar colors */ - --app-panel-bg-color: #cccccc; - --app-panel-bg-color-dev: #eeeeff; + /* tab color */ + --tab-white: rgb(0, 0, 0, 0.6); - --term-black: #ffffff; - --term-white: #000000; + /* button colors */ + --button-text-color: rgb(50, 50, 50); /* Dark gray for light theme */ + --button-secondary-bg-color: rgba(200, 200, 200, 0.3); /* Semi-transparent light gray */ + + /* view colors */ + --view-text-color: var(--app-text-color); + + /* table colors */ + --table-thead-border-top-color: rgba(0, 0, 0, 0.2); + --table-thead-border-bottom-color: rgba(0, 0, 0, 0.3); + --table-thead-bg-color: rgba(250, 250, 250, 0.15); + --table-tr-border-bottom-color: rgba(0, 0, 0, 0.15); + --table-tr-hover-bg-color: rgba(0, 0, 0, 0.15); + + /* form colors */ + --form-element-border-color: rgba(0, 0, 0, 0.3); + --form-element-bg-color: var(--app-bg-color); + --form-element-text-color: var(--app-text-color); + --form-element-label-color: rgba(0, 0, 0, 0.6); + --form-element-secondary-color: rgba(255, 255, 255, 0.09); + --form-element-icon-color: rgb(0, 0, 0, 0.6); + + /* modal colors */ + --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3); + + /* cmd input */ + --cmdinput-textarea-bg-color: rgba(0, 0, 0, 0.1); + --cmdinput-textarea-border-color: var(--form-element-border-color); + + /* scroll colors */ + --scrollbar-background-color: rgba(0, 0, 0, 0.3); + --scrollbar-thumb-color: rgba(0, 0, 0, 0.4); + --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.5); + + /* cmdstrcode colors */ + --cmdstrcode-bg-color: var(--term-black); + --cmdstrcode-text-color: var(--term-white); + + /* line color */ + --line-actions-bg-color: rgba(0, 0, 0, 0.4); + + --logo-button-hover-bg-color: #f0f0f0; + + --xterm-viewport-border-color: rgba(0, 0, 0, 0.3); } diff --git a/public/themes/term-dark.css b/public/themes/term-dark.css index e00e9643..3479ca99 100644 --- a/public/themes/term-dark.css +++ b/public/themes/term-dark.css @@ -4,7 +4,7 @@ :root { --term-black: #757575; --term-red: #cc685c; - --term-green: #58c142; + --term-green: #76c266; --term-yellow: #cbca9b; --term-blue: #85aacb; --term-magenta: #cc72ca; @@ -13,7 +13,7 @@ --term-bright-black: #727272; --term-bright-red: #cc9d97; - --term-bright-green: #8ad47b; + --term-bright-green: #a3dd97; --term-bright-yellow: #cbcaaa; --term-bright-blue: #9ab6cb; --term-bright-magenta: #cc8ecb; @@ -21,6 +21,7 @@ --term-bright-white: #f0f0f0; --term-gray: #8b918a; + --term-cmdtext: #f0f0f0; --term-foreground: #c1c1c1; --term-background: #000000; } diff --git a/public/themes/term-default.css b/public/themes/term-default.css index 96ea6d5f..f0108a0d 100644 --- a/public/themes/term-default.css +++ b/public/themes/term-default.css @@ -22,7 +22,9 @@ --term-bright-magenta: #ad7fa8; --term-bright-cyan: #34e2e2; --term-bright-white: #ffffff; + --term-gray: #8b918a; /* not an official terminal color */ + --term-cmdtext: #ffffff; --term-foreground: #d3d7cf; --term-background: #000000; } diff --git a/public/themes/term-light.css b/public/themes/term-light.css new file mode 100644 index 00000000..27c01dd0 --- /dev/null +++ b/public/themes/term-light.css @@ -0,0 +1,11 @@ +/* Copyright 2024, Command Line Inc. + SPDX-License-Identifier: Apache-2.0 */ + +:root { + /* term colors */ + --term-foreground: #000000; + --term-background: #fefefe; + --term-black: #fefefe; + --term-white: #000000; + --term-cmdtext: #000000; +} diff --git a/src/app/app.less b/src/app/app.less index fb3319ec..fdc18a3c 100644 --- a/src/app/app.less +++ b/src/app/app.less @@ -4,10 +4,7 @@ html, body { overflow: hidden; - font-family: var(--base-font-family); - font-size: var(--base-font-size); - font-weight: var(--base-font-weight); - line-height: normal; + font: var(--base-font); background-color: black; color: var(--app-text-color); -webkit-font-smoothing: auto; @@ -26,9 +23,7 @@ body .sidebar { body textarea, body textarea.textarea { overflow: hidden; - font-family: var(--base-font-family); - font-size: var(--base-font-size); - font-weight: var(--base-font-weight); + font: var(--base-font); line-height: 1.5; color: var(--app-text-color); background-color: var(--input-bg-color); @@ -40,9 +35,7 @@ body textarea.textarea { body input, body input.input { - font-family: var(--base-font-family); - font-size: var(--base-font-size); - font-weight: var(--base-font-weight); + font: var(--base-font); line-height: 1.5; color: var(--app-text-color); background-color: var(--input-bg-color); @@ -250,9 +243,6 @@ svg.icon { background: var(--button-secondary-bg-color); opacity: 0.5; cursor: initial; - &:hover { - box-shadow: none; - } } } .dropdown { @@ -326,7 +316,7 @@ a.a-block { pointer-events: all; &:hover { - background-color: #333; + background-color: var(--logo-button-hover-bg-color); border-radius: 4px; } } diff --git a/src/app/common/elements/button.less b/src/app/common/elements/button.less index be0677d8..0c4894ff 100644 --- a/src/app/common/elements/button.less +++ b/src/app/common/elements/button.less @@ -24,8 +24,6 @@ &.solid { color: var(--button-text-color); background: var(--button-primary-bg-color); - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5), - 0px 0px 0.5px 0px rgba(255, 255, 255, 0.8) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.6) inset; i { fill: var(--app-text-color); diff --git a/src/app/common/elements/dropdown.less b/src/app/common/elements/dropdown.less index 20aada2e..681a11a9 100644 --- a/src/app/common/elements/dropdown.less +++ b/src/app/common/elements/dropdown.less @@ -3,11 +3,9 @@ height: 44px; min-width: 150px; width: 100%; - border: 1px solid rgba(241, 246, 243, 0.15); + border: 1px solid var(--dropdown-border-color); border-radius: 6px; - background: rgba(255, 255, 255, 0.06); - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5), - 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset; + background: var(--dropdown-bg-color); &.no-label { height: 34px; @@ -19,7 +17,7 @@ top: 16px; font-size: 12.5px; transition: all 0.3s; - color: var(--dropdown-text-color); + color: var(--dropdown-label-color); line-height: 10px; &.float { @@ -71,8 +69,6 @@ &-highlighted, &:hover { background: rgba(241, 246, 243, 0.08); - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5), - 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset; } } @@ -113,11 +109,13 @@ align-items: flex-start; gap: 4px; border-radius: 6px; - background: #151715; - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 3px 8px 0px rgba(0, 0, 0, 0.35), 0px 0px 0.5px 0px #fff inset, - 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset; + border: 1px solid var(--dropdown-border-color); + background: var(--dropdown-bg-color); + // box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 3px 8px 0px rgba(0, 0, 0, 0.35), 0px 0px 0.5px 0px #fff inset, + // 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset; animation-fill-mode: forwards; z-index: 1000; + color: var(--dropdown-text-color); } .wave-dropdown-menu-close { diff --git a/src/app/common/elements/inputdecoration.less b/src/app/common/elements/inputdecoration.less index a3bc2e2a..085583e3 100644 --- a/src/app/common/elements/inputdecoration.less +++ b/src/app/common/elements/inputdecoration.less @@ -5,6 +5,7 @@ i { font-size: 13px; + color: var(--form-element-icon-color); } } diff --git a/src/app/common/elements/modal.less b/src/app/common/elements/modal.less index 6ae542cf..ece8f8ff 100644 --- a/src/app/common/elements/modal.less +++ b/src/app/common/elements/modal.less @@ -27,9 +27,8 @@ align-items: flex-start; gap: 16px; border-radius: 10px; - background: #151715; - box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35), 0px 10px 24px 0px rgba(0, 0, 0, 0.45), - 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset; + background: var(--modal-bg-color); + border: 1px solid var(--app-border-color); .wave-modal-content { display: flex; @@ -44,10 +43,10 @@ padding: 12px 14px 12px 20px; justify-content: space-between; line-height: 20px; - border-bottom: 1px solid rgba(250, 250, 250, 0.1); + border-bottom: 1px solid var(--modal-header-bottom-border-color); .wave-modal-title { - color: #eceeec; + color: var(--app-text-primary-color); font-size: var(--title-font-size); } diff --git a/src/app/common/elements/textfield.less b/src/app/common/elements/textfield.less index 7fca5899..66d78624 100644 --- a/src/app/common/elements/textfield.less +++ b/src/app/common/elements/textfield.less @@ -6,17 +6,15 @@ height: 44px; min-width: 412px; gap: 6px; - border: 1px solid rgba(241, 246, 243, 0.15); - background: rgba(255, 255, 255, 0.06); - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5), - 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset; + border: 1px solid var(--form-element-border-color); + background: var(--form-element-bg-color); &:hover { cursor: text; } &.focused { - border-color: var(--textfield-focused-border-color); + border-color: var(--form-element-primary-color); } &.disabled { @@ -24,7 +22,7 @@ } &.error { - border-color: var(--textfield-error-border-color); + border-color: var(--form-element-error-color); } &-inner { @@ -40,7 +38,7 @@ top: 16px; font-size: 12.5px; transition: all 0.3s; - color: var(--textfield-label-color); + color: var(--form-element-label-color); line-height: 10px; &.float { @@ -61,7 +59,7 @@ font-size: 16px; outline: none; background-color: transparent; - color: var(--textfield-text-color); + color: var(--form-element-text-color); line-height: 20px; &.offset-left { diff --git a/src/app/common/elements/tooltip.less b/src/app/common/elements/tooltip.less index becab32f..aafa8092 100644 --- a/src/app/common/elements/tooltip.less +++ b/src/app/common/elements/tooltip.less @@ -6,8 +6,8 @@ align-items: flex-start; gap: 10px; padding: 10px; - border: 1px solid #777; - background-color: #444; + border: 1px solid var(--app-border-color); + background-color: var(--app-bg-color); border-radius: 5px; overflow: hidden; width: 300px; diff --git a/src/app/common/elements/viewheader.less b/src/app/common/elements/viewheader.less deleted file mode 100644 index e69de29b..00000000 diff --git a/src/app/common/elements/viewheader.tsx b/src/app/common/elements/viewheader.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/src/app/common/modals/editremoteconn.less b/src/app/common/modals/editremoteconn.less index 4ab3b35a..95e4735c 100644 --- a/src/app/common/modals/editremoteconn.less +++ b/src/app/common/modals/editremoteconn.less @@ -1,6 +1,6 @@ .erconn-modal { width: 502px; - min-height: 411px; + min-height: 211px; .wave-modal-content { gap: 20px; diff --git a/src/app/common/modals/viewremoteconndetail.less b/src/app/common/modals/viewremoteconndetail.less index f793a242..aee472d8 100644 --- a/src/app/common/modals/viewremoteconndetail.less +++ b/src/app/common/modals/viewremoteconndetail.less @@ -100,7 +100,7 @@ align-items: flex-start; align-self: stretch; border-radius: 6px; - border: 1px solid var(--element-separator, rgba(241, 246, 243, 0.15)); + border: 1px solid var(--xterm-viewport-border-color); background: #080a08; height: 163px !important; // Needed to override plugin height } diff --git a/src/app/connections/connections.less b/src/app/connections/connections.less index 2c0e049b..63c8db37 100644 --- a/src/app/connections/connections.less +++ b/src/app/connections/connections.less @@ -28,11 +28,9 @@ thead { border-radius: var(--sizing-2-xs, 4px); - border-top: 1px solid rgba(250, 250, 250, 0.1); - border-bottom: 1px solid rgba(241, 246, 243, 0.15); - background: var(--opacity-zinc-502, rgba(250, 250, 250, 0.02)); - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5), - 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset; + border-top: 1px solid var(--table-thead-border-top-color); + border-bottom: 1px solid var(--table-thead-border-bottom-color); + background: var(--table-thead-bg-color); th { height: 32px; @@ -42,12 +40,12 @@ } tr.connections-item { - border-bottom: 1px solid rgba(241, 246, 243, 0.15); + border-bottom: 1px solid var(--table-tr-border-bottom-color); color: var(--view-text-color); cursor: pointer; &:hover { - background: rgba(255, 255, 255, 0.06); + background: var(--table-tr-hover-bg-color); td.bookmark i { display: block; diff --git a/src/app/history/history.less b/src/app/history/history.less index ced773cf..09435ac7 100644 --- a/src/app/history/history.less +++ b/src/app/history/history.less @@ -47,7 +47,7 @@ border-radius: 4px; font-size: 1em; padding: 0.5em 1em; - background-color: var(--textfield-bg-color); + background-color: var(--form-element-bg-color); color: var(--app-text-color); } @@ -303,7 +303,7 @@ } &:hover { - background-color: #222; + background-color: var(--table-tr-hover-bg-color); td.bookmark i { display: block; diff --git a/src/app/line/line.less b/src/app/line/line.less index 9519c2d8..614a5c71 100644 --- a/src/app/line/line.less +++ b/src/app/line/line.less @@ -139,7 +139,7 @@ } &:hover .line-actions { - background-color: var(--app-panel-bg-color); + background-color: var(--line-actions-bg-color); .line-icon { visibility: visible; } @@ -237,7 +237,7 @@ overflow: auto; max-height: calc(var(--termlineheight) * 3); white-space: pre; - color: var(--term-bright-white); + color: var(--term-cmdtext); font-weight: bold; width: calc(100% - var(--termpad) * 2); diff --git a/src/app/workspace/cmdinput/cmdinput.less b/src/app/workspace/cmdinput/cmdinput.less index 2f24d349..21a6590f 100644 --- a/src/app/workspace/cmdinput/cmdinput.less +++ b/src/app/workspace/cmdinput/cmdinput.less @@ -153,7 +153,6 @@ } &:focus { - box-shadow: none; border: none; } } @@ -246,7 +245,6 @@ border-radius: 4px; &:focus { - box-shadow: none; border: none; outline: none; } diff --git a/src/app/workspace/screen/screenview.less b/src/app/workspace/screen/screenview.less index 8f56e2e7..ddeeb02d 100644 --- a/src/app/workspace/screen/screenview.less +++ b/src/app/workspace/screen/screenview.less @@ -35,7 +35,10 @@ color: var(--screen-view-text-caption-color); &:hover { - color: white; + color: var(--app-icon-hover-color); + i { + color: var(--app-icon-hover-color); + } } div.pane-name { @@ -248,7 +251,7 @@ .newtab-spacer { height: 1px; - background: rgba(241, 246, 243, 0.15); + background: var(--app-border-color); } .control-iconlist { diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less index 10182fec..6ece7af3 100644 --- a/src/app/workspace/screen/tabs.less +++ b/src/app/workspace/screen/tabs.less @@ -2,10 +2,9 @@ // Theming values #main .screen-tabs .screen-tab { + font: var(--base-font); font-size: var(--screentabs-font-size); line-height: var(--screentabs-line-height); - font-family: var(--base-font-family); - font-weight: var(--screentabs-font-weight); &.is-active { .background {