fix(tooltip): restore the visible caret — keep only the distance fix

My previous commit (4afadfd7) over-corrected: it changed the caret fill from
`currentColor` (the panel's dark text colour — long-standing, visible) to the
panel background, aiming for a "seamless extension". On a light-on-light tooltip
that makes the caret INVISIBLE — the panel reads only because of its box-shadow,
which the separate caret element doesn't share. The user had a visible caret
before; the "correct" colour regressed it.

Revert the polygon/path colour rules (caret returns to `currentColor` = visible)
and keep ONLY the `display: block` on the SVG — that was the fix that mattered: it
removes the ~21px of inline-baseline phantom height that both misaligned the caret
and, because the positioner adds the measured arrow height to the gap, pushed the
panel too far from the trigger. So: caret visible again + panel sits at the correct
~13px gap. A properly matched-and-visible caret (bg fill + its own drop-shadow) is
deferred until it can be verified.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
menubar-v4-safe
dev 3 months ago
parent 4afadfd79f
commit a40d1573c5

@ -75,40 +75,22 @@
/* ── Arrow ──────────────────────────────────────────────────────────────── */
/* Colour the SVG shapes directly. The polygon/path carry `fill="currentColor"` /
* `stroke="currentColor"` presentation attributes, which a `fill`/`stroke` set on
* the wrapping <span> does NOT override — an element's own presentation attribute
* beats an inherited value, so the caret rendered with `color` (dark text) instead
* of the panel bg. Target the polygon (body) + path (the two exposed edges) like
* the popover recipe. `display: block` keeps the SVG off the text baseline (which
* added phantom height + misaligned the caret). */
/* `display: block` keeps the SVG off the text baseline. Inline added ~21px of
* phantom height, which both misaligned the caret AND — since the positioner adds
* the measured arrow height to the gap (`offset = sideOffset + arrowHeight`) —
* pushed the panel too far from the trigger. This is the fix that mattered.
*
* The caret colour is left as `currentColor` (the panel's dark text colour), the
* long-standing behaviour: it reads against the page. Matching the caret to the
* panel bg is technically "correct" (a seamless extension) but makes it INVISIBLE
* on a light-on-light tooltip — the panel is defined by its box-shadow, which the
* separate caret element doesn't share. A properly matched-and-visible caret needs
* its own drop-shadow; deferred until that can be verified. */
[data-tooltip-arrow] svg {
display: block;
overflow: visible;
}
[data-tooltip-arrow] polygon {
fill: var(--_tooltip-bg, var(--tooltip-bg));
stroke: none;
}
[data-tooltip-arrow] path {
stroke: var(--_tooltip-border, var(--tooltip-border));
stroke-width: var(--tooltip-border-width);
vector-effect: non-scaling-stroke;
}
/* Outline variant: transparent bg → fill the arrow with the surface (masks the
* panel-border seam) and stroke the two exposed edges. */
[data-tooltip-content][data-variant='outline'] ~ [data-tooltip-arrow] polygon,
[data-tooltip-content][data-variant='outline'] [data-tooltip-arrow] polygon {
fill: var(--color-surface-default);
}
[data-tooltip-content][data-variant='outline'] ~ [data-tooltip-arrow] path,
[data-tooltip-content][data-variant='outline'] [data-tooltip-arrow] path {
stroke: var(--color-border-strong);
}
/* ── Entrance / exit ─────────────────────────────────────────────────────────
* Tooltip morfo's data-state values: 'closed' | 'delayed-open' | 'instant-open'.
* 'delayed-open' (hover) scales in subtly; 'instant-open' (keyboard focus)

Loading…
Cancel
Save

Powered by TurnKey Linux.