146 lines
3.4 KiB
TypeScript
146 lines
3.4 KiB
TypeScript
/**
|
|
* Theme configuration for Pottery Diary
|
|
* Modern, US-market optimized design with clear signaling colors
|
|
*/
|
|
|
|
export const colors = {
|
|
// Primary colors - Sage/Olive green from new palette
|
|
primary: '#8B9A7C', // Sage/Olive green
|
|
primaryLight: '#B0B1A5', // Lighter sage
|
|
primaryDark: '#7A7B70', // Darker sage
|
|
|
|
// Accent colors - Beige/Sand from new palette
|
|
accent: '#DECCA3', // Beige/Sand
|
|
accentLight: '#E8DCC0', // Lighter beige
|
|
accentDark: '#C9B78E', // Darker beige
|
|
|
|
// Backgrounds - Light cream theme
|
|
background: '#F8F6F0', // Main cream/off-white
|
|
backgroundSecondary: '#EEEEEE', // Light gray for cards
|
|
card: '#FFFFFF', // White cards
|
|
|
|
// Text - Dark on light backgrounds
|
|
text: '#3D352E', // Primary text (dark brown)
|
|
textSecondary: '#5A514B', // Secondary text
|
|
textTertiary: '#7A7570', // Dimmed text/icons
|
|
buttonText: '#FFFFFF', // White text for primary buttons
|
|
|
|
// Borders - Subtle on light backgrounds
|
|
border: '#DECCA3', // Beige border
|
|
borderLight: '#EEEEEE', // Light gray border
|
|
|
|
// Status colors
|
|
success: '#7A9B6B', // Soft green
|
|
successLight: '#A3C494', // Lighter green
|
|
warning: '#D4A574', // Warm amber
|
|
error: '#C5675C', // Soft red
|
|
info: '#9A9B8E', // Sage (same as primary)
|
|
|
|
// Step type colors - Adjusted for light backgrounds
|
|
forming: '#C89B7C', // Clay tone
|
|
trimming: '#9A9B8E', // Sage green
|
|
drying: '#DECCA3', // Beige/sand
|
|
bisqueFiring: '#D4A574', // Warm amber
|
|
glazing: '#A89B9B', // Mauve
|
|
glazeFiring: '#C5675C', // Terracotta
|
|
misc: '#7A7570', // Gray
|
|
};
|
|
|
|
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: 'hand-front-right',
|
|
trimming: 'content-cut',
|
|
drying: 'weather-windy',
|
|
bisque_firing: 'fire',
|
|
glazing: 'brush',
|
|
glaze_firing: 'lightning-bolt',
|
|
misc: 'notebook-outline',
|
|
};
|
|
|
|
export const stepTypeLabels: Record<string, string> = {
|
|
forming: 'Forming',
|
|
trimming: 'Trimming',
|
|
drying: 'Drying',
|
|
bisque_firing: 'Bisque Firing',
|
|
glazing: 'Glazing',
|
|
glaze_firing: 'Glaze Firing',
|
|
misc: 'Misc',
|
|
};
|