Extract pilot skin-aware component recipes

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

@@ -3,22 +3,23 @@ import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const cardVariants = cva(
   [
-    "rounded-[var(--radius-lg)] border text-[var(--color-card-foreground)]",
-    "bg-[var(--color-card)] shadow-[var(--shadow-sm)]",
+    "rounded-[var(--ui-card-radius)] border text-[var(--color-card-foreground)]",
+    "bg-[var(--ui-card-bg)] shadow-[var(--ui-card-shadow)] [border-width:var(--ui-card-border-width)]",
     getMotionRecipeClassNames("transition", "ring")
   ],
   {
     variants: {
       tone: {
-        default: "border-[var(--color-border)]",
+        default:
+          "border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)] shadow-[var(--ui-card-default-shadow)]",
         subtle:
-          "border-[color-mix(in_oklch,var(--color-border)_86%,transparent)] bg-[var(--color-surface)] shadow-[var(--shadow-xs)]",
+          "border-[var(--ui-card-subtle-border)] bg-[var(--ui-card-subtle-bg)] shadow-[var(--ui-card-subtle-shadow)]",
         accent:
-          "border-[color-mix(in_oklch,var(--color-primary)_26%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-primary)_8%,var(--color-card))]"
+          "border-[var(--ui-card-accent-border)] bg-[var(--ui-card-accent-bg)] shadow-[var(--ui-card-accent-shadow)]"
       },
       interactive: {
         false: "",
-        true: "hover:-translate-y-[2px] hover:shadow-[var(--shadow-md)]"
+        true: "hover:translate-y-[var(--ui-card-hover-translate)] hover:shadow-[var(--ui-card-hover-shadow)]"
       }
     },
     defaultVariants: {