From c2a414589bf735aba0c611416095efb8167bc34c Mon Sep 17 00:00:00 2001 From: jules Date: Sat, 8 Aug 2026 08:34:00 +0800 Subject: [PATCH] Stop menus being windows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --popover sat at card alpha, but a card and a menu are not the same kind of surface: a card rests on the page background, while a menu floats over whatever happens to be underneath it. In dark mode, over the aurora field at its most saturated, the text behind a dropdown read straight through the list of items — the two most-used menus in Canvas (the chat switcher and the account menu) looked broken every time they opened. Raised to 0.94/0.95. The backdrop blur still carries the depth, so the glass reads as glass; it just stops being transparent. Every app that defines --popover for a surface variant already used a fully opaque value, so this only aligns the default with what each of them had already decided independently. --- theme.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/theme.css b/theme.css index 32ef3e8..1009ffd 100644 --- a/theme.css +++ b/theme.css @@ -45,7 +45,12 @@ --card: oklch(1 0 0 / 0.58); --card-foreground: oklch(0.16 0.025 285); - --popover: oklch(1 0 0 / 0.74); + /* Near-opaque on purpose, unlike --card. A popover is the one glass + * surface with nothing behind it: a card sits on the page background, + * but a menu floats over arbitrary content, and at card alpha the text + * underneath reads straight through a list of menu items. The backdrop + * blur below still gives it depth — the tint just stops being a window. */ + --popover: oklch(1 0 0 / 0.94); --popover-foreground: oklch(0.16 0.025 285); --primary: oklch(0.55 0.22 295); @@ -193,7 +198,9 @@ --card: oklch(0.22 0.04 290 / 0.55); --card-foreground: oklch(0.97 0.005 280); - --popover: oklch(0.22 0.04 290 / 0.78); + /* See the light-mode note: dark is the worse case, because the aurora + * field behind a menu is at its most saturated here. */ + --popover: oklch(0.22 0.04 290 / 0.95); --popover-foreground: oklch(0.97 0.005 280); --primary: oklch(0.7 0.2 295);