more on conversion to css vars (#345)

src/app/app.less

@@ -1,13 +1,12 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "./common/themes/themes.less";
 @import "./root.less";
 
 html,
 body {
     overflow: hidden;
-    font-family: @fixed-font;
+    font-family: var(--fixed-font);
     font-size: 12px;
     font-weight: 300;
     line-height: 1.5;
@@ -27,7 +26,7 @@ body .sidebar {
 
 textarea {
     overflow: hidden;
-    font-family: @fixed-font;
+    font-family: var(--fixed-font);
     font-size: 12px;
     font-weight: 300;
     line-height: 1.5;
@@ -40,7 +39,7 @@ textarea {
     font-size: 12.5px;
     font-weight: 300;
     line-height: 20px;
-    font-family: @text-s1-font;
+    font-family: var(--text-s1-font);
 
     .icon {
         width: 16px;
@@ -52,7 +51,7 @@ textarea {
     font-size: 15px;
     font-weight: 500;
     line-height: 20px;
-    font-family: @text-s1-font;
+    font-family: var(--text-s1-font);
     color: var(--app-text-color);
 }
 
@@ -60,7 +59,7 @@ textarea {
     font-size: 12.5px;
     font-weight: 300;
     line-height: 20px;
-    font-family: @text-s1-font;
+    font-family: var(--text-s1-font);
 
     .icon {
         width: 16px;
@@ -69,14 +68,14 @@ textarea {
 }
 
 .text-secondary {
-    font-family: @fixed-font;
+    font-family: var(--fixed-font);
     font-size: 11px;
     font-weight: 300;
     line-height: 16px;
 }
 
 .text-caption {
-    font-family: @fixed-font;
+    font-family: var(--fixed-font);
     font-size: 10px;
     font-weight: 300;
     line-height: 14px;
@@ -181,18 +180,19 @@ svg.icon {
 .dropdown,
 .button {
     display: inline-block;
-    border: 1px solid @base-border !important;
+    border: 1px solid var(--button-secondary-bg-color) !important;
     border-radius: 5px;
     cursor: pointer;
-    background-color: @button-background !important;
+    background-color: var(--button-secondary-bg-color) !important;
     color: var(--app-accent-color);
     .hoverEffect;
     &:hover {
         color: var(--app-accent-color);
     }
     &.disabled {
-        color: fade(@disabled-color, 60%);
-        background: @button-disabled-background;
+        color: var(--app-text-color);
+        background: var(--button-secondary-bg-color);
+        opacity: 0.5;
         cursor: initial;
         &:hover {
             box-shadow: none;

src/app/clientsettings/clientsettings.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .clientsettings-view {
     .content {
         padding: 0 18px 0 30px;

src/app/common/elements/button.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .wave-button {
     background: none;
     color: inherit;

src/app/common/elements/checkbox.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .checkbox {
     display: flex;
 

src/app/common/elements/cmdstrcode.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .cmdstr-code {
     position: relative;
     display: flex;
@@ -53,7 +51,7 @@
             padding: 2px 8px 2px 8px;
             background-color: var(--cmdstrcode-bg-color);
             font-size: 1em;
-            font-family: @fixed-font;
+            font-family: var(--termfontfamily);
         }
     }
 

src/app/common/elements/dropdown.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .wave-dropdown {
     position: relative;
     height: 44px;

src/app/common/elements/inlinesettingstextedit.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .inline-edit {
     .icon {
         display: inline;

src/app/common/elements/inputdecoration.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .wave-input-decoration {
     display: flex;
     align-items: center;

src/app/common/elements/markdown.less

@@ -1,8 +1,6 @@
-@import "@/common/themes/themes.less";
-
 .markdown {
     color: var(--app-text-color);
-    font-family: @markdown-font;
+    font-family: var(--markdown-font);
     font-size: 14px;
     overflow-wrap: break-word;
 

src/app/common/elements/modal.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .wave-modal-container {
     position: fixed;
     top: 0;

src/app/common/elements/passwordfield.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .wave-password {
     .wave-textfield-inner-eye {
         position: absolute;

src/app/common/elements/resizablesidebar.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .sidebar-handle {
     position: absolute;
     top: 0;

src/app/common/elements/status.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .wave-status-container {
     display: flex;
     align-items: center;

src/app/common/elements/textfield.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .wave-textfield {
     display: flex;
     align-items: center;

src/app/common/elements/toggle.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .checkbox-toggle {
     position: relative;
     display: inline-block;

src/app/common/elements/tooltip.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .wave-tooltip {
     display: flex;
     position: absolute;

src/app/common/icons/icons.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .front-icon {
     margin-right: 5px;
 }

src/app/common/modals/about.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .about-modal {
     .wave-modal-content {
         gap: 24px;

src/app/common/modals/alert.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .alert-modal {
     width: 500px;
 

src/app/common/modals/clientstop.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .clientstop-modal {
     .inner-content {
         display: flex;