Skip to content

[kumo] Make Button emphasis foreground themeable - #763

Open
ftzi wants to merge 1 commit into
cloudflare:mainfrom
ftzi:fix/button-emphasis-foreground
Open

[kumo] Make Button emphasis foreground themeable#763
ftzi wants to merge 1 commit into
cloudflare:mainfrom
ftzi:fix/button-emphasis-foreground

Conversation

@ftzi

@ftzi ftzi commented Aug 31, 2026

Copy link
Copy Markdown

Issue

Primary and destructive Buttons in @cloudflare/kumo@2.12.0 force a white foreground even though their emphasis backgrounds come from semantic theme colors. When a custom theme uses a light brand or danger color, Button text can lose contrast, and the theme has no semantic foreground hook for choosing a dark color.

On current main, KUMO_BUTTON_VARIANTS applies !text-white to both primary and destructive. In the same component, getEmphasisStyle() derives the background, gradient, and ring from --color-kumo-brand or --color-kumo-danger, so those surfaces respond to theme values while the foreground remains fixed.

For example, a theme that sets a light --color-kumo-brand or --color-kumo-danger value renders a light emphasis surface while the computed foreground stays white. Ordinary text utilities and stylesheet rules lose to !text-white, so a dark foreground currently requires an !important override.

Solution

  • Add the narrowly scoped semantic token text-kumo-button-emphasis, backed by --text-color-kumo-button-emphasis.
  • Default the token to white in both light and dark modes, preserving existing Kumo visuals.
  • Replace !text-white with !text-kumo-button-emphasis for primary and destructive variants. The Button declaration keeps its existing precedence, but now reads a theme variable that consumers can override without !important.
  • Verify enabled, disabled, and loading states; disabled and loading opacity remain 0.5.
  • Update generated theme CSS, semantic token documentation, AI usage guidance, downstream Banner expectations, and the package changeset; verify registry and Figma generation consume the new token.

Validation

  • Static gates: formatting, lint, workspace typecheck, lockfile stability, and diff checks passed.
  • Tests: 52 unit files with 1,278 tests, 2 focused Chromium tests, and 197 export-path assertions passed.
  • Builds and generation: Kumo package and docs builds passed; registry and Figma generation consumed the new token.
  • Release metadata: changeset status and Kumo changeset validation passed.

Remaining limits

AI disclosure

This change and pull request description were prepared by an AI coding agent at the contributor's direction.


  • Reviews
    • bonk has reviewed the change
    • automated review not possible because: bonk review requires invocation by a repository collaborator
  • Tests
    • Tests included/updated
    • Automated tests not possible - manual testing has been completed as follows:
    • Additional testing not necessary because:

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