Brief 4 of unify-glass-panel-surfaces convoy. The bulk-select toolbar
was a critical dark-mode bug (bg-white invisible against dark
backgrounds); migrating to .glass-panel-strong is both a unification
win and a correctness fix.
Outer toolbar:
- Replaces `bg-white rounded-xl shadow-2xl border border-gray-200`
with `glass-panel-strong rounded-2xl`.
- Inline boxShadow override: `var(--rim-light-inner),
var(--elevation-pronounced)` — keeps the toolbar reading as
elevated over arbitrary page content (matches the design audit's
"floating chrome" elevation tier).
More-actions dropdown:
- Replaces `absolute bottom-full right-0 mb-2 bg-white rounded-lg
shadow-xl border border-gray-200` with `glass-panel-strong
absolute bottom-full right-0 mb-2 rounded-xl`. Class's default
rim+ambient stack is the right weight here.
Interior token sweep (per Brief 4 acceptance criteria):
- text-gray-700 → style={{ color: 'var(--text-primary)' }}
- text-gray-{400,600} on the action triggers →
style={{ color: 'var(--text-secondary)' }}
- hover:text-gray-{600,800} + hover:bg-gray-{50,100} → nav-item-hover
- text-red-600 hover:bg-red-50 → style={{ color: 'rgb(239, 68, 68)' }}
+ nav-item-hover. (--accent-danger token does not exist yet; brief
pre-authorized this fallback. A future design-system PR can
introduce the token and swap the literal.)
- bg-gray-300 divider → style={{ backgroundColor: 'var(--border)' }}
- border-gray-200 menu separator → style={{ borderColor:
'var(--border)' }}
- rounded-lg → rounded-xl on action triggers (Brief 4 + convoy-wide
consistency).
UNCHANGED per brief scope:
- The 3 quick-action buttons (Collection / Deck / My Collection)
— they already use --accent-flame / --accent-gold / --accent-wood
and the onMouseEnter/Leave swap pattern. Touching them is scope
expansion.
Verification:
- rg "text-gray-|bg-gray-|hover:bg-gray-|text-red-|hover:bg-red-|
border-gray-" components/BulkSelectionToolbar.js → 0 matches.
- npm run lint passes (1 pre-existing unrelated warning).
- npm run test:run: 116/116 tests pass (no test changes needed for a
pure className/style swap per Brief 4 § Test Plan).
Acceptance criteria from
.convoys/unify-glass-panel-surfaces/brief-4-bulk-selection-toolbar.md
all met. No edits outside components/BulkSelectionToolbar.js.
Dark-mode QA reminder for reviewers: before this change, the toolbar
was bg-white — invisible against the dark theme. Verify in BOTH
themes before merge; before/after dark-mode screenshot attached to
PR description.
Co-authored-by: Cursor <cursoragent@cursor.com>
8bb174c7cc