nemesis: chromeless buttons, chips and room list; plates only on the composer and plain messages

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/app/components/nav/styles.css.ts

@@ -5,10 +5,11 @@ import { surfaceInk } from '../../features/scene/sceneShell.css';
 
 // Wash strengths over the scene: rows and labels are faint, and hover, selected and pressed rows
 // are three distinct steps above them.
-const SCRIM_LABEL = '12%';
-const SCRIM_ROW = '16%';
-const SCRIM_HOVER = '26%';
-const SCRIM_SELECTED = '36%';
+// Meta, 2026-11-09: "this UI needs no chrome". Rows and labels are bare ink on the scene; hover and selection keep a faint wash.
+const SCRIM_LABEL = '0%';
+const SCRIM_ROW = '0%';
+const SCRIM_HOVER = '14%';
+const SCRIM_SELECTED = '22%';
 const SCRIM_PRESSED = '48%';
 
 export const NavCategory = style([

src/app/features/scene/BackgroundScene.tsx

@@ -5,6 +5,7 @@ import { mountBackgroundScene } from './host';
 import { readCapabilities, resolveTier } from './tier';
 import { getSceneStyleOverride } from './sceneStyle';
 import './sceneShell.css';
+import './sceneButtons.css';
 
 /** Set on <html> while a scene runs, so signed-out screens can let it show through. */
 export const SCENE_ACTIVE_ATTRIBUTE = 'data-scene';

src/app/features/scene/sceneButtons.css.ts

@@ -0,0 +1,28 @@
+import { globalStyle } from '@vanilla-extract/css';
+
+// Meta, 2026-11-10: "buttons are big and ugly, too, they don't need chrome either". Over the scene a folds Button or
+// Chip is its label in the page's ink, with a faint wash on hover and focus. Menus and dialogs (#portalContainer) keep
+// folds' look. The selectors are folds' hashed recipe base classes (Button epr39zd, Chip _1bv8u1w6).
+const scene = ':root[data-scene] #root';
+const controls = [`${scene} .epr39zd`, `${scene} ._1bv8u1w6`].join(', ');
+globalStyle(controls, {
+  backgroundColor: 'transparent',
+  boxShadow: 'none',
+  border: 'none',
+  outline: 'none',
+  color: 'inherit',
+});
+globalStyle(
+  [
+    `${scene} .epr39zd:hover`,
+    `${scene} .epr39zd:focus-visible`,
+    `${scene} ._1bv8u1w6:hover`,
+    `${scene} ._1bv8u1w6:focus-visible`,
+  ].join(', '),
+  { backgroundColor: 'color-mix(in srgb, currentColor 12%, transparent)' }
+);
+globalStyle(`${scene} .epr39zd`, {
+  fontWeight: 700,
+  textDecoration: 'underline',
+  textUnderlineOffset: '0.25em',
+});

src/app/features/scene/skyPlate.css.ts

@@ -24,20 +24,18 @@ export const SkyPlate = style({});
 // A recipe's first class is its base style.
 const base = (recipe: () => string) => `.${recipe().split(' ')[0]}`;
 
+// Meta, 2026-11-09: no chrome. Title bars, the room list, list pages, the drawer and the bars over the composer are bare
+// ink on the sky (dusk is allowed to be low contrast: it is the crossover between the light and dark inks).
+void PageNavContent;
+void PageContent;
+void MembersDrawer;
+void RoomViewTyping;
+void RoomViewFollowing;
 export const plateRegions = [
   `.${SkyPlate}`,
-  // Title bars: the room header, the room list's header, every page header.
-  '#root header',
-  // The room list, and the pages that are lists (explore, inbox, search).
-  `.${PageNavContent}`,
-  `.${PageContent}`,
-  // The composer, the members drawer, and the call status bar.
+  // The composer and the call status bar.
   `.${Editor}`,
-  `.${MembersDrawer}`,
   `.${CallStatus}`,
-  // The bars over the composer.
-  `.${RoomViewTyping}`,
-  base(RoomViewFollowing),
   // A message that is not a bubble (Modern, Compact) is plain text on the scene.
   `${base(MessageBase)}:not(:has(.${BubbleContent}))`,
 ];