refactor: deprecate kumo hairline by FBalint · Pull Request #700 · cloudflare/kumo

FBalint · 2026-08-05T10:58:20Z

Deprecate kumo-hairline, unify on kumo-line

We had two border tokens that were doing the same job with subtly different values (light: oklch(93.5% 0 0) vs oklch(14.5% 0 0 / 0.1), dark: oklch(26.9%) vs oklch(32%)). In practice that just produced a two-tone look across the UI depending on which component you were looking at. Consolidating on kumo-line.

New values: 10% black in light mode, 10% white in dark mode. Opacity-based so it plays nicely with shadows and tinted surfaces.

kumo-hairline is kept as a CSS alias (--color-kumo-hairline: var(--color-kumo-line);) with a deprecated JSDoc, so external consumers keep working.

Reviews
- bonk has reviewed the change
- automated review not possible because: token deprecation + mechanical rename, low review-value for a bot
Tests
- Tests included/updated
- Automated tests not possible - manual testing has been completed as follows:
- Additional testing not necessary because: visual regression suite covers border rendering across all components; typecheck/lint/unit tests all pass; only pre-existing figma snapshot failures on this branch (verified unchanged from main)

Redefine kumo-line to use 10% black in light mode and 10% white in dark mode, unifying the two former border/ring tokens into a single semantic token. Add a backwards-compatibility alias so existing consumers using bg-kumo-hairline / border-kumo-hairline / ring-kumo-hairline etc. continue to render identically; the alias will be removed in the next major release.

Update AGENTS.md examples, USAGE.md token reference, colors.mdx token table, and lint rule comments to reflect the deprecation. Merge the two former Borders & Rings rows (hairline + line) into a single line entry describing the new semantics.

Sweep every internal usage of bg-kumo-hairline / border-kumo-hairline / ring-kumo-hairline / divide-kumo-hairline etc. across kumo components, registry metadata, kumo-figma parsers and generators, and the docs site (demos, layouts, mdx pages, global.css) over to kumo-line. Also fix a pre-existing duplicate --color-kumo-hairline declaration in KumoPressDemo.tsx (collapsed to a single --color-kumo-line) and reword a JSDoc comment in SidebarDemo.tsx to avoid the deprecated term. Existing external consumers are unaffected thanks to the compatibility alias added when the token was deprecated.

pkg-pr-new · 2026-08-05T11:07:47Z

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

commit: 451aad2

github-actions · 2026-08-05T11:08:37Z

Docs Preview

View docs preview

Commit: 451aad2

github-actions · 2026-08-05T11:11:50Z

Visual Regression Report — 43 changed, 0 unchanged

43 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

8 px (0.01%) changed

Before	After	Diff

Button / Disabled State

0 px (0%) changed

Before	After	Diff

Button / Title

0 px (0%) changed

Before	After	Diff

Button / Link as Button

0 px (0%) changed

Before	After	Diff

Button / Link with Tooltip

0 px (0%) changed

Before	After	Diff

Button / Disabled Link

0 px (0%) changed

Before	After	Diff

Dialog / Dialog With Actions

298 px (0.34%) changed

Before	After	Diff

Dialog / Dialog Basic

0 px (0%) changed

Before	After	Diff

Dialog / Dialog Sizes

2,298 px (2.59%) changed

Before	After	Diff

Dialog / Dialog Alert

0 px (0%) changed

Before	After	Diff

Dialog / Dialog Confirmation

0 px (0%) changed

Before	After	Diff

Dialog / Custom Max Width

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

0 px (0%) changed

Before	After	Diff

Dialog (Open)

105 px (0%) changed

Before	After	Diff

Select / Select Basic

0 px (0%) changed

Before	After	Diff

Select / Select Sizes

0 px (0%) changed

Before	After	Diff

Select / Select Without Label

573 px (0.65%) changed

Before	After	Diff

Select / Select With Description

0 px (0%) changed

Before	After	Diff

Select / Select With Error

0 px (0%) changed

Before	After	Diff

Select / Select Placeholder

1,999 px (2.26%) 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

1,541 px (1.74%) changed

Before	After	Diff

Select / Select Disabled Items

754 px (0.85%) changed

Before	After	Diff

Select / Select Grouped

895 px (1.01%) changed

Before	After	Diff

Select / Select Grouped With Disabled

1,414 px (1.6%) changed

Before	After	Diff

Select / Select Long List

0 px (0%) changed

Before	After	Diff

Select (Open)

1,082 px (0%) changed

Before	After	Diff

Generated by Kumo Visual Regression

balint added 4 commits August 5, 2026 11:28

fix: migrate table of contents border usage

451aad2

Uh oh!

Conversation

FBalint commented Aug 5, 2026

Deprecate kumo-hairline, unify on kumo-line

Uh oh!

pkg-pr-new Bot commented Aug 5, 2026

Uh oh!

github-actions Bot commented Aug 5, 2026

Docs Preview

Uh oh!

github-actions Bot commented Aug 5, 2026

Button / Basic

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 / Loading State

Button / Disabled State

Button / Title

Button / Link as Button

Button / Link with Tooltip

Button / Disabled Link

Dialog / Dialog With Actions

Dialog / Dialog Basic

Dialog / Dialog Sizes

Dialog / Dialog Alert

Dialog / Dialog Confirmation

Dialog / Custom Max Width

Dialog / Dialog With Select

Dialog / Dialog With Combobox

Dialog / Dialog With Dropdown

Dialog (Open)

Select / Select Basic

Select / Select Sizes

Select / Select Without Label

Select / Select With Description

Select / Select With Error

Select / Select Placeholder

Select / Select With Tooltip

Select / Select Custom Rendering

Select / Select Loading

Select / Select Multiple

Select / Select Complex

Select / Select Disabled Options

Select / Select Disabled Items

Select / Select Grouped

Select / Select Grouped With Disabled

Select / Select Long List

Select (Open)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant