badge · neumorphic · 灵感来源：Neumorphism（同色浮起的小胶囊）
四种语义
只留状态点（文字给读屏）
Status Badge · 拟态徽标 · 徽标 / Neumorphic
做一个 Status Badge（拟态徽标）：
- 同一份 props（variant / dot）
- 同色底 + 1–2px 外投影，没有边框；阴影再大就读成模糊
- 语义只落在文字色；dot 的文字同样走 sr-only
用这些 CSS 变量：--color-accent --color-success-fg --color-text-muted --color-warning-fg --neuro-bg --neuro-dark --neuro-light --text-2xs
灵感参考：Neumorphism（同色浮起的小胶囊）--color-accent --color-success-fg --color-text-muted --color-warning-fg --neuro-bg --neuro-dark --neuro-light --text-2xs
（无必缺状态）
（尚未接进整页场景）
/r/badge--neumorphic.json
免外壳的 markdown 版：/llms/components/badge--neumorphic.mddot 的读屏文案与玻璃徽标一致：颜色之外必须有可读的状态名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 NeumorphicBadge({ 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(--neuro-bg)] border border-transparent
shadow-[1px_1px_2px_var(--neuro-dark),-1px_-1px_2px_var(--neuro-light)]
${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/neumorphic/