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

consistency: auto-migrate Tailwind default colors (Batch 11, 100 instances)

Browse source
This commit is contained in:
senke 2026-01-16 01:56:57 +01:00
parent 911ea4d304
commit 5ea2191f9c
10 changed files with 43 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/web/src/features/player/components/PlayerLoading.tsx
View file

@ -52,7 +52,7 @@ export function PlayerLoading({
<Loader2
className={cn(
sizeClasses[size],
'animate-spin text-blue-600 dark:text-blue-400',
'animate-spin text-kodo-cyan dark:text-kodo-cyan',
)}
aria-hidden="true"
/>
@ -60,7 +60,7 @@ export function PlayerLoading({
<p
className={cn(
textSizeClasses[size],
'text-gray-700 dark:text-gray-300 text-center',
'text-kodo-text-main dark:text-kodo-text-main text-center',
)}
>
{message}

12
apps/web/src/features/player/components/ProgressBar.tsx
View file

@ -152,13 +152,13 @@ export function ProgressBar({
aria-disabled={disabled}
>
{/* Background track */}
<div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 rounded-full" />
<div className="absolute inset-0 bg-kodo-slate dark:bg-kodo-steel rounded-full" />
{/* Progress track */}
<div
className={cn(
'absolute left-0 top-0 h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all',
isDragging && 'bg-blue-700 dark:bg-blue-600',
'absolute left-0 top-0 h-full bg-kodo-cyan dark:bg-kodo-cyan rounded-full transition-all',
isDragging && 'bg-kodo-cyan dark:bg-kodo-cyan',
)}
style={{ width: `${displayProgress}%` }}
/>
@ -166,7 +166,7 @@ export function ProgressBar({
{/* Hover indicator */}
{hoverTime !== null && !disabled && (
<div
className="absolute top-0 h-full w-0.5 bg-blue-800 dark:bg-blue-400 opacity-50"
className="absolute top-0 h-full w-0.5 bg-kodo-cyan dark:bg-kodo-cyan opacity-50"
style={{ left: `${displayProgress}%` }}
/>
)}
@ -174,7 +174,7 @@ export function ProgressBar({
{/* Thumb */}
<div
className={cn(
'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-blue-600 dark:bg-blue-500 rounded-full',
'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-kodo-cyan dark:bg-kodo-cyan rounded-full',
'opacity-0 group-hover:opacity-100 transition-opacity',
isDragging && 'opacity-100',
disabled && 'opacity-0',
@ -185,7 +185,7 @@ export function ProgressBar({
{/* Tooltip */}
{showTooltip && hoverTime !== null && !disabled && (
<div
className="absolute bottom-full mb-2 px-2 py-1 bg-gray-900 dark:bg-gray-800 text-white text-xs rounded pointer-events-none whitespace-nowrap"
className="absolute bottom-full mb-2 px-2 py-1 bg-kodo-ink dark:bg-kodo-graphite text-white text-xs rounded pointer-events-none whitespace-nowrap"
style={{
left: `${tooltipPosition}%`,
transform: 'translateX(-50%)',

20
apps/web/src/features/player/components/QualitySelector.tsx
View file

@ -83,9 +83,9 @@ export function QualitySelector({
disabled={disabled}
className={cn(
'flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg',
'bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600',
'text-gray-700 dark:text-gray-300',
'hover:bg-gray-50 dark:hover:bg-gray-700',
'bg-white dark:bg-kodo-graphite border border-kodo-steel dark:border-kodo-steel',
'text-kodo-text-main dark:text-kodo-text-main',
'hover:bg-kodo-void dark:hover:bg-kodo-steel',
'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
'disabled:opacity-50 disabled:cursor-not-allowed',
'transition-colors',
@ -108,7 +108,7 @@ export function QualitySelector({
{/* Dropdown */}
{isOpen && !disabled && (
<div
className="absolute z-50 mt-1 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg"
className="absolute z-50 mt-1 w-48 bg-white dark:bg-kodo-graphite border border-kodo-steel dark:border-kodo-steel rounded-lg shadow-lg"
role="listbox"
>
{qualities.map((quality) => (
@ -118,28 +118,28 @@ export function QualitySelector({
onClick={() => handleSelect(quality.value)}
className={cn(
'w-full flex items-center justify-between px-4 py-2 text-sm text-left',
'hover:bg-gray-100 dark:hover:bg-gray-700',
'focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700',
'hover:bg-kodo-void dark:hover:bg-kodo-steel',
'focus:outline-none focus:bg-kodo-void dark:focus:bg-kodo-steel',
'transition-colors',
currentQuality === quality.value &&
'bg-blue-50 dark:bg-blue-900/20',
'bg-kodo-cyan/10 dark:bg-kodo-cyan/20',
)}
role="option"
aria-selected={currentQuality === quality.value}
>
<div className="flex flex-col">
<span className="font-medium text-gray-900 dark:text-white">
<span className="font-medium text-kodo-text-main dark:text-white">
{quality.label}
</span>
{quality.description && (
<span className="text-xs text-gray-500 dark:text-gray-400">
<span className="text-xs text-kodo-content-dim dark:text-kodo-content-dim">
{quality.description}
</span>
)}
</div>
{currentQuality === quality.value && (
<Check
className="h-4 w-4 text-blue-600 dark:text-blue-400"
className="h-4 w-4 text-kodo-cyan dark:text-kodo-cyan"
aria-hidden="true"
/>
)}

12
apps/web/src/features/player/components/RepeatShuffleButtons.tsx
View file

@ -41,11 +41,11 @@ export function RepeatShuffleButtons({
const variantClasses = {
default:
'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600',
'bg-kodo-cyan text-white hover:bg-kodo-cyan focus:ring-blue-500 dark:bg-kodo-cyan dark:hover:bg-kodo-cyan',
ghost:
'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-800',
'bg-transparent text-kodo-text-main hover:bg-kodo-void focus:ring-gray-500 dark:text-kodo-text-main dark:hover:bg-kodo-graphite',
outline:
'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
'border border-kodo-steel bg-white text-kodo-text-main hover:bg-kodo-void focus:ring-gray-500 dark:border-kodo-steel dark:bg-kodo-graphite dark:text-kodo-text-main dark:hover:bg-kodo-steel',
};
const handleRepeatClick = () => {
@ -95,7 +95,7 @@ export function RepeatShuffleButtons({
sizeClasses[size],
variantClasses[variant],
repeat !== 'off' &&
'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600',
'bg-kodo-cyan text-white hover:bg-kodo-cyan dark:bg-kodo-cyan dark:hover:bg-kodo-cyan',
disabled && 'opacity-50 cursor-not-allowed',
)}
aria-label={getRepeatAriaLabel()}
@ -109,7 +109,7 @@ export function RepeatShuffleButtons({
/>
{repeat === 'playlist' && (
<span
className="absolute bottom-0 right-0 text-[8px] font-bold leading-none bg-blue-700 dark:bg-blue-600 rounded-full w-3 h-3 flex items-center justify-center"
className="absolute bottom-0 right-0 text-[8px] font-bold leading-none bg-kodo-cyan dark:bg-kodo-cyan rounded-full w-3 h-3 flex items-center justify-center"
aria-hidden="true"
>
1
@ -128,7 +128,7 @@ export function RepeatShuffleButtons({
sizeClasses[size],
variantClasses[variant],
shuffle &&
'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600',
'bg-kodo-cyan text-white hover:bg-kodo-cyan dark:bg-kodo-cyan dark:hover:bg-kodo-cyan',
disabled && 'opacity-50 cursor-not-allowed',
)}
aria-label={shuffle ? 'Mélanger activé' : 'Mélanger désactivé'}

2
apps/web/src/features/player/components/TimeDisplay.tsx
View file

@ -27,7 +27,7 @@ export function TimeDisplay({
return (
<div
className={cn(
'flex items-center text-sm text-gray-600 dark:text-gray-400',
'flex items-center text-sm text-kodo-content-dim dark:text-kodo-content-dim',
className,
)}
role="timer"

16
apps/web/src/features/player/components/TrackInfo.tsx
View file

@ -26,7 +26,7 @@ export function TrackInfo({
return (
<div
className={cn(
'flex items-center gap-3 text-gray-500 dark:text-gray-400',
'flex items-center gap-3 text-kodo-content-dim dark:text-kodo-content-dim',
className,
)}
>
@ -53,14 +53,14 @@ export function TrackInfo({
alt={`Cover de ${track.title}`}
className={cn(
coverSizes[coverSize],
'rounded-lg object-cover bg-gray-200 dark:bg-gray-700',
'rounded-lg object-cover bg-kodo-slate dark:bg-kodo-steel',
)}
/>
) : (
<div
className={cn(
coverSizes[coverSize],
'rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center',
'rounded-lg bg-kodo-slate dark:bg-kodo-steel flex items-center justify-center',
)}
>
<Music
@ -70,7 +70,7 @@ export function TrackInfo({
: coverSize === 'lg'
? 'h-12 w-12'
: 'h-8 w-8',
'text-gray-400 dark:text-gray-500',
'text-kodo-content-dim dark:text-kodo-content-dim',
)}
aria-hidden="true"
/>
@ -82,14 +82,14 @@ export function TrackInfo({
{/* Track Info */}
<div className="flex-1 min-w-0">
<h3
className="text-sm font-semibold text-gray-900 dark:text-white truncate"
className="text-sm font-semibold text-kodo-text-main dark:text-white truncate"
title={track.title}
>
{track.title}
</h3>
{track.artist && (
<p
className="text-xs text-gray-600 dark:text-gray-400 truncate"
className="text-xs text-kodo-content-dim dark:text-kodo-content-dim truncate"
title={track.artist}
>
{track.artist}
@ -98,14 +98,14 @@ export function TrackInfo({
{/* Metadata */}
{showMetadata && (
<div className="flex items-center gap-2 mt-1 text-xs text-gray-500 dark:text-gray-500">
<div className="flex items-center gap-2 mt-1 text-xs text-kodo-content-dim dark:text-kodo-content-dim">
{track.album && (
<span className="truncate" title={track.album}>
{track.album}
</span>
)}
{track.album && track.genre && (
<span className="text-gray-400 dark:text-gray-600">•</span>
<span className="text-kodo-content-dim dark:text-kodo-content-dim">•</span>
)}
{track.genre && (
<span className="truncate" title={track.genre}>

12
apps/web/src/features/player/components/VolumeControl.tsx
View file

@ -107,7 +107,7 @@ export function VolumeControl({
disabled={disabled}
className={cn(
'rounded-full flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 h-10 w-10',
'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-800',
'bg-transparent text-kodo-text-main hover:bg-kodo-void focus:ring-gray-500 dark:text-kodo-text-main dark:hover:bg-kodo-graphite',
disabled && 'opacity-50 cursor-not-allowed',
)}
aria-label={getVolumeLabel()}
@ -137,13 +137,13 @@ export function VolumeControl({
aria-disabled={disabled}
>
{/* Background track */}
<div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 rounded-full" />
<div className="absolute inset-0 bg-kodo-slate dark:bg-kodo-steel rounded-full" />
{/* Volume track */}
<div
className={cn(
'absolute left-0 top-0 h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all',
isDragging && 'bg-blue-700 dark:bg-blue-600',
'absolute left-0 top-0 h-full bg-kodo-cyan dark:bg-kodo-cyan rounded-full transition-all',
isDragging && 'bg-kodo-cyan dark:bg-kodo-cyan',
)}
style={{ width: `${displayVolume}%` }}
/>
@ -151,7 +151,7 @@ export function VolumeControl({
{/* Thumb */}
<div
className={cn(
'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-blue-600 dark:bg-blue-500 rounded-full',
'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-kodo-cyan dark:bg-kodo-cyan rounded-full',
'opacity-0 group-hover:opacity-100 transition-opacity',
isDragging && 'opacity-100',
disabled && 'opacity-0',
@ -163,7 +163,7 @@ export function VolumeControl({
{/* Volume Value */}
{showValue && (
<span
className="text-xs text-gray-600 dark:text-gray-400 min-w-[3ch] text-right"
className="text-xs text-kodo-content-dim dark:text-kodo-content-dim min-w-[3ch] text-right"
aria-label={`Volume: ${volume}%`}
>
{muted ? 'Mute' : `${volume}%`}

2
apps/web/src/features/playlists/components/ImportPlaylistButton.tsx
View file

@ -264,7 +264,7 @@ export const ImportPlaylistButton: React.FC<ImportPlaylistButtonProps> = ({
checked={isPublic}
onChange={(e) => setIsPublic(e.target.checked)}
disabled={isImporting}
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
className="h-4 w-4 rounded border-kodo-steel text-primary focus:ring-2 focus:ring-primary"
/>
</div>
</div>

2
apps/web/src/features/playlists/components/PlaylistActions.tsx
View file

@ -122,7 +122,7 @@ export function PlaylistActions({
) : showSuccess ? (
<>
<CheckCircle2
className="w-4 h-4 sm:mr-2 text-green-600"
className="w-4 h-4 sm:mr-2 text-kodo-lime"
aria-hidden="true"
/>
<span className="hidden sm:inline">Enregistré</span>

4
apps/web/src/features/playlists/components/PlaylistBatchActions.tsx
View file

@ -197,7 +197,7 @@ export function PlaylistBatchActions({
<div
className={cn(
'flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4',
'p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg',
'p-4 bg-kodo-cyan/10 dark:bg-kodo-cyan/20 border border-kodo-cyan dark:border-blue-800 rounded-lg',
'sticky top-0 z-10 backdrop-blur-sm',
className,
)}
@ -205,7 +205,7 @@ export function PlaylistBatchActions({
aria-label={`Actions batch pour ${selectedCount} playlist${selectedCount > 1 ? 's' : ''} sélectionnée${selectedCount > 1 ? 's' : ''}`}
>
<div className="flex items-center gap-3">
<span className="text-sm font-medium text-blue-900 dark:text-blue-100">
<span className="text-sm font-medium text-kodo-cyan dark:text-kodo-cyan">
{selectedCount} playlist{selectedCount > 1 ? 's' : ''} sélectionnée
{selectedCount > 1 ? 's' : ''}
</span>