From 47d8100d74d9f9140e7add4d4eb6bd7db4880a8a Mon Sep 17 00:00:00 2001
From: senke <okin.tcs@gmail.com>
Date: Sat, 7 Feb 2026 15:08:52 +0100
Subject: [PATCH] style(ui): elevate Dialog to SaaS Premium

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/components/ui/Dialog.stories.tsx  |  6 +++---
 apps/web/src/components/ui/dialog.test.tsx     |  4 ++--
 apps/web/src/components/ui/dialog/Dialog.tsx   |  6 +++---
 .../src/components/ui/dialog/DialogBody.tsx    |  2 +-
 .../components/ui/dialog/DialogDescription.tsx |  2 +-
 .../src/components/ui/dialog/DialogFooter.tsx  |  2 +-
 .../src/components/ui/dialog/DialogHeader.tsx  |  2 +-
 .../components/ui/dialog/DialogSkeleton.tsx    | 18 +++++++++---------
 8 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/components/ui/Dialog.stories.tsx b/apps/web/src/components/ui/Dialog.stories.tsx
index 8fc97feab..297e57942 100644
--- a/apps/web/src/components/ui/Dialog.stories.tsx
+++ b/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>
diff --git a/apps/web/src/components/ui/dialog.test.tsx b/apps/web/src/components/ui/dialog.test.tsx
index dc836375d..eee238ce2 100644
--- a/apps/web/src/components/ui/dialog.test.tsx
+++ b/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
-    expect(buttonElement?.className).toMatch(/text-kodo-red|bg-kodo-red/);
+    // Design: destructive variant uses text-destructive / bg-destructive
+    expect(buttonElement?.className).toMatch(/text-destructive|bg-destructive/);
   });
 
   it('uses custom confirm and cancel labels', () => {
diff --git a/apps/web/src/components/ui/dialog/Dialog.tsx b/apps/web/src/components/ui/dialog/Dialog.tsx
index 1574e648e..55ab5996b 100644
--- a/apps/web/src/components/ui/dialog/Dialog.tsx
+++ b/apps/web/src/components/ui/dialog/Dialog.tsx
@@ -15,9 +15,9 @@ const variantIcons: Record<
 };
 
 const variantStyles: Record<DialogVariant, string> = {
-  alert: 'text-kodo-red',
-  confirm: 'text-kodo-cyan',
-  info: 'text-kodo-steel',
+  alert: 'text-destructive',
+  confirm: 'text-primary',
+  info: 'text-muted-foreground',
   default: '',
 };
 
diff --git a/apps/web/src/components/ui/dialog/DialogBody.tsx b/apps/web/src/components/ui/dialog/DialogBody.tsx
index 13533d6df..2ba7b0a43 100644
--- a/apps/web/src/components/ui/dialog/DialogBody.tsx
+++ b/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>
diff --git a/apps/web/src/components/ui/dialog/DialogDescription.tsx b/apps/web/src/components/ui/dialog/DialogDescription.tsx
index 7c32c8666..2eeffcdcf 100644
--- a/apps/web/src/components/ui/dialog/DialogDescription.tsx
+++ b/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>
   );
 }
diff --git a/apps/web/src/components/ui/dialog/DialogFooter.tsx b/apps/web/src/components/ui/dialog/DialogFooter.tsx
index 7e17c1f50..e046961a1 100644
--- a/apps/web/src/components/ui/dialog/DialogFooter.tsx
+++ b/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,
       )}
     >
diff --git a/apps/web/src/components/ui/dialog/DialogHeader.tsx b/apps/web/src/components/ui/dialog/DialogHeader.tsx
index ec9363db6..6349b82d3 100644
--- a/apps/web/src/components/ui/dialog/DialogHeader.tsx
+++ b/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,
       )}
     >
diff --git a/apps/web/src/components/ui/dialog/DialogSkeleton.tsx b/apps/web/src/components/ui/dialog/DialogSkeleton.tsx
index 8a06b9cbc..315564054 100644
--- a/apps/web/src/components/ui/dialog/DialogSkeleton.tsx
+++ b/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="h-8 w-2/3 max-w-md rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
+      <div className="p-8 border-b border-border">
+        <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-3/4 rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 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-full rounded bg-muted animate-pulse" />
+        <div className="h-4 w-3/4 rounded bg-muted 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="h-10 w-24 rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
-        <div className="h-10 w-24 rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
+      <div className="flex justify-end gap-2 p-8 border-t border-border">
+        <div className="h-10 w-24 rounded bg-muted 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>