feat: border, shadow improvements dialog

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

@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.93433 9.57807C6.93433 8.92952 7.46008 8.40376 8.10864 8.40376C8.75719 8.40376 9.28295 8.92952 9.28295 9.57807V16.6239C9.28295 17.2725 8.75719 17.7983 8.10864 17.7983C7.46008 17.7983 6.93433 17.2725 6.93433 16.6239V9.57807Z" />
+  <path d="M30.7144 25.1377C30.7144 24.4891 31.2402 23.9634 31.8887 23.9634C32.5373 23.9634 33.063 24.4891 33.063 25.1377V31.0092C33.063 31.6578 32.5373 32.1836 31.8887 32.1836C31.2402 32.1836 30.7144 31.6578 30.7144 31.0093V25.1377Z" />
+  <path d="M22.7875 30.422C22.7875 29.7735 23.3132 29.2477 23.9618 29.2477C24.6103 29.2477 25.1361 29.7735 25.1361 30.422V34.8257C25.1361 35.4742 24.6103 36 23.9618 36C23.3132 36 22.7875 35.4742 22.7875 34.8257V30.422Z" />
+  <path d="M6.93433 28.367C6.93433 27.7185 7.46008 27.1927 8.10864 27.1927C8.75719 27.1927 9.28295 27.7185 9.28295 28.367V31.5964C9.28295 32.245 8.75719 32.7707 8.10864 32.7707C7.46008 32.7707 6.93433 32.245 6.93433 31.5964V28.367Z" />
+  <path d="M14.8617 5.46787C14.8617 4.81931 15.3874 4.29355 16.036 4.29355C16.6845 4.29355 17.2103 4.81931 17.2103 5.46787V9.87153C17.2103 10.5201 16.6845 11.0458 16.036 11.0458C15.3874 11.0458 14.8617 10.5201 14.8617 9.87153V5.46787Z" />
+  <path d="M30.7144 9.28437C30.7144 8.63582 31.2402 8.11006 31.8887 8.11006C32.5373 8.11006 33.063 8.63582 33.063 9.28437V13.688C33.063 14.3366 32.5373 14.8623 31.8887 14.8623C31.2402 14.8623 30.7144 14.3366 30.7144 13.688V9.28437Z" />
+  <path d="M22.7875 5.17431C22.7875 4.52576 23.3132 4 23.9618 4C24.6103 4 25.1361 4.52576 25.1361 5.17431V18.3853C25.1361 19.0339 24.6103 19.5596 23.9618 19.5596C23.3132 19.5596 22.7875 19.0339 22.7875 18.3853V5.17431Z" />
+  <path d="M14.8617 21.3212C14.8617 20.6726 15.3874 20.1469 16.036 20.1469C16.6845 20.1469 17.2103 20.6726 17.2103 21.3212V34.5322C17.2103 35.1807 16.6845 35.7065 16.036 35.7065C15.3874 35.7065 14.8617 35.1807 14.8617 34.5322V21.3212Z" />
+  <path d="M10.4577 21.9083C10.4577 23.2055 9.40623 24.257 8.10912 24.257C6.81201 24.257 5.7605 23.2055 5.7605 21.9083C5.7605 20.6112 6.81201 19.5597 8.10912 19.5597C9.40623 19.5597 10.4577 20.6112 10.4577 21.9083Z" />
+  <path d="M18.3843 14.8624C18.3843 16.1596 17.3328 17.2111 16.0357 17.2111C14.7386 17.2111 13.6871 16.1596 13.6871 14.8624C13.6871 13.5653 14.7386 12.5138 16.0357 12.5138C17.3328 12.5138 18.3843 13.5653 18.3843 14.8624Z" />
+  <path d="M26.3101 24.2569C26.3101 25.554 25.2586 26.6056 23.9615 26.6056C22.6644 26.6056 21.6128 25.554 21.6128 24.2569C21.6128 22.9598 22.6644 21.9083 23.9615 21.9083C25.2586 21.9083 26.3101 22.9598 26.3101 24.2569Z" />
+  <path d="M34.2378 19.5597C34.2378 20.8568 33.1863 21.9083 31.8892 21.9083C30.5921 21.9083 29.5406 20.8568 29.5406 19.5597C29.5406 18.2626 30.5921 17.2111 31.8892 17.2111C33.1863 17.2111 34.2378 18.2626 34.2378 19.5597Z" />
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.1484 16.5153V16.5238C14.5325 17.3971 14.4945 18.6923 14.5114 19.3925V21.4091C14.5114 22.7379 13.4272 23.8221 12.1067 23.8221H9.24219C7.91327 23.8221 6.8375 22.7423 6.8375 21.4091V18.5952C6.8375 17.262 7.91327 16.182 9.24219 16.182H10.9339C11.2376 16.182 11.9717 16.1694 12.2923 16.1061C12.5666 16.0513 13.4525 15.853 14.2963 15.2201C14.3891 15.1526 14.4734 15.0852 14.5451 15.0219C14.5451 15.0219 14.7392 14.8574 14.9122 14.6759C15.3889 14.1824 15.7559 13.4778 15.7559 13.4778C15.8741 13.2584 16.1441 12.7016 16.3044 11.9295C16.3803 11.5541 16.4141 11.2039 16.4394 10.917L16.528 9.24219C16.528 7.91327 17.6079 6.83329 18.9369 6.83329H21.7339C23.0629 6.83329 24.1427 7.91327 24.1427 9.24219V12.0603C24.1427 13.3892 23.0629 14.4692 21.7339 14.4692H19.4346C18.9073 14.4819 18.4686 14.5367 18.1438 14.5958C17.5489 14.7055 17.2409 14.832 17.1481 14.87M10.6428 14.8109C8.35625 14.8109 6.5 12.9505 6.5 10.6555C6.5 8.36046 8.35625 6.5 10.6428 6.5C12.9294 6.5 14.7856 8.36046 14.7856 10.6555C14.7856 12.9505 12.9294 14.8109 10.6428 14.8109ZM10.6428 25.1891C12.9294 25.1891 14.7856 27.0496 14.7856 29.3446C14.7856 31.6396 12.9294 33.5 10.6428 33.5C8.35625 33.5 6.5 31.6396 6.5 29.3446C6.5 27.0496 8.35625 25.1891 10.6428 25.1891ZM33.5 12.1405C33.5 13.4272 32.4538 14.4734 31.1671 14.4734C30.4963 14.4355 29.9352 14.4566 29.526 14.4819C28.8341 14.5283 28.429 14.5536 27.8933 14.7181C27.29 14.9037 26.8598 15.1611 26.615 15.3087C26.5096 15.372 26.0919 15.6294 25.6067 16.0597C25.3325 16.3044 25.0709 16.5364 24.8009 16.9076C24.4254 17.4265 24.261 17.899 24.1766 18.1521C23.9487 18.8356 23.9066 19.7848 23.9192 20.2448L23.8939 21.4808C23.8939 22.7717 22.8519 23.8179 21.5652 23.8179H18.6079C17.3211 23.8179 16.2791 22.7717 16.2791 21.4808V18.515C16.2791 17.2241 17.3211 16.1778 18.6079 16.1778H20.3965C21.0294 16.1778 22.2865 16.2326 23.3539 15.8403C24.2694 15.507 25.1848 14.5789 25.5434 13.5622C25.8852 12.5286 25.8767 11.1533 25.8767 11.1533L25.8852 9.16625C25.8852 7.87952 26.9314 6.83329 28.2181 6.83329H31.1671C32.4538 6.83329 33.5 7.87952 33.5 9.16625V12.1405Z" fill="currentColor"/>
+</svg>

