docs: theme generator colorpicker improvement

pdanpdan · saadeghi · web-flow · commit c7303a02f5c2 · 2025-11-28T16:52:19.000+03:00
* avoid bind:value in ThemeCSSModal because we already have a listener on it

* use a single handleKeydown listener in ColorPalette

* use colorName as key to mark colors as selected

* fix and optimize inputValue processing in ColorPalette

svelte reactivity is not very funny
the effects are called right when the value changes (not batched), and we have to be very carefull with the order different state values are changed

* track tailwind color name as well as the color value, to show the correct color name in case there's a identical value

---------

Co-authored-by: Pouya Saadeghi &lt;pouya.saadeghi@gmail.com&gt;
diff --git a/packages/docs/src/components/ColorPalette.svelte b/packages/docs/src/components/ColorPalette.svelte
@@ -22,6 +22,7 @@
   let open = $state(false)
   let inputValue = $state(value)
   let isDragging = $state(false)
+  let selectedTailwindColorName = $state(null)
   let colorState = $state({
     oklch: {},
     hsl: {},
@@ -39,53 +40,76 @@
     if (event.key === "Escape") {
       closeModal()
     } else if (event.key === "Enter") {
+      event.preventDefault()
       if (validateColor(inputValue)) {
-        value = inputValue
-        inputValue = ""
+        if (value !== inputValue) {
+          const v = inputValue
+          inputValue = ""
+          value = v
+        }
         closeModal()
       }
     }
   }
 
-  function handleDragStart(color) {
+  function handleDragStart(color, name) {
     isDragging = true
     dragPreviewColor = color
     inputValue = color
+    selectedTailwindColorName = name
   }
 
-  function handleDragOver(color) {
+  function handleDragOver(color, name) {
     if (isDragging) {
       dragPreviewColor = color
       inputValue = color
+      selectedTailwindColorName = name
     }
   }
 
   function handleDragEnd(color) {
     if (isDragging) {
-      value = color
-      inputValue = ""
+      if (value !== color) {
+        inputValue = ""
+        value = color
+      } else {
+        inputValue = color
+      }
       isDragging = false
       dragPreviewColor = null
     }
   }
 
   function handleGlobalMouseUp() {
     if (isDragging && dragPreviewColor) {
-      value = dragPreviewColor // Ensure value is updated if drag ends elsewhere
-      inputValue = ""
+      if (value !== dragPreviewColor) {
+        inputValue = ""
+        value = dragPreviewColor // Ensure value is updated if drag ends elsewhere
+      } else {
+        inputValue = dragPreviewColor
+      }
     }
     isDragging = false
     dragPreviewColor = null
   }
 
+  let inputDebounce = null
   function handleInput(event) {
-    const newValue = event.target.value
-    if (validateColor(newValue)) {
-      value = newValue
-      inputValue = ""
-    } else {
-      inputValue = newValue
+    if (inputDebounce != null) {
+      clearTimeout(inputDebounce)
     }
+    inputDebounce = setTimeout(() => {
+      inputDebounce = null
+
+      const newValue = event.target.value
+      if (validateColor(newValue) && value !== newValue) {
+        inputValue = ""
+        value = newValue
+        selectedTailwindColorName = null
+      } else {
+        inputValue = newValue
+      }
+    }, 300)
   }
 
   function toggleModal() {
@@ -111,34 +135,41 @@
     onModalStateChange(false)
   }
 
-  $effect(() => {
-    untrack(() => {
-      if (value !== inputValue) {
-        updateColorState(value)
-      }
-    })
-    inputValue = value
+  $effect.pre(() => {
+    if (open) {
+      untrack(() => {
+        if (value !== inputValue) {
+          updateColorState(value)
+        }
+      })
+      inputValue = value
+    }
   })
 
   // Update inputValue when colorState changes
-  $effect(() => {
+  $effect.pre(() => {
     const newValue = generateColorValue()
 
     untrack(() => {
-      if (inputValue !== newValue) {
+      if (newValue != null && inputValue !== newValue) {
         if (!colorState.changed) {
           colorState.value = newValue
           inputValue = newValue
         }
         value = newValue
+        if (colorState.changed) {
+          selectedTailwindColorName = null
+        }
       }
     })
   })
 
   // Get the color to display (preview during dragging, actual value otherwise)
   const displayColor = $derived(dragPreviewColor || value)
 
-  const colorName = $derived(colorDetails.find(([, color]) => color === inputValue)?.[0])
+  const colorName = $derived(
+    selectedTailwindColorName || colorDetails.find(([, color]) => color === inputValue)?.[0],
+  )
   const colorPairsMap = $derived.by(() => {
     const map = {
       color: {},
@@ -247,7 +278,7 @@
     try {
       if (colorState.mode === "oklch") {
         const { l, c, h } = colorState.oklch
-        return `oklch(${(l * 100).toFixed(1)}% ${c.toFixed(3)} ${h.toFixed(1)})`
+        return `oklch(${(l * 100).toFixed(1)}% ${c.toFixed(3)} ${h.toFixed(3)})`
       }
 
       if (colorState.mode === "hsl") {
@@ -268,7 +299,7 @@
 
       return `rgb(${colorState.rgb.r} ${colorState.rgb.g} ${colorState.rgb.b})`
     } catch {
-      return inputValue // Fallback to current value if conversion fails
+      return null
     }
   }
 </script>
@@ -398,17 +429,17 @@
             <button
               class="appearance-none p-px [writing-mode:lr]"
               aria-label={name}
-              onmousedown={() => handleDragStart(color)}
-              onmouseover={() => handleDragOver(color)}
-              onfocus={() => handleDragOver(color)}
+              onmousedown={() => handleDragStart(color, name)}
+              onmouseover={() => handleDragOver(color, name)}
+              onfocus={() => handleDragOver(color, name)}
               onmouseup={() => handleDragEnd(color)}
-              onkeypress={() => handleDragStart(color)}
+              onkeypress={() => handleDragStart(color, name)}
             >
               <div
                 class="border-base-content/10 relative grid aspect-square w-5 place-items-center rounded-full border bg-transparent select-none sm:m-px sm:w-7"
-                class:[box-shadow:0_0_0_2px_white,0_0_0_4px_black]={displayColor === color}
-                class:outline-white={displayColor === color}
-                class:outline-offset-[-3px]={displayColor === color}
+                class:[box-shadow:0_0_0_2px_white,0_0_0_4px_black]={colorName === name}
+                class:outline-white={colorName === name}
+                class:outline-offset-[-3px]={colorName === name}
                 style:background-color={color}
               >
                 {#if initials != null}
@@ -514,17 +545,8 @@
               <input
                 type="text"
                 class="grow xl:font-mono xl:normal-nums"
-                bind:value={inputValue}
+                value={inputValue}
                 oninput={handleInput}
-                onkeydown={(event) => {
-                  if (event.key === "Enter") {
-                    event.preventDefault()
-                    if (validateColor(inputValue)) {
-                      value = inputValue
-                      closeModal()
-                    }
-                  }
-                }}
                 aria-label={`${name} value`}
               />
               {#if colorName}
@@ -554,7 +576,7 @@
   <div
     class="modal-backdrop"
     onclick={closeModal}
-    onkeydown={(e) => e.key === "Enter" && closeModal()}
+    onkeydown={handleKeydown}
     role="button"
     tabindex="0"
     aria-label="Close modal"
diff --git a/packages/docs/src/components/themegenerator/ThemeCSSModal.svelte b/packages/docs/src/components/themegenerator/ThemeCSSModal.svelte
@@ -24,7 +24,8 @@
   }
 
   function handleThemeCSSInput(event) {
-    const newThemeData = parseThemeCSS(event.target.value, currentTheme)
+    themeCSS = event.target.value
+    const newThemeData = parseThemeCSS(themeCSS, currentTheme)
     if (newThemeData) {
       currentTheme = newThemeData
       if (currentTheme.type === "custom") {
@@ -114,7 +115,7 @@
       spellcheck="false"
       data-theme="dark"
       class="textarea textarea-border textarea-xs block h-96 min-h-80 w-full max-w-none resize-none font-mono"
-      bind:value={themeCSS}
+      value={themeCSS}
       oninput={handleThemeCSSInput}
     ></textarea>
   </div>
diff --git a/packages/docs/src/routes/(routes)/theme-generator/+page.svelte b/packages/docs/src/routes/(routes)/theme-generator/+page.svelte
@@ -98,18 +98,18 @@
   })
 
   const colorDetails = $derived(
-    Object.entries(data.tailwindcolors).map(([key, color]) => {
+    Object.entries(data.tailwindcolors).map(([keyTw, color]) => {
       const names = []
       const initials = []
-      for (const [key, themeColor] of Object.entries(currentTheme)) {
+      for (const [keyTheme, themeColor] of Object.entries(currentTheme)) {
         if (themeColor === color) {
-          names.push(key.replace("--color-", ""))
-          initials.push(data.colorInitials[key] || null)
+          names.push(keyTheme.replace("--color-", ""))
+          initials.push(data.colorInitials[keyTheme] || null)
         }
       }
 
       return [
-        key,
+        keyTw,
         color,
         initials.length > 0 ? `${initials[0]}${initials.length > 1 ? "+" : ""}` : null,
         names,
