141 lines
3.5 KiB
TypeScript
141 lines
3.5 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: '#4F46E5', // Indigo 600
|
|
accent: '#F43F5E', // Rose 500
|
|
accentSoft: '#E0E7FF', // Indigo 100
|
|
success: '#10B981', // Emerald 500
|
|
warning: '#F59E0B', // Amber 500
|
|
danger: '#EF4444', // Red 500
|
|
surface: '#ffffff',
|
|
muted: '#F8FAFC', // Slate 50
|
|
border: '#E2E8F0', // Slate 200
|
|
text: '#0F172A', // Slate 900
|
|
},
|
|
radius: {
|
|
// ... existing radius tokens ...
|
|
card: 16,
|
|
tile: 14,
|
|
pill: 999,
|
|
},
|
|
// ...
|
|
};
|
|
|
|
const themes = {
|
|
...baseThemes,
|
|
light: {
|
|
...baseThemes.light,
|
|
primary: tokens.color.primary,
|
|
accent: tokens.color.accent,
|
|
background: '#F1F5F9', // Slate 100
|
|
backgroundHover: '#E2E8F0',
|
|
backgroundPress: '#CBD5E1',
|
|
backgroundStrong: tokens.color.surface,
|
|
backgroundTransparent: 'rgba(241, 245, 249, 0)',
|
|
color: tokens.color.text,
|
|
colorHover: '#1E293B',
|
|
colorPress: '#1E293B',
|
|
colorFocus: '#1E293B',
|
|
borderColor: tokens.color.border,
|
|
borderColorHover: '#CBD5E1',
|
|
borderColorPress: '#94A3B8',
|
|
shadowColor: 'rgba(15, 23, 42, 0.08)',
|
|
shadowColorPress: 'rgba(15, 23, 42, 0.12)',
|
|
shadowColorFocus: 'rgba(15, 23, 42, 0.12)',
|
|
surface: tokens.color.surface,
|
|
muted: tokens.color.muted,
|
|
blue3: tokens.color.accentSoft,
|
|
blue6: '#6366F1', // Indigo 500
|
|
blue10: tokens.color.primary,
|
|
blue11: '#4338CA', // Indigo 700
|
|
},
|
|
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: 'Playfair Display',
|
|
weight: sharedWeights,
|
|
},
|
|
display: {
|
|
...defaultConfig.fonts.heading,
|
|
family: 'Playfair Display',
|
|
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 {}
|
|
}
|