From c2cfdfafac329412291b17a204c5b3da994c12d5 Mon Sep 17 00:00:00 2001 From: Rajeshwari Kiwad Date: Mon, 8 Sep 2025 11:57:06 +0530 Subject: [PATCH 1/6] color correction for plot and plot-container --- .../plot-bias/plot-bias.component.html | 2 +- .../plot-bias/plot-bias.component.scss | 2 +- .../plot-step/plot-step.component.html | 2 +- .../plot-step/plot-step.component.scss | 20 +++++++++++------- .../plot-sweep/plot-sweep.component.html | 2 +- .../plot-sweep/plot-sweep.component.scss | 21 +++++++++++-------- 6 files changed, 29 insertions(+), 20 deletions(-) diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.html b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.html index 0c5d542..f7b97a8 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.html +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.html @@ -6,7 +6,7 @@ ? '1px solid ' + activeStyle.backgroundColor : '1px solid var(--vscode-editorWidget-border)', backgroundColor: isActive - ? 'black' + ? 'var(--vscode-activityErrorBadge-foreground)' : 'var(--vscode-editor-background)' }" > diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.scss b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.scss index 95bf707..15d0ae5 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.scss @@ -2,7 +2,7 @@ // display: flex; flex-direction: column; width: 100%; - height: 100%; + // height: 100%; // height: 400px; background-color: var(--vscode-editor-background); // height: 300px; diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.html b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.html index 5ed16ac..bb67dba 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.html +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.html @@ -6,7 +6,7 @@ ? '1px solid ' + activeStyle.backgroundColor : '1px solid var(--vscode-editorWidget-border)', backgroundColor: isActive - ? 'black' + ? 'var(--vscode-activityErrorBadge-foreground)' : 'var(--vscode-editor-background)' }" > diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.scss b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.scss index 4138838..63bcbf9 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.scss @@ -9,23 +9,29 @@ .plot-item { // border-left: 1px solid #7FBDC6; - border-radius: 10px; + border-radius: 11px; margin-bottom: 10px; padding-bottom: 7px; - background-color: black; + background-color: var(--vscode-editor-background); + // border: 1px solid #F6F07D; + width: 100%; + height: 100%; // border-right: 1px solid #7FBDC6; // border-bottom: 1px solid #7FBDC6; } .plot-info { // margin-bottom: 10px; - color: #000; + font-size: 14px; + color:black; display: flex; background-color: transparent; - // border: 5px #7FBDC6; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - padding: 5px 5px 5px 10px; + // background-color: #F6F07D; + // border: 5px #F6F07D; + padding: 5px; + border-top-left-radius: 9px; + border-top-right-radius: 9px; + padding-left: 10px; font-size: smaller; } diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.html b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.html index 8929e3f..5041737 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.html +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.html @@ -6,7 +6,7 @@ ? '1px solid ' + activeStyle.backgroundColor : '1px solid var(--vscode-editorWidget-border)', backgroundColor: isActive - ? 'black' + ? 'var(--vscode-activityErrorBadge-foreground)' : 'var(--vscode-editor-background)' }" > diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.scss b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.scss index 68e2041..616e991 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.scss @@ -8,13 +8,16 @@ } .plot-item { - // border-left: 1px solid #C95B66; - border-radius: 10px; + // border-left: 1px solid #7FBDC6; + border-radius: 11px; margin-bottom: 10px; padding-bottom: 7px; - background-color: black; - // border-right: 1px solid #C95B66; - // border-bottom: 1px solid #C95B66; + background-color: var(--vscode-editor-background); + // border: 1px solid #F6F07D; + width: 100%; + height: 100%; + // border-right: 1px solid #7FBDC6; + // border-bottom: 1px solid #7FBDC6; } .plot-info { @@ -23,11 +26,11 @@ color:black; display: flex; background-color: transparent; - // background-color: #C95B66; - // border: 5px #C95B66; + // background-color: #F6F07D; + // border: 5px #F6F07D; padding: 5px; - border-top-left-radius: 10px; - border-top-right-radius: 10px; + border-top-left-radius: 9px; + border-top-right-radius: 9px; padding-left: 10px; font-size: smaller; } From 4d522db5106a7fa77c4d5f5a58d9ef105cb5e07c Mon Sep 17 00:00:00 2001 From: Rajeshwari Kiwad Date: Mon, 8 Sep 2025 12:29:37 +0530 Subject: [PATCH 2/6] refreshing in client server --- kic-script-gen/src/back_end/client_server.rs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/kic-script-gen/src/back_end/client_server.rs b/kic-script-gen/src/back_end/client_server.rs index 5aec34b..74e02b0 100644 --- a/kic-script-gen/src/back_end/client_server.rs +++ b/kic-script-gen/src/back_end/client_server.rs @@ -313,6 +313,8 @@ pub async fn start(mut script_model: ScriptModel) -> anyhow::Result<()> { if let Some(session) = session.as_mut() { session.text(response).await.unwrap(); } + } else if trimmed_line.contains("refresh") { + println!("instrument data requested"); // refreshing by initiating session again does not affect the JSON state } else if trimmed_line.contains("reset") { let mut data_model = app_state.data_model.lock().await; let response = data_model.reset_sweep_config(); From 1b9db1341fec8ac652ef229f4df16143bbe00f5d Mon Sep 17 00:00:00 2001 From: Rajeshwari Kiwad Date: Thu, 11 Sep 2025 11:26:29 +0530 Subject: [PATCH 3/6] css variable changes --- .../input-toggle/input-toggle.component.scss | 2 +- .../main-sweep/main-sweep.component.scss | 13 +++--- .../plot-bias/plot-bias.component.scss | 28 ++++++------ .../plot-bias/plot-bias.component.ts | 42 ++++++++++++++--- .../plot-container.component.scss | 2 +- .../plot-container.component.ts | 4 +- .../plot-step/plot-step.component.scss | 5 ++- .../plot-step/plot-step.component.ts | 45 ++++++++++++++++--- .../plot-sweep/plot-sweep.component.scss | 2 +- .../plot-sweep/plot-sweep.component.ts | 44 +++++++++++++++--- .../main-sweep/step/step.component.scss | 7 +-- 11 files changed, 144 insertions(+), 50 deletions(-) diff --git a/script-gen-ui/src/app/components/controls/input-toggle/input-toggle.component.scss b/script-gen-ui/src/app/components/controls/input-toggle/input-toggle.component.scss index d3b5000..b86d7db 100644 --- a/script-gen-ui/src/app/components/controls/input-toggle/input-toggle.component.scss +++ b/script-gen-ui/src/app/components/controls/input-toggle/input-toggle.component.scss @@ -84,4 +84,4 @@ td { cursor: not-allowed; background-color: var(--vscode-editorWidget-background, var(--vscode-input-background)); color: var(--vscode-disabledForeground, var(--vscode-input-foreground)); -} \ No newline at end of file +} diff --git a/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss b/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss index cc47481..2e45136 100644 --- a/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss @@ -251,8 +251,8 @@ .timing { border-radius: 13px; background-color: transparent; - color: var(--vscode-activityBarBadge-foreground); - border-color: var(--vscode-activityBar-activeBorder); + color: var(--vscode-editor-foreground); + border-color: #007acc; border-style: solid; border-width: thin; padding-top: 5px; @@ -280,10 +280,11 @@ appearance: none; padding: 10px; border-radius: 3px; + border: 1px solid var(--vscode-editorWidget-border); } .checkbox input[type="checkbox"]:checked { - border-color: var(--vscode-activityBar-activeBorder); + border-color: #007acc; } .checkbox input[type="checkbox"]:checked::after { @@ -292,7 +293,7 @@ top: 1px; width: 5px; height: 10px; - border: solid var(--vscode-activityBar-activeBorder); + border: solid #007acc; border-width: 0 2px 2px 0; transform: rotate(45deg); display: block; @@ -326,8 +327,8 @@ input:focus { .open-script { border-radius: 13px; background-color: transparent; - color: var(--vscode-activityBarBadge-foreground); - border-color: var(--vscode-activityBar-activeBorder); + color: var(--vscode-editor-foreground); + border-color: var(--vscode-activityBarBadge-background); border-style: solid; border-width: thin; padding-top: 5px; diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.scss b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.scss index 15d0ae5..9c1e026 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.scss @@ -14,30 +14,30 @@ margin-bottom: 10px; padding-bottom: 7px; background-color: var(--vscode-editor-background); - border: 1px solid #F6F07D; + border: 1px solid #f6f07d; width: 100%; height: 100%; // border-right: 1px solid #F6F07D; // border-bottom: 1px solid #F6F07D; } - // @media (max-width: 120vh) { - // .plot-item { - // // border-left: 1px solid #F6F07D; - // border-radius: 11px; - // margin-bottom: 10px; - // padding-bottom: 7px; - // background-color: var(--vscode-editor-background); - // border: 1px solid #F6F07D; - // // border-right: 1px solid #F6F07D; - // // border-bottom: 1px solid #F6F07D; - // } - // } +// @media (max-width: 120vh) { +// .plot-item { +// // border-left: 1px solid #F6F07D; +// border-radius: 11px; +// margin-bottom: 10px; +// padding-bottom: 7px; +// background-color: var(--vscode-editor-background); +// border: 1px solid #F6F07D; +// // border-right: 1px solid #F6F07D; +// // border-bottom: 1px solid #F6F07D; +// } +// } .plot-info { // margin-bottom: 10px; font-size: 14px; - color:black; + color: var(--vscode-activityBar-foreground); display: flex; background-color: transparent; // background-color: #F6F07D; diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.ts b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.ts index f305cc5..24da2f6 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.ts +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-bias/plot-bias.component.ts @@ -49,6 +49,7 @@ export class PlotBiasComponent private mutationObserver: MutationObserver | undefined; private originalBackgroundColor = ''; activeBackgroundColor = ''; + private tickColor = ''; windowHeight = window.innerHeight; windowWidth = window.innerWidth; @@ -60,7 +61,7 @@ export class PlotBiasComponent separatethousands: false, tickfont: { family: 'Roboto, "Helvetica Neue", sans-serif', - color: 'white', + color: this.tickColor, size: 9, }, dtick: 1, @@ -104,7 +105,7 @@ export class PlotBiasComponent range: [0, 2], tickfont: { family: 'Roboto, "Helvetica Neue", sans-serif', - color: 'white', + color: this.tickColor, size: 9, }, dtick: 0.5, @@ -124,7 +125,7 @@ export class PlotBiasComponent yaxis2: { tickfont: { family: 'Roboto, "Helvetica Neue", sans-serif', - color: 'white', + color: this.tickColor, size: 9, }, anchor: 'x', @@ -324,8 +325,21 @@ export class PlotBiasComponent ? this.rgbToHex(activeBg) : activeBg; + const tickColorRaw = this.getCssVariableValue( + '--vscode-editor-foreground' + ); + this.tickColor = tickColorRaw.startsWith('rgb') + ? this.rgbToHex(tickColorRaw) + : tickColorRaw; + + // Update tick colors in plot layout + this.plotLayout.xaxis.tickfont.color = this.tickColor; + this.plotLayout.yaxis.tickfont.color = this.tickColor; + this.plotLayout.yaxis2.tickfont.color = this.tickColor; + console.log('Initial background color:', backgroundColorHex); console.log('Initial active background color:', this.activeBackgroundColor); + console.log('Initial tick color:', this.tickColor); } private renderPlot(): void { @@ -368,11 +382,25 @@ export class PlotBiasComponent ? this.rgbToHex(activeBg) : activeBg; - console.log('Theme changed, new background color:', backgroundColorHex); - console.log( - 'Theme changed, new active background color:', - this.activeBackgroundColor + // Update tick color on theme change + const tickColorRaw = this.getCssVariableValue( + '--vscode-activityBarBadge-foreground' ); + this.tickColor = tickColorRaw.startsWith('rgb') + ? this.rgbToHex(tickColorRaw) + : tickColorRaw; + + // Update tick colors in plot layout + this.plotLayout.xaxis.tickfont.color = this.tickColor; + this.plotLayout.yaxis.tickfont.color = this.tickColor; + this.plotLayout.yaxis2.tickfont.color = this.tickColor; + + // console.log('Theme changed, new background color:', backgroundColorHex); + // console.log( + // 'Theme changed, new active background color:', + // this.activeBackgroundColor + // ); + // console.log('Theme changed, new tick color:', this.tickColor); this.renderPlot(); }); diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.scss b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.scss index 4fbff52..cfc02e6 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.scss @@ -19,7 +19,7 @@ .plot-info { margin-bottom: 10px; font-size: 14px; - color: var(--vscode-editor-foreground); + color: var(--vscode-activityBar-foreground); } .plot-info p { diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.ts b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.ts index f82fb90..fd30fdc 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.ts +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.ts @@ -215,13 +215,13 @@ export class PlotContainerComponent implements OnInit, AfterViewInit, OnDestroy const isActive = this.activeComponent === componentType && this.activeIndex === index; const backgroundColor = - this.colorMap.get(uuid) || 'var(--vscode-activityBar-border)'; + this.colorMap.get(uuid) || 'var(--vscode-activityBar-foreground)'; return { backgroundColor: isActive ? backgroundColor : 'var(--vscode-activityBar-border)', - color: isActive ? 'black' : 'white', + color: isActive ? 'var(--vscode-activityBar-foreground)' : 'white', }; } diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.scss b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.scss index 63bcbf9..5d7d2bf 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.scss @@ -23,7 +23,7 @@ .plot-info { // margin-bottom: 10px; font-size: 14px; - color:black; + color: var(--vscode-activityBar-foreground); display: flex; background-color: transparent; // background-color: #F6F07D; @@ -45,6 +45,7 @@ margin: 0 10px; /* Adjust spacing as needed */ } -.wait-cursor, .wait-cursor * { +.wait-cursor, +.wait-cursor * { cursor: wait !important; } diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.ts b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.ts index bc6f83f..c7b8012 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.ts +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-step/plot-step.component.ts @@ -6,7 +6,8 @@ import { Input, OnDestroy, OnInit, - SimpleChanges, OnChanges, + SimpleChanges, + OnChanges, } from '@angular/core'; import { StepChannel } from '../../../../model/chan_data/stepChannel'; import { ChannelRange } from '../../../../model/chan_data/channelRange'; @@ -31,7 +32,9 @@ import { PlotUtils } from '../plot-utils'; templateUrl: './plot-step.component.html', styleUrl: './plot-step.component.scss', }) -export class PlotStepComponent implements AfterViewInit, OnInit, OnDestroy, OnChanges { +export class PlotStepComponent + implements AfterViewInit, OnInit, OnDestroy, OnChanges +{ @Input() stepChannel: StepChannel | undefined; @Input() stepGlobalParameters: StepGlobalParameters | undefined; @@ -58,6 +61,7 @@ export class PlotStepComponent implements AfterViewInit, OnInit, OnDestroy, OnCh private mutationObserver: MutationObserver | undefined; private originalBackgroundColor = ''; activeBackgroundColor = ''; + private tickColor = ''; windowHeight = window.innerHeight; windowWidth = window.innerWidth; plotWidth = this.windowWidth * 0.58; @@ -87,7 +91,7 @@ export class PlotStepComponent implements AfterViewInit, OnInit, OnDestroy, OnCh separatethousands: false, tickfont: { family: 'Roboto, "Helvetica Neue", sans-serif', - color: 'white', + color: this.tickColor, size: 9, }, dtick: 1, @@ -132,7 +136,7 @@ export class PlotStepComponent implements AfterViewInit, OnInit, OnDestroy, OnCh range: [0, 1], tickfont: { family: 'Roboto, "Helvetica Neue", sans-serif', - color: 'white', + color: this.tickColor, size: 9, }, dtick: 0.25, @@ -150,7 +154,7 @@ export class PlotStepComponent implements AfterViewInit, OnInit, OnDestroy, OnCh zeroline: false, }, yaxis2: { - tickfont: { family: 'Times New Roman', color: 'white', size: 9 }, + tickfont: { family: 'Times New Roman', color: this.tickColor, size: 9 }, anchor: 'x', overlaying: 'y', side: 'left', @@ -292,7 +296,10 @@ export class PlotStepComponent implements AfterViewInit, OnInit, OnDestroy, OnCh } this.plotData1.x = xData; this.plotData1.y = yData; - console.log('Plot data generated:', { x: this.plotData1.x, y: this.plotData1.y }); + console.log('Plot data generated:', { + x: this.plotData1.x, + y: this.plotData1.y, + }); this.plotLayout.xaxis.dtick = this.stepPoints.value / 10; } } @@ -413,8 +420,20 @@ export class PlotStepComponent implements AfterViewInit, OnInit, OnDestroy, OnCh ? this.rgbToHex(activeBg) : activeBg; + // Fetch and store tick color + const tickColorRaw = this.getCssVariableValue('--vscode-editor-foreground'); + this.tickColor = tickColorRaw.startsWith('rgb') + ? this.rgbToHex(tickColorRaw) + : tickColorRaw; + + // Update tick colors in plot layout + this.plotLayout.xaxis.tickfont.color = this.tickColor; + this.plotLayout.yaxis.tickfont.color = this.tickColor; + this.plotLayout.yaxis2.tickfont.color = this.tickColor; + console.log('Initial background color:', backgroundColorHex); console.log('Initial active background color:', this.activeBackgroundColor); + console.log('Initial tick color:', this.tickColor); } getCssVariableValue(variableName: string): string { @@ -472,11 +491,25 @@ export class PlotStepComponent implements AfterViewInit, OnInit, OnDestroy, OnCh ? this.rgbToHex(activeBg) : activeBg; + // Update tick color on theme change + const tickColorRaw = this.getCssVariableValue( + '--vscode-editor-foreground' + ); + this.tickColor = tickColorRaw.startsWith('rgb') + ? this.rgbToHex(tickColorRaw) + : tickColorRaw; + + // Update tick colors in plot layout + this.plotLayout.xaxis.tickfont.color = this.tickColor; + this.plotLayout.yaxis.tickfont.color = this.tickColor; + this.plotLayout.yaxis2.tickfont.color = this.tickColor; + console.log('Theme changed, new background color:', backgroundColorHex); console.log( 'Theme changed, new active background color:', this.activeBackgroundColor ); + console.log('Theme changed, new tick color:', this.tickColor); this.renderPlot(); }); diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.scss b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.scss index 616e991..61973e2 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.scss @@ -23,7 +23,7 @@ .plot-info { // margin-bottom: 10px; font-size: 14px; - color:black; + color: var(--vscode-activityBar-foreground); display: flex; background-color: transparent; // background-color: #F6F07D; diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.ts b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.ts index 2d720ae..03a061a 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.ts +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-sweep/plot-sweep.component.ts @@ -54,6 +54,7 @@ export class PlotSweepComponent private mutationObserver: MutationObserver | undefined; private originalBackgroundColor = ''; activeBackgroundColor = ''; + private tickColor = ''; windowHeight = window.innerHeight; windowWidth = window.innerWidth; plotWidth = this.windowWidth * 0.58; @@ -86,7 +87,7 @@ export class PlotSweepComponent separatethousands: false, tickfont: { family: 'Roboto, "Helvetica Neue", sans-serif', - color: 'white', + color: this.tickColor, size: 9, }, dtick: 1, @@ -131,7 +132,7 @@ export class PlotSweepComponent range: [0, 1], tickfont: { family: 'Roboto, "Helvetica Neue", sans-serif', - color: 'white', + color: this.tickColor, size: 9, }, dtick: 0.25, @@ -151,7 +152,7 @@ export class PlotSweepComponent yaxis2: { tickfont: { family: 'Roboto, "Helvetica Neue", sans-serif', - color: 'white', + color: this.tickColor, size: 9, }, anchor: 'x', @@ -422,8 +423,22 @@ export class PlotSweepComponent ? this.rgbToHex(activeBg) : activeBg; - // console.log('Initial background color:', backgroundColorHex); - // console.log('Initial active background color:', this.activeBackgroundColor); + // Fetch and store tick color + const tickColorRaw = this.getCssVariableValue( + '--vscode-editor-foreground' + ); + this.tickColor = tickColorRaw.startsWith('rgb') + ? this.rgbToHex(tickColorRaw) + : tickColorRaw; + + // Update tick colors in plot layout + this.plotLayout.xaxis.tickfont.color = this.tickColor; + this.plotLayout.yaxis.tickfont.color = this.tickColor; + this.plotLayout.yaxis2.tickfont.color = this.tickColor; + + console.log('Initial background color:', backgroundColorHex); + console.log('Initial active background color:', this.activeBackgroundColor); + console.log('Initial tick color:', this.tickColor); } getCssVariableValue(variableName: string): string { @@ -464,6 +479,7 @@ export class PlotSweepComponent } } + // TODO: private observeThemeChanges(): void { const root = document.documentElement; @@ -486,8 +502,22 @@ export class PlotSweepComponent ? this.rgbToHex(activeBg) : activeBg; - // console.log('Theme changed, new background color:', backgroundColorHex); - // console.log('Theme changed, new active background color:', this.activeBackgroundColor); + // Update tick color on theme change + const tickColorRaw = this.getCssVariableValue( + '--vscode-editor-foreground' + ); + this.tickColor = tickColorRaw.startsWith('rgb') + ? this.rgbToHex(tickColorRaw) + : tickColorRaw; + + // Update tick colors in plot layout + this.plotLayout.xaxis.tickfont.color = this.tickColor; + this.plotLayout.yaxis.tickfont.color = this.tickColor; + this.plotLayout.yaxis2.tickfont.color = this.tickColor; + + console.log('Theme changed, new background color:', backgroundColorHex); + console.log('Theme changed, new active background color:', this.activeBackgroundColor); + console.log('Theme changed, new tick color:', this.tickColor); this.renderPlot(); }); diff --git a/script-gen-ui/src/app/components/main-sweep/step/step.component.scss b/script-gen-ui/src/app/components/main-sweep/step/step.component.scss index 7133254..0dc861b 100644 --- a/script-gen-ui/src/app/components/main-sweep/step/step.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/step/step.component.scss @@ -162,7 +162,7 @@ h4 { } .checkbox input[type="checkbox"]:checked { - border-color: var(--vscode-activityBar-activeBorder); + border-color: #007acc; } .checkbox input[type="checkbox"]:checked::after { @@ -171,7 +171,7 @@ h4 { top: 1px; width: 5px; height: 10px; - border: solid var(--vscode-activityBar-activeBorder); + border: solid #007acc; border-width: 0 2px 2px 0; transform: rotate(45deg); display: block; @@ -186,6 +186,7 @@ h4 { appearance: none; padding: 10px; border-radius: 3px; + border: 1px solid var(--vscode-editorWidget-border); } .checkbox input[type="checkbox"] { @@ -208,7 +209,7 @@ h4 { border-radius: 13px; background-color: transparent; color: var(--vscode-activityBarBadge-foreground); - border-color: var(--vscode-activityBar-activeBorder); + border-color: #007acc; border-style: solid; border-width: thin; padding: 5px 15px; From 9ccbb33a57b33c058ab8c97a36427cbf3323118b Mon Sep 17 00:00:00 2001 From: Rajeshwari Kiwad Date: Thu, 11 Sep 2025 22:03:49 +0530 Subject: [PATCH 4/6] color change from blue to css variable --- .../controls/input-toggle/input-toggle.component.scss | 2 +- .../app/components/main-sweep/main-sweep.component.scss | 6 +++--- .../main-sweep/plot-container/plot-container.component.ts | 2 +- .../app/components/main-sweep/step/step.component.scss | 8 ++++---- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/script-gen-ui/src/app/components/controls/input-toggle/input-toggle.component.scss b/script-gen-ui/src/app/components/controls/input-toggle/input-toggle.component.scss index b86d7db..d487a00 100644 --- a/script-gen-ui/src/app/components/controls/input-toggle/input-toggle.component.scss +++ b/script-gen-ui/src/app/components/controls/input-toggle/input-toggle.component.scss @@ -43,7 +43,7 @@ td { } .toggle-option.selected { - background-color: #007acc; + background-color: var(--vscode-activityBarBadge-background); color: white; border-radius: 5px; } diff --git a/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss b/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss index 2e45136..0e73c23 100644 --- a/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss @@ -252,7 +252,7 @@ border-radius: 13px; background-color: transparent; color: var(--vscode-editor-foreground); - border-color: #007acc; + border-color: var(--vscode-activityBarBadge-background); border-style: solid; border-width: thin; padding-top: 5px; @@ -284,7 +284,7 @@ } .checkbox input[type="checkbox"]:checked { - border-color: #007acc; + border-color: var(--vscode-activityBarBadge-background); } .checkbox input[type="checkbox"]:checked::after { @@ -293,7 +293,7 @@ top: 1px; width: 5px; height: 10px; - border: solid #007acc; + border: solid var(--vscode-activityBarBadge-background); border-width: 0 2px 2px 0; transform: rotate(45deg); display: block; diff --git a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.ts b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.ts index fd30fdc..54d8505 100644 --- a/script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.ts +++ b/script-gen-ui/src/app/components/main-sweep/plot-container/plot-container.component.ts @@ -221,7 +221,7 @@ export class PlotContainerComponent implements OnInit, AfterViewInit, OnDestroy backgroundColor: isActive ? backgroundColor : 'var(--vscode-activityBar-border)', - color: isActive ? 'var(--vscode-activityBar-foreground)' : 'white', + color: isActive ? 'black' : 'var(--vscode-badge-foreground)', }; } diff --git a/script-gen-ui/src/app/components/main-sweep/step/step.component.scss b/script-gen-ui/src/app/components/main-sweep/step/step.component.scss index 0dc861b..cf67040 100644 --- a/script-gen-ui/src/app/components/main-sweep/step/step.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/step/step.component.scss @@ -162,7 +162,7 @@ h4 { } .checkbox input[type="checkbox"]:checked { - border-color: #007acc; + border-color: var(--vscode-activityBarBadge-background); } .checkbox input[type="checkbox"]:checked::after { @@ -171,7 +171,7 @@ h4 { top: 1px; width: 5px; height: 10px; - border: solid #007acc; + border: solid var(--vscode-activityBarBadge-background); border-width: 0 2px 2px 0; transform: rotate(45deg); display: block; @@ -208,8 +208,8 @@ h4 { .timing { border-radius: 13px; background-color: transparent; - color: var(--vscode-activityBarBadge-foreground); - border-color: #007acc; + color: var(--vscode-editor-foreground); + border-color: var(--vscode-activityBarBadge-background); border-style: solid; border-width: thin; padding: 5px 15px; From a4bef5ceb980ada71f2e0c07f8722efe2e64170f Mon Sep 17 00:00:00 2001 From: Rajeshwari Kiwad Date: Thu, 11 Sep 2025 22:13:44 +0530 Subject: [PATCH 5/6] List and timing close button --- .../src/app/components/main-sweep/list/list.component.scss | 2 +- .../src/app/components/main-sweep/timing/timing.component.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/script-gen-ui/src/app/components/main-sweep/list/list.component.scss b/script-gen-ui/src/app/components/main-sweep/list/list.component.scss index 1fff9d4..df04748 100644 --- a/script-gen-ui/src/app/components/main-sweep/list/list.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/list/list.component.scss @@ -94,7 +94,7 @@ .button { background-color: transparent; - color: var(--vscode-activityBarBadge-foreground); + color: var(--vscode-editor-foreground); } .button:hover { diff --git a/script-gen-ui/src/app/components/main-sweep/timing/timing.component.scss b/script-gen-ui/src/app/components/main-sweep/timing/timing.component.scss index 8b42f6f..e219f4c 100644 --- a/script-gen-ui/src/app/components/main-sweep/timing/timing.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/timing/timing.component.scss @@ -111,7 +111,7 @@ h3 { .button { background-color: transparent; - color: var(--vscode-activityBarBadge-foreground); + color: var(--vscode-editor-foreground); border: none; margin-top: 10px; } From 6ed11cea58c3abd328798dbea23c58fe8e5822d8 Mon Sep 17 00:00:00 2001 From: Rajeshwari Kiwad Date: Thu, 11 Sep 2025 22:33:50 +0530 Subject: [PATCH 6/6] Highlight color change --- .../main-sweep/main-sweep.component.scss | 2 +- .../main-sweep/step/step.component.scss | 30 +++++++++---------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss b/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss index 0e73c23..cbc6374 100644 --- a/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss @@ -310,7 +310,7 @@ } input:focus { - border: 2px solid #007bff; /* Highlight border color */ + border: 2px solid var(--vscode-activityBarBadge-background); /* Highlight border color */ outline: none; /* Remove default outline */ // background-color: #f0f8ff; /* Optional: Change background color */ } diff --git a/script-gen-ui/src/app/components/main-sweep/step/step.component.scss b/script-gen-ui/src/app/components/main-sweep/step/step.component.scss index cf67040..b83fe02 100644 --- a/script-gen-ui/src/app/components/main-sweep/step/step.component.scss +++ b/script-gen-ui/src/app/components/main-sweep/step/step.component.scss @@ -52,6 +52,12 @@ padding: 5px; } +input:focus { + border: 2px solid var(--vscode-activityBarBadge-background); /* Highlight border color */ + outline: none; /* Remove default outline */ + // background-color: #f0f8ff; /* Optional: Change background color */ +} + h4 { margin-top: 0; margin-bottom: 20px; @@ -189,21 +195,15 @@ h4 { border: 1px solid var(--vscode-editorWidget-border); } -.checkbox input[type="checkbox"] { - appearance: none; - width: 18px; - height: 18px; -} - -.input-group input[type="checkbox"]:disabled { - opacity: 0.6; - cursor: not-allowed; - background-color: var( - --vscode-editorWidget-background, - var(--vscode-input-background) - ); - border-color: var(--vscode-editorWidget-border, var(--vscode-input-border)); -} +// .input-group input[type="checkbox"]:disabled { +// opacity: 0.6; +// cursor: not-allowed; +// background-color: var( +// --vscode-editorWidget-background, +// var(--vscode-input-background) +// ); +// border-color: var(--vscode-editorWidget-border, var(--vscode-input-border)); +// } .timing { border-radius: 13px;