From da71e2bb15844a1deb02da1743a41a652f2cc878 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Wed, 4 Mar 2026 15:47:01 +0000 Subject: [PATCH] style: add transparent group color background to bounding box Co-Authored-By: Claude Opus 4.6 --- .../lib/components/graph/GroupOverlay.svelte | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/components/graph/GroupOverlay.svelte b/frontend/src/lib/components/graph/GroupOverlay.svelte index 6eb312198e..6bfcf50275 100644 --- a/frontend/src/lib/components/graph/GroupOverlay.svelte +++ b/frontend/src/lib/components/graph/GroupOverlay.svelte @@ -102,6 +102,23 @@ return map[(color as NoteColor) ?? NoteColor.BLUE] ?? map[NoteColor.BLUE] } + const GROUP_BG_COLORS: Record = { + [NoteColor.YELLOW]: 'bg-yellow-400/5 dark:bg-yellow-600/5', + [NoteColor.BLUE]: 'bg-blue-400/5 dark:bg-blue-600/5', + [NoteColor.GREEN]: 'bg-green-400/5 dark:bg-green-600/5', + [NoteColor.PURPLE]: 'bg-purple-400/5 dark:bg-purple-600/5', + [NoteColor.PINK]: 'bg-pink-400/5 dark:bg-pink-600/5', + [NoteColor.ORANGE]: 'bg-orange-400/5 dark:bg-orange-600/5', + [NoteColor.RED]: 'bg-red-400/5 dark:bg-red-600/5', + [NoteColor.CYAN]: 'bg-cyan-400/5 dark:bg-cyan-600/5', + [NoteColor.LIME]: 'bg-lime-400/5 dark:bg-lime-600/5', + [NoteColor.GRAY]: 'bg-gray-400/5 dark:bg-gray-600/5' + } + + function getBgColorClass(color?: string): string { + return GROUP_BG_COLORS[(color as NoteColor) ?? NoteColor.BLUE] ?? GROUP_BG_COLORS[NoteColor.BLUE] + } + function toggleCollapse(groupId: string) { groupEditorContext?.groupEditor.toggleRuntimeCollapse(groupId) } @@ -152,7 +169,7 @@ class="absolute rounded-lg outline outline-1 pointer-events-none transition-colors duration-150 {getOutlineColorClass( group.color, visibleGroup?.id === group.id - )}" + )} {getBgColorClass(group.color)}" style:transform="translate({bounds.x}px, {bounds.y}px)" style:width="{bounds.width}px" style:height="{bounds.height}px"