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

ui(tokens): migrate bg-kodo-steel to bg-muted (46 files, 76 instances)

Browse source 
Replace legacy hardcoded bg-kodo-steel (RGB 59,69,84, theme-unaware)
with semantic bg-muted token across 46 user-facing components.

This completes the kodo-steel elimination from source files: text, border,
and background variants are now all on semantic design system tokens.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-09 00:08:42 +01:00
parent 68417c667c
commit 6d9a4b0a5a
46 changed files with 76 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/web/src/components/BulkModeBanner.tsx
View file

@ -70,7 +70,7 @@ export function BulkModeBanner({
aria-live="polite"
aria-atomic="true"
className={cn(
'w-full bg-kodo-steel/10 border-b border-border/30 text-kodo-steel',
'w-full bg-muted/10 border-b border-border/30 text-kodo-steel',
'px-4 py-4 flex items-center justify-between gap-4',
'transition-all duration-[var(--duration-normal)]',
className,

8
apps/web/src/components/OfflineQueueManager.tsx
View file

@ -43,11 +43,11 @@ function getPriorityColor(priority: QueuedRequest['priority']): string {
case 'high':
return 'bg-kodo-red/20 text-kodo-red border-kodo-red/30';
case 'normal':
return 'bg-kodo-steel/20 text-kodo-steel border-border/30';
return 'bg-muted/20 text-kodo-steel border-border/30';
case 'low':
return 'bg-kodo-steel/30 text-kodo-secondary border-border/50';
return 'bg-muted/30 text-kodo-secondary border-border/50';
default:
return 'bg-kodo-steel/30 text-kodo-secondary border-border/50';
return 'bg-muted/30 text-kodo-secondary border-border/50';
}
}
@ -213,7 +213,7 @@ export function OfflineQueueManager({
{/* Info Message */}
{queue.length > 0 && (
<div className="p-4 bg-kodo-steel/10 border border-border/20 rounded-lg text-xs text-kodo-secondary">
<div className="p-4 bg-muted/10 border border-border/20 rounded-lg text-xs text-kodo-secondary">
<p>
Queued requests will be automatically processed when you're back
online. You can remove individual requests or clear the entire

2
apps/web/src/components/Onboarding.tsx
View file

@ -119,7 +119,7 @@ export function Onboarding({
? 'bg-kodo-cyan w-8'
: index < currentStep
? 'bg-kodo-cyan/50'
: 'bg-kodo-steel',
: 'bg-muted',
)}
/>
))}

2
apps/web/src/components/admin/modals/BanUserModal.tsx
View file

@ -89,7 +89,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
</span>
<div
onClick={() => setIsPermanent(!isPermanent)}
className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${isPermanent ? 'bg-kodo-red' : 'bg-kodo-steel'}`}
className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${isPermanent ? 'bg-kodo-red' : 'bg-muted'}`}
>
<div
className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${isPermanent ? 'left-6' : 'left-1'}`}

4
apps/web/src/components/analytics/TrackAnalyticsView.tsx
View file

@ -106,7 +106,7 @@ export const TrackAnalyticsView: React.FC<TrackAnalyticsViewProps> = ({
return (
<div
key={i}
className="flex-1 bg-kodo-steel/20 hover:bg-kodo-steel/50 transition-colors rounded-t relative group"
className="flex-1 bg-muted/20 hover:bg-muted/50 transition-colors rounded-t relative group"
style={{ height: `${h}%` }}
>
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 pointer-events-none">
@ -128,7 +128,7 @@ export const TrackAnalyticsView: React.FC<TrackAnalyticsViewProps> = ({
{trackData.geo.map((g) => (
<div key={g.country} className="flex items-center gap-4">
<div className="w-16 text-sm text-muted-foreground">{g.country}</div>
<div className="flex-1 h-2 bg-kodo-steel rounded-full overflow-hidden">
<div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
<div
className="h-full bg-kodo-magenta"
style={{ width: `${g.percent}%` }}

2
apps/web/src/components/dashboard/TrackList.tsx
View file

@ -143,7 +143,7 @@ export const TrackList: React.FC = () => {
alt={track.title}
/>
{isCurrent && (
<div className="absolute inset-0 bg-kodo-steel/20 ring-1 ring-inset ring-kodo-steel"></div>
<div className="absolute inset-0 bg-muted/20 ring-1 ring-inset ring-kodo-steel"></div>
)}
</div>

2
apps/web/src/components/education/MyCoursesView.tsx
View file

@ -90,7 +90,7 @@ export const MyCoursesView: React.FC<MyCoursesViewProps> = ({ onContinue }) => {
<h2 className="text-2xl font-bold text-white mb-2">
{lastActiveCourse.title}
</h2>
<div className="w-full bg-kodo-steel h-2 rounded-full mb-4 max-w-md mx-auto md:mx-0">
<div className="w-full bg-muted h-2 rounded-full mb-4 max-w-md mx-auto md:mx-0">
<div
className="bg-kodo-cyan h-full rounded-full"
style={{ width: `${lastActiveCourse.progress}%` }}

2
apps/web/src/components/education/modals/QuizModal.tsx
View file

@ -116,7 +116,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
</div>
{/* Progress */}
<div className="h-1 bg-kodo-steel w-full">
<div className="h-1 bg-muted w-full">
<div
className="h-full bg-kodo-cyan transition-all duration-[var(--duration-normal)]"
style={{

2
apps/web/src/components/feedback/Alert.tsx
View file

@ -19,7 +19,7 @@ const ALERT_ICONS = {
};
const ALERT_STYLES = {
info: 'bg-kodo-steel/10 border-border/30 text-kodo-text-main dark:bg-kodo-steel/20 dark:border-border/40 dark:text-kodo-steel',
info: 'bg-muted/10 border-border/30 text-kodo-text-main dark:bg-muted/20 dark:border-border/40 dark:text-kodo-steel',
success:
'bg-kodo-lime/10 border-kodo-lime/30 text-kodo-text-main dark:bg-kodo-lime/20 dark:border-kodo-lime/40 dark:text-kodo-lime',
warning:

4
apps/web/src/components/forms/PasswordStrengthIndicator.tsx
View file

@ -57,14 +57,14 @@ export function PasswordStrengthIndicator({
const currentStrengthLabel =
strengthLabels[strength.score - 1] || 'Very Weak';
const currentStrengthColor =
strengthColors[strength.score - 1] || 'bg-kodo-steel';
strengthColors[strength.score - 1] || 'bg-muted';
const currentTextColor =
strengthTextColors[strength.score - 1] || 'text-muted-foreground';
return (
<div className="space-y-2">
<div className="flex items-center gap-2">
<div className="flex-1 bg-kodo-steel/30 dark:bg-kodo-steel rounded-full h-2 overflow-hidden">
<div className="flex-1 bg-muted/30 dark:bg-muted rounded-full h-2 overflow-hidden">
<div
className={cn(
'h-2 rounded-full transition-all duration-[var(--duration-normal)]',

2
apps/web/src/components/gamification/AchievementCard.tsx
View file

@ -56,7 +56,7 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
{/* Progress */}
<div className="w-full bg-kodo-graphite h-1.5 rounded-full overflow-hidden">
<div
className={`h-full transition-all duration-[var(--duration-slow)] ${isUnlocked ? 'bg-kodo-gold' : 'bg-kodo-steel'}`}
className={`h-full transition-all duration-[var(--duration-slow)] ${isUnlocked ? 'bg-kodo-gold' : 'bg-muted'}`}
style={{ width: `${percentage}%` }}
></div>
</div>

2
apps/web/src/components/inventory/EquipmentCard.tsx
View file

@ -16,7 +16,7 @@ export const EquipmentCard: React.FC<EquipmentCardProps> = ({
const statusColor = {
Active: 'text-kodo-lime bg-kodo-lime/10',
Maintenance: 'text-kodo-orange bg-kodo-orange/10',
Sold: 'text-muted-foreground bg-kodo-steel/10',
Sold: 'text-muted-foreground bg-muted/10',
Wishlist: 'text-kodo-magenta bg-kodo-magenta/10',
};

6
apps/web/src/components/library/WatermarkSettingsModal.tsx
View file

@ -53,7 +53,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
</span>
<div
onClick={() => setEnabled(!enabled)}
className={`w-10 h-5 rounded-full relative transition-colors ${enabled ? 'bg-kodo-magenta' : 'bg-kodo-steel'}`}
className={`w-10 h-5 rounded-full relative transition-colors ${enabled ? 'bg-kodo-magenta' : 'bg-muted'}`}
>
<div
className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${enabled ? 'left-6' : 'left-1'}`}
@ -81,7 +81,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
>
{/* Icon representation usually better, but text works for demo */}
<div
className={`w-2 h-2 rounded-full mx-auto ${position === i ? 'bg-white' : 'bg-kodo-steel'}`}
className={`w-2 h-2 rounded-full mx-auto ${position === i ? 'bg-white' : 'bg-muted'}`}
></div>
</button>
))}
@ -99,7 +99,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
max="100"
value={opacity}
onChange={(e) => setOpacity(Number(e.target.value))}
className="w-full h-1 bg-kodo-steel rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-magenta [&::-webkit-slider-thumb]:rounded-full"
className="w-full h-1 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-magenta [&::-webkit-slider-thumb]:rounded-full"
/>
</div>
</div>

