From 78f3810776ed31c2df31e1cc996eb1047b4a815a Mon Sep 17 00:00:00 2001
From: Aaron Iker <aaron@ease.dev>
Date: Thu, 8 Jan 2026 13:13:00 +0100
Subject: [PATCH] feat: improve shadows, borders

---
 packages/ui/src/components/dialog.css        |  7 ++-----
 packages/ui/src/components/dropdown-menu.css |  3 ++-
 packages/ui/src/components/popover.css       |  5 ++++-
 packages/ui/src/styles/theme.css             | 12 ++++++++++--
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css
index 64b4500369..aad1cc988b 100644
--- a/packages/ui/src/components/dialog.css
+++ b/packages/ui/src/components/dialog.css
@@ -43,14 +43,11 @@
 
       /* padding: 8px; */
       /* padding: 8px 8px 0 8px; */
-      border: 1px solid color-mix(in oklch, var(--border-base) 25%, transparent);
+      border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
       border-radius: var(--radius-xl);
       background: var(--surface-raised-stronger-non-alpha);
       background-clip: padding-box;
-      box-shadow:
-        0 15px 45px light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.1)),
-        0 4px 12px light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.1)),
-        0 1px 3px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1));
+      box-shadow: var(--shadow-lg);
 
       /* animation: contentHide 300ms ease-in forwards; */
       /**/
diff --git a/packages/ui/src/components/dropdown-menu.css b/packages/ui/src/components/dropdown-menu.css
index 710ff2ddc2..d2dc03c500 100644
--- a/packages/ui/src/components/dropdown-menu.css
+++ b/packages/ui/src/components/dropdown-menu.css
@@ -3,7 +3,8 @@
   min-width: 8rem;
   overflow: hidden;
   border-radius: var(--radius-md);
-  border: 1px solid var(--border-weak-base);
+  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+  background-clip: padding-box;
   background-color: var(--surface-raised-stronger-non-alpha);
   padding: 4px;
   box-shadow: var(--shadow-md);
diff --git a/packages/ui/src/components/popover.css b/packages/ui/src/components/popover.css
index 74d7f5a394..b49542afd9 100644
--- a/packages/ui/src/components/popover.css
+++ b/packages/ui/src/components/popover.css
@@ -7,9 +7,12 @@
   min-width: 200px;
   max-width: 320px;
   border-radius: var(--radius-md);
-  border: 1px solid var(--border-weak-base);
   background-color: var(--surface-raised-stronger-non-alpha);
+
+  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+  background-clip: padding-box;
   box-shadow: var(--shadow-md);
+
   transform-origin: var(--kb-popover-content-transform-origin);
 
   &:focus-within {
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 1b919c0ac4..abb6b94bbf 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -47,9 +47,17 @@
   --radius-xl: 0.625rem;
 
   --shadow-xs:
-    0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+    0 1px 2px -0.5px light-dark(hsl(0 0% 0% / 0.04), hsl(0 0% 0% / 0.06)),
+    0 0.5px 1.5px 0 light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.08)),
+    0 1px 3px 0 light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.1));
   --shadow-md:
-    0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
+    0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.1)),
+    0 4px 8px -2px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.15)),
+    0 1px 2px light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 0% / 0.15));
+  --shadow-lg:
+    0 16px 48px -6px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.15)),
+    0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.1)),
+    0 1px 2.5px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1));
   --shadow-xs-border:
     0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
     0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);