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

ui(tokens): migrate border-kodo-steel to border-border (86 files, 269 instances)

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

Covers UI primitives (checkbox, badge, modal, table, textarea, alert,
radio-group, avatar), all modals, settings views, social features,
playlist views, inventory, chat, commerce, and cloud file browser.

Only story/test files retain the legacy token.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-09 00:07:00 +01:00
parent 7113d35a4a
commit 68417c667c
86 changed files with 269 additions and 269 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -134,7 +134,7 @@ export function AdvancedFilters({
open={isOpen}
onOpenChange={handleToggle}
defaultOpen={defaultOpen}
triggerClassName="p-2 rounded-lg border border-kodo-steel bg-kodo-void/50 hover:bg-kodo-void transition-colors"
triggerClassName="p-2 rounded-lg border border-border bg-kodo-void/50 hover:bg-kodo-void transition-colors"
contentClassName={cn('pt-3', contentClassName)}
>
<div className="space-y-4">{children}</div>

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-kodo-steel/30 text-kodo-steel',
'w-full bg-kodo-steel/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,

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

@ -141,7 +141,7 @@ export function OfflineIndicator() {
if (isProcessing && queueSize > 0 && shouldShowSyncBar) {
return (
<>
<div className="fixed top-0 left-0 right-0 bg-kodo-cyan/90 backdrop-blur-sm text-kodo-void px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-lg border-b border-kodo-steel">
<div className="fixed top-0 left-0 right-0 bg-kodo-cyan/90 backdrop-blur-sm text-kodo-void px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-lg border-b border-border">
<Loader2 className="w-4 h-4 animate-spin" />
<span>
Synchronisation en cours

12
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-kodo-steel/30';
return 'bg-kodo-steel/20 text-kodo-steel border-border/30';
case 'low':
return 'bg-kodo-steel/30 text-kodo-secondary border-kodo-steel/50';
return 'bg-kodo-steel/30 text-kodo-secondary border-border/50';
default:
return 'bg-kodo-steel/30 text-kodo-secondary border-kodo-steel/50';
return 'bg-kodo-steel/30 text-kodo-secondary border-border/50';
}
}
@ -118,7 +118,7 @@ export function OfflineQueueManager({
>
<div className="space-y-4">
{/* Queue Summary */}
<div className="flex items-center justify-between p-4 bg-kodo-ink/50 rounded-lg border border-kodo-steel">
<div className="flex items-center justify-between p-4 bg-kodo-ink/50 rounded-lg border border-border">
<div className="flex items-center gap-2">
<Clock className="w-5 h-5 text-kodo-steel" />
<span className="text-sm text-kodo-secondary">
@ -151,7 +151,7 @@ export function OfflineQueueManager({
{queue.map((request) => (
<div
key={request.id}
className="p-4 bg-kodo-ink/30 rounded-lg border border-kodo-steel hover:border-kodo-steel/50 transition-colors"
className="p-4 bg-kodo-ink/30 rounded-lg border border-border hover:border-border/50 transition-colors"
>
<div className="flex items-start justify-between gap-4">
<div className="flex-1 min-w-0">
@ -213,7 +213,7 @@ export function OfflineQueueManager({
{/* Info Message */}
{queue.length > 0 && (
<div className="p-4 bg-kodo-steel/10 border border-kodo-steel/20 rounded-lg text-xs text-kodo-secondary">
<div className="p-4 bg-kodo-steel/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

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

@ -46,7 +46,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
Reason
</label>
<select
className="w-full bg-kodo-void border border-kodo-steel 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-kodo-red outline-none text-sm"
value={reason}
onChange={(e) => setReason(e.target.value)}
>
@ -64,14 +64,14 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
Details (Internal Note)
</label>
<textarea
className="w-full bg-kodo-void border border-kodo-steel 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-kodo-red outline-none text-sm resize-none h-24"
placeholder="Provide context for this ban..."
value={details}
onChange={(e) => setDetails(e.target.value)}
/>
</div>
<div className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel">
<div className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-border">
<div className="flex items-center gap-4">
<Calendar className="w-5 h-5 text-muted-foreground" />
<div>
@ -111,7 +111,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
<input
type="number"
min="1"
className="w-full bg-kodo-void border border-kodo-steel 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-kodo-red outline-none text-sm"
value={duration}
onChange={(e) => setDuration(e.target.value)}
/>
@ -119,7 +119,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
)}
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>

4
apps/web/src/components/commerce/CartItem.tsx
View file

@ -37,10 +37,10 @@ export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
<h4 className="font-bold text-white text-lg">{product.title}</h4>
<p className="text-muted-foreground text-sm mb-2">{product.author}</p>
<div className="flex items-center justify-center md:justify-start gap-2 text-xs">
<span className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded flex items-center gap-1">
<span className="px-2 py-1 bg-kodo-ink border border-border rounded flex items-center gap-1">
<Tag className="w-3 h-3 text-muted-foreground" /> {licenseName} License
</span>
<span className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded uppercase font-bold text-muted-foreground">
<span className="px-2 py-1 bg-kodo-ink border border-border rounded uppercase font-bold text-muted-foreground">
{product.type}
</span>
</div>

2
apps/web/src/components/commerce/WishlistView.tsx
View file

@ -157,7 +157,7 @@ export const WishlistView: React.FC = () => {
</div>
</div>
<div className="flex gap-2 mt-4 pt-4 border-t border-kodo-steel/30">
<div className="flex gap-2 mt-4 pt-4 border-t border-border/30">
<Button
variant="secondary"
size="sm"

2
apps/web/src/components/commerce/modals/PromoCodeModal.tsx
View file

@ -35,7 +35,7 @@ export const PromoCodeModal: React.FC<PromoCodeModalProps> = ({
onClick={onClose}
></div>
<div className="relative w-full max-w-sm bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<Tag className="w-4 h-4 text-muted-foreground" /> Add Promo Code
</h3>

10
apps/web/src/components/dashboard/ActivityGraph.tsx
View file

@ -77,9 +77,9 @@ export function ActivityGraph() {
<CardContent className="flex-1 flex items-end justify-between gap-2 pt-8 pb-4 px-6 relative">
{/* Lignes de repère (Grid lines) */}
<div className="absolute inset-0 px-6 pt-8 pb-10 flex flex-col justify-between pointer-events-none opacity-20">
<div className="border-t border-dashed border-kodo-steel w-full h-0" />
<div className="border-t border-dashed border-kodo-steel w-full h-0" />
<div className="border-t border-dashed border-kodo-steel w-full h-0" />
<div className="border-t border-dashed border-border w-full h-0" />
<div className="border-t border-dashed border-border w-full h-0" />
<div className="border-t border-dashed border-border w-full h-0" />
</div>
{/* Barres Graphiques */}
@ -120,12 +120,12 @@ export function ActivityGraph() {
isHovered ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"
)}
>
<div className="bg-kodo-ink border border-kodo-steel/50 px-3 py-2 rounded-lg shadow-xl whitespace-nowrap">
<div className="bg-kodo-ink border border-border/50 px-3 py-2 rounded-lg shadow-xl whitespace-nowrap">
<div className="text-xs font-bold text-white mb-0.5">{point.value} écoutes</div>
<div className="text-xs text-kodo-text-dim font-mono">{point.label}</div>
</div>
{/* Triangle du tooltip */}
<div className="w-2 h-2 bg-kodo-ink border-b border-r border-kodo-steel/50 rotate-45 absolute -bottom-1 left-1/2 -translate-x-1/2" />
<div className="w-2 h-2 bg-kodo-ink border-b border-r border-border/50 rotate-45 absolute -bottom-1 left-1/2 -translate-x-1/2" />
</div>
{/* Label Axe X (tous les 3 ou 5 points selon densité) */}

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

@ -67,7 +67,7 @@ export const TrackList: React.FC = () => {
{[1, 2, 3, 4, 5].map((i) => (
<div
key={i}
className="h-16 bg-kodo-ink/50 animate-pulse rounded-xl border border-kodo-steel/30"
className="h-16 bg-kodo-ink/50 animate-pulse rounded-xl border border-border/30"
></div>
))}
</div>
@ -93,7 +93,7 @@ export const TrackList: React.FC = () => {
if (tracks.length === 0) {
return (
<div className="text-muted-foreground text-center py-12 bg-kodo-ink/30 rounded-xl border border-dashed border-kodo-steel">
<div className="text-muted-foreground text-center py-12 bg-kodo-ink/30 rounded-xl border border-dashed border-border">
<BarChart3 className="w-8 h-8 mx-auto mb-2 opacity-50" />
<p>No tracks trending right now.</p>
</div>
@ -110,7 +110,7 @@ export const TrackList: React.FC = () => {
key={track.id}
className={`
group flex items-center gap-4 p-4 rounded-xl transition-all border cursor-pointer relative overflow-hidden
${isCurrent ? 'bg-kodo-cyan/10 border-kodo-cyan/30' : 'bg-kodo-ink border-transparent hover:border-kodo-steel/50 hover:bg-kodo-ink/80'}
${isCurrent ? 'bg-kodo-cyan/10 border-kodo-cyan/30' : 'bg-kodo-ink border-transparent hover:border-border/50 hover:bg-kodo-ink/80'}
`}
onClick={() => handlePlay(track)}
>

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

@ -62,7 +62,7 @@ export const APIPlaygroundView: React.FC = () => {
Endpoint
</label>
<select
className="w-full bg-kodo-ink border border-kodo-steel rounded p-4 text-white focus:border-kodo-steel outline-none font-mono text-sm"
className="w-full bg-kodo-ink border border-border rounded p-4 text-white focus:border-border outline-none font-mono text-sm"
value={selectedEndpoint.path}
onChange={(e) => {
const ep = ENDPOINTS.find((p) => p.path === e.target.value);
@ -85,7 +85,7 @@ export const APIPlaygroundView: React.FC = () => {
Body (JSON)
</label>
<textarea
className="w-full bg-kodo-ink border border-kodo-steel rounded p-4 text-white focus:border-kodo-steel outline-none font-mono text-xs h-48 resize-none"
className="w-full bg-kodo-ink border border-border rounded p-4 text-white focus:border-border outline-none font-mono text-xs h-48 resize-none"
value={params}
onChange={(e) => setParams(e.target.value)}
/>
@ -129,7 +129,7 @@ export const APIPlaygroundView: React.FC = () => {
)}
</div>
<div className="flex-1 bg-black/30 rounded border border-kodo-steel/50 p-4 relative group">
<div className="flex-1 bg-black/30 rounded border border-border/50 p-4 relative group">
{response ? (
<>
<pre className="text-xs text-kodo-lime font-mono whitespace-pre-wrap overflow-auto h-full max-h-layout-drawer">

6
apps/web/src/components/developer/DeveloperDashboardView.tsx
View file

@ -96,7 +96,7 @@ export const DeveloperDashboardView: React.FC = () => {
return (
<div className="space-y-8 animate-fadeIn pb-20">
{/* Header */}
<div className="flex flex-col md:flex-row justify-between items-end gap-4 border-b border-kodo-steel/50 pb-6">
<div className="flex flex-col md:flex-row justify-between items-end gap-4 border-b border-border/50 pb-6">
<div>
<h1 className="text-3xl font-display font-bold text-white mb-2">
DEVELOPER PORTAL
@ -166,7 +166,7 @@ export const DeveloperDashboardView: React.FC = () => {
<div className="overflow-x-auto">
<table className="w-full text-left">
<thead>
<tr className="text-xs text-muted-foreground uppercase border-b border-kodo-steel/50">
<tr className="text-xs text-muted-foreground uppercase border-b border-border/50">
<th className="pb-3 pl-4">Name</th>
<th className="pb-3">Key Prefix</th>
<th className="pb-3">Created</th>
@ -178,7 +178,7 @@ export const DeveloperDashboardView: React.FC = () => {
{keys.map((key) => (
<tr
key={key.id}
className="border-b border-kodo-steel/20 hover:bg-white/5 transition-colors"
className="border-b border-border/20 hover:bg-white/5 transition-colors"
>
<td className="py-4 pl-4 font-bold text-white">{key.name}</td>
<td className="py-4 font-mono text-kodo-gold">

14
apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
View file

@ -96,9 +96,9 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-md"
onClick={step === 1 ? onClose : undefined}
></div>
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden glass-hud flex flex-col max-h-layout-modal">
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden glass-hud flex flex-col max-h-layout-modal">
{/* Header - Fixed */}
<div className="p-6 border-b border-kodo-steel/50 flex justify-between items-center bg-white/5 flex-none z-10">
<div className="p-6 border-b border-border/50 flex justify-between items-center bg-white/5 flex-none z-10">
<h3 className="text-xl font-bold text-white flex items-center gap-3 font-display">
<div className="w-8 h-8 rounded-lg bg-kodo-gold/20 flex items-center justify-center border border-kodo-gold/30">
<Key className="w-5 h-5 text-kodo-gold" />
@ -124,7 +124,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
onChange={(e) => setName(e.target.value)}
autoFocus
disabled={isGenerating}
className="bg-kodo-void/50 border-kodo-steel focus:border-kodo-cyan h-12 text-lg w-full"
className="bg-kodo-void/50 border-border focus:border-kodo-cyan h-12 text-lg w-full"
/>
</div>
@ -140,7 +140,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
"flex items-center justify-between p-4 rounded-xl border cursor-pointer transition-all duration-[var(--duration-fast)] group relative overflow-hidden",
selectedScopes.includes(scope.id)
? "bg-kodo-cyan/10 border-kodo-cyan/50 shadow-card-glow-cyan"
: "bg-kodo-void/30 border-kodo-steel/50 hover:border-kodo-steel hover:bg-white/5"
: "bg-kodo-void/30 border-border/50 hover:border-border hover:bg-white/5"
)}
>
<div className="flex items-center gap-4 z-10 relative">
@ -148,7 +148,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
"w-5 h-5 rounded border flex items-center justify-center transition-colors flex-none",
selectedScopes.includes(scope.id)
? "bg-kodo-cyan border-kodo-cyan"
: "border-kodo-steel group-hover:border-kodo-content-dim"
: "border-border group-hover:border-kodo-content-dim"
)}>
{selectedScopes.includes(scope.id) && <Check className="w-3 h-3 text-black" />}
</div>
@ -193,7 +193,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
</p>
</div>
<div className="bg-black/40 border border-kodo-steel/50 rounded-xl p-1 flex items-center gap-2 relative group overflow-hidden">
<div className="bg-black/40 border border-border/50 rounded-xl p-1 flex items-center gap-2 relative group overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent skew-x-12 translate-x-[-200%] group-hover:animate-shimmer"></div>
<div className="flex-1 px-4 py-3 font-mono text-sm text-kodo-gold overflow-x-auto no-scrollbar whitespace-nowrap text-left">
{generatedKey}
@ -213,7 +213,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
</div>
{/* Footer - Fixed */}
<div className="p-6 border-t border-kodo-steel/50 bg-white/5 flex justify-end gap-3 backdrop-blur-sm flex-none z-10 transition-colors">
<div className="p-6 border-t border-border/50 bg-white/5 flex justify-end gap-3 backdrop-blur-sm flex-none z-10 transition-colors">
{step === 1 ? (
<>
<Button

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

@ -18,7 +18,7 @@ export const CourseCard: React.FC<CourseCardProps> = ({
return (
<Card
variant="default"
className="group p-0 overflow-hidden cursor-pointer hover:border-kodo-steel/50 transition-all flex flex-col h-full"
className="group p-0 overflow-hidden cursor-pointer hover:border-border/50 transition-all flex flex-col h-full"
onClick={() => onClick(course)}
>
{/* Cover */}

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

@ -69,7 +69,7 @@ export const MyCoursesView: React.FC<MyCoursesViewProps> = ({ onContinue }) => {
{/* Continue Learning Banner */}
{lastActiveCourse && activeTab === 'in_progress' && (
<div className="bg-kodo-ink p-6 rounded-2xl border border-kodo-steel flex flex-col md:flex-row gap-6 items-center shadow-2xl">
<div className="bg-kodo-ink p-6 rounded-2xl border border-border flex flex-col md:flex-row gap-6 items-center shadow-2xl">
<div
className="relative w-full md:w-64 aspect-video rounded-lg overflow-hidden group cursor-pointer"
onClick={() => onContinue(lastActiveCourse)}
@ -107,7 +107,7 @@ export const MyCoursesView: React.FC<MyCoursesViewProps> = ({ onContinue }) => {
)}
{/* Tabs */}
<div className="border-b border-kodo-steel flex gap-6">
<div className="border-b border-border flex gap-6">
<button
onClick={() => setActiveTab('in_progress')}
className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'in_progress' ? 'border-kodo-cyan text-white' : 'border-transparent text-muted-foreground hover:text-kodo-text-main'}`}

12
apps/web/src/components/education/modals/CertificateModal.tsx
View file

@ -32,8 +32,8 @@ export const CertificateModal: React.FC<CertificateModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-3xl bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-3xl bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<Award className="w-5 h-5 text-kodo-gold" /> Completion Certificate
</h3>
@ -44,7 +44,7 @@ export const CertificateModal: React.FC<CertificateModalProps> = ({
<div className="p-8 bg-kodo-ink flex justify-center">
{/* Certificate Preview */}
<div className="w-full aspect-[1.414] bg-white text-black p-8 relative shadow-2xl max-w-2xl border-8 border-double border-kodo-steel">
<div className="w-full aspect-[1.414] bg-white text-black p-8 relative shadow-2xl max-w-2xl border-8 border-double border-border">
<div className="h-full border-4 border-kodo-gold/20 flex flex-col items-center justify-center text-center p-8 bg-[url('https://www.transparenttextures.com/patterns/cream-paper.png')]">
<div className="mb-8">
<h1 className="text-4xl font-display font-bold text-kodo-text-main mb-2 uppercase tracking-widest">
@ -58,7 +58,7 @@ export const CertificateModal: React.FC<CertificateModalProps> = ({
<p className="text-sm text-muted-foreground mb-2">
This is to certify that
</p>
<h2 className="text-3xl font-script font-bold text-kodo-steel mb-6 border-b-2 border-kodo-steel pb-2 px-8">
<h2 className="text-3xl font-script font-bold text-kodo-steel mb-6 border-b-2 border-border pb-2 px-8">
{studentName}
</h2>
@ -69,7 +69,7 @@ export const CertificateModal: React.FC<CertificateModalProps> = ({
{courseName}
</h3>
<div className="flex justify-between w-full mt-auto pt-8 border-t border-kodo-steel">
<div className="flex justify-between w-full mt-auto pt-8 border-t border-border">
<div className="text-left">
<p className="text-xs font-bold text-kodo-text-main">
{completionDate}
@ -92,7 +92,7 @@ export const CertificateModal: React.FC<CertificateModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Close
</Button>

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

@ -60,7 +60,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={handleFinish}
></div>
<div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden p-8 text-center">
<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-kodo-lime border-2 border-kodo-lime animate-pulse">
@ -104,9 +104,9 @@ export const QuizModal: React.FC<QuizModalProps> = ({
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
<div className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"></div>
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-sm">
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-sm">
{/* Header */}
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<HelpCircle className="w-5 h-5 text-kodo-steel" /> {quiz.title}
</h3>
@ -142,12 +142,12 @@ export const QuizModal: React.FC<QuizModalProps> = ({
className={`w-full text-left p-4 rounded-lg border transition-all ${
selectedAnswers[currentQuestionIndex] === idx
? 'bg-kodo-cyan/10 border-kodo-cyan text-white'
: 'bg-kodo-ink border-kodo-steel text-kodo-text-main hover:bg-white/5 hover:border-kodo-steel'
: 'bg-kodo-ink border-border text-kodo-text-main hover:bg-white/5 hover:border-border'
}`}
>
<div className="flex items-center gap-4">
<div
className={`w-6 h-6 rounded-full border flex items-center justify-center text-xs font-bold ${selectedAnswers[currentQuestionIndex] === idx ? 'bg-kodo-cyan border-kodo-cyan text-black' : 'border-kodo-steel text-muted-foreground'}`}
className={`w-6 h-6 rounded-full border flex items-center justify-center text-xs font-bold ${selectedAnswers[currentQuestionIndex] === idx ? 'bg-kodo-cyan border-kodo-cyan text-black' : 'border-border text-muted-foreground'}`}
>
{String.fromCharCode(65 + idx)}
</div>
@ -159,7 +159,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
</div>
{/* Footer */}
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-between items-center">
<span className="text-xs text-muted-foreground">
Passing Score: {quiz.passingScore}%
</span>

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-kodo-steel/30 text-kodo-text-main dark:bg-kodo-steel/20 dark:border-kodo-steel/40 dark:text-kodo-steel',
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',
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:

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

@ -38,7 +38,7 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
className={`flex ${compact ? 'flex-row items-center gap-4' : 'flex-col items-center text-center gap-4'}`}
>
<div
className={`rounded-full bg-gradient-to-br from-kodo-graphite to-black flex items-center justify-center border-2 ${isUnlocked ? 'border-kodo-gold w-16 h-16 text-3xl shadow-gold-glow' : 'border-kodo-steel w-12 h-12 text-xl text-muted-foreground'}`}
className={`rounded-full bg-gradient-to-br from-kodo-graphite to-black flex items-center justify-center border-2 ${isUnlocked ? 'border-kodo-gold w-16 h-16 text-3xl shadow-gold-glow' : 'border-border w-12 h-12 text-xl text-muted-foreground'}`}
>
{achievement.icon}
</div>

6
apps/web/src/components/gamification/AchievementsView.tsx
View file

@ -53,7 +53,7 @@ export const AchievementsView: React.FC = () => {
return (
<div className="space-y-6 animate-fadeIn pb-20">
{/* Header */}
<div className="flex flex-col md:flex-row justify-between items-end border-b border-kodo-steel/50 pb-6 gap-4">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-border/50 pb-6 gap-4">
<div>
<h2 className="text-2xl font-display font-bold text-white mb-2">
ACHIEVEMENTS
@ -62,7 +62,7 @@ export const AchievementsView: React.FC = () => {
Track your milestones and earn rewards.
</p>
</div>
<div className="bg-kodo-ink px-4 py-2 rounded-lg border border-kodo-steel flex items-center gap-4">
<div className="bg-kodo-ink px-4 py-2 rounded-lg border border-border flex items-center gap-4">
<Trophy className="w-5 h-5 text-kodo-gold" />
<span className="text-sm font-bold text-white">
{earnedCount} / {achievements.length} Unlocked
@ -71,7 +71,7 @@ export const AchievementsView: React.FC = () => {
</div>
{/* Controls */}
<div className="flex flex-col md:flex-row gap-4 items-center bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50">
<div className="flex flex-col md:flex-row gap-4 items-center bg-kodo-ink/50 p-4 rounded-xl border border-border/50">
<div className="flex gap-2 w-full md:w-auto">
<Button
variant={filter === 'all' ? 'primary' : 'ghost'}

8
apps/web/src/components/gamification/LeaderboardView.tsx
View file

@ -32,7 +32,7 @@ export const LeaderboardView: React.FC = () => {
return (
<div className="space-y-8 animate-fadeIn pb-20 max-w-5xl mx-auto">
{/* Header */}
<div className="flex flex-col md:flex-row justify-between items-end border-b border-kodo-steel/50 pb-6 gap-4">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-border/50 pb-6 gap-4">
<div>
<h2 className="text-2xl font-display font-bold text-white mb-2">
LEADERBOARD
@ -42,7 +42,7 @@ export const LeaderboardView: React.FC = () => {
</p>
</div>
<div className="flex bg-kodo-ink p-1 rounded-lg border border-kodo-steel">
<div className="flex bg-kodo-ink p-1 rounded-lg border border-border">
{['weekly', 'monthly', 'all'].map((p) => (
<button
key={p}
@ -72,7 +72,7 @@ export const LeaderboardView: React.FC = () => {
>
<div className="relative mb-4">
<div
className={`w-20 h-20 md:w-24 md:h-24 rounded-full overflow-hidden border-4 ${i === 1 ? 'border-kodo-gold' : i === 0 ? 'border-kodo-steel' : 'border-orange-400'}`}
className={`w-20 h-20 md:w-24 md:h-24 rounded-full overflow-hidden border-4 ${i === 1 ? 'border-kodo-gold' : i === 0 ? 'border-border' : 'border-orange-400'}`}
>
<img
src={entry.avatar}
@ -104,7 +104,7 @@ export const LeaderboardView: React.FC = () => {
<Card variant="default" className="p-0 overflow-hidden">
<table className="w-full text-left">
<thead>
<tr className="border-b border-kodo-steel bg-kodo-ink text-xs font-bold text-muted-foreground uppercase tracking-wider">
<tr className="border-b border-border bg-kodo-ink text-xs font-bold text-muted-foreground uppercase tracking-wider">
<th className="p-4 w-16 text-center">Rank</th>
<th className="p-4">Producer</th>
<th className="p-4">Level</th>

14
apps/web/src/components/inventory/AddEquipmentView.tsx
View file

@ -56,7 +56,7 @@ export const AddEquipmentView: React.FC = () => {
<h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
<Camera className="w-4 h-4 text-kodo-steel" /> Photos
</h3>
<div className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center text-muted-foreground hover:text-white hover:border-kodo-steel/50 cursor-pointer transition-colors group mb-4">
<div className="aspect-square bg-kodo-ink border-2 border-dashed border-border rounded-xl flex flex-col items-center justify-center text-muted-foreground hover:text-white hover:border-border/50 cursor-pointer transition-colors group mb-4">
<Camera className="w-8 h-8 mb-2 transition-opacity group-hover:opacity-80" />
<span className="text-xs font-bold uppercase">Upload Photos</span>
</div>
@ -64,7 +64,7 @@ export const AddEquipmentView: React.FC = () => {
{[1, 2, 3].map((i) => (
<div
key={i}
className="aspect-square bg-kodo-ink rounded border border-kodo-steel/50"
className="aspect-square bg-kodo-ink rounded border border-border/50"
></div>
))}
</div>
@ -84,7 +84,7 @@ export const AddEquipmentView: React.FC = () => {
{/* Right: Form */}
<div className="lg:col-span-2 space-y-6">
<Card variant="default">
<h3 className="font-bold text-white mb-6 border-b border-kodo-steel pb-2">
<h3 className="font-bold text-white mb-6 border-b border-border pb-2">
Basic Information
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
@ -93,7 +93,7 @@ export const AddEquipmentView: React.FC = () => {
Category
</label>
<select
className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none"
className="w-full bg-kodo-graphite border border-border rounded-lg p-4 text-white focus:border-border outline-none"
value={formData.category}
onChange={(e) => handleChange('category', e.target.value)}
>
@ -135,7 +135,7 @@ export const AddEquipmentView: React.FC = () => {
</Card>
<Card variant="default">
<h3 className="font-bold text-white mb-6 border-b border-kodo-steel pb-2">
<h3 className="font-bold text-white mb-6 border-b border-border pb-2">
Purchase & Warranty
</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
@ -171,11 +171,11 @@ export const AddEquipmentView: React.FC = () => {
</Card>
<Card variant="default">
<h3 className="font-bold text-white mb-4 border-b border-kodo-steel pb-2">
<h3 className="font-bold text-white mb-4 border-b border-border pb-2">
Notes
</h3>
<textarea
className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none min-h-[100px]"
className="w-full bg-kodo-graphite border border-border rounded-lg p-4 text-white focus:border-border outline-none min-h-[100px]"
placeholder="Condition notes, modifications, etc..."
value={formData.notes}
onChange={(e) => handleChange('notes', e.target.value)}

8
apps/web/src/components/inventory/InventoryView.tsx
View file

@ -51,7 +51,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
return (
<div className="space-y-6 animate-fadeIn pb-20">
{/* Header */}
<div className="flex flex-col md:flex-row justify-between items-end border-b border-kodo-steel/50 pb-6 gap-4">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-border/50 pb-6 gap-4">
<div>
<h2 className="text-2xl font-display font-bold text-white mb-2">
GEAR INVENTORY
@ -79,7 +79,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
</div>
{/* Filters */}
<div className="flex flex-col md:flex-row gap-4 items-center bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50">
<div className="flex flex-col md:flex-row gap-4 items-center bg-kodo-ink/50 p-4 rounded-xl border border-border/50">
<div className="w-full md:w-96">
<SearchInput
placeholder="Search gear..."
@ -89,7 +89,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
</div>
<div className="flex flex-wrap gap-2 w-full md:w-auto">
<div className="flex items-center gap-2 bg-kodo-void rounded-lg p-1 border border-kodo-steel">
<div className="flex items-center gap-2 bg-kodo-void rounded-lg p-1 border border-border">
<Filter className="w-4 h-4 text-muted-foreground ml-2" />
<select
className="bg-transparent text-sm text-kodo-text-main focus:outline-none p-1 cursor-pointer"
@ -104,7 +104,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
</select>
</div>
<div className="flex items-center gap-2 bg-kodo-void rounded-lg p-1 border border-kodo-steel">
<div className="flex items-center gap-2 bg-kodo-void rounded-lg p-1 border border-border">
<Box className="w-4 h-4 text-muted-foreground ml-2" />
<select
className="bg-transparent text-sm text-kodo-text-main focus:outline-none p-1 cursor-pointer"

4
apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx
View file

@ -77,12 +77,12 @@ export function KeyboardShortcutsHelp({
{shortcuts.map((shortcut, index) => (
<div
key={index}
className="flex items-center justify-between border-b border-kodo-steel dark:border-kodo-steel pb-2 last:border-0"
className="flex items-center justify-between border-b border-border dark:border-border pb-2 last:border-0"
>
<span className="text-sm text-muted-foreground dark:text-muted-foreground">
{shortcut.description}
</span>
<kbd className="px-2 py-1 text-xs font-semibold text-kodo-text-main dark:text-kodo-text-main bg-kodo-void dark:bg-kodo-graphite border border-kodo-steel dark:border-kodo-steel rounded">
<kbd className="px-2 py-1 text-xs font-semibold text-kodo-text-main dark:text-kodo-text-main bg-kodo-void dark:bg-kodo-graphite border border-border dark:border-border rounded">
{shortcut.key}
</kbd>
</div>

8
apps/web/src/components/library/AutoMetadataDetectionModal.tsx
View file

@ -43,8 +43,8 @@ export const AutoMetadataDetectionModal: React.FC<
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-steel/30 rounded-xl shadow-2xl overflow-hidden animate-scaleIn">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-md bg-kodo-graphite border border-border/30 rounded-xl shadow-2xl overflow-hidden animate-scaleIn">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<Wand2 className="w-4 h-4 text-kodo-steel" /> AI Metadata Detection
</h3>
@ -57,7 +57,7 @@ export const AutoMetadataDetectionModal: React.FC<
{loading ? (
<div className="space-y-6">
<div className="relative">
<div className="w-20 h-20 rounded-full border-4 border-kodo-steel border-t-kodo-steel animate-spin mx-auto"></div>
<div className="w-20 h-20 rounded-full border-4 border-border border-t-kodo-steel animate-spin mx-auto"></div>
<div className="absolute inset-0 flex items-center justify-center">
<Music2 className="w-8 h-8 text-kodo-steel/50" />
</div>
@ -74,7 +74,7 @@ export const AutoMetadataDetectionModal: React.FC<
</div>
) : (
<div className="w-full space-y-6 animate-fadeIn">
<div className="bg-kodo-ink border border-kodo-steel/20 rounded-lg p-6 w-full">
<div className="bg-kodo-ink border border-border/20 rounded-lg p-6 w-full">
<div className="grid grid-cols-2 gap-4">
<div className="text-center p-2">
<div className="text-xs text-muted-foreground uppercase font-bold mb-1">

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

@ -37,9 +37,9 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl overflow-hidden animate-scaleIn flex flex-col md:flex-row">
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-border rounded-xl shadow-2xl overflow-hidden animate-scaleIn flex flex-col md:flex-row">
{/* Left: Controls */}
<div className="w-full md:w-1/2 p-6 border-r border-kodo-steel bg-kodo-ink">
<div className="w-full md:w-1/2 p-6 border-r border-border bg-kodo-ink">
<div className="flex justify-between items-center mb-6">
<h3 className="font-bold text-white flex items-center gap-2">
<Stamp className="w-4 h-4 text-kodo-magenta" /> Watermark
@ -77,7 +77,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
<button
key={i}
onClick={() => setPosition(i)}
className={`h-10 rounded border text-xs uppercase font-bold transition-all ${position === i ? 'bg-kodo-magenta border-kodo-magenta text-white' : 'bg-kodo-void border-kodo-steel text-muted-foreground hover:border-kodo-steel'}`}
className={`h-10 rounded border text-xs uppercase font-bold transition-all ${position === i ? 'bg-kodo-magenta border-kodo-magenta text-white' : 'bg-kodo-void border-border text-muted-foreground hover:border-border'}`}
>
{/* Icon representation usually better, but text works for demo */}
<div
@ -105,7 +105,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
</div>
</div>
<div className="mt-8 pt-4 border-t border-kodo-steel flex gap-4">
<div className="mt-8 pt-4 border-t border-border flex gap-4">
<Button variant="ghost" onClick={onClose} className="flex-1">
Cancel
</Button>

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

@ -75,8 +75,8 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
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-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-xs">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-md bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-xs">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Add to Playlist</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
@ -86,7 +86,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
<div className="p-4">
<div className="relative mb-4">
<input
className="w-full bg-kodo-void border border-kodo-steel rounded-lg py-2 pl-9 pr-4 text-white text-sm focus:border-kodo-steel outline-none"
className="w-full bg-kodo-void border border-border rounded-lg py-2 pl-9 pr-4 text-white text-sm focus:border-border outline-none"
placeholder="Find playlist"
value={search}
onChange={(e) => setSearch(e.target.value)}
@ -97,7 +97,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
<Button
variant="ghost"
className="w-full justify-start border border-dashed border-kodo-steel mb-4 hover:border-kodo-steel/50 hover:text-white group"
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">
@ -128,7 +128,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
</div>
</div>
<div
className={`w-5 h-5 rounded-full border flex items-center justify-center ${selectedIds.includes(playlist.id) ? 'bg-kodo-cyan border-kodo-cyan' : 'border-kodo-steel'}`}
className={`w-5 h-5 rounded-full border flex items-center justify-center ${selectedIds.includes(playlist.id) ? 'bg-kodo-cyan border-kodo-cyan' : 'border-border'}`}
>
{selectedIds.includes(playlist.id) && (
<Check className="w-3 h-3 text-black" />
@ -139,7 +139,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end">
<Button
variant="primary"
onClick={handleConfirm}

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

@ -34,8 +34,8 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-lg bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Create Playlist</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
@ -43,7 +43,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
</div>
<div className="p-6 flex flex-col md:flex-row gap-6">
<div className="w-40 h-40 bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-lg flex flex-col items-center justify-center text-muted-foreground hover:text-white hover:border-kodo-steel/50 cursor-pointer transition-colors flex-shrink-0">
<div className="w-40 h-40 bg-kodo-ink border-2 border-dashed border-border rounded-lg flex flex-col items-center justify-center text-muted-foreground hover:text-white hover:border-border/50 cursor-pointer transition-colors flex-shrink-0">
<ImageIcon className="w-8 h-8 mb-2" />
<span className="text-xs font-bold uppercase">Cover</span>
</div>
@ -57,7 +57,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
/>
<textarea
className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
className="w-full bg-kodo-graphite border border-border rounded-lg p-4 text-white focus:border-border outline-none text-sm resize-none h-24"
placeholder="Description (Optional)"
value={description}
onChange={(e) => setDescription(e.target.value)}
@ -121,7 +121,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>

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

@ -75,8 +75,8 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-lg bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Edit Details</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
@ -84,7 +84,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
</div>
<div className="p-6 flex flex-col md:flex-row gap-6">
<div className="w-40 h-40 bg-kodo-ink border border-kodo-steel rounded-lg flex flex-col items-center justify-center relative group overflow-hidden flex-shrink-0">
<div className="w-40 h-40 bg-kodo-ink border border-border rounded-lg flex flex-col items-center justify-center relative group overflow-hidden flex-shrink-0">
<img
src={playlist.cover_url}
className="w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity"
@ -102,7 +102,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
/>
<textarea
className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
className="w-full bg-kodo-graphite border border-border rounded-lg p-4 text-white focus:border-border outline-none text-sm resize-none h-24"
placeholder="Description"
value={description}
onChange={(e) => setDescription(e.target.value)}
@ -139,7 +139,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-between items-center">
<Button
variant="ghost"
className="text-kodo-red hover:bg-kodo-red/10"

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

@ -89,7 +89,7 @@ export const PlaylistsView: React.FC<{
return (
<div className="space-y-6 animate-fadeIn pb-20">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-kodo-steel/50 pb-6 gap-4">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-border/50 pb-6 gap-4">
<div>
<h1 className="text-3xl font-display font-bold text-white mb-2">
MY PLAYLISTS
@ -125,7 +125,7 @@ export const PlaylistsView: React.FC<{
<Card
key={playlist.id}
variant="default"
className="p-0 overflow-hidden group cursor-pointer hover:border-kodo-steel/50 transition-colors"
className="p-0 overflow-hidden group cursor-pointer hover:border-border/50 transition-colors"
onClick={() => onNavigate(playlist.id)}
>
<div className="aspect-square relative bg-kodo-ink">

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

@ -56,7 +56,7 @@ export const QueueView: React.FC = () => {
return (
<div className="max-w-4xl mx-auto space-y-6 animate-fadeIn pb-20">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-kodo-steel/50 pb-6 gap-4">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-border/50 pb-6 gap-4">
<div>
<h1 className="text-3xl font-display font-bold text-white mb-2">
PLAY QUEUE
@ -157,7 +157,7 @@ export const QueueView: React.FC = () => {
<div className="space-y-2">
{queue.length === 0 ? (
<div className="text-center py-12 border-2 border-dashed border-kodo-steel rounded-xl text-muted-foreground">
<div className="text-center py-12 border-2 border-dashed border-border rounded-xl text-muted-foreground">
<ListMusic className="w-12 h-12 mx-auto mb-4 opacity-50" />
<p className="text-sm">
Queue is empty. Add tracks to keep the vibe going.
@ -176,7 +176,7 @@ export const QueueView: React.FC = () => {
onDragStart={(e) => handleDragStart(e, i)}
onDragOver={(e) => handleDragOver(e, i)}
onDragEnd={() => setDraggedIndex(null)}
className={`flex items-center gap-4 p-4 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all group ${draggedIndex === i ? 'opacity-50 border-kodo-cyan' : ''}`}
className={`flex items-center gap-4 p-4 bg-kodo-ink rounded-lg border border-transparent hover:border-border transition-all group ${draggedIndex === i ? 'opacity-50 border-kodo-cyan' : ''}`}
>
<div className="text-muted-foreground cursor-grab active:cursor-grabbing hover:text-white p-1">
<GripVertical className="w-5 h-5" />

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

@ -31,8 +31,8 @@ export const SaveQueueAsPlaylistModal: React.FC<
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-steel rounded-xl shadow-2xl animate-scaleIn">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-md bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Save Queue as Playlist</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
@ -49,7 +49,7 @@ export const SaveQueueAsPlaylistModal: React.FC<
/>
<div
className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel"
className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-border cursor-pointer hover:border-border"
onClick={() => setIsPublic(!isPublic)}
>
<div className="flex items-center gap-4">
@ -77,7 +77,7 @@ export const SaveQueueAsPlaylistModal: React.FC<
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>

8
apps/web/src/components/live/LiveStreamDetailView.tsx
View file

@ -164,8 +164,8 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
</div>
{/* Chat Sidebar */}
<div className="w-80 md:w-96 bg-kodo-graphite border-l border-kodo-steel flex flex-col z-20 shadow-2xl">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="w-80 md:w-96 bg-kodo-graphite border-l border-border flex flex-col z-20 shadow-2xl">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white text-sm">LIVE CHAT</h3>
<Settings className="w-4 h-4 text-muted-foreground cursor-pointer hover:text-white" />
</div>
@ -183,10 +183,10 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
))}
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink">
<div className="p-4 border-t border-border bg-kodo-ink">
<div className="relative">
<input
className="w-full bg-kodo-void border border-kodo-steel rounded-full py-2.5 pl-4 pr-10 text-white text-sm focus:border-kodo-steel outline-none"
className="w-full bg-kodo-void border border-border rounded-full py-2.5 pl-4 pr-10 text-white text-sm focus:border-border outline-none"
placeholder="Send a message..."
value={chatInput}
onChange={(e) => setChatInput(e.target.value)}

10
apps/web/src/components/live/modals/TipStreamerModal.tsx
View file

@ -58,7 +58,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
<button
key={val}
onClick={() => setAmount(val)}
className={`flex-1 py-2 rounded font-bold border transition-colors ${amount === val ? 'bg-kodo-gold text-black border-kodo-gold' : 'bg-kodo-void border-kodo-steel text-muted-foreground hover:text-white'}`}
className={`flex-1 py-2 rounded font-bold border transition-colors ${amount === val ? 'bg-kodo-gold text-black border-kodo-gold' : 'bg-kodo-void border-border text-muted-foreground hover:text-white'}`}
>
${val}
</button>
@ -70,7 +70,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
</span>
<input
type="number"
className="w-full bg-kodo-ink border border-kodo-steel rounded pl-8 pr-4 py-2 text-white font-mono focus:border-kodo-gold outline-none"
className="w-full bg-kodo-ink border border-border rounded pl-8 pr-4 py-2 text-white font-mono focus:border-kodo-gold outline-none"
value={amount}
onChange={(e) => setAmount(e.target.value)}
placeholder="Custom Amount"
@ -84,7 +84,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
Message (Optional)
</label>
<textarea
className="w-full bg-kodo-ink border border-kodo-steel rounded p-4 text-white focus:border-kodo-gold outline-none text-sm resize-none h-24"
className="w-full bg-kodo-ink border border-border rounded p-4 text-white focus:border-kodo-gold outline-none text-sm resize-none h-24"
placeholder={`Say something nice to ${streamerName}...`}
value={message}
onChange={(e) => setMessage(e.target.value)}
@ -103,13 +103,13 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
<div className="flex gap-2">
<button
onClick={() => setPaymentMethod('card')}
className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'card' ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-void border-kodo-steel text-muted-foreground'}`}
className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'card' ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-void border-border text-muted-foreground'}`}
>
<CreditCard className="w-4 h-4" /> Card
</button>
<button
onClick={() => setPaymentMethod('crypto')}
className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'crypto' ? 'bg-kodo-magenta/10 border-kodo-magenta text-kodo-magenta' : 'bg-kodo-void border-kodo-steel text-muted-foreground'}`}
className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'crypto' ? 'bg-kodo-magenta/10 border-kodo-magenta text-kodo-magenta' : 'bg-kodo-void border-border text-muted-foreground'}`}
>
<span className="font-bold">Ξ</span> Crypto
</button>

4
apps/web/src/components/marketplace/LicenceCard.tsx
View file

@ -19,7 +19,7 @@ export const LicenceCard: React.FC<LicenceCardProps> = ({
}) => {
return (
<Card
className={`p-4 transition-all cursor-pointer h-full flex flex-col ${selected ? 'border-kodo-cyan shadow-neon-cyan/20 bg-kodo-cyan/5' : 'hover:border-kodo-steel'}`}
className={`p-4 transition-all cursor-pointer h-full flex flex-col ${selected ? 'border-kodo-cyan shadow-neon-cyan/20 bg-kodo-cyan/5' : 'hover:border-border'}`}
onClick={() => onSelect(license)}
>
<div className="flex justify-between items-start mb-4">
@ -61,7 +61,7 @@ export const LicenceCard: React.FC<LicenceCardProps> = ({
<Button
variant="ghost"
size="icon"
className="border border-kodo-steel"
className="border border-border"
onClick={(e) => {
e.stopPropagation();
onInfo(license);

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

@ -20,8 +20,8 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-sm">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-lg bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-sm">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<ShieldCheck className="w-5 h-5 text-kodo-steel" /> License Agreement
</h3>
@ -47,7 +47,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
<div className="space-y-6">
<div>
<h4 className="text-sm font-bold text-white uppercase tracking-wider mb-3 border-b border-kodo-steel pb-1">
<h4 className="text-sm font-bold text-white uppercase tracking-wider mb-3 border-b border-border pb-1">
What You Get
</h4>
<ul className="space-y-2">
@ -66,7 +66,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
</div>
<div>
<h4 className="text-sm font-bold text-white uppercase tracking-wider mb-3 border-b border-kodo-steel pb-1">
<h4 className="text-sm font-bold text-white uppercase tracking-wider mb-3 border-b border-border pb-1">
Restrictions
</h4>
<ul className="space-y-2">
@ -102,7 +102,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Close
</Button>

8
apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
View file

@ -34,8 +34,8 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
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-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-md bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<MessageSquare className="w-4 h-4 text-kodo-steel" /> Write Review
</h3>
@ -77,7 +77,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
Your Review
</label>
<textarea
className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-steel outline-none text-sm resize-none h-32"
className="w-full bg-kodo-void border border-border rounded-lg p-4 text-white focus:border-border outline-none text-sm resize-none h-32"
placeholder="Share your thoughts on the quality, usability, and value..."
value={comment}
onChange={(e) => setComment(e.target.value)}
@ -85,7 +85,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>

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

@ -35,9 +35,9 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-4xl bg-kodo-graphite border border-kodo-steel rounded-2xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-lg">
<div className="relative w-full max-w-4xl bg-kodo-graphite border border-border rounded-2xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-lg">
{/* Header */}
<div className="flex justify-between items-center p-8 border-b border-kodo-steel bg-kodo-ink">
<div className="flex justify-between items-center p-8 border-b border-border bg-kodo-ink">
<div className="flex items-center gap-4">
<h2 className="text-2xl font-display font-bold text-white">
CREATOR STUDIO
@ -87,7 +87,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-6">
<FileUpload />
<div className="bg-kodo-slate p-4 rounded-lg border border-kodo-steel">
<div className="bg-kodo-slate p-4 rounded-lg border border-border">
<h4 className="font-bold text-muted-foreground text-sm mb-2 uppercase">
File Requirements
</h4>
@ -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-kodo-steel">
<Button variant="outline" className="p-4 flex flex-col items-center justify-center gap-2 text-kodo-steel bg-kodo-steel/10 border-border">
<Tag className="w-5 h-5" />{' '}
<span className="text-xs font-bold">Public</span>
</Button>
@ -155,7 +155,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
</div>
{/* Footer */}
<div className="p-8 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-8 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
CANCEL
</Button>

6
apps/web/src/components/notifications/NotificationBell.tsx
View file

@ -50,8 +50,8 @@ export const NotificationBell: React.FC<NotificationBellProps> = ({
</Button>
{isOpen && (
<div className="absolute top-full right-0 mt-4 w-96 bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl overflow-hidden animate-fadeIn origin-top-right ring-1 ring-white/5 flex flex-col max-h-layout-modal-sm">
<div className="p-4 border-b border-kodo-steel/50 flex justify-between items-center bg-kodo-ink">
<div className="absolute top-full right-0 mt-4 w-96 bg-kodo-graphite border border-border rounded-xl shadow-2xl overflow-hidden animate-fadeIn origin-top-right ring-1 ring-white/5 flex flex-col max-h-layout-modal-sm">
<div className="p-4 border-b border-border/50 flex justify-between items-center bg-kodo-ink">
<div>
<h3 className="font-bold text-white">Notifications</h3>
<p className="text-xs text-muted-foreground">{unreadCount} unread</p>
@ -87,7 +87,7 @@ export const NotificationBell: React.FC<NotificationBellProps> = ({
)}
</div>
<div className="p-2 border-t border-kodo-steel/30 bg-kodo-ink/50">
<div className="p-2 border-t border-border/30 bg-kodo-ink/50">
<Button
variant="ghost"
size="sm"

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

@ -55,7 +55,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
<div
className={`p-4 rounded-lg flex items-start gap-4 transition-all hover:bg-white/5 group border border-transparent ${getBgColor()}`}
>
<div className="flex-shrink-0 mt-1 p-2 bg-kodo-graphite rounded-full border border-kodo-steel shadow-sm">
<div className="flex-shrink-0 mt-1 p-2 bg-kodo-graphite rounded-full border border-border shadow-sm">
{getIcon()}
</div>

2
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-kodo-steel/30 animate-pulse-glow">
<div className="w-8 h-8 rounded-lg bg-kodo-steel/10 flex items-center justify-center border border-border/30 animate-pulse-glow">
<Smartphone className="h-4 w-4 text-kodo-steel" />
</div>
<div>

4
apps/web/src/components/search/SearchBar.tsx
View file

@ -92,7 +92,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
<div ref={wrapperRef} className={`relative w-full ${className}`}>
<form onSubmit={handleSubmit} className="relative z-20">
<div
className={`flex items-center bg-kodo-ink border rounded-xl px-4 py-4 transition-all ${isFocused ? 'border-kodo-cyan ring-1 ring-kodo-cyan/20' : 'border-kodo-steel'}`}
className={`flex items-center bg-kodo-ink border rounded-xl px-4 py-4 transition-all ${isFocused ? 'border-kodo-cyan ring-1 ring-kodo-cyan/20' : 'border-border'}`}
>
<Search
className={`w-5 h-5 mr-3 transition-colors ${isFocused ? 'text-kodo-cyan' : 'text-muted-foreground'}`}
@ -118,7 +118,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
</form>
{isFocused && (
<div className="absolute top-full left-0 right-0 mt-2 bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl z-50 overflow-hidden animate-slideUp">
<div className="absolute top-full left-0 right-0 mt-2 bg-kodo-graphite border border-border rounded-xl shadow-2xl z-50 overflow-hidden animate-slideUp">
{query ? (
<div>
{filteredSuggestions.length > 0 ? (

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

@ -173,7 +173,7 @@ export const SellerDashboardView: React.FC<SellerDashboardProps> = ({
{products.map((product, i) => (
<div
key={product.id}
className="flex items-center gap-4 p-4 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all"
className="flex items-center gap-4 p-4 bg-kodo-ink rounded-lg border border-transparent hover:border-border transition-all"
>
<div className="w-8 text-center font-mono text-muted-foreground">
{i + 1}

12
apps/web/src/components/seller/modals/FlashSaleModal.tsx
View file

@ -41,8 +41,8 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<Zap className="w-5 h-5 text-kodo-gold" /> Start Flash Sale
</h3>
@ -62,7 +62,7 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
<Percent className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<input
type="number"
className="w-full bg-kodo-void border border-kodo-steel rounded pl-10 pr-4 py-2 text-white focus:border-kodo-gold outline-none"
className="w-full bg-kodo-void border border-border rounded pl-10 pr-4 py-2 text-white focus:border-kodo-gold outline-none"
value={discount}
onChange={(e) => setDiscount(Number(e.target.value))}
min={5}
@ -78,7 +78,7 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
<div className="relative">
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<select
className="w-full bg-kodo-void border border-kodo-steel rounded pl-10 pr-4 py-2 text-white focus:border-kodo-gold outline-none appearance-none"
className="w-full bg-kodo-void border border-border rounded pl-10 pr-4 py-2 text-white focus:border-kodo-gold outline-none appearance-none"
value={duration}
onChange={(e) => setDuration(Number(e.target.value))}
>
@ -130,7 +130,7 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
</button>
</div>
<div className="flex-1 overflow-y-auto custom-scrollbar border border-kodo-steel rounded-lg bg-kodo-void p-2 space-y-1">
<div className="flex-1 overflow-y-auto custom-scrollbar border border-border rounded-lg bg-kodo-void p-2 space-y-1">
{products.map((product) => (
<div
key={product.id}
@ -164,7 +164,7 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>

2
apps/web/src/components/settings/accessibility/AccessibilitySettingsView.tsx
View file

@ -27,7 +27,7 @@ export const AccessibilitySettingsView: React.FC = () => {
return (
<div className="space-y-8 animate-fadeIn max-w-4xl mx-auto pb-20">
{/* Header */}
<div className="flex justify-between items-end border-b border-kodo-steel/50 pb-6">
<div className="flex justify-between items-end border-b border-border/50 pb-6">
<div>
<h2 className="text-3xl font-display font-bold text-white mb-2">
ACCESSIBILITY

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

@ -38,8 +38,8 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
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-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-md bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Change Email Address</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
@ -70,7 +70,7 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
onChange={(e) => setPassword(e.target.value)}
/>
<div className="bg-kodo-ink p-4 rounded text-xs text-muted-foreground border border-kodo-steel">
<div className="bg-kodo-ink p-4 rounded text-xs text-muted-foreground border border-border">
We will send a verification link to your new email address. You
must verify it before the change takes effect.
</div>
@ -95,7 +95,7 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
</div>
{step === 1 && (
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>

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

@ -48,8 +48,8 @@ export const ChangeUsernameModal: React.FC<ChangeUsernameModalProps> = ({
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-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-md bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Change Username</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
@ -104,7 +104,7 @@ export const ChangeUsernameModal: React.FC<ChangeUsernameModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>

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

@ -56,7 +56,7 @@ export const DeleteAccountConfirmModal: React.FC<
queued for immediate removal. You will be logged out.
</p>
<div className="bg-kodo-ink p-4 rounded border border-kodo-steel">
<div className="bg-kodo-ink p-4 rounded border border-border">
<ul className="text-xs text-muted-foreground space-y-2 list-disc pl-4">
<li>All uploaded tracks and assets will be deleted.</li>
<li>Your username will be released.</li>
@ -78,7 +78,7 @@ export const DeleteAccountConfirmModal: React.FC<
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose} disabled={loading}>
Cancel
</Button>

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

@ -69,10 +69,10 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
</div>
<div className="space-y-4 mb-8">
<label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors">
<label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-border cursor-pointer hover:border-border transition-colors">
<input
type="checkbox"
className="mt-1 bg-kodo-graphite border-kodo-steel text-kodo-red focus:ring-kodo-red rounded"
className="mt-1 bg-kodo-graphite border-border text-kodo-red focus:ring-kodo-red rounded"
checked={checks.dataLoss}
onChange={(e) =>
setChecks({ ...checks, dataLoss: e.target.checked })
@ -89,10 +89,10 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
</div>
</label>
<label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors">
<label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-border cursor-pointer hover:border-border transition-colors">
<input
type="checkbox"
className="mt-1 bg-kodo-graphite border-kodo-steel text-kodo-red focus:ring-kodo-red rounded"
className="mt-1 bg-kodo-graphite border-border text-kodo-red focus:ring-kodo-red rounded"
checked={checks.irreversible}
onChange={(e) =>
setChecks({ ...checks, irreversible: e.target.checked })
@ -109,10 +109,10 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
</div>
</label>
<label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel transition-colors">
<label className="flex items-start gap-4 p-4 bg-kodo-ink rounded border border-border cursor-pointer hover:border-border transition-colors">
<input
type="checkbox"
className="mt-1 bg-kodo-graphite border-kodo-steel text-kodo-red focus:ring-kodo-red rounded"
className="mt-1 bg-kodo-graphite border-border text-kodo-red focus:ring-kodo-red rounded"
checked={checks.subscription}
onChange={(e) =>
setChecks({ ...checks, subscription: e.target.checked })
@ -146,7 +146,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
<Button
variant="primary"
className="w-full bg-kodo-red hover:bg-kodo-red text-white border-kodo-red disabled:bg-kodo-graphite disabled:border-kodo-steel disabled:text-muted-foreground"
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"
disabled={!isFormValid}
onClick={() => setShowFinalModal(true)}
icon={<Trash2 className="w-4 h-4" />}

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

@ -37,7 +37,7 @@ export const AppearanceSettingsView: React.FC = () => {
return (
<div className="space-y-8 animate-fadeIn max-w-4xl mx-auto pb-20">
{/* Header */}
<div className="flex justify-between items-end border-b border-kodo-steel/50 pb-6">
<div className="flex justify-between items-end border-b border-border/50 pb-6">
<div>
<h2 className="text-3xl font-display font-bold text-white mb-2">
INTERFACE
@ -91,7 +91,7 @@ export const AppearanceSettingsView: React.FC = () => {
}}
className={`
cursor-pointer p-6 rounded-xl border-2 transition-all flex flex-col items-center gap-4 relative
${theme === opt.id ? 'border-kodo-cyan bg-kodo-cyan/5' : 'border-kodo-steel bg-kodo-ink hover:border-kodo-steel'}
${theme === opt.id ? 'border-kodo-cyan bg-kodo-cyan/5' : 'border-border bg-kodo-ink hover:border-border'}
`}
>
<div
@ -135,11 +135,11 @@ export const AppearanceSettingsView: React.FC = () => {
onClick={() => setDensity(opt.id as any)}
className={`
flex items-center gap-4 p-4 rounded-lg border cursor-pointer transition-all
${density === opt.id ? 'bg-kodo-magenta/10 border-kodo-magenta' : 'bg-kodo-ink border-kodo-steel hover:bg-white/5'}
${density === opt.id ? 'bg-kodo-magenta/10 border-kodo-magenta' : 'bg-kodo-ink border-border hover:bg-white/5'}
`}
>
<div
className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${density === opt.id ? 'border-kodo-magenta' : 'border-kodo-steel'}`}
className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${density === opt.id ? 'border-kodo-magenta' : 'border-border'}`}
>
{density === opt.id && (
<div className="w-2 h-2 rounded-full bg-kodo-magenta"></div>
@ -177,7 +177,7 @@ export const AppearanceSettingsView: React.FC = () => {
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"
/>
<div
className="mt-4 p-4 bg-kodo-ink rounded border border-kodo-steel text-kodo-text-main"
className="mt-4 p-4 bg-kodo-ink rounded border border-border text-kodo-text-main"
style={{ fontSize: `${fontSize}px` }}
>
The quick brown fox jumps over the lazy dog.
@ -214,7 +214,7 @@ export const AppearanceSettingsView: React.FC = () => {
<Layout className="w-5 h-5 text-muted-foreground" /> Layout
</h3>
<div
className="flex items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel cursor-pointer hover:border-kodo-steel"
className="flex items-center justify-between p-4 bg-kodo-ink rounded-lg border border-border cursor-pointer hover:border-border"
onClick={() => setShowSidebar(!showSidebar)}
>
<div>

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

@ -95,7 +95,7 @@ export const BackupsView: React.FC = () => {
{backups.map((backup) => (
<div
key={backup.id}
className="flex flex-col md:flex-row items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel hover:border-kodo-steel/50 transition-all"
className="flex flex-col md:flex-row items-center justify-between p-4 bg-kodo-ink rounded-lg border border-border hover:border-border/50 transition-all"
>
<div className="flex items-center gap-4 mb-2 md:mb-0 w-full md:w-auto">
<div
@ -125,7 +125,7 @@ export const BackupsView: React.FC = () => {
<Button
variant="ghost"
size="sm"
className="flex-1 md:flex-none border border-kodo-steel"
className="flex-1 md:flex-none border border-border"
onClick={() => handleRestore(backup.id)}
>
<RefreshCcw className="w-4 h-4 mr-2" /> Restore
@ -133,7 +133,7 @@ export const BackupsView: React.FC = () => {
<Button
variant="ghost"
size="sm"
className="flex-1 md:flex-none border border-kodo-steel"
className="flex-1 md:flex-none border border-border"
>
<Download className="w-4 h-4" />
</Button>
@ -172,12 +172,12 @@ export const BackupsView: React.FC = () => {
</div>
{autoBackup && (
<div className="animate-fadeIn space-y-4 pt-2 border-t border-kodo-steel">
<div className="animate-fadeIn space-y-4 pt-2 border-t border-border">
<div>
<label className="block text-xs font-bold text-muted-foreground uppercase mb-1">
Frequency
</label>
<select className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white text-sm">
<select className="w-full bg-kodo-void border border-border rounded p-2 text-white text-sm">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
@ -189,7 +189,7 @@ export const BackupsView: React.FC = () => {
</label>
<input
type="time"
className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white text-sm"
className="w-full bg-kodo-void border border-border rounded p-2 text-white text-sm"
defaultValue="04:00"
/>
</div>
@ -197,7 +197,7 @@ export const BackupsView: React.FC = () => {
<label className="block text-xs font-bold text-muted-foreground uppercase mb-1">
Retention
</label>
<select className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white text-sm">
<select className="w-full bg-kodo-void border border-border rounded p-2 text-white text-sm">
<option>Keep last 7 days</option>
<option>Keep last 30 days</option>
<option>Keep forever</option>

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

@ -82,17 +82,17 @@ export const CloudIntegrationView: React.FC = () => {
</div>
) : (
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel text-center">
<div className="bg-kodo-ink p-4 rounded-lg border border-border text-center">
<Server className="w-6 h-6 text-kodo-steel mx-auto mb-2" />
<div className="text-sm font-bold text-white">{url}</div>
<div className="text-xs text-muted-foreground">Host</div>
</div>
<div className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel text-center">
<div className="bg-kodo-ink p-4 rounded-lg border border-border text-center">
<RefreshCw className="w-6 h-6 text-kodo-gold mx-auto mb-2" />
<div className="text-sm font-bold text-white">Every 15 mins</div>
<div className="text-xs text-muted-foreground">Sync Frequency</div>
</div>
<div className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel text-center">
<div className="bg-kodo-ink p-4 rounded-lg border border-border text-center">
<Shield className="w-6 h-6 text-kodo-lime mx-auto mb-2" />
<div className="text-sm font-bold text-white">Encrypted</div>
<div className="text-xs text-muted-foreground">Status</div>
@ -105,7 +105,7 @@ export const CloudIntegrationView: React.FC = () => {
{isConnected && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<Card variant="default">
<h3 className="font-bold text-white mb-4 border-b border-kodo-steel pb-2">
<h3 className="font-bold text-white mb-4 border-b border-border pb-2">
Sync Preferences
</h3>
<div className="space-y-4">
@ -130,7 +130,7 @@ export const CloudIntegrationView: React.FC = () => {
<label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
Sync Frequency
</label>
<select className="w-full bg-kodo-ink border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-steel">
<select className="w-full bg-kodo-ink border border-border rounded p-2 text-white outline-none focus:border-border">
<option>Every 15 minutes</option>
<option>Hourly</option>
<option>Daily</option>
@ -146,7 +146,7 @@ export const CloudIntegrationView: React.FC = () => {
{['Projects', 'Samples', 'Presets'].map((type) => (
<span
key={type}
className="px-4 py-1 bg-kodo-slate rounded text-xs text-white border border-kodo-steel cursor-pointer hover:border-kodo-steel/50"
className="px-4 py-1 bg-kodo-slate rounded text-xs text-white border border-border cursor-pointer hover:border-border/50"
>
{type}
</span>
@ -157,7 +157,7 @@ export const CloudIntegrationView: React.FC = () => {
</Card>
<Card variant="default">
<h3 className="font-bold text-white mb-4 border-b border-kodo-steel pb-2">
<h3 className="font-bold text-white mb-4 border-b border-border pb-2">
Storage Quota
</h3>
<div className="space-y-6">

24
apps/web/src/components/settings/data/DataExportModal.tsx
View file

@ -37,8 +37,8 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
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-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-md bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<Database className="w-4 h-4 text-kodo-steel" /> Request Data Export
</h3>
@ -59,7 +59,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
Export Format
</label>
<select
className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-steel"
className="w-full bg-kodo-void border border-border rounded p-2 text-white outline-none focus:border-border"
value={format}
onChange={(e) => setFormat(e.target.value)}
>
@ -74,45 +74,45 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
Include Data
</label>
<div className="space-y-2">
<label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
<label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-border cursor-pointer hover:border-border">
<input
type="checkbox"
checked={options.profile}
onChange={() => toggleOption('profile')}
className="rounded border-kodo-steel bg-transparent text-kodo-steel"
className="rounded border-border bg-transparent text-kodo-steel"
/>
<span className="text-sm text-kodo-text-main">
Profile & Identity
</span>
</label>
<label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
<label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-border cursor-pointer hover:border-border">
<input
type="checkbox"
checked={options.tracks}
onChange={() => toggleOption('tracks')}
className="rounded border-kodo-steel bg-transparent text-kodo-steel"
className="rounded border-border bg-transparent text-kodo-steel"
/>
<span className="text-sm text-kodo-text-main">
Uploaded Content Metadata
</span>
</label>
<label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
<label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-border cursor-pointer hover:border-border">
<input
type="checkbox"
checked={options.activity}
onChange={() => toggleOption('activity')}
className="rounded border-kodo-steel bg-transparent text-kodo-steel"
className="rounded border-border bg-transparent text-kodo-steel"
/>
<span className="text-sm text-kodo-text-main">
Activity Logs & History
</span>
</label>
<label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel">
<label className="flex items-center gap-4 p-4 bg-kodo-ink rounded border border-border cursor-pointer hover:border-border">
<input
type="checkbox"
checked={options.billing}
onChange={() => toggleOption('billing')}
className="rounded border-kodo-steel bg-transparent text-kodo-steel"
className="rounded border-border bg-transparent text-kodo-steel"
/>
<span className="text-sm text-kodo-text-main">
Billing & Transactions
@ -122,7 +122,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>

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

@ -65,7 +65,7 @@ export const DataExportView: React.FC = () => {
{exports.map((item) => (
<div
key={item.id}
className="flex flex-col md:flex-row items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel"
className="flex flex-col md:flex-row items-center justify-between p-4 bg-kodo-ink rounded-lg border border-border"
>
<div className="flex items-center gap-4 mb-2 md:mb-0 w-full md:w-auto">
<FileText className="w-5 h-5 text-muted-foreground" />

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

@ -106,7 +106,7 @@ export const IntegrationsView: React.FC = () => {
<Card
key={integration.id}
variant="default"
className={`flex flex-col h-full ${integration.connected ? 'border-kodo-cyan/30' : 'border-kodo-steel/50'}`}
className={`flex flex-col h-full ${integration.connected ? 'border-kodo-cyan/30' : 'border-border/50'}`}
>
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-4">
@ -164,7 +164,7 @@ export const IntegrationsView: React.FC = () => {
<>
<Button
variant="ghost"
className="flex-1 border border-kodo-steel text-kodo-text-main"
className="flex-1 border border-border text-kodo-text-main"
onClick={() => addToast('Settings opened')}
>
Settings

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

@ -66,7 +66,7 @@ export const CommentItem: React.FC<CommentItemProps> = ({
</div>
{comment.replies && comment.replies.length > 0 && (
<div className="mt-2 pl-4 border-l border-kodo-steel/50">
<div className="mt-2 pl-4 border-l border-border/50">
{comment.replies.map((reply) => (
<CommentItem
key={reply.id}

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

@ -44,8 +44,8 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-lg bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Create Post</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
@ -63,7 +63,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
<div className="flex-1">
<div className="mb-2">
<select
className="bg-kodo-ink border border-kodo-steel rounded px-2 py-1 text-xs text-kodo-steel focus:outline-none cursor-pointer"
className="bg-kodo-ink border border-border rounded px-2 py-1 text-xs text-kodo-steel focus:outline-none cursor-pointer"
value={visibility}
onChange={(e) => setVisibility(e.target.value)}
>
@ -99,7 +99,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-between items-center">
<div className="flex gap-2">
<button
className={`p-2 rounded hover:bg-white/10 text-muted-foreground hover:text-white ${postType === 'image' ? 'text-kodo-steel' : ''}`}

6
apps/web/src/components/social/ExploreView.tsx
View file

@ -83,7 +83,7 @@ export const ExploreView: React.FC = () => {
return (
<div className="space-y-8 animate-fadeIn">
{/* Navigation & Search */}
<div className="flex flex-col md:flex-row justify-between items-center gap-4 bg-kodo-ink/50 p-2 rounded-xl border border-kodo-steel/50">
<div className="flex flex-col md:flex-row justify-between items-center gap-4 bg-kodo-ink/50 p-2 rounded-xl border border-border/50">
<div className="flex gap-2 overflow-x-auto w-full md:w-auto p-1">
{[
{
@ -119,7 +119,7 @@ export const ExploreView: React.FC = () => {
<Button
variant="ghost"
size="icon"
className="border border-kodo-steel"
className="border border-border"
>
<Filter className="w-4 h-4" />
</Button>
@ -132,7 +132,7 @@ export const ExploreView: React.FC = () => {
<button
key={f}
onClick={() => setFilter(f)}
className={`px-4 py-1 rounded-full text-xs font-bold border transition-colors ${filter === f ? 'bg-white text-black border-white' : 'border-kodo-steel text-muted-foreground hover:border-kodo-steel'}`}
className={`px-4 py-1 rounded-full text-xs font-bold border transition-colors ${filter === f ? 'bg-white text-black border-white' : 'border-border text-muted-foreground hover:border-border'}`}
>
{f}
</button>

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

@ -90,7 +90,7 @@ export const FeedView: React.FC = () => {
className="flex-1 cursor-pointer"
onClick={() => setShowCreateModal(true)}
>
<div className="w-full bg-kodo-void/50 border border-kodo-steel rounded-full px-4 py-2.5 text-muted-foreground hover:bg-kodo-void hover:border-kodo-steel/50 transition-all text-sm">
<div className="w-full bg-kodo-void/50 border border-border rounded-full px-4 py-2.5 text-muted-foreground hover:bg-kodo-void hover:border-border/50 transition-all text-sm">
What are you working on today?
</div>
</div>

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

@ -67,7 +67,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
<>
<Card
variant="default"
className="p-0 overflow-hidden border-transparent hover:border-kodo-steel/50 transition-all animate-fadeIn mb-4"
className="p-0 overflow-hidden border-transparent hover:border-border/50 transition-all animate-fadeIn mb-4"
>
{/* Repost Header */}
{post.isRepost && (
@ -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-kodo-steel cursor-pointer">
<div className="w-10 h-10 rounded-full bg-kodo-steel overflow-hidden border border-border cursor-pointer">
<img
src={post.author.avatar}
className="w-full h-full object-cover"
@ -135,7 +135,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
{post.type === 'audio' && post.audioTrack && (
<div className="px-4 py-2">
<div className="bg-kodo-ink p-4 rounded-xl flex items-center gap-4 border border-kodo-steel hover:border-kodo-steel/50 transition-colors">
<div className="bg-kodo-ink p-4 rounded-xl flex items-center gap-4 border border-border hover:border-border/50 transition-colors">
<div className="w-12 h-12 bg-kodo-graphite rounded overflow-hidden relative group cursor-pointer">
<img
src={post.audioTrack.coverUrl}
@ -171,7 +171,7 @@ 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-kodo-steel"
className="relative h-10 bg-kodo-slate rounded overflow-hidden cursor-pointer hover:bg-kodo-steel/50 transition-colors border border-border"
>
<div
className="absolute top-0 left-0 h-full bg-kodo-steel/20"
@ -192,7 +192,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
)}
{/* Footer Actions */}
<div className="p-4 border-t border-kodo-steel flex items-center justify-between text-muted-foreground text-sm">
<div className="p-4 border-t border-border flex items-center justify-between text-muted-foreground text-sm">
<button
className={`flex items-center gap-2 hover:text-kodo-magenta transition-colors group ${isLiked ? 'text-kodo-magenta' : ''}`}
onClick={handleLike}
@ -224,7 +224,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
{/* Comments Section */}
{showComments && (
<div className="bg-kodo-ink border-t border-kodo-steel p-4 animate-slideUp">
<div className="bg-kodo-ink border-t border-border p-4 animate-slideUp">
<div className="space-y-4">
{comments.map((c) => (
<CommentItem
@ -249,7 +249,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
</div>
<div className="flex-1 relative">
<input
className="w-full bg-kodo-void border border-kodo-steel rounded-full px-4 py-2 text-sm text-white focus:border-kodo-steel outline-none"
className="w-full bg-kodo-void border border-border rounded-full px-4 py-2 text-sm text-white focus:border-border outline-none"
placeholder="Write a comment..."
/>
</div>

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

@ -32,8 +32,8 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-lg bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Quote Post</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" />
@ -47,7 +47,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
onChange={(e) => setQuoteText(e.target.value)}
autoFocus
/>
<div className="border border-kodo-steel rounded-lg p-4 bg-kodo-ink/30 opacity-70">
<div className="border border-border rounded-lg p-4 bg-kodo-ink/30 opacity-70">
<div className="flex items-center gap-2 mb-2">
<img
src={post.author.avatar}
@ -62,7 +62,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
</p>
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-2">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-2">
<Button variant="ghost" onClick={() => setMode('options')}>
Back
</Button>
@ -87,8 +87,8 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-sm bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-sm bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white">Share Post</h3>
<button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" />

4
apps/web/src/components/social/connections/ConnectionsView.tsx
View file

@ -51,7 +51,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
return (
<div className="space-y-6 animate-fadeIn pb-20">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-kodo-steel/50 pb-6 gap-4">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-border/50 pb-6 gap-4">
<div>
<h2 className="text-3xl font-display font-bold text-white mb-2 capitalize">
{type}
@ -62,7 +62,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
</div>
</div>
<div className="flex flex-col md:flex-row gap-4 items-center bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50">
<div className="flex flex-col md:flex-row gap-4 items-center bg-kodo-ink/50 p-4 rounded-xl border border-border/50">
<div className="w-full md:w-96">
<SearchInput
placeholder={`Search ${type}...`}

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

@ -45,8 +45,8 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="relative w-full max-w-lg bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<Users className="w-5 h-5 text-kodo-steel" /> Create Community
</h3>
@ -57,7 +57,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
<div className="p-6 space-y-6">
{/* Cover Upload */}
<div className="relative w-full h-32 bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-lg overflow-hidden flex flex-col items-center justify-center group cursor-pointer hover:border-kodo-steel/50 transition-colors">
<div className="relative w-full h-32 bg-kodo-ink border-2 border-dashed border-border rounded-lg overflow-hidden flex flex-col items-center justify-center group cursor-pointer hover:border-border/50 transition-colors">
{coverImage ? (
<img src={coverImage} className="w-full h-full object-cover" />
) : (
@ -90,7 +90,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
Description
</label>
<textarea
className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-4 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-24"
className="w-full bg-kodo-void border border-border rounded-lg p-4 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-24"
placeholder="What's this community about?"
value={description}
onChange={(e) => setDescription(e.target.value)}
@ -98,7 +98,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
</div>
<div
className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel flex items-center justify-between cursor-pointer hover:border-kodo-steel"
className="bg-kodo-ink p-4 rounded-lg border border-border flex items-center justify-between cursor-pointer hover:border-border"
onClick={() => setIsPrivate(!isPrivate)}
>
<div className="flex items-center gap-4">
@ -127,7 +127,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
</div>
</div>
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
<Button variant="ghost" onClick={onClose}>
Cancel
</Button>

4
apps/web/src/components/social/groups/GroupCard.tsx
View file

@ -22,7 +22,7 @@ export const GroupCard: React.FC<GroupCardProps> = ({
return (
<Card
variant="default"
className="p-0 overflow-hidden group cursor-pointer hover:border-kodo-steel/50 transition-all flex flex-col h-full"
className="p-0 overflow-hidden group cursor-pointer hover:border-border/50 transition-all flex flex-col h-full"
onClick={onClick}
>
<div className="h-32 relative overflow-hidden bg-kodo-ink">
@ -68,7 +68,7 @@ export const GroupCard: React.FC<GroupCardProps> = ({
<Button
variant="ghost"
size="sm"
className="w-full border border-kodo-steel hover:bg-kodo-red/10 hover:text-kodo-red hover:border-kodo-red"
className="w-full border border-border hover:bg-kodo-red/10 hover:text-kodo-red hover:border-kodo-red"
onClick={onLeave}
>
<LogOut className="w-4 h-4 mr-2" /> Leave Group

6
apps/web/src/components/social/groups/GroupsView.tsx
View file

@ -92,7 +92,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
return (
<div className="space-y-6 animate-fadeIn pb-20">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-kodo-steel/50 pb-6 gap-4">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-border/50 pb-6 gap-4">
<div>
<h2 className="text-3xl font-display font-bold text-white mb-2">
COMMUNITIES
@ -110,8 +110,8 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
</Button>
</div>
<div className="flex flex-col md:flex-row gap-4 items-center bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50">
<div className="flex bg-kodo-void rounded-lg p-1 border border-kodo-steel">
<div className="flex flex-col md:flex-row gap-4 items-center bg-kodo-ink/50 p-4 rounded-xl border border-border/50">
<div className="flex bg-kodo-void rounded-lg p-1 border border-border">
<button
onClick={() => setActiveTab('my_groups')}
className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'my_groups' ? 'bg-kodo-slate text-white' : 'text-muted-foreground hover:text-white'}`}

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

@ -125,9 +125,9 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-kodo-void/95 backdrop-blur-sm">
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl overflow-hidden flex flex-col h-[80vh]">
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-border rounded-xl shadow-2xl overflow-hidden flex flex-col h-[80vh]">
{/* Header */}
<div className="p-4 border-b border-kodo-steel flex justify-between items-center bg-kodo-ink">
<div className="p-4 border-b border-border flex justify-between items-center bg-kodo-ink">
<h3 className="font-bold text-white flex items-center gap-2">
Edit Image
</h3>
@ -161,7 +161,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
</div>
{/* Controls */}
<div className="p-8 bg-kodo-ink border-t border-kodo-steel space-y-4">
<div className="p-8 bg-kodo-ink border-t border-border space-y-4">
<div className="flex items-center gap-4">
<span className="text-xs text-muted-foreground w-16">Zoom</span>
<ZoomIn className="w-4 h-4 text-muted-foreground" />

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

@ -83,7 +83,7 @@ export const Toast: React.FC<ToastProps> = ({ id, type, message, onClose }) => {
const styles = {
success: 'border-kodo-lime text-white bg-kodo-ink/90',
error: 'border-kodo-red text-white bg-kodo-ink/90',
info: 'border-kodo-steel text-white bg-kodo-ink/90',
info: 'border-border text-white bg-kodo-ink/90',
};
const icons = {

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-kodo-steel/30 text-kodo-steel',
info: 'bg-kodo-steel/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

@ -154,7 +154,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
>
<div
className={cn(
`${sizeClasses[size]} rounded-full overflow-hidden bg-kodo-graphite border border-kodo-steel flex items-center justify-center relative`,
`${sizeClasses[size]} rounded-full overflow-hidden bg-kodo-graphite border border-border flex items-center justify-center relative`,
)}
>
{src ? (

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-kodo-steel/30',
cyan: 'bg-kodo-steel/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',

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

@ -106,8 +106,8 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
/>
<div
className="
w-5 h-5 rounded border border-kodo-steel bg-kodo-graphite
peer-checked:bg-kodo-cyan peer-checked:border-kodo-steel
w-5 h-5 rounded border border-border bg-kodo-graphite
peer-checked:bg-kodo-cyan peer-checked:border-border
peer-focus:ring-2 peer-focus:ring-kodo-steel/30
transition-all duration-[var(--duration-fast)]
"

2
apps/web/src/components/ui/lazy-component/LazyErrorFallback.tsx
View file

@ -26,7 +26,7 @@ export function LazyErrorFallback({
}: LazyErrorFallbackProps) {
return (
<div className="flex flex-col items-center justify-center min-h-layout-page-sm p-8 text-center animate-in fade-in zoom-in duration-[var(--duration-normal)]">
<div className="bg-kodo-ink/50 border border-kodo-steel/30 rounded-xl p-8 max-w-md w-full shadow-lg backdrop-blur-sm">
<div className="bg-kodo-ink/50 border border-border/30 rounded-xl p-8 max-w-md w-full shadow-lg backdrop-blur-sm">
<div className="w-16 h-16 bg-kodo-red/10 rounded-full flex items-center justify-center mx-auto mb-6">
<AlertTriangle className="h-8 w-8 text-kodo-red" />
</div>

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

@ -87,7 +87,7 @@ export function Modal({
<div
ref={modalRef}
className={cn(
'relative w-full bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl flex flex-col overflow-hidden animate-scaleIn',
'relative w-full bg-kodo-graphite border border-border rounded-xl shadow-2xl flex flex-col overflow-hidden animate-scaleIn',
sizeClasses[size],
className,
)}
@ -95,7 +95,7 @@ export function Modal({
>
{/* Header */}
{title && (
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center shrink-0">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center shrink-0">
<h3 className="font-bold text-white text-lg font-display">
{title}
</h3>
@ -117,7 +117,7 @@ export function Modal({
{/* Footer */}
{footer && (
<div className="p-4 border-t border-kodo-steel bg-kodo-ink shrink-0 flex justify-end gap-4">
<div className="p-4 border-t border-border bg-kodo-ink shrink-0 flex justify-end gap-4">
{footer}
</div>
)}

4
apps/web/src/components/ui/radio-group.tsx
View file

@ -151,11 +151,11 @@ const RadioGroupItem = React.forwardRef<HTMLInputElement, RadioGroupItemProps>(
return (
<label
className={cn(
'aspect-square h-4 w-4 rounded-full border border-kodo-steel text-kodo-steel',
'aspect-square h-4 w-4 rounded-full border border-border text-kodo-steel',
'ring-offset-kodo-void focus-within:outline-none focus-within:ring-2 focus-within:ring-kodo-steel focus-within:ring-offset-2',
'disabled:cursor-not-allowed disabled:opacity-50',
'cursor-pointer relative inline-flex items-center justify-center',
checked && 'border-kodo-steel',
checked && 'border-border',
className,
)}
>

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

@ -80,7 +80,7 @@ const TableHeader = React.forwardRef<
>(({ className, ...props }, ref) => (
<thead
ref={ref}
className={cn('[&_tr]:border-b border-kodo-steel', className)}
className={cn('[&_tr]:border-b border-border', className)}
{...props}
/>
));
@ -120,7 +120,7 @@ const TableFooter = React.forwardRef<
<tfoot
ref={ref}
className={cn(
'border-t border-kodo-steel bg-kodo-steel/30 font-medium [&>tr]:last:border-b-0',
'border-t border-border bg-kodo-steel/30 font-medium [&>tr]:last:border-b-0',
className,
)}
{...props}
@ -142,7 +142,7 @@ const TableRow = React.forwardRef<
<tr
ref={ref}
className={cn(
'border-b border-kodo-steel transition-colors hover:bg-white/5 data-[state=selected]:bg-white/10',
'border-b border-border transition-colors hover:bg-white/5 data-[state=selected]:bg-white/10',
className,
)}
{...props}

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

@ -83,11 +83,11 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
className={cn(
'w-full px-4 py-4',
'bg-kodo-graphite border',
error ? 'border-kodo-red' : 'border-kodo-steel',
error ? 'border-kodo-red' : 'border-border',
'text-white placeholder-gray-500',
'font-body text-base',
'rounded-lg',
'focus:outline-none focus:border-kodo-steel focus:ring-1 focus:ring-kodo-steel',
'focus:outline-none focus:border-border focus:ring-1 focus:ring-kodo-steel',
'transition-all duration-[var(--duration-fast)]',
'min-h-[100px] resize-y',
className,

2
apps/web/src/components/upload/BulkUploadModal.tsx
View file

@ -49,7 +49,7 @@ export const BulkUploadModal: React.FC<BulkUploadModalProps> = ({
</div>
{/* Global Progress */}
<div className="px-6 py-2 bg-kodo-slate/30 border-b border-kodo-steel">
<div className="px-6 py-2 bg-kodo-slate/30 border-b border-border">
<div className="flex justify-between text-xs font-bold text-muted-foreground uppercase mb-1">
<span>Overall Progress</span>
<span>{Math.round(totalProgress)}%</span>

2
apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
View file

@ -39,7 +39,7 @@ export const LyricsEditorModal: React.FC<LyricsEditorModalProps> = ({
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal">
<div className="relative w-full max-w-2xl bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal">
<div className="p-4 border-b border-border bg-muted flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<Mic2 className="w-4 h-4 text-kodo-steel" /> Lyrics Editor

2
apps/web/src/components/upload/metadata/TagSuggestionsModal.tsx
View file

@ -59,7 +59,7 @@ export const TagSuggestionsModal: React.FC<TagSuggestionsModalProps> = ({
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2">
<Hash className="w-4 h-4 text-primary" /> Manage Tags
</h3>

6
apps/web/src/components/user/UserCard.tsx
View file

@ -18,14 +18,14 @@ export const UserCard: React.FC<UserCardProps> = ({
isFollowing,
}) => {
return (
<Card className="flex flex-col items-center text-center p-6 group hover:border-kodo-steel/50 transition-all relative overflow-hidden">
<Card className="flex flex-col items-center text-center p-6 group hover:border-border/50 transition-all relative overflow-hidden">
<button
type="button"
className="relative mb-4 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full"
onClick={onView}
>
<div className="w-20 h-20 rounded-full border-2 border-kodo-steel p-1 bg-kodo-ink group-hover:border-kodo-steel/50 transition-colors">
<div className="w-20 h-20 rounded-full border-2 border-border p-1 bg-kodo-ink group-hover:border-border/50 transition-colors">
<img
src={user.avatar}
alt={user.username}
@ -79,7 +79,7 @@ export const UserCard: React.FC<UserCardProps> = ({
<Button
variant="ghost"
size="icon"
className="border border-kodo-steel"
className="border border-border"
>
<MoreHorizontal className="w-4 h-4" />
</Button>

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

@ -117,7 +117,7 @@ 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-kodo-steel border-dashed rounded-t-2xl animate-fadeIn">
<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="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">
<Paperclip className="w-6 h-6 text-kodo-steel" />
@ -214,7 +214,7 @@ export const ChatInput: React.FC = () => {
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="Broadcast message..."
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-white placeholder:text-kodo-secondary/50 focus:outline-none focus:border-kodo-steel/50 focus:ring-1 focus:ring-kodo-steel/50 transition-all font-mono text-sm"
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-white placeholder:text-kodo-secondary/50 focus:outline-none focus:border-border/50 focus:ring-1 focus:ring-kodo-steel/50 transition-all font-mono text-sm"
disabled={!currentConversationId || isUploading}
/>
{message.length === 0 && !isUploading && (

2
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-kodo-steel/20">
<div className="w-12 h-12 rounded-xl bg-kodo-steel/10 flex items-center justify-center border border-border/20">
<MessageSquare className="w-6 h-6 text-kodo-steel" />
</div>
<div>

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-kodo-steel text-primary focus:ring-2 focus:ring-primary"
className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary"
/>
</div>
</div>

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

@ -98,7 +98,7 @@ export function PlaylistCard({
'touch-manipulation min-h-6 min-w-6',
selected
? 'bg-kodo-cyan border-kodo-cyan text-white'
: 'bg-white/90 dark:bg-kodo-graphite/90 border-kodo-steel dark:border-kodo-steel text-transparent hover:border-kodo-steel/50',
: 'bg-white/90 dark:bg-kodo-graphite/90 border-border dark:border-border text-transparent hover:border-border/50',
)}
aria-label={
selected

2
apps/web/src/features/studio/components/cloud-file-browser/CloudFileBrowserSkeleton.tsx
View file

@ -41,7 +41,7 @@ export function CloudFileBrowserSkeleton({
{/* Content skeleton */}
<div className="flex-1 overflow-hidden min-h-layout-page-sm">
{viewMode === 'list' ? (
<div className="bg-kodo-graphite border border-kodo-steel rounded-xl overflow-hidden">
<div className="bg-kodo-graphite border border-border rounded-xl overflow-hidden">
<div className="border-b border-border p-4 flex gap-4">
<div className="h-4 w-10 rounded bg-muted" />
<div className="h-4 flex-1 rounded bg-muted" />

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

@ -118,7 +118,7 @@ export function FileToolbar({
'px-2 py-1 rounded text-xs border transition-colors whitespace-nowrap',
activeTags.includes(tag)
? 'bg-kodo-cyan/20 border-kodo-cyan text-kodo-cyan'
: 'border-kodo-steel text-muted-foreground hover:border-kodo-steel'
: 'border-border text-muted-foreground hover:border-border'
)}
>
{tag}
@ -177,7 +177,7 @@ export function FileToolbar({
>
<Stamp className="w-4 h-4" />
</Button>
<div className="bg-kodo-void rounded-lg p-1 border border-kodo-steel flex items-center">
<div className="bg-kodo-void rounded-lg p-1 border border-border flex items-center">
<span className="text-xs text-muted-foreground px-2 uppercase font-bold">
Sort:
</span>