Ship the 2xs font size token to consumers - #3947
Open
rossnelson wants to merge 1 commit into
Open
rossnelson wants to merge 1 commit into
rossnelson wants to merge 1 commit into
Conversation
`2xs` was defined in this repo's own tailwind.config.ts but not in the preset published for consumers, which carried only content and plugins. Tailwind generates utilities from the config doing the build, so an app building against the preset produced no rule for `text-2xs`. The class stayed on the element and the element inherited whatever size its parent had. In Temporal Cloud the badges render at 14px rather than the intended 10px, which also makes Badge's `sm` larger than its `md`, since `md` uses `text-xs` and that is a real Tailwind default. It affects every 2xs consumer of the package: badge, badge-status and badge-count. The token now lives in the preset and this repo's config imports it, so the two cannot drift apart again.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
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.
Description & motivation 💭
text-2xsrenders at 14px in Temporal Cloud instead of the intended 10px.2xsis defined in this repo's owntailwind.config.ts, but the preset published for consumers carries onlycontentandplugins:Tailwind generates utilities from the config doing the build. An app building against this preset has no
2xsin its theme, sotext-2xsproduces no rule at all — the class stays on the element and the element inherits whatever size its parent had.Why it went unnoticed
It looks correct everywhere we normally look at it. Storybook and this repo's own app build with the root config, where
2xsis defined, so the components render at 10px in every review surface. Only a consuming app is affected.There is a second-order oddity that makes it easy to misread:
Badge'ssmusestext-2xsand itsmdusestext-xs. Sincexsis a real Tailwind default and2xsis not,smcurrently renders larger thanmdin Cloud — so reaching for the smaller size makes the badge bigger.Blast radius
Every
2xsconsumer of the package:badge,badge-status,badge-count.Design Considerations 🎨
The token now lives in the preset and the root config imports it, rather than being written out in both places, so they cannot drift apart again:
Testing 🧪
How was this tested 👻
Reproduced by reading the shipped preset out of a consuming app's
node_modulesand confirming it sets notheme, alongside devtools showingfont-size: 14pxcomputed on atext-2xsbadge rendered by that app.This repo's own rendering is unchanged — the root config resolves the same
0.625remit did before, now by import rather than by duplication. Chromatic should show no diffs.Checklists
Merge Checklist
Issue(s) closed
None — found while checking why a
size="sm"badge looked oversized in Cloud.