@butternutbox/pawprint-native 0.15.0 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/components/atoms/Typography/Typography.tsx

@@ -140,7 +140,16 @@ const VARIANT_DEFAULTS = {
   display: { size: "lg" } as const
 }
 
-const StyledText = styled(Text)({})
+// Android reserves extra vertical padding from the font's ascent/descent
+// (`includeFontPadding`, on by default) and top-aligns glyphs within that box.
+// With the tall Ida Narrow metrics this shifts/clips copy — headings and button
+// labels that sit on one line on iOS get squeezed or clipped on Android. Turning
+// it off and centring vertically makes Android match iOS. Both props are
+// Android-only; iOS ignores them.
+const StyledText = styled(Text)({
+  includeFontPadding: false,
+  textAlignVertical: "center"
+})
 
 /**
  * Typography component for body text, headings, and display copy.

package/src/components/molecules/NativeSelectPicker/NativeSelectPicker.styled.ts

@@ -3,6 +3,8 @@ import { View, Text } from "react-native"
 import Animated from "react-native-reanimated"
 import { DEFAULT_THEME_OPTIONS } from "@butternutbox/pawprint-tokens"
 
+import { resolveFont } from "../../../fonts"
+
 type AndroidOptionTextProps = {
   isSelected: boolean
 }
@@ -16,6 +18,31 @@ const parseSize = (value: string): number => {
   return parseInt(value.replace("px", ""), 10)
 }
 
+type TypographyToken = {
+  fontFamily: string
+  fontWeight: string
+  fontSize: string
+  letterSpacing?: string
+}
+
+// Resolve the brand PostScript font from a typography token. Without this the
+// text falls back to the system font (the weight-encoded family isn't set by
+// fontWeight alone), so we resolve fontFamily and drop the separate fontWeight.
+const resolveTypography = (
+  typography: TypographyToken
+): { fontFamily: string; fontSize: number; letterSpacing: number } => {
+  const { fontFamily } = resolveFont(
+    typography.fontFamily,
+    typography.fontWeight
+  )
+  const fontSize = parseSize(typography.fontSize)
+  const letterSpacing = typography.letterSpacing?.endsWith("%")
+    ? (parseFloat(typography.letterSpacing) / 100) * fontSize
+    : parseFloat(typography.letterSpacing ?? "0")
+
+  return { fontFamily, fontSize, letterSpacing }
+}
+
 const Wrapper = styled(View)({
   borderWidth: parseSize(inputTokens.borderWidth.field.selected),
   borderColor: inputTokens.colour.field.border.selected,
@@ -37,15 +64,13 @@ const SelectIcon = styled(Animated.View)({
 
 const InputText = styled(Text)({
   color: inputTokens.colour.field.text.default,
-  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-  fontWeight: inputTokens.field.placeholder.default.fontWeight,
+  ...resolveTypography(inputTokens.field.placeholder.default),
   flex: 1
 })
 
 const PlaceholderText = styled(Text)({
   color: inputTokens.colour.field.text.placeholder,
-  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-  fontWeight: inputTokens.field.placeholder.default.fontWeight,
+  ...resolveTypography(inputTokens.field.placeholder.default),
   flex: 1
 })
 
@@ -67,8 +92,7 @@ const AndroidDialog = styled(View)({
 })
 
 const DialogTitle = styled(Text)({
-  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-  fontWeight: inputTokens.text.label.fontWeight,
+  ...resolveTypography(inputTokens.text.label),
   color: inputTokens.colour.field.text.default,
   marginBottom: parseSize(dimensions.spacing.md),
   marginLeft: parseSize(dimensions.spacing.xs)
@@ -103,10 +127,11 @@ const RadioInner = styled(View)({
 
 const AndroidOptionText = styled(Text)<AndroidOptionTextProps>(
   ({ isSelected }) => ({
-    fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-    fontWeight: isSelected
-      ? inputTokens.text.label.fontWeight
-      : inputTokens.field.placeholder.default.fontWeight,
+    ...resolveTypography(
+      isSelected
+        ? inputTokens.text.label
+        : inputTokens.field.placeholder.default
+    ),
     color: inputTokens.colour.field.text.default,
     flex: 1
   })