docs(convoys): fix Brief 3 TopSearchBar UserMenu elevation token

Self-review recheck against current TopSearchBar.js (L211-222) found
that the UserMenu dropdown uses var(--elevation-pronounced), not
var(--elevation-ambient) as Brief 3's initial sample showed. Brief 3
now documents the verbatim shape (pronounced + role="menu" +
aria-label + overflow-hidden) and the convoy's risk-list note is
updated to reflect all three popovers' verbatim chains.

No semantic change to the plan; just an accuracy fix the
implementer of Brief 3 needs to ship the right code on the first try.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Randall Stillwell 2026-06-04 14:05:37 -05:00
parent 8093f6c4c0
commit 6812c5c101
2 changed files with 24 additions and 14 deletions

View file

@ -616,11 +616,15 @@ Read-only verification against the post-PR-#117 + post-PR-#118 tree.
ships `var(--rim-light-inner), var(--ember-rim-subtle), ships `var(--rim-light-inner), var(--ember-rim-subtle),
var(--elevation-ambient)`; the mobile drawer ships var(--elevation-ambient)`; the mobile drawer ships
`var(--rim-light-inner), var(--rim-light-outer), `var(--rim-light-inner), var(--rim-light-outer),
var(--elevation-pronounced)`. Both are preserved as inline var(--elevation-pronounced)`; the TopSearchBar UserMenu dropdown
ships `var(--rim-light-inner), var(--ember-rim-subtle),
var(--elevation-pronounced)` (verified during boot-the-brief
recheck — uses `-pronounced`, not `-ambient`, because it floats
higher in the viewport). All three are preserved as inline
`style={{ boxShadow: '...' }}` overrides on the `style={{ boxShadow: '...' }}` overrides on the
`.glass-panel-strong` element (the class's default `.glass-panel-strong` element (the class's default
`var(--rim-light-inner), var(--elevation-ambient)` would otherwise `var(--rim-light-inner), var(--elevation-ambient)` would otherwise
lose the ember-rim and the pronounced elevation). Brief 3 lose the ember-rim and either heavier elevation). Brief 3
documents the verbatim chain. documents the verbatim chain.
- Brief 5's class deletion: the `.card` block in - Brief 5's class deletion: the `.card` block in
`styles/globals.css` is a single rule; deleting it is a clean `styles/globals.css` is a single rule; deleting it is a clean

View file

@ -97,32 +97,38 @@ Migrate three floating surfaces — the sidebar profile dropdown, the mobile dra
### C. TopSearchBar `<UserMenu>` dropdown panel ### C. TopSearchBar `<UserMenu>` dropdown panel
```jsx ```jsx
// Before — the absolutely-positioned <div> nested inside UserMenu, // Before — the absolutely-positioned <div> nested inside UserMenu,
// around L214-222 of TopSearchBar.js: // around L211-222 of TopSearchBar.js (verified against current file
// 2026-06-04 during architect boot-the-brief recheck):
<div <div
className="absolute right-0 top-full mt-2 w-56 rounded-xl py-2 z-50" role="menu"
aria-label="Account menu"
className="absolute right-0 top-full mt-2 w-56 rounded-xl z-30 overflow-hidden"
style={{ style={{
background: 'var(--glass-surface-high)', background: 'var(--glass-surface-high)',
backdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))', backdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
WebkitBackdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))', WebkitBackdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
boxShadow: 'var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-ambient)', boxShadow:
'var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-pronounced)',
}} }}
> >
// After: // After:
<div <div
className="glass-panel-strong absolute right-0 top-full mt-2 w-56 rounded-xl py-2 z-50" role="menu"
aria-label="Account menu"
className="glass-panel-strong absolute right-0 top-full mt-2 w-56 rounded-xl z-30 overflow-hidden"
style={{ style={{
boxShadow: boxShadow:
'var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-ambient)', 'var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-pronounced)',
}} }}
> >
``` ```
**NOTE:** confirm the verbatim shape of the current TopSearchBar Note: this dropdown uses `--elevation-pronounced` (not `-ambient`)
UserMenu dropdown against L214-222 before editing — the inline — it's a heavier shadow than the sidebar profile dropdown's because
className/style block might already have minor differences from the it floats higher in the viewport over more content. Preserve that
"before" sample above (e.g. different `w-` width, different verbatim; do not normalize to `-ambient`. The `role="menu"` +
`mt-` margin). Migrate the actual block, not this sample; the `aria-label="Account menu"` + `overflow-hidden` attributes also stay
sample only shows the shape of the swap. byte-identical.
- **Preserve all children verbatim.** Menu items, dividers, icons, - **Preserve all children verbatim.** Menu items, dividers, icons,
click handlers — all stay byte-identical. click handlers — all stay byte-identical.
@ -141,7 +147,7 @@ Migrate three floating surfaces — the sidebar profile dropdown, the mobile dra
- [ ] Sidebar profile dropdown panel uses `className="glass-panel-strong ..."` and carries an inline `boxShadow` with `var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-ambient)`. - [ ] Sidebar profile dropdown panel uses `className="glass-panel-strong ..."` and carries an inline `boxShadow` with `var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-ambient)`.
- [ ] Mobile drawer panel uses `className="glass-panel-strong ..."` and carries an inline `boxShadow` with `var(--rim-light-inner), var(--rim-light-outer), var(--elevation-pronounced)`. - [ ] Mobile drawer panel uses `className="glass-panel-strong ..."` and carries an inline `boxShadow` with `var(--rim-light-inner), var(--rim-light-outer), var(--elevation-pronounced)`.
- [ ] TopSearchBar `<UserMenu>` dropdown panel uses `className="glass-panel-strong ..."` and carries an inline `boxShadow` with `var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-ambient)`. - [ ] TopSearchBar `<UserMenu>` dropdown panel uses `className="glass-panel-strong ..."` and carries an inline `boxShadow` with `var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-pronounced)`.
- [ ] No inline `background: 'var(--glass-surface-*)'` or `backdropFilter` style remains on any of the three migrated `<div>`s. - [ ] No inline `background: 'var(--glass-surface-*)'` or `backdropFilter` style remains on any of the three migrated `<div>`s.
- [ ] Sidebar nav-chip block (Layout.js ~L858-861) UNCHANGED. TopSearchBar `<header>` block UNCHANGED. (Architect's allowlist for chrome-tier surfaces.) - [ ] Sidebar nav-chip block (Layout.js ~L858-861) UNCHANGED. TopSearchBar `<header>` block UNCHANGED. (Architect's allowlist for chrome-tier surfaces.)
- [ ] `test/components/Layout.test.js` has at least 2 new assertions (sidebar dropdown + mobile drawer carry `glass-panel-strong`). - [ ] `test/components/Layout.test.js` has at least 2 new assertions (sidebar dropdown + mobile drawer carry `glass-panel-strong`).