From 3612bc3ae858ad1c87386c40866274c8e34c0740 Mon Sep 17 00:00:00 2001 From: Red J Adaya Date: Wed, 28 Feb 2024 01:09:03 +0800 Subject: [PATCH] more on conversion to css vars (#345) --- src/app/app.less | 24 ++++---- src/app/clientsettings/clientsettings.less | 2 - src/app/common/elements/button.less | 2 - src/app/common/elements/checkbox.less | 2 - src/app/common/elements/cmdstrcode.less | 4 +- src/app/common/elements/dropdown.less | 2 - .../elements/inlinesettingstextedit.less | 2 - src/app/common/elements/inputdecoration.less | 2 - src/app/common/elements/markdown.less | 4 +- src/app/common/elements/modal.less | 2 - src/app/common/elements/passwordfield.less | 2 - src/app/common/elements/resizablesidebar.less | 2 - src/app/common/elements/status.less | 2 - src/app/common/elements/textfield.less | 2 - src/app/common/elements/toggle.less | 2 - src/app/common/elements/tooltip.less | 2 - src/app/common/icons/icons.less | 2 - src/app/common/modals/about.less | 2 - src/app/common/modals/alert.less | 2 - src/app/common/modals/clientstop.less | 2 - src/app/common/modals/createremoteconn.less | 2 - src/app/common/modals/disconnected.less | 2 - src/app/common/modals/editremoteconn.less | 2 - src/app/common/modals/linesettings.less | 2 - src/app/common/modals/screensettings.less | 2 - src/app/common/modals/sessionsettings.less | 2 - src/app/common/modals/tabswitcher.less | 2 - src/app/common/modals/tos.less | 2 - src/app/common/modals/userinput.less | 2 - .../common/modals/viewremoteconndetail.less | 2 - src/app/common/prompt/prompt.less | 2 - src/app/connections/connections.less | 2 - src/app/history/history.less | 6 +- src/app/line/line.less | 2 - src/app/line/lines.less | 4 +- src/app/pluginsview/pluginsview.less | 10 ++- src/app/root.less | 12 ++++ src/app/sidebar/sidebar.less | 1 - src/app/workspace/cmdinput/cmdinput.less | 6 +- src/app/workspace/screen/screenview.less | 8 +-- src/app/workspace/screen/tabs.less | 61 +++++++++---------- src/app/workspace/workspace.less | 2 - src/plugins/code/code.less | 18 +++--- src/plugins/csv/csv.less | 14 ++--- src/plugins/image/image.less | 2 - src/plugins/markdown/markdown.less | 4 +- src/plugins/mustache/mustache.less | 6 +- src/plugins/openai/openai.less | 14 ++--- src/plugins/terminal/terminal.less | 1 - 49 files changed, 89 insertions(+), 172 deletions(-) diff --git a/src/app/app.less b/src/app/app.less index 6966e881..416a9a00 100644 --- a/src/app/app.less +++ b/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; diff --git a/src/app/clientsettings/clientsettings.less b/src/app/clientsettings/clientsettings.less index 2a3b8f52..44465e2d 100644 --- a/src/app/clientsettings/clientsettings.less +++ b/src/app/clientsettings/clientsettings.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .clientsettings-view { .content { padding: 0 18px 0 30px; diff --git a/src/app/common/elements/button.less b/src/app/common/elements/button.less index f4a53787..2396feb9 100644 --- a/src/app/common/elements/button.less +++ b/src/app/common/elements/button.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .wave-button { background: none; color: inherit; diff --git a/src/app/common/elements/checkbox.less b/src/app/common/elements/checkbox.less index 37d4b4b8..25e4cca6 100644 --- a/src/app/common/elements/checkbox.less +++ b/src/app/common/elements/checkbox.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .checkbox { display: flex; diff --git a/src/app/common/elements/cmdstrcode.less b/src/app/common/elements/cmdstrcode.less index c4b2e2f5..b1227758 100644 --- a/src/app/common/elements/cmdstrcode.less +++ b/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); } } diff --git a/src/app/common/elements/dropdown.less b/src/app/common/elements/dropdown.less index b885eb23..20aada2e 100644 --- a/src/app/common/elements/dropdown.less +++ b/src/app/common/elements/dropdown.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .wave-dropdown { position: relative; height: 44px; diff --git a/src/app/common/elements/inlinesettingstextedit.less b/src/app/common/elements/inlinesettingstextedit.less index 31a77ffb..9c9c5716 100644 --- a/src/app/common/elements/inlinesettingstextedit.less +++ b/src/app/common/elements/inlinesettingstextedit.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .inline-edit { .icon { display: inline; diff --git a/src/app/common/elements/inputdecoration.less b/src/app/common/elements/inputdecoration.less index 27f0df9f..a3bc2e2a 100644 --- a/src/app/common/elements/inputdecoration.less +++ b/src/app/common/elements/inputdecoration.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .wave-input-decoration { display: flex; align-items: center; diff --git a/src/app/common/elements/markdown.less b/src/app/common/elements/markdown.less index 562b32da..d430d208 100644 --- a/src/app/common/elements/markdown.less +++ b/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; diff --git a/src/app/common/elements/modal.less b/src/app/common/elements/modal.less index 432291f6..672df19b 100644 --- a/src/app/common/elements/modal.less +++ b/src/app/common/elements/modal.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .wave-modal-container { position: fixed; top: 0; diff --git a/src/app/common/elements/passwordfield.less b/src/app/common/elements/passwordfield.less index 753403de..92859fb1 100644 --- a/src/app/common/elements/passwordfield.less +++ b/src/app/common/elements/passwordfield.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .wave-password { .wave-textfield-inner-eye { position: absolute; diff --git a/src/app/common/elements/resizablesidebar.less b/src/app/common/elements/resizablesidebar.less index a67363df..50953e9b 100644 --- a/src/app/common/elements/resizablesidebar.less +++ b/src/app/common/elements/resizablesidebar.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .sidebar-handle { position: absolute; top: 0; diff --git a/src/app/common/elements/status.less b/src/app/common/elements/status.less index 9dae1181..b05d8a21 100644 --- a/src/app/common/elements/status.less +++ b/src/app/common/elements/status.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .wave-status-container { display: flex; align-items: center; diff --git a/src/app/common/elements/textfield.less b/src/app/common/elements/textfield.less index 06ba54ca..7fca5899 100644 --- a/src/app/common/elements/textfield.less +++ b/src/app/common/elements/textfield.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .wave-textfield { display: flex; align-items: center; diff --git a/src/app/common/elements/toggle.less b/src/app/common/elements/toggle.less index 36176c7f..ec4e66c3 100644 --- a/src/app/common/elements/toggle.less +++ b/src/app/common/elements/toggle.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .checkbox-toggle { position: relative; display: inline-block; diff --git a/src/app/common/elements/tooltip.less b/src/app/common/elements/tooltip.less index 7107a1a5..becab32f 100644 --- a/src/app/common/elements/tooltip.less +++ b/src/app/common/elements/tooltip.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .wave-tooltip { display: flex; position: absolute; diff --git a/src/app/common/icons/icons.less b/src/app/common/icons/icons.less index 2101f55a..f00d6bc6 100644 --- a/src/app/common/icons/icons.less +++ b/src/app/common/icons/icons.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .front-icon { margin-right: 5px; } diff --git a/src/app/common/modals/about.less b/src/app/common/modals/about.less index fca8028b..4f72b489 100644 --- a/src/app/common/modals/about.less +++ b/src/app/common/modals/about.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .about-modal { .wave-modal-content { gap: 24px; diff --git a/src/app/common/modals/alert.less b/src/app/common/modals/alert.less index 953ce799..8a8868ef 100644 --- a/src/app/common/modals/alert.less +++ b/src/app/common/modals/alert.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .alert-modal { width: 500px; diff --git a/src/app/common/modals/clientstop.less b/src/app/common/modals/clientstop.less index bad36c4b..31237b07 100644 --- a/src/app/common/modals/clientstop.less +++ b/src/app/common/modals/clientstop.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .clientstop-modal { .inner-content { display: flex; diff --git a/src/app/common/modals/createremoteconn.less b/src/app/common/modals/createremoteconn.less index e9203605..6b6cf257 100644 --- a/src/app/common/modals/createremoteconn.less +++ b/src/app/common/modals/createremoteconn.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .crconn-modal { width: 452px; min-height: 411px; diff --git a/src/app/common/modals/disconnected.less b/src/app/common/modals/disconnected.less index 9222ac49..46ed6eca 100644 --- a/src/app/common/modals/disconnected.less +++ b/src/app/common/modals/disconnected.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .disconnected-modal { .wave-modal-content { .wave-modal-body { diff --git a/src/app/common/modals/editremoteconn.less b/src/app/common/modals/editremoteconn.less index aec723cf..4ab3b35a 100644 --- a/src/app/common/modals/editremoteconn.less +++ b/src/app/common/modals/editremoteconn.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .erconn-modal { width: 502px; min-height: 411px; diff --git a/src/app/common/modals/linesettings.less b/src/app/common/modals/linesettings.less index 70f23439..93f599a6 100644 --- a/src/app/common/modals/linesettings.less +++ b/src/app/common/modals/linesettings.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .line-settings-modal { width: 640px; diff --git a/src/app/common/modals/screensettings.less b/src/app/common/modals/screensettings.less index 1719a9c0..f6dbbb32 100644 --- a/src/app/common/modals/screensettings.less +++ b/src/app/common/modals/screensettings.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .screen-settings-modal { width: 640px; diff --git a/src/app/common/modals/sessionsettings.less b/src/app/common/modals/sessionsettings.less index d8c7535c..6a775b69 100644 --- a/src/app/common/modals/sessionsettings.less +++ b/src/app/common/modals/sessionsettings.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .session-settings-modal { width: 640px; diff --git a/src/app/common/modals/tabswitcher.less b/src/app/common/modals/tabswitcher.less index 17f8a78a..71fffd51 100644 --- a/src/app/common/modals/tabswitcher.less +++ b/src/app/common/modals/tabswitcher.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .tabswitcher-modal { width: 452px; min-height: 384px; diff --git a/src/app/common/modals/tos.less b/src/app/common/modals/tos.less index 11280b40..e510024c 100644 --- a/src/app/common/modals/tos.less +++ b/src/app/common/modals/tos.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .tos-modal { width: 640px; diff --git a/src/app/common/modals/userinput.less b/src/app/common/modals/userinput.less index ae143ad3..71f70f4d 100644 --- a/src/app/common/modals/userinput.less +++ b/src/app/common/modals/userinput.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .userinput-modal { width: 500px; diff --git a/src/app/common/modals/viewremoteconndetail.less b/src/app/common/modals/viewremoteconndetail.less index c730f8ab..10d8497b 100644 --- a/src/app/common/modals/viewremoteconndetail.less +++ b/src/app/common/modals/viewremoteconndetail.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .rconndetail-modal { width: 631px; min-height: 565px; diff --git a/src/app/common/prompt/prompt.less b/src/app/common/prompt/prompt.less index 543b687a..859ebf0d 100644 --- a/src/app/common/prompt/prompt.less +++ b/src/app/common/prompt/prompt.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .term-prompt { font-weight: normal; font-size: var(--termfontsize); diff --git a/src/app/connections/connections.less b/src/app/connections/connections.less index f4b5f325..2c0e049b 100644 --- a/src/app/connections/connections.less +++ b/src/app/connections/connections.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .connections-view { .no-items { display: flex; diff --git a/src/app/history/history.less b/src/app/history/history.less index 5eb4243a..0a141834 100644 --- a/src/app/history/history.less +++ b/src/app/history/history.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .history-view { padding-bottom: 10px; @@ -69,8 +67,8 @@ border-radius: 4px; font-size: 1em; padding: 0.5em 1em; - background-color: @background-session-components; - color: @base-color; + background-color: var(--textfield-bg-color); + color: var(--app-text-color); } .main-search { diff --git a/src/app/line/line.less b/src/app/line/line.less index 653c109e..e202cd70 100644 --- a/src/app/line/line.less +++ b/src/app/line/line.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .line { margin: 0; padding: var(--termpad) var(--termpad) calc(var(--termpad) + 1px) calc(var(--termpad) * 2); diff --git a/src/app/line/lines.less b/src/app/line/lines.less index 6dc14ec4..07ebbe9f 100644 --- a/src/app/line/lines.less +++ b/src/app/line/lines.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .lines { display: flex; flex-direction: column; @@ -35,7 +33,7 @@ content: ""; height: 1px; flex-grow: 1; - background-color: rgba(@base-color, 0.5); + background-color: var(--app-text-color); } .line-sep-labeled::before { diff --git a/src/app/pluginsview/pluginsview.less b/src/app/pluginsview/pluginsview.less index ba46d186..0f556dd7 100644 --- a/src/app/pluginsview/pluginsview.less +++ b/src/app/pluginsview/pluginsview.less @@ -1,7 +1,5 @@ -@import "@/common/themes/themes.less"; - .plugins-view { - background-color: @background-session; + background-color: var(--session-bg-color); .header { margin: 1.5em 1.5em 0.5em; @@ -23,7 +21,7 @@ svg { width: 1.5em; height: 1.5em; - fill: @base-color; + fill: var(--app-text-color); } } } @@ -32,7 +30,7 @@ display: flex; .plugins-list { padding: 1em; - border-right: 1px solid @base-border; + border-right: 1px solid var(--app-text-color); min-height: calc(100vh - 6em); max-height: calc(100vh - 6em); overflow-y: auto; @@ -45,7 +43,7 @@ margin-bottom: 1em; border: 1px solid transparent; &.selected { - border-color: @wave-green; + border-color: var(--app-accent-color); } .plugin-summary-header { display: flex; diff --git a/src/app/root.less b/src/app/root.less index eb9de060..b3b45174 100644 --- a/src/app/root.less +++ b/src/app/root.less @@ -10,6 +10,13 @@ --termlineheight: 15px; --termpad: 7px; // padding value (scaled to termfontsize) + // other fonts + --fixed-font: "Martian Mono", sans-serif; + --terminal-font: "JetBrains Mono", sans-serif; + --text-s1-font: "Martian Mono", sans-serif; + --markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji"; + // magic --screentabs-height: 38px; @@ -17,6 +24,7 @@ --app-accent-color: rgb(88, 193, 66); --app-error-color: rgb(204, 0, 0); --app-warning-color: rgb(255, 165, 0); + --app-success-color: rgb(38, 97, 26); --app-text-color: rgb(211, 215, 207); --app-text-primary-color: rgb(255, 255, 255); --app-text-secondary-color: rgb(195, 200, 194); @@ -85,6 +93,7 @@ --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); // toggle colors --toggle-bg-color: rgb(51, 51, 51); @@ -190,4 +199,7 @@ // screen view color --screen-view-text-caption-color: rgb(139, 145, 138); + + // plugins colors + --code-gutter-bg-color: rgba(88, 193, 66, 0.4); } diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less index f088880f..5f03a990 100644 --- a/src/app/sidebar/sidebar.less +++ b/src/app/sidebar/sidebar.less @@ -1,4 +1,3 @@ -@import "@/common/themes/themes.less"; @import "@/common/icons/icons.less"; .main-sidebar { diff --git a/src/app/workspace/cmdinput/cmdinput.less b/src/app/workspace/cmdinput/cmdinput.less index 2a9e6351..a3989061 100644 --- a/src/app/workspace/cmdinput/cmdinput.less +++ b/src/app/workspace/cmdinput/cmdinput.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .cmd-input { max-height: max(300px, 40%); display: flex; @@ -256,7 +254,7 @@ .chat-msg-user { .msg-text { - font-family: @markdown-font; + font-family: var(--markdown-font); font-size: 14px; white-space: pre-wrap; } @@ -264,7 +262,7 @@ .chat-msg-error { color: var(--cmdinput-text-error); - font-family: @markdown-font; + font-family: var(--markdown-font); font-size: 14px; } diff --git a/src/app/workspace/screen/screenview.less b/src/app/workspace/screen/screenview.less index bee44f25..751025b0 100644 --- a/src/app/workspace/screen/screenview.less +++ b/src/app/workspace/screen/screenview.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .main-content { .screen-view { flex-grow: 1; @@ -82,7 +80,7 @@ padding: 5px 10px; background-color: #333; border-radius: 5px; - font-family: @fixed-font; + font-family: var(--fixed-font); } } } @@ -337,10 +335,6 @@ color: var(--app-text-secondary-color); } - .text-caption { - color: var(--screen-view-text-caption-color); - } - .ellipsis { text-overflow: ellipsis; } diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less index 7bac2039..a44626f0 100644 --- a/src/app/workspace/screen/tabs.less +++ b/src/app/workspace/screen/tabs.less @@ -1,4 +1,3 @@ -@import "@/common/themes/themes.less"; @import "@/common/icons/icons.less"; #main .screen-tabs .screen-tab { @@ -23,15 +22,15 @@ &.color-green, &.color-default { svg.svg-icon-inner path { - fill: @tab-green; + fill: var(--tab-green); } .icon i { - color: @tab-green; + color: var(--tab-green); } &.is-active { - border-top: 1px solid @tab-green; + border-top: 1px solid var(--tab-green); background: linear-gradient( 180deg, rgba(88, 193, 66, 0.2) 9.34%, @@ -43,15 +42,15 @@ &.color-orange { svg.svg-icon-inner path { - fill: @tab-orange; + fill: var(--tab-orange); } .icon i { - color: @tab-orange; + color: var(--tab-orange); } &.is-active { - border-top: 1px solid @tab-orange; + border-top: 1px solid var(--tab-orange); background: linear-gradient( 180deg, rgba(239, 113, 59, 0.2) 9.34%, @@ -63,15 +62,15 @@ &.color-red { svg.svg-icon-inner path { - fill: @tab-red; + fill: var(--tab-red); } .icon i { - color: @tab-red; + color: var(--tab-red); } &.is-active { - border-top: 1px solid @tab-red; + border-top: 1px solid var(--tab-red); background: linear-gradient( 180deg, rgba(229, 77, 46, 0.2) 9.34%, @@ -83,15 +82,15 @@ &.color-yellow { svg.svg-icon-inner path { - fill: @tab-yellow; + fill: var(--tab-yellow); } .icon i { - color: @tab-yellow; + color: var(--tab-yellow); } &.is-active { - border-top: 1px solid @tab-yellow; + border-top: 1px solid var(--tab-yellow); background: linear-gradient( 180deg, rgba(224, 185, 86, 0.2) 9.34%, @@ -103,15 +102,15 @@ &.color-blue { svg.svg-icon-inner path { - fill: @tab-blue; + fill: var(--tab-blue); } .icon i { - color: @tab-blue; + color: var(--tab-blue); } &.is-active { - border-top: 1px solid @tab-blue; + border-top: 1px solid var(--tab-blue); background: linear-gradient( 180deg, rgba(57, 113, 255, 0.2) 9.34%, @@ -123,15 +122,15 @@ &.color-mint { svg.svg-icon-inner path { - fill: @tab-mint; + fill: var(--tab-mint); } .icon i { - color: @tab-mint; + color: var(--tab-mint); } &.is-active { - border-top: 1px solid @tab-mint; + border-top: 1px solid var(--tab-mint); background: linear-gradient( 180deg, rgba(75, 255, 169, 0.2) 9.34%, @@ -143,15 +142,15 @@ &.color-cyan { svg.svg-icon-inner path { - fill: @tab-cyan; + fill: var(--tab-cyan); } .icon i { - color: @tab-cyan; + color: var(--tab-cyan); } &.is-active { - border-top: 1px solid @tab-cyan; + border-top: 1px solid var(--tab-cyan); background: linear-gradient( 180deg, rgba(75, 223, 255, 0.2) 9.34%, @@ -163,15 +162,15 @@ &.color-white { svg.svg-icon-inner path { - fill: @tab-white; + fill: var(--tab-white); } .icon i { - color: @tab-white; + color: var(--tab-white); } &.is-active { - border-top: 1px solid @tab-white; + border-top: 1px solid var(--tab-white); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.2) 9.34%, @@ -183,15 +182,15 @@ &.color-violet { svg.svg-icon-inner path { - fill: @tab-violet; + fill: var(--tab-violet); } .icon i { - color: @tab-violet; + color: var(--tab-violet); } &.is-active { - border-top: 1px solid @tab-violet; + border-top: 1px solid var(--tab-violet); background: linear-gradient( 180deg, rgba(186, 118, 255, 0.2) 9.34%, @@ -203,15 +202,15 @@ &.color-pink { svg.svg-icon-inner path { - fill: @tab-pink; + fill: var(--tab-pink); } .icon i { - color: @tab-pink; + color: var(--tab-pink); } &.is-active { - border-top: 1px solid @tab-pink; + border-top: 1px solid var(--tab-pink); background: linear-gradient( 180deg, rgba(255, 136, 165, 0.2) 9.34%, diff --git a/src/app/workspace/workspace.less b/src/app/workspace/workspace.less index b2e5926c..f0eae8c2 100644 --- a/src/app/workspace/workspace.less +++ b/src/app/workspace/workspace.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .session-view { overflow: hidden; diff --git a/src/plugins/code/code.less b/src/plugins/code/code.less index cd9d3155..5906cb98 100644 --- a/src/plugins/code/code.less +++ b/src/plugins/code/code.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .code-renderer { .monaco-editor { .monaco-editor-background, @@ -10,7 +8,7 @@ height: 4px !important; width: 4px !important; .slider { - background-color: @scrollbar-thumb !important; + background-color: var(--scrollbar-background-color) !important; } } } @@ -55,13 +53,13 @@ bottom: -3px; left: 14px; .message { - background: @success-green; + background: var(--app-success-color); border-radius: 6px; margin-bottom: 1rem; padding: 4px 1rem; max-width: 80vw; &.error { - background: @error-red; + background: var(--app-error-color); } } } @@ -70,8 +68,8 @@ top: 0.2em; right: 12rem; border-radius: 5px; - background-color: @button-background; - color: @error-red; + background-color: var(--button-secondary-bg-color); + color: var(--app-error-color); z-index: 1; padding: 0 0.8em; font-size: 0.8em; @@ -96,7 +94,7 @@ .gutter { flex-shrink: 0; flex-grow: 0; - background: fade(@wave-green, 40%); + background: var(--code-gutter-bg-color); max-width: 3px; } .gutter-horizontal { @@ -106,10 +104,10 @@ cursor: row-resize; } .gutter:hover { - background: @wave-green; + background: var(--app-accent-color); } .gutter-dragging:hover { - background: @wave-green; + background: var(--app-accent-color); } .pane { diff --git a/src/plugins/csv/csv.less b/src/plugins/csv/csv.less index 28457d7d..0e241cde 100644 --- a/src/plugins/csv/csv.less +++ b/src/plugins/csv/csv.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .csv-renderer { opacity: 0; /* Start with an opacity of 0, meaning it's invisible */ @@ -29,7 +27,7 @@ table { border-collapse: collapse; overflow-x: auto; - border: 1px solid @scrollbar-thumb; + border: 1px solid var(--scrollbar-thumb-hover-color); thead { position: relative; @@ -38,11 +36,11 @@ overflow-y: scroll; tr { - border-bottom: 1px solid @scrollbar-thumb; + border-bottom: 1px solid var(--scrollbar-thumb-hover-color); th { - color: @term-white; - border-right: 1px solid @scrollbar-thumb; + color: var(--app-text-color); + border-right: 1px solid var(--scrollbar-thumb-hover-color); border-bottom: none; padding: 2px 10px; flex-basis: 100%; @@ -81,8 +79,8 @@ display: flex; td { - border-right: 1px solid @scrollbar-thumb; - border-left: 1px solid @scrollbar-thumb; + border-right: 1px solid var(--scrollbar-thumb-hover-color); + border-left: 1px solid var(--scrollbar-thumb-hover-color); padding: 3px 10px; flex-basis: 100%; flex-grow: 2; diff --git a/src/plugins/image/image.less b/src/plugins/image/image.less index 248dc209..8ffe1885 100644 --- a/src/plugins/image/image.less +++ b/src/plugins/image/image.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .image-renderer { img { display: block; diff --git a/src/plugins/markdown/markdown.less b/src/plugins/markdown/markdown.less index caa57a5f..70ea9f5c 100644 --- a/src/plugins/markdown/markdown.less +++ b/src/plugins/markdown/markdown.less @@ -1,7 +1,5 @@ -@import "@/common/themes/themes.less"; - .markdown-renderer { - color: @term-white; + color: var(--app-text-color); .scroller { overflow-y: auto; diff --git a/src/plugins/mustache/mustache.less b/src/plugins/mustache/mustache.less index 4ef591fe..4c180ee3 100644 --- a/src/plugins/mustache/mustache.less +++ b/src/plugins/mustache/mustache.less @@ -1,7 +1,5 @@ -@import "@/common/themes/themes.less"; - .mustache-renderer { - color: @term-white; + color: var(--app-text-color); .cmd-hints { display: inline-block !important; position: relative; @@ -14,6 +12,6 @@ } .refresh-button { color: rgb(52, 52, 52); - background-color: @term-white; + background-color: var(--app-text-color); } } diff --git a/src/plugins/openai/openai.less b/src/plugins/openai/openai.less index 1450cb3a..ba6ace19 100644 --- a/src/plugins/openai/openai.less +++ b/src/plugins/openai/openai.less @@ -1,5 +1,3 @@ -@import "@/common/themes/themes.less"; - .openai-renderer { .openai-message { display: flex; @@ -7,31 +5,31 @@ justify-content: flex-start; .openai-role { - color: @term-bright-green; + color: var(--prompt-bright-green); font-weight: bold; width: 100px; flex-shrink: 0; } .openai-role.openai-role-assistant { - color: @term-bright-white; + color: var(--app-text-primary-color); } .openai-content-user { white-space: pre; - color: @term-white; + color: var(--app-text-color); } .openai-content-assistant { - color: @term-white; + color: var(--app-text-color); } .openai-role-error { - color: @term-bright-red; + color: var(--app-text-color); } .openai-content-error { - color: @term-bright-red; + color: var(--app-text-color); } } diff --git a/src/plugins/terminal/terminal.less b/src/plugins/terminal/terminal.less index 7eab938b..926a11df 100644 --- a/src/plugins/terminal/terminal.less +++ b/src/plugins/terminal/terminal.less @@ -1,4 +1,3 @@ -@import "@/common/themes/themes.less"; @import "./xterm.less"; .terminal-wrapper {