Extend skin-aware styles across the component library

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

@@ -6,7 +6,8 @@ export const sheetOverlayVariants = dialogOverlayVariants;
 export const sheetContentVariants = cva(
   [
     "fixed z-50 grid gap-5 overflow-y-auto",
-    "border bg-[var(--color-card)] text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
+    "border bg-[var(--ui-panel-bg)] text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] outline-none",
+    "[border-width:var(--ui-panel-border-width)] border-[var(--ui-panel-border)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
     "px-5 py-6 sm:px-6",
     "transition-[transform,opacity,box-shadow] duration-[var(--dur-slow)] ease-[var(--ease-emphasized)]",
     "data-[state=open]:opacity-100 data-[state=closed]:opacity-0"
@@ -15,16 +16,16 @@ export const sheetContentVariants = cva(
     variants: {
       side: {
         right: [
-          "inset-y-0 right-0 h-full rounded-l-[var(--radius-lg)] border-l border-y-0 border-r-0",
+          "inset-y-0 right-0 h-full rounded-l-[var(--ui-panel-radius)] border-l border-y-0 border-r-0",
           "data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full"
         ],
         left: [
-          "inset-y-0 left-0 h-full rounded-r-[var(--radius-lg)] border-r border-y-0 border-l-0",
+          "inset-y-0 left-0 h-full rounded-r-[var(--ui-panel-radius)] border-r border-y-0 border-l-0",
           "data-[state=open]:translate-x-0 data-[state=closed]:-translate-x-full"
         ],
         bottom: [
           "bottom-0 left-1/2 max-h-[min(85vh,42rem)] w-[min(calc(100vw-1rem),52rem)] -translate-x-1/2",
-          "rounded-t-[var(--radius-lg)] border-b-0",
+          "rounded-t-[var(--ui-panel-radius)] border-b-0",
           "data-[state=open]:translate-y-0 data-[state=closed]:translate-y-full"
         ]
       },