feat: improve shadows, borders

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; */
       /**/

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);

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 {

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);