CSS Variables nesting is not behaving as expected when overriding the nested variable

Question

Consider the following example:

body {
  --my-color: blue;
  --my-other-color: var(--my-color);
}

h1 {
  --my-color: red;
  color: var(--my-other-color);
}

Stackbliz: https://stackblitz.com/edit/css-variable-nesting-issue?file=style.css

I expect h1 to have the color red, since it is the color of --my-other-color which is --my-color which is red. But for some reason it gets the color blue.

I feel like this is a bug.

Is this the expected behavior?
Is there a way to make it behave like I want to?

Example use case

Let's say I'm making a CSS library and I want to enable to consumers to customize my components easily. Let's say I have this variable:

--theme-primary-color

Which is the theme primary color of the components in my library. I also have a the following variable:

--btn-primary-color

Which is the color of a "primary" button.

I want the button to take whatever color of --theme-primary-color unless the consumer defined an explicit different color for --btn-primary-color.