From f4e2dd45d42c101d9d0fbbe04c9ed7a2cdf4a0b7 Mon Sep 17 00:00:00 2001
From: senke <okin.tcs@gmail.com>
Date: Fri, 16 Jan 2026 01:56:37 +0100
Subject: [PATCH] consistency: auto-migrate Tailwind default colors (Batch 5,
 50 instances)

---
 apps/web/src/components/ui/FormField.tsx      | 26 +++++++++----------
 apps/web/src/components/ui/ImageCropper.tsx   | 12 ++++-----
 apps/web/src/components/ui/LoadingState.tsx   | 12 ++++-----
 apps/web/src/components/ui/Toast.tsx          |  2 +-
 apps/web/src/components/ui/avatar.tsx         |  4 +--
 apps/web/src/components/ui/checkbox.tsx       |  2 +-
 .../src/components/ui/confirmation-dialog.tsx |  2 +-
 apps/web/src/components/ui/dialog.tsx         |  2 +-
 apps/web/src/components/ui/dropdown-menu.tsx  | 10 +++----
 9 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/apps/web/src/components/ui/FormField.tsx b/apps/web/src/components/ui/FormField.tsx
index 560479398..ff8bb936c 100644
--- a/apps/web/src/components/ui/FormField.tsx
+++ b/apps/web/src/components/ui/FormField.tsx
@@ -112,16 +112,16 @@ export const FormField: React.FC<FormFieldProps> = ({
 }) => {
   return (
     <div className={cn('space-y-2', className)}>
-      <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+      <label className="text-sm font-medium text-kodo-text-main dark:text-kodo-text-main">
         {label}
-        {required && <span className="text-red-500 ml-1">*</span>}
+        {required && <span className="text-kodo-red ml-1">*</span>}
       </label>
       {children}
       {helpText && !error && (
-        <p className="text-xs text-gray-500 dark:text-gray-400">{helpText}</p>
+        <p className="text-xs text-kodo-content-dim dark:text-kodo-content-dim">{helpText}</p>
       )}
       {error && (
-        <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
+        <p className="text-xs text-kodo-red dark:text-kodo-red">{error}</p>
       )}
     </div>
   );
@@ -141,10 +141,10 @@ export const Input: React.FC<InputProps> = ({
       className={cn(
         'w-full px-3 py-2 border rounded-md shadow-sm transition-colors',
         'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
-        'dark:bg-gray-800 dark:border-gray-600 dark:text-white',
+        'dark:bg-kodo-graphite dark:border-kodo-steel dark:text-white',
         error
-          ? 'border-red-500 focus:ring-red-500'
-          : 'border-gray-300 dark:border-gray-600',
+          ? 'border-kodo-red focus:ring-red-500'
+          : 'border-kodo-steel dark:border-kodo-steel',
         className,
       )}
       {...props}
@@ -167,10 +167,10 @@ export const Textarea: React.FC<TextareaProps> = ({
       className={cn(
         'w-full px-3 py-2 border rounded-md shadow-sm transition-colors resize-none',
         'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
-        'dark:bg-gray-800 dark:border-gray-600 dark:text-white',
+        'dark:bg-kodo-graphite dark:border-kodo-steel dark:text-white',
         error
-          ? 'border-red-500 focus:ring-red-500'
-          : 'border-gray-300 dark:border-gray-600',
+          ? 'border-kodo-red focus:ring-red-500'
+          : 'border-kodo-steel dark:border-kodo-steel',
         className,
       )}
       {...props}
@@ -194,10 +194,10 @@ export const Select: React.FC<SelectProps> = ({
       className={cn(
         'w-full px-3 py-2 border rounded-md shadow-sm transition-colors',
         'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
-        'dark:bg-gray-800 dark:border-gray-600 dark:text-white',
+        'dark:bg-kodo-graphite dark:border-kodo-steel dark:text-white',
         error
-          ? 'border-red-500 focus:ring-red-500'
-          : 'border-gray-300 dark:border-gray-600',
+          ? 'border-kodo-red focus:ring-red-500'
+          : 'border-kodo-steel dark:border-kodo-steel',
         className,
       )}
       {...props}
diff --git a/apps/web/src/components/ui/ImageCropper.tsx b/apps/web/src/components/ui/ImageCropper.tsx
index 290a8b0c2..0973ea801 100644
--- a/apps/web/src/components/ui/ImageCropper.tsx
+++ b/apps/web/src/components/ui/ImageCropper.tsx
@@ -4,7 +4,7 @@ import React, { useState, useCallback, lazy, Suspense } from 'react';
 const Cropper = lazy(() =>
   Promise.resolve({
     default: (_props: any) => (
-      <div className="bg-gray-800 flex items-center justify-center h-full text-white">
+      <div className="bg-kodo-graphite flex items-center justify-center h-full text-white">
         Cropper Mock
       </div>
     ),
@@ -135,7 +135,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
           <h3 className="font-bold text-white flex items-center gap-2">
             Edit Image
           </h3>
-          <button onClick={onCancel} className="text-gray-400 hover:text-white">
+          <button onClick={onCancel} className="text-kodo-content-dim hover:text-white">
             <X className="w-5 h-5" />
           </button>
         </div>
@@ -167,8 +167,8 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
         {/* Controls */}
         <div className="p-6 bg-kodo-ink border-t border-kodo-steel space-y-4">
           <div className="flex items-center gap-4">
-            <span className="text-xs text-gray-400 w-16">Zoom</span>
-            <ZoomIn className="w-4 h-4 text-gray-500" />
+            <span className="text-xs text-kodo-content-dim w-16">Zoom</span>
+            <ZoomIn className="w-4 h-4 text-kodo-content-dim" />
             <input
               type="range"
               value={zoom}
@@ -182,8 +182,8 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
           </div>
 
           <div className="flex items-center gap-4">
-            <span className="text-xs text-gray-400 w-16">Rotate</span>
-            <RotateCw className="w-4 h-4 text-gray-500" />
+            <span className="text-xs text-kodo-content-dim w-16">Rotate</span>
+            <RotateCw className="w-4 h-4 text-kodo-content-dim" />
             <input
               type="range"
               value={rotation}
diff --git a/apps/web/src/components/ui/LoadingState.tsx b/apps/web/src/components/ui/LoadingState.tsx
index 4c88c0efa..94c4076e9 100644
--- a/apps/web/src/components/ui/LoadingState.tsx
+++ b/apps/web/src/components/ui/LoadingState.tsx
@@ -120,11 +120,11 @@ export function LoadingState({
     return (
       <div className={cn('flex items-center gap-2', className)}>
         <Loader2
-          className={cn('animate-spin text-gray-400', sizeClasses[size])}
+          className={cn('animate-spin text-kodo-content-dim', sizeClasses[size])}
           aria-hidden="true"
         />
         {displayText && (
-          <span className="text-sm text-gray-600 dark:text-gray-400">
+          <span className="text-sm text-kodo-content-dim dark:text-kodo-content-dim">
             {displayText}
           </span>
         )}
@@ -138,9 +138,9 @@ export function LoadingState({
       <div className={cn('animate-pulse space-y-4', className)}>
         {children || (
           <>
-            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
-            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
-            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
+            <div className="h-4 bg-kodo-slate dark:bg-kodo-steel rounded w-3/4"></div>
+            <div className="h-4 bg-kodo-slate dark:bg-kodo-steel rounded w-1/2"></div>
+            <div className="h-4 bg-kodo-slate dark:bg-kodo-steel rounded w-5/6"></div>
           </>
         )}
       </div>
@@ -156,7 +156,7 @@ export function LoadingState({
 
   return (
     <Loader2
-      className={cn('animate-spin text-gray-400', sizeClasses[size], className)}
+      className={cn('animate-spin text-kodo-content-dim', sizeClasses[size], className)}
       aria-label={displayText}
       role="status"
     />
diff --git a/apps/web/src/components/ui/Toast.tsx b/apps/web/src/components/ui/Toast.tsx
index 285958fc6..659ecf2d6 100644
--- a/apps/web/src/components/ui/Toast.tsx
+++ b/apps/web/src/components/ui/Toast.tsx
@@ -100,7 +100,7 @@ export const Toast: React.FC<ToastProps> = ({ id, type, message, onClose }) => {
       <p className="flex-1 text-sm font-medium">{message}</p>
       <button
         onClick={() => onClose(id)}
-        className="text-gray-400 hover:text-white transition-colors"
+        className="text-kodo-content-dim hover:text-white transition-colors"
       >
         <X className="w-4 h-4" />
       </button>
diff --git a/apps/web/src/components/ui/avatar.tsx b/apps/web/src/components/ui/avatar.tsx
index d70331463..336005045 100644
--- a/apps/web/src/components/ui/avatar.tsx
+++ b/apps/web/src/components/ui/avatar.tsx
@@ -114,7 +114,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
 
     const statusColors = {
       online: 'bg-kodo-lime',
-      offline: 'bg-gray-500',
+      offline: 'bg-kodo-steel',
       away: 'bg-kodo-gold',
       idle: 'bg-kodo-gold',
       busy: 'bg-kodo-red',
@@ -160,7 +160,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
           {src ? (
             <img src={src} alt={alt} className="w-full h-full object-cover" />
           ) : (
-            <span className="font-bold text-gray-400">{initials}</span>
+            <span className="font-bold text-kodo-content-dim">{initials}</span>
           )}
         </div>
 
diff --git a/apps/web/src/components/ui/checkbox.tsx b/apps/web/src/components/ui/checkbox.tsx
index 9bfb33801..08708af0a 100644
--- a/apps/web/src/components/ui/checkbox.tsx
+++ b/apps/web/src/components/ui/checkbox.tsx
@@ -118,7 +118,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           />
         </div>
         {label && (
-          <span className="text-sm text-gray-300 group-hover:text-white transition-colors select-none">
+          <span className="text-sm text-kodo-text-main group-hover:text-white transition-colors select-none">
             {label}
           </span>
         )}
diff --git a/apps/web/src/components/ui/confirmation-dialog.tsx b/apps/web/src/components/ui/confirmation-dialog.tsx
index f0ce8d0d7..ea0087294 100644
--- a/apps/web/src/components/ui/confirmation-dialog.tsx
+++ b/apps/web/src/components/ui/confirmation-dialog.tsx
@@ -151,7 +151,7 @@ export function ConfirmationDialog({
           {variant === 'destructive' && (
             <div className="flex-shrink-0">
               <div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20">
-                <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400" />
+                <AlertTriangle className="h-5 w-5 text-kodo-red dark:text-kodo-red" />
               </div>
             </div>
           )}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 063a5e4dd..baf35fdab 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -319,7 +319,7 @@ export function DialogDescription({
   children,
   className,
 }: DialogDescriptionProps) {
-  return <p className={cn('text-sm text-gray-400', className)}>{children}</p>;
+  return <p className={cn('text-sm text-kodo-content-dim', className)}>{children}</p>;
 }
 
 export interface DialogTitleProps {
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index 306d3a8fd..458c1382a 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -185,7 +185,7 @@ const DropdownMenuItem = React.forwardRef<
       className={cn(
         'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
         'transition-colors focus:bg-white/5 focus:text-white disabled:pointer-events-none disabled:opacity-50',
-        'text-gray-300 hover:text-white w-full text-left',
+        'text-kodo-text-main hover:text-white w-full text-left',
         inset && 'pl-8',
         className,
       )}
@@ -213,7 +213,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     className={cn(
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none',
       'transition-colors focus:bg-white/5 focus:text-white disabled:pointer-events-none disabled:opacity-50',
-      'text-gray-300 hover:text-white w-full text-left',
+      'text-kodo-text-main hover:text-white w-full text-left',
       className,
     )}
     {...props}
@@ -241,7 +241,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     className={cn(
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none',
       'transition-colors focus:bg-white/5 focus:text-white disabled:pointer-events-none disabled:opacity-50',
-      'text-gray-300 hover:text-white w-full text-left',
+      'text-kodo-text-main hover:text-white w-full text-left',
       className,
     )}
     {...props}
@@ -266,7 +266,7 @@ const DropdownMenuLabel = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'px-2 py-1.5 text-sm font-semibold text-gray-400',
+      'px-2 py-1.5 text-sm font-semibold text-kodo-content-dim',
       inset && 'pl-8',
       className,
     )}
@@ -297,7 +297,7 @@ const DropdownMenuShortcut = ({
   return (
     <span
       className={cn(
-        'ml-auto text-xs tracking-widest opacity-60 text-gray-500',
+        'ml-auto text-xs tracking-widest opacity-60 text-kodo-content-dim',
         className,
       )}
       {...props}