@mixin mat-typography-level-to-styles #8700
Description
Bug, feature request, or proposal:
Bug or proposal
What is the current behavior?
@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);