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 (
<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}

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(() =>
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}

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

@ -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"
/>

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>
<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>

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

@ -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>

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

@ -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>
)}

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

@ -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>
)}

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

@ -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 {

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

@ -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}