This commit is contained in:
Violet Caulfield
2024-11-23 20:41:28 -06:00
parent 50726309d2
commit 95fed075fe
4 changed files with 51 additions and 35 deletions

12
colors.config.ts Normal file
View File

@@ -0,0 +1,12 @@
import { config } from "@tamagui/config/v3";
import { createTokens } from "tamagui";
import { Colors } from "./enums/colors";
export const jellifyTokens = createTokens({
...config.tokens,
color: {
primary: Colors.Primary,
secondary: Colors.Secondary
}
})

View File

@@ -4,7 +4,7 @@ import { useMutation } from "@tanstack/react-query";
import { MMKVStorageKeys } from "../../../enums/mmkv-storage-keys";
import { JellifyServer } from "../../../types/JellifyServer";
import { useApiClientContext } from "../../jellyfin-api-provider";
import { Spacer, View, XStack } from "tamagui";
import { getTokens, Spacer, View, XStack } from "tamagui";
import { SwitchWithLabel } from "../../helpers/switch-with-label";
import { Heading } from "../../helpers/text";
import Input from "../../helpers/input";
@@ -68,7 +68,7 @@ export default function ServerAddress(): React.JSX.Element {
label="Use HTTPS"
size="$2"
width={100}
backgroundColor="$pink1"
backgroundColor={"$pink6"}
/>

32
fonts.config.ts Normal file
View File

@@ -0,0 +1,32 @@
import { config } from "@tamagui/config/v3";
import { createFont } from "tamagui";
const aileronFace = {
100: { normal: 'Aileron-UltraLight', italic: 'Aileron UltraLight Italic' },
200: { normal: 'Aileron-Thin', italic: 'Aileron Thin Italic' },
300: { normal: 'Aileron-Light', italic: 'Aileron Light Italic' },
400: { normal: 'Aileron-Regular', italic: 'Aileron Italic'} ,
500: { normal: 'Aileron-Regular', italic: 'Aileron Italic' },
600: { normal: 'Aileron-SemiBold', italic: 'Aileron SemiBold Italic' },
700: { normal: 'Aileron-Bold', italic: 'Aileron Bold Italic' },
800: { normal: 'Aileron-Heavy', italic: 'Aileron Heavy Italic' },
900: { normal: 'Aileron-Black', italic: 'Aileron-BlackItalic' }
};
export const bodyFont = createFont({
family: "Aileron-Bold",
size: config.fonts.body.size,
lineHeight: config.fonts.body.lineHeight,
weight: config.fonts.body.weight,
letterSpacing: config.fonts.body.letterSpacing,
face: aileronFace
})
export const headingFont = createFont({
family: "Aileron-Black",
size: config.fonts.heading.size,
lineHeight: config.fonts.heading.lineHeight,
weight: config.fonts.heading.weight,
letterSpacing: config.fonts.heading.letterSpacing,
face: aileronFace
})

View File

@@ -1,35 +1,7 @@
import { animations, tokens, themes, media, shorthands, config } from '@tamagui/config/v3'
import { createFont, createTamagui } from 'tamagui' // or '@tamagui/core'
const aileronFace = {
100: { normal: 'Aileron-UltraLight', italic: 'Aileron UltraLight Italic' },
200: { normal: 'Aileron-Thin', italic: 'Aileron Thin Italic' },
300: { normal: 'Aileron-Light', italic: 'Aileron Light Italic' },
400: { normal: 'Aileron-Regular', italic: 'Aileron Italic'} ,
500: { normal: 'Aileron-Regular', italic: 'Aileron Italic' },
600: { normal: 'Aileron-SemiBold', italic: 'Aileron SemiBold Italic' },
700: { normal: 'Aileron-Bold', italic: 'Aileron Bold Italic' },
800: { normal: 'Aileron-Heavy', italic: 'Aileron Heavy Italic' },
900: { normal: 'Aileron-Black', italic: 'Aileron-BlackItalic' }
};
const bodyFont = createFont({
family: "Aileron-Bold",
size: config.fonts.body.size,
lineHeight: config.fonts.body.lineHeight,
weight: config.fonts.body.weight,
letterSpacing: config.fonts.body.letterSpacing,
face: aileronFace
})
const headingFont = createFont({
family: "Aileron-Black",
size: config.fonts.heading.size,
lineHeight: config.fonts.heading.lineHeight,
weight: config.fonts.heading.weight,
letterSpacing: config.fonts.heading.letterSpacing,
face: aileronFace
})
import { animations, tokens, themes, media, shorthands } from '@tamagui/config/v3'
import { createTamagui } from 'tamagui' // or '@tamagui/core'
import { headingFont, bodyFont } from './fonts.config'
import { jellifyTokens } from './colors.config'
const jellifyConfig = createTamagui({
animations,
@@ -39,7 +11,7 @@ const jellifyConfig = createTamagui({
},
media,
shorthands,
tokens,
jellifyTokens,
themes,
})