fertig

src/lib/theme/index.ts

@@ -4,46 +4,46 @@
  */
 
 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
+  // Primary colors - Sage/Olive green from new palette
+  primary: '#8B9A7C', // Sage/Olive green
+  primaryLight: '#B0B1A5', // Lighter sage
+  primaryDark: '#7A7B70', // Darker sage
 
-  // Accent colors - Green for status indicators
-  accent: '#537A2F', // Green accent
-  accentLight: '#6B9A3E', // Lighter green
-  accentDark: '#3F5D24', // Darker green
+  // Accent colors - Beige/Sand from new palette
+  accent: '#DECCA3', // Beige/Sand
+  accentLight: '#E8DCC0', // Lighter beige
+  accentDark: '#C9B78E', // Darker beige
 
-  // Backgrounds - Dark brown theme
-  background: '#3D352E', // Main dark brown
-  backgroundSecondary: '#4F4640', // Card/Surface warm brown
-  card: '#4F4640', // Same as backgroundSecondary
+  // Backgrounds - Light cream theme
+  background: '#F8F6F0', // Main cream/off-white
+  backgroundSecondary: '#EEEEEE', // Light gray for cards
+  card: '#FFFFFF', // White cards
 
-  // 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)
+  // 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 dark backgrounds
-  border: '#6B6460', // Slightly lighter than card for visibility
-  borderLight: '#5A514B', // Chip background color
+  // Borders - Subtle on light backgrounds
+  border: '#DECCA3', // Beige border
+  borderLight: '#EEEEEE', // Light gray border
 
   // 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
+  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 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
+  // 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 = {
@@ -125,13 +125,13 @@ export const stepTypeColors = {
 };
 
 export const stepTypeIcons: Record<string, string> = {
-  forming: '🏺',
-  trimming: '🔧',
-  drying: '☀️',
-  bisque_firing: '🔥',
-  glazing: '🎨',
-  glaze_firing: '⚡',
-  misc: '📝',
+  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> = {