fix(teams): color invitation status badges by state

[vutuanlinh2k2]

Problem

In InvitationsPanel, both the lifecycle-status badge (pending | accepted | expired | revoked) and the email-delivery badge (not_sent | sent | failed) rendered every value in the same neutral gray. The only thing that changed between an ACCEPTED invite and a PENDING one was the text — no semantic color — so the history list is hard to scan and ambiguous to users.

There was also a latent bug: the failed-email styling used var(--text-danger), which isn't defined in the consuming apps' token sets, so the "failed" state and the "Email was not sent" notice rendered with no color at all.

Change

Map each status to the shared design-system surface tokens (the same --surface-* family the Badge primitive uses), keeping the existing token-only styling approach the panel already follows:

Lifecycle status	Color
accepted	success (green)
pending	warning (amber)
revoked	danger (red)
expired	muted / neutral

Email status	Color
sent	muted (normal happy path)
not_sent	warning (amber)
failed	danger (red)

Also repoints the failed-email text off the undefined --text-danger onto --surface-danger-text.

Notes

• Pure styling change — no API, props, or behavior change. Consumers (gtm-agent, creative-agent) pick it up on the next version bump with no code changes.
• --surface-{success,warning,danger,info}-* are already defined in the consuming apps' themes, so the badges resolve to real colors in both light and dark mode.
• pnpm typecheck passes; pnpm build succeeds.

Draft

Opened as a draft pending a quick visual check in a consuming app (gtm-agent) after a local package link / version bump.

[tangletools]

✅ Auto-approved PR — 9eca7e01

Blanket team auto-approval is enabled for this reviewer service.
The full PR reviewer audit still runs separately and will publish findings if it detects issues.

_{tangletools · auto-approval · reason: blanket_auto_approve · 2026-06-25T05:38:58Z}