2
apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
View file

@ -100,7 +100,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
className="w-full justify-start border border-dashed border-border mb-4 hover:border-border/50 hover:text-white group"
onClick={() => addToast('New Playlist Flow')}
>
<div className="w-8 h-8 bg-kodo-steel rounded flex items-center justify-center mr-3 group-hover:bg-white/5">
<div className="w-8 h-8 bg-muted rounded flex items-center justify-center mr-3 group-hover:bg-white/5">
<Plus className="w-4 h-4" />
</div>
<span className="text-sm font-bold">New Playlist</span>

4
apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
View file

@ -86,7 +86,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
</div>
</div>
<div
className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-kodo-steel'}`}
className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-muted'}`}
>
<div
className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${isPublic ? 'left-4.5' : 'left-0.5'}`}
@ -110,7 +110,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
</div>
</div>
<div
className={`w-8 h-4 rounded-full relative transition-colors ${isCollaborative ? 'bg-kodo-lime' : 'bg-kodo-steel'}`}
className={`w-8 h-4 rounded-full relative transition-colors ${isCollaborative ? 'bg-kodo-lime' : 'bg-muted'}`}
>
<div
className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${isCollaborative ? 'left-4.5' : 'left-0.5'}`}

2
apps/web/src/components/library/playlists/EditPlaylistModal.tsx
View file

