braid-design-system 32.1.1 → 32.2.0

package/dist/side-effects/lib/themes/makeRuntimeTokens.mjs

@@ -1,15 +1,10 @@
 import mapValues from "lodash/mapValues.js";
-import values from "lodash/values.js";
 import { isLight } from "../../../styles/lib/utils/index.mjs";
-const makeWebFonts = ({ webFont, fontWeight }) => {
+const makeWebFonts = (webFont) => {
   if (!webFont) {
     return [];
   }
-  const weights = values(fontWeight);
-  const linkTag = `<link href="https://fonts.googleapis.com/css?family=${encodeURIComponent(
-    `${webFont}:${weights.sort().join(",")}`
-  )}" rel="stylesheet" />`;
-  return [{ linkTag }];
+  return [{ linkTag: `<link href="${webFont}" rel="stylesheet" />` }];
 };
 const makeRuntimeTokens = (tokens) => ({
   name: tokens.name,
@@ -18,7 +13,7 @@ const makeRuntimeTokens = (tokens) => ({
     lightMode: tokens.color.background.body,
     darkMode: tokens.color.background.bodyDark
   },
-  webFonts: makeWebFonts(tokens.typography),
+  webFonts: makeWebFonts(tokens.typography.webFont),
   space: {
     grid: tokens.grid,
     space: tokens.space

package/dist/side-effects/lib/themes/tokenType.cjs

@@ -0,0 +1,15 @@
+"use strict";
+const extractFontMetricsForTheme = ({
+  capHeight,
+  ascent,
+  descent,
+  lineGap,
+  unitsPerEm
+}) => ({
+  capHeight,
+  ascent,
+  descent,
+  lineGap,
+  unitsPerEm
+});
+exports.extractFontMetricsForTheme = extractFontMetricsForTheme;

package/dist/side-effects/lib/themes/tokenType.mjs

@@ -0,0 +1,16 @@
+const extractFontMetricsForTheme = ({
+  capHeight,
+  ascent,
+  descent,
+  lineGap,
+  unitsPerEm
+}) => ({
+  capHeight,
+  ascent,
+  descent,
+  lineGap,
+  unitsPerEm
+});
+export {
+  extractFontMetricsForTheme
+};

package/dist/styles/lib/components/Button/Button.css.cjs

@@ -7,9 +7,6 @@ const styles_lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs"
 const styles_lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
 const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
 fileScope.setFileScope("src/lib/components/Button/Button.css.ts?used", "braid-design-system");
-const constants = {
-  smallButtonPaddingSize: "xsmall"
-};
 const root = css.style({
   textDecoration: "none"
 }, "root");
@@ -35,28 +32,32 @@ const focusOverlay = css.style({
     }
   }
 }, "focusOverlay");
-const standard = css.style({}, "standard");
-const small = css.style({}, "small");
-const stylesForBreakpoint = (breakpoint, size) => {
-  const height = size === "small" ? cssUtils.calc.add(cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.space[constants.smallButtonPaddingSize], 2), styles_lib_themes_vars_css_cjs.vars.textSize.small[breakpoint].lineHeight) : styles_lib_themes_vars_css_cjs.vars.touchableSize;
-  const value = cssUtils.calc(height).subtract(styles_lib_themes_vars_css_cjs.vars.textSize[size][breakpoint].capHeight).divide(2).negate().toString();
-  return {
-    marginTop: value,
-    marginBottom: value
-  };
+const minHeightValueForSize = {
+  standard: styles_lib_themes_vars_css_cjs.vars.touchableSize,
+  small: cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.touchableSize, 0.8)
 };
-const bleedVerticallyToCapHeight = css.style({
-  selectors: {
-    [`${standard}&`]: styles_lib_css_responsiveStyle_cjs.responsiveStyle({
-      mobile: stylesForBreakpoint("mobile", "standard"),
-      tablet: stylesForBreakpoint("tablet", "standard")
-    }),
-    [`${small}&`]: styles_lib_css_responsiveStyle_cjs.responsiveStyle({
-      mobile: stylesForBreakpoint("mobile", "small"),
-      tablet: stylesForBreakpoint("tablet", "small")
-    })
+const capHeightToMinHeight = css.createVar("capHeightToMinHeight");
+const paddingVarForBreakpoint = (size, breakpoint) => ({
+  vars: {
+    [capHeightToMinHeight]: cssUtils.calc(minHeightValueForSize[size]).subtract(styles_lib_themes_vars_css_cjs.vars.textSize[size][breakpoint].capHeight).divide(2).toString()
   }
+});
+const standard = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: paddingVarForBreakpoint("standard", "mobile"),
+  tablet: paddingVarForBreakpoint("standard", "tablet")
+}), "standard");
+const small = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: paddingVarForBreakpoint("small", "mobile"),
+  tablet: paddingVarForBreakpoint("small", "tablet")
+}), "small");
+const bleedVerticallyToCapHeight = css.style({
+  marginTop: cssUtils.calc.negate(capHeightToMinHeight),
+  marginBottom: cssUtils.calc.negate(capHeightToMinHeight)
 }, "bleedVerticallyToCapHeight");
