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

Author: alexcarpenter

.changeset/hip-yaks-dance.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixes line-height discrepancy between browsers.

.changeset/twenty-sides-take.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Updates line-height calculations to follow font-sizing to fix differences across browsers.

packages/clerk-js/src/ui/foundations/typography.ts

@@ -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
 } 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;