feat(badge): add color-based variants and deprecate semantic variants#327
Open
nandanmen wants to merge 9 commits intocloudflare:mainfrom
Open
feat(badge): add color-based variants and deprecate semantic variants#327nandanmen wants to merge 9 commits intocloudflare:mainfrom
nandanmen wants to merge 9 commits intocloudflare:mainfrom
Conversation
Replace primary/secondary/destructive/success/outline/beta with color variants (red, orange, yellow, green, teal, blue, neutral, inverted) plus subtle variants for each color. Includes dark mode support with flipped subtle colors, darkened regular variants, and inverted flip.
…ariants Add back outline and beta variants unchanged. Add deprecated primary, secondary, destructive, and success variants mapped to their new color equivalents for backwards compatibility. Update changeset and docs.
geoquant
reviewed
Mar 27, 2026
| }, | ||
| "green-subtle": { | ||
| classes: | ||
| "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200", |
Collaborator
There was a problem hiding this comment.
there should be a lint rule that prevents writing dark: classes.
for theming to work, we need vars
geoquant
requested changes
Mar 27, 2026
Collaborator
geoquant
left a comment
geoquant
left a comment
There was a problem hiding this comment.
- demo labels to match the variant blue => "Blue Subtle"
- remove dark: classes and creating new variables
commit: |
…tic tokens Add badge color tokens to theme-generator config for all color variants (red, orange, yellow, green, teal, blue, neutral, inverted) and their subtle counterparts. Tokens use light-dark() so dark mode is automatic without dark: prefix. - 13 new color tokens (kumo-badge-*) for backgrounds - 8 new text-color tokens for subtle variant text and inverted text - Updated badge.tsx to reference semantic classes (bg-kumo-badge-*, text-kumo-badge-*) - Deprecated variants (primary, secondary, destructive, success) also updated - Passes lint (0 errors), typecheck, and all 676 tests
- Rewrote vite-plugin-kumo-colors to use ssrLoadModule in dev mode, reading the source config.ts directly instead of the built dist/. No more stale tokens when editing theme-generator config — changes appear on the docs color page without rebuilding kumo. - Added theme-generator aliases to kumo-hmr plugin for completeness. - Removed kumo-badge-neutral-subtle color token (duplicate of kumo-fill). Badge neutral-subtle variant now uses bg-kumo-fill instead.
Automatically groups component-level tokens (e.g. kumo-badge-*)
under a new 'Component Colors' section on the /colors docs page.
Detection is dynamic — uses the component registry to identify token
names matching the pattern kumo-{component}-{variant}. Requires at
least 2 segments after 'kumo-' to avoid false positives on standalone
semantic tokens like kumo-link or kumo-surface.
Currently shows Badge (22 tokens). As other components add their own
color tokens following the same naming convention, they'll appear
automatically without code changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
red,orange,yellow,green,teal,blue,neutral,invertedred-subtle,orange-subtle, etc.) with lighter backgrounds and darker textoutlineandbetavariants unchangedprimary(useinverted),secondary(useneutral),destructive(usered),success(usegreen) with backwards-compatible aliasesprimarytoneutral