[M3] Color and Background color to support M3 tokens

[igruszkauy]

Feature description

---

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

Acceptance criteria

• The user can use M3 tokens from Gutenberg

Implementation brief

QA testing instructions

• User is able to choose any of the M3 colors registred

Demo

Changelog entry

[PatelUtkarsh]

Using Gutenberg's default color picker, It should display m3 tokens for text and background colors.

@emeaguiar This is different from customizer.

[mattchungxwp]

Confirm with @rodydavis : Should we continue to use static palette or generated M3 colors?

[rodydavis]

Use the new generated ones!

[PatelUtkarsh]

QA note: Gutenberg text and background color should show m3 token:

[felipebochehin87]

@igruszkauy @PatelUtkarsh the functionality looks good so far. Tested using https://dev-mdc-web.pantheonsite.io/wp-admin/post.php?post=2665&action=edit

1. Added a Media & Text block
2. Clicked on the text
3. Opened More Settings Menu
4. Changed color (background and text)
5. Selected default colors and also custom colors

My questions are (and I'm opening as questions because I'd like to confirm if that's expected before saying it's a bug):

1. We have a "check" on the selected color, but this check is white. This makes the check invisible when we select the white color. Is it possible (and necessary) to change the color of the check when the selected color is white so that the check is visible?
2. The custom color is not displayed on the list of colors. Is that expected? Click on Custom color, select a color, collapse the color picker, expand the color picker - the custom color remains applied to the text, but it is not listed in the color picker. Should we display the color and the check on it to show what color is selected?

[igruszkauy]

@felipebochehin87 thank you for the questions!

• The check and font color of the name of the color should be white/black depending on the selected color
• Custom color is displayed, I think you need to re-test, this is what I am seeing now:
  @emeaguiar I think I missed what we agreed with the name of the color? Currently showing the css name

[felipebochehin87]

Thanks @igruszkauy !!

About my second question: I thought that the custom color was supposed to be displayed along with the other colors, in a circle, just like the others. Now I see, the custom will be displayed on the rectangle. Thanks! :)

And about the first, yeah, I don't see the check when I select white.

[igruszkauy]

Verified via: https://dev-mdc-web.pantheonsite.io/2744-2/

1. Added a paragraph, I can change the color and background using M3 colorshttps://dev-mdc-web.pantheonsite.io/2744-2/
2. When updating source color from customizer, the color and background from paragraph are updated

Known issues that need to be handled by core:

1. Name of the color to be more user friendly

2. Color of the font for the name of the color is white and can't be seen when selecting a light color