Extend skin-aware styles across the component library

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

@@ -3,7 +3,7 @@ import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const badgeVariants = cva(
   [
-    "inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-[var(--radius-full)] border font-medium",
+    "inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-[var(--ui-control-radius)] border font-medium [border-width:var(--ui-input-border-width)]",
     "outline-none select-none",
     getMotionRecipeClassNames("transition", "ring")
   ],
@@ -15,11 +15,11 @@ export const badgeVariants = cva(
       },
       variant: {
         subtle:
-          "border-[var(--color-border)] bg-[var(--color-card)] text-[var(--color-foreground)]",
+          "border-[var(--ui-control-border)] bg-[var(--ui-control-bg)] text-[var(--color-foreground)] shadow-[var(--ui-control-shadow)]",
         solid:
           "border-transparent bg-[var(--color-foreground)] text-[var(--color-background)]",
         outline:
-          "border-[var(--color-border-strong)] bg-transparent text-[var(--color-foreground)]"
+          "border-[var(--ui-control-border)] bg-transparent text-[var(--color-foreground)]"
       },
       tone: {
         neutral: "",