Refactor: allHues = hues + gray

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 = {

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] = {};
       }
 

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;
     },