feat(button): add a warning variant, and text and button warning tokens

[tmccoy14]

Summary

Buttons could say destructive but not pause and read this. danger was the only cautionary variant, so reversible actions either borrowed red and overstated themselves, or went unmarked. Archiving is the case that surfaced it — it can be undone, so red is wrong, but it still wants a beat of hesitation.

Fills the two gaps: a warning Button variant, and the text-warning token that text-danger has had all along.

Tokens

Token	Light	Dark
button-warning-fill	Yellow 500 #D39D39	Yellow 400 #DCB169
button-warning-border	Yellow 600 #A27630	Yellow 500 #D39D39
button-warning-text	Black	Black
text-warning	Yellow 500 #D39D39	Yellow 400 #DCB169

Fill and border mirror Button/Danger's Red 500/400 and Red 600/500 exactly. Text/Warning mirrors Text/Danger.

The one deliberate break: dark text

Button/Danger gets white text because red is dark enough to carry it. Yellow is not:

Fill	white	black
Red 500 #BC3934 (danger, light)	5.57:1	3.77:1
Red 400 #CF6A60 (danger, dark)	3.57:1	5.88:1
Yellow 500 #D39D39	2.43:1	8.65:1
Yellow 400 #DCB169	1.99:1	10.54:1
Yellow 600 #A27630	4.06:1	5.17:1

White on yellow misses even the 3:1 threshold for UI text. Darkening the fill to Yellow 600 would let white clear 4:1, but #A27630 is a brown-olive that stops reading as caution — so the asymmetry sits in the text rather than the fill.

It is the only filled variant with dark text. The docs page says so, and the CSS carries a one-line comment, so the next person doesn't "fix" it back to white.

Not included

No archived variant. Under the rule that variants communicate how the user should pay attention to a thing, archived isn't its own attention level — it's warning where the consequence matters in context, and neutral grey where it doesn't. This supersedes #128, which added an archived Badge variant and a brand-orange token; that PR is closed in favour of this one.

Testing

pnpm build passes. Rendered the variant in the demo site in both themes and read the computed values back from the DOM rather than trusting the token pipeline:

• dark — fill color(display-p3 0.863 0.6958 0.4108), border 0.8263 0.6154 0.2247, text 0 0 0
• light — fill 0.8263 0.6154 0.2247, border 0.6345 0.463 0.1863, text 0 0 0

pnpm lint fails on packages/demo/src/components/demo/avatar.tsx and two gitignored dist/ files, identically with these changes stashed — pre-existing, untouched here.

Note

The tokens were hand-authored in equality-tokens.pinwheel and the exported JSON together, mirroring the Danger entries alias for alias, rather than round-tripped through Pinwheel. Worth opening the project once to confirm Button/Warning and Text/Warning appear where you'd expect before merging.

🤖 Generated with Claude Code

[Shrinks99]

Made a few edits to the colours for the buttons so we don't have to invert the text. Will be changing these soon anyways with the new styling hopefully!

Also added the warning variant to dropdown-menu items