From c927ad900d00d733353eb2cbb57799d492848e1b Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Sat, 23 Nov 2024 11:24:46 -0600
Subject: [PATCH] starting to build out jellify theme

---
 App.tsx                                     |  8 ++--
 components/Login/helpers/server-library.tsx |  7 +---
 components/helpers/text.tsx                 |  2 +-
 tamagui.config.ts                           | 44 +++++++++++++++++++++
 4 files changed, 50 insertions(+), 11 deletions(-)
 create mode 100644 tamagui.config.ts

diff --git a/App.tsx b/App.tsx
index a736f2f2..6e898e62 100644
--- a/App.tsx
+++ b/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'
diff --git a/components/Login/helpers/server-library.tsx b/components/Login/helpers/server-library.tsx
index 77f2d9e1..f3c952ec 100644
--- a/components/Login/helpers/server-library.tsx
+++ b/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 {
 
diff --git a/components/helpers/text.tsx b/components/helpers/text.tsx
index 2c3782e1..85177758 100644
--- a/components/helpers/text.tsx
+++ b/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>
     )
 }
\ No newline at end of file
diff --git a/tamagui.config.ts b/tamagui.config.ts
new file mode 100644
index 00000000..c7f45c0f
--- /dev/null
+++ b/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
\ No newline at end of file