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]>
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { Check } from '@luxfi/ui/icons'
|
|
|
|
interface DeployWizardProps {
|
|
currentStep: 'type' | 'config' | 'advanced' | 'deploy'
|
|
}
|
|
|
|
const steps = [
|
|
{ key: 'type', label: 'Type' },
|
|
{ key: 'config', label: 'Config' },
|
|
{ key: 'advanced', label: 'Advanced' },
|
|
{ key: 'deploy', label: 'Deploy' },
|
|
] as const
|
|
|
|
export function DeployWizard({ currentStep }: DeployWizardProps) {
|
|
const currentIndex = steps.findIndex((s) => s.key === currentStep)
|
|
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
{steps.map((step, i) => (
|
|
<div key={step.key} className="flex items-center gap-2">
|
|
<div
|
|
className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-semibold ${
|
|
step.key === currentStep
|
|
? 'bg-primary text-primary-foreground'
|
|
: i < currentIndex
|
|
? 'bg-[var(--color-status-good)]/20 text-[var(--color-status-good)]'
|
|
: 'bg-muted text-muted-foreground'
|
|
}`}
|
|
>
|
|
{i < currentIndex ? (
|
|
<Check className="h-3.5 w-3.5" />
|
|
) : (
|
|
i + 1
|
|
)}
|
|
</div>
|
|
<span
|
|
className={`hidden text-xs font-medium sm:inline ${
|
|
step.key === currentStep ? 'text-foreground' : 'text-muted-foreground'
|
|
}`}
|
|
>
|
|
{step.label}
|
|
</span>
|
|
{i < steps.length - 1 && <div className="mx-2 h-px w-8 bg-border sm:w-12" />}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|