Why does my angular 18 material design tokens not override theme?

I'm currently trying out the design tokens on Angular 18.2.10. I've ran into in an issue with my project when applying the design tokens override for a slide toggle. It seems that some style overrides the angular material azure theme while others are not. I cannot find a way to reproduce it in Stackblitz so I'll try to provide as much information as possible:

My folder structure: I've a styles.scss with @forward './assets/styles/main.scss'; only in it. In my assets folder I have two style sheets a main.scss and _variables.scss. Main's content is: @forward './_variables';. In _variables.scss is where the magic is happening.

_variables.scss:

@use '@angular/material' as mat;

$white-0: #ffffff;
$grey-600: #72777e;
$grey-800: #3c4046;
$grey-1000: #15181b;

:root {
@include mat.slide-toggle-overrides((
unselected-track-color: $grey-800,
unselected-icon-color: $grey-1000,
unselected-pressed-track-color: $grey-800,
unselected-hover-track-color: $grey-800,
unselected-focus-track-color: $grey-800,
unselected-handle-color: $grey-600,
selected-icon-color: $grey-1000,
selected-handle-color: $white-0,
selected-focus-handle-color: $white-0,
selected-track-color: $grey-800,
));
}


This is what I see in the console:





How do I make sure that my styling overrides the azure-blue theme?

Continue reading...