[typography] global typography variables no longer work as before in V5

Bug report

Steps to reproduce

When setting global typography variables I used to be able to do the following and it worked.

$mdc-typography-font-family: 'Gotham SSm A', 'Gotham SSm B', arial, sans-serif;
$mdc-typography-styles-button: ( font-size: 0.95rem );
$mdc-typography-styles-body1: (font-size: 1rem ); 
$mdc-typography-styles-headline6: (font-size: 1.1rem); 

@import '~material-components-web/material-components-web';

However in version 5 the above does not work

I tried to use something like the following but the styles do not get updated

$mdc-typography-font-family: 'Gotham SSm A', 'Gotham SSm B', arial, sans-serif;
$mdc-typography-styles-button: ( font-size: 0.95rem );
$mdc-typography-styles-body1: (font-size: 1rem ); 
$mdc-typography-styles-headline6: (font-size: 1.1rem); 

@use '@material/typography' ; //or @use material-components..

I was able to make the font-family work by using the following

$gotham-font-family: unquote("'Gotham SSm A', 'Gotham SSm B', arial, sans-serif");

@use '@material/typography' with (
    $font-family: $gotham-font-family,

);

I do not know how to set the styles using this method however.

Actual behavior

styles are not getting set in the material components

Expected behavior

styles should be set for material components

Screenshots

Your Environment:

Software	Version(s)
MDC Web	5
Browser
Operating System

[asyncLiz]

So a couple of discoveries. The material-components-web combined package uses the module system exclusively. If you’re using it, you will need to use the module system to define the font family variable;

@use '@material/typography' with (
  $font-family: Arial
);

@import 'material-components-web/material-components-web';

If you’re using the individual packages, this is not necessary because they have backwards-compatible import files.

$mdc-typography-font-family: Arial;

@import '@material/typography/mdc-typography';

I would personally recommend using npm i material-components-web as a handy way to install everything, but then import individual packages that you use. That way you’re not generating extra CSS.

The $mdc-typography-styles-<STYLE> global variables are not working. I’ll keep investigating why and how we could fix it.

[asyncLiz]

Fixed in #5643. The Override Styles section of the readme now includes how you can customize with global variables, sass module variables, or CSS custom properties.