[dyad] Added hierarchical backgrounds to schema - wrote 1 file(s)

src/components/pretty-schema-display.tsx

@@ -138,6 +138,19 @@ const SchemaObjectRenderer = ({
     level > 0 ? "md:grid-cols-[10rem_1fr]" : "md:grid-cols-[12rem_1fr]";
   const paddingClasses = level > 1 ? "p-3" : "p-4";
 
+  const backgroundShades = [
+    // level 1
+    "bg-foreground/[0.04] dark:bg-foreground/[0.04]",
+    // level 2
+    "bg-foreground/[0.03] dark:bg-foreground/[0.06]",
+    // level 3+
+    "bg-foreground/[0.02] dark:bg-foreground/[0.08]",
+  ];
+
+  const backgroundClass = isNested
+    ? backgroundShades[Math.min(level - 1, backgroundShades.length - 1)]
+    : "";
+
   const content = (
     <div
       className={`inline-grid grid-cols-1 ${gridClasses} items-start gap-x-4 gap-y-4`}
@@ -214,7 +227,7 @@ const SchemaObjectRenderer = ({
 
   if (isNested) {
     return (
-      <div className={`${paddingClasses} border rounded-lg bg-muted/50`}>
+      <div className={`${paddingClasses} border rounded-lg ${backgroundClass}`}>
         {content}
       </div>
     );