Skip to content

Commit 243a6e6

Browse files
waleedlatif1claude
andcommitted
fix(logs): fall back to neutral gray for near-black trace icon bgs
#333333 was still too close to the dark-mode surface to read. For bgs below the luminance threshold (e.g. the MCP block's #181C1E) we now fall back to DEFAULT_BLOCK_COLOR (#6b7280) — the same neutral the renderer uses for blocks with no distinct identity. Clearly visible in both themes; brighter brand colors still pass through. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 parent ebeee76 commit 243a6e6

1 file changed

Lines changed: 6 additions & 6 deletions

File tree

  • apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
import { cn } from '@/lib/core/utils/cn'
3333
import type { TraceSpan } from '@/lib/logs/types'
3434
import {
35+
DEFAULT_BLOCK_COLOR,
3536
formatCostAmount,
3637
formatTokenCount,
3738
formatTps,
@@ -121,19 +122,18 @@ function iconColorClass(bgColor: string): string {
121122
}
122123

123124
/**
124-
* Lifts a near-black icon background just enough to clear the dark-mode
125-
* surface. Branded colors above the threshold pass through unchanged.
125+
* Near-black bgColors disappear against the dark-mode surface (--bg: #1b1b1b).
126+
* Below the luminance threshold we fall back to the neutral block color used
127+
* for blocks with no distinct identity; everything brighter passes through.
126128
*/
127129
function adjustBgForContrast(bgColor: string): string {
128130
const hex = bgColor.replace('#', '')
129131
if (hex.length !== 6) return bgColor
130132
const r = Number.parseInt(hex.slice(0, 2), 16)
131133
const g = Number.parseInt(hex.slice(2, 4), 16)
132134
const b = Number.parseInt(hex.slice(4, 6), 16)
133-
if (r * 299 + g * 587 + b * 114 >= 30_000) return bgColor
134-
const FLOOR = 0x33
135-
const lift = (c: number) => Math.max(c, FLOOR).toString(16).padStart(2, '0')
136-
return `#${lift(r)}${lift(g)}${lift(b)}`
135+
if (r * 299 + g * 587 + b * 114 < 30_000) return DEFAULT_BLOCK_COLOR
136+
return bgColor
137137
}
138138

139139
/**

0 commit comments

Comments
 (0)