I'm just checking out the latest angular material and am having trouble figuring out how to do basic styling. They seem to have done away with helper classes and want you to use css variables, is that right? Just to try it out and see how it works I wanted to create a basic nav bar:

And the CSS for it:

nav {
    background-color: var(--mat-sys-inverse-surface);
    color: var(--mat-sys-inverse-on-surface);
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;

    a {
        color: inherit;
        text-decoration: none;
        font: var(--mat-sys-title-small);
        &.home {
            font: var(--mat-sys-title-large);
        }
        &:hover {
            text-decoration: underline;
        }
    }
}

Is this the proper way to do it? If it is, is there a good reference for classes that can or should be used? The best way I've found to find them is just to look at the classes in one of the prebuilt theme css files. I've created a dev page for colors at least so I can see my theme colors with the class names easily, but I'm surprised there's not something on their website for the same thing.