what is the scope of style variables?
can someone clarify the expected scope of style variables ? i declared some style variables at the root element of the page i 'm working in . inside that root div , i can see them available in the style panel as expected . however , in children of this div , sometimes they seem available and sometimes not . for example , inside one child component , referencing - -font -color works as expected . however , in a different child component , referencing - -font -color -secondary is not working . are there rules regarding where these declared style variables can be used ? what is the scope of style variables ? 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 🙂 🤶1I cannot explain why it seems to sometimes be available and sometimes not in your examples though 🤔 🎅1Thanks Jacob ! That confirms my understanding - my CSS variables declared in the root div of my page should be available to all child components (just not the dropdown menus in the UI ) . Must be a bug in my code then 🙂 (edit : can confirm was me being dumb again )
