Trouble accessing v18 variables in SCSS.

[SippieCup]

I have a bit of confusion about if/when I can use selectors or if I am doing something just wrong in the setup of v18.

in my component, i can just grab the root color with $dt and it works like a charm.

cardRootColor = $dt('card.root.color'); 

 { "name": "--p-card-color", "variable": "var(--p-card-color)", "value": "light-dark(#334155,#ffffff)" } 

which is correct. However, if I try to reference the variable in the global styles.scss:

@layer material-prime-interop {
  .mat-mdc-card,
  mat-card {
    background: var(--p-card-background) !important;
    color: var(--p-card-color) !important;
  }
}

It says --p-card-background & --p-card-color are not set.

that said, if i set the color to a semantic value, like --p-surface-900 It does work.

Can you not use component variables in css? seems like something arbitrary or a bug in my implementation.

I'm trying to migrate things over to build off primeng, thus "reskinning" to match primeng would be ideal, but I feel like im doing something wrong if I can't access those variables in the CSS.

[jonathancourtoy]

The same need here. I would like to use variables of inputtext, but only available if an inputtext has been loaded before.
Did you find a way to do that ?