packages/ui/src/assets/icons/provider/nano-gpt.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+  <path d="M26.7,5.25l2.14-1.53,10.49,13.29-16.23,19.43-2.65,3L0.42,16.83l6.87-8.64,5.78,2.21,1.79-4.46L23.3,0.1l3.42,5.15ZM31.13,13.98L22.91,1.78l-7.1,4.95-5.45,13.53,20.77-6.28ZM36.74,15.57l-8.03-10.1-0.14-0.1-1.14,0.89,5.03,7.58,4.28,1.73ZM9.06,20.35l3.53-8.84-4.89-1.92-5.62,7.1,6.98,3.66ZM37.62,17.19l-5.3-2.14-9.22,19.52,14.52-17.38ZM30.95,15.24l-20.63,6.22,10.1,15.93,10.53-22.15ZM15.79,32.41l-6.86-10.82c-1.61-0.84-3.2-1.73-4.81-2.57-0.1-0.05-0.21-0.12-0.32-0.13l11.99,13.52Z" fill="currentColor"/>
+</svg>

packages/ui/src/components/dialog.css

@@ -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/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/components/provider-icons/sprite.svg

@@ -382,6 +382,12 @@
         fill="currentColor"
       ></path>
     </symbol>
+    <symbol viewBox="0 0 40 40" id="nano-gpt">
+      <path
+        d="M26.7,5.25l2.14-1.53,10.49,13.29-16.23,19.43-2.65,3L0.42,16.83l6.87-8.64,5.78,2.21,1.79-4.46L23.3,0.1l3.42,5.15ZM31.13,13.98L22.91,1.78l-7.1,4.95-5.45,13.53,20.77-6.28ZM36.74,15.57l-8.03-10.1-0.14-0.1-1.14,0.89,5.03,7.58,4.28,1.73ZM9.06,20.35l3.53-8.84-4.89-1.92-5.62,7.1,6.98,3.66ZM37.62,17.19l-5.3-2.14-9.22,19.52,14.52-17.38ZM30.95,15.24l-20.63,6.22,10.1,15.93,10.53-22.15ZM15.79,32.41l-6.86-10.82c-1.61-0.84-3.2-1.73-4.81-2.57-0.1-0.05-0.21-0.12-0.32-0.13l11.99,13.52Z"
+        fill="currentColor"
+      ></path>
+    </symbol>
     <symbol viewBox="0 0 24 24" fill="none" id="morph">
       <path
         shape-rendering="geometricPrecision"
