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: '#FF5A5F',
|
|
accent: '#FFB6C1',
|
|
accentSoft: '#FFE5EC',
|
|
success: '#06D6A0',
|
|
warning: '#F5C542',
|
|
danger: '#E04848',
|
|
surface: '#ffffff',
|
|
muted: '#F4ECE8',
|
|
border: '#F2E4DA',
|
|
text: '#1F2937',
|
|
},
|
|
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: '#FFF8F5',
|
|
backgroundHover: '#FFF1EC',
|
|
backgroundPress: '#FFE7E0',
|
|
backgroundStrong: tokens.color.surface,
|
|
backgroundTransparent: 'rgba(255, 248, 245, 0)',
|
|
color: tokens.color.text,
|
|
colorHover: '#111827',
|
|
colorPress: '#0F172A',
|
|
colorFocus: '#0F172A',
|
|
borderColor: tokens.color.border,
|
|
borderColorHover: '#EAD5C9',
|
|
borderColorPress: '#E0C9BC',
|
|
shadowColor: 'rgba(31, 41, 55, 0.12)',
|
|
shadowColorPress: 'rgba(31, 41, 55, 0.16)',
|
|
shadowColorFocus: 'rgba(31, 41, 55, 0.18)',
|
|
surface: tokens.color.surface,
|
|
muted: tokens.color.muted,
|
|
blue3: tokens.color.accentSoft,
|
|
blue6: tokens.color.accent,
|
|
blue10: tokens.color.primary,
|
|
blue11: '#C2413B',
|
|
},
|
|
dark: {
|
|
...baseThemes.dark,
|
|
primary: tokens.color.primary,
|
|
accent: tokens.color.accent,
|
|
background: '#171219',
|
|
backgroundHover: '#1F1A23',
|
|
backgroundPress: '#26212B',
|
|
backgroundStrong: '#1F1A23',
|
|
backgroundTransparent: 'rgba(23, 18, 25, 0)',
|
|
color: '#F8F6F2',
|
|
colorHover: '#FFFFFF',
|
|
colorPress: '#FDF8F5',
|
|
colorFocus: '#FFFFFF',
|
|
borderColor: '#2C2531',
|
|
borderColorHover: '#3A3240',
|
|
borderColorPress: '#443C4A',
|
|
shadowColor: 'rgba(0, 0, 0, 0.55)',
|
|
shadowColorPress: 'rgba(0, 0, 0, 0.65)',
|
|
shadowColorFocus: 'rgba(0, 0, 0, 0.6)',
|
|
surface: '#1F1A23',
|
|
muted: '#241E28',
|
|
blue3: '#2B1D23',
|
|
blue6: '#5A2D34',
|
|
blue10: '#FF7A7F',
|
|
blue11: '#FFB3B6',
|
|
},
|
|
};
|
|
|
|
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: 'Manrope',
|
|
weight: sharedWeights,
|
|
},
|
|
display: {
|
|
...defaultConfig.fonts.heading,
|
|
family: 'Fraunces',
|
|
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 {}
|
|
}
|