[M3] Dynamic colors

[igruszkauy]

Feature description

Support for dynamic colors

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Primary, Secondary colors selection available in customizer
• https://www.npmjs.com/package/@material/material-color-utilities package is integrated in customizer hooked with color color selection
• When the user selects one of the colors it will generate the theme and
  • Manual and light / dark colors are overridden
  • User needs to go back to reselect any manual colours if needed

Note: Dependent on tokens being done

Implementation brief

QA testing instructions

Demo

Changelog entry

[felipebochehin87]

@igruszkauy looks good in QA. Would you please confirm?

I edited fonts, colors, button types, etc. I inspected the source code and saw the tokens, the primary, secondary, tertiary and neutral colors.

[igruszkauy]

@emeaguiar / @PatelUtkarsh some comments:

• The preview in the editor shows the "old" color
  
• If I change the container color for a button, and then try to set the primary color, I go back to the "old" color and not the primary
• I am only able to select primary and secondary colors, I should be able to also select tertiary and neutral ones, right?
  

Usability:

• I found it hard to understand the behavior of the color picker. I would expect to be able to change the color when clicking on the color box, similar to what we do in the customizer. Also, it would be more intuitive if when clicking on the color container it would open the color palette and custom color together, also in the same way as customizer

- When I open the color palette I can't close it unless I click again on the Color palette link. I think we should provide an alternative way of closing, for example clicking outside

[emeaguiar]

Hi @igruszkauy

I am only able to select primary and secondary colors, I should be able to also select tertiary and neutral ones, right?

This is not in scope (for now) but it is planned in the future, we should probably remove that from the acceptance criteria at this point and create a new ticket to extend the colors.

The preview in the editor shows the "old" color
If I change the container color for a button, and then try to set the primary color, I go back to the "old" color and not the primary

These are bugs, working on them

I found it hard to understand the behavior of the color picker. I would expect to be able to change the color when clicking on the color box, similar to what we do in the customizer. Also, it would be more intuitive if when clicking on the color container it would open the color palette and custom color together, also in the same way as customizer

This was made to be different from customizer, BUT it should align with WordPress' behavior, which seems to have changed, I'll see if we can mimic something like the current one:

[PatelUtkarsh]

@igruszkauy @emeaguiar Should we close this one?