# Tailwind Default Colors Audit Report

**Generated**: 2025-01-27  
**Purpose**: Identify all Tailwind default color classes used in the codebase for migration to Kodo design system colors  
**Action**: 9.1.1.2

## Executive Summary

- **Total Instances**: 1,492 Tailwind default color classes
- **Files Affected**: 235 files
- **Most Common**: `text-gray-*` (992 instances), `bg-gray-*` (146 instances), `border-gray-*` (107 instances)

## Color Distribution by Type

### Text Colors
- `text-gray-*`: 992 instances (66.5%)
- `text-red-*`: 55 instances (3.7%)
- `text-blue-*`: 36 instances (2.4%)
- `text-green-*`: 33 instances (2.2%)
- `text-yellow-*`: 13 instances (0.9%)
- `text-purple-*`: 3 instances (0.2%)
- `text-orange-*`: 3 instances (0.2%)
- `text-pink-*`: 1 instance (0.1%)

### Background Colors
- `bg-gray-*`: 146 instances (9.8%)
- `bg-blue-*`: 40 instances (2.7%)
- `bg-red-*`: 15 instances (1.0%)
- `bg-green-*`: 10 instances (0.7%)
- `bg-yellow-*`: 6 instances (0.4%)
- `bg-orange-*`: 4 instances (0.3%)
- `bg-purple-*`: 2 instances (0.1%)
- `bg-cyan-*`: 1 instance (0.1%)

### Border Colors
- `border-gray-*`: 107 instances (7.2%)
- `border-red-*`: 14 instances (0.9%)
- `border-blue-*`: 8 instances (0.5%)
- `border-orange-*`: 2 instances (0.1%)
- `border-green-*`: 1 instance (0.1%)

## Top 20 Most Used Color Classes

| Class | Count | Category | Kodo Replacement |
|-------|-------|----------|-------------------|
| `text-gray-400` | 496 | Text | `text-kodo-content-dim` |
| `text-gray-500` | 299 | Text | `text-kodo-content-dim` |
| `text-gray-300` | 127 | Text | `text-kodo-text-main` or `text-kodo-content-dim` |
| `bg-gray-700` | 60 | Background | `bg-kodo-steel` or `bg-kodo-slate` |
| `border-gray-600` | 42 | Border | `border-kodo-steel` |
| `text-gray-600` | 30 | Text | `text-kodo-content-dim` |
| `bg-gray-800` | 30 | Background | `bg-kodo-graphite` or `bg-kodo-ink` |
| `border-gray-700` | 28 | Border | `border-kodo-steel` |
| `text-gray-900` | 26 | Text | `text-kodo-text-main` |
| `text-red-500` | 23 | Text | `text-kodo-red` |
| `bg-gray-600` | 22 | Background | `bg-kodo-steel` |
| `border-gray-500` | 20 | Border | `border-kodo-steel` |
| `bg-blue-600` | 19 | Background | `bg-kodo-cyan` |
| `bg-gray-900` | 15 | Background | `bg-kodo-void` or `bg-kodo-ink` |
| `border-red-500` | 14 | Border | `border-kodo-red` |
| `text-red-400` | 13 | Text | `text-kodo-red` |
| `text-green-600` | 13 | Text | `text-kodo-lime` |
| `text-blue-600` | 13 | Text | `text-kodo-cyan` |
| `text-blue-400` | 12 | Text | `text-kodo-cyan` |
| `border-gray-300` | 8 | Border | `border-kodo-steel` |

## Files with Most Tailwind Default Colors

Top 20 files by usage:

1. `components/views/GearView.tsx` - 30+ instances
2. `components/views/AnalyticsView.tsx` - 20+ instances
3. `components/views/MarketplaceView.tsx` - 15+ instances
4. `components/views/FileDetailsView.tsx` - 15+ instances
5. `components/views/DiscoverView.tsx` - 15+ instances
6. `components/views/NotificationsView.tsx` - 10+ instances
7. `components/views/PurchasesView.tsx` - 10+ instances
8. `components/views/SettingsView.tsx` - 10+ instances
9. `components/views/SocialView.tsx` - 20+ instances
10. `components/views/LiveView.tsx` - 10+ instances
11. `components/feedback/Alert.tsx` - 10+ instances
12. `components/feedback/Toast.tsx` - 10+ instances
13. `components/forms/PasswordStrengthIndicator.tsx` - 15+ instances
14. `features/auth/components/AuthFormField.tsx` - 5+ instances
15. `features/auth/components/AuthButton.tsx` - 5+ instances
16. `features/auth/components/AuthInput.tsx` - 5+ instances
17. `components/ui/badge.test.tsx` - Test file (acceptable)
18. `components/ui/alert.test.tsx` - Test file (acceptable)
19. `components/feedback/Toast.test.tsx` - Test file (acceptable)
20. `components/feedback/Alert.test.tsx` - Test file (acceptable)

## Color Mapping Guide

### Gray Colors → Kodo Colors

