badge · minimal · 灵感来源：Refactoring UI（发丝边 + 文字色做语义）
四种语义
只留状态点（文字给读屏）
Status Badge · 极简徽标 · 徽标 / Minimal
做一个 Status Badge（极简徽标）：
- 同一份 props（variant / dot）
- 实底 + 发丝边，没有模糊
- 语义只落在文字色；dot 的文字同样走 sr-only
用这些 CSS 变量：--color-accent --color-divider --color-success-fg --color-surface --color-text-muted --color-warning-fg --text-2xs
灵感参考：Refactoring UI（发丝边 + 文字色做语义）--color-accent --color-divider --color-success-fg --color-surface --color-text-muted --color-warning-fg --text-2xs
（无必缺状态）
（尚未接进整页场景）
/r/badge--minimal.json
免外壳的 markdown 版：/llms/components/badge--minimal.md--color-divider 发丝边，没有模糊；语义仍只落在文字色上dot 的读屏文案与玻璃徽标一致：颜色之外必须有可读的状态名import { type ReactNode } from 'react';
interface Props {
children: ReactNode;
variant?: 'neutral' | 'accent' | 'success' | 'warning';
/** 只显示状态点：文字退成读屏可见 */
dot?: boolean;
className?: string;
}
const TONE = {
neutral: 'text-[var(--color-text-muted)]',
accent: 'text-[var(--color-accent)]',
success: 'text-[var(--color-success-fg)]',
warning: 'text-[var(--color-warning-fg)]',
};
export function MinimalBadge({ children, variant = 'neutral', dot = false, className = '' }: Props) {
return (
<span
className={`
inline-flex items-center gap-1.5
px-2 py-0.5 rounded-full
text-[length:var(--text-2xs)] font-mono
bg-[var(--color-surface)] border border-[var(--color-divider)]
${TONE[variant]}
${className}
`}
>
<span className="size-1.5 rounded-full bg-current" aria-hidden="true" />
<span className={dot ? 'sr-only' : undefined}>{children}</span>
</span>
);
}
src/components/badge/minimal/