This is an overview issue to track all of the tasks necessary to update the ColorPicker component with the new design and primitives.

Component

• Add experimental ColorPicker component to the repo (done in components: Add new ColorPicker #33714)
• Components: use colord instead of tinycolor2 in ColorPicker #34286
• Components: add reset timeout to ColorPicker's copy functionality #34289
• Components: enable "copy to clipboard" functionality with keyboard #34795
• Match design proposal: (Enhance the new color picker design #34598)
  • Adjust the white border on the circle controls to match design (compare storybook with design mockup).
  • The input padding is off, not sure if this is something we need to affect on all inputs or we can just start with the input + slider case.
  • Spacing between slider and input is off.
  • Icons: update settings icon to latest version #34288
  • Use the new settings icon from wp/icons.
  • the color format dropdown should be rendered without borders (not sure how we want to handle this at the component level since it should be an optional thing used rarely)
  • Adjust circular handle of slider since it's too big compared to designs
• Follow-up tasks following previous design enhancement PR:
  • Redesign the input fields taking into consideration the new border color and height (removing specific height from this component).
  • Improve the RangeControl making the focus work on safari and implementing the new focus design.
  • Address the glitch with circle borders/shadows on chrome.
• Components: Support the EyeDropper API in ColorPicker #34487
• Components: ColorPicker "vibrates" when moving the circle slowly #35675
• Components: ColorPicker closes randomly on occasions when trying to interact with it #35677
• ColorPicker: allow customisation of the auxiliary controls #38065
• GradientPicker: allow custom ColorPicker #38066

Integration

• Add deprecated props adapter to transform the props for the "legacy" ColorPicker into the new format (done in components: Add deprecated props adapter for ColorPicker #34014)
• Components: replace legacy ColorPicker with new version #34287
• Enable Alpha and close Add background colour transparency to blocks that support background colour #18095

Related issues

I've also found a list of open issues/PRs that will likely be closed (or should otherwise be fixed) as a consequence of the work carried out in the tasks above:

• Iterating on the color picker #19785
• Color Picker component causes horizontal scrollbars in Block Settings sidebar #29544
• Changing the Alpha Slider on Color Picker changes RGB values on some colors #28758
• Alpha-enabled color-picker component doesn't run onChangeComplete when changed from the form #26568
• Code Quality: Refactor all React class components to functional components using hooks #22890 (with open PR Refactor: ColorPicker to use hooks #26770)
• ColorPicker enableAlpha=true breakes after alpha set to 100% #36314
• ColorPicker's colorspace not respected for output #11791