Farb palette

src/lib/theme/index.ts

@@ -1,42 +1,49 @@
 /**
  * Theme configuration for Pottery Diary
- * Retro, vintage-inspired design with warm earth tones
+ * Modern, US-market optimized design with clear signaling colors
  */
 
 export const colors = {
-  // Primary colors - warm vintage terracotta
-  primary: '#C17855', // Warm terracotta/clay
-  primaryLight: '#D4956F',
-  primaryDark: '#A5643E',
+  // 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
 
-  // Backgrounds - vintage paper tones
-  background: '#F5EDE4', // Warm cream/aged paper
-  backgroundSecondary: '#EBE0D5', // Darker vintage beige
-  card: '#FAF6F1', // Soft off-white card
+  // Accent colors - Green for status indicators
+  accent: '#537A2F', // Green accent
+  accentLight: '#6B9A3E', // Lighter green
+  accentDark: '#3F5D24', // Darker green
 
-  // Text - warm vintage ink colors
-  text: '#3E2A1F', // Dark brown instead of black
-  textSecondary: '#8B7355', // Warm mid-brown
-  textTertiary: '#B59A7F', // Light warm brown
+  // Backgrounds - Dark brown theme
+  background: '#3D352E', // Main dark brown
+  backgroundSecondary: '#4F4640', // Card/Surface warm brown
+  card: '#4F4640', // Same as backgroundSecondary
 
-  // Borders - subtle warm tones
-  border: '#D4C4B0',
-  borderLight: '#E5D9C9',
+  // 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)
 
-  // Status colors - muted retro palette
-  success: '#6B8E4E', // Muted olive green
-  warning: '#D4894F', // Warm amber
-  error: '#B85C50', // Muted terracotta red
-  info: '#5B8A9F', // Muted teal
+  // Borders - Subtle on dark backgrounds
+  border: '#6B6460', // Slightly lighter than card for visibility
+  borderLight: '#5A514B', // Chip background color
 
-  // Step type colors (icons) - vintage pottery palette
-  forming: '#8B5A3C', // Rich clay brown
-  trimming: '#A67C52', // Warm tan/tool color
-  drying: '#D4A05B', // Warm sand
-  bisqueFiring: '#C75B3F', // Burnt orange
-  glazing: '#7B5E7B', // Muted purple/mauve
-  glazeFiring: '#D86F4D', // Warm coral
-  misc: '#6B7B7B', // Vintage grey-blue
+  // 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 = {
@@ -82,23 +89,23 @@ export const borderRadius = {
 
 export const shadows = {
   sm: {
-    shadowColor: '#3E2A1F',
+    shadowColor: '#000000',
     shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.08,
+    shadowOpacity: 0.25,
     shadowRadius: 3,
     elevation: 2,
   },
   md: {
-    shadowColor: '#3E2A1F',
+    shadowColor: '#000000',
     shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.12,
+    shadowOpacity: 0.3,
     shadowRadius: 6,
     elevation: 4,
   },
   lg: {
-    shadowColor: '#3E2A1F',
+    shadowColor: '#000000',
     shadowOffset: { width: 0, height: 5 },
-    shadowOpacity: 0.15,
+    shadowOpacity: 0.4,
     shadowRadius: 10,
     elevation: 6,
   },