Typography mixin doesn't fully generate CSS when included in :host selectors.

[simeonoff]

Consider the following scenario. When the typography mixin is included in the :host selector of a component.

:host {
   @include typography(...);
}

This code will only produce CSS variables related to the type styles of the type scale. This is an intentional design decision, as we don't want to include element or class selectors referring to the same CSS variables every time we create scoped typography as in the case above. The typography mixin should only include classes and element selector when declared in the root of the stylesheet.

So essentially, one would have to do this in a stylesheet of a component:

// Includes all CSS variables, element and class selectors
@include typography(...);

:host {
   // Include only CSS variables, overriding the ones included by the previous typography declaration
   @include typography(...);
}

This approach works well in most cases, however, I can see that some people would want to treat the :host scope as the limiting scope. For that reason, let's treat the :host scope the same as :root and include all classes and element selectors when the typography is included in there, meaning that the following is equivalent to the previous example:

:host {
    // Includes all CSS variables, elements, and class selectors
    @include typography(...);

   .custom-typography {
       // Include only CSS variables, overriding the ones included by the previous typography declaration
       @include typography(...);
   }
}