Docs: Fix prose text colors and typography after MDX migration (1/5) by pedromenezes1 · Pull Request #419 · cloudflare/kumo

pedromenezes1 · 2026-04-15T23:17:46Z

Summary

The .astro → .mdx migration introduced .kumo-prose overrides that referenced non-existent --color-kumo-* CSS variables for text colors. The correct namespace is --text-color-kumo-*. This caused all prose text (headings, body, links, lists) to fall back to browser-default #000 across all MDX doc pages.

Changes

Fix 28 CSS variable references in .kumo-prose token overrides (--color-kumo-* → --text-color-kumo-*) for both light and dark modes
Align prose <p> / <ul> / <ol> / <li> to text-base leading-relaxed (matching kumo <Text> component)
Add letter-spacing (-0.02em headings, -0.01em body content)
Add text-kumo-default to <html> as a root text color safety net
Fix heading anchors inheriting prose link color and font-weight → inherit
Fix invalid ring-color CSS property → --tw-ring-color
Fix margin-bottom: 1rem 0 → split into base + adjacent-sibling margin rules
Standardize ComponentSection spacing to mb-8
Fix ChangelogEntry code block font size ([&_pre]:text-base) to match paragraph sizing
Fix prose heading color: use text-kumo-default (near-black) instead of text-kumo-strong (gray) for --tw-prose-headings
Reduce <hr> margin from 3em to 1.5rem (24px)

Reviews
- bonk has reviewed the change
- automated review not possible because: docs-only CSS changes, no component library code modified
Tests
- Additional testing not necessary because: docs-site-only styling changes — build passes, all 59 pages render correctly

pkg-pr-new · 2026-04-15T23:20:02Z

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

commit: b1e5fde

github-actions · 2026-04-15T23:20:50Z

Docs Preview

View docs preview

Commit: 059dca4

github-actions · 2026-04-15T23:24:49Z

Visual Regression Report — 29 changed, 8 unchanged

29 screenshot(s) with visual changes:

Button / Basic

183 px (0.18%) changed

Before	After	Diff

Button / Variant: Ghost

164 px (0.16%) changed

Before	After	Diff

Button / Variant: Outline

