Car-Repairs-Shop/THEME_STANDARD.md

🎨 Car Repair Shop - Theme Standardization

Color Palette Standard

Based on your app.css configuration where zinc maps to slate colors.

Primary Colors (Use ZINC everywhere)

• Backgrounds: bg-white dark:bg-zinc-800
• Cards/Containers: bg-white dark:bg-zinc-800 with border border-zinc-200 dark:border-zinc-700
• Secondary Backgrounds: bg-zinc-50 dark:bg-zinc-900
• Borders: border-zinc-200 dark:border-zinc-700

Typography

• Primary Text: text-zinc-900 dark:text-white
• Secondary Text: text-zinc-600 dark:text-zinc-400
• Muted Text: text-zinc-500 dark:text-zinc-500

Interactive Elements

• Accent: text-accent / bg-accent (indigo-500/300)
• Links: text-accent hover:text-accent-content
• Buttons: Use Flux components (flux:button)

Form Elements

• Inputs: Use Flux components (flux:input, flux:select)
• Focus States: Handled by Flux automatically

Table Elements

• Headers: bg-zinc-50 dark:bg-zinc-900
• Borders: divide-zinc-200 dark:divide-zinc-700
• Hover: hover:bg-zinc-50 dark:hover:bg-zinc-700

Status Colors (Keep these for badges)

• Success: bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
• Warning: bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
• Error: bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
• Info: bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200

Components to Standardize

1. Job Cards - Currently using gray colors
2. Work Orders - Currently using zinc (good)
3. Customers - Mixed gray/zinc colors
4. Service Orders - Using zinc (good)
5. Users - Recently updated to stone (needs zinc)
6. All other modules

Implementation Priority

1. Fix color inconsistencies (gray → zinc)
2. Standardize form components to use Flux
3. Ensure dark mode compatibility
4. Update status badges for consistency