From 1b1cb5264320d3d73ff0ca289a39b4fa891d21fd Mon Sep 17 00:00:00 2001 From: Logan Sack <12778322+logancsack@users.noreply.github.com> Date: Thu, 1 Oct 2026 02:21:16 +0000 Subject: [PATCH 1/2] fix(web): Prism overlays frost and its controls are liquid glass On narrow screens the sidebar is a sheet that never carries the docked sidebar's attribute, so it took Prism's thin tint with no blur and the page showed through it; dialogs, menus, and the glass utilities mixed their fill from the thinned canvas token and went nearly clear too. Overlays (the sidebar sheet, other sheets, dialogs, the command palette, menus, selects, popovers, the glass utilities, floating pills, the Aldo assistant footer) are now frosted: an opaque-palette tint at 82-86% with a 40px blur, and their backdrops dim with the chrome. Controls that sit on the scene take a liquid glass material: the composer (its backdrop pseudo is the glass body, its outline pseudo a gradient rim cut with a mask), the Aldo dock capsule and bubble, toolbar controls, inputs, and the selected sidebar row. Co-Authored-By: Claude Fable 5.1 --- apps/web/src/aldo/AldoAssistant.tsx | 5 +- apps/web/src/aldo/AldoAssistantDock.tsx | 10 +- apps/web/src/index.css | 296 ++++++++++++++++++++---- 3 files changed, 263 insertions(+), 48 deletions(-) diff --git a/apps/web/src/aldo/AldoAssistant.tsx b/apps/web/src/aldo/AldoAssistant.tsx index 7b4c94494e82..27357ca9bb3d 100644 --- a/apps/web/src/aldo/AldoAssistant.tsx +++ b/apps/web/src/aldo/AldoAssistant.tsx @@ -53,7 +53,10 @@ export function AldoAssistantHome(props: { readonly setup?: ReactNode }) { -
+
diff --git a/apps/web/src/aldo/AldoAssistantDock.tsx b/apps/web/src/aldo/AldoAssistantDock.tsx index d8aa4b247b7b..f780c7e3e6b9 100644 --- a/apps/web/src/aldo/AldoAssistantDock.tsx +++ b/apps/web/src/aldo/AldoAssistantDock.tsx @@ -91,11 +91,17 @@ export function AldoAssistantDock() { return (
{typing && (said || lastSaid) ? ( -

+

{said || lastSaid}

) : null} -
+
{typing ? (
span { --surface-raised: var(--app-theme-surface-raised); --sidebar: var(--app-theme-sidebar); --sidebar-stage-fade: var(--app-theme-sidebar); + --prism-frost: var(--app-theme-surface-overlay); + --prism-frost-sidebar: var(--app-theme-sidebar); + --prism-frost-canvas: var(--app-theme-canvas); + --prism-lg-tint: var(--app-theme-surface-raised); } html[data-theme-id="prism"] [data-app-sidebar] [data-slot="sidebar-inner"] { background-color: var(--sidebar); } - - html[data-theme-id="prism"] [data-slot="composer-shell"] { - --chat-composer-glass-surface: var(--app-theme-surface-raised); - } } /* Contrast stays in ordinary custom properties so both Tailwind utilities and From a558c2d4abb9846db20fb1a6fe564e4a6c6543a3 Mon Sep 17 00:00:00 2001 From: Logan Sack <12778322+logancsack@users.noreply.github.com> Date: Thu, 1 Oct 2026 02:35:53 +0000 Subject: [PATCH 2/2] fix(web): Prism review follow-ups for selects, inputs, pills, and the composer A select's popup slot is a bare wrapper around its dropdown-glass child, so frosting the class (the popup element itself for menus and popovers) keeps one tinted layer instead of two. Inputs mark their wrapper with data-unstyled when the host owns the surface, and only styled wrappers take the glass fill; the Aldo dock's wrapper is cleared. The composer body keeps its liquid glass when a banner is attached, where the main surface paints instead of the shell's pseudo. The near-solid canvas pills are matched by their capsule shape with a lighter blur, so the sticky browser toolbar keeps its own. Co-Authored-By: Claude Fable 5.1 --- apps/web/src/components/ui/input.tsx | 1 + apps/web/src/index.css | 41 ++++++++++++++++++---------- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx index cae3dfe62852..7ce4a5f20e4b 100644 --- a/apps/web/src/components/ui/input.tsx +++ b/apps/web/src/components/ui/input.tsx @@ -68,6 +68,7 @@ function Input({ } data-size={size} data-slot="input-control" + data-unstyled={unstyled || undefined} > {inputElement} diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 60b36d8f4183..193ba68b34b4 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -1630,14 +1630,15 @@ html[data-theme-id="prism"] [data-slot="sidebar"][data-mobile="true"] { backdrop-filter: var(--prism-frost-blur); } +/* Menus and popovers carry dropdown-glass on the popup itself; a select's + popup slot is a bare wrapper around a dropdown-glass child, so the class + is the one element to frost in all three. */ html[data-theme-id="prism"] :is( [data-slot="sheet-popup"], [data-slot="dialog-popup"], [data-slot="command-dialog-popup"], - [data-slot="menu-popup"], - [data-slot="select-popup"], - [data-slot="popover-popup"] + .dropdown-glass ) { background: var(--prism-frost); border-color: var(--prism-line-strong); @@ -1665,19 +1666,18 @@ html[data-theme-id="prism"] .surface-glass { backdrop-filter: var(--prism-frost-blur); } -html[data-theme-id="prism"] .dropdown-glass { - background: var(--prism-frost); -} - html[data-theme-id="prism"] .dialog-glass { background: var(--prism-frost); } -/* Floating pills that paint a near-solid canvas expect it to be opaque. */ -html[data-theme-id="prism"] :is(.bg-background\/88, .bg-background\/95) { +/* Floating capsules (scroll-to-latest, new messages, the search shortcut + badge) paint a near-solid canvas and expect it to be opaque. Scoped to the + capsule shape so the sticky browser toolbar, which shares the class, keeps + its own lighter blur. */ +html[data-theme-id="prism"] :is(.bg-background\/88, .bg-background\/95).rounded-full { background-color: var(--prism-frost-canvas); - -webkit-backdrop-filter: var(--prism-frost-blur); - backdrop-filter: var(--prism-frost-blur); + -webkit-backdrop-filter: blur(16px) saturate(1.4); + backdrop-filter: blur(16px) saturate(1.4); } html[data-theme-id="prism"] [data-aldo-assistant-footer] { @@ -1719,6 +1719,17 @@ html[data-theme-id="prism"] [data-slot="composer-shell"]::before { backdrop-filter: var(--prism-lg-blur); } +/* With a banner attached the shell hides its backdrop pseudo and the main + surface paints the glass instead. */ +html[data-theme-id="prism"] + [data-slot="composer-shell"]:has([data-composer-banner-surface="attached"]) + [data-chat-composer-main-surface] { + background: var(--prism-lg-fill), var(--prism-lg-tint); + box-shadow: var(--prism-lg-inset), var(--prism-shadow); + -webkit-backdrop-filter: var(--prism-lg-blur); + backdrop-filter: var(--prism-lg-blur); +} + html[data-theme-id="prism"] [data-slot="composer-host"]::after, html[data-theme-id="prism"] [data-chat-composer-main-surface]::after { border: 0; @@ -1775,7 +1786,7 @@ html[data-theme-id="prism"] [data-aldo-dock]::before { pointer-events: none; } -html[data-theme-id="prism"] [data-aldo-dock] [data-slot="input"] { +html[data-theme-id="prism"] [data-aldo-dock] [data-slot="input-control"] { background: transparent; border-color: transparent; box-shadow: none; @@ -1791,9 +1802,9 @@ html[data-theme-id="prism"] [data-chat-header] [data-toolbar-control] { } /* Inputs have no blur of their own, so their fill stays thin: the lit top - edge and hairline carry the glass. */ -html[data-theme-id="prism"] [data-slot="input"]:not([data-aldo-dock] [data-slot="input"]), -html[data-theme-id="prism"] [data-slot="input-control"] { + edge and hairline carry the glass. Only the styled wrapper owns a surface; + an unstyled one (input groups, the sidebar search) belongs to its host. */ +html[data-theme-id="prism"] [data-slot="input-control"]:not([data-unstyled], [data-aldo-dock] *) { background: var(--prism-fill); border-color: var(--prism-line-strong); box-shadow: inset 0 1px 0 var(--prism-highlight);