Skip to content

Commit 774fa25

Browse files
ibetitsmikeibetitsmike
authored
🤖 fix: adjust solarized themes for sidebar icons and accent colors (#898)
## Summary Adjusts the solarized themes to properly use the solarized color palette for: - Runtime icons (local/worktree/SSH) - Thinking slider and label - Visual separation between sidebar, workspace, and input areas ## Changes ### Theme colors - Add `--color-runtime-*` CSS variables using solarized palette: - SSH: blue (`#268bd2`) - Worktree: violet (`#6c71c4`) - Local: base0 (`#839496`) - Update thinking colors to use solarized violet (`#6c71c4`) - Create visual separation in solarized-dark: workspace slightly darker than sidebar ### Component updates - Refactor `RuntimeBadge` and `RuntimeIconSelector` to use CSS variables instead of hardcoded Tailwind colors - Update `ThinkingSlider` to use `--color-thinking-mode` CSS variable for label and glow effects _Generated with `mux`_
1 parent f95ac92 commit 774fa25

File tree

4 files changed

+99
-51
lines changed

4 files changed

+99
-51
lines changed

‎src/browser/components/RuntimeBadge.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,24 @@ interface RuntimeBadgeProps {
1414
}
1515

1616
// Runtime-specific color schemes - each type has consistent colors in idle/working states
17+
// Colors use CSS variables (--color-runtime-*) so they adapt to theme (e.g., solarized)
1718
// Idle: subtle with visible colored border for discrimination
1819
// Working: brighter colors with pulse animation
1920
const RUNTIME_STYLES = {
2021
ssh: {
21-
idle: "bg-transparent text-muted border-blue-500/50",
22-
working: "bg-blue-500/20 text-blue-400 border-blue-500/60 animate-pulse",
22+
idle: "bg-transparent text-muted border-[var(--color-runtime-ssh)]/50",
23+
working:
24+
"bg-[var(--color-runtime-ssh)]/20 text-[var(--color-runtime-ssh-text)] border-[var(--color-runtime-ssh)]/60 animate-pulse",
2325
},
2426
worktree: {
25-
idle: "bg-transparent text-muted border-purple-500/50",
26-
working: "bg-purple-500/20 text-purple-400 border-purple-500/60 animate-pulse",
27+
idle: "bg-transparent text-muted border-[var(--color-runtime-worktree)]/50",
28+
working:
29+
"bg-[var(--color-runtime-worktree)]/20 text-[var(--color-runtime-worktree-text)] border-[var(--color-runtime-worktree)]/60 animate-pulse",
2730
},
2831
local: {
29-
idle: "bg-transparent text-muted border-muted/50",
30-
working: "bg-muted/30 text-muted border-muted/60 animate-pulse",
32+
idle: "bg-transparent text-muted border-[var(--color-runtime-local)]/50",
33+
working:
34+
"bg-[var(--color-runtime-local)]/30 text-[var(--color-runtime-local)] border-[var(--color-runtime-local)]/60 animate-pulse",
3135
},
3236
} as const;
3337

‎src/browser/components/RuntimeIconSelector.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,23 @@ interface RuntimeIconSelectorProps {
1616
}
1717

1818
// Runtime-specific color schemes matching RuntimeBadge
19+
// Colors use CSS variables (--color-runtime-*) so they adapt to theme (e.g., solarized)
1920
// Selected (active) uses the "working" styling, unselected uses "idle"
2021
const RUNTIME_STYLES = {
2122
ssh: {
22-
idle: "bg-transparent text-muted border-blue-500/30 hover:border-blue-500/50",
23-
active: "bg-blue-500/20 text-blue-400 border-blue-500/60",
23+
idle: "bg-transparent text-muted border-[var(--color-runtime-ssh)]/30 hover:border-[var(--color-runtime-ssh)]/50",
24+
active:
25+
"bg-[var(--color-runtime-ssh)]/20 text-[var(--color-runtime-ssh-text)] border-[var(--color-runtime-ssh)]/60",
2426
},
2527
worktree: {
26-
idle: "bg-transparent text-muted border-purple-500/30 hover:border-purple-500/50",
27-
active: "bg-purple-500/20 text-purple-400 border-purple-500/60",
28+
idle: "bg-transparent text-muted border-[var(--color-runtime-worktree)]/30 hover:border-[var(--color-runtime-worktree)]/50",
29+
active:
30+
"bg-[var(--color-runtime-worktree)]/20 text-[var(--color-runtime-worktree-text)] border-[var(--color-runtime-worktree)]/60",
2831
},
2932
local: {
30-
idle: "bg-transparent text-muted border-muted/30 hover:border-muted/50",
31-
active: "bg-muted/30 text-foreground border-muted/60",
33+
idle: "bg-transparent text-muted border-[var(--color-runtime-local)]/30 hover:border-[var(--color-runtime-local)]/50",
34+
active:
35+
"bg-[var(--color-runtime-local)]/30 text-foreground border-[var(--color-runtime-local)]/60",
3236
},
3337
} as const;
3438

‎src/browser/components/ThinkingSlider.tsx‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,48 +7,52 @@ import { getThinkingPolicyForModel } from "@/browser/utils/thinking/policy";
77
import { updatePersistedState } from "@/browser/hooks/usePersistedState";
88
import { getLastThinkingByModelKey } from "@/common/constants/storage";
99

10-
// Subtle consistent glow for active levels
11-
const GLOW = {
12-
track: "0 0 6px 1px hsl(271 76% 53% / 0.3)",
13-
thumb: "0 0 4px 1px hsl(271 76% 53% / 0.3)",
14-
};
15-
10+
// Uses CSS variable --color-thinking-mode for theme compatibility
11+
// Glow is applied via CSS using color-mix with the theme color
1612
const GLOW_INTENSITIES: Record<number, { track: string; thumb: string }> = {
1713
0: { track: "none", thumb: "none" },
18-
1: GLOW,
19-
2: GLOW,
20-
3: GLOW,
14+
1: {
15+
track: "0 0 6px 1px color-mix(in srgb, var(--color-thinking-mode) 30%, transparent)",
16+
thumb: "0 0 4px 1px color-mix(in srgb, var(--color-thinking-mode) 30%, transparent)",
17+
},
18+
2: {
19+
track: "0 0 6px 1px color-mix(in srgb, var(--color-thinking-mode) 30%, transparent)",
20+
thumb: "0 0 4px 1px color-mix(in srgb, var(--color-thinking-mode) 30%, transparent)",
21+
},
22+
3: {
23+
track: "0 0 6px 1px color-mix(in srgb, var(--color-thinking-mode) 30%, transparent)",
24+
thumb: "0 0 4px 1px color-mix(in srgb, var(--color-thinking-mode) 30%, transparent)",
25+
},
2126
};
2227

23-
// Continuous function for text styling based on level (n: 0-3)
24-
const getTextStyle = (n: number) => {
28+
// Text styling based on level (n: 0-3)
29+
// Uses CSS variables for theme compatibility
30+
const getTextStyle = (n: number): React.CSSProperties => {
2531
if (n === 0) {
2632
return {
27-
color: "#606060",
33+
color: "var(--color-text-secondary)",
2834
fontWeight: 400,
2935
textShadow: "none",
3036
fontSize: "10px",
3137
};
3238
}
3339

34-
// Continuous interpolation for n = 1-3
35-
const hue = 271 + (n - 1) * 7; // 271 → 278 → 285
36-
const lightness = 65 - (n - 1) * 5; // 65 → 60 → 55
40+
// Active levels use the thinking mode color
41+
// Low uses lighter variant, medium/high use main color
3742
const fontWeight = 400 + n * 100; // 500 → 600 → 700
38-
const shadowBlur = n * 4; // 4 → 8 → 12
39-
const shadowOpacity = 0.3 + n * 0.15; // 0.45 → 0.6 → 0.75
4043

4144
return {
42-
color: `hsl(${hue} 76% ${lightness}%)`,
45+
color: n === 1 ? "var(--color-thinking-mode-light)" : "var(--color-thinking-mode)",
4346
fontWeight,
44-
textShadow: `0 0 ${shadowBlur}px hsl(${hue} 76% ${lightness}% / ${shadowOpacity})`,
47+
textShadow: "none",
4548
fontSize: "10px",
4649
};
4750
};
4851

4952
const getSliderStyles = (value: number, isHover = false) => {
5053
const effectiveValue = isHover ? Math.min(value + 1, 3) : value;
51-
const thumbBg = value === 0 ? "#606060" : `hsl(271 76% ${53 + value * 5}%)`;
54+
// Use CSS variable for thumb color when active
55+
const thumbBg = value === 0 ? "var(--color-text-secondary)" : "var(--color-thinking-mode)";
5256

5357
return {
5458
trackShadow: GLOW_INTENSITIES[effectiveValue].track,

‎src/browser/styles/globals.css‎

Lines changed: 55 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,13 @@
6262
--color-thinking-mode-light: hsl(271 76% 65%);
6363
--color-thinking-border: hsl(271 76% 53%);
6464

65+
/* Runtime icon colors (matches Tailwind blue-500/purple-500) */
66+
--color-runtime-ssh: #3b82f6;
67+
--color-runtime-ssh-text: #60a5fa; /* blue-400 */
68+
--color-runtime-worktree: #a855f7;
69+
--color-runtime-worktree-text: #c084fc; /* purple-400 */
70+
--color-runtime-local: hsl(0 0% 60%); /* matches --color-muted-foreground */
71+
6572
/* Background & Layout */
6673
--color-background: hsl(0 0% 12%);
6774
--color-background-secondary: hsl(60 1% 15%);
@@ -300,6 +307,13 @@
300307
--color-thinking-mode-light: hsl(271 70% 62%);
301308
--color-thinking-border: hsl(271 70% 46%);
302309

310+
/* Runtime icon colors (matches Tailwind blue-500/purple-500) */
311+
--color-runtime-ssh: #3b82f6;
312+
--color-runtime-ssh-text: #60a5fa;
313+
--color-runtime-worktree: #a855f7;
314+
--color-runtime-worktree-text: #c084fc;
315+
--color-runtime-local: hsl(210 14% 48%); /* matches --color-muted-foreground */
316+
303317
--color-background: hsl(210 33% 98%);
304318
--color-background-secondary: hsl(210 36% 95%);
305319
--color-border: hsl(210 24% 82%);
@@ -519,9 +533,16 @@
519533
--color-debug-light: hsl(205 69% 62%);
520534
--color-debug-text: hsl(205 69% 35%);
521535

522-
--color-thinking-mode: hsl(237 43% 60%);
523-
--color-thinking-mode-light: hsl(237 43% 70%);
524-
--color-thinking-border: hsl(237 43% 60%);
536+
--color-thinking-mode: #6c71c4; /* violet */
537+
--color-thinking-mode-light: #8589d0;
538+
--color-thinking-border: #6c71c4;
539+
540+
/* Runtime icon colors - using solarized palette */
541+
--color-runtime-ssh: #268bd2; /* blue */
542+
--color-runtime-ssh-text: #268bd2;
543+
--color-runtime-worktree: #6c71c4; /* violet */
544+
--color-runtime-worktree-text: #6c71c4;
545+
--color-runtime-local: #839496; /* base0 */
525546

526547
/* Background & Layout - Solarized base colors */
527548
--color-background: #fdf6e3; /* base3 */
@@ -633,14 +654,15 @@
633654
--color-border-subtle: #93a1a1;
634655
--color-border-gray: #93a1a1;
635656

636-
--color-dark: #fdf6e3;
637-
--color-darker: #eee8d5;
657+
/* Three-zone backgrounds: sidebar (base2), workspace (base3), input (between) */
658+
--color-dark: #fdf6e3; /* base3 - main workspace */
659+
--color-darker: #eee8d5; /* base2 */
638660
--color-hover: #e5dfcc;
639661
--color-bg-medium: #ddd6c3;
640662
--color-bg-light: #d5ceb8;
641663
--color-bg-subtle: #eee8d5;
642664

643-
--color-separator: #eee8d5;
665+
--color-separator: #eee8d5; /* base2 - sidebar background */
644666
--color-separator-light: #f5efdc;
645667
--color-modal-bg: #fdf6e3;
646668

@@ -724,13 +746,26 @@
724746
--color-debug-light: hsl(205 69% 62%);
725747
--color-debug-text: hsl(205 69% 70%);
726748

727-
--color-thinking-mode: hsl(237 43% 60%);
728-
--color-thinking-mode-light: hsl(237 43% 70%);
729-
--color-thinking-border: hsl(237 43% 60%);
730-
731-
/* Background & Layout - Solarized dark base colors */
732-
--color-background: #002b36; /* base03 */
733-
--color-background-secondary: #073642; /* base02 */
749+
--color-thinking-mode: #6c71c4; /* violet */
750+
--color-thinking-mode-light: #8589d0;
751+
--color-thinking-border: #6c71c4;
752+
753+
/* Runtime icon colors - using solarized palette */
754+
--color-runtime-ssh: #268bd2; /* blue */
755+
--color-runtime-ssh-text: #268bd2;
756+
--color-runtime-worktree: #6c71c4; /* violet */
757+
--color-runtime-worktree-text: #6c71c4;
758+
--color-runtime-local: #839496; /* base0 */
759+
760+
/* Background & Layout - Solarized dark base colors
761+
Palette reference:
762+
base03 #002b36 (darkest) base3 #fdf6e3 (lightest)
763+
base02 #073642 base2 #eee8d5
764+
base01 #586e75 base1 #93a1a1
765+
base00 #657b83 base0 #839496
766+
*/
767+
--color-background: #002b36; /* base03 - main background */
768+
--color-background-secondary: #073642; /* base02 - secondary surfaces */
734769
--color-border: #586e75; /* base01 */
735770
--color-foreground: #839496; /* base0 */
736771
--color-text: #839496;
@@ -838,15 +873,16 @@
838873
--color-border-subtle: #586e75;
839874
--color-border-gray: #586e75;
840875

841-
--color-dark: #002b36;
842-
--color-darker: #00232d;
876+
/* Three-zone backgrounds: sidebar (base02), workspace (base03), input (between) */
877+
--color-dark: #001f29; /* slightly darker than base03 for workspace */
878+
--color-darker: #001a22;
843879
--color-hover: #0a4555;
844880
--color-bg-medium: #0d5566;
845881
--color-bg-light: #106577;
846882
--color-bg-subtle: #073642;
847883

848-
--color-separator: #073642;
849-
--color-separator-light: #0a4555;
884+
--color-separator: #073642; /* base02 - sidebar background */
885+
--color-separator-light: #094555; /* slightly lighter for hover states */
850886
--color-modal-bg: #073642;
851887

852888
--color-accent: #268bd2; /* blue */
@@ -1594,7 +1630,7 @@ pre code {
15941630
width: 12px;
15951631
height: 12px;
15961632
border-radius: 50%;
1597-
background: var(--thumb-bg, #606060);
1633+
background: var(--thumb-bg, var(--color-muted));
15981634
cursor: pointer;
15991635
transition:
16001636
background 0.2s ease,
@@ -1606,7 +1642,7 @@ pre code {
16061642
width: 12px;
16071643
height: 12px;
16081644
border-radius: 50%;
1609-
background: var(--thumb-bg, #606060);
1645+
background: var(--thumb-bg, var(--color-muted));
16101646
cursor: pointer;
16111647
border: none;
16121648
transition:

0 commit comments

Comments
 (0)