{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tone-badge",
  "title": "Tone badge",
  "description": "Quill's uppercase tag pill for status, tiers, and labels — wraps Badge with the pigment vocabulary (moss/gold/terracotta/indigo/neutral/muted) baked in so tone never drifts per call site.",
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/lib/tone-badge.tsx",
      "content": "import { Badge } from '@/components/ui/badge'\nimport { cn } from '@/lib/utils'\n\n/**\n * ToneBadge — the Quill uppercase tag pill. One component for every\n * status/tier/label chip so tone and size never drift per call site:\n *\n * - `tone`: the Quill pigment vocabulary (moss = positive/current,\n *   gold = caution/developing, terracotta = attention/danger,\n *   indigo = informational/dormant, neutral/muted = quiet).\n * - `size`: `md` (the 20px badge) or `sm` (16px — the count-pill scale).\n * - `solid`: filled pigment for the strong cue (e.g. a \"current\" marker);\n *   default is the tinted chip (pigment wash + deep text, AA-checked).\n *\n * Hand-rolling `rounded-full … uppercase` spans is how one-off pills drift\n * off the system — use this instead.\n */\n\nexport type Tone = 'moss' | 'gold' | 'terracotta' | 'indigo' | 'neutral' | 'muted'\n\nconst TINT: Record<Tone, string> = {\n  moss: 'bg-moss/20 text-moss-deep',\n  // gold-text (the darker text-safe gold), not gold-deep: gold-deep on the\n  // tint fails AA in light themes.\n  gold: 'bg-gold/25 text-gold-text',\n  terracotta: 'bg-terracotta/16 text-terracotta-deep',\n  indigo: 'bg-indigo-brand/20 text-indigo-brand-deep',\n  neutral: 'bg-paper-deep text-ink-soft',\n  muted: 'bg-paper-deep text-ink-muted',\n}\n\nconst SOLID: Record<Tone, string> = {\n  moss: 'bg-moss-deep text-paper',\n  // gold-text, not gold-deep: paper on gold-deep is 3.3:1 — under AA.\n  gold: 'bg-gold-text text-paper',\n  terracotta: 'bg-terracotta-deep text-paper',\n  indigo: 'bg-indigo-brand-deep text-paper',\n  neutral: 'bg-ink text-paper',\n  muted: 'bg-ink-muted text-paper',\n}\n\n/** Quill's uppercase tag pill for status, tiers, and labels — wraps Badge with the pigment vocabulary (moss/gold/terracotta/indigo/neutral/muted) baked in so tone never drifts per call site. */\nexport function ToneBadge({\n  tone,\n  size = 'md',\n  solid = false,\n  title,\n  className,\n  children,\n}: {\n  tone: Tone\n  size?: 'md' | 'sm'\n  solid?: boolean\n  title?: string\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <Badge\n      title={title}\n      className={cn(\n        'border-transparent text-2xs font-medium tracking-[0.1em] uppercase',\n        size === 'sm' ? 'h-4 px-1.5' : '',\n        solid ? SOLID[tone] : TINT[tone],\n        className\n      )}\n    >\n      {children}\n    </Badge>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/tone-badge.tsx"
    }
  ],
  "docs": "Quill's uppercase tag pill for status, tiers, and labels — wraps Badge with the pigment vocabulary (moss/gold/terracotta/indigo/neutral/muted) baked in so tone never drifts per call site. Do: Leave `solid` false (the tinted default) for regular status/tier labels — it is the visually quieter option and still hits AA contrast per tone. Don't: Set `solid` on every ToneBadge in a view — solid is reserved for the one strong cue (a \"current\" marker, a live state) and loses its signal once everything is solid. Do: Render every uppercase tag pill through ToneBadge, even one-off labels. Don't: Hand-roll a `rounded-full … uppercase` span with ad hoc tone colors — it drifts from the AA-checked tint/solid pairs and the two-size scale. Do: Use ToneBadge's own size scale — `md` (20px) or `sm` (16px, the count-pill scale). Don't: Shrink a pill by hand-tightening its tracking or padding instead of passing `size=\"sm\"` — type stays `--text-2xs` at 0.1em tracking in both sizes. Use badge when the label is a generic chip outside Quill's tag-pill vocabulary — use Badge directly instead of forcing it through a tone.",
  "type": "registry:ui"
}