feat(Tag): add a soft primary theme - #1421
Merged
Merged
Conversation
`Tag` could render the soft card in `default`, `danger`, `success`,
`warning` and `note`, but not in the brand hue — `theme="special"` is
rewritten to `default.primary`, a solid fill. A design calling for a soft
purple chip had no spelling, so call sites borrowed `note` one hue over
(302.3 vs 280.3).
Adds `primary.card` to `ITEM_VARIANTS` and `primary` to `Tag`'s theme
enum. `Tag` already built `${theme}.${type}` with `type` pinned to
`card`, so there is no logic change. `special` is untouched.
The card is spelled `primary` rather than `special` because the
item-themes `special` theme is a fixed-mode dark purple with white text;
`default` is the untinted path, so its card is neutral grey. `primary`
is the brand theme carrying the tinted surface, which is what the
three-token card shape needs.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: c7f5c7c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
📦 NPM canary releaseDeployed canary version 0.0.0-canary-02bd39f. |
Contributor
🧪 Storybook is successfully deployed!
|
Contributor
🏋️ Size limit report
Compared against main at 095f53c — run 35745770032, 2026-09-22T15:13:05Z.To see which modules changed, download the size-limit-statoscope-report artifact from this run and open report.html. |
This branch was successfully deployed
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
1 participant
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.
Closes CUB-4527.
The gap
Tagrenders the soft card — pale fill, tinted border, strong colored text — indefault,danger,success,warningandnote, but not in the brand hue. The one purple spelling,theme="special", is rewritten internally todefault.primary, which is a solid fill — a different visual weight entirely.So a design calling for a soft purple chip had no spelling in the kit. Cloud's bin/group editor settles for
theme="note"and says so in a comment: soft, but one hue over — magenta 302.3 where the design wants primary 280.3.The change
<Tag theme="primary">now renders the soft chip at hue 280.specialis untouched and still renders the solid fill.It is small because
Tagalready builtvariant={`${theme}.${type}`}withtypepinned to'card'— the only thing missing was that key in the map. So: aPRIMARY_CARD_STYLESconstant, one union member, one map entry, one value in the public enum, and no change to Tag's body at all.Why
primaryand notspecialordefaultNeither obvious spelling works, which is why the code carries a comment saying so:
special.card— the item-themesspecialtheme is a fixed-mode dark purple anchored on#special-surfacewith white text, so a card cut from it would be a dark chip.default.card—defaultis the untinted path, so its card is the neutral grey one.primaryis the same brand theme with the tinted surface (palette.ts→primaryTheme), which is exactly what the three-token card shape needs.Verification
pnpm testpnpm test:typespnpm audit-docs --component=Tagpnpm sizemainbaselinepnpm chromatic:checkThe strongest evidence is the computed colour from a real browser, not the eye:
oklch(0.2618 0.0089 280.3), textoklch(0.7636 0.12 280.3)302.3Provably the same chip one hue over. It inverts correctly across all four scheme variants (light / dark / HC / dark+HC), tracking
note's lightness within ~0.005, so it is contrast-safe wherevernote.cardalready is. TheisClosableaction inherits the theme correctly (--current-colorresolves to--primary-accent-text).No new story —
primarygoes into the existingThemesmatrix next tospecial, so the soft/solid pair reads as one comparison and costs no extra Chromatic snapshot.Scope
Item'sCARD_THEMESwhitelist is deliberately unchanged.Tagreachesprimary.cardbecause it passesvariantstraight through rather than going viatheme/type, so nothing warns. The consequence, documented initem-themes.tsrather than left latent:<Item type="card" theme="primary">renders correctly but still emits the invalid-combination warning. WideningItem— which would giveAlert,NotificationCard,ToastandItemButtonthe same chip — is a clean follow-up.item-themes.tsis internal, so the only public API change isTag'sthemeenum. The widening ofItemVariantreaches consumers only throughItem'svariantprop, additively.Follow-ups (not in this PR)
primarytoItem'sCARD_THEMESand theTypesAndThemesmatrix.theme="primary"and drop its// Workaround for CUB-4527comment, once console-ui bumps its pin.Tag's stories and docs both advertise adisabledtheme that is not in the prop union and has nodisabled.cardvariant — probing<Tag theme="disabled">shows a fully transparent background, not the grey chip the docs promise. Worth its own issue.🤖 Generated with Claude Code