@mixin mat-typography-level-to-styles

[raciasolvo]

Bug, feature request, or proposal:

Bug or proposal

What is the current behavior?

https://github.com/angular/material2/blob/3b41c0c23e10fc74d9f687427f80c46f5da419c9/src/lib/core/typography/_typography-utils.scss#L32

@mixin mat-typography-level-to-styles($config, $level) {
  $font-size: mat-font-size($config, $level);
  $font-weight: mat-font-weight($config, $level);
  $line-height: mat-line-height($config, $level);
  $font-family: mat-font-family($config, $level);

  // Use the shorthand `font` to represent a typography level, because it's the shortest. Notes that
  // we need to use interpolation for `font-size/line-height` in order to prevent SASS from dividing
  // the two values.
  font: $font-weight #{$font-size}/#{$line-height} $font-family;
}

What is the expected behavior?

/ We rewrite the Angular Material mixin because they use the shorthand `font`
// which can't use `inherit` for `font-family`
@mixin mat-typography-level-to-styles($config, $level) {
	$font-size: mat-font-size($config, $level);
	$font-weight: mat-font-weight($config, $level);
	$line-height: mat-line-height($config, $level);
	$font-family: mat-font-family($config, $level);

	font: {
		family: $font-family;
		weight: $font-weight;
		size: $font-size;
	}
	line-height: $line-height;
}

What is the use-case or motivation for changing an existing behavior?

The shorthand font can't use inherit for font-family

// We use 'font-family' on body only and rewrite 'font-family' used Angular Material in components
// It's simple method for translating App and styling whole App
$app-typography: mat-typography-config(
  	$font-family: 'inherit'
);

// Extend Material2 Typography
$font-families: (
	en: (font-family: 'Roboto, "Helvetica Neue", sans-serif'),
	zh: (font-family: 'Roboto, "Noto Sans SC", "Helvetica Neue", sans-serif')
);
$app-typography: map_merge($app-typography, $font-families);

[crisbeto]

I think it still makes sense to use the shorthand so we can save some bytes, but we can conditionally fall back to the individual properties if the font family is inherit.

[aciccarello]

PR is #8721

[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.}