Rework all typography

src/view/com/util/EmptyState.tsx

@@ -29,7 +29,7 @@ export function EmptyState({
           />
         )}
       </View>
-      <Text type="body1" style={[pal.textLight, styles.text]}>
+      <Text type="xl" style={[pal.textLight, styles.text]}>
         {message}
       </Text>
     </View>

src/view/com/util/Link.tsx

@@ -58,7 +58,7 @@ export const Link = observer(function Link({
 })
 
 export const TextLink = observer(function Link({
-  type = 'body1',
+  type = 'md',
   style,
   href,
   text,

src/view/com/util/PostEmbeds.tsx

@@ -92,21 +92,18 @@ export function PostEmbeds({
           />
         )}
         <View style={styles.extInner}>
-          <Text
-            type="body2"
-            numberOfLines={2}
-            style={[pal.text, styles.extTitle]}>
+          <Text type="sm-bold" numberOfLines={2} style={[pal.text]}>
             {link.title || link.uri}
           </Text>
           <Text
-            type="body2"
+            type="sm"
             numberOfLines={1}
             style={[pal.textLight, styles.extUri]}>
             {link.uri}
           </Text>
           {link.description ? (
             <Text
-              type="body2"
+              type="sm"
               numberOfLines={2}
               style={[pal.text, styles.extDescription]}>
               {link.description}
@@ -140,9 +137,6 @@ const styles = StyleSheet.create({
   extImageFallback: {
     height: 160,
   },
-  extTitle: {
-    fontWeight: '600',
-  },
   extUri: {
     marginTop: 2,
   },

src/view/com/util/PostMeta.tsx

@@ -40,16 +40,16 @@ export function PostMeta(opts: PostMetaOpts) {
         style={[styles.metaItem, styles.maxWidth]}
         href={opts.authorHref}
         title={opts.authorHandle}>
-        <Text type="h5" style={[pal.text]} numberOfLines={1}>
+        <Text type="lg-bold" style={[pal.text]} numberOfLines={1}>
           {displayName}
           {handle ? (
-            <Text type="h6" style={[pal.textLight]}>
+            <Text type="md" style={[pal.textLight]}>
               &nbsp;{handle}
             </Text>
           ) : undefined}
         </Text>
       </Link>
-      <Text type="h6" style={[styles.metaItem, pal.textLight]}>
+      <Text type="md" style={[styles.metaItem, pal.textLight]}>
         &middot; {ago(opts.timestamp)}
       </Text>
     </View>

src/view/com/util/UserInfoText.tsx

@@ -8,7 +8,7 @@ import {useStores} from '../../../state'
 import {TypographyVariant} from '../../lib/ThemeContext'
 
 export function UserInfoText({
-  type = 'body1',
+  type = 'md',
   did,
   attr,
   loading,

src/view/com/util/ViewHeader.tsx

@@ -68,12 +68,12 @@ export const ViewHeader = observer(function ViewHeader({
         )}
       </TouchableOpacity>
       <View style={styles.titleContainer} pointerEvents="none">
-        <Text type="h4" style={[pal.text, styles.title]}>
+        <Text type="title" style={[pal.text, styles.title]}>
           {title}
         </Text>
         {subtitle ? (
           <Text
-            type="h5"
+            type="title-sm"
             style={[styles.subtitle, pal.textLight]}
             numberOfLines={1}>
             {subtitle}

src/view/com/util/error/ErrorMessage.tsx

@@ -31,7 +31,7 @@ export function ErrorMessage({
         <FontAwesomeIcon icon="exclamation" style={pal.text} size={16} />
       </View>
       <Text
-        type="body2"
+        type="sm"
         style={[styles.message, pal.text]}
         numberOfLines={numberOfLines}>
         {message}

src/view/com/util/error/ErrorScreen.tsx

@@ -36,14 +36,14 @@ export function ErrorScreen({
           />
         </View>
       </View>
-      <Text type="h3" style={[styles.title, pal.text]}>
+      <Text type="title-lg" style={[styles.title, pal.text]}>
         {title}
       </Text>
       <Text style={[styles.message, pal.textLight]}>{message}</Text>
       {details && (
         <Text
           testID={`${testID}-details`}
-          type="body2"
+          type="sm"
           style={[
             styles.details,
             pal.textInverted,

src/view/com/util/text/RichText.tsx

@@ -15,21 +15,23 @@ type Entity = {
 }
 
 export function RichText({
-  type = 'body1',
+  type = 'md',
   text,
   entities,
+  lineHeight = 1.2,
   style,
   numberOfLines,
 }: {
   type?: TypographyVariant
   text: string
   entities?: Entity[]
+  lineHeight?: number
   style?: StyleProp<TextStyle>
   numberOfLines?: number
 }) {
   const theme = useTheme()
   const pal = usePalette('default')
-  const lineHeightStyle = lh(theme, type, 1.2)
+  const lineHeightStyle = lh(theme, type, lineHeight)
   if (!entities?.length) {
     if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) {
       style = {

src/view/com/util/text/Text.tsx

@@ -8,7 +8,7 @@ export type CustomTextProps = TextProps & {
 }
 
 export function Text({
-  type = 'body1',
+  type = 'md',
   children,
   style,
   ...props