Opacity slider

[varunbiniwale]

Resolves

#834

Proposed Changes

Adds a slider to the colour picker to change the opacity of colours + all the necessary plumbing to make it work

Screen.Recording.2024-06-26.at.11.17.36.mov

• Add the slider and prop to the color-picker component
• Add the handlers to the container component
• Change color functions to support an alpha value - some of this is hacky, I think scratch-paint could use some effort to work with color better - Use Paper.Color instead of CSS color strings #927?
  • eg. parse-color from npm is unmaintained, and returns inconsistently. Hex colours like #00ffb9 have an alpha of 1, and rgba output ranges from 0-1, but for hex with the alpha part (eg. #00ffb9de) the scale is from 0-255
  • I made an attempt to work with this, but it could definitely be better
• Adjust eyedropper to support alpha values (this has the side effect of making picking colors from between a gradient from opaque to transparent much more useful)

Screen.Recording.2024-06-26.at.11.18.49.mov

Reason for Changes

Adds functionality to the paint editor that was previously difficult, introduces new users to the concept of colour transparency, etc.

Test Coverage

TODO

[varunbiniwale]

Ideally this would work in both the bitmap and vector editors. Currently, certain tools in the bitmap editor (eg. paint brush and circle tool) don't support alpha.

I can either work on implementing those (increasing the surface area of changes in this PR), or limit the new opacity slider to the vector editor. I'm looking into what kinds of changes need to be done to the bitmap tools to support the alpha channel.