Show color hex on hover for color picker

MaddyGuthridge · Jan 28, 2025 · 8b4b308 · 8b4b308
1 parent 0b300a7
commit 8b4b308
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/src/components/base/Button.svelte b/src/components/base/Button.svelte
@@ -7,6 +7,8 @@
     mode?: 'default' | 'warning' | 'confirm';
     /** Hint for button (controls tooltip and aria-label) */
     hint?: string;
+    /** Whether the hint tool-tip should be interactive */
+    hintInteractive?: boolean;
 
     // Standard button props
     children: Snippet;
@@ -20,6 +22,7 @@
   const {
     children,
     hint,
+    hintInteractive = false,
     type,
     disabled,
     onclick,
@@ -51,18 +54,21 @@
 </script>
 
 {#if hint}
-  <button
-    {onclick}
-    {type}
-    {disabled}
-    use:tooltip={{ content: hint }}
-    aria-label={hint}
-    style:--color={color}
-    style:--hoverColor={hoverColor}
-    style:--clickColor={clickColor}
-  >
-    {@render children()}
-  </button>
+  <!-- https://atomiks.github.io/tippyjs/v6/accessibility/#interactivity -->
+  <div>
+    <button
+      {onclick}
+      {type}
+      {disabled}
+      use:tooltip={{ content: hint, interactive: hintInteractive }}
+      aria-label={hint}
+      style:--color={color}
+      style:--hoverColor={hoverColor}
+      style:--clickColor={clickColor}
+    >
+      {@render children()}
+    </button>
+  </div>
 {:else}
   <button
     {onclick}

diff --git a/src/components/pickers/ColorPicker.svelte b/src/components/pickers/ColorPicker.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Button } from '$components/base';
   import { colorName } from '$lib/color';
+  import { colord } from 'colord';
 
   type Props = {
     value: string;
@@ -10,13 +11,13 @@
 
   let { value = $bindable(), oninput, required }: Props = $props();
 
-  const name = $derived(colorName(value));
+  const name = $derived(colorName(colord(value)));
 
   let picker: HTMLInputElement;
 </script>
 
 <div>
-  <Button onclick={() => picker.click()}>
+  <Button onclick={() => picker.click()} hint={value} hintInteractive>
     <div class="button-wrap">
       <span>{name}</span>
       <div class="color-preview" style:--color={value}></div>

diff --git a/src/hooks.client.ts b/src/hooks.client.ts
@@ -5,7 +5,7 @@ import consts from '$lib/consts';
 function helloWorld() {
   console.log(`%c${consts.APP_NAME}\n`, 'font-size: 3rem');
   console.log(`%cMade with <3 by ${consts.APP_AUTHOR[0]}`, 'font-size: 1.5rem');
-  console.log(`Check out the code on\n${consts.APP_GITHUB}`);
+  console.log(`Check out the code at\n${consts.APP_GITHUB}`);
 }
 
 export const init = () => {

diff --git a/src/lib/color.ts b/src/lib/color.ts
@@ -25,7 +25,7 @@ export function scaleLightness(color: Colord, factor: number): Colord {
 
 /** Return the name of the given color */
 export function colorName(color: Colord): string {
-  const rawName = colord(color).toName({ closest: true })!;
+  const rawName = color.toName({ closest: true })!;
 
   const suffixes: (string | [string, string])[] = [
     ['seagreen', 'sea-green'],