From cfb8a8641aea71c36bcaa55eb915e79563ee2401 Mon Sep 17 00:00:00 2001 From: Void Date: Mon, 9 Nov 2026 11:06:24 +0000 Subject: [PATCH] Room list scrim: hover, selected and pressed rows are three distinct steps Soul: selected and hover shared one 80% value and the press state lost to hover on specificity. Now hover 74%, selected 84%, pressed 92%. Co-Authored-By: Claude Sonnet 5.5 --- src/app/components/nav/styles.css.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/app/components/nav/styles.css.ts b/src/app/components/nav/styles.css.ts index 70344c04..927fee0f 100644 --- a/src/app/components/nav/styles.css.ts +++ b/src/app/components/nav/styles.css.ts @@ -70,15 +70,21 @@ const NavItemBase = style({ backgroundColor: ContainerHover, }, // While the background scene runs the shell is clear (sceneShell.css.ts); a row is a steady - // scrim of the theme's own surface, so ridges never show through its text. Hover and the - // selected row strengthen it. + // scrim of the theme's own surface, so ridges never show through its text. Hover, the selected row and a + // press each strengthen it a step. ':root[data-scene] &': { backgroundColor: `color-mix(in srgb, ${surfaceInk} 62%, transparent)`, }, - ':root[data-scene] &:hover, :root[data-scene] &:focus-visible, :root[data-scene] &[data-hover=true], :root[data-scene] &[aria-selected=true]': + ':root[data-scene] &:hover, :root[data-scene] &:focus-visible, :root[data-scene] &[data-hover=true]': { - backgroundColor: `color-mix(in srgb, ${surfaceInk} 80%, transparent)`, + backgroundColor: `color-mix(in srgb, ${surfaceInk} 74%, transparent)`, }, + ':root[data-scene] &[aria-selected=true]': { + backgroundColor: `color-mix(in srgb, ${surfaceInk} 84%, transparent)`, + }, + [`:root[data-scene] &:has(.${NavLink}:active)`]: { + backgroundColor: `color-mix(in srgb, ${surfaceInk} 92%, transparent)`, + }, [`&:has(.${NavLink}:active)`]: { backgroundColor: ContainerActive, },