feat: added some custom styles and theme

App.tsx

@@ -1,11 +1,12 @@
 import TestScreen from '@screens/Test';
+import { text } from '@theme/text';
 import { StatusBar } from 'expo-status-bar';
 import { Text, View } from 'react-native';
 
 export default function App() {
   return (
     <View className="flex-1 items-center justify-center bg-white">
-      <Text>Open up App.tsx to start working on your app!</Text>
+      <Text className={text({ type: 'body' })}>Open up App.tsx to start working on your app!</Text>
       <StatusBar style="auto" />
       <TestScreen />
     </View>

babel.config.js

@@ -12,6 +12,7 @@ module.exports = function (api) {
           alias: {
             '@screens': './src/screens',
             '@components': './src/components',
+            '@theme': './src/theme',
           },
         },
       ],

package.json

@@ -16,6 +16,7 @@
     "build:android:local": "eas build --platform android --local --profile preview"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.0",
     "expo": "~49.0.15",
     "expo-status-bar": "~1.6.0",
     "expo-updates": "~0.18.19",

src/components/core/Button.tsx

@@ -1,3 +1,4 @@
+import { text } from '@theme/text';
 import { Text, TouchableOpacity } from 'react-native';
 
 type Props = {
@@ -7,7 +8,7 @@ type Props = {
 
 const Button = ({ title, onPress }: Props) => (
   <TouchableOpacity onPress={onPress} className="px-6 py-2.5 bg-slate-500 rounded-md">
-    <Text className="text-white text-base">{title}</Text>
+    <Text className={text({ type: 'headline', isCenter: true, class: 'text-white' })}>{title}</Text>
   </TouchableOpacity>
 );
 

src/screens/Test/index.tsx

@@ -1,9 +1,10 @@
 import Button from '@components/core/Button';
+import { text } from '@theme/text';
 import { Text, View } from 'react-native';
 
 const TestScreen = () => (
   <View>
-    <Text>TestScreen</Text>
+    <Text className={text({ type: 'title1', class: 'my-2' })}>Test Screen</Text>
     <Button title="Press me!" />
   </View>
 );

src/theme/colors.js

@@ -0,0 +1,4 @@
+module.exports = {
+  white: '#ffffff',
+  black: '#000000',
+};

src/theme/package.json

@@ -0,0 +1,3 @@
+{
+    "name": "theme"
+}

src/theme/text.ts

@@ -0,0 +1,30 @@
+import { cva } from 'class-variance-authority';
+
+export const text = cva(['items-center justify-center'], {
+  variants: {
+    type: {
+      title40: 'text-[40px] leading-[44px] font-Medium',
+      title1: 'text-title1 leading-title1 font-Light ',
+      title2: 'text-title2 leading-title2 font-Regular',
+      title3: 'text-title3 leading-title3 font-Regular',
+      title4: 'text-[16px] leading-[18px] font-SemiBold',
+      headline: 'text-headline leading-headline font-SemiBold',
+      body: 'text-body leading-body font-Regular',
+      callout: 'text-callout leading-callout font-Regular',
+      subhead: 'text-subhead leading-subhead font-Regular',
+      footnote: 'text-footnote leading-footnote font-Regular',
+      caption1: 'text-caption1 leading-caption1 font-Regular',
+      caption2: 'text-caption2 leading-caption2 font-Regular',
+      subtitle: 'text-callout leading-callout font-Medium',
+      subtitle1: 'text-[13px] leading-[16px] font-Medium',
+    },
+    size: {
+      title1XLarge: 'text-[30px] leading-[36px]',
+      title1XXLarge: 'text-[32px] leading-[39px]',
+      title1XXXLarge: 'text-[34px] leading-[41px]',
+    },
+    isCenter: {
+      true: 'text-center',
+    },
+  },
+});

tailwind.config.js

@@ -1,8 +1,99 @@
-/** @type {import('tailwindcss').Config} */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const colors = require('./src/theme/colors');
+
 module.exports = {
   content: ['./App.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors,
+      fontSize: {
+        title1: '28px',
+        title2: '22px',
+        title3: '20px',
+        headline: '17px',
+        body: '17px',
+        callout: '16px',
+        subhead: '15px',
+        footnote: '13px',
+        caption1: '12px',
+        caption2: '11px',
+
+        sTitle1: '26px',
+        sTitle2: '20px',
+        sTitle3: '18px',
+        sHeadline: '15px',
+        sBody: '15px',
+        sCallout: '14px',
+        sSubhead: '13px',
+        sFootnote: '12px',
+        sCaption1: '11px',
+
+        mTitle1: '27px',
+        mTitle2: '21px',
+        mTitle3: '19px',
+        mHeadline: '16px',
+        mBody: '16px',
+        mCallout: '15px',
+        mSubhead: '14px',
+        mFootnote: '12px',
+        mCaption1: '11px',
+      },
+      lineHeight: {
+        title1: '34px',
+        title2: '28px',
+        title3: '24px',
+        headline: '22px',
+        body: '22px',
+        callout: '21px',
+        subhead: '20px',
+        footnote: '18px',
+        caption1: '16px',
+        caption2: '13px',
+
+        sTitle1: '32px',
+        sTitle2: '24px',
+        sTitle3: '22px',
+        sHeadline: '20px',
+        sBody: '20px',
+        sCallout: '19px',
+        sSubhead: '18px',
+        sFootnote: '16px',
+        sCaption1: '13px',
+
+        mTitle1: '23px',
+        mTitle2: '28px',
+        mTitle3: '23px',
+        mHeadline: '21px',
+        mBody: '21px',
+        mCallout: '20px',
+        mSubhead: '19px',
+        mFootnote: '16px',
+        mCaption1: '13px',
+      },
+      fontFamily: {
+        Bold: 'Bold',
+        Medium: 'Medium',
+        Regular: 'Regular',
+        SemiBold: 'SemiBold',
+      },
+      borderWidth: {
+        b02: '0.2px',
+        b025: '0.25px',
+        b03: '0.3px',
+        b04: '0.4px',
+        b05: '0.5px',
+        b075: '0.75px',
+        b1: '1px',
+        b2: '2px',
+        b3: '3px',
+      },
+      borderRadius: {},
+      width: {},
+      height: {
+        h1: '1px',
+        h2: '2px',
+      },
+    },
   },
   plugins: [],
 };

tsconfig.json

@@ -5,7 +5,8 @@
     "baseUrl": "./src",
     "paths": {
       "@screens/*":["./screens/*"],
-      "@components/*": ["./components/*"]
+      "@components/*": ["./components/*"],
+      "@theme/*": ["./theme/*"]
     }
   }
 }