155 px (0.15%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

0 px (0%) changed

Before	After	Diff

Button / With Icon

272 px (0.27%) changed

Before	After	Diff

Button / Icon Only

0 px (0%) changed

Before	After	Diff

Button / Loading State

520 px (0.51%) changed

Before	After	Diff

Button / Disabled State

234 px (0.23%) changed

Before	After	Diff

Button / Title

272 px (0.27%) changed

Before	After	Diff

Dialog / Dialog With Actions

191 px (0.19%) changed

Before	After	Diff

Dialog / Dialog Alert

744 px (0.73%) changed

Before	After	Diff

Dialog / Dialog Confirmation

352 px (0.35%) changed

Before	After	Diff

Dialog / Dialog With Select

236 px (0.23%) changed

Before	After	Diff

Dialog / Dialog With Combobox

0 px (0%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

130 px (0.13%) changed

Before	After	Diff

Dialog (Open)

480,961 px (2.39%) changed

Before	After	Diff

Select / Select Basic

468 px (0.46%) changed

Before	After	Diff

Select / Select Sizes

1,004 px (0.54%) changed

Before	After	Diff

Select / Select Without Label

161 px (0.16%) changed

Before	After	Diff

Select / Select With Field

844 px (0.71%) changed

Before	After	Diff

Select / Select Placeholder

724 px (0.71%) changed

Before	After	Diff

Select / Select With Tooltip

294 px (0.29%) changed

Before	After	Diff

Select / Select Custom Rendering

612 px (0.6%) changed

Before	After	Diff

Select / Select Loading

16,448 px (7.65%) changed

Before	After	Diff

Select / Select Disabled Options

508 px (0.5%) changed

Before	After	Diff

Select / Select Disabled Items

251 px (0.25%) changed

Before	After	Diff

Select / Select Grouped With Disabled

450 px (0.44%) changed

Before	After	Diff

Select / Select Long List

898 px (0.76%) changed

Before	After	Diff

Select (Open)

799,928 px (3.22%) changed

Before	After	Diff

8 screenshot(s) unchanged

Button / Variant: Primary
Button / Variant: Secondary
Button / Variant: Destructive
Button / Sizes
Dialog / Dialog Basic
Select / Select Multiple
Select / Select Complex
Select / Select Grouped

Generated by Kumo Visual Regression

pedromenezes1 · 2026-04-16T00:32:24Z

/bonk

ask-bonk

Code Review ✅

Changes approved.

This PR correctly fixes the CSS variable namespace regression from to for prose text colors. The 28 variable fixes, typography improvements, and spacing standardizations are all appropriate and follow project conventions.

Key fixes verified:

✅ CSS variable namespace corrected (28 references)
✅ Letter-spacing and typography alignment with kumo Text component
✅ Invalid property fixed to
✅ Root text color safety net added
✅ Visual regression changes are expected (color corrections)

The changes are minimal, well-scoped to docs-only files, and address the root cause described in the PR.

ask-bonk

Code Review ✅

Changes approved.

This PR correctly fixes the CSS variable namespace regression from the incorrect prefix to the correct text-color prefix for prose text colors. The 28 variable fixes, typography improvements, and spacing standardizations are all appropriate and follow project conventions.

Key fixes verified:

CSS variable namespace corrected (28 references)
Letter-spacing and typography alignment with kumo Text component
Invalid ring-color property fixed to --tw-ring-color
Root text color safety net added
Visual regression changes are expected (color corrections)

The changes are minimal, well-scoped to docs-only files, and address the root cause described in the PR.

ask-bonk · 2026-04-16T00:37:33Z

I've completed the code review for PR #419 and approved the changes.

Summary

The PR fixes a CSS variable namespace regression introduced during the .astro → .mdx migration. The prose text color variables were incorrectly using --color-kumo-* instead of --text-color-kumo-*, causing all prose text to fall back to browser-default black.

Key Changes Reviewed

File	Change
`global.css`	Fixed 28 CSS variable references, added letter-spacing, fixed heading anchor inheritance, corrected ring-color property
`BaseLayout.astro`	Added `text-kumo-default` root safety net
`ComponentSection.astro`	Standardized to `mb-8` spacing
`ChangelogEntry.tsx`	Added code block font size matching

The visual regression report showing 37 changed screenshots is expected - these represent the color fixes being applied correctly across component demos.

github run

pedromenezes1 added the no-changeset-required label Apr 15, 2026

pedromenezes1 marked this pull request as draft April 15, 2026 23:25

fix(docs): prose CSS variable and typography fixes

c2f0bf0

pedromenezes1 force-pushed the fix/docs-prose-css-variables branch from 6b9292f to c2f0bf0 Compare April 15, 2026 23:29

pedromenezes1 changed the title ~~Docs: Fix prose text colors and typography after MDX migration~~ Docs: Fix prose text colors and typography after MDX migration (1/5) Apr 15, 2026

pedromenezes1 added 3 commits April 16, 2026 00:36

fix: revert dark mode comment to original

5b5d963

fix: simplify CSS comments

1c8803a

fix: simplify heading anchor comment

8c5039a

This was referenced Apr 15, 2026

Docs: Remove redundant inline styles now handled by prose (4/5) #422

Merged

Docs: Add automatic heading anchors via remark plugin (2/5) #421

Merged

[Preview] Docs: Typography overhaul and heading system (combined 1/5–5/5) #417

Closed

pedromenezes1 marked this pull request as ready for review April 16, 2026 00:32

ask-bonk bot approved these changes Apr 16, 2026

View reviewed changes

pedromenezes1 added 2 commits April 16, 2026 01:35

fix: use text-kumo-default for prose headings (darker color)

fb80473

fix: reduce hr margin from 3em to 1.5rem

e19f6cf

fix: simplify heading and body text comments

eaf9730

pedromenezes1 self-assigned this Apr 16, 2026

pedromenezes1 requested a review from mattrothenberg April 16, 2026 00:43

pedromenezes1 added 4 commits April 16, 2026 02:05

fix: reset letter-spacing on code blocks and inline code

a03ea06

fix: improve pre element padding, margin and font size

35df71d

fix: add background and border to pre elements

834f474

fix: reset letter-spacing and line-height inside not-prose wrappers

b1e5fde

mattrothenberg approved these changes Apr 16, 2026

View reviewed changes

pedromenezes1 merged commit a958d4f into main Apr 16, 2026
17 checks passed

pedromenezes1 deleted the fix/docs-prose-css-variables branch April 16, 2026 15:05

Conversation

pedromenezes1 commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Uh oh!

pkg-pr-new bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Docs Preview

Uh oh!

github-actions bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Button / Basic

Button / Variant: Ghost

Button / Variant: Outline

Button / Variant: Secondary Destructive

Button / With Icon

Button / Icon Only

Button / Loading State

Button / Disabled State

Button / Title

Dialog / Dialog With Actions

Dialog / Dialog Alert

Dialog / Dialog Confirmation

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 Field

Select / Select Placeholder

Select / Select With Tooltip

Select / Select Custom Rendering

Select / Select Loading

Select / Select Disabled Options

Select / Select Disabled Items

Select / Select Grouped With Disabled

Select / Select Long List

Select (Open)

Uh oh!

pedromenezes1 commented Apr 16, 2026

Uh oh!

ask-bonk bot left a comment

Choose a reason for hiding this comment

Code Review ✅

Uh oh!

ask-bonk bot left a comment

Choose a reason for hiding this comment

Code Review ✅

Uh oh!

ask-bonk bot commented Apr 16, 2026

Summary

Key Changes Reviewed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pedromenezes1 commented Apr 15, 2026 •

edited

Loading

pkg-pr-new bot commented Apr 15, 2026 •

edited

Loading

github-actions bot commented Apr 15, 2026 •

edited

Loading

github-actions bot commented Apr 15, 2026 •

edited

Loading