feat(button): add smooth hover highlighting across all button-like components

[awhobbs87]

Summary

• Add transition-colors duration-150 to buttonVariants() base classes so all 6 Button variants animate smoothly on hover — this single change flows to ~15 downstream components (Select, InputGroup, Pagination, LinkButton, etc.)
• Fix outline variant having zero hover state by adding hover:bg-kumo-tint
• Improve secondary and secondary-destructive hover visibility — previously hovered to bg-kumo-control which was the same as the resting background, now uses bg-kumo-tint

Additional components fixed

Component	Before	After
MenuBar (MenuOption)	No hover at all	hover:bg-kumo-overlay on inactive buttons
Collapsible trigger	No hover at all	hover:text-kumo-brand with transition
DateRangePicker reset button	No hover at all	hover:text-kumo-brand with transition
Table.ResizeHandle	No direct hover	hover:bg-kumo-tint with transition
Toast.Close	Used non-semantic hover:bg-kumo-contrast/10	Aligned to hover:bg-kumo-fill-hover hover:text-kumo-strong (matches KUMO_TOAST_VARIANTS)
SensitiveInput copy button	Used raw CSS hover:brightness-120	Replaced with semantic hover:bg-kumo-brand-hover

Design decisions

• All hover transitions use duration-150 (150ms) for a snappy but smooth feel
• All colors use semantic kumo tokens only — no raw Tailwind colors, no dark: variants
• MenuBar hover only applies to inactive buttons (active button retains its elevated style)
• Auto-generated ai/component-registry.{json,md} updated to reflect the new class strings

Files changed (7 source + 2 auto-generated + 1 changeset)

• packages/kumo/src/components/button/button.tsx
• packages/kumo/src/components/menubar/menubar.tsx
• packages/kumo/src/components/collapsible/collapsible.tsx
• packages/kumo/src/components/date-range-picker/date-range-picker.tsx
• packages/kumo/src/components/table/table.tsx
• packages/kumo/src/components/toast/toast.tsx
• packages/kumo/src/components/sensitive-input/sensitive-input.tsx
• packages/kumo/ai/component-registry.json (auto-generated)
• packages/kumo/ai/component-registry.md (auto-generated)
• .changeset/slick-button-hover.md

[pkg-pr-new]

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

commit: bdc2312

[github-actions]

Docs Preview

View docs preview

Commit: bdc2312

[github-actions]

Visual Regression Report

26 screenshot(s) with visual changes:

Button / Variants

15,431 px (1.12%) changed

Before	After	Diff

Button / Sizes

0 px (0%) changed

Before	After	Diff

Button / With Icon

3,143 px (1.26%) changed

Before	After	Diff

Button / Icon Only

3,342 px (1.23%) changed

Before	After	Diff

Button / Loading State

1 px (0%) changed

Before	After	Diff

Button / Disabled State

3,453 px (1.38%) changed

Before	After	Diff

Collapsible / Single Item

16,941 px (2.27%) changed

Before	After	Diff

Collapsible / Multiple Items

9,232 px (1.24%) changed

Before	After	Diff

Collapsible (Open)

185 px (0.01%) changed

Before	After	Diff

Menu Bar / Without Active State

9,485 px (0.8%) changed

Before	After	Diff

Table / With Checkboxes

104,196 px (2.63%) changed

Before	After	Diff

Table / Compact Header

96,331 px (2.43%) changed

Before	After	Diff

Table / Selected Row

91,809 px (2.31%) changed

Before	After	Diff

Table / Fixed Layout with Column Sizes

82,372 px (2.08%) changed

Before	After	Diff

Table / Full Example

91,011 px (2.29%) changed

Before	After	Diff

Toast / Title and Description

63,555 px (1.76%) changed

Before	After	Diff

Toast / Title Only

0 px (0%) changed

Before	After	Diff

Toast / Description Only

58,752 px (1.63%) changed

Before	After	Diff

Toast / Success Action

40,712 px (1.13%) changed

Before	After	Diff

Toast / Multiple Toasts

55,506 px (1.54%) changed

Before	After	Diff

Toast / Error Variant

66,842 px (1.85%) changed

Before	After	Diff

Toast / Warning Variant

40,712 px (1.13%) changed

Before	After	Diff

Toast / Custom Content

58,752 px (1.63%) changed

Before	After	Diff

Toast / Action Buttons

40,747 px (1.13%) changed

Before	After	Diff

Toast / Promise

0 px (0%) changed

Before	After	Diff

Toast (Open)

185 px (0%) changed

Before	After	Diff

1 screenshot(s) unchanged

• Menu Bar / Text Formatting

---

Generated by Kumo Visual Regression

[najlaskr]

thanks for this! looks great overall – just one minor change:

collapsible.tsx (line 16) and date-range-picker.tsx (line 655)
change hover:text-kumo-brand to hover:text-kumo-link

[stritt]

@awhobbs87 this too!