feat: subtle appearance for banner

[FBalint]

Summary

Adds a non-breaking appearance prop to Banner with a new subtle option, plus a new secondary variant for neutral messages.
Also updates the Banner docs demos and HomeGrid usage to show the subtle appearance, and fixes title-less structured Banner alignment when an icon is present.

---

• Reviews
  • bonk has reviewed the change
  • automated review not possible because: this is a design-system API and styling update that should be reviewed by maintainers
• Tests
  • Tests included/updated
  • Automated tests not possible - manual testing has been completed as follows:
  • Additional testing not necessary because:

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@533

commit: 77f8ee0

[github-actions]

Docs Preview

View docs preview

Commit: 77f8ee0

[github-actions]

Visual Regression Report — 9 changed, 30 unchanged

9 screenshot(s) with visual changes:

Button / Loading State

10 px (0.01%) changed

Before	After	Diff

Dialog / Dialog With Combobox

130 px (0.13%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

130 px (0.13%) changed

Before	After	Diff

Select / Select Sizes

901 px (0.48%) changed

Before	After	Diff

Select / Select Without Label

105 px (0.1%) changed

Before	After	Diff

Select / Select With Description

1,132 px (0.96%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Long List

898 px (0.76%) changed

Before	After	Diff

Select (Open)

1,956 px (0.01%) changed

Before	After	Diff

30 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Button / Link as Button
• Dialog / Dialog With Actions
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Dialog / Dialog Confirmation
• Dialog / Dialog With Select
• Dialog (Open)
• Select / Select Basic
• Select / Select With Error
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Custom Rendering
• Select / Select Multiple
• Select / Select Complex
• Select / Select Disabled Options
• Select / Select Disabled Items
• Select / Select Grouped
• Select / Select Grouped With Disabled

---

Generated by Kumo Visual Regression

[geoquant]

/bonk review

[ask-bonk]

LGTM! Well-implemented non-breaking change that follows all component conventions.

Summary:

• ✅ New appearance prop with bordered (default) and subtle options
• ✅ New secondary variant for neutral messages
• ✅ Proper subtle background styles per variant via KUMO_BANNER_SUBTLE_VARIANT_STYLES
• ✅ Title-less structured Banner alignment fix (!title && "pt-px")
• ✅ Tests cover default appearance, subtle appearance, secondary variant, and prop forwarding
• ✅ Demos and documentation updated appropriately
• ✅ Changeset included for minor version bump

Visual regression note: The 9 changed screenshots appear to be unrelated to this PR (Button, Dialog, Select components). These are likely baseline drift or timing-related flakes.

[ask-bonk]

Nice alignment fix for the title-less structured Banner case with icon.

[ask-bonk]

Good approach using a separate styles object for subtle appearance overrides rather than overcomplicating the main variants object.

[ask-bonk]

Good test coverage for the new functionality. Tests are focused on the variant/appearance logic and prop forwarding.

[ask-bonk]

Approved!

Review Summary:

This PR is a well-implemented, non-breaking addition to the Banner component:

1. New appearance prop — Supports "bordered" (default) and "subtle" options, with subtle removing the border and using stronger tinted backgrounds per variant.

2. New secondary variant — Neutral styling using bg-kumo-recessed and text-kumo-subtle for contextual messages that don't need emphasis.

3. Alignment fix — Corrects title-less structured Banner icon alignment by adding !title && "pt-px" to vertically center the icon when no title is present.

4. Tests — New test file covers the variant/appearance logic and prop forwarding.

5. Documentation — Demos and mdx docs updated with examples for the new secondary variant and subtle appearance.

The changes follow all component conventions (variant objects, KUMO_* naming, cn() usage, displayName) and include an appropriate changeset for a minor version bump.

github run