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

refactor: Phase 7 — Clean up legacy components and remove dead tokens

Browse source 
- Bulk replace text-white → text-foreground across 116 component files
  (preserving text-white/ opacity variants)
- Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow
  classes from all components
- Replace --duration-normal/--duration-immersive/--duration-slow with
  --sumi-duration-normal/--sumi-duration-slow across 130+ files
- Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out
- Replace focus:ring-blue-500 → focus:ring-primary (4 files)
- Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms
  (SUMI anti-pattern: no scale on hover)
- Clean up stale kodo- references in comments

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-12 02:09:29 +01:00
parent 69e40e3c04
commit 73e8372b0e
268 changed files with 585 additions and 585 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/web/src/__tests__/contrast.test.ts
View file

@ -58,7 +58,7 @@ describe('Contrast Ratio Utilities', () => {
}); });
it('should pass for white on dark background (normal text)', () => { it('should pass for white on dark background (normal text)', () => {
const ratio = getContrastRatio([255, 255, 255], [11, 12, 16]); // kodo-void const ratio = getContrastRatio([255, 255, 255], [11, 12, 16]); // sumi-bg-base
expect(meetsWCAGAA(ratio, false)).toBe(true); expect(meetsWCAGAA(ratio, false)).toBe(true);
expect(ratio).toBeGreaterThan(4.5); expect(ratio).toBeGreaterThan(4.5);
}); });

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

