Text: apply line-height per size so consumers don't override it

[lmjabreu]

🚀 Feature request

Motivation

Text sets font-family, font-size, font-weight, and color, but no line-height (see src/text/text.module.css). It inherits whatever line-height the surrounding document provides, so any consumer that needs the design's vertical rhythm has to override it with exceptionallySetClassName.

Two places in todoist-web do exactly this for caption copy: the Goal Health widget and ProjectHealthCard both set line-height: 1.667 on a size="caption" Text. That value isn't arbitrary. Banner already encodes --reactist-banner-secondary-copy-line-height: 20px for caption-sized secondary copy, and 20px / 12px caption = 1.667. So the design intent for caption line-height already lives in the system; Text just doesn't apply it.

This came up in review on Doist/todoist-web#17741 (h/t @gnapse), where the right home for the fix was flagged as Text itself rather than a per-consumer override.

Example

Today, to get the intended caption rhythm a consumer overrides it:

<Text size="caption" tone="secondary" exceptionallySetClassName={styles.caption}>
    {description}
</Text>
// styles.caption { line-height: 1.667 }

Desired: Text carries the correct line-height per size, so this is enough:

<Text size="caption" tone="secondary">{description}</Text>

Possible implementations

• Add line-height to the Text size classes in text.module.css, ideally via new tokens (--reactist-line-height-caption, -copy, -body, -subtitle) alongside the existing --reactist-font-size-* tokens.
• Caption maps to 20px (matching the Banner secondary-copy precedent). The other sizes need design-confirmed values.

Worth calling out the blast radius: Text currently sets no line-height, so adding it shifts vertical rhythm for every Text consumer across products. This wants a design pass on the values and a visual sweep before landing, which is why it's an issue rather than a drive-by PR. Once the values are agreed, consumers like the todoist-web health widgets can drop their line-height overrides.

[frankieyan]

We have two older, related issues:

• [Text] It should be possible to set a line-height for a Text component #632
• Reactist <> Product Library Header Alignment #701

Best way to go about it is to cut it from https://github.com/Doist/reactist/tree/next as a "pre-release" (like @rfgamaral did in Doist/typist#1237) to enable testing via a deployed preview in-app.