update colors.ts

src/app/(tabs)/search/index.tsx

@@ -114,7 +114,7 @@ function SearchScreen() {
             rightIconContainerStyle={{}}
             lightTheme
             placeholder="What do you want to read?"
-            placeholderTextColor={colors.textGrey}
+            placeholderTextColor={colors.grey}
             onChangeText={text => searchFunction(text)}
             value={search}
             onSubmitEditing={searchString => {

src/app/(tabs)/story/styles.ts

@@ -52,22 +52,22 @@ const styles = StyleSheet.create({
     fontFamily: 'Manrope-Regular',
     fontSize: 18,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
     paddingTop: 16,
     paddingBottom: 16,
   },
   story: {
     fontFamily: 'Manrope-Regular',
     fontSize: 14,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
     marginBottom: 16,
   },
   process: {
     fontFamily: 'Manrope-Regular',
     fontSize: 14,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
     marginBottom: 16,
   },
 });

src/components/PreviewCard/styles.ts

@@ -30,7 +30,7 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
     height: 48,
-    backgroundColor: colors.lightGrey,
+    backgroundColor: colors.grey,
     overflow: 'hidden',
     borderRadius: 6,
     paddingHorizontal: 12,

src/styles/colors.ts

@@ -1,26 +1,18 @@
 const colors = {
-  // Primary colors
+  // Colors
   gwnOrange: '#EB563B',
   lilac: '#B49BC6',
   lime: '#ACC073',
   melanin: '#703929',
   citrus: '#E66E3F',
+  moss: '5A7906',
 
-  // Text colors
-  textPrimary: '#000000', // black
-  textSecondary: '#484848', // gray for subtitles
-  textGrey: '#A7A5A5',
-
-  // Surface colors -- used for backgrounds
-  darkGrey: '#D9D9D9',
-  lightGrey: '#F9F9F9',
-  white: '#FEFEFA',
-
-  // Shadow colors
-  shadowDark: '#000000', // black
-
-  // Extra icon colors
-  iconDark: '#231F20', // dark grey
+  // Neutrals
+  black: '#000000',
+  fadedBlack: '#2D2D2D',
+  white: '#FBFBFB',
+  grey: '#A7A5A5',
+  darkGrey: '#797979',
 };
 
 export default colors;

src/styles/globalStyles.ts

@@ -27,92 +27,92 @@ export default StyleSheet.create({
     fontFamily: 'Manrope-Bold',
     fontSize: 24,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   h2: {
     fontFamily: 'Manrope-Bold',
     fontSize: 20,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   h3: {
     fontFamily: 'Manrope-Bold',
     fontSize: 18,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   sh1: {
     fontFamily: 'Manrope-SemiBold',
     fontSize: 14,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   sh2: {
     fontFamily: 'Manrope-Bold',
     fontSize: 14,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   sh3: {
     fontFamily: 'Manrope-SemiBold',
     fontSize: 12,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   body1: {
     fontFamily: 'Manrope-Regular',
     fontSize: 14,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   body2: {
     fontFamily: 'Manrope-Regular',
     fontSize: 16,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   body3: {
     fontFamily: 'Manrope-Regular',
     fontSize: 18,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   subtext: {
     fontFamily: 'Manrope-Regular',
     fontSize: 12,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   button1: {
     fontFamily: 'Manrope-Regular',
     fontSize: 12,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   button2: {
     fontFamily: 'Manrope-SemiBold',
     fontSize: 21,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   errorMessage: {
     fontFamily: 'Manrope-Regular',
     fontSize: 12,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
   },
   bodyUnderline: {
     fontFamily: 'Manrope-Regular',
     fontSize: 12,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
     textDecorationLine: 'underline',
   },
   bodyBoldUnderline: {
     fontFamily: 'Manrope-Bold',
     fontSize: 14,
     textAlign: 'left',
-    color: colors.textPrimary,
+    color: colors.black,
     textDecorationLine: 'underline',
   },
 });