@ -126,7 +126,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
</div>
</div>
<div
className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-kodo-steel'}`}
className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-muted'}`}
>
<div
className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${isPublic ? 'left-4.5' : 'left-0.5'}`}

6
apps/web/src/components/library/playlists/PlaylistDetailView.tsx
View file

@ -124,14 +124,14 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
<div className="flex items-center gap-4 text-sm text-kodo-text-main font-medium mb-6">
<div className="flex items-center gap-2">
<div className="w-6 h-6 rounded-full bg-kodo-steel"></div>
<div className="w-6 h-6 rounded-full bg-muted"></div>
<span className="text-white hover:underline cursor-pointer">
{playlist.creator}
</span>
</div>
<span className="w-1 h-1 bg-kodo-steel rounded-full"></span>
<span className="w-1 h-1 bg-muted rounded-full"></span>
<span>{playlist.likes} likes</span>
<span className="w-1 h-1 bg-kodo-steel rounded-full"></span>
<span className="w-1 h-1 bg-muted rounded-full"></span>
<span>
{tracks.length} songs, {playlist.duration}
</span>

2
apps/web/src/components/library/playlists/QueueView.tsx
View file

@ -146,7 +146,7 @@ export const QueueView: React.FC = () => {
Autoplay
</span>
<div
className={`w-8 h-4 rounded-full relative transition-colors ${autoplay ? 'bg-kodo-lime' : 'bg-kodo-steel'}`}
className={`w-8 h-4 rounded-full relative transition-colors ${autoplay ? 'bg-kodo-lime' : 'bg-muted'}`}
>
<div
className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${autoplay ? 'left-4.5' : 'left-0.5'}`}

