Extract pilot skin-aware component recipes

packages/ui/src/components/skeleton.tsx

@@ -6,21 +6,20 @@ import { createDataAttributes, createSlot } from "../lib/contracts";
 
 const skeletonVariants = cva(
   [
-    "relative overflow-hidden rounded-[var(--radius-sm)] bg-[color-mix(in_oklch,var(--color-surface)_74%,var(--color-border))]",
-    "before:absolute before:inset-0 before:bg-[linear-gradient(110deg,transparent_0%,rgba(255,255,255,0.48)_42%,transparent_72%)] before:opacity-70 before:content-[''] before:animate-[aiui-skeleton-shimmer_1.8s_var(--ease-standard)_infinite]"
+    "relative overflow-hidden rounded-[var(--ui-skeleton-radius)] bg-[var(--ui-skeleton-bg)]",
+    "before:absolute before:inset-0 before:bg-[var(--ui-skeleton-gradient)] before:opacity-70 before:content-[''] before:animate-[aiui-skeleton-shimmer_1.8s_var(--ease-standard)_infinite]"
   ],
   {
     variants: {
       shape: {
         line: "h-4 w-full",
-        block: "h-24 w-full rounded-[var(--radius-md)]",
-        pill: "h-10 w-32 rounded-[var(--radius-full)]",
-        avatar: "size-12 rounded-[var(--radius-full)]"
+        block: "h-24 w-full rounded-[var(--ui-skeleton-block-radius)]",
+        pill: "h-10 w-32 rounded-[var(--ui-skeleton-pill-radius)]",
+        avatar: "size-12 rounded-[var(--ui-skeleton-avatar-radius)]"
       },
       tone: {
-        default:
-          "bg-[color-mix(in_oklch,var(--color-surface)_74%,var(--color-border))]",
-        muted: "bg-[var(--color-muted)]"
+        default: "bg-[var(--ui-skeleton-bg)]",
+        muted: "bg-[var(--ui-skeleton-muted-bg)]"
       }
     },
     defaultVariants: {