Build in tracking to text atoms

src/alf/atoms.ts

@@ -176,33 +176,43 @@ export const atoms = {
   },
   text_2xs: {
     fontSize: tokens.fontSize._2xs,
+    letterSpacing: 0.25,
   },
   text_xs: {
     fontSize: tokens.fontSize.xs,
+    letterSpacing: 0.25,
   },
   text_sm: {
     fontSize: tokens.fontSize.sm,
+    letterSpacing: 0.25,
   },
   text_md: {
     fontSize: tokens.fontSize.md,
+    letterSpacing: 0.25,
   },
   text_lg: {
     fontSize: tokens.fontSize.lg,
+    letterSpacing: 0.25,
   },
   text_xl: {
     fontSize: tokens.fontSize.xl,
+    letterSpacing: 0.25,
   },
   text_2xl: {
     fontSize: tokens.fontSize._2xl,
+    letterSpacing: 0.25,
   },
   text_3xl: {
     fontSize: tokens.fontSize._3xl,
+    letterSpacing: 0.25,
   },
   text_4xl: {
     fontSize: tokens.fontSize._4xl,
+    letterSpacing: 0.25,
   },
   text_5xl: {
     fontSize: tokens.fontSize._5xl,
+    letterSpacing: 0.25,
   },
   leading_tight: {
     lineHeight: 1.15,
@@ -213,8 +223,11 @@ export const atoms = {
   leading_normal: {
     lineHeight: 1.5,
   },
+  tracking_normal: {
+    letterSpacing: 0,
+  },
   tracking_wide: {
-    letterSpacing: 0.2,
+    letterSpacing: 0.25,
   },
   font_normal: {
     fontWeight: tokens.fontWeight.normal,

src/components/RichText.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {RichText as RichTextAPI, AppBskyRichtextFacet} from '@atproto/api'
 
-import {atoms as a, TextStyleProp} from '#/alf'
+import {atoms as a, TextStyleProp, flatten} from '#/alf'
 import {InlineLink} from '#/components/Link'
 import {Text, TextProps} from '#/components/Typography'
 import {toShortUrl} from 'lib/strings/url-helpers'
@@ -29,7 +29,7 @@ export function RichText({
   const [richText, setRichText] = React.useState<RichTextAPI>(() =>
     value instanceof RichTextAPI ? value : new RichTextAPI({text: value}),
   )
-  const styles = [a.leading_tight, style]
+  const styles = [a.leading_snug, flatten(style)]
 
   React.useEffect(() => {
     if (!resolveFacets) return

src/view/com/post-thread/PostThreadItem.tsx

@@ -328,12 +328,7 @@ let PostThreadItemLoaded = ({
                   ]}>
                   <RichText
                     value={richText}
-                    style={[
+                    style={[a.flex_1, a.leading_snug, a.text_xl]}
-                      a.flex_1,
-                      a.leading_snug,
-                      a.text_xl,
-                      a.tracking_wide,
-                    ]}
                     selectable
                   />
                 </View>
@@ -527,12 +522,7 @@ let PostThreadItemLoaded = ({
                   <View style={styles.postTextContainer}>
                     <RichText
                       value={richText}
-                      style={[
+                      style={[a.flex_1, a.leading_snug, a.text_md]}
-                        a.flex_1,
-                        a.leading_snug,
-                        a.text_md,
-                        a.tracking_wide,
-                      ]}
                       numberOfLines={limitLines ? MAX_POST_LINES : undefined}
                     />
                   </View>

src/view/com/posts/FeedItem.tsx

@@ -350,7 +350,7 @@ let PostContent = ({
             testID="postText"
             value={richText}
             numberOfLines={limitLines ? MAX_POST_LINES : undefined}
-            style={[a.flex_1, a.leading_snug, a.tracking_wide, a.text_md]}
+            style={[a.flex_1, a.leading_snug, a.text_md]}
           />
         </View>
       ) : undefined}

src/view/com/util/post-embeds/QuoteEmbed.tsx

@@ -129,7 +129,7 @@ export function QuoteEmbed({
       {richText ? (
         <RichText
           value={richText}
-          style={[a.text_md, a.tracking_wide]}
+          style={[a.text_md]}
           numberOfLines={20}
           disableLinks
         />

src/view/screens/ProfileFeed.tsx

@@ -576,7 +576,7 @@ function AboutSection({
         {feedInfo.description ? (
           <RichText
             testID="listDescription"
-            style={[a.text_md, a.leading_snug, a.tracking_wide]}
+            style={[a.text_md, a.leading_snug]}
             value={feedInfo.description}
           />
         ) : (