Summary
The badge widget renderer in renderTextWidgets.ts does not correctly apply the styles returned by badgeRecipe. The recipe returns both a bg style (intended as the pill background) and a text style (intended as the foreground color for text on that background), but the renderer:
- Extracts
bg.bg via resolveChipColor and applies it as the foreground (fg) color instead of the background.
- Completely ignores the recipe's
text.fg color.
- Never paints an actual background —
maybeFillOwnBackground is a no-op since ownStyle has no bg (badges use variant, not style.bg).
Expected: Badge renders as a colored pill with bg.bg as background and text.fg as text color, consistent with how other recipe-aware widgets (e.g. callout, button) apply their recipe styles.
Actual: Badge renders as colored parenthesized text ( label ) on the parent's background, with the recipe's background color repurposed as the text foreground. No pill background is visible.
Reproduction steps
import { ui } from "@rezi-ui/core";
// Any badge with a variant — none of them paint a background
ui.badge("CONNECTED", { variant: "info" });
ui.badge("ERROR", { variant: "error" });
ui.badge("OK", { variant: "success" });
The relevant renderer code in renderTextWidgets.ts:
case "badge": {
const color = resolveChipColor(theme, props.variant, "badge");
// ^ extracts badgeRecipe(...).bg.bg and returns it as a number
const chipStyle = mergeTextStyle(
mergeTextStyle(parentStyle, { fg: color, bold: true }), // bg.bg used as fg
ownStyle
);
maybeFillOwnBackground(builder, rect, ownStyle, chipStyle);
// ^ no-op: ownStyle is undefined (no style.bg on the badge props)
const content = `( ${text} )`;
// text drawn with fg=recipe.bg.bg, no actual bg painted
}
Compare with badgeRecipe which returns:
{
text: { fg: resolveToneFg(colors, resolvedTone), bold: true }, // ignored
bg: { bg: color }, // used as fg instead of bg
}
Environment
- OS: macOS (Darwin 24.6.0 arm64)
- Terminal: Warp
- Node: v18.20.8
- Rezi packages: @rezi-ui/core 0.1.0-alpha.58
Logs / output
No crash — purely a visual rendering issue. The badge text appears as colored ( label ) on the parent background instead of rendering as a proper pill with a painted background.
Summary
The badge widget renderer in
renderTextWidgets.tsdoes not correctly apply the styles returned bybadgeRecipe. The recipe returns both abgstyle (intended as the pill background) and atextstyle (intended as the foreground color for text on that background), but the renderer:bg.bgviaresolveChipColorand applies it as the foreground (fg) color instead of the background.text.fgcolor.maybeFillOwnBackgroundis a no-op sinceownStylehas nobg(badges usevariant, notstyle.bg).Expected: Badge renders as a colored pill with
bg.bgas background andtext.fgas text color, consistent with how other recipe-aware widgets (e.g.callout,button) apply their recipe styles.Actual: Badge renders as colored parenthesized text
( label )on the parent's background, with the recipe's background color repurposed as the text foreground. No pill background is visible.Reproduction steps
The relevant renderer code in
renderTextWidgets.ts:Compare with
badgeRecipewhich returns:Environment
Logs / output
No crash — purely a visual rendering issue. The badge text appears as colored
( label )on the parent background instead of rendering as a proper pill with a painted background.