From 430babf84044b32ea2b6e80fe3724a880fcc098b Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Tue, 20 Jan 2026 15:33:10 +0100
Subject: [PATCH] [dyad] Added hierarchical backgrounds to schema - wrote 1
 file(s)

---
 src/components/pretty-schema-display.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/pretty-schema-display.tsx b/src/components/pretty-schema-display.tsx
index 24df9b8..33e0d45 100644
--- a/src/components/pretty-schema-display.tsx
+++ b/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>
     );