design: Update typography styles in design system (#93)

* design: Update typography system with new font settings * design: Update text system and padding values following typography changes * design: Update height in link card
BLink-Org · Oct 6, 2024 · 702eec5 · 702eec5
1 parent d50d5c7
commit 702eec5
Show file tree

Hide file tree

Showing 19 changed files with 50 additions and 35 deletions.
diff --git a/src/components/common/NavigationButton.tsx b/src/components/common/NavigationButton.tsx
@@ -39,13 +39,13 @@ const NavigationButton = ({
         {label === t('이전 링크') ? (
           <>
             <IconComponent width={14} height={14} fill={iconColor} />
-            <Text style={[FONTS.CAPTION_REGULAR, {color: textColor}]}>
+            <Text style={[FONTS.BODY3_MEDIUM, {color: textColor}]}>
               {t(label)}
             </Text>
           </>
         ) : (
           <>
-            <Text style={[FONTS.CAPTION_REGULAR, {color: textColor}]}>
+            <Text style={[FONTS.BODY3_MEDIUM, {color: textColor}]}>
               {t(label)}
             </Text>
             <IconComponent width={14} height={14} fill={iconColor} />

diff --git a/src/components/common/TextInputGroup.tsx b/src/components/common/TextInputGroup.tsx
@@ -91,7 +91,7 @@ const createStyles = (theme: ITheme) =>
       paddingVertical: 16,
       width: '100%',
       color: theme.TEXT800,
-      ...FONTS.BODY1_MEDIUM,
+      ...FONTS.BODY3_MEDIUM,
     },
     inputFieldTop: {
       width: '100%',

diff --git a/src/components/folder/FolderButton.tsx b/src/components/folder/FolderButton.tsx
@@ -237,7 +237,7 @@ const createStyles = (theme: ITheme) =>
     },
     recentText: {
       color: theme.MAIN500,
-      ...FONTS.CAPTION_MEDIUM,
+      ...FONTS.BODY3_MEDIUM,
     },
   });
 

diff --git a/src/components/home/LargeCard.tsx b/src/components/home/LargeCard.tsx
@@ -261,7 +261,7 @@ const createStyles = (theme: ITheme) =>
   StyleSheet.create({
     container: {
       width: screenWidth,
-      paddingVertical: 16,
+      paddingVertical: 20,
     },
     cardImageContainer: {
       width: screenWidth,
@@ -309,7 +309,7 @@ const createStyles = (theme: ITheme) =>
     },
     folderText: {
       color: theme.TEXT600,
-      ...FONTS.BODY2_REGULAR,
+      ...FONTS.BODY3_MEDIUM,
     },
     titleText: {
       color: theme.TEXT900,

diff --git a/src/components/home/LargeCardPlaceHolder.tsx b/src/components/home/LargeCardPlaceHolder.tsx
@@ -43,15 +43,15 @@ export default LargeCardPlaceHolder;
 
 const styles = StyleSheet.create({
   topContainer: {
-    height: 271,
+    height: 272,
   },
   container: {
-    marginTop: 16,
+    marginTop: 20,
   },
   threeDots: {
     position: 'absolute',
-    top: 28,
-    right: 12,
+    top: 34,
+    right: 12.67,
     height: 16.67,
     flexDirection: 'column',
     justifyContent: 'space-between',

diff --git a/src/components/home/SmallCard.tsx b/src/components/home/SmallCard.tsx
@@ -395,8 +395,9 @@ const createStyles = (theme: ITheme) =>
   StyleSheet.create({
     container: {
       height: 180,
-      paddingVertical: 16,
+      paddingVertical: 20,
       gap: 8,
+
     },
     dotPosition: {
       flexDirection: 'row',
@@ -446,7 +447,7 @@ const createStyles = (theme: ITheme) =>
     },
     folderText: {
       color: theme.TEXT600,
-      ...FONTS.BODY2_REGULAR,
+      ...FONTS.BODY3_MEDIUM,
     },
     titleText: {
       color: theme.TEXT900,

diff --git a/src/components/home/SmallCardPlaceHolder.tsx b/src/components/home/SmallCardPlaceHolder.tsx
@@ -15,7 +15,7 @@ const SmallCardPlaceHolder = () => {
         highlightColor={theme.TEXT100}>
         <View style={styles.container}>
           <View style={styles.header}>
-            <View style={{width: 42, height: 24}} />
+            <View style={{width: 42, height: 20}} />
             <View style={styles.threeDots}>
               <View style={{width: 3.33, height: 3.33, borderRadius: 2}} />
               <View style={{width: 3.33, height: 3.33, borderRadius: 2}} />
@@ -47,12 +47,12 @@ export default SmallCardPlaceHolder;
 const styles = StyleSheet.create({
   topContainer: {
     height: 180,
+    paddingVertical: 20,
   },
   container: {
     gap: 8,
   },
   header: {
-    paddingTop: 16,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },

diff --git a/src/components/home/UnAuthLargeCard.tsx b/src/components/home/UnAuthLargeCard.tsx
@@ -232,7 +232,7 @@ const createStyles = (theme: ITheme) =>
     },
     folderText: {
       color: theme.TEXT600,
-      ...FONTS.BODY2_REGULAR,
+      ...FONTS.BODY3_MEDIUM,
     },
     titleText: {
       color: theme.TEXT900,

diff --git a/src/components/home/UnAuthSmallCard.tsx b/src/components/home/UnAuthSmallCard.tsx
@@ -268,7 +268,7 @@ const createStyles = (theme: ITheme) =>
     },
     folderText: {
       color: theme.TEXT600,
-      ...FONTS.BODY2_REGULAR,
+      ...FONTS.BODY3_MEDIUM,
     },
     titleText: {
       color: theme.TEXT900,

diff --git a/src/components/mypage/DeletedTrueContainer.tsx b/src/components/mypage/DeletedTrueContainer.tsx
@@ -40,7 +40,7 @@ const createStyles = (theme: ITheme) =>
       gap: 4,
     },
     bodyText: {
-      ...FONTS.CAPTION_REGULAR,
+      ...FONTS.BODY3_MEDIUM,
       color: theme.TEXT500,
     },
     headerText: {

diff --git a/src/components/search/ResentSearch.tsx b/src/components/search/ResentSearch.tsx
@@ -83,10 +83,11 @@ const createStyles = (theme: ITheme) =>
     },
     headerText: {
       paddingHorizontal: 18,
-      marginVertical: 10,
+      marginTop: 6,
+      marginBottom: 10,
     },
     headerTitle: {
-      ...FONTS.BODY1_MEDIUM,
+      ...FONTS.BODY2_MEDIUM,
       color: theme.TEXT900,
     },
     separator: {

diff --git a/src/components/search/SearchHeader.tsx b/src/components/search/SearchHeader.tsx
@@ -25,7 +25,6 @@ const SearchHeader = memo(
     };
 
     return (
-      // <View style={styles.searchContainer, {backgroundColor: theme.THEME_NUMBER === 3 ? theme.MAIN200 : theme.BACKGROUND}}>
       <View
         style={[
           styles.searchContainer,
@@ -67,17 +66,18 @@ const createStyles = (theme: ITheme) =>
       paddingHorizontal: 18,
       flexDirection: 'row',
       alignItems: 'center',
-      overflow: 'hidden',
+      justifyContent: 'center',
     },
     searchInput: {
       flex: 1,
       height: 50,
       borderRadius: 8,
       paddingLeft: 16,
       paddingRight: 46,
+      paddingVertical: 5,
       color: theme.TEXT800,
       backgroundColor: theme.TEXT200,
-      ...FONTS.BODY2_MEDIUM,
+      ...FONTS.BODY1_MEDIUM,
     },
     searchIcon: {
       position: 'absolute',

diff --git a/src/constants/fonts.ts b/src/constants/fonts.ts
@@ -3,7 +3,7 @@ export default {
     fontFamily: 'Pretendard-SemiBold',
     fontSize: 26,
     lineHeight: 39,
-    letterSpacing: 0,
+    letterSpacing: -0.2,
   },
   SUBTITLE: {
     fontFamily: 'Pretendard-SemiBold',
@@ -21,7 +21,7 @@ export default {
     fontFamily: 'Pretendard-Medium',
     fontSize: 18,
     lineHeight: 27,
-    letterSpacing: -0.4,
+    letterSpacing: -0.2,
   },
   BODY2_SEMIBOLD: {
     fontFamily: 'Pretendard-SemiBold',
@@ -41,16 +41,28 @@ export default {
     lineHeight: 24,
     letterSpacing: -0.2,
   },
-  CAPTION_MEDIUM: {
+  BODY3_SEMIBOLD: {
+    fontFamily: 'Pretendard-SemiBold',
+    fontSize: 14,
+    lineHeight: 21,
+    letterSpacing: -0.2,
+  },
+  BODY3_MEDIUM: {
     fontFamily: 'Pretendard-Medium',
     fontSize: 14,
     lineHeight: 21,
-    letterSpacing: 0,
+    letterSpacing: -0.2,
   },
-  CAPTION_REGULAR: {
+  BODY3_REGULAR: {
     fontFamily: 'Pretendard-Regular',
     fontSize: 14,
     lineHeight: 21,
-    letterSpacing: 0,
+    letterSpacing: -0.2,
+  },
+  CAPTION_REGULAR: {
+    fontFamily: 'Pretendard-Regular',
+    fontSize: 12,
+    lineHeight: 18,
+    letterSpacing: -0.2,
   },
 };
diff --git a/src/screens/stack-screens/BookmarkWebView.tsx b/src/screens/stack-screens/BookmarkWebView.tsx
@@ -184,7 +184,7 @@ const BookmarkWebView = () => {
           <ArrowBackIcon fill={theme.TEXT900} />
         </TouchableOpacity>
         <View style={styles.urlTextHolder}>
-          <Text style={[FONTS.BODY2_REGULAR, {color: theme.TEXT700}]}>
+          <Text style={[FONTS.BODY3_MEDIUM, {color: theme.TEXT700}]}>
             {extractHostname(currentUrl ?? '')}
           </Text>
         </View>

diff --git a/src/screens/stack-screens/Onboarding.tsx b/src/screens/stack-screens/Onboarding.tsx
@@ -107,6 +107,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     textDecorationLine: 'underline',
     paddingVertical: 10,
-    ...FONTS.CAPTION_MEDIUM,
+    ...FONTS.BODY3_MEDIUM,
   },
 });
diff --git a/src/screens/stack-screens/SearchWebView.tsx b/src/screens/stack-screens/SearchWebView.tsx
@@ -195,7 +195,7 @@ const SearchWebView = () => {
           <ArrowBackIcon fill={theme.TEXT900} />
         </TouchableOpacity>
         <View style={styles.urlTextHolder}>
-          <Text style={[FONTS.BODY2_REGULAR, {color: theme.TEXT700}]}>
+          <Text style={[FONTS.BODY3_MEDIUM, {color: theme.TEXT700}]}>
             {extractHostname(currentUrl ?? '')}
           </Text>
         </View>

diff --git a/src/screens/stack-screens/WebViewList.tsx b/src/screens/stack-screens/WebViewList.tsx
@@ -196,7 +196,7 @@ const WebViewList = () => {
           <ArrowBackIcon fill={theme.TEXT900} />
         </TouchableOpacity>
         <View style={styles.urlTextHolder}>
-          <Text style={[FONTS.BODY2_REGULAR, {color: theme.TEXT700}]}>
+          <Text style={[FONTS.BODY3_MEDIUM, {color: theme.TEXT700}]}>
             {extractHostname(currentUrl ?? '')}
           </Text>
         </View>

diff --git a/src/screens/tab-screens/Search.tsx b/src/screens/tab-screens/Search.tsx
@@ -245,10 +245,11 @@ const createStyles = (theme: ITheme) =>
       backgroundColor: theme.TEXT200,
     },
     headerText: {
-      marginVertical: 10,
+      marginTop: 6,
+      marginBottom: 10,
     },
     headerTextContent: {
-      ...FONTS.BODY1_MEDIUM,
+      ...FONTS.BODY2_MEDIUM,
       color: theme.TEXT900,
     },
   });
diff --git a/src/screens/unauth-screen/UnAuthWebView.tsx b/src/screens/unauth-screen/UnAuthWebView.tsx
@@ -98,7 +98,7 @@ const UnAuthWebView = () => {
           <ArrowBackIcon fill={theme.TEXT900} />
         </TouchableOpacity>
         <View style={styles.urlTextHolder}>
-          <Text style={[FONTS.BODY2_REGULAR, {color: theme.TEXT700}]}>
+          <Text style={[FONTS.BODY3_MEDIUM, {color: theme.TEXT700}]}>
             {extractHostname(currentUrl ?? '')}
           </Text>
         </View>