mirror of
https://github.com/logseq/logseq.git
synced 2026-05-30 07:29:48 +00:00
e30384d6c5
Resting state restructured for clearer affordance + better
discoverability:
- Avatar tile demoted from <button> to <div aria-hidden> — it's a
live preview, not a control. Removes the redundant second toggle.
- Banner demoted from <button> to <div aria-hidden>. The chevron-down
is gone — it was miscueing as a <select>-style dropdown, and the
morph-in-place transition meant it never lived long enough to read
as a disclosure rotation anyway.
- New invisible <button.cb-row-trigger> overlays the resting row
edge-to-edge (covering the zone's 18px padding) so the entire
surface is one accessible click target. Mounted only when collapsed
(`when-not expanded?`) — when expanded, the dropdown chips inside
`.cb-rows` are unparented so there's no nested-interactive risk.
- aria-label composes scope + descriptor + verb so screen readers
announce the current state on focus ("Custom · Image, circle.
Customize avatar."). aria-controls links to the rows panel id;
panel gets role="region" + aria-label for the disclosure pair.
- Right-side "Edit" text label replaces the chevron — muted gray-09
at rest, brightens to gray-12 when the row is hovered.
Zone background swapped to solid theme tokens (no alpha veil):
- Rest: var(--lx-gray-01) — most recessed surface in both themes
- Hover: var(--lx-gray-03) — two-step lift via :has(.cb-row-trigger:hover)
- 120ms cubic-bezier(0.32, 0.72, 0, 1) on background-color only
Solid colors compose more reliably across light + dark themes than
stacked alphas, and avoid the content-clipping issue that would
happen if the trigger overlay carried a near-opaque background of
its own. The :has() pattern means the hover paints on the same
element that already backs the content, so the avatar / banner-text
/ Edit label naturally show through.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>