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: steady scrim behind rows over the scene, icon on unjoined rows

Browse source 
With the background scene on, nav rows were fully clear and the ridges showed through
their text. Rows now carry the theme's own surface at 62% (80% on hover and selected).
An unjoined row (Commons) gets the same leading room icon as a joined one.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Void 2026-11-09 10:50:24 +00:00
commit a23dd239ba
2 changed files with 20 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { ComplexStyleRule, createVar, style } from '@vanilla-extract/css';
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
import { ContainerColor, DefaultReset, Disabled, RadiiVariant, color, config, toRem } from 'folds';
import { surfaceInk } from '../../features/scene/sceneShell.css';
export const NavCategory = style([
DefaultReset,
@ -61,6 +62,16 @@ const NavItemBase = style({
'&[data-hover=true]': {
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.
':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]':
{
backgroundColor: `color-mix(in srgb, ${surfaceInk} 80%, transparent)`,
},
[`&:has(.${NavLink}:active)`]: {
backgroundColor: ContainerActive,
},

13
src/app/features/estate/EstateNavigator.tsx
View file

@ -1,7 +1,7 @@
import React, { MouseEventHandler, ReactNode, useCallback, useMemo, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import { Avatar, Box, Chip, Icon, IconButton, Icons, Spinner, Text, color } from 'folds';
import { Avatar, Box, Chip, Icon, IconButton, Icons, Spinner, Text, color, config } from 'folds';
import { PageNav, PageNavContent, PageNavHeader } from '../../components/page';
import {
NavButton,
@ -76,9 +76,14 @@ function JoinRow({ room }: { room: EstateRoom }) {
<NavItem variant="Background" radii="400">
<Box grow="Yes" alignItems="Center" gap="200" style={{ padding: '0 8px', minHeight: 38 }}>
<NavItemContent>
<Text as="span" size="Inherit" truncate>
{room.name}
</Text>
<Box as="span" grow="Yes" alignItems="Center" gap="200">
<Avatar size="200" radii="400">
<Icon src={Icons.Hash} size="100" style={{ opacity: config.opacity.P300 }} />
</Avatar>
<Text as="span" size="Inherit" truncate>
{room.name}
</Text>
</Box>
</NavItemContent>
{state.status === AsyncStatus.Error && (
<Text