UI: use the shared tooltip for gradient values #309

Open
opened 2026-09-28 07:32:17 +00:00 by kayg · 1 comment
Owner

Evidence

apps/web/src/routes/settings/appearance/BackgroundGroup.svelte makes three tooltip elements for gradient values: the gradient centre at line 505, a colour stop at line 560, and the angle at line 603. The local rule at line 682 paints all three with its own tint, shadow, radius and backdrop-filter: blur(12px). The stop marker and angle control add more local blur recipes at lines 678 and 688.

The web UI already has the shared tip() helper and TooltipLayer in packages/ui/src/components/tooltip/. The three labels use role="tooltip" directly and do not use that shared layer.

Rule

DESIGN §34 says to use one tooltip component and one overlay material. The reuse gate says to extend a shared component before making a new one.

Fix

Use the shared tooltip layer for these live value labels. If the shared API cannot show a changing value during drag or keyboard input, add that ability once to the shared tooltip. Keep the current value and release-to-remove text.

Owner

packages/ui/src/components/tooltip/ owns the shared tooltip and its surface styling.

## Evidence `apps/web/src/routes/settings/appearance/BackgroundGroup.svelte` makes three tooltip elements for gradient values: the gradient centre at line 505, a colour stop at line 560, and the angle at line 603. The local rule at line 682 paints all three with its own tint, shadow, radius and `backdrop-filter: blur(12px)`. The stop marker and angle control add more local blur recipes at lines 678 and 688. The web UI already has the shared `tip()` helper and `TooltipLayer` in `packages/ui/src/components/tooltip/`. The three labels use `role="tooltip"` directly and do not use that shared layer. ## Rule DESIGN §34 says to use one tooltip component and one overlay material. The reuse gate says to extend a shared component before making a new one. ## Fix Use the shared tooltip layer for these live value labels. If the shared API cannot show a changing value during drag or keyboard input, add that ability once to the shared tooltip. Keep the current value and release-to-remove text. ## Owner `packages/ui/src/components/tooltip/` owns the shared tooltip and its surface styling.
Author
Owner

Consistency-hunt update from current dev at dfb5964a2fcf13dc8b9a50a319eee09bc386f322 (2026-09-30). The three value labels still use local role="tooltip" spans in apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:510,565,608. The same file still has one-off blur values at :683 (5px), :687 (12px) and :693 (6px). The shared tip() helper and TooltipLayer still exist in packages/ui/src/components/tooltip/.

Rule: DESIGN §34 says to use one tooltip and one shared overlay material. Fix: extend the shared tooltip for live drag/keyboard values, then remove these local surfaces. Owner: packages/ui/src/components/tooltip/.

Consistency-hunt update from current `dev` at `dfb5964a2fcf13dc8b9a50a319eee09bc386f322` (2026-09-30). The three value labels still use local `role="tooltip"` spans in `apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:510,565,608`. The same file still has one-off blur values at `:683` (5px), `:687` (12px) and `:693` (6px). The shared `tip()` helper and `TooltipLayer` still exist in `packages/ui/src/components/tooltip/`. Rule: DESIGN §34 says to use one tooltip and one shared overlay material. Fix: extend the shared tooltip for live drag/keyboard values, then remove these local surfaces. Owner: `packages/ui/src/components/tooltip/`.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal#309
No description provided.