Where does the tertiary color actually appear in Angular Material?

I have two themes for buttons with different tertiary colors. But I don’t know where this color is actually used in the UI. when I open the page, both buttons look the same. Where does the tertiary color actually appear?

.one {
@include mat.theme((color: (theme-type: light,
primary: mat.$magenta-palette,
tertiary: mat.$red-palette,
),
));
}
.two {
@include mat.theme((color: (theme-type: light,
primary: mat.$magenta-palette,
tertiary: mat.$yellow-palette,
),
));
}
<button mat-button class="one">Button One</button>
<button mat-button class="two">Button Two</button>

Continue reading...