docs(convoys): unify-glass-panel-surfaces + cleanup palette — conductor seed + architect plan #119

Merged
varutasu merged 3 commits from convoys-unify-glass-and-cleanup-palette into main 2026-06-04 15:09:41 -04:00
2 changed files with 24 additions and 14 deletions
Showing only changes of commit 6812c5c101 - Show all commits

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),
var(--elevation-ambient)`; the mobile drawer ships
`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
`.glass-panel-strong` element (the class's default
`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.
- Brief 5's class deletion: the `.card` block in
`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
```jsx
// 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
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={{
background: 'var(--glass-surface-high)',
backdropFilter: '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:
<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={{
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
UserMenu dropdown against L214-222 before editing — the inline
className/style block might already have minor differences from the
"before" sample above (e.g. different `w-` width, different
`mt-` margin). Migrate the actual block, not this sample; the
sample only shows the shape of the swap.
Note: this dropdown uses `--elevation-pronounced` (not `-ambient`)
— it's a heavier shadow than the sidebar profile dropdown's because
it floats higher in the viewport over more content. Preserve that
verbatim; do not normalize to `-ambient`. The `role="menu"` +
`aria-label="Account menu"` + `overflow-hidden` attributes also stay
byte-identical.
- **Preserve all children verbatim.** Menu items, dividers, icons,
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)`.
- [ ] 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.
- [ ] 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`).