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 #33714)
• #34286
• #34289
• #34795
• Match design proposal: (#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.
  • #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.
• #34487
• #35675
• #35677

Integration

• Add deprecated props adapter to transform the props for the "legacy" ColorPicker into the new format (done in #34014)
• #34287
• Enable Alpha and close #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:

• #19785
• #29544
• #28758
• #26568
• #22890 (with open PR #26770)
• #36314