Skip to content

Ship the 2xs font size token to consumers - #3947

Open
rossnelson wants to merge 1 commit into
mainfrom
fix/export-2xs-font-size-token
Open

rossnelson wants to merge 1 commit into
mainfrom
fix/export-2xs-font-size-token

Conversation

@rossnelson

@rossnelson rossnelson commented Sep 19, 2026

Copy link
Copy Markdown
Collaborator

Description & motivation 💭

text-2xs renders at 14px in Temporal Cloud instead of the intended 10px.

2xs is defined in this repo's own tailwind.config.ts, but the preset published for consumers carries only content and plugins:

// node_modules/@temporalio/ui/dist/theme/preset.js — what a consumer installs
import temporal, { textStyles } from './plugin';
const config = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    plugins: [temporal, textStyles],
};
export default config;

Tailwind generates utilities from the config doing the build. An app building against this preset has no 2xs in its theme, so text-2xs produces 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 2xs is 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's sm uses text-2xs and its md uses text-xs. Since xs is a real Tailwind default and 2xs is not, sm currently renders larger than md in Cloud — so reaching for the smaller size makes the badge bigger.

Blast radius

Every 2xs consumer 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:

// theme/preset.ts
export const fontSize = { '2xs': '0.625rem' } as const;

// tailwind.config.ts
import { fontSize } from './src/lib/theme/preset';

Testing 🧪

How was this tested 👻

  • Confirmed against the real consumer
  • Strict type check clean

Reproduced by reading the shipped preset out of a consuming app's node_modules and confirming it sets no theme, alongside devtools showing font-size: 14px computed on a text-2xs badge rendered by that app.

This repo's own rendering is unchanged — the root config resolves the same 0.625rem it did before, now by import rather than by duplication. Chromatic should show no diffs.

Checklists

Merge Checklist

  • No change to this repo's own rendering
  • Consumers pick it up on the next pack bump

Issue(s) closed

None — found while checking why a size="sm" badge looked oversized in Cloud.

`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.
@rossnelson
rossnelson requested a review from a team as a code owner September 19, 2026 18:13
@vercel

vercel Bot commented Sep 19, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
holocene Ready Ready Preview Sep 19, 2026 6:14pm UTC

Request Review

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