Light theme (#365)

* 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>

public/themes/default.css

@@ -14,10 +14,8 @@
     --termfontsize-sm: 11px;
     --termlineheight-sm: 15px;
 
-    /* other fonts */
+    /* base fonts */
-    --base-font-family: "Lato", sans-serif;
+    --base-font: normal 15px "Lato", sans-serif;
-    --base-font-size: 15px;
-    --base-font-weight: normal;
 
     --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);
+    /* todo: use --form-element-* directly in elements */
-    --button-primary-bg-color: rgb(78, 154, 6);
+    --button-text-color: var(--form-element-text-color);
-    --button-secondary-bg-color: rgba(255, 255, 255, 0.09);
+    --button-primary-bg-color: var(--form-element-primary-color);
-    --button-warning-bg-color: rgb(204, 0, 0);
+    --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);
+    /* todo: use --form-element-* directly in elements */
-    --checkbox-bg-color: rgb(78, 154, 6);
+    --checkbox-text-color: var(--form-element-text-color);
-    --checkbox-check-color: rgb(255, 255, 255);
+    --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);
+    /* todo: use --form-element-* directly in elements */
-    --dropdown-error-color: rgb(229, 77, 46);
+    --dropdown-text-color: var(--form-element-text-color);
-    --dropdown-focus-color: rgb(78, 154, 6);
+    --dropdown-label-color: var(--form-element-label-color);
-
+    --dropdown-error-color: var(--form-element-error-color);
-    /* textfield colors */
+    --dropdown-focus-color: var(--form-element-primary-color);
-    --textfield-focused-border-color: rgb(78, 154, 6);
+    --dropdown-bg-color: var(--form-element-bg-color);
-    --textfield-error-border-color: rgb(229, 77, 46);
+    --dropdown-border-color: var(--form-element-border-color);
-    --textfield-label-color: rgb(195, 200, 194);
-    --textfield-text-color: rgb(255, 255, 255);
-    --textfield-bg-color: rgba(48, 49, 48, 0.6);
 
     /* 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-text-error-color: var(--term-red);
-    --cmdinput-title-color: rgb(114, 159, 207);
+    --cmdinput-history-item-error-color: var(--term-bright-red);
-    --cmdinput-history-item-error-color: rgb(220, 119, 118);
+    --cmdinput-history-item-selected-error-color: var(--term-bright-red);
-    --cmdinput-history-item-selected-error-color: rgb(247, 148, 148);
-    --cmdinput-warning-color: rgb(255, 165, 0);
     --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);
 }

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-bg-color: #fefefe;
-    --app-text-color: #000000;
+    --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 */
+    /* tab color */
-    --app-panel-bg-color: #cccccc;
+    --tab-white: rgb(0, 0, 0, 0.6);
-    --app-panel-bg-color-dev: #eeeeff;
 
-    --term-black: #ffffff;
+    /* button colors */
-    --term-white: #000000;
+    --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);
 }

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

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

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

src/app/app.less

@@ -4,10 +4,7 @@
 html,
 body {
     overflow: hidden;
-    font-family: var(--base-font-family);
+    font: var(--base-font);
-    font-size: var(--base-font-size);
-    font-weight: var(--base-font-weight);
-    line-height: normal;
     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: var(--base-font);
-    font-size: var(--base-font-size);
-    font-weight: var(--base-font-weight);
     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: var(--base-font);
-    font-size: var(--base-font-size);
-    font-weight: var(--base-font-weight);
     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;
         }
     }

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

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);
+    background: var(--dropdown-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.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
 
     &.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;
+    border: 1px solid var(--dropdown-border-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,
+    background: var(--dropdown-bg-color);
-        0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
+    // 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 {

src/app/common/elements/inputdecoration.less

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

src/app/common/elements/modal.less

@@ -27,9 +27,8 @@
     align-items: flex-start;
     gap: 16px;
     border-radius: 10px;
-    background: #151715;
+    background: var(--modal-bg-color);
-    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35), 0px 10px 24px 0px rgba(0, 0, 0, 0.45),
+    border: 1px solid var(--app-border-color);
-        0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
 
     .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);
             }
 

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);
+    border: 1px solid var(--form-element-border-color);
-    background: rgba(255, 255, 255, 0.06);
+    background: var(--form-element-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.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
 
     &: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 {

src/app/common/elements/tooltip.less

@@ -6,8 +6,8 @@
     align-items: flex-start;
     gap: 10px;
     padding: 10px;
-    border: 1px solid #777;
+    border: 1px solid var(--app-border-color);
-    background-color: #444;
+    background-color: var(--app-bg-color);
     border-radius: 5px;
     overflow: hidden;
     width: 300px;

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;

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
                         }

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-top: 1px solid var(--table-thead-border-top-color);
-            border-bottom: 1px solid rgba(241, 246, 243, 0.15);
+            border-bottom: 1px solid var(--table-thead-border-bottom-color);
-            background: var(--opacity-zinc-502, rgba(250, 250, 250, 0.02));
+            background: var(--table-thead-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.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
 
             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;

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;

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

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

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 {

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 {