[Feature] Extend semantic status colours with --info, --note, and --draft

[aosmcleod]

Feature description

HeroUI's semantic colour palette ships --success, --warning, and --danger — the three conventional status colours for positive, cautionary, and destructive states. In practice, most applications also need:

• Info (blue) — neutral informational callouts, help text, documentation links, "FYI" alerts
• Note (purple) — editorial annotations, tips, "good to know" callouts, wisdom/insight markers
• Draft (rose/pink) — pending states, scheduled items, out-of-office presence, time-bound absence indicators

These three fill gaps that every design system eventually addresses ad-hoc. Without them, teams end up using --warning for info (wrong semantics), inventing one-off colours (inconsistent), or reaching for arbitrary values (breaks theming).

Proposed implementation

Follow the same pattern HeroUI uses for success/warning/danger:

:root {
  --info: oklch(0.62 0.18 250);
  --info-foreground: var(--snow);

  --note: oklch(0.62 0.21 305);
  --note-foreground: var(--snow);

  --draft: oklch(0.64 0.22 350);
  --draft-foreground: var(--snow);
}

.dark, [data-theme='dark'] {
  --info: oklch(0.7 0.16 250);
  --note: oklch(0.7 0.19 305);
  --draft: oklch(0.72 0.2 350);
}

Plus @theme inline registrations so Tailwind utilities work (bg-info, text-note-foreground, etc.):

@theme inline {
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-note: var(--note);
  --color-note-foreground: var(--note-foreground);
  --color-draft: var(--draft);
  --color-draft-foreground: var(--draft-foreground);
}

Soft variants (--info-soft, --note-soft, --draft-soft) auto-derive via color-mix the same way HeroUI's existing soft tokens do.

Why these specific hues?

• Info at hue 250 (blue): The universal "informational" colour. Distinct from --accent (which may also be blue in some themes) because info is fixed by convention — re-branding --accent to green shouldn't shift info callouts.
• Note at hue 305 (purple): Distinct from all other status colours. Purple reads as "editorial" / "annotation" in most design systems (Notion, GitHub, Linear all use purple for notes/labels).
• Draft at hue 350 (rose-pink): Warm, distinct from danger (which sits at red ~25-30). Rose reads as "soft / pending / not-yet-final" — appropriate for draft states, scheduled items, and presence indicators.

Scope

This is a theme-level addition only — no new React components needed. The colours would be available to existing components via their color prop (Alert, Badge, Chip, etc.) if those components already accept arbitrary colour values, or could be added to their colour enum in a follow-up.

Prior art

• Chakra UI ships blue (info) and purple (note-equivalent) in its colour scheme
• Radix Themes ships blue, violet, plum as semantic options
• Ant Design ships info as a distinct status alongside success/warning/error
• Material UI ships info as a fourth severity level