react-native-terra-ui 0.12.0 → 0.13.0

package/src/components/badge/utils.ts

@@ -24,6 +24,15 @@ export function hasLabel(label: string | number | undefined): label is string |
   return label !== undefined && label !== "";
 }
 
+/**
+ * `true` when the label is one character, which the badge draws as a circle
+ * instead of a pill. Counts code points so a single emoji or astral character
+ * still counts as one.
+ */
+export function isSingleCharacter(label: string | number): boolean {
+  return Array.from(String(label)).length === 1;
+}
+
 /**
  * Outer diameter of the dot per size. The badge's own stylesheet repeats
  * these as literals — the unistyles Babel plugin reads that object statically,
@@ -31,9 +40,9 @@ export function hasLabel(label: string | number | undefined): label is string |
  * test suite is what keeps the two in step.
  */
 export const DOT_SIZE: Record<BadgeSize, number> = {
-  sm: 12,
-  md: 16,
-  lg: 20,
+  sm: 10,
+  md: 12,
+  lg: 14,
 };
 
 export interface AnchorPosition {

package/src/components/chip/Chip.tsx

@@ -293,6 +293,7 @@ const styles = StyleSheet.create((theme) => {
     // safe here even though they would resolve correctly under test.
     label: {
       paddingHorizontal: 2,
+      includeFontPadding: false,
       fontFamily: isSystemLabelFont ? undefined : labelFont,
       fontWeight: isSystemLabelFont ? FONT_WEIGHT_VALUE.semibold : undefined,
       variants: {

package/src/components/header/parts/HeaderBar.tsx

@@ -5,7 +5,7 @@ import Animated from "react-native-reanimated";
 import { ScrollToTopGuard } from "react-native-screens/experimental";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { FONT_WEIGHT_VALUE } from "#utils/typography";
+import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
 import { resolveScreenPadding } from "../../../theme/screen-padding";
 import { Toolbar } from "../../toolbar";
 import { HeaderDismissButton, type HeaderDismissProps } from "../header-buttons";
@@ -112,79 +112,89 @@ export function HeaderBar({
   );
 }
 
-const styles = StyleSheet.create((theme, runtime) => ({
-  windowInsets: (left: number, right: number) => ({
-    paddingLeft: Math.max(resolveScreenPadding(theme, runtime.breakpoint).x, left),
-    paddingRight: Math.max(resolveScreenPadding(theme, runtime.breakpoint).x, right),
-  }),
-  // A centered title spans the region between the window controls and is inset
-  // by the same amount from both of its edges, so it stays centered in that
-  // region. The inset is whichever side reaches further in — bar padding plus
-  // that side's toolbar — so a long title truncates before either toolbar
-  // instead of running underneath it. A left-aligned title is in the flex row
-  // already and needs none of this.
-  titleInsets: (
-    left: number,
-    right: number,
-    leadingWidth: number,
-    trailingWidth: number,
-    alignment: "center" | "left"
-  ) => {
-    if (alignment !== "center") return {};
-    const padding = resolveScreenPadding(theme, runtime.breakpoint).x;
-    const gap = theme.spacing["3"];
-    const reachLeft = Math.max(padding, left) + (leadingWidth > 0 ? leadingWidth + gap : 0) - left;
-    const reachRight = Math.max(padding, right) + (trailingWidth > 0 ? trailingWidth + gap : 0) - right;
-    const inset = Math.max(reachLeft, reachRight);
-    return { left: left + inset, right: right + inset };
-  },
-  bar: {
-    height: theme.layout.header.height,
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: theme.layout.screen.padding.x,
-    gap: theme.spacing["3"],
-    justifyContent: "space-between",
-  },
-  // A centered title is absolutely positioned, so it leaves the flex row. With
-  // no leading slot the trailing toolbar would be the only in-flow child and
-  // `space-between` would park it on the left — the auto margin pins it right.
-  trailing: {
-    justifyContent: "flex-end",
-    variants: {
-      titleAlignment: {
-        center: { marginLeft: "auto" },
-        left: {},
-      },
+const styles = StyleSheet.create((theme, runtime) => {
+  // Resolved inline: the unistyles Babel plugin rewrites this factory, so an
+  // imported helper called from inside it is not in scope at runtime.
+  const titleWeight = theme.typography.variants["title-md"].fontWeight;
+  const titleFont = theme.typography.fonts[titleWeight];
+  const isSystemTitleFont = titleFont === SYSTEM_FONT;
+
+  return {
+    windowInsets: (left: number, right: number) => ({
+      paddingLeft: Math.max(resolveScreenPadding(theme, runtime.breakpoint).x, left),
+      paddingRight: Math.max(resolveScreenPadding(theme, runtime.breakpoint).x, right),
+    }),
+    // A centered title spans the region between the window controls and is inset
+    // by the same amount from both of its edges, so it stays centered in that
+    // region. The inset is whichever side reaches further in — bar padding plus
+    // that side's toolbar — so a long title truncates before either toolbar
+    // instead of running underneath it. A left-aligned title is in the flex row
+    // already and needs none of this.
+    titleInsets: (
+      left: number,
+      right: number,
+      leadingWidth: number,
+      trailingWidth: number,
+      alignment: "center" | "left"
+    ) => {
+      if (alignment !== "center") return {};
+      const padding = resolveScreenPadding(theme, runtime.breakpoint).x;
+      const gap = theme.spacing["3"];
+      const reachLeft = Math.max(padding, left) + (leadingWidth > 0 ? leadingWidth + gap : 0) - left;
+      const reachRight = Math.max(padding, right) + (trailingWidth > 0 ? trailingWidth + gap : 0) - right;
+      const inset = Math.max(reachLeft, reachRight);
+      return { left: left + inset, right: right + inset };
+    },
+    bar: {
+      height: theme.layout.header.height,
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: theme.layout.screen.padding.x,
+      gap: theme.spacing["3"],
+      justifyContent: "space-between",
     },
-  },
-  titleContainer: {
-    variants: {
-      titleAlignment: {
-        center: {
-          position: "absolute",
-          left: 0,
-          right: 0,
-          alignItems: "center",
+    // A centered title is absolutely positioned, so it leaves the flex row. With
+    // no leading slot the trailing toolbar would be the only in-flow child and
+    // `space-between` would park it on the left — the auto margin pins it right.
+    trailing: {
+      justifyContent: "flex-end",
+      variants: {
+        titleAlignment: {
+          center: { marginLeft: "auto" },
+          left: {},
         },
-        left: {
-          flex: 1,
-          alignItems: "flex-start",
+      },
+    },
+    titleContainer: {
+      variants: {
+        titleAlignment: {
+          center: {
+            position: "absolute",
+            left: 0,
+            right: 0,
+            alignItems: "center",
+          },
+          left: {
+            flex: 1,
+            alignItems: "flex-start",
+          },
         },
       },
     },
-  },
-  title: {
-    fontSize: theme.typography.variants["title-md"].fontSize,
-    lineHeight: theme.typography.variants["title-md"].lineHeight,
-    letterSpacing: theme.typography.variants["title-md"].letterSpacing,
-    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["title-md"].fontWeight],
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.primary"] ?? "",
-    variants: {
-      titleAlignment: {
-        center: { textAlign: "center" },
-        left: { textAlign: "left" },
+    title: {
+      fontSize: theme.typography.variants["title-md"].fontSize,
+      lineHeight: theme.typography.variants["title-md"].lineHeight,
+      letterSpacing: theme.typography.variants["title-md"].letterSpacing,
+      fontFamily: isSystemTitleFont ? undefined : titleFont,
+      fontWeight: isSystemTitleFont ? FONT_WEIGHT_VALUE[titleWeight] : undefined,
+      includeFontPadding: false,
+      color: (theme.color as unknown as Record<string, string | undefined>)["text.primary"] ?? "",
+      variants: {
+        titleAlignment: {
+          center: { textAlign: "center" },
+          left: { textAlign: "left" },
+        },
       },
     },
-  },
-}));
+  };
+});

package/src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.tsx

@@ -4,7 +4,7 @@ import { type LayoutChangeEvent, Text } from "react-native";
 import Animated from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { FONT_WEIGHT_VALUE } from "#utils/typography";
+import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
 import { isTextTitle } from "../../../utils";
 import type { LargeTitleHeaderProps } from "..";
 
@@ -58,31 +58,49 @@ export function LargeTitleContent({
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
-  portalContent: (hasAccessoryBelow: boolean) => ({
-    gap: theme.spacing["1"] / 2,
-    // Include the gap in the measured height used to position the accessory.
-    paddingBottom: hasAccessoryBelow ? theme.spacing["2"] : 0,
-    paddingHorizontal: theme.layout.screen.padding.x,
-  }),
-  overline: {
-    fontSize: theme.typography.variants["label-sm"].fontSize,
-    lineHeight: theme.typography.variants["label-sm"].lineHeight,
-    letterSpacing: theme.typography.variants["label-sm"].letterSpacing,
-    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["label-sm"].fontWeight],
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
-  },
-  largeTitle: {
-    fontSize: theme.typography.variants["headline-lg"].fontSize,
-    lineHeight: theme.typography.variants["headline-lg"].lineHeight,
-    letterSpacing: theme.typography.variants["headline-lg"].letterSpacing,
-    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["headline-lg"].fontWeight],
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.primary"] ?? "",
-  },
-  subtitle: {
-    fontSize: theme.typography.variants["body-lg"].fontSize,
-    lineHeight: theme.typography.variants["body-lg"].lineHeight,
-    letterSpacing: theme.typography.variants["body-lg"].letterSpacing,
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
-  },
-}));
+const styles = StyleSheet.create((theme) => {
+  // Resolved inline: the unistyles Babel plugin rewrites this factory, so an
+  // imported helper called from inside it is not in scope at runtime.
+  const overlineWeight = theme.typography.variants["label-sm"].fontWeight;
+  const overlineFont = theme.typography.fonts[overlineWeight];
+  const isSystemOverlineFont = overlineFont === SYSTEM_FONT;
+  const titleWeight = theme.typography.variants["headline-lg"].fontWeight;
+  const titleFont = theme.typography.fonts[titleWeight];
+  const isSystemTitleFont = titleFont === SYSTEM_FONT;
+  const subtitleWeight = theme.typography.variants["body-lg"].fontWeight;
+  const subtitleFont = theme.typography.fonts[subtitleWeight];
+  const isSystemSubtitleFont = subtitleFont === SYSTEM_FONT;
+
+  return {
+    portalContent: (hasAccessoryBelow: boolean) => ({
+      gap: theme.spacing["1"] / 2,
+      // Include the gap in the measured height used to position the accessory.
+      paddingBottom: hasAccessoryBelow ? theme.spacing["2"] : 0,
+      paddingHorizontal: theme.layout.screen.padding.x,
+    }),
+    overline: {
+      fontSize: theme.typography.variants["label-sm"].fontSize,
+      lineHeight: theme.typography.variants["label-sm"].lineHeight,
+      letterSpacing: theme.typography.variants["label-sm"].letterSpacing,
+      fontFamily: isSystemOverlineFont ? undefined : overlineFont,
+      fontWeight: isSystemOverlineFont ? FONT_WEIGHT_VALUE[overlineWeight] : undefined,
+      color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
+    },
+    largeTitle: {
+      fontSize: theme.typography.variants["headline-lg"].fontSize,
+      lineHeight: theme.typography.variants["headline-lg"].lineHeight,
+      letterSpacing: theme.typography.variants["headline-lg"].letterSpacing,
+      fontFamily: isSystemTitleFont ? undefined : titleFont,
+      fontWeight: isSystemTitleFont ? FONT_WEIGHT_VALUE[titleWeight] : undefined,
+      color: (theme.color as unknown as Record<string, string | undefined>)["text.primary"] ?? "",
+    },
+    subtitle: {
+      fontSize: theme.typography.variants["body-lg"].fontSize,
+      lineHeight: theme.typography.variants["body-lg"].lineHeight,
+      letterSpacing: theme.typography.variants["body-lg"].letterSpacing,
+      fontFamily: isSystemSubtitleFont ? undefined : subtitleFont,
+      fontWeight: isSystemSubtitleFont ? FONT_WEIGHT_VALUE[subtitleWeight] : undefined,
+      color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
+    },
+  };
+});

package/src/components/input/parts/InputField.tsx

@@ -5,7 +5,7 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
 import type { ColorToken, RadiusKey } from "#theme/types";
 import { resolveThemeColor } from "#utils/resolve-theme-color";
-import { FONT_WEIGHT_VALUE } from "#utils/typography";
+import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
 import type { InputBaseProps, InputSize } from "../types";
 
 /** Typographic role of the text, per size. */
@@ -68,6 +68,9 @@ export const InputField = forwardRef<ComponentRef<typeof TextInput>, InputBasePr
         editable={!isDisabled}
         placeholderTextColor={theme.color["text.tertiary"]}
         style={styles.input}
+        // The container height is fixed per size, so scaling stops where the
+        // body role does rather than growing past the box.
+        maxFontSizeMultiplier={theme.typography.variants[TEXT_VARIANT[size]].maxFontSizeMultiplier}
         onFocus={handleFocus}
         onBlur={handleBlur}
         {...rest}
@@ -77,62 +80,67 @@ export const InputField = forwardRef<ComponentRef<typeof TextInput>, InputBasePr
   );
 });
 
-const styles = StyleSheet.create((theme) => ({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: theme.color["border.subtle"],
-    variants: {
-      size: {
-        sm: { height: 36, paddingHorizontal: theme.spacing["4"], gap: 6 },
-        md: { height: 44, paddingHorizontal: theme.spacing["4"], gap: 6 },
-        lg: { height: 52, paddingHorizontal: theme.spacing["4"], gap: 6 },
-      },
-      focused: {
-        true: { borderColor: theme.color["accent.border"] },
-        false: {},
-      },
-      invalid: {
-        true: { borderColor: theme.color["danger.text"] },
-        false: {},
-      },
-      disabled: {
-        true: { opacity: theme.opacity.disabled },
-        false: {},
-      },
-    },
-  },
-  // `background` is an open `ColorToken` and `radius` an eight-step scale, so
-  // both resolve in a dynamic function rather than enumerating as variants.
-  fill: (background: ColorToken, radius: RadiusKey) => ({
-    backgroundColor: resolveThemeColor(background, theme),
-    borderRadius: theme.radius[radius],
-  }),
-  input: {
-    flex: 1,
-    // Android centres text in a taller box by default; zeroing the padding lets
-    // the container's own height own the geometry on both platforms.
-    paddingVertical: 0,
-    color: theme.color["text.primary"],
-    variants: {
-      size: {
-        sm: {
-          fontSize: theme.typography.variants[TEXT_VARIANT.sm].fontSize,
-          fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants[TEXT_VARIANT.sm].fontWeight],
+const styles = StyleSheet.create((theme) => {
+  // Resolved inline rather than through a helper: the unistyles Babel plugin
+  // rewrites this factory, and an imported function called from inside it is
+  // not in scope at runtime. Every body role shares one weight, so one lookup
+  // covers all three sizes.
+  const bodyWeight = theme.typography.variants[TEXT_VARIANT.md].fontWeight;
+  const bodyFont = theme.typography.fonts[bodyWeight];
+  const isSystemBodyFont = bodyFont === SYSTEM_FONT;
+
+  return {
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.color["border.subtle"],
+      variants: {
+        size: {
+          sm: { height: 36, paddingHorizontal: theme.spacing["4"], gap: 6 },
+          md: { height: 44, paddingHorizontal: theme.spacing["4"], gap: 6 },
+          lg: { height: 52, paddingHorizontal: theme.spacing["4"], gap: 6 },
         },
-        md: {
-          fontSize: theme.typography.variants[TEXT_VARIANT.md].fontSize,
-          fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants[TEXT_VARIANT.md].fontWeight],
+        focused: {
+          true: { borderColor: theme.color["accent.border"] },
+          false: {},
         },
-        lg: {
-          fontSize: theme.typography.variants[TEXT_VARIANT.lg].fontSize,
-          fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants[TEXT_VARIANT.lg].fontWeight],
+        invalid: {
+          true: { borderColor: theme.color["danger.text"] },
+          false: {},
+        },
+        disabled: {
+          true: { opacity: theme.opacity.disabled },
+          false: {},
         },
       },
-      focused: { true: {}, false: {} },
-      invalid: { true: {}, false: {} },
-      disabled: { true: {}, false: {} },
     },
-  },
-}));
+    // `background` is an open `ColorToken` and `radius` an eight-step scale, so
+    // both resolve in a dynamic function rather than enumerating as variants.
+    fill: (background: ColorToken, radius: RadiusKey) => ({
+      backgroundColor: resolveThemeColor(background, theme),
+      borderRadius: theme.radius[radius],
+    }),
+    input: {
+      flex: 1,
+      // Android centres text in a taller box by default; zeroing the padding lets
+      // the container's own height own the geometry on both platforms.
+      paddingVertical: 0,
+      color: theme.color["text.primary"],
+      // Custom fonts encode weight in the family name; the system font takes a
+      // numeric weight instead.
+      fontFamily: isSystemBodyFont ? undefined : bodyFont,
+      fontWeight: isSystemBodyFont ? FONT_WEIGHT_VALUE[bodyWeight] : undefined,
+      variants: {
+        size: {
+          sm: { fontSize: theme.typography.variants[TEXT_VARIANT.sm].fontSize },
+          md: { fontSize: theme.typography.variants[TEXT_VARIANT.md].fontSize },
+          lg: { fontSize: theme.typography.variants[TEXT_VARIANT.lg].fontSize },
+        },
+        focused: { true: {}, false: {} },
+        invalid: { true: {}, false: {} },
+        disabled: { true: {}, false: {} },
+      },
+    },
+  };
+});

package/src/components/text/Text.tsx

@@ -19,10 +19,10 @@ export type TextAlign = "left" | "center" | "right" | "justify";
 const HEADING_VARIANT_ALIAS: Record<HeadingTextVariant, RoleTextVariant> = {
   h1: "headline-lg",
   h2: "headline-md",
-  h3: "title-lg",
-  h4: "title-md",
-  h5: "title-sm",
-  h6: "label-lg",
+  h3: "headline-sm",
+  h4: "title-lg",
+  h5: "title-md",
+  h6: "title-sm",
 };
 
 function resolveTextVariant(variant: TextVariant): RoleTextVariant {
@@ -116,11 +116,15 @@ export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(function
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 //
-// Text has no static style of its own — this stylesheet exists so the
+// Besides the Android font-padding reset, this stylesheet exists so the
 // Unistyles Babel plugin swaps the `RNText` imported above for its Unistyles-aware
 // counterpart, which registers the ShadowNode with the native side. That is what
 // keeps a Unistyles style passed in through `style` updating on theme change;
 // without it the style freezes at whichever theme was active when it was
 // created, and only callers that happen to subscribe to the theme themselves
 // would appear to work.
-const styles = StyleSheet.create(() => ({ root: {} }));
+const styles = StyleSheet.create(() => ({
+  // Android pads glyphs with the font's ascender/descender by default, which
+  // drops text below centre inside fixed-height controls. iOS never adds it.
+  root: { includeFontPadding: false },
+}));

package/src/theme/tokens/dark.ts

@@ -80,8 +80,8 @@ export const dark = {
   // Danger
   "color.danger.text": "{palette.red.400}",
 
-  "color.danger.solid.bg": "{palette.red.400}",
-  "color.danger.solid.fg": "{palette.slate.950}",
+  "color.danger.solid.bg": "#dc0010",
+  "color.danger.solid.fg": "{palette.white}",
   "color.danger.solid.border": "{palette.red.800}",
 
   "color.danger.soft.bg": "{palette.red.950}",

package/src/theme/tokens/light.ts

@@ -79,8 +79,8 @@ export const light = {
   // Danger
   "color.danger.text": "{palette.rose.700}",
 
-  "color.danger.solid.bg": "{palette.red.400}",
-  "color.danger.solid.fg": "{palette.slate.950}",
+  "color.danger.solid.bg": "#dc0010",
+  "color.danger.solid.fg": "{palette.white}",
   "color.danger.solid.border": "{palette.red.300}",
 
   "color.danger.soft.bg": "{palette.red.100}",

package/src/theme/tokens/primitives.ts

@@ -371,6 +371,26 @@ export const primitives = {
   "typography.fonts.bold": "System",
 
   // ── typography: role variants ─────────────────────────────────────────────
+  // Base sizes in React Native logical units, before OS text scaling; these
+  // are not physical pixels. Pass them directly to Text without multiplying
+  // by PixelRatio or fontScale (native Text handles accessibility scaling).
+  // Each role pairs fontSize with an absolute lineHeight, not a ratio.
+  // Line heights use a 4-unit grid; font sizes need not follow that grid.
+  //
+  // Font size / line height, listed from lg to sm:
+  // display:  40/48, 36/44, 32/40 — short, prominent hero text.
+  // headline: 28/36, 24/32, 22/28 — page and section headings.
+  // title:    20/28, 18/24, 16/24 — card, list, and navigation titles.
+  // body:     18/28, 16/24, 14/20 — reading text; body-md is Text's default.
+  // label:    16/20, 14/20, 12/16 — short control labels, not paragraphs.
+  // caption:  12/16              — brief supplementary text.
+  // Prefer body sizes for essential information; reserve 12 for compact text.
+  // These are Terra's custom roles, not native platform text-style presets.
+  //
+  // maxFontSizeMultiplier limits accessibility enlargement when scaling is
+  // enabled. The caps below are layout tradeoffs, not accessibility targets.
+  // RN uses 0 for no cap; Terra Text also accepts a per-instance override.
+  // Validate wrapping and clipping at large OS text sizes and with custom fonts.
   "typography.variants.display-lg.fontSize": 40,
   "typography.variants.display-lg.lineHeight": 48,
   "typography.variants.display-lg.fontWeight": "bold",
@@ -412,12 +432,12 @@ export const primitives = {
   "typography.variants.title-md.letterSpacing": 0,
   "typography.variants.title-md.maxFontSizeMultiplier": 1.4,
   "typography.variants.title-sm.fontSize": 16,
-  "typography.variants.title-sm.lineHeight": 22,
+  "typography.variants.title-sm.lineHeight": 24,
   "typography.variants.title-sm.fontWeight": "semibold",
   "typography.variants.title-sm.letterSpacing": 0,
   "typography.variants.title-sm.maxFontSizeMultiplier": 1.4,
   "typography.variants.body-lg.fontSize": 18,
-  "typography.variants.body-lg.lineHeight": 26,
+  "typography.variants.body-lg.lineHeight": 28,
   "typography.variants.body-lg.fontWeight": "regular",
   "typography.variants.body-lg.letterSpacing": 0,
   "typography.variants.body-lg.maxFontSizeMultiplier": 1.8,
@@ -437,7 +457,7 @@ export const primitives = {
   "typography.variants.label-lg.letterSpacing": 0.1,
   "typography.variants.label-lg.maxFontSizeMultiplier": 1.5,
   "typography.variants.label-md.fontSize": 14,
-  "typography.variants.label-md.lineHeight": 18,
+  "typography.variants.label-md.lineHeight": 20,
   "typography.variants.label-md.fontWeight": "medium",
   "typography.variants.label-md.letterSpacing": 0.1,
   "typography.variants.label-md.maxFontSizeMultiplier": 1.5,
@@ -450,7 +470,7 @@ export const primitives = {
   "typography.variants.caption.lineHeight": 16,
   "typography.variants.caption.fontWeight": "regular",
   "typography.variants.caption.letterSpacing": 0.2,
-  "typography.variants.caption.maxFontSizeMultiplier": 1.4,
+  "typography.variants.caption.maxFontSizeMultiplier": 2,
 
   // ── component opacity multipliers ─────────────────────────────────────────────────
   "opacity.disabled": 0.45,