144 lines
3.3 KiB
TypeScript
144 lines
3.3 KiB
TypeScript
import { defaultConfig } from '@tamagui/config/v4';
|
|
import { createTamagui } from '@tamagui/core';
|
|
import { shorthands } from '@tamagui/shorthands';
|
|
import { tokens as baseTokens, themes as baseThemes } from '@tamagui/themes';
|
|
import { createAnimations } from '@tamagui/animations-css';
|
|
|
|
const tokens = {
|
|
...baseTokens,
|
|
color: {
|
|
...baseTokens.color,
|
|
primary: '#FF5C5C',
|
|
accent: '#3D5AFE',
|
|
accentSoft: '#E8ECFF',
|
|
success: '#22C55E',
|
|
warning: '#FBBF24',
|
|
danger: '#EF4444',
|
|
surface: '#ffffff',
|
|
muted: '#FFF6F0',
|
|
border: '#F3D6C9',
|
|
text: '#0B132B',
|
|
},
|
|
radius: {
|
|
...baseTokens.radius,
|
|
card: 20,
|
|
tile: 14,
|
|
pill: 999,
|
|
},
|
|
size: {
|
|
...baseTokens.size,
|
|
card: 20,
|
|
},
|
|
};
|
|
|
|
const themes = {
|
|
...baseThemes,
|
|
light: {
|
|
...baseThemes.light,
|
|
primary: tokens.color.primary,
|
|
accent: tokens.color.accent,
|
|
background: '#FFF1E8',
|
|
backgroundHover: '#FFE8DD',
|
|
backgroundPress: '#FFE1D2',
|
|
backgroundStrong: tokens.color.surface,
|
|
backgroundTransparent: 'rgba(255, 241, 232, 0)',
|
|
color: tokens.color.text,
|
|
colorHover: '#091024',
|
|
colorPress: '#091024',
|
|
colorFocus: '#091024',
|
|
borderColor: tokens.color.border,
|
|
borderColorHover: '#EBCABA',
|
|
borderColorPress: '#E1BFAE',
|
|
shadowColor: 'rgba(11, 19, 43, 0.16)',
|
|
shadowColorPress: 'rgba(11, 19, 43, 0.2)',
|
|
shadowColorFocus: 'rgba(11, 19, 43, 0.24)',
|
|
surface: tokens.color.surface,
|
|
muted: tokens.color.muted,
|
|
blue3: tokens.color.accentSoft,
|
|
blue6: tokens.color.accent,
|
|
blue10: tokens.color.primary,
|
|
blue11: '#1E36F1',
|
|
},
|
|
dark: {
|
|
...baseThemes.dark,
|
|
primary: tokens.color.primary,
|
|
accent: tokens.color.accent,
|
|
background: '#0B132B',
|
|
backgroundHover: '#101A36',
|
|
backgroundPress: '#132142',
|
|
backgroundStrong: '#101A36',
|
|
backgroundTransparent: 'rgba(11, 19, 43, 0)',
|
|
color: '#F8FAFF',
|
|
colorHover: '#FFFFFF',
|
|
colorPress: '#F2F6FF',
|
|
colorFocus: '#FFFFFF',
|
|
borderColor: '#1F2A4A',
|
|
borderColorHover: '#29345A',
|
|
borderColorPress: '#313D67',
|
|
shadowColor: 'rgba(0, 0, 0, 0.55)',
|
|
shadowColorPress: 'rgba(0, 0, 0, 0.65)',
|
|
shadowColorFocus: 'rgba(0, 0, 0, 0.6)',
|
|
surface: '#0F1B36',
|
|
muted: '#121F3D',
|
|
blue3: '#1B2550',
|
|
blue6: '#3D5AFE',
|
|
blue10: '#FF5C5C',
|
|
blue11: '#FF8A8A',
|
|
},
|
|
};
|
|
|
|
const sharedWeights = {
|
|
4: '400',
|
|
5: '500',
|
|
6: '600',
|
|
7: '700',
|
|
8: '800',
|
|
9: '900',
|
|
};
|
|
|
|
const fonts = {
|
|
...defaultConfig.fonts,
|
|
body: {
|
|
...defaultConfig.fonts.body,
|
|
family: 'Manrope',
|
|
weight: sharedWeights,
|
|
},
|
|
heading: {
|
|
...defaultConfig.fonts.heading,
|
|
family: 'Archivo Black',
|
|
weight: sharedWeights,
|
|
},
|
|
display: {
|
|
...defaultConfig.fonts.heading,
|
|
family: 'Archivo Black',
|
|
weight: sharedWeights,
|
|
},
|
|
};
|
|
|
|
const config = createTamagui({
|
|
...defaultConfig,
|
|
animations: createAnimations({
|
|
fast: 'cubic-bezier(0.2, 0.7, 0.2, 1) 150ms',
|
|
medium: 'cubic-bezier(0.2, 0.7, 0.2, 1) 250ms',
|
|
slow: 'cubic-bezier(0.2, 0.7, 0.2, 1) 400ms',
|
|
}),
|
|
tokens,
|
|
themes,
|
|
fonts,
|
|
defaultFont: 'body',
|
|
shorthands,
|
|
media: {
|
|
...defaultConfig.media,
|
|
xs: { maxWidth: 660 },
|
|
sm: { maxWidth: 840 },
|
|
md: { maxWidth: 1024 },
|
|
},
|
|
});
|
|
|
|
export type AppConfig = typeof config;
|
|
export default config;
|
|
|
|
declare module '@tamagui/core' {
|
|
interface TamaguiCustomConfig extends AppConfig {}
|
|
}
|