Description

When rich text has a format and when that format receives focus, then it's given a background with the current computed text color at 20% opacity, how ever the CSS for it is not always valid.

See: https://github.com/WordPress/gutenberg/blob/4ea86f891145daa12c8b59b18f02fb9fc4d83c5a/packages/rich-text/src/component/use-boundary-style.js

Step-by-step reproduction instructions

1. Open https://playground.wordpress.net/?url=%2Fwp-admin%2Fsite-editor.php
2. Click the canvas
3. Make something bold
4. The bold text has a background when focused:

5. Open Styles from top right corner:

6. Add Additional CSS:

7. Add CSS:

body {
    color: oklch(62% 0.2577 29.23);
}

8. Focused format no longer has a background color:

The CSS applied to the rich text boundary is invalid:

This would be a valid value:

background-color: color-mix(in oklab, oklch(0.62 0.2577 29.23) 20%, transparent);

The intended result with valid CSS would look like this:

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Not sure
• Hybrid (e.g. classic with theme.json)