From 01c908e919032b7ca908d2fc0ce98ca6b6ae6575 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Fri, 17 Apr 2026 14:08:57 -0400
Subject: [PATCH] fix: color picker selection keyed on name instead of hex

Classic Rose Gold and Chrome Rose Gold share the same hex (#B76E79),
so clicking one would deselect the other. Switched all selection
checks (toggle, remove, highlight) to use color.name which is unique.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 main-site/color/script.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/main-site/color/script.js b/main-site/color/script.js
index 33f6bc4..83d38c6 100644
--- a/main-site/color/script.js
+++ b/main-site/color/script.js
@@ -130,7 +130,7 @@ function createColorSwatch(color) {
 
   const swatch = document.createElement('div');
   swatch.classList.add('color-swatch');
-  swatch.dataset.color = color.hex;
+  swatch.dataset.color = color.name;
   swatch.style.color = color.hex;
   swatch.setAttribute('role', 'button');
   swatch.setAttribute('tabindex', '0');
@@ -171,9 +171,9 @@ function createColorSwatch(color) {
   colorName.textContent = color.name;
 
   swatch.addEventListener('click', () => {
-    const isSelected = selectedPalette.some(c => c.hex === color.hex);
+    const isSelected = selectedPalette.some(c => c.name === color.name);
     if (isSelected) {
-      selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
+      selectedPalette = selectedPalette.filter(c => c.name !== color.name);
     } else {
       selectedPalette.push(color);
     }
@@ -432,7 +432,7 @@ function renderSelectedPalette() {
     swatchWrapper.appendChild(colorName);
 
     swatch.addEventListener('click', () => {
-      selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
+      selectedPalette = selectedPalette.filter(c => c.name !== color.name);
       renderSelectedPalette();
       updateSwatchHighlights();
     });
@@ -460,7 +460,7 @@ function updateSwatchHighlights() {
     const color = swatch.dataset.color;
     const background = swatch.querySelector('.color-background');
     const nameEl = swatch.parentElement.querySelector('.color-name');
-    const isSelected = selectedPalette.some(c => c.hex === color);
+    const isSelected = selectedPalette.some(c => c.name === color);
 
     if (isSelected) {
       background.classList.add('chosen');