Theme color palette not showing colors with conflicting slug in default color palette

[sagarnasit]

Description

Two different color palettes are shown on the editor, one with the default color palette of core and another with the theme's color palette set via theme.json.

The problem occurs when the theme color palette includes the same color slugs as the default color palette options. In this case, the theme color palette should take precedence over the default color palette of the same slug. The same thing applies to CSS color variables, the default color variable overrides the theme's color variable.

Colors with conflicting slugs do not appear on the color palette even with the defaultPalette setting being disabled.

Current behavior

• Theme color palette does not show colors that conflict with default color palette slugs.
• CSS variable of default color palettes overrides the theme's color palette variables.

Expected behavior

• Theme color palette should take precedence over the default color palette for the conflicting slug.
• Theme's color should override the CSS variable with the conflicting slug of the default color palette.

Step-by-step reproduction instructions

1. Create a theme color palette with the color slug same as the default color palette.

"palette": [
	  {
	      "slug": "black",
	      "color": "#1D1D1D",
	      "name": "Black"
	  },
	  {
	      "slug": "white",
	      "color": "#FFFFFF",
	      "name": "White"
	  },
	 {
            "slug": "primary",
            "color": "#DB5D5D",
            "name": "Primary"
      },
]

White and Black color has the conflicting slug from the default color palette.

2. Open an editor and look for a block that supports the color palette. No black and white color options are available under the theme color palette.

3. Open frontend for CSS variable value. Black color CSS variables is overridden by default color palette's black color.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress: 5.8.2
• Gutenberg: 12.1.0
• Theme: Custom block theme
• Browser: Version 98.0.4755.0 (Official Build) canary (x86_64)
• OS: Mac OS Catalina

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

[chthonic-ds]

See #36772 and #37008 for how this is being managed in WP 5.9.

[ndiego]

Yes, this will be resolved in 5.9 if defaultPalette is set to false in theme.json. Therefore, I believe this issue can be closed.

[markhowellsmead]

This is still an issue in 5.9, whether or not defaultPalette is true. White and black are never displayed in the Theme palette.

[sagarnasit]

Conflicting colors are not displayed on the color palette, but the CSS variables generated on the frontend are using the theme's color palette values when defaultPalette is false.

[chthonic-ds]

Using 5.9 (Gutenberg is not active), I see "white" and "black" displayed correctly in the theme palette.

Theme palette:

theme.json:

[sagarnasit]

Works as expected after updating the Gutenberg plugin version. Closing the issue.

[markhowellsmead]

Confirmed in 5.9 without the plugin active and in a clean install. With "defaultPalette": false, white and black set in the theme palette are correctly shown. The issue must lie in my custom theme.