mirror of
https://github.com/luxfi/mpc.git
synced 2026-09-24 00:26:24 +00:00
zeekayandHanzo Dev
8b6850e316
Measured on the rendered pixels, not the source: the MPC dashboard's home page
carried 1.05% of every frame in hue at mean chroma 1.279, against explore's
0.004 next door. It came from four places, all literals no hostname could
retheme:
app/page.tsx violet→blue gradient wordmark (from-violet-500 to-blue-500)
feature headings text-violet-400 / text-blue-400 /
text-emerald-400, and ten chain chips on border-violet-500/20
bg-violet-500/10 text-violet-300 — the #ece7f7 wash that was
10,776 pixels of one screenshot
app/docs/page.tsx the same violet, plus border-violet/blue/emerald/purple-500/30
and 15 more files reaching for Tailwind's chromatic ramps directly. Those now
resolve through the tokens @luxfi/ui owns: green/emerald → --color-status-good,
red/rose → --color-status-bad, yellow/amber → --color-status-warn (achromatic —
attention is the loudest neutral in Lux, not a hue), everything else onto
foreground / muted / border.
After: warm 0%, tinted-neutral 0%, mean chroma 0.000 at 1440x900 and 390x844,
in light and dark. Distinction is carried by the LABEL, which already read
CGGMP21 / FROST / Bridge.
@luxfi/ui 7.4.5 -> 7.4.9.
Co-authored-by: Hanzo Dev <[email protected]>
29 lines
1.2 KiB
TypeScript
29 lines
1.2 KiB
TypeScript
// Chain badges are third-party identity, and lux/brand DESIGN.md §1.2 reserves
|
|
// hue for exactly that ("state, market direction, and chain badges"). Bitcoin is
|
|
// orange because Bitcoin is orange — this is not Lux chrome and stays as-is.
|
|
const chainMeta: Record<string, { label: string; color: string }> = {
|
|
ethereum: { label: 'Ethereum', color: 'text-foreground' },
|
|
bitcoin: { label: 'Bitcoin', color: 'text-[var(--color-status-warn)]' },
|
|
solana: { label: 'Solana', color: 'text-foreground' },
|
|
lux: { label: 'Lux', color: 'text-zinc-300' },
|
|
xrpl: { label: 'XRPL', color: 'text-zinc-400' },
|
|
ton: { label: 'TON', color: 'text-foreground' },
|
|
}
|
|
|
|
interface ChainIconProps {
|
|
chain: string
|
|
className?: string
|
|
}
|
|
|
|
export function ChainIcon({ chain, className = '' }: ChainIconProps) {
|
|
const meta = chainMeta[chain.toLowerCase()] ?? { label: chain, color: 'text-muted-foreground' }
|
|
return (
|
|
<span className={`inline-flex items-center gap-1.5 text-sm font-medium ${meta.color} ${className}`}>
|
|
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[10px] font-bold uppercase">
|
|
{meta.label.charAt(0)}
|
|
</span>
|
|
{meta.label}
|
|
</span>
|
|
)
|
|
}
|