badge · glass-apple · 灵感来源：GitHub Primer / Linear 的状态徽标（胶囊 + 状态点 + 语义色文字）
四种语义
只留状态点（文字给读屏）
Status Badge · 玻璃徽标 · 徽标 / Glass
做一个 Status Badge（玻璃徽标）：
- 胶囊只用文字色表达语义（neutral / accent / success / warning），底色始终中性
- 状态点用 bg-current 跟随文字色；dot 模式下文字退成 sr-only
- 不可点、不可聚焦；可点的状态筛选属于 choice / segmented
- 玻璃材质：半透明底 + 发丝边 + 模糊，尺寸固定不设 size 轴
用这些 CSS 变量：--color-accent --color-success-fg --color-text-muted --color-warning-fg --glass-bg --glass-border --text-2xs
灵感参考：GitHub Primer / Linear 的状态徽标（胶囊 + 状态点 + 语义色文字）--color-accent --color-success-fg --color-text-muted --color-warning-fg --glass-bg --glass-border --text-2xs
（无必缺状态）
/r/badge--glass-apple.json
免外壳的 markdown 版：/llms/components/badge--glass-apple.mdcolor，状态点 bg-current 跟着走--glass-bg + 发丝边 + 模糊；尺寸由字号与内边距决定，不提供 size 轴——徽标不该在页面里抢尺寸戏dot 只留状态点，文字退成 sr-only：颜色不是唯一信息通道（SC 1.4.1）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 GlassAppleBadge({ 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(--glass-bg)] border border-[var(--glass-border)] backdrop-blur-xl
${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/glass-apple/