From a6a243eaf0034fb6e584274f56173dcdb529c4c8 Mon Sep 17 00:00:00 2001 From: Andrew T Date: Thu, 21 Aug 2025 14:24:43 +0930 Subject: [PATCH 1/3] edited inactive tab color --- src/stack.ts | 28 ++++++++++++++++------------ src/utils.ts | 28 ++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 12 deletions(-) diff --git a/src/stack.ts b/src/stack.ts index 60d553bb..c32f42b1 100644 --- a/src/stack.ts +++ b/src/stack.ts @@ -14,7 +14,7 @@ import St from 'gi://St'; const ACTIVE_TAB = 'pop-shell-tab pop-shell-tab-active'; const INACTIVE_TAB = 'pop-shell-tab pop-shell-tab-inactive'; const URGENT_TAB = 'pop-shell-tab pop-shell-tab-urgent'; -const INACTIVE_TAB_STYLE = '#9B8E8A'; +const INACTIVE_DARKEN_AMOUNT = -0.2; export var TAB_HEIGHT: number = 24; @@ -246,17 +246,20 @@ export class Stack { let button = this.buttons.get(component.button); if (button) { button.set_style_class_name(name); - let tab_color = ''; + + let settings = this.ext.settings; + let color_value = settings.hint_color_rgba(); + + let tab_style = ''; if (component.active) { - let settings = this.ext.settings; - let color_value = settings.hint_color_rgba(); - tab_color = `${color_value}; color: ${utils.is_dark(color_value) ? 'white' : 'black'}`; + tab_style = `background: ${color_value}; color: ${utils.is_dark(color_value) ? 'white' : 'black'};`; } else { - tab_color = `${INACTIVE_TAB_STYLE}`; + tab_style = `background: ${utils.shadeRGBA(color_value, INACTIVE_DARKEN_AMOUNT)}; ` + + `color: ${utils.is_dark(color_value) ? '#858585' : 'black'}`; } const tab_border_radius = this.get_tab_border_radius(idx); - button.set_style(`background: ${tab_color}; border-radius: ${tab_border_radius};`); + button.set_style(`${tab_style} border-radius: ${tab_border_radius};`); } }); @@ -349,14 +352,15 @@ export class Stack { let settings = this.ext.settings; let button = this.buttons.get(tab.button); if (button) { - let tab_color = ''; + let tab_style = ''; + let color_value = settings.hint_color_rgba(); if (Ecs.entity_eq(tab.entity, this.active)) { - let color_value = settings.hint_color_rgba(); - tab_color = `background: ${color_value}; color: ${utils.is_dark(color_value) ? 'white' : 'black'}`; + tab_style = `background: ${color_value}; color: ${utils.is_dark(color_value) ? 'white' : 'black'};`; } else { - tab_color = `background: ${INACTIVE_TAB_STYLE}`; + tab_style = `background: ${utils.shadeRGBA(color_value, INACTIVE_DARKEN_AMOUNT)}; ` + + `color: ${utils.is_dark(color_value) ? '#858585' : 'black'};`; } - button.set_style(tab_color); + button.set_style(tab_style); } } diff --git a/src/utils.ts b/src/utils.ts index e89a15c6..6ba376dd 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -82,6 +82,34 @@ export function is_dark(color: string): boolean { return L <= 0.179; } +/** + * Shades an rgba string. + * @param rgba format: 'rgba(255,255,255,1.0)' + * @param percent -0.2 to make 20% darker, 0.3 to make 30% lighter + * @returns the shaded rgba string + */ +export function shadeRGBA(rgba: string, percent: number): string { + + // handle rgba(255,255,255,1.0) format + const match = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*([0-9.]+)?\)/); + if (!match) return rgba; + + let [, r, g, b, a] = match; + let rNum = parseInt(r, 10); + let gNum = parseInt(g, 10); + let bNum = parseInt(b, 10); + let aNum = a !== undefined ? parseFloat(a) : 1; + + // adjust brightness: percent > 0 lighten, percent < 0 darken + const adjust = (c: number) => Math.min(255, Math.max(0, Math.round(c + c * percent))); + + rNum = adjust(rNum); + gNum = adjust(gNum); + bNum = adjust(bNum); + + return `rgba(${rNum}, ${gNum}, ${bNum}, ${aNum})`; +} + /** Utility function for running a process in the background and fetching its standard output as a string. */ export function async_process(argv: Array, input = null, cancellable: null | any = null): Promise { let flags = Gio.SubprocessFlags.STDOUT_PIPE; From 16202c7ad754e4c41265db00ed153127e5e22ce8 Mon Sep 17 00:00:00 2001 From: Diep Nhat An Andrew Tran <105617622+andrewtran3643@users.noreply.github.com> Date: Thu, 21 Aug 2025 15:05:44 +0930 Subject: [PATCH 2/3] Update stack.js --- src/stack.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stack.ts b/src/stack.ts index c32f42b1..b29d0b49 100644 --- a/src/stack.ts +++ b/src/stack.ts @@ -255,7 +255,7 @@ export class Stack { tab_style = `background: ${color_value}; color: ${utils.is_dark(color_value) ? 'white' : 'black'};`; } else { tab_style = `background: ${utils.shadeRGBA(color_value, INACTIVE_DARKEN_AMOUNT)}; ` + - `color: ${utils.is_dark(color_value) ? '#858585' : 'black'}`; + `color: ${utils.is_dark(color_value) ? '#858585' : 'black'};`; } const tab_border_radius = this.get_tab_border_radius(idx); From 3b5d618f6d4131e82defd3a0b6cc91196892b703 Mon Sep 17 00:00:00 2001 From: Diep Nhat An Andrew Tran <105617622+andrewtran3643@users.noreply.github.com> Date: Sat, 23 Aug 2025 15:55:50 +0930 Subject: [PATCH 3/3] edited inactive text color for light active hint colors, edited the text color of inactive tabs to blend in indicating inactivity --- src/stack.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stack.ts b/src/stack.ts index b29d0b49..332cf87a 100644 --- a/src/stack.ts +++ b/src/stack.ts @@ -255,7 +255,7 @@ export class Stack { tab_style = `background: ${color_value}; color: ${utils.is_dark(color_value) ? 'white' : 'black'};`; } else { tab_style = `background: ${utils.shadeRGBA(color_value, INACTIVE_DARKEN_AMOUNT)}; ` + - `color: ${utils.is_dark(color_value) ? '#858585' : 'black'};`; + `color: ${utils.is_dark(color_value) ? '#858585' : '#3d3d3d'};`; } const tab_border_radius = this.get_tab_border_radius(idx); @@ -358,7 +358,7 @@ export class Stack { tab_style = `background: ${color_value}; color: ${utils.is_dark(color_value) ? 'white' : 'black'};`; } else { tab_style = `background: ${utils.shadeRGBA(color_value, INACTIVE_DARKEN_AMOUNT)}; ` + - `color: ${utils.is_dark(color_value) ? '#858585' : 'black'};`; + `color: ${utils.is_dark(color_value) ? '#858585' : '#3d3d3d'};`; } button.set_style(tab_style); }