2
apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
View file

@ -68,7 +68,7 @@ export const SaveQueueAsPlaylistModal: React.FC<
</div>
</div>
<div
className={`w-10 h-5 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-kodo-steel'}`}
className={`w-10 h-5 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-muted'}`}
>
<div
className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${isPublic ? 'left-6' : 'left-1'}`}

4
apps/web/src/components/modals/CreatorModal.tsx
View file

@ -72,7 +72,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
<div className="p-8 flex-1 overflow-y-auto">
{/* Progress Stepper */}
<div className="flex justify-between max-w-lg mx-auto mb-10 relative">
<div className="absolute top-1/2 left-0 w-full h-1 bg-kodo-steel -z-10"></div>
<div className="absolute top-1/2 left-0 w-full h-1 bg-muted -z-10"></div>
{[1, 2, 3].map((i) => (
<div
key={i}
@ -110,7 +110,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
Visibility
</label>
<div className="grid grid-cols-3 gap-2">
<Button variant="outline" className="p-4 flex flex-col items-center justify-center gap-2 text-kodo-steel bg-kodo-steel/10 border-border">
<Button variant="outline" className="p-4 flex flex-col items-center justify-center gap-2 text-kodo-steel bg-muted/10 border-border">
<Tag className="w-5 h-5" />{' '}
<span className="text-xs font-bold">Public</span>
</Button>

4
apps/web/src/components/pwa/PWAInstallBanner.tsx
View file

@ -28,7 +28,7 @@ export function PWAInstallBanner() {
<div className="flex flex-col gap-4 relative z-10">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2.5">
<div className="w-8 h-8 rounded-lg bg-kodo-steel/10 flex items-center justify-center border border-border/30 animate-pulse-glow">
<div className="w-8 h-8 rounded-lg bg-muted/10 flex items-center justify-center border border-border/30 animate-pulse-glow">
<Smartphone className="h-4 w-4 text-kodo-steel" />
</div>
<div>
@ -65,7 +65,7 @@ export function PWAInstallBanner() {
</Button>
</div>
<div className="absolute -bottom-8 -right-8 w-16 h-16 bg-kodo-steel/10 blur-2xl rounded-full" />
<div className="absolute -bottom-8 -right-8 w-16 h-16 bg-muted/10 blur-2xl rounded-full" />
</div>
</div>
);

2
apps/web/src/components/seller/SellerDashboardView.tsx
View file

@ -210,7 +210,7 @@ export const SellerDashboardView: React.FC<SellerDashboardProps> = ({
<Card variant="default" className="h-full">
<h3 className="font-bold text-white mb-6">Recent Sales</h3>
<div className="space-y-4 relative">
<div className="absolute left-2.5 top-2 bottom-2 w-px bg-kodo-steel"></div>
<div className="absolute left-2.5 top-2 bottom-2 w-px bg-muted"></div>
{sales.map((sale) => (
<div key={sale.id} className="relative pl-8">
<div className="absolute left-0 top-1.5 w-5 h-5 bg-kodo-graphite border border-kodo-lime rounded-full flex items-center justify-center">

2
apps/web/src/components/settings/account/ChangeEmailModal.tsx
View file

@ -77,7 +77,7 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
</div>
) : (
<div className="text-center py-4">
<div className="w-16 h-16 bg-kodo-steel/20 rounded-full flex items-center justify-center mx-auto mb-4 text-kodo-steel">
<div className="w-16 h-16 bg-muted/20 rounded-full flex items-center justify-center mx-auto mb-4 text-kodo-steel">
<Mail className="w-8 h-8" />
</div>
<h4 className="text-lg font-bold text-white mb-2">

2
apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
View file

@ -174,7 +174,7 @@ export const AppearanceSettingsView: React.FC = () => {
max="20"
value={fontSize}
onChange={(e) => setFontSize(Number(e.target.value))}
className="w-full h-2 bg-kodo-steel rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-gold [&::-webkit-slider-thumb]:rounded-full"
className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-gold [&::-webkit-slider-thumb]:rounded-full"
/>
<div
className="mt-4 p-4 bg-kodo-ink rounded border border-border text-kodo-text-main"

2
apps/web/src/components/settings/backups/BackupsView.tsx
View file

@ -163,7 +163,7 @@ export const BackupsView: React.FC = () => {
</div>
<div
onClick={() => setAutoBackup(!autoBackup)}
className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${autoBackup ? 'bg-kodo-cyan' : 'bg-kodo-steel'}`}
className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${autoBackup ? 'bg-kodo-cyan' : 'bg-muted'}`}
>
<div
className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${autoBackup ? 'left-6' : 'left-1'}`}

