Color highlighted text in the text editor using CSS variable

When text is highlighted in the text editor, and I press the ‘Text Color’ button… if I enter a CSS variable, the var gets ignored. How do I enter a CSS variable for highlighted text using the text editor?

For example:

Is the above the wrong way to do it?

If instead, I drag a span or bold into a heading to color part of the text, non-breaking spaces get added either side of the span. Only way to get rid of them seems to be to paste in a plain space from a text editor to replace the non-breaking space.

Neither situation is ideal. Is there something I’m doing wrong? Or is this an issue needs fixed?