Add hover style to checkboxes when their corresponding labels are hovered

Author: Keavon

.github/workflows/comment-!build-commands.yml

@@ -101,7 +101,7 @@ jobs:
               comment_id: ${{ github.event.comment.id }},
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: '!build ([build link](https://github.com/GraphiteEditor/Graphite/actions/runs/' + context.runId + '))'
+              body: '!build ([Run ID ' + context.runId + '](https://github.com/GraphiteEditor/Graphite/actions/runs/' + context.runId + '))'
             });
 
       - name: 🌐 Build Graphite web code
@@ -111,7 +111,7 @@ jobs:
         run: |
           cd frontend
           mold -run npm run ${{ steps.build_command.outputs.command }}
-      
+
       - name: ❗ Warn on build failure
         if: ${{ failure() }}
         uses: actions/github-script@v6

frontend/src/components/floating-menus/ColorPicker.svelte

@@ -5,6 +5,7 @@
 	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages";
 	import type { TooltipState } from "@graphite/state-providers/tooltip";
 	import { clamp } from "@graphite/utility-functions/math";
+	import { isDesktop } from "@graphite/utility-functions/platform";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
@@ -376,6 +377,9 @@
 
 	// TODO: Replace this temporary usage of the browser eyedropper API, that only works in Chromium-based browsers, with the custom color sampler system used by the Eyedropper tool
 	function eyedropperSupported(): boolean {
+		// TODO: Implement support in the desktop app for OS-level color picking
+		if (isDesktop()) return false;
+
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		return Boolean((window as any).EyeDropper);
 	}

frontend/src/components/widgets/inputs/CheckboxInput.svelte

@@ -99,7 +99,8 @@
 			}
 
 			// Hovered while unchecked
-			&:hover .checkbox-box {
+			&:hover .checkbox-box,
+			&.label-is-hovered .checkbox-box {
 				background: var(--color-6-lowergray);
 			}
 
@@ -120,7 +121,8 @@
 			}
 
 			// Hovered while checked
-			&:hover .checkbox-box {
+			&:hover .checkbox-box,
+			&.label-is-hovered .checkbox-box {
 				background: var(--color-f-white);
 			}
 

frontend/src/components/widgets/labels/TextLabel.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+
 	import type { ActionShortcut } from "@graphite/messages";
 
 	let className = "";
@@ -28,12 +30,39 @@
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
+	let self: HTMLLabelElement | undefined;
+
 	$: extraClasses = Object.entries(classes)
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
 		.join(" ");
 	$: extraStyles = Object.entries(styles)
 		.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
 		.join(" ");
+
+	$: watchForCheckbox(forCheckbox);
+
+	function watchForCheckbox(forCheckbox: bigint | undefined) {
+		if (!self) return;
+
+		self.removeEventListener("pointerenter", handlePointerEnter);
+		self.removeEventListener("pointerleave", handlePointerLeave);
+
+		if (forCheckbox !== undefined) {
+			self.addEventListener("pointerenter", handlePointerEnter);
+			self.addEventListener("pointerleave", handlePointerLeave);
+		}
+	}
+
+	function handlePointerEnter() {
+		document.querySelector(`[for="checkbox-input-${forCheckbox}"]`)?.classList.add("label-is-hovered");
+	}
+
+	function handlePointerLeave() {
+		document.querySelector(`[for="checkbox-input-${forCheckbox}"]`)?.classList.remove("label-is-hovered");
+	}
+
+	onMount(() => watchForCheckbox(forCheckbox));
+	onDestroy(() => watchForCheckbox(undefined));
 </script>
 
 <label
@@ -52,6 +81,7 @@
 	data-tooltip-description={tooltipDescription}
 	data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
 	for={forCheckbox !== undefined ? `checkbox-input-${forCheckbox}` : undefined}
+	bind:this={self}
 >
 	<slot />
 </label>