Theming cannot use css variables

[GabrielInTheWorld]

What is the expected behavior?

I have a theme-palette filled by variables (like var(--theme-primary-500)). I expect, that I can use the pbl-ngrid-theme with that theme-palette.

What is the current behavior?

Currently, if I have a theme-palette like described, an error is thrown:

Error in turbo_modules/@pebula/[email protected]/_theming.scss (849:25)
$color: var(--theme-primary-500) is not a color.
╷
849 │ background-color: transparentize($cell-focus-color, 0.75);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
../turbo_modules/@pebula/[email protected]/_theming.scss 849:25 pbl-ngrid-theme()
../~/src/styles.scss 83:1 root stylesheet

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz to reproduce: Stackblitz

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

The error was seen in the following configuration:

@angular/x: 8.x.x
@pebula/ngrid*: 3.1.4

as well as

@angular/x: 12.x.x
@pebula/ngrid*: 4.0.0-alpha.3