| Tailwind | Usage | Kodo Replacement | Notes |
|----------|-------|-------------------|-------|
| `text-gray-100` | Very light text | `text-kodo-content-dim` | Muted text |
| `text-gray-200` | Light text | `text-kodo-content-dim` | Secondary text |
| `text-gray-300` | Medium-light text | `text-kodo-text-main` or `text-kodo-content-dim` | Body text or muted |
| `text-gray-400` | Muted text | `text-kodo-content-dim` | Most common - secondary text |
| `text-gray-500` | Medium muted | `text-kodo-content-dim` | Secondary text |
| `text-gray-600` | Dark muted | `text-kodo-content-dim` | Secondary text |
| `text-gray-700` | Dark text | `text-kodo-text-main` | Primary text |
| `text-gray-800` | Very dark text | `text-kodo-text-main` | Primary text |
| `text-gray-900` | Darkest text | `text-kodo-text-main` | Primary text |
| `bg-gray-100` | Very light bg | `bg-kodo-slate` or `bg-kodo-steel/30` | Light backgrounds |
| `bg-gray-200` | Light bg | `bg-kodo-slate` | Light backgrounds |
| `bg-gray-500` | Medium bg | `bg-kodo-steel` | Medium backgrounds |
| `bg-gray-600` | Dark bg | `bg-kodo-steel` | Dark backgrounds |
| `bg-gray-700` | Darker bg | `bg-kodo-steel` or `bg-kodo-slate` | Dark backgrounds |
| `bg-gray-800` | Very dark bg | `bg-kodo-graphite` or `bg-kodo-ink` | Very dark backgrounds |
| `bg-gray-900` | Darkest bg | `bg-kodo-void` or `bg-kodo-ink` | Darkest backgrounds |
| `border-gray-300` | Light border | `border-kodo-steel` | Light borders |
| `border-gray-400` | Medium border | `border-kodo-steel` | Medium borders |
| `border-gray-500` | Dark border | `border-kodo-steel` | Dark borders |
| `border-gray-600` | Darker border | `border-kodo-steel` | Darker borders |
| `border-gray-700` | Very dark border | `border-kodo-steel` | Very dark borders |
| `border-gray-800` | Darkest border | `border-kodo-steel` | Darkest borders |

### Blue Colors → Kodo Colors

| Tailwind | Usage | Kodo Replacement | Notes |
|----------|-------|-------------------|-------|
| `text-blue-200` | Light blue text | `text-kodo-cyan` | Accent text |
| `text-blue-400` | Medium blue text | `text-kodo-cyan` | Accent text |
| `text-blue-500` | Blue text | `text-kodo-cyan` | Primary accent |
| `text-blue-600` | Dark blue text | `text-kodo-cyan` | Primary accent |
| `bg-blue-500` | Blue background | `bg-kodo-cyan` | Primary accent bg |
| `bg-blue-600` | Dark blue background | `bg-kodo-cyan` | Primary accent bg |
| `bg-blue-900` | Very dark blue bg | `bg-kodo-cyan/10` or `bg-kodo-ink` | Subtle accent bg |
| `border-blue-500` | Blue border | `border-kodo-cyan` | Accent border |
| `border-blue-600` | Dark blue border | `border-kodo-cyan` | Accent border |

### Red Colors → Kodo Colors

| Tailwind | Usage | Kodo Replacement | Notes |
|----------|-------|-------------------|-------|
| `text-red-200` | Light red text | `text-kodo-red` | Error text |
| `text-red-300` | Medium red text | `text-kodo-red` | Error text |
| `text-red-400` | Red text | `text-kodo-red` | Error text |
| `text-red-500` | Dark red text | `text-kodo-red` | Error text |
| `text-red-600` | Darker red text | `text-kodo-red` | Error text |
| `text-red-700` | Very dark red text | `text-kodo-red` | Error text |
| `bg-red-500` | Red background | `bg-kodo-red` or `bg-kodo-red/10` | Error background |
| `bg-red-900` | Very dark red bg | `bg-kodo-red/10` | Subtle error bg |
| `border-red-500` | Red border | `border-kodo-red` | Error border |

### Green Colors → Kodo Colors

| Tailwind | Usage | Kodo Replacement | Notes |
|----------|-------|-------------------|-------|
| `text-green-200` | Light green text | `text-kodo-lime` | Success text |
| `text-green-400` | Green text | `text-kodo-lime` | Success text |
| `text-green-500` | Dark green text | `text-kodo-lime` | Success text |
| `text-green-600` | Darker green text | `text-kodo-lime` | Success text |
| `text-green-700` | Very dark green text | `text-kodo-lime` | Success text |
| `bg-green-500` | Green background | `bg-kodo-lime` or `bg-kodo-lime/10` | Success background |
| `border-green-*` | Green border | `border-kodo-lime` | Success border |

### Yellow Colors → Kodo Colors

| Tailwind | Usage | Kodo Replacement | Notes |
|----------|-------|-------------------|-------|
| `text-yellow-200` | Light yellow text | `text-kodo-gold` | Warning text |
| `text-yellow-600` | Yellow text | `text-kodo-gold` | Warning text |
| `bg-yellow-500` | Yellow background | `bg-kodo-gold` or `bg-kodo-gold/10` | Warning background |

### Other Colors

| Tailwind | Usage | Kodo Replacement | Notes |
|----------|-------|-------------------|-------|
| `text-purple-600` | Purple text | `text-kodo-magenta` | Secondary accent |
| `bg-purple-*` | Purple background | `bg-kodo-magenta` or `bg-kodo-magenta/10` | Secondary accent |
| `text-orange-600` | Orange text | `text-kodo-orange` | Tertiary accent |
| `bg-orange-*` | Orange background | `bg-kodo-orange` or `bg-kodo-orange/10` | Tertiary accent |
| `text-pink-*` | Pink text | `text-kodo-magenta` | Use magenta |
| `bg-cyan-*` | Cyan background | `bg-kodo-cyan` | Primary accent |

## Migration Priority

### High Priority (Most Common)
1. **Gray colors** (1,245 instances) - Replace with Kodo grays:
   - `text-gray-*` → `text-kodo-content-dim` or `text-kodo-text-main`
   - `bg-gray-*` → `bg-kodo-void`, `bg-kodo-ink`, `bg-kodo-graphite`, `bg-kodo-slate`, `bg-kodo-steel`
   - `border-gray-*` → `border-kodo-steel`

2. **Blue colors** (84 instances) - Replace with Kodo cyan:
   - `text-blue-*` → `text-kodo-cyan`
   - `bg-blue-*` → `bg-kodo-cyan`
   - `border-blue-*` → `border-kodo-cyan`

3. **Red colors** (72 instances) - Replace with Kodo red:
   - `text-red-*` → `text-kodo-red`
   - `bg-red-*` → `bg-kodo-red` or `bg-kodo-red/10`
   - `border-red-*` → `border-kodo-red`

### Medium Priority
4. **Green colors** (44 instances) - Replace with Kodo lime:
   - `text-green-*` → `text-kodo-lime`
   - `bg-green-*` → `bg-kodo-lime` or `bg-kodo-lime/10`
   - `border-green-*` → `border-kodo-lime`

5. **Yellow colors** (19 instances) - Replace with Kodo gold:
   - `text-yellow-*` → `text-kodo-gold`
   - `bg-yellow-*` → `bg-kodo-gold` or `bg-kodo-gold/10`

### Low Priority
6. **Other colors** (28 instances) - Replace with appropriate Kodo colors:
   - Purple → `kodo-magenta`
   - Orange → `kodo-orange`
   - Pink → `kodo-magenta`
   - Cyan → `kodo-cyan`

## Special Cases

### Test Files
Test files (`.test.tsx`, `.test.ts`) may use Tailwind default colors for testing purposes. These are acceptable and can be left as-is or migrated if desired.

**Test files found**:
- `components/ui/badge.test.tsx`
- `components/ui/alert.test.tsx`
- `components/feedback/Toast.test.tsx`
- `components/feedback/Alert.test.tsx`
- `features/auth/components/AuthInput.test.tsx`
- `features/auth/components/AuthButton.test.tsx`
- And others...

### Component Libraries
Some components may use Tailwind defaults for compatibility:
- `components/feedback/Alert.tsx` - Uses blue/green/yellow/red for semantic variants
- `components/feedback/Toast.tsx` - Uses blue/green/yellow/red for semantic variants
- `components/forms/PasswordStrengthIndicator.tsx` - Uses red/yellow/blue/green for strength levels

These should be migrated to use Kodo semantic colors.

## Recommendations

1. **Start with high-frequency colors**: Focus on `text-gray-400`, `text-gray-500`, `bg-gray-700`, `border-gray-600` first
2. **Migrate by component**: Work through files systematically, starting with the top 20 files
3. **Use opacity variants**: For subtle backgrounds, use opacity (e.g., `bg-kodo-red/10` instead of `bg-red-50`)
4. **Preserve semantic meaning**: 
   - Red → Error/Destructive → `kodo-red`
   - Green → Success → `kodo-lime`
   - Yellow → Warning → `kodo-gold`
   - Blue → Info/Primary → `kodo-cyan`
5. **Test visual changes**: After migration, verify visual appearance matches design intent

## Next Steps

1. **Action 9.1.1.3**: Replace Tailwind default colors with Kodo colors (this audit provides the mapping)
2. **Action 9.1.1.4**: Add ESLint rule to prevent future Tailwind default color usage

## Files Requiring Migration

See full list of 235 files in the codebase. Top priority files:
- `components/views/GearView.tsx`
- `components/views/AnalyticsView.tsx`
- `components/views/MarketplaceView.tsx`
- `components/views/FileDetailsView.tsx`
- `components/views/DiscoverView.tsx`
- `components/views/SocialView.tsx`
- `components/feedback/Alert.tsx`
- `components/feedback/Toast.tsx`
- `components/forms/PasswordStrengthIndicator.tsx`
- And 226 more files...

---

**Note**: This audit excludes test files (`.test.tsx`, `.test.ts`) from the migration count, but they are listed for reference.
