feat(banner): adjust banner colors and add size + actions props

[najlaskr]

Fixes muddy CTA colors that washed out against banner backgrounds, adjust banner hues for better contrast and adds new size options.

• Modified existing tokens to better align with banner backgrounds, text and CTA combinations that reflect the different variants
• Added a new Banner.Actions CTA compound to allow specific-styling for action buttons without affecting existing Button styles. Banner.Action supports primary (filled), secondary (accent-hued outline on a transparent background), and ghost variants
• Added a size prop to Banner ("base" | "sm"); the compact "sm" size suits dialogs and other tight spaces and defaults its Banner.Action children to the xs size

Before

After

---

• Reviews
  • bonk has reviewed the change
  • automated review not possible because: no access to bonk; mostly visual changes to banner
• Tests
  • Tests included/updated
  • Automated tests not possible - manual testing has been completed as follows: visual testing on banners, ran pnpm lint, pnpm typecheck and pnpm test
  • Additional testing not necessary because:

[pkg-pr-new]

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

commit: 0afa7bc

[github-actions]

Docs Preview

View docs preview

Commit: 0afa7bc

[github-actions]

Visual Regression Report — 13 changed, 28 unchanged

13 screenshot(s) with visual changes:

Button / Variant: Primary

1,094 px (1.08%) changed

Before	After	Diff

Button / Loading State

7 px (0.01%) changed

Before	After	Diff

Dialog / Dialog With Actions

298 px (0.29%) changed

Before	After	Diff

Dialog / Dialog Basic

316 px (0.31%) changed

Before	After	Diff

Dialog / Dialog Alert

1,331 px (1.31%) changed

Before	After	Diff

Dialog / Dialog With Select

383 px (0.38%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

859 px (0.85%) changed

Before	After	Diff

Select / Select Sizes

2,690 px (1.45%) changed

Before	After	Diff

Select / Select Placeholder

977 px (0.96%) changed

Before	After	Diff

Select / Select With Tooltip

853 px (0.84%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select (Open)

541 px (0%) changed

Before	After	Diff

28 screenshot(s) unchanged

• Button / Basic
• 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 Sizes
• Dialog / Dialog Confirmation
• Dialog / Custom Max Width
• Dialog / Dialog With Combobox
• Dialog / Dialog With Dropdown
• Select / Select Without Label
• Select / Select With Description
• Select / Select With Error
• 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
• Select / Select Long List

---

Generated by Kumo Visual Regression

[mattrothenberg]

Love the visuals here, the after screenshots are a major improvement! A few things before merging:

1. I think Banner.Actions is the wrong API: it's just a flex div, and since it has exactly one correct usage it adds boilerplate for every consumer. The Banner root could probably apply that layout to the action slot itself.
2. Relatedly, Banner.Action is a parallel fork of Button (its own size table, variant names, and focus styles, and the sizes already diverge from KUMO_BUTTON_VARIANTS despite the comment saying they mirror it). Open question: is Button's forced !text-white the only blocker to reusing it? If so I'd rather fix that in Button than maintain a second button that will drift.
3. Third, the theme changes rewrite global tokens (--color-kumo-warning, the *-tint family, etc.) that toast, badge, and command palette also consume, so this changes more than banners while testing only covers banners. Was this change intentional? Am I misreading the diff?