senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

consistency: auto-migrate Tailwind default colors (Batch 5, 50 instances)

Browse source
This commit is contained in:
senke 2026-01-16 01:56:37 +01:00
parent dccd27022f
commit f4e2dd45d4
9 changed files with 36 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
apps/web/src/components/ui/FormField.tsx
View file

@ -112,16 +112,16 @@ export const FormField: React.FC<FormFieldProps> = ({
}) => { }) => {
return ( return (
<div className={cn('space-y-2', className)}> <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} {label}
{required && <span className="text-red-500 ml-1">*</span>} {required && <span className="text-kodo-red ml-1">*</span>}
</label> </label>
{children} {children}
{helpText && !error && ( {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 && ( {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> </div>
); );
@ -141,10 +141,10 @@ export const Input: React.FC<InputProps> = ({
className={cn( className={cn(
'w-full px-3 py-2 border rounded-md shadow-sm transition-colors', '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', '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 error
? 'border-red-500 focus:ring-red-500' ? 'border-kodo-red focus:ring-red-500'
: 'border-gray-300 dark:border-gray-600', : 'border-kodo-steel dark:border-kodo-steel',
className, className,
)} )}
{...props} {...props}
@ -167,10 +167,10 @@ export const Textarea: React.FC<TextareaProps> = ({
className={cn( className={cn(
'w-full px-3 py-2 border rounded-md shadow-sm transition-colors resize-none', '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', '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 error
? 'border-red-500 focus:ring-red-500' ? 'border-kodo-red focus:ring-red-500'
: 'border-gray-300 dark:border-gray-600', : 'border-kodo-steel dark:border-kodo-steel',
className, className,
)} )}
{...props} {...props}
@ -194,10 +194,10 @@ export const Select: React.FC<SelectProps> = ({
className={cn( className={cn(
'w-full px-3 py-2 border rounded-md shadow-sm transition-colors', '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', '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 error
? 'border-red-500 focus:ring-red-500' ? 'border-kodo-red focus:ring-red-500'
: 'border-gray-300 dark:border-gray-600', : 'border-kodo-steel dark:border-kodo-steel',
className, className,
)} )}
{...props} {...props}

12
apps/web/src/components/ui/ImageCropper.tsx
View file

@ -4,7 +4,7 @@ import React, { useState, useCallback, lazy, Suspense } from 'react';
const Cropper = lazy(() => const Cropper = lazy(() =>
Promise.resolve({ Promise.resolve({
default: (_props: any) => ( 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 Cropper Mock
</div> </div>
), ),
@ -135,7 +135,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
<h3 className="font-bold text-white flex items-center gap-2"> <h3 className="font-bold text-white flex items-center gap-2">
Edit Image Edit Image
</h3> </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" /> <X className="w-5 h-5" />
</button> </button>
</div> </div>
@ -167,8 +167,8 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
{/* Controls */} {/* Controls */}
<div className="p-6 bg-kodo-ink border-t border-kodo-steel space-y-4"> <div className="p-6 bg-kodo-ink border-t border-kodo-steel space-y-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<span className="text-xs text-gray-400 w-16">Zoom</span> <span className="text-xs text-kodo-content-dim w-16">Zoom</span>
<ZoomIn className="w-4 h-4 text-gray-500" /> <ZoomIn className="w-4 h-4 text-kodo-content-dim" />
<input <input
type="range" type="range"
value={zoom} value={zoom}
@ -182,8 +182,8 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<span className="text-xs text-gray-400 w-16">Rotate</span> <span className="text-xs text-kodo-content-dim w-16">Rotate</span>
<RotateCw className="w-4 h-4 text-gray-500" /> <RotateCw className="w-4 h-4 text-kodo-content-dim" />
<input <input
type="range" type="range"
value={rotation} value={rotation}

12
apps/web/src/components/ui/LoadingState.tsx
View file

@ -120,11 +120,11 @@ export function LoadingState({
return ( return (
<div className={cn('flex items-center gap-2', className)}> <div className={cn('flex items-center gap-2', className)}>
<Loader2 <Loader2
className={cn('animate-spin text-gray-400', sizeClasses[size])} className={cn('animate-spin text-kodo-content-dim', sizeClasses[size])}
aria-hidden="true" aria-hidden="true"
/> />
{displayText && ( {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} {displayText}
</span> </span>
)} )}
@ -138,9 +138,9 @@ export function LoadingState({
<div className={cn('animate-pulse space-y-4', className)}> <div className={cn('animate-pulse space-y-4', className)}>
{children || ( {children || (
<> <>
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div> <div className="h-4 bg-kodo-slate dark:bg-kodo-steel 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-kodo-slate dark:bg-kodo-steel 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-5/6"></div>
</> </>
)} )}
</div> </div>
@ -156,7 +156,7 @@ export function LoadingState({
return ( return (
<Loader2 <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} aria-label={displayText}
role="status" role="status"
/> />

2
apps/web/src/components/ui/Toast.tsx
View file

@ -100,7 +100,7 @@ export const Toast: React.FC<ToastProps> = ({ id, type, message, onClose }) => {
<p className="flex-1 text-sm font-medium">{message}</p> <p className="flex-1 text-sm font-medium">{message}</p>
<button <button
onClick={() => onClose(id)} 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" /> <X className="w-4 h-4" />
</button> </button>

4
apps/web/src/components/ui/avatar.tsx
View file

@ -114,7 +114,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
const statusColors = { const statusColors = {
online: 'bg-kodo-lime', online: 'bg-kodo-lime',
offline: 'bg-gray-500', offline: 'bg-kodo-steel',
away: 'bg-kodo-gold', away: 'bg-kodo-gold',
idle: 'bg-kodo-gold', idle: 'bg-kodo-gold',
busy: 'bg-kodo-red', busy: 'bg-kodo-red',
@ -160,7 +160,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
{src ? ( {src ? (
<img src={src} alt={alt} className="w-full h-full object-cover" /> <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> </div>

2
apps/web/src/components/ui/checkbox.tsx
View file

@ -118,7 +118,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
/> />
</div> </div>
{label && ( {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} {label}
</span> </span>
)} )}

2
apps/web/src/components/ui/confirmation-dialog.tsx
View file

@ -151,7 +151,7 @@ export function ConfirmationDialog({
{variant === 'destructive' && ( {variant === 'destructive' && (
<div className="flex-shrink-0"> <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"> <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>
</div> </div>
)} )}

2
apps/web/src/components/ui/dialog.tsx
View file

@ -319,7 +319,7 @@ export function DialogDescription({
children, children,
className, className,
}: DialogDescriptionProps) { }: 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 { export interface DialogTitleProps {

10
apps/web/src/components/ui/dropdown-menu.tsx
View file

@ -185,7 +185,7 @@ const DropdownMenuItem = React.forwardRef<
className={cn( className={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none', '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', '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', inset && 'pl-8',
className, className,
)} )}
@ -213,7 +213,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
className={cn( className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none', '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', '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, className,
)} )}
{...props} {...props}
@ -241,7 +241,7 @@ const DropdownMenuRadioItem = React.forwardRef<
className={cn( className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none', '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', '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, className,
)} )}
{...props} {...props}
@ -266,7 +266,7 @@ const DropdownMenuLabel = React.forwardRef<
<div <div
ref={ref} ref={ref}
className={cn( 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', inset && 'pl-8',
className, className,
)} )}
@ -297,7 +297,7 @@ const DropdownMenuShortcut = ({
return ( return (
<span <span
className={cn( 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, className,
)} )}
{...props} {...props}