fix: resolve <Badge /> incorrect sizes - #22539

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 95e695cfb6

Code Review

🤖 Generated with Coder Agents

Overall this is a good cleanup — removing the border variant, normalizing icon sizes, and bringing stories in line with Figma. A few things to address:

Issues

1. Unconditional hover on default creates a redundant compound variant

The default variant now bakes in hover:bg-surface-tertiary:

default: "... hover:bg-surface-tertiary",

But there is still a compoundVariant that applies the same class only when hover: true:

{ hover: true, variant: "default", class: "hover:bg-surface-tertiary" },

This means every default badge now changes background on hover, regardless of the hover prop. If that is the design intent, the compound variant is dead code and should be removed. If the intent was to only add the hover effect when hover={true}, the class should stay only in the compound variant.

2. xs size border-0 vs variant border border-solid — fragile override

xs applies border-0, but every variant (including default) now applies border border-solid. In Tailwind v3, which class wins depends on their order in the generated stylesheet, not in the class attribute. This works today but is fragile. Consider either:

• Removing the explicit border border-solid from variants (the base already has border), or
• Using a compound variant for xs to explicitly remove borders for each applicable variant.

3. Icon size downgrade for md

md changed from [&_svg]:size-icon-sm (1.125rem/18px) to [&_svg]:size-icon-xs (0.875rem/14px). This is a ~22% reduction. All three sizes now use the same icon size (icon-xs), which seems intentional per Figma. Just flagging in case md badges with icons (e.g. TagInput) look noticeably smaller — worth a quick visual check.

Nits

• Warning/Destructive xs story has icon after text, while sm/md have icon before text. Intentional per-design, or a typo in the stories?
• Missing purple and magenta stories — the PR says it tracks all variants from Figma but these two are not covered.
• font-normal on md will override the fontWeight: "500" baked into the custom text-xs fontSize definition in tailwind.config.js. Just making sure that's the intent since the old md used font-medium (500).

Did something change regarding the designs of badges and their borders? When I look in Figma, atleast for licenses and dynamic paramters I wasn't aware of any changes.