Extract pilot skin-aware component recipes

packages/ui/src/components/dialog.variants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../lib/cva";
 
 export const dialogOverlayVariants = cva([
-  "fixed inset-0 z-50 bg-[var(--color-overlay)] backdrop-blur-[2px]",
+  "fixed inset-0 z-50 bg-[var(--ui-panel-overlay-bg)] backdrop-blur-[var(--ui-panel-overlay-blur)]",
   "data-[state=open]:motion-overlay-enter data-[state=closed]:motion-overlay-exit"
 ]);
 
@@ -9,7 +9,8 @@ export const dialogContentVariants = cva(
   [
     "fixed left-1/2 top-1/2 z-50 grid -translate-x-1/2 -translate-y-1/2 gap-5",
     "w-[min(calc(100vw-2rem),40rem)] max-h-[calc(100vh-2rem)] overflow-y-auto",
-    "rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-6 text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
+    "rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)] bg-[var(--ui-panel-bg)] p-6 text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] outline-none",
+    "[border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
     "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop"
   ],
   {