@@ -632,6 +638,12 @@
         fill="currentColor"
       ></path>
     </symbol>
+    <symbol viewBox="0 0 40 40" fill="none" id="friendli">
+      <path
+        d="M15.1484 16.5153V16.5238C14.5325 17.3971 14.4945 18.6923 14.5114 19.3925V21.4091C14.5114 22.7379 13.4272 23.8221 12.1067 23.8221H9.24219C7.91327 23.8221 6.8375 22.7423 6.8375 21.4091V18.5952C6.8375 17.262 7.91327 16.182 9.24219 16.182H10.9339C11.2376 16.182 11.9717 16.1694 12.2923 16.1061C12.5666 16.0513 13.4525 15.853 14.2963 15.2201C14.3891 15.1526 14.4734 15.0852 14.5451 15.0219C14.5451 15.0219 14.7392 14.8574 14.9122 14.6759C15.3889 14.1824 15.7559 13.4778 15.7559 13.4778C15.8741 13.2584 16.1441 12.7016 16.3044 11.9295C16.3803 11.5541 16.4141 11.2039 16.4394 10.917L16.528 9.24219C16.528 7.91327 17.6079 6.83329 18.9369 6.83329H21.7339C23.0629 6.83329 24.1427 7.91327 24.1427 9.24219V12.0603C24.1427 13.3892 23.0629 14.4692 21.7339 14.4692H19.4346C18.9073 14.4819 18.4686 14.5367 18.1438 14.5958C17.5489 14.7055 17.2409 14.832 17.1481 14.87M10.6428 14.8109C8.35625 14.8109 6.5 12.9505 6.5 10.6555C6.5 8.36046 8.35625 6.5 10.6428 6.5C12.9294 6.5 14.7856 8.36046 14.7856 10.6555C14.7856 12.9505 12.9294 14.8109 10.6428 14.8109ZM10.6428 25.1891C12.9294 25.1891 14.7856 27.0496 14.7856 29.3446C14.7856 31.6396 12.9294 33.5 10.6428 33.5C8.35625 33.5 6.5 31.6396 6.5 29.3446C6.5 27.0496 8.35625 25.1891 10.6428 25.1891ZM33.5 12.1405C33.5 13.4272 32.4538 14.4734 31.1671 14.4734C30.4963 14.4355 29.9352 14.4566 29.526 14.4819C28.8341 14.5283 28.429 14.5536 27.8933 14.7181C27.29 14.9037 26.8598 15.1611 26.615 15.3087C26.5096 15.372 26.0919 15.6294 25.6067 16.0597C25.3325 16.3044 25.0709 16.5364 24.8009 16.9076C24.4254 17.4265 24.261 17.899 24.1766 18.1521C23.9487 18.8356 23.9066 19.7848 23.9192 20.2448L23.8939 21.4808C23.8939 22.7717 22.8519 23.8179 21.5652 23.8179H18.6079C17.3211 23.8179 16.2791 22.7717 16.2791 21.4808V18.515C16.2791 17.2241 17.3211 16.1778 18.6079 16.1778H20.3965C21.0294 16.1778 22.2865 16.2326 23.3539 15.8403C24.2694 15.507 25.1848 14.5789 25.5434 13.5622C25.8852 12.5286 25.8767 11.1533 25.8767 11.1533L25.8852 9.16625C25.8852 7.87952 26.9314 6.83329 28.2181 6.83329H31.1671C32.4538 6.83329 33.5 7.87952 33.5 9.16625V12.1405Z"
+        fill="currentColor"
+      ></path>
+    </symbol>
     <symbol viewBox="0 0 24 24" fill="none" id="fireworks-ai">
       <path
         d="M14.45 5.74999L11.9991 11.6956L9.54562 5.74999H7.97237L10.6604 12.2495C10.7678 12.5138 10.9515 12.7402 11.1882 12.8996C11.4248 13.059 11.7036 13.1442 11.9889 13.1444C12.2742 13.1446 12.5531 13.0597 12.79 12.9006C13.0268 12.7415 13.2109 12.5154 13.3186 12.2512L16.0232 5.74999H14.45ZM15.4965 14.808L19.98 10.2195L19.3684 8.75911L14.4719 13.7807C14.272 13.9856 14.1369 14.2448 14.0835 14.5261C14.0301 14.8073 14.0608 15.098 14.1718 15.3619C14.2807 15.624 14.4648 15.848 14.7008 16.0056C14.9369 16.1632 15.2144 16.2473 15.4983 16.2474L15.5 16.25L22.5 16.2325L21.8884 14.7721L15.4983 14.808H15.4965ZM4.02 10.216L4.63162 8.75561L9.52813 13.7772C9.93763 14.1964 10.0557 14.8176 9.82825 15.3584C9.71925 15.6204 9.53511 15.8443 9.29905 16.0019C9.06299 16.1595 8.78557 16.2437 8.50175 16.2439L1.50175 16.2281L1.5 16.2299L2.11163 14.7695L8.50175 14.8062L4.02 10.216Z"
