Skip to content

fix(overlays): normalize shadows and outlines on tip-style overlays - #705

Draft
FBalint wants to merge 1 commit into
cloudflare:mainfrom
FBalint:balint/normalize-overlay-shadows
Draft

fix(overlays): normalize shadows and outlines on tip-style overlays#705
FBalint wants to merge 1 commit into
cloudflare:mainfrom
FBalint:balint/normalize-overlay-shadows

Conversation

@FBalint

@FBalint FBalint commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Popover, Tooltip, ClipboardText, and the Chart tooltip were using an opaque gray for both their drop shadow and their outline, which reads as a flat gray halo instead of an actual shadow.

Fix is to use true-black with alpha for both layers (Tailwind's default shadow + kumo-line outline) so where they overlap they deepen into a natural edge and fade continuously into the shadow beyond — same trick every other overlay in the library already uses.

  • Reviews
    • bonk has reviewed the change
    • automated review not possible because: visual/design change, needs eyes on rendering in both modes
  • Tests
    • Tests included/updated
    • Automated tests not possible - manual testing has been completed as follows:
    • Additional testing not necessary because: existing suite covers the affected components; changes are token renames and Tailwind class swaps

- Drop shadow-kumo-tip-shadow color override; use default Tailwind shadow
- Tune shadow sizes: shadow-md for Popover, Tooltip, ClipboardText tooltip,
  Chart tooltip; keep shadow-lg on ClipboardText toast
- Switch outline-kumo-fill to outline-kumo-line to match other overlays
- Rename kumo-tip-shadow/kumo-tip-stroke to kumo-arrow-edge/kumo-arrow-stroke;
  both now resolve to kumo-line so arrow border aligns with popup outline
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant