Skip to content

fix(clerk-js): Variable line-height discrepancy #7112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(clerk-js): Variable line-height discrepancy #7112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3831d5
fix(clerk-js): Variable line-height discrepancy
alexcarpenter Oct 31, 2025
45f5c10
add changeset
alexcarpenter Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/twenty-sides-take.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Updates line-height calculations to follow font-sizing to fix differences across browsers.
18 changes: 9 additions & 9 deletions packages/clerk-js/src/ui/foundations/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,22 @@ const fontWeights = Object.freeze({

const lineHeights = Object.freeze({
normal: 'normal',
extraSmall: '1.33333',
small: '1.38462',
medium: '1.41176',
large: '1.45455',
extraSmall: '16 / 12', // = 1.33333
small: '18 / 13', // = 1.38462
medium: '24 / 17', // = 1.41176
large: '16 / 11', // = 1.45455
Comment on lines +12 to +15
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify that lineHeight consumers support fractional expressions.

The fractional format (e.g., '16 / 12') aligns with the font-sizing approach used in FONT_SIZE_SCALE_RATIOS, but this is only valid CSS when wrapped in calc(). Unlike FONT_SIZE_SCALE_RATIOS (which are explicitly used inside calc() on lines 34-38), the consumption of lineHeights is not visible in this file.

Run the following script to verify how lineHeights are consumed and whether they're properly wrapped in calc():

🏁 Script executed:

#!/bin/bash
# Description: Find all usages of lineHeights to verify fractional format compatibility

# Search for lineHeights usage patterns
rg -n -C3 --type=ts --type=tsx 'lineHeights\.' packages/clerk-js/src/

# Also check for direct object access
rg -n -C3 --type=ts --type=tsx 'from.*typography.*lineHeights' packages/clerk-js/src/

Length of output: 55


---

🏁 Script executed:

```shell
#!/bin/bash
# Description: Find lineHeights usage with corrected rg syntax

# Search for lineHeights imports and usages without type filters
rg -n -C3 'lineHeights' packages/clerk-js/src/ --glob='*.ts' --glob='*.tsx'

# Also search for where typography is imported
rg -n -C3 'from.*typography' packages/clerk-js/src/ --glob='*.ts' --glob='*.tsx'

# Search for calc\(\s*\$\{.*lineHeights to see if wrapped in calc
rg -n -C2 'calc.*lineHeights|lineHeights.*calc' packages/clerk-js/src/ --glob='*.ts' --glob='*.tsx'

Length of output: 8180


---

🏁 Script executed:

```shell
#!/bin/bash
# Description: Verify how typography style objects (h1, h2, etc.) are consumed

# Find where common.ts exports are used
rg -n -C3 'from.*common' packages/clerk-js/src/ui/ --glob='*.ts' --glob='*.tsx'

# Search for how typography preset styles are applied
rg -n 'h1|h2|h3|subtitle|body|caption|buttonLarge|buttonSmall' packages/clerk-js/src/ui/styledSystem/common.ts -A1 -B1

# Check if there's styled-system configuration that processes lineHeight
rg -n -C5 'lineHeight' packages/clerk-js/src/ui/styledSystem/ --glob='*.ts' --glob='*.tsx'

Length of output: 66783


---

🏁 Script executed:

```shell
#!/bin/bash
# Find how the typography presets from common.ts are exported and used

# Check what common.ts exports
rg -n 'export.*common' packages/clerk-js/src/ui/styledSystem/index.ts -A5

# Find usage of the typography presets (h1, h2, h3, subtitle, body, etc.)
rg -n '\bh1\b|\bh2\b|\bh3\b|\bsubtitle\b' packages/clerk-js/src/ui/ --glob='*.ts' --glob='*.tsx' -B2 -A2 | head -100

# Check if there's any CSS-in-JS library processing (e.g., styled-components, emotion)
rg -n 'css|styled' packages/clerk-js/src/ui/styledSystem/createVariants.ts -A5 | head -50

# Look for where lineHeight values get processed
rg -n 'lineHeight' packages/clerk-js/src/ui/styledSystem/createVariants.ts -B3 -A3

Length of output: 6998


---

🏁 Script executed:

```shell
#!/bin/bash
# Find textVariants function definition in common.ts

# Show the entire common.ts file to understand structure
cat packages/clerk-js/src/ui/styledSystem/common.ts

# Also check if there's any processing of lineHeight values elsewhere
rg -n 'textVariants' packages/clerk-js/src/ui/ --glob='*.ts' --glob='*.tsx' -B2 -A2

Length of output: 12688

Wrap lineHeight values in calc() to fix invalid CSS syntax.

The fractional format (e.g., '16 / 12') used in lineHeights is invalid CSS syntax unless wrapped in calc(). Unlike FONT_SIZE_SCALE_RATIOS, which are properly wrapped in calc() on lines 34-38 of packages/clerk-js/src/ui/foundations/typography.ts, the lineHeights values are spread directly into style objects without calculation wrapping. This will cause browsers to reject these values and fall back to inherited line-height, breaking the intended typography scaling.

Update lineHeights in packages/clerk-js/src/ui/foundations/typography.ts (lines 12-15) to wrap fractional expressions in calc():

extraSmall: 'calc(16 / 12)', // = 1.33333
small: 'calc(18 / 13)', // = 1.38462
medium: 'calc(24 / 17)', // = 1.41176
large: 'calc(16 / 11)', // = 1.45455
🤖 Prompt for AI Agents 
In packages/clerk-js/src/ui/foundations/typography.ts around lines 12 to 15, the
lineHeights entries use raw fractional strings like '16 / 12' which are invalid
CSS when emitted into style objects; wrap each fractional expression in calc(),
e.g. change '16 / 12' to 'calc(16 / 12)' (and similarly for '18 / 13', '24 /
17', '16 / 11') so the generated CSS is valid and browsers compute the intended
numeric line-height.

} as const);

const letterSpacings = Object.freeze({
normal: 'normal',
} as const);

export const FONT_SIZE_SCALE_RATIOS = Object.freeze({
xs: '11 / 13', // 0.846154
sm: '12 / 13', // 0.923077
md: '1', // 1.0
lg: '17 / 13', // 1.307692
xl: '24 / 13', // 1.846154
xs: '11 / 13', // = 0.846154
sm: '12 / 13', // = 0.923077
md: '1', // = 1.0
lg: '17 / 13', // = 1.307692
xl: '24 / 13', // = 1.846154
} as const);

export type FontSizeKey = keyof typeof FONT_SIZE_SCALE_RATIOS;
Expand Down