106 lines
2.9 KiB
TypeScript
106 lines
2.9 KiB
TypeScript
/**
|
|
* Below are the colors that are used in the app. The colors are defined in the light and dark mode.
|
|
* There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
|
|
*/
|
|
|
|
import '@/global.css';
|
|
|
|
import { Platform } from 'react-native';
|
|
|
|
export const Colors = {
|
|
light: {
|
|
text: '#000000',
|
|
background: '#ffffff',
|
|
backgroundElement: '#F0F0F3',
|
|
backgroundSelected: '#E0E1E6',
|
|
textSecondary: '#60646C',
|
|
},
|
|
dark: {
|
|
text: '#ffffff',
|
|
background: '#000000',
|
|
backgroundElement: '#212225',
|
|
backgroundSelected: '#2E3135',
|
|
textSecondary: '#B0B4BA',
|
|
},
|
|
} as const;
|
|
|
|
export type ThemeColor = keyof typeof Colors.light & keyof typeof Colors.dark;
|
|
|
|
export const Fonts = Platform.select({
|
|
ios: {
|
|
/** iOS `UIFontDescriptorSystemDesignDefault` */
|
|
sans: 'system-ui',
|
|
/** iOS `UIFontDescriptorSystemDesignSerif` */
|
|
serif: 'ui-serif',
|
|
/** iOS `UIFontDescriptorSystemDesignRounded` */
|
|
rounded: 'ui-rounded',
|
|
/** iOS `UIFontDescriptorSystemDesignMonospaced` */
|
|
mono: 'ui-monospaced',
|
|
},
|
|
default: {
|
|
sans: 'normal',
|
|
serif: 'serif',
|
|
rounded: 'normal',
|
|
mono: 'monospace',
|
|
},
|
|
web: {
|
|
sans: 'var(--font-display)',
|
|
serif: 'var(--font-serif)',
|
|
rounded: 'var(--font-rounded)',
|
|
mono: 'var(--font-mono)',
|
|
},
|
|
});
|
|
|
|
export const Spacing = {
|
|
half: 2,
|
|
one: 4,
|
|
two: 8,
|
|
three: 16,
|
|
four: 24,
|
|
five: 32,
|
|
six: 64,
|
|
} as const;
|
|
|
|
export const BottomTabInset = Platform.select({ ios: 50, android: 80 }) ?? 0;
|
|
export const MaxContentWidth = 800;
|
|
|
|
/**
|
|
* Brand design tokens for the gumble onboarding / auth flow.
|
|
* These are dark-only and override the light/dark `Colors` scheme on the screens
|
|
* that use the gumble brand (login, onboarding, game selection, search).
|
|
*/
|
|
export const Brand = {
|
|
bg: '#141414',
|
|
surface: '#2c2c2c',
|
|
surfaceAlt: '#1a1a1a',
|
|
border: 'rgba(255,255,255,0.1)',
|
|
borderStrong: 'rgba(255,255,255,0.2)',
|
|
text: '#ffffff',
|
|
textMuted: 'rgba(255,255,255,0.6)',
|
|
textFaint: 'rgba(255,255,255,0.4)',
|
|
accent: '#e92eba',
|
|
accentSoft: 'rgba(233,46,186,0.12)',
|
|
accentLight: '#f3c',
|
|
inputBg: 'rgba(255,255,255,0.03)',
|
|
gradient: ['#f3c', '#e62eb8'] as const,
|
|
} as const;
|
|
|
|
/**
|
|
* Font family names loaded by `@expo-google-fonts/montserrat` and
|
|
* `@expo-google-fonts/poppins`. Use as `fontFamily: BrandFont.X`.
|
|
* These are the same names that the loader exposes as keys in its
|
|
* `useFonts({...})` map.
|
|
*/
|
|
export const BrandFont = {
|
|
// Poppins
|
|
poppinsRegular: 'Poppins_400Regular',
|
|
poppinsMedium: 'Poppins_500Medium',
|
|
poppinsSemiBold: 'Poppins_600SemiBold',
|
|
poppinsBold: 'Poppins_700Bold',
|
|
// Montserrat
|
|
montserratRegular: 'Montserrat_400Regular',
|
|
montserratMedium: 'Montserrat_500Medium',
|
|
montserratSemiBold: 'Montserrat_600SemiBold',
|
|
montserratBold: 'Montserrat_700Bold',
|
|
} as const;
|