Blizzard
ca7ce4c26f
把高频硬编码色（ink 表面 / line 边框 / slate 文字）重定义为 CSS 变量（RGB 三元组， 保留 /透明度 修饰符），:root(亮) 与 .dark(暗) 两套值切换——改 tailwind.config + index.css 两处即让全 app 换肤，无需逐文件迁移。 - 亮色走 shadcn 中性灰(zinc：zinc-50 底/白卡/zinc-200 边/zinc-900 字)； 暗色精炼为中性 zinc 暗（替代原偏蓝 ink），顺带提质感。 - lib/theme.ts：useTheme + applyInitialTheme（main 启动前设类，避免首屏闪烁）+ localStorage 持久化，默认亮色。 - TopBar 加 Sun/Moon 切换钮；滚动条/输入控件 color-scheme 随主题。 - 修亮色下会失效的 bg-white/5 → bg-ink-800（Tabs/Badge/ExecTrace 的中性微底）； 模态遮罩 bg-black/55 两模式皆宜，保留。 验证：tsc + vitest 48 过 + 生产构建通过（var 色全解析）。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { cn } from "./cn";
|
|
|
|
type Tone = "neutral" | "brand" | "accent" | "success" | "warn" | "danger";
|
|
|
|
const tones: Record<Tone, string> = {
|
|
neutral: "bg-ink-800 text-slate-400",
|
|
brand: "bg-brand/15 text-brand-400",
|
|
accent: "bg-accent/15 text-accent-400",
|
|
success: "bg-success/15 text-success",
|
|
warn: "bg-warn/15 text-warn",
|
|
danger: "bg-danger/15 text-danger",
|
|
};
|
|
|
|
export function Badge({ tone = "neutral", className, children }: { tone?: Tone; className?: string; children: ReactNode }) {
|
|
return (
|
|
<span className={cn("inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[9px] font-medium leading-none", tones[tone], className)}>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// Dot 状态小圆点（可脉冲）。
|
|
export function Dot({ tone = "neutral", pulse }: { tone?: Tone | "running"; pulse?: boolean }) {
|
|
const color =
|
|
tone === "success"
|
|
? "bg-success"
|
|
: tone === "danger"
|
|
? "bg-danger"
|
|
: tone === "warn"
|
|
? "bg-warn"
|
|
: tone === "running" || tone === "accent"
|
|
? "bg-accent"
|
|
: tone === "brand"
|
|
? "bg-brand"
|
|
: "bg-slate-600";
|
|
return <span className={cn("h-2 w-2 shrink-0 rounded-full", color, pulse && "animate-pulse")} />;
|
|
}
|