Angular 19 Material themes - system variables

I am trying to access the systems variables https://material.angular.io/guide/system-variables defined as part of angular 19 but unable to use them. Any idea on how to get the primary color using these variables ?

@include mat.theme((
color: (
primary: mat.$red-palette,
tertiary: mat.$green-palette,
theme-type: light,
use-system-variables: true
),
typography: Roboto,
density: 0
));

$primary: var(--mat-sys-primary);

@debug "primary: #{$primary}";


}


Output isnt giving me the color (hex code)

src/styles/theme.scss:32 DEBUG: primary: var(--mat-sys-primary)

Continue reading...