docs(convoys): unify-glass-panel-surfaces + cleanup palette — conductor seed + architect plan #119
2 changed files with 24 additions and 14 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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`).
|
||||
|
|
|
|||
Loading…
Reference in a new issue