adam/open-swe
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/open-swe.git synced 2026-09-30 06:53:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Neutralize frontend: blue accents → neutral aesthetic (#1553)

Browse source 
Strip the blue/cool cast from the agent + reviewer chat and shared UI.
Neutralize the --ui-* (agents.css) and shadcn (styles.css) color tokens
to pure neutral grays (chroma/hue zeroed, lightness preserved); primary
and filled buttons become inverse-foreground neutral solids. Replaces a
few hardcoded blue/cyan spots (send button, prompt bar bg, context ring,
loop dot, git renamed status) with neutral tokens. Semantic green/amber/
red are kept.

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>
This commit is contained in:
Johannes du Plessis 2026-06-16 15:49:33 -07:00 • committed by GitHub
parent 82c805221e
commit bac1591888
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 91 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/src/components/agents/ported/ChatView.tsx
View file

@ -541,8 +541,8 @@ const LoopManagerBlock = forwardRef<HTMLDivElement, LoopManagerBlockProps>(funct
>
<span className="flex items-center gap-3">
<span className="relative flex h-2 w-2">
<span className={`${runActive ? "" : "animate-ping"} absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75`} />
<span className="relative inline-flex rounded-full h-2 w-2 bg-cyan-500" />
<span className={`${runActive ? "" : "animate-ping"} absolute inline-flex h-full w-full rounded-full bg-[var(--ui-text-dim)] opacity-75`} />
<span className="relative inline-flex rounded-full h-2 w-2 bg-[var(--ui-text-muted)]" />
</span>
<span className="text-[color:var(--ui-text-muted)]">
{loopTaskCount} active loop{loopTaskCount === 1 ? "" : "s"}{runActive ? " — running" : " monitoring"}

4
ui/src/components/agents/ported/CloudPromptBar.tsx
View file

@ -37,7 +37,7 @@ function PlainSubmitButton({ canSubmit, submitting, onSubmit }: SubmitButtonProp
onClick={onSubmit}
disabled={!canSubmit}
aria-label="Send message"
className="shrink-0 rounded-full bg-[var(--ui-accent)] text-white hover:bg-[var(--ui-accent)] hover:opacity-90 disabled:cursor-default disabled:opacity-40"
className="shrink-0 rounded-full bg-[var(--ui-text)] text-[var(--ui-bg)] hover:bg-[var(--ui-text)] hover:opacity-90 disabled:cursor-default disabled:opacity-40"
>
{submitting ? (
<LoaderCircle className="size-3.5 animate-spin" />
@ -87,7 +87,7 @@ function StreamSubmitButton(props: SubmitButtonProps) {
disabled={stopping}
aria-label="Stop run"
title="Stop run"
className="shrink-0 rounded-full bg-[var(--ui-accent)] text-white hover:bg-[var(--ui-accent)] hover:opacity-90 disabled:cursor-default disabled:opacity-40"
className="shrink-0 rounded-full bg-[var(--ui-text)] text-[var(--ui-bg)] hover:bg-[var(--ui-text)] hover:opacity-90 disabled:cursor-default disabled:opacity-40"
>
{stopping ? (
<LoaderCircle className="size-3.5 animate-spin" />

2
ui/src/components/agents/ported/ContextIndicator.tsx
View file

@ -35,7 +35,7 @@ export function ContextIndicator({ sessionId }: ContextIndicatorProps) {
let strokeColor = '#6b7280'; // gray-500
if (fraction > 0) strokeColor = '#9ca3af'; // gray-400
if (fraction >= 0.5) strokeColor = '#93c5fd'; // blue-300
if (fraction >= 0.5) strokeColor = '#9ca3af'; // gray-400
if (fraction >= 0.75) strokeColor = '#fbbf24'; // amber-400
if (fraction >= COMPACT_THRESHOLD) strokeColor = '#f87171'; // red-400

4
ui/src/components/agents/ported/PromptBar.tsx
View file

@ -544,12 +544,12 @@ export const PromptBar = memo(function PromptBar({
)}
<div
className={`relative border border-[#2a3140] bg-[#172131]/95 px-4 py-3.5 min-h-[106px] flex flex-col shadow-[0_0_0_1px_rgba(255,255,255,0.02)_inset] rounded-2xl ${
className={`relative border border-[var(--ui-border)] bg-[var(--ui-surface)]/95 px-4 py-3.5 min-h-[106px] flex flex-col shadow-[0_0_0_1px_rgba(255,255,255,0.02)_inset] rounded-2xl ${
connectedTop ? "-mt-px rounded-t-none border-t-0" : ""
}`}
>
{isDragOver && (
<div className="pointer-events-none absolute inset-0 rounded-2xl border-2 border-[var(--ui-accent)] bg-[#172131]/70 backdrop-blur-sm z-30 flex items-center justify-center">
<div className="pointer-events-none absolute inset-0 rounded-2xl border-2 border-[var(--ui-accent)] bg-[var(--ui-surface)]/70 backdrop-blur-sm z-30 flex items-center justify-center">
<span className="rounded-md bg-black/20 px-3 py-1.5 text-[color:var(--ui-accent)] text-sm font-medium">Drop images here</span>
</div>
)}

4
ui/src/components/agents/ported/SourceControlTile.tsx
View file

@ -50,8 +50,8 @@ const STATUS_COLORS: Partial<Record<GitFileStatus, string>> = {
"index-modified": "text-yellow-400",
"index-added": "text-green-400",
"index-deleted": "text-red-400",
"index-renamed": "text-blue-400",
"index-copied": "text-blue-400",
"index-renamed": "text-gray-400",
"index-copied": "text-gray-400",
modified: "text-yellow-400",
deleted: "text-red-400",
untracked: "text-green-400",

106
ui/src/styles.css
View file

@ -52,71 +52,71 @@
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.148 0.004 228.8);
--foreground: oklch(0.148 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.148 0.004 228.8);
--card-foreground: oklch(0.148 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.148 0.004 228.8);
--primary: oklch(0.52 0.105 223.128);
--primary-foreground: oklch(0.984 0.019 200.873);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.963 0.002 197.1);
--muted-foreground: oklch(0.56 0.021 213.5);
--accent: oklch(0.963 0.002 197.1);
--accent-foreground: oklch(0.218 0.008 223.9);
--popover-foreground: oklch(0.148 0 0);
--primary: oklch(0.21 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.967 0 0);
--secondary-foreground: oklch(0.21 0 0);
--muted: oklch(0.963 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.963 0 0);
--accent-foreground: oklch(0.21 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.925 0.005 214.3);
--input: oklch(0.925 0.005 214.3);
--ring: oklch(0.723 0.014 214.4);
--chart-1: oklch(0.872 0.007 219.6);
--chart-2: oklch(0.56 0.021 213.5);
--chart-3: oklch(0.45 0.017 213.2);
--chart-4: oklch(0.378 0.015 216);
--chart-5: oklch(0.275 0.011 216.9);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.872 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.45 0 0);
--chart-4: oklch(0.378 0 0);
--chart-5: oklch(0.275 0 0);
--radius: 0.625rem;
--sidebar: oklch(0.987 0.002 197.1);
--sidebar-foreground: oklch(0.148 0.004 228.8);
--sidebar-primary: oklch(0.609 0.126 221.723);
--sidebar-primary-foreground: oklch(0.984 0.019 200.873);
--sidebar-accent: oklch(0.963 0.002 197.1);
--sidebar-accent-foreground: oklch(0.218 0.008 223.9);
--sidebar-border: oklch(0.925 0.005 214.3);
--sidebar-ring: oklch(0.723 0.014 214.4);
--sidebar: oklch(0.987 0 0);
--sidebar-foreground: oklch(0.148 0 0);
--sidebar-primary: oklch(0.21 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.963 0 0);
--sidebar-accent-foreground: oklch(0.21 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.148 0.004 228.8);
--foreground: oklch(0.987 0.002 197.1);
--card: oklch(0.218 0.008 223.9);
--card-foreground: oklch(0.987 0.002 197.1);
--popover: oklch(0.218 0.008 223.9);
--popover-foreground: oklch(0.987 0.002 197.1);
--primary: oklch(0.45 0.085 224.283);
--primary-foreground: oklch(0.984 0.019 200.873);
--secondary: oklch(0.274 0.006 286.033);
--background: oklch(0.148 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.218 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.218 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.92 0 0);
--primary-foreground: oklch(0.21 0 0);
--secondary: oklch(0.274 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.275 0.011 216.9);
--muted-foreground: oklch(0.723 0.014 214.4);
--accent: oklch(0.275 0.011 216.9);
--accent-foreground: oklch(0.987 0.002 197.1);
--muted: oklch(0.275 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.275 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.56 0.021 213.5);
--chart-1: oklch(0.872 0.007 219.6);
--chart-2: oklch(0.56 0.021 213.5);
--chart-3: oklch(0.45 0.017 213.2);
--chart-4: oklch(0.378 0.015 216);
--chart-5: oklch(0.275 0.011 216.9);
--sidebar: oklch(0.218 0.008 223.9);
--sidebar-foreground: oklch(0.987 0.002 197.1);
--sidebar-primary: oklch(0.715 0.143 215.221);
--sidebar-primary-foreground: oklch(0.302 0.056 229.695);
--sidebar-accent: oklch(0.275 0.011 216.9);
--sidebar-accent-foreground: oklch(0.987 0.002 197.1);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.872 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.45 0 0);
--chart-4: oklch(0.378 0 0);
--chart-5: oklch(0.275 0 0);
--sidebar: oklch(0.218 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.92 0 0);
--sidebar-primary-foreground: oklch(0.21 0 0);
--sidebar-accent: oklch(0.275 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.56 0.021 213.5);
--sidebar-ring: oklch(0.556 0 0);
}
@layer base {

58
ui/src/styles/agents.css
View file

@ -1,40 +1,40 @@
.agents-ui {
--ui-bg: oklch(0.99 0.002 197.1);
--ui-bg: oklch(0.99 0 0);
--ui-surface: oklch(1 0 0);
--ui-panel: oklch(0.985 0.002 197.1);
--ui-panel-2: oklch(0.967 0.001 286.375);
--ui-border: oklch(0.925 0.005 214.3);
--ui-border-subtle: oklch(0.945 0.004 214.3);
--ui-text: oklch(0.148 0.004 228.8);
--ui-text-muted: oklch(0.45 0.017 213.2);
--ui-text-dim: oklch(0.56 0.021 213.5);
--ui-accent: oklch(0.52 0.105 223.128);
--ui-accent-2: oklch(0.52 0.16 295);
--ui-accent-bubble: oklch(0.955 0.015 223);
--ui-code-bubble: oklch(0.962 0.002 247.9);
--ui-sidebar: oklch(0.987 0.002 197.1);
--ui-sidebar-hover: oklch(0.963 0.002 197.1);
--ui-panel: oklch(0.985 0 0);
--ui-panel-2: oklch(0.967 0 0);
--ui-border: oklch(0.922 0 0);
--ui-border-subtle: oklch(0.945 0 0);
--ui-text: oklch(0.148 0 0);
--ui-text-muted: oklch(0.45 0 0);
--ui-text-dim: oklch(0.56 0 0);
--ui-accent: oklch(0.44 0 0);
--ui-accent-2: oklch(0.56 0 0);
--ui-accent-bubble: oklch(0.962 0 0);
--ui-code-bubble: oklch(0.962 0 0);
--ui-sidebar: oklch(0.987 0 0);
--ui-sidebar-hover: oklch(0.963 0 0);
--ui-success: oklch(0.62 0.17 145);
--ui-danger: oklch(0.577 0.245 27.325);
}
.dark .agents-ui,
.dark.agents-ui {
--ui-bg: oklch(0.148 0.004 228.8);
--ui-surface: oklch(0.218 0.008 223.9);
--ui-panel: oklch(0.218 0.008 223.9);
--ui-panel-2: oklch(0.274 0.006 286.033);
--ui-bg: oklch(0.148 0 0);
--ui-surface: oklch(0.218 0 0);
--ui-panel: oklch(0.218 0 0);
--ui-panel-2: oklch(0.274 0 0);
--ui-border: oklch(1 0 0 / 10%);
--ui-border-subtle: oklch(1 0 0 / 6%);
--ui-text: oklch(0.987 0.002 197.1);
--ui-text-muted: oklch(0.723 0.014 214.4);
--ui-text-dim: oklch(0.56 0.021 213.5);
--ui-accent: oklch(0.715 0.143 215.221);
--ui-accent-2: oklch(0.78 0.13 295);
--ui-accent-bubble: oklch(0.274 0.04 223);
--ui-code-bubble: oklch(0.248 0.004 228.8);
--ui-sidebar: oklch(0.218 0.008 223.9);
--ui-sidebar-hover: oklch(0.275 0.011 216.9);
--ui-text: oklch(0.985 0 0);
--ui-text-muted: oklch(0.708 0 0);
--ui-text-dim: oklch(0.556 0 0);
--ui-accent: oklch(0.78 0 0);
--ui-accent-2: oklch(0.708 0 0);
--ui-accent-bubble: oklch(0.274 0 0);
--ui-code-bubble: oklch(0.248 0 0);
--ui-sidebar: oklch(0.218 0 0);
--ui-sidebar-hover: oklch(0.275 0 0);
--ui-success: oklch(0.62 0.17 145);
--ui-danger: oklch(0.704 0.191 22.216);
}
@ -51,11 +51,11 @@
.agents-ui * {
scrollbar-width: thin;
scrollbar-color: oklch(0.85 0.01 214) transparent;
scrollbar-color: oklch(0.85 0 0) transparent;
}
.dark .agents-ui * {
scrollbar-color: oklch(0.4 0.01 214) transparent;
scrollbar-color: oklch(0.4 0 0) transparent;
}
.agents-ui .shimmer-text {