GameCult/Ratatoskr
Watch
9
0
Fork
You've already forked Ratatoskr
 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Room list scrim: hover, selected and pressed rows are three distinct steps
Some checks failed
Build pull request / Build pull request (pull_request) Failing after 6m8s
Details

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
Void 2026-11-09 11:06:24 +00:00
commit cfb8a8641a
1 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/app/components/nav/styles.css.ts
View file

@ -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,
},