style(ui): elevate Dialog to SaaS Premium

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/ui/Dialog.stories.tsx

@@ -46,7 +46,7 @@ export const Default: Story = {
                     title="Edit Profile"
                 >
                     <div className="py-4">
-                        <p className="text-sm text-kodo-content-dim">
+                        <p className="text-sm text-muted-foreground">
                             Make changes to your profile here. Click save when you're done.
                         </p>
                     </div>
@@ -79,7 +79,7 @@ export const Alert: Story = {
                     onConfirm={() => setOpen(false)}
                     confirmLabel="Delete Account"
                 >
-                    <p className="text-sm text-kodo-content-dim">
+                    <p className="text-sm text-muted-foreground">
                         This action cannot be undone. This will permanently delete your account and remove your data from our servers.
                     </p>
                 </Dialog>
@@ -96,7 +96,7 @@ export const Composition: Story = {
         <Button onClick={() => setOpen(true)}>Open Composed Dialog</Button>
         {open && (
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-            <div className="bg-kodo-ink border border-kodo-steel rounded-lg max-w-md w-full">
+            <div className="bg-card border border-border rounded-xl max-w-md w-full">
               <DialogHeader>
                 <DialogTitle>Composed Dialog</DialogTitle>
                 <DialogDescription>

apps/web/src/components/ui/dialog.test.tsx

@@ -197,8 +197,8 @@ describe('Dialog Component', () => {
 
     const confirmButton = screen.getByText('Confirm');
     const buttonElement = confirmButton.closest('button');
-    // Kodo design: destructive variant uses text-kodo-red / bg-kodo-red
+    // Design: destructive variant uses text-destructive / bg-destructive
-    expect(buttonElement?.className).toMatch(/text-kodo-red|bg-kodo-red/);
+    expect(buttonElement?.className).toMatch(/text-destructive|bg-destructive/);
   });
 
   it('uses custom confirm and cancel labels', () => {

apps/web/src/components/ui/dialog/Dialog.tsx

@@ -15,9 +15,9 @@ const variantIcons: Record<
 };
 
 const variantStyles: Record<DialogVariant, string> = {
-  alert: 'text-kodo-red',
+  alert: 'text-destructive',
-  confirm: 'text-kodo-cyan',
+  confirm: 'text-primary',
-  info: 'text-kodo-steel',
+  info: 'text-muted-foreground',
   default: '',
 };
 

apps/web/src/components/ui/dialog/DialogBody.tsx

@@ -8,7 +8,7 @@ export function DialogBody({
 }: DialogBodyProps) {
   return (
     <div
-      className={cn('p-8', variant === 'alert' && 'text-kodo-red', className)}
+      className={cn('p-8', variant === 'alert' && 'text-destructive', className)}
     >
       {children}
     </div>

apps/web/src/components/ui/dialog/DialogDescription.tsx

@@ -6,6 +6,6 @@ export function DialogDescription({
   className,
 }: DialogDescriptionProps) {
   return (
-    <p className={cn('text-sm text-kodo-content-dim', className)}>{children}</p>
+    <p className={cn('text-sm text-muted-foreground', className)}>{children}</p>
   );
 }

apps/web/src/components/ui/dialog/DialogFooter.tsx

@@ -5,7 +5,7 @@ export function DialogFooter({ children, className }: DialogFooterProps) {
   return (
     <div
       className={cn(
-        'flex items-center justify-end gap-2 p-8 border-t border-kodo-steel',
+        'flex items-center justify-end gap-2 p-8 border-t border-border',
         className,
       )}
     >

apps/web/src/components/ui/dialog/DialogHeader.tsx

@@ -8,7 +8,7 @@ export function DialogHeader({
   return (
     <div
       className={cn(
-        'flex items-center justify-between p-8 border-b border-kodo-steel',
+        'flex items-center justify-between p-8 border-b border-border',
         className,
       )}
     >

apps/web/src/components/ui/dialog/DialogSkeleton.tsx

@@ -13,24 +13,24 @@ export function DialogSkeleton({ className }: DialogSkeletonProps) {
   return (
     <div
       className={cn(
-        'rounded-lg border border-kodo-steel bg-kodo-graphite dark:bg-kodo-ink',
+        'rounded-xl border border-border bg-card',
         'min-h-layout-story',
         className,
       )}
       role="status"
       aria-label="Chargement du dialogue"
     >
-      <div className="p-8 border-b border-kodo-steel">
+      <div className="p-8 border-b border-border">
-        <div className="h-8 w-2/3 max-w-md rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
+        <div className="h-8 w-2/3 max-w-md rounded bg-muted animate-pulse" />
       </div>
       <div className="p-8 space-y-2">
-        <div className="h-4 w-full rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
+        <div className="h-4 w-full rounded bg-muted animate-pulse" />
-        <div className="h-4 w-3/4 rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
+        <div className="h-4 w-3/4 rounded bg-muted animate-pulse" />
-        <div className="h-4 w-1/2 rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
+        <div className="h-4 w-1/2 rounded bg-muted animate-pulse" />
       </div>
-      <div className="flex justify-end gap-2 p-8 border-t border-kodo-steel">
+      <div className="flex justify-end gap-2 p-8 border-t border-border">
-        <div className="h-10 w-24 rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
+        <div className="h-10 w-24 rounded bg-muted animate-pulse" />
-        <div className="h-10 w-24 rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
+        <div className="h-10 w-24 rounded bg-muted animate-pulse" />
       </div>
       <span className="sr-only">Chargement du dialogue en cours...</span>
     </div>