feat(tokens): update semantic color tokens for status icons and indicators

[najlaskr]

Problem

The existing text-kumo-* tokens are being used as glyph fills, which made status indicators appear too dark and deviated from the intended visual language. However, changing text token values to compensate impacted accessibility contrast ratio – often paired with lighter, tint-* backgrounds such as in Badge and Banner.

Solution

• Update the hues for background tokens bg-kumo-* as the canonical source for both solid backgrounds and icon fills.
• Update Color docs with a demo of showing how icons use fill-kumo-* instead of text-kumo-* to ensure the correct token is being used
• Remove Green badge from docs and unused color declarations in config.ts to avoid confusion
• Update hues in Badge and Toast to ensure there's no visual impact with new color declarations

Before

After

---

• Reviews
  • bonk has reviewed the change
  • automated review not possible because: visual changes
• Tests
  • Tests included/updated
  • Automated tests not possible - manual testing has been completed as follows: visual changes
  • Additional testing not necessary because:

[pkg-pr-new]

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

commit: 3eebae9

[github-actions]

Docs Preview

View docs preview

Commit: 3eebae9

[github-actions]

Visual Regression Report — 12 changed, 27 unchanged

12 screenshot(s) with visual changes:

Button / Basic

90 px (0.09%) changed

Before	After	Diff

Button / Loading State

2 px (0%) changed

Before	After	Diff

Dialog / Dialog Alert

1,427 px (1.41%) changed

Before	After	Diff

Dialog / Dialog With Select

225 px (0.22%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

486 px (0.48%) changed

Before	After	Diff

Select / Select Sizes

858 px (0.46%) changed

Before	After	Diff

Select / Select With Description

1,213 px (1.02%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Disabled Options

829 px (0.82%) changed

Before	After	Diff

Select / Select Long List

898 px (0.76%) changed

Before	After	Diff

Select (Open)

541 px (0%) changed

Before	After	Diff

27 screenshot(s) unchanged

• 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 Confirmation
• Dialog / Dialog With Combobox
• Dialog / Dialog With Dropdown
• Select / Select Without Label
• Select / Select With Error
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Custom Rendering
• Select / Select Multiple
• Select / Select Complex
• Select / Select Disabled Items
• Select / Select Grouped
• Select / Select Grouped With Disabled

---

Generated by Kumo Visual Regression

[mattrothenberg]

@nandanmen would love your review of these color tweaks too. code change looks good to me so approving!