50 lines
1.9 KiB
Markdown
50 lines
1.9 KiB
Markdown
# 🎨 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
|