From 61aeb2a2a741468b42ddde2cfb1f08897d9ab648 Mon Sep 17 00:00:00 2001 From: Aaron Iker Date: Thu, 8 Jan 2026 16:02:04 +0100 Subject: feat: Polish dialog, popover shadows & borders, add missing provider logos (#7326) --- packages/ui/src/components/dialog.css | 11 ++--- packages/ui/src/components/dropdown-menu.css | 3 +- packages/ui/src/components/popover.css | 5 ++- .../ui/src/components/provider-icons/sprite.svg | 50 ++++++++++++++++++++++ packages/ui/src/components/provider-icons/types.ts | 3 ++ 5 files changed, 65 insertions(+), 7 deletions(-) (limited to 'packages/ui/src/components') diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css index ff8587421..7a94bb2ee 100644 --- a/packages/ui/src/components/dialog.css +++ b/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; */ /**/ diff --git a/packages/ui/src/components/dropdown-menu.css b/packages/ui/src/components/dropdown-menu.css index 710ff2ddc..d2dc03c50 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 74d7f5a39..b49542afd 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/components/provider-icons/sprite.svg b/packages/ui/src/components/provider-icons/sprite.svg index 22e1223a1..88406fa8c 100644 --- a/packages/ui/src/components/provider-icons/sprite.svg +++ b/packages/ui/src/components/provider-icons/sprite.svg @@ -382,6 +382,12 @@ fill="currentColor" > + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/components/provider-icons/types.ts b/packages/ui/src/components/provider-icons/types.ts index 81fcc3678..89fbc0625 100644 --- a/packages/ui/src/components/provider-icons/types.ts +++ b/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] -- cgit v1.2.3