From badc6c9dc2715b14e9f99da88729e475d75cd229 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 17 Mar 2025 04:52:10 -0400
Subject: [PATCH] Refactor: allHues = hues + gray

---
 docs/assets/scripts/tweak/data.js             |  1 +
 docs/docs/palettes/app/tweak.js               |  3 ++-
 .../app/vue-components/color-input.js         | 21 ++++++++++++-------
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/docs/assets/scripts/tweak/data.js b/docs/assets/scripts/tweak/data.js
index f33865a5e..eef4d1112 100644
--- a/docs/assets/scripts/tweak/data.js
+++ b/docs/assets/scripts/tweak/data.js
@@ -43,6 +43,7 @@ export const HUE_RANGES = {
 };
 
 export const hues = Object.keys(HUE_RANGES);
+export const allHues = [...hues, 'gray'];
 export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
 
 export const L_RANGES = {
diff --git a/docs/docs/palettes/app/tweak.js b/docs/docs/palettes/app/tweak.js
index 75eddafa4..2edec45ef 100644
--- a/docs/docs/palettes/app/tweak.js
+++ b/docs/docs/palettes/app/tweak.js
@@ -16,6 +16,7 @@ import InfoTip from './vue-components/info-tip.js';
 import Prism from '/assets/scripts/prism.js';
 import { Permalink } from '/assets/scripts/tweak.js';
 import {
+  allHues,
   cdnUrl,
   HUE_RANGES,
   hueAfter,
@@ -288,7 +289,7 @@ let paletteAppSpec = {
     colorToIndex() {
       let ret = {};
 
-      for (let hue of [...hues, 'gray']) {
+      for (let hue of allHues) {
         ret[hue] = {};
       }
 
diff --git a/docs/docs/palettes/app/vue-components/color-input.js b/docs/docs/palettes/app/vue-components/color-input.js
index 3bfde4a73..421c3bd9f 100644
--- a/docs/docs/palettes/app/vue-components/color-input.js
+++ b/docs/docs/palettes/app/vue-components/color-input.js
@@ -39,7 +39,7 @@ import { identifyColor } from '../color/util.js';
 import ColorPopup from './color-popup.js';
 import ColorSlider from './color-slider.js';
 import InfoTip from './info-tip.js';
-import { ROLES } from '/assets/scripts/tweak/data.js';
+import { ROLES, allHues } from '/assets/scripts/tweak/data.js';
 import { capitalize } from '/assets/scripts/tweak/util.js';
 
 await customElements.whenDefined('wa-select');
@@ -92,7 +92,6 @@ export default {
     let inputColor = tryColor(inputValueRaw);
 
     return {
-      ROLES,
       uid,
       initialProps: { ...this.modelValue },
       valueRaw,
@@ -107,6 +106,10 @@ export default {
       watching: {},
     };
   },
+  created() {
+    // Non-reactive variables to expose
+    Object.assign(this, { ROLES, allHues });
+  },
   computed: {
     inputLCH() {
       return this.inputColor?.oklch;
@@ -144,11 +147,7 @@ export default {
     },
 
     colorInfo() {
-      if (!this.color) {
-        return { hue: this.pinnedHue, level: undefined };
-      }
-
-      let ret = identifyColor(this.color, this.otherColors);
+      let ret = { ...this.detectedColorInfo };
 
       if (this.pinnedHue) {
         ret.hue = this.pinnedHue;
@@ -157,6 +156,14 @@ export default {
       return ret;
     },
 
+    detectedColorInfo() {
+      if (!this.color) {
+        return { hue: undefined, level: undefined };
+      }
+
+      return identifyColor(this.color, this.otherColors);
+    },
+
     hue() {
       return this.colorInfo.hue;
     },