feat: rewrite color picker and add alpha picker #337

yisibl · 2024-05-27T16:41:04Z

We've combined input range and input color into one to keep it aesthetically pleasing and harmonious on the UI.

Here are a few tips:

Bind a click event to the input range to call color.showPicker().
input range is responsible for changing the alpha, and then color-mix() mixes the color and alpha to get the new color.
The color format obtained through getComputedStyle is color(), need to be converted to rgba() by convertColorToRGBA(), because resvg-js doesn't support color().
Use anchor positioning to make the color picker's popover follow the slider thumb.

Currently only Chrome is supported.

Closes: #336

2024-05-28.00-30-21.mp4

vercel · 2024-05-27T16:41:07Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
resvg-js	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 28, 2024 3:44pm

yisibl force-pushed the add-alpha-picker branch from fd50319 to 0e0a232 Compare May 28, 2024 12:53

vercel bot deployed to Preview May 28, 2024 12:53 View deployment

yisibl force-pushed the add-alpha-picker branch from 0e0a232 to 89c61ff Compare May 28, 2024 15:34

vercel bot deployed to Preview May 28, 2024 15:34 View deployment

feat: rewrite color picker and add alpha picker

2ee456b

yisibl force-pushed the add-alpha-picker branch from 89c61ff to 2ee456b Compare May 28, 2024 15:44

vercel bot deployed to Preview May 28, 2024 15:44 View deployment

yisibl merged commit bff2e89 into main May 28, 2024
37 checks passed

yisibl deleted the add-alpha-picker branch May 28, 2024 16:10

Provide feedback