Fix gray tweaks

docs/_layouts/palette.njk

@@ -80,7 +80,7 @@
 
 {% block afterContent %}
 
-<wa-callout size="small" class="tweaked-callout" variant="warning">
+<wa-callout size="small" class="tweaked-callout" variant="warning" v-if="!isCustom">
   <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
    This palette has been tweaked.
    <div class="wa-cluster wa-gap-xs">
@@ -146,11 +146,13 @@
                   Gray undertone
                 </div>
               </wa-radio-group>
-              <color-slider coord="c" type="scale" :default-value="originalGrayChroma"
+
+              <color-slider coord="c" type="scale"
               :model-value="computedGrayChroma"
               @update:model-value="grayChroma = $event"
               :default-color="baseCoreColors[computedGrayColor]"
-              :min="0" :max="maxGrayChroma" :step="0.01"
+              :default-value="baseCoreColors[originalGrayColor].oklch.c"
+              :min="0" :max-relative="maxGrayChroma" :step="0.01"
               label="Gray colorfulness" label-min="Neutral" :label-max="moreHue[computedGrayColor]"
               ></color-slider>
             </template>

docs/assets/scripts/tweak/data.js

@@ -188,7 +188,7 @@ export const MAX_CHROMA_BOUNDS = { min: 0.08, max: 0.3 };
 /**
  * Max gray chroma (% of chroma of undertone) per hue
  */
-export const maxGrayChroma = {
+export const MAX_GRAY_CHROMA_SCALE = {
   red: 0.2,
   orange: 0.2,
   yellow: 0.25,

docs/docs/palettes/app/tweak.js

@@ -24,7 +24,7 @@ import {
   hues,
   L_RANGES,
   MAX_CHROMA_BOUNDS,
-  maxGrayChroma,
+  MAX_GRAY_CHROMA_SCALE,
   moreHue,
   ROLES,
   tints,
@@ -32,6 +32,10 @@ import {
 import { camelCase, capitalize, log, slugify, subtractAngles } from '/assets/scripts/tweak/util.js';
 
 const firstSeedColor = '#0071ec';
+const defaults = {
+  grayChroma: 0.15,
+  grayColor: 'indigo',
+};
 
 let paletteAppSpec = {
   data() {
@@ -429,8 +433,11 @@ let paletteAppSpec = {
         return this.originalColors;
       }
 
-      let { huesAfter, grayChroma = 0.15, grayColor = 'indigo' } = this;
-      return generatePalette(this.seedHues, { huesAfter, grayChroma, grayColor }) ?? this.originalColors;
+      let { huesAfter } = this;
+      return (
+        generatePalette(this.seedHues, { huesAfter, grayChroma: defaults.grayChroma, grayColor: defaults.grayColor }) ??
+        this.originalColors
+      );
     },
 
     colors() {
@@ -586,6 +593,7 @@ let paletteAppSpec = {
       let minDistance = Infinity;
       let closestHue = null;
 
+      // Find core color whose hue is closest to our gray
       for (let name in this.baseCoreColors) {
         if (name === 'gray') {
           continue;
@@ -603,13 +611,12 @@ let paletteAppSpec = {
     },
 
     originalGrayChroma() {
-      let coreTint = this.baseColors.gray.maxChromaTint;
-      let grayChroma = this.baseColors.gray[coreTint].get('oklch.c');
+      let grayChroma = this.baseColors.gray.core.get('oklch.c');
       if (grayChroma === 0 || grayChroma === null) {
         return 0;
       }
 
-      let grayColorChroma = this.baseColors[this.originalGrayColor][coreTint].get('oklch.c');
+      let grayColorChroma = this.baseColors[this.originalGrayColor].core.get('oklch.c');
       return grayChroma / grayColorChroma;
     },
 
@@ -628,7 +635,7 @@ let paletteAppSpec = {
     },
 
     maxGrayChroma() {
-      return maxGrayChroma[this.grayColor] ?? 0.3;
+      return MAX_GRAY_CHROMA_SCALE[this.grayColor] ?? 0.3;
     },
 
     huesAfter() {

docs/docs/palettes/app/vue-components/color-slider.js

@@ -3,7 +3,7 @@ const template = `
   '--color': computedColor, '--color-1': colorMin, '--color-2': colorMax,
   '--default-value-progress': defaultProgress,
   }" :data-component="coord || null">
-  <wa-slider ref="slider" :min="min" :max="max" :step="step" :value="value"
+  <wa-slider ref="slider" :min="computedMin" :max="computedMax" :step="step" :value="value"
     @input="handleInput($event.target.value);" @change="inputEnd($event.target.value)">
     <div slot="label">
       {{ label }}
@@ -53,6 +53,8 @@ export default {
     },
     min: Number,
     max: Number,
+    minRelative: Number,
+    maxRelative: Number,
     step: {
       type: Number,
       default: 1,
@@ -110,6 +112,30 @@ export default {
     delete this.$refs.slider?.colorSliderData;
   },
   computed: {
+    computedMin() {
+      if (this.minRelative !== undefined) {
+        return getAbsoluteValue({
+          type: this.type,
+          relativeValue: this.minRelative,
+          baseValue: this.computedDefaultValue,
+        });
+      }
+
+      return this.min;
+    },
+
+    computedMax() {
+      if (this.maxRelative !== undefined) {
+        return getAbsoluteValue({
+          type: this.type,
+          relativeValue: this.maxRelative,
+          baseValue: this.computedDefaultValue,
+        });
+      }
+
+      return this.max;
+    },
+
     computedColor() {
       return this.getColorAt(this.value);
     },
@@ -150,11 +176,11 @@ export default {
     },
 
     colorMin() {
-      return this.getColorAt(this.min);
+      return this.getColorAt(this.computedMin);
     },
 
     colorMax() {
-      return this.getColorAt(this.max);
+      return this.getColorAt(this.computedMax);
     },
 
     computedDefaultValue() {
@@ -172,7 +198,7 @@ export default {
     },
 
     defaultProgress() {
-      return (this.computedDefaultValue - this.min) / (this.max - this.min);
+      return (this.computedDefaultValue - this.computedMin) / (this.computedMax - this.computedMin);
     },
   },
   methods: {
@@ -279,6 +305,10 @@ function getRelativeValue({ type, absoluteValue, baseValue }) {
   }
 
   if (type === 'scale') {
+    if (!absoluteValue) {
+      return 0;
+    }
+
     return absoluteValue / baseValue;
   }