4
apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
View file

@ -30,7 +30,7 @@ export const CloudIntegrationView: React.FC = () => {
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
<div className="flex items-center gap-4">
<div
className={`w-16 h-16 rounded-full flex items-center justify-center ${isConnected ? 'bg-kodo-cyan text-black' : 'bg-kodo-steel text-muted-foreground'}`}
className={`w-16 h-16 rounded-full flex items-center justify-center ${isConnected ? 'bg-kodo-cyan text-black' : 'bg-muted text-muted-foreground'}`}
>
<Cloud className="w-8 h-8" />
</div>
@ -118,7 +118,7 @@ export const CloudIntegrationView: React.FC = () => {
</div>
<div
onClick={() => setAutoSync(!autoSync)}
className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${autoSync ? 'bg-kodo-cyan' : 'bg-kodo-steel'}`}
className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${autoSync ? 'bg-kodo-cyan' : 'bg-muted'}`}
>
<div
className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${autoSync ? 'left-6' : 'left-1'}`}

2
apps/web/src/components/settings/data/DataExportView.tsx
View file

@ -36,7 +36,7 @@ export const DataExportView: React.FC = () => {
<Card variant="default">
<div className="flex items-start gap-4 mb-6">
<div className="p-4 bg-kodo-steel/10 rounded-full text-kodo-steel">
<div className="p-4 bg-muted/10 rounded-full text-kodo-steel">
<Shield className="w-6 h-6" />
</div>
<div>

2
apps/web/src/components/social/CreatePostModal.tsx
View file

@ -54,7 +54,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
<div className="p-4 flex-1">
<div className="flex gap-4">
<div className="w-10 h-10 rounded-full bg-kodo-steel overflow-hidden flex-shrink-0">
<div className="w-10 h-10 rounded-full bg-muted overflow-hidden flex-shrink-0">
<img
src="https://picsum.photos/id/237/100/100"
className="w-full h-full object-cover"

2
apps/web/src/components/social/FeedView.tsx
View file

@ -80,7 +80,7 @@ export const FeedView: React.FC = () => {
{/* Create Post Widget */}
<Card variant="default" className="border-t-4 border-t-kodo-cyan p-4">
<div className="flex gap-4">
<div className="w-10 h-10 rounded-full bg-kodo-steel flex-shrink-0 overflow-hidden cursor-pointer">
<div className="w-10 h-10 rounded-full bg-muted flex-shrink-0 overflow-hidden cursor-pointer">
<img
src="https://picsum.photos/id/237/100/100"
className="w-full h-full object-cover"

8
apps/web/src/components/social/PostCard.tsx
View file

@ -79,7 +79,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
{/* Post Header */}
<div className="p-4 flex items-start justify-between">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-full bg-kodo-steel overflow-hidden border border-border cursor-pointer">
<div className="w-10 h-10 rounded-full bg-muted overflow-hidden border border-border cursor-pointer">
<img
src={post.author.avatar}
className="w-full h-full object-cover"
@ -171,10 +171,10 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
{post.pollOptions.map((opt, i) => (
<div
key={i}
className="relative h-10 bg-kodo-slate rounded overflow-hidden cursor-pointer hover:bg-kodo-steel/50 transition-colors border border-border"
className="relative h-10 bg-kodo-slate rounded overflow-hidden cursor-pointer hover:bg-muted/50 transition-colors border border-border"
>
<div
className="absolute top-0 left-0 h-full bg-kodo-steel/20"
className="absolute top-0 left-0 h-full bg-muted/20"
style={{ width: `${opt.votes}%` }}
></div>
<div className="absolute inset-0 flex items-center justify-between px-4">
@ -241,7 +241,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
</Button>
)}
<div className="mt-4 flex gap-4">
<div className="w-8 h-8 rounded-full bg-kodo-steel overflow-hidden flex-shrink-0">
<div className="w-8 h-8 rounded-full bg-muted overflow-hidden flex-shrink-0">
<img
src="https://picsum.photos/id/100/100/100"
className="w-full h-full object-cover"

4
apps/web/src/components/social/SharePostModal.tsx
View file

@ -118,7 +118,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
onClick={() => setMode('quote')}
>
<div className="w-10 h-10 rounded-full bg-kodo-steel/10 flex items-center justify-center text-kodo-steel group-hover:bg-white/5">
<div className="w-10 h-10 rounded-full bg-muted/10 flex items-center justify-center text-kodo-steel group-hover:bg-white/5">
<MessageSquare className="w-5 h-5" />
</div>
<div className="text-left">
@ -129,7 +129,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
</div>
</button>
<div className="h-px bg-kodo-steel/50 my-2 mx-4"></div>
<div className="h-px bg-muted/50 my-2 mx-4"></div>
<button
className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"

2
apps/web/src/components/social/groups/CreateGroupModal.tsx
View file

@ -117,7 +117,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
</div>
</div>
<div
className={`w-10 h-5 rounded-full relative transition-colors ${isPrivate ? 'bg-kodo-cyan' : 'bg-kodo-steel'}`}
className={`w-10 h-5 rounded-full relative transition-colors ${isPrivate ? 'bg-kodo-cyan' : 'bg-muted'}`}
>
<div
className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${isPrivate ? 'left-6' : 'left-1'}`}

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

