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

1 participant