Skip to content

refactor(link): collapse variants into a single underlined style - #702

Draft
FBalint wants to merge 1 commit into
cloudflare:mainfrom
FBalint:balint/remove-blue-link
Draft

refactor(link): collapse variants into a single underlined style#702
FBalint wants to merge 1 commit into
cloudflare:mainfrom
FBalint:balint/remove-blue-link

Conversation

@FBalint

@FBalint FBalint commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Link: drop the blue variants, keep the underlined one

Link used to ship three variants (inline, current, plain). WCAG requires an underline, we cannot depend on color. Underline only complies. Consolidating on a single underlined style that inherits color from the surrounding text kills the "which variant do I use" question and removes a text-kumo-link foot-gun for consumers with clashing app themes.

What changed

  • Link now has a single default variant: text-current + underline, inheriting color from its parent
  • KUMO_LINK_VARIANTS / KUMO_LINK_DEFAULT_VARIANTS retained (variant-standard lint rule); default is the only entry
  • Docs, demos, HomeGrid, and the Figma generator updated to match
  • Figma generator now no-ops combineAsVariants when a single variant exists (API requires 2+)
  • Changeset: major — this removes public variant names

  • 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:
    • Additional testing not necessary because:

Remove the 'inline', 'current', and 'plain' Link variants in favor of a
single 'default' variant that inherits color from the surrounding text
and is always underlined. This drops the brand-blue link treatment
Kumo used to ship.

- link.tsx: single 'default' variant using text-current + underline
- link.test.tsx: cover the single-variant shape; assert no text-kumo-link
- LinkDemo/link.mdx/HomeGrid: drop per-variant showcases and prop usage
- kumo-figma/link.ts: bind to text-default; handle 1-variant edge case
  (combineAsVariants requires 2+ components)
- Changeset: major bump with migration guide
@pkg-pr-new

pkg-pr-new Bot commented Aug 5, 2026

Copy link
Copy Markdown
npm i https://pkg.pr.new/@cloudflare/kumo@702

commit: 8495cc7

@github-actions

github-actions Bot commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Docs Preview

View docs preview

Commit: 8495cc7

@github-actions

github-actions Bot commented Aug 5, 2026

Copy link
Copy Markdown
Contributor
Visual Regression Report — 30 changed, 13 unchanged

30 screenshot(s) with visual changes:

Button / Variant: Ghost

194 px (0.22%) changed

Before After Diff
Before After Diff

Button / Variant: Secondary Destructive

490 px (0.55%) changed

Before After Diff
Before After Diff

Button / Sizes

1,335 px (1.51%) changed

Before After Diff
Before After Diff

Button / With Icon

819 px (0.92%) changed

Before After Diff
Before After Diff

Button / Loading State

27 px (0.03%) changed

Before After Diff
Before After Diff

Button / Disabled State

117 px (0.13%) changed

Before After Diff
Before After Diff

Button / Link with Tooltip

887 px (1%) changed

Before After Diff
Before After Diff

Dialog / Dialog With Actions

160 px (0.18%) changed

Before After Diff
Before After Diff

Dialog / Dialog Basic

316 px (0.36%) changed

Before After Diff
Before After Diff

Dialog / Dialog Sizes

2,298 px (2.59%) changed

Before After Diff
Before After Diff

Dialog / Dialog Alert

1,625 px (1.83%) changed

Before After Diff
Before After Diff

Dialog / Dialog Confirmation

415 px (0.47%) changed

Before After Diff
Before After Diff

Dialog / Custom Max Width

742 px (0.84%) changed

Before After Diff
Before After Diff

Dialog / Dialog With Select

500 px (0.56%) changed

Before After Diff
Before After Diff

Dialog / Dialog With Dropdown

480 px (0.54%) changed

Before After Diff
Before After Diff

Dialog (Open)

0 px (0%) changed

Before After Diff
Before After Diff

Select / Select Basic

1,291 px (1.46%) changed

Before After Diff
Before After Diff

Select / Select Sizes

3,216 px (1.98%) changed

Before After Diff
Before After Diff

Select / Select Without Label

664 px (0.75%) changed

Before After Diff
Before After Diff

Select / Select With Error

1,730 px (1.66%) changed

Before After Diff
Before After Diff

Select / Select With Tooltip

1,031 px (1.16%) changed

Before After Diff
Before After Diff

Select / Select Custom Rendering

1,076 px (1.21%) changed

Before After Diff
Before After Diff

Select / Select Loading

3,209 px (1.82%) changed

Before After Diff
Before After Diff

Select / Select Multiple

1,265 px (1.43%) changed

Before After Diff
Before After Diff

Select / Select Disabled Options

1,700 px (1.92%) changed

Before After Diff
Before After Diff

Select / Select Disabled Items

732 px (0.83%) changed

Before After Diff
Before After Diff

Select / Select Grouped

813 px (0.92%) changed

Before After Diff
Before After Diff

Select / Select Grouped With Disabled

1,313 px (1.48%) changed

Before After Diff
Before After Diff

Select / Select Long List

1,918 px (1.84%) changed

Before After Diff
Before After Diff

Select (Open)

0 px (0%) changed

Before After Diff
Before After Diff
13 screenshot(s) unchanged
  • Button / Basic
  • Button / Variant: Primary
  • Button / Variant: Secondary
  • Button / Variant: Destructive
  • Button / Variant: Outline
  • Button / Icon Only
  • Button / Title
  • Button / Link as Button
  • Button / Disabled Link
  • Dialog / Dialog With Combobox
  • Select / Select With Description
  • Select / Select Placeholder
  • Select / Select Complex

Generated by Kumo Visual Regression

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant