veza/apps/web/docs/TAILWIND_INSTANCES_FULL_LIST.md

Complete List of Remaining Tailwind Default Color Instances

Generated: Automatically generated list Total Files: 17 Total Instances: 31 Status: Action 9.1.1.3 - In Progress (294 instances migrated, ~19.7% complete)

Usage

This document lists all remaining Tailwind default color instances organized by file path. Each entry includes:

• File path
• Line number
• Color classes found
• Full line context

Migration Guidelines

Refer to TAILWIND_COLORS_AUDIT.md for color mapping:

• text-gray-* → text-kodo-content-dim or text-kodo-text-main
• bg-gray-* → bg-kodo-graphite, bg-kodo-ink, bg-kodo-steel, etc.
• border-gray-* → border-kodo-steel
• text-blue-* → text-kodo-cyan (when appropriate)
• Other colors: Map to appropriate Kodo design system colors

Files with Tailwind Default Colors

---

apps/web/src/components/social/ExploreView.tsx

Total instances in file: 1

• Line 33: from-blue-

  //     { name: 'Ambient', color: 'from-blue-400 to-teal-500' },
  

---

apps/web/src/features/auth/components/EmailVerificationBadge.tsx

Total instances in file: 2

• Line 14: text-green-, bg-green-, text-green-

  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-kodo-lime/20 text-green-800 dark:bg-green-900 dark:text-green-200">
  

• Line 21: bg-yellow-, text-yellow-, bg-yellow-, text-yellow-

  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
  

---

apps/web/src/features/auth/components/PasswordStrengthIndicator.tsx

Total instances in file: 3

• Line 55: bg-orange-

  color = 'bg-orange-500';
  

• Line 58: bg-yellow-

  color = 'bg-yellow-500';
  

• Line 64: bg-green-

  color = 'bg-green-600';
  

---

apps/web/src/features/auth/pages/ForgotPasswordPage.tsx

Total instances in file: 1

• Line 102: bg-red-

  className="bg-red-50 border border-kodo-red text-kodo-red px-4 py-3 rounded"
  

---

apps/web/src/features/auth/pages/LoginPage.tsx

Total instances in file: 1

• Line 224: bg-red-

  className="bg-red-50 border border-kodo-red text-kodo-red px-4 py-3 rounded"
  

---

apps/web/src/features/auth/pages/RegisterPage.tsx

Total instances in file: 1

• Line 215: bg-red-

  className="bg-red-50 border border-kodo-red text-kodo-red px-4 py-3 rounded"
  

---

apps/web/src/features/auth/pages/ResetPasswordPage.tsx

Total instances in file: 1

• Line 124: bg-red-

  <div className="bg-red-50 border border-kodo-red text-kodo-red px-4 py-3 rounded">
  

---

apps/web/src/features/auth/pages/VerifyEmailPage.tsx

Total instances in file: 1

• Line 196: bg-red-

  className="bg-red-50 border border-kodo-red text-kodo-red px-4 py-3 rounded"
  

---

apps/web/src/features/dashboard/pages/DashboardPage.tsx

Total instances in file: 3

• Line 56: text-purple-

  color: 'text-purple-600',
  

• Line 114: bg-green-

  <div className="w-2 h-2 bg-green-600 rounded-full"></div>
  

• Line 123: bg-purple-

  <div className="w-2 h-2 bg-purple-600 rounded-full"></div>
  

---

apps/web/src/features/error/pages/ServerErrorPage.tsx

Total instances in file: 2

• Line 44: bg-red-, bg-red-

  <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900">
  

• Line 63: border-blue-

  <div className="bg-kodo-cyan/10 dark:bg-kodo-cyan/20 border border-kodo-cyan dark:border-blue-800 rounded-lg p-4">
  

---

apps/web/src/features/playlists/components/PlaylistBatchActions.tsx

Total instances in file: 1

• Line 200: border-blue-

  'p-4 bg-kodo-cyan/10 dark:bg-kodo-cyan/20 border border-kodo-cyan dark:border-blue-800 rounded-lg',
  

---

apps/web/src/features/streaming/components/PlaybackSummary.tsx

Total instances in file: 1

• Line 181: text-purple-

  <CheckCircle2 className="h-4 w-4 text-purple-600" />
  

---

apps/web/src/features/tracks/components/TrackHistory.tsx

Total instances in file: 3

• Line 129: bg-red-

  return 'text-kodo-red bg-red-50';
  

• Line 131: text-purple-, bg-purple-

  return 'text-purple-600 bg-purple-50';
  

• Line 133: text-orange-, bg-orange-

  return 'text-orange-600 bg-orange-50';
  

---

apps/web/src/features/tracks/components/TrackListEmpty.tsx

Total instances in file: 2

• Line 106: text-red-, text-red-

  ? 'text-red-900 dark:text-red-100'
  

• Line 117: text-red-

  ? 'text-kodo-red dark:text-red-300'
  

---

apps/web/src/features/tracks/components/UploadQuota.tsx

Total instances in file: 5

• Line 132: text-yellow-

  isQuotaNearLimit && !isQuotaExceeded && 'text-yellow-600',
  

• Line 142: bg-yellow-

  isQuotaNearLimit && !isQuotaExceeded && '[&>div]:bg-yellow-500',
  

• Line 163: text-yellow-

  isQuotaNearLimit && !isQuotaExceeded && 'text-yellow-600',
  

• Line 174: bg-yellow-

  isQuotaNearLimit && !isQuotaExceeded && '[&>div]:bg-yellow-500',
  

• Line 186: bg-yellow-, bg-yellow-, text-yellow-, text-yellow-

  <div className="flex items-start gap-2 p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-md text-xs text-yellow-800 dark:text-yellow-200">
  

---

apps/web/src/features/upload/components/UploadModal.tsx

Total instances in file: 1

• Line 426: text-green-

  <Alert className="bg-kodo-lime/10 border-kodo-lime text-green-800">
  

---

apps/web/src/features/user/components/ProfileForm.tsx

Total instances in file: 2

• Line 309: text-yellow-

  <AlertCircle className="h-5 w-5 text-yellow-600" />
  

• Line 607: text-pink-

  className="flex items-center gap-2 text-pink-500 hover:underline"
  

---