What are the reasons 3% is the min/max for steps?

[Beau Simensen]

I have several colors for which the color bottoms out at pure black or tops out at pure white by or before -50 or -900. In some cases, I've been able to tweak the colors manually by setting the step up or step down values to 2% or 1%. This works great! Unfortunately, when I save these colors in this state, loading them again overrides the values I manually set to 2% or 1%. This makes it look like the color was never saved and resets the step values to 1%. Since these values are different than the color I actually saved (with 2% or 1% values) it gives me the option to "save" the color again.

An example that goes to white:

https://www.tailwindshades.com/#color=180%2C37.77777777777776%2C91.17647058823529&step-up=3&step-down=3&hue-shift=0&name=aqua-squeeze&base-stop=5&overrides=e30%3D

This screenshot shows what I can see while this link is open:

This screenshot shows what happens when I manually type "1" into the step up field:

I know the UI says it only allows 3%-20%, so one could argue the fact that I can temporarily trick it at all is probably the bug. :) That said, I'm curious what reasons there are for limiting the stepping to 3% at most and whether you'd consider relaxing this restriction.

I think I found the bit of the code that normalizes this value to bottom at 3% and would be happy to send a PR adjusting this to 1%.

tailwindshades/src/components/Shades.vue

Lines 593 to 612 in 8528bb4

       let lookup = parts.find(p => p[0] === 'step-up') 
       if (lookup?.length) { 
         let stepUp = lookup[1] 
         stepUp = this.clamp(parseInt(stepUp), 3, 20) 
         this.groupOptions.stepUp = stepUp 
       } 
  
       lookup = parts.find(p => p[0] === 'step-down') 
       if (lookup?.length) { 
         let stepDown = lookup[1] 
         stepDown = this.clamp(parseInt(stepDown), 3, 20) 
         this.groupOptions.stepDown = stepDown 
       } 
  
       lookup = parts.find(p => p[0] === 'hue-shift') 
       if (lookup?.length) { 
         let hueShift = lookup[1] 
         hueShift = this.clamp(parseInt(hueShift), -100, 100) 
         this.groupOptions.hueShift = hueShift 
       } 

I'd probably also include a change to the UI to update to the 1% minimum to match the normalization on the back end.

---

Are you interested in a PR relaxing the 3% minimum? If so, are there other things you feel I should keep in mind?

Thanks for this tool. :)

[Leonidas Stratigakis]

Hello! Looking back at the 3, it doesn't really make sense. I believe allowing it to start from 0 would cover more cases.
A PR for this would be much welcomed!

The input bug is interesting, it shouldn't allow any numbers out of the specified range to be typed. I wouldn't be prioritizing fixing it though, especially if it's tricky - it can be on a separate PR