feat: Polish dialog, popover shadows & borders, add missing provider logos (anomalyco#7326)

Author: aaroniker

packages/ui/src/assets/icons/provider/abacus.svg

@@ -43,14 +43,15 @@
 
       /* padding: 8px; */
       /* padding: 8px 8px 0 8px; */
-      border: 1px solid hsl(from var(--border-base) h s l / 0.2);
+      border: 1px solid
+        light-dark(
+          color-mix(in oklch, var(--border-base) 30%, transparent),
+          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 0 rgba(19, 16, 16, 0.35),
-        0 3.35px 10.051px 0 rgba(19, 16, 16, 0.25),
-        0 0.998px 2.993px 0 rgba(19, 16, 16, 0.2);
+      box-shadow: var(--shadow-lg);
 
       /* animation: contentHide 300ms ease-in forwards; */
       /**/

packages/ui/src/assets/icons/provider/friendli.svg

@@ -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/assets/icons/provider/nano-gpt.svg

@@ -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/components/dialog.css

@@ -31,6 +31,7 @@ export const iconNames = [
   "ollama-cloud",
   "nvidia",
   "nebius",
+  "nano-gpt",
   "morph",
   "moonshotai",
   "moonshotai-cn",
@@ -54,6 +55,7 @@ export const iconNames = [
   "google-vertex-anthropic",
   "github-models",
   "github-copilot",
+  "friendli",
   "fireworks-ai",
   "fastrouter",
   "deepseek",
@@ -73,6 +75,7 @@ export const iconNames = [
   "alibaba",
   "alibaba-cn",
   "aihubmix",
+  "abacus",
 ] as const
 
 export type IconName = (typeof iconNames)[number]

packages/ui/src/components/dropdown-menu.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.05), hsl(0 0% 0% / 0.15)),
+    0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.025), 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);