Refine global card system

components/ui/app-card.tsx

@@ -5,29 +5,78 @@ import { Card } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 
 const appCardVariants = cva(
-  "rounded-surface transition-colors",
+  "rounded-surface border p-2.5 transition-colors",
+  {
+  variants: {
+    level: {
+      1: "border-border/80 bg-surface-2 text-card-foreground shadow-card",
+      2: "border-border/80 bg-surface-2 text-foreground shadow-xs",
+      3: "border-border/80 bg-surface-2 text-foreground shadow-panel",
+      inverse: "border-transparent bg-foreground/92 text-background shadow-card",
+    },
+    interactive: {
+      true: "hover:bg-accent/30 hover:text-accent-foreground",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    level: 1,
+    interactive: false,
+  },
+});
+
+const appCardInnerVariants = cva(
+  "h-full rounded-nested border p-4 transition-colors",
+  {
+  variants: {
+    level: {
+      1: "border-border/70 bg-background dark:bg-surface-1",
+      2: "border-border/70 bg-background dark:bg-surface-1",
+      3: "border-border/70 bg-background dark:bg-surface-1",
+      inverse: "border border-background/10 bg-background/10 text-inherit",
+    },
+    padding: {
+      none: "p-0",
+      sm: "p-4",
+      md: "p-6",
+      lg: "p-8",
+    },
+    interactive: {
+      true: "hover:bg-accent/40 hover:text-accent-foreground",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    level: 1,
+    padding: "sm",
+    interactive: false,
+  },
+});
+
+const appCardSingleLayerVariants = cva(
+  "rounded-nested border transition-colors",
   {
     variants: {
       level: {
-        1: "border border-border/80 bg-card text-card-foreground shadow-card",
-        2: "border border-input bg-background text-foreground shadow-xs",
-        3: "border border-border/80 bg-surface-2 text-foreground shadow-panel",
-        inverse: "border-transparent bg-foreground text-background shadow-card",
+        1: "border-border/70 bg-background dark:bg-surface-1",
+        2: "border-border/70 bg-background dark:bg-surface-1",
+        3: "border-border/70 bg-background dark:bg-surface-1",
+        inverse: "border border-background/10 bg-background/10 text-inherit",
       },
       padding: {
-        none: "",
+        none: "p-0",
         sm: "p-4",
         md: "p-6",
         lg: "p-8",
       },
       interactive: {
-        true: "hover:bg-accent/30 hover:text-accent-foreground",
+        true: "hover:bg-accent/40 hover:text-accent-foreground",
         false: "",
       },
     },
     defaultVariants: {
       level: 1,
-      padding: "none",
+      padding: "sm",
       interactive: false,
     },
   },
@@ -35,23 +84,58 @@ const appCardVariants = cva(
 
 export interface AppCardProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof appCardVariants> {}
+    VariantProps<typeof appCardVariants>,
+    VariantProps<typeof appCardInnerVariants> {
+  layer?: "double" | "single";
+}
 
 const AppCard = React.forwardRef<HTMLDivElement, AppCardProps>(
-  ({ className, level, padding, interactive, ...props }, ref) => (
-    <Card
-      ref={ref}
-      className={cn(
-        appCardVariants({
-          level,
-          padding,
-          interactive,
-        }),
-        className,
-      )}
-      {...props}
-    />
-  ),
+  ({ className, level, padding, interactive, layer = "double", children, ...props }, ref) => {
+    if (layer === "single") {
+      return (
+        <Card
+          ref={ref}
+          className={cn(
+            appCardSingleLayerVariants({
+              level,
+              padding,
+              interactive,
+            }),
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </Card>
+      );
+    }
+
+    return (
+      <Card
+        ref={ref}
+        className={cn(
+          appCardVariants({
+            level,
+            interactive,
+          }),
+          className,
+        )}
+        {...props}
+      >
+        <div
+          className={cn(
+            appCardInnerVariants({
+              level,
+              padding,
+              interactive,
+            }),
+          )}
+        >
+          {children}
+        </div>
+      </Card>
+    );
+  },
 );
 
 AppCard.displayName = "AppCard";