We are working on a new version of CSS variables that will release very soon. In the new version you can declare variables globally, making them available everywhere.
However, if not declared globally the variables are only available inside a component (this is how the current system works, always). The reason that you do not see the variable in sub-components is that the component has no way of knowing who their parent may be, as a component may be used by multiple parent elements. At compile-time, a component knows its children, but not parents, so we cannot show the inherited variables in the dropdown.
In addition to defining variables globally, the new CSS variable system has other options to declare what variables a component should be able to use. We will write documentation on this before release 🙂
.jpeg/public)