feat(toast): add success and info variants with semantic token styling

[awhobbs87]

Summary

• Add success (green, CheckCircleIcon) and info (blue, InfoIcon) toast variants
• Migrate existing error/warning variants from raw light-dark() CSS to semantic tokens (text-kumo-danger, text-kumo-warning) for consistent theming
• All status variants now feature a colored left border accent and subtle tinted background for better visual distinction
• Update docs page with new variant examples and updated API reference table

Variants

Variant	Border	Title/Icon Color	Icon
default	none	text-kumo-default	none
success	green	text-kumo-success	CheckCircleIcon
error	red	text-kumo-danger	WarningOctagonIcon
warning	amber	text-kumo-warning	WarningIcon
info	blue	text-kumo-info	InfoIcon

Files changed

• packages/kumo/src/components/toast/toast.tsx — new variants, semantic tokens, tinted backgrounds
• packages/kumo-docs-astro/src/components/demos/ToastDemo.tsx — updated success demo, added info demo
• packages/kumo-docs-astro/src/pages/components/toast.astro — new doc sections, updated API table
• packages/kumo/ai/* — auto-generated registry/schema updates from build

[pkg-pr-new]

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

commit: a65e44d

[github-actions]

Docs Preview

View docs preview

Commit: a65e44d

[github-actions]

Visual Regression Report

22 screenshot(s) with visual changes:

Button / Variants

1 px (0%) changed

Before	After	Diff

Button / Sizes

1 px (0%) changed

Before	After	Diff

Button / With Icon

64,069 px (2.19%) changed

Before	After	Diff

Button / Icon Only

64,058 px (2.19%) changed

Before	After	Diff

Button / Loading State

2 px (0%) changed

Before	After	Diff

Button / Disabled State

56,546 px (1.94%) changed

Before	After	Diff

Dialog / Basic Dialog

141,280 px (2.55%) changed

Before	After	Diff

Dialog / Alert Dialog (role=“alertdialog”)

142,224 px (2.57%) changed

Before	After	Diff

Dialog / Confirmation Dialog (with disablePointerDismissal)

20,830 px (0.38%) changed

Before	After	Diff

Dialog / With Actions

71,086 px (1.28%) changed

Before	After	Diff

Dialog / With Select

104,520 px (1.89%) changed

Before	After	Diff

Dialog / With Combobox

125,980 px (2.28%) changed

Before	After	Diff

Dialog / With Dropdown

138,103 px (2.49%) changed

Before	After	Diff

Select / Without Visible Label

2,312 px (0.41%) changed

Before	After	Diff

Select / With Description and Error

7,795 px (1.11%) changed

Before	After	Diff

Select / Placeholder

1,428 px (0.22%) changed

Before	After	Diff

Select / Custom Rendering

27,868 px (1.68%) changed

Before	After	Diff

Select / Loading

9,773 px (1.38%) changed

Before	After	Diff

Select / More Example

16,130 px (1.76%) changed

Before	After	Diff

Select / Select

705 px (0.08%) changed

Before	After	Diff

Select / Select.Option

26,105 px (3.04%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

4 screenshot(s) unchanged

• Dialog (Open)
• Select / Basic Usage
• Select / Label with Tooltip
• Select / Multiple Item

---

Generated by Kumo Visual Regression

[mattrothenberg]

Thanks for adding these!

The colors feel a bit muddy, what with the colored/tinted background and the gray border. Can the border take on the variant color, too?

Also, it looks like maybe there's some extra spacing on the left resulting in what looks like a slightly wider border.

[awhobbs87]

Fixed both:

1. Border color: Replaced border-kumo-fill with the variant color (border-kumo-success, border-kumo-danger, etc.) so the border matches the variant instead of using gray.

2. Extra left spacing: Removed the border-l-[3px] left accent entirely. All sides now use a uniform 1px border from the base border class, which eliminates the asymmetric thicker-left-border look.

[stritt]

@awhobbs87 could you resolve the conflict and then we can merge? thanks!