Extend skin-aware styles across the component library

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

@@ -3,7 +3,8 @@ import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const checkboxVariants = cva(
   [
-    "inline-flex size-5 shrink-0 items-center justify-center rounded-[calc(var(--radius-sm)-4px)] border border-[var(--color-border-strong)] bg-[var(--color-card)] shadow-[var(--shadow-xs)] outline-none",
+    "inline-flex size-5 shrink-0 items-center justify-center rounded-[var(--ui-control-radius)] border bg-[var(--ui-control-bg)] shadow-[var(--ui-control-shadow)] outline-none",
+    "[border-width:var(--ui-input-border-width)] border-[var(--ui-control-border)]",
     "text-[var(--color-primary-foreground)] transition-[background-color,border-color,box-shadow,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
     "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
     "data-[state=checked]:border-[var(--color-primary)] data-[state=checked]:bg-[var(--color-primary)]",