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

ui(tokens): migrate bg/border-kodo-red → destructive, bg/border-kodo-lime → success (25 files)

Browse source 
Complete semantic color token migration for background and border variants:
- bg-kodo-red → bg-destructive
- border-kodo-red → border-destructive
- bg-kodo-lime → bg-success
- border-kodo-lime → border-success

Covers UI primitives (badge, alert), forms, settings, social, playlists,
admin, education, and marketplace components.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-09 00:17:14 +01:00
parent c444a6203c
commit fc4259a827
25 changed files with 50 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -24,8 +24,8 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-red rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-red/30 bg-kodo-red/10 flex justify-between items-center">
<div className="relative w-full max-w-md bg-kodo-graphite border border-destructive rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-destructive/30 bg-destructive/10 flex justify-between items-center">
<h3 className="font-bold text-destructive flex items-center gap-2">
<ShieldBan className="w-5 h-5 fill-current" /> Suspend User
</h3>
@ -46,7 +46,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
Reason
</label>
<select
className="w-full bg-kodo-void border border-border rounded p-2 text-white focus:border-kodo-red outline-none text-sm"
className="w-full bg-kodo-void border border-border rounded p-2 text-white focus:border-destructive outline-none text-sm"
value={reason}
onChange={(e) => setReason(e.target.value)}
>
@ -64,7 +64,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
Details (Internal Note)
</label>
<textarea
className="w-full bg-kodo-void border border-border rounded p-2 text-white focus:border-kodo-red outline-none text-sm resize-none h-24"
className="w-full bg-kodo-void border border-border rounded p-2 text-white focus:border-destructive outline-none text-sm resize-none h-24"
placeholder="Provide context for this ban..."
value={details}
onChange={(e) => setDetails(e.target.value)}
@ -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-muted'}`}
className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${isPermanent ? 'bg-destructive' : 'bg-muted'}`}
>
<div
className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${isPermanent ? 'left-6' : 'left-1'}`}
@ -111,7 +111,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
<input
type="number"
min="1"
className="w-full bg-kodo-void border border-border rounded p-2 text-white focus:border-kodo-red outline-none text-sm"
className="w-full bg-kodo-void border border-border rounded p-2 text-white focus:border-destructive outline-none text-sm"
value={duration}
onChange={(e) => setDuration(e.target.value)}
/>
@ -125,7 +125,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
</Button>
<Button
variant="primary"
className="bg-kodo-red hover:bg-kodo-red border-kodo-red text-white"
className="bg-destructive hover:bg-destructive border-destructive text-white"
onClick={() =>
onConfirm(
reason,

2
apps/web/src/components/developer/APIPlaygroundView.tsx
View file

@ -119,7 +119,7 @@ export const APIPlaygroundView: React.FC = () => {
<h3 className="font-bold text-white">Response</h3>
{response && (
<div className="flex gap-2">
<span className="text-xs font-bold text-success bg-kodo-lime/10 px-2 py-1 rounded">
<span className="text-xs font-bold text-success bg-success/10 px-2 py-1 rounded">
200 OK
</span>
<span className="text-xs font-bold text-muted-foreground bg-white/10 px-2 py-1 rounded">

4
apps/web/src/components/education/CourseCard.tsx
View file

@ -47,10 +47,10 @@ export const CourseCard: React.FC<CourseCardProps> = ({
<span
className={`text-xs px-2 py-0.5 rounded uppercase font-bold ${
course.level === 'Advanced'
? 'bg-kodo-red/20 text-destructive'
? 'bg-destructive/20 text-destructive'
: course.level === 'Intermediate'
? 'bg-kodo-gold/20 text-kodo-gold'
: 'bg-kodo-lime/20 text-success'
: 'bg-success/20 text-success'
}`}
>
{course.level}

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

@ -63,11 +63,11 @@ export const QuizModal: React.FC<QuizModalProps> = ({
<div className="relative w-full max-w-md bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden p-8 text-center">
<div className="mb-6 flex justify-center">
{passed ? (
<div className="w-20 h-20 bg-kodo-lime/20 rounded-full flex items-center justify-center text-success border-2 border-kodo-lime animate-pulse">
<div className="w-20 h-20 bg-success/20 rounded-full flex items-center justify-center text-success border-2 border-success animate-pulse">
<CheckCircle className="w-10 h-10" />
</div>
) : (
<div className="w-20 h-20 bg-kodo-red/20 rounded-full flex items-center justify-center text-destructive border-2 border-kodo-red">
<div className="w-20 h-20 bg-destructive/20 rounded-full flex items-center justify-center text-destructive border-2 border-destructive">
<AlertCircle className="w-10 h-10" />
</div>
)}

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

@ -21,11 +21,11 @@ const ALERT_ICONS = {
const ALERT_STYLES = {
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-success',
'bg-success/10 border-success/30 text-kodo-text-main dark:bg-success/20 dark:border-success/40 dark:text-success',
warning:
'bg-kodo-gold/10 border-kodo-gold/30 text-kodo-text-main dark:bg-kodo-gold/20 dark:border-kodo-gold/40 dark:text-kodo-gold',
error:
'bg-kodo-red/10 border-kodo-red/30 text-kodo-text-main dark:bg-kodo-red/20 dark:border-kodo-red/40 dark:text-destructive',
'bg-destructive/10 border-destructive/30 text-kodo-text-main dark:bg-destructive/20 dark:border-destructive/40 dark:text-destructive',
};
const ICON_STYLES = {

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

@ -38,11 +38,11 @@ export function PasswordStrengthIndicator({
const strengthLabels = ['Very Weak', 'Weak', 'Fair', 'Good', 'Strong'];
const strengthColors = [
'bg-kodo-red',
'bg-destructive',
'bg-kodo-orange',
'bg-kodo-gold',
'bg-kodo-cyan',
'bg-kodo-lime',
'bg-success',
];
const strengthTextColors = [
'text-destructive',

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

@ -132,8 +132,8 @@ export function RegisterForm({
emailValue &&
emailValidation &&
(emailValidation.valid
? 'border-kodo-lime focus-visible:ring-kodo-lime'
: 'border-kodo-red focus-visible:ring-red-500'),
? 'border-success focus-visible:ring-kodo-lime'
: 'border-destructive focus-visible:ring-red-500'),
)}
/>
{emailValue && emailValidation && (

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

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

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

@ -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-muted'}`}
className={`w-8 h-4 rounded-full relative transition-colors ${isCollaborative ? 'bg-success' : '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'}`}

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

@ -45,7 +45,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={() => setShowDeleteConfirm(false)}
></div>
<div className="relative w-full max-w-sm bg-kodo-graphite border border-kodo-red rounded-xl shadow-2xl animate-scaleIn p-6 text-center">
<div className="relative w-full max-w-sm bg-kodo-graphite border border-destructive rounded-xl shadow-2xl animate-scaleIn p-6 text-center">
<h3 className="text-xl font-bold text-white mb-2">
Delete "{playlist.title}"?
</h3>
@ -58,7 +58,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
</Button>
<Button
variant="primary"
className="bg-kodo-red hover:bg-kodo-red border-kodo-red"
className="bg-destructive hover:bg-destructive border-destructive"
onClick={handleDelete}
>
Delete
@ -142,7 +142,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
<div className="p-4 border-t border-border bg-kodo-ink flex justify-between items-center">
<Button
variant="ghost"
className="text-destructive hover:bg-kodo-red/10"
className="text-destructive hover:bg-destructive/10"
onClick={() => setShowDeleteConfirm(true)}
>
Delete Playlist

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

@ -113,7 +113,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
<span>
{playlist.is_public ? 'Public Playlist' : 'Private Playlist'}
</span>
{/* {playlist.isCollaborative && <span className="bg-kodo-lime/20 text-success px-2 py-0.5 rounded">Collaborative</span>} */}
{/* {playlist.isCollaborative && <span className="bg-success/20 text-success px-2 py-0.5 rounded">Collaborative</span>} */}
</div>
<h1 className="text-4xl md:text-6xl font-display font-bold text-white mb-4 leading-tight">
{playlist.title}

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

@ -75,7 +75,7 @@ export const QueueView: React.FC = () => {
</Button>
<Button
variant="ghost"
className="text-destructive hover:bg-kodo-red/10"
className="text-destructive hover:bg-destructive/10"
onClick={clearQueue}
icon={<Trash2 className="w-4 h-4" />}
>
@ -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-muted'}`}
className={`w-8 h-4 rounded-full relative transition-colors ${autoplay ? 'bg-success' : '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/live/LiveStreamDetailView.tsx
View file

@ -111,7 +111,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
<div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black to-transparent pt-24">
<div className="flex items-end justify-between">
<div className="flex items-center gap-4">
<div className="w-14 h-14 rounded-full border-2 border-kodo-red p-0.5">
<div className="w-14 h-14 rounded-full border-2 border-destructive p-0.5">
<img
src="https://picsum.photos/id/100/100"
className="w-full h-full rounded-full object-cover"

6
apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
View file

@ -56,7 +56,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
key={i}
className="flex items-start gap-4 text-sm text-kodo-text-main"
>
<div className="mt-0.5 bg-kodo-lime/10 p-0.5 rounded-full">
<div className="mt-0.5 bg-success/10 p-0.5 rounded-full">
<Check className="w-3 h-3 text-success" />
</div>
{feat}
@ -71,13 +71,13 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
</h4>
<ul className="space-y-2">
<li className="flex items-start gap-4 text-sm text-muted-foreground">
<div className="mt-0.5 bg-kodo-red/10 p-0.5 rounded-full">
<div className="mt-0.5 bg-destructive/10 p-0.5 rounded-full">
<XCircle className="w-3 h-3 text-destructive" />
</div>
Do not resell or redistribute as a sample pack.
</li>
<li className="flex items-start gap-4 text-sm text-muted-foreground">
<div className="mt-0.5 bg-kodo-red/10 p-0.5 rounded-full">
<div className="mt-0.5 bg-destructive/10 p-0.5 rounded-full">
<XCircle className="w-3 h-3 text-destructive" />
</div>
Content ID registration is prohibited.

4
apps/web/src/components/notifications/NotificationItem.tsx
View file

@ -43,9 +43,9 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
if (notification.read) return 'bg-transparent';
switch (notification.type) {
case 'sale':
return 'bg-kodo-lime/5 border-l-2 border-l-kodo-lime';
return 'bg-success/5 border-l-2 border-l-kodo-lime';
case 'security':
return 'bg-kodo-red/5 border-l-2 border-l-kodo-red';
return 'bg-destructive/5 border-l-2 border-l-kodo-red';
default:
return 'bg-kodo-cyan/5 border-l-2 border-l-kodo-cyan';
}

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

@ -213,8 +213,8 @@ export const SellerDashboardView: React.FC<SellerDashboardProps> = ({
<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">
<div className="w-2 h-2 bg-kodo-lime rounded-full"></div>
<div className="absolute left-0 top-1.5 w-5 h-5 bg-kodo-graphite border border-success rounded-full flex items-center justify-center">
<div className="w-2 h-2 bg-success rounded-full"></div>
</div>
<div className="text-sm text-white font-bold">
{sale.product}

6
apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
View file

@ -35,8 +35,8 @@ export const DeleteAccountConfirmModal: React.FC<
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={loading ? undefined : onClose}
></div>
<div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-red rounded-xl shadow-2xl overflow-hidden animate-scaleIn">
<div className="p-4 border-b border-kodo-red/30 bg-kodo-red/10 flex justify-between items-center">
<div className="relative w-full max-w-md bg-kodo-graphite border border-destructive rounded-xl shadow-2xl overflow-hidden animate-scaleIn">
<div className="p-4 border-b border-destructive/30 bg-destructive/10 flex justify-between items-center">
<h3 className="font-bold text-destructive flex items-center gap-2">
<AlertTriangle className="w-5 h-5 fill-current" /> PERMANENT
DELETION
@ -84,7 +84,7 @@ export const DeleteAccountConfirmModal: React.FC<
</Button>
<Button
variant="primary"
className="bg-kodo-red hover:bg-kodo-red border-kodo-red text-white"
className="bg-destructive hover:bg-destructive border-destructive text-white"
onClick={handleDelete}
disabled={loading}
>

10
apps/web/src/components/settings/account/DeleteAccountView.tsx
View file

@ -49,12 +49,12 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
<Card
variant="default"
className="border-kodo-red/30 relative overflow-hidden"
className="border-destructive/30 relative overflow-hidden"
>
<div className="absolute top-0 left-0 w-1 h-full bg-kodo-red"></div>
<div className="absolute top-0 left-0 w-1 h-full bg-destructive"></div>
<div className="flex gap-4 mb-6">
<div className="w-12 h-12 bg-kodo-red/10 rounded-full flex items-center justify-center text-destructive flex-shrink-0">
<div className="w-12 h-12 bg-destructive/10 rounded-full flex items-center justify-center text-destructive flex-shrink-0">
<AlertTriangle className="w-6 h-6" />
</div>
<div>
@ -140,13 +140,13 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
placeholder="DELETE"
value={confirmText}
onChange={(e) => setConfirmText(e.target.value)}
className="border-kodo-red/50 focus:border-kodo-red focus:ring-kodo-red"
className="border-destructive/50 focus:border-destructive focus:ring-kodo-red"
/>
</div>
<Button
variant="primary"
className="w-full bg-kodo-red hover:bg-kodo-red text-white border-kodo-red disabled:bg-kodo-graphite disabled:border-border disabled:text-muted-foreground"
className="w-full bg-destructive hover:bg-destructive text-white border-destructive disabled:bg-kodo-graphite disabled:border-border disabled:text-muted-foreground"
disabled={!isFormValid}
onClick={() => setShowFinalModal(true)}
icon={<Trash2 className="w-4 h-4" />}

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

@ -99,7 +99,7 @@ export const BackupsView: React.FC = () => {
>
<div className="flex items-center gap-4 mb-2 md:mb-0 w-full md:w-auto">
<div
className={`p-2 rounded-full ${backup.status === 'Success' ? 'bg-kodo-lime/10 text-success' : 'bg-kodo-red/10 text-destructive'}`}
className={`p-2 rounded-full ${backup.status === 'Success' ? 'bg-success/10 text-success' : 'bg-destructive/10 text-destructive'}`}
>
{backup.status === 'Success' ? (
<CheckCircle className="w-5 h-5" />

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

@ -44,7 +44,7 @@ export const CloudIntegrationView: React.FC = () => {
</div>
</div>
{isConnected && (
<div className="flex items-center gap-2 text-success bg-kodo-lime/10 px-4 py-2 rounded-lg border border-kodo-lime/20">
<div className="flex items-center gap-2 text-success bg-success/10 px-4 py-2 rounded-lg border border-success/20">
<CheckCircle className="w-5 h-5" /> Connected
</div>
)}

2
apps/web/src/components/settings/integrations/IntegrationsView.tsx
View file

@ -171,7 +171,7 @@ export const IntegrationsView: React.FC = () => {
</Button>
<Button
variant="ghost"
className="flex-1 text-destructive hover:bg-kodo-red/10 border border-kodo-red/30"
className="flex-1 text-destructive hover:bg-destructive/10 border border-destructive/30"
onClick={() => toggleConnection(integration.id)}
>
Disconnect

2
apps/web/src/components/settings/security/SessionManagement.tsx
View file

@ -99,7 +99,7 @@ export const SessionManagement: React.FC = () => {
{session.ip_address}
</h4>
{session.is_current && (
<span className="bg-kodo-lime/10 text-success text-xs px-2 py-0.5 rounded border border-success/30 font-bold">
<span className="bg-success/10 text-success text-xs px-2 py-0.5 rounded border border-success/30 font-bold">
CURRENT DEVICE
</span>
)}

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

@ -103,7 +103,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
onClose();
}}
>
<div className="w-10 h-10 rounded-full bg-kodo-lime/10 flex items-center justify-center text-success group-hover:bg-kodo-lime/20">
<div className="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success group-hover:bg-success/20">
<Repeat className="w-5 h-5" />
</div>
<div className="text-left">

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

@ -110,9 +110,9 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
const styles = {
info: 'bg-muted/10 border-border/30 text-kodo-steel',
success: 'bg-kodo-lime/10 border-kodo-lime/30 text-success',
success: 'bg-success/10 border-success/30 text-success',
warning: 'bg-kodo-gold/10 border-kodo-gold/30 text-kodo-gold',
error: 'bg-kodo-red/10 border-kodo-red/30 text-destructive',
error: 'bg-destructive/10 border-destructive/30 text-destructive',
};
const icons = {

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

@ -132,7 +132,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
const styles: Record<string, string> = {
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-success border-kodo-lime/30',
lime: 'bg-success/10 text-success border-success/30',
gold: 'bg-kodo-gold/10 text-kodo-gold border-kodo-gold/30',
terminal:
'bg-kodo-terminal/10 text-kodo-terminal border-kodo-terminal/30 font-mono',