How theming - css variables works?

[yeion7]

I have been trying to wrap my head around how theming works, but there is something that I can't get it

For example tooltip

The css module that is importing the component definition is using these css vars

But then, in the css default theme definition these vars

The more confusing thing for me is

Storybook seems to be having the same variables than the css module definition

But when I installed @adobe/react-spectrum@3.10.0 and I used the Tooltip component, it's not using those variables

(codesandbox to inspect tooltip css)

How theming works? there is a way to how what variables includes each component?

[snowystinger]

Ah, those variables are coming from node_modules/@spectrum-css/vars/dist/components/spectrum-tooltip.css when we build
We haven't begun keeping the tokens as API yet because we're still working with our CSS team to solve some issues
For now, be careful using them