Skip to content

Badge renderer ignores badgeRecipe bg/text styles — no background painted #270

@ppamorim

Description

@ppamorim

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:

  1. Extracts bg.bg via resolveChipColor and applies it as the foreground (fg) color instead of the background.
  2. Completely ignores the recipe's text.fg color.
  3. 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.

Image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions