adam/open-swe
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/open-swe.git synced 2026-10-05 21:12:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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="flex items-center gap-3">
<span className="relative flex h-2 w-2"> <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={`${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-cyan-500" /> <span className="relative inline-flex rounded-full h-2 w-2 bg-[var(--ui-text-muted)]" />
</span> </span>
<span className="text-[color:var(--ui-text-muted)]"> <span className="text-[color:var(--ui-text-muted)]">
{loopTaskCount} active loop{loopTaskCount === 1 ? "" : "s"}{runActive ? " — running" : " monitoring"} {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} onClick={onSubmit}
disabled={!canSubmit} disabled={!canSubmit}
aria-label="Send message" 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 ? ( {submitting ? (
<LoaderCircle className="size-3.5 animate-spin" /> <LoaderCircle className="size-3.5 animate-spin" />
@ -87,7 +87,7 @@ function StreamSubmitButton(props: SubmitButtonProps) {
disabled={stopping} disabled={stopping}
aria-label="Stop run" aria-label="Stop run"
title="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 ? ( {stopping ? (
<LoaderCircle className="size-3.5 animate-spin" /> <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 let strokeColor = '#6b7280'; // gray-500
if (fraction > 0) strokeColor = '#9ca3af'; // gray-400 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 >= 0.75) strokeColor = '#fbbf24'; // amber-400
if (fraction >= COMPACT_THRESHOLD) strokeColor = '#f87171'; // red-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 <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" : "" connectedTop ? "-mt-px rounded-t-none border-t-0" : ""
}`} }`}
> >
{isDragOver && ( {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> <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> </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-modified": "text-yellow-400",
"index-added": "text-green-400", "index-added": "text-green-400",
"index-deleted": "text-red-400", "index-deleted": "text-red-400",
"index-renamed": "text-blue-400", "index-renamed": "text-gray-400",
"index-copied": "text-blue-400", "index-copied": "text-gray-400",
modified: "text-yellow-400", modified: "text-yellow-400",
deleted: "text-red-400", deleted: "text-red-400",
untracked: "text-green-400", untracked: "text-green-400",

106
ui/src/styles.css
View file

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

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

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