@@ -828,5 +840,43 @@
         fill="currentColor"
       ></path>
     </symbol>
+    <symbol viewBox="0 0 40 40" fill="currentColor" id="abacus">
+      <path
+        d="M6.93433 9.57807C6.93433 8.92952 7.46008 8.40376 8.10864 8.40376C8.75719 8.40376 9.28295 8.92952 9.28295 9.57807V16.6239C9.28295 17.2725 8.75719 17.7983 8.10864 17.7983C7.46008 17.7983 6.93433 17.2725 6.93433 16.6239V9.57807Z"
+      ></path>
+      <path
+        d="M30.7144 25.1377C30.7144 24.4891 31.2402 23.9634 31.8887 23.9634C32.5373 23.9634 33.063 24.4891 33.063 25.1377V31.0092C33.063 31.6578 32.5373 32.1836 31.8887 32.1836C31.2402 32.1836 30.7144 31.6578 30.7144 31.0093V25.1377Z"
+      ></path>
+      <path
+        d="M22.7875 30.422C22.7875 29.7735 23.3132 29.2477 23.9618 29.2477C24.6103 29.2477 25.1361 29.7735 25.1361 30.422V34.8257C25.1361 35.4742 24.6103 36 23.9618 36C23.3132 36 22.7875 35.4742 22.7875 34.8257V30.422Z"
+      ></path>
+      <path
+        d="M6.93433 28.367C6.93433 27.7185 7.46008 27.1927 8.10864 27.1927C8.75719 27.1927 9.28295 27.7185 9.28295 28.367V31.5964C9.28295 32.245 8.75719 32.7707 8.10864 32.7707C7.46008 32.7707 6.93433 32.245 6.93433 31.5964V28.367Z"
+      ></path>
+      <path
+        d="M14.8617 5.46787C14.8617 4.81931 15.3874 4.29355 16.036 4.29355C16.6845 4.29355 17.2103 4.81931 17.2103 5.46787V9.87153C17.2103 10.5201 16.6845 11.0458 16.036 11.0458C15.3874 11.0458 14.8617 10.5201 14.8617 9.87153V5.46787Z"
+      ></path>
+      <path
+        d="M30.7144 9.28437C30.7144 8.63582 31.2402 8.11006 31.8887 8.11006C32.5373 8.11006 33.063 8.63582 33.063 9.28437V13.688C33.063 14.3366 32.5373 14.8623 31.8887 14.8623C31.2402 14.8623 30.7144 14.3366 30.7144 13.688V9.28437Z"
+      ></path>
+      <path
+        d="M22.7875 5.17431C22.7875 4.52576 23.3132 4 23.9618 4C24.6103 4 25.1361 4.52576 25.1361 5.17431V18.3853C25.1361 19.0339 24.6103 19.5596 23.9618 19.5596C23.3132 19.5596 22.7875 19.0339 22.7875 18.3853V5.17431Z"
+      ></path>
+      <path
+        d="M14.8617 21.3212C14.8617 20.6726 15.3874 20.1469 16.036 20.1469C16.6845 20.1469 17.2103 20.6726 17.2103 21.3212V34.5322C17.2103 35.1807 16.6845 35.7065 16.036 35.7065C15.3874 35.7065 14.8617 35.1807 14.8617 34.5322V21.3212Z"
+      ></path>
+      <path
+        d="M10.4577 21.9083C10.4577 23.2055 9.40623 24.257 8.10912 24.257C6.81201 24.257 5.7605 23.2055 5.7605 21.9083C5.7605 20.6112 6.81201 19.5597 8.10912 19.5597C9.40623 19.5597 10.4577 20.6112 10.4577 21.9083Z"
+      ></path>
+      <path
+        d="M18.3843 14.8624C18.3843 16.1596 17.3328 17.2111 16.0357 17.2111C14.7386 17.2111 13.6871 16.1596 13.6871 14.8624C13.6871 13.5653 14.7386 12.5138 16.0357 12.5138C17.3328 12.5138 18.3843 13.5653 18.3843 14.8624Z"
+      ></path>
+      <path
+        d="M26.3101 24.2569C26.3101 25.554 25.2586 26.6056 23.9615 26.6056C22.6644 26.6056 21.6128 25.554 21.6128 24.2569C21.6128 22.9598 22.6644 21.9083 23.9615 21.9083C25.2586 21.9083 26.3101 22.9598 26.3101 24.2569Z"
+      ></path>
+      <path
+        d="M34.2378 19.5597C34.2378 20.8568 33.1863 21.9083 31.8892 21.9083C30.5921 21.9083 29.5406 20.8568 29.5406 19.5597C29.5406 18.2626 30.5921 17.2111 31.8892 17.2111C33.1863 17.2111 34.2378 18.2626 34.2378 19.5597Z"
+      ></path>
+    </symbol>
   </defs>
 </svg>

packages/ui/src/components/provider-icons/types.ts

@@ -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/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.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);