style: align UI palette with Taonier visuals

This commit is contained in:
kdletters
2026-05-21 13:54:35 +08:00
parent 0eed942ce5
commit da3badb802
24 changed files with 400 additions and 381 deletions

View File

@@ -225,7 +225,7 @@ export function CustomWorldGenerationView({
<div className="platform-progress-track mt-4 h-4 overflow-hidden rounded-full xl:mt-5 xl:h-5">
<motion.div
className="h-full bg-[linear-gradient(90deg,#ff4f8b_0%,#ff8a73_52%,#ffd2a6_100%)]"
className="h-full bg-[linear-gradient(90deg,#df7f40_0%,#cc754c_52%,#eaccb3_100%)]"
animate={{ width: `${progressValue}%` }}
transition={{ duration: 0.35, ease: 'easeOut' }}
/>
@@ -283,9 +283,9 @@ export function CustomWorldGenerationView({
)}
className={`rounded-2xl border px-4 py-3 transition-colors ${
step.status === 'completed'
? 'border-emerald-400/16 bg-emerald-500/8'
? 'border-[var(--platform-success-border)] bg-[var(--platform-success-bg)]'
: step.status === 'active'
? 'border-sky-300/22 bg-sky-500/10'
? 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)]'
: 'platform-subpanel'
} custom-world-generation-step`}
initial={
@@ -317,9 +317,9 @@ export function CustomWorldGenerationView({
<motion.div
className={`h-full rounded-full ${
step.status === 'completed'
? 'bg-emerald-300'
? 'bg-[var(--platform-success-text)]'
: step.status === 'active'
? 'bg-[linear-gradient(90deg,#7dd3fc_0%,#fcd34d_100%)]'
? 'bg-[linear-gradient(90deg,#df7f40_0%,#cc754c_56%,#eaccb3_100%)]'
: 'bg-white/18'
}`}
animate={{ width: `${stepProgress}%` }}
@@ -335,7 +335,7 @@ export function CustomWorldGenerationView({
</div>
{error ? (
<div className="mt-4 rounded-2xl border border-rose-400/18 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-100">
<div className="mt-4 rounded-2xl border border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] px-4 py-3 text-sm leading-6 text-[var(--platform-button-danger-text)]">
{error}
</div>
) : null}
@@ -364,7 +364,7 @@ export function CustomWorldGenerationView({
<button
type="button"
onClick={onInterrupt}
className="rounded-full border border-rose-300/18 bg-rose-500/10 px-4 py-2 text-sm text-rose-100 transition-colors hover:text-white"
className="rounded-full border border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] px-4 py-2 text-sm text-[var(--platform-button-danger-text)] transition-colors hover:text-[var(--platform-text-strong)]"
>
{interruptLabel}
</button>