@ -72,7 +72,7 @@ export function BulkModeBanner({
className={cn( className={cn(
'w-full bg-muted/10 border-b border-border/30 text-muted-foreground', 'w-full bg-muted/10 border-b border-border/30 text-muted-foreground',
'px-4 py-4 flex items-center justify-between gap-4', 'px-4 py-4 flex items-center justify-between gap-4',
'transition-all duration-[var(--duration-normal)]', 'transition-all duration-[var(--sumi-duration-normal)]',
className, className,
)} )}
> >
@ -86,7 +86,7 @@ export function BulkModeBanner({
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={onClose} onClick={onClose}
className="text-muted-foreground hover:text-white hover:bg-white/5 h-auto py-1 px-2 flex-shrink-0" className="text-muted-foreground hover:text-foreground hover:bg-white/5 h-auto py-1 px-2 flex-shrink-0"
aria-label="Fermer le mode sélection" aria-label="Fermer le mode sélection"
> >
<X className="w-4 h-4" /> <X className="w-4 h-4" />

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

@ -15,7 +15,7 @@ const OfflineIndicatorMock = ({ variant }: { variant: 'offline' | 'syncing' | 'h
if (variant === 'offline') { if (variant === 'offline') {
return ( return (
<div className="bg-destructive/90 backdrop-blur-sm text-white px-4 py-2.5 text-sm flex items-center justify-center gap-2 shadow-lg border-b border-destructive rounded"> <div className="bg-destructive/90 backdrop-blur-sm text-foreground px-4 py-2.5 text-sm flex items-center justify-center gap-2 shadow-lg border-b border-destructive rounded">
<WifiOff className="w-4 h-4" /> <WifiOff className="w-4 h-4" />
<span> <span>
Mode hors ligne Mode hors ligne

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

@ -100,7 +100,7 @@ export function OfflineIndicator() {
if (!isOnline || hasNetworkError) { if (!isOnline || hasNetworkError) {
return ( return (
<> <>
<div className="fixed top-0 left-0 right-0 bg-destructive/90 backdrop-blur-sm text-white px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-lg border-b border-destructive"> <div className="fixed top-0 left-0 right-0 bg-destructive/90 backdrop-blur-sm text-foreground px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-lg border-b border-destructive">
<WifiOff className="w-4 h-4" /> <WifiOff className="w-4 h-4" />
<span> <span>
Mode hors ligne Mode hors ligne

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

@ -157,7 +157,7 @@ export function OfflineQueueManager({
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
{/* Request Method and URL */} {/* Request Method and URL */}
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<span className="font-mono text-sm font-semibold text-white truncate"> <span className="font-mono text-sm font-semibold text-foreground truncate">
{formatRequest(request)} {formatRequest(request)}
</span> </span>
</div> </div>

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

@ -163,7 +163,7 @@ export function Onboarding({
> >
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h3 className="text-xl font-semibold text-white mb-2"> <h3 className="text-xl font-semibold text-foreground mb-2">
{step.title} {step.title}
</h3> </h3>
<p className="text-muted-foreground text-sm leading-relaxed"> <p className="text-muted-foreground text-sm leading-relaxed">

2
apps/web/src/components/admin/admin-dashboard-view/AdminDashboardNodeHealthCard.tsx
View file

@ -21,7 +21,7 @@ export function AdminDashboardNodeHealthCard() {
key={i} key={i}
className="flex justify-between items-center py-2 border-b border-white/5 last:border-0 group" className="flex justify-between items-center py-2 border-b border-white/5 last:border-0 group"
> >
<span className="text-xs font-mono text-muted-foreground group-hover:text-white transition-colors uppercase"> <span className="text-xs font-mono text-muted-foreground group-hover:text-foreground transition-colors uppercase">
{m.l} {m.l}
</span> </span>
<span <span

4
apps/web/src/components/admin/admin-dashboard-view/AdminDashboardProtocolsCard.tsx
View file

@ -29,7 +29,7 @@ const PROTOCOLS = [
{ {
id: 'logs', id: 'logs',
label: 'SEC LOGS', label: 'SEC LOGS',
icon: <Eye className="w-5 h-5 text-white" />, icon: <Eye className="w-5 h-5 text-foreground" />,
color: 'primary', color: 'primary',
}, },
]; ];
@ -62,7 +62,7 @@ export function AdminDashboardProtocolsCard({
<div className="transition-transform group-hover:-translate-y-1 relative z-10"> <div className="transition-transform group-hover:-translate-y-1 relative z-10">
{act.icon} {act.icon}
</div> </div>
<span className="text-xs font-mono tracking-widest text-muted-foreground group-hover:text-white relative z-10"> <span className="text-xs font-mono tracking-widest text-muted-foreground group-hover:text-foreground relative z-10">
{act.label} {act.label}
</span> </span>
</button> </button>

2
apps/web/src/components/admin/admin-dashboard-view/AdminDashboardStatCard.tsx
View file

@ -59,7 +59,7 @@ export function AdminDashboardStatCard({
</span> </span>
)} )}
</div> </div>
<div className="text-3xl font-heading font-bold text-white mb-1 relative z-10"> <div className="text-3xl font-heading font-bold text-foreground mb-1 relative z-10">
{typeof value === 'number' ? ( {typeof value === 'number' ? (
<AnimatedNumber value={value} /> <AnimatedNumber value={value} />
) : ( ) : (

2
apps/web/src/components/admin/admin-dashboard-view/AdminDashboardTrafficCard.tsx
View file

@ -14,7 +14,7 @@ export function AdminDashboardTrafficCard() {
> >
<div className="flex justify-between items-center mb-6 relative z-10"> <div className="flex justify-between items-center mb-6 relative z-10">
<div> <div>
<h3 className="text-lg font-bold text-white flex items-center gap-3"> <h3 className="text-lg font-bold text-foreground flex items-center gap-3">
<Server className="w-5 h-5 text-primary" /> Traffic Flux <Server className="w-5 h-5 text-primary" /> Traffic Flux
</h3> </h3>
<p className="text-xs text-muted-foreground font-mono mt-1"> <p className="text-xs text-muted-foreground font-mono mt-1">

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

@ -30,14 +30,14 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
<ShieldBan className="w-5 h-5 fill-current" /> Suspend User <ShieldBan className="w-5 h-5 fill-current" /> Suspend User
</h3> </h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>
<div className="p-6 space-y-4"> <div className="p-6 space-y-4">
<p className="text-foreground text-sm"> <p className="text-foreground text-sm">
You are about to suspend{' '} You are about to suspend{' '}
<span className="font-bold text-white">{username}</span>. This will <span className="font-bold text-foreground">{username}</span>. This will
restrict their access to the platform. restrict their access to the platform.
</p> </p>
@ -46,7 +46,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
Reason Reason
</label> </label>
<select <select
className="w-full bg-background border border-border rounded p-2 text-white focus:border-destructive outline-none text-sm" className="w-full bg-background border border-border rounded p-2 text-foreground focus:border-destructive outline-none text-sm"
value={reason} value={reason}
onChange={(e) => setReason(e.target.value)} onChange={(e) => setReason(e.target.value)}
> >
@ -64,7 +64,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
Details (Internal Note) Details (Internal Note)
</label> </label>
<textarea <textarea
className="w-full bg-background border border-border rounded p-2 text-white focus:border-destructive outline-none text-sm resize-none h-24" className="w-full bg-background border border-border rounded p-2 text-foreground focus:border-destructive outline-none text-sm resize-none h-24"
placeholder="Provide context for this ban..." placeholder="Provide context for this ban..."
value={details} value={details}
onChange={(e) => setDetails(e.target.value)} onChange={(e) => setDetails(e.target.value)}
@ -75,7 +75,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Calendar className="w-5 h-5 text-muted-foreground" /> <Calendar className="w-5 h-5 text-muted-foreground" />
<div> <div>
<div className="text-sm font-bold text-white">Ban Duration</div> <div className="text-sm font-bold text-foreground">Ban Duration</div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
{isPermanent ? 'Permanent Ban' : `${duration} Days`} {isPermanent ? 'Permanent Ban' : `${duration} Days`}
</div> </div>
@ -83,7 +83,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span <span
className={`text-xs ${!isPermanent ? 'text-white' : 'text-muted-foreground'}`} className={`text-xs ${!isPermanent ? 'text-foreground' : 'text-muted-foreground'}`}
> >
Temp Temp
</span> </span>
@ -111,7 +111,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
<input <input
type="number" type="number"
min="1" min="1"
className="w-full bg-background border border-border rounded p-2 text-white focus:border-destructive outline-none text-sm" className="w-full bg-background border border-border rounded p-2 text-foreground focus:border-destructive outline-none text-sm"
value={duration} value={duration}
onChange={(e) => setDuration(e.target.value)} onChange={(e) => setDuration(e.target.value)}
/> />
@ -125,7 +125,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
</Button> </Button>
<Button <Button
variant="primary" variant="primary"
className="bg-destructive hover:bg-destructive border-destructive text-white" className="bg-destructive hover:bg-destructive border-destructive text-foreground"
onClick={() => onClick={() =>
onConfirm( onConfirm(
reason, reason,

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

@ -27,14 +27,14 @@ export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
<div className="w-full md:w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-muted"> <div className="w-full md:w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-muted">
<img <img
src={product.coverUrl} src={product.coverUrl}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--duration-slow)]" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--sumi-duration-slow)]"
alt={product.title} alt={product.title}
/> />
</div> </div>
{/* Info */} {/* Info */}
<div className="flex-1 w-full text-center md:text-left"> <div className="flex-1 w-full text-center md:text-left">
<h4 className="font-bold text-white text-lg">{product.title}</h4> <h4 className="font-bold text-foreground text-lg">{product.title}</h4>
<p className="text-muted-foreground text-sm mb-2">{product.author}</p> <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"> <div className="flex items-center justify-center md:justify-start gap-2 text-xs">
<span className="px-2 py-1 bg-card border border-border rounded flex items-center gap-1"> <span className="px-2 py-1 bg-card border border-border rounded flex items-center gap-1">
@ -48,7 +48,7 @@ export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
{/* Price & Actions */} {/* Price & Actions */}
<div className="flex flex-row md:flex-col items-center gap-4 md:gap-2 w-full md:w-auto justify-between"> <div className="flex flex-row md:flex-col items-center gap-4 md:gap-2 w-full md:w-auto justify-between">
<div className="text-xl font-mono font-bold text-white"> <div className="text-xl font-mono font-bold text-foreground">
${price.toFixed(2)} ${price.toFixed(2)}
</div> </div>
<Button <Button

10
apps/web/src/components/commerce/OrderSummary.tsx
View file

@ -42,14 +42,14 @@ export const OrderSummary: React.FC<OrderSummaryProps> = ({
<Card variant="glass" className="p-8 bg-black/40 border-white/5 relative overflow-hidden group"> <Card variant="glass" className="p-8 bg-black/40 border-white/5 relative overflow-hidden group">
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent" /> <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
<h3 className="font-bold text-white mb-8 uppercase tracking-[0.2em] text-xs flex items-center gap-3"> <h3 className="font-bold text-foreground mb-8 uppercase tracking-[0.2em] text-xs flex items-center gap-3">
<CreditCard className="w-4 h-4 text-primary" /> Checkout Summary <CreditCard className="w-4 h-4 text-primary" /> Checkout Summary
</h3> </h3>
<div className="space-y-5 text-sm mb-8"> <div className="space-y-5 text-sm mb-8">
<div className="flex justify-between text-muted-foreground font-mono uppercase text-xs"> <div className="flex justify-between text-muted-foreground font-mono uppercase text-xs">
<span>Transaction Base</span> <span>Transaction Base</span>
<span className="text-white font-bold"> <span className="text-foreground font-bold">
{formatPrice(subtotal)} {formatPrice(subtotal)}
</span> </span>
</div> </div>
@ -65,7 +65,7 @@ export const OrderSummary: React.FC<OrderSummaryProps> = ({
<div className="flex justify-between text-muted-foreground font-mono uppercase text-xs"> <div className="flex justify-between text-muted-foreground font-mono uppercase text-xs">
<span>Regulatory Levy ({(taxRate * 100).toFixed(0)}%)</span> <span>Regulatory Levy ({(taxRate * 100).toFixed(0)}%)</span>
<span className="text-white font-bold"> <span className="text-foreground font-bold">
{formatPrice(taxAmount)} {formatPrice(taxAmount)}
</span> </span>
</div> </div>
@ -74,7 +74,7 @@ export const OrderSummary: React.FC<OrderSummaryProps> = ({
<div className="border-t border-white/5 pt-6 mb-8"> <div className="border-t border-white/5 pt-6 mb-8">
<div className="flex justify-between items-end"> <div className="flex justify-between items-end">
<span className="text-xs font-mono text-muted-foreground uppercase tracking-widest">Total Liability</span> <span className="text-xs font-mono text-muted-foreground uppercase tracking-widest">Total Liability</span>
<span className="text-3xl font-heading font-bold text-white shadow-glow-cyan"> <span className="text-3xl font-heading font-bold text-foreground shadow-glow-cyan">
{formatPrice(total)} {formatPrice(total)}
</span> </span>
</div> </div>
@ -97,7 +97,7 @@ export const OrderSummary: React.FC<OrderSummaryProps> = ({
<ShieldCheck className="w-5 h-5 text-gold-500" /> <ShieldCheck className="w-5 h-5 text-gold-500" />
</div> </div>
<div> <div>
<h4 className="font-bold text-white text-xs mb-1 uppercase tracking-wider">Encrypted Node</h4> <h4 className="font-bold text-foreground text-xs mb-1 uppercase tracking-wider">Encrypted Node</h4>
<p className="text-xs text-muted-foreground leading-relaxed font-mono uppercase"> <p className="text-xs text-muted-foreground leading-relaxed font-mono uppercase">
SECURE FLOW ENABLED. DATA PACKETS ARE ENCRYPTED VIA AES-256. SECURE FLOW ENABLED. DATA PACKETS ARE ENCRYPTED VIA AES-256.
</p> </p>

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

@ -155,13 +155,13 @@ export const WishlistView: React.FC = () => {
<motion.div key={product.id} variants={cardVariants}> <motion.div key={product.id} variants={cardVariants}>
<Card <Card
variant="default" variant="default"
className="p-4 group hover:border-border/50 hover:-translate-y-1 hover:shadow-lg transition-all duration-[var(--duration-normal)]" className="p-4 group hover:border-border/50 hover:shadow-lg transition-all duration-[var(--sumi-duration-normal)]"
> >
<div className="flex gap-4"> <div className="flex gap-4">
<div className="relative w-24 h-24 bg-muted rounded-lg overflow-hidden flex-shrink-0"> <div className="relative w-24 h-24 bg-muted rounded-lg overflow-hidden flex-shrink-0">
<img <img
src={product.coverUrl} src={product.coverUrl}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-[var(--duration-slow)]" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-[var(--sumi-duration-slow)]"
/> />
<div <div
className="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer" className="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
@ -172,9 +172,9 @@ export const WishlistView: React.FC = () => {
} }
> >
{playingPreview === product.id ? ( {playingPreview === product.id ? (
<Pause className="w-8 h-8 text-white" /> <Pause className="w-8 h-8 text-foreground" />
) : ( ) : (
<Play className="w-8 h-8 text-white fill-current" /> <Play className="w-8 h-8 text-foreground fill-current" />
)} )}
</div> </div>
{product.isHot && ( {product.isHot && (

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

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

10
apps/web/src/components/commerce/modals/RefundRequestModal.tsx
View file

@ -29,11 +29,11 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
></div> ></div>
<div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden"> <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-border bg-muted flex justify-between items-center"> <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"> <h3 className="font-bold text-foreground flex items-center gap-2">
<RefreshCcw className="w-4 h-4 text-warning" /> Request Refund <RefreshCcw className="w-4 h-4 text-warning" /> Request Refund
</h3> </h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>
@ -41,7 +41,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Refund requests are subject to approval. Please provide details Refund requests are subject to approval. Please provide details
below for Order{' '} below for Order{' '}
<span className="font-mono text-white">#{orderId}</span>. <span className="font-mono text-foreground">#{orderId}</span>.
</p> </p>
<div> <div>
@ -49,7 +49,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
Reason Reason
</label> </label>
<select <select
className="w-full bg-muted border border-border rounded-lg px-4 py-2.5 text-white focus:border-primary outline-none" className="w-full bg-muted border border-border rounded-lg px-4 py-2.5 text-foreground focus:border-primary outline-none"
value={reason} value={reason}
onChange={(e) => setReason(e.target.value)} onChange={(e) => setReason(e.target.value)}
> >
@ -65,7 +65,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
Details Details
</label> </label>
<textarea <textarea
className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-primary outline-none text-sm resize-none h-24" className="w-full bg-muted border border-border rounded-lg p-4 text-foreground focus:border-primary outline-none text-sm resize-none h-24"
placeholder="Please explain why you are requesting a refund..." placeholder="Please explain why you are requesting a refund..."
value={details} value={details}
onChange={(e) => setDetails(e.target.value)} onChange={(e) => setDetails(e.target.value)}

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

@ -55,7 +55,7 @@ export function ActivityGraph() {
"px-3 py-1 text-xs font-medium rounded-md transition-all", "px-3 py-1 text-xs font-medium rounded-md transition-all",
period === 7 period === 7
? "bg-primary/20 text-primary shadow-sm" ? "bg-primary/20 text-primary shadow-sm"
: "text-muted-foreground hover:text-white" : "text-muted-foreground hover:text-foreground"
)} )}
> >
7J 7J
@ -66,7 +66,7 @@ export function ActivityGraph() {
"px-3 py-1 text-xs font-medium rounded-md transition-all", "px-3 py-1 text-xs font-medium rounded-md transition-all",
period === 30 period === 30
? "bg-primary/20 text-primary shadow-sm" ? "bg-primary/20 text-primary shadow-sm"
: "text-muted-foreground hover:text-white" : "text-muted-foreground hover:text-foreground"
)} )}
> >
30J 30J
@ -97,7 +97,7 @@ export function ActivityGraph() {
{/* Barre */} {/* Barre */}
<div <div
className={cn( className={cn(
"w-full rounded-t-sm transition-all duration-[var(--duration-normal)] relative z-10", "w-full rounded-t-sm transition-all duration-[var(--sumi-duration-normal)] relative z-10",
isHovered ? "bg-primary opacity-100" : "bg-primary/30 opacity-70", isHovered ? "bg-primary opacity-100" : "bg-primary/30 opacity-70",
// Animation d'entrée // Animation d'entrée
"animate-slideUp" "animate-slideUp"
@ -121,7 +121,7 @@ export function ActivityGraph() {
)} )}
> >
<div className="bg-card border border-border/50 px-3 py-2 rounded-lg shadow-xl whitespace-nowrap"> <div className="bg-card 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 font-bold text-foreground mb-0.5">{point.value} écoutes</div>
<div className="text-xs text-muted-foreground font-mono">{point.label}</div> <div className="text-xs text-muted-foreground font-mono">{point.label}</div>
</div> </div>
{/* Triangle du tooltip */} {/* Triangle du tooltip */}

6
apps/web/src/components/dashboard/StatCard.stories.tsx
View file

@ -22,7 +22,7 @@ export const Default: Story = {
args: { args: {
label: 'Total Plays', label: 'Total Plays',
value: '1.2M', value: '1.2M',
icon: <Music className="w-5 h-5 text-white" />, icon: <Music className="w-5 h-5 text-foreground" />,
trend: '+12.5', trend: '+12.5',
color: 'cyan', color: 'cyan',
sparklineData: [40, 30, 45, 50, 60, 75, 80], sparklineData: [40, 30, 45, 50, 60, 75, 80],
@ -33,7 +33,7 @@ export const NegativeTrend: Story = {
args: { args: {
label: 'Revenue', label: 'Revenue',
value: '$432.50', value: '$432.50',
icon: <DollarSign className="w-5 h-5 text-white" />, icon: <DollarSign className="w-5 h-5 text-foreground" />,
trend: '-5.2', trend: '-5.2',
color: 'red', color: 'red',
sparklineData: [80, 75, 70, 65, 60, 55, 50], sparklineData: [80, 75, 70, 65, 60, 55, 50],
@ -44,7 +44,7 @@ export const NoTrend: Story = {
args: { args: {
label: 'Followers', label: 'Followers',
value: '5,432', value: '5,432',
icon: <Users className="w-5 h-5 text-white" />, icon: <Users className="w-5 h-5 text-foreground" />,
color: 'magenta', color: 'magenta',
sparklineData: [10, 20, 15, 25, 30, 40, 50], sparklineData: [10, 20, 15, 25, 30, 40, 50],
}, },

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

@ -20,7 +20,7 @@ export const StatCard: React.FC<StatCardProps> = ({
color = 'cyan', color = 'cyan',
sparklineData, sparklineData,
}) => { }) => {
/* Semantic tokens (audit P3: unify kodo-* → primary/muted/success/warning/destructive) */ /* Semantic tokens (audit P3: now uses primary/muted/success/warning/destructive) */
const colorMap = { const colorMap = {
cyan: 'text-primary', cyan: 'text-primary',
magenta: 'text-secondary', magenta: 'text-secondary',

2
apps/web/src/components/demo/DesignSystemDemo.tsx
View file

@ -3,7 +3,7 @@ import React from 'react';
export const DesignSystemDemo: React.FC = () => { export const DesignSystemDemo: React.FC = () => {
return ( return (
<div className="p-8 text-white"> <div className="p-8 text-foreground">
<h1 className="text-2xl font-bold mb-4">Design System Demo</h1> <h1 className="text-2xl font-bold mb-4">Design System Demo</h1>
<p>Component under construction.</p> <p>Component under construction.</p>
</div> </div>

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

@ -48,13 +48,13 @@ export const APIPlaygroundView: React.FC = () => {
return ( return (
<div className="space-y-6 animate-fadeIn pb-20"> <div className="space-y-6 animate-fadeIn pb-20">
<h2 className="text-2xl font-bold text-white mb-6">API PLAYGROUND</h2> <h2 className="text-2xl font-bold text-foreground mb-6">API PLAYGROUND</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Request Builder */} {/* Request Builder */}
<div className="space-y-4"> <div className="space-y-4">
<Card variant="default"> <Card variant="default">
<h3 className="font-bold text-white mb-4">Request</h3> <h3 className="font-bold text-foreground mb-4">Request</h3>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
@ -62,7 +62,7 @@ export const APIPlaygroundView: React.FC = () => {
Endpoint Endpoint
</label> </label>
<select <select
className="w-full bg-card border border-border rounded p-4 text-white focus:border-border outline-none font-mono text-sm" className="w-full bg-card border border-border rounded p-4 text-foreground focus:border-border outline-none font-mono text-sm"
value={selectedEndpoint.path} value={selectedEndpoint.path}
onChange={(e) => { onChange={(e) => {
const ep = ENDPOINTS.find((p) => p.path === e.target.value); const ep = ENDPOINTS.find((p) => p.path === e.target.value);
@ -85,7 +85,7 @@ export const APIPlaygroundView: React.FC = () => {
Body (JSON) Body (JSON)
</label> </label>
<textarea <textarea
className="w-full bg-card border border-border rounded p-4 text-white focus:border-border outline-none font-mono text-xs h-48 resize-none" className="w-full bg-card border border-border rounded p-4 text-foreground focus:border-border outline-none font-mono text-xs h-48 resize-none"
value={params} value={params}
onChange={(e) => setParams(e.target.value)} onChange={(e) => setParams(e.target.value)}
/> />
@ -116,7 +116,7 @@ export const APIPlaygroundView: React.FC = () => {
<div className="space-y-4 h-full"> <div className="space-y-4 h-full">
<Card variant="glass" className="h-full flex flex-col"> <Card variant="glass" className="h-full flex flex-col">
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center mb-4">
<h3 className="font-bold text-white">Response</h3> <h3 className="font-bold text-foreground">Response</h3>
{response && ( {response && (
<div className="flex gap-2"> <div className="flex gap-2">
<span className="text-xs font-bold text-success bg-success/10 px-2 py-1 rounded"> <span className="text-xs font-bold text-success bg-success/10 px-2 py-1 rounded">
@ -136,7 +136,7 @@ export const APIPlaygroundView: React.FC = () => {
{response} {response}
</pre> </pre>
<button <button
className="absolute top-2 right-2 p-2 bg-muted rounded text-muted-foreground hover:text-white opacity-0 group-hover:opacity-100 transition-opacity" className="absolute top-2 right-2 p-2 bg-muted rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity"
onClick={() => { onClick={() => {
navigator.clipboard.writeText(response); navigator.clipboard.writeText(response);
addToast('Copied JSON'); addToast('Copied JSON');

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

@ -149,7 +149,7 @@ export function SwaggerUIDoc({ specUrl, spec, useIframe = false }: SwaggerUIProp
return ( return (
<div className="flex flex-col items-center justify-center p-12 min-h-layout-page"> <div className="flex flex-col items-center justify-center p-12 min-h-layout-page">
<AlertCircle className="w-16 h-16 text-destructive mb-4" /> <AlertCircle className="w-16 h-16 text-destructive mb-4" />
<h3 className="text-xl font-bold text-white mb-2"> <h3 className="text-xl font-bold text-foreground mb-2">
Failed to Load API Documentation Failed to Load API Documentation
</h3> </h3>
<p className="text-sm text-muted-foreground mb-4 text-center max-w-md"> <p className="text-sm text-muted-foreground mb-4 text-center max-w-md">

8
apps/web/src/components/developer/WebhooksView.tsx
View file

@ -60,7 +60,7 @@ export const WebhooksView: React.FC = () => {
<div className="space-y-6 pb-20 container mx-auto px-4 py-8 max-w-5xl"> <div className="space-y-6 pb-20 container mx-auto px-4 py-8 max-w-5xl">
<div className="flex items-end justify-between"> <div className="flex items-end justify-between">
<div> <div>
<h2 className="text-3xl font-heading font-bold text-white mb-1">Webhooks</h2> <h2 className="text-3xl font-heading font-bold text-foreground mb-1">Webhooks</h2>
<p className="text-muted-foreground font-mono text-xs flex items-center gap-2"> <p className="text-muted-foreground font-mono text-xs flex items-center gap-2">
<Terminal className="w-3 h-3" /> EVENT SUBSCRIPTION PROTOCOL <Terminal className="w-3 h-3" /> EVENT SUBSCRIPTION PROTOCOL
</p> </p>
@ -69,7 +69,7 @@ export const WebhooksView: React.FC = () => {
<Card variant="glass" className="p-6 border-primary/20 bg-black/40 relative overflow-hidden group"> <Card variant="glass" className="p-6 border-primary/20 bg-black/40 relative overflow-hidden group">
<div className="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent opacity-50 group-hover:opacity-100 transition-opacity" /> <div className="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent opacity-50 group-hover:opacity-100 transition-opacity" />
<h3 className="font-bold text-white mb-4 flex items-center gap-2 text-sm uppercase tracking-widest"> <h3 className="font-bold text-foreground mb-4 flex items-center gap-2 text-sm uppercase tracking-widest">
<Plus className="w-4 h-4 text-primary" /> Register Endpoint <Plus className="w-4 h-4 text-primary" /> Register Endpoint
</h3> </h3>
<div className="flex gap-4"> <div className="flex gap-4">
@ -109,13 +109,13 @@ export const WebhooksView: React.FC = () => {
<div className={cn("text-xs font-bold px-2 py-0.5 rounded border uppercase tracking-wider", hook.status === 'active' ? 'border-success/30 text-success bg-success/10' : 'border-destructive/30 text-destructive bg-destructive/10')}> <div className={cn("text-xs font-bold px-2 py-0.5 rounded border uppercase tracking-wider", hook.status === 'active' ? 'border-success/30 text-success bg-success/10' : 'border-destructive/30 text-destructive bg-destructive/10')}>
{hook.status} {hook.status}
</div> </div>
<span className="font-mono text-white text-sm break-all">{hook.url}</span> <span className="font-mono text-foreground text-sm break-all">{hook.url}</span>
</div> </div>
<div className="flex flex-wrap gap-4 text-xs text-muted-foreground items-center"> <div className="flex flex-wrap gap-4 text-xs text-muted-foreground items-center">
<div className="flex gap-2"> <div className="flex gap-2">
<span className="text-primary/70">events:</span> <span className="text-primary/70">events:</span>
{hook.events.map(e => <span key={e} className="text-white bg-white/5 px-1 rounded">{e}</span>)} {hook.events.map(e => <span key={e} className="text-foreground bg-white/5 px-1 rounded">{e}</span>)}
</div> </div>
<div className="w-1 h-1 rounded-full bg-white/20" /> <div className="w-1 h-1 rounded-full bg-white/20" />
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">

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

@ -156,7 +156,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
className={cn( className={cn(
"flex items-center justify-between p-4 rounded-xl border cursor-pointer transition-all duration-[var(--duration-fast)] group relative overflow-hidden", "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) selectedScopes.includes(scope.id)
? "bg-primary/10 border-primary/50 shadow-card-glow-cyan" ? "bg-primary/10 border-primary/50"
: "bg-background/30 border-border/50 hover:border-border hover:bg-foreground/5" : "bg-background/30 border-border/50 hover:border-border hover:bg-foreground/5"
)} )}
> >
@ -196,7 +196,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
<div className="text-center space-y-8 py-4"> <div className="text-center space-y-8 py-4">
<div className="relative w-20 h-20 mx-auto"> <div className="relative w-20 h-20 mx-auto">
<div className="absolute inset-0 bg-success/20 rounded-full animate-ping opacity-50"></div> <div className="absolute inset-0 bg-success/20 rounded-full animate-ping opacity-50"></div>
<div className="relative w-full h-full bg-gradient-to-br from-success/20 to-primary/20 rounded-full flex items-center justify-center border border-success/30 shadow-card-glow-cyan"> <div className="relative w-full h-full bg-gradient-to-br from-success/20 to-primary/20 rounded-full flex items-center justify-center border border-success/30">
<Check className="w-10 h-10 text-success drop-shadow-lg" /> <Check className="w-10 h-10 text-success drop-shadow-lg" />
</div> </div>
</div> </div>
@ -228,7 +228,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={(e) => copyKey(e)} onClick={(e) => copyKey(e)}
className="h-10 w-10 text-muted-foreground hover:text-foreground hover:bg-foreground/10 rounded-lg hover:scale-105 transition-all flex-none" className="h-10 w-10 text-muted-foreground hover:text-foreground hover:bg-foreground/10 rounded-lg transition-all flex-none"
title="Copy to clipboard" title="Copy to clipboard"
> >
{copied ? ( {copied ? (
@ -263,7 +263,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
}} }}
disabled={isGenerating || !name.trim() || selectedScopes.length === 0} disabled={isGenerating || !name.trim() || selectedScopes.length === 0}
type="button" type="button"
className="bg-primary hover:bg-primary/80 text-black font-semibold shadow-button-primary-glow hover:shadow-button-primary-glow-hover transition-all duration-[var(--duration-normal)]" className="bg-primary hover:bg-primary/80 text-black font-semibold shadow-sm transition-all duration-[var(--sumi-duration-normal)]"
> >
{isGenerating ? ( {isGenerating ? (
<> <>
@ -278,7 +278,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
) : ( ) : (
<Button <Button
onClick={onClose} onClick={onClose}
className="bg-primary hover:bg-primary/80 text-black font-semibold min-w-24 shadow-button-primary-glow hover:shadow-button-primary-glow-hover transition-all duration-[var(--duration-normal)]" className="bg-primary hover:bg-primary/80 text-black font-semibold min-w-24 shadow-sm transition-all duration-[var(--sumi-duration-normal)]"
> >
Done Done
</Button> </Button>

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

@ -27,14 +27,14 @@ const CourseCardComponent: React.FC<CourseCardProps> = ({
return ( return (
<Card <Card
variant="default" variant="default"
className="group p-0 overflow-hidden cursor-pointer hover:border-border/80 hover:-translate-y-1 hover:shadow-xl transition-all duration-[var(--duration-normal)] flex flex-col h-full" className="group p-0 overflow-hidden cursor-pointer hover:border-border/80 hover:shadow-xl transition-all duration-[var(--sumi-duration-normal)] flex flex-col h-full"
onClick={() => onClick(course)} onClick={() => onClick(course)}
> >
{/* Cover */} {/* Cover */}
<div className="relative aspect-video bg-card overflow-hidden"> <div className="relative aspect-video bg-card overflow-hidden">
<OptimizedImage <OptimizedImage
src={course.thumbnailUrl} src={course.thumbnailUrl}
className="w-full h-full object-cover opacity-90 group-hover:opacity-100 group-hover:scale-105 transition-all duration-[var(--duration-normal)]" className="w-full h-full object-cover opacity-90 group-hover:opacity-100 group-hover:scale-105 transition-all duration-[var(--sumi-duration-normal)]"
alt={course.title} alt={course.title}
/> />
<div className="absolute inset-0 bg-background/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-sm"> <div className="absolute inset-0 bg-background/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-sm">

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

@ -93,7 +93,7 @@ export const MyCoursesView: React.FC<MyCoursesViewProps> = ({ onContinue }) => {
className="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform" className="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform"
/> />
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<PlayCircle className="w-12 h-12 text-white fill-current drop-shadow-lg" /> <PlayCircle className="w-12 h-12 text-foreground fill-current drop-shadow-lg" />
</div> </div>
</div> </div>
<div className="flex-1 text-center md:text-left"> <div className="flex-1 text-center md:text-left">

2
apps/web/src/components/education/course-detail-view/CourseDetailViewHeader.tsx
View file

@ -21,7 +21,7 @@ export function CourseDetailViewHeader({
<Button <Button
variant="ghost" variant="ghost"
onClick={onBack} onClick={onBack}
className="pl-0 text-muted-foreground hover:text-foreground transition-colors duration-[var(--duration-normal)]" className="pl-0 text-muted-foreground hover:text-foreground transition-colors duration-[var(--sumi-duration-normal)]"
> >
← Back to Courses ← Back to Courses
</Button> </Button>

2
apps/web/src/components/education/course-detail-view/CourseDetailViewSidebar.tsx
View file

@ -43,7 +43,7 @@ export function CourseDetailViewSidebar({
<PlayCircle className="w-8 h-8 text-black fill-current" /> <PlayCircle className="w-8 h-8 text-black fill-current" />
</div> </div>
</div> </div>
<div className="absolute bottom-4 text-center w-full text-white font-bold text-sm drop-shadow-md"> <div className="absolute bottom-4 text-center w-full text-foreground font-bold text-sm drop-shadow-md">
Preview Course Preview Course
</div> </div>
</div> </div>

6
apps/web/src/components/education/course-detail-view/CourseDetailViewTabs.tsx
View file

@ -47,7 +47,7 @@ export function CourseDetailViewTabs({
key={tab} key={tab}
type="button" type="button"
onClick={() => onTabChange(tab)} onClick={() => onTabChange(tab)}
className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--duration-normal)] ${activeTab === tab ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'}`} className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--sumi-duration-normal)] ${activeTab === tab ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'}`}
> >
{tab} {tab}
</button> </button>
@ -111,7 +111,7 @@ export function CourseDetailViewTabs({
className="p-4 flex justify-between items-center cursor-pointer hover:bg-white/5 transition-colors w-full text-left" className="p-4 flex justify-between items-center cursor-pointer hover:bg-white/5 transition-colors w-full text-left"
onClick={() => onToggleModule(module.id)} onClick={() => onToggleModule(module.id)}
> >
<h4 className="font-bold text-white flex items-center gap-4"> <h4 className="font-bold text-foreground flex items-center gap-4">
{expandedModule === module.id || expandedModule === 'all' ? ( {expandedModule === module.id || expandedModule === 'all' ? (
<ChevronUp className="w-4 h-4" /> <ChevronUp className="w-4 h-4" />
) : ( ) : (
@ -129,7 +129,7 @@ export function CourseDetailViewTabs({
{module.lessons.map((lesson) => ( {module.lessons.map((lesson) => (
<div <div
key={lesson.id} key={lesson.id}
className="p-4 pl-8 flex justify-between items-center hover:bg-muted/50 border-b border-border last:border-0 transition-colors duration-[var(--duration-normal)]" className="p-4 pl-8 flex justify-between items-center hover:bg-muted/50 border-b border-border last:border-0 transition-colors duration-[var(--sumi-duration-normal)]"
> >
<div className="flex items-center gap-4 text-sm text-foreground"> <div className="flex items-center gap-4 text-sm text-foreground">
{lesson.type === 'video' ? ( {lesson.type === 'video' ? (

2
apps/web/src/components/education/course-learning-view/CourseLearningViewPlayer.tsx
View file

@ -34,7 +34,7 @@ export function CourseLearningViewPlayer({
return ( return (
<div className="bg-black aspect-video w-full flex items-center justify-center relative"> <div className="bg-black aspect-video w-full flex items-center justify-center relative">
<div className="text-center"> <div className="text-center">
<PlayCircle className="w-16 h-16 text-white opacity-50 mx-auto mb-4" /> <PlayCircle className="w-16 h-16 text-foreground opacity-50 mx-auto mb-4" />
<p className="text-muted-foreground">Video Player Placeholder</p> <p className="text-muted-foreground">Video Player Placeholder</p>
<p className="text-xs text-muted-foreground mt-2">{lesson.title}</p> <p className="text-xs text-muted-foreground mt-2">{lesson.title}</p>
</div> </div>

2
apps/web/src/components/education/course-learning-view/CourseLearningViewSidebar.tsx
View file

@ -37,7 +37,7 @@ export function CourseLearningViewSidebar({
key={lesson.id} key={lesson.id}
type="button" type="button"
onClick={() => onSelectLesson(lesson.id)} onClick={() => onSelectLesson(lesson.id)}
className={`flex items-start gap-4 p-4 cursor-pointer border-l-2 transition-all duration-[var(--duration-normal)] hover:bg-muted/50 w-full text-left ${isActive ? 'bg-primary/10 border-primary' : 'border-transparent'}`} className={`flex items-start gap-4 p-4 cursor-pointer border-l-2 transition-all duration-[var(--sumi-duration-normal)] hover:bg-muted/50 w-full text-left ${isActive ? 'bg-primary/10 border-primary' : 'border-transparent'}`}
> >
<div className="mt-0.5"> <div className="mt-0.5">
{isCompleted ? ( {isCompleted ? (

4
apps/web/src/components/education/course-learning-view/CourseLearningViewTabs.tsx
View file

@ -59,7 +59,7 @@ export function CourseLearningViewTabs({
type="button" type="button"
onClick={() => onTabChange(tab)} onClick={() => onTabChange(tab)}
className={cn( className={cn(
'pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--duration-normal)]', 'pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--sumi-duration-normal)]',
activeTab === tab activeTab === tab
? 'border-primary text-foreground' ? 'border-primary text-foreground'
: 'border-transparent text-muted-foreground hover:text-foreground', : 'border-transparent text-muted-foreground hover:text-foreground',
@ -86,7 +86,7 @@ export function CourseLearningViewTabs({
{activeTab === 'notes' && ( {activeTab === 'notes' && (
<div> <div>
<textarea <textarea
className="w-full h-40 bg-muted border border-border rounded-xl p-4 text-foreground resize-none focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]" className="w-full h-40 bg-muted border border-border rounded-xl p-4 text-foreground resize-none focus:border-primary outline-none transition-colors duration-[var(--sumi-duration-normal)]"
placeholder="Type your personal notes here..." placeholder="Type your personal notes here..."
/> />
<Button variant="secondary" size="sm" className="mt-2"> <Button variant="secondary" size="sm" className="mt-2">

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

@ -73,7 +73,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
)} )}
</div> </div>
<h2 className="text-2xl font-bold text-white mb-2"> <h2 className="text-2xl font-bold text-foreground mb-2">
{passed ? 'Assessment Passed!' : 'Try Again'} {passed ? 'Assessment Passed!' : 'Try Again'}
</h2> </h2>
<p className="text-muted-foreground mb-6"> <p className="text-muted-foreground mb-6">
@ -107,18 +107,18 @@ export const QuizModal: React.FC<QuizModalProps> = ({
<div className="relative w-full max-w-2xl bg-muted border border-border 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-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-sm">
{/* Header */} {/* Header */}
<div className="p-4 border-b border-border bg-card flex justify-between items-center"> <div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2"> <h3 className="font-bold text-foreground flex items-center gap-2">
<HelpCircle className="w-5 h-5 text-muted-foreground" /> {quiz.title} <HelpCircle className="w-5 h-5 text-muted-foreground" /> {quiz.title}
</h3> </h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>
{/* Progress */} {/* Progress */}
<div className="h-1 bg-muted w-full"> <div className="h-1 bg-muted w-full">
<div <div
className="h-full bg-primary transition-all duration-[var(--duration-normal)]" className="h-full bg-primary transition-all duration-[var(--sumi-duration-normal)]"
style={{ style={{
width: `${((currentQuestionIndex + 1) / quiz.questions.length) * 100}%`, width: `${((currentQuestionIndex + 1) / quiz.questions.length) * 100}%`,
}} }}
@ -130,7 +130,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
<span className="text-xs font-bold text-muted-foreground uppercase mb-2 block"> <span className="text-xs font-bold text-muted-foreground uppercase mb-2 block">
Question {currentQuestionIndex + 1} of {quiz.questions.length} Question {currentQuestionIndex + 1} of {quiz.questions.length}
</span> </span>
<h2 className="text-xl font-bold text-white mb-6 leading-relaxed"> <h2 className="text-xl font-bold text-foreground mb-6 leading-relaxed">
{currentQuestion.question} {currentQuestion.question}
</h2> </h2>
@ -141,7 +141,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
onClick={() => handleAnswerSelect(idx)} onClick={() => handleAnswerSelect(idx)}
className={`w-full text-left p-4 rounded-lg border transition-all ${ className={`w-full text-left p-4 rounded-lg border transition-all ${
selectedAnswers[currentQuestionIndex] === idx selectedAnswers[currentQuestionIndex] === idx
? 'bg-primary/10 border-primary text-white' ? 'bg-primary/10 border-primary text-foreground'
: 'bg-card border-border text-foreground hover:bg-white/5 hover:border-border' : 'bg-card border-border text-foreground hover:bg-white/5 hover:border-border'
}`} }`}
> >

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

@ -70,7 +70,7 @@ export function Progress({
strokeDashoffset={strokeDashoffset} strokeDashoffset={strokeDashoffset}
strokeLinecap="round" strokeLinecap="round"
className={cn( className={cn(
'transition-all duration-[var(--duration-normal)] ease-in-out', 'transition-all duration-[var(--sumi-duration-normal)] ease-in-out',
!color && 'text-primary', !color && 'text-primary',
)} )}
style={color ? { stroke: color } : undefined} style={color ? { stroke: color } : undefined}
@ -109,7 +109,7 @@ export function Progress({
> >
<div <div
className={cn( className={cn(
'h-full rounded-full transition-all duration-[var(--duration-normal)] ease-in-out', 'h-full rounded-full transition-all duration-[var(--sumi-duration-normal)] ease-in-out',
!color && 'bg-primary', !color && 'bg-primary',
)} )}
style={{ style={{

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

@ -73,7 +73,7 @@ export function ToastComponent({ toast, onDismiss }: ToastProps) {
<Card <Card
variant="glass" variant="glass"
className={cn( className={cn(
'relative flex min-w-80 max-w-sm items-start gap-4 p-4 shadow-modal transition-all duration-[var(--duration-normal)] transform', 'relative flex min-w-80 max-w-sm items-start gap-4 p-4 shadow-modal transition-all duration-[var(--sumi-duration-normal)] transform',
variantClass, variantClass,
isVisible && !isLeaving isVisible && !isLeaving
? 'opacity-100 translate-x-0 translate-y-0 scale-100' ? 'opacity-100 translate-x-0 translate-y-0 scale-100'

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

@ -67,7 +67,7 @@ export function PasswordStrengthIndicator({
<div className="flex-1 bg-muted/30 dark:bg-muted rounded-full h-2 overflow-hidden"> <div className="flex-1 bg-muted/30 dark:bg-muted rounded-full h-2 overflow-hidden">
<div <div
className={cn( className={cn(
'h-2 rounded-full transition-all duration-[var(--duration-normal)]', 'h-2 rounded-full transition-all duration-[var(--sumi-duration-normal)]',
currentStrengthColor, currentStrengthColor,
)} )}
style={{ width: `${(strength.score / 5) * 100}%` }} style={{ width: `${(strength.score / 5) * 100}%` }}

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

@ -21,7 +21,7 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
return ( return (
<Card <Card
variant={isUnlocked ? 'elevated' : 'default'} variant={isUnlocked ? 'elevated' : 'default'}
className={`relative overflow-hidden transition-all group ${isUnlocked ? 'border-warning/30 bg-warning/5 hover:-translate-y-1 hover:shadow-xl' : 'opacity-80 grayscale hover:grayscale-0 hover:opacity-100'}`} className={`relative overflow-hidden transition-all group ${isUnlocked ? 'border-warning/30 bg-warning/5 hover:shadow-xl' : 'opacity-80 grayscale hover:grayscale-0 hover:opacity-100'}`}
> >
{/* Shine sweep animation for unlocked achievements */} {/* Shine sweep animation for unlocked achievements */}
{isUnlocked && ( {isUnlocked && (
@ -62,7 +62,7 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
{/* Progress */} {/* Progress */}
<div className="w-full bg-card h-1.5 rounded-full overflow-hidden"> <div className="w-full bg-card h-1.5 rounded-full overflow-hidden">
<div <div
className={`h-full transition-all duration-[var(--duration-slow)] ${isUnlocked ? 'bg-warning' : 'bg-muted'}`} className={`h-full transition-all duration-[var(--sumi-duration-slow)] ${isUnlocked ? 'bg-warning' : 'bg-muted'}`}
style={{ width: `${percentage}%` }} style={{ width: `${percentage}%` }}
></div> ></div>
</div> </div>

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

@ -94,7 +94,7 @@ export const LeaderboardView: React.FC = () => {
return ( return (
<div <div
key={entry.userId} key={entry.userId}
className={`flex flex-col items-center transition-transform hover:-translate-y-1 ${i === 1 ? '-mt-12 order-2' : i === 0 ? 'order-1' : 'order-3'}`} className={`flex flex-col items-center transition-transform ${i === 1 ? '-mt-12 order-2' : i === 0 ? 'order-1' : 'order-3'}`}
> >
<div className="relative mb-4"> <div className="relative mb-4">
<div <div

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

@ -55,7 +55,7 @@ export const XPBar: React.FC<XPBarProps> = ({
{/* Progress Fill */} {/* Progress Fill */}
<div <div
className="h-full bg-gradient-to-r from-sumi-gold/80 to-warning transition-all duration-[var(--duration-slow)] shadow-gold-glow relative" className="h-full bg-gradient-to-r from-sumi-gold/80 to-warning transition-all duration-[var(--sumi-duration-slow)] shadow-gold-glow relative"
style={{ width: `${percentage}%` }} style={{ width: `${percentage}%` }}
> >
{/* Shimmer Effect */} {/* Shimmer Effect */}

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

@ -37,7 +37,7 @@ export const AddEquipmentView: React.FC = () => {
return ( return (
<div className="animate-fadeIn max-w-4xl mx-auto pb-20"> <div className="animate-fadeIn max-w-4xl mx-auto pb-20">
<div className="flex justify-between items-center mb-8"> <div className="flex justify-between items-center mb-8">
<h2 className="text-2xl font-heading font-bold text-white"> <h2 className="text-2xl font-heading font-bold text-foreground">
REGISTER EQUIPMENT REGISTER EQUIPMENT
</h2> </h2>
<Button <Button
@ -53,10 +53,10 @@ export const AddEquipmentView: React.FC = () => {
{/* Left: Media */} {/* Left: Media */}
<div className="space-y-6"> <div className="space-y-6">
<Card variant="default"> <Card variant="default">
<h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2"> <h3 className="font-bold text-foreground mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
<Camera className="w-4 h-4 text-muted-foreground" /> Photos <Camera className="w-4 h-4 text-muted-foreground" /> Photos
</h3> </h3>
<div className="aspect-square bg-card 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"> <div className="aspect-square bg-card border-2 border-dashed border-border rounded-xl flex flex-col items-center justify-center text-muted-foreground hover:text-foreground 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" /> <Camera className="w-8 h-8 mb-2 transition-opacity group-hover:opacity-80" />
<span className="text-xs font-bold uppercase">Upload Photos</span> <span className="text-xs font-bold uppercase">Upload Photos</span>
</div> </div>
@ -71,7 +71,7 @@ export const AddEquipmentView: React.FC = () => {
</Card> </Card>
<Card variant="default"> <Card variant="default">
<h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2"> <h3 className="font-bold text-foreground mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
<FileText className="w-4 h-4 text-muted-foreground" /> Documents <FileText className="w-4 h-4 text-muted-foreground" /> Documents
</h3> </h3>
<FileUpload /> <FileUpload />
@ -84,7 +84,7 @@ export const AddEquipmentView: React.FC = () => {
{/* Right: Form */} {/* Right: Form */}
<div className="lg:col-span-2 space-y-6"> <div className="lg:col-span-2 space-y-6">
<Card variant="default"> <Card variant="default">
<h3 className="font-bold text-white mb-6 border-b border-border pb-2"> <h3 className="font-bold text-foreground mb-6 border-b border-border pb-2">
Basic Information Basic Information
</h3> </h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
@ -93,7 +93,7 @@ export const AddEquipmentView: React.FC = () => {
Category Category
</label> </label>
<select <select
className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-border outline-none" className="w-full bg-muted border border-border rounded-lg p-4 text-foreground focus:border-border outline-none"
value={formData.category} value={formData.category}
onChange={(e) => handleChange('category', e.target.value)} onChange={(e) => handleChange('category', e.target.value)}
> >
@ -135,7 +135,7 @@ export const AddEquipmentView: React.FC = () => {
</Card> </Card>
<Card variant="default"> <Card variant="default">
<h3 className="font-bold text-white mb-6 border-b border-border pb-2"> <h3 className="font-bold text-foreground mb-6 border-b border-border pb-2">
Purchase & Warranty Purchase & Warranty
</h3> </h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> <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>
<Card variant="default"> <Card variant="default">
<h3 className="font-bold text-white mb-4 border-b border-border pb-2"> <h3 className="font-bold text-foreground mb-4 border-b border-border pb-2">
Notes Notes
</h3> </h3>
<textarea <textarea
className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-border outline-none min-h-25" className="w-full bg-muted border border-border rounded-lg p-4 text-foreground focus:border-border outline-none min-h-25"
placeholder="Condition notes, modifications, etc..." placeholder="Condition notes, modifications, etc..."
value={formData.notes} value={formData.notes}
onChange={(e) => handleChange('notes', e.target.value)} onChange={(e) => handleChange('notes', e.target.value)}

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

@ -45,7 +45,7 @@ export const EquipmentCard: React.FC<EquipmentCardProps> = ({
<Badge label={item.category} variant="terminal" className="mb-2" /> <Badge label={item.category} variant="terminal" className="mb-2" />
</div> </div>
<h3 className="font-bold text-white text-base truncate mb-1"> <h3 className="font-bold text-foreground text-base truncate mb-1">
{item.name} {item.name}
</h3> </h3>
<p className="text-warning text-xs font-mono uppercase mb-4"> <p className="text-warning text-xs font-mono uppercase mb-4">
@ -56,7 +56,7 @@ export const EquipmentCard: React.FC<EquipmentCardProps> = ({
<div className="flex items-center gap-1 text-muted-foreground"> <div className="flex items-center gap-1 text-muted-foreground">
<Tag className="w-3 h-3" /> {item.condition} <Tag className="w-3 h-3" /> {item.condition}
</div> </div>
<div className="flex items-center gap-1 font-mono text-white font-bold"> <div className="flex items-center gap-1 font-mono text-foreground font-bold">
<DollarSign className="w-3 h-3 text-muted-foreground" />{' '} <DollarSign className="w-3 h-3 text-muted-foreground" />{' '}
{item.purchasePrice} {item.purchasePrice}
</div> </div>

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

@ -53,7 +53,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
{/* Header */} {/* Header */}
<div className="flex flex-col md:flex-row justify-between items-end border-b border-border/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> <div>
<h2 className="text-2xl font-heading font-bold text-white mb-2"> <h2 className="text-2xl font-heading font-bold text-foreground mb-2">
GEAR INVENTORY GEAR INVENTORY
</h2> </h2>
<p className="text-muted-foreground font-mono text-sm"> <p className="text-muted-foreground font-mono text-sm">

4
apps/web/src/components/inventory/equipment-detail-view/EquipmentDetailViewGallery.tsx
View file

@ -25,7 +25,7 @@ export function EquipmentDetailViewGallery({
<button <button
type="button" type="button"
onClick={onPrev} onClick={onPrev}
className="absolute left-4 top-1/2 -translate-y-1/2 p-2 bg-black/50 hover:bg-black/80 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity" className="absolute left-4 top-1/2 -translate-y-1/2 p-2 bg-black/50 hover:bg-black/80 text-foreground rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
aria-label="Image précédente" aria-label="Image précédente"
> >
<ChevronLeft className="w-6 h-6" /> <ChevronLeft className="w-6 h-6" />
@ -33,7 +33,7 @@ export function EquipmentDetailViewGallery({
<button <button
type="button" type="button"
onClick={onNext} onClick={onNext}
className="absolute right-4 top-1/2 -translate-y-1/2 p-2 bg-black/50 hover:bg-black/80 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity" className="absolute right-4 top-1/2 -translate-y-1/2 p-2 bg-black/50 hover:bg-black/80 text-foreground rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
aria-label="Image suivante" aria-label="Image suivante"
> >
<ChevronRight className="w-6 h-6" /> <ChevronRight className="w-6 h-6" />

10
apps/web/src/components/layout/AudioPlayer.tsx
View file

@ -104,7 +104,7 @@ export const AudioPlayer: React.FC = () => {
className="w-12 h-12 rounded shadow-lg" className="w-12 h-12 rounded shadow-lg"
/> />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-sm font-bold text-white truncate"> <div className="text-sm font-bold text-foreground truncate">
{currentTrack.title} {currentTrack.title}
</div> </div>
<div className="text-xs text-muted-foreground truncate"> <div className="text-xs text-muted-foreground truncate">
@ -137,7 +137,7 @@ export const AudioPlayer: React.FC = () => {
onDragEnd={onDragEnd} onDragEnd={onDragEnd}
className={`flex items-center gap-4 p-2 rounded-lg group transition-colors border border-transparent ${draggedItemIndex === i ? 'bg-primary/10 border-primary/50' : 'hover:bg-white/5 hover:border-white/5'}`} className={`flex items-center gap-4 p-2 rounded-lg group transition-colors border border-transparent ${draggedItemIndex === i ? 'bg-primary/10 border-primary/50' : 'hover:bg-white/5 hover:border-white/5'}`}
> >
<div className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-white p-1"> <div className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground p-1">
<GripVertical className="w-4 h-4" /> <GripVertical className="w-4 h-4" />
</div> </div>
<div className="relative w-8 h-8 rounded overflow-hidden flex-shrink-0"> <div className="relative w-8 h-8 rounded overflow-hidden flex-shrink-0">
@ -150,7 +150,7 @@ export const AudioPlayer: React.FC = () => {
className="absolute inset-0 bg-black/50 hidden group-hover:flex items-center justify-center cursor-pointer" className="absolute inset-0 bg-black/50 hidden group-hover:flex items-center justify-center cursor-pointer"
onClick={() => playTrack(track)} onClick={() => playTrack(track)}
> >
<Play className="w-3 h-3 text-white fill-current" /> <Play className="w-3 h-3 text-foreground fill-current" />
</div> </div>
</div> </div>
<div className="flex-1 min-w-0 select-none"> <div className="flex-1 min-w-0 select-none">
@ -164,7 +164,7 @@ export const AudioPlayer: React.FC = () => {
<div className="flex items-center opacity-0 group-hover:opacity-100 transition-opacity gap-1"> <div className="flex items-center opacity-0 group-hover:opacity-100 transition-opacity gap-1">
<button <button
className="p-1.5 hover:text-white" className="p-1.5 hover:text-foreground"
title="Play Next" title="Play Next"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -220,7 +220,7 @@ export const AudioPlayer: React.FC = () => {
</div> </div>
</div> </div>
<button <button
className="p-1.5 text-muted-foreground hover:text-white opacity-0 group-hover:opacity-100 transition-opacity" className="p-1.5 text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity"
onClick={() => { onClick={() => {
addToQueue(track); addToQueue(track);
addToast('Added back to Queue'); addToast('Added back to Queue');

2
apps/web/src/components/layout/DashboardLayout.stories.tsx
View file

@ -8,7 +8,7 @@ import { UserProfilePage } from '@/features/profile/pages/UserProfilePage';
const placeholderContent = ( const placeholderContent = (
<div className="space-y-4"> <div className="space-y-4">
<h1 className="text-3xl font-bold text-white">Dashboard Content</h1> <h1 className="text-3xl font-bold text-foreground">Dashboard Content</h1>
<p className="text-gray-400">This is the main content area rendered within the layout.</p> <p className="text-gray-400">This is the main content area rendered within the layout.</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="h-32 bg-white/5 rounded-xl border border-white/10 p-4">Card 1</div> <div className="h-32 bg-white/5 rounded-xl border border-white/10 p-4">Card 1</div>

2
apps/web/src/components/layout/Header.stories.tsx
View file

@ -9,7 +9,7 @@ const meta = {
(Story) => ( (Story) => (
<div className="h-screen bg-background"> <div className="h-screen bg-background">
<Story /> <Story />
<div className="pt-24 px-8 text-white"> <div className="pt-24 px-8 text-foreground">
<h1>Page Content</h1> <h1>Page Content</h1>
</div> </div>
</div> </div>

4
apps/web/src/components/layout/Layout.tsx
View file

@ -31,12 +31,12 @@ export function Layout({ children }: LayoutProps) {
<Header /> <Header />
<div className="flex relative z-10 transition-all duration-[var(--duration-slow)]"> <div className="flex relative z-10 transition-all duration-[var(--sumi-duration-slow)]">
<Sidebar /> <Sidebar />
<main <main
className={cn( className={cn(
'flex-1 min-h-layout-main transition-all duration-[var(--duration-normal)] ease-[var(--ease-in-out)] pb-20 lg:pb-0', 'flex-1 min-h-layout-main transition-all duration-[var(--sumi-duration-normal)] ease-[var(--sumi-ease-in-out)] pb-20 lg:pb-0',
sidebarOpen ? 'lg:ml-main-expanded' : 'lg:ml-main-collapsed max-lg:ml-0', sidebarOpen ? 'lg:ml-main-expanded' : 'lg:ml-main-collapsed max-lg:ml-0',
)} )}
> >

2
apps/web/src/components/layout/Sidebar.stories.tsx
View file

@ -9,7 +9,7 @@ const meta = {
(Story) => ( (Story) => (
<div className="flex h-screen bg-background"> <div className="flex h-screen bg-background">
<Story /> <Story />
<div className="flex-1 p-8 text-white ml-20 lg:ml-72"> <div className="flex-1 p-8 text-foreground ml-20 lg:ml-72">
<h1>Main Content Area</h1> <h1>Main Content Area</h1>
<p>Resize the viewport to see responsive behavior.</p> <p>Resize the viewport to see responsive behavior.</p>
</div> </div>

10
apps/web/src/components/layout/Sidebar.tsx
View file

@ -154,7 +154,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
{idx > 0 && ( {idx > 0 && (
<div <div
className={cn( className={cn(
'h-px bg-border/50 mx-3 my-1.5 transition-opacity duration-[var(--duration-normal)]', 'h-px bg-border/50 mx-3 my-1.5 transition-opacity duration-[var(--sumi-duration-normal)]',
!sidebarOpen && 'mx-1' !sidebarOpen && 'mx-1'
)} )}
aria-hidden="true" aria-hidden="true"
@ -163,7 +163,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
<h3 <h3
className={cn( className={cn(
'text-xs font-medium text-muted-foreground mb-2 px-3 transition-all duration-[var(--duration-normal)] uppercase tracking-wider', 'text-xs font-medium text-muted-foreground mb-2 px-3 transition-all duration-[var(--sumi-duration-normal)] uppercase tracking-wider',
!sidebarOpen && 'opacity-0 h-0 overflow-hidden mb-0 px-0' !sidebarOpen && 'opacity-0 h-0 overflow-hidden mb-0 px-0'
)} )}
id={`sidebar-section-${group.section.replace(/\s+/g, '-').toLowerCase()}`} id={`sidebar-section-${group.section.replace(/\s+/g, '-').toLowerCase()}`}
@ -202,7 +202,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
<span <span
className={cn( className={cn(
'transition-all duration-[var(--duration-normal)] whitespace-nowrap truncate', 'transition-all duration-[var(--sumi-duration-normal)] whitespace-nowrap truncate',
sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden' sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden'
)} )}
> >
@ -256,7 +256,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
/> />
<span <span
className={cn( className={cn(
'truncate transition-all duration-[var(--duration-normal)]', 'truncate transition-all duration-[var(--sumi-duration-normal)]',
sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden' sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden'
)} )}
> >
@ -279,7 +279,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
<LogOut className="w-4 h-4 shrink-0 transition-transform duration-[var(--duration-fast)] group-hover:scale-110" /> <LogOut className="w-4 h-4 shrink-0 transition-transform duration-[var(--duration-fast)] group-hover:scale-110" />
<span <span
className={cn( className={cn(
'whitespace-nowrap transition-all duration-[var(--duration-normal)]', 'whitespace-nowrap transition-all duration-[var(--sumi-duration-normal)]',
sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden' sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden'
)} )}
> >

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

@ -54,7 +54,7 @@ export const AutoMetadataDetectionModal: React.FC<
</div> </div>
</div> </div>
<div> <div>
<h4 className="text-lg font-bold text-white animate-pulse"> <h4 className="text-lg font-bold text-foreground animate-pulse">
Analyzing Audio... Analyzing Audio...
</h4> </h4>
<p className="text-sm text-muted-foreground mt-2"> <p className="text-sm text-muted-foreground mt-2">
@ -71,7 +71,7 @@ export const AutoMetadataDetectionModal: React.FC<
<div className="text-xs text-muted-foreground uppercase font-bold mb-1"> <div className="text-xs text-muted-foreground uppercase font-bold mb-1">
Detected BPM Detected BPM
</div> </div>
<div className="text-2xl font-bold text-white"> <div className="text-2xl font-bold text-foreground">
{result?.bpm} {result?.bpm}
</div> </div>
</div> </div>
@ -87,7 +87,7 @@ export const AutoMetadataDetectionModal: React.FC<
<div className="text-xs text-muted-foreground uppercase font-bold mb-1"> <div className="text-xs text-muted-foreground uppercase font-bold mb-1">
Genre Genre
</div> </div>
<div className="text-lg font-medium text-white"> <div className="text-lg font-medium text-foreground">
{result?.genre} {result?.genre}
</div> </div>
</div> </div>

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

@ -41,14 +41,14 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
{/* Left: Controls */} {/* Left: Controls */}
<div className="w-full md:w-1/2 p-6 border-r border-border bg-card"> <div className="w-full md:w-1/2 p-6 border-r border-border bg-card">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h3 className="font-bold text-white flex items-center gap-2"> <h3 className="font-bold text-foreground flex items-center gap-2">
<Stamp className="w-4 h-4 text-destructive" /> Watermark <Stamp className="w-4 h-4 text-destructive" /> Watermark
</h3> </h3>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<label className="flex items-center justify-between cursor-pointer"> <label className="flex items-center justify-between cursor-pointer">
<span className="text-sm font-medium text-white"> <span className="text-sm font-medium text-foreground">
Enable Watermarking Enable Watermarking
</span> </span>
<div <div
@ -77,7 +77,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
<button <button
key={i} key={i}
onClick={() => setPosition(i)} onClick={() => setPosition(i)}
className={`h-10 rounded border text-xs uppercase font-bold transition-all ${position === i ? 'bg-destructive border-destructive text-white' : 'bg-background border-border text-muted-foreground hover:border-border'}`} className={`h-10 rounded border text-xs uppercase font-bold transition-all ${position === i ? 'bg-destructive border-destructive text-foreground' : 'bg-background border-border text-muted-foreground hover:border-border'}`}
> >
{/* Icon representation usually better, but text works for demo */} {/* Icon representation usually better, but text works for demo */}
<div <div
@ -124,7 +124,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
{/* Right: Preview */} {/* Right: Preview */}
<div className="w-full md:w-1/2 bg-black relative flex items-center justify-center overflow-hidden"> <div className="w-full md:w-1/2 bg-black relative flex items-center justify-center overflow-hidden">
<div className="absolute top-4 right-4 z-10 bg-black/50 px-2 py-1 rounded text-xs text-white font-mono flex items-center gap-2"> <div className="absolute top-4 right-4 z-10 bg-black/50 px-2 py-1 rounded text-xs text-foreground font-mono flex items-center gap-2">
<Eye className="w-3 h-3" /> PREVIEW <Eye className="w-3 h-3" /> PREVIEW
</div> </div>
@ -159,7 +159,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
}`} }`}
> >
<span <span
className="text-white font-bold text-xl uppercase whitespace-nowrap transform -rotate-12 border-4 border-white/50 px-4 py-1" className="text-foreground font-bold text-xl uppercase whitespace-nowrap transform -rotate-12 border-4 border-white/50 px-4 py-1"
style={{ opacity: opacity / 100 }} style={{ opacity: opacity / 100 }}
> >
{text} {text}

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

@ -77,16 +77,16 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
></div> ></div>
<div className="relative w-full max-w-md bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-xs"> <div className="relative w-full max-w-md bg-muted 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-card flex justify-between items-center"> <div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-white">Add to Playlist</h3> <h3 className="font-bold text-foreground">Add to Playlist</h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>
<div className="p-4"> <div className="p-4">
<div className="relative mb-4"> <div className="relative mb-4">
<input <input
className="w-full bg-background border border-border rounded-lg py-2 pl-9 pr-4 text-white text-sm focus:border-border outline-none" className="w-full bg-background border border-border rounded-lg py-2 pl-9 pr-4 text-foreground text-sm focus:border-border outline-none"
placeholder="Find playlist" placeholder="Find playlist"
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
@ -97,7 +97,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
<Button <Button
variant="ghost" variant="ghost"
className="w-full justify-start border border-dashed border-border mb-4 hover:border-border/50 hover:text-white group" className="w-full justify-start border border-dashed border-border mb-4 hover:border-border/50 hover:text-foreground group"
onClick={() => addToast('New Playlist Flow')} onClick={() => addToast('New Playlist Flow')}
> >
<div className="w-8 h-8 bg-muted rounded flex items-center justify-center mr-3 group-hover:bg-white/5"> <div className="w-8 h-8 bg-muted rounded flex items-center justify-center mr-3 group-hover:bg-white/5">
@ -119,7 +119,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
/> />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div <div
className={`text-sm font-bold truncate ${selectedIds.includes(playlist.id) ? 'text-primary' : 'text-white'}`} className={`text-sm font-bold truncate ${selectedIds.includes(playlist.id) ? 'text-primary' : 'text-foreground'}`}
> >
{playlist.title} {playlist.title}
</div> </div>

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

@ -47,7 +47,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
} }
> >
<div className="flex flex-col md:flex-row gap-6"> <div className="flex flex-col md:flex-row gap-6">
<div className="w-40 h-40 bg-card 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"> <div className="w-40 h-40 bg-card border-2 border-dashed border-border rounded-lg flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:border-border/50 cursor-pointer transition-colors flex-shrink-0">
<ImageIcon className="w-8 h-8 mb-2" /> <ImageIcon className="w-8 h-8 mb-2" />
<span className="text-xs font-bold uppercase">Cover</span> <span className="text-xs font-bold uppercase">Cover</span>
</div> </div>
@ -61,7 +61,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
/> />
<textarea <textarea
className="w-full bg-card border border-border rounded-lg p-4 text-white focus:border-border outline-none text-sm resize-none h-24" className="w-full bg-card border border-border rounded-lg p-4 text-foreground focus:border-border outline-none text-sm resize-none h-24"
placeholder="Description (Optional)" placeholder="Description (Optional)"
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
@ -79,7 +79,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
<Lock className="w-4 h-4 text-warning" /> <Lock className="w-4 h-4 text-warning" />
)} )}
<div className="text-sm"> <div className="text-sm">
<div className="text-white font-bold"> <div className="text-foreground font-bold">
{isPublic ? 'Public' : 'Private'} {isPublic ? 'Public' : 'Private'}
</div> </div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
@ -107,7 +107,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
className={`w-4 h-4 ${isCollaborative ? 'text-success' : 'text-muted-foreground'}`} className={`w-4 h-4 ${isCollaborative ? 'text-success' : 'text-muted-foreground'}`}
/> />
<div className="text-sm"> <div className="text-sm">
<div className="text-white font-bold">Collaborative</div> <div className="text-foreground font-bold">Collaborative</div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
Friends can add tracks Friends can add tracks
</div> </div>

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

@ -46,7 +46,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
onClick={() => setShowDeleteConfirm(false)} onClick={() => setShowDeleteConfirm(false)}
></div> ></div>
<div className="relative w-full max-w-sm bg-muted border border-destructive rounded-xl shadow-2xl animate-scaleIn p-6 text-center"> <div className="relative w-full max-w-sm bg-muted border border-destructive rounded-xl shadow-2xl animate-scaleIn p-6 text-center">
<h3 className="text-xl font-bold text-white mb-2"> <h3 className="text-xl font-bold text-foreground mb-2">
Delete "{playlist.title}"? Delete "{playlist.title}"?
</h3> </h3>
<p className="text-sm text-muted-foreground mb-6"> <p className="text-sm text-muted-foreground mb-6">
@ -77,9 +77,9 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
></div> ></div>
<div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden"> <div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-card flex justify-between items-center"> <div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-white">Edit Details</h3> <h3 className="font-bold text-foreground">Edit Details</h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>
@ -90,7 +90,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
className="w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity" className="w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity"
/> />
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100"> <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100">
<ImageIcon className="w-8 h-8 text-white" /> <ImageIcon className="w-8 h-8 text-foreground" />
</div> </div>
</div> </div>
@ -102,7 +102,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
/> />
<textarea <textarea
className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-border outline-none text-sm resize-none h-24" className="w-full bg-muted border border-border rounded-lg p-4 text-foreground focus:border-border outline-none text-sm resize-none h-24"
placeholder="Description" placeholder="Description"
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
@ -120,7 +120,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
<Lock className="w-4 h-4 text-warning" /> <Lock className="w-4 h-4 text-warning" />
)} )}
<div className="text-sm"> <div className="text-sm">
<div className="text-white font-bold"> <div className="text-foreground font-bold">
{isPublic ? 'Public' : 'Private'} {isPublic ? 'Public' : 'Private'}
</div> </div>
</div> </div>

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

@ -33,9 +33,9 @@ export const SaveQueueAsPlaylistModal: React.FC<
></div> ></div>
<div className="relative w-full max-w-md bg-card border border-border rounded-xl shadow-2xl animate-scaleIn"> <div className="relative w-full max-w-md bg-card border border-border rounded-xl shadow-2xl animate-scaleIn">
<div className="p-4 border-b border-border bg-card flex justify-between items-center"> <div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-white">Save Queue as Playlist</h3> <h3 className="font-bold text-foreground">Save Queue as Playlist</h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>
@ -59,7 +59,7 @@ export const SaveQueueAsPlaylistModal: React.FC<
<Lock className="w-5 h-5 text-warning" /> <Lock className="w-5 h-5 text-warning" />
)} )}
<div> <div>
<div className="text-sm font-bold text-white"> <div className="text-sm font-bold text-foreground">
{isPublic ? 'Public Playlist' : 'Private Playlist'} {isPublic ? 'Public Playlist' : 'Private Playlist'}
</div> </div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">

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

@ -63,7 +63,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
if (!chatInput.trim()) return; if (!chatInput.trim()) return;
setMessages([ setMessages([
...messages, ...messages,
{ id: Date.now(), user: 'You', text: chatInput, color: 'text-white' }, { id: Date.now(), user: 'You', text: chatInput, color: 'text-foreground' },
]); ]);
setChatInput(''); setChatInput('');
}; };
@ -88,7 +88,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="bg-black/50 backdrop-blur pointer-events-auto text-white hover:bg-black/70" className="bg-black/50 backdrop-blur pointer-events-auto text-foreground hover:bg-black/70"
onClick={onBack} onClick={onBack}
> >
<ArrowLeft className="w-4 h-4 mr-2" /> Back <ArrowLeft className="w-4 h-4 mr-2" /> Back
@ -118,7 +118,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
/> />
</div> </div>
<div> <div>
<h1 className="text-3xl font-bold text-white mb-1"> <h1 className="text-3xl font-bold text-foreground mb-1">
{MOCK_STREAM.title} {MOCK_STREAM.title}
</h1> </h1>
<div className="flex items-center gap-4 text-sm"> <div className="flex items-center gap-4 text-sm">
@ -128,7 +128,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
<span className="flex items-center gap-1 text-destructive font-bold animate-pulse"> <span className="flex items-center gap-1 text-destructive font-bold animate-pulse">
<Radio className="w-3 h-3" /> LIVE <Radio className="w-3 h-3" /> LIVE
</span> </span>
<span className="flex items-center gap-1 text-white"> <span className="flex items-center gap-1 text-foreground">
<Users className="w-3 h-3" />{' '} <Users className="w-3 h-3" />{' '}
{MOCK_STREAM.viewers.toLocaleString()} {MOCK_STREAM.viewers.toLocaleString()}
</span> </span>
@ -138,7 +138,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
<div className="flex gap-4"> <div className="flex gap-4">
<Button <Button
variant="secondary" variant="secondary"
className="bg-black/50 backdrop-blur border-white/20 text-white" className="bg-black/50 backdrop-blur border-white/20 text-foreground"
icon={<Heart className="w-4 h-4" />} icon={<Heart className="w-4 h-4" />}
> >
Follow Follow
@ -154,7 +154,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="bg-black/50 backdrop-blur text-white" className="bg-black/50 backdrop-blur text-foreground"
> >
<Share2 className="w-4 h-4" /> <Share2 className="w-4 h-4" />
</Button> </Button>
@ -166,8 +166,8 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
{/* Chat Sidebar */} {/* Chat Sidebar */}
<div className="w-80 md:w-96 bg-muted border-l border-border flex flex-col z-20 shadow-2xl"> <div className="w-80 md:w-96 bg-muted border-l border-border flex flex-col z-20 shadow-2xl">
<div className="p-4 border-b border-border bg-card flex justify-between items-center"> <div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-white text-sm">LIVE CHAT</h3> <h3 className="font-bold text-foreground text-sm">LIVE CHAT</h3>
<Settings className="w-4 h-4 text-muted-foreground cursor-pointer hover:text-white" /> <Settings className="w-4 h-4 text-muted-foreground cursor-pointer hover:text-foreground" />
</div> </div>
<div className="flex-1 overflow-y-auto p-4 space-y-2 font-mono text-sm custom-scrollbar"> <div className="flex-1 overflow-y-auto p-4 space-y-2 font-mono text-sm custom-scrollbar">
@ -186,7 +186,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
<div className="p-4 border-t border-border bg-card"> <div className="p-4 border-t border-border bg-card">
<div className="relative"> <div className="relative">
<input <input
className="w-full bg-background border border-border rounded-full py-2.5 pl-4 pr-10 text-white text-sm focus:border-border outline-none" className="w-full bg-background border border-border rounded-full py-2.5 pl-4 pr-10 text-foreground text-sm focus:border-border outline-none"
placeholder="Send a message..." placeholder="Send a message..."
value={chatInput} value={chatInput}
onChange={(e) => setChatInput(e.target.value)} onChange={(e) => setChatInput(e.target.value)}
@ -207,7 +207,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="text-warning hover:text-white" className="text-warning hover:text-foreground"
title="Send Tip" title="Send Tip"
onClick={() => setShowTipModal(true)} onClick={() => setShowTipModal(true)}
> >

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

@ -43,7 +43,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
<DollarSign className="w-5 h-5" /> Support {streamerName} <DollarSign className="w-5 h-5" /> Support {streamerName}
</h3> </h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>
@ -58,7 +58,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
<button <button
key={val} key={val}
onClick={() => setAmount(val)} onClick={() => setAmount(val)}
className={`flex-1 py-2 rounded font-bold border transition-colors ${amount === val ? 'bg-warning text-black border-warning' : 'bg-background border-border text-muted-foreground hover:text-white'}`} className={`flex-1 py-2 rounded font-bold border transition-colors ${amount === val ? 'bg-warning text-black border-warning' : 'bg-background border-border text-muted-foreground hover:text-foreground'}`}
> >
${val} ${val}
</button> </button>
@ -70,7 +70,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
</span> </span>
<input <input
type="number" type="number"
className="w-full bg-card border border-border rounded pl-8 pr-4 py-2 text-white font-mono focus:border-warning outline-none" className="w-full bg-card border border-border rounded pl-8 pr-4 py-2 text-foreground font-mono focus:border-warning outline-none"
value={amount} value={amount}
onChange={(e) => setAmount(e.target.value)} onChange={(e) => setAmount(e.target.value)}
placeholder="Custom Amount" placeholder="Custom Amount"
@ -84,7 +84,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
Message (Optional) Message (Optional)
</label> </label>
<textarea <textarea
className="w-full bg-card border border-border rounded p-4 text-white focus:border-warning outline-none text-sm resize-none h-24" className="w-full bg-card border border-border rounded p-4 text-foreground focus:border-warning outline-none text-sm resize-none h-24"
placeholder={`Say something nice to ${streamerName}...`} placeholder={`Say something nice to ${streamerName}...`}
value={message} value={message}
onChange={(e) => setMessage(e.target.value)} onChange={(e) => setMessage(e.target.value)}

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

@ -24,7 +24,7 @@ export const LicenceCard: React.FC<LicenceCardProps> = ({
> >
<div className="flex justify-between items-start mb-4"> <div className="flex justify-between items-start mb-4">
<div> <div>
<h4 className="font-bold text-white text-lg">{license.name}</h4> <h4 className="font-bold text-foreground text-lg">{license.name}</h4>
{license.isPopular && ( {license.isPopular && (
<span className="text-xs text-black bg-warning px-2 py-0.5 rounded font-bold uppercase"> <span className="text-xs text-black bg-warning px-2 py-0.5 rounded font-bold uppercase">
Popular Popular

10
apps/web/src/components/marketplace/ProductCard.tsx
View file

@ -34,14 +34,14 @@ const ProductCardComponent: React.FC<ProductCardProps> = ({
> >
<Card <Card
variant="glass" variant="glass"
className="group p-0 overflow-hidden border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-all duration-[var(--duration-normal)] cursor-pointer hover:-translate-y-1 hover:shadow-lg hover:border-white/10" className="group p-0 overflow-hidden border-white/5 bg-black/20 backdrop-blur-xl transition-all duration-[var(--sumi-duration-normal)] cursor-pointer hover:shadow-lg hover:border-white/10"
onClick={() => onClick(product)} onClick={() => onClick(product)}
> >
{/* Image & Overlay */} {/* Image & Overlay */}
<div className="relative aspect-square overflow-hidden bg-black"> <div className="relative aspect-square overflow-hidden bg-black">
<OptimizedImage <OptimizedImage
src={product.coverUrl || (product as any).cover_url || 'https://picsum.photos/400'} src={product.coverUrl || (product as any).cover_url || 'https://picsum.photos/400'}
className={`w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--duration-normal)] ${isPlayingPreview ? 'scale-110 blur-sm opacity-50' : ''}`} className={`w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--sumi-duration-normal)] ${isPlayingPreview ? 'scale-110 blur-sm opacity-50' : ''}`}
alt={product.title} alt={product.title}
/> />
@ -64,7 +64,7 @@ const ProductCardComponent: React.FC<ProductCardProps> = ({
</div> </div>
{/* Play Button Overlay */} {/* Play Button Overlay */}
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--duration-normal)]"> <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--sumi-duration-normal)]">
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -101,7 +101,7 @@ const ProductCardComponent: React.FC<ProductCardProps> = ({
{/* Details */} {/* Details */}
<div className="p-6"> <div className="p-6">
<div className="flex justify-between items-start mb-1"> <div className="flex justify-between items-start mb-1">
<h3 className="font-bold text-foreground text-base truncate pr-2 group-hover:text-white transition-colors"> <h3 className="font-bold text-foreground text-base truncate pr-2 group-hover:text-foreground transition-colors">
{product.title} {product.title}
</h3> </h3>
</div> </div>
@ -133,7 +133,7 @@ const ProductCardComponent: React.FC<ProductCardProps> = ({
<Button <Button
variant="primary" variant="primary"
size="sm" size="sm"
className="flex-1 opacity-0 translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-[var(--duration-normal)]" className="flex-1 opacity-0 translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-[var(--sumi-duration-normal)]"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onAddToCart(product); onAddToCart(product);

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

@ -22,18 +22,18 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
></div> ></div>
<div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-sm"> <div className="relative w-full max-w-lg bg-muted 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-card flex justify-between items-center"> <div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2"> <h3 className="font-bold text-foreground flex items-center gap-2">
<ShieldCheck className="w-5 h-5 text-muted-foreground" /> License Agreement <ShieldCheck className="w-5 h-5 text-muted-foreground" /> License Agreement
</h3> </h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>
<div className="p-6 flex-1 overflow-y-auto"> <div className="p-6 flex-1 overflow-y-auto">
<div className="flex justify-between items-end mb-6"> <div className="flex justify-between items-end mb-6">
<div> <div>
<h2 className="text-2xl font-bold text-white"> <h2 className="text-2xl font-bold text-foreground">
{license.name} License {license.name} License
</h2> </h2>
<p className="text-muted-foreground text-sm"> <p className="text-muted-foreground text-sm">
@ -47,7 +47,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h4 className="text-sm font-bold text-white uppercase tracking-wider mb-3 border-b border-border pb-1"> <h4 className="text-sm font-bold text-foreground uppercase tracking-wider mb-3 border-b border-border pb-1">
What You Get What You Get
</h4> </h4>
<ul className="space-y-2"> <ul className="space-y-2">
@ -66,7 +66,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
</div> </div>
<div> <div>
<h4 className="text-sm font-bold text-white uppercase tracking-wider mb-3 border-b border-border pb-1"> <h4 className="text-sm font-bold text-foreground uppercase tracking-wider mb-3 border-b border-border pb-1">
Restrictions Restrictions
</h4> </h4>
<ul className="space-y-2"> <ul className="space-y-2">

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

@ -54,7 +54,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
<p className="text-muted-foreground text-sm mb-2"> <p className="text-muted-foreground text-sm mb-2">
How was your experience with How was your experience with
</p> </p>
<h4 className="font-bold text-white text-lg">{productTitle}?</h4> <h4 className="font-bold text-foreground text-lg">{productTitle}?</h4>
</div> </div>
<div className="flex justify-center gap-2"> <div className="flex justify-center gap-2">
@ -82,7 +82,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
Your Review Your Review
</label> </label>
<textarea <textarea
className="w-full bg-background border border-border rounded-lg p-4 text-white focus:border-border outline-none text-sm resize-none h-32" className="w-full bg-background border border-border rounded-lg p-4 text-foreground focus:border-border outline-none text-sm resize-none h-32"
placeholder="Share your thoughts on the quality, usability, and value..." placeholder="Share your thoughts on the quality, usability, and value..."
value={comment} value={comment}
onChange={(e) => setComment(e.target.value)} onChange={(e) => setComment(e.target.value)}

4
apps/web/src/components/marketplace/product-detail-view/ProductDetailViewGallery.tsx
View file

@ -44,7 +44,7 @@ export function ProductDetailViewGallery({
)} )}
</button> </button>
<div className="flex-1"> <div className="flex-1">
<div className="text-xs font-bold text-white mb-1">Audio Preview</div> <div className="text-xs font-bold text-foreground mb-1">Audio Preview</div>
<div className="h-1 bg-muted rounded-full overflow-hidden"> <div className="h-1 bg-muted rounded-full overflow-hidden">
<div className="h-full bg-primary w-1/3 animate-pulse" /> <div className="h-full bg-primary w-1/3 animate-pulse" />
</div> </div>
@ -58,7 +58,7 @@ export function ProductDetailViewGallery({
key={i} key={i}
type="button" type="button"
onClick={() => onActiveImageChange(img)} onClick={() => onActiveImageChange(img)}
className={`w-20 h-20 rounded-xl overflow-hidden cursor-pointer border-2 transition-all duration-[var(--duration-normal)] flex-shrink-0 ${activeImage === img ? 'border-primary' : 'border-transparent opacity-60 hover:opacity-100'}`} className={`w-20 h-20 rounded-xl overflow-hidden cursor-pointer border-2 transition-all duration-[var(--sumi-duration-normal)] flex-shrink-0 ${activeImage === img ? 'border-primary' : 'border-transparent opacity-60 hover:opacity-100'}`}
> >
<img src={img} alt="" className="w-full h-full object-cover" /> <img src={img} alt="" className="w-full h-full object-cover" />
</button> </button>

4
apps/web/src/components/marketplace/product-detail-view/ProductDetailViewInfo.tsx
View file

@ -23,14 +23,14 @@ export function ProductDetailViewInfo({ product }: ProductDetailViewInfoProps) {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="border border-border text-muted-foreground hover:text-primary transition-colors duration-[var(--duration-normal)]" className="border border-border text-muted-foreground hover:text-primary transition-colors duration-[var(--sumi-duration-normal)]"
> >
<Heart className="w-5 h-5" /> <Heart className="w-5 h-5" />
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="border border-border text-muted-foreground hover:text-foreground transition-colors duration-[var(--duration-normal)]" className="border border-border text-muted-foreground hover:text-foreground transition-colors duration-[var(--sumi-duration-normal)]"
> >
<Share2 className="w-5 h-5" /> <Share2 className="w-5 h-5" />
</Button> </Button>

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

@ -39,25 +39,25 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
{/* Header */} {/* Header */}
<div className="flex justify-between items-center p-8 border-b border-border bg-card"> <div className="flex justify-between items-center p-8 border-b border-border bg-card">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<h2 className="text-2xl font-heading font-bold text-white"> <h2 className="text-2xl font-heading font-bold text-foreground">
CREATOR STUDIO CREATOR STUDIO
</h2> </h2>
<div className="flex bg-muted rounded-lg p-1"> <div className="flex bg-muted rounded-lg p-1">
<button <button
onClick={() => setActiveTab('track')} onClick={() => setActiveTab('track')}
className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'track' ? 'bg-primary text-black' : 'text-muted-foreground hover:text-white'}`} className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'track' ? 'bg-primary text-black' : 'text-muted-foreground hover:text-foreground'}`}
> >
<Music className="w-4 h-4" /> Track <Music className="w-4 h-4" /> Track
</button> </button>
<button <button
onClick={() => setActiveTab('product')} onClick={() => setActiveTab('product')}
className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'product' ? 'bg-destructive text-white' : 'text-muted-foreground hover:text-white'}`} className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'product' ? 'bg-destructive text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
> >
<Package className="w-4 h-4" /> Product <Package className="w-4 h-4" /> Product
</button> </button>
<button <button
onClick={() => setActiveTab('course')} onClick={() => setActiveTab('course')}
className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'course' ? 'bg-warning text-black' : 'text-muted-foreground hover:text-white'}`} className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'course' ? 'bg-warning text-black' : 'text-muted-foreground hover:text-foreground'}`}
> >
<BookOpen className="w-4 h-4" /> Course <BookOpen className="w-4 h-4" /> Course
</button> </button>
@ -130,7 +130,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
{activeTab === 'product' && ( {activeTab === 'product' && (
<div className="text-center py-12"> <div className="text-center py-12">
<h3 className="text-xl font-bold text-white mb-2"> <h3 className="text-xl font-bold text-foreground mb-2">
Sell Your Sounds Sell Your Sounds
</h3> </h3>
<p className="text-muted-foreground mb-6"> <p className="text-muted-foreground mb-6">

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

@ -53,7 +53,7 @@ export const NotificationBell: React.FC<NotificationBellProps> = ({
<div className="absolute top-full right-0 mt-4 w-96 bg-muted 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="absolute top-full right-0 mt-4 w-96 bg-muted 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-card"> <div className="p-4 border-b border-border/50 flex justify-between items-center bg-card">
<div> <div>
<h3 className="font-bold text-white">Notifications</h3> <h3 className="font-bold text-foreground">Notifications</h3>
<p className="text-xs text-muted-foreground">{unreadCount} unread</p> <p className="text-xs text-muted-foreground">{unreadCount} unread</p>
</div> </div>
{unreadCount > 0 && ( {unreadCount > 0 && (

10
apps/web/src/components/player/FullPlayer.tsx
View file

@ -53,12 +53,12 @@ export const FullPlayer: React.FC<FullPlayerProps> = ({ onClose }) => {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={onClose} onClick={onClose}
className="text-white/50 hover:text-white" className="text-white/50 hover:text-foreground"
> >
<Minimize2 className="w-6 h-6" /> <Minimize2 className="w-6 h-6" />
</Button> </Button>
<div className="flex gap-2"> <div className="flex gap-2">
<span className="px-4 py-1 bg-white/10 rounded-full text-xs font-bold text-white tracking-widest border border-white/20 backdrop-blur"> <span className="px-4 py-1 bg-white/10 rounded-full text-xs font-bold text-foreground tracking-widest border border-white/20 backdrop-blur">
LOSSLESS LOSSLESS
</span> </span>
</div> </div>
@ -68,7 +68,7 @@ export const FullPlayer: React.FC<FullPlayerProps> = ({ onClose }) => {
<div className="relative z-20 flex-1 flex flex-col md:flex-row items-center justify-center gap-12 px-8 pb-8 max-w-7xl mx-auto w-full"> <div className="relative z-20 flex-1 flex flex-col md:flex-row items-center justify-center gap-12 px-8 pb-8 max-w-7xl mx-auto w-full">
{/* Left: Artwork & Metadata */} {/* Left: Artwork & Metadata */}
<div <div
className={`flex flex-col items-center md:items-start text-center md:text-left transition-all duration-[var(--duration-slow)] ${showLyrics ? 'md:w-1/3' : 'md:w-1/2'}`} className={`flex flex-col items-center md:items-start text-center md:text-left transition-all duration-[var(--sumi-duration-slow)] ${showLyrics ? 'md:w-1/3' : 'md:w-1/2'}`}
> >
<div <div
className="aspect-square w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl mb-8 border border-white/10 relative group cursor-pointer" className="aspect-square w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl mb-8 border border-white/10 relative group cursor-pointer"
@ -81,14 +81,14 @@ export const FullPlayer: React.FC<FullPlayerProps> = ({ onClose }) => {
{/* Visualizer Overlay if enabled */} {/* Visualizer Overlay if enabled */}
{visualizerSettings.mode !== 'off' && ( {visualizerSettings.mode !== 'off' && (
<div className="absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-[2px] opacity-0 group-hover:opacity-100 transition-opacity"> <div className="absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-[2px] opacity-0 group-hover:opacity-100 transition-opacity">
<span className="text-white font-bold uppercase tracking-widest text-sm border border-white px-4 py-2 rounded-full"> <span className="text-foreground font-bold uppercase tracking-widest text-sm border border-white px-4 py-2 rounded-full">
{showLyrics ? 'Hide Lyrics' : 'Show Lyrics'} {showLyrics ? 'Hide Lyrics' : 'Show Lyrics'}
</span> </span>
</div> </div>
)} )}
</div> </div>
<h1 className="text-4xl md:text-6xl font-heading font-bold text-white mb-2 leading-tight"> <h1 className="text-4xl md:text-6xl font-heading font-bold text-foreground mb-2 leading-tight">
{currentTrack.title} {currentTrack.title}
</h1> </h1>
<h2 className="text-xl md:text-2xl text-muted-foreground font-medium mb-1"> <h2 className="text-xl md:text-2xl text-muted-foreground font-medium mb-1">

2
apps/web/src/components/player/LyricsPanel.tsx
View file

@ -66,7 +66,7 @@ export const LyricsPanel: React.FC = () => {
return ( return (
<p <p
key={i} key={i}
className={`text-2xl md:text-3xl font-bold transition-all duration-[var(--duration-slow)] cursor-pointer hover:text-white ${isActive ? 'text-white scale-105 origin-center' : 'text-white/20 blur-[1px]'}`} className={`text-2xl md:text-3xl font-bold transition-all duration-[var(--sumi-duration-slow)] cursor-pointer hover:text-foreground ${isActive ? 'text-foreground scale-105 origin-center' : 'text-white/20 blur-[1px]'}`}
onClick={() => seek((line.time / duration) * 100)} onClick={() => seek((line.time / duration) * 100)}
> >
{line.text} {line.text}

4
apps/web/src/components/player/MiniPlayer.tsx
View file

@ -35,7 +35,7 @@ export const MiniPlayer: React.FC<MiniPlayerProps> = ({
}; };
return ( return (
<div className="fixed bottom-0 left-0 right-0 h-16 max-h-16 bg-background/95 backdrop-blur-md border-t border-white/5 z-50 px-4 md:px-6 flex items-center justify-between gap-4 transition-all duration-[var(--duration-immersive)] ease-in-out"> <div className="fixed bottom-0 left-0 right-0 h-16 max-h-16 bg-background/95 backdrop-blur-md border-t border-white/5 z-50 px-4 md:px-6 flex items-center justify-between gap-4 transition-all duration-[var(--sumi-duration-slow)] ease-in-out">
{/* 1. Track Info — Spotify-style: cover + title/artist */} {/* 1. Track Info — Spotify-style: cover + title/artist */}
<div className="flex items-center gap-3 min-w-0 flex-1 max-w-md"> <div className="flex items-center gap-3 min-w-0 flex-1 max-w-md">
<div className="w-12 h-12 rounded-md overflow-hidden relative group cursor-pointer flex-shrink-0 shadow-md"> <div className="w-12 h-12 rounded-md overflow-hidden relative group cursor-pointer flex-shrink-0 shadow-md">
@ -48,7 +48,7 @@ export const MiniPlayer: React.FC<MiniPlayerProps> = ({
className="absolute inset-0 bg-black/40 hidden group-hover:flex items-center justify-center transition-opacity duration-[var(--duration-fast)]" className="absolute inset-0 bg-black/40 hidden group-hover:flex items-center justify-center transition-opacity duration-[var(--duration-fast)]"
onClick={onExpand} onClick={onExpand}
> >
<Maximize2 className="w-5 h-5 text-white" /> <Maximize2 className="w-5 h-5 text-foreground" />
</div> </div>
</div> </div>
<div className="flex flex-col min-w-0 flex-1"> <div className="flex flex-col min-w-0 flex-1">

4
apps/web/src/components/player/PlaybackSpeedModal.tsx
View file

@ -20,7 +20,7 @@ export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
return ( return (
<div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-80 bg-card border border-border rounded-xl shadow-2xl z-50 animate-fadeIn overflow-hidden"> <div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-80 bg-card border border-border rounded-xl shadow-2xl z-50 animate-fadeIn overflow-hidden">
<div className="p-4 border-b border-border bg-muted flex justify-between items-center"> <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 text-sm"> <h3 className="font-bold text-foreground flex items-center gap-2 text-sm">
<Gauge className="w-4 h-4 text-warning" /> Playback Speed <Gauge className="w-4 h-4 text-warning" /> Playback Speed
</h3> </h3>
<button onClick={onClose}> <button onClick={onClose}>
@ -65,7 +65,7 @@ export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
{/* Pitch Correction */} {/* Pitch Correction */}
<div className="flex items-center justify-between p-4 bg-muted rounded-lg border border-border/50"> <div className="flex items-center justify-between p-4 bg-muted rounded-lg border border-border/50">
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-sm font-bold text-white"> <span className="text-sm font-bold text-foreground">
Pitch Correction Pitch Correction
</span> </span>
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">

2
apps/web/src/components/player/PlayerControls.tsx
View file

@ -84,7 +84,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
</button> </button>
<button <button
onClick={togglePlay} onClick={togglePlay}
className={`${layout === 'full' ? 'w-14 h-14' : 'w-9 h-9'} rounded-full bg-primary text-primary-foreground flex items-center justify-center transition-all duration-[var(--duration-immersive)] ease-in-out hover:opacity-90 shadow-button-primary-glow`} className={`${layout === 'full' ? 'w-14 h-14' : 'w-9 h-9'} rounded-full bg-primary text-primary-foreground flex items-center justify-center transition-all duration-[var(--sumi-duration-slow)] ease-in-out hover:opacity-90 shadow-sm`}
> >
{isPlaying ? ( {isPlaying ? (
<Pause <Pause

4
apps/web/src/components/player/VisualizerSettingsModal.tsx
View file

@ -20,11 +20,11 @@ export const VisualizerSettingsModal: React.FC<
return ( return (
<div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-72 bg-card border border-border rounded-xl shadow-2xl z-50 animate-fadeIn overflow-hidden"> <div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-72 bg-card border border-border rounded-xl shadow-2xl z-50 animate-fadeIn overflow-hidden">
<div className="p-4 border-b border-border bg-muted flex justify-between items-center"> <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 text-sm"> <h3 className="font-bold text-foreground flex items-center gap-2 text-sm">
<Activity className="w-4 h-4 text-muted-foreground" /> Visualizer <Activity className="w-4 h-4 text-muted-foreground" /> Visualizer
</h3> </h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-4 h-4 text-muted-foreground hover:text-white" /> <X className="w-4 h-4 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>

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

@ -33,14 +33,14 @@ export function PWAInstallBanner() {
</div> </div>
<div> <div>
<div className="text-hud">System.Uplink</div> <div className="text-hud">System.Uplink</div>
<h3 className="font-heading font-black text-xs text-white uppercase tracking-wider"> <h3 className="font-heading font-black text-xs text-foreground uppercase tracking-wider">
{t('pwa.install.title', 'Native_Access')} {t('pwa.install.title', 'Native_Access')}
</h3> </h3>
</div> </div>
</div> </div>
<button <button
onClick={handleDismiss} onClick={handleDismiss}
className="p-1 px-2 rounded-md bg-white/5 text-muted-foreground hover:text-white transition-all text-xs font-mono border border-transparent hover:border-white/10" className="p-1 px-2 rounded-md bg-white/5 text-muted-foreground hover:text-foreground transition-all text-xs font-mono border border-transparent hover:border-white/10"
> >
DISMISS DISMISS
</button> </button>

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

@ -99,7 +99,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
/> />
<input <input
type="text" type="text"
className="bg-transparent border-none text-white placeholder-gray-500 w-full focus:ring-0 outline-none text-base" className="bg-transparent border-none text-foreground placeholder-gray-500 w-full focus:ring-0 outline-none text-base"
placeholder={placeholder} placeholder={placeholder}
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
@ -109,7 +109,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
<button <button
type="button" type="button"
onClick={() => setQuery('')} onClick={() => setQuery('')}
className="text-muted-foreground hover:text-white transition-colors" className="text-muted-foreground hover:text-foreground transition-colors"
> >
<X className="w-4 h-4" /> <X className="w-4 h-4" />
</button> </button>
@ -136,7 +136,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
{getIcon(item.type)} {getIcon(item.type)}
</div> </div>
<div> <div>
<div className="text-sm font-bold text-white"> <div className="text-sm font-bold text-foreground">
{item.label} {item.label}
</div> </div>
<div className="text-xs text-muted-foreground capitalize"> <div className="text-xs text-muted-foreground capitalize">
@ -171,7 +171,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
className="px-4 py-2 hover:bg-white/5 cursor-pointer flex items-center justify-between group transition-colors" className="px-4 py-2 hover:bg-white/5 cursor-pointer flex items-center justify-between group transition-colors"
onClick={() => handleSuggestionClick(term)} onClick={() => handleSuggestionClick(term)}
> >
<div className="flex items-center gap-4 text-foreground group-hover:text-white"> <div className="flex items-center gap-4 text-foreground group-hover:text-foreground">
<Clock className="w-4 h-4 text-muted-foreground" /> <Clock className="w-4 h-4 text-muted-foreground" />
<span className="text-sm">{term}</span> <span className="text-sm">{term}</span>
</div> </div>

2
apps/web/src/components/seller/create-product-view/CreateProductViewCoverCard.tsx
View file

@ -8,7 +8,7 @@ export function CreateProductViewCoverCard() {
<h3 className="font-bold text-foreground mb-4 flex items-center gap-2 text-sm uppercase tracking-wider"> <h3 className="font-bold text-foreground mb-4 flex items-center gap-2 text-sm uppercase tracking-wider">
<ImageIcon className="w-4 h-4 text-muted-foreground" /> Cover Art <ImageIcon className="w-4 h-4 text-muted-foreground" /> Cover Art
</h3> </h3>
<div className="aspect-square bg-card border-2 border-dashed border-border rounded-xl flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:border-primary/50 cursor-pointer transition-colors duration-[var(--duration-normal)] group"> <div className="aspect-square bg-card border-2 border-dashed border-border rounded-xl flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:border-primary/50 cursor-pointer transition-colors duration-[var(--sumi-duration-normal)] group">
<UploadCloud className="w-8 h-8 mb-2 transition-opacity group-hover:opacity-80" /> <UploadCloud className="w-8 h-8 mb-2 transition-opacity group-hover:opacity-80" />
<span className="text-xs font-bold uppercase">Upload Image</span> <span className="text-xs font-bold uppercase">Upload Image</span>
</div> </div>

4
apps/web/src/components/seller/create-product-view/CreateProductViewDetailsCard.tsx
View file

@ -49,7 +49,7 @@ export function CreateProductViewDetailsCard({
Description Description
</label> </label>
<textarea <textarea
className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none min-h-24 transition-colors duration-[var(--duration-normal)]" className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none min-h-24 transition-colors duration-[var(--sumi-duration-normal)]"
placeholder="Describe your sound pack..." placeholder="Describe your sound pack..."
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
@ -61,7 +61,7 @@ export function CreateProductViewDetailsCard({
Category Category
</label> </label>
<select <select
className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]" className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none transition-colors duration-[var(--sumi-duration-normal)]"
value={category} value={category}
onChange={(e) => setCategory(e.target.value)} onChange={(e) => setCategory(e.target.value)}
> >

4
apps/web/src/components/seller/create-product-view/CreateProductViewFilesCard.tsx
View file

@ -13,7 +13,7 @@ export function CreateProductViewFilesCard() {
<label className="text-xs text-muted-foreground mb-1 block"> <label className="text-xs text-muted-foreground mb-1 block">
Main File (ZIP/RAR) Main File (ZIP/RAR)
</label> </label>
<div className="h-20 bg-card border border-border rounded-xl flex items-center justify-center cursor-pointer hover:border-primary transition-colors duration-[var(--duration-normal)]"> <div className="h-20 bg-card border border-border rounded-xl flex items-center justify-center cursor-pointer hover:border-primary transition-colors duration-[var(--sumi-duration-normal)]">
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
Drop full product here Drop full product here
</span> </span>
@ -23,7 +23,7 @@ export function CreateProductViewFilesCard() {
<label className="text-xs text-muted-foreground mb-1 block"> <label className="text-xs text-muted-foreground mb-1 block">
Audio Preview (MP3) Audio Preview (MP3)
</label> </label>
<div className="h-12 bg-card border border-border rounded-xl flex items-center justify-center cursor-pointer hover:border-primary transition-colors duration-[var(--duration-normal)]"> <div className="h-12 bg-card border border-border rounded-xl flex items-center justify-center cursor-pointer hover:border-primary transition-colors duration-[var(--sumi-duration-normal)]">
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
Drop preview audio Drop preview audio
</span> </span>

6
apps/web/src/components/seller/create-product-view/CreateProductViewPricingCard.tsx
View file

@ -31,7 +31,7 @@ export function CreateProductViewPricingCard({
{licenses.map((lic) => ( {licenses.map((lic) => (
<div <div
key={lic.type} key={lic.type}
className={`p-4 rounded-xl border transition-all duration-[var(--duration-normal)] ${lic.enabled ? 'bg-card border-primary/30' : 'bg-card/50 border-border opacity-60'}`} className={`p-4 rounded-xl border transition-all duration-[var(--sumi-duration-normal)] ${lic.enabled ? 'bg-card border-primary/30' : 'bg-card/50 border-border opacity-60'}`}
> >
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
@ -39,7 +39,7 @@ export function CreateProductViewPricingCard({
onClick={() => onClick={() =>
updateLicense(lic.type, 'enabled', !lic.enabled) updateLicense(lic.type, 'enabled', !lic.enabled)
} }
className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors duration-[var(--duration-normal)] ${lic.enabled ? 'bg-primary' : 'bg-muted'}`} className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors duration-[var(--sumi-duration-normal)] ${lic.enabled ? 'bg-primary' : 'bg-muted'}`}
role="switch" role="switch"
aria-checked={lic.enabled} aria-checked={lic.enabled}
> >
@ -63,7 +63,7 @@ export function CreateProductViewPricingCard({
</span> </span>
<input <input
type="number" type="number"
className="w-full bg-muted border border-border rounded-xl py-2 pl-6 pr-2 text-foreground focus:border-primary outline-none text-right font-mono transition-colors duration-[var(--duration-normal)]" className="w-full bg-muted border border-border rounded-xl py-2 pl-6 pr-2 text-foreground focus:border-primary outline-none text-right font-mono transition-colors duration-[var(--sumi-duration-normal)]"
value={lic.price} value={lic.price}
onChange={(e) => onChange={(e) =>
updateLicense(lic.type, 'price', e.target.value) updateLicense(lic.type, 'price', e.target.value)

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

@ -43,11 +43,11 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
></div> ></div>
<div className="relative w-full max-w-2xl bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal"> <div className="relative w-full max-w-2xl bg-muted 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-card flex justify-between items-center"> <div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2"> <h3 className="font-bold text-foreground flex items-center gap-2">
<Zap className="w-5 h-5 text-warning" /> Start Flash Sale <Zap className="w-5 h-5 text-warning" /> Start Flash Sale
</h3> </h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>
@ -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" /> <Percent className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<input <input
type="number" type="number"
className="w-full bg-background border border-border rounded pl-10 pr-4 py-2 text-white focus:border-warning outline-none" className="w-full bg-background border border-border rounded pl-10 pr-4 py-2 text-foreground focus:border-warning outline-none"
value={discount} value={discount}
onChange={(e) => setDiscount(Number(e.target.value))} onChange={(e) => setDiscount(Number(e.target.value))}
min={5} min={5}
@ -78,7 +78,7 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
<div className="relative"> <div className="relative">
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" /> <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<select <select
className="w-full bg-background border border-border rounded pl-10 pr-4 py-2 text-white focus:border-warning outline-none appearance-none" className="w-full bg-background border border-border rounded pl-10 pr-4 py-2 text-foreground focus:border-warning outline-none appearance-none"
value={duration} value={duration}
onChange={(e) => setDuration(Number(e.target.value))} onChange={(e) => setDuration(Number(e.target.value))}
> >
@ -98,9 +98,9 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
</h4> </h4>
<p className="text-xs text-foreground"> <p className="text-xs text-foreground">
Applying a{' '} Applying a{' '}
<span className="font-bold text-white">{discount}%</span>{' '} <span className="font-bold text-foreground">{discount}%</span>{' '}
discount to{' '} discount to{' '}
<span className="font-bold text-white"> <span className="font-bold text-foreground">
{selectedIds.length} {selectedIds.length}
</span>{' '} </span>{' '}
products. Sale ends in {duration} hours. products. Sale ends in {duration} hours.
@ -151,7 +151,7 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
className="w-8 h-8 rounded object-cover" className="w-8 h-8 rounded object-cover"
/> />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-sm font-bold text-white truncate"> <div className="text-sm font-bold text-foreground truncate">
{product.title} {product.title}
</div> </div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">

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

@ -42,7 +42,7 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
<div className="p-4 border-b border-border bg-card flex justify-between items-center"> <div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-foreground">Change Email Address</h3> <h3 className="font-bold text-foreground">Change Email Address</h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>

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

@ -84,7 +84,7 @@ export const DeleteAccountConfirmModal: React.FC<
</Button> </Button>
<Button <Button
variant="primary" variant="primary"
className="bg-destructive hover:bg-destructive border-destructive text-white" className="bg-destructive hover:bg-destructive border-destructive text-foreground"
onClick={handleDelete} onClick={handleDelete}
disabled={loading} disabled={loading}
> >

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

@ -41,7 +41,7 @@ export function AccountSettingsPreferencesCard({
key={opt.id} key={opt.id}
type="button" type="button"
onClick={() => onThemeChange(opt.id)} onClick={() => onThemeChange(opt.id)}
className={`flex flex-col items-center justify-center gap-2 p-4 rounded-xl border transition-all duration-[var(--duration-normal)] ${isOptionSelected(theme, opt.id) ? 'bg-primary/10 border-primary text-primary' : 'bg-card border-border text-muted-foreground hover:text-foreground'}`} className={`flex flex-col items-center justify-center gap-2 p-4 rounded-xl border transition-all duration-[var(--sumi-duration-normal)] ${isOptionSelected(theme, opt.id) ? 'bg-primary/10 border-primary text-primary' : 'bg-card border-border text-muted-foreground hover:text-foreground'}`}
> >
{opt.icon} {opt.icon}
<span className="text-xs font-bold">{opt.label}</span> <span className="text-xs font-bold">{opt.label}</span>
@ -55,7 +55,7 @@ export function AccountSettingsPreferencesCard({
</label> </label>
<div className="relative"> <div className="relative">
<Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" /> <Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<select className="w-full bg-muted border border-border rounded-xl py-2.5 pl-10 pr-4 text-foreground text-sm focus:border-primary outline-none appearance-none cursor-pointer transition-colors duration-[var(--duration-normal)]"> <select className="w-full bg-muted border border-border rounded-xl py-2.5 pl-10 pr-4 text-foreground text-sm focus:border-primary outline-none appearance-none cursor-pointer transition-colors duration-[var(--sumi-duration-normal)]">
<option>English (US)</option> <option>English (US)</option>
<option>Japanese</option> <option>Japanese</option>
<option>French</option> <option>French</option>

4
apps/web/src/components/settings/profile/edit-profile/EditProfileIdentityCard.tsx
View file

@ -43,7 +43,7 @@ export function EditProfileIdentityCard({
Bio Bio
</label> </label>
<textarea <textarea
className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none min-h-24 transition-colors duration-[var(--duration-normal)]" className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none min-h-24 transition-colors duration-[var(--sumi-duration-normal)]"
value={formData.bio} value={formData.bio}
onChange={(e) => setFormField('bio', e.target.value)} onChange={(e) => setFormField('bio', e.target.value)}
maxLength={500} maxLength={500}
@ -63,7 +63,7 @@ export function EditProfileIdentityCard({
Gender Gender
</label> </label>
<select <select
className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]" className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none transition-colors duration-[var(--sumi-duration-normal)]"
value={formData.gender} value={formData.gender}
onChange={(e) => setFormField('gender', e.target.value)} onChange={(e) => setFormField('gender', e.target.value)}
> >

4
apps/web/src/components/settings/profile/edit-profile/EditProfileImagesCard.tsx
View file

@ -22,7 +22,7 @@ export function EditProfileImagesCard({
<div className="h-48 md:h-64 bg-card relative"> <div className="h-48 md:h-64 bg-card relative">
<img src={banner} alt="" className="w-full h-full object-cover opacity-80" /> <img src={banner} alt="" className="w-full h-full object-cover opacity-80" />
<div className="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"> <div className="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<label className="cursor-pointer bg-black/60 hover:bg-black/80 text-white px-4 py-2 rounded-lg flex items-center gap-2 backdrop-blur border border-white/10"> <label className="cursor-pointer bg-black/60 hover:bg-black/80 text-foreground px-4 py-2 rounded-lg flex items-center gap-2 backdrop-blur border border-white/10">
<Camera className="w-4 h-4" /> Change Banner <Camera className="w-4 h-4" /> Change Banner
<input <input
type="file" type="file"
@ -38,7 +38,7 @@ export function EditProfileImagesCard({
<div className="w-32 h-32 rounded-full border-4 border-border bg-muted overflow-hidden relative"> <div className="w-32 h-32 rounded-full border-4 border-border bg-muted overflow-hidden relative">
<img src={avatar} alt="" className="w-full h-full object-cover" /> <img src={avatar} alt="" className="w-full h-full object-cover" />
<div className="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover/avatar:opacity-100 transition-opacity"> <div className="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover/avatar:opacity-100 transition-opacity">
<label className="cursor-pointer p-2 bg-black/50 rounded-full hover:bg-black/70 text-white"> <label className="cursor-pointer p-2 bg-black/50 rounded-full hover:bg-black/70 text-foreground">
<Upload className="w-5 h-5" /> <Upload className="w-5 h-5" />
<input <input
type="file" type="file"

2
apps/web/src/components/settings/profile/edit-profile/EditProfileSidebar.tsx
View file

@ -9,7 +9,7 @@ export function EditProfileSidebar({ onRequestVerification }: EditProfileSidebar
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<Card variant="glass"> <Card variant="glass">
<h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider"> <h3 className="font-bold text-foreground mb-4 text-sm uppercase tracking-wider">
Verification Verification
</h3> </h3>
<p className="text-xs text-muted-foreground mb-4"> <p className="text-xs text-muted-foreground mb-4">

6
apps/web/src/components/settings/security/PasskeyModal.tsx
View file

@ -42,7 +42,7 @@ export const PasskeyModal: React.FC<PasskeyModalProps> = ({
></div> ></div>
<div className="relative w-full max-w-md bg-card border border-border rounded-xl shadow-2xl overflow-hidden animate-scaleIn"> <div className="relative w-full max-w-md bg-card border border-border rounded-xl shadow-2xl overflow-hidden animate-scaleIn">
<div className="p-4 border-b border-border bg-muted flex justify-between items-center"> <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"> <h3 className="font-bold text-foreground flex items-center gap-2">
<Fingerprint className="w-4 h-4 text-muted-foreground" /> Add Passkey <Fingerprint className="w-4 h-4 text-muted-foreground" /> Add Passkey
</h3> </h3>
<button onClick={onClose}> <button onClick={onClose}>
@ -84,7 +84,7 @@ export const PasskeyModal: React.FC<PasskeyModalProps> = ({
{step === 'registering' && ( {step === 'registering' && (
<div className="text-center py-8"> <div className="text-center py-8">
<Loader2 className="w-12 h-12 text-muted-foreground animate-spin mx-auto mb-4" /> <Loader2 className="w-12 h-12 text-muted-foreground animate-spin mx-auto mb-4" />
<h4 className="text-lg font-bold text-white mb-2"> <h4 className="text-lg font-bold text-foreground mb-2">
Waiting for device... Waiting for device...
</h4> </h4>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
@ -98,7 +98,7 @@ export const PasskeyModal: React.FC<PasskeyModalProps> = ({
<div className="w-16 h-16 bg-success/20 rounded-full flex items-center justify-center mx-auto mb-4 text-success"> <div className="w-16 h-16 bg-success/20 rounded-full flex items-center justify-center mx-auto mb-4 text-success">
<CheckCircle className="w-8 h-8" /> <CheckCircle className="w-8 h-8" />
</div> </div>
<h4 className="text-xl font-bold text-white mb-2"> <h4 className="text-xl font-bold text-foreground mb-2">
Passkey Added! Passkey Added!
</h4> </h4>
<p className="text-sm text-muted-foreground mb-6"> <p className="text-sm text-muted-foreground mb-6">

2
apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupHeader.tsx
View file

@ -10,7 +10,7 @@ export function TwoFactorSetupHeader({ onBack }: TwoFactorSetupHeaderProps) {
<button <button
type="button" type="button"
onClick={onBack} onClick={onBack}
className="p-2 hover:bg-muted rounded-full text-muted-foreground hover:text-foreground transition-colors duration-[var(--duration-normal)]" className="p-2 hover:bg-muted rounded-full text-muted-foreground hover:text-foreground transition-colors duration-[var(--sumi-duration-normal)]"
aria-label="Go back" aria-label="Go back"
> >
<ArrowLeft className="w-5 h-5" /> <ArrowLeft className="w-5 h-5" />

4
apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupStep1.tsx
View file

@ -16,7 +16,7 @@ export function TwoFactorSetupStep1({
tabIndex={0} tabIndex={0}
onClick={onChooseTotp} onClick={onChooseTotp}
onKeyDown={(e) => e.key === 'Enter' && onChooseTotp()} onKeyDown={(e) => e.key === 'Enter' && onChooseTotp()}
className="p-6 border border-border rounded-xl bg-card hover:bg-muted/50 cursor-pointer transition-all duration-[var(--duration-normal)] hover:border-primary/50 group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background" className="p-6 border border-border rounded-xl bg-card hover:bg-muted/50 cursor-pointer transition-all duration-[var(--sumi-duration-normal)] hover:border-primary/50 group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
> >
<div className="flex items-center gap-4 mb-2"> <div className="flex items-center gap-4 mb-2">
<div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center group-hover:bg-muted/80"> <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center group-hover:bg-muted/80">
@ -38,7 +38,7 @@ export function TwoFactorSetupStep1({
tabIndex={0} tabIndex={0}
onClick={onChooseSms} onClick={onChooseSms}
onKeyDown={(e) => e.key === 'Enter' && onChooseSms()} onKeyDown={(e) => e.key === 'Enter' && onChooseSms()}
className="p-6 border border-border rounded-xl bg-card opacity-50 cursor-not-allowed transition-all duration-[var(--duration-normal)] grayscale group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background" className="p-6 border border-border rounded-xl bg-card opacity-50 cursor-not-allowed transition-all duration-[var(--sumi-duration-normal)] grayscale group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
> >
<div className="flex items-center gap-4 mb-2"> <div className="flex items-center gap-4 mb-2">
<div className="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center"> <div className="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center">

2
apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupStep2.tsx
View file

@ -90,7 +90,7 @@ export function TwoFactorSetupStep2({
<p <p
role="button" role="button"
tabIndex={0} tabIndex={0}
className="text-xs text-muted-foreground font-mono bg-muted py-1 px-3 rounded-full border border-border inline-block cursor-pointer hover:text-foreground transition-colors duration-[var(--duration-normal)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background" className="text-xs text-muted-foreground font-mono bg-muted py-1 px-3 rounded-full border border-border inline-block cursor-pointer hover:text-foreground transition-colors duration-[var(--sumi-duration-normal)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
onClick={onCopySecret} onClick={onCopySecret}
onKeyDown={(e) => e.key === 'Enter' && onCopySecret()} onKeyDown={(e) => e.key === 'Enter' && onCopySecret()}
> >

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

@ -34,7 +34,7 @@ export const CommentItem: React.FC<CommentItemProps> = ({
<div className="bg-card/50 p-4 rounded-2xl rounded-tl-sm"> <div className="bg-card/50 p-4 rounded-2xl rounded-tl-sm">
<div className="flex justify-between items-baseline mb-1"> <div className="flex justify-between items-baseline mb-1">
<div className="flex gap-2 items-baseline"> <div className="flex gap-2 items-baseline">
<span className="font-bold text-white cursor-pointer hover:underline"> <span className="font-bold text-foreground cursor-pointer hover:underline">
{comment.author.name} {comment.author.name}
</span> </span>
<span className="text-muted-foreground text-xs">{comment.timestamp}</span> <span className="text-muted-foreground text-xs">{comment.timestamp}</span>

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

@ -106,7 +106,7 @@ export const ExploreView: React.FC = () => {
<button <button
key={tab.id} key={tab.id}
onClick={() => setActiveTab(tab.id as any)} onClick={() => setActiveTab(tab.id as any)}
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold transition-all whitespace-nowrap ${activeTab === tab.id ? 'bg-primary text-black' : 'text-muted-foreground hover:text-white hover:bg-white/5'}`} className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold transition-all whitespace-nowrap ${activeTab === tab.id ? 'bg-primary text-black' : 'text-muted-foreground hover:text-foreground hover:bg-white/5'}`}
> >
{tab.icon} {tab.label} {tab.icon} {tab.label}
</button> </button>
@ -159,7 +159,7 @@ export const ExploreView: React.FC = () => {
{/* Overlay */} {/* Overlay */}
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-4"> <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-4">
<h4 className="text-white font-bold truncate text-sm mb-1"> <h4 className="text-foreground font-bold truncate text-sm mb-1">
{item.title} {item.title}
</h4> </h4>
<div className="flex justify-between items-center text-xs text-foreground"> <div className="flex justify-between items-center text-xs text-foreground">
@ -173,7 +173,7 @@ export const ExploreView: React.FC = () => {
</div> </div>
{/* Type Indicator */} {/* Type Indicator */}
<div className="absolute top-2 right-2 bg-black/50 backdrop-blur p-1.5 rounded-full text-white"> <div className="absolute top-2 right-2 bg-black/50 backdrop-blur p-1.5 rounded-full text-foreground">
{item.type === 'audio' ? ( {item.type === 'audio' ? (
<Play className="w-3 h-3 fill-current" /> <Play className="w-3 h-3 fill-current" />
) : item.type === 'video' ? ( ) : item.type === 'video' ? (

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

@ -112,7 +112,7 @@ const PostCardComponent: React.FC<PostCardProps> = ({ post }) => {
<> <>
<Card <Card
variant="default" variant="default"
className="p-0 overflow-hidden border-transparent hover:border-primary/20 hover:-translate-y-0.5 hover:shadow-lg transition-all duration-[var(--duration-normal)] animate-fadeIn mb-4" className="p-0 overflow-hidden border-transparent hover:border-primary/20 hover:shadow-lg transition-all duration-[var(--sumi-duration-normal)] animate-fadeIn mb-4"
> >
{/* Repost Header */} {/* Repost Header */}
{post.isRepost && ( {post.isRepost && (
@ -177,7 +177,7 @@ const PostCardComponent: React.FC<PostCardProps> = ({ post }) => {
<OptimizedImage <OptimizedImage
src={post.image!} src={post.image!}
alt={post.content?.substring(0, 50) || 'Post image'} alt={post.content?.substring(0, 50) || 'Post image'}
className="w-full h-full object-cover transition-transform duration-[var(--duration-normal)] group-hover:scale-105" className="w-full h-full object-cover transition-transform duration-[var(--sumi-duration-normal)] group-hover:scale-105"
/> />
</div> </div>
)} )}
@ -189,7 +189,7 @@ const PostCardComponent: React.FC<PostCardProps> = ({ post }) => {
<img <img
src={post.audioTrack.coverUrl} src={post.audioTrack.coverUrl}
alt={post.audioTrack.title || 'Track cover'} alt={post.audioTrack.title || 'Track cover'}
className="w-full h-full object-cover transition-transform duration-[var(--duration-normal)] group-hover:scale-110" className="w-full h-full object-cover transition-transform duration-[var(--sumi-duration-normal)] group-hover:scale-110"
/> />
<div className="absolute inset-0 bg-background/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"> <div className="absolute inset-0 bg-background/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<Play className="w-5 h-5 text-foreground fill-current" /> <Play className="w-5 h-5 text-foreground fill-current" />

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

@ -38,14 +38,14 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
></div> ></div>
<div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden"> <div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-card flex justify-between items-center"> <div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-white">Quote Post</h3> <h3 className="font-bold text-foreground">Quote Post</h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>
<div className="p-4"> <div className="p-4">
<textarea <textarea
className="w-full bg-transparent border-none text-white placeholder-gray-500 focus:ring-0 resize-none h-24 mb-4" className="w-full bg-transparent border-none text-foreground placeholder-gray-500 focus:ring-0 resize-none h-24 mb-4"
placeholder="Add a comment..." placeholder="Add a comment..."
value={quoteText} value={quoteText}
onChange={(e) => setQuoteText(e.target.value)} onChange={(e) => setQuoteText(e.target.value)}
@ -57,7 +57,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
src={post.author.avatar} src={post.author.avatar}
className="w-5 h-5 rounded-full" className="w-5 h-5 rounded-full"
/> />
<span className="font-bold text-xs text-white"> <span className="font-bold text-xs text-foreground">
{post.author.name} {post.author.name}
</span> </span>
</div> </div>
@ -93,9 +93,9 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
></div> ></div>
<div className="relative w-full max-w-sm bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden"> <div className="relative w-full max-w-sm bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-card flex justify-between items-center"> <div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-white">Share Post</h3> <h3 className="font-bold text-foreground">Share Post</h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>
@ -111,7 +111,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
<Repeat className="w-5 h-5" /> <Repeat className="w-5 h-5" />
</div> </div>
<div className="text-left"> <div className="text-left">
<div className="text-white font-bold">Repost</div> <div className="text-foreground font-bold">Repost</div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
Instantly share with your followers Instantly share with your followers
</div> </div>
@ -126,7 +126,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
<MessageSquare className="w-5 h-5" /> <MessageSquare className="w-5 h-5" />
</div> </div>
<div className="text-left"> <div className="text-left">
<div className="text-white font-bold">Quote</div> <div className="text-foreground font-bold">Quote</div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
Repost with your own thoughts Repost with your own thoughts
</div> </div>
@ -139,11 +139,11 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group" className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
onClick={handleCopyLink} onClick={handleCopyLink}
> >
<div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground group-hover:text-white"> <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground group-hover:text-foreground">
{copied ? <Check className="w-5 h-5 text-success" /> : <Link className="w-5 h-5" />} {copied ? <Check className="w-5 h-5 text-success" /> : <Link className="w-5 h-5" />}
</div> </div>
<div className="text-left"> <div className="text-left">
<div className="text-white font-bold">{copied ? 'Copied!' : 'Copy Link'}</div> <div className="text-foreground font-bold">{copied ? 'Copied!' : 'Copy Link'}</div>
</div> </div>
</button> </button>
<button <button
@ -153,11 +153,11 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
onClose(); onClose();
}} }}
> >
<div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground group-hover:text-white"> <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground group-hover:text-foreground">
<Mail className="w-5 h-5" /> <Mail className="w-5 h-5" />
</div> </div>
<div className="text-left"> <div className="text-left">
<div className="text-white font-bold"> <div className="text-foreground font-bold">
Send via Direct Message Send via Direct Message
</div> </div>
</div> </div>

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

@ -53,7 +53,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
<div className="space-y-6 animate-fadeIn pb-20"> <div className="space-y-6 animate-fadeIn pb-20">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-border/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> <div>
<h2 className="text-3xl font-heading font-bold text-white mb-2 capitalize"> <h2 className="text-3xl font-heading font-bold text-foreground mb-2 capitalize">
{type} {type}
</h2> </h2>
<p className="text-muted-foreground font-mono text-sm"> <p className="text-muted-foreground font-mono text-sm">
@ -75,7 +75,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className={filter === 'all' ? 'text-white' : 'text-muted-foreground'} className={filter === 'all' ? 'text-foreground' : 'text-muted-foreground'}
onClick={() => setFilter('all')} onClick={() => setFilter('all')}
> >
All All
@ -83,7 +83,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className={filter === 'mutual' ? 'text-white' : 'text-muted-foreground'} className={filter === 'mutual' ? 'text-foreground' : 'text-muted-foreground'}
onClick={() => setFilter('mutual')} onClick={() => setFilter('mutual')}
> >
Mutual Mutual
@ -91,7 +91,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className={filter === 'recent' ? 'text-white' : 'text-muted-foreground'} className={filter === 'recent' ? 'text-foreground' : 'text-muted-foreground'}
onClick={() => setFilter('recent')} onClick={() => setFilter('recent')}
> >
Recent Recent

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

@ -47,11 +47,11 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
></div> ></div>
<div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden"> <div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-card flex justify-between items-center"> <div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2"> <h3 className="font-bold text-foreground flex items-center gap-2">
<Users className="w-5 h-5 text-muted-foreground" /> Create Community <Users className="w-5 h-5 text-muted-foreground" /> Create Community
</h3> </h3>
<button onClick={onClose}> <button onClick={onClose}>
<X className="w-5 h-5 text-muted-foreground hover:text-white" /> <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
</button> </button>
</div> </div>
@ -61,7 +61,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
{coverImage ? ( {coverImage ? (
<img src={coverImage} className="w-full h-full object-cover" /> <img src={coverImage} className="w-full h-full object-cover" />
) : ( ) : (
<div className="text-muted-foreground flex flex-col items-center group-hover:text-white"> <div className="text-muted-foreground flex flex-col items-center group-hover:text-foreground">
<ImageIcon className="w-8 h-8 mb-2" /> <ImageIcon className="w-8 h-8 mb-2" />
<span className="text-xs font-bold uppercase"> <span className="text-xs font-bold uppercase">
Upload Cover Image Upload Cover Image
@ -90,7 +90,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
Description Description
</label> </label>
<textarea <textarea
className="w-full bg-background border border-border rounded-lg p-4 text-white focus:border-primary outline-none text-sm resize-none h-24" className="w-full bg-background border border-border rounded-lg p-4 text-foreground focus:border-primary outline-none text-sm resize-none h-24"
placeholder="What's this community about?" placeholder="What's this community about?"
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
@ -108,7 +108,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
<Globe className="w-5 h-5 text-muted-foreground" /> <Globe className="w-5 h-5 text-muted-foreground" />
)} )}
<div> <div>
<div className="text-sm font-bold text-white"> <div className="text-sm font-bold text-foreground">
{isPrivate ? 'Private Group' : 'Public Group'} {isPrivate ? 'Private Group' : 'Public Group'}
</div> </div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">

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

@ -94,7 +94,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
<div className="space-y-6 animate-fadeIn pb-20"> <div className="space-y-6 animate-fadeIn pb-20">
<div className="flex flex-col md:flex-row justify-between items-end border-b border-border/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> <div>
<h2 className="text-3xl font-heading font-bold text-white mb-2"> <h2 className="text-3xl font-heading font-bold text-foreground mb-2">
COMMUNITIES COMMUNITIES
</h2> </h2>
<p className="text-muted-foreground font-mono text-sm"> <p className="text-muted-foreground font-mono text-sm">
@ -114,13 +114,13 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
<div className="flex bg-background rounded-lg p-1 border border-border"> <div className="flex bg-background rounded-lg p-1 border border-border">
<button <button
onClick={() => setActiveTab('my_groups')} 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-muted text-white' : 'text-muted-foreground hover:text-white'}`} className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'my_groups' ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
> >
<Users className="w-4 h-4" /> My Groups <Users className="w-4 h-4" /> My Groups
</button> </button>
<button <button
onClick={() => setActiveTab('discover')} onClick={() => setActiveTab('discover')}
className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'discover' ? 'bg-muted text-white' : 'text-muted-foreground hover:text-white'}`} className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'discover' ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
> >
<Compass className="w-4 h-4" /> Discover <Compass className="w-4 h-4" /> Discover
</button> </button>

4
apps/web/src/components/social/groups/group-detail-view/GroupDetailViewHeader.tsx
View file

@ -32,7 +32,7 @@ export function GroupDetailViewHeader({
<div className="absolute top-4 left-4"> <div className="absolute top-4 left-4">
<Button <Button
variant="ghost" variant="ghost"
className="bg-black/50 backdrop-blur text-white hover:bg-black/70" className="bg-black/50 backdrop-blur text-foreground hover:bg-black/70"
onClick={onBack} onClick={onBack}
> >
<ArrowLeft className="w-4 h-4 mr-2" /> Back <ArrowLeft className="w-4 h-4 mr-2" /> Back
@ -117,7 +117,7 @@ export function GroupDetailViewHeader({
key={tab} key={tab}
type="button" type="button"
onClick={() => onTabChange(tab)} onClick={() => onTabChange(tab)}
className={`py-4 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--duration-normal)] ${activeTab === tab ? 'text-foreground border-primary' : 'text-muted-foreground border-transparent hover:text-foreground'}`} className={`py-4 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--sumi-duration-normal)] ${activeTab === tab ? 'text-foreground border-primary' : 'text-muted-foreground border-transparent hover:text-foreground'}`}
> >
{tab} {tab}
</button> </button>

2
apps/web/src/components/social/groups/group-detail-view/GroupDetailViewMembers.tsx
View file

@ -15,7 +15,7 @@ export function GroupDetailViewMembers({
{membersList.map((member) => ( {membersList.map((member) => (
<div <div
key={member.id} key={member.id}
className="flex items-center gap-4 p-4 bg-card rounded-xl border border-border hover:border-border transition-colors duration-[var(--duration-normal)]" className="flex items-center gap-4 p-4 bg-card rounded-xl border border-border hover:border-border transition-colors duration-[var(--sumi-duration-normal)]"
> >
<img <img
src={member.avatar} src={member.avatar}

2
apps/web/src/components/studio/ai-tools-view/AIToolsViewToolGrid.tsx
View file

@ -14,7 +14,7 @@ export function AIToolsViewToolGrid({ activeTool, onSelectTool }: AIToolsViewToo
key={tool.id} key={tool.id}
type="button" type="button"
onClick={() => onSelectTool(tool.id)} onClick={() => onSelectTool(tool.id)}
className={`p-4 rounded-xl border text-left transition-all duration-[var(--duration-normal)] group ${activeTool === tool.id ? 'bg-primary/10 border-primary' : 'bg-muted border-border hover:bg-muted/80'}`} className={`p-4 rounded-xl border text-left transition-all duration-[var(--sumi-duration-normal)] group ${activeTool === tool.id ? 'bg-primary/10 border-primary' : 'bg-muted border-border hover:bg-muted/80'}`}
> >
<div <div
className={`w-10 h-10 rounded-lg flex items-center justify-center mb-3 ${activeTool === tool.id ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground group-hover:text-foreground'}`} className={`w-10 h-10 rounded-lg flex items-center justify-center mb-3 ${activeTool === tool.id ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground group-hover:text-foreground'}`}

2
apps/web/src/components/studio/ai-tools-view/AIToolsViewWorkspace.tsx
View file

@ -65,7 +65,7 @@ export function AIToolsViewWorkspace({
{result.outputs.map((file, i) => ( {result.outputs.map((file, i) => (
<div <div
key={i} key={i}
className="flex items-center justify-between p-4 bg-card rounded-xl border border-border hover:border-border transition-colors duration-[var(--duration-normal)]" className="flex items-center justify-between p-4 bg-card rounded-xl border border-border hover:border-border transition-colors duration-[var(--sumi-duration-normal)]"
> >
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Music className="w-5 h-5 text-muted-foreground" /> <Music className="w-5 h-5 text-muted-foreground" />

4
apps/web/src/components/studio/cloud-settings-view/CloudSettingsViewPreferences.tsx
View file

@ -29,7 +29,7 @@ export function CloudSettingsViewPreferences({
<Clock className="w-4 h-4" /> Trash Retention Policy <Clock className="w-4 h-4" /> Trash Retention Policy
</label> </label>
<select <select
className="w-full bg-muted border border-border rounded-xl p-4 text-foreground outline-none focus:border-primary transition-colors duration-[var(--duration-normal)]" className="w-full bg-muted border border-border rounded-xl p-4 text-foreground outline-none focus:border-primary transition-colors duration-[var(--sumi-duration-normal)]"
value={retention} value={retention}
onChange={(e) => onRetentionChange(e.target.value as RetentionValue)} onChange={(e) => onRetentionChange(e.target.value as RetentionValue)}
> >
@ -49,7 +49,7 @@ export function CloudSettingsViewPreferences({
<MapPin className="w-4 h-4" /> Storage Region <MapPin className="w-4 h-4" /> Storage Region
</label> </label>
<select <select
className="w-full bg-muted border border-border rounded-xl p-4 text-foreground outline-none focus:border-primary transition-colors duration-[var(--duration-normal)]" className="w-full bg-muted border border-border rounded-xl p-4 text-foreground outline-none focus:border-primary transition-colors duration-[var(--sumi-duration-normal)]"
value={region} value={region}
onChange={(e) => onRegionChange(e.target.value as RegionValue)} onChange={(e) => onRegionChange(e.target.value as RegionValue)}
> >

Some files were not shown because too many files have changed in this diff Show more