@oxyhq/bloom 0.2.3 → 0.3.1

package/src/typography/index.tsx

@@ -8,11 +8,33 @@ import {
 } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { fontFamilies } from '../fonts/tokens';
 
 export type TextProps = RNTextProps;
 
 /**
- * Base text component with theme-aware default color.
+ * Platform-aware font-family value. On web we resolve to the CSS custom
+ * property set by `applyFontFaces` so consumer apps can re-skin Bloom by
+ * overriding `--bloom-font-*` at any subtree. On native we use the literal
+ * family name registered by `expo-font`'s `useFonts(FONT_ASSETS)`.
+ */
+function fontFamilyStyle(
+  kind: 'display' | 'sans' | 'mono',
+): { fontFamily: string } {
+  if (Platform.OS === 'web') {
+    return { fontFamily: `var(--bloom-font-${kind})` };
+  }
+  if (kind === 'display') return { fontFamily: 'BlomusModernus' };
+  if (kind === 'mono') return { fontFamily: 'Geist Mono' };
+  return { fontFamily: 'Inter' };
+}
+
+const SANS_FONT_FAMILY = fontFamilyStyle('sans');
+const DISPLAY_FONT_FAMILY = fontFamilyStyle('display');
+
+/**
+ * Base text component with theme-aware default color and the Bloom sans
+ * font family applied.
  */
 const TextComponent = function Text({ children, style, ...rest }: TextProps) {
   const { colors } = useTheme();
@@ -20,7 +42,7 @@ const TextComponent = function Text({ children, style, ...rest }: TextProps) {
   return (
     <RNText
       {...rest}
-      style={[{ fontSize: 13, color: colors.text }, style]}>
+      style={[{ fontSize: 13, color: colors.text, ...SANS_FONT_FAMILY }, style]}>
       {children}
     </RNText>
   );
@@ -31,13 +53,18 @@ Text.displayName = 'Text';
 
 export { Text as Span };
 
+const HEADING_STYLE: StyleProp<TextStyle> = {
+  ...DISPLAY_FONT_FAMILY,
+  fontWeight: '700',
+};
+
 function createHeadingElement({ level }: { level: number }): React.FC<TextProps> {
   return function HeadingElement({ style, ...rest }: TextProps) {
     const extraProps: Record<string, unknown> =
       Platform.OS === 'web'
         ? { role: 'heading', 'aria-level': level }
         : {};
-    return <Text {...extraProps} {...rest} style={style} />;
+    return <Text {...extraProps} {...rest} style={[HEADING_STYLE, style]} />;
   };
 }
 
@@ -66,3 +93,5 @@ export function P({ style, ...rest }: TextProps) {
   );
 }
 P.displayName = 'P';
+
+export { fontFamilies };