146 lines
3.6 KiB
TypeScript
146 lines
3.6 KiB
TypeScript
/**
|
|
* Theme configuration for Pottery Diary
|
|
* Modern, US-market optimized design with clear signaling colors
|
|
*/
|
|
|
|
export const colors = {
|
|
// Primary colors - Coral/Orange for buttons and accents
|
|
primary: '#E07A5F', // Coral/Orange accent
|
|
primaryLight: '#BF6B50', // Darker coral for cards/active states
|
|
primaryDark: '#C56548', // Darker coral for active states
|
|
|
|
// Accent colors - Green for status indicators
|
|
accent: '#537A2F', // Green accent
|
|
accentLight: '#6B9A3E', // Lighter green
|
|
accentDark: '#3F5D24', // Darker green
|
|
|
|
// Backgrounds - Dark brown theme
|
|
background: '#3D352E', // Main dark brown
|
|
backgroundSecondary: '#4F4640', // Card/Surface warm brown
|
|
card: '#4F4640', // Same as backgroundSecondary
|
|
|
|
// Text - Light on dark
|
|
text: '#D2CCC5', // Primary text (light warm)
|
|
textSecondary: '#BFC0C1', // Secondary text
|
|
textTertiary: '#959693', // Dimmed text/icons
|
|
buttonText: '#FFFFFF', // White text for primary buttons (better contrast)
|
|
|
|
// Borders - Subtle on dark backgrounds
|
|
border: '#6B6460', // Slightly lighter than card for visibility
|
|
borderLight: '#5A514B', // Chip background color
|
|
|
|
// Status colors
|
|
success: '#537A2F', // Green accent (same as accent)
|
|
successLight: '#6B9A3E', // Lighter green background
|
|
warning: '#E07A5F', // Use coral for warnings on dark bg
|
|
error: '#DC2626', // Keep red for errors (good contrast)
|
|
info: '#E07A5F', // Use coral for info
|
|
|
|
// Step type colors - Adjusted for dark backgrounds
|
|
forming: '#C89B7C', // Lighter clay tone
|
|
trimming: '#A89080', // Neutral tan
|
|
drying: '#D9C5A0', // Lighter sand
|
|
bisqueFiring: '#D67B59', // Coral variant
|
|
glazing: '#9B8B9B', // Lighter mauve
|
|
glazeFiring: '#E07A5F', // Coral (same as primary)
|
|
misc: '#959693', // Same as textTertiary
|
|
};
|
|
|
|
export const spacing = {
|
|
xs: 4,
|
|
sm: 8,
|
|
md: 16,
|
|
lg: 24,
|
|
xl: 32,
|
|
xxl: 48,
|
|
};
|
|
|
|
export const typography = {
|
|
fontSize: {
|
|
xs: 12,
|
|
sm: 14,
|
|
md: 16,
|
|
lg: 20, // Slightly larger for retro feel
|
|
xl: 28, // Bigger, bolder headers
|
|
xxl: 36,
|
|
},
|
|
fontWeight: {
|
|
regular: '400' as const,
|
|
medium: '500' as const,
|
|
semiBold: '600' as const,
|
|
bold: '800' as const, // Bolder for retro headings
|
|
},
|
|
// Retro-style letter spacing
|
|
letterSpacing: {
|
|
tight: -0.5,
|
|
normal: 0,
|
|
wide: 0.5,
|
|
wider: 1,
|
|
},
|
|
};
|
|
|
|
export const borderRadius = {
|
|
sm: 6,
|
|
md: 12, // More rounded for retro feel
|
|
lg: 16,
|
|
xl: 24,
|
|
full: 9999,
|
|
};
|
|
|
|
export const shadows = {
|
|
sm: {
|
|
shadowColor: '#000000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3,
|
|
elevation: 2,
|
|
},
|
|
md: {
|
|
shadowColor: '#000000',
|
|
shadowOffset: { width: 0, height: 3 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 6,
|
|
elevation: 4,
|
|
},
|
|
lg: {
|
|
shadowColor: '#000000',
|
|
shadowOffset: { width: 0, height: 5 },
|
|
shadowOpacity: 0.4,
|
|
shadowRadius: 10,
|
|
elevation: 6,
|
|
},
|
|
};
|
|
|
|
// Minimum tappable size for accessibility
|
|
export const MIN_TAP_SIZE = 44;
|
|
|
|
export const stepTypeColors = {
|
|
forming: colors.forming,
|
|
trimming: colors.trimming,
|
|
drying: colors.drying,
|
|
bisque_firing: colors.bisqueFiring,
|
|
glazing: colors.glazing,
|
|
glaze_firing: colors.glazeFiring,
|
|
misc: colors.misc,
|
|
};
|
|
|
|
export const stepTypeIcons: Record<string, string> = {
|
|
forming: '🏺',
|
|
trimming: '🔧',
|
|
drying: '☀️',
|
|
bisque_firing: '🔥',
|
|
glazing: '🎨',
|
|
glaze_firing: '⚡',
|
|
misc: '📝',
|
|
};
|
|
|
|
export const stepTypeLabels: Record<string, string> = {
|
|
forming: 'Forming',
|
|
trimming: 'Trimming',
|
|
drying: 'Drying',
|
|
bisque_firing: 'Bisque Firing',
|
|
glazing: 'Glazing',
|
|
glaze_firing: 'Glaze Firing',
|
|
misc: 'Misc',
|
|
};
|