mat-typography specificity #14597
Description
Please describe the feature you would like to request.
Currently, if you apply mat-typography, the tag rules will be more specific than the class rules. I'm proposing we make the class rules more specific when the mat-typography class is applied. This way, you have your cake (sensible defaults on tags) and eat it too (control over typography based on your style guide).
What is the use-case or motivation for this proposal?
<body class="mat-typography">
<h1 class="mat-subheading-1">Title</h1>
</body>
This way, I can say that this is semantically an h1, but I can style it as a mat-subheading-1.
Is there anything else we should know?
There are two simple fixes for this, both of which I doubt would impact anyone negatively:
- something like this at the end of _typography.scss
.mat-typography {
@include mat-base-typography($app-typography, ".mat-typography-tags-override-classes");
}
- for each class, add additional selectors to each rule with #{$selector} as an ancestor, like changing:
.mat-h1, .mat-headline, #{$selector} h1, #{$selector} .mat-h1, #{$selector} .mat-headline {
@include mat-typography-level-to-styles($config, headline);
margin: 0 0 16px;
}
to:
.mat-h1, .mat-headline, #{$selector} h1, #{$selector} .mat-h1, #{$selector} .mat-headline {
@include mat-typography-level-to-styles($config, headline);
margin: 0 0 16px;
}