Description

When you add the custom colors, that name has a number at the end on Global Styles. You can add the color, select the site's colors, and save. But the color doesn't reflect the site.

The auto-generated CSS variable name for the colors and the CSS variable name that is assigned to an element seems different. It is caused by the presence or absence of hyphens.

related: #53695

Step-by-step reproduction instructions

1. Go to "Editor"
2. Go to "Styles"
3. Click "Colors"
4. Go to "PALETTE"
5. Add a custom color named like "name1"
6. Back to "Styles"
7. Set the new custom color to the Background color
8. Click "Save"

Screenshots, screen recording, code snippet

Environment info

It reproduces whether Gutenberg is enabled or not.

WordPress: 6.4 RC2
Browser: Chrome 117.0.5938.149
OS: Mac OS 12.5.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes