kurihada/no-whatever
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: 全站统一暗色主题设计系统

Browse Source 
- globals.css 定义语义化 token (background/surface/elevated/border/muted/dim/accent)
- 所有页面和组件迁移至暗色 token，移除硬编码 bg-white/text-zinc-*/bg-gray-*
- RestaurantCard 和 MatchResult 适配暗色卡片风格
- 按钮颜色分层：系统CTA(accent)/模式强调(橙/紫)/危险(rose)/次级(surface)
- 修复 room 页深色文字在深背景不可见的可访问性问题
This commit is contained in:
kurihada
2026-02-26 11:27:18 +08:00
parent 7d51f5200d
commit e10e3c8230
13 changed files with 258 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SwipeDeck.tsx
+16 -16
View File
@@ -28,11 +28,11 @@ function UserProgressBar({
const myProfile = userProfiles[userId];
const myAvatar = myProfile?.avatar ?? getAvatar(userId).emoji;
const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100";
const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-500/20";
return (
<div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1">
<span className="flex items-center gap-1 text-[11px] tabular-nums text-emerald-500">
<span className="flex items-center gap-1 text-[11px] tabular-nums text-accent">
<span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
{myAvatar}
</span>
@@ -47,12 +47,12 @@ function UserProgressBar({
return (
<span
key={id}
className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-zinc-400"}`}
className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-muted"}`}
>
<span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${bg} text-[10px] leading-none`}>
{emoji}
</span>
{label && <span className="max-w-[3rem] truncate">{label}</span>}
{label && <span className="max-w-12 truncate">{label}</span>}
{count}/{total}
{finished && <Check size={10} className="text-emerald-400" />}
</span>
@@ -84,9 +84,9 @@ function WaitingProgress({
const myBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100";
return (
<div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-zinc-50 px-4 py-3">
<div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-surface px-4 py-3 ring-1 ring-border">
<div className="flex items-center justify-between">
<span className="flex items-center gap-1.5 text-xs font-medium text-emerald-600">
<span className="flex items-center gap-1.5 text-xs font-medium text-accent">
<span className={`inline-flex h-5 w-5 items-center justify-center rounded-full ${myBg} text-sm leading-none`}>
{myEmoji}
</span>
@@ -105,17 +105,17 @@ function WaitingProgress({
return (
<div key={id} className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-emerald-600" : "text-zinc-500"}`}>
<span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-100" : bg}`}>
<span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-accent" : "text-muted"}`}>
<span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-500/20" : bg}`}>
{emoji}
</span>
{label && <span className="max-w-[3rem] truncate">{label}</span>}
{label && <span className="max-w-12 truncate">{label}</span>}
{count}/{total}
</span>
{finished && <Check size={14} className="text-emerald-400" />}
</div>
{!finished && (
<div className="ml-7 h-1 overflow-hidden rounded-full bg-zinc-200">
<div className="ml-7 h-1 overflow-hidden rounded-full bg-elevated">
<motion.div
className="h-full rounded-full bg-amber-400"
animate={{ width: `${pct}%` }}
@@ -127,7 +127,7 @@ function WaitingProgress({
);
})}
<p className="text-center text-[10px] text-zinc-400">
<p className="text-center text-[10px] text-muted">
{finishedCount}/{others.length} 人已完成
</p>
</div>
@@ -326,7 +326,7 @@ export default function SwipeDeck({
{!allSwiped && !resolvedMatchId && (
<div className="mx-auto w-full max-w-sm px-4 pb-1">
<div className="flex items-center gap-2">
<div className="h-1 flex-1 overflow-hidden rounded-full bg-zinc-100">
<div className="h-1 flex-1 overflow-hidden rounded-full bg-elevated">
<motion.div
className="h-full rounded-full bg-emerald-400"
initial={{ width: 0 }}
@@ -336,13 +336,13 @@ export default function SwipeDeck({
transition={{ type: "spring", stiffness: 300, damping: 30 }}
/>
</div>
<span className="shrink-0 text-[11px] tabular-nums text-zinc-400">
<span className="shrink-0 text-[11px] tabular-nums text-muted">
{currentIndex}/{restaurants.length}
</span>
<button
onClick={handleUndo}
disabled={currentIndex === 0}
className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-500 transition-colors active:bg-amber-50 disabled:opacity-0"
className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-400 transition-colors active:bg-amber-500/15 disabled:opacity-0"
>
<Undo2 size={12} />
撤回
@@ -385,8 +385,8 @@ export default function SwipeDeck({
{showWaiting && (
<div className="flex h-full flex-col items-center justify-center gap-4">
<div className="h-5 w-5 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
<p className="text-sm font-medium text-zinc-500">等待其他人完成选择</p>
<div className="h-5 w-5 animate-spin rounded-full border-2 border-subtle border-t-accent" />
<p className="text-sm font-medium text-muted">等待其他人完成选择</p>
<WaitingProgress
userId={userId}
swipeCounts={swipeCounts}