+const padToMinHeight = css.style({
+  paddingTop: capHeightToMinHeight,
+  paddingBottom: capHeightToMinHeight
+}, "padToMinHeight");
 const dot1 = css.keyframes({
   "14%": {
     opacity: 0
@@ -134,13 +135,13 @@ const invertedBackgroundsDarkMode = css.styleVariants({
 fileScope.endFileScope();
 exports.activeOverlay = activeOverlay;
 exports.bleedVerticallyToCapHeight = bleedVerticallyToCapHeight;
-exports.constants = constants;
 exports.focusOverlay = focusOverlay;
 exports.forceActive = forceActive;
 exports.hoverOverlay = hoverOverlay;
 exports.invertedBackgroundsDarkMode = invertedBackgroundsDarkMode;
 exports.invertedBackgroundsLightMode = invertedBackgroundsLightMode;
 exports.loadingDot = loadingDot;
+exports.padToMinHeight = padToMinHeight;
 exports.root = root;
 exports.small = small;
 exports.standard = standard;

package/dist/styles/lib/components/Button/Button.css.mjs

@@ -1,14 +1,11 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style, keyframes, styleVariants } from "@vanilla-extract/css";
+import { style, createVar, keyframes, styleVariants } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { rgba } from "polished";
 import { colorModeStyle } from "../../css/colorModeStyle.mjs";
 import { responsiveStyle } from "../../css/responsiveStyle.mjs";
 import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/Button/Button.css.ts?used", "braid-design-system");
-const constants = {
-  smallButtonPaddingSize: "xsmall"
-};
 const root = style({
   textDecoration: "none"
 }, "root");
@@ -34,28 +31,32 @@ const focusOverlay = style({
     }
   }
 }, "focusOverlay");
-const standard = style({}, "standard");
-const small = style({}, "small");
-const stylesForBreakpoint = (breakpoint, size) => {
-  const height = size === "small" ? calc.add(calc.multiply(vars.space[constants.smallButtonPaddingSize], 2), vars.textSize.small[breakpoint].lineHeight) : vars.touchableSize;
-  const value = calc(height).subtract(vars.textSize[size][breakpoint].capHeight).divide(2).negate().toString();
-  return {
-    marginTop: value,
-    marginBottom: value
-  };
+const minHeightValueForSize = {
+  standard: vars.touchableSize,
+  small: calc.multiply(vars.touchableSize, 0.8)
 };
-const bleedVerticallyToCapHeight = style({
-  selectors: {
-    [`${standard}&`]: responsiveStyle({
-      mobile: stylesForBreakpoint("mobile", "standard"),
-      tablet: stylesForBreakpoint("tablet", "standard")
-    }),
-    [`${small}&`]: responsiveStyle({
-      mobile: stylesForBreakpoint("mobile", "small"),
-      tablet: stylesForBreakpoint("tablet", "small")
-    })
+const capHeightToMinHeight = createVar("capHeightToMinHeight");
+const paddingVarForBreakpoint = (size, breakpoint) => ({
+  vars: {
+    [capHeightToMinHeight]: calc(minHeightValueForSize[size]).subtract(vars.textSize[size][breakpoint].capHeight).divide(2).toString()
   }
+});
+const standard = style(responsiveStyle({
+  mobile: paddingVarForBreakpoint("standard", "mobile"),
+  tablet: paddingVarForBreakpoint("standard", "tablet")
+}), "standard");
+const small = style(responsiveStyle({
+  mobile: paddingVarForBreakpoint("small", "mobile"),
+  tablet: paddingVarForBreakpoint("small", "tablet")
+}), "small");
+const bleedVerticallyToCapHeight = style({
+  marginTop: calc.negate(capHeightToMinHeight),
+  marginBottom: calc.negate(capHeightToMinHeight)
 }, "bleedVerticallyToCapHeight");
+const padToMinHeight = style({
+  paddingTop: capHeightToMinHeight,
+  paddingBottom: capHeightToMinHeight
+}, "padToMinHeight");
 const dot1 = keyframes({
   "14%": {
     opacity: 0
@@ -134,13 +135,13 @@ endFileScope();
 export {
   activeOverlay,
   bleedVerticallyToCapHeight,
-  constants,
   focusOverlay,
   forceActive,
   hoverOverlay,
   invertedBackgroundsDarkMode,
   invertedBackgroundsLightMode,
   loadingDot,
+  padToMinHeight,
   root,
   small,
   standard

package/dist/styles/lib/components/TooltipRenderer/TooltipRenderer.css.cjs

@@ -25,10 +25,7 @@ const verticalOffsetBeforeEntrance = css.style({
 const translateZ0 = css.style({
   transform: "translateZ(0)"
 }, "translateZ0");
-const padding = css.style({
-  padding: cssUtils.calc.add(styles_lib_themes_vars_css_cjs.vars.space.small, styles_lib_themes_vars_css_cjs.vars.grid)
-}, "padding");
-const borderRadius = styles_lib_themes_vars_css_cjs.vars.borderRadius.standard;
+const borderRadius = styles_lib_themes_vars_css_cjs.vars.borderRadius.small;
 const offset = cssUtils.calc(constants.arrowSize).divide(2).negate().toString();
 const arrow = css.style({
   visibility: "hidden",
@@ -63,6 +60,5 @@ fileScope.endFileScope();
 exports.arrow = arrow;
 exports.background = background;
 exports.maxWidth = maxWidth;
-exports.padding = padding;
 exports.translateZ0 = translateZ0;
 exports.verticalOffsetBeforeEntrance = verticalOffsetBeforeEntrance;

package/dist/styles/lib/components/TooltipRenderer/TooltipRenderer.css.mjs

@@ -24,10 +24,7 @@ const verticalOffsetBeforeEntrance = style({
 const translateZ0 = style({
   transform: "translateZ(0)"
 }, "translateZ0");
-const padding = style({
-  padding: calc.add(vars.space.small, vars.grid)
-}, "padding");
-const borderRadius = vars.borderRadius.standard;
+const borderRadius = vars.borderRadius.small;
 const offset = calc(constants.arrowSize).divide(2).negate().toString();
 const arrow = style({
   visibility: "hidden",
@@ -63,7 +60,6 @@ export {
   arrow,
   background,
   maxWidth,
-  padding,
   translateZ0,
   verticalOffsetBeforeEntrance
 };

package/dist/styles/lib/components/private/Keyline/Keyline.css.cjs

@@ -58,9 +58,13 @@ const noRadiusOnRight = css.style({
 const largestWidth = css.style({
   width: styles_lib_themes_vars_css_cjs.vars.borderRadius.xlarge
 }, "largestWidth");
+const width = css.style({
+  width: styles_lib_themes_vars_css_cjs.vars.grid
+}, "width");
 fileScope.endFileScope();
 exports.darkMode = darkMode;
 exports.largestWidth = largestWidth;
 exports.lightMode = lightMode;
 exports.noRadiusOnRight = noRadiusOnRight;
 exports.tone = tone;
+exports.width = width;

package/dist/styles/lib/components/private/Keyline/Keyline.css.mjs

@@ -57,11 +57,15 @@ const noRadiusOnRight = style({
 const largestWidth = style({
   width: vars.borderRadius.xlarge
 }, "largestWidth");
+const width = style({
+  width: vars.grid
+}, "width");
 endFileScope();
 export {
   darkMode,
   largestWidth,
   lightMode,
   noRadiusOnRight,
-  tone
+  tone,
+  width
 };

package/dist/styles/lib/css/negativeMargin/negativeMargin.css.cjs

@@ -54,13 +54,8 @@ const right = {
   wide: stylesForBreakpoint("wide", "marginRight")
 };
 fileScope.endFileScope();
-const styles = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  bottom,
-  left,
-  preventCollapsePseudo,
-  right,
-  top
-}, Symbol.toStringTag, { value: "Module" }));
+exports.bottom = bottom;
+exports.left = left;
 exports.preventCollapsePseudo = preventCollapsePseudo;
-exports.styles = styles;
+exports.right = right;
+exports.top = top;

package/dist/styles/lib/css/negativeMargin/negativeMargin.css.mjs

@@ -53,15 +53,10 @@ const right = {
   wide: stylesForBreakpoint("wide", "marginRight")
 };
 endFileScope();
-const styles = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
+export {
   bottom,
   left,
   preventCollapsePseudo,
   right,
   top
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  preventCollapsePseudo,
-  styles
 };

package/dist/styles/lib/css/typography.css.cjs

@@ -158,21 +158,6 @@ const touchableText = css.styleVariants(styles_lib_themes_vars_css_cjs.vars.text
   tablet: makeTouchableSpacing(styles_lib_themes_vars_css_cjs.vars.touchableSize, textDefinition.tablet.lineHeight)
 }), "touchableText");
 fileScope.endFileScope();
-const styles = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  darkModeNeutralOverride,
-  darkModeTone,
-  fontFamily,
-  fontWeight,
-  heading,
-  headingWeight,
-  lightModeNeutralOverride,
-  lightModeTone,
-  textSizeTrimmed,
-  textSizeUntrimmed,
-  tone,
-  touchableText
-}, Symbol.toStringTag, { value: "Module" }));
 exports.darkModeNeutralOverride = darkModeNeutralOverride;
 exports.darkModeTone = darkModeTone;
 exports.fontFamily = fontFamily;
@@ -181,7 +166,7 @@ exports.heading = heading;
 exports.headingWeight = headingWeight;
 exports.lightModeNeutralOverride = lightModeNeutralOverride;
 exports.lightModeTone = lightModeTone;
-exports.styles = styles;
+exports.textSizeTrimmed = textSizeTrimmed;
 exports.textSizeUntrimmed = textSizeUntrimmed;
 exports.tone = tone;
 exports.touchableText = touchableText;

package/dist/styles/lib/css/typography.css.mjs

@@ -157,21 +157,6 @@ const touchableText = styleVariants(vars.textSize, (textDefinition) => responsiv
   tablet: makeTouchableSpacing(vars.touchableSize, textDefinition.tablet.lineHeight)
 }), "touchableText");
 endFileScope();
-const styles = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  darkModeNeutralOverride,
-  darkModeTone,
-  fontFamily,
-  fontWeight,
-  heading,
-  headingWeight,
-  lightModeNeutralOverride,
-  lightModeTone,
-  textSizeTrimmed,
-  textSizeUntrimmed,
-  tone,
-  touchableText
-}, Symbol.toStringTag, { value: "Module" }));
 export {
   darkModeNeutralOverride,
   darkModeTone,
@@ -181,7 +166,7 @@ export {
   headingWeight,
   lightModeNeutralOverride,
   lightModeTone,
-  styles,
+  textSizeTrimmed,
   textSizeUntrimmed,
   tone,
   touchableText

package/dist/styles/lib/themes/docs/tokens.cjs

@@ -1,6 +1,10 @@
 "use strict";
+const appleSystemMetrics = require("@capsizecss/metrics/appleSystem.js");
 const polished = require("polished");
 const sideEffects_lib_themes_baseTokens_apac_cjs = require("../../../../side-effects/lib/themes/baseTokens/apac.cjs");
+const sideEffects_lib_themes_tokenType_cjs = require("../../../../side-effects/lib/themes/tokenType.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const appleSystemMetrics__default = /* @__PURE__ */ _interopDefaultCompat(appleSystemMetrics);
 const brandAccent = sideEffects_lib_themes_baseTokens_apac_cjs.palette.grey["900"];
 const formAccent = sideEffects_lib_themes_baseTokens_apac_cjs.palette.indigo["600"];
 const focus = polished.rgba("#1e90ff", 0.7);
@@ -15,13 +19,7 @@ const tokens = {
   typography: {
     fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     webFont: null,
-    fontMetrics: {
-      capHeight: 1443,
-      ascent: 1950,
-      descent: -494,
-      lineGap: 0,
-      unitsPerEm: 2048
-    },
+    fontMetrics: sideEffects_lib_themes_tokenType_cjs.extractFontMetricsForTheme(appleSystemMetrics__default.default),
     fontWeight: {
       regular: 400,
       medium: 500,
@@ -134,7 +132,8 @@ const tokens = {
     medium: 5,
     large: 8,
     xlarge: 11,
-    xxlarge: 15
+    xxlarge: 15,
+    xxxlarge: 20
   },
   transforms: {
     touchable: "scale(0.97)"
@@ -145,6 +144,7 @@ const tokens = {
   },
   border: {
     radius: {
+      small: "4px",
       standard: "6px",
       large: "8px",
       xlarge: "12px"

package/dist/styles/lib/themes/docs/tokens.mjs

@@ -1,5 +1,7 @@
+import appleSystemMetrics from "@capsizecss/metrics/appleSystem.js";
 import { rgba, darken, lighten } from "polished";
 import { palette } from "../../../../side-effects/lib/themes/baseTokens/apac.mjs";
+import { extractFontMetricsForTheme } from "../../../../side-effects/lib/themes/tokenType.mjs";
 const brandAccent = palette.grey["900"];
 const formAccent = palette.indigo["600"];
 const focus = rgba("#1e90ff", 0.7);
@@ -14,13 +16,7 @@ const tokens = {
   typography: {
     fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     webFont: null,
-    fontMetrics: {
-      capHeight: 1443,
-      ascent: 1950,
-      descent: -494,
-      lineGap: 0,
-      unitsPerEm: 2048
-    },
+    fontMetrics: extractFontMetricsForTheme(appleSystemMetrics),
     fontWeight: {
       regular: 400,
       medium: 500,
@@ -133,7 +129,8 @@ const tokens = {
     medium: 5,
     large: 8,
     xlarge: 11,
-    xxlarge: 15
+    xxlarge: 15,
+    xxxlarge: 20
   },
   transforms: {
     touchable: "scale(0.97)"
@@ -144,6 +141,7 @@ const tokens = {
   },
   border: {
     radius: {
+      small: "4px",
       standard: "6px",
       large: "8px",
       xlarge: "12px"

package/dist/styles/lib/themes/makeVanillaTheme.cjs

@@ -15,13 +15,26 @@ const fontSizeToCapHeight = (grid, definition, fontMetrics) => {
     fontSize: tablet.fontSize,
     fontMetrics
   });
+  const mobileConfig = "lineGap" in mobile ? {
+    fontSize: mobile.fontSize,
+    lineGap: mobile.lineGap
+  } : {
+    fontSize: mobile.fontSize,
+    leading: mobile.rows * grid
+  };
+  const tabletConfig = "lineGap" in tablet ? {
+    fontSize: tablet.fontSize,
+    lineGap: tablet.lineGap
+  } : {
+    fontSize: tablet.fontSize,
+    leading: tablet.rows * grid
+  };
   const {
     fontSize: mobileFontSize,
     lineHeight: mobileLineHeight,
     ...mobileTrims
   } = vanillaExtract.precomputeValues({
-    fontSize: mobile.fontSize,
-    leading: mobile.rows * grid,
+    ...mobileConfig,
     fontMetrics
   });
   const {
@@ -29,8 +42,7 @@ const fontSizeToCapHeight = (grid, definition, fontMetrics) => {
     lineHeight: tabletLineHeight,
     ...tabletTrims
   } = vanillaExtract.precomputeValues({
-    fontSize: tablet.fontSize,
-    leading: tablet.rows * grid,
+    ...tabletConfig,
     fontMetrics
   });
   return {
@@ -56,8 +68,12 @@ const makeVanillaTheme = (braidTokens) => {
   const { name, displayName, ...tokens } = braidTokens;
   const { webFont, ...typography } = tokens.typography;
   const { foreground, background } = tokens.color;
+  const textSize = mapValues__default.default(
+    tokens.typography.text,
+    (definition) => fontSizeToCapHeight(tokens.grid, definition, typography.fontMetrics)
+  );
   const getInlineFieldSize = (size) => {
-    const scale = typography.text[size].mobile.rows * tokens.grid / 42;
+    const scale = parseInt(textSize[size].mobile.lineHeight, 10) / 42;
     return px(tokens.grid * Math.round(tokens.touchableSize * scale));
   };
   const resolvedTokens = {
@@ -73,10 +89,7 @@ const makeVanillaTheme = (braidTokens) => {
     backgroundColor: background,
     fontFamily: typography.fontFamily,
     fontMetrics: mapValues__default.default(typography.fontMetrics, String),
-    textSize: mapValues__default.default(
-      tokens.typography.text,
-      (definition) => fontSizeToCapHeight(tokens.grid, definition, typography.fontMetrics)
-    ),
+    textSize,
     textWeight: mapValues__default.default(typography.fontWeight, String),
     headingLevel: mapValues__default.default(
       tokens.typography.heading.level,

package/dist/styles/lib/themes/makeVanillaTheme.mjs

@@ -12,13 +12,26 @@ const fontSizeToCapHeight = (grid, definition, fontMetrics) => {
     fontSize: tablet.fontSize,
     fontMetrics
   });
+  const mobileConfig = "lineGap" in mobile ? {
+    fontSize: mobile.fontSize,
+    lineGap: mobile.lineGap
+  } : {
+    fontSize: mobile.fontSize,
+    leading: mobile.rows * grid
+  };
+  const tabletConfig = "lineGap" in tablet ? {
+    fontSize: tablet.fontSize,
+    lineGap: tablet.lineGap
+  } : {
+    fontSize: tablet.fontSize,
+    leading: tablet.rows * grid
+  };
   const {
     fontSize: mobileFontSize,
     lineHeight: mobileLineHeight,
     ...mobileTrims
   } = precomputeValues({
-    fontSize: mobile.fontSize,
-    leading: mobile.rows * grid,
+    ...mobileConfig,
     fontMetrics
   });
   const {
@@ -26,8 +39,7 @@ const fontSizeToCapHeight = (grid, definition, fontMetrics) => {
     lineHeight: tabletLineHeight,
     ...tabletTrims
   } = precomputeValues({
-    fontSize: tablet.fontSize,
-    leading: tablet.rows * grid,
+    ...tabletConfig,
     fontMetrics
   });
   return {
@@ -53,8 +65,12 @@ const makeVanillaTheme = (braidTokens) => {
   const { name, displayName, ...tokens } = braidTokens;
   const { webFont, ...typography } = tokens.typography;
   const { foreground, background } = tokens.color;
+  const textSize = mapValues(
+    tokens.typography.text,
+    (definition) => fontSizeToCapHeight(tokens.grid, definition, typography.fontMetrics)
+  );
   const getInlineFieldSize = (size) => {
-    const scale = typography.text[size].mobile.rows * tokens.grid / 42;
+    const scale = parseInt(textSize[size].mobile.lineHeight, 10) / 42;
     return px(tokens.grid * Math.round(tokens.touchableSize * scale));
   };
   const resolvedTokens = {
@@ -70,10 +86,7 @@ const makeVanillaTheme = (braidTokens) => {
     backgroundColor: background,
     fontFamily: typography.fontFamily,
     fontMetrics: mapValues(typography.fontMetrics, String),
-    textSize: mapValues(
-      tokens.typography.text,
-      (definition) => fontSizeToCapHeight(tokens.grid, definition, typography.fontMetrics)
-    ),
+    textSize,
     textWeight: mapValues(typography.fontWeight, String),
     headingLevel: mapValues(
       tokens.typography.heading.level,