refactored text styles, not enough shared

app/screens/LibraryArtists.tsx

@@ -1,34 +1,22 @@
 import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React, { useEffect } from 'react'
-import { Pressable } from 'react-native'
+import { Pressable, StyleSheet } from 'react-native'
 import { Text } from 'react-native'
 import { Artist } from '@app/models/music'
 import { artistsAtom, artistsUpdatingAtom, useUpdateArtists } from '@app/state/music'
-import textStyles from '@app/styles/text'
+import font from '@app/styles/font'
 import ArtistArt from '@app/components/ArtistArt'
 import GradientFlatList from '@app/components/GradientFlatList'
+import colors from '@app/styles/colors'
 
 const ArtistItem: React.FC<{ item: Artist }> = ({ item }) => {
   const navigation = useNavigation()
 
   return (
-    <Pressable
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginVertical: 6,
-        marginLeft: 6,
-      }}
-      onPress={() => navigation.navigate('ArtistView', { id: item.id, title: item.name })}>
+    <Pressable style={styles.item} onPress={() => navigation.navigate('ArtistView', { id: item.id, title: item.name })}>
       <ArtistArt id={item.id} width={56} height={56} />
-      <Text
-        style={{
-          ...textStyles.paragraph,
-          marginLeft: 12,
-        }}>
-        {item.name}
-      </Text>
+      <Text style={styles.title}>{item.name}</Text>
     </Pressable>
   )
 }
@@ -66,4 +54,19 @@ const ArtistsList = () => {
 
 const ArtistsTab = () => <ArtistsList />
 
+const styles = StyleSheet.create({
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 6,
+    marginLeft: 6,
+  },
+  title: {
+    fontFamily: font.regular,
+    fontSize: 16,
+    color: colors.text.primary,
+    marginLeft: 12,
+  },
+})
+
 export default ArtistsTab