[format/highlights] Block-level color specificity issues when a text block has a block-level color set

[fullofcaffeine]

Description

This issue is threefold:

1. Gutenberg had a bug (issue, fix) in its recently-refactored Highlight tool that required a transparent background color to be applied to all marks by default if no background is set, to prevent the marks default yellow background. This effectively means that - as far as the Highilight tool/format algorithm are concerned - that the mark always has a background color (even if transparent), which means that if you clear the color, the mark tag is not removed from the DOM, until you also remove the background color, that is (even if it wasn't explicitly set!);
2. The mark tag has a default color CSS rule that is more specific than the rules applied at its parent (in this case the paragraph and heading blocks). This means that this will apply until the mark is removed (which means clearing the color and background color).
3. This actually can cause another issue: if the text has a block-level color set and you apply only a background color using the Highlight tool, the actual block-level text color is lost and you get the mark's text color instead.

Step-by-step reproduction instructions

Clearing the highlight text color is not enough to recover the block-level color:

1. Start a new post, write something in a paragraph or heading block.
2. Select this block, and in its settings, apply a color.
3. Now select the text, and using the Highlight tool apply a text color (not a background color).
4. Select the same text again and using the Highlight tool, clear the text color.
5. Observe how the text doesn't have the block-level color you set in step 1.
6. To recover the color, you need to clear the background color in the Highlight tool, too, even though you did not set any.

Applying a background color using the Highlight tool overrides the block-level text color, too

1. Start a new post, write something in a paragraph or heading block.
2. Select this block, and in its settings, apply a color.
3. Now select the text, and using the Highlight tool apply a background color only.
4. Observe how the text doesn't have the block-level color you set in step 1, even though intuitively you'd think it would, as you did not set any color for this highlight selection.
5. To recover the color, you need to clear the background color in the Highlight tool.

Screenshots, screen recording, code snippet

Peek.2021-11-16.11-31.mp4

Peek.2021-11-16.12-06.mp4

Environment info

Wodpress 5.8.1, Gutenberg 11.9.0
Firefox 95.0b7 (64-bit)
Ubuntu Linux 18.04

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

[fullofcaffeine]

cc @ellatrix

[fullofcaffeine]

@ellatrix Thanks for working on a fix! I can now set a highlight color and clearing it is enough to recover the block-level color, if any :)

The other scenario is still a problem though. If you apply a background highlight, the mark's default color will override the block-level's p color:

Peek.2021-12-21.13-08.mp4

Using Gutenberg 12.2 RC1.