Design system init

frontend/mobile/app/(app)/(tabs)/discover.tsx

@@ -1,28 +1,13 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { Box, Text } from '@/app/(design-system)';
 
 const DiscoverPage = () => {
     return (
-        <View style={styles.container}>
-            <Text style={styles.title}>Discover</Text>
-        </View>
+        <Box flex={1} alignItems="center" justifyContent="center" padding="m">
+            <Text color="aqua" variant="text-1">
+                DiscoverAA
+            </Text>
+        </Box>
     );
 };
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-    title: {
-        fontSize: 20,
-        fontWeight: 'bold'
-    },
-    separator: {
-        marginVertical: 30,
-        height: 1,
-        width: '80%'
-    }
-});
-
 export default DiscoverPage;

frontend/mobile/app/(design-system)/Box.tsx

@@ -0,0 +1,14 @@
+import React, { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+
+import { BoxProps, createBox } from '@shopify/restyle';
+
+import { Theme } from './theme';
+
+type Props = ViewProps & PropsWithChildren & BoxProps<Theme>;
+
+const BoxDefault = createBox<Theme>();
+
+export const Box: React.FC<Props> = ({ style, ...rest }) => {
+    return <BoxDefault style={[style]} {...rest} />;
+};

frontend/mobile/app/(design-system)/Colors.ts

@@ -0,0 +1,12 @@
+// TODO: We will have to change these
+export const Colors = {
+    darkBlue: '#0C3354',
+    darkRed: '#C8102E',
+    green: '#14AC3F',
+    blue: '#2663FF',
+    aqua: '#35B8E2',
+    purple: '#9226FF',
+    red: '#EC2215',
+    orange: '#FF7426',
+    yellow: '#FFB626'
+};

frontend/mobile/app/(design-system)/Spacing.ts

@@ -0,0 +1,10 @@
+export const Spacing = {
+    none: 0,
+    xxs: 4,
+    xs: 8,
+    s: 12,
+    m: 16,
+    l: 24,
+    xl: 32,
+    xxl: 40
+};

frontend/mobile/app/(design-system)/Text.tsx

@@ -0,0 +1,5 @@
+import { createText } from '@shopify/restyle';
+
+import { Theme } from './theme';
+
+export const Text = createText<Theme>();

frontend/mobile/app/(design-system)/TextVariants.ts

@@ -0,0 +1,20 @@
+// Add actual text variants here
+const Texts = {
+    'text-1': {
+        fontSize: 20,
+        fontWeight: 'bold'
+    },
+    'text-2': {
+        fontSize: 16,
+        fontWeight: 'normal'
+    },
+    'text-3': {
+        fontSize: 14,
+        fontWeight: 'normal'
+    }
+} as const;
+
+export const TextVariants = {
+    defaults: Texts['text-1'],
+    ...Texts
+};

frontend/mobile/app/(design-system)/index.ts

@@ -0,0 +1,5 @@
+export * from './Text';
+export * from './Box';
+export * from './theme';
+export * from './Colors';
+export * from './Spacing';

frontend/mobile/app/(design-system)/theme.ts

@@ -0,0 +1,13 @@
+import { createTheme } from '@shopify/restyle';
+
+import { Colors } from './Colors';
+import { Spacing } from './Spacing';
+import { TextVariants } from './TextVariants';
+
+export const theme = createTheme({
+    colors: Colors,
+    spacing: Spacing,
+    textVariants: TextVariants
+});
+
+export type Theme = typeof theme;

frontend/mobile/app/_layout.tsx

@@ -9,9 +9,12 @@ import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar } from 'expo-status-bar';
 
 import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { ThemeProvider } from '@shopify/restyle';
 
 import { store } from '@/store/store';
 
+import { theme } from './(design-system)';
+
 export { ErrorBoundary } from 'expo-router';
 
 SplashScreen.preventAutoHideAsync();
@@ -52,8 +55,10 @@ const RootLayout = () => {
     return (
         <GestureHandlerRootView style={{ flex: 1 }}>
             <Provider store={store}>
-                <StatusBar style="light" />
-                <InitalLayout />
+                <ThemeProvider theme={theme}>
+                    <StatusBar style="light" />
+                    <InitalLayout />
+                </ThemeProvider>
             </Provider>
         </GestureHandlerRootView>
     );