overide css vars in extended class

[ahoyahoy]

Describe your issue

Hi there, I would expect it to work like this, but it doesn't --color variable is not overloaded

.header {
    -st-extends: Header;

    --color: yellow;
}

https://stylable.io/playground?filePath=%2Fsrc%2Fapp.st.css&projectId=f7W7fFEOQIPF3cE8E5eb&type=code

I couldn't find it in the documentation, but here it is used as I tried. https://github.com/wixplosives/stylable-examples/blob/master/component-library/src/components/button/variants.st.css

Additional Context

No response

[idoros]

In Stylable, custom-properties are namespaced, meaning --color in one stylesheet is not the same as --color in another stylesheet. To use a custom-property from another stylesheet, you need to import it:

@st-import Header, [ --color ] from './header.st.css';

.header {
    -st-extends: Header;
    --color: yellow;
}

[ahoyahoy]

thanks! now I see it :)