Antoni Nuñez Romeu
121 lines
2.2 KiB
TypeScript
121 lines
2.2 KiB
TypeScript
export const colors = {
|
|
// Primary - pastel green pharmacy palette (matching PWA)
|
|
primary: '#7fbf8f',
|
|
primaryLight: '#cfead0',
|
|
primaryDark: '#09310a',
|
|
onPrimary: '#09310a',
|
|
primaryContainer: '#cfead0',
|
|
onPrimaryContainer: '#0d2b12',
|
|
|
|
// Secondary - soft blue
|
|
secondary: '#a3b8ff',
|
|
secondaryContainer: '#dbe7ff',
|
|
|
|
// Tertiary - soft lavender
|
|
tertiary: '#c9b3ff',
|
|
tertiaryContainer: '#efe7ff',
|
|
|
|
// Scan button - vivid blue (intentionally prominent)
|
|
scanButton: '#2b5bb5',
|
|
scanButtonShadow: 'rgba(43, 91, 181, 0.32)',
|
|
|
|
// Semantic
|
|
success: '#34C759',
|
|
danger: '#b91c1c',
|
|
dangerContainer: '#feecec',
|
|
warning: '#FF9500',
|
|
|
|
// Surface
|
|
background: '#fbfbfb',
|
|
card: '#ffffff',
|
|
surfaceLow: '#f2f4f5',
|
|
surface: '#eceeef',
|
|
surfaceHigh: '#e6e8e9',
|
|
border: '#c0c9bb',
|
|
separator: '#c0c9bb',
|
|
|
|
// Text
|
|
text: '#111417',
|
|
textSecondary: '#41493e',
|
|
textInverse: '#ffffff',
|
|
textLink: '#7fbf8f',
|
|
|
|
// Accent
|
|
accentWarm: '#f5a97a',
|
|
};
|
|
|
|
export const spacing = {
|
|
xs: 4,
|
|
sm: 8,
|
|
md: 16,
|
|
lg: 24,
|
|
xl: 32,
|
|
xxl: 48,
|
|
};
|
|
|
|
export const borderRadius = {
|
|
sm: 4,
|
|
md: 8,
|
|
lg: 12,
|
|
xl: 16,
|
|
full: 9999,
|
|
};
|
|
|
|
export const typography = {
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold' as const,
|
|
color: '#111417',
|
|
},
|
|
heading: {
|
|
fontSize: 20,
|
|
fontWeight: '600' as const,
|
|
color: '#111417',
|
|
},
|
|
body: {
|
|
fontSize: 16,
|
|
fontWeight: 'normal' as const,
|
|
color: '#111417',
|
|
},
|
|
bodyLarge: {
|
|
fontSize: 18,
|
|
fontWeight: '400' as const,
|
|
color: '#41493e',
|
|
lineHeight: 27,
|
|
},
|
|
caption: {
|
|
fontSize: 12,
|
|
fontWeight: 'normal' as const,
|
|
color: '#41493e',
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
fontWeight: '500' as const,
|
|
color: '#41493e',
|
|
},
|
|
};
|
|
|
|
export const shadows = {
|
|
soft: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.08,
|
|
shadowRadius: 20,
|
|
elevation: 3,
|
|
},
|
|
card: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 8,
|
|
elevation: 2,
|
|
},
|
|
scanButton: {
|
|
shadowColor: '#2b5bb5',
|
|
shadowOffset: { width: 0, height: 8 },
|
|
shadowOpacity: 0.32,
|
|
shadowRadius: 26,
|
|
elevation: 8,
|
|
},
|
|
};
|