Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Light theme (#365)

Browse Source 
* light theme for button element

* light them for connections view

* remove box-shadows

* light theme for textfield

* unify form elements colors

* light theme for modals

* remove inset from modal box-shadow

* light theme for tooltip

* remove empty fies. theme new tab setting spacer

* light theme for cmdinput

* light theme for scroll

* minor global color change

* connections and history view light theme improvements

* light them for line actions bg

* light theme for sidebar actions

* more on line themes and fixes

* use font shorthand

* use --form-element-* for all form elements colors

* update/remove some cmdiput colors

* update terminal colors for light mode

* move term lightmode settings to new file (needs updates for more contrast)

* lighten up panel color, remove 'dev' panel color for now (since we're testing light mode)

---------

Co-authored-by: sawka <mike.sawka@gmail.com>
This commit is contained in:
Red J Adaya 2024-03-05 09:05:05 +08:00 committed by GitHub
parent b5022c555a
commit baf00ac514
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 167 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
public/themes/default.css
View File

@ -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);
}

63
public/themes/light.css
View File

@ -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);
}

5
public/themes/term-dark.css
View File

@ -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;
}

2
public/themes/term-default.css
View File

@ -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;
}

11
public/themes/term-light.css Normal file
View File

@ -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;
}

18
src/app/app.less
View File

@ -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;
}
}

2
src/app/common/elements/button.less
View File

@ -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);

18
src/app/common/elements/dropdown.less
View File

@ -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 {

1
src/app/common/elements/inputdecoration.less
View File

@ -5,6 +5,7 @@
i {
font-size: 13px;
color: var(--form-element-icon-color);
}
}

9
src/app/common/elements/modal.less
View File

@ -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);
}

14
src/app/common/elements/textfield.less
View File

@ -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 {

4
src/app/common/elements/tooltip.less
View File

@ -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;

0
src/app/common/elements/viewheader.less
View File

0
src/app/common/elements/viewheader.tsx
View File

2
src/app/common/modals/editremoteconn.less
View File

@ -1,6 +1,6 @@
.erconn-modal {
width: 502px;
min-height: 411px;
min-height: 211px;
.wave-modal-content {
gap: 20px;

2
src/app/common/modals/viewremoteconndetail.less
View File

@ -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
}

12
src/app/connections/connections.less
View File

@ -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;

4
src/app/history/history.less
View File

@ -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;

4
src/app/line/line.less
View File

@ -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);

2
src/app/workspace/cmdinput/cmdinput.less
View File

@ -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;
}

7
src/app/workspace/screen/screenview.less
View File

@ -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 {

3
src/app/workspace/screen/tabs.less
View File

@ -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 {