fix(join): stop the arena callout washing out in dark mode

[barunaniket]

The "register first" callout on /join rendered as a light cream card with near-invisible text in dark mode, while every other panel on the page was fine.

Cause

Not a colour choice — a layering bug, and a trap anyone would fall into.

MechaPanel builds its chamfered edge from stacked elements:

.mecha          → outer line   (--mecha-line)
  .mecha__gap   → gap fill     (--mecha-fill)
    .mecha__inline → inner line (--mecha-line)   ← light in dark mode
      .mecha__body → opaque fill (--mecha-fill)  ← covers it, 1px ring left showing

The callout passed bg-bronze/5 through bodyClassName. Tailwind utilities outrank the @layer components rule, so that replaced .mecha__body's opaque background: var(--mecha-fill) with a 5%-transparent one — and .mecha__inline's outline colour showed through the entire body instead of just its 1px ring. In dark mode --mecha-line is a pale tan, which is exactly the cream card in the screenshot. The text was correct for dark mode all along; it was the background that flipped.

Fix

Tint through the panel's own variable instead of overriding the background:

const CALLOUT_FILL = {
  "--mecha-fill": "color-mix(in oklab, var(--color-bronze) 10%, var(--color-panel))",
} as CSSProperties;

The body stays opaque, and both the tint and the base come from theme variables — so it follows light and dark with no second rule. globals.css already establishes this as the way to retint a panel: .mecha--ide overrides the same variable.

Also removes border-bronze/20 from the same class list. .mecha__body has no border to style — the visible edge is the .mecha / .mecha__inline layers — so it was a no-op.

Scope

Grepped for the same mistake across src/; this was the only bodyClassName passing a bg-* utility. There's a comment above the const explaining the trap so the next person doesn't reintroduce it.

Verified

npx tsc --noEmit clean · lint 0 errors · 90/90 tests · build succeeds · confirmed on the local dev server that bg-bronze/5 is gone and the --mecha-fill override is applied.

Worth a visual check in dark mode before merging, since the fix is visual.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
code-chef-pesuecc-chapter	Ready	Preview	Sep 9, 2026 2:03pm UTC