A copy of the PDS v2 Badge (pds-badge, same class names, props and CSS) with one addition: color='agentic-filled', the AI gradient as the fill, for denoting an agentic category.
Decision: Copied Badge.tsx, badge.css and the stories from the reference checkout (v2.0.0-beta.12) without behavior changes.
Why: The designer asked for a copy of the PDS Badge to work from.
Port impact: Local mergeClasses stand-in and the local Icon wrapper (../Icon/Icon) replace @libs/components/utils and @components/icons/Icon/Icon; the port swaps the real ones back. iconName is typed from the local IconProps so the new agentic icons are accepted.
Keep #fff on ai-active
Decision: Left --badge-fg: #fff in .pds-badge--ai-active as in v2.
Why: No white-on-gradient foreground token exists, and foreground-reverse inverts in dark mode, which would put dark text on the gradient. Listed in custom.md.
Port impact: none (identical to v2).
Dropped the agentic border variant
Decision: An agentic color (AI gradient border on a surface fill) was tried and removed at the designer's request. Only agentic-filled remains.
Why: The designer chose the filled treatment.
Port impact: none.
Add agentic-filled
Decision:color='agentic-filled' fills the badge with --pds-gradient-ai-active (the same gradient as the agentic border) and uses --pds-color-foreground-reverse for the text (white in light mode, dark in dark mode, a semantic token instead of a raw white). Static, no border. The designer chose the agentic gradient for the fill over a muted discovery fill.
Why: Matches the gradient used everywhere else for agentic. White text on its light blue and pink stops is low contrast (the ai-active fill uses a darker gradient for this reason); not measured yet.
Port impact: adds agentic-filled to BadgeColor and .pds-badge--agentic-filled to badge.css. No raw value; ai-active keeps its #fff as in v2.
Open questions
Contrast of the light-mode white text on agentic-filled is low at the light stops; use the darker ai-active gradient, dark text, or accept? (Dark mode already gets dark text.) Should the agentic colors animate like ai-active? (designer)