From 20e8d4f66967dc928b0afe31342dc7b729961765 Mon Sep 17 00:00:00 2001 From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com> Date: Wed, 3 Dec 2025 22:36:28 +0000 Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=A4=96=20fix:=20adjust=20solarized=20?= =?UTF-8?q?themes=20for=20sidebar=20icons=20and=20accent=20colors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add visual separation in solarized-dark: workspace darker than sidebar - Add --color-runtime-* CSS variables using solarized palette: - SSH: blue (#268bd2) - Worktree: violet (#6c71c4) - Local: base0 (#839496) - Update thinking colors to use solarized violet - Refactor RuntimeBadge and RuntimeIconSelector to use CSS vars instead of hardcoded Tailwind colors for theme adaptability _Generated with mux_ --- src/browser/components/RuntimeBadge.tsx | 16 +++-- .../components/RuntimeIconSelector.tsx | 16 +++-- src/browser/styles/globals.css | 62 ++++++++++++++----- 3 files changed, 65 insertions(+), 29 deletions(-) diff --git a/src/browser/components/RuntimeBadge.tsx b/src/browser/components/RuntimeBadge.tsx index e70bdf3bde..077e6b6516 100644 --- a/src/browser/components/RuntimeBadge.tsx +++ b/src/browser/components/RuntimeBadge.tsx @@ -14,20 +14,24 @@ interface RuntimeBadgeProps { } // Runtime-specific color schemes - each type has consistent colors in idle/working states +// Colors use CSS variables (--color-runtime-*) so they adapt to theme (e.g., solarized) // Idle: subtle with visible colored border for discrimination // Working: brighter colors with pulse animation const RUNTIME_STYLES = { ssh: { - idle: "bg-transparent text-muted border-blue-500/50", - working: "bg-blue-500/20 text-blue-400 border-blue-500/60 animate-pulse", + idle: "bg-transparent text-muted border-[var(--color-runtime-ssh)]/50", + working: + "bg-[var(--color-runtime-ssh)]/20 text-[var(--color-runtime-ssh)] border-[var(--color-runtime-ssh)]/60 animate-pulse", }, worktree: { - idle: "bg-transparent text-muted border-purple-500/50", - working: "bg-purple-500/20 text-purple-400 border-purple-500/60 animate-pulse", + idle: "bg-transparent text-muted border-[var(--color-runtime-worktree)]/50", + working: + "bg-[var(--color-runtime-worktree)]/20 text-[var(--color-runtime-worktree)] border-[var(--color-runtime-worktree)]/60 animate-pulse", }, local: { - idle: "bg-transparent text-muted border-muted/50", - working: "bg-muted/30 text-muted border-muted/60 animate-pulse", + idle: "bg-transparent text-muted border-[var(--color-runtime-local)]/50", + working: + "bg-[var(--color-runtime-local)]/30 text-[var(--color-runtime-local)] border-[var(--color-runtime-local)]/60 animate-pulse", }, } as const; diff --git a/src/browser/components/RuntimeIconSelector.tsx b/src/browser/components/RuntimeIconSelector.tsx index e95da78d86..2613f4d78c 100644 --- a/src/browser/components/RuntimeIconSelector.tsx +++ b/src/browser/components/RuntimeIconSelector.tsx @@ -16,19 +16,23 @@ interface RuntimeIconSelectorProps { } // Runtime-specific color schemes matching RuntimeBadge +// Colors use CSS variables (--color-runtime-*) so they adapt to theme (e.g., solarized) // Selected (active) uses the "working" styling, unselected uses "idle" const RUNTIME_STYLES = { ssh: { - idle: "bg-transparent text-muted border-blue-500/30 hover:border-blue-500/50", - active: "bg-blue-500/20 text-blue-400 border-blue-500/60", + idle: "bg-transparent text-muted border-[var(--color-runtime-ssh)]/30 hover:border-[var(--color-runtime-ssh)]/50", + active: + "bg-[var(--color-runtime-ssh)]/20 text-[var(--color-runtime-ssh)] border-[var(--color-runtime-ssh)]/60", }, worktree: { - idle: "bg-transparent text-muted border-purple-500/30 hover:border-purple-500/50", - active: "bg-purple-500/20 text-purple-400 border-purple-500/60", + idle: "bg-transparent text-muted border-[var(--color-runtime-worktree)]/30 hover:border-[var(--color-runtime-worktree)]/50", + active: + "bg-[var(--color-runtime-worktree)]/20 text-[var(--color-runtime-worktree)] border-[var(--color-runtime-worktree)]/60", }, local: { - idle: "bg-transparent text-muted border-muted/30 hover:border-muted/50", - active: "bg-muted/30 text-foreground border-muted/60", + idle: "bg-transparent text-muted border-[var(--color-runtime-local)]/30 hover:border-[var(--color-runtime-local)]/50", + active: + "bg-[var(--color-runtime-local)]/30 text-foreground border-[var(--color-runtime-local)]/60", }, } as const; diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css index dda9054231..fd978e4123 100644 --- a/src/browser/styles/globals.css +++ b/src/browser/styles/globals.css @@ -62,6 +62,11 @@ --color-thinking-mode-light: hsl(271 76% 65%); --color-thinking-border: hsl(271 76% 53%); + /* Runtime icon colors */ + --color-runtime-ssh: hsl(207 82% 51%); /* blue */ + --color-runtime-worktree: hsl(271 76% 53%); /* purple */ + --color-runtime-local: hsl(0 0% 60%); /* gray */ + /* Background & Layout */ --color-background: hsl(0 0% 12%); --color-background-secondary: hsl(60 1% 15%); @@ -300,6 +305,11 @@ --color-thinking-mode-light: hsl(271 70% 62%); --color-thinking-border: hsl(271 70% 46%); + /* Runtime icon colors */ + --color-runtime-ssh: hsl(207 82% 42%); + --color-runtime-worktree: hsl(271 70% 46%); + --color-runtime-local: hsl(210 14% 48%); + --color-background: hsl(210 33% 98%); --color-background-secondary: hsl(210 36% 95%); --color-border: hsl(210 24% 82%); @@ -519,9 +529,14 @@ --color-debug-light: hsl(205 69% 62%); --color-debug-text: hsl(205 69% 35%); - --color-thinking-mode: hsl(237 43% 60%); - --color-thinking-mode-light: hsl(237 43% 70%); - --color-thinking-border: hsl(237 43% 60%); + --color-thinking-mode: #6c71c4; /* violet */ + --color-thinking-mode-light: #8589d0; + --color-thinking-border: #6c71c4; + + /* Runtime icon colors - using solarized palette */ + --color-runtime-ssh: #268bd2; /* blue */ + --color-runtime-worktree: #6c71c4; /* violet */ + --color-runtime-local: #839496; /* base0 */ /* Background & Layout - Solarized base colors */ --color-background: #fdf6e3; /* base3 */ @@ -633,14 +648,15 @@ --color-border-subtle: #93a1a1; --color-border-gray: #93a1a1; - --color-dark: #fdf6e3; - --color-darker: #eee8d5; + /* Three-zone backgrounds: sidebar (base2), workspace (base3), input (between) */ + --color-dark: #fdf6e3; /* base3 - main workspace */ + --color-darker: #eee8d5; /* base2 */ --color-hover: #e5dfcc; --color-bg-medium: #ddd6c3; --color-bg-light: #d5ceb8; --color-bg-subtle: #eee8d5; - --color-separator: #eee8d5; + --color-separator: #eee8d5; /* base2 - sidebar background */ --color-separator-light: #f5efdc; --color-modal-bg: #fdf6e3; @@ -724,13 +740,24 @@ --color-debug-light: hsl(205 69% 62%); --color-debug-text: hsl(205 69% 70%); - --color-thinking-mode: hsl(237 43% 60%); - --color-thinking-mode-light: hsl(237 43% 70%); - --color-thinking-border: hsl(237 43% 60%); - - /* Background & Layout - Solarized dark base colors */ - --color-background: #002b36; /* base03 */ - --color-background-secondary: #073642; /* base02 */ + --color-thinking-mode: #6c71c4; /* violet */ + --color-thinking-mode-light: #8589d0; + --color-thinking-border: #6c71c4; + + /* Runtime icon colors - using solarized palette */ + --color-runtime-ssh: #268bd2; /* blue */ + --color-runtime-worktree: #6c71c4; /* violet */ + --color-runtime-local: #839496; /* base0 */ + + /* Background & Layout - Solarized dark base colors + Palette reference: + base03 #002b36 (darkest) base3 #fdf6e3 (lightest) + base02 #073642 base2 #eee8d5 + base01 #586e75 base1 #93a1a1 + base00 #657b83 base0 #839496 + */ + --color-background: #002b36; /* base03 - main background */ + --color-background-secondary: #073642; /* base02 - secondary surfaces */ --color-border: #586e75; /* base01 */ --color-foreground: #839496; /* base0 */ --color-text: #839496; @@ -838,15 +865,16 @@ --color-border-subtle: #586e75; --color-border-gray: #586e75; - --color-dark: #002b36; - --color-darker: #00232d; + /* Three-zone backgrounds: sidebar (base02), workspace (base03), input (between) */ + --color-dark: #001f29; /* slightly darker than base03 for workspace */ + --color-darker: #001a22; --color-hover: #0a4555; --color-bg-medium: #0d5566; --color-bg-light: #106577; --color-bg-subtle: #073642; - --color-separator: #073642; - --color-separator-light: #0a4555; + --color-separator: #073642; /* base02 - sidebar background */ + --color-separator-light: #094555; /* slightly lighter for hover states */ --color-modal-bg: #073642; --color-accent: #268bd2; /* blue */ From d61dff9819834fba944c9dcb7e8319bb3cda6c1a Mon Sep 17 00:00:00 2001 From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com> Date: Thu, 4 Dec 2025 10:22:33 +0000 Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=A4=96=20fix:=20use=20CSS=20variables?= =?UTF-8?q?=20for=20thinking=20slider=20colors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace hardcoded HSL values with --color-thinking-mode CSS variable so the slider adapts to theme (especially solarized). _Generated with mux_ --- src/browser/components/ThinkingSlider.tsx | 51 ++++++++++++++--------- src/browser/styles/globals.css | 4 +- 2 files changed, 33 insertions(+), 22 deletions(-) diff --git a/src/browser/components/ThinkingSlider.tsx b/src/browser/components/ThinkingSlider.tsx index c18c4f29d8..fd24ea0846 100644 --- a/src/browser/components/ThinkingSlider.tsx +++ b/src/browser/components/ThinkingSlider.tsx @@ -7,48 +7,59 @@ import { getThinkingPolicyForModel } from "@/browser/utils/thinking/policy"; import { updatePersistedState } from "@/browser/hooks/usePersistedState"; import { getLastThinkingByModelKey } from "@/common/constants/storage"; -// Subtle consistent glow for active levels -const GLOW = { - track: "0 0 6px 1px hsl(271 76% 53% / 0.3)", - thumb: "0 0 4px 1px hsl(271 76% 53% / 0.3)", -}; - +// Uses CSS variable --color-thinking-mode for theme compatibility +// Glow is applied via CSS using color-mix with the theme color const GLOW_INTENSITIES: Record = { 0: { track: "none", thumb: "none" }, - 1: GLOW, - 2: GLOW, - 3: GLOW, + 1: { + track: "0 0 6px 1px color-mix(in srgb, var(--color-thinking-mode) 30%, transparent)", + thumb: "0 0 4px 1px color-mix(in srgb, var(--color-thinking-mode) 30%, transparent)", + }, + 2: { + track: "0 0 6px 1px color-mix(in srgb, var(--color-thinking-mode) 30%, transparent)", + thumb: "0 0 4px 1px color-mix(in srgb, var(--color-thinking-mode) 30%, transparent)", + }, + 3: { + track: "0 0 6px 1px color-mix(in srgb, var(--color-thinking-mode) 30%, transparent)", + thumb: "0 0 4px 1px color-mix(in srgb, var(--color-thinking-mode) 30%, transparent)", + }, }; -// Continuous function for text styling based on level (n: 0-3) -const getTextStyle = (n: number) => { +// Text styling based on level (n: 0-3) +// Uses CSS variables for theme compatibility +const getTextStyle = (n: number): React.CSSProperties => { if (n === 0) { return { - color: "#606060", + color: "var(--color-muted)", fontWeight: 400, textShadow: "none", fontSize: "10px", }; } - // Continuous interpolation for n = 1-3 - const hue = 271 + (n - 1) * 7; // 271 → 278 → 285 - const lightness = 65 - (n - 1) * 5; // 65 → 60 → 55 + // Active levels use the thinking mode color with increasing intensity const fontWeight = 400 + n * 100; // 500 → 600 → 700 - const shadowBlur = n * 4; // 4 → 8 → 12 - const shadowOpacity = 0.3 + n * 0.15; // 0.45 → 0.6 → 0.75 + // Use color-mix to lighten the base color for lower levels + const lightnessAdjust = (3 - n) * 10; // high=0%, medium=10%, low=20% lighter return { - color: `hsl(${hue} 76% ${lightness}%)`, + color: + lightnessAdjust > 0 + ? `color-mix(in srgb, var(--color-thinking-mode-light) ${lightnessAdjust}%, var(--color-thinking-mode))` + : "var(--color-thinking-mode)", fontWeight, - textShadow: `0 0 ${shadowBlur}px hsl(${hue} 76% ${lightness}% / ${shadowOpacity})`, + textShadow: + n > 0 + ? `0 0 ${n * 4}px color-mix(in srgb, var(--color-thinking-mode) ${30 + n * 15}%, transparent)` + : "none", fontSize: "10px", }; }; const getSliderStyles = (value: number, isHover = false) => { const effectiveValue = isHover ? Math.min(value + 1, 3) : value; - const thumbBg = value === 0 ? "#606060" : `hsl(271 76% ${53 + value * 5}%)`; + // Use CSS variable for thumb color when active + const thumbBg = value === 0 ? "var(--color-muted)" : "var(--color-thinking-mode)"; return { trackShadow: GLOW_INTENSITIES[effectiveValue].track, diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css index fd978e4123..98c5016508 100644 --- a/src/browser/styles/globals.css +++ b/src/browser/styles/globals.css @@ -1622,7 +1622,7 @@ pre code { width: 12px; height: 12px; border-radius: 50%; - background: var(--thumb-bg, #606060); + background: var(--thumb-bg, var(--color-muted)); cursor: pointer; transition: background 0.2s ease, @@ -1634,7 +1634,7 @@ pre code { width: 12px; height: 12px; border-radius: 50%; - background: var(--thumb-bg, #606060); + background: var(--thumb-bg, var(--color-muted)); cursor: pointer; border: none; transition: From 822fb5ebb538fae09cc26938b4a39b1707a6af28 Mon Sep 17 00:00:00 2001 From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com> Date: Thu, 4 Dec 2025 10:24:52 +0000 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=A4=96=20fix:=20simplify=20thinking?= =?UTF-8?q?=20label=20to=20use=20CSS=20variable=20directly?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The color-mix syntax wasn't working in inline styles. Use the CSS variables directly: --color-thinking-mode-light for LOW, --color-thinking-mode for MEDIUM/HIGH. _Generated with mux_ --- src/browser/components/ThinkingSlider.tsx | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/src/browser/components/ThinkingSlider.tsx b/src/browser/components/ThinkingSlider.tsx index fd24ea0846..3d267983bb 100644 --- a/src/browser/components/ThinkingSlider.tsx +++ b/src/browser/components/ThinkingSlider.tsx @@ -37,21 +37,14 @@ const getTextStyle = (n: number): React.CSSProperties => { }; } - // Active levels use the thinking mode color with increasing intensity + // Active levels use the thinking mode color + // Low uses lighter variant, medium/high use main color const fontWeight = 400 + n * 100; // 500 → 600 → 700 - // Use color-mix to lighten the base color for lower levels - const lightnessAdjust = (3 - n) * 10; // high=0%, medium=10%, low=20% lighter return { - color: - lightnessAdjust > 0 - ? `color-mix(in srgb, var(--color-thinking-mode-light) ${lightnessAdjust}%, var(--color-thinking-mode))` - : "var(--color-thinking-mode)", + color: n === 1 ? "var(--color-thinking-mode-light)" : "var(--color-thinking-mode)", fontWeight, - textShadow: - n > 0 - ? `0 0 ${n * 4}px color-mix(in srgb, var(--color-thinking-mode) ${30 + n * 15}%, transparent)` - : "none", + textShadow: "none", fontSize: "10px", }; }; From 027b4d331613790bf969b967fd9c4f1bda269af9 Mon Sep 17 00:00:00 2001 From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com> Date: Thu, 4 Dec 2025 12:04:28 +0000 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=A4=96=20fix:=20restore=20default=20t?= =?UTF-8?q?heme=20runtime=20colors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reverts the runtime icon colors in default light/dark themes to match the original Tailwind values (blue-500, purple-500) exactly, avoiding visual regression. Solarized themes keep the new solarized-palette values. _Generated with mux_ --- src/browser/styles/globals.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css index 98c5016508..d281f86f6c 100644 --- a/src/browser/styles/globals.css +++ b/src/browser/styles/globals.css @@ -62,10 +62,10 @@ --color-thinking-mode-light: hsl(271 76% 65%); --color-thinking-border: hsl(271 76% 53%); - /* Runtime icon colors */ - --color-runtime-ssh: hsl(207 82% 51%); /* blue */ - --color-runtime-worktree: hsl(271 76% 53%); /* purple */ - --color-runtime-local: hsl(0 0% 60%); /* gray */ + /* Runtime icon colors (matches Tailwind blue-500/purple-500) */ + --color-runtime-ssh: #3b82f6; + --color-runtime-worktree: #a855f7; + --color-runtime-local: hsl(0 0% 60%); /* matches --color-muted-foreground */ /* Background & Layout */ --color-background: hsl(0 0% 12%); @@ -305,10 +305,10 @@ --color-thinking-mode-light: hsl(271 70% 62%); --color-thinking-border: hsl(271 70% 46%); - /* Runtime icon colors */ - --color-runtime-ssh: hsl(207 82% 42%); - --color-runtime-worktree: hsl(271 70% 46%); - --color-runtime-local: hsl(210 14% 48%); + /* Runtime icon colors (matches Tailwind blue-500/purple-500) */ + --color-runtime-ssh: #3b82f6; + --color-runtime-worktree: #a855f7; + --color-runtime-local: hsl(210 14% 48%); /* matches --color-muted-foreground */ --color-background: hsl(210 33% 98%); --color-background-secondary: hsl(210 36% 95%); From 96f8daa925eeb25bdd2e18b96ef3ad11003c7d44 Mon Sep 17 00:00:00 2001 From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com> Date: Thu, 4 Dec 2025 12:22:36 +0000 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=A4=96=20fix:=20minimize=20visual=20r?= =?UTF-8?q?egression=20in=20default=20themes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Restore runtime icon text colors in default themes to match original (lighter shades) - Use --color-text-secondary for ThinkingSlider 'off' state to match original gray - Ensure Solarized themes use consistent palette colors _Generated with mux_ --- src/browser/components/RuntimeBadge.tsx | 4 ++-- src/browser/components/RuntimeIconSelector.tsx | 4 ++-- src/browser/components/ThinkingSlider.tsx | 4 ++-- src/browser/styles/globals.css | 8 ++++++++ 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/browser/components/RuntimeBadge.tsx b/src/browser/components/RuntimeBadge.tsx index 077e6b6516..d0608bf7e7 100644 --- a/src/browser/components/RuntimeBadge.tsx +++ b/src/browser/components/RuntimeBadge.tsx @@ -21,12 +21,12 @@ const RUNTIME_STYLES = { ssh: { idle: "bg-transparent text-muted border-[var(--color-runtime-ssh)]/50", working: - "bg-[var(--color-runtime-ssh)]/20 text-[var(--color-runtime-ssh)] border-[var(--color-runtime-ssh)]/60 animate-pulse", + "bg-[var(--color-runtime-ssh)]/20 text-[var(--color-runtime-ssh-text)] border-[var(--color-runtime-ssh)]/60 animate-pulse", }, worktree: { idle: "bg-transparent text-muted border-[var(--color-runtime-worktree)]/50", working: - "bg-[var(--color-runtime-worktree)]/20 text-[var(--color-runtime-worktree)] border-[var(--color-runtime-worktree)]/60 animate-pulse", + "bg-[var(--color-runtime-worktree)]/20 text-[var(--color-runtime-worktree-text)] border-[var(--color-runtime-worktree)]/60 animate-pulse", }, local: { idle: "bg-transparent text-muted border-[var(--color-runtime-local)]/50", diff --git a/src/browser/components/RuntimeIconSelector.tsx b/src/browser/components/RuntimeIconSelector.tsx index 2613f4d78c..a19ba2fcd1 100644 --- a/src/browser/components/RuntimeIconSelector.tsx +++ b/src/browser/components/RuntimeIconSelector.tsx @@ -22,12 +22,12 @@ const RUNTIME_STYLES = { ssh: { idle: "bg-transparent text-muted border-[var(--color-runtime-ssh)]/30 hover:border-[var(--color-runtime-ssh)]/50", active: - "bg-[var(--color-runtime-ssh)]/20 text-[var(--color-runtime-ssh)] border-[var(--color-runtime-ssh)]/60", + "bg-[var(--color-runtime-ssh)]/20 text-[var(--color-runtime-ssh-text)] border-[var(--color-runtime-ssh)]/60", }, worktree: { idle: "bg-transparent text-muted border-[var(--color-runtime-worktree)]/30 hover:border-[var(--color-runtime-worktree)]/50", active: - "bg-[var(--color-runtime-worktree)]/20 text-[var(--color-runtime-worktree)] border-[var(--color-runtime-worktree)]/60", + "bg-[var(--color-runtime-worktree)]/20 text-[var(--color-runtime-worktree-text)] border-[var(--color-runtime-worktree)]/60", }, local: { idle: "bg-transparent text-muted border-[var(--color-runtime-local)]/30 hover:border-[var(--color-runtime-local)]/50", diff --git a/src/browser/components/ThinkingSlider.tsx b/src/browser/components/ThinkingSlider.tsx index 3d267983bb..ad2f4b50cd 100644 --- a/src/browser/components/ThinkingSlider.tsx +++ b/src/browser/components/ThinkingSlider.tsx @@ -30,7 +30,7 @@ const GLOW_INTENSITIES: Record = { const getTextStyle = (n: number): React.CSSProperties => { if (n === 0) { return { - color: "var(--color-muted)", + color: "var(--color-text-secondary)", fontWeight: 400, textShadow: "none", fontSize: "10px", @@ -52,7 +52,7 @@ const getTextStyle = (n: number): React.CSSProperties => { const getSliderStyles = (value: number, isHover = false) => { const effectiveValue = isHover ? Math.min(value + 1, 3) : value; // Use CSS variable for thumb color when active - const thumbBg = value === 0 ? "var(--color-muted)" : "var(--color-thinking-mode)"; + const thumbBg = value === 0 ? "var(--color-text-secondary)" : "var(--color-thinking-mode)"; return { trackShadow: GLOW_INTENSITIES[effectiveValue].track, diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css index d281f86f6c..d032fa4068 100644 --- a/src/browser/styles/globals.css +++ b/src/browser/styles/globals.css @@ -64,7 +64,9 @@ /* Runtime icon colors (matches Tailwind blue-500/purple-500) */ --color-runtime-ssh: #3b82f6; + --color-runtime-ssh-text: #60a5fa; /* blue-400 */ --color-runtime-worktree: #a855f7; + --color-runtime-worktree-text: #c084fc; /* purple-400 */ --color-runtime-local: hsl(0 0% 60%); /* matches --color-muted-foreground */ /* Background & Layout */ @@ -307,7 +309,9 @@ /* Runtime icon colors (matches Tailwind blue-500/purple-500) */ --color-runtime-ssh: #3b82f6; + --color-runtime-ssh-text: #60a5fa; --color-runtime-worktree: #a855f7; + --color-runtime-worktree-text: #c084fc; --color-runtime-local: hsl(210 14% 48%); /* matches --color-muted-foreground */ --color-background: hsl(210 33% 98%); @@ -535,7 +539,9 @@ /* Runtime icon colors - using solarized palette */ --color-runtime-ssh: #268bd2; /* blue */ + --color-runtime-ssh-text: #268bd2; --color-runtime-worktree: #6c71c4; /* violet */ + --color-runtime-worktree-text: #6c71c4; --color-runtime-local: #839496; /* base0 */ /* Background & Layout - Solarized base colors */ @@ -746,7 +752,9 @@ /* Runtime icon colors - using solarized palette */ --color-runtime-ssh: #268bd2; /* blue */ + --color-runtime-ssh-text: #268bd2; --color-runtime-worktree: #6c71c4; /* violet */ + --color-runtime-worktree-text: #6c71c4; --color-runtime-local: #839496; /* base0 */ /* Background & Layout - Solarized dark base colors