feat(theming): support font-family css variable

[esotrope]

Before, the material font-family could only be set at application build-time. Now, developers can modify the material font-family at runtime by setting the --mat-font-family css variable. This will greatly improve the application's ability to be themed dynamically at runtime and with WYSIWYG material theme editors.

This commit partially addresses this feature request: #4352

[esotrope]

Example usage in Angular:

// styles.scss
@import '~@angular/material/theming';

$typography-config: map-merge(
    mat-typography-config(),
    (use-css-variables: true)
);

@include mat-core($typography-config);

// app.component.ts
@Component({
  selector: 'app-root',
  template: `
    <h1>Font Family CSS Variable Demo</h1>
  `
})
export class AppComponent {

  constructor(private element: ElementRef) {
    this.element.nativeElement.style.setProperty('--mat-font-family', 'Comic Sans MS');
  }

}

[esotrope]

closing to simplify developer setup using suggested @mixin on thread

[esotrope]

These methods can be reused when expanding css variable support to colors

[esotrope]

convenience method to wrap mat-font-family calls and provide the necessary css-variable css rules

[esotrope]

Demo of setting the --mat-font-family css variable:

[crisbeto]

I don't think we can do this only for font-family, without getting requests to do it for literally everything else that's using Sass variables at the moment, which we probably can't do, because the fallback approach will balloon the bundle size. The reason we haven't started using CSS variables in the first place is that we have to support IE11 for the foreseeable future.

[jelbourn]

Thanks for the PR!

We unfortunately cannot use CSS variables until we end support for IE11. Once that happens, we will most likely change the entire theming system to use them. See #7374

[esotrope]

Thank you for the quick feedback!

This will be bad news for my client however.
Would people be open to creating a parallel _theming.scss (maybe _css-variable-based-theming.scss) which people can optionally include instead to mitigate the bundle size issue?

I understand this would not be fun to maintain as it would likely necessitate parallel scss partials for all existing component stylesheets. However, I'm still curious if a PR of that nature would be welcome since i will likely be developing the code regardless of whether or not the main angular/material2 repo adopts it : /

[jelbourn]

We unfortunately don't have the resources to maintain two parallel sets of theming approaches. If there were tooling that automatically did this, perhaps, but that would be a pretty significant undertaking.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}