fix(tokens): kumo-hairline dark mode

[najlaskr]

Fixes invisible lines in #389

Problem

Tokens are swapped in dark: where kumo-line is darker than kumo-hairline, which is the opposite of its intended usage – leading to lines being invisible in dark:

Changes

• Swapped the tokens for kumo-line and kumo-hairline
• Swapped all instances of kumo-line with kumo-hairline on surfaces where the component doesn't include a shadow
• Kept instances of kumo-line in components with a shadow background (i.e. Dialog and Combobox) to maintain the crisp border
• Updated menuBar colour to be more visible in dark:

---

• Reviews
  • bonk has reviewed the change
  • automated review not possible because: no access to bonk
• Tests
  • Tests included/updated
  • Automated tests not possible - manual testing has been completed as follows:
  • Additional testing not necessary because: reviewed with pnpm lint and pnpm typecheck, including visual updates in code and in docs

[pkg-pr-new]

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

commit: 0e3517d

[github-actions]

Docs Preview

View docs preview

Commit: 0e3517d

[geoquant]

/bonk review

[github-actions]

Visual Regression Report

36 screenshot(s) with visual changes:

Button / Basic

0 px (0%) changed

Before	After	Diff

Button / Variant: Primary

0 px (0%) changed

Before	After	Diff

Button / Variant: Secondary

0 px (0%) changed

Before	After	Diff

Button / Variant: Ghost

0 px (0%) changed

Before	After	Diff

Button / Variant: Destructive

0 px (0%) changed

Before	After	Diff

Button / Variant: Outline

0 px (0%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

0 px (0%) changed

Before	After	Diff

Button / Sizes

0 px (0%) changed

Before	After	Diff

Button / With Icon

0 px (0%) changed

Before	After	Diff

Button / Icon Only

0 px (0%) changed

Before	After	Diff

Button / Loading State

2 px (0%) changed

Before	After	Diff

Button / Disabled State

0 px (0%) changed

Before	After	Diff

Button / Title

0 px (0%) changed

Before	After	Diff

Dialog / Dialog With Actions

200 px (0.2%) changed

Before	After	Diff

Dialog / Dialog Basic

197 px (0.19%) changed

Before	After	Diff

Dialog / Dialog Alert

354 px (0.35%) changed

Before	After	Diff

Dialog / Dialog Confirmation

0 px (0%) changed

Before	After	Diff

Dialog / Dialog With Select

0 px (0%) changed

Before	After	Diff

Dialog / Dialog With Combobox

0 px (0%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

225 px (0.22%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

0 px (0%) changed

Before	After	Diff

Select / Select Without Label

0 px (0%) changed

Before	After	Diff

Select / Select With Field

0 px (0%) changed

Before	After	Diff

Select / Select Placeholder

0 px (0%) changed

Before	After	Diff

Select / Select With Tooltip

0 px (0%) changed

Before	After	Diff

Select / Select Custom Rendering

0 px (0%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Multiple

0 px (0%) changed

Before	After	Diff

Select / Select Complex

0 px (0%) changed

Before	After	Diff

Select / Select Disabled Options

0 px (0%) changed

Before	After	Diff

Select / Select Disabled Items

0 px (0%) changed

Before	After	Diff

Select / Select Grouped

235 px (0.23%) changed

Before	After	Diff

Select / Select Grouped With Disabled

0 px (0%) changed

Before	After	Diff

Select / Select Long List

1,538 px (1.3%) changed

Before	After	Diff

Select (Open)

307 px (0%) changed

Before	After	Diff

---

Generated by Kumo Visual Regression

[ask-bonk]

Review Summary

This PR effectively fixes the token swap issue where kumo-line and kumo-hairline were inverted in dark mode, causing invisible lines.

Key Changes Reviewed

Token Values (config.ts & theme-kumo.css) ✅

• kumo-line dark mode: Now uses kumo-neutral-750 (32% lightness) — lighter, more visible
• kumo-hairline dark mode: Now uses neutral-800 (26.9% lightness) — darker, as intended for hairlines
• New --color-kumo-neutral-750 variable added to binding CSS

Semantic Token Usage ✅
The PR correctly applies the rule from AGENTS.md:

• Non-shadowed surfaces → ring-kumo-hairline (borders/ring on flat surfaces)
• Shadowed surfaces (Dialog, Combobox, Select, Dropdown, Toast) → ring-kumo-line (crisp borders alongside shadows)

Component Updates ✅

• Most components correctly migrated from kumo-line → kumo-hairline for borders/rings
• Dialog, Combobox, Select, Dropdown, Toast appropriately keep kumo-line for shadowed surfaces
• MenuBar visibility improved with bg-kumo-elevated and added ring

Test Updates ✅

• Select test updated to expect bg-kumo-hairline for separator

Visual Regression ✅

• 36 screenshots show expected changes (mostly Dialog borders)
• Changes are subtle and align with the fix intent

Changeset ✅

• Proper changeset included for both packages
• Clear description of the changes

Minor Note

The InputGroup change from focus-within:ring-kumo-hairline to focus-within:ring-kumo-line is consistent with the shadowed surface rule since InputGroup uses shadow-xs.

LGTM — approving for merge.

[ask-bonk]

I've completed my review of PR #394 and submitted an approval.

Summary

This PR effectively fixes the token swap issue where kumo-line and kumo-hairline were inverted in dark mode, causing invisible lines.

Key findings:

Token values fixed:

• kumo-line dark mode: Now uses lighter kumo-neutral-750 (32%) instead of neutral-800 (26.9%)
• kumo-hairline dark mode: Now uses darker neutral-800 (26.9%) instead of neutral-700 (37.1%)
• New --color-kumo-neutral-750 variable added

Correct semantic token usage:

• Non-shadowed surfaces → ring-kumo-hairline
• Shadowed surfaces (Dialog, Combobox, Select, Dropdown, Toast) → ring-kumo-line

All 70 files properly updated:

• Component library tokens swapped correctly
• Docs site UI updated consistently
• Test expectations updated
• Changeset included for both packages

The visual regression shows 36 screenshots with expected subtle changes. The fix follows the project's AGENTS.md conventions and is ready to merge.

github run