98 lines
1.4 KiB
JavaScript
98 lines
1.4 KiB
JavaScript
export const colors = {
|
|
primary: '#007AFF',
|
|
secondary: '#5856D6',
|
|
success: '#34C759',
|
|
danger: '#FF3B30',
|
|
warning: '#FF9500',
|
|
info: '#5AC8FA',
|
|
background: '#FFFFFF',
|
|
text: '#000000',
|
|
textSecondary: '#8E8E93',
|
|
border: '#E5E5EA',
|
|
card: '#F2F2F7',
|
|
placeholder: '#C7C7CC',
|
|
disabled: '#D1D1D6',
|
|
overlay: 'rgba(0, 0, 0, 0.5)',
|
|
};
|
|
|
|
export const spacing = {
|
|
xs: 4,
|
|
sm: 8,
|
|
md: 16,
|
|
lg: 24,
|
|
xl: 32,
|
|
xxl: 40,
|
|
};
|
|
|
|
export const typography = {
|
|
h1: {
|
|
fontSize: 32,
|
|
fontWeight: 'bold',
|
|
},
|
|
h2: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
},
|
|
h3: {
|
|
fontSize: 20,
|
|
fontWeight: '600',
|
|
},
|
|
body: {
|
|
fontSize: 16,
|
|
},
|
|
caption: {
|
|
fontSize: 14,
|
|
color: colors.textSecondary,
|
|
},
|
|
};
|
|
|
|
export const shadows = {
|
|
small: {
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 2,
|
|
},
|
|
medium: {
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 4,
|
|
},
|
|
shadowOpacity: 0.30,
|
|
shadowRadius: 4.65,
|
|
elevation: 4,
|
|
},
|
|
large: {
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 6,
|
|
},
|
|
shadowOpacity: 0.37,
|
|
shadowRadius: 7.49,
|
|
elevation: 6,
|
|
},
|
|
};
|
|
|
|
export const borderRadius = {
|
|
sm: 4,
|
|
md: 8,
|
|
lg: 12,
|
|
xl: 16,
|
|
round: 999,
|
|
};
|
|
|
|
const theme = {
|
|
colors,
|
|
spacing,
|
|
typography,
|
|
shadows,
|
|
borderRadius,
|
|
};
|
|
|
|
export default theme;
|