@ -173,7 +173,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
step={0.1}
aria-labelledby="Zoom"
onChange={(e) => setZoom(Number(e.target.value))}
className="flex-1 h-1 bg-kodo-steel rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-cyan [&::-webkit-slider-thumb]:rounded-full"
className="flex-1 h-1 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-cyan [&::-webkit-slider-thumb]:rounded-full"
/>
</div>
@ -188,7 +188,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
step={1}
aria-labelledby="Rotation"
onChange={(e) => setRotation(Number(e.target.value))}
className="flex-1 h-1 bg-kodo-steel rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-cyan [&::-webkit-slider-thumb]:rounded-full"
className="flex-1 h-1 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-cyan [&::-webkit-slider-thumb]:rounded-full"
/>
</div>

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

@ -138,9 +138,9 @@ export function LoadingState({
<div className={cn('animate-pulse space-y-4', className)}>
{children || (
<>
<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 className="h-4 bg-kodo-slate dark:bg-muted rounded w-3/4"></div>
<div className="h-4 bg-kodo-slate dark:bg-muted rounded w-1/2"></div>
<div className="h-4 bg-kodo-slate dark:bg-muted rounded w-5/6"></div>
</>
)}
</div>

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

@ -109,7 +109,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
const actualVariant = variantMap[variant] || variant;
const styles = {
info: 'bg-kodo-steel/10 border-border/30 text-kodo-steel',
info: 'bg-muted/10 border-border/30 text-kodo-steel',
success: 'bg-kodo-lime/10 border-kodo-lime/30 text-kodo-lime',
warning: 'bg-kodo-gold/10 border-kodo-gold/30 text-kodo-gold',
error: 'bg-kodo-red/10 border-kodo-red/30 text-kodo-red',

2
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-kodo-steel',
offline: 'bg-muted',
away: 'bg-kodo-gold',
idle: 'bg-kodo-gold',
busy: 'bg-kodo-red',

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

@ -130,7 +130,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
const actualVariant = variantMap[variant] || variant;
const styles: Record<string, string> = {
cyan: 'bg-kodo-steel/10 text-kodo-steel border-border/30',
cyan: 'bg-muted/10 text-kodo-steel border-border/30',
magenta: 'bg-kodo-magenta/10 text-kodo-magenta border-kodo-magenta/30',
lime: 'bg-kodo-lime/10 text-kodo-lime border-kodo-lime/30',
gold: 'bg-kodo-gold/10 text-kodo-gold border-kodo-gold/30',

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

@ -157,7 +157,7 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
return (
<div className={cn('w-full', className)} ref={ref} {...props}>
<div className="h-2 bg-kodo-steel rounded-full overflow-hidden">
<div className="h-2 bg-muted rounded-full overflow-hidden">
<div
className={cn(
'h-full transition-all duration-[var(--duration-normal)] shadow-slider-thumb',

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

@ -120,7 +120,7 @@ const TableFooter = React.forwardRef<
<tfoot
ref={ref}
className={cn(
'border-t border-border bg-kodo-steel/30 font-medium [&>tr]:last:border-b-0',
'border-t border-border bg-muted/30 font-medium [&>tr]:last:border-b-0',
className,
)}
{...props}

4
apps/web/src/features/chat/components/ChatInput.tsx
View file

@ -117,9 +117,9 @@ export const ChatInput: React.FC = () => {
{/* Upload Overlay */}
{isDragActive && (
<div className="absolute bottom-full left-0 right-0 h-48 z-50 bg-kodo-steel/10 backdrop-blur-md flex items-center justify-center border-t-2 border-border border-dashed rounded-t-2xl animate-fadeIn">
<div className="absolute bottom-full left-0 right-0 h-48 z-50 bg-muted/10 backdrop-blur-md flex items-center justify-center border-t-2 border-border border-dashed rounded-t-2xl animate-fadeIn">
<div className="text-center">
<div className="w-12 h-12 rounded-full bg-kodo-steel/20 flex items-center justify-center mx-auto mb-2 animate-bounce">
<div className="w-12 h-12 rounded-full bg-muted/20 flex items-center justify-center mx-auto mb-2 animate-bounce">
<Paperclip className="w-6 h-6 text-kodo-steel" />
</div>
<p className="text-kodo-steel font-mono uppercase tracking-widest text-sm">

4
apps/web/src/features/chat/components/ChatRoom.tsx
View file

@ -119,7 +119,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
{/* Welcome Message for Empty Room */}
{currentMessages.length === 0 && (
<div className="flex flex-col items-center justify-center h-[50vh] text-center space-y-4 opacity-60">
<div className="w-12 h-12 rounded-xl bg-kodo-steel/10 flex items-center justify-center border border-border/20">
<div className="w-12 h-12 rounded-xl bg-muted/10 flex items-center justify-center border border-border/20">
<MessageSquare className="w-6 h-6 text-kodo-steel" />
</div>
<div>
@ -144,7 +144,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
className={cn(
'transition-all duration-[var(--duration-slow)] animate-slideUp',
highlightedMessageId === msg.id &&
'bg-kodo-steel/10 rounded-xl -mx-4 px-4 py-2 ring-1 ring-kodo-steel/30',
'bg-muted/10 rounded-xl -mx-4 px-4 py-2 ring-1 ring-kodo-steel/30',
)}
>
<ChatMessageComponent message={msg} />

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

@ -124,7 +124,7 @@ export function PlaylistCard({
</div>
) : (
<div
className="bg-kodo-steel/80 text-white px-2 py-1 rounded-full text-xs flex items-center gap-1"
className="bg-muted/80 text-white px-2 py-1 rounded-full text-xs flex items-center gap-1"
aria-label="Playlist privée"
>
<Lock className="w-3 h-3" aria-hidden="true" />

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

@ -61,7 +61,7 @@ export function PlaylistHeader({ playlist, className }: PlaylistHeaderProps) {
</div>
) : (
<div
className="bg-kodo-steel/90 text-white px-4 py-1.5 rounded-full text-sm flex items-center gap-2"
className="bg-muted/90 text-white px-4 py-1.5 rounded-full text-sm flex items-center gap-2"
aria-label="Playlist privée"
>
<Lock className="w-4 h-4" aria-hidden="true" />

6
apps/web/src/features/playlists/components/PlaylistTrackItem.tsx
View file

@ -64,7 +64,7 @@ export function PlaylistTrackItem({
className={cn(
'flex items-center gap-2 sm:gap-4 p-3 sm:p-4 rounded-lg',
'hover:bg-kodo-void dark:hover:bg-kodo-graphite',
'active:bg-kodo-slate dark:active:bg-kodo-steel',
'active:bg-kodo-slate dark:active:bg-muted',
'transition-colors duration-[var(--duration-fast)] touch-manipulation',
onTrackClick && 'cursor-pointer',
className,
@ -92,7 +92,7 @@ export function PlaylistTrackItem({
<button
type="button"
onClick={handlePlayClick}
className="p-1 rounded-full hover:bg-kodo-slate dark:hover:bg-kodo-steel active:bg-kodo-slate dark:active:bg-kodo-steel transition-colors duration-[var(--duration-fast)] touch-manipulation min-h-8 min-w-8 sm:min-h-0 sm:min-w-0"
className="p-1 rounded-full hover:bg-kodo-slate dark:hover:bg-muted active:bg-kodo-slate dark:active:bg-muted transition-colors duration-[var(--duration-fast)] touch-manipulation min-h-8 min-w-8 sm:min-h-0 sm:min-w-0"
aria-label={
isPlaying
? `Mettre en pause ${track.title}`
@ -119,7 +119,7 @@ export function PlaylistTrackItem({
className="w-10 h-10 sm:w-12 sm:h-12 rounded-md object-cover"
/>
) : (
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-md bg-kodo-slate dark:bg-kodo-steel flex items-center justify-center">
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-md bg-kodo-slate dark:bg-muted flex items-center justify-center">
<Music className="h-5 w-5 sm:h-6 sm:w-6 text-muted-foreground dark:text-muted-foreground" />
</div>
)}

4
apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx
View file

@ -53,11 +53,11 @@ export function PlaylistListToolbar({
onClick={() => onViewChange('list')}
className={cn(
'flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-all duration-[var(--duration-fast)]',
'hover:bg-kodo-slate dark:hover:bg-kodo-steel',
'hover:bg-kodo-slate dark:hover:bg-muted',
'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
'touch-manipulation',
currentView === 'list'
? 'bg-white dark:bg-kodo-steel text-kodo-cyan dark:text-kodo-cyan shadow-sm'
? 'bg-white dark:bg-muted text-kodo-cyan dark:text-kodo-cyan shadow-sm'
: 'text-muted-foreground dark:text-muted-foreground',
)}
aria-label="Affichage en liste"

12
apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
View file

@ -73,20 +73,20 @@ export function FileToolbar({
)}
>
<div className="flex flex-col sm:flex-row gap-4 w-full xl:w-auto">
<div className="h-10 w-full sm:w-64 rounded-lg bg-kodo-steel/50" />
<div className="h-10 w-full sm:w-64 rounded-lg bg-muted/50" />
<div className="flex items-center gap-2">
<div className="h-4 w-4 rounded bg-kodo-steel/50 shrink-0" />
<div className="h-4 w-4 rounded bg-muted/50 shrink-0" />
<div className="flex gap-2">
{tagsToShow.map((_, i) => (
<div key={i} className="h-6 w-16 rounded bg-kodo-steel/50" />
<div key={i} className="h-6 w-16 rounded bg-muted/50" />
))}
</div>
</div>
</div>
<div className="flex gap-2 w-full xl:w-auto">
<div className="h-10 w-24 rounded-lg bg-kodo-steel/50" />
<div className="h-10 w-32 rounded-lg bg-kodo-steel/50" />
<div className="h-10 w-20 rounded-lg bg-kodo-steel/50" />
<div className="h-10 w-24 rounded-lg bg-muted/50" />
<div className="h-10 w-32 rounded-lg bg-muted/50" />
<div className="h-10 w-20 rounded-lg bg-muted/50" />
</div>
</div>
);