starting to build out jellify theme

App.tsx

@@ -4,12 +4,10 @@ import "react-native-url-polyfill/auto";
 
 import Jellify from './components/jellify';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { createTamagui, TamaguiProvider, Theme } from 'tamagui';
+import { TamaguiProvider, Theme } from 'tamagui';
 import { ToastProvider } from '@tamagui/toast'
-import defaultConfig from '@tamagui/config/v3';
 import { useColorScheme } from 'react-native';
-
-const config = createTamagui(defaultConfig);
+import jellifyConfig from './tamagui.config';
 
 export default function App(): React.JSX.Element {
   
@@ -19,7 +17,7 @@ export default function App(): React.JSX.Element {
   
   return (
     <QueryClientProvider client={queryClient}>
-      <TamaguiProvider config={config}>
+      <TamaguiProvider config={jellifyConfig}>
         <Theme name={isDarkMode ? 'dark' : 'light'}>
           <ToastProvider
             swipeDirection='down'

components/Login/helpers/server-library.tsx

@@ -1,8 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useApiClientContext } from "../../jellyfin-api-provider";
-import { RadioGroup, Text, ToggleGroup, View, YStack } from "tamagui";
-import { JellifyLibrary } from "../../../types/JellifyLibrary";
+import { Text, ToggleGroup, View } from "tamagui";
 import { useAuthenticationContext } from "../provider";
 import { Heading, Label } from "../../helpers/text";
 import Button from "../../helpers/button";
@@ -11,8 +10,6 @@ import { Api } from "@jellyfin/sdk";
 import { fetchMusicLibraries, fetchPlaylistLibrary } from "../../../api/libraries";
 import { QueryKeys } from "../../../enums/query-keys";
 import { ActivityIndicator } from "react-native";
-import { RadioGroupItemWithLabel } from "../../helpers/radio-group-item-with-label";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 
 export default function ServerLibrary(): React.JSX.Element {
 

components/helpers/text.tsx

@@ -28,6 +28,6 @@ export function Label(props: LabelProps): React.JSX.Element {
 
 export function Heading({ children }: { children: string }): React.JSX.Element {
     return (
-        <H1 marginVertical={30} style={styles.heading}>{ children }</H1>
+        <H1 marginVertical={30} fontWeight={900}>{ children }</H1>
     )
 }

tamagui.config.ts

@@ -0,0 +1,44 @@
+import { animations, tokens, themes, media, shorthands } from '@tamagui/config/v3'
+import { createFont, createTamagui } from 'tamagui' // or '@tamagui/core'
+
+const jellifyFont = createFont({
+    family: 'Aileron-Regular, Helvetica, Arial, sans-serif',
+    size: {
+        1: 12,
+        2: 14,
+        3: 15,
+    },
+    face: {
+        100: { normal: 'Aileron-UltraLight', italic: 'Aileron-UltraLightItalic' },
+        200: { normal: 'Aileron-Thin', italic: 'Aileron-ThinItalic' },
+        300: { normal: 'Aileron-Light', italic: 'Aileron-LightItalic' },
+        400: { normal: 'Aileron-Regular', italic: 'Aileron-Italic'} ,
+        500: { normal: 'Aileron-Regular', italic: 'Aileron-Italic' },
+        600: { normal: 'Aileron-SemiBold', italic: 'Aileron-SemiBoldItalic' },
+        700: { normal: 'Aileron-Bold', italic: 'Aileron-BoldItalic' },
+        800: { normal: 'Aileron-Heavy', italic: 'Aileron-HeavyItalic' },
+        900: { normal: 'Aileron-Black', italic: 'Aileron-BlackItalic' },
+    }
+})
+const jellifyConfig = createTamagui({
+    animations,
+    fonts:{
+        heading: jellifyFont,
+        body: jellifyFont,
+    },
+    media,
+    shorthands,
+    tokens,
+    themes,
+})
+
+export type JellifyConfig = typeof jellifyConfig
+
+declare module 'tamagui' {
+  // or '@tamagui/core'
+  // overrides TamaguiCustomConfig so your custom types
+  // work everywhere you import `tamagui`
+  interface TamaguiCustomConfig extends JellifyConfig {}
+}
